/* Colours and type from the Made of Many storefront theme (Craft): Crimson Text, cream / green / gold. */
:root{
  --bg:#FAF6EC;--ink:#2B2620;--mute:#6B6358;--card:#FFFDF7;--line:rgba(43,38,32,.16);
  --accent:#3B5D45;--accent-ink:#FAF6EC;--link:#3B5D45;
  --mom-bg:#23352A;--mom-ink:#FAF6EC;--mom-accent:#D9B370;--warn:#E9ECDD;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141C15;--ink:#EDEFE3;--mute:#A9B09C;--card:#1B261D;--line:rgba(237,239,227,.18);
  --accent:#6B8552;--accent-ink:#141C15;--link:#D9B370;
  --mom-bg:#23352A;--mom-ink:#FAF6EC;--mom-accent:#D9B370;--warn:#23352A;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 20px/1.55 "Crimson Text",Georgia,serif;text-align:center}
main{max-width:640px;margin:0 auto;padding:28px 18px calc(48px + env(safe-area-inset-bottom))}
.sr{position:absolute;left:-9999px}
button,input,textarea{font-family:inherit}
a{color:var(--link)}

.brand{display:block;text-decoration:none;color:var(--ink)}
.eyebrow{font:600 .8rem/1.4 "Crimson Text",Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:.3em 0}
h1{font-weight:400;font-size:clamp(3rem,15vw,4.4rem);line-height:1;letter-spacing:-.01em;margin:.05em 0 .1em}
h2,h3{font-weight:400;margin:0}
.title{font-size:clamp(2.2rem,10vw,3rem);line-height:1.1;margin:1em 0 .15em}
.title.small{font-size:1.9rem}
h3{font-size:1.2rem;margin:1.6em 0 .5em}
.tag{margin:.5em auto 1.2em;color:var(--mute);max-width:26em}
.sub,.hint{color:var(--mute);font-size:1rem;line-height:1.4;margin:.4em 0}
.sub{font-size:1.15rem;font-style:italic}

form#form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
input[type=text],textarea{width:100%;font-size:19px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);text-align:center}
textarea{text-align:left}
input::placeholder,textarea::placeholder{color:var(--mute)}
button{font-size:1.1rem;font-weight:600;letter-spacing:.02em;padding:13px 22px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;min-height:50px}
button.ghost{background:transparent;color:var(--accent);border-color:var(--line);min-height:42px;padding:8px 22px}
@media (prefers-color-scheme:dark){button.ghost{color:var(--link)}}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--mom-accent);outline-offset:2px}

#loading{padding:30px 0}
.spinner{width:34px;height:34px;margin:0 auto 12px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
#progress-now{font-weight:600;font-size:1.15rem;margin:0}
#progress-log{list-style:none;padding:0;margin:14px 0 0;color:var(--mute);font-size:1rem;line-height:1.6}
.notice{background:var(--warn);border:1px solid var(--line);border-radius:6px;padding:14px;margin-top:16px}

.cand{display:block;width:100%;text-align:center;background:var(--card);color:var(--ink);border:1px solid var(--line);margin:0 0 10px;padding:14px 16px}
.cand b{display:block;font-size:1.25rem;font-weight:600}
.cand span{display:block;color:var(--mute);font-size:1rem;line-height:1.4;margin-top:3px}

.tabs{display:flex;border-bottom:1px solid var(--line);margin:18px 0 0;position:sticky;top:0;background:var(--bg);z-index:2}
.tabs button{flex:1;background:none;color:var(--mute);border:0;border-bottom:3px solid transparent;border-radius:0;padding:12px 6px;min-height:50px;font-size:1.15rem}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.panel{padding-top:18px}
.row{display:flex;justify-content:center;margin:14px 0}

/* Made of Many box: the site's dark green scheme with gold accents */
.mom{background:var(--mom-bg);color:var(--mom-ink);border-radius:6px;padding:20px 18px;margin:0 0 18px}
.mom .eyebrow{color:var(--mom-accent);margin-top:0}
.mom-statement{font-size:1.45rem;line-height:1.3;margin:.2em 0 .6em}
.mom-label{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mom-accent);margin:1em 0 .3em}
.mom a{display:block;color:var(--mom-accent);font-size:1.15rem;font-weight:600;margin-top:.3em;word-break:break-word}
.mom-note{display:block;font-size:.95rem;opacity:.8}
#mom-notes{margin:1.1em 0 0;padding-top:1em;border-top:1px solid rgba(250,246,236,.2);font-size:1.05rem;line-height:1.55}
.mom sup a{color:var(--mom-accent)}

.keypoint{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 18px;margin:0 0 20px}
.keypoint p{margin:.3em 0}
.keypoint h2{font-size:1.6rem;line-height:1.2;margin:.15em 0 .4em}
#wider{margin:1.6em 0 .8em}
#summary-text{font-size:1.15rem;line-height:1.6}
#summary-text p{margin:0 0 1.1em;max-width:30em;margin-left:auto;margin-right:auto;hyphens:auto}

sup{font-size:0;line-height:0}
sup a{display:inline-block;font:600 .7rem/1 "Crimson Text",Georgia,serif;color:var(--link);text-decoration:none;vertical-align:super;padding:6px 1px;margin:-6px 0 0 1px}
sup a:hover,sup a:focus-visible{text-decoration:underline}

dl#facts{margin:1.6em 0;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 16px}
dl#facts div{padding:10px 0;border-bottom:1px solid var(--line)}
dl#facts div:last-child{border-bottom:0}
dt{color:var(--mute);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
dd{margin:.15em 0 0;font-size:1.15rem}
#gap-list{list-style:none;padding:0;color:var(--mute);margin:0}

#photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#photo-grid button{padding:0;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;min-height:0;color:var(--mute)}
#photo-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
#photo-grid small{display:block;padding:6px 8px;font-size:.9rem;font-weight:400}

ol#source-list{list-style:none;padding:0;margin:0;counter-reset:s}
#source-list li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:0 0 10px;scroll-margin-top:70px}
#source-list li::before{content:counter(s);display:block;color:var(--mute);font-size:.85rem;letter-spacing:.14em}
#source-list li.pri{border-color:var(--accent)}
#source-list li.hl{background:var(--warn)}
#source-list a{font-size:1.15rem;word-break:break-word}
#source-list .meta{display:block;color:var(--mute);font-size:1rem;line-height:1.4}

#stars{display:flex;justify-content:center;gap:6px}
#stars button{font-size:1.8rem;line-height:1;padding:6px 10px;background:var(--card);color:var(--line);border:1px solid var(--line);min-height:0}
#stars button.on{color:var(--accent)}
@media (prefers-color-scheme:dark){#stars button.on{color:var(--mom-accent)}}
.seg{display:flex;gap:6px}.seg button{flex:1;background:var(--card);color:var(--ink);border:1px solid var(--line);padding:12px 6px}
.seg button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#feedback button[type=submit]{width:100%;margin-top:14px}

dialog{border:0;padding:0;background:transparent;max-width:96vw}
dialog::backdrop{background:rgba(0,0,0,.82)}
dialog img{max-width:96vw;max-height:76vh;border-radius:6px;display:block;margin:auto}
dialog p{color:#eee;font-size:1rem;text-align:center}
dialog a{color:#fff}
#lb-close{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.6);color:#fff;padding:4px 14px;font-size:1.5rem;border-color:transparent}
[hidden]{display:none!important}