/* ═══════════════════════════════════════════════════════════════════════
   revealed.design — shared stylesheet
   Brand palette: Graphite #2D2D2D · Bitossi #1E5FA8 · Flame #E8460A · Cream #F2EFE9
   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 'GillSans' 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: 'GillSans';
  src: url('../fonts/gill-sans-mt/GillSansMT-Light.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSans';
  src: url('../fonts/gill-sans-mt/GillSansMT-LightItalic.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-LightItalic.woff')  format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

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

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

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

/* 800 — Heavy */
@font-face {
  font-family: 'GillSans';
  src: url('../fonts/gill-sans-mt/GillSansMT-Heavy.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Heavy.woff')  format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GillSans';
  src: url('../fonts/gill-sans-mt/GillSansMT-HeavyItalic.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-HeavyItalic.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.woff2') format('woff2'),
       url('../fonts/gill-sans-mt/GillSansMT-Shadowed.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.woff2') format('woff2'),
       url('../fonts/Inconsolata-VariableFont_wdth_wght.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: 'GillSans', 'Gill Sans MT', 'Gill Sans', sans-serif;
  color: #2D2D2D;
  background: #F2EFE9;
  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.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.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.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.png') 18 14, pointer;
}

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

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

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

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
.gill { font-family: 'GillSans', 'Gill Sans MT', 'Gill Sans', 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: 'GillSans', 'Gill Sans MT', 'Gill Sans', sans-serif;
  letter-spacing: 0.04em;
  color: #F2EFE9;
  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: #2D2D2D; }
.wordmark--dark .dot { color: #E8460A; }

/* ── SITE NAV ─────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0 48px;
  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(242,239,233,0.97) !important;
  box-shadow: 0 1px 0 rgba(45,45,45,0.06);
}
.site-nav--cream .site-nav__logo { color: #2D2D2D; }
.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: #2D2D2D; }
.site-nav--cream .nav-toggle span { background: #2D2D2D; }

.site-nav__logo {
  font-size: 15px;
  display: flex;
  align-items: baseline;
  color: #F2EFE9;
  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(242,239,233,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: #F2EFE9;
  animation: navZPulse 4s ease-in-out infinite;
}
.site-nav__links a.active {
  color: #F2EFE9;
}

@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: #F2EFE9;
  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 24px; 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(242,239,233,0.12); }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.site-footer {
  background: #2D2D2D;
  color: rgba(242,239,233,0.4);
  padding: 56px 48px 40px;
}

.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: #F2EFE9;
}

.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(242,239,233,0.35);
  margin-top: 4px;
}

@media (max-width: 700px) {
  .site-footer { padding: 40px 24px 32px; }
  .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(242,239,233,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: #F2EFE9;
  border-color: rgba(242,239,233,0.3);
}
.btn--cream:hover,
.btn--cream:active {
  background: #F2EFE9;
  color: #2D2D2D;
  transform: translateY(-1px);
}
.btn--graphite {
  color: #2D2D2D;
  border-color: rgba(45,45,45,0.25);
}
.btn--graphite:hover,
.btn--graphite:active {
  background: #1E5FA8;
  color: #F2EFE9;
  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: #2D2D2D;
}
.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: #F2EFE9;
  margin-bottom: 4px;
}
.collection-card__designer {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242,239,233,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: #2D2D2D;
}
.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: #F2EFE9 !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: #F2EFE9 !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(242,239,233,0.15) !important; }
.dithertone .depth-fill { background: #E8460A !important; }

/* Dividers → solid palette */
.dithertone .divider { background: #F2EFE9 !important; }
.dithertone .divider--light { background: rgba(242,239,233,0.2) !important; }

/* Nav backgrounds → solid graphite or cream */
.dithertone .site-nav { background: #2C2C2C !important; }
.dithertone .site-nav--cream { background: #F2EFE9 !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: #F2EFE9 !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: #F2EFE9 !important; }
body.dithertone.page-cream .text-cream,
body.dithertone.page-cream .footnote { color: #2C2C2C !important; }