/* Fonts are hosted on katz.news (SIL Open Font License, see /assets/fonts/). No third-party font requests. */
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/orbitron-400.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/orbitron-900.woff2") format("woff2"); }
@font-face { font-family: "UnifrakturMaguntia"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/unifrakturmaguntia-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibmplexmono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibmplexmono-500.woff2") format("woff2"); }
/* KATZ house style. Colours and fonts: see the KATZ Brand Kit. */
:root {
  --ink: #111418; --paper: #F4F0E6; --prussian: #003153; --graphite: #3A3F45; --slate: #5B6067; --line: #D8D0BF;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ui: "Barlow", system-ui, sans-serif;
  --body: Georgia, "Times New Roman", serif; /* article body typeface still to be chosen (brand kit open item) */
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--ui); }
a { color: var(--prussian); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid #6CD6FF; outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; background: var(--paper); padding: 8px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* Masthead */
.masthead { padding-top: 24px; }
.rail { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 12px/1.4 var(--mono); letter-spacing: .12em; color: var(--graphite); text-transform: uppercase; }
.ticks { height: 8px; margin: 8px 0 18px; border-top: 1px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 16px); }
.mast-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 24px; align-items: center; }
.ear { border: 1px solid var(--ink); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.35; color: var(--graphite); }
.ear.right { text-align: right; }
.ear-label { font: 500 11px var(--mono); letter-spacing: .14em; color: var(--prussian); }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.lockup img { width: 100%; max-width: 720px; height: auto; }
.english { font: 400 13px "Orbitron", var(--ui); letter-spacing: .14em; color: var(--slate); }
.double-rule { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 6px; margin: 20px 0 10px; }
.rail.bottom { align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sections { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; }
.sections a { color: var(--prussian); text-decoration: none; padding: 6px 0; }
.sections a:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .mast-grid { grid-template-columns: 1fr; } .ear { display: none; } .coords { display: none; }
  .rail.bottom { flex-direction: column; }
}

