/* ==================================================================
   THE HOT DOG INDEX
   Dark warehouse page, chart printed on a paper panel.
   Series colours validated against the paper surface:
     actual  #0A5FA8   inflation-adjusted  #D01F2F
================================================================== */

:root{
  --paper:#FCFBF7; --concrete:#EAE6DD; --ink:#10171F; --ink-2:#2A333E;
  --navy:#00437E; --navy-deep:#002647; --navy-ink:#001A32;
  --red:#D01F2F; --caution:#F0C020; --steel:#8B8578; --steel-2:#B4AEA0;

  --s-act:#0A5FA8;   /* actual price */
  --s-adj:#D01F2F;   /* inflation-adjusted */

  --sign:'Big Shoulders Display','Archivo Narrow',Impact,sans-serif;
  --body:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,56px); --wrap:1040px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

body{
  margin:0; background:var(--navy-ink); color:var(--paper);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-image:var(--noise), radial-gradient(70% 50% at 70% 0%, rgba(0,93,170,.22), transparent 60%);
  background-attachment:fixed;
}
main{ width:min(100% - (var(--pad) * 2), var(--wrap)); margin-inline:auto; }
svg{ display:block; max-width:100%; }

/* ---------------------------- TOP ------------------------------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px var(--pad); border-bottom:2px solid rgba(255,255,255,.16);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand__star{ color:var(--red); font-size:1.55rem; line-height:1; }
.brand__text{ display:flex; flex-direction:column; line-height:.84; }
.brand__line1{ font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; color:var(--caution); font-weight:600; }
.brand__line2{ font-family:var(--sign); font-size:1.35rem; font-weight:800; text-transform:uppercase; color:var(--paper); }
.top__back{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:#9FBBD6; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;
}
.top__back:hover{ border-color:var(--caution); color:var(--caution); }

/* ---------------------------- INTRO ----------------------------- */
.intro{ padding:clamp(44px,7vw,80px) 0 clamp(28px,4vw,40px); }
.eyebrow{
  margin:0 0 16px; font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--caution);
}
h1{
  margin:0 0 20px; font-family:var(--sign); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.8rem,8vw,5.6rem); line-height:.86; letter-spacing:-.015em;
}
.intro__lede{ margin:0; max-width:62ch; color:#C7DAEA; font-size:1.06rem; }
.intro__lede strong{ color:var(--caution); }

/* ---------------------------- HERO STATS ------------------------ */
.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,2vw,22px); margin-bottom:clamp(28px,4vw,40px);
}
.hs{
  padding:22px 24px; border:2px solid rgba(255,255,255,.2); border-radius:4px;
  background:rgba(0,0,0,.24); display:flex; flex-direction:column; gap:4px;
}
.hs__k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:#8FB6D8; }
.hs__v{ font-family:var(--sign); font-weight:900; font-size:clamp(3rem,7vw,4.6rem); line-height:.9; }
.hs__s{ font-size:.86rem; color:#9FBBD6; }
.hs--act{ border-left:6px solid var(--s-act); }
.hs--act .hs__v{ color:#8FC4F2; }
.hs--adj{ border-left:6px solid var(--s-adj); }
.hs--adj .hs__v{ color:#FF9BA3; }

/* ---------------------------- PANEL (paper) --------------------- */
.panel{
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:5px;
  box-shadow:10px 12px 0 rgba(0,0,0,.35);
  padding:clamp(20px,3vw,30px);
}
.panel__head{
  display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; justify-content:space-between;
  margin-bottom:18px;
}
.panel__head h2{
  margin:0; font-family:var(--sign); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,1.8rem); letter-spacing:.005em; color:var(--navy-deep);
}
.legend{ display:flex; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0; }
.legend li{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
}
.sw{ width:14px; height:3px; border-radius:2px; flex:none; display:inline-block; }
.sw--act{ background:var(--s-act); }
.sw--adj{ background:var(--s-adj); }

.chartwrap{ position:relative; }
.chart svg{ width:100%; height:auto; }
.grid{ stroke:rgba(16,23,31,.10); stroke-width:1; }
.tick{ font-family:'IBM Plex Mono',monospace; font-size:11px; fill:#6B6558; text-anchor:middle; }
.tick--y{ text-anchor:end; }
.gap{ fill:rgba(208,31,47,.09); }
.line{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.line--act{ stroke:var(--s-act); }
.line--adj{ stroke:var(--s-adj); }
.dot{ stroke:var(--paper); stroke-width:2; }
.dot--act{ fill:var(--s-act); }
.dot--adj{ fill:var(--s-adj); }
.lbl{ font-family:var(--sign); font-weight:800; font-size:19px; }
.lbl.sub{ font-family:var(--body); font-weight:500; font-size:11px; fill:#6B6558; }
.lbl--act{ fill:var(--s-act); }
.lbl--adj{ fill:var(--s-adj); }
.lbl--adj.sub, .lbl--act.sub{ fill:#6B6558; }
.crosshair{ stroke:rgba(16,23,31,.35); stroke-width:1; stroke-dasharray:3 3; }
#hit{ cursor:crosshair; }

.tip{
  position:absolute; top:6px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper);
  border-radius:4px; padding:9px 12px; pointer-events:none;
  font-size:.78rem; line-height:1.5; white-space:nowrap;
  display:flex; flex-direction:column; gap:2px; z-index:3;
}
.tip b{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--caution); }
.tip span{ display:flex; align-items:center; gap:7px; }

.panel__foot{ margin:20px 0 0; font-size:.9rem; color:var(--ink-2); display:flex; flex-direction:column; gap:8px; }
.src{ font-size:.76rem; color:#6B6558; }

/* ---------------------------- TILES ----------------------------- */
.tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(14px,2vw,20px); margin:clamp(22px,3vw,30px) 0 0;
}
.tile{
  padding:20px 22px; background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.18); border-top:3px solid var(--caution);
  border-radius:3px; display:flex; flex-direction:column; gap:6px;
}
.tile__k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#8FB6D8; }
.tile__v{ font-family:var(--sign); font-weight:800; font-size:2.2rem; line-height:1; color:var(--caution); }

/* ---------------------------- TABLE ----------------------------- */
.tablewrap{ margin-top:clamp(22px,3vw,30px); }
summary{
  cursor:pointer; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:#9FBBD6; padding:12px 0;
}
summary:hover{ color:var(--caution); }
.tablescroll{ overflow-x:auto; margin-top:10px; }
table{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:460px; }
caption{ text-align:left; font-size:.76rem; color:#8FB6D8; padding-bottom:10px; }
th,td{ padding:7px 12px; text-align:right; border-bottom:1px solid rgba(255,255,255,.1); }
thead th{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--caution); text-align:right; border-bottom:2px solid rgba(255,255,255,.24);
}
tbody th{ text-align:left; font-weight:600; color:var(--paper); font-family:var(--mono); font-size:.8rem; }
td{ font-family:var(--mono); color:#C7DAEA; font-variant-numeric:tabular-nums; }
.par{ font-family:var(--body); font-size:.66rem; color:var(--steel); text-transform:uppercase; letter-spacing:.1em; }

/* ---------------------------- OUTRO ----------------------------- */
.outro{ padding:clamp(40px,6vw,64px) 0 clamp(30px,4vw,44px); }
.outro__line{
  margin:0 0 24px; font-family:var(--sign); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem); line-height:1.06; color:var(--caution); max-width:24ch;
}
.outro__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  --bg:var(--caution); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; padding:13px 26px;
  background:var(--bg); color:var(--fg);
  font-family:var(--sign); font-weight:700; font-size:1.1rem;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  border:2px solid var(--ink); border-radius:2px; box-shadow:4px 4px 0 rgba(0,0,0,.55);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease); cursor:pointer;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.55); }
.btn--ghost{ --bg:transparent; --fg:var(--paper); border-color:rgba(255,255,255,.5); }
.btn:focus-visible{ outline:3px solid var(--caution); outline-offset:3px; }

/* ---------------------------- FOOTER ---------------------------- */
.foot{ background:var(--ink); padding:clamp(32px,5vw,52px) var(--pad); margin-top:clamp(30px,5vw,56px); }
.foot > *{ width:min(100%, var(--wrap)); margin-inline:auto; }
.foot__legal{ font-size:.76rem; line-height:1.7; color:var(--steel); margin:0 0 14px; max-width:92ch; }
.foot__copy{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#5E5A50; margin:0; }

@media (max-width:720px){
  /* The viewBox shrinks by roughly 0.4 on a phone, so scale the type back. */
  .tick{ font-size:23px; }
  .lbl{ font-size:34px; }
  .panel{ padding:16px 12px; }
  .panel__head h2{ font-size:1.15rem; }
}