/* ==========================================================================
   Monolith — Weissmuller (Mandrill, Black IPA) case study
   The brand is a real animal's face, already built like a logo — so the
   page treats its stripe language as a living material. The hero is a
   cursor-reactive field of hand-inked chevrons with the animal hiding in
   it (two gold eyes part the stripes and blink). The six working plates
   are grouped on one drafting "construction sheet" at their true working
   size — they are postcard-sized originals and enlarging them is what
   made the old page blurry. The real painted mark then gets a full-bleed,
   scroll-driven ink reveal (Nº3). Body bg + header adapt per section
   (js/pages/weissmuller.js). Relies on site.css for resets, nav/footer
   bones, keyframes.
   ========================================================================== */

html { background: #0A2E56; }
body {
  background: #0A2E56;
  color: #14110C;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background-color 0.9s ease;
}
::selection { background: #D8AC2C; color: #14110C; }

/* adaptive chrome: starts dark over the hero's blue, switches to ink-on-
   paper over the process sections, back to dark for the ink/reveal/tagline
   run and the outro (toggled from js/pages/weissmuller.js) */
header.mono-nav {
  background: rgba(10,46,86,0.88); border-bottom: 1px solid rgba(241,236,223,0.12);
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
header.mono-nav .mono-word, header.mono-nav nav a { color: #C7D3E2; transition: color 0.35s ease; }
header.mono-nav .mono-word:hover, header.mono-nav nav a:hover { color: #FFFFFF; }
header.mono-nav nav a.is-current { color: #FFFFFF; }
header.mono-nav.wm-paper-hdr { background: rgba(241,236,223,0.92); border-bottom-color: rgba(20,17,12,0.1); }
header.mono-nav.wm-paper-hdr .mono-word, header.mono-nav.wm-paper-hdr nav a { color: #7A7362; }
header.mono-nav.wm-paper-hdr .mono-word:hover, header.mono-nav.wm-paper-hdr nav a:hover { color: #14110C; }
header.mono-nav.wm-paper-hdr nav a.is-current { color: #14110C; }
.mono-burger span { transition: transform 0.4s cubic-bezier(0.5,0.15,0.15,1), opacity 0.2s ease, background-color 0.35s ease !important; }
footer.mono-foot { border-top: 1px solid rgba(241,236,223,0.14); }
footer.mono-foot .mono-foot-brand span, footer.mono-foot .mono-foot-copy { color: #8891A0; }
body.wm-bg-paper footer.mono-foot { border-top-color: rgba(20,17,12,0.14); }
body.wm-bg-paper footer.mono-foot .mono-foot-brand span, body.wm-bg-paper footer.mono-foot .mono-foot-copy { color: #7A7362; }
body.wm-bg-paper footer.mono-foot nav a { color: #7A7362; }
body.wm-bg-paper footer.mono-foot nav a:hover { color: #14110C; }

.wm-cursor { color: #D8AC2C; animation: blink 1.2s steps(1) infinite; }
.wm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }

/* ============ hero ============ */
.wm-hero {
  position: relative; padding: 64px 0 84px; overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, #123B70 0%, #0A2E56 60%, #071F3C 100%);
}
.wm-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.9; }
.wm-hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,46,86,0) 0%, #0A2E56 100%);
}
.wm-hero-inner { position: relative; z-index: 2; }

.wm-kick { font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #A7B4C8; }
.wm-kick a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.wm-kick a:hover { color: #D8AC2C; }
.wm-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.wm-tag { font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #E8380E; font-style: normal; }

.wm-word {
  margin: 56px 0 0; font-family: Georgia, 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(56px, 10.5vw, 168px); line-height: 0.92; letter-spacing: -0.02em;
  color: #F1ECDF; text-transform: lowercase;
}
.wm-product {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 0;
  font-family: 'VCR OSD Mono', monospace; font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.14em; text-transform: uppercase; color: #D8AC2C;
}
.wm-product-dot { width: 6px; height: 6px; border-radius: 50%; background: #E8380E; flex: none; }

.wm-dek { max-width: 620px; margin: 46px 0 0; font-size: 20px; line-height: 1.55; color: rgba(241,236,223,0.82); }

.wm-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 84px; padding-top: 26px; border-top: 1px solid rgba(241,236,223,0.2); }
.wm-meta-item { display: flex; flex-direction: column; gap: 8px; }
.wm-meta-label { font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8891A0; }
.wm-meta-val { font-size: 15px; line-height: 1.45; color: #F1ECDF; }

.wm-hero-hint {
  margin: 40px 0 0; text-align: left;
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6E7A8C;
}

/* ============ sections ============ */
/* Each section paints its own data-bg color directly. Body's background
   also gets driven to the same colors (weissmuller.js, scroll-sampled at
   viewport mid-height) purely for the header/edge continuity — but on a
   tall viewport more than one section can be visible at once, and the
   mid-point sample only reflects ONE of them. Sections used to have no
   background of their own, so whichever one the sample missed rendered
   its dark ink text directly on whatever color body was still showing
   (e.g. this section's near-black text on the hero's navy, unreadable).
   Giving every section its real color makes correctness independent of
   scroll timing; body-sync is now just a bonus, not load-bearing. */
.wm-section { padding: clamp(80px, 9vw, 130px) 0 clamp(36px, 4vw, 56px); background-color: #F1ECDF; }
.wm-reveal { background-color: #0F58A6; }
.wm-tagline { background-color: #14110C; }
.wm-outro { background-color: #14110C; }
.wm-grid { display: grid; grid-template-columns: minmax(230px, 0.8fr) 1.55fr; gap: 54px; align-items: start; }

.wm-rail { position: relative; border-top: 1px solid rgba(20,17,12,0.3); padding-top: 18px; }
.wm-no { display: block; font-family: 'VCR OSD Mono', monospace; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; color: #14110C; }
.wm-h { margin: 14px 0 0; font-family: Georgia, 'Playfair Display', serif; font-weight: 700; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.15; color: #14110C; }
.wm-no-light, .wm-h-light { color: #F1ECDF; }
.wm-reveal .wm-rail, .wm-tagline .wm-rail,
.wm-section[data-bg="#14110C"] .wm-rail { border-top-color: rgba(241,236,223,0.28); }

.wm-copy { max-width: 640px; padding-top: 18px; }
.wm-lead { margin: 0 0 22px; font-size: clamp(21px, 2vw, 26px); line-height: 1.48; color: #14110C; }
.wm-body { margin: 0; font-size: 16.5px; line-height: 1.65; color: #4A4436; }
.wm-lead-light { color: #F1ECDF; }
.wm-body-light { color: rgba(241,236,223,0.72); }
.wm-lead em, .wm-body em { font-style: italic; }

/* ============ the brief — pull quote ============ */
.wm-brief-quote {
  margin: clamp(56px, 7vw, 90px) auto 0; max-width: 940px; padding: 0;
  text-align: center;
}
.wm-brief-quote p {
  margin: 0; font-family: Georgia, 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.14; letter-spacing: -0.01em; color: #14110C;
}
.wm-brief-quote em { font-style: italic; color: #E8380E; }
.wm-brief-quote footer {
  margin-top: 26px; font-family: 'VCR OSD Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8A8471;
}

/* ============ captions ============ */
.wm-cap {
  display: flex; justify-content: space-between; gap: 24px; margin-top: 14px;
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A8471;
}
.wm-cap-light { color: rgba(241,236,223,0.5); }
.wm-cap span:first-child { white-space: nowrap; }
.wm-cap span:last-child { text-align: right; }

/* ============ the construction sheet ============
   The six working plates, grouped on one drafting board. Their originals
   are tiny (184–380px) — every cell caps the image at its natural width
   so nothing is ever upscaled into blur. */
.wm-board {
  margin-top: clamp(48px, 6vw, 76px);
  background: #FBF8EF; border: 1px solid rgba(20,17,12,0.35);
  box-shadow: 0 24px 60px rgba(20,17,12,0.12);
  position: relative;
}
/* registration ticks in two corners — drafting-sheet flavor */
.wm-board::before, .wm-board::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  background:
    linear-gradient(rgba(20,17,12,0.55), rgba(20,17,12,0.55)) center / 100% 1px no-repeat,
    linear-gradient(rgba(20,17,12,0.55), rgba(20,17,12,0.55)) center / 1px 100% no-repeat;
}
.wm-board::before { top: 9px; left: 9px; }
.wm-board::after { bottom: 51px; right: 9px; }

.wm-plates {
  display: grid;
  grid-template-columns: repeat(3, 1.42fr) minmax(150px, 0.85fr);
  grid-auto-rows: 1fr;
  gap: 16px; padding: 28px;
}
.wm-plates > * { min-width: 0; }
.wm-plate {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  background: #FFFFFF; border: 1px solid rgba(20,17,12,0.16); padding: 16px 14px 12px;
  cursor: crosshair; outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.3s ease, filter 0.3s ease;
}
/* the reference photo is the tallest source (184x501) and sits last in
   the column order so PL.01 keeps the true top-left slot; explicit
   column+row placement means it doesn't matter where it falls in DOM
   (reading) order */
.wm-plate-ref { grid-column: 4; grid-row: 1 / 3; }
.wm-plate img { width: auto; max-width: 100%; height: auto; margin: auto; }
/* hard caps at natural pixel size — the whole point of the sheet */
.wm-plate-ref img { max-width: min(100%, 168px); }
.wm-plate--break img { max-width: min(100%, 210px); }
.wm-plate--reduction img { max-width: min(100%, 300px); }
.wm-plate--field img { max-width: min(100%, 320px); }
.wm-plate--line img { max-width: min(100%, 312px); }
.wm-plate--lock img { max-width: min(100%, 340px); }
.wm-plate-tag {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; margin-top: 12px;
  font-family: 'VCR OSD Mono', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8A8471;
}
.wm-plate-tag span:last-child { color: #4A4436; }
.wm-plate-note { display: none; }

.wm-plate:hover, .wm-plate:focus-visible, .wm-plate.is-active {
  border-color: #E8380E; transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(20,17,12,0.14);
}
.wm-board.has-active .wm-plate:not(.is-active) { opacity: 0.4; filter: grayscale(0.5); }

.wm-board-notes {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px dashed rgba(20,17,12,0.3); padding: 16px 18px;
  font-family: 'VCR OSD Mono', monospace; font-size: 11.5px; line-height: 1.75;
  letter-spacing: 0.04em; color: #4A4436; text-transform: uppercase;
}
.wm-board-notes-head { color: #E8380E; letter-spacing: 0.14em; }

.wm-board-title {
  display: flex; flex-wrap: wrap; border-top: 1px solid rgba(20,17,12,0.35);
  font-family: 'VCR OSD Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A8471;
}
.wm-board-title span { padding: 12px 18px; border-right: 1px solid rgba(20,17,12,0.18); }
.wm-board-title span:last-child { border-right: 0; }
.wm-board-cap { margin-top: 18px; }

/* ============ Nº3 the mark — full-bleed ink reveal ============ */
.wm-reveal { padding: clamp(90px, 10vw, 150px) 0 clamp(70px, 8vw, 110px); overflow: hidden; }
.wm-mark-stage {
  position: relative; max-width: 1680px; margin: clamp(56px, 7vw, 88px) auto 0;
  overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.45);
}
.wm-mark-move { position: relative; will-change: transform; transition: transform 0.2s ease-out; }
.wm-mark-under {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) brightness(1.55) contrast(0.62); opacity: 0.22;
}
.wm-mark-ink {
  position: absolute; inset: 0; width: 100%; height: 100%;
  clip-path: inset(-1% 100% -1% 0);
}
.wm-mark-scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: #E8380E; box-shadow: 0 0 14px rgba(232,56,14,0.8), 0 0 40px rgba(232,56,14,0.4);
  opacity: 0; transition: opacity 0.3s ease;
}
.wm-mark-cap { margin-top: 22px; }

/* ============ tagline ============ */
.wm-tagline { padding: clamp(120px, 14vw, 200px) 0; text-align: center; }
.wm-tagline-eyebrow {
  display: block; font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8891A0; margin-bottom: 30px;
}
.wm-tagline-line {
  margin: 0 auto; max-width: 980px; font-family: Georgia, 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(30px, 5.6vw, 72px); line-height: 1.14; letter-spacing: -0.01em; color: #F1ECDF;
}
.wm-tagline-line em { font-style: italic; color: #E8380E; }
.wm-tagline-cap {
  margin: 34px 0 0; font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6E7A8C;
}

/* ============ on the shelf (bottles) ============ */
.wm-shelf-wide { max-width: 1160px; margin: clamp(52px, 7vw, 84px) auto 0; padding: 0 80px; }
.wm-shelf-wide img { display: block; width: 100%; height: auto; box-shadow: 0 28px 60px rgba(20,17,12,0.18); border-radius: 3px; }
.wm-shelf-stack { display: none; }
.wm-shelf-cap { margin-top: 30px; }

.wm-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: 44px; }
.wm-spec-item { border-top: 1px solid rgba(20,17,12,0.2); padding-top: 14px; }
.wm-spec-label { display: block; font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8471; margin-bottom: 8px; }
.wm-spec-val { font-size: 15.5px; line-height: 1.5; color: #14110C; }

/* ============ outro — the eyes ============ */
.wm-outro { padding: clamp(110px, 13vw, 180px) 0 110px; text-align: center; overflow: hidden; }
.wm-outro-eyes { display: flex; align-items: center; justify-content: center; gap: clamp(44px, 8vw, 96px); margin: 0 auto; }
.wm-eye {
  width: clamp(26px, 4vw, 46px); height: clamp(26px, 4vw, 46px); border-radius: 50%;
  border: clamp(4px, 0.9vw, 7px) solid #D8AC2C; opacity: 0.15;
  box-shadow: 0 0 0 rgba(216,172,44,0);
  transition: opacity 1.4s ease, box-shadow 1.4s ease;
}
.wm-outro.is-lit .wm-eye { opacity: 1; box-shadow: 0 0 26px rgba(216,172,44,0.55), 0 0 70px rgba(216,172,44,0.25); animation: wmBlink 6s ease-in-out 1.6s infinite; }
.wm-outro.is-lit .wm-eye-r { animation-delay: 1.9s; }
@keyframes wmBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}
.wm-outro-line {
  margin: 56px 0 0; font-family: Georgia, 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(32px, 5vw, 62px); line-height: 1.16; letter-spacing: -0.01em; color: #F1ECDF;
}
.wm-outro-line em { font-style: italic; color: #D8AC2C; }
.wm-next { display: inline-block; margin-top: 52px; font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #8891A0; text-decoration: none; transition: color 0.2s ease; }
.wm-next:hover { color: #F1ECDF; }

/* ============ reveal ============ */
[data-reveal] { opacity: 0.05; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.33,1,0.68,1), transform 0.8s cubic-bezier(0.33,1,0.68,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============ mobile ============ */
@media (max-width: 900px) {
  .wm-wrap, .wm-shelf-wide { padding-left: 22px; padding-right: 22px; }
  .wm-grid { grid-template-columns: 1fr; gap: 28px; }
  .wm-meta { grid-template-columns: 1fr 1fr; gap: 22px; }
  .wm-plates { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; grid-auto-rows: auto; }
  .wm-plate-ref { grid-column: auto; grid-row: auto / span 2; }
  .wm-plate { cursor: default; }
  .wm-plate:hover, .wm-plate:focus-visible, .wm-plate.is-active { border-color: rgba(20,17,12,0.16); transform: none; box-shadow: none; }
  .wm-board.has-active .wm-plate:not(.is-active) { opacity: 1; filter: none; }
  .wm-plate-note {
    display: block; margin-top: 8px; width: 100%;
    font-size: 11.5px; line-height: 1.55; color: #6E6753;
  }
  .wm-board-notes { display: none; }
  .wm-board::after { display: none; }
  .wm-specs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .wm-hero { padding-top: 40px; }
  /* the canvas is display:none on mobile (site.css) — a static CSS chevron
     field stands in so the hero doesn't fall back to a bare gradient */
  .wm-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background-image:
      repeating-linear-gradient(99deg, rgba(8,19,36,0.85) 0 3px, transparent 3px 30px),
      repeating-linear-gradient(81deg, rgba(8,19,36,0.85) 0 3px, transparent 3px 30px);
    background-size: 50.5% 100%, 50.5% 100%;
    background-position: left top, right top;
    background-repeat: no-repeat;
  }
  .wm-hero-top { flex-direction: column; gap: 10px; align-items: flex-start; }
  .wm-word { margin-top: 40px; }
  .wm-meta { grid-template-columns: 1fr; }
  .wm-hero-hint { display: none; }
  .wm-plates { grid-template-columns: 1fr; }
  .wm-plate-ref { grid-row: auto; }
  .wm-plate-ref img { max-width: 150px; }
  .wm-shelf-wide { display: none; }
  .wm-shelf-stack { display: block; max-width: 320px; margin: 44px auto 0; padding: 0; }
  .wm-shelf-stack img { display: block; width: 100%; height: auto; box-shadow: 0 20px 44px rgba(20,17,12,0.18); border-radius: 3px; margin-top: 20px; }
  .wm-shelf-stack img:first-child { margin-top: 0; }
  .wm-board-title span { padding: 10px 12px; }
  .wm-outro-eyes { gap: 36px; }
}