/* ============================================================
   HALAWUKI — Life's too short for grey
   Built to HALAWUKI Design Guidelines V1.0.
   Black dominates. Green carries the statements. Amber is the energy.
   One file, no framework.
   ============================================================ */

/* ------------------------------------------------------------------
   Self-hosted webfonts.
   Previously loaded from fonts.googleapis.com / fonts.gstatic.com, which
   transmitted every visitor's IP address to Google (LG München I,
   2022-01-20, Az. 3 O 17493/20). Serving them from our own origin removes
   that transfer entirely, so the site needs no consent banner for fonts.
   Unbounded, DM Sans and Fraunces are all licensed under the SIL Open Font
   License 1.1, which permits self-hosting. See assets/fonts/OFL.txt.

   Guideline 04 assigns each face one job:
     Unbounded Black 900 — display, always uppercase
     Fraunces 400–500   — editorial subheads and longer statements
     DM Sans 300        — body copy;  DM Sans 500 — labels and navigation
   No italic anywhere (guideline 02, rule 05), so no italic faces are loaded.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Tokens — guideline 03 (palette) and 04 (typography)
   ------------------------------------------------------------------ */
:root {
  /* Brand palette, verbatim from the guideline */
  --black: #0c0c0a;
  --jungle: #074017;
  --jungle-light: #0a5a20;
  --amber: #f29f05;
  --tangerine: #f28705;
  --crimson: #611622;
  --navy: #1f4373;
  --cream: #f8f5ef;

  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-editorial: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.28);

  /* Semantic tokens — the dark scheme is the default, because black is the
     dominant colour of the whole site. Shop pages opt into the cream scheme
     via <body class="theme-cream">. */
  --bg: var(--black);
  --surface: #141412;
  --surface-2: #1d1d19;
  --fg: var(--cream);
  --fg-muted: rgba(248, 245, 239, 0.62);
  --fg-faint: rgba(248, 245, 239, 0.55);
  --line: rgba(248, 245, 239, 0.14);
  --line-strong: rgba(248, 245, 239, 0.3);

  /* Accent for text and small UI marks. Amber earns its keep on black (8.7:1)
     but only reaches 2:1 on cream, so the cream scheme swaps in jungle green —
     which is also the colour the guideline puts on light surfaces (05).
     Amber stays the CTA fill colour in both schemes, where it sits under
     black text. */
  --accent-text: var(--amber);
}

body.theme-cream {
  --bg: var(--cream);
  --surface: #ffffff;
  --surface-2: #efeae0;
  --fg: var(--black);
  --fg-muted: rgba(12, 12, 10, 0.66);
  --fg-faint: rgba(12, 12, 10, 0.62);
  --line: rgba(12, 12, 10, 0.13);
  --line-strong: rgba(12, 12, 10, 0.28);
  --accent-text: var(--jungle);
  --shadow: 0 18px 48px rgba(12, 12, 10, 0.14);
  --shadow-soft: 0 8px 26px rgba(12, 12, 10, 0.09);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.78;
  font-size: 1rem;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

/* Display type — guideline 04: always uppercase, -0.02em, weight 900. */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--fg);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }

/* Editorial subheads — Fraunces, sentence case, never italic. */
h3, h4 {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: normal;
  line-height: 1.24;
  color: var(--fg);
  letter-spacing: 0;
}
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* Guideline 02, rule 05: no italic, in text or in design. Markdown emphasis
   from the blog articles becomes an accent-coloured word instead of a slant. */
em, i, cite, address { font-style: normal; }
em { color: var(--accent-text); }

strong { font-weight: 500; }

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { color: var(--accent-text); text-decoration-thickness: 2px; }

::selection { background: var(--amber); color: var(--black); }

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

.wrap { width: min(1240px, 90vw); margin-inline: auto; }
.wrap-narrow { width: min(760px, 90vw); margin-inline: auto; }

section { padding: 5rem 0; }

