/* ============================================================
   KACHI UKWUEZE · Portfolio
   Bold minimal. Paper ground, ink type, one hot accent.
   ============================================================ */

:root {
  --paper: #fbfaf6;
  --paper-2: #f0eee6;
  --white: #ffffff;
  --ink: #0f0f0e;
  --ink-2: #3a3934;
  --mute: #66645c;
  --line: rgba(15, 15, 14, 0.14);
  --accent: #ff4d1f;
  --accent-ink: #c8320d;
  --on-dark: rgba(251, 250, 246, 0.72);
  --on-dark-line: rgba(251, 250, 246, 0.2);
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 1120px;
  --pad: clamp(20px, 5vw, 56px);
  --r: 24px;
  --nav-h: 64px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lb-open { overflow: hidden; }

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

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, footer :focus-visible, .lightbox :focus-visible { outline-color: var(--accent); }

.skip {
  position: absolute; left: 16px; top: -70px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  letter-spacing: -0.035em; line-height: 1.02;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -0.045em; }
h2 { font-size: clamp(1.7rem, 2.7vw, 2.3rem); line-height: 0.98; letter-spacing: -0.04em; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }

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

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 28px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }

.lede { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.45; max-width: 44ch; color: var(--ink-2); }

.section-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px;
  border-top: 2px solid var(--ink); padding-top: 22px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.section-num { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); flex: none; white-space: nowrap; }
.dark .section-head { border-top-color: var(--paper); }
.dark .section-num { color: var(--paper); }

@media (max-width: 560px) { .section-head { flex-direction: column; } }

section { padding-block: clamp(56px, 8vw, 92px); }
.tint { background: var(--paper-2); }
.dark { background: var(--ink); color: var(--on-dark); }
.dark h2, .dark h3 { color: var(--paper); }

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(251, 250, 246, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wordmark { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.03em; white-space: nowrap; }
.wordmark b { color: var(--accent); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); list-style: none; }
.nav-links a { color: var(--ink); font-size: 0.95rem; font-weight: 500; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size 0.25s; padding-bottom: 3px; }
.nav-links a:hover { background-size: 100% 2px; }
.nav-links a.nav-cta {
  background: var(--ink); color: var(--paper); padding: 11px 22px; border-radius: 999px; font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}
.nav-links a.nav-cta:hover { background: var(--accent); color: var(--ink); }

.menu-btn {
  display: none; position: relative; flex: none; width: 46px; height: 46px; padding: 0;
  background: none; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink); cursor: pointer;
}
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after {
  position: absolute; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.menu-btn .bars { left: 50%; top: 50%; margin: -1px 0 0 -9px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; left: 0; top: 0; }
.menu-btn .bars::before { transform: translateY(-6px); }
.menu-btn .bars::after { transform: translateY(6px); }
.menu-btn[aria-expanded="true"] .bars { background: transparent; }
.menu-btn[aria-expanded="true"] .bars::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--pad) 26px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: 0; padding-top: 18px; }
  .nav-links a { display: block; padding: 15px 0; font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; background-image: none; }
  .nav-links a.nav-cta { display: inline-block; font-family: var(--sans); font-size: 1rem; padding: 14px 26px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-family: var(--sans); font-weight: 600; font-size: 0.97rem;
  padding: 12px 26px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); transition: transform 0.15s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.text-link {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
  font-weight: 600; border-bottom: 2px solid var(--accent); padding-bottom: 3px; transition: color 0.2s;
}
.text-link:hover { color: var(--accent-ink); }
.text-link .arr { transition: transform 0.2s; }
.text-link:hover .arr { transform: translateX(5px); }

/* ---------- Hero ---------- */

.hero { padding-top: calc(var(--nav-h) + clamp(32px, 5vw, 60px)); padding-bottom: clamp(48px, 6vw, 72px); }
.hero h1 { max-width: 18ch; margin-bottom: 20px; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.hero-photo { margin-right: 12px; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; box-shadow: 12px 12px 0 var(--accent); }
.hero-caption { margin-top: 28px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); font-weight: 500; }

.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink); max-width: 34em; margin-bottom: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.client-strip { margin-top: clamp(44px, 6vw, 72px); border-top: 2px solid var(--ink); padding-top: 20px; }
.client-strip p { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-bottom: 18px; }
.client-strip ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.client-strip li {
  font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink);
  padding: 4px 22px 4px 0;
}
.client-strip li + li { border-left: 1px solid var(--line); padding-left: 22px; }

@media (max-width: 900px) {
  .client-strip ul { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .client-strip li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { max-width: 300px; }
}
@media (max-width: 480px) {
  .client-strip ul { grid-template-columns: 1fr; gap: 14px; }
  .client-strip li, .client-strip li + li { border-left: 0; padding-left: 0; }
}

/* ---------- Video ---------- */

.video-grid { max-width: 760px; margin: 0 auto; text-align: center; }
.video-frame { border-radius: 20px; overflow: hidden; background: #000; }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; }
.video-note { color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; max-width: 52ch; margin: 18px auto 0; }

/* ---------- Work ---------- */

.case {
  border-radius: 28px; padding: clamp(24px, 3.5vw, 44px); margin-bottom: 20px;
  display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px);
}
.case-feature { background: var(--ink); color: var(--on-dark); }
.case-light { background: var(--paper-2); }
.case-tag { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent-ink); margin-bottom: 18px; }
.case-feature .case-tag { color: var(--accent); }
.case h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.1; max-width: 26ch; margin-bottom: 16px; }
.case-feature h3 { color: var(--paper); }
.case-body p { max-width: 64ch; margin-bottom: 20px; font-size: 1rem; }
.case-feature .text-link { color: var(--paper); }
.case-feature .text-link:hover { color: var(--accent); }

.case-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; border-top: 1px solid var(--line); padding-top: 22px; }
.case-feature .case-stats { border-top-color: var(--on-dark-line); }
.case-stats strong { display: block; font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--accent-ink); margin-bottom: 6px; }
.case-feature .case-stats strong { color: var(--accent); }
.case-stats span { display: block; font-size: 0.9rem; line-height: 1.4; color: var(--mute); max-width: 22ch; }
.case-feature .case-stats span { color: var(--on-dark); }

@media (max-width: 900px) { .case-stats { grid-template-columns: 1fr 1fr; } }

.mini-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 32px 28px; margin-top: clamp(36px, 5vw, 56px); }
.mini-case { border-top: 2px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.mini-case .case-tag { margin-bottom: 0; }
.mini-case h4 { font-size: 1.15rem; line-height: 1.1; }
.mini-case p { color: var(--mute); font-size: 0.97rem; flex: 1; }
.mini-case blockquote { font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.mini-case blockquote::before { content: ""; display: block; width: 28px; height: 4px; background: var(--accent); border-radius: 2px; margin-bottom: 14px; }

/* ---------- Services ---------- */

.service-list { list-style: none; border-top: 2px solid var(--ink); }
.service-list li { border-bottom: 1px solid var(--line); }
.service-row {
  display: grid; grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px); padding: clamp(20px, 3vw, 30px) 0; align-items: start;
}
.service-row .num { font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--accent-ink); padding-top: 0.7em; }
.service-row h3 { transition: color 0.2s; }
.service-list li:hover .service-row h3 { color: var(--accent-ink); }
.service-row p { color: var(--ink-2); max-width: 48ch; padding-top: 0.35em; }

@media (max-width: 900px) {
  .service-row { grid-template-columns: 48px 1fr; }
  .service-row p { grid-column: 2; padding-top: 0; }
}

/* ---------- About ---------- */

.about-statement { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); max-width: 26ch; margin-bottom: clamp(28px, 4vw, 44px); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.about-grid .portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.about-copy p { margin-bottom: 20px; max-width: 58ch; }
.about-facts { list-style: none; margin-top: 36px; border-top: 2px solid var(--ink); }
.about-facts li { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 0.97rem; }
.about-facts .k { color: var(--mute); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding-top: 0.2em; flex: none; }
.about-facts .v { color: var(--ink); font-weight: 500; text-align: right; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .portrait { max-width: 460px; }
}

/* ---------- Quote band ---------- */

.quote-band { background: var(--accent); }
.pull-quote { max-width: 860px; }
.pull-quote blockquote { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); }
.pull-quote blockquote::before { content: "\201C"; }
.pull-quote blockquote::after { content: "\201D"; }
.pull-quote cite { display: block; margin-top: 22px; font-style: normal; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }

/* ---------- Proof wall ---------- */

.section-lede { margin-bottom: clamp(24px, 3.5vw, 36px); }

.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proof-item {
  display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  padding: 0; width: 100%; cursor: zoom-in; transition: border-color 0.2s, transform 0.2s;
}
.proof-item:hover { border-color: var(--ink); transform: translateY(-3px); }
.proof-item img, .proof-item video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--paper-2); }
.proof-video { cursor: default; }
.proof-video:hover { transform: none; border-color: var(--line); }
.proof-video video { object-fit: contain; background: #000; }
.proof-item figcaption, .proof-cap {
  display: block; flex: 1; padding: 16px 18px 20px; font-size: 0.88rem; line-height: 1.4; color: var(--ink-2);
  border-top: 1px solid var(--line); width: 100%;
}

@media (max-width: 1000px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .proof-grid { grid-template-columns: 1fr; } }

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(15, 15, 14, 0.94);
  display: none; align-items: center; justify-content: center; padding: 4vw;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(92vw, 1000px); max-height: 86vh; object-fit: contain; border-radius: 12px; }
.lightbox-close {
  position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); color: var(--ink); border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer;
}

/* ---------- Contact ---------- */

.dark .lede { color: var(--on-dark); }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card {
  border: 1.5px solid var(--on-dark-line); border-radius: 20px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px; min-height: 210px;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.contact-card:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-4px); }
.contact-card .cc-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.contact-card .cc-title { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.1; color: var(--paper); }
.contact-card p { color: var(--on-dark); font-size: 0.97rem; flex: 1; }
.contact-card .cc-go { color: var(--paper); font-weight: 600; overflow-wrap: anywhere; }
.contact-card:hover .cc-label, .contact-card:hover .cc-title, .contact-card:hover p, .contact-card:hover .cc-go { color: var(--ink); }

@media (max-width: 860px) { .contact-cards { grid-template-columns: 1fr; } .contact-card { min-height: 0; } }

.contact-note { margin-top: 28px; color: var(--on-dark); font-size: 0.97rem; max-width: 60ch; }

/* ---------- Footer ---------- */

