/* ================================================================
   REMBOLICA — Editorial wabi-sabi design system
   Single stylesheet, hand-rolled, no build step required.
   ================================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Colour: washi paper, sumi ink, persimmon dye, indigo, sage */
  --color-paper:        #F4EFE6;
  --color-paper-deep:   #EBE3D2;
  --color-paper-soft:   #FAF7F0;
  --color-ink:          #1C1C1C;
  --color-ink-soft:     #4A4543;
  --color-ink-mute:     #7A7470;
  --color-rule:         #D6CFBE;
  --color-persimmon:    #C9542B;
  --color-persimmon-d:  #A8401E;
  --color-indigo:       #2E3D52;
  --color-sage:         #A1AC8E;

  /* Typography */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Schibsted Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-hand:    'Caveat', 'Brush Script MT', cursive;

  /* Type scale (modular, mobile-first) */
  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-lg:   1.125rem;  /*  18px */
  --fs-xl:   1.375rem;  /*  22px */
  --fs-2xl:  1.75rem;   /*  28px */
  --fs-3xl:  2.25rem;   /*  36px */
  --fs-4xl:  3rem;      /*  48px */
  --fs-5xl:  4rem;      /*  64px */
  --fs-6xl:  5.5rem;    /*  88px */

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 760px;
  --container-wide: 1480px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid:  360ms;
  --dur-slow: 700ms;

  /* Borders / radii */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--color-rule);
  --hairline-ink: 1px solid var(--color-ink);
}

/* ---------- COOKIE CONSENT BANNER (RGPD / ePrivacy) ---------- */
.cc-banner {
  position: fixed;
  bottom: var(--sp-5);
  left: var(--sp-5);
  right: var(--sp-5);
  max-width: 720px;
  margin-inline: auto;
  z-index: 9000;
  background: var(--color-paper-soft);
  border: 1px solid var(--color-ink);
  padding: var(--sp-6);
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: 0 20px 60px -20px rgba(28,28,28,0.25);
  animation: ccSlideIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-banner[data-open] { display: flex; }
@keyframes ccSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-banner__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-ink);
}
.cc-banner__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: none;
}
.cc-banner__text a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.cc-banner__text a:hover { color: var(--color-persimmon); border-color: var(--color-persimmon); }

.cc-banner__categories {
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.cc-banner[data-mode="custom"] .cc-banner__categories { display: flex; }

.cc-cat {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.875rem;
}
.cc-cat label {
  flex: 1;
  cursor: pointer;
}
.cc-cat strong {
  display: block;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.cc-cat span { color: var(--color-ink-soft); }
.cc-cat input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--color-persimmon);
}
.cc-cat input[disabled] { opacity: 0.6; cursor: not-allowed; }

.cc-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.cc-banner__actions .cc-link {
  background: none;
  border: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  margin-right: auto;
}
.cc-banner__actions .cc-link:hover { color: var(--color-ink); border-color: var(--color-rule); }

.cc-btn {
  padding: 0.7rem 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--color-ink);
  cursor: pointer;
  background: transparent;
  color: var(--color-ink);
  font-family: inherit;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cc-btn:hover { background: var(--color-ink); color: var(--color-paper); }
.cc-btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.cc-btn--primary:hover { background: var(--color-persimmon); border-color: var(--color-persimmon); }

@media (max-width: 600px) {
  .cc-banner {
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--sp-5);
  }
  .cc-banner__actions { flex-direction: column-reverse; align-items: stretch; }
  .cc-banner__actions .cc-link { margin-right: 0; text-align: center; }
  .cc-btn { width: 100%; }
}

/* Form consent checkbox styling */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.form-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--color-persimmon);
}
.form-consent a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-rule);
}
.form-consent a:hover { color: var(--color-persimmon); border-color: var(--color-persimmon); }

/* ---------- ACCESSIBILITY: Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.6rem 1rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 9999;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  transition: top var(--dur-fast);
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--color-persimmon);
  outline-offset: 2px;
}

/* ---------- FOUC mitigation: hide body until i18n ready ---------- */
html.i18n-loading body { opacity: 0; }
html body { opacity: 1; transition: opacity 200ms ease-out; }

