/* ==========================================================================
   InkMuser — app.css  (v2: bold minimal)
   Layer 1  tokens + reset
   Layer 2  utility subset (kept: the admin panel is built on it)
   Layer 3  design system — the public site
   Layer 4  motion
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Bold minimal: stark paper, near-black ink, one sharp accent. */
  --paper:      #FFFFFF;
  --ink:        #0C0C0C;
  --ink-70:     #4A4A4A;
  --ink-50:     #6E6E6E;
  --wash:       #F4F2EF;
  --line:       #E6E4E1;
  --accent:     #C8351B;
  --accent-dim: #A32A14;

  /* HSL aliases so the existing utility layer (and the admin) still work. */
  --background: 0 0% 100%;
  --foreground: 0 0% 5%;
  --card: 40 14% 98%;
  --primary: 9 76% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 8%;
  --secondary-foreground: 0 0% 100%;
  --accent-h: 9 76% 45%;
  --accent-foreground: 0 0% 100%;
  --muted: 40 10% 96%;
  --muted-foreground: 0 0% 43%;
  --border: 30 8% 89%;
  --destructive: 0 72% 51%;

  --radius: 0px;               /* bold minimal: square corners */
  --radius-soft: 2px;

  --shadow-sm: 0 1px 2px 0 rgb(12 12 12 / .04);
  --shadow-md: 0 10px 30px -10px rgb(12 12 12 / .12);
  --shadow-lg: 0 30px 60px -20px rgb(12 12 12 / .18);

  --fast: 180ms;
  --normal: 420ms;
  --slow: 900ms;
  --ease: cubic-bezier(.22, 1, .36, 1);       /* expo-out */
  --ease-io: cubic-bezier(.65, .05, .36, 1);

  --font-display: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 90rem;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

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

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: 1; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); }

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--wash); }
::-webkit-scrollbar-thumb { background: var(--ink); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 1rem 1.5rem;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. Typography ------------------------------------------------------ */

.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
h1, h2, h3    { font-family: var(--font-display); }

/* Display scale — fluid, set tight, bold minimal. */
.d1 { font-family: var(--font-display); font-size: clamp(3.25rem, 11vw, 11rem); line-height: .92; letter-spacing: -.03em; }
.d2 { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 6rem);    line-height: .96; letter-spacing: -.025em; }
.d3 { font-family: var(--font-display); font-size: clamp(1.85rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -.02em; }
.d4 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 2rem);  line-height: 1.12; letter-spacing: -.015em; }
.d-italic { font-style: italic; }