/* Content */
main { padding: 32px 0 48px; }
h1, h2, h3 { font-family: var(--ui); font-weight: 600; line-height: 1.2; }
.label { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--prussian); margin: 0 0 6px; }
.label a { text-decoration: none; }
.standfirst { font-size: 1.2em; line-height: 1.5; color: var(--graphite); }
.meta { font: 400 13px var(--mono); color: var(--slate); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.card h3 { font-size: 1.3rem; margin: 0 0 6px; } .card h3 a { color: var(--ink); text-decoration: none; } .card h3 a:hover { text-decoration: underline; }
.card .standfirst { font-size: 1rem; }
.card.lead h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.card img { width: 100%; height: auto; border: 1px solid var(--line); }
.front-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.today { border-top: 3px solid var(--ink); padding-top: 10px; }
.today h2 a { color: var(--ink); text-decoration: none; }
.row { padding: 28px 0; border-bottom: 1px solid var(--line); }
.row > h2 a { color: var(--ink); text-decoration: none; }
@media (max-width: 820px) { .front-top { grid-template-columns: 1fr; } }
.briefs { list-style: none; padding: 0; margin: 0; }
.brief-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.brief-item h3 { font-size: 1.05rem; margin: 0 0 4px; } .brief-item h3 a { color: var(--ink); }
.summary { color: var(--graphite); font-size: .95rem; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
.subnav a, .subnav button { font: 500 13px var(--mono); border: 1px solid var(--ink); padding: 8px 12px; background: none; color: var(--ink); text-decoration: none; cursor: pointer; min-height: 40px; }
.subnav button[aria-pressed="true"] { background: var(--prussian); color: var(--paper); border-color: var(--prussian); }
.empty { color: var(--slate); }
.prose { max-width: 70ch; margin: 0 auto; }
.article h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 4px 0 12px; }
.article p, .article li { font-family: var(--body); font-size: 1.1rem; line-height: 1.7; }
.article .label, .article .meta, .article .standfirst { font-family: inherit; }
.article .standfirst { font-family: var(--ui); }
.sources { border-top: 1px solid var(--ink); margin-top: 32px; font-size: .95rem; }
.disclosure { font: 400 13px var(--mono); color: var(--slate); }
.embed { position: relative; aspect-ratio: 16 / 9; margin: 16px 0; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.button { display: inline-block; background: var(--prussian); color: var(--paper); text-decoration: none; padding: 12px 18px; font: 500 15px var(--mono); }
.button:hover { color: var(--paper); background: var(--ink); }
input[type=search] { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--ink); background: #fff; margin: 8px 0 20px; }
.edition-list { columns: 2 260px; }
.pager { margin-top: 24px; display: flex; gap: 16px; }

/* Footer */
.site-footer { border-top: 3px solid var(--ink); padding: 28px 0 48px; }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--prussian); color: var(--paper); padding: 24px 28px; }
.cta h2 { margin: 0 0 6px; } .cta p { margin: 0; color: #D7E2EA; max-width: 60ch; }
.cta .button { background: var(--paper); color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 20px 0 10px; font-size: 14px; }
.small { font-size: 13px; color: var(--slate); }

/* ---------- Responsive (mobile-first header inspired by broadsheet apps) ---------- */
img, iframe { max-width: 100%; }
.prose a { overflow-wrap: anywhere; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 12px 8px 0; text-align: left; vertical-align: top; }
.mobile-head { display: none; }

@media (max-width: 1100px) {
  .mast-grid { grid-template-columns: 160px minmax(0, 1fr) 160px; gap: 16px; }
  .ear { font-size: 12px; }
}
@media (max-width: 1000px) { .coords { display: none; } }

@media (max-width: 820px) {
  .masthead { display: none; }
  .mobile-head { display: block; }
  .mobile-bar {
    position: sticky; top: 0; z-index: 30; background: var(--paper);
    display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
    min-height: 56px; border-bottom: 1px solid var(--ink);
  }
  .menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; content: ""; }
  .burger::before { position: absolute; top: -7px; } .burger::after { position: absolute; top: 7px; }
  .menu[open] .burger { background: transparent; }
  .menu[open] .burger::before { top: 0; transform: rotate(45deg); } .menu[open] .burger::after { top: 0; transform: rotate(-45deg); }
  .menu-panel {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--paper);
    border-bottom: 3px solid var(--ink); box-shadow: 0 12px 24px rgba(17, 20, 24, .12);
    display: flex; flex-direction: column; padding: 8px 0 16px; max-height: calc(100vh - 56px); overflow-y: auto;
  }
  .menu-panel a { color: var(--ink); text-decoration: none; font: 600 17px var(--ui); padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .menu-rule { height: 12px; }
  .mobile-logo { justify-self: center; line-height: 0; }
  .mobile-logo img { height: 26px; width: auto; }
  .mobile-sub { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--prussian); color: var(--paper); text-decoration: none; padding: 10px 12px; }
  .mobile-date { margin: 0; padding: 10px 0 8px; text-align: center; font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
  .section-strip {
    display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--ink); padding: 0 2px; margin-bottom: 4px;
  }
  .section-strip::-webkit-scrollbar { display: none; }
  .section-strip a { font: 600 14px var(--ui); color: var(--ink); text-decoration: none; padding: 12px 0; }

  main { padding: 16px 0 32px; }
  body { font-size: 16px; }
  .front-top { gap: 20px; padding-bottom: 20px; }
  .card.lead h3 { font-size: 1.75rem; }
  .card.lead img { margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); width: calc(100% + 2 * clamp(16px, 4vw, 48px)); max-width: none; border: 0; }
  .grid { gap: 0; }
  .grid .card { border-top: 1px solid var(--line); padding: 16px 0; }
  .card h3 { font-size: 1.2rem; }
  .row { padding: 20px 0; }
  .article h1, .section-front h1 { font-size: 1.9rem; }
  .article p, .article li { font-size: 1.05rem; }
  .standfirst { font-size: 1.08em; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .subnav a, .subnav button { white-space: nowrap; }
  .cta { padding: 20px; } .cta h2 { font-size: 1.3rem; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .footer-links a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .edition-list { columns: 1; }
  .pager { flex-wrap: wrap; }
}

/* ---------- Section menu: always one line, labels shorten with the space available ---------- */
.menu-line { container-type: inline-size; border-bottom: 1px solid var(--ink); }
.menu-items { display: flex; justify-content: center; gap: 24px; white-space: nowrap; overflow: hidden; }
.menu-items a { font: 600 14px var(--ui); color: var(--ink); text-decoration: none; padding: 12px 0; }
.menu-items a:hover { color: var(--prussian); text-decoration: underline; }
.v-l, .v-m, .v-xs { display: none; }            /* fallback for browsers without container queries */
@container (min-width: 770px) { .v-l { display: inline; } .v-m, .v-s, .v-xs { display: none; } }
@container (min-width: 610px) and (max-width: 769.98px) { .v-m { display: inline; } .v-l, .v-s, .v-xs { display: none; } }
@container (min-width: 365px) and (max-width: 609.98px) { .v-s { display: inline; } .v-l, .v-m, .v-xs { display: none; } }
@container (max-width: 364.98px) { .v-xs { display: inline; } .v-l, .v-m, .v-s { display: none; } .menu-items { gap: 16px; } }
@container (max-width: 285px) { .menu-items { gap: 14px; } .menu-items a { font-size: 13px; } }
.rail.bottom { border-bottom: 0; }
@media (max-width: 820px) { .mobile-head .menu-line { border-top: 1px solid var(--line); margin-bottom: 4px; } }

/* ---------- Forms ---------- */
.katz-form { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.katz-form fieldset { border: 1px solid var(--line); padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.katz-form legend { font: 600 15px var(--ui); padding: 0 6px; }
.katz-form label { display: flex; flex-direction: column; gap: 6px; font: 600 15px var(--ui); }
.katz-form label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.katz-form input[type=text], .katz-form input[type=email], .katz-form input[type=url], .katz-form input[type=tel], .katz-form input[type=date], .katz-form select, .katz-form textarea {
  font: 400 16px var(--ui); padding: 10px 12px; border: 1px solid var(--ink); background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.katz-form input[type=checkbox], .katz-form input[type=radio] { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--prussian); }
.katz-form .req, .katz-form .opt { font: 400 12px var(--mono); color: var(--slate); }
.katz-form .req { color: var(--prussian); }
.katz-form button[disabled] { opacity: .6; }
.form-status { font: 500 14px var(--mono); color: var(--prussian); min-height: 1.4em; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-closed { border-left: 3px solid var(--prussian); padding: 8px 14px; background: #fff; }

/* ---------- Brand kit page ---------- */
.brand-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 24px; }
.button.alt { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.brand-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 16px 0 20px; }
.brand-logos figure { margin: 0; border: 1px solid var(--ink); }
.brand-logos img { display: block; width: 100%; height: auto; padding: 24px; box-sizing: border-box; }
.brand-logos .small img { max-width: 160px; margin: 0 auto; }
.brand-logos .on-paper img { background: #F4F0E6; } .brand-logos .on-prussian img { background: #003153; }
.brand-logos figcaption { font: 400 13px var(--mono); padding: 8px 12px; border-top: 1px solid var(--ink); }
.brand-swatches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.brand-swatches li { border: 1px solid var(--ink); padding: 0 0 10px; display: flex; flex-direction: column; font-size: 14px; }
.brand-swatches li > * { padding: 0 12px; }
.brand-swatches span { display: block; height: 72px; padding: 0; border-bottom: 1px solid var(--ink); margin-bottom: 8px; }
.brand-swatches code { font: 500 14px var(--mono); color: var(--prussian); }
.brand-swatches small { font-size: 14px; color: var(--graphite); }
.sig-box { background: #fff; border: 1px solid var(--line); padding: 20px; margin: 8px 0 24px; overflow-x: auto; }
.sig-box table { margin: 0; }
.prose .sig-box p, .prose .sig-box td { font-family: Arial, Helvetica, sans-serif; }