/* The Morning Capital in Print: /print-edition and /print-edition/{date}.
 * Ink, newsprint and a desk lamp. Fonts are the site's own, from /fonts. */
@font-face { font-family: 'PE Caslon'; src: url('../fonts/LibreCaslonText-VF.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PE Caslon'; src: url('../fonts/LibreCaslonText-Italic-VF.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'PE Old Standard'; src: url('../fonts/OldStandard-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PE Old Standard'; src: url('../fonts/OldStandard-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PE Old Standard'; src: url('../fonts/OldStandard-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PE Playfair'; src: url('../fonts/PlayfairDisplay-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'PE Playfair'; src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PE Black'; src: url('../fonts/Canterbury.ttf') format('truetype'); font-display: swap; }

.pe-body { overflow-y: auto !important; }
.pe-main {
    --pe-ink: #16130f;
    --pe-ink-2: #2a251e;
    --pe-paper: #f6f1e4;
    --pe-paper-2: #ece4cf;
    --pe-rule: #2a251e;
    --pe-red: #a3201c;
    --pe-gold: #c9a24a;
    --pe-muted: #6a6152;
    background: var(--pe-paper);
    color: var(--pe-ink);
    font-family: 'PE Caslon', Georgia, 'Times New Roman', serif;
    /* The italic's standard ligatures include a long-s "st" and "sp" ("new∫paper"). */
    font-variant-ligatures: no-common-ligatures;
}
.pe-main a { color: inherit; }

/* ---------------------------------------------------------------- hero ---- */
.pe-hero {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(201,162,74,.16), transparent 60%),
        linear-gradient(#1b1712, #120f0b);
    color: #f3ead6;
    padding: 168px 20px 54px;
    text-align: center;
    border-bottom: 3px double var(--pe-gold);
}
.pe-hero-in { max-width: 52rem; margin: 0 auto; }
.pe-hero-kicker {
    margin: 0 0 14px;
    font: 700 .74rem/1 'PE Old Standard', Georgia, serif;
    letter-spacing: .32em; text-transform: uppercase; color: var(--pe-gold);
}
.pe-hero-title { margin: 0; font-weight: 400; line-height: 1; }
.pe-black {
    display: block;
    font: 400 clamp(2.6rem, 7vw, 4.9rem)/1.02 'PE Black', 'Old English Text MT', serif;
    color: #fbf4e2;
    text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.pe-hero-in-print {
    display: inline-block; margin-top: 12px; padding: 4px 16px;
    font: italic 400 clamp(1.15rem, 2.4vw, 1.5rem)/1.2 'PE Old Standard', Georgia, serif;
    color: var(--pe-gold);
    border-top: 1px solid rgba(201,162,74,.6); border-bottom: 1px solid rgba(201,162,74,.6);
}
.pe-hero-motto {
    margin: 18px 0 0;
    font: 700 .78rem/1.4 'PE Old Standard', Georgia, serif;
    letter-spacing: .16em; text-transform: uppercase; color: #d9cdb2;
}
.pe-hero-dek {
    max-width: 38rem; margin: 18px auto 0;
    font: italic 400 1.08rem/1.6 'PE Caslon', Georgia, serif; color: #d8cfbb;
}

/* --------------------------------------------------------------- today ---- */
.pe-today {
    max-width: 72rem; margin: 0 auto; padding: 64px 24px 56px;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center;
}
.pe-desk {
    position: relative; display: block; aspect-ratio: 1100 / 1424;
    margin: 10px 26px 26px 6px;
    text-decoration: none;
}
.pe-sheet {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    background: #fbf8ef;
    border: 1px solid #d9d0b9;
    transition: transform .35s ease, box-shadow .35s ease;
}
.pe-sheet-under {
    transform: translate(22px, 18px) rotate(3deg);
    box-shadow: 0 10px 30px rgba(40,30,15,.18);
    filter: brightness(.96);
}
.pe-sheet-top {
    transform: rotate(-1.2deg);
    box-shadow: 0 1px 2px rgba(40,30,15,.2), 0 18px 40px rgba(40,30,15,.28), 0 40px 80px rgba(40,30,15,.14);
}
.pe-desk:hover .pe-sheet-top, .pe-desk:focus-visible .pe-sheet-top { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 3px rgba(40,30,15,.2), 0 26px 50px rgba(40,30,15,.3), 0 50px 90px rgba(40,30,15,.16); }
.pe-desk:hover .pe-sheet-under { transform: translate(30px, 22px) rotate(4.5deg); }
.pe-desk:focus-visible { outline: 3px solid var(--pe-red); outline-offset: 10px; }

.pe-label {
    display: inline-block; margin: 0 0 18px; padding: 5px 10px 4px;
    background: var(--pe-red); color: #fff;
    font: 700 .72rem/1 'PE Old Standard', Georgia, serif; letter-spacing: .22em; text-transform: uppercase;
}
.pe-date {
    margin: 0;
    font: 700 1rem/1.2 'PE Old Standard', Georgia, serif; letter-spacing: .2em; text-transform: uppercase; color: var(--pe-muted);
}
.pe-date span {
    display: block; margin-top: 6px;
    font: 900 clamp(2rem, 4vw, 2.9rem)/1.05 'PE Playfair', Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--pe-ink);
}
.pe-folio {
    margin: 14px 0 0; padding: 7px 0;
    border-top: 1px solid var(--pe-rule); border-bottom: 3px double var(--pe-rule);
    font: 400 .82rem/1.3 'PE Old Standard', Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
}
.pe-headline {
    margin: 22px 0 0;
    font: 700 clamp(1.45rem, 2.6vw, 1.9rem)/1.18 'PE Playfair', Georgia, serif; color: var(--pe-ink);
}
.pe-summary {
    margin: 14px 0 0;
    font: 400 1.06rem/1.62 'PE Caslon', Georgia, serif; color: var(--pe-ink-2);
}
.pe-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.pe-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px;
    font: 700 .82rem/1 'PE Old Standard', Georgia, serif; letter-spacing: .16em; text-transform: uppercase;
    text-decoration: none; border: 2px solid var(--pe-ink);
    transition: background-color .15s ease, color .15s ease;
}
.pe-main .pe-btn-read { background: var(--pe-ink); color: #fbf4e2; }
.pe-main .pe-btn-read:hover { background: var(--pe-red); border-color: var(--pe-red); }
.pe-main .pe-btn-save { background: transparent; color: var(--pe-ink); }
.pe-main .pe-btn-save:hover { background: var(--pe-ink); color: #fbf4e2; }
.pe-btn:focus-visible { outline: 3px solid var(--pe-red); outline-offset: 3px; }
.pe-meta { margin: 16px 0 0; font: italic 400 .92rem/1.5 'PE Caslon', Georgia, serif; color: var(--pe-muted); }
.pe-meta a { color: var(--pe-red); text-underline-offset: 3px; }

.pe-empty { max-width: 40rem; margin: 0 auto; padding: 70px 24px; text-align: center; font-style: italic; font-size: 1.15rem; color: var(--pe-muted); }

/* ----------------------------------------------------------- the files ---- */
.pe-files {
    background: var(--pe-paper-2);
    border-top: 1px solid #d3c8ad;
    padding: 50px 24px 64px;
}
.pe-files > * { max-width: 72rem; margin-left: auto; margin-right: auto; }
.pe-files-head { text-align: center; margin-bottom: 30px; }
.pe-files-head h2 {
    display: inline-block; margin: 0; padding: 0 22px;
    font: 900 clamp(1.7rem, 3vw, 2.2rem)/1.1 'PE Playfair', Georgia, serif;
    position: relative;
}
.pe-files-head h2::before, .pe-files-head h2::after {
    content: ''; position: absolute; top: 50%; width: 60px; border-top: 3px double var(--pe-rule);
}
.pe-files-head h2::before { right: 100%; }
.pe-files-head h2::after { left: 100%; }
.pe-files-head p { margin: 8px 0 0; font-style: italic; color: var(--pe-muted); }
.pe-files-empty { text-align: center; font-style: italic; color: var(--pe-muted); }
.pe-month {
    margin: 30px auto 16px; padding-bottom: 6px; border-bottom: 1px solid var(--pe-rule);
    font: 700 .86rem/1 'PE Old Standard', Georgia, serif; letter-spacing: .22em; text-transform: uppercase;
}
.pe-grid {
    list-style: none; margin: 0 auto; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 22px;
}
.pe-card { display: block; text-decoration: none; }
.pe-card img {
    display: block; width: 100%; height: auto; aspect-ratio: 440 / 570; object-fit: cover; object-position: top;
    background: #fbf8ef; border: 1px solid #d0c5aa;
    box-shadow: 0 6px 16px rgba(40,30,15,.16);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pe-card:hover img, .pe-card:focus-visible img { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 14px 28px rgba(40,30,15,.24); }
.pe-card:focus-visible { outline: none; }
.pe-card:focus-visible img { outline: 3px solid var(--pe-red); outline-offset: 4px; }
.pe-card-date {
    display: block; margin-top: 12px;
    font: 700 .74rem/1.2 'PE Old Standard', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--pe-red);
}
.pe-card-title {
    display: block; margin-top: 4px;
    font: 700 .98rem/1.3 'PE Playfair', Georgia, serif; color: var(--pe-ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.pe-about {
    max-width: 44rem; margin: 0 auto; padding: 44px 24px 60px; text-align: center;
    font: 400 1rem/1.65 'PE Caslon', Georgia, serif; color: var(--pe-ink-2);
}
.pe-about p { margin: 0; }
.pe-about a { color: var(--pe-red); font-weight: 700; text-underline-offset: 3px; }

/* ------------------------------------------------------- one edition ---- */
.pe-issue { max-width: 60rem; margin: 0 auto; padding: 150px 24px 70px; }
.pe-crumb { margin: 0 0 22px; font: 700 .78rem/1.4 'PE Old Standard', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.pe-crumb a { color: var(--pe-red); text-decoration: none; }
.pe-crumb a:hover { text-decoration: underline; }
.pe-issue-head { text-align: center; margin-bottom: 40px; }
.pe-issue-head .pe-folio { display: inline-block; margin: 0 0 14px; padding: 7px 18px; }
.pe-issue-date { margin: 0; font: 900 clamp(2rem, 5vw, 3.2rem)/1.05 'PE Playfair', Georgia, serif; }
.pe-issue-headline { max-width: 40rem; margin: 14px auto 0; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--pe-ink-2); }
.pe-issue-head .pe-actions { justify-content: center; }
.pe-pages { display: grid; gap: 44px; }
.pe-page { margin: 0; }
.pe-page img {
    display: block; width: 100%; height: auto; background: #fbf8ef;
    border: 1px solid #d0c5aa;
    box-shadow: 0 2px 4px rgba(40,30,15,.12), 0 22px 50px rgba(40,30,15,.22);
}
.pe-page figcaption {
    margin-top: 12px; text-align: center;
    font: 700 .74rem/1 'PE Old Standard', Georgia, serif; letter-spacing: .22em; text-transform: uppercase; color: var(--pe-muted);
}
.pe-hint { margin: 30px 0 0; text-align: center; font-style: italic; color: var(--pe-muted); }
.pe-turn {
    display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 18px;
    border-top: 3px double var(--pe-rule);
    font: 700 .82rem/1.4 'PE Old Standard', Georgia, serif; letter-spacing: .12em; text-transform: uppercase;
}
.pe-turn a { color: var(--pe-red); text-decoration: none; }
.pe-turn a:hover { text-decoration: underline; }

/* The reader (PdfReader, document-reader.css) on newsprint: a little more
   room than a source document gets, since a broadsheet page is tall. */
.pe-reader .osc-doc-reader { box-shadow: 0 2px 4px rgba(40,30,15,.12), 0 22px 50px rgba(40,30,15,.22); }
.pe-reader .osc-doc-stage { height: min(86vh, 1180px); }
.pe-reader .osc-doc-reader.is-full .osc-doc-stage { height: calc(100vh - 96px); }
.pe-inbrief { max-width: 44rem; margin: 40px auto 0; text-align: center; }
.pe-inbrief h2 {
    margin: 0 0 10px;
    font: 700 .8rem/1 'PE Old Standard', Georgia, serif; letter-spacing: .22em; text-transform: uppercase; color: var(--pe-red);
}
.pe-inbrief p { margin: 0; font: 400 1.05rem/1.65 'PE Caslon', Georgia, serif; color: var(--pe-ink-2); }

/* -------------------------------------------------------------- narrow ---- */
@media (max-width: 860px) {
    .pe-today { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; }
    .pe-desk { max-width: 26rem; width: calc(100% - 32px); margin: 0 auto; }
    .pe-today-text { text-align: center; }
    .pe-today .pe-actions { justify-content: center; }
}
@media (max-width: 640px) {
    .pe-hero { padding: 118px 16px 40px; }
    .pe-hero-motto { letter-spacing: .08em; }
    .pe-today { padding: 34px 16px 44px; }
    .pe-files { padding: 40px 16px 50px; }
    .pe-files-head h2::before, .pe-files-head h2::after { width: 28px; }
    .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .pe-issue { padding: 112px 16px 50px; }
    .pe-reader { margin: 0 -16px; }
    .pe-reader .osc-doc-stage { height: 78vh; }
    .pe-pages { gap: 30px; }
    .pe-btn { flex: 1 1 auto; justify-content: center; }
    .pe-about { padding: 36px 16px 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .pe-sheet, .pe-card img, .pe-btn { transition: none; }
}
