@charset "UTF-8";

@font-face {
  font-family: "Arial Rounded MT Bold";
  src: url("assets/Arial_Rounded_MT_Bold_Regular.d9352e7d7371.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #13100a;
  --surface: #241e10;
  --surface-alt: #2e2615;
  --surface-raised: #3a2e1e;
  --text: #fffdd0;
  --muted: #c4a882;
  --subtle: #8a7a60;
  --gold: #d4a017;
  --gold-light: #f4d03f;
  --gold-dark: #b8860b;
  --border: #8b6914;
  --border-soft: #5a4516;
  --line: #4a3c28;
  --soft-line: #3a2e1e;
  --radius: 12px;
  --shadow-card: 0 1px 0 rgba(244,208,63,.04) inset, 0 18px 48px -22px rgba(0,0,0,.85), 0 2px 8px -4px rgba(0,0,0,.6);
  --font-display: "Arial Rounded MT Bold", "Avenir Next Rounded", "Avenir Black", "Avenir Heavy", "Futura Bold", "Arial Black", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-family: var(--font-display);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.45
}
body.viewer-open {
  overflow:hidden
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
button:disabled,select:disabled {
  cursor:default;
  opacity:.5
}
button,input,select {
  color:var(--text)
}
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}
button:focus-visible,input:focus-visible,select:focus-visible {
  outline-offset:3px
}
[hidden] {
  display:none!important
}
.wrap {
  max-width:1376px;
  margin:0 auto;
  padding-inline:48px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  left:20px;
  top:-80px;
  z-index:20;
  background:var(--gold);
  color:var(--bg);
  padding:12px 20px;
  border-radius:6px
}
.skip-link:focus {
  top:12px
}

.site-header {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  gap:20px;
  background:linear-gradient(180deg,#1a1509 0%,#13100a 100%);
  border-bottom:1.5px solid var(--border)
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:900;
  color:var(--gold);
  letter-spacing:.14em;
  line-height:1.1
}
.brand small {
  display:block;
  color:var(--muted);
  font-size:9px;
  letter-spacing:3px;
  margin-top:8px;
  font-weight:700
}
.brand-logo {
  display:block;
  width:40px;
  height:40px;
  filter:drop-shadow(0 0 8px rgba(212,160,23,.45));
}
.site-link {
  position:absolute;
  right:48px;
  font-size:11px;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:.1px
}
.site-link span {
  margin-left:9px;
  color:var(--gold);
  font-size:19px
}
.site-link:hover {
  color:var(--text)
}

.hero {
  display:grid;
  grid-template-columns:1fr 285px;
  gap:64px;
  align-items:center;
  padding:36px 0 32px
}
.eyebrow {
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:800
}
.gold-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--gold);
  border-radius:50%
}
h1 {
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(36px,4.6vw,56px);
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0
}
h1 em {
  font-weight:900;
  font-style:normal;
  color:var(--gold-light)
}
.hero-copy {
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
  margin:20px 0 0
}
.edition {
  padding:22px 0 22px 30px;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.edition-label {
  font-size:9px;
  letter-spacing:2px;
  color:var(--gold);
  font-weight:800
}
.edition-date {
  font-family:var(--font-display);
  font-size:36px;
  font-weight:900;
  line-height:1.1;
  color:var(--gold-light);
  letter-spacing:-.01em;
  margin-top:10px
}
.edition-weekday {
  color:var(--muted);
  font-size:12px;
  margin-top:3px
}
.edition-stats {
  display:flex;
  gap:25px;
  margin-top:23px;
  color:var(--muted);
  font-size:12px
}
.edition-stats strong {
  color:var(--text);
  font-size:17px;
  font-weight:700;
  margin-right:3px
}
.edition-action {
  font-size:11px;
  color:var(--gold);
  display:flex;
  gap:27px;
  margin-top:25px
}
.edition-action span {
  font-size:17px;
  line-height:1
}
.gallery-section {
  padding:28px 0 50px;
  border-top:1px solid var(--line)
}
.gallery-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.edition-controls {
  display:flex;
  align-items:center;
  gap:21px;
  flex-wrap:wrap
}
h2 {
  color:var(--gold-light);
  text-transform:uppercase;
  font-size:18px;
  letter-spacing:-.35px;
  font-weight:700;
  margin:0
}
.date-controls {
  display:flex;
  gap:8px;
  align-items:center
}
select {
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 28px 8px 10px;
  background:var(--surface);
  font-size:11px;
  max-width:230px
}
.cadence {
  color:var(--gold);
  background:rgba(212,160,23,.10);
  border:1px solid rgba(212,160,23,.35);
  font-size:9px;
  letter-spacing:.5px;
  padding:3px 7px;
  border-radius:4px
}
.search-wrap {
  display:flex;
  align-items:center;
  width:265px;
  min-width:210px;
  position:relative
}
.search-wrap>svg {
  width:16px;
  height:16px;
  position:absolute;
  left:12px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.6;
  pointer-events:none
}
.search-wrap input {
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  padding:11px 34px 11px 36px;
  font-size:11px
}
.search-wrap input::placeholder {
  color:var(--muted)
}
.search-wrap kbd {
  position:absolute;
  right:11px;
  font:11px/1.4 inherit;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:3px;
  padding:0 4px;
  pointer-events:none
}
.search-wrap:focus-within kbd {
  display:none
}
.section-filters {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:22px 2px 14px;
  margin-inline:-2px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent
}
.section-filters button {
  white-space:nowrap;
  flex-shrink:0;
  border:1.5px solid var(--border-soft);
  background:transparent;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:7px 12px;
  font-size:10px;
  color:var(--muted);
  transition:background .15s,color .15s
}
.section-filters button span {
  font-size:9px;
  margin-left:7px;
  opacity:.7
}
.section-filters button:hover {
  border-color:var(--gold-dark);
  color:var(--text)
}
.section-filters button[aria-pressed=true] {
  background:var(--gold);
  border-color:var(--gold);
  color:var(--bg);
  font-weight:800
}
.results-row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin:6px 0 17px;
  color:var(--muted);
  font-size:10px
}
.results-row p {
  margin:0
}
.view-hint {
  white-space:nowrap
}
.view-hint span {
  color:var(--gold);
  margin-left:7px
}
.chart-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px 22px
}
.chart-card {
  min-width:0
}
.chart-open {
  display:block;
  width:100%;
  padding:0;
  text-align:left;
  border:0;
  background:transparent;
  border-radius:var(--radius);
  color:var(--text)
}
.chart-picture {
  display:block;
  position:relative;
  aspect-ratio:16/9;
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-card)
}
.chart-picture img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform .25s
}
.chart-open:hover .chart-picture img {
  transform:scale(1.025)
}
.chart-picture::after {
  content:"↗";
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  place-items:center;
  height:28px;
  width:28px;
  border-radius:50%;
  background:#13100ae6;
  color:var(--gold);
  opacity:0;
  transform:translateY(3px);
  transition:opacity .15s,transform .15s
}
.chart-open:hover .chart-picture::after,.chart-open:focus-visible .chart-picture::after {
  opacity:1;
  transform:none
}
.chart-label {
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:12px 2px 0;
  font-size:12px;
  line-height:1.45;
  font-weight:700
}
.chart-number {
  color:var(--gold-dark);
  font-size:10px;
  font-variant-numeric:tabular-nums;
  flex-shrink:0
}
.chart-card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:5px 2px 0 25px
}
.chart-section {
  font-size:9px;
  letter-spacing:.3px;
  color:var(--muted)
}
.card-download {
  display:grid;
  place-items:center;
  color:var(--muted);
  width:28px;
  height:28px;
  border-radius:4px;
  flex-shrink:0
}
.card-download svg {
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.card-download:hover {
  color:var(--gold);
  background:var(--surface-raised)
}
.image-failed {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  padding:20px;
  font-size:12px
}
.empty-state {
  text-align:center;
  padding:55px 20px 70px;
  border:1px dashed var(--line);
  border-radius:10px;
  color:var(--muted)
}
.empty-state>span {
  font-size:40px;
  color:var(--gold)
}
.empty-state h3 {
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin:10px 0
}
.empty-state p {
  font-size:13px
}
.empty-state button {
  background:var(--gold);
  color:var(--bg);
  border:0;
  border-radius:5px;
  font-size:12px;
  padding:10px 16px;
  margin-top:10px
}
.site-footer {
  border-top:1.5px solid var(--border);
  background:linear-gradient(180deg,#13100a 0%,#0d0a06 100%);
  padding-block:23px 30px;
  display:flex;
  align-items:center;
  gap:25px;
  justify-content:space-between;
  color:var(--muted);
  font-size:9px
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.7px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap
}
.footer-logo {
  width:28px;
  height:28px;
  flex-shrink:0;
}
.footer-brand span {
  font-weight:700;
  letter-spacing:0;
  color:var(--muted)
}
.site-footer p {
  max-width:470px;
  margin:0;
  text-align:center
}
.footer-note {
  white-space:nowrap
}

dialog {
  padding:0;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  max-width:calc(100vw - 40px);
  width:1500px;
  max-height:calc(100dvh - 40px);
  overflow:hidden;
  box-shadow:0 30px 100px #0008
}
dialog::backdrop {
  background:#080604e8;
  backdrop-filter:blur(5px)
}
.viewer-shell {
  display:flex;
  flex-direction:column;
  height:calc(100dvh - 44px);
  max-height:calc(100dvh - 44px)
}
.viewer-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:17px 20px;
  border-bottom:1px solid var(--line);
  flex-shrink:0
}
.viewer-heading {
  min-width:0
}
.viewer-heading p {
  font-size:10px;
  color:var(--gold);
  margin:0 0 5px
}
.viewer-heading h2 {
  text-transform:none;
  font-size:16px
}
.viewer-actions {
  display:flex;
  gap:8px;
  flex-shrink:0
}
.icon-button {
  display:grid;
  place-items:center;
  height:36px;
  width:36px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--text);
  padding:9px
}
.icon-button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.icon-button:hover {
  background:var(--surface-raised);
  color:var(--gold)
}
.icon-button[aria-pressed=true] {
  color:var(--gold);
  border-color:var(--gold)
}
.close-button {
  margin-left:8px
}
.viewer-zoom-controls {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:9px 20px;
  border-bottom:1px solid var(--line);
  flex-shrink:0
}
.viewer-zoom-controls .icon-button {
  font-size:21px;
  line-height:1;
  padding:0
}
#zoom-level {
  min-width:48px;
  text-align:center;
  font-size:11px;
  font-variant-numeric:tabular-nums
}
.zoom-preset {
  height:36px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  color:var(--text);
  padding:0 12px;
  font-size:11px
}
.zoom-preset:hover,.zoom-preset[aria-pressed=true] {
  color:var(--gold);
  border-color:var(--gold)
}
.zoom-hint {
  color:var(--muted);
  margin-left:auto;
  font-size:10px
}
.viewer-stage {
  min-height:0;
  overflow:auto;
  position:relative;
  background:var(--surface);
  flex:1;
  overscroll-behavior:contain;
  scroll-behavior:auto
}
.viewer-canvas {
  position:relative;
  min-width:100%;
  min-height:100%
}
.viewer-stage:not(.zoomed) {
  overflow:hidden
}
.viewer-stage img {
  display:block;
  position:absolute;
  max-width:none;
  max-height:none;
  user-select:none;
  -webkit-user-drag:none;
  cursor:default
}
.viewer-stage.zoomed,.viewer-stage.zoomed img {
  cursor:grab
}
.viewer-stage.panning,.viewer-stage.panning img {
  cursor:grabbing
}
.viewer-stage:focus-visible {
  outline-offset:-3px
}
.viewer-stage p {
  padding:40px;
  text-align:center;
  color:var(--muted);
  font-size:13px
}
.viewer-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  border-top:1px solid var(--line);
  font-size:11px;
  flex-shrink:0
}
.viewer-footer button {
  background:transparent;
  border:1px solid var(--line);
  border-radius:5px;
  padding:8px 12px;
  font-size:11px
}
.viewer-footer button:hover:enabled {
  color:var(--gold);
  border-color:var(--gold)
}
.viewer-footer button span {
  margin-inline:4px
}
.viewer-footer>span {
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

@media(min-width:1500px) {
  .chart-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

}

@media(max-width:1050px) {
  .wrap {
  padding-inline:30px
}
.hero {
  gap:35px;
  grid-template-columns:1fr 240px
}
.edition-controls {
  gap:12px
}
.gallery-toolbar {
  align-items:flex-end
}
.edition-controls {
  flex-direction:column;
  align-items:flex-start
}
.chart-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.site-footer {
  flex-wrap:wrap
}
.site-footer p {
  order:3;
  max-width:none;
  text-align:left;
  width:100%
}

}

@media(max-width:620px) {
  .wrap {
  padding-inline:20px
}
.site-header {
  height:auto;
  min-height:105px;
  padding-block:16px;
  flex-direction:column;
  gap:10px;
}
.site-header .site-link {
  position:static;
  font-size:9px;
}
.brand {
  font-size:16px;
  gap:10px
}
.brand-logo {
  width:36px;
  height:36px;
}
.brand small {
  font-size:8px;
  letter-spacing:2px;
  margin-top:6px
}
.site-link {
  font-size:10px
}
.site-link span {
  margin-left:2px;
  font-size:15px
}
.hero {
  grid-template-columns:1fr;
  gap:26px;
  padding:28px 0 24px
}
.eyebrow {
  font-size:8px;
  letter-spacing:1.7px;
  margin-bottom:16px
}
h1 {
  font-size:clamp(28px,8vw,36px);
  letter-spacing:-.01em
}
.hero-copy {
  font-size:12px;
  line-height:1.8;
  margin-top:16px
}
.edition {
  padding:17px 0;
  border-left:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:20px;
  row-gap:4px
}
.edition-label {
  grid-column:1;
  font-size:8px
}
.edition-date {
  font-size:28px;
  margin-top:2px;
  grid-column:1;
  grid-row:2
}
.edition-weekday {
  grid-column:1;
  font-size:10px;
  margin:0
}
.edition-stats {
  grid-column:2;
  grid-row:2;
  gap:18px;
  margin:0;
  justify-content:flex-end;
  font-size:10px;
  align-items:center
}
.edition-stats strong {
  font-size:15px
}
.edition-action {
  grid-column:2;
  grid-row:3;
  justify-self:end;
  margin:0;
  font-size:9px;
  gap:10px;
  align-items:center
}
.edition-action span {
  font-size:14px
}
.gallery-section {
  border-top:0;
  padding:0 0 35px
}
.gallery-toolbar {
  flex-direction:column;
  align-items:stretch;
  gap:18px
}
.edition-controls {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
h2 {
  font-size:16px
}
.date-controls {
  gap:6px
}
select {
  font-size:10px;
  padding:7px 22px 7px 8px;
  max-width:150px
}
.cadence {
  font-size:8px;
  padding:2px 5px
}
.search-wrap {
  width:100%
}
.search-wrap input {
  font-size:12px;
  padding-block:12px
}
.section-filters {
  padding-top:18px
}
.section-filters button {
  font-size:10px;
  padding:7px 11px
}
.results-row {
  margin-top:5px;
  font-size:9px
}
.view-hint {
  display:none
}
.chart-grid {
  grid-template-columns:minmax(0,1fr);
  gap:22px
}
.chart-label {
  font-size:13px;
  padding-top:10px
}
.chart-section {
  font-size:10px
}
.chart-picture::after {
  opacity:1;
  transform:none
}
.card-download {
  width:32px;
  height:32px
}
.site-footer {
  padding-block:20px 26px;
  gap:12px
}
.footer-note {
  font-size:8px
}
.site-footer p {
  font-size:9px;
  line-height:1.7
}
dialog {
  max-width:calc(100vw - 12px);
  width:100%;
  max-height:calc(100dvh - 20px);
  border-radius:9px
}
.viewer-shell {
  height:calc(100dvh - 24px);
  max-height:calc(100dvh - 24px)
}
.viewer-header {
  padding:13px 12px;
  gap:10px;
  align-items:flex-start
}
.viewer-heading h2 {
  font-size:13px
}
.viewer-heading p {
  font-size:9px
}
.viewer-actions {
  gap:5px
}
.icon-button {
  width:31px;
  height:31px;
  padding:7px
}
.icon-button svg {
  width:15px;
  height:15px
}
.close-button {
  margin-left:1px
}
.viewer-zoom-controls {
  padding:8px 12px;
  gap:6px
}
.zoom-preset {
  height:31px;
  padding:0 10px
}
.zoom-hint {
  width:100%;
  margin:2px 0 0;
  font-size:9px
}
.viewer-footer {
  padding:11px 12px
}
.viewer-footer button {
  font-size:10px;
  padding:8px
}
.viewer-footer>span {
  font-size:10px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* {
  transition:none!important
}

}