footer { background: var(--ink); color: var(--on-dark); padding: clamp(20px, 3vw, 36px) 0 32px; }
footer a { color: var(--paper); }
footer a:hover { color: var(--accent); }
.foot-mega {
  display: block; font-family: var(--display); font-weight: 700; letter-spacing: -0.05em; line-height: 1;
  font-size: clamp(2rem, 6.5vw, 4rem); color: var(--paper); white-space: nowrap; margin-bottom: clamp(20px, 3vw, 32px);
}
.foot-mega b { color: var(--accent); }
footer a.foot-mega:hover { color: var(--paper); }
.foot { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--on-dark-line); padding: 26px var(--pad) 28px; }
.foot-left p { font-size: 0.95rem; max-width: 36ch; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-links a { font-size: 0.95rem; }
.foot-base { border-top: 1px solid var(--on-dark-line); padding-top: 24px; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; }
.foot + .foot-base { border-top: 0; padding-top: 0; }

/* ---------- Project pages ---------- */

.proj-hero { padding-top: calc(var(--nav-h) + clamp(36px, 7vh, 80px)); padding-bottom: clamp(40px, 7vh, 72px); }
.proj-hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); line-height: 1; letter-spacing: -0.045em; }
.breadcrumb { margin-bottom: 28px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 0.9rem; font-weight: 500; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--mute); }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--line); color: rgba(15, 15, 14, 0.35); }
.breadcrumb a { color: var(--ink-2); border-bottom: 1px solid var(--line); transition: color 0.2s, border-color 0.2s; }
.breadcrumb a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
.proj-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--ink); }
.proj-meta div { font-size: 1rem; font-weight: 600; color: var(--ink); }
.proj-meta .k { color: var(--mute); display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.proj-meta a { border-bottom: 2px solid var(--accent); }

.proj-video { padding-top: 0; padding-bottom: clamp(32px, 5vw, 56px); }
.proj-video-grid { max-width: 760px; margin: 0 auto; text-align: center; }
.embed-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.loom-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: linear-gradient(135deg, #24221e, var(--ink)); }
.loom-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loom-play .play-icon { display: none; width: 76px; height: 76px; border-radius: 50%; background: var(--accent); position: relative; transition: transform 0.2s; }
.loom-play .play-icon::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--ink); }
.loom-play.no-thumb .play-icon { display: block; }
.loom-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(15, 15, 14, 0.88); color: var(--paper); padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.loom-status[hidden] { display: none; }
.loom-play:hover .play-icon { transform: scale(1.08); }
.embed-note { color: var(--ink-2); font-size: 1rem; line-height: 1.5; margin-top: 18px; }
.embed-note strong { display: block; font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }
.embed-note a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }

.proj-body { padding-top: 0; }
.prose { max-width: none; }
.prose h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin: clamp(36px, 5vw, 52px) 0 16px; }
.prose p { font-size: 1.08rem; line-height: 1.7; margin-bottom: 16px; }
.prose li { font-size: 1.08rem; line-height: 1.65; }
.prose ul { margin: 0 0 20px 1.2rem; }
.prose li { margin-bottom: 12px; padding-left: 4px; }
.prose li::marker { color: var(--accent-ink); }
.prose .callout {
  background: var(--paper-2); border-left: 5px solid var(--accent); border-radius: 0 16px 16px 0;
  padding: 26px 30px; margin: 30px 0; font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink);
}

.stat-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin: 32px 0; }
.stat-wall div { background: var(--paper); padding: 22px 20px; }
.stat-wall strong { display: block; font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--accent-ink); margin-bottom: 6px; }
.stat-wall span { color: var(--mute); font-size: 0.9rem; line-height: 1.4; display: block; }
@media (max-width: 720px) { .stat-wall { grid-template-columns: 1fr 1fr; } }

.proj-cta { padding-block: clamp(48px, 7vw, 80px); }
.proj-cta h2 { margin-bottom: 32px; max-width: 16ch; }

/* ---------- Motion (start states only apply while the .js class is present) ---------- */

:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.js .reveal { opacity: 0; transform: translateY(32px); }
.js .hero-main > *:not(h1):not(.md),
.js .hero-photo:not(.md),
.js .proj-hero > *:not(h1):not(.md) { opacity: 0; }

/* Word-by-word headlines */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.16em; margin: -0.06em 0 -0.16em; }
.split .wi { display: inline-block; }
.js .split:not(.md) .wi { transform: translateY(115%); }
.split-fade .w { overflow: visible; padding: 0; margin: 0; }
.js .split-fade:not(.md) .wi { transform: none; opacity: 0.12; }

/* Section rule draws in */
.section-head { border-top: 0; position: relative; }
.section-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.dark .section-head::before { background: var(--paper); }
.js .section-head:not(.in)::before { transform: scaleX(0); }
.js .section-head.in::before { transition: transform 1.3s var(--ease); }

/* Hero portrait: accent block slides out after the photo lands */
.js .hero-photo img { box-shadow: 0 0 0 var(--accent); }
.js .hero.ready .hero-photo img { box-shadow: 12px 12px 0 var(--accent); transition: box-shadow 1s var(--ease) 1.1s; }

/* Scroll progress + header */
.progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; }
.site-header { transition: transform 0.45s var(--ease), background-color 0.3s, box-shadow 0.3s; }
.site-header.scrolled { background: rgba(251, 250, 246, 0.95); box-shadow: 0 12px 30px -20px rgba(15, 15, 14, 0.3); }
.site-header.hide { transform: translateY(-100%); box-shadow: none; }

/* Springy buttons hand transform over to Motion */
.js .btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.js .nav-links a.nav-cta { transition: background-color 0.2s, color 0.2s; }

/* Micro-interactions */
.case-stats strong, .stat-wall strong { font-variant-numeric: tabular-nums; }
.service-list li { position: relative; }
.service-list li::before { content: ""; position: absolute; inset: 0 -16px; background: var(--paper); border-radius: 14px; opacity: 0; transform: scaleY(0.7); transform-origin: bottom; transition: opacity 0.35s, transform 0.55s var(--ease); }
.service-list li:hover::before { opacity: 1; transform: none; }
.service-row { position: relative; z-index: 1; }
.service-row h3 { transition: color 0.2s, transform 0.5s var(--ease); }
.service-list li:hover .service-row h3 { transform: translateX(10px); }
.mini-case { transition: transform 0.5s var(--ease); }
.mini-case:hover { transform: translateY(-5px); }
.mini-case blockquote::before { transition: width 0.5s var(--ease); }
.mini-case:hover blockquote::before { width: 56px; }
.proof-item img { transition: transform 0.7s var(--ease); }
.proof-item:hover img { transform: scale(1.05); }
.case { transition: transform 0.6s var(--ease); }
.case:hover { transform: translateY(-4px); }

/* Page fade between pages */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.js body { animation: pageIn 0.55s ease backwards; }
.js.leaving body { opacity: 0; transition: opacity 0.28s ease; }

/* ---------- Small screens ---------- */

.mini-cases { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
img, video, iframe { max-width: 100%; }
h1, h2, h3, h4, p, li, blockquote { overflow-wrap: break-word; }

@media (max-width: 860px) {
  .nav-links { max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; }
}

@media (max-width: 760px) {
  .hero-photo { max-width: 420px; }
}

@media (max-width: 600px) {
  section { padding-block: 44px; }
  .hero { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 36px; }
  .hero-grid { gap: 32px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-sub { margin-bottom: 22px; }
  .hero-caption { margin-top: 22px; }
  .client-strip { margin-top: 36px; }
  .section-head { padding-top: 16px; margin-bottom: 24px; gap: 6px; }
  .case { padding: 22px 20px; border-radius: 22px; gap: 20px; }
  .case-stats { gap: 22px 16px; padding-top: 18px; }
  .mini-cases { margin-top: 28px; gap: 26px; }
  .service-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .service-row .num { padding-top: 0; }
  .service-row p { grid-column: 1; }
  .about-statement { margin-bottom: 24px; }
  .about-facts { margin-top: 26px; }
  .about-facts li { flex-direction: column; gap: 2px; padding: 12px 0; }
  .about-facts .v { text-align: left; }
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .proof-item { border-radius: 14px; }
  .proof-item figcaption, .proof-cap { padding: 10px 12px 12px; font-size: 0.78rem; }
  .contact-cards { gap: 14px; }
  .contact-card { padding: 22px 20px; }
  .contact-note { margin-top: 22px; }
  footer { padding: 24px 0 24px; }
  .foot { padding-top: 22px; padding-bottom: 22px; gap: 18px; }
  .proj-hero { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 28px; }
  .breadcrumb { margin-bottom: 18px; }
  .proj-meta { margin-top: 24px; gap: 14px 20px; }
  .proj-video { padding-bottom: 28px; }
  .prose h2 { margin: 30px 0 12px; }
  .prose p, .prose li { font-size: 1rem; }
  .prose .callout { padding: 18px 18px; margin: 22px 0; }
  .stat-wall { margin: 22px 0; }
  .stat-wall div { padding: 16px 14px; }
  .proj-cta { padding-block: 36px 44px; }
}

@media (max-width: 340px) {
  .proof-grid { grid-template-columns: 1fr; }
  .case-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   Email samples · live inbox
   ============================================================ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.emails, .em-reader {
  --c-welcome: #ff4d1f; --c-welcome-ink: #0f0f0e; --c-welcome-soft: #ffe7de;
  --c-promotional: #1d7a4f; --c-promotional-ink: #fff; --c-promotional-soft: #dff1e7;
  --c-cold: #2c56d6; --c-cold-ink: #fff; --c-cold-soft: #e1e8fb;
  --row-read: #f6f5f0;
  --flash: #fff1e6;
}

.mailbox {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 80px -48px rgba(15, 15, 14, 0.45), 0 2px 0 rgba(15, 15, 14, 0.04);
}

/* Window bar + search */
.mb-top { display: flex; align-items: center; gap: 16px; padding: 14px clamp(14px, 2.4vw, 22px); border-bottom: 1px solid var(--line); background: var(--paper); }
.mb-dots { display: flex; gap: 7px; flex: none; }
.mb-dots i { width: 11px; height: 11px; border-radius: 50%; background: #d9d6cc; }
.mb-dots i:first-child { background: var(--accent); }
.mb-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; max-width: 560px;
  background: var(--paper-2); border-radius: 999px; padding: 0 16px; height: 44px;
  border: 1.5px solid transparent; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.3s;
}
.mb-search:focus-within { background: var(--white); border-color: var(--ink); box-shadow: 0 8px 24px -14px rgba(15, 15, 14, 0.4); }
.mb-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; }
.mb-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 0.97rem; color: var(--ink); outline: none; }
.mb-search input::placeholder { color: var(--mute); }
.mb-me {
  margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--accent); font-family: var(--display); font-weight: 700;
}

