/* Amantyle case study (a tile retailer's naming, identity, website, and print, signage and social):
   the shared sheet. Each look adds its own (e2-amantyle-a ... -d.css). Markup: src/_includes/e2/amantyle/*.njk.
   The page frame stays the dark E2 template; only the sections wear the brand's palette, scoped by `bx bx-amantyle` on the case study's head and body
   (csClass in src/_includes/e2/case-study.njk). */

/* Her palette, as printed on her Amantyle palette board (Muted Slate Green, Teal Green, Butter Cream, White, Dark Charcoal); amantyleKit.json
   `palette` lists the same five. Contrast: cream on slate 8.6:1, cream on charcoal 11:1, slate on cream 8.6:1; teal on slate is 2:1 and on cream
   3.4:1, so teal is a fill and a large-display colour (24px+ bold), never body text. */
.bx-amantyle {
  --bx-slate: #334646; --bx-teal: #417e7d; --bx-cream: #f2ebdb; --bx-white: #ffffff; --bx-charcoal: #2c3333;
  --bx-bg: var(--bx-slate); --bx-ink: var(--bx-cream); --bx-accent: var(--bx-teal); --bx-deep: var(--bx-charcoal); --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)); }

/* The combined page runs the shop-to-screen journey straight into the system, both on slate: one band's tail plus the next one's head
   read as an empty field, so the system starts closer. */
.e2-cs__body.bx > .e2-wrap > section[data-bx="sig-c"] + section[data-bx="system"] { padding-top: clamp(40px, 5vw, 72px); }

/* ---------- 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" (src/_includes/e2/amantyle/system.njk) is a calm reference band on her slate; "In use" (gallery.njk) is an editorial grid on white, because
   her cards, sign and laptop mockups are cut with white rounded corners and sit seamlessly on it. Teal never carries text on cream; the palette strip uses
   white ink on teal (4.7:1). Reveal-on-scroll is added by e2-amantyle.js, and only when motion is allowed. */
.bx-system.sy { background: var(--bx-slate); color: var(--bx-cream); font-family: var(--bx-font); }
.sy__in, .gl__in { align-items: stretch; gap: clamp(40px, 6vw, 80px); }
.sy__head, .gl__head { display: grid; gap: 12px; max-width: 60ch; }
.sy__eyebrow, .gl__eyebrow { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.sy__title, .gl__title { margin: 0; font-weight: 600; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.04em; }
.sy__lede, .gl__lede { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; max-width: 52ch; }
.sy__cap, .gl__cap { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; font: 500 13px/1.4 var(--bx-font); }
/* her tilted tile, as a small bullet (the same angle as the l): decorative */
.sy__cap::before, .gl__cap::before { content: ""; flex: none; width: 5px; height: 12px; background: var(--bx-teal); transform: rotate(11.6deg); }

.sy__icons { margin: 0; }
.sy__icons img { display: block; width: 100%; height: auto; }
.sy__block { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid color-mix(in srgb, var(--bx-cream) 20%, transparent); }
.sy__txt { display: grid; gap: 10px; }
.sy__h3 { margin: 0; font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.025em; }
.sy__p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.55; }
.sy__pats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.sy__fig { margin: 0; }
.sy__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--bx-cream) 22%, transparent); }
.sy__masks { list-style: none; margin: 0; padding: clamp(10px, 2vw, 24px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(4px, 1vw, 12px); border-radius: 20px; background: #fff; }
.sy__mask img { display: block; width: 100%; height: auto; transition: transform .35s var(--ease-out); }
.sy__mask:hover img { transform: translateY(-3px) rotate(-1.5deg); }
.sy__pal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--bx-cream) 30%, transparent); }
.sy__sw { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 84px; padding: 12px 14px 14px; background: var(--c); color: var(--ink); }
.sy__sw-name { font-weight: 600; font-size: 13px; line-height: 1.25; }
.sy__sw-hex { font-family: var(--mono); font-size: 12px; line-height: 1.3; }

.bx-gallery.gl { background: #fff; color: var(--bx-slate); font-family: var(--bx-font); }
.gl__row { display: flex; gap: clamp(14px, 2vw, 24px); width: 100%; align-items: flex-start; }
/* items grow in proportion to their aspect ratio, so every picture in a row comes out the same height with no cropping */
.gl__row > .gl__fig { flex: var(--ar) 1 0%; min-width: 0; }
.gl__fig { margin: 0; }
.gl__img { display: block; width: 100%; height: auto; }
.gl__fig--round .gl__img { border-radius: 16px; }
.gl__row--wide > .gl__fig { flex-basis: 100%; }
.gl__posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.gl__posts .gl__fig { height: 100%; }

@media (min-width: 900px) {
  /* the tile-wall image is shown a little wider than tall; the lockup sits in the middle, well clear of the crop */
  .gl__fig--wall .gl__img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 44%; }
}
@media (max-width: 899px) {
  .sy__block { grid-template-columns: minmax(0, 1fr); }
  .sy__p { max-width: 52ch; }
}
@media (max-width: 699px) {
  .sy__pats { grid-template-columns: minmax(0, 1fr); }
  .sy__masks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sy__pal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy__sw:last-child { grid-column: 1 / -1; }
  .gl__row { flex-direction: column; }
  .gl__row > .gl__fig { flex: none; width: 100%; }
  .gl__posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* reveal on scroll: only added by the JS, and never under reduced motion, so without JS everything is simply there */
.bx-pre { opacity: 0; transform: translateY(18px); }
.bx-reveal { transition: opacity .6s ease, transform .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .bx-pre { opacity: 1; transform: none; }
  .sy__mask img { transition: none; }
}