/* ---------- Labels — guideline 04, DM Sans Medium, wide tracking ---------- */
.eyebrow, .label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--fg-muted); margin-top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
/* Amber is the one and only call to action (guideline 03: gelb sparsam für CTAs). */
.btn-primary { background: var(--amber); color: var(--black); }
.btn-primary:hover { background: var(--tangerine); color: var(--black); }
.btn-ghost { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn-lg { padding: 1.1rem 2.6rem; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 12, 10, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(248, 245, 239, 0.12);
}
/* Product pages tint their header with the print of the shirt on show. It has
   to stay a whisper: the navigation sits on top of it and has to keep its
   contrast, so the layer runs at a low opacity and fades out to the left,
   where the logo is. */
.site-header.has-pattern { overflow: hidden; }
.site-header.has-pattern .pattern-layer {
  background-size: 260px;
  opacity: 0.16;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32%, #000);
  mask-image: linear-gradient(to right, transparent, #000 32%, #000);
}
.site-header.has-pattern .header-inner { position: relative; z-index: 2; }
body.theme-cream .site-header {
  background: rgba(248, 245, 239, 0.9);
  border-bottom-color: rgba(12, 12, 10, 0.1);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}

/* Logo lockup — guideline 05: bird left, wordmark right, nothing else.
   Unbounded Black, uppercase, letter-spacing 0.12em. Icon never below 20px. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.logo img { height: 34px; width: auto; }
.logo-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1;
}
.logo:hover .logo-name { color: var(--amber); }
/* The white bird sits on black, the green one on cream (guideline 05). */
.logo .bird-light, .footer-logo .bird-light { display: block; }
.logo .bird-dark { display: none; }
body.theme-cream .logo .bird-light { display: none; }
body.theme-cream .logo .bird-dark { display: block; }

.main-nav { display: flex; align-items: center; gap: 2.2rem; }
.main-nav a {
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 0.3rem 0;
  border-bottom: 1.5px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current='page'] {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.lang-switch {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.34rem 0.9rem;
  text-decoration: none;
  color: var(--fg);
}
.lang-switch:hover { border-color: var(--amber); color: var(--amber); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--fg);
  margin: 6px 0;
  transition: transform 0.2s, opacity 0.2s;
}

/* ---------- Home: the banner (guideline 09) ---------- */
.joy-banner {
  position: relative;
  background: var(--black);
  color: var(--cream);
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.joy-banner .wrap { position: relative; z-index: 2; }
/* The bird rides beside the headline, in its own grid column, so the two can
   never overlap however wide or narrow the viewport gets. */
.joy-banner .banner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 24vw, 360px);
  gap: clamp(1.2rem, 3.5vw, 3rem);
  align-items: center;
}
.joy-banner h1 {
  /* Sized to the text column beside the bird, so the headline keeps its
     three-line break instead of stacking one word per line. */
  font-size: clamp(2.6rem, 8.4vw, 7.1rem);
  line-height: 0.92;
  color: var(--cream);
  max-width: 14ch;
}
/* "Grey" is the only word on the site allowed to look grey — and only until
   the colour sweeps through it. Static for reduced-motion visitors. */
.word-grey {
  color: #6e6e68;
  background-image: linear-gradient(100deg, var(--amber), var(--tangerine) 40%, var(--jungle-light) 72%, var(--navy));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grey-to-colour 1.1s 0.35s ease-out backwards;
}
@keyframes grey-to-colour {
  from { background-size: 0% 100%; -webkit-text-fill-color: #6e6e68; }
  to { background-size: 100% 100%; -webkit-text-fill-color: transparent; }
}
.joy-banner .lead {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  color: rgba(248, 245, 239, 0.78);
  margin: 2rem 0 2.6rem;
  max-width: 46ch;
}
.joy-banner .btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
/* Both banner CTAs carry the same amber — the second one as an outline. */
.joy-banner .btn-ghost { border-color: var(--amber); color: var(--amber); }
.joy-banner .btn-ghost:hover { border-color: var(--tangerine); color: var(--tangerine); }
/* The bird is a vector silhouette filled with the same gradient ramp as
   .word-grey, so the headline and the mascot are colour-graded alike. */
.joy-banner .bird {
  width: 100%;
  height: auto;
  justify-self: end;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Home: animal characters (guideline 06) ----------
   All five in a single transparent cut-out, so the whole cast is visible at
   once without a horizontal scroll. No captions, no roles. */
.animal-group {
  position: relative;
  margin: 0;
  padding: 0 0 1.5rem;
}
.animal-group img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(12, 12, 10, 0.35));
}

/* ---------- "AI generated" marker ----------
   Sits in the bottom right corner of every photograph. The frames it lives in
   mostly clip their overflow, so the explanation opens upwards *inside* the
   picture instead of outside it. Shown on hover, on keyboard focus, and on the
   .open class that main.js toggles for touch. */
/* The marker stretches across the bottom of its frame and pushes the badge to
   the right end. That is only so the explanation can size itself against the
   frame — max-width: 100% then means "as wide as the picture, never wider",
   which keeps it inside the frames that clip their overflow. The stretched
   span itself must not swallow clicks meant for the picture, hence the
   pointer-events split; :hover still reaches it from the badge inside. */
.ai-note {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: help;
}
.ai-note-label {
  display: block;
  pointer-events: auto;
  padding: 0.34rem 0.5rem;
  background: rgba(12, 12, 10, 0.66);
  color: rgba(248, 245, 239, 0.92);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.ai-note:hover .ai-note-label,
.ai-note:focus-visible .ai-note-label,
.ai-note.open .ai-note-label { background: var(--black); color: var(--cream); }
.ai-note:focus { outline: none; }
.ai-note:focus-visible .ai-note-label { outline: 2px solid var(--amber); outline-offset: 2px; }
.ai-note-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  width: max-content;
  max-width: min(15rem, 100%);
  pointer-events: auto;
  padding: 0.6rem 0.7rem;
  background: var(--black);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.ai-note:hover .ai-note-tip,
.ai-note:focus-visible .ai-note-tip,
.ai-note.open .ai-note-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Frames that hold a marker have to be the positioning context for it. */
.product-card .img-box,
.blog-card .img-box,
.article-figure .img-box,
.article-hero-img { position: relative; }
.article-figure .img-box { display: block; }

/* ---------- Statement block (guideline 09) ---------- */
.statement {
  position: relative;
  background: var(--jungle);
  color: var(--cream);
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0;
}
/* The pattern URL has to live in an inline style on a real element: a relative
   url() passed through a custom property resolves against this stylesheet
   (assets/css/), not against the page, and would 404. */
.pattern-layer {
  position: absolute;
  inset: 0;
  background-size: 520px;
  background-repeat: repeat;
  opacity: 0.12;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.statement .wrap-narrow { position: relative; z-index: 2; text-align: center; }
.statement h2 { color: var(--cream); }
.statement p { color: rgba(248, 245, 239, 0.82); }
.statement .big-quote {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.4rem, 3.1vw, 2.15rem);
  line-height: 1.32;
  color: var(--amber);
  margin: 1.6rem 0 1.4rem;
}
/* ---------- Colour slider (guideline 08) ----------
   A navigation element, not a ranking: it flips through every design from the
   most restrained to the loudest. No judgement, no hierarchy. */
.colour-slider { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.slider-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.slider-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.slider-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.slider-visual img.active { opacity: 1; }
.slider-meta { min-height: 1px; }
.slider-meta h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--fg);
}
.slider-meta .sub { color: var(--fg-muted); margin: 0.7rem 0 1.6rem; }
.slider-control { margin-top: 2.4rem; }
.slider-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.9rem;
}
.slider-ends span:last-child { color: var(--amber); text-align: right; }
/* Amber only reaches 2:1 on cream, so the light scheme takes crimson instead —
   still the warm end of the scale, but readable. */