/* ---------- Mobile nav backdrop ---------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28,28,28,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid);
  z-index: 50;
}
[data-nav-open] .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 901px) {
  .nav-backdrop { display: none; }
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-persimmon); outline-offset: 3px; }

/* ---------- 3. BASE TYPOGRAPHY ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-ink);
  background-color: var(--color-paper);
  /* Paper grain — subtle SVG noise overlay, gives a printed-on-paper texture */
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.11 0 0 0 0 0.11 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--color-ink);
}

h1 { font-size: clamp(var(--fs-4xl), 7vw, var(--fs-6xl)); }
h2 { font-size: clamp(var(--fs-3xl), 4.5vw, var(--fs-5xl)); }
h3 { font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-3xl)); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-xl); letter-spacing: -0.01em; }

p { max-width: 64ch; }
.lead { font-size: var(--fs-lg); color: var(--color-ink-soft); }

/* Editorial micro-type */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--color-persimmon);
}

.caption {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.hand {
  font-family: var(--font-hand);
  font-size: 1.4em;
  color: var(--color-persimmon);
  line-height: 1;
}

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding-block: clamp(var(--sp-8), 10vw, var(--sp-10)); }
.section--tight { padding-block: clamp(var(--sp-7), 6vw, var(--sp-8)); }
.section--bleed { padding-block: 0; }

.section-paper-deep { background: var(--color-paper-deep); }
.section-ink { background: var(--color-ink); color: var(--color-paper); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--color-paper); }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* The "Knot Mark" — brand mnemonic divider */
.knot-mark {
  display: inline-block;
  width: 36px; height: 36px;
  color: var(--color-persimmon);
}
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding-block: var(--sp-7);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--color-rule);
}

/* ---------- 5. COMPONENTS — Buttons, links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 1rem 1.8rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast),
              color var(--dur-fast),
              box-shadow var(--dur-fast);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn-primary:hover {
  background: var(--color-persimmon);
  box-shadow: 0 8px 24px -8px rgba(201,84,43,0.4);
}

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.btn-outline:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  padding-inline: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 0.35rem;
}
.btn-ghost:hover { color: var(--color-persimmon); border-color: var(--color-persimmon); transform: none; }

/* Inline editorial link with animated underline */
.link {
  position: relative;
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color var(--dur-fast), background-size var(--dur-mid) var(--ease-out);
}
.link:hover { color: var(--color-persimmon); background-size: 0% 1px; }

/* ---------- 6. HEADER / NAV ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244,239,230,0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
  min-height: 130px;
}

/* Use the original lockup as a single image — preserves the designed
   relationship between bundle mark and REMBOLICA wordmark. */
.site-logo {
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--dur-fast);
}
.site-logo:hover { opacity: 0.78; }

.site-logo__lockup {
  display: block;
  height: 108px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .site-header__inner { min-height: 108px; padding-block: var(--sp-3); }
  .site-logo__lockup { height: 88px; }
}
@media (max-width: 600px) {
  .site-header__inner { min-height: 90px; padding-block: var(--sp-2); }
  .site-logo__lockup { height: 72px; }
}

/* Footer logo (consolidated — paper bg, ink color, proper aspect ratio) */
.footer-brand .site-logo img {
  height: 110px;
  width: auto;
  filter: none;
  margin-bottom: var(--sp-4);
}
@media (max-width: 800px) {
  .footer-brand .site-logo img { height: 90px; }
}

/* Knot Mark divider — brand mnemonic between major sections.
   Just the mark, no rules. Quieter and more confident. */
.knot-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-8);
}
.knot-divider img {
  height: 36px;
  width: auto;
  opacity: 0.4;
}

