/* ============================================================================
   DALC — graphic design case pages (work-graphic-design-<slug>.html)
   Flow after indevelopment.studio/project/origin-cambridge, in the Dalc type
   (Caprasimo headings, Figtree body). Each client's own palette and fonts are
   only used where they ARE the subject: swatches, colourways, the specimen.

   Default CSS is the finished static page (no JS, narrow screens, reduced
   motion). gd-case.js adds .is-live to <main> for the pinned sections.
   ========================================================================== */
body.gc-page{background:#FAF7F2}
.gc{--pad:48px;--line:rgba(20,20,20,.14);max-width:1520px;margin:0 auto;padding:0 var(--pad)}

/* ── title + hero ─────────────────────────────────────────────────────── */
.gc-title{padding:150px 0 26px}
.gc-title h1{margin:0;font-family:var(--font-heading);font-weight:400;line-height:.92;
    font-size:clamp(46px,7.4vw,118px);letter-spacing:-.01em}
/* the photo fills what is left of the first screen under the title, as in the reference */
.gc-hero{position:relative;margin:0;height:min(56.25vw,calc(100svh - var(--title-h,250px) - 24px));min-height:380px;
    overflow:hidden;border-radius:4px;background:#1d1b19}
.gc-hero-in{position:absolute;inset:-6% 0;will-change:transform}
.gc-hero-in img{width:100%;height:100%;object-fit:cover}
.gc-hero-mark{position:absolute;left:50%;top:50%;width:38%;height:34%;translate:-50% -50%;
    background:#FAF7F2;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
    opacity:0;pointer-events:none}
/* intro: the photo sits dimmed while the mark wipes on, then the mark lifts
   away and the photo (which carries the real sign) comes up to full */
.gc.is-live .gc-hero-in img{animation:gcPhoto 3.4s cubic-bezier(.65,0,.35,1) both}
.gc.is-live .gc-hero-mark{animation:gcMark 3.4s cubic-bezier(.65,0,.35,1) both}
@keyframes gcPhoto{0%{filter:brightness(.45) blur(6px);scale:1.08}45%{filter:brightness(.5) blur(3px)}
    100%{filter:none;scale:1}}
@keyframes gcMark{0%{opacity:1;clip-path:inset(0 100% 0 0);scale:.94}
    30%{opacity:1;clip-path:inset(0 0 0 0);scale:1}62%{opacity:1;scale:1}
    100%{opacity:0;clip-path:inset(0 0 0 0);scale:1.04}}

/* full-colour logo in a mark slot (clients with color_logo): a plain image,
   not a mask — the slot's own sizing, contained */
.gc-hero-mark.is-color,.gc-way-mark.is-color,.gc-art-mark.is-color{background:none;object-fit:contain;
    -webkit-mask:none;mask:none}
.gc-way-mark.is-color{object-position:left center}
/* an <img> does not stretch from inset alone: give the art slot its box */
.gc-art-mark.is-color{left:32%;top:32%;width:36%;height:36%}
.gc-hero-mark.is-color{filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}

/* ── intro ────────────────────────────────────────────────────────────── */
.gc-intro{padding:clamp(56px,7vw,110px) 0 clamp(40px,5vw,80px)}
.gc-h{margin:0 0 clamp(36px,4vw,64px);max-width:17em;font-family:var(--font-heading);font-weight:400;
    font-size:clamp(30px,3.7vw,58px);line-height:1.02;letter-spacing:-.005em}
.gc-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:48px;
    padding-top:22px;border-top:1px solid var(--line)}
.gc-cols h3{margin:0 0 14px;font-family:var(--font-body);font-size:14px;font-weight:700}
.gc-cols p,.gc-cols li{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--body,#3a3634)}
.gc-cols div:first-child p{max-width:34em}
.gc-cols ul{list-style:none;margin:0;padding:0}
.gc-cols li{margin:0 0 3px}
.gc-cols span{color:var(--muted,#58524e)}
.gc-cols q{font-style:italic;color:var(--ink,#141414)}
.gc-cols div:last-child{text-align:right}

/* ── palette mosaic ───────────────────────────────────────────────────── */
.gc-pal{margin:clamp(30px,4vw,60px) 0 clamp(80px,9vw,140px)}
.gc-pal-row{display:flex;height:min(76vh,700px);border-radius:4px;overflow:hidden}
.gc-sw{position:relative;flex:var(--g0) 1 0;min-width:0;background:var(--c);color:var(--ink);
    display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;
    font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.gc-sw b{font-weight:600;opacity:.8}
/* light swatches next to the cream page need an edge */
.gc-sw{box-shadow:inset 0 0 0 1px rgba(20,20,20,.06)}

/* ── colourways (pinned) ──────────────────────────────────────────────── */
.gc-ways-stick{display:grid;gap:24px}
.gc-way{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--bg)}
.gc-strip{position:absolute;top:0;bottom:0}
.gc-strip.a{right:0;width:5.5%;background:var(--sa)}
.gc-strip.b{right:5.5%;width:1.6%;background:var(--sb)}
.gc-way-mark{position:absolute;left:6%;top:13%;width:62%;height:74%;background:var(--mk);
    -webkit-mask:left center/contain no-repeat;mask:left center/contain no-repeat}
.gc-way-lbl,.gc-way-hex{position:absolute;right:10%;color:var(--lbl);font-size:12px;font-weight:600;
    line-height:1.35;text-align:right;opacity:.85}
.gc-way-lbl{top:6%}
.gc-way-hex{bottom:6%;font-variant-numeric:tabular-nums}
.gc.is-pin .gc-ways-track{height:calc(var(--n,4) * 85vh + 100vh)}
.gc.is-pin .gc-ways-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.gc.is-pin .gc-way{position:absolute;left:0;right:0;width:100%;max-height:84vh;margin:auto;
    top:50%;translate:0 -50%;will-change:clip-path}

/* ── role ─────────────────────────────────────────────────────────────── */
.gc-role{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;
    padding:clamp(60px,7vw,110px) 0}
.gc-h2{margin:0;font-family:var(--font-heading);font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1.05}
.gc-role p{margin:0 0 14px;max-width:34em;font-size:16.5px;line-height:1.6;color:var(--body,#3a3634)}

/* ── type specimen (pinned) ───────────────────────────────────────────── */
.gc-type-stick{display:grid;gap:24px}
.gc-tcard{display:grid;grid-template-columns:1fr 1fr;gap:12px;aspect-ratio:2/1}
.gc-spec{position:relative;background:var(--tbg);color:var(--tink);padding:clamp(18px,2vw,30px);
    border-radius:4px;overflow:hidden;display:flex;flex-direction:column;
    box-shadow:inset 0 0 0 1px rgba(20,20,20,.06)}
.gc-spec-top{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}
.gc-spec-top strong{font-family:var(--tf);font-weight:400;font-size:clamp(16px,1.4vw,21px)}
.gc-spec-top p{margin:0;font-size:12.5px;line-height:1.4;opacity:.78}
.gc-weights{list-style:none;margin:12% 0 0;padding:0 0 0 33%;font-family:var(--tf);
    font-size:clamp(18px,1.7vw,26px);line-height:1.12}
/* all weights read at full strength unless the pinned walk-through is stepping them */
.gc.is-pin .gc-weights li{opacity:.34;transition:opacity .35s}
.gc.is-pin .gc-weights li.on{opacity:1}
.gc-aa{position:absolute;left:clamp(16px,2vw,30px);bottom:-.14em;font-family:var(--tf);font-weight:500;
    font-size:clamp(90px,11vw,190px);line-height:1}
.gc-art{position:relative;background:#EFE8DA;border-radius:4px;overflow:hidden}
/* the DALC compass draws on in line (stroke-dashoffset, turning as it goes);
   N/E/S/W fade in with it; then the logo pops in the middle of the inner ring */
.gc-compass{position:absolute;inset:7%;width:86%;height:86%;overflow:visible;
    rotate:calc(var(--draw-off,0) * -60deg)}
.gc-compass-lines *{fill:none;stroke:#141414;stroke-width:1.3;stroke-dasharray:1;
    stroke-dashoffset:var(--draw-off,0);opacity:.6}
.gc-compass-nesw text{font-family:var(--font-body);font-size:15px;font-weight:700;fill:#141414;
    text-anchor:middle;dominant-baseline:central;opacity:calc((1 - var(--draw-off,0)) * .7)}
.gc-art-mark{position:absolute;inset:32%;background:#141414;
    -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
    opacity:var(--solid,1);scale:var(--pop,1)}
.gc.is-pin .gc-type-track{height:320vh}
.gc.is-pin .gc-type-stick{position:sticky;top:0;height:100vh;display:block}
.gc.is-pin .gc-tcard{position:absolute;left:0;right:0;top:50%;translate:0 -50%;max-height:80vh;
    width:min(100%,160vh);margin:0 auto}

/* ── in use ───────────────────────────────────────────────────────────── */
.gc-use{padding:clamp(60px,7vw,110px) 0 0}
.gc-use .gc-h2{margin-bottom:30px}
.gc-use-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.gc-use-grid figure{margin:0}
.gc-use-grid figure:nth-child(2){margin-top:12vh}
.gc-use-img{display:block;width:100%;padding:0;border:0;background:#e8e1d4;cursor:zoom-in;
    border-radius:4px;overflow:hidden}
.gc-use-img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:scale .8s cubic-bezier(.22,1,.36,1)}
.gc-use-img:hover img{scale:1.03}
.gc-use-grid figcaption{margin-top:12px;font-size:13px;font-weight:600;color:var(--muted,#58524e)}

/* ── end + next ───────────────────────────────────────────────────────── */
.gc-end{padding:clamp(80px,10vw,170px) 0 clamp(50px,6vw,90px);border-bottom:1px solid var(--line)}
.gc-end .gc-h{margin:0;max-width:19em}
.gc-end a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);
    text-decoration-thickness:.07em;text-underline-offset:.12em}
.gc-next{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:34px 0 70px}
.gc-next a{text-decoration:none;display:flex;flex-direction:column;gap:6px}
.gc-next a:last-child{text-align:right}
.gc-next small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#58524e)}
.gc-next strong{font-family:var(--font-heading);font-weight:400;font-size:clamp(24px,2.6vw,40px);transition:color .3s}
.gc-next a:hover strong{color:var(--accent)}

/* ── rise ─────────────────────────────────────────────────────────────── */
.gc.is-live [data-rise]{opacity:0;translate:0 26px;transition:opacity .9s cubic-bezier(.22,1,.36,1),translate .9s cubic-bezier(.22,1,.36,1)}
.gc.is-live [data-rise].in{opacity:1;translate:none}

/* ── narrow / reduced motion: everything static and stacked ──────────── */
@media (max-width:900px){
  .gc{--pad:22px}
  .gc-title{padding-top:120px}
  .gc-hero{height:auto;min-height:0;aspect-ratio:16/9}
  .gc-cols{grid-template-columns:1fr 1fr;gap:28px}
  .gc-cols div:first-child{grid-column:1/-1}
  .gc-cols div:last-child{text-align:left}
  .gc-pal-row{flex-direction:column;height:auto}
  .gc-sw{flex:none !important;min-height:74px;flex-direction:row;align-items:center}
  .gc-role{grid-template-columns:1fr;gap:18px}
  .gc-tcard{grid-template-columns:1fr;aspect-ratio:auto}
  .gc-spec{min-height:340px}
  .gc-art{aspect-ratio:1}
  .gc-use-grid{gap:14px}
  .gc-next strong{font-size:22px}
}
@media (max-width:520px){ .gc-way-lbl,.gc-way-hex{font-size:10px} .gc-use-grid{grid-template-columns:1fr} .gc-use-grid figure:nth-child(2){margin-top:0} }
@media (prefers-reduced-motion:reduce){
  .gc.is-live .gc-hero-in img,.gc.is-live .gc-hero-mark{animation:none}
  .gc-hero-in{inset:0}
}