/* joshuawilliamson.net — Budokai 3 status screen.
   Single-theme by design: dark is settled, so every colour is painted
   explicitly and there is no light variant to fall back to. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0b1660;overflow-x:hidden}
:focus-visible{outline:2px solid #ffd45e;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

#site{
  --deep:#0b1660;--mid:#1c3ab4;--bright:#4468e8;--panel:rgba(22,52,160,.52);
  --card:#2b7fa6;--card-2:#1f6a90;--edge:#8ed3ff;--edge-soft:rgba(142,211,255,.38);
  --orange:#f5901e;--orange-lt:#ffb547;--gold-lt:#ffd45e;
  --mtn-fill:#ffe14d;--mtn-stroke:#8a6a00;--mtn-ink:#3a2c00;--mtn-text:#ffe98a;
  --ink:#ffffff;--ink-2:#bcd4ff;--ink-3:#8fa9e8;--empty:#132a7d;
  --y0:#101f63;--y1:#24409f;--y2:#3f6bcf;--y3:#6f9df0;--y4:#f5901e;--y5:#ffcb5c;
  --face:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --pad:clamp(14px,2.6vw,26px);--radius:16px;
  --stroke:0 2px 0 rgba(6,12,52,.85),0 -1px 0 rgba(6,12,52,.6),1px 0 0 rgba(6,12,52,.6),-1px 0 0 rgba(6,12,52,.6);
  background:var(--deep);
  background-image:radial-gradient(105% 80% at 50% 22%,var(--bright) 0%,var(--mid) 30%,var(--deep) 76%);
  color:var(--ink);font-family:var(--face);font-size:15px;line-height:1.45;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  position:relative;overflow:hidden;min-height:100vh;
}
#site .rail{position:absolute;top:0;bottom:0;width:clamp(12px,2.6vw,30px);z-index:2;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 26V4h18v13H10v-7h8' fill='none' stroke='%237a3d02' stroke-width='2.6'/%3E%3C/svg%3E"),
    linear-gradient(90deg,#c97f10,var(--gold-lt) 45%,#c97f10);
  background-size:26px 26px,100% 100%;background-repeat:repeat-y,no-repeat;
  box-shadow:inset 0 0 0 1px rgba(120,60,0,.4)}
#site .rail.l{left:0}
/* mirrored, so the meander runs outward from the centre on both edges */
#site .rail.r{right:0;transform:scaleX(-1)}
#site .screen{max-width:1180px;margin:0 auto;
  padding:clamp(16px,3vw,30px) clamp(30px,5.5vw,64px) 60px;
  display:flex;flex-direction:column;gap:var(--pad)}
#site .plate{border:2px solid var(--edge);border-radius:var(--radius);background:var(--panel);
  padding:14px clamp(16px,3vw,26px);display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 22px;
  box-shadow:0 0 0 1px rgba(6,12,52,.5),inset 0 1px 0 rgba(255,255,255,.14)}
#site h1{margin:0;font-size:clamp(25px,4.4vw,38px);line-height:1;color:var(--edge);
  text-shadow:var(--stroke);font-weight:700}
#site .nav{display:flex;flex-wrap:wrap;gap:8px}
#site .nav a{display:block;text-decoration:none;border:2px solid var(--edge-soft);border-radius:11px;
  background:linear-gradient(180deg,rgba(43,127,166,.85),rgba(31,106,144,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);padding:6px 15px;font-size:13.5px;font-weight:700;
  color:#eaf7ff;text-shadow:var(--stroke);cursor:pointer}
#site .nav a:hover,#site .nav a:focus-visible{background:linear-gradient(180deg,#ffc06a,var(--orange));
  border-color:var(--gold-lt);color:#3a1c00;text-shadow:none;outline:none}
#site .split{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--pad);align-items:start}
#site .portrait{position:relative;border:2px solid var(--edge);border-radius:var(--radius);
  background:var(--panel);padding:14px;display:grid;grid-template-columns:auto auto;gap:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden}