/* Publisher's mark — used at the end of long-form pages */
.publisher-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-9);
}
.publisher-mark img {
  height: 140px;
  width: auto;
  opacity: 0.85;
}
.publisher-mark__caption {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.site-nav { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav__list { display: flex; gap: var(--sp-6); }
.site-nav__list a {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  position: relative;
  padding-block: 0.4rem;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out);
}
.site-nav__list a:hover::after,
.site-nav__list a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.site-nav__list a.is-active { color: var(--color-persimmon); }
.site-nav__list a.is-active::after { background: var(--color-persimmon); }

.lang-switcher {
  display: inline-flex;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.lang-switcher button {
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.lang-switcher button:hover { color: var(--color-ink); }
.lang-switcher button.is-active {
  color: var(--color-paper);
  background: var(--color-ink);
}

/* Mobile nav */
.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 21px; }
[data-nav-open] .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
[data-nav-open] .nav-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: 70px 0 0 0;
    background: var(--color-paper);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--sp-7) var(--gutter);
    gap: var(--sp-7);
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-out);
  }
  [data-nav-open] .site-nav { transform: translateX(0); }
  .site-nav__list { flex-direction: column; gap: var(--sp-5); font-size: var(--fs-2xl); }
  .site-nav__list a { font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: -0.01em; }
}

/* ---------- 7. HERO — sticky parallax (premium scroll-over pattern) ---------- */
.hero--sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  /* Slip behind sticky header so the image is full-bleed top-to-bottom */
  margin-top: calc(-1 * var(--header-h, 140px));
  overflow: hidden;
  z-index: 0;
  background: var(--color-paper-deep);
}
:root { --header-h: 140px; }
@media (max-width: 900px) { :root { --header-h: 108px; } }
@media (max-width: 600px) { :root { --header-h: 90px;  } }

/* Hero content needs to stay below the visual band where the header sits,
   otherwise eyebrow/title can be hidden behind the header backdrop */
.hero__content {
  padding-top: var(--header-h);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.96);
  z-index: 0;
  /* Subtle slow zoom for cinematic feel */
  animation: heroZoom 24s var(--ease-in-out) infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(244, 239, 230, 0.96) 0%,
    rgba(244, 239, 230, 0.88) 28%,
    rgba(244, 239, 230, 0.55) 48%,
    rgba(244, 239, 230, 0.10) 70%,
    rgba(244, 239, 230, 0.00) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  max-width: 720px;
}
.hero__title {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.hero__title em {
  font-style: italic;
  color: var(--color-persimmon);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero__lede { font-size: var(--fs-lg); max-width: 44ch; color: var(--color-ink-soft); }
.hero__cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); }

/* Scroll affordance — small animated indicator at hero bottom */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  width: 1px;
  height: 50px;
  background: var(--color-ink-soft);
  opacity: 0.5;
  overflow: hidden;
}
.hero__scroll span {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--color-ink);
  animation: scrollPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0%   { transform: translateY(0); }
  100% { transform: translateY(200%); }
}

/* The page body slides up over the sticky hero on scroll */
.page-body {
  position: relative;
  z-index: 1;
  background: var(--color-paper);
  /* Soft drop shadow at top edge — sells the depth/parallax illusion */
  box-shadow: 0 -30px 80px -20px rgba(28, 28, 28, 0.18);
}

@media (max-width: 800px) {
  .hero--sticky { height: 90vh; min-height: 560px; }
  .hero__overlay {
    background: linear-gradient(180deg,
      rgba(244, 239, 230, 0.30) 0%,
      rgba(244, 239, 230, 0.55) 40%,
      rgba(244, 239, 230, 0.92) 78%,
      rgba(244, 239, 230, 1.00) 100%);
  }
  .hero__content {
    justify-content: flex-end;
    padding-bottom: var(--sp-7);
    max-width: 100%;
  }
  .hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
  .hero__scroll span { animation: none; opacity: 0; }
}

