/* Layout: header + search hero, then a sticky table of contents beside one long reading column */
:root{
  --bg:#f5f6f4; --surface:#ffffff; --ink:#1c2530; --muted:#5b6672; --line:#dfe3e0;
  --maple:#b8322a; --maple-soft:#f7e4e1; --lake:#1d5b74; --lake-soft:#e2eef3;
  --ok:#2c6e49; --ok-soft:#e3f1e8; --warn:#8a5a00; --warn-soft:#fbf0d9;
  --display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11161b; --surface:#192028; --ink:#e5e9ed; --muted:#9aa5b0; --line:#2a333d;
  --maple:#ff6e61; --maple-soft:#3a1f1d; --lake:#74b6d1; --lake-soft:#16303b;
  --ok:#7fcf9c; --ok-soft:#163024; --warn:#f0c062; --warn-soft:#3a2e14; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11161b; --surface:#192028; --ink:#e5e9ed; --muted:#9aa5b0; --line:#2a333d;
  --maple:#ff6e61; --maple-soft:#3a1f1d; --lake:#74b6d1; --lake-soft:#16303b;
  --ok:#7fcf9c; --ok-soft:#163024; --warn:#f0c062; --warn-soft:#3a2e14; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.85;direction:rtl}
a{color:var(--lake);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--maple);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;line-height:1.35;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
.bar{background:var(--ink);color:var(--bg);position:sticky;top:env(safe-area-inset-top,0px);z-index:9}
.bar .wrap{display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--bg);text-decoration:none;white-space:nowrap}
.leaf{width:26px;height:26px;flex:none}
.bar input{flex:1;min-width:0;background:color-mix(in srgb,var(--bg) 12%,transparent);border:1px solid color-mix(in srgb,var(--bg) 25%,transparent);color:var(--bg);border-radius:8px;padding:8px 12px;font:inherit;font-size:.95rem}
.bar input::placeholder{color:color-mix(in srgb,var(--bg) 65%,transparent)}

/* hero */
.hero{padding-block:44px 28px;border-bottom:1px solid var(--line)}
.hero .kicker{color:var(--maple);font-weight:600;letter-spacing:.02em;font-size:.95rem}
.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);margin-block:6px 12px}
.hero p.lead{max-width:62ch;color:var(--muted);font-size:1.08rem;margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:26px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.fact b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.fact span{color:var(--muted);font-size:.88rem;line-height:1.5;display:block}

/* main grid */
.grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;padding-block:32px 60px}
.toc{position:sticky;top:calc(70px + env(safe-area-inset-top,0px));align-self:start;max-height:calc(100vh - 90px);overflow:auto;font-size:.95rem}
.toc h2{font-size:.85rem;color:var(--muted);font-family:var(--body);font-weight:600;margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:5px 10px;border-radius:6px;color:var(--ink);text-decoration:none;border-inline-start:2px solid transparent}
.toc a:hover{background:var(--surface)}
.toc a.on{border-inline-start-color:var(--maple);background:var(--surface);font-weight:600}
.chips{display:none}

main{min-width:0}
section.s{padding-block:28px;border-bottom:1px solid var(--line);scroll-margin-top:80px}
section.s:first-child{padding-top:0}
.eyebrow{font-size:.85rem;color:var(--maple);font-weight:600;margin-bottom:4px}
section.s h2{font-size:clamp(1.6rem,3.6vw,2.1rem);margin-bottom:10px}
section.s h3{font-size:1.2rem;margin-block:22px 8px}
section.s p, section.s li{max-width:70ch}
section.s ul,section.s ol{padding-inline-start:1.3em;margin:8px 0}
section.s li{margin-block:4px}
.en{direction:ltr;unicode-bidi:isolate;font-family:var(--body);font-variant-numeric:tabular-nums}

/* source tags */
.tag{display:inline-block;font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:99px;vertical-align:middle;margin-inline-start:4px;line-height:1.7}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.rp{background:var(--warn-soft);color:var(--warn)}

/* steps (real sequences only) */
.steps{counter-reset:st;list-style:none;padding:0!important;display:grid;gap:10px}
.steps li{counter-increment:st;position:relative;padding-inline-start:44px;max-width:none}
.steps li::before{content:counter(st);position:absolute;inset-inline-start:0;top:2px;width:30px;height:30px;border-radius:50%;background:var(--lake-soft);color:var(--lake);display:grid;place-items:center;font-weight:700;font-size:.9rem}

