/* melchordgen - reports app · "music you can see"
   COMBINATION aesthetic: ref-01 (grainy airbrushed depth + warm glow) x ref-02
   (Tennyson screenprint: electric blue, raunchy RED paint, black high-contrast, riso grit).
   Less pink. Bold, painterly, printed - not warm/pastel. */

:root{
  --blue:#1c6dab;           /* steel blue - secondary on the navy field */
  --blue-deep:#0a5f9e;
  --violet:#3e4c8f;         /* muted indigo bleed */
  --teal:#0d7680;           /* editorial teal (FT family) */
  --red:#ec3324;            /* vermilion paint - hero accent, the identity, kept */
  --red-deep:#c31f12;
  --amber:#c9a227;          /* antique gold - the warm pop on navy (annual-report family) */
  --amber-deep:#8f7118;     /* used by report chart accents */
  --ink:#141210;            /* near-black print ink (card text) */
  --ink-2:#3d3833;
  --ink-3:#6f675e;
  --paper:#f6f2e9;          /* screenprint paper card */
  --paper-brd:rgba(18,16,12,0.85);
  --field-ink:#0a1a24;      /* dark ink used ON the blue field */
  --good:#0c7d52;
  --warn:#c85a12;
  --sans:"SF Pro Rounded",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;color:var(--ink);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;overflow-x:hidden;position:relative;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---- the screenprint field: bold electric blue, painterly bleeds, red streak ---- */
.haze{position:fixed;inset:-8%;z-index:-3;
  background:
    /* one antique gold bloom, dim (the single warm pop) */
    radial-gradient(8% 8% at 24% 26%, rgba(201,162,39,0.26), transparent 60%),
    /* vermilion paint streak (skewed) - the identity, kept but quiet */
    radial-gradient(60% 10% at 66% 40%, rgba(236,51,36,0.3), transparent 64%),
    /* tone-on-tone navy bleeds - one hue family, four depths */
    radial-gradient(54% 60% at 10% 8%, rgba(30,58,102,0.7), transparent 70%),
    radial-gradient(58% 60% at 94% 14%, rgba(22,48,88,0.6), transparent 72%),
    radial-gradient(64% 66% at 90% 92%, rgba(26,64,116,0.5), transparent 74%),
    radial-gradient(60% 62% at 6% 94%, rgba(14,32,60,0.8), transparent 74%),
    linear-gradient(150deg,#14294a,#0e2038 44%,#0b1a2e 70%,#071224);
  filter:saturate(1.05) contrast(1.08);
}
/* heavy screenprint grain */
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:1;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px;}
/* halftone dots + faint scratch streaks (the riso/print grit) */
.grain::after{content:"";position:fixed;inset:0;
  background-image:
    radial-gradient(rgba(10,26,36,0.16) 0.8px, transparent 1.1px),
    repeating-linear-gradient(64deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(-58deg, rgba(10,20,30,0.05) 0 1px, transparent 1px 300px);
  background-size:5px 5px, auto, auto;
  mix-blend-mode:multiply;opacity:0.55;}
/* top unifying grain (over cards too) + a whisper of chromatic misregistration */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:120px 120px;}

.wrap{max-width:720px;margin:0 auto;padding:0 16px 72px;position:relative;z-index:1;}

/* ---- the type system (v2 pass): one link style, one scale, measured rhythm ----
   scale: report body 16.5/1.66 · about 16/1.64 · reference pages 15.5/1.65 ·
   row text 13.5 · captions/labels mono 10-12.5 · line length 60-66ch everywhere */
.wrap p a, .wrap li a, .wrap td a, .wrap summary a, .wrap .ev a{
  color:var(--red-deep);font-weight:700;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2.5px;text-decoration-color:rgba(195,31,18,0.45);}
.wrap p a:hover, .wrap li a:hover, .wrap td a:hover{text-decoration-thickness:2px;text-decoration-color:var(--red-deep);}
.foot a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}

/* ---- app bar (inked block) ---- */
.bar{position:sticky;top:0;z-index:20;margin:0 -16px 0;padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;
  background:rgba(4,10,20,0.88);border-bottom:2px solid var(--red);}
.bar-in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:11px;}
.logo{width:22px;height:22px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 40% 36%, #ffe6a8, var(--amber) 55%, var(--red-deep) 96%);}
.bar b{font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff;}
.bar small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-left:auto;}

/* ---- hero (on the field: dark ink + white pop) ---- */
.hero{padding:36px 4px 8px;}
.ey{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--field-ink);margin:0 0 12px;
  background:rgba(255,255,255,0.55);display:inline-block;padding:3px 8px;border-radius:4px;}
