/* ============================================================================
   web-08 · หมอกเหนือ โรงคั่วกาแฟ

   Concept: what separates a specialty roaster from coffee in general is not the
   bag, it is the roast curve — the temperature-over-time line the roaster watches
   and makes a decision from every ten seconds. It is the one document that says
   what happened to this batch, so it becomes the site's whole visual system.
   Cream ground with fat packaging type — the default for every roastery site —
   is avoided; the ground is the grey-green of morning fog on the hill.

   Signature: the roast curve (.curve). Every coffee has its own, and the shape
   genuinely differs with roast level: a light roast ends earlier and lower than
   a medium. Drawing one identical line on all eight would be a lie, and would
   remove the entire reason for the device.

   Origin colours are a code, not decoration: orange always means Doi Chang.
   They are therefore banned from buttons, links and headings.
   ============================================================================ */

:root {
  --mist: #E7EAE6;
  --mist-2: #DADEDA;
  --roast: #241F1B;
  --fog-line: #BFC5C0;
  --muted: #6E7570;

  --doichang: #D4552E;
  --pangkhon: #2E6F6A;
  --papae: #B58B2C;
  --maechantai: #6B4E9E;

  --container: 1160px;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(72px, 9vw, 128px);
}

body {
  background: var(--mist);
  color: var(--roast);
  font-family: 'Sarabun', system-ui, sans-serif;
  line-height: 1.8;
}

.mono, .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: 'K2D', system-ui, sans-serif; font-weight: 800; line-height: 1.2; }
h3 { font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.25vw, 2.5rem); }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--gap); }
.section--alt { background: var(--mist-2); }
.section--dark { background: var(--roast); color: var(--mist); }
.lede { color: var(--muted); max-width: 56ch; }
.section--dark .lede { color: rgba(231,234,230,.75); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--roast); outline-offset: 3px; }
.section--dark :focus-visible { outline-color: var(--mist); }

/* four-ink signature rule, used as the site's opening and closing mark */
.inkline { display: grid; grid-template-columns: repeat(4,1fr); height: 3px; width: 120px; }
.inkline span:nth-child(1) { background: var(--doichang); }
.inkline span:nth-child(2) { background: var(--pangkhon); }
.inkline span:nth-child(3) { background: var(--papae); }
.inkline span:nth-child(4) { background: var(--maechantai); }
.inkline--full { width: 100%; }

.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--o); margin-right: 8px; vertical-align: -1px; }

/* -- buttons ---------------------------------------------------------------- */
/* Buttons never take an origin colour: those four hues are a data code, and using one on a
   button would tell the reader it means something it does not. */
