/* Ocuper — mobile-first guest magazine. Palette from the Ocuper brand board (teal → sand → rust). */
:root{
  --ink:#16343a; --paper:#fbf7ee; --panel:#ffffff; --muted:#5a6f73; --rule:#dfe6e2;
  --teal:#245a61; --deep:#16343a; --lagoon:#3fa7b0; --sand:#f6d98f; --gold:#c8963a; --rust:#a4683b;
  --accent:#2f8f98; --accent-deep:#245a61; --chip:#eaf4f3; --tick:#245a61; --tick-ink:#ffffff;
  --cover-a:#16343a; --cover-b:#245a61; --cover-c:#3a8f97;
  --f-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:"Jost", "Helvetica Neue", Arial, sans-serif;
  --f-script:"Allura", "Brush Script MT", cursive;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ink:#e9f0ee; --paper:#0f1d20; --panel:#152a2e; --muted:#a3b8ba; --rule:#26423f;
  --chip:#1c3a3d; --tick:#3fa7b0; --tick-ink:#0f1d20; --accent-deep:#7cc9cf; --accent:#5cbcc4; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#e9f0ee; --paper:#0f1d20; --panel:#152a2e; --muted:#a3b8ba; --rule:#26423f;
  --chip:#1c3a3d; --tick:#3fa7b0; --tick-ink:#0f1d20; --accent-deep:#7cc9cf; --accent:#5cbcc4; color-scheme:dark}
/* Edition themes: cover gradient + accent per edition type */
[data-edition="summer"]{--cover-a:#5a2f12; --cover-b:#a4683b; --cover-c:#e08a3c}
[data-edition="autumn"]{--cover-a:#3a2414; --cover-b:#7a4a2a; --cover-c:#a4683b}
[data-edition="winter"]{--cover-a:#1b2638; --cover-b:#33476a; --cover-c:#4f6f9a}
[data-edition="easter"]{--cover-a:#33244a; --cover-b:#5f437e; --cover-c:#b07cc6}
[data-edition="christmas"]{--cover-a:#1f3a26; --cover-b:#2f5a3a; --cover-c:#b3413a}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:1rem; line-height:1.6}
a{color:var(--accent-deep); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; line-height:1.15; margin:0}
h1{font-size:clamp(1.9rem,6.5vw,3rem)} h2{font-size:clamp(1.5rem,5vw,2.1rem)} h3{font-size:1.2rem}
p{margin:0; max-width:65ch}
.wrap{max-width:46rem; margin:0 auto; padding-inline:16px; padding-block:20px 56px; display:grid; gap:22px}
/* top bar */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--deep); color:#fbf7ee}
.top-in{max-width:46rem; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; color:#fbf7ee; text-decoration:none}
.brand .ring{width:26px; height:26px}
.brand .ring::after{width:13px; height:13px}
.bw{font-family:var(--f-display); font-weight:700; letter-spacing:.16em; font-size:1.15rem}
.bw.sm{font-size:1rem}
.top nav{display:flex; gap:16px; flex-wrap:wrap}
.top nav a{color:#f6d98f; text-decoration:none; font-weight:500; font-size:.95rem}
.top nav a:hover{text-decoration:underline}
/* ring mark */
.ring{width:56px; height:56px; border-radius:50%; flex:none; background:conic-gradient(from 200deg,#f6d98f,#c8963a,#a4683b,#3fa7b0,#245a61,#f6d98f); display:grid; place-items:center}
.ring::after{content:""; width:30px; height:30px; border-radius:50%; background:#16343a}
.ring.big{width:64px; height:64px}.ring.big::after{width:34px; height:34px}
/* page blocks */
.page{background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:clamp(18px,5vw,36px); display:grid; gap:16px; min-width:0}
.eyebrow{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.eyebrow.light{color:#f6d98f}
.script{font-family:var(--f-script); font-size:2.3rem; line-height:1; color:var(--accent)}
.lede{font-size:1.08rem}
.note{font-size:.9rem; color:var(--muted)}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:999px; background:var(--accent-deep); color:var(--paper); font-weight:600; text-decoration:none; border:1px solid var(--accent-deep); font:inherit; font-weight:600; cursor:pointer; min-height:44px}
.btn:hover{color:var(--paper); background:var(--accent)}
.btn.ghost{background:transparent; color:var(--accent-deep)}
.btn.ghost:hover{background:var(--chip)}
.pill{display:inline-flex; align-items:center; padding:9px 15px; border-radius:999px; font-weight:600; text-decoration:none; min-height:44px}
.pill.solid{background:#f6d98f; color:#16343a}
.pill.ghost{border:1px solid rgba(246,217,143,.6); color:#f6d98f}
/* cover */
.cover{background:linear-gradient(160deg,var(--cover-a) 0%,var(--cover-b) 55%,var(--cover-c) 100%); color:#fbf7ee; border:0; gap:20px}
.cover a{color:#f6d98f}
.cover .pill.solid{color:#16343a}
.hero{background:linear-gradient(160deg,var(--cover-a),var(--cover-b)); color:#fbf7ee; border:0}
.hero .lede{color:#eef4f2}
.mast{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.word{font-family:var(--f-display); font-size:clamp(2.3rem,9vw,3.6rem); letter-spacing:.14em; font-weight:700; line-height:1}
.mag{font-family:var(--f-display); font-style:italic; font-size:1.15rem; opacity:.92}
.r8,.r8band{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.r8{border-top:1px solid rgba(251,247,238,.25); padding-top:14px}
.balls{display:flex; gap:4px}
.balls span{width:26px; height:26px; border-radius:50%; background:#cfe27a; color:#1d3b10; display:grid; place-items:center; font-weight:700; font-size:.8rem}
.r8 em,.r8band em{font-family:var(--f-display); font-style:italic}
.r8 em{color:#f6d98f}
.r8band{background:var(--chip)}
/* breadcrumbs */
.bc{font-size:.9rem; color:var(--muted)}
/* toc */
.toc{list-style:none; margin:0; padding:0; display:grid}
.toc li a,.toc.plain li{display:grid; grid-template-columns:2.4rem 1fr; gap:10px; padding:9px 4px; text-decoration:none; color:var(--ink); border-bottom:1px dashed var(--rule)}
.toc li span:first-child{font-variant-numeric:tabular-nums; color:var(--accent); font-weight:600}
.folio{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); border-top:1px solid var(--rule); padding-top:10px}
.back .folio{color:#f6d98f; border-color:rgba(246,217,143,.3)}
/* feature */
.facts-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:10px}
.fact{background:var(--chip); border-radius:10px; padding:12px 14px; display:grid; gap:2px; min-width:0}
.fact b{font-family:var(--f-display); font-size:1.12rem}
.fact span{font-size:.82rem; color:var(--muted)}
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.timeline li{display:grid; grid-template-columns:6.5rem 1fr; gap:12px}
.timeline time{font-weight:600; color:var(--accent-deep); font-variant-numeric:tabular-nums}
@media (max-width:30rem){.timeline li{grid-template-columns:1fr; gap:0}}
/* markets */
.mk{list-style:none; margin:0; padding:0}
.mk li{display:grid; grid-template-columns:5.6rem 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--rule)}
.mk .d{font-variant-numeric:tabular-nums; font-weight:600; line-height:1.25}
.mk .d small,.mk .n small{display:block; font-weight:400; color:var(--muted); font-size:.86rem}
.mk .n{min-width:0}
.mk .n a{font-weight:600}
.mk li.star .d{color:var(--accent)}
/* directory */
.dirlist{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.bi{display:grid; gap:1px; min-width:0}
.bn{font-weight:600}
.bi small{color:var(--muted); font-size:.88rem}
.lk{display:flex; gap:16px; font-size:.92rem}
.dir{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:18px}
.dir section{display:grid; gap:8px; align-content:start; min-width:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; gap:6px; align-items:center; padding:5px 11px; border-radius:999px; background:var(--chip); text-decoration:none; font-size:.9rem; color:var(--ink)}
.chip b{color:var(--accent-deep)}
.facts{display:grid; gap:10px; margin:0}
.facts div{display:grid; grid-template-columns:6rem 1fr; gap:10px}
.facts dt{color:var(--muted); font-size:.9rem}
.facts dd{margin:0; min-width:0; overflow-wrap:anywhere}
.sel{user-select:all}
.big{font-size:1.15rem; font-weight:600}
.contact{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
/* bingo */
.bingo{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.bingo label{position:relative; display:grid; place-items:center; text-align:center; min-height:4.6rem; padding:8px 4px; border:1px solid var(--rule); border-radius:8px; font-size:.86rem; line-height:1.2; cursor:pointer; background:var(--panel); user-select:none}
.bingo input{position:absolute; opacity:0; pointer-events:none}
.bingo label:has(input:checked){background:var(--tick); color:var(--tick-ink); border-color:var(--tick)}
.bingo label:has(input:checked)::after{content:"✓"; position:absolute; top:4px; right:7px; font-size:.8rem}
.bingo label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:26rem){.bingo{grid-template-columns:repeat(3,minmax(0,1fr))}}
.score{font-variant-numeric:tabular-nums; font-weight:600}
.hash{display:flex; flex-wrap:wrap; gap:6px}
.hash code{font-family:var(--f-body); background:var(--chip); padding:3px 9px; border-radius:999px; font-size:.9rem}
/* cards */
.shelf,.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:14px}
.card{border:1px solid var(--rule); border-radius:12px; padding:16px; display:grid; gap:8px; align-content:start; min-width:0}
.card .k,.ad .k{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600}
.card.feature{border-color:var(--accent); background:var(--chip)}
.ad{border:2px solid var(--accent-deep); border-radius:12px; padding:16px; display:grid; gap:4px}
.ad .k{color:var(--muted)}
.adn{font-family:var(--f-display); font-size:1.2rem; font-weight:700}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:18px}
.cols>div{display:grid; gap:8px; align-content:start; min-width:0}
.list{margin:0; padding-left:1.1rem; display:grid; gap:6px}
.steps{margin:0; padding-left:1.3rem; display:grid; gap:10px}
.back{background:var(--accent-deep); color:var(--paper); border:0}
.back a{color:#f6d98f}
.back h3{color:var(--paper)}
:root[data-theme="dark"] .back{background:#1d4a50}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .back{background:#1d4a50}}
/* editions grid */
.eds{display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:10px}
.ed{display:grid; gap:2px; padding:14px; border-radius:12px; text-decoration:none; color:#fbf7ee; background:linear-gradient(160deg,var(--cover-a),var(--cover-c)); min-height:8.5rem; align-content:start}
.ed .et{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#f6d98f}
.ed b{font-family:var(--f-display); font-size:1.1rem; line-height:1.2}
.ed small{font-size:.8rem; opacity:.85}
.ed .st{margin-top:auto; padding-top:8px; font-size:.78rem; font-weight:600; color:#f6d98f}
.ed:not(.live){opacity:.72}
.ed:hover{color:#fff; opacity:1}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:10px}
.tile{display:grid; gap:2px; padding:16px; border-radius:12px; background:var(--chip); text-decoration:none; color:var(--ink)}
.tile b{font-family:var(--f-display); font-size:1.2rem}
.tile small{color:var(--muted)}
details summary{cursor:pointer; font-weight:600; color:var(--accent-deep)}
details{display:grid; gap:8px}
.code{width:100%; font:13px/1.4 ui-monospace,Menlo,monospace; padding:10px; border-radius:8px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); margin:8px 0}
/* footer */
.foot{background:var(--deep); color:#dfe8e6; margin-top:12px}
.foot-in{max-width:46rem; margin:0 auto; padding:28px 16px calc(28px + env(safe-area-inset-bottom,0px)); display:grid; gap:14px}
.foot a{color:#f6d98f; text-decoration:none}
.foot a:hover{text-decoration:underline}
.fl{display:flex; flex-wrap:wrap; gap:6px 16px}
.fine{font-size:.82rem; opacity:.8}
@media (prefers-reduced-motion:no-preference){.cover .ring{animation:spin 40s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}
/* theme toggle */
.theme-btn{background:transparent;border:1px solid rgba(246,217,143,.5);color:#f6d98f;border-radius:999px;padding:6px 12px;font:500 .85rem var(--f-body);min-height:36px;cursor:pointer}
/* what's on */
.wo{list-style:none;margin:0;padding:0;display:grid;gap:0}
.wo li{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--rule)}
.wo li:first-child{border-top:0}
.wo .d{font-weight:600;font-size:.92rem;color:var(--accent-deep)}
.wo .n a{font-weight:600}.wo .n small{display:block;color:var(--muted)}
@media (max-width:420px){.wo li{grid-template-columns:1fr;gap:2px}}
.rhythm{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rhythm li small{display:block;color:var(--muted)}
/* signup */
.signup{display:grid;gap:12px}
.signup .f{display:flex;gap:8px;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 14rem;min-width:0;min-height:46px;padding:10px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:inherit}
.signup .ints{display:flex;flex-wrap:wrap;gap:8px}
.signup .ints label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--chip);font-size:.9rem;cursor:pointer}
.signup .consent{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.signup .consent input{margin-top:4px}
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup.done .f,.signup.done .ints,.signup.done .consent{display:none}
.su-msg{font-weight:600;min-height:1.2em}
.foot .signup input[type=email]{background:#fbf7ee;color:#16343a}
.foot .signup .consent{color:#cfdcda}
/* puzzles */
.pz-tools{display:flex;flex-wrap:wrap;gap:10px}
.ws{display:grid;gap:2px;width:100%;max-width:30rem;user-select:none}
.ws button{aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:4px;background:var(--chip);color:var(--ink);font:600 clamp(.7rem,3.4vw,1rem) var(--f-body);cursor:pointer}
.ws button.sel1{outline:2px solid var(--accent)}
.ws button.got{background:var(--sand);color:#16343a}
.ws button.ans{box-shadow:inset 0 0 0 2px var(--gold)}
.ws-words{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:0;padding:0;font-weight:600;font-size:.92rem}
.ws-words li.got{text-decoration:line-through;color:var(--muted)}
.cw{display:grid;gap:0;width:100%;max-width:32rem}
.cw div{position:relative;aspect-ratio:1;min-width:0}
.cw div.blk{background:transparent}
.cw input{width:100%;height:100%;border:1px solid var(--ink);border-radius:0;margin:0;text-align:center;font:600 clamp(.7rem,3.2vw,1rem) var(--f-body);text-transform:uppercase;background:var(--panel);color:var(--ink);padding:0}
.cw input.ok{background:#d9f0e3;color:#16343a}.cw input.bad{background:#f7d4cf;color:#16343a}
.cw sup{position:absolute;left:2px;top:0;font-size:.5rem;line-height:1;z-index:1;pointer-events:none;color:var(--ink)}
.cw input::placeholder{color:transparent}
.show-answers .cw input::placeholder{color:var(--gold);opacity:1}
.clues{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.clues ol{margin:6px 0 0;padding-left:0;list-style:none;display:grid;gap:4px;font-size:.95rem}
.mz{max-width:26rem;color:var(--ink)}.mz svg{width:100%;height:auto}
.mz .mz-sol{display:none}.mz.solved .mz-sol{display:inline}
.colour-wrap{display:grid;gap:10px}
.colour-wrap svg{width:100%;height:auto;background:#fff;border-radius:10px;border:1px solid var(--rule);cursor:pointer}
.palette{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:40px;height:40px;border-radius:50%;border:2px solid var(--rule);cursor:pointer}
.sw[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px}
.made{font-size:.9rem;color:var(--muted)}
.lml{border-style:dashed}