/* Hauselle — Overlay Scroll Layout 78 · Schichten & Schatten */
:root {
  --hsl-linen: #F0EBE3;
  --hsl-paper: #FAF8F5;
  --hsl-clay: #B87D5C;
  --hsl-clay-deep: #9A6348;
  --hsl-sage: #8A9A7B;
  --hsl-sage-deep: #6E7D62;
  --hsl-charcoal: #2C2A26;
  --hsl-warm-gray: #5C5A54;
  --hsl-mist: rgba(240, 235, 227, 0.92);
  --hsl-panel: rgba(250, 248, 245, 0.88);
  --hsl-shadow: 0 24px 60px rgba(44, 42, 38, 0.14);
  --hsl-shadow-deep: 0 40px 100px rgba(44, 42, 38, 0.22);
  --hsl-font-serif: 'Cormorant Garamond', Georgia, serif;
  --hsl-font-sans: 'DM Sans', system-ui, sans-serif;
  --hsl-nav-h: 72px;
  --hsl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hsl-radius: 2px;
  --hsl-radius-lg: 4px;
}

[data-theme="dark"] {
  --hsl-linen: #1E1C19;
  --hsl-paper: #262320;
  --hsl-mist: rgba(30, 28, 25, 0.94);
  --hsl-panel: rgba(38, 35, 32, 0.9);
  --hsl-charcoal: #F0EBE3;
  --hsl-warm-gray: #B8B4AC;
  --hsl-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --hsl-shadow-deep: 0 40px 100px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.hsl-body {
  margin: 0;
  font-family: var(--hsl-font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--hsl-charcoal);
  background: var(--hsl-paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Typography */
.hsl-micro {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hsl-sage-deep);
}
h1, h2, h3 {
  font-family: var(--hsl-font-serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 em, h1 em { font-style: italic; color: var(--hsl-clay); }
.hsl-lead { font-size: 1.15rem; line-height: 1.7; }

/* Buttons */
.hsl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--hsl-radius);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--hsl-ease), background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.hsl-btn:hover { transform: translateY(-2px); }
.hsl-btn--clay {
  background: var(--hsl-clay);
  color: #fff;
  box-shadow: 0 8px 24px rgba(184, 125, 92, 0.35);
}
.hsl-btn--clay:hover { background: var(--hsl-clay-deep); }
.hsl-btn--linen {
  background: var(--hsl-linen);
  color: var(--hsl-charcoal);
  border-color: rgba(138, 154, 123, 0.3);
}
.hsl-btn--ghost {
  background: transparent;
  border-color: var(--hsl-warm-gray);
  color: var(--hsl-charcoal);
}
.hsl-btn--sm { padding: 0.55rem 1rem; font-size: 10px; }
.hsl-btn--full { width: 100%; }
.hsl-text-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--hsl-clay);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 125, 92, 0.4);
  transition: border-color 0.3s;
}
.hsl-text-link:hover { border-color: var(--hsl-clay); }

/* Skip */
.hsl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  padding: 0.75rem 1rem; background: var(--hsl-clay); color: #fff;
}
.hsl-skip:focus { left: 0; }

/* Overlay canvas (home only) */
.hsl-overlay-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hsl-overlay-canvas__layer {
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--hsl-ease), transform 2s var(--hsl-ease);
}
.hsl-overlay-canvas__layer.is-active {
  opacity: 0.42;
  transform: scale(1);
}
[data-theme="dark"] .hsl-overlay-canvas__layer.is-active { opacity: 0.28; }
.hsl-overlay-canvas__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--hsl-mist) 0%, transparent 35%, transparent 65%, var(--hsl-mist) 100%);
}

