/* =========================================================================
   Kettle & Grounds — stylesheet.
   Single local stylesheet, zero remote requests, zero tracking.
   Class vocabulary: the coffee counter (roasthouse, chalkboard, blend,
   brewlog, entry, steep, crosspour, basecamp...). All rhabillage lives in
   the :root block below.
   ========================================================================= */

:root {

  /* ---- 1. COLOR ---------------------------------------------------- */
  --bw-ink:          #16262a;   /* page background (charcoal teal, roast smoke) */
  --bw-panel:        #1e3438;   /* panels sitting on the background        */
  --bw-well:         #0e1c1e;   /* recessed bands, darker still            */
  --bw-text:         #f2ede0;   /* main text (warm cream)                  */
  --bw-text-soft:    #a9bdb8;   /* secondary text, dates, captions         */
  --bw-line:         #2c4448;   /* hairlines                               */
  --bw-copper:       #c97a3f;   /* links and strong marks (roasted copper) */
  --bw-copper-light: #dd9862;   /* hover state of the copper               */
  --bw-sage:         #8fbfae;   /* second accent, cool counterpoint        */
  --bw-on-copper:    #16262a;   /* text set on a copper fill               */
  --bw-focus:        var(--bw-sage);
  --bw-footer-ink:   #0b1517;   /* footer background                       */
  --bw-footer-text:  #f2ede0;   /* footer text                             */

  /* ---- 2. BLEND TINTS (one per section) ----------------------------- */
  --bw-blend-1: #c97a3f;   /* copper   */
  --bw-blend-2: #8fbfae;   /* sage     */
  --bw-blend-3: #d9b25c;   /* honey    */
  --bw-blend-4: #7fa6c2;   /* steam blue */
  --bw-blend-5: #b6875a;   /* cinnamon */
  --bw-blend-6: #c98f9f;   /* dusty rose */
  --bw-tint: var(--bw-copper);   /* current value, overridden by .blend-N */

  /* ---- 3. TYPE (system stacks only, nothing to download) ------------ */
  --bw-face-display: Charter, "Bitstream Charter", "Nimbus Roman", Georgia, serif;
  --bw-face-text:    "Trebuchet MS", Verdana, "Segoe UI", "DejaVu Sans", sans-serif;
  --bw-face-mono:    Menlo, Consolas, Monaco, "Liberation Mono", monospace;

  /* ---- 4. RHYTHM ------------------------------------------------------ */
  --bw-size:    1rem;
  --bw-leading: 1.62;
  --bw-measure: 38rem;      /* reading width of an article                */
  --bw-frame:   68rem;      /* max site width                             */
  --bw-gutter:  clamp(1rem, 4vw, 2.3rem);
  --bw-air:     clamp(2.2rem, 5.5vw, 4rem);
  --bw-rail:    4.5rem;     /* left column for numbers and dates          */
  --bw-hair:    1px;
  --bw-radius:  4px;        /* soft, understated rounding                 */
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bw-ink);
  color: var(--bw-text);
  font-family: var(--bw-face-text);
  font-size: var(--bw-size);
  line-height: var(--bw-leading);
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--bw-face-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: .005em;
}

h1 { font-size: clamp(1.85rem, 1.15rem + 2.5vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 1rem + 1.3vw, 1.9rem); }
h3 { font-size: clamp(1.12rem, .98rem + .55vw, 1.35rem); }
h4 { font-size: 1.02rem; }

p, ul, ol, figure, table, blockquote { margin: 0 0 1.2em; }

a { color: var(--bw-copper); text-underline-offset: .18em; }
a:hover { color: var(--bw-copper-light); }

:focus-visible {
  outline: 2px solid var(--bw-focus);
  outline-offset: 3px;
}

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--bw-line);
  margin: var(--bw-air) 0;
}

/* Keyboard skip link */
.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bw-copper);
  color: var(--bw-on-copper);
  padding: .7rem 1.1rem;
  border-radius: var(--bw-radius);
  z-index: 50;
}
.skiplink:focus {
  left: .75rem;
  top: .75rem;
}

/* =========================================================================
   CONTAINERS
   ========================================================================= */

.urn {
  width: 100%;
  max-width: var(--bw-frame);
  margin-inline: auto;
  padding-inline: var(--bw-gutter);
}

.urn--read { max-width: calc(var(--bw-measure) + 2 * var(--bw-gutter)); }

