

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

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

body{
  margin:0;
  background:var(--ink-1000);
  color:var(--paper-100);
  font-family:var(--ff-text);
  font-size:var(--fs-body);
  font-weight:var(--wt-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

img,svg,canvas,video,picture{ display:block; max-width:100%; }
img,video{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
hr{ border:0; }

.ch--bone{
  --bg         : var(--paper-200);
  --fg         : var(--ink-900);
  --fg-mut     : var(--ink-500);
  --fg-quiet   : var(--ink-400);
  --line       : var(--line-on-paper);
  --line-strong: var(--line-on-paper-strong);
  --signal     : var(--signal-on-paper);
  --panel      : var(--paper-050);
  --btn-bg     : var(--ink-1000);
  --btn-fg     : var(--paper-100);
  --btn-bg-hov : var(--ink-700);
  --sel-bg     : var(--ink-900);
  --sel-fg     : var(--paper-100);
  --focus      : var(--signal-on-paper);
}

.ch--ink{
  --bg         : var(--ink-1000);
  --fg         : var(--paper-100);
  --fg-mut     : var(--paper-500);
  --fg-quiet   : var(--paper-400);
  --line       : var(--line-on-ink);
  --line-strong: var(--line-on-ink-strong);
  --signal     : var(--signal-on-ink);
  --panel      : var(--ink-850);
  --btn-bg     : var(--paper-100);
  --btn-fg     : var(--ink-1000);
  --btn-bg-hov : var(--white);
  --sel-bg     : var(--paper-100);
  --sel-fg     : var(--ink-1000);
  --focus      : var(--signal-on-ink);
}

body{
  --bg         : var(--ink-1000);
  --fg         : var(--paper-100);
  --fg-mut     : var(--paper-500);
  --fg-quiet   : var(--paper-400);
  --line       : var(--line-on-ink);
  --line-strong: var(--line-on-ink-strong);
  --signal     : var(--signal-on-ink);
  --panel      : var(--ink-850);
  --btn-bg     : var(--paper-100);
  --btn-fg     : var(--ink-1000);
  --btn-bg-hov : var(--white);
  --sel-bg     : var(--paper-100);
  --sel-fg     : var(--ink-1000);
  --focus      : var(--signal-on-ink);
}

::selection{ background:var(--sel-bg); color:var(--sel-fg); }

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--ff-display);
  font-weight:var(--wt-display);
  font-stretch:var(--wd-display);
  font-size:inherit;
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  word-spacing:var(--ws-display);
  text-wrap:pretty;
}

p{ margin:0; }
p + p{ margin-top:var(--sp-5); }

ul,ol{ margin:0; padding:0; list-style:none; }

small{ font-size:var(--fs-small); line-height:1.5; }

b,strong{ font-weight:var(--wt-body-strong); }

sup{ font-size:.72em; line-height:0; vertical-align:.42em; }

a{
  color:inherit;
  text-decoration:none;
}

abbr[title]{ text-decoration:none; border-bottom:var(--hair) dotted var(--line-strong); }

.ch{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding:var(--pad-ch-y) var(--page-x);
  overflow:hidden;

  
  --reg-len: var(--tick-len);
}
.ch--tall{ padding-block:var(--pad-ch-y-lg); }
.ch--flush{ padding-block:0; }

.ch__inner{
  position:relative;
  z-index:var(--z-content);
  margin-left:var(--rail);
  max-width:var(--shell);
}

.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  gap:var(--gutter);
}

.c-lede { grid-column:1 / span 7; }
.c-note { grid-column:8 / span 5; }
.c-full { grid-column:1 / -1; }
.c-right{ grid-column:7 / span 6; }
.c-half { grid-column:1 / span 6; }

.bleed{
  margin-left:calc((var(--page-x) + var(--rail)) * -1);
  margin-right:calc(var(--page-x) * -1);
  width:calc(100% + var(--page-x) * 2 + var(--rail));
}

.rail{
  position:absolute;
  left:var(--page-x);
  top:0;
  bottom:0;
  width:var(--rail);
  z-index:var(--z-rail);
  pointer-events:none;
  border-right:var(--hair) solid var(--line);
}
.rail::after{
  content:"";
  position:absolute;
  right:var(--rail-gap);
  top:0;
  bottom:0;
  width:var(--hair);
  background:var(--line);
}

.rail__ticks{ display:none; }
.rail__num{
  position:absolute;
  left:0;
  top:var(--pad-ch-y);
  color:var(--fg);
}
.rail__label{
  position:absolute;
  left:1px;
  bottom:var(--pad-ch-y);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
  color:var(--fg-mut);
  font-family:var(--ff-mono);
  font-size:var(--fs-micro);
  font-weight:var(--wt-mono-lt);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  opacity:var(--state-muted-alpha);
}

