/* Shared by every page under web/. Layout only: every colour and type value comes from
   web/brand/tokens.css. Visual spec: brand/web-style.md (ADR 0008), an offering memorandum set
   as a web page. One serif, a cream ground, brick hairlines, no fills, nothing rounded. */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{font-size:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  background:var(--cream);
  color:var(--ink-soft);
  font-family:var(--font-display);
  font-size:var(--size-body);
  font-weight:var(--weight-body);
  line-height:var(--leading-body);
  text-align:left; /* ragged right, never justified */
}

/* Container: a content column up to 1112px wide, its padding outside it (84px at 1280, where
   column and padding fill the viewport). Every heading, paragraph, table and the footer share
   its left edge. */
.wrap{box-sizing:content-box;max-width:1112px;margin:0 auto;padding:0 clamp(1.5rem,6.5vw,5.25rem)}

/* Type roles */
h1,h2,h3{font-family:var(--font-display);color:var(--ink)}
h1{
  font-size:var(--size-h1);font-weight:var(--weight-h1);letter-spacing:var(--track-h1);
  line-height:var(--leading-h1);max-width:var(--measure-h1);
}
h2{
  font-size:var(--size-h2);font-weight:var(--weight-h2);letter-spacing:var(--track-h2);
  line-height:var(--leading-h2);max-width:var(--measure-h2);
}
h3{font-size:var(--size-h3);font-weight:var(--weight-h3);line-height:var(--leading-h3)}
p{max-width:var(--measure)}
strong{font-weight:var(--weight-h3);color:var(--ink)}
.lede{
  font-size:var(--size-lede);font-weight:var(--weight-lede);font-style:var(--style-lede);
  line-height:var(--leading-lede);color:var(--ink);max-width:var(--measure-lede);
}
.dense{font-size:var(--size-dense);line-height:var(--leading-dense)}
.eyebrow,.label,.status,.site-nav a{
  font-size:var(--size-label);font-weight:var(--weight-label);letter-spacing:var(--track-label);
  line-height:var(--leading-label);text-transform:uppercase;
}
.eyebrow,.label,.status{max-width:none}
.eyebrow{color:var(--brick)}
.label,.status{color:var(--ink-soft)}
/* The pre-launch marker is not a link: regular weight, set apart from the navigation. */
.status{font-weight:var(--weight-caption)}

/* Links: brick, a 1px underline at 40% of brick, brick-dim on hover and press. */
a{
  color:var(--brick);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--brick) 40%,transparent);
  text-underline-offset:.18em;
  transition:color 120ms ease,text-decoration-color 120ms ease;
}
a:hover,a:active{color:var(--brick-dim);text-decoration-color:var(--brick-dim)}
:focus-visible{outline:2px solid var(--brick);outline-offset:2px}

/* Buttons: a rectangle, 1px ink border, no fill until hover. One per section. */
.btn{
  display:inline-block;
  font-family:var(--font-display);font-size:var(--size-button);font-weight:var(--weight-button);
  line-height:var(--leading-button);
  padding:.8rem 1.4rem;border:1px solid var(--ink);border-radius:0;
  background:transparent;color:var(--ink);text-decoration:none;
  transition:color 120ms ease,background-color 120ms ease,border-color 120ms ease;
}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn:active{background:var(--brick-dim);border-color:var(--brick-dim);color:var(--cream)}

/* Header: logo left, two links right, a brick hairline beneath, never sticky. */
.site-header .wrap{padding-top:26px}
.header-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:13px 26px;
  padding-bottom:18px;border-bottom:var(--hairline) solid var(--hairline-color);
}
.brand{display:block;line-height:0;margin-right:auto}
.brand img{display:block;height:32px;width:auto}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 26px}
.site-nav a{color:var(--ink-soft);text-decoration:none}
.site-nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink)}
.header-row .status{margin-left:14px}
@media (max-width:639px){
  .header-row{flex-direction:column;align-items:flex-start}
  .header-row .status{margin-left:0}
}

/* Page title block: the H1, then a brick hairline 22px beneath it, full container width. */
.title-block{
  padding-top:clamp(2.5rem,2rem + 2vw,4rem);
  padding-bottom:var(--hairline-gap-title);
  border-bottom:var(--hairline) solid var(--hairline-color);
}
.title-block .eyebrow{margin-bottom:13px}
/* An H1 whose lines are set by hand with <br>: the 22ch cap would split them. */
.title-block h1.set-lines{max-width:none}
.intro .lede{margin-top:26px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px 26px;margin-top:26px}

/* Sections: 64 to 96px apart, each opened by its heading and hairline, never by a tint. */
section{padding-top:clamp(4rem,3rem + 3vw,6rem)}
.section-head{
  padding-bottom:var(--hairline-gap-heading);
  border-bottom:var(--hairline) solid var(--hairline-color);
  margin-bottom:26px;
}
.section-head .eyebrow{margin-bottom:9px}
.wrap > .section-head + *{margin-top:0}