body.theme-cream .slider-ends span:last-child { color: var(--crimson); }
input[type='range'].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  cursor: pointer;
}
input[type='range'].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--amber);
  border: none;
  cursor: pointer;
}
input[type='range'].slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
}
.slider-occasions {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--fg-faint);
}
.slider-occasions span { flex: 1 1 0; text-align: center; }
.slider-occasions span:first-child { text-align: left; }
.slider-occasions span:last-child { text-align: right; }

/* ---------- Joy strip (guideline 09) ----------
   One running line of yellow text, below the colour slider. */
.joy-strip {
  overflow: hidden;
  padding: 1.1rem 0;
  background: var(--amber);
  color: var(--black);
  border-block: 1px solid var(--black);
}
.joy-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: joy-scroll 38s linear infinite;
}
.joy-track span {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.95rem, 2vw, 1.5rem);
  white-space: nowrap;
}
@keyframes joy-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Cards / grids ---------- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Guideline 09: the shop grid runs five across. */
.card-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }

.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--accent-text); color: var(--fg); }
/* Guideline 07: product photography sits on white. Always. */
.product-card .img-box { background: #ffffff; aspect-ratio: 4 / 5; overflow: hidden; }
.product-card .img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .img-box img { transform: scale(1.04); }
.product-card .card-body { padding: 1.1rem 1.2rem 1.4rem; }
.product-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
  color: var(--fg);
}
.product-card .card-sub { font-size: 0.85rem; color: var(--fg-muted); margin: 0 0 0.7rem; line-height: 1.55; }
.product-card .price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--accent-text);
}

