/* ==========================================================================
   kergesdaniel.hu — 2026, second impression
   A printed sheet: ink on paper, hairlines, crop marks, typographic play.
   ========================================================================== */

/* --- font ----------------------------------------------------------------- */

@font-face {
  font-family: "Neue Regrade";
  src: url("font/neue_regrade_regular-webfont.woff2") format("woff2"),
       url("font/neue_regrade_regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Regrade";
  src: url("font/neue_regrade_regular_italic-webfont.woff2") format("woff2"),
       url("font/neue_regrade_regular_italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Regrade";
  src: url("font/neue_regrade_bold-webfont.woff2") format("woff2"),
       url("font/neue_regrade_bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Regrade";
  src: url("font/neue_regrade_bold_italic-webfont.woff2") format("woff2"),
       url("font/neue_regrade_bold_italic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- tokens ----------------------------------------------------------------- */

:root {
  /* dynamic hue — script.js cycles it through the full rainbow,
     nudged by scroll and pointer; it tints the whole sheet */
  --hue: 230;

  --paper: hsl(var(--hue) 16% 95%);
  --ink: hsl(var(--hue) 26% 8%);
  --ink-2: color-mix(in srgb, var(--ink) 56%, var(--paper));
  --hair: color-mix(in srgb, var(--ink) 22%, transparent);
  --accent: hsl(var(--hue) 74% 44%);

  /* the printed sheet's margin & body padding */
  --edge: clamp(14px, 2.6vw, 36px);
  --pad: clamp(20px, 5vw, 72px);

  --fs-caps: 0.6875rem;
  --fs-body: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  --fs-lede: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
  --fs-link: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);

  /* baseline rhythm — text line-heights land on a 0.5rem grid so blocks of
     different size still sit on one invisible baseline (e.g. intro-meta ↔ lede).
     --lh-line = 3 grid units, --lh-lede = 4, --lh-title = 6 */
  --lh-line: 1.5rem;
  --lh-lede: 2rem;
  --lh-title: 3rem;

  --ease-out: cubic-bezier(0.22, 0.8, 0.2, 1);
  --ease-sheet: cubic-bezier(0.76, 0, 0.24, 1);
}

[data-theme="dark"] {
  --paper: hsl(var(--hue) 14% 8%);
  --ink: hsl(var(--hue) 16% 92%);
  --accent: hsl(var(--hue) 82% 66%);
}

/* --- base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* scroll-to-top is eased in JS (CSS smooth scrolling is too abrupt on iOS) */

body {
  font-family: "Neue Regrade", "Helvetica Neue", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: clip;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.1;
}

.caps {
  font-size: var(--fs-caps);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- loading ----------------------------------------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.85s var(--ease-sheet), visibility 0s 0.85s;
}

.loader-inner {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
  text-align: center;
}

.loader-logo {
  display: block;
  margin-bottom: 0.25rem;
  opacity: 0;
  transform: scale(0.9);
  animation: loader-logo 0.8s var(--ease-out) 0.05s forwards;
}

@keyframes loader-logo {
  to {
    opacity: 1;
    transform: none;
  }
}

.loader-name {
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.06em;
  clip-path: inset(0 100% 0 0);
  animation: loader-name 1s var(--ease-out) 0.15s forwards;
}

.loader-rule {
  width: clamp(120px, 22vw, 260px);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  animation: loader-rule 1s var(--ease-out) 0.25s forwards;
}

.loader-meta {
  font-size: var(--fs-caps);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  animation: loader-meta 0.7s ease 0.6s forwards;
}

@keyframes loader-name { to { clip-path: inset(0 0 0 0); } }
@keyframes loader-rule { to { transform: scaleX(1); } }
@keyframes loader-meta { to { opacity: 1; } }

body.is-loaded .loader {
  transform: translateY(-101%);
  visibility: hidden;
}

/* no-js: never trap the page behind the loader */
html:not(.js) .loader {
  display: none;
}

/* --- progressive blur under the header & footer corners ------------------------ */
/* three stacked backdrop layers with staggered masks: the blur dissolves
   gradually instead of ending on a visible edge */

.frame-glass {
  position: fixed;
  left: 0;
  right: 0;
  height: calc(var(--edge) + 72px);
  z-index: 40;
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(var(--glass-dir), #000 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(var(--glass-dir), #000 30%, transparent 90%);
}

.frame-glass::before,
.frame-glass::after {
  content: "";
  position: absolute;
  inset: 0;
}

.frame-glass::before {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(var(--glass-dir), #000 15%, transparent 60%);
  -webkit-mask-image: linear-gradient(var(--glass-dir), #000 15%, transparent 60%);
}

.frame-glass::after {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  mask-image: linear-gradient(var(--glass-dir), #000, transparent 35%);
  -webkit-mask-image: linear-gradient(var(--glass-dir), #000, transparent 35%);
}

.frame-glass-top {
  top: 0;
  --glass-dir: to bottom;
}

.frame-glass-bottom {
  bottom: 0;
  --glass-dir: to top;
}

/* --- frame: crop marks, edge labels, corner UI -------------------------------- */
/* set in white + difference blending so it self-inverts over any content/theme */

.frame {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
}

.frame a,
.frame button {
  pointer-events: auto;
}

.crop {
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0.85;
}

.crop {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease 1.1s;
}

body.is-loaded .crop {
  opacity: 1;
}

.crop::before,
.crop::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 1s var(--ease-out) 0.9s;
}

.crop::before { width: 100%; height: 1px; transform: scaleX(0); }
.crop::after  { width: 1px; height: 100%; transform: scaleY(0); }

body.is-loaded .crop::before,
body.is-loaded .crop::after {
  transform: none;
}

.crop-tl { top: 8px; left: 8px; }
.crop-tr { top: 8px; right: 8px; transform: rotate(90deg); }
.crop-br { bottom: 8px; right: 8px; transform: rotate(180deg); }
.crop-bl { bottom: 8px; left: 8px; transform: rotate(270deg); }

.crop-tl::before, .crop-tl::after { top: 0; left: 0; transform-origin: left top; }
.crop-tr::before, .crop-tr::after { top: 0; left: 0; transform-origin: left top; }
.crop-br::before, .crop-br::after { top: 0; left: 0; transform-origin: left top; }
.crop-bl::before, .crop-bl::after { top: 0; left: 0; transform-origin: left top; }

.edge {
  position: absolute;
  top: 50%;
  writing-mode: vertical-rl;
  font-weight: 400;
  letter-spacing: 0.28em;
  opacity: 0.55;
  white-space: nowrap;
}

.edge-left {
  left: var(--edge);
  transform: translate(-50%, -50%) rotate(180deg);
}

.edge-right {
  right: var(--edge);
  transform: translate(50%, -50%);
}

.corner {
  position: absolute;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.6s ease 1.1s;
}

body.is-loaded .corner {
  opacity: 1;
}

.corner-tl { top: var(--edge); left: var(--edge); }

/* same box height as the logo so both top corners center on one axis */
.corner-tr {
  top: var(--edge);
  right: var(--edge);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 26px;
}
.corner-bl { bottom: var(--edge); left: var(--edge); }
.corner-br { bottom: var(--edge); right: var(--edge); }

/* logo always; full name slides in once the hero is scrolled past */
.corner-tl {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}

.tl-logo {
  display: block;
  flex-shrink: 0;
}

.tl-name {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.4s ease, transform 0.55s var(--ease-out);
}

body.past-hero .tl-name {
  opacity: 1;
  transform: none;
}

.corner a,
a.corner,
.theme-btn {
  text-decoration: none;
}

/* top-right pair: Works  |  Download CV — spaced apart, hairline divider */
.corner-links {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}

.corner-links a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}

/* the active page's nav item, marked with a hairline underline —
   accent can't read inside the difference-blend frame, so use currentColor */
.corner-links a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.corner-div {
  width: 1px;
  height: 0.85em;
  background: currentColor;
  opacity: 0.35;
}

.corner-cv .dl-mark {
  display: inline-block;
  transition: transform 0.35s var(--ease-out);
}

.corner-cv:hover .dl-mark {
  transform: translateY(0.2em);
}

.theme {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.theme-sep {
  opacity: 0.4;
  font-weight: 400;
}

.theme-btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.45;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.theme-btn:hover {
  opacity: 1;
}

.theme-btn[aria-pressed="true"] {
  opacity: 1;
  border-bottom-color: currentColor;
}

.clock {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.clock-city::after {
  content: " — ";
  opacity: 0.5;
}

.clock-wx:not(:empty)::before {
  content: " · ";
  opacity: 0.5;
}

/* clock lives outside the blend frame: ink color + true-color accent dot */
.corner-clock {
  position: fixed;
  bottom: var(--edge);
  left: var(--edge);
  z-index: 51;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  /* integral line box so the dot centers on whole pixels */
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.6s ease 1.1s;
}

/* optical correction: align the dot to the cap-height centre */
.corner-clock .accent-dot {
  transform: translateY(-0.5px);
}

body.is-loaded .corner-clock {
  opacity: 1;
}

.accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* --- ghost year (behind the experience index) -------------------------------- */

.ghost {
  position: fixed;
  right: calc(var(--pad) * 0.4);
  bottom: -0.16em;
  z-index: 0;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(7rem, 22vw, 18rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.6s ease;
}

.ghost.show {
  opacity: 0.06;
}

/* --- main flow ----------------------------------------------------------------- */

.main {
  position: relative;
  z-index: 1;
  padding-inline: var(--pad);
  /* one baseline closer to the corner clock/theme than before */
  padding-bottom: calc(var(--edge) + 3rem);
}

section {
  margin-bottom: clamp(4rem, 10vh, 7rem);
}

/* centred content measure (homepage only) — the intro text and the experience
   header sit in a max 1280px column; the slider stays full-bleed within .main.
   width:100% is required here: .intro/.colophon are direct flex items of
   .main (column direction), and a flex item with auto cross-axis margins
   shrink-wraps to its content instead of filling to max-width like a normal
   block box — width:100% keeps it filling first, so max-width/auto-margin
   centering matches .sec-head (which sits in ordinary block flow) exactly */
body:not(.subpage) .intro,
body:not(.subpage) .sec-head,
body:not(.subpage) .colophon {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

/* sticky footer (homepage) — when the page fits the viewport the colophon sits
   just above the fixed corner clock/theme; when content scrolls, margin-top:auto
   collapses to 0 and it flows after the slider with the usual gap */
body:not(.subpage) .main {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

body:not(.subpage) .colophon {
  margin-top: auto;
}

/* section heads, print-index style */

.sec-head {
  display: flex;
  align-items: center; /* number, title and rule share one centerline */
  gap: 1.1rem;
  margin-bottom: clamp(1.75rem, 4vh, 3rem);
}

.sec-no {
  color: var(--accent);
  font-size: 0.9375rem; /* a readable folio, not a tiny superscript */
  align-self: center;
  transition: color 0.4s ease;
}

/* the chapter title is the heading of the section — the caps number beside it
   stays a small folio marker, so the two read as "marker · title", not as two labels */
.sec-title {
  white-space: nowrap;
  /* one type-scale step down from the previous 2.5rem — sits below the name */
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: none;
}

.sec-rule {
  flex: 1;
  height: 1px;
  background: var(--hair);
  align-self: center;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease-out) 0.15s;
}

.rv.in .sec-rule {
  transform: scaleX(1);
}

/* --- hero ----------------------------------------------------------------- */

/* compact masthead: sits at the top of the page, no full-screen moment —
   the name reads at a modest scale and the Profile follows close beneath */
.hero {
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--edge) + 4.5rem) 0;
}

.hero-kicker,
.hero-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 400;
}

.hero-kicker {
  margin-bottom: clamp(1.5rem, 5vh, 4rem);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--hair);
}

/* the arrow glyph carries more stroke weight than the caps — size it down;
   colour follows the surrounding text */
.kicker-arrow {
  font-size: 0.8em;
  color: inherit;
}

.hero-foot {
  margin-top: clamp(1.5rem, 5vh, 4rem);
  padding-top: 0.875rem;
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
}

/* masthead name aligns to the content column (no full-bleed) */
.hero-name {
  margin-block: clamp(0.5rem, 2vh, 1.25rem);
}

/* the inner wrapper hugs both words + the gap between them, so the logo cursor
   reads as one continuous target (the two cuts sit on one line — "Dániel" bold,
   "Kérges" light italic — wrapping only when the column gets narrow) */
.hero-name-inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.28em;
}

.hero-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.015em;
  /* modest business-card scale — kept small so the intro reads quiet */
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  /* room for descenders (g, j) inside the entrance mask */
  padding-bottom: 0.26em;
  margin-bottom: -0.26em;
}

.hero-line.light {
  font-weight: 400;
}

.hero-line.italic {
  font-style: italic;
  /* masthead: the two names stack flush-left as one calm column */
  text-align: left;
}

/* inline-block wrapper: measurable width + parallax target */
.line-in {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* per-letter entrance + roman⇄italic hover swap */
.ltr {
  display: inline-block;
  transform: translateY(130%);
  transition: transform 0.9s var(--ease-out) var(--d, 0s);
  /* room for glyph ink that overhangs the advance box (italic arms,
     accents, descenders) — iOS rasterizes animating letters at their
     border box and would clip it; negative margins cancel the layout */
  padding: 0.15em 0.15em 0.3em;
  margin: -0.15em -0.15em -0.3em;
}

body.is-loaded .ltr {
  transform: none;
}

/* each letter stacks its roman and italic glyph and cross-fades between
   them on hover — real italic letterforms, smooth transition */
.ltr-in {
  display: inline-grid;
  transition: color 0.25s ease;
}

.ltr-in > span {
  grid-area: 1 / 1;
}

.g-r {
  font-style: normal;
}

.g-i {
  font-style: italic;
  opacity: 0;
}

.hero-line.italic .g-r { opacity: 0; }
.hero-line.italic .g-i { opacity: 1; }

@media (hover: hover) {
  .hero-line .ltr:hover .ltr-in {
    color: var(--accent);
  }

  .hero-line .ltr:hover .g-r { opacity: 0; }
  .hero-line .ltr:hover .g-i { opacity: 1; }

  .hero-line.italic .ltr:hover .g-r { opacity: 1; }
  .hero-line.italic .ltr:hover .g-i { opacity: 0; }
}

.scroll-hint {
  transition: opacity 0.5s ease;
  animation: hint 2.6s ease-in-out infinite;
}

body.scrolled .scroll-hint {
  opacity: 0;
  animation: none;
}

@keyframes hint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.35em); }
}

/* --- intro (compact masthead: name, role, profile, socials) ------------------ */
/* the whole intro + the experience heading + slider are budgeted to clear a
   14" laptop viewport; the remaining sections sit below the fold */

.intro {
  /* more air above the name so it sits a little lower down the sheet
     (grid-aligned: 4.5rem = 3 baseline units) */
  padding-block: calc(var(--edge) + 4.5rem) 0;
  /* generous breathing room before the experience section */
  margin-bottom: clamp(4.5rem, 12vh, 9rem);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  /* the meta column drops to share the lede's first baseline */
  align-items: baseline;
  /* tighter gap below the name (grid-aligned: 3rem = 2 baseline units) */
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

/* block (not grid) so the column exposes its first text line as its baseline,
   letting the outer grid's align-items:baseline line it up with the lede */
.intro-meta {
  line-height: var(--lh-line);
  color: var(--ink-2);
  font-weight: 400;
}

.intro-meta > span {
  display: block;
}

.intro-meta > span:first-child {
  color: var(--ink);
}

/* the profile paragraph reads quieter than the display lede scale, and its
   line-height snaps to the baseline grid so it aligns with the meta column */
.intro-body .lede {
  font-size: clamp(1.05rem, 0.9rem + 0.85vw, 1.5rem);
  line-height: var(--lh-lede);
  max-width: 42ch;
}

.intro-links {
  margin-top: clamp(1rem, 2.5vh, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-weight: 700;
}

.intro-links a {
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.3s ease;
}

/* dim the hovered link so it recedes behind the covering cursor — even lighter
   than the baseline secondary text, nearly invisible against the paper */
.intro-links a:hover {
  color: color-mix(in srgb, var(--ink-2) 35%, var(--paper) 65%);
}

.intro-links span {
  color: var(--ink-2);
  opacity: 0.5;
  font-weight: 400;
  padding: 0 0.55em;
}

/* --- experience slider ------------------------------------------------------- */

.xp-sec {
  margin-bottom: clamp(3rem, 8vh, 6rem);
}

.slider-nav {
  display: inline-flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.slider-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  /* lighter arrow glyph — matches the weight shown in the hover cursor */
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.slider-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.slider-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.slider {
  margin-top: clamp(1.25rem, 3.5vh, 2.25rem);
  /* full-bleed: cancel the main padding so the cards run to the screen edges;
     the track's horizontal overflow is clipped by the body (overflow-x: clip),
     while descriptions still bloom downward (overflow-y stays visible) */
  margin-inline: calc(-1 * var(--pad));
  overflow: visible;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.slider.is-dragging {
  cursor: grabbing;
}

.slider-track {
  display: flex;
  align-items: start;
  gap: clamp(1rem, 2vw, 1.75rem);
  /* end-stops: the first/last card keeps this breathing space from the screen
     edge at the scroll extremes (mid-scroll cards still bleed to the edges) */
  padding-inline: var(--pad);
  list-style: none;
  will-change: transform;
  transition: transform 0.55s var(--ease-sheet);
  touch-action: pan-y; /* vertical page scroll passes through; JS drives horizontal drag */
}

.slider.is-dragging .slider-track {
  transition: none;
}

.slide {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 23vw, 300px);
}

/* the card content lifts on hover to make room for the description */
.slide-main {
  position: relative;
  transition: transform 0.45s var(--ease-out);
}

/* card lines stack on the baseline grid (year / company / role each 1.5rem) */
.slide-year {
  display: block;
  line-height: var(--lh-line);
  color: var(--ink-2);
  font-weight: 400;
}

.slide-co {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  line-height: var(--lh-line);
  margin: 0;
  transition: color 0.3s ease;
}

.slide-role {
  display: block;
  line-height: var(--lh-line);
  color: var(--ink-2);
  font-style: italic;
  font-size: 0.9375rem;
}

/* the description is absolutely anchored just below the card content, so
   revealing it never changes the card's flow height — nothing below (other
   cards, the footer) moves. On hover the content lifts and the copy fades in. */
.slide-desc {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.55rem;
  opacity: 0;
  transform: translateY(0.4rem);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.45s var(--ease-out);
}

.slide-desc p {
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: var(--lh-line);
  text-wrap: pretty;
}

@media (hover: hover) {
  .slide:hover .slide-main { transform: translateY(-0.75rem); }
  .slide:hover .slide-desc { opacity: 1; transform: translateY(0); }
  .slide:hover .slide-co { color: var(--accent); }
}

/* touch: no hover, so the description sits in normal flow under each card */
@media (hover: none) {
  .slide-desc {
    position: static;
    opacity: 1;
    transform: none;
  }
  .slide-main { transform: none; }
}

/* --- profile ----------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}

.lede {
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.28;
  max-width: 24ch;
  text-wrap: balance;
}

.lede em {
  font-weight: 700;
  font-style: normal;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .lede em:hover {
    color: var(--accent);
  }
}

.note {
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 0.4rem;
  max-width: 33ch;
  margin-top: 0.25em;
}

.note-label {
  color: var(--accent);
}

.note p {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}

.note p + .note-label {
  margin-top: 1.25rem;
}

/* --- experience index (accordion) ------------------------------------------------ */
/* each entry is a single-open accordion: a full-row button (wrapped in its
   heading for screen-reader navigation) toggles a description panel below */

.xp-list {
  list-style: none;
  /* track which column the years occupy, reused to indent the open panel */
  --xp-years-col: 9rem;
  --xp-col-gap: clamp(1rem, 2.5vw, 2.5rem);
}

.xp {
  border-top: 1px solid var(--hair);
}

.xp:last-child {
  border-bottom: 1px solid var(--hair);
}

/* the heading carries no visual weight of its own — the button is the row */
.xp-title {
  margin: 0;
  font: inherit;
  font-weight: 400;
}

.xp-head {
  width: 100%;
  display: grid;
  grid-template-columns: var(--xp-years-col) minmax(0, 1fr) auto;
  gap: var(--xp-col-gap);
  align-items: baseline;
  padding-block: 1.15rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.xp-head > * {
  transition: transform 0.45s var(--ease-out), color 0.3s ease;
}

@media (hover: hover) {
  .xp-head:hover > * {
    transform: translateX(0.875rem);
  }

  .xp-head:hover .xp-co {
    color: var(--accent);
  }
}

/* open row keeps its company name inked in accent */
.xp-head[aria-expanded="true"] .xp-co {
  color: var(--accent);
}

.xp-years {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.xp-co {
  font-size: clamp(1.125rem, 1rem + 1.1vw, 1.625rem);
  line-height: 1.15;
}

.xp-role {
  font-style: italic;
  color: var(--ink-2);
  text-align: right;
  font-size: 0.9375rem;
}

/* panel: collapsed via grid-rows 0fr→1fr (animates everywhere);
   visibility:hidden also pulls the copy out of the a11y tree when closed */
.xp-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.5s var(--ease-out), visibility 0.5s;
}

.xp.is-open .xp-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.xp-panel-inner {
  overflow: hidden;
  min-height: 0;
  /* start the description under the company title, capped to a readable measure */
  padding-left: calc(var(--xp-years-col) + var(--xp-col-gap));
}

.xp-desc {
  max-width: 60ch;
  padding-bottom: 1.5rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --- elsewhere ----------------------------------------------------------------- */

.cn-list {
  list-style: none;
}

.cn {
  border-top: 1px solid var(--hair);
}

.cn:last-child {
  border-bottom: 1px solid var(--hair);
}

.cn a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.5em;
  text-decoration: none;
  font-size: var(--fs-link);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  transition: color 0.35s ease, padding-left 0.5s var(--ease-out);
}

.cn-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.cn-ico {
  width: 0.42em;
  height: 0.42em;
  flex-shrink: 0;
  opacity: 0.85;
}

.cn-side {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.cn-label {
  font-weight: 400;
  color: var(--ink-2);
  transition: color 0.35s ease;
}

.cn-arrow {
  font-size: 0.3em;
  font-weight: 400;
  transition: transform 0.45s var(--ease-out);
}

@media (hover: hover) {
  .cn a:hover {
    color: var(--accent);
    font-style: italic;
    padding-left: 0.2em;
  }

  .cn a:hover .cn-label {
    color: var(--accent);
  }

  .cn a:hover .cn-arrow {
    transform: translate(0.35em, -0.35em);
  }
}

/* --- colophon ----------------------------------------------------------------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.9rem;
  line-height: var(--lh-line);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  color: var(--ink-2);
  font-weight: 400;
}

.colophon a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.colophon a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.colophon-edition { color: var(--ink-2); }

/* the separators are a deliberate accent — larger, in the signature hue,
   optically centred against the caps line */
.colophon-dot {
  align-self: center;
  font-size: 1.6em;
  line-height: 1;
  color: var(--accent);
  transform: translateY(-0.06em);
}

/* --- custom cursor ----------------------------------------------------------- */
/* white dot in difference blend: it inverts whatever sits beneath it,
   growing into a lens over links, buttons and the hero letters */

.cursor {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500; /* above the gate (400) so the lens shows on the password screen */
  /* rendered at full hover size and scaled down at rest,
     so the grown state stays crisp */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* contextual glyph in the grown cursor — painted black, so under
   difference blending it reads as a clear window onto the content */
.cursor-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #000;
  font-family: "Neue Regrade", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cursor.is-big .cursor-icon {
  opacity: 1;
}

.cursor.is-heart .cursor-icon {
  opacity: 0;
}

/* brand logo inside the lens when hovering a [data-icon] link */
.cursor-svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 21px;
  height: 21px;
  color: #000;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cursor.has-svg.is-big .cursor-svg {
  opacity: 1;
}

.cursor.has-svg .cursor-icon {
  opacity: 0;
}

/* over an intro social link the lens is opaque (drops the difference blend) so
   the text underneath is fully covered — a solid ink circle with a paper-coloured
   logo (black circle + white logo in light, inverted in dark) */
.cursor.is-cover {
  mix-blend-mode: normal;
  background: var(--ink);
}

.cursor.is-cover .cursor-svg {
  color: var(--paper);
}

/* the gag: over "design systems" the lens becomes a heart (no plus) */
.cursor.is-heart {
  border-radius: 0;
  mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/%3E%3C/svg%3E');
  -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/%3E%3C/svg%3E');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: 100%;
  -webkit-mask-size: 100%;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js body,
  html.js a,
  html.js button,
  html.js .gate-input {
    cursor: none;
  }

  html.js .cursor {
    display: block;
  }
}

/* --- scroll reveals ----------------------------------------------------------- */

html.js .rv {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s ease, transform 0.9s var(--ease-out);
}

html.js .rv.in {
  opacity: 1;
  transform: none;
}

/* parallax elements get their transform from script.js — fade only */
html.js .rv[data-plx] {
  transform: none;
  transition: opacity 0.9s ease;
}

/* --- responsive ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .edge {
    display: none;
  }

  .about-grid,
  .intro-grid {
    grid-template-columns: 1fr;
  }

  .xp-head {
    grid-template-columns: 1fr;
    row-gap: 0.2rem;
  }

  .xp-role { text-align: left; }

  /* full-width description once the row stacks */
  .xp-panel-inner { padding-left: 0; }

  .cn-label {
    display: none;
  }
}

@media (max-width: 600px) {
  :root {
    --fs-caps: 0.625rem;
  }

  /* let the hero breathe on small portrait screens */
  .hero-kicker {
    margin-bottom: clamp(2.5rem, 8vh, 5rem);
  }

  .hero-foot {
    margin-top: clamp(2.5rem, 8vh, 5rem);
  }

  .hero-kicker-right {
    display: none;
  }

  .corner-clock {
    display: none;
  }

  .crop {
    display: none;
  }

  /* wider cards that peek the next one, so the slider still reads as a slider */
  .slide {
    width: min(78vw, 300px);
  }
}

/* --- reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .ltr,
  html.js .rv {
    opacity: 1;
    transform: none;
  }

  .sec-rule {
    transform: scaleX(1);
  }
}

/* ===========================================================================
   SUBPAGES — shared shell for /works list + case study
   Narrower centred container + the wordmark pinned beside the logo always.
   =========================================================================== */

.subpage .main {
  max-width: 1460px;
  margin-inline: auto;
}

/* the "Dániel Kérges" wordmark rides next to the logo from the first paint
   (the homepage slides it in only past the hero) */
.subpage .tl-name {
  opacity: 1;
  transform: none;
}

/* --- works masthead (replaces the homepage-scale hero on the list page) ----- */

.work-head {
  padding-block: clamp(4.5rem, 12vh, 8rem) clamp(1.25rem, 3vh, 2.25rem);
}

.work-head-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 400;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-2);
}

.work-head-kicker .accent-dot {
  display: inline-block;
  margin-left: 0.5em;
  transform: translateY(-0.05em);
}

.work-head-title {
  font-weight: 400; /* "Selected" reads light, like the homepage name */
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.75rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-block: clamp(1.5rem, 5vh, 3.25rem) clamp(1rem, 2.5vh, 1.5rem);
}

.work-head-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  transition: color 0.3s ease;
}

.work-head-sub {
  color: var(--ink-2);
  font-weight: 400;
}

/* --- works index list ------------------------------------------------------- */

.work-list { list-style: none; }
.work { border-top: 1px solid var(--hair); }
.work:last-child { border-bottom: 1px solid var(--hair); }

.work-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 4.5vh, 2.75rem);
  text-decoration: none;
  color: inherit;
}

.work-no {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
  transition: color 0.3s ease;
}

.work-title {
  font-size: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.018em;
}

.work-sub {
  display: block;
  margin-top: 0.7rem;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.work-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-end;
  white-space: nowrap;
  color: var(--ink-2);
  font-weight: 400;
  padding-top: 0.4rem;
}

.work-year { color: var(--ink); font-variant-numeric: tabular-nums; }
.work-state { color: var(--accent); }

/* live entry — whole row is a link, animated like the experience index */
.work.is-live .work-row > * {
  transition: transform 0.5s var(--ease-out), color 0.3s ease;
}

.work-arrow {
  align-self: center;
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.75rem);
  color: var(--ink);
  transition: transform 0.5s var(--ease-out), color 0.3s ease;
}

@media (hover: hover) {
  .work.is-live .work-row:hover > * { transform: translateX(0.9rem); }
  .work.is-live .work-row:hover .work-title { color: var(--accent); }
  .work.is-live .work-row:hover .work-arrow {
    transform: translate(0.5em, -0.4em);
    color: var(--accent);
  }
}

/* placeholders — present but quietly dormant */
.work.is-soon { opacity: 0.5; transition: opacity 0.4s ease; }
.work.is-soon:hover { opacity: 0.72; }
.work.is-soon .work-row { cursor: default; grid-template-columns: 4rem minmax(0, 1fr) auto; }
.work.is-soon .work-title { font-weight: 400; }

@media (max-width: 720px) {
  .work-row,
  .work.is-soon .work-row { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .work-meta { grid-column: 2; text-align: left; align-items: flex-start; margin-top: 0.5rem; }
  .work-arrow { display: none; }
}

/* --- brand accents -----------------------------------------------------------
   The works page chrome is monochrome (accent → ink). Each project then carries
   its own fixed brand colour, surfaced through --accent on the row, so the
   number, status and hover states all pick it up. */
.works-page { --accent: var(--ink); }

.work.brand-veeam       { --accent: hsl(147 74% 44%); }  /* Veeam green — matches the case study */
.work.brand-sentinelone { --accent: hsl(263 100% 50%); } /* SentinelOne violet (#6100ff) */
.work.brand-zenga       { --accent: hsl(327 62% 33%); }  /* Zenga burgundy (from #380724) */
.work.brand-billingo    { --accent: hsl(216 86% 50%); }  /* Billingo blue */

[data-theme="dark"] .work.brand-veeam       { --accent: hsl(147 82% 66%); }
[data-theme="dark"] .work.brand-sentinelone { --accent: hsl(263 100% 73%); }
[data-theme="dark"] .work.brand-zenga       { --accent: hsl(330 58% 64%); }
[data-theme="dark"] .work.brand-billingo    { --accent: hsl(214 90% 70%); }

/* ===========================================================================
   THE GATE — quiet "sealed dossier" with a full-bordered password field
   (presentation only; real auth is host-level — see works/HANDOFF.md)
   =========================================================================== */

html.works-locked,
html.works-locked body { overflow: hidden; height: 100%; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 400; /* above the loader and the frame */
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: var(--paper);
  transition: transform 0.9s var(--ease-sheet), opacity 0.6s ease 0.2s;
  will-change: transform;
}

/* the curtain lift, trailing a thin accent hairline */
.gate.is-gone { transform: translateY(-101%); opacity: 1; }
.gate.is-gone::after { transform: scaleX(1); }
.gate::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-sheet);
}

