@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=IBM+Plex+Mono:wght@400;600;700&display=swap');
/* The Side Quest — shared inner-page chrome (design system): a left-rail window
   frame on the dot-grid ground, with the hard bevel/well/lamp depth system.
   Loaded by blog/, tools/, incubator/, contact/. Page-specific layout is inline. */
:root{--bg:#0b0d1a;--panel:#1e2650;--ink:#e6ded0;--ink2:#bab19f;--muted:#8c8578;--border:#3d4270;--accent:#2f9d94;
--display:"Big Shoulders Display","Haettenschweiler",Impact,sans-serif;--serif:Georgia,"Times New Roman",serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
--link:#8f8fff;--visited:#bd8cf5;--hit:#d69a26;--mark:#f04a36;--mark2:#f0a828;--bevel:#5f6aa8;--sink:#070914;--shadow:#04060f;
--raise:inset 2px 2px 0 var(--bevel),inset -2px -2px 0 var(--shadow),4px 4px 0 var(--shadow);
--raise-lg:inset 2px 2px 0 var(--bevel),inset -2px -2px 0 var(--shadow),7px 7px 0 var(--shadow);
--well:inset 2px 2px 0 var(--shadow),inset -2px -2px 0 var(--bevel);
--lamp:inset 2px 2px 0 var(--shadow),inset -2px -2px 0 var(--bevel),0 0 9px -1px var(--hit)}
*{box-sizing:border-box}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
a:visited{color:var(--visited)}a:hover{color:var(--accent)}a:focus-visible{outline:2px solid var(--hit);outline-offset:2px}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);background-image:radial-gradient(rgba(95,106,168,.13) .5px,transparent .5px);background-size:4px 4px;background-attachment:fixed;color:var(--ink);font-family:var(--serif);line-height:1.5;-webkit-font-smoothing:antialiased}
.shell{max-width:1080px;margin:0 auto;padding:26px clamp(14px,3vw,30px) 60px}

/* page hero — gives inner pages the homepage's scale before the frame starts */
.phead{margin:0 0 22px}
.phead .eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 10px}
.phead h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,7vw,4.2rem);line-height:.96;letter-spacing:-.005em;margin:0 0 12px;color:#f3f3f7;
  text-shadow:-1px 0 0 var(--sink),1px 0 0 var(--sink),0 -1px 0 var(--sink),0 1px 0 var(--sink),3px 3px 0 #000}
.phead h1 em{font-style:normal;color:var(--accent)}
.phead .lede{font-family:var(--serif);font-size:1.06rem;line-height:1.6;color:var(--ink2);margin:0;max-width:62ch}
.phead .lede a{text-decoration:underline;text-underline-offset:2px}
.phead .rule{border-top:1px solid var(--shadow);border-bottom:1px solid var(--bevel);height:2px;margin:20px 0 0}
@media(max-width:680px){.phead{margin-bottom:18px}}

