/* The Daily Front — shared magazine stylesheet */

:root {
  --paper: #f4efe4;
  --paper-dark: #eae3d2;
  --page-bg: #f8f6f3;
  --ink: #1d1a14;
  --ink-soft: #4a443a;
  --ink-faint: #857c6a;
  --rule: #b8ad94;
  --accent: #8f2d1e;
  --accent-2: #1f3a5f;
  --serif: "Source Serif 4", Georgia, serif;
  --display: "Playfair Display", "Times New Roman", serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --masthead: "Jacquard 12", var(--display);
  --pagebar-h: 56px;
  --page-gap: 1.75rem;
  /* space above the sheet; matched below it, before the nav bar */
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  /* a stray wide element must never cause page-level horizontal scroll */
}

.headline,
.body {
  overflow-wrap: break-word;
}

/* ---------- page frame ---------- */

/* Container padding creates the gap above the sheet and the matching gap below
   it (before the fixed nav bar). Padding on the scroll container is reliably
   scrollable, unlike a trailing margin on the last page. */
#magazine {
  padding: var(--page-gap) 0 calc(var(--pagebar-h) + var(--page-gap));
}

.page {
  display: none;
  max-width: 1060px;
  margin: 0 auto;
  min-height: calc(100vh - var(--pagebar-h) - 2 * var(--page-gap));
  background: var(--paper);
  padding: 3rem 3.5rem;
  box-shadow: 0 0 24px rgba(40, 30, 10, 0.25);
}

.page.active {
  display: block;
}

/* running header (folio) — identical on every page of every issue */
.folio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 3px double var(--ink);
  padding-bottom: 0.35rem;
  margin-bottom: 1.8rem;
}

.folio-title {
  font-family: var(--masthead);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
}

.folio-side {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: 1;
}

.folio-label {
  text-align: right;
}

/* running footer (contents/article pages) — identical on every issue.
   Pages with a footer become flex columns so it sits at the page bottom. */
.toc-page.active,
.content-page.active {
  display: flex;
  flex-direction: column;
}

.toc-page .toc-grid,
.content-page .page-items {
  margin-bottom: 3rem;
}

.page-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 3px double var(--ink);
  padding-top: 0.45rem;
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pf-ornament {
  display: inline-flex;
  align-self: center;
  color: var(--accent);
}

.pf-side {
  flex: 1;
}

.pf-page {
  text-align: right;
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-title {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}

.page-rule {
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 5px;
}

/* ---------- cover ---------- */

.cover-page {
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Cover with an image: the sheet takes the image's natural aspect ratio (image
   flows in the document, overlay is layered on top) so the whole image shows. */
picture {
  display: contents;
}

.cover-image {
  display: block;
  width: 100%;
  height: auto;
}

.cover-page:not(.no-image) {
  min-height: 0;
}

.cover-page:not(.no-image) .cover-overlay {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.cover-page.no-image {
  background:
    radial-gradient(ellipse at 30% 20%, #3a4d68 0%, transparent 60%),
    radial-gradient(ellipse at 75% 80%, #6e2a1d 0%, transparent 55%),
    #22293a;
}

/* cover toggle: the logo mark doubles as the "show artwork only" button,
   pinned to the top-right edge of the cover. */
.cover-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  border: none;
  background: none;
  padding: 0.3rem;
  color: var(--masthead-text-color, #f6edd8);
  opacity: 0.9;
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cover-toggle:hover {
  opacity: 1;
  transform: scale(1.06);
}

.cover-toggle-logo {
  display: block;
  width: 34px;
  height: 34px;
  background: currentColor;
  -webkit-mask: url("logo.svg") center / contain no-repeat;
  mask: url("logo.svg") center / contain no-repeat;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.6));
}

/* image-only view: fade the cover copy but keep the masthead title
   ("The" / "Daily Front") on top of the artwork. */
.cover-page.image-only .cover-overlay {
  pointer-events: none;
}

.cover-page.image-only .masthead-meta,
.cover-page.image-only .tagline,
.cover-page.image-only .cover-bottom {
  opacity: 0;
}

.masthead-meta,
.tagline,
.cover-bottom {
  transition: opacity 0.35s ease;
}

.cover-overlay {
  position: relative;
  z-index: 1;
  transition: opacity 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - var(--pagebar-h) - 2 * var(--page-gap));
  padding: 2.5rem 3rem 2rem;
}

.masthead {
  text-align: center;
  color: var(--paper);
  background: linear-gradient(rgba(15, 12, 8, 0.72), rgba(15, 12, 8, 0.55) 75%, transparent);
  margin: -2.5rem -3rem 0;
  padding: 2rem 2rem 3.5rem;
}

.masthead-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--masthead);
  font-weight: 400;
  /* The font-size drives the "Daily Front" line; "The" is a fraction of it. */
  font-size: clamp(3rem, 8vw, 6rem);
  margin: 0.4rem 0 0 0;
  line-height: 1;
  color: #f6edd8;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

/* Title splits onto two lines at every size: a smaller "The" over "Daily Front". */
.masthead-the {
  font-size: 0.7em;
  line-height: 1;
}

.masthead-name {
  font-size: 1.5em;
  line-height: 1;
  white-space: nowrap;
  margin-top: -12px;
}

@media (min-width: 641px) {
  .masthead-title {
    font-size: clamp(4rem, 8.5vw, 7rem);
  }
}

.masthead-line {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e8ddc2;
}

.masthead-line.tagline {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  margin-top: -10px;
}

.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.5em;
  width: fit-content;
  margin-inline: auto;
  margin-top: -7px;
}

