/* Halesnax case study (a millet snack brand's logo, packaging, photography direction and gifting box):
   the shared sheet. Each look adds its own (e2-halesnax-a ... -d.css). Markup: src/_includes/e2/halesnax/*.njk.
   The page frame stays the dark E2 template; only the sections wear the brand's palette, scoped by `bx bx-halesnax` on the case study's head and body
   (csClass in src/_includes/e2/case-study.njk). */

/* Her packaging palette: the 11 colours on her Halesnax colour board (sampled; she printed no values), plus the deep maroon and the red of her
   boards' own grounds. halesnaxKit.json `palette` lists the 11 and maps 10 of them to the packs; the cream is every pack's base.
   Contrast: cream on maroon 11.5:1, maroon on cream 11.5:1, yellow on maroon 5.6:1; yellow on red is 2.6:1 and cream on red 4.4:1, so the red
   field takes her logo and art, while running text sits on cream or maroon. */
.bx-halesnax {
  --bx-red: #c54328; --bx-maroon: #6f2114; --bx-yellow: #f8ad00; --bx-cream: #eee7da;
  --hx-purple: #80479a; --hx-green: #2f8959; --hx-lime: #ccd74d; --hx-lilac: #d5b2d4; --hx-crimson: #b92a61; --hx-blue: #415ba7;
  --hx-pink: #d3509c; --hx-teal: #2c8b8d;
  --bx-bg: var(--bx-red); --bx-ink: var(--bx-cream); --bx-accent: var(--bx-yellow); --bx-deep: var(--bx-maroon); --bx-paper: var(--bx-cream);
  --bx-font: 'Poppins', var(--font);
}

/* ---------- A section: a full-bleed band in the brand's palette ---------- */
/* The case study's text column is max-width, so a band breaks out to the viewport (body clips the scrollbar's extra width); its content
   returns to the site's own width and gutter (--max, --pad from e2.css). */
