/* Fortūna — shared styles. Layout: reading page with a right-hand Latin margin, like a printed reader. */
:root{
  --bg:#ECEFEA; --paper:#F7F8F4; --ink:#1C2629; --muted:#56635F; --rule:#CCD3CB;
  --sea:#1E6A73; --grain:#9C6A17; --wood:#85563A; --sail:#F3EFE2; --sea-fill:#CFE0DD; --stone:#D8D2C2; --land:#E6E3D6; --clay:#B4694A;
  --ok:#2E7D4F; --bad:#B23A2E;
  --f-text:"Alegreya", Georgia, "Times New Roman", serif;
  --f-cap:"Alegreya SC", "Alegreya", Georgia, serif;
  --f-ui:"Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111819; --paper:#172123; --ink:#E3E8E2; --muted:#98A6A2; --rule:#2B393B;
  --sea:#62B4BB; --grain:#D7A548; --wood:#B07B55; --sail:#D9D3C3; --sea-fill:#1A3236; --stone:#3A3B35; --land:#22292A; --clay:#C07E60;
  --ok:#6CC08F; --bad:#E77E70; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#111819; --paper:#172123; --ink:#E3E8E2; --muted:#98A6A2; --rule:#2B393B;
  --sea:#62B4BB; --grain:#D7A548; --wood:#B07B55; --sail:#D9D3C3; --sea-fill:#1A3236; --stone:#3A3B35; --land:#22292A; --clay:#C07E60;
  --ok:#6CC08F; --bad:#E77E70; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 120px}
a{color:var(--sea)}
.wrap{max-width:1040px;margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px}
.crumbs{font-size:14px;color:var(--muted)}
.themebtn{font:500 13px var(--f-ui);color:var(--muted);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:5px 12px;cursor:pointer}
.themebtn:hover{color:var(--ink);border-color:var(--muted)}
.themebtn:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.crumbs a{text-decoration:none;font-family:var(--f-cap);letter-spacing:.08em}
header.top{display:flex;flex-wrap:wrap;gap:16px;align-items:end;justify-content:space-between;padding-block:18px 20px;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--f-cap);letter-spacing:.12em;color:var(--sea);font-size:15px}
h1{font-family:var(--f-cap);font-weight:700;font-size:clamp(34px,6vw,54px);line-height:1;margin:6px 0 0;text-wrap:balance}
h2{font-family:var(--f-cap);font-weight:700;font-size:26px;margin:0;text-wrap:balance}
h3{font-family:var(--f-cap);font-weight:500;font-size:20px;margin:0}
.sub{color:var(--muted);margin:8px 0 0;max-width:60ch}
.mode{display:flex;border:1px solid var(--rule);border-radius:999px;background:var(--paper);padding:3px;width:max-content}
.mode button{font:500 14px var(--f-ui);border:0;background:none;color:var(--muted);padding:7px 14px;border-radius:999px;cursor:pointer}
.mode button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,.w:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.modenote{font-size:13px;color:var(--muted);max-width:34ch;margin:6px 0 0}

