/* EKG portfolio
   Concept: an exhibition catalogue drawn with one line. A cover, a contents page, numbered plates with museum
   placards and framed prints, a black screening room, and a colophon. The line that writes EKG in the opening
   runs down the margin as you read. Black and white only; the color on the page is the work itself.
   One deliberate light theme: every color is set explicitly, so the page reads the same on any host or OS. */

@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  /* color */
  --bg: #FFFFFF;
  --bg-soft: #F4F4F4;
  --ink: #0A0A0A;
  --ink-soft: #4E4E4E;
  --ink-muted: #737373;
  --rule: #E3E3E3;
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, .72);
  --on-dark-muted: rgba(255, 255, 255, .5);
  --on-dark-rule: rgba(255, 255, 255, .28);
  --scrim: rgba(10, 10, 10, .74);
  --oat: #F4F3EF; /* Mase's studio backdrop, behind its drinks */

  /* type: one family, Geist, everywhere. Hierarchy comes from size, weight, letter-spacing and uppercase labels.
     Geist has no italic, so nothing here asks for one (the browser would fake a slant). */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-label: .69rem;

  /* layout */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --header-h: 60px;
  --spine-offset: 44px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; background: var(--bg); }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: normal; }
h1 em, h2 em, .pullquote em { color: var(--ink-muted); } /* emphasis in a headline is gray ink */
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow, .profile-label, .placard-label { margin: 0 0 18px; font: 500 var(--t-label)/1.5 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }

.skip-link { position: absolute; left: 16px; top: -120px; z-index: 200; padding: 12px 16px; background: var(--ink); color: var(--on-dark); font: 500 .8rem var(--font); text-decoration: none; }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------------- opening (js/intro.js) ---------------- */
.intro, .intro-stage { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 100; display: block; cursor: pointer;
  -webkit-tap-highlight-color: transparent; animation: intro-failsafe .3s ease 6s forwards;
}
/* The mark's own layer: difference blending turns white strokes black wherever the page behind is white. */
html.intro-on .intro-stage {
  position: fixed; inset: 0; z-index: 101; display: grid; place-items: center; pointer-events: none;
  mix-blend-mode: difference; animation: intro-failsafe .3s ease 6s forwards;
}
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.intro-paper { position: absolute; inset: 0; background: var(--ink); }
.intro-mark { width: min(80vw, 760px); height: auto; overflow: visible; stroke: var(--on-dark); stroke-linecap: square; stroke-linejoin: miter; }
.intro-trace path { stroke-width: 2; }
.intro-letters path { stroke-width: 10; }
.intro-tag {
  position: absolute; left: 0; right: 0; top: calc(50% + min(10.4vw, 99px) + 26px); margin: 0; text-align: center;
  font: 500 clamp(.72rem, .66rem + .25vw, .86rem)/1 var(--font); letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; /* balances the trailing letter-space so the line centers */
  color: var(--on-dark-soft); opacity: 0;
}
.intro-skip {
  position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--on-dark-muted);
  font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
html.intro-on .brand-mark { visibility: hidden; }

/* ---------------- header ---------------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.top.is-stuck { border-bottom-color: var(--rule); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand-mark { width: auto; height: 22px; stroke: var(--ink); stroke-width: 10; stroke-linecap: square; stroke-linejoin: miter; transition: opacity .25s; }
.brand:hover .brand-mark { opacity: .55; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font: 500 var(--t-label)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); transition: color .25s;
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; right: .16em; bottom: 12px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a[aria-current]::after { transform: scaleX(1); }
@media (max-width: 1199px) {
  .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(var(--progress, 0)); transform-origin: left; }
}
@media (max-width: 440px) { .nav { gap: 12px; } .nav a { letter-spacing: .1em; font-size: .64rem; } .brand-mark { height: 18px; } }

/* ---------------- the line in the margin ---------------- */
main { position: relative; }
.spine {
  display: none; position: absolute; top: 0; bottom: 0; z-index: 2; width: 1px; pointer-events: none; mix-blend-mode: difference;
  left: calc(max(0px, (100% - var(--max) - 2 * var(--gutter)) / 2) + var(--gutter) - var(--spine-offset));
}
.spine-fill { position: absolute; inset: 0; background: var(--on-dark); transform: scaleY(var(--spine, 0)); transform-origin: top; }
@media (min-width: 1200px) { .spine { display: block; } }