.bx-sec {
  position: relative; display: grid; width: 100vw; margin-inline: calc(50% - 50vw);
  padding: clamp(64px, 9vw, 128px) var(--pad); background: var(--bx-bg); color: var(--bx-ink);
}
.bx-sec__in { width: 100%; max-width: var(--max); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.bx-hero { min-height: clamp(360px, 52vw, 640px); align-content: center; }

/* ---------- The story text and the bands, one continuous brand surface ---------- */
/* The case-study body is a flex column with a 64-120px gap (e2.css .e2-cs__body > .e2-wrap); on a brand page that gap would show the black page
   between two coloured bands, so bands pull up over it and the story itself sits on the brand's paper. */
.e2-cs__body.bx { background: var(--bx-paper); color: var(--bx-deep); padding-bottom: 0; }
.e2-cs__body.bx .e2-cs__storytitle { color: var(--bx-deep); font-family: var(--bx-font); }
.e2-cs__body.bx .e2-cs__story p { color: color-mix(in srgb, var(--bx-deep) 86%, transparent); font-family: var(--bx-font); }
.e2-cs__body.bx > .e2-wrap > .bx-sec { margin-block: 0; }
.e2-cs__body.bx > .e2-wrap > .bx-sec:first-of-type { margin-top: 0; }
.e2-cs__body.bx > .e2-wrap > .bx-sec + .bx-sec { margin-top: calc(-1 * clamp(64px, 8vw, 120px)); }
.e2-cs__body.bx > .e2-wrap > .bx-sec:last-child { margin-bottom: 0; }

/* The case study's facts column ("What we worked on", Timeline) sits in the story on the brand's paper: the dark template's greys
   (#8b8b93 labels, #c4c4cb values) all but vanish on cream, so they take the brand's deep ink. */
.e2-cs__body.bx .e2-cs__label { color: color-mix(in srgb, var(--bx-deep) 78%, var(--bx-paper)); }
.e2-cs__body.bx .e2-cs__value, .e2-cs__body.bx .e2-cs__fact li, .e2-cs__body.bx .e2-cs__facts li { color: var(--bx-deep); }
/* A combined look can stack two heroes in the page head (Amantyle: the shop sign, then the tile wall); the head's 28-48px gap would show
   a black strip between two full-bleed bands, so the second pulls up over it. */
.e2-cs__head.bx > .e2-wrap > section[data-bx^="hero-"] + section[data-bx^="hero-"] { margin-top: calc(-1 * clamp(28px, 3.5vw, 48px)); }

/* ---------- Placeholders: every section is a stub until its look is built ---------- */
.bx-eyebrow, .bx-ph { padding: 6px 12px; border-radius: 999px; background: var(--bx-deep); color: var(--bx-ink); font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.bx-ph { max-width: 64ch; border: 1px dashed currentColor; border-radius: 16px; padding: 14px 18px; color: var(--bx-paper); text-transform: none; letter-spacing: 0; font-size: 14px; }

/* ---------- system + gallery (shared by every look) ---------- */
/* "The system" (cream, calm) and "On the shelf" (her deep maroon). Markup: e2/halesnax/system.njk and gallery.njk. Her heavy rounded display face is Lilita One
   (the closest of Lilita One, Bowlby One and Titan One to the THANK YOU on her last board), used for big display words only; body text stays Poppins. */
.bx-halesnax {
  --hs-display: 'Lilita One', 'Poppins', system-ui, sans-serif;
  --hs-card: #f8f4ea; --hs-line: color-mix(in srgb, var(--bx-maroon) 16%, transparent);
  --hs-spring: cubic-bezier(.34, 1.56, .64, 1);
}
@supports (transition-timing-function: linear(0, 1)) { .bx-halesnax { --hs-spring: linear(0, 0.265, 0.563, 0.829, 1.03, 1.153, 1.206, 1.205, 1.168, 1.116, 1.062, 1.017, 0.985, 0.967, 0.961, 0.964, 0.972, 0.982, 0.992, 0.999, 1.004, 1.007, 1.007, 1.006, 1.004, 1.003, 1.001, 1, 1); } }

.hs-sys, .hs-gal { grid-template-columns: minmax(0, 1fr); font-family: var(--bx-font); }
.hs-sys { background: var(--bx-paper); color: var(--bx-deep); }
.hs-gal { background: var(--bx-deep); color: var(--bx-cream); }
.hs-sys .bx-sec__in, .hs-gal .bx-sec__in { gap: clamp(56px, 8vw, 104px); align-items: stretch; }
.hs-head { display: grid; gap: 14px; justify-items: start; }
.hs-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.2 var(--bx-font); letter-spacing: .16em; text-transform: uppercase; }
.hs-eyebrow::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--bx-red); }
.hs-gal .hs-eyebrow::before { background: var(--bx-yellow); }
.hs-h2 { margin: 0; font-family: var(--hs-display); font-weight: 400; font-size: clamp(44px, 7vw, 96px); line-height: .94; letter-spacing: .01em; text-transform: uppercase; }
.hs-gal .hs-h2 { color: var(--bx-yellow); }
.hs-h3 { margin: 0 0 clamp(16px, 2vw, 28px); display: flex; align-items: center; gap: 16px; font: 600 clamp(13px, 1.1vw, 15px)/1.3 var(--bx-font); letter-spacing: .14em; text-transform: uppercase; }
.hs-h3::after { content: ''; flex: 1; height: 1px; background: var(--hs-line); }
.hs-lede, .hs-note { margin: 0; max-width: 58ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: color-mix(in srgb, var(--bx-deep) 86%, transparent); }
.hs-note { margin-bottom: clamp(20px, 3vw, 36px); font-size: 15px; }
.hs-sys figcaption { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--bx-deep) 82%, transparent); }
.hs-card { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(20px, 3vw, 40px); background: var(--hs-card); border: 1px solid var(--hs-line); border-radius: 24px; }
.hs-card img { display: block; width: 100%; height: auto; margin: auto; }

