/* ESY Furniture: a Designesy-kernel theme. Warm plaster light, ink accent.
   The kernel (anatomy, motion, a11y rules) is Designesy's; this file only
   changes how cells look. */

:root {
  color-scheme: light;
  --paper: #f4f1ec;
  --surface: #fdfcfa;
  --surface-raised: #f7f5f1;
  --surface-lifted: #efece6;
  --ink: #1c1a17;
  --muted: #57534c;
  --muted-dim: #6c675f;
  --line: rgb(40 30 20 / 0.1);
  --line-strong: rgb(40 30 20 / 0.2);
  --on-ink: #fbfaf7;
  --signal-access: #016ABB;
  --stage-back: #ece7e0;
  --stage-floor: #efebe4;

  --sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --elev-1: 0 1px 1px rgb(20 32 90 / 0.06), 0 2px 4px rgb(20 32 90 / 0.05);
  --elev-2: 0 1px 1px rgb(20 32 90 / 0.06), 0 4px 8px -2px rgb(20 32 90 / 0.07), 0 12px 24px -8px rgb(20 32 90 / 0.09);

  /* Light model tokens (read by Sill). */
  --sill-floor: var(--paper);
  --sill-sky: #edeff3;
  --sill-shade: 38 44 72;
  --sill-key: 0.36;
  --sill-amb: 1.5;
  --sill-wash: 0.06;
  --sill-spec: 0.3;
  --sill-rim: 0.85;
  --sill-cast: 0.2;
  --sill-lift-max: 0.3;
  --sill-ring: rgb(40 30 20 / 0.09);
  --sill-bump: 1;
  --sill-grain: 0.018;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #0c0c0e;
  --surface: #141417;
  --surface-raised: #1a1a1e;
  --surface-lifted: #212126;
  --ink: #f5f5f7;
  --muted: #a4a4ab;
  --muted-dim: #97979e;
  --line: rgb(255 255 255 / 0.1);
  --line-strong: rgb(255 255 255 / 0.2);
  --on-ink: #141417;
  --signal-access: #0A94FF;
  --stage-back: #1b1c20;
  --stage-floor: #33353b;
  --elev-1: 0 1px 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.22);
  --elev-2: 0 1px 1px rgb(0 0 0 / 0.28), 0 4px 8px -2px rgb(0 0 0 / 0.3), 0 12px 24px -8px rgb(0 0 0 / 0.36);

  --sill-floor: #111114;
  --sill-sky: #c9d2e4;
  --sill-shade: 0 0 0;
  --sill-key: 1.05;
  --sill-amb: 0.2;
  --sill-ref: 0.24;
  --sill-wash: 0.05;
  --sill-spec: 0.16;
  --sill-rim: 0.6;
  --sill-cast: 0.42;
  --sill-lift-max: 0.04;
  --sill-ring: rgb(255 255 255 / 0.07);
  --sill-bump: 2;
  --sill-grain: 0.03;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #0c0c0e;
    --surface: #141417;
    --surface-raised: #1a1a1e;
    --surface-lifted: #212126;
    --ink: #f5f5f7;
    --muted: #a4a4ab;
    --muted-dim: #97979e;
    --line: rgb(255 255 255 / 0.1);
    --line-strong: rgb(255 255 255 / 0.2);
    --on-ink: #141417;
    --signal-access: #0A94FF;
    --stage-back: #1b1c20;
    --stage-floor: #33353b;
    --elev-1: 0 1px 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.22);
    --elev-2: 0 1px 1px rgb(0 0 0 / 0.28), 0 4px 8px -2px rgb(0 0 0 / 0.3), 0 12px 24px -8px rgb(0 0 0 / 0.36);
    --sill-floor: #111114;
    --sill-sky: #c9d2e4;
    --sill-shade: 0 0 0;
    --sill-key: 1.05;
    --sill-amb: 0.2;
    --sill-ref: 0.24;
    --sill-wash: 0.05;
    --sill-spec: 0.16;
    --sill-rim: 0.6;
    --sill-cast: 0.42;
    --sill-lift-max: 0.04;
    --sill-ring: rgb(255 255 255 / 0.07);
    --sill-bump: 2;
    --sill-grain: 0.03;
  }
}

/* ---------- base ---------- */

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

html {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-underline-position: from-font;
  text-decoration-skip-ink: auto;
  scroll-padding-top: 6rem;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  background: transparent;
}

::selection { background: color-mix(in srgb, var(--signal-access) 28%, transparent); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: 'SOFT' 50;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

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

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--on-ink);
}
.skip:focus { top: 16px; }

.eyebrow,
.label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.meta { font-size: 0.875rem; color: var(--muted); }
.note { font-size: 0.95rem; color: var(--muted); max-width: 34rem; }

/* Lit surfaces without the floor renderer still need depth. */
html:not(.sill-gl) .hero-card,
html:not(.sill-gl) .product,
html:not(.sill-gl) .story,
html:not(.sill-gl) .visit-card { box-shadow: var(--elev-2); }
html:not(.sill-gl) .fact,
html:not(.sill-gl) .mat,
html:not(.sill-gl) .top { box-shadow: var(--elev-1); }

/* ---------- buttons ---------- */

.btn {
  --sl-ring: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-md);
  font: 600 0.9375rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform var(--duration-quick) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); transition-duration: 90ms; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 0.875rem; }