.field{
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  height:clamp(340px, 64vh, 720px);
  z-index:var(--z-field);
  pointer-events:none;
}

.display{
  font-family:var(--ff-display);
  font-weight:var(--wt-display);
  font-stretch:var(--wd-display);
  font-size:var(--fs-chapter);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  word-spacing:var(--ws-display);
  margin:0;
}
.display--hero     { font-size:var(--fs-hero); }
.display--monument { font-size:var(--fs-monument); }   
.display--statement{ font-size:var(--fs-statement); }
.display--sub      { font-size:var(--fs-sub); }
.display--quiet    { color:var(--fg-quiet); }          
.display--loud     { color:var(--fg); }                
.display--measure  { max-width:var(--measure-display); }

[data-optic]{ margin-left:calc(var(--optic, 0em) * -1); }

[data-optic="B"],[data-optic="D"],[data-optic="E"],[data-optic="F"],
[data-optic="H"],[data-optic="I"],[data-optic="K"],[data-optic="L"],
[data-optic="M"],[data-optic="N"],[data-optic="P"],[data-optic="R"],
[data-optic="U"]{ --optic:.0667em; }

[data-optic="b"],[data-optic="h"],[data-optic="i"],[data-optic="k"],
[data-optic="l"],[data-optic="m"],[data-optic="n"],[data-optic="p"],
[data-optic="r"],[data-optic="u"]{ --optic:.0570em; }

[data-optic="C"],[data-optic="G"],[data-optic="O"],[data-optic="Q"],
[data-optic="S"]{ --optic:.0530em; }

[data-optic="a"],[data-optic="c"],[data-optic="d"],[data-optic="e"],
[data-optic="o"],[data-optic="q"],[data-optic="s"]{ --optic:.0470em; }

[data-optic="J"],[data-optic="T"],[data-optic="V"],[data-optic="W"],
[data-optic="X"],[data-optic="Y"],[data-optic="Z"]{ --optic:.0250em; }

[data-optic="A"],[data-optic="f"],[data-optic="g"],[data-optic="j"],
[data-optic="t"],[data-optic="v"],[data-optic="w"],[data-optic="x"],
[data-optic="y"],[data-optic="z"]{ --optic:.0190em; }

.row-type{
  font-family:var(--ff-display);
  font-weight:var(--wt-display-lt);
  font-stretch:var(--wd-row);
  font-size:var(--fs-sub);
  line-height:1.2;
  letter-spacing:var(--ls-row);
  word-spacing:var(--ws-row);
  margin:0;
}

.lede{
  font-size:var(--fs-lede);
  line-height:var(--lh-lede);
  letter-spacing:var(--ls-lede);
  max-width:var(--measure-tight);
  margin:0;
}
.body{
  max-width:var(--measure-prose);
  color:var(--fg-mut);
  margin:0;
}
.body + .body{ margin-top:var(--sp-5); }
.body strong{ color:var(--fg); font-weight:var(--wt-body-strong); }
.detail{
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--fg-mut);
  max-width:var(--measure-record);
  margin:0;
}

.record{
  font-family:var(--ff-record);
  font-weight:var(--wt-record);
  font-size:var(--fs-sub);
  font-optical-sizing:auto;
  line-height:var(--lh-record);
  letter-spacing:var(--ls-record);
  max-width:var(--measure-record);
  color:var(--fg);
  margin:0;
}
.record--sm{ font-size:var(--fs-body); }
.record em,.record i,.record-em{ font-style:italic; }

.mono{
  font-family:var(--ff-mono);
  font-size:var(--fs-micro);
  font-weight:var(--wt-mono);
  line-height:var(--lh-mono);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
}
.mono--lt{ font-weight:var(--wt-mono-lt); }
.mono--mut{ color:var(--fg-mut); }

.eyebrow{
  display:inline-flex;
  align-items:baseline;
  gap:var(--sp-4);
  font-family:var(--ff-mono);
  font-size:var(--fs-micro);
  font-weight:var(--wt-mono);
  line-height:var(--lh-mono);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--fg);
}
.eyebrow__idx{ color:var(--fg-mut); font-weight:var(--wt-mono-lt); }
.eyebrow__idx--signal{ color:var(--signal); }   
.eyebrow--mut{ color:var(--fg-mut); }

.cite{
  font-family:var(--ff-mono);
  font-size:.66em;
  font-weight:var(--wt-mono-lt);
  letter-spacing:.04em;
  vertical-align:.42em;
  color:var(--signal);            
  margin-left:.12em;
  text-decoration:none;
}
a.cite:hover{ text-decoration:underline; text-underline-offset:3px; }

