/* moonmcp · The Stone & Fire Tavern
   A dwarven rough-stone tavern with a French wood-fired oven. The bar is the
   service window: every bar seat is a capability, the oven is the engine, the
   blackboard is the index, the cellar arch leads deeper. Materials are stone,
   oak, wrought iron, leather and firelight. Night is default; noon is light.

   docs.md still holds: custom scrollbars everywhere, the page's thumb shown
   only while it moves, both themes on :root, nothing scrolls sideways at
   390px, code keeps its ligatures off, and motion rests under reduce. */

:root{
  --wall:#191309;
  --ink:#DCCDB2;
  --muted:#AC9C82;
  --faint:#89775F;
  --copper:#C98A4B;
  --copper-hi:#EFC08A;
  --iron:#17130E;
  --iron-2:#2A231B;
  --oak-2:#241A12;
  --patina:#5C8A72;
  --wine:#6B2E2E;
  --fire:#D97A2B;
  --fire-core:#FFE0A8;
  --hair:rgba(241,231,212,.13);
  --sheet:#E9DFCB;
  --sheet-ink:#241A12;
  --sheet-muted:#5B4A38;
  --sheet-hair:rgba(36,26,18,.2);
  --bg-tex:url("tex-wood.svg");
  --bg-tex-size:320px;
  --stone-tex:url("tex-stone.svg");
  --stone-size:300px;
  --shadow-ink:0,0,0;
  --relief:0 26px 40px -24px rgba(0,0,0,.9);
  --stage-shadow:drop-shadow(0 30px 44px rgba(0,0,0,.6));
  --fire-glow:1;
  --scene-light:none;
  --gutter-shade:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.07));
  --side-wash:rgba(0,0,0,.28);
  --side-line:rgba(0,0,0,.5);
  --vignette:radial-gradient(130% 100% at 64% 30%,transparent 0,rgba(0,0,0,.42) 58%,rgba(0,0,0,.8) 100%);
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"]{
  --wall:#E8E0D4;
  --ink:#241A12;
  --muted:#5B4A38;
  --faint:#7C6A55;
  --copper:#8B5A3C;
  --copper-hi:#A8714A;
  --iron:#3B332A;
  --iron-2:#554a3d;
  --oak-2:#B49E7E;
  --patina:#3F6B54;
  --wine:#6B2E2E;
  --fire:#C25A22;
  --fire-core:#FFD9A0;
  --hair:rgba(36,26,18,.16);
  --sheet:#FBF6EC;
  --sheet-ink:#241A12;
  --sheet-muted:#5B4A38;
  --sheet-hair:rgba(36,26,18,.18);
  --bg-tex:url("tex-plaster.svg");
  --bg-tex-size:420px;
  --stone-tex:url("tex-stone-day.svg");
  --stone-size:340px;
  --shadow-ink:86,62,36;
  --relief:0 20px 28px -18px rgba(86,62,36,.42);
  --stage-shadow:drop-shadow(0 26px 30px rgba(86,62,36,.34));
  --fire-glow:.5;
  --floor-lit:.94;
  --scene-light:linear-gradient(118deg,rgba(255,253,246,.6),rgba(255,250,240,0) 44%,rgba(86,62,36,.12));
  --gutter-shade:linear-gradient(180deg,rgba(60,45,25,.12),rgba(60,45,25,.2));
  --side-wash:rgba(86,62,36,.05);
  --side-line:rgba(86,62,36,.18);
  --vignette:radial-gradient(130% 100% at 64% 30%,transparent 0,rgba(90,70,40,.08) 62%,rgba(60,45,25,.26) 100%);
}

*{box-sizing:border-box}
/* The material sits on the canvas, not on a fixed layer: the 11px scrollbar
   gutter is painted by the canvas, so this is what keeps it from showing as a
   flat strip beside a textured page. */
html{
  scroll-behavior:smooth;
  background-color:var(--wall);
  background-image:var(--bg-tex);
  background-size:var(--bg-tex-size);
  background-attachment:fixed;
  background-repeat:repeat;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  margin:0;min-height:100vh;position:relative;
  color:var(--ink);
  font-family:"Source Serif 4","Noto Serif SC",Georgia,serif;
  font-size:17px;line-height:1.72;
  background:transparent;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:var(--vignette);
}
h1,h2,h3,h4{font-family:"Cormorant Garamond","Noto Serif SC",Georgia,serif;font-weight:600;line-height:1.05;letter-spacing:.005em;color:var(--ink)}
a{color:var(--copper);text-decoration:none}
a:hover{color:var(--copper-hi)}
code,pre,kbd,.sig,.kind,.plaque,.spec-line{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code,pre,kbd,.sig,.kind,.plaque,html,button,input,textarea,select{font-variant-ligatures:no-contextual}
:not(pre) > code,td,th{overflow-wrap:anywhere}
img{max-width:100%;height:auto}

/* ---- scrollbars (docs.md pattern) ---- */
@supports selector(::-webkit-scrollbar){
  html::-webkit-scrollbar{width:11px;height:11px}
  /* the canvas does not paint its texture under the scrollbar, so the track
     carries the same material — otherwise it reads as a pale strip */
  html::-webkit-scrollbar-track{background-color:var(--wall);
    background-image:var(--gutter-shade),var(--bg-tex);
    background-size:auto,var(--bg-tex-size);background-position:right top;background-repeat:repeat}
  html::-webkit-scrollbar-corner{background:transparent}
  html::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid transparent;background-clip:content-box;background-color:color-mix(in srgb,var(--ink) 26%,transparent)}
  html:not(.scrolled)::-webkit-scrollbar-thumb{background-color:transparent}
  pre::-webkit-scrollbar,.sig::-webkit-scrollbar,.msg .body::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.exchange::-webkit-scrollbar{width:9px;height:9px}
  pre::-webkit-scrollbar-track,.sig::-webkit-scrollbar-track,.msg .body::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.exchange::-webkit-scrollbar-track{background:transparent}
  pre::-webkit-scrollbar-thumb,.sig::-webkit-scrollbar-thumb,.msg .body::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.exchange::-webkit-scrollbar-thumb{border-radius:99px;border:2px solid transparent;background-clip:content-box;background-color:color-mix(in srgb,var(--ink) 24%,transparent)}
}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent}
  html:not(.scrolled){scrollbar-color:transparent transparent}
  pre,.sig,.msg .body,.sidebar,.exchange{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 26%,transparent) transparent}
}

