:root{--ink:#3a2f22;--parchment:#e9dec3;--brass:#8a6d3b;--frame:#1d1810;--halo:rgba(233,222,195,.92)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--frame)}
body{font-family:'IM Fell English',Georgia,serif;color:var(--ink)}
/* width/height 100% is load-bearing: inset alone doesn't stretch a replaced
   element, and the buffer is dpr-times larger than the viewport */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#scene.dragging{cursor:grabbing}
.vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 30px rgba(20,15,8,.55)}
header{position:fixed;top:28px;left:34px;pointer-events:none;max-width:480px}
header .eyebrow{font-size:13px;letter-spacing:.32em;text-transform:uppercase;opacity:.92;white-space:nowrap}
header .eb-rev{white-space:nowrap}   /* keep "change · r66" together so the revision never orphans to a 3rd line */
header h1{font-size:46px;line-height:1;font-weight:400;margin-top:6px}
header p{font-style:italic;font-size:15px;margin-top:8px;opacity:.9}
/* more opaque than the shared halo so the dark text stays legible over the
   bright parchment-era scene rather than washing into it */
.plate{background:rgba(234,224,199,.97);padding:14px 18px 16px;border:1px solid rgba(58,47,34,.45);box-shadow:0 6px 24px rgba(20,15,8,.28)}
.note{position:fixed;top:124px;right:34px;font-style:italic;font-size:13px;opacity:.85;background:var(--halo);
  padding:6px 12px;border:1px solid rgba(58,47,34,.3);pointer-events:none;max-width:300px;text-align:right}
#tip{position:fixed;pointer-events:none;background:var(--halo);border:1px solid rgba(58,47,34,.45);
  padding:7px 12px;font-size:14px;display:none;z-index:5;max-width:330px}
#appcard{position:fixed;right:26px;top:50%;width:270px;background:var(--halo);
  border:1px solid rgba(58,47,34,.5);border-left:3px solid var(--brass);
  box-shadow:0 10px 32px rgba(20,15,8,.35);padding:13px 16px 14px;z-index:6;
  pointer-events:none;opacity:0;
  transform:translateY(-50%) translateX(46px) scale(.94);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),opacity .26s ease}
#appcard.show{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
#appcard .tag{font-size:9px;letter-spacing:.26em;text-transform:uppercase;opacity:.6}
#ac-ref{font-size:19px;margin-top:3px;font-variant-numeric:oldstyle-nums}
#ac-state{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
#ac-state.s1{color:#55702f}#ac-state.s2{color:#9c3f1d}#ac-state.s3{color:#6e675d}#ac-state.s0{color:var(--brass)}
#ac-desc{font-size:13px;line-height:1.35;margin-top:7px}
#ac-addr{font-size:11.5px;font-style:italic;opacity:.75;margin-top:6px}
#ac-dates{font-size:11.5px;opacity:.8;margin-top:5px}
#apphistory{position:fixed;right:26px;top:50%;width:300px;max-height:64vh;background:var(--halo);
  border:1px solid rgba(58,47,34,.5);border-left:3px solid var(--ink);
  box-shadow:0 10px 32px rgba(20,15,8,.35);padding:13px 16px 12px;z-index:7;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;
  transform:translateY(-50%) translateX(46px) scale(.94);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),opacity .26s ease}
#apphistory.show{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
#apphistory .tag{font-size:9px;letter-spacing:.26em;text-transform:uppercase;opacity:.6}
#ah-addr{font-size:13.5px;font-weight:600;line-height:1.2;margin:4px 0 8px}
#ah-list{overflow-y:auto;flex:1;margin-right:-6px;padding-right:6px}
.ah-item{padding:7px 0 8px;border-top:1px solid rgba(58,47,34,.18);cursor:pointer}
.ah-item:hover{background:rgba(138,109,59,.08)}
.ah-item .top{display:flex;justify-content:space-between;font-size:12.5px;font-variant-numeric:oldstyle-nums}
.ah-item .st{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ah-item .st.s0{color:var(--brass)}.ah-item .st.s1{color:#55702f}.ah-item .st.s2{color:#9c3f1d}.ah-item .st.s3{color:#6e675d}
.ah-item .d{font-size:11.5px;line-height:1.3;opacity:.85;margin-top:2px}
#ah-close{position:absolute;top:6px;right:8px;border:none;background:none;font-size:20px;
  color:var(--ink);cursor:pointer;line-height:1;opacity:.6}
#ah-close:hover{opacity:1}
/* event card detail: frosted cover + a bigger parchment card */
#eventpop{position:fixed;inset:0;z-index:35;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(30,24,10,.4);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1)}
#eventpop.show{display:flex;animation:svFadeIn .3s ease both}
#eventpop .ep-card{position:relative;width:min(560px,94vw);max-height:calc(100vh - 80px);overflow-y:auto;
  background:rgba(248,241,224,.97);border:1px solid rgba(58,47,34,.5);border-radius:16px;padding:30px 34px 24px;
  box-shadow:0 24px 60px rgba(20,15,8,.5);animation:svMistIn .45s cubic-bezier(.22,1,.36,1) both}