/* ---------------- cover ---------------- */
.cover { padding-block: clamp(20px, 3vw, 40px) clamp(80px, 11vw, 150px); }
.cover-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "object" "lede" "next"; }
@media (min-width: 900px) {
  .cover-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); grid-template-areas: "meta meta" "title object" "lede object" "next object"; column-gap: clamp(32px, 5vw, 80px); align-items: end; }
}
.cover-meta {
  grid-area: meta; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 0 0 clamp(44px, 8vw, 112px); padding: 11px 0;
  border-block: 1px solid var(--ink); font: 500 var(--t-label)/1.4 var(--font); letter-spacing: .16em; text-transform: uppercase;
}
.cover-title { grid-area: title; margin: 0; font: 400 clamp(4.4rem, .9rem + 12.4vw, 12.6rem)/.86 var(--font); letter-spacing: -.05em; }
.cover-title em { display: block; padding-left: .52em; }
.cover-lede { grid-area: lede; margin: clamp(30px, 4vw, 52px) 0 0; max-width: 38ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--ink-soft); }
.cover-next { grid-area: next; justify-self: start; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 22px; font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.cover-next-line { width: 72px; height: 1px; background: var(--ink); transform-origin: left; transition: transform .6s var(--ease); }
.cover-next:hover .cover-next-line { transform: scaleX(1.7); }
.cover-object { grid-area: object; margin: clamp(28px, 6vw, 0px) 0 0; justify-self: center; width: min(100%, 470px); }
@media (min-width: 900px) { .cover-object { justify-self: end; margin: 0; } }
.cover-object figcaption, .lineup-stage figcaption { margin-top: 10px; font-size: .82rem; color: var(--ink-soft); }
.cover-object figcaption span, .print figcaption span, .spin-stage figcaption span { margin-right: 10px; font: 500 var(--t-label) var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

/* A product floating on the white page: its studio backdrop is feathered into white at the edges. */
.float { position: relative; aspect-ratio: 4 / 5; }
.float video, .float img { width: 100%; height: 100%; object-fit: cover; }
.float::after { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 62%, var(--bg) 100%); }

.clip-toggle {
  display: none; position: absolute; right: 0; bottom: 0; z-index: 2; min-height: 40px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-label)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.js .clip-toggle { display: inline-flex; align-items: center; }

/* ---------------- contents ---------------- */
.contents { padding-block: 0 clamp(40px, 6vw, 72px); }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.toc-row { display: grid; grid-template-columns: 3.6rem auto minmax(24px, 1fr) auto; align-items: baseline; column-gap: 18px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.toc-no { font: 400 clamp(1.05rem, .9rem + .7vw, 1.5rem) var(--font); color: var(--ink-muted); }
.toc-name { font: 400 clamp(2.1rem, .9rem + 4.4vw, 4.8rem)/1 var(--font); letter-spacing: -.04em; transition: transform .6s var(--ease); }
.toc-row:hover .toc-name, .toc-row:focus-visible .toc-name { transform: translateX(10px); }
.toc-dots { align-self: end; margin-bottom: .55em; border-bottom: 1px dotted var(--ink-muted); }
.toc-kind { font: 500 var(--t-label) var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 720px) {
  .toc-row { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: 6px; }
  .toc-dots { display: none; }
  .toc-kind { grid-column: 2; }
}

/* contents: floating preview that follows the cursor (js/preview.js) */
.peek {
  position: fixed; left: 0; top: 0; z-index: 40; width: clamp(260px, 25vw, 360px); aspect-ratio: 16 / 10; pointer-events: none;
  overflow: hidden; border: 1px solid var(--ink); background: var(--bg-soft); opacity: 0;
  transform: translate3d(calc(var(--x, 0px) + 32px), calc(var(--y, 0px) - 50%), 0) scale(.96);
  transition: opacity .35s ease, transform .55s var(--ease);
}
.peek.is-on { opacity: 1; transform: translate3d(calc(var(--x, 0px) + 32px), calc(var(--y, 0px) - 50%), 0) scale(1); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.peek img.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .peek { display: none; } }

/* ---------------- plates ---------------- */
.plate { padding-top: clamp(88px, 12vw, 176px); }
.plate-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px clamp(14px, 2vw, 30px); padding-bottom: clamp(14px, 2vw, 22px); border-bottom: 1px solid var(--ink); }
.plate-no { margin: 0; font: 400 clamp(1.8rem, .9rem + 2.8vw, 4rem)/1 var(--font); color: var(--ink-muted); }
.plate-title { margin: 0; font: 400 clamp(3rem, .8rem + 7.8vw, 9.2rem)/.9 var(--font); letter-spacing: -.05em; }
.plate-tick { display: none; position: absolute; left: calc(-1 * var(--spine-offset)); bottom: -1px; width: calc(var(--spine-offset) - 8px); height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .15s; }
@media (min-width: 1200px) { .plate-tick { display: block; } }
.plate-head:has(.is-in) .plate-tick { transform: scaleX(1); }

.plate-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); margin-top: clamp(28px, 4vw, 52px); }
@media (max-width: 999px) { .plate-body .prints { order: -1; } } /* on phones and tablets the work comes before the notes */
@media (min-width: 1000px) {
  .plate-body { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .placard { position: sticky; top: calc(var(--header-h) + 28px); }
}

/* the museum placard */
.placard { font-size: .95rem; line-height: 1.55; }
.placard-title { margin: 0; font: 400 1.4rem/1.25 var(--font); letter-spacing: -.01em; }
.placard-title strong { font-weight: 600; }
.placard-meta { margin: 6px 0 0; color: var(--ink-soft); }
.placard-medium { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.placard-medium dt { font: 500 var(--t-label)/1.9 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.placard-medium dd { margin: 0; }
.placard-text { margin: 20px 0 0; max-width: 46ch; font: 400 1.12rem/1.5 var(--font); letter-spacing: -.005em; }
.placard-label { margin: 28px 0 10px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.notes li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.notes li::before { content: "—"; position: absolute; left: 0; color: var(--ink); }
.notes strong { font-weight: 600; color: var(--ink); }
.placard-link { display: inline-flex; gap: 8px; min-height: 44px; align-items: center; margin-top: 18px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ink); }
.placard-link:hover { color: var(--ink-soft); }
.placard-status { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font: 500 var(--t-label)/1.5 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); } /* a work not yet live: no link */

/* framed prints: the frame draws itself, then the print develops from gray to color (js/reveal.js) */
.prints { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px) clamp(14px, 2vw, 28px); align-items: start; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-2 { grid-column: span 2; }
.offset-2 { grid-column: 3 / span 4; }
@media (max-width: 640px) {
  .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-6, .span-4, .offset-2 { grid-column: span 2; }
  .span-2 { grid-column: span 1; }
}
.print { margin: 0; }
.print-open { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: var(--bg-soft); cursor: zoom-in; }
.print-open img { width: 100%; background: var(--bg-soft); transition: opacity 1.1s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease); }
.print-open:hover img { transform: scale(1.018); }
.print-open::before, .print-open::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: transform 1s var(--ease); }
.print-open::before { border-block: 1px solid var(--ink); transform-origin: left; }
.print-open::after { border-inline: 1px solid var(--ink); transform-origin: top; transition-delay: .2s; }
.print figcaption { margin-top: 10px; font-size: .84rem; color: var(--ink-soft); }