/* Category tabs */
.mb-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.mb-tab {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 clamp(12px, 2vw, 22px);
  background: none; border: 0; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--mute); cursor: pointer; text-align: left;
  transition: color 0.2s, background-color 0.2s;
  --tab: var(--ink);
}
.mb-tab[data-filter="welcome"] { --tab: var(--c-welcome); }
.mb-tab[data-filter="promotional"] { --tab: var(--c-promotional); }
.mb-tab[data-filter="cold"] { --tab: var(--c-cold); }
.mb-tab svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mb-tab::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--tab); transform: scaleX(0); transition: transform 0.45s var(--ease, ease);
}
.mb-tab:hover { background: var(--paper); color: var(--ink); }
.mb-tab[aria-pressed="true"] { color: var(--ink); }
.mb-tab[aria-pressed="true"] svg { color: var(--tab); }
.mb-tab[aria-pressed="true"]::after { transform: scaleX(1); }
.mb-tab:focus-visible { outline-offset: -3px; }
.mb-count {
  margin-left: auto; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--tab); color: var(--white); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: transform 0.3s var(--ease, ease), opacity 0.3s;
}
.mb-tab[data-filter="welcome"] .mb-count { color: var(--c-welcome-ink); }
.mb-count.zero { opacity: 0; transform: scale(0.4); }
.mb-count.bump { animation: mbBump 0.45s var(--ease, ease); }
@keyframes mbBump { 40% { transform: scale(1.35); } }

/* Status row */
.mb-status { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px clamp(10px, 2vw, 18px); border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--mute); min-height: 48px; }
.mb-refresh {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; transition: background-color 0.2s;
}
.mb-refresh:hover { background: var(--paper-2); }
.mb-refresh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mailbox.syncing .mb-refresh svg { animation: mbSpin 0.9s linear infinite; }
@keyframes mbSpin { to { transform: rotate(360deg); } }
.mb-status-text { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mb-range { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-sync { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.mb-sync i { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent); border-radius: 2px; animation: mbSlide 1.1s ease-in-out infinite; }
.mailbox.syncing .mb-sync { opacity: 1; }
@keyframes mbSlide { from { left: -40%; } to { left: 100%; } }

/* Message rows */
.mb-list { list-style: none; }
.mb-row { position: relative; border-bottom: 1px solid var(--line); }
.mb-row:last-child { border-bottom: 0; }
.mb-open {
  position: relative; width: 100%; display: grid; align-items: center; text-align: left;
  grid-template-columns: 8px 38px minmax(120px, 160px) minmax(0, 1fr) auto 40px;
  gap: 14px; padding: 14px clamp(12px, 2vw, 20px); min-height: 66px;
  background: var(--row-read); border: 0; font: inherit; color: var(--ink-2); cursor: pointer;
  transition: background-color 0.25s, box-shadow 0.25s;
}
.mb-row.unread .mb-open { background: var(--white); }
.mb-open:hover { box-shadow: inset 0 -1px 0 var(--line), 0 6px 18px -10px rgba(15, 15, 14, 0.35); z-index: 1; }
.mb-open:focus-visible { outline-offset: -3px; z-index: 2; }
.mb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0); transition: opacity 0.3s, transform 0.4s var(--ease, ease); }
.mb-row.unread .mb-dot { opacity: 1; transform: none; }
.mb-av {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  background: var(--av); color: var(--av-ink);
}
[data-cat="welcome"] { --av: var(--c-welcome); --av-ink: var(--c-welcome-ink); --soft: var(--c-welcome-soft); }
[data-cat="promotional"] { --av: var(--c-promotional); --av-ink: var(--c-promotional-ink); --soft: var(--c-promotional-soft); }
[data-cat="cold"] { --av: var(--c-cold); --av-ink: var(--c-cold-ink); --soft: var(--c-cold-soft); }
.mb-from { font-size: 0.93rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row.unread .mb-from { color: var(--ink); font-weight: 700; }
.mb-main { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95rem; }
.mb-title { color: var(--ink); font-weight: 500; }
.mb-row.unread .mb-title { font-weight: 700; }
.mb-ex { color: var(--mute); }
.mb-tags { display: flex; gap: 6px; }
.mb-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; white-space: nowrap;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; background: var(--soft, var(--paper-2)); color: var(--ink);
}
.mb-chip-alt { background: var(--ink); color: var(--paper); }
.mb-no { font-size: 0.8rem; font-weight: 600; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; transition: opacity 0.2s; }
.mb-read {
  position: absolute; right: clamp(12px, 2vw, 20px); top: 50%; transform: translate(8px, -50%); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  transition: opacity 0.2s, transform 0.35s var(--ease, ease);
}
.mb-open:hover .mb-read, .mb-open:focus-visible .mb-read { opacity: 1; transform: translate(0, -50%); }
.mb-open:hover .mb-no, .mb-open:focus-visible .mb-no,
.mb-open:hover .mb-tags, .mb-open:focus-visible .mb-tags { opacity: 0; }
.mb-tags { transition: opacity 0.2s; }

.mb-empty { padding: 48px 20px; text-align: center; color: var(--mute); }

