/* ============================================================
   DM LOGIC — system.css
   Shared global polish, loaded on every page. Additive only:
   it never redefines page layout, only smooths the edges.
   A module, not a rebuild.
   ============================================================ */

/* --- 1. Design tokens (single source of truth) ------------- */
:root{
  --paper:#ECEAE1; --ink:#1b1a16; --muted:#6c6a61; --faint:#a09e93;
  --line:#00000016; --card:#F3F1EA; --accent:#7a3340;
  --live:#3f7a4f; --build:#b07a17;
  --disp:'Archivo',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --serif:'Playfair Display',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* motion craft — entrances ease-out, the spring for signature snap-backs */
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:linear(0,.006,.025,.101,.539,.769,.896,.957,.985,1);
}

/* --- 2. Cross-document view transitions (MPA) -------------- */
/* Native page-to-page transitions. On supported browsers the espresso
   curtain (system.js) stands down and lets the browser morph instead;
   unsupported browsers fall back to the curtain dissolve. */
@view-transition{ navigation:auto; }

/* the two morph keyframes the shelf card → hero transition rides on */
@keyframes fade-out{ from{ opacity:1; } to{ opacity:0; } }
@keyframes slide-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* root layer cross-dissolve (filmic cut, preserved from the curtain era) */
::view-transition-old(root){ animation:.34s var(--ease) both fade-out; }
::view-transition-new(root){ animation:.5s  var(--ease) both slide-in; }

/* Shared-element morph — a shelf card (card-NN on the index) grows into
   the destination page's hero <h1> (same card-NN name). Nine static names,
   one per module; the reverse trip (hero → card) reuses the same pairing. */
::view-transition-group(card-00),::view-transition-group(card-01),::view-transition-group(card-02),
::view-transition-group(card-03),::view-transition-group(card-04),::view-transition-group(card-05),
::view-transition-group(card-06),::view-transition-group(card-07),::view-transition-group(card-08),
::view-transition-group(hero-img),::view-transition-group(hero-title){
  animation-duration:.55s; animation-timing-function:var(--ease-out-expo); }

/* --- 3. Scroll-reveal (and on-load hero intro) ------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s } .reveal.d2{ transition-delay:.14s }
.reveal.d3{ transition-delay:.21s } .reveal.d4{ transition-delay:.28s } .reveal.d5{ transition-delay:.35s }
/* safety: if JS never runs, never leave content hidden */
@media (scripting: none){ .reveal{ opacity:1 !important; transform:none !important; } }

/* --- 4. Editorial link underline (content links only) ------ */
.body a:not(.cta), .sister a, a.ink{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .35s var(--ease), color .2s;
}
.body a:not(.cta):hover, .sister a:hover, a.ink:hover{ background-size:100% 1px; color:var(--accent); border-color:transparent; }

/* --- 5b. Visually-hidden utility (screen-reader-only content) --- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- 5c. Skip link (keyboard users jump past the nav) ------ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font:600 .8rem/1 'Archivo',sans-serif; letter-spacing:.04em; text-decoration:none;
}
.skip:focus-visible{ left:0; }

/* --- 5. Keyboard focus + touch feedback ------------------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }
a, button, .cta, .chip, .slice, [role=button]{ -webkit-tap-highlight-color:transparent; }
.cta, .chip, .home, .dl, .btn{ transition:transform .12s var(--ease), background .2s, border-color .2s, color .2s; }
.cta:active, .home:active, .dl:active{ transform:translateY(1px) scale(.985); }
.chip:active{ transform:scale(.95); }

/* --- 6. Live status-dot pulse ----------------------------- */
.kick .d, .st.live{ position:relative; }
@keyframes dot-pulse{ 70%{ box-shadow:0 0 0 7px rgba(63,122,79,0); } 100%{ box-shadow:0 0 0 0 rgba(63,122,79,0); } }
.kick .d{ box-shadow:0 0 0 0 rgba(63,122,79,.45); animation:dot-pulse 2.4s var(--ease) infinite; }

/* --- 7. Custom cursor (pointer:fine only) ----------------- */
.cursor-ring{ position:fixed; top:0; left:0; width:24px; height:24px; border:1px solid var(--ink);
  border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  mix-blend-mode:difference; transition:width .2s var(--ease), height .2s var(--ease), opacity .3s;
  opacity:.55; will-change:transform; }
.cursor-ring.hot{ width:42px; height:42px; opacity:.9; }

