/* THE ACCESS -- the UTILITY REGISTER, shared shell styles.
   Source of law: cornerstone-map/design/claude-design-brief-utility-register-2026-07-13.md
   + the returned board "The Access - Utility Register.dc.html" (Claude Design, project dcb58c7e),
   welded 1:1. This register REPLACES the Survey system (survey.css) on The Access; the Survey
   system relocates to johncruz.com. Sober institutional register: color only where it encodes.
   Motion law: no meaning lives in motion; prefers-reduced-motion gets the identical full page. */

/* ---- the three faces, self-hosted (no CDN) ---- */
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(./fonts/PublicSans-normal.woff2) format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(./fonts/SourceSerif4-normal.woff2) format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:italic; font-weight:400 600; font-display:swap;
  src:url(./fonts/SourceSerif4-italic.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(./fonts/IBMPlexMono-normal-400.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(./fonts/IBMPlexMono-normal-500.woff2) format('woff2'); }

:root {
  /* palette -- color only where it encodes (board 1f) */
  --ink:#16212C; --slate:#4E5D6C; --navy:#21496B; --route:#A83C32;
  --ground:#F5F7F9; --surface:#FFFFFF; --tint:#E7EEF5; --hairline:#D9DEE3;
  --border:#C6CFD8; --rule:#E7EBEF; --dim:#8A94A0; --canvas:#E6EAEE;
  --hover:#F0F4F8; --on-navy-sub:#C5D3E0;
  --foot-text:#B9C4CF; --foot-rule:#2C3B4B;
  /* type -- three faces, each one job */
  --serif:'Source Serif 4', serif; --sans:'Public Sans', sans-serif; --mono:'IBM Plex Mono', monospace;
  /* motion */
  --ease:cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans);
       -webkit-font-smoothing:antialiased; line-height:1.5; }
a { color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
a:hover { color:var(--ink); }
img, svg { max-width:100%; }

/* the page is one framed sheet, centered on the canvas */
.sheet { max-width:1200px; margin:0 auto; background:var(--ground);
         border-left:1px solid var(--border); border-right:1px solid var(--border); }

/* ---------- masthead ---------- */
.mast { background:var(--surface); border-bottom:1px solid var(--hairline); }
.brandbar { max-width:1080px; margin:0 auto; padding:18px 20px;
            display:flex; align-items:baseline; justify-content:space-between; gap:16px;
            border-bottom:1px solid var(--rule); }
.brand { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); text-decoration:none; }
.brandbar .tag { font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--slate); }
.topnav { display:none; gap:24px; align-items:baseline; }
.topnav a { font-size:14px; font-weight:500; }
.topnav .asof { font-family:var(--mono); font-size:12px; color:var(--slate); text-decoration:none; }

.hero { max-width:1080px; margin:0 auto; padding:28px 20px 8px;
        display:flex; flex-direction:column; gap:16px; }
.hero .q { font-family:var(--serif); font-weight:600; color:var(--ink);
           font-size:25px; line-height:1.3; text-wrap:pretty; margin:0; }
.hero .deck { font-size:15px; line-height:1.55; color:var(--slate); margin:0; max-width:56ch; }

/* two entries */
.entries { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.entry { display:flex; align-items:center; justify-content:space-between; gap:12px;
         border-radius:6px; padding:16px; min-height:44px; text-decoration:none; }
.entry .lab { display:flex; flex-direction:column; gap:3px; }
.entry .lab .t { font-size:16px; font-weight:600; }
.entry .lab .s { font-size:13px; }
.entry .chev { font-size:18px; }
.entry.primary { background:var(--navy); color:#fff; }
.entry.primary .lab .s { color:var(--on-navy-sub); }
.entry.primary:hover { background:var(--ink); }
.entry.secondary { background:var(--surface); color:var(--navy); border:1px solid var(--border); }
.entry.secondary .lab .s { color:var(--slate); }
.entry.secondary:hover { background:var(--hover); }

/* ---------- the six questions ---------- */
.questions { max-width:1080px; margin:0 auto; padding:16px 20px 24px;
             display:grid; grid-template-columns:1fr; gap:12px; align-items:start; }
.qcard { background:var(--surface); border:1px solid var(--hairline); border-radius:6px; overflow:hidden; }
.qcard .qhead { display:flex; align-items:baseline; gap:10px; padding:14px 16px 10px; }
.qcard .qhead .n { font-family:var(--mono); font-size:12px; color:var(--slate); }
.qcard .qhead .qt { font-size:17px; font-weight:600; color:var(--ink); margin:0; }
.plate { display:flex; align-items:center; justify-content:space-between; gap:8px;
         padding:12px 16px; min-height:44px; border-top:1px solid var(--rule); text-decoration:none; }
.plate:hover { background:var(--hover); }
.plate .pl { display:flex; flex-direction:column; gap:2px; }
.plate .pl .t { font-size:15px; font-weight:500; color:var(--navy);
                text-decoration:underline; text-underline-offset:2px; }
.plate .pl .s { font-size:13px; color:var(--slate); }
.plate .chev { color:var(--navy); }
.plate:hover .pl .t { color:var(--ink); }

/* ---------- trust strip ---------- */
.trust { background:var(--tint); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.trust .inner { max-width:1080px; margin:0 auto; padding:14px 20px;
                display:flex; flex-direction:column; gap:8px; }
.trust .links { display:flex; gap:16px; flex-wrap:wrap; }
.trust .links a { font-size:14px; font-weight:500; }
.trust .asof { font-family:var(--mono); font-size:12px; color:var(--slate); }

/* ---------- footer ---------- */
.foot { background:var(--ink); color:var(--foot-text); }
.foot .inner { max-width:1080px; margin:0 auto; padding:24px 20px 28px;
               display:flex; flex-direction:column; gap:16px; }
.foot .routes { display:flex; flex-direction:column; gap:10px; }
.foot .routes a { color:#fff; font-size:14px; }
.foot .disc { border-top:1px solid var(--foot-rule); padding-top:14px;
              font-size:12.5px; line-height:1.55; max-width:72ch; }

/* ---------- desktop ---------- */
@media (min-width:820px) {
  .brandbar { padding:20px 40px; }
  .brand { font-size:24px; }
  .brandbar .tag { display:none; }
  .topnav { display:flex; }
  .hero { padding:48px 40px 44px; display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:end; }
  .hero .intro { display:flex; flex-direction:column; gap:16px; }
  .hero .q { font-size:40px; line-height:1.22; }
  .hero .deck { font-size:17px; }
  .entries { margin-top:0; }
  .entry { padding:18px 20px; }
  .questions { grid-template-columns:1fr 1fr; padding:32px 40px 40px; gap:16px; }
  .qcard .qhead { padding:16px 18px 10px; }
  .plate { padding:11px 18px; }
  .trust .inner { padding:14px 40px; flex-direction:row; align-items:baseline;
                  justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .trust .links { gap:24px; }
  .foot .inner { padding:28px 40px 32px; }
  .foot .routes { flex-direction:row; gap:40px; flex-wrap:wrap; }
}

/* ---------- motion: explanatory only, static-complete ---------- */
.entry, .plate, a { transition:background-color 120ms var(--ease), color 120ms var(--ease); }
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}