/* Plate I, detail: the drink lineup in rotation (js/rotation.js) */
.lineup { padding-top: clamp(96px, 12vw, 176px); }
.lineup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .lineup-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.lineup-title { margin: 0; font: 400 clamp(2.8rem, 1.2rem + 4.4vw, 5.4rem)/.95 var(--font); letter-spacing: -.045em; }
.lineup-text { margin: 16px 0 28px; max-width: 40ch; color: var(--ink-soft); }
.menu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rotation-thumb {
  display: grid; grid-template-columns: 2.2rem auto minmax(16px, 1fr) auto; align-items: baseline; column-gap: 12px; width: 100%;
  padding: 11px 0 12px; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink-muted); font: inherit; text-align: left; cursor: pointer; transition: color .3s;
}
.rotation-thumb:hover, .rotation-thumb.is-on { color: var(--ink); }
.m-no, .m-price { font: 500 var(--t-label) var(--font); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.m-name { font: 400 clamp(1.1rem, 1rem + .5vw, 1.35rem)/1.2 var(--font); letter-spacing: -.01em; }
.m-dots { align-self: end; margin-bottom: .45em; border-bottom: 1px dotted currentColor; opacity: .45; }
.rotation-toggle { display: none; margin-top: 14px; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.js .rotation-toggle { display: inline-flex; align-items: center; }
.lineup-stage { position: relative; margin: 0; }
.lineup-name { position: relative; z-index: 2; margin: 0 0 -.42em; text-align: center; pointer-events: none; font: 400 clamp(2.4rem, .8rem + 5.4vw, 6.4rem)/1 var(--font); letter-spacing: -.045em; }
.lineup-name .rotation-name { display: inline-block; }
.rotation-stage { width: min(100%, 560px); margin-inline: auto; }
.rotation-stage img { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 1s var(--ease), transform 1.8s var(--ease); }
.rotation-stage img.is-on { opacity: 1; transform: none; }
.lineup-stage figcaption { text-align: center; }
.lineup-stage figcaption .rotation-no { margin-right: 10px; font: 500 var(--t-label) var(--font); letter-spacing: .14em; color: var(--ink); }

/* Plate V, detail: Tim's Pork Belly Fries turning on the page like the Mase drink (js/clips.js plays it) */
.spin-detail { padding-top: clamp(80px, 10vw, 150px); }
.spin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 960px) { .spin-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.spin-stage { margin: 0; justify-self: center; width: min(100%, 600px); }
.spin-stage .float { aspect-ratio: 1; }
.spin-stage figcaption { margin-top: 10px; font-size: .82rem; color: var(--ink-soft); text-align: center; }
/* ---------------- openings: the screening room ---------------- */
.screening { margin-top: clamp(96px, 12vw, 176px); padding-block: clamp(80px, 10vw, 150px); background: var(--ink); color: var(--on-dark); }
.screening .eyebrow { color: var(--on-dark-muted); }
.screening-title { margin: 0; max-width: 17ch; font: 400 clamp(2.4rem, 1rem + 4.4vw, 5rem)/1 var(--font); letter-spacing: -.04em; }
.screening-title em { color: var(--on-dark-muted); }
.screening-lede { margin: 22px 0 0; max-width: 60ch; color: var(--on-dark-soft); }
.reels { list-style: none; margin: clamp(44px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 36px); }
@media (min-width: 1000px) { .reels { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Two columns: the odd last reel sits centered under the pair above, at the same width. */
@media (max-width: 999px) { .reel:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(18px, 2.6vw, 36px)) / 2); } }
.reel-frame { position: relative; padding: 6px; border: 1px solid var(--on-dark-rule); }
.reel-frame video { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; background: var(--ink); }
.reel-frame .clip-toggle { right: 12px; bottom: 10px; color: var(--on-dark); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.reel-caption { margin: 14px 0 0; font-size: .9rem; color: var(--on-dark-soft); }
.reel-caption span { margin-right: 6px; font: 500 var(--t-label) var(--font); letter-spacing: .14em; color: var(--on-dark); }

/* ---------------- profile ---------------- */
.profile { padding-block: clamp(96px, 12vw, 176px) clamp(64px, 8vw, 120px); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
@media (min-width: 960px) { .profile-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.profile-name { margin: 0; font: 400 clamp(4.6rem, 1.6rem + 9vw, 10rem)/.84 var(--font); letter-spacing: -.05em; }
.profile-headline { margin: 20px 0 0; max-width: 30ch; font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.4 var(--font); letter-spacing: -.01em; }
.profile-meta { margin: 16px 0 0; font: 500 var(--t-label) var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.profile-about p { margin: 0 0 14px; max-width: 62ch; color: var(--ink-soft); }
.top-skills { margin-top: 22px !important; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink) !important; }
.top-skills span { display: block; margin-bottom: 6px; font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.skills-label { margin-top: clamp(56px, 7vw, 100px); }
.skills { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.skills li { border-bottom: 1px solid var(--rule); }
.skills summary { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto 1.6rem; align-items: baseline; column-gap: 16px; padding: 16px 0 18px; cursor: pointer; list-style: none; }
.skills summary::-webkit-details-marker { display: none; }
.skills summary::after { content: "+"; justify-self: end; font: 300 1.5rem/1 var(--font); transition: transform .4s var(--ease); }
.skills details[open] summary::after { transform: rotate(45deg); }
.sk-name { font: 400 clamp(1.45rem, 1rem + 1.5vw, 2.3rem)/1.1 var(--font); letter-spacing: -.03em; transition: color .3s; }
.skills summary:hover .sk-name { color: var(--ink-soft); }
.sk-dots { align-self: end; margin-bottom: .5em; border-bottom: 1px dotted var(--ink-muted); }
@media (max-width: 560px) { .skills summary { grid-template-columns: minmax(0, 1fr) auto 1.6rem; } .sk-dots { display: none; } }
.sk-count { font: 500 var(--t-label) var(--font); letter-spacing: .14em; text-transform: uppercase; }
.sk-body { padding: 0 0 22px; max-width: 64ch; }
.sk-body p { margin: 0; color: var(--ink-soft); }
.sk-body .sk-used { margin-top: 10px; font: 500 var(--t-label)/1.6 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.skills details[open] .sk-body { animation: sk-in .55s var(--ease); }
@keyframes sk-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------------- standards ---------------- */
.standards { padding-block: clamp(64px, 8vw, 120px) clamp(96px, 12vw, 176px); }
.standards-title { margin: 0 0 clamp(28px, 4vw, 52px); font: 400 clamp(2.4rem, 1.1rem + 4vw, 5rem)/1 var(--font); letter-spacing: -.04em; }
.standards-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.standards-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 40px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) { .standards-list li { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: baseline; } }
.standards-list h3 { margin: 0; font: 400 clamp(1.5rem, 1.05rem + 1.5vw, 2.5rem)/1.12 var(--font); letter-spacing: -.03em; }
.standards-list p { margin: 0; max-width: 52ch; color: var(--ink-soft); }

/* ---------------- colophon ---------------- */
.colophon { padding-block: clamp(64px, 8vw, 120px) calc(clamp(32px, 4vw, 48px) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ink); }
.colophon-mark { width: 100%; height: auto; stroke: var(--ink); stroke-width: 5; stroke-linecap: square; stroke-linejoin: miter; }
.colophon-mark .colophon-trace { stroke-width: 1.2; }
.colophon-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 var(--t-label)/1.6 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.colophon-row p { margin: 0; }
.colophon-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: -12px; text-decoration: none; }

/* ---------------- my story (story.html) ----------------
   The page is told by the monitor line: flat on arrival, a flicker, a first beat, a steady heartbeat, and at the end
   the same line writes the name. */
.story-cover { padding-block: clamp(36px, 6vw, 88px) clamp(32px, 5vw, 72px); }
.uhh-row { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px); margin-top: clamp(12px, 3vw, 36px); }
.uhh { flex: none; margin: 0; font: 400 clamp(4.6rem, .8rem + 13vw, 13.5rem)/.92 var(--font); letter-spacing: -.05em; }
.flatline { flex: 1 1 auto; align-self: baseline; height: 1.5px; min-width: 24px; background: var(--ink); transform-origin: left; }
.readout { flex: none; align-self: baseline; font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.story-title { margin: clamp(26px, 4vw, 48px) 0 0; max-width: 17ch; font: 400 clamp(2.1rem, 1.1rem + 3.4vw, 4.2rem)/1.04 var(--font); letter-spacing: -.035em; }
.js .uhh { animation: story-in 1.3s var(--ease) .15s both; }
.js .flatline { animation: flatline 2.8s linear .7s both; }
.js .readout { animation: readout-in .9s ease 3.4s both; }
.js .story-title { animation: story-in 1.3s var(--ease) .55s both; }
@keyframes story-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes flatline { from { transform: scaleX(0); } }
@keyframes readout-in { from { opacity: 0; } }

.story { padding-bottom: clamp(80px, 10vw, 150px); }
.chapter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(64px, 9vw, 128px); }
@media (min-width: 960px) {
  .chapter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: start; }
  .chapter-line, .chapter-readout { grid-column: 1 / -1; }
}
.chapter-line { width: 100%; height: auto; overflow: visible; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.chapter-line path { vector-effect: non-scaling-stroke; }
.chapter-readout { justify-self: end; margin-top: 6px; font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.chapter-head { display: flex; align-items: baseline; gap: 16px; margin-top: clamp(22px, 3vw, 36px); }
.chapter-no { margin: 0; font: 400 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1 var(--font); color: var(--ink-muted); }
.chapter-title { margin: 0; font: 400 clamp(2rem, 1.1rem + 3vw, 3.6rem)/1.02 var(--font); letter-spacing: -.035em; }
.chapter-text { margin-top: clamp(18px, 2.6vw, 36px); max-width: 64ch; }
.chapter-text p { margin: 0 0 1.05em; font-size: clamp(1.06rem, 1rem + .25vw, 1.2rem); line-height: 1.72; }
.chapter:first-of-type .chapter-text > p:first-child::first-letter { float: left; margin: .08em .1em 0 0; font: 400 4.4em/.78 var(--font); letter-spacing: -.04em; }
.chapter-mark { justify-self: center; width: min(100%, 720px); stroke-width: 6; stroke-linecap: square; stroke-linejoin: miter; }
.chapter-mark path { vector-effect: none; }
.chapter-mark .chapter-mark-trace { stroke-width: 1.5; }
.chapter-text .emphasis { margin: 1.3em 0; font: 400 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.3 var(--font); letter-spacing: -.025em; }
.signature { margin-top: 1.6em !important; font: 500 1.6rem/1 var(--font) !important; letter-spacing: .02em; }
.pullquote { margin: clamp(64px, 9vw, 128px) 0 0; padding: 0; text-align: center; }
.pullquote p { margin: 0 auto; max-width: 16ch; font: 400 clamp(2.3rem, 1rem + 4.6vw, 5.2rem)/1.02 var(--font); letter-spacing: -.045em; }
.story-next { margin: clamp(56px, 7vw, 96px) 0 0; text-align: center; }
.story-next a { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--ink); }
.story-page .colophon { padding-top: clamp(40px, 5vw, 64px); }
.story-page .colophon-row { margin-top: 0; border-top: 0; padding-top: 0; }
.profile-story { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; margin-top: 18px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ink); }
.profile-story:hover { color: var(--ink-soft); }

/* ---------------- print viewer (js/viewer.js) ---------------- */
.viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(255, 255, 255, .97); color: var(--ink); }
.viewer::backdrop { background: rgba(255, 255, 255, .6); }
.viewer[open] { display: grid; place-items: center; animation: viewer-in .45s var(--ease); }
@keyframes viewer-in { from { opacity: 0; } }
.viewer-figure { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 72px 16px 88px; }
.viewer-img { max-width: min(90vw, 1500px); max-height: calc(100dvh - 190px); width: auto; height: auto; border: 1px solid var(--ink); background: var(--bg-soft); animation: viewer-img .6s var(--ease); }
@keyframes viewer-img { from { opacity: 0; transform: scale(.97); } }
.viewer-caption { font: 500 var(--t-label)/1.5 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.viewer-close { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 20px; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; font: 500 var(--t-label) var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.viewer-prev, .viewer-next { position: fixed; top: 50%; width: 52px; height: 52px; margin-top: -26px; border: 1px solid var(--ink); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 1.05rem; cursor: pointer; transition: background-color .25s, color .25s; }
.viewer-prev:hover, .viewer-next:hover { background: var(--ink); color: var(--on-dark); }
.viewer-prev { left: 20px; }
.viewer-next { right: 20px; }
@media (max-width: 640px) {
  .viewer-prev, .viewer-next { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
  .viewer-img { max-width: 92vw; }
}

/* ---------------- motion system ----------------
   Hidden "before" states exist only when JavaScript runs (.js on <html>), so content never gets stuck invisible. */
.cover [data-enter] { transition: opacity 1s var(--ease) var(--enter, 0s), transform 1.2s var(--ease) var(--enter, 0s); }
html.hero-wait .cover [data-enter] { opacity: 0; transform: translate3d(0, 24px, 0); animation: enter-failsafe .01s linear 7s forwards; }
html.hero-wait .cover .cover-object { transform: translate3d(0, 36px, 0) scale(.96); }
@keyframes enter-failsafe { to { opacity: 1; transform: none; } }
.e1 { --enter: .02s; } .e2 { --enter: .1s; } .e3 { --enter: .22s; } .e4 { --enter: .3s; } .e5 { --enter: .16s; }
.cover .cover-object { transition-duration: 1.3s, 1.7s; }

/* scroll reveals (js/reveal.js) */
.js [data-reveal="up"] { transition: opacity .9s var(--ease) var(--delay, 0s), transform 1.2s var(--ease) var(--delay, 0s); }
.js [data-reveal="up"]:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
.js [data-reveal="rise"] { transition: clip-path 1.1s var(--ease) var(--delay, 0s), transform 1.1s var(--ease) var(--delay, 0s); }
.js [data-reveal="rise"]:not(.is-in) { clip-path: inset(0 0 100% 0); transform: translate3d(0, 45%, 0); }
.js .plate-title[data-reveal="rise"] { --delay: .08s; }
.js [data-reveal="draw"] { transition: clip-path 1.8s var(--ease); }
.js [data-reveal="draw"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
.js [data-reveal="print"]:not(.is-in) .print-open::before { transform: scaleX(0); }
.js [data-reveal="print"]:not(.is-in) .print-open::after { transform: scaleY(0); }
.js [data-reveal="print"]:not(.is-in) img { opacity: 0; transform: scale(1.04); filter: grayscale(1) contrast(.92); }
.js [data-reveal="print"] figcaption { transition: opacity .8s var(--ease) .5s; }
.js [data-reveal="print"]:not(.is-in) figcaption { opacity: 0; }
.d2 { --delay: .1s; }
.d3 { --delay: .2s; }
.d4 { --delay: .3s; }
.d5 { --delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal="up"], .js [data-reveal="rise"] { transition: opacity .5s ease, clip-path .5s ease; }
  .js [data-reveal="up"]:not(.is-in), .js [data-reveal="rise"]:not(.is-in) { transform: none; }
  .js [data-reveal="print"]:not(.is-in) img { transform: none; }
  .print-open img { transition: opacity .6s ease, filter .6s ease; }
  .print-open:hover img { transform: none; }
  html.hero-wait .cover [data-enter], html.hero-wait .cover .cover-object { transform: none; }
  .cover [data-enter] { transition: opacity .6s ease var(--enter, 0s); }
  .rotation-stage img { transition: opacity .5s ease; transform: none; }
  .viewer[open], .viewer-img, .skills details[open] .sk-body { animation: none; }
  .toc-name { transition: none; }
  .toc-row:hover .toc-name, .toc-row:focus-visible .toc-name { transform: none; }
  .js .uhh, .js .story-title { animation: readout-in .8s ease both; }
  .js .flatline { animation: readout-in .8s ease .3s both; }
  .js .readout { animation: readout-in .8s ease .6s both; }
}