/* ============================================================
   Daniel Sultan, digital resume
   Design system: "Timetable". Recycled stock, one spot colour,
   dense dated rows, civic typography. Prints as a real resume.
   ============================================================ */

:root {
  --stock:      #f4f2ec;
  --stock-deep: #e6e3d9;
  --stock-edge: #fbfaf6;
  --ink:        #17181a;
  --ink-soft:   #4c4e52;
  --ink-faint:  #6b6d70;
  --rule:       #d3cfc4;
  --rule-hair:  #e0dccf;
  --signal:     #c8241c;

  --night:      #17181a;
  --night-ink:  #e4e2dc;
  --night-rule: #34363a;

  --display: "Darker Grotesque", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body:    "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(18px, 4vw, 56px);
  --max: 1240px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --stock:      #121315;
  --stock-deep: #25272b;
  --stock-edge: #1a1c1f;
  --ink:        #f2f0e9;
  --ink-soft:   #c2c0b9;
  --ink-faint:  #91928f;
  --rule:       #3d3f43;
  --rule-hair:  #2d2f33;
  --signal:     #ff6258;
  --night:      #0b0c0d;
  --night-ink:  #e8e6df;
  --night-rule: #303238;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .18s ease, color .18s ease;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.frame { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter); top: 10px; z-index: 99;
  background: var(--ink); color: var(--stock);
  padding: 8px 14px; font-family: var(--data); font-size: 12px;
}

/* ---------- Masthead ---------- */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--stock) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--ink);
}
.masthead .frame { display: flex; align-items: center; min-height: 62px; }

.wordmark {
  font-family: var(--data); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  display: flex; align-items: center; gap: 0;
}