/* window frame */
.frame{border:1px solid var(--shadow);background:var(--panel);box-shadow:var(--raise-lg)}
.band{height:6px;background:var(--mark)}
.cols{display:grid;grid-template-columns:168px 1fr}
.rail{border-right:1px solid var(--shadow);box-shadow:inset -1px 0 0 var(--bevel);padding:14px 13px;display:flex;flex-direction:column;gap:12px}
.rail .word{font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1.04;margin:0;text-shadow:-1px 0 0 var(--sink),1px 0 0 var(--sink),0 -1px 0 var(--sink),0 1px 0 var(--sink),2px 2px 0 #000}
.rail .word a{color:inherit;text-decoration:none}
.rail .word em{display:block;font-style:normal;color:var(--accent)}
.rail nav{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:.8rem}
.rail nav a{text-decoration:none;color:var(--link);padding:2px 5px}
.rail nav a.nav-cta{font-size:.76rem;padding:3px 8px;line-height:1.2;letter-spacing:.04em;
  color:#0a1a0e!important;background:#43e07a;font-weight:700;
  box-shadow:0 0 0 1px rgba(4,6,15,.75),0 0 10px 1px rgba(67,224,122,.42);animation:sq-cta-glow 2.6s ease-in-out infinite}
.rail nav a.nav-cta:hover{color:#0a1a0e!important;filter:brightness(1.06)}
@keyframes sq-cta-glow{0%,100%{background:#43e07a}50%{background:#f0a828}}
@media(prefers-reduced-motion:reduce){.rail nav a.nav-cta{animation:none}}
.rail nav a.here{color:var(--ink);text-decoration:none;cursor:default;background:var(--sink);box-shadow:var(--well)}
.rail .stamp{font-family:var(--mono);font-size:.58rem;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hr{border-top:1px solid var(--shadow);box-shadow:0 1px 0 var(--bevel)}

/* directory index (blog + tools) */
.idx{border:1px solid var(--shadow);background:var(--sink);box-shadow:var(--well);margin:0}
.idx .cap{font-family:var(--mono);font-size:.66rem;color:var(--ink);background:var(--panel);padding:6px 10px;border-bottom:1px solid var(--shadow);box-shadow:inset 0 1px 0 var(--bevel);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.idx .cap b{color:var(--accent);font-weight:700}
.idx .cap span{color:var(--muted);font-size:.6rem}
.row{display:grid;grid-template-columns:34px 150px 1fr;gap:10px;padding:7px 10px;font-family:var(--mono);font-size:.7rem;align-items:baseline;border-bottom:1px solid rgba(4,6,15,.7);box-shadow:0 1px 0 rgba(95,106,168,.16)}
.row:last-child{border:0;box-shadow:none}
.row .n{color:var(--mark2);font-variant-numeric:tabular-nums}
.row a{text-decoration:none}.row a:hover{text-decoration:underline}
.row .d{color:var(--ink2);font-family:var(--serif);font-size:.9rem;line-height:1.45}

.foot{border-top:1px solid var(--shadow);box-shadow:inset 0 1px 0 var(--bevel);padding:10px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.foot a{display:inline-flex;align-items:center;min-height:34px}
.count{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#fbe4b0;background:#2b1f06;border:1px solid var(--hit);padding:2px 7px;box-shadow:var(--lamp);text-shadow:0 0 6px var(--hit)}

@media(max-width:680px){
  .cols{grid-template-columns:1fr}
  .rail{border-right:0;box-shadow:inset 0 -1px 0 var(--bevel);border-bottom:1px solid var(--shadow)}
  .rail nav{flex-direction:row;flex-wrap:wrap;gap:6px 10px}
  .row{grid-template-columns:30px 1fr;gap:6px}
  .row .d{grid-column:1/-1;margin-left:36px}
}

/* ── Not built yet ──────────────────────────────────────────────────────
   Roadmap policy: anything not actually functional is either removed to its
   own feature branch, or left visible but plainly marked. This is the marker.
   Content inside is dimmed, desaturated and inert — it reads as a preview of
   the idea, never as something you can use. */
.soon{position:relative;isolation:isolate}
.soon > *:not(.soon-tag){opacity:.42;filter:grayscale(.75);pointer-events:none;user-select:none}
.soon-tag{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mark2);
  background:var(--sink);border:1px solid var(--mark2);padding:3px 8px;box-shadow:2px 2px 0 var(--shadow)}
.soon-note{font-family:var(--mono);font-size:.64rem;line-height:1.6;color:var(--muted);margin:10px 0 0}
.soon-note b{color:var(--ink2);font-weight:400}
@media(prefers-reduced-motion:reduce){.soon > *:not(.soon-tag){filter:none}}

/* ── Touch targets ──────────────────────────────────────────────────────
   Measured on a 375px viewport: rail nav links were 23px tall, sidebar and
   "elsewhere" links as low as 16px. Apple asks for 44px, Google for 48dp.
   Scoped to coarse pointers so mouse layouts keep their tighter rhythm. */
@media (pointer:coarse),(max-width:680px){
  /* NB: no display:flex here — the section-mark width reserve is a ::before block,
     and flex would make it a sibling item and double the link width. */
  .rail nav a{min-height:44px;padding:12px 8px}
  .box .in a,.elsewhere a,.foot a{min-height:44px;padding:11px 0}
  .box .in.wrap{gap:8px}
  .tagx{min-height:38px;display:inline-flex;align-items:center;padding:2px 10px}
  .row a{min-height:40px;display:inline-flex;align-items:center}
  .loot a,.loot span{min-height:44px}
  .idea__title h3 a{min-height:40px;display:inline-flex;align-items:center}
  .cmt a,.addc{min-height:44px}
}