/* Small uppercase label — the connective tissue of the whole design. */
.eyebrow {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.eyebrow-accent { color: var(--accent); }
.eyebrow .num { color: var(--accent); margin-right: .6em; font-variant-numeric: tabular-nums; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 44ch;
}

.meta { font-size: .8125rem; color: var(--ink-50); }
.meta-sep { margin: 0 .6em; opacity: .45; }

/* Link with an accent underline that sweeps in on hover. */
.link-sweep {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-sweep::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--normal) var(--ease);
}
.link-sweep:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- 4. Layout primitives ---------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 56rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-read { width: 100%; max-width: 42rem; margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(4.5rem, 11vw, 10rem); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Full-bleed inverted block */
.invert { background: var(--ink); color: var(--paper); }
.invert .eyebrow { color: rgb(255 255 255 / .55); }
.invert .lede { color: rgb(255 255 255 / .72); }
.invert .rule { background: rgb(255 255 255 / .16); }
.invert .meta { color: rgb(255 255 255 / .55); }

.wash { background: var(--wash); }

.rule { height: 1px; background: var(--line); width: 100%; }

/* Section header: number + title + hairline, the repeating motif */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.invert .sec-head { border-color: rgb(255 255 255 / .16); }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1.125rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--normal) var(--ease), border-color var(--normal) var(--ease);
}
/* Fill sweeps up from the bottom on hover. */
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--normal) var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: #fff; border-color: var(--accent); }
.btn svg { transition: transform var(--normal) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { color: #fff; }
/* On any dark ground the ghost button must flip to light, or it renders
   near-black on near-black and disappears. */
.invert .btn-ghost,
.hero .btn-ghost,
.site-footer .btn-ghost { --btn-fg: var(--paper); border-color: rgb(255 255 255 / .45); }
.btn-accent { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn-accent::before { background: var(--ink); }
.btn-sm { padding: .8125rem 1.375rem; font-size: .75rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- 6. Header ---------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgb(255 255 255 / .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform var(--normal) var(--ease), background var(--normal);
}
.site-header[data-hidden="true"] { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 5.25rem; gap: 2rem; }

/* Supplied logo lockup. Sized by height so the wide 2.5:1 artwork never
   dictates the header height; width follows automatically. */
.logo { display: block; flex-shrink: 0; }
.logo img {
  height: 3.25rem;
  width: auto;
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.logo:hover img { opacity: .78; transform: translateY(-1px); }

/* Reversed lockup inside the dark full-screen menu. */
.nav-overlay-logo { height: 3.25rem; width: auto; margin-bottom: 2.5rem; }

/* Reversed lockup closing the footer, in place of the old text watermark. */
.footer-logo img { width: min(100%, 30rem); height: auto; opacity: .92; }

@media (min-width: 900px) {
  .logo img { height: 4rem; }
  .header-inner { height: 6rem; }
  .footer-logo img { width: min(100%, 38rem); }
}

.nav-desktop { display: none; align-items: center; gap: 2rem; }
.nav-link {
  position: relative;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--ink-70);
  padding-block: .25rem;
  transition: color var(--fast);
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--normal) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current] { color: var(--ink); }
.nav-link[aria-current]::after { transform: scaleX(1); }
.nav-badge {
  font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-left: .4em; vertical-align: super;
}

/* Hamburger */
.nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: .5rem; margin-right: -.5rem; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform var(--normal) var(--ease), opacity var(--fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen overlay menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--slow) var(--ease);
  overflow-y: auto;
}
.nav-overlay[data-open="true"] { clip-path: inset(0 0 0 0); }
.nav-overlay[hidden] { display: none; }
.nav-overlay-link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  padding-block: .1em;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease), color var(--fast);
}
.nav-overlay[data-open="true"] .nav-overlay-link { opacity: 1; transform: none; transition-delay: calc(60ms * var(--i, 0) + 120ms); }
.nav-overlay-link:hover { color: var(--accent); }
.nav-overlay-link .idx { font-family: var(--font-sans); font-size: .625rem; letter-spacing: .18em; color: var(--accent); vertical-align: super; margin-right: .75rem; }

/* --- 7. Hero ------------------------------------------------------------ */

.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img,
.hero-media video { width: 100%; height: 120%; object-fit: cover; opacity: .38; will-change: transform; }
/* The video is the feature on the home page, so it carries a little more
   presence than a still would. The gradient below still guarantees contrast. */
.hero-media .hero-video { opacity: .66; }
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  /* Heavier at the top (behind the eyebrow) and bottom (behind the buttons and
     scroll cue), lighter through the middle so the footage is actually visible. */
  background: linear-gradient(180deg, rgb(12 12 12 / .62) 0%, rgb(12 12 12 / .26) 42%, rgb(12 12 12 / .40) 68%, rgb(12 12 12 / .94) 100%);
}
.hero-inner { position: relative; z-index: 1; padding-block: clamp(7rem, 20vh, 13rem) clamp(3rem, 7vh, 5rem); }
.hero-title { color: #fff; }
.hero-title .accent-dot { color: var(--accent); }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Scroll cue */
.scroll-cue { display: inline-flex; align-items: center; gap: .75rem; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.scroll-cue i { display: block; width: 1px; height: 42px; background: rgb(255 255 255 / .25); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; inset: 0; background: var(--accent); animation: cue 2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* --- 8. Marquee --------------------------------------------------------- */

.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.5rem; white-space: nowrap; }
.invert .marquee, .marquee.invert { border-color: rgb(255 255 255 / .16); }
.marquee-track { display: inline-flex; gap: 3rem; animation: marquee 38s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 2rem); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 3rem; }
.marquee-item::after { content: '—'; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- 9. Cards and tiles ------------------------------------------------- */

/* No card chrome: the image sits on the page and the text aligns to its
   left edge. A background here would need padding and turns the tile
   into a box, which is the opposite of the intent. */
.tile { position: relative; display: block; overflow: hidden; background: transparent; }
.tile-media { position: relative; overflow: hidden; background: var(--ink); }
.tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity var(--normal);
  will-change: transform;
}
.tile:hover .tile-media img { transform: scale(1.05); }
.tile-body { padding: 1.75rem 0 0; }
.tile-title { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.875rem); line-height: 1.1; letter-spacing: -.015em; transition: color var(--fast); }
.tile:hover .tile-title { color: var(--accent); }
.tile-desc { margin-top: .625rem; color: var(--ink-50); font-size: .9375rem; line-height: 1.6; }
.invert .tile { background: transparent; }
.invert .tile-desc { color: rgb(255 255 255 / .6); }

