/* Rocksalt: brand layer over the scrollcraft floor.
   Grounds: salt (light), bottle green (Blackrock facade), steel, maroon.
   One hue of accent (the logo maroon #651019), two lightnesses keyed to the
   ground family, per taste.md's hard-cut exception. */

:root {
  --salt: #f4f0e9;
  --salt-2: #ebe5db;
  --green: #12251e;
  --green-2: #1a3329;
  --steel: #171c1f;
  --maroon: #651019;
  --maroon-deep: #4a0b12;
  --rose: #f2a7ae;          /* maroon hue, light stop for dark grounds */
  --off: #1d1517;

  --sc-canvas: var(--salt);
  --sc-surface: #fffdf9;
  --sc-ink: #1d1517;
  --sc-ink-soft: #5d4f4f;
  --sc-accent: var(--maroon);
  --sc-accent-ink: #fff7f2;
  --sc-shadow-color: 350 40% 8%;

  --sc-font-display: "Kumbh Sans", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
  --bar-h: 4.25rem;
}

/* ground families: restate colour with the token (taste.md) */
.g-salt  { --sc-canvas: var(--salt);  --sc-ink: #1d1517; --sc-ink-soft: #5d4f4f; --sc-accent: var(--maroon); --sc-accent-ink: #fff7f2; background: var(--salt); color: var(--sc-ink); }
.g-green { --sc-canvas: var(--green); --sc-ink: #f3eee6; --sc-ink-soft: #b9c4bc; --sc-accent: var(--rose); --sc-accent-ink: #2a0a0e; background: var(--green); color: var(--sc-ink); }
.g-steel { --sc-canvas: var(--steel); --sc-ink: #eef0ee; --sc-ink-soft: #a9b2b4; --sc-accent: var(--rose); --sc-accent-ink: #2a0a0e; background: var(--steel); color: var(--sc-ink); }
.g-maroon{ --sc-canvas: var(--maroon-deep); --sc-ink: #fbefe9; --sc-ink-soft: #e2bfbd; --sc-accent: #fbefe9; --sc-accent-ink: var(--maroon-deep); background: var(--maroon-deep); color: var(--sc-ink); }
.g-off   { --sc-canvas: #141012; --sc-ink: #f3ece4; --sc-ink-soft: #b6a9a4; --sc-accent: var(--rose); --sc-accent-ink: #2a0a0e; background: #141012; color: var(--sc-ink); }

body { background: var(--salt); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--maroon); color: #fff7f2; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

.sc-display { font-weight: 700; letter-spacing: var(--sc-track-tight); line-height: 0.98; text-wrap: balance; margin: 0; }
h1, h2, h3 { font-family: var(--sc-font-display); }
p { text-wrap: pretty; }
.lede { font-size: var(--sc-t-lg); line-height: 1.45; max-width: 40ch; color: var(--sc-ink); }
.body { color: var(--sc-ink-soft); max-width: 58ch; }
.small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.label { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
.wrap { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.nums { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: .01em;
  padding: .95em 1.35em; border-radius: var(--sc-r-sm); text-decoration: none; cursor: pointer;
  background: var(--sc-accent); color: var(--sc-accent-ink); border: 1px solid transparent;
  box-shadow: var(--sc-e1);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
}
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
.arrow { display: inline-block; transition: transform 160ms var(--sc-ease-out); }
a:hover > .arrow { transform: translateX(3px); }

/* -------------------------------------------------------------- top bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-5); padding-inline: var(--sc-gutter);
  color: var(--bar-ink, #1d1517);
  transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-solid { background: color-mix(in oklab, var(--salt) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgb(29 21 23 / .08); --bar-ink: #1d1517; }
.bar.is-dark { --bar-ink: #f6efe7; }
.bar.is-dark.is-solid { background: color-mix(in oklab, #141012 88%, transparent); box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
.mark { display: block; width: 9.6rem; aspect-ratio: 953 / 253; background: currentColor; -webkit-mask: url(assets/p/logo.png) left center / contain no-repeat; mask: url(assets/p/logo.png) left center / contain no-repeat; flex: none; }
.mark--wm { -webkit-mask-image: url(assets/p/wordmark.png); mask-image: url(assets/p/wordmark.png); aspect-ratio: 674/253; }
.bar__home { color: inherit; display: block; padding-block: .5rem; }
.bar__nav { display: flex; gap: clamp(.9rem, 1.6vw, 1.7rem); margin-left: auto; font-size: var(--sc-t-sm); font-weight: 500; }
.bar__nav a { text-decoration: none; padding-block: .4rem; position: relative; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--sc-ease-out); }
.bar__nav a:hover::after, .bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.bar .btn { --sc-accent: var(--maroon); --sc-accent-ink: #fff7f2; }
.bar.is-dark .btn { --sc-accent: var(--rose); --sc-accent-ink: #2a0a0e; }
.bar__menu { display: none; background: none; border: 0; padding: .6rem; margin-right: -.6rem; cursor: pointer; color: inherit; }
.bar__menu span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: transform 200ms var(--sc-ease-out), opacity 160ms; }
.bar__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bar__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bar__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .bar__menu { display: block; order: 3; }
  .bar .btn { margin-left: auto; padding: .8em 1.05em; }
  .mark { width: 8rem; }
}

/* full-screen menu (phones, tablets) */
.drawer { position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 1); background: var(--green); color: #f3eee6; padding: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) 2rem; display: grid; align-content: start; gap: .2rem; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), visibility 0s 220ms; }
.drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drawer a { font: 700 clamp(1.7rem, 7vw, 2.4rem)/1.15 var(--sc-font-display); letter-spacing: -0.02em; text-decoration: none; padding-block: .25rem; }
.drawer small { display: block; margin-top: 1.5rem; color: #b9c4bc; font-size: var(--sc-t-sm); }
body.drawer-open .bar { --bar-ink: #f6efe7; background: transparent; box-shadow: none; }

/* order sheet */
.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; background: rgb(15 10 11 / .5); opacity: 0; visibility: hidden; transition: opacity 200ms var(--sc-ease-out), visibility 0s 200ms; }
.sheet.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.sheet__card { width: min(36rem, 100%); background: var(--salt); color: var(--off); border-radius: var(--sc-r-lg) var(--sc-r-lg) 0 0; padding: 1.6rem var(--sc-gutter) 2rem; box-shadow: var(--sc-e3); transform: translateY(24px); transition: transform 260ms var(--sc-ease-drawer); }
@media (min-width: 700px) { .sheet { place-items: center; } .sheet__card { border-radius: var(--sc-r-lg); padding: 2rem; } }
.sheet.is-open .sheet__card { transform: none; }
.sheet__card h2 { font-size: var(--sc-t-xl); margin: 0 0 .25rem; letter-spacing: -0.02em; }
.sheet__list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .5rem; }
.sheet__list a, .sheet__list div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--sc-r-md); background: #fffdf9; box-shadow: var(--sc-e1), var(--sc-edge); text-decoration: none; }
.sheet__list a:hover { background: #fff; }
.sheet__list b { font: 700 var(--sc-t-lg)/1.1 var(--sc-font-display); letter-spacing: -0.01em; }
.sheet__list span { font-size: var(--sc-t-sm); color: #5d4f4f; }
.sheet__close { float: right; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; margin: -.4rem -.5rem 0 0; color: inherit; }

/* ------------------------------------------------------------- footer */
.foot { padding: var(--sc-9) 0 var(--sc-6); }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sc-7) var(--sc-6); }
.foot h3 { font: 600 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--sc-t-sm); }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot__base { margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot .mark { width: 11rem; margin-bottom: 1.2rem; color: var(--sc-ink); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__grid > :first-child { grid-column: 1 / -1; } }

/* --------------------------------------------------------- page heroes */
.phero { position: relative; min-height: min(92svh, 60rem); display: grid; align-items: end; overflow: clip; isolation: isolate; color: #f6efe7; }
.phero__bg { position: absolute; inset: -6% 0 0 0; z-index: -2; }
.phero__bg :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.phero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(15 10 11 / .88) 0%, rgb(15 10 11 / .5) 38%, rgb(15 10 11 / 0) 66%), linear-gradient(to right, rgb(15 10 11 / .62) 0%, rgb(15 10 11 / .3) 45%, rgb(15 10 11 / 0) 70%); }
.phero__fg { position: absolute; z-index: 1; pointer-events: none; }
.phero__copy { position: relative; z-index: 2; padding: calc(var(--bar-h) + 4rem) var(--sc-gutter) clamp(2.5rem, 8vh, 5.5rem); max-width: var(--sc-maxw); margin-inline: auto; width: 100%; }
.phero h1 { font-size: clamp(2.6rem, 1.5rem + 3.8vw, 5.8rem); line-height: .95; letter-spacing: -0.045em; font-weight: 800; max-width: 15ch; text-wrap: balance; margin: 0; }
.phero p { font-size: var(--sc-t-lg); max-width: 42ch; margin: 1.2rem 0 0; color: #ecdfd6; }
.phero .label { color: #e8c9c6; margin-bottom: 1rem; display: block; }
.phero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.phero .btn { --sc-accent: var(--rose); --sc-accent-ink: #2a0a0e; }
.phero .btn--ghost { color: #f6efe7; border-color: rgb(246 239 231 / .5); }
@media (max-width: 700px) { .phero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); } }

/* ------------------------------------------------------------ sections */
.sec { padding-block: var(--sc-section); }
.sec--tight { padding-block: calc(var(--sc-section) * .6); }
.sec h2 { font-size: var(--sc-t-3xl); letter-spacing: var(--sc-track-tight); line-height: 1; margin: 0; text-wrap: balance; }
.sec h3 { font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-8); align-items: center; }
.split2--wide { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 860px) { .split2, .split2--wide { grid-template-columns: 1fr; gap: var(--sc-6); } }
.stack > * + * { margin-top: var(--sc-4); }
.stack > h2 + p, .stack > h3 + p { margin-top: var(--sc-5); }
.photo { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e2); background: #00000010; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.badges img, .teams__badges img { height: auto; }
figcaption { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: .6rem; }

/* station label schema: what it is, what it makes, who it feeds */
.schema { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); max-width: 34rem; }
.schema dt { font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 600; padding-top: .15em; }
.schema dd { margin: 0; }

/* list rows (menus, stockists) */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.rows li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--sc-hairline); }
.rows b { font: 600 var(--sc-t-lg)/1.25 var(--sc-font-display); letter-spacing: -0.01em; }
.rows .price { font-variant-numeric: tabular-nums; font-weight: 600; }
.rows p { grid-column: 1 / -1; margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 70ch; }
.tag { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: .04em; color: var(--sc-accent); margin-left: .4rem; }

.quote { font: 600 var(--sc-t-2xl)/1.12 var(--sc-font-display); letter-spacing: -0.025em; margin: 0; text-wrap: balance; max-width: 22ch; }
.quote + cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.grid3 { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: var(--sc-5); }
@media (max-width: 860px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid3 > :first-child { grid-column: 1 / -1; } }

.form { display: grid; gap: 1rem; max-width: 36rem; }
.form label { display: grid; gap: .4rem; font-size: var(--sc-t-sm); font-weight: 600; }
.form input, .form textarea, .form select { padding: .85rem 1rem; border: 1px solid color-mix(in oklab, var(--sc-ink) 28%, transparent); border-radius: var(--sc-r-sm); background: color-mix(in oklab, var(--sc-canvas) 70%, #fff); font-weight: 400; }
.form textarea { min-height: 8rem; resize: vertical; }
.form .note { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.form__status { font-size: var(--sc-t-sm); padding: .8rem 1rem; border-radius: var(--sc-r-sm); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); }
.form__status[hidden] { display: none; }

.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }
.tabs button { font: 600 var(--sc-t-sm)/1 var(--sc-font-text); padding: .8rem 1.1rem; border-radius: var(--sc-r-sm); border: 1px solid color-mix(in oklab, var(--sc-ink) 25%, transparent); background: transparent; cursor: pointer; color: inherit; transition: background-color 160ms var(--sc-ease-out); }
.tabs button[aria-selected="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }

.demo-note { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); border-left: 1px solid var(--sc-hairline-strong); padding-left: .8rem; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--maroon); color: #fff; padding: .6rem 1rem; border-radius: 4px; }
.skip:focus { left: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .sheet, .sheet__card, .btn, .bar { transition: none; }
}