/* One screen, with independently scrolling sections. Reading sizes stay
   independent of window height; the available height belongs to the columns. */
@import url("newspaper-fonts.css");
@import url("newspaper-masthead.css");

body[data-view="front-page"] {
  background-color: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
body[data-view="front-page"] .bottom-line {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  gap: 6px 20px;
  padding: 10px 24px 12px;
  border-top: 1px solid var(--rule);
  font: 500 var(--type-footer)/1.4 var(--meta);
  letter-spacing: 0.08em;
  background: transparent;
}
body[data-view="front-page"] .bottom-line a { font: inherit; letter-spacing: inherit; }
.view-paper {
  box-sizing: border-box;
  height: calc(100svh - var(--bottom-line, 38px));
  min-height: 0;
  overflow: hidden;
  padding: 16px 24px 12px;
}
.paper {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  color: var(--ink);
  font: 400 var(--body-size)/var(--body-leading) var(--text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
}
#paper-body { display: contents; }

.paper-head {
  --diamond-space: clamp(64px, 6.5625vw, 108px);
  --nameplate-space: calc(min(100vw - 48px, 1600px) - 2 * clamp(108px, 9vw, 140px) - var(--diamond-space) - 60px);
  --nameplate-size: calc(var(--nameplate-space) / 6.92 * .961);
  --masthead-height: max(120px, calc(var(--nameplate-size) + 12px));
  position: relative;
  display: block;
  flex: none;
  margin: 0;
}
h2.paper-masthead {
  --nameplate-size: calc(var(--nameplate-space) / 6.92 * .961);
  position: relative;
  display: grid;
  grid-template-columns: minmax(64px, 1fr) auto var(--diamond-space) minmax(64px, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  font-family: "DS Weiss-Gotisch", "Times New Roman", serif;
  font-weight: 400;
  font-size: var(--nameplate-size);
  height: var(--masthead-height);
  font-stretch: normal;
  letter-spacing: 0;
  line-height: 1.08;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 0 0.35px currentColor;
}
h2.paper-masthead::before, h2.paper-masthead::after {
  content: "";
  grid-row: 1;
  width: 64px;
  height: 64px;
  background: var(--pink);
}
h2.paper-masthead::before { grid-column: 1; justify-self: start; }
h2.paper-masthead::after { grid-column: 4; justify-self: end; }
/* Native font metrics: 0.961em ink height and 6.92em nameplate width. */
.paper-name {
  grid-area: 1 / 2;
  font-size: calc(var(--nameplate-space) / 6.92);
  font-synthesis: none;
  line-height: 1;
  position: relative;
  top: -.0555em;
}
.switch.crest {
  grid-area: 1 / 3;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--diamond-space);
  height: calc(var(--diamond-space) + 8px);
  min-width: 32px;
  min-height: 40px;
  margin-top: 0;
  color: var(--ink);
  transition: transform 0.3s;
}
.switch.crest .crystal { display: none; }
.switch.crest::before {
  content: "";
  width: calc(var(--diamond-space) - 2px);
  height: calc(var(--diamond-space) - 2px);
  background: currentColor;
  mask: url("images/newspaper-diamond.png") center / contain no-repeat;
}
.switch.crest:hover { transform: rotate(-10deg) scale(1.08); }
.view-paper.leaving .switch.crest { animation: spin 0.45s ease-in; }
.ear-glass { display: none; cursor: pointer; border: 0; text-align: left; }
.ear .ear-offer { display: block; margin-top: 5px; font-weight: 700; }
.ear-glass:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ear-glass { display: block; }
  .ear-edition { display: none; }
}
body.glass-held, body.glass-held * { cursor: none !important; }
.glass-frame { position: fixed; top: 0; left: 0; z-index: 25; pointer-events: none; }
.glass {
  position: absolute;
  left: -140px;
  top: -140px;
  width: 280px;
  height: 280px;
  overflow: hidden;
  border-radius: 50%;
  border: 9px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from 220deg, #eee4cd, #72634a 12%, #b9a780 19%, #f3ead5 27%, #8b7857 39%, #d9c9a4 49%, #76664b 62%, #c7b58e 73%, #eee4cd) border-box;
  box-shadow: 0 0 0 1px rgb(34 29 20 / 88%), 0 2px 3px rgb(255 255 255 / 42%),
    0 10px 18px rgb(0 0 0 / 24%), 0 24px 34px rgb(0 0 0 / 18%);
}
.glass::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid rgb(246 237 215 / 84%);
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgb(88 72 44 / 52%), inset 0 0 0 4px rgb(246 237 215 / 58%),
    inset 0 0 0 5px rgb(71 59 38 / 38%), inset 0 0 15px rgb(255 255 255 / 24%);
}
.glass::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 37% at 23% 16%, transparent 67%, rgb(255 255 255 / 50%) 69%, transparent 72%),
    linear-gradient(133deg, transparent 10%, rgb(255 255 255 / 33%) 12%, rgb(255 255 255 / 7%) 14%, transparent 20% 72%, rgb(156 177 175 / 10%) 88%),
    radial-gradient(ellipse 38% 28% at 23% 15%, rgb(255 255 255 / 18%), transparent 100%),
    url("textures/newsprint-front.webp") 0 0 / 1536px 1536px;
  mix-blend-mode: soft-light;
  opacity: .62;
}
.glass-view { position: absolute; z-index: 1; top: 0; left: 0; transform-origin: 0 0; }
.glass-view .paper { height: 100%; }
.glass-frame::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 91px;
  top: 101px;
  width: 30px;
  height: 21px;
  border: 1px solid rgb(66 51 29 / 85%);
  border-radius: 5px;
  background: linear-gradient(180deg, #f1e4c3, #8e7953 42%, #d1bd92 72%, #796747);
  box-shadow: inset 0 1px rgb(255 255 255 / 70%), 0 1px 2px rgb(0 0 0 / 35%);
  transform: rotate(45deg);
  pointer-events: none;
}
.glass-handle {
  position: absolute;
  z-index: 5;
  left: 97px;
  top: 98px;
  width: 132px;
  height: 16px;
  border: 1px solid rgb(27 23 18 / 80%);
  border-radius: 3px 8px 11px 3px;
  background: linear-gradient(180deg, rgb(255 255 255 / 32%), rgb(255 255 255 / 4%) 27%, transparent 55%, rgb(0 0 0 / 34%)),
    linear-gradient(3deg, transparent 0 28%, rgb(210 176 126 / 18%) 29%, transparent 31% 63%, rgb(0 0 0 / 18%) 64%, transparent 67%),
    linear-gradient(90deg, #806747, #493522 14%, #30241a 54%, #493521 87%, #8c7654);
  transform: rotate(45deg);
  transform-origin: 0 50%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 5px 8px rgb(0 0 0 / 20%);
}
.glass-handle::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 10px;
  left: 13px;
  height: 1px;
  border-radius: 1px;
  background: rgb(255 244 218 / 48%);
  box-shadow: 0 2px rgb(255 244 218 / 10%);
}
.glass-handle::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 3px;
  width: 11px;
  height: calc(100% + 2px);
  border-radius: 2px;
  background: linear-gradient(90deg, #f1e4c3 0 15%, #8a7652 17% 30%, #e5d4ad 35% 68%, #766344 71% 84%, #cbb88e 87%);
  box-shadow: 1px 0 rgb(35 30 22 / 62%), -1px 0 rgb(255 255 255 / 35%);
}
.paper-head:has(.ear) h2.paper-masthead::before, .paper-head:has(.ear) h2.paper-masthead::after { visibility: hidden; }
.ear-note { display: none; }

