/* FMU · drawer.css (C) — card-catalog drawer + work view + transitions. Uses only SPEC tokens. */

/* ================= drawer ================= */
.dw { position: relative; width: 100%; max-width: 1120px; margin-inline: auto; color: var(--ink); }
.dw-stage { position: relative; width: 100%; }
.dw-list { position: absolute; inset: 0; }

.dw-hint {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 500 13px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

.dw-card { position: absolute; display: block; color: inherit; text-decoration: none; transform-origin: 50% 0; }
.dw-shape { position: absolute; left: 0; top: 0; overflow: visible; }
.dw-body { fill: var(--surface); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dw-tabfill { fill: var(--surface); stroke: var(--ink); stroke-width: 1; transition: fill var(--dur-1) ease; }
.dw-divider .dw-tabfill { fill: var(--ink); }

.dw-tab {
  position: absolute; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 18px 0; box-sizing: border-box; white-space: nowrap;
}
.dw-num { font: 500 13px/1 var(--f-mono); letter-spacing: .04em; }
.dw-name { font: 500 14px/1 var(--f-text); overflow: hidden; text-overflow: ellipsis; padding-left: 12px; }
.dw-divider .dw-tab { color: var(--bg); font: 500 13px/1 var(--f-mono); letter-spacing: .06em; }

/* work cards: the whole visible strip is the hit area, not just the tab */
.dw-work { cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; outline: none; }
.dw-work.is-up .dw-tabfill { fill: var(--accent); }
.dw-work.is-up .dw-tab { color: var(--on-accent); }
.dw-work:focus-visible .dw-tab { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .dw-work:active .dw-preview { transform: scale(.985); }
}

.dw-face {
  position: absolute; left: 20px; right: 20px; top: calc(var(--dw-tab, 30px) + 14px);
  display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden;
}
.dw-head { align-self: stretch; display: flex; align-items: baseline; gap: 16px; }
.dw-title {
  font-family: var(--f-display); font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; word-spacing: .14em; line-height: .92; font-size: 26px; width: max-content; padding-top: .06em;
}
.dw-meta, .dw-go { font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dw-go { margin-left: auto; color: var(--ink); }
.dw-go[data-touch] { visibility: hidden; }
.dw-work.is-armed .dw-go[data-touch] { visibility: inherit; }
.dw-preview {
  position: relative; display: block; margin-top: 12px; overflow: hidden;
  outline: 1px solid var(--ink); background: var(--surface);
  transition: transform var(--dur-1) var(--ease-out);
}
.dw-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dw-live {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0;
  pointer-events: none; opacity: 0; transition: opacity 240ms ease; background: transparent;
}
.dw-live.is-loaded { opacity: 1; }

.dw-walls, .dw-front { position: absolute; left: 0; top: 0; overflow: visible; }
.dw-walls { z-index: 0; }
.dw-wall { fill: none; stroke: var(--ink); stroke-width: 1; }
.dw-front { z-index: 60; }
.dw-rim, .dw-panel { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.dw-label {
  position: absolute; left: 50%; z-index: 61; transform: translate(-50%, -50%);
  background: var(--accent); color: var(--on-accent); outline: 1px solid var(--ink);
  font: 500 14px/1 var(--f-text); padding: 8px 18px; white-space: nowrap;
}

@media (max-width: 620px) {
  .dw-title { font-size: 22px; }
  /* phone: title on one row; the meta line and the "tap again" hint share the second row */
  .dw-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dw-meta, .dw-go { grid-row: 2; grid-column: 1; margin: 0; }
  .dw-work.is-armed .dw-meta { visibility: hidden; }
  .dw-face { left: 14px; right: 14px; top: calc(var(--dw-tab, 36px) + 12px); }
  .dw-tab { padding: 2px 14px 0; }
  .dw-hint { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-face { transition: opacity var(--dur-1) ease; }
}

/* ================= work view ================= */
/* While a work is open the page itself steps aside; the document scrolls the work page.
   (No overflow lock on <html>: toggling the scrollbar resizes the viewport and aborts the view transition.) */
html.is-work body > :not(#work-view):not(canvas):not(script):not(style):not(link) { display: none !important; }

.wv { position: relative; z-index: 1; min-height: 100vh; color: var(--ink); }
.wv[hidden] { display: none; }
.wv-page { width: var(--frame, min(1320px, 100vw - 48px)); margin-inline: auto; padding-bottom: 96px; }

.wv-bar {
  position: sticky; top: 0; z-index: 3; background: var(--bg);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; border-bottom: 1px solid var(--line);
}
/* breadcrumb: real links, "/" separators in the mono voice of the top bar */
.wv-crumb { min-width: 0; font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wv-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.wv-crumb li { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-width: 0; }
.wv-crumb li:not(:last-child) { flex-shrink: 0; }
.wv-crumb li + li::before { content: "/"; color: var(--muted); }
.wv-crumb a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color var(--dur-1) ease; }
@media (hover: hover) and (pointer: fine) { .wv-crumb a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; } }
.wv-crumb [aria-current] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.wv-of { color: var(--muted); }
.wv-close { text-decoration: none; }
.wv-close {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0;
  font: 500 14px/1 var(--f-text); cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.wv-close kbd { font: 500 13px/1 var(--f-mono); padding: 4px 6px; border: 1px solid var(--line); }
.wv-close:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .wv-close:hover { background: var(--ink); color: var(--bg); } }

.wv-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 48px; padding-top: 32px; }
.wv-meta { margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px 28px; font: 500 13px/1 var(--f-mono); letter-spacing: .04em; }
.wv-meta i { font-style: normal; color: var(--muted); margin-right: 8px; }
.wv-title {
  margin: 0 0 28px; outline: none; width: max-content; max-width: 100%;
  font-family: var(--f-display); font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; word-spacing: .14em; line-height: .9; padding-top: .08em; font-size: clamp(48px, 6.4vw, 96px);
}

.wv-browser { border: 1px solid var(--ink); background: var(--surface); }
.wv-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 44px; padding: 0 0 0 14px; border-bottom: 1px solid var(--ink); background: var(--bg);
}
.wv-addr { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.wv-dot { width: 6px; height: 6px; background: var(--signal); flex: none; }
.wv-modes { display: flex; height: 100%; }
.wv-modes button {
  height: 100%; padding: 0 14px; border: 0; border-left: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border-radius: 0;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.wv-modes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.wv-modes button:focus-visible, .wv-btn:focus-visible, .wv-next:focus-visible, .wv-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wv-screen { position: relative; overflow: hidden; background: var(--surface); }
.wv-device { position: absolute; top: 0; left: 0; transform-origin: 0 0; background: #fff; }
.wv-screen[data-mode="m"] .wv-device { top: 12px; outline: 1px solid var(--ink); }
.wv-live { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.wv-screen.is-engaged .wv-live { pointer-events: auto; }
.wv-gate {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 20px; border: 0; background: transparent; cursor: pointer; border-radius: 0;
}
.wv-screen.is-engaged .wv-gate { display: none; }
.wv-gate-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px;
  background: var(--ink); color: var(--bg); font: 500 15px/1 var(--f-text);
  transition: transform var(--dur-1) var(--ease-out);
}
.wv-gate:active .wv-gate-pill { transform: scale(.97); }
.wv-gate:focus-visible .wv-gate-pill { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wv-gate:hover .wv-gate-pill { transform: translateY(-2px); } }
.wv-release {
  height: 100%; padding: 0 14px; border: 0; border-left: 1px solid var(--ink); background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border-radius: 0;
  margin-left: auto;
}
.wv-release[hidden] { display: none; }
.wv-release kbd { font: 500 13px/1 var(--f-mono); }
.wv-more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 44px;
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.wv-more span { display: inline-block; animation: wv-nudge 1.8s var(--ease-io) 1.2s 3 both; }
@keyframes wv-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .wv-more span { animation: none; } }
.wv-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  pointer-events: none; transition: opacity 320ms ease;
}
.wv-screen[data-mode="m"] .wv-poster { object-fit: contain; }
.wv-screen.is-live .wv-poster { opacity: 0; }

.wv-side { padding-top: 6px; display: flex; flex-direction: column; }
.wv-line { margin: 0 0 32px; font: 400 17px/1.5 var(--f-text); max-width: 34ch; }
.wv-h2 { margin: 0 0 14px; font: 500 13px/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.wv-list { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--line); }
.wv-list li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.45 var(--f-text); }
.wv-list li span { font: 500 13px/1.9 var(--f-mono); color: var(--muted); }
.wv-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px;
  background: var(--ink); color: var(--bg); text-decoration: none; font: 500 15px/1 var(--f-text);
  transition: transform var(--dur-1) var(--ease-out);
}
.wv-btn:active { transform: scale(.97); }
.wv-side .dock { height: 180px; margin: 24px 0; }
.wv-next { margin-top: auto; display: block; color: inherit; text-decoration: none; border-top: 1px solid var(--ink); padding-top: 14px; }
.wv-next-k { display: block; font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.wv-next-row { display: flex; align-items: center; gap: 14px; }
.wv-next-img { width: 112px; height: 70px; object-fit: cover; object-position: top; outline: 1px solid var(--ink); transition: transform var(--dur-2) var(--ease-out); }
.wv-next-n { font: 500 15px/1.3 var(--f-text); }
.wv-next-n b { display: block; font: 500 13px/1.4 var(--f-mono); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .wv-next:hover .wv-next-img { transform: translateX(4px); } }

.wv-sheet { margin-top: 72px; }
.wv-run { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .42fr); gap: 0; border: 1px solid var(--ink); }
.wv-frame { margin: 0; border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.wv-frame:last-child { border-right: 0; }
.wv-frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; flex: 1 1 auto; min-height: 0; }
.wv-frame--m img { aspect-ratio: auto; height: 0; flex: 1 1 0; }
.wv-frame figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--ink);
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; }

