/* toolforge.ai — JOURNAL
   Shared stylesheet for /blog/ (index + entries). The apex page inlines its CSS because
   its H1 is the LCP element and a blocking stylesheet would sit on that path; the journal
   pages are text pages behind a warm same-origin connection, so one shared file is the
   right trade — it keeps four pages from drifting apart.

   Everything below is lifted from index.html's drawing-set idiom: same variables, same
   self-hosted Geist, same sheet chrome. Font paths are ../assets/ because this file lives
   one directory down. */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/geist-latin.19f9c925.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/geist-latin-ext.824f485b.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/geist-mono-latin.684ad5b5.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/geist-mono-latin-ext.1a189eb9.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Metric-matched fallbacks — same measured ratios as the apex page, so the webfont swap
   produces no layout shift here either. */
@font-face{font-family:'Geist Fallback';src:local('Roboto');size-adjust:103.34%;ascent-override:97.25%;descent-override:28.55%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback A';src:local('Arial');size-adjust:100.73%;ascent-override:99.77%;descent-override:29.29%;line-gap-override:0%}
@font-face{font-family:'Geist Mono Fallback';src:local('Roboto Mono'),local('Courier New'),local('DejaVu Sans Mono');size-adjust:100%;ascent-override:100.50%;descent-override:29.50%;line-gap-override:0%}

:root{
  --desk:#0D0F12;--sheet:#111417;--bar-a:#2A3138;--bar-b:#232930;
  --tx:#F4F3EF;--hover:#FFC400;--signal-tx:#FFC400;
  --a12:rgba(244,243,239,0.12);--a18:rgba(244,243,239,0.18);--a22:rgba(244,243,239,0.22);
  --a3:rgba(244,243,239,0.3);--a35:rgba(244,243,239,0.35);--a4:rgba(244,243,239,0.4);
  --a45:rgba(244,243,239,0.45);--a5:rgba(244,243,239,0.5);--a55:rgba(244,243,239,0.55);
  --a6:rgba(244,243,239,0.6);--a7:rgba(244,243,239,0.7);--a72:rgba(244,243,239,0.72);
  --a75:rgba(244,243,239,0.75);--a8:rgba(244,243,239,0.8);--a82:rgba(244,243,239,0.82);
  --a85:rgba(244,243,239,0.85);
  --mast-h:54px;
}
:root[data-theme="light"]{
  --desk:#e7e3d8;--sheet:#F4F3EF;--bar-a:#b9b3a3;--bar-b:#cbc5b6;
  --tx:#111417;--hover:#C8102E;--signal-tx:#8f6b00;
  --a12:rgba(17,20,23,0.12);--a18:rgba(17,20,23,0.2);--a22:rgba(17,20,23,0.24);
  --a3:rgba(17,20,23,0.35);--a35:rgba(17,20,23,0.4);--a4:rgba(17,20,23,0.5);
  --a45:rgba(17,20,23,0.55);--a5:rgba(17,20,23,0.58);--a55:rgba(17,20,23,0.62);
  --a6:rgba(17,20,23,0.66);--a7:rgba(17,20,23,0.74);--a72:rgba(17,20,23,0.76);
  --a75:rgba(17,20,23,0.78);--a8:rgba(17,20,23,0.84);--a82:rgba(17,20,23,0.85);
  --a85:rgba(17,20,23,0.88);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--tx);font-family:Geist,'Geist Fallback','Geist Fallback A',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--signal-tx)}