/* reading */
.reader{background:var(--paper);border:1px solid var(--rule);margin-top:28px;padding:28px clamp(16px,4vw,44px)}
.sect{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px 36px;padding-block:18px;border-top:1px solid var(--rule)}
.sect:first-of-type{border-top:0}
.num{font-family:var(--f-cap);color:var(--sea);font-size:15px;letter-spacing:.1em;grid-column:1/-1}
.latin{font-family:var(--f-text);font-size:21px;line-height:1.75;margin:0;max-width:62ch;min-width:0}
.w{cursor:pointer;border-radius:3px;padding:0 1px}
.w:hover{background:color-mix(in srgb,var(--sea) 14%,transparent)}
.w.sel{background:color-mix(in srgb,var(--sea) 24%,transparent)}
body.tr .w{text-decoration:underline dotted color-mix(in srgb,var(--sea) 55%,transparent);text-underline-offset:5px}
.margin{font-family:var(--f-text);font-size:16px;color:var(--muted);border-left:1px solid var(--rule);padding-left:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.margin b{color:var(--ink);font-weight:600}
.margin .pair{display:flex;align-items:center;gap:8px}
.dot{display:inline-block;border-radius:50%;background:var(--ink)}
figure{grid-column:1/-1;margin:8px 0 0}
figure svg{width:100%;height:auto;display:block;max-width:100%}
figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* illustration vocabulary (shared by every chapter) */
.lbl{font-family:var(--f-text);font-style:italic;font-size:15px;fill:var(--ink)}
.lbl.nm{font-style:normal;font-weight:600;font-size:16px}
.lbl.acc{fill:var(--sea);font-style:normal;font-weight:600}
.lbl.sm{font-size:13px}
.sea{fill:var(--sea-fill)} .wave{fill:none;stroke:var(--sea);stroke-width:1.5;opacity:.55}
.land{fill:var(--land);stroke:var(--ink);stroke-width:1.5}
.river{fill:none;stroke:var(--sea);stroke-width:5;stroke-linecap:round;opacity:.75}
.wall{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.bldg{fill:var(--stone);stroke:var(--ink);stroke-width:1}
.stone{fill:var(--stone);stroke:var(--ink);stroke-width:1.2} .hull{fill:var(--wood);stroke:var(--ink);stroke-width:1.5}
.sail{fill:var(--sail);stroke:var(--ink);stroke-width:1.5} .ln{stroke:var(--ink);stroke-width:2;fill:none} .inkf{fill:var(--ink)}
.onhull{fill:var(--sail);font-family:var(--f-cap);font-size:15px;letter-spacing:.15em}
.sack{fill:var(--grain);stroke:var(--ink);stroke-width:1.5} .ground{stroke:var(--muted);stroke-width:1.5}
.skin{fill:var(--stone);stroke:var(--ink);stroke-width:1.5}
.clay{fill:var(--clay);stroke:var(--ink);stroke-width:1.5}
.arrow{fill:none;stroke:var(--sea);stroke-width:2}.arrow.sight{stroke-dasharray:6 5}.arrowhead{fill:var(--sea)}
.wax{fill:var(--grain);opacity:.35;stroke:var(--wood);stroke-width:4}
.t1{fill:var(--sea)} .t2{fill:var(--grain)} .t3{fill:var(--wood)} .t4{fill:var(--muted)} .t5{fill:var(--sail)} .tun{stroke:var(--ink);stroke-width:1.5}

/* blocks */
.block{margin-top:44px}
.block > header{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:18px}
.block > header p{margin:0;color:var(--muted)}
.gram{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gcell{background:var(--paper);border:1px solid var(--rule);padding:16px;min-width:0}
.gcell table{border-collapse:collapse;font-family:var(--f-text);font-size:18px;width:100%;margin-top:8px}
.gcell td{padding:4px 6px;border-bottom:1px solid var(--rule)}
.gcell td:first-child{color:var(--muted);font-family:var(--f-ui);font-size:13px;letter-spacing:.06em;text-transform:uppercase;width:40%}
.gcell.wide td:first-child{width:auto}
.end{color:var(--sea);font-weight:600}
.en{font-size:14px;color:var(--muted);margin:10px 0 0}
body:not(.tr) .en{display:none}

.pensa{display:grid;gap:18px}
.pensum{background:var(--paper);border:1px solid var(--rule);padding:18px 20px}
.pensum h3{display:flex;gap:10px;align-items:baseline}
.pensum h3 small{font-family:var(--f-ui);font-size:13px;color:var(--muted);font-weight:400}
.items{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font-family:var(--f-text);font-size:19px}
.items input{font:inherit;width:4.2em;border:0;border-bottom:1.5px solid var(--muted);background:transparent;color:var(--ink);text-align:center;padding:0 2px}
.items input.long{width:6.5em}
.items input.ok{border-color:var(--ok);color:var(--ok)} .items input.bad{border-color:var(--bad);color:var(--bad)}
.qc{margin:0;padding:0;border:0}
.qc legend{font-family:var(--f-text);font-size:19px;padding:0;margin-bottom:6px}
.qc label{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-text);font-size:17px;margin:0 14px 4px 0;cursor:pointer}
.qc.ok legend{color:var(--ok)} .qc.bad legend{color:var(--bad)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.btn{font:500 14px var(--f-ui);border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:4px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)}
.score{font-size:14px;color:var(--muted)}

.tx{display:grid;gap:14px}
.txi{background:var(--paper);border:1px solid var(--rule);padding:16px 18px}
.txi .src{font-family:var(--f-text);font-size:20px;margin:0 0 8px}
.txi textarea{width:100%;font:16px var(--f-ui);color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:4px;padding:8px 10px;resize:vertical;min-height:44px}
.fb{margin-top:10px;font-size:15px}
.fb .model{font-family:var(--f-text);font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{font-size:13px;border:1px solid var(--rule);border-radius:999px;padding:2px 10px;color:var(--muted)}
.chip.hit{border-color:var(--ok);color:var(--ok)}
.tip{color:var(--muted);font-size:14px;margin:6px 0 0}

.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:16px;border-top:1px solid var(--rule)}
.pager a{font-family:var(--f-cap);font-size:18px;text-decoration:none}
.pager span{color:var(--muted);font-size:14px}

/* word panel */
#panel{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);
  padding:14px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  box-shadow:0 -6px 24px rgba(0,0,0,.18);z-index:5}
#panel .in{max-width:1040px;margin:0 auto;display:flex;gap:16px;align-items:start;justify-content:space-between}
#panel .lem{font-family:var(--f-text);font-size:22px;font-weight:600}
#panel .info{font-size:15px;opacity:.9;margin-top:2px}
#panel .info i{font-family:var(--f-text);font-size:17px}
#panel .ch{font-size:13px;opacity:.7}
#panel button{background:transparent;border:1px solid currentColor;color:var(--paper);border-radius:4px;padding:4px 10px;font:14px var(--f-ui);cursor:pointer;flex:none}

/* contents page */
.hero{padding-block:24px 24px;border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(48px,10vw,92px)}
.hero .sub{font-size:18px}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:0;background:var(--paper);border:1px solid var(--rule)}
.toc li{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:14px 18px;border-top:1px solid var(--rule)}
.toc li:first-child{border-top:0}
.toc .r{font-family:var(--f-cap);color:var(--sea);font-size:17px}
.toc .t{font-family:var(--f-text);font-size:21px;font-weight:600}
.toc a.t{text-decoration:none;color:var(--ink)}
.toc a.t:hover{color:var(--sea)}
.toc .d{grid-column:2/3;color:var(--muted);font-size:14px}
.toc .st{font-size:13px;color:var(--muted);grid-row:1/3;grid-column:3}
.toc .st.done{color:var(--ok)}
.toc li.soon .t{color:var(--muted);font-weight:400}
.idx{columns:3 220px;column-gap:28px;background:var(--paper);border:1px solid var(--rule);padding:18px 20px;font-size:15px}
.idx div{break-inside:avoid;padding:3px 0;border-bottom:1px dotted var(--rule);display:flex;gap:8px;justify-content:space-between}
.idx .la{font-family:var(--f-text);font-size:17px}
.idx .meta{color:var(--muted);text-align:right}
.lead{max-width:62ch}

@media (max-width:700px){
  .sect{grid-template-columns:minmax(0,1fr)}
  .margin{border-left:0;border-top:1px dashed var(--rule);padding:10px 0 0;flex-direction:row;flex-wrap:wrap;gap:8px 18px}
  .latin{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}