/* ============================================================
   TAMON — Case study template (loaded after main.css, on projects/<project>.html)
   One layout for every project; each page fills it with that project's own words, figures and photographs.
   · Cover: the photograph at full bleed, opening from a rounded window as the page arrives (or flying in from
     the card that was clicked, where the browser has view transitions). The name is set very large over a
     shade; beneath it, the facts. Scrolling away, the photograph drifts more slowly than the page and the name
     lifts and fades.
   · Overview, asymmetric: the challenge as a statement that fills in word by word as it scrolls; the solution
     in glass, offset; the results as figures, each comparison drawn as a pair of lines (the later one in
     neon), or, where there are no figures, what was delivered.
   · Gallery: photographs at full bleed and in offset pairs, each drifting inside its frame as it passes.
   · Next project: main.css ("Next"); its photograph becomes the next page's cover.
   Every scroll-linked movement is CSS where the browser can tie it to the scroll, site.js ([data-scrub])
   where it cannot, and nothing with reduced motion.
   ============================================================ */

/* ---------- Cover ---------- */
.cs-hero{position:relative;isolation:isolate;overflow:clip;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;background-color:var(--ink)}
.cs-hero__media{position:absolute;inset:0;z-index:-3;overflow:clip;background-color:var(--tint,var(--ink-2))}
/* taller than the cover, with the extra room above, so it can drift down as the page scrolls up */
.cs-hero__frame{position:absolute;inset:-14% 0 -2%}
.cs-hero__frame picture{display:block;height:100%}
.cs-hero__frame img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%)}
video.cs-hero__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* the shade: enough under the header for its controls, deepest under the facts, and a soft pool behind the name
   (a bright photograph, like white cream or a marble table, would otherwise take the white name's edge away) */
.cs-hero__shade{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 66% at 20% 68%,rgb(10 20 28 / .6),transparent 74%),
             linear-gradient(to top,rgb(10 20 28 / .95) 0%,rgb(10 20 28 / .84) 24%,rgb(10 20 28 / .52) 48%,rgb(10 20 28 / .16) 70%,rgb(10 20 28 / .58) 100%)}
.cs-hero__shade .cs-hero__grain{opacity:.35}
.cs-hero__content{padding-block:calc(var(--bar-h) + 2rem) clamp(1.75rem,5vh,3.5rem)}
/* the trail sits in a small tinted pill, so it reads on any photograph (no backdrop blur: the cover's text layer
   is its own view-transition layer, a backdrop root, so a blur here would have nothing behind it to blur) */
.crumbs ol{display:inline-flex;flex-wrap:wrap;gap:.25rem .6rem;margin:0;padding:.4rem .95rem;list-style:none;border-radius:999px;
  font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--text);
  background:rgb(10 20 28 / .58);box-shadow:inset 0 0 0 1px rgb(233 239 244 / .12)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--text-soft)}
.crumbs a{color:var(--text);background:var(--gradient) no-repeat 0 100%/0 1px;padding-bottom:1px;transition:background-size .4s var(--ease-out)}
.crumbs a:hover,.crumbs a:focus-visible{background-size:100% 1px}
.cs-hero__title{margin-top:clamp(.75rem,2vh,1.25rem);font-weight:300;font-size:clamp(3.4rem,1rem + 10vw,12.5rem);line-height:.9;
  letter-spacing:-.045em;color:#fff;text-shadow:0 .02em .45em rgb(10 20 28 / .42)}
.cs-hero__title .rise__line{padding-bottom:.08em;margin-bottom:-.08em}
.cs-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem 2.5rem;margin:clamp(1.5rem,4vh,2.5rem) 0 0;
  padding-top:1.1rem;border-top:1px solid rgb(233 239 244 / .2)}
@media (min-width:768px){.cs-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-facts dt{font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--text-soft)}
.cs-facts dd{margin:.2rem 0 0;color:var(--text)}
.cs-facts a{background:var(--gradient) no-repeat 0 100%/100% 1px;padding-bottom:1px}

