/* ─────────────────────────────────────────────
   Makwela Investment Group
   Design language: the register.
   A holding company's core artifact is a record —
   precise, ruled, permanent. Structure over ornament.
   ───────────────────────────────────────────── */

:root{
  --paper:#FBFAF8;
  --paper-sunk:#F3F1EC;
  --ink:#0A0A0A;
  --ink-70:#3D3B38;
  --ink-45:#6E6B65;
  --rule:#DFDCD5;
  --rule-strong:#B9B5AC;
  --oxblood:#6B2029;

  --measure:36rem;
  --gutter:clamp(1.5rem,5vw,5rem);
  --bar:4.5rem;

  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{color:inherit}

:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:3px;
}

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

/* ── masthead ─────────────────────────────── */

.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,248,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}

.masthead__inner{
  height:var(--bar);
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
}

.brand{
  display:flex;align-items:center;gap:.7rem;
  text-decoration:none;
  flex-shrink:0;
}
.brand__mark{width:15px;height:auto}
.brand__name{
  font-family:var(--serif);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.005em;
  white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.nav a{
  font-size:.82rem;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink-70);
  padding:.35rem 0;
  border-bottom:1.5px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--oxblood);
}

/* ── page scaffold ────────────────────────── */

.wrap{padding-inline:var(--gutter);max-width:78rem;margin-inline:auto}

.band{padding-block:clamp(4rem,9vw,7.5rem)}
.band--tight{padding-block:clamp(3rem,6vw,5rem)}
.band--sunk{background:var(--paper-sunk);border-block:1px solid var(--rule)}

/* ── hero ─────────────────────────────────── */

.hero{
  padding-top:clamp(4.5rem,11vw,9rem);
  padding-bottom:clamp(3.5rem,8vw,6rem);
}

.hero__mark{
  display:block;
  width:clamp(38px,5.2vw,58px);
  height:auto;
  aspect-ratio:324/420;
  color:var(--ink);
  margin-bottom:clamp(2rem,4vw,3rem);
  overflow:visible;
}

.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.6rem,7.4vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.021em;
  margin:0 0 1.6rem;
  max-width:18ch;
}

.hero__lede{
  font-size:clamp(1.06rem,1.9vw,1.3rem);
  line-height:1.55;
  color:var(--ink-70);
  max-width:var(--measure);
  margin:0;
}

.hero__foot{
  position:relative;
  margin-top:clamp(2.5rem,5vw,3.6rem);
  padding-top:1.15rem;
  font-size:.83rem;
  color:var(--ink-45);
  max-width:var(--measure);
}
.hero__foot::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:1px;
  background:var(--rule-strong);
  transform-origin:left center;
}

/* ── section headings ─────────────────────── */

.sec-head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.65rem;
  margin-bottom:clamp(2rem,4vw,3rem);
  padding-bottom:1rem;
}
.sec-head::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1px;
  background:var(--rule-strong);
  transform-origin:left center;
}
.sec-head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.05rem);
  line-height:1.2;
  letter-spacing:-.012em;
  margin:0;
}
.sec-head p{
  margin:0;
  color:var(--ink-45);
  font-size:.94rem;
  max-width:var(--measure);
}

/* ── the register table ───────────────────── */

.register{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  text-align:left;
}
.register caption{
  caption-side:top;
  text-align:left;
  color:var(--ink-45);
  font-size:.85rem;
  padding-bottom:1.1rem;
}
.register th,
.register td{
  padding:.95rem 1rem .95rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:baseline;
}
.register th{
  font-weight:400;
  color:var(--ink-45);
  width:15rem;
  white-space:nowrap;
}
.register td{
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.register tr:last-child th,
.register tr:last-child td{border-bottom:0}

/* ── ruled column set (no cards) ──────────── */

.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0;
}
.col{
  padding:0 clamp(1.2rem,2.5vw,2.4rem);
  border-left:1px solid var(--rule);
}
.col:first-child{padding-left:0;border-left:0}
.col h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.08rem;
  margin:0 0 .6rem;
  letter-spacing:-.005em;
}
.col p{
  margin:0;
  color:var(--ink-70);
  font-size:.94rem;
  line-height:1.62;
}