#eventpop .ep-card.nat{border-top:3px solid var(--brass)}
#eventpop #ep-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(58,47,34,.4);background:rgba(255,252,242,.8);color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
#eventpop .ep-tag{font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.6}
#eventpop .ep-year{font-size:34px;line-height:1;margin-top:4px;font-variant-numeric:oldstyle-nums}
#eventpop .ep-title{font-size:22px;font-weight:600;line-height:1.2;margin-top:2px}
#eventpop .ep-img{display:block;width:100%;max-height:340px;object-fit:contain;background:rgba(58,47,34,.07);
  filter:sepia(.22) contrast(.96);margin:15px 0;border:1px solid rgba(58,47,34,.2)}
#eventpop .ep-sum{font-size:15.5px;line-height:1.55}
#eventpop .ep-quote{font-style:italic;font-size:14px;line-height:1.5;margin-top:12px;color:#5a4d39;
  border-left:2px solid var(--brass);padding-left:12px}
#eventpop .ep-src{font-size:11px;opacity:.55;margin-top:16px;border-top:1px solid rgba(58,47,34,.25);padding-top:10px;line-height:1.4}
@media (max-width:760px){ #eventpop .ep-img{max-height:200px} #eventpop .ep-card{padding:24px 20px 18px} }
#copyright{position:fixed;left:14px;bottom:9px;max-width:300px;font-size:10px;line-height:1.35;
  color:var(--ink);opacity:.55;pointer-events:none;z-index:3;text-shadow:0 1px 2px rgba(248,241,224,.65)}
#caption{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);font-style:italic;font-size:19px;
  text-align:center;max-width:580px;padding:6px 18px;background:var(--halo);
  border:1px solid rgba(58,47,34,.3);transition:opacity .5s;pointer-events:none}
#bar{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);width:min(820px,calc(100% - 48px));
  display:flex;align-items:center;gap:14px;background:var(--halo);border:1px solid rgba(58,47,34,.4);
  padding:14px 22px;box-shadow:0 8px 30px rgba(20,15,8,.35)}
#play,#drift,#plans,#sound{width:44px;height:44px;border:1px solid var(--brass);background:none;color:var(--ink);
  font-size:18px;cursor:pointer;flex:none;font-family:inherit}
#play:hover,#drift:hover,#plans:hover,#sound:hover{background:rgba(138,109,59,.12)}
#drift[aria-pressed="false"],#plans[aria-pressed="false"],#sound[aria-pressed="false"]{opacity:.4}
#play:focus-visible,#drift:focus-visible,#plans:focus-visible,#sound:focus-visible,#year-slider:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#slider-wrap{flex:1;position:relative;padding-top:18px;margin-left:12px}
#year-slider{display:block;width:100%;appearance:none;-webkit-appearance:none;height:2px;background:var(--brass);cursor:pointer}
#ticks{position:absolute;left:0;right:0;top:0;height:18px;pointer-events:none}
.tick{position:absolute;bottom:0;width:1px;height:5px;background:rgba(58,47,34,.45)}
.tick.major{height:9px;background:rgba(58,47,34,.8)}
.tick.major span{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.04em;white-space:nowrap;opacity:.75}
#cards{position:fixed;left:50%;bottom:124px;transform:translateX(-50%);
  width:min(1060px,calc(100% - 32px));height:330px;pointer-events:none;
  perspective:1100px;z-index:4}
