/* Jugami School: The Harlem Renaissance. "Lenox Avenue after dark" theme.
   Deep indigo night, gold and warm ochre light, cream paper. Flat silhouettes and Art Deco fans,
   original to Jugami (drawn in code; no copied artwork). */
:root{
  --paper:#f6ecd6; --paper2:#efe1c2; --card:#fffaf0; --ink:#1f1a2e; --ink2:#463d52; --faded:#625870;
  --indigo:#1b1d4a; --night:#10122e; --violet:#3d3a7a; --gold:#e0b341; --goldL:#f2d784; --goldD:#8a6510;
  --ochre:#c47a2c; --ochreD:#8f4f14; --line:#dccaa4; --radius:6px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --deco:Futura,"Century Gothic","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.65}
a{color:#7a3d0c;text-underline-offset:2px}a:hover{color:var(--indigo)}
img,svg{max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:8px;background:var(--goldL);color:var(--ink);padding:8px 12px;z-index:9}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.prose{max-width:40em}

/* header: a marquee strip */
.site-head{background:var(--night);color:var(--paper);border-bottom:3px solid var(--gold)}
.site-head .bar{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none;font-family:var(--deco);letter-spacing:.06em;font-size:1.05rem}
.brand img{width:36px;height:36px}.brand:hover{color:var(--goldL)}
.head-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:.9rem}
.head-nav a{color:#e9dcc0;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.head-nav a:hover,.head-nav a:focus{color:var(--goldL);border-bottom-color:var(--gold)}
.site-head a:focus-visible{outline-color:var(--goldL)}
.crumbs ol{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px;font-family:var(--sans);font-size:.85rem;color:var(--faded)}
.crumbs li+li:before{content:"\25C6";margin-right:6px;color:var(--ochre);font-size:.7em}
.crumbs a{color:var(--ink2)}

/* hero */
.hero{display:grid;gap:22px;align-items:center;padding:18px 0 4px}
.hero-art{margin:0;background:var(--night);border-radius:var(--radius);padding:8px;box-shadow:0 12px 28px rgba(16,18,46,.25)}
.hero-art svg{display:block;width:100%}
.hero-art figcaption{font-family:var(--sans);font-size:.8rem;color:#d9cdb3;padding:6px 4px 2px}
.kicker{font-family:var(--deco);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--ochreD);margin:10px 0 0;font-weight:700}
h1{font-family:var(--deco);font-weight:700;font-size:clamp(2.1rem,6.4vw,3.5rem);line-height:1.04;margin:.12em 0 .2em;letter-spacing:.01em;color:var(--indigo)}
h1 em{font-style:normal;color:var(--ochreD)}
.sub{font-style:italic;color:var(--ink2);font-size:1.16rem;margin:0 0 .7em}
h2{font-family:var(--deco);font-weight:700;color:var(--indigo);font-size:clamp(1.55rem,4.2vw,2.1rem);margin:60px 0 10px;scroll-margin-top:12px;line-height:1.15;letter-spacing:.01em}
h2:before{content:"";display:block;width:84px;height:12px;margin-bottom:12px;
  background:linear-gradient(var(--gold),var(--gold)) 0 0/84px 3px no-repeat,linear-gradient(var(--ochre),var(--ochre)) 0 6px/56px 3px no-repeat,linear-gradient(var(--indigo),var(--indigo)) 0 12px/28px 3px no-repeat}
h3{font-size:1.22rem;color:var(--ochreD);margin:1.4em 0 .3em;scroll-margin-top:12px}
h4{font-size:1.03rem;margin:1em 0 .2em}
.lede{font-size:1.12rem;color:var(--ink2)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:10px 16px;border-radius:999px;text-decoration:none;border:2px solid var(--indigo);color:var(--indigo);background:var(--card)}
.btn.primary{background:var(--indigo);color:#fff}
.btn:hover{background:var(--goldL);color:var(--ink)}

.note{background:#efe4f5;border-left:4px solid var(--violet);padding:12px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:16px 0}
.note.gold{background:#fbefc9;border-left-color:var(--ochre)}
.note p{margin:.35em 0}
.small{font-size:.9rem;color:var(--ink2)}
blockquote.pull{margin:18px 0;padding:6px 0 6px 18px;border-left:3px solid var(--gold);font-style:italic;color:var(--ink2)}
blockquote.pull cite{display:block;font-style:normal;font-family:var(--sans);font-size:.85rem;margin-top:4px}

.toc{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;font-family:var(--sans);counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:block;height:100%;padding:9px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.toc a:before{content:counter(t) " \00B7 ";color:var(--ochre)}
.toc a:hover,.toc a:focus{border-color:var(--gold);background:#fbefc9}

/* timeline */
.timeline{list-style:none;padding:0;margin:18px 0;border-left:3px solid var(--gold);max-width:46em}
.timeline li{position:relative;padding:4px 0 14px 22px}
.timeline li:before{content:"";position:absolute;left:-9px;top:12px;width:15px;height:15px;background:var(--indigo);transform:rotate(45deg);border:2px solid var(--gold)}
.timeline b{font-family:var(--deco);color:var(--ochreD);letter-spacing:.04em;margin-right:6px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;padding:0;list-style:none}
.card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--indigo);border-radius:var(--radius);padding:14px 18px;position:relative}
.card.music{border-top-color:var(--ochre)}.card.art{border-top-color:var(--gold)}
.card h3{margin:.1em 0 .1em;color:var(--indigo)}
.card p{margin:.45em 0}
.card .q{font-family:var(--deco);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ochreD);font-weight:700;margin:0}
.card .status{display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--paper2);color:var(--ink2);margin-top:6px}
.card .status.open{background:var(--indigo);color:#fff}
.card blockquote{margin:.5em 0;padding-left:12px;border-left:3px solid var(--gold);font-style:italic}
.card.feature{grid-column:1/-1;background:var(--night);color:var(--paper);border-top-color:var(--gold);display:grid;gap:14px}
.card.feature h3,.card.feature h3 a{color:var(--goldL)}
.card.feature a{color:var(--goldL)}
.card.feature .q{color:var(--gold)}
@media (min-width:760px){.card.feature{grid-template-columns:1.2fr 1fr;align-items:center}}

/* poems */
.poem{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:16px 0;max-width:40em;box-shadow:0 4px 0 var(--paper2)}
.poem h3{margin-top:0;color:var(--indigo)}
.poem .ded{font-style:italic;margin:-.2em 0 .6em;color:var(--ink2)}
.poem .lines{margin:0;font-size:1.05rem;line-height:1.7}
.poem .lines p{margin:0 0 .9em}
.poem .lines span{display:block;padding-left:2.2em;text-indent:-2.2em}
.poem .lines span.in{padding-left:4.2em}
.poem .lines span.in2{padding-left:6.2em}
.poem .src{font-family:var(--sans);font-size:.82rem;color:var(--faded);margin:.4em 0 0;border-top:1px dashed var(--line);padding-top:8px}
.read{max-width:40em}
.read h4{color:var(--ochreD)}

/* games and quiz */
.play{background:var(--card);border:2px solid var(--indigo);border-radius:var(--radius);padding:16px 18px;max-width:46em;box-shadow:6px 6px 0 var(--gold)}
.scorebar{font-family:var(--sans);font-weight:700;color:var(--indigo);margin:.2em 0}
.prompt{font-size:1.18rem;margin:.5em 0;min-height:2.4em}
.prompt q,.prompt .line{font-style:italic}
.choices{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:10px 0}
.choices button,.play button,.quiz button{font:inherit;font-family:var(--sans);font-size:1rem;padding:10px 14px;border-radius:var(--radius);border:2px solid var(--indigo);background:#fff;color:var(--ink);cursor:pointer;text-align:left}
.choices button:hover{background:#fbefc9}
.choices button[disabled]{cursor:default;opacity:.75}
.choices button.right{background:#dfeedd;border-color:#2e6b34;opacity:1}
.choices button.wrong{background:#f6dcd6;border-color:#9a2f1d;opacity:1}
button.go{background:var(--indigo);color:#fff}
.feedback{min-height:1.6em;font-weight:600}
.feedback.good{color:#24602b}.feedback.bad{color:#8d2a19}
kbd{font-family:var(--sans);font-size:.85em;border:1px solid var(--ink2);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:#fff}
.stanza{background:var(--night);color:var(--paper);border-radius:var(--radius);padding:12px 16px;margin:10px 0;font-size:1.08rem;min-height:6.4em}
.stanza p{margin:.15em 0}
.stanza .tag{display:inline-block;width:1.8em;font-family:var(--deco);color:var(--gold);font-weight:700}
.stanza .empty{color:#9c93b5;font-style:italic}
.quiz fieldset{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 14px;padding:10px 16px;background:var(--card);max-width:46em}
.quiz legend{font-weight:700;padding:0 6px}
.quiz label{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;cursor:pointer}
.quiz input{margin:0;flex:none}.quiz input[type=radio]{width:22px;height:22px}
.why{margin:.4em 0;padding:8px 12px;border-radius:var(--radius);font-size:.95rem}
.why.good{background:#dfeedd}.why.bad{background:#f6e3d0}
.quiz-result{font-weight:700;font-size:1.1rem;color:var(--indigo)}
.talk li{margin:.5em 0}
.sources li{margin:.45em 0;font-size:.95rem}
.sources{max-width:46em}

/* pager + footer */
.pager{display:grid;gap:10px;grid-template-columns:1fr;margin:56px 0 10px;font-family:var(--sans)}
@media (min-width:700px){.pager{grid-template-columns:1fr 1fr 1fr}}
.pager a,.pager span{display:block;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--ink);font-weight:600}
.pager small{display:block;font-weight:400;color:var(--faded)}
.pager .soon{color:var(--faded);background:var(--paper2)}
.pager a:hover{border-color:var(--gold);background:#fbefc9}
.site-foot{margin-top:50px;background:var(--night);color:#e3d7bd;padding:24px 0 30px;font-family:var(--sans);font-size:.92rem;border-top:3px solid var(--gold)}
.site-foot a{color:var(--goldL)}
.site-foot p{margin:.4em 0}
.jugami-more{margin-top:12px;line-height:1.9}.jugami-more span{font-weight:700;margin-right:6px}
.deco-rule{display:block;margin:28px auto 0;width:200px}

@media (min-width:860px){.hero{grid-template-columns:1.05fr 1fr}}
@media (max-width:480px){body{font-size:17px}.poem{padding:14px 14px}.poem .lines span.in{padding-left:3.2em}.poem .lines span.in2{padding-left:4.4em}}
@media print{.site-head,.site-foot,.play,.pager{display:none}body{background:#fff}}

/* tap targets (min 44px) */
.head-nav a,.brand,.skip,.site-foot a,.crumbs a,.card .status.open{min-height:44px;display:inline-flex;align-items:center}
.brand{display:flex}
.choices button.right::after{content:" \2713  Correct";font-weight:700;color:#24602b;white-space:nowrap}
.choices button.wrong::after{content:" \2717  Your pick";font-weight:700;color:#8d2a19;white-space:nowrap}
.crumbs li{display:flex;align-items:center;min-height:44px}
.jugami-more{line-height:1.3}
.quiz label{line-height:1.35}