/* SKIMBACK shell — tokens from mockup/v1/DESIGN.md. Build width 1920: 1rem = 16px at 1920, scales with the viewport. */
:root{
  --paper:#F4B92B; --ink:#11161A; --green-deep:#005844; --green-fee:#0B6E4F; --green-skim:#90C77C;
  --mint:#B9EFB4; --receipt:#E9F8DF; --white:#FFFFFF; --error:#D9261C; --error-bg:#FFE1E1;
  --bg:var(--paper); --surface:var(--receipt);
  --font-display:"Dela Gothic One",Impact,sans-serif;
  --font-body:"Radio Canada",Arial,sans-serif;
  --font-mono:"Roboto Mono","Ubuntu Mono",ui-monospace,monospace;

  /* page frame (frame.json): 50px left / 46px right at 1920, one container for every route */
  --gutter-l:3.125rem; --gutter-r:2.875rem;
  --nav-h:5.75rem; --foot-h:24.5rem;

  /* text floor: never below 12px */
  --fs-nav:max(12px,1rem); --fs-body:max(12px,1rem); --fs-small:max(12px,.875rem); --fs-mono:max(12px,1rem);

  /* rules: widths + colours per rule kind (BORDER_TABLE / DESIGN.md §4b); hairlines never below 1px */
  --rule-w-frame:max(1px,.125rem);
  --rule-w-row:max(1px,.0625rem);
  --rule-w-divider:max(1px,.125rem);
  --rule-w-double:max(1px,.0625rem);
  --rule-c-select:#9CB6AD;
  --rule-c-pill:#C7DEC7;
  --rule-c-pill-on:#EAFFD0;
  --rule-c-input:rgba(17,22,26,.4);
  --rule-c-row-white:#E6E8EC;
  --rule-c-row-pale:#B6C8BA;
  --rule-c-row-dark:#609A85;
  --rule-c-row-book:#2D7A63;
  --rule-c-divider:var(--ink);

  /* motion family: one easing, three durations */
  --ease-cut:cubic-bezier(.2,.7,.1,1);
  --t-stamp:180ms; --t-grow:560ms; --t-count:900ms; --t-sweep:1200ms; --t-wipe:240ms;
}
html{font-size:calc(100vw/120);background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.4;min-height:100vh;overflow-x:hidden}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none;margin:0;border-radius:0}
:where(button){cursor:pointer}
a{color:inherit}
img{max-width:100%}

/* ---------- nav N13 "poster number row" (LUAT 62 v2.2): every route always on show as big numbered type printed across the poster; the current one is a solid green-skim block (the skimmed slice) ---------- */
.site-nav{height:var(--nav-h);background:var(--paper);display:flex;align-items:stretch;padding:0 var(--gutter-r) 0 var(--gutter-l);position:relative;z-index:30}
.brand{flex:none;display:flex;align-items:center;gap:.75rem;padding-right:1.25rem;font-family:var(--font-display);font-size:1.875rem;font-weight:400;text-decoration:none}
.brand img{height:3.625rem;width:auto;min-height:36px;object-fit:contain}
.num-row{flex:1;min-width:0;display:flex;align-items:stretch;margin:0;padding:0;list-style:none}
.num-row li{display:flex}
.num-row .nr-route{flex:1 1 auto}
.nr-link{flex:1;display:flex;align-items:center;gap:.4375rem;padding:0 .6875rem;font-family:var(--font-display);font-size:1.5rem;line-height:1;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;white-space:nowrap;color:var(--ink);background:var(--paper);transition:background var(--t-stamp) var(--ease-cut),color var(--t-stamp) var(--ease-cut)}
.nr-n{font-size:max(12px,1rem);color:var(--green-fee);transform:translateY(-.5rem);transition:transform var(--t-stamp) var(--ease-cut)}
.nr-link:hover .nr-n,.nr-link:focus-visible .nr-n{transform:translateY(0)}
.nr-link:hover .nr-name,.nr-link:focus-visible .nr-name{color:var(--green-deep)}
.nr-link.is-active{background:var(--green-skim);color:var(--ink)}
.nr-link.is-active .nr-n{color:var(--green-deep);transform:translateY(0)}
.nr-link.is-active .nr-name{color:var(--ink)}
/* X · Telegram: quiet ink brand glyphs after a short ink tick — secondary to the route row; hover stamps the same green-skim block as the active route */
.nr-social{display:flex;align-items:center}
.nr-social-x{margin-left:1rem;padding-left:1rem;position:relative}
.nr-social-x::before{content:"";position:absolute;left:0;top:50%;width:max(2px,.125rem);height:1.75rem;transform:translateY(-50%);background:var(--ink)}
.nr-ico{display:grid;place-items:center;width:max(40px,3rem);height:max(40px,3rem);color:var(--ink);text-decoration:none;transition:background var(--t-stamp) var(--ease-cut),color var(--t-stamp) var(--ease-cut)}
.nr-ico svg{display:block;width:max(16px,1.375rem);height:max(16px,1.375rem);transition:transform var(--t-stamp) var(--ease-cut)}
.nr-ico-tg svg{width:max(18px,1.625rem);height:max(18px,1.625rem);transform:translateX(-.0625rem)}
.nr-ico:hover,.nr-ico:focus-visible{background:var(--green-skim);color:var(--green-deep)}
.nr-ico:hover svg,.nr-ico:focus-visible svg{transform:translateY(-.125rem)}
.nr-ico:focus-visible{outline:max(2px,.125rem) solid var(--ink);outline-offset:-.125rem}
a.soon{cursor:default}