.btn-primary { --sl-ring: transparent; background: var(--ink); color: var(--on-ink); }
.btn-ghost { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

@media (hover: hover) {
  .btn-primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
  .btn-ghost:hover { background: var(--surface-lifted); }
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
}
@media (hover: hover) { .text-link:hover { text-decoration-color: currentColor; } }

/* ---------- header ---------- */

.top {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  height: 56px;
  padding: 0 10px 0 18px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) { .top { background: var(--surface); backdrop-filter: none; } }

.mark { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.mark-word { font: 700 1.3rem/1 var(--serif); letter-spacing: -0.01em; }
.mark-sub { font-size: 0.8125rem; color: var(--muted); }

.nav { display: flex; gap: 4px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.top .btn { margin-left: auto; }

/* ---------- layout ---------- */

main { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin: 0 auto; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: min(880px, 100vh);
  padding: 120px 0 72px;
}

.hero h1 {
  margin: 18px 0 20px;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 70, 'opsz' 144;
}
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 500; color: var(--muted); max-width: 30rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; max-width: 30rem; }
.fact {
  display: grid;
  gap: 4px;
  padding: 14px 16px 12px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.fact-fig { font: 500 1.6rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fact-fig small { margin-left: 2px; font-size: 0.8rem; color: var(--muted); letter-spacing: 0; }
.fact-label { font-size: 0.8125rem; color: var(--muted); }

.hero-card {
  padding: 12px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--stage-back);
}
.stage-hero { aspect-ratio: 16 / 11; }
.stage-wide { aspect-ratio: 16 / 7; }

.hero-card-body {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 24px;
  padding: 18px 10px 8px;
}
.name { margin: 6px 0 4px; font-size: 1.75rem; }
.price { display: grid; justify-items: end; gap: 4px; }
.price-fig { font: 500 1.125rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }

.swatches { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; }
.swatches legend { margin-bottom: 8px; float: left; width: 100%; }
.swatch {
  --sl-ring: var(--line-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  font-size: 0.8125rem;
  cursor: pointer;
}
.swatch::after {
  content: '';
  order: -1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch:has(input:checked) { --sl-ring: var(--ink); --sl-ring-w: 1.5px; background: var(--surface-lifted); box-shadow: inset 0 0 0 1.5px var(--ink); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--signal-access); outline-offset: 3px; }

/* ---------- sections ---------- */

.section-head { display: grid; gap: 14px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }

.collection, .materials, .visit { padding: 72px 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.product {
  grid-column: span 5;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.product-wide { grid-column: span 7; }
.product { grid-template-rows: minmax(300px, 1fr) auto; }
.product .stage { aspect-ratio: auto; min-height: 300px; }
.product:nth-child(3) { grid-column: span 5; }
.story { grid-column: span 7; }

.product-body { display: grid; gap: 18px; align-content: space-between; padding: 16px 8px 6px; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.story {
  display: grid;
  align-content: end;
  gap: 12px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.story h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 18ch; }

.mat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mat {
  display: grid;
  gap: 4px;
  padding: 10px 10px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.mat-face {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
}
.mat-name { font-weight: 600; font-size: 0.9375rem; padding: 0 4px; }
.mat .meta { padding: 0 4px; font-size: 0.8125rem; }

.face-oak {
  background:
    repeating-linear-gradient(97deg, rgb(120 80 40 / 0.07) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(93deg, rgb(120 80 40 / 0.05) 0 1px, transparent 1px 13px),
    #c9a47c;
}
.face-walnut {
  background:
    repeating-linear-gradient(91deg, rgb(0 0 0 / 0.14) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgb(255 220 180 / 0.04) 0 1px, transparent 1px 11px),
    #4b3326;
}
.face-stone {
  background:
    radial-gradient(circle at 30% 40%, rgb(110 90 60 / 0.12) 0 1px, transparent 2px) 0 0 / 11px 13px,
    repeating-linear-gradient(178deg, rgb(140 115 80 / 0.1) 0 3px, transparent 3px 17px),
    #d7cbb6;
}
.face-wool {
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.22) 0 1.2px, transparent 1.6px) 0 0 / 5px 5px,
    radial-gradient(circle, rgb(90 80 60 / 0.16) 0 1.2px, transparent 1.6px) 2px 3px / 6px 6px,
    #d8d0c1;
}
.face-steel {
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #34363a, #26282b);
}

.visit-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 32px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.visit-card h2 { margin: 14px 0 12px; font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.visit-card .actions { margin-top: 0; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 32px 0 120px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .mat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-card-body { grid-template-columns: 1fr auto; }
  .hero-card-body .swatches { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 104px; }
  .grid { grid-template-columns: 1fr; }
  .product, .product-wide, .product:nth-child(3), .story { grid-column: auto; }
  .stage-wide { aspect-ratio: 16 / 9; }
  .visit-card { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav { display: none; }
  .top { gap: 12px; }
  .mat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { gap: 8px; }
  .fact { padding: 12px; }
  .fact-fig { font-size: 1.3rem; }
  .product-foot { flex-wrap: wrap; }
  .hero-card-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero-card-body .swatches { grid-row: auto; flex-wrap: wrap; }
  .price { justify-items: start; }
  .collection, .materials, .visit { padding: 48px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nav a, .sp-switch-thumb, .sp-switch-track { transition-duration: 0.01ms; }
  .btn:active { transform: none; }
}