:root {
  --ink:        #14090a;
  --ink-2:      #1c0d0e;
  --ink-3:      #261313;
  --bone:       #ece2cf;
  --bone-2:     #d8ccb3;
  --bone-dim:   #b4a587;
  --vellum:     #f4ead4;
  --ox:         #7a1d22;
  --ox-bright:  #b03e43;
  --ox-deep:    #4a0e12;
  --ox-flame:   #d9594f;
  --thread:     #c34a4f;
  --charcoal:   #1a0a0a;

  --font-display: 'Italiana', serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-hand:    'Caveat', cursive;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
  line-height: 1.6;
}

/* fabric texture across site */
.fabric {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 7998;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.15 0 0 0 0 0.15 0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
}
.vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 7999;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.75) 100%);
}

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ox-deep); }
::selection { background: var(--ox); color: var(--vellum); }

/* CURSOR — needle leading a thread tail */
#cursorSvg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  width: 100vw; height: 100vh;
}
.cursor-needle {
  position: fixed;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
  will-change: transform;
}
.cursor-needle svg { width: 100%; height: 100%; overflow: visible; }
.cursor-needle.hover { transform: translate(-50%, -50%) scale(1.4) rotate(-12deg); }

/* ════════════════════════════════════════════════ */
/* OVERTURE — fire-ringed seal (rotated-A glyph)     */
/* ════════════════════════════════════════════════ */
#overture {
  position: fixed; inset: 0;
  z-index: 9500;
  background: radial-gradient(circle at center, #1a0606 0%, #050202 80%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 1.4s ease, visibility 1.4s;
  overflow: hidden;
  cursor: none;
}
#overture.gone { opacity: 0; visibility: hidden; pointer-events: none; }

/* Ambient breathing red haze — intensifies as auto-enter approaches */
#overture::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(195,74,79, calc(0.08 + var(--burn, 0) * 0.18)) 0%, transparent 65%);
  transition: background 0.4s linear;
  pointer-events: none;
}

.overture-mark {
  position: relative;
  width: 380px; height: 380px;
  display: flex; align-items: center; justify-content: center;
}

#sparkCanvas {
  position: absolute;
  inset: -80px;
  width: calc(100% + 160px);
  height: calc(100% + 160px);
  pointer-events: none;
  z-index: 1;
}

