/* Shared layout and components for the Agnes site. Themes override :root and decorations. */
:root{
  --cream:#fbf5e9; --paper:#fffaf0; --ink:#2b2118; --ink-soft:#4b3d30;
  --rose:#a8435c; --rose-dark:#862f46; --rose-soft:#f4dfe0;
  --amber:#f0b24a; --amber-soft:#fbe6b8; --line:#e3d6bd; --grey:#756b5e;
  --tap:60px; --max:860px; --play-shadow:rgba(134,47,70,.3);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif","DejaVu Serif",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:var(--serif);
  --nav-bg:transparent; --nav-border:var(--line);
  --hero-align:center; --card-radius:18px; --player-radius:24px;
  --shadow:0 2px 0 var(--line),0 6px 14px rgba(120,80,40,.07);
  --shadow-hover:0 2px 0 var(--rose-soft),0 10px 20px rgba(120,60,50,.14);
  --body-extra:none;
}
*{box-sizing:border-box}
html{font-size:21px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);line-height:1.6;
  background-image:var(--body-extra, none)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
a{color:var(--rose-dark)}
:focus-visible{outline:4px solid #1f5fbf;outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.2;color:var(--ink);margin:0}
main,.hero,.foot,.topbar,.pagehead{max-width:var(--max);margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left),env(safe-area-inset-right))}

/* buttons */
.btn{font:600 1rem/1.2 var(--sans);min-height:var(--tap);padding:.6rem 1.3rem;border-radius:16px;border:2px solid var(--rose);
  background:var(--paper);color:var(--rose-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  text-decoration:none;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--rose-soft)}
.btn:active{transform:scale(.98)}
.btn-main{background:var(--rose);color:#fff;border-color:var(--rose);font-size:1.15rem;min-height:68px}
.btn-main:hover{background:var(--rose-dark)}
.btn-ghost{border-color:var(--line);background:transparent}
.btn.small{min-height:var(--tap);font-size:.85rem;padding-inline:1rem}
.ic{width:1.6em;height:1.6em;fill:currentColor;flex:none}

/* site nav */
.sitenav{background:var(--nav-bg);border-bottom:1px solid var(--nav-border);z-index:10}
.sitenav-inner{display:flex;flex-wrap:wrap;gap:.25rem .15rem;justify-content:center;padding-block:8px;align-items:center;max-width:1120px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left),env(safe-area-inset-right))}
.sitenav a{font:600 .9rem/1.2 var(--sans);color:var(--ink);text-decoration:none;min-height:var(--tap);
  display:inline-flex;align-items:center;padding:.4rem .85rem;border-radius:12px}
.sitenav a:hover{background:var(--rose-soft);color:var(--rose-dark)}
.sitenav a[aria-current="page"]{color:var(--rose-dark);background:var(--rose-soft)}
.brand{font-family:var(--display);font-weight:700;letter-spacing:.01em;margin-right:.4rem}

/* home */
.hero{padding-top:clamp(20px,4.5vw,48px);padding-bottom:8px;text-align:var(--hero-align)}
.gift{font:600 .8rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-dark);margin:0 0 .8rem}
.hero h1{font-size:clamp(2rem,6.5vw,3.2rem);max-width:16em;margin-inline:auto}
.lead{font-size:1.15rem;max-width:34em;margin:.85rem auto}
.note{background:var(--paper);border:2px solid var(--line);border-left:8px solid var(--amber);border-radius:14px;padding:1rem 1.4rem;margin:1.6rem auto;max-width:34em;text-align:left;font-style:italic}
.note p{margin:.2rem 0}
.note.placeholder{color:var(--ink-soft);border-style:dashed;border-left-style:solid}
.note-sig{text-align:right;font-style:normal;font-weight:700}
.howto{font:1rem/1.5 var(--sans);color:var(--ink-soft);max-width:34em;margin:1rem auto 0}
.section{margin:clamp(34px,6vw,60px) 0}
.section h2{font-size:clamp(1.55rem,4.5vw,2.1rem);padding-bottom:.35rem;border-bottom:3px solid var(--amber);display:inline-block}
.blurb{margin:.7rem 0 1.2rem;color:var(--ink-soft)}
.count{white-space:nowrap;font-family:var(--sans);font-size:.85rem;color:var(--grey);margin-left:.3rem}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.card{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:baseline;min-height:var(--tap);padding:1.1rem 1.3rem;background:var(--paper);
  border:2px solid var(--line);border-radius:var(--card-radius);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .12s,box-shadow .12s,border-color .12s}