.gate.shake .gate-inner {
  animation: gate-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes gate-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.gate-inner {
  position: relative;
  width: min(440px, 92vw);
  display: grid;
  gap: 1.5rem;
}

.gate-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ink-2);
  font-weight: 700;
}

.gate-mark { width: 1.05em; height: 1.05em; color: var(--accent); }

.gate-title {
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.gate-note {
  color: var(--ink-2);
  max-width: 34ch;
  margin-top: -0.75rem;
}

.gate-form { display: grid; gap: 0.6rem; }
.gate-label { color: var(--ink-2); }

/* input (empty bordered box) + button (solid) share one row at equal height */
.gate-row { display: flex; gap: 0.75rem; align-items: stretch; }

/* the full-bordered field */
.gate-input {
  flex: 1; min-width: 0;
  font: inherit;
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  border: 1px solid var(--hair);
  padding: 0.85em 1em;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.gate-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}
.gate-input::placeholder { color: var(--ink-2); opacity: 0.45; }

/* solid accent button — deliberately unlike the bordered input */
.gate-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-inline: 1.5em;
  font-family: inherit; /* drop the UA button font; .caps sets size/weight/spacing */
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, gap 0.4s var(--ease-out);
}
.gate-submit:hover {
  gap: 0.95em;
  background: color-mix(in srgb, var(--accent) 86%, var(--ink));
  border-color: color-mix(in srgb, var(--accent) 86%, var(--ink));
}
.gate-ret { font-weight: 400; opacity: 0.8; }

