/* Home page, "built like the dial card". Espresso and paper bands alternate; crema marks the one
   action per section. Fonts are self-hosted (SIL OFL), so no font service sees visitors. */
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --espresso: #1A1310;
  --espresso-2: #2A201B;
  --espresso-line: #3A2C25;
  --espresso-edge: #4A3A31;
  --paper: #F3EDE4;
  --paper-deep: #EAE1D5;
  --paper-line: #D8CDBF;
  --chip: #E4DACD;
  --crema: #D9773F;
  --crema-text: #A84A1C;      /* crema dark enough for text on paper */
  --sage: #6E9E80;
  --sage-text: #4E7A5E;
  --on-dark-muted: #A89C90;
  --on-paper-muted: #6B6058;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--espresso); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 18px/1.5 var(--sans); color: var(--paper); background: var(--espresso); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.band { padding-block: clamp(72px, 10vw, 128px); }
.dark { background: var(--espresso); color: var(--paper); }
.paper { background: var(--paper); color: var(--espresso); }
.paper.deep { background: var(--paper-deep); }

/* Type */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(48px, 7vw, 88px); line-height: 1.0; }
h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; max-width: 20ch; }
h2.huge { font-size: clamp(48px, 7.4vw, 96px); line-height: 1.0; max-width: 16ch; }
h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
.label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px; }
.mono { font-family: var(--mono); font-size: 14px; }
.crema { color: var(--crema); }
.crema-dark { color: var(--crema-text); }
.sage { color: var(--sage-text); font-weight: 600; }
.lede { font-size: 20px; line-height: 1.5; max-width: 54ch; }
.dark .lede, .dark .fine, .dark p.also { color: var(--on-dark-muted); }
.paper .lede { color: #5E544D; }
.fine { font-size: 15px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(26, 19, 16, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--espresso-line); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { font-family: var(--serif); font-size: 26px; text-decoration: none; white-space: nowrap; }
.nav nav { display: flex; align-items: center; gap: 28px; }
.nav nav a { color: var(--on-dark-muted); text-decoration: none; font-size: 15px; }
.nav nav a:hover { color: var(--paper); }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--crema); color: var(--espresso) !important; font: 600 15px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pill:hover { filter: brightness(1.07); }
@media (max-width: 860px) { .nav nav a:not(.pill) { display: none; } }

/* Hero */
.hero { padding-bottom: 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: end; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; padding-bottom: clamp(72px, 9vw, 120px); }
.hero-copy .label { margin: 0; }
.hero-art { position: relative; align-self: end; }
.phone { width: 100%; max-width: 360px; border-radius: 48px; border: 2px solid var(--espresso-line); }
.phone.bleed { margin-left: auto; border-radius: 48px 48px 0 0; border-bottom: 0; max-height: 640px; object-fit: cover; object-position: top; }
.float-card { position: absolute; left: -96px; bottom: 120px; width: 220px; padding: 18px 22px; border-radius: 20px; background: var(--paper); color: var(--espresso); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); animation: rise 700ms 300ms both cubic-bezier(.2, .8, .2, 1); }
.float-card .label { margin: 0 0 4px; font-size: 12px; }
.float-card .num { font-size: 64px; font-weight: 200; line-height: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } }

/* Store modules */
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store { display: flex; flex-direction: column; min-width: 180px; padding: 12px 22px; border-radius: 14px; border: 2px solid var(--espresso-edge); text-decoration: none; }
.store .mono { font-size: 13px; color: var(--on-dark-muted); }
.store b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.store .where { font-size: 13px; color: var(--on-dark-muted); }
.store.light { background: var(--paper); color: var(--espresso); border-color: var(--paper); }
.store.light .mono, .store.light .where { color: var(--on-paper-muted); }
a.store:hover { border-color: var(--crema); }

