/* Shared chrome for the standalone content pages.
   ---------------------------------------------------------------
   refund-policy, templates/, turnover-package/, spec-reference/,
   field-notes/ - everything that is a page ON the site rather than
   the app itself.

   Extracted once there were more than three copies of the same
   hundred lines, which is the point where they start drifting: the
   footer gains a link on one page and not the others, a colour is
   nudged, and the site quietly stops looking like one thing.

   www/index.html is deliberately NOT refactored to use this. The
   app is one self-contained file with no build step, on purpose,
   and splitting its CSS out would break that for no gain.

   USES THIS FILE:
     www/spec-reference/index.html
     www/field-notes/index.html  (and every article)

   STILL CARRIES ITS OWN INLINE COPY - editing this file will NOT
   change them:
     www/refund-policy.html
     www/templates/index.html
     www/turnover-package/index.html

   Those three were written before this file existed and were left
   alone rather than refactored live without being asked. They are
   mechanical to migrate - delete the duplicated block above their
   page-specific rules, add a link to this file and to
   analytics.js - but until someone does, this list is the thing
   that stops a site-wide change from silently missing half the
   site.

   Page-specific layout stays inline in each page. This file is
   only what is genuinely common. */

:root{
  --bg:#12161a; --bg-panel:#1a2126; --bg-raised:#212a31;
  --border:#333e47; --border-soft:#293138;
  --text:#e8ebed; --text-dim:#8f9aa3; --text-faint:#5f6a73;
  --amber:#f2a73b; --arc:#e8542a; --pass:#4fae7a;
  --font-display:'Oswald',sans-serif; --font-mark:'Bebas Neue',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
a{ color:var(--amber); }
::selection{ background:var(--amber); color:#12161a; }

.seam{
  width:100%; height:14px; opacity:.9; position:relative;
  background-image:repeating-linear-gradient(100deg, transparent 0px, transparent 6px, var(--border) 6px, var(--border) 8px, transparent 8px, transparent 16px);
}
.seam::before{ content:''; position:absolute; top:6px; left:0; right:0; height:1px; background:var(--border-soft); }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
         padding:20px 48px; max-width:1160px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-word{ font-family:var(--font-mark); font-size:26px; letter-spacing:2px; color:var(--text); }
.brand-word span{ color:var(--amber); }

.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text-dim);
            font-family:var(--font-display); font-weight:500; letter-spacing:.5px; text-transform:uppercase;
            font-size:12.5px; padding:9px 16px; border-radius:2px; text-decoration:none; cursor:pointer; }
.btn-ghost:hover{ color:var(--text); }
.btn-primary{ background:var(--amber); color:#161006; border:none; font-family:var(--font-display); font-weight:600;
              letter-spacing:.5px; text-transform:uppercase; font-size:13.5px; padding:14px 28px; border-radius:2px;
              text-decoration:none; display:inline-block; cursor:pointer; }

.wrap{ max-width:920px; margin:0 auto; padding:52px 48px 20px; }
.tag{ font-family:var(--font-mono); color:var(--amber); font-size:12px; letter-spacing:2.5px;
      text-transform:uppercase; display:block; margin-bottom:12px; }
h1{ font-family:var(--font-display); font-size:40px; font-weight:600; margin:0 0 16px; line-height:1.12; }
.lede{ font-size:16.5px; line-height:1.75; color:var(--text-dim); margin:0 0 14px; }
.lede b{ color:var(--text); }

h2.sec{ font-family:var(--font-display); font-size:25px; font-weight:600; margin:46px 0 8px;
        padding-top:24px; border-top:1px solid var(--border-soft); }
.sec-intro{ font-size:14.5px; color:var(--text-dim); line-height:1.75; margin:0 0 20px; }

.callout{ background:var(--bg-panel); border-left:2px solid var(--amber); padding:18px 22px; margin:20px 0 22px; }
.callout p{ margin:0 0 10px; font-size:14px; color:var(--text-dim); line-height:1.7; }
.callout p:last-child{ margin-bottom:0; }
.callout b{ color:var(--text); }

.pitch{ border-top:1px solid var(--border-soft); margin-top:48px; padding-top:32px; }
.pitch h3{ font-family:var(--font-display); font-size:24px; margin:0 0 12px; }
.pitch p{ font-size:15px; color:var(--text-dim); line-height:1.8; margin:0 0 16px; }
.alt{ font-size:13px; color:var(--text-faint); margin-top:14px; }

.foot{ border-top:1px solid var(--border-soft); padding:26px 48px; display:flex; justify-content:space-between;
       gap:18px; flex-wrap:wrap; color:var(--text-faint); font-family:var(--font-mono); font-size:12px;
       max-width:1160px; margin:34px auto 0; }
.foot a{ color:inherit; text-decoration:none; }
.foot a:hover{ color:var(--text-dim); }

@media(max-width:700px){
  .topbar,.wrap,.foot{ padding-left:22px; padding-right:22px; }
  h1{ font-size:29px; }
}