/* =========================================================
   sæne — core stylesheet
   Type: Zodiak (display) + Switzer (text), served from the
   Fontshare CDN. ITF licenses these for CDN delivery, so the
   woff2 files are intentionally NOT vendored into this repo.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  /* surface */
  --bone: #f9f3e3;
  --bone-deep: #efe6d0;
  --bone-dim: #e3d8be;
  --ink: #0b0b0a;
  --ink-lift: #171613;
  --ink-veil: #201e19;

  /* pigment — pulled off the night-film frames: moss graffiti,
     warm sodium light, raw canvas */
  --moss: #47513c;
  --clay: #a8967a;
  --clay-deep: #6b5f49;
  --ember: #8c4a2f;

  /* derived */
  --rule: rgba(11, 11, 10, 0.14);
  --rule-soft: rgba(11, 11, 10, 0.08);
  --rule-inv: rgba(249, 243, 227, 0.16);
  --rule-inv-soft: rgba(249, 243, 227, 0.08);

  /* type */
  --display: "Zodiak", "Times New Roman", serif;
  --text: "Switzer", ui-sans-serif, system-ui, sans-serif;

  /* metrics */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 68px;
  --max: 1560px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img,
video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--bone); }

:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: 3px;
}

/* ---------- film grain ----------
   The whole reference reel is phone-shot in low light. A fixed
   grain plate keeps flat CSS panels from reading as vector-clean. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(3) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- typography ---------- */
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.022em;
  text-transform: lowercase;
}

.d-xl { font-size: clamp(3.4rem, 13vw, 12rem); }
.d-lg { font-size: clamp(2.6rem, 7.5vw, 6.4rem); }
.d-md { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.d-sm { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }

.label {
  font-family: var(--text);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
}

.label--dim { color: var(--clay-deep); }
.on-ink .label--dim { color: var(--clay); }

.lede {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  max-width: 52ch;
  color: rgba(11, 11, 10, 0.78);
}

.on-ink .lede { color: rgba(249, 243, 227, 0.72); }

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.005em;
  font-size: 1.6rem;
  line-height: 1;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(4.5rem, 11vh, 9rem); }
.section--tight { padding-block: clamp(3rem, 7vh, 5rem); }

/* first section on any page without a hero, so it clears the fixed bar */
.page-head {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* .display runs at line-height .92, so descenders (shop, studio) sit below
   the box. Margin is em-relative to stay proportional as the type scales. */
.page-head h1 { margin-bottom: 0.3em; }

.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filters button {
  padding: 0.7em 1.3em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.filters button:hover { border-color: var(--ink); }

.filters button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.crumb {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 1.5rem;
}

.on-ink {
  background: var(--ink);
  color: var(--bone);
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

.on-ink .rule { background: var(--rule-inv); }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* ---------- buttons ---------- */
.btn {
  --btn-fg: var(--bone);
  --btn-bg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 2.1em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease);
}

/* wipe-fill on hover, rather than a colour swap */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}

.btn:hover { color: var(--btn-bg); }
.btn:hover::before { transform: scaleY(1); }

.btn--ghost {
  --btn-fg: var(--ink);
  --btn-bg: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
}

.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--bone); }

.on-ink .btn--ghost {
  border-color: var(--rule-inv);
  color: var(--bone);
}

.on-ink .btn--ghost::before { background: var(--bone); }
.on-ink .btn--ghost:hover { color: var(--ink); }

.btn--block { width: 100%; }

/* underline-on-hover text link */
.tlink {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.tlink:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--bone);
  transition: background 0.5s var(--ease), color 0.5s var(--ease),
    border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

/* ---- per-section nav theming ----
   Sections declare data-nav; an observer watching a 1px band at the bar
   stamps the matching data-theme here. The chrome re-skins as you move
   through the site instead of holding one appearance throughout. */

.nav[data-theme="dark"] {
  background: transparent;
  color: var(--bone);
  border-bottom-color: transparent;
}