.counter { padding-block: var(--bw-air); }
.counter + .counter { border-top: var(--bw-hair) solid var(--bw-line); }
.counter--sunk { background: var(--bw-well); }

.counter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-bottom: 1.7rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--bw-text);
}
.counter__head h2 { margin: 0; }

.counter__note {
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bw-text-soft);
}

/* =========================================================================
   ROASTHOUSE (site header)
   ========================================================================= */

.roasthouse {
  background: var(--bw-panel);
  border-bottom: 2px solid var(--bw-line);
}

.roasthouse__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.05rem;
}

.signboard { text-decoration: none; color: inherit; display: block; }
.signboard__name {
  font-family: var(--bw-face-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  display: block;
}
.signboard__tag {
  font-family: var(--bw-face-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bw-text-soft);
  display: block;
  margin-top: .25rem;
}

.menuboard ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menuboard a {
  font-family: var(--bw-face-mono);
  font-size: .9rem;
  letter-spacing: .03em;
  color: var(--bw-text);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.menuboard a:hover,
.menuboard a[aria-current="page"] {
  border-bottom-color: var(--bw-tint);
  color: var(--bw-text);
}

/* =========================================================================
   CHALKBOARD (page title block)
   ========================================================================= */

.chalkboard {
  padding-block: clamp(1.9rem, 4.6vw, 3.3rem);
  border-bottom: var(--bw-hair) solid var(--bw-line);
}
.chalkboard--blend { border-bottom: 4px solid var(--bw-tint); }

.chalkboard__kicker {
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bw-tint);
  margin: 0 0 .8rem;
}

.chalkboard h1 { max-width: 22ch; }
.chalkboard--wide h1 { max-width: 30ch; }

.chalkboard__lede {
  max-width: var(--bw-measure);
  font-size: 1.06rem;
  color: var(--bw-text-soft);
  margin-bottom: 0;
}

.chalkboard__mark {
  font-family: var(--bw-face-display);
  font-size: clamp(2.2rem, 5.6vw, 3.3rem);
  line-height: 1;
  color: var(--bw-tint);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
  margin-bottom: .4rem;
}

/* Short marks: date, read time, article count */
.stamp {
  font-family: var(--bw-face-mono);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--bw-text-soft);
  margin: 0;
}
.stamp--row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.3rem;
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
}

/* =========================================================================
   CRUMBTRAIL (breadcrumb)
   ========================================================================= */

.crumbtrail { padding-top: 1.15rem; }
.crumbtrail ol {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  color: var(--bw-text-soft);
}
.crumbtrail li + li::before { content: "/"; margin-right: .5rem; color: var(--bw-line); }
.crumbtrail a { color: var(--bw-text-soft); }

/* =========================================================================
   BLENDLIST: the section index on the homepage.
   Rhythm proper to this site: no cards, a run of asymmetric rows (number
   column on the left, content on the right).
   ========================================================================= */

.blendlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--bw-text);
}

.blend {
  display: grid;
  grid-template-columns: var(--bw-rail) minmax(0, 1fr);
  gap: 0 var(--bw-gutter);
  padding-block: clamp(1.5rem, 3.2vw, 2.2rem);
  border-bottom: var(--bw-hair) solid var(--bw-line);
}

.blend__mark { grid-column: 1; }

.blend__num {
  font-family: var(--bw-face-display);
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1;
  color: var(--bw-tint);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.blend__bar {
  display: block;
  width: 2.3rem;
  height: 4px;
  background: var(--bw-tint);
  margin-top: .65rem;
  border-radius: var(--bw-radius);
}

.blend__body { grid-column: 2; min-width: 0; }

.blend__name { margin-bottom: .5rem; }
.blend__name a {
  color: var(--bw-text);
  text-decoration: none;
  background-image: linear-gradient(var(--bw-tint), var(--bw-tint));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s ease-out;
}
.blend__name a:hover,
.blend__name a:focus-visible { background-size: 100% 2px; }

.blend__note {
  max-width: 52ch;
  color: var(--bw-text-soft);
  margin-bottom: 1rem;
}

/* Article links under each section: the star points of the hub */
.blend__picks {
  list-style: none;
  margin: 0 0 1.05rem;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.blend__picks li { position: relative; padding-left: 1.1rem; }
.blend__picks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: 2px;
  background: var(--bw-tint);
}
.blend__picks a {
  color: var(--bw-text);
  text-decoration: none;
  border-bottom: var(--bw-hair) solid var(--bw-line);
}
.blend__picks a:hover { border-bottom-color: var(--bw-tint); }

@media (max-width: 46rem) {
  .blend { grid-template-columns: 1fr; }
  .blend__mark {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .6rem;
  }
  .blend__num { font-size: 1.8rem; }
  .blend__bar { margin-top: 0; width: 1.5rem; }
  .blend__body { grid-column: 1; }
}

/* =========================================================================
   POURLINK: action links
   ========================================================================= */

.pourlink {
  display: inline-block;
  font-family: var(--bw-face-mono);
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bw-tint);
  text-decoration: none;
  border-bottom: 2px solid var(--bw-tint);
  padding-bottom: .15rem;
}
.pourlink:hover { color: var(--bw-text); border-bottom-color: var(--bw-text); }
.pourlink::after { content: " \2192"; }

