/* ============================================================
   area.css - the eleven area index pages (/mathematics/, /finance/, ... ).

   Every one of them carried its own copy of this card component: about 4 kB each, 43 kB in
   total, and no two quite the same. Almost every difference was the SAME difference - the
   area's accent colour written directly into six rules (.tag, .tool:before, .tool:hover,
   .tool .go, nav.crumb .here, :focus-visible) instead of being parameterised. Adding a new
   area meant hand-copying six colour references and hoping.

   So the accent is a custom property now, set by the one line each page still carries inline:

       <style>:root{ --accent:var(--teal); }</style>

   and everything here refers to var(--accent). Same arrangement as rule.css, and the same
   reason it is a separate sheet rather than part of rot.css: these are ordinary names that
   other pages define for themselves, and only the pages that link this file can be reached
   by it.

   The drift this removed is recorded in the changelog for v3.63. Nothing here is per-area any
   more except two variables:
     --accent        the area colour
     --bg-rad-area   the top-corner background tint, which only Finance overrides

   `.soon` is deliberately NOT here. Five pages use it and two of them mean genuinely different
   things by it, so it stays inline where it is used rather than being forced into agreement.
   ============================================================ */

*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; background: radial-gradient(1300px 650px at 80% -12%, var(--bg-rad-area, var(--bg-rad-1)) 0%, transparent 55%), radial-gradient(950px 520px at -5% 8%, var(--bg-rad-2) 0%, transparent 50%), var(--ink); color:var(--text); font-family:'Inter',system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:980px; margin:0 auto; padding:30px 22px 70px; }
nav.crumb{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding-bottom:14px; margin-bottom:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
nav.crumb a{ color:var(--muted); text-decoration:none; }
nav.crumb a:hover{ color:var(--text); }
nav.crumb .sep{ color:var(--muted-2); }
nav.crumb .here{ color:var(--accent); font-weight:600; letter-spacing:.03em; }
.refbar{ display:flex; align-items:center; gap:var(--sp-3); padding:9px 13px; margin:28px 0 18px; background:linear-gradient(90deg,var(--banner-a),var(--banner-b)); border:1px solid var(--line-soft); border-radius:var(--r-card); font-size:11.5px; color:var(--muted-2); }
.refbar svg{ width:14px; height:14px; flex:none; color:var(--amber); }
.refbar b{ color:var(--muted); font-weight:600; }
.hero{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:10px; }
.markwrap svg{ width:52px; height:52px; display:block; }
h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,4.6vw,40px); letter-spacing:-.02em; margin:0; line-height:1.04; }
.tag{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; font-family:'IBM Plex Mono',monospace; margin-bottom:7px; }
.lede{ font-size:15px; color:var(--muted); max-width:560px; margin:16px 0 0; }
.lede b{ color:var(--text); font-weight:600; }
.lede a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.lede a:hover{ border-bottom-color:var(--accent); }
.divider{ height:1px; background:linear-gradient(90deg,var(--line-soft),transparent 75%); margin:34px 0 28px; }
.tools{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
.tool{ position:relative; display:flex; align-items:center; gap:var(--sp-5); text-decoration:none; color:inherit; background:linear-gradient(180deg,var(--panel),var(--ink-2)); border:1px solid var(--line); border-radius:var(--r-panel); padding:20px 22px; overflow:hidden; transition:transform var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out); }
.tool:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.9; box-shadow:0 0 14px var(--accent); }
.tool:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 60%,var(--line)); box-shadow:var(--shadow-card); }
.tool .icon{ width:46px; height:46px; flex:none; }
.tool .body{ flex:1; min-width:0; }
.tool h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; margin:0 0 4px; letter-spacing:-.005em; }
.tool p{ font-size:13px; color:var(--muted); margin:0; max-width:56ch; }
.tool .eq{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted-2); margin-top:7px; }
.tool .go{ flex:none; display:flex; align-items:center; gap:var(--sp-2); color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; }
.tool .go svg{ width:13px; height:13px; transition:transform var(--t-2) var(--ease-out); }
.tool:hover .go svg{ transform:translateX(3px); }
@media (max-width:760px){ .tool{ flex-wrap:wrap; } .tool .go{ width:100%; justify-content:flex-end; } }
footer{ margin-top:48px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--muted-2); display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:center; }
footer a{ color:var(--muted); text-decoration:none; }
footer a:hover{ color:var(--text); }
footer .fill{ flex:1; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }