:root{color-scheme:light;--paper:#f7efe2;--cream:#fffbf3;--ink:#33251d;--muted:#665344;--line:#dfc8a8;--accent:#71383b;--olive:#465238;--gold:#f6dfae;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.58 system-ui,sans-serif}
h1,h2,h3,.voice{font-family:Georgia,serif;line-height:1.12}
h1{font-size:clamp(2.8rem,7vw,6rem);margin:.18em 0}
h2{font-size:clamp(1.9rem,4.5vw,3.2rem);margin:0 0 .55em}
h3{font-size:1.33rem;margin:.2em 0 .65em}
p{margin:.55em 0}
a{color:var(--accent)}
img{display:block;width:100%;height:auto}
.brand{background:#3d2922;text-align:center}
.brand a{display:inline-block;color:var(--gold);font-weight:700;padding:.6rem}
.voice{text-align:center;font-size:clamp(1.2rem,3vw,2rem);color:var(--accent);margin:0;padding:1rem;background:#fbefd8;border-bottom:1px solid var(--line)}
.layout{max-width:1680px;margin:auto;display:grid;grid-template-columns:minmax(205px,240px) minmax(0,1fr);gap:clamp(1rem,3vw,3rem);padding:clamp(.8rem,3vw,2.5rem)}
aside{align-self:start;position:sticky;top:1rem;max-height:calc(100dvh - 2rem);overflow:auto;padding:.55rem;background:var(--cream);border:1px solid var(--line);border-radius:16px}
nav{display:grid;gap:2px;margin-top:.6rem}
nav a{padding:.32rem .45rem;text-decoration:none;border-radius:8px;font-size:.88rem;color:var(--ink)}
nav a:hover,nav a[aria-current]{background:#efdeca;color:var(--accent)}
main{min-width:0}
section{margin:0 0 1.55rem;padding:clamp(1rem,4vw,3rem);background:var(--cream);border:1px solid var(--line);border-radius:22px;scroll-margin-top:4.5rem}
section.intro{padding:0;overflow:hidden;background:#442a27;color:#fff4df}
.intro .copy{padding:clamp(1.1rem,4.5vw,3.5rem)}
.intro p{max-width:54ch}
.eyebrow{letter-spacing:.16em;font-weight:750;font-size:.76rem;text-transform:uppercase;color:var(--accent)}
.intro .eyebrow{color:var(--gold)}
.hero{position:relative;margin:0}
.tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:.24em .62em;border-radius:8px;background:#fff2d7;color:#432920;font-weight:750;font-size:clamp(.55rem,1.3vw,.95rem);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.card,fieldset,details.module{border:1px solid var(--line);border-radius:13px;background:#fffdf8;padding:.85rem;min-width:0;margin:0 0 .6rem}
.card img{aspect-ratio:1.3;object-fit:contain;background:#f1e5d3;border-radius:9px;margin-bottom:.8rem}
summary{cursor:pointer;font-weight:750}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:.7rem 0}
button,input,select{font:inherit}
button,select,input[type=text]{min-height:42px;border:1px solid #a8876c;border-radius:8px;padding:.34rem .65rem;background:white;color:var(--ink)}
button{cursor:pointer;font-weight:680}
button:hover,button[aria-pressed=true]{background:#f1ddba;color:#482a23}
button.primary{color:#fff9eb;background:var(--accent);border-color:var(--accent)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #946039;outline-offset:2px}
audio{display:block;width:100%;margin:.85rem 0}
.turn{border-radius:10px;padding:.48rem .7rem;margin:.3rem 0;border-left:3px solid var(--line)}
.turn.active{background:#f4dfb6;border-left-color:var(--accent)}
.turn button{margin:.2rem .5rem .2rem 0}
.ru{color:var(--muted)}
.role{font-size:.73rem;text-transform:uppercase;letter-spacing:.08em;color:var(--olive);font-weight:800}
.picture{width:min(100%,450px);border-radius:12px}
details img.picture{margin:.7rem 0}
.mark mark{background:#f2dfb3;color:#412b20;padding:0 .1em}
.qa label{display:block;cursor:pointer;margin:.28rem 0}
.qa input[type=text]{display:block;width:min(100%,32rem)}
.qa output{display:block;font-weight:650;margin:.5rem 0;color:var(--accent)}
.qa.correct output{color:var(--olive)}
.qa legend{font-weight:700;padding:0 .3rem}
.note{padding:.75rem;border-left:3px solid #969572;background:#eff0e3;color:#333b27}
footer{text-align:center;padding:2rem;color:var(--muted)}
[hidden]{display:none!important}
@media(max-width:740px){.layout{display:block}aside{z-index:5;top:0;max-height:42vh;margin-bottom:.65rem}section{padding:1rem;border-radius:15px}.tag{padding:.14em .35em;font-size:clamp(.51rem,2.1vw,.8rem)}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}