.overture-thread {
  position: relative;
  width: 100%; height: 100%;
  z-index: 3;
  filter: drop-shadow(0 0 calc(18px + var(--burn, 0) * 22px) rgba(195, 74, 79, calc(0.4 + var(--burn, 0) * 0.4)));
  transition: filter 0.4s linear;
}
.overture-thread circle,
.overture-thread path,
.overture-thread line {
  fill: none;
  stroke: var(--ox-bright);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overture-thread .draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawIn 2.6s ease-out forwards;
}
.overture-thread .draw.d2 { animation-delay: 0.25s; }
.overture-thread .draw.d3 { animation-delay: 0.55s; }
.overture-thread .draw.d6 { animation-delay: 1.65s; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* THE ROTATED A — center of the seal, Italiana, glowing oxblood */
.glyph-A-text {
  font-family: var(--font-display);
  font-size: 140px;
  fill: var(--ox-bright);
  stroke: none;
  opacity: 0;
  filter: drop-shadow(0 0 calc(8px + var(--burn, 0) * 22px) rgba(195, 74, 79, calc(0.55 + var(--burn, 0) * 0.45)));
  animation: glyphFadeIn 1.3s cubic-bezier(0.2,0.8,0.2,1) 0.95s forwards;
}
@keyframes glyphFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* SMOULDER RING — sits on the outer circle, intensifies with --burn */
.smoulder-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: smoulderIn 1.4s ease 2.2s forwards;
}
@keyframes smoulderIn { to { opacity: 1; } }
.smoulder-ring svg { width: 100%; height: 100%; overflow: visible; }
.smoulder-ring .smoulder {
  fill: none;
  stroke-linecap: round;
  filter: blur(1.2px);
  transform-origin: center;
}
.smoulder-ring .smoulder.s1 {
  stroke: rgba(255, 110, 60, calc(0.5 + var(--burn, 0) * 0.4));
  stroke-width: calc(1.2px + var(--burn, 0) * 1.5px);
  stroke-dasharray: 3 7 5 9 2 11 4 8;
  animation: smoulderRotate 18s linear infinite;
  transition: stroke 0.4s linear, stroke-width 0.4s linear;
}
.smoulder-ring .smoulder.s2 {
  stroke: rgba(255, 180, 60, calc(0.3 + var(--burn, 0) * 0.5));
  stroke-width: calc(0.6px + var(--burn, 0) * 1.2px);
  stroke-dasharray: 1 6 3 10 2 7;
  animation: smoulderRotate 11s linear infinite reverse;
  transition: stroke 0.4s linear, stroke-width 0.4s linear;
}
@keyframes smoulderRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* FLAME FLARES — periodic licks of fire */
.flame-flares {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.flame-flares svg { width: 100%; height: 100%; overflow: visible; }
.flame-flares .flame {
  fill: url(#flameGrad);
  opacity: 0;
  filter: blur(0.6px);
  transform-origin: center 50%;
}
.flame-flares .flame.f1 { animation: flameFlare1 5.7s ease-in-out infinite; animation-delay: 1.8s; }
.flame-flares .flame.f2 { animation: flameFlare2 6.3s ease-in-out infinite; animation-delay: 3.4s; }
.flame-flares .flame.f3 { animation: flameFlare3 5.1s ease-in-out infinite; animation-delay: 0.6s; }
.flame-flares .flame.f4 { animation: flameFlare4 6.8s ease-in-out infinite; animation-delay: 4.2s; }
@keyframes flameFlare1 {
  0%, 88%, 100% { opacity: 0; transform: scale(0.4); }
  92% { opacity: calc(0.55 + var(--burn, 0) * 0.35); transform: scale(1); }
  96% { opacity: calc(0.3 + var(--burn, 0) * 0.3); transform: scale(0.7); }
}
@keyframes flameFlare2 {
  0%, 85%, 100% { opacity: 0; transform: scale(0.4); }
  90% { opacity: calc(0.55 + var(--burn, 0) * 0.35); transform: scale(1); }
  95% { opacity: calc(0.3 + var(--burn, 0) * 0.3); transform: scale(0.7); }
}
@keyframes flameFlare3 {
  0%, 90%, 100% { opacity: 0; transform: scale(0.4); }
  94% { opacity: calc(0.55 + var(--burn, 0) * 0.35); transform: scale(1); }
  98% { opacity: calc(0.3 + var(--burn, 0) * 0.3); transform: scale(0.7); }
}
@keyframes flameFlare4 {
  0%, 87%, 100% { opacity: 0; transform: scale(0.4); }
  91% { opacity: calc(0.55 + var(--burn, 0) * 0.35); transform: scale(1); }
  96% { opacity: calc(0.3 + var(--burn, 0) * 0.3); transform: scale(0.7); }
}

/* Auto-enter progress arc — invisible until late */
.auto-arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.5s;
}
.auto-arc.visible { opacity: 1; }
.auto-arc svg { width: 100%; height: 100%; }
.auto-arc .arc-path {
  fill: none;
  stroke: var(--ox-flame);
  stroke-width: 1.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--ox-flame));
  transform: rotate(-90deg);
  transform-origin: center;
}

.overture-text {
  position: absolute;
  bottom: -110px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  animation: fadeUp 1.2s ease 2.6s forwards;
  z-index: 5;
}
.overture-name {
  font-family: var(--font-display);
  color: var(--ox-bright);
  font-size: 30px;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-indent: 0.55em;
}
.overture-name .flipA {
  display: inline-block;
  transform: rotate(180deg) translateY(-0.04em);
  color: var(--ox-bright);
}
.overture-tagline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 13px;
  letter-spacing: 0.25em;
  margin-bottom: 36px;
}
.overture-enter {
  background: transparent;
  border: 1px solid var(--ox);
  color: var(--ox-bright);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.4em;
  padding: 16px 42px;
  cursor: none;
  text-transform: uppercase;
  transition: all 0.4s ease;
}
.overture-enter:hover {
  background: var(--ox);
  color: var(--bone);
  letter-spacing: 0.5em;
  border-color: var(--ox-bright);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ════════════════════════════════════════════════ */
/* CROWN CURSOR — overture only                      */
/* ════════════════════════════════════════════════ */
.crown-cursor {
  position: fixed;
  width: 38px; height: 32px;
  pointer-events: none;
  z-index: 10002;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.6s;
  will-change: transform;
  left: -100px; top: -100px;
  opacity: 0;
}
.crown-cursor.active { opacity: 1; }
.crown-cursor svg { width: 100%; height: 100%; overflow: visible; }
.crown-cursor.hover { transform: translate(-50%, -50%) scale(1.4); }
.crown-cursor .crown-path {
  fill: none;
  stroke: var(--ox-bright);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(176, 62, 67, 0.55));
}
.crown-cursor .crown-fill { fill: rgba(122, 29, 34, 0.25); stroke: none; }
.crown-cursor .jewel {
  fill: var(--ox-flame);
  filter: drop-shadow(0 0 3px var(--ox-flame));
}
.crown-cursor.hover .jewel { fill: var(--bone); }
.crown-dot {
  position: fixed;
  width: 3px; height: 3px;
  background: var(--ox-bright);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10003;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px var(--ox-flame);
  left: -100px; top: -100px;
  opacity: 0;
  transition: opacity 0.6s;
}
.crown-dot.active { opacity: 1; }

