/* Readflow site pages (top, articles, policies). Same palette as the app:
   answer-sheet blue-grey paper, navy ink, red-pencil slashes. */
:root{
  --paper:#eef2f4; --sheet:#ffffff; --ink:#1d2a3a; --ink-2:#4b5a6b; --rule:#d3dbe2;
  --pencil:#c8323c; --pencil-soft:#f3d4d6; --ok:#2f7d5b; --ok-soft:#dcefe5; --focus:#2d6cdf;
  --ui:"Yu Gothic UI","Yu Gothic","Hiragino Sans","Meiryo",system-ui,sans-serif;
  --en:Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141b22; --sheet:#1c252f; --ink:#e3e9ef; --ink-2:#a8b4c0; --rule:#33404d;
    --pencil:#ff6b73; --pencil-soft:#4a2428; --ok:#6fcf9c; --ok-soft:#1e3a2d; --focus:#7aa7ff;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.85 var(--ui)}
a{color:var(--focus)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
img{max-width:100%;height:auto}

.site-head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding:14px max(16px,4vw);background:var(--sheet);border-bottom:1px solid var(--rule)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
.logo .mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:6px;background:#1d2a3a;color:#e0525b;font:700 22px var(--en)}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
.site-nav a{color:var(--ink-2);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline}
.site-nav .cta{color:#fff;background:var(--ink);padding:3px 12px;border-radius:5px;text-decoration:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .site-nav .cta{color:#141b22}}

main{max-width:760px;margin:0 auto;padding:28px 16px 48px}
main.wide{max-width:1040px}
h1{font-size:clamp(24px,4.5vw,32px);line-height:1.4;margin:.2em 0 .5em}
h2{font-size:21px;margin:2em 0 .6em;padding-bottom:.2em;border-bottom:2px solid var(--rule)}
h3{font-size:17px;margin:1.6em 0 .4em}
p,li{max-width:70ch}
.lead{font-size:17px;color:var(--ink-2)}
.meta{font-size:13px;color:var(--ink-2)}
.toc{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:10px 18px;font-size:14px}
.toc ol{margin:.3em 0;padding-left:1.3em}

/* English example in the app's look: serif with red-pencil slashes. */
.ex{font:19px/2 var(--en);background:var(--sheet);border-left:4px solid var(--pencil);padding:10px 16px;margin:1em 0;border-radius:0 6px 6px 0}
.ex .s{color:var(--pencil);font-weight:700;margin:0 .25em}
.ex .ja{display:block;font:14px/1.6 var(--ui);color:var(--ink-2);margin-top:.2em}

.note{background:var(--ok-soft);border-radius:8px;padding:10px 16px;font-size:15px}
.cite{font-size:13px;color:var(--ink-2)}
table{border-collapse:collapse;width:100%;font-size:14px;margin:1em 0}
th,td{border:1px solid var(--rule);padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--sheet)}

.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:6px;padding:10px 20px;background:var(--ink);color:var(--sheet)}
.btn.sub{background:var(--sheet);color:var(--ink);border:1px solid var(--rule)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:0;list-style:none}
.cards li{background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:14px 16px}
.cards a{font-weight:700}

/* Ad slots: empty until AdSense is enabled in /assets/ads.js. Never used on /app/. */
.ad-slot{margin:28px 0;min-height:0}
.ad-slot:empty{display:none}
.ad-label{font-size:11px;color:var(--ink-2);margin-bottom:2px}

.site-foot{border-top:1px solid var(--rule);background:var(--sheet);padding:20px max(16px,4vw);font-size:13px;color:var(--ink-2)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px}
.site-foot a{color:var(--ink-2)}

main a{overflow-wrap:anywhere}