/* Self-hosted fonts (woff2 from the @fontsource npm packages, latin subset;
   licenses next to them in fonts/): Special Elite (Apache-2.0) is the
   typewriter display face for the title, stamp and node titles; IBM Plex
   Serif (OFL-1.1) is the body text; IBM Plex Mono (OFL-1.1) is code, tags,
   labels. Special Elite ships a single weight, so every use of it pins
   font-weight to 400 rather than letting the browser fake a bold. */
@font-face { font-family:"Special Elite"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/special-elite-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Serif"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Serif"; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-serif-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Serif"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ibm-plex-serif-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ibm-plex-mono-latin-700-normal.woff2) format("woff2"); }
:root {
  --accent-default:#aa4339; --ink:#2d2926; --paper-light:#fff8e8;
  --board:#352c27; --pin:#ba503e;
  --display:"Special Elite","Courier New",monospace;
  --serif:"IBM Plex Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#241f1b; font:15px/1.55 var(--serif); }
a { color:#8e392f; }
.archive-header { background:#e4d7bb; border-bottom:8px solid #1b1918; padding:.7rem clamp(1rem,4vw,4rem); display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1.4rem; box-shadow:0 6px 20px #0007; position:relative; z-index:3; }
.archive-header h1 { font:400 clamp(1.5rem,3vw,2.7rem)/1 var(--display); margin:0; }
.archive-footer { font:700 .69rem/1.5 var(--mono); letter-spacing:.17em; }
.stamp { font:400 .8rem/1.5 var(--display); letter-spacing:.17em; margin-left:auto; color:#9b3a31; border:2px solid currentColor; padding:.25rem .55rem; transform:rotate(-3deg); }
.board-wrap { overflow:auto; min-height:70vh; padding:clamp(1rem,3vw,3rem); background-color:var(--board); background-image:radial-gradient(#9d806646 1px,transparent 1px),radial-gradient(#130e0c50 1px,transparent 1px),linear-gradient(135deg,#44372f,#312822); background-size:5px 5px,7px 7px,auto; }
.tree { position:relative; min-width:100%; width:max-content; padding:1.5rem; }
/* One column of siblings at every depth. The sibling column is always to
   the right of its parent, so unfolding grows the subtree down and right. */
.node-row { display:flex; align-items:flex-start; gap:2.8rem; margin-bottom:1.5rem; }
.node-children { display:flex; flex-direction:column; gap:1.5rem; margin:0; flex-shrink:0; }
.node-children > .node-row:last-child { margin-bottom:0; }
.node-row.authored-item { position:absolute; margin:0; }
.node { --accent:var(--accent-default); display:block; position:relative; z-index:2; flex-shrink:0; width:clamp(280px,30vw,480px); max-width:100%; padding:1.2rem 1.35rem 1.4rem; background:var(--paper-light); border:1px solid #bbad93; box-shadow:2px 3px 0 #b6a280,7px 12px 18px #0008; transform:rotate(.35deg); overflow:visible; }
.node-row:nth-child(3n+2) > .node:not(.group-sheet) { transform:rotate(-.7deg); background:#f0e4cb; }
.node-row:nth-child(4n+3) > .node:not(.group-sheet) { transform:rotate(.8deg); }
.tree > .node-row > .node { width:500px; background:#ddcfac; transform:rotate(-.4deg); }
/* Scroll only the root's long prose. Its paper and pin remain unclipped. */
/* An opened paper lies flat: a rotated tall card drags its bounding box
   sideways over the sibling column, which is what the height caps used to
   guard against. Only a body far taller than the screen (layout.js marks it
   .long) is still capped, so it cannot push its siblings thousands of px away. */
.tree .node-row > .node[open]:not(.group-sheet) { transform:none; }
.node[open] > .node-body.long { max-height:75vh; overflow:auto; overscroll-behavior:contain; box-shadow:inset 0 -14px 12px -12px #0006; }
.node::before { content:""; position:absolute; left:calc(50% - 7px); top:-8px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f8bd9a,var(--pin) 55%,#642d28 85%); box-shadow:1px 3px 3px #0007; z-index:2; }
.node::after { content:""; position:absolute; top:4px; left:calc(50% + 2px); width:9px; height:10px; background:#0003; border-radius:50%; filter:blur(3px); }
.node-row.authored-item > .node { max-width:none; overflow:visible; }
.node-row.authored-item > .node > .node-body,
.group-canvas > .node-row.spatial-item > .node > .node-body { overflow:auto; }
.node-title { display:block; border-bottom:2px solid color-mix(in srgb,var(--accent) 60%,#b7a68c); padding-bottom:.55rem; margin-bottom:.8rem; font:400 1.15rem/1.35 var(--display); overflow-wrap:anywhere; }
summary.node-title { cursor:pointer; list-style:none; }
summary.node-title::before { content:"▾ "; color:var(--accent); font-size:1.25em; line-height:1; }
.node:not([open]) > summary.node-title::before { content:"▸ "; }
details.node:not([open]):not(.group-sheet) { padding-bottom:.9rem; }
details.node:not([open]) > summary.node-title { margin-bottom:0; }
/* The paper itself is the tap target while collapsed; once open it must not
   cover the prose and links below the title. */
details.node:not([open]) > summary.node-title::after { content:""; position:absolute; inset:0; }
summary.node-title:focus-visible { outline:none; }
.node:has(> summary.node-title:focus-visible) { outline:3px solid #1b66c9; outline-offset:3px; }
.node-row > .node:not([open]) ~ .node-children { display:none; }
.node-tags { display:flex; gap:.35rem; flex-wrap:wrap; margin:.5rem 0; }
.tag { background:#d9c9a9; color:#6e493b; padding:.1rem .45rem; font:700 .67rem var(--mono); text-transform:uppercase; }
.node-body { overflow-wrap:anywhere; }
.node-body > :first-child { margin-top:0; }
.node-body > :last-child { margin-bottom:0; }
.node-body img { max-width:100%; height:auto; }
.node-body pre { overflow:auto; overscroll-behavior-x:contain; padding:.8rem; color:#f6e9d4; font:12px/1.5 var(--mono);
  /* Edge shadows appear only on a side that still has hidden content. */
  background:linear-gradient(90deg,#342e2a,#342e2a) left/1.2rem 100% no-repeat local,
             linear-gradient(270deg,#342e2a,#342e2a) right/1.2rem 100% no-repeat local,
             linear-gradient(90deg,#f6e9d44d,transparent) left/.9rem 100% no-repeat scroll,
             linear-gradient(270deg,#f6e9d44d,transparent) right/.9rem 100% no-repeat scroll,
             #342e2a; }
.node-body pre.oneline { white-space:pre-wrap; overflow-wrap:anywhere; }
/* highlight.js tags tokens with both theme colors; these cards are always dark. */
.node-body pre code.highlighted span { color:var(--shiki-dark); }
.node-body :not(pre) > code { background:#dfd1b4; padding:.1em .25em; }
.node-body table { display:block; overflow:auto; border-collapse:collapse; }
.node-body th,.node-body td { border:1px solid #bdae94; padding:.3rem .5rem; }
.file-table-status { margin:0 0 .3rem; font:.7rem var(--mono); opacity:.7; }
.file-table-scroll { overflow:auto; max-height:26rem; }
.file-table-grid { display:table; }
.file-table-grid th { position:sticky; top:0; background:#eadfc7; }
.file-table-grid .type { display:block; font:400 .62rem var(--mono); opacity:.6; }
.file-table-grid .num,.file-table-grid .row-num { text-align:right; font-variant-numeric:tabular-nums; }
.file-table-grid .row-num,.file-table-grid .null { opacity:.55; }
.file-table-grid .null { font-style:italic; }
.node-body blockquote { margin:1rem 0; padding:.2rem .8rem; border-left:3px solid var(--accent); background:#eadfc7; }
/* Ordinary groups look like folder covers. A group whose direct children
   all have authored boxes carries a local cork board instead. */
.node.group-sheet { background:#dfd0b1; border:2px dashed #aa8967; transform:none; z-index:4; }
.group-sheet .node-title { color:#5e3e31; text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; }
.node.group-sheet.spatial-group { width:max-content; max-width:none; min-width:420px; padding:.9rem; }
.group-canvas { position:relative; min-width:360px; min-height:180px; background-color:#3b3029; background-image:radial-gradient(#b4956d3d 1px,transparent 1px); background-size:6px 6px; border:4px solid #80664d; box-shadow:inset 0 3px 12px #0009; }
.group-canvas > .node-row.spatial-item { position:absolute; margin:0; display:block; }
.group-canvas > .node-row.spatial-item > .node { transform:none; max-width:none; overflow:visible; }
/* Straight threads sit behind the paper; labels stay above it. */
.mesh-edge-overlay,.mesh-edge-label-overlay { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.mesh-edge-overlay { z-index:1; }
.mesh-edge-overlay path { opacity:.7; filter:drop-shadow(1px 1px 1px #0009); }
.mesh-edge-label-overlay { z-index:5; }
.mesh-edge-label { font:700 12px var(--mono); fill:#352820; paint-order:stroke; stroke:#f5ead2; stroke-width:6px; stroke-linejoin:round; }
.archive-footer { color:#b7a184; padding:1rem 3rem; }
@media(max-width:760px) {
  .tree .node-row > .node:not(.group-sheet) { transform:none; }
  .node { width:min(75vw,480px); }
  .tree > .node-row > .node { width:min(78vw,500px); }
}

/* "Under the lamp": a paper lifted off the board and read full screen (lamp.js). */
.lamp-btn { position:absolute; top:.55rem; right:.6rem; z-index:3; width:1.9rem; height:1.9rem; padding:0; display:grid; place-items:center; border:2px solid var(--accent); border-radius:50%; background:var(--paper-light); color:var(--accent); font:700 1rem/1 var(--mono); cursor:zoom-in; opacity:.7; transform:rotate(-8deg); transition:opacity .15s,transform .15s; }
.lamp-btn:hover,.lamp-btn:focus-visible { opacity:1; transform:rotate(0) scale(1.08); }
.lamp-btn:focus-visible { outline:3px solid #1b66c9; outline-offset:2px; }
.node-title:has(> .lamp-btn) { padding-right:2.2rem; }
html.lamp-on { overflow:hidden; }
dialog.lamp { position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--ink); overflow:hidden; }
dialog.lamp::backdrop { background:transparent; }
.lamp-dim { position:fixed; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 38%,#ffdf9a2e 0%,#2a1f1799 45%,#0a0705f0 100%); backdrop-filter:blur(2px); }
.lamp-stage { position:relative; height:100%; display:flex; align-items:center; justify-content:center; padding:3vh 3vw; }
.lamp-shadow { max-height:100%; width:min(860px,100%); display:flex; filter:drop-shadow(0 22px 30px #000b) drop-shadow(0 2px 3px #0008); }
.lamp-sheet { --accent:var(--accent-default); position:relative; width:100%; max-height:calc(94vh); display:flex; flex-direction:column; padding:2.4rem 2.2rem 1.6rem 4.2rem; background:
    linear-gradient(90deg,transparent 3.1rem,#c4584a66 3.1rem,#c4584a66 calc(3.1rem + 2px),transparent calc(3.1rem + 2px)),
    linear-gradient(#fff8e8,#f6ecd2);
  clip-path:polygon(0 -40px,100% -40px,100% calc(100% - 38px),calc(100% - 38px) 100%,0 100%); }
/* The curled corner and the paperclip (the sheet's clip-path reaches above its top so the clip can overhang). */
.lamp-sheet::after { content:""; position:absolute; right:0; bottom:0; width:38px; height:38px; background:linear-gradient(135deg,transparent 50%,#b9a77f 50%,#e9dfc4 100%); }
.lamp-sheet::before { content:""; position:absolute; top:-26px; left:1.3rem; width:26px; height:70px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 70'%3E%3Cpath d='M10 46V16A6 6 0 0 1 22 16V54A9 9 0 0 1 4 54V22A4 4 0 0 1 12 22V50' fill='none' stroke='%239aa1a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 46V16A6 6 0 0 1 22 16V54A9 9 0 0 1 4 54V22' fill='none' stroke='%23d5dade' stroke-width='.8' stroke-linecap='round' transform='translate(-.5 -.5)'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(5deg); filter:drop-shadow(1px 2px 1px #0007); pointer-events:none; z-index:2; }
.lamp-head { flex:none; }
.lamp-crumbs { font:400 .8rem/1.4 var(--display); letter-spacing:.04em; color:#7b6552; margin:0 2.4rem .5rem 0; overflow-wrap:anywhere; }
.lamp-crumbs a { color:#8e392f; text-decoration:none; border-bottom:1px dotted currentColor; }
.lamp-crumbs a:hover { background:#e9d9b4; }
.lamp-title { margin:0 2.4rem .8rem 0; padding-bottom:.6rem; border-bottom:2px solid color-mix(in srgb,var(--accent) 60%,#b7a68c); font:400 clamp(1.4rem,3vw,2rem)/1.25 var(--display); overflow-wrap:anywhere; }
.lamp-tags { display:flex; gap:.35rem; flex-wrap:wrap; margin:0 0 .8rem; }
.lamp-scroll { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:.2rem .4rem 1.2rem 0; font-size:16px; line-height:1.65; outline:none; }
.lamp-scroll .node-body { overflow:visible; }
.lamp-scroll .node-body pre { font-size:13px; }
.lamp-close { position:absolute; top:.7rem; right:.8rem; width:2rem; height:2rem; padding:0; border:2px solid var(--accent); border-radius:50%; background:#fff8e8; color:var(--accent); font:700 .9rem/1 var(--mono); cursor:pointer; z-index:2; }
.lamp-close:hover,.lamp-close:focus-visible { background:var(--accent); color:#fff8e8; outline:none; }
@media(max-width:760px) {
  .lamp-stage { padding:0; }
  .lamp-shadow { width:100%; height:100%; }
  .lamp-sheet { max-height:none; padding:2.4rem 1rem 1rem 2.6rem; background:
      linear-gradient(90deg,transparent 1.7rem,#c4584a66 1.7rem,#c4584a66 calc(1.7rem + 2px),transparent calc(1.7rem + 2px)),linear-gradient(#fff8e8,#f6ecd2); clip-path:none; }
  .lamp-sheet::after { display:none; }
  .lamp-btn { width:2.2rem; height:2.2rem; }
}

/* A plain Markdown file rendered as a page (page_kind == "document"): the lamp sheet, always open, in the page itself. */
.reader-wrap { min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:4rem 3vw 3vh; background:radial-gradient(ellipse 70% 60% at 50% 20%,#4a3a2c 0%,#2a1f17 55%,#0a0705 100%); }
.lamp-sheet.reader { max-height:none; }
.reader .lamp-scroll { overflow:visible; }
a.lamp-close { display:grid; place-items:center; text-decoration:none; }
.reader .lamp-title { font-size:clamp(1.6rem,4vw,2.4rem); }
.reader .node-body table { display:block; overflow-x:auto; }
@media(max-width:760px) { .reader-wrap { padding:2.4rem 0 0; } .lamp-shadow { height:auto; } }

/* Copy button on code blocks (copy.js). */
.code-wrap { position:relative; margin:1em 0; }
.node-body > .code-wrap:first-child { margin-top:0; }
.node-body > .code-wrap:last-child { margin-bottom:0; }
.code-wrap > pre { margin:0; }
.copy-btn { position:absolute; top:.4rem; right:.5rem; padding:.15rem .5rem; border:1px solid #f6e9d466; border-radius:3px; background:#342e2acc; color:#f6e9d4; font:700 .65rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; opacity:0; transition:opacity .15s; }
.code-wrap:hover > .copy-btn,.copy-btn:focus-visible,.copy-btn.done { opacity:1; }
.copy-btn:hover { background:#4d433c; }
.copy-btn:focus-visible { outline:2px solid #f6e9d4; outline-offset:2px; }
.copy-btn.done { color:#9fd08a; border-color:#9fd08a99; }
@media (hover:none) { .copy-btn { opacity:.85; } }