/* Depth rail */
.hsl-depth-rail {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.hsl-depth-rail__track {
  width: 2px;
  height: 120px;
  background: rgba(138, 154, 123, 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.hsl-depth-rail__fill {
  width: 100%;
  height: 0%;
  background: var(--hsl-clay);
  transition: height 0.15s linear;
}
.hsl-depth-rail__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hsl-depth-rail__marks button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(138, 154, 123, 0.35);
  cursor: pointer;
  transition: transform 0.3s, background 0.3s;
}
.hsl-depth-rail__marks button.is-active {
  background: var(--hsl-clay);
  transform: scale(1.5);
}
.hsl-depth-rail__readout {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--hsl-sage-deep);
}

/* Float nav */
.hsl-float-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
.hsl-float-nav.is-scrolled {
  background: var(--hsl-mist);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(138, 154, 123, 0.15);
}
.hsl-float-nav__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hsl-float-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}
.hsl-float-nav__glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--hsl-font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  background: var(--hsl-sage);
  color: #fff;
  border-radius: var(--hsl-radius);
}
.hsl-float-nav__word { display: flex; flex-direction: column; line-height: 1.2; }
.hsl-float-nav__word strong { font-family: var(--hsl-font-serif); font-size: 1.1rem; font-weight: 600; }
.hsl-float-nav__word em { font-size: 10px; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hsl-warm-gray); }
.hsl-float-nav__links {
  display: flex;
  gap: 1.75rem;
}
.hsl-nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hsl-warm-gray);
  position: relative;
  transition: color 0.3s;
}
.hsl-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--hsl-clay);
  transition: width 0.35s var(--hsl-ease);
}
.hsl-nav-link:hover, .hsl-nav-link.is-active { color: var(--hsl-charcoal); }
.hsl-nav-link.is-active::after, .hsl-nav-link:hover::after { width: 100%; }
.hsl-float-nav__tools { display: flex; align-items: center; gap: 0.5rem; }
.hsl-tool-btn, .hsl-cart-chip {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(138, 154, 123, 0.25);
  border-radius: var(--hsl-radius);
  background: transparent;
  color: var(--hsl-charcoal);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: border-color 0.3s, background 0.3s;
}
.hsl-tool-btn:hover, .hsl-cart-chip:hover { border-color: var(--hsl-sage); background: rgba(138, 154, 123, 0.08); }
.hsl-cart-chip span {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--hsl-clay);
  color: #fff;
  border-radius: 8px;
}
.hsl-icon-moon { display: none; }
[data-theme="dark"] .hsl-icon-sun { display: none; }
[data-theme="dark"] .hsl-icon-moon { display: block; }
.hsl-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hsl-burger span {
  display: block;
  height: 1.5px;
  background: var(--hsl-charcoal);
  transition: transform 0.35s, opacity 0.35s;
}
.hsl-burger.is-open span:first-child { transform: translateY(7.5px) rotate(45deg); }
.hsl-burger.is-open span:last-child { transform: translateY(-7.5px) rotate(-45deg); }
.hsl-float-nav__sage-line {
  max-width: 1320px;
  margin: 0.5rem auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hsl-sage), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.hsl-float-nav.is-scrolled .hsl-float-nav__sage-line { opacity: 0.5; }

/* Search & mobile menu */
.hsl-search-veil, .hsl-slide-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.hsl-search-veil[aria-hidden="false"], .hsl-slide-menu[aria-hidden="false"] { pointer-events: auto; }
.hsl-search-veil__backdrop, .hsl-slide-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 42, 38, 0.5);
  opacity: 0;
  transition: opacity 0.4s;
}
.hsl-search-veil[aria-hidden="false"] .hsl-search-veil__backdrop,
.hsl-slide-menu[aria-hidden="false"] .hsl-slide-menu__backdrop { opacity: 1; }
.hsl-search-veil__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 5rem 1.5rem 2rem;
  background: var(--hsl-paper);
  transform: translateY(-100%);
  transition: transform 0.5s var(--hsl-ease);
}
.hsl-search-veil[aria-hidden="false"] .hsl-search-veil__panel { transform: translateY(0); }
.hsl-search-veil__form {
  display: flex;
  gap: 0.75rem;
  max-width: 600px;
  margin: 1rem auto 0;
}
.hsl-search-veil__form input {
  flex: 1;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(138, 154, 123, 0.35);
  border-radius: var(--hsl-radius);
  background: var(--hsl-linen);
}
.hsl-search-veil__hints {
  max-width: 600px;
  margin: 1rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 12px;
}
.hsl-search-veil__hints button {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(138, 154, 123, 0.3);
  border-radius: var(--hsl-radius);
  background: transparent;
  cursor: pointer;
}
.hsl-slide-menu__sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  padding: 5rem 1.75rem 2rem;
  background: var(--hsl-paper);
  transform: translateX(100%);
  transition: transform 0.5s var(--hsl-ease);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hsl-slide-menu[aria-hidden="false"] .hsl-slide-menu__sheet { transform: translateX(0); }
.hsl-slide-menu__sheet a {
  font-family: var(--hsl-font-serif);
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--hsl-charcoal);
}
.hsl-slide-menu__foot {
  margin-top: auto;
  font-size: 13px;
  color: var(--hsl-warm-gray);
}
.hsl-slide-menu__foot a { font-size: 14px; color: var(--hsl-clay); }

/* Main & overlay world */
.hsl-main { position: relative; z-index: 1; }
.page-home .hsl-main { padding-top: var(--hsl-nav-h); }
.hsl-overlay-world { position: relative; }

/* Panels — overlay scroll */
.hsl-panel {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hsl-panel::before {
  content: '';
  position: absolute;
  inset: 8% 4%;
  background: var(--hsl-panel);
  border-radius: var(--hsl-radius-lg);
  box-shadow: var(--hsl-shadow);
  z-index: 0;
  clip-path: polygon(0 0, 100% 2%, 98% 100%, 2% 98%);
}
.hsl-panel > * { position: relative; z-index: 1; width: 100%; max-width: 1200px; }

/* Fade reveal */
.hsl-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--hsl-ease), transform 0.8s var(--hsl-ease);
}
.hsl-fade.is-in { opacity: 1; transform: translateY(0); }
.hsl-fade--late { transition-delay: 0.15s; }