/* When overture is active, hide the needle/brush cursor */
body.overture-active .cursor-needle,
body.overture-active #cursorSvg { opacity: 0; }


/* TOPBAR */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar-mark {
  font-family: var(--font-display);
  color: var(--bone);
  font-size: 17px;
  letter-spacing: 0.5em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}
.topbar-mark .flipA {
  display: inline-block;
  transform: rotate(180deg) translateY(-0.04em);
  color: var(--ox-bright);
  margin: 0 0.06em;
}
.topbar-nav { display: flex; gap: 36px; }
.topbar-nav a {
  color: var(--bone-dim);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.4s;
  font-style: italic;
}
.topbar-nav a:hover { color: var(--ox-bright); }
.topbar-mark-tag {
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 18px;
}

/* HERO + RACK */
.hero {
  min-height: 100vh;
  position: relative;
  padding: 110px 0 60px;
  overflow: hidden;
}
.hero-head {
  text-align: center;
  position: relative;
  margin-bottom: 40px;
  padding: 0 40px;
}
.hero-head-eyebrow {
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 24px;
  margin-bottom: 6px;
  display: inline-block;
  transform: rotate(-2deg);
}
.hero-head-title {
  font-family: var(--font-display);
  color: var(--bone);
  font-size: clamp(56px, 8.5vw, 132px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
  position: relative;
  display: inline-block;
}
.hero-head-title .flipA {
  display: inline-block;
  transform: rotate(180deg) translateY(-0.06em);
  color: var(--ox-bright);
}
.hero-head-title::after {
  content: '';
  position: absolute;
  left: -8%; right: -8%;
  bottom: -8px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 12' xmlns='http://www.w3.org/2000/svg'><path d='M2 6 Q 50 2 100 7 T 200 5 T 300 8 T 398 6' fill='none' stroke='%237a1d22' stroke-width='1.2' stroke-linecap='round'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.7;
}
.hero-head-sub {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 17px;
  max-width: 540px;
  margin: 24px auto 0;
  line-height: 1.7;
}

.rack-container {
  position: relative;
  width: 100%;
  margin-top: 70px;
  padding-bottom: 100px;
  /* the room itself — almost dark */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* ════════ THE ROOM ════════ */
/* Curtain — heavy velvet pleats across back wall */
.room-curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 120px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.curtain-fabric {
  position: absolute;
  top: -20px;
  left: -3%;
  right: -3%;
  bottom: 0;
  /* Vertical pleats — deep oxblood, almost black, just barely visible */
  background:
    /* The pleat lines themselves — vertical dark stripes with subtle highlights */
    repeating-linear-gradient(
      90deg,
      rgba(15, 4, 6, 0.95) 0px,
      rgba(40, 10, 12, 0.85) 30px,
      rgba(74, 14, 18, 0.75) 50px,
      rgba(40, 10, 12, 0.85) 70px,
      rgba(15, 4, 6, 0.95) 100px
    ),
    /* warm rim of light along the top — barest hint */
    radial-gradient(
      ellipse at 50% 10%,
      rgba(176, 62, 67, 0.08) 0%,
      transparent 60%
    ),
    var(--ink);
  filter: blur(0.4px);
  transform-origin: top center;
  animation: curtainBreath 14s ease-in-out infinite;
}
/* faint highlight wash to suggest folded depth */
.curtain-fabric::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 38px,
      rgba(122, 29, 34, 0.18) 50px,
      transparent 62px,
      transparent 100px
    );
  mix-blend-mode: screen;
  opacity: 0.55;
}
/* heavy bottom — the curtain hits the floor */
.curtain-fabric::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 50px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

@keyframes curtainBreath {
  0%, 100% { transform: scaleX(1) translateX(0); }
  50%      { transform: scaleX(1.005) translateX(-2px); }
}

/* The low spotlight that catches the rack */
.room-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 50% 65% at 50% 35%,
      rgba(217, 134, 89, 0.13) 0%,
      rgba(217, 134, 89, 0.05) 35%,
      transparent 65%
    );
  mix-blend-mode: screen;
}

/* DRESS FORM — in the right corner, half-draped, slowly turning */
.dress-form {
  position: absolute;
  bottom: 80px;
  right: 5%;
  width: 160px;
  height: 360px;
  z-index: 1;
  opacity: 0.65;
  filter: brightness(0.7) contrast(0.95);
  transform-origin: center 90%;
  animation: dressformBreath 18s ease-in-out infinite;
}
.dress-form svg {
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.8));
}
@keyframes dressformBreath {
  0%, 100% { transform: rotateY(-8deg) scale(1); }
  50%      { transform: rotateY(8deg) scale(1.01); }
}

/* ensure the rack content sits ABOVE the room background */
.rail, .rack-row {
  position: relative;
  z-index: 5;
}

