/* Shared styles for the workshop site (landing.html, questionnaire.html, ...). */
:root {
  --paper:#f7f4ee; --ink:#16181d; --muted:#6b6a66; --body:#3a3c42;
  --accent:#b03a1a; --gold:#c98a12; --line:#d8d3c7; --card:#fffdf9;
  --ok:#2f6b3a; --err:#b3261e;
  --display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#14161b; --ink:#f2efe8; --muted:#9a9790; --body:#c9c6bd;
    --accent:#ef7a4e; --gold:#e8b04b; --line:#2c303a; --card:#1b1e25;
    --ok:#8fcf9a; --err:#f2a49c;
  }
}
:root[data-theme="dark"] {
  --paper:#14161b; --ink:#f2efe8; --muted:#9a9790; --body:#c9c6bd;
  --accent:#ef7a4e; --gold:#e8b04b; --line:#2c303a; --card:#1b1e25;
  --ok:#8fcf9a; --err:#f2a49c;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); -webkit-font-smoothing:antialiased; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; background:var(--ink); color:var(--paper); padding:10px 14px; z-index:10; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
a { color:var(--accent); }
a:hover { text-decoration:none; }

header.top { padding:28px 0 0; }
.brandrow { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:baseline; }
.jp { font-weight:700; font-size:19px; letter-spacing:.12em; color:var(--accent); }
.jp a { color:inherit; text-decoration:none; }
.kicker { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

h1 { font-size:clamp(44px,9vw,88px); line-height:.94; letter-spacing:-.03em; font-weight:800; margin:28px 0 0; text-wrap:balance; }
.lede { font-size:clamp(18px,2.4vw,22px); line-height:1.45; color:var(--body); max-width:60ch; margin:22px 0 0; text-wrap:pretty; }

.cta { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; }
.btn { display:inline-block; padding:14px 22px; border-radius:2px; font-size:17px; font-weight:700; text-decoration:none; border:2px solid var(--ink); font-family:inherit; cursor:pointer; }
.btn-primary { background:var(--ink); color:var(--paper); }
.btn-primary:hover { background:transparent; color:var(--ink); }
.btn-ghost { color:var(--ink); background:transparent; }
.btn-ghost:hover { background:var(--ink); color:var(--paper); }

.undercta { font-size:15px; line-height:1.5; color:var(--muted); margin:14px 0 0; max-width:60ch; }
.rule { height:3px; background:var(--ink); margin:48px 0 0; }

.doors { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin:36px 0 0; }
.door { background:var(--card); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:12px; }
.door h2 { font-size:23px; line-height:1.12; letter-spacing:-.015em; margin:0; font-weight:800; }
.door p { font-size:16px; line-height:1.5; color:var(--body); margin:0; text-wrap:pretty; }
.door .go { margin-top:auto; padding-top:10px; font-weight:700; }
svg.ico { stroke:var(--accent); }

section { margin:64px 0 0; }
h3 { font-size:clamp(26px,4vw,34px); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; font-weight:800; }
.prose p { font-size:17px; line-height:1.6; color:var(--body); max-width:68ch; margin:0 0 14px; text-wrap:pretty; }

.band { background:var(--ink); color:var(--paper); padding:38px 0; margin:64px 0 0; }
.band h3 { color:var(--paper); }
.band .inner { display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.band .txt { flex:1 1 380px; }
.band p { font-size:17px; line-height:1.5; margin:0 0 16px; max-width:60ch; color:#cdc9c0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band p { color:#3a3c42; } }
:root[data-theme="dark"] .band p { color:#3a3c42; }
.btn-gold { background:var(--gold); border-color:var(--gold); color:#16181d; }
.btn-gold:hover { background:transparent; color:var(--gold); }

footer { margin:56px 0 0; border-top:1px solid var(--line); padding:26px 0 60px; }
footer p { font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 10px; max-width:70ch; }

/* ---------- Signup form ---------- */
.form-wrap { max-width:760px; }
.form-head h1 { font-size:clamp(36px,7vw,60px); }
.qsec { background:var(--card); border:1px solid var(--line); padding:26px; margin:28px 0 0; }
.qsec[hidden] { display:none; }
.qsec { counter-reset:q; }
.qsec > .q:first-child { margin-top:0; }

.q { border:0; padding:0; margin:26px 0 0; min-width:0; }
.q > legend, .q > label.qlabel { display:block; font-size:18px; font-weight:700; line-height:1.35; padding:0; margin:0 0 4px; color:var(--ink); }
.q[hidden] { display:none; }
/* Numbered questions; hidden ones (display:none) are skipped by the counter. */
.q.num { counter-increment:q; }
.q.num > legend::before, .q.num > label.qlabel::before { content:counter(q) ". "; color:var(--accent); }
.q .help { font-size:15px; color:var(--muted); margin:0 0 12px; line-height:1.45; }
.req { color:var(--accent); font-weight:700; }

/* Grid questions: one row per statement, options as a segmented control. */
.grid-row { border:0; border-top:1px solid var(--line); padding:14px 0; margin:0; min-width:0; }
.grid-row:last-of-type { border-bottom:1px solid var(--line); }
.grid-row > legend { float:left; width:100%; font-size:16px; line-height:1.4; color:var(--body); padding:0; margin:0 0 10px; }
.grid-row > legend + * { clear:both; }
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg label { position:relative; flex:1 1 0; min-width:max-content; }
.seg input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg span { display:block; text-align:center; padding:9px 10px; border:1.5px solid var(--line); border-radius:2px; font-size:14px; line-height:1.2; color:var(--body); background:var(--paper); }
.seg input:hover + span { border-color:var(--ink); }
.seg input:checked + span { background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:700; }
.seg input:focus-visible + span { outline:3px solid var(--gold); outline-offset:2px; }
.grid-row.invalid > legend { color:var(--err); }

/* Choice lists (radio / checkbox). */
.choices { display:flex; flex-direction:column; gap:8px; }
.choice { display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.4; color:var(--body); cursor:pointer; }
.choice input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); flex:none; }
.choice input[type="text"] { width:auto; height:auto; }
.other-text { margin-left:32px; }

input[type="email"], input[type="text"], textarea {
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:2px; padding:11px 12px;
}
textarea { min-height:110px; resize:vertical; line-height:1.5; }
input:focus-visible, textarea:focus-visible { outline:3px solid var(--gold); outline-offset:1px; border-color:var(--ink); }

.err-msg { color:var(--err); font-size:14px; margin:8px 0 0; font-weight:600; }
.err-msg:empty { display:none; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.submit-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:28px 0 0; }
.submit-row .btn[disabled] { opacity:.55; cursor:progress; }
.form-status { font-size:15px; color:var(--muted); }
.thanks { background:var(--card); border:1px solid var(--line); border-left:6px solid var(--ok); padding:26px; margin:28px 0 0; }
.thanks h2 { margin:0 0 8px; font-size:26px; letter-spacing:-.015em; }
.thanks p { margin:0 0 10px; color:var(--body); font-size:17px; line-height:1.55; }

@media (max-width:560px) {
  .wrap { padding:0 16px; }
  .qsec { padding:20px 16px; }
  .seg label { flex:1 1 calc(50% - 6px); }
}

/* ---------- Outline page ---------- */
.outline-title { font-size:clamp(36px,7vw,60px); }

/* Timeline: static nodes on one line; vertical on narrow screens. */
.tl { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0 20px; position:relative; }
.tl::before { content:""; position:absolute; left:0; right:0; top:9px; height:2px; background:var(--line); pointer-events:none; }
.tl-item { position:relative; padding:34px 0 0; }
.tl-item::after { content:""; position:absolute; top:2px; left:0; width:16px; height:16px; border-radius:50%; background:var(--accent); pointer-events:none; }
.tl-date { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.tl-name { font-size:21px; line-height:1.15; letter-spacing:-.015em; font-weight:800; margin:6px 0 0; }
.tl-note { font-size:15px; line-height:1.5; color:var(--body); margin:8px 0 0; max-width:32ch; text-wrap:pretty; }

/* Workshop sessions */
.sessions { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.session { background:var(--card); border:1px solid var(--line); border-top:4px solid var(--accent); padding:24px 26px; }
.session-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; margin:0 0 14px; }
.session-num { font-size:23px; font-weight:800; letter-spacing:-.015em; }
.session-date { font-size:14px; color:var(--muted); }
.agenda { list-style:none; margin:0; padding:0; counter-reset:ag; }
.agenda li { counter-increment:ag; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; padding:11px 0; border-top:1px solid var(--line); font-size:17px; line-height:1.4; color:var(--body); }
.agenda li::before { content:counter(ag); color:var(--muted); font-size:14px; font-weight:700; min-width:1.2em; }
.agenda .activity { color:var(--ink); font-weight:700; }
.act-tag { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; }

@media (max-width:720px) {
  .tl { grid-template-columns:1fr; gap:0; padding-left:28px; }
  .tl::before { left:7px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .tl-item { padding:0 0 26px; }
  .tl-item::after { left:-28px; }
}

/* ---------- Prelim: dark only, light mode parked ----------
   Pages opt in with <html class="dark-only">, so landing.html keeps following the system setting.
   data-theme="light" still previews the parked light mode. */
:root.dark-only:not([data-theme="light"]) {
  --paper:#14161b; --ink:#f2efe8; --muted:#9a9790; --body:#c9c6bd;
  --accent:#ef7a4e; --gold:#e8b04b; --line:#2c303a; --card:#1b1e25;
  --ok:#8fcf9a; --err:#f2a49c;
  color-scheme:dark;
}