#site .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 42% at 62% 40%,rgba(190,225,255,.42) 0%,rgba(120,180,255,.15) 44%,transparent 72%)}
#site .portrait{grid-template-columns:auto}
#site .ycol{display:flex;flex-direction:column;gap:8px;align-items:center;position:relative}
#site .yhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;padding:0 2px}
#site .yhead .yr{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:.05em;line-height:1;
  background:linear-gradient(180deg,#fff2c0,var(--gold-lt) 45%,#d88a10);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(6,12,52,.9)) drop-shadow(0 0 8px rgba(255,190,60,.35))}
#site .yhead .ysub{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700}
#site .ybody{display:grid;grid-template-columns:auto auto;gap:3px 6px;align-items:start}
#site .ycorner{display:block}
#site .ymonths{display:grid;gap:2px}
#site .ymonths span{width:10px;text-align:center;font-size:8px;font-weight:700;color:var(--ink-3)}
#site .ymonths span.sol{color:var(--gold-lt)}
#site .ydays{display:grid;gap:2px}
#site .ydays span{height:10px;line-height:10px;text-align:right;font-size:7px;font-weight:700;
  color:#5f7ec4;font-variant-numeric:tabular-nums}
#site .ydays span.wk{color:var(--gold-lt)}
#site .ygrid{display:grid;gap:2px}
#site .yc{width:10px;height:10px;border-radius:1px;background:var(--y0)}
/* Year Day belongs to no month and no week, so it is drawn outside the rectangle. */
#site .yextra{display:flex;align-items:center;gap:7px;align-self:flex-end;padding-right:2px}
#site .yextra .lab{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-lt)}
#site .yextra .yc{box-shadow:inset 0 0 0 1px var(--gold-lt)}
#site .yc.sprint{box-shadow:inset 0 0 0 1px var(--gold-lt)}
#site .yc.sprint.future{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,212,94,.45)}

/* --- the Now panel --- */
#site .lbl2{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-bottom:9px}
/* --- Questions: the one place prose is allowed, and it starts folded --- */
#site .faq details{border-bottom:1px solid rgba(142,211,255,.18)}
#site .faq details:last-of-type{border-bottom:0}
#site .faq summary{list-style:none;cursor:pointer;padding:10px 2px 10px 26px;position:relative;
  font-size:14px;font-weight:700;color:#eaf7ff;text-shadow:var(--stroke)}
#site .faq summary::-webkit-details-marker{display:none}
#site .faq summary::before{content:"▸";position:absolute;left:4px;top:10px;
  color:var(--gold-lt);font-size:12px;transition:transform .2s ease;display:inline-block}
#site .faq details[open] summary::before{transform:rotate(90deg)}
#site .faq summary:hover{color:var(--gold-lt)}
#site .faq summary:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;border-radius:6px}
#site .faq details p{margin:0 0 12px;padding-left:26px;font-size:13.5px;line-height:1.65;
  color:var(--ink-2);max-width:74ch}
#site .faq details p b{color:#fff}
#site .faq .keys span{font-size:10.5px;color:var(--ink-3)}
#site .faq .phtag{margin-top:12px;display:inline-block}

#site .about{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:66ch}
#site .about + .phtag{margin-top:9px}

/* "Current interest:" is the <PULLFROMNOWPAGE> slot from his brainstorm — so it IS the link
   to the Now page. Keeps Now reachable without putting a second item in the nav. */
#site .aboutnow{margin:9px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:66ch}
#site .aboutnow a{color:var(--gold-lt);text-decoration:none;
  border-bottom:1px solid rgba(255,212,94,.4);padding-bottom:1px}
#site .aboutnow a:hover,#site .aboutnow a:focus-visible{color:var(--orange-lt);
  border-bottom-color:var(--orange-lt)}
/* The AI declaration — his line, verbatim. Set apart because it's a position, not a fact. */
#site .aidecl{margin:14px 0 0;padding:10px 14px;max-width:72ch;font-size:13px;line-height:1.58;
  color:var(--ink-2);border-left:3px solid var(--orange);border-radius:0 8px 8px 0;
  background:linear-gradient(90deg,rgba(245,144,30,.11),rgba(245,144,30,0))}
#site .aidecl b{color:var(--orange-lt);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:11px;margin-right:5px}

/* ---- now.html ------------------------------------------------------------
   Same plate, rails and panes as the front. No radar, no grid: a Now page is
   prose and lists, so it gets a single readable column instead of the split. */
