/* ------------------------------------------------------------------
   The Beginning of Modern Art — deck styling

   Palette lifted straight from Vicky's PowerPoint:
     #53ae6e  the green on every slide
     #171312  her text colour, a warm near-black
     #f7f0df  the cream shape on her title slide
   ------------------------------------------------------------------ */

:root {
  --bg:       #53ae6e;   /* her slide green */
  --deep:     #2b6b45;   /* the same green, pushed down — rules, panels */
  --deeper:   #1c4a2f;
  --cream:    #f7f0df;   /* from her title slide */
  --ink:      #171312;   /* her text colour */
  --ink-dim:  #1d3c2a;
  --ink-faint:#2f7a51;
  --rule:     rgba(23,19,18,.18);
  --serif:    'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Songti TC', serif;
  --sans:     -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Everything scales off this. Set in JS from the viewport. */
#stage { font-size: 16px; }

/* ---------- Slide frame ---------- */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5vh 7vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.slide.active { opacity: 1; pointer-events: auto; }

/* Build steps: anything not yet revealed */
.step {
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .35s ease, transform .35s ease;
}
.step.shown { opacity: 1; transform: none; }

/* ---------- Shared type ---------- */
.kicker {
  font-size: .95em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--deeper);
  margin-bottom: 1.1em;
  font-weight: 700;
}
h1 {
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.01em;
}
h2 {
  font-family: var(--serif);
  font-size: 2.5em;
  line-height: 1.12;
  font-weight: 400;
  margin-bottom: .1em;
}
.zh-title {
  font-size: 1.05em;
  color: var(--deeper);
  letter-spacing: .16em;
  margin-bottom: 1.3em;
}
.sub {
  font-size: 1.5em;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-top: .8em;
  max-width: 24em;
}

/* ---------- Title slide ---------- */
.s-title { justify-content: center; }
.s-title .meta {
  font-size: .95em; letter-spacing: .22em; text-transform: uppercase;
  color: var(--deeper); margin-bottom: 2.2em;
}
.s-title h1 { font-size: 4.6em; max-width: 15em; }
.s-title .sub {
  font-size: 1.8em; margin-top: 1em;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(23,19,18,.25);
}

/* ---------- One-word slide ---------- */
.s-word { align-items: center; justify-content: center; }
.s-word .big {
  font-family: var(--serif);
  font-size: 12em;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(23,19,18,.18);
}

/* ---------- Section / question slide ---------- */
.s-section { justify-content: center; }
.s-section h1 { max-width: 16em; }

/* ---------- Bullets ---------- */
.s-bullets ul { list-style: none; margin-top: 1.6em; }
.s-bullets li { margin-bottom: 1.15em; max-width: 40em; }
.s-bullets .head {
  font-size: 1.45em;
  line-height: 1.32;
  font-weight: 500;
}
.s-bullets .body {
  font-size: 1.12em;
  line-height: 1.5;
  color: var(--ink-dim);
  margin-top: .22em;
  max-width: 36em;
}

/* ---------- Quote slide ---------- */
.s-quote .lead { font-size: 1.25em; color: var(--ink-dim); margin-bottom: 1.2em; }
.s-quote blockquote {
  font-family: var(--serif);
  font-size: 1.55em;
  line-height: 1.42;
  color: var(--ink);
  border-left: 3px solid var(--deeper);
  padding-left: .85em;
  max-width: 26em;
}
.s-quote cite {
  display: block;
  font-style: normal;
  font-size: .95em;
  color: var(--deeper);
  margin-top: .9em;
  padding-left: 1.05em;
  max-width: 34em;
  line-height: 1.45;
}
.plain {
  margin-top: 1.6em;
  background: var(--cream);
  border-radius: .5em;
  padding: 1.2em 1.4em;
  max-width: 34em;
  color: var(--ink);
  box-shadow: 0 .6em 1.8em rgba(23,19,18,.18);
}
.plain .plain-label {
  font-size: .8em; letter-spacing: .16em; text-transform: uppercase;
  color: var(--deep); font-weight: 700; margin-bottom: .7em;
}
.plain p { font-size: 1.14em; line-height: 1.52; margin-bottom: .55em; }
.plain p:last-child { margin-bottom: 0; }
.plain .chip { border-bottom-color: var(--deep); }
.plain .chip::after { color: var(--deep); }
.plain .chip:hover { background: rgba(43,107,69,.16); }

