/* Layout: one left-aligned column; hero = headline beside a pocket with a photo that peeks out on load; promises in a 2-column grid. */
:root{
  --bg:#f3eef0; --surface:#e9e1e5; --fg:#2a1a24; --muted:#6c5864; --line:#d5c8cf;
  --brass:#9a6b1f; --brass-hi:#c89a4a; --velvet:#4a2340; --velvet-deep:#2f1529; --glow:#f2c97a;
  --display:"Gloock","Iowan Old Style","Georgia",serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1b0f18; --surface:#241520; --fg:#f1e7ec; --muted:#b39fab; --line:#3a2533;
  --brass:#d4a55a; --brass-hi:#f0c77f; --velvet:#5a2a4e; --velvet-deep:#3a1a33; --glow:#f2c97a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1b0f18; --surface:#241520; --fg:#f1e7ec; --muted:#b39fab; --line:#3a2533;
  --brass:#d4a55a; --brass-hi:#f0c77f; --velvet:#5a2a4e; --velvet-deep:#3a1a33; --glow:#f2c97a; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:62rem;margin:0 auto;padding-inline:clamp(1rem,5vw,3rem);padding-block:clamp(1.5rem,4vw,3rem) 2rem;display:grid;gap:clamp(3rem,8vw,6rem)}

.brand{display:flex;align-items:center;gap:.6rem;font:600 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand{line-height:1.4}
.brand .tag{color:var(--muted);opacity:.85}
.brand .pull{flex:none;width:1.6rem;height:.35rem;border-radius:1rem;background:var(--brass)}

.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
h1{font:400 clamp(2.75rem,7.5vw,5.25rem)/1.02 var(--display);letter-spacing:-.01em;margin:0 0 1.5rem;text-wrap:balance}
.lede{font-size:clamp(1.125rem,2vw,1.3rem);line-height:1.55;max-width:34ch;margin:0;color:var(--fg)}
.lede span{display:block}
.lede span+span{color:var(--muted)}

/* The pocket: a stitched velvet pocket with brass rivets, and a photo that slides up to peek out of it */
.cabinet{position:relative;aspect-ratio:5/4;max-width:100%;border-radius:.5rem;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 30%,var(--velvet),var(--velvet-deep));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brass) 25%,transparent)}
.photo{position:absolute;left:32%;width:36%;aspect-ratio:4/5;bottom:24%;border-radius:.3rem;
  background:radial-gradient(120% 80% at 50% 110%,color-mix(in srgb,var(--glow) 85%,transparent),color-mix(in srgb,var(--brass) 35%,var(--velvet-deep)) 70%);
  box-shadow:0 0 0 .35rem #f3eef0,0 .6rem 1.4rem rgba(0,0,0,.45);transform:rotate(-5deg);animation:peek 1.6s cubic-bezier(.2,.8,.2,1) .3s both}
.pocket{position:absolute;left:18%;right:18%;bottom:8%;height:50%;
  border-radius:.4rem .4rem 45% 45% / .4rem .4rem 22% 22%;
  background:linear-gradient(180deg,var(--velvet),var(--velvet-deep));
  box-shadow:0 -1rem 1.6rem -.8rem rgba(0,0,0,.6),inset 0 1px 0 color-mix(in srgb,var(--brass-hi) 40%,transparent)}
.pocket::after{content:"";position:absolute;inset:.7rem;border:1.5px dashed color-mix(in srgb,var(--brass) 55%,transparent);border-radius:inherit}
.rivet{position:absolute;top:.55rem;width:.75rem;height:.75rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--brass-hi),var(--brass));box-shadow:0 .15rem .3rem rgba(0,0,0,.4)}
.rivet.l{left:.55rem} .rivet.r{right:.55rem}
@keyframes peek{from{transform:translateY(55%) rotate(-5deg)}to{transform:translateY(0) rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.photo{animation:none}}


@media(max-width:44rem){.hero{grid-template-columns:minmax(0,1fr)}.cabinet{max-width:26rem}}

.draft{padding:1rem;background:var(--fg);color:var(--bg);text-align:center;font-weight:600}.wrap{gap:3rem}.skip{position:absolute;left:-10000px}.skip:focus{left:1rem;top:1rem;background:var(--bg);padding:1rem;z-index:3}a{color:var(--fg);text-underline-offset:.2em}a:focus-visible{outline:3px solid var(--fg);outline-offset:4px}nav ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0}nav a{display:inline-block;padding:.65rem 0}main{min-width:0}h1{overflow-wrap:break-word}.pending{border:2px dashed var(--muted);padding:1.5rem}footer{margin-top:2rem}

main{max-width:48rem}main p{max-width:66ch}main>p:first-of-type{font-size:1.2rem}
section{margin-top:3rem}h2{font:400 clamp(1.5rem,3vw,2rem)/1.25 var(--display);text-wrap:balance}
.nightstand{padding:1.5rem;border-left:3px solid var(--brass);background:var(--surface)}
.nightstand h2{margin-top:0}.cards{list-style:none;padding:0;display:grid;gap:1.5rem}
.cards li{padding:1.5rem;border:1px solid var(--line);background:var(--surface)}
.cards h2{margin-top:0}.cards p{margin-bottom:0}.direction-link a{display:inline-block;padding:.4rem 0}