/* --- 9. Paper grain (the brand's tooth) ------------------- */
/* One fixed overlay, injected once by system.js. Static, cheap, off by reduced-motion-agnostic. */
.grain{ position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply; background-repeat:repeat; }

/* --- 10. Reading-progress bar (content pages) ------------- */
.read-progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:9997;
  background:var(--accent); transform-origin:0 50%; transform:scaleX(0); }
@supports (animation-timeline: scroll()){
  .read-progress{ animation:rp-grow linear both; animation-timeline:scroll(root block); }
  @keyframes rp-grow{ to{ transform:scaleX(1); } }
}

/* --- 11. Magnetic + spring (signature CTAs) --------------- */
.magnetic{ transition:transform .45s var(--spring); will-change:transform; }

/* --- 12. Headline line-mask reveal ------------------------ */
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{ display:inline-block; transform:translateY(108%);
  transition:transform .7s var(--ease-out-expo); }
.line-mask.is-in > span{ transform:translateY(0); }

/* --- 13. Shared chrome (header / nav / footer) ------------ */
/* Canonical styles for the <dm-header>/<dm-footer> components so a
   page needs zero header/footer CSS of its own. Reserve space to
   avoid any flash before the custom element upgrades. */
dm-header, dm-footer{ display:block; }
dm-header:not(:defined), dm-footer:not(:defined){ visibility:hidden; }
dm-header{ min-height:72px; }
/* sticky, frosted nav — stays legible over any page as it scrolls */
dm-header header{ position:sticky; top:0; z-index:50; display:flex; align-items:flex-start; justify-content:space-between;
  padding:max(28px,env(safe-area-inset-top)) max(40px,env(safe-area-inset-right)) 8px max(40px,env(safe-area-inset-left));
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line); }
@supports not (backdrop-filter:blur(1px)){ dm-header header{ background:var(--paper); } }
dm-header .word{ font-family:var(--disp); font-weight:900; font-size:23px; line-height:.9; text-decoration:none; }
dm-header .word .v{ display:block; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.32em; color:var(--faint); margin-top:7px; }
dm-header nav{ display:flex; gap:20px; flex-wrap:wrap; }
dm-header nav a{ position:relative; font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; opacity:.78; transition:opacity .2s, color .2s; }
dm-header nav a:hover{ opacity:1; color:var(--accent); }
/* active-page indicator — a short accent bar under the current item */
dm-header nav a.on{ color:var(--accent); opacity:1; }
dm-header nav a.on::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:var(--accent); border-radius:2px; }
dm-footer footer{ max-width:760px; margin:0 auto;
  padding:0 24px calc(40px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
/* Truthful version line — reads as costume if not kept honest (design-study move #2). */
dm-footer .ver a{ color:var(--faint); text-decoration:none; letter-spacing:.14em;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
dm-footer .ver a:hover{ color:var(--accent); border-color:var(--accent); }

/* --- 0. Editions — pressings of the whole site ------------- */
/* <html data-ed="1|2|3"> set + persisted by system.js. Each edition
   overrides the page's own :root (attribute specificity wins), so one
   click repaints every page — palette AND display type. We're artists. */
.ed-toggle{ position:fixed; left:16px; bottom:13px; z-index:61;
  font-family:'Space Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:inherit; background:transparent; border:1px solid currentColor; border-radius:20px;
  padding:5px 11px; line-height:1; opacity:.34; cursor:pointer; transition:opacity .3s; }
.ed-toggle:hover{ opacity:.82; }
.ed-toggle .k{ font-weight:700; }

/* Ed 02 — Dark cut (Aristide): warm near-black, monospace display voice */
html[data-ed="2"]{ --paper:#0f0e0b; --ink:#EDEBE3; --muted:#9a978c; --faint:#5f5c53;
  --line:#ffffff14; --card:#1a1813; --accent:#c96a5b; --disp:'Space Mono',ui-monospace,monospace; }
html[data-ed="2"] body{ background:#0f0e0b !important;
  background-image:radial-gradient(120% 90% at 50% 3%,#17140f 0%,#0f0e0b 60%,#090805 100%) !important; }
html[data-ed="2"] h1, html[data-ed="2"] h2, html[data-ed="2"] .lead, html[data-ed="2"] .ttl{ letter-spacing:0 !important; font-weight:700 !important; }

/* Ed 03 — Reel cut: near-black cinema, thin display; the work moves (on /work) */
html[data-ed="3"]{ --paper:#08080a; --ink:#F2F0EA; --muted:#8f8c86; --faint:#565660;
  --line:#ffffff12; --card:#131316; --accent:#d98f5f; }
html[data-ed="3"] body{ background:#08080a !important;
  background-image:radial-gradient(120% 90% at 50% 0%,#121017 0%,#08080a 70%) !important; }
html[data-ed="3"] h1, html[data-ed="3"] .lead, html[data-ed="3"] .ttl, html[data-ed="3"] .mast h1{ font-weight:500 !important; letter-spacing:-.03em !important; }

/* dark editions: flip the paper grain from multiply→screen so its tooth still shows */
html[data-ed="2"] .grain, html[data-ed="3"] .grain{ mix-blend-mode:screen; opacity:.05; }

/* --- 14. Film gate — the shared matte on EVERY page (the site's "one film" motif) --- */
:root{ --gate:rgba(120,112,104,.24); --gate-tick:var(--accent); }
html[data-ed="2"], html[data-ed="3"]{ --gate:rgba(220,210,200,.20); }
.film-gate{ position:fixed; inset:11px; z-index:59; pointer-events:none; border:1px solid var(--gate); }
.film-gate b{ position:absolute; width:11px; height:11px; }
.film-gate b.tl{ top:-1px; left:-1px; border-top:1.5px solid var(--gate-tick); border-left:1.5px solid var(--gate-tick); }
.film-gate b.tr{ top:-1px; right:-1px; border-top:1.5px solid var(--gate-tick); border-right:1.5px solid var(--gate-tick); }
.film-gate b.bl{ bottom:-1px; left:-1px; border-bottom:1.5px solid var(--gate-tick); border-left:1.5px solid var(--gate-tick); }
.film-gate b.br{ bottom:-1px; right:-1px; border-bottom:1.5px solid var(--gate-tick); border-right:1.5px solid var(--gate-tick); }
@media(max-width:640px){ .film-gate{ inset:7px; } }

/* --- 15. Cross-page cut — the filmic dissolve now lives in section 2
   (::view-transition-old/new(root) → fade-out / slide-in), so navigation
   still reads as editing rather than jumping. Kept here as a signpost. */

/* --- 16. INFO overlay (the master's ABOUT open/close) — one contact card, site-wide --- */
.info-trig{ position:fixed; left:50%; bottom:13px; transform:translateX(-50%); z-index:61; cursor:pointer;
  background:rgba(20,15,11,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.09); border-radius:20px; padding:6px 15px;
  font-family:'Space Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:inherit; opacity:.6; transition:opacity .3s,color .3s; }
.info-trig:hover{ opacity:.9; color:var(--accent); }
.info-ov{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:9vh 7vw; opacity:0; pointer-events:none;
  background:#100d09f2; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transition:opacity .55s var(--ease); color:#EFE9DE; }
.info-ov.on{ opacity:1; pointer-events:auto; }
.info-in{ max-width:660px; width:100%; }
.info-in > *{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .75s var(--ease); }
.info-ov.on .info-in > *{ opacity:1; transform:none; }
.info-ov.on .info-mf{ transition-delay:.14s } .info-ov.on .info-links{ transition-delay:.24s } .info-ov.on .info-avail{ transition-delay:.34s }
.info-wm{ font-family:var(--disp); font-weight:900; font-size:clamp(46px,10vw,120px); line-height:.82; text-transform:uppercase; letter-spacing:.01em; }
.info-wm .d{ color:var(--accent); }
.info-mf{ margin-top:22px; font-family:'Inter',system-ui,sans-serif; font-size:clamp(17px,2.2vw,25px); line-height:1.45; color:#d7d2c6; max-width:34ch; }
.info-links{ margin-top:34px; display:flex; gap:28px; flex-wrap:wrap; font-family:'Space Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.info-links a{ color:#EFE9DE; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s,border-color .2s; }
.info-links a:hover{ color:var(--accent); border-color:var(--accent); }
.info-avail{ margin-top:28px; font-family:'Space Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#75705f; }
.info-x{ position:fixed; top:22px; right:26px; z-index:2; background:none; border:0; cursor:pointer;
  font-family:'Space Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#c9c4b8; }
.info-x:hover{ color:var(--accent); }
@media(prefers-reduced-motion:reduce){ .info-ov,.info-in > *{ transition:none } }

/* --- 8. Motion-safety: honour the OS setting -------------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .kick .d{ animation:none; }
  .cursor-ring{ display:none; }
  .read-progress{ display:none; }
  .line-mask > span{ transform:none; }
  .magnetic{ transition:none; }
  *{ scroll-behavior:auto !important; }
}