.paper-folio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding: 5px 0 4px;
  border-top: 4px double var(--ink);
  border-bottom: var(--hair);
  font-family: var(--sans);
  font-stretch: normal;
  line-height: 1.3;
}
.folio-date { font-family: var(--meta); font-size: var(--type-meta); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.folio-side { font-size: 11px; }
.folio-side:last-child { text-align: right; }
.folio-site { font-weight: 600; }
.strip {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 5px 0;
  overflow-x: auto;
  border-bottom: var(--line);
  line-height: 1.3;
  white-space: nowrap;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip-name { font-family: var(--sans); font-stretch: 85%; font-weight: 600; font-size: 11px; text-transform: uppercase; }
.strip-figure { margin-left: 5px; font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; }

.paper-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--paper-columns), minmax(0, 1fr));
  margin-top: var(--paper-block);
}
.col {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-tertiary) transparent;
  padding: 0 var(--paper-inset) var(--paper-block);
}
.col + .col { border-left: var(--column-rule); }
.col-news { grid-column: span 1; padding-left: 0; }
.col-lead { grid-column: span 2; padding-right: 0; }

.story { margin: 0; }
.headline {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-stretch: normal;
  line-height: 1.02;
  text-transform: none;
  text-wrap: balance;
}
.headline.stacked { font-size: var(--type-secondary); line-height: 1.02; }
.headline.banner { font-size: var(--type-lead); line-height: 1.02; text-align: center; }
.deck {
  margin: var(--paper-space) 0;
  font-family: var(--sans);
  font-stretch: normal;
  font-weight: 400;
  font-size: var(--type-deck);
  line-height: 1.18;
  text-wrap: pretty;
}
.second .deck { max-width: 58ch; margin-left: auto; margin-right: auto; text-align: center; }
.byline {
  margin: 0 0 var(--paper-space);
  font-family: var(--meta);
  font-size: var(--type-byline);
  font-weight: 500;
  line-height: 1.2;
}
.byline-name { letter-spacing: 0.03em; font-variant: small-caps; }
.second .byline { text-align: center; }
.story-body p {
  margin: 0;
  font-size: 1em;
  font-stretch: var(--body-width);
  text-align: justify;
  text-indent: 1em;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 5 2 2;
  orphans: 2;
  widows: 2;
}
.story-body p:first-child { text-indent: 0; }
.dateline { font-family: var(--meta); font-size: var(--type-meta); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; }
.story-body a { color: inherit; text-underline-offset: 2px; }
.second .story-body, .fourth .story-body { columns: 3; column-gap: var(--paper-gutter); column-rule: var(--column-rule); }
.third .story-body, .lead .story-body { columns: 2; column-gap: var(--paper-gutter); column-rule: var(--column-rule); }

