/* ==========================================================================
   KNCS — overrides.css · round 7 layer (loads after styles.css)
   1 sticky-bar clearance · 2 work plate captions · 3 footer · 4 page heroes
   5 work page: two-column project card grid · 6 home hero v2 (Aether ref)
   7 principle cards: optional image header
   ========================================================================== */


/* 1 · cream strip above the footer: the sticky bar only exists under 1024px */
@media (min-width:1024px){
  body.has-sticky main{padding-bottom:0}
}


/* 2 · work plates: chip + CTA sit in a caption row BELOW the screenshot */
.plate,a.plate{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s-3)}
.plate-frame{grid-column:1/-1}
.plate-chip,.plate-cta{position:static}
.plate-chip{margin:var(--s-3) 0 var(--s-1) var(--s-1);justify-self:start}
.plate-cta{margin:var(--s-3) var(--s-1) var(--s-1) 0;padding:.5rem .85rem;opacity:1;transform:none;justify-self:end}
a.plate:hover .plate-cta{background:var(--brand)}


/* 3 · footer */
.footer{border-top:1px solid var(--line-on-dark)}
.footer address strong{color:var(--paper);font-weight:600}


/* 4 · page heroes (Services, Work, About, Contact, Insights) */
.page-hero{position:relative;overflow:clip;padding-block:clamp(var(--s-7),7vw,var(--s-9))}
.page-hero .container{position:relative;z-index:1}
.page-hero-grid{display:grid;gap:var(--s-7);align-items:center}
.page-hero-copy{display:grid;gap:var(--s-4);align-content:center;max-width:46rem}
.page-hero-copy>*{margin:0}
.page-hero h1{font-size:clamp(2.3rem,3.4vw + 1rem,3.9rem);line-height:1.04;max-width:18ch;text-wrap:balance}
.page-hero .lede{color:var(--paper);max-width:52ch}
.page-hero.has-eyebrow .section-index{display:none}
.page-hero .cta-signal{opacity:.4}
@media (max-width:767.98px){ .page-hero .cta-signal{display:none} }
.page-hero-media{max-width:520px;width:100%}
@media (min-width:1024px){
  .page-hero.has-media .page-hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-8)}
  .page-hero-media{justify-self:end}
}


/* cascaded real-work screenshots: fixed-ratio box, absolutely-positioned shots —
   guarantees the stack can NEVER exceed its box, however many plates are passed in. */
.pg-stack{position:relative;width:100%;max-width:480px;aspect-ratio:4/3}
.pg-shot{
  position:absolute;margin:0;width:76%;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-m);padding:6px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  transition:transform .5s var(--ease);
}
.pg-shot:nth-child(1){top:0;left:0;z-index:1}
.pg-shot:nth-child(2){top:14%;left:16%;z-index:2}
.pg-shot:nth-child(3){top:28%;left:32%;z-index:3}
.pg-stack:hover .pg-shot:nth-child(1){transform:translate(-4px,-4px)}
.pg-stack:hover .pg-shot:nth-child(2){transform:translate(-2px,-2px)}
.pg-shot figcaption{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--s-3);padding:.1rem .25rem .5rem;
  font:500 var(--fs-100)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.pg-shot .ph{position:relative;padding-top:46.4%;overflow:hidden;border-radius:var(--r-s);background:var(--paper-deep)}
.pg-shot .ph picture{position:absolute;inset:0;width:100%;height:100%}
.pg-shot .ph img{position:absolute;inset:0;width:103%;height:103%;object-fit:cover;object-position:50% 0}


/* single owned photo (ratio-locked with padding-top, set inline from width/height) */
.pg-photo{margin:0}
.pg-photo-frame{position:relative;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--line-on-dark);background:var(--band)}
.pg-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.pg-photo figcaption{margin-top:var(--s-2);font:400 var(--fs-200)/1.5 var(--font-mono);letter-spacing:.04em;color:var(--accent-on-dark)}


/* 5 · project cards: two-column grid, used on both Home's "Selected work"
   and the full Work page. With 2 (Home) or 4 (Work) projects, every row fills
   cleanly — no odd-leftover special case needed. Revisit if the count ever
   becomes odd again. */