.gate-error { color: var(--accent); font-weight: 700; min-height: 1em; margin-top: -0.4rem; }

.gate-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
}
.gate-back { color: var(--ink-2); text-decoration: none; transition: color 0.3s ease; }
.gate-back:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .gate, .gate::after, .gate.shake .gate-inner {
    transition: opacity 0.3s ease;
    animation: none;
  }
  .gate.is-gone { transform: none; opacity: 0; }
}

/* ===========================================================================
   CASE STUDY — Veeam ("The Living Blueprint")
   Reuses the core sheet (font, tokens, frame, corners, sec-head, reveals);
   only the case-study-specific furniture lives here.
   =========================================================================== */

.case-study img { display: block; max-width: 100%; }

/* keep the cover snug against the first chapter (core `section` margin off) */
.case-study .cover { margin-bottom: 0; }

/* reserve room for the chapter rail labels where the rail is visible */
@media (min-width: 1101px) {
  .case-study .main { padding-left: max(var(--pad), 13rem); }
}

/* --- chapter rail ----------------------------------------------------------- */
.rail {
  /* offset right of the vertical edge label so the two don't overlap */
  position: fixed; left: calc(var(--edge) + 2rem); top: 50%; transform: translateY(-50%);
  z-index: 51; display: grid; gap: 0.55rem; list-style: none;
}
.rail a {
  display: inline-flex; align-items: baseline; gap: 0.6em;
  text-decoration: none; font-size: var(--fs-caps); font-weight: 700;
  letter-spacing: 0.14em; color: var(--ink-2); transition: color 0.3s ease;
}
.rail a:hover { color: var(--ink); } /* accent is reserved for the current chapter */
.rail a:hover .rail-label { opacity: 1; transform: none; }
.rail .rail-label {
  text-transform: uppercase; font-weight: 400; opacity: 0;
  transform: translateX(-0.3em);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
  white-space: nowrap;
}
.rail li.current a { color: var(--accent); }
.rail li.current .rail-label { opacity: 1; transform: none; }
html[data-rail="off"] .rail { display: none; }
@media (max-width: 1100px) { .rail { display: none; } }

