/* project.css — shared chrome for the generated project pages.
 *
 * The block below is lifted verbatim from the hand-built case study pages, so
 * the nav, footer, type scale, colours and image plates are identical rather
 * than a near-miss reimplementation. Some of it (the table of contents, the
 * persona cards, the section numbering) is unused here; it costs a few KB in
 * one cached file and is worth it to keep a single source of truth for how the
 * site looks. Restyle the case study pages and these follow.
 *
 * Page-specific additions are at the bottom, clearly marked.
 */

:root{
    --night:#0B0E1C; --night-2:#11162B; --panel:#141A33;
    --line:rgba(173,184,219,.14); --line-strong:rgba(173,184,219,.28);
    --star:#EDF1FF; --muted:#8B93AF; --sodium:#FF5236; --sodium-deep:#D63A1F;
    --display:"Bricolage Grotesque",system-ui,sans-serif;
    --body:"Schibsted Grotesk",system-ui,sans-serif;
    --mono:"Spline Sans Mono",ui-monospace,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  body{background:var(--night);color:var(--star);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--sodium);color:var(--night)}
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--sodium);outline-offset:3px;border-radius:2px}
  .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .wrap{max-width:1500px;margin:0 auto}

  .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--sodium);z-index:60;box-shadow:0 0 10px var(--sodium)}

  /* Nav */
  .nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.1rem clamp(1.25rem,4vw,3rem);background:linear-gradient(to bottom, rgba(11,14,28,.92) 60%, rgba(11,14,28,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .nav-logo{display:inline-flex;align-items:center;text-decoration:none}
  .nav-mark{position:relative;width:42px;height:42px;flex-shrink:0}
  .nav-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
  .nav-mark .lg-hover{opacity:0}
  @media (hover: hover){
    .nav-logo:hover .lg-base,.nav-logo:focus-visible .lg-base{opacity:0}
    .nav-logo:hover .lg-hover,.nav-logo:focus-visible .lg-hover{opacity:1}
    .nav-logo:hover .nav-mark img,.nav-logo:focus-visible .nav-mark img{transform:rotate(-5deg) scale(1.08)}
  }
  @media (prefers-reduced-motion: reduce){ .nav-logo:hover .nav-mark img,.nav-logo:focus-visible .nav-mark img{transform:none} }
  .nav-links{display:flex;gap:clamp(1rem,3vw,2.25rem);align-items:center}
  .nav-links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .25s}
  .nav-links a:hover,.nav-links a.active{color:var(--sodium)}
  .avail{display:inline-flex;align-items:center;gap:.5rem;color:var(--star) !important;border:1px solid var(--line-strong);border-radius:99px;padding:.45rem .9rem;transition:border-color .25s}
  .avail:hover{border-color:var(--sodium)}
  .avail .dot{width:7px;height:7px;border-radius:50%;background:var(--sodium);box-shadow:0 0 8px var(--sodium);animation:pulse 2.4s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  @media (max-width:640px){ .nav-links a:not(.avail){display:none} }

  /* Hero */
  .cs-hero{padding:clamp(7rem,15vh,9.5rem) clamp(1.25rem,4vw,3rem) 0}
  .back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.75rem;transition:color .25s,gap .25s}
  .back:hover{color:var(--sodium);gap:.8rem}
  .cs-eyebrow{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-bottom:1.25rem}
  .cs-eyebrow .pill{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--night);background:var(--sodium);border-radius:99px;padding:.32rem .7rem;font-weight:500}
  .cs-eyebrow .yr{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted)}
  .cs-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,8vw,6.5rem);line-height:.95;letter-spacing:-.02em}
  .cs-hero .tagline{max-width:54ch;color:var(--muted);font-size:clamp(1.1rem,1.7vw,1.45rem);margin-top:1.5rem}
  .cs-hero .tagline strong{color:var(--star);font-weight:500}
  .hero-plate{margin-top:clamp(2.5rem,5vh,4rem);border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:21/9;background:var(--night-2) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22><circle cx=%2214%22 cy=%2222%22 r=%221.2%22 fill=%22%238B93AF%22 opacity=%22.45%22/><circle cx=%2258%22 cy=%2212%22 r=%22.9%22 fill=%22%238B93AF%22 opacity=%22.3%22/><circle cx=%2240%22 cy=%2250%22 r=%221%22 fill=%22%23FF5236%22 opacity=%22.4%22/><circle cx=%2268%22 cy=%2266%22 r=%221.1%22 fill=%22%238B93AF%22 opacity=%22.35%22/></svg>')}
  .hero-plate img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
  .hero-plate .plabel{position:absolute;left:1rem;bottom:1rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--star);background:rgba(11,14,28,.7);border:1px solid var(--line);border-radius:99px;padding:.3rem .7rem;backdrop-filter:blur(4px)}

  /* Meta bar */
  .metabar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(2.5rem,5vh,4rem)}
  .metabar .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
  .metabar .cell, .metabar .cell{background:var(--night)}
  .mb-cell{background:var(--night);padding:1.4rem clamp(1.25rem,2vw,1.6rem)}
  .mb-cell .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
  .mb-cell .v{font-size:1rem;color:var(--star);line-height:1.3}
  @media (max-width:820px){.metabar .wrap{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:420px){.metabar .wrap{grid-template-columns:1fr}}

  /* Body layout: sticky TOC + content */
  .cs-body{padding:clamp(3rem,7vh,5.5rem) clamp(1.25rem,4vw,3rem)}
  .cs-body .wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .toc{position:sticky;top:6rem;display:flex;flex-direction:column;gap:.1rem}
  .toc .t-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
  .toc a{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);padding:.5rem 0 .5rem 1rem;border-left:1px solid var(--line);transition:color .25s,border-color .25s}
  .toc a:hover{color:var(--star)}
  .toc a.active{color:var(--sodium);border-color:var(--sodium)}
  @media (max-width:880px){ .cs-body .wrap{grid-template-columns:1fr} .toc{display:none} }

  /* Content sections */
  .sec{padding-bottom:clamp(3rem,6vh,4.5rem);scroll-margin-top:5.5rem}
  .sec:last-child{padding-bottom:0}
  .sec-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--sodium);margin-bottom:.8rem;display:block}
  .sec h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.01em;line-height:1.05;text-transform:uppercase;margin-bottom:1.3rem}
  .sec h3{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:2rem 0 .8rem}
  .sec p{color:#C3CAE0;font-size:clamp(1.02rem,1.4vw,1.15rem);margin-bottom:1.1rem;max-width:68ch}
  .sec p .hl{color:var(--star);font-weight:500}
  .sec ul{list-style:none;margin:0 0 1.3rem;max-width:68ch}
  .sec ul li{position:relative;padding-left:1.5rem;color:#C3CAE0;margin-bottom:.6rem}
  .sec ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border:1px solid var(--sodium);border-radius:1px;transform:rotate(45deg)}

  .quote{border-left:2px solid var(--sodium);padding:.4rem 0 .4rem 1.5rem;margin:1.8rem 0;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.25;color:var(--star);max-width:30ch}

  /* Persona cards */
  .personas{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
  .persona{border:1px solid var(--line);border-radius:10px;padding:1.4rem;background:var(--panel)}
  .persona .role{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sodium);margin-bottom:.5rem}
  .persona h4{font-family:var(--display);font-weight:600;font-size:1.3rem;margin-bottom:.8rem}
  .persona ul{margin:0}
  .persona ul li{font-size:.95rem;margin-bottom:.45rem}
  @media (max-width:620px){.personas{grid-template-columns:1fr}}

  /* Challenge / solution cards */
  .challenge{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:1.1rem}
  .challenge .cnum{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
  .challenge h3{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0 0 .9rem}
  .challenge .prob{color:var(--muted);font-style:italic;margin-bottom:1rem}
  .challenge .impact{display:inline-flex;align-items:baseline;gap:.6rem;margin-top:.6rem;border-top:1px solid var(--line);padding-top:1rem;width:100%}
  .challenge .impact .big{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--sodium);line-height:1}
  .challenge .impact .lbl{color:var(--muted);font-size:.9rem}

  /* image plate (template slots) */
  .plate{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:16/9;margin:1.5rem 0;background:var(--night-2) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22><circle cx=%2214%22 cy=%2222%22 r=%221.2%22 fill=%22%238B93AF%22 opacity=%22.4%22/><circle cx=%2258%22 cy=%2212%22 r=%22.9%22 fill=%22%238B93AF%22 opacity=%22.3%22/><circle cx=%2240%22 cy=%2250%22 r=%221%22 fill=%22%23FF5236%22 opacity=%22.4%22/></svg>')}
  .plate .plabel{position:absolute;left:1rem;bottom:1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:rgba(11,14,28,.6);border:1px solid var(--line);border-radius:99px;padding:.28rem .65rem}
  .plate-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
  .plate-row .plate{margin:0;aspect-ratio:3/4}
  @media (max-width:620px){.plate-row{grid-template-columns:1fr}.plate-row .plate{aspect-ratio:16/9}}

  /* Results stat grid */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:1.5rem 0}
  .stat{background:var(--night);padding:clamp(1.3rem,2.2vw,1.8rem)}
  .stat .big{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4vw,3rem);color:var(--sodium);line-height:1;letter-spacing:-.01em}
  .stat .lbl{color:var(--muted);font-size:.85rem;margin-top:.6rem;line-height:1.3}
  @media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:420px){.stats{grid-template-columns:1fr}}

  /* Next project */
  .next{border-top:1px solid var(--line);padding:clamp(3rem,7vh,5rem) clamp(1.25rem,4vw,3rem)}
  .next .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;display:block}
  .next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
  .nproj{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);transition:border-color .3s}
  .nproj:hover{border-color:var(--line-strong)}
  .nproj .sh{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--night-2) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22><circle cx=%2220%22 cy=%2228%22 r=%221%22 fill=%22%238B93AF%22 opacity=%22.4%22/><circle cx=%2256%22 cy=%2218%22 r=%221%22 fill=%22%23FF5236%22 opacity=%22.4%22/></svg>')}
  .nproj .sh img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.85);transition:transform .5s,filter .4s}
  .nproj:hover .sh img{transform:scale(1.05);filter:none}
  .nproj .nm{display:flex;justify-content:space-between;gap:.75rem;padding:.9rem 1rem}
  .nproj .nm h4{font-family:var(--display);font-weight:600;font-size:1.05rem;transition:color .3s}
  .nproj:hover .nm h4{color:var(--sodium)}
  .nproj .nm .y{font-family:var(--mono);font-size:.66rem;color:var(--muted);padding-top:.2rem}
  @media (max-width:760px){.next-grid{grid-template-columns:1fr}}

  /* CTA + footer */
  .cta{border-top:1px solid var(--line);padding:clamp(3.5rem,8vh,6rem) clamp(1.25rem,4vw,3rem);text-align:center;background:radial-gradient(120% 140% at 50% 120%, rgba(255,82,54,.12), rgba(11,14,28,0) 60%)}
  .cta h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3.4rem);line-height:1;margin-bottom:1.5rem}
  .cta h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(237,241,255,.85)}
  .btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:99px;padding:.85rem 1.5rem;transition:all .3s}
  .btn.primary{background:var(--sodium);border-color:var(--sodium);color:var(--night);font-weight:500}
  .btn.primary:hover{background:var(--sodium-deep);border-color:var(--sodium-deep)}
  footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem clamp(1.25rem,4vw,3rem);border-top:1px solid var(--line)}
  footer .mono a:hover{color:var(--sodium)}

  .rv{opacity:0;transform:translateY(22px)}
  @media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none} .avail .dot{animation:none} .progress{display:none} }
  /* slot-autofill */
  .plate img{width:100%;height:auto;display:block}
  .plate.filled{aspect-ratio:auto;background:none;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
  /* Square and portrait exports would otherwise run the full column width and
     swallow the page -- cap the height and centre them instead. */
  .plate.filled img{width:auto;max-width:100%;max-height:min(76vh,720px);margin:0 auto}
  .plate-row{align-items:start}
  .filled .plabel{display:none}
  /* cs-lightbox */
  .plate img,.hero-plate img{cursor:zoom-in}
  .cs-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3.5rem);background:rgba(4,6,14,.94);opacity:0;transition:opacity .3s}
  .cs-lb.open{display:flex;opacity:1}
  .cs-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
  .cs-lb button{position:absolute;border:1px solid var(--line);background:rgba(11,14,28,.6);color:var(--star);cursor:pointer;border-radius:50%;transition:border-color .25s,color .25s;display:flex;align-items:center;justify-content:center;line-height:1}
  .cs-lb button:hover{border-color:var(--sodium);color:var(--sodium)}
  .cs-lb .lb-close{top:1.1rem;right:1.25rem;width:42px;height:42px;font-size:1.1rem}
  .cs-lb .lb-nav{top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:1.5rem}
  .cs-lb .lb-prev{left:1.25rem}
  .cs-lb .lb-next{right:1.25rem}
  .cs-lb.single .lb-nav{display:none}

