:root{--paper:#f1ece1;--paper2:#e8e1d2;--ink:#1d1b18;--mute:#6b645a;--red:#b8342a;--line:rgba(29,27,24,.16)}
@font-face{font-family:G;src:url(f/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:G;src:url(f/eb-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:G;src:url(f/eb-garamond-latin-400-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:H;src:url(f/caveat-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:H;src:url(f/caveat-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 19px/1.55 G,Georgia,serif;
 }
a{color:inherit}
.hand{font-family:H,cursive;font-weight:500;color:var(--red);font-size:1.25em;line-height:1.2}
.kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:.8rem}
em{font-style:italic;color:var(--red)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.7rem clamp(1rem,4vw,3rem);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top nav{display:flex;gap:clamp(.7rem,2.5vw,2rem);font-size:.95rem}
.top nav a{text-decoration:none;border-bottom:1px solid transparent}.top nav a:hover{border-color:var(--red)}
.seal{display:inline-grid;place-items:center;background:var(--red);color:var(--paper);font-weight:500;letter-spacing:.04em;border-radius:6px;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px var(--red)}
.seal.sm{width:34px;height:34px;font-size:.85rem}
.seal.big{width:84px;height:84px;font-size:2rem;transform:rotate(-8deg);margin-top:1.6rem;opacity:.92}
.hero{display:grid;max-width:1400px;margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;min-height:calc(100vh - 56px);padding:0 clamp(1rem,4vw,3rem);gap:2rem}
.hero h1{font-weight:500;font-size:clamp(3.4rem,9vw,8.5rem);line-height:.92;letter-spacing:-.02em}
.hero h1 em{display:inline-block;padding-left:.6em}
.role{font-size:clamp(1.15rem,1.8vw,1.5rem);margin-top:1.4rem;max-width:22ch;text-wrap:balance}
.note .m{display:none}
.note{margin-top:1.2rem}
.stage{position:relative;height:min(86vh,780px);touch-action:pan-y}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:grab}
.stage canvas:active{cursor:grabbing}
.constr{position:absolute;inset:4% 0;width:100%;height:92%;fill:none;stroke:var(--ink);stroke-width:1;opacity:.28}
.constr .c2{stroke-dasharray:4 6}.constr .arc{stroke:var(--red);stroke-width:2;opacity:1}
.constr text{fill:var(--ink);stroke:none;font:italic 22px G,serif}
.load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.95rem;color:var(--mute)}
.load span{font-size:2rem;color:var(--ink);display:block;text-align:center}
.hint{position:absolute;bottom:3%;font-size:.85rem;letter-spacing:.12em;color:var(--mute);left:50%;transform:translateX(-50%);transition:opacity .6s;pointer-events:none;white-space:nowrap}
.sec{padding:clamp(4rem,10vw,8rem) clamp(1rem,4vw,3rem);max-width:1180px;margin:0 auto;border-top:1px solid var(--line)}
.sec h2{font-weight:500;font-size:clamp(2.1rem,5vw,4rem);line-height:1.02;letter-spacing:-.01em;margin-bottom:2.2rem;max-width:20ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.two>p{font-size:1.15rem;max-width:44ch}
.card{background:var(--paper2);border:1px solid var(--line);border-radius:4px;padding:1.6rem 1.7rem;position:relative}
.card::before{content:"";position:absolute;top:-9px;left:28px;width:70px;height:18px;background:rgba(184,52,42,.18);transform:rotate(-3deg)}
.big-n{font-size:clamp(3.5rem,8vw,5.5rem);line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.eq{font-style:italic;font-size:1.2rem;margin:.4rem 0 .8rem}
.small{font-size:.95rem;color:var(--mute)}
.btn{font:inherit;font-size:.95rem;margin-top:1rem;padding:.55rem 1.1rem;background:var(--ink);color:var(--paper);border:0;border-radius:3px;cursor:pointer;transition:transform .15s}
.btn:active{transform:scale(.96)}.btn.red{background:var(--red)}
.lead{font-size:1.15rem;max-width:58ch;margin:-1rem 0 2rem}
.geo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:center}
#geo{width:100%;max-width:520px;touch-action:none;user-select:none}
.gc{fill:none;stroke:var(--ink);stroke-width:1.5}.gt{fill:rgba(184,52,42,.07);stroke:var(--ink);stroke-width:1.5}
.go{stroke:var(--mute);stroke-width:1.2;stroke-dasharray:5 5}.gd{fill:var(--ink)}
.ga{fill:none;stroke:var(--red);stroke-width:2.5}.ga2{fill:none;stroke:var(--mute);stroke-width:2}
.gp{fill:var(--red);stroke:var(--paper);stroke-width:3;cursor:grab}
.gl{font:italic 20px G,serif;fill:var(--ink)}
.readout p{font-size:1.5rem}.readout b{font-weight:500;color:var(--red);font-variant-numeric:tabular-nums}
.readout .hand{font-size:1.4rem;margin-top:1rem;color:var(--mute)}
.q{font-size:1.35rem;font-style:italic;line-height:1.4}.q cite{display:block;margin-top:1rem;font-size:1rem;color:var(--mute)}
footer{display:flex;gap:1rem;align-items:center;justify-content:center;padding:3rem 1rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--mute)}
@media (max-width:820px){
 body{font-size:17px}
 .hero{grid-template-columns:1fr;padding-top:1.5rem;min-height:0}
 .hero-txt{text-align:left}.seal.big{display:none}.note .d{display:none}.note .m{display:inline}
 .sec h2{text-wrap:balance}
 .hero{gap:.5rem}.hero h1{font-size:clamp(3rem,15vw,4.2rem)}.role{margin-top:.8rem}.note{margin-top:.6rem}
 .stage{height:calc(100svh - 300px);min-height:430px;margin:0 -1rem}
 .two{gap:1.2rem}
 .two,.geo{grid-template-columns:1fr}
 .top nav{font-size:.85rem;gap:.8rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}