/* SetRally — guide organisateur (SR-160).
   Same brand tokens as the landing (docs/brand-guide.md); single light theme,
   like the landing. Readability first: 66ch measure, 17px/1.65 body. */

:root{
  --paper:#F7F8FA; --paper-2:#EFF1EE; --ink:#12161C; --ink-soft:#4B5461;
  --hair:#E1DFD6; --gold:#C8912E; --gold-soft:#E8A33D; --court:#2F6B4F; --court-soft:#3F8563;
  /* Gold fails AA as text on paper (2.78:1); ink-gold (4.90:1) is the text accent. */
  --gold-ink:#8a6d1a;
  --bg:var(--paper); --fg:var(--ink); --fg-soft:var(--ink-soft);
  --line:var(--hair); --card:#ffffff;
  --radius:15px; --maxw:1200px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --plate:6px 6px 0 rgba(18,22,28,.08);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg);
  font-family:'Archivo',system-ui,sans-serif; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; letter-spacing:-.015em; margin:0; font-weight:500; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
.mono{ font-family:'Spline Sans Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 6vw; }
@media(min-width:1340px){ .wrap{ padding:0 70px; } }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

/* ---------- nav (landing's) ---------- */
nav.top{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
nav.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo{ font-family:'Fraunces',serif; font-weight:600; font-size:1.4rem; letter-spacing:-.02em; }
.logo .set{ color:var(--fg); } .logo .rally{ color:var(--gold); }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a.link{ color:var(--fg-soft); font-size:.9rem; font-weight:500; transition:color .15s; }
.nav-links a.link:hover, .nav-links a.link[aria-current]{ color:var(--fg); }
.lang{ font-family:'Spline Sans Mono',monospace; font-size:.72rem; letter-spacing:.05em;
  border:1px solid var(--line); border-radius:7px; padding:5px 8px; color:var(--fg-soft); }
.btn{ font-family:'Archivo',sans-serif; font-weight:600; font-size:.88rem; border-radius:10px;
  padding:11px 20px; cursor:pointer; border:1px solid transparent; display:inline-flex;
  align-items:center; gap:8px; white-space:nowrap;
  transition:transform .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out); }
.btn-dark{ background:var(--fg); color:var(--bg); }
.btn-dark:hover{ transform:translateY(-1px); }
@media(max-width:760px){ .hide-sm{ display:none; } }

/* ---------- guide home ---------- */
.ghero{ padding:9vh 0 5vh; border-bottom:1px solid var(--line); }
.ghero .inner{ max-width:720px; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:'Spline Sans Mono',monospace;
  font-size:.71rem; letter-spacing:.16em; text-transform:uppercase; color:var(--court); margin-bottom:22px; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--court-soft); position:relative; }
.eyebrow .dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--court-soft); animation:ring 2s ease-out infinite; }
@keyframes ring{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.6);opacity:0} }
.ghero h1{ font-size:clamp(2rem,3.2vw,2.9rem); line-height:1.06; letter-spacing:-.03em; text-wrap:balance; }
.ghero .sub{ margin:20px 0 0; max-width:52ch; color:var(--fg-soft); font-size:1.08rem; }