.mainnav { margin-left: auto; display: flex; gap: clamp(12px, 2.2vw, 26px); overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  font-family: var(--data); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.mainnav a:hover { color: var(--ink); border-bottom-color: var(--signal); }
.mainnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.nav-short { display: none; }

.theme-toggle {
  position: relative;
  flex: none;
  width: 52px;
  height: 28px;
  margin-left: clamp(14px, 2vw, 24px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #17181a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.theme-toggle:hover { transform: none; }
.theme-toggle-track,
.theme-toggle-track::before,
.theme-toggle-track::after { position: absolute; display: block; }
.theme-toggle-track { inset: 0; }
.theme-toggle-track::before {
  content: "";
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='3.2' fill='%23f5a623'/%3E%3Cg fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 1v2M9 15v2M1 9h2M15 9h2M3.3 3.3l1.4 1.4M13.3 13.3l1.4 1.4M14.7 3.3l-1.4 1.4M4.7 13.3l-1.4 1.4'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-toggle-track::after {
  content: "";
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform .2s ease;
}
:root[data-theme="dark"] .theme-toggle-track::before {
  content: "";
  top: 5px;
  right: auto;
  left: 5px;
  width: 18px;
  height: 18px;
  background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='8.2' cy='9' r='6' fill='%23ffd43b'/%3E%3Ccircle cx='11.4' cy='6.2' r='5.9' fill='%2317181a'/%3E%3C/svg%3E");
  transform: none;
}
:root[data-theme="dark"] .theme-toggle-track::after { transform: translateX(24px); }

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

.hero { padding-block: clamp(36px, 5.5vw, 74px) clamp(18px, 2.4vw, 30px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(26px, 5vw, 68px); align-items: start;
}

.eyebrow {
  font-family: var(--data); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px;
}

.statement {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 0.9;
  letter-spacing: -0.022em; margin: 0 0 24px; max-width: 19ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--signal); }

.standfirst { font-size: clamp(1rem, 1.45vw, 1.14rem); line-height: 1.6; max-width: 58ch; margin: 0; }
.standfirst + .standfirst { margin-top: 13px; color: var(--ink-soft); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn {
  font-family: var(--data); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 11px 18px;
  border: 1.5px solid var(--ink); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.btn-solid { background: var(--ink); color: var(--stock); }
.btn-solid:hover { background: var(--signal); border-color: var(--signal); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--stock); }

/* Service plate */
.plate { margin: 0; border-top: 1.5px solid var(--ink); padding-top: 12px; font-family: var(--data); font-size: 12px; line-height: 1.7; }
.plate dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
.plate dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.plate dd { margin: 0; }
.plate img { width: 100%; margin-top: 16px; filter: grayscale(1) contrast(1.06); border: 1.5px solid var(--ink); }
.plate figcaption { margin-top: 6px; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; }

/* ---------- Section headers ---------- */

.rule-label {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 8px;
}
.rule-label h2 {
  font-family: var(--data); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; margin: 0;
}
.rule-label .count { margin-left: auto; font-family: var(--data); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; text-align: right; }

.band { padding-block: clamp(40px, 5.5vw, 76px); }
.band-tight { padding-block: clamp(26px, 3.5vw, 44px); }

.page-head { padding-block: clamp(40px, 6.5vw, 84px) clamp(22px, 3vw, 38px); }
.page-head h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5rem); line-height: 0.9;
  letter-spacing: -0.022em; margin: 10px 0 18px; max-width: 19ch;
}
.page-head p { margin: 0; max-width: 62ch; font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--ink-soft); }

/* ---------- Dated ledger rows (experience, projects, education) ---------- */

.ledger-rows { border-top: 0; }

.lrow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 26px 0 24px;
  border-bottom: 1px solid var(--rule-hair);
  transition: background-color .18s;
}
a.lrow {
  --lrow-hover-pad: clamp(18px, 2.2vw, 30px);
  position: relative;
  margin-inline: calc(-1 * var(--lrow-hover-pad));
  padding: 30px var(--lrow-hover-pad) 28px;
  border-radius: 8px;
  will-change: transform;
}
a.lrow, a.lane { transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
a.lrow:hover, a.lrow:focus-visible {
  background: var(--stock-edge); outline: none;
  transform: translateY(-3px);
  box-shadow: 0 6px 0 -3px var(--rule), 0 14px 26px -18px rgba(0,0,0,.35);
}
a.lane:hover { transform: translateY(-3px); }
a.lrow:active { transform: translateY(-1px); }
a.lrow h3 { transition: color .18s; }
a.lrow:hover h3, a.lrow:focus-visible h3 { color: var(--signal); }

.lrow--media { grid-template-columns: 150px minmax(0, 1fr) 250px; }
.lrow-when {
  font-family: var(--data); font-size: 11px; line-height: 1.8;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.lrow-when strong { display: block; color: var(--signal); font-weight: 500; }

.lrow h3 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1;
  letter-spacing: -0.018em; margin: 0 0 4px; max-width: 24ch;
}
.lrow .org {
  font-family: var(--data); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px;
}
.lrow ul { margin: 0; padding: 0; list-style: none; max-width: 64ch; }
.lrow ul li { position: relative; padding: 0 0 8px 18px; font-size: 0.96rem; line-height: 1.55; color: var(--ink-soft); }
.lrow ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1.5px; background: var(--signal); }
.lrow p.plain { margin: 0 0 10px; max-width: 64ch; color: var(--ink-soft); font-size: 0.96rem; }

.lrow-media { margin: 0; }
.lrow-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: 1.5px solid var(--ink); background: var(--stock-deep);
  filter: saturate(0.92); transition: filter .2s;
}
a.lrow:hover .lrow-media img { filter: saturate(1.05); }
.lrow-media figcaption {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-top: 6px; line-height: 1.5;
}
.lrow-stat { font-family: var(--data); font-size: 11px; line-height: 1.7; color: var(--ink-faint); letter-spacing: 0.04em; }
.lrow-stat .stat { display: block; font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 0.9; color: var(--signal); letter-spacing: -0.02em; margin-bottom: 2px; }

.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.link {
  font-family: var(--data); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; border-bottom: 1.5px solid var(--signal); padding-bottom: 2px;
  transition: background-color .15s;
}
.link:hover { background: var(--stock-edge); }

.honest {
  display: inline-block; font-family: var(--data); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 3px 9px; color: var(--ink-faint); margin-top: 10px;
}

/* ---------- Compact two-column lists (certs, skills) ---------- */

