/* THE PRESS LOOK — an alternative skin, on trial (2026-09-28).
 *
 * Everything here is scoped under :root[data-look="press"], so the default
 * "archive" look is untouched unless a reader switches. To drop the trial,
 * delete this file, look.js and the one <link>/<script> pair in each template.
 *
 * The grammar is the 1970s-80s weekly music press, not any one paper, and it
 * copies no masthead: cool grey newsprint rather than cream, black ink, hard
 * black rules, a condensed heavy face for headings, a reversed-out black
 * masthead block, and one spot red. Listings read the way the gig guides set
 * them: TOWN in bold caps, the act in bold.
 */

:root[data-look="press"] {
  --ground:      #ECEAE4;
  --ground-soft: #E2DFD7;
  --ground-alt:  #D8D4CA;
  --ink:         #111111;
  --ink-soft:    #2B2B2B;
  --ink-muted:   #5C5953;
  --rule:        #111111;
  --rule-soft:   #BAB6AC;
  --accent:      #D3201A;
  --accent-soft: #F2D2CF;
  --press-block: #111111;
  --press-on-block: #F4F2EC;
}
:root[data-look="press"]:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --ground:      #141414;
    --ground-soft: #1C1C1C;
    --ground-alt:  #242424;
    --ink:         #EFEDE7;
    --ink-soft:    #CFCCC4;
    --ink-muted:   #8F8B83;
    --rule:        #EFEDE7;
    --rule-soft:   #3A3A3A;
    --accent:      #FF4A40;
    --accent-soft: #4A1C19;
    --press-block: #EFEDE7;
    --press-on-block: #141414;
  }
}
:root[data-look="press"][data-theme="dark"] {
  --ground:      #141414;
  --ground-soft: #1C1C1C;
  --ground-alt:  #242424;
  --ink:         #EFEDE7;
  --ink-soft:    #CFCCC4;
  --ink-muted:   #8F8B83;
  --rule:        #EFEDE7;
  --rule-soft:   #3A3A3A;
  --accent:      #FF4A40;
  --accent-soft: #4A1C19;
  --press-block: #EFEDE7;
  --press-on-block: #141414;
}

/* ---- type: condensed everywhere, a heavy display face for headings ---- */
:root[data-look="press"] body,
:root[data-look="press"] body * {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important;
  font-feature-settings: "tnum" 1;
}
:root[data-look="press"] .prose p,
:root[data-look="press"] .prose li,
:root[data-look="press"] .prose dd,
:root[data-look="press"] .subhead,
:root[data-look="press"] .notes-inner {
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif !important;
  font-style: normal;
}
:root[data-look="press"] pre, :root[data-look="press"] pre *,
:root[data-look="press"] code {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}
:root[data-look="press"] .masthead h1,
:root[data-look="press"] .prose h2,
:root[data-look="press"] .stat-value {
  font-family: "Anton", "Impact", "Arial Narrow Bold", sans-serif !important;
  font-weight: 400;
  letter-spacing: .01em;
}

/* ---- masthead: a reversed-out black block ---- */
:root[data-look="press"] header.masthead {
  background: var(--press-block);
  color: var(--press-on-block);
  padding: 18px 22px 20px;
  border-bottom: 6px solid var(--accent);
}
:root[data-look="press"] .masthead h1 {
  color: var(--press-on-block);
  text-transform: uppercase;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: .95;
}
:root[data-look="press"] .masthead .eyebrow {
  color: var(--press-on-block);
  background: var(--accent);
  display: inline-block;
  padding: 2px 8px;
  letter-spacing: .14em;
  font-weight: 700;
}
:root[data-look="press"] .masthead .subhead { color: var(--press-on-block); opacity: .85; }
:root[data-look="press"] .rule-thin { display: none; }

/* ---- nav, stats, year strip: hard black rules, no softness ---- */
:root[data-look="press"] .rail a {
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
}
:root[data-look="press"] .rail a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
:root[data-look="press"] .stats { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
:root[data-look="press"] .stat-label { font-weight: 700; color: var(--ink); letter-spacing: .1em; }
:root[data-look="press"] .stat-value { font-size: 30px; }
:root[data-look="press"] .year-btn { border-color: var(--ink) !important; border-radius: 0 !important; }
:root[data-look="press"] .year-btn[aria-pressed="true"] {
  background: var(--press-block) !important; color: var(--press-on-block) !important;
}
:root[data-look="press"] .year-btn[aria-pressed="true"] * { color: var(--press-on-block) !important; }
:root[data-look="press"] .search { border: 2px solid var(--ink); border-radius: 0; font-size: 17px; }
:root[data-look="press"] .conf-toggle, :root[data-look="press"] .chip { border-radius: 0; }

/* ---- the listings table: set like a gig guide ---- */
:root[data-look="press"] thead th {
  background: var(--press-block);
  color: var(--press-on-block);
  border-bottom: 0;
  font-weight: 700;
  font-size: 13px;
}
:root[data-look="press"] thead th.sorted { color: var(--accent); }
:root[data-look="press"] tbody td { border-bottom: 1px solid var(--rule-soft); font-size: 16px; }
:root[data-look="press"] td.town { font-weight: 800; letter-spacing: .03em; font-size: 15px; color: var(--ink); }
:root[data-look="press"] td.bands .primary { font-weight: 800; }
:root[data-look="press"] td.date { font-weight: 600; font-size: 15px; }
:root[data-look="press"] .pill, :root[data-look="press"] .stmark { border-radius: 0; }

/* ---- reading pages ---- */
:root[data-look="press"] .prose h2 {
  font-size: 28px; text-transform: uppercase; color: var(--ink);
  border-top: 3px solid var(--ink); padding-top: 8px;
}
:root[data-look="press"] .prose p, :root[data-look="press"] .prose li { font-size: 16.5px; line-height: 1.55; }
:root[data-look="press"] footer, :root[data-look="press"] .colophon { border-top: 3px solid var(--ink); }

/* ---- the switch itself (shown in both looks) ---- */
.look-switch {
  margin-left: auto; font: inherit; font-size: 12px; background: none; cursor: pointer;
  border: 1px solid var(--rule); color: var(--ink-soft); padding: 3px 10px; border-radius: 999px;
}
.look-switch:hover, .look-switch:focus-visible { border-color: var(--ink); color: var(--ink); }
:root[data-look="press"] .look-switch { border-radius: 0; border: 2px solid var(--ink); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; }

/* fixes after the first look in Chrome */
:root[data-look="press"] .masthead .eyebrow { width: fit-content; }
:root[data-look="press"] .search-tips code {
  background: var(--ground-alt); color: var(--ink); border: 1px solid var(--rule-soft); border-radius: 0;
}