.btn { display: inline-block; padding: 15px 32px; border-radius: 0; text-decoration: none; font-weight: 600; transition: background .2s, color .2s; }
.btn--primary { background: var(--roast); color: var(--mist); }
.btn--primary:hover { background: #3a322c; }
.btn--ghost { border: 1px solid var(--roast); }
.btn--ghost:hover { background: var(--roast); color: var(--mist); }
.section--dark .btn--primary { background: var(--mist); color: var(--roast); }
.section--dark .btn--ghost { border-color: var(--mist); color: var(--mist); }
.section--dark .btn--ghost:hover { background: var(--mist); color: var(--roast); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* -- header ------------------------------------------------------------------ */
.header { position: sticky; top: 0; z-index: 30; background: var(--mist); border-bottom: 1px solid var(--fog-line); }
.header__inner { max-width: var(--container); margin-inline: auto; padding: 14px var(--pad); display: flex; align-items: center; gap: 28px; }
.brand { font-family: 'K2D', sans-serif; font-weight: 800; font-size: 1.375rem; text-decoration: none; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav__link { text-decoration: none; font-size: .9375rem; padding-block: 3px; border-bottom: 2px solid transparent; }
.nav__link.is-active { border-bottom-color: var(--roast); }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 22px; height: 2px; background: var(--roast); }
@media (max-width: 860px) {
  .burger { display: flex; }
  .nav { position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; align-items: center; gap: 26px; margin: 0; background: var(--mist); transform: translateY(-100%); transition: transform .3s; }
  .nav.is-open { transform: none; }
  .nav__link { font-size: 1.25rem; }
  body.nav-open { overflow: hidden; }
}

/* -- SIGNATURE: the roast curve ------------------------------------------------ */
.curve { display: block; width: 100%; overflow: visible; }
.curve__grid { stroke: var(--fog-line); stroke-width: .5; }
.curve__line { fill: none; stroke: var(--c, var(--roast)); stroke-width: 2; stroke-linecap: round; }
.curve__crack { fill: var(--c, var(--roast)); }
.curve__drop { stroke: var(--c, var(--roast)); stroke-width: 1; stroke-dasharray: 2 3; }
.curve__label { fill: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 7px; }

/* the line draws itself once, left to right, when it first arrives */
.curve__line { stroke-dasharray: 400; stroke-dashoffset: 0; }
.curve.is-armed .curve__line { stroke-dashoffset: 400; }
.curve.is-drawn .curve__line { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .curve.is-armed .curve__line { stroke-dashoffset: 0; } }

.curve--sm { height: 40px; width: 100%; }

/* -- hero ---------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items: center; padding-block: clamp(48px,7vw,96px); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { max-width: 12ch; margin-top: 20px; }
.hero__tag { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--muted); }
.hero__curve { background: var(--mist-2); padding: clamp(20px,3vw,32px); }
.hero__stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 20px; border-top: 1px solid var(--fog-line); padding-top: 14px; }
.hero__stats div { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--fog-line); }
.hero__stats div:last-child { border-right: 0; }
.hero__stats b { display: block; font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
.hero__stats span { font-size: .75rem; color: var(--muted); }

/* -- coffee cards ------------------------------------------------------------------ */
.beans { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 1024px) { .beans { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .beans { grid-template-columns: 1fr; } }
/* three-up variant for the shorter lists. As a class, so the media queries above still win
   on narrow screens — an inline style on the element would not let them. */
.beans--3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 940px) { .beans--3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .beans--3 { grid-template-columns: 1fr; } }
.bean { background: var(--mist-2); display: flex; flex-direction: column; }
.section--alt .bean { background: var(--mist); }
.bean__top { height: 6px; background: var(--c); transition: height .24s; }
.bean:hover .bean__top { height: 10px; }
.bean__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
/* The curve sits above the name, full width: side by side it squeezed the Thai title into
   three broken lines, and the curve is the card's identifying mark anyway. */
.bean__head { display: flex; flex-direction: column-reverse; gap: 10px; }
.bean h3 { font-size: 1.25rem; }
.bean__spec { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--muted); margin-top: 10px; }
/* the tasting note is the line people actually read, so it is the one line in a different face */
.bean__notes { font-family: 'Sarabun', sans-serif; font-size: 1rem; margin-top: 10px; }
.bean details { margin-top: 10px; font-size: .75rem; }
.bean summary { cursor: pointer; font-family: 'IBM Plex Mono', monospace; color: var(--muted); }
.bean details p { font-family: 'IBM Plex Mono', monospace; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.bean__price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fog-line); font-family: 'IBM Plex Mono', monospace; font-size: 1.0625rem; }
.bean__price span { display: block; font-size: .8125rem; color: var(--muted); }
.bean__for { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--muted); margin-top: 8px; }
.bean__stripe { background: repeating-linear-gradient(45deg, var(--doichang) 0 8px, var(--pangkhon) 8px 16px, var(--papae) 16px 24px, var(--maechantai) 24px 32px); }

/* -- filter buttons -------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filter { padding: 8px 18px; border: 1px solid var(--roast); background: none; font-size: .875rem; font-family: inherit; }
.filter[aria-pressed="true"] { background: var(--roast); color: var(--mist); }
.is-hidden { display: none; }

/* -- weekly cycle timeline --------------------------------------------------------------- */
.cycle { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 48px; }
@media (max-width: 720px) { .cycle { grid-template-columns: 1fr; gap: 20px; } .cycle::before { display: none; } }
.cycle::before { content: ''; position: absolute; left: 6%; right: 6%; top: 9px; height: 2px; background: var(--roast); }
.cycle__day { position: relative; padding-right: 20px; }
.cycle__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--roast); position: relative; z-index: 1; }
.cycle__name { font-family: 'K2D', sans-serif; font-weight: 700; font-size: 1.125rem; margin-top: 14px; }
.cycle__what { color: var(--muted); font-size: .9375rem; max-width: 24ch; }

