/* ==========================================================================
   Base — reset, document, typography, layout primitives
   Everything here is element-level. Nothing in this file may use a class that
   belongs to a component; that is components.css.
   ========================================================================== */

/* --- 1. Reset ----------------------------------------------------------- */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Anchor links must clear the fixed header. */
  scroll-padding-top:calc(var(--header-h-stuck) + var(--s-5));
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Stops a wide table or timeline from scrolling the whole document. */
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}

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

input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}

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

hr{
  border:0;
  border-top:1px solid var(--color-border);
  margin:var(--s-7) 0;
}

/* --- 2. Typography ------------------------------------------------------ */

h1,h2,h3{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-weight:500;
  color:var(--color-text);
  text-wrap:balance;
}

h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:var(--ls-h3)}

h4,h5,h6{
  font-family:var(--font-ui);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:-.011em;
  color:var(--color-text);
}
h4{font-size:var(--fs-h4)}
h5{font-size:16px}
h6{font-size:var(--fs-small)}

/* Italic display emphasis: the one place the Fraunces WONK axis comes up. */
h1 em,h2 em{
  font-style:italic;
  font-variation-settings:var(--fv-display-em);
}

p{text-wrap:pretty}

a{
  color:inherit;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);
  text-underline-offset:.18em;
  transition:color var(--t-micro) var(--ease),text-decoration-color var(--t-micro) var(--ease);
}
a:hover{text-decoration-color:currentColor}

strong,b{font-weight:600}
small{font-size:var(--fs-small)}

::selection{background:var(--color-primary);color:var(--color-white)}

/* --- 3. Focus ----------------------------------------------------------- */

:focus{outline:none}
:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
/* On the dark bands the gold ring is the only one with enough contrast. */
.tmg-on-dark :focus-visible{outline-color:var(--color-accent)}

.tmg-skip-link{
  position:absolute;
  left:var(--s-4);
  top:-100px;
  z-index:calc(var(--z-modal) + 1);
  padding:var(--s-3) var(--s-5);
  background:var(--color-primary);
  color:var(--color-white);
  border-radius:var(--r-sm);
  font-size:var(--fs-small);
  font-weight:500;
  text-decoration:none;
  transition:top var(--t-std) var(--ease);
}
.tmg-skip-link:focus{top:var(--s-4)}

.tmg-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;
}

/* --- 4. Layout primitives ----------------------------------------------- */

.tmg-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Full-bleed media may grow to the shell, but never past it — this is what
   stops 1920px screens looking like a stretched 1440px design. */
.tmg-shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.tmg-section{padding-block:var(--sec-y)}
.tmg-section--tight{padding-block:calc(var(--sec-y) * .6)}
.tmg-section--flush-top{padding-block-start:0}
.tmg-section--sunken{background:var(--color-surface-sunken)}

.tmg-section--dark{
  background:var(--color-primary-dark);
  color:var(--color-on-dark);
}
.tmg-section--dark h1,
.tmg-section--dark h2,
.tmg-section--dark h3,
.tmg-section--dark h4{color:var(--color-white)}

.tmg-grid{
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (min-width:768px){
  .tmg-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media (min-width:1024px){
  .tmg-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
}

.tmg-stack{display:flex;flex-direction:column}
.tmg-stack--2{gap:var(--s-2)}
.tmg-stack--3{gap:var(--s-3)}
.tmg-stack--4{gap:var(--s-4)}
.tmg-stack--5{gap:var(--s-5)}
.tmg-stack--6{gap:var(--s-6)}
.tmg-stack--7{gap:var(--s-7)}

.tmg-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}

/* --- 5. Type utilities -------------------------------------------------- */

.tmg-eyebrow{
  display:block;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.tmg-section--dark .tmg-eyebrow{color:var(--color-accent)}

.tmg-lede{
  font-size:var(--fs-body-lg);
  line-height:1.6;
  color:var(--color-text-muted);
  max-width:64ch;
}
.tmg-section--dark .tmg-lede{color:var(--color-on-dark)}

.tmg-small{font-size:var(--fs-small);line-height:1.55;color:var(--color-text-muted)}
.tmg-measure{max-width:66ch}
.tmg-tnum{font-variant-numeric:tabular-nums}

/* --- 6. Editor content -------------------------------------------------- */

.tmg-prose{max-width:68ch}
.tmg-prose > * + *{margin-block-start:var(--s-4)}
.tmg-prose h2{margin-block-start:var(--s-7)}
.tmg-prose h3{margin-block-start:var(--s-6)}
.tmg-prose ul,.tmg-prose ol{padding-inline-start:1.35em}
.tmg-prose li + li{margin-block-start:var(--s-2)}
.tmg-prose a{color:var(--color-primary);text-decoration:underline}
.tmg-prose img,.tmg-prose figure{border-radius:var(--r-md)}
.tmg-prose figcaption{
  margin-block-start:var(--s-2);
  font-size:var(--fs-small);
  color:var(--color-text-faint);
}
.tmg-prose blockquote{
  border-inline-start:2px solid var(--color-accent);
  padding-inline-start:var(--s-5);
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-size:var(--fs-h3);
  line-height:1.35;
  color:var(--color-text);
}

/* --- 7. Motion ---------------------------------------------------------- */

/* Reveals start visible and animate from a visible resting state, so the page
   is fully readable before any script runs and with JS disabled. */
.tmg-reveal{
  opacity:1;
  transform:none;
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);
}
.js .tmg-reveal:not(.is-revealed){
  opacity:0;
  transform:translateY(12px);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .js .tmg-reveal:not(.is-revealed){opacity:1;transform:none}
}

/* --- 8. Print ----------------------------------------------------------- */

@media print{
  .tmg-header,.tmg-footer,.tmg-sticky-cta,.tmg-drawer{display:none !important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}