/* ---------- ASK banner ---------- */
.ask {
  margin-top: 1.5em;
  display: flex;
  align-items: baseline;
  gap: .7em;
  max-width: 32em;
}
.ask .tag {
  flex: none;
  font-size: .78em; letter-spacing: .18em; font-weight: 700;
  color: var(--cream); background: var(--deeper);
  padding: .25em .6em; border-radius: .25em;
}
.ask .q {
  font-size: 1.3em; line-height: 1.38;
  color: var(--deeper); font-weight: 500;
}

/* ---------- Artwork slide ---------- */
.s-artwork { flex-direction: row; align-items: center; gap: 4vw; padding: 4vh 5vw; }
.s-artwork .art {
  flex: 1 1 58%;
  height: 82vh;
  display: flex; align-items: center; justify-content: center;
}
.s-artwork .art img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 2px;
  box-shadow: 0 1.2em 3em rgba(23,19,18,.42);
}
.s-artwork .side { flex: 1 1 42%; max-width: 26em; }
.s-artwork h2 { font-size: 2em; }
.s-artwork .cap {
  font-size: .98em; color: var(--deeper);
  line-height: 1.45; margin-top: .5em; margin-bottom: 1.4em;
}
.s-artwork .points { list-style: none; }
.s-artwork .points li {
  font-size: 1.14em; line-height: 1.5;
  margin-bottom: .85em; padding-left: 1em;
  border-left: 2px solid var(--rule);
}
.zoom-hint {
  font-size: .82em; color: var(--deeper);
  margin-top: 1.2em; letter-spacing: .04em;
}

/* ---------- Compare slide ---------- */
.s-compare { padding: 4vh 5vw; }
.s-compare h2 { text-align: center; margin-bottom: .6em; }
.s-compare .ask { margin: 0 auto 1em; }
.compare-wrap {
  flex: 1;
  display: flex; gap: 2vw;
  align-items: center; justify-content: center;
  min-height: 0;
}
.compare-pane {
  flex: 1 1 50%;
  height: 58vh;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .3s ease, filter .3s ease;
}
/* The image takes whatever the label leaves, rather than a fixed
   subtraction — otherwise a short pane starves it. */
.compare-pane img {
  flex: 1 1 auto; min-height: 0;
  max-width: 100%;
  object-fit: contain; cursor: zoom-in;
  box-shadow: 0 .9em 2.4em rgba(23,19,18,.4);
}
.compare-pane .lbl {
  flex: none;
  font-size: .98em; color: var(--ink-dim);
  margin-top: .9em; text-align: center; line-height: 1.4;
}
.compare-pane.dim { opacity: .3; filter: saturate(.35); }
.compare-note {
  margin: 1.1em auto 0;
  max-width: 40em; text-align: center;
  font-size: 1.25em; line-height: 1.45;
  min-height: 2.9em; color: var(--ink);
}
.compare-note .side-tag {
  display: inline-block;
  font-size: .62em; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: var(--deeper);
  padding: .3em .55em; border-radius: .25em;
  margin-right: .8em; vertical-align: middle;
}

/* ---------- Two-column ---------- */
.s-twocol .cols { display: flex; gap: 4vw; margin-top: 1.8em; }
.s-twocol .col { flex: 1 1 50%; }
.s-twocol .col h3 {
  font-family: var(--serif); font-size: 2.1em; font-weight: 400;
}
.s-twocol .col .zh { color: var(--deeper); letter-spacing: .16em; margin: .2em 0 .9em; }
.s-twocol .col .lead {
  font-size: 1.1em; color: var(--ink-dim); line-height: 1.5;
  padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid var(--rule);
}
.s-twocol .col ul { list-style: none; }
.s-twocol .col li {
  font-size: 1.2em; line-height: 1.45; margin-bottom: .75em;
  padding-left: .9em; position: relative;
}
.s-twocol .col li::before {
  content: '·'; position: absolute; left: 0; color: var(--deeper); font-weight: 700;
}

