/* 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:not(.ap-term-text) {
  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; }
/* Typst's code highlighting only: the cast player's terminal is a <pre> of coloured spans too */
@media (prefers-color-scheme: dark) { .content pre:not(.ap-term-text) 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; }
/* a builtin or tag word: a chip to click, on the tag's ground over a rule
   (Look and Exec in acme's look green and exec red) */
:root { --look:#7fd07f; --exec:#ff8a7a; }
@media (prefers-color-scheme: light) { :root { --look:#006600; --exec:#aa0000; } }
.content code.word { font-size:.82em; color:var(--ink); background:var(--tag); padding:.05em .3em; border-radius:2px; border-bottom:2px solid var(--leaf); white-space:nowrap; }
.content code.word.look { border-bottom-color:var(--look); }
.content code.word.exec { border-bottom-color:var(--exec); }
.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%, 340px), 1fr)); gap:18px; margin:1em 0 1.4em; }
.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:960/700; 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; }
.clip.hero { margin:0 0 1.4em; 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; }
.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; }
}
/* a shell line wraps on a phone rather than hide its end */
@media (max-width:600px) { .cmd pre { white-space:pre-wrap; overflow-wrap:anywhere; } }

/* terminal recordings: the first across the page, the rest two by two */
/* one per row at the page's full width: a terminal at half width is unreadable */
.casts { display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; margin:1em 0 1.4em; }
.cast .player { background:#121314; }
.cast figcaption strong { color:var(--leaf); }
.content h2.shelf { font-size:26px; margin:1.2em 0 .4em; }

/* the Themes page gallery: thumbnails that open the full picture */
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap:12px; margin:1em 0 1.6em; }
.shot { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:4px 4px 0 var(--shadow); }
.shot img { display:block; width:100%; height:auto; aspect-ratio:960/700; object-fit:cover; }
.shot figcaption { padding:3px 8px; font:16px var(--pixel); color:var(--dim); border-top:2px solid var(--leaf); }
.shot.light figcaption::after { content:" · light"; color:var(--amber); }
.shot .pending { aspect-ratio:960/700; display:flex; align-items:center; justify-content:center; font:15px var(--pixel); color:var(--dim); }

/* a builtin's chip that links to its glossary entry */
.content a:has(> code.word) { text-decoration:none; }
.content a:hover > code.word { text-decoration:underline; text-underline-offset:3px; }
.credit { font-size:18px; color:var(--dim); margin:0 0 .3em; }
/* the glossary: each entry's name is a small heading over its line */
main[data-page="builtins"] .content h4 { font:600 18px var(--mono); color:var(--leaf); margin:1.1em 0 .1em; }
main[data-page="builtins"] .content h4 + p { margin-top:0; }
.content pre.tutor .btn, .content pre.tutor .chord { vertical-align:-.3em; }
.all-words { line-height:2.1; }

/* the virtual filesystem as a tree: names and connectors, descriptions
   in a quiet column; on a phone a description wraps under its name */
.content pre.fstree { font-size:15px; line-height:1.35; overflow-x:visible; }
.fstree .row { display:grid; grid-template-columns:var(--name) 1fr; align-items:baseline; }
.fstree .nl { display:none; }
.fstree .branch { color:var(--rule); }
.fstree .dir, .fstree .dir a { color:var(--leaf); font-weight:700; }
.fstree a { color:var(--amber); text-decoration:none; }
.fstree a:hover { text-decoration:underline; }
.fstree .desc { color:var(--dim); font-family:var(--hand); font-size:17px; white-space:normal; line-height:1.3; }
@media (max-width:600px) {
  .content pre.fstree { font-size:13px; }
  .fstree .row { display:block; }
  .fstree .name { display:block; }
  /* under the name: its prefix is --cols cells of the 13px mono font */
  .fstree .desc { display:block; padding-left:calc(var(--cols) * 7.8px); font-size:15px; margin-bottom:.15em; }
}

/* what's in it: a row of linked chips under the lead */
.inside { display:flex; flex-wrap:wrap; gap:8px 10px; margin:.2em 0 1.1em; padding:0; list-style:none; }
.inside a { display:inline-block; padding:2px 10px; font:17px var(--pixel); color:var(--leaf); background:var(--tag); border:2px solid var(--leaf); text-decoration:none; }
.inside a:hover { color:var(--amber); border-color:var(--amber); }

/* a screenshot with numbered pins, their labels listed beside it */
.annotated { margin:1.2em 0 1.6em; display:grid; grid-template-columns:minmax(0, 3fr) minmax(12em, 2fr); gap:14px 22px; align-items:center; }
.annotated .frame { position:relative; border:2px solid var(--leaf); box-shadow:5px 5px 0 var(--shadow); }
.annotated img { display:block; width:100%; height:auto; }
.annotated .pin { position:absolute; transform:translate(-50%, -50%); width:1.5em; height:1.5em; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:700 14px var(--mono); background:var(--amber); color:#1b120a; box-shadow:0 0 0 2px var(--panel); }
.annotated .pins { margin:0; padding-left:1.8em; font-size:18px; }
.annotated .pins li { margin:.25em 0; }
.annotated .pins li::marker { font:700 15px var(--mono); color:var(--amber); }
@media (max-width:600px) { .annotated { grid-template-columns:minmax(0, 1fr); } }
.clip figcaption .more { font:15px var(--pixel); color:var(--leaf); margin-left:.3em; white-space:nowrap; }
.clip { scroll-margin-top:16px; }

/* a pane's box: blank normal, ^ insert, $ raw; filled while unsaved */
.mode-box { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; vertical-align:-.15em;
  font:700 .8em var(--mono); background:var(--tag); color:var(--ink); border:2px solid var(--leaf); border-radius:2px; }
.mode-box.unsaved { background:var(--amber); border-color:var(--amber); color:#1b120a; }
/* a recording inside a chapter */
.content .clip.inline { margin:1.2em 0; max-width:640px; }
.clip.inline video { display:block; width:100%; height:auto; background:var(--deep); }
.content .clip.inline.wide { max-width:none; }
.glossary dl { margin:.6em 0 0; display:grid; grid-template-columns:minmax(8em, max-content) 1fr; }
.glossary dt, .glossary dd { margin:0; padding:5px 9px; }
.glossary dt { font-weight:600; color:var(--leaf); }
.glossary dt:nth-of-type(odd), .glossary dt:nth-of-type(odd) + dd { background:color-mix(in srgb, var(--tag) 70%, transparent); }
@media (max-width:600px) { .glossary dl { grid-template-columns:1fr; } .glossary dd { padding-top:0; } }