/* prev / next: two hairline cells, the whole cell is the link */
.wv-pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: 72px; border: 1px solid var(--ink); }
.wv-pg { display: grid; gap: 14px; padding: 20px 22px; color: inherit; text-decoration: none; transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.wv-pg + .wv-pg { border-left: 1px solid var(--ink); text-align: right; }
.wv-pg-k { font: 500 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wv-pg-n { display: grid; gap: 6px; font: 800 clamp(24px, 2.4vw, 34px)/.95 var(--f-display); font-stretch: 62%; text-transform: uppercase; word-spacing: .14em; padding-top: .06em; }
.wv-pg-n b { font: 500 13px/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.wv-pg:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) { .wv-pg:hover { background: var(--accent); color: var(--on-accent); } .wv-pg:hover .wv-pg-k, .wv-pg:hover .wv-pg-n b { color: var(--on-accent); } }

/* call CTA + legal line */
.wv-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: end; margin-top: 96px; padding-top: 28px; border-top: 2px solid var(--ink); }
.wv-cta-h { margin: 0; font: 800 clamp(48px, 6vw, 96px)/.92 var(--f-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; word-spacing: .14em; padding-top: .06em; }
.wv-cta-b { display: grid; gap: 22px; }
.wv-cta-b p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 40ch; }
.wv-cta-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.wv-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 72px; padding-top: 4px; border-top: 1px solid var(--line); color: var(--muted); }
.wv-foot a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .wv-foot a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; } }