/* blog cards */
.blog-card {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--accent-text); color: var(--fg); }
.blog-card .img-box { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.blog-card .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.blog-card .card-body { padding: 1.3rem 1.4rem 1.5rem; }
.blog-card .cat {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent-text);
}
.blog-card h3 { margin: 0.6rem 0 0.55rem; font-size: 1.16rem; }
.blog-card p { font-size: 0.9rem; color: var(--fg-muted); margin: 0; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--black);
  color: var(--cream);
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(248, 245, 239, 0.12);
}
.page-hero h1 { color: var(--cream); }
.page-hero p {
  font-family: var(--font-editorial);
  font-size: 1.1rem;
  color: rgba(248, 245, 239, 0.75);
  max-width: 58ch;
  margin: 1.2rem 0 0;
}
.breadcrumbs {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: rgba(248, 245, 239, 0.55);
}
.breadcrumbs a { color: rgba(248, 245, 239, 0.55); text-decoration: none; }
.breadcrumbs a:hover { color: var(--amber); }

/* ---------- Shop (guideline 09) ---------- */
.shop-filters {
  padding: 2.6rem 0 0;
  border-bottom: 1px solid var(--line);
}
.filter-group { margin-bottom: 1.8rem; }
.filter-group .label { margin-bottom: 0.8rem; }
/* Also used standalone as the blog's category row, where it needs its own
   breathing room; inside a filter group the group supplies the spacing. */