/* Live delivery */
.mb-list.pending .mb-row:not(.arrive) { opacity: 0; transform: translateY(-14px); }
.mb-row.arrive { animation: mbArrive 0.75s var(--ease, ease) both; }
.mb-row.arrive::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, var(--flash), rgba(255, 241, 230, 0)); border-left: 3px solid var(--accent);
  animation: mbFlash 1.8s ease-out both;
}
@keyframes mbArrive {
  from { opacity: 0; transform: translateY(-18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes mbFlash { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
.mb-list.shuffle .mb-row { animation: mbIn 0.55s var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes mbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Toast */
.mb-toast {
  position: absolute; left: 50%; bottom: 18px; z-index: 5; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 14px;
  background: var(--ink); color: var(--paper); font-size: 0.9rem; box-shadow: 0 18px 40px -16px rgba(15, 15, 14, 0.6);
  opacity: 0; transform: translate(-50%, 24px) scale(0.96); pointer-events: none;
  transition: opacity 0.3s, transform 0.5s var(--ease, ease);
}
.mb-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mb-toast-icon { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--accent); display: grid; place-items: center; }
.mb-toast-icon svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.mb-toast.ring .mb-toast-icon { animation: mbRing 0.7s ease; }
@keyframes mbRing { 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.mb-toast-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mb-toast-text b { color: var(--accent); font-weight: 600; }

.mb-note { margin-top: 16px; font-size: 0.9rem; color: var(--mute); }

@media (max-width: 960px) {
  .mb-open { grid-template-columns: 8px 38px minmax(110px, 140px) minmax(0, 1fr) 36px; }
  .mb-tags { display: none; }
}
@media (max-width: 720px) {
  .mb-tab { flex-direction: column; justify-content: center; gap: 4px; padding: 12px 4px; font-size: 0.78rem; text-align: center; min-height: 70px; }
  .mb-tab .mb-count { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; height: 18px; min-width: 20px; padding: 0 5px; font-size: 0.68rem; }
  .mb-tab-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mb-dots { display: none; }
  .mb-top { gap: 10px; }

  .mb-open {
    grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av from no" "av main main" "av tags tags";
    align-items: start; gap: 2px 12px; padding: 14px 16px 16px 18px;
  }
  .mb-dot { position: absolute; left: 6px; top: 30px; }
  .mb-av { grid-area: av; margin-top: 2px; }
  .mb-from { grid-area: from; }
  .mb-no { grid-area: no; }
  .mb-main { grid-area: main; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.4; }
  .mb-title { display: block; }
  .mb-sep { display: none; }
  .mb-tags { grid-area: tags; display: flex; flex-wrap: wrap; margin-top: 8px; align-items: center; opacity: 1 !important; }
  .mb-tags::after { content: "Read email \2192"; margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--accent-ink); }
  .mb-read { display: none; }
  .mb-open:hover .mb-no { opacity: 1; }
}

/* ---------- Reader dialog ---------- */

.em-reader {
  padding: 0; border: 0; margin: auto; color: var(--ink-2); background: var(--white);
  width: min(880px, calc(100vw - 32px)); height: min(90vh, 960px); max-width: none; max-height: none;
  border-radius: 24px; overflow: hidden; box-shadow: 0 50px 120px -40px rgba(15, 15, 14, 0.7);
}
.em-reader[open] { display: flex; flex-direction: column; animation: emIn 0.55s var(--ease, ease); }
.em-reader::backdrop { background: rgba(15, 15, 14, 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: emFade 0.4s ease; }
.em-reader.closing { animation: emOut 0.22s ease forwards; }
.em-reader.closing::backdrop { animation: emFadeOut 0.22s ease forwards; }
@keyframes emIn { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes emOut { to { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes emFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes emFadeOut { to { opacity: 0; } }

.em-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper); flex: none;
}
.em-icon {
  width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: none; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; transition: background-color 0.2s, opacity 0.2s;
}
.em-icon:hover { background: var(--paper-2); }
.em-icon:disabled { opacity: 0.3; cursor: default; background: none; }
.em-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.em-crumb { font-size: 0.88rem; font-weight: 600; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.em-pager { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.em-pos { font-size: 0.82rem; color: var(--mute); margin-right: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.em-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.em-inner { max-width: 700px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) clamp(18px, 4vw, 40px) 56px; }
.em-inner.swap { animation: emSwap 0.5s var(--ease, ease); }
@keyframes emSwap { from { opacity: 0; transform: translateX(var(--dir, 0px)); } to { opacity: 1; transform: none; } }

.em-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.em-labels .mb-chip { height: 26px; font-size: 0.75rem; }
.em-labels .mb-chip-cat { background: var(--av); color: var(--av-ink); }
.em-title { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.08; margin-bottom: 22px; outline: none; }

.em-from { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.em-from .mb-av { width: 44px; height: 44px; flex: none; font-size: 1.05rem; background: var(--ink); color: var(--accent); }
.em-from strong { display: block; color: var(--ink); font-weight: 600; line-height: 1.3; }
.em-from div span { display: block; font-size: 0.85rem; color: var(--mute); }

.em-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 24px; }
.em-meta dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); padding-top: 0.2em; white-space: nowrap; }
.em-meta dd { color: var(--ink); font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.em-meta dd.em-subject { font-weight: 700; }

.em-seq { margin-bottom: 26px; }
.em-seq-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.em-seq ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.em-seq button {
  width: 100%; height: 100%; text-align: left; font: inherit; cursor: pointer; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink-2); font-size: 0.86rem; line-height: 1.3;
  transition: border-color 0.2s, background-color 0.2s, transform 0.3s var(--ease, ease);
}
.em-seq button:hover { border-color: var(--ink); transform: translateY(-2px); }
.em-seq button b { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
.em-seq button[aria-current="true"] { border-color: var(--av); background: var(--soft); color: var(--ink); cursor: default; transform: none; }

.em-headline {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 22px; padding-left: 16px; border-left: 4px solid var(--accent);
}
.em-headline small { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }

.em-body { font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.em-body p, .em-body ul, .em-body ol { margin-bottom: 0.95em; overflow-wrap: anywhere; }
.em-body p { white-space: pre-wrap; }
.em-body.lines p { margin-bottom: 0.7em; }
.em-body ul, .em-body ol { padding-left: 1.4em; }
.em-body li { margin-bottom: 0.3em; padding-left: 0.2em; }
.em-body li::marker { color: var(--accent-ink); font-weight: 700; }
.em-body strong { font-weight: 700; }
.em-body > * { animation: emLine 0.6s var(--ease, ease) both; animation-delay: calc(0.12s + var(--i, 0) * 28ms); }
@keyframes emLine { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.em-link {
  font: inherit; color: var(--c-cold); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.em-link:hover { color: var(--accent-ink); }

.em-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.em-foot .btn { min-height: 44px; padding: 10px 20px; font-size: 0.9rem; }
.em-foot .btn-primary { margin-left: auto; }

@media (max-width: 640px) {
  .em-reader { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .em-meta { grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; }
  .em-meta dd + dt { margin-top: 10px; }
  .em-body { font-size: 1rem; }
  .em-foot .btn { flex: 1 1 100%; justify-content: center; }
  .em-foot .btn-primary { margin-left: 0; }
  .em-pos { display: none; }
  .em-seq ol { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  .em-seq button { padding: 8px 10px; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-row.arrive, .mb-row.arrive::after, .mb-list.shuffle .mb-row, .mb-count.bump,
  .em-reader[open], .em-reader::backdrop, .em-inner.swap, .em-body > *, .mb-toast.ring .mb-toast-icon { animation: none; }
  .mb-toast { transition: opacity 0.2s; }
}

/* ============================================================
   Articles · newspaper front page
   ============================================================ */

.articles, .studio, .prompter, .wr-reader {
  --news: #f5f0e4; --news-2: #ebe4d3; --news-ink: #1c1a16; --news-mute: #5d574b; --news-rule: rgba(28, 26, 22, 0.85); --news-hair: rgba(28, 26, 22, 0.22);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --studio: #0b0b0a; --studio-2: #161614; --studio-3: #1f1e1b; --chalk: #f3f0e8; --chalk-2: rgba(243, 240, 232, 0.66); --chalk-line: rgba(243, 240, 232, 0.13);
  --tape: #ffd23f; --rec: #ff3b30; --tag: #8fb4ff;
}

.paper {
  position: relative; color: var(--news-ink); background-color: var(--news);
  background-image: radial-gradient(rgba(28, 26, 22, 0.05) 1px, transparent 1.2px);
  background-size: 4px 4px;
  border-radius: 4px; padding: clamp(18px, 3.4vw, 44px);
  box-shadow: 0 1px 0 rgba(15, 15, 14, 0.06), 0 50px 90px -60px rgba(15, 15, 14, 0.55), 0 0 0 1px rgba(28, 26, 22, 0.08);
}
.paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.35), transparent 40%, rgba(120, 100, 60, 0.05));
}

/* Masthead */
.np-mast { text-align: center; }
.np-mast-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--news-ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--news-rule);
}
.np-mast-row-b { border-bottom: 0; border-top: 1px solid var(--news-rule); padding: 10px 0 0; font-weight: 500; letter-spacing: 0.12em; }
.np-title {
  font-family: var(--serif); font-weight: 800; font-optical-sizing: auto; color: var(--news-ink);
  font-size: clamp(2.6rem, 8.4vw, 6.4rem); line-height: 0.95; letter-spacing: -0.035em; padding: 16px 0 14px;
}
.js .paper:not(.inked) .np-title { clip-path: inset(0 100% 0 0); }
.paper.inked .np-title { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease, ease) 0.15s; }

/* Ticker */
.np-ticker {
  display: flex; align-items: stretch; margin: 14px 0 0; border-top: 3px double var(--news-rule); border-bottom: 1px solid var(--news-rule);
  font-size: 0.86rem; overflow: hidden;
}
.np-ticker-tag { flex: none; display: flex; align-items: center; padding: 8px 14px; background: var(--news-ink); color: var(--news); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; }
.np-ticker-view { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.np-ticker-track { display: flex; white-space: nowrap; animation: npTick 60s linear infinite; }
.np-ticker-track span { padding: 8px 0; font-family: var(--serif); font-style: italic; }
.np-ticker-track span::after { content: "\2726"; margin: 0 18px; font-style: normal; color: var(--accent-ink); }
.np-ticker:hover .np-ticker-track { animation-play-state: paused; }
@keyframes npTick { to { transform: translateX(-50%); } }

/* Front page */
.np-front { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); border-bottom: 3px double var(--news-rule); }
.np-story { position: relative; cursor: pointer; }
.np-lead { padding: 26px 30px 30px 0; border-right: 1px solid var(--news-hair); }
.np-side { padding-left: 30px; display: flex; flex-direction: column; }
.np-side .np-story { padding: 26px 0; flex: 1; }
.np-side .np-story + .np-story { border-top: 1px solid var(--news-hair); }
.np-kicker { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.np-hl {
  font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; color: var(--news-ink);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.np-hl span {
  background: linear-gradient(var(--accent), var(--accent)) 0 96% / 0 3px no-repeat; transition: background-size 0.6s var(--ease, ease);
}
.np-story:hover .np-hl span, .np-story:focus-within .np-hl span { background-size: 100% 3px; }
.np-lead .np-hl { font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.02; letter-spacing: -0.03em; }
.np-dek { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.35; color: var(--news-ink); margin-top: 14px; }
.np-byline { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--news-mute); margin: 14px 0; padding: 8px 0; border-top: 1px solid var(--news-hair); border-bottom: 1px solid var(--news-hair); }
.np-cols {
  position: relative; columns: 2 16em; column-gap: 28px; column-rule: 1px solid var(--news-hair);
  font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--news-ink);
  max-height: 17.5em; overflow: hidden;
}
.np-cols p { margin-bottom: 0.7em; }
.np-cols p:first-child::first-letter { float: left; font-weight: 800; font-size: 3.6em; line-height: 0.8; padding: 0.06em 0.08em 0 0; color: var(--accent-ink); }
.np-cols .np-cols-h { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 0.95rem; margin: 0.4em 0 0.3em; }
.np-cols::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5em; background: linear-gradient(transparent, var(--news)); pointer-events: none; }
.np-ex { font-family: var(--serif); font-size: 1rem; line-height: 1.55; color: var(--news-ink); margin-top: 12px; }
.np-side .np-byline { margin: 14px 0 12px; }
.np-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--news-ink);
}
.np-more span { display: inline-block; transition: transform 0.4s var(--ease, ease); }
.np-story:hover .np-more span { transform: translateX(6px); }
.np-story:hover .np-more { color: var(--accent-ink); }

/* Dear Nurse T column: one story per row */
.np-column { padding-top: 26px; }
.np-col-head { text-align: center; margin-bottom: 20px; }
.np-col-head .np-kicker { margin-bottom: 6px; }
.np-col-title { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; color: var(--news-ink); }
.np-col-list { list-style: none; border-top: 1px solid var(--news-rule); }
.np-col-list > li { border-bottom: 1px solid var(--news-hair); }
.np-col-list > li:last-child { border-bottom: 0; }
.np-col-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 28px;
  align-items: start; padding: 22px 16px; margin: 0 -16px; transition: background-color 0.35s;
}
.np-col-item:hover { background: var(--news-2); }
.np-no { grid-row: 1 / span 2; font-family: var(--serif); font-weight: 800; font-size: 3rem; line-height: 0.9; color: var(--news-hair); transition: color 0.35s, transform 0.5s var(--ease, ease); display: inline-block; }
.np-col-item:hover .np-no { color: var(--accent); transform: translateX(4px); }
.np-col-item .np-hl { grid-column: 2; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.15; }
.np-col-item .np-ex { grid-column: 2; font-size: 0.98rem; margin-top: 8px; max-width: 62ch; }
.np-col-item .np-byline { grid-column: 3; grid-row: 1; border: 0; padding: 0; margin: 4px 0 0; white-space: nowrap; text-align: right; }
.np-col-item .np-more { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; margin-top: 12px; white-space: nowrap; }

@media (max-width: 760px) {
  .np-col-item { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: none; column-gap: 14px; padding: 18px 10px; margin: 0 -10px; }
  .np-no { grid-row: 1 / span 4; font-size: 2.2rem; }
  .np-col-item .np-hl, .np-col-item .np-ex, .np-col-item .np-byline, .np-col-item .np-more { grid-column: 2; grid-row: auto; justify-self: start; text-align: left; }
  .np-col-item .np-byline { margin-top: 10px; }
  .np-col-item .np-more { margin-top: 8px; }
}

/* ============================================================
   Scripts · studio
   ============================================================ */

.studio { background: var(--studio); }

/* Teleprompter */
.prompter {
  position: relative; border-radius: 22px; overflow: hidden; margin-bottom: 28px;
  background: radial-gradient(120% 90% at 50% 0%, #1c1b18, #0f0f0e 70%); border: 1px solid var(--chalk-line);
  box-shadow: inset 0 0 0 6px #121210, inset 0 0 0 7px rgba(243, 240, 232, 0.06), 0 40px 80px -50px #000;
}
.pr-top, .pr-bot { display: flex; align-items: center; gap: 14px; padding: 14px 22px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-2); }
.pr-bot { justify-content: center; min-height: 46px; border-top: 1px solid var(--chalk-line); }
.pr-top { border-bottom: 1px solid var(--chalk-line); }
.pr-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--chalk); }
.pr-rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 12px var(--rec); animation: prBlink 1.2s steps(2, jump-none) infinite; }
@keyframes prBlink { 50% { opacity: 0.2; box-shadow: none; } }
.pr-label { flex: 1; text-align: center; }
.pr-count { font-variant-numeric: tabular-nums; }
.pr-screen {
  position: relative; height: clamp(200px, 26vw, 270px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.pr-roll { position: absolute; left: 0; right: 0; top: 0; padding: 0 clamp(36px, 8vw, 110px); transition: transform 1.1s var(--ease, ease); }
.pr-line {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-align: center;
  font-size: clamp(1.15rem, 2.6vw, 2rem); line-height: 1.2; padding: 14px 0; color: var(--chalk); opacity: 0.18;
  transition: opacity 0.8s, transform 0.8s var(--ease, ease); transform: scale(0.94);
}
.pr-line.on { opacity: 1; transform: none; }
.pr-mark { position: absolute; top: 50%; width: 0; height: 0; border: 9px solid transparent; transform: translateY(-50%); }
.pr-mark-l { left: 14px; border-left-color: var(--accent); }
.pr-mark-r { right: 14px; border-right-color: var(--accent); }
.pr-bot b { color: var(--accent); font-weight: 700; }

/* Filters */
.sc-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.sc-filter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--chalk); background: transparent; border: 1.5px solid var(--chalk-line);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.sc-filter span { font-size: 0.75rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.sc-filter:hover { border-color: var(--chalk-2); }
.sc-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.sc-filter[aria-pressed="true"] span { opacity: 0.8; }

/* Slates */
.slates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; grid-auto-flow: dense; }
.slate {
  display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--studio-2); border: 1px solid var(--chalk-line); color: var(--chalk-2);
  transition: transform 0.5s var(--ease, ease), border-color 0.3s, box-shadow 0.4s;
}
.slate:hover { transform: translateY(-5px); border-color: rgba(243, 240, 232, 0.3); box-shadow: 0 30px 60px -30px #000; }
.slate[hidden] { display: none; }
.slate.wide { grid-column: span 2; }
.slate.pop { animation: slPop 0.6s var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes slPop { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

.slate-clap { position: relative; height: 44px; flex: none; background: #0e0e0d; }
.slate-stick, .slate-base {
  position: absolute; left: 0; right: 0; height: 18px;
  background: repeating-linear-gradient(-55deg, var(--chalk) 0 16px, #111 16px 32px);
}
.slate-stick { top: 0; transform-origin: 6px 100%; }
.slate-base { bottom: 0; background: repeating-linear-gradient(55deg, var(--chalk) 0 16px, #111 16px 32px); }
.slate-stick::after { content: ""; position: absolute; left: 6px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: #8d8a82; }
.slate:hover .slate-stick, .slate.clap .slate-stick { animation: slClap 0.55s var(--ease, ease); }
@keyframes slClap { 0% { transform: none; } 35% { transform: rotate(-13deg); } 62% { transform: rotate(1.5deg); } 100% { transform: none; } }

.slate-body { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 20px; }
.slate-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); border: 1px solid var(--chalk-line); border-radius: 8px; margin-bottom: 16px; }
.slate-fields > div { padding: 7px 10px; border-left: 1px solid var(--chalk-line); min-width: 0; }
.slate-fields > div:first-child { border-left: 0; }
.slate-fields dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-2); opacity: 0.8; }
.slate-fields dd { font-size: 0.84rem; font-weight: 600; color: var(--chalk); line-height: 1.3; overflow-wrap: anywhere; }
.slate-title { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.12; color: var(--chalk); margin-bottom: 12px; }
.slate-line { font-family: var(--display); font-weight: 500; font-size: 1.05rem; line-height: 1.35; color: var(--chalk); margin-bottom: 14px; flex: 1; }
.slate-line::before { content: "\201C"; color: var(--accent); }
.slate-line::after { content: "\201D"; color: var(--accent); }
.slate-go {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.slate-go span { transition: transform 0.4s var(--ease, ease); }
.slate:hover .slate-go span { transform: translateX(6px); }

.slate-flow { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; counter-reset: fl; }
.slate-flow li {
  font-size: 0.8rem; font-weight: 600; color: var(--chalk); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--chalk-line); background: var(--studio-3);
  animation: slFlow 6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.5s);
}
.slate-flow li.hk { border-color: var(--accent); }
@keyframes slFlow { 0%, 12%, 100% { background: var(--studio-3); } 6% { background: rgba(255, 77, 31, 0.28); } }

.slate-brief { font-size: 0.86rem; line-height: 1.45; margin-bottom: 14px; color: var(--chalk-2); }
.slate-brief b { display: block; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tape); margin-bottom: 4px; }
.slate-brief s { color: var(--chalk); text-decoration: line-through 2px transparent; transition: text-decoration-color 0.9s ease 0.4s, color 0.9s ease 0.4s; }
.slate.live .slate-brief s, .no-anim .slate-brief s { text-decoration-color: var(--accent); color: var(--chalk-2); }

.slate-rotor { position: relative; height: 5.4em; margin-bottom: 14px; font-family: var(--display); font-weight: 800; font-size: 1.02rem; line-height: 1.2; color: var(--chalk); letter-spacing: -0.01em; }
.slate-rotor span { position: absolute; inset: 0; opacity: 0; animation: slRotor 9s infinite; }
.slate-rotor span:nth-child(2) { animation-delay: 3s; }
.slate-rotor span:nth-child(3) { animation-delay: 6s; }
@keyframes slRotor { 0% { opacity: 0; transform: translateY(12px); } 5%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-12px); } }

