/* ============================================================
   VIZUDRAFT — LITE CASE / SHARED SHEET
   REV 2026.08.C

   The four identity cases (Saga, Opteer, Objet, InTouch Builders)
   are the same shape: mark → system → applications. They share
   this sheet instead of each carrying its own copy, so a fix
   lands once.

   Vizudraft DNA lives here — mono spec voice, FIG numbering,
   hairlines, spec ledger, counts strip, lightbox, radius 0.
   Each page re-skins the SURFACE by overriding the tokens below
   in its own :root and opting into one texture class. Nothing
   brand-specific belongs in this file.

   Tokens a page is expected to set:
     --bg --bg-2 --paper --line --mono-dim --body-dim
     --accent        one colour, used for rules, figures, hovers
     --accent-2      optional second, used only for .btn--solid hover
     --hero-tilt     rotation on the display headings (0deg is fine)
   ============================================================ */

:root{
  /* Night Plot defaults — every page overrides these. */
  --bg:#0A0B0D; --bg-2:#101216; --paper:#E8E7E3; --ink:#121214;
  --blueprint:#4E63FF; --redline:#E8402A;
  --line:rgba(232,231,227,0.14);
  --mono-dim:rgba(232,231,227,0.52);
  --body-dim:rgba(232,231,227,0.72);
  --accent:#E8402A;
  --accent-2:#4E63FF;
  --hero-tilt:0deg;

  --font-display:"Anton",sans-serif;
  --font-body:"Space Grotesk",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --pad-x:clamp(20px,4.5vw,56px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ color-scheme:dark; scroll-padding-top:80px; }
html:not(.lenis){ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{
  background:var(--bg); color:var(--paper);
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26292F; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

.mono{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; }
.container{ width:100%; max-width:1360px; margin-inline:auto; padding-inline:var(--pad-x); }
.progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:300; }

.eyebrow{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--mono-dim);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:1.5rem;
}
.eyebrow::before{ content:"+"; color:var(--accent); font-weight:500; }

/* ------------------------------------------------------------
   SURFACE TEXTURES — one per page, opted into on .case-hero.
   All are pure CSS so they cost nothing and scale cleanly.
   ------------------------------------------------------------ */

/* SAGA — board-formed concrete: horizontal shutter lines. */
.tex-lines::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(180deg,
    rgba(232,231,227,0.05) 0 1px, transparent 1px 46px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
          mask-image:linear-gradient(180deg,#000,transparent 78%);
}

/* OPTEER — the aurora off the brand's own key visual. */
.tex-aurora::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 42% at 22% 28%, rgba(83,239,53,0.16), transparent 70%),
    radial-gradient(52% 38% at 74% 12%, rgba(83,239,53,0.10), transparent 72%);
  filter:blur(20px);
}

/* OBJET — a raking bar of afternoon sun across the plaster. */
.tex-rake::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(104deg,
    transparent 0 30%, rgba(255,244,228,0.09) 30% 44%,
    transparent 44% 52%, rgba(255,244,228,0.06) 52% 61%, transparent 61%);
}

/* INTOUCH — the drawing the mark came off: a blueprint grid. */
.tex-grid::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(232,231,227,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,231,227,0.055) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
          mask-image:linear-gradient(180deg,#000,transparent 82%);
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px,2vw,28px); padding:10px var(--pad-x);
  border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.nav__brand{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--paper);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.nav__brand svg{ height:16px; width:auto; flex:none; }
.nav__brand .vd-logo-mark{ fill:var(--redline); }
.nav__brand .vd-logo-word{ fill:var(--paper); }
.nav__links{ display:flex; gap:clamp(14px,2.2vw,30px); }
.nav__links a{
  position:relative; font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--mono-dim);
  text-decoration:none; padding-block:4px; transition:color .2s ease;
}
.nav__links a::before{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--accent); transition:width .3s cubic-bezier(.3,1.3,.5,1);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::before{ width:100%; }
.nav__links a.is-active{ color:var(--paper); }
.nav__links a.is-active::before{ width:100%; }
.nav .btn{ padding:10px 18px; font-size:11px; }