/* ════════ "Enter the cutting room" button ════════ */
.cutting-room-trigger {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: transparent;
  border: none;
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 19px;
  cursor: none;
  padding: 10px 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color 0.4s, gap 0.4s;
}
.cutting-room-trigger:hover {
  color: var(--ox-flame);
  gap: 18px;
}
.cutting-room-trigger::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--ox);
  display: inline-block;
  transition: width 0.4s;
}
.cutting-room-trigger:hover::before { width: 50px; }
.cutting-room-trigger::after {
  content: '→';
  font-family: var(--font-body);
  font-size: 18px;
}

/* ════════ CUTTING ROOM PANEL ════════ */
.cutting-room {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 70vw;
  max-width: 1100px;
  background:
    /* aged cream paper — the workshop's bench surface */
    radial-gradient(
      ellipse at 30% 30%,
      #efe4cb 0%,
      #ddd0b2 50%,
      #c9bb98 100%
    );
  z-index: 850;
  transform: translateX(100%);
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow:
    -20px 0 60px rgba(0, 0, 0, 0.7),
    inset 30px 0 60px rgba(74, 14, 18, 0.12);
  color: #2a1010;
}
.cutting-room.open { transform: translateX(0); }
.cutting-room::-webkit-scrollbar { width: 0; }

/* paper grain texture on the cutting room bg */
.cutting-room::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'><filter id='paper'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.28 0 0 0 0 0.2 0 0 0 0.5 0'/></filter><rect width='300' height='300' filter='url(%23paper)'/></svg>");
}

.cr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 845;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s;
}
.cr-backdrop.open { opacity: 1; visibility: visible; }

.cr-close {
  position: absolute;
  top: 28px;
  right: 36px;
  background: transparent;
  border: none;
  color: #4a0e12;
  font-family: var(--font-hand);
  font-size: 24px;
  cursor: none;
  z-index: 20;
  padding: 6px 14px;
  transition: color 0.3s;
}
.cr-close::before { content: '✕ '; }
.cr-close:hover { color: #b03e43; }

.cr-inner {
  position: relative;
  padding: 100px 70px 120px;
  z-index: 2;
  min-height: 100%;
}

.cr-header {
  margin-bottom: 60px;
  position: relative;
}
.cr-eyebrow {
  font-family: var(--font-hand);
  color: #7a1d22;
  font-size: 22px;
  transform: rotate(-1.5deg);
  display: inline-block;
  margin-bottom: 8px;
}
.cr-title {
  font-family: var(--font-display);
  color: #2a1010;
  font-size: clamp(48px, 5.5vw, 84px);
  line-height: 1;
  margin-bottom: 16px;
}
.cr-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  color: #5a2a2a;
  font-size: 17px;
  max-width: 460px;
  line-height: 1.6;
}

/* THE PINNED ELEMENTS — sketches, swatches, pattern pieces */
.cr-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.cr-piece {
  position: relative;
  background: #f3e9d2;
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 8px 18px rgba(50, 20, 10, 0.18),
    0 2px 4px rgba(50, 20, 10, 0.12);
  transition: transform 0.5s ease, box-shadow 0.5s;
}
.cr-piece:hover {
  transform: rotate(0deg) scale(1.03) translateY(-4px) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 16px 32px rgba(50, 20, 10, 0.28),
    0 4px 8px rgba(50, 20, 10, 0.16);
  z-index: 10;
}

/* a pin in the corner of each piece */
.cr-piece::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d9594f 0%, #7a1d22 60%, #4a0e12 100%);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

/* tilts — randomized via classes */
.cr-piece.tilt-1 { transform: rotate(-2deg); }
.cr-piece.tilt-2 { transform: rotate(1.5deg); }
.cr-piece.tilt-3 { transform: rotate(-1deg); }
.cr-piece.tilt-4 { transform: rotate(2.5deg); }
.cr-piece.tilt-5 { transform: rotate(-3deg); }

/* sketch piece — large, holds a hand-drawn garment sketch */
.cr-sketch {
  grid-column: span 6;
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
.cr-sketch svg {
  width: 100%;
  flex: 1;
  display: block;
}
.cr-sketch-caption {
  margin-top: 12px;
  font-family: var(--font-hand);
  color: #4a0e12;
  font-size: 19px;
  text-align: center;
  border-top: 1px dashed rgba(74, 14, 18, 0.3);
  padding-top: 10px;
}

/* swatch card */
.cr-swatches {
  grid-column: span 4;
  padding: 18px 14px 22px;
}
.cr-swatch-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.cr-swatch {
  width: 60px;
  height: 90px;
  position: relative;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(50, 20, 10, 0.2);
}
.cr-swatch::before {
  /* the thread looped through the top corner */
  content: '';
  position: absolute;
  top: -6px;
  left: 8px;
  width: 1px;
  height: 14px;
  background: #4a0e12;
  transform: rotate(8deg);
}
.cr-swatch.s1 {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, transparent 1px, transparent 4px),
    #1a4438;
}
.cr-swatch.s2 {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px),
    #c9a44c;
}
.cr-swatch.s3 {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, transparent 1px, transparent 3px),
    #7a1d22;
}
.cr-swatch.s4 {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 5px),
    #4a0e12;
}
.cr-swatch.s5 {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.12), rgba(0,0,0,0.12) 1px, transparent 1px, transparent 2px),
    #1f0608;
}
.cr-swatch.s6 {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 1px, transparent 1px, transparent 6px),
    #d8ccb3;
}

