/* ============================================================
   THE TRAVELING ARCHIVE - Beyond the Cover
   Styles. Palette, type and grain come from the brand tokens
   at the top; change those and the whole site follows.
   ============================================================ */

/* ============================================================
   THE TRAVELING ARCHIVE — Beyond the Cover
   Single-file static site. Edit content in the SETTINGS and
   STOPS blocks in the script at the bottom of this file.
   ============================================================ */


:root{
  --moss-deep:#1B1E0B;
  --moss:#23260F;
  --moss-mid:#4B5220;
  --olive:#8E9448;
  --cream:#EFE9D8;
  --cream-dim:#DED6BF;
  --ink:#3A2414;
  --ink-soft:#6B5240;
  --lime:#C3D02E;

  --panel-radius:18px;
  --measure:34rem;

  --step--1:0.82rem;
  --step-0:1rem;
  --step-1:1.18rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:2.7rem;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--cream);
  background:var(--moss);
  overflow-x:hidden;
}

/* ---------- the field: grainy olive backdrop from the feed ---------- */
.field{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(158,164,86,.42) 0%, rgba(158,164,86,0) 55%),
    radial-gradient(90% 70% at 88% 28%, rgba(196,203,120,.24) 0%, rgba(196,203,120,0) 60%),
    radial-gradient(140% 110% at 62% 96%, rgba(12,14,5,.85) 0%, rgba(12,14,5,0) 62%),
    linear-gradient(158deg, #333718 0%, #4B5220 34%, #2B2F12 68%, #16190A 100%);
}
.field::after{
  content:"";
  position:absolute;
  inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.34;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* ---------- shell ---------- */
.shell{
  width:min(100% - 2rem, 44rem);
  margin-inline:auto;
  padding-block:1.1rem 4.5rem;
}

/* ---------- masthead ---------- */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.4rem 1.6rem;
}
.handle{
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:400;
  color:rgba(239,233,216,.7);
  text-decoration:none;
}
.handle:hover{color:var(--cream)}
.reopen{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cream);
  text-decoration:none;
  border:1px solid rgba(239,233,216,.35);
  border-radius:999px;
  padding:.42rem .85rem;
  white-space:nowrap;
}
.reopen:hover{border-color:var(--lime);color:var(--lime)}
.masthead[data-hide-reopen="true"] .reopen{visibility:hidden}

/* ---------- mark ---------- */
.mark{display:block;width:26px;height:26px}
.mark--lg{width:46px;height:46px}
.mark path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- display type ---------- */
.display{
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.28;
  margin:0;
  font-size:var(--step-3);
}
.display--hero{font-size:clamp(1.9rem,8.4vw,3.1rem);letter-spacing:.11em}

.lede{
  font-family:'Newsreader',Georgia,serif;
  font-size:var(--step-1);
  line-height:1.62;
  color:rgba(239,233,216,.88);
  max-width:30rem;
}

/* ---------- hero ---------- */
.hero{
  text-align:center;
  padding-block:2.2rem 3rem;
}
.hero .lede{margin:1.4rem auto 0}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  justify-content:center;
  margin-top:2rem;
}

/* ---------- cream panel ---------- */
.panel{
  position:relative;
  background:var(--cream);
  color:var(--ink);
  border-radius:var(--panel-radius);
  padding:1.6rem 1.4rem;
  box-shadow:0 22px 50px rgba(8,10,3,.42);
}
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.09;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.panel > *{position:relative;z-index:1}

@media (min-width:34rem){
  .panel{padding:2.2rem 2rem}
}

/* ---------- panel internals ---------- */
.panel h2{
  font-size:var(--step-2);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.2;
  margin:0 0 .5rem;
}
.panel h3{
  font-size:var(--step-0);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 .4rem;
}
.panel p{margin:0 0 .9rem;max-width:var(--measure)}
.panel p:last-child{margin-bottom:0}

.rule{
  border:0;
  border-top:1px solid rgba(58,36,20,.16);
  margin:1.5rem 0;
}

/* ---------- stop header ---------- */
.stop-where{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 .55rem;
}
.stop-name{
  font-family:'Newsreader',Georgia,serif;
  font-weight:400;
  font-size:clamp(1.75rem,6.4vw,2.4rem);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0;
}
.stop-meta{
  font-size:var(--step--1);
  color:var(--ink-soft);
  margin:.6rem 0 0;
  line-height:1.5;
}

/* ---------- featured book ---------- */
.book{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1.05rem 1.1rem;
  border:1px solid rgba(58,36,20,.2);
  border-radius:12px;
  background:rgba(58,36,20,.035);
}
.spine{
  flex:0 0 auto;
  width:16px;
  align-self:stretch;
  min-height:62px;
  border-radius:3px;
  background:linear-gradient(170deg,var(--moss-mid),var(--moss));
  box-shadow:inset -3px 0 0 rgba(0,0,0,.22);
}
.book-title{
  font-family:'Newsreader',Georgia,serif;
  font-size:var(--step-1);
  line-height:1.28;
  margin:0;
}
.book-author{
  font-size:var(--step--1);
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin:.2rem 0 0;
}
.book-note{
  font-size:var(--step--1);
  line-height:1.5;
  margin:.55rem 0 0;
  color:var(--ink-soft);
}

/* ---------- the prompt: hero of the stop page ---------- */
.prompt{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(1.35rem,5.4vw,1.72rem);
  line-height:1.44;
  letter-spacing:-.005em;
  margin:0;
  max-width:30rem;
}
.prompt-aside{
  font-size:var(--step--1);
  color:var(--ink-soft);
  margin:.85rem 0 0;
}