/* gallery shelf — the sheet is unpublished, so this lists the live cases */
.nav__links li{ position:relative; }
.nav__trigger{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  padding:4px 0; border:0; background:none; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--mono-dim); transition:color .2s ease;
}
.nav__trigger::before{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--accent); transition:width .3s cubic-bezier(.3,1.3,.5,1);
}
.nav__trigger i{ font-style:normal; color:var(--accent); transition:rotate .25s ease; }
.nav__has-menu:hover .nav__trigger,
.nav__has-menu:focus-within .nav__trigger,
.nav__has-menu.is-open .nav__trigger{ color:var(--paper); }
.nav__has-menu:hover .nav__trigger::before,
.nav__has-menu:focus-within .nav__trigger::before,
.nav__has-menu.is-open .nav__trigger::before{ width:100%; }
.nav__has-menu:hover .nav__trigger i,
.nav__has-menu:focus-within .nav__trigger i,
.nav__has-menu.is-open .nav__trigger i{ rotate:45deg; }
.nav__menu{
  position:absolute; top:100%; left:-18px; padding-top:13px;
  opacity:0; visibility:hidden; translate:0 -6px;
  transition:opacity .22s ease, translate .22s ease, visibility 0s .22s;
}
.nav__has-menu:hover .nav__menu,
.nav__has-menu:focus-within .nav__menu,
.nav__has-menu.is-open .nav__menu{
  opacity:1; visibility:visible; translate:0 0;
  transition:opacity .22s ease, translate .22s ease, visibility 0s;
}
/* Escape has to beat :focus-within — it returns focus to the trigger, which is
   still inside the wrapper. Four classes clears the three above. */
.nav .nav__has-menu.is-dismissed .nav__menu{ opacity:0; visibility:hidden; translate:0 -6px; }
.nav__menu-panel{ min-width:262px; border:1px solid var(--line); background:var(--bg-2); }
.nav__menu a{
  display:flex; align-items:baseline; gap:12px; padding:13px 18px;
  border-top:1px solid var(--line); font-family:var(--font-body); font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--body-dim); white-space:nowrap;
  transition:color .2s ease, background-color .2s ease;
}
.nav__menu li:first-child a{ border-top:none; }
.nav__menu a::before{ display:none; }
.nav__menu a:hover,
.nav__menu a.is-active{ color:var(--paper); background:rgba(232,231,227,0.05); }
.nav__menu-num{
  flex:none; font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.08em; color:var(--accent);
}
.nav__menu-note{
  display:block; padding:11px 18px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--mono-dim);
}
@media (max-width:780px){ .nav__links{ display:none; } }

/* ---- phones: the sheet index ----
   Below 780px the link row goes away. The homepage answers with a mono INDEX
   stamp that opens the drawing set's index, and these sheets carry the same
   one — _case-lite.js builds it from the links above, so the two lists can't
   drift. Blueprint numbers (data), paper titles, hairline rules. */