/* The knockout badge is a mobile-only rendering of the issue/date. */
.masthead-knockout {
  display: none;
}

/* Desktop: tuck the issue / date / year into the top-left corner, one per line. */
@media (min-width: 641px) {
  .masthead-meta {
    position: absolute;
    top: 0.22rem;
    left: 0.29rem;
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.18rem;
    width: auto;
    margin-inline: 0;
    text-align: left;
    margin-top: 0;

  }

  .masthead-name {
    margin-top: -20px;
  }

  .masthead-meta .masthead-line {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

.masthead.masthead-image-aware {
  color: var(--masthead-text-color);
  background: none;
}

.masthead-image-aware .masthead-title,
.masthead-image-aware .masthead-line {
  color: var(--masthead-text-color);
  text-shadow: none;
}

.cover-bottom {
  background: rgba(15, 12, 8, 0.78);
  color: #efe6cf;
  margin: 0 -3rem -2rem;
  padding: 1.6rem 3rem 1.6rem;
}

.cover-headline {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.cover-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.4rem 1.6rem;
  border-top: 1px solid rgba(239, 230, 207, 0.35);
  padding-top: 0.9rem;
}

.cover-story {
  font-size: 0.92rem;
  line-height: 1.35;
}

.cover-story a {
  color: #efe6cf;
  text-decoration: none;
}

.cover-story a:hover {
  text-decoration: underline;
}

.cover-story-points {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: #cdb98a;
}

/* ---------- table of contents ---------- */

.issue-stats {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0 1.4rem;
  margin-bottom: 2rem;
}

.stat {
  text-align: center;
}

.stat-n {
  display: block;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 800;
}

.stat-l {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stats-note {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin: -1.4rem 0 2rem;
}

.toc-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2.5rem;
}

.toc-highlights h3,
.editors-note h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}

.highlight {
  margin-bottom: 1.1rem;
}

.highlight a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.highlight a:hover {
  color: var(--accent);
}

.highlight p {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.editors-note {
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  padding: 1rem 1.2rem;
  margin-top: 1.6rem;
  font-style: italic;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list li {
  border-bottom: 1px dotted var(--rule);
}

.toc-list a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}

.toc-list a:hover .toc-title {
  color: var(--accent);
}

.toc-dots {
  flex: 1;
}

.toc-page-no {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ---------- items ---------- */

.page-items {
  display: flow-root;
}

.item {
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}

.item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.type-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink-soft);
  padding: 0.15rem 0.55rem;
}

.type-tag.type-repository {
  background: var(--accent-2);
}

.type-tag.type-show-hn {
  background: var(--accent);
}

.type-tag.type-ask-hn {
  background: #5d4a1f;
}

.type-tag.type-job {
  background: #3d5d3f;
}

.type-tag.type-social-media {
  background: #6b3a5b;
}

.headline {
  font-family: var(--display);
  line-height: 1.12;
  margin: 0.5rem 0 0.3rem;
}

.headline a {
  color: var(--ink);
  text-decoration: none;
}

.headline a:hover {
  color: var(--accent);
}

.item.lead .headline {
  font-size: 2.6rem;
  font-weight: 900;
}

.item.feature .headline {
  font-size: 1.8rem;
  font-weight: 800;
}

.item .headline {
  font-size: 1.35rem;
  font-weight: 700;
}

.item.brief .headline {
  font-size: 1.1rem;
}

.item-meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

.item-meta .sep {
  margin: 0 0.5rem;
}

.item-meta a {
  color: var(--ink-faint);
}

.item-meta a:hover {
  color: var(--accent);
}

.item-meta .author {
  color: var(--ink-soft);
  font-weight: 500;
}

.body {
  font-size: 1rem;
}

.body h1,
.body h2,
.body h3 {
  font-family: var(--display);
  line-height: 1.2;
}

.body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  padding: 3px;
  background: #fff;
}

