/* ============================================================
   Quiet Editorial - main styles
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* --- Reveal (fade + rise) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 0.6rem + 1.2vw, 1.6rem) var(--gutter);
  mix-blend-mode: normal;
  transition: transform 0.5s var(--ease), background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}
.nav__dot { color: var(--accent); }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.6vw, 2.2rem);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.nav__links a { position: relative; transition: color 0.25s ease; }
.nav__links a:not(.nav__resume)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__links a:not(.nav__resume):hover { color: var(--ink); }
.nav__links a:not(.nav__resume):hover::after { transform: scaleX(1); }
.nav__resume {
  padding: 0.5em 1.05em;
  border: 1px solid var(--ink);
  border-radius: 100px;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__resume:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(8rem, 6rem + 8vw, 12rem) var(--gutter) var(--section-y);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
}
.eyebrow__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero__title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
}

.hero__sub {
  margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero__sub strong { font-weight: 500; color: var(--ink); }

.hero__meta {
  margin-top: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  display: flex;
  align-items: center;
  gap: 1rem 1.2rem;
  flex-wrap: wrap;
}
.chip {
  font-size: var(--step--1);
  padding: 0.45em 0.95em;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.hero__places {
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* --- Countries + landmark cursor-follower --- */
.hero--centered .hero__meta { flex-direction: column; gap: 0.75rem; }
.hero__places-label {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.places { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero--centered .places { justify-content: center; }
.place {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding: 0.45em 0.9em;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  background: var(--paper-2);
  transition: border-color 0.25s ease, transform 0.25s var(--ease), color 0.25s ease;
}
.place:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
  color: var(--ink);
  transform: translateY(-2px);
}
.place__flag { font-size: 1.1em; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .place { cursor: none; }
}
.cursor-follow {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  pointer-events: none;
  font-size: 44px;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) rotate(-10deg);
  transition: transform 0.28s var(--ease), opacity 0.2s ease;
  will-change: transform, top, left;
  filter: drop-shadow(0 8px 14px rgba(27,26,23,0.3));
}
.cursor-follow.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }

/* --- The "Me in a minute" screen (minimal TV, re-skinned) --- */
.hero__media { display: flex; justify-content: center; }
.tv {
  width: 100%;
  max-width: 420px;
  cursor: pointer;
  outline-offset: 6px;
}
.tv__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 50% 0%, #26251f 0%, #171611 70%);
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 60px -30px rgba(27, 26, 23, 0.45),
              0 2px 0 0 rgba(255,255,255,0.5) inset;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tv:hover .tv__screen {
  transform: translateY(-4px);
  box-shadow: 0 40px 70px -28px rgba(27, 26, 23, 0.55);
}
.tv__noise {
  position: absolute; inset: 0;
  opacity: 0.06;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  animation: noise 4s steps(6) infinite;
}
@keyframes noise { to { transform: translateY(-3px); } }
.tv__label {
  position: absolute;
  bottom: 14px; left: 16px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,244,238,0.82);
}
.tv__play {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease), background 0.4s ease;
}
.tv__play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 16px solid var(--ink);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.tv:hover .tv__play { transform: scale(1.08); background: var(--paper); }
.tv__caption {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--muted);
}

