:root{
  --ratio-bare: 3 / 4;
  --ratio-scene: 2 / 3;

  --max: 1440px;
  --gutter: clamp(16px, 4vw, 48px);
  --col-gap: clamp(12px, 2vw, 32px);

  --bar-h: clamp(4.5rem, 3.875rem + 2.6vw, 6.375rem);
  --bar-logo-fs: clamp(1.4375rem, 1.25rem + .5vw, 1.6875rem);
  --logo-ratio: 795.14 / 158.62;
  --logo-bar-h: calc(var(--bar-logo-fs) * .667);
  --logo-hero-h: calc(var(--fs-hero) * 1.14);
  --bar-text-fs: clamp(.875rem, .8rem + .3vw, 1.03rem);
  --bar-icon: clamp(1.75rem, 1.5rem + .6vw, 2.0625rem);
  --bar-badge: calc(var(--bar-icon) * .82);

  --hint-line-h: 3.5rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: clamp(12px, 1.2vw, 16px);
  --s-4: clamp(16px, 1.8vw, 24px);
  --s-5: clamp(24px, 3vw, 40px);
  --s-6: clamp(40px, 5vw, 64px);
  --s-7: clamp(64px, 8vw, 112px);
  --s-8: clamp(96px, 12vw, 176px);

  --fs-hero: clamp(3.25rem, 13vw, 10rem);
  --fs-title: clamp(3rem, 12vw, 7.5rem);
  --fs-h3: clamp(1.625rem, 3.2vw, 2.625rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body: clamp(0.975rem, 1vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.6875rem;

  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Cormorant Garamond", "Times New Roman", serif;

  --ease: cubic-bezier(.2,.7,.1,1);

  --live-bg: #0E0C0B;
  --live-ink: #EDE6DC;
  --live-muted: #8C8379;

  --bg: #0E0C0B; --ink: #EDE6DC; --muted: #8C8379; --accent: #D9C6A8; --accent-ink: #0E0C0B;
  --line: #3B342E; --ph: #1E1A17;
  --font-display: var(--font-brand); --optical: 1; --display-weight: 400; --display-track: 0; --title-case: none;
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  background: var(--live-bg);
}
html.is-locked{ overflow: hidden; }
body{
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--live-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img{ display: block; max-width: 100%; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.sr{ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap{ width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
@media (min-width: 900px){ .grid{ grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.micro{ font-size: var(--fs-micro); line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.display{
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.04;
}

.bg-layer{
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0;
  background: var(--live-bg);
  pointer-events: none;
}
.grain{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 38; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .footer{ position: relative; z-index: 1; }

.bar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--bar-h);
  color: var(--live-ink);
  transition: color .6s var(--ease);
}
.bar::before{
  content: ""; position: absolute; top: 0; right: 0; bottom: calc(var(--bar-h) * -.4); left: 0; inset: 0 0 calc(var(--bar-h) * -.4) 0; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--live-bg) 90%, transparent) 0%,
    color-mix(in oklab, var(--live-bg) 55%, transparent) 62%,
    transparent 100%);
}
.bar-inner{ position: relative; height: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; }
@media (min-width: 900px){ .bar-inner{ grid-template-columns: 1fr auto 1fr; } }
.logo{ display: block; width: auto; aspect-ratio: var(--logo-ratio); overflow: visible; }
.bar-logo{
  justify-self: start;
  text-decoration: none; color: inherit;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: opacity .6s var(--ease);
}
.bar-logo .logo, .menu-brand .logo{ height: var(--logo-bar-h); }
.bar.is-hero .bar-logo{ opacity: 0; pointer-events: none; }
.bar.is-hero .bar-logo:focus-visible{ opacity: 1; }
.bar-now{ display: none; margin: 0; opacity: .72; white-space: nowrap; font-size: var(--bar-text-fs); }
@media (min-width: 900px){ .bar-now{ display: block; } }
.bar-actions{ justify-self: end; display: flex; align-items: center; gap: 2px; font-size: var(--bar-text-fs); margin-right: -.9em; }
.bar-btn{
  appearance: none; background: none; border: 0; cursor: pointer; position: relative;
  min-height: 44px; min-width: 44px; padding: 0 .9em;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 1em/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase;
  color: inherit;
}
.bar-btn svg{ width: var(--bar-icon); height: var(--bar-icon); fill: none; stroke: currentColor; stroke-width: 1.3; }
.badge{
  position: absolute;
  top: calc(50% - var(--bar-icon) * .364 - var(--bar-badge) / 2);
  right: calc(50% - var(--bar-icon) * .545 - var(--bar-badge) / 2);
  min-width: var(--bar-badge); height: var(--bar-badge);
  padding: 0 calc(var(--bar-badge) * .28); border-radius: calc(var(--bar-badge) / 2);
  background: var(--live-ink); color: var(--live-bg);
  font: 600 calc(var(--bar-badge) * .56)/var(--bar-badge) var(--font-ui); letter-spacing: 0; text-align: center;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
.badge.bump{ animation: bump .5s var(--ease); }
@keyframes bump{ 0%{ transform: scale(1); } 35%{ transform: scale(1.35); } 100%{ transform: scale(1); } }

.btn{
  appearance: none; border: 0; cursor: pointer; border-radius: 0;
  min-height: 52px; min-width: 12.5em; padding: 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 .75rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
  transition: background-color .35s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background: color-mix(in oklab, var(--accent) 86%, var(--ink)); }
.btn:active{ transform: translateY(1px); }
.btn.is-added{ background: color-mix(in oklab, var(--accent) 78%, var(--ink)); }
.btn--sm{ min-height: 44px; min-width: 0; padding: 0 14px; font-size: .625rem; letter-spacing: .16em; }
.btn--block{ width: 100%; }
.icon-btn{
  appearance: none; background: none; border: 0; cursor: pointer; color: inherit;
  width: 44px; height: 44px; display: inline-grid; place-items: center; margin-right: -10px;
}
.icon-btn svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.link{
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 var(--fs-micro)/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: inherit;
  background: linear-gradient(currentColor, currentColor) left calc(50% + .9em) / 100% 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.link:hover{ background-size: 40% 1px; }

.js .reveal{
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.is-in{ opacity: 1; transform: none; }

.ph{
  position: relative; overflow: hidden;
  background: var(--ph);
  background:
    radial-gradient(120% 80% at 30% 18%, color-mix(in oklab, var(--ph) 82%, #fff 18%), transparent 70%),
    var(--ph);
}
.ph > picture{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: block; z-index: 1; }
.ph img{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  opacity: 0; transition: opacity .9s var(--ease);
  color: transparent;
}
.ph.is-loaded img{ opacity: 1; }

.hero{
  position: relative; min-height: 100vh; min-height: 100svh; overflow: clip;
  display: grid; place-items: center; text-align: center;
  padding: var(--bar-h) var(--gutter)
    calc(var(--s-5) + env(safe-area-inset-bottom) + var(--fs-micro) * 1.5 + var(--s-3) + var(--hint-line-h));
  color: var(--ink);
}
.hero-media{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; }
.js .hero-media{ animation: hero-in 2.4s var(--ease) both; }
@keyframes hero-in{ from{ opacity: 0; transform: scale(1.06); } to{ opacity: 1; transform: none; } }
.hero-media img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; color: transparent;
  transform: translate3d(0, calc(var(--hp, 0) * 10%), 0) scale(calc(1.02 + var(--hp, 0) * .06));
}
.hero-media::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 50%, rgba(10,9,8,.42), rgba(10,9,8,0) 100%),
    linear-gradient(180deg, rgba(10,9,8,.62) 0%, rgba(10,9,8,.28) 24%, rgba(10,9,8,.28) 62%, var(--bg) 100%);
}
.hero-inner{
  position: relative;
  opacity: calc(1 - var(--hp, 0) * 1.35);
  transform: translate3d(0, calc(var(--hp, 0) * -8vh), 0);
}
.hero-logo{
  margin: 0; display: flex; justify-content: center;
  font-size: var(--fs-hero);
  color: #F7F2EC;
}
.hero-logo .logo{ height: var(--logo-hero-h); filter: drop-shadow(0 2px 40px rgba(10,9,8,.45)); }
.js .hero-logo .logo path{
  opacity: 0; transform: translate3d(0, 40px, 0);
  animation: rise 1.6s var(--ease) forwards;
  animation-delay: calc(.25s + var(--i) * .09s);
}
.hero-sub{
  margin: var(--s-4) 0 0;
  font-family: var(--font-brand); font-style: italic; font-weight: 400; font-size: var(--fs-lead);
  color: rgba(247,242,236,.86); letter-spacing: .02em;
  text-shadow: 0 1px 20px rgba(10,9,8,.6);
}
.js .hero-sub{ opacity: 0; animation: fade 1.6s var(--ease) 1.05s forwards; }
@keyframes rise{ to{ opacity: 1; transform: none; } }
@keyframes fade{ to{ opacity: 1; } }
.scroll-hint{
  position: absolute; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  color: rgba(247,242,236,.75); text-decoration: none;
}
.js .scroll-hint{ opacity: 0; animation: fade 1.2s var(--ease) 1.6s forwards; }
.hint-line{ position: relative; width: 1px; height: var(--hint-line-h); overflow: hidden; background: color-mix(in oklab, var(--muted) 35%, transparent); }
.hint-line::after{
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%;
  background: var(--ink); transform: translateY(-100%);
  animation: hint 2.6s var(--ease) infinite;
}
@keyframes hint{ 0%{ transform: translateY(-100%); } 70%, 100%{ transform: translateY(230%); } }

.product{ position: relative; overflow: clip; color: var(--ink); }
.product > :not(.section-motif){ position: relative; z-index: 1; }
.section-motif{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pattern{
  position: absolute; top: 100vh; right: 0; bottom: 0; left: 0; inset: 100svh 0 0 0;
  background-image: var(--pattern);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 90%);
}
.edge{ position: absolute; top: 0; bottom: 0; width: 10px; overflow: hidden; }
.edge--l{ left: 0; } .edge--r{ right: 0; }
.edge::before{
  content: ""; position: absolute; left: 0; right: 0; top: -64px; bottom: -64px;
  background-image: var(--edge-tile); background-repeat: repeat-y; background-size: 10px auto;
  transform: translate3d(0, calc(var(--p, 0) * 64px), 0);
}
@media (min-width: 900px){
  .pattern{ top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
  .edge{ width: 20px; }
  .edge::before{ background-size: 20px auto; }
}

.scene{ position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; }
.scene-media{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 5%, rgba(0,0,0,.7) 11%, #000 17%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 5%, rgba(0,0,0,.7) 11%, #000 17%);
}
.scene-media img{ transform: translate3d(0, calc(var(--sp, 0) * 8%), 0) scale(1.1); }
.scrim{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 55%,
    color-mix(in oklab, var(--bg) 60%, transparent) 76%,
    color-mix(in oklab, var(--bg) 92%, transparent) 90%,
    var(--bg) 100%);
}
.scene-copy{
  position: relative; z-index: 2; width: 100%;
  padding: var(--s-8) var(--gutter) var(--s-7);
  color: var(--ink);
  text-shadow: 0 0 28px color-mix(in oklab, var(--bg) 70%, transparent);
}
.scene-index{ margin: 0 0 var(--s-3); color: var(--muted); }
.scene-title{
  margin: 0;
  font-size: calc(var(--fs-title) * var(--optical));
  text-transform: var(--title-case);
  overflow-wrap: anywhere;
}
.scene-kicker{ margin: var(--s-4) 0 0; color: var(--muted); }
@media (min-width: 900px){
  .scene{
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
    align-items: center;
    max-width: var(--max); margin-inline: auto;
    padding: calc(var(--bar-h) + var(--s-3)) var(--gutter) var(--s-5);
  }
  .scene-media{
    position: relative; top: auto; right: auto; bottom: auto; left: auto; inset: auto;
    grid-column: 7 / -1; grid-row: 1; justify-self: end;
    height: calc(100vh - var(--bar-h) - var(--s-3) - var(--s-5)); height: calc(100svh - var(--bar-h) - var(--s-3) - var(--s-5));
    aspect-ratio: var(--ratio-scene); max-width: 100%;
    outline: 1px solid color-mix(in oklab, var(--line) 55%, transparent); outline-offset: 12px;
    -webkit-mask-image: none; mask-image: none;
  }
  .scrim{ background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,.22) 100%); }
  .scene-copy{ grid-column: 1 / 7; grid-row: 1; padding: 0; text-shadow: none; }
}

.look{ padding-bottom: var(--s-7); }
.look-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.look-title{ margin: 0; color: var(--muted); }
.look-nav{ display: flex; gap: 8px; }
.look-btn{
  appearance: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent);
  transition: background-color .3s var(--ease), color .3s var(--ease), opacity .3s;
}
.look-btn svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.look-btn:hover:not(:disabled){ background: var(--ink); color: var(--bg); }
.look-btn:disabled{ opacity: .28; cursor: default; }
.look-track{
  display: flex; align-items: center; gap: var(--col-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.look-track::-webkit-scrollbar{ display: none; }
.look-item{
  flex: none; margin: 0; scroll-snap-align: start;
  height: min(clamp(300px, 64vh, 680px), calc((100vw - 2 * var(--gutter)) * .84 / var(--arn))); height: min(clamp(300px, 64svh, 680px), calc((100vw - 2 * var(--gutter)) * .84 / var(--arn)));
  aspect-ratio: var(--ar);
}
.look-item .ph{ width: 100%; height: 100%; }

.stage{ position: relative; padding-block: var(--s-8) var(--s-7); row-gap: var(--s-6); }
.bare{ grid-column: 1 / -1; margin: 0; position: relative; }
.bare::after{
  content: ""; position: absolute; top: calc(var(--s-3) * -1); right: calc(var(--s-3) * -1); bottom: calc(var(--s-3) * -1); left: calc(var(--s-3) * -1); inset: calc(var(--s-3) * -1); pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--line) 50%, transparent);
}
.bare .ph{ aspect-ratio: var(--ratio-bare); }
.js .bare .ph{ clip-path: inset(9% 7% 9% 7%); transition: clip-path 1.5s var(--ease); }
.js .bare.is-in .ph{ clip-path: inset(0 0 0 0); }
.bare .ph img{ transform: scale(1.07); transition: opacity .9s var(--ease), transform 1.9s var(--ease); }
.bare.is-in .ph img{ transform: none; }
.story{ grid-column: 1 / -1; }
@media (min-width: 900px){
  .bare{ grid-column: 1 / 7; }
  .story{ grid-column: 8 / -1; align-self: start; position: sticky; top: calc(var(--bar-h) + var(--s-6)); }
}
.story-kicker{ margin: 0 0 var(--s-3); color: var(--muted); }
.story-name{
  margin: 0 0 var(--s-5);
  font-size: calc(var(--fs-h3) * var(--optical));
  text-transform: var(--title-case);
}
.story-lead{ margin: 0 0 var(--s-4); font-size: var(--fs-lead); line-height: 1.62; }
.story-craft{ margin: 0; color: var(--muted); font-size: var(--fs-small); }
.material{
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.buy{ margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.price{ margin: 0; font-size: var(--fs-lead); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.band{ position: relative; height: 56px; overflow: hidden; background: var(--band-bg, transparent); }
.band-track{
  position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background-image: var(--band-tile); background-repeat: repeat-x; background-size: auto 100%; background-position: left center;
  transform: translate3d(calc(var(--p, 0) * -33.333%), 0, 0);
}

.closing{
  max-width: 1000px; margin: 0 auto;
  padding-block: var(--s-7) var(--s-5);
  text-align: center;
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: calc(var(--fs-h3) * var(--optical)); line-height: 1.22;
}
.closing::before{ content: ""; display: block; width: 48px; height: 1px; margin: 0 auto var(--s-5); background: var(--line); }
.closing .reveal{ display: inline-block; }
.closing .closing-line{ display: block; }

.refrain{
  height: 70vh; height: 70svh; margin: 0; display: grid; place-items: center; text-align: center;
  padding-inline: var(--gutter);
  font-family: var(--font-brand); font-style: italic; font-weight: 400; font-size: var(--fs-h3);
  color: var(--muted);
}
.refrain > span{ opacity: var(--ro, 0); }

.art{
  position: absolute; left: 50%; top: 26%; z-index: 0; pointer-events: none;
  width: min(125vw, 780px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--line);
}
.art > svg, .art > div{ width: 100%; height: 100%; display: block; overflow: visible; }
.bare, .story{ position: relative; z-index: 1; }
@media (min-width: 900px){ .art{ left: 25%; top: 50%; } }
.art--rings{ opacity: .34; }
.art--rings svg, .art--kilim svg{ transform: rotate(calc(var(--p, 0) * 50deg)) scale(calc(.88 + var(--p, 0) * .24)); }
.art--kilim{ color: var(--ink); opacity: .12; }
.art--sun{ opacity: .5; }
.art--sun svg{ transform: scale(calc(.9 + var(--p, 0) * .18)); }
.sun-rays{ animation: spin 180s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.art--smoke{ left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
.smoke{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.smoke i{
  position: absolute; width: var(--w); aspect-ratio: 2.4 / 1; border-radius: 50%;
  --c: color-mix(in oklab, var(--ink) 15%, transparent);
  background: radial-gradient(closest-side, var(--c), color-mix(in oklab, var(--c) 40%, transparent) 55%, transparent);
  filter: blur(28px); opacity: 0; will-change: transform, opacity;
  animation: smoke var(--d) ease-in-out var(--dl) infinite;
}
.smoke i.c1{ --c: color-mix(in oklab, var(--accent) 13%, transparent); }
.smoke i.c2{ --c: color-mix(in oklab, var(--line) 9%, transparent); }
@keyframes smoke{
  0%{ transform: translate3d(-6%, 10%, 0) rotate(var(--r)) scale(.85); opacity: 0; }
  30%{ opacity: .9; }
  70%{ opacity: .75; }
  100%{ transform: translate3d(14%, -18%, 0) rotate(calc(var(--r) * -1)) scale(1.3); opacity: 0; }
}
.art--waves, .art--mane{ left: 50%; width: min(170vw, 1400px); }
.art--waves{ aspect-ratio: 8 / 3; opacity: .5; }
.art--waves path[style]{ transform: translate3d(0, calc((var(--p, 0) - .5) * var(--k) * 9px), 0); }
.art--mane{ aspect-ratio: 1200 / 560; top: 40%; }
.art--mane path{
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--p, 0) - .1 - var(--k)) * 3.2, 1));
}
@media (min-width: 900px){ .art--waves, .art--mane{ left: 50%; top: 50%; } }
.product:not(.is-active) .smoke i,
.product:not(.is-active) .sun-rays{ animation-play-state: paused; }

#turk-halisi{ --bg: #0B0909; }
#turk-halisi .section-motif::before{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background:
    radial-gradient(55% 32% at 12% 30%, rgba(122,30,48,.42), transparent 72%),
    radial-gradient(45% 28% at 90% 58%, rgba(34,62,110,.40), transparent 72%),
    radial-gradient(50% 22% at 40% 92%, rgba(122,30,48,.30), transparent 72%),
    repeating-linear-gradient(0deg, rgba(239,227,204,.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(239,227,204,.016) 0 1px, transparent 1px 5px);
}

.finale .section-motif::before{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background:
    radial-gradient(48% 30% at 26% 40%, rgba(26,39,72,.95), transparent 72%),
    radial-gradient(40% 24% at 82% 68%, rgba(26,39,72,.6), transparent 72%);
}
.js .finale .bare .ph{ clip-path: inset(0 100% 0 0); transition-duration: 1.8s; }
.js .finale .bare.is-in .ph{ clip-path: inset(0 0 0 0); }
.finale .closing-line + .closing-line{ margin-top: .15em; }

.vitrin{ padding: var(--s-8) 0; color: var(--ink); }
.sec-head{ margin-bottom: var(--s-6); row-gap: var(--s-4); align-items: end; }
.sec-kicker{ grid-column: 1 / -1; margin: 0; color: var(--muted); }
.brand-title{
  grid-column: 1 / -1; margin: 0;
  font-family: var(--font-brand); font-weight: 300; font-size: var(--fs-title); line-height: .98; letter-spacing: -.01em;
}
.brand-title em{ font-style: italic; }
.sec-lead{ grid-column: 1 / -1; margin: 0; max-width: 30em; font-size: var(--fs-lead); color: var(--muted); }
@media (min-width: 900px){
  .vitrin .brand-title{ grid-column: 1 / 8; }
  .sec-lead{ grid-column: 9 / -1; }
}
.vitrin-hero{ margin: 0 calc(var(--gutter) * -1) var(--s-6); }
.vitrin-hero .ph{ aspect-ratio: 3 / 2; }
.vitrin-hero figcaption{ margin-top: var(--s-3); padding-inline: var(--gutter); color: var(--muted); }
@media (min-width: 900px){
  .vitrin-hero{ margin-inline: 0; }
  .vitrin-hero figcaption{ padding-inline: 0; }
}
.cards{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
@media (min-width: 900px){ .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-5); } }
.card{ position: relative; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.card::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent); transform-origin: left; transform: scaleX(.2);
  transition: transform .8s var(--ease);
}
.card:hover::after, .card:focus-within::after{ transform: scaleX(1); }
.card-media{ display: block; }
.card-media .ph{ aspect-ratio: var(--ratio-bare); }
.card-media .ph img{ transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.card:hover .card-media .ph img{ transform: scale(1.04); }
.card-body{ flex: 1; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-4) calc(var(--s-4) + 3px); }
.card-num{ margin: 0; color: var(--muted); }
.card-name{ margin: 0; font-size: calc(var(--fs-h3) * var(--optical)); text-transform: var(--title-case); line-height: 1.05; }
.card-price{ margin: 0; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.card-colors{ display: inline-flex; gap: 6px; margin-left: var(--s-3); vertical-align: middle; }
.card-dot{
  width: 10px; height: 10px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 25%, transparent);
}
.card-actions{ margin-top: auto; padding-top: var(--s-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3); }

.kemeralti{ position: relative; overflow: clip; color: var(--ink); padding: var(--s-8) 0 calc(var(--s-8) + clamp(120px, 18vw, 220px)); }
.k-arches{ position: absolute; left: 0; right: 0; bottom: 0; height: clamp(140px, 22vw, 280px); color: var(--accent); opacity: .32; pointer-events: none; }
.k-arches svg{ width: 100%; height: 100%; display: block; }
.k-coord{ grid-column: 1 / -1; margin: 0 0 var(--s-5); color: var(--accent); }
.kemeralti .brand-title{ margin-bottom: var(--s-6); }
.k-text{ grid-column: 1 / -1; }
.k-text p{ margin: 0 0 var(--s-4); }
.k-text .lead{ font-size: var(--fs-lead); line-height: 1.55; }
.k-text p + p{ color: var(--muted); }
@media (min-width: 900px){
  .kemeralti .brand-title{ grid-column: 1 / 7; margin-bottom: 0; }
  .k-text{ grid-column: 8 / -1; align-self: end; }
}
.pillars{
  grid-column: 1 / -1; list-style: none; margin: var(--s-7) 0 0; padding: var(--s-5) 0 0;
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px){ .pillars{ grid-template-columns: repeat(3, 1fr); } }
.pillars .micro{ color: var(--accent); }
.pillars h3{ margin: var(--s-2) 0; font-family: var(--font-brand); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; }
.pillars p{ margin: 0; color: var(--muted); }
.k-cta{ grid-column: 1 / -1; justify-self: start; margin-top: var(--s-6); }

.footer{ color: var(--ink); padding: var(--s-8) 0 calc(var(--s-5) + env(safe-area-inset-bottom) + var(--cookie-h, 0px)); }
.footer-refrain{ grid-column: 1 / -1; margin: 0 0 var(--s-7); font-family: var(--font-brand); font-style: italic; font-weight: 400; font-size: var(--fs-h3); }
.footer-col{ grid-column: span 2; margin-bottom: var(--s-5); }
@media (min-width: 900px){ .footer-col{ grid-column: span 3; } .footer-col:first-of-type{ grid-column: 1 / span 3; } }
.footer-col .micro{ margin: 0; color: var(--muted); }
.footer-col ul{ list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 2px; }
.footer-col a{ display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-col a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.footer-logo{
  grid-column: 1 / -1; margin: var(--s-7) 0 var(--s-5); display: flex; justify-content: center;
  color: color-mix(in oklab, var(--ink) 16%, transparent);
}
.footer-logo .logo{ height: var(--logo-hero-h); }
.footer-legal{ grid-column: 1 / -1; margin: 0; color: var(--muted); }

.scrim-layer{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 55; background: rgba(8,7,6,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.scrim-layer.is-open{ opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

.menu{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  background: #0E0C0B; color: #EDE6DC;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.menu.is-open{ opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.menu-inner{ min-height: 100%; display: flex; flex-direction: column; padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
.menu-top{ height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; }
.menu-brand{ display: inline-flex; align-items: center; min-height: 44px; }
.menu-list{ list-style: none; margin: var(--s-5) 0; padding: 0; }
.menu-list li{ opacity: 0; transform: translate3d(0, 16px, 0); }
.menu.is-open .menu-list li{ animation: rise .8s var(--ease) forwards; animation-delay: calc(.08s + var(--i) * 45ms); }
.menu-list a{
  display: flex; align-items: baseline; gap: var(--s-3); padding: 6px 0;
  text-decoration: none;
  font-family: var(--font-brand); font-weight: 300; font-size: var(--fs-h3); line-height: 1.15;
  transition: opacity .3s, transform .5s var(--ease);
}
.menu-list:hover a{ opacity: .45; }
.menu-list a:hover, .menu-list a:focus-visible{ opacity: 1; transform: translateX(8px); }
.menu-num{ min-width: 2.6em; font: 500 var(--fs-micro)/1 var(--font-ui); letter-spacing: .2em; color: #8C8379; }
.menu-dot{ width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.menu-foot{ margin: auto 0 0; font-family: var(--font-brand); font-style: italic; font-size: var(--fs-lead); color: #8C8379; }

.drawer{
  --bg: #F4F0EA; --ink: #1B1714; --muted: #736A62; --line: #DDD5CB; --ph: #E6DED4;
  --accent: #1B1714; --accent-ink: #F4F0EA;
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  box-shadow: -30px 0 60px rgba(0,0,0,.25);
  transform: translate3d(100%, 0, 0); visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s linear .55s;
}
.drawer.is-open{ transform: none; visibility: visible; transition: transform .55s var(--ease); }
.drawer-head{ height: var(--bar-h); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); }
.drawer-title{ margin: 0; font-family: var(--font-brand); font-weight: 400; font-size: 1.625rem; }
.drawer-count{ font: 500 var(--fs-small)/1 var(--font-ui); color: var(--muted); }
.drawer-body{ flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-4); }
.lines{ list-style: none; margin: 0; padding: 0; }
.line{ display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.line-thumb{ width: 76px; aspect-ratio: var(--ratio-bare); }
.line-thumb::after{ content: none; }
.line-title{ margin: 0 0 2px; font-weight: 600; font-size: var(--fs-small); }
.line-unit{ margin: 0; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.qty{ display: inline-flex; align-items: center; margin-top: var(--s-3); border: 1px solid var(--line); }
.qty-btn{ appearance: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
.qty-btn svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.qty-val{ min-width: 2ch; text-align: center; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.line-side{ display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.line-total{ margin: 0; font-weight: 600; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.line-remove{
  appearance: none; background: none; border: 0; cursor: pointer; padding: 14px 0; color: var(--muted);
  font: 500 var(--fs-micro)/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
}
.drawer-empty{ padding: var(--s-7) 0; text-align: center; }
.drawer-empty p{ margin: 0 0 var(--s-2); font-family: var(--font-brand); font-size: var(--fs-h3); }
.drawer-foot{ flex: none; padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.subtotal{ display: flex; justify-content: space-between; align-items: baseline; }
.subtotal strong{ font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
.drawer-note{ margin: var(--s-2) 0 var(--s-4); color: var(--muted); font-size: var(--fs-small); }
.checkout-note{ margin: 0; font-size: var(--fs-small); text-align: center; }
.checkout-note:not(:empty){ margin-top: var(--s-3); }

.toast{
  position: fixed; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom) + var(--cookie-h, 0px)); z-index: 70;
  display: flex; align-items: center; gap: var(--s-3);
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  padding: 8px 8px 8px 18px;
  background: #1B1714; color: #F4F0EA; font-size: var(--fs-small);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translate3d(-50%, 16px, 0);
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.toast.is-open{ opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.toast-msg{ margin: 0; }
.toast-act{
  appearance: none; background: none; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(244,240,234,.3); color: inherit;
  min-height: 44px; padding: 0 14px;
  font: 600 var(--fs-micro)/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
}
.noscript{ position: relative; z-index: 2; margin: 0; padding: 120px var(--gutter); text-align: center; color: #EDE6DC; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .js .reveal, .js .bare .ph, .js .finale .bare .ph{ opacity: 1; transform: none; clip-path: none; }
  .hero-inner{ opacity: 1; transform: none; }
  .js .hero-logo .logo path{ animation: none; opacity: 1; transform: none; }
  .scene-media img, .hero-media img, .bare .ph img, .art svg, .band-track, .edge::before, .art--waves path[style]{ transform: none !important; }
  .art--mane path{ stroke-dashoffset: 0; }
  .refrain > span{ opacity: .45; }
  .smoke i{ animation: none; opacity: .6; }
  .hint-line::after{ animation: none; transform: none; }
}


.bar-nav{ display: none; }
@media (min-width: 900px){
  .bar-nav{ display: flex; align-items: center; gap: var(--s-5); justify-self: center; min-width: 0; }
}
.bar-link{
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none; white-space: nowrap;
  font: 500 var(--bar-text-fs)/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase;
}
.bar-link[aria-current]::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 1em); height: 1px;
  background: var(--accent); opacity: .85;
}

.all-products{ padding: var(--s-8) 0; color: var(--ink); }
.ap-title{
  margin: 0 0 var(--s-4);
  font-family: var(--font-brand); font-weight: 300; font-size: var(--fs-h3); line-height: 1.1;
}

.pdp{
  position: relative; overflow: clip; color: var(--ink);
  padding: calc(var(--bar-h) + var(--s-7)) 0 var(--s-8);
}
.pdp > :not(.section-motif){ position: relative; z-index: 1; }
.pdp .pattern{ top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.pdp-inner{ position: relative; row-gap: var(--s-6); }

.pdp-gallery{ grid-column: 1 / -1; }
.pdp-info{ grid-column: 1 / -1; }
@media (min-width: 900px){
  .pdp-gallery{ grid-column: 1 / 7; }
  .pdp-info{ grid-column: 8 / -1; }
}

.pdp-main{ position: relative; aspect-ratio: var(--ratio-bare); }
.pdp-main::after{
  content: ""; position: absolute; top: calc(var(--s-3) * -1); right: calc(var(--s-3) * -1); bottom: calc(var(--s-3) * -1); left: calc(var(--s-3) * -1); inset: calc(var(--s-3) * -1); pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--line) 50%, transparent);
}
.pdp-frame{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.pdp-frame.is-active{ opacity: 1; }

.pdp-thumbs{
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3);
}
.pdp-thumb{
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  position: relative; display: block; width: 100%;
}
.pdp-thumb .ph{ display: block; aspect-ratio: 1; }
.pdp-thumb .ph::after{ content: none; }
.pdp-thumb::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none;
  border: 1px solid transparent; transition: border-color .3s var(--ease);
}
.pdp-thumb.is-active::after{ border-color: var(--accent); }

.pdp-index{ margin: 0 0 var(--s-3); color: var(--muted); }
.pdp-name{ margin: 0 0 var(--s-4); }
.pdp-price{ margin: 0 0 var(--s-6); }
.pdp-closing{
  margin: var(--s-6) 0 0;
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: calc(var(--fs-h3) * var(--optical)); line-height: 1.22;
}

.variant{ margin-bottom: var(--s-5); }
.variant-label{ margin: 0 0 var(--s-3); color: var(--muted); }
.swatches{ display: flex; flex-wrap: wrap; gap: var(--s-4); }
.swatch{
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.swatch-dot{
  width: 34px; height: 34px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 25%, transparent);
  outline: 1px solid transparent; outline-offset: 4px;
  transition: outline-color .3s var(--ease);
}
.swatch.is-active .swatch-dot{ outline-color: var(--accent); }
.swatch-label{ color: var(--muted); transition: color .3s var(--ease); }
.swatch.is-active .swatch-label{ color: var(--ink); }
.swatch:disabled{ cursor: default; opacity: .45; }
.swatch:disabled .swatch-label{ text-decoration: line-through; }

.pills{ display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pill{
  appearance: none; cursor: pointer; background: none; color: var(--ink);
  min-height: 44px; padding: 0 var(--s-4); border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pill.is-active{ border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pill:disabled{ cursor: default; opacity: .45; text-decoration: line-through; }

.as-is{ text-transform: none; letter-spacing: .04em; }
.variant-fixed .variant-value{ color: var(--ink); }
.variant-help{ margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.variant-guide{ margin-top: var(--s-1); padding: 0; border: 0; background-color: transparent; cursor: pointer; }
.size-guide-ph{ margin-top: var(--s-4); aspect-ratio: 1; }
.size-guide-fig{ margin: var(--s-4) 0 var(--s-5); }
.size-guide-fig img{ display: block; width: 100%; height: auto; background: var(--ph); color: transparent; }
.pdp-add{ margin-bottom: var(--s-2); }
.btn:disabled{ opacity: .5; cursor: default; }
.btn:disabled:hover{ background: var(--accent); }

.pdp-details{ margin-top: var(--s-7); border-top: 1px solid color-mix(in oklab, var(--line) 45%, transparent); }
.pdp-details details{ border-bottom: 1px solid color-mix(in oklab, var(--line) 45%, transparent); }
.pdp-details summary{
  list-style: none; cursor: pointer; color: var(--ink);
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.pdp-details summary::-webkit-details-marker{ display: none; }
.pdp-details summary::after{ content: "+"; font: 400 1.25rem/1 var(--font-ui); color: var(--muted); }
.pdp-details details[open] summary::after{ content: "–"; }
.pdp-pending{ margin: 0 0 var(--s-4); color: var(--muted); font-size: var(--fs-small); }
.pdp-text{ margin: 0 0 var(--s-3); font-size: var(--fs-small); line-height: 1.6; }

.pdp-more{ margin-top: var(--s-8); }
.pdp-more-title{ margin: 0 0 var(--s-5); color: var(--muted); }
.cards--mini{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px){ .cards--mini{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card--mini .card-link{ display: block; color: inherit; text-decoration: none; }
.card--mini .ph{ display: block; aspect-ratio: var(--ratio-bare); }
.card--mini .card-body{ display: block; padding: var(--s-3) var(--s-3) calc(var(--s-3) + 3px); }
.card--mini .card-num{ display: block; margin: 0 0 var(--s-1); color: var(--muted); }
.card--mini .card-name{
  display: block; line-height: 1.1;
  font-size: calc(var(--fs-lead) * var(--optical)); text-transform: var(--title-case);
}

.line-opts{ margin: 0 0 2px; color: var(--muted); }

.legal{ color: var(--ink); padding: calc(var(--bar-h) + var(--s-7)) 0 var(--s-8); }
.legal-col{ max-width: 62ch; margin-inline: auto; line-height: 1.8; overflow-wrap: break-word; }

.legal-head{ margin-bottom: var(--s-6); }
.legal-head .legal-kicker{ margin: 0 0 var(--s-3); color: var(--muted); }
.legal-title{ margin: 0; font-family: var(--font-brand); font-weight: 300; font-size: var(--fs-h3); line-height: 1.1; }
.legal-head .legal-date{ margin: var(--s-4) 0 0; color: var(--muted); }

.legal-col h2, .legal-col h3{ scroll-margin-top: var(--bar-h); }
.legal-col h2{
  margin: var(--s-6) 0 var(--s-4); padding-top: var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
  font-family: var(--font-brand); font-weight: 500; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: .04em;
}
.legal-col h3{ margin: var(--s-5) 0 var(--s-3); font: 600 var(--fs-small)/1.5 var(--font-ui); letter-spacing: .04em; }
.legal-col p, .legal-col ul, .legal-col ol{ margin: 0 0 var(--s-4); }
.legal-col ul, .legal-col ol{ padding-left: 1.4em; }
.legal-col li + li{ margin-top: var(--s-2); }
.legal-col strong{ font-weight: 600; }
.legal-col a:not(.link){ text-underline-offset: 4px; }

.legal-todo{
  padding: .05em .3em; background: #F2D34B; color: #1B1714; font-weight: 500;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.legal-toc{ margin-bottom: var(--s-6); }
.legal-toc .micro{ margin: 0 0 var(--s-2); color: var(--muted); }
.legal-toc ol{ list-style: none; margin: 0; padding: 0; }
.legal-toc li + li{ margin-top: 0; }

.legal-faq{ margin: 0 0 var(--s-5); }
.legal-faq summary{ padding-block: var(--s-3); font-weight: 500; line-height: 1.5; }
.legal-faq details > p{ margin: 0 0 var(--s-4); }

.footer-col li:has(> .legal-todo){ min-height: 36px; display: flex; align-items: center; }
.footer-base{
  grid-column: 1 / -1; padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.footer-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; color: var(--muted); }
.footer-links a{ display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-links a:hover{ text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px){
  .footer-links{ flex-direction: row; flex-wrap: wrap; column-gap: var(--s-4); }
  .footer-links li + li::before{ content: "·"; margin-right: var(--s-4); }
}

.cookie{
  --accent: #F4F0EA; --accent-ink: #1B1714; --ink: #1B1714;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));
  background: #1B1714; color: #F4F0EA; font-size: var(--fs-small); line-height: 1.5;
  border-top: 1px solid rgba(244,240,234,.3);
}
.cookie-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.cookie-text{ margin: 0; flex: 1 1 26em; }
.cookie-text a{ text-underline-offset: 4px; }
.cookie-actions{ display: flex; gap: var(--s-2); flex: 1 1 auto; }
.cookie-actions .btn{ flex: 1; white-space: nowrap; }
@media (min-width: 900px){ .cookie-actions{ flex: none; } }

.consents{ display: grid; margin-bottom: var(--s-3); }
.consent{
  display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: var(--s-2) 0;
  font-size: var(--fs-small); line-height: 1.5; cursor: pointer;
}
.consent input{ flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.consent a{ text-underline-offset: 4px; }

@supports not (aspect-ratio: 1 / 1){
  .bare .ph, .card-media .ph, .card--mini .ph, .pdp-main{ height: 0; padding-top: 133.333%; }
  .pdp-thumb .ph{ height: 0; padding-top: 100%; }
  .vitrin-hero .ph{ height: 0; padding-top: 66.667%; }
  .line-thumb{ height: 101px; }
  .size-guide-ph{ height: 0; padding-top: 100%; }
  .look-item{ width: calc(64vh * var(--arn)); width: min(calc(clamp(300px, 64vh, 680px) * var(--arn)), calc((100vw - 2 * var(--gutter)) * .84)); }
  .bar-logo .logo, .menu-brand .logo{ width: calc(var(--logo-bar-h) * 5.0129); }
  .hero-logo .logo, .footer-logo .logo{ width: calc(var(--logo-hero-h) * 5.0129); }
  @media (min-width: 900px){
    .scene-media{ width: calc((100vh - var(--bar-h) - var(--s-3) - var(--s-5)) * 2 / 3); }
  }
}
@supports not (width: clamp(1px, 1px, 1px)){
  :root{
    --gutter: 16px; --col-gap: 12px;
    --bar-h: 4.5rem; --bar-logo-fs: 1.4375rem; --bar-text-fs: .875rem; --bar-icon: 1.75rem;
    --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 96px;
    --fs-hero: 3.25rem; --fs-title: 3rem; --fs-h3: 1.625rem; --fs-lead: 1.125rem; --fs-body: .975rem;
  }
  .look-item{ height: 64vh; max-width: 84vw; }
}