.card{position:absolute;left:50%;bottom:0;width:254px;background:var(--halo);
  border:1px solid rgba(58,47,34,.5);box-shadow:0 6px 22px rgba(20,15,8,.3);
  padding:9px 12px 10px;pointer-events:auto;cursor:pointer;will-change:transform,opacity;
  transition:box-shadow .3s ease,border-color .3s ease}
.card.focused{box-shadow:0 18px 44px rgba(20,15,8,.5);border-color:rgba(58,47,34,.8)}
.card img{width:100%;height:158px;object-fit:contain;background:rgba(58,47,34,.07);
  filter:sepia(.25) contrast(.95);display:block;margin-bottom:6px}
.card .cy{font-size:21px;line-height:1;font-variant-numeric:oldstyle-nums}
.card .ct{font-size:15px;font-weight:600;line-height:1.15;margin-top:2px}
.card .cs{font-size:12px;line-height:1.3;margin-top:0;opacity:0;max-height:0;overflow:hidden;
  transition:max-height .42s cubic-bezier(.34,1.45,.64,1),opacity .32s ease,margin-top .42s cubic-bezier(.34,1.45,.64,1)}
.card .cq{font-size:11.5px;font-style:italic;line-height:1.3;margin-top:0;opacity:0;max-height:0;overflow:hidden;
  transition:max-height .42s cubic-bezier(.34,1.45,.64,1),opacity .32s ease,margin-top .42s cubic-bezier(.34,1.45,.64,1)}
.card.nat{border-top:3px solid var(--brass)}
.card .tag{font-size:9px;letter-spacing:.26em;text-transform:uppercase;opacity:.6}
.card.focused .cs{max-height:96px;opacity:.85;margin-top:5px}
.card.focused .cq{max-height:78px;opacity:.8;margin-top:6px}
#caption{bottom:6px;font-size:14px;padding:4px 14px;background:var(--halo);
  border:1px solid rgba(58,47,34,.3);opacity:1}
#year-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;
  background:var(--ink);transform:rotate(45deg);border:2px solid var(--parchment);box-shadow:0 0 0 1px var(--ink)}
#year-slider::-moz-range-thumb{width:14px;height:14px;background:var(--ink);transform:rotate(45deg);
  border:2px solid var(--parchment);border-radius:0}
