@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --primary:#1F3A5F;--secondary:#5B6B7F;--accent:#C8743E;--accent-text:#A85A28;
  --bg:#FAF7F2;--text:#1C1C1E;--border:#D6D3CE;
  --grid:rgb(31 58 95/9%);
  
  --serif:'Fraunces',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
/* Everything snaps to a 20px grid: line-heights, margins and paddings are multiples of --u */
body{--u:20px;margin:0;color:var(--text);font:400 14px/var(--u) var(--mono);
  background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--bg);
  background-size:var(--u) var(--u);background-position:var(--gx,0) 0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Messy highlighter: hand-drawn SVG stroke revealed left to right on hover/current */
:root{--hl-yellow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22r%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.035%20.5%22%20numOctaves%3D%222%22%20seed%3D%224%22/%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%227%22/%3E%3C/filter%3E%3Cg%20filter%3D%22url%28%23r%29%22%20fill%3D%22%23E6FF2E%22%3E%3Cpath%20opacity%3D%22.55%22%20d%3D%22M6%209C45%204%2095%208%20150%205s42%203%2046%205l-2%205%203%2015c-50%204-105%200-150%204-20%202-37%200-41-3l3-7z%22/%3E%3Cpath%20opacity%3D%22.35%22%20d%3D%22M2%2014c60-5%20130-4%20196-2l-1%2012c-70%203-130%201-194%203z%22/%3E%3Cpath%20opacity%3D%22.25%22%20d%3D%22M10%2026c55-2%20120%200%20182-3v3c-60%204-125%203-182%204z%22/%3E%3C/g%3E%3C/svg%3E");--hl-pink:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22r%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.035%20.5%22%20numOctaves%3D%222%22%20seed%3D%224%22/%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%227%22/%3E%3C/filter%3E%3Cg%20filter%3D%22url%28%23r%29%22%20fill%3D%22%23FF6FC8%22%3E%3Cpath%20opacity%3D%22.55%22%20d%3D%22M6%209C45%204%2095%208%20150%205s42%203%2046%205l-2%205%203%2015c-50%204-105%200-150%204-20%202-37%200-41-3l3-7z%22/%3E%3Cpath%20opacity%3D%22.35%22%20d%3D%22M2%2014c60-5%20130-4%20196-2l-1%2012c-70%203-130%201-194%203z%22/%3E%3Cpath%20opacity%3D%22.25%22%20d%3D%22M10%2026c55-2%20120%200%20182-3v3c-60%204-125%203-182%204z%22/%3E%3C/g%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
a,.row h2{position:relative;isolation:isolate}
a::after,.row h2::after{content:'';position:absolute;z-index:-1;inset:-.08em -.3em -.04em -.22em;transform:rotate(-1.2deg);
  background:var(--mark,var(--hl-yellow)) center/100% 100% no-repeat;mix-blend-mode:multiply;
  clip-path:inset(0 100% 0 0);transition:clip-path .4s cubic-bezier(.3,.7,.4,1)}
a:hover::after,a:focus-visible::after,.row:hover h2::after,.row.open h2::after,.nav a[aria-current=page]::after{clip-path:inset(0 0 0 0)}
.nav,.links{--mark:var(--hl-pink)}
.row-link{isolation:auto;position:static}
.row-link::after{all:unset;content:'';position:absolute;inset:0;z-index:1}

/* Layout: content edges land on grid lines (880px = 44 squares, centered on a line) */
.page{padding:80px 20px}
.content{max-width:880px;margin:0 auto}
@media(min-width:920px){body{--gx:calc(50% - 430px)}}

/* Nudge text so baselines sit on grid lines (set per font in --b) */
.nav a,.row-link::before,.row h2,.row small,.reveal p,.intro p,.label,.links a{position:relative;top:var(--b,0)}

/* Nav: centered */
.nav{display:flex;justify-content:center;gap:40px;margin-bottom:80px;font-size:13px;letter-spacing:2.5px}
.nav a{color:var(--secondary)}
.nav a[aria-current=page]{color:var(--primary);font-weight:500}

/* Hi */
.intro{font:500 clamp(24px,3.6vw,32px)/40px var(--serif);color:var(--secondary)}
.intro p{margin:0 0 40px}
.intro b,.intro a{font-weight:600;color:var(--primary)}

/* Rows: numbered field-note entries */
.main-list{counter-reset:n}
.row{position:relative;padding:20px 0;counter-increment:n}
.row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgb(31 58 95/22%)}
.row:first-of-type{padding-top:0}
.row-link{display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:start;column-gap:20px}
.row-link::before{content:'No. ' counter(n,decimal-leading-zero);font-size:12px;line-height:40px;letter-spacing:1.5px;color:var(--accent-text)}
.row h2{justify-self:start;margin:0;font:600 clamp(24px,3.6vw,32px)/40px var(--serif);color:var(--primary)}
.row small{display:inline-flex;gap:12px;color:var(--secondary);font-size:12px;line-height:40px;text-transform:uppercase;letter-spacing:1.5px}
.reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s ease,opacity .3s}
.reveal>div{overflow:hidden}
.reveal p{max-width:640px;margin:20px 0 0;color:var(--secondary)}
.reveal a{position:relative;z-index:2;color:var(--accent-text);font-weight:500}
.row.open .reveal{grid-template-rows:1fr;opacity:1}
.details{display:none;position:absolute;z-index:3;right:0;top:20px;height:40px;padding:0 0 0 20px;border:0;background:none;font-size:13px;color:var(--primary);text-decoration:underline;text-underline-offset:4px}
@media(hover:none),(max-width:700px){
  .details{display:block}
  .row-link{grid-template-columns:1fr;padding-right:80px}
  .row-link::before{line-height:20px}
}

/* Footer: centered */
footer{margin-top:80px;text-align:center}
.label{margin:0 0 20px;font:400 12px/var(--u) var(--mono);letter-spacing:2.5px;color:var(--secondary)}
.links{display:flex;justify-content:center;flex-wrap:wrap;gap:0 40px;font-size:13px;letter-spacing:2px;color:var(--primary)}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Baseline nudges, measured: puts each font's baseline exactly on a grid line */
.nav a,.label,.links a{--b:6px}
.reveal p{--b:5px}
.intro p,.row h2{--b:9px}
.row small,.row-link::before{--b:16px}
@media(max-width:700px){.row h2{--b:12px}.row-link::before,.row small{--b:5px;line-height:20px}}