::selection{background:color-mix(in srgb,var(--fire) 34%,transparent);color:var(--ink)}
:focus-visible{outline:2px solid var(--copper-hi);outline-offset:3px}

/* ---- iron rail nav (hardware, not a nav bar) ---- */
.nav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:1.2rem;
  padding:.62rem clamp(1rem,3.4vw,2.2rem);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%),linear-gradient(180deg,var(--iron-2),var(--iron));
  border-bottom:2px solid var(--iron);
  box-shadow:0 2px 0 rgba(0,0,0,.5),0 10px 26px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,transparent,var(--copper),transparent);opacity:.5}
.nav .brand{display:flex;align-items:center;gap:.55rem;font-family:"Cormorant Garamond",serif;font-size:1.22rem;letter-spacing:.02em;color:#E5D7BD}
.nav .brand .glyph{width:22px;height:22px;flex:none}
.nav .links{display:flex;gap:.45rem;margin-left:auto;align-items:center;flex-wrap:wrap}
/* The rail keeps two groups — the pages, then the tools — with one hairline
   between them and air on both sides: in daylight it reads as a scratch in the
   metal, at night as a cut with the light along one lip. */
.nav .links .nav-div{flex:none;align-self:stretch;width:1px;margin:.14rem .42rem;
  background:rgba(255,240,214,.3);box-shadow:-1px 0 0 rgba(0,0,0,.32),0 0 1px rgba(255,240,214,.22)}
:root[data-theme="dark"] .nav .links .nav-div{width:2px;background:rgba(0,0,0,.92);
  box-shadow:1px 0 0 rgba(255,240,214,.34);
  /* the lit lip pulls the eye to the right, so the groove is nudged back a pixel
     and sits optically between the two plaques */
  transform:translateX(-1px)}
/* wrapped, it would sit at the end of a row with nothing after it */
@media (width <= 620px){.nav .links .nav-div{display:none}}
.plaque,.nav .links a,.nav .ghost{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:#EAD9BC;padding:.3rem .6rem;border-radius:3px;
  background:linear-gradient(180deg,var(--copper-hi),var(--copper) 46%,color-mix(in srgb,var(--copper) 70%,#000) 100%);
  border:1px solid color-mix(in srgb,var(--copper) 60%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.35);position:relative;
}
.nav .ghost{background:linear-gradient(180deg,#3a3228,#241e17);color:#C9BBA4;border-color:#0f0c08;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.5)}
.plaque::before,.plaque::after,.nav .links a::before,.nav .links a::after{content:"";position:absolute;top:50%;width:2px;height:2px;border-radius:50%;background:rgba(0,0,0,.5);box-shadow:0 0 0 1px rgba(255,255,255,.25);transform:translateY(-50%)}
.plaque::before,.nav .links a::before{left:3px}
.plaque::after,.nav .links a::after{right:3px}
.nav .links a:hover,.nav .ghost:hover{color:#fff;filter:brightness(1.08);text-decoration:none}
.nav .links a.active{filter:brightness(1.1);color:#FFF4E0;
  /* bolder label without touching the plaque: the shadow thickens the strokes,
     the text itself keeps its advance width, so the plate does not grow */
  text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 .5px currentColor,0 0 .5px currentColor;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 16px -2px var(--copper-hi),0 1px 2px rgba(0,0,0,.5)}
.nav .theme-btn{cursor:pointer;background:none}
/* the mark and its label sit on one centred line, whatever the text size */
.nav .links a{display:inline-flex;align-items:center;gap:.36rem;line-height:1}
.mark{width:13px;height:13px;display:block;flex:none;overflow:visible}

/* ---- shared content ---- */
h1.doc-h1{font-size:clamp(2.4rem,4.6vw,3.4rem);margin:.4rem 0 .2rem;line-height:1.02}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:var(--copper-hi)}
.kicker::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--copper);box-shadow:0 0 10px var(--fire);flex:none}
.lead{color:var(--muted);font-size:1.12rem;max-width:62ch;line-height:1.7;margin:.7rem 0 0}
p{max-width:72ch}
.spec-line{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:1rem 0 0}
.spec-line b{color:var(--copper-hi);font-weight:400}
.gem{display:inline-block;width:.6em;height:.6em;border-radius:50%;vertical-align:baseline;transform:translateY(.02em)}
.gem-jade{background:var(--patina)} .gem-amber{background:var(--copper)} .gem-amethyst{background:var(--wine)}
.t-jade{color:var(--patina)} .t-amber{color:var(--copper)} .t-amethyst{color:var(--wine)}
.glass{background:rgba(255,252,244,.55);border:1px solid var(--sheet-hair);border-radius:5px;box-shadow:0 8px 20px -14px rgba(0,0,0,.4)}

/* ================= homepage: the tavern ================= */
.tavern{position:relative;overflow:hidden}
.beams{position:absolute;left:0;right:0;top:0;height:76px;pointer-events:none;z-index:1}
.beams i{position:absolute;top:0;height:22px;left:-2%;right:-2%;background:url("tex-wood.svg");background-size:240px;border-bottom:3px solid var(--oak-2);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.beams i:nth-child(2){top:52px;height:14px;left:8%;right:20%;opacity:.7}
.chandelier{position:absolute;top:26px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;display:flex;gap:26px;align-items:flex-start}
.chandelier .cord{position:absolute;top:-26px;left:50%;width:2px;height:26px;background:linear-gradient(var(--iron),transparent)}
.chandelier .bulb{position:relative;width:6px;height:14px;background:linear-gradient(var(--iron-2),var(--iron));border-radius:2px}
.chandelier .bulb::after{content:"";position:absolute;left:50%;top:12px;width:10px;height:10px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--fire-core),var(--fire) 60%,transparent 74%);box-shadow:0 0 22px 4px var(--fire);animation:flicker 3.4s ease-in-out infinite}
.chandelier .bulb:nth-child(2)::after{animation-delay:-1.1s}
.chandelier .bulb:nth-child(3)::after{animation-delay:-2.2s}

.scene{position:relative;z-index:2;min-height:94vh;display:flex;align-items:flex-end;justify-content:center;padding:120px 0 2rem;overflow:hidden}
/* warm pools of light on the floor and wall, and a stone floor */
.scene::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--scene-light),radial-gradient(48% 42% at 66% 74%,rgba(217,122,43,.26),transparent 62%),radial-gradient(38% 34% at 30% 80%,rgba(255,180,100,.14),transparent 64%)}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30vh;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--shadow-ink),.5)),var(--stone-tex);background-size:var(--stone-size);filter:brightness(var(--floor-lit,1));
  -webkit-mask:linear-gradient(180deg,transparent,#000 55%);mask:linear-gradient(180deg,transparent,#000 55%);opacity:.95}
.scene-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,5vw,4.2rem);align-items:end;width:min(1240px,95vw)}