/* §01 Aperture */
.hsl-aperture {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  min-height: 80vh;
}
.hsl-aperture__mask {
  clip-path: circle(18% at 50% 50%);
  transition: clip-path 1.4s var(--hsl-ease);
  overflow: hidden;
  border-radius: var(--hsl-radius-lg);
  box-shadow: var(--hsl-shadow-deep);
}
.hsl-aperture__mask.is-open { clip-path: circle(75% at 50% 45%); }
.hsl-aperture__mask img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.hsl-aperture__title { margin-bottom: 0.5rem; }
.hsl-aperture__deck { color: var(--hsl-warm-gray); max-width: 38ch; margin-bottom: 1.5rem; }
.hsl-aperture__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hsl-aperture__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* §02 Whisper pinned */
.hsl-whisper {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 3rem;
  align-items: start;
}
.hsl-whisper__pin { position: relative; }
.hsl-whisper__scroll { margin-top: 2rem; }
.hsl-whisper__block {
  margin-bottom: 2rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(138, 154, 123, 0.35);
}
.hsl-whisper__block blockquote {
  margin: 0;
  font-family: var(--hsl-font-serif);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--hsl-clay);
}
.hsl-whisper__block cite { display: block; margin-top: 0.5rem; font-size: 12px; font-style: normal; color: var(--hsl-warm-gray); }
.hsl-whisper__float {
  position: sticky;
  top: calc(var(--hsl-nav-h) + 2rem);
  margin: 0;
}
.hsl-whisper__float img { border-radius: var(--hsl-radius-lg); box-shadow: var(--hsl-shadow); }
.hsl-whisper__float figcaption { margin-top: 0.5rem; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hsl-warm-gray); }

/* §03 Atlas interactive */
.hsl-atlas__head { text-align: center; margin-bottom: 2.5rem; }
.hsl-atlas__stage {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items: stretch;
}
.hsl-atlas__preview {
  position: relative;
  min-height: 380px;
  border-radius: var(--hsl-radius-lg);
  overflow: hidden;
  box-shadow: var(--hsl-shadow-deep);
}
.hsl-atlas__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s var(--hsl-ease), transform 0.9s var(--hsl-ease);
}
.hsl-atlas__scene.is-active { opacity: 1; transform: scale(1); }
.hsl-atlas__scene img { width: 100%; height: 100%; object-fit: cover; }
.hsl-atlas__controls { display: flex; flex-direction: column; gap: 0.65rem; }
.hsl-atlas__tab {
  text-align: left;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(138, 154, 123, 0.25);
  border-radius: var(--hsl-radius);
  background: var(--hsl-linen);
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.hsl-atlas__tab:hover { transform: translateX(6px); border-color: var(--hsl-sage); }
.hsl-atlas__tab.is-active {
  border-color: var(--hsl-clay);
  box-shadow: var(--hsl-shadow);
  background: var(--hsl-paper);
}
.hsl-atlas__tab-num { font-size: 10px; font-weight: 700; color: var(--hsl-clay); display: block; }
.hsl-atlas__tab strong { display: block; font-family: var(--hsl-font-serif); font-size: 1.1rem; margin: 0.2rem 0; }
.hsl-atlas__tab span { font-size: 12px; color: var(--hsl-warm-gray); }

/* §04 Schichten-Vitrine */
.hsl-panel--curate::before {
  clip-path: polygon(0 2%, 98% 0, 100% 98%, 2% 100%);
}
.hsl-curate {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.4fr);
  grid-template-rows: auto auto;
  gap: 1.75rem 2.5rem;
  align-items: start;
}
.hsl-curate__intro {
  position: relative;
  padding-top: 1rem;
}
.hsl-curate__index {
  position: absolute;
  top: -0.5rem;
  left: -0.25rem;
  font-family: var(--hsl-font-serif);
  font-size: clamp(5rem, 10vw, 7.5rem);
  line-height: 1;
  color: rgba(184, 125, 92, 0.12);
  pointer-events: none;
  user-select: none;
}
.hsl-curate__deck {
  font-size: 14px;
  color: var(--hsl-warm-gray);
  max-width: 28ch;
  margin: 0.75rem 0 1.25rem;
}
.hsl-curate__legend {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 11px;
  color: var(--hsl-warm-gray);
}
.hsl-curate__legend span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hsl-curate__legend i {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--hsl-clay);
  display: block;
}
.hsl-curate__legend span:last-child i {
  background: linear-gradient(90deg, var(--hsl-sage), transparent);
  width: 28px;
}

.hsl-curate__stage {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 0.72fr);
  gap: 0;
  min-height: 520px;
  position: relative;
}
.hsl-curate__lens {
  position: relative;
  overflow: hidden;
  border-radius: var(--hsl-radius-lg) 0 0 var(--hsl-radius-lg);
  background: var(--hsl-charcoal);
  box-shadow: var(--hsl-shadow-deep);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}
