:root{
  --bg:#dfe5ec; --ink:#1f2a6b; --gold:#b8861f; --muted:#4a5378; --line:#b9c2d3;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#141933; --ink:#cdd6f6; --gold:#e3b54d; --muted:#98a2c8; --line:#2d3563; }
}
:root[data-theme="dark"]{ --bg:#141933; --ink:#cdd6f6; --gold:#e3b54d; --muted:#98a2c8; --line:#2d3563; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-size:clamp(1.12rem,2vw,1.28rem);line-height:1.62}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.hero{position:relative;height:88vh;min-height:30rem}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y}
.hero .name{position:absolute;left:clamp(1.2rem,6vw,5rem);bottom:clamp(1.5rem,6vh,4rem);pointer-events:none}
.name h1{font-style:italic;font-weight:500;font-size:clamp(3.4rem,11vw,7.5rem);line-height:.9;margin:0}
.name p{margin:.6rem 0 0;color:var(--muted);max-width:22rem}

main{max-width:40rem;margin:0 auto;padding:2rem clamp(1.2rem,5vw,2rem) 5rem}
section{margin:0 0 4.5rem}
h2{font-style:italic;font-weight:500;font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 1rem;line-height:1.15}
p{margin:0 0 1.1rem}
.quiet{color:var(--muted)}

/* dictionary */
dl{margin:0}
.entry{border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry button{all:unset;display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:.7rem 0;cursor:pointer;font-size:1.5rem;font-style:italic}
.entry button span{font-size:1rem;color:var(--muted);font-style:normal;transition:transform .25s}
.entry[data-open="true"] button span{transform:rotate(45deg)}
.entry dd{margin:0;max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)}
.entry[data-open="true"] dd{max-height:12rem}
.entry dd p{padding:0 0 1rem;margin:0}
@media (prefers-reduced-motion: reduce){.entry dd,.entry button span{transition:none}}

blockquote{margin:0;padding-left:1.2rem;border-left:2px solid var(--gold);font-style:italic}
footer{max-width:40rem;margin:0 auto;padding:0 clamp(1.2rem,5vw,2rem) 3rem;color:var(--muted);font-size:1rem}

/* added for IN THIS ELECTRIC SEA: link back to the archive */
.ites-back{position:fixed;top:calc(.8rem + env(safe-area-inset-top,0px));left:clamp(1rem,4vw,3rem);z-index:2;font-size:1rem;color:var(--muted)}
.ites-back a{color:inherit}