@font-face {
  font-family: Masthead;
  src: url("./masthead.ttf") format("truetype");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #111111;
  --gold: #d4af37;
  --cream: #f5f1e6;
  --white: #ffffff;
  --line: #ffffff24;
  --muted: #c4c1b7;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--white); }
a { color: inherit; text-decoration: none; }
button, input, summary { font: inherit; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -100px; z-index: 5; padding: 10px; background: var(--ink); }
.skip:focus { top: 12px; }
.paper { max-width: 1600px; margin: auto; padding: 0 clamp(16px, 3.8vw, 62px); }
header { position: relative; z-index: 2; }
.masthead { min-height: 98px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.dateline, .tools, .tools form { display: flex; align-items: center; gap: 14px; }
.dateline { font-size: 12px; }
.nameplate, .footer-brand { font-family: Masthead, Georgia, serif; font-weight: 400; }
.nameplate { display: block; width: clamp(240px, 30vw, 425px); max-width: 100%; }
.nameplate img { display: block; width: 100%; height: auto; }
.menu { position: relative; }
.menu summary { display: grid; place-content: center; gap: 3px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: #242424; }
.menu summary::-webkit-details-marker { display: none; }
.menu i { width: 14px; height: 1px; background: var(--cream); }
.menu-panel { position: absolute; top: 42px; left: 0; width: 185px; padding: 8px; background: #252525; border: 1px solid var(--line); border-radius: 10px; z-index: 3; }
.menu-panel a { display: block; padding: 10px; }
.menu-panel a:hover, footer a:hover { color: var(--gold); }
.tools { justify-content: end; gap: 8px; }
.tools form { background: #222; border: 1px solid var(--line); border-radius: 9px; gap: 0; }
.tools button { padding: 10px; background: transparent; color: var(--white); border: 0; }
.lens { width: 12px; height: 12px; border: 1.5px solid; border-radius: 50%; position: relative; display: block; }
.lens::after { content: ""; width: 6px; height: 1px; background: currentColor; position: absolute; right: -4px; bottom: -2px; transform: rotate(45deg); }
.tools input { background: transparent; color: var(--white); border: 0; width: clamp(68px, 8vw, 130px); padding: 9px 6px; font-size: 13px; }
.latest-button { padding: 11px 14px; border-radius: 9px; background: var(--gold); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.sections { display: flex; gap: 6px; align-items: center; padding: 7px 12px; background: #242424; border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; scrollbar-width: thin; }
.sections a, .eyebrow, .meta, .next-label { font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .075em; text-transform: uppercase; }
.sections a { white-space: nowrap; padding: 7px clamp(10px, 1.8vw, 26px); color: var(--cream); border-radius: 7px; }
.sections a[aria-current], .sections a:hover { background: #3a3934; color: var(--white); }
main { margin-top: 14px; }
.front { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(265px, 1fr); gap: 14px; }
.lead { position: relative; min-width: 0; isolation: isolate; overflow: hidden; border-radius: 15px; background: #232321; }
.lead-photo, .shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.lead-photo { object-fit: cover; object-position: center; filter: grayscale(1); }
.shade { background: linear-gradient(90deg, #080808db, #08080882 44%, transparent 82%), linear-gradient(0deg, #0a0a0ae8, transparent 53%); }
.lead-inner { display: flex; flex-direction: column; align-items: flex-start; min-height: clamp(570px, 46vw, 730px); height: 100%; padding: clamp(24px, 3vw, 54px); }
.eyebrow { color: var(--gold); margin: 0; }
.lead h1, .article h1, .list-title { font: 400 clamp(43px, 5.15vw, 86px)/.99 Georgia, 'Times New Roman', serif; letter-spacing: -.06em; margin: 14px 0 18px; color: var(--cream); overflow-wrap: anywhere; }
.lead h1 { max-width: min(10ch, 100%); }
.lead h1 a { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.lead h1 em { color: var(--gold); font-weight: 400; }
.byline { font-size: 12px; font-weight: 600; margin: 5px 0; }
.meta { color: var(--muted); font-size: 10px; }
.picks { display: flex; gap: 4px; margin: 16px 0 20px; }
.picks button { color: var(--white); border: 1px solid transparent; background: transparent; border-radius: 6px; min-width: 35px; min-height: 35px; }
.picks button[aria-pressed="true"] { border-color: #ffffff5a; background: #ffffff22; }
.next-box { margin-top: auto; }
.next-label { margin: 0 0 6px; color: var(--cream); font-size: 10px; }
.rail { display: flex; flex-direction: column; gap: 12px; }
.tile { display: flex; min-width: 0; align-items: center; gap: 16px; background: #242424; border: 1px solid var(--line); padding: 14px; border-radius: 12px; }
.tile img { width: 34%; max-width: 125px; aspect-ratio: 1.62; border-radius: 7px; object-fit: cover; }
.tile .story-name { font: 400 clamp(18px, 1.6vw, 25px)/1.15 Georgia, serif; letter-spacing: -.035em; color: var(--cream); margin: 0 0 7px; overflow-wrap: anywhere; }
.tile:hover .story-name, .lead h1 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tile.feature { display: block; flex: 1; padding: 16px; }
.tile.feature img { width: 100%; max-width: none; aspect-ratio: 1.8; }
.tile.feature .story-name { font-size: clamp(23px, 2.1vw, 34px); margin: 12px 0 8px; }
.deck { font: 15px/1.5 Arial, sans-serif; color: #ddd9cf; margin: 0 0 12px; }
.next-box .tile { max-width: 320px; background: #1d1d1de6; }
.next-box .tile img { width: 70px; }
.next-box .story-name { font-size: 18px; }
footer { padding: 24px 0; margin-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; color: var(--cream); }
.archive { padding: 30px 0; }
.list-title { font-size: clamp(36px, 4vw, 64px); margin-top: 0; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr)); gap: 12px; }
.article { max-width: 800px; margin: 48px auto; }
.article h1 { font-size: clamp(42px, 5vw, 72px); }
.article .cover { display: block; width: 100%; max-height: 540px; object-fit: cover; border-radius: 12px; margin: 24px 0; }
.prose { font: 20px/1.65 Georgia, serif; color: var(--cream); overflow-wrap: anywhere; }
.prose img { max-width: 100%; height: auto; }
.prose a, .message a { text-decoration: underline; color: var(--gold); }
.message { padding: 32px 0; }
@media (max-width: 1000px) {
  .dateline time { display: none; }
  .masthead { grid-template-columns: auto 1fr auto; min-height: 82px; }
  .nameplate { justify-self: center; }
  .front { grid-template-columns: minmax(0, 1.7fr) minmax(235px, 1fr); }
}
@media (max-width: 700px) {
  .paper { padding: 0 14px; }
  .masthead { grid-template-columns: 36px 1fr; gap: 8px; padding: 15px 0 10px; }
  .nameplate { width: min(65vw, 310px); margin-right: 36px; }
  .tools { grid-column: 1 / -1; }
  .tools form { flex: 1; }
  .tools input { width: 100%; }
  .sections { border-radius: 9px; gap: 2px; padding: 4px; }
  .sections a { font-size: 10px; }
  .front { grid-template-columns: 1fr; }
  .lead-inner { min-height: 520px; padding: 22px; }
  .lead h1 { font-size: clamp(42px, 10vw, 60px); }
  .rail .feature { display: block; }
  .article { margin: 28px 0; }
}
.lead:only-child { grid-column: 1 / -1; }

.section-page { padding: clamp(14px, 2vw, 32px) 0 12px; }
.section-heading {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--gold); padding-bottom: 12px;
}
.section-heading h1 {
  margin: 0; color: var(--cream); font: 400 clamp(38px, 4.6vw, 72px)/1 Georgia, serif;
  letter-spacing: -.055em; overflow-wrap: anywhere;
}
.section-heading > span, .feature-date, .index-meta {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.section-heading > span { color: var(--muted); white-space: nowrap; }
.section-feature {
  display: grid; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: #20201f; color: var(--cream);
}
.section-feature.with-image { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.section-image {
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
  aspect-ratio: 1.48; align-self: stretch;
}
.feature-copy {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(24px, 3.6vw, 60px); min-width: 0;
}
.feature-date { color: var(--gold); }
.feature-copy h2 {
  margin: 18px 0; max-width: 22ch;
  font: 400 clamp(34px, 4.3vw, 70px)/1.02 Georgia, serif;
  letter-spacing: -.055em; overflow-wrap: anywhere;
}
.feature-deck { font-size: clamp(15px, 1.2vw, 19px); line-height: 1.6; max-width: 52ch; margin: 0; overflow-wrap: anywhere; }
.feature-foot {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px;
  margin-top: 30px; border-top: 1px solid currentColor; padding-top: 14px; width: 100%;
  font-size: 12px; line-height: 1.4;
}
.read-link { font-weight: 700; }
.section-feature:hover .read-link, .index-card:hover h2, .section-empty a { text-decoration: underline; text-underline-offset: 3px; }
.desk-news .section-feature, .desk-lifestyle .section-feature { background: var(--cream); color: var(--ink); }
.desk-news .feature-date, .desk-lifestyle .feature-date { color: #655018; }
.desk-showbiz .with-image, .desk-lifestyle .with-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.desk-showbiz .section-image, .desk-lifestyle .section-image { order: 1; }
.desk-showbiz .feature-copy h2 { font-style: italic; }
.desk-sport .with-image { position: relative; grid-template-columns: 1fr; }
.desk-sport .with-image .section-image { position: absolute; inset: 0; z-index: -2; object-position: center 36%; }
.desk-sport .with-image::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #090909f5, #090909cd 37%, #09090917 85%);
}
.desk-sport .with-image .feature-copy { width: min(52%, 760px); min-height: clamp(370px, 34vw, 540px); }
.story-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.section-feature, .story-index article { overflow-wrap: anywhere; }
.section-page > article + .story-index { margin-top: 26px; }
.index-card { display: grid; align-content: start; height: 100%; border-top: 1px solid var(--line); }
.index-card img { width: 100%; aspect-ratio: 2.5; display: block; object-fit: cover; border-radius: 8px; }
.index-card-copy { padding: 16px 0 8px; }
.index-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--gold); }
.index-meta time { color: var(--muted); }
.index-card h2 { margin: 10px 0; color: var(--cream); font: 400 clamp(26px, 2.6vw, 42px)/1.1 Georgia, serif; letter-spacing: -.04em; }
.index-card p, .section-empty { margin: 0; color: var(--muted); line-height: 1.55; }
.section-empty { padding: 30px 0; }
.section-empty a { color: var(--gold); }
@media (max-width: 700px) {
  .section-feature.with-image { grid-template-columns: minmax(0, 1fr); }
  .section-feature .section-image { order: 0; aspect-ratio: 1.8; }
  .feature-copy { padding: 24px 20px; }
  .feature-copy h2 { margin: 12px 0; }
  .feature-foot { margin-top: 20px; }
  .desk-sport .with-image .feature-copy { width: 100%; min-height: 440px; justify-content: flex-end; }
  .desk-sport .with-image::before { background: linear-gradient(0deg, #090909f5, #090909c9 46%, #09090917); }
  .story-index { grid-template-columns: 1fr; gap: 20px; }
  .index-card img { aspect-ratio: 2; }
}