/* -- brew table ------------------------------------------------------------------------- */
.brewtable { width: 100%; max-width: 980px; margin-top: 36px; }
.brewtable th, .brewtable td { padding: 16px 20px 16px 0; border-top: 1px solid var(--fog-line); vertical-align: top; text-align: left; font-weight: 400; }
.brewtable tr:last-child td, .brewtable tr:last-child th { border-bottom: 1px solid var(--fog-line); }
.brewtable .is-way { font-family: 'K2D', sans-serif; font-weight: 700; font-size: 1.0625rem; white-space: nowrap; }
.brewtable .is-recipe { font-family: 'IBM Plex Mono', monospace; font-size: .875rem; color: var(--muted); }
@media (max-width: 820px) {
  .brewtable, .brewtable tbody, .brewtable tr, .brewtable th, .brewtable td { display: block; width: auto; }
  .brewtable tr { padding: 14px 0; border-top: 1px solid var(--fog-line); }
  .brewtable th, .brewtable td { padding: 0; border: 0; }
}

/* -- pour timeline ------------------------------------------------------------------------- */
.pour { display: grid; grid-template-columns: 50fr 66fr 50fr 50fr; gap: 3px; margin-top: 12px; }
.pour div { background: var(--pangkhon); opacity: var(--o,1); padding: 6px 8px; font-family: 'IBM Plex Mono', monospace; font-size: .6875rem; color: #fff; }

/* -- wholesale / dark section ------------------------------------------------------------- */
.tiers { margin-top: 32px; }
.tier { padding: 16px 0; border-top: 1px solid rgba(231,234,230,.2); }
.tier__line { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.tier__cut { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; }
.tier__bar { height: 4px; background: var(--mist); margin-top: 8px; width: var(--w); }
.tier__note { color: rgba(231,234,230,.7); font-size: .9375rem; }

.prep { background: rgba(231,234,230,.08); padding: 24px; margin-top: 28px; }
.prep li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.prep li::before { content: ''; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--mist); }

/* -- annotated curve (about page) ------------------------------------------------------------ */
.bigcurve { max-width: 900px; margin: 32px auto 0; }
.pointlist { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 820px) { .pointlist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pointlist { grid-template-columns: 1fr; } }
.pointlist h3 { font-size: 1rem; }
.pointlist .mono { color: var(--roast); font-size: .875rem; }
.pointlist p { color: var(--muted); font-size: .875rem; }

/* -- farmer price table ----------------------------------------------------------------------- */
.farm { width: 100%; max-width: 880px; margin-top: 32px; }
.farm th, .farm td { padding: 16px 20px 16px 0; border-top: 1px solid var(--fog-line); text-align: left; font-weight: 400; vertical-align: middle; }
.farm tr:last-child td, .farm tr:last-child th { border-bottom: 1px solid var(--fog-line); }
.farm .is-origin { font-family: 'K2D', sans-serif; font-weight: 700; white-space: nowrap; }
.farm .is-price { font-family: 'IBM Plex Mono', monospace; font-size: 1.0625rem; text-align: right; white-space: nowrap; }
.farm__bar { height: 4px; background: var(--c); width: var(--w); margin-top: 6px; }
@media (max-width: 720px) {
  .farm, .farm tbody, .farm tr, .farm th, .farm td { display: block; width: auto; }
  .farm tr { padding: 14px 0; border-top: 1px solid var(--fog-line); }
  .farm th, .farm td { padding: 0; border: 0; text-align: left; }
  .farm .is-price { text-align: left; }
}

/* -- generic --------------------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 46fr 54fr; gap: clamp(28px,4vw,56px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .two-col > .is-media { order: -1; } }
.two-col--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .two-col--even { grid-template-columns: 1fr; } }
.two-col img { width: 100%; object-fit: cover; }
.bleed { width: 100%; height: clamp(240px,30vw,420px); object-fit: cover; display: block; }
.cols3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 40px; }
@media (max-width: 860px) { .cols3 { grid-template-columns: 1fr; } }
.cols3--2 { grid-template-columns: repeat(2,1fr); }
@media (max-width: 700px) { .cols3--2 { grid-template-columns: 1fr; } }
.cols3 > div { border-top: 2px solid var(--roast); padding-top: 14px; }
.cols3 h3 { font-size: 1.0625rem; }
.cols3 p { color: var(--muted); font-size: .9375rem; }

.callout { background: var(--roast); color: var(--mist); padding: 28px; margin-top: 32px; max-width: 720px; }

.steps { max-width: 800px; margin-top: 40px; border-left: 1px solid var(--fog-line); }
.step { position: relative; padding: 20px 0 20px 30px; }
.step + .step { border-top: 1px solid var(--fog-line); }
.step__dot { position: absolute; left: -5.5px; top: 30px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.step__n { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-size: .8125rem; }
.step h3 { font-size: 1.0625rem; margin: 2px 0 4px; }
.step p { color: var(--muted); font-size: .9375rem; }

.ctable { width: 100%; max-width: 940px; margin-top: 36px; }
.ctable th, .ctable td { padding: 16px 20px 16px 0; border-top: 1px solid var(--fog-line); text-align: left; font-weight: 400; vertical-align: top; }
.ctable tr:last-child td, .ctable tr:last-child th { border-bottom: 1px solid var(--fog-line); }
.ctable tr:hover { background: var(--mist-2); }
.ctable .is-kind { font-family: 'K2D', sans-serif; font-weight: 700; white-space: nowrap; }
.ctable .is-val { font-family: 'IBM Plex Mono', monospace; }
.ctable .is-note { color: var(--muted); font-size: .9375rem; }
@media (max-width: 780px) {
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; width: auto; }
  .ctable tr { padding: 14px 0; border-top: 1px solid var(--fog-line); }
  .ctable th, .ctable td { padding: 0; border: 0; }
}

.locator { width: 100%; border: 1px solid var(--fog-line); display: block; }
.dl__row { padding: 14px 0; border-top: 1px solid var(--fog-line); }
.dl__row:last-child { border-bottom: 1px solid var(--fog-line); }
.dl__label { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--muted); }
.hours { max-width: 560px; margin-top: 20px; }
.hours tr { border-top: 1px solid var(--fog-line); }
.hours tr:last-child { border-bottom: 1px solid var(--fog-line); }
.hours th, .hours td { padding: 12px 0; font-weight: 400; text-align: left; }
.hours td { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.hours .is-shut td, .hours .is-shut th { color: var(--muted); }
.hours tr.is-today th { font-weight: 600; }

/* -- CTA band --------------------------------------------------------------------------------- */
.band { background: var(--mist-2); padding-block: clamp(56px,7vw,88px); text-align: center; position: relative; }
.band::before, .band::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; display: grid; grid-template-columns: repeat(4,1fr); background: linear-gradient(90deg, var(--doichang) 0 25%, var(--pangkhon) 25% 50%, var(--papae) 50% 75%, var(--maechantai) 75% 100%); }
.band::before { top: 0; } .band::after { bottom: 0; }
.band p { max-width: 62ch; margin-inline: auto; color: var(--muted); }
.band .btn-row { justify-content: center; }

/* -- footer ------------------------------------------------------------------------------------ */
.footer { background: var(--roast); color: var(--mist); padding-block: 56px 28px; }
.footer__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; font-size: .9375rem; color: rgba(231,234,230,.72); }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-family: 'K2D', sans-serif; font-weight: 800; color: var(--mist); margin-bottom: 8px; }
.footer__label { font-size: .8125rem; color: var(--mist); margin-bottom: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(231,234,230,.2); font-size: .8125rem; color: rgba(231,234,230,.8); }
.footer__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(231,234,230,.2); font-size: .8125rem; }

/* -- mobile bar ---------------------------------------------------------------------------------- */
.mobilebar { display: none; }
@media (max-width: 640px) {
  .mobilebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--mist); border-top: 1px solid var(--fog-line); }
  .mobilebar .btn { display: block; text-align: center; padding: 12px; }
  body { padding-bottom: 72px; }
}