.cr-swatches h4 {
  font-family: var(--font-hand);
  color: #4a0e12;
  font-size: 22px;
  margin-bottom: 14px;
}
.cr-swatch-label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12px;
  color: #5a2a2a;
  line-height: 1.5;
}

/* pattern piece */
.cr-pattern {
  grid-column: span 4;
  min-height: 280px;
  padding: 24px;
}
.cr-pattern svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* watercolor wash piece */
.cr-wash {
  grid-column: span 6;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.cr-wash svg {
  width: 100%;
  flex: 1;
}
.cr-wash-caption {
  margin-top: 10px;
  font-family: var(--font-hand);
  color: #4a0e12;
  font-size: 18px;
  text-align: center;
  font-style: italic;
}

/* a handwritten note — looks like a piece of torn notebook paper */
.cr-note {
  grid-column: span 4;
  padding: 22px 24px;
  background: #ebe2cf;
  font-family: var(--font-hand);
  color: #2a1010;
  font-size: 21px;
  line-height: 1.4;
  position: relative;
}
.cr-note::after {
  /* torn left edge */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 400' preserveAspectRatio='none'><path d='M8,0 L4,8 L7,18 L3,30 L6,42 L2,54 L7,68 L3,80 L5,92 L2,106 L7,118 L3,132 L6,144 L2,158 L5,170 L3,184 L7,196 L4,210 L6,222 L3,236 L5,250 L2,264 L7,278 L3,290 L6,304 L2,318 L5,332 L3,344 L7,358 L4,370 L6,384 L3,398 L8,400 Z' fill='%23ddd0b2'/></svg>");
  background-size: 100% 100%;
}
.cr-note em {
  color: #7a1d22;
  font-style: normal;
  border-bottom: 1px solid #7a1d22;
}

/* a thread-spool decoration */
.cr-spool {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.cr-spool::before { display: none; }
.cr-spool:hover { transform: rotate(0deg) !important; }
.cr-spool svg {
  width: 100%;
  height: 140px;
}

/* the closing tail — manifesto-like signature */
.cr-tail {
  margin-top: 70px;
  padding-top: 40px;
  border-top: 1px dashed rgba(74, 14, 18, 0.3);
  text-align: center;
}
.cr-tail-text {
  font-family: var(--font-body);
  font-style: italic;
  color: #5a2a2a;
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto 18px;
  line-height: 1.7;
}
.cr-tail-sig {
  font-family: var(--font-hand);
  color: #7a1d22;
  font-size: 24px;
  transform: rotate(-2deg);
  display: inline-block;
}

/* responsive — cutting room collapses */
@media (max-width: 900px) {
  .cutting-room { width: 100vw; }
  .cr-inner { padding: 80px 22px 60px; }
  .cr-board { grid-template-columns: 1fr; gap: 20px; }
  .cr-sketch, .cr-wash, .cr-swatches, .cr-pattern, .cr-note, .cr-spool {
    grid-column: span 1;
  }
  .cr-spool { display: none; }
  .dress-form { display: none; }
}

.rail {
  position: absolute;
  top: 70px;
  left: 8%;
  right: 8%;
  height: 4px;
  background: linear-gradient(180deg, var(--ox-bright) 0%, var(--ox-deep) 50%, var(--ox-deep) 100%);
  box-shadow:
    0 1px 0 var(--ox-flame),
    0 -1px 0 var(--ox),
    0 8px 24px rgba(0,0,0,0.6);
  z-index: 1;
}
.rail::before,
.rail::after {
  content: '';
  position: absolute;
  top: -32px;
  width: 16px;
  height: 60px;
  background: linear-gradient(180deg, var(--ox-deep) 0%, var(--ink) 100%);
  border-radius: 0 0 2px 2px;
  box-shadow: inset 1px 0 0 var(--ox);
}
.rail::before { left: -16px; }
.rail::after  { right: -16px; }

.rack-row {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 50px;
  width: 84%;
  margin: 0 auto;
  z-index: 2;
}

.garment-hanger {
  position: relative;
  cursor: none;
  transform-origin: top center;
  will-change: transform;
  flex: 1;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(var(--sway, 0deg));
}

.hanger-hook {
  width: 22px;
  height: 30px;
  border: 2px solid var(--ox-bright);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  border-left-color: var(--ox);
  border-right-color: var(--ox-deep);
  margin-bottom: -2px;
  position: relative;
  z-index: 4;
}
.hanger-bar {
  width: 140px;
  height: 8px;
  background: linear-gradient(180deg, var(--ox-bright) 0%, var(--ox-deep) 100%);
  border-radius: 4px;
  position: relative;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.garment-body {
  margin-top: -3px;
  position: relative;
  width: 220px;
  height: 360px;
  z-index: 2;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
.garment-body svg {
  width: 100%; height: 100%;
  overflow: visible;
}

.garment-tag {
  position: absolute;
  top: 110px;
  right: -20px;
  width: 70px;
  background: var(--vellum);
  color: var(--charcoal);
  padding: 8px 6px;
  font-family: var(--font-hand);
  font-size: 14px;
  text-align: center;
  z-index: 5;
  transform: rotate(8deg);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  transition: transform 0.4s ease;
}
.garment-tag::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ox);
}
.garment-tag::after {
  content: '';
  position: absolute;
  top: -22px; left: calc(50% - 0.5px);
  width: 1px;
  height: 22px;
  background: var(--bone-dim);
}
.garment-tag .tag-vol {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ox);
  margin-bottom: 2px;
  text-transform: uppercase;
  font-style: italic;
}
.garment-tag .tag-name {
  font-family: var(--font-hand);
  font-size: 16px;
  color: var(--charcoal);
  line-height: 1;
}
.garment-tag .tag-price {
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--ox-deep);
  margin-top: 4px;
  font-style: italic;
}
.garment-hanger:hover .garment-tag {
  transform: rotate(2deg) translateY(2px);
}
.garment-tag.locked {
  background: var(--ink-2);
  color: var(--bone-dim);
  border: 1px dashed var(--ox);
}
.garment-tag.locked .tag-name { color: var(--bone-dim); font-style: italic; }
.garment-tag.locked .tag-vol { color: var(--ox-deep); }

