@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Inter:wght@300;400&display=swap');
:root{--bg:#F6F2EA;--fg:#1A1917;--mute:rgba(26,25,23,.52);--rule:rgba(26,25,23,.14)}
html[data-bg=ink]{--bg:#141413;--fg:#EDE8DF;--mute:rgba(237,232,223,.5);--rule:rgba(237,232,223,.14)}
html[data-bg=stone]{--bg:#CFCBC3;--fg:#1A1917;--mute:rgba(26,25,23,.55);--rule:rgba(26,25,23,.16)}
html[data-bg=oxblood]{--bg:#3A1D1B;--fg:#EFE6DA;--mute:rgba(239,230,218,.55);--rule:rgba(239,230,218,.16)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:300 15px/1.75 Inter,-apple-system,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background .6s,color .6s}
a{color:inherit;text-decoration:none}
.mark{font-family:'American Typewriter','Courier Prime','Courier New',monospace;text-transform:lowercase;letter-spacing:.04em;font-weight:400;white-space:nowrap}
.mark .bar{color:var(--mute);margin:0 .32em}
/* landing */
.landing{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:28px}
.landing h1{grid-row:2;margin:0;font-size:clamp(2.1rem,6.2vw,4.6rem);line-height:1;animation:in 1.8s ease both}
.landing nav{grid-row:3;align-self:start;margin-top:2.6em;display:flex;gap:2.4em;animation:in 1.8s .5s ease both}
.links a,.landing nav a{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);transition:color .3s}
.links a:hover,.landing nav a:hover,.links a[aria-current]{color:var(--fg)}
.landing .foot{position:fixed;bottom:26px;left:0;right:0;text-align:center;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);animation:in 1.8s .9s ease both}
@keyframes in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* inner pages */
.top{display:flex;flex-direction:column;align-items:center;gap:22px;padding:56px 24px 0}
.top .mark{font-size:1.15rem}
.links{display:flex;gap:2.2em;flex-wrap:wrap;justify-content:center}
main{max-width:560px;margin:0 auto;padding:13vh 24px 18vh}
.eyebrow{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:0 0 1.4em}
h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-style:italic;font-size:2rem;line-height:1.15;margin:0 0 .5em}
p{margin:0 0 1.2em}
.quiet{color:var(--mute)}
.ul{border-bottom:1px solid var(--rule);padding-bottom:1px;transition:border-color .3s}
.ul:hover{border-color:var(--fg)}
dl{display:grid;grid-template-columns:7.5em 1fr;gap:.9em 1.5em;margin:0}
dt{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding-top:.35em}
dd{margin:0}
section+section{margin-top:5em}
ul.names{list-style:none;padding:0;margin:0;columns:2;column-gap:3em}
ul.names li{break-inside:avoid;padding:.18em 0}
ul.names span{color:var(--mute);font-size:.8rem;margin-left:.5em}
.views img{width:100%;display:block;margin:0 0 4.5em}
.views{max-width:880px}
footer{text-align:center;padding:0 24px 40px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
@media (max-width:600px){ul.names{columns:1}.landing nav{gap:1.6em}dl{grid-template-columns:1fr;gap:.2em}dd{margin-bottom:1em}.landing .foot{bottom:22px;font-size:.58rem}}
main>section{margin-top:4.5em}
main>p.eyebrow+section{margin-top:0}
@media (max-width:600px){footer,.landing .foot{letter-spacing:.12em}}