:root {
  --cream: #F4EDE0;
  --cream-2: #EBE2D1;
  --ink: #141210;
  --clover: #0E5C3A;
  --clover-deep: #083E26;
  --crimson: #C8102E;
  --crimson-deep: #8E0A1F;
  --mustard: #E8A63A;
  --rule: rgba(20,18,16,0.88);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.jp { font-family: 'Noto Serif JP', 'Fraunces', serif; }

/* Page container */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
  position: relative;
}
@media (max-width: 900px) {
  .page { padding: 0 24px; }
}

/* Thick horizontal rule like a magazine */
.rule-thick { border-top: 3px solid var(--ink); }
.rule-thin { border-top: 1px solid var(--ink); }

/* Utility label */
.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Selection */
::selection { background: var(--crimson); color: var(--cream); }

/* Scroll smooth */
html { scroll-behavior: smooth; }
section, footer { scroll-margin-top: 12px; }

/* Tweaks panel */
.tweaks {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  background: var(--ink); color: var(--cream);
  border: 2px solid var(--ink);
  padding: 14px 16px 12px; width: 280px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; line-height: 1.4;
  display: none;
  box-shadow: 8px 8px 0 var(--crimson);
}
.tweaks.on { display: block; }
.tweaks h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); font-weight: 700;}
.tweaks label { display: block; margin-bottom: 10px; }
.tweaks .row { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.tweaks button {
  background: transparent; color: var(--cream);
  border: 1px solid var(--cream); padding: 4px 8px;
  font: inherit; cursor: pointer;
}
.tweaks button.active { background: var(--cream); color: var(--ink); }
.tweaks .close { position:absolute; top:8px; right:10px; border:none; color: var(--cream); background: transparent; cursor: pointer; font-size: 14px; }

/* Dark mode variants applied via [data-theme] */
[data-theme="night"] {
  --cream: #0E0D0B;
  --cream-2: #161410;
  --ink: #F4EDE0;
  --clover: #3FCB86;
  --crimson: #FF2D4A;
  --rule: rgba(244,237,224,0.85);
}

/* Palette variants */
[data-palette="poster"] {
  --clover: #1F7A2E;
  --crimson: #E5123A;
  --mustard: #F2B94B;
}
[data-palette="punch"] {
  --cream: #F7F2E3;
  --clover: #0A7A3F;
  --crimson: #E40428;
}

/* ------- sections ------- */

/* Nav */
.nav {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 0 18px;
  border-bottom: 3px solid var(--ink);
}
.nav .brand {
  font-family: 'Fraunces', serif;
  font-weight: 900; font-size: 22px; letter-spacing: -0.01em;
}
.nav .brand span { color: var(--crimson); }
.nav ul { list-style:none; margin:0; padding:0; display:flex; gap:22px;}
.nav a { color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: 0.04em; font-weight: 500; }
.nav a:hover { color: var(--crimson); }
.nav .issue { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; }

/* Masthead / Hero */
.mast {
  padding: 28px 0 0;
  position: relative;
}
.mast-top {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding-bottom: 12px;
}
.mast-top .left { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.mast-top .right { text-align: right; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.mast-top .center { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 15px; }

.title {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(80px, 17vw, 260px);
  letter-spacing: -0.045em;
  line-height: 0.82;
  margin: 14px 0 0;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.title .ink { color: var(--ink); }
.title .red { color: var(--crimson); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.title .green { color: var(--clover); }

.tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  max-width: 760px;
  margin-top: 28px;
}
.tagline em { font-style: italic; color: var(--crimson); }

.mast-meta {
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 44px;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.mast-meta .cell { grid-column: span 3; display:flex; flex-direction:column; gap:2px;}
.mast-meta .cell .k { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.7; }
.mast-meta .cell .v { font-family:'Fraunces',serif; font-weight:700; font-size:18px; }

/* Dek / intro */
.dek {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 56px;
  padding: 64px 0 48px;
  border-bottom: 3px solid var(--ink);
}
.dek .folio {
  grid-column: 1;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 18px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dek .folio .num {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 96px;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--crimson);
}
.dek .folio .num sup {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-left: 10px;
  vertical-align: 0.9em;
  text-transform: uppercase;
}
.dek .folio .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}
.dek .folio .pull {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}
.dek .folio .pull em {
  color: var(--crimson);
  font-style: italic;
  font-weight: 600;
}
.dek .folio .stars {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--mustard);
  letter-spacing: 0.6em;
}
.dek .body {
  grid-column: 2;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
}
.dek .body p { margin: 0 0 16px; }
.dek .body p:first-child::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 104px;
  line-height: 0.82;
  color: var(--crimson);
  float: left;
  padding: 6px 14px 0 0;
  margin: 4px 0 -6px;
}

/* Section header */
.section-head {
  display:grid; grid-template-columns: 1fr 11fr;
  align-items: baseline;
  gap: 20px;
  padding: 72px 0 24px;
}
.section-head .num {
  font-family:'Fraunces',serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--clover);
}
.section-head .h {
  font-family:'Fraunces',serif;
  font-weight:900;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.section-head .h em { font-style: italic; color: var(--crimson); font-weight:900; }
.section-head .sub { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; margin-top:12px; }

/* About 2-col layout */
.about {
  display:grid; grid-template-columns: 5fr 7fr;
  gap: 48px;
  padding: 12px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.about .photo {
  aspect-ratio: 3/4;
  background:
    linear-gradient(to top, rgba(20,18,16,0.70) 0%, rgba(20,18,16,0.15) 38%, rgba(20,18,16,0) 60%),
    url("images/tyler.webp") center / cover no-repeat,
    var(--clover);
  color: var(--cream);
  position: relative;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding: 18px;
  border: 3px solid var(--ink);
}
.about .photo .cap {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  max-width: 280px;
  position: relative;
  z-index: 1;
}
.about .prose p {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 18px;
}
.about .prose p strong { color: var(--crimson); font-weight: 700; }
.about .pull {
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 22px 0;
  margin: 28px 0;
  font-family:'Fraunces',serif;
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.about .pull em { color: var(--clover); font-style: italic; }

/* Stats strip */
.strip {
  display:grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 3px solid var(--ink);
}
.strip .stat {
  padding: 36px 24px 28px;
  border-right: 1px solid var(--ink);
  position: relative;
}
.strip .stat:last-child { border-right: none; }
.strip .stat .n {
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 96px; line-height: 0.85; letter-spacing: -0.04em;
  color: var(--ink);
}
.strip .stat:nth-child(2) .n { color: var(--crimson); }
.strip .stat:nth-child(4) .n { color: var(--clover); }
.strip .stat .lbl { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; margin-top:14px; }
.strip .stat .detail { font-family:'Fraunces',serif; font-style:italic; margin-top:6px; font-size:14px; opacity:0.85;}

/* Career timeline */
.career {
  padding: 12px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.career .row {
  display:grid; grid-template-columns: 140px 1fr 2fr 140px;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--ink);
  align-items: baseline;
}
.career .row:last-child { border-bottom: 1px solid var(--ink); }
.career .yr { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:500; }
.career .co { font-family:'Fraunces',serif; font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -0.015em; }
.career .co small { display:block; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; margin-top:6px; letter-spacing:0.12em; text-transform:uppercase;}
.career .desc { font-family:'Fraunces',serif; font-size: 17px; line-height: 1.4; }
.career .tag-r { text-align:right; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
.career .row:hover .co { color: var(--crimson); }
.career .row.now .yr { color: var(--crimson); font-weight: 700; }

/* Ironman poster */
.ironman {
  display:grid; grid-template-columns: 7fr 5fr;
  gap: 48px;
  padding: 12px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.ironman .poster {
  background: var(--crimson);
  color: var(--cream);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
}
.ironman .poster::after {
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 22px);
  pointer-events:none;
}
.ironman .poster .kicker { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; }
.ironman .poster h3 {
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: clamp(72px, 9vw, 140px); line-height: 0.82;
  letter-spacing: -0.045em; margin: 8px 0 12px;
}
.ironman .poster h3 em { font-style: italic; color: var(--mustard); }
.ironman .splits {
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 28px;
  position: relative; z-index: 2;
}
.ironman .splits .s {
  background: rgba(20,18,16,0.2);
  padding: 14px 14px 12px;
}
.ironman .splits .s .d { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.9;}
.ironman .splits .s .v { font-family:'Fraunces',serif; font-weight: 900; font-size: 34px; line-height:1; }
.ironman .splits .s .u { font-family:'JetBrains Mono',monospace; font-size:11px; opacity: 0.8; margin-top: 3px;}
.ironman .side { display:flex; flex-direction:column; gap: 18px;}
.ironman .side .card {
  border: 3px solid var(--ink);
  padding: 18px 20px;
  background: var(--cream-2);
}
.ironman .side .card h4 { margin:0 0 6px; font-family:'Fraunces',serif; font-weight:900; font-size: 26px;}
.ironman .side .card p { margin:0; font-family:'Fraunces',serif; font-size:16px; line-height:1.35;}
.ironman .side .card.accent { background: var(--clover); color: var(--cream); border-color: var(--ink); }

/* Atlas / Countries */
.atlas { padding: 12px 0 72px; border-bottom: 3px solid var(--ink); }
.atlas .wrap {
  display:grid; grid-template-columns: 5fr 7fr;
  gap: 48px;
}
.atlas .intro p {
  font-family:'Fraunces',serif; font-size: 22px; line-height:1.4; margin: 0 0 14px;
}
.atlas .intro .bignum {
  font-family:'Fraunces',serif; font-weight: 900; font-size: 180px;
  line-height: 0.85; letter-spacing: -0.05em; color: var(--clover);
}
.atlas .countries {
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px 14px;
}
.atlas .countries .c {
  font-family:'JetBrains Mono',monospace;
  font-size: 12px; letter-spacing: 0.06em;
  padding: 6px 0;
  border-top: 1px solid rgba(20,18,16,0.25);
}
.atlas .countries .c.lived {
  color: var(--crimson);
  font-weight: 700;
}
.atlas .legend {
  grid-column: 1 / -1;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  margin-top: 12px; display:flex; gap: 24px;
}
.atlas .legend .dot { display:inline-block; width:10px; height:10px; background: var(--crimson); margin-right:6px; vertical-align: middle;}
.atlas .legend .dot.v { background: var(--ink); }

/* Languages */
.langs {
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 12px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.langs .lang {
  padding: 40px 36px;
  border: 3px solid var(--ink);
  background: var(--cream-2);
  position: relative;
}
.langs .lang:last-child { border-left: none; background: var(--ink); color: var(--cream); }
.langs .lang .kicker { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; }
.langs .lang .word {
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: clamp(72px, 9vw, 140px); line-height: 0.85; letter-spacing: -0.04em;
  margin: 10px 0 6px;
}
.langs .lang .word em { font-style: italic; color: var(--crimson); }
.langs .lang:last-child .word em { color: var(--clover); }
.langs .lang .native { font-family:'Noto Serif JP',serif; font-weight: 900; font-size: clamp(72px, 9vw, 140px); line-height: 0.9; }
.langs .lang .note { font-family:'Fraunces',serif; font-style: italic; font-size: 18px; margin-top: 10px; max-width: 420px;}

/* Mantras */
.mantras {
  padding: 12px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.mantras .grid {
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.mantras .q {
  padding: 24px 22px;
  border: 3px solid var(--ink);
  font-family:'Fraunces',serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height: 200px;
}
.mantras .q .q-text { text-wrap: balance; }
.mantras .q .attr { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight: 500; margin-top: 16px; opacity: 0.7;}
.mantras .q.en-1,
.mantras .q.en-2,
.mantras .q.en-4 { justify-content: center; gap: 14px; }
.mantras .q.en-1 { grid-column: span 5; background: var(--cream-2); }
.mantras .q.jp-1 { grid-column: span 3; background: var(--clover); color: var(--cream); text-align:center; align-items:center; justify-content:center; }
.mantras .q.jp-1 .big { font-family:'Noto Serif JP',serif; font-weight: 900; font-size: 110px; line-height: 1; letter-spacing: -0.02em;}
.mantras .q.jp-1 .rom { font-family:'JetBrains Mono',monospace; font-size: 12px; letter-spacing:0.2em; text-transform: uppercase; margin-top: 12px;}
.mantras .q.en-2 { grid-column: span 4; background: var(--crimson); color: var(--cream); }
.mantras .q.jp-2 { grid-column: span 4; background: var(--ink); color: var(--cream); text-align:center; align-items:center; justify-content:center; }
.mantras .q.jp-2 .big { font-family:'Noto Serif JP',serif; font-weight: 900; font-size: 120px; line-height: 1; }
.mantras .q.jp-2 .rom { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; margin-top: 14px;}
.mantras .q.en-3 { grid-column: span 5; background: var(--mustard); color: var(--ink); }
.mantras .q.en-4 { grid-column: span 3; background: var(--cream-2); }
.mantras .q.jp-3 { grid-column: span 4; background: var(--clover-deep, #083E26); color: var(--cream); text-align:center; align-items:center; justify-content:center;}
.mantras .q.jp-3 .big { font-family:'Noto Serif JP',serif; font-weight: 900; font-size: 110px; line-height: 1;}
.mantras .q.jp-3 .rom { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; margin-top: 14px;}

/* Speaking / writing */
.speaking {
  display:grid; grid-template-columns: 4fr 8fr;
  gap: 48px;
  padding: 12px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.speaking h4 { font-family:'Fraunces',serif; font-weight:900; font-size: 44px; line-height: 0.95; letter-spacing:-0.02em; margin: 0 0 16px;}
.speaking .intro p { font-family:'Fraunces',serif; font-size: 19px; line-height: 1.4; margin: 0 0 12px;}
.speaking .list { display:flex; flex-direction:column; }
.speaking .item {
  display:grid; grid-template-columns: 64px 1fr 160px;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--ink);
  align-items: baseline;
}
.speaking .item:last-child { border-bottom: 1px solid var(--ink); }
.speaking .item .idx { font-family:'Fraunces',serif; font-weight: 900; font-size: 36px; line-height: 1; color: var(--crimson); }
.speaking .item .t { font-family:'Fraunces',serif; font-weight: 700; font-size: 24px; line-height:1.15; letter-spacing: -0.01em;}
.speaking .item .t small { display:block; font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size: 16px; margin-top: 6px; opacity: 0.85; }
.speaking .item .meta { text-align: right; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;}

/* Now */
.now {
  padding: 12px 0 72px;
  border-bottom: 3px solid var(--ink);
}
.now .grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.now .card {
  border: 3px solid var(--ink);
  padding: 22px 22px 22px;
  background: var(--cream-2);
  display:flex; flex-direction:column; gap: 8px;
}
.now .card .k { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; }
.now .card .v { font-family:'Fraunces',serif; font-weight: 900; font-size: 28px; line-height: 1.05; letter-spacing:-0.015em;}
.now .card p { margin:0; font-family:'Fraunces',serif; font-size: 16px; line-height: 1.35;}

/* Colophon / footer */
.colophon {
  padding: 96px 0 72px;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.colophon .grid {
  display:grid; grid-template-columns: 6fr 2fr 2fr 2fr; gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--ink);
}
.colophon .big {
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.85; letter-spacing: -0.04em;
}
.colophon .big em { font-style: italic; color: var(--crimson);}
.colophon .big a { color: inherit; text-decoration: none; }
.colophon .big a:hover { color: var(--crimson); }
.colophon h5 { font-family:'JetBrains Mono',monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight:500; margin: 0 0 10px; }
.colophon ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.colophon a { color: var(--ink); text-decoration: none; font-family:'Fraunces',serif; font-size: 18px; font-weight: 500; }
.colophon a:hover { color: var(--crimson); font-style: italic; }
.colophon .fine {
  margin-top: 24px;
  display:flex; justify-content: space-between;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
}

/* Ticker */
.ticker {
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  font-family:'Fraunces',serif; font-weight: 900;
  font-size: 28px; letter-spacing: -0.01em;
}
.ticker .track { display:inline-block; padding-left: 100%; animation: tick 48s linear infinite; }
.ticker .track span { margin-right: 42px; }
.ticker .track span em { color: var(--crimson); font-style: italic;}
.ticker .track span.star { color: var(--mustard); font-style: normal; }
@keyframes tick { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} }

/* Field Harmony feature section */
.fh .poster {
  padding: 34px 36px 30px;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--clover);
  position: relative;
}
.fh .fh-quote {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(36px, 5.4vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 900px;
}
.fh .fh-quote em { font-style: italic; color: var(--crimson); font-weight: 900; }
.fh .fh-quote .mark {
  color: var(--mustard);
  font-weight: 900;
  display: inline-block;
  transform: translateY(0.12em);
}
.fh .fh-sub {
  margin-top: 18px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  opacity: 0.78;
  max-width: 640px;
}
.fh .fh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 36px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.fh .fh-stat {
  padding: 22px 22px;
  border-right: 1px solid var(--ink);
}
.fh .fh-stat:last-child { border-right: none; }
.fh .fh-stat .v {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fh .fh-stat .v span {
  color: var(--crimson);
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 4px;
  vertical-align: 0.9em;
}
.fh .fh-stat .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0.8;
}
.fh .body {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 48px;
  padding-top: 32px;
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}
.fh .body .prose p {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.45;
  margin: 0 0 16px;
}
.fh .body .prose p:last-child { margin-bottom: 0; }
.fh .body .prose strong { color: var(--crimson); font-weight: 700; }
.fh .body .prose em.clover { color: var(--clover); font-style: italic; font-weight: 500; }
.fh .meta { display: flex; flex-direction: column; gap: 14px; }
.fh .meta .row { border-top: 1px solid var(--ink); padding-top: 10px; }
.fh .meta .row:first-child { border-top: none; padding-top: 0; }
.fh .meta .k { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.fh .meta .v { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; margin-top: 3px; }
.fh .meta .v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--crimson); }
.fh .meta .v a:hover { color: var(--crimson); }

/* Finlity feature section */
.finlity .feature {
  padding: 8px 0 28px;
}
.finlity .shot {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--crimson);
  background: var(--cream-2);
}
.finlity .kick {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  margin: 28px 0 0;
  max-width: 900px;
}
.finlity .kick em { color: var(--crimson); font-style: italic; font-weight: 700; }
.finlity .body {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 48px;
  padding-top: 28px;
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}
.finlity .body .prose p {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  line-height: 1.45;
  margin: 0 0 16px;
}
.finlity .body .prose p:last-child { margin-bottom: 0; }
.finlity .body .prose strong { color: var(--crimson); font-weight: 700; }
.finlity .body .prose em.clover { color: var(--clover); font-style: italic; font-weight: 500; }
.finlity .meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.finlity .meta .row {
  border-top: 1px solid var(--ink);
  padding-top: 10px;
}
.finlity .meta .row:first-child { border-top: none; padding-top: 0; }
.finlity .meta .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.finlity .meta .v {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 18px;
  margin-top: 3px;
}
.finlity .meta .v a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--crimson);
}
.finlity .meta .v a:hover { color: var(--crimson); }

/* Responsive fixes */
@media (max-width: 1100px) {
  .dek { grid-template-columns: 1fr; gap: 20px; }
  .dek .folio .num { font-size: 72px; }
  .dek .body p:first-child::first-letter { font-size: 80px; }
  .about { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip .stat { border-right: none; border-bottom: 1px solid var(--ink); }
  .atlas .wrap { grid-template-columns: 1fr; }
  .atlas .countries { grid-template-columns: repeat(3, 1fr); }
  .langs { grid-template-columns: 1fr; }
  .langs .lang:last-child { border-left: 3px solid var(--ink); border-top: none; }
  .mantras .grid > * { grid-column: span 12 !important; }
  .career .row { grid-template-columns: 100px 1fr; }
  .career .desc, .career .tag-r { display: none; }
  .ironman { grid-template-columns: 1fr; }
  .speaking { grid-template-columns: 1fr; }
  .now .grid { grid-template-columns: 1fr; }
  .finlity .body { grid-template-columns: 1fr; gap: 20px; }
  .finlity .shot { box-shadow: 6px 6px 0 var(--crimson); }
  .fh .fh-stats { grid-template-columns: repeat(2, 1fr); }
  .fh .fh-stat { border-right: none; border-bottom: 1px solid var(--ink); }
  .fh .fh-stat:nth-child(2) { border-right: none; }
  .fh .body { grid-template-columns: 1fr; gap: 20px; }
  .fh .poster { box-shadow: 6px 6px 0 var(--clover); padding: 22px 22px 20px; }
  .colophon .grid { grid-template-columns: 1fr 1fr; }
  .nav ul { display: none; }
}