/* Daily Dokkai: the printed-textbook look, the base of every page (site_look.py). Loads first. */
:root{
  --ink:#1d1a16;--soft:#4e483c;--faint:#6d6656;--paper:#e9e3d5;--sheet:#f8f4ea;--line:#cfc6b2;--tint:#ece6d8;
  --seal:#b5402f;--seal-tint:#f3e3df;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#ebe4d3;--soft:#c2b9a3;--faint:#9c937d;--paper:#14120e;--sheet:#1c1914;--line:#3d372b;--tint:#29251d;
  --seal:#d8695a;--seal-tint:#3a231f;}}
:root[data-theme="dark"]{
  --ink:#ebe4d3;--soft:#c2b9a3;--faint:#9c937d;--paper:#14120e;--sheet:#1c1914;--line:#3d372b;--tint:#29251d;
  --seal:#d8695a;--seal-tint:#3a231f;}

/* ---- reset and type ---- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;} html,body{margin:0;padding:0;}
[hidden]{display:none !important;}
img{max-width:100%;}
body{background:var(--paper);color:var(--ink);line-height:1.7;font-family:var(--gothic);-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px;}
::selection{background:var(--tint);}
h1,h2,h3{font-family:var(--mincho);font-weight:700;color:var(--ink);line-height:1.3;}
h1{font-size:clamp(1.6rem,4vw,2.2rem);margin:.2rem 0 .4rem;letter-spacing:.01em;text-wrap:balance;}
h2{font-size:1.12rem;margin:2.4rem 0 .7rem;}
h3{font-size:1.02rem;margin:1.4rem 0 .3rem;}
p{color:var(--soft);}

/* ---- the page is a sheet of paper on the desk, with a running header and a folio ---- */
main,.sheet{background:var(--sheet);max-width:47rem;margin:1.6rem auto 0;padding:1.2rem 3rem 2.2rem;counter-reset:sec plate;
  box-shadow:0 1px 0 var(--line),0 12px 30px -18px rgba(40,30,15,.35);}
main.wide,.sheet.wide{max-width:72rem;}
.runhead,main:not(:has(.runhead))::before{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mincho);
  font-size:.78rem;color:var(--faint);border-bottom:1px solid var(--ink);padding:.2rem 0 .35rem;margin:0 0 1.2rem;}
main:not(:has(.runhead))::before{content:"デイリー読解";}
.runhead span:last-child{text-align:right;}
.folio{text-align:center;font-family:var(--mincho);font-size:.9rem;color:var(--soft);margin-top:1.8rem;}
.folio:before,.folio:after{content:"—";margin:0 .6rem;color:var(--line);}
/* section headings numbered like a book: 一　二　三 (only the page's own headings, not those inside boxes) */
main > h2,main > section > h2,#player > h2,#player > section > h2,.sheet section > h2,.section-head h2{display:flex;gap:.7rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:.3rem;counter-increment:sec;}
main > h2:before,main > section > h2:before,#player > h2:before,#player > section > h2:before,.sheet section > h2:before,.section-head h2:before{
  content:counter(sec,cjk-ideographic);font-size:.9em;color:var(--soft);}
/* a picture is a plate in the book: a thin frame, its number and a caption */
figure.plate{margin:1rem 0 1.4rem;padding:.55rem;border:1px solid var(--ink);background:var(--sheet);counter-increment:plate;}
figure.plate img{display:block;width:100%;height:auto;border:0;}
figure.plate figcaption{display:block;font-size:.86rem;color:var(--soft);padding:.5rem .1rem .1rem;line-height:1.5;}
figure.plate figcaption:before{content:"図" counter(plate,cjk-ideographic);font-family:var(--mincho);color:var(--ink);margin-right:.6rem;}
/* the one red thing on the page */
.hanko{writing-mode:horizontal-tb;display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;
  border:2px solid var(--seal);color:var(--seal);font-family:var(--mincho);font-weight:800;font-size:1.3rem;border-radius:3px;
  transform:rotate(-4deg);box-shadow:inset 0 0 0 1px var(--sheet),inset 0 0 0 2px var(--seal);}

/* ---- buttons: ink, one weight ---- */
.btn{font:inherit;font-weight:700;display:inline-block;text-decoration:none;background:var(--ink);color:var(--sheet);
  border:1px solid var(--ink);padding:.6rem 1.25rem;cursor:pointer;}
.btn:hover{filter:brightness(1.15);}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;filter:none;}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.small{font-size:.85rem;padding:.4rem .9rem;}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;}

/* ---- the footer: a rule and plain links ---- */
body > footer{background:transparent;color:var(--soft);border-top:1px solid var(--ink);max-width:72rem;margin:2rem auto 0;font-size:.82rem;}
body > footer > div{max-width:72rem;margin:0 auto;padding:1.2rem 1.25rem;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;}
body > footer a{color:var(--ink);}

@media (max-width:640px){
  main,.sheet{margin:0;padding:.9rem 1rem 1.6rem;box-shadow:none;}
  .runhead,main:not(:has(.runhead))::before{font-size:.7rem;}
  body > footer{margin-top:1.2rem;} body > footer > div{padding:1rem;}
  .hanko{width:2rem;height:2rem;font-size:1.1rem;}
}