/* SHELFY · page.css, the plain pages (About, Privacy, Terms): bone and black, like the front door */
:root {
    --bone: #f2efe8; --ink: #000; --ink-dim: rgba(0,0,0,.66); --ink-faint: rgba(0,0,0,.42);
    --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --ui: 'Inter', system-ui, sans-serif;
    --gutter: clamp(1.1rem, 4vw, 3.6rem);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--ui); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.4vw, 1.6rem) var(--gutter); }
.mark { font: 800 1.05rem/1 var(--display); letter-spacing: -.045em; text-transform: lowercase; text-decoration: none; display: inline-flex; align-items: center; }
.mark::before { content: ''; display: inline-block; width: 1.05em; height: 0.95em; margin-right: 0.32em; vertical-align: -0.1em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Crect x='1' y='4' width='5' height='18' rx='1'/%3E%3Crect x='8' y='0' width='5' height='22' rx='1'/%3E%3Crect x='14.5' y='3' width='5' height='19' rx='1' transform='rotate(12 17 12)'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Crect x='1' y='4' width='5' height='18' rx='1'/%3E%3Crect x='8' y='0' width='5' height='22' rx='1'/%3E%3Crect x='14.5' y='3' width='5' height='19' rx='1' transform='rotate(12 17 12)'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav { display: flex; gap: .15rem; }
.nav a { font: 500 .8rem/1 var(--ui); color: var(--ink-dim); text-decoration: none; padding: .62rem .85rem; border-radius: 100px; }
.nav a:hover { color: var(--ink); }
.nav a.key { color: var(--bone); background: var(--ink); padding: .62rem 1.15rem; }

.page { max-width: 42rem; padding: clamp(1.5rem, 5vw, 4rem) var(--gutter) clamp(3rem, 8vw, 6rem); }
h1 { font: 800 clamp(2.4rem, 6vw, 4.4rem)/.95 var(--display); letter-spacing: -.045em; margin: 0 0 1rem; text-wrap: balance; }
h2 { font: 800 1.15rem/1.2 var(--display); letter-spacing: -.02em; margin: 2.2rem 0 .5rem; }
.lede { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.5; color: var(--ink-dim); margin: 0 0 1rem; }
p { font-size: .95rem; line-height: 1.65; color: var(--ink-dim); margin: 0 0 .8rem; }
p b { color: var(--ink); font-weight: 600; }
.hint { color: var(--ink-faint); font-size: .8rem; }
.foot-links { margin-top: 3rem; font-size: .8rem; color: var(--ink-faint); }
.foot-links a { text-decoration: none; color: var(--ink-dim); }
@media (max-width: 430px) { .nav a:not(.key) { display: none; } }