/* ---------- 8. EDITORIAL SECTIONS ---------- */
/* Two-column "magazine" with offset image and text */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-6), 6vw, var(--sp-9));
  align-items: center;
}
.editorial--reverse { direction: rtl; }
.editorial--reverse > * { direction: ltr; }
.editorial__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--color-paper-deep);
}
.editorial__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92) contrast(0.96);
}
.hero__media img, .hero__media video { filter: saturate(0.92) contrast(0.96); }
.collection-card img { filter: saturate(0.92) contrast(0.96); }
.workshop-card__media img { filter: saturate(0.92) contrast(0.96); }
.editorial__media .figcaption {
  position: absolute;
  bottom: -1.8rem; left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-mute);
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.editorial__copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.editorial__copy h2 { margin-bottom: var(--sp-2); }
.editorial__copy p + p { margin-top: 0.5rem; }

@media (max-width: 800px) {
  .editorial { grid-template-columns: 1fr; }
}

/* Three-pillar value cards */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  border-top: var(--hairline);
  padding-top: var(--sp-7);
}
.pillar { display: flex; flex-direction: column; gap: var(--sp-3); padding-right: var(--sp-5); border-right: var(--hairline); }
.pillar:last-child { border-right: 0; }
.pillar__num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-ink-mute);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.pillar h3 { font-size: var(--fs-xl); }
.pillar p { font-size: var(--fs-base); color: var(--color-ink-soft); }
@media (max-width: 800px) {
  .pillars { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pillar { border-right: 0; border-bottom: var(--hairline); padding-bottom: var(--sp-5); padding-right: 0; }
  .pillar:last-child { border-bottom: 0; }
}

/* Occasion cards (collection grid) */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.collection-card {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-paper-deep);
  cursor: pointer;
}
.collection-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.collection-card:hover img { transform: scale(1.06); }
.collection-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,28,28,0) 40%, rgba(28,28,28,0.7) 100%);
}
.collection-card__label {
  position: absolute;
  bottom: var(--sp-5); left: var(--sp-5);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.05;
}
.collection-card__sub {
  position: absolute;
  top: var(--sp-5); left: var(--sp-5);
  color: var(--color-paper);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Asymmetric stagger — every 2nd card drops down for editorial rhythm */
@media (min-width: 1001px) {
  .collection-grid > .collection-card:nth-child(2n) {
    transform: translateY(48px);
  }
}
@media (max-width: 1000px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .collection-grid { grid-template-columns: 1fr; } }

/* Product grid (v2) — broader product range, less rigid than collection grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6) var(--sp-5);
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.product-card__media {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--color-paper-deep);
  margin-bottom: var(--sp-2);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.96);
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card h3 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}
.product-card p {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  max-width: none;
}
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-5); } }
@media (max-width: 540px)  { .product-grid { grid-template-columns: 1fr; } }

/* Testimonial */
.testimonial {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 1.25;
  color: var(--color-ink);
}
.testimonial__attr {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

/* Workshop card */
.workshop-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  border-top: var(--hairline);
  align-items: center;
}
.workshop-card:last-child { border-bottom: var(--hairline); }
.workshop-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-paper-deep); }
.workshop-card__media img { width: 100%; height: 100%; object-fit: cover; }
.workshop-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  color: var(--color-persimmon);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  display: block;
  margin-bottom: var(--sp-2);
}
.workshop-card__meta {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-block: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.workshop-card__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.workshop-card__meta span::before {
  content: "•"; color: var(--color-persimmon);
}
@media (max-width: 800px) {
  .workshop-card { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Impact counter strip */
.impact {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--sp-9);
}
.impact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  text-align: center;
}
.impact__num {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  color: var(--color-persimmon);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 1;
}
.impact__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper);
  opacity: 0.75;
}
@media (max-width: 700px) { .impact__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* B2B / corporate strip */
.b2b {
  background: var(--color-indigo);
  color: var(--color-paper);
  padding-block: var(--sp-9);
}
.b2b__inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7); align-items: center;
}
.b2b h2 { color: var(--color-paper); }
.b2b p { color: rgba(244,239,230,0.85); }
@media (max-width: 800px) { .b2b__inner { grid-template-columns: 1fr; } }

/* Newsletter */
.newsletter {
  text-align: center;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding-block: var(--sp-9);
}
.newsletter__form {
  display: flex; gap: var(--sp-3);
  max-width: 460px; margin: var(--sp-5) auto 0;
}
.newsletter__form input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  padding: 0.7rem 0.2rem;
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
}
.newsletter__form input:focus { outline: 0; border-color: var(--color-persimmon); }

