/* The Daily Seed: the stylesheet for paper/index.html. The site's bones are in css/main.css;
   this page links this file after it (the layout reads `css:` from the front matter).
   A broadsheet: a masthead, rules, columns, the serif, and the small print in the mono. */

.paper-page { font-family: Georgia, "Times New Roman", Times, serif; }
.paper-page p { font-size: 1.1em; line-height: 1.45em; margin: 0 0 0.8em; }
.paper-page .small, .paper-page p.small { font: 0.82em/1.5 var(--mono); color: var(--soft); }
.paper-page a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.paper-page a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.paper-page .masthead { text-align: center; border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); padding: 8px 0 10px; margin-bottom: 18px; }
.paper-page .ears { display: flex; justify-content: space-between; font: 0.72em var(--mono); color: var(--faint); margin: 0 0 4px; letter-spacing: 0.08em; }
.paper-page .masthead h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    font-size: clamp(2.2em, 8vw, 4.6em);
    letter-spacing: 0.06em;
    margin: 0;
    line-height: 1.1;
}
.paper-page .masthead h1 .unset { color: var(--faint); }
.paper-page .dateline { font: 0.78em var(--mono); color: var(--soft); margin: 6px 0 0; border-top: 1px solid var(--rule); padding-top: 6px; }

.paper-page h2 { font-family: Georgia, serif; font-weight: normal; font-size: 2em; line-height: 1.15; margin: 0 0 6px; }
.paper-page h3 {
    font: 0.78em var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft);
    border-bottom: 1px solid var(--ink);
    margin: 0 0 10px;
    padding-bottom: 3px;
}
.paper-page h3 .small { text-transform: none; letter-spacing: 0; float: right; }
.paper-page h4 { font-family: Georgia, serif; font-weight: bold; font-size: 1.15em; margin: 0 0 6px; }
.paper-page .byline { font: 0.78em var(--mono); color: var(--faint); margin: 0 0 10px; }
.paper-page #paper-lead-body > p:first-child::first-letter { font-size: 3.1em; float: left; line-height: 0.85; padding: 4px 8px 0 0; }

.paper-page .front { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; margin-bottom: 18px; }
.paper-page .briefs ul { list-style: none; padding: 0; margin: 0 0 18px; }
.paper-page .briefs li { font-size: 0.98em; line-height: 1.4em; margin: 0 0 8px; padding-left: 14px; text-indent: -14px; }
.paper-page .briefs li::before { content: "■ "; color: var(--accent); font-size: 0.6em; vertical-align: middle; }

.paper-page .columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; margin-bottom: 18px; }
.paper-page .columns article + article { border-left: 1px solid var(--rule); padding-left: 28px; margin-left: -14px; }
.paper-page .columns p { font-size: 1em; }

.paper-page .horoscope { border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.paper-page .signs { font: 0.85em var(--mono); margin: 0 0 10px; }
.paper-page .signs button {
    font: inherit;
    color: var(--soft);
    background: none;
    border: 1px solid var(--rule);
    padding: 3px 8px;
    margin: 0 4px 6px 0;
    cursor: pointer;
}
.paper-page .signs button[aria-pressed="true"], .paper-page .signs button:hover { color: var(--accent); border-color: var(--accent); }
.paper-page .horoscope .cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 24px; }
.paper-page .horoscope .cast p { font-size: 0.95em; margin: 0 0 6px; }
.paper-page .horoscope .cast p.yours { border-left: 3px solid var(--accent); padding-left: 10px; }
.paper-page .horoscope b { font-weight: bold; }

.paper-page .ad {
    border: 1px solid var(--ink);
    padding: 10px 12px;
    margin: 0 0 12px;
    text-align: center;
    font-family: Georgia, serif;
}
.paper-page .ad b { display: block; font-size: 1.15em; letter-spacing: 0.08em; }
.paper-page .ad .small { display: block; margin-top: 4px; }
.paper-page .cls { font-size: 0.95em; line-height: 1.4em; margin: 0 0 8px; }
.paper-page .cls b { font-family: var(--mono); font-weight: normal; font-size: 0.9em; letter-spacing: 0.06em; }
.paper-page .cipher { font: 1.05em/1.7 var(--mono); letter-spacing: 0.12em; word-break: break-all; border: 1px dashed var(--rule); padding: 8px 10px; margin: 0 0 8px; }
.paper-page .obit b { font-weight: bold; }
.paper-page blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--rule); font-style: italic; }
.paper-page blockquote p { font-size: 1em; }
.paper-page .colophon { padding-top: 6px; border-top: 3px double var(--ink); }

@media (max-width: 820px) {
    .paper-page .front, .paper-page .columns { grid-template-columns: 1fr; gap: 16px; }
    .paper-page .columns article + article { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--rule); padding-top: 12px; }
}