/* Expandable long descriptions. The shop owner writes these herself and one of
   them is a full terms-of-service document, so the tile shows an excerpt and
   keeps the rest behind this. Capped in height and scrollable once open, so a
   very long entry cannot push the rest of the grid off the page again. */
.tile-more { margin-top: .75rem; }
.tile-more > summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.tile-more > summary::-webkit-details-marker { display: none; }
.tile-more > summary:hover { opacity: .75; }
.tile-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tile-more[open] > summary { margin-bottom: .75rem; }
.tile-more-body {
  max-height: 22rem; overflow-y: auto;
  color: var(--ink-50); font-size: .875rem; line-height: 1.65;
  padding-right: .5rem;
}
.tile-more-body p { margin: 0 0 .7em; }
.tile-more-body p:last-child { margin-bottom: 0; }
.invert .tile-more-body { color: rgb(255 255 255 / .6); }

.ratio { position: relative; width: 100%; }
.ratio > img, .ratio > .ratio-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-32  { aspect-ratio: 3 / 2; }
.r-43  { aspect-ratio: 4 / 3; }
.r-34  { aspect-ratio: 3 / 4; }
.r-11  { aspect-ratio: 1 / 1; }
.r-169 { aspect-ratio: 16 / 9; }
.r-21  { aspect-ratio: 2 / 1; }
.object-face { object-position: center 24%; }

/* Index list — big numbered rows, the bold-minimal listing pattern */
.index-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left var(--normal) var(--ease);
}
.index-row:first-child { border-top: 1px solid var(--line); }
.index-row:hover { padding-left: 1rem; }
.index-row .idx { font-size: .6875rem; letter-spacing: .16em; color: var(--accent); font-variant-numeric: tabular-nums; }
.index-row-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.75rem); line-height: 1.05; letter-spacing: -.02em; transition: color var(--fast); }
.index-row:hover .index-row-title { color: var(--accent); }
.index-row-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }

/* Hover preview image that follows the cursor on index rows */
.hover-peek {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 260px; aspect-ratio: 3 / 4;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.92);
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
  overflow: hidden;
}
.hover-peek img { width: 100%; height: 100%; object-fit: cover; }
.hover-peek[data-show="true"] { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Stat block */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
.stat-num { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.03em; }
.stat-num .suffix { color: var(--accent); }
.stat-label { margin-top: .5rem; }

/* Chips */
.chip {
  display: inline-flex; align-items: center;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  font-size: .75rem; letter-spacing: .06em;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.chip:hover { border-color: var(--ink); }
.invert .chip { border-color: rgb(255 255 255 / .22); }

/* Filter bar */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filter {
  padding: .625rem 1.125rem;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-50);
  transition: all var(--fast);
  white-space: nowrap;
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- 10. Long-form reading --------------------------------------------- */

.prose-story { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.85; }
.prose-story p { margin-bottom: 1.55em; }
.prose-story p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.4em; float: left; line-height: .78;
  margin: .04em .12em 0 0; color: var(--accent);
}
.prose-story em { font-style: italic; color: var(--ink-70); }
.prose-story blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.75em; margin: 2.25em 0;
  font-family: var(--font-display); font-size: 1.35em; line-height: 1.4; font-style: italic;
}
.prose-story h2, .prose-story h3 { font-family: var(--font-display); margin: 1.8em 0 .6em; }

.prose-copy p { margin-bottom: 1.05em; line-height: 1.75; color: var(--ink-70); }
.prose-copy p:last-child { margin-bottom: 0; }
.prose-copy ul { list-style: none; margin-bottom: 1.05em; }
.prose-copy li { position: relative; padding-left: 1.5rem; margin-bottom: .5em; color: var(--ink-70); line-height: 1.7; }
.prose-copy li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--accent); }
.prose-copy a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.invert .prose-copy p, .invert .prose-copy li { color: rgb(255 255 255 / .72); }

/* Reading progress bar */
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); z-index: 95; width: 0; }

