@font-face {
  font-family: 'NewParisHeadline';
  src: url('./fonts/NewParisHeadline-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NewParisHeadline';
  src: url('./fonts/NewParisHeadline-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NewParisText';
  src: url('./fonts/NewParisText-Book-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NewParisText';
  src: url('./fonts/NewParisText-BookItalic-Web.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NewParisText';
  src: url('./fonts/NewParisText-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('./fonts/SuisseIntl-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('./fonts/SuisseIntl-SemiBold-Web.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('./fonts/SuisseIntl-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SangBleuKingdom';
  src: url('./fonts/SangBleuKingdom-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NewParisKingSize';
  src: url('./fonts/NewParisKingSize-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SangBleuRepublic';
  src: url('./fonts/SangBleuRepublic-Book-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SangBleuRepublic';
  src: url('./fonts/SangBleuRepublic-BookItalic-Web.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SangBleuRepublic';
  src: url('./fonts/SangBleuRepublic-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SimplonNorm';
  src: url('./fonts/SimplonNorm-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SimplonNorm';
  src: url('./fonts/SimplonNorm-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SimplonMono';
  src: url('./fonts/SimplonMono-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #e6d9bd;
  --paper-dark: #dbc9a3;
  --paper-deep: #cdb789;
  --ink: #2e2214;
  --ink-dim: #6b5a3e;
  --ink-faint: #8a7856;
  --rule: rgba(46,34,20,0.4);
  --rule-light: rgba(46,34,20,0.2);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: 'SangBleuRepublic', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  position: relative;
}

/* Aged paper texture: fine grain + soft foxing blotches, fixed so it reads as the page's paper.
   Two layers: five radial-gradient "age stains" in sepia at low opacity, plus an SVG
   feTurbulence noise filter tinted brown and tiled across the page. Both sit behind all content
   (position: fixed, z-index: 0) and are composited with mix-blend-mode: multiply so they darken
   the cream paper color like real wear, rather than sitting on top as a flat overlay. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse 500px 380px at 8% 12%, rgba(140,105,58,0.22), transparent 60%),
    radial-gradient(ellipse 420px 500px at 92% 30%, rgba(140,105,58,0.18), transparent 60%),
    radial-gradient(ellipse 600px 400px at 25% 85%, rgba(120,90,50,0.20), transparent 60%),
    radial-gradient(ellipse 460px 460px at 80% 95%, rgba(140,105,58,0.16), transparent 60%),
    radial-gradient(ellipse 380px 300px at 55% 45%, rgba(120,90,50,0.10), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.18  0 0 0 0 0.13  0 0 0 0 0.07  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

header, section, footer { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: 'SangBleuKingdom', Georgia, serif;
  font-weight: 700;
  margin: 0;
  line-height: 1.05;
}

p { margin: 0 0 16px; max-width: 58ch; color: var(--ink); }

a { color: inherit; }

.mono {
  font-family: 'SimplonNorm', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Masthead */
.pv-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px min(6%, 72px) 0;
}
.pv-dateline {
  display: flex;
  justify-content: space-between;
  font-family: 'SimplonNorm', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.pv-date { color: var(--ink-dim); }

.pv-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 0 16px;
  border-bottom: 3px double var(--ink);
}
.pv-masthead-left { width: 100%; text-align: center; }
.pv-wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.pv-nameplate {
  font-family: 'NewParisKingSize', Georgia, serif;
  font-weight: 700;
  font-size: clamp(32px, 6.2vw, 74.4px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pv-masthead-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  padding: 8px 18px;
}
.pv-masthead-box p {
  margin: 0;
  font-family: 'SimplonNorm', sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1.4vw, 19px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: var(--paper);
  max-width: none;
  white-space: nowrap;
}

/* Lead headline */
.pv-headline {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px min(6%, 72px) 0;
  text-align: center;
}
.pv-headline h2 {
  font-family: 'SangBleuKingdom', Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 40.8px);
  line-height: 1.3;
}

/* Lead feature story: portrait left, article text beside it */
.pv-feature-story {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 6% 4px;
  display: flex;
  align-items: stretch;
  gap: 32px;
}
.pv-feature-story img {
  flex: 0 0 40%;
  width: 40%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.55) contrast(1.08) brightness(0.96) saturate(0.85);
}
.pv-feature-story-text {
  flex: 1 1 60%;
}
.pv-inline-link {
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.pv-feature-story-text p {
  font-size: 15.5px;
  color: var(--ink-dim);
  max-width: none;
  text-align: justify;
  hyphens: auto;
}
@media (max-width: 760px) {
  .pv-feature-story { flex-direction: column; }
  .pv-feature-story img { width: 100%; height: auto; max-width: none; }
}

/* Top row: pinned to the top of each of the three columns below. A real grid, not the
   multi-column flow, since forced column-breaks aren't reliably honored in balanced
   multicol across browsers. */
.pv-top-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 6% 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
}
.pv-top-row > * { min-width: 0; }

/* Banner ad: a grid item of .pv-top-row, spanning full width so it forms its own row
   below the three columns on desktop; on mobile it reorders via the order rules above. */
.pv-banner-ad {
  grid-column: 1 / -1;
  padding: 5px 0 10px;
}
.pv-banner-ad img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* The newspaper column set: everything (features, shows, ads) flows through one column
   layout so heights stagger naturally, with no forced even spacing between items. */
.pv-columns {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 6% 10px;
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid var(--rule);
}
.pv-article {
  break-inside: avoid;
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-light);
}
.pv-article img {
  width: 100%;
  display: block;
  filter: sepia(0.55) contrast(1.08) brightness(0.96) saturate(0.85);
  margin-bottom: 10px;
}
.pv-article h3 {
  font-size: 21px;
  margin-bottom: 6px;
}
.pv-article .mono { display: block; margin-bottom: 6px; font-size: 11px; }
.pv-article p {
  font-size: 15px;
  color: var(--ink-dim);
  max-width: none;
}
.pv-article .pv-link {
  display: inline-block;
  font-family: 'SimplonNorm', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  margin-top: 2px;
}
.pv-article .pv-link:hover { color: var(--ink-dim); border-bottom-color: var(--ink-dim); }
.pv-link + a .pv-photo-crop { margin-top: 18px; }
.pv-link + img { margin-top: 18px; }

.pv-photo-crop {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  filter: sepia(0.55) contrast(1.08) brightness(0.96) saturate(0.85);
  margin-bottom: 10px;
  cursor: pointer;
}
.pv-photo-crop-stage {
  aspect-ratio: 515 / 335;
  background-image: url('images/from-screen-to-stage-page1.jpg');
  background-size: 246.8% 537.3%;
  background-position: 88.5% 40.5%;
}

/* Drop capital: every editorial article's opening paragraph, ads excluded (they read as
   placeholders, not prose). Applies automatically to new articles as they're added. */
.pv-article:not(.pv-ad) p:not(.pv-ad-caption):first-of-type::first-letter,
.pv-feature-story-text p:first-of-type::first-letter {
  font-family: 'NewParisHeadline', Georgia, serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.75;
  float: left;
  padding-right: 10px;
  padding-top: 8px;
  color: var(--ink);
}

/* Feature articles: the three flagship references get more weight (bigger head, tinted panel) */
.pv-feature {
  padding: 18px;
  background: rgba(46,34,20,0.05);
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pv-feature h3 {
  font-size: 30px;
  margin-bottom: 8px;
}
.pv-feature h3 img { height: 0.8em; width: auto; vertical-align: -0.08em; margin-right: 8px; }
.pv-feature p { font-size: 16px; }

/* Text-only "in brief" items, no photo, tighter measure */
.pv-brief h3 { font-size: 17px; }
.pv-brief p { font-size: 14.5px; }

/* Ads: styled distinctly, a video placeholder that opens a lightbox on click */
.pv-ad {
  border: 1px dashed var(--ink-dim);
  padding: 14px;
  background: rgba(46,34,20,0.03);
}
.pv-ad .mono { color: var(--ink-faint); margin-bottom: 20px; }
.pv-ad-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--paper-deep), var(--paper-dark));
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 10px;
}
.pv-ad-thumb span.pv-ad-label {
  font-family: 'NewParisHeadline', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-dim);
  text-align: center;
  padding: 0 12px;
}
.pv-ad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  min-width: 0;
}
.pv-ad-grid .pv-ad-thumb { margin-bottom: 0; min-width: 0; }
.pv-ad-thumb-photo {
  aspect-ratio: auto;
  background: none;
  border: none;
  display: block;
}
.pv-ad-thumb-photo img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.pv-ad-play {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv-ad-play::after {
  content: '';
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--paper);
  margin-left: 3px;
}
.pv-ad h3 { font-size: 18px; }
.pv-ad p { font-size: 13.5px; }

/* Embedded (living-newspaper) ads: the video plays inline, no click-to-open needed */
.pv-ad-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ink);
  overflow: hidden;
  margin-bottom: 10px;
}
.pv-ad-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pv-ad-caption.pv-ad-caption {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.4;
  color: var(--ink-dim);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-ad-caption + .pv-ad-thumb {
  margin-top: 16px;
}
.pv-ad-caption + h3 {
  margin-top: 14px;
}

/* Lightbox for the ad videos */
.pv-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,15,8,0.88);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.pv-lightbox-overlay.open { display: flex; }
.pv-lightbox-frame {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}
.pv-lightbox-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#pv-lightbox-body {
  position: absolute;
  inset: 0;
}
.pv-lightbox-frame--doc {
  max-width: 700px;
  width: min(700px, 92vw);
  aspect-ratio: auto;
  height: 90vh;
  background: var(--paper);
}
.pv-lightbox-frame--doc #pv-lightbox-body {
  overflow-y: auto;
  padding: 48px 40px;
}
.pv-reader-byline {
  font-family: 'SimplonNorm', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 6px;
}
.pv-reader-title {
  font-family: 'SangBleuKingdom', Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin: 0 0 24px;
}
.pv-reader p {
  font-size: 16px;
  max-width: none;
}
.pv-reader p strong {
  font-family: 'SimplonNorm', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
.pv-reader-figure {
  margin: 24px 0;
}
.pv-reader-figure .pv-photo-crop {
  margin-bottom: 8px;
}
.pv-reader-figure figcaption {
  font-family: 'SimplonNorm', sans-serif;
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
}
.pv-reader-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-faint);
}
.pv-reader-footer a {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-dim);
}
.pv-lightbox-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: 'SimplonNorm', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 20px;
}
.pv-lightbox-close {
  position: absolute;
  top: -38px;
  right: 0;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

/* Plain content pages (About / Contact) */
.pv-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 6% 100px;
}
.pv-page-inner { max-width: 620px; }
.pv-page h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 8px; }
.pv-page .pv-entry-rule { margin: 12px 0 22px; }
.pv-page p { color: var(--ink-dim); font-size: 16.5px; }
.pv-page .pv-link {
  display: inline-block;
  font-family: 'SimplonNorm', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  margin-top: 8px;
}
.pv-entry-rule {
  border: none;
  border-top: 1px solid var(--rule);
  width: 60px;
  margin: 12px 0 16px;
}

