@font-face{font-family:"Bricolage";src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Literata";src:url(/fonts/literata-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Literata";src:url(/fonts/literata-latin-wght-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{--paper:#edf0f3;--ink:#1d2938;--muted:#5d6a79;--moss:#3d6a57;--rule:#c8d0d9;--sheet:#f7f9fa}
@media (prefers-color-scheme:dark){:root{--paper:#141b24;--ink:#e3e8ee;--muted:#9aa6b4;--moss:#8cbfa5;--rule:#2c3745;--sheet:#1a232e}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.7 "Literata",Georgia,serif;font-optical-sizing:auto}
a{color:var(--moss);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}

.frame{max-width:68rem;margin:0 auto;padding:0 clamp(16px,5vw,56px)}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.6rem 0;font:500 .95rem/1 "Bricolage",system-ui,sans-serif}
.bar a{color:var(--ink);text-decoration:none}
.bar a:hover{color:var(--moss)}
.bar nav{display:flex;gap:1.5rem}
.bar .home{font-weight:700;letter-spacing:-.01em}

/* The name, read like a dictionary entry */
.name{margin:clamp(3rem,10vw,7.5rem) 0 clamp(2.5rem,6vw,4.5rem)}
.name h1{display:flex;flex-wrap:wrap;column-gap:clamp(.6rem,2.4vw,2rem);margin:0;font:700 clamp(3.4rem,17vw,11.5rem)/.82 "Bricolage",system-ui,sans-serif;letter-spacing:-.045em}
.part{display:flex;flex-direction:column}
.part .gloss{margin-top:clamp(.9rem,2vw,1.4rem);padding-top:.7rem;border-top:2px solid var(--moss);font:italic 400 clamp(1.15rem,2.4vw,1.6rem)/1.2 "Literata",Georgia,serif;letter-spacing:0;color:var(--moss)}
.part:last-child .word{color:var(--muted)}
.name p{max-width:34rem;margin:clamp(1.8rem,4vw,2.8rem) 0 0;font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .part:first-child{animation:in-left .9s cubic-bezier(.2,.7,.2,1) both}
  .part:last-child{animation:in-right .9s cubic-bezier(.2,.7,.2,1) both}
  .gloss{animation:gloss .6s .55s ease-out both}
}
@keyframes in-left{from{transform:translateX(.18em)}}
@keyframes in-right{from{transform:translateX(-.18em)}}
@keyframes gloss{from{opacity:0;transform:translateY(-.4rem)}}

.story{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,38rem);gap:1rem clamp(1.5rem,5vw,4rem);padding:2.4rem 0 4rem;border-top:1px solid var(--rule)}
.story time{font:500 .95rem/1.6 "Bricolage",system-ui,sans-serif;color:var(--muted)}
.story h2{margin:0 0 .6rem;font:650 clamp(1.5rem,3vw,2rem)/1.15 "Bricolage",system-ui,sans-serif;letter-spacing:-.02em}
.story h2 a{color:var(--ink);text-decoration:none}
.story h2 a:hover{color:var(--moss)}
.story p{margin:0 0 .9rem}
@media (max-width:720px){.story{grid-template-columns:1fr}}

/* Reading pages */
.read{max-width:38rem;padding:clamp(2.5rem,7vw,5rem) 0 4rem}
.read h1{margin:.3rem 0 2rem;font:700 clamp(2.2rem,6vw,3.6rem)/1.02 "Bricolage",system-ui,sans-serif;letter-spacing:-.035em}
.read .when{font:500 .95rem/1.4 "Bricolage",system-ui,sans-serif;color:var(--muted)}
.read p{margin:0 0 1.15rem}
.read .langs{display:flex;gap:1.2rem;margin:-1rem 0 2rem;font:500 .9rem/1 "Bricolage",system-ui,sans-serif}
.read .langs a[aria-current]{color:var(--ink);text-decoration:none}
.english{margin-top:3.5rem;padding:2rem clamp(1.2rem,4vw,2rem) .8rem;background:var(--sheet);border-left:3px solid var(--moss)}
.english h2{margin:0 0 1rem;font:650 1.4rem/1.2 "Bricolage",system-ui,sans-serif;letter-spacing:-.015em}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding:1.6rem 0 2.6rem;border-top:1px solid var(--rule);font:400 .9rem/1.5 "Bricolage",system-ui,sans-serif;color:var(--muted)}
footer a{color:var(--muted)}