.hsl-curate__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.85s var(--hsl-ease), transform 1.1s var(--hsl-ease);
}
.hsl-curate__frame.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
.hsl-curate__frame.is-exit {
  opacity: 0;
  transform: scale(0.96);
  z-index: 1;
}
.hsl-curate__frame img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}
.hsl-curate__shard {
  position: absolute;
  top: 12%;
  right: 8%;
  width: 38%;
  height: 52%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px);
  clip-path: polygon(12% 0, 100% 8%, 88% 100%, 0 92%);
  pointer-events: none;
  transition: transform 0.7s var(--hsl-ease);
}
.hsl-curate__frame.is-active .hsl-curate__shard {
  transform: translate(-6px, 8px) rotate(-1.5deg);
}
.hsl-curate__aperture {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 35% 45%, transparent 30%, rgba(44, 42, 38, 0.45) 100%),
    linear-gradient(135deg, rgba(138, 154, 123, 0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 3;
}

.hsl-curate__plaque {
  padding: 2rem 1.75rem;
  background: var(--hsl-linen);
  border: 1px solid rgba(138, 154, 123, 0.22);
  border-left: none;
  border-radius: 0 var(--hsl-radius-lg) var(--hsl-radius-lg) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-left: -2rem;
  z-index: 4;
  box-shadow: var(--hsl-shadow);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  transition: opacity 0.4s var(--hsl-ease), transform 0.4s var(--hsl-ease);
}
.hsl-curate__plaque.is-swapping {
  opacity: 0.4;
  transform: translateX(8px);
}
.hsl-curate__plaque h3 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin: 0.35rem 0 0.5rem;
}
.hsl-curate__plaque > p {
  font-size: 13px;
  color: var(--hsl-warm-gray);
  margin: 0 0 1rem;
  line-height: 1.6;
}
.hsl-curate__specs {
  margin: 0 0 1.25rem;
  font-size: 12px;
}
.hsl-curate__specs div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(138, 154, 123, 0.15);
}
.hsl-curate__specs dt {
  font-weight: 600;
  color: var(--hsl-sage-deep);
}
.hsl-curate__specs dd { margin: 0; color: var(--hsl-warm-gray); }
.hsl-curate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: auto;
}
.hsl-curate__actions strong {
  font-family: var(--hsl-font-serif);
  font-size: 1.5rem;
  color: var(--hsl-clay);
}

.hsl-curate__strip {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding: 0.5rem 0 0.75rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hsl-curate__strip::-webkit-scrollbar { display: none; }
.hsl-curate__chip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 52px;
  grid-template-rows: auto 1fr;
  gap: 0.25rem 0.65rem;
  align-items: center;
  padding: 0.65rem 0.85rem 0.65rem 0.65rem;
  border: 1px solid rgba(138, 154, 123, 0.25);
  border-radius: var(--hsl-radius);
  background: var(--hsl-paper);
  cursor: pointer;
  text-align: left;
  scroll-snap-align: start;
  transition: border-color 0.35s, transform 0.35s var(--hsl-ease), box-shadow 0.35s;
  min-width: 168px;
}
.hsl-curate__chip:hover {
  transform: translateY(-3px);
  border-color: var(--hsl-sage);
}
.hsl-curate__chip.is-active {
  border-color: var(--hsl-clay);
  box-shadow: 0 8px 28px rgba(184, 125, 92, 0.2);
  background: var(--hsl-linen);
}
.hsl-curate__chip-num {
  grid-column: 1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hsl-clay);
}
.hsl-curate__chip img {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 52px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--hsl-radius);
  filter: grayscale(0.35) contrast(0.95);
  transition: filter 0.4s;
}
.hsl-curate__chip.is-active img,
.hsl-curate__chip:hover img {
  filter: none;
}
.hsl-curate__chip-label {
  grid-column: 1;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--hsl-charcoal);
  max-width: 10ch;
}