.mono{font-family:'Geist Mono','Geist Mono Fallback',monospace}
[data-navlink]{background-image:linear-gradient(#C8102E,#C8102E);background-size:0% 2px;background-repeat:no-repeat;background-position:left 100%;transition:background-size 180ms ease-out}
[data-navlink]:hover{background-size:100% 2px}
[data-arrow]{display:inline-block;transition:transform 200ms ease-out}
[data-cta]:hover [data-arrow]{transform:translateX(4px)}
.cta{background:#FFC400;color:#111417;transition:background 180ms ease-out}
.cta:hover{background:#EBB400;color:#111417}

/* ---- MASTHEAD (mirrors index.html: brand · strap · CONTACT · theme icon) ---- */
.mast{height:var(--mast-h);box-sizing:border-box;position:sticky;top:0;z-index:50;background:var(--desk);border-bottom:1px solid var(--a18);display:grid;grid-template-columns:auto 1fr auto auto;align-items:stretch}
/* Explicit columns — the strap hides under 900px, and auto-placement would otherwise
   slide CONTACT into the empty 1fr and open the masthead's free space in the wrong place. */
.mast-brand{grid-column:1;display:flex;align-items:center;gap:12px;padding:14px 22px;border-right:1px solid var(--a18)}
.mast .strap{grid-column:2}
.mast-nav{grid-column:3}
.mast .tgl{grid-column:4}
.mast-brand .dot{width:11px;height:11px;background:#C8102E;display:inline-block}
.mast-brand .wm{font-weight:800;letter-spacing:-0.01em;font-size:17px}
.strap{display:flex;align-items:center;padding:14px 22px;font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10.5px;letter-spacing:0.22em;color:var(--a55);overflow:hidden;white-space:nowrap}
.mast-nav{display:flex;align-items:center;padding:14px 22px;border-left:1px solid var(--a18);font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:11px;letter-spacing:0.18em}
.tgl{background:none;border:none;border-left:1px solid var(--a18);cursor:pointer;color:var(--tx);display:flex;align-items:center;justify-content:center;padding:14px 20px}
.tgl:hover{color:var(--hover)}
/* Material Symbols Outlined light_mode / dark_mode, inlined as paths — see index.html. */
.tgl svg{display:block;width:20px;height:20px;fill:currentColor;transition:transform 220ms ease-out}
.tgl:hover svg{transform:rotate(18deg)}
:root[data-theme="dark"] .ico-moon,:root[data-theme="light"] .ico-sun{display:none}

/* ---- SHEET CHROME ---- */
.wrap{max-width:1440px;margin:0 auto;padding:22px clamp(10px,2vw,28px);display:flex;flex-direction:column;gap:22px}
.sheet{border:1px solid var(--a22);background:var(--sheet)}
.sheet-head{display:grid;grid-template-columns:auto 1fr auto auto;border-bottom:1px solid var(--a22);font-family:'Geist Mono','Geist Mono Fallback',monospace}
.sheet-head .idx{padding:12px 20px;border-right:1px solid var(--a22);font-size:20px;font-family:Geist,'Geist Fallback','Geist Fallback A',sans-serif;font-weight:800;transition:color 200ms ease-out}
.sheet:hover .idx{color:#C8102E}
.sheet-head .ttl{padding:16px 20px;font-size:11px;letter-spacing:0.2em;color:var(--a7);align-self:center}
.sheet-head .ref{padding:16px 20px;border-left:1px solid var(--a22);font-size:11px;letter-spacing:0.16em;color:var(--a45);align-self:center}
.sheet-body{padding:clamp(40px,6vw,88px) clamp(20px,4vw,64px)}
.rule{display:flex;align-items:center;gap:14px;margin:0 0 34px}
.rule .cap{width:1px;height:14px;background:var(--a5)}
.rule .ln{flex:1;height:1px;background:var(--a3)}
.rule .lbl{font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10.5px;letter-spacing:0.2em;color:var(--a55);white-space:nowrap}

/* ---- INDEX: ENTRY ROWS ---- */
.entry{display:grid;grid-template-columns:96px 1fr auto;gap:0 clamp(18px,3vw,44px);align-items:start;padding:clamp(22px,2.6vw,32px) clamp(18px,2.6vw,30px);border-bottom:1px solid var(--a12);transition:background 180ms ease-out}
.entry:last-child{border-bottom:none}
.entry:hover{background:var(--a12)}
.entry:hover .earrow{color:var(--signal-tx);transform:translateX(4px)}
.entry:hover .etitle{color:var(--signal-tx)}
.ecode{font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10.5px;letter-spacing:0.18em;color:var(--a45);line-height:1.9;padding-top:5px}
.ecode .on{color:var(--a7)}
.etitle{margin:0 0 10px;font-weight:800;font-size:clamp(21px,2.3vw,32px);line-height:1.12;letter-spacing:-0.028em;transition:color 200ms ease-out}
.edek{margin:0;max-width:62ch;font-size:clamp(15px,1.15vw,16.5px);line-height:1.65;color:var(--a72)}
.emeta{margin-top:14px;font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10px;letter-spacing:0.18em;color:var(--a45)}
.earrow{align-self:center;font-weight:800;font-size:20px;color:var(--a4);transition:transform 200ms ease-out,color 200ms ease-out}

/* ---- ARTICLE ----
   Two columns above 1000px: the reading measure stays at ~70ch (wider than that and the
   eye loses the line), and the space that would otherwise sit empty to its right carries
   the entry ledger. Below 1000px the rail drops out entirely rather than squeezing. */
.artwrap{display:flex;gap:clamp(36px,4.5vw,72px);align-items:flex-start}
.rail{flex:0 0 250px;position:sticky;top:calc(var(--mast-h) + 22px)}
.rail .card{border:1px solid var(--a22)}
.rail .chead{display:flex;justify-content:space-between;font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10.5px;letter-spacing:0.18em;color:var(--a6);padding:12px 15px;border-bottom:1px solid var(--a22)}
.rail .crow{display:flex;justify-content:space-between;gap:14px;font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10.5px;letter-spacing:0.12em;padding:10px 15px;color:var(--a75)}
.rail .crow span:first-child{color:var(--a45);white-space:nowrap}
.rail .clist{border-top:1px solid var(--a22)}
.rail .clist a{display:block;padding:13px 15px;border-bottom:1px solid var(--a12);font-size:13.5px;line-height:1.4;font-weight:600;letter-spacing:-0.01em;color:var(--a75);transition:background 160ms ease-out,color 160ms ease-out}
.rail .clist a:last-child{border-bottom:none}
.rail .clist a:hover{background:var(--a12);color:var(--signal-tx)}
@media (max-width:1000px){.rail{display:none}}

.art{flex:1 1 640px;min-width:0;max-width:70ch;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.72;color:var(--a82)}
.art p{margin:0 0 22px}
.art h2{margin:44px 0 18px;font-weight:800;font-size:clamp(23px,2.5vw,34px);line-height:1.12;letter-spacing:-0.03em;color:var(--tx)}
.art h2:first-child{margin-top:0}
.art strong{color:var(--tx);font-weight:700}
.art ul{margin:0 0 22px;padding-left:0;list-style:none}
.art li{position:relative;padding-left:26px;margin-bottom:12px}
.art li::before{content:"";position:absolute;left:0;top:0.62em;width:9px;height:1px;background:#C8102E}
.art .lede{font-size:clamp(19px,1.7vw,24px);line-height:1.5;color:var(--tx);font-weight:500;letter-spacing:-0.012em;margin-bottom:30px}
.pull{margin:38px 0;padding:0 0 0 clamp(20px,2.4vw,30px);border-left:2px solid #C8102E;font-weight:800;font-size:clamp(20px,2.1vw,29px);line-height:1.18;letter-spacing:-0.028em;color:var(--tx)}
.callout{margin:34px 0;border:1px solid var(--a22);padding:clamp(20px,2.4vw,30px)}
.callout .clbl{font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10px;letter-spacing:0.22em;color:var(--signal-tx);margin-bottom:12px}
.callout p{margin:0;font-size:15.5px;line-height:1.65;color:var(--a75)}
.artfoot{margin-top:clamp(44px,5vw,72px);padding-top:28px;border-top:1px solid var(--a22);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}

.foot{border-top:1px solid var(--a18);padding:20px clamp(20px,4vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.foot .fl{display:flex;align-items:center;gap:12px}
.foot .fdot{width:10px;height:10px;background:#C8102E;display:inline-block}
.foot .ft{font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10.5px;letter-spacing:0.2em;color:var(--a6)}
.foot .fr{font-family:'Geist Mono','Geist Mono Fallback',monospace;font-size:10.5px;letter-spacing:0.2em;color:var(--a4)}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 600ms ease-out,transform 600ms ease-out}
[data-reveal].seen{opacity:1;transform:none}

@media (max-width:900px){.strap{display:none}}
/* The rule label is white-space:nowrap so the hairlines meet it cleanly on wide screens.
   On a phone that makes it a 370px unbreakable box that pushed the page to 429px wide at
   every viewport. Same fix the apex applies to .dimlabel: let it wrap and centre. */
@media (max-width:640px){.rule .lbl{white-space:normal;text-align:center}}
@media (max-width:760px){
  .entry{grid-template-columns:1fr auto;gap:0 18px}
  .ecode{grid-column:1/-1;padding-top:0;margin-bottom:12px;line-height:1.7}
  .ecode br{display:none}
  .ecode .on::after{content:" · "}
}
/* Sheet head is idx | title | aux-ref | page-ref. Below 560px the aux ref (3rd cell) is
   dropped and the remaining cells give up padding + letter-spacing, otherwise the head is
   ~373px wide and pushes the page sideways on a 320px phone.
   NB: this was `.ref:first-of-type`, which never matched — every head cell is a <div>, so
   :first-of-type resolved to .idx, not to the first .ref. Positional nth-child is correct. */
@media (max-width:560px){
  .sheet-head>div{min-width:0}
  .sheet-head>div:nth-child(3){display:none}
  .sheet-head .idx{padding:10px 12px}
  .sheet-head .ttl{padding:12px 12px;letter-spacing:0.12em}
  .sheet-head .ref{padding:12px 12px;letter-spacing:0.1em}
}
@media (max-width:520px){
  .mast-nav{padding-left:13px;padding-right:13px;font-size:10px;letter-spacing:0.1em}
  .tgl{padding-left:13px;padding-right:13px}
  .artfoot{flex-direction:column;align-items:flex-start}
}
@media (max-width:400px){
  .mw-relax{min-width:0 !important}
  .mast-brand{padding-left:13px;padding-right:13px;gap:9px}
  .mast-brand .wm{font-size:15px}
  .mast-nav,.tgl{padding-left:10px;padding-right:10px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}[data-reveal]{opacity:1;transform:none}}