.body a {
  color: var(--accent-2);
}

.body pre {
  background: #211e17;
  color: #e8e2d0;
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
}

.body code {
  font-family: var(--mono);
  font-size: 0.85em;
}

.body :not(pre)>code {
  background: var(--paper-dark);
  padding: 0.05em 0.3em;
}

.body blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  font-style: italic;
}

.body table {
  border-collapse: collapse;
  font-size: 0.88rem;
  display: block;
  overflow-x: auto;
}

.body th,
.body td {
  border: 1px solid var(--rule);
  padding: 0.3rem 0.6rem;
}

.columns {
  column-gap: 2.2rem;
  column-rule: 1px solid var(--rule);
}

.cols-2 {
  column-count: 2;
}

.cols-3 {
  column-count: 3;
}

.columns>* {
  break-inside: avoid-column;
}

.columns>p {
  break-inside: auto;
}

.columns img {
  break-inside: avoid;
}

.dropcap p.dc::first-letter {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
}

.pull-quote {
  font-family: var(--display);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  margin: 0 auto 1.4rem;
  padding: 0.9rem 1.5rem;
  max-width: 34em;
}

.read-more {
  font-family: var(--mono);
  font-size: 0.8rem;
}

.read-more a {
  color: var(--accent);
  text-decoration: none;
}

.read-more a:hover {
  text-decoration: underline;
}

/* per-type flavors */
.item.repo-card {
  background: #eee7d6;
  border: 1px solid var(--rule);
  padding: 1.3rem 1.5rem;
}

.repo-stats {
  display: flex;
  gap: 1.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent-2);
  margin-bottom: 0.4rem;
}

.repo-desc {
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0;
}

.item.social-card .social-quote {
  font-size: 1.15rem;
  font-style: italic;
  border-left: 4px solid #6b3a5b;
  padding-left: 1.1rem;
}

.item.discussion {
  color: var(--ink-soft);
}

.item.discussion .headline {
  font-size: 1.25rem;
}

.item.job-listing {
  background: #e9ecdf;
  border: 1px solid var(--rule);
  padding: 1.1rem 1.4rem;
}

.item.job-listing .headline {
  font-size: 1.2rem;
}

.item.brief .body {
  color: var(--ink-soft);
  font-size: 0.93rem;
}

/* ---------- comments ---------- */

.comments-block {
  background: var(--paper-dark);
  border-top: 3px double var(--ink);
  padding: 1rem 1.3rem;
  margin-top: 1.4rem;
  column-span: all;
}

.comments-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
  color: var(--ink-faint);
}

.comment {
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.comment .reply {
  margin: 0.6rem 0 0 1.4rem;
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
}

.comment-head .author {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-2);
}

