/* ArthOps v9 base — 5 November 2026. Light site: warm off-white page, white cards, near-black ink, burnt-orange accents, dark footer.
   Loaded first on every page; pages.css carries the components. Replaces cinematic.css (v7 home) which no page loads any more. */
@font-face{font-family:Manrope;src:url('assets/manrope-variable.woff2') format('woff2'),url('assets/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}

:root{
  --page:#f6f4f0;--band:#fbfaf7;--line:#ece7df;--card-line:#e8e3da;--hair:#efeae2;
  --ink:#141414;--ink-2:#444;--ink-3:#6b6b6b;
  --accent:#8a4f2a;--orange:#e78045;--amber:#e8b77d;--burnt:#bd6037;
  --ok:#1f6b3a;--ok-bg:#dff3e6;--warn:#9b2c1f;--warn-bg:#fde3de;--tint:#f6e4d4;
  --black:#0c0d0e;--white:#f5f5f5;
  --shadow:0 24px 60px #2a1d0f14,0 2px 6px #2a1d0f0a;--shadow-sm:0 18px 40px #2a1d0f10;
  --ease:cubic-bezier(.16,1,.3,1);color-scheme:light
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--page);color:var(--ink);font:400 16px/1.7 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:500;line-height:1.09;letter-spacing:-.035em;text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:1.5;width:24px;height:24px;flex-shrink:0}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.shell{width:min(1360px,calc(100% - 112px));margin:auto}
.skip{position:fixed;top:12px;left:20px;z-index:100;background:var(--ink);color:#fff;padding:10px;transform:translateY(-150%)}
.skip:focus{transform:none}

/* Wordmark — approved lowercase bold with amber dot. Do not restyle. */
.wordmark{display:inline-flex;align-items:baseline;font:700 37px/1 Arial,Helvetica,sans-serif;letter-spacing:-.065em}
.wordmark>span{width:.15em;height:.15em;border-radius:50%;background:var(--amber);margin-left:.08em}

/* Buttons */
.button{display:inline-flex;align-items:center;gap:35px;padding:16px 23px;background:var(--ink);color:#f5f5f5;border:1px solid transparent;border-radius:40px;font-size:13px;font-weight:600;transition:background .2s,transform .2s;min-height:48px}
.button svg{width:19px;height:19px}
.button:hover{background:#2a2a2a}
.button:active{transform:scale(.97)}
.button.secondary{background:transparent;color:var(--ink);border-color:#b9b4ab}
.button.secondary:hover{background:#ffffff80}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* Rule list — the short dashed list used in prose and cards */
.rule-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.7;margin-top:12px;color:var(--ink-2)}
.rule-list li::before{content:'';position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--orange)}
.rule-list strong{font-weight:600;color:var(--ink)}

@media(max-width:1100px){.shell{width:calc(100% - 72px)}}
@media(max-width:650px){
  html{scroll-padding-top:85px}
  .shell{width:calc(100% - 40px)}
  .button{font-size:12px;padding:14px 20px;gap:28px}
}