.chip-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.filter-group .chip-row { margin-bottom: 0; }
.chip {
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
/* The active chip is always the jungle-green pill — it reads as a solid
   selected state on cream and on black alike. */
.chip.active, .chip[aria-pressed='true'] {
  background: var(--jungle);
  border-color: var(--jungle);
  color: var(--cream);
}
.shop-count {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 1.6rem 0 0;
}
.product-card[hidden] { display: none; }

/* ---------- Product detail ---------- */
.crumb-bar { padding: 1.6rem 0 0; }
.crumb-bar .breadcrumbs { margin: 0; color: var(--fg-muted); }
.crumb-bar .breadcrumbs a { color: var(--fg-muted); }
.crumb-bar .breadcrumbs a:hover { color: var(--jungle); }

.product-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.4rem;
  align-items: start;
}
.product-gallery {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 0.7rem;
  align-items: stretch;
  position: sticky;
  top: 92px;
}
.gallery-main {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  height: min(66vh, 620px);
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.g-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(12, 12, 10, 0.72);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  transition: background 0.15s, transform 0.15s;
}
.g-arrow:hover { background: var(--amber); color: var(--black); transform: translateY(-50%) scale(1.06); }
.g-prev { left: 12px; }
.g-next { right: 12px; }
.gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(66vh, 620px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.gallery-thumbs button {
  border: 1.5px solid var(--line);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #ffffff;
  aspect-ratio: 1;
  flex: 0 0 auto;
  width: 100%;
}
.gallery-thumbs button.active { border-color: var(--accent-text); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.product-info .price-row { display: flex; align-items: baseline; gap: 0.9rem; margin: 1.4rem 0 0.4rem; }
.product-info .price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.product-info .vat { font-size: 0.82rem; color: var(--fg-muted); }
.product-info .card-sub {
  font-family: var(--font-editorial);
  font-size: 1.08rem;
  color: var(--fg-muted);
  margin: 0.5rem 0 0;
}
/* The styling tip closes the description. It used to be set in italic, which
   guideline 02 rules out, so it carries an amber rule instead. */
.combi {
  border-left: 2px solid var(--amber);
  padding-left: 1.1rem;
  color: var(--fg-muted);
}
.badge {
  display: inline-block;
  background: var(--crimson);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.size-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 1.9rem 0 0.7rem;
  display: block;
}
.size-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-options input { position: absolute; opacity: 0; pointer-events: none; }
.size-options label {
  border: 1.5px solid var(--line-strong);
  min-width: 54px;
  text-align: center;
  padding: 0.55rem 0.9rem;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: transparent;
  transition: all 0.15s;
}
.size-options label:hover { border-color: var(--jungle); }
.size-options input:checked + label { background: var(--jungle); border-color: var(--jungle); color: var(--cream); }
.size-hint { font-size: 0.86rem; color: var(--fg-muted); margin-top: 0.7rem; }
.buy-row { margin: 1.8rem 0 0.6rem; display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.trust-list { list-style: none; margin: 1.4rem 0 0; font-size: 0.88rem; color: var(--fg-muted); }
.trust-list li { padding: 0.24rem 0; }
.trust-list li::before { content: '— '; color: var(--accent-text); }

details.acc { border-top: 1px solid var(--line); padding: 1rem 0; }
details.acc:last-of-type { border-bottom: 1px solid var(--line); }
details.acc summary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: '+'; font-size: 1.2rem; color: var(--accent-text); }
details.acc[open] summary::after { content: '–'; }
details.acc .acc-body { padding-top: 0.9rem; font-size: 0.93rem; color: var(--fg-muted); }
details.acc .acc-body ul { padding-left: 1.2rem; }

/* ---------- Article ---------- */
.article {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 4vw, 3.4rem);
  margin-top: -3.2rem;
  position: relative;
  z-index: 2;
}
.article p { font-size: 1.02rem; }
.article h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.article h3 { margin: 1.8rem 0 0.7rem; }
.article ul, .article ol { margin: 0 0 1.2em 1.4em; color: var(--fg-muted); }
.article li { margin-bottom: 0.4em; }
.article table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.92rem; }
.article th, .article td { border: 1px solid var(--line); padding: 0.7rem 0.9rem; text-align: left; }
.article th {
  background: var(--surface-2);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.article .lead {
  border-left: 2px solid var(--amber);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin-bottom: 2rem;
}
.article .lead p {
  font-family: var(--font-editorial);
  font-size: 1.12rem;
  color: var(--fg);
  margin: 0;
}
.article-meta {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 1.6rem;
}
.article-meta .cat-pill {
  color: var(--amber);
  margin-right: 0.8rem;
}
.article-hero-img { overflow: hidden; margin: 1.6rem 0 2.2rem; }
.article-hero-img img { width: 100%; max-height: 460px; object-fit: cover; object-position: top; }
.article-figure { margin: 2rem 0; }
.article-figure img { width: 100%; display: block; }
.article-figure figcaption {
  font-size: 0.8rem;
  color: var(--fg-faint);
  text-align: center;
  margin-top: 0.8rem;
}

.empty-note {
  border: 1px solid var(--line);
  padding: 2.6rem;
  text-align: center;
  color: var(--fg-muted);
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
}
.form-field select option { background: var(--surface); color: var(--fg); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--accent-text);
}
.form-note { font-size: 0.82rem; color: var(--fg-faint); margin-top: 1rem; }
.preorder-note {
  border-left: 2px solid var(--amber);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin-bottom: 2rem;
  font-family: var(--font-editorial);
  font-size: 1.08rem;
}

