/* site1 — Rebollar & Saurez. "Evening fairway" theme: grass green, oak, cream, gold.
   Overrides the shared tokens for site1 only (shared.css is also used by site2 — never edit it for this).
   Motion rule: only transform + opacity are animated. */

:root {
  --bg: #0a1c14;
  --bg-2: #0e2519;
  --felt: #133a27;
  --grass: #2f8a4f;
  --grass-2: #58b36f;
  --oak: #5a3a20;
  --oak-2: #9a6a3c;
  --oak-3: #c89a62;
  --cream: #f3ecd9;
  --ink: #f1ead6;
  --ink-soft: rgba(241, 234, 214, 0.72);
  --ink-faint: rgba(241, 234, 214, 0.45);
  --gold: #c9a24a;
  --gold-2: #e6c77c;
  --green: #7fcf93;
  --hairline: rgba(241, 234, 214, 0.14);
  --paper: #0f271b;
  --glass: rgba(10, 28, 20, 0.72);
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: dark;
}

html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(201, 162, 74, 0.10), transparent 60%),
    linear-gradient(180deg, #0a1c14 0%, #0b2117 40%, #0a1c14 100%);
  background-color: var(--bg);
  color: var(--ink);
}
/* film grain — static, one layer, no blend mode (cheap on iOS) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: var(--gold); color: #0a1c14; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { padding-left: var(--gutter); padding-right: var(--gutter); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* ---------- golf ball (CSS only) ---------- */
.ball {
  display: block; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.95) 0 8%, transparent 26%),
    radial-gradient(circle, rgba(0,0,0,0.10) 0 1.1px, transparent 1.7px) 0 0 / 6px 6px,
    radial-gradient(circle at 38% 32%, #ffffff 0%, #eeeee6 42%, #c3c3b8 74%, #8b8b80 100%);
  box-shadow: inset -3px -5px 10px rgba(0,0,0,0.18), 0 10px 24px -10px rgba(0,0,0,0.6);
}

/* ---------- scroll progress: a putt to the cup ---------- */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 80; pointer-events: none; padding-top: env(safe-area-inset-top); }
.progress__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--grass), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); }
.progress__ball { position: absolute; left: 0; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.6); transform: translateX(0); }
.progress__cup { position: absolute; right: 4px; bottom: -3px; width: 11px; height: 9px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px rgba(241,234,214,0.25); }

/* ---------- trailing golf-ball cursor (fine pointers only) ---------- */
.cursor { position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; z-index: 95; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, #d9d9cf 60%, #9a9a90); box-shadow: 0 4px 10px rgba(0,0,0,0.4); transition: opacity 0.3s, width 0.25s, height 0.25s; will-change: transform; }
.cursor.on { opacity: 0.9; }
.cursor.big { opacity: 0.35; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 60; background: rgba(10, 28, 20, 0.78); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid var(--hairline); padding-top: env(safe-area-inset-top); }
.top__row { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 1rem; }
.brand { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand .amp { color: var(--gold-2); font-style: italic; }
.top__nav { display: flex; align-items: center; gap: 1.5rem; }
.top__nav .eyebrow { color: var(--ink-soft); }
.top__nav .eyebrow:hover { color: var(--gold-2); }
.top__news { color: var(--gold-2) !important; }
@media (max-width: 900px) { .top__nav { gap: 1rem; } .top__nav .eyebrow:nth-child(n+2):not(.top__news) { display: none; } }
.top__nav .eyebrow { white-space: nowrap; }
@media (max-width: 480px) { .brand { font-size: 1.12rem; } .top__nav .eyebrow:not(.top__news) { display: none; } .top__nav .eyebrow { font-size: 0.64rem; letter-spacing: 0.16em; } }

/* ---------- buttons ---------- */
.btn { border-color: var(--gold); color: var(--ink); border-radius: 999px; position: relative; will-change: transform; transition: background 0.3s, color 0.3s, transform 0.5s var(--ease-out); }
.btn span { display: inline-block; pointer-events: none; }
.btn.solid { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #10231a; border-color: transparent; box-shadow: 0 14px 30px -14px rgba(201,162,74,0.7), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn.solid:hover { background: var(--cream); color: #10231a; border-color: transparent; }
.btn.ghost { background: rgba(241,234,214,0.04); }
.btn.ghost:hover { background: rgba(241,234,214,0.12); color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100svh - 62px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; padding: 3rem 0 0; }
.hero__sky { position: absolute; inset: 0; z-index: -3;
  background: linear-gradient(180deg, #081a12 0%, #0f2f20 34%, #3d5a33 64%, #b08a4c 84%, #d7b56e 100%); }
.hero__sun { position: absolute; left: 62%; top: 54%; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,150,0.55) 0%, rgba(255,210,120,0.18) 30%, transparent 62%); animation: sun 9s ease-in-out infinite alternate; }
@keyframes sun { to { transform: scale(1.08); opacity: 0.85; } }
.hero__hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; z-index: -2; }
.hill { will-change: transform; }
.pin__flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag 2.4s ease-in-out infinite; }
@keyframes flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(6deg) scaleX(0.9); } }

