/* Boston guides: the home page's tokens (near-black ground, warm off-white type, one gold accent), set for reading. */
:root{
  --bg:#0A0908; --bg2:#0F0E0C; --panel:#161410; --ink:#F5F1E8; --ink2:#E4DDCF; --muted:#B8B0A2; --dim:#8F877A;
  --line:#34302A; --line2:#4A443B; --gold:#C9A66B; --gold-2:#E6C88E; --gold-ink:#3A2E18;
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --gutter:max(16px, env(safe-area-inset-left, 0px)); --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
img{max-width:100%; display:block}
[hidden]{display:none !important}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:300; line-height:1.08; text-wrap:balance}
p{margin:0}
:focus-visible{outline:1px solid var(--gold); outline-offset:4px}
.wrap{max-width:1240px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.wrap.narrow{max-width:780px}
.eyebrow{font-size:0.76rem; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold)}
.lead{font-size:clamp(1.05rem, 1.5vw, 1.3rem); color:var(--ink2); max-width:36em}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 24px; border-radius:999px; font-family:var(--body); font-size:0.9rem; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .15s ease, border-color .15s ease, color .15s ease}
.btn-gold{background:var(--gold); color:var(--bg2); border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-2)}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line2)}
.btn-line:hover{border-color:var(--gold); color:var(--gold)}

.nav{position:sticky; top:0; z-index:9; background:rgba(10,9,8,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:64px}
.brand{font-family:var(--display); font-size:1.3rem; letter-spacing:0.42em; text-transform:uppercase; color:var(--gold); text-decoration:none; padding-left:.42em}
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav ul a{white-space:nowrap; text-decoration:none; font-size:0.8rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted)}
.nav ul a:hover{color:var(--ink)}
@media (max-width:900px){ .nav ul{display:none} }

/* Article */
.post{padding:clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px)}
.crumbs{font-size:0.82rem; color:var(--dim); margin-bottom:22px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--gold)}
.post h1{font-size:clamp(2.4rem, 5.6vw, 4.2rem); margin:14px 0 22px}
.prose{font-size:1.07rem; line-height:1.75; color:var(--ink2)}
.prose > * + *{margin-top:1.1em}
.prose .dek{font-size:clamp(1.15rem, 1.8vw, 1.35rem); line-height:1.55; color:var(--ink); padding-bottom:1.3em; border-bottom:1px solid var(--line)}
.prose h2{font-size:clamp(1.9rem, 3.6vw, 2.6rem); color:var(--ink); margin-top:1.9em}
.prose h3{font-family:var(--body); font-size:1.12rem; font-weight:700; color:var(--ink); line-height:1.35; margin-top:1.6em}
.prose h2 + *, .prose h3 + *{margin-top:.6em}
.prose a{color:var(--gold); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.prose a:hover{color:var(--gold-2)}
.prose strong{color:var(--ink); font-weight:700}
.prose ul, .prose ol{padding-left:1.25em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--gold)}
.prose blockquote{margin-left:0; margin-right:0; border-left:2px solid var(--gold); padding:.2em 0 .2em 1.1em; font-family:var(--display); font-style:italic; font-size:1.4rem; line-height:1.35; color:var(--ink)}
.prose table{width:100%; border-collapse:collapse; font-size:0.92rem; line-height:1.45; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose th{text-align:left; font-weight:500; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--dim); padding:0 14px 10px 0; border-bottom:1px solid var(--line2); white-space:nowrap}
.prose td{padding:12px 14px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; min-width:120px}
.prose td:first-child{color:var(--ink); font-weight:500}

.faq, .sources{margin-top:clamp(40px, 6vw, 64px); padding-top:clamp(28px, 4vw, 40px); border-top:1px solid var(--line)}
.faq h2, .sources h2{font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom:6px}
.faq h3{font-family:var(--body); font-size:1.05rem; font-weight:700; color:var(--ink); margin-top:22px; line-height:1.4}
.faq p{color:var(--ink2); margin-top:6px; line-height:1.7}
.sources p{font-size:0.88rem; color:var(--dim)}
.sources ol{margin:14px 0 0; padding-left:1.3em; font-size:0.88rem; color:var(--muted); display:grid; gap:6px}
.sources a{color:var(--muted); text-underline-offset:3px; overflow-wrap:anywhere}
.sources a:hover{color:var(--gold)}

/* Waitlist box */
.cta{margin:2.2em 0; border:1px solid var(--gold); background:var(--panel); padding:clamp(22px, 4vw, 34px); display:grid; gap:12px}
.prose .cta h2{margin-top:0; font-size:clamp(1.7rem, 3.2vw, 2.3rem)}
.cta h2 + p{margin-top:0}
.cta > p{color:var(--muted); font-size:0.98rem; line-height:1.6}
.wl{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; margin-top:6px}
.wl label{display:grid; gap:5px; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--dim); font-weight:500; line-height:1.2}
.wl input{width:100%; min-width:0; background:var(--bg); color:var(--ink); border:1px solid var(--line2); padding:13px 14px; font:inherit; font-size:1rem; letter-spacing:0; text-transform:none; border-radius:4px}
.wl input:focus{border-color:var(--gold); outline:none}
.wl .hp{position:absolute; left:-9999px; width:1px; height:1px}
.wl .btn{padding:14px 22px}
.wl .note{grid-column:1/-1; font-size:0.84rem; color:var(--dim); line-height:1.5}
.wl .note b{color:var(--gold); font-weight:500}
@media (max-width:640px){ .wl{grid-template-columns:1fr} }
.done{display:grid; gap:6px}
.done h3{font-family:var(--display); font-size:clamp(1.7rem, 3.2vw, 2.3rem); font-weight:300; color:var(--ink)}
.done h3 em{font-style:normal; color:var(--gold)}
.done p{color:var(--muted)}

/* Cards */
.intro{padding:clamp(48px, 8vw, 104px) 0 clamp(20px, 3vw, 32px)}
.intro h1{font-size:clamp(2.6rem, 6vw, 5rem); margin:14px 0 18px; max-width:14em}
.more{padding:clamp(40px, 6vw, 72px) 0; background:var(--bg2); border-top:1px solid var(--line)}
.more.first{background:transparent; border-top:0; padding-top:12px}
.more .eyebrow{margin-bottom:18px}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.card{display:grid; gap:10px; align-content:start; text-decoration:none; border:1px solid var(--line2); background:var(--panel); padding:24px; transition:border-color .15s ease}
.card:hover{border-color:var(--gold)}
.card h3{font-size:1.65rem; color:var(--ink)}
.card p{font-size:0.92rem; color:var(--muted); line-height:1.55}
.card .eyebrow{margin:0; font-size:0.66rem}
.all{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

footer{border-top:1px solid var(--line); padding:32px 0 40px; color:var(--dim); font-size:0.85rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 36px; justify-content:space-between; align-items:center}
footer .brand{font-size:1.05rem}
footer ul{display:flex; flex-wrap:wrap; gap:20px; list-style:none; margin:0; padding:0}
footer a{text-decoration:none} footer a:hover{color:var(--ink)}