.wn-title {
  margin: 0 0 var(--paper-space);
  padding: 0 0 var(--paper-space);
  border-bottom: var(--hair);
  font-family: var(--head);
  font-weight: 400;
  font-size: var(--type-section);
  line-height: 1;
  text-align: center;
}
.wn-section { margin: var(--paper-block) 0 var(--paper-space); font-family: var(--head); font-style: italic; font-weight: 600; font-size: var(--type-section); text-align: center; }
.wn-item { margin: 0 0 6px; font-family: var(--sans); font-stretch: normal; font-size: var(--type-summary); line-height: 1.2; }
.wn-item::before { content: "\25C6\00a0"; font-size: 0.65em; vertical-align: 0.15em; }
.wn-item .paper-reference { font: inherit; font-weight: 600; text-decoration: none; }
.wn-item .paper-reference:hover { text-decoration: underline; }
.paper-reference { font-weight: 600; font-family: var(--sans); font-size: var(--type-caption); text-underline-offset: 2px; }
.jump { margin-top: var(--paper-space) !important; text-indent: 0 !important; text-align: left !important; }
.contents { margin-top: 12px; padding-top: 6px; border-top: var(--hair); font-family: var(--sans); font-stretch: normal; font-size: var(--type-meta); line-height: 1.4; }
.contents h4 { margin: 0 0 4px; font-family: var(--meta); font-weight: 600; font-size: var(--type-meta); letter-spacing: 0.08em; text-transform: uppercase; }
.contents p { margin: 0 0 2px; }
.contents a { font-size: var(--type-summary); font-weight: 400; color: inherit; text-decoration: none; }
.contents a:hover { text-decoration: underline; }

