/* ============================================================
   Athoneli Art — case study.
   Site-native layout on the shared shell: 5rem edge (the "blue line"),
   the 928fr/832fr label grid, and the Geist 1.5rem/2rem label+text type
   matched to work.html's .work-intro. Big serif displays are responsive
   (clamp ≈ Figma 8.25rem). Vertical rhythm uses Figma-proportional, viewport
   responsive gaps (.gt-* utilities). Full-bleed images break out to the
   page edges. Smooth scroll is locomotive (re-added), like every other page.
   ============================================================ */

a { color: inherit; text-decoration: none; }

.case-wrap {
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    padding: 2.5rem var(--gutter);
}

.case { display: flex; flex-direction: column; }

/* ---- Responsive vertical rhythm (Figma-proportional gaps) ------------ */
.gt-top { margin-top: clamp(7.5rem, 12vw, 14.625rem); }
.gt-xs  { margin-top: clamp(0.5rem,   1vw,   1.5rem); }
.gt-s   { margin-top: clamp(1.75rem,  3vw,   3.75rem); }
.gt-m   { margin-top: clamp(4.5rem,  6.6vw, 8.75rem); }
.gt-l   { margin-top: clamp(7.5rem, 13.5vw, 17.5rem); }
.gt-xl  { margin-top: clamp(10rem, 21vw,  27.5rem); }

/* ---- Label + text pair (identical to work.html .work-intro) ---------- */
.case-row {
    display: grid;
    grid-template-columns: 928fr 832fr;
}
.case-lbl,
.case-txt {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 2rem;
    color: #010101;
}
.case-txt { max-width: 43.0625rem; }

