/*
 * Green St Kitchen - fonts, reset, base typography, layout primitives.
 * No literal colour values. Everything comes from tokens.css.
 */

/* ---- Fonts --------------------------------------------------------------
 * The five brand fonts named in PROJECT-BRIEF section 4. Converted from the
 * supplied .ttf to .woff2 (roughly 70% smaller, same glyphs). Licence
 * confirmed by Simon, 4 August 2026.
 * font-display: swap keeps first paint fast; the layout does not shift
 * badly because fallback metrics are close enough at these sizes.
 */
@font-face {
  font-family: "NaN Jaune";
  src: url("../fonts/NaNJaune-MaxiBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---- Base -------------------------------------------------------------- */
body {
  background-color: var(--gs-bg);
  color: var(--gs-fg);
  font-family: var(--gs-font-body);
  font-weight: 400;
  font-size: var(--gs-step-base);
  line-height: var(--gs-leading-body);
  -webkit-font-smoothing: antialiased;
  /* .gs-header is fixed (components.css), so its rendered height has to be
   * paid back here or content starts underneath it. */
  padding-top: var(--gs-header-height);
}

h1,
h2,
h3,
h4 {
  font-family: var(--gs-font-heading);
  font-weight: 700;
  line-height: var(--gs-leading-heading);
  text-wrap: balance;
}

a {
  color: inherit;
}

p a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---- Focus -------------------------------------------------------------
 * PROJECT-BRIEF 7A: a visible indicator on every focusable element, 3:1
 * against its own background. Not optional and not a style choice.
 * :focus-visible only, so a mouse click does not leave a ring behind.
 */
:focus-visible {
  outline: var(--gs-focus-width) solid var(--gs-focus);
  outline-offset: var(--gs-focus-offset);
}

/* On dark surfaces the ring flips to Paper so it keeps its 3:1. */
.gs-on-dark :focus-visible,
.gs-on-colour :focus-visible {
  outline-color: var(--gs-focus-inverse);
}

/* ---- Skip link --------------------------------------------------------- */
.gs-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--gs-space-xs) var(--gs-space-md);
  background-color: var(--gs-ink);
  color: var(--gs-paper);
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-pill);
  text-decoration: none;
  border-bottom-right-radius: var(--gs-space-2xs);
  transform: translateY(-100%);
}

.gs-skip-link:focus {
  transform: translateY(0);
}

/* ---- Screen reader only ------------------------------------------------ */
.gs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Layout primitives -------------------------------------------------
 * .gs-shell centres content and holds the gutter. Every full-bleed band
 * gets its own background and a .gs-shell inside it.
 */
.gs-shell {
  width: 100%;
  max-width: calc(var(--gs-content) + (var(--gs-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gs-space-md);
}

@media (min-width: 768px) {
  .gs-shell {
    padding-inline: var(--gs-space-xl);
  }
}

@media (min-width: 1024px) {
  .gs-shell {
    padding-inline: var(--gs-gutter);
  }
}

/* The 12 column grid. Children opt in with a span class. Phone first: one
 * column, so every row stacks before any span applies. */
.gs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gs-space-md);
}

@media (min-width: 768px) {
  .gs-grid {
    grid-template-columns: repeat(var(--gs-grid-columns), 1fr);
    column-gap: var(--gs-grid-gap);
    row-gap: var(--gs-space-md);
  }

  .gs-span-3 { grid-column: span 6; }  /* four-up becomes two-up on tablet */
  .gs-span-4 { grid-column: span 6; }  /* three-up becomes two-up on tablet */
  .gs-span-6 { grid-column: span 12; } /* two-up stays stacked on tablet */
}

@media (min-width: 1024px) {
  .gs-span-3 { grid-column: span 3; }
  .gs-span-4 { grid-column: span 4; }
  .gs-span-6 { grid-column: span 6; }
}

/* ---- Section rhythm ----------------------------------------------------
 * Sections are full bleed so a band can carry its own background. The gutter
 * comes from .gs-shell on the inner wrapper.
 */
/* 42px at desktop. Content-to-content gaps in the mockup measure 72 to 93px
 * between adjacent sections, averaging 84, and each of the two sections
 * contributes half of that. Derived from the mockup's own baselines; see
 * MAINTAINER.md. */
.gs-section {
  padding-block: var(--gs-section-y);
}

@media (min-width: 1024px) {
  .gs-section {
    padding-block: var(--gs-section-y-lg);
  }
}

/* Core's flow layout adds top margin between siblings. Sections carry their
 * own padding, so that extra margin would double the gap. */
.gs-section > .gs-shell > *:first-child,
.gs-section > *:first-child {
  margin-block-start: 0;
}

.gs-section--flush {
  padding-block: 0;
}

/* ---- Shared type helpers ---------------------------------------------- */
.gs-eyebrow {
  font-family: var(--gs-font-body);
  font-weight: 500;
  font-size: var(--gs-step-eyebrow);
  letter-spacing: var(--gs-tracking-eyebrow);
  text-transform: uppercase;
  margin: 0;
}

/* NaN Jaune is always set lowercase, per PROJECT-BRIEF section 9. The rule
 * lives on the font utility itself so it cannot be forgotten at a call site. */
.gs-display {
  font-family: var(--gs-font-display);
  font-weight: 800;
  line-height: var(--gs-leading-tight);
  text-transform: lowercase;
}

.gs-measure {
  max-width: 62ch;
}

.gs-centred {
  text-align: center;
  margin-inline: auto;
}