.hsl-curate__foot {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.hsl-curate__note {
  font-size: 12px;
  color: var(--hsl-warm-gray);
  margin: 0;
  max-width: 24ch;
}

/* §05 Ribbon horizontal */
.hsl-ribbon__head { margin-bottom: 2rem; }
.hsl-ribbon__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.hsl-ribbon__card {
  flex: 0 0 min(320px, 80vw);
  scroll-snap-align: start;
  padding: 1.5rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  box-shadow: var(--hsl-shadow);
}
.hsl-ribbon__num {
  font-size: 2.5rem;
  font-family: var(--hsl-font-serif);
  color: rgba(184, 125, 92, 0.35);
  line-height: 1;
}
.hsl-ribbon__card h3 { font-size: 1.35rem; }
.hsl-ribbon__card p { font-size: 13px; color: var(--hsl-warm-gray); }
.hsl-ribbon__card img { margin-top: 1rem; border-radius: var(--hsl-radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* §06 Texture lab */
.hsl-texture-lab__head { text-align: center; margin-bottom: 2rem; }
.hsl-texture-lab__arena {
  position: relative;
  min-height: 320px;
  border-radius: var(--hsl-radius-lg);
  overflow: hidden;
  background: var(--hsl-linen);
  padding: 2rem;
}
.hsl-texture-lab__field {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--hsl-sage) 0%, transparent 70%);
  opacity: 0.15;
  transition: background 0.6s, opacity 0.6s;
  pointer-events: none;
}
.hsl-texture-lab__swatches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  z-index: 1;
}
.hsl-texture-lab__swatch {
  padding: 1.25rem;
  border: 1px solid rgba(138, 154, 123, 0.25);
  border-radius: var(--hsl-radius);
  background: var(--hsl-paper);
  cursor: pointer;
  text-align: left;
  transition: transform 0.35s, box-shadow 0.35s;
}
.hsl-texture-lab__swatch:hover, .hsl-texture-lab__swatch.is-active {
  transform: translateY(-6px);
  box-shadow: var(--hsl-shadow);
  border-color: var(--hsl-clay);
}
.hsl-texture-lab__orb {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tone);
  margin-bottom: 0.75rem;
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.15);
}
.hsl-texture-lab__swatch strong { display: block; font-family: var(--hsl-font-serif); font-size: 1.1rem; }
.hsl-texture-lab__swatch em { font-size: 11px; color: var(--hsl-warm-gray); font-style: normal; }
.hsl-texture-lab__readout {
  position: relative;
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--hsl-font-serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--hsl-clay);
}

/* §07 Scale */
.hsl-scale__head { text-align: center; margin-bottom: 2.5rem; }
.hsl-scale__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.hsl-scale__cell {
  padding: 2rem 1.25rem;
  text-align: center;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  transform: translateY(calc(var(--i) * 8px));
  box-shadow: var(--hsl-shadow);
}
.hsl-scale__val {
  display: block;
  font-family: var(--hsl-font-serif);
  font-size: 2.8rem;
  line-height: 1;
  color: var(--hsl-clay);
}
.hsl-scale__val small { font-size: 1.2rem; }
.hsl-scale__label { font-size: 12px; color: var(--hsl-warm-gray); margin-top: 0.5rem; display: block; }
.hsl-scale__trust {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 13px;
  color: var(--hsl-warm-gray);
}
.hsl-scale__trust li::before { content: '◆ '; color: var(--hsl-sage); font-size: 8px; }

/* §08 Voices */
.hsl-voices__head { text-align: center; margin-bottom: 2rem; }
.hsl-voices__stack {
  position: relative;
  min-height: 280px;
  max-width: 640px;
  margin: 0 auto;
}
.hsl-voices__card {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 2rem 2.25rem;
  background: var(--hsl-paper);
  border: 1px solid rgba(138, 154, 123, 0.3);
  border-radius: var(--hsl-radius-lg);
  box-shadow: var(--hsl-shadow);
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.5s, transform 0.5s var(--hsl-ease);
  pointer-events: none;
}
.hsl-voices__card.is-front {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}
.hsl-voices__card p { font-family: var(--hsl-font-serif); font-size: 1.25rem; font-style: italic; line-height: 1.55; }
.hsl-voices__card footer { margin-top: 1.25rem; font-size: 13px; }
.hsl-voices__card footer strong { display: block; }
.hsl-voices__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.hsl-voices__arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(138, 154, 123, 0.35);
  border-radius: 50%;
  background: var(--hsl-linen);
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color 0.3s, background 0.3s;
}
.hsl-voices__arrow:hover { border-color: var(--hsl-clay); background: var(--hsl-paper); }

/* §09 Compass */
.hsl-compass__head { text-align: center; margin-bottom: 2rem; }
.hsl-compass__wheel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}
.hsl-compass__mood {
  padding: 1.25rem 1.75rem;
  border: 1px solid rgba(138, 154, 123, 0.3);
  border-radius: var(--hsl-radius-lg);
  background: var(--hsl-linen);
  cursor: pointer;
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.hsl-compass__mood:hover, .hsl-compass__mood.is-active {
  transform: scale(1.04);
  box-shadow: var(--hsl-shadow);
  border-color: var(--hsl-clay);
}
.hsl-compass__dots { display: flex; gap: 6px; margin-bottom: 0.5rem; justify-content: center; }
.hsl-compass__dots i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.hsl-compass__readout {
  width: 100%;
  text-align: center;
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--hsl-panel);
  border-radius: var(--hsl-radius);
}
.hsl-compass__tip { font-family: var(--hsl-font-serif); font-size: 1.2rem; margin: 0 0 0.5rem; }

