/* Page-specific styles: home, clipping, statue, quiz, about */
.btn-big { font-size: 1.08rem; padding: .9rem 1.5rem; }
.label-like { font-weight: 600; font-size: .92rem; display: block; margin-bottom: .4rem; }
.sd-week { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); font-weight: 700; }
.shared-note { margin-bottom: 1.5rem; border-left: 5px solid var(--gold-bright); }
.fact { display: flex; flex-direction: column; gap: .25rem; }
.fact strong { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; }
.stat-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }

/* ---------- home ---------- */
.hero { padding: 2.5rem 0 1rem; overflow: hidden; }
.hero-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.4fr 1fr; } }
.hero-date { font: 600 .82rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--copper); margin-bottom: .8rem; }
.hero h1 em { color: var(--verd); font-style: italic; }
.hero-art { position: relative; max-width: 340px; width: 100%; margin-inline: auto; }
.hero-statue { --statue: #6fae9b; animation: rise 1.4s cubic-bezier(.2,.8,.2,1) both; }
.hero-statue svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
.hero-statue .st-flame { animation: flicker 1.6s ease-in-out infinite alternate; transform-origin: 64px 31px; }
@keyframes flicker { from { transform: scale(1); opacity: 1; } to { transform: scale(1.06, .95); opacity: .85; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.crate-tag {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%) rotate(-4deg);
  background: #b07c47; color: #fff8e8; font: 700 .7rem/1 var(--font-body); letter-spacing: .12em;
  padding: .5rem .7rem; border: 2px solid #6d4a25; white-space: nowrap; box-shadow: var(--shadow);
}
.age-line { margin-top: 1.2rem; color: var(--muted); }
.age-line strong { color: var(--ink); font-family: var(--font-display); font-size: 1.2rem; }
.bday { display: inline-block; margin-left: .3rem; color: var(--copper); font-weight: 700; }

.story-strip { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.story-card { border-radius: 4px; }
.story-card h3 { font-size: 1.2rem; margin-top: .3rem; }
.story-card p { font-size: .94rem; margin: 0; }
.story-year { font: 700 .74rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #a8562a; }

.feature { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: .3rem; transition: transform .15s, border-color .15s; }
.feature:hover { transform: translateY(-3px); border-color: var(--verd); color: var(--ink); }
.feature p { color: var(--muted); margin: 0; }
.feature-icon { font-size: 1.8rem; }
.feature-go { margin-top: auto; padding-top: .6rem; font-weight: 700; color: var(--verd); }

.numbers { background: var(--verd); color: #fff; padding: 2rem 0; }
[data-theme="dark"] .numbers { background: #173a34; }
.numbers-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align: center; }
.numbers strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.4rem); }
.numbers span { font-size: .9rem; opacity: .9; }

/* ---------- clipping ---------- */
.clip-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; align-items: start; }
@media (min-width: 900px) { .clip-grid { grid-template-columns: 1fr 1.1fr; } .clip-form { position: sticky; top: 80px; } }
textarea { resize: vertical; }
#clipCanvas { width: 100%; height: auto; display: block; box-shadow: var(--shadow); border-radius: 3px; max-width: 560px; margin-inline: auto; }
.clip-out { min-width: 0; }
.clip-facts { margin-top: 1.2rem; }

/* ---------- statue ---------- */
.patina-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; align-items: start; }
@media (min-width: 860px) { .patina-grid { grid-template-columns: 1fr 1.2fr; } }
.patina-stage { position: relative; background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow: hidden; }
.patina-statue { max-width: 300px; margin-inline: auto; position: relative; z-index: 1; }
.patina-statue svg { display: block; width: 100%; height: auto; }
.patina-statue .st-body { transition: none; }
.patina-year { position: absolute; inset: auto 0 .5rem 0; text-align: center; z-index: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 18vw, 7rem); color: var(--ink); opacity: .08; line-height: 1; }
.slider-label { font-size: 1rem; }
.slider-label strong { font-family: var(--font-display); font-size: 1.6rem; }
.stage-card h3 { margin-top: .5rem; }
.minerals { display: flex; flex-direction: column; gap: .45rem; }
.mineral { font-size: .92rem; }
.mineral i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: .4rem; border: 1px solid rgba(0,0,0,.2); }
.mineral code { font-size: .85rem; background: var(--paper-3); padding: .05rem .3rem; border-radius: 3px; }
.vote-card { margin-top: 1rem; }
.vote-card h3 { font-size: 1.1rem; }