/* ------------------------------------------------------------------ *
 * Generated project pages only — everything above is shared chrome.
 * ------------------------------------------------------------------ */

/* A project page is a stack of images, the way the Behance pages it mirrors
   are. No narrative, no numbered sections: those belong to the hand-written
   case studies, and pretending otherwise would mean inventing copy. */
.proj-body{max-width:var(--measure-wide,1100px);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem) 4rem}

.proj-shot{margin:0 0 2.75rem}
.proj-shot .plate{margin:0}
/* Captions stay visible here. On the case study pages .plabel is a placeholder
   label that hides once a slot is filled; these are real captions from the CMS
   and are part of the content. */
.proj-cap{display:block;margin:.85rem auto 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}

/* Shown when a project has only its card image so far. Adding more images in
   the Studio makes this disappear on the next publish. */
.proj-sparse{max-width:46rem;margin:0 auto;padding:1.1rem 1.25rem;border:1px dashed var(--line);border-radius:10px;text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted)}

.proj-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;padding:2.5rem clamp(1.25rem,4vw,3rem) 3.5rem;border-top:1px solid var(--line);margin-top:1rem}
.proj-cta a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:.6rem 1.1rem;transition:border-color .3s,color .3s}
.proj-cta a:hover{color:var(--sodium);border-color:var(--sodium)}

/* Caption inside the lightbox. The case study pages have no equivalent because
   their plates carry placeholder labels, not content; these carry real ones. */
.cs-lb .lb-cap{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);max-width:min(90vw,60ch);text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(11,14,28,.7);border:1px solid var(--line);border-radius:99px;padding:.4rem .9rem;backdrop-filter:blur(4px)}
.cs-lb .lb-cap:empty{display:none}
@media (max-width:620px){.cs-lb .lb-cap{bottom:.8rem;font-size:.62rem}}

/* Three-up image row — used by Willow & Flint, so it was not in the block
   project.css was lifted from. */
.plate-row.trio{grid-template-columns:repeat(3,1fr)}
.plate-row.trio .plate{aspect-ratio:9/16}