/* §10 Invite CTA */
.hsl-invite {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}
.hsl-invite__veil {
  padding: 2.5rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  box-shadow: var(--hsl-shadow-deep);
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 96%);
}
.hsl-invite__deck { color: var(--hsl-warm-gray); margin-bottom: 1.5rem; }
.hsl-invite__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.hsl-invite__quick {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hsl-invite__quick input {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(138, 154, 123, 0.35);
  border-radius: var(--hsl-radius);
  background: var(--hsl-paper);
}
.hsl-invite__frame img { border-radius: var(--hsl-radius-lg); box-shadow: var(--hsl-shadow); }

/* Inner pages */
.hsl-page-hero {
  position: relative;
  padding: calc(var(--hsl-nav-h) + 4rem) 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
}
.hsl-page-hero__slant {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--hsl-linen) 55%, rgba(138, 154, 123, 0.12) 55%);
  z-index: 0;
}
.hsl-page-hero__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hsl-page-hero__sub { color: var(--hsl-warm-gray); font-size: 1.05rem; }

.hsl-section-head { text-align: center; margin-bottom: 2.5rem; padding: 0 1.5rem; }

/* About */
.hsl-story-chapter, .hsl-mission-band, .hsl-values-row, .hsl-timeline, .hsl-team-block, .hsl-cta-band {
  padding: 4rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.hsl-story-chapter__grid, .hsl-team-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hsl-story-chapter__fig figcaption, .hsl-team-block__fig { font-size: 11px; color: var(--hsl-warm-gray); margin-top: 0.5rem; }
.hsl-mission-band__inner {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  clip-path: polygon(0 3%, 100% 0, 97% 100%, 3% 97%);
}
.hsl-mission-band blockquote {
  margin: 0;
  font-family: var(--hsl-font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  color: var(--hsl-clay);
}
.hsl-values-row__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.hsl-value-card {
  padding: 1.75rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  border-left: 3px solid var(--hsl-sage);
}
.hsl-value-card__icon { font-size: 10px; font-weight: 700; color: var(--hsl-clay); letter-spacing: 0.15em; }
.hsl-timeline__track { list-style: none; margin: 0; padding: 0; position: relative; }
.hsl-timeline__track::before {
  content: '';
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hsl-sage);
  opacity: 0.4;
}
.hsl-timeline__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
}
.hsl-timeline__year {
  font-family: var(--hsl-font-serif);
  font-size: 1.5rem;
  color: var(--hsl-clay);
  text-align: right;
}
.hsl-cta-band__inner {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--hsl-sage);
  color: #fff;
  border-radius: var(--hsl-radius-lg);
}
.hsl-cta-band__inner h2 em { color: var(--hsl-linen); }
.hsl-cta-band .hsl-btn--clay { background: #fff; color: var(--hsl-charcoal); }

/* Shop */
.hsl-shop-stage {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}
.hsl-shop-filter {
  position: sticky;
  top: calc(var(--hsl-nav-h) + 1.5rem);
  align-self: start;
  padding: 1.5rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
}
.hsl-shop-filter__cats { display: flex; flex-direction: column; gap: 0.35rem; margin: 1rem 0; }
.hsl-filter-btn {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  border-radius: var(--hsl-radius);
  transition: background 0.3s;
}
.hsl-filter-btn.is-active, .hsl-filter-btn:hover { background: var(--hsl-paper); color: var(--hsl-clay); font-weight: 600; }
.hsl-shop-filter select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(138, 154, 123, 0.35);
  border-radius: var(--hsl-radius);
  background: var(--hsl-paper);
  margin-top: 0.35rem;
}
.hsl-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.hsl-shop-card {
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  overflow: hidden;
  transition: transform 0.35s, box-shadow 0.35s;
}
.hsl-shop-card:hover { transform: translateY(-4px); box-shadow: var(--hsl-shadow); }
.hsl-shop-card.is-hidden { display: none; }
.hsl-shop-card__fig { position: relative; margin: 0; aspect-ratio: 4/5; overflow: hidden; }
.hsl-shop-card__fig img { width: 100%; height: 100%; object-fit: cover; }
.hsl-shop-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.6rem;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--hsl-clay);
  color: #fff;
  border-radius: var(--hsl-radius);
}
.hsl-shop-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.hsl-shop-card__specs { font-size: 12px; margin: 0.75rem 0; color: var(--hsl-warm-gray); }
.hsl-shop-card__specs div { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; }
.hsl-shop-card__specs dt { font-weight: 600; min-width: 60px; }
.hsl-shop-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.hsl-shop-note {
  max-width: 900px;
  margin: 0 auto 3rem;
  padding: 1.25rem 1.5rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius);
  font-size: 14px;
  text-align: center;
}