@keyframes cs-drift{to{translate:0 10%}}
@keyframes cs-lift{to{translate:0 -7vh;opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .cs-hero{view-timeline:--cs-cover block}
  .cs-hero__frame{animation:cs-drift 1s linear both;animation-timeline:--cs-cover;animation-range:exit 0% exit 100%}
  .cs-hero__content{animation:cs-lift 1s linear both;animation-timeline:--cs-cover;animation-range:exit 0% exit 75%}
}

/* ---------- Overview ---------- */
.cs-overview{position:relative;padding-block:var(--section-y)}
.cs-overview__light{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 30% at 100% 20%,rgb(var(--grad-a-rgb) / .08),transparent 72%),
             radial-gradient(36% 26% at 0% 72%,rgb(var(--grad-c-rgb) / .07),transparent 72%)}
.cs-block{display:grid;grid-template-columns:minmax(0,1fr);row-gap:1rem}
.cs-block+.cs-block{margin-top:clamp(4rem,12vh,8rem)}
.cs-label{font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--text-dim)}
.cs-statement{font-family:var(--display);font-weight:300;font-size:clamp(2rem,1rem + 3.4vw,4.6rem);line-height:1.08;letter-spacing:-.03em;
  color:var(--text);max-width:22ch}
.cs-solution{padding:clamp(1.75rem,3.2vw,3rem)}
.cs-solution__text{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,1rem + 1.3vw,2.2rem);line-height:1.25;letter-spacing:-.016em;max-width:32ch}
.cs-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.5rem,3.5vh,2.25rem)}
.cs-tags a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;border-radius:999px;font-size:var(--fs-sm);color:var(--text-soft);
  box-shadow:inset 0 0 0 1px var(--hair-strong);transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out),color .3s var(--ease-out)}
.cs-tags a:hover{background-color:rgb(233 239 244 / .07);box-shadow:inset 0 0 0 1px rgb(233 239 244 / .38);color:var(--text)}
.cs-lead{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);line-height:1.2;letter-spacing:-.02em;max-width:30ch}
@media (min-width:1024px){
  .cs-block{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,1.6rem);align-items:start}
  .cs-block>.cs-label{grid-column:1 / span 3;padding-top:.9rem}
  .cs-block--challenge>.cs-statement{grid-column:4 / -1}
  /* the solution sits off the grid's axis, reaching past the statement's left edge */
  .cs-block--solution>.cs-label{grid-row:1}
  .cs-block--solution>.cs-slot{grid-column:5 / span 7}
  .cs-block--results>.cs-lead{grid-column:4 / span 8}
  .cs-block--results>.cs-figures{grid-column:1 / -1}
}

/* figures */
.cs-figures{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,1.8vw,1.4rem);margin-top:clamp(2rem,6vh,3.5rem)}
@media (min-width:768px){.cs-figures{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-figure--wide{grid-column:1 / -1}}
.cs-figure{display:flex;flex-direction:column;padding:clamp(1.5rem,2.6vw,2.4rem)}
.cs-figure__n{font-family:var(--display);font-weight:300;font-size:clamp(2.8rem,1.5rem + 2.8vw,4.6rem);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.cs-figure__label{margin-top:.55rem;color:var(--text-soft)}
.cs-figure--wide{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem 3rem;align-items:end}
@media (min-width:1024px){.cs-figure--wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.cs-figure--wide .cs-figure__n{font-size:clamp(3.4rem,1.6rem + 4.4vw,7rem)}
/* a share: the neon part and the rest, as a single line */
.cs-share{display:grid;gap:.75rem}
.cs-share__line{position:relative;display:flex;gap:6px;height:var(--neon-tube)}
.cs-share__part{position:relative;display:block;height:100%}
.cs-share__part .neon-line{position:absolute;inset:0;height:auto}
.cs-share__rest{flex:1 1 auto;display:block;height:1px;margin-top:.25px;background:var(--hair-strong);transform-origin:100% 50%}
.cs-share__keys{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-sm);color:var(--text-soft)}
.cs-share__keys b{font-weight:400;color:var(--text)}
/* a comparison: the earlier period as a hairline, the later in neon, both to scale */
/* lines of 2px on 20px rows sit on whole pixels, so they stay crisp instead of smearing across two */
.cs-compare{--neon-tube:2px;display:grid;gap:.7rem;margin-top:auto;padding-top:clamp(1.5rem,3.5vh,2.25rem)}
.cs-compare__row{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;align-items:center;gap:.9rem;height:20px;line-height:20px;
  font-size:var(--fs-xs);color:var(--text-soft)}
.cs-compare__row b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--text)}
.cs-compare__track{position:relative;height:var(--neon-tube)}
.cs-compare__bar{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%)}
.cs-compare__bar--before{top:.25px;bottom:auto;height:1px;background:var(--text-dim)}
.cs-compare__bar .neon-line{position:absolute;inset:0;height:auto}
.cs-note{margin-top:1.25rem;font-size:var(--fs-sm);color:var(--text-dim)}
@media (min-width:1024px){.cs-block--results>.cs-note{grid-column:1 / -1}}
.js:not(.enter-failsafe) .cs-compare__bar--before{transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .js:not(.enter-failsafe) .cs-figure .cs-compare__bar--before{scale:0 1;transition:scale 1.2s var(--ease-enter) .35s}
  .js:not(.enter-failsafe) .cs-figure.is-in .cs-compare__bar--before{scale:1 1}
  .js:not(.enter-failsafe) .cs-figure .cs-share__rest{scale:0 1;transition:scale 1.2s var(--ease-enter) .6s}
  .js:not(.enter-failsafe) .cs-figure.is-in .cs-share__rest{scale:1 1}
}
/* delivered, where a project has no figures yet */
.cs-delivered{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem}
.cs-delivered .cs-figure__n{font-size:clamp(4rem,2rem + 6vw,8rem)}
.cs-delivered .cs-figure__label{font-size:var(--fs-lead);color:var(--text-soft)}