.card:hover{border-color:var(--rose);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.card-title{font-size:1.2rem;font-weight:700;line-height:1.3}
.card-meta{font:700 .85rem var(--sans);color:var(--rose-dark);background:var(--rose-soft);padding:.2rem .7rem;border-radius:99px;white-space:nowrap}
.card-sum{grid-column:1/-1;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.card-go{grid-column:1/-1;font:700 .95rem var(--sans);color:var(--rose-dark);margin-top:.2rem}
.favs{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.favs .card{grid-template-columns:1fr;align-content:start;background:var(--amber-soft);border-color:#e6c27a}
.favs .card-meta{justify-self:start;order:2}
.favs .card-go{display:none}
.favs .card-sum{display:none}
.favs .card-title{font-size:1.05rem}
.explore{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.explore .card{grid-template-columns:1fr}
.explore .card-go{margin-top:.4rem}
.foot{text-align:center;padding-block:40px 60px;color:var(--ink-soft);font:.9rem var(--sans)}
@media (min-width:700px){ .cards:not(.favs):not(.explore){grid-template-columns:1fr} }

/* inner pages */
.pagehead{padding-top:clamp(24px,5vw,48px);padding-bottom:8px}
.pagehead .kicker{font:700 .85rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rose-dark);margin:0 0 .5rem}
.pagehead h1{font-size:clamp(2rem,6vw,3rem)}
.pagehead .lead{margin-left:0;margin-right:0;max-width:40em}
.prose{max-width:40em}
.prose p{font-size:1.08rem;margin:0 0 1.1em}
.prose h2{font-size:clamp(1.4rem,3.5vw,1.85rem);margin:2rem 0 .8rem;padding-bottom:.3rem;border-bottom:3px solid var(--amber);display:inline-block}
.todo{background:var(--paper);border:2px dashed var(--line);border-left:8px solid var(--amber);border-radius:14px;padding:1rem 1.3rem;margin:1.6rem 0 2rem}
.todo h2,.todo-h{font-size:1.15rem;margin:0 0 .6rem;border:0;padding:0;display:block;color:var(--ink)}
.todo ul{margin:.2rem 0 0;padding-left:1.2em}
.todo li{margin:.4rem 0;color:var(--ink-soft)}
.flag{font:700 .75rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rose-dark);background:var(--amber-soft);border-radius:99px;padding:.25rem .55rem;margin-left:.4rem;vertical-align:middle;white-space:nowrap}
.who{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.who li{background:var(--paper);border:2px solid var(--line);border-radius:var(--card-radius);padding:1rem 1.2rem}
.who li.unsure{border-style:dashed}
.who h3{font-size:1.15rem;margin:0 0 .35rem}
.who p{margin:0;color:var(--ink-soft);font-size:1rem}
.book-card{background:var(--paper);border:2px solid var(--line);border-radius:var(--card-radius);padding:clamp(1.2rem,4vw,2rem);box-shadow:var(--shadow);margin:1.2rem 0 2rem}
.book-card h2{font-size:clamp(1.6rem,4vw,2.2rem);border:0;padding:0;display:block;margin:0 0 .3rem}
.book-sub{font-style:italic;color:var(--ink-soft);margin:0 0 .4rem}
.book-ded{font:600 .95rem var(--sans);color:var(--rose-dark);margin:0 0 1rem}
.buylinks{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2rem}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:1.4rem 0 2rem;padding:0;list-style:none}
.frame{aspect-ratio:4/3;background:var(--paper);border:2px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;color:var(--ink-soft)}
.frame .ph-label{font:700 1.1rem var(--display);color:var(--ink);margin:0 0 .35rem}
.frame .ph-hint{font:.9rem/1.4 var(--sans);margin:0}
.place-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:12px}
.place-list li{background:var(--paper);border:2px solid var(--line);border-radius:var(--card-radius);padding:1rem 1.2rem}
.place-list h3{font-size:1.1rem;margin:0 0 .25rem}
.place-list .where{font:600 .85rem var(--sans);color:var(--rose-dark);margin:0 0 .35rem}
.place-list p{margin:0;color:var(--ink-soft)}
.map-wrap{background:var(--paper);border:2px solid var(--line);border-radius:var(--card-radius);padding:clamp(12px,3vw,24px);margin:1rem 0 1.6rem;overflow:auto}
.map-wrap svg{width:100%;height:auto;display:block;max-width:900px;margin-inline:auto}
.map-caption{font:.9rem/1.45 var(--sans);color:var(--ink-soft);margin:.2rem 0 0;text-align:center}

/* story page */
.topbar{padding-top:16px;padding-bottom:4px}
.story{padding-bottom:140px}
.kicker{font:700 .85rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rose-dark);margin:1.4rem 0 .4rem}
.story h1{font-size:clamp(1.9rem,6vw,3rem)}
.meta{font:600 .95rem var(--sans);color:var(--grey);margin:.6rem 0}
.summary{font-size:1.1rem;color:var(--ink-soft);max-width:40em}
.player{background:var(--paper);border:2px solid var(--line);border-radius:var(--player-radius);padding:clamp(20px,4vw,32px);margin:1.6rem 0;text-align:center;box-shadow:0 8px 24px rgba(120,80,40,.1)}
.bigplay{width:min(100%,360px);min-height:120px;border-radius:60px;border:0;background:var(--rose);color:#fff;font:700 1.9rem/1 var(--sans);
  display:inline-flex;align-items:center;justify-content:center;gap:.8rem;cursor:pointer;box-shadow:0 6px 0 var(--rose-dark),0 12px 24px var(--play-shadow);touch-action:manipulation}
.bigplay:hover{background:var(--rose-dark)}
.bigplay:active{transform:translateY(3px);box-shadow:0 3px 0 var(--rose-dark)}
.bigplay .ic{width:2.4rem;height:2.4rem}
.ic-pause,.is-playing .ic-play{display:none}
.is-playing .ic-pause{display:block}
.seekrow{display:flex;align-items:center;gap:.8rem;margin:1.5rem 0 1.1rem}
.time{font:600 .9rem var(--sans);color:var(--ink-soft);min-width:3.2em;font-variant-numeric:tabular-nums}
#seek{flex:1;height:var(--tap);accent-color:var(--rose);cursor:pointer;background:transparent}
.row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.speed{display:inline-flex;border-radius:16px;overflow:hidden}
.seg{border-radius:0;margin:0}
.seg:first-child{border-radius:16px 0 0 16px}
.seg:last-child{border-radius:0 16px 16px 0;border-left-width:0}
.seg.on{background:var(--rose);color:#fff}
.hint{font:.95rem var(--sans);color:var(--ink-soft);margin:1.1rem 0 0}
.ended{font-weight:700;color:var(--rose-dark);margin:.8rem 0 0}
.tr-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:2.2rem}
.tr-head h2{font-size:1.6rem}
.legend{font:.9rem/1.5 var(--sans);color:var(--ink-soft);margin:.5rem 0 1rem}
.transcript{font-size:clamp(1.35rem,3.8vw,1.7rem);line-height:1.85;background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:clamp(16px,4vw,32px)}
.transcript p{margin:0 0 1.4em}
.transcript p:last-child{margin-bottom:0}
.w{cursor:pointer;border-radius:6px;padding:.04em .06em;transition:background-color .1s;-webkit-tap-highlight-color:rgba(168,67,92,.2)}
.w.now{background:var(--amber);color:#1c130b;box-shadow:0 0 0 .08em var(--amber)}
.w.unclear,.unclear{color:var(--grey);font-style:italic}
.w.unclear.now{color:#4a3f33}
@media (hover:hover){.w:hover:not(.now){text-decoration:underline dotted var(--rose);text-underline-offset:.2em}}
.pn{display:grid;gap:14px;margin-top:2.2rem}
.pn .btn-soft{flex-direction:column;align-items:flex-start;text-align:left;gap:.2rem;padding:.9rem 1.3rem}
.pn .dir{font-size:1rem}
.pn .nm{font:400 .95rem/1.35 var(--serif);color:var(--ink-soft)}
@media (min-width:700px){.pn{grid-template-columns:1fr 1fr}.pn .btn-main{grid-column:1/-1}}


/* Phone and iPad portrait: a tidy brand row + 3-column link grid, so items don't wrap unevenly. */
@media (max-width:900px){
  .sitenav-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 6px;justify-items:stretch}
  .sitenav a{justify-content:center;text-align:center;padding-inline:.35rem;width:100%;margin:0}
  .sitenav .brand{grid-column:1/-1;margin-right:0;min-height:var(--tap)}
}
/* On a narrow screen, keep the sketches large enough to read, and let the box scroll sideways. The lists under each map are the main reading text. */
@media (max-width:700px){
  .map-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .map-wrap svg{min-width:640px}
  .map-caption::after{content:" Swipe the sketch sideways to see all of it."}
}

.minibar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.minibar[hidden]{display:none}
.minibar button{font:700 1rem var(--sans);min-width:var(--tap);min-height:var(--tap);border-radius:14px;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.minibar .mini-play{background:var(--rose);border-color:var(--rose)}
.minibar .ic{width:1.9rem;height:1.9rem}
.mini-title{flex:1;min-width:0;font-size:.95rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:480px){html{font-size:20px}.mini-title{display:none}.minibar{justify-content:space-between}.minibar .mini-up{margin-left:auto}.btn{width:100%}.speed{width:100%}.seg{flex:1;width:auto}.row{flex-direction:column}.tr-head .btn,.topbar .btn{width:auto}.buylinks .btn{width:100%}}


/* Theme theme-C: Bohemian folk-art */
/* Theme C — Bohemian folk-art accents, still large and readable */
:root{
  --cream:#f8f1df;
  --paper:#fffaf0;
  --ink:#1c140e;
  --ink-soft:#3d2e22;
  --rose:#9c1c2c;
  --rose-dark:#7a1320;
  --rose-soft:#f3d6d4;
  --amber:#c9a227;
  --amber-soft:#f6e7b0;
  --line:#d9c49a;
  --grey:#5e5144;
  --play-shadow:rgba(122,19,32,.3);
  --nav-bg:#f3e6c8;
  --nav-border:#9c1c2c;
  --hero-align:center;
  --card-radius:8px;
  --player-radius:12px;
  --shadow:0 2px 0 #d9c49a, 0 8px 16px rgba(80,30,20,.07);
  --shadow-hover:0 2px 0 #9c1c2c, 0 10px 20px rgba(80,20,20,.14);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",serif;
  --display:Georgia,"Palatino Linotype",Palatino,"Book Antiqua",serif;
  --body-extra:
    linear-gradient(rgba(248,241,223,.94), rgba(248,241,223,.94)),
    repeating-linear-gradient(90deg, rgba(156,28,44,.05) 0 8px, rgba(29,58,110,.05) 8px 16px, transparent 16px 28px);
}
body{
  background-color:var(--cream);
  /* folk embroidery bands, top and bottom */
  border-top:18px solid transparent;
  border-bottom:18px solid transparent;
  border-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='18' viewBox='0 0 80 18'><rect width='80' height='18' fill='%239c1c2c'/><rect x='0' y='3' width='80' height='12' fill='%23f8f1df'/><rect x='0' y='5' width='80' height='8' fill='%231d3a6e'/><path d='M8 9l4-4 4 4-4 4zM24 9l4-4 4 4-4 4zM40 9l4-4 4 4-4 4zM56 9l4-4 4 4-4 4zM72 9l4-4 4 4-4 4' fill='%23c9a227'/></svg>") 18 stretch;
}
.sitenav{border-bottom:4px solid var(--rose);background:var(--nav-bg)}
.sitenav a[aria-current="page"]{background:var(--rose);color:#fff}
.brand{color:var(--rose-dark)}
.hero h1{font-style:italic}
.hero h1::before,
.hero h1::after{
  content:"";
  display:block;
  width:72px;height:22px;
  margin:.7rem auto;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 22'><path d='M36 2c-2 6-8 8-14 8 6 0 8 6 8 10 0-4 2-10 8-10 6 0 8 6 8 10 0-4 2-10 8-10-6 0-12-2-14-8z' fill='%239c1c2c'/><circle cx='10' cy='14' r='3' fill='%231d3a6e'/><circle cx='62' cy='14' r='3' fill='%231d3a6e'/><path d='M4 14h6M62 14h6' stroke='%23c9a227' stroke-width='1.5'/></svg>") center/contain no-repeat;
}
.gift{color:var(--rose-dark)}
.section h2{
  border-bottom:none;
  padding-bottom:0;
  position:relative;
  display:inline-block;
  padding-left:1.6rem;
}
.section h2::before,
.prose h2::before{
  content:"";
  position:absolute;left:0;top:.15em;
  width:1.1rem;height:1.1rem;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c-2 5-6 7-9 7 3 0 5 4 5 8 0-4 2-8 5-8 3 0 5 4 5 8 0-4 2-8 5-8-3 0-7-2-9-7z' fill='%239c1c2c'/></svg>") center/contain no-repeat;
}
.prose h2{border-bottom:none;padding-left:1.6rem;position:relative;display:inline-block}
.card{
  border:3px solid var(--rose);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px #1d3a6e, 0 8px 16px rgba(80,30,20,.08);
  background:var(--paper);
}
.favs .card{
  background:var(--amber-soft);
  border-color:var(--rose);
  box-shadow: inset 0 0 0 3px var(--amber-soft), inset 0 0 0 6px #1d3a6e, 0 8px 16px rgba(80,30,20,.08);
}
.card-meta{background:#1d3a6e;color:#fff}
.note{border-color:var(--rose);border-left-color:var(--rose);border-left-width:8px}
.card,.who li,.place-list li{padding:1.25rem 1.4rem}
.player{
  border:3px solid var(--rose);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 7px #1d3a6e, 0 8px 20px rgba(80,30,20,.1);
}
.bigplay{box-shadow:0 6px 0 #1d3a6e, 0 12px 24px var(--play-shadow)}
.bigplay:active{box-shadow:0 3px 0 #1d3a6e}
.transcript{border:3px solid #1d3a6e}
.w.now{background:var(--amber);color:#1c140e}
.frame{
  border:3px solid var(--rose);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 7px #1d3a6e;
}
.book-card{border:3px solid var(--rose);box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 7px #1d3a6e}
.map-wrap{border:3px solid #1d3a6e}
.foot{border-top:4px solid var(--rose)}
.btn{border-color:var(--rose)}
.btn-main{background:var(--rose)}

@media (max-width:600px){
  .hero h1::before, .hero h1::after{margin:.45rem auto;height:18px}
}