/* callouts */
.note{border-inline-start:3px solid var(--lake);background:var(--lake-soft);padding:12px 16px;border-radius:0 8px 8px 0;margin:14px 0;max-width:72ch}
.note.red{border-color:var(--maple);background:var(--maple-soft)}
.note strong{display:block;margin-bottom:2px}

/* tables */
.tbl{overflow-x:auto;margin:12px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.95rem}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}
th{background:color-mix(in srgb,var(--lake-soft) 60%,var(--surface));font-weight:600}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* cards for places / orgs */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.card h4{margin:0 0 4px;font-size:1.02rem}
.card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.7}
.card a{font-size:.88rem}

/* checklist */
.check{list-style:none;padding:0!important;display:grid;gap:8px}
.check label{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;max-width:72ch}
.check input{width:20px;height:20px;margin-top:5px;accent-color:var(--maple);flex:none}
.check input:checked + span{text-decoration:line-through;color:var(--muted)}
.check small{display:block;color:var(--muted);text-decoration:none}
.progress{display:flex;align-items:center;gap:12px;margin:10px 0 14px;font-size:.92rem;color:var(--muted)}
.progress .trk{flex:1;max-width:320px;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.progress .fill{height:100%;background:var(--maple);width:0;transition:width .3s}

/* phone list */
.phones{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.ph div{min-width:0}
.ph b{display:block;font-size:.95rem}
.ph .en{font-size:1.1rem;font-weight:700;color:var(--maple);user-select:all}
.cp{background:none;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 10px;font:inherit;font-size:.82rem;cursor:pointer;flex:none}
.cp:hover{border-color:var(--lake)}

/* glossary */
.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.gl div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.gl b{font-family:var(--body);direction:ltr;unicode-bidi:isolate;display:block;color:var(--lake)}
.gl span{font-size:.92rem}

#empty{display:none;padding:30px 0;color:var(--muted)}
footer{border-top:1px solid var(--line);padding-block:26px;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer b{color:var(--ink);font-family:var(--display)}
mark{background:var(--warn-soft);color:inherit;border-radius:3px}

/* photo hero: fixed light-on-dark text over a darkened photo, same in both themes */
.hero.photo{position:relative;border:0;padding-block:96px 40px;background:#0f1418 center/cover no-repeat;color:#f3f5f6;isolation:isolate}
.hero.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,18,.35) 0%,rgba(10,14,18,.55) 45%,rgba(10,14,18,.92) 100%)}
.hero.photo .kicker{color:#ffb3aa}
.hero.photo h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero.photo p.lead{color:#dfe5e9}
.hero.photo .fact{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.hero.photo .fact b{color:#fff}
.hero.photo .fact span{color:#d5dce1}
.hero.photo .verified{font-size:.72rem;color:#9fe0b6;display:block;margin-top:2px}
.credit{font-size:.75rem;color:#c0c8ce;margin-top:18px}

/* full-bleed photo band opening each part of the guide */
.band{position:relative;margin-block:8px 0;min-height:240px;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;background:#11161b center/cover no-repeat;isolation:isolate;scroll-margin-top:80px}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,12,16,.88) 0%,rgba(8,12,16,.25) 65%,rgba(8,12,16,.05) 100%)}
.band div{padding:22px 24px;color:#fff;max-width:60ch}
.band small{display:block;color:#ffb3aa;font-weight:600;font-size:.85rem;letter-spacing:.02em}
.band h2{color:#fff;font-size:clamp(1.5rem,4vw,2.2rem)}
.band p{margin:4px 0 0;color:#dbe2e6;font-size:.95rem;line-height:1.7}
.figure{margin:16px 0;border-radius:12px;overflow:hidden;max-width:100%}
.figure div{aspect-ratio:16/7;background:center/cover no-repeat;max-width:100%}

/* FAQ */
details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 16px;margin-block:8px;max-width:76ch}
summary{cursor:pointer;font-weight:600;list-style-position:inside}
details[open] summary{margin-bottom:6px;color:var(--maple)}
details p{margin:0}

/* month strip */
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.months div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;border-top:3px solid var(--c,var(--lake))}
.months b{display:block;font-family:var(--display)}
.months span{font-size:.88rem;color:var(--muted);line-height:1.6;display:block}
.months .num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

@media (max-width:900px){
  .hero.photo{padding-block:64px 28px}
  .band{min-height:200px}
  .grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:16px}
  .toc{display:none}
  .chips{display:flex;gap:8px;overflow-x:auto;padding-block:10px;position:sticky;top:calc(56px + env(safe-area-inset-top,0px));background:var(--bg);z-index:5;border-bottom:1px solid var(--line);scrollbar-width:none}
  .chips a{white-space:nowrap;padding:4px 12px;border:1px solid var(--line);border-radius:99px;color:var(--ink);text-decoration:none;font-size:.88rem;background:var(--surface)}
  .chips a.on{border-color:var(--maple);color:var(--maple)}
  .brand span{display:none}
  section.s{scroll-margin-top:120px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}

/* ---- multi-page additions ---- */
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
.muted{color:var(--muted)}

/* search */
.srch{position:relative;flex:1;min-width:0}
.srch input{width:100%;box-sizing:border-box}
.sres{position:absolute;inset-inline:0;top:calc(100% + 6px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;max-height:70vh;overflow:auto;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.sres a{display:block;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.sres a:last-child{border-bottom:0}
.sres a:hover,.sres a:focus-visible{background:var(--lake-soft)}
.sres b{display:block;font-size:.98rem}
.sres small{display:block;color:var(--maple);font-size:.78rem}
.sres span{display:block;color:var(--muted);font-size:.85rem;line-height:1.6}
.snone{margin:0;padding:12px 14px;color:var(--muted)}

/* side navigation */
.toc nav{display:grid;gap:14px}
.navtop{display:grid;gap:2px}
.navpart b{display:block;font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:4px}
.navpart ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
nav [data-id]{display:block;padding:5px 10px;border-radius:6px;color:var(--ink);text-decoration:none;border-inline-start:2px solid transparent;font-size:.93rem}
nav [data-id]:hover{background:var(--surface)}
nav [data-id].on{border-inline-start-color:var(--maple);background:var(--surface);font-weight:600}
nav [data-id].rec::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-inline-start:6px;vertical-align:middle}
nav [data-id].na{opacity:.55}
.mnav{display:none}

/* page head */
.band.pagehead{margin-bottom:18px;min-height:200px}
.band h1{color:#fff;font-size:clamp(1.6rem,4.5vw,2.4rem);margin:2px 0 0}
#statusNote:empty{display:none}
.pill{display:inline-block;background:var(--ok-soft);color:var(--ok);border-radius:99px;padding:4px 12px;font-size:.88rem;margin-bottom:10px}
.pill a{color:inherit}
.onpage{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 16px;margin-bottom:16px}
.onpage b{font-size:.85rem;color:var(--muted)}
.onpage ul{margin:4px 0 0;padding-inline-start:1.2em;columns:2;column-gap:24px}
.onpage li{font-size:.92rem;break-inside:avoid}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.prevnext a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;min-width:0}
.prevnext a:hover{border-color:var(--lake)}
.prevnext small{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.prevnext .next{text-align:left}
.disc{color:var(--muted);font-size:.85rem;margin-top:18px}
section.s{border-bottom:0}

/* index */
.hero .upd{margin:16px 0 0;color:#e7ecef;font-size:.95rem}
.blk{padding-block:40px 8px}
.blk h2{font-size:clamp(1.5rem,3.5vw,2rem);margin-bottom:8px}
.lead2{color:var(--muted);max-width:62ch;margin:0 0 16px}
.whobtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.whob{font:inherit;text-align:start;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;display:grid;gap:2px}
.whob b{font-size:1rem}
.whob span{font-size:.85rem;color:var(--muted);line-height:1.6}
.whob:hover{border-color:var(--lake)}
.whob[aria-pressed="true"]{border-color:var(--maple);background:var(--maple-soft)}
.path{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.path h3{margin:0 0 4px;font-size:1.2rem}
.path h4{margin:16px 0 4px;font-size:1rem}
.path p{margin:0 0 8px;color:var(--muted)}
.pathlist{columns:2;column-gap:28px;padding-inline-start:1.4em;margin:6px 0}
.pathlist li{break-inside:avoid;margin-block:3px}
.nalist{padding-inline-start:1.2em;margin:4px 0;color:var(--muted);font-size:.93rem}
.promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--lake-soft);border-radius:14px;padding:20px 24px}
.promo small{color:var(--lake);font-weight:600}
.promo h2{margin:2px 0 4px}
.promo p{margin:0;max-width:56ch}
.btn{display:inline-block;background:var(--maple);color:#fff;text-decoration:none;font-weight:600;border-radius:10px;padding:10px 20px}
.btn:hover{filter:brightness(1.08)}
.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:12px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.pimg{aspect-ratio:16/7;background:#1b2229 center/cover no-repeat;max-width:100%}
.pbody{padding:14px 16px 16px}
.pbody small{color:var(--maple);font-weight:600}
.pbody h3{margin:2px 0 4px;font-size:1.15rem}
.pbody p{margin:0 0 8px;color:var(--muted);font-size:.9rem;line-height:1.7}
.pbody ul{margin:0;padding-inline-start:1.1em;font-size:.93rem}
.pbody li{margin-block:2px}

/* calculator */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0;max-width:720px}
.calc label{display:grid;gap:4px;font-weight:600;font-size:.92rem}
.calc input,.calc select{font:inherit;font-weight:400;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);min-width:0;width:100%;box-sizing:border-box}
.netbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:8px 0 14px;max-width:720px}
.netbox div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.netbox div:first-child{border-color:var(--maple);background:var(--maple-soft)}
.netbox span{display:block;color:var(--muted);font-size:.85rem}
.netbox b{font-family:var(--display);font-size:1.6rem;font-variant-numeric:tabular-nums;direction:ltr;display:block;text-align:right}
tr.em td{font-weight:700}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:26px;color:var(--muted);font-size:.9rem;margin-top:30px}
.foot .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:start}
.foot b{color:var(--ink)}
.foot .ph.mini{padding:8px 12px}
.foot .ph.mini .en{font-size:.95rem;color:var(--lake)}
.foot .copy{align-self:end}

@media (max-width:900px){
  .mnav{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 14px;margin-bottom:14px}
  .mnav summary{cursor:pointer;font-weight:600}
  .mnav nav{display:grid;gap:12px;margin-top:10px}
  .onpage ul,.pathlist{columns:1}
  .band.pagehead{min-height:150px}
}
/* fixes */
main section.s{padding-top:4px}
#calcRows td.num{direction:ltr;text-align:right}
.calc,.netbox{max-width:none}

/* site-wide Canada background photo, veiled for readability */
:root{--veil:rgba(245,246,244,.88)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--veil:rgba(17,22,27,.9)}}
:root[data-theme="dark"]{--veil:rgba(17,22,27,.9)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--veil),var(--veil)),url(../img/moraine.jpg) center/cover no-repeat}

/* ---- v3: organised navigation ---- */
.hero.photo{padding-block:64px 32px}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.sechead .lead2{margin:0 0 12px}
/* quick tiles */
.blk[aria-label]{padding-top:24px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.qt{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);border-top:3px solid var(--maple);transition:transform .15s,border-color .15s}
.qt:hover{transform:translateY(-2px);border-color:var(--lake)}
.qt b{font-size:1rem}
.qt span{font-size:.82rem;color:var(--muted)}
/* hub */
.hub{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.hubtabs{display:grid;gap:4px;position:sticky;top:calc(76px + env(safe-area-inset-top,0px))}
.hubtab{font:inherit;text-align:start;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;font-weight:600;font-size:.95rem}
.hubtab small{grid-column:1/-1;color:var(--muted);font-weight:500;font-size:.75rem}
.hubtab i{font-style:normal;font-size:.75rem;color:var(--muted);background:var(--bg);border-radius:99px;padding:0 8px;grid-row:2;grid-column:2}
.hubtab:hover{border-color:var(--lake)}
.hubtab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hubtab[aria-selected="true"] small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.hubpanel{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hubhead{min-height:150px;display:flex;align-items:flex-end;background:#11161b center/cover no-repeat;position:relative;isolation:isolate}
.hubhead::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,12,16,.85),rgba(8,12,16,.15))}
.hubhead div{padding:16px 20px;color:#fff}
.hubhead small{color:#ffb3aa;font-weight:600}
.hubhead h3{color:#fff;font-size:1.5rem;margin:2px 0}
.hubhead p{margin:0;color:#dbe2e6;font-size:.92rem;max-width:60ch;line-height:1.7}
.ptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:16px}
.pt{display:grid;gap:4px;align-content:start;border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);background:var(--bg);min-width:0}
.pt:hover{border-color:var(--maple)}
.pt b{font-size:1rem;color:var(--lake)}
.pt span{font-size:.84rem;color:var(--muted);line-height:1.65}
/* sidebar collapsible parts */
details.navpart summary{cursor:pointer;list-style:none;font-size:.85rem;color:var(--muted);padding:4px 6px;border-radius:6px}
details.navpart summary::-webkit-details-marker{display:none}
details.navpart summary::before{content:"◂";display:inline-block;margin-inline-end:6px;transition:transform .15s;font-size:.75rem}
details.navpart[open] summary::before{transform:rotate(-90deg)}
details.navpart summary b{color:var(--ink);font-size:.8rem}
details.navpart summary i{font-style:normal;font-size:.72rem;background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:0 6px}
details.navpart summary:hover{background:var(--surface)}
details.navpart ol{margin-top:4px}
/* sub-tabs inside long pages */
.subtabs{position:sticky;top:calc(66px + env(safe-area-inset-top,0px));z-index:6;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(6px);padding:10px 2px;margin:8px 0 14px;border-bottom:1px solid var(--line);align-items:center}
.subtabs button{font:inherit;font-size:.9rem;white-space:nowrap;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer;flex:none}
.subtabs button:hover{border-color:var(--lake)}
.subtabs button[aria-selected="true"]{background:var(--maple);border-color:var(--maple);color:#fff;font-weight:600}
.stcount{flex:none;font-size:.8rem;color:var(--muted);padding-inline:6px;margin-inline-start:auto}
.subpanel{animation:fadein .2s ease}
@keyframes fadein{from{opacity:.4}to{opacity:1}}
.subpanel > h3:first-child{margin-top:4px}
.nextsub{font:inherit;display:block;margin-top:22px;background:var(--lake-soft);color:var(--lake);border:0;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:600;text-align:start;max-width:100%}
.nextsub:hover{filter:brightness(.97)}
@media (max-width:900px){
  .hub{grid-template-columns:minmax(0,1fr)}
  .hubtabs{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:5;display:flex;overflow-x:auto;gap:6px;background:var(--bg);padding:6px 0;scrollbar-width:none}
  .hubtab{flex:none;display:block;padding:7px 12px}
  .hubtab small,.hubtab i{display:none}
  .subtabs{top:calc(60px + env(safe-area-inset-top,0px))}
  .ptgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px;gap:8px}
  .qgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .qt{padding:10px}
  .qt span{display:none}
}
@media (max-width:420px){.ptgrid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.subpanel{animation:none}.qt{transition:none}}
/* sidebar parts must not inherit the FAQ <details> card style */
details.navpart{background:none;border:0;padding:0;margin:0;max-width:none}
details.navpart summary{display:flex;align-items:center;gap:6px;margin:0;color:var(--ink);font-weight:600;font-size:.88rem}
details.navpart summary b{display:inline;margin:0;color:var(--muted);font-weight:600;font-size:.75rem}
details.navpart summary i{margin-inline-start:auto}
details.navpart[open] summary{color:var(--maple)}
.toc nav{gap:6px}
details.navpart summary b{white-space:nowrap}

/* photos */
.img-hero.img-hero{background-image:url(../img/hero.jpg)}
.img-flag.img-flag{background-image:url(../img/flag.jpg)}
.img-lake.img-lake{background-image:url(../img/lake.jpg)}
.img-autumn.img-autumn{background-image:url(../img/autumn.jpg)}
.img-canoe.img-canoe{background-image:url(../img/canoe.jpg)}
.img-night.img-night{background-image:url(../img/night.jpg)}
.img-streetcar.img-streetcar{background-image:url(../img/streetcar.jpg)}
.img-moraine.img-moraine{background-image:url(../img/moraine.jpg)}
.img-snowstreet.img-snowstreet{background-image:url(../img/snowstreet.jpg)}
.img-maple.img-maple{background-image:url(../img/maple.jpg)}
.img-snow.img-snow{background-image:url(../img/snow.jpg)}