/* FAQ */
.hsl-faq-intro {
  max-width: 680px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--hsl-warm-gray);
}
.hsl-faq-stage { max-width: 800px; margin: 0 auto 3rem; padding: 0 1.5rem; }
.hsl-faq-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.hsl-faq-tab {
  padding: 0.55rem 1rem;
  border: 1px solid rgba(138, 154, 123, 0.3);
  border-radius: var(--hsl-radius);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hsl-faq-tab.is-active { background: var(--hsl-sage); color: #fff; border-color: var(--hsl-sage); }
.hsl-faq-panel { display: none; }
.hsl-faq-panel.is-active { display: block; }
.hsl-faq-item {
  border-bottom: 1px solid rgba(138, 154, 123, 0.2);
  margin-bottom: 0.5rem;
}
.hsl-faq-item summary {
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-weight: 500;
}
.hsl-faq-item summary::-webkit-details-marker { display: none; }
.hsl-faq-item__num { font-size: 10px; font-weight: 700; color: var(--hsl-clay); min-width: 24px; }
.hsl-faq-item__body { padding: 0 0 1rem 2.5rem; font-size: 14px; color: var(--hsl-warm-gray); }
.hsl-faq-cta {
  text-align: center;
  padding: 3rem 1.5rem 4rem;
  background: var(--hsl-linen);
}

/* Contact */
.hsl-contact-stage {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}
.hsl-contact-info { display: flex; flex-direction: column; gap: 1rem; }
.hsl-contact-card {
  padding: 1.25rem 1.5rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
}
.hsl-contact-card h3 { font-size: 1rem; margin-bottom: 0.5rem; font-family: var(--hsl-font-sans); font-weight: 600; }
.hsl-contact-card address { font-style: normal; font-size: 14px; }
.hsl-contact-form {
  padding: 2rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  clip-path: polygon(0 0, 100% 2%, 98% 100%, 2% 98%);
}
.hsl-contact-form label { display: block; margin-bottom: 1rem; }
.hsl-contact-form label span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.35rem; color: var(--hsl-warm-gray); }
.hsl-contact-form input, .hsl-contact-form select, .hsl-contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(138, 154, 123, 0.35);
  border-radius: var(--hsl-radius);
  background: var(--hsl-paper);
}
.hsl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hsl-check { display: flex !important; align-items: flex-start; gap: 0.5rem; font-size: 13px; }
.hsl-check input { width: auto; margin-top: 3px; }
.hsl-map-band { padding: 0 1.5rem 4rem; max-width: 1000px; margin: 0 auto; text-align: center; }
.hsl-map-embed {
  margin: 1.5rem 0;
  border-radius: var(--hsl-radius-lg);
  overflow: hidden;
  box-shadow: var(--hsl-shadow);
}
.hsl-map-embed iframe { width: 100%; height: 360px; border: 0; }
.hsl-map-band__note { font-size: 13px; color: var(--hsl-warm-gray); }

/* Cart */
.hsl-cart-stage {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}
.hsl-cart-empty { text-align: center; padding: 3rem; background: var(--hsl-linen); border-radius: var(--hsl-radius-lg); }
.hsl-cart-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  margin-bottom: 0.75rem;
  align-items: center;
}
.hsl-cart-item img { width: 90px; height: 110px; object-fit: cover; border-radius: var(--hsl-radius); }
.hsl-cart-item h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.hsl-cart-qty { display: flex; align-items: center; gap: 0.5rem; }
.hsl-cart-qty button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(138, 154, 123, 0.35);
  border-radius: var(--hsl-radius);
  background: var(--hsl-paper);
  cursor: pointer;
}
.hsl-cart-remove {
  font-size: 11px;
  color: var(--hsl-clay);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.hsl-cart-summary {
  position: sticky;
  top: calc(var(--hsl-nav-h) + 1.5rem);
  padding: 1.75rem;
  background: var(--hsl-linen);
  border-radius: var(--hsl-radius-lg);
  align-self: start;
}
.hsl-cart-coupon__row { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.hsl-cart-coupon__row input { flex: 1; padding: 0.6rem; border: 1px solid rgba(138, 154, 123, 0.35); border-radius: var(--hsl-radius); background: var(--hsl-paper); }
.hsl-cart-coupon__hint { font-size: 11px; color: var(--hsl-warm-gray); margin-top: 0.35rem; }
.hsl-cart-totals { margin: 1.5rem 0; }
.hsl-cart-totals div { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 14px; }
.hsl-cart-totals__grand { font-weight: 700; font-size: 1.1rem; border-top: 1px solid rgba(138, 154, 123, 0.3); padding-top: 0.75rem !important; margin-top: 0.5rem; }
.hsl-cart-totals__discount { color: var(--hsl-sage-deep); }

/* Legal */
.hsl-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--hsl-nav-h) + 3rem) 1.5rem 4rem;
}
.hsl-legal__head { margin-bottom: 2.5rem; border-bottom: 1px solid rgba(138, 154, 123, 0.25); padding-bottom: 1.5rem; }
.hsl-legal__meta { font-size: 13px; color: var(--hsl-warm-gray); }
.hsl-legal section { margin-bottom: 2rem; }
.hsl-legal h2 { font-size: 1.35rem; margin-top: 0; }
.hsl-legal h3 { font-size: 1.05rem; font-family: var(--hsl-font-sans); font-weight: 600; }
.hsl-legal ul { padding-left: 1.25rem; }
.hsl-legal li { margin-bottom: 0.35rem; font-size: 14px; }
.hsl-legal p { font-size: 14px; color: var(--hsl-warm-gray); }