.nav__toggle{
  display:none; align-items:center; gap:8px; margin-left:auto;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--paper); background:none;
  border:1px solid rgba(232,231,227,0.4); padding:9px 14px; border-radius:0; cursor:pointer;
}
.nav__toggle i{
  font-style:normal; color:var(--redline); font-weight:500;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.nav__toggle[aria-expanded="true"] i{ transform:rotate(45deg); }
.nav-index{
  position:fixed; left:0; right:0; z-index:99; /* under .nav (100): its edge stays crisp */
  max-height:calc(100dvh - 58px); overflow-y:auto; overscroll-behavior:contain;
  background:rgba(10,11,13,0.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  clip-path:inset(0 0 100% 0); transition:clip-path .32s cubic-bezier(.2,1,.3,1);
}
.nav-index.is-open{ clip-path:inset(0); }
.nav-index[hidden]{ display:none; }
.nav-index ul{ list-style:none; margin:0; padding:4px var(--pad-x) 10px; }
.nav-index a{
  display:flex; align-items:baseline; gap:16px; padding:13px 2px;
  border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--paper); text-decoration:none;
}
.nav-index li:first-child a{ border-top:none; }
.nav-index__num{ flex:none; min-width:8.5ch; color:var(--blueprint); font-size:10px; } /* one ruled column of titles */
.nav-index a[aria-current="page"] .nav-index__num,
.nav-index a:active .nav-index__num{ color:var(--redline); }
@media (max-width:780px){ .nav__toggle{ display:inline-flex; } }
@media (min-width:781px){ .nav-index{ display:none; } }
/* Logo, INDEX and the brief don't fit a phone's width — the brief moves
   into the index as its last line. */
@media (max-width:480px){ .nav__toggle ~ .btn{ display:none; } }

.btn{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; padding:15px 28px;
  border-radius:0;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .35s cubic-bezier(.2,1.4,.4,1);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(.96); transition-duration:.1s; }
.btn--solid{ background:var(--accent); color:#fff; }
.btn--solid:hover{ background:var(--accent-2); color:var(--ink); }
.btn--ghost{ border:1px solid rgba(232,231,227,0.4); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- case hero ---------- */
.case-hero{
  position:relative; overflow:hidden;
  padding-top:clamp(7.5rem,14vw,11rem);
  padding-bottom:clamp(2rem,4vw,3.5rem);
}
.case-hero > *{ position:relative; z-index:1; }
.case-hero__top{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
}
.case-hero__title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:0.88; letter-spacing:-0.01em;
  font-size:clamp(3rem,9vw,8rem);
  transform:rotate(var(--hero-tilt)); transform-origin:left bottom;
}
.case-hero__client{
  color:var(--mono-dim); text-align:right; margin-left:auto; padding-bottom:.6rem;
}
.case-hero__client .hl{ color:var(--accent); }

.hero-band{
  margin-top:clamp(1.75rem,3.5vw,3rem);
  width:100vw; margin-left:50%; transform:translateX(-50%);
  position:relative;
}
.hero-band img{ width:100%; height:auto; }

/* ---------- spec ledger ---------- */
.spec-ledger{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.spec{ padding:clamp(1.1rem,2.2vw,1.6rem) 24px clamp(1.1rem,2.2vw,1.6rem) clamp(14px,1.6vw,22px);
  border-left:1px solid var(--line); }
.spec:first-child{ border-left:none; padding-left:0; }
.spec__k{ display:block; color:var(--mono-dim); margin-bottom:8px; }
.spec__v{ display:block; color:var(--paper); font-size:12px; }
.spec__v.num{ color:var(--accent); }
@media (max-width:640px){
  .spec{ border-left:none; padding-left:0; border-top:1px solid var(--line); }
  .spec:first-child{ border-top:none; }
}

/* ---------- sections ---------- */
.section{ padding-block:clamp(4rem,9vw,7rem); position:relative; }
.brief{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:860px){ .brief{ grid-template-columns:1fr; } }
.brief__head{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:0.92; letter-spacing:-0.01em; font-size:clamp(2rem,4.2vw,3.6rem);
  transform:rotate(var(--hero-tilt)); transform-origin:left center;
}
.brief__head em{ font-style:normal; color:var(--accent); }
.brief__body p{ color:var(--body-dim); max-width:60ch; }
.brief__body p + p{ margin-top:1.1rem; }
.brief__body .hl{ color:var(--accent); }

.shout{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.5rem,3.6vw,2.9rem); line-height:0.98;
  color:var(--paper); margin-block:clamp(2rem,4vw,3rem);
  max-width:22ch;
}
.shout em{ font-style:normal; color:var(--accent); }

/* ---------- the palette strip ----------
   Real values off the brand's own colour board, not sampled by eye.
   --c is set per chip; the label carries the spec. */
.swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,20px); }
@media (max-width:760px){ .swatches{ grid-template-columns:repeat(2,1fr); } }
.sw{
  border:1px solid var(--line); padding:clamp(1rem,2vw,1.4rem);
  transition:transform .35s cubic-bezier(.2,1,.3,1), border-color .25s ease;
}
.sw:hover{ transform:translateY(-6px); border-color:var(--c); }
/* display:block is load-bearing — a bare <span> is inline, and inline boxes
   ignore width and height, which rendered the chip as a hairline of colour. */
.sw__chip{ display:block; width:100%; height:64px; background:var(--c); margin-bottom:14px;
  border:1px solid rgba(232,231,227,0.14); }
.sw__name{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.35rem); line-height:1; margin-bottom:7px;
}
.sw__note{ color:var(--mono-dim); display:block; }
.sw__note + .sw__note{ margin-top:3px; }

/* ---------- plates ---------- */
.plates{ display:flex; flex-direction:column; gap:clamp(1rem,2.2vw,1.75rem); }
.prow{ display:grid; gap:clamp(1rem,2.2vw,1.75rem); }
.prow--1{ grid-template-columns:1fr; }
.prow--2{ grid-template-columns:1fr 1fr; }
.prow--3{ grid-template-columns:repeat(3,1fr); }
.prow--wide{ grid-template-columns:1.6fr 1fr; }
@media (max-width:860px){ .prow--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .prow--2,.prow--3,.prow--wide{ grid-template-columns:1fr; } }

.plate{ cursor:pointer; }
.plate__frame{
  position:relative; border:1px solid var(--line); background:var(--bg-2); overflow:hidden;
}
/* height:auto is load-bearing — the width/height attributes are presentational
   hints, and without it the intrinsic height wins over aspect-ratio. */