.col-front { grid-column: span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--paper-gutter); align-content: start; }
.col-front > * { grid-column: 1 / -1; min-width: 0; }
.col-front .second { padding-bottom: var(--paper-block); margin-bottom: var(--paper-block); border-bottom: var(--line); }
.col-front .photo-package { grid-column: 1 / 3; grid-row: 2; position: relative; }
.col-front .photo-package + .ahed { grid-column: 3 / 4; grid-row: 2 / span 2; position: relative; }
.col-front .third, .col-front .fourth { position: relative; margin-top: var(--paper-block); padding-top: var(--paper-block); border-top: var(--line); }
.col-front .third { grid-column: 1 / 3; grid-row: 3; align-self: start; }
.col-front .fourth { grid-column: 1 / -1; }
.headline.minor { margin-bottom: 5px; font-weight: 600; font-size: var(--type-minor); line-height: 1; }
.agate td:first-child { white-space: nowrap; }
.col-front .photo-package + .ahed::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--paper-inset)); border-left: var(--column-rule); }

.photo-package { margin: 0; }
.photo-head { margin: 0 0 var(--paper-space); font-family: var(--head); font-style: italic; font-weight: 500; font-size: var(--type-feature); line-height: 1.04; text-transform: none; text-wrap: balance; }
.photo { position: relative; aspect-ratio: 3 / 2; background: var(--ink-tertiary); }
.photo:empty { display: none; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.photo-credit { margin: 3px 0 2px; font-family: var(--meta); font-stretch: normal; font-size: var(--type-meta); letter-spacing: 0.03em; text-align: right; text-transform: uppercase; }
.photo-package figcaption { font-family: var(--sans); font-stretch: normal; font-size: var(--type-caption); line-height: 1.2; }

.ahed { margin: 0; }
.headline.ahed-head { font-style: italic; font-weight: 500; font-size: var(--type-feature); line-height: 1.04; text-align: center; }
.ahed-deck { margin: var(--paper-space) auto; font-family: var(--sans); font-size: var(--type-feature-deck); font-weight: 400; font-stretch: normal; line-height: 1.18; text-align: center; text-wrap: pretty; }
.ahed .count { font-family: inherit; white-space: normal; font-variant-numeric: tabular-nums; }

.table-box { margin-top: var(--paper-block); }
.positions { width: 100%; border-collapse: collapse; font-family: var(--sans); font-stretch: 90%; font-size: var(--type-agate); line-height: 1.25; }
.positions caption { padding: 6px 0 4px; border-top: var(--line); font-family: var(--meta); font-weight: 600; font-size: var(--type-meta); letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.positions thead th { padding: 3px 3px; border-bottom: var(--hair); font-family: var(--meta); font-weight: 600; font-size: var(--type-meta); text-align: left; text-transform: uppercase; }
.positions tbody th { padding: 3px 3px 3px 0; font-weight: 500; text-align: left; white-space: nowrap; }
.positions td { padding: 3px 3px; border-bottom: 1px dotted var(--rule); white-space: nowrap; }
.positions tbody th { border-bottom: 1px dotted var(--rule); }
.positions td:nth-child(4) { white-space: normal; }
.positions .num { font-variant-numeric: tabular-nums; text-align: right; }
.positions .fix { text-align: center; }
.table-note { margin: 6px 0 0; font-family: var(--sans); font-stretch: normal; font-size: var(--type-caption); line-height: 1.4; color: var(--ink-secondary); }

@media (min-width: 960px) and (max-width: 1199px) {
  .col-front { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-lead { grid-column: span 1; }
  .second .story-body, .third .story-body, .fourth .story-body { columns: 2; }
  .lead .story-body { columns: 1; }
  .col-front .photo-package, .col-front .third { grid-column: 1 / -1; }
  .col-front .photo-package + .ahed { grid-column: 1 / -1; grid-row: 3; margin-top: var(--paper-block); padding-top: var(--paper-block); border-top: var(--line); }
  .col-front .photo-package + .ahed::before { display: none; }
  .ahed .story-body { columns: 2; column-gap: var(--paper-gutter); column-rule: var(--column-rule); }
  .col-front .third { grid-row: 4; }
  .strip { justify-content: flex-start; gap: 16px; }
}

@media (min-width: 960px) {
  .col-front:has(.photo:empty) .photo-package { grid-column: 1 / -1; }
  .col-front:has(.photo:empty) .photo-package + .ahed {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--paper-block);
    padding-top: var(--paper-block);
    border-top: var(--line);
  }
  .col-front:has(.photo:empty) .photo-package + .ahed::before { display: none; }
  .col-front:has(.photo:empty) .ahed .story-body { columns: 3; column-gap: var(--paper-gutter); column-rule: var(--column-rule); }
  .col-front:has(.photo:empty) .third { grid-column: 1 / -1; grid-row: 4; }
  .col-front:has(.photo:empty) .third .story-body { columns: 3; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .col-front:has(.photo:empty) .ahed .story-body,
  .col-front:has(.photo:empty) .third .story-body { columns: 2; }
}

/* Phone and tablet: sections are swiped horizontally, and scroll vertically. */
@media (max-width: 959px) {
  .view-paper { padding: 12px 0 8px; }
  h2.paper-masthead {
    --nameplate-space: calc(100vw - 108px);
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 8px 8px;
    padding: 0;
    height: max(calc(var(--nameplate-size) + 10px), 44px);
  }
  h2.paper-masthead::before, h2.paper-masthead::after {
    position: absolute;
    width: 8px;
    height: 32px;
  }
  h2.paper-masthead::before { left: 0; }
  h2.paper-masthead::after { right: 0; }
  .switch.crest { width: 44px; height: 44px; margin-top: 0; }
  .switch.crest::before { width: 40px; height: 40px; }
  .ear { display: none; }
  .ear-note {
    display: block;
    margin: 8px 16px 0;
    position: relative;
    padding: 4px 8px;
    color: #1e1c18;
    font: 500 10.5px/1.3 var(--sans);
    text-align: center;
    text-shadow: none;
  }
  .paper-folio { display: block; margin: 0 16px; padding: 7px 0 6px; text-align: center; }
  .folio-side { display: none; }
  .folio-date { letter-spacing: 0.025em; }
  .strip { justify-content: flex-start; gap: 18px; margin: 0 16px; padding: 8px 0; }
  .paper-grid {
    display: flex;
    margin-top: var(--paper-block);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  .paper-grid::-webkit-scrollbar { display: none; }
  .col { flex: 0 0 calc(100% - 44px); scroll-snap-align: start; overscroll-behavior-x: auto; padding: 0 16px 24px; }
  .paper-grid .col-front { order: -2; margin-left: 16px; padding-left: 0; border-left: 0; }
  .col-front { display: block; }
  .col-front .photo-package { margin: 0 0 var(--paper-block); }
  .col-front .photo-package + .ahed::before { display: none; }
  .col-lead { order: -1; border-left: var(--column-rule); }
  .col-news { margin-right: 16px; padding-right: 0; border-left: var(--column-rule); }
  .deck, .lead .deck { margin-top: 6px; }
  .col-front .third, .col-front .fourth { margin-top: var(--paper-block); }
  .second .story-body, .ahed .story-body, .third .story-body, .fourth .story-body, .lead .story-body { columns: 2; column-gap: 12px; column-rule: var(--column-rule); }
  .photo { aspect-ratio: 3 / 2; }
  body[data-view="front-page"] .bottom-line { gap: 8px 16px; padding: 10px 16px 12px; font-size: var(--type-footer); letter-spacing: 0.04em; }
}
@media (min-width: 700px) and (max-width: 959px) {
  .col { flex-basis: calc(50% - 30px); }
}