/* Footer */
.hsl-terrace-foot {
  position: relative;
  margin-top: 4rem;
  background: var(--hsl-charcoal);
  color: var(--hsl-linen);
  padding: 3rem 1.5rem 0;
}
[data-theme="dark"] .hsl-terrace-foot { background: #141210; }
.hsl-terrace-foot__slant {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--hsl-charcoal);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
[data-theme="dark"] .hsl-terrace-foot__slant { background: #141210; }
.hsl-terrace-foot__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.hsl-terrace-foot__mark { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.hsl-terrace-foot__glyph {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-family: var(--hsl-font-serif);
  font-size: 1.3rem;
  background: var(--hsl-sage);
  border-radius: var(--hsl-radius);
}
.hsl-terrace-foot__mark strong { font-family: var(--hsl-font-serif); font-size: 1.2rem; display: block; }
.hsl-terrace-foot__mark p { font-size: 12px; opacity: 0.7; margin: 0.2rem 0 0; }
.hsl-terrace-foot address { font-style: normal; font-size: 13px; line-height: 1.7; opacity: 0.85; }
.hsl-terrace-foot address a { color: var(--hsl-linen); }
.hsl-terrace-foot__col h4 {
  font-family: var(--hsl-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--hsl-sage);
}
.hsl-terrace-foot__col a {
  display: block;
  font-size: 13px;
  text-decoration: none;
  color: rgba(240, 235, 227, 0.8);
  margin-bottom: 0.5rem;
  transition: color 0.3s;
}
.hsl-terrace-foot__col a:hover { color: #fff; }
.hsl-terrace-foot__hours { font-size: 13px; margin-bottom: 0.5rem; }
.hsl-terrace-foot .hsl-micro { color: rgba(240, 235, 227, 0.5); }
.hsl-terrace-foot__form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.hsl-terrace-foot__form input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(240, 235, 227, 0.2);
  border-radius: var(--hsl-radius);
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.hsl-terrace-foot__form .hsl-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.hsl-terrace-foot__ribbon {
  overflow: hidden;
  border-top: 1px solid rgba(240, 235, 227, 0.1);
  padding: 0.75rem 0;
}
.hsl-terrace-foot__ribbon-track {
  display: flex;
  gap: 4rem;
  animation: hslMarquee 22s linear infinite;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.4;
}
@keyframes hslMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hsl-terrace-foot__base {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: 0.5;
}

/* Back to top & toast */
.hsl-back-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(138, 154, 123, 0.35);
  border-radius: 50%;
  background: var(--hsl-paper);
  color: var(--hsl-charcoal);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
  box-shadow: var(--hsl-shadow);
}
.hsl-back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hsl-toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 0.75rem 1.5rem;
  background: var(--hsl-charcoal);
  color: #fff;
  font-size: 13px;
  border-radius: var(--hsl-radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s;
  z-index: 400;
}
.hsl-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
  .hsl-aperture, .hsl-whisper, .hsl-atlas__stage, .hsl-invite,
  .hsl-story-chapter__grid, .hsl-team-block__grid, .hsl-contact-stage,
  .hsl-shop-stage, .hsl-cart-stage { grid-template-columns: 1fr; }
  .hsl-atlas__preview { min-height: 280px; }
  .hsl-curate { grid-template-columns: 1fr; }
  .hsl-curate__stage {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hsl-curate__lens { clip-path: none; border-radius: var(--hsl-radius-lg); }
  .hsl-curate__frame img { min-height: 380px; }
  .hsl-curate__plaque {
    margin-left: 0;
    margin-top: -1.5rem;
    border-left: 1px solid rgba(138, 154, 123, 0.22);
    border-radius: var(--hsl-radius-lg);
    clip-path: none;
  }
  .hsl-scale__grid { grid-template-columns: repeat(2, 1fr); }
  .hsl-texture-lab__swatches { grid-template-columns: repeat(2, 1fr); }
  .hsl-terrace-foot__grid { grid-template-columns: 1fr 1fr; }
  .hsl-depth-rail { display: none; }
}
@media (max-width: 768px) {
  .hsl-float-nav__links { display: none; }
  .hsl-burger { display: flex; }
  .hsl-panel::before { inset: 2%; }
  .hsl-curate__chip { min-width: 148px; }
  .hsl-values-row__grid { grid-template-columns: 1fr; }
  .hsl-form-row { grid-template-columns: 1fr; }
  .hsl-terrace-foot__grid { grid-template-columns: 1fr; }
  .hsl-timeline__item { grid-template-columns: 80px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}