.ink-bleed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,62,67,0.4) 0%, rgba(176,62,67,0.1) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  transition: width 0.8s ease, height 0.8s ease, opacity 0.8s ease;
  opacity: 0;
  filter: blur(8px);
  mix-blend-mode: screen;
}
.garment-hanger:hover .ink-bleed {
  width: 280px;
  height: 280px;
  opacity: 1;
}

.hanger-label {
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-hand);
  color: var(--bone-dim);
  font-size: 16px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s, bottom 0.5s, color 0.5s;
}
.garment-hanger:hover .hanger-label {
  opacity: 1;
  bottom: -50px;
  color: var(--ox-bright);
}

.rack-hint {
  text-align: center;
  margin-top: 80px;
  font-family: var(--font-hand);
  color: var(--ox);
  font-size: 18px;
  opacity: 0.8;
}
.rack-hint::before, .rack-hint::after {
  content: '';
  display: inline-block;
  width: 30px; height: 1px;
  background: var(--ox);
  vertical-align: middle;
  margin: 0 16px;
}

/* TORN PAGE EDGES */
.torn-edge {
  position: relative;
  height: 40px;
  background: var(--ink-2);
}
.torn-edge::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0; right: 0;
  height: 24px;
  background-color: var(--ink);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0,0 L0,12 L24,8 L48,16 L72,6 L96,18 L120,4 L144,14 L168,10 L192,20 L216,7 L240,15 L264,3 L288,18 L312,9 L336,17 L360,6 L384,13 L408,18 L432,8 L456,14 L480,4 L504,16 L528,9 L552,19 L576,6 L600,14 L624,11 L648,18 L672,5 L696,15 L720,9 L744,17 L768,7 L792,14 L816,4 L840,17 L864,10 L888,18 L912,8 L936,15 L960,5 L984,19 L1008,11 L1032,17 L1056,8 L1080,14 L1104,6 L1128,16 L1152,9 L1176,17 L1200,12 L1200,0 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0,0 L0,12 L24,8 L48,16 L72,6 L96,18 L120,4 L144,14 L168,10 L192,20 L216,7 L240,15 L264,3 L288,18 L312,9 L336,17 L360,6 L384,13 L408,18 L432,8 L456,14 L480,4 L504,16 L528,9 L552,19 L576,6 L600,14 L624,11 L648,18 L672,5 L696,15 L720,9 L744,17 L768,7 L792,14 L816,4 L840,17 L864,10 L888,18 L912,8 L936,15 L960,5 L984,19 L1008,11 L1032,17 L1056,8 L1080,14 L1104,6 L1128,16 L1152,9 L1176,17 L1200,12 L1200,0 Z' fill='black'/></svg>");
  mask-size: 100% 100%;
}
.torn-edge.flip::before {
  transform: scaleY(-1);
  top: auto;
  bottom: -1px;
}

