/* ===========================================================================
   Article Processing Center
   International Typographic Style: a strict grid, one accent, hairline rules,
   and type doing the work. No decoration that isn't structural.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --ink:        #16181c;   /* body text, near-black rather than black       */
  --ink-2:      #55595f;   /* secondary text                                 */
  --ink-3:      #8b8f96;   /* meta, captions, disabled                       */
  --paper:      #fbfbf9;   /* page ground, a touch warm                      */
  --paper-2:    #f2f2ee;   /* recessed blocks                                */
  --rule:       #dedcd6;   /* hairlines                                      */
  --rule-2:     #c6c3bb;   /* emphasised hairlines                           */
  --accent:     #c8102e;   /* used sparingly: indices, rules, links on hover */
  --accent-ink: #a30d25;

  --grid: 12;
  --gutter: 24px;
  --pad: clamp(20px, 5vw, 64px);
  --max: 1360px;

  --sans: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial,
          system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
}

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

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block }

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

::selection{ background:var(--accent); color:#fff }

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  letter-spacing:-0.028em;
  line-height:1.04;
}

.display{
  font-size:clamp(38px, 6.6vw, 92px);
  line-height:0.98;
  letter-spacing:-0.038em;
  font-weight:600;
  text-wrap:balance;
}

.h1{ font-size:clamp(32px, 4.4vw, 58px); letter-spacing:-0.032em }
.h2{ font-size:clamp(26px, 3.1vw, 40px); letter-spacing:-0.028em }
.h3{ font-size:clamp(19px, 1.6vw, 23px); letter-spacing:-0.02em; line-height:1.25 }

.lede{
  font-size:clamp(18px, 1.65vw, 22px);
  line-height:1.5;
  color:var(--ink-2);
  letter-spacing:-0.014em;
  max-width:34em;
}

p{ margin:0 0 1.15em }
p:last-child{ margin-bottom:0 }

.prose p,.prose li{ max-width:36em }
.prose h3{ margin:2.4em 0 0.7em }
.prose h3:first-child{ margin-top:0 }
.prose ul{ margin:0 0 1.15em; padding-left:1.1em }
.prose li{ margin-bottom:0.45em }
.prose strong{ font-weight:600 }
.prose a{ border-bottom:1px solid var(--rule-2) }
.prose a:hover{ color:var(--accent); border-color:var(--accent) }

/* the small letterspaced caps that label everything */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.eyebrow .dot{ color:var(--accent) }

.idx{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--accent);
  font-weight:500;
}

.muted{ color:var(--ink-2) }

/* ------------------------------------------------------------------ grid */
.shell{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

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

/* column spans, desktop */
.c3{ grid-column:span 3 } .c4{ grid-column:span 4 } .c5{ grid-column:span 5 }
.c6{ grid-column:span 6 } .c7{ grid-column:span 7 } .c8{ grid-column:span 8 }
.c9{ grid-column:span 9 } .c12{ grid-column:span 12 }

.rule{ border:0; border-top:1px solid var(--rule); margin:0 }
.rule-strong{ border-top-color:var(--rule-2) }

/* ---------------------------------------------------------------- header */
.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,249,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.masthead .bar{
  display:flex; align-items:center; gap:24px;
  height:66px;
}
.wordmark{
  font-size:13px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  white-space:nowrap;
}
.wordmark .apc{ color:var(--accent) }
.nav{ margin-left:auto; display:flex; align-items:center; gap:26px }
.nav a{
  font-size:13.5px; letter-spacing:-0.005em; color:var(--ink-2);
  padding:4px 0; border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--ink) }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent) }
.nav .cta{
  color:var(--ink); font-weight:500;
  border:1px solid var(--rule-2); border-radius:0;
  padding:7px 15px; margin-left:2px;
}
.nav .cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

.menu-btn{
  display:none; margin-left:auto;
  font:500 12px/1 var(--mono); letter-spacing:0.12em; text-transform:uppercase;
  background:none; border:1px solid var(--rule-2); color:var(--ink);
  padding:10px 13px; cursor:pointer;
}
.mobile-nav{ display:none; border-top:1px solid var(--rule) }
.mobile-nav.open{ display:block }
.mobile-nav a{
  display:block; padding:14px 0; border-bottom:1px solid var(--rule);
  font-size:16px;
}
.mobile-nav a:last-child{ border-bottom:0 }