/* Footer */
.pv-footer {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 24px 6% 40px;
  border-top: 3px double var(--ink);
}
.pv-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pv-footer-copyright,
.pv-footer-place {
  flex: 1 1 0;
  font-family: 'SimplonNorm', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pv-footer-place { text-align: right; }
.pv-footer .pv-footer-name {
  font-family: 'NewParisHeadline', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
.pv-footer-disclaimer {
  margin: 8px 0 0;
  max-width: none;
  font-family: 'SimplonNorm', sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink-faint);
}
.pv-footer-disclaimer-heavy { font-weight: 500; }
@media (max-width: 620px) {
  .pv-footer-row { flex-direction: column; text-align: center; }
  .pv-footer-copyright, .pv-footer-place { text-align: center; flex: none; }
}

@media (max-width: 900px) {
  .pv-columns { column-count: 2; }
  .pv-top-row { grid-template-columns: repeat(2, 1fr); }
  .pv-masthead-box { max-width: none; }
  .pv-masthead-box p { white-space: normal; }
  .pv-nameplate {
    white-space: normal;
    text-align: center;
    letter-spacing: 0.03em;
  }
  .pv-nameplate-variety {
    display: inline-block;
    font-size: 1.73em;
  }
}

@media (max-width: 760px) {
  .pv-dateline { flex-direction: column; gap: 6px; }
  .pv-columns { column-count: 1; padding: 16px 6% 4px; }
  .pv-top-row { grid-template-columns: 1fr; padding: 16px 6% 0; }
  .pv-top-row > .pv-col-stack:nth-child(1) { order: 1; border-top: 1px solid var(--rule-light); padding-top: 16px; }
  .pv-top-row > .pv-col-stack:nth-child(2) { order: 2; }
  .pv-top-row .pv-banner-ad { order: 3; padding-bottom: 40px; }
  .pv-top-row > article.pv-ad { order: 4; }
  .pv-article p { text-align: justify; hyphens: auto; }
}