/* ---------- Break slide (the chain that snaps) ---------- */
.s-break .chain {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5em .35em; margin: 1.4em 0;
  max-width: 44em;
}
.s-break .chain span {
  font-size: 1.15em; padding: .3em .6em;
  background: var(--cream); border-radius: .3em;
  transition: opacity .4s ease, transform .4s ease;
}
.s-break .chain i {
  color: var(--deeper); font-style: normal; font-size: 1em;
}
.s-break.broken .chain span { opacity: .22; transform: translateY(.35em) rotate(-1.5deg); }
.s-break .chain-label { font-size: 1.15em; color: var(--ink-dim); max-width: 34em; }
.s-break .after { margin-top: 1.4em; max-width: 34em; }
.s-break .after .after-label {
  font-size: 1.5em; color: var(--deeper); margin-bottom: .7em;
  font-family: var(--serif);
}
.s-break .after ul { list-style: none; }
.s-break .after li {
  font-size: 1.18em; line-height: 1.5; margin-bottom: .5em;
  padding-left: 1em; border-left: 2px solid var(--deeper);
}

/* ---------- Activity slide (with timer) ---------- */
.s-activity { flex-direction: row; gap: 4vw; align-items: center; }
.s-activity .left { flex: 1 1 55%; }
.s-activity .right { flex: 1 1 45%; max-width: 24em; }
.s-activity ol, .s-activity ul { margin: 1.2em 0 0 1.1em; }
.s-activity li { font-size: 1.24em; line-height: 1.5; margin-bottom: .6em; }
.s-activity .q-list { list-style: none; margin-left: 0; }
.s-activity .q-list li {
  padding-left: 1em; border-left: 2px solid var(--deeper);
  color: var(--deeper); font-weight: 500; margin-bottom: 1em;
}

.tl { list-style: none; margin: 0; }
.tl li {
  display: flex; gap: .9em; align-items: baseline;
  font-size: 1.05em; margin-bottom: .45em;
  padding-bottom: .45em; border-bottom: 1px solid var(--rule);
}
.tl .yr { flex: none; width: 3.4em; color: var(--deeper); font-weight: 600; font-variant-numeric: tabular-nums; }

.timer {
  margin-top: 1.6em; display: flex; align-items: center; gap: 1em;
}
.timer .clock {
  font-family: var(--serif); font-size: 4.2em; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--ink);
}
.timer.running .clock { color: var(--cream); text-shadow: 0 1px 0 rgba(23,19,18,.25); }
.timer.done .clock { color: var(--deeper); }
.timer button {
  font: inherit; font-size: .95em;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: .35em;
  padding: .5em .95em; cursor: pointer;
}
.timer button:hover { background: var(--cream); border-color: var(--cream); }

/* ---------- Quiz ---------- */
.s-quiz .qnum {
  font-size: .9em; letter-spacing: .2em; text-transform: uppercase;
  color: var(--deeper); font-weight: 700; margin-bottom: 1em;
}
.s-quiz .qtext {
  font-family: var(--serif); font-size: 2.1em; line-height: 1.25;
  max-width: 22em; margin-bottom: 1.3em;
}
.s-quiz .opts { list-style: none; max-width: 46em; }
.s-quiz .opts li {
  display: flex; gap: .9em; align-items: baseline;
  font-size: 1.18em; line-height: 1.45;
  padding: .7em .9em; margin-bottom: .45em;
  border: 1px solid var(--rule); border-radius: .4em;
  transition: opacity .4s ease, border-color .4s ease, background .4s ease;
}
.s-quiz .opts .k { flex: none; color: var(--deeper); font-weight: 700; }
.s-quiz.revealed .opts li { opacity: .35; }
.s-quiz.revealed .opts li.right {
  opacity: 1;
  background: var(--cream);
  border-color: var(--deeper);
  box-shadow: 0 .5em 1.5em rgba(23,19,18,.2);
}
.s-quiz.revealed .opts li.right .k { color: var(--deep); }
.s-quiz.revealed .opts li.right .chip { border-bottom-color: var(--deep); }
.s-quiz.revealed .opts li.right .chip::after { color: var(--deep); }
.s-quiz .why {
  margin-top: 1.3em; font-size: 1.2em; line-height: 1.5;
  color: var(--deeper); font-weight: 500; max-width: 34em;
  opacity: 0; transition: opacity .4s ease .15s;
}
.s-quiz.revealed .why { opacity: 1; }
.s-quiz .reveal-hint {
  margin-top: 1.4em; font-size: .9em; color: var(--deeper);
}
.s-quiz.revealed .reveal-hint { visibility: hidden; }