.slate-takes { list-style: none; display: grid; gap: 8px; margin-top: auto; }
.slate-take {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--chalk-line); background: var(--studio-3); color: var(--chalk); font: inherit; font-size: 0.86rem; line-height: 1.35;
  transition: border-color 0.25s, background-color 0.25s;
}
.slate-take:hover { border-color: var(--accent); background: #26241f; }
.slate-take b { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tape); white-space: nowrap; }
.slate-take span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.slate-take i { font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

@media (max-width: 1000px) { .slates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .slates { grid-template-columns: 1fr; }
  .slate.wide { grid-column: auto; }
  .pr-top, .pr-bot { padding: 12px 16px; font-size: 0.66rem; }
  .pr-label { display: none; }
  .pr-count { margin-left: auto; }
  .slate-take { grid-template-columns: minmax(0, 1fr) auto; }
  .slate-take b { grid-column: 1 / -1; }
}

/* ============================================================
   Reader: newspaper page / teleprompter
   ============================================================ */

.wr-progress { height: 3px; flex: none; background: transparent; }
.wr-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.wr-inner { max-width: 720px; }
.wr-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wr-title { outline: none; }
.wr-auto {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin-right: 6px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--chalk-line); background: none; color: var(--chalk); font: inherit; font-size: 0.8rem; font-weight: 600;
}
.wr-auto svg { width: 14px; height: 14px; fill: currentColor; }
.wr-auto[aria-pressed="true"] { background: var(--rec); border-color: var(--rec); color: #fff; }
.wr-auto[hidden] { display: none; }
.wr-meta { margin: 0 0 24px; }
.wr-meta dd { font-weight: 500; }

.wr-body h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.15; margin: 1.6em 0 0.6em; }
.wr-body p, .wr-body ul, .wr-body ol { margin-bottom: 0.9em; overflow-wrap: anywhere; }
.wr-body p { white-space: pre-wrap; }
.wr-body ul, .wr-body ol { padding-left: 1.4em; }
.wr-body li { margin-bottom: 0.35em; padding-left: 0.2em; }
.wr-body li > ul, .wr-body li > ol { margin: 0.4em 0 0.2em; }
.wr-body li::marker { color: var(--accent-ink); font-weight: 700; }
.wr-body hr { border: 0; text-align: center; margin: 1.8em 0; height: auto; }
.wr-body hr::before { content: "\2726  \2726  \2726"; white-space: pre; letter-spacing: 0.3em; color: var(--accent-ink); font-size: 0.8rem; }

.wr-seq { margin-bottom: 26px; }
.wr-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.wr-foot .btn { min-height: 44px; padding: 10px 20px; font-size: 0.9rem; }
.wr-foot .btn-primary { margin-left: auto; }

/* Paper mode */
.wr-reader[data-mode="paper"] { background: var(--news); color: var(--news-ink); }
.wr-reader[data-mode="paper"] .em-bar { background: var(--news-2); border-bottom-color: var(--news-hair); }
.wr-reader[data-mode="paper"] .em-icon:hover { background: rgba(28, 26, 22, 0.08); }
.wr-reader[data-mode="paper"] .mb-chip { background: transparent; border: 1px solid var(--news-rule); color: var(--news-ink); border-radius: 0; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; }
.wr-reader[data-mode="paper"] .wr-title { font-family: var(--serif); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--news-ink); margin-bottom: 14px; }
.wr-dek { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.35; margin-bottom: 16px; }
.wr-byline { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--news-mute); padding: 10px 0; margin-bottom: 24px; border-top: 1px solid var(--news-rule); border-bottom: 1px solid var(--news-hair); }
.wr-reader[data-mode="paper"] .em-meta { background: transparent; border-radius: 0; border: 0; border-bottom: 1px solid var(--news-hair); padding: 0 0 14px; }
.wr-reader[data-mode="paper"] .wr-body { font-family: var(--serif); font-size: 1.12rem; line-height: 1.75; color: var(--news-ink); }
.wr-reader[data-mode="paper"] .wr-body > p:first-child::first-letter { float: left; font-weight: 800; font-size: 3.9em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--accent-ink); }
.wr-reader[data-mode="paper"] .wr-body h3 { font-family: var(--display); color: var(--news-ink); }
.wr-reader[data-mode="paper"] .em-seq button { background: transparent; border-color: var(--news-hair); border-radius: 0; color: var(--news-ink); }
.wr-reader[data-mode="paper"] .em-seq button[aria-current="true"] { background: var(--news-2); border-color: var(--news-rule); }
.wr-reader[data-mode="paper"] .wr-foot { border-top-color: var(--news-hair); }
.wr-box { margin-top: 32px; padding: 18px 20px; border: 1px solid var(--news-hair); border-top: 3px double var(--news-rule); font-size: 0.97rem; line-height: 1.6; }
.wr-box-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--news-mute); margin-bottom: 10px; }
.wr-box p { white-space: pre-wrap; margin-bottom: 0.6em; }
.wr-box dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
.wr-box dt { font-weight: 700; font-size: 0.85rem; }
.wr-box dd { overflow-wrap: anywhere; }
.wr-bio { font-family: var(--serif); font-style: italic; }