/* Ruled "menu" columns */
.ruled { display: grid; gap: 40px 48px; margin-top: clamp(40px, 6vw, 72px); }
.ruled.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ruled.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ruled > div { border-top: 2px solid var(--espresso); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ruled p { color: var(--on-paper-muted); font-size: 17px; line-height: 1.5; }
.ruled p.big { font-size: clamp(96px, 11vw, 150px); font-weight: 200; line-height: 1.05; letter-spacing: -0.03em; color: var(--espresso); }
.ruled p.big.crema-dark { color: var(--crema-text); }

/* How it works */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 7vw, 96px); align-items: center; margin-top: clamp(40px, 6vw, 64px); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.steps li { display: flex; gap: 24px; }
.steps .mono { font-size: 18px; padding-top: 2px; }
.steps p { color: var(--on-dark-muted); margin-top: 6px; }
.dial-card { margin: 0; padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: var(--paper); color: var(--espresso); display: flex; flex-direction: column; gap: 14px; }
.dial-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dial-top .label { margin: 0; color: var(--on-paper-muted); }
.chip { background: var(--chip); padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.dial-num { display: flex; align-items: baseline; gap: 12px; }
.dial-num .num { font-size: clamp(120px, 15vw, 190px); font-weight: 200; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.dial-num .unit { font-size: 28px; color: var(--on-paper-muted); }
.dial-card hr { border: 0; border-top: 2px solid var(--paper-line); margin: 4px 0; width: 100%; }

/* Community */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(40px, 7vw, 96px); align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: 24px; }
.split-copy .label { margin: 0; }
.cards { display: grid; gap: 16px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--paper); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.card p { color: #5E544D; font-size: 16px; }
.arrow { color: var(--crema-text); font-weight: 600; text-decoration: none; font-size: 18px; }
.arrow:hover { text-decoration: underline; }
.split .phone { border-color: var(--paper-line); justify-self: center; }

/* Widgets and watch */
.devices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-top: clamp(40px, 6vw, 64px); }
.devices figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.devices .tile { background: var(--espresso-2); border-radius: 24px; padding: 16px; display: flex; align-items: center; justify-content: center; }
.devices .tile img { border-radius: 16px; }
.devices .tile.watch { background: #000; border-radius: 44px; padding: 14px; }
.devices .tile.watch img { border-radius: 30px; }
.devices figcaption { color: var(--on-dark-muted); }
p.also { margin-top: 32px; font-size: 16px; }
.devices .extras { display: none; }

/* Privacy and CTA */
.chips { list-style: none; padding: 0; margin: 28px 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chips li { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; border: 2px solid var(--espresso-edge); padding: 8px 18px; border-radius: 999px; }
.cta { margin-top: clamp(56px, 8vw, 96px); padding-top: 40px; border-top: 2px solid var(--espresso-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; }
.cta-title { font-size: clamp(30px, 3.4vw, 44px); max-width: 18ch; }
.cta-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.notify-form { display: flex; gap: 10px; flex-wrap: wrap; }
.notify-form input[type=email] { min-width: 260px; flex: 1; min-height: 52px; padding: 12px 18px; border-radius: 999px; border: 2px solid var(--espresso-edge); background: var(--espresso-2); color: var(--paper); font: 16px var(--sans); }
.notify-form input::placeholder { color: var(--on-dark-muted); }
.big-pill { min-height: 52px; padding: 12px 28px; font-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin-top: 16px; font-size: 16px; }
.notice.good { color: var(--sage); }
.notice.bad { color: #F08A80; }

/* Footer */
.foot { padding-block: 28px; border-top: 1px solid var(--espresso-line); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--on-dark-muted); }
.foot nav { display: flex; gap: 24px; }
.foot nav a { color: var(--on-dark-muted); font-size: 15px; }

/* Narrow screens: single column, phone under the hero text, grids collapse */
@media (max-width: 960px) {
  .ruled.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero-grid, .how-grid, .split { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 8px; }
  .hero-art { justify-self: center; width: min(100%, 320px); }
  .float-card { left: -12px; bottom: 80px; width: 180px; }
  .float-card .num { font-size: 52px; }
  .ruled.three, .ruled.four, .cards.two { grid-template-columns: 1fr; }
  .split .phone { max-width: 300px; }
  .store { min-width: 0; flex: 1 1 150px; }
  .notify-form input[type=email] { min-width: 0; width: 100%; }
}

@media (max-width: 960px) {
  /* Widgets and watch: medium widget full width, then small widget beside the recipe, then the
     timer beside the extras, so no image sits alone in a row. */
  .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; align-items: start; }
  .devices .wide { grid-column: span 2; order: -1; }
  .devices figure { gap: 8px; }
  .devices .tile { padding: 10px; border-radius: 18px; }
  .devices .tile.watch { padding: 10px; border-radius: 32px; }
  .devices .tile.watch img { border-radius: 22px; }
  .devices figcaption { font-size: 12px; }
  .devices .extras { display: flex; flex-direction: column; gap: 10px; align-self: stretch; padding: 16px; border-radius: 18px; border: 2px solid var(--espresso-edge); }
  .devices .extras .mono { color: var(--crema); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
  .devices .extras ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--on-dark-muted); font-size: 15px; line-height: 1.35; }
  p.also { display: none; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .devices { max-width: 640px; }
}

/* Community numbers (home band and /community) */
.counts { display: flex; flex-wrap: wrap; gap: 28px 48px; margin: 8px 0 0; }
.counts div { display: flex; flex-direction: column-reverse; gap: 2px; }
.counts dd { margin: 0; font-size: clamp(44px, 6vw, 72px); font-weight: 200; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.counts dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.paper .counts dt { color: var(--on-paper-muted); }
.dark .counts dt { color: var(--on-dark-muted); }
.founding { display: flex; gap: 12px; align-items: baseline; max-width: 56ch; font-size: 17px; line-height: 1.5; }
.paper .founding { color: #5E544D; }
.dark .founding { color: var(--on-dark-muted); }
.founding .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(110, 158, 128, 0.22); transform: translateY(-1px); }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.arrow.quiet { color: var(--on-paper-muted); font-weight: 500; }
.arrow.quiet-dark { color: var(--on-paper-muted); font-weight: 500; }
.nav nav a[aria-current="page"] { color: var(--paper); }

/* /community */
.community-hero { display: flex; flex-direction: column; gap: 24px; }
.community-hero .label { margin: 0; }
.community-hero h1 { max-width: 14ch; }
.community-hero .counts { margin-top: 16px; padding-top: 28px; border-top: 2px solid var(--espresso-line); }
.community-hero .founding { margin-top: 8px; }
.share-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(40px, 7vw, 96px); align-items: start; }
.why-list { list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; display: flex; flex-direction: column; }
.why-list li { padding: 16px 0; border-top: 2px solid var(--espresso); font-size: 17px; line-height: 1.5; color: var(--on-paper-muted); }
.why-list li b { color: var(--espresso); font-weight: 600; }
.not-shared { margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: var(--paper-deep); color: #5E544D; font-size: 16px; line-height: 1.5; }
.not-shared b { color: var(--espresso); }
.recipe-card { margin: 0; padding: 28px; border-radius: 28px; background: var(--espresso); color: var(--paper); box-shadow: 0 30px 60px rgba(26, 19, 16, 0.25); transform: rotate(1.5deg); position: sticky; top: 100px; }
.rc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rc-head .label { margin: 0; color: var(--on-dark-muted); }
.recipe-card .chip { background: var(--espresso-2); color: var(--paper); }
.recipe-card dl { margin: 0; }
.recipe-card dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--espresso-line); font-size: 16px; }
.recipe-card dt { color: var(--on-dark-muted); }
.recipe-card dd { margin: 0; text-align: right; }
.recipe-card .hl dd { color: var(--crema); font-weight: 600; }
.recipe-card figcaption { margin-top: 14px; font-size: 12px; color: var(--on-dark-muted); }
@media (prefers-reduced-motion: reduce) { .recipe-card { transform: none; } }

.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 6vw, 64px); }
.stage { padding: 28px; border-radius: 24px; border: 2px solid var(--espresso-line); display: flex; flex-direction: column; gap: 10px; }
.stage p { color: var(--on-dark-muted); }
.stage .who { color: var(--crema); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.meter { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; }
.meter i { width: 18px; height: 8px; border-radius: 4px; background: var(--espresso-line); }
.meter i.on { background: var(--sage); }
.meter b { color: var(--sage); font: 400 13px var(--mono); margin-left: 6px; }

.directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 48px; margin-top: clamp(32px, 5vw, 56px); }
.country h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crema); padding-bottom: 10px; border-bottom: 2px solid var(--espresso-line); display: flex; justify-content: space-between; }
.country h3 span { color: var(--on-dark-muted); }
.country ul { list-style: none; margin: 0; padding: 0; }
.country li { padding: 12px 0; border-bottom: 1px solid var(--espresso-line); display: flex; flex-direction: column; gap: 4px; }
.country li .muted { color: var(--on-dark-muted); font-size: 14px; }
.country .roasts { font-size: 15px; color: var(--on-dark-muted); }
.country .roasts a { color: var(--paper); }
.country .roasts .mono { font-size: 12px; }
.join { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.join h2 { margin-bottom: 16px; }
.join-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

@media (max-width: 960px) {
  .share-grid { grid-template-columns: 1fr; }
  .recipe-card { position: static; transform: none; max-width: 460px; }
  .stages { grid-template-columns: 1fr; }
  .join { grid-template-columns: 1fr; align-items: start; }
}