/* =========================================================
   KIOSKEN — Davids lille marketingkiosk
   Nordic minimalism + premium editorial + subtle high-tech
   ========================================================= */

:root {
  --paper: #f7f3ec;
  --paper-deep: #efe9de;
  --ink: #1c1a17;
  --ink-soft: #4a453e;
  --line: rgba(28, 26, 23, 0.12);
  --brass: #a9773f;
  --brass-deep: #8a5f30;
  --brass-tint: #f0e3d0;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 6px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* A very subtle paper grain across the whole site — gives the flat
   colour fields a bit of physical, tactile material instead of
   reading as plain digital flats. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle at 1px 1px, #000 1px, transparent 0);
  background-size: 3px 3px;
}
@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.025; }
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

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

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

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

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brass-deep);
  font-weight: 600;
  margin: 0 0 14px;
}

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  max-width: 18ch;
}

.section-lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: 18px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--brass-deep); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  padding: 11px 22px;
  font-size: 0.9rem;
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 236, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark {
  width: 22px;
  height: 22px;
  color: var(--brass-deep);
  flex-shrink: 0;
}
.logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.main-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a.nav-cta {
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 9px 18px;
  border-radius: 999px;
}
.main-nav a.nav-cta:hover {
  border-color: var(--ink);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.1rem;
  font-family: var(--font-display);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero-stage {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 80px;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  perspective: 1200px;
}

/* The hero booth is a real WebGL scene (js/kiosk3d.js) mounted into this
   container — a canvas is inserted here at runtime. Desktop-only, same
   breakpoint as the rest of the scroll scenes; on mobile / reduced motion
   / no-WebGL this stays empty and the hero just shows its text, which
   already works fine on its own. */
.hero-3d {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  width: min(40vw, 460px);
  height: min(62vh, 560px);
  opacity: 0.96;
}
.hero-3d canvas {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 1080px) {
  .hero-3d {
    opacity: 0.55;
    width: min(56vw, 420px);
  }
}
@media (max-width: 700px) {
  .hero-3d { display: none; }
}

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 640px;
  max-height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(169, 119, 63, 0.16), transparent 70%);
  opacity: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.hero-title-stack {
  position: relative;
}

.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  margin-bottom: 28px;
  line-height: 1.1;
}
.hero-title.accent-word {
  font-style: italic;
  color: var(--brass-deep);
}

/* When JS/GSAP takes over, hero panels stack and crossfade in place */
body.gsap-pin-enabled .hero-title-stack {
  display: grid;
}
body.gsap-pin-enabled .hero-title-stack .hero-title {
  grid-area: 1 / 1;
}
body.gsap-pin-enabled .hero-panel {
  will-change: transform, opacity;
}
body.gsap-pin-enabled [data-hero-panel="1"],
body.gsap-pin-enabled [data-hero-panel="2"] {
  opacity: 0;
}

