/* pardes docs site. The 0x4200.cafe lapis layout (framed panels, hard
   shadows, a tag-line trail, pixel headings over a book hand) in pardes's
   orchard greens; light mode follows forestbones_light. Fonts are OFL and
   shipped in fonts/. */

@font-face { font-family:"Crimson Pro"; src:url("fonts/CrimsonPro-VF-normal.woff2") format("woff2"); font-weight:200 900; font-display:swap; }
@font-face { font-family:"Crimson Pro"; src:url("fonts/CrimsonPro-VF-italic.woff2") format("woff2"); font-weight:200 900; font-style:italic; font-display:swap; }
@font-face { font-family:"Departure Mono"; src:url("fonts/DepartureMono-Regular.woff2") format("woff2"); font-display:swap; size-adjust:72%; }

/* orchard: field, panel, ink, leaf, amber, plum */
:root {
  --field:#0d1410; --deep:#070c09; --panel:#121c16; --tag:#1d2824; --tag-hi:#26362d;
  --ink:#e5eee5; --dim:#b2c3b8; --leaf:#add38a; --leaf-hi:#b9f480; --amber:#f4c086; --plum:#d3b0d9;
  --rule:#486152; --shadow:#000c; --stripe:#3c614a;
  --hand:"Crimson Pro", Georgia, serif; --pixel:"Departure Mono", ui-monospace, monospace;
  --mono:ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
/* forestbones_light: paper, butter tags, green ink */
@media (prefers-color-scheme: light) {
  :root {
    --field:#f3ead2; --deep:#e9dcb8; --panel:#faf3e1; --tag:#f3e2aa; --tag-hi:#e8d48e;
    --ink:#2f3b33; --dim:#56645b; --leaf:#3c6b56; --leaf-hi:#2c7a3e; --amber:#9a5810; --plum:#6e4774;
    --rule:#b1a26f; --shadow:#4f5b6233; --stripe:#cdd9b0;
  }
}

* { box-sizing:border-box; }
html { background:var(--deep); color:var(--ink); scrollbar-color:var(--leaf) var(--deep); }
body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color-mix(in srgb, var(--leaf) 14%, transparent) 1px, transparent 1.5px) 0 0/22px 22px; }
.shell { max-width:980px; margin:0 auto; padding:24px 16px 40px; display:grid; gap:26px; }

/* --- the trail: a pane's tag line ------------------------------------------- */
.trail {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:9px 14px;
  background:var(--tag); border:2px solid var(--leaf); box-shadow:5px 5px 0 var(--amber);
  font:20px/1.3 var(--pixel);
}
.trail .grip { width:.8em; height:.8em; background:var(--leaf); align-self:center; }
.trail a { color:var(--leaf); text-decoration:none; }
.trail a:hover, .trail a[aria-current] { color:var(--amber); }
.trail .home { color:var(--plum); }
.trail .sep { color:var(--amber); }
.trail .here { color:var(--dim); }
.trail .words { display:flex; flex-wrap:wrap; gap:4px 14px; margin-left:auto; font-size:17px; }

/* --- the folio --------------------------------------------------------------- */
.panel { min-width:0; padding:14px; background:repeating-linear-gradient(45deg, var(--stripe) 0 2px, var(--panel) 2px 7px); border:2px solid var(--leaf); box-shadow:6px 6px 0 var(--shadow); }
.content {
  background:var(--panel); padding:22px clamp(14px, 4vw, 40px) 30px;
  box-shadow:inset 0 0 0 2px var(--leaf), inset 0 0 0 5px var(--panel), inset 0 0 0 6px var(--amber);
  font:420 20px/1.55 var(--hand); overflow-wrap:break-word;
}
.content p, .content li { hyphens:auto; text-wrap:pretty; }
.content a { color:var(--amber); }
.content a:hover { color:var(--leaf-hi); }
.content strong { color:var(--leaf); font-weight:640; }
.content h2, .content h1 { font:clamp(30px, 5vw, 44px)/1.1 var(--pixel); color:var(--leaf); text-transform:uppercase; margin:.3em 0 .6em; text-shadow:3px 3px 0 var(--shadow); }
.content h3 { font:26px/1.2 var(--pixel); color:var(--amber); text-transform:uppercase; border-bottom:2px dotted var(--leaf); padding-bottom:4px; margin:1.6em 0 .6em; }
.content h3::before { content:"¶ "; color:var(--leaf); }
.content h4 { font:italic 600 23px/1.25 var(--hand); color:var(--leaf); margin:1.3em 0 .4em; }
.content h5 { font:600 20px var(--hand); color:var(--dim); margin:1em 0 .3em; }

/* code: a window on the machine, titled in stripes */
.content code, .content pre, .content kbd, .tag { font-family:var(--mono); }
.content code { font-size:.82em; overflow-wrap:break-word; hyphens:none; }
.content pre {
  font-size:15px; line-height:1.45; padding:12px 14px; margin:1em 0; overflow-x:auto;
  background:var(--deep); border:2px solid var(--leaf); border-top-width:8px; box-shadow:5px 5px 0 var(--shadow);
}
.content pre code { font-size:inherit; overflow-wrap:normal; }
@media (prefers-color-scheme: dark) { .content pre span { color:inherit !important; } }
.content pre.tutor { font-size:14px; }

