*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, pre {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: var(--hairline-w) solid var(--rule);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--band-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink-black);
  font: var(--t-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.band {
  background: var(--band-bg);
  color: var(--band-ink);
  position: relative;
}

.band--pad     { padding-block: var(--band-pad-y); }
.band--pad-lg  { padding-block: var(--band-pad-y-lg); }
.band--pad-sm  { padding-block: var(--s-11); }
.band:has(.pagenav:last-child) { padding-bottom: 0; }
.band--flush   { padding-block: 0; }

.grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-pad), 1fr)
    [gutter-start] minmax(0, var(--col-gutter))
    [text-start] minmax(0, var(--col-text))
    [text-end] minmax(0, var(--col-rail))
    [rail-end] minmax(var(--page-pad), 1fr)
    [full-end];
}

.grid > * { grid-column: text; }

.col-full   { grid-column: full; }
.col-wide   { grid-column: gutter-start / rail-end; }   .col-text   { grid-column: text; }                       .col-gutter { grid-column: gutter-start / text-start; }  .col-list   { grid-column: text-start / rail-end; }      .col-lede   { grid-column: gutter-start / text-end; }    
.stack > * + * { margin-top: var(--module-gap); }
.stack--tight > * + * { margin-top: var(--s-7); }
.stack--loose > * + * { margin-top: var(--s-13); }

:root {
  --flow:         var(--s-7);      --flow-module:  var(--s-11);     --flow-band:    var(--s-13);     --flow-section: var(--s-15);   }

.prose > p,
.prose > ul,
.prose > ol { font: var(--t-body); color: var(--band-ink); }
.prose > * + * { margin-top: var(--s-7); }
.prose em { font: var(--t-body-italic); }
.prose strong,
.prose b { font: var(--t-term); }
.prose strong em,
.prose em strong { font: var(--t-term); font-style: italic; }
.prose a {
  color: var(--band-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }

.prose .lede,
.t-lede { font: var(--t-body-lede-tight); }

.t-display-xl       { font: var(--t-display-xl); color: var(--band-heading); }
.t-display-lg       { font: var(--t-display-lg); color: var(--band-heading); }
.t-display-contents { font: var(--t-display-contents); color: var(--band-heading); }
.t-chapter-title    { font: var(--t-chapter-title); }
.t-section-title    { font: var(--t-section-title); color: var(--band-heading); }
.t-section-eyebrow  { font: var(--t-section-eyebrow); color: var(--band-accent); }
.t-part-label       { font: var(--t-part-label); color: var(--band-accent); }
.t-panel-title      { font: var(--t-panel-title); }
.t-heading-sans     { font: var(--t-heading-sans); }
.t-para-title       { font: var(--t-para-title); }
.t-eyebrow-italic   { font: var(--t-eyebrow-italic); letter-spacing: var(--tr-eyebrow-italic); }
.t-attribution      { font: var(--t-attribution-italic); color: var(--band-accent); }
.t-subhead          { font: var(--t-subhead); }
.t-body             { font: var(--t-body); }
.t-body-sans        { font: var(--t-body-sans); }
.t-body-sans-reg    { font: var(--t-body-sans-reg); }
.t-body-sans-med    { font: var(--t-body-sans-med); }
.t-term             { font: var(--t-term); }
.t-quote            { font: var(--t-quote); }
.t-quote-alt        { font: var(--t-quote-alt); }
.t-quote-attrib     { font: var(--t-quote-attrib); }
.t-big-statement    { font: var(--t-big-statement); color: var(--band-accent); }
.t-card-title       { font: var(--t-card-title); }
.t-card-body        { font: var(--t-card-body); }
.t-button           { font: var(--t-button); }
.t-caption          { font: var(--t-caption); }
.t-footer-link      { font: var(--t-footer-link); }
.t-colophon         { font: var(--t-colophon); }

h1 { font: var(--t-display-xl); color: var(--band-heading); }
h2 { font: var(--t-section-title); color: var(--band-heading); }
h3 { font: var(--t-card-title); color: var(--band-heading); }
h4 { font: var(--t-term); color: var(--band-ink-ui); }

.rule            { border-top: var(--hairline-w) solid var(--rule); }
.rule-accent     { border-top: var(--hairline-w) solid var(--rule-accent); }
.rule-accent--eyebrow { width: 187px; margin-top: var(--s-6); }
.rule-short      { width: 148px; border-top: var(--hairline-w) solid var(--rule); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.center { text-align: center; }
.measure-quote { max-width: var(--col-quote); }
.measure-home  { max-width: var(--col-home); }

@media (max-width: 1280px) {
  :root {
    --col-gutter: 380px;
    --col-rail: 96px;
    --page-pad: 32px;
  }
}

@media (max-width: 1100px) {
  :root {
    --col-gutter: 240px;
    --col-rail: 40px;
    --page-pad: 32px;
  }
}

@media (max-width: 900px) {
  :root {
    --col-gutter: 0px;
    --col-rail: 0px;
    --col-text: 100%;
    --page-pad: 24px;
    --band-pad-y: var(--s-11);
    --band-pad-y-lg: var(--s-13);
    --module-gap: var(--s-9);

        --flow-module:  var(--s-9);       --flow-band:    var(--s-11);      --flow-section: var(--s-13);  
        --t-display-xl:       300 38px/44px var(--ff-display);
    --t-display-lg:       400 30px/40px var(--ff-display);
    --t-display-contents: 400 30px/36px var(--ff-display);
    --t-section-title:    400 24px/32px var(--ff-display);
    --t-chapter-title:    400 24px/32px var(--ff-serif);
    --t-quote:            400 22px/32px var(--ff-serif);
    --t-testimonial:      500 24px/34px var(--ff-serif);
    --t-big-statement:    300 24px/34px var(--ff-sans);
    --t-subhead:          400 20px/30px var(--ff-sans);

        --hero-compact-h: 46px;
  }

    .col-wide,
  .col-gutter,
  .col-list,
  .col-lede { grid-column: text; }
}

@media (max-width: 520px) {
  :root { --page-pad: 18px; }
}