/* --- chapters, prose, columns ----------------------------------------------- */
.chapter { margin-bottom: clamp(7rem, 18vh, 13rem); }

.prose { max-width: 64ch; }
.prose p { text-wrap: pretty; }
.prose p + p { margin-top: 1rem; }
.case-study .prose em,
.case-study .lede em { font-weight: 700; font-style: normal; }
.case-study .prose .it { font-style: italic; font-weight: 400; }

.cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* case-study ledes run a touch wider than the homepage profile lede */
.case-study .lede { max-width: 30ch; }
.case-study .outro .lede { max-width: 36ch; }

/* --- cover ------------------------------------------------------------------- */
.cover {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--edge) + 3rem);
}
.cover-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.55em;
  text-decoration: none; color: var(--ink-2); font-weight: 700;
  margin-bottom: clamp(1.75rem, 5vh, 3.25rem);
  transition: color 0.3s ease, gap 0.4s var(--ease-out);
}
.cover-back:hover { color: var(--accent); gap: 0.85em; }
.cover-back-arrow {
  display: inline-block; width: 1.05em; height: auto; flex-shrink: 0;
  transition: transform 0.35s var(--ease-out);
}
.cover-back:hover .cover-back-arrow { transform: translateX(-0.22em); }
.title-arrow { display: inline-block; width: 0.82em; height: auto; vertical-align: -0.04em; margin-left: 0.06em; overflow: visible; }
.title-colon { color: inherit; }

