/* Work page preview. Builds on ../../c/css/a.css (tokens, header, footer, rail, closing) and plates.css. */

/* shared page bits (same on every page preview) */
.will-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.will-reveal.is-in { opacity: 1; transform: none; }
.pg-close .closing-stage { min-height: 88svh; }
.motion.gl .pg-close { height: auto; }
.motion.gl .pg-close .closing-stage { position: relative; height: auto; min-height: 88svh; }
.pg-close .giant span:last-child { color: var(--accent); }
.pg-close-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 12px; }
.pg-close-links .link { margin-top: 0; }
.hd-nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- HERO ---------- */
.wk-hero { position: relative; padding-top: calc(var(--hd) + clamp(32px, 6vh, 64px)); }
.wk-hero-copy { display: grid; gap: 24px 64px; align-items: end; }
@media (min-width: 900px) { .wk-hero-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.wk-h1 { font: 900 clamp(3rem, 8.2vw, 8.75rem)/.9 var(--f-display); letter-spacing: -0.04em; margin-left: -0.04em; text-wrap: balance; }
.wk-hero-side .lede { max-width: 44ch; }
.wk-hints { display: none; }
.wk-stage { position: relative; margin-top: clamp(36px, 6vh, 64px); }
.wk-rail figure { height: clamp(360px, 62vh, 640px); }
.wk-rail-meta { margin-top: 20px; }

/* wall mode: the wall is the full-height hero, the words sit under it */
.gl .wk-hero { height: 100svh; min-height: 680px; padding-top: var(--hd); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.gl .wk-stage { grid-row: 1; margin-top: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.gl .wk-hero-copy { grid-row: 2; width: 100%; padding-top: clamp(16px, 2.6vh, 28px); padding-bottom: clamp(24px, 4.4vh, 48px); }
.gl .wk-h1 { font-size: clamp(3rem, 6.4vw, 7rem); }
.gl .wk-rail { flex: 1; min-height: 0; }
.gl .wk-rail figure { height: 100%; }
.gl .wk-rail img { height: 100%; }

.wk-wall { display: none; }
.wk-wall-on .wk-wall { display: block; position: relative; flex: 1; min-height: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wk-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.wk-wall-on:not(.wk-open) .wk-rail, .wk-wall-on:not(.wk-open) .wk-rail-meta { display: none; }
.wk-wall-on .wk-hints { display: flex; gap: 28px; margin-top: 22px; transition: opacity .6s var(--ease); }
.wk-hints li { display: inline-flex; align-items: center; gap: 10px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.wk-hints li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
.wk-open .wk-hints { opacity: 0; }

/* keyboard path: real buttons, visually hidden until one takes focus */
.wk-keys { display: none; }
.wk-wall-on:not(.wk-open) .wk-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 var(--pad);
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wk-wall-on:not(.wk-open) .wk-keys:focus-within { position: absolute; left: 0; top: 12px; z-index: 3; width: auto; height: auto; overflow: visible; clip-path: none; }
.wk-keys button, .wk-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); background: var(--ink-0); color: var(--fg); font: 600 .9375rem/1 var(--f-body); cursor: pointer; transition: border-color .4s var(--ease), opacity .4s var(--ease); }
.wk-keys button:focus-visible, .wk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.wk-btn:hover { border-color: var(--accent); }
.wk-btn:disabled { opacity: .35; cursor: default; border-color: var(--rule); }

/* stage mode: the frame open at full width, as itself */
.wk-bar[hidden] { display: none; }
.wk-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 14px; }
.wk-back { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; min-height: 48px; }
.wk-back::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.wk-step { display: flex; gap: 8px; }
.wk-prev, .wk-next { width: 48px; min-height: 48px; padding: 0; display: inline-grid; place-items: center; }
.wk-prev span, .wk-next span { width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.wk-prev span { transform: translateX(2px) rotate(-135deg); }
.wk-next span { transform: translateX(-2px) rotate(45deg); }
.wk-open .wk-rail { scroll-snap-type: x mandatory; gap: 0; padding-inline: 0; }
.wk-open .wk-rail.is-drag { scroll-snap-type: none; }
.wk-open .wk-rail figure { flex: 0 0 100%; height: 100%; margin: 0; background: transparent; scroll-snap-align: center; }
.wk-open .wk-rail img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.wk-open .wk-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wk-open .wk-rail-meta, .wk-wall-on.wk-open .wk-wall { display: none; }

/* ---------- SELECTED CLIENTS: the index ---------- */
.wk-clients { padding-block: clamp(96px, 14vh, 168px); border-top: 1px solid var(--rule-soft); }
.wk-clients-head { display: grid; gap: 16px 64px; align-items: end; margin-bottom: clamp(48px, 8vh, 88px); }
@media (min-width: 900px) { .wk-clients-head { grid-template-columns: 1fr 1fr; } }
.wk-clients-head .body { margin-top: 0; }
.wk-index { display: grid; gap: 64px clamp(40px, 6vw, 112px); align-items: start; }
@media (min-width: 900px) { .wk-index { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ix-label { display: flex; align-items: center; gap: 12px; font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); padding-bottom: 18px; }
.ix-label::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; }
.ix-list { border-top: 1px solid var(--rule); }
.ix-list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: clamp(72px, 9vh, 96px); border-bottom: 1px solid var(--rule-soft); scroll-margin-block: 30vh; }
.ix-name { font: 700 clamp(1.6rem, 2.9vw, 2.75rem)/1 var(--f-display); letter-spacing: -0.025em; color: var(--fg); transition: color .5s var(--ease), transform .6s var(--ease); }
.ix-logo { flex: none; width: clamp(88px, 9vw, 132px); height: 52px; display: grid; place-items: center end; }
.ix-logo img { max-width: 100%; max-height: 46px; width: auto; height: auto; opacity: .5; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ix-list li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 9px; height: 9px; margin-top: -4px; background: var(--accent); transform: scale(0); transition: transform .5s var(--ease); }
.ix-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
@media (hover: hover) {
  .ix-list:hover .ix-name { color: var(--fg-3); }
  .ix-list li:hover .ix-name { color: var(--fg); transform: translateX(14px); }
  .ix-list li:hover .ix-logo img { opacity: 1; transform: scale(1.06); }
  .ix-list li:hover::before { transform: scale(1); }
  .ix-list li:hover::after { transform: scaleX(1); }
}
.ix-list li.is-flash .ix-name { animation: ix-flash 2.2s var(--ease); }
.ix-list li.is-flash::after { animation: ix-line 2.2s var(--ease); }
.ix-list li.is-flash .ix-logo img { animation: ix-logo 2.2s var(--ease); }
@keyframes ix-flash { 0%, 60% { color: var(--accent); } 100% { color: var(--fg); } }
@keyframes ix-line { 0% { transform: scaleX(0); } 20%, 70% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ix-logo { 0%, 70% { opacity: 1; } 100% { opacity: .5; } }
@media (max-width: 767px) {
  .ix-list li { min-height: 64px; }
  .ix-name { font-size: clamp(1.35rem, 6.4vw, 1.75rem); }
  .ix-logo { width: 76px; height: 40px; }
  .ix-logo img { max-height: 34px; opacity: .8; }
}

/* ---------- HOW WE PRESENT WORK: on paper ---------- */
.wk-present { background: var(--paper); color: var(--paper-ink); padding-block: clamp(88px, 13vh, 150px); }
.wk-present .body { color: var(--paper-ink-2); }
.wk-present-head { display: grid; gap: 16px 64px; align-items: end; }
@media (min-width: 900px) { .wk-present-head { grid-template-columns: 1fr 1fr; } .wk-present-head .body { margin-top: 0; } }
.wk-steps { position: relative; display: grid; gap: 40px; margin-top: clamp(56px, 9vh, 96px); }
@media (min-width: 900px) {
  .wk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
  /* the dotted hairline that ties the three together, official pattern grammar */
  .wk-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px;
    background: repeating-linear-gradient(90deg, #9B9B9B 0 2px, transparent 2px 8px); }
}
.wk-steps li { position: relative; padding-top: 44px; }
.wk-node { position: absolute; left: 0; top: 0; width: 11px; height: 11px; background: var(--paper-ink); }
.wk-steps .is-key .wk-node { background: var(--accent); width: 22px; height: 22px; top: -5px; }
.wk-steps h3 { font: 700 clamp(1.75rem, 2.8vw, 2.75rem)/1 var(--f-display); letter-spacing: -0.025em; }
.wk-steps p { margin-top: 18px; color: var(--paper-ink-2); max-width: 34ch; }
.wk-steps .is-key h3 { color: var(--accent-deep); }

@media (max-width: 767px) {
  .wk-rail figure { height: 440px; }
}

/* Hero banner (plates2): the page's own idea object sits right of the headline; the signature still draws on top */
.wk-hero { isolation: isolate; }
.hb-plate { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .8) 30%, oklch(0.135 0.006 358 / .1) 60%, oklch(0.135 0.006 358 / 0) 100%),
              linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / 0) 34%),
              var(--hb) var(--hb-x, 70%) var(--hb-y, center) / var(--hb-z, cover) no-repeat; }