/* ---------- End / key terms ---------- */
.s-end .termgrid {
  display: flex; flex-wrap: wrap; gap: .7em; margin-top: 1.8em; max-width: 44em;
}

/* ---------- Word chips ---------- */
.chip {
  display: inline-block;
  border-bottom: 2px dotted var(--deeper);
  cursor: pointer;
  color: inherit;
  padding: 0 .05em;
  transition: background .18s ease;
}
.chip:hover { background: rgba(28,74,47,.16); }
.chip::after {
  content: '中';
  font-size: .58em; vertical-align: super;
  color: var(--deeper); margin-left: .12em;
  letter-spacing: 0;
}
.s-end .chip {
  font-size: 1.5em; background: var(--cream);
  border: 1px solid transparent;
  border-bottom: 2px dotted var(--deep);
  border-radius: .4em; padding: .45em .8em;
}

/* Chip popover */
#chipcard {
  position: fixed; z-index: 60;
  max-width: 26em; padding: 1.2em 1.4em;
  background: var(--cream); color: var(--ink);
  border-radius: .6em;
  box-shadow: 0 1.2em 3.5em rgba(23,19,18,.45);
  display: none;
}
#chipcard.on { display: block; }
#chipcard .term {
  font-family: var(--serif); font-size: 1.9em; line-height: 1.1;
}
#chipcard .term-zh {
  font-size: 1.5em; color: var(--deep);
  margin: .15em 0 .7em; letter-spacing: .08em; font-weight: 600;
}
#chipcard .def { font-size: 1.05em; line-height: 1.5; }
#chipcard .def-zh {
  font-size: 1em; line-height: 1.6; color: #4a5a4f;
  margin-top: .6em; padding-top: .6em; border-top: 1px solid rgba(23,19,18,.15);
}

/* ---------- Lightbox (zoom) ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,44,30,.97);
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out;
}
#lightbox.on { display: flex; }
#lightbox img { max-width: 94vw; max-height: 94vh; object-fit: contain; }
#lightbox.soft img { max-width: 55vw; max-height: 70vh; }
#lightbox .lb-note {
  position: absolute; bottom: 3vh; left: 0; right: 0;
  text-align: center; color: rgba(247,240,223,.6); font-size: .9em;
}

/* ---------- Chrome: progress, nav, menu ---------- */
#progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--cream); z-index: 50;
  transition: width .28s ease;
}
#hud {
  position: fixed; bottom: 1.6vh; right: 2vw; z-index: 50;
  display: flex; align-items: center; gap: 1.1em;
  font-size: 13px; color: var(--deeper);
  opacity: .45; transition: opacity .2s ease;
}
#hud:hover { opacity: 1; }
#hud button {
  font: inherit; background: none; border: none; cursor: pointer;
  color: inherit; padding: .2em .3em;
}
#hud button:hover { color: var(--ink); }
#hud .count { font-variant-numeric: tabular-nums; }

