/*
 * The frame every page of boardee.eu shares (October 2026, the "Apple" redesign): the fonts, the thin bar at the
 * top, the menu that folds on a phone, and the footer. Linked by the home page and by the pages that
 * scripts/build-legal.mjs generates, so that the bar and the footer are the same everywhere.
 * The bar is light here; the home page darkens it over its dark moments, in its own stylesheet.
 */

/* Self-hosted: a site that promises EU hosting cannot hand every visitor's IP address to Google before they have
   consented to anything. Geist and Geist Mono, SIL Open Font License (fonts/LICENSE-geist.txt).
   Geist as Google Fonts publishes it since 5 October 2026 (@fontsource/geist): the 2023 files left the "s" without
   hints, a bold "s" sat one pixel low under Windows. The arrow and the two shapes that build leaves out come from the
   2023 files (geist-symbols-*), declared after the alphabet so that they win for those four characters only. */
@font-face{font-family:'Geist';src:url('/fonts/geist-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/geist-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/geist-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/geist-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/geist-symbols-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+2190,U+2192,U+25BC,U+25CF}
@font-face{font-family:'Geist';src:url('/fonts/geist-symbols-500.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+2190,U+2192,U+25BC,U+25CF}
@font-face{font-family:'Geist';src:url('/fonts/geist-symbols-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+2190,U+2192,U+25BC,U+25CF}
@font-face{font-family:'Geist';src:url('/fonts/geist-symbols-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+2190,U+2192,U+25BC,U+25CF}
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---------- the bar ---------- */
/* --nav-ink is the colour of the bar's words: a registered property, so the home page can animate it */
@property --nav-ink{syntax:'<color>';inherits:true;initial-value:#1d1d1f}
.nav{--nav-ink:#1d1d1f;position:fixed;top:0;left:0;right:0;z-index:50;height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 max(20px,calc(50% - 600px));background:rgba(251,251,253,.8);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.nav .brand{justify-self:start;display:flex;align-items:center;gap:9px;color:var(--nav-ink);text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.02em}
/* two marks on top of each other: the dark one for a light bar, the light one for a dark bar */
.nav .bm{position:relative;width:26px;height:26px}
.nav .bm img{position:absolute;inset:0;width:26px;height:26px}
.nav .on-dark{opacity:0}
.nav .dot{color:#0044fd}
.nav .links{display:flex;gap:4px}
.nav .links a,.nav .signin{font-size:15px;font-weight:500;color:color-mix(in srgb,var(--nav-ink) 80%,transparent);text-decoration:none;white-space:nowrap;padding:8px 14px;border-radius:999px;transition:color .2s,background-color .2s}
.nav .links a:hover,.nav .signin:hover,.nav .links a[aria-current]{color:var(--nav-ink);background-color:color-mix(in srgb,var(--nav-ink) 8%,transparent)}
.nav .right{justify-self:end;display:flex;align-items:center;gap:6px}
.nav .cta{font-size:15px;font-weight:500;color:#fff;text-decoration:none;white-space:nowrap;background:#0044fd;border-radius:999px;padding:9px 18px;transition:background .2s}
.nav .cta:hover{background:#2a67ff}
/* the menu that folds, on a phone: a <details>, so it opens without a script */
.nav .menu{display:none;position:relative}
.nav .menu summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--nav-ink)}
.nav .menu summary::-webkit-details-marker{display:none}
.nav .menu summary svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav .menu[open] summary{background-color:color-mix(in srgb,var(--nav-ink) 8%,transparent)}
.nav .menu .panel{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;padding:8px;border-radius:18px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.08);box-shadow:0 24px 60px -24px rgba(0,15,54,.45);display:grid}
.nav .menu .panel a{display:block;padding:11px 14px;border-radius:12px;font-size:16px;font-weight:500;color:#1d1d1f;text-decoration:none}
.nav .menu .panel a:hover{background:#f5f5f7}
@media (max-width:900px){
  .nav{grid-template-columns:1fr auto;gap:10px}
  .nav .links{display:none}
  .nav .menu{display:block}
}
@media (max-width:480px){
  .nav .signin{display:none}
  .nav .cta{font-size:14px;padding:8px 16px}
}

/* ---------- the bar over the dark parts of a page ---------- */
/*
 * A page marks its dark parts .ndz1 to .ndz4. Each carries a timeline whose window is only the bar's 60 px strip
 * (the inset): the animation below runs exactly while that part is under the bar, and leaves the light bar alone the
 * rest of the time (fill: none). A change of colour, not a movement. Browsers without scroll timelines keep the
 * light bar everywhere.
 */
@supports (animation-timeline: view()) {
  body{timeline-scope:--nd1,--nd2,--nd3,--nd4}
  .ndz1{view-timeline-name:--nd1;view-timeline-inset:0 calc(100% - 60px)}
  .ndz2{view-timeline-name:--nd2;view-timeline-inset:0 calc(100% - 60px)}
  .ndz3{view-timeline-name:--nd3;view-timeline-inset:0 calc(100% - 60px)}
  .ndz4{view-timeline-name:--nd4;view-timeline-inset:0 calc(100% - 60px)}
  .nav,.nav .on-dark,.nav .on-light,.nav .dot{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:none;animation-timeline:--nd1,--nd2,--nd3,--nd4;animation-range:cover 0% cover 100%}
  .nav{animation-name:nav-dark,nav-dark,nav-dark,nav-dark}
  .nav .on-dark{animation-name:nav-shown,nav-shown,nav-shown,nav-shown}
  .nav .on-light{animation-name:nav-hidden,nav-hidden,nav-hidden,nav-hidden}
  .nav .dot{animation-name:nav-dot,nav-dot,nav-dot,nav-dot}
  @keyframes nav-dark{from,to{background-color:rgba(22,22,23,.66);border-bottom-color:rgba(255,255,255,.08);--nav-ink:#f5f5f7}}
  @keyframes nav-shown{from,to{opacity:1}}
  @keyframes nav-hidden{from,to{opacity:0}}
  @keyframes nav-dot{from,to{color:#6f9bff}}
}

/* ---------- the footer ---------- */
.site-foot{background:#f5f5f7;border-top:1px solid #e3e6ee;color:#6e6e73;font:13px/1.5 'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;padding:30px max(20px,calc(50% - 600px)) 36px;-webkit-font-smoothing:antialiased}
.site-foot .top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-bottom:20px;border-bottom:1px solid #e3e6ee}
.site-foot .brand{display:flex;align-items:center;gap:8px;color:#1d1d1f;text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.02em}
.site-foot .brand img{width:22px;height:22px}
.site-foot .brand .dot{color:#0044fd}
.site-foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 22px}
.site-foot a{color:inherit;text-decoration:none}
.site-foot nav a:hover,.site-foot .bottom a:hover{color:#1d1d1f;text-decoration:underline;text-underline-offset:2px}
.site-foot .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 22px;padding-top:16px;font-size:12px;color:#86868b}
.site-foot .bottom a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:700px){
  .site-foot nav{margin-left:0}
}