/* Come Early, Stay Late · styles only this page uses, loaded after /shared/deep-dive.css. The page
   isn't a deep dive (no section list, no narration, no shared script), so its header has no Contents
   menu, and the questions are plain <details> that open and close without any script. */

/* header: no Contents button, so the Kitchen Table link shows on every width */
.q-page .home-link{display:none}
@media (min-width:600px){.q-page .home-link{display:flex}}

/* opening: the short version, then the quote and the introduction. Phones read the short version
   first (the shared .panel rule orders it last); from 900px the quote and introduction sit on the
   left and the short version beside them on the right. */
.q-open{display:grid;gap:28px;padding-block:28px 40px}
.q-open .panel{gap:16px}
@media (min-width:900px){
  .q-open{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:start;padding-block:44px 56px}
  .q-open .panel{grid-column:1;grid-row:1}
  .q-open .short{grid-column:2;grid-row:1}
}

/* the short version: five lines on the night card, numbered in the mono face */
.short{background:var(--night);color:var(--night-ink);border:1px solid var(--night-edge);border-radius:12px;padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.short .label{color:var(--night-2)}
.short ol{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.short li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:18px;line-height:1.5}
.short li::before{content:counter(s);font:700 15px/1.75 var(--mono);color:var(--gold)}
.short a{color:var(--gold)}
.short a:hover{color:var(--night-ink)}
.short :focus-visible{outline-color:var(--night-ink)}
@media (min-width:900px){.short{padding:26px 28px 28px}}

/* jump links to the groups, and the open-all button */
.q-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:0 32px}
.q-jump .label{width:100%;margin-bottom:4px}
.q-jump a,.q-jump button{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 14px var(--sans);text-decoration:none;cursor:pointer}
.q-jump a:hover,.q-jump button:hover{border-color:var(--accent);color:var(--accent)}
.q-jump button{background:transparent;color:var(--ink-2)}
@media (min-width:900px){.q-jump .label{width:auto;margin:0 8px 0 0}}

/* the groups of questions: heading above on phones, beside from 900px */
.q-groups{padding-block:12px 24px}
.q-group{display:grid;gap:8px;padding-block:28px 32px;border-top:1px solid var(--line-2)}
.q-group:first-child{border-top:0}
.q-group h2{margin:0;font:400 clamp(30px,3.6vw,42px)/1.08 var(--display)}
.q-group .g-note{margin-top:8px;font:400 14px/1.5 var(--sans);color:var(--ink-2);max-width:34ch}
@media (min-width:900px){
  .q-groups{padding-block:28px 40px}
  .q-group{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;align-items:start;padding-block:44px 48px}
}

/* a question and its answer */
.qs{border-top:1px solid var(--line)}
.qs details{border-bottom:1px solid var(--line)}
.qs summary{min-height:60px;padding-block:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:20px;line-height:1.35;cursor:pointer;list-style:none}
.qs summary::-webkit-details-marker{display:none}
.qs summary:hover{color:var(--accent)}
.qs .chev{flex-shrink:0;color:var(--ink-2);transition:transform .2s ease}
.qs details[open] .chev{transform:rotate(180deg)}
.qs .ans{padding:2px 0 26px;display:flex;flex-direction:column;gap:12px;max-width:64ch}
.qs .ans p{font-size:18px}
.qs .ans .cite{font-size:13px}
.qs .hist{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font:600 14px/1.4 var(--sans);color:var(--ink-2)}
.qs .hist a{display:inline-flex;align-items:center;gap:6px;min-height:32px;text-decoration:none}
.qs .hist a:hover{text-decoration:underline}
@media (min-width:900px){.qs summary{font-size:22px}}
@media (prefers-reduced-motion:reduce){.qs .chev{transition:none}}

/* kinds of meetings, inside their answer */
.kinds{margin:0;display:flex;flex-direction:column;gap:12px}
.kinds dt{font:700 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.kinds dd{margin:2px 0 0;font-size:18px;line-height:1.55}

/* the history, sources and film notes at the end */
.q-end{padding-block:40px 24px;display:flex;flex-direction:column;gap:28px}
.q-end .film-note{margin-top:0}
.q-sources .src-list{padding:12px 0 0 18px}
@media (min-width:900px){.q-sources .src-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:8px}}