/* Shared writeup styles.
   Previously duplicated inline in all 6 writeup pages - 6521 bytes copied 6 times.
   One file means one place to fix a bug, and the browser caches it once. */
/* Self-hosted: the writeups previously pulled these from
       fonts.googleapis.com, a render-blocking third-party request. Both
       families are OFL licensed and now come from our own origin. */
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-condensed-400.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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/barlow-condensed-800.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:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-400.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}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-mono); line-height: 1.8; padding: 0; }
.wr-header { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 100; }
.wr-back { color: var(--accent-strong); text-decoration: none; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.wr-pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:3rem auto 0;max-width:900px;padding:1.2rem 2rem;border-top:1px solid var(--border)}
.wr-pager a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-decoration:none;color:var(--accent-strong)}
.wr-pager a:hover{color:var(--text)}
.wr-pager-hub{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
@media (max-width:600px){.wr-pager{padding:1.2rem}.wr-pager a{font-size:.72rem}}
.wr-ref{color:var(--accent-strong);text-decoration:none;border-bottom:1px dotted currentColor}
.wr-ref:hover{color:var(--text);border-bottom-style:solid}
.wr-back:hover { color: var(--text); }
.wr-header-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text2); }
.wr-hero { padding: 3rem 2rem 2rem; max-width: 860px; margin: 0 auto; }
.wr-platform-tag { display: inline-block; background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.2); color: var(--accent); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 2px; margin-bottom: 1rem; }
.wr-title { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.wr-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.wr-badge { font-size: .72rem; padding: .25rem .7rem; border-radius: 2px; font-family: var(--font-mono); }
.wr-badge.category { background: rgba(0,212,255,.08); color: var(--accent); border: 1px solid rgba(0,212,255,.15); }
.wr-summary-row { display: flex; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .8rem; }
.wr-summary-row:last-child { border-bottom: none; }
.wr-summary-key { color: var(--accent); min-width: 120px; flex-shrink: 0; }
.wr-summary-val { color: var(--text); font-family: var(--font-mono); }
.wr-body { max-width: 860px; margin: 0 auto; padding: 0 2rem 4rem; }
.wr-phase-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); border-left: 3px solid var(--accent); padding-left: .8rem; margin-bottom: 1.2rem; }
.wr-h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text2); margin: 1.5rem 0 .6rem; }
.wr-p { font-size: .85rem; color: var(--text2); margin-bottom: .9rem; line-height: 1.8; }
.wr-p strong { color: var(--text); }
.wr-code { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 1rem 1.2rem; margin: .8rem 0 1.2rem; font-family: var(--font-mono); font-size: .78rem; color: var(--accent2); overflow-x: auto; white-space: pre; line-height: 1.6; }
.wr-inline-code { background: var(--surface); border: 1px solid var(--border); color: var(--accent); padding: .1rem .4rem; border-radius: 2px; font-size: .82em; }
.wr-table th { background: var(--surface); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; padding: .5rem .8rem; text-align: left; border: 1px solid var(--border); font-size: .72rem; }
.wr-table td { padding: .5rem .8rem; border: 1px solid var(--border); color: var(--text2); }
.wr-table tr:hover td { background: rgba(255,255,255,.02); }
.wr-footer { text-align: center; padding: 2rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text3); }
.wr-footer a { color: var(--accent); text-decoration: none; }
@media (max-width: 600px) {
      .wr-hero, .wr-body { padding-left: 1.2rem; padding-right: 1.2rem; }
      .wr-header { padding: 1rem 1.2rem; }
      .wr-summary-row { flex-direction: column; gap: .1rem; }
      .wr-summary-key { min-width: 0; }
    }

/* Key Takeaways was an inline 2-col grid in five writeups; at 320px the second
   column was squeezed past its min-content width and pushed the page 12px wide. */
.wr-takeaways{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.8rem}
@media (max-width:600px){.wr-takeaways{grid-template-columns:1fr}}

/* skip-link: the six writeup pages are the longest documents on the site and
   had no way to bypass the header. Matches hub.css so the focus ring, colour
   and position are identical wherever a reader meets it. */
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;top:0;left:0;z-index:100;background:var(--accent);color:#04121a;padding:.6rem 1rem;font-weight:700;text-decoration:none}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal}

/* Reduced motion. site.css has this; writeup.css did not, and the six writeup
   pages load ONLY this file - no site.css, and no inline block like the hubs
   carry. Nothing here animates today, so this is pre-emptive: the guard is in
   place the first time an animation is added, not remembered afterwards. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}