:root {
  --ink: #221b16;
  --cream: #f8f0df;
  --paper: #fffaf0;
  --gold: #f4a629;
  --deep-gold: #c96e1a;
  --plum: #5b2e48;
  --mint: #9bc8b4;
  --line: rgba(34, 27, 22, 0.18);
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body.lightbox-open { overflow: hidden; }
button, a { color: inherit; }
button { font: inherit; }
img, picture, video, canvas, svg { max-width: 100%; }
img { display: block; }
main, section, footer, .section-pad { min-width: 0; max-width: 100%; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 6px var(--ink); }

.noise {
  position: fixed;
  inset: 0;
  opacity: .045;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.glass-orbs { position: fixed; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; }
.glass-orb { position: absolute; display: block; border: 1px solid rgba(255,255,255,.55); border-radius: 48% 52% 56% 44% / 48% 43% 57% 52%; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.72), rgba(255,255,255,.16) 32%, rgba(244,166,41,.13) 70%); box-shadow: inset 14px 14px 28px rgba(255,255,255,.2), inset -18px -22px 32px rgba(91,46,72,.08), 0 24px 70px rgba(34,27,22,.08); backdrop-filter: blur(6px) saturate(135%); opacity: .44; will-change: transform; transform: translate3d(var(--orb-x,0),var(--orb-y,0),0) rotate(var(--orb-r,0deg)); }
.orb-one { width: 150px; height: 150px; left: -45px; top: 21%; }
.orb-two { width: 92px; height: 92px; right: 5%; top: 52%; }
.orb-three { width: 210px; height: 210px; right: -105px; top: 78%; opacity: .32; }

.site-header {
  position: fixed;
  z-index: 40;
  top: 14px;
  left: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,250,240,.73), rgba(255,255,255,.42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 42px rgba(34,27,22,.1);
  backdrop-filter: blur(18px) saturate(150%);
  transition: background .3s, box-shadow .3s, transform .3s;
}
body.has-scrolled .site-header { background: rgba(255,250,240,.9); box-shadow: inset 0 1px 0 #fff, 0 16px 45px rgba(34,27,22,.16); }
.mara-trail { --trail-progress: 8%; position: fixed; z-index: 32; left: 18px; top: 50%; width: 46px; height: 236px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 17px 0; border: 1px solid rgba(255,255,255,.62); border-radius: 100px; background: linear-gradient(160deg, rgba(255,255,255,.76), rgba(255,250,240,.38)); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 14px 38px rgba(34,27,22,.12); backdrop-filter: blur(16px) saturate(150%); transform: translateY(-50%); }
.mara-trail::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 21px; bottom: 21px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, var(--gold) 0 var(--trail-progress), rgba(34,27,22,.16) var(--trail-progress) 100%); transform: translateX(-50%); }
.mara-trail::after { content: attr(data-mood); position: absolute; left: 55px; top: 50%; width: max-content; padding: 9px 13px; border: 1px solid rgba(255,255,255,.72); border-radius: 100px; background: rgba(255,250,240,.88); color: var(--ink); box-shadow: 0 9px 26px rgba(34,27,22,.12); backdrop-filter: blur(12px); font-family: var(--serif); font-size: 12px; opacity: 0; transform: translate(-7px,-50%) scale(.92); transition: .25s; pointer-events: none; }
.mara-trail:hover::after { opacity: 1; transform: translate(0,-50%) scale(1); }
.mara-trail a { position: relative; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.mara-trail a i { width: 8px; height: 8px; border: 1px solid rgba(34,27,22,.5); border-radius: 50%; background: rgba(255,255,255,.86); transition: transform .25s, background .25s, box-shadow .25s; }
.mara-trail a.is-active i, .mara-trail a:hover i { background: var(--ink); box-shadow: 0 0 0 5px rgba(244,166,41,.35); transform: scale(1.18); }
.mara-trail a span { position: absolute; left: 36px; width: max-content; padding: 6px 9px; border-radius: 100px; background: var(--ink); color: var(--paper); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(-5px); transition: .2s; pointer-events: none; }
.mara-trail a:hover span, .mara-trail a:focus-visible span { opacity: 1; transform: none; }
.trail-paw { position: absolute; z-index: 3; left: 50%; top: var(--trail-progress); width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: linear-gradient(145deg, #ffd574, var(--gold)); padding: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 14px rgba(34,27,22,.22); transform: translate(-50%,-50%); transition: top .16s ease-out, left .16s ease-out, scale .2s, box-shadow .2s; cursor: grab; touch-action: none; }
.trail-paw:hover { scale: 1.12; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 9px 20px rgba(34,27,22,.28); }
.trail-paw.is-dragging { scale: 1.18; cursor: grabbing; transition: scale .15s, box-shadow .15s; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 11px 24px rgba(34,27,22,.3); }
.trail-paw svg { width: 15px; fill: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .16em; }
.brand svg { width: 30px; height: 30px; fill: var(--ink); }
nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 42px); font-size: 13px; font-weight: 600; }
nav a { position: relative; }
.site-header nav > a { min-height: 32px; display: inline-flex; align-items: center; }
nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--ink); transition: width .25s ease; }
nav a:hover::after { width: 100%; }
.nav-pat { position: relative; min-height: 42px; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(34,27,22,.18); border-radius: 100px; background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.48)); padding: 6px 7px 6px 14px; color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 #fff, 0 7px 18px rgba(34,27,22,.1); font-weight: 800; }
.nav-pat > [data-edit] { display: inline; min-width: 0; height: auto; margin: 0; border-radius: 0; background: transparent; color: inherit; font-size: 12px; white-space: nowrap; }
.nav-pat #navPatCount { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin: 0; padding: 0 6px; border-radius: 100px; background: var(--ink); color: var(--paper); font-size: 11px; }
.nav-pat:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 12px 23px rgba(34,27,22,.16); }

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(380px, 1fr) minmax(170px, .45fr);
  align-items: center;
  gap: 2vw;
  padding: 100px clamp(22px, 5vw, 76px) 70px;
  background: radial-gradient(circle at 72% 30%, #ffd67b 0, var(--gold) 23%, #ed9323 55%, #df771e 100%);
  overflow: hidden;
}
.hero::before { content: ""; position: absolute; width: 44vw; height: 44vw; min-width: 550px; min-height: 550px; border: 1px solid rgba(34,27,22,.22); border-radius: 50%; right: 9%; top: 5%; }
.hero-copy { position: relative; z-index: 3; align-self: center; }
.eyebrow, .section-label { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
.eyebrow::before { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; margin-right: 12px; vertical-align: middle; }
.hero-title { margin: 16px 0 26px; font-family: var(--serif); font-size: clamp(106px, 16vw, 260px); font-weight: 400; letter-spacing: -.09em; line-height: .68; white-space: nowrap; }
.hero-title span { display: inline-block; animation: letterIn .9s cubic-bezier(.16,1,.3,1) both; }
.hero-title span:nth-child(2) { animation-delay: .08s; }
.hero-title span:nth-child(3) { animation-delay: .16s; }
.hero-title span:nth-child(4) { animation-delay: .24s; }
@keyframes letterIn { from { transform: translateY(70%) rotate(6deg); opacity: 0; } }
.hero-intro { font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); line-height: 1.28; margin: 0; }

.hero-portrait { position: relative; z-index: 2; justify-self: center; width: min(36vw, 550px); transform: rotate(2.5deg); }
.hero-portrait picture { display: block; width: 100%; }
.hero-portrait img { width: 100%; height: auto; aspect-ratio: .8; object-fit: cover; border-radius: 46% 46% 22px 22px; filter: saturate(.88) contrast(1.04); box-shadow: 0 35px 80px rgba(75,40,11,.28); }
.portrait-halo { position: absolute; inset: -30px; border-radius: 50%; background: #ffd878; filter: blur(20px); opacity: .65; }
.portrait-tag { position: absolute; right: -24px; bottom: 13%; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,250,240,.62)); border: 1px solid rgba(255,255,255,.8); border-radius: 50%; width: 108px; height: 108px; display: grid; place-items: center; text-align: center; padding: 18px; color: var(--ink); text-transform: uppercase; font-size: 12px; font-weight: 800; transform: rotate(9deg); box-shadow: inset 0 1px 0 #fff, 5px 7px 0 var(--ink), 0 18px 30px rgba(34,27,22,.18); backdrop-filter: blur(12px) saturate(150%); cursor: pointer; font-family: inherit; transition: transform .25s, box-shadow .25s; }
.portrait-tag:hover { transform: rotate(-3deg) scale(1.08); box-shadow: 9px 10px 0 var(--ink); }