/* search — the one prominent control */
.gsearch{ position:relative; margin-top:34px; max-width:560px; }
.gsearch input{ width:100%; font:inherit; font-size:1rem; color:var(--fg);
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:15px 18px 15px 48px; box-shadow:var(--plate); }
.gsearch input::placeholder{ color:var(--fg-soft); }
.gsearch input:focus{ outline:2px solid var(--ink); outline-offset:2px; }
.gsearch > svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--fg-soft); pointer-events:none; }
.gsearch .hits{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--plate); max-height:min(52vh,430px); overflow-y:auto; padding:6px; }
.gsearch .hits[hidden]{ display:none; }
.gsearch .hits a{ display:block; padding:10px 12px; border-radius:9px; }
.gsearch .hits a:hover, .gsearch .hits a.sel{ background:var(--paper-2); }
.gsearch .hits .h-where{ font-family:'Spline Sans Mono',monospace; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); }
.gsearch .hits .h-title{ font-weight:600; font-size:.95rem; margin-top:2px; }
.gsearch .hits .h-line{ color:var(--fg-soft); font-size:.85rem; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gsearch .none{ padding:14px 12px; color:var(--fg-soft); font-size:.9rem; }

/* chapter cards — numbered because the chapters ARE the order of the work */
.chapters{ padding:5vh 0 9vh; }
.chapters .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.chap{ display:flex; flex-direction:column; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 24px;
  transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.chap:hover{ transform:translateY(-2px); box-shadow:var(--plate); }
.chap .num{ font-family:'Spline Sans Mono',monospace; font-size:.72rem; letter-spacing:.14em;
  color:var(--gold-ink); }
.chap h2{ font-size:1.35rem; line-height:1.2; }
.chap p{ margin:0; color:var(--fg-soft); font-size:.94rem; }
.chap .go{ margin-top:auto; padding-top:8px; font-weight:600; font-size:.88rem; color:var(--gold-ink); }

/* ---------- chapter page layout ---------- */
.gpage{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; padding-top:48px; padding-bottom:80px; }
@media(max-width:900px){ .gpage{ grid-template-columns:minmax(0,1fr); gap:0; padding-top:20px; } .wrap{ padding:0 max(6vw,22px); } }

.gside{ position:sticky; top:94px; align-self:start; font-size:.9rem; }
.gside .gsearch{ margin:0 0 26px; max-width:none; }
.gside .gsearch input{ padding:10px 14px 10px 38px; font-size:.88rem; box-shadow:none; border-radius:9px; }
.gside .gsearch > svg{ left:12px; width:16px; height:16px; }
.gside .lbl{ font-family:'Spline Sans Mono',monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-soft); margin:0 0 10px; }
.gside ol{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:2px; }
.gside ol a{ display:block; padding:7px 10px; border-radius:8px; color:var(--fg-soft); }
.gside ol a:hover{ color:var(--fg); background:var(--paper-2); }
.gside ol a[aria-current]{ color:var(--fg); font-weight:600; background:var(--paper-2); }
.gside .toc a{ border-left:2px solid var(--line); border-radius:0 8px 8px 0; padding-left:12px; }
.gside .toc a:hover{ border-left-color:var(--gold); }
@media(max-width:900px){
  .gside{ position:static; margin-bottom:34px; }
  .gside details{ border:1px solid var(--line); border-radius:12px; background:var(--card); padding:0 16px; }
  .gside details summary{ cursor:pointer; padding:13px 0; font-weight:600; font-size:.92rem; list-style:none; }
  .gside details summary::-webkit-details-marker{ display:none; }
  .gside details summary::after{ content:"＋"; float:right; color:var(--fg-soft); }
  .gside details[open] summary::after{ content:"－"; }
  .gside details > *:last-child{ margin-bottom:16px; }
}
@media(min-width:901px){ .gside details{ display:contents; } .gside details summary{ display:none; } }

/* article */
.gart{ max-width:66ch; }
.gart .eyebrow{ margin-bottom:16px; }
.gart h1{ font-size:clamp(1.8rem,2.6vw,2.4rem); line-height:1.1; letter-spacing:-.025em; text-wrap:balance; }
.gart .lede{ margin:18px 0 0; color:var(--fg-soft); font-size:1.06rem; }
.gart h2{ font-size:1.45rem; margin:56px 0 0; padding-top:30px; border-top:1px solid var(--line); }
.gart h3{ font-size:1.12rem; margin:38px 0 0; font-weight:600; }
.gart p{ margin:22px 0 0; }
.gart ul, .gart ol.plain{ margin:22px 0 0; padding-left:22px; }
.gart li{ margin-top:12px; }
.gart li::marker{ color:var(--gold-ink); }
.gart strong{ font-weight:600; }
.gart em{ font-style:italic; color:var(--gold-ink); }
.gart a.in{ color:var(--gold-ink); font-weight:500; border-bottom:1px solid color-mix(in srgb, var(--gold-ink) 40%, transparent); }
.gart a.in:hover{ border-bottom-color:var(--gold-ink); }
.gart .ui{ font-family:'Archivo',sans-serif; font-weight:600; font-size:.92em;
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:1px 7px 2px; white-space:nowrap; }
.gart code, .gart .path{ font-family:'Spline Sans Mono',monospace; font-size:.86em;
  background:var(--paper-2); border-radius:6px; padding:1px 6px 2px; }

/* numbered steps — a real sequence, so the number is information */
.steps{ list-style:none; counter-reset:st; margin:22px 0 0; padding:0; }
.steps > li{ counter-increment:st; position:relative; padding:0 0 26px 52px; margin:0; }
.steps > li::before{ content:counter(st); position:absolute; left:0; top:-2px;
  width:32px; height:32px; display:grid; place-items:center;
  font-family:'Spline Sans Mono',monospace; font-size:.82rem; color:var(--gold-ink);
  background:var(--card); border:1px solid var(--gold); border-radius:50%; }
.steps > li:not(:last-child)::after{ content:""; position:absolute; left:15.5px; top:34px; bottom:2px;
  width:1px; background:var(--line); }
.steps > li p:first-child{ margin-top:0; }

/* callouts */
.note, .warn{ margin:22px 0 0; padding:16px 20px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); font-size:.95rem; }
.note{ border-left:3px solid var(--court-soft); }
.warn{ border-left:3px solid var(--gold); }
.note .t, .warn .t{ display:block; font-family:'Spline Sans Mono',monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.note .t{ color:var(--court); } .warn .t{ color:var(--gold-ink); }
.note p, .warn p{ margin:8px 0 0; }

/* screenshots — real captures, hairline + the print-registration shadow */
.shot{ margin:26px 0 0; }
.shot .frame{ border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card); box-shadow:var(--plate); }
.shot figcaption{ margin-top:10px; font-family:'Spline Sans Mono',monospace;
  font-size:.72rem; letter-spacing:.04em; color:var(--fg-soft); }