/* Prompter mode */
.wr-reader[data-mode="prompter"] { background: var(--studio); color: var(--chalk); }
.wr-reader[data-mode="prompter"] .em-bar { background: #121210; border-bottom-color: var(--chalk-line); }
.wr-reader[data-mode="prompter"] .em-icon { color: var(--chalk); }
.wr-reader[data-mode="prompter"] .em-icon:hover { background: rgba(243, 240, 232, 0.1); }
.wr-reader[data-mode="prompter"] .em-crumb, .wr-reader[data-mode="prompter"] .em-pos { color: var(--chalk-2); }
.wr-reader[data-mode="prompter"] .mb-chip { background: var(--studio-3); color: var(--chalk); border: 1px solid var(--chalk-line); }
.wr-reader[data-mode="prompter"] .mb-chip-cat { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.wr-reader[data-mode="prompter"] .wr-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.08; color: var(--chalk); margin-bottom: 18px; }
.wr-reader[data-mode="prompter"] .em-meta { background: var(--studio-2); border-color: var(--chalk-line); }
.wr-reader[data-mode="prompter"] .em-meta dt { color: var(--chalk-2); }
.wr-reader[data-mode="prompter"] .em-meta dd { color: var(--chalk); }
.wr-reader[data-mode="prompter"] .wr-body { font-size: 1.22rem; line-height: 1.7; color: var(--chalk); }
.wr-reader[data-mode="prompter"] .wr-body li::marker { color: var(--accent); }
.wr-reader[data-mode="prompter"] .wr-body h3 { color: var(--chalk); }
.wr-reader[data-mode="prompter"] .wr-body hr::before { color: var(--accent); }
.wr-reader[data-mode="prompter"] .em-seq-label { color: var(--chalk-2); }
.wr-reader[data-mode="prompter"] .em-seq button { background: var(--studio-2); border-color: var(--chalk-line); color: var(--chalk); }
.wr-reader[data-mode="prompter"] .em-seq button b { color: var(--tape); }
.wr-reader[data-mode="prompter"] .em-seq button[aria-current="true"] { border-color: var(--accent); background: rgba(255, 77, 31, 0.14); }
.wr-reader[data-mode="prompter"] .wr-foot { border-top-color: var(--chalk-line); }
.wr-reader[data-mode="prompter"] .btn-ghost { color: var(--chalk); border-color: var(--chalk-2); }
.wr-reader[data-mode="prompter"] .btn-ghost:hover { background: var(--chalk); color: var(--ink); }
.wr-reader[data-mode="prompter"] .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.wr-reader[data-mode="prompter"] .btn-primary:hover { background: var(--chalk); border-color: var(--chalk); }
.wr-reader[data-mode="prompter"] :focus-visible { outline-color: var(--accent); }
.wr-reader[data-mode="prompter"] .em-from { border-bottom-color: var(--chalk-line); }
.wr-reader[data-mode="prompter"] .em-from strong { color: var(--chalk); }
.wr-reader[data-mode="prompter"] .em-from div span { color: var(--chalk-2); }
.wr-reader[data-mode="prompter"] .em-from .mb-av { background: var(--studio-3); }

.wr-part { margin-bottom: 28px; }
.wr-part-label { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: 4px 10px; border-radius: 4px; margin-bottom: 14px; }
.wr-dir, .wr-note {
  font-size: 0.95rem; line-height: 1.55; font-style: italic; color: var(--chalk);
  background: rgba(255, 210, 63, 0.08); border-left: 3px solid var(--tape); border-radius: 0 10px 10px 0; padding: 10px 14px;
}
.wr-body .wr-dir { white-space: normal; }
.wr-dir-label, .wr-note-label { display: block; font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tape); margin-bottom: 3px; }
.wr-note { margin-bottom: 26px; }
.wr-note p { white-space: pre-wrap; margin-bottom: 0.3em; }
.wr-dir-in { font-style: italic; font-size: 0.85em; color: var(--tape); }
.wr-screen { margin-bottom: 28px; padding: 22px; border-radius: 16px; border: 1.5px dashed rgba(243, 240, 232, 0.35); text-align: center; }
.wr-screen .wr-part-label { background: var(--chalk); }
.wr-screen-text { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }
.wr-answer { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--chalk); padding: 26px 0; border-top: 1px solid var(--chalk-line); border-bottom: 1px solid var(--chalk-line); overflow-wrap: anywhere; white-space: pre-wrap; }

.wr-brief {
  position: relative; margin-bottom: 28px; padding: 20px 22px 18px; color: #26231d; background: #f3ecd8; border-radius: 4px;
  box-shadow: 0 18px 40px -24px #000; transform: rotate(-0.4deg);
}
.wr-brief::before { content: ""; position: absolute; top: -9px; left: 50%; width: 90px; height: 20px; margin-left: -45px; background: rgba(255, 210, 63, 0.75); transform: rotate(2deg); }
.wr-brief-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8a5a00; margin-bottom: 8px; }
.wr-brief p { white-space: pre-wrap; font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; }

.wr-caption { margin-top: 32px; padding: 18px 20px; border-radius: 18px; background: var(--studio-2); border: 1px solid var(--chalk-line); }
.wr-caption .wr-box-label { color: var(--chalk-2); margin-bottom: 6px; }
.wr-caption .wr-body { font-size: 1rem; }
.wr-tag { color: var(--tag); }