@media (max-width: 767px) {
  .hb-plate { bottom: auto; height: var(--hb-h, 60svh);
    background: linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .5) 30%, oklch(0.135 0.006 358 / 0) 60%),
                var(--hb-s) var(--hb-sx, 70%) var(--hb-sy, center) / var(--hb-sz, cover) no-repeat; }
}

/* ---------- White space (Ramy, 16 Oct 2026): the paper rhythm ----------
   .paper (../../c/css/plates.css) flips the role tokens to the brand kit's Mist/white ground with near-black ink.
   The rules below keep anything drawn for the dark world readable when it sits on paper. */
.paper .btn { color: oklch(0.99 0 0); }
.paper .pk { color: var(--accent-deep); }
.paper .link { color: var(--fg); }
/* client marks on paper: page.js draws them in near-black ink instead of white; they rest a little quieter than the names */
.paper .ix-logo img { opacity: .62; }
@media (max-width: 767px) { .paper .ix-logo img { opacity: .8; } }
@keyframes ix-logo-paper { 0%, 70% { opacity: 1; } 100% { opacity: .62; } }
.paper .ix-list li.is-flash .ix-logo img { animation: ix-logo-paper 2.2s var(--ease); }

/* ---------- Wave 3: the work as a story in chapters ---------- */
/* How We Present Work, the plinth room: the finished step carries the accent */
.wk-room .xp-steps .is-key h3 { color: var(--fg); }
.wk-room .xp-steps li.is-key.is-on h3 { color: oklch(0.7 0.2 358.6); }
@media (min-width: 768px) { .wk-room .xp-copy-in { max-width: min(440px, 33vw); } }