.bar{position:relative}
.bar::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-22px;height:30px;z-index:0;pointer-events:none;
  background:radial-gradient(50% 62% at 50% 32%,rgba(var(--shadow-ink),.42),transparent 74%);filter:blur(7px)}
.bar::before{content:"";position:absolute;left:-8%;right:-4%;top:-40%;bottom:10%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 40% 70%,rgba(217,122,43,.16),transparent 66%)}
.backbar{position:absolute;left:0;right:0;bottom:calc(100% + 12px);height:210px;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;opacity:.92;pointer-events:none}
.backbar .shelf{position:relative;height:10px;background:url("tex-wood.svg");background-size:200px;border-top:2px solid #6b4c33;box-shadow:0 5px 10px rgba(0,0,0,.55)}
.backbar .shelf i{position:absolute;bottom:9px;width:12px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#4a6b5a,#20302a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 2px 0 0 rgba(255,255,255,.06)}
.backbar .shelf i:nth-child(1){left:7%;height:46px}
.backbar .shelf i:nth-child(2){left:23%;height:34px;background:linear-gradient(180deg,#8a5a3a,#3e2a18)}
.backbar .shelf i:nth-child(3){left:41%;height:52px;background:linear-gradient(180deg,#6b2e2e,#351413)}
.backbar .shelf i:nth-child(4){left:60%;height:38px}
.backbar .shelf i:nth-child(5){left:78%;height:48px;background:linear-gradient(180deg,#8a5a3a,#3e2a18)}
.backbar .shelf:nth-child(2) i:nth-child(1){left:14%;height:30px}
.backbar .shelf:nth-child(2) i:nth-child(2){left:34%;height:40px;background:linear-gradient(180deg,#8a5a3a,#3e2a18)}
.backbar .shelf:nth-child(2) i:nth-child(3){left:55%;height:32px}
.backbar .shelf:nth-child(2) i:nth-child(4){left:74%;height:42px;background:linear-gradient(180deg,#6b2e2e,#351413)}
/* a standing bottle catches a line of light, and has a cork on top */
.backbar .shelf i::before{content:"";position:absolute;left:2px;top:3px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 60%,rgba(255,255,255,0))}
.backbar .shelf i::after{content:"";position:absolute;left:50%;top:-4px;width:5px;height:4px;transform:translateX(-50%);
  border-radius:1px 1px 0 0;background:linear-gradient(180deg,#c9b79a,#8a7358)}
.bar .seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;align-items:end;margin-bottom:-10px;position:relative;z-index:3}
.seat{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.2rem .2rem 0;transition:transform .3s var(--ease)}
.seat:hover{transform:translateY(-4px)}
.seat .plaque{font-size:.78rem;letter-spacing:.16em;padding:.4rem .8rem}
.seat:hover .plaque{filter:brightness(1.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px -1px var(--copper-hi),0 1px 2px rgba(0,0,0,.5)}
.seat .menu{width:100%;background:url("tex-leather.svg");background-size:120px;color:#F0DDC2;border:1px solid #2a1413;border-radius:5px;padding:.7rem .7rem;font-size:.86rem;line-height:1.45;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 18px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.5);transition:transform .3s var(--ease),box-shadow .3s var(--ease);text-align:center}
.seat:hover .menu{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 18px rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.55)}
.seat .candle{position:relative;width:8px;height:22px;background:linear-gradient(#e9dcc2,#c9b79a);border-radius:2px;margin-top:-2px;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.seat .candle .flame{position:absolute;left:50%;top:-11px;width:9px;height:14px;transform:translateX(-50%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,var(--fire-core),var(--fire) 60%,transparent 74%);box-shadow:0 0 16px 3px var(--fire),0 0 40px 8px rgba(217,122,43,.35);animation:flicker 3s ease-in-out infinite;transition:filter .25s}
.seat:hover .candle .flame{filter:brightness(1.25)}
.seat .candle[data-state="patina"] .flame{background:radial-gradient(circle at 50% 70%,#bfe6cf,var(--patina) 60%,transparent 74%);box-shadow:0 0 16px 3px var(--patina),0 0 36px 7px rgba(92,138,114,.3)}
.seat .candle[data-state="idle"] .flame{background:radial-gradient(circle at 50% 70%,#b9b3aa,#6b655c 60%,transparent 74%);box-shadow:0 0 10px 1px rgba(120,115,105,.4);animation:none}
.counter-top{height:32px;border-radius:4px 4px 3px 3px;background:url("tex-wood.svg");background-size:260px;border-top:2px solid #6b4c33;box-shadow:0 -2px 0 rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.55),inset 0 -6px 10px rgba(0,0,0,.35);position:relative;z-index:2}
.counter-base{height:132px;background:var(--stone-tex);background-size:var(--stone-size);border-radius:0 0 6px 6px;
  box-shadow:inset 0 10px 22px rgba(var(--shadow-ink),.5),inset 0 -12px 28px rgba(var(--shadow-ink),.45),var(--relief)}
.counter-base::after{content:"";display:block;height:8px;margin:0 -2px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
/* noon: the lip of the counter drops a real shadow, so the slab reads as a slab
   and not as a band of stone printed on the wall */
:root[data-theme="light"] .counter-top{
  box-shadow:0 -2px 0 rgba(255,252,244,.45),
             0 3px 0 rgba(58,40,20,.34),
             0 14px 24px -6px rgba(74,50,28,.55),
             inset 0 -6px 10px rgba(60,42,22,.3)}
:root[data-theme="light"] .counter-base::after{background:linear-gradient(180deg,rgba(214,205,176,0),rgba(40,26,12,.5))}
:root[data-theme="light"] .bar::after{
  background:radial-gradient(52% 66% at 50% 30%,rgba(58,38,16,.5),rgba(58,38,16,.16) 58%,transparent 78%)}
.bar .hint{text-align:center;color:var(--faint);font-family:"Caveat",cursive;font-size:1.15rem;margin:.9rem 0 0}

.oven{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:10px;padding-top:56px}
.oven .label{position:relative;display:inline-block;margin:.75rem 0 0;padding:.34rem .9rem;
  font-family:"JetBrains Mono",monospace;font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:#2e1a09;background:linear-gradient(180deg,#EFD0A4,#CF9354 52%,#A86C30);
  border:1px solid #6F4520;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,247,230,.55),inset 0 -1px 0 rgba(60,30,8,.35),
             0 2px 5px rgba(var(--shadow-ink),.4),0 0 0 3px rgba(var(--shadow-ink),.14),0 0 24px -10px var(--fire);
  text-shadow:0 1px 0 rgba(255,246,226,.6),0 -1px 0 rgba(60,30,8,.25)}
.oven .label::before,.oven .label::after{content:"";position:absolute;top:50%;width:3px;height:3px;border-radius:50%;
  background:#3a2412;box-shadow:inset 0 1px 0 rgba(255,220,170,.35);transform:translateY(-50%)}
.oven .label::before{left:5px}
.oven .label::after{right:5px}
/* In the firelight the plate is not there: the caption is written on the stone,
   the way it was before the brass. Daylight keeps the plate, which is what
   makes it readable against pale limestone. */
:root[data-theme="dark"] .oven .label{padding:0;margin:.8rem 0 0;border:0;border-radius:0;background:none;
  box-shadow:none;font-family:"Caveat",cursive;font-size:1.3rem;font-weight:400;letter-spacing:.01em;
  text-transform:none;color:#F2B56B;text-shadow:0 0 18px rgba(217,122,43,.6)}
:root[data-theme="dark"] .oven .label::before,
:root[data-theme="dark"] .oven .label::after{display:none}

/* the masonry oven and its fire */
.oven-stage{position:relative;width:min(520px,54vw);filter:var(--stage-shadow)}
/* The mantel overhangs the base, so the stone under its lip is the one place
   the fire cannot reach. Only the night needs it: by day the sun gets under
   the slab and the shadow is already there in the drawing. */
:root[data-theme="dark"] .oven-stage::after{content:"";position:absolute;left:6.6%;right:6.6%;
  top:80.6%;height:8.4%;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(118% 104% at 50% 0,rgba(0,0,0,.6),rgba(0,0,0,.17) 56%,transparent 78%)}
.oven-img{display:block;width:100%;height:auto}
.firebox{position:absolute;left:28.4%;top:59.6%;width:43.2%;height:17%;border-radius:50% 50% 0 0/100% 100% 0 0;overflow:hidden}
.coal{position:absolute;left:4%;right:4%;bottom:1%;height:40%;border-radius:50%;background:radial-gradient(ellipse at 50% 72%,#ffd79a,#ef8a2f 34%,#b8551b 58%,#5a260c 78%,#1a0d05 100%);filter:blur(1.6px);opacity:.98;animation:breathe 3.6s ease-in-out infinite}
.coal::after{content:"";position:absolute;inset:0;filter:blur(.6px);background:
  radial-gradient(circle at 18% 72%,#ffe9c0 0 1.6px,transparent 3px),
  radial-gradient(circle at 34% 64%,#ffd89a 0 1.4px,transparent 3px),
  radial-gradient(circle at 48% 76%,#fff3d0 0 1.8px,transparent 3px),
  radial-gradient(circle at 63% 66%,#ffc978 0 1.5px,transparent 3px),
  radial-gradient(circle at 79% 74%,#ffe0a8 0 1.6px,transparent 3px)}
.log{position:absolute;bottom:6%;height:13%;border-radius:7px;background:linear-gradient(180deg,#4a2e1a,#1a0d06 70%,#0d0703);box-shadow:0 0 14px 3px rgba(255,120,40,.5),inset 0 -3px 4px rgba(255,150,60,.55),inset 0 1px 0 rgba(255,190,120,.25)}
.log.l1{left:14%;width:46%;transform:rotate(7deg)}
.log.l2{right:12%;width:44%;transform:rotate(-8deg)}
.flame{position:absolute;bottom:22%;left:50%;transform-origin:50% 100%;mix-blend-mode:screen;filter:blur(1.1px);animation:firewave 2.4s ease-in-out infinite;clip-path:polygon(50% 1%,62% 19%,57% 33%,71% 47%,79% 65%,67% 84%,50% 97%,33% 85%,21% 64%,29% 45%,43% 31%,38% 16%)}
.flame.f1{width:40%;height:74%;margin-left:-20%;background:radial-gradient(ellipse at 50% 90%,#fff7df,#ffcb7d 38%,#e8842f 64%,transparent 80%);opacity:.98}
.flame.f2{width:28%;height:62%;margin-left:-26%;background:radial-gradient(ellipse at 50% 90%,#fffdf4,#ffe6b0 38%,#ffb347 64%,transparent 82%);animation-delay:-.6s}
.flame.f3{width:20%;height:50%;margin-left:6%;background:radial-gradient(ellipse at 50% 90%,#ffffff,#ffefc8 38%,#ffc978 64%,transparent 84%);animation-delay:-1.2s}
.flame.f4{width:14%;height:38%;margin-left:-32%;background:radial-gradient(ellipse at 50% 90%,#fff,#ffd89a 45%,#e8842f 70%,transparent 86%);animation-delay:-1.8s}
.flame.f5{width:10%;height:30%;margin-left:16%;background:radial-gradient(ellipse at 50% 90%,#fff,#ffe9c0 50%,#ffb347 74%,transparent 88%);animation-delay:-2.2s}
.ember{position:absolute;bottom:18%;width:3px;height:3px;border-radius:50%;background:#ffd89a;box-shadow:0 0 6px 1px #ff9a3c;animation:spark 3.4s linear infinite}
.ember.e1{left:38%}
.ember.e2{left:56%;animation-delay:-1.2s}
.ember.e3{left:47%;animation-delay:-2.4s}
.smoke{position:absolute;left:30%;right:30%;top:-10%;height:40%;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,rgba(120,110,100,.3),transparent 70%);filter:blur(6px);animation:smoke 5s ease-in-out infinite;opacity:.5}
.oven-glow{position:absolute;left:50%;top:62%;width:120%;height:70%;transform:translate(-50%,-20%);pointer-events:none;background:radial-gradient(ellipse at 50% 60%,rgba(255,170,80,.5),rgba(217,122,43,.18) 42%,transparent 68%);filter:blur(14px);mix-blend-mode:screen;opacity:var(--fire-glow);animation:breathe 4.6s ease-in-out infinite}
@keyframes firewave{0%,100%{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.12) scaleX(.94)}60%{transform:scaleY(.92) scaleX(1.05)}}
@keyframes spark{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-62px) scale(.3);opacity:0}}
@keyframes smoke{0%,100%{transform:translateY(0) scale(1);opacity:.4}50%{transform:translateY(-14px) scale(1.15);opacity:.6}}

@keyframes flicker{0%,100%{opacity:.85;transform:translateX(-50%) scaleY(1)}25%{opacity:1;transform:translateX(-50%) scaleY(1.08)}50%{opacity:.7;transform:translateX(-50%) scaleY(.94)}75%{opacity:.95;transform:translateX(-50%) scaleY(1.04)}}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}

.board-wrap{position:relative;z-index:2;width:min(1180px,94vw);margin:0 auto;padding:2rem 0}
.board{position:relative;padding:1.4rem 1.6rem 1.6rem;border-radius:6px;background:linear-gradient(180deg,#20302a,#16221d);border:10px solid #3E2C1E;box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 20px 40px -20px rgba(0,0,0,.8),inset 0 0 0 2px #2a1d12}
.board::before{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;opacity:.25;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.18),transparent 60%),radial-gradient(50% 40% at 75% 80%,rgba(255,255,255,.12),transparent 60%)}
.board h2{font-family:"Caveat",cursive;font-weight:700;font-size:1.7rem;color:#EDE6D2;margin:0 0 .6rem;text-shadow:0 1px 0 rgba(255,255,255,.15)}
.board ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
.board li{font-family:"Caveat",cursive;font-size:1.35rem;color:#D9D2BE;opacity:.92}
.board a{color:#EDE6D2}
.board a:hover{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.6)}
.board .tally{margin:1rem 0 0;padding-top:.7rem;border-top:1px dashed rgba(237,230,210,.22);font-family:"Caveat",cursive;font-size:1.25rem;color:#CBC2A6}
.board .tally-sub{margin:.15rem 0 0;font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#B3A78A}

.arches{position:relative;z-index:2;width:min(1180px,94vw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.6rem);padding:1rem 0 2.4rem;align-items:end}
.arch{position:relative;display:block;width:100%;max-width:520px;margin:0 auto;transition:transform .3s var(--ease);filter:var(--stage-shadow)}
.arch:hover{transform:translateY(-3px)}
.arch img{display:block;width:100%;height:auto}
.arch .sign{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);white-space:nowrap;font-family:"Caveat",cursive;font-size:1.5rem;color:#F2E1C4;text-shadow:0 2px 8px #000,0 0 20px rgba(217,122,43,.3)}

.longtable{position:relative;z-index:2;width:min(1180px,94vw);margin:0 auto;padding:1rem 0 2rem}
.tabletop{position:relative;padding:calc(2rem + 5px) 1.6rem 2.2rem;border-radius:8px;background:url("tex-wood.svg");background-size:300px;box-shadow:0 24px 50px -24px rgba(0,0,0,.85),inset 0 2px 0 rgba(255,255,255,.08),inset 0 -10px 30px rgba(0,0,0,.5);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.2rem;align-items:stretch}
/* the slips are one column of paper, centred against the recipe beside them,
   with air between them the way two dockets lie on a table */
.tabletop > div:first-of-type{display:flex;flex-direction:column;justify-content:center;gap:1.5rem;min-width:0}
.tabletop h2,
.slip .t,
.recipe .t{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tabletop h2{position:absolute;top:calc(-.9rem + 5px);left:1.4rem;font-family:"Caveat",cursive;font-size:1.5rem;color:#EDE6D2;background:var(--oak-2);padding:0 .5rem;border-radius:4px}
.slip{position:relative;background:#efe4cc;color:#2a1d12;border-radius:3px;padding:.8rem .9rem;font-family:"JetBrains Mono",monospace;font-size:.72rem;line-height:1.55;box-shadow:0 8px 18px rgba(0,0,0,.4);transform:rotate(-.7deg)}
.slip .t{font-family:"Caveat",cursive;font-size:1.15rem;color:#6B2E2E;display:block;margin-bottom:.3rem}
/* These are paper slips lying on a table, so nothing holds them down: no nail.
   If the tabletop is ever read as a wall of boards and the slips as plaques, the
   docket wants a nail head in its top right corner — uncomment the rule and give
   .slip the extra right padding (.8rem 1.7rem .8rem .9rem) to keep the text clear
   of it.
.slip::before{content:"";position:absolute;top:.44rem;right:.46rem;width:7px;height:7px;
  border-radius:50%;background:#7a5636;
  box-shadow:inset 0 1px 0 rgba(255,236,206,.4),0 0 0 1px rgba(84,56,30,.38),0 1px 2px rgba(0,0,0,.32)}
*/
.slip + .slip{transform:rotate(.5deg)}
.recipe{background:#f4ecdb;color:#241A12;border-radius:4px;padding:.9rem 1rem;box-shadow:0 10px 22px rgba(0,0,0,.45)}
.recipe .t{font-family:"Caveat",cursive;font-size:1.2rem;color:#3F6B54;display:block;margin-bottom:.4rem}
.recipe pre{font-size:.74rem;line-height:1.6;overflow-x:auto;white-space:pre;color:#241A12}

.hooks{position:relative;z-index:2;width:min(1180px,94vw);margin:0 auto;display:flex;gap:.8rem;flex-wrap:wrap;padding:0 0 2rem}
.hook{position:relative;padding-top:18px;display:inline-flex}
.hook::before{content:"";position:absolute;top:0;left:50%;width:2px;height:18px;background:linear-gradient(var(--iron),var(--iron-2));transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.hook::after{content:"";position:absolute;top:14px;left:50%;width:10px;height:6px;border:2px solid var(--iron-2);border-top:none;border-radius:0 0 8px 8px;transform:translateX(-50%)}

.corner{position:relative;z-index:2;width:min(1180px,94vw);margin:0 auto;padding:1.4rem 0 3rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;border-top:1px solid var(--hair)}
.corner .barrels{display:flex;gap:.5rem}
.corner .cask{width:34px;height:44px;border-radius:10px/16px;background:url("tex-wood.svg");background-size:120px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.5),inset 0 0 20px rgba(0,0,0,.5)}
.corner .cask:nth-child(2){height:52px}
.corner .closing{font-family:"Caveat",cursive;color:var(--muted);font-size:1.1rem}
.corner .closing b{color:var(--ink)}
.corner .grow{margin-left:auto}
.corner a{color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.corner a:hover{color:var(--copper-hi)}

/* order card */
.order-card{position:fixed;right:0;top:0;bottom:0;width:min(380px,88vw);z-index:80;transform:translateX(102%);visibility:hidden;transition:transform .38s var(--ease),visibility .38s;display:flex;flex-direction:column;background:url("tex-leather.svg");background-size:140px;color:#F2E3C8;box-shadow:-20px 0 60px rgba(0,0,0,.6);border-left:1px solid #1a0f0d}
.order-card.open{transform:none;visibility:visible}
.order-card .oc-head{padding:1.2rem 1.2rem .8rem;border-bottom:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.order-card .oc-head .oc-title{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:#fff2d8}
.order-card .oc-close{all:unset;cursor:pointer;color:#EAD9BC;border:1px solid rgba(255,255,255,.25);border-radius:3px;width:26px;height:26px;display:grid;place-items:center;font-family:"JetBrains Mono",monospace}
.order-card .oc-body{padding:1.1rem 1.2rem;overflow-y:auto;font-size:.92rem;line-height:1.6}
.order-card .oc-body .oc-tag{font-family:"JetBrains Mono",monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--copper-hi);margin:0 0 .4rem}
.order-card .oc-body p{color:#E6D3B3;margin:.2rem 0 .9rem}
.order-card .oc-body a{color:var(--copper-hi);font-family:"JetBrains Mono",monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}

/* ================= docs pages: parchment ledger ================= */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);max-width:1250px;margin:0 auto}
.sidebar{position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);overflow-y:auto;padding:1.3rem .9rem 2.6rem;border-right:1px solid var(--side-line);background:linear-gradient(180deg,var(--side-wash),transparent)}
.sidebar .side-title{font-family:"JetBrains Mono",monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--copper-hi);margin:0 0 .9rem .2rem}
.side-nav{display:flex;flex-direction:column;gap:.02rem}
.side-nav .group{font-family:"JetBrains Mono",monospace;font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--faint);margin:1.1rem 0 .3rem .3rem}
.side-nav a{color:var(--muted);font-size:.88rem;padding:.32rem .6rem;border-radius:0 4px 4px 0;border-left:2px solid transparent;line-height:1.4;transition:color .15s,background .15s}
.side-nav a:hover{color:var(--ink);background:rgba(201,138,75,.1);text-decoration:none}
.side-nav a.active{color:var(--ink);border-left-color:var(--fire);background:rgba(201,138,75,.12)}
.side-foot{display:flex;gap:.35rem;flex-wrap:wrap}
.side-foot a{font-family:"JetBrains Mono",monospace;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border:1px solid var(--hair);border-radius:3px;padding:.24rem .4rem}
/* the plate does not move or fill: only the lettering answers, thickened by a
   shadow so the chip keeps its width */
:root[data-theme="dark"] .side-foot a:hover{color:var(--copper-hi);
  text-shadow:0 0 .45px currentColor,0 0 .45px currentColor}
main.doc{padding:2rem clamp(1rem,2.4vw,2.2rem) 5rem;min-width:0}
.ledger{background:var(--sheet);color:var(--sheet-ink);border-radius:5px;padding:clamp(1.4rem,3vw,2.6rem);box-shadow:0 3px 0 rgba(0,0,0,.2),0 30px 60px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(120,90,50,.18);background-image:url("tex-plaster.svg");background-size:320px;background-blend-mode:multiply}
.ledger h1.doc-h1,.ledger h2,.ledger h3{color:var(--sheet-ink)}
.ledger .lead,.ledger p{color:var(--sheet-muted)}
.ledger .eyebrow,.ledger .kicker{color:var(--copper)}
.ledger .rule::before,.ledger .rule::after{background:var(--sheet-hair)}
.ledger .rule .node{background:var(--copper)}
.ledger .spec-line{color:#8a7358}
.ledger .spec-line b{color:var(--copper)}
.ledger a{color:var(--wine)}
.ledger p code,.ledger li code{background:rgba(36,26,18,.1);color:#5a2d18;padding:.03rem .3rem;border-radius:3px}
.ledger .runline code{background:none;color:#E6D6B4;padding:0}
.section{scroll-margin-top:80px;padding-top:2.2rem;margin-top:2.2rem;border-top:1px solid var(--sheet-hair)}
.section:first-of-type{border-top:none;margin-top:0}
.section>h2{font-size:1.7rem;margin:0 0 .3rem}
.section>.pdesc{color:var(--sheet-muted);margin:.1rem 0 1.2rem;max-width:70ch}
.kind{display:inline-block;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;border-radius:3px;padding:.12rem .42rem;margin-bottom:.5rem;color:#7a3c1e;background:rgba(139,90,60,.14);border:1px solid rgba(139,90,60,.3)}
.item{background:rgba(255,252,244,.6);border:1px solid var(--sheet-hair);border-radius:5px;padding:.95rem 1.1rem;margin:.65rem 0;transition:border-color .2s,transform .2s}
.item:hover{border-color:rgba(139,90,60,.5);transform:translateY(-1px)}
.sig{font-size:.88rem;margin:0 0 .45rem;overflow-x:auto;white-space:pre;color:var(--sheet-ink);line-height:1.6;padding-bottom:.2rem}
.sig .k{color:#7E4FC0} .sig .ty{color:#8B5A3C} .sig .op{color:#8a7358} .sig .fn{color:#3F6B54}
.item .doc{margin:.2rem 0 0;color:var(--sheet-muted);max-width:78ch;font-size:.94rem}
.item .doc code{background:rgba(36,26,18,.08);color:#5a2d18;padding:.03rem .3rem;border-radius:3px}
pre{margin:0;font-size:.84rem;line-height:1.7;overflow-x:auto;white-space:pre}
.code{position:relative;background:#2b1f16;color:#E6D6B4;border:1px solid #42342a;border-radius:5px;padding:.95rem 1.05rem;box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.code .copy{position:absolute;top:.5rem;right:.5rem}
.copy{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#C9BBA4;cursor:pointer;font:inherit;font-family:"JetBrains Mono",monospace;font-size:.68rem;padding:.18rem .45rem}
.copy:hover{border-color:var(--copper-hi);color:#fff}
.copy.ok{color:var(--patina);border-color:var(--patina)}
.msg{display:grid;grid-template-columns:62px minmax(0,1fr);gap:.8rem;align-items:start;margin:.5rem 0}
.msg .who{font-family:"JetBrains Mono",monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#8a7358;padding-top:.55rem;text-align:right}
.msg .body{background:#2b1f16;color:#E6D6B4;border:1px solid #42342a;border-radius:5px;padding:.65rem .85rem;overflow-x:auto}
.msg .body code{background:none;color:inherit;padding:0}
.msg.agent .who{color:#8B3A1E}
.thread-col{position:relative;padding-left:20px}
.thread-col::before{content:"";position:absolute;left:6px;top:.3rem;bottom:0;width:2px;background:linear-gradient(var(--copper),transparent)}
.rule{display:flex;align-items:center;gap:.8rem;margin:2rem 0}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:var(--hair)}
.rule .node{width:5px;height:5px;transform:rotate(45deg);background:var(--copper)}
footer.site{color:var(--faint);font-size:.82rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;border-top:1px solid var(--sheet-hair);margin-top:2.6rem;padding-top:1.2rem}
footer.site a{color:var(--sheet-muted)}
footer.site .grow{margin-left:auto}
.ledger footer.site{color:var(--sheet-muted)}
.ledger footer.site a{color:var(--wine)}

/* ---- daylight ----------------------------------------------------------
   The same drawings serve both moments, but noon is not night turned up: the
   wall lifts to limewash, the stone washes toward pale limestone, and the fire
   stops being a screen-blended glow on a dark room and becomes a small warm
   flame in a lit one. Relief comes from cast shadow instead of from light pools. */
/* daylight has no firelight to separate the stone from the wall, so the oven
   carries a hairline of its own along both flanks: the chimney keeps an edge
   against the limewash the way the arch stones do, and the night needs none of
   it — the fire already draws that edge there. */
:root[data-theme="light"] .oven-img{filter:sepia(.22) saturate(.72) brightness(1.16) contrast(.92)
  drop-shadow(1px 0 0 rgba(74,52,28,.62)) drop-shadow(-1px 0 0 rgba(74,52,28,.52))
  drop-shadow(0 1px 0 rgba(74,52,28,.4))}
/* the opening is drawn twice: at night the door is a silhouette lit by the room,
   by day it is oak with daylight on it. Neither is the other turned up. */
.arch img.arch-day{display:none}
:root[data-theme="light"] .arch img.arch-night{display:none}
:root[data-theme="light"] .arch img.arch-day{display:block;filter:sepia(.26) saturate(.78) brightness(1.04) contrast(.98)}
:root[data-theme="light"] .firebox{background:radial-gradient(ellipse at 50% 74%,#2e1709,#140b05 72%)}
:root[data-theme="light"] .firebox .flame{mix-blend-mode:normal;opacity:.96;filter:saturate(1.8) brightness(.74) contrast(1.08)}
:root[data-theme="light"] .coal{filter:blur(1.6px) saturate(1.15) brightness(.88)}
:root[data-theme="light"] .oven-glow{mix-blend-mode:normal}
:root[data-theme="light"] .seat .candle .flame{box-shadow:0 0 12px 2px rgba(194,90,34,.45)}
:root[data-theme="light"] .chandelier .bulb::after{box-shadow:0 0 14px 3px rgba(194,90,34,.4)}
/* the top of the counter catches the daylight, the foot falls into shade */
:root[data-theme="light"] .counter-base{/* the stone only needs to sit a shade darker
   where the top overhangs it; the rest of the shadow is the top's own, which has a real
   falloff instead of a step */
  background-image:linear-gradient(180deg,rgba(44,29,14,.18),rgba(44,29,14,0) 34%),var(--stone-tex);box-shadow:inset 0 6px 14px rgba(86,62,36,.22),inset 0 -8px 20px rgba(86,62,36,.26),var(--relief)}
:root[data-theme="light"] .bar .hint{color:#6f5b41}
:root[data-theme="light"] .board{box-shadow:inset 0 0 40px rgba(0,0,0,.55),0 18px 34px -18px rgba(86,62,36,.5),inset 0 0 0 2px #2a1d12}

/* ---- responsive ---- */
/* ---- decoration is not a document -------------------------------------
   The scene is scenery: stone, fire, plaques and captions are not text to be
   copied, so they cannot be selected, dragged or long-pressed out of the page.
   Where the page is meant to be read — the guide, the reference, the showcase,
   and the slips of code on the table — selection is left exactly as it was. */
.nav,
.scene,
.arches,
.board,
.hooks,
.corner{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* a drawing is not a file to drag away */
.scene img,
.arches img{-webkit-user-drag:none;pointer-events:none}

@media (width <= 980px){
  .scene-grid{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .oven{order:-1}
  .oven-stage{width:min(390px,86vw)}
  /* the back bar hangs off the counter on a wide screen; in one column it goes
     back into the flow, or it lands on top of the oven's caption */
  .backbar{position:static;margin-bottom:.4rem}
  .tabletop{grid-template-columns:minmax(0,1fr)}
}
@media (width <= 860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--side-line);padding-bottom:1.1rem}
  .side-nav{flex-flow:row wrap;gap:.1rem .2rem}
  .side-nav a{border-left:none;border-radius:4px}
  .side-nav a.active{border-left:none;box-shadow:inset 0 -2px 0 var(--fire)}
  main.doc{padding:1.2rem 1rem 3.4rem}
  .nav .links a,.nav .ghost{font-size:.62rem;padding:.28rem .45rem}
  .arches{grid-template-columns:minmax(0,1fr)}
}
@media (width <= 560px){
  .nav{padding:.5rem .7rem;gap:.6rem}
  .nav .brand{font-size:1.02rem}
  .nav .brand .glyph{width:19px;height:19px}
  .nav .links{gap:.28rem}
  .nav .links a,.nav .ghost{font-size:.56rem;letter-spacing:.1em;padding:.22rem .34rem;gap:.26rem}
  .mark{width:11px;height:11px}
  .bar .seats{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .seat{flex-direction:row;justify-content:flex-start;gap:.7rem;padding:.3rem 0}
  .seat .menu{flex:1;text-align:left}
  .seat .candle{align-self:center;margin:0}
  .chandelier{display:none}
}

/* ---- how the server is written -----------------------------------------
   The guide's switch: one style at a time, remembered between pages. The bar
   sits under the nav and passes the wheel through to the page below it. */
.style-bar{position:sticky;top:3.9rem;z-index:6;display:flex;justify-content:flex-end;margin:-.4rem 0 .8rem;pointer-events:none}
.style-switch{pointer-events:auto;display:inline-flex;align-items:center;gap:.12rem;padding:.2rem;border-radius:6px;background:rgba(233,223,203,.86);border:1px solid var(--sheet-hair);box-shadow:0 7px 18px -14px rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.style-switch .style-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sheet-muted);padding:0 .45rem 0 .55rem}
.style-switch button{font:inherit;font-size:.84rem;font-weight:500;color:var(--sheet-muted);background:transparent;border:0;border-radius:4px;cursor:pointer;padding:.32rem .68rem .26rem;line-height:1.2}
.style-switch button:hover{color:var(--sheet-ink);background:rgba(139,90,60,.12)}
.style-switch button[aria-checked="true"]{color:#FFF8E8;background:#8B3A1E}
.style-switch button:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.styles>.variant{display:none}
html:not([data-style]) .styles>[data-style="annotations"],
html[data-style="annotations"] .styles>[data-style="annotations"],
html[data-style="functions"] .styles>[data-style="functions"],
html[data-style="classes"] .styles>[data-style="classes"]{display:block}
.styles .why{margin:.6rem 0 0;color:var(--sheet-muted);font-size:.94rem;max-width:70ch;border-left:2px solid rgba(139,90,60,.45);border-radius:0 4px 4px 0;padding:.1rem 0 .1rem .7rem}
@media (width <= 560px){.style-switch .style-label{display:none}.style-switch button{padding:.32rem .5rem .26rem}}

/* recorded answers: one request a line, the answer in the second column */
.session{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);column-gap:.7rem;row-gap:.1rem;background:#2b1f16;color:#E6D6B4;border:1px solid #42342a;border-radius:5px;padding:.9rem 1.05rem;box-shadow:inset 0 0 30px rgba(0,0,0,.5);font-family:"JetBrains Mono",monospace;font-size:.78rem;line-height:1.85;overflow-x:auto;margin:.9rem 0}
.session .row{display:contents}
.session .say{color:#C9BBA4;white-space:nowrap}
.session .arrow{color:var(--copper-hi)}
.session .got{color:#EFC08A;white-space:pre-wrap;overflow-wrap:anywhere}