/* ------------------------------------------------------------- sections */
.sec{ padding:clamp(56px, 8vw, 116px) 0 }
.sec-tight{ padding:clamp(40px, 5vw, 68px) 0 }
.sec-head{ margin-bottom:clamp(32px, 4vw, 56px) }
.sec-head .eyebrow{ margin-bottom:14px }

.hero{ padding:clamp(56px, 9vw, 132px) 0 clamp(44px, 6vw, 84px) }
.hero .display{ margin-bottom:28px }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 34px;
  margin-top:40px; padding-top:22px; border-top:1px solid var(--rule);
}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-block;
  font-size:14px; font-weight:500; letter-spacing:-0.005em;
  padding:14px 26px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--rule-2) }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }

/* the arrow link used at the end of blocks */
.more{
  display:inline-flex; align-items:baseline; gap:8px;
  font-size:14px; font-weight:500;
  border-bottom:1px solid var(--rule-2); padding-bottom:2px;
}
.more::after{ content:"\2192"; color:var(--accent) }
.more:hover{ border-color:var(--accent) }

/* ------------------------------------------------------------- list rows */
/* numbered rows divided by hairlines -- the core layout device of the site */
.rows{ border-top:1px solid var(--rule-2) }
.row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
  padding:clamp(26px, 3vw, 42px) 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.row:hover .row-t{ color:var(--accent) }
.row-n{ grid-column:span 1 }
.row-t{ grid-column:span 4; transition:color .15s ease }
.row-b{ grid-column:7 / span 6 }
.row-b p{ color:var(--ink-2) }

/* ------------------------------------------------------------ note cards */
.notes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 }
.note{
  padding:30px 26px 34px;
  border-left:1px solid var(--rule);
}
.note:first-child{ border-left:0; padding-left:0 }
.note .idx{ display:block; margin-bottom:16px }
.note h3{ margin-bottom:10px }
.note p{ font-size:15.5px; color:var(--ink-2); line-height:1.6 }

/* ----------------------------------------------------------------- steps */
.steps{ counter-reset:s; border-top:1px solid var(--rule-2) }
.step{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter);
  padding:clamp(24px,2.6vw,36px) 0; border-bottom:1px solid var(--rule);
}
.step-n{ grid-column:span 2 }
.step-b{ grid-column:4 / span 8 }
.step-b h3{ margin-bottom:8px }
.step-b p{ color:var(--ink-2); font-size:16px }

/* --------------------------------------------------------------- accents */
.slab{ background:var(--ink); color:var(--paper) }
.slab .lede,.slab p{ color:#c9cbd0 }
.slab .eyebrow{ color:#8b8f96 }
.slab .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.slab .btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff }
.slab .btn.ghost{ background:transparent; color:var(--paper); border-color:#42464d }
.slab .btn.ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.slab .rule{ border-top-color:#33373d }

/* --------------------------------------------------------------- q and a */
.qa{ border-top:1px solid var(--rule-2) }
.qa details{ border-bottom:1px solid var(--rule) }
.qa summary{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter);
  padding:26px 0; cursor:pointer; list-style:none; align-items:baseline;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover .qa-q{ color:var(--accent) }
.qa-n{ grid-column:span 1 }
.qa-q{ grid-column:span 9; font-size:clamp(17px,1.4vw,20px); font-weight:500;
       letter-spacing:-0.018em; transition:color .15s ease }
.qa-sign{ grid-column:12 / span 1; justify-self:end;
          font-family:var(--mono); color:var(--accent); font-size:15px }
.qa details[open] .qa-sign::before{ content:"\2013" }
.qa details:not([open]) .qa-sign::before{ content:"+" }
.qa-a{ padding:0 0 30px }
.qa-a > div{ max-width:36em }
@media (min-width:861px){ .qa-a > div{ margin-left:calc((100% + var(--gutter)) / 12) } }
.qa-a p{ color:var(--ink-2); margin-bottom:0.9em }
.qa-a ul{ color:var(--ink-2); margin:0 0 0.9em; padding-left:1.1em }

/* ----------------------------------------------------------------- forms */
.field{ margin-bottom:22px }
.field label{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.field label .req{ color:var(--accent) }
.field input,.field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--rule-2); border-radius:0;
  padding:9px 0;
  transition:border-color .15s ease;
}
.field textarea{ min-height:132px; resize:vertical; line-height:1.55 }
.field input:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--accent);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3) }
.form-note{ font-size:13px; color:var(--ink-3); margin-top:6px }
.form-msg{ font-size:14px; margin-top:16px; min-height:22px }
.form-msg.ok{ color:var(--accent-ink) }
.form-msg.bad{ color:var(--accent) }
/* a honeypot: real people never see it, scripts fill it in */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.contact-block{ padding:30px 0; border-top:1px solid var(--rule) }
.contact-block:first-child{ border-top:0; padding-top:0 }
.contact-block a.mail{
  font-size:clamp(17px,1.5vw,21px); letter-spacing:-0.02em;
  border-bottom:1px solid var(--rule-2); padding-bottom:2px;
  display:inline-block; margin-bottom:6px;
}
.contact-block a.mail:hover{ color:var(--accent); border-color:var(--accent) }

