/* generated by scripts/build-guides.mjs — tokens and type mirror welcome-v3.html */
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:300 800; font-display:swap; src:url('/fonts/hanken-grotesk.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/fraunces-var.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap; src:url('/fonts/fraunces-italic-var.woff2') format('woff2'); }
:root{
  --bg:#f4ecdd; --panel:#fdf8ee; --ink:#32261a; --body:#4a3d2f; --dim:#6e5d4b; --faint:#9a8872;
  --line:#d8cbb4; --line-strong:#b9a78d;
  --copper:#a2622b; --copper-text:#99581f; --copper-soft:rgba(162,98,43,.14);
  --ice:#22766f;
  --cta-bg:linear-gradient(180deg,#a0673a,#87521f); --cta-fg:#fff6e8; --cta-shadow:0 14px 30px -14px rgba(120,66,20,.55);
  --shadow-warm:64,45,28;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1417; --panel:#18242c; --ink:#e2eaee; --body:#b6c2ca; --dim:#8a99a5; --faint:#5e6d78;
    --line:#263239; --line-strong:#3a4a54;
    --copper:#d98d55; --copper-text:#e39a62; --copper-soft:rgba(217,141,85,.14);
    --ice:#7fd4cf;
    --cta-bg:linear-gradient(180deg,#e8a06a,#cf8247); --cta-fg:#1a0f08; --cta-shadow:0 14px 34px -14px rgba(217,141,85,.45);
    --shadow-warm:0,0,0;
    color-scheme:dark;
  }
}
*{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--body); overflow-x:hidden; font-family:'Hanken Grotesk', -apple-system, system-ui, sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img, svg, picture{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:var(--copper-text); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--ink); }
.s-midnight{ display:none !important; }
@media (prefers-color-scheme: dark){ .s-crema{ display:none !important; } .s-midnight{ display:block !important; } }
.wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(16px, 5vw, 48px); }
h1, h2, h3{ font-family:'Fraunces', Georgia, serif; font-weight:470; margin:0; color:var(--ink); text-wrap:balance; }
h1{ font-variation-settings:'SOFT' 100, 'WONK' 0, 'opsz' 144; font-size:clamp(34px, 4.6vw, 54px); line-height:1.04; letter-spacing:-0.025em; }
h2{ font-variation-settings:'SOFT' 100, 'WONK' 0, 'opsz' 72; font-size:clamp(26px, 3vw, 34px); line-height:1.1; letter-spacing:-0.018em; }
h3{ font-variation-settings:'SOFT' 100, 'opsz' 36; font-size:20px; font-weight:500; margin-top:28px; }
p{ margin:14px 0 0; max-width:42em; text-wrap:pretty; }
b{ color:var(--ink); font-weight:650; }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding-top:22px; padding-bottom:22px; }
.wordmark{ display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:500; font-size:19px; letter-spacing:-0.01em; color:var(--ink); }
.wordmark img{ border-radius:8px; box-shadow:0 1px 2px rgba(var(--shadow-warm),.25); }
.wordmark em{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:420; color:var(--copper); font-size:1.08em; font-variation-settings:'SOFT' 100, 'WONK' 1, 'opsz' 48; margin-left:1px; }
.nav-links{ display:flex; align-items:center; gap:6px 20px; flex-wrap:wrap; font-size:14.5px; font-weight:600; }
.nav-links a{ color:var(--dim); text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
.nav-link{ padding:9px 16px; border:1px solid var(--line); border-radius:99px; }
.nav-link:hover{ border-color:var(--line-strong); }
@media (max-width:560px){ .nav-link{ display:none; } }

.crumbs{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:8px; font-size:14px; color:var(--dim); }
.crumbs a{ color:var(--dim); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.crumbs i{ font-style:normal; color:var(--faint); }
.crumbs span{ color:var(--ink); }

.eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 16px; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-text); }
.eyebrow::after{ content:''; flex:0 0 36px; height:1px; background:currentColor; opacity:.45; }
.lede{ margin-top:18px; font-size:clamp(17px, 1.5vw, 19px); max-width:34em; }
.hero{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:32px clamp(32px, 6vw, 80px); align-items:center; padding:clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.answer{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 28px; margin:22px 0 0; max-width:none; font-variant-numeric:tabular-nums; }
.a-pair{ display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap; }
.answer b{ font-size:clamp(46px, 7vw, 76px); line-height:1; font-weight:700; letter-spacing:-0.035em; color:var(--copper); }
.answer b.ice{ color:var(--ice); }
.a-pair span{ font-size:16px; font-weight:600; color:var(--dim); }
.dial-fig, .vessel-fig{ margin:0; justify-self:center; width:100%; max-width:440px; position:relative; }
.dial-fig::before, .vessel-fig::before{ content:''; position:absolute; inset:-4% -6% 8%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, var(--panel) 0%, var(--panel) 55%, transparent 100%); }
.dial-wrap svg{ width:100%; height:auto; overflow:visible; }
.dial-fig figcaption{ text-align:center; margin-top:4px; font-size:14px; color:var(--dim); }
.vessel-fig{ max-width:300px; }
.vessel-fig img{ width:100%; }