.nav[data-theme="light"] {
  background: rgba(249, 243, 227, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.nav[data-theme="ink"] {
  background: rgba(11, 11, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--bone);
  border-bottom-color: var(--rule-inv);
}

.nav[data-theme="moss"] {
  background: rgba(11, 11, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--bone);
  border-bottom-color: rgba(71, 81, 60, 0.55);
}

/* the wordmark and links take a slightly different setting per theme,
   so the shift registers as a change of register, not just a colour swap */
.nav__logo {
  transition: letter-spacing 0.6s var(--ease), opacity 0.5s var(--ease),
    color 0.5s var(--ease);
}

.nav[data-theme="dark"] .nav__logo { letter-spacing: 0.06em; }
.nav[data-theme="ink"] .nav__logo { letter-spacing: 0.03em; }
.nav[data-theme="moss"] .nav__logo { color: #9aa88a; letter-spacing: 0.05em; }
.nav[data-theme="moss"] .nav__links a { color: rgba(154, 168, 138, 0.72); }

/* legacy hook — kept so anything still toggling .is-solid keeps working */
.nav.is-solid:not([data-theme]) {
  background: rgba(249, 243, 227, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.nav__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav__links {
  display: flex;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  justify-content: center;
}

.nav__links a {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-self: end;
}

.nav__cart {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.nav__cart-n {
  min-width: 1.5em;
  height: 1.5em;
  padding-inline: 0.35em;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: inline-grid;
  place-items: center;
  font-size: 0.58rem;
  letter-spacing: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.nav__cart.is-full .nav__cart-n {
  background: currentColor;
  color: var(--bone);
}

.nav.is-solid .nav__cart.is-full .nav__cart-n { color: var(--bone); }

/* burger */
.burger {
  display: none;
  width: 26px;
  height: 14px;
  position: relative;
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.25s linear;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { bottom: 0; }

body.is-menu .burger span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
body.is-menu .burger span:nth-child(2) { transform: translateY(-6.25px) rotate(-45deg); }

/* mobile drawer */
.menu {
  position: fixed;
  inset: 0;
  z-index: 790;
  background: var(--ink);
  color: var(--bone);
  padding: calc(var(--nav-h) + 3rem) var(--gut) var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease);
}

body.is-menu .menu { transform: translateY(0); }

.menu__links a {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 12vw, 4rem);
  line-height: 1.18;
  text-transform: lowercase;
  display: block;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}

/* shorter opening for home.html — the entry page already had the full screen */
.hero--compact { min-height: 74svh; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the night-film reference is desaturated and crushed */
  filter: grayscale(0.35) contrast(1.06) brightness(0.72);
}

/* ---- WebGL cloth ----
   Sits over the poster and fades it out once the context is live, so a
   missing WebGL context or a blocked CDN just leaves the poster in place. */
.cloth {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cloth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}

.cloth.is-live .cloth-canvas { opacity: 1; }

.cloth.is-live ~ img,
.cloth.is-live ~ video {
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* above the cloth canvas, below hero__body */
  background: linear-gradient(
    to top,
    rgba(11, 11, 10, 0.92) 0%,
    rgba(11, 11, 10, 0.45) 42%,
    rgba(11, 11, 10, 0.55) 100%
  );
}

.hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  padding-top: calc(var(--nav-h) + 2rem);
}

.hero__mark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(5rem, 22vw, 20rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  margin-bottom: 0.28em;
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-inv);
  padding-top: 1.4rem;
}

/* ---- landing hero ----
   The full-viewport entry. Centres the mark over the cloth and holds the
   whole first screen, then scrolls straight into the page — one document,
   no interstitial click before the shop. */
.hero--landing { align-items: center; }

.hero--landing .hero__body {
  padding-block: calc(var(--nav-h) + 2rem) 0;
}

.hero--landing .hero__mark {
  font-size: clamp(5.5rem, 25vw, 24rem);
  margin-bottom: 0.18em;
}

.hero--landing .hero__meta {
  border-top: 0;
  padding-top: 0;
  align-items: center;
}

.hero__enter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  z-index: 2;
  display: flex;
  justify-content: center;
}

/* the mark resolves out of the dark once the cloth has faded up */
.hero--landing .hero__mark,
.hero--landing .hero__meta,
.hero--landing .label {
  animation: settle 1.9s var(--ease) both;
}

.hero--landing .label { animation-delay: 0.15s; }
.hero--landing .hero__mark { animation-delay: 0.3s; }
.hero--landing .hero__meta { animation-delay: 0.62s; }

@keyframes settle {
  from { opacity: 0; transform: translateY(18px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.scroll-cue i {
  width: 44px;
  height: 1px;
  background: currentColor;
  display: block;
  transform-origin: left;
  animation: cue 2.6s var(--ease-io) infinite;
}

@keyframes cue {
  0%, 100% { transform: scaleX(0.3); opacity: 0.5; }
  50%      { transform: scaleX(1); opacity: 1; }
}

/* ==========================================================
   entry page (index.html)
   A standing door, not a section: one screen, no scroll, no
   shop chrome. The cloth carries it; everything else is a
   caption. Exits through a veil so the jump to home.html
   does not flash.
   ========================================================== */
.entry {
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  display: grid;
  place-items: center;
  position: relative;
}

.entry__scene { position: absolute; inset: 0; z-index: 0; }

.entry__scene > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.06) brightness(0.72);
}

/* Holds the middle DOWN, not the edges. The cloth reaches full bone-white on
   the fold crowns, which is exactly where the mark and the sub-line sit — so
   the first pool darkens behind the type, then the usual edge vignette. */
.entry__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(62% 46% at 50% 50%, rgba(11, 11, 10, 0.80) 0%, rgba(11, 11, 10, 0.42) 55%, transparent 80%),
    radial-gradient(130% 95% at 50% 45%, transparent 40%, rgba(11, 11, 10, 0.58) 100%),
    linear-gradient(to bottom, rgba(11, 11, 10, 0.52), transparent 26%, transparent 64%, rgba(11, 11, 10, 0.78));
}

.entry__body {
  position: relative;
  z-index: 4;
  text-align: center;
  padding-inline: var(--gut);
}

.entry__mark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(4.5rem, 20vw, 19rem);
  line-height: 0.8;
  letter-spacing: -0.032em;
  text-transform: lowercase;
  margin: 0.24em 0 0.3em;
}

/* the mark is the door to the menu — give it a hover that reads as
   interactive without putting a button around the wordmark */
.entry__logo {
  display: inline-block;
  color: inherit;
  transition: opacity 0.5s var(--ease), text-shadow 0.7s var(--ease);
}

.entry__logo:hover {
  opacity: 0.92;
  text-shadow: 0 0 42px rgba(249, 243, 227, 0.28);
}

.entry__sub {
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  color: rgba(249, 243, 227, 0.66);
  max-width: 34ch;
  margin-inline: auto;
}

/* corner meta — the small print that makes it read as a plate */
.entry__corner {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  color: rgba(249, 243, 227, 0.5);
}

.entry__corner--tl { top: clamp(1.25rem, 3vh, 2.2rem); left: var(--gut); }
.entry__corner--tr { top: clamp(1.25rem, 3vh, 2.2rem); right: var(--gut); }
.entry__corner--bl { bottom: clamp(1.25rem, 3vh, 2.2rem); left: var(--gut); }
.entry__corner--br { bottom: clamp(1.25rem, 3vh, 2.2rem); right: var(--gut); }

.entry__corner a { transition: color 0.4s var(--ease); }
.entry__corner a:hover { color: var(--bone); }

/* the way in */
.entry__enter {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(3.5rem, 9vh, 6rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  color: rgba(249, 243, 227, 0.72);
  transition: color 0.4s var(--ease);
}

.entry__enter:hover { color: var(--bone); }

.entry__enter i {
  display: block;
  width: 1px;
  height: 46px;
  background: currentColor;
  transform-origin: top;
  animation: drop 2.4s var(--ease-io) infinite;
}

@keyframes drop {
  0%, 100% { transform: scaleY(0.25); opacity: 0.45; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* staged reveal — the plate assembles rather than just appearing */
.entry__body .label,
.entry__mark,
.entry__sub,
.entry__enter,
.entry__corner { animation: settle 2s var(--ease) both; }

.entry__body .label { animation-delay: 0.5s; }
.entry__mark        { animation-delay: 0.72s; }
.entry__sub         { animation-delay: 1.05s; }
.entry__corner      { animation-delay: 1.35s; }
.entry__enter       { animation-delay: 1.55s; }

.entry__veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.62s var(--ease);
}

body.is-leaving .entry__veil { opacity: 1; }

@media (max-width: 620px) {
  .entry__corner--tr,
  .entry__corner--br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entry__body .label,
  .entry__mark,
  .entry__sub,
  .entry__enter,
  .entry__corner { animation: none; }

  .entry__enter i { animation: none; }
}

/* ==========================================================
   directory (menu.html)
   The hub the logo opens onto. Three doors, set large, with
   the background answering to whichever one is under the
   cursor. Namespaced away from .menu, which is the mobile
   drawer on the inner pages.
   ========================================================== */
.directory {
  min-height: 100svh;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.directory__bg { position: absolute; inset: 0; z-index: 0; }

.directory__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  filter: grayscale(0.45) brightness(0.78) contrast(1.04);
  transition: opacity 0.9s var(--ease), transform 1.6s var(--ease);
}

.directory__bg img.is-on { opacity: 1; transform: scale(1); }

/* Enough to keep the type legible, not so much that the backdrop stops
   reading — the swap is the whole point of the page. */
.directory__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 65% at 50% 50%, rgba(11, 11, 10, 0.42), transparent 88%),
    linear-gradient(to bottom, rgba(11, 11, 10, 0.62), rgba(11, 11, 10, 0.2) 40%, rgba(11, 11, 10, 0.72));
}

.directory__top,
.directory__foot {
  position: relative;
  z-index: 2;
  padding: clamp(1.25rem, 3.5vh, 2rem) var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.directory__foot {
  border-top: 1px solid var(--rule-inv);
  color: rgba(249, 243, 227, 0.55);
}

.directory__foot a { transition: color 0.4s var(--ease); }
.directory__foot a:hover { color: var(--bone); }

.directory__list {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--gut);
}

.directory__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.1rem, 3.2vh, 2.1rem);
  border-top: 1px solid var(--rule-inv);
  transition: opacity 0.45s var(--ease);
}