@media (max-width:44rem){
  .col{
    padding:1.6rem 0;
    border-left:0;
    border-top:1px solid var(--rule);
  }
  .col:first-child{padding-top:0;border-top:0}
}

/* ── prose ────────────────────────────────── */

.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.15rem;color:var(--ink-70);line-height:1.72}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--ink)}
.prose h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.15rem;
  margin:2.4rem 0 .7rem;
}
.prose ul{margin:0 0 1.15rem;padding-left:1.1rem;color:var(--ink-70)}
.prose li{margin-bottom:.5rem;line-height:1.65}
.prose a{color:var(--oxblood);text-underline-offset:.18em}

/* ── empty state ──────────────────────────── */

.empty{
  border:1px solid var(--rule-strong);
  padding:clamp(2.2rem,5vw,3.8rem);
  max-width:44rem;
}
.empty h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.6rem);
  margin:0 0 .85rem;
  letter-spacing:-.008em;
}
.empty p{
  margin:0 0 1rem;
  color:var(--ink-70);
  font-size:.96rem;
  max-width:var(--measure);
}
.empty p:last-child{margin-bottom:0}

/* ── contact list ─────────────────────────── */

.contact-list{
  list-style:none;padding:0;margin:0;
  display:grid;gap:0;
  max-width:44rem;
}
.contact-list li{
  display:grid;
  grid-template-columns:11rem minmax(0,1fr);
  gap:1rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.95rem;
}
.contact-list li:last-child{border-bottom:0}
.contact-list dt,.contact-list .k{color:var(--ink-45)}
.contact-list .v{font-weight:500}
.contact-list a{color:var(--oxblood);text-underline-offset:.18em}

@media (max-width:34rem){
  .contact-list li{grid-template-columns:1fr;gap:.2rem}
}

/* ── footer ───────────────────────────────── */

.foot{
  border-top:1px solid var(--rule-strong);
  padding-block:clamp(2.8rem,5vw,4rem);
  font-size:.83rem;
  color:var(--ink-45);
}
.foot__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:2.2rem;
  margin-bottom:2.6rem;
}
.foot h4{
  font-family:var(--sans);
  font-size:.83rem;
  font-weight:500;
  color:var(--ink);
  margin:0 0 .8rem;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.45rem}
.foot a{text-decoration:none;color:var(--ink-45);transition:color .18s ease}
.foot a:hover{color:var(--ink)}
.foot__legal{
  border-top:1px solid var(--rule);
  padding-top:1.6rem;
  max-width:52rem;
  line-height:1.6;
}
.foot__legal p{margin:0 0 .7rem}
.foot__legal p:last-child{margin-bottom:0}

/* ── one orchestrated entrance ──────────────
   The monogram strokes draw, then the headline
   settles behind them. Every moving property is
   declared inside no-preference and nowhere else,
   so reduce mode never has an animation to shorten
   — it simply gets the final state.
   ─────────────────────────────────────────── */

@media (prefers-reduced-motion:no-preference){

  /* the strokes */
  .hero__mark path{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    animation:draw .95s cubic-bezier(.62,.03,.3,1) forwards;
  }
  .hero__mark .monogram__b{animation-duration:.62s;animation-delay:.5s}
  @keyframes draw{to{stroke-dashoffset:0}}

  /* then the type */
  .hero .reveal{
    opacity:0;
    transform:translateY(14px);
    animation:rise .9s cubic-bezier(.16,.84,.44,1) forwards;
  }
  /* these must out-specify the `animation` shorthand above, which
     otherwise resets animation-delay to 0 and flattens the sequence */
  .hero .hero__title{animation-delay:1s}
  .hero .hero__lede{animation-delay:1.17s}
  .hero .hero__foot{animation-delay:1.33s}
  @keyframes rise{to{opacity:1;transform:none}}

  /* and the hairline above the meta line draws across last */
  .hero__foot::before{
    transform:scaleX(0);
    animation:draw-rule 1.1s cubic-bezier(.22,1,.36,1) 1.5s forwards;
  }
  @keyframes draw-rule{to{transform:scaleX(1)}}
}

