/* בצלאל בן אורי — a sheet that came out of the plotter at 23:47 */
:root{--paper:#f7f5ef;--ink:#000;--rule:#b9b3a4;--faint:#e9e5da;--dim:#3d3b37;--accent:#1d3fd6;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",Menlo,monospace}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;padding:24px 22px 36px;font:400 17px/1.55 Heebo,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
code,.mono{font-family:var(--mono);font-size:.92em;direction:ltr;unicode-bidi:isolate}
p{margin:0 0 .6em}

/* the drawing frame: heavy border, hairline outside it */
.sheet{max-width:900px;margin:0 auto;border:1.5px solid var(--ink);position:relative;background:var(--paper)}
.sheet::after{content:"";position:absolute;inset:-6px;border:1px solid var(--ink);pointer-events:none}

.strip{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--ink)}
.strip .name{font-weight:700;text-decoration:none;font-size:1.05em}
.strip nav{display:flex;gap:18px;font-size:.95em}
.strip nav a[aria-current]{text-decoration:none;border-bottom:2px solid var(--accent)}

.art{margin:0;padding:10px;border-bottom:1px solid var(--ink)}
.art img,.art svg{display:block;width:100%;height:auto}

/* title block: cells separated by ink lines */
section.tb{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:0;background:var(--ink);border-bottom:1px solid var(--ink)}
.tb>div{background:var(--paper);padding:12px 18px;min-width:0}
.tb .wide{grid-column:1/-1;padding:18px}
.tb h1{margin:0 0 .3em;font-size:clamp(1.45rem,4vw,2.2rem);line-height:1.15;font-weight:700;text-wrap:balance}
.tb .cap{margin:0;font-weight:300;font-size:1.1em;max-width:60ch}
.lab{display:block;font-size:.74em;color:var(--dim);margin-bottom:2px}
.serial{font-family:var(--mono);color:var(--accent);font-weight:700;font-size:1.35em}
.pen{display:inline-block;width:.8em;height:.8em;background:var(--accent);border:1px solid var(--ink);vertical-align:-.05em;margin-inline-end:.45em}
@media (max-width:640px){section.tb{grid-template-columns:1fr 1fr}}

section,.more{padding:20px 18px;border-bottom:1px solid var(--ink)}
/* headings underlined like a dimension string: ticks at both ends */
h2{font-size:1.05em;font-weight:700;margin:0 0 14px;padding-bottom:6px;position:relative;border-bottom:1px solid var(--ink)}
h2::before,h2::after{content:"";position:absolute;bottom:-5px;width:10px;height:1px;background:var(--ink);transform:rotate(45deg)}
h2::before{right:-3px}
h2::after{left:-3px}
.lead{font-weight:300;font-size:1.1em;max-width:60ch}

.hint{font-size:1.15em;margin:0 0 8px;max-width:60ch}
.dl{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{font-family:var(--mono);border:1.5px solid var(--ink);padding:9px 22px;text-decoration:none;font-weight:700;letter-spacing:.06em;direction:ltr}
.btn:hover{background:var(--ink);color:var(--paper)}
.small{font-size:.9em;margin:6px 0;color:var(--dim)}
.layers{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.layers li{font-family:var(--mono);font-size:.78em;border:1px solid var(--rule);padding:2px 8px;direction:ltr}
.layers li.off{border:1px dashed var(--accent);color:var(--accent)}

.horo ul{list-style:none;margin:0 0 14px;padding:0;columns:2;column-gap:28px}
.horo li{break-inside:avoid;margin:0 0 12px;padding-inline-start:12px;border-inline-start:2px solid var(--faint)}
.horo li b{display:block;font-size:.85em}
@media (max-width:640px){.horo ul{columns:1}}

.more{display:flex;flex-wrap:wrap;gap:10px 0;border-bottom:0}
.more a{padding:0 14px;border-inline-start:1px solid var(--ink)}
.more a:first-child{border:0;padding-inline-start:0}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:18px}
.grid a{display:block;border:1px solid var(--ink);padding:6px;text-decoration:none}
.grid img{display:block;width:100%;height:auto;aspect-ratio:1}
.grid .d{display:flex;justify-content:space-between;font-size:.8em;margin-top:6px}
.grid .d b{font-family:var(--mono);font-weight:400}

.pick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
select{font:inherit;font-family:var(--mono);padding:8px 10px;border:1.5px solid var(--ink);background:var(--paper);color:inherit;max-width:100%}
.out{border:1.5px solid var(--accent);padding:16px 18px;font-size:1.25em;margin:0 0 22px}
.out b{color:var(--accent)}

.ledger{list-style:none;margin:0;padding:0}
.ledger li{padding:10px 0;border-bottom:1px solid var(--faint);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.ledger time{font-family:var(--mono);font-size:.8em;color:var(--dim);white-space:nowrap;direction:ltr}
.empty{font-weight:300;font-size:1.2em}

.foot{max-width:900px;margin:30px auto 0;font-size:.85em;color:var(--dim)}
.foot p{margin:4px 0}
.foot a{margin-inline-end:14px}
@media (prefers-reduced-motion:no-preference){.btn{transition:background .12s,color .12s}}