/* ==========================================================================
   BASE — reset, type, layout, accessibility.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:2rem}
body{
  background:var(--ground);color:var(--ink-2);
  font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
:target{scroll-margin-top:2rem}

/* ---- Selection & caret -------------------------------------------------- */
::selection{background:var(--pa-bg);color:var(--ink)}
input::selection{background:var(--pa-bg)}

/* ---- Focus -------------------------------------------------------------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--pa);outline-offset:3px;border-radius:var(--r-sm)}
.skip{
  position:fixed;top:-100px;left:var(--s4);z-index:2000;
  background:var(--ink);color:#fff;font-weight:600;font-size:var(--t-sm);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);transition:top var(--d-1);
}
.skip:focus{top:var(--s4)}
.vh{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Type --------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
  letter-spacing:var(--ls-tight);line-height:var(--lh-head);
  text-wrap:balance;
}
h1{font-size:var(--t-d1)}
h2{font-size:var(--t-d2)}
h3{font-size:var(--t-h3)}
p{text-wrap:pretty}

.label{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--ink-4);line-height:1.5;
}
.label--accent{color:var(--pa-ink)}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--ink-2);max-width:var(--read)}
.body{color:var(--ink-2);max-width:var(--read)}
.body strong,.lead strong{color:var(--ink);font-weight:600}
.sm{font-size:var(--t-sm)}
.xs{font-size:var(--t-xs)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.accent{color:var(--pa-ink)}
.dim{color:var(--ink-3)}

/* ---- Layout ------------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.page{width:100%;max-width:var(--page);margin-inline:auto}
.section{padding-block:var(--sec-y);position:relative}
.section + .section{padding-top:0}
.section--band{background:var(--paper);padding-block:var(--sec-y);
  margin-block:var(--sec-y);box-shadow:0 -1px 0 var(--hairline),0 1px 0 var(--hairline)}
.section--band + .section{padding-top:0}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5) clamp(1rem,2vw,1.75rem)}
.c-3{grid-column-end:span 3}.c-4{grid-column-end:span 4}.c-5{grid-column-end:span 5}
.c-6{grid-column-end:span 6}.c-7{grid-column-end:span 7}.c-8{grid-column-end:span 8}
.c-9{grid-column-end:span 9}.c-12{grid-column-end:span 12}
.start-5{grid-column-start:5}.start-6{grid-column-start:6}
.start-7{grid-column-start:7}.start-8{grid-column-start:8}

.stack{display:flex;flex-direction:column}
.stack-2{gap:var(--s2)}.stack-3{gap:var(--s3)}.stack-4{gap:var(--s4)}
.stack-5{gap:var(--s5)}.stack-6{gap:var(--s6)}.stack-7{gap:var(--s7)}
.row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}

/* ---- Reveal ------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-stagger] > *{opacity:0;transform:translateY(10px);
  transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out);
  transition-delay:calc(var(--i,0) * 60ms)}
[data-stagger].is-in > *{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important}
}

/* ---- Print -------------------------------------------------------------- */
@media print{
  .nav,.progress,.lightbox,.to-top{display:none!important}
  body{font-size:11pt}
  .section{padding-block:1.5rem;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
}

/* ---- Responsive grid collapse ------------------------------------------- */
@media (max-width:1080px){
  .c-3{grid-column-end:span 6}.c-4{grid-column-end:span 6}.c-5{grid-column-end:span 12}
  .c-7{grid-column-end:span 12}.c-8{grid-column-end:span 12}.c-9{grid-column-end:span 12}
  .start-5,.start-6,.start-7,.start-8{grid-column-start:auto}
}
@media (max-width:720px){
  .c-3,.c-4,.c-6{grid-column-end:span 12}
  .grid{gap:var(--s5)}
}