/* DCAM — New Typography system
   warm paper, ink, one red. rules are structural, not decorative. */

:root{
  --paper:#F4F3EF;
  --paper-deep:#E9E7E0;
  --ink:#131316;
  --ink-soft:#56565C;
  --red:#C4171A;
  --blue:#1E4B8F;
  --yellow:#E3B023;
  --measure:36rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Jost",system-ui,sans-serif;
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.72;
  counter-reset:band;
  -webkit-font-smoothing:antialiased;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:20}
.skip:focus{left:0}

a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.75rem}

/* ---------- masthead ---------- */

.masthead{border-bottom:1px solid var(--ink);padding:1.4rem 0 1.15rem;position:relative}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:4px;background:var(--ink)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}

.mark{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:.62rem;
  align-items:center;
}
.mark::before{
  content:"";
  grid-column:1;grid-row:1 / span 2;
  width:.95rem;height:.95rem;
  background:var(--ink);
  box-shadow:0 0 0 0 transparent, -0.3rem -0.3rem 0 0 var(--red);
  align-self:center;
  margin-left:.3rem;
}
.mark-abbr{
  grid-column:2;grid-row:1;
  font-weight:500;font-size:1.02rem;line-height:1.15;
  letter-spacing:.2em;text-transform:uppercase;
}
.mark-full{
  grid-column:2;grid-row:2;
  font-weight:400;font-size:.6rem;line-height:1.5;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.mark:hover .mark-abbr{color:var(--red)}
.d{color:var(--red)}
.mark:hover .d{color:var(--ink)}

.wordmark{
  font-weight:400;
  font-size:clamp(.74rem,1.8vw,.88rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  margin:0 0 1.6rem;
  color:var(--ink);
}
.hero h1 + .wordmark{margin-top:-.5rem}

.nav{display:flex;flex-wrap:wrap;gap:1.15rem;font-size:.72rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--ink-soft);padding-bottom:.2rem;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}

/* ---------- hero ---------- */

.hero{padding:4.5rem 0 3rem}
.hero .wrap{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:start}

.hero h1{
  font-weight:400;
  font-size:clamp(2.9rem,10.5vw,6.6rem);
  line-height:.98;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin:0 0 1.5rem;
}

.standfirst{
  font-size:.76rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 2rem;max-width:42rem;line-height:2;
}

.lede{font-size:1.32rem;font-weight:300;line-height:1.5;max-width:var(--measure);margin:0}

.plate{width:180px;height:180px;flex:none}
.plate svg{display:block;width:100%;height:auto}

/* ---------- sections ---------- */

.band{border-top:1px solid var(--ink);padding:2.75rem 0 3rem;counter-increment:band}

.eyebrow{
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 1.5rem;
}
.eyebrow::before{
  content:counter(band,decimal-leading-zero);
  display:block;
  font-size:2.3rem;font-weight:300;line-height:1;
  letter-spacing:.04em;color:var(--red);
  margin-bottom:.35rem;
}

.band h2{font-weight:500;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 1.4rem}

.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.15rem}
.prose p:last-child{margin-bottom:0}
.prose a{border-bottom:2px solid var(--red);font-weight:500}
.prose a:hover{background:var(--red);color:var(--paper);border-bottom-color:var(--red)}

/* ---------- areas ---------- */

.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.5rem;margin:0}
.areas div{border-top:1px solid var(--ink);padding-top:1rem}
.areas div h3{font-size:1rem;font-weight:600;line-height:1.3;margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.04em}
.areas div h3 a{border-bottom:2px solid var(--red)}
.areas div h3 a:hover{background:var(--red);color:var(--paper)}
.areas div p{margin:0;font-size:.97rem;color:var(--ink-soft);line-height:1.62}

/* ---------- record entries ---------- */

.record{margin:0;border-top:1px solid var(--ink)}
.record .row{display:grid;grid-template-columns:7.5rem 1fr;gap:0 1.75rem;padding:1.05rem 0;border-bottom:1px solid rgba(26,23,20,.28);align-items:baseline}
.record.svc .row{grid-template-columns:10rem 1fr}

.record .yr,.record .fee{
  font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);white-space:nowrap;
}
.record .body{margin:0}
.record .body strong{font-weight:600}
.record .body cite{font-style:italic}
.record .note{display:block;margin-top:.35rem;font-size:.95rem;color:var(--ink-soft);line-height:1.6}

/* ---------- statement / terms ---------- */

.statement{border-left:3px solid var(--red);padding:.2rem 0 .2rem 1.5rem;margin:0 0 1.6rem;max-width:var(--measure)}
.statement p{margin:0 0 .9rem;font-size:1.12rem;line-height:1.6}
.statement p:last-child{margin-bottom:0}

.terms{margin:0;padding:0;list-style:none;max-width:var(--measure)}
.terms li{position:relative;padding-left:1.7rem;margin-bottom:.95rem;line-height:1.62}
.terms li::before{content:"";position:absolute;left:0;top:.6em;width:.62rem;height:.62rem;background:var(--red)}
.negative li::before{background:none;border:2px solid var(--ink)}

/* ---------- contact ---------- */

.contactlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem}
.contactlist>div{border-top:1px solid var(--ink);padding-top:.9rem}
.contactlist dt{font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin:0 0 .4rem}
.contactlist a{border-bottom:2px solid var(--red);font-weight:500}
.contactlist a:hover{background:var(--red);color:var(--paper)}

/* ---------- footer ---------- */

.foot{border-top:4px solid var(--ink);margin-top:1rem;padding:1.75rem 0 3.25rem;font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.foot .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}
.foot a{border-bottom:2px solid transparent}
.foot a:hover{color:var(--ink);border-bottom-color:var(--red)}

/* ---------- responsive ---------- */

@media (max-width:52rem){
  .hero .wrap{grid-template-columns:1fr}
  .plate{width:128px;height:128px;order:-1;margin-bottom:.5rem}
}

@media (max-width:44rem){
  body{font-size:1rem}
  .hero{padding:2.75rem 0 2rem}
  .band{padding:2.25rem 0 2.5rem}
  .lede{font-size:1.15rem}
  .eyebrow::before{font-size:1.85rem}
  .record .row,.record.svc .row{grid-template-columns:1fr;gap:.3rem}
  .statement{padding-left:1.1rem;border-left-width:5px}
}

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