#site .homelink{color:inherit;text-decoration:none}
#site .homelink:hover,#site .homelink:focus-visible{color:var(--gold-lt)}
#site .nowwrap{display:flex;flex-direction:column;gap:var(--pad);
  max-width:1020px;margin:0 auto;padding:0 var(--pad) calc(var(--pad) * 1.6)}
#site .nowstamp{margin-left:auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
#site .nowintro{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2);max-width:72ch}
#site .nowcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--pad)}
#site .nowlist{margin:0;padding:0;list-style:none}
#site .nowlist li{position:relative;padding:5px 0 5px 18px;font-size:13.5px;line-height:1.55;
  color:var(--ink-2);border-bottom:1px solid rgba(142,211,255,.12)}
#site .nowlist li:last-child{border-bottom:0}
#site .nowlist li b{color:#fff;font-weight:700}
#site .nowlist li::before{content:"";position:absolute;left:2px;top:1.08em;width:6px;height:6px;
  background:var(--orange);transform:rotate(45deg);box-shadow:0 0 7px rgba(245,144,30,.55)}
/* "considering" is explicitly not a commitment — hollow markers say so without a caption */
#site .nowlist.pending li::before{background:transparent;border:1.5px solid var(--edge-soft);
  box-shadow:none}
#site .logrow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(142,211,255,.14)}
#site .logrow:last-child{border-bottom:0;padding-bottom:0}
#site .logdate{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);
  padding-top:2px}
#site .logbody{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
#site .nowfoot{margin:0;font-size:12px;line-height:1.6;color:var(--ink-3);text-align:center}
#site .nowfoot a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(255,212,94,.35)}
#site .nowfoot a:hover,#site .nowfoot a:focus-visible{color:var(--orange-lt);border-bottom-color:var(--orange-lt)}
@media (max-width:520px){
  #site .logrow{grid-template-columns:1fr;gap:3px}
  #site .nowstamp{margin-left:0;width:100%}
}

#site .sprintchip{display:inline-block;align-self:flex-start;margin-bottom:11px;
  border:1.5px solid var(--gold-lt);border-radius:999px;padding:3px 12px;
  font-size:11px;font-weight:700;color:var(--gold-lt);background:rgba(255,212,94,.09);white-space:normal}
/* true halves; Now sits left with its own header, the CTA balances it right */
#site .nowgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--pad);align-items:stretch;margin-top:var(--pad);
  border-top:1px solid var(--edge-soft);padding-top:var(--pad)}
/* set by main.js when there is no contact address, so the panel doesn't sit
   half-empty where the CTA used to be */
#site .nowgrid.solo{grid-template-columns:1fr}
#site .nowclimb{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#site .nowclimb .mtnrow{width:100%}
#site .mtnrow{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:9px;align-items:center;
  font-size:14px;padding:3px 0}
#site .mtnrow b{color:var(--mtn-text)}
#site .mtnrow .h{color:var(--mtn-text);font-weight:700}
#site .mtnmed{width:24px;height:24px;border-radius:50%;display:grid;place-content:center;
  font-size:13px;font-weight:700;color:var(--mtn-ink);border:1px solid var(--mtn-stroke);
  background:radial-gradient(circle at 34% 28%,#fff8d2,var(--mtn-fill) 62%,var(--mtn-stroke))}
#site .cta{border-left:1px solid var(--edge-soft);padding-left:var(--pad);display:flex;
  flex-direction:column;align-items:flex-start;justify-content:center}
#site .ctacopy{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
#site .nowline{margin:11px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
#site .card{position:relative}
#site .card .hint{position:absolute;left:13px;bottom:9px;font-size:8.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#bfe3ff;opacity:.62;
  text-shadow:0 1px 0 rgba(6,12,52,.8)}
#site .card:hover .hint{opacity:1}

/* Seven orbs in a ring with something summoned in the middle. A summoning
   happens in the dark, so this button goes deep rather than orange — which
   also stops the orbs disappearing into an orange ground. */
#site .ctabtn{display:inline-flex;align-items:center;gap:13px;
  border:2px solid var(--gold-lt);border-radius:13px;
  background:radial-gradient(120% 140% at 22% 40%,#173a86 0%,#0a1c52 55%,#08133c 100%);
  color:var(--gold-lt);font-weight:700;font-size:15px;padding:8px 20px 8px 10px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 0 rgba(6,12,52,.5);
  transition:box-shadow .3s ease,border-color .3s ease}