#menu {
  position: fixed; inset: 0; z-index: 70;
  background: #2b6b45;
  color: var(--cream);
  display: none; flex-direction: column;
  padding: 6vh 8vw; overflow-y: auto;
}
#menu.on { display: flex; }
#menu h2 { margin-bottom: 1.2em; color: var(--cream); }
#menu .sec { margin-bottom: 2em; }
#menu .sec-head {
  font-size: 1.35em; color: var(--bg); margin-bottom: .1em; font-weight: 600;
}
#menu .sec-zh { font-size: .9em; color: rgba(247,240,223,.5); margin-bottom: .8em; letter-spacing: .14em; }
#menu .items { display: flex; flex-wrap: wrap; gap: .45em; }
#menu .items button {
  font: inherit; font-size: .95em;
  background: rgba(247,240,223,.1); color: rgba(247,240,223,.8);
  border: 1px solid transparent; border-radius: .35em;
  padding: .5em .8em; cursor: pointer; text-align: left;
  max-width: 22em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#menu .items button:hover { color: var(--cream); background: rgba(247,240,223,.22); }
#menu .items button.here { border-color: var(--bg); color: var(--cream); }
#menu .hint { margin-top: auto; padding-top: 2em; color: rgba(247,240,223,.55); font-size: .95em; }

/* ---------- Notes peek (on the presenting screen) ---------- */
#peek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  max-height: 45vh; overflow-y: auto;
  background: var(--cream);
  border-top: 3px solid var(--deeper);
  padding: 1.6em 3vw 2em;
  display: none;
  box-shadow: 0 -1em 3em rgba(23,19,18,.3);
}
#peek.on { display: block; }
#peek .peek-label {
  font-size: .78em; letter-spacing: .18em; text-transform: uppercase;
  color: var(--deep); font-weight: 700; margin-bottom: .8em;
}
#peek p { font-size: 1.05em; line-height: 1.55; margin-bottom: .6em; max-width: 52em; color: var(--ink); }
#peek p.teach { color: var(--deep); font-weight: 500; }
#peek .chip { border-bottom-color: var(--deep); }
#peek .chip::after { color: var(--deep); }

/* ---------- Presenter window ---------- */
body.presenter #hud,
body.presenter #progress,
body.presenter #stage { display: none; }
body.presenter {
  overflow: auto;
  background: var(--cream);
  color: var(--ink);
  padding: 2.5vh 3vw;
}
.pv { max-width: 60em; margin: 0 auto; font-size: 16px; }
.pv .pv-top {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--bg); padding-bottom: .8em; margin-bottom: 1.4em;
}
.pv .pv-top .where { font-size: 1.5em; font-family: var(--serif); }
.pv .pv-top .clock { color: var(--deep); font-variant-numeric: tabular-nums; }
.pv h3 { font-size: 1.15em; color: var(--deep); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: .8em; }
.pv .notes p {
  font-size: 1.32em; line-height: 1.6; margin-bottom: .85em;
}
.pv .notes p.teach {
  color: var(--deep); font-size: 1.1em;
  border-left: 3px solid var(--bg); padding-left: .8em;
}
.pv .notes p.ask {
  color: #8a4b16; font-weight: 600;
}
.pv .next {
  margin-top: 2.5em; padding-top: 1.2em;
  border-top: 1px solid rgba(23,19,18,.18); color: var(--deep);
}
.pv .next .n-title { font-size: 1.3em; color: var(--ink); font-family: var(--serif); }
.pv .pv-nav { margin-top: 2em; display: flex; gap: .6em; }
.pv .pv-nav button {
  font: inherit; font-size: 1em; background: var(--bg); color: var(--ink);
  border: none; border-radius: .35em; padding: .6em 1.1em; cursor: pointer;
}
.pv .pv-nav button:hover { background: var(--deep); color: var(--cream); }
.pv .chip { border-bottom-color: var(--deep); }
.pv .chip::after { color: var(--deep); }

/* ---------- Smaller screens / preview ---------- */
@media (max-width: 900px) {
  .s-artwork { flex-direction: column; gap: 2vh; }
  .s-artwork .art { height: 44vh; }
  .s-artwork .side { max-width: none; }
  .s-twocol .cols, .s-activity { flex-direction: column; gap: 2vh; }
  .compare-wrap { flex-direction: column; }
  .compare-pane { height: 32vh; }
}

@media print { #hud, #menu, #peek, #progress { display: none !important; } }