.pourlink--filled {
  background: var(--bw-tint);
  color: var(--bw-on-copper);
  border: 0;
  padding: .68rem 1.15rem;
  border-radius: var(--bw-radius);
}
.pourlink--filled:hover { background: var(--bw-text); color: var(--bw-ink); }

/* =========================================================================
   BREWLOG: article list (homepage "latest brews" and section pages)
   ========================================================================= */

.brewlog {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--bw-hair) solid var(--bw-line);
}

.entry {
  display: grid;
  grid-template-columns: var(--bw-rail) minmax(0, 1fr);
  gap: .2rem var(--bw-gutter);
  padding-block: 1.25rem;
  border-bottom: var(--bw-hair) solid var(--bw-line);
}

.entry__stamp {
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--bw-text-soft);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: .3rem;
}

.entry__body { min-width: 0; }

.entry__title {
  font-family: var(--bw-face-display);
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 0 0 .35rem;
}
.entry__title a { color: var(--bw-text); text-decoration: none; }
.entry__title a:hover { color: var(--bw-tint); }

.entry__note {
  margin: 0;
  color: var(--bw-text-soft);
  max-width: 60ch;
}

.tag-blend {
  display: inline-block;
  font-family: var(--bw-face-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bw-tint);
  border: var(--bw-hair) solid var(--bw-tint);
  border-radius: var(--bw-radius);
  padding: .12rem .5rem;
  margin-bottom: .5rem;
  text-decoration: none;
}
a.tag-blend:hover { background: var(--bw-tint); color: var(--bw-on-copper); }

@media (max-width: 46rem) {
  .entry { grid-template-columns: 1fr; }
  .entry__stamp { padding-top: 0; margin-bottom: .3rem; }
}

/* =========================================================================
   NOTECARD: side box or "key points" block
   ========================================================================= */

.notecard {
  background: var(--bw-panel);
  border-left: 4px solid var(--bw-tint);
  border-radius: 0 var(--bw-radius) var(--bw-radius) 0;
  padding: 1.25rem 1.35rem;
  margin-block: 1.7rem;
}
.notecard h2, .notecard h3 { margin-bottom: .5rem; }
.notecard p:last-child, .notecard ul:last-child { margin-bottom: 0; }
.notecard ul { padding-left: 1.1rem; }
.notecard li { margin-bottom: .35rem; }

/* =========================================================================
   STEEP: article body
   ========================================================================= */

.steep { max-width: var(--bw-measure); }
.steep > * { max-width: 100%; }

.steep h2 {
  margin-top: 2.1rem;
  padding-top: .85rem;
  border-top: 2px solid var(--bw-tint);
}
.steep h3 { margin-top: 1.7rem; }

.steep ul, .steep ol { padding-left: 1.3rem; }
.steep li { margin-bottom: .45rem; }

/* block headings inside an article do not take the h2 hairline */
.steep .notecard h2,
.steep .roadmap h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.lede {
  font-size: 1.1rem;
  line-height: 1.58;
  color: var(--bw-text);
  border-bottom: var(--bw-hair) solid var(--bw-line);
  padding-bottom: 1.25rem;
  margin-bottom: 1.55rem;
}

.cupnote {
  margin: 1.75rem 0;
  padding: .4rem 0 .4rem 1.25rem;
  border-left: 4px solid var(--bw-tint);
  font-family: var(--bw-face-display);
  font-size: 1.14rem;
  line-height: 1.45;
}
.cupnote p:last-child { margin-bottom: 0; }
.cupnote cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  font-style: normal;
  letter-spacing: .05em;
  color: var(--bw-text-soft);
}

