/* Light paper theme, an experiment. Loaded after main.css only when the URL
   carries ?light, so the dark site is untouched. Cool paper, near-black ink,
   serif headings, one ink-blue accent. The 3D stages, the log replay and the
   videos stay dark: they read as plates printed into the page, and the
   renderer's colours need no change. */

:root{
  --bg:#f7f7f4;
  --pane-bg:transparent;
  --line:#dcdcd6;
  --line-2:#e7e7e2;
  --txt:#15171a;
  --dim:#3b3f45;
  --dim-2:#5d626a;
  --cy:#2553c7;
  --cy-2:#1c3f94;
  --amber:#1c3f94;
  --lead:#23262b;
  --code:#27324a;
  --surface:#efefeb;
  --surface-2:#e7e7e2;
  --acc-bg:#e9eefa;
  --acc-line:#b9c6e6;
  --nav-bg:rgba(247,247,244,.9);
  --serif:Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;
}

/* Dark mode is this same paper page in warm neutral grey: same type, same
   layout, no blue. Only colours change. The 3D stages stay light in both
   themes, because dark grey models vanish on a dark stage. */
html.dark{
  --bg:#2a241f;
  --line:#453c33;
  --line-2:#382f28;
  --txt:#f4f3ee;
  --dim:#d8cfc3;
  --dim-2:#ab9f91;
  --cy:#c9c7bd;
  --cy-2:#ffffff;
  --amber:#ffffff;
  --lead:#ecebe4;
  --code:#e6e4dc;
  --surface:#332c25;
  --surface-2:#3d352d;
  --acc-bg:#3d352d;
  --acc-line:#5c5044;
  --nav-bg:rgba(42,36,31,.9);
}
html.dark .rig-stage{border-color:#453c33}
html.dark .theme{border-color:var(--line);color:var(--dim)}

/* the dark plates keep the dark palette for everything inside them */
.term,.vid-frame{
  --txt:#f1f0ea;--dim:#cfcdc4;--dim-2:#a3a198;
  --cy:#e6e4dc;--cy-2:#ffffff;
  --line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.07);
}
/* one rule for every plate: the same charcoal, corners and shadow */
.rig-stage,.term,.vid-frame{border-radius:8px}
.term{border-color:#2f2f2d;box-shadow:0 18px 40px -28px rgba(20,20,19,.5)}
/* The 3D stage is white in the light theme: the models are dark grey, and a
   grey stage swallowed the drone. Labels switch to dark ink in main.js. */
.rig-stage{
  border-color:var(--line);box-shadow:none;
  background:
    repeating-linear-gradient(0deg,rgba(20,24,30,.035) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(20,24,30,.035) 0 1px,transparent 1px 46px),
    linear-gradient(180deg,#ffffff,#f3f3f0);
}
.rig-meta .v{color:#5d626a;font-size:13px}
/* the stage is light in both themes, so its button keeps light colours too */
.rig-burst{background:#ffffff;color:#3b3f45;border-color:#d0d0ca}
.rig-burst:hover,.rig-burst.on{color:#15171a;border-color:#15171a;background:#f0f0ec}
.term{background:linear-gradient(180deg,#232322,#1b1b1a)}
.tl-tool i{color:#e6e4dc}
/* play buttons: neutral, no cyan glow */
.vid-play{border-color:rgba(255,255,255,.75);background:rgba(20,20,19,.55);box-shadow:none}
.vid-play::before{border-left-color:#ffffff}
.vid-btn:hover .vid-play{border-color:#ffffff;background:rgba(20,20,19,.72)}
html.dark .rig-stage{background:linear-gradient(180deg,#efe9e1,#e0d7cb)}
.term-hd{background:rgba(255,255,255,.03)}

body{background:var(--bg);color:var(--txt)}
.glow,.grain{display:none}

/* type: serif for headings, calm sans for reading */
h1,h3,h4,.eyebrow{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;color:var(--txt)}
h1{font-weight:500;letter-spacing:-.03em}
h3{font-size:1.9rem}
.eyebrow{font-size:1.5rem}
.lead,.now,.one,.proof li,.plain,.beat p,.spec dd,.lab-item p,.parts li i,.hw-line,.fine,.note{color:var(--dim)}
.lead{color:var(--lead)}
.lead b,.now b,.plain b,.hw-line b,.parts li b,.vid-meta b,.spec dt,.beat .bk,.lab-item h4{color:var(--txt)}
.beat p em,.spec dd em,.parts li i em{color:var(--txt)}
.spec dd code,.fine code,.proof code{color:var(--code)}
.lead,.does li,#about .fine{text-shadow:none}
.proof li::before{opacity:1}

/* nav on paper */
.nav{background:var(--nav-bg);border-bottom-color:var(--line-2)}
.nav a.nl{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:15px}
@media (max-width:640px){ nav.nav a.nl{font-size:14.5px;letter-spacing:0} }
.nav a.nl.on{color:var(--txt)}
.theme{border-color:var(--line);color:var(--dim)}
.mark-dot{box-shadow:none}
.prog{background:var(--cy);box-shadow:none}

/* panels become ruled sections, not boxes */
.card,.pane{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.card > section + section,.card > details + section,.card > section + details{border-top-color:var(--line-2)}
.beat{background:transparent}

/* small tags and chips */
.meta span{background:var(--surface);border-color:var(--line);color:var(--dim)}
.meta span.live{color:var(--cy-2);border-color:var(--acc-line);background:var(--acc-bg)}
.chips b{border-color:var(--line);color:var(--dim-2)}
.stat b{border-color:var(--line);color:var(--dim-2)}
.stat b.live{color:var(--cy-2);border-color:var(--acc-line)}
.stat b.live::before{box-shadow:none}
.stat b.warm{color:var(--cy-2);border-color:var(--acc-line)}
.stat b.win{color:var(--cy-2);border-color:var(--acc-line);background:var(--acc-bg)}

/* folds, links, buttons */
.more{background:var(--surface)}
.more > summary b{color:var(--txt)}
.more > summary::after{color:var(--cy-2);border-color:var(--acc-line);background:var(--bg)}
.more > summary:hover,.more > summary:focus-visible{background:var(--surface-2)}
.more > summary:hover::after,.more > summary:active::after{color:var(--cy-2);border-color:var(--cy);background:var(--acc-bg)}
.more > summary:active{background:var(--surface-2)}
.repo,.pl,.btn,.links a,.cert summary,.fold > summary{
  border-color:var(--line);background:transparent;color:var(--txt);
}
.repo:hover,.pl:hover,.pl:focus-visible,.btn:hover,.links a:hover{border-color:var(--cy);background:var(--acc-bg);color:var(--cy-2)}
.repo b{color:var(--txt)}
.repo:hover b{color:var(--cy-2)}
.repo i,.vid-meta i{color:var(--dim-2)}
.mail{color:var(--txt);border-bottom-color:var(--acc-line)}
.mail:hover{color:var(--cy-2);border-color:var(--cy)}
.plain{border-left-color:var(--acc-line);background:var(--surface)}

/* video and photo frames on paper */
.vid-frame{border-color:var(--line)}
.vid-frame.ph-frame{border-color:var(--line)}
.vid-frame:hover,.ph-frame:hover{border-color:var(--cy)}
.vid-out:hover,.vid-out:focus-visible{color:var(--cy-2)}

/* the log replay plate */
.term{box-shadow:0 18px 40px -26px rgba(20,24,30,.45)}

@media (max-width:860px){
  .rig-stage{background-color:#ffffff}
}
@media (max-width:640px){
  .mark{background:linear-gradient(90deg,var(--bg) 62%,transparent)}
}