.hero-lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 36px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scroll-cue span {
  width: 1px;
  height: 34px;
  background: var(--ink-soft);
  position: relative;
  overflow: hidden;
}
.scroll-cue span::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--brass);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { top: -100%; }
  50% { top: 0; }
  100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span::after { animation: none; top: 0; }
}

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* staggered children */
.hero-content .hero-panel.reveal:nth-of-type(1) { transition-delay: 0.02s; }
.hero-content .hero-panel.reveal:nth-of-type(2) { transition-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Intro / shelf index ---------- */

.intro-shelves {
  padding: 120px 0 60px;
  text-align: left;
}

.shelf-index {
  max-width: var(--wrap);
  margin: 56px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: linear-gradient(180deg, var(--brass), var(--brass-deep));
  border: 4px solid var(--brass-deep);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 50px -30px rgba(28, 26, 23, 0.35);
}
.shelf-index a {
  background: var(--paper);
  padding: 30px 22px 26px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background-color 0.25s ease;
  position: relative;
  box-shadow: inset 0 12px 18px -16px rgba(28, 26, 23, 0.45);
}
.shelf-index a:hover {
  background: var(--brass-tint);
}
.shelf-index-num {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  background: var(--brass-tint);
  border: 1px solid var(--brass-deep);
  border-radius: 3px;
  padding: 2px 9px;
  transform: rotate(-3deg);
  box-shadow: 0 4px 8px -4px rgba(28, 26, 23, 0.3);
}

/* ---------- Shelves ---------- */

.shelf {
  padding: 100px 0;
  border-top: 1px solid var(--line);
}
.shelf-alt {
  background: var(--paper-deep);
}

.shelf-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.shelf-grid.reverse {
  grid-template-columns: 0.9fr 1.1fr;
}
.shelf-grid.reverse .shelf-visual { order: -1; }

/* ---------- Pinned scroll scenes (desktop, JS + motion allowed) ---------- */

body.gsap-pin-enabled .shelf {
  border-top: 1px solid var(--line);
}
body.gsap-pin-enabled .shelf-grid {
  min-height: 78vh;
}
body.gsap-pin-enabled .shelf-panels {
  position: relative;
}
body.gsap-pin-enabled .shelf-panel {
  will-change: transform, opacity;
}
/* Stack panels on top of one another so they can crossfade without a layout jump */
body.gsap-pin-enabled .shelf-panels {
  display: grid;
}
body.gsap-pin-enabled .shelf-panels .shelf-panel {
  grid-area: 1 / 1;
}
body.gsap-pin-enabled .panel-product,
body.gsap-pin-enabled .panel-product-b {
  opacity: 0;
}

.shelf-num {
  font-family: var(--font-display);
  color: var(--brass-deep);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}

.shelf-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 20px;
}

.shelf-problem {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 28px;
}

/* product card */

.product-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px clamp(22px, 3vw, 34px);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.shelf-alt .product-card { background: var(--paper); }
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(28, 26, 23, 0.25);
}
/* A small hanging shelf-label tag on every product card, reinforcing
   "this is a physical item on a shelf" even in the plain fallback layout. */
.product-card[data-shelf-tag]::before {
  content: attr(data-shelf-tag);
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 4px 11px;
  border-radius: 2px;
  transform: rotate(-2deg);
  box-shadow: 0 8px 16px -8px rgba(28, 26, 23, 0.5);
}
.product-role {
  font-size: 0.85rem;
  color: var(--brass-deep);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.product-desc {
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.product-for {
  margin: 0 0 22px;
  font-size: 0.98rem;
}
.product-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brass-deep);
  font-weight: 600;
  margin: 0 0 10px;
}
.product-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 14px;
}

.product-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.free-card {
  background: var(--brass-tint);
  border-color: rgba(169, 119, 63, 0.28);
}

/* shelf visual / product objects */