.rule{
  height:var(--hair);
  width:100%;
  background:var(--line);
  border:0;
}
.rule--strong{ background:var(--line-strong); }
.rule--heavy { height:var(--hair-2); background:var(--line-strong); }

.rule--tick{ position:relative; }
.rule--tick::before{
  content:"";
  position:absolute;
  left:0;
  top:-5px;
  width:var(--hair);
  height:11px;
  background:var(--line-strong);
}
.rule--tick-signal::before{ background:var(--signal); width:var(--hair-2); height:13px; }

.brk{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:var(--sp-5);
  width:100%;
}
.brk__rule{ height:var(--hair); background:var(--line); }
.brk--mid{ grid-template-columns:minmax(0,2fr) auto minmax(0,7fr); }

.btn{
  
  --btn-y    : var(--sp-5);
  --btn-x    : var(--sp-6);
  --btn-h    : var(--sp-7);
  --btn-label: var(--fs-small);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
  width:auto;
  min-height:var(--btn-h);
  padding:var(--btn-y) var(--btn-x);
  border:var(--hair) solid transparent;
  border-radius:var(--radius);
  font-family:var(--ff-display);
  font-weight:var(--wt-body-strong);
  font-stretch:var(--wd-row);
  font-size:var(--btn-label);
  letter-spacing:.02em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;   
  transition:
    background-color var(--dur-2) var(--ease-swap),
    color            var(--dur-2) var(--ease-swap),
    border-color     var(--dur-2) var(--ease-swap),
    transform        var(--dur-2) var(--ease-out);
}
.btn--primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn--primary:hover{ background:var(--btn-bg-hov); transform:translateY(var(--state-hover-lift)); }

.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); }
.btn--ghost:hover{ background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); }

.btn--sm{
  --btn-y    : var(--sp-3);
  --btn-x    : var(--sp-4);
  --btn-h    : calc(var(--sp-7) - var(--sp-2));
  --btn-label: var(--fs-small);
}
.btn--lg{
  --btn-y    : var(--sp-5);
  --btn-x    : var(--sp-7);
  --btn-h    : var(--sp-8);
  --btn-label: var(--fs-body);
}

.btn--fill{ width:100%; }

.dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  background:currentColor;
}
.dot--signal{ background:var(--signal); }

.link{
  display:inline-flex;
  align-items:baseline;
  gap:var(--sp-2);
  color:var(--fg);
  border-bottom:var(--hair) solid var(--line-strong);
  padding-bottom:2px;
  transition:border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.link:hover{ border-color:currentColor; }
.link__arrow{ font-size:.85em; line-height:1; transform:translateY(-1px); }

.datatable{
  --data-grid: 34px minmax(196px,1.05fr) minmax(0,2.45fr) minmax(150px,.9fr);
}
.datatable__head{
  display:grid;
  grid-template-columns:var(--data-grid);
  gap:var(--gutter);
  padding-bottom:var(--sp-3);
  color:var(--fg-mut);
}

.datarow{
  display:grid;
  grid-template-columns:var(--data-grid);
  gap:var(--gutter);
  align-items:start;
  border-top:var(--hair) solid var(--line-strong);
  padding:var(--sp-7) 0 var(--sp-8);
}
.datarow__i{ color:var(--signal); padding-top:.7em; }   

.datarow__figwrap{ position:relative; }
.datarow__figwrap::before{
  content:"";
  position:absolute;
  left:calc(var(--sp-4) * -1);
  top:.06em;
  width:var(--hair-2);
  height:.62em;
  background:var(--signal);
}
.datarow__fig{
  font-family:var(--ff-display);
  font-weight:var(--wt-figure);
  font-stretch:var(--wd-figure);
  font-size:var(--fs-figure);
  line-height:var(--lh-figure);
  letter-spacing:var(--ls-figure);
  word-spacing:var(--ws-figure);
  font-variant-numeric:tabular-nums lining-nums;
  margin:0;
}
.datarow__unit{
  display:block;
  margin-top:var(--sp-3);
  color:var(--fg-mut);
  font-family:var(--ff-mono);
  font-size:var(--fs-micro);
  font-weight:var(--wt-mono);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
}
.datarow__label{
  margin:0;
  font-size:var(--fs-lede);
  line-height:1.3;
  letter-spacing:var(--ls-lede);
}
.datarow__detail{
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--fg-mut);
  max-width:var(--measure-record);
}
.datarow__src{
  padding-top:.7em;
  color:var(--fg-mut);
  font-family:var(--ff-mono);
  font-size:var(--fs-fine);
  font-weight:var(--wt-mono-lt);
  letter-spacing:.015em;
  line-height:1.65;
  text-transform:none;
}
.datarow__src b{
  display:block;
  margin-bottom:2px;
  color:var(--fg);
  font-size:var(--fs-micro);
  font-weight:var(--wt-mono);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
}