/* Paired content: two columns from 760px. */
.pair{display:grid;gap:40px clamp(2.5rem,5vw,4rem);margin-top:40px}
@media (min-width:760px){
  .pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pair h3 + p{margin-top:6px}

/* Key figure, used rarely. */
.key-figure{margin-top:40px}
.key-figure .value{
  font-size:var(--size-figure);font-weight:var(--weight-figure);line-height:var(--leading-figure);
  letter-spacing:var(--track-figure);color:var(--ink);
}
.key-figure .label{margin-top:6px}

/* Numbered lists: brick numerals in a fixed 1.25rem column. Never bullets. */
.numbered{list-style:none;counter-reset:item;margin-top:40px;max-width:var(--measure)}
.numbered > li{
  counter-increment:item;
  display:grid;grid-template-columns:1.25rem minmax(0,1fr);column-gap:13px;
}
.numbered > li + li{margin-top:26px}
.numbered > li::before{
  content:counter(item);
  grid-column:1;grid-row:1 / span 2;
  font-size:var(--size-h3);font-weight:var(--weight-h3);line-height:var(--leading-h3);
  color:var(--brick);font-variant-numeric:tabular-nums lining-nums;
}
.numbered > li > *{grid-column:2}
.numbered p{margin-top:6px}

/* A statement set in the text, where the August site had a filled callout. */
.statement{
  margin-top:40px;
  font-size:var(--size-lede);font-style:var(--style-lede);line-height:var(--leading-lede);
  color:var(--ink);max-width:var(--measure-lede);
}

/* Tables: ink rule under the heads, rule hairlines between rows, ink rule to close. */
.notice{margin-top:0}
.table{
  width:100%;max-width:48rem;border-collapse:collapse;margin-top:26px;
  font-size:var(--size-dense);line-height:var(--leading-dense);
}
.table th,.table td{
  padding:13px 26px 13px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);
}
.table th:last-child,.table td:last-child{padding-right:0}
.table thead th{
  padding-top:0;padding-bottom:9px;border-bottom-color:var(--ink);
  font-size:var(--size-label);font-weight:var(--weight-label);letter-spacing:var(--track-label);
  line-height:var(--leading-label);text-transform:uppercase;color:var(--ink-soft);
}
.table tbody th{font-weight:var(--weight-h3);color:var(--ink)}
.table tbody td{color:var(--ink-soft)}
.table tbody tr:last-child > *{border-bottom-color:var(--ink)}
.table .num{text-align:right;white-space:nowrap}
.table.narrow{max-width:30rem}
/* Tables of people share fixed columns, so a second table lines up under the first. */
.table.people{table-layout:fixed}
.table.people th:first-child{width:38%}
.table.people .num{width:16%}
.table .subline{display:block;font-weight:var(--weight-dense);color:var(--ink-soft)}
.award,.joining{margin-top:40px}
.joining + .table{margin-top:13px}
/* Below 640px each row restacks as label above value instead of scrolling sideways. */
@media (max-width:639px){
  .table,.table thead,.table tbody,.table tr,.table th,.table td{display:block}
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table tbody{border-top:1px solid var(--ink)}
  .table tbody tr{padding:13px 0;border-bottom:1px solid var(--rule)}
  .table tbody tr:last-child{border-bottom-color:var(--ink)}
  .table tbody th,.table tbody td{padding:0;border:0}
  .table tbody td{margin-top:9px}
  .table td[data-label]::before{
    content:attr(data-label);display:block;
    font-size:var(--size-label);font-weight:var(--weight-label);letter-spacing:var(--track-label);
    line-height:var(--leading-label);text-transform:uppercase;color:var(--ink-soft);
  }
  .table .num{text-align:left}
  .table.people th:first-child,.table.people .num{width:auto}
}

/* Questions: one column at measure width; the question is the heading. */
.faq{max-width:var(--measure)}
.faq h3 + p{margin-top:6px}
.faq p + h3{margin-top:26px}

/* Contact */
.person{margin-top:40px}
.person .label{margin-top:3px}
.person p + p{margin-top:9px}
.aside{margin-top:26px}
.draft-note{margin-top:26px;font-size:var(--size-dense);line-height:var(--leading-dense)}
.draft-note::before{
  content:"Draft note";display:block;margin-bottom:6px;
  font-size:var(--size-label);font-weight:var(--weight-label);letter-spacing:var(--track-label);
  line-height:var(--leading-label);text-transform:uppercase;color:var(--brick);
}

/* Footer: a brick hairline above; name left, offices right, small caps, ink-soft. */
.site-footer{margin-top:clamp(4rem,3rem + 3vw,6rem);padding-bottom:40px}
.footer-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px 26px;
  padding-top:18px;border-top:var(--hairline) solid var(--hairline-color);
  font-size:var(--size-caption);font-weight:var(--weight-caption);line-height:var(--leading-caption);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);
}
.site-footer .status{display:block;margin-top:9px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important}
}