/* MANIFESTO */
.manifesto {
  background: var(--ink-2);
  padding: 100px 56px 140px;
  position: relative;
}
.manifesto-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.manifesto-pin {
  position: absolute;
  top: -10px;
  left: -40px;
  width: 60px;
  transform: rotate(-12deg);
}
.manifesto-pin svg { width: 100%; height: auto; }
.manifesto-eyebrow {
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 26px;
  margin-bottom: 6px;
  transform: rotate(-1deg);
  display: inline-block;
}
.manifesto-title {
  font-family: var(--font-display);
  color: var(--bone);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.05;
  margin-bottom: 50px;
}
.manifesto-title .ink-strike {
  position: relative;
  display: inline-block;
}
.manifesto-title .ink-strike::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  top: 56%;
  height: 2px;
  background: var(--ox);
  transform: rotate(-1.5deg);
  opacity: 0.85;
}
.manifesto-body p {
  font-family: var(--font-body);
  color: var(--vellum);
  font-size: 21px;
  line-height: 1.75;
  margin-bottom: 30px;
}
.manifesto-body p strong {
  font-weight: 500;
  color: var(--ox-bright);
  font-style: italic;
}
.manifesto-body p em {
  color: var(--ox-flame);
  font-style: italic;
}
.margin-note {
  position: absolute;
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 18px;
  max-width: 130px;
  line-height: 1.3;
}
.margin-note.m1 { top: 200px; right: -160px; transform: rotate(2deg); }
.margin-note.m1::before { content: '↦ '; color: var(--ox); }
.margin-note.m2 { top: 360px; left: -180px; transform: rotate(-3deg); text-align: right; }
.margin-note.m2::after { content: ' ↤'; color: var(--ox); }
.manifesto-signature {
  margin-top: 40px;
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 26px;
  transform: rotate(-2deg);
  display: inline-block;
}
.manifesto-signature::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: var(--ox);
  margin-top: 6px;
  margin-left: 10px;
}

/* OPEN GARMENT modal */
.open-garment {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(8,4,4,0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.open-garment.open { opacity: 1; visibility: visible; }
.og-close {
  position: absolute;
  top: 28px;
  right: 36px;
  background: transparent;
  border: none;
  color: var(--ox-bright);
  font-family: var(--font-hand);
  font-size: 24px;
  cursor: none;
  z-index: 10;
  padding: 6px 14px;
  transition: color 0.3s;
}
.og-close::before { content: '✕ '; }
.og-close:hover { color: var(--ox-flame); }

.og-display {
  position: relative;
  background: var(--ink-2);
  padding: 80px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.og-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(217,89,79,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.og-garment {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 2;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.7s;
}
.open-garment.open .og-garment {
  transform: scale(1);
  opacity: 1;
}
.og-garment svg { width: 100%; height: auto; overflow: visible; }

.og-notes {
  background: var(--ink);
  padding: 100px 70px;
  overflow-y: auto;
  position: relative;
}
.og-notes::-webkit-scrollbar { width: 0; }

.og-vol {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ox-bright);
  font-size: 13px;
  letter-spacing: 0.3em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.og-name {
  font-family: var(--font-display);
  color: var(--bone);
  font-size: 76px;
  line-height: 0.95;
  margin-bottom: 4px;
}
.og-years {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 17px;
  margin-bottom: 4px;
}
.og-tagline {
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 22px;
  margin-bottom: 32px;
}
.og-intro {
  font-family: var(--font-body);
  color: var(--vellum);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--ox-deep);
}
.og-intro::first-letter {
  font-family: var(--font-display);
  font-size: 56px;
  float: left;
  line-height: 0.9;
  margin: 4px 12px 0 0;
  color: var(--ox-bright);
}
.og-piece-detail { margin-bottom: 24px; }
.og-piece-num {
  font-family: var(--font-body);
  color: var(--ox-bright);
  font-size: 11px;
  letter-spacing: 0.3em;
  margin-bottom: 4px;
  font-style: italic;
  text-transform: uppercase;
}
.og-piece-name {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--bone);
  margin-bottom: 6px;
}
.og-piece-meta {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 14px;
  margin-bottom: 10px;
}
.og-piece-price {
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 18px;
}
.og-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed var(--ox-deep);
}
.og-pager-btn {
  background: transparent;
  border: none;
  color: var(--ox-bright);
  font-family: var(--font-hand);
  font-size: 20px;
  cursor: none;
  padding: 8px 0;
  transition: color 0.3s, transform 0.3s;
}
.og-pager-btn:hover { color: var(--ox-flame); transform: translateX(4px); }
.og-pager-btn.prev:hover { transform: translateX(-4px); }
.og-pager-btn:disabled { color: var(--ox-deep); transform: none; }
.og-pager-count {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 13px;
}
.og-claim {
  display: block;
  width: 100%;
  margin-top: 32px;
  padding: 18px;
  background: var(--ox);
  border: none;
  color: var(--vellum);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.3em;
  cursor: none;
  text-transform: uppercase;
  transition: all 0.4s;
}
.og-claim:hover {
  background: var(--ox-bright);
  letter-spacing: 0.4em;
}

/* CORRESPONDENCE */
.correspondence {
  padding: 140px 56px 100px;
  position: relative;
}
.corr-inner {
  max-width: 640px;
  margin: 0 auto;
}
.corr-eyebrow {
  font-family: var(--font-hand);
  color: var(--ox-bright);
  font-size: 24px;
  margin-bottom: 8px;
  transform: rotate(-1deg);
  display: inline-block;
}
.corr-title {
  font-family: var(--font-display);
  color: var(--bone);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin-bottom: 32px;
}
.corr-body {
  font-family: var(--font-body);
  color: var(--bone);
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 50px;
}
.corr-body em {
  color: var(--ox-bright);
  font-style: italic;
}
.corr-form { display: flex; flex-direction: column; gap: 22px; }
.corr-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ox-deep);
  padding: 14px 0;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--bone);
  font-size: 17px;
  outline: none;
  cursor: none;
  transition: border-color 0.4s;
}
.corr-input::placeholder { color: var(--bone-dim); }
.corr-input:focus { border-color: var(--ox-bright); }
.corr-textarea {
  background: transparent;
  border: 1px dashed var(--ox-deep);
  padding: 18px;
  font-family: var(--font-hand);
  color: var(--bone);
  font-size: 19px;
  outline: none;
  resize: none;
  min-height: 140px;
  transition: border-color 0.4s;
  cursor: none;
  line-height: 1.5;
}
.corr-textarea::placeholder { color: var(--bone-dim); }
.corr-textarea:focus { border-color: var(--ox-bright); border-style: solid; }
.corr-submit {
  background: transparent;
  border: none;
  color: var(--ox-bright);
  font-family: var(--font-hand);
  font-size: 26px;
  cursor: none;
  padding: 14px;
  margin-top: 12px;
  transition: color 0.3s, transform 0.3s;
  text-align: center;
}
.corr-submit::after { content: ' →'; }
.corr-submit:hover { color: var(--ox-flame); transform: translateX(4px); }
.corr-sent {
  margin-top: 16px;
  font-family: var(--font-hand);
  color: var(--ox-flame);
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.6s;
  text-align: center;
}
.corr-foot {
  margin-top: 60px;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--bone-dim);
  font-size: 13px;
  line-height: 1.7;
}
.corr-foot a {
  color: var(--ox-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--ox-deep);
  padding-bottom: 2px;
}