.ctas{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; margin-top:30px; }
.btn{ display:inline-flex; align-items:center; gap:10px; font:inherit; font-weight:680; font-size:17px; text-decoration:none; letter-spacing:-0.005em; border-radius:99px; padding:15px 26px; background:var(--cta-bg); color:var(--cta-fg); box-shadow:var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .2s, filter .2s; }
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); color:var(--cta-fg); }
.weblink{ font-size:16px; font-weight:560; color:var(--dim); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:5px; }
.fine{ margin-top:14px; font-size:14px; color:var(--faint); }

section{ padding:clamp(28px, 4vw, 44px) 0; border-top:1px solid var(--line); }
.tbl{ width:100%; max-width:820px; margin-top:22px; border-collapse:collapse; font-size:16px; font-variant-numeric:tabular-nums; }
.tbl th, .tbl td{ text-align:left; padding:12px 14px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl thead th{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); border-bottom-color:var(--line-strong); }
.tbl tbody th{ font-weight:650; color:var(--ink); }
.tbl tbody th small{ display:block; margin-top:3px; font-size:13.5px; font-weight:400; color:var(--dim); line-height:1.45; max-width:30em; }
.tbl tr.on td b{ color:var(--copper-text); }
.tbl td b{ white-space:nowrap; }
@media (max-width:680px){
  .tbl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td{ display:block; }
  .tbl tr{ padding:14px 0; border-bottom:1px solid var(--line); }
  .tbl th, .tbl td{ border:0; padding:2px 0; }
  .tbl tbody th{ font-size:18px; margin-bottom:4px; }
  .tbl td{ display:flex; justify-content:space-between; gap:16px; }
  .tbl td::before{ content:attr(data-label); color:var(--dim); font-size:14.5px; flex:none; }
  .tbl td{ text-align:right; }
}
.recipe-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; margin-top:18px; font-size:18px; font-variant-numeric:tabular-nums; }
.recipe-line b{ font-size:34px; letter-spacing:-0.02em; color:var(--copper); }
.research{ margin-top:22px; padding:2px 22px 22px; max-width:820px; background:var(--panel); border:1px solid var(--line); border-radius:22px; }
.research p{ font-size:15.5px; line-height:1.6; max-width:none; }
.research > p:first-child{ margin-top:20px; }
.research h3{ margin-top:20px; font-size:18px; }
.sources{ font-size:14px !important; color:var(--dim); }
.sources a{ color:var(--dim); }
.steps{ margin:20px 0 0; padding:0; list-style:none; counter-reset:step; max-width:42em; }
.steps li{ counter-increment:step; position:relative; padding:0 0 16px 46px; }
.steps li::before{ content:counter(step); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--copper); color:var(--copper-text); font-size:14.5px; font-weight:700; display:grid; place-items:center; }
.faq{ margin:18px 0 0; max-width:44em; }
.faq div{ padding:16px 0; border-bottom:1px solid var(--line); }
.faq dt{ font-weight:650; color:var(--ink); }
.faq dd{ margin:6px 0 0; }
.cta{ margin:clamp(8px, 2vw, 20px) 0; padding:clamp(28px, 4vw, 44px); background:var(--panel); border:1px solid var(--line); border-radius:28px; box-shadow:0 30px 60px -48px rgba(var(--shadow-warm),.5); }
.cta + section{ border-top:0; }
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px 40px; }
.links{ list-style:none; margin:12px 0 0; padding:0; }
.links li{ padding:4px 0; }
.links a, .related p a{ text-decoration:none; }
.links a:hover, .related p a:hover{ text-decoration:underline; }

.index-head{ padding:clamp(28px, 5vw, 56px) 0 clamp(28px, 4vw, 44px); }
.grid{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.card{ display:flex; flex-direction:column; align-items:center; text-align:center; height:100%; padding:14px 10px 16px; background:var(--panel); border:1px solid var(--line); border-radius:20px; text-decoration:none; transition:border-color .2s, transform .2s; }
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.card picture{ width:100%; }
.card img{ width:100%; }
.grid-vessels .card picture{ width:min(130px, 80%); }
.c-name{ margin-top:8px; font-family:'Fraunces', Georgia, serif; font-size:16.5px; font-weight:500; line-height:1.2; color:var(--ink); font-variation-settings:'SOFT' 100, 'opsz' 36; text-wrap:balance; }
.c-set{ margin-top:4px; font-size:13.5px; font-weight:600; color:var(--copper-text); font-variant-numeric:tabular-nums; }

footer{ border-top:1px solid var(--line); margin-top:clamp(32px, 5vw, 64px); }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:28px; padding-bottom:40px; color:var(--dim); font-size:14.5px; }
.foot .fmark{ display:flex; align-items:center; gap:10px; }
.foot img{ border-radius:5px; }
.foot nav{ display:flex; gap:10px 24px; flex-wrap:wrap; }
.foot a{ text-decoration:none; color:var(--dim); }
.foot a:hover{ color:var(--ink); }
:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:6px; }
.btn:focus-visible, .nav-link:focus-visible{ border-radius:99px; outline-offset:4px; }

@media (max-width:860px){
  .hero{ grid-template-columns:1fr; }
  .dial-fig{ max-width:340px; }
  .vessel-fig{ max-width:200px; }
}