@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=IM+Fell+English:ital@0;1&family=Special+Elite&display=swap');

:root{
  /* warm field-notebook parchment — light, restrained */
  --paper:#f3ead2;
  --paper-2:#efe4c7;
  --panel:#fbf6e7;
  --panel-edge:#d9c89a;
  --line:#cdb98a;
  --ink:#34291a;
  --ink-soft:#6a563a;
  --ink-faint:#917a55;
  --red:#9b3026;
  --blue:#274b63;
  --olive:#5c6647;
  --ochre:#c08a2d;
  --tag:#e7d9af;
  --shadow:rgba(60,45,20,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* mobile: scale every rem-based font up ~6% in one place */
@media(max-width:520px){html{font-size:17px}}
body{
  background:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  font-family:'Crimson Text',serif;
  color:var(--ink);
  line-height:1.7;
}
a{color:inherit}

/* ─────────── TOP NAV ─────────── */
.topnav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:10px 26px;
  background:rgba(74,53,32,.96);
  border-bottom:2px solid #2e2114;
}
.brand{display:flex;align-items:center;gap:10px;color:#f0e6cc}
.brand b{font-family:'IM Fell English',serif;font-size:1.15rem;letter-spacing:.5px;font-weight:600}
.brand small{font-family:'Crimson Text',serif;font-size:.95rem;color:#d8c393;display:block;line-height:1}
.topnav nav{display:flex;gap:20px;flex-wrap:wrap}
.topnav nav a{
  font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:1.5px;
  text-transform:uppercase;color:#d8c393;text-decoration:none;padding:4px 2px;
  border-bottom:2px solid transparent;transition:.2s;
}
.topnav nav a:hover,.topnav nav a.current{color:#fff;border-color:var(--ochre)}
.navburger{display:none}

/* ─────────── LAYOUT ─────────── */
.wrap{max-width:1240px;margin:0 auto;padding:26px 22px 60px;
  display:grid;grid-template-columns:190px minmax(0,1fr) 300px;gap:26px;align-items:start}

/* ── left section rail ── */
.rail{position:sticky;top:78px}
.rail .casebadge{
  background:var(--panel);border:1px solid var(--panel-edge);
  box-shadow:2px 2px 0 var(--shadow);padding:14px;margin-bottom:18px;text-align:center;
}
.rail .casebadge .kicker{font-family:'Special Elite',monospace;font-size:.58rem;letter-spacing:2px;color:var(--ink-faint);text-transform:uppercase}
.rail .casebadge .no{font-family:'IM Fell English',serif;font-size:2.6rem;line-height:1;color:var(--red)}
.rail .casebadge .nm{font-family:'Crimson Text',serif;font-size:1.05rem;color:var(--ink-soft);margin-top:4px}
.rail ul{list-style:none}
.rail li a{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'Special Elite',monospace;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-soft);padding:7px 8px;border-left:2px solid transparent;transition:.18s;
}
.rail li a:hover{background:rgba(192,138,45,.12);color:var(--ink);border-left-color:var(--ochre)}
.rail li a.active{color:var(--red);border-color:var(--red);background:rgba(155,48,38,.07)}
.rail li a .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.rail li a.active .dot{background:var(--red)}

/* ── center notebook ── */
.sheet{
  background:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  border:1px solid var(--panel-edge);
  box-shadow:0 2px 0 var(--panel-edge),4px 6px 18px var(--shadow);
  padding:34px 40px 46px;position:relative;overflow:hidden;
}

.head{position:relative;border-bottom:2px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.filetag{font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-faint)}
.title{font-family:'IM Fell English',serif;font-size:2.5rem;line-height:1.12;margin-top:4px}
.subtitle{font-family:'Crimson Text',serif;font-size:1.35rem;color:var(--ink-soft);margin-top:2px}
.stamp{position:absolute;top:0;right:0;border:3px double var(--red);color:var(--red);
  font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 10px;text-align:center;transform:rotate(5deg);opacity:.82;line-height:1.5}

/* ── hero plate: illustrated field scene mounted like an archival photo ── */
.heroplate{position:relative;margin:0 0 18px;padding:12px 12px 6px;
  background:#fdfaf1;border:1px solid var(--panel-edge);
  box-shadow:2px 3px 0 var(--shadow),0 10px 22px -14px rgba(60,45,20,.45)}
.heroplate img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.heroplate .htape{position:absolute;top:-9px;width:84px;height:22px;
  background:rgba(196,176,128,.55);border:1px solid rgba(146,124,76,.35);
  box-shadow:0 1px 2px rgba(60,45,20,.12);pointer-events:none}
.heroplate .htape.l{left:26px;transform:rotate(-3.5deg)}
.heroplate .htape.r{right:26px;transform:rotate(2.5deg)}
.heroplate figcaption{font-family:'Crimson Text',serif;font-size:1.05rem;color:var(--ink-faint);
  text-align:right;padding:6px 2px 4px}
@media print{.heroplate{display:none}}

/* ── at a glance card ── */
.glance{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;
  background:var(--panel);border:1px solid var(--panel-edge);border-left:4px solid var(--ochre);
  box-shadow:2px 2px 0 var(--shadow);padding:16px 20px;margin-bottom:14px}
.glance .gl{display:flex;flex-direction:column;padding:3px 0}
.glance .gl .k{font-family:'Special Elite',monospace;font-size:.56rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint)}
.glance .gl .v{font-family:'Crimson Text',serif;font-size:1.12rem;color:var(--ink)}

/* sticker tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tag{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1px;text-transform:uppercase;
  padding:5px 11px;background:var(--tag);border:1px solid var(--panel-edge);color:var(--ink-soft);
  box-shadow:1px 1px 0 var(--shadow);transform:rotate(-1deg)}
.tag:nth-child(even){transform:rotate(1deg);background:#e9dcc4}
.tag.red{color:var(--red);border-color:#c98c84}
.tag.blue{color:var(--blue);border-color:#9db2bf}

/* section */
section{scroll-margin-top:84px;margin-bottom:18px}
.sec-h{display:flex;align-items:center;gap:9px;font-family:'Special Elite',monospace;
  font-size:.74rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--line);padding-bottom:6px;margin:30px 0 16px}
.sec-h .ic{width:18px;height:18px;flex:none;color:var(--red)}
p.body{font-size:1.04rem;margin-bottom:14px}
p.body em{font-style:italic}

/* illustration placeholder for Hui's art */
.illo{border:1.6px dashed var(--line);background:repeating-linear-gradient(45deg,rgba(205,185,138,.10) 0 10px,transparent 10px 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--ink-faint);text-align:center;padding:22px;min-height:150px;border-radius:3px}
.illo svg{opacity:.5}
.illo .lab{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase}
.illo .note{font-family:'Crimson Text',serif;font-size:1rem;color:var(--ink-soft)}
.illo.float{float:right;width:230px;margin:0 0 16px 22px}

/* real inline field sketch (replaces the dashed placeholder) */
.illo.real{border:1px solid var(--panel-edge);background:#fdfaf1;
  background-image:none;padding:8px 8px 3px;box-shadow:2px 3px 0 var(--shadow);
  transform:rotate(.45deg)}
.illo.real img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.illo.real figcaption{padding-top:5px;text-align:right}
.illo.real .lab{color:var(--ink-faint)}
@media print{.illo.real{display:none}}

/* margin sticky note */
.stickynote{background:#fbf1b8;border:1px solid #d8c468;
  box-shadow:2px 4px 8px rgba(60,45,20,.16);padding:14px 16px;font-family:'Crimson Text',serif;
  font-size:1.12rem;color:#43370a;line-height:1.5;max-width:300px;transform:rotate(-1.4deg);margin:18px 0 24px auto}
.stickynote.l{margin:18px auto 24px 0;transform:rotate(1.3deg)}
.stickynote b{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;display:block;color:var(--red);margin-bottom:4px}

/* ── TWO MODELS interactive explorer ── */
.explorer{background:var(--panel);border:1px solid var(--panel-edge);box-shadow:2px 2px 0 var(--shadow);padding:18px;margin-bottom:8px}
.dimbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.dimbtn{font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;
  padding:7px 13px;background:var(--paper);border:1px solid var(--panel-edge);color:var(--ink-soft);cursor:pointer;transition:.16s}
.dimbtn:hover{background:var(--tag);border-color:var(--ink-faint);color:var(--ink)}
.dimbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.model{border:1px solid var(--panel-edge);padding:16px 18px;position:relative;min-height:150px;background:var(--paper)}
.model.left{border-top:4px solid var(--red)}
.model.right{border-top:4px solid var(--blue)}
.model .mh{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.model.left .mh{color:var(--red)}
.model.right .mh{color:var(--blue)}
.model .mlens{font-family:'Crimson Text',serif;font-size:1.02rem;color:var(--ink-faint);margin-bottom:10px}
.model .mtext{font-size:1.02rem;color:var(--ink)}
.model .plain{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);
  font-family:'Crimson Text',serif;font-size:1.1rem;color:var(--olive)}
.vs{text-align:center;font-family:'IM Fell English',serif;font-style:italic;color:var(--ink-faint);margin:10px 0 0}

/* ── three-layer flip cards ── */
.flips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
.flip{perspective:1200px;cursor:pointer;display:grid}
.flip-in{position:relative;display:grid;min-height:218px;transition:transform .6s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.flip.flipped .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{grid-area:1/1;backface-visibility:hidden;border:1px solid var(--panel-edge);
  box-shadow:2px 2px 0 var(--shadow);padding:18px;display:flex;flex-direction:column}
.flip-f{background:var(--panel)}
.flip-b{background:var(--paper);transform:rotateY(180deg);justify-content:center}
.flip-f h4{font-family:'IM Fell English',serif;font-size:1.4rem;font-weight:600;font-style:italic}
.flip-f .who{font-family:'Special Elite',monospace;font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint);margin:4px 0 10px}
.flip-f p{font-size:.97rem;color:var(--ink-soft)}
.flip-f .turn{margin-top:auto;font-family:'Crimson Text',serif;color:var(--ochre);font-size:1rem}
.flip-b .bl{font-family:'Special Elite',monospace;font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.flip-b p{font-family:'Crimson Text',serif;font-size:1.22rem;line-height:1.45;color:var(--ink)}

/* ── TIMELINE accordion ── */
.tl{border-left:2px solid var(--line);margin-left:8px;padding-left:0}
.tl-item{position:relative;margin-bottom:6px}
.tl-item::before{content:'';position:absolute;left:-9px;top:14px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink-soft)}
.tl-item.open::before{background:var(--red);border-color:var(--red)}
.tl-btn{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 0 9px 22px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.tl-btn .yr{font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:1px;color:var(--red);min-width:46px}
.tl-btn .ti{font-family:'IM Fell English',serif;font-size:1.08rem}
.tl-btn .chev{margin-left:auto;transition:.25s;color:var(--ink-faint)}
.tl-item.open .tl-btn .chev{transform:rotate(90deg)}
.tl-body{max-height:0;overflow:hidden;transition:max-height .35s ease;padding-left:22px}
.tl-body p{font-size:1rem;color:var(--ink-soft);padding-bottom:12px}

/* ── museum quote label ── */
.quote{background:#fdfaf0;border:1.5px solid var(--panel-edge);padding:18px 30px;margin:22px 0;text-align:center;position:relative}
.quote::before,.quote::after{content:'';position:absolute;width:26px;height:26px;border:2px solid var(--ochre)}
.quote::before{top:7px;left:7px;border-right:0;border-bottom:0}
.quote::after{bottom:7px;right:7px;border-left:0;border-top:0}
.quote q{font-family:'IM Fell English',serif;font-style:italic;font-size:1.18rem;quotes:none;display:block}
.quote .by{font-family:'Special Elite',monospace;font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint);margin-top:10px;display:block}

/* ── concept chips with reveal ── */
.concepts{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.chip{font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;
  background:var(--paper);border:1.5px solid var(--ink-soft);color:var(--ink-soft);padding:6px 13px;cursor:pointer;transition:.16s}
.chip:hover{background:var(--ink-soft);color:var(--paper)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip-def{background:var(--panel);border:1px solid var(--panel-edge);border-left:4px solid var(--blue);
  box-shadow:2px 2px 0 var(--shadow);padding:16px 20px;margin-top:14px;display:none}
.chip-def.show{display:block}
.chip-def .dt{font-family:'IM Fell English',serif;font-style:italic;font-size:1.22rem;margin-bottom:4px}
.chip-def .dd{font-size:1.02rem;color:var(--ink-soft)}

/* ── reflection accordion ── */
.q-item{border-bottom:1px dashed var(--line)}
.q-btn{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:13px 0;
  display:flex;gap:12px;align-items:flex-start;font-family:'IM Fell English',serif;font-size:1.08rem;color:var(--ink)}
.q-btn .n{font-family:'Special Elite',monospace;font-size:.8rem;color:var(--red);flex:none}
.q-btn .plus{margin-left:auto;color:var(--ink-faint);transition:.2s}
.q-item.open .q-btn .plus{transform:rotate(45deg)}
.q-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q-body p{font-size:1rem;color:var(--ink-soft);padding:0 0 14px 30px}
.q-body .think{font-family:'Crimson Text',serif;font-size:1.08rem;color:var(--olive)}

/* sources */
.sources{font-size:.92rem;color:var(--ink-soft);line-height:1.9}
.sources .src{display:block;padding-left:20px;text-indent:-20px}
.srcstamp{display:inline-block;border:2px solid var(--olive);color:var(--olive);
  font-family:'Special Elite',monospace;font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 8px;transform:rotate(-3deg);margin-bottom:10px}

/* safety note */
.safety{display:flex;gap:12px;background:rgba(39,75,99,.07);border:1px solid #9db2bf;
  border-left:4px solid var(--blue);padding:14px 18px;margin-top:26px}
.safety .si{width:24px;height:24px;color:var(--blue);flex:none}
.safety b{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:2px}
.safety p{font-size:.93rem;color:var(--ink-soft)}

/* ── prev/next + related ── */
.relwrap{grid-column:2;margin-top:8px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.pager a{flex:1;text-decoration:none;background:var(--panel);border:1px solid var(--panel-edge);
  box-shadow:2px 2px 0 var(--shadow);padding:12px 16px;transition:.16s}
.pager a:hover{transform:translateY(-2px)}
.pager .d{font-family:'Special Elite',monospace;font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint)}
.pager .t{font-family:'IM Fell English',serif;font-size:1.05rem}
.pager .next{text-align:right}

/* ── right AI guide CHAT panel — retro field-station receiver ── */
.aside{position:sticky;top:78px;display:flex;flex-direction:column;gap:18px}
.chatbox{display:flex;flex-direction:column;background:var(--panel);border:1px solid #463c2c;border-radius:8px;
  box-shadow:3px 4px 0 var(--shadow);max-height:calc(100vh - 110px);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #261f15;background:linear-gradient(#48402f,#382f22)}
.lamp{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid #8a6d3e;
  background:radial-gradient(circle at 35% 30%,#e8b75c,#9c671c 65%,#5d3f10);box-shadow:inset 0 0 2px rgba(0,0,0,.5)}
.chatbox.busy .lamp{animation:lamp .85s infinite}
@keyframes lamp{
  0%,100%{background:radial-gradient(circle at 35% 30%,#e8b75c,#9c671c 65%,#5d3f10);box-shadow:inset 0 0 2px rgba(0,0,0,.5)}
  50%{background:radial-gradient(circle at 35% 30%,#ffe09a,#cf8c28 65%,#7a5314);box-shadow:0 0 9px rgba(255,200,90,.55),inset 0 0 2px rgba(0,0,0,.5)}}
.chat-head .ttl{font-family:'Special Elite',monospace;font-size:.88rem;letter-spacing:2px;text-transform:uppercase;color:#e6d9b8;line-height:1.1}
.chat-head .sub{font-family:'Special Elite',monospace;font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;color:#9c8e6e}
.chat-head .chat-clear{margin-left:auto;background:none;border:1px solid #5c513c;cursor:pointer;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:#9c8e6e;transition:.16s}
.chat-head .chat-clear:hover{background:#2e2718;color:#e0c98c;border-color:#8a6d3e}
.chat-head .chat-clear svg{width:15px;height:15px}
.chat-head .aibadge{margin-left:8px;font-family:'Special Elite',monospace;font-size:.55rem;letter-spacing:1px;
  border:1px solid #6e572f;background:linear-gradient(#c9a96a,#a3804a);color:#2f2614;box-shadow:inset 0 1px 0 rgba(255,240,200,.5);padding:2px 6px}

/* continuous-feed telegram paper */
.chat-log{flex:1;overflow-y:auto;padding:14px 24px;display:flex;flex-direction:column;gap:11px;min-height:170px;background-color:#faf3df;
  background-image:radial-gradient(circle,rgba(70,55,30,.14) 1.3px,transparent 1.6px),radial-gradient(circle,rgba(70,55,30,.14) 1.3px,transparent 1.6px);
  background-size:14px 16px,14px 16px;background-position:5px 8px,calc(100% - 5px) 8px;background-repeat:repeat-y,repeat-y}
.msg{max-width:90%;font-size:.93rem;line-height:1.55;padding:9px 12px}
.msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--panel-edge);border-left:3px solid #a3804a;color:var(--ink)}
.msg.user{align-self:flex-end;background:var(--tag);border:1px solid var(--panel-edge);color:var(--ink)}
.msg .who{font-family:'Special Elite',monospace;font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;color:#8a6d3e;display:block;margin-bottom:3px}
.msg em{font-style:italic}
.msg.typing{font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint)}

.chips-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 24px 10px}
.chips-row .sg{font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);background:var(--paper);
  border:1px solid var(--panel-edge);padding:5px 9px;cursor:pointer;transition:.16s;text-align:left}
.chips-row .sg:hover{background:var(--tag);border-color:var(--ink-faint);color:var(--ink)}

.chat-input{display:flex;gap:8px;padding:11px 14px;border-top:1px solid #261f15;background:linear-gradient(#48402f,#382f22)}
.chat-input textarea{flex:1;resize:none;border:1px solid #261f15;background:#f5eedb;
  font-family:'Special Elite',monospace;font-size:.84rem;color:var(--ink);padding:8px 10px;height:40px;line-height:1.5}
.chat-input textarea:focus{outline:none;border-color:#c9a96a}
.chat-send{flex:none;width:40px;background:linear-gradient(#c9a96a,#a3804a);border:1px solid #6e572f;border-radius:4px;box-shadow:0 2px 0 #4e3d1e;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.16s}
.chat-send:hover{background:linear-gradient(#d6b878,#b08d54)}
.chat-send:active{transform:translateY(2px);box-shadow:0 0 0 #4e3d1e}
.chat-send svg{width:18px;height:18px;color:#2f2614}
.chat-disc{font-size:.66rem;color:#a99a78;background:#332c1f;border-top:1px solid #261f15;padding:8px 16px}

.fieldnote-side{background:var(--paper);border:1px dashed var(--line);padding:14px;font-family:'Crimson Text',serif;font-size:1.08rem;color:var(--ink-soft)}
.fieldnote-side b{font-family:'Special Elite',monospace;font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);display:block;margin-bottom:6px}

.pagenum{text-align:center;font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:2px;color:var(--line);margin-top:30px}

/* ─────────── RESPONSIVE ─────────── */
@media (max-width:1080px){
  .wrap{grid-template-columns:170px minmax(0,1fr)}
  /* AI field-guide chat moves below the notebook instead of disappearing */
  .aside{position:static;grid-column:1/-1;max-height:none}
  .chatbox{max-height:430px}
  .chat-log{min-height:130px}
  .relwrap{grid-column:1/-1}
}
@media (max-width:760px){
  .wrap{grid-template-columns:1fr;padding:18px 14px 50px}
  .rail{position:static;display:flex;gap:12px;align-items:center;overflow-x:auto;padding-bottom:8px}
  .rail .casebadge{margin:0;flex:none}
  .rail ul{display:flex;gap:4px}
  .rail li a{white-space:nowrap;border-left:none;border-bottom:2px solid transparent}
  .rail li a.active{border-left:none;border-bottom-color:var(--red)}
  .relwrap{grid-column:1}
  .sheet{padding:24px 18px 36px}
  .title{font-size:2rem}
  .glance,.twocol,.flips{grid-template-columns:1fr}
  .illo.float{float:none;width:100%;margin:0 0 16px}

  /* nav folds into a paper drop-down behind a burger button (built by assets/responsive.js) */
  .navburger{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;
    width:40px;height:36px;padding:8px 9px;cursor:pointer;border-radius:3px;
    background:linear-gradient(#c9a96a,#a3804a);border:1px solid #6e572f;box-shadow:0 2px 0 #4e3d1e}
  .navburger span{display:block;width:100%;height:2px;background:#2f2614;transition:.2s}
  .navburger:active{transform:translateY(1px);box-shadow:0 1px 0 #4e3d1e}
  .topnav.navopen .navburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .topnav.navopen .navburger span:nth-child(2){opacity:0}
  .topnav.navopen .navburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .topnav nav{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;padding:8px 0 10px;
    background:var(--panel);
    background-image:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    border-bottom:2px solid #2e2114;box-shadow:0 14px 26px rgba(40,28,12,.35)}
  .topnav.navopen nav{display:flex}
  .topnav nav a{padding:12px 26px;font-size:.76rem;color:var(--ink-soft);
    border-bottom:1px dashed var(--line);border-left:3px solid transparent}
  .topnav nav a:hover,.topnav nav a.current{color:var(--red);border-left-color:var(--red);
    border-bottom:1px dashed var(--line)}
}

@media (max-width:520px){
  .topnav{padding:8px 14px;gap:10px}
  .brand small{display:none}
  .brand b{font-size:1.02rem}
  .topnav nav a{padding:11px 18px}
  .sheet{padding:20px 14px 30px}
  .title{font-size:1.72rem}
  .subtitle{font-size:1.18rem}
  .head .stamp{position:static;display:inline-block;margin-top:8px;transform:rotate(-2deg)}
  .glance{padding:13px 14px;gap:4px 14px}
  .quote{padding:16px 20px}
  .stickynote{max-width:100%}
  .sec-h{letter-spacing:1.5px}
  .pager{flex-direction:column}
  .pager .next{text-align:left}
  .sitefoot{padding:14px 16px}
}

/* ─────────── SITE FOOTER ─────────── */
.sitefoot{margin-top:70px;background:rgba(74,53,32,.96);border-top:2px solid #2e2114;padding:16px 26px}
.sitefoot .sf-in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.sitefoot .sf-note{font-family:'Crimson Text',serif;font-size:.88rem;color:#d8c393}
.sitefoot .sf-links{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:#917a55}
.sitefoot .sf-links a{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:#f0e6cc;text-decoration:none}
.sitefoot .sf-links a:hover{color:#fff;text-decoration:underline}
@media print{.sitefoot{display:none}}

/* ─────────── TEXT FIELDS: always-visible caret ─────────── */
input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,[contenteditable="true"]{cursor:text;caret-color:var(--red)}