#site .ctabtn:hover,#site .ctabtn:focus-visible{outline:none;border-color:#fff2c0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 rgba(6,12,52,.5),0 0 22px rgba(255,184,77,.42)}
#site .ctatext{line-height:1.15;text-shadow:var(--stroke);position:relative}
/* reserved by absolute positioning, so revealing it can't nudge the layout */
#site .ctatext .reveal{position:absolute;top:100%;left:0;margin-top:4px;white-space:nowrap;
  font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);text-shadow:none;opacity:0}
#site .ctabtn:hover .reveal,#site .ctabtn:focus-visible .reveal{opacity:1;transition:opacity .3s ease .1s}

#site .balls{display:block}
#site .balls svg{width:74px;height:74px;display:block}
/* One motion, not seven. The ring scales as a single group, so every orb
   moves outward by the same proportion at the same instant — staggering
   them read as scatter rather than as a ring opening. The breath is
   synchronised for the same reason. */
#site .orb{animation:orbpulse 5.2s ease-in-out infinite}
@keyframes orbpulse{0%,100%{opacity:.78}50%{opacity:1}}
#site .ring{transform-origin:44px 44px}

/* Ease IN on hover, snap OUT on leave — the transition lives only on the
   hover rule, so nothing trails the cursor once it has gone. */
#site .ctabtn:hover .ring,#site .ctabtn:focus-visible .ring{
  transform:scale(1.14);transition:transform .34s cubic-bezier(.25,.85,.35,1)}
#site .ray{opacity:.18}
#site .ctabtn:hover .ray,#site .ctabtn:focus-visible .ray{opacity:.55;transition:opacity .3s ease}
#site .core{transform-origin:44px 44px}
#site .ctabtn:hover .core,#site .ctabtn:focus-visible .core{
  transform:scale(1.1);transition:transform .32s ease}
#site .phtag{margin-top:10px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px dashed var(--ink-3);padding:1px 6px}
@media (max-width:900px){#site .nowgrid{grid-template-columns:1fr}
  #site .cta{border-left:0;padding-left:0;border-top:1px solid var(--edge-soft);padding-top:var(--pad)}}
#site .yc.v1{background:var(--y1)}#site .yc.v2{background:var(--y2)}#site .yc.v3{background:var(--y3)}
#site .yc.v4{background:var(--y4)}#site .yc.v5{background:var(--y5)}
#site .yc.none{background:rgba(255,255,255,.07)}
#site .yc.void{background:transparent}
#site .yc.today{box-shadow:0 0 0 2px var(--deep),0 0 0 3px #fff}
/* The kanji is the control; the English reads out above it. */
#site .dialname{font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-lt);text-shadow:var(--stroke);line-height:1}
#site .ylegend{display:flex;align-items:flex-end;gap:5px;color:var(--ink-3)}
#site .ylegend .end{display:flex;flex-direction:column;align-items:center;gap:2px}
#site .ylegend .end i{font-style:normal;font-size:13px;line-height:1;color:var(--ink-2)}
#site .ylegend .end b{font-size:7.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
#site .ylegend .yc{margin-bottom:1px}
#site .ylegend .yc{width:8px;height:8px}
#site .readout{width:100%;max-width:224px;border:1.5px solid var(--edge-soft);border-radius:9px;
  background:rgba(10,20,80,.5);padding:7px 9px;font-size:10.5px;line-height:1.45;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
#site .readout .rd1{color:#fff;font-weight:700;font-size:12px;text-shadow:var(--stroke)}
#site .readout .rd2{color:var(--ink-2);font-weight:700}
#site .readout .rd3{color:var(--gold-lt);font-weight:700}
#site .readout .rdv{color:var(--orange-lt);font-weight:700}

/* --- bead meters on the area rows: the Budokai dial language --- */
#site .rl{grid-template-columns:24px minmax(0,1fr) auto;row-gap:2px}
#site .rl .beads{grid-column:2/4;display:flex;gap:3px;margin-bottom:3px}
#site .bd{width:10px;height:10px;border-radius:50%;background:var(--empty);
  box-shadow:inset 0 0 0 1px rgba(6,12,52,.55);flex:none}