/* ---------------------------------------------------------------- footer */
.foot{ border-top:1px solid var(--rule-2); padding:clamp(44px,5vw,72px) 0 34px }
.foot .grid{ row-gap:34px }
.foot h4{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
  margin-bottom:14px;
}
.foot ul{ list-style:none; margin:0; padding:0 }
.foot li{ margin-bottom:8px }
.foot li a{ font-size:14.5px; color:var(--ink-2) }
.foot li a:hover{ color:var(--accent) }
.foot .fw{ font-size:15px; font-weight:600; letter-spacing:0.08em;
           text-transform:uppercase; margin-bottom:12px }
.foot .fw .apc{ color:var(--accent) }
.foot-base{
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline;
  margin-top:clamp(38px,5vw,64px); padding-top:22px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.foot-base .spacer{ flex:1 }

/* ------------------------------------------------------------ page intro */
.pagehead{ padding:clamp(46px,6vw,92px) 0 clamp(30px,4vw,52px) }
.pagehead .eyebrow{ margin-bottom:16px }
.pagehead .lede{ margin-top:22px }

/* legal documents: numbered clauses, generous measure */
.legal h3{
  font-size:clamp(17px,1.4vw,20px); letter-spacing:-0.018em;
  margin:2.6em 0 0.6em;
}
.legal h3:first-child{ margin-top:0 }
.legal .clause-n{ font-family:var(--mono); font-size:12px; color:var(--accent);
                  letter-spacing:0.08em; display:block; margin-bottom:5px }
.legal p,.legal li{ color:var(--ink-2); max-width:38em }
.legal ul{ padding-left:1.1em }

/* ----------------------------------------------------------- breakpoints */
@media (max-width:1080px){
  .row-t{ grid-column:span 5 }
  .row-b{ grid-column:7 / span 6 }
}

@media (max-width:860px){
  body{ font-size:16.5px }
  .nav{ display:none }
  .menu-btn{ display:block }
  .c3,.c4,.c5,.c6,.c7,.c8,.c9{ grid-column:span 12 }
  .c3,.c4,.c5,.c6,.c7,.c8,.c9{ grid-column:1 / -1 !important }
  .notes{ grid-template-columns:1fr }
  .note{ border-left:0; border-top:1px solid var(--rule); padding:26px 0 30px }
  .note:first-child{ border-top:0; padding-top:0 }
  .row{ grid-template-columns:repeat(12,minmax(0,1fr)); row-gap:12px }
  .row-n{ grid-column:span 12 }
  .row-t{ grid-column:span 12 }
  .row-b{ grid-column:1 / -1 }
  .step-n{ grid-column:span 12 }
  .step-b{ grid-column:1 / -1 }
  .qa-q{ grid-column:span 10 }
  .qa-n{ grid-column:span 12; margin-bottom:2px }
  .qa-q{ grid-column:span 11 }
  .qa-sign{ grid-column:12 / span 1 }
  .hero-meta{ gap:8px 24px }
}

@media (max-width:520px){
  .btn{ width:100%; text-align:center }
  .btn-row{ gap:10px }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}

/* ------------------------------------------------------------------ print */
@media print{
  .masthead,.menu-btn,.mobile-nav,.btn,.foot{ display:none }
  body{ background:#fff; font-size:11pt }
  .sec{ padding:18pt 0 }
}