/* ---------- page frame: one container, every route ---------- */
main{padding:0 var(--gutter-r) 0 var(--gutter-l);min-height:calc(100vh - var(--nav-h) - var(--foot-h))}
main.is-leaving{opacity:1;transition:none}

/* ---------- footer F1 "giant wordmark": small boundary line + sources on top, SKIMBACK runs the full width; its foot is the skimmed slice ---------- */
.site-foot{min-height:var(--foot-h);background:var(--paper);overflow-x:clip;padding:4rem var(--gutter-r) 2.25rem var(--gutter-l);display:flex;flex-direction:column;justify-content:flex-end;gap:2.25rem}
.foot-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.75rem;font-size:max(12px,1.0625rem)}
.foot-mark{height:3.625rem;width:auto;min-height:36px}
.foot-copy{margin:0;line-height:1.35;max-width:52rem}
.foot-copy .source{display:block;font-size:var(--fs-small);margin-top:.375rem}
.foot-links{font-family:var(--font-mono);font-weight:500;white-space:nowrap}
.foot-links a{text-decoration:none}
.window{display:inline-flex;align-items:center;gap:.5rem;height:2.875rem;background:var(--receipt);border-radius:1.5rem;padding:0 1.25rem;margin-left:.9375rem}
.copy-btn{font:inherit;font-weight:700;letter-spacing:.02em;transition:transform var(--t-stamp) var(--ease-cut)}
.copy-btn:hover{transform:translateY(-1px)}
.wordmark{display:block;width:100%;height:auto;overflow:visible}
.wordmark text{font-family:var(--font-display);font-size:257px}
.wm-ink{fill:var(--ink)}
.wm-skim{fill:var(--green-fee);transition:fill 560ms var(--ease-cut)}
.site-foot:hover .wm-skim{fill:var(--green-deep)}
/* ---------- rule classes: the ONLY place borders are drawn ---------- */
.rule-select{border:var(--rule-w-frame) solid var(--rule-c-select);border-radius:.875rem;box-sizing:border-box}
.rule-pill{border:var(--rule-w-frame) solid var(--rule-c-pill);border-radius:.75rem;box-sizing:border-box}
.rule-pill.is-on,.rule-pill[aria-pressed="true"]{background:var(--mint);border-color:var(--rule-c-pill-on);color:var(--ink)}
.rule-input{display:flex;align-items:center;border:var(--rule-w-frame) solid var(--rule-c-input);border-radius:.75rem;padding:0 1rem;box-sizing:border-box;background:var(--white)}
.rule-input>:where(input,select,textarea){flex:1;min-width:0;height:100%;padding:0;outline:0}
.rule-input.is-sm{border-radius:.5rem}
.rule-row{border-bottom:var(--rule-w-row) solid var(--rule-c-row-pale)}
.rule-row.on-white{border-bottom-color:var(--rule-c-row-white)}
.rule-row.on-dark{border-bottom-color:var(--rule-c-row-dark)}
.rule-row.on-book{border-bottom-color:var(--rule-c-row-book)}
.rule-divider{border-left:var(--rule-w-divider) solid var(--rule-c-divider)}
.rule-tile{border-bottom:max(1px,.1875rem) solid #0B5E3F;box-sizing:border-box}
.rule-bar{border-top:var(--rule-w-row) solid #003B2A}
.rule-edge{border:max(1px,.125rem) solid #F0AA14;box-sizing:border-box}
.rule-edge.no-l{border-left:0}
.rule-edge.on-dark{border-color:#FFE680}
.bk-table>.rule-row:last-child{border-bottom:0}
/* seams: the 1px edge line the mockup draws where a fill meets the ground (BORDER_BRIEF 'FILL EDGE'); one side per class */
.rule-seam-t,.rule-seam-b,.rule-seam-l,.rule-seam-r{box-sizing:border-box;border:0 solid var(--rule-c-seam,#00382B)}
.rule-seam-t{border-top-width:var(--rule-w-row)}
.rule-seam-b{border-bottom-width:var(--rule-w-row)}
.rule-seam-l{border-left-width:var(--rule-w-row)}
.rule-seam-r{border-right-width:var(--rule-w-row)}
.seam-ink{--rule-c-seam:#000}
.seam-red{--rule-c-seam:#D0362A}
.seam-y{--rule-c-seam:#E9A60F}
.seam-grey{--rule-c-seam:#E6E8EC}
.rule-seam-t.seam-mint-t{border-top-color:#8CF0BE}
.rule-double{border:var(--rule-w-double) solid var(--green-deep);outline:var(--rule-w-double) solid var(--mint);outline-offset:max(2px,.125rem);border-radius:.875rem;box-sizing:border-box}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- motion: paper-and-envelope character (DESIGN.md §10). Transform/opacity only. ---------- */
.wipe{position:fixed;inset:0;background:var(--green-fee);transform:scaleX(0);transform-origin:left;z-index:50;pointer-events:none}
[data-slip-in]{will-change:transform,opacity}
.js-motion [data-slip-in]:not(.is-in){opacity:0;transform:translateY(2.25rem) rotate(-.6deg)}
[data-slip-in].is-in{opacity:1;transform:none;transition:opacity 360ms var(--ease-cut),transform 560ms var(--ease-cut)}
.lift{transition:transform var(--t-stamp) var(--ease-cut)}
.lift:hover{transform:translateY(-.1875rem) rotate(-.4deg)}
.press:active{transform:scale(.97)}
.press{transition:transform var(--t-stamp) var(--ease-cut)}
[data-grow]{transform-origin:left center}
[data-grow="y"]{transform-origin:center bottom}
.skim-blade{position:absolute;top:0;bottom:0;left:0;width:.25rem;background:var(--ink);transform:translateX(0)}
.stamp{display:inline-block;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .wipe{display:none}
  .js-motion [data-slip-in]:not(.is-in){opacity:1;transform:none}
  .lift,.press,.copy-btn,.nr-link,.nr-n,.nr-ico,.nr-ico svg,.wm-skim{transition:none}
}

/* ---------- below 1024: mobile layout, fixed 16px root ---------- */
@media (max-width:1023px){
  html{font-size:16px}
  :root{--gutter-l:1rem;--gutter-r:1rem;--nav-h:4.25rem;--foot-h:auto}
  /* N13 compact: brand + X/Telegram on top, the six numbered routes as a 3x2 block under it (never hidden) */
  .site-nav{flex-wrap:wrap;height:auto;padding:0}
  .brand{order:1;flex:1;min-width:0;height:var(--nav-h);padding:0 0 0 1rem;font-size:1.125rem;gap:.5rem}
  .brand img{height:2.25rem}
  .num-row{display:contents}
  .nr-social{order:2;margin:0;height:var(--nav-h)}
  .nr-social-x{margin-left:.5rem;padding-left:.625rem}
  .nr-social-x::before{height:1.5rem}
  .nr-social:last-of-type{padding-right:.5rem}
  .nr-ico{width:44px;height:44px}
  .nr-ico svg{width:18px;height:18px}
  .nr-ico-tg svg{width:22px;height:22px}
  .nr-route{order:3}
  .num-row .nr-route{flex:0 0 33.333%;min-width:0}
  .site-nav::after{content:"";order:2;flex-basis:100%;height:0}
  .nr-link{height:2.75rem;font-size:.75rem;padding:0 .25rem 0 .75rem;gap:.25rem}
  .nr-n{font-size:max(12px,.75rem);transform:none}
  .site-foot{padding:2.5rem 1rem 1.25rem;gap:1.5rem}
  .foot-top{grid-template-columns:1fr;gap:1rem}
  .foot-mark{height:2.5rem}
  .foot-links{white-space:normal}
  .window{margin-left:0}
}