.cover-kicker, .cover-foot { display: flex; justify-content: space-between; gap: 1rem; font-weight: 400; }
.cover-kicker { margin-bottom: clamp(1.5rem, 5vh, 4rem); padding-bottom: 0.875rem; border-bottom: 1px solid var(--hair); }
.cover-foot { margin-top: clamp(1.5rem, 5vh, 4rem); padding-top: 0.875rem; border-top: 1px solid var(--hair); color: var(--ink-2); }

.cover-title { margin-inline: calc(-1 * var(--pad)); }
@media (min-width: 901px) { .cover-line { padding-inline: calc(var(--edge) + 1.5rem); } }
.cover-line {
  display: block; overflow: hidden; white-space: nowrap;
  font-weight: 700; line-height: 0.96; letter-spacing: -0.015em;
  font-size: clamp(3rem, 13vw, 13rem);
  padding-bottom: 0.22em; margin-bottom: -0.22em;
}
.cover-line .line-in {
  display: inline-block; white-space: nowrap; will-change: transform;
  transform: translateY(120%); transition: transform 1s var(--ease-out);
}
.cover-line:nth-child(2) .line-in { transition-delay: 0.12s; }
body.is-loaded .cover-line .line-in { transform: none; }
body.no-anim .cover-line .line-in { transition: none; transform: none; }
body.no-anim .sec-rule { transition: none; transform: scaleX(1); }
body.no-anim .rv, body.no-anim .chip { transition: none; }
.cover-line.light { font-weight: 400; }
.cover-line.italic { font-style: italic; text-align: right; }