@media (max-width: 640px) {
  .wr-reader[data-mode="paper"] .wr-body { font-size: 1.03rem; }
  .wr-reader[data-mode="prompter"] .wr-body { font-size: 1.08rem; }
  .wr-foot .btn { flex: 1 1 100%; justify-content: center; }
  .wr-foot .btn-primary { margin-left: 0; }
  .wr-auto span { display: none; }
  .wr-auto { padding: 0 11px; }
  .wr-brief { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .np-ticker-track, .pr-rec i, .slate-flow li, .slate-rotor span, .slate.pop, .slate:hover .slate-stick { animation: none; }
  .slate-rotor span:first-child { opacity: 1; }
  .js .paper:not(.inked) .np-title { clip-path: none; }
  .slate-brief s { text-decoration-color: var(--accent); transition: none; }
}

/* ============================================================
   More work · links out to the live Google Docs
   ============================================================ */

.docs { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.docs > li { min-width: 0; }
.doc-card {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 20px; border-radius: 18px; background: var(--white); border: 1px solid var(--line);
  transition: transform 0.5s var(--ease, ease), border-color 0.3s, box-shadow 0.4s;
}
.doc-card:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 28px 50px -30px rgba(15, 15, 14, 0.45); }

/* Mini page with a folded corner; its lines "type" in on hover */
.doc-page {
  position: relative; display: flex; flex-direction: column; gap: 7px; height: 118px; margin-bottom: 8px; padding: 26px 16px 0;
  border-radius: 8px 22px 8px 8px; background: var(--paper-2); overflow: hidden;
  border-top: 4px solid var(--c);
}
.doc-page::after {
  content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: linear-gradient(225deg, var(--paper) 50%, rgba(15, 15, 14, 0.12) 50%);
}
.doc-page i { display: block; height: 6px; border-radius: 3px; background: rgba(15, 15, 14, 0.14); transform-origin: 0 50%; transition: transform 0.6s var(--ease, ease), background-color 0.3s; }
.doc-page i:nth-child(1) { width: 70%; height: 9px; background: var(--c); opacity: 0.85; }
.doc-page i:nth-child(2) { width: 92%; }
.doc-page i:nth-child(3) { width: 84%; }
.doc-page i:nth-child(4) { width: 90%; }
.doc-page i:nth-child(5) { width: 56%; }
.doc-card:hover .doc-page i:not(:first-child) { animation: docType 0.9s var(--ease, ease) both; }
.doc-card:hover .doc-page i:nth-child(3) { animation-delay: 0.08s; }
.doc-card:hover .doc-page i:nth-child(4) { animation-delay: 0.16s; }
.doc-card:hover .doc-page i:nth-child(5) { animation-delay: 0.24s; }
@keyframes docType { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.doc-kind { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.doc-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.doc-desc { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); flex: 1; }
.doc-go {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.86rem; font-weight: 600;
  transition: background-color 0.25s, color 0.25s;
}
.doc-card:hover .doc-go { background: var(--c); color: var(--white); }
.doc-arr { display: inline-block; transition: transform 0.4s var(--ease, ease); }
.doc-card:hover .doc-arr { transform: translate(2px, -2px); }

@media (max-width: 1080px) { .docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .docs { grid-template-columns: 1fr; }
  .doc-page { height: 86px; padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-card:hover .doc-page i { animation: none; }
}

/* ============================================================
   Teleprompter read-aloud
   ============================================================ */

.pr-voice {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; margin-left: auto; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--chalk-line); background: rgba(243, 240, 232, 0.06); color: var(--chalk);
  font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.pr-voice[hidden] { display: none; }
.pr-voice:hover { border-color: var(--chalk-2); }
.pr-voice[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.pr-voice:focus-visible { outline-color: var(--accent); }
.pr-voice + .pr-count { margin-left: 0; }
.pr-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.pr-eq i { width: 3px; height: 4px; border-radius: 2px; background: currentColor; }
.pr-eq i:nth-child(2) { height: 9px; }
.pr-eq i:nth-child(3) { height: 6px; }
.pr-eq i:nth-child(4) { height: 11px; }
.prompter.talking .pr-eq i { animation: prEq 0.9s ease-in-out infinite; }
.prompter.talking .pr-eq i:nth-child(2) { animation-delay: -0.3s; }
.prompter.talking .pr-eq i:nth-child(3) { animation-delay: -0.6s; }
.prompter.talking .pr-eq i:nth-child(4) { animation-delay: -0.15s; }
@keyframes prEq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.prompter.talking .pr-line.on { color: #fff; text-shadow: 0 0 28px rgba(255, 77, 31, 0.45); }
.prompter.talking .pr-rec i { background: #34c759; box-shadow: 0 0 12px #34c759; }
.prompter .pr-label { flex: 1; }
.prompter .pr-voice ~ .pr-count { flex: none; }

/* ============================================================
   Homepage samples preview
   ============================================================ */

#portfolios .prompter { margin-bottom: 20px; }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pv {
  display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; background: var(--white); border: 1px solid var(--line);
  transition: transform 0.55s var(--ease, ease), box-shadow 0.45s, border-color 0.3s;
}
.pv:hover { transform: translateY(-6px); border-color: rgba(15, 15, 14, 0.3); box-shadow: 0 34px 60px -36px rgba(15, 15, 14, 0.5); }
.pv-stage { position: relative; display: block; height: 230px; overflow: hidden; }
.pv-text { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; border-top: 1px solid var(--line); }
.pv-kind { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.pv-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.pv-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); align-self: flex-start; padding-bottom: 2px; }
.pv-go span { transition: transform 0.35s var(--ease, ease); }
.pv:hover .pv-go span { transform: translateX(6px); }

/* Mini inbox */
.pv-mail .pv-stage { background: linear-gradient(160deg, #fdeee6, #f3f0e8 60%); padding: 24px 24px 0; }
.pvm-win { display: block; height: 100%; background: var(--white); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 24px 40px -30px rgba(15, 15, 14, 0.5); overflow: hidden; }
.pvm-bar { display: flex; align-items: center; gap: 5px; padding: 10px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.pvm-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d9d6cc; }
.pvm-bar i:first-child { background: var(--accent); }
.pvm-search { margin-left: 8px; flex: 1; font-size: 0.66rem; color: var(--mute); background: var(--paper-2); border-radius: 999px; padding: 4px 10px; }
.pvm-tabs { display: flex; gap: 14px; padding: 8px 12px; font-size: 0.66rem; color: var(--mute); border-bottom: 1px solid var(--line); }
.pvm-tabs b { color: var(--ink); }
.pvm-tabs em { font-style: normal; background: var(--ink); color: var(--white); border-radius: 999px; padding: 0 5px; margin-left: 3px; animation: pvPulse 2.4s ease-in-out infinite; }
@keyframes pvPulse { 50% { background: var(--accent); } }
.pvm-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 0.72rem; color: var(--mute); white-space: nowrap; overflow: hidden; }
.pvm-row b { color: var(--ink); }
.pvm-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.pvm-av { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6rem; font-weight: 700; background: var(--c); color: var(--t, #fff); }
.pvm-t { overflow: hidden; text-overflow: ellipsis; }
.pv-mail:hover .pvm-row { animation: pvArrive 0.7s var(--ease, ease) both; animation-delay: calc(var(--k) * 0.12s); }
@keyframes pvArrive { from { opacity: 0; transform: translateY(-10px); background: #fff1e6; } 60% { background: #fff1e6; } to { opacity: 1; transform: none; background: transparent; } }

/* Mini newspaper */
.pv-paper .pv-stage { background: #e9e2d0; padding: 22px 26px 0; }
.pvp-sheet {
  display: block; height: 100%; padding: 12px 16px 0; background-color: #f5f0e4; color: #1c1a16; border-radius: 3px 3px 0 0;
  background-image: radial-gradient(rgba(28, 26, 22, 0.05) 1px, transparent 1.2px); background-size: 4px 4px;
  box-shadow: 0 24px 40px -28px rgba(15, 15, 14, 0.55); transform: rotate(-1.2deg); transform-origin: bottom center; transition: transform 0.6s var(--ease, ease);
}
.pv-paper:hover .pvp-sheet { transform: rotate(0deg) translateY(-4px); }
.pvp-row { display: flex; justify-content: space-between; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid rgba(28, 26, 22, 0.8); padding-bottom: 5px; }
.pvp-mast { display: block; text-align: center; font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 2.1rem; letter-spacing: -0.03em; line-height: 1.1; padding: 4px 0; border-bottom: 3px double rgba(28, 26, 22, 0.85); }
.pvp-kicker { display: block; margin-top: 10px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.pvp-hl { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.05rem; line-height: 1.12; margin-top: 4px; }
.pvp-hl span { background: linear-gradient(var(--accent), var(--accent)) 0 96% / 0 2px no-repeat; transition: background-size 0.6s var(--ease, ease); }
.pv-paper:hover .pvp-hl span { background-size: 100% 2px; }
.pvp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 10px; }
.pvp-cols i { display: block; height: 5px; border-radius: 3px; background: rgba(28, 26, 22, 0.16); }

/* Mini slate */
.pv-studio .pv-stage { background: #0b0b0a; padding: 22px 24px 0; }
.pvs-clap { display: block; height: 34px; border-radius: 10px 10px 0 0; background: repeating-linear-gradient(-55deg, #f3f0e8 0 14px, #111 14px 28px); transform-origin: 6px 100%; transition: transform 0.4s var(--ease, ease); }
.pv-studio:hover .pvs-clap { animation: slClap 0.55s var(--ease, ease); }
.pvs-fields { display: grid; grid-template-columns: repeat(3, 1fr); background: #161614; border: 1px solid rgba(243, 240, 232, 0.13); border-top: 0; }
.pvs-fields > span { padding: 8px 10px; font-size: 0.78rem; font-weight: 600; color: #f3f0e8; border-left: 1px solid rgba(243, 240, 232, 0.13); }
.pvs-fields > span:first-child { border-left: 0; }
.pvs-fields b { display: block; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 240, 232, 0.6); }
.pvs-title { display: block; height: 100%; padding: 14px 12px; background: #161614; border: 1px solid rgba(243, 240, 232, 0.13); border-top: 0; font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; color: #f3f0e8; }

/* Doc stack */
.pv-docs .pv-stage { background: linear-gradient(160deg, #eef1fb, #f3f0e8 70%); display: grid; place-items: end center; }
.pvd-sheet {
  position: absolute; bottom: -30px; left: 50%; width: 132px; height: 170px; margin-left: -66px; padding: 22px 14px 0;
  display: flex; flex-direction: column; gap: 7px; background: var(--white); border-radius: 8px 20px 8px 8px; border-top: 4px solid var(--c);
  box-shadow: 0 18px 30px -20px rgba(15, 15, 14, 0.5);
  transform: translateX(calc(var(--x) * 0.45)) rotate(calc(var(--r) * 0.5)); transform-origin: bottom center; transition: transform 0.6s var(--ease, ease);
}
.pv-docs:hover .pvd-sheet { transform: translateX(calc(var(--x) * 1.6)) rotate(var(--r)) translateY(-10px); }
.pvd-sheet i { display: block; height: 5px; border-radius: 3px; background: rgba(15, 15, 14, 0.13); }
.pvd-sheet i:first-child { width: 70%; height: 8px; background: var(--c); opacity: 0.85; }

@media (max-width: 760px) {
  .pv-grid { grid-template-columns: 1fr; }
  .pv-stage { height: 200px; }
}

/* ============================================================
   Sample pages
   ============================================================ */

.sp-lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 52ch; margin-top: 18px; }
.sp-body { padding-top: 0; }
.sp-body.dark { padding-top: clamp(44px, 6vw, 72px); }
.sp-h2 { margin-bottom: 18px; }
.sp-docs { padding-top: clamp(36px, 5vw, 56px); }
.sp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: clamp(40px, 6vw, 64px); }
.sp-pg { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border: 1.5px solid var(--line); border-radius: 18px; transition: border-color 0.25s, transform 0.4s var(--ease, ease); }
.sp-pg:hover { border-color: var(--ink); transform: translateY(-3px); }
.sp-pg .k { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.sp-pg .t { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); }
.sp-pg-next { text-align: right; }
.nav-links a[aria-current] { background-size: 100% 2px; }
@media (max-width: 560px) { .sp-pager { grid-template-columns: 1fr; } .sp-pg-next { text-align: left; } }

@media (prefers-reduced-motion: reduce) {
  .prompter.talking .pr-eq i, .pvm-tabs em, .pv-mail:hover .pvm-row, .pv-studio:hover .pvs-clap { animation: none; }
}
.prompter.nudge .pr-voice { animation: prNudge 1.6s ease-in-out infinite; border-color: var(--accent); }
@keyframes prNudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 31, 0.55); } 50% { box-shadow: 0 0 0 8px rgba(255, 77, 31, 0); } }
@media (prefers-reduced-motion: reduce) { .prompter.nudge .pr-voice { animation: none; } }

/* ============================================================
   Header dropdown · Portfolios
   ============================================================ */

.has-drop { position: relative; }
.drop-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 0 3px; border: 0; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size 0.25s;
}
.drop-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease, ease); }
.drop-btn:hover, .has-drop.is-current .drop-btn, .has-drop.open .drop-btn { background-size: 100% 2px; }
.has-drop.open .drop-btn svg { transform: rotate(180deg); }

.drop {
  position: absolute; top: calc(100% + 18px); left: 50%; z-index: 60; width: 330px; list-style: none;
  padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 60px -28px rgba(15, 15, 14, 0.45);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(0.98); transform-origin: 50% 0;
  transition: opacity 0.25s, transform 0.4s var(--ease, ease), visibility 0s linear 0.4s;
}
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* hover bridge */
.has-drop.open .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity 0.25s, transform 0.4s var(--ease, ease), visibility 0s; }
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .has-drop:hover .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity 0.25s, transform 0.4s var(--ease, ease), visibility 0s; }
  .has-drop:hover .drop-btn svg { transform: rotate(180deg); }
}
.drop li { opacity: 1; }
.has-drop.open .drop > li, .has-drop:hover .drop > li { animation: dropIn 0.45s var(--ease, ease) both; }
.drop > li:nth-child(2) { animation-delay: 0.04s; }
.drop > li:nth-child(3) { animation-delay: 0.08s; }
.drop > li:nth-child(4) { animation-delay: 0.12s; }
.drop > li:nth-child(5) { animation-delay: 0.16s; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.nav-links .drop-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px; background: none; transition: background-color 0.2s;
}
.nav-links .drop-item:hover, .nav-links .drop-item[aria-current="page"] { background: var(--paper-2); }
.drop-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--c); position: relative; transition: transform 0.35s var(--ease, ease); }
.drop-ic::after { content: ""; position: absolute; left: 9px; right: 9px; top: 12px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 5px 0 rgba(255, 255, 255, 0.6), 0 10px 0 rgba(255, 255, 255, 0.4); }
.drop-item:hover .drop-ic { transform: rotate(-6deg) scale(1.06); }
.drop-tx { display: flex; flex-direction: column; min-width: 0; }
.drop-t { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.015em; color: var(--ink); }
.drop-d { font-size: 0.8rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.nav-links .drop-all {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 12px;
  font-weight: 600; font-size: 0.9rem; color: var(--ink); background: none;
}
.nav-links .drop-all:hover, .nav-links .drop-all[aria-current="page"] { background: var(--ink); color: var(--paper); }

@media (max-width: 860px) {
  .drop-btn {
    width: 100%; justify-content: space-between; padding: 15px 0; background: none;
    font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em;
  }
  .drop-btn svg { width: 22px; height: 22px; }
  .drop {
    position: static; width: auto; transform: none; opacity: 1; visibility: visible; display: none;
    padding: 0 0 12px; border: 0; border-radius: 0; box-shadow: none; background: none; transition: none;
  }
  .drop::before { display: none; }
  .has-drop.open .drop { display: block; transform: none; }
  .nav-links .drop li, .nav-links .drop li:last-child { width: 100%; border-bottom: 0; padding-top: 0; }
  .nav-links .drop a { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
  .nav-links .drop a.drop-item { display: grid; padding: 10px 8px; }
  .nav-links .drop a.drop-all { display: flex; padding: 12px 8px; }
  .drop-foot { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drop, .has-drop.open .drop { transition: none; }
  .has-drop.open .drop > li, .has-drop:hover .drop > li { animation: none; }
}

/* Portfolios: the label is a link to the hub page, the chevron toggles the dropdown */
.drop-head { display: inline-flex; align-items: center; gap: 2px; }
.drop-btn { padding: 4px; background: none; border-radius: 8px; color: var(--ink); transition: background-color 0.2s; }
.drop-btn:hover { background: var(--paper-2); }
.has-drop.is-current .drop-link, .nav-links .drop-link[aria-current] { background-size: 100% 2px; }
@media (max-width: 860px) {
  .drop-head { display: flex; width: 100%; justify-content: space-between; gap: 12px; }
  .drop-head .drop-link { flex: 1; }
  .drop-btn { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; border: 1.5px solid var(--line); border-radius: 50%; font-size: 1rem; }
  .drop-btn svg { width: 20px; height: 20px; }
}

/* ============================================================
   FAQ (homepage) · answers for people and answer engines
   ============================================================ */

.faq { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; align-items: center; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n { font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--accent-ink); }
.faq-item h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.2; transition: color 0.2s, transform 0.5s var(--ease, ease); }
.faq-item summary:hover h3 { color: var(--accent-ink); transform: translateX(6px); }
.faq-x { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background-color 0.25s, transform 0.45s var(--ease, ease); }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--ink); border-radius: 2px; transition: transform 0.45s var(--ease, ease), background-color 0.25s; }
.faq-x::after { transform: rotate(90deg); }
.faq-item[open] .faq-x { background: var(--ink); transform: rotate(180deg); }
.faq-item[open] .faq-x::before, .faq-item[open] .faq-x::after { background: var(--paper); }
.faq-item[open] .faq-x::after { transform: rotate(0deg); }
.faq-a { padding: 0 52px 26px 72px; }
.faq-a p { font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }
.faq-item[open] .faq-a { animation: faqIn 0.5s var(--ease, ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .faq-item summary { grid-template-columns: 34px minmax(0, 1fr) 32px; gap: 10px; padding: 18px 0; }
  .faq-x { width: 32px; height: 32px; }
  .faq-a { padding: 0 0 22px 44px; }
}

/* Work cards now link out */
.mini-link { align-self: flex-start; margin-top: 4px; font-size: 0.95rem; }

/* ============================================================
   Portfolio pages · every piece, listed in the HTML
   ============================================================ */

.sp-index-wrap { padding-top: clamp(28px, 4vw, 44px); }
.sp-index { border: 1.5px solid var(--line); border-radius: 20px; background: var(--white); overflow: hidden; }
.sp-index summary {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink);
}
.sp-index summary::-webkit-details-marker { display: none; }
.sp-index summary span { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 2px 9px; }
.sp-index summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.35s var(--ease, ease); }
.sp-index[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.sp-index ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); counter-reset: spi; }
.sp-index li { counter-increment: spi; border-bottom: 1px solid var(--line); }
.sp-index li:nth-child(odd) { border-right: 1px solid var(--line); }
.sp-index li button {
  width: 100%; height: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; text-align: left; cursor: pointer;
  padding: 14px 20px; border: 0; background: none; font: inherit; color: var(--ink-2); transition: background-color 0.2s;
}
.sp-index li button::before { content: counter(spi, decimal-leading-zero); grid-row: 1 / span 2; font-size: 0.8rem; font-weight: 700; color: var(--accent-ink); padding-top: 2px; }
.sp-index li button:hover { background: var(--paper-2); }
.sp-index li b { color: var(--ink); font-weight: 600; line-height: 1.3; }
.sp-index li span { font-size: 0.88rem; color: var(--mute); line-height: 1.4; margin-top: 2px; }
@media (max-width: 700px) {
  .sp-index ol { grid-template-columns: 1fr; }
  .sp-index li:nth-child(odd) { border-right: 0; }
}

/* ============================================================
   Receipts · testimonials printed as till receipts
   ============================================================ */

.receipts { background: var(--paper-2); --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --rc-ink: #1c1a16; --stamp: #c8320d; }

.printer {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 18px 26px 34px;
  background: linear-gradient(#232220, var(--ink)); color: var(--paper); border-radius: 22px 22px 10px 10px;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 24px 40px -26px rgba(15, 15, 14, 0.6);
}
.printer-led { width: 10px; height: 10px; border-radius: 50%; background: #34c759; box-shadow: 0 0 10px #34c759; animation: prBlink 1.6s steps(2, jump-none) infinite; }
.printer-count { margin-left: auto; opacity: 0.65; }
.printer-slot { position: absolute; left: 22px; right: 22px; bottom: 12px; height: 8px; border-radius: 4px; background: #050505; box-shadow: inset 0 2px 4px #000, 0 1px 0 rgba(255, 255, 255, 0.08); }

.rc-grid { list-style: none; columns: 3 250px; column-gap: 26px; margin: -14px 26px 0; padding-top: 0; }
.rc-w {
  break-inside: avoid; margin-bottom: 28px; transform: rotate(var(--r, 0deg)); transform-origin: 50% 0;
  filter: drop-shadow(0 16px 18px rgba(15, 15, 14, 0.16)); transition: transform 0.55s var(--ease, ease);
}
.rc-w:first-child { margin-top: 0; }
.rc-w:hover { transform: rotate(0deg) translateY(-6px); }
.rc.proof-item, .rc {
  --zz: 8px;
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 24px 20px 28px; text-align: left;
  font-family: var(--mono); color: var(--rc-ink); border: 0; border-radius: 0; overflow: visible; cursor: zoom-in;
  background: linear-gradient(180deg, #fffdf7, #fbf7ec);
  -webkit-mask: linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--zz)) no-repeat,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) var(--zz) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) var(--zz) repeat-x;
  mask: linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--zz)) no-repeat,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) var(--zz) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) var(--zz) repeat-x;
}
.rc.proof-item:hover { transform: none; border-color: transparent; }
.rc-video { cursor: default; margin: 0; }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1.5px dashed rgba(28, 26, 22, 0.35); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rc-src { color: var(--stamp); text-align: right; }
.rc-img { display: block; overflow: hidden; border: 1px solid rgba(28, 26, 22, 0.14); background: #fff; }
.rc.proof-item .rc-img img, .rc-img img { width: 100%; height: auto; max-height: 360px; aspect-ratio: auto; object-fit: cover; object-position: top; background: #fff; transition: transform 0.7s var(--ease, ease); }
.rc.proof-item:hover .rc-img img { transform: scale(1.04); }
.rc-img video { width: 100%; display: block; background: #000; aspect-ratio: 4 / 5; object-fit: contain; }
.rc.proof-item .rc-cap, .rc-cap {
  display: block; flex: none; border: 0; width: auto; margin-top: 14px; padding: 0 0 12px; border-bottom: 1.5px dashed rgba(28, 26, 22, 0.35);
  font-size: 0.8rem; line-height: 1.55; color: var(--rc-ink);
}
.rc-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.rc-foot i { flex: 1; border-bottom: 2px dotted rgba(28, 26, 22, 0.4); transform: translateY(-3px); }
.rc-stamp { display: inline-block; padding: 3px 9px; border: 2px solid var(--stamp); border-radius: 4px; color: var(--stamp); transform: rotate(-8deg); letter-spacing: 0.16em; }
.rc-zoom { display: block; margin-top: 14px; text-align: center; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.45; transition: opacity 0.25s; }
.rc.proof-item:hover .rc-zoom { opacity: 0.9; }

/* Print-out: paper feeds down from the slot, then the stamp lands */
.rc-w.to-print .rc { clip-path: inset(0 0 100% 0); transform: translateY(-36px); }
.rc-w.to-print .rc-stamp { opacity: 0; transform: rotate(-8deg) scale(2.4); }
.rc-w.printed .rc { clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1.2s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s), transform 1.2s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s); }
.rc-w.printed .rc-stamp { animation: rcStamp 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(var(--d, 0s) + 1.15s); }
@keyframes rcStamp { from { opacity: 0; transform: rotate(-8deg) scale(2.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

.rc-total {
  display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 6px auto 0; padding-top: 16px; border-top: 2px dashed rgba(28, 26, 22, 0.4);
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc-ink);
}
.rc-total i { flex: 1; border-bottom: 2px dotted rgba(28, 26, 22, 0.4); transform: translateY(-3px); }

/* Lightbox: caption + prev / next */
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(92vw, 1000px); }
.lightbox .lb-fig img { max-height: 78vh; }
.lb-cap { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem; color: rgba(251, 250, 246, 0.8); text-align: center; white-space: pre-wrap; max-width: 60ch; }
.lb-nav {
  position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); font-size: 2rem; line-height: 1; display: grid; place-items: center; transition: background-color 0.2s, transform 0.3s var(--ease, ease);
}
.lb-nav:hover { background: var(--accent); transform: scale(1.06); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-swap { animation: lbSwap 0.4s var(--ease, ease); }
@keyframes lbSwap { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .printer { padding: 14px 18px 30px; font-size: 0.64rem; }
  .printer-name { display: none; }
  .rc-grid { columns: 1; margin: -12px 14px 0; }
  .lb-nav { width: 42px; height: 42px; margin-top: -21px; top: auto; bottom: 22px; }
  .lb-prev { left: calc(50% - 56px); }
  .lb-next { right: calc(50% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-w.to-print .rc, .rc-w.to-print .rc-stamp { clip-path: none; transform: none; opacity: 1; }
  .rc-w.printed .rc-stamp { animation: none; }
  .printer-led { animation: none; }
}

/* ============================================================
   Client quote band · dark stage + scrolling ribbon of client words
   ============================================================ */

.quote-band { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding-bottom: clamp(56px, 8vw, 92px); }
.quote-band::before {
  content: "Recommended"; position: absolute; right: -0.04em; bottom: -0.22em; pointer-events: none; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 16vw, 15rem); line-height: 1; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(251, 250, 246, 0.1);
}
.qb { position: relative; margin: 0; max-width: 940px; padding-top: clamp(40px, 6vw, 70px); }
.qb-mark {
  position: absolute; left: -0.08em; top: -0.2em; font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: clamp(9rem, 20vw, 16rem); line-height: 1;
  color: var(--accent); opacity: 0.95; pointer-events: none;
}
.quote-band .pull-quote { position: relative; max-width: none; }
.quote-band .pull-quote blockquote {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--paper);
}
.quote-band .pull-quote blockquote::before, .quote-band .pull-quote blockquote::after { content: none; }
.qb-cite { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--on-dark-line); }
.qb-av { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #0a66c2; color: #fff; font-weight: 700; font-size: 1.15rem; font-family: Arial, sans-serif; }
.qb-who { display: flex; flex-direction: column; }
.qb-who b { color: var(--paper); font-weight: 600; }
.qb-who span { font-size: 0.85rem; color: var(--on-dark); letter-spacing: 0.04em; }

/* Dear Nurse T: its own section under the newspaper */
.nurse { padding-top: clamp(40px, 6vw, 72px); }
.nurse-paper { padding-top: 6px; padding-bottom: 6px; }
.nurse-paper .np-col-list { border-top: 0; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--ink); color: var(--paper); box-shadow: 0 14px 30px -14px rgba(15, 15, 14, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9);
  transition: opacity 0.3s, transform 0.45s var(--ease, ease), visibility 0s linear 0.45s, background-color 0.2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.45s var(--ease, ease), visibility 0s, background-color 0.2s; }
.to-top:hover { background: var(--accent); color: var(--ink); }
.to-top:focus-visible { outline-color: var(--accent); }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke: rgba(251, 250, 246, 0.18); stroke-width: 2.5; }
.to-top-ring .to-top-fill { stroke: var(--accent); stroke-dasharray: 138.2; stroke-dashoffset: 138.2; stroke-linecap: round; }
.to-top:hover .to-top-ring .to-top-fill { stroke: var(--ink); }
.to-top-arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease, ease); }
.to-top:hover .to-top-arrow { transform: translateY(-3px); }
body.lb-open .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 600px) { .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.show { transition: opacity 0.2s, visibility 0s; transform: none; } }

/* ---------- Phones and small tablets: one column everywhere ---------- */
@media (max-width: 900px) {
  .np-front { grid-template-columns: 1fr; }
  .np-lead { padding: 22px 0 24px; border-right: 0; border-bottom: 1px solid var(--news-hair); }
  .np-side { padding-left: 0; }
  .np-cols { columns: 1; max-height: 13em; }
  .np-mast-mid { display: none; }
}
@media (max-width: 600px) {
  .docs { grid-template-columns: 1fr; }
  .case-stats { grid-template-columns: 1fr; }
  .slates { grid-template-columns: 1fr; }
  .slate.wide { grid-column: auto; }
  .em-seq ol { grid-template-columns: 1fr; }
  .mini-cases { grid-template-columns: 1fr; }
}