/* Snowflake1: green-yellow and ink, swapped in dark mode. */
:root{
  color-scheme:light;
  --canvas:#dcf05a;--ink:#0c0d08;--muted:#3f4718;--line:#a3b53a;--hover:#cbe04a;
  --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --page:1280px;--gutter:clamp(20px,4vw,48px);--radius:14px;--rule:2px solid var(--ink);
}
html[data-theme=dark]{color-scheme:dark;--canvas:#0c0d08;--ink:#dcf05a;--muted:#a9b36b;--line:#3a421c;--hover:#1d2111}
@media (prefers-color-scheme:dark){
  html:not([data-theme]){color-scheme:dark;--canvas:#0c0d08;--ink:#dcf05a;--muted:#a9b36b;--line:#3a421c;--hover:#1d2111}
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--canvas)}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-thickness:4px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,p{margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-80px;z-index:2;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--canvas);font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}

.site-header,main,.site-footer{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
main{flex:1}

/* Pixel snowflake: snowflake.svg used as a mask so it takes the theme ink. Sizes stay whole multiples of the 17-cell grid. */
.mark{--cell:2;display:block;flex-shrink:0;width:calc(var(--cell) * 17px);height:calc(var(--cell) * 17px);background:currentColor;-webkit-mask:url(/snowflake.svg) center/contain no-repeat;mask:url(/snowflake.svg) center/contain no-repeat}

/* Header */
.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-block:20px}
.brand{display:inline-flex;align-items:center;gap:12px;margin-right:auto;font-size:19px;font-weight:850;letter-spacing:-.02em;text-decoration:none}
.brand:hover .brand-name{text-decoration:underline;text-decoration-thickness:3px}
.home .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-nav{display:flex;gap:4px}
.site-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;font-weight:700;text-decoration:none}
.site-nav a:hover{background:var(--hover)}
.site-nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:3px}

/* Appearance: System / Light / Dark radio group with a sliding selection. */
.appearance{display:none;position:relative;grid-template-columns:repeat(3,1fr);min-inline-size:0;margin:0;padding:3px;border:var(--rule);border-radius:999px}
.js .appearance{display:grid}
.appearance::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:999px;background:var(--ink);transform:translateX(calc(var(--appearance-index,0) * 100%));transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
html[data-appearance=light]{--appearance-index:1}
html[data-appearance=dark]{--appearance-index:2}
.appearance label{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:750;cursor:pointer;-webkit-tap-highlight-color:transparent}
.appearance label:hover{background:var(--hover)}
.appearance input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.appearance input:checked~*{color:var(--canvas)}
.appearance label:has(input:checked){background:none}
.appearance label:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.appearance svg{width:18px;height:18px;fill:currentColor;shape-rendering:crispEdges}
.appearance-text{line-height:1}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(56px,8vw,112px);padding-block:22px 28px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.site-footer nav{display:flex;gap:20px}
.site-footer a{color:var(--ink);font-weight:700}

/* Home */
.home{padding-top:clamp(24px,5vw,64px)}
.display{font-size:clamp(44px,13.5vw,200px);font-weight:900;line-height:.86;letter-spacing:-.055em;margin-left:-.04em}
.lede{max-width:34ch;margin-top:clamp(20px,2.4vw,32px);padding-bottom:clamp(18px,2vw,24px);font-size:clamp(19px,2vw,26px);font-weight:650;line-height:1.3;letter-spacing:-.01em}
.home-body{display:grid;gap:clamp(32px,5vw,64px);padding-top:clamp(28px,4vw,48px);border-top:var(--rule)}
.hero-mark{--cell:12}
.resources h2{color:var(--muted);font-size:15px;font-weight:700;margin-bottom:14px}
.link-list{list-style:none;margin:0;padding:0;border-bottom:var(--rule)}
.link-list li{border-top:var(--rule)}
.link-list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-inline:-14px;padding:18px 14px;border-radius:var(--radius);font-size:clamp(22px,2.6vw,32px);font-weight:850;letter-spacing:-.025em;line-height:1.15;text-decoration:none}
.link-list a:hover{background:var(--ink);color:var(--canvas)}
.link-list .detail{font-size:16px;font-weight:600;letter-spacing:0;color:var(--muted)}
.link-list a:hover .detail{color:inherit}
.arrow{margin-left:auto;transition:transform 180ms ease}
.link-list a:hover .arrow{transform:translateX(6px)}

/* Information pages */
.page{padding-top:clamp(24px,5vw,64px)}
.page-title{font-size:clamp(40px,8.5vw,112px);font-weight:900;line-height:.92;letter-spacing:-.05em;margin-left:-.03em;max-width:12ch}
.page .lede{max-width:40ch}
.page-body{padding-top:clamp(28px,4vw,48px);border-top:var(--rule)}
.cards{display:grid;gap:18px}
.card{padding:clamp(22px,3vw,32px);border:var(--rule);border-radius:var(--radius)}
.card h2,.policy h2{font-size:22px;font-weight:850;letter-spacing:-.02em;line-height:1.25;margin-bottom:10px}
.card p,.policy p{max-width:68ch;color:var(--muted)}
.policy p+p{margin-top:14px}
.policy a,.card a,.note a{color:var(--ink);font-weight:700}
.note{margin-top:28px;font-size:18px}
.policy section{display:grid;gap:4px 48px;padding-block:28px;border-bottom:1px solid var(--line)}
.policy section:first-child{padding-top:0}
.policy section:last-child{border-bottom:0}

/* Theme change: brief colour crossfade only. */
html.is-theme-switching,html.is-theme-switching *{transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,outline-color 300ms ease}

/* Pixel reveal of the homepage mark, from the centre outward in whole-cell steps. */
@media (prefers-reduced-motion:no-preference){
  .hero-mark{animation:mark-in 640ms steps(9,end) 120ms both}
}
@keyframes mark-in{from{clip-path:inset(50%)}to{clip-path:inset(0)}}

@media (min-width:480px){.hero-mark{--cell:14}}
@media (min-width:720px){
  .hero-mark{--cell:16}
  .cards{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .home-body{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .hero-mark{--cell:20;grid-column:2;grid-row:1}
  .resources{grid-column:1;grid-row:1;max-width:560px}
  .policy section{grid-template-columns:minmax(180px,1fr) 2.4fr}
  .policy h2{grid-column:1;grid-row:1;margin-bottom:0}
  .policy section>:not(h2){grid-column:2}
}
@media (min-width:1200px){.hero-mark{--cell:24}}

@media (max-width:599px){
  body{font-size:16px}
  .site-header{padding-block:14px;column-gap:16px}
  .site-nav{order:3;flex-basis:100%;margin-inline:-12px}
  .appearance label{padding:0 11px}
  .appearance-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .appearance::before,.arrow,html.is-theme-switching,html.is-theme-switching *{transition:none}
  .link-list a:hover .arrow{transform:none}
}