/* ==========================================================================
   Base: reset, page canvas, layout primitives and the type scale.
   Depends on tokens.css. Paths in url() are relative to this file.
   ========================================================================== */

*{box-sizing:border-box;}
/* no overflow-x on html/body: on html it clips the page below body's
   min-width with no way to scroll to it, and on body it breaks
   position:sticky. The only thing wider than the page is the glow
   layer, so that clips itself (.page-glows). */
html{
  scroll-behavior:smooth;
  /* no rubber-band bounce past the top or bottom of the page: the header
     and footer stay put at the ends. (The canvas colour comes from body's
     background; giving html its own would paint body over .bg-pattern.) */
  overscroll-behavior:none;
}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-text-primary);
  background:var(--color-bg-page);
  -webkit-font-smoothing:antialiased;
  min-width:var(--page-min-width);
  position:relative;
  overscroll-behavior:none;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,p{margin:0;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- Layout ------------------------------------------------------------- */
/* content column: 1280px, with --gutter side margins once the viewport is
   narrower than that */
.wrap{width:min(var(--container), 100% - 2 * var(--gutter));margin:0 auto;padding:0;}
/* sections sit --section-gap apart, content to content */
section{padding:calc(var(--section-gap) / 2) 0;}

/* ---- Page canvas: dot-dash texture + soft green glows --------------------- */
.bg-pattern{
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:url('../assets/bg-pattern-tile.svg');
  background-repeat:repeat;
  background-size:10.028px 7px;
  pointer-events:none;
}
.page-glows{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:var(--z-behind);
  pointer-events:none;
}
.page-glow{
  position:absolute;
  top:400px;
  left:50%;
  transform:translateX(-50%);
  width:1440px;
  height:800px;
  background:url('../assets/bg.svg') no-repeat center top;
  background-size:100% 100%;
  filter:blur(220px);
  z-index:var(--z-behind);
  pointer-events:none;
}
/* a flipped, shorter glow; pages position it behind a calm (box-free)
   section with [data-glow-anchor] (see site.js) */
.page-glow-2{
  top:3520px;
  height:600px;
  transform:translateX(-50%) scaleY(-1);
}

/* ---- Type scale ----------------------------------------------------------
   One class per role. Components use the same tokens directly; new pages
   can use these classes on plain elements. */
.t-display{font-size:var(--text-display-size);line-height:var(--text-display-lh);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text-primary);}
.t-heading{font-size:var(--text-heading-size);line-height:var(--text-heading-lh);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tighter);color:var(--color-text-primary);}
.t-subhead{font-size:var(--text-subhead-size);line-height:var(--text-subhead-lh);letter-spacing:var(--tracking-tight);color:var(--color-text-secondary);}
.t-title{font-size:var(--text-title-size);line-height:var(--text-title-lh);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text-primary);}
.t-card-title{font-size:var(--text-card-size);line-height:var(--text-card-lh);font-weight:var(--weight-medium);letter-spacing:var(--tracking-snug);color:var(--color-text-primary);}
.t-lead{font-size:var(--text-lead-size);line-height:var(--text-lead-lh);letter-spacing:var(--tracking-tight);color:var(--color-text-secondary);}
.t-ui-lg{font-size:var(--text-ui-lg-size);line-height:var(--text-ui-lg-lh);letter-spacing:var(--tracking-tight);}
.t-body{font-size:var(--text-body-size);line-height:var(--text-body-lh);letter-spacing:var(--tracking-tight);color:var(--color-text-secondary);}
.t-small{font-size:var(--text-small-size);line-height:var(--text-small-lh);letter-spacing:var(--tracking-tight);color:var(--color-text-muted);}
.t-label{font-size:var(--text-small-size);line-height:var(--text-small-lh);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-secondary);}
.t-medium{font-weight:var(--weight-medium);}
.t-muted{color:var(--color-text-muted);}

/* section eyebrow: small caps line above a section heading */
.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--text-control-size);
  font-weight:var(--weight-regular);
  line-height:var(--text-control-lh);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--color-text-brand);
  margin-bottom:var(--space-4);
}

/* ---- Section heading block ----------------------------------------------
   <div class="section-head"><div class="eyebrow">..</div><h2>..</h2></div> */
.section-head{margin:0 0 var(--section-head-gap);text-align:left;}
.section-head h2{
  font-family:var(--font-sans);
  font-size:var(--text-heading-size);
  line-height:var(--text-heading-lh);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tighter);
  color:var(--color-text-primary);
}
/* heading on the left, actions (e.g. carousel arrows) on the right */
.section-head.has-actions{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-8);
}

/* ---- Dashed rule: 8px dash / 8px gap, 1px, round caps ----------------------
   border-style:dashed can't set dash length or caps, so it's a 16px tile
   (dash inset by 0.5px each side so the caps land on the 8px boundary). */
.rule-dashed{
  height:1px;
  background-image:var(--texture-dash-rule);
  background-repeat:repeat-x;
  background-size:16px 1px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}