.facts { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(1rem, 4vw, 4rem); }
.fact { display: grid; gap: 0.15rem; }
.fact .caps { font-weight: 400; color: var(--ink-2); }
.fact strong { font-size: 0.9375rem; line-height: 1.3; }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr 1fr; } .cover-foot .scroll-hint { display: none; } }

/* --- plates (exhibits with blueprint spec marks) ---------------------------- */
.plate { margin: clamp(2.5rem, 6vh, 4rem) 0; }
.plate-frame { position: relative; border: 1px solid var(--hair); background: color-mix(in srgb, var(--ink) 3%, var(--paper)); }
.plate-frame img { width: 100%; }
html[data-marks="on"] .plate.in .plate-frame { outline: 1px dashed color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 6px; }
html[data-marks="on"] .plate.in .plate-frame::after {
  content: ""; position: absolute; inset: -10px; pointer-events: none;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 7px 7px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: handles 0.5s var(--ease-out);
}
@keyframes handles { from { opacity: 0; } }
.plate-tag {
  position: absolute; top: -10px; left: -10px; transform: translateY(-100%);
  background: var(--accent); color: var(--paper);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.25em 0.7em; opacity: 0; transition: opacity 0.4s ease 0.2s;
}
html[data-marks="on"] .plate.in .plate-tag { opacity: 1; }
html[data-marks="off"] .plate-tag { display: none; }
.plate figcaption {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  margin-top: 0.8rem; font-weight: 400; color: var(--ink-2);
  font-size: var(--fs-caps); letter-spacing: 0.16em; text-transform: uppercase;
}
.plate figcaption .fig-no { color: var(--accent); font-weight: 700; margin-right: 0.6em; }
.plate figcaption .plate-dim { font-variant-numeric: tabular-nums; opacity: 0.7; white-space: nowrap; }
.plate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 800px) { .plate-pair { grid-template-columns: 1fr; } }

