/* ═══════════════════════════════════════════════════════════════════════
   revealed.design — shared stylesheet
   Brand palette: Graphite #2C2C2C · Bitossi #1E5FA8 · Flame #E8460A · Cream #F5F0E8
   Type: Gill Sans MT (display/body) · Inconsolata (@ and . only)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FONTS ──────────────────────────────────────────────────────────────
   Gill Sans MT Pro — Monotype webfont license (21 styles purchased;
   wiring 10 ladder cuts + 1 shadowed display cut here).
   Family 'GillSansMT' kept as the canonical CSS name so prior
   font-family declarations across the site continue to resolve.
   Weight mapping:  300 Light · 400 Book · 500 Medium · 700 Bold · 800 Heavy
   ─────────────────────────────────────────────────────────────────────── */

/* 300 — Light */
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-Light.5d7e5950.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Light.2b898c5f.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-LightItalic.eafa90ec.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-LightItalic.e6791170.woff')  format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* 400 — Book (Regular) */
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-Book.cb4b69fc.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Book.a4fcd567.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-BookItalic.a8e26515.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-BookItalic.2992d7e5.woff')  format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 500 — Medium */
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-Medium.fad4b062.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Medium.cf9f7d35.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-MediumItalic.31a5daad.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-MediumItalic.5a0885f1.woff')  format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* 700 — Bold */
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-Bold.1733d8c0.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Bold.f7a5613e.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-BoldItalic.23114d06.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-BoldItalic.730a3b55.woff')  format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* 800 — Heavy */
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-Heavy.11df5339.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Heavy.46ea9f54.woff')  format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/gill-sans-mt/GillSansMT-HeavyItalic.1f7b3041.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-HeavyItalic.deadab5c.woff')  format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Shadowed display cut — used by the COLLECTION title */
@font-face {
  font-family: 'GillSansMTShadowed';
  src: url('../fonts/gill-sans-mt/GillSansMT-Shadowed.9cf8de57.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Shadowed.ab869866.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Rare Gill cuts (the "rare pokemon" set) ────────────────────────────
   Each is its own named family because weight/style/stretch can't cleanly
   encode all of them (Display vs. non-Display especially). The screensaver
   rolls these at low probability to keep them precious — no single cut
   should ever tile the field. Site pages can opt in by declaring the
   family explicitly. ───────────────────────────────────────────────── */
@font-face {
  font-family: 'GillSansMTLightShadowed';
  src: url('../fonts/gill-sans-mt/GillSansMT-LightShadowed.7e20d584.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-LightShadowed.b1cc9cf1.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTUltraBold';
  src: url('../fonts/gill-sans-mt/GillSansMT-UltraBold.0f0b9b87.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-UltraBold.afd9ef85.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTExtraBold';
  src: url('../fonts/gill-sans-mt/GillSansMT-ExtraBold.0b538c00.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-ExtraBold.bcca7160.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTCondensed';
  src: url('../fonts/gill-sans-mt/GillSansMT-Condensed.45fb5d57.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Condensed.3335483a.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTBoldCondensed';
  src: url('../fonts/gill-sans-mt/GillSansMT-BoldCondensed.bc80e43b.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-BoldCondensed.fc0e84e9.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTBoldExtraCondensed';
  src: url('../fonts/gill-sans-mt/GillSansMT-BoldExtraCondensed.17b0d781.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-BoldExtraCondensed.0a1af56e.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTUltraBoldCondensed';
  src: url('../fonts/gill-sans-mt/GillSansMT-UltraBoldCondensed.02cd8305.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-UltraBoldCondensed.0c7cff7e.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTDisplayBold';
  src: url('../fonts/gill-sans-mt/GillSansMT-DisplayBold.96fab882.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-DisplayBold.8f8a8918.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTDisplayBoldCondensed';
  src: url('../fonts/gill-sans-mt/GillSansMT-DisplayBoldCondensed.8897c665.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-DisplayBoldCondensed.afa5c5f5.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSansMTDisplayExtraBold';
  src: url('../fonts/gill-sans-mt/GillSansMT-DisplayExtraBold.9521cac1.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-DisplayExtraBold.c6129f3f.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Inconsolata — @ and . symbols, monospace labels */
@font-face {
  font-family: 'Inconsolata';
  src: url('../fonts/Inconsolata-subset.17346165.woff2') format('woff2'),
       url('../fonts/Inconsolata-VariableFont_wdth_wght.1701badf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── RESET ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: 'GillSansMT', 'Gill Sans MT', sans-serif;
  color: #2C2C2C;
  background: #F5F0E8;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── CUSTOM CURSOR — arc + iris ──────────────────────────────────────── */
/* Default: graphite arc, flame iris. Hotspot on iris center (18,14 at 32px) */
*, *::before, *::after {
  cursor: url('../assets/cursor_default_32.19ff9c73.png') 18 14, auto;
}
/* Hover / interactive: iris swells */
a, button, [role="button"], label, select, summary,
input[type="submit"], input[type="button"], .clickable {
  cursor: url('../assets/cursor_hover_32.c6d560bd.png') 18 14, pointer;
}
/* Dark backgrounds: cream arc so it reads */
.bg-graphite *, .bg-graphite,
.site-footer *, .site-footer,
.site-nav *, .site-nav {
  cursor: url('../assets/cursor_light_32.17939775.png') 18 14, auto;
}
.bg-graphite a, .bg-graphite button, .bg-graphite [role="button"],
.site-footer a, .site-footer button,
.site-nav a, .site-nav button {
  cursor: url('../assets/cursor_hover_light_32.2c1fd3ba.png') 18 14, pointer;
}

/* 15s idle SAL-eye cursor — rule is injected at runtime by
   js/idle-cursor.js so the feature ships without needing a
   build.js rebuild of styles.css. See that file for the rule. */

::selection {
  background: #1E5FA8;
  color: #F5F0E8;
}

/* ── COLOUR UTILITIES ─────────────────────────────────────────────────── */
.bg-graphite { background: #2C2C2C; }
.bg-cream    { background: #F5F0E8; }
.bg-bitossi  { background: #1E5FA8; }
.bg-flame    { background: #E8460A; }

.text-graphite { color: #2C2C2C; }
.text-cream    { color: #F5F0E8; }
.text-bitossi  { color: #1E5FA8; }
.text-flame    { color: #E8460A; }

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
.gill { font-family: 'GillSansMT', 'Gill Sans MT', sans-serif; }
.mono { font-family: 'Inconsolata', monospace; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.8rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1rem, 2vw, 1.4rem); }

.label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
}

.body-text {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.72;
  max-width: 540px;
}

.pull-quote {
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: rgba(45,45,45,0.7);
  max-width: 620px;
}

/* ── WORDMARK ─────────────────────────────────────────────────────────── */
.wordmark {
  font-family: 'GillSansMT', 'Gill Sans MT', sans-serif;
  letter-spacing: 0.04em;
  color: #F5F0E8;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .dot {
  font-family: 'Inconsolata', monospace;
  color: #E8460A;
  font-size: 125%;
  margin: 0 -1px;
  position: relative;
  top: 1px;
}
.wordmark--dark { color: #2C2C2C; }
.wordmark--dark .dot { color: #E8460A; }

/* ── SITE NAV ─────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* max(48px, env(safe-area-inset-*)) — on notched iPhones in
     landscape, the Dynamic Island / notch cuts into the viewport
     edges. Without safe-area insets here, the wordmark on the
     left and the menu toggle on the right get partially hidden
     behind the notch / rounded corners. max() keeps the desktop
     48px when insets are 0 (non-notched devices, desktop, portrait
     iPhones) and bumps to whatever the notch demands on landscape. */
  padding: 0 max(48px, env(safe-area-inset-right)) 0 max(48px, env(safe-area-inset-left));
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(45,45,45,0.97);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.site-nav--scrolled {
  background: rgba(45,45,45,0.97);
  box-shadow: 0 1px 0 rgba(45,45,45,0.18);
}

/* Chameleon nav — cream mode over light sections */
.site-nav--cream {
  background: rgba(245,240,232,0.97) !important;
  box-shadow: 0 1px 0 rgba(45,45,45,0.06);
}
.site-nav--cream .site-nav__logo { color: #2C2C2C; }
.site-nav--cream .site-nav__links a { color: rgba(45,45,45,0.45); }
.site-nav--cream .site-nav__links a:hover,
.site-nav--cream .site-nav__links a.active { color: #2C2C2C; }
.site-nav--cream .nav-toggle span { background: #2C2C2C; }

.site-nav__logo {
  font-size: 15px;
  display: flex;
  align-items: baseline;
  color: #F5F0E8;
  text-decoration: none;
}
.site-nav__logo .dot {
  font-family: 'Inconsolata', monospace;
  color: #E8460A;
  font-size: calc(15px * 1.25);
  margin: 0 -1px;
  position: relative;
  top: 1px;
  /* breathe animation driven by nav.js setInterval */
}

.site-nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.site-nav__links a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  transition: color 0.2s ease;
  position: relative;
}
.site-nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #1E5FA8;
  transition: width 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.site-nav__links a:hover::after,
.site-nav__links a:active::after,
.site-nav__links a.active::after {
  width: 100%;
}
.site-nav__links a:hover,
.site-nav__links a:active {
  color: #F5F0E8;
  animation: navZPulse 4s ease-in-out infinite;
}
.site-nav__links a.active {
  color: #F5F0E8;
}

@keyframes navZPulse {
  0%, 100% { font-size: 12px; letter-spacing: 0.1em; }
  50%      { font-size: 14.5px; letter-spacing: 0.12em; }
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  width: 24px; /* icon stays 24px inside 44px target */
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #F5F0E8;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 700px) {
  .site-nav {
    padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
    height: 56px;
  }
  .nav-toggle { display: flex; }
  .site-nav__links {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    background: rgba(45,45,45,0.98);
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .site-nav__links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── PAGE WRAPPER (accounts for fixed nav) ─────────────────────────── */
.page { padding-top: 64px; }
@media (max-width: 700px) { .page { padding-top: 56px; } }

/* ── SECTION LAYOUTS ─────────────────────────────────────────────────── */
.section {
  padding: 80px 48px;
}
.section--tight { padding: 48px 48px; }
.section--full {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

@media (max-width: 700px) {
  .section { padding: 48px 24px; }
  .section--tight { padding: 32px 24px; }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: 1fr; gap: 32px; }
}

/* ── DIVIDER ─────────────────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: rgba(45,45,45,0.1);
}
.divider--light { background: rgba(245,240,232,0.12); }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.site-footer {
  background: #2C2C2C;
  color: rgba(245,240,232,0.4);
  /* safe-area insets on all four sides of the side+bottom padding
     so the home indicator on iPhone portrait doesn't overlap the
     copy, and the notch on iPhone landscape doesn't chew into the
     left/right margins. max() preserves desktop dimensions when
     insets are 0 (non-notched devices). */
  padding: 56px
           max(48px, env(safe-area-inset-right))
           max(40px, env(safe-area-inset-bottom))
           max(48px, env(safe-area-inset-left));
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.site-footer__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__logo {
  font-size: 15px;
  color: #F5F0E8;
}

.site-footer__tagline {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.site-footer__email {
  font-size: 13px;
  color: #1E5FA8;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.site-footer__email:hover,
.site-footer__email:active {
  color: #1E5FA8;
  text-shadow: 0 0 10px rgba(30,95,168,0.25);
}
.site-footer__email .at {
  font-family: 'Inconsolata', monospace;
  font-size: 90%;
  margin: 0 2px; /* brand manual: match n@r to d.d rhythm */
  color: #E8460A;
}
.site-footer__email .edot {
  font-family: 'Inconsolata', monospace;
  font-size: 125%;
  margin: 0 -1px; /* brand manual: match n@r to d.d rhythm */
  position: relative;
  top: 1px;
  color: #E8460A;
}

.site-footer__copy {
  font-size: 10px;
  letter-spacing: 0.06em;
}
.site-footer__colophon {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(245,240,232,0.35);
  margin-top: 4px;
}
/* Colophon link (site-wide footer) — subtle lift on hover,
   matching .page-colophon a.colophon-link on contact.html so the
   interaction reads the same whether the user is on contact or
   anywhere else. Transition on the containing anchor so both the
   copy line and the made-by line feel like one affordance. */
.site-footer__colophon-link {
  transition: color 240ms ease, letter-spacing 240ms ease;
}
.site-footer__colophon-link:hover .site-footer__copy,
.site-footer__colophon-link:hover .site-footer__colophon {
  color: rgba(245,240,232,0.7);
  letter-spacing: 0.1em;
}

@media (max-width: 700px) {
  .site-footer {
    padding: 40px
             max(24px, env(safe-area-inset-right))
             max(32px, env(safe-area-inset-bottom))
             max(24px, env(safe-area-inset-left));
  }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .site-footer__right { align-items: flex-start; }
}

/* ── PAGE ENTRANCE ────────────────────────────────────────────────────── */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.page { animation: pageIn 0.45s ease both; }

/* ── ANIMATION UTILITIES ─────────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* staggered children — index-driven delay */
.stagger > * { transition-delay: calc(var(--i, 0) * 0.1s); }
.fade-in-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in-stagger.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── SECTION REVEAL ─────────────────────────────────────────────────── */
.section-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.section-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax-ready container — shift applied via JS */
.parallax-subtle {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Divider wipe animation */
.divider-wipe {
  width: 0;
  height: 1px;
  background: rgba(45,45,45,0.12);
  transition: width 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
.divider-wipe.visible {
  width: 100%;
}
.divider-wipe--light {
  background: rgba(245,240,232,0.1);
}

/* ── 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;
  }
  .fade-in, .fade-in-stagger, .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .divider-wipe { width: 100%; transition: none; }
  .page { animation: none; }
}

/* ── BUTTON ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid;
  transition: all 0.25s ease;
}
.btn--cream {
  color: #F5F0E8;
  border-color: rgba(245,240,232,0.3);
}
.btn--cream:hover,
.btn--cream:active {
  background: #F5F0E8;
  color: #2C2C2C;
  transform: translateY(-1px);
}
.btn--graphite {
  color: #2C2C2C;
  border-color: rgba(45,45,45,0.25);
}
.btn--graphite:hover,
.btn--graphite:active {
  background: #1E5FA8;
  color: #F5F0E8;
  border-color: #1E5FA8;
  box-shadow: 0 0 18px 4px rgba(30,95,168,0.35);
  transform: translateY(-1px);
}

/* ── COLLECTION CARD ─────────────────────────────────────────────────── */
.collection-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #2C2C2C;
}
.collection-card__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.collection-card__label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}
.collection-card__name {
  font-size: 14px;
  color: #F5F0E8;
  margin-bottom: 4px;
}
.collection-card__designer {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
}

/* ── TIMELINE (Method page) ──────────────────────────────────────────── */
.timeline-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid rgba(45,45,45,0.08);
}
.timeline-step__num {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E5FA8;
  padding-top: 4px;
}
.timeline-step__body h3 {
  margin-bottom: 12px;
}
.timeline-step__body p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(45,45,45,0.65);
  max-width: 560px;
}

@media (max-width: 700px) {
  .timeline-step { grid-template-columns: 1fr; gap: 12px; }
}

/* ── CANVAS HERO (collection page) ─────────────────────────────────── */
.hero-canvas-wrap {
  width: 100%;
  height: 70vh;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  background: #2C2C2C;
}
.hero-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-canvas-wrap__overlay {
  position: absolute;
  bottom: 48px;
  left: 48px;
  right: 48px;
  z-index: 2;
}

@media (max-width: 700px) {
  .hero-canvas-wrap { height: 50vh; min-height: 300px; }
  .hero-canvas-wrap__overlay { bottom: 24px; left: 24px; right: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DITHERTONE — press 'd' to toggle
   Snaps all semi-transparent brand colors to solid palette values.
   Works site-wide: add class .dithertone to <body>.
   ═══════════════════════════════════════════════════════════════════════ */

/* Kill all alpha — everything goes solid */
.dithertone,
.dithertone * {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Left panel — above dither overlay (z=3) AND above .right (z=4)
   so that the mobile fixed nav-links bar isn't covered by .right */
.dithertone .left {
  z-index: 5;
}
/* Displacement roughness on left-panel children (exclude nav-links
   container — filter breaks position:fixed on mobile and displaces
   nav text). Target specific elements instead of blanket > * */
.dithertone .mark-wrap,
.dithertone .left-bottom > *:not(.nav-links) {
  filter: url(#dither-displace);
}

/* SVG mark — roughen edges + high contrast for halftone feel */
.dithertone .mark-wrap svg {
  filter: url(#dither-displace) contrast(1.4);
}

/* Cream text at any opacity → solid Cream */
.dithertone .morph-chair-name,
.dithertone .three-words,
.dithertone .site-nav__links a,
.dithertone .site-nav__links a.active,
.dithertone .footnote,
.dithertone .text-cream { color: #F5F0E8 !important; }

/* Flame text at any opacity → solid Flame */
.dithertone .morph-chair-designer,
.dithertone .wordmark .dot,
.dithertone .text-flame,
.dithertone .hover-label { color: #E8460A !important; }

/* Bitossi text → solid Bitossi */
.dithertone .text-bitossi,
.dithertone a:hover { color: #1E5FA8 !important; }

/* Graphite text → solid Graphite */
.dithertone .text-graphite,
.dithertone .descriptor { color: #F5F0E8 !important; }

/* Counter — too faint normally, bump to visible Bitossi */
.dithertone .morph-counter { color: #1E5FA8 !important; }

/* Depth track → solid colors, no alpha */
.dithertone .depth-track { background: rgba(245,240,232,0.15) !important; }
.dithertone .depth-fill { background: #E8460A !important; }

/* Dividers → solid palette */
.dithertone .divider { background: #F5F0E8 !important; }
.dithertone .divider--light { background: rgba(245,240,232,0.2) !important; }

/* Nav backgrounds → solid graphite or cream */
.dithertone .site-nav { background: #2C2C2C !important; }
.dithertone .site-nav--cream { background: #F5F0E8 !important; }
.dithertone .site-nav--cream .site-nav__links a { color: #2C2C2C !important; }

/* Links → Bitossi solid */
.dithertone a { color: #1E5FA8 !important; }
.dithertone a:visited { color: #1E5FA8 !important; }
/* Nav links on dark bg → Cream for legibility */
.dithertone .nav-links a { color: #F5F0E8 !important; }

/* Mobile: nav-links is moved to <body> by JS when dithertone is active,
   so it escapes .left's stacking context and sits above the overlay */
@media (max-width: 700px) {
  .dithertone .nav-links {
    background: transparent !important;
  }
  .dithertone .nav-links a {
    opacity: 1 !important;
  }
}

/* Both panels transparent so the full-viewport dither overlay shows through */
.dithertone .left { background: transparent !important; }
.dithertone .right { background: transparent !important; }

/* Hide the WebGL canvas — dither overlay paints the dithered version;
   canvas buffer is still readable by drawImage despite opacity:0 */
.dithertone #morph-canvas { opacity: 0 !important; }

/* Force morph text visible — JS sets inline opacity:0 during transitions;
   in dithertone mode the text should always show */
.dithertone .morph-chair-name,
.dithertone .morph-chair-designer { opacity: 1 !important; }

/* Raise right panel above dither overlay (z=3) so morph text is readable */
.dithertone .right { z-index: 4; }

/* Raise left-panel children above dither overlay so text stays readable */
.dithertone .left > * { position: relative; z-index: 4; }

/* Kill gradients, soft glows, translucency */
.dithertone img { image-rendering: pixelated; }

/* On cream pages (method, principal, collection): */
body.dithertone.page-cream,
body.dithertone.page-cream .left { background: #F5F0E8 !important; }
body.dithertone.page-cream .text-cream,
body.dithertone.page-cream .footnote { color: #2C2C2C !important; }

/* ═══════════════════════════════════════════════════════════════
   TESSELLATION — full-viewport Escher-style tile editor overlay.
   Moved from contact.html inline styles when the engine was split
   into /js/tessellation.js. Every selector is .tess-wrap-scoped
   so nothing here leaks onto the SAL desktop.
   ═══════════════════════════════════════════════════════════════ */
.tess-wrap canvas { display:block;position:absolute;top:0;left:0;width:100%;height:100%; }
.tess-wrap .tess-title{position:absolute;top:16px;left:50%;transform:translateX(-50%);font:11px/1 'Inconsolata',monospace;letter-spacing:0.42em;color:#F5F0E8;opacity:0.85;z-index:11;pointer-events:none;white-space:nowrap;text-transform:uppercase}
.tess-wrap .tess-title::before,.tess-wrap .tess-title::after{content:"";display:inline-block;width:24px;height:1px;background:#F5F0E8;opacity:0.35;vertical-align:middle;margin:0 14px}
.tess-wrap .tb{position:absolute;top:0;left:0;right:0;padding-top:44px;display:flex;flex-direction:column;gap:0;background:rgba(44,44,44,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid rgba(245,240,232,0.08)}
.tess-wrap .tb-row{display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:wrap;justify-content:flex-start}
.tess-wrap .tb-row:first-child{padding-bottom:8px}
@media (max-width:720px){.tess-wrap .tb{padding-top:36px}.tess-wrap .tb-row{gap:6px;padding:6px 10px}.tess-wrap .tess-title{font-size:10px;letter-spacing:0.32em}}
.tess-wrap .tb-group{display:flex;gap:2px;background:rgba(245,240,232,0.06);border-radius:6px;padding:2px}
.tess-wrap .tb-btn{background:none;border:1px solid rgba(245,240,232,0.12);color:rgba(245,240,232,0.5);font:11px/1 'GillSansMT','Gill Sans MT',sans-serif;letter-spacing:0.08em;padding:5px 10px;border-radius:4px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.tess-wrap .tb-btn:hover{border-color:rgba(245,240,232,0.3);color:#F5F0E8}
.tess-wrap .tb-btn.active{background:#1E5FA8;border-color:#1E5FA8;color:#F5F0E8}
.tess-wrap .tb-btn.flame{background:#E8460A;border-color:#E8460A;color:#F5F0E8}
.tess-wrap .tb-sep{width:1px;height:20px;background:rgba(245,240,232,0.1);margin:0 2px}
.tess-wrap .tb-label{font-size:10px;letter-spacing:0.12em;color:rgba(245,240,232,0.35);text-transform:uppercase}
.tess-wrap .pal-swatch{width:22px;height:22px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:border-color 0.15s;display:inline-block}
.tess-wrap .pal-swatch:hover{border-color:rgba(245,240,232,0.4)}
.tess-wrap .pal-swatch.active{border-color:#F5F0E8}
.tess-wrap .help-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(44,44,44,0.95);border:1px solid rgba(30,95,168,0.3);border-radius:12px;padding:32px 40px;max-width:380px;z-index:100;text-align:center;backdrop-filter:blur(12px);color:#F5F0E8;font-family:'GillSansMT','Gill Sans MT',sans-serif}
.tess-wrap .help-overlay h2{font-size:15px;letter-spacing:0.08em;margin-bottom:16px;color:#F5F0E8}
.tess-wrap .help-overlay p{font-size:12px;line-height:1.6;color:rgba(245,240,232,0.7);margin-bottom:10px}
.tess-wrap .help-overlay .key{display:inline-block;background:rgba(245,240,232,0.1);border:1px solid rgba(245,240,232,0.2);border-radius:3px;padding:1px 6px;font-family:'Inconsolata',monospace;font-size:11px}
.tess-wrap .help-dismiss{background:#1E5FA8;border:none;color:#F5F0E8;font:12px/1 'GillSansMT','Gill Sans MT',sans-serif;letter-spacing:0.08em;padding:8px 24px;border-radius:6px;cursor:pointer;margin-top:16px}
.tess-wrap .tess-toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(30,95,168,0.9);color:#F5F0E8;font-size:11px;letter-spacing:0.08em;padding:8px 20px;border-radius:20px;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:50}
.tess-wrap .tess-toast.show{opacity:1}