/* tables: rows on alternating tints, a pardes #pairs */
.content table { width:100%; border-collapse:collapse; margin:1em 0; font-size:.92em; display:block; overflow-x:auto; }
.content tbody, .content thead { display:table; width:100%; }
.content td, .content th { padding:5px 9px; vertical-align:top; text-align:left; }
.content tr:nth-child(odd) td { background:color-mix(in srgb, var(--tag) 70%, transparent); }
.content th { font:17px var(--pixel); color:var(--leaf); }

/* --- the semantic elements (docs/typ/style.typ) ------------------------------ */
.key { display:inline-block; padding:0 .3em; border-radius:4px; background:color-mix(in srgb, var(--leaf) 20%, transparent); color:var(--ink); font-size:.82em; white-space:nowrap; line-height:1.4; }
.key .plus, .key .then { color:var(--leaf); opacity:.8; padding:0 .12em; }
.word { background:var(--tag); padding:0 .25em; color:var(--dim); }
.word code { font-size:.82em; color:var(--ink); }
.addr code { color:var(--plum); }
.file code { color:var(--leaf); }
.btn, .chord { display:inline-flex; align-items:center; gap:2px; vertical-align:-.38em; margin-block:-.3em; }
.mouse { width:1.15em; height:1.55em; }
.mouse .off { fill:none; stroke:var(--dim); stroke-width:8; }
.mouse .on { fill:var(--amber); stroke:var(--amber); stroke-width:8; }
.mouse .halo { fill:var(--panel); }
.mouse .wheel.off { fill:var(--panel); stroke-width:5; }
.mouse .wheel.on { stroke-width:5; }
.btn .shift { font-size:.9em; color:var(--amber); }
.chord .then { font-size:.9em; color:var(--dim); }
.tag { margin:.6em 0; padding:4px 8px; background:var(--tag); color:var(--dim); font-size:15px; line-height:1.5; }
.tag .grip { display:inline-block; width:.8em; height:.8em; background:var(--leaf); margin-right:.5em; vertical-align:-.05em; }
.tag .path { color:var(--plum); }
.tag code { font-size:inherit; }

/* --- contents, landing, footer ---------------------------------------------- */
.toc { margin:0 0 1.6em; border:2px solid var(--leaf); background:var(--deep); box-shadow:5px 5px 0 var(--amber); }
.toc-bar { padding:2px 10px; font:17px var(--pixel); color:var(--leaf); background:repeating-linear-gradient(0deg, var(--leaf) 0 2px, var(--tag) 2px 4px); }
.toc-bar span { background:var(--tag); padding:0 8px; }
.toc-bar, .toc ol { margin:0; }
.toc ol { padding:8px 14px 10px 2.4em; columns:2 14em; font-size:18px; }
.masthead { font:clamp(56px, 12vw, 104px)/1 var(--pixel) !important; text-shadow:5px 5px 0 var(--amber) !important; margin:.1em 0 .1em !important; }
.pitch { font-style:italic; font-size:22px; color:var(--dim); margin-top:0; }
.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:22px; margin:1.4em 0; }
.clip { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:5px 5px 0 var(--shadow); }
.clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:16/10; background:var(--deep); }
.clip figcaption { padding:8px 12px; font-size:18px; color:var(--dim); border-top:2px solid var(--leaf); }
.lead { font-size:23px; line-height:1.5; hyphens:manual; margin:.2em 0 .5em; }
.pitch { font-style:italic; font-size:19px; hyphens:manual; color:var(--dim); margin:0 0 .3em; }
.runs { font-size:18px; color:var(--dim); margin:0 0 1.2em; }
.hero { display:block; width:100%; height:auto; margin:0 0 1.4em; border:2px solid var(--leaf); box-shadow:6px 6px 0 var(--shadow); }
.start { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 .8em; }
.start .go { display:inline-block; padding:8px 16px; font:20px var(--pixel); text-decoration:none; color:var(--leaf); background:var(--tag); border:2px solid var(--leaf); box-shadow:4px 4px 0 var(--amber); }
.start .go:first-child { font-size:24px; color:var(--panel); background:var(--leaf); }
.start .go span { font-size:.75em; opacity:.85; }
.start .go:hover { color:var(--amber); }
.rest { display:flex; flex-wrap:wrap; gap:4px 16px; font:17px var(--pixel); margin:0 0 1.2em; }
.rest a { color:var(--leaf); }
.content h2.install { font-size:30px; }
.glossary { margin:1.4em 0; }
.glossary summary { cursor:pointer; list-style-position:inside; }
.glossary summary h3, .glossary summary p { display:inline; margin:0; }
.glossary summary .count { font:20px var(--pixel); color:var(--dim); margin-left:.4em; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.colophon { font:15px var(--pixel); color:var(--dim); text-align:center; }
.colophon a { color:var(--leaf); }
.colophon code { font:inherit; }

@media (max-width:600px) {
  .shell { padding:14px 10px 30px; gap:18px; }
  .trail { font-size:17px; padding:8px 10px; }
  .trail .words { margin-left:0; font-size:15px; }
  .panel { padding:7px; }
  .content { font-size:18px; }
  .content pre { font-size:13px; }
}