/* Reading pages (about, 404) — the AinaDara house style, mirrored from
   mission-control/domains/ainadara/templates/guide.html. Light and dark
   follow the system; print is always light. The player itself is dark-only
   by design (see CLAUDE.md) and does not use this file. */
:root{
  --paper:#faf5ed; --paper-deep:#f2ecdf; --paper-edge:#e8e0d0;
  --ink:#2d3428; --ink-soft:#5a6151; --ink-faint:#8a8e80;
  --terracotta:#cc785c; --terracotta-q:#e0a98c;
  --purple:#4a3d7a; --moss:#4a5c28;
  --rule:rgba(45,52,40,.1);
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --step--1:clamp(.72rem,.7rem + .1vw,.78rem);
  --step-0:clamp(1.0625rem,1.03rem + .15vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .4vw,1.4rem);
  --step-2:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  --step-3:clamp(2.4rem,1.6rem + 3.2vw,3.8rem);
  --measure:68ch; --radius:4px; --gutter:clamp(1.5rem,4vw,3.5rem);
}
@media screen and (prefers-color-scheme: dark){
  :root{
    --paper:#1c1815; --paper-deep:#252119; --paper-edge:#322d24;
    --ink:#ece4d2; --ink-soft:#b8af9d; --ink-faint:#7d7666;
    --terracotta:#d88a6e; --terracotta-q:#b56e54;
    --purple:#8e7dc8; --moss:#9aad68;
    --rule:rgba(236,228,210,.1);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:300; font-size:var(--step-0);
  line-height:1.6; letter-spacing:.005em; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 1200px 800px at 15% 10%, rgba(204,120,92,.05), transparent 60%),
    radial-gradient(ellipse 900px 700px at 85% 70%, rgba(74,61,122,.03), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(74,92,40,.025), transparent 60%);
  background-attachment:fixed;
}
@media screen and (prefers-color-scheme: dark){
  body{background-image:
    radial-gradient(ellipse 1200px 800px at 15% 10%, rgba(216,138,110,.08), transparent 60%),
    radial-gradient(ellipse 900px 700px at 85% 70%, rgba(142,125,200,.06), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(154,173,104,.04), transparent 60%);}
}
::selection{background:var(--terracotta); color:var(--paper);}
.wrap{max-width:760px; margin:0 auto; padding:clamp(1.4rem,1rem + 3vw,4rem) var(--gutter) 5rem;}
a{color:var(--terracotta); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px; border-radius:3px;}
.skip{position:absolute; left:-999px;}
.skip:focus{left:1rem; top:1rem; background:var(--ink); color:var(--paper); padding:.5rem .8rem; border-radius:var(--radius); z-index:10;}

.eyebrow{font-size:var(--step--1); font-weight:500; text-transform:uppercase; letter-spacing:.22em; color:var(--ink-faint); display:block; margin-bottom:.7rem;}
.title{font-family:var(--font-display); font-weight:400; font-size:var(--step-3); line-height:1; letter-spacing:.01em; margin:0 0 .6rem;}
.title em{font-style:italic; color:var(--terracotta);}
.thesis{font-family:var(--font-display); font-weight:400; font-size:var(--step-1); line-height:1.4; color:var(--ink-soft); max-width:54ch; margin:0 0 1.2rem;}

.tagrow{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:2.8rem;}
.tag,.chip{font-size:var(--step--1); font-weight:500; text-transform:uppercase; letter-spacing:.18em; border-radius:999px; padding:.3rem .7rem; border:1px solid var(--rule); white-space:nowrap; color:var(--ink-faint);}
.chip--live{color:var(--moss); border-color:#4a5c284d;}

.section{margin:0 0 3rem; scroll-margin-top:1.5rem;}
.section > .eyebrow{margin-bottom:.5rem;}
h2{font-family:var(--font-display); font-weight:400; font-size:var(--step-2); line-height:1.15; letter-spacing:-.005em; margin:0 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--rule);}
p{margin:0 0 1rem; max-width:var(--measure);}
ul{max-width:var(--measure); padding-left:1.2rem;}
li{margin:.3rem 0;}
strong{font-weight:600;}
kbd{font-family:var(--font-body); font-weight:500; font-size:.82em; padding:.08rem .45rem; border:1px solid var(--rule); border-bottom-width:2px; border-radius:var(--radius); background:var(--paper-deep); white-space:nowrap;}


table.keys{border-collapse:collapse; width:100%; max-width:var(--measure); margin:1.2rem 0;}
table.keys th, table.keys td{text-align:left; vertical-align:top; padding:.5rem .8rem; border-bottom:1px solid var(--rule);}
table.keys th{font-size:var(--step--1); font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-faint); border-bottom:1px solid var(--ink);}
table.keys td:first-child{white-space:nowrap; width:1%;}

.button{display:inline-block; font-weight:500; text-decoration:none; color:var(--paper); background:var(--terracotta); border-radius:999px; padding:.55rem 1.2rem;}
.button:hover{filter:brightness(1.06);}

.foot{margin-top:4rem; padding-top:1.2rem; border-top:1px solid var(--ink); font-size:var(--step--1); font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; justify-content:space-between;}
.foot a{color:inherit;}

.wrap{animation:rise .5s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){ .wrap{animation:none;} }

@media print{
  :root{
    --paper:#fff; --paper-deep:#f2ecdf; --ink:#000; --ink-soft:#333; --ink-faint:#666;
    --terracotta:#a85a40; --moss:#4a5c28; --rule:#ccc;
  }
  @page{margin:18mm 16mm;}
  html,body{background:#fff; background-image:none;}
  body{font-size:10.5pt;}
  .wrap{max-width:none; padding:0; animation:none;}
  .skip,.button{display:none;}
  a{text-decoration:none;}
  h2{break-after:avoid;}
  table.keys{break-inside:avoid;}
  .chip,.tag{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .title{font-size:24pt;}
}