.caveat{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-left:var(--spine) solid var(--signal);
  background:var(--panel);
}
.caveat__k{ color:var(--fg); }
.caveat__v{ margin:0; max-width:70ch; color:var(--fg); }

.media{
  position:relative;
  overflow:hidden;
  background:var(--ink-1000);
}
.media > img,
.media > video,
.media > canvas{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media--wide  { aspect-ratio:var(--ratio-wide); }
.media--frame { aspect-ratio:var(--ratio-frame); }
.media--tall  { aspect-ratio:var(--ratio-tall); }
.media--square{ aspect-ratio:var(--ratio-square); }
.media--major { height:var(--fig-h-major); aspect-ratio:auto; }
.media--minor { height:var(--fig-h-minor); aspect-ratio:auto; }
.media--full  { height:var(--fig-h-full);  aspect-ratio:auto; }

.media__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.media__scrim--foot{ background:var(--scrim-foot); }
.media__scrim--head{ background:var(--scrim-head); }
.media__scrim--flat{ background:var(--scrim-flat); }

.media__cap{
  position:absolute;
  left:var(--sp-5);
  bottom:var(--sp-5);
  color:var(--paper-100);
}

.skip{
  position:absolute;
  left:var(--sp-4);
  top:-140px;
  z-index:var(--z-skip);
  padding:var(--sp-3) var(--sp-4);
  background:var(--paper-100);
  color:var(--ink-1000);
  font-family:var(--ff-mono);
  font-size:var(--fs-micro);
  font-weight:var(--wt-mono);
  letter-spacing:var(--ls-mono);
  line-height:1;
  text-transform:uppercase;
  transition:top var(--dur-1) var(--ease-out);
}
.skip:focus{ top:var(--sp-4); }

:focus-visible{
  outline:var(--state-focus-width) solid var(--focus);
  outline-offset:var(--state-focus-offset);
}
:focus:not(:focus-visible){ outline:none; }

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

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity   var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.reveal.is-in,
.is-in .reveal{ opacity:1; transform:none; }

.reveal--line{
  display:block;
  overflow:hidden;
  opacity:1;
  transform:none;
}
.reveal--line > span{
  display:block;
  transform:translateY(106%);
  transition:transform var(--dur-4) var(--ease-out);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.reveal--line.is-in > span,
.is-in .reveal--line > span{ transform:none; }

.reveal--rule{
  opacity:1;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-rule) var(--ease-rule);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.reveal--rule.is-in,
.is-in .reveal--rule{ transform:none; }

html.no-js .reveal,
html.no-js .reveal--line > span{ opacity:1; transform:none; }
html.no-js .reveal--rule{ transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,
  .reveal--line > span{ opacity:1 !important; transform:none !important; }
  .reveal--rule{ transform:none !important; }
}

@media (max-width: 1100px){
  .c-lede { grid-column:1 / span 12; }
  .c-note { grid-column:1 / span 12; margin-top:var(--sp-7); }
  .c-right{ grid-column:1 / -1; }
  .c-half { grid-column:1 / -1; }

  .datatable{ --data-grid: 34px minmax(120px,1fr) minmax(0,2fr); }
  .datarow__src{ grid-column:2 / -1; padding-top:0; margin-top:var(--sp-4); }
  .datatable__head span:last-child{ display:none; }
}

@media (max-width: 760px){
  .rail{ border-right-width:var(--hair-2); }
  .rail::after,
  .rail__label{ display:none; }

  .brk{ grid-template-columns:auto 1fr auto; gap:var(--sp-4); }

  .datatable{ --data-grid: 1fr; }
  .datatable__head{ display:none; }
  .datarow{ padding:var(--sp-5) 0 var(--sp-6); }
  .datarow__i{ padding-top:0; }
  .datarow__figwrap::before{ left:calc(var(--sp-3) * -1); }
  .datarow__src{
    grid-column:1;
    margin-top:var(--sp-4);
    padding-top:var(--sp-4);
    border-top:var(--hair) solid var(--line);
  }
  .datarow__detail{ max-width:none; }

  .caveat{ grid-template-columns:1fr; gap:var(--sp-3); }
  
  .btn{
    --btn-y: var(--sp-4);
    --btn-x: var(--sp-5);
    --btn-h: var(--sp-7);
  }
  .btn--sm{
    --btn-y: var(--sp-2);
    --btn-x: var(--sp-4);
    --btn-h: calc(var(--sp-7) - var(--sp-2));
  }
  .btn--lg{
    --btn-y: var(--sp-4);
    --btn-x: var(--sp-6);
    --btn-h: calc(var(--sp-7) + var(--sp-2));
  }
}