#year{font-size:54px;line-height:1;min-width:128px;text-align:right;font-variant-numeric:oldstyle-nums}
@media (max-width:760px){
  /* compact full-width banner across the top; right column reserved for the survey CTA */
  header{left:0;right:0;top:0;max-width:none}
  header .eyebrow{font-size:10px;letter-spacing:.16em;white-space:normal}
  header h1{font-size:22px;margin-top:2px}header p{font-size:11px}
  .plate{border-left:none;border-right:none;border-top:none;box-shadow:0 3px 14px rgba(20,15,8,.3);padding:8px 14px 9px;padding-right:112px;min-width:0}
  .note{display:none}
  #copyright{display:none}   /* shown in the credits/about on mobile (the bar would overlap the corner) */
  #year{font-size:32px;min-width:74px}
  /* two rows: buttons + year on top, full-width scrubber below */
  #bar{padding:9px 12px 11px;gap:8px;bottom:14px;flex-wrap:wrap;row-gap:8px}
  #play,#drift,#plans,#sound{width:36px;height:36px;font-size:15px}
  #plans{display:none}        /* planning flags are off on mobile */
  #year{margin-left:auto}
  #slider-wrap{order:2;flex-basis:100%;width:100%;margin-left:0;padding-top:14px}
  .tick span{display:none}
  .tick{height:4px}.tick.major{height:7px}
  #caption{display:none}
  #cards{bottom:84px;height:250px}
  .card{width:174px;padding:7px 9px 8px}
  .card img{height:110px}
  .card .cy{font-size:17px}.card .ct{font-size:13px}
  .card .cs{font-size:11px}
  .card .cq{display:none !important}
  .card.focused .cs{max-height:110px}
  #appcard{right:10px;width:215px;padding:10px 12px}
  #ac-ref{font-size:16px}#ac-desc{font-size:12px}
  #apphistory{right:10px;width:240px;max-height:56vh;padding:10px 12px}
}
/* very narrow phones: bump memory + card text so it stays legible */
@media (max-width:430px){
  #membubbles .mb-text{font-size:16px}
  #membubbles .mb-who{font-size:13px}
  #membubbles .mb-year{font-size:11px}
  .card .ct{font-size:14.5px}
  .card .cs{font-size:12.5px}
  .card .cy{font-size:19px}
  .card.focused .cs{max-height:128px}
}
@media (prefers-reduced-motion: reduce){#caption{transition:none}}

/* ===== The Wrington Survey (Illuminated Survey design) ===== */
@keyframes svMistIn { from { opacity:0; transform:translateY(22px) scale(.965); filter:blur(10px) } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0) } }
@keyframes svMistOut { from { opacity:1; transform:translateY(0) scale(1); filter:blur(0) } to { opacity:0; transform:translateY(30px) scale(.94); filter:blur(12px) } }
@keyframes svFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes svFadeOut { from { opacity:1 } to { opacity:0 } }
@keyframes svDraw { from { stroke-dashoffset:26 } to { stroke-dashoffset:0 } }
@keyframes svSheen { 0% { transform:translateX(-130%) rotate(18deg) } 55% { transform:translateX(170%) rotate(18deg) } 100% { transform:translateX(170%) rotate(18deg) } }
/* quick gold flash that sweeps across then parks off-screen for a beat */
@keyframes svGoldSheen { 0% { transform:translateX(-180%) rotate(20deg) } 22% { transform:translateX(340%) rotate(20deg) } 100% { transform:translateX(340%) rotate(20deg) } }
@keyframes svMedalIn { 0% { opacity:0; transform:translateY(-110px) scale(.45) } 60% { opacity:1; transform:translateY(12px) scale(1.09) } 80% { transform:translateY(-5px) scale(.985) } 100% { opacity:1; transform:translateY(0) scale(1) } }
@keyframes svFloatY { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
@keyframes svRaySpin { from { transform:rotate(0) } to { transform:rotate(360deg) } }
@keyframes svBurst { 0% { transform:translateX(0) rotate(0); opacity:1 } 70% { opacity:1 } 100% { transform:translateX(160px) rotate(660deg); opacity:0 } }
@keyframes svFlash { 0% { opacity:.95 } 100% { opacity:0 } }
@keyframes svPopIn { 0% { opacity:0; transform:scale(.5) } 70% { transform:scale(1.08) } 100% { opacity:1; transform:scale(1) } }
@keyframes svGlassUp { 0% { transform:translateY(102%) } 100% { transform:translateY(0) } }
@keyframes svGlassDown { 0% { transform:translateY(0) } 100% { transform:translateY(102%) } }
@keyframes svInviteFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }

#survey { font-family:'Nunito',sans-serif }
#survey .sv-glass { position:fixed; inset:0; z-index:30; pointer-events:auto;
  backdrop-filter:blur(9px) saturate(1.15) brightness(1.04); -webkit-backdrop-filter:blur(9px) saturate(1.15) brightness(1.04);
  background:linear-gradient(160deg, rgba(255,252,240,.17), rgba(238,230,206,.07) 45%, rgba(255,252,240,.15));
  box-shadow:inset 0 0 140px rgba(255,250,230,.28) }
#survey .sv-glass.up { animation:svGlassUp .9s cubic-bezier(.45,0,.18,1) both }
#survey .sv-glass.down { animation:svGlassDown .7s cubic-bezier(.55,0,.75,.35) both }
#survey .sv-etch { position:absolute; inset:0; opacity:.55;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 1px, transparent 1px 9px),
             repeating-linear-gradient(25deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px) }
#survey .sv-halo { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(255,250,232,.12) 100%) }
#survey .sv-lip { position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.95) 28%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.9) 80%, rgba(255,255,255,.5));
  box-shadow:0 1px 0 rgba(255,255,255,.55), 0 7px 24px rgba(255,255,255,.45) }
#survey .sv-lipglow { position:absolute; top:4px; left:0; right:0; height:34px; background:linear-gradient(180deg, rgba(255,255,255,.3), transparent) }