@media print{
  .masthead,.nav{display:none}
  body{background:#fff}
}

/* ── narrow viewports: masthead ───────────── */

@media (max-width:52rem){
  .brand__name{font-size:.95rem}
  .nav a{font-size:.78rem}
}

@media (max-width:40rem){
  :root{--bar:3.9rem}
  .brand__name{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  .brand__mark{width:17px}
  .masthead__inner{gap:1rem}
  .nav{gap:1.15rem}
  .nav a{font-size:.8rem}
}

@media (max-width:22rem){
  .nav{gap:.85rem}
  .nav a{font-size:.74rem}
}

/* ── narrow viewports: register stacks ────── */

@media (max-width:36rem){
  .register tr{display:block;border-bottom:1px solid var(--rule)}
  .register tr:last-child{border-bottom:0}
  .register th{
    display:block;width:auto;white-space:normal;
    padding:.9rem 0 .15rem;border-bottom:0;font-size:.85rem;
  }
  .register td{display:block;padding:0 0 .9rem;border-bottom:0}
}

/* ── anchors clear the sticky bar ─────────── */

section[id]{scroll-margin-top:calc(var(--bar) + 1.25rem)}

/* ── eyebrow: the one place the identity's wide
      tracking lives, so the serif scale keeps its
      own tighter measure ──────────────────── */

.eyebrow{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-45);
}

/* ── four-up principles ───────────────────── */

.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.col__no{
  display:block;
  margin-bottom:.9rem;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-45);
}

@media (min-width:44.0625rem) and (max-width:64rem){
  .cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols--4 .col:nth-child(odd){padding-left:0;border-left:0}
  .cols--4 .col:nth-child(n+3){
    padding-top:clamp(1.7rem,3vw,2.3rem);
    margin-top:clamp(1.7rem,3vw,2.3rem);
    border-top:1px solid var(--rule);
  }
}

@media (max-width:44rem){
  .cols--4{grid-template-columns:minmax(0,1fr)}
  .cols--4 .col{
    padding:1.7rem 0 0;
    margin-top:1.7rem;
    border-left:0;
    border-top:1px solid var(--rule);
  }
  .cols--4 .col:first-child{padding-top:0;margin-top:0;border-top:0}
}

/* ── numbered steps ───────────────────────── */

.steps{
  list-style:none;
  margin:0;padding:0;
  display:grid;gap:0;
  max-width:52rem;
}
.step{
  display:grid;
  grid-template-columns:5rem minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding:clamp(1.5rem,3vw,2.2rem) 0;
  border-top:1px solid var(--rule);
}
.step:first-child{border-top:0;padding-top:0}
.step__no{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--ink-45);
  font-variant-numeric:tabular-nums;
}
.step__body{display:grid;gap:.45rem}
.step__head{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:-.005em;
}
.step__text{
  margin:0;
  font-size:.95rem;
  line-height:1.65;
  color:var(--ink-70);
}

@media (max-width:34rem){
  .step{grid-template-columns:minmax(0,1fr);gap:.55rem}
}

/* ── the holdings ledger ──────────────────────
      Rows come from the INVESTMENTS array in
      assets/js/site.js. Empty, it is a ruled
      register waiting on entries — the column
      headings show the shape of what goes in.
   ───────────────────────────────────────────── */

.ledger{
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
}
.ledger__row:last-child{border-bottom:0}

.ledger__head,
.ledger__row{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2rem);
  border-bottom:1px solid var(--rule);
}

.ledger__head{
  padding:.85rem 0;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.ledger__row{
  padding:1.2rem 0;
  font-size:.95rem;
  align-items:baseline;
}
.ledger__name{font-weight:500}
.ledger__cell{color:var(--ink-70)}
.ledger__k{display:none}

.ledger__note{
  margin:0;
  padding:clamp(1.9rem,4.5vw,2.8rem) 0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.08rem,2vw,1.32rem);
  line-height:1.5;
  letter-spacing:-.006em;
  color:var(--ink-70);
  max-width:38rem;
}

@media (max-width:40rem){
  .ledger__head{display:none}
  .ledger__row{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .ledger__k{
    display:inline;
    margin-right:.6rem;
    font-size:.68rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-45);
  }
}

/* ── standing statement ───────────────────── */