.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 2rem; width: 100%; }
.hero__copy { padding-bottom: 5.5rem; }
.hero__est { color: var(--gold-2); }
.hero__title { font-size: clamp(3rem, 8.4vw, 7rem); letter-spacing: -0.02em; line-height: 0.98; margin-bottom: 1rem; text-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.hero__title .amp { color: var(--gold-2); font-style: italic; }
.split { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(4deg); animation: rise 1.1s var(--ease-out) forwards; animation-delay: calc(0.12s + var(--i, 0) * 0.11s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero__names { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.2rem; }
.hero__lede { max-width: 34rem; color: rgba(241,234,214,0.82); font-size: 1.35rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

.hero__duo { position: relative; height: min(78svh, 680px); min-height: 380px; }
.hero__halo { position: absolute; left: 50%; bottom: 8%; width: 110%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(230,199,124,0.35), transparent 60%); }
.hero__cut { position: absolute; bottom: 0; height: 96%; width: auto; max-width: none; filter: drop-shadow(0 30px 30px rgba(0,0,0,0.45)); opacity: 0; animation: popup 1.3s var(--ease-spring) forwards; will-change: transform; }
.hero__cut--ram { left: 2%; animation-delay: 0.35s; }
.hero__cut--joey { right: -2%; height: 90%; animation-delay: 0.55s; }
@keyframes popup { from { opacity: 0; transform: translateY(18%) scale(0.92); } to { opacity: 1; transform: none; } }
.hero__ball { position: absolute; width: clamp(48px, 6vw, 84px); aspect-ratio: 1; left: 8%; top: 4%; opacity: 0; animation: balldrop 1.6s var(--ease-spring) 1s forwards; will-change: transform; }
@keyframes balldrop { 0% { opacity: 0; transform: translateY(-120px) scale(0.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.ticker { position: relative; z-index: 2; margin-top: auto; border-top: 1px solid rgba(241,234,214,0.18); background: rgba(8, 22, 15, 0.72); overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker__track span { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); padding: 0.95rem 1.4rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 1.4rem; }
.ticker__track b { color: var(--gold-2); font-weight: 600; }
.ticker__track i { width: 7px; height: 7px; border-radius: 50%; background: var(--cream); display: inline-block; }
@keyframes ticker { to { transform: translateX(-50%); } }
.paused .ticker__track, .paused .hero__sun, .paused .pin__flag { animation-play-state: paused; }

@media (max-width: 900px) {
  .hero { padding-top: 1.5rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__copy { padding-bottom: 0; text-align: left; }
  .hero__duo { height: 54svh; min-height: 330px; max-height: 480px; margin-top: 0.5rem; }
  .hero__cut--ram { left: 4%; } .hero__cut--joey { right: 0; }
}
@media (max-width: 430px) {
  .hero__title { font-size: 2.9rem; }
  .hero__lede { font-size: 1.15rem; }
  .hero__ctas .btn { padding: 0.85rem 1.2rem; font-size: 0.66rem; letter-spacing: 0.18em; }
}

/* ---------- showcase (per character) ---------- */
.feature { padding: 0 0 var(--s-4); }
.show { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; }
@supports (overflow: clip) { .show { overflow: clip; overflow-clip-margin: 0px; } }
.show__giant { position: absolute; top: clamp(1.5rem, 5vw, 3.5rem); left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(5rem, 19vw, 16rem); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(241,234,214,0.09); pointer-events: none; user-select: none; will-change: transform; }
.show__head { position: relative; margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: 44rem; }
.show__title { font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -0.015em; }
.show__title em { color: var(--gold-2); }
.show__sub { font-style: italic; color: var(--ink-soft); font-size: 1.25rem; margin: 0.6rem 0 0; }
.show__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.show--flip .show__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.show--flip .peel { order: 2; }
@media (max-width: 900px) {
  .show__grid, .show--flip .show__grid { grid-template-columns: 1fr; }
  .show--flip .peel { order: 0; }
}

/* ---------- peel / slide reveal ---------- */
.peel { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 5.2; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.peel.dragging { cursor: grabbing; }
.peel__slide { position: absolute; inset: 0; overflow: hidden; will-change: transform; opacity: 0; }
.peel__slide.is-top, .peel__slide.is-next { opacity: 1; }
.peel__slide.is-top { z-index: 3; } .peel__slide.is-next { z-index: 2; }
.peel__inner { position: absolute; inset: 0; will-change: transform; }
.peel__card { position: absolute; left: 0; right: 0; top: 13%; bottom: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(241,234,214,0.16);
  background: var(--card-bg, linear-gradient(160deg, #1b5236, #0d2a1c)); box-shadow: var(--shadow); }
.peel__card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(118deg, rgba(255,255,255,0.035) 0 38px, transparent 38px 76px); }
.peel__word { position: absolute; left: 6%; right: 6%; top: 7%; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: clamp(2.6rem, 9vw, 4.8rem); line-height: 0.9; color: rgba(241,234,214,0.14); letter-spacing: -0.02em; }
.peel__plinth { position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 9px), linear-gradient(180deg, var(--oak-2), var(--oak) 60%, #3a2412);
  border-top: 2px solid var(--oak-3); }
.peel__img { position: absolute; left: 50%; bottom: 6%; height: 94%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 26px 22px rgba(0,0,0,0.5)); pointer-events: none; }
.peel__img--photo { top: 13%; bottom: 0; left: 0; width: 100%; height: 87%; object-fit: cover; object-position: 50% 18%; transform: none; border-radius: 22px; filter: saturate(0.9) contrast(1.04); }
.peel__cap { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; margin: 0; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream); text-shadow: 0 2px 8px rgba(0,0,0,0.7); z-index: 2; }
.peel__edge { position: absolute; top: 13%; bottom: 0; left: 0; width: 0; z-index: 4; pointer-events: none; will-change: transform; }
.peel__edge::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46px; border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(241,234,214,0.22) 35%, rgba(241,234,214,0.05) 70%, transparent); opacity: var(--edge-o, 0); }
.peel__edge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(180deg, transparent, var(--gold-2), transparent); opacity: var(--edge-o, 0); }
.peel__knob { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; pointer-events: auto; touch-action: none; cursor: grab; border: 0; padding: 0; background: transparent; border-radius: 50%; -webkit-appearance: none; appearance: none; }
.peel__knob .ball { width: 100%; height: 100%; }
.peel__knob::after { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; color: #0a1c14; }
.peel__ui { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; pointer-events: none; }
.peel__count { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.26em; color: var(--gold-2); }
.peel__hint { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); }
.peel__btns { display: flex; gap: 0.4rem; pointer-events: auto; }
.peel__btn { appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(241,234,214,0.05); color: var(--ink); font-size: 1rem; cursor: pointer; transition: background 0.25s, transform 0.4s var(--ease-out); }
.peel__btn:hover { background: rgba(241,234,214,0.14); }

/* ---------- swing animation ---------- */
.swing { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
.swing__stage { position: relative; padding: 13% 10% 0; border-radius: 22px; background: radial-gradient(120% 80% at 50% 100%, rgba(88,179,111,0.22), transparent 60%), linear-gradient(180deg, rgba(241,234,214,0.04), rgba(241,234,214,0.01)); border: 1px solid var(--hairline); }
.swing__fig { position: relative; margin: 0 auto; width: 76%; aspect-ratio: var(--ar, 0.62); }
.swing__frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.09s linear; pointer-events: none; }
.swing__frame.on { opacity: 1; }
.swing__ball { position: absolute; left: var(--bx); top: var(--by); width: var(--bs); aspect-ratio: 1; margin: calc(var(--bs) * -0.5) 0 0 calc(var(--bs) * -0.5); z-index: 3; will-change: transform, opacity; }
.swing__ball::before { content: ""; position: absolute; left: 50%; top: 88%; width: 18%; height: 70%; margin-left: -9%; background: #efe9da; border-radius: 0 0 3px 3px; opacity: var(--tee, 1); }
.swing__dot { position: absolute; left: var(--bx); top: var(--by); width: calc(var(--bs) * 0.8); aspect-ratio: 1; margin: calc(var(--bs) * -0.4) 0 0 calc(var(--bs) * -0.4); border-radius: 50%; background: rgba(255, 244, 214, 0.9); opacity: 0; z-index: 2; will-change: transform, opacity; }
.swing__flash { position: absolute; left: var(--bx); top: var(--by); width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%; border: 2px solid rgba(255,244,214,0.9); opacity: 0; z-index: 2; pointer-events: none; }
.swing__arc { position: absolute; inset: -8% -14% 0; width: 128%; height: 108%; opacity: 0; pointer-events: none; z-index: 1; overflow: visible; }
.swing__turf { position: absolute; left: var(--bx); top: var(--by); width: 7px; height: 4px; border-radius: 2px; background: var(--grass-2); opacity: 0; z-index: 2; }
.swing__mat { height: 22px; margin: 0 -10%; border-radius: 0 0 22px 22px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 10px), linear-gradient(180deg, var(--oak-2), var(--oak)); border-top: 2px solid var(--oak-3); }
.swing__hud { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-family: var(--font-sans); }
.swing__read { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.swing__read .k { font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }
.swing__carry { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: var(--gold-2); line-height: 1; font-variant-numeric: tabular-nums; min-width: 3ch; }
.swing__note { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-soft); }
.swing__replay { padding: 0.75rem 1.2rem; font-size: 0.64rem; }
.swing__tag { position: absolute; z-index: 4; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); background: var(--glass); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.45rem 0.8rem; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.6s var(--ease-out); white-space: nowrap; }
.swing__tag.on { opacity: 1; transform: none; }
.swing__tag--a { left: 4%; top: 5%; }
.swing__tag--b { right: 4%; top: 16%; }

/* ---------- golfer details ---------- */
.details { grid-column: 1 / -1; list-style: none; margin: clamp(1rem, 3vw, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.detail { position: relative; padding: 1.1rem 1.2rem 1.2rem; border-radius: 16px; border: 1px solid var(--hairline); background: linear-gradient(160deg, rgba(241,234,214,0.06), rgba(241,234,214,0.015)); overflow: hidden;
  opacity: 0; transform: translateY(22px) scale(0.97); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); will-change: transform; }
.details.in .detail { opacity: 1; transform: none; }
.detail::before { content: ""; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,0.12) 0 1px, transparent 1.6px) 0 0 / 6px 6px, radial-gradient(circle at 38% 32%, rgba(255,255,255,0.14), rgba(255,255,255,0.03)); }
.detail .k { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 0.45rem; }
.detail .v { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.3; margin: 0; color: var(--ink); }
.detail .n { display: block; font-size: 2.2rem; line-height: 1; color: var(--cream); margin-bottom: 0.25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 430px) { .detail { padding: 0.9rem 0.9rem 1rem; } .detail .v { font-size: 0.98rem; } .detail .n { font-size: 1.8rem; } }

/* ---------- the feature (profiles) ---------- */
.profile { padding: clamp(2.5rem, 6vw, 4rem) 0 var(--s-4); border-top: 0; }
.profile__head { margin-bottom: var(--s-3); }
.profile__title { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0.2rem 0 0.3rem; }
.profile__role { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); margin: 0 0 1rem; }
.profile__byline { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); border-top: 1px solid var(--hairline); padding-top: 0.9rem; }
.profile__layout { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
.profile__frame { max-width: 360px; border-radius: 18px; border-color: rgba(201,162,74,0.35); background: linear-gradient(160deg, #1a4a32, #0f2a1d); padding: 10px; }
.profile__frame img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: 12px; }
.profile__frame figcaption { color: var(--ink-soft); }
@media (min-width: 901px) { .profile__frame { position: sticky; top: 90px; } }
.profile__article { font-size: 1.2rem; line-height: 1.78; max-width: 62ch; color: rgba(241,234,214,0.9); }
.prof__p { margin-bottom: 1.15em; }
.prof__p.dropcap::first-letter { font-family: var(--font-display); float: left; font-size: 4.6rem; line-height: 0.7; padding: 0.05em 0.12em 0 0; color: var(--gold-2); font-weight: 600; }
.chapter { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--hairline); position: relative; }
.chapter__kicker { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 0.4rem; }
.chapter__title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-style: italic; margin-bottom: 1.2rem; }
.chapter::before { content: ""; position: absolute; top: -9px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfcfc4 70%, #8b8b80); box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
@media (max-width: 900px) {
  .profile__layout { grid-template-columns: 1fr; }
  .profile__frame { max-width: 300px; position: static; }
}
.pull { border-left-color: var(--gold); }
.pull p { color: var(--cream); }
.pull cite { color: var(--gold-2); }
.profile__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: var(--s-3); border-top: 1px solid var(--hairline); }
.stat { border-top-color: var(--hairline); }
.stat .v { color: var(--cream); }
@media (max-width: 560px) { .profile__stats { grid-template-columns: repeat(2, 1fr); } .stat .v { font-size: 2rem; } }

/* ---------- from the wire ---------- */
.wire { padding: var(--s-4) 0 var(--s-5); }
.wire__head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; margin-bottom: 1.8rem; }
.wire__head .kicker { width: 100%; margin-bottom: 0.2rem; }
.wire__all { color: var(--gold-2); }
.wire__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wcard { position: relative; display: flex; flex-direction: column; text-decoration: none; border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); background: linear-gradient(170deg, #143a28, #0d2419); min-height: 100%; transition: transform 0.6s var(--ease-out), border-color 0.3s; will-change: transform; }
.wcard:hover { border-color: rgba(230,199,124,0.5); }
.wcard__img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.wcard__noimg { aspect-ratio: 3 / 2; display: grid; place-items: center; background: radial-gradient(circle at 50% 120%, rgba(88,179,111,0.35), transparent 60%), repeating-linear-gradient(118deg, rgba(255,255,255,0.03) 0 30px, transparent 30px 60px); font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: rgba(241,234,214,0.3); }
.wcard__body { padding: 1rem 1.1rem 1.3rem; }
.wcard__k { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 0.5rem; }
.wcard__h { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.25; margin: 0; color: var(--ink); }
.wcard__new { position: absolute; top: 10px; left: 10px; font-family: var(--font-sans); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--gold-2); color: #10231a; font-weight: 700; }
@media (max-width: 900px) { .wire__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wire__grid { grid-template-columns: 1fr; } }

/* ---------- the record: an oak trophy cabinet ---------- */
.cabinet { padding: var(--s-5) 0; background:
  repeating-linear-gradient(92deg, rgba(0,0,0,0.10) 0 3px, transparent 3px 14px, rgba(255,255,255,0.025) 14px 16px, transparent 16px 31px),
  linear-gradient(180deg, #3b2614, #2a1a0d 60%, #22150a); border-top: 3px solid var(--oak-3); border-bottom: 3px solid var(--oak-3); }
.cabinet__head { text-align: center; margin-bottom: var(--s-4); }
.cabinet__head .lede { color: rgba(241,234,214,0.72); }
.cabinet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 900px) { .cabinet__cols { grid-template-columns: 1fr; } }
.cabinet__block { background: rgba(10, 6, 2, 0.35); border: 1px solid rgba(200,154,98,0.3); border-radius: 18px; padding: clamp(1.2rem, 3vw, 2rem); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow); }
.cabinet__name { display: inline-block; font-size: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gold); margin-bottom: 1rem; }
.cabinet__list { list-style: none; margin: 0; padding: 0; }
.cabinet__item { padding: 1.1rem 0; border-top: 1px solid rgba(200,154,98,0.2); }
.cabinet__item:first-child { border-top: 0; }
.cabinet__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; flex-wrap: wrap; }
.cabinet__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; }
.cabinet__year { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); white-space: nowrap; }
.cabinet__note { margin: 0.4rem 0 0; font-style: italic; color: rgba(241,234,214,0.7); }