.directory__item:last-child { border-bottom: 1px solid var(--rule-inv); }

/* whichever one you are on stays lit; the rest step back */
.directory__list:hover .directory__item { opacity: 0.34; }
.directory__list .directory__item:hover { opacity: 1; }

.directory__num {
  font-family: var(--text);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--clay);
}

.directory__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  display: block;
  transition: transform 0.6s var(--ease);
}

.directory__item:hover .directory__title { transform: translateX(0.14em); }

.directory__meta {
  font-size: 0.78rem;
  color: rgba(249, 243, 227, 0.55);
  text-align: right;
  max-width: 22ch;
}

.directory__arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  font-family: var(--text);
  font-size: 0.9rem;
}

.directory__item:hover .directory__arrow { opacity: 1; transform: none; }

.directory__item,
.directory__top,
.directory__foot { animation: settle 1.4s var(--ease) both; }

.directory__top { animation-delay: 0.1s; }
.directory__item:nth-child(1) { animation-delay: 0.22s; }
.directory__item:nth-child(2) { animation-delay: 0.34s; }
.directory__item:nth-child(3) { animation-delay: 0.46s; }
.directory__item:nth-child(4) { animation-delay: 0.58s; }
.directory__foot { animation-delay: 0.7s; }

@media (max-width: 780px) {
  .directory__item { grid-template-columns: auto 1fr; }
  .directory__meta { display: none; }
  /* no hover on touch — keep every row at full strength */
  .directory__list:hover .directory__item { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .directory__item,
  .directory__top,
  .directory__foot { animation: none; }
}

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: 1.15rem;
  white-space: nowrap;
}