#survey .sv-idle { position:fixed; top:28px; right:34px; max-width:320px; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:10px; z-index:31; pointer-events:none }
#survey .sv-idle > div { pointer-events:auto; animation:svMistIn .7s cubic-bezier(.22,1,.36,1) .2s backwards }
#survey .sv-float { animation:svInviteFloat 3.6s ease-in-out infinite }
#survey .sv-take { font-family:'EB Garamond',serif; font-size:20px; letter-spacing:.06em; color:#fdf8ea;
  background:linear-gradient(180deg,#4a6b50,#34503b); padding:15px 44px; border-radius:999px; cursor:pointer; position:relative; overflow:hidden;
  border:1px solid rgba(255,250,235,.45);
  box-shadow:0 14px 36px rgba(25,50,32,.5), 0 0 0 6px rgba(248,241,224,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease }
#survey .sv-take:hover { transform:scale(1.06); box-shadow:0 18px 44px rgba(25,50,32,.55), 0 0 0 9px rgba(248,241,224,.45), inset 0 1px 0 rgba(255,255,255,.35) }
#survey .sv-take:active { transform:scale(.95) }
/* recurring gold sheen to draw the eye — same idea as the badge sheen */
#survey .sv-take::after { content:''; position:absolute; top:-30%; left:0; width:38%; height:160%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,236,180,.35), rgba(255,221,138,.95), rgba(255,236,180,.35), transparent);
  animation:svGoldSheen 4.6s linear 1.2s infinite }
#survey .sv-hint { font-family:'EB Garamond',serif; font-style:italic; font-size:14px; color:#fdf8ea; text-shadow:0 1px 8px rgba(30,25,10,.75) }

#survey .sv-tools { position:fixed; top:64px; right:20px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; z-index:31 }
#survey .sv-pillbtn { font-family:'EB Garamond',serif; font-size:13.5px; letter-spacing:.08em; color:#3a3122;
  background:rgba(248,241,224,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(140,115,70,.55); border-radius:999px; padding:8px 18px; cursor:pointer;
  box-shadow:0 6px 16px rgba(50,38,15,.22); transition:transform .15s }
#survey .sv-pillbtn:hover { transform:scale(1.05) } #survey .sv-pillbtn:active { transform:scale(.94) }
#survey .sv-shelfline { display:flex; gap:7px; align-items:center }

#survey .sv-stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:32; padding:118px 16px 28px; pointer-events:none }
#survey .sv-panel { position:relative; pointer-events:auto; max-height:calc(100vh - 150px); overflow-y:auto;
  background:rgba(248,241,224,.8); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(140,115,70,.6); border-radius:24px;
  box-shadow:0 24px 55px rgba(50,38,15,.38), inset 0 1px 0 rgba(255,252,240,.8) }
#survey .sv-panel.in { animation:svMistIn .55s cubic-bezier(.22,1,.36,1) backwards }
#survey .sv-panel.out { animation:svMistOut .45s cubic-bezier(.5,0,.85,.5) forwards }
#survey .sv-x { position:absolute; top:13px; right:13px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#7d6a45;
  background:rgba(255,252,242,.7); border:1px solid rgba(140,115,70,.45); cursor:pointer;
  box-shadow:0 2px 8px rgba(50,38,15,.15); transition:transform .15s, background .2s, color .2s }
#survey .sv-x:hover { transform:scale(1.1); background:rgba(255,250,238,1); color:#3a3122 }
#survey .sv-x:active { transform:scale(.9) }
#survey .sv-eyebrow { font-family:'EB Garamond',serif; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:#7d6a45 }
#survey .sv-pill { font-size:13px; font-weight:700; color:#5d5036; background:rgba(255,252,242,.7); border:1px solid rgba(140,115,70,.35); border-radius:999px; padding:7px 16px }
#survey .sv-btn { font-family:'EB Garamond',serif; letter-spacing:.06em; color:#fdf8ea; background:linear-gradient(180deg,#4a6b50,#34503b);
  border-radius:999px; cursor:pointer; box-shadow:0 10px 26px rgba(30,60,40,.45), inset 0 1px 0 rgba(255,255,255,.3); transition:transform .15s, opacity .2s }
#survey .sv-btn:hover { transform:scale(1.05) } #survey .sv-btn:active { transform:scale(.95) }
#survey .sv-link { font-family:'EB Garamond',serif; color:#7d6a45; text-decoration:underline; cursor:pointer; transition:color .2s }
#survey .sv-link:hover { color:#3a3122 }

#survey .sv-opt { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:13px; font-size:16.5px; font-weight:600; cursor:pointer;
  transition:transform .15s ease, background .2s, border-color .2s, box-shadow .2s;
  background:rgba(255,252,242,.6); border:2px solid rgba(140,115,70,.35); color:#3a3122 }