/* A Look at the Work: the archive still, then the pile */
.wk-archive { padding-bottom: clamp(96px, 14vh, 160px); }
.wk-archive .xp-light-copy .h2 { font-size: clamp(2.4rem, 4.4vw, 4.5rem); }
.wk-archive .xp-light-copy .body { margin-top: 18px; max-width: 34ch; }
.wk-files { display: grid; gap: 32px clamp(40px, 6vw, 112px); align-items: end; margin-top: clamp(56px, 9vh, 104px); }
@media (min-width: 900px) { .wk-files { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.wk-files-line { font: 500 clamp(1.4rem, 2.2vw, 2.1rem)/1.2 var(--f-display); letter-spacing: -0.015em; max-width: 18ch; }
.wk-files-side .link { margin-top: 28px; }
.wk-files-ctl[hidden] { display: none; }
.wk-files-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 32px; }
.paper .wk-btn { background: var(--ink-0); border-color: var(--rule); color: var(--fg); }
.wk-files-dots { display: inline-flex; gap: 6px; margin-left: 14px; }
.wk-files-dots i { width: 7px; height: 7px; background: var(--rule); transition: background-color .5s var(--ease), transform .6s var(--ease); }
.wk-files-dots i.on { background: var(--accent); transform: scale(1.4); }
.wk-files-hint { flex-basis: 100%; margin-top: 10px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }

/* the plain row (phones, reduced motion, before JS): every frame visible, swipe sideways */
.wk-pile { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); outline: none; }
.wk-pile::-webkit-scrollbar { display: none; }
.wk-file { flex: none; margin: 0; height: clamp(320px, 52vh, 520px); scroll-snap-align: start; background: var(--ink-1); }
.wk-file img { height: 100%; width: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.wk-pile:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* the pile (motion): the frames stacked like files, the top one free to drag */
.wk-pile.is-pile { position: relative; display: block; overflow: visible; height: clamp(440px, 68vh, 660px); margin-inline: 0; padding: 0; touch-action: pan-y; }
.is-pile .wk-file { position: absolute; left: 50%; top: 50%; height: 84%; background: none;
  box-shadow: 0 30px 60px -28px oklch(0.2 0.01 358 / .45), 0 0 0 1px oklch(0.2 0.01 358 / .06);
  transform: translate(-50%, -50%) translate3d(calc(var(--d, 0) * 34px + var(--dx, 0px)), calc(var(--d, 0) * -20px + var(--dy, 0px)), 0)
             rotate(calc(var(--d, 0) * 2.4deg + var(--dr, 0deg))) scale(calc(1 - var(--d, 0) * .055));
  opacity: calc(1 - var(--d, 0) * .12);
  transition: transform 1s var(--ease), opacity .7s var(--ease); cursor: default; }
.is-pile .wk-file.is-top { cursor: grab; }
.is-pile .wk-file.is-drag { transition: none; cursor: grabbing; }
.is-pile .wk-file.is-thrown { transition: transform .36s var(--ease), opacity .36s var(--ease); opacity: 0; }
@media (max-width: 767px) { .wk-pile.is-pile { height: 420px; } }

/* ---------- Polish pass (24 Oct 2026): additive fixes, nothing approved changed ---------- */
/* the plinth room: the steps not in view dim, but their sentences stay readable */
.wk-room.is-stepping .xp-steps li:not(.is-on) { opacity: .58; }
/* the archive pile buttons and the hero stage buttons: a calmer, exponential hover */
.wk-btn { transition: border-color .4s var(--ease), opacity .4s var(--ease), background-color .4s var(--ease); }
@media (max-width: 767px) {
  /* phones: each archive frame shows whole, and the next one peeks in from the right */
  .wk-pile:not(.is-pile) { align-items: center; gap: 14px; scroll-padding-inline: var(--pad); }
  .wk-pile:not(.is-pile) .wk-file { width: 84vw; height: auto; background: none; box-shadow: 0 0 0 1px var(--rule-soft); }
  .wk-pile:not(.is-pile) .wk-file img { width: 100%; height: auto; max-width: 100%; }
  .wk-files { margin-top: 40px; }
  .wk-files-line { margin-top: 4px; }
  /* footer links: a full 44px tap target */
  .ft-grid a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- brand film: Boom ---------- */
.wk-film { padding-block: clamp(80px, 12vh, 140px); background: var(--ink-0, #0d0b0c); }
.wk-film-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 5vh, 56px); }
.wk-film-side { display: grid; gap: 20px; justify-items: start; max-width: 52ch; }
.wk-film-frame { position: relative; margin-inline: auto; overflow: hidden; border-radius: 18px; background: #000; }
.wk-film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wk-film-snd { position: absolute; right: 24px; bottom: 24px; min-height: 44px; padding: 12px 18px; border: 1px solid rgb(255 255 255 / .4); background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(8px); font: 400 12px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, border-color .3s; }
.wk-film-snd:hover, .wk-film-snd:focus-visible, .wk-film-snd[aria-pressed="true"] { background: var(--accent, #ff0a7a); border-color: var(--accent, #ff0a7a); outline: none; }
@media (max-width: 767px) {
  .wk-film-head { grid-template-columns: minmax(0, 1fr); }
  .wk-film-frame { border-radius: 12px; }
  .wk-film-snd { right: 12px; bottom: 12px; }
}