/* Before and after */
.hs-ba { display: grid; grid-template-columns: minmax(0, .64fr) auto minmax(0, 1.36fr); gap: clamp(16px, 3vw, 48px); align-items: center; }
.hs-ba figure { margin: 0; display: grid; gap: 14px; }
.hs-ba__oldimg { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--hs-line), 0 22px 40px -24px rgba(111, 33, 20, .55); }
.hs-ba__arrow { width: clamp(44px, 6vw, 84px); height: auto; color: var(--bx-red); }
.hs-ba__new { display: grid; align-content: center; min-height: clamp(150px, 20vw, 260px); padding: clamp(24px, 4vw, 56px); background: var(--hs-card); border: 1px solid var(--hs-line); border-radius: 24px; }
.hs-nl { position: relative; display: block; width: 100%; max-width: 576px; margin-inline: auto; aspect-ratio: 576 / 93; }
.hs-nl img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The sprig grows from the stem's tip the first time the logo scrolls into view (the two parts share one canvas, so they stack into her exact logo). */
.hs-nl.is-armed .hs-nl__sprig { clip-path: circle(0% at 5.1% 58.4%); }
.hs-nl.is-grow .hs-nl__sprig { animation: hs-grow 1.1s var(--ease-out) .25s both; }
@keyframes hs-grow { from { clip-path: circle(0% at 5.1% 58.4%); } to { clip-path: circle(14% at 5.1% 58.4%); } }
@media (max-width: 759px) {
  .hs-ba { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .hs-ba__arrow { transform: rotate(90deg); margin: 2px 0 2px 18px; }
  .hs-ba__newf { width: 100%; }
}

/* Her logo overview: the outline and the H share the left column; the tall tagline lockup takes the right. */
.hs-ov { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "w t" "h t"; gap: clamp(14px, 2vw, 24px); }
.hs-ov__word { grid-area: w; } .hs-ov__h { grid-area: h; } .hs-ov__tag { grid-area: t; }
.hs-ov__word img { max-width: 640px; } .hs-ov__h img { max-width: 250px; }
.hs-crop { display: block; overflow: hidden; width: min(100%, 300px); margin: auto; aspect-ratio: var(--ar); }
.hs-crop img { margin: 0; }
@media (max-width: 759px) {
  .hs-ov { grid-template-columns: minmax(0, 1fr); grid-template-areas: "w" "h" "t"; }
}

/* Her packaging colours: each pack stands on its colour. */
.hs-sw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
@media (min-width: 640px) { .hs-sw { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .hs-sw { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .hs-sw { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hs-sw__i { display: grid; justify-items: center; align-content: end; gap: 4px; text-align: center; }
.hs-sw__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 178px; }
.hs-sw__pill { position: absolute; left: 4%; right: 4%; bottom: 0; height: 56px; border-radius: 999px; background: var(--c); }
.hs-sw__i--base .hs-sw__stage { height: 56px; }
.hs-sw__i--base .hs-sw__pill { border: 1.5px dashed color-mix(in srgb, var(--bx-deep) 45%, transparent); }
.hs-sw__stage .hs-pk { position: relative; z-index: 1; margin-bottom: 20px; }
.hs-pk { display: block; position: relative; height: var(--h); aspect-ratio: var(--ar); overflow: hidden; }
.hs-pk img { position: absolute; left: var(--il, 0); top: var(--it, 0); width: var(--iw, 100%); max-width: none; height: auto; display: block; }
.hs-sw__name { margin-top: 10px; font: 600 14px/1.3 var(--bx-font); }
.hs-sw__fam { font: 500 11px/1.3 var(--bx-font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--bx-deep) 78%, transparent); }
.hs-sw__fam--base { padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; }

/* Stickers */
.hs-stk { margin: 0; display: block; }
.hs-blk, .hs-stk { min-width: 0; }
.hs-stk__row { max-width: 100%; border-radius: 20px; }
.hs-stk img { display: block; width: 100%; height: auto; border-radius: 20px; }
.hs-stk figcaption { margin-top: 14px; }
@media (max-width: 759px) {
  /* on a phone her row is too small to read at the screen's width: it scrolls sideways at a readable size */
  .hs-stk__row { overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: thin; }
  .hs-stk__row:focus-visible { outline: 3px solid var(--bx-red); outline-offset: 2px; }
  .hs-stk img { width: 760px; max-width: none; }
}

/* Gallery: rows whose pictures grow in proportion to their aspect ratio, so each row has one height and nothing is cropped through her art. */
.hs-g { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.hs-g__row { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 28px); }
.hs-g__f { margin: 0; flex-grow: var(--ar); flex-basis: 0; min-width: 0; display: grid; gap: 12px; }
.hs-g__img { display: block; overflow: hidden; aspect-ratio: var(--ar); border-radius: 18px; background: color-mix(in srgb, var(--bx-cream) 8%, transparent); }
.hs-g__img img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease-out); }
.hs-g__f:hover .hs-g__img img { transform: scale(1.025); }
.hs-g figcaption { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--bx-cream) 80%, transparent); }
@media (max-width: 759px) {
  .hs-g__row { flex-direction: column; align-items: stretch; }
  .hs-g__f { flex: none; }
}

/* Blocks fade up as they arrive (the script adds .is-pre only to blocks below the fold, and never under reduced motion). */
[data-hs-reveal] { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-hs-reveal].is-pre { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  [data-hs-reveal].is-pre { opacity: 1; transform: none; }
  .hs-nl.is-armed .hs-nl__sprig { clip-path: none; }
  .hs-nl.is-grow .hs-nl__sprig, .hs-g__img img { animation: none; transition: none; }
}
/* ---------- end system + gallery ---------- */