.plate__frame img{
  width:100%; height:auto; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,1,.3,1);
}
.plate:hover .plate__frame img{ transform:scale(1.04); }
.plate__cap{ display:flex; gap:10px; margin-top:10px; color:var(--mono-dim); transition:color .2s ease; }
.plate__fig{ color:var(--accent); flex:none; }
.plate:hover .plate__cap{ color:var(--paper); }
.plate:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.plate-label{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line);
  margin-bottom:clamp(1rem,2vw,1.5rem);
}
.plate-label h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:1; font-size:clamp(1.2rem,2.2vw,1.9rem);
}
.plate-label .mono{ color:var(--mono-dim); }

/* ---------- counts ---------- */
.counts{ display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:680px){ .counts{ grid-template-columns:repeat(2,1fr); } }
.count{ padding:clamp(1.4rem,3vw,2.4rem) 0 clamp(1.4rem,3vw,2.4rem) clamp(14px,1.8vw,26px);
  border-left:1px solid var(--line); }
.count:first-child{ border-left:none; padding-left:0; }
.count__n{ display:block; font-family:var(--font-display); font-size:clamp(2.4rem,5.5vw,4.5rem);
  line-height:.9; color:var(--paper); }
.count__l{ display:block; margin-top:12px; color:var(--mono-dim); }
@media (max-width:680px){
  .count{ border-left:none; padding-left:0; border-top:1px solid var(--line); }
  .count:nth-child(-n+2){ border-top:none; }
}

/* ---------- pagination + footer ---------- */
.case-foot{ display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; padding-block:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); }
.case-next{ display:flex; align-items:baseline; gap:14px; text-decoration:none; }
.case-next__name{
  font-family:var(--font-display); text-transform:uppercase; line-height:1;
  font-size:clamp(1.4rem,3vw,2.4rem);
  transition:color .2s ease,transform .3s cubic-bezier(.2,1,.3,1);
}
.case-next:hover .case-next__name{ color:var(--accent); transform:translateX(8px); }
.case-next .mono{ color:var(--accent); }

.footer{ background:color-mix(in srgb, var(--bg) 84%, #000); }
.footer__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 28px; padding-block:22px; border-top:1px solid var(--line); }
.footer__row a,.footer__row p{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--mono-dim); text-decoration:none; }
.footer__row a:hover{ color:var(--accent); }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:500; display:grid; place-items:center;
  padding:clamp(16px,4vw,56px); background:rgba(6,7,8,0.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lightbox__stage{ max-width:min(1100px,100%); display:flex; flex-direction:column; gap:12px; }
.lightbox__img{ max-width:100%; max-height:78vh; object-fit:contain;
  border:1px solid var(--line); background:var(--bg-2); }
.lightbox__cap{ display:flex; justify-content:space-between; gap:16px; color:var(--mono-dim); }
.lightbox__cap .tag{ color:var(--accent); }
.lightbox__close,.lightbox__nav{
  position:fixed; font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em;
  color:var(--paper); background:transparent; border:1px solid rgba(232,231,227,0.35);
  padding:12px 18px; transition:border-color .2s ease,color .2s ease; }
.lightbox__close:hover,.lightbox__nav:hover{ border-color:var(--accent); color:var(--accent); }
.lightbox__close{ top:18px; right:var(--pad-x); }
.lightbox__nav--prev{ left:var(--pad-x); top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:var(--pad-x); top:50%; transform:translateY(-50%); }
@media (max-width:700px){
  .lightbox__nav--prev{ top:auto; bottom:18px; left:18px; transform:none; }
  .lightbox__nav--next{ top:auto; bottom:18px; right:18px; transform:none; }
}

/* ---------- reveals ----------
   Animate `translate`, not `transform` — several headings carry a static
   transform:rotate() from --hero-tilt, and animating `transform` overwrites it. */
.js [data-reveal]{ opacity:0; translate:0 18px; }
.js [data-reveal].is-in{
  opacity:1; translate:0 0;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1) var(--d,0s),
              translate .5s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
@media (prefers-reduced-motion:reduce){
  html:not(.lenis){ scroll-behavior:auto; }
  .js [data-reveal].is-in{ transition:none; }
  .js [data-reveal]{ opacity:1; translate:0 0; }
  .btn,.plate__frame img,.plate__cap,.sw,.case-next__name,
  .nav__links a,.nav__links a::before,
  .nav__trigger,.nav__trigger::before,.nav__trigger i,
  .nav-index,.nav__toggle i{ transition:none; }
  .nav__menu{ transition:none; translate:0 0; }
  .btn:hover,.plate:hover .plate__frame img,.sw:hover,
  .case-next:hover .case-next__name{ transform:none; }
}