#site .bd.on{background:radial-gradient(circle at 34% 28%,#ffc06a,var(--orange) 60%,#b45f08)}
#site .rl.mtn .bd.on{background:radial-gradient(circle at 34% 28%,#fff8d2,var(--mtn-fill) 62%,var(--mtn-stroke))}
#site .stack{display:flex;flex-direction:column;gap:var(--pad);min-width:0}
#site .radarrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(186px,244px);
  gap:var(--pad);align-items:stretch}
#site .pane{border:2px solid var(--edge);border-radius:var(--radius);background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);padding:14px}
#site .pane h2{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700}
#site .panehead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 14px;margin-bottom:9px}
#site .keys{display:flex;gap:12px;font-size:12px;color:var(--ink-3);white-space:nowrap}
#site .keys i{font-style:normal;display:inline-grid;place-content:center;width:17px;height:17px;
  border-radius:50%;font-size:10px;font-weight:700;vertical-align:-3px;margin-right:4px}
#site .keys .m i{background:var(--mtn-fill);color:var(--mtn-ink);border:1px solid var(--mtn-stroke)}
#site .keys .g i{background:var(--orange);color:#3a1c00;border:1px solid #7d3f04}
#site .radarwrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
#site .radarwrap svg{width:clamp(212px,26vw,272px);height:auto;flex:none}
#site .rlegend{display:flex;flex-direction:column;gap:4px;min-width:0}
#site .rl{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:9px;align-items:center;font-size:13px}
#site .rl .med{width:24px;height:24px;border-radius:50%;display:grid;place-content:center;
  font-size:13px;font-weight:700;color:#3a1c00;
  background:radial-gradient(circle at 34% 28%,#ffc06a,var(--orange) 62%,#b45f08);
  border:1px solid #7d3f04}
#site .rl.mtn .med{color:var(--mtn-ink);border-color:var(--mtn-stroke);
  background:radial-gradient(circle at 34% 28%,#fff8d2,var(--mtn-fill) 62%,var(--mtn-stroke))}
#site .rl .nm{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#site .rl.mtn .nm{color:var(--mtn-text)}
#site .rl .hr{color:var(--orange-lt);font-weight:700}
#site .rl.mtn .hr{color:var(--mtn-text)}
#site circle.med-m{fill:var(--mtn-fill);stroke:var(--mtn-stroke)}
#site text.med-m{fill:var(--mtn-ink)}
#site .cards{display:flex;flex-direction:column;gap:10px;justify-content:space-between}
#site .card{border:2px solid var(--edge-soft);border-radius:13px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  padding:9px 13px;flex:1;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
#site .card .k{font-size:12.5px;color:#eaf7ff;text-shadow:var(--stroke);font-weight:700}
#site .card .v{font-size:clamp(23px,3.1vw,33px);line-height:1;text-align:right;font-weight:700;
  color:#fff;text-shadow:var(--stroke)}
#site .opts{display:inline-flex;border:2px solid var(--edge-soft);border-radius:9px;overflow:hidden}
#site .opts button{appearance:none;background:rgba(10,20,80,.5);border:0;
  border-right:1px solid var(--edge-soft);color:var(--ink-2);font-family:var(--face);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding:5px 9px;
  cursor:pointer;white-space:nowrap}
#site .opts button:last-child{border-right:0}
#site #b-rep-opts button{font-size:13px;letter-spacing:0;padding:4px 11px}
#site #b-rep-opts button[data-rep="avg"]{font-size:10px;letter-spacing:.08em}
#site .opts button[aria-pressed="true"]{background:var(--orange);color:#3a1c00;border-color:var(--gold-lt)}
#site .opts button:hover{color:var(--ink)}
#site .opts button[aria-pressed="true"]:hover{color:#3a1c00}
#site .yc{opacity:0;animation:wake .4s ease-out forwards}
@keyframes wake{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#site .yc{animation:none;opacity:1}}
@media (max-width:900px){
  #site .split{grid-template-columns:1fr}
  #site .portrait{justify-content:center}
  #site .radarrow{grid-template-columns:1fr}
  #site .radarwrap{grid-template-columns:1fr;justify-items:center}
}

/* ---- blog.html + post formats ---------------------------------------------
   Shares the plate, rails and panes with the front page on purpose: a post
   should never feel like a different template bolted on. */
#site .blogwrap,#site .postwrap{display:flex;flex-direction:column;gap:var(--pad);
  max-width:1020px;margin:0 auto;padding:0 var(--pad) calc(var(--pad) * 1.6)}
#site .postwrap{max-width:900px}

/* .ptcard below is shared: it is the post-page title card. The blog picture grid it was
   built for is gone — the capsule tray replaced it 2026-08-12. */
/* THE TITLE CARD */
/* display:block is LOAD-BEARING — .ptcard is a <span>, and an inline box with a border
   fragments that border per line box (rounded caps scattered, no plate) and silently drops
   vertical margins. Do not remove. */
#site .ptcard{display:block;position:relative;z-index:2;margin:-30px 13px 0;padding:11px 14px 13px;
  border:2px solid var(--edge);border-radius:13px;
  background:linear-gradient(180deg,rgba(46,132,172,.97),rgba(19,55,124,.97));
  box-shadow:0 8px 20px rgba(4,9,40,.55),inset 0 1px 0 rgba(255,255,255,.2);
  transition:border-color .2s}