/* ---- Big serif display (responsive ≈ Figma 8.25rem) -------------------- */
.case-display {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(3.5rem, 6.9vw, 8.25rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #010101;
}
.case-display--wide { max-width: 90.625rem; line-height: 1.18; }

/* ---- Top meta + hero ------------------------------------------------- */
.case-top {
    display: grid;
    grid-template-columns: 928fr 832fr;
}

/* Image takes the left ~44%; a wide gap keeps ©2026 off the image, Sculptures sits
   at the far right. (Was a 928/832 grid that pushed ©2026 hard against the photo.) */
.case-hero {
    display: grid;
    grid-template-columns: 44% auto 1fr;
    column-gap: clamp(3.5rem, 10vw, 11.875rem);
    align-items: start;
}
.case-hero__img img { width: 100%; height: auto; display: block; }
.case-hero__date,
.case-hero__place {
    margin-top: clamp(3.75rem, 6.4vw, 7.6875rem);
    font-family: var(--font-sans);
    font-size: 1.75rem;
    line-height: 2rem;
}
.case-hero__place { justify-self: end; }

.case-caption {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    line-height: 2rem;
}
.case-caption span { display: block; }
/* Second line begins right where the first ends (the "blue line"), not far indented. */
.case-caption__b { margin-left: 14rem; }

/* ---- Curtain (locomotive data-scroll-sticky) — headline pins while the UNCROPPED
   featured image rises to take over the page; afterwards scroll continues. ---- */
.curtain {
    position: relative;
    width: calc(100% + 2 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));    /* full-bleed */
    height: calc(100vh + 72.75vw);            /* viewport + the image's natural height */
}
.curtain__pin {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.curtain__head {
    position: absolute;
    top: clamp(2.5rem, 6vw, 7.5rem);
    left: var(--gutter);
    right: var(--gutter);
    margin: 0;
    z-index: 1;
}
.curtain__media {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    transform: translateY(100vh);             /* starts below the viewport; JS reveals it */
    will-change: transform;
}
.curtain__media img { width: 100%; height: auto; display: block; }   /* natural aspect = uncropped */

/* ---- Page-turn (ScrollTrigger pin) — the next-case section pins; an extra viewport of
   scrolling fills the bar, then it turns to the next case study. ---- */
.turn {
    position: relative;
    height: 150vh;                 /* shorter teaser: 100vh pinned + 50vh to fill the bar */
}
/* The pinned teaser is a 1:1 replica of the NEXT page's top (same .case-top/.case-display/
   .case-hero classes => same positions). padding-top mirrors .case-wrap so it lines up. */
.turn__sticky {
    position: relative;
    height: 100vh;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
}
/* Teaser-only header — floats in the gap above the replica and fades out as the bar fills,
   so the auto-turn lands on an identical frame. */
.turn__teaser {
    position: absolute;
    top: clamp(5rem, 7.2vw, 6.75rem);
    left: 0;
    right: 0;
}

/* ---- Full-bleed media (horsehead) ------------------------------------ */
.case-bleed {
    width: calc(100% + 2 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
}
.case-bleed img { width: 100%; height: auto; display: block; }

/* Black video placeholder (16:9, full-bleed). Comment: "placeholder for the video". */
.case-video {
    width: calc(100% + 2 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    aspect-ratio: 16 / 9;
    background: #000000;
}

/* ---- Two-up image blocks (gradient+eagle, bull+warrior) -------------- */
.case-duo {
    display: grid;
    align-items: start;
    column-gap: clamp(1.75rem, 4.3vw, 5.125rem);
}
.case-duo img { width: 100%; height: auto; display: block; }
.case-duo--ge { grid-template-columns: 771fr 839fr; }   /* gradient | eagle  */
.case-duo--bw { grid-template-columns: 826fr 758fr; }   /* bull | warrior    */

/* ---- In-container wide shot (awards) --------------------------------- */
.case-shot img { width: 100%; height: auto; display: block; }

/* ---- Carousel — drag with TikTok-style snap (5 desktop screens) ------ */
.case-carousel {
    overflow: hidden;                      /* transform-driven track; no native scroll */
    cursor: grab;
    touch-action: pan-y;                   /* vertical page scroll passes through; JS drives X */
    user-select: none;
}
.case-carousel.is-dragging { cursor: grabbing; }
.case-carousel__row {
    display: flex;
    gap: clamp(2.5rem, 18.5vw, 22.5rem);       /* big breathing room — next image starts far right */
    width: max-content;                    /* the track grows to fit all slides */
    transform: translateX(0);
    will-change: transform;
}
/* Big uniform slide height; width follows each screenshot's own aspect ratio. */
.case-carousel__row img {
    display: block;
    height: clamp(20rem, 34vw, 38.75rem);
    width: auto;
    flex: 0 0 auto;
    user-select: none;
    -webkit-user-drag: none;
}
.case-carousel__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(0.625rem, 1.2vw, 1.125rem);   /* sits closer under the images */
    font-family: var(--font-sans);
    font-size: 1.75rem;
    line-height: 2rem;
}
/* Arrow button between "Drag and scroll" and the n/5 counter — advances one slide. */
.case-carousel__next {
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0 0.625rem;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: opacity .2s ease, transform .2s ease;
}
.case-carousel__next svg {
    width: 1.875rem;
    height: 1.875rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
}
.case-carousel__next:hover { opacity: .55; }
.case-carousel__next:active { transform: translateX(0.1875rem); }

/* ---- Quote ----------------------------------------------------------- */
.case-quote {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(3.5rem, 6.9vw, 8.25rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    max-width: 90.625rem;
    text-indent: 16%;
}
.case-attrib {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    line-height: 2rem;
    margin-left: 52.7%;            /* under the right column (Figma x≈1024) */
}

/* ---- Next case study + progress bar (Figma frame 145:28) ------------- */
.case-next__head {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 1.75rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}
.case-progress-track {
    height: 2px;
    background: #010101;
    position: relative;            /* lives inside the absolute .turn__teaser — no big margin needed */
}
.case-progress-fill {
    position: absolute;
    left: 0;
    top: 0.4375rem;
    height: 0.9375rem;
    width: 0;                      /* fills with scroll progress (inline script) */
    background: #D9D9D9;
}
.case-next__meta {
    display: grid;
    grid-template-columns: 928fr 832fr;
    margin-bottom: 2.5rem;
    font-family: var(--font-sans);
    font-size: 1.75rem;
    line-height: 2rem;
}
/* Replica title — identical to .case-display so it lines up with the next page's title. */
.case-next__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(3.5rem, 6.9vw, 8.25rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

/* ============================================================
   Pixelate-on-hover + inner parallax (pixelate.js).
   Every case image starts pixelated; on first hover it de-pixelates
   in 4 stepped frames over ~1s and stays sharp. Static images then get
   a subtle inner parallax (img scaled, translated within the frame);
   the moving curtain image only de-pixelates. JS wraps each <img> in
   .pix and overlays a <canvas> that paints the pixelated frames.
   ============================================================ */
.pix {
    position: relative;
    display: block;
    overflow: hidden;              /* clips the scaled image for the inner parallax */
    line-height: 0;
}
.pix > img { display: block; width: 100%; height: auto; }
.pix__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;    /* crisp blocks when the small canvas is upscaled */
    image-rendering: crisp-edges;
    pointer-events: none;
}

/* Carousel slides are direct flex children, so the .pix wrapper takes their box:
   uniform height, width from each screenshot's aspect, image fills the wrapper. */
.case-carousel__row > .pix {
    flex: 0 0 auto;
    width: auto;
    height: clamp(20rem, 34vw, 38.75rem);
}
.case-carousel__row .pix > img { width: auto; height: 100%; }

/* ---- Live-site domains (curtain headline + Website duet) -------------
   Dashed underline as the text decoration; on hover the dashes CONNECT into
   a solid line instantly — a state flip, no transition. Width in em so the
   rule scales from the 24px duet up to the 132px serif display. */
.case-domain {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 0.045em;
    text-underline-offset: 0.14em;      /* real underline hugs the baseline —
                                           ~1.5x closer than the old border-bottom */
}
.case-domain:hover { text-decoration-style: solid; }

/* ============================================================
   Mobile — single-column case study on the shared 1400px-artboard scale
   (shell: header / overlay / footer live in styles.css). Identical block in
   athoneli.css and lemoniadis.css — keep them in sync.
   ============================================================ */
@media (max-width: 819px) {
    /* Gutters match the mobile shell (71 design px). No top padding: the
       .case-top headline duet's 21.5625rem margin must be its ENTIRE offset so
       it lands at the exact same Y as the Work page's "All work" duet. */
    .case-wrap { padding: 0 var(--gutter); }
    .turn__sticky { padding-top: 0; }      /* the turn replica mirrors .case-wrap's top pad */

    /* Label/text duets sit side-by-side 50/50 — exactly the Work page's
       "All work | paragraph" intro treatment (same split, same 52px type). */
    .case-row, .case-top, .case-next__meta {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    /* Only the top "Case study" headline duet gets the Work intro's vertical air
       (345 design px above); the body duets keep the tighter .gt-* rhythm. */
    .case-top { margin-top: 21.5625rem; }
    .case-lbl, .case-txt, .case-caption,
    .case-hero__date, .case-hero__place,
    .case-carousel__foot, .case-attrib,
    .case-next__head, .case-next__meta {
        font-size: 3.25rem;              /* 52 design px */
        line-height: 1.3;
    }
    .case-txt { max-width: none; }

    /* Big serif displays pin to the mobile display size (132 design px) */
    .case-display, .case-quote, .case-next__title { font-size: 8.25rem; }

    /* Hero: image full width, date/place split beneath it */
    .case-hero { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
    .case-hero__img { grid-column: 1 / -1; }
    .case-hero__date, .case-hero__place { margin-top: 3rem; }

    .case-caption__b { margin-left: 0; }   /* second caption line falls back under the first */

    /* Full-bleed offsets follow the mobile gutter. NOT `100% + 8.875rem`: .case-wrap is
       max-width:120rem and centred, and the mobile rem is CLAMPED (5.7px), so 120rem =
       684px — narrower than a tablet viewport. Growing by the padding alone therefore
       stopped 42px short of each edge at 768px, while .curtain__pin's own `width:100vw`
       started at that inset and ran 42px PAST the document, expanding the layout viewport
       and shoving the centred header off-centre. Offsetting by the shared --edge puts the
       left edge at the viewport edge so 100vw lands exactly — genuinely "to the page
       edges", and no horizontal overflow. */
    .curtain, .case-bleed, .case-video {
        width: 100vw;
        margin-left: calc(-1 * var(--edge));
    }
    .curtain__head { left: var(--gutter); right: var(--gutter); }

    /* Curtain on phones: at natural aspect the image is shorter than the screen,
       so it could never "take over the page" like on desktop (it only crept into
       the bottom strip). Cover the viewport instead — the JS end value
       -(media.offsetHeight - innerHeight) then lands at exactly 0, i.e. a full
       takeover, and the pin gets one clean viewport of travel. */
    .curtain { height: 200vh; }              /* 100vh pin + 100vh of image travel */
    .curtain__media { height: 100vh; }
    .curtain__media .pix { height: 100%; }
    .curtain__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}