.statement{
  position:relative;
  max-width:46rem;
  margin:clamp(2.4rem,5vw,3.6rem) 0 0;
  padding-top:1.4rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--ink-45);
}
.statement::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:1px;
  background:var(--rule-strong);
  transform-origin:left center;
}

/* ── monogram behind a band ───────────────── */

.band--mark{position:relative;overflow:hidden}
.band--mark > .wrap{position:relative;z-index:1}

.mark-bg{
  position:absolute;
  top:50%;
  right:clamp(-3rem,-3vw,-1rem);
  height:clamp(11rem,68%,25rem);
  width:auto;
  aspect-ratio:324/420;
  color:var(--ink);
  opacity:.042;
  pointer-events:none;
  z-index:0;
  transform:translate3d(0,-50%,0);
}

/* ── revealed once, on entry ──────────────────
      Hidden states are scoped to .js so the page
      is fully visible without scripting, and the
      whole block is inside no-preference so reduce
      mode has nothing to shorten.
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion:no-preference){

  .mark-bg{
    transform:translate3d(0,calc(-50% + (var(--drift,0) * 3rem)),0);
    will-change:transform;
  }

  .js [data-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:
      opacity .85s cubic-bezier(.16,.84,.44,1),
      transform .85s cubic-bezier(.16,.84,.44,1);
  }
  .js [data-reveal].is-in{opacity:1;transform:none}

  /* hairlines draw across with the section */
  .js .sec-head[data-reveal]::after,
  .js .statement[data-reveal]::before{
    transform:scaleX(0);
    transition:transform 1.15s cubic-bezier(.22,1,.36,1) .1s;
  }
  .js .sec-head[data-reveal].is-in::after,
  .js .statement[data-reveal].is-in::before{transform:scaleX(1)}

  /* members of a set arrive in sequence */
  .js .cols--4 .col:nth-child(2){transition-delay:.09s}
  .js .cols--4 .col:nth-child(3){transition-delay:.18s}
  .js .cols--4 .col:nth-child(4){transition-delay:.27s}
  .js .steps .step:nth-child(2){transition-delay:.1s}
  .js .steps .step:nth-child(3){transition-delay:.2s}
}

/* ── lead statement ───────────────────────── */

.lead{
  margin:0;
  max-width:44rem;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.28rem,3vw,2rem);
  line-height:1.38;
  letter-spacing:-.014em;
  color:var(--ink);
}

/* ── linked panels (ruled, not cards) ─────── */

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

.panel{
  position:relative;
  display:grid;
  align-content:start;
  gap:.5rem;
  padding:1.7rem clamp(1.2rem,2.5vw,2.4rem) 1.9rem;
  border-left:1px solid var(--rule);
  border-top:1px solid var(--rule-strong);
  text-decoration:none;
  color:inherit;
}
.panel:first-child{padding-left:0;border-left:0}

.panel::before{
  content:"";
  position:absolute;left:0;right:0;top:-1px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
}
.panel:hover::before,
.panel:focus-visible::before{transform:scaleX(1)}

.panel__no{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin-bottom:.4rem;
}
.panel__title{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:-.008em;
}
.panel__text{
  font-size:.94rem;
  line-height:1.62;
  color:var(--ink-70);
}
.panel__go{
  margin-top:.7rem;
  font-size:1rem;
  line-height:1;
  color:var(--ink-45);
}
.panel:hover .panel__go,
.panel:focus-visible .panel__go{color:var(--ink)}

@media (max-width:52rem){
  .panels{grid-template-columns:minmax(0,1fr)}
  .panel{
    padding:1.6rem 0 1.8rem;
    border-left:0;
    border-top:1px solid var(--rule);
  }
  .panel:first-child{border-top:1px solid var(--rule-strong)}
}

/* ── statement lists ──────────────────────── */

.tenets{
  list-style:none;
  margin:0;padding:0;
  max-width:52rem;
}
.tenet{
  padding:clamp(1.3rem,2.8vw,1.9rem) 0;
  border-top:1px solid var(--rule);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.06rem,1.9vw,1.28rem);
  line-height:1.5;
  letter-spacing:-.006em;
  color:var(--ink);
}
.tenet:first-child{border-top:0;padding-top:0}