#survey .sv-opt:hover { transform:scale(1.015) } #survey .sv-opt:active { transform:scale(.96) }
#survey .sv-opt.sel { background:rgba(255,252,242,.95); border-color:#b08d3e; color:#2c2310; font-weight:700;
  box-shadow:0 6px 18px rgba(176,141,62,.35), inset 0 1px 0 #fff }
#survey .sv-check { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(160,140,96,.7); background:transparent; transition:background .2s, border-color .2s }
#survey .sv-check.sel { border-color:#b08d3e; background:#fdf6e3 }
#survey .sv-scalebtn { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'EB Garamond',serif; font-size:23px; cursor:pointer; transition:transform .15s, background .2s, box-shadow .2s;
  background:rgba(255,252,242,.6); border:2px solid rgba(140,115,70,.35); color:#5d5036 }
#survey .sv-scalebtn:hover { transform:scale(1.1) } #survey .sv-scalebtn:active { transform:scale(.92) }
#survey .sv-scalebtn.sel { background:linear-gradient(180deg,#f0d98e,#c9a24b); border-color:#b08d3e; color:#2c2310; box-shadow:0 6px 18px rgba(176,141,62,.45) }
#survey .sv-textarea { width:100%; resize:vertical; min-height:130px; font-family:'EB Garamond',serif; font-size:18px; line-height:1.6;
  color:#2c2310; background:rgba(255,252,242,.85); border:2px solid rgba(140,115,70,.45); border-radius:13px; padding:16px 18px; outline:none;
  box-shadow:inset 0 2px 6px rgba(120,95,40,.12) }
#survey .sv-textarea:focus { border-color:#b08d3e; box-shadow:0 0 0 3px rgba(176,141,62,.22) }
#survey .sv-backbtn { font-family:'EB Garamond',serif; font-size:15px; color:#7d6a45; cursor:pointer; padding:8px 12px; border-radius:8px; transition:background .2s }
#survey .sv-backbtn:hover { background:rgba(140,115,70,.12) }

#survey .sv-cat { display:flex; flex-direction:column; gap:8px; padding:18px 20px; border-radius:16px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .2s;
  background:rgba(255,252,242,.72); border:1.5px solid rgba(140,115,70,.4) }
#survey .sv-cat:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(50,38,15,.22) }
#survey .sv-cat:active { transform:scale(.97) }
#survey .sv-cat.done { background:rgba(233,241,229,.88); border-color:rgba(74,107,80,.6) }

#survey .sv-cer { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, rgba(35,28,12,.38), rgba(16,12,4,.78));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:svFadeIn .45s ease both; pointer-events:auto }
#survey .sv-about { position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(30,24,10,.28); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); pointer-events:auto }
#survey .sv-about.in { animation:svFadeIn .35s ease both } #survey .sv-about.out { animation:svFadeOut .45s ease both }

@media (prefers-reduced-motion: reduce){
  #survey *, #survey .sv-take::after, #survey .sv-glass { animation-duration:.01s !important; animation-delay:0s !important }
}

/* ===== Memory speech bubbles (Schmoose excerpts) ===== */
/* A sparse, seeded couple of memories, each placed at a position (not stacked),
   that drift in, linger to be read, then gently float off. */
#membubbles { position:fixed; inset:0; z-index:8; pointer-events:none }
#membubbles .mb { position:absolute; width:300px; pointer-events:auto; cursor:pointer; touch-action:none;
  font-family:'IM Fell English',serif; background:rgba(248,241,224,.93);
  border:1px solid rgba(140,115,70,.55); border-radius:16px; padding:13px 16px 12px;
  box-shadow:0 12px 32px rgba(50,38,15,.32), inset 0 1px 0 rgba(255,252,240,.8);
  opacity:0; transform:translateY(16px) scale(.96);
  transition:opacity .7s ease, transform .75s cubic-bezier(.22,1,.36,1), box-shadow .2s ease }
#membubbles .mb.in { opacity:1; transform:none }
#membubbles .mb.out { opacity:0; transform:translateY(-32px) scale(.99);
  transition:opacity 1.7s ease, transform 1.9s ease }    /* gently drift off */