#site .postmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:10.5px;color:#cfe6ff}

/* POST PAGE — same object, bigger. Hero picture, title card under it, body below. */
#site .posthero{display:grid;place-items:center;aspect-ratio:21/9;position:relative;overflow:hidden;
  border:2px solid var(--edge-soft);border-radius:var(--radius);
  background:linear-gradient(135deg,#1f6a90,#1c3ab4 55%,#0b1660);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
#site .posthero .tcmark{font-size:clamp(48px,9vw,86px);font-weight:700;
  color:rgba(255,255,255,.2);text-shadow:var(--stroke)}
#site .posthero .tchint{position:absolute;bottom:10px;right:14px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
#site .ptcard.hero{margin:-44px clamp(14px,4vw,44px) 0;padding:clamp(14px,2.4vw,22px) clamp(16px,2.8vw,26px)}
#site .pmetaline{display:flex;flex-wrap:wrap;gap:8px 16px;margin:11px 0 0;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.18);font-size:11px;color:#cfe6ff}
#site .pmetaline b{color:#fff;font-weight:700}

/* category chips — colour-coded per series so the grid reads at a glance */
#site .pcat{display:inline-block;border-radius:999px;padding:2px 9px;font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
#site .pcat.tue{background:rgba(255,212,94,.18);color:var(--gold-lt);border:1px solid rgba(255,212,94,.5)}
#site .pcat.lodge{background:rgba(142,211,255,.16);color:var(--edge);border:1px solid var(--edge-soft)}
#site .pcat.ai{background:rgba(245,144,30,.18);color:var(--orange-lt);border:1px solid rgba(245,144,30,.5)}
#site .pcat.fit{background:rgba(127,224,176,.15);color:#7fe0b0;border:1px solid rgba(127,224,176,.45)}

/* prose inside a post */
#site .ptitle{margin:7px 0 0;font-size:clamp(21px,3.2vw,31px);line-height:1.24;color:#fff;
  text-shadow:var(--stroke)}
#site .pdek{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:#cfe6ff}
#site .postbody{margin-top:var(--pad)}
#site .postbody > *{max-width:68ch}
#site .postbody p{margin:0 0 15px;font-size:14.5px;line-height:1.72;color:var(--ink-2)}
#site .postbody p:last-child{margin-bottom:0}
#site .postbody p b{color:#fff}
#site .postbody h3{margin:26px 0 10px;font-size:15px;letter-spacing:.05em;color:var(--gold-lt);
  text-shadow:var(--stroke)}
#site .plist{margin:0 0 15px;padding:0;list-style:none}
#site .plist li{position:relative;padding:4px 0 4px 18px;font-size:14px;line-height:1.62;
  color:var(--ink-2)}
#site .plist li::before{content:"";position:absolute;left:2px;top:1em;width:5px;height:5px;
  background:var(--orange);transform:rotate(45deg)}
#site .pquote{margin:20px 0;padding:10px 16px;font-size:15.5px;line-height:1.6;color:#fff;
  border-left:3px solid var(--orange);border-radius:0 8px 8px 0;
  background:linear-gradient(90deg,rgba(245,144,30,.1),rgba(245,144,30,0))}