/* ---------- form ---------- */
.form{margin:0}
.fields{display:grid;gap:1.15rem}
.fields--tight{grid-template-columns:5.5rem 1fr}
@media (min-width:34rem){
  .fields--row{grid-template-columns:1fr 1fr}
}
.f{display:block}
.f > span{
  display:block;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.35rem;
}
.f .opt{text-transform:none;letter-spacing:normal;font-size:.72rem;opacity:.75}
.f input,
.f textarea{
  width:100%;
  font:inherit;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1.5px solid rgba(58,36,20,.35);
  border-radius:0;
  padding:.45rem 0;
  transition:border-color .15s ease;
}
.f textarea{
  border:1.5px solid rgba(58,36,20,.28);
  border-radius:10px;
  padding:.75rem .8rem;
  min-height:9.5rem;
  resize:vertical;
  font-family:'Newsreader',Georgia,serif;
  font-size:1.05rem;
  line-height:1.55;
  background:rgba(255,255,255,.42);
}
.f input:focus-visible,
.f textarea:focus-visible{
  outline:2px solid var(--moss-mid);
  outline-offset:3px;
  border-color:var(--moss-mid);
}
.f input[aria-invalid="true"],
.f textarea[aria-invalid="true"]{border-color:#9B3B1B}
.f > span.err{
  display:block;
  font-size:.78rem;
  color:#9B3B1B;
  text-transform:none;
  letter-spacing:normal;
  margin:.35rem 0 0;
  min-height:1px;
}
.err{
  display:block;
  font-size:.78rem;
  color:#9B3B1B;
  margin-top:.3rem;
}
.count{
  font-size:.72rem;
  color:var(--ink-soft);
  text-align:right;
  margin:.3rem 0 0;
}

/* ---------- prize contact chooser ---------- */
.choice{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
.choice legend{
  padding:0;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.55rem;
}
.choice-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.pill{position:relative}
.pill input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.pill span{
  display:block;
  font-size:.8rem;
  letter-spacing:.04em;
  padding:.45rem .85rem;
  border:1px solid rgba(58,36,20,.3);
  border-radius:999px;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.pill input:checked + span{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--ink);
}
.pill input:focus-visible + span{outline:2px solid var(--moss-mid);outline-offset:2px}
.choice #handleField{margin-top:1rem}

/* ---------- the clue: the one moment of inverted colour ---------- */
.clue{
  position:relative;
  margin-top:1.5rem;
  padding:1.3rem 1.25rem;
  border-radius:14px;
  color:var(--cream);
  background:linear-gradient(158deg,#3C4118 0%,#23260F 78%);
  box-shadow:0 14px 30px rgba(8,10,3,.3);
  overflow:hidden;
}
.clue::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.3;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.clue > *{position:relative;z-index:1}
.clue-label{
  font-size:.64rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--lime);
  margin:0 0 .7rem;
}
.clue-text{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(1.2rem,4.8vw,1.42rem);
  line-height:1.45;
  color:var(--cream);
  margin:0;
  max-width:28rem;
}
.clue-foot{
  font-size:var(--step--1);
  color:rgba(239,233,216,.66);
  margin:.9rem 0 0;
  max-width:28rem;
}

/* note under a stop card, on the field */
.field-note{
  font-size:var(--step--1);
  line-height:1.55;
  color:rgba(239,233,216,.72);
  text-align:center;
  margin:1.2rem auto 0;
  max-width:26rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:inherit;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.5rem;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:#241207}
.btn--ghost-ink{background:transparent;color:var(--ink);border-color:rgba(58,36,20,.4)}
.btn--ghost-ink:hover{border-color:var(--ink)}
.btn--cream{background:var(--cream);color:var(--ink)}
.btn--cream:hover{background:#fff}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(239,233,216,.42)}
.btn--ghost:hover{border-color:var(--cream)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- steps (a real sequence: scan, read, write, move on) ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;
  display:grid;
  grid-template-columns:1.9rem 1fr;
  gap:.75rem;
  padding:.7rem 0;
  border-top:1px solid rgba(58,36,20,.14);
}
.steps li:first-child{border-top:0;padding-top:0}
.steps li::before{
  content:counter(s);
  font-family:'Newsreader',Georgia,serif;
  font-size:1.15rem;
  line-height:1.3;
  color:var(--ink-soft);
}
.steps strong{display:block;font-weight:600;font-size:.95rem}
.steps p{margin:.1rem 0 0;font-size:var(--step--1);color:var(--ink-soft);line-height:1.5;max-width:none}

/* ---------- stop list ---------- */
.stops{display:grid;gap:.9rem;margin:0;padding:0;list-style:none}
.stops--inset{gap:.6rem}
.stops--inset .stop-card{
  background:transparent;
  box-shadow:none;
  border:1px solid rgba(58,36,20,.22);
  border-radius:12px;
  padding:.85rem 1rem;
}
.stops--inset .stop-card:hover{background:rgba(58,36,20,.05)}
.stops--inset .stop-card[data-state="soon"],
.stops--inset .stop-card[data-state="closed"]{
  background:transparent;
  color:var(--ink-soft);
  border-style:dashed;
}
.stop-card{
  display:block;
  text-decoration:none;
  color:var(--ink);
  background:var(--cream);
  border-radius:14px;
  padding:1.05rem 1.15rem;
  box-shadow:0 14px 30px rgba(8,10,3,.3);
}
.stop-card:hover{background:#fff}
.stop-card:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.stop-card[data-state="soon"],
.stop-card[data-state="closed"]{background:rgba(239,233,216,.12);color:rgba(239,233,216,.8);box-shadow:none;border:1px dashed rgba(239,233,216,.32)}
.stop-card[data-state="soon"]:hover,
.stop-card[data-state="closed"]:hover{background:rgba(239,233,216,.2)}
.stop-card h3{
  font-family:'Newsreader',Georgia,serif;
  font-size:var(--step-1);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:inherit;
  margin:0 0 .2rem;
}
.stop-card p{font-size:var(--step--1);margin:0;color:inherit;opacity:.78}
.state{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.45rem;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.state[data-state="closed"] .dot{background:rgba(239,233,216,.4)}
.state[data-state="soon"] .dot{background:var(--olive)}

/* ---------- confirmation ---------- */
.confirm-mark{
  width:54px;height:54px;
  border-radius:50%;
  border:1.5px solid rgba(58,36,20,.35);
  display:grid;place-items:center;
  margin-bottom:1.1rem;
}
.confirm-mark svg{width:24px;height:24px}
.receipt{
  font-size:var(--step--1);
  color:var(--ink-soft);
  border-left:2px solid rgba(58,36,20,.2);
  padding-left:.85rem;
  margin:1.2rem 0 0;
  line-height:1.55;
}
.next-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.next-list li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.next-list svg{width:17px;height:17px;margin-top:.22rem;color:var(--ink-soft);flex:none}
.next-list strong{display:block;font-weight:600}
.next-list span{font-size:var(--step--1);color:var(--ink-soft);line-height:1.5}

/* ---------- photo bonus ---------- */
.photo-drop{
  border:1.5px dashed rgba(58,36,20,.35);
  border-radius:12px;
  padding:1.2rem;
  text-align:center;
}
.photo-drop input[type=file]{
  display:block;
  margin:.9rem auto 0;
  font-size:.8rem;
  max-width:100%;
}
.photo-preview{
  margin-top:1rem;
  border-radius:10px;
  overflow:hidden;
  display:none;
}
.photo-preview img{display:block;width:100%;height:auto}
.photo-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;justify-content:center}

/* ---------- qr sheet ---------- */
.qr-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.qr-card{
  background:var(--cream);
  color:var(--ink);
  border-radius:14px;
  padding:1.2rem;
  text-align:center;
}
.qr-card canvas,.qr-card img{margin-inline:auto;display:block}
.qr-card h3{
  font-family:'Newsreader',Georgia,serif;
  font-size:1.05rem;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--ink);
  margin:.85rem 0 .2rem;
}
.qr-url{font-size:.66rem;color:var(--ink-soft);word-break:break-all;margin:0}
.qr-dl{
  display:inline-block;
  margin-top:.7rem;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid rgba(58,36,20,.35);
}
.qr-dl:hover{color:var(--ink);border-color:var(--ink)}

[hidden]{display:none !important}

/* ---------- footer ---------- */
.footer{
  text-align:center;
  margin-top:3.2rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(239,233,216,.16);
}
.footer p{
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(239,233,216,.6);
  margin:0 0 .8rem;
}
.footer a{color:rgba(239,233,216,.82)}

.center{text-align:center}
.mt{margin-top:1.5rem}
.mt-sm{margin-top:.9rem}
.stack-actions{display:flex;flex-wrap:wrap;gap:.65rem}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- the one orchestrated moment ---------- */
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.rise-2{animation-delay:.09s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- print: QR sheet only ---------- */
@media print{
  body{background:#fff;color:#000}
  .field,.masthead,.footer,.no-print{display:none !important}
  .shell{width:100%;padding:0}
  .qr-card{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .qr-grid{grid-template-columns:repeat(2,1fr)}
}
/* ================================================================
   PREMIUM LAYER
   Editorial type, letterpress paper, gilt hairlines and a slower,
   more deliberate motion. Everything here refines the base above.
   ================================================================ */
:root{
  --gilt:#C9B37A;
  --label:#6E5530;
  --gilt-soft:rgba(201,179,122,.45);
  --ease:cubic-bezier(.22,.8,.24,1);
}

::selection{background:var(--lime);color:var(--moss-deep)}

body{
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* a soft vignette so the field reads like a photographed surface */
.field::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6,8,2,.55) 100%);
  pointer-events:none;
}

/* ---------- masthead ---------- */
.masthead{
  padding-block:.6rem 1.4rem;
  border-bottom:1px solid rgba(239,233,216,.12);
  margin-bottom:.6rem;
}
.handle{display:inline-flex;align-items:center;gap:.6rem;font-size:.6rem;letter-spacing:.32em}
.handle .mark{width:20px;height:20px;color:var(--gilt)}
.reopen{
  font-size:.66rem;letter-spacing:.18em;
  padding:.5rem 1rem;
  background:rgba(239,233,216,.04);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease);
}
.reopen:hover{background:rgba(195,208,46,.08)}

/* ---------- hero lockup ---------- */
.hero{padding-block:3.4rem 3.6rem}
.hero-mark{display:flex;justify-content:center;color:var(--gilt);margin-bottom:1.6rem}
.hero-mark .mark{width:40px;height:40px}
.hero-mark .mark path{stroke-width:1.2}
.eyebrow{
  font-size:.62rem;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(239,233,216,.62);
  margin:0 0 1.3rem;
}
.lockup{margin:0;display:flex;flex-direction:column;align-items:center;line-height:1}
.lockup-small{
  font-family:'Jost',sans-serif;
  font-weight:300;
  font-size:clamp(.9rem,3.4vw,1.15rem);
  letter-spacing:.52em;
  margin-right:-.52em; /* optically centre tracked caps */
  text-transform:uppercase;
  color:rgba(239,233,216,.86);
}
.lockup-big{
  font-family:'Newsreader',Georgia,serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(4.2rem,21vw,7.6rem);
  letter-spacing:-.035em;
  line-height:.92;
  margin-top:.35rem;
  color:var(--cream);
  font-variation-settings:"opsz" 72;
  text-shadow:0 2px 30px rgba(8,10,3,.35);
}
.season{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:1.6rem 0 0;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gilt);
}
.season i{display:block;width:28px;height:1px;background:var(--gilt-soft)}
.hero .lede{margin-top:1.8rem;font-size:clamp(1.12rem,4vw,1.28rem);font-weight:300}
.hero-actions{margin-top:2.4rem}

/* ---------- paper panels: letterpress edge + hairline frame ---------- */
.panel{
  background:
    linear-gradient(180deg,#F3EEDF 0%,var(--cream) 38%,#EAE3CF 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(58,36,20,.06),
    0 2px 4px rgba(8,10,3,.18),
    0 30px 70px -18px rgba(8,10,3,.6);
}
.panel::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(58,36,20,.11);
  border-radius:calc(var(--panel-radius) - 7px);
  pointer-events:none;
  z-index:0;
}
@media (min-width:34rem){
  .panel{padding:2.8rem 2.6rem}
}

.kicker{
  font-size:.6rem !important;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--label);
  margin:0 0 .55rem !important;
}
.panel h2{
  font-family:'Newsreader',Georgia,serif;
  font-weight:400;
  font-size:clamp(1.55rem,5.4vw,1.9rem);
  letter-spacing:-.012em;
  margin-bottom:.7rem;
}
.panel h3{font-size:.62rem;letter-spacing:.3em;font-weight:500;color:var(--label);margin-bottom:.8rem}

/* ornament divider */
.orn{
  display:flex;align-items:center;gap:.9rem;
  margin:2.2rem 0;
}
.orn span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(58,36,20,.22),transparent)}
.orn i{
  width:7px;height:7px;flex:none;
  transform:rotate(45deg);
  border:1px solid rgba(138,111,69,.7);
}