.hero-stats { position: relative; z-index: 3; display: grid; gap: 26px; border-left: 1px solid rgba(34,27,22,.35); padding-left: 25px; }
.hero-stats div { display: grid; }
.hero-stats [data-stat] { cursor: pointer; border-radius: 8px; transition: transform .2s, background .2s; }
.hero-stats [data-stat]:hover { transform: translateX(6px); background: rgba(255,255,255,.16); }
.hero-stats strong { font-family: var(--serif); font-size: clamp(38px, 4vw, 70px); line-height: 1; font-weight: 400; }
.hero-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-top: 5px; }
.scroll-cue { position: absolute; left: clamp(22px, 5vw, 76px); bottom: 25px; display: flex; gap: 12px; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.scroll-cue i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; animation: bob 1.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
.hero-orbit { position: absolute; z-index: 1; right: -3%; top: 11%; width: 280px; height: 280px; opacity: .62; overflow: visible; animation: orbitSpin 24s linear infinite; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
.hero-orbit text { fill: var(--ink); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ticker { overflow: hidden; background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); cursor: pointer; }
.ticker-track { width: max-content; display: flex; align-items: center; gap: 28px; padding: 18px 0; animation: ticker 24s linear infinite; }
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker span { font-family: var(--serif); font-size: 27px; font-style: italic; }
.ticker i { color: var(--gold); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-pad { padding: clamp(90px, 12vw, 180px) clamp(22px, 6vw, 92px); }
.section-label { display: flex; align-items: center; gap: 13px; margin-bottom: 46px; }
.section-label span { width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: 1.5fr .65fr; gap: 55px 8vw; align-items: start; }
.display-title { font-family: var(--serif); font-weight: 400; font-size: clamp(58px, 8.2vw, 132px); letter-spacing: -.055em; line-height: .9; margin: 0; }
.display-title em { color: var(--deep-gold); font-weight: 400; }
.about-copy { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.65; padding-top: 15px; }
.about-copy p:first-child { margin-top: 0; }
.age-card { grid-column: 1 / -1; margin-top: 50px; background: var(--plum); color: var(--paper); border-radius: 2px; padding: clamp(28px, 5vw, 62px); display: grid; grid-template-columns: .7fr 1.5fr .7fr; gap: 30px; align-items: center; cursor: pointer; transition: transform .3s, box-shadow .3s; }
.age-card:hover { transform: rotate(-.35deg) translateY(-4px); box-shadow: 10px 12px 0 var(--gold); }
.age-card span, .age-card small { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.age-card strong { font-family: var(--serif); font-size: clamp(40px, 5vw, 78px); font-weight: 400; text-align: center; }
.age-card small { text-align: right; line-height: 1.6; opacity: .75; }
.mixed-photo { position: relative; display: block; overflow: hidden; border: 0; padding: 0; background: #e7d5b7; cursor: zoom-in; box-shadow: 0 24px 50px rgba(47,30,17,.18); }
.mixed-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.mixed-photo:hover img { transform: scale(1.055); filter: saturate(1.08); }
.mixed-photo::after { content: "↗"; position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); font-size: 12px; transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.mixed-photo:hover::after { transform: scale(1); }
.story-collage { position: relative; grid-column: 1 / -1; min-height: clamp(370px, 52vw, 650px); margin-top: 30px; }
.story-photo-one { position: absolute; left: 2%; top: 4%; width: 56%; aspect-ratio: 30 / 19; transform: rotate(-3deg); }
.story-photo-two { position: absolute; right: 2%; bottom: 0; width: 38%; aspect-ratio: .8; transform: rotate(4deg); border: 12px solid var(--paper); }
.story-note { position: absolute; z-index: 3; right: 30%; top: 2%; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); border: 1px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); font-family: var(--serif); text-align: center; transform: rotate(8deg); }
.butterfly { position: absolute; z-index: 5; left: 67%; top: 28%; width: 46px; height: 38px; cursor: pointer; transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), transform .25s; }
.butterfly::before, .butterfly::after { content: ""; position: absolute; top: 2px; width: 23px; height: 30px; border: 1px solid var(--ink); background: #f4a629; }
.butterfly::before { right: 50%; border-radius: 75% 35% 70% 35%; transform-origin: right center; animation: wingLeft .28s ease-in-out infinite alternate; }
.butterfly::after { left: 50%; border-radius: 35% 75% 35% 70%; transform-origin: left center; animation: wingRight .28s ease-in-out infinite alternate; }
.butterfly i { position: absolute; z-index: 2; left: 50%; top: 9px; width: 5px; height: 25px; transform: translateX(-50%); border-radius: 50%; background: var(--ink); }
.butterfly b { position: absolute; z-index: 3; left: 50%; top: 1px; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: var(--ink); }
@keyframes wingLeft { to { transform: rotateY(66deg); } }
@keyframes wingRight { to { transform: rotateY(-66deg); } }

.playground { background: var(--mint); overflow: hidden; }
.play-score { font-family: var(--sans) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .14em; }
.play-score strong { font-family: var(--serif); font-size: 30px; letter-spacing: 0; vertical-align: middle; margin-right: 8px; }
.dog-stage { position: relative; width: min(42vw, 500px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.dog-stage::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(34,27,22,.35); border-radius: 50%; animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.045); } }
.dog-head { position: relative; z-index: 2; width: 58%; aspect-ratio: .92; border-radius: 46% 46% 50% 50%; background: #e9a944; box-shadow: inset 0 -18px 0 rgba(174,94,20,.13), 0 28px 55px rgba(56,42,27,.17); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.dog-ear { position: absolute; z-index: 1; top: 29%; width: 28%; height: 42%; border-radius: 60% 25% 70% 35%; background: #c97926; transform-origin: top center; }
.dog-ear.left { left: 9%; transform: rotate(22deg); }
.dog-ear.right { right: 9%; transform: rotate(-22deg) scaleX(-1); }
.dog-eyes { position: absolute; left: 19%; right: 19%; top: 31%; display: flex; justify-content: space-between; }
.dog-eyes span { width: 40px; height: 45px; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.dog-eyes i { display: block; width: 17px; height: 20px; background: var(--ink); border-radius: 50%; transform: translate(var(--eye-x, 0), var(--eye-y, 0)); transition: transform .08s linear; }
.dog-snout { position: absolute; left: 50%; top: 52%; width: 46%; height: 34%; transform: translateX(-50%); background: #f3c477; border-radius: 48%; }
.dog-snout i { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: 38%; height: 32%; background: var(--ink); border-radius: 55% 55% 48% 48%; }
.dog-tongue { position: absolute; left: 50%; top: 77%; width: 23%; height: 29%; transform: translateX(-50%); border-radius: 10px 10px 50% 50%; background: #e67a86; z-index: -1; transition: height .3s; }
.dog-message { position: absolute; z-index: 3; right: 5%; top: 12%; background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; width: 92px; height: 92px; display: grid; place-items: center; font-family: var(--serif); transform: rotate(8deg); box-shadow: 5px 6px 0 var(--ink); }
.dog-stage.scritching .dog-head { animation: happyHead .35s ease-in-out 4 alternate; }
.dog-stage.scritching .dog-ear.left { animation: leftEar .3s ease-in-out 5 alternate; }
.dog-stage.scritching .dog-ear.right { animation: rightEar .3s ease-in-out 5 alternate; }
@keyframes happyHead { to { transform: rotate(7deg) translateY(-8px); } }
@keyframes leftEar { to { transform: rotate(42deg); } }
@keyframes rightEar { to { transform: rotate(-42deg) scaleX(-1); } }
.click-spark { position: fixed; z-index: 75; pointer-events: none; color: var(--gold); font-family: var(--serif); font-size: 22px; left: var(--spark-x); top: var(--spark-y); animation: sparkPop .75s ease-out forwards; }
@keyframes sparkPop { from { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); } 30% { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y))) scale(1.2) rotate(var(--spin)); } }

/* The play area is object-led: ball, Mara, and a stack of memories. */
.play-intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px 60px; margin-bottom: 55px; }
.play-intro .display-title { max-width: 950px; }
.play-intro > p:not(.play-score) { align-self: end; max-width: 290px; font-family: var(--serif); font-size: clamp(19px, 2vw, 28px); }
.play-intro .play-score { grid-column: 1 / -1; margin: 0; }
.fetch-field { position: relative; min-height: clamp(560px, 68vw, 780px); border: 1px solid rgba(34,27,22,.45); border-radius: clamp(28px, 5vw, 70px); overflow: hidden; background: radial-gradient(circle at 72% 28%, rgba(255,255,255,.38), transparent 27%), linear-gradient(155deg, #b8d9c4, #82b69f); box-shadow: inset 0 0 0 10px rgba(255,255,255,.12); }
.fetch-field::before { content: ""; position: absolute; left: 50%; top: -15%; width: 1px; height: 130%; background: rgba(34,27,22,.18); transform: rotate(17deg); }
.field-line { position: absolute; border: 1px solid rgba(34,27,22,.18); border-radius: 50%; pointer-events: none; }
.line-one { width: 48%; aspect-ratio: 1; right: -12%; top: -12%; }
.line-two { width: 38%; aspect-ratio: 1; left: -14%; bottom: -24%; }
.field-caption { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); text-transform: uppercase; letter-spacing: .22em; font-size: 10px; font-weight: 700; opacity: .58; white-space: nowrap; }
.memory-deck { position: absolute; z-index: 4; left: 7%; top: 10%; width: min(29vw, 350px); aspect-ratio: .8; border: 12px solid var(--paper); transform: rotate(-6deg); box-shadow: 12px 16px 0 rgba(34,27,22,.18); }
.memory-deck::before { content: ""; position: absolute; z-index: -2; inset: -23px 14px 12px -16px; border: 1px solid var(--ink); background: #f0c95f; transform: rotate(9deg); }
.memory-deck.deck-flip { animation: deckFlip .55s cubic-bezier(.2,.8,.2,1); }
@keyframes deckFlip { 45% { transform: rotate(2deg) translateY(-20px) scale(.94); } }
.fetch-field .dog-stage { position: absolute; z-index: 5; right: 8%; bottom: 7%; width: min(34vw, 390px); aspect-ratio: 1; justify-self: auto; cursor: pointer; transition: transform .25s; }
.fetch-field .dog-stage:hover { transform: translateY(-8px) rotate(2deg); }
.toy-ball { position: absolute; z-index: 12; left: 48%; top: 22%; width: clamp(78px, 9vw, 118px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #f4ff7b 0, #d3e634 42%, #95a515 100%); border: 2px solid #6f781d; box-shadow: inset -13px -16px 0 rgba(76,88,11,.17), 0 22px 30px rgba(36,45,13,.24); cursor: grab; touch-action: none; user-select: none; animation: toyHover 2.2s ease-in-out infinite; }
.toy-ball:focus-visible { outline: 5px solid var(--paper); outline-offset: 6px; }
.toy-ball.is-dragging { position: fixed; animation: none; cursor: grabbing; transform: scale(1.12); box-shadow: inset -13px -16px 0 rgba(76,88,11,.17), 0 28px 45px rgba(36,45,13,.34); }
.toy-ball.is-flying { position: fixed; animation: none; pointer-events: none; }
.toy-ball.is-caught { opacity: 0; transform: scale(.25); transition: opacity .2s, transform .2s; }
.ball-seam { position: absolute; top: 4%; width: 52%; height: 90%; border: 3px solid rgba(255,255,255,.85); border-top: 0; border-bottom: 0; border-radius: 50%; pointer-events: none; }
.seam-one { left: -8%; transform: rotate(-18deg); }
.seam-two { right: -8%; transform: rotate(-18deg); }
.ball-arrow { position: absolute; right: -23px; top: -27px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); font-size: 15px; animation: arrowNudge 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes toyHover { 50% { transform: translateY(-9px) rotate(6deg); } }
@keyframes arrowNudge { 50% { transform: translate(4px,-4px); } }
.treat-jar { position: absolute; z-index: 7; left: 43%; bottom: 8%; width: 76px; height: 92px; border: 2px solid rgba(34,27,22,.7); border-radius: 12px 12px 22px 22px; background: rgba(255,250,240,.46); box-shadow: inset 9px 0 0 rgba(255,255,255,.25), 0 15px 20px rgba(34,27,22,.16); cursor: pointer; backdrop-filter: blur(2px); }
.jar-lid { position: absolute; left: -6px; right: -6px; top: -10px; height: 16px; border: 2px solid var(--ink); border-radius: 6px; background: var(--plum); }
.jar-label { position: absolute; z-index: 2; left: 50%; top: 31px; width: 36px; height: 36px; display: grid; place-items: center; transform: translateX(-50%) rotate(-5deg); border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); font-family: var(--serif); font-size: 22px; }
.treat-jar i { position: absolute; width: 22px; height: 10px; border-radius: 100px; background: #9a5d2c; transform: rotate(var(--r)); }
.treat-jar i:nth-of-type(1) { left: 8px; bottom: 10px; --r: 16deg; }
.treat-jar i:nth-of-type(2) { right: 8px; bottom: 14px; --r: -24deg; }
.treat-jar i:nth-of-type(3) { left: 16px; bottom: 30px; --r: -9deg; }
.treat-jar i:nth-of-type(4) { right: 13px; bottom: 36px; --r: 33deg; }
.treat-jar.is-shaking { animation: jarShake .55s ease-in-out; }
@keyframes jarShake { 20%,60% { transform: rotate(-10deg); } 40%,80% { transform: rotate(10deg); } }
.flying-treat { position: fixed; z-index: 96; width: 24px; height: 11px; border-radius: 100px; background: #9a5d2c; box-shadow: inset -4px -3px 0 rgba(62,32,12,.2); pointer-events: none; animation: treatToss 1s cubic-bezier(.15,.7,.25,1) forwards; }
.flying-treat::before, .flying-treat::after { content: ""; position: absolute; top: -3px; width: 8px; height: 17px; border-radius: 50%; background: inherit; }
.flying-treat::before { left: -2px; }.flying-treat::after { right: -2px; }
@keyframes treatToss { to { transform: translate(var(--treat-x), var(--treat-y)) rotate(var(--treat-r)); opacity: 0; } }
.thrown-treat { position: fixed; z-index: 96; width: 30px; height: 14px; border-radius: 100px; background: #a86732; border: 1px solid #673817; box-shadow: inset -5px -4px 0 rgba(62,32,12,.18), 0 9px 14px rgba(34,27,22,.2); pointer-events: none; }
.thrown-treat::before, .thrown-treat::after { content: ""; position: absolute; top: -4px; width: 10px; height: 20px; border-radius: 50%; background: inherit; border: inherit; }
.thrown-treat::before { left: -3px; }.thrown-treat::after { right: -3px; }
.thrown-treat.is-eaten { opacity: 0; transform: scale(.1); transition: opacity .28s, transform .28s; }

.runner-mara { position: fixed; z-index: 89; left: -210px; top: 65vh; width: 190px; height: 112px; pointer-events: none; opacity: 0; filter: drop-shadow(0 13px 10px rgba(34,27,22,.22)); }
.runner-mara.is-visible { opacity: 1; }
.runner-mara.from-right { transform: scaleX(-1); }
.runner-body { position: absolute; left: 45px; top: 31px; width: 112px; height: 58px; border-radius: 50% 56% 40% 44%; background: #d99235; }
.runner-head { position: absolute; z-index: 3; left: 7px; top: 11px; width: 76px; height: 76px; border: 5px solid #e5a34b; border-radius: 48% 48% 54% 54%; background: #e5a34b; overflow: hidden; }
.runner-head img { width: 100%; height: 100%; object-fit: cover; }
.runner-ear { position: absolute; z-index: 4; left: 50px; top: 8px; width: 36px; height: 48px; border-radius: 50% 20% 60% 30%; background: #ba6c27; transform: rotate(-22deg); transform-origin: top; }
.runner-tail { position: absolute; left: 145px; top: 25px; width: 51px; height: 18px; border-radius: 50%; border-top: 13px solid #c97d2e; transform-origin: left center; animation: runnerTail .18s ease-in-out infinite alternate; }
.runner-leg { position: absolute; top: 75px; width: 15px; height: 34px; border-radius: 8px; background: #ca7a2d; transform-origin: top; }
.leg-one { left: 61px; }.leg-two { left: 88px; }.leg-three { left: 126px; }.leg-four { left: 148px; }
.runner-mara.is-running .leg-one, .runner-mara.is-running .leg-three { animation: legRun .18s linear infinite alternate; }
.runner-mara.is-running .leg-two, .runner-mara.is-running .leg-four { animation: legRun .18s linear infinite alternate-reverse; }
.runner-mara.is-running .runner-body, .runner-mara.is-running .runner-head { animation: runnerBounce .22s ease-in-out infinite alternate; }
.runner-mouth-ball { position: absolute; z-index: 5; left: -5px; top: 60px; width: 30px; height: 30px; border-radius: 50%; background: #cfe332; border: 1px solid #65701a; opacity: 0; }
.runner-mara.has-ball .runner-mouth-ball { opacity: 1; }
.runner-speech { position: absolute; left: 38px; top: -34px; min-width: 88px; padding: 7px 10px; border: 1px solid var(--ink); border-radius: 100px; background: var(--paper); box-shadow: 3px 4px 0 var(--ink); text-align: center; font-family: var(--serif); opacity: 0; transform: scale(.7); }
.runner-mara.has-ball .runner-speech, .runner-mara.is-eating .runner-speech { opacity: 1; transform: scale(1); transition: .25s cubic-bezier(.34,1.56,.64,1); }
.runner-mara.from-right .runner-speech { transform: scaleX(-1) scale(.7); }
.runner-mara.from-right.has-ball .runner-speech, .runner-mara.from-right.is-eating .runner-speech { transform: scaleX(-1) scale(1); }
.runner-mara.is-eating .runner-head { animation: happyChomp .24s ease-in-out infinite alternate; }
.runner-mara.is-eating .runner-tail { animation-duration: .08s; }
.runner-mara.is-eating .runner-body { animation: happyWiggle .18s ease-in-out infinite alternate; }
@keyframes runnerTail { to { transform: rotate(-22deg); } }
@keyframes legRun { to { transform: rotate(38deg); } }
@keyframes runnerBounce { to { transform: translateY(-7px); } }
@keyframes happyChomp { to { transform: translateY(7px) rotate(-5deg); } }
@keyframes happyWiggle { to { transform: rotate(3deg) translateY(-3px); } }

.album { background: var(--cream); }
.album-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 70px; }
.album-heading .section-label { margin-bottom: 24px; }
.shuffle-button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; min-height: 50px; border: 1px solid rgba(34,27,22,.17); background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.46)); padding: 14px 20px; border-radius: 100px; color: var(--ink); cursor: pointer; font-weight: 800; font-size: 13px; box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(34,27,22,.1); backdrop-filter: blur(14px) saturate(145%); transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.shuffle-button::before, .nav-pat::before { content: ""; position: absolute; inset: 1px 35% 52% 8%; border-radius: 100px; background: linear-gradient(100deg, rgba(255,255,255,.75), transparent); pointer-events: none; }
.shuffle-button:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px) rotate(-1deg); box-shadow: 0 15px 32px rgba(34,27,22,.2); }
.shuffle-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.gallery { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(10px, 1.5vw, 24px); }
.gallery > * { min-width: 0; max-width: 100%; }
.gallery-card { position: relative; width: 100%; min-width: 0; min-height: 0; max-width: 100%; grid-column: span 4; overflow: hidden; background: #e9d9bd; cursor: zoom-in; border: 0; padding: 0; text-align: left; transition: transform .18s ease, box-shadow .18s ease; contain: layout paint; }
.gallery-card:hover { box-shadow: 0 18px 38px rgba(42,27,17,.18); }
.gallery-card.wide { grid-column: span 6; }
.gallery-card.square { grid-column: span 4; }
.gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.gallery-card:not(.wide) { aspect-ratio: .8; }
.gallery-card.square { aspect-ratio: 1; }
.gallery-card.wide { aspect-ratio: 30 / 19; }
.gallery-card:hover img { transform: scale(1.045); filter: saturate(1.08); }
.gallery-card::after { content: attr(data-label) " ↗"; position: absolute; left: 14px; right: 14px; bottom: 14px; width: max-content; max-width: calc(100% - 28px); overflow: hidden; padding: 9px 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 100px; background: rgba(255,250,240,.82); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(34,27,22,.16); backdrop-filter: blur(14px) saturate(145%); font-size: 10px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; letter-spacing: .08em; transform: translateY(25px); opacity: 0; transition: .3s ease; }
.gallery-card:hover::after { transform: translateY(0); opacity: 1; }
.gallery-skeleton { position: relative; overflow: hidden; grid-column: span 3; aspect-ratio: .8; background: #eadcc3; }
.gallery-skeleton.wide { grid-column: span 6; aspect-ratio: 30 / 19; }
.gallery-skeleton.square { aspect-ratio: 1; }
.gallery-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 45%, transparent 70%); animation: skeletonShine 1.35s ease-in-out infinite; }
@keyframes skeletonShine { to { transform: translateX(100%); } }
.gallery-error { grid-column: 1 / -1; padding: 50px; text-align: center; border: 1px dashed var(--line); }
.gallery-error button { display: block; min-height: 46px; margin: 18px auto 0; border: 1px solid rgba(34,27,22,.2); border-radius: 100px; background: linear-gradient(145deg, #ffd16e, var(--gold)); color: var(--ink); padding: 11px 19px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 24px rgba(34,27,22,.14); cursor: pointer; font-weight: 800; }

.manifesto { min-height: 75svh; padding: clamp(80px, 12vw, 170px) 8vw; background: var(--gold); position: relative; display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: background .45s; }
.manifesto p { font-family: var(--serif); font-size: clamp(52px, 8.5vw, 145px); line-height: .95; letter-spacing: -.05em; max-width: 1300px; margin: 0; text-align: center; }
.manifesto em { color: var(--paper); font-weight: 400; }
.manifesto-photo { position: absolute; z-index: 0; left: 4%; top: 8%; width: min(24vw, 330px); aspect-ratio: .8; transform: rotate(-8deg); border: 10px solid var(--paper); opacity: .82; }
.manifesto p, .sun-stamp { z-index: 2; }
.sun-stamp { position: absolute; right: 5%; bottom: 8%; width: 145px; height: 145px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-content: center; text-align: center; transform: rotate(10deg); }
.sun-stamp span { font-size: 9px; letter-spacing: .2em; }
.sun-stamp strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }

footer { background: var(--ink); color: var(--paper); padding: 70px clamp(22px, 6vw, 92px) 38px; display: grid; grid-template-columns: 1.25fr .42fr .8fr .8fr; gap: 30px; align-items: end; }
.footer-mark { font-family: var(--serif); font-size: clamp(65px, 9vw, 130px); line-height: .7; letter-spacing: -.04em; color: var(--gold); }
.footer-mark span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .45em; margin-top: 22px; }
footer p { font-size: 12px; line-height: 1.6; max-width: 260px; margin: 0; }
footer p:last-child { text-align: right; justify-self: end; }
.footer-photo { width: 100%; max-width: 170px; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--gold); box-shadow: none; }

.big-paw { position: fixed; z-index: 35; right: 24px; bottom: 22px; width: 112px; height: 112px; display: grid; place-items: center; overflow: visible; border: 1px solid rgba(255,255,255,.72); border-radius: 43% 57% 48% 52% / 53% 44% 56% 47%; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.94), rgba(255,250,240,.62) 43%, rgba(244,166,41,.25)); padding: 5px; cursor: pointer; box-shadow: inset 9px 10px 18px rgba(255,255,255,.55), inset -10px -13px 20px rgba(201,110,26,.12), 0 18px 35px rgba(33,22,14,.2); backdrop-filter: blur(15px) saturate(150%); transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.big-paw svg { width: 96px; height: 105px; overflow: visible; transform: translateY(8px) rotate(3deg); transition: transform .45s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 6px 5px rgba(56,31,17,.18)); }
.big-paw:hover { transform: translateY(-7px) rotate(-5deg); box-shadow: inset 9px 10px 18px rgba(255,255,255,.7), inset -10px -13px 20px rgba(201,110,26,.14), 0 25px 42px rgba(33,22,14,.24); }
.big-paw:hover svg { transform: translateY(2px) rotate(-5deg) scale(1.04); }
.big-paw:active { transform: scale(.9) rotate(5deg); }
.paw-arm { fill: url(#pawFur); stroke: rgba(95,48,21,.42); stroke-width: 2; }
.paw-shine { fill: rgba(255,241,198,.36); }
.paw-pad, .paw-toe { fill: url(#pawPad); stroke: rgba(255,220,180,.28); stroke-width: 1; }
.paw-bubble { position: absolute; right: 88%; top: -8px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,250,240,.7)); border: 1px solid rgba(255,255,255,.8); border-radius: 50%; width: 70px; height: 70px; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(34,27,22,.14); backdrop-filter: blur(12px); font-family: var(--serif); font-weight: 700; transform: scale(0) rotate(-12deg); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.big-paw.boop .paw-bubble { transform: scale(1) rotate(-12deg); }
.paw-trail { position: fixed; inset: 0; z-index: 34; pointer-events: none; overflow: hidden; }
.paw-print { position: absolute; font-size: 30px; color: var(--deep-gold); animation: pawFly 1.7s ease-out forwards; }
@keyframes pawFly { from { transform: translate(0,0) rotate(0) scale(.4); opacity: 0; } 20% { opacity: .85; } to { transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-r)) scale(1.2); opacity: 0; } }
.cursor-paw { position: fixed; z-index: 90; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); display: grid; place-items: center; font-size: 10px; pointer-events: none; opacity: 0; transform: translate(-50%,-50%); transition: opacity .2s; }
body.cursor-live .cursor-paw { opacity: 1; }

.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; padding: 0; margin: 0; background: rgba(24,18,14,.94); color: white; }
.lightbox[open] { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; animation: lightboxIn .35s ease; }
.lightbox::backdrop { background: transparent; }
@keyframes lightboxIn { from { opacity: 0; } }
.lightbox figure { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; min-width: 0; padding: 35px 0 18px; }
.lightbox figure img { max-width: min(82vw, 1500px); max-height: calc(100vh - 100px); object-fit: contain; }
.lightbox figure img { cursor: zoom-in; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.lightbox figure.is-zoomed { overflow: auto; }
.lightbox figure.is-zoomed img { transform: scale(1.65); cursor: zoom-out; }
.lightbox figcaption { width: min(82vw, 1500px); display: flex; justify-content: space-between; padding-top: 12px; text-transform: uppercase; font-size: 10px; letter-spacing: .14em; opacity: .7; }
.lightbox-close, .lightbox-nav { border: 1px solid rgba(255,255,255,.52); background: rgba(255,255,255,.12); color: white; border-radius: 50%; width: 48px; height: 48px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.18); backdrop-filter: blur(12px); cursor: pointer; font-size: 21px; transition: .2s; }
.lightbox-close:hover, .lightbox-nav:hover { background: white; color: var(--ink); }
.lightbox-close { position: absolute; top: 22px; right: 24px; z-index: 2; }
.lightbox-nav { justify-self: center; }

.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.motion-ready .gallery-card.reveal { filter: blur(7px); transform: translateY(55px) scale(.96); transition: opacity .75s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .7s ease, box-shadow .18s ease; }
.motion-ready .gallery-card.reveal.is-visible { filter: none; transform: none; }
.tap-pop { animation: tapPop .42s cubic-bezier(.2,.8,.2,1); }
@keyframes tapPop { 35% { transform: scale(.93) rotate(-1deg); } 70% { transform: scale(1.04) rotate(1deg); } }
.hero-title span { cursor: pointer; }
.hero-title span.letter-boop { animation: letterBoop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes letterBoop { 45% { transform: translateY(-24px) rotate(-8deg) scale(1.08); color: var(--paper); } }
body.sunshine-mode .hero { background: radial-gradient(circle at 72% 30%, #fff09b 0, #ffd244 25%, #f4a629 62%, #ef7f24 100%); }
body.sunshine-mode .portrait-halo { opacity: 1; transform: scale(1.12); }
body.sunshine-mode .manifesto { background: #ffd84f; }
.tiny-heart { position: fixed; z-index: 76; pointer-events: none; font-size: 22px; animation: heartFloat 1.25s ease-out forwards; }
@keyframes heartFloat { to { transform: translateY(-120px) rotate(20deg) scale(1.5); opacity: 0; } }
.click-reaction { position: fixed; z-index: 95; pointer-events: none; min-width: 120px; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 100px; background: var(--paper); box-shadow: 4px 5px 0 var(--ink); text-align: center; font-family: var(--serif); font-size: 14px; animation: reactionPop 1.25s ease-out forwards; }
@keyframes reactionPop { 0% { opacity: 0; transform: translateY(8px) scale(.7) rotate(-4deg); } 18% { opacity: 1; transform: translateY(0) scale(1) rotate(1deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px) scale(.96); } }
.liquid-ripple { position: fixed; z-index: 74; left: var(--ripple-x); top: var(--ripple-y); width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.72); border-radius: 48% 52% 44% 56% / 55% 43% 57% 45%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 12px rgba(255,255,255,.35), 0 0 24px rgba(244,166,41,.18); backdrop-filter: blur(2px); pointer-events: none; animation: liquidRipple .85s cubic-bezier(.12,.7,.2,1) forwards; }
@keyframes liquidRipple { from { opacity: .9; transform: translate(-50%,-50%) scale(.3) rotate(0); } to { opacity: 0; transform: translate(-50%,-50%) scale(4.2) rotate(55deg); } }

@supports (animation-timeline: view()) {
  .manifesto > p { animation: manifestoScroll linear both; animation-timeline: view(); animation-range: entry 5% cover 48%; }
  .sun-stamp { animation: stampScroll linear both; animation-timeline: view(); animation-range: entry 0% cover 70%; }
}
@keyframes manifestoScroll { from { opacity: .18; transform: translateY(70px) scale(.92); letter-spacing: -.08em; } to { opacity: 1; transform: none; letter-spacing: -.04em; } }
@keyframes stampScroll { from { transform: translateY(80px) rotate(-38deg) scale(.7); } to { transform: rotate(12deg) scale(1); } }

@media (max-width: 900px) {
  .site-header nav a { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr 1fr; padding-top: 130px; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-title { font-size: 30vw; }
  .hero-intro { display: none; }
  .hero-portrait { width: 55vw; justify-self: start; }
  .hero-stats { align-self: center; }
  .scroll-cue { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .play-intro { grid-template-columns: 1fr; }
  .play-intro > p:not(.play-score) { max-width: none; }
  .memory-deck { width: min(40vw, 320px); }
  .fetch-field .dog-stage { width: min(43vw, 370px); right: 3%; }
  .age-card { grid-template-columns: 1fr; text-align: center; }
  .age-card small { text-align: center; }
  .gallery-card { grid-column: span 6; }
  .gallery-card.wide { grid-column: span 12; }
  footer { grid-template-columns: 1fr 1fr; }
  .footer-mark { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .section-pad { padding: 80px 24px; }
  .display-title { font-size: clamp(52px, 12vw, 82px); }
  .hero { grid-template-columns: 1fr; padding: 115px 24px 75px; gap: 24px; }
  .hero-title { font-size: clamp(112px, 28vw, 190px); margin-bottom: 8px; }
  .hero-intro { display: block; max-width: 420px; font-size: 15px; line-height: 1.55; }
  .hero-portrait { width: min(76vw, 430px); justify-self: center; }
  .hero-stats { grid-template-columns: repeat(3,1fr); border-left: 0; border-top: 1px solid rgba(34,27,22,.35); padding: 22px 0 0; gap: 12px; text-align: center; }
  .hero-stats strong { font-size: clamp(32px, 8vw, 48px); }
  .about-grid { gap: 38px; }
  .about-copy { padding-top: 0; font-size: 17px; }
  .age-card { margin-top: 35px; padding: 30px 24px; border-radius: 18px; }
  .play-intro { gap: 14px; margin-bottom: 35px; }
  .play-intro > p:not(.play-score) { font-size: 20px; }
  .fetch-field { min-height: 690px; }
  .memory-deck { left: 6%; top: 7%; width: min(52vw,280px); }
  .fetch-field .dog-stage { width: min(62vw,340px); right: -3%; bottom: 4%; }
  .toy-ball { left: 12%; top: 52%; }
  .treat-jar { left: 59%; bottom: 35%; }
  .album-heading { margin-bottom: 42px; }
  .manifesto { padding-inline: 24px; }
  footer { padding-bottom: 120px; }
}

@media (max-width: 560px) {
  .glass-orbs { display: none; }
  .site-header { top: max(8px,env(safe-area-inset-top)); left: 8px; right: 8px; padding: 7px 8px 7px 12px; border-radius: 18px; }
  .brand { gap: 7px; font-size: 12px; letter-spacing: .12em; }
  .brand svg { width: 26px; height: 26px; }
  .nav-pat { min-height: 38px; padding: 4px 5px 4px 10px; gap: 6px; font-size: 10px; }
  .nav-pat #navPatCount { min-width: 28px; height: 28px; }
  .section-pad { padding: 68px 16px; }
  .section-label, .eyebrow { font-size: 10px; }
  .display-title { font-size: clamp(48px, 15vw, 66px); line-height: .94; }
  .hero { grid-template-columns: 1fr; padding: calc(102px + env(safe-area-inset-top)) 16px 56px; gap: 18px; }
  .hero-title { font-size: clamp(88px, 29vw, 132px); line-height: .78; }
  .hero-intro { display: block; margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
  .hero-title { margin-bottom: 8px; }
  .hero-orbit { width: 175px; height: 175px; right: -12%; top: 18%; opacity: .42; }
  .hero-portrait { width: min(100%,420px); justify-self: center; padding: 7px; border: 1px solid rgba(34,27,22,.16); border-radius: 34px; background: var(--paper); box-shadow: 8px 11px 0 rgba(34,27,22,.85), 0 28px 55px rgba(75,40,11,.22); transform: rotate(-1.2deg); }
  .hero-portrait picture { overflow: hidden; border-radius: 27px; }
  .hero-portrait img { height: auto; aspect-ratio: 4 / 3; border-radius: 27px; object-fit: cover; box-shadow: none; }
  .portrait-halo { inset: -14px; border-radius: 38px; filter: blur(16px); }
  .portrait-tag { width: 72px; height: 72px; right: -3px; padding: 10px; font-size: 8px; box-shadow: 3px 4px 0 var(--ink); }
  .hero-stats { padding-top: 16px; gap: 7px; }
  .hero-stats strong { font-size: 30px; }
  .hero-stats span { font-size: 8px; }
  .about-grid { gap: 30px; }
  .about-copy { font-size: 16px; line-height: 1.55; }
  .story-collage { min-height: 390px; margin-top: 10px; }
  .story-photo-one { left: -2%; width: 86%; }
  .story-photo-two { right: -1%; bottom: 8px; width: 55%; border-width: 8px; }
  .story-note { right: 3%; top: 2%; width: 82px; height: 82px; font-size: 12px; }
  .age-card { margin-top: 25px; padding: 24px 18px; gap: 16px; }
  .age-card strong { font-size: 36px; }
  .play-intro { margin-bottom: 30px; }
  .play-intro > p:not(.play-score) { margin: 0; font-size: 18px; }
  .fetch-field { min-height: 700px; border-radius: 26px; box-shadow: inset 0 0 0 6px rgba(255,255,255,.12); }
  .memory-deck { left: 5%; top: 6%; width: min(58vw,230px); border-width: 8px; }
  .fetch-field .dog-stage { width: min(68vw,290px); right: -7%; bottom: 5%; }
  .toy-ball { left: 10%; top: 51%; width: 82px; }
  .treat-jar { left: 62%; bottom: 34%; transform: scale(.82); }
  .field-caption { bottom: 18px; font-size: 9px; }
  .album-heading { display: grid; gap: 20px; margin-bottom: 32px; }
  .album-heading .section-label { margin-bottom: 14px; }
  .shuffle-button { width: 100%; justify-content: center; }
  .album { overflow: hidden; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: hidden; }
  .gallery-skeleton, .gallery-skeleton.wide, .gallery-skeleton.square { width: 100%; min-width: 0; grid-column: 1; }
  .gallery-card, .gallery-card.square, .gallery-card.wide { width: 100%; min-width: 0; min-height: 0; max-width: 100%; grid-column: 1; }
  .gallery-card.wide { aspect-ratio: 30 / 19; }
  .manifesto { min-height: 620px; padding: 80px 18px 110px; }
  .manifesto p { font-size: clamp(44px, 13vw, 58px); }
  .manifesto-photo { width: 58vw; opacity: .3; left: -12%; top: 5%; }
  .sun-stamp { width: 92px; height: 92px; right: 4%; bottom: 5%; }
  .sun-stamp strong { font-size: 18px; }
  footer { grid-template-columns: 1fr; padding: 58px 18px calc(118px + env(safe-area-inset-bottom)); gap: 24px; }
  .footer-mark { font-size: clamp(62px, 23vw, 94px); }
  .footer-photo { max-width: 130px; }
  footer p:last-child { justify-self: start; text-align: left; }
  .big-paw { width: 72px; height: 72px; right: 10px; bottom: max(12px,env(safe-area-inset-bottom)); }
  .big-paw svg { width: 62px; height: 68px; }
  .paw-bubble { right: 0; top: -63px; width: 62px; height: 62px; }
  .mara-trail { left: 8px; top: auto; bottom: max(12px,env(safe-area-inset-bottom)); width: min(220px,calc(100vw - 96px)); height: 44px; flex-direction: row; padding: 0 14px; transform: none; }
  .mara-trail::before { left: 20px; right: 20px; top: 50%; bottom: auto; width: auto; height: 2px; background: linear-gradient(to right, var(--gold) 0 var(--trail-progress), rgba(34,27,22,.16) var(--trail-progress) 100%); transform: translateY(-50%); }
  .mara-trail::after, .mara-trail a span { display: none; }
  .mara-trail a { width: 24px; height: 24px; }
  .trail-paw { left: var(--trail-progress); top: 50%; transform: translate(-50%,-50%); }
  .dog-message { width: 72px; height: 72px; right: 2%; font-size: 13px; }
  .dog-eyes span { width: 29px; height: 34px; }
  .dog-eyes i { width: 12px; height: 15px; }
  .lightbox[open] { display: block; }
  .lightbox figure { width: 100%; height: 100%; padding: 58px 12px 88px; }
  .lightbox figure img { max-width: 100%; max-height: calc(100svh - 165px); }
  .lightbox figcaption { width: 100%; padding: 12px 4px 0; }
  .lightbox-nav { position: fixed; z-index: 3; bottom: max(18px,env(safe-area-inset-bottom)); }
  .lightbox-nav.prev { left: 20px; }
  .lightbox-nav.next { right: 20px; }
  .lightbox-close { top: max(14px,env(safe-area-inset-top)); right: 14px; }
  .lightbox figure.is-zoomed img { transform: scale(1.35); }
  .runner-mara { width: 150px; transform: scale(.82); transform-origin: left center; }
  .runner-mara.from-right { transform: scaleX(-1) scale(.82); transform-origin: center; }
}

@media (max-width: 360px) {
  .site-header { padding-left: 10px; }
  .nav-pat > [data-edit] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-pat { padding: 5px; }
  .hero, .section-pad { padding-inline: 13px; }
  .hero-title { font-size: clamp(82px, 28vw, 104px); }
  .hero-stats { gap: 4px; }
  .hero-stats strong { font-size: 27px; }
  .fetch-field { min-height: 650px; }
  .big-paw { width: 66px; height: 66px; }
  .big-paw svg { width: 56px; height: 61px; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-paw { display: none; }
  .gallery-card::after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .motion-ready .reveal { opacity: 1; transform: none; }
  .glass-orbs { display: none; }
  .mara-trail { transition: none; }
}

/* Claymorphism art direction -------------------------------------------------
   Soft, toy-like surfaces wrap the existing interactions without flattening
   the personality of Mara's archive. */
:root {
  --ink: #4a2c35;
  --cream: #f3c6ae;
  --paper: #fff0e5;
  --gold: #f5ad68;
  --deep-gold: #cf6257;
  --plum: #8c5b76;
  --mint: #b7dbc7;
  --line: rgba(91, 54, 58, .15);
  --sans: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  --serif: "Arial Rounded MT Bold", "Avenir Next", "Trebuchet MS", sans-serif;
  --clay-light: rgba(255, 246, 237, .82);
  --clay-dark: rgba(142, 82, 72, .25);
  --clay-shadow: -12px -12px 26px var(--clay-light), 13px 15px 30px var(--clay-dark);
  --clay-small: -6px -6px 14px rgba(255, 247, 240, .82), 7px 8px 16px rgba(142, 82, 72, .23);
  --clay-inset: inset 5px 5px 10px rgba(139, 77, 72, .18), inset -5px -5px 10px rgba(255, 249, 243, .72);
}

body {
  background:
    radial-gradient(circle at 8% 7%, rgba(255, 241, 188, .72), transparent 25rem),
    radial-gradient(circle at 94% 38%, rgba(215, 167, 192, .5), transparent 32rem),
    var(--cream);
}

.noise { opacity: .025; }
.glass-orbs { opacity: .52; }
.glass-orb {
  border: 0;
  background: linear-gradient(145deg, #fbd8c4, #e9ad9e);
  box-shadow: var(--clay-shadow), inset 6px 6px 13px rgba(255,255,255,.45), inset -6px -6px 13px rgba(126,73,67,.12);
  backdrop-filter: none;
}

.site-header {
  top: 18px;
  left: 50%;
  right: auto;
  width: min(1180px, calc(100% - 38px));
  padding: 10px 12px 10px 20px;
  border: 0;
  border-radius: 26px;
  background: rgba(250, 218, 200, .9);
  box-shadow: -8px -8px 18px rgba(255,245,235,.72), 9px 11px 24px rgba(128,70,68,.2), inset 2px 2px 5px rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(125%);
  transform: translateX(-50%);
}
body.has-scrolled .site-header {
  background: rgba(250, 218, 200, .94);
  box-shadow: -8px -8px 18px rgba(255,245,235,.72), 9px 11px 24px rgba(128,70,68,.24), inset 2px 2px 5px rgba(255,255,255,.62);
}
.brand { font-size: 14px; }
.brand svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 12px;
  background: #f5ac7f;
  box-shadow: var(--clay-small), inset 2px 2px 4px rgba(255,255,255,.45);
}
nav a::after { height: 5px; bottom: -9px; border-radius: 10px; background: #cf6f70; }
.nav-pat, .shuffle-button {
  border: 0;
  background: #f4b997;
  box-shadow: var(--clay-small), inset 3px 3px 6px rgba(255,255,255,.42), inset -3px -3px 7px rgba(139,76,68,.1);
}
.nav-pat:hover, .shuffle-button:hover {
  color: var(--ink);
  background: #f8c5a4;
  box-shadow: -3px -3px 9px rgba(255,247,240,.85), 5px 7px 12px rgba(131,73,67,.25), var(--clay-inset);
}
.nav-pat #navPatCount { background: #8c5b76; box-shadow: inset 3px 3px 6px rgba(62,35,52,.24), inset -2px -2px 5px rgba(255,255,255,.18); }

.mara-trail {
  border: 0;
  background: #efbda7;
  box-shadow: var(--clay-small), inset 3px 3px 7px rgba(255,255,255,.42), inset -3px -3px 7px rgba(130,72,67,.12);
  backdrop-filter: none;
}
.mara-trail::after { border: 0; background: #f7d4c0; box-shadow: var(--clay-small); }
.mara-trail a i { border: 0; box-shadow: var(--clay-inset); background: #f6d8c7; }
.mara-trail a.is-active i, .mara-trail a:hover i { background: #8c5b76; box-shadow: 0 0 0 6px rgba(255,232,199,.48), var(--clay-small); }
.trail-paw { border: 0; background: #ffd47c; box-shadow: var(--clay-small), inset 3px 3px 5px rgba(255,255,255,.5); }

.hero {
  min-height: calc(100svh - 36px);
  margin: 18px;
  border-radius: clamp(34px, 5vw, 68px);
  padding-top: 118px;
  background:
    radial-gradient(circle at 74% 24%, rgba(255,246,192,.82), transparent 25%),
    radial-gradient(circle at 14% 82%, rgba(238,159,170,.38), transparent 27%),
    linear-gradient(145deg, #f7cfb9, #edb39e);
  box-shadow: inset 10px 10px 24px rgba(255,244,235,.7), inset -12px -12px 26px rgba(146,78,71,.12), 0 18px 42px rgba(112,63,61,.16);
}
.hero::before {
  right: 7%;
  top: 12%;
  border: 0;
  background: #efb59c;
  box-shadow: var(--clay-shadow), inset 9px 9px 18px rgba(255,240,230,.6), inset -10px -10px 20px rgba(132,72,66,.13);
}
.hero-copy { padding: clamp(20px, 3vw, 42px); border-radius: 42px; }
.eyebrow::before { width: 28px; height: 8px; border-radius: 20px; background: #d57972; }
.hero-title, .display-title, .age-card strong, .manifesto p, .footer-mark {
  font-family: var(--serif);
  font-weight: 800;
}
.hero-title {
  color: #8d566f;
  font-size: clamp(96px, 14vw, 225px);
  line-height: .74;
  text-shadow: -5px -5px 0 rgba(255,232,218,.78), 6px 7px 12px rgba(121,69,72,.2);
}
.hero-intro { font-family: var(--sans); font-weight: 650; line-height: 1.45; }
.hero-portrait {
  padding: 16px;
  border-radius: 45% 45% 34% 34% / 38% 38% 26% 26%;
  background: #f3bea2;
  box-shadow: var(--clay-shadow), inset 7px 7px 14px rgba(255,244,234,.62), inset -8px -8px 15px rgba(126,68,64,.13);
}
.hero-portrait picture { overflow: hidden; border-radius: inherit; }
.hero-portrait img { border-radius: inherit; box-shadow: var(--clay-inset); filter: saturate(.93) contrast(1.02); }
.portrait-halo { display: none; }
.portrait-tag {
  right: -16px;
  border: 0;
  background: #ffd878;
  box-shadow: -7px -7px 16px rgba(255,243,211,.78), 9px 11px 19px rgba(126,72,62,.25), inset 5px 5px 8px rgba(255,255,255,.42), inset -5px -5px 9px rgba(176,109,47,.18);
  backdrop-filter: none;
}
.portrait-tag:hover { box-shadow: -4px -4px 10px rgba(255,243,211,.78), 6px 8px 14px rgba(126,72,62,.24), var(--clay-inset); }
.hero-stats { border: 0; padding: 16px; gap: 15px; }
.hero-stats [data-stat] {
  padding: 17px 16px;
  border-radius: 25px;
  background: #efb89f;
  box-shadow: var(--clay-small), inset 3px 3px 7px rgba(255,255,255,.42), inset -3px -3px 7px rgba(130,72,67,.1);
}
.hero-stats [data-stat]:hover { background: #f2c0a7; transform: translateY(-4px) rotate(-1deg); }
.hero-stats strong { font-size: clamp(34px, 3.6vw, 58px); font-weight: 800; color: #8d566f; }
.scroll-cue i { border: 0; background: #ffd47c; box-shadow: var(--clay-small), inset 2px 2px 5px rgba(255,255,255,.45); }

.ticker {
  margin: 28px 18px;
  border: 0;
  border-radius: 27px;
  background: #8c5b76;
  box-shadow: -7px -7px 16px rgba(255,238,225,.66), 8px 10px 22px rgba(103,56,65,.23), inset 5px 5px 10px rgba(255,255,255,.12), inset -5px -5px 10px rgba(55,31,46,.17);
}
.ticker-track { padding: 16px 0; }
.ticker span { font-family: var(--serif); font-style: normal; font-size: 20px; font-weight: 800; }
.ticker i { color: #ffd878; }

.section-pad, .manifesto {
  width: calc(100% - 36px);
  margin: 28px 18px;
  border-radius: clamp(34px, 5vw, 68px);
}
.section-pad { padding: clamp(84px, 10vw, 150px) clamp(24px, 6vw, 92px); }
.section-label span {
  width: 38px;
  height: 38px;
  border: 0;
  background: #f1bea6;
  box-shadow: var(--clay-small), inset 3px 3px 6px rgba(255,255,255,.42);
}
.display-title { letter-spacing: -.065em; color: #67414f; }
.display-title em { color: #cf665e; font-style: normal; }

.about {
  background: #f8d8c5;
  box-shadow: inset 10px 10px 24px rgba(255,247,241,.75), inset -12px -12px 24px rgba(141,80,73,.11), 0 18px 38px rgba(111,61,60,.13);
}
.about-copy {
  padding: 26px;
  border-radius: 30px;
  background: #f3c9b2;
  box-shadow: var(--clay-shadow), inset 4px 4px 9px rgba(255,248,241,.55), inset -4px -4px 9px rgba(131,73,68,.09);
}
.mixed-photo {
  border: 12px solid #f7d8c7;
  border-radius: 38px;
  background: #e8bca7;
  box-shadow: var(--clay-shadow), inset 4px 4px 9px rgba(255,255,255,.44);
}
.mixed-photo img { border-radius: 27px; }
.mixed-photo::after { border: 0; background: #ffd47c; box-shadow: var(--clay-small); }
.story-photo-two { border-width: 12px; }
.story-note, .dog-message {
  border: 0;
  background: #ffd47c;
  box-shadow: var(--clay-shadow), inset 4px 4px 8px rgba(255,255,255,.42), inset -4px -4px 8px rgba(162,98,48,.14);
  font-weight: 800;
}
.age-card {
  border-radius: 38px;
  background: #8c5b76;
  box-shadow: -11px -11px 25px rgba(255,240,230,.74), 13px 15px 30px rgba(111,61,67,.25), inset 6px 6px 12px rgba(255,255,255,.1), inset -6px -6px 12px rgba(55,31,46,.17);
}
.age-card:hover { box-shadow: -7px -7px 17px rgba(255,240,230,.74), 9px 11px 22px rgba(111,61,67,.25), inset 7px 7px 13px rgba(52,29,44,.16), inset -5px -5px 10px rgba(255,255,255,.08); }

.playground {
  background: #b8dac8;
  box-shadow: inset 10px 10px 24px rgba(239,255,248,.62), inset -12px -12px 25px rgba(67,112,91,.14), 0 18px 38px rgba(77,86,72,.16);
}
.fetch-field {
  border: 0;
  background: linear-gradient(145deg, #c3e2d2, #a7cfbb);
  box-shadow: inset 14px 14px 26px rgba(239,255,247,.62), inset -14px -14px 28px rgba(57,105,84,.18), 0 16px 32px rgba(71,105,86,.14);
}
.field-line { border: 7px solid rgba(255,255,255,.17); }
.memory-deck { border-color: #f5d5c4; border-radius: 38px; }
.memory-deck::before { border: 0; border-radius: 38px; background: #f3c86e; box-shadow: var(--clay-shadow); }
.dog-stage::before { border: 0; background: #add2bd; box-shadow: var(--clay-shadow), var(--clay-inset); }
.dog-head { background: #e4a65f; box-shadow: -9px -9px 18px rgba(242,255,248,.52), 11px 13px 23px rgba(64,93,77,.22), inset 8px 8px 14px rgba(255,228,177,.34), inset -9px -9px 15px rgba(138,73,34,.15); }
.dog-ear { box-shadow: inset 5px 5px 10px rgba(255,214,159,.22), inset -6px -6px 11px rgba(107,54,24,.15), 4px 7px 10px rgba(65,91,74,.15); }
.dog-eyes span { border: 0; box-shadow: var(--clay-small), inset 3px 3px 6px rgba(98,61,56,.12); }
.toy-ball { border: 0; box-shadow: -7px -7px 15px rgba(239,255,247,.68), 9px 12px 19px rgba(51,91,67,.28), inset 8px 8px 13px rgba(255,255,190,.42), inset -9px -10px 15px rgba(76,100,15,.2); }
.ball-arrow { border: 0; background: #f9d7c1; box-shadow: var(--clay-small); }
.treat-jar { border: 0; border-radius: 18px 18px 26px 26px; background: rgba(255,236,222,.66); box-shadow: var(--clay-small), var(--clay-inset); }
.jar-lid { border: 0; border-radius: 10px; box-shadow: var(--clay-small), inset 2px 2px 4px rgba(255,255,255,.18); }
.jar-label { border: 0; box-shadow: var(--clay-small); }

.album {
  background: #efd0bc;
  box-shadow: inset 10px 10px 24px rgba(255,246,237,.68), inset -12px -12px 24px rgba(139,78,70,.11), 0 18px 38px rgba(111,61,60,.13);
}
.gallery { gap: clamp(18px, 2.3vw, 36px); }
.gallery-card, .gallery-skeleton {
  border: 10px solid #f6d8c7;
  border-radius: 36px;
  box-shadow: var(--clay-shadow), inset 3px 3px 7px rgba(255,255,255,.42);
}
.gallery-card img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 24px; }
.gallery-card:hover { box-shadow: -8px -8px 19px rgba(255,246,238,.78), 10px 13px 24px rgba(129,72,67,.26), inset 4px 4px 8px rgba(255,255,255,.45); }
.gallery-card::after { border: 0; background: rgba(255,220,194,.9); box-shadow: var(--clay-small); }

.manifesto {
  min-height: 80svh;
  background: #f3ad6a;
  box-shadow: inset 12px 12px 26px rgba(255,230,180,.58), inset -13px -13px 28px rgba(151,72,46,.17), 0 18px 38px rgba(111,61,60,.16);
}
.manifesto p { color: #68414e; text-shadow: -4px -4px 0 rgba(255,215,180,.48), 5px 6px 10px rgba(120,65,55,.14); }
.manifesto em { color: #fff0df; font-style: normal; }
.manifesto-photo { border-color: #f7d4bd; opacity: .72; }
.sun-stamp { border: 0; background: #ffd578; box-shadow: var(--clay-shadow), inset 4px 4px 8px rgba(255,255,255,.42); }

footer {
  width: calc(100% - 36px);
  margin: 28px 18px 18px;
  border-radius: clamp(34px, 5vw, 68px);
  background: #6d4558;
  box-shadow: inset 10px 10px 20px rgba(255,255,255,.08), inset -11px -11px 22px rgba(37,20,32,.19), 0 18px 38px rgba(87,45,55,.22);
}
.footer-mark { color: #ffd47c; text-shadow: -3px -3px 0 rgba(255,255,255,.08), 5px 6px 9px rgba(43,23,36,.22); }
.footer-photo { border: 9px solid #f2b888; border-radius: 35%; box-shadow: -7px -7px 15px rgba(255,255,255,.12), 8px 10px 18px rgba(35,18,30,.25); }
.big-paw {
  border: 0;
  background: #f5c6aa;
  box-shadow: -8px -8px 18px rgba(255,244,235,.82), 10px 12px 22px rgba(115,61,60,.26), inset 6px 6px 11px rgba(255,255,255,.46), inset -6px -6px 12px rgba(128,69,63,.12);
  backdrop-filter: none;
}
.big-paw:hover { box-shadow: -5px -5px 12px rgba(255,244,235,.82), 7px 9px 16px rgba(115,61,60,.26), var(--clay-inset); }
.paw-bubble, .click-reaction { border: 0; background: #ffd57b; box-shadow: var(--clay-small); }
.cursor-paw { border: 0; background: #ffd57b; box-shadow: var(--clay-small); }
.lightbox { background: rgba(74,44,53,.95); }
.lightbox-close, .lightbox-nav { border: 0; background: #8c5b76; box-shadow: -5px -5px 12px rgba(255,255,255,.12), 7px 8px 16px rgba(24,12,21,.28), inset 3px 3px 6px rgba(255,255,255,.12); }

@media (max-width: 900px) {
  .hero { padding-top: 125px; }
  .hero-copy { padding: 0; }
}

@media (max-width: 760px) {
  .hero, .section-pad, .manifesto, footer { width: calc(100% - 24px); margin-left: 12px; margin-right: 12px; }
  .hero { padding: 112px 24px 72px; }
  .hero-stats { background: transparent; }
  .hero-stats [data-stat] { padding: 13px 8px; }
  .section-pad { padding: 78px 24px; }
  .ticker { margin-left: 12px; margin-right: 12px; }
  .gallery { gap: 22px; }
}

@media (max-width: 560px) {
  .site-header { left: 8px; right: 8px; width: auto; transform: none; background: rgba(250,218,200,.94); }
  .hero, .section-pad, .manifesto, footer { width: calc(100% - 16px); margin: 16px 8px; border-radius: 32px; }
  .hero { padding: calc(100px + env(safe-area-inset-top)) 16px 55px; }
  .hero-title { font-size: clamp(82px, 27vw, 122px); text-shadow: -3px -3px 0 rgba(255,232,218,.78), 4px 5px 8px rgba(121,69,72,.18); }
  .hero-portrait { width: min(94%, 420px); padding: 10px; border: 0; border-radius: 38px; box-shadow: var(--clay-shadow), inset 5px 5px 10px rgba(255,244,234,.62), inset -5px -5px 10px rgba(126,68,64,.13); }
  .hero-portrait picture, .hero-portrait img { border-radius: 29px; }
  .hero-stats { border: 0; padding: 8px 0 0; gap: 8px; }
  .hero-stats [data-stat] { border-radius: 18px; padding: 12px 4px; }
  .section-pad { padding: 67px 16px; }
  .display-title { font-size: clamp(46px, 14vw, 64px); }
  .about-copy { padding: 20px; border-radius: 24px; }
  .story-photo-one, .story-photo-two { border-width: 8px; border-radius: 27px; }
  .mixed-photo img { border-radius: 19px; }
  .age-card { border-radius: 27px; }
  .fetch-field { border-radius: 28px; }
  .gallery { gap: 24px; }
  .gallery-card, .gallery-skeleton { border-width: 8px; border-radius: 28px; }
  .gallery-card img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 19px; }
  .manifesto { padding-inline: 18px; }
  footer { padding-left: 18px; padding-right: 18px; }
  .mara-trail { background: #efbda7; }
}

/* Golden palette refinement ------------------------------------------------ */
:root {
  --ink: #49311f;
  --cream: #f2c75d;
  --paper: #fff3c9;
  --gold: #f3a936;
  --deep-gold: #bd651c;
  --plum: #704638;
  --mint: #c8d5a0;
  --line: rgba(89, 58, 28, .16);
  --clay-light: rgba(255, 244, 194, .82);
  --clay-dark: rgba(139, 88, 25, .24);
  --clay-shadow: -12px -12px 26px var(--clay-light), 13px 15px 30px var(--clay-dark);
  --clay-small: -6px -6px 14px rgba(255, 246, 203, .82), 7px 8px 16px rgba(139, 88, 25, .22);
  --clay-inset: inset 5px 5px 10px rgba(137, 82, 19, .17), inset -5px -5px 10px rgba(255, 249, 218, .7);
}

body {
  background:
    radial-gradient(circle at 8% 7%, rgba(255, 246, 195, .76), transparent 25rem),
    radial-gradient(circle at 94% 38%, rgba(226, 160, 58, .36), transparent 32rem),
    var(--cream);
}
.glass-orb { background: linear-gradient(145deg, #f9d67d, #e8ad3e); }
.site-header, body.has-scrolled .site-header { background: rgba(248, 218, 137, .93); }
.brand svg { background: #f2b64c; }
nav a::after { background: #bd6d27; }
.nav-pat, .shuffle-button { background: #efbd58; }
.nav-pat:hover, .shuffle-button:hover { background: #f6ca6b; }
.nav-pat #navPatCount { background: #704638; }
.mara-trail, .mara-trail::after, .mara-trail a i { background: #efd080; }
.mara-trail a.is-active i, .mara-trail a:hover i { background: #704638; }

.hero {
  background:
    radial-gradient(circle at 74% 24%, rgba(255, 248, 191, .88), transparent 25%),
    radial-gradient(circle at 14% 82%, rgba(221, 139, 35, .3), transparent 27%),
    linear-gradient(145deg, #f7d77d, #ecb345);
}
.hero::before { background: #edbd57; }
.eyebrow::before { background: #bd6d27; }
.hero-title { color: #704638; text-shadow: -5px -5px 0 rgba(255, 237, 174, .78), 6px 7px 12px rgba(112, 68, 24, .2); }
.hero-portrait { background: #f0c760; }
.portrait-tag, .scroll-cue i, .story-note, .dog-message, .sun-stamp, .paw-bubble, .click-reaction, .cursor-paw { background: #ffdc70; }
.hero-stats [data-stat] { background: #eebb51; }
.hero-stats [data-stat]:hover { background: #f3c663; }
.hero-stats strong { color: #704638; }

.ticker { background: #704638; }
.section-label span { background: #efc661; }
.display-title { color: #5f4028; }
.display-title em { color: #b85f1d; }
.about { background: #f7dfa0; }
.about-copy { background: #f2cf76; }
.mixed-photo, .gallery-card, .gallery-skeleton { border-color: #f7dda0; background: #e5b754; }
.mixed-photo::after, .ball-arrow { background: #ffdc70; }
.age-card { background: #704638; }

.playground { background: #e8cd7a; }
.fetch-field { background: linear-gradient(145deg, #efd98f, #d9ba64); }
.dog-stage::before { background: #dfc36d; }
.memory-deck { border-color: #f5da99; }
.memory-deck::before { background: #efb948; }
.dog-head { background: #dea049; }
.album { background: #f0cd72; }
.gallery-card::after { background: rgba(255, 222, 132, .92); }

.manifesto { background: #eda839; }
.manifesto p { color: #583b26; text-shadow: -4px -4px 0 rgba(255, 224, 139, .5), 5px 6px 10px rgba(103, 59, 18, .14); }
.manifesto-photo { border-color: #f8dfa2; }
footer { background: #5b3b2b; }
.footer-photo { border-color: #eeb84e; }
.big-paw { background: #f1ca70; }
.lightbox { background: rgba(56, 37, 25, .96); }
.lightbox-close, .lightbox-nav { background: #704638; }

@media (max-width: 560px) {
  .site-header { background: rgba(248, 218, 137, .95); }
  .hero-title { text-shadow: -3px -3px 0 rgba(255, 237, 174, .78), 4px 5px 8px rgba(112, 68, 24, .18); }
  .mara-trail { background: #efd080; }
}

/* Device resilience and rendering efficiency ------------------------------ */
button, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nav-pat { min-height: 44px; }
.mara-trail { gap: 0; }
.mara-trail a { flex: 0 0 32px; width: 32px; height: 32px; }
.trail-paw { width: 36px; height: 36px; }
.trail-paw svg { width: 17px; }
.hero, .ticker, .section-pad, .manifesto, footer { max-width: 1800px; margin-left: auto; margin-right: auto; }
.gallery-card img, .mixed-photo img, .hero-portrait img { backface-visibility: hidden; }
.gallery-card { content-visibility: auto; contain-intrinsic-size: 800px 1000px; }
.gallery-card.wide { contain-intrinsic-size: 1200px 760px; }
.gallery-card.square { contain-intrinsic-size: 900px 900px; }

@media (max-height: 600px) and (min-width: 561px) {
  .mara-trail { height: min(70vh, 236px); }
  .big-paw { width: 82px; height: 82px; bottom: 12px; }
  .big-paw svg { width: 70px; height: 76px; }
}

@media (update: slow) {
  .glass-orbs, .cursor-paw { display: none; }
  .gallery-card img, .mixed-photo img { transition-duration: .2s; }
  .hero-portrait { transform: none !important; }
}

@media (forced-colors: active) {
  .site-header, .hero, .ticker, .section-pad, .manifesto, footer,
  .nav-pat, .shuffle-button, .gallery-card, .mixed-photo, .age-card,
  .mara-trail, .big-paw { border: 2px solid CanvasText; box-shadow: none; }
  .trail-paw, .section-label span, .hero-stats [data-stat] { border: 1px solid CanvasText; }
}

@media (max-width: 560px) {
  .hero, .section-pad, .manifesto, footer { margin-left: auto; margin-right: auto; }
  .ticker { margin-left: auto; margin-right: auto; width: calc(100% - 24px); }
  .nav-pat { min-height: 44px; }
  .nav-pat #navPatCount { min-width: 32px; height: 32px; }
}

/* Mara's clubhouse --------------------------------------------------------- */
.clubhouse {
  background:
    radial-gradient(circle at 89% 8%, rgba(255, 247, 183, .8), transparent 23rem),
    radial-gradient(circle at 5% 92%, rgba(194, 161, 82, .24), transparent 25rem),
    linear-gradient(145deg, #e6c76d, #dcb85d);
  box-shadow: inset 11px 11px 25px rgba(255, 248, 201, .6), inset -13px -13px 27px rgba(111, 76, 22, .16), 0 18px 38px rgba(90, 61, 20, .17);
}
.clubhouse-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .38fr); gap: 28px 8vw; align-items: end; margin-bottom: clamp(38px, 6vw, 72px); }
.clubhouse-heading .display-title { max-width: 900px; }
.clubhouse-heading > p { margin: 0 0 10px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.6; }
.clubhouse-kicker { margin: 0 0 12px; color: var(--deep-gold); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.clubhouse-grid { display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: clamp(22px, 3vw, 42px); align-items: stretch; }
.club-card, .club-tools { min-width: 0; border-radius: 38px; background: #f3d680; box-shadow: var(--clay-shadow), inset 6px 6px 12px rgba(255,251,210,.52), inset -6px -6px 13px rgba(134,88,22,.12); }
.club-card { padding: clamp(24px, 3vw, 38px); }
.club-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #704638; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.club-card-topline i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #ffdc70; box-shadow: var(--clay-small), inset 2px 2px 5px rgba(255,255,255,.42); font-style: normal; letter-spacing: 0; }
.club-card h3 { margin: 26px 0 10px; color: #5d3d25; font-family: var(--serif); font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -.055em; line-height: .95; }
.club-card p { line-height: 1.55; }
.mission-card { min-height: 310px; display: flex; flex-direction: column; }
.mission-card p { max-width: 440px; margin: 0; font-size: clamp(17px, 1.35vw, 21px); }
.club-action { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 100px; background: #704638; color: #fff3c9; box-shadow: -5px -5px 12px rgba(255,249,207,.48), 7px 8px 14px rgba(93,57,23,.28), inset 3px 3px 6px rgba(255,255,255,.1); padding: 13px 20px; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.mission-card .club-action { margin-top: auto; align-self: flex-start; }
.club-action:hover { background: #80513b; transform: translateY(-3px); box-shadow: -4px -4px 9px rgba(255,249,207,.46), 5px 7px 12px rgba(93,57,23,.28), var(--clay-inset); }
.club-action:disabled { cursor: wait; opacity: .68; transform: none; }
.treat-game { display: grid; grid-template-rows: auto auto auto minmax(260px, 1fr) auto; min-height: 480px; }
.game-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.game-heading p { max-width: 170px; margin: 24px 0 9px; font-size: 14px; }
.game-scoreboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.game-scoreboard span { display: grid; gap: 4px; padding: 10px; border-radius: 18px; background: #e8c05e; box-shadow: var(--clay-inset); color: #704638; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.game-scoreboard strong { font-family: var(--serif); font-size: 28px; letter-spacing: -.04em; line-height: 1; }
.treat-board { position: relative; min-height: 270px; overflow: hidden; border-radius: 30px; background: linear-gradient(145deg, #d5b154, #edce75); box-shadow: inset 10px 10px 18px rgba(116,75,18,.16), inset -8px -8px 17px rgba(255,246,181,.52); }
.treat-board::before { content: "MARA'S SNACK ZONE"; position: absolute; left: 50%; top: 50%; color: rgba(91,57,20,.16); font-size: clamp(17px, 2.3vw, 27px); font-weight: 900; letter-spacing: .16em; transform: translate(-50%,-50%) rotate(-12deg); white-space: nowrap; }
.treat-board-mark { position: absolute; width: 84px; height: 84px; border: 7px solid rgba(255,247,189,.32); border-radius: 50%; }
.treat-board-mark.mark-one { left: -22px; bottom: -25px; }.treat-board-mark.mark-two { right: -23px; top: -20px; }
.game-treat { position: absolute; z-index: 2; left: 50%; top: 50%; width: 84px; height: 45px; border: 0; border-radius: 50% 48% 46% 53%; background: linear-gradient(145deg, #ba7540, #8f4c2c); color: #fff3c9; box-shadow: -5px -5px 10px rgba(255,240,187,.48), 7px 8px 12px rgba(84,48,20,.28), inset 4px 4px 7px rgba(255,195,123,.24); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transform: translate(-50%,-50%) rotate(-7deg); transition: left .18s cubic-bezier(.18,.86,.3,1), top .18s cubic-bezier(.18,.86,.3,1), transform .18s cubic-bezier(.2,1.3,.3,1); cursor: pointer; }
.game-treat::before, .game-treat::after { content: ""; position: absolute; top: -9px; width: 19px; height: 19px; border-radius: 50%; background: inherit; }.game-treat::before { left: 8px; }.game-treat::after { right: 8px; }
.game-treat:disabled { opacity: .56; cursor: not-allowed; }.game-treat:not(:disabled):hover, .game-treat.is-caught { transform: translate(-50%,-50%) rotate(7deg) scale(1.1); }
.game-actions { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; margin-top: 18px; }.game-actions p { margin: 0; font-size: 13px; line-height: 1.35; }
.passport-card { grid-row: span 2; }.passport-card h3 { margin-bottom: 24px; }
.passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.passport-grid li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 9px; align-items: center; min-height: 70px; padding: 9px; border-radius: 19px; background: #e7bf61; box-shadow: var(--clay-inset); color: #795137; opacity: .62; transition: transform .25s, background .25s, opacity .25s; }
.passport-grid li.is-earned { background: #ffda72; color: #604026; opacity: 1; transform: rotate(-1deg); box-shadow: var(--clay-small), inset 3px 3px 6px rgba(255,255,255,.42); }
.passport-mark { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #dca74b; box-shadow: inset 3px 3px 5px rgba(117,71,20,.16), inset -3px -3px 5px rgba(255,242,172,.44); font-family: var(--serif); font-size: 18px; font-weight: 900; }
.passport-grid li.is-earned .passport-mark { background: #704638; color: #fff3c9; }
.passport-grid b { overflow: hidden; font-size: 11px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }.passport-grid small { font-size: 10px; font-weight: 800; }
.passport-summary { margin: 22px 0 0; color: #704638; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.club-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 13px; }
.club-tool { min-height: 150px; display: grid; align-content: center; justify-items: center; gap: 5px; border: 0; border-radius: 26px; background: #eac35f; box-shadow: var(--clay-small), inset 4px 4px 8px rgba(255,249,204,.48), inset -4px -4px 8px rgba(123,79,20,.1); color: #5e3f27; padding: 15px 10px; text-align: center; cursor: pointer; transition: transform .22s, box-shadow .22s, background .22s; }
.club-tool:hover { background: #f5d377; box-shadow: -4px -4px 9px rgba(255,249,204,.56), 6px 7px 12px rgba(111,70,18,.24), var(--clay-inset); transform: translateY(-4px) rotate(-1deg); }.club-tool.is-active { background: #704638; color: #fff3c9; }
.club-tool > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,249,204,.38); font-family: var(--serif); font-size: 24px; font-weight: 900; }.club-tool b { font-size: 13px; }.club-tool small { font-size: 10px; line-height: 1.25; }
#clubhouseNotice { grid-column: 1 / -1; min-height: 18px; margin: 0; color: #704638; font-size: 12px; font-weight: 700; text-align: center; }

body.calm-mode .glass-orbs, body.calm-mode .cursor-paw { display: none; }
body.calm-mode *, body.calm-mode *::before, body.calm-mode *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }

@media (max-width: 900px) {
  .clubhouse-grid { grid-template-columns: 1fr 1fr; }.passport-card { grid-row: auto; }.club-tools { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .clubhouse-heading { grid-template-columns: 1fr; gap: 10px; }.clubhouse-heading > p { max-width: 530px; }.clubhouse-grid { grid-template-columns: 1fr; }.mission-card, .treat-game { min-height: auto; }.club-tools { grid-column: auto; }
}
@media (max-width: 560px) {
  .club-card { border-radius: 27px; padding: 22px 17px; }.club-card h3 { margin-top: 21px; font-size: clamp(30px, 11vw, 43px); }.clubhouse-heading { margin-bottom: 34px; }.treat-game { min-height: 0; }.treat-board { min-height: 250px; border-radius: 24px; }.game-actions { grid-template-columns: 1fr; }.game-actions .club-action { width: 100%; }.passport-grid { gap: 9px; }.passport-grid li { grid-template-columns: 29px minmax(0, 1fr); min-height: 64px; padding: 8px; }.passport-mark { width: 28px; height: 28px; font-size: 15px; }.passport-grid b { font-size: 10px; }.club-tools { grid-template-columns: 1fr; padding: 10px; }.club-tool { min-height: 92px; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; justify-items: start; text-align: left; padding: 14px; }.club-tool > span { grid-row: span 2; }.club-tool small { text-align: left; }.game-scoreboard strong { font-size: 25px; }
}

/* Golden progression, memory match, and mood oracle ----------------------- */
.golden-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 0 0 clamp(26px, 4vw, 46px); padding: 18px 22px; border-radius: 30px; background: #f3d57d; box-shadow: var(--clay-shadow), inset 5px 5px 10px rgba(255,251,211,.52), inset -5px -5px 11px rgba(126,82,20,.11); }
.golden-level-badge { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; background: #704638; color: #fff3c9; box-shadow: var(--clay-small), inset 3px 3px 7px rgba(255,255,255,.12); font-family: var(--serif); font-size: 29px; font-weight: 900; transform: rotate(-3deg); }
.golden-level-copy { min-width: 0; display: grid; gap: 7px; }
.golden-level-copy > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.golden-level-copy span, .golden-bones span { color: #795137; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.golden-level-copy strong { color: #5d3d25; font-family: var(--serif); font-size: clamp(19px, 2vw, 27px); }
.golden-level-copy p { margin: 0; color: #795137; font-size: 11px; font-weight: 700; }
.golden-level-track { height: 12px; overflow: hidden; border-radius: 100px; background: #ddaf4f; box-shadow: var(--clay-inset); }
.golden-level-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #704638, #a86331); box-shadow: inset 2px 2px 4px rgba(255,255,255,.15); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.golden-bones { min-width: 92px; display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 20px; background: #e9bd58; box-shadow: var(--clay-inset); }
.golden-bones strong { color: #704638; font-family: var(--serif); font-size: 28px; line-height: 1; }

.mission-streak { margin: 18px 0 10px !important; color: #795137; font-size: 11px !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mission-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.mission-card .mission-actions .club-action { margin-top: 0; }
.secondary-action { background: #e8bb58; color: #5d3d25; box-shadow: var(--clay-small), inset 3px 3px 6px rgba(255,249,204,.42); }
.secondary-action:hover { background: #f3cd70; color: #5d3d25; }

.treat-game { grid-row: span 2; }
.passport-card { grid-column: 1 / -1; grid-row: auto; }
.passport-card .passport-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.club-tools { grid-column: 1 / -1; }

.memory-match-card { display: grid; align-content: start; }
.match-scoreboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
.match-scoreboard span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 17px; background: #e8c05e; box-shadow: var(--clay-inset); color: #704638; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.match-scoreboard strong { font-family: var(--serif); font-size: 25px; }
.match-board { min-height: 260px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-content: center; padding: 13px; border-radius: 28px; background: linear-gradient(145deg, #d5b154, #edce75); box-shadow: var(--clay-inset); }
.match-board > p { grid-column: 1 / -1; margin: 0; padding: 55px 16px; color: #795137; text-align: center; }
.match-card { position: relative; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 17px; background: #704638; box-shadow: var(--clay-small), inset 3px 3px 6px rgba(255,255,255,.1); cursor: pointer; transform-style: preserve-3d; transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .25s; }
.match-card:hover { transform: translateY(-3px) rotate(-1deg); }
.match-card-back { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, #80513b, #5d382d); color: #ffdc70; font-family: var(--serif); font-size: clamp(22px, 3vw, 35px); font-weight: 900; transition: opacity .2s, transform .3s; }
.match-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.82); transition: opacity .22s, transform .34s cubic-bezier(.2,.9,.25,1); }
.match-card.is-flipped, .match-card.is-matched { box-shadow: -4px -4px 9px rgba(255,249,204,.54), 6px 7px 12px rgba(94,58,22,.25); transform: translateY(-2px) rotate(0); }
.match-card.is-flipped .match-card-back, .match-card.is-matched .match-card-back { opacity: 0; transform: scale(.7) rotate(10deg); }
.match-card.is-flipped img, .match-card.is-matched img { opacity: 1; transform: scale(1); }
.match-card.is-matched { outline: 4px solid #ffdc70; outline-offset: -4px; }
.match-card:disabled { cursor: default; opacity: 1; }
.match-actions { margin-top: 16px; }

.oracle-card { display: grid; align-content: start; }
.oracle-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.oracle-choices button { min-height: 48px; border: 0; border-radius: 18px; background: #e8bd5d; color: #604026; box-shadow: var(--clay-small), inset 3px 3px 6px rgba(255,249,204,.4); font-weight: 900; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.oracle-choices button:hover, .oracle-choices button[aria-pressed="true"] { background: #704638; color: #fff3c9; transform: translateY(-2px); }
.oracle-result { min-height: 120px; display: grid; place-items: center; margin: 0; padding: 22px; border-radius: 25px; background: #edc96c; box-shadow: var(--clay-inset); color: #5d3d25; font-family: var(--serif); font-size: clamp(17px, 1.8vw, 23px); line-height: 1.35; text-align: center; }

@media (max-width: 1100px) {
  .passport-card .passport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Clubhouse directory and Mara Says --------------------------------------- */
.clubhouse-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(26px, 4vw, 42px); padding: 10px; border-radius: 26px; background: #dfb553; box-shadow: var(--clay-inset); }
.clubhouse-directory a { min-width: 0; min-height: 60px; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 9px; align-items: center; border-radius: 19px; background: #efcb6f; box-shadow: var(--clay-small), inset 3px 3px 6px rgba(255,250,207,.4); padding: 10px 12px; color: #5d3d25; transition: transform .2s, background .2s, box-shadow .2s; }
.clubhouse-directory a:hover, .clubhouse-directory a:focus-visible { background: #ffdc7b; box-shadow: -3px -3px 8px rgba(255,249,202,.52), 5px 6px 10px rgba(101,62,17,.22), var(--clay-inset); transform: translateY(-2px); }
.clubhouse-directory span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #704638; color: #fff3c9; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.clubhouse-directory b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#dailyMission, #treatCatch, #memoryMatch, #maraOracle, #maraSays, #passportTitle, #clubhouseExtras { scroll-margin-top: 105px; }

.says-game { display: grid; align-content: start; }
.says-board { min-height: 310px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 18px; padding: 15px; border-radius: 30px; background: linear-gradient(145deg, #d1a94b, #ebca70); box-shadow: var(--clay-inset); }
.says-pad { min-height: 125px; display: grid; place-content: center; justify-items: center; gap: 7px; border: 0; border-radius: 25px; color: #fff3c9; box-shadow: -5px -5px 11px rgba(255,246,192,.45), 7px 8px 13px rgba(91,54,20,.25), inset 5px 5px 9px rgba(255,255,255,.12), inset -5px -5px 9px rgba(61,34,20,.15); cursor: pointer; transition: transform .18s cubic-bezier(.2,.85,.25,1), filter .18s, box-shadow .18s; }
.says-pad span { font-family: var(--serif); font-size: clamp(28px, 4vw, 43px); font-weight: 900; line-height: 1; }
.says-pad small { font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.nap-pad { background: linear-gradient(145deg, #825c70, #634153); }
.ball-pad { background: linear-gradient(145deg, #a5ad4b, #77852f); }
.snack-pad { background: linear-gradient(145deg, #bd7440, #8e4d2d); }
.pat-pad { background: linear-gradient(145deg, #b85f4c, #8f4438); }
.says-pad:hover, .says-pad:focus-visible { filter: brightness(1.08); transform: translateY(-3px); }
.says-pad.is-lit { filter: brightness(1.3) saturate(1.15); box-shadow: 0 0 0 6px #ffec9a, 0 0 28px rgba(255,237,137,.78), inset 5px 5px 10px rgba(255,255,255,.25); transform: translateY(-4px) scale(1.035); }
.says-board.is-playing .says-pad { cursor: wait; }
.says-board:not(.is-listening) .says-pad:not(.is-lit) { filter: saturate(.78) brightness(.88); }
.says-actions { margin-top: 18px; }
.passport-card .passport-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

@media (max-width: 900px) {
  .clubhouse-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .says-game { grid-column: 1 / -1; }
  .passport-card .passport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .says-game { grid-column: auto; }
}
@media (max-width: 560px) {
  .clubhouse-directory { display: flex; overflow-x: auto; margin-inline: -2px; padding: 9px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .clubhouse-directory::-webkit-scrollbar { display: none; }
  .clubhouse-directory a { flex: 0 0 148px; min-height: 56px; scroll-snap-align: start; }
  .says-board { min-height: 280px; gap: 9px; padding: 10px; border-radius: 23px; }
  .says-pad { min-height: 118px; border-radius: 19px; }
  .says-pad.is-lit { box-shadow: 0 0 0 4px #ffec9a, 0 0 20px rgba(255,237,137,.72), inset 4px 4px 8px rgba(255,255,255,.24); }
}
@media (forced-colors: active) {
  .clubhouse-directory, .clubhouse-directory a, .says-board, .says-pad { border: 2px solid CanvasText; box-shadow: none; }
  .says-pad.is-lit { outline: 5px solid Highlight; }
}
@media (max-width: 900px) {
  .treat-game { grid-row: auto; }
  .passport-card, .club-tools { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .golden-meter { grid-template-columns: auto minmax(0, 1fr); }
  .golden-bones { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: center; align-items: baseline; gap: 7px; }
  .passport-card, .club-tools { grid-column: auto; }
}
@media (max-width: 560px) {
  .golden-meter { gap: 12px; padding: 15px; border-radius: 24px; }
  .golden-level-badge { width: 48px; height: 48px; border-radius: 16px; font-size: 24px; }
  .golden-level-copy > div:first-child { display: grid; gap: 1px; }
  .mission-actions { display: grid; width: 100%; }
  .mission-actions .club-action { width: 100%; }
  .match-board { min-height: 230px; gap: 7px; padding: 9px; border-radius: 22px; }
  .match-card { border-radius: 13px; }
  .passport-card .passport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}