#membubbles .mb:hover { box-shadow:0 16px 40px rgba(50,38,15,.42), inset 0 1px 0 rgba(255,252,240,.8) }
#membubbles .mb:after { content:''; position:absolute; left:30px; bottom:-10px; width:18px; height:18px;
  background:rgba(248,241,224,.93); border-right:1px solid rgba(140,115,70,.55);
  border-bottom:1px solid rgba(140,115,70,.55); transform:rotate(45deg) }
#membubbles .mb.right:after { left:auto; right:30px }
#membubbles .mb-year { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#7d6a45; margin-bottom:5px }
#membubbles .mb-text { font-style:italic; font-size:15px; line-height:1.42; color:#2c2310 }
#membubbles .mb-who { margin-top:7px; font-size:12.5px; color:#6d6045; text-align:right }

/* z-index 35: above the idle "Take the survey" button (31) and survey chrome,
   so the story's screen cover sits OVER it rather than the button bobbing
   through the story title */
#mempop { position:fixed; inset:0; z-index:35; display:none; align-items:center; justify-content:center;
  background:rgba(30,24,10,.35); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:22px }
#mempop.show { display:flex; animation:svFadeIn .3s ease both }
#mempop .mp-card { position:relative; width:min(560px,94vw); max-height:calc(100vh - 90px); overflow-y:auto;
  background:rgba(248,241,224,.96); border:1px solid rgba(140,115,70,.6); border-radius:18px; padding:30px 34px 24px;
  box-shadow:0 24px 55px rgba(50,38,15,.42); font-family:'IM Fell English',serif;
  animation:svMistIn .45s cubic-bezier(.22,1,.36,1) both }
#mempop #mp-close { position:absolute; top:10px; right:12px; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(140,115,70,.45); background:rgba(255,252,242,.8); color:#7d6a45; font-size:18px;
  cursor:pointer; line-height:1 }
#mempop .tag { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7d6a45; margin-bottom:10px }
#mempop .mp-body { font-size:16.5px; line-height:1.6; color:#2c2310; white-space:pre-line }
#mempop .mp-foot { margin-top:14px; padding-top:12px; border-top:1px solid rgba(140,115,70,.3);
  font-style:italic; font-size:13.5px; color:#6d6045 }
/* prev/next through a conversation/series — a header strip above the story */
#mempop .mp-thread { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:6px 0 16px; padding-bottom:14px; border-bottom:1px solid rgba(140,115,70,.3) }
#mempop .mp-nav { width:44px; height:34px; flex:none; border:1px solid rgba(140,115,70,.55);
  background:rgba(255,252,242,.7); color:#5d5036; border-radius:999px; font-size:20px; line-height:1;
  cursor:pointer; font-family:'IM Fell English',serif; transition:background .18s ease, transform .12s ease }
#mempop .mp-nav:hover:not(:disabled) { background:rgba(138,109,59,.16); transform:scale(1.06) }
#mempop .mp-nav:active:not(:disabled) { transform:scale(.94) }
#mempop .mp-nav:disabled { opacity:.3; cursor:default }
#mempop .mp-pos { flex:1; text-align:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7d6a45 }

@media (max-width:760px){
  /* simpler mobile treatment: one compact bubble, narrower, clamped excerpt;
     JS positions it low-left so it clears the plate and the cards */
  #membubbles .mb { width:auto; max-width:calc(100vw - 20px); padding:11px 14px 10px; border-radius:13px }
  #membubbles .mb-text { font-size:15px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden }
  #membubbles .mb-year { font-size:11px; margin-bottom:4px }
  #membubbles .mb-who { font-size:13px; margin-top:5px }
  #mempop .mp-card { padding:22px 20px 18px }
}
@media (prefers-reduced-motion: reduce){
  #membubbles .mb { transition-duration:.01s !important }
  #mempop.show, #mempop .mp-card { animation-duration:.01s !important }
}

/* survey CTA on mobile: right side, below the plate (placed here, after the
   survey base rule, so it wins the cascade) */
@media (max-width:760px){
  /* survey CTA tucked into the banner's reserved right column */
  #survey .sv-idle{ top:10px; left:auto; right:8px; align-items:flex-end; gap:6px }
  #survey .sv-take{ font-size:11px; letter-spacing:.02em; padding:6px 10px; white-space:nowrap }
  #survey .sv-hint{ display:none }
}