/* ---------- steps: editorial numerals ---------- */
.steps li{grid-template-columns:2.6rem 1fr;padding:1rem 0;border-top-color:rgba(58,36,20,.1)}
.steps li::before{
  content:counter(s, decimal-leading-zero);
  font-style:italic;
  font-weight:300;
  font-size:1.5rem;
  line-height:1;
  color:var(--label);
  font-variant-numeric:oldstyle-nums;
}
.steps strong{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.08rem;letter-spacing:-.005em}

/* ---------- stop cards ---------- */
.stop-card{
  position:relative;
  padding:1.2rem 3.2rem 1.2rem 1.3rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
.stop-card:hover{transform:translateY(-2px)}
.stops--inset .stop-card{padding:1.05rem 3rem 1.05rem 1.15rem;border-color:rgba(58,36,20,.16)}
.stops--inset .stop-card:hover{background:rgba(255,255,255,.4);border-color:rgba(58,36,20,.32)}
.card-no{
  position:absolute;top:1rem;right:1.15rem;
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;
  font-size:.95rem;opacity:.5;
}
.card-arrow{
  position:absolute;right:1.1rem;bottom:1rem;
  width:18px;height:18px;opacity:.45;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.card-arrow svg{width:100%;height:100%}
.stop-card:hover .card-arrow{transform:translateX(4px);opacity:.9}
.stop-card h3{font-size:1.3rem;letter-spacing:-.01em}
.state{font-size:.58rem;letter-spacing:.26em}
.state[data-state="open"] .dot{box-shadow:0 0 0 0 rgba(195,208,46,.6);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(195,208,46,.55)}
  70%{box-shadow:0 0 0 7px rgba(195,208,46,0)}
  100%{box-shadow:0 0 0 0 rgba(195,208,46,0)}
}
.stops--inset .state[data-state="open"] .dot{background:#7E8A12}

/* ---------- stop page ---------- */
.stop-where{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;font-size:.6rem;letter-spacing:.3em;color:var(--label)}
.stop-no{
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:.02em;font-size:.9rem;
  color:var(--ink);
  padding-right:.9rem;border-right:1px solid rgba(58,36,20,.2);
}
.stop-name{font-weight:300;font-size:clamp(2.1rem,8.6vw,3rem);letter-spacing:-.025em;line-height:1.04;margin-top:.2rem}
.stop-meta{font-size:.84rem}

/* book: a cloth-bound object */
.book{
  gap:1.15rem;
  padding:1.2rem 1.25rem 1.2rem 1.1rem;
  border:1px solid rgba(58,36,20,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.18));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 24px -14px rgba(58,36,20,.35);
}
.spine{
  width:30px;min-height:118px;
  border-radius:2px 4px 4px 2px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.08) 18%,transparent 40%,rgba(0,0,0,.18) 100%),
    linear-gradient(170deg,var(--moss-mid),var(--moss));
  box-shadow:inset 0 0 0 1px rgba(201,179,122,.18),2px 3px 8px rgba(8,10,3,.25);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.spine::before,.spine::after{
  content:"";position:absolute;left:4px;right:4px;height:1px;background:var(--gilt-soft);
}
.spine::before{top:10px}
.spine::after{bottom:10px}
.spine em{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-size:.66rem;letter-spacing:.06em;color:var(--gilt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:88px;
}
.book-title{font-size:1.38rem;font-weight:400;letter-spacing:-.012em}
.book-author{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;margin-top:.4rem}
.book-note{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:.98rem;margin-top:.7rem;color:var(--ink-soft)}

/* the question */
.prompt-wrap{position:relative;margin:0;padding-top:.4rem}
.quote-mark{
  position:absolute;top:-1.6rem;left:-.4rem;
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;
  font-size:7rem;line-height:1;
  color:rgba(138,111,69,.18);
  pointer-events:none;user-select:none;z-index:-1;
}
.prompt{font-size:clamp(1.45rem,5.8vw,1.95rem);line-height:1.36;letter-spacing:-.015em;max-width:32rem}
.prompt-aside{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:.98rem;margin-top:1.1rem;padding-left:1rem;border-left:1px solid var(--gilt-soft)}

/* ---------- form refinements ---------- */
.f > span, .choice legend{font-size:.6rem;letter-spacing:.26em;color:var(--label)}
.f input{
  font-family:'Newsreader',Georgia,serif;font-size:1.12rem;
  border-bottom:1px solid rgba(58,36,20,.28);
  padding:.5rem 0 .45rem;
}
.f input:focus-visible{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.f textarea{
  min-height:12rem;
  font-size:1.14rem;line-height:1.7;
  padding:1.1rem 1.15rem;
  border:1px solid rgba(58,36,20,.18);
  border-radius:12px;
  background:
    repeating-linear-gradient(180deg,transparent 0,transparent calc(1.7em - 1px),rgba(58,36,20,.07) calc(1.7em - 1px),rgba(58,36,20,.07) 1.7em) 0 1.1rem / 100% 100% no-repeat,
    rgba(255,255,255,.55);
  background-attachment:local;
  box-shadow:inset 0 1px 3px rgba(58,36,20,.08);
}
.f textarea:focus-visible{outline:none;border-color:rgba(58,36,20,.45);box-shadow:inset 0 1px 3px rgba(58,36,20,.08),0 0 0 4px rgba(75,82,32,.12)}
.f textarea::placeholder{font-style:italic;color:rgba(107,82,64,.55)}
.count{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:.82rem}
.pill span{font-size:.76rem;padding:.5rem 1rem;border-color:rgba(58,36,20,.2);background:rgba(255,255,255,.3);transition:all .25s var(--ease)}
.pill:hover span{border-color:rgba(58,36,20,.45)}

/* ---------- buttons: weight and a slow sheen ---------- */
.btn{
  position:relative;overflow:hidden;
  font-size:.72rem;letter-spacing:.24em;
  padding:1rem 1.8rem;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn--ink,.btn--cream{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -8px rgba(8,10,3,.55)}
.btn--ink::after,.btn--cream::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  transition:left .8s var(--ease);
  pointer-events:none;
}
.btn--ink:hover::after,.btn--cream:hover::after{left:130%}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn--ink{background:linear-gradient(180deg,#46301D,var(--ink))}
.btn--cream{background:linear-gradient(180deg,#F7F3E7,var(--cream))}
.btn--wide{padding-block:1.15rem}

/* ---------- confirmation ---------- */
.confirm-mark{border-color:var(--gilt);color:var(--label);width:58px;height:58px;box-shadow:0 0 0 5px rgba(201,179,122,.12)}
.confirm-mark svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .9s .3s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.receipt{
  font-family:'Newsreader',Georgia,serif;font-size:.98rem;
  border-left:1px solid var(--gilt);
  padding:.2rem 0 .2rem 1rem;
}

/* the clue: a sealed card */
.clue{
  margin-top:2rem;
  padding:2rem 1.6rem 1.7rem;
  border-radius:14px;
  background:
    radial-gradient(90% 70% at 15% 0%,rgba(201,179,122,.16),transparent 60%),
    linear-gradient(158deg,#3C4118 0%,#23260F 70%,#191B0A 100%);
  box-shadow:inset 0 0 0 1px rgba(201,179,122,.22),0 24px 50px -18px rgba(8,10,3,.7);
}
.clue::before{
  content:"";position:absolute;inset:8px;
  border:1px solid rgba(201,179,122,.18);border-radius:9px;
  pointer-events:none;z-index:1;
}
.seal{
  display:grid;place-items:center;
  width:44px;height:44px;margin-bottom:1rem;
  border-radius:50%;
  color:var(--moss-deep);
  background:radial-gradient(circle at 35% 30%,#E4D29F,#B39A5B 60%,#8A733C);
  box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 -2px 3px rgba(0,0,0,.2);
}
.seal .mark{width:24px;height:24px}
.seal .mark path{stroke-width:2}
.clue-label{color:var(--gilt);font-size:.58rem;letter-spacing:.3em}
.clue-text{font-size:clamp(1.35rem,5.4vw,1.7rem);line-height:1.38;letter-spacing:-.012em;font-style:italic}

/* photo drop */
.photo-drop{border:1px dashed rgba(138,111,69,.5);background:rgba(255,255,255,.28);padding:1.6rem 1.2rem}
.photo-drop input[type=file]::file-selector-button{
  font:500 .66rem/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);border:0;border-radius:999px;
  padding:.75rem 1.2rem;margin-right:.8rem;cursor:pointer;
}

/* ---------- field note + footer ---------- */
.field-note{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:1rem;color:rgba(239,233,216,.7)}
.footer{margin-top:4rem;padding-top:2.2rem;border-top-color:rgba(201,179,122,.18)}
.footer-line{font-family:'Newsreader',Georgia,serif !important;font-style:italic;text-transform:none !important;letter-spacing:.01em !important;font-size:1.05rem !important;color:rgba(239,233,216,.78) !important}
.footer-orn{color:var(--gilt) !important;font-size:.9rem !important;letter-spacing:0 !important;margin:.2rem 0 .9rem !important}
.footer-link{text-transform:none !important;letter-spacing:.2em !important;font-size:.62rem !important}
.footer-link a{text-decoration:none;text-transform:uppercase;border-bottom:1px solid rgba(201,179,122,.4);padding-bottom:2px}
.footer-link a:hover{color:var(--cream);border-color:var(--gilt)}

/* ---------- motion: a staggered, unhurried entrance ---------- */
.rise{animation:rise .9s var(--ease) both}
.rise-2{animation-delay:.14s}
.hero > *{animation:rise 1s var(--ease) both}
.hero > *:nth-child(2){animation-delay:.08s}
.hero > *:nth-child(3){animation-delay:.16s}
.hero > *:nth-child(4){animation-delay:.24s}
.hero > *:nth-child(5){animation-delay:.32s}
.hero > *:nth-child(6){animation-delay:.4s}
@keyframes rise{
  from{opacity:0;transform:translateY(18px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}

@media print{
  .panel::before,.orn{display:none}
}

/* fixes after review */
#app:focus{outline:none}
.handle span{white-space:nowrap}
.panel .stop-card h3{
  font-family:'Newsreader',Georgia,serif;font-size:1.3rem;font-weight:400;
  letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:0 0 .25rem;
}
.stops--inset + .stop-meta{margin-top:1.2rem}
.quote-mark{top:-2.4rem}
.receipt{margin-top:1.4rem}
.next-list strong{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.08rem}
.photo-drop + .stop-meta{margin-top:1.1rem}

/* ================================================================
   SECONDARY PAGES, PHOTO PICKER, COVERS, QR CARDS
   ================================================================ */

/* page header on the dark field (directory, about, QR sheet) */
.page-head{padding-block:2rem 2.2rem}
.page-head .eyebrow{color:var(--gilt)}
.page-title{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(2.4rem,10vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0;
  color:var(--cream);
}
.page-title em{display:block;font-style:italic;color:rgba(239,233,216,.82)}
.page-head .lede{margin-top:1.3rem;font-weight:300}
.page-foot{margin-top:2.2rem}
.panel--quiet{text-align:left}

/* about */
.pull{
  margin:1.8rem 0;
  padding:0 0 0 1.2rem;
  border-left:1px solid var(--gilt);
  font-family:'Newsreader',Georgia,serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.35rem,5vw,1.65rem);
  line-height:1.38;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:28rem;
}
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:0;padding:1.1rem 0;
  border-block:1px solid rgba(58,36,20,.12);
}
.facts div{text-align:center;padding:0 .4rem}
.facts div + div{border-left:1px solid rgba(58,36,20,.12)}
.facts dt{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:1.6rem;line-height:1.1;color:var(--ink)}
.facts dd{margin:.3rem 0 0;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--label);line-height:1.5}
.qa{list-style:none;margin:.4rem 0 1rem;padding:0;display:grid;gap:.85rem}
.qa li{display:grid;gap:.15rem;padding-left:1rem;border-left:1px solid rgba(58,36,20,.16)}
.qa strong{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.06rem}
.qa span{font-size:var(--step--1);color:var(--ink-soft);line-height:1.55}
.ink-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gilt);padding-bottom:1px}
.ink-link:hover{border-bottom-color:var(--ink)}

/* soon / closed notice */
.notice{
  margin-top:1.8rem;
  padding:1.3rem 1.3rem 1.2rem;
  border:1px dashed rgba(110,85,48,.45);
  border-radius:12px;
  background:rgba(255,255,255,.3);
}
.notice-text{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:1.08rem;line-height:1.5;margin:0 !important}
.notice[data-state="closed"]{border-style:solid;border-color:rgba(58,36,20,.16);background:rgba(58,36,20,.04)}

/* not found */
.panel--lost{overflow:hidden}
.lost-mark{
  position:absolute !important;
  right:-.6rem;top:-2.2rem;
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;
  font-size:12rem;line-height:1;
  color:rgba(138,111,69,.12);
  z-index:0 !important;
  pointer-events:none;user-select:none;
}

/* book cover option */
.cover{
  flex:0 0 auto;
  width:78px;height:auto;align-self:flex-start;
  border-radius:2px 4px 4px 2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),3px 4px 12px rgba(8,10,3,.28);
}

/* photo picker */
.photo-drop{padding:1.2rem;text-align:center}
.photo-pick{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:1.3rem 1rem 1.2rem;
  border-radius:10px;
  cursor:pointer;
  transition:background-color .3s var(--ease);
}
.photo-pick:hover{background:rgba(255,255,255,.45)}
.photo-drop:focus-within .photo-pick{outline:2px solid var(--moss-mid);outline-offset:2px}
.photo-icon{
  display:grid;place-items:center;
  width:54px;height:54px;margin-bottom:.4rem;
  border-radius:50%;
  background:linear-gradient(180deg,#46301D,var(--ink));
  color:var(--cream);
  box-shadow:0 8px 18px -8px rgba(8,10,3,.6);
}
.photo-icon svg{width:24px;height:24px}
.photo-pick strong{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.15rem;color:var(--ink)}
.photo-pick small{font-size:var(--step--1);color:var(--ink-soft)}
.photo-preview{margin-top:.6rem;box-shadow:0 10px 24px -12px rgba(8,10,3,.45)}

/* QR cards */
.qr-grid{gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));margin-top:.4rem}
.qr-card{
  position:relative;
  padding:2rem 1.6rem 1.6rem;
  border-radius:var(--panel-radius);
  background:linear-gradient(180deg,#F3EEDF 0%,var(--cream) 40%,#EAE3CF 100%);
  box-shadow:0 0 0 1px rgba(58,36,20,.06),0 30px 60px -20px rgba(8,10,3,.6);
}
.qr-card::before{
  content:"";position:absolute;inset:9px;
  border:1px solid rgba(58,36,20,.12);
  border-radius:calc(var(--panel-radius) - 7px);
  pointer-events:none;
}
.qr-head{display:flex;flex-direction:column;align-items:center;color:var(--label)}
.qr-head .mark{width:30px;height:30px;margin-bottom:.7rem}
.qr-brand{margin:0;font-size:.58rem;letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:var(--ink)}
.qr-title{margin:.1rem 0 0;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:2.6rem;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.qr-no{margin:1.2rem 0 .2rem;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--label)}
.qr-card h3{font-size:1.3rem;margin:.1rem 0 .1rem;letter-spacing:-.01em}
.qr-where{margin:0;font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:.92rem;color:var(--ink-soft)}
.qr-hold{
  margin:1.2rem auto 0;
  width:fit-content;
  padding:14px;
  background:#FBF8EF;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(58,36,20,.08);
}
.qr-hold canvas{display:block;width:176px;height:176px;image-rendering:pixelated}
.qr-cta{margin:1.1rem 0 .25rem;font-size:.62rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
.qr-url{font-size:.66rem}
.qr-dls{display:flex;justify-content:center;gap:1.1rem;margin-top:.9rem}
.qr-dl{margin-top:0;cursor:pointer}

@media print{
  @page{margin:12mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .qr-grid{grid-template-columns:repeat(2,1fr);gap:8mm}
  .qr-card{box-shadow:none;border:1px solid #cfc6ad;break-inside:avoid;page-break-inside:avoid}
  .qr-card::before{display:block}
  .rise,.qr-card{animation:none !important}
}
.qr-hold{padding:20px}
.qr-hold canvas{width:168px;height:168px}
.panel--lost .stop-name + p{margin-top:1rem}
@media print{
  .qr-grid{gap:6mm}
  .qr-card{padding:1.1rem 1rem 1rem}
  .qr-head .mark{width:22px;height:22px;margin-bottom:.35rem}
  .qr-title{font-size:2rem}
  .qr-no{margin-top:.6rem}
  .qr-hold{margin-top:.7rem;padding:14px}
  .qr-hold canvas{width:140px;height:140px}
  .qr-cta{margin-top:.7rem}
}
@media print{
  html,body{min-height:0 !important;height:auto}
  .shell{padding:0 !important}
  .qr-grid{margin:0}
}

.footer .build-tag{margin-top:1.2rem !important;font-size:.58rem !important;letter-spacing:.18em !important;color:rgba(195,208,46,.75) !important}

/* ---------- host area: signed-in bar, starter-password alert ---------- */
.host-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;
  padding:.7rem 1rem;margin:.4rem 0 .2rem;
  border:1px solid rgba(201,179,122,.28);border-radius:999px;
  background:rgba(239,233,216,.05);
  font-size:.74rem;color:rgba(239,233,216,.82);
}
.host-who{display:inline-flex;align-items:center;gap:.5rem}
.host-actions{display:inline-flex;gap:1rem}
.host-link{
  font:inherit;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--cream);border-bottom:1px solid rgba(201,179,122,.45);
}
.host-link:hover{color:var(--lime);border-color:var(--lime)}
.host-link:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.host-alert{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1rem;
  margin-top:.8rem;padding:1rem 1.2rem;border-radius:14px;
  background:linear-gradient(158deg,#3C4118,#23260F);
  box-shadow:inset 0 0 0 1px rgba(201,179,122,.3);
}
.host-alert p{margin:0;font-size:.88rem;color:rgba(239,233,216,.9);max-width:26rem}
.host-alert strong{color:var(--gilt);font-weight:500}
.host-alert .btn{padding:.75rem 1.3rem}
#pwPanel{margin:1rem 0 .4rem}
.pw-done{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:1.08rem;margin:1rem 0 0 !important}
.host-bar{border-radius:16px}

/* ================================================================
   ADMIN
   ================================================================ */
.tabs{
  display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;
  margin:0 0 1.2rem;padding:.3rem;
  border:1px solid rgba(201,179,122,.24);border-radius:999px;
  background:rgba(239,233,216,.04);
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 auto;text-align:center;white-space:nowrap;
  padding:.62rem 1rem;border-radius:999px;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:rgba(239,233,216,.75);
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.tab:hover{color:var(--cream)}
.tab[aria-current="page"]{background:var(--cream);color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.admin-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.admin-row{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:start;
  padding:.95rem 1rem;border:1px solid rgba(58,36,20,.14);border-radius:12px;
  background:rgba(255,255,255,.35);
}
.admin-no{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:1.25rem;color:var(--label);line-height:1.3}
.admin-main{display:grid;gap:.12rem;min-width:0}
.admin-main .state{margin:0}
.admin-main strong{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.12rem;line-height:1.25}
.admin-sub{font-size:var(--step--1);color:var(--ink-soft)}
.admin-tools{grid-column:2;display:flex;gap:.4rem;align-items:center;margin-top:.55rem}
@media (min-width:34rem){
  .admin-row{grid-template-columns:auto 1fr auto;align-items:center}
  .admin-tools{grid-column:auto;margin-top:0}
}
.admin-list .state[data-state="open"] .dot{background:#7E8A12}
.admin-list .state[data-state="soon"] .dot{background:var(--olive)}
.admin-list .state[data-state="closed"] .dot{background:rgba(58,36,20,.3)}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(58,36,20,.22);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover:not([disabled]){border-color:var(--ink);background:rgba(255,255,255,.5)}
.icon-btn[disabled]{opacity:.3;cursor:default}
.icon-btn:focus-visible{outline:2px solid var(--moss-mid);outline-offset:2px}
.btn--sm{padding:.6rem 1.1rem;font-size:.64rem;letter-spacing:.18em}

/* editor */
.back-link{
  background:none;border:0;padding:0;margin:0 0 1.2rem;cursor:pointer;
  font:inherit;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.back-link:hover{color:var(--ink)}
.ed-group{border:0;margin:1.6rem 0 0;padding:1.4rem 0 0;border-top:1px solid rgba(58,36,20,.12);min-width:0}
.ed-group legend{
  float:left;width:100%;padding:0;margin:0 0 .9rem;
  font-family:'Newsreader',Georgia,serif;font-size:1.2rem;font-weight:500;color:var(--ink);
}
.ed-group legend + *{clear:both}
.f-hint{display:block;font-size:.76rem;line-height:1.5;color:var(--ink-soft);margin-top:.4rem;letter-spacing:normal;text-transform:none}
.f--area textarea{min-height:0;background:rgba(255,255,255,.55);font-size:1.02rem;line-height:1.55;padding:.8rem .9rem}
#slugPreview{word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}
.ed-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:1.8rem}
.ed-actions .host-link--danger{margin-left:auto}
.host-link--ink{color:var(--ink);border-bottom-color:rgba(58,36,20,.35)}
.host-link--ink:hover{color:var(--ink);border-color:var(--ink)}
.host-link--danger{color:#9B3B1B;border-bottom-color:rgba(155,59,27,.4)}
.host-link--danger:hover{color:#7A2A10;border-color:#7A2A10}

.cover-edit{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.cover-thumb{width:72px;display:flex;justify-content:center;transition:opacity .2s}
.cover-thumb img{width:72px;height:auto;border-radius:2px 4px 4px 2px;box-shadow:3px 4px 12px rgba(8,10,3,.25)}
.cover-thumb .spine{min-height:96px}
.cover-thumb.is-busy{opacity:.4}
.cover-label{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--label)}
.cover-edit .f-hint{margin:.3rem 0 .7rem}

/* toast */
.toast{
  position:fixed;left:50%;bottom:1.4rem;z-index:50;
  transform:translate(-50%,1rem);opacity:0;pointer-events:none;
  max-width:calc(100% - 2rem);
  padding:.8rem 1.2rem;border-radius:999px;
  background:var(--ink);color:var(--cream);
  font-size:.84rem;box-shadow:0 14px 30px -10px rgba(8,10,3,.6);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media print{ .tabs,.toast,.host-bar,.host-alert{display:none !important} }
@media (max-width:30rem){
  .tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:visible}
  .tab{border-radius:12px}
}
.footer .footer-team{margin-top:1rem !important;letter-spacing:.2em !important;font-size:.58rem !important}
.footer-team a{color:rgba(239,233,216,.5) !important;text-decoration:none;border-bottom:1px solid transparent}
.footer-team a:hover{color:var(--cream) !important;border-bottom-color:rgba(201,179,122,.5)}

/* masthead: reopen + sign in */
.mast-right{display:flex;align-items:center;gap:.5rem}
.mast-signin{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:rgba(239,233,216,.82);
  padding:.5rem .7rem;border-radius:999px;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.mast-signin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.mast-signin:hover{color:var(--lime);background:rgba(195,208,46,.08)}
.mast-signin:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.masthead[data-hide-reopen="true"] .reopen{display:none}
@media (max-width:26rem){
  .handle span{display:none}
  .mast-right{gap:.25rem}
  .reopen{padding:.5rem .8rem;letter-spacing:.12em}
  .mast-signin{padding:.5rem .55rem;letter-spacing:.12em}
}
.mast-signin,.reopen{white-space:nowrap}
@media (max-width:22.5rem){
  .reopen,.mast-signin{font-size:.6rem;letter-spacing:.08em}
  .reopen{padding:.48rem .65rem}
  .mast-signin{padding:.48rem .3rem;gap:.3rem}
  .mast-signin svg{width:14px;height:14px}
}
.local-note{margin:.5rem 0 0;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(195,208,46,.8);text-align:center}

/* ================================================================
   WORDING, RESPONSES, RECEIPTS
   ================================================================ */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.receipt-link{text-align:center;margin:.9rem auto 0;font-size:.82rem}
.receipt-link a{color:rgba(239,233,216,.85);text-decoration:none;border-bottom:1px solid rgba(201,179,122,.5);padding-bottom:2px}
.receipt-link a:hover{color:var(--lime);border-color:var(--lime)}
.f select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.5);border:1px solid rgba(58,36,20,.22);border-radius:10px;
  padding:.55rem .7rem;
}
.check{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink);margin:.4rem 0}
.check input{width:18px;height:18px;accent-color:var(--ink)}

/* wording */
.wgroup{margin-top:.8rem;padding:0 !important}
.wgroup summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;font-family:'Newsreader',Georgia,serif;font-size:1.15rem;color:var(--ink);
}
.wgroup summary::-webkit-details-marker{display:none}
.wgroup summary::after{content:"+";font-family:'Jost',sans-serif;font-size:1.2rem;color:var(--label)}
.wgroup[open] summary::after{content:"\2212"}
.wgroup[open] summary{border-bottom:1px solid rgba(58,36,20,.1)}
.wgroup > .fields{padding:1.2rem 1.4rem 1.4rem}
.wcount{font-family:'Jost',sans-serif;font-style:normal;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#7E8A12;margin-left:auto;margin-right:.6rem}
.wrestore{margin-top:.45rem;font-size:.6rem}
.savebar{
  position:sticky;bottom:.8rem;z-index:5;margin-top:1rem;
  display:flex;align-items:center;justify-content:flex-end;gap:1rem;
  padding:.8rem 1rem;border-radius:999px;
  background:rgba(35,38,15,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px -10px rgba(8,10,3,.7);
}
.savebar .err{margin:0;color:#F2B49A}
.savebar .btn--ink{background:linear-gradient(180deg,#F7F3E7,var(--cream));color:var(--ink)}

/* entries */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.6rem;margin:1rem 0}
.stats div{padding:.8rem .9rem;border:1px solid rgba(58,36,20,.12);border-radius:12px;background:rgba(255,255,255,.35)}
.stats b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:1.7rem;line-height:1.1;color:var(--ink)}
.stats span{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--label)}
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem}
.toolbar .filter{min-width:12rem;flex:1;max-width:20rem;margin:0}
.draw{margin-top:1.1rem}
.draw-opts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.4rem 1.4rem;margin:.6rem 0}
.draw-opts .f{min-width:11rem;margin:0}
.winner{
  margin-top:1rem;padding:1.2rem 1.3rem;border-radius:14px;color:var(--cream);
  background:radial-gradient(90% 70% at 15% 0%,rgba(201,179,122,.18),transparent 60%),linear-gradient(158deg,#3C4118,#23260F);
  box-shadow:inset 0 0 0 1px rgba(201,179,122,.3);
}
.winner .kicker{color:var(--gilt) !important}
.winner p{margin:.2rem 0 0 !important;color:rgba(239,233,216,.9)}
.winner .f-hint{color:rgba(239,233,216,.6)}
.winner-name{font-family:'Newsreader',Georgia,serif;font-size:1.6rem;line-height:1.2;color:var(--cream) !important}
.winner--receipt{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.entries{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.entry{padding:1rem 1.1rem;border:1px solid rgba(58,36,20,.13);border-radius:12px;background:rgba(255,255,255,.35)}
.entry--receipt{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.entry-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .8rem}
.entry-head strong{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.1rem}
.entry-head span{font-size:.72rem;color:var(--ink-soft)}
.entry-text{font-family:'Newsreader',Georgia,serif;font-size:1.02rem;line-height:1.55;margin:.5rem 0 .4rem !important;white-space:pre-wrap}
.entry-meta{font-size:.74rem;color:var(--ink-soft);margin:0 0 .5rem !important;word-break:break-word}
.thumbs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.thumb{padding:0;border:0;background:none;cursor:zoom-in;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(8,10,3,.2)}
.thumb img{display:block;width:64px;height:64px;object-fit:cover}
.thumb--lg img{width:84px;height:110px}
.lightbox{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:1rem;background:rgba(10,12,4,.88);cursor:zoom-out;
}
.lightbox img{max-width:100%;max-height:80vh;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.6)}

/* admin tabs: wrap into rows so every tab shows (7 tabs) */
.tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;
  overflow:visible;border-radius:20px;padding:.35rem;
}
.tab{flex:none;border-radius:14px;padding:.68rem .5rem;white-space:nowrap}
@media (max-width:34rem){
  .tabs{grid-template-columns:repeat(2,1fr)}
  .tab:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:22.5rem){
  .tab{font-size:.58rem;letter-spacing:.12em}
}
@media (min-width:44rem){
  .tabs{grid-template-columns:repeat(7,auto);justify-content:space-between}
  .tab{padding:.68rem .75rem;letter-spacing:.14em}
}
.tab-badge{
  display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .35em;margin-left:.25em;
  border-radius:999px;background:var(--lime);color:var(--moss-deep);
  font-size:.9em;letter-spacing:0;font-weight:600;vertical-align:.05em;
}
.tab[aria-current="page"] .tab-badge{display:none}

/* ---------- accessibility ---------- */
.skip{
  position:absolute;left:1rem;top:-3rem;z-index:200;
  padding:.6rem 1rem;border-radius:999px;background:var(--cream);color:var(--ink);
  font-size:.8rem;text-decoration:none;transition:top .2s;
}
.skip:focus{top:1rem;outline:2px solid var(--lime);outline-offset:2px}
.footer-team a{color:rgba(239,233,216,.66) !important}
.panel .label-h{
  font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;color:var(--label);margin:0 0 .8rem;line-height:1.4;
}
.stop-card h2{
  font-family:'Newsreader',Georgia,serif;font-size:1.3rem;font-weight:400;letter-spacing:-.01em;
  text-transform:none;color:inherit;margin:0 0 .2rem;line-height:1.25;
}
.qr-card .qr-name{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink);margin:.1rem 0 .1rem}
:focus-visible{outline-offset:3px}
.card-no{opacity:.8}