/* ==========================================================================
   Dark Varsity Digital — shared foundations for every page

   Two brand colours and one typeface. Every page is a small bound book:
   charcoal at the top, cream pages between, a charcoal footer to close.
   Page-specific layout lives with each page.
   ========================================================================== */

:root{
  --charcoal:#2f2b2b;     /* brand */
  --cream:#f5f0e9;        /* brand */
  --stone:#6a6664;        /* 70% charcoal on cream: secondary copy, 5.0:1 */
  --ash:#aaa5a1;          /* 62% cream on charcoal: secondary copy, 5.7:1 */
  --well-dark:#393535;    /* photo well before load */
  --rule-dark:#484443;    /* rules on charcoal */
  --rule-light:#dcd7d1;   /* rules on cream: the visible axis */

  --sans:"Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter:clamp(20px, 4.5vw, 64px);   /* page edge */
  --axis:clamp(20px, 4.4vw, 76px);     /* space either side of the centre line */
  --band:clamp(104px, 12.5vw, 184px);  /* vertical rhythm between sections */
  --shell:clamp(1360px, 78vw, 1640px);
  --ease:cubic-bezier(.16, 1, .3, 1);
}

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

html{
  background:var(--charcoal);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--charcoal);
  color:var(--cream);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  font-stretch:100%;
  line-height:1.6;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

a{
  color:inherit;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.3em;
  text-decoration-color:color-mix(in srgb, currentColor 34%, transparent);
  transition:text-decoration-color .45s var(--ease), color .45s var(--ease);
}
a:hover{ text-decoration-color:currentColor; }

:focus-visible{ outline:2px solid currentColor; outline-offset:5px; border-radius:1px; }

::selection{ background:var(--cream); color:var(--charcoal); }
.pages ::selection{ background:var(--charcoal); color:var(--cream); }

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

/* Expanded width is the display voice, borrowed from the wordmark. */
.wide{ font-stretch:125%; }

/* A title: a page's name, or a section that needs announcing. */
.title{
  font-stretch:125%;
  font-weight:500;
  font-size:clamp(32px, 4.2vw, 54px);
  line-height:1.08;
  letter-spacing:-.018em;
  text-wrap:balance;
}

/* The quiet line that introduces a set, in the ground's secondary tone. */
.lead-in{
  text-align:center;
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  color:var(--quiet);
}


/* ---- Grounds ---------------------------------------------------------------
   Every section carries half a band top and bottom, so the space between
   any two is one band, and each ground opens and closes on the same
   measure. The footer supplies the last half band of a charcoal close.  */

.pages{
  --quiet:var(--stone);
  background:var(--cream);
  color:var(--charcoal);
  padding:calc(var(--band) / 2) var(--gutter);
}
.back{
  --quiet:var(--ash);
  padding:calc(var(--band) / 2) var(--gutter) 0;
}
.page{ padding-block:calc(var(--band) / 2); }

/* A set that answers the line before it follows closely. */
.page--answer{ padding-top:0; }


/* ---- Inner page head -------------------------------------------------------
   The cover in miniature: the wordmark on the axis, leading home, and the
   page's title beneath it.                                              */

.page-head{
  padding:clamp(40px, 6vw, 72px) var(--gutter) clamp(80px, 10vw, 136px);
  text-align:center;
}
.page-head__home{
  display:inline-block;
  padding:8px;
  margin:-8px;
}
.page-head__home img{ width:clamp(170px, 15vw, 220px); }
.page-head__title{ margin-top:clamp(80px, 11vw, 144px); }
.page-head__note{
  margin-top:18px;
  font-size:15px;
  line-height:1.5;
  color:var(--ash);
}


/* ---- Prose, for the policies ----------------------------------------------
   One left-aligned column held to a readable measure, centred on the axis. */

.prose{
  max-width:40rem;
  margin-inline:auto;
  line-height:1.7;
}
.prose > * + *{ margin-top:18px; }
.prose > h2{
  margin-top:64px;
  font-stretch:125%;
  font-weight:500;
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.01em;
}
.prose > h2 + *{ margin-top:14px; }
.prose ul{
  padding-left:1.15em;
  list-style:disc;
}
.prose li + li{ margin-top:8px; }
.prose li::marker{ color:var(--stone); }
.prose__lede{
  font-size:clamp(19px, 1.7vw, 22px);
  line-height:1.55;
}


/* ---- Footer ----------------------------------------------------------------
   The monogram as a closing seal, the help and legal pages on the axis,
   the owner's name last.                                                */

.footer{
  padding:calc(var(--band) / 2) var(--gutter) clamp(40px, 5vw, 64px);
  text-align:center;
  font-size:14px;
  line-height:1.6;
  color:var(--ash);
}
.footer__mark{
  width:52px;
  margin:0 auto 28px;
}
.footer__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px clamp(24px, 4vw, 48px);
  margin-bottom:20px;
}
.footer__links a{
  display:inline-block;
  padding-block:8px;
  color:var(--ash);
  text-decoration-color:transparent;
}
.footer__links a:hover{ color:var(--cream); text-decoration-color:currentColor; }
.footer__links a[aria-current="page"]{ color:var(--cream); }