/* --- steps strip ------------------------------------------------------------ */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.steps .step { font-weight: 400; color: var(--ink-2); }
.steps .step strong { color: var(--ink); font-weight: 700; }
.steps .step-arrow { color: var(--accent); font-size: 0.8em; }

/* --- pull quote ------------------------------------------------------------- */
.pull {
  margin: clamp(3rem, 8vh, 5rem) 0;
  font-size: clamp(1.6rem, 1.2rem + 2.6vw, 3.4rem);
  font-style: italic; font-weight: 400; line-height: 1.22;
  max-width: 26ch; text-wrap: balance; border: 0;
}
.pull::before { content: "“"; color: var(--accent); font-weight: 700; }
.pull::after { content: "”"; color: var(--accent); font-weight: 700; }
.pull-att { margin-top: 1.25rem; color: var(--ink-2); font-weight: 400; }
.pull-att .accent-dot { display: inline-block; margin-right: 0.75em; }

/* --- foundations ------------------------------------------------------------ */
.fdn-row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 6rem); align-items: start;
  padding-block: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--hair);
}
.fdn-row:last-of-type { border-bottom: 1px solid var(--hair); }
@media (max-width: 900px) { .fdn-row { grid-template-columns: 1fr; } }
.fdn-label { display: grid; gap: 0.7rem; }
.fdn-label .caps { color: var(--accent); }
.fdn-label h3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); }
.fdn-label p { color: var(--ink-2); font-size: 0.9375rem; max-width: 34ch; text-wrap: pretty; }
.fdn-body .plate { margin: 0; }

