:root { --paper:#f4f0e6; --paper-2:#e9e2d3; --ink:#171713; --muted:#686258; --line:rgba(23,23,19,.18); --gold:#9b7938; --display:"EB Garamond",Georgia,serif; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); font-size:18px; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:20; padding:.7rem 1rem; background:var(--ink); color:#fff; font:600 .7rem/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; }
.skip-link:focus { top:1rem; }
.masthead { position:relative; z-index:10; min-height:74px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 4vw; border-bottom:1px solid var(--line); background:rgba(244,240,230,.97); }
.brand { text-decoration:none; font:600 .93rem/1 var(--display); letter-spacing:.13em; text-transform:uppercase; }
.masthead > span { color:var(--gold); font:600 .58rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.masthead nav { display:flex; justify-content:flex-end; gap:1.2rem; }
.masthead nav a { font:600 .55rem/1 var(--sans); letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.hero { min-height:calc(100svh - 74px); display:grid; grid-template-columns:minmax(160px,.28fr) minmax(0,1.45fr) minmax(280px,.7fr); border-bottom:1px solid var(--line); }
.hero-index { padding:6vh 3vw 4vh; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; color:var(--gold); }
.hero-index span,.eyebrow,.source-note>span,.hero-thesis>span,.purchase>span { font:600 .58rem/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.hero-index strong { font:400 clamp(5rem,11vw,10rem)/.8 var(--display); }
.hero-index i { color:var(--muted); font-size:1rem; line-height:1.2; }
.hero-copy { padding:11vh 5vw 6vh; display:flex; flex-direction:column; align-items:flex-start; }
.hero-copy h1 { max-width:16ch; margin:3vh 0 2.5vh; font:500 clamp(3.4rem,7vw,7.5rem)/.82 var(--display); letter-spacing:-.055em; }
.hero-copy h1 em,.article-header h2 em { color:var(--gold); font-weight:400; }
.dek { max-width:34rem; margin:0; color:var(--muted); font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.45; }
.hero-copy blockquote { margin:auto 0 0; padding-top:4vh; color:var(--ink); font-size:clamp(1.4rem,2.4vw,2.5rem); font-style:italic; line-height:1.03; }
.hero-actions { display:flex; align-items:center; gap:1.5rem; margin-top:2rem; }
.hero-actions>a:not(.button) { color:var(--muted); font:600 .58rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.15rem; border:1px solid var(--ink); background:transparent; font:600 .58rem/1 var(--sans); letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.button.dark { background:var(--ink); color:var(--paper); }
.byline { margin:1.4rem 0 0; font:500 .62rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.hero-thesis { padding:11vh 4vw 5vh; border-left:1px solid var(--line); background:var(--paper-2); display:flex; flex-direction:column; }
.hero-thesis span { color:var(--gold); }
.hero-thesis p { margin:auto 0 1rem; color:var(--muted); font-size:clamp(1.25rem,2vw,2rem); font-style:italic; line-height:1.1; }
.hero-thesis strong { font:500 clamp(1.8rem,3vw,3.2rem)/.95 var(--display); }
.source-note { display:grid; grid-template-columns:.7fr 2fr auto; align-items:center; gap:2rem; padding:1.35rem 4vw; border-bottom:1px solid var(--line); }
.source-note>span { color:var(--gold); }
.source-note p { margin:0; color:var(--muted); font-size:.95rem; }
.source-note>a { font:600 .55rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.english-preview { display:grid; grid-template-columns:.8fr 1.2fr; border-bottom:1px solid var(--line); }
.english-preview>header { padding:9vh 5vw; border-right:1px solid var(--line); }
.english-preview h2 { margin:1.5rem 0 .75rem; font:500 clamp(3rem,5.5vw,5.8rem)/.85 var(--display); letter-spacing:-.045em; }
.english-subtitle { max-width:27rem; color:var(--gold); font-size:clamp(1.25rem,2vw,2rem); font-style:italic; line-height:1.1; }
.english-preview>article { padding:9vh 7vw; font-size:1.16rem; line-height:1.62; }
.english-preview .lead { font-size:1.45rem; line-height:1.42; }
.english-preview blockquote { margin:3rem 0; padding:2rem 0; border-block:1px solid var(--line); color:var(--ink); font-size:clamp(1.6rem,3vw,3rem); font-style:italic; line-height:1.05; }
.preview-stop { margin-top:3rem; padding:1.4rem; border:1px solid var(--line); }
.preview-stop span { display:block; margin-bottom:.7rem; color:var(--gold); font:600 .56rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.preview-stop b { font-weight:400; font-style:italic; }
.purchase { grid-column:1/-1; display:grid; grid-template-columns:1fr auto 1.2fr auto; align-items:center; gap:2rem; padding:1.6rem 4vw; border-top:1px solid var(--line); background:var(--paper-2); }
.purchase>span { color:var(--gold); }
.purchase strong { font-size:2rem; font-weight:500; }
.purchase p { margin:0; color:var(--muted); font-size:.9rem; }
.vietnamese-text { max-width:1180px; margin:0 auto; padding:10vh 4vw; }
.article-header { max-width:900px; margin:0 auto 10vh; text-align:center; }
.article-header h2 { margin:1.5rem 0 2rem; font:500 clamp(3.5rem,7vw,7.5rem)/.86 var(--display); letter-spacing:-.05em; }
.article-header>p:not(.eyebrow) { max-width:48rem; margin:1rem auto; color:var(--muted); font-size:1.2rem; line-height:1.55; }
.article-header .context { font-size:1rem !important; font-style:italic; }
.prose { position:relative; max-width:760px; margin:0 auto 9vh; font-size:1.18rem; line-height:1.72; }
.prose p { margin:0 0 1.4rem; }
.prose h3 { margin:.2rem 0 2.1rem; font:500 clamp(2.2rem,4.3vw,4.5rem)/.92 var(--display); letter-spacing:-.035em; }
.salutation { color:var(--gold); font-size:1.5rem; font-style:italic; }
.section-number { position:absolute; right:calc(100% + 3.2rem); top:0; color:var(--gold); font:400 3rem/1 var(--display); }
.prose blockquote { margin:3.5rem -4vw; padding:2.2rem 4vw; border-block:1px solid var(--line); color:var(--ink); font-size:clamp(1.8rem,3.3vw,3.3rem); font-style:italic; line-height:1.08; }
.steps { margin:2.5rem 0; border-top:1px solid var(--line); }
.steps>div { display:grid; grid-template-columns:3rem 1fr auto; align-items:start; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.steps b { color:var(--gold); font:600 .6rem/1.4 var(--sans); }
.steps em { color:var(--ink); font:600 .58rem/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.pull { margin:3rem -7vw !important; padding:2rem 7vw; color:var(--ink); font-size:clamp(1.6rem,3vw,3rem); font-weight:500; line-height:1.08; }
.nail-analogy { margin:3rem -4vw; padding:2rem 4vw; background:var(--paper-2); }
.nail-analogy span { display:block; margin-bottom:1rem; color:var(--gold); font:600 .58rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.nail-analogy p { margin:0; font-size:1.25rem; font-style:italic; }
.jewels { margin:2rem 0; padding-left:1.3rem; }
.jewels li { margin-bottom:1.25rem; padding-left:.7rem; }
.evidence { display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; margin:3rem -5vw; padding:2.2rem 5vw; border-block:1px solid var(--line); }
.evidence strong { color:var(--gold); font:500 2.2rem/1 var(--display); }
.evidence span { align-self:end; padding-bottom:.25rem; font:600 .62rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.limitation { padding-left:1.4rem; border-left:3px solid var(--gold); color:var(--muted); font-size:1rem; }
.objection { color:var(--ink) !important; font-size:clamp(1.35rem,2.3vw,2.2rem) !important; }
.field-test { margin:2.5rem 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.field-test li { display:grid; grid-template-columns:.85fr 1.15fr; gap:1.5rem; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.field-test b { font-weight:500; }
.field-test span { color:var(--muted); }
.conclusion { margin-bottom:6vh; }
.conclusion .final { color:var(--ink); }
.signature { color:var(--gold); font-size:2rem; font-style:italic; }
.references { max-width:760px; margin:0 auto; padding-top:3rem; border-top:1px solid var(--line); }
.references h3 { font-size:2rem; font-weight:500; }
.references li { margin-bottom:1rem; color:var(--muted); line-height:1.5; }
.publication-record { padding:7vh 5vw; border-top:1px solid var(--line); background:var(--paper-2); }
.record-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:2rem 0; border-block:1px solid var(--line); }
.record-grid div { min-height:110px; padding:1.25rem; border-right:1px solid var(--line); }
.record-grid div:last-child { border:0; }
.record-grid span { display:block; margin-bottom:1rem; color:var(--gold); font:600 .55rem/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; }
.record-grid b { font-weight:500; }
.publication-record>p:last-child { max-width:70rem; margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; min-height:100px; padding:1.5rem 4vw; background:var(--ink); color:var(--paper); }
.site-footer p { margin:0; color:#aaa397; font-size:.75rem; }
.site-footer>a:last-child { justify-self:end; font:600 .55rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:900px) {
  .masthead { grid-template-columns:1fr auto; }
  .masthead>span { display:none; }
  .hero { grid-template-columns:1fr; min-height:0; }
  .hero-index { min-height:0; flex-direction:row; align-items:baseline; padding:1.2rem 6vw; border-right:0; border-bottom:1px solid var(--line); }
  .hero-index strong { font-size:2.3rem; }
  .hero-copy { padding:8vh 7vw 6vh; }
  .hero-copy blockquote { margin-top:5vh; }
  .hero-thesis { min-height:360px; padding:8vh 7vw; border-left:0; border-top:1px solid var(--line); }
  .source-note { grid-template-columns:1fr; gap:.6rem; }
  .english-preview { grid-template-columns:1fr; }
  .english-preview>header { border-right:0; border-bottom:1px solid var(--line); }
  .purchase { grid-template-columns:1fr; gap:.8rem; }
  .section-number { position:static; display:block; margin-bottom:.7rem; }
  .pull { margin:3rem 0 !important; padding:2rem 0; }
  .record-grid { grid-template-columns:1fr 1fr; }
  .record-grid div:nth-child(2) { border-right:0; }
  .record-grid div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .site-footer { grid-template-columns:1fr; text-align:center; }
  .site-footer>a:last-child { justify-self:center; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .masthead { padding:0 1.2rem; }
  .masthead nav { gap:.65rem; }
  .masthead nav a:first-child { display:none; }
  .hero-copy h1 { font-size:clamp(3.2rem,17vw,5rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .source-note,.english-preview>header,.english-preview>article,.vietnamese-text,.publication-record { padding-left:1.25rem; padding-right:1.25rem; }
  .article-header h2 { font-size:clamp(3rem,16vw,4.6rem); }
  .prose { font-size:1.08rem; }
  .prose blockquote,.nail-analogy { margin-left:0; margin-right:0; padding-left:0; padding-right:0; background:transparent; }
  .steps>div { grid-template-columns:2rem 1fr; }
  .steps em { grid-column:2; }
  .evidence { margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
  .field-test li { grid-template-columns:1fr; gap:.5rem; }
  .record-grid { grid-template-columns:1fr; }
  .record-grid div { border-right:0; border-bottom:1px solid var(--line); }
}