.scale-input { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1.2rem; }
.height-fields { display: flex; gap: .8rem; }
.height-fields[hidden] { display: none; }
.height-fields input { width: 110px; }
.scale-list { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.scale-row { display: grid; grid-template-columns: 1fr; gap: .3rem; padding: .7rem .9rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; }
@media (min-width: 700px) { .scale-row { grid-template-columns: 260px 1fr; align-items: center; } }
.scale-k { display: flex; flex-direction: column; }
.scale-v { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.scale-txt { font-weight: 700; color: var(--verd); }
.pi-row { display: flex; flex-wrap: wrap; gap: 2px; align-items: end; min-height: 24px; }
.pi { width: 10px; height: 24px; fill: var(--copper); }
.pi-wrap { display: inline-block; max-width: 40px; }
.pi-wrap .pi { width: 100%; height: auto; }
.pi-more { font-size: .8rem; font-weight: 700; color: var(--copper); margin-left: .3rem; }
.fact-tiles { margin-top: 1rem; }

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-item { display: grid; grid-template-columns: 70px 1fr; gap: .8rem; margin-bottom: 1rem; position: relative; }
.tl-year { font-family: var(--font-display); font-weight: 700; font-size: 1rem; background: var(--paper); border: 2px solid var(--verd); color: var(--verd); border-radius: 999px; height: 34px; display: grid; place-items: center; position: relative; z-index: 1; }
.tl-body { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; }
.tl-body h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.tl-body p { margin: 0; font-size: .95rem; }
.tl-star .tl-year { background: var(--gold-bright); border-color: var(--gold-bright); color: #2a1d00; }
.tl-star .tl-body { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(233,169,42,.2); }

/* ---------- quiz ---------- */
.mode-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 1.5rem; }
.mode-card { text-align: left; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: .3rem; transition: transform .15s, border-color .15s; }
.mode-card:hover { transform: translateY(-3px); border-color: var(--verd); }
.mode-card strong { font-family: var(--font-display); font-size: 1.3rem; }
.mode-card span { color: var(--muted); font-size: .9rem; }
.mode-card .best { color: var(--verd); font-weight: 700; }
.q-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.q-score { font-weight: 700; }
.q-timer { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--copper); }
.q-bar { margin-bottom: 1.4rem; }
.q-bar span { transition: width .4s linear; }
.bar { position: relative; height: 10px; background: var(--paper-3); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--copper), var(--gold-bright) 60%, var(--verd-2)); }
.q-text { font-size: clamp(1.3rem, 4.5vw, 1.8rem); outline: none; }
.q-opts { display: grid; gap: .6rem; margin: 1.2rem 0; }
.q-opt {
  display: flex; gap: .8rem; align-items: center; text-align: left; width: 100%;
  font: 500 1rem/1.35 var(--font-body); color: var(--ink);
  background: var(--paper-2); border: 2px solid var(--line); border-radius: 10px; padding: .8rem 1rem; cursor: pointer; min-height: 52px;
  transition: border-color .15s, background .15s, transform .1s;
}
.q-opt:hover:not([disabled]) { border-color: var(--verd); transform: translateX(3px); }
.q-opt[disabled] { cursor: default; }
.q-key { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-3); font-weight: 700; font-size: .85rem; }
.q-opt.right { border-color: var(--verd); background: var(--verd-soft); }
.q-opt.right .q-key { background: var(--verd); color: #fff; }
.q-opt.wrong { border-color: var(--red); background: rgba(155,45,28,.1); animation: shake .35s; }
.q-opt.wrong .q-key { background: var(--red); color: #fff; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.q-why { padding: .8rem 1rem; border-left: 4px solid var(--verd); background: var(--paper-2); border-radius: 0 8px 8px 0; margin-bottom: 1rem; }
.result-ticket { padding: 1.4rem; border-radius: 4px; }
.result-ticket h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); margin: .2rem 0; }
.q-big { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin: .2rem 0 .6rem; }
.missed { padding-left: 1.1rem; margin: 0; }
.missed li { margin-bottom: .7rem; }

/* ---------- about ---------- */
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .55rem; }
.hist-inline { font: 700 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: .2rem .4rem; border-radius: 4px; border: 1px solid var(--copper); color: var(--copper); }
.sources a { word-break: break-word; }