/* d8: the one system for every page. design.test.mjs fails a page that writes its own color, font or type style. */
:root{
  --paper:#efe6d2;--ink:#1f2a6e;--ink-2:#5d6390;--rule:#cbc1ab;
  --red:#c3352d;--navy:#22349a;--mustard:#e0b02e;
  --wash:color-mix(in srgb,var(--mustard) 40%,var(--paper));
  --mat:#fbf6ea;--mat-edge:#d9cdb2;

  --slab:"Alfa Slab One",serif;--sans:"Libre Franklin",system-ui,sans-serif;
  --title-big:400 clamp(56px,11vw,132px)/.88 var(--slab);
  --title:400 clamp(44px,7vw,84px)/.9 var(--slab);
  --number:400 56px/1 var(--slab);
  --head:600 15px/1.2 var(--sans);
  --label:600 13px/1.3 var(--sans);
  --tag:600 12px/1.3 var(--sans);
  --question:italic 400 clamp(22px,3.4vw,27px)/1.35 var(--sans);
  --text:400 17px/1.55 var(--sans);
  --small:400 14px/1.4 var(--sans);
  --fine:400 12px/1.4 var(--sans);
  --track-title:-.01em;--track-head:.16em;--track-label:.14em;
}
@media (max-width:560px){:root{--number:400 44px/1 var(--slab)}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background-color:var(--paper);color:var(--ink);font:var(--text);-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1{font:var(--title);color:var(--red);letter-spacing:var(--track-title);margin:0;text-shadow:.5px .5px 0 color-mix(in srgb,var(--red) 55%,transparent)}
h1 a{color:inherit;text-decoration:none}
.stripes{height:18px;display:grid;grid-template-rows:1fr 1fr 1fr;gap:3px}
.stripes i{background:var(--navy)}.stripes i:nth-child(2){background:var(--red)}.stripes i:nth-child(3){background:var(--mustard)}
.date{display:block;font:var(--label);letter-spacing:var(--track-label)}

/* scores: red ring under par, mustard band double or worse, plain ink par or bogey */
.score{font-style:normal;display:inline-block;min-width:1.7em;text-align:center;line-height:1.5}
.score.under{color:var(--red);box-shadow:inset 0 0 0 1px var(--red);border-radius:50%}
.score.over{background:var(--wash)}
.key{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;font:var(--fine);color:var(--ink-2)}
.key li{display:flex;align-items:baseline;gap:6px}
.key .score{color:var(--ink)}.key .score.under{color:var(--red)}