/* COLOPHON */
.colophon {
  padding: 60px 48px 40px;
  border-top: 1px dashed var(--ox-deep);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--bone-dim);
  font-style: italic;
}
.colophon-brand {
  font-family: var(--font-display);
  color: var(--ox-bright);
  font-size: 18px;
  letter-spacing: 0.4em;
  font-style: normal;
  display: flex;
  align-items: baseline;
}
.colophon-brand .flipA {
  display: inline-block;
  transform: rotate(180deg) translateY(-0.04em);
  margin: 0 0.06em;
}

/* RESPONSIVE */
@media (hover: none), (pointer: coarse) {
  body, * { cursor: auto !important; }
  .cursor-needle, #cursorSvg,
  .crown-cursor, .crown-dot { display: none !important; }
}
@media (max-width: 900px) {
  .topbar { padding: 18px 20px; }
  .topbar-nav { display: none; }
  .topbar-mark-tag { display: none; }
  .swinging-A { width: 200px; height: 200px; }
  .A-letter { font-size: 170px; }
  .hero { padding: 100px 0 40px; }
  .rack-container { padding-bottom: 80px; }
  .rack-row { flex-wrap: wrap; gap: 40px; padding: 70px 20px 0; }
  .rail { left: 4%; right: 4%; }
  .garment-hanger { flex: 0 1 45%; max-width: none; }
  .garment-body { width: 140px; height: 240px; }
  .hanger-bar { width: 100px; }
  .garment-tag { width: 56px; font-size: 12px; right: -10px; top: 80px; }
  .manifesto { padding: 80px 20px; }
  .margin-note { display: none; }
  .manifesto-pin { left: -8px; top: -30px; width: 40px; }
  .open-garment { grid-template-columns: 1fr; overflow-y: auto; }
  .og-display { padding: 60px 20px; min-height: 50vh; }
  .og-notes { padding: 60px 24px; }
  .og-name { font-size: 48px; }
  .correspondence { padding: 80px 24px 60px; }
  .colophon { flex-direction: column; gap: 12px; text-align: center; align-items: center; }
}