/* phone-portrait captures: keep them phone-sized, not column-wide */
.shot.phone .frame{ max-width:330px; }
.shot.phone figcaption{ max-width:330px; }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq-item summary{ cursor:pointer; list-style:none; padding:16px 30px 16px 0; position:relative;
  font-family:'Fraunces',Georgia,serif; font-size:1.12rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"＋"; position:absolute; right:4px; top:16px; color:var(--fg-soft); }
.faq-item[open] summary::after{ content:"－"; }
.faq-item .a{ padding:0 0 18px; max-width:62ch; }
.faq-item .a p{ margin:14px 0 0; }

/* pager */
.pager{ display:flex; justify-content:space-between; gap:16px; margin-top:64px;
  padding-top:26px; border-top:1px solid var(--line); }
.pager a{ display:flex; flex-direction:column; gap:4px; max-width:46%; }
.pager a.nx{ text-align:right; margin-left:auto; }
.pager .k{ font-family:'Spline Sans Mono',monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-soft); }
.pager .v{ font-family:'Fraunces',Georgia,serif; font-size:1.08rem; color:var(--fg); }
.pager a:hover .v{ color:var(--gold-ink); }

/* footer (landing's) */
footer{ border-top:1px solid var(--line); background:var(--paper-2); padding:44px 0 40px; margin-top:40px; }
footer .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; justify-content:space-between; }
footer .fl{ display:flex; flex-wrap:wrap; gap:20px; font-size:.88rem; color:var(--fg-soft); }
footer .fl a:hover{ color:var(--fg); }
footer .cp{ display:inline-flex; align-items:center; gap:8px; font-family:'Spline Sans Mono',monospace;
  font-size:.72rem; color:var(--fg-soft); }
footer .cp svg{ width:14px; height:14px; color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn, .chap{ transition:none !important; transform:none !important; }
}