/* ==========================================================================
   BASE · reset, page field, type, layout primitives (Frontend Dev #1)
   Tokens only (tokens.css). Component styles live in components.css.
   ========================================================================== */

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--chrome-clear);
  scrollbar-gutter: stable;
  color-scheme: light;
}
html.sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; padding: 0; }
/* The reset must not strip T4 plates: glass.css paints .plate with a
   zero-specificity :where(), so a button.plate keeps its plate (B-09: the
   capsule Menu button, sheet close buttons and island actions sat on the
   clear shell). */
button:not(:where(.plate)) { background: none; border: 0; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
dialog { color: inherit; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }

/* ---- Page: Paper + quiet contour field + grain (DESIGN §2.6) ------------
   The quiet field is Graphics' seamless tile as a background (no DOM cost).
   It is anchored to page coordinates, so every lens (which draws the same
   tile at the same page offset, see glass.js) lines up with it. Grain sits
   above the field, below content. */
html {
  background:
    url("../img/topo-field.svg") 0 0 / 1200px 1200px repeat,
    var(--paper);
}
body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: transparent;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-field);
  pointer-events: none;
  background: url("../img/grain.webp") 0 0 / 160px 160px repeat;
  opacity: var(--grain-a);
  mix-blend-mode: multiply;
}
:root[data-glass="off"] body::before,
:root[data-transparency="reduced"] body::before { display: none; }
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }
@media (forced-colors: active) { html { background: Canvas; } body::before { display: none; } }
main { flex: 1 0 auto; }
/* No layout shift from JS-rendered content (Tech Lead integration): the footer
   starts below the fold, and a region that is still rendering reserves a screen. */
html.js main { min-block-size: 100svh; }
html.js [data-pdp][aria-busy="true"], html.js [data-results][aria-busy="true"] { min-block-size: 100svh; }

/* page sprite (shell.js) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Typography (DESIGN §4) ---------------------------------------------- */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: "SOFT" var(--soft);
  color: var(--ink);
  text-wrap: balance;
}
/* long compound words never overflow at 320 (B-11) */
h1, h2, .display { overflow-wrap: break-word; hyphens: auto; }
h1, .h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-variation-settings: "SOFT" var(--soft), "opsz" 144; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-display-strong); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-h4); font-weight: var(--fw-display-strong); }
/* the one italic word per display headline (COPY *word*) */
:is(h1, h2, h3, .h1, .h2, .h3) em { font-style: italic; color: var(--clay); }
p { text-wrap: pretty; }
strong, b { font-weight: var(--fw-strong); }
s { text-decoration-thickness: 1px; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--muted);
  max-inline-size: var(--measure-lead);
}
.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-block-start: var(--space-4); }
.label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-label); }
.muted { color: var(--muted); }
.tabular { font-variant-numeric: lining-nums tabular-nums; }

/* Links: Clay + underline (colour is never the only cue) */
.link, .prose a {
  color: var(--clay);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: var(--fw-strong);
  transition: color var(--t-fast) var(--ease-std);
}
.link:hover, .prose a:hover { color: var(--clay-hover); text-decoration-thickness: 2px; }
.link--arrow { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--tap); }
.link--arrow > [aria-hidden] { display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.link--arrow:hover > [aria-hidden] { transform: translateX(2px); }

/* Photo grade stopgap (B-10, CD#7): the hot-linked photos share one warm,
   top-left grade until the client's own photography is re-exported (W-03). */
.photo, .guide-card__media img, .guide-hero img, .cafes-band__media img, img.pdp-slide__photo, .pdp-slide__photo img {
  filter: sepia(.12) saturate(.9) brightness(1.04) contrast(.96);
}
@media (forced-colors: active) {
  .photo, .guide-card__media img, .guide-hero img, .cafes-band__media img, img.pdp-slide__photo, .pdp-slide__photo img { filter: none; }
}

/* ---- Focus (DESIGN §2.5): Pine ring + Paper halo, everywhere -------------- */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-shadow);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Utilities ------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: var(--space-3);
  z-index: var(--z-skip);
  display: inline-flex; align-items: center;
  min-block-size: var(--tap);
  padding-inline: var(--space-5);
  border-radius: var(--r-pill);
  background: var(--pine);
  color: var(--on-pine);
  font-weight: var(--fw-strong);
  font-size: var(--fs-ui);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* ---- Layout (DESIGN §5): 4 / 8 / 12 columns ------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + var(--page-x) * 2);
  margin-inline: auto;
  padding-inline: var(--page-x);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-4);
}
@media (min-width: 600px) { .grid-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); } }
@media (min-width: 1024px) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.band { background: var(--oat); }
.stack > * + * { margin-block-start: var(--stack); }

/* No-JS notice (COPY §14) */
.nojs {
  margin: var(--space-3) var(--page-x) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-input);
  background: var(--saffron-tint);
  font-size: var(--fs-ui);
  font-weight: var(--fw-strong);
}