.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule-hair); }
.pair b { font-weight: 500; font-size: 0.97rem; }
.pair span { font-family: var(--data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }


/* ---------- Lanes ---------- */

.lanes-band { border-block: 1.5px solid var(--ink); }
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lane { border-left: 1px solid var(--rule); padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 10px; transition: background-color .18s; }
.lane:first-child { border-left: 0; padding-left: 0; }
.lane:last-child { padding-right: 0; }
a.lane:hover { background: var(--stock-edge); }
.lane h3 { font-family: var(--display); font-weight: 800; font-size: 1.8rem; line-height: 1; letter-spacing: -0.015em; margin: 0; }
.lane p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.lane .go { margin-top: auto; padding-top: 12px; font-family: var(--data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }

/* ---------- Prose / split ---------- */

.split { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: start; }
.split > aside {
  position: sticky; top: 80px; font-family: var(--data); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  border-top: 1.5px solid var(--ink); padding-top: 10px;
}
.prose p { font-size: clamp(1rem, 1.3vw, 1.09rem); line-height: 1.65; max-width: 64ch; margin: 0 0 18px; }
.prose h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1; letter-spacing: -0.018em; margin: 32px 0 12px; }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 18px; padding: 0; list-style: none; max-width: 64ch; }
.prose li { padding: 9px 0 9px 20px; border-bottom: 1px solid var(--rule-hair); position: relative; font-size: 0.97rem; }
.prose li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 1.5px; background: var(--signal); }

.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.plates figure { margin: 0; }
.plates img { border: 1.5px solid var(--ink); width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--stock-deep); }
.plates figcaption { font-family: var(--data); font-size: 11px; color: var(--ink-faint); margin-top: 7px; line-height: 1.5; }

.callout {
  border: 1.5px solid var(--ink); padding: 22px 24px;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 24px; align-items: center; background: var(--stock-edge);
}
.callout strong { font-family: var(--display); font-weight: 900; font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 0.8; letter-spacing: -0.03em; color: var(--signal); }
.callout span { font-size: 0.95rem; color: var(--ink-soft); max-width: 48ch; }

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

.night { background: var(--night); color: var(--night-ink); margin-top: clamp(44px, 6vw, 88px); padding-block: clamp(44px, 6vw, 78px) 28px; }
.night h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 5.5vw, 3.9rem); line-height: 0.92; letter-spacing: -0.022em; margin: 0 0 18px; max-width: 17ch; color: #fff; }
.night p { max-width: 52ch; color: #a8afa2; margin: 0 0 22px; }
.night a { color: var(--night-ink); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 68px); align-items: start; }

.mailrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.mailrow a.mail { font-family: var(--data); font-size: clamp(13px, 1.6vw, 17px); letter-spacing: 0.02em; color: #fff; border-bottom: 1.5px solid var(--signal); padding-bottom: 3px; }
.copybtn {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: #a8afa2; border: 1px solid var(--night-rule);
  padding: 6px 11px; cursor: pointer; transition: all .15s;
}
.copybtn:hover { color: #fff; border-color: #6d746a; }

.directory { border-top: 1px solid var(--night-rule); }
.directory a {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px;
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--night-rule);
  font-family: var(--data); font-size: 12px; letter-spacing: 0.04em;
  transition: color .15s, padding-left .15s;
}
.directory a span:first-child { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: #8e968a; }
.directory a span:last-child { color: #8e968a; }
.directory a:hover { color: #fff; padding-left: 8px; }
.directory a:hover span:last-child { color: var(--signal); }

.colophon {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--night-rule);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-family: var(--data); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8e968a;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .lrow, .lrow--media { grid-template-columns: 132px minmax(0, 1fr); }
  .lrow--media .lrow-media { grid-column: 2; max-width: 340px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .plate { max-width: 340px; }
  .lanes { grid-template-columns: 1fr; }
  .lane { border-left: 0; border-top: 1px solid var(--rule); padding: 22px 0; }
  .lane:first-child { border-top: 0; }
  .split { grid-template-columns: 1fr; }
  .split > aside { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lrow, .lrow--media { grid-template-columns: 1fr; gap: 10px; padding-left: 12px; }
  a.lrow {
    --lrow-hover-pad: 16px;
    padding: 26px var(--lrow-hover-pad) 24px;
  }
  .lrow--media .lrow-media { grid-column: 1; max-width: none; }
  .lrow-when { display: flex; flex-wrap: wrap; gap: 10px; line-height: 1.4; }
  .lrow-when strong { display: inline; }
  .lrow-aside { grid-column: 1; }
  .plate img { max-width: 210px; }
  .callout { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .wordmark { font-size: 11px; letter-spacing: 0.14em; }
  .wordmark .surname { display: none; }
  .mainnav { gap: 11px; }
  .mainnav a { font-size: 10.5px; letter-spacing: 0.06em; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .theme-toggle { margin-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   PRINT, the page becomes an actual resume on paper
   ============================================================ */

@media print {
  @page { size: letter; margin: 14mm 14mm 12mm; }

  :root { --stock: #fff; --stock-edge: #fff; --ink: #000; --ink-soft: #333; --ink-faint: #555; --rule-hair: #bbb; --signal: #000; }

  body { background: #fff; font-size: 9.5pt; line-height: 1.32; }
  .lrow p.plain { font-size: 8.8pt; margin-bottom: 3pt; }
  .frame { max-width: none; padding-inline: 0; }

  .masthead, .lanes-band, .night, .actions, .plate img, .plate figcaption,
  .skip, .callout, .plates, .no-print { display: none !important; }

  .hero { padding-block: 0 6pt; }
  .hero-grid { grid-template-columns: 1fr; gap: 6pt; }
  .statement { font-size: 21pt; line-height: 1; margin-bottom: 5pt; max-width: none; }
  .statement em { color: #000; }
  .standfirst { font-size: 9.5pt; max-width: none; }
  .standfirst + .standfirst { display: none; }
  .plate { border-top: 0; padding-top: 4pt; font-size: 8.5pt; }
  .plate dl { grid-template-columns: repeat(2, auto 1fr); }

  .band, .band-tight { padding-block: 7pt 0; break-inside: auto; }
  #writing, .split > aside { display: none; }
  .rule-label { border-bottom: 1pt solid #000; padding-bottom: 3pt; margin-bottom: 4pt; }
  .rule-label h2 { font-size: 8.5pt; letter-spacing: 0.16em; }
  .rule-label .count { font-size: 8pt; }

  .lrow, .lrow--media { grid-template-columns: 84pt 1fr; gap: 9pt; padding: 5pt 0 4pt; border-left: 0; break-inside: avoid; }
  .lrow--media { grid-template-columns: 150px minmax(0, 1fr) 250px; }
.lrow-when { font-size: 7.5pt; line-height: 1.4; }
  .lrow-when strong { display: block; color: #000; }
  .lrow h3 { font-size: 12pt; margin-bottom: 0; }
  .lrow .org { font-size: 8pt; margin-bottom: 4pt; }
  .lrow ul li { font-size: 8.8pt; padding-bottom: 2pt; line-height: 1.3; }
  .lrow ul li::before { background: #000; top: 8pt; }
  .lrow-media, .lrow-stat { display: none; }
  .links { display: none; }
  .honest { border: 0; padding: 0; font-size: 8pt; }

  .pair { padding: 4pt 0; }
  .pair b { font-size: 9pt; }
  .pair span { font-size: 7.5pt; }

  a { text-decoration: none; color: #000; }
}

/* Honest-note badge sits on its own line above any following link */
.honest { display: block; width: fit-content; margin: 12px 0 4px; }

/* ============================================================
   Hover preview: cover image swaps to a motion preview
   ============================================================ */

.lrow-media { position: relative; }
.lrow-media .cover,
.lrow-media .motion {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1.5px solid var(--ink); background: var(--stock-deep);
  display: block;
}
.lrow-media .motion {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
a.lrow:hover .lrow-media .motion,
a.lrow:focus-visible .lrow-media .motion { opacity: 1; }

.lrow-media .peek {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-family: var(--data); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; background: var(--ink); color: var(--stock);
  padding: 4px 8px; opacity: 0; transition: opacity .2s;
}
a.lrow:hover .lrow-media .peek { opacity: 1; }

/* The one big feature block */
.feature { border-block: 1.5px solid var(--ink); }
.feature-inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(30px, 4.5vw, 56px);
}
.feature-inner > div { max-width: 760px; }
.feature h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 0.96;
  letter-spacing: -0.02em; margin: 10px 0 16px;
}
.feature p { margin: 0 0 14px; max-width: 52ch; color: var(--ink-soft); }
.feature p.first { color: var(--ink); font-size: 1.06rem; }
.factline {
  display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 18px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.factline div { flex: 1 1 auto; min-width: 88px; }
.factline b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink);
}
.factline span {
  font-family: var(--data); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Authorship line under a page heading */
.byline {
  font-family: var(--data);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  border-left: 0;
  border-top: 1px solid var(--rule-hair);
  padding-top: 10px;
  margin: 16px 0 0;
  max-width: 62ch;
}