
:root{--field:#fbf6ec;--field-2:#f4ecdc;--ink:#2a2119;--ink-2:#5d5145;--ink-3:#8d8072;--light:#b86f2c;--warm:#9a5a1f;--rule:#e6dac4;
--sky:#14161a;--sky-2:#1d2129;--star:#ece6d9;--lamp:#ffd98a;--lamp-2:#f6b24e}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--field);scroll-padding-top:70px}
body{margin:0;background:var(--field);color:var(--ink);font:400 20px/1.7 "Newsreader",Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:var(--warm)}
:focus-visible{outline:3px solid var(--lamp-2);outline-offset:3px}
button{font:inherit;cursor:pointer}
/* top nav */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));background:rgba(20,22,26,.92);backdrop-filter:blur(6px)}
.top a{color:#e2dccf;text-decoration:none}
.top .mark{font:700 20px/1 "Fraunces",Georgia,serif;color:#f6f0e4}
.top .links{display:flex;gap:18px;flex-wrap:wrap;font:500 13px/1 "IBM Plex Mono",monospace;letter-spacing:.06em}
.top .links a[aria-current]{color:var(--lamp)}
@media (max-width:640px){.top .links{gap:12px;font-size:12px}.top .links a:nth-child(2){display:none}}
/* hero */
.hero{position:relative;height:clamp(500px,78vh,780px);display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(0deg,rgba(12,14,17,.9) 0%,rgba(12,14,17,.3) 40%,rgba(12,14,17,0) 62%),linear-gradient(90deg,rgba(12,14,17,.38) 0%,rgba(12,14,17,0) 52%),url("/img/hero.jpg") center 80%/cover no-repeat}
.hero .inner{position:relative;max-width:1100px;width:100%;margin:0 auto;padding:0 28px 9vh}
h1{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(72px,14vw,184px);line-height:.86;letter-spacing:-.02em;margin:0;color:#f6f0e4}
.tag{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:clamp(23px,3vw,34px);color:var(--lamp);margin:22px 0 0}
.by{font:500 15px/1 "IBM Plex Mono",monospace;letter-spacing:.24em;text-transform:uppercase;color:#e2dccf;margin:24px 0 0}
/* the night band: the one bold place */
.nightband{background:radial-gradient(ellipse at 85% 0%,#232836 0,var(--sky) 58%);color:var(--star);padding:64px 0 76px}
.nb-inner{max-width:820px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.ask{font:600 clamp(34px,5.4vw,54px)/1.08 "Fraunces",Georgia,serif;margin:0 0 22px;color:#f6f0e4;text-wrap:balance}
.whobox{margin:0 0 30px;padding:20px 22px 18px;border:1px solid #3a4152;border-radius:16px;background:rgba(255,255,255,.03)}
.who-q{font:600 22px/1.2 "Fraunces",Georgia,serif;color:#f6f0e4;margin:0 0 14px}
.who{display:flex;flex-wrap:wrap;border:2px solid var(--lamp-2);border-radius:999px;padding:5px;gap:6px;width:max-content;max-width:100%}
.seg{background:none;border:0;color:#e9e2d4;border-radius:999px;padding:14px 26px;font:600 16px/1 "IBM Plex Mono",monospace;letter-spacing:.04em;transition:background .2s,color .2s}
.seg:hover{background:rgba(246,178,78,.14)}
.seg[aria-pressed="true"]{background:var(--lamp);color:#1a1712;box-shadow:0 0 18px rgba(255,217,138,.35)}
.who-hint{margin:12px 0 0;font-size:17px;font-style:italic;color:#cfc8ba}
@media (max-width:560px){.who{width:100%}.seg{flex:1 1 auto;padding:13px 12px;font-size:13px;letter-spacing:0;white-space:nowrap}.seg[data-for="me"]{flex:0 0 auto}.whobox{padding:18px 16px 16px}}
.doors{list-style:none;margin:0;padding:0;border-top:1px solid #333845}
.doors li{border-bottom:1px solid #333845}
.door{display:block;width:100%;text-align:left;background:none;border:0;color:var(--star);padding:20px 40px 20px 0;position:relative;
  font:italic 400 clamp(21px,2.6vw,27px)/1.35 "Fraunces",Georgia,serif;transition:color .2s}
.door::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#4a4f5c;transition:background .25s,box-shadow .25s}
.door:hover,.door.on{color:#fff}
.door:hover::after,.door.on::after{background:var(--lamp-2);box-shadow:0 0 0 6px rgba(246,178,78,.18),0 0 24px 6px rgba(255,207,115,.35)}
.answer{margin-top:28px}
.answer .card{border-radius:14px;padding:28px 28px 24px;border:2px solid #c79c57;background:radial-gradient(circle at 85% 20%,#2c2216 0,#101215 62%);color:#ece6d9;animation:rise .35s ease-out}
.answer.sand .card{background:#efe6d5;color:#2b1f17;border-color:#c9a17e}
.answer.fleece .card{background:#f2efe7;color:#1d221c;border-color:#a9b79c}
.answer.dawn .card{background:linear-gradient(160deg,#fbe8c6,#f3d9b8);color:#2a2119;border-color:#d4a462}
.answer.window .card{background:radial-gradient(circle at 82% 18%,#3b301d 0,#141a28 62%);color:#ece6d9;border-color:#d9a94f}
.answer.ember .card{background:radial-gradient(circle at 80% 15%,#4a2a17 0,#1b1411 65%);color:#f1e7da;border-color:#c98a4d}
@keyframes rise{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.answer .card{animation:none}.door,.door::after{transition:none}}
.a-book{font:600 clamp(28px,3.6vw,36px)/1.1 "Fraunces",Georgia,serif;margin:0 0 6px}
.a-sub{font-style:italic;margin:0 0 14px;opacity:.85}
.a-says{margin:0 0 10px}
.a-small{font:500 13px/1.5 "IBM Plex Mono",monospace;letter-spacing:.04em;opacity:.8;margin:0 0 18px}
.a-acts{display:flex;gap:12px;flex-wrap:wrap}
.go,.copy{display:inline-block;border-radius:999px;padding:13px 22px;font:500 14px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-decoration:none}
.go{background:var(--lamp);color:#1a1712;border:0}
.copy{background:none;border:1px solid currentColor;color:inherit}
.a-sent{font-size:16px;margin:14px 0 0;opacity:.85}
/* body */
main{max-width:720px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
section{padding:64px 0 8px}
h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:32px;line-height:1.15;margin:0 0 18px}
.k{font:700 26px/1.2 "Fraunces",Georgia,serif;color:var(--warm);margin:0 0 14px}
p{margin:0 0 1.1em}
.lede{font-size:24px;line-height:1.55}
.quiet{color:var(--ink-2)}
.books{display:grid;gap:16px;margin:8px 0 0}
.book{display:block;text-decoration:none;border-radius:12px;padding:26px 26px 22px;border:2px solid #c9ad84;box-shadow:0 10px 26px rgba(70,45,20,.12)}
.book .t{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:28px;line-height:1.1;margin:0 0 6px}
.book .l{font-style:italic;font-size:19px;margin:0 0 10px}
.book .d{font-size:17px;line-height:1.5;margin:0}
.book .u{font:500 15px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;margin:16px 0 0}
.book.night{background:radial-gradient(circle at 85% 20%,#2c2216 0,#101215 60%);color:#ece6d9;border-color:#c79c57}.night .l,.night .u{color:#c79c57}
.book.sand{background:#efe6d5;color:#2b1f17;border-color:#c9a17e}.sand .l,.sand .u{color:#9b5536}
.book.fleece{background:#f2efe7;color:#1d221c;border-color:#a9b79c}.fleece .l,.fleece .u{color:#5b6e4f}
.book.dawn{background:linear-gradient(160deg,#fbe8c6,#f3d9b8);color:#2a2119;border-color:#d4a462}.dawn .l,.dawn .u{color:#8a5419}
.book.ember{background:radial-gradient(circle at 80% 15%,#4a2a17 0,#1b1411 65%);color:#f1e7da;border-color:#c98a4d}.ember .l,.ember .u{color:#e0a46b}
.book.window{background:radial-gradient(circle at 82% 18%,#3b301d 0,#141a28 62%);color:#ece6d9;border-color:#d9a94f}.window .l,.window .u{color:#f0c674}
.book:hover{outline:2px solid var(--light);outline-offset:3px}
.listen{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0;padding:0;list-style:none}
.listen a{display:inline-block;padding:12px 20px;border:1px solid var(--light);border-radius:999px;color:var(--ink);text-decoration:none;font:500 14px/1 "IBM Plex Mono",monospace;letter-spacing:.08em}
.listen a:hover{background:var(--light);color:#fff}
.plainlist{padding-left:1.1em}.plainlist li{margin-bottom:.4em}
/* inner page head */
.pagehead{background:radial-gradient(ellipse at 85% 0%,#232836 0,var(--sky) 62%);color:#f6f0e4;padding:72px 0 48px}
.pagehead .inner{max-width:720px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--lamp);margin:0 0 14px}
.ph{font-size:clamp(52px,9vw,96px);line-height:.95}
/* helpers */
.hlist{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--rule)}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.hn{min-width:0}
.hnight{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:20px;line-height:1.35;margin:0 0 4px}
.hbook{margin:0;font-size:17px}
.hcopy{flex:none;background:none;border:1px solid var(--light);color:var(--ink);border-radius:999px;padding:10px 16px;font:500 13px/1 "IBM Plex Mono",monospace;letter-spacing:.06em}
.hcopy:hover{background:var(--light);color:#fff}
.hsent{font-size:16px;color:var(--ink-2);margin-top:12px}
@media (max-width:520px){.hrow{flex-direction:column;align-items:flex-start}}
/* invite */
.talks{display:grid;gap:16px}
.talk{background:var(--field-2);border:1px solid var(--rule);border-radius:12px;padding:22px 24px 8px}
.tt{font:600 25px/1.15 "Fraunces",Georgia,serif;margin:0 0 4px}
.tl{font-style:italic;color:var(--warm);margin:0 0 12px}
.tm{font:500 13px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink-3)}
form.ask{display:grid;gap:16px;margin:8px 0 20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
form.ask label{display:grid;gap:6px;font:500 13px/1.3 "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--ink-2)}
form.ask input,form.ask select,form.ask textarea{font:400 18px/1.4 "Newsreader",Georgia,serif;color:var(--ink);background:#fffdf8;border:1px solid #d8c9ae;border-radius:8px;padding:11px 12px;width:100%}
.hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}
.send{justify-self:start;background:var(--light);color:#fff;border:0;border-radius:999px;padding:14px 28px;font:500 14px/1 "IBM Plex Mono",monospace;letter-spacing:.08em}
.send:disabled{opacity:.6}
.fmsg{font-size:17px;color:var(--ink-2)}
.addr{font:500 15px "IBM Plex Mono",monospace;user-select:all;color:var(--ink)}
/* icons */
.s{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.d{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.1 6}
.bt{display:flex;align-items:center;gap:14px;margin:0 0 6px}
.bt .t,.bt .a-book{margin:0}
.ic{width:56px;height:56px;flex:none;overflow:visible}
.ic.sm{width:30px;height:30px;vertical-align:middle;margin-right:8px}
.book.night .ic{color:#e8d3a6}.book.sand .ic{color:#7a4a30}.book.fleece .ic{color:#4f6145}.book.dawn .ic{color:#7a4c1a}.book.ember .ic{color:#efc79a}.book.window .ic{color:#f3dfb4}
.answer .ic{color:currentColor}
.hbook{display:flex;align-items:center}
@media (max-width:560px){.ic{width:46px;height:46px}}
/* closing + foot */
.closing{position:relative;margin:88px 0 0}
.closing img{display:block;width:100%;height:clamp(320px,46vw,580px);object-fit:cover;object-position:center 55%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 58%,transparent 100%)}
.closing .c-text{position:absolute;left:0;right:0;bottom:34px;max-width:720px;margin:0 auto;padding:0 24px;font-size:22px}
.closing .c-text p{margin:0 0 .4em}.closing .k{color:var(--ink)}
.foot{max-width:720px;margin:30px auto 0;padding:34px 24px 70px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:16px;line-height:1.6}
.foot p{margin:.4em 0}.foot a{color:var(--ink-2)}
@media (max-width:560px){body{font-size:18.5px}.lede{font-size:21px}.k{font-size:24px}.hero .inner{padding:0 18px 8vh}section{padding:52px 0 4px}.answer .card{padding:22px 20px 20px}}