.shelf-visual {
  position: relative;
  height: clamp(260px, 32vw, 380px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 900px;
  padding: 6% 8% 16%;
}
/* The cubby: a recessed back panel with brass uprights on each side,
   so the product visibly sits inside a shelf compartment. */
.shelf-visual::before {
  content: '';
  position: absolute;
  inset: 4% 5% 14%;
  border-radius: 14px;
  background-color: #eee2cd;
  background-image:
    linear-gradient(90deg, var(--brass-deep) 0 4%, transparent 4% 96%, var(--brass-deep) 96% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(28, 26, 23, 0.05));
  box-shadow:
    inset 0 10px 18px -12px rgba(28, 26, 23, 0.28),
    inset 0 -6px 14px -10px rgba(28, 26, 23, 0.18);
  border: 1px solid rgba(138, 95, 48, 0.35);
}
.shelf-plank {
  position: absolute;
  bottom: 12%;
  left: 4%;
  right: 4%;
  height: 22px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #c98a45 0%, #8a5f30 60%, #6e4a24 100%);
  border-bottom: 3px solid rgba(28, 16, 6, 0.35);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.12),
    0 20px 34px -16px rgba(138, 95, 48, 0.65);
}
.visual-ring {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,119,63,0.4), rgba(169,119,63,0.08) 55%, transparent 72%);
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
}
.product-object {
  position: relative;
  width: 48%;
  aspect-ratio: 1 / 1;
  margin-bottom: 18%;
  border-radius: 18px;
  background: linear-gradient(155deg, #ffffff, var(--brass-tint));
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -24px rgba(28, 26, 23, 0.35);
  transition: transform 0.6s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shelf.is-in-view .product-object {
  transform: translateY(-14px);
}
.obj-icon {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(28,26,23,0.18));
}
/* pathLength="1" is set on every shape in these icons, so a dasharray/offset
   of 1 draws the whole icon regardless of its real geometry — used for the
   "line drawing itself in" reveal as each product presents. */
.obj-icon path,
.obj-icon rect,
.obj-icon circle,
.obj-icon line {
  stroke-dasharray: 1;
}
.free-card ~ .product-object,
.product-object.free {
  background: linear-gradient(155deg, #ffffff, #e9dcc4);
}

/* When kiosk3d.js has successfully mounted a real WebGL object over a
   product-object, the flat SVG fallback icon underneath is hidden so it
   doesn't show through. If the 3D layer never loads (no WebGL, script
   blocked, etc.) this class is never added and the flat icon is what
   renders — a silent, safe fallback. */
.product-object.has-3d .obj-icon {
  opacity: 0;
}

/* Full-viewport WebGL overlay. kiosk3d.js draws into rectangular "windows"
   matching each .product-object / hero-product's on-screen position via
   the scissor test, so this canvas can sit above the shelf art but below
   all text and interactive elements. It never captures pointer events. */
#kiosk3d-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.hero-product.has-3d .unit-icon {
  opacity: 0;
}

/* Two-object shelves (05, 06): offset the pair so both read clearly */
.shelf-visual [data-obj="1"] {
  position: absolute;
  width: 40%;
  left: 20%;
  bottom: 40%;
  margin-bottom: 0;
  z-index: 2;
}
.shelf-visual [data-obj="2"] {
  position: absolute;
  width: 34%;
  right: 12%;
  bottom: 22%;
  margin-bottom: 0;
  z-index: 1;
  opacity: 0.85;
}

/* ---------- Sorter ---------- */

.sorter {
  padding: 110px 0;
  background: var(--ink);
  color: var(--paper);
}
.sorter .eyebrow { color: var(--brass); }
.sorter .section-title { color: var(--paper); }

.sorter-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sorter-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--paper);
  background: rgba(247, 243, 236, 0.05);
  border: 1px solid rgba(247, 243, 236, 0.16);
  border-radius: var(--radius);
  padding: 26px;
  transition: background-color 0.3s ease, transform 0.3s var(--ease), border-color 0.3s ease;
}
.sorter-card:hover {
  background: rgba(247, 243, 236, 0.1);
  border-color: var(--brass);
  transform: translateY(-3px);
}
.sorter-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
}
.sorter-a {
  font-size: 0.9rem;
  color: var(--brass);
  font-weight: 600;
}

/* ---------- David ---------- */

.david {
  padding: 120px 0;
}
.david-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.david-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--paper-deep), var(--brass-tint));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}
.david-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(28,26,23,0.03) 0 2px, transparent 2px 14px);
}
.portrait-placeholder-text {
  position: relative;
  z-index: 1;
  padding: 20px;
  font-style: italic;
  font-family: var(--font-display);
}
.david-copy p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 60ch;
}
.david-copy p:first-of-type { color: var(--ink); }

/* ---------- Contact ---------- */

.contact {
  padding: 120px 0 100px;
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.contact-intro p { color: var(--ink-soft); font-size: 1.08rem; max-width: 48ch; }

.contact-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--brass-deep);
}
.btn-submit {
  align-self: flex-start;
  border: none;
}
.form-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--brass-deep);
  min-height: 1.2em;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.footer-inner p { margin: 0; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .shelf-grid,
  .shelf-grid.reverse {
    grid-template-columns: 1fr;
  }
  .shelf-grid.reverse .shelf-visual { order: 0; }
  .shelf-visual { height: 220px; }

  .product-pair {
    grid-template-columns: 1fr;
  }

  .sorter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .david-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .david-portrait { max-width: 340px; }

  .shelf-index {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .hero { min-height: auto; padding-top: 120px; }
  .sorter-grid { grid-template-columns: 1fr; }
  .shelf-index { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .shelf { padding: 70px 0; }
  .intro-shelves { padding: 80px 0 40px; }
  .sorter, .david, .contact { padding: 80px 0; }
}