@font-face{font-family:'Cormorant';src:url('/fonts/cormorant-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* The two registers of the Mareld house style, and nothing else:
   light-on-black, or ink-on-paper. Dark is the primary — the work is a light
   source — so the bare :root carries it and the paper register is the swap. */
:root{
  --ground:#040507; --surface:#080C12; --rule:#1C2530; --hair:#566C80;
  --display:#D8E4F0; --body:#A9B8C8; --muted:#687E94; --colophon:#546678;
  --mark:#FFF3DB; --dim:#5D6A72; --warn:#A87460;
  --halo:rgba(255,243,219,.14); --play:rgba(255,243,219,.55);
  --neat:#131C26;
  --measure:64ch; --rail:1180px;
  --s1:.35rem; --s2:.7rem; --s3:1.2rem; --s4:2rem; --s5:3.4rem; --s6:5.6rem;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#F7F4EE; --surface:#FBF9F5; --rule:#DDD7CA; --hair:#8A8272;
    --display:#14161A; --body:#33383F; --muted:#5C6068; --colophon:#6C727A;
    --mark:#171A1F; --dim:#A49C8C; --warn:#96523C;
    --halo:rgba(23,26,31,.10); --play:rgba(23,26,31,.45);
    --neat:#E4DFD3;
  }
}
:root[data-theme="light"]{
  --ground:#F7F4EE; --surface:#FBF9F5; --rule:#DDD7CA; --hair:#8A8272;
  --display:#14161A; --body:#33383F; --muted:#5C6068; --colophon:#6C727A;
  --mark:#171A1F; --dim:#A49C8C; --warn:#96523C;
  --halo:rgba(23,26,31,.10); --play:rgba(23,26,31,.45);
  --neat:#E4DFD3;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-weight:350;
  font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--rail); margin:0 auto; padding:var(--s6) clamp(1.25rem,5vw,4.5rem) var(--s5)}
p{max-width:var(--measure); margin:0 0 var(--s3)}
a{color:var(--display); text-decoration:none; border-bottom:1px solid var(--hair)}
a:hover{border-bottom-color:var(--display)}
a:focus-visible,button:focus-visible{outline:2px solid var(--hair); outline-offset:3px}

/* ---- masthead: the A4 proof's title block, set in the same faces ---- */
.mast{display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s5)}
h1{
  font-family:Cormorant,Georgia,serif; font-weight:300;
  font-size:clamp(3.1rem,11vw,6.4rem); line-height:.94; letter-spacing:.155em;
  color:var(--display); margin:0 0 .1em; text-indent:.155em; text-wrap:balance;
}
.eyebrow{
  font-size:.72rem; font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.lede{max-width:58ch; color:var(--body); font-size:1.06rem; margin-top:var(--s3)}
.lede strong{color:var(--display); font-weight:400}

/* ---- section heads: a label on a neatline, as on the charts ---- */
section{margin-top:var(--s6); scroll-margin-top:1.5rem}
.head{
  display:flex; align-items:baseline; gap:var(--s3);
  border-top:1px solid var(--rule); padding-top:var(--s2); margin-bottom:var(--s4);
}
.head h2{
  font-family:Inter,sans-serif; font-size:.74rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--display); margin:0;
}
.head .note{font-size:.74rem; letter-spacing:.06em; color:var(--colophon); margin-left:auto; text-align:right}

/* ---- the score ---- */
.scorebox{border:1px solid var(--neat); background:var(--surface); padding:var(--s3) 0 var(--s2)}
.scroll{overflow-x:auto; overflow-y:hidden}
.scroll svg{display:block; min-width:940px; width:100%; height:auto}
.readout{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3);
  padding:var(--s2) clamp(1rem,3vw,2rem) 0; border-top:1px solid var(--neat); margin-top:var(--s2);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--colophon);
}
.readout .sec{
  font-family:Cormorant,Georgia,serif; font-size:2.1rem; font-weight:300;
  letter-spacing:.06em; color:var(--display); line-height:1;
  font-variant-numeric:tabular-nums; min-width:2.6ch; text-align:right;
}
.readout .lit{color:var(--mark); letter-spacing:.16em}
button.toggle{
  margin-left:auto; background:none; border:1px solid var(--rule); color:var(--muted);
  font:inherit; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.45em 1.1em; cursor:pointer;
}
button.toggle:hover{color:var(--display); border-color:var(--hair)}

/* ---- figures ---- */
figure{margin:0}
figure img{display:block; width:100%; height:auto; border:1px solid var(--neat)}
figcaption{
  margin-top:var(--s2); font-size:.76rem; color:var(--colophon);
  letter-spacing:.02em; max-width:62ch;
}
.two{display:grid; grid-template-columns:1fr; gap:var(--s4)}
@media (min-width:900px){ .two{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s5); align-items:start} }

/* ---- data ---- */
.tablebox{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.88rem}
caption{text-align:left; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--colophon); padding-bottom:var(--s2)}
th{
  text-align:left; font-weight:500; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--rule); padding:0 1.4em .55em 0;
}
td{
  padding:.62em 1.4em .62em 0; border-bottom:1px solid var(--neat);
  vertical-align:baseline; color:var(--body);
}
td.k{color:var(--display); white-space:nowrap}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--display)}
tbody tr:last-child td{border-bottom:none}

dl.specs{display:grid; grid-template-columns:auto 1fr; gap:.5em var(--s3); margin:0; font-size:.9rem}
dl.specs dt{color:var(--muted); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; padding-top:.28em}
dl.specs dd{margin:0; color:var(--display); font-variant-numeric:tabular-nums}

/* ---- findings: the two things worth stopping on ---- */
.finding{border-left:1px solid var(--hair); padding-left:var(--s3); max-width:60ch}
.finding + .finding{margin-top:var(--s4)}
.finding h3{
  font-family:Cormorant,Georgia,serif; font-weight:400; font-size:1.5rem;
  letter-spacing:.04em; color:var(--display); margin:0 0 var(--s2);
}
.finding p{margin-bottom:0}

/* ---- colophon: bottom left, three registers of fact, as on every page ---- */
.colophon{
  margin-top:var(--s6); border-top:1px solid var(--rule); padding-top:var(--s3);
  font-size:.76rem; line-height:1.75; color:var(--colophon); max-width:76ch;
}
.colophon b{font-weight:500; color:var(--muted)}
.colophon p{max-width:none; margin:0}

/* utilities — kept as classes because the blog copy of this page is served
   under style-src 'self', where a style attribute is simply refused */
.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}
.callout{color:var(--display); font-weight:400}
.backlink{margin-top:var(--s4); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
.backlink a{color:var(--muted); border-bottom-color:var(--rule)}
.backlink a:hover{color:var(--display); border-bottom-color:var(--hair)}

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