/* ---------- the circle ---------- */
.circle { padding: var(--s-5) 0; }
.circle__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.circle__facts { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.circle__facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--hairline); }
.circle__facts strong { font-family: var(--font-display); font-size: 1.15rem; text-align: right; }
.circle__card { background: linear-gradient(160deg, var(--cream), #e4d6b4); color: #10231a; padding: 2.4rem; border-radius: 20px; box-shadow: var(--shadow); transition: transform 0.6s var(--ease-out); will-change: transform; }
.circle__card .kicker { color: var(--oak); }
.circle__card .h3 { color: #10231a; }
.circle__card .fine { color: rgba(16,35,26,0.6); }
@media (max-width: 900px) { .circle__grid { grid-template-columns: 1fr; } .circle__card { padding: 1.6rem; } }

/* ---------- footer ---------- */
.foot { background: linear-gradient(180deg, #07140e, #050e0a); color: var(--ink); padding: var(--s-5) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
.foot__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.foot__brand { font-family: var(--font-display); font-size: 1.8rem; margin: 0 0 0.6rem; }
.foot__brand .amp { color: var(--gold-2); font-style: italic; }
.foot__row .fine { color: rgba(241,234,214,0.55); }
.foot__nav { display: flex; flex-direction: column; gap: 0.7rem; text-align: right; }
.foot__nav .eyebrow { color: rgba(241,234,214,0.7); }
.foot__nav .eyebrow:hover { color: var(--gold-2); }
.foot__fine { text-align: center; margin: var(--s-4) 0 0; color: rgba(241,234,214,0.4); font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; }
@media (max-width: 560px) { .foot__nav { text-align: left; } }

/* ---------- The Members' Room (in-character chat) ---------- */
.rule { color: var(--gold-2); }
.room { padding: var(--s-5) 0 var(--s-5); }
.room__head { margin-bottom: var(--s-4); }
.room__head .lede { max-width: 46rem; margin-top: 0.8rem; }
.room__panel { border: 1px solid var(--hairline); background: linear-gradient(180deg, #11301f, #0c2217); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); padding: 0; }
.room__who { display: flex; border-bottom: 1px solid var(--hairline); }
.room__who-btn { flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0.9rem 1rem; text-align: left; border-right: 1px solid var(--hairline); font-family: var(--font-display); transition: background 0.2s; color: var(--ink); }
.room__who-btn:last-child { border-right: 0; }
.room__who-btn strong { display: block; font-size: 1.05rem; color: var(--ink-soft); }
.room__who-btn .fine { color: var(--ink-faint); }
.room__who-btn.on { background: rgba(201,162,74,0.14); }
.room__who-btn.on strong { color: var(--gold-2); }
.room__who-btn.on .fine { color: var(--ink-soft); }
.room__log { padding: var(--s-3); min-height: 240px; max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem; overscroll-behavior: contain; }
.room__line { display: flex; flex-direction: column; max-width: 82%; }
.room__line--user { align-self: flex-end; align-items: flex-end; }
.room__line--member { align-self: flex-start; align-items: flex-start; }
.room__who-name { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0.3rem; }
.room__bubble { padding: 0.7rem 1rem; line-height: 1.55; font-size: 1rem; }
.room__line--member .room__bubble { background: rgba(241,234,214,0.07); border: 1px solid var(--hairline); color: var(--ink); border-radius: 4px 14px 14px 14px; }
.room__line--user .room__bubble { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #10231a; border-radius: 14px 4px 14px 14px; }
.room__form { display: flex; gap: 0.6rem; padding: 1rem; border-top: 1px solid var(--hairline); }
.room__input { flex: 1; min-width: 0; appearance: none; border: 1px solid var(--hairline); background: rgba(0,0,0,0.25); border-radius: 999px; padding: 0.75rem 1.1rem; font-family: var(--font-sans); font-size: 16px; color: var(--ink); }
.room__input::placeholder { color: var(--ink-faint); }
.room__input:focus { outline: none; border-color: var(--gold); }
.room__send { white-space: nowrap; padding: 0.8rem 1.3rem; }
@media (max-width: 780px) { .room__line { max-width: 92%; } }

/* ---------- scroll reveal + pops ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.pop { opacity: 0; transform: scale(0.6) translateY(30px); transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-spring); }
.pop.in { opacity: 1; transform: none; }

/* ---------- reduced motion: keep it still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .split, .hero__cut, .hero__ball { animation: none; opacity: 1; transform: none; }
  .hero__sun, .pin__flag, .ticker__track { animation: none; }
  .reveal, .pop, .detail { opacity: 1; transform: none; transition: none; }
  .cursor { display: none; }
  .swing__frame { transition: none; }
}

/* =====================================================================================
   INTRO — "onto the course". Two tall book-page strips (Ramnson over Joey) turn away, then each tap
   travels deeper into Oakhaven (layered scale + opacity, rAF-driven in intro.js).
   Only transform + opacity animate. Tap-driven: never blocks normal page scroll.
   ===================================================================================== */
.intro { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; isolation: isolate;
  background: #0a1c14; color: var(--ink); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@supports (overflow: clip) { .intro { overflow: clip; } }
.intro-seen .intro { display: none; }
.hero__replay { display: none; margin-top: 1.4rem; background: none; border: 0; padding: 0.6rem 0; min-height: 44px; color: var(--ink-soft); cursor: pointer; letter-spacing: 0.24em; }
.hero__replay:hover { color: var(--gold-2); }
.intro-seen .hero__replay, .intro-done .hero__replay { display: inline-block; }

/* --- the course, in depth --- */
.intro__world { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.intro__par { position: absolute; inset: -3%; will-change: transform; }
.intro__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%;
  opacity: 0; transform-origin: 50% 56%; will-change: transform, opacity; backface-visibility: hidden; }
.intro__bg.is-on { opacity: 1; }
.intro__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,18,12,0.62) 0%, rgba(6,18,12,0) 26%, rgba(6,18,12,0) 52%, rgba(6,18,12,0.78) 100%),
              radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(4,12,8,0.55) 100%); }
.intro__rain { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity 1.2s var(--ease-out); }
.intro__rain::before { content: ""; position: absolute; left: -10%; right: -10%; top: -100%; height: 200%;
  background: repeating-linear-gradient(100deg, transparent 0 22px, rgba(255,240,210,0.16) 22px 23px, transparent 23px 57px),
              repeating-linear-gradient(97deg, transparent 0 41px, rgba(255,240,210,0.10) 41px 42px, transparent 42px 90px);
  animation: introRain 0.9s linear infinite; will-change: transform; }
@keyframes introRain { to { transform: translate3d(-6%, 50%, 0); } }
.intro[data-state="3"] .intro__rain { opacity: 1; }
.intro.paused .intro__rain::before, .intro.paused .strip__ring { animation-play-state: paused; }
.intro__grass { position: absolute; bottom: -3%; left: calc(50% - max(50%, 470px)); width: max(100%, 940px); height: auto; max-width: none;
  transform-origin: 50% 100%; will-change: transform, opacity; pointer-events: none; }
.intro__rush { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 52%, transparent 30%, rgba(255,236,190,0.28) 70%, rgba(255,236,190,0.55) 100%); }

/* --- top + bottom chrome (safe-area aware, 44px+ targets) --- */
.intro__top { position: absolute; z-index: 6; top: calc(10px + env(safe-area-inset-top)); left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; pointer-events: none; }
.intro__mark { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,0.5); white-space: nowrap; }
.intro__mark i { color: var(--gold-2); }
.intro__skip, .intro__next { pointer-events: auto; appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 44px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.25s, color 0.25s, transform 0.4s var(--ease-out); }
.intro__skip { padding: 0 1.1rem; border: 1px solid rgba(241,234,214,0.35); background: rgba(8,22,15,0.55); color: var(--cream); }
.intro__skip:hover { background: rgba(241,234,214,0.16); }
.intro__bottom { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; pointer-events: none; }
.intro__hint { margin: 0; min-height: 1.4em; font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: var(--cream); text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,0.65); }
.intro__nav { display: flex; align-items: center; gap: 1rem; }
.intro__pips { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; }
.intro__pips li { width: 8px; height: 8px; border-radius: 50%; background: rgba(241,234,214,0.28); transition: background 0.4s, transform 0.5s var(--ease-spring); }
.intro__pips li.on { background: var(--gold-2); transform: scale(1.35); }
.intro__pips li.done { background: rgba(241,234,214,0.7); }
.intro__next { padding: 0 1.3rem; border: 0; color: #10231a; background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 12px 26px -12px rgba(201,162,74,0.8), inset 0 1px 0 rgba(255,255,255,0.45); }
.intro__next:hover { background: var(--cream); }
.intro__scroll { pointer-events: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.6rem; text-decoration: none;
  font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(241,234,214,0.72); text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.intro__scroll:hover { color: var(--gold-2); }

/* --- the pages: two tall book-page strips. Ramnson's on top (right), Joey's under it, peeking out on the left. ---
   Each strip = .seg--a (spine half, hinged on the right edge) holding .seg--b (free-edge half, hinged at 40%), so the
   free edge can curl ahead during the turn. Faces are leaves (overflow + backface hidden); only transform/opacity animate. */
.intro__veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease-out);
  background: radial-gradient(70% 65% at 56% 48%, rgba(5,14,10,0.42), rgba(4,10,7,0.82)); }
.intro[data-state="0"] .intro__veil, .intro[data-state="1"] .intro__veil { opacity: 1; }
.intro__deck { position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(68px + env(safe-area-inset-top)); bottom: calc(136px + env(safe-area-inset-bottom));
  perspective: 1500px; perspective-origin: 62% 42%;
  --H: calc(100svh - 204px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  --W: min(64vw, calc(var(--H) * 0.46), 340px);
  --P: calc(var(--W) * 0.34); }
.intro__deck.gone { visibility: hidden; }
.strip { position: absolute; top: 0; height: 100%; width: var(--W); left: calc(50% - (var(--W) + var(--P)) / 2 + var(--P));
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; }
.strip--under { transform: translate3d(calc(var(--P) * -1), 10px, 0) rotate(-1.5deg); }
.strip.gone { visibility: hidden; }
.strip__shadow { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; transform: translateZ(-1px);
  box-shadow: 0 36px 70px -26px rgba(0,0,0,0.9), 0 3px 10px rgba(0,0,0,0.35), -12px 0 30px -14px rgba(0,0,0,0.7); }
.seg { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.seg--a { transform-origin: 100% 50%; }
.seg--b { transform-origin: 40% 50%; }
.face { position: absolute; top: 0; bottom: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face--a, .face--a-back { left: 40%; right: 0; }
.face--b, .face--b-back { left: 0; width: calc(40% + 1px); }
.face--a { border-radius: 0 6px 6px 0; }
.face--b { border-radius: 6px 0 0 6px; }
.face--a-back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
.face--b-back { transform: rotateY(180deg); border-radius: 0 6px 6px 0; }
.face__shade, .face__gloss { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.face--a .face__shade { background: linear-gradient(90deg, rgba(18,10,4,0.75), rgba(18,10,4,0.35)); }
.face--b .face__shade { background: linear-gradient(90deg, rgba(18,10,4,0.5), rgba(18,10,4,0.8)); }
.face--a-back .face__shade, .face--b-back .face__shade { background: rgba(40,26,10,0.7); }
.face__gloss { background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, transparent 30%, rgba(255,250,232,0.55) 78%, rgba(255,250,232,0.15) 92%, rgba(0,0,0,0.3) 100%); }
/* the page itself: cream paper, a gold rule, a course "plate" behind the figure */
.sheet { position: absolute; top: 0; bottom: 0; left: 0; width: var(--W); color: #1d2a22;
  background: radial-gradient(120% 50% at 50% 0%, rgba(255,255,255,0.4), transparent 60%),
              repeating-linear-gradient(90deg, rgba(90,58,32,0.035) 0 1px, transparent 1px 5px),
              linear-gradient(180deg, #f6efdc 0%, #efe4c8 70%, #e6d8b6 100%); }
.face--a > .sheet { left: calc(var(--W) * -0.4); }
.sheet::before { content: ""; position: absolute; inset: 1.6% 3.2%; border: 1px solid rgba(168,133,58,0.6); border-radius: 3px; pointer-events: none; }
.sheet::after { content: ""; position: absolute; inset: calc(1.6% + 4px) calc(3.2% + 4px); border: 1px solid rgba(168,133,58,0.25); border-radius: 2px; pointer-events: none; }
.sheet__run { position: absolute; left: 5.5%; top: 5%; bottom: 5%; writing-mode: vertical-rl; white-space: nowrap; overflow: hidden;
  font-family: var(--font-sans); font-size: max(8px, calc(var(--W) * 0.03)); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(122,82,48,0.75); }
.sheet__head { position: absolute; top: 5.5%; left: 17%; right: 9%; }
.strip--joey .sheet__head { text-align: right; }
.sheet__k { margin: 0 0 0.55em; font-family: var(--font-sans); font-size: max(8.5px, calc(var(--W) * 0.034)); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #8a6a2a; }
.sheet__name { margin: 0 0 0.3em; font-family: var(--font-display); font-weight: 600; font-size: calc(var(--W) * 0.128); line-height: 0.94; letter-spacing: -0.02em; color: #10231a; }
.sheet__name em { display: block; color: #2f6b45; }
.sheet__role { margin: 0 0 0.7em; font-family: var(--font-sans); font-size: max(8.5px, calc(var(--W) * 0.032)); letter-spacing: 0.14em; line-height: 1.35; text-transform: uppercase; color: #7a5230; }
.sheet__blurb { margin: 0; font-family: var(--font-text); font-size: max(13.5px, calc(var(--W) * 0.058)); line-height: 1.3; color: #2a2a22; }
.sheet__plate { position: absolute; left: 14%; right: 7%; bottom: 5.5%; height: 50%; border-radius: 999px 999px 3px 3px; overflow: hidden;
  background: linear-gradient(180deg, rgba(10,30,20,0.15), rgba(10,30,20,0.55)), url("/assets/site1/intro-meadow.webp") 50% 60% / cover no-repeat, #1b4a31;
  box-shadow: inset 0 0 0 3px rgba(243,236,217,0.9), inset 0 0 0 4px rgba(168,133,58,0.7), inset 0 -14px 0 -8px rgba(47,90,50,0.9); }
.strip--joey .sheet__plate { left: 11%; right: 10%; }
.sfig { position: absolute; bottom: 5.8%; height: min(55%, calc(var(--W) * 0.9 / var(--ar))); aspect-ratio: var(--ar); }
.strip--ram .sfig { right: -3%; }
.strip--joey .sfig { left: -7%; }
.sheet__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; pointer-events: none; }
.sheet__frame.on { opacity: 1; }
.sheet__folio { position: absolute; bottom: 1.9%; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: max(10px, calc(var(--W) * 0.036)); color: rgba(122,82,48,0.8); }
.back { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.3em; text-align: center; transform: none;
  background: repeating-linear-gradient(0deg, rgba(90,58,32,0.05) 0 1px, transparent 1px 22px), linear-gradient(180deg, #ebe0c3, #ddcca3); }
.back span { font-family: var(--font-display); font-size: calc(var(--W) * 0.1); color: rgba(90,58,32,0.4); }
.back i { font-family: var(--font-text); font-size: calc(var(--W) * 0.05); color: rgba(90,58,32,0.45); }
.strip__cast { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; opacity: 0; transform: translateZ(1px); transform-origin: 100% 50%;
  background: linear-gradient(270deg, rgba(0,0,0,0.6), rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05)); }
/* swing effects + tap target sit above the faces, never clipped */
.strip__fx { position: absolute; inset: 0; pointer-events: none; transform: translateZ(3px); }
.strip__hit { position: absolute; inset: 0; z-index: 5; transform: translateZ(4px); appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0;
  background: transparent; cursor: pointer; border-radius: 6px; }
.strip__hit:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
.strip--under .strip__hit { cursor: default; }
.strip__ring { position: absolute; left: 50%; top: 32%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid #b8892e; pointer-events: none;
  animation: introRing 1.8s var(--ease-out) infinite; }
@keyframes introRing { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.6); } }
.strip.swung .strip__ring, .strip--under .strip__ring { display: none; }
.strip__ball { position: absolute; left: var(--bx); top: var(--by); width: var(--bs); aspect-ratio: 1; margin: calc(var(--bs) * -0.5) 0 0 calc(var(--bs) * -0.5); opacity: 0; will-change: transform, opacity; }
.strip__dot { position: absolute; left: var(--bx); top: var(--by); width: calc(var(--bs) * 0.75); aspect-ratio: 1; margin: calc(var(--bs) * -0.375) 0 0 calc(var(--bs) * -0.375); border-radius: 50%; background: rgba(255,244,214,0.95); opacity: 0; will-change: transform, opacity; }
.strip__flash { position: absolute; left: var(--bx); top: var(--by); width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; border: 2px solid rgba(255,244,214,0.95); opacity: 0; }
.strip__carry { position: absolute; top: 40%; margin: 0; padding: 0.5rem 0.8rem; border-radius: 999px; background: var(--glass); border: 1px solid rgba(230,199,124,0.45);
  font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(0.9); transition: opacity 0.45s, transform 0.6s var(--ease-spring); }
.strip__carry b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0; color: var(--gold-2); margin-right: 0.35rem; vertical-align: -2px; }
.strip--ram .strip__carry { left: -8%; } .strip--joey .strip__carry { right: -8%; }
.strip__carry.on { opacity: 1; transform: none; }

/* --- the course stops --- */
.intro__stops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.istop { position: absolute; left: var(--gutter); bottom: calc(142px + env(safe-area-inset-bottom)); max-width: min(35rem, calc(100% - 2 * var(--gutter)));
  opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.istop.on { opacity: 1; transform: none; }
.istop--center { left: 50%; right: auto; bottom: auto; top: 30%; text-align: center; transform: translate3d(-50%, 24px, 0); width: min(40rem, calc(100% - 2 * var(--gutter))); }
.istop--center.on { transform: translate3d(-50%, 0, 0); }
.istop__k { font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 0.6rem; text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.istop__h { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.015em; color: var(--cream); margin: 0 0 0.7rem; text-shadow: 0 6px 30px rgba(0,0,0,0.55); }
.istop__h em { color: var(--gold-2); }
.istop__sub { font-size: 1.2rem; font-style: italic; color: rgba(241,234,214,0.9); margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,0.8); }
.istop__card { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1.2rem; align-items: start; padding: 1.2rem 1.3rem; border-radius: 20px;
  background: rgba(8,22,15,0.72); border: 1px solid rgba(230,199,124,0.3); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9); }
.istop__big { grid-row: span 2; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.4rem, 8vw, 5.6rem); line-height: 0.85; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.istop__bigk { display: block; font-family: var(--font-sans); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.4rem; max-width: 7rem; line-height: 1.4; }
.istop__list { list-style: none; margin: 0; padding: 0; }
.istop__list li { position: relative; padding: 0 0 0.55rem 1.1rem; font-size: 1.04rem; line-height: 1.4; color: rgba(241,234,214,0.9); }
.istop__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 2px rgba(230,199,124,0.35); }
.istop__q { margin: 0.2rem 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--gold-2); }
.istop.on .istop__list li { animation: introIn 0.8s var(--ease-out) both; }
.istop.on .istop__list li:nth-child(2) { animation-delay: 0.12s; } .istop.on .istop__list li:nth-child(3) { animation-delay: 0.24s; }
@keyframes introIn { from { opacity: 0; transform: translate3d(-12px, 0, 0); } to { opacity: 1; transform: none; } }

/* --- the final lawn --- */
.intro__lawn { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.intro__lawn.on { opacity: 1; }
.intro__lawn.on .mem__btn { pointer-events: auto; }
.lawn__head { position: absolute; top: calc(70px + env(safe-area-inset-top)); left: var(--gutter); right: var(--gutter); text-align: center; transition: opacity 0.4s; }
.intro__lawn.popping .lawn__head { opacity: 0; }
.mem { position: absolute; bottom: calc(128px + env(safe-area-inset-bottom)); height: min(46svh, 440px); aspect-ratio: var(--ar); pointer-events: none; }
.mem__btn { position: absolute; inset: 0; appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 30% 30% 8px 8px; }
.mem--ram { left: max(10%, calc(50% - 30rem)); }
.mem--joey { right: max(10%, calc(50% - 30rem)); }
.mem__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform-origin: 50% 100%; will-change: transform; filter: drop-shadow(0 22px 18px rgba(0,0,0,0.55)); pointer-events: none; }
.mem__shadow { position: absolute; left: 10%; right: 10%; bottom: -3%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent); transform-origin: 50% 50%; will-change: transform, opacity; }
.mem__tag { position: absolute; left: 50%; top: -2.3rem; transform: translateX(-50%); transition: opacity 0.3s; white-space: nowrap; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream);
  background: rgba(8,22,15,0.7); border: 1px solid rgba(230,199,124,0.35); border-radius: 999px; padding: 0.45rem 0.8rem; }
.mem__pop { position: absolute; bottom: calc(100% + 14px); width: min(370px, calc(100vw - 2 * var(--gutter))); text-align: left; padding: 1rem 1.1rem 1.05rem; border-radius: 18px;
  background: linear-gradient(165deg, rgba(243,236,217,0.97), rgba(226,211,174,0.97)); color: #10231a; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(0.94); transition: opacity 0.35s, transform 0.55s var(--ease-spring); pointer-events: none; z-index: 2; }
.mem--ram .mem__pop { left: 0; transform-origin: 20% 100%; }
.mem--joey .mem__pop { right: 0; transform-origin: 80% 100%; }
.mem.open .mem__pop { opacity: 1; transform: none; }
.mem.open .mem__tag { opacity: 0; }
.mem__pop::after { content: ""; position: absolute; bottom: -7px; width: 14px; height: 14px; background: #e4d6b4; transform: rotate(45deg); }
.mem--ram .mem__pop::after { left: 30%; } .mem--joey .mem__pop::after { right: 30%; }
.mem__pop h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; color: #10231a; }
.mem__pop .ep { font-family: var(--font-sans); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oak); margin: 0.15rem 0 0.6rem; }
.mem__pop dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; font-size: 0.92rem; line-height: 1.3; }
.mem__pop dt { font-family: var(--font-sans); font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(16,35,26,0.55); padding-top: 0.25rem; }
.mem__pop dd { margin: 0; }
.mem__pop q { display: block; margin-top: 0.65rem; font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--oak); }
.mem__glint { position: absolute; width: 26%; aspect-ratio: 1; left: 18%; top: 22%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,250,225,0.95), rgba(255,236,170,0.4) 30%, transparent 62%); }

/* --- phones --- */
@media (max-width: 700px) {
  .istop { bottom: calc(128px + env(safe-area-inset-bottom)); }
  .istop--center { top: 22%; }
  .istop__card { padding: 1rem; gap: 0.2rem 0.9rem; }
  .istop__big { font-size: 3.2rem; }
  .istop__list li { font-size: 0.95rem; padding-bottom: 0.4rem; }
  .istop__q { font-size: 0.98rem; }
  .mem { height: min(36svh, 300px); bottom: calc(150px + env(safe-area-inset-bottom)); }
  .mem__pop { padding: 0.8rem 0.9rem 0.85rem; width: min(300px, calc(100vw - 2 * var(--gutter))); }
  .mem__pop h3 { font-size: 1.12rem; }
  .mem__pop dl { font-size: 0.84rem; }
  .mem__pop q { font-size: 0.88rem; margin-top: 0.5rem; }
  .lawn__head .istop__h { font-size: 1.9rem; }
  .mem--ram { left: 3%; } .mem--joey { right: 3%; }
  .intro__hint { font-size: 1rem; }
}
@media (min-width: 701px) { .intro__deck { top: calc(76px + env(safe-area-inset-top)); bottom: calc(132px + env(safe-area-inset-bottom)); --H: calc(100svh - 208px); --W: min(30vw, calc(var(--H) * 0.5), 380px); perspective: 2000px; } }
@media (max-height: 640px) { .sheet__blurb { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro__rain::before, .strip__ring { animation: none; }
  .istop, .istop.on .istop__list li, .mem__pop, .intro__lawn { transition: opacity 0.4s; animation: none; transform: none; }
  .istop--center, .istop--center.on { transform: translateX(-50%); }
}