.specimen { border: 1px solid var(--hair); padding: clamp(1.5rem, 4vw, 3rem); }
.specimen-inter { font-family: "Inter Tight", "Helvetica Neue", sans-serif; }
.specimen-ag { font-size: clamp(5rem, 12vw, 11rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.specimen-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; color: var(--ink-2); font-weight: 400; }
.specimen-sample { font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); font-weight: 600; line-height: 1.2; max-width: 24ch; margin-top: 1.5rem; text-wrap: balance; }
.specimen-weights { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: 1rem; }
.specimen-weights span:nth-child(1) { font-weight: 400; }
.specimen-weights span:nth-child(2) { font-weight: 500; }
.specimen-weights span:nth-child(3) { font-weight: 600; }
.specimen-weights span:nth-child(4) { font-weight: 700; }

.ramps { display: grid; gap: 1.4rem; }
.ramp { display: grid; gap: 0.45rem; }
.ramp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ramp-head .ramp-name { font-weight: 700; }
.ramp-head .caps { font-weight: 400; color: var(--ink-2); }
.ramp-chips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.chip {
  aspect-ratio: 1 / 0.78; min-width: 0; display: grid; align-content: end; padding: 0.3em 0.4em;
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.04em;
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 0.5s ease var(--cd, 0s), transform 0.6s var(--ease-out) var(--cd, 0s);
}
.ramp.in .chip { opacity: 1; transform: none; }
.chip i { font-style: normal; display: block; opacity: 0.85; }
@media (max-width: 700px) { .chip { font-size: 0.45rem; } .chip i.chip-hex { display: none; } }

/* --- stats ------------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 3rem); margin: clamp(2.5rem, 6vh, 4rem) 0; }
.stat { border-top: 1px solid var(--ink); padding-top: 0.9rem; display: grid; gap: 0.2rem; }
.stat strong { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1; font-style: italic; letter-spacing: -0.02em; }
.stat .caps { font-weight: 400; color: var(--ink-2); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }

/* --- pinned wipe scene ------------------------------------------------------ */
.pin-scene { height: 280vh; margin-block: clamp(2rem, 6vh, 4rem); }
.pin-stick { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; align-content: center; gap: 1.2rem; }
.wipe-frame {
  position: relative; width: min(100%, 1150px); aspect-ratio: 16 / 10;
  border: 1px solid var(--hair); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
}
.wipe-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wipe-new { clip-path: inset(0 0 0 calc(var(--wipe, 0) * 100%)); }
.wipe-line { position: absolute; top: 0; bottom: 0; width: 2px; left: calc(var(--wipe, 0) * 100%); background: var(--accent); }
.wipe-caps { display: flex; justify-content: space-between; gap: 1rem; width: min(100%, 1150px); color: var(--ink-2); font-weight: 400; }
.wipe-caps .on { color: var(--accent); font-weight: 700; transition: color 0.3s ease; }
html[data-wipe="off"] .pin-scene { height: auto; }
html[data-wipe="off"] .pin-stick { position: static; height: auto; }
html[data-wipe="off"] .wipe-frame { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border: 0; overflow: visible; background: none; }
html[data-wipe="off"] .wipe-frame img { position: static; height: auto; border: 1px solid var(--hair); }
html[data-wipe="off"] .wipe-line { display: none; }

/* --- timeline --------------------------------------------------------------- */
.tl { list-style: none; margin-top: clamp(2rem, 5vh, 3rem); }
.tl li {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(1rem, 2.5vw, 2.5rem); align-items: baseline;
  padding-block: 1.15rem; border-top: 1px solid var(--hair);
}
.tl li:last-child { border-bottom: 1px solid var(--hair); }
.tl li > * { transition: transform 0.45s var(--ease-out), color 0.3s ease; }
@media (hover: hover) {
  .tl li:hover > * { transform: translateX(0.875rem); }
  .tl li:hover .tl-what { color: var(--accent); }
}
.tl-when { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tl-what { font-size: clamp(1.05rem, 1rem + 0.8vw, 1.45rem); font-weight: 700; line-height: 1.2; }
.tl-note { font-style: italic; color: var(--ink-2); text-align: right; font-size: 0.9375rem; }
@media (max-width: 700px) { .tl li { grid-template-columns: 1fr; row-gap: 0.2rem; } .tl-note { text-align: left; } }

/* --- reflection ------------------------------------------------------------- */
.retro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 800px) { .retro { grid-template-columns: 1fr; } }
.retro h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.retro ul { list-style: none; }
.retro li { padding: 0.7rem 0; border-top: 1px solid var(--hair); color: var(--ink-2); text-wrap: pretty; }
.retro li strong { color: var(--ink); }
.retro li:last-child { border-bottom: 1px solid var(--hair); }
.outro { margin-top: clamp(3rem, 8vh, 5rem); }

/* --- ending mark ------------------------------------------------------------ */
.fin { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(6rem, 16vh, 10rem); }
.fin-rule { flex: 1; height: 1px; background: var(--hair); }
.fin-mark { display: grid; justify-items: center; gap: 0.9rem; color: var(--accent); }
.fin-mark svg { display: block; }
.fin-mark .caps { color: var(--ink-2); font-weight: 400; letter-spacing: 0.22em; }

@media (prefers-reduced-motion: reduce) {
  .cover-line .line-in { transform: none; }
  .chip { opacity: 1; transform: none; }
  .pin-scene { height: auto; }
  .pin-stick { position: static; height: auto; }
}