.work-cards{display:grid;gap:var(--s-6)}
@media (min-width:700px){
  .work-cards{grid-template-columns:repeat(2,1fr);gap:var(--s-7) var(--s-6)}
}
.proj-card{display:flex;flex-direction:column;gap:var(--s-4);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);overflow:hidden}
.proj-card:hover{box-shadow:var(--shadow-1);border-color:rgba(41,52,131,.35)}
html.js .proj-card[data-reveal]{transition:opacity .6s var(--ease),transform .5s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
html.js .proj-card[data-reveal="2"]{transition-delay:.08s,.08s,0s,0s}
html.js .proj-card.revealed:hover{transform:translateY(-3px);transition-delay:0s}
.proj-card-frame{display:block;position:relative;text-decoration:none;color:inherit;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.proj-card-frame .plate-frame{border-radius:0}
.proj-card-frame:hover .plate-frame img{transform:scale(1.035)}
.proj-chip{position:absolute;top:var(--s-3);left:var(--s-3);z-index:2;background:rgba(247,244,238,.94);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;font:500 var(--fs-100)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep)}
.proj-chip.is-concept{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.proj-card-body{display:grid;gap:var(--s-3);padding:0 var(--s-5) var(--s-5)}
.proj-card-title{font-size:var(--fs-700)}
.proj-card-title a{color:inherit;text-decoration:none}
.proj-card-title a:hover{color:var(--brand-deep)}
.proj-card-text{font-size:var(--fs-300);color:var(--body-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.proj-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-2)}
.proj-card-actions .btn-quiet{min-height:40px;padding:.55rem 1rem}


/* ==========================================================================
   6 · HOME HERO V2 — Aether-reference cosmic hero (home page only)
   Deep-space atmosphere, glowing paper-tone horizon, console brief box,
   floating real-project shards. Built from HERO-DESIGN-PROMPT.md with the
   deviations explicitly agreed in chat: JetBrains Mono (not Geist), no "NEW"
   chip, horizon bottom tone matched to --paper (#F7F4EE) for seamless
   hand-off into the next section, one perpetual animation only (horizon
   breathing) — shard/headline/console entrance is a single one-shot
   load sequence, not a second infinite loop.

   Revision (Oct 2026): left shard changed from a static Wood Affairs project
   checklist to a live open/closed status read (see app.js computeStatus()).
   Old .shard-steps/.shard-progress rules removed; replaced with
   .shard-status-row/.shard-dot. Wood Affairs remains represented elsewhere
   on the page via home.selectedWork[] — nothing was lost.
   ========================================================================== */

.hero.hero-v2{
  position:relative;isolation:isolate;overflow:clip;
  display:flex;align-items:center;
  min-height:100svh;padding-block:clamp(5rem,12vw,8rem);
  background:#030817;color:#F5F7FC;text-align:center;
}

/* -- atmosphere: starfield, orbit arcs, horizon -- */
.hero-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.hero-stars{position:absolute;inset:0;overflow:hidden}
.hero-stars::before,
.hero-stars::after{content:"";position:absolute;top:0;left:0;width:1px;height:1px;background:transparent}
.hero-stars::before{
  box-shadow:
    24px 40px rgba(255,255,255,.45),68px 120px rgba(255,255,255,.3),115px 60px rgba(255,255,255,.55),
    150px 200px rgba(255,255,255,.25),190px 90px rgba(255,255,255,.4),230px 150px rgba(255,255,255,.6),
    275px 35px rgba(255,255,255,.3),320px 180px rgba(255,255,255,.45),360px 100px rgba(255,255,255,.35),
    410px 230px rgba(255,255,255,.5),455px 55px rgba(255,255,255,.3),500px 160px rgba(255,255,255,.4),
    545px 95px rgba(255,255,255,.55),590px 210px rgba(255,255,255,.25),635px 45px rgba(255,255,255,.45),
    680px 140px rgba(255,255,255,.3),725px 70px rgba(255,255,255,.5),770px 190px rgba(255,255,255,.35),
    815px 110px rgba(255,255,255,.6),860px 230px rgba(255,255,255,.25),905px 60px rgba(255,255,255,.4),
    950px 170px rgba(255,255,255,.3),995px 90px rgba(255,255,255,.5),1040px 220px rgba(255,255,255,.35),
    1085px 50px rgba(255,255,255,.45),1130px 150px rgba(255,255,255,.3),1175px 100px rgba(255,255,255,.55),
    1220px 200px rgba(255,255,255,.25),1265px 70px rgba(255,255,255,.4),1310px 160px rgba(255,255,255,.45);
}
.hero-stars::after{
  filter:blur(1px);
  box-shadow:
    50px 300px rgba(255,255,255,.18),140px 420px rgba(255,255,255,.14),230px 350px rgba(255,255,255,.2),
    320px 460px rgba(255,255,255,.12),410px 380px rgba(255,255,255,.22),500px 440px rgba(255,255,255,.15),
    590px 320px rgba(255,255,255,.2),680px 480px rgba(255,255,255,.13),770px 360px rgba(255,255,255,.18),
    860px 420px rgba(255,255,255,.14),950px 340px rgba(255,255,255,.2),1040px 470px rgba(255,255,255,.12),
    1130px 390px rgba(255,255,255,.22),1220px 450px rgba(255,255,255,.15),1310px 330px rgba(255,255,255,.2),
    1400px 410px rgba(255,255,255,.13),1460px 500px rgba(255,255,255,.18),1500px 280px rgba(255,255,255,.16);
  width:2px;height:2px;
}

.orbit{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.orbit-a{width:140vmax;height:140vmax;border:1px dotted rgba(255,255,255,.08)}
.orbit-b{width:100vmax;height:100vmax;border:1px dashed rgba(255,255,255,.06)}

.hero-horizon{
  position:absolute;left:50%;top:66%;width:300vw;height:300vw;transform:translateX(-50%);
  border-radius:50%;z-index:1;
  background:linear-gradient(180deg,#9FC0FF 0%,#CFE0FF 22%,#F7F4EE 100%);
  animation:hero-horizon-breathe 22s ease-in-out infinite;
}
@keyframes hero-horizon-breathe{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}
.horizon-limb{
  position:absolute;left:0;right:0;top:-110px;height:150px;
  background:
    radial-gradient(55% 100% at 50% 100%,rgba(92,140,255,.55),transparent 70%),
    radial-gradient(35% 100% at 50% 100%,rgba(36,72,245,.4),transparent 70%);
  filter:blur(6px);
}
.horizon-limb::after{
  content:"";position:absolute;left:0;right:0;bottom:34px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}

/* -- content -- */
.hero-v2-inner{position:relative;z-index:2;max-width:880px;margin-inline:auto;display:grid;justify-items:center}

.hero-pill{
  display:inline-flex;align-items:center;gap:.6em;margin:0;padding:.5em 1.1em;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:13px;letter-spacing:.02em;color:#CFE0FF;
}
.hero-pill-chip{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#5C8CFF,#2448F5);display:inline-block}

.hero-v2-headline{margin:var(--s-5) 0 0;display:grid;gap:.08em;font-weight:500;letter-spacing:-.02em;
  font-family:"Inter Tight",Inter,system-ui,sans-serif;font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02}
.hero-v2-headline .line-1{color:#fff}
.hero-v2-headline .line-2{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:#CFE0FF}

.hero-v2-sub{margin:var(--s-5) 0 0;max-width:56ch;color:#8A93B4;font-size:clamp(1rem,1.2vw + .6rem,1.15rem);line-height:1.55}

.hero-console{
  margin:var(--s-6) 0 0;width:100%;max-width:620px;text-align:left;
  background:#F5F7FC;color:#141714;border-radius:20px;padding:1.1rem 1.1rem 1rem;
  box-shadow:0 30px 80px rgba(3,8,23,.55);
}
.console-row{display:flex;align-items:center;gap:.75rem}
.console-input-row{padding-bottom:.75rem;border-bottom:1px solid rgba(20,23,20,.08)}
.console-input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:500 1rem/1.4 "Inter Tight",Inter,system-ui,sans-serif;color:#141714;
}
.console-input::placeholder{color:#8A93B4}
.console-input:focus-visible{outline:2px solid #2448F5;outline-offset:2px;border-radius:4px}
.console-send{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#5C8CFF,#2448F5);color:#fff;text-decoration:none;
  box-shadow:0 8px 20px rgba(36,72,245,.45);transition:transform .3s var(--ease);
}
.console-send:hover{transform:translateY(-2px)}
.console-send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.console-send svg{width:18px;height:18px}
.console-chip-row{padding-top:.75rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.console-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:#ECEFF6;border-radius:9px;padding:.4rem .65rem;font-size:12px;color:#454E6D;white-space:nowrap}
.chip svg{width:12px;height:12px;color:#638CEA;flex:0 0 auto}
.console-counter{color:#8A93B4;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

.hero-v2-secondary{margin:var(--s-5) 0 0;font-size:14px}
.hero-v2-secondary a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding-inline:.25rem;color:#AAC5F9;text-decoration:none}
.hero-v2-secondary a:hover{color:#fff}
.hero-v2-secondary svg{width:16px;height:16px}

.hero-meta-v2{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;margin:var(--s-5) 0 0;font-size:12px;color:#8A93B4}
@media (min-width:1024px){ .hero-meta-v2{display:none} }

/* -- floating shards: live status + real rating, desktop only -- */
.hero-shards{display:none}
@media (min-width:1024px){
  .hero-shards{display:block}
  .shard{
    position:absolute;z-index:3;width:230px;border-radius:14px;
    background:rgba(7,17,48,.9);border:1px solid rgba(255,255,255,.08);color:#CFE0FF;
    box-shadow:0 20px 50px rgba(3,8,23,.5);text-align:left;
  }
  .shard-left{left:4%;top:20%;padding:0}
  .shard-right{right:4%;top:32%;padding:1rem 1.1rem}
  .shard-label{margin:0 0 .6rem;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8A93B4}
  .shard-label a{color:#AAC5F9;text-decoration:none}
  .shard-label a:hover{color:#fff}
  .shard-foot{margin:0;font-size:12px;letter-spacing:.04em;color:#8A93B4}
  .shard-right .shard-figure{margin:.1rem 0 .3rem;font:500 2.4rem/1 "Inter Tight",Inter,system-ui,sans-serif;color:#fff}
  .shard-right .shard-figure .suffix{color:#7DFFB6;font-size:1.4rem;margin-left:.1em}
  .shard-note{margin:0;font-size:12px;color:#8A93B4}

  /* live status shard: whole card is a real <a href="#faq"> link */
  .shard-left .shard-link{display:block;padding:1rem 1.1rem;color:inherit;text-decoration:none;border-radius:14px}
  .shard-left .shard-link:hover .shard-status-text{color:#fff}
  .shard-left .shard-link:focus-visible{outline:2px solid #fff;outline-offset:-2px}
  .shard-status-row{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:14px;color:#CFE0FF}
  .shard-dot{width:8px;height:8px;border-radius:50%;background:#8A93B4;flex:0 0 auto}
  .shard-dot.is-open{background:#7DFFB6}
  .shard-dot.is-closed{background:#8A93B4}
}

/* -- one-shot load sequence: badge → headline → sub → console → shards --
   pure CSS, runs regardless of JS; the only OTHER motion in this section
   is the single perpetual horizon-breathe animation above. */
.hero-pill,
.hero-v2-headline .line,
.hero-v2-sub,
.hero-console,
.hero-v2-secondary,
.hero-meta-v2,
.shard{
  opacity:0;transform:translateY(12px);
  animation:hero-rise .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes hero-rise{to{opacity:1;transform:translateY(0)}}
.hero-pill{animation-delay:0ms}
.hero-v2-headline .line-1{animation-delay:70ms}
.hero-v2-headline .line-2{animation-delay:140ms}
.hero-v2-sub{animation-delay:210ms}
.hero-console{animation-delay:290ms}
.hero-v2-secondary{animation-delay:340ms}
.hero-meta-v2{animation-delay:340ms}
.shard-left{animation-delay:380ms}
.shard-right{animation-delay:420ms}

@media (prefers-reduced-motion:reduce){
  .hero-horizon{animation:none}
  .hero-pill,.hero-v2-headline .line,.hero-v2-sub,.hero-console,
  .hero-v2-secondary,.hero-meta-v2,.shard{animation:none;opacity:1;transform:none}
}


/* 7 · principle cards: optional image header (home.philosophy[].image) */
.prin.has-media{padding:0;display:flex;flex-direction:column}
.prin.has-media .prin-media{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--paper-deep)}
.prin.has-media .prin-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.prin.has-media:hover .prin-media img{transform:scale(1.04)}
.prin.has-media .prin-body{padding:var(--s-6)}

/* END OF FILE */