.note{
  margin:0;
  max-width:46rem;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.05rem,1.9vw,1.26rem);
  line-height:1.5;
  letter-spacing:-.006em;
  color:var(--ink);
}

@media (prefers-reduced-motion:no-preference){
  .panel::before{transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .panel__go{transition:transform .3s cubic-bezier(.22,1,.36,1),color .25s ease}
  .panel:hover .panel__go,
  .panel:focus-visible .panel__go{transform:translateX(.4rem)}
}

/* ── the moving band ──────────────────────────
      One list, duplicated once; the track slides
      exactly half its width, so the seam never
      shows. Declared only under no-preference —
      an infinite animation must not exist at all
      in reduce mode, not merely run faster.
   ───────────────────────────────────────────── */

.marquee{
  overflow:hidden;
  border-top:1px solid var(--rule);
  padding-block:1.15rem;
}

.marquee__track{display:flex;width:max-content}

.marquee__list{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;padding:0;
  /* one copy must never be narrower than the screen or the -50%
     slide exposes a gap on wide monitors; items absorb the slack
     equally so the seam stays evenly spaced */
  min-width:100vw;
}

.marquee__item{
  display:flex;
  flex:1 0 auto;
  align-items:center;
  gap:clamp(1.4rem,3vw,2.6rem);
  padding-right:clamp(1.4rem,3vw,2.6rem);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink-70);
}

.marquee__mark{
  height:15px;
  width:auto;
  aspect-ratio:264/360;
  color:var(--rule-strong);
  flex:none;
}

@media (prefers-reduced-motion:no-preference){
  .marquee__track{animation:marquee 70s linear infinite}
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}
}

/* ── values ───────────────────────────────────
      Numbered rows divided by hairlines, not a
      card grid, so five reads as one list.
   ───────────────────────────────────────────── */

.values{
  list-style:none;
  margin:clamp(2.4rem,5vw,3.4rem) 0 0;
  padding:0;
}

.value{
  position:relative;
  display:grid;
  grid-template-columns:4.5rem minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,3rem);
  padding:clamp(1.9rem,4vw,2.8rem) 0;
  align-items:start;
}
.value:first-child{padding-top:0}

.value::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:1px;
  background:var(--rule);
  transform-origin:left center;
}
.value:first-child::before{display:none}

.value__no{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--ink-45);
  font-variant-numeric:tabular-nums;
  padding-top:.3rem;
}

.value__name{
  margin:0 0 .6rem;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  letter-spacing:-.008em;
}

.value__statement{
  margin:0;
  font-size:.96rem;
  line-height:1.65;
  color:var(--ink);
}

.value__notes{display:grid;gap:1.2rem}

.value__note p{
  margin:.35rem 0 0;
  font-size:.92rem;
  line-height:1.62;
  color:var(--ink-70);
}

.value__note--practice p{
  font-size:.86rem;
  color:var(--ink-45);
}

.value__label{
  display:block;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.closing{
  position:relative;
  max-width:46rem;
  margin:clamp(2.6rem,5vw,3.8rem) 0 0;
  padding-top:1.5rem;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.05rem,1.9vw,1.26rem);
  line-height:1.5;
  letter-spacing:-.006em;
  color:var(--ink);
}
.closing::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:1px;
  background:var(--rule-strong);
  transform-origin:left center;
}

.sec-head p a,
.prose a{color:var(--oxblood);text-underline-offset:.18em}

@media (max-width:64rem){
  .value{grid-template-columns:3.5rem minmax(0,1fr)}
  .value__notes{grid-column:2;margin-top:1.3rem}
}

@media (max-width:34rem){
  .value{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .value__notes{grid-column:1;margin-top:1.2rem}
  .value__no{padding-top:0}
}

/* the value hairlines draw in like the section dividers */
@media (prefers-reduced-motion:no-preference){
  .js .value[data-reveal]::before,
  .js .closing[data-reveal]::before{
    transform:scaleX(0);
    transition:transform 1.15s cubic-bezier(.22,1,.36,1) .1s;
  }
  .js .value[data-reveal].is-in::before,
  .js .closing[data-reveal].is-in::before{transform:scaleX(1)}
}