/* Rapla CI "Tafel" — flattened from grid + still + tafel layers; no @import */
/* Spacing & grid proposal: one 8px scale, one left edge, a 40rem reading measure, full-width media */
:root { --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem; --measure:40rem; }
main :where(p, ul, ol, h1, h2, h3, table, pre, .lead, .crumb) { max-width:var(--measure); }
main p:has(> a.img-link), .card p, .coming > p { max-width:none; }
main p, main ul, main ol, main table, main pre, .shot { margin:0 0 var(--s2); }
main h1 { margin:var(--s4) 0 var(--s2); }
main h2 { margin:var(--s6) 0 var(--s2); }
main h3 { margin:var(--s4) 0 var(--s1); }
main p:has(> a.img-link) { margin:var(--s4) 0; }
main li + li { margin-top:.25rem; }
.hero { text-align:left; padding:var(--s6) 0 var(--s4); }
.hero p { margin:var(--s1) 0 var(--s3); }
.actions { justify-content:flex-start; }
.cards { gap:var(--s3); margin:var(--s4) 0; }
.card { padding:var(--s3); }
.coming { text-align:left; padding:var(--s4); margin:var(--s6) 0 0; }
.coming .actions { margin:0; }
footer { margin-top:0; }

/* D — Still: one font, one text colour, one link colour, three sizes, no boxes, no shadows, one button style */
:root, :root:is(*) { --fg:#1f2328; --muted:#1f2328; --bg:#fff; --card:#fff; --line:#dfe2e6; --accent:#1d5a9e; }
html { font-size:17px; }
body { font:1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; background:#fff; color:var(--fg); }
main, footer { max-width:64rem; padding-inline:1.5rem; }
h1, h2, h3, strong, .brand { color:var(--fg); }
h1, .hero h1 { font-size:2rem; line-height:1.2; font-weight:600; }
h2, .coming h2 { font-size:1.3rem; line-height:1.3; font-weight:600; }
h3, .card h2, .card h3 { font-size:1rem; font-weight:600; }
.lead, .hero p, .coming > p, .card p, .toc a, .subnav a, footer, figcaption { color:var(--fg); font-size:1rem; }
a { color:var(--accent); }
.top { position:static; background:#fff; backdrop-filter:none; border-bottom:1px solid var(--line); padding:.75rem max(1.5rem, calc((100% - 61rem) / 2)); }
.brand { font-weight:600; }
.brand img { width:auto; height:28px; border-radius:0; }
.menu a, .menu a.highlight { color:var(--fg); font-weight:400; border-radius:0; padding:.5rem .6rem; }
.menu a:hover { background:none; color:var(--accent); }
.menu a[aria-current] { background:none; color:var(--accent); }
.button { background:var(--accent); color:#fff; border-radius:3px; font-weight:400; }
.button.ghost { background:none; border:0; color:var(--accent); padding-inline:.5rem; text-decoration:underline; }
.card, a.card.link, .coming, .toc { background:none; border:0; border-radius:0; box-shadow:none; padding:0; }
a.card.link h3 { color:var(--accent); }
.coming { border-top:1px solid var(--line); padding-top:var(--s4); }
.coming .cards { margin-top:var(--s3); }
.badge { border:0; padding:0; background:none; color:var(--fg); font-size:1rem; }
.subnav a[aria-current] { font-weight:400; color:var(--accent); }
.toc a { border-left:0; padding:.2rem 0; }
img { border-radius:0; }
pre { border-radius:0; background:#f4f5f7; border:0; }
footer { border-top:1px solid var(--line); margin-top:4rem; }
.card h2 a { text-decoration:none; }
/* impeccable distill/quieter/craft-floor pass */
:root { --measure:37rem; }                                   /* ≈ 65–75ch across system fonts */
.coming .button { background:none; color:var(--accent); padding:0; text-decoration:underline; }  /* one primary action per page */
a { text-underline-offset:.18em; text-decoration-thickness:1px; }
.menu a[aria-current], .subnav a[aria-current] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.4em; }  /* current state not by colour alone */
.subnav .badge { font-weight:600; }
::selection { background:#cfe0f3; color:var(--fg); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Rapla CI — "Tafel": slate board and gold frame from the logo, Rapla's default appointment colours, chalk-paper page */
:root {
  --rapla-slate:#35393c; --rapla-ink:#2a2d30; --rapla-chalk:#efefea; --rapla-gold:#d2af63; --rapla-paper:#f1f0eb;
  --rapla-blue:#1f6fb2; --rapla-conflict:#dc1e1e; --rapla-line:#d9d6cc;
  --rapla-c0:#a3ddff; --rapla-c1:#b5e97e; --rapla-c2:#ffb85e; --rapla-c3:#b099dc; --rapla-c4:#cccccc; --rapla-c5:#fef49d; --rapla-c6:#fc9992;
}
:root, :root:is(*) { --fg:var(--rapla-ink); --muted:var(--rapla-ink); --bg:var(--rapla-paper); --card:var(--rapla-paper); --line:var(--rapla-line); --accent:var(--rapla-blue); }
body { background:var(--rapla-paper); }
.top { background:var(--rapla-slate); border-bottom:3px solid var(--rapla-gold); }
.brand, .menu label, .menu a, .menu a.highlight { color:var(--rapla-chalk); }
.menu a:hover, .menu a[aria-current] { color:#fff; }
.menu a[aria-current] { text-decoration-color:var(--rapla-gold); }
@media (max-width: 62rem) { .menu ul { background:var(--rapla-slate); border-color:#4a4f53; } }
.button { background:var(--rapla-ink); color:#fff; }
.card, a.card.link { border-top:2px solid var(--rapla-gold); padding-top:.75rem; }
pre { background:#e6e4dc; }
img { box-shadow:0 0 0 1px var(--rapla-line); }
::selection { background:#e8d9b0; }

/* Hero: text left, the week plan right */
.hero { display:grid; grid-template-columns:minmax(0, 17rem) minmax(0, 1fr); gap:3rem; align-items:start; }
.hero .actions { margin-bottom:0; }
.weekplan { display:block; margin:0; }
.wp-grid { display:grid; grid-template-columns:2.6rem repeat(5, minmax(0, 1fr)); grid-template-rows:1.9rem repeat(10, 1.6rem); font-size:.75rem; line-height:1.25;
  border-top:1px solid var(--rapla-line);
  background:repeating-linear-gradient(to bottom, transparent 0 calc(3.2rem - 1px), var(--rapla-line) calc(3.2rem - 1px) 3.2rem) 0 1.9rem / 100% calc(100% - 1.9rem) no-repeat; }
.wp-d { grid-row:1; align-self:center; font-weight:600; font-size:.85rem; padding-left:.3rem; }
.wp-h { grid-column:1; font-variant-numeric:tabular-nums; opacity:.75; transform:translateY(-.5rem); }
.wp-b { margin:1px 3px 1px 1px; padding:.2rem .4rem; border-radius:2px; overflow:hidden; color:#1f2328; box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18); }
.wp-b small { display:block; opacity:.8; font-size:inherit; }
.c0 { background:var(--rapla-c0); } .c1 { background:var(--rapla-c1); } .c2 { background:var(--rapla-c2); } .c3 { background:var(--rapla-c3); } .c4 { background:var(--rapla-c4); } .c5 { background:var(--rapla-c5); }
.wp-x { box-shadow:inset 0 0 0 2px var(--rapla-conflict); background:repeating-linear-gradient(135deg, #fff 0 5px, #fde2e1 5px 10px); }
.weekplan figcaption { font-size:.85rem; margin-top:.5rem; }
@media (max-width: 50rem) {
  .hero { grid-template-columns:1fr; gap:2rem; }
  /* phone: three days, so titles stay readable */
  .wp-grid { grid-template-columns:2.6rem repeat(3, minmax(0, 1fr)); }
  .wp-d:nth-of-type(n+4), .wp-b.c3, .wp-b.c4, .wp-b.c5 { display:none; }
  .wp-b small { display:none; }
}
.top :focus-visible, .menu input:focus-visible + label { outline-color:var(--rapla-gold); }
.c3 small { opacity:1; }
/* Cards: a quiet box on the paper, stronger gold header rule */
.card, a.card.link { background:#f7f6f2; border:1px solid var(--rapla-line); border-top:3px solid var(--rapla-gold); border-radius:3px; padding:.85rem 1.1rem 1.1rem; }
a.card.link:hover { border-color:#c9c4b5; border-top-color:var(--rapla-gold); }
.card h2, .card h3 { font-weight:700; }
.brand[aria-current] { text-decoration-color:var(--rapla-gold); }
.top { position:relative; z-index:10; }
@media (min-width: 62.01rem) { .menu ul, .menu a.external { align-items:baseline; } .menu a.external svg { align-self:center; } }
main a.img-link { display:block; width:fit-content; max-width:100%; } main a.img-link img { display:block; } main h2 a.edit { white-space:nowrap; }
.cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.card h3 a { text-decoration:none; }
footer { font-size:.9rem; } .edit { white-space:nowrap; }
.videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 34rem) { .videos { grid-template-columns: 1fr; } }
.hero .actions { flex-wrap:nowrap; gap:.25rem; white-space:nowrap; }
@media (max-width: 22.5rem) { .hero .actions { flex-wrap:wrap; row-gap:.5rem; } }
.h-icon { width:1em; height:1em; margin-right:.35em; vertical-align:-.14em; } .h-icon svg { width:1em; height:1em; }