.wv-ghost { position: fixed; z-index: 80; object-fit: cover; object-position: top; transform-origin: 0 0; pointer-events: none; outline: 1px solid var(--ink); }

@media (max-width: 760px) {
  .wv-page { width: var(--frame, calc(100vw - 32px)); padding-bottom: 64px; }
  .wv-bar { height: 56px; }
  .wv-crumb ol, .wv-crumb li { gap: 6px; }
  .wv-of { display: none; }
  .wv-close kbd { display: none; }
  .wv-pager { grid-template-columns: 1fr; margin-top: 48px; }
  .wv-pg + .wv-pg { border-left: 0; border-top: 1px solid var(--ink); text-align: left; }
  .wv-cta { grid-template-columns: 1fr; margin-top: 64px; }
  .wv-cta-h { font-size: 13vw; }
  .wv-cta-acts { display: grid; grid-template-columns: 1fr; }
  .wv-cta-acts .btn { justify-content: space-between; }
  .wv-foot { margin-top: 48px; }
  .wv-frame figcaption { font-size: 12px; letter-spacing: 0; padding: 8px; }
  .wv-grid { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .wv-title { font-size: clamp(40px, 12vw, 56px); margin-bottom: 20px; }
  .wv-side { padding-top: 28px; }
  .wv-side .dock { height: 140px; }
  .wv-run { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* minmax(0): 320 px reflow (WCAG 1.4.10) */
  .wv-frame:nth-child(2) { border-right: 0; }
  .wv-frame:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .wv-frame--m img { aspect-ratio: 16 / 10; height: auto; flex: none; }
  .wv-addr { font-size: 13px; }
  .wv-modes button { padding: 0 10px; }
}

/* ================= view transitions ================= */
::view-transition-group(fmu-shot),
::view-transition-group(fmu-title) { animation-duration: 560ms; animation-timing-function: var(--ease-io, cubic-bezier(.65,0,.35,1)); }
::view-transition-old(fmu-shot), ::view-transition-new(fmu-shot) {
  animation-duration: 560ms; height: 100%; width: 100%; object-fit: cover; object-position: top;
}
/* one title travels (no double-exposure crossfade of two text sizes) */
::view-transition-old(fmu-title) { animation: none; opacity: 0; }
::view-transition-new(fmu-title) { animation: none; height: 100%; width: 100%; }
::view-transition-old(root) { animation: 400ms var(--ease-out, ease-out) both wv-fade-out; }
::view-transition-new(root) { animation: 400ms var(--ease-out, ease-out) both wv-fade-in; }
@keyframes wv-fade-out { to { opacity: 0; } }
@keyframes wv-fade-in { from { opacity: 0; } }
html.wv-reduce::view-transition-old(root) { animation: 200ms ease both wv-fade-out; }
html.wv-reduce::view-transition-new(root) { animation: 200ms ease both wv-fade-in; }

/* Tab labels carry the same ground as the SVG tab they sit on, so the text always has a measurable,
   real background (the SVG fill is invisible to contrast tools). Visually identical. */
.dw-num, .dw-name, .dw-dl, .dw-dc { background: var(--surface); color: var(--ink); transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.dw-divider .dw-dl, .dw-divider .dw-dc { background: var(--ink); color: var(--bg); }
.dw-work.is-up .dw-num, .dw-work.is-up .dw-name { background: var(--accent); color: var(--on-accent); }

/* static work pages (is/<slug>/): service links in the footer, added by tools/build.mjs */
.wv-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; flex-basis: 100%; }
.wv-svc > span { color: var(--muted); }