.comment-link {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  text-decoration: none;
  margin-left: 0.6rem;
}

.comment-link:hover {
  color: var(--accent);
}

.comment-body {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.comment-body pre {
  overflow-x: auto;
}

.comment-body p {
  margin: 0.25rem 0;
}

.comment-body a {
  color: var(--accent-2);
}

/* ---------- end page (colophon) ---------- */

.end-page {
  text-align: center;
}

.end-ornament {
  display: flex;
  justify-content: center;
  gap: 1rem;
  color: var(--accent);
  margin: 1.2rem 0;
}

.end-title {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0 0 0.4rem;
}

.end-sub {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 2.2rem;
}

.colophon {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.colophon-section {
  margin-bottom: 1.8rem;
}

.colophon-section h3 {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
  margin: 0 0 0.7rem;
}

.colophon-section p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.colophon-section a {
  color: var(--accent-2);
}

.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.colophon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ink) !important;
  border: 1px solid var(--ink-soft);
}

.colophon-link:hover {
  background: var(--ink);
  color: var(--paper) !important;
}

.colophon-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cover-prompt {
  margin: 0.8rem 0 0;
  padding: 0.9rem 1.2rem;
  background: var(--paper-dark);
  border-left: 3px solid var(--rule);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.cover-prompt p {
  margin: 0 0 0.6rem;
}

.cover-prompt p:last-child {
  margin-bottom: 0;
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.74rem;
}

.usage-table th,
.usage-table td {
  border-bottom: 1px dotted var(--rule);
  padding: 0.3rem 0.5rem;
  text-align: left;
}

.usage-table th {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-weight: 500;
}

.usage-table .r {
  text-align: right;
}

.sources {
  max-width: 620px;
  margin: 2.6rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
}

.sources-title {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0 0 0.35rem;
}

.sources-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

.sources-list {
  text-align: left;
  margin: 0;
  padding-left: 1.6rem;
}

.sources-list li {
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.sources-list li::marker {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.source-title {
  color: var(--accent-2);
}

.source-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.source-meta .sep {
  margin: 0 0.45rem;
}

.source-meta a {
  color: inherit;
}

.end-archive {
  font-family: var(--mono);
  font-size: 0.82rem;
  margin-top: 2rem;
}

.end-archive a {
  color: var(--accent);
  text-decoration: none;
}

.end-archive a:hover {
  text-decoration: underline;
}

/* ---------- bottom navigation ---------- */

.pagebar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--pagebar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--ink);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.35);
  z-index: 10;
  padding: 0 0.8rem;
}

.page-btns {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-btns::-webkit-scrollbar {
  display: none;
}

.page-btn,
.nav-btn {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: transparent;
  color: #b9ae95;
  border: 1px solid #4a443a;
  min-width: 34px;
  height: 34px;
  cursor: pointer;
  flex: none;
}

.nav-btn {
  font-size: 1.3rem;
  line-height: 1;
}

.page-btn:hover,
.nav-btn:hover {
  color: var(--paper);
  border-color: var(--paper);
}

.page-btn.active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.pagebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  color: #b9ae95;
  border: 1px solid #4a443a;
  flex: none;
}

.pagebar-logo:hover {
  color: var(--paper);
  border-color: var(--paper);
}

.pagebar-logo svg {
  display: block;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .cols-3 {
    column-count: 2;
  }
}

@media (max-width: 900px) {
  .toc-grid {
    grid-template-columns: 1fr;
  }

  .columns {
    column-count: 1;
  }

  .page:not(.cover-page) {
    padding: 2rem 1.8rem;
  }
}