/* imprint / legal */
.legal h2 { margin: 2.2rem 0 0.8rem; font-size: 1.1rem; }
.legal { color: var(--fg-muted); }
.legal a { word-break: break-word; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--jungle);
  color: var(--cream);
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--cream); margin-bottom: 0.5rem; }
.cta-band p { color: rgba(248, 245, 239, 0.8); margin: 0; }


/* ---------- Newsletter (Hostinger Reach embed) ---------- */
.newsletter-band .section-head { text-align: center; margin-bottom: 2rem; }
.newsletter-band .section-head p { max-width: 46ch; margin-inline: auto; }
/* The embed brings its own markup and styles; we only give it room and a
   ground that works on both colour schemes. */
.newsletter-embed {
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.newsletter-embed iframe { display: block; width: 100%; border: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  color: rgba(248, 245, 239, 0.62);
  padding: 4.5rem 0 2rem;
  border-top: 1px solid rgba(248, 245, 239, 0.12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.6rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(248, 245, 239, 0.12);
}
.site-footer h4 {
  color: var(--amber);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer p { font-size: 0.9rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.5rem; font-size: 0.9rem; }
.site-footer a { color: rgba(248, 245, 239, 0.62); text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.footer-logo img { height: 40px; width: auto; margin-bottom: 1.2rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(248, 245, 239, 0.6);
}
.footer-slogan {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.74rem;
  color: var(--amber);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .card-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  /* Too narrow for two columns: the bird drops directly under the headline,
     which gets the full width back. */
  .joy-banner .banner-head { grid-template-columns: minmax(0, 1fr); }
  .joy-banner h1 { font-size: clamp(2.6rem, 11.2vw, 9.5rem); }
  .joy-banner .bird { width: min(48%, 260px); justify-self: center; margin-top: 2rem; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .slider-stage { grid-template-columns: 1fr; }
  .slider-visual { aspect-ratio: 3 / 2; }
  .product-layout { grid-template-columns: 1fr; gap: 2rem; }
  .product-gallery { position: static; }
  .gallery-main { height: min(58vh, 540px); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem 5vw 1.8rem;
    gap: 1.2rem;
    border-bottom: 1px solid var(--line);
  }
  .main-nav.open { display: flex; }
  .card-grid, .card-grid.cols-3, .card-grid.cols-5 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .product-gallery { grid-template-columns: 1fr; }
  .gallery-main { height: min(52vh, 460px); }
  .gallery-thumbs {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
  }
  .gallery-thumbs button { width: 64px; }
  /* The header print has to read as texture, not as a picture, on a phone. */
  .site-header.has-pattern .pattern-layer { background-size: 150px; opacity: 0.13; }
  section { padding: 3.4rem 0; }
  .slider-occasions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .joy-track { animation: none; }
  .word-grey {
    animation: none;
    background-size: 100% 100%;
  }
}

/* Blocks that stay black or jungle green on every page keep amber as their
   accent, even when the page around them runs the cream scheme. */
.page-hero .eyebrow,
.joy-banner .eyebrow,
.statement .eyebrow,
.cta-band .eyebrow,
.page-hero a:not(.btn),
.statement a:not(.btn),
.cta-band a:not(.btn) { color: var(--amber); }