/* --- Scroll cue --- */
.hero__scroll {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll-line {
  width: 46px; height: 1px; background: var(--ink);
  transform-origin: left;
  animation: scrollpush 2.6s var(--ease) infinite;
}
@keyframes scrollpush {
  0%, 100% { transform: scaleX(0.4); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* ============================================================
   HERO - centered layout variant
   ============================================================ */
.hero--centered {
  /* fit the whole hero (incl. TV) in the first viewport */
  padding-top: clamp(4.5rem, 11vh, 6.5rem);
  padding-bottom: clamp(1.4rem, 4vh, 2.75rem);
  min-height: 100svh;
  justify-content: center;
}
.hero--centered .hero__grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(1.3rem, 3vh, 2.3rem);
}
.hero--centered .eyebrow {
  justify-content: center;
  margin-bottom: clamp(0.85rem, 2vh, 1.4rem);
}
.hero--centered .hero__title {
  font-size: clamp(2.1rem, 1rem + 4.1vw, 4.3rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
}
.hero--centered .hero__sub {
  margin: clamp(0.85rem, 2vh, 1.4rem) auto 0;
  font-size: var(--step-0);
  max-width: 80ch;
}
.hero--centered .hero__meta {
  justify-content: center;
  margin-top: clamp(0.85rem, 2vh, 1.4rem);
}
.hero--centered .hero__media { justify-content: center; width: 100%; }
.hero--centered .tv--retro { max-width: clamp(300px, 38vh, 440px); }
.hero--centered .hero__scroll { display: none; }

/* Mobile-only: hide the extra eyebrow/subtext copy (desktop keeps the full text) */
@media (max-width: 600px) {
  .hide-mobile { display: none; }
  /* Case-card CTAs: two buttons share the full width in one centered row */
  .case__cta { flex-wrap: nowrap; gap: 0.6rem; }
  .case__cta .btn { flex: 1 1 0; text-align: center; padding-left: 0.6em; padding-right: 0.6em; }
}

/* --- Retro CRT set --- */
.tv--retro { max-width: 600px; }
.tv--retro .tv__set {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(158deg, #dcd6ca 0%, #c3bbac 55%, #b0a897 100%);
  border: 1px solid rgba(27,26,23,0.14);
  box-shadow: 0 34px 64px -34px rgba(27,26,23,0.55),
              inset 0 2px 3px rgba(255,255,255,0.65),
              inset 0 -4px 8px rgba(27,26,23,0.18);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tv--retro .tv__screen {
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 3px solid #2a2822;
}
.tv--retro:hover .tv__screen { transform: none; box-shadow: none; }
.tv--retro:hover .tv__set { transform: translateY(-5px); box-shadow: 0 44px 74px -32px rgba(27,26,23,0.6), inset 0 2px 3px rgba(255,255,255,0.65); }
.tv__panel {
  width: clamp(50px, 13%, 74px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.tv__brand {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #5c554a;
}
.tv__speaker {
  width: 100%;
  height: 72px;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, #7c7466 0 2px, #b6ae9f 2px 5px);
  box-shadow: inset 0 1px 2px rgba(27,26,23,0.35);
}
.tv__dial {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #efe9dd, #8f8778);
  box-shadow: inset 0 -2px 3px rgba(27,26,23,0.35), 0 1px 1px rgba(255,255,255,0.5);
  border: 1px solid rgba(27,26,23,0.18);
}
.tv__dial--lg { width: 34px; height: 34px; }
.tv__dial--sm { width: 22px; height: 22px; }

/* --- CRT tuning / buffering --- */
.tv__tune { position: absolute; inset: 0; display: none; z-index: 4; background: #0b0a08; overflow: hidden; }
.tv__screen.is-tuning .tv__tune { display: block; }
.tv__screen.is-tuning .tv__play, .tv__screen.is-tuning .tv__label { opacity: 0; }
.tv__tune-static {
  position: absolute; inset: 0; opacity: 0.35;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 3px);
  animation: staticflick 0.1s steps(2) infinite;
}
@keyframes staticflick { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.tv__tune-flash {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: #fff; box-shadow: 0 0 14px #fff;
  transform: translateY(-50%) scaleX(0);
  animation: tvflash 1.7s var(--ease) forwards;
}
@keyframes tvflash {
  0% { transform: translateY(-50%) scaleX(0); opacity: 1; }
  18% { transform: translateY(-50%) scaleX(1); opacity: 1; }
  45% { opacity: 0.5; }
  100% { transform: translateY(-50%) scaleX(1) scaleY(70); opacity: 0; }
}
.tv__tune-label {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  color: #efe9dd; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  animation: bufferblink 0.9s steps(2) infinite;
}
@keyframes bufferblink { 50% { opacity: 0.45; } }

/* --- Fullscreen video overlay --- */
.v-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  visibility: hidden;
}
.v-overlay.is-open { visibility: visible; }
/* dark backdrop fades independently so the frame itself stays fully opaque */
.v-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(18,17,14,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.v-overlay.is-open::before { opacity: 1; }
.v-overlay.is-closing::before { opacity: 0; }
.v-overlay__frame {
  position: relative; z-index: 1;
  width: min(1100px, 92vw); aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 50px 110px -30px rgba(0,0,0,0.75);
  will-change: transform;
}
.v-overlay__frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; transition: opacity 0.35s ease;
}
.v-overlay__close {
  position: absolute; top: 1.2rem; right: 1.4rem; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.3); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.25s ease, transform 0.25s var(--ease);
}
.v-overlay__close:hover { background: rgba(255,255,255,0.16); transform: rotate(90deg); }

/* --- CRT idle glitch (teases the video) --- */
.tv__glitch { position: absolute; inset: 0; z-index: 2; opacity: 0; overflow: hidden; pointer-events: none; }
.tv__glitch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv__glitch::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.tv__play { position: relative; z-index: 5; }
/* while the video is open, keep the TV screen a plain opaque black (no play button/label/noise) */
.tv.is-playing .tv__play,
.tv.is-playing .tv__label,
.tv.is-playing .tv__noise,
.tv.is-playing .tv__glitch { opacity: 0; }
.tv.is-playing .tv__screen { background: #000; }
.tv.is-glitching .tv__glitch { animation: tvGlitch 2s linear forwards; }
.tv.is-glitching .tv__set { animation: tvShake 2s ease-in-out forwards; }
@keyframes tvGlitch {
  0%   { opacity: 0; transform: translateX(-9px); clip-path: inset(46% 0 46% 0); }
  4%   { opacity: 1; transform: translateX(7px);  clip-path: inset(0); filter: drop-shadow(-3px 0 rgba(255,0,90,.6)) drop-shadow(3px 0 rgba(0,220,255,.6)); }
  7%   { transform: translateX(-5px); clip-path: inset(16% 0 64% 0); }
  10%  { transform: translateX(4px);  clip-path: inset(62% 0 10% 0); }
  13%  { transform: none; clip-path: inset(0); filter: none; }
  31%  { transform: none; }
  34%  { transform: translateX(-4px); clip-path: inset(28% 0 46% 0); filter: drop-shadow(-2px 0 rgba(255,0,90,.5)) drop-shadow(2px 0 rgba(0,220,255,.5)); }
  37%  { transform: none; clip-path: inset(0); filter: none; }
  63%  { transform: none; }
  66%  { transform: translateX(5px); clip-path: inset(50% 0 24% 0); }
  69%  { transform: none; clip-path: inset(0); }
  90%  { opacity: 1; transform: none; }
  95%  { opacity: 1; transform: translateX(-7px); clip-path: inset(34% 0 40% 0); filter: drop-shadow(-3px 0 rgba(255,0,90,.6)) drop-shadow(3px 0 rgba(0,220,255,.6)); }
  100% { opacity: 0; transform: translateX(5px); }
}
@keyframes tvShake {
  0%, 100% { transform: translate(0, 0); }
  3%  { transform: translate(-2px, 1px) rotate(-0.3deg); }
  6%  { transform: translate(2px, -1px) rotate(0.3deg); }
  9%  { transform: translate(-1px, 1px); }
  12% { transform: translate(1px, 0) rotate(0.2deg); }
  15%, 33% { transform: translate(0, 0); }
  35% { transform: translate(-1.5px, 1px) rotate(-0.25deg); }
  37% { transform: translate(1px, -1px); }
  39%, 65% { transform: translate(0, 0); }
  67% { transform: translate(2px, 1px) rotate(0.3deg); }
  69% { transform: translate(-1px, 0); }
  71%, 94% { transform: translate(0, 0); }
  96% { transform: translate(-2px, 1px) rotate(-0.3deg); }
  98% { transform: translate(1px, -1px) rotate(0.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tv__glitch { display: none; }
}

@media (max-width: 560px) {
  .tv--retro .tv__set { padding: 11px; gap: 10px; }
  .tv__speaker { height: 52px; }
}

/* ============================================================
   BY THE NUMBERS
   ============================================================ */
.stats {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 2rem + 3.5vw, 5.5rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.stats__head {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.stats__lede {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.stats__lede em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-ink);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: clamp(1.2rem, 0.8rem + 1.5vw, 2rem) clamp(1.2rem, 0.6rem + 1.5vw, 2.2rem);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat__num {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__unit { color: var(--accent-ink); }
.stat__label {
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--muted);
  max-width: 22ch;
}
.stat__label .ph {
  font-weight: 400;
  font-style: italic;
  color: color-mix(in srgb, var(--accent-ink) 70%, transparent);
}
.stats__foot {
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 40ch;
}
.stats__foot strong { font-style: normal; font-family: var(--font-body); font-weight: 500; color: var(--ink); }

@media (max-width: 860px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat { border-left: none; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--hairline); padding-left: clamp(1.2rem, 0.6rem + 1.5vw, 2.2rem); }
  .stat:nth-child(3), .stat:nth-child(4) { margin-top: 1.5rem; }
}
@media (max-width: 460px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(even) { border-left: none; padding-left: 0; margin-top: 0; }
  .stat + .stat { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
  .stat { align-items: center; text-align: center; }
}

/* ============================================================
   SHARED SECTION PRIMITIVES
   ============================================================ */
.work, .craft, .beyond, .writing, .lead, .tmls, .pullquote {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.work, .craft, .beyond, .writing, .lead, .tmls {
  border-top: 1px solid var(--hairline);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: clamp(2.2rem, 1.4rem + 3vw, 4rem);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-ink);
}
.section-note { font-size: var(--step--1); color: var(--muted); max-width: 52ch; }
.ph { font-weight: 400; font-style: italic; color: color-mix(in srgb, var(--accent-ink) 70%, transparent); }

.link-arrow {
  font-size: var(--step--1);
  color: var(--accent-ink);
  display: inline-block;
  position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow--muted { color: var(--ink-soft); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-size: calc(var(--step--1) * 0.92);
  padding: 0.35em 0.85em;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  background: var(--paper-2);
  color: var(--ink-soft);
}

/* ============================================================
   SELECTED WORK
   ============================================================ */
.work__list { display: flex; flex-direction: column; gap: clamp(3rem, 2rem + 5vw, 6.5rem); }
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.case:nth-child(even) .case__media { order: 2; }
.case__media .mock {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(130% 120% at 20% 0%, color-mix(in srgb, var(--accent) 14%, var(--paper-2)) 0%, var(--paper-2) 60%);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.case:hover .case__media .mock { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(27,26,23,0.4); }
.case__media .mock span {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-soft);
  font-size: var(--step-0);
  text-align: center;
  padding: 0 1.5rem;
}
.case__media .mock::after {
  content: attr(data-tag);
  position: absolute; top: 12px; left: 12px;
  font-size: calc(var(--step--1) * 0.85);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.case__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 1rem 0 0.8rem;
}
.case__desc { color: var(--ink-soft); max-width: 46ch; font-size: var(--step-0); }
.metrics { display: flex; gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin: 1.5rem 0; }
.metric__num {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
  line-height: 1;
  color: var(--ink);
}
.metric__label { font-size: var(--step--1); color: var(--muted); }
.case__links { display: flex; gap: 1.6rem; align-items: center; }
.case__logo { height: 30px; width: auto; border-radius: 7px; margin-bottom: 1.1rem; display: block; }
.case__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
.case__cta .btn { padding: 0.72em 1.5em; font-size: var(--step--1); }

/* Image mockup variant - full illustration, hover-lift, no phone/floats */
.mockup--image .mockup__stage {
  background: var(--tint, #d3e2f7);
}
.mockup__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.mockup--image:hover .mockup__img { transform: scale(1.06); }

/* --- Case mockup: device + floating props --- */
.mockup { position: relative; width: 100%; }
.mockup__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(125% 105% at 24% 10%,
      color-mix(in srgb, var(--tint, #e9e0cf) 90%, #fff) 0%,
      var(--tint, #e9e0cf) 52%,
      color-mix(in srgb, var(--tint, #e9e0cf) 85%, var(--ink)) 100%);
}
.phone {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: min(52%, 310px);
  aspect-ratio: 360 / 770;
  border-radius: 30px;
  background: #0e0e0d;
  padding: 6px;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 26px 46px -22px rgba(27,26,23,0.5);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  z-index: 2;
}
.phone__screen {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}
.float {
  position: absolute;
  font-size: clamp(52px, 6.8vw, 86px);
  line-height: 1;
  z-index: 3;
  filter: drop-shadow(0 12px 16px rgba(27,26,23,0.22));
  animation: floaty 4.6s ease-in-out infinite;
  will-change: transform;
}
.float--a { top: 5%;    right: 4%; animation-duration: 4.2s; }
.float--b { top: 42%;   left: 3%;  animation-duration: 5.4s; animation-delay: -1.4s; }
.float--c { bottom: 8%; right: 3%; animation-duration: 4.9s; animation-delay: -2.6s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-14px) rotate(5deg); }
}
.mockup:hover .phone {
  transform: translateX(-50%) translateY(-14px);
  box-shadow: 0 48px 72px -24px rgba(27,26,23,0.55);
}
.mockup:hover .float { animation-play-state: paused; }

/* --- RTL Arabic case: auto English <-> Arabic transition mockup --- */
.mockup--rtl .mockup__stage { --tint: #dbe6d8; }
.rtlx { position: relative; }
.rtlx__caption {
  position: absolute;
  top: 0; bottom: 0;
  left: 45%; right: 6%;
  margin: 0;
  display: flex;
  align-items: center;   /* vertically centred, beside the phone */
  z-index: 1;
  pointer-events: none;
}
.rtlx__capline {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 0.6rem + 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: left;      /* English: left to right */
}
.rtlx.is-ar .rtlx__capline { direction: rtl; text-align: right; }  /* Arabic: right to left */
.rtlx__caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: currentColor;
  margin-left: 3px;
  vertical-align: -0.12em;
  animation: rtlxBlink 1s steps(1) infinite;
}
.rtlx.is-ar .rtlx__caret { margin-left: 0; margin-right: 3px; }
@keyframes rtlxBlink { 50% { opacity: 0; } }
.rtlx__phone {
  position: absolute;
  left: 5%; top: 9%;             /* phone on the left, dropped so its base is clipped by the frame */
  height: 104%;                  /* taller than the stage: the bottom of the screen sits behind the frame */
  aspect-ratio: 360 / 780;
  border-radius: 28px;
  background: #0e0e0d;
  padding: 6px;
  /* stroke on the OUTSIDE of the device (outer ring), not an inner border */
  box-shadow: 0 26px 46px -22px rgba(27,26,23,0.5), 0 0 0 1px rgba(0,0,0,0.22);
  z-index: 2;
  overflow: hidden;
}
.rtlx__screen {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: cover;
  border-radius: 22px;
  transition: opacity 0.85s ease-in-out;
  will-change: opacity;
}
.rtlx__screen--en { opacity: 1; }   /* solid bottom layer, always visible */
.rtlx__screen--ar { opacity: 0; }   /* top layer cross-fades in over EN: clean dissolve, no muddy 50/50 */
.rtlx.is-ar .rtlx__screen--ar { opacity: 1; }
.rtlx__badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(var(--step--1) * 0.82);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rtlx__badge-en, .rtlx__badge-ar { transition: opacity 0.5s ease-in-out; }
.rtlx__badge-ar { position: absolute; top: 0; right: 0; opacity: 0; white-space: nowrap; }
.rtlx.is-ar .rtlx__badge-en { opacity: 0; }
.rtlx.is-ar .rtlx__badge-ar { opacity: 1; }
.case__soon { margin-top: 0.5rem; font-size: var(--step--1); color: var(--muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .rtlx__screen { transition: none; }
  .rtlx__caret { animation: none; }
}
.float { cursor: grab; touch-action: none; }
.float.is-dragging { cursor: grabbing; z-index: 20; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .float { animation: none !important; }
}

/* --- Web mockup: desktop screen, top ~80% shown, bottom hidden behind the frame --- */
.win {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(90%, 600px);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(27,26,23,0.12);
  border-bottom: 0;
  z-index: 2;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.win__bar {
  height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: #f1eee8; border-bottom: 1px solid var(--hairline);
}
.win__bar span { width: 9px; height: 9px; border-radius: 50%; background: #cfc8ba; display: block; }
.win__body { aspect-ratio: 2654 / 1608; overflow: hidden; } /* full screen */
.win__screen { width: 100%; height: auto; display: block; }
.mockup--web:hover .win {
  transform: translateX(-50%) translateY(-12px);
  box-shadow: 0 40px 66px -30px rgba(27,26,23,0.5);
}
.float--money  { left: 4%; top: 2%; animation-duration: 5.1s; animation-delay: -0.8s; }
.float--laptop { right: 4%; top: 1%; animation-duration: 4.4s; animation-delay: -2.2s; }

/* ============================================================
   FEATURED QUOTE
   ============================================================ */
.pullquote { text-align: center; padding-top: clamp(1rem, 0.5rem + 1.5vw, 2.5rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.pullquote__text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0 auto;
  color: var(--ink);
}
.pullquote__text em { color: var(--accent-ink); font-style: italic; }
.pullquote__cite {
  margin-top: 1.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   CRAFT - marquee
   ============================================================ */
.marquee { display: flex; flex-direction: column; gap: 1rem; }
.marquee__row { display: flex; gap: 1rem; width: max-content; }
.marquee__row--a { animation: marq 46s linear infinite; }
.marquee__row--b { animation: marq 60s linear infinite reverse; }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.5rem)); } }
.marquee__track { display: flex; gap: 1rem; padding-right: 1rem; }
.tile {
  flex: 0 0 auto;
  width: clamp(190px, 22vw, 290px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: linear-gradient(150deg, var(--paper-2), color-mix(in srgb, var(--accent) 8%, var(--paper-2)));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--ink-soft);
}

/* ============================================================
   BEYOND DESIGN + ABOUT
   ============================================================ */
.beyond__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.beyond__lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }
.beyond__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fac {
  padding: 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper-2);
  transition: transform 0.4s var(--ease), border-color 0.3s ease;
}
.fac:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); }
.fac h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); margin-bottom: 0.4rem; }
.fac p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }
.fac a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.beyond__quote {
  margin: clamp(3rem, 2rem + 4vw, 5rem) auto 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--ink);
}

/* ============================================================
   WRITING / NOTES
   ============================================================ */
.writing__sub { margin-top: 0.5rem; font-family: var(--font-accent); font-style: italic; font-size: var(--step-1); color: var(--muted); max-width: 54ch; }

/* centered tab switcher */
.notes-tabs {
  display: flex; width: max-content; margin: 1.4rem auto 0;
  gap: 0.25rem; padding: 0.28rem;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--paper-2);
}
.notes-tab {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: var(--step--1);
  padding: 0.5rem 1.5rem; border-radius: 999px; color: var(--muted); background: transparent;
  transition: color 0.25s ease, background 0.3s var(--ease);
}
.notes-tab:hover { color: var(--ink); }
.notes-tab.is-active { background: var(--accent); color: #fff; }

.notes-panels { position: relative; }

/* horizontal carousel of video / article cards */
.notes-rail {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding-bottom: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.notes-rail[hidden] { display: none; }
.notes-rail.is-active { animation: notesFade 0.45s var(--ease); }
@keyframes notesFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.notes-rail::-webkit-scrollbar { height: 6px; }
.notes-rail::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; }
.ncard {
  flex: 0 0 300px;
  width: 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--paper-2);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.4s var(--ease);
}
.ncard:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); box-shadow: 0 34px 60px -34px rgba(27,26,23,0.42); }
.ncard__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
.ncard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.ncard:hover .ncard__cover img { transform: scale(1.05); }
.ncard__badge {
  position: absolute; top: 0.7rem; right: 0.7rem;
  font-family: var(--font-body); font-size: calc(var(--step--1) * 0.82); font-weight: 500;
  letter-spacing: 0.04em; padding: 0.28rem 0.62rem; border-radius: 999px;
  background: rgba(253,251,246,0.92); color: var(--ink); backdrop-filter: blur(4px);
}
.ncard__play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(27,26,23,0.5); display: grid; place-items: center; backdrop-filter: blur(3px);
  transition: background 0.3s ease, transform 0.3s var(--ease);
}
.ncard:hover .ncard__play { background: var(--accent); transform: scale(1.08); }
.ncard__play svg { width: 20px; height: 20px; margin-left: 2px; fill: #fff; }
.ncard__cover--topic {
  display: grid; place-items: center; text-align: center; padding: 1rem;
  background: linear-gradient(150deg, var(--accent), var(--accent-ink));
}
.ncard__topic { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); line-height: 1.05; color: #fff; }
.ncard__topic-label { display: block; margin-top: 0.45rem; font-size: var(--step--1); color: rgba(255,255,255,0.85); letter-spacing: 0.02em; }
.ncard__cover--topic .ncard__badge { background: rgba(255,255,255,0.92); }
.ncard__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.2rem 1.25rem; flex: 1; }
.ncard__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-0); line-height: 1.22; color: var(--ink); }
.ncard__desc { font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
.ncard__body .link-arrow { margin-top: auto; padding-top: 0.5rem; align-self: start; }

.writing__more { margin-top: 1.6rem; display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* ============================================================
   LEADERSHIP
   ============================================================ */
.lead__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.lead__lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }
.lead__lead strong { color: var(--ink); font-weight: 500; }
.lead__stats { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   TESTIMONIALS - polaroid
   ============================================================ */
.tmls__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.pola {
  position: relative;
  background: #FFFDF9;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1.6rem 1.4rem 1.4rem;
  box-shadow: 0 24px 44px -30px rgba(27,26,23,0.45);
}
/* gentle sway, like a photo clipped to a thread in mild air; pauses on hover */
.pola {
  transform-origin: 34px -10px;
  animation: polaSway 6.4s ease-in-out infinite;
  will-change: transform;
}
.pola:nth-child(1) { animation-duration: 6.2s; animation-delay: -0.5s; }
.pola:nth-child(2) { animation-duration: 7.6s; animation-delay: -2.7s; }
.pola:nth-child(3) { animation-duration: 6.9s; animation-delay: -4.4s; }
.pola:hover { animation-play-state: paused; }
@keyframes polaSway {
  0%   { transform: rotate(-1.5deg); }
  50%  { transform: rotate(1.3deg); }
  100% { transform: rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pola { animation: none; }
  .pola:nth-child(odd) { transform: rotate(-0.9deg); }
  .pola:nth-child(even) { transform: rotate(0.8deg); }
}
.pola__clip {
  position: absolute; top: -12px; left: 26px;
  width: 16px; height: 40px;
  border: 3px solid #b7b0a2; border-radius: 10px;
  background: transparent;
}
.pola__photo {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--paper-2));
  color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  margin-bottom: 1rem;
}
.pola blockquote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.pola figcaption { font-size: var(--step--1); color: var(--ink); font-weight: 500; }
.pola figcaption span { display: block; color: var(--muted); font-weight: 400; margin-top: 0.15rem; }

/* ============================================================
   FOOTER / CONTACT - Creation of Adam (minimal reach)
   ============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(5rem, 3rem + 6vw, 8rem) var(--gutter) 3rem;
  text-align: center;
  overflow: hidden;
}
.reach {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.reach__side { display: flex; align-items: center; gap: 0.7rem; }
.reach__side--me { transform: translateX(calc((1 - var(--reach, 0)) * -60px)); opacity: calc(0.25 + var(--reach, 0) * 0.75); }
.reach__side--you { transform: translateX(calc((1 - var(--reach, 0)) * 60px)); opacity: calc(0.25 + var(--reach, 0) * 0.75); }
.reach__line { width: clamp(60px, 12vw, 150px); height: 2px; background: var(--ink); }
.reach__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.reach__label { font-family: var(--font-accent); font-style: italic; font-size: var(--step-1); color: var(--muted); }
.reach__spark {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  margin: 0 -5px;
  opacity: var(--reach, 0);
  box-shadow: 0 0 0 calc(var(--reach, 0) * 7px) color-mix(in srgb, var(--accent) 22%, transparent);
}
.footer__kicker { font-family: var(--font-accent); font-style: italic; font-size: var(--step-1); color: var(--muted); }
.footer__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0.8rem auto clamp(2rem, 1.4rem + 2vw, 3rem);
  max-width: 16ch;
}
.footer__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--accent-ink); }
.footer__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  padding: 0.9em 1.8em;
  border-radius: 100px;
  font-size: var(--step-0);
  border: 1px solid var(--ink);
  transition: transform 0.3s var(--ease), background 0.3s ease, color 0.3s ease;
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { transform: translateY(-2px); background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.footer__social {
  display: flex; gap: 1.6rem; justify-content: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.footer__social a { position: relative; }
.footer__social a:hover { color: var(--ink); }
.footer__fine {
  margin-top: 2.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ============================================================
   RESPONSIVE - new sections
   ============================================================ */
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; }
  .case:nth-child(even) .case__media { order: 0; }
  .beyond__grid, .lead__grid { grid-template-columns: 1fr; }
  .ncard { flex-basis: 80vw; width: 80vw; max-width: 320px; }
  .tmls__grid { grid-template-columns: 1fr; }
  .lead__stats { grid-template-columns: 1fr 1fr; }
  .beyond__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .metrics { gap: 1.4rem; }
  .beyond__cards { grid-template-columns: 1fr; }
  .lead__stats { grid-template-columns: 1fr; }
  .footer__social { flex-wrap: wrap; }
}

/* ============================================================
   REDUCED MOTION - new sections
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none !important; }
  .reach__side { transform: none !important; opacity: 1 !important; }
  .reach__spark { opacity: 1 !important; }
}

/* ============================================================
   LOOK SWITCHER (temporary compare tool)
   ============================================================ */
.look-switch {
  position: fixed;
  left: 50%; bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 0.2rem;
  padding: 0.35rem 0.45rem 0.35rem 0.9rem;
  background: color-mix(in srgb, var(--paper-2) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  box-shadow: 0 14px 34px -20px rgba(0,0,0,0.45);
  font-size: var(--step--1);
}
.look-switch__label { color: var(--muted); margin-right: 0.3rem; }
.look-switch a {
  padding: 0.4em 0.95em;
  border-radius: 100px;
  color: var(--ink-soft);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.look-switch a:hover { color: var(--ink); }
.look-switch a.is-active { background: var(--ink); color: var(--paper); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__media { justify-content: flex-start; }
  .tv { max-width: 340px; }
  .nav__links { gap: 1rem; }
  .nav__links a:not(.nav__resume):not(.nav__resume) { display: none; }
  .nav__links .nav__resume { display: inline-block; }
}
@media (max-width: 560px) {
  .hero__title { font-size: clamp(2.6rem, 8vw, 3.4rem); }
  .hero__places { display: block; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   NOTES - TV room (retro CRT + DVD deck + DVD shelf)   [Phase 1]
   ============================================================ */
.tvroom__set { display: flex; flex-direction: column; align-items: center; margin-top: clamp(1.8rem, 1rem + 3vw, 3rem); }

/* --- CRT TV (matches the hero set) --- */
.crt { width: min(92%, 520px); }
.crt__cabinet {
  display: flex; gap: 14px; padding: 16px;
  border-radius: 22px 22px 7px 7px;
  background: linear-gradient(158deg, #dcd6ca 0%, #c3bbac 55%, #b0a897 100%);
  border: 1px solid rgba(27,26,23,0.14);
  box-shadow: 0 34px 64px -34px rgba(27,26,23,0.55), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -4px 8px rgba(27,26,23,0.18);
}
.crt__screen {
  position: relative; flex: 1; aspect-ratio: 4 / 3;
  border-radius: 12px; border: 3px solid #2a2822; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 28%, #26241f 0%, #14130f 68%, #0a0908 100%);
  display: grid; place-items: center;
}
.crt__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 3px); }
.crt__screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(78% 52% at 30% 16%, rgba(255,255,255,0.10), transparent 60%); }
.crt__standby { font-family: var(--font-display); font-size: clamp(0.68rem, 1.4vw, 0.86rem); letter-spacing: 0.2em; text-transform: uppercase; color: #6be08a; text-shadow: 0 0 9px rgba(107,224,138,0.55); animation: crtblink 1.9s steps(2) infinite; }
@keyframes crtblink { 50% { opacity: 0.38; } }
.crt__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

.crt__panel { width: clamp(46px, 12%, 66px); display: flex; flex-direction: column; align-items: center; gap: 11px; padding-top: 4px; }
.crt__brand { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.12em; color: #5c554a; }
.crt__speaker { width: 100%; height: 62px; border-radius: 4px; background: repeating-linear-gradient(180deg, #7c7466 0 2px, #b6ae9f 2px 5px); box-shadow: inset 0 1px 2px rgba(27,26,23,0.35); }
.crt__dial { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efe9dd, #8f8778); box-shadow: inset 0 -2px 3px rgba(27,26,23,0.35), 0 1px 1px rgba(255,255,255,0.5); border: 1px solid rgba(27,26,23,0.18); }
.crt__dial--lg { width: 30px; height: 30px; }
.crt__dial--sm { width: 20px; height: 20px; }

/* --- DVD deck --- */
.deck {
  width: min(80%, 408px); margin-top: 11px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 11px 16px; border-radius: 8px;
  background: linear-gradient(180deg, #3a3a40 0%, #26262b 48%, #191a1e 100%);
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: 0 22px 40px -26px rgba(27,26,23,0.6), inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -2px 4px rgba(0,0,0,0.5);
}
.deck__slot { width: 46px; height: 30px; border-radius: 4px; background: linear-gradient(180deg, #0c0c0e, #17171a); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 2px 5px rgba(0,0,0,0.75); position: relative; }
.deck__slot::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; transform: translateY(-50%); background: #000; border-radius: 2px; }
.deck__display { height: 26px; border-radius: 4px; background: linear-gradient(180deg, #0a1410, #06100c); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 1px 3px rgba(0,0,0,0.8); display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.deck__readout { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; color: #f0a83c; text-shadow: 0 0 6px rgba(240,168,60,0.5); white-space: nowrap; }
.deck__bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(240,168,60,0.15); overflow: hidden; }
.deck__fill { display: block; height: 100%; width: 0%; background: #f0a83c; box-shadow: 0 0 6px rgba(240,168,60,0.6); transition: width 0.4s linear; }
.deck__leds { display: flex; gap: 5px; }
.deck__leds i { width: 6px; height: 6px; border-radius: 50%; background: #35353b; }
.deck__eject { font-family: var(--font-body); font-size: 13px; color: #cfcabf; background: linear-gradient(180deg, #45454c, #2c2c31); border: 1px solid rgba(0,0,0,0.5); border-radius: 6px; padding: 5px 9px; box-shadow: inset 0 1px 1px rgba(255,255,255,0.12); }

/* --- DVD shelf ticker --- */
.shelf { margin-top: clamp(2rem, 1rem + 3vw, 3.4rem); position: relative; overflow-x: clip; overflow-y: visible; }
/* Edge fades as overlays (not a mask) so a lifted card's top / DVD tag is never clipped. */
.shelf::before, .shelf::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; z-index: 6; pointer-events: none; }
.shelf::before { left: 0; background: linear-gradient(90deg, var(--night), rgba(20, 19, 14, 0)); }
.shelf::after { right: 0; background: linear-gradient(270deg, var(--night), rgba(20, 19, 14, 0)); }
.shelf__track { display: flex; gap: 1.5rem; width: max-content; padding: 1.2rem 0; animation: shelfscroll 48s linear infinite; }
.shelf:hover .shelf__track { animation-play-state: paused; }
@keyframes shelfscroll { to { transform: translateX(-50%); } }

.dvd { appearance: none; border: none; background: none; padding: 0; cursor: pointer; flex: 0 0 auto; width: 152px; transform: translateY(0); transition: transform 0.4s var(--ease), filter 0.4s var(--ease), opacity 0.5s var(--ease); }
.dvd:not(.is-loaded):hover { transform: translateY(-20%); filter: drop-shadow(0 18px 26px rgba(27,26,23,0.42)); z-index: 3; }
.dvd:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.dvd__case { display: block; position: relative; aspect-ratio: 3 / 4; border-radius: 4px 8px 8px 4px; overflow: hidden; background: #101018; border: 1px solid rgba(0,0,0,0.4); box-shadow: 0 16px 26px -18px rgba(27,26,23,0.5); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.5s var(--ease); }
.dvd__case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dvd__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; z-index: 2; background: linear-gradient(90deg, rgba(0,0,0,0.65), rgba(0,0,0,0.05)); box-shadow: inset -1px 0 1px rgba(255,255,255,0.12); }
.dvd__tag { position: absolute; top: 8px; right: 8px; z-index: 2; font-family: var(--font-body); font-weight: 600; font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 3px; }
.dvd__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.5rem 0.65rem 0.6rem; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; line-height: 1.18; background: linear-gradient(0deg, rgba(6,6,10,0.94) 22%, rgba(6,6,10,0.0)); }

@media (prefers-reduced-motion: reduce) {
  .shelf__track { animation: none; }
  .shelf { overflow-x: auto; }
  .dvd { transform: none; }
}
@media (max-width: 620px) {
  .crt { width: 100%; }
  .deck { width: min(96%, 360px); }
  .dvd { width: 128px; }
}

/* --- TV room: playback states [Phase 2] --- */
.deck__eject { cursor: pointer; transition: color 0.25s ease, box-shadow 0.25s ease; }
.deck__eject:disabled { opacity: 0.45; cursor: default; }
.deck__eject:not(:disabled):hover { color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 0 0 1px rgba(240,168,60,0.35); }
.deck__leds i { transition: background 0.25s ease, box-shadow 0.25s ease; }
.deck__leds i.is-on { background: #6be08a; box-shadow: 0 0 6px rgba(107,224,138,0.8); }
.deck.is-playing .deck__slot::before { background: #f0a83c; box-shadow: 0 0 6px rgba(240,168,60,0.6); }
.dvd.is-loaded .dvd__case { outline-color: var(--accent); }
.dvd.is-loaded { opacity: 0.55; }
.crt__screen.is-on .crt__standby { display: none; }

/* --- TV room: "pick a DVD" signifier + invite bob --- */
.shelf__hint {
  position: absolute;
  top: -6rem;
  right: 5%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  color: #fff;
  text-align: right;
  pointer-events: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.shelf__hint-text {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem);
  line-height: 1.25;
  max-width: 15ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.shelf__hint-arrow {
  width: clamp(50px, 4.2vw, 66px);
  height: auto;
  margin-top: 0.25rem;
  margin-right: 1.4rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.shelf.is-dismissed .shelf__hint {
  opacity: 0;
  transform: translateY(-8px);
}
@keyframes dvdBob {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-16%); }
  62% { transform: translateY(0); }
}
.dvd--hint .dvd__case { animation: dvdBob 1.7s var(--ease) infinite; }
.dvd--hint:hover .dvd__case,
.shelf.is-dismissed .dvd--hint .dvd__case,
.shelf.is-frozen .dvd--hint .dvd__case { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .dvd--hint .dvd__case { animation: none; }
}
@media (max-width: 620px) {
  .shelf__hint { right: 4%; top: -4.5rem; }
  .shelf__hint-text { font-size: 1rem; max-width: 12ch; }
  .shelf__hint-arrow { width: 52px; margin-right: 0.9rem; }
}

/* --- TV room: disc-flight theatrics [Phase 3] --- */
.shelf.is-frozen .shelf__track { animation-play-state: paused; }
.fly { position: fixed; z-index: 80; pointer-events: none; perspective: 900px; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.fly.is-hover { transform: translateY(-20%); }
.fly.is-lifted { transform: translateY(-80%); }
.fly__case { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fly__back {
  position: absolute; inset: 0; border-radius: 4px 8px 8px 4px;
  background: linear-gradient(145deg, #1b1b22, #0d0d13);
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: 0 24px 40px -20px rgba(27,26,23,0.55);
  display: grid; place-items: center;
}
.fly__disc {
  position: relative; width: 72%; aspect-ratio: 1 / 1; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.28);
}
.fly__disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, rgba(255,255,255,0.4), transparent 22%, rgba(255,255,255,0.18) 48%, transparent 72%, rgba(255,255,255,0.4));
  mix-blend-mode: screen;
}
.fly__disc::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #f7f4ee 0 36%, rgba(255,255,255,0.8) 36% 44%, transparent 44%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28);
}
.fly__disc--solo { position: fixed; z-index: 81; pointer-events: none; }
.fly__cover {
  position: absolute; inset: 0;
  transform-origin: left center; transform: rotateY(0deg);
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1);
  transform-style: preserve-3d;
}
/* Two faces so the flap stays visible as it swings open (like a book cover). */
.fly__cover-front, .fly__cover-inside {
  position: absolute; inset: 0; border-radius: 4px 8px 8px 4px; overflow: hidden;
  backface-visibility: hidden;
}
.fly__cover-inside {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #17171d 0%, #0c0c11 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.55);
}
.fly.is-open .fly__cover { transform: rotateY(-156deg); }
.fly.is-done { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; transform: scale(0.96); }

/* ============================================================
   AFTER WORK - night zone with scroll circle-wipes
   ============================================================ */
:root { --night: #14130E; }

.wipe { height: 150vh; position: relative; }
.wipe__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.wipe__circle {
  grid-area: 1 / 1;
  width: 24vmax; aspect-ratio: 1 / 1; border-radius: 50%;
  transform: scale(0.04);
  will-change: transform;
}
.wipe--night .wipe__circle { background: var(--night); }
.wipe--dawn .wipe__sticky { background: var(--night); }
.wipe--dawn .wipe__circle { background: var(--paper); }
.wipe__label {
  grid-area: 1 / 1; z-index: 2; align-self: center; justify-self: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); letter-spacing: -0.03em;
  color: #F2EFE7; opacity: 0; pointer-events: none;
}
.wipe__label em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: #A9B5FF; }
/* Mobile-only: shorten the night-fall and drop the label nearer the content so the
   empty gap between "After work" and the content shrinks ~60% (desktop untouched). */
@media (max-width: 600px) {
  .wipe--night .wipe__label { align-self: end; padding-bottom: 14vh; }
}

.afterwork__body { background: var(--night); position: relative; }
.afterwork__body .writing { border-top: 0; }
.afterwork__body .eyebrow { color: #8F8B80; }
.afterwork__body .section-title { color: #F2EFE7; }
.afterwork__body .section-title em { color: #A9B5FF; }
.afterwork__body .writing__sub { color: #A29E92; }
.afterwork__body .link-arrow { color: #A9B5FF; }
.afterwork__body .dvd__case { border-color: rgba(255,255,255,0.09); box-shadow: 0 16px 26px -18px rgba(0,0,0,0.85); }
.afterwork__body .crt__cabinet { box-shadow: 0 40px 74px -34px rgba(0,0,0,0.85), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -4px 8px rgba(27,26,23,0.18); }
.afterwork__body .deck { border-color: rgba(255,255,255,0.08); }

@media (prefers-reduced-motion: reduce) {
  .wipe { height: 0; overflow: hidden; }
}

/* --- After-work parts: articles list, leadership, CTAs --- */
.afterwork__body .stat__num { color: #F2EFE7; }
.afterwork__body .stat__label { color: #8F8B80; }
.afterwork__body .lead__lead { color: #A29E92; }
.afterwork__body .lead__lead strong { color: #F2EFE7; }

.wlist { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.1); }
.wrow {
  display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.05rem 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background 0.3s ease;
}
.wrow__tag { font-size: calc(var(--step--1) * 0.82); text-transform: uppercase; letter-spacing: 0.1em; color: #8F8B80; }
.wrow__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-0); line-height: 1.25; color: #F2EFE7; }
.wrow__arrow { color: #A9B5FF; transition: transform 0.3s var(--ease); }
.wrow:hover { background: rgba(255,255,255,0.035); }
.wrow:hover .wrow__arrow { transform: translateX(6px); }

.btn-yt {
  display: inline-flex; align-items: center; gap: 0.65em;
  background: #FF0000; color: #fff;
  font-weight: 500; font-size: var(--step--1);
  padding: 0.82em 1.6em; border-radius: 100px;
  box-shadow: 0 16px 32px -14px rgba(255,0,0,0.5);
  transition: background 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.btn-yt svg { width: 22px; height: 22px; fill: currentColor; }
.btn-yt:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(255,0,0,0.6); }

.btn-ghostlight {
  display: inline-block; padding: 0.8em 1.6em;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 100px;
  color: #F2EFE7; font-weight: 500; font-size: var(--step--1);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease);
}
.btn-ghostlight:hover { background: #F2EFE7; color: var(--night); transform: translateY(-2px); }

.lead-logos { display: flex; align-items: center; gap: 2.2rem; margin-top: 1.7rem; flex-wrap: wrap; }
.logo10k { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.03em; color: #F2EFE7; }
.logo10k b { color: #A9B5FF; }
.logotm { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: #F2EFE7; }
.logotm i {
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(from 24deg, transparent 0 62deg, #E4432F 62deg 360deg);
}

.lead-cta { display: flex; align-items: center; gap: 1.3rem; margin-top: 1.7rem; flex-wrap: wrap; }
.btn-topmate {
  display: inline-block; background: #E4432F; color: #fff;
  padding: 0.82em 1.6em; border-radius: 100px;
  font-weight: 500; font-size: var(--step--1);
  box-shadow: 0 16px 32px -14px rgba(228,67,47,0.55);
  transition: background 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.btn-topmate:hover { background: #c93520; transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(228,67,47,0.6); }
.tm-score { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.tm-score b { font-family: var(--font-accent); font-weight: 500; font-size: 1.5rem; color: #F2EFE7; }
.tm-score i { font-style: normal; color: #F5B301; font-size: 0.78rem; letter-spacing: 0.12em; }
.tm-score em { font-style: normal; color: #8F8B80; font-size: var(--step--1); }
/* Mobile-only: centre the Topmate CTA (like the Medium/YouTube buttons) */
@media (max-width: 600px) {
  .lead-cta { justify-content: center; text-align: center; }
}

.tm-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.4rem; }
.tm-quote {
  margin: 0; padding: 1.4rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  background: rgba(255,255,255,0.03);
  font-family: var(--font-accent); font-style: italic;
  font-size: var(--step-0); line-height: 1.5; color: #E9E5DA;
}
.tm-quote cite { display: block; margin-top: 0.85rem; font-family: var(--font-body); font-style: normal; font-size: var(--step--1); color: #8F8B80; }

@media (max-width: 720px) {
  .wrow { grid-template-columns: 1fr auto; }
  .wrow__tag { display: none; }
  .tm-quotes { grid-template-columns: 1fr; }
}
.stat__unit--star { color: #F5B301; }

/* --- Polish round: water quote, centered CTAs, leadership tweaks --- */
/* Water-touch quote */
.pullquote { position: relative; }

/* Centered CTAs in the night zone */
.afterwork__body .writing__more { display: flex; justify-content: center; }

/* Medium CTA: white glow twin of the YouTube one */
.btn-medium {
  display: inline-flex; align-items: center; gap: 0.65em;
  background: #fff; color: var(--night);
  font-weight: 500; font-size: var(--step--1);
  padding: 0.82em 1.6em; border-radius: 100px;
  box-shadow: 0 16px 32px -14px rgba(255,255,255,0.45);
  transition: background 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.btn-medium svg { width: 22px; height: 22px; fill: currentColor; }
.btn-medium:hover { background: #efece3; transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(255,255,255,0.55); }

/* Leadership: tighter head, white stat units, starred quotes */
#leadership .section-head { margin-bottom: 1.4rem; }
.afterwork__body .stat__unit { color: #F2EFE7; }
.afterwork__body .stat__unit--star, .stat__unit--star { color: #F5B301; }
.tm-quote__stars { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--step--1); letter-spacing: 0.06em; color: #F5B301; margin-bottom: 0.55rem; }

/* --- Rhythm pass: tighter night zone --- */
.pullquote { padding-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
.wipe { height: 135vh; }
@media (max-width: 600px) { .wipe { height: 115vh; } }
.afterwork__body .writing { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.afterwork__body #writing { padding-top: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem); }

/* --- Articles: card grid (dark) --- */
.agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
.acard {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.1rem 1.1rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 16px;
  background: rgba(255,255,255,0.03);
  transition: transform 0.4s var(--ease), border-color 0.3s ease, background 0.3s ease;
}
.acard:hover { transform: translateY(-6px); border-color: rgba(169,181,255,0.4); background: rgba(255,255,255,0.05); }
.acard__thumb {
  aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  display: block;
  background: #1A1922;
  border: 1px solid rgba(255,255,255,0.08);
}
.acard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.acard:hover .acard__thumb img { transform: scale(1.045); }
.acard__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); line-height: 1.25; color: #F2EFE7; margin-top: 0.35rem; }
.acard__desc { font-size: var(--step--1); line-height: 1.5; color: #A29E92; margin: 0; }
.acard__more { margin-top: auto; padding-top: 0.5rem; font-size: var(--step--1); font-weight: 500; color: #A9B5FF; }
@media (max-width: 900px) { .agrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .agrid { grid-template-columns: 1fr; } }

/* --- Footer joins the night --- */
.footer { background: var(--night); border-top: 0; }
.footer .reach__line { background: #F2EFE7; }
.footer .reach__label { color: #8F8B80; }
.footer__kicker { color: #8F8B80; }
.footer__title { color: #F2EFE7; }
.footer__title em { color: #A9B5FF; }
.footer .btn--solid { background: #F2EFE7; border-color: #F2EFE7; color: var(--night); }
.footer .btn--solid:hover { background: #fff; border-color: #fff; transform: translateY(-2px); }
.footer .btn--ghost { color: #F2EFE7; border-color: rgba(255,255,255,0.4); }
.footer .btn--ghost:hover { background: #F2EFE7; color: var(--night); }
.footer__social { color: #A29E92; }
.footer__social a:hover { color: #F2EFE7; }
.footer__fine { color: #8F8B80; }

/* --- Quote: light glint sweeps across on hover (clean + simple) --- */
.pullquote__text {
  background: linear-gradient(110deg, var(--ink) 0%, var(--ink) 42%, var(--accent) 50%, var(--ink) 58%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.2s var(--ease);
}
.pullquote__text:hover { background-position: 0% 0; }
.pullquote__text em { -webkit-text-fill-color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  .pullquote__text { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
}

/* --- Footer: Creation of Adam hands (scroll-driven) --- */
.adam {
  position: relative;
  width: min(100%, 680px);
  margin: 0 auto clamp(2.8rem, 2rem + 3vw, 4.5rem);
  aspect-ratio: 1000 / 380;
  background: var(--accent);
  border-radius: 22px;
  overflow: hidden;
}
.adam__hand { position: absolute; width: 52%; height: auto; will-change: transform; }
.adam__hand--left  { left: 0;  top: 44.2%; transform: translate(calc(-36% + var(--reach, 0) * 33%), -50%); }
.adam__hand--right { right: 0; top: 42.6%; transform: translate(calc(36% - var(--reach, 0) * 31.3%), -50%); }

/* ============================================================
   WRITING - the filing drawer
   ============================================================ */
.filedrawer { position: relative; height: 615px; margin-top: 1.4rem; }
.filedrawer__files { position: absolute; inset: 0; overflow: hidden; }
.file {
  position: absolute;
  bottom: -100px;
  left: calc(var(--fi) * (100% - 300px) / 8);
  width: 300px; height: 408px;
  z-index: calc(1 + var(--fi));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Realistic pick-up: the file rises slowly while still BEHIND the drawer front,
   lifts until its bottom clears the front's top edge, then settles down a touch
   IN FRONT of the drawer (fully visible). The z-index flip happens at the peak,
   which a plain transition can't do, hence the keyframes. */
.file:hover, .file:focus-visible, .file.is-out {
  animation: fileOut 0.8s forwards;
}
@keyframes fileOut {
  0%   { transform: translateY(0);      z-index: 20; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  62%  { transform: translateY(-305px); z-index: 20; animation-timing-function: cubic-bezier(0.33, 0, 0.25, 1); }
  64%  { z-index: 45; }
  100% { transform: translateY(-268px); z-index: 45; }
}
/* Reverse pick-up: mirror of fileOut. Undo the settle (lift back up, still in front),
   flip behind the front at the peak, then sink back down into the drawer.
   Triggered by JS (adds .is-in on mouse-leave) so it doesn't fire on page load. */
.file.is-in { animation: fileIn 0.8s forwards; }
@keyframes fileIn {
  0%   { transform: translateY(-268px); z-index: 45; animation-timing-function: cubic-bezier(0.33, 0, 0.25, 1); }
  38%  { transform: translateY(-305px); z-index: 45; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  40%  { z-index: 20; }
  /* Re-join the natural stacking order mid-descent (while still moving) so the
     file does not visibly pop behind its neighbours after it has parked. */
  68%  { z-index: 20; }
  69%  { z-index: calc(1 + var(--fi)); }
  100% { transform: translateY(0);      z-index: calc(1 + var(--fi)); }
}
.file__tab {
  position: absolute; top: 0; height: 34px;
  display: inline-flex; align-items: center;
  padding: 0 16px;
  border-radius: 9px 9px 0 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--step--1) * 0.88);
  letter-spacing: 0.02em; white-space: nowrap;
  color: #1B1A17;
  background: var(--tabc, #F6C6D8);
  box-shadow: inset 0 -3px 5px -3px rgba(0,0,0,0.28);
}
.file:nth-child(6n+1) { --tabc: #F6C6D8; }
.file:nth-child(6n+2) { --tabc: #CDB4F6; }
.file:nth-child(6n+3) { --tabc: #BFE3C0; }
.file:nth-child(6n+4) { --tabc: #BFD8F6; }
.file:nth-child(6n+5) { --tabc: #F6D8B4; }
.file:nth-child(6n+6) { --tabc: #E6E2B8; }
.file:nth-child(3n+1) .file__tab { left: 6px; }
.file:nth-child(3n+2) .file__tab { left: 34%; }
.file:nth-child(3n)   .file__tab { right: 6px; }
.file__body {
  position: absolute; top: 33px; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.9rem 0.95rem 1rem;
  background: linear-gradient(180deg, #232219 0%, #1C1B14 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 3px solid var(--tabc, #F6C6D8);
  border-radius: 12px;
  box-shadow: 0 -14px 30px -18px rgba(0,0,0,0.85);
}
.file__thumb {
  aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: block;
  background: #14130E; border: 1px solid rgba(255,255,255,0.07);
}
.file__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--step-0) * 0.94); line-height: 1.25; color: #F2EFE7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.file__desc {
  font-size: var(--step--1); line-height: 1.45; color: #A29E92;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.file__more { margin-top: auto; font-size: var(--step--1); font-weight: 500; color: #A9B5FF; }

.filedrawer__front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  z-index: 30;
  border-radius: 18px;
  background: linear-gradient(180deg, #2A2921 0%, #1D1C15 26%, #16150F 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 14px 22px -16px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.12), 0 34px 60px -34px rgba(0,0,0,0.9);
}
.filedrawer__handle {
  position: absolute; left: 50%; top: 46%; transform: translateX(-50%);
  width: 150px; height: 16px; border-radius: 100px;
  background: linear-gradient(180deg, #6B675C, #3C3930 70%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.35);
}
.filedrawer__plate {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  padding: 0.45em 1.1em;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 6px;
  background: #201F18;
  font-size: calc(var(--step--1) * 0.8); letter-spacing: 0.18em; color: #8F8B80;
}

@media (max-width: 900px), (hover: none) {
  /* Vertical file drawer: a stacked list of folders; tap a slip to open one. */
  .filedrawer { height: auto; }
  .filedrawer__files {
    position: static; overflow: visible;
    display: flex; flex-direction: column; gap: 0.6rem;
  }
  .file {
    position: static; width: auto; height: auto;
    transition: none; animation: none; display: block;
    border: 1px solid rgba(255,255,255,0.09);
    border-left: 4px solid var(--tabc, #F6C6D8);
    border-radius: 10px; overflow: hidden; z-index: auto;
    background: linear-gradient(180deg, #232219 0%, #1C1B14 100%);
  }
  .file:hover, .file:focus-visible, .file.is-out, .file.is-in { transform: none; animation: none; }
  /* the slip: a full-width tappable header (colour chip + category + toggle) */
  .file__tab {
    position: static; display: flex; align-items: center; gap: 0.6rem;
    width: auto; height: auto; margin: 0;
    padding: 0.85rem 1rem; border-radius: 0; box-shadow: none;
    background: transparent; color: #F2EFE7;
    font-size: var(--step--1); letter-spacing: 0.01em; white-space: normal;
  }
  .file__tab::before {
    content: ""; width: 9px; height: 9px; border-radius: 2px;
    background: var(--tabc, #F6C6D8); flex: 0 0 auto;
  }
  .file__tab::after {
    content: "+"; margin-left: auto; font-size: 1.25em; line-height: 1;
    color: #8F8B80; transition: color 0.25s ease;
  }
  .file.is-peek .file__tab::after { content: "\2013"; color: #F2EFE7; }
  /* body collapsed until the slip is tapped */
  .file__body {
    position: static; border: none; border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 0; box-shadow: none;
    max-height: 0; overflow: hidden; opacity: 0; padding: 0 1rem;
    transition: max-height 0.42s ease, opacity 0.3s ease, padding 0.42s ease;
  }
  .file.is-peek .file__body {
    max-height: 620px; opacity: 1; padding: 0.9rem 1rem 1.1rem;
  }
  .filedrawer__front { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .file { transition: none; }
  .file:hover, .file:focus-visible, .file.is-out { animation: none; transform: translateY(-268px); z-index: 45; }
  .file.is-in { animation: none; }
}

/* ============================================================
   Manuscript desk — writing section, desktop only (>=900px).
   Below 900px the original filing drawer remains untouched.
   ============================================================ */
.writing__sub--desk{display:none}
@media (min-width:900px){
  .writing__sub--drawer{display:none}
  .writing__sub--desk{display:block}
}
.dsk{position:relative;margin-top:2.2rem}
.dsk__lamp{display:none}
@media (min-width:900px){
  .dsk{aspect-ratio:1150/700;border-radius:22px;overflow:hidden;
    background:linear-gradient(180deg,#191713,#15130f 60%,#121110);border:1px solid #2a2722}
}
.dsk__stage{position:absolute;top:0;left:0;width:1150px;height:700px;transform-origin:0 0;--lx:816px;--ly:248px}
.dsk__glow,.dsk__shade{position:absolute;inset:0;pointer-events:none}
.dsk,.dsk .dsk-ms{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><defs> <linearGradient id='gBody' x1='0' y1='0' x2='1' y2='0'> <stop offset='0' stop-color='%236a6e75'/><stop offset='.3' stop-color='%23484c52'/> <stop offset='.7' stop-color='%2334373c'/><stop offset='1' stop-color='%23232529'/> </linearGradient> <linearGradient id='gTail' x1='0' y1='0' x2='1' y2='0'> <stop offset='0' stop-color='%2353575d'/><stop offset='.6' stop-color='%23303338'/><stop offset='1' stop-color='%231f2124'/> </linearGradient> <radialGradient id='gRim' cx='.32' cy='.25' r='1'> <stop offset='0' stop-color='%2363676e'/><stop offset='.45' stop-color='%233d4045'/> <stop offset='.8' stop-color='%232b2d31'/><stop offset='1' stop-color='%23212327'/> </radialGradient> <radialGradient id='gGlass' cx='.4' cy='.32' r='.85'> <stop offset='0' stop-color='%23fffef7'/><stop offset='.45' stop-color='%23ffeec4'/> <stop offset='.8' stop-color='%23f4cd82'/><stop offset='1' stop-color='%23dfa952'/> </radialGradient> <radialGradient id='gBtn' cx='.38' cy='.3' r='.9'> <stop offset='0' stop-color='%23f2a659'/><stop offset='.6' stop-color='%23c87424'/><stop offset='1' stop-color='%2395511a'/> </radialGradient> <linearGradient id='gGlare' x1='0' y1='0' x2='0' y2='1'> <stop offset='0' stop-color='%232a231a' stop-opacity='.5'/><stop offset='.45' stop-color='%232a231a' stop-opacity='0'/> </linearGradient> <filter id='sh' x='-40%25' y='-40%25' width='180%25' height='180%25'> <feDropShadow dx='0.4' dy='1.1' stdDeviation='1' flood-color='%23000' flood-opacity='0.4'/> </filter> </defs> <g transform='rotate(90 20 20)' filter='url(%23sh)'> <g transform='translate(20 20) scale(1.12) translate(-20 -20)'> <rect x='17' y='3.6' width='6' height='4' rx='1.9' fill='url(%23gTail)'/> <ellipse cx='18.6' cy='4.6' rx='1.1' ry='.5' fill='%238a8f96' opacity='.4'/> <rect x='15.5' y='6' width='9' height='12.6' rx='4.4' fill='url(%23gBody)'/> <line x1='17.6' y1='8' x2='17.6' y2='16.6' stroke='%2324262a' stroke-width='.8' opacity='.55' stroke-linecap='round'/> <line x1='19.6' y1='8.4' x2='19.6' y2='17' stroke='%2324262a' stroke-width='.8' opacity='.55' stroke-linecap='round'/> <line x1='21.6' y1='8' x2='21.6' y2='16.6' stroke='%2324262a' stroke-width='.8' opacity='.45' stroke-linecap='round'/> <rect x='16.4' y='7' width='1.1' height='10.4' rx='.55' fill='%23ffffff' opacity='.22'/> <rect x='23.2' y='7.4' width='.7' height='9.6' rx='.35' fill='%239aa0a8' opacity='.25'/> <path d='M15.5 17.5 C15.5 21 11.4 22.6 9.8 25.8 L30.2 25.8 C28.6 22.6 24.5 21 24.5 17.5 Z' fill='url(%23gBody)'/> <path d='M16.2 18 C16 20.6 13.4 22.4 12 25 L14 25 C15.2 22.2 17 20.4 17.1 18 Z' fill='%23ffffff' opacity='.14'/> <ellipse cx='17.6' cy='21.4' rx='2.5' ry='1.9' fill='%231c1e21' opacity='.5'/> <rect x='15.5' y='19.4' width='3.9' height='3.2' rx='1.2' fill='url(%23gBtn)'/> <rect x='16.1' y='19.9' width='2' height='1' rx='.5' fill='%23ffd9a8' opacity='.7'/> <ellipse cx='20' cy='27.4' rx='10.9' ry='6.6' fill='url(%23gRim)'/> <ellipse cx='19.8' cy='27.8' rx='9' ry='5.2' fill='%23212327'/> <ellipse cx='19.8' cy='27.9' rx='8.5' ry='4.85' fill='%237a6a4a'/> <ellipse cx='19.8' cy='28' rx='8' ry='4.5' fill='url(%23gGlass)'/> <ellipse cx='19.8' cy='28' rx='8' ry='4.5' fill='url(%23gGlare)'/> <ellipse cx='16.6' cy='26.6' rx='2.6' ry='1.1' fill='%23ffffff' opacity='.85' transform='rotate(-18 16.6 26.6)'/> <path d='M10.4 24.9 C13 22.9 27 22.9 29.6 24.9 C26 23.3 14 23.3 10.4 24.9 Z' fill='%23ffffff' opacity='.18'/> </g> </g></svg>") 11 20, pointer}
.dsk__glow{z-index:0;background:radial-gradient(640px 500px at var(--lx) var(--ly),rgba(255,214,150,.21),rgba(255,214,150,.05) 55%,transparent 72%)}
.dsk__shade{z-index:2;background:radial-gradient(640px 500px at var(--lx) var(--ly),transparent 40%,rgba(0,0,0,.46) 78%,rgba(0,0,0,.62))}
.dsk-ms{position:absolute;width:252px;display:block;text-decoration:none;
  background:linear-gradient(180deg,#F8F5EF,#F3EFE6);color:var(--ink);border-radius:3px;
  padding:18px 18px 14px;box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:1;
  transform:rotate(var(--r,0deg));opacity:1;filter:brightness(.55) saturate(.92);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.dsk-ms.on,.dsk-ms:focus-visible{z-index:3;opacity:1;filter:none;outline:none;
  transform:rotate(calc(var(--r,0deg)*.3)) scale(1.06);
  box-shadow:0 26px 60px rgba(0,0,0,.66),0 0 0 1px rgba(255,214,150,.25),0 0 90px rgba(255,214,150,.13)}
.dsk-ms__head{font-family:"American Typewriter","Courier New",Courier,monospace;font-size:9.5px;letter-spacing:.13em;color:#8a8478;text-transform:uppercase;
  display:flex;justify-content:space-between;border-bottom:1px solid #E0D9CB;padding-bottom:7px;margin-bottom:10px}
.dsk-ms__t{font-family:"American Typewriter","Courier New",Courier,monospace;font-weight:700;font-size:13.5px;line-height:1.35;letter-spacing:.01em;text-transform:uppercase;margin:0 0 9px}
.dsk-ms__body{font-family:"American Typewriter","Courier New",Courier,monospace;font-size:11.5px;line-height:1.65;color:#3d382f;margin:0 0 6px}
.dsk-ms__body s{text-decoration-color:#b4443a;text-decoration-thickness:1.6px}
.dsk-ms__body .dsk-circ{text-decoration:underline wavy #b4443a 1px;text-underline-offset:3px}
.dsk-ms__pg{font-family:"American Typewriter","Courier New",Courier,monospace;font-size:9px;color:#a29a8b;text-align:center;margin:8px 0 0}
.dsk-att{position:absolute;top:-26px;right:-20px;width:104px;transform:rotate(6deg);z-index:4}
.dsk-att img{width:100%;height:78px;object-fit:cover;display:block;border:4px solid #fff;border-bottom-width:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.45)}
.dsk-att--print img{border:3px solid #fbf9f4;border-radius:2px;height:70px;filter:saturate(.85)}
.dsk-att--l{right:auto;left:-22px;transform:rotate(-7deg)}
.dsk-clip{position:absolute;top:-13px;left:12px;width:15px;height:34px;z-index:5}
.dsk-clip path{fill:none;stroke:#9aa0a8;stroke-width:2;stroke-linecap:round}
.dsk-ms.on .dsk-att img{box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 40px rgba(255,214,150,.15)}
.dsk-stamp{display:block;width:max-content;margin:14px 2px 0 auto;
  font-family:var(--font-display);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:#16228F;
  border:2px solid #16228F;border-radius:4px;padding:5px 8px;
  opacity:0;transform:rotate(-6deg) scale(1.25);
  transition:opacity .28s var(--ease) .1s,transform .28s var(--ease) .1s;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40'><filter id='n'><feTurbulence baseFrequency='.7' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .82 0'/></filter><rect width='120' height='40' filter='url(%23n)'/></svg>");
  -webkit-mask-size:cover}
.dsk-ms.on .dsk-stamp,.dsk-ms:focus-visible .dsk-stamp{opacity:.92;transform:rotate(-6deg) scale(1)}
.dsk-ms.on:hover{transform:rotate(calc(var(--r,0deg)*.3)) scale(1.075)}
.dsk-ms.on:hover .dsk-ms__t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:#16228F}
.dsk-ms.on:hover .dsk-stamp{opacity:1}
@media (hover:none) and (min-width:900px){
  .dsk-ms{filter:brightness(.9) saturate(.96)}
}
@media (prefers-reduced-motion:reduce){
  .dsk-ms,.dsk-stamp{transition:none}
}

/* Manuscript desk, mobile (<900px): the drafts sit as one bundle
   directly on the page. Flick the top draft either way and it tucks
   under the pile; the chevrons step through; tap opens the article. */
@media (max-width:899.98px){
  .dsk{padding:26px 0 4px}
  .dsk::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(closest-side at 50% 42%,rgba(255,214,150,.13),rgba(255,214,150,.04) 55%,transparent 78%)}
  .dsk__lamp,.dsk__glow,.dsk__shade{display:none}
  .dsk__stage{position:relative;width:auto;transform:none!important;z-index:1;touch-action:pan-y}
  .dsk-ms{position:absolute!important;left:50%!important;top:0!important;
    width:min(88vw,340px)!important;margin-left:calc(min(88vw,340px)/-2);
    transition:transform .3s var(--ease),filter .3s var(--ease),box-shadow .3s var(--ease);will-change:transform}
  .dsk-ms.dragging{transition:none}
  .dsk-ms__t{padding-right:62px}
  .dsk-att{width:84px;top:-20px;right:-8px}
  .dsk-att--l{left:auto;right:-8px;transform:rotate(6deg)}
  .dsk-att img{height:62px;border-width:3px;border-bottom-width:11px}
  .dsk-att--print img{height:58px}
  .dsk__deck{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;position:relative;z-index:1}
  .dsk__deck button{background:none;border:1px solid #3a362e;color:#a29a8b;width:34px;height:34px;border-radius:50%;
    font:inherit;font-size:16px;line-height:1;cursor:pointer;transition:background .2s;padding:0}
  .dsk__deck button:active{background:#2a2722}
  .dsk__count{font-family:"American Typewriter","Courier New",Courier,monospace;font-size:12px;color:#a29a8b;letter-spacing:.1em;min-width:44px;text-align:center}
  @keyframes dskNudge{0%,100%{transform:none}30%{transform:translateX(-16px) rotate(-1.6deg)}60%{transform:translateX(5px) rotate(.5deg)}}
  .dsk-ms.dsknudge{animation:dskNudge 1.1s var(--ease) .2s 1}
}
@media (min-width:900px){
  .dsk__deck{display:none}
}