/* ---------- Gallery ---------- */
.cs-gallery{display:grid;row-gap:clamp(1rem,3vw,2.5rem);padding-bottom:var(--section-y)}
.cs-shot{position:relative;margin:0}
.cs-shot__frame{position:relative;overflow:clip;border-radius:var(--radius-lg);background-color:var(--tint,var(--ink-2))}
/* the photo is taller than its frame by 18%, split above and below, and drifts through that room as it passes */
.cs-shot__img{position:absolute;left:0;right:0;top:-9%;height:118%}
.cs-shot__img picture{display:block;height:100%}
.cs-shot__img img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%)}
.cs-shot--full .cs-shot__frame{--wipe-r:0px;border-radius:0;height:clamp(24rem,92svh,60rem)}
.cs-shot--portrait .cs-shot__frame{aspect-ratio:4 / 5}
.cs-shot--tall .cs-shot__frame{aspect-ratio:3 / 5}
.cs-shot figcaption,.cs-aside{font-size:var(--fs-sm);line-height:1.55;color:var(--text-soft)}
.cs-shot figcaption{margin-top:.85rem}
.cs-row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem)}
@media (min-width:768px){
  .cs-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,1.6rem);align-items:start}
  /* a pair: the first larger, the second smaller and set lower; --flip mirrors it */
  .cs-row--pair>.cs-shot:nth-child(1){grid-column:1 / span 7}
  .cs-row--pair>.cs-shot:nth-child(2){grid-column:9 / span 4;margin-top:clamp(4rem,22vh,14rem)}
  .cs-row--flip>.cs-shot:nth-child(1){grid-column:1 / span 5;grid-row:1;margin-top:clamp(4rem,22vh,14rem)}
  .cs-row--flip>.cs-shot:nth-child(2){grid-column:7 / span 6;grid-row:1;margin-top:0}
  /* a single: the photograph right of centre, a line of text beside it at the left */
  .cs-row--single>.cs-aside{grid-column:1 / span 4;grid-row:1;align-self:end;padding-bottom:1rem}
  .cs-row--single>.cs-shot{grid-column:6 / span 6;grid-row:1}
}
.cs-aside__eyebrow{display:block;margin-bottom:.8rem;font-family:var(--display);font-weight:500;color:var(--text-dim)}
.cs-aside__big{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,1rem + 1.6vw,2.6rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--text)}
.cs-aside a.cs-aside__big{width:fit-content;padding-bottom:.08em;background:var(--gradient) no-repeat 0 100%/0 2px;transition:background-size .5s var(--ease-out)}
.cs-aside a.cs-aside__big:hover,.cs-aside a.cs-aside__big:focus-visible{background-size:100% 2px}

@keyframes cs-parallax{from{translate:0 -7%}to{translate:0 7%}}
@media (prefers-reduced-motion:no-preference){
  .cs-shot__img{animation:cs-parallax 1s linear both;animation-timeline:view();animation-range:cover}
}