.on-ink .marquee { border-color: var(--rule-inv); }

.marquee__track {
  display: inline-flex;
  gap: 3.5rem;
  animation: slide 34s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track span {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
}

.marquee__track span::after {
  content: "æ";
  font-size: 0.7em;
  opacity: 0.4;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- media / placeholders ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--bone-deep);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.7s var(--ease);
}

.media--3x4 { aspect-ratio: 3 / 4; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--9x16 { aspect-ratio: 9 / 16; }

a:hover .media img,
.card:hover .media img { transform: scale(1.045); }

/* ---------- product grid ---------- */
.grid {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.6rem) clamp(0.9rem, 1.6vw, 1.6rem);
}

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card__body {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
}

.card__name {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.card__meta {
  font-size: 0.72rem;
  color: var(--clay-deep);
  margin-top: 0.2rem;
}

.card__price {
  font-size: 0.86rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  background: var(--bone);
  color: var(--ink);
  padding: 0.35em 0.75em;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tag--ink { background: var(--ink); color: var(--bone); }
.tag--moss { background: var(--moss); color: var(--bone); }

/* ---------- split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
}

.split__text > * + * { margin-top: 1.4rem; }

/* ---------- process steps ---------- */
.steps { counter-reset: s; }

.step {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3.5vw, 2.6rem);
  border-top: 1px solid var(--rule-inv);
  align-items: start;
}

.step:last-child { border-bottom: 1px solid var(--rule-inv); }

.step::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.15rem;
  opacity: 0.5;
}

.step h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  text-transform: lowercase;
  line-height: 1.05;
  margin-bottom: 0.5rem;
}