@media (max-width:640px){
  /* the plate stops overlapping on a phone — at that width the overlap eats the picture */
  #site .ptcard{margin:8px 0 0}
  #site .ptcard.hero{margin:8px 0 0}
}

/* ---- THE TRAY — lifted from the Budokai 3 equipment/capsule menu ----------
   Header pill in light gradient over a blue list panel; rows are hard-outlined
   white text on hairline separators; a capsule hangs off the left edge of each
   row, angled, overlapping the panel border.
   ⚠ Deliberately NOT copied: the Capsule Corp logo and wordmark. The capsule
   SHAPE is a generic pill; the logo is a trademark. Same call as the dragon
   balls -> seven plain orange orbs on the front page. */
#site .tray{--capc:#e0453c;position:relative}
#site .trayhead{position:relative;z-index:3;width:max-content;min-width:210px;margin:0 auto -9px;
  padding:5px 26px;border:2px solid rgba(6,12,52,.6);border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#dfe9f8 58%,#b9caea);
  box-shadow:0 3px 7px rgba(4,9,40,.45),inset 0 1px 0 #fff;
  font-size:14px;font-weight:700;letter-spacing:.04em;color:#12224f;text-align:center}
#site .traylist{border:2px solid #dce9ff;border-radius:9px;overflow:hidden;
  background:linear-gradient(180deg,rgba(38,96,206,.96),rgba(24,64,166,.96));
  box-shadow:0 4px 14px rgba(4,9,40,.4),inset 0 1px 0 rgba(255,255,255,.22)}
#site .trayrow{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:9px 14px 9px 40px;text-decoration:none;
  border-bottom:1px solid rgba(220,233,255,.34);transition:background .15s}
#site .trayrow:last-child{border-bottom:0}
/* the lit row in the reference is simply a lighter blue — no glow, no border change */
#site .trayrow:hover,#site .trayrow:focus-visible{background:rgba(120,180,255,.3);outline:none}
#site .trayname{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:#fff;
  text-shadow:var(--stroke)}
#site .traymeta{font-size:11px;color:#cfe6ff;white-space:nowrap}

/* the capsule: cylinder, coloured top half over off-white, dark outline, nub on
   the end, hung at an angle so it reads as sitting IN the tray rather than drawn on it */
#site .cap{position:absolute;left:6px;top:50%;width:26px;height:13px;
  transform:translateY(-50%) rotate(-30deg);border:1.5px solid rgba(6,12,52,.9);
  border-radius:7px;background:linear-gradient(180deg,var(--capc) 0 50%,#f2f6ff 50% 100%);
  box-shadow:0 2px 4px rgba(4,9,40,.55)}
#site .cap::before{content:"";position:absolute;right:-5px;top:50%;width:5px;height:8px;
  transform:translateY(-50%);border:1.5px solid rgba(6,12,52,.9);border-radius:2px;
  background:var(--capc)}
#site .cap::after{content:"";position:absolute;left:3px;top:2px;width:9px;height:2.5px;
  border-radius:3px;background:rgba(255,255,255,.7)}
/* one colour per category. Grey is the catch-all and is deliberately a light STEEL,
   not a true grey — a desaturated capsule next to saturated ones reads as "disabled"
   rather than "uncategorised". */
#site .c-red{--capc:#e0453c}
#site .c-grn{--capc:#43b64b}
#site .c-yel{--capc:#f2c230}
#site .c-gry{--capc:#aab8d0}

/* legend — teaches the colour code once, so rows never repeat the category name */
#site .traykey{display:flex;flex-wrap:wrap;gap:7px 20px;justify-content:center;
  margin-top:11px;font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
#site .traykey span{display:inline-flex;align-items:center;gap:13px}
#site .traykey .cap{position:static;transform:rotate(-30deg);width:19px;height:10px;
  border-radius:5px;box-shadow:0 1px 3px rgba(4,9,40,.5)}
#site .traykey .cap::before{right:-4px;width:4px;height:6px}
#site .traykey .cap::after{left:2px;top:1.5px;width:6px;height:2px}
@media (max-width:480px){
  #site .trayrow{flex-wrap:wrap;gap:2px 12px}
  #site .traymeta{width:100%}
}