/* ============================================================
   pages.css — shared styles for GENERATED content pages
   (field notes + project pages). These pages are produced by
   tools/build.py from the Markdown files in content/. Colors and
   fonts still come from theme.css tokens; this file is layout +
   component styling only. Edit here to restyle every note/project
   page at once.
   ============================================================ */

body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.65;padding:0 0 80px;transition:background .35s,color .35s}
a{color:var(--cool)}

/* sticky top bar */
.top{position:sticky;top:0;background:var(--bg1);border-bottom:1px solid var(--dim);padding:10px 16px;
  display:flex;gap:14px;align-items:center;font-size:12px;color:var(--mute);letter-spacing:.06em;z-index:5}
.top a{color:var(--fg);text-decoration:none}
.top .grow{flex:1}
.top .tg{cursor:pointer;background:none;border:1px solid var(--dim);color:var(--fg);font:inherit;
  padding:3px 10px;letter-spacing:.06em;transition:color .2s,border-color .2s}
.top .tg:hover{border-color:var(--accent);color:var(--accent)}

/* article shell */
.wrap{max-width:860px;margin:0 auto;padding:34px 22px 0}
article h1{font-family:var(--display);font-size:clamp(23px,3.3vw,33px);line-height:1.2;margin:0 0 10px;letter-spacing:.02em}
.meta{font-size:11px;color:var(--mute);letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
article h2{font-size:17px;letter-spacing:.02em;margin:37px 0 12px}
article h2::before{content:"## ";color:var(--accent)}
article p{font-size:14px;line-height:1.76;margin:0 0 14px}
article p b{color:var(--fg);font-weight:600}
.lede{font-size:15px;line-height:1.8}
.dim{color:var(--mute)}
article ul{margin:0 0 14px;list-style:none;padding:0}
article ul li{padding:5px 0 5px 22px;position:relative;line-height:1.62;font-size:14px}
article ul li::before{content:"–";position:absolute;left:4px;color:var(--accent)}
article ul li b{color:var(--accent);font-weight:600}

/* tables */
.tablewrap{overflow-x:auto;margin:6px 0 18px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
th,td{border:1px solid var(--dim);padding:9px 11px;text-align:left;line-height:1.5;vertical-align:top}
th{background:var(--bg1);color:var(--amber);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
td b{color:var(--accent);font-weight:600}

/* aside note (call-out box, quieter than the CTA callout) */
.aside{border-left:2px solid var(--dim);background:var(--bg1);padding:12px 16px;margin:20px 0;
  font-size:13px;line-height:1.72;color:var(--mute)}
.aside b{color:var(--fg)}

/* CTA callout (outline -> orange fill, matches main-page .tcta) */
.callout{border:1px dashed var(--accent);background:var(--bg2);padding:18px 20px;margin:32px 0 8px;font-size:14px;line-height:1.7}
.callout .bcta{margin-top:14px;display:inline-block;text-decoration:none;font:inherit;letter-spacing:.04em;
  padding:9px 16px;background:transparent;color:var(--fg);border:1px solid var(--btn);
  transition:background .14s,color .14s,border-color .14s}
.callout .bcta:hover{background:var(--btn);border-color:var(--btn);color:var(--btn-text)}
.callout .bcta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* source-links footer line (field notes) */
.srcs{font-size:12px;color:var(--mute);line-height:1.7;border-top:1px solid var(--dim);margin-top:36px;padding-top:14px}
.srcs a{color:var(--mute)}

/* ASCII header animation (optional, field notes) */
.nhead{display:flex;align-items:center;gap:18px;margin:0 0 12px}
.nhead h1{margin:0}
.nanim{flex:0 0 auto;width:132px;height:120px;display:block}
@media(max-width:640px){ .nhead{flex-direction:column;align-items:center;text-align:center;gap:10px} .nanim{width:120px;height:108px} }

/* photos / figures */
figure{margin:22px 0 26px}
figure img{width:100%;display:block;border:1px solid var(--dim)}
figcaption{font-size:11.5px;color:var(--mute);letter-spacing:.04em;margin-top:9px;line-height:1.6}
figcaption b{color:var(--fg);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600}

/* CAD line art on a fixed BEIGE stage (both themes), PolyClock-style */
.hero-art{margin:6px 0 26px}
.hero-art img{width:100%;display:block;background:var(--beige);border:1px solid var(--dim);
  padding:26px;object-fit:contain;max-height:560px}
.cadpair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 8px}
.cadpair figure{margin:0}
.cadpair img{width:100%;display:block;background:var(--beige);border:1px solid var(--dim);
  padding:16px;object-fit:contain;height:280px}
@media(max-width:600px){ .cadpair{grid-template-columns:1fr} .cadpair img{height:240px} }

/* gallery grid + lightbox */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin:14px 0 4px}
.gcell{padding:0;border:1px solid var(--dim);background:var(--bg1);cursor:pointer;overflow:hidden;display:block;transition:border-color .16s}
.gcell:hover{border-color:var(--accent)}
.gcell img{width:100%;height:132px;object-fit:cover;display:block}
.gcell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,5,7,.94);display:none;align-items:center;justify-content:center;padding:44px 16px}
.lb.on{display:flex}
.lb img{max-width:min(1100px,94vw);max-height:82vh;display:block;border:1px solid var(--dim);background:var(--beige)}
.lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:var(--fg);font-size:12px;letter-spacing:.04em;padding:0 20px}
.lb-btn{position:absolute;background:none;border:1px solid var(--dim);color:#fff;font:inherit;cursor:pointer;width:44px;height:44px;font-size:20px;line-height:1;transition:border-color .16s,color .16s}
.lb-btn:hover{border-color:var(--accent);color:var(--accent)}
.lb-x{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}

/* footer */
.foot{max-width:860px;margin:48px auto 0;padding:20px 22px 0;border-top:1px solid var(--dim);color:var(--mute);font-size:11px;letter-spacing:.1em}
.foot a{color:var(--mute)}