/* Reset, typography scale, layout primitives. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---- Scrollbar ----
   Thin, in the site's own neutrals. scrollbar-width/-color is the standard
   pair (Firefox, and Chrome from 121); the ::-webkit- rules below cover
   older Chrome and Safari, which ignore the standard properties. Both are
   needed — neither alone covers every browser the site will meet.
   scrollbar-width is not inherited, so the scrolling elements inside the
   page (the message box, the occasion menu) are named too. */
html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
textarea,select,.lightbox,[style*="overflow"]{scrollbar-width:thin}

*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:var(--scroll-track)}
*::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:6px;
  border:1px solid var(--scroll-track);   /* 1px, not 2 — at 6px wide a 2px inset
                                             would leave almost no thumb left */
}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
*::-webkit-scrollbar-corner{background:var(--scroll-track)}
small{font-size:var(--t-fine)}   /* the browser default is 13.333px */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

/* Focus — always visible, never removed */
:focus-visible{
  outline:2px solid var(--crimson);
  outline-offset:3px;
  border-radius:var(--radius);
}

.skip-link{
  position:absolute;left:var(--s-3);top:-100px;z-index:100;
  background:var(--crimson);color:var(--on-dark);
  padding:var(--s-2) var(--s-3);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--s-3)}

/* Layout */
.container{width:min(100% - (var(--gutter) * 2), var(--maxw));margin-inline:auto}
/* Section rhythm matches the original demo: 96px on desktop, tighter on a
   phone. --s-9 (128px) left too much empty ground between short sections. */
.section{padding-block:var(--s-7)}
@media (min-width:900px){ .section{padding-block:var(--s-8)} }

/* Type */
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:0}
h1{font-size:clamp(2.25rem,4.4vw,var(--t-display-l));line-height:1.1}
h2{font-size:clamp(1.75rem,3.4vw,var(--t-display-m));line-height:1.15}
h3{font-size:var(--t-display-xs);line-height:1.3}
p{margin:0 0 var(--s-3);max-width:68ch}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--t-label);font-weight:var(--weight-label);
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--crimson);
  margin:0 0 var(--s-3);
}
.eyebrow--light{color:var(--rose)}
.lede{font-size:var(--t-body-l);color:var(--ink-soft)}
.rule{width:56px;height:2px;background:var(--crimson);border:0;margin:var(--s-4) 0}

/* Section heading block */
.section-head{margin-bottom:var(--s-6);max-width:56ch}
.section-head p:not(.eyebrow){color:var(--ink-soft)}
.section-head--split > div + p{margin-top:var(--s-4)}
@media (min-width:900px){
  .section-head--split{
    display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-7);
    max-width:none;align-items:end;
  }
  .section-head--split p{margin:0}
}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}