@media (max-width: 640px) {
  .cover-page.active {
    height: calc(100vh - var(--pagebar-h));
    height: calc(100dvh - var(--pagebar-h));
    margin-top: calc(-1 * var(--page-gap));
    margin-bottom: calc(-1 * var(--page-gap));
  }

  .cover-page:not(.no-image) .cover-image {
    height: 100%;
    object-fit: cover;
  }

  .cover-page.no-image .cover-overlay {
    min-height: 100%;
  }

  .cover-overlay {
    padding: 1.4rem 1.25rem 1.25rem;
  }

  .masthead {
    margin: -1.4rem -1.25rem 0;
    padding: 1.4rem 1.25rem 2.5rem;
  }

  .masthead-title {
    font-size: clamp(2.4rem, 12.5vw, 4rem);
  }

  .masthead-line {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }

  .masthead-line.tagline {
    font-size: 0.82rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
  }

  /* Mobile: issue / date stays under the title, but as a knockout badge — the
     masthead colour fills the pill and the label is punched out so the cover
     image shows through the letters. Sits closer to the heading with more room
     above the tagline. */
  .masthead-meta .masthead-line {
    display: none;
  }

  .masthead-knockout {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0.15rem auto 0.7rem;
  }

  .cover-bottom {
    margin: 0 -1.25rem -1.25rem;
    padding: 1rem 1.25rem;
  }

  .cover-headline {
    margin-bottom: 0.65rem;
  }

  .cover-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
    padding-top: 0.65rem;
  }

  .cover-story {
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .cover-story-points {
    font-size: 0.6rem;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .page:not(.cover-page) {
    padding: 1.4rem 1.1rem;
  }

  /* stack the folio: masthead on top, issue/section line beneath */
  .folio {
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }

  .folio-date {
    display: none;
  }

  .folio-side {
    flex: none;
    max-width: 100%;
  }

  .folio-label {
    text-align: center;
    white-space: normal;
  }

  .folio-title {
    font-size: 1.9rem;
  }

  .item.lead .headline {
    font-size: 1.9rem;
  }

  .item.feature .headline {
    font-size: 1.5rem;
  }

  .issue-stats {
    gap: 1.2rem;
  }

  .cover-overlay {
    padding: 1.25rem 1rem 1rem;
  }

  .masthead {
    margin: -1.25rem -1rem 0;
  }

  .cover-bottom {
    margin: 0 -1rem -1rem;
    padding: 0.9rem 1rem;
  }
}

/* ---------- archive (issues/index.html) ---------- */

.archive-body {
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.archive-title {
  font-family: var(--masthead);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 5rem);
  text-align: center;
  margin: 0 0 0.3rem;
}

.archive-logo-inline {
  width: 0.72em;
  height: 0.72em;
  vertical-align: -0.08em;
  margin-right: 0.24em;
}

@media (max-width: 640px) {
  .archive-logo-inline {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.12em;
    vertical-align: baseline;
  }
}

.archive-sub {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem 1.4rem;
  align-items: start;
}

.archive-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(40, 30, 10, 0.15);
  display: block;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.archive-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(40, 30, 10, 0.3);
}

.archive-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.archive-card:hover img {
  transform: scale(1.04);
}

.archive-card .no-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #22293a, #6e2a1d);
}

.archive-card-info {
  padding: 0.8rem 1rem 1rem;
}

.archive-card-issue {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.archive-card-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* always reserve two lines so one- and two-line headlines give the info
     block the same height and card bottoms line up across the rack */
  min-height: calc(2 * 1.2 * 0.95rem);
}

/* Mobile: turn the rack into a single swipeable strip of covers, so issues no
   longer stack one-per-viewport. Cards bleed to the screen edges and the next
   cover peeks in to signal that the row scrolls. */
@media (max-width: 700px) {
  .archive-body {
    padding: 2rem 1.2rem;
  }

  .archive-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed the strip to the viewport edges while keeping the first card
       aligned with the body's content padding */
    margin: 0 -1.2rem;
    padding: 0 1.2rem;
  }

  .archive-grid::-webkit-scrollbar {
    display: none;
  }

  .archive-card {
    flex: 0 0 66%;
    scroll-snap-align: start;
  }
}

.archive-credits {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 3px double var(--ink);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

.archive-credits p {
  margin: 0.3rem 0;
}

.archive-credits a {
  color: var(--accent);
  text-decoration: none;
}

.archive-credits a:hover {
  text-decoration: underline;
}

.archive-logo {
  display: block;
  width: 32px;
  height: 32px;
  margin: 2rem auto 0;
}