/* Accordion (world sections, spoilers) */
.acc { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.75rem; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover .acc-title { color: var(--accent); }
.acc-title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.875rem); letter-spacing: -.015em; transition: color var(--fast); }
.acc-sign { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.acc-sign::before, .acc-sign::after { content: ''; position: absolute; background: var(--ink); transition: transform var(--normal) var(--ease); }
.acc-sign::before { left: 0; top: 6.5px; width: 14px; height: 1px; }
.acc-sign::after  { left: 6.5px; top: 0; width: 1px; height: 14px; }
.acc[open] .acc-sign::after { transform: rotate(90deg); opacity: 0; }
.acc-body { padding-bottom: 2rem; max-width: 46rem; }
.acc[open] .acc-body { animation: accIn var(--normal) var(--ease) both; }
@keyframes accIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- 11. Forms ---------------------------------------------------------- */

.field {
  width: 100%;
  padding: 1rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  font-size: 1rem;
  transition: border-color var(--fast);
}
.field:focus { outline: none; border-bottom-color: var(--accent); }
.field::placeholder { color: var(--ink-50); }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center;
  padding-right: 2rem; border-radius: 0;
}
textarea.field { resize: vertical; }
.field-label { display: block; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); margin-bottom: .25rem; }
.invert .field { border-bottom-color: rgb(255 255 255 / .25); color: #fff; }
.invert .field::placeholder { color: rgb(255 255 255 / .4); }
.invert .field-label { color: rgb(255 255 255 / .5); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.check { display: flex; align-items: flex-start; gap: .875rem; font-size: .875rem; color: var(--ink-50); cursor: pointer; }
.check input { margin-top: .3rem; accent-color: var(--accent); flex-shrink: 0; }
.invert .check { color: rgb(255 255 255 / .6); }

.alert { padding: 1.125rem 1.375rem; font-size: .875rem; border-left: 2px solid; }
.alert-success { border-color: var(--accent); background: var(--wash); }
.alert-error { border-color: var(--destructive-c, #DC3030); background: #FDF3F2; color: #8A1F14; }
.invert .alert-success { background: rgb(255 255 255 / .08); color: #fff; }

/* --- 12. Lightbox ------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgb(8 8 8 / .97);
  display: none; align-items: center; justify-content: center;
  padding: 4rem 1.5rem 6rem;
}
.lightbox[data-open="true"] { display: flex; animation: fadeIn var(--normal) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: min(100%, 1200px); max-height: 78vh; object-fit: contain; }
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem var(--gutter); text-align: center; color: #fff; }
.lightbox-btn {
  position: absolute; color: #fff; padding: 1rem;
  border: 1px solid rgb(255 255 255 / .2);
  transition: background var(--fast), border-color var(--fast);
}
.lightbox-btn:hover { background: var(--accent); border-color: var(--accent); }
.lightbox-close { top: 1.5rem; right: var(--gutter); }
.lightbox-prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--gutter); top: 50%; transform: translateY(-50%); }

/* --- 13. Footer --------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--paper); padding-block: clamp(4rem, 8vw, 7rem) 2.5rem; }
.footer-col-title { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .45); margin-bottom: 1.25rem; }
.footer-link { display: block; padding-block: .3125rem; color: rgb(255 255 255 / .78); font-size: .9375rem; transition: color var(--fast), transform var(--fast); }
.footer-link:hover { color: var(--accent); transform: translateX(4px); }
.footer-bottom { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / .14); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: .75rem; color: rgb(255 255 255 / .45); }

/* --- 14. Motion --------------------------------------------------------- */

/* Scroll reveal.
   The hidden state is gated behind .js (set by an inline script in <head>), so
   if JavaScript fails or is blocked the content is simply visible rather than
   permanently clipped out of the page. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: calc(55ms * var(--i, 0));
}

/* Masked line reveal for display type */
[data-mask] { display: block; overflow: hidden; }
[data-mask] > * { display: block; }
.js [data-mask] > * { transform: translateY(105%); }
.js [data-mask].is-in > * {
  transform: none;
  transition: transform 780ms var(--ease);
  transition-delay: calc(55ms * var(--i, 0));
}

/* Image clip reveal */
.js [data-clip] { clip-path: inset(0 0 100% 0); }
.js [data-clip].is-in { clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--ease); transition-delay: calc(55ms * var(--i, 0)); }

/* Page transition curtain */
.curtain { position: fixed; inset: 0; z-index: 150; background: var(--ink); transform: translateY(100%); pointer-events: none; }
.curtain[data-state="in"] { transform: translateY(0); transition: transform .5s var(--ease); }
.curtain[data-state="out"] { transform: translateY(-100%); transition: transform .5s var(--ease); }

/* Magnetic button wrapper */
.magnetic { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], [data-mask] > *, [data-clip] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee-track { animation: none; }
  .hover-peek { display: none; }
  /* JS pauses the video too; this keeps the poster frame showing. */
  .hero-video { opacity: .42; }
}

/* --- 15. Responsive ----------------------------------------------------- */

.grid { display: grid; }
.g-2 { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.g-3 { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.g-4 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.g-gallery { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split-top { align-items: start; }

@media (min-width: 640px) {
  .g-gallery { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
  .g-gallery { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split-40 { grid-template-columns: 2fr 3fr; }
  .split-60 { grid-template-columns: 3fr 2fr; }
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .index-row { grid-template-columns: auto 1fr auto; }
  .index-row [data-desk] { display: inline-flex !important; align-items: center; gap: .5rem; opacity: 0; transform: translateX(-8px); transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease); }
  .index-row:hover [data-desk] { opacity: 1; transform: none; }
  .sec-head { grid-template-columns: auto 1fr; align-items: end; }
}

/* --- 16. Utility subset (kept — the admin panel is built on it) --------- */

.block { display: block; } .inline-flex { display: inline-flex; } .flex { display: flex; }
.hidden { display: none; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; } .flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; }
.inset-0 { inset: 0; } .top-0 { top: 0; } .z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; }
.scrollbar-none { scrollbar-width: none; } .scrollbar-none::-webkit-scrollbar { display: none; }
.min-h-screen { min-height: 100vh; } .min-w-0 { min-width: 0; } .w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; } .ml-auto { margin-left: auto; }
.max-w-sm { max-width: 24rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-6xl { max-width: 72rem; }
.w-3 { width: .75rem; } .h-3 { height: .75rem; } .w-3\.5 { width: .875rem; } .h-3\.5 { height: .875rem; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; } .w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; } .w-8 { width: 2rem; } .h-8 { height: 2rem; }
.w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; } .w-12 { width: 3rem; } .h-12 { height: 3rem; }
.w-16 { width: 4rem; } .h-16 { height: 4rem; } .h-64 { height: 16rem; }
.aspect-\[2\/1\] { aspect-ratio: 2/1; } .aspect-\[3\/2\] { aspect-ratio: 3/2; }
.aspect-\[3\/4\] { aspect-ratio: 3/4; } .aspect-\[4\/3\] { aspect-ratio: 4/3; }
.gap-1 { gap: .25rem; } .gap-1\.5 { gap: .375rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-12 { gap: 3rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; }
.mb-1 { margin-bottom: .25rem; } .mb-1\.5 { margin-bottom: .375rem; } .mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.ml-1\.5 { margin-left: .375rem; } .mx-1 { margin-inline: .25rem; }
.p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .pb-6 { padding-bottom: 1.5rem; } .pl-5 { padding-left: 1.25rem; }
.pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; }
.px-1\.5 { padding-inline: .375rem; } .px-2 { padding-inline: .5rem; } .px-2\.5 { padding-inline: .625rem; }
.px-3 { padding-inline: .75rem; } .px-4 { padding-inline: 1rem; } .px-5 { padding-inline: 1.25rem; } .px-6 { padding-inline: 1.5rem; }
.py-0\.5 { padding-block: .125rem; } .py-1 { padding-block: .25rem; } .py-1\.5 { padding-block: .375rem; }
.py-2 { padding-block: .5rem; } .py-2\.5 { padding-block: .625rem; } .py-3 { padding-block: .75rem; }
.py-4 { padding-block: 1rem; } .py-12 { padding-block: 3rem; } .py-16 { padding-block: 4rem; }
.py-20 { padding-block: 5rem; } .py-24 { padding-block: 6rem; }
.space-y-1 > * + * { margin-top: .25rem; } .space-y-2 > * + * { margin-top: .5rem; }
.space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; } .space-y-12 > * + * { margin-top: 3rem; }
.text-\[10px\] { font-size: 10px; } .text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 3rem; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.italic { font-style: italic; } .uppercase { text-transform: uppercase; }
.text-center { text-align: center; } .text-left { text-align: left; }
.tracking-tight { letter-spacing: -.025em; } .tracking-wider { letter-spacing: .05em; } .tracking-widest { letter-spacing: .1em; }
.leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; }
.whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; }
.line-clamp-1, .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-2 { -webkit-line-clamp: 2; }
.list-disc { list-style: disc; }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-muted-foreground\/30 { color: hsl(var(--muted-foreground) / .3); }
.text-primary { color: hsl(var(--primary)); } .text-primary\/80 { color: hsl(var(--primary) / .8); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary { color: hsl(var(--secondary)); } .text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-accent { color: var(--accent); } .text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.bg-background { background: hsl(var(--background)); } .bg-background\/80 { background: hsl(var(--background) / .8); }
.bg-card { background: hsl(var(--card)); } .bg-card\/50 { background: hsl(var(--card) / .5); }
.bg-muted { background: hsl(var(--muted)); } .bg-muted\/50 { background: hsl(var(--muted) / .5); }
.bg-primary { background: hsl(var(--primary)); } .bg-primary\/5 { background: hsl(var(--primary) / .05); }
.bg-primary\/10 { background: hsl(var(--primary) / .1); }
.bg-secondary { background: hsl(var(--secondary)); } .bg-secondary\/20 { background: hsl(var(--secondary) / .2); }
.bg-accent\/20 { background: hsl(var(--accent-h) / .2); }
.bg-foreground\/\[0\.02\] { background: hsl(var(--foreground) / .02); }
.object-cover { object-fit: cover; } .bg-cover { background-size: cover; } .bg-center { background-position: center; }
.border { border: 1px solid hsl(var(--border)); } .border-t { border-top: 1px solid hsl(var(--border)); }
.border-b { border-bottom: 1px solid hsl(var(--border)); }
.border-border\/40 { border-color: hsl(var(--border) / .4); } .border-foreground\/20 { border-color: hsl(var(--foreground) / .2); }
.border-primary\/10 { border-color: hsl(var(--primary) / .1); }
.rounded { border-radius: 2px; } .rounded-md { border-radius: 2px; } .rounded-lg { border-radius: 2px; } .rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: var(--shadow-sm); } .hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.rotate-180 { transform: rotate(180deg); } .resize-y { resize: vertical; }
.transition-colors { transition: color var(--fast), background-color var(--fast), border-color var(--fast); }
.transition-shadow { transition: box-shadow var(--normal); } .transition-transform { transition: transform var(--normal); }
.duration-500 { transition-duration: 500ms; }
.hover\:bg-foreground\/5:hover { background: hsl(var(--foreground) / .05); }
.hover\:bg-muted\/30:hover { background: hsl(var(--muted) / .3); }
.hover\:bg-muted\/50:hover { background: hsl(var(--muted) / .5); }
.hover\:bg-primary\/90:hover { background: hsl(var(--primary) / .9); }
.hover\:bg-secondary\/90:hover { background: hsl(var(--secondary) / .9); }
.hover\:text-foreground:hover { color: hsl(var(--foreground)); }
.hover\:text-primary:hover { color: hsl(var(--primary)); }
.hover\:text-secondary\/80:hover { color: hsl(var(--secondary) / .8); }
.hover\:underline:hover { text-decoration: underline; }
.group:hover .group-hover\:scale-\[1\.02\] { transform: scale(1.02); }
.group:hover .group-hover\:text-primary { color: hsl(var(--primary)); }
.focus\:outline-none:focus { outline: none; }
.disabled\:opacity-50:disabled { opacity: .5; }
.placeholder\:text-muted-foreground::placeholder { color: hsl(var(--muted-foreground)); }
.md\:col-span-1 { grid-column: span 1; } .md\:col-span-2 { grid-column: span 1; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-lg { font-size: 1.125rem; } .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-4xl { font-size: 2.25rem; } .sm\:text-5xl { font-size: 3rem; } .sm\:text-6xl { font-size: 3.75rem; }
  .sm\:py-16 { padding-block: 4rem; } .sm\:py-20 { padding-block: 5rem; } .sm\:py-24 { padding-block: 6rem; }
  .sm\:px-6 { padding-inline: 1.5rem; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex; } .lg\:hidden { display: none; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:px-8 { padding-inline: 2rem; }
}

@media print {
  .site-header, .site-footer, .no-print, .marquee { display: none !important; }
  body { background: #fff; }
  [data-reveal], [data-mask] > *, [data-clip] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Shop offerings — the blurb and price added when the cards became editable
   at /admin/offerings. Both are optional, so neither may assume the other. */
.index-row-blurb {
  margin: .35rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-60, rgb(0 0 0 / .6));
  max-width: 52ch;
}
.offering-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 600;
}