/* ---------- cart drawer ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(11, 11, 10, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}

body.is-cart .scrim { opacity: 1; visibility: visible; }

.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 910;
  width: min(440px, 100%);
  background: var(--bone);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform 0.65s var(--ease);
  box-shadow: -20px 0 60px rgba(11, 11, 10, 0.16);
}

body.is-cart .cart { transform: translateX(0); }

.cart__head,
.cart__foot {
  padding: 1.5rem var(--gut);
  flex-shrink: 0;
}

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}

.cart__foot { border-top: 1px solid var(--rule); }

.cart__items {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--gut);
}

.cart__empty {
  padding: 4rem 0;
  text-align: center;
  color: var(--clay-deep);
}

.ci {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}

.ci__name { font-size: 0.84rem; font-weight: 500; }

.ci__meta {
  font-size: 0.7rem;
  color: var(--clay-deep);
  margin-top: 0.15rem;
}

.ci__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.qty button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  line-height: 1;
  transition: opacity 0.25s;
}

.qty button:hover { opacity: 0.5; }

.qty span {
  min-width: 1.6em;
  text-align: center;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.cart__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.1rem;
}

.cart__total {
  font-family: var(--display);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  transition: background 0.3s var(--ease);
}

.x:hover { background: var(--bone-dim); }

/* ---------- product detail ---------- */
.pdp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}

.pdp__gallery {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr 1fr;
}

.pdp__gallery > *:first-child { grid-column: 1 / -1; }

.pdp__panel { position: sticky; top: calc(var(--nav-h) + 2rem); }
.pdp__panel > * + * { margin-top: 1.5rem; }

.swatches { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.swatch {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  position: relative;
  transition: transform 0.3s var(--ease);
}

.swatch::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.swatch[aria-pressed="true"]::after { border-color: var(--ink); }
.swatch:hover { transform: translateY(-2px); }

.sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.4rem, 1fr));
  gap: 0.5rem;
}

.size {
  padding: 0.85em 0.4em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.size:hover { border-color: var(--ink); }

.size[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.size[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
  text-decoration: line-through;
}

.size[disabled]:hover { border-color: var(--rule); }

/* accordion */
.acc { border-top: 1px solid var(--rule); }

.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.acc__head i {
  width: 11px;
  height: 11px;
  position: relative;
  flex-shrink: 0;
}

.acc__head i::before,
.acc__head i::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.acc__head i::before { inset: 5px 0; height: 1px; }
.acc__head i::after { inset: 0 5px; width: 1px; }

.acc.is-open .acc__head i::after { transform: scaleY(0); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.acc.is-open .acc__panel { grid-template-rows: 1fr; }

.acc__panel > div { overflow: hidden; }

.acc__panel p {
  padding-bottom: 1.2rem;
  font-size: 0.88rem;
  color: rgba(11, 11, 10, 0.72);
}

/* ---------- studio / film page ---------- */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.2rem);
}

.reel {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-lift);
}

.reel__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem;
  background: linear-gradient(to top, rgba(11, 11, 10, 0.85), transparent);
  transform: translateY(12%);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease);
}

.reel:hover .reel__cap { transform: translateY(0); opacity: 1; }

.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid var(--rule-inv);
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(249, 243, 227, 0.1);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}

.reel:hover .play {
  background: rgba(249, 243, 227, 0.92);
  transform: scale(1.06);
}

.reel:hover .play svg { fill: var(--ink); }

.play svg { fill: var(--bone); transition: fill 0.4s var(--ease); }

.svc {
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule-inv);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
}

.svc:last-child { border-bottom: 1px solid var(--rule-inv); }

.svc h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  text-transform: lowercase;
}

/* ---------- form ---------- */
.field { position: relative; margin-bottom: 1.6rem; }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 1.1rem 0 0.7rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-inv);
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}

.field textarea { resize: vertical; min-height: 6rem; }

.field select option { background: var(--ink); color: var(--bone); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--bone);
}

.field label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  display: block;
}

/* ---------- footer ---------- */
.foot { padding-top: clamp(3.5rem, 8vh, 6rem); }

.foot__mark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(5rem, 26vw, 24rem);
  line-height: 0.78;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  text-align: center;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  opacity: 0.14;
  user-select: none;
}

.foot__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.foot__cols h4 {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1.1rem;
}

.foot__cols li + li { margin-top: 0.55rem; }
.foot__cols a { font-size: 0.88rem; }

.foot__base {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-inv);
}

/* ---------- scroll reveal ---------- */
[data-rise] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-rise].is-in { opacity: 1; transform: none; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 950;
  transform: translate(-50%, 150%);
  background: var(--ink);
  color: var(--bone);
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.6s var(--ease);
  white-space: nowrap;
}

.toast.is-up { transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }

  .nav__links { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .burger { display: block; }

  .split,
  .pdp { grid-template-columns: 1fr; }

  .pdp__panel { position: static; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 92svh; }
}

@media (max-width: 560px) {
  .grid--3,
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .reel-grid { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr; }
  .pdp__gallery { grid-template-columns: 1fr; }
  .cart__head,
  .cart__foot,
  .cart__items { --gut: 1.25rem; }
}

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

  [data-rise] { opacity: 1; transform: none; }
  body::after { animation: none; }
}