/* Forms */
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.form-field label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.form-field input, .form-field textarea, .form-field select {
  background: var(--color-paper-soft);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: var(--fs-base);
  color: var(--color-ink);
  font-family: var(--font-body);
  transition: border-color var(--dur-fast);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 0; border-color: var(--color-ink);
}
.form-field textarea { min-height: 140px; resize: vertical; }

/* ---------- 9. FOOTER ---------- */
.site-footer {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: var(--sp-9) var(--sp-6);
  border-top: 1px solid var(--color-ink);
}
.site-footer a { color: var(--color-ink); }
.site-footer a:hover { color: var(--color-persimmon); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--color-rule);
}
.footer-brand p {
  max-width: 36ch;
  color: var(--color-ink-soft);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}
.footer-col h4 {
  color: var(--color-ink-mute);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { font-size: var(--fs-sm); }
.footer-legal {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-3);
}
.footer-legal__list {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.footer-legal__list a { color: var(--color-ink-mute); border-bottom: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.footer-legal__list a:hover { color: var(--color-persimmon); border-color: var(--color-persimmon); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.footer-bottom a { color: var(--color-ink-mute); }
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer-bottom { flex-direction: column; gap: var(--sp-3); }
}

/* ---------- 10. UTILITIES ---------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.muted       { color: var(--color-ink-mute); }
.persimmon   { color: var(--color-persimmon); }
.italic-display { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }

.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }

.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-paper-deep);
  color: var(--color-ink-soft);
  border-radius: var(--radius-pill);
}

/* ---------- 11. SCROLL REVEAL (CSS-only via IntersectionObserver class) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Subtle "to be filled" placeholder marker on legal pages */
.todo-fill {
  color: var(--color-ink-mute);
  font-style: italic;
  border-bottom: 1px dotted var(--color-rule);
  cursor: help;
}

/* ---------- 12. PAGE HEADER (sub-pages) ---------- */
.page-header {
  padding-block: clamp(var(--sp-8), 12vw, var(--sp-10)) clamp(var(--sp-6), 6vw, var(--sp-8));
  border-bottom: var(--hairline);
  background: var(--color-paper-deep);
}
.page-header__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: end;
}
.page-header h1 {
  font-size: clamp(var(--fs-4xl), 7vw, var(--fs-6xl));
  line-height: 1;
}
.page-header__lede {
  font-size: var(--fs-lg);
  color: var(--color-ink-soft);
  max-width: 48ch;
}
@media (max-width: 800px) {
  .page-header__inner { grid-template-columns: 1fr; }
}

/* ---------- 14. WORKSHOPS — teaser cards, format, audience ---------- */
.workshop-card__takeaways-label {
  display: block;
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.workshop-card__takeaways {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  color: var(--color-ink-soft);
}
.workshop-card__takeaways li { display: flex; gap: var(--sp-3); }
.workshop-card__takeaways li::before {
  content: "→";
  flex-shrink: 0;
  color: var(--color-persimmon);
}
.workshop-card__note {
  margin-top: var(--sp-4);
  font-family: var(--font-hand);
  font-size: var(--fs-lg);
  color: var(--color-ink-mute);
}

/* The teaser promise: what's on the page, what's kept for the session */
.workshops-note {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-paper-soft);
  border-left: 2px solid var(--color-persimmon);
  text-align: left;
  color: var(--color-ink-soft);
}

/* Who the workshops are for */
.audience-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-5);
}

/* Talks — compact, text-only cards, set apart from the hands-on workshops */
.talk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.talk-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--color-paper-soft);
  border-top: 2px solid var(--color-persimmon);
}
.talk-card h3 { font-size: var(--fs-xl); }
.talk-card__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.talk-card p { color: var(--color-ink-soft); }
.talk-card .workshop-card__takeaways { margin-top: auto; padding-top: var(--sp-3); }
@media (max-width: 800px) {
  .talk-grid { grid-template-columns: 1fr; }
}