h1{font-size:clamp(32px,8vw,48px);line-height:1.02;letter-spacing:-.035em;font-weight:880;margin:0 0 12px;text-wrap:balance;
  color:#fff;text-shadow:0 2px 0 rgba(10,26,36,0.35), 0 0 24px rgba(10,40,60,0.3);}
.hero .sub{font-size:16px;color:var(--field-ink);margin:0;max-width:52ch;font-weight:600;
  text-shadow:0 1px 10px rgba(255,255,255,0.4);}
.star{margin-top:18px;font-size:14.5px;color:var(--field-ink);font-weight:600;
  background:rgba(255,255,255,0.6);display:inline-block;padding:8px 13px;border-radius:6px;border-left:3px solid var(--red);}
.star .glow{color:var(--red-deep);font-weight:800;}

/* section label */
.h2{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  margin:34px 6px 14px;display:flex;align-items:center;gap:10px;font-weight:700;text-shadow:0 1px 6px rgba(10,26,36,0.5);}
.h2::after{content:"";flex:1;height:2px;background:rgba(255,255,255,0.4);}

/* ---- screenprint paper cards (hard poster edges + offset shadow) ---- */
.glass{background:var(--paper);border:1.5px solid var(--paper-brd);border-radius:8px;
  box-shadow:5px 5px 0 rgba(10,26,36,0.28);}

/* ---- report panes ---- */
.panes{display:flex;flex-direction:column;gap:16px;}
a.pane{display:block;text-decoration:none;color:inherit;padding:18px 18px 16px;position:relative;overflow:hidden;
  transition:transform .1s ease, box-shadow .1s ease;}
a.pane:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(10,26,36,0.28);}
a.pane:hover{box-shadow:7px 7px 0 var(--red);}
.pane .node{position:absolute;top:14px;right:16px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(20,18,16,0.34), rgba(20,18,16,0.18) 58%, rgba(20,18,16,0.10) 80%);
  box-shadow:inset 0 3px 5px rgba(10,26,36,0.45), inset 0 -1.5px 2px rgba(255,255,255,0.85), 0 1px 0 rgba(255,255,255,0.55);}
.pane .node.live::after{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;border-radius:50%;
  background:radial-gradient(rgba(170,198,230,0.16) 0.5px, transparent 0.9px),
    radial-gradient(circle at 62% 28%, rgba(116,150,192,0.30), rgba(116,150,192,0) 48%),
    radial-gradient(circle at 42% 38%, #1d3f68, #122c4e 55%, #0a1c33 96%);
  background-size:3px 3px, 100% 100%, 100% 100%;
  box-shadow:0 2px 3.5px rgba(10,26,36,0.4);}
.pane .tt{font-size:19px;font-weight:880;letter-spacing:-.025em;margin:0 30px 4px 0;line-height:1.12;color:var(--ink);}
.pane .dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--red-deep);text-transform:uppercase;margin-bottom:9px;font-weight:700;}
.pane .bl{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.58;max-width:66ch;}
.pane .row{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.pane .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink);
  background:transparent;border:1.5px solid rgba(18,16,12,0.35);border-radius:4px;padding:2px 8px;}
.pane .arrow{margin-left:auto;font-size:18px;color:var(--red);font-weight:800;}

.empty{padding:26px 20px;text-align:center;color:var(--ink-2);font-size:14.5px;}

/* footer */
.foot{margin-top:34px;padding:16px 6px 0;font-size:12px;color:var(--field-ink);line-height:1.55;font-weight:500;}
.foot b{color:#0a1a24;} .foot code{font-family:var(--mono);font-size:.92em;}

/* ---- report page chrome ---- */
.back{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#fff;font-size:13.5px;
  font-family:var(--mono);margin:6px 0 2px;font-weight:700;text-shadow:0 1px 6px rgba(10,26,36,0.5);}
.back:hover{color:var(--amber);}
.rp-hero{padding:22px 4px 4px;}
.rp-body{font-size:16px;color:var(--field-ink);margin:0 0 16px;max-width:64ch;font-weight:600;
  background:rgba(255,255,255,0.42);padding:2px 8px;border-radius:5px;display:block;}
.rp-body b{color:#0a1a24;font-weight:800;}
.card{padding:20px;margin:16px 0;}
.card .rp-body, .card .cs, .card .ct{background:none;padding:0;}
.ct{font-size:15px;font-weight:880;margin:0 0 3px;color:var(--ink);letter-spacing:-.01em;}
.cs{font-size:13px;color:var(--ink-2);margin:0 0 14px;}
.card{color:var(--ink);}
.card .rp-body{color:var(--ink-2);}
svg{display:block;width:100%;height:auto;overflow:visible;}
.tick{font-family:var(--mono);font-size:10px;fill:var(--ink-3);}

/* sleek references block */
.refs{margin-top:26px;padding:14px 16px;background:rgba(255,255,255,0.4);border-radius:8px;border-left:2px solid var(--red);}
.refs .rh{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--field-ink);margin-bottom:8px;font-weight:700;}
.refs ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;}
.refs li{font-family:var(--mono);font-size:11px;color:var(--field-ink);line-height:1.55;}
.refs li b{color:#0a1a24;font-weight:700;}
.refs code{font-family:var(--mono);}
.stamp{font-family:var(--mono);font-size:11px;color:var(--field-ink);opacity:.85;}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}