.snapshot { margin: 1.75rem 0; }
.snapshot img { width: 100%; background: var(--bw-well); border-radius: var(--bw-radius); }
.snapshot figcaption {
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  color: var(--bw-text-soft);
  padding-top: .5rem;
  border-top: var(--bw-hair) solid var(--bw-line);
  margin-top: .5rem;
}

/* Internal contents block */
.roadmap {
  background: var(--bw-well);
  border-radius: var(--bw-radius);
  padding: 1.05rem 1.25rem;
  margin-bottom: 1.9rem;
}
.roadmap h2 {
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
  border: 0;
  padding: 0;
}
.roadmap ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .95rem;
}
.roadmap li { margin-bottom: .3rem; }
.roadmap a { color: var(--bw-text); }

/* =========================================================================
   TABLES: always wrapped so they can scroll instead of overflow
   ========================================================================= */

.scrollframe {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.4rem;
  border: var(--bw-hair) solid var(--bw-line);
  border-radius: var(--bw-radius);
}
.scrollframe table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  margin: 0;
  font-size: .94rem;
}
.scrollframe th,
.scrollframe td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: var(--bw-hair) solid var(--bw-line);
  vertical-align: top;
}
.scrollframe thead th {
  font-family: var(--bw-face-mono);
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--bw-well);
}
.scrollframe caption {
  caption-side: top;
  text-align: left;
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  color: var(--bw-text-soft);
  padding: .6rem .8rem;
}

/* =========================================================================
   CROSSPOUR: cross links between sections (the heart of the star)
   ========================================================================= */

.crosspour { padding-block: var(--bw-air); }

.crosspour__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bw-hair);
  background: var(--bw-line);
  border: var(--bw-hair) solid var(--bw-line);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.crosspour__list li { background: var(--bw-panel); }
.crosspour__list a {
  display: block;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--bw-text);
  border-top: 4px solid var(--bw-tint);
  height: 100%;
}
.crosspour__list a:hover { background: var(--bw-well); }
.crosspour__kicker {
  display: block;
  font-family: var(--bw-face-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bw-text-soft);
  margin-bottom: .3rem;
}
.crosspour__title {
  display: block;
  font-family: var(--bw-face-display);
  font-size: 1.06rem;
  line-height: 1.3;
}

/* Nextbatch: pagination within a section */
.nextbatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.4rem;
  padding-block: 1.55rem;
  border-top: var(--bw-hair) solid var(--bw-line);
  font-family: var(--bw-face-mono);
  font-size: .9rem;
}
.nextbatch__state { color: var(--bw-text-soft); }

/* =========================================================================
   BASECAMP: site footer
   ========================================================================= */

.basecamp {
  background: var(--bw-footer-ink);
  color: var(--bw-footer-text);
  margin-top: var(--bw-air);
  padding-block: var(--bw-air) 2rem;
}
.basecamp a { color: var(--bw-footer-text); }
.basecamp a:hover { color: var(--bw-copper-light); }

.basecamp__grid {
  display: grid;
  gap: 2rem var(--bw-gutter);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.basecamp__col h2 {
  font-family: var(--bw-face-mono);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  color: var(--bw-footer-text);
  opacity: .75;
}
.basecamp ul { list-style: none; margin: 0; padding: 0; }
.basecamp li { margin-bottom: .45rem; }

.basecamp__bottom {
  margin-top: 2.3rem;
  padding-top: 1.15rem;
  border-top: var(--bw-hair) solid var(--bw-line);
  font-family: var(--bw-face-mono);
  font-size: .82rem;
  opacity: .8;
}

/* =========================================================================
   BLEND TINTS: set on .blend, .chalkboard, .counter, .entry, or <body>
   ========================================================================= */

.blend-1 { --bw-tint: var(--bw-blend-1); }
.blend-2 { --bw-tint: var(--bw-blend-2); }
.blend-3 { --bw-tint: var(--bw-blend-3); }
.blend-4 { --bw-tint: var(--bw-blend-4); }
.blend-5 { --bw-tint: var(--bw-blend-5); }
.blend-6 { --bw-tint: var(--bw-blend-6); }

/* =========================================================================
   UTILITIES (few, on purpose)
   ========================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-gap { margin-bottom: 0; }