/* ==========================================================================
   FOLIO  -  Broadsheet's quiet sibling for PR Urgent News
   --------------------------------------------------------------------------
   Same typography as Broadsheet - Playfair Display headlines over Source
   Sans 3 - but the page is one continuous white sheet. Nothing is separated
   by a fill or a shadow; everything is separated by a thin, smooth line and
   a generous radius. Loaded after style.css, so it is all override.

   Two things stay dark on purpose: the panels the markup builds with
   `bg-dark` / `bg-black text-white`, and the sidebar's sponsored widget.
   Bootstrap's `text-white` is !important, so lightening those would leave
   white type on white. They read as deliberate ink blocks instead.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
    /* Also restyles the inline pricing cards, which read these. */
    --news-red:   #8c1d2c;
    --news-black: #14213d;

    --ink:       #14213d;
    --ink-2:     #24325a;
    --ink-soft:  #55607d;
    --ink-dim:   #8b93a6;

    --accent:    #8c1d2c;
    --accent-2:  #a8283a;
    --accent-lt: #fbf2f3;

    --paper:     #ffffff;
    --tint:      #fafbfc;   /* barely there - a hint of a panel, not a fill */

    /* The whole design is these two values. */
    --line:      #e7e9ee;
    --line-2:    #d2d7e0;

    --r:         10px;
    --r-sm:      8px;

    --lift:      0 6px 20px rgba(20, 33, 61, .07);
    --lift-lg:   0 14px 34px rgba(20, 33, 61, .10);

    --ease:      .2s cubic-bezier(.4, 0, .2, 1);
}

body {
    font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--paper); }

a { text-decoration: none; }

h1, h2, h3, h4,
.hero-title, .post-title, .plan-name,
.section-title, .category-title, .widget-title, .news-card h4 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    letter-spacing: -.2px;
}

/* Every section is the same sheet; the rhythm comes from spacing alone. */
section,
.text-hero,
.hero-box,
.featured-news,
.category-section,
.category-section.alt-bg,
.sponsored-news,
.pricing-section,
.single-post {
    background: transparent;
    border: none;
    padding: 26px 0;
}

/* ---------------------------------------------------------------- header */
.site-header {
    background: var(--paper);
    padding: 20px 0 0;
    border-bottom: 1px solid var(--line);
}

.logo img { filter: none; }

/* A soft rounded hover instead of Broadsheet's hard underline. */
.navbar-nav .nav-link,
.nav-link {
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .3px;
    margin-left: 2px;
    padding: 9px 14px;
    border: none;
    border-radius: 999px;
    transition: background var(--ease), color var(--ease);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.nav-link:hover {
    color: var(--accent);
    background: var(--accent-lt);
}

.navbar-toggler { border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.navbar-toggler-icon { filter: invert(1) brightness(.35); }

.dropdown-menu {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 8px;
    box-shadow: var(--lift);
}

.dropdown-item {
    color: var(--ink);
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--r-sm);
}

.dropdown-item:hover { background: var(--accent-lt); color: var(--accent); }

.nav-auth .nav-link { text-transform: none; }

.nav-auth .btn.btn-danger {
    background: var(--ink);
    border: none;
    color: var(--paper);
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 18px;
    letter-spacing: .2px;
}

.nav-auth .btn.btn-danger:hover { background: var(--accent); color: #fff; }

/* -------------------------------------------------------------- headings
   One hairline under the label with its first inch in the accent. The
   accent sits on the border, not beside it: bottom:-1px clears the padding
   box and the height matches the border it covers. */
.section-title,
.category-title {
    position: relative;
    display: block;
    width: 100%;
    background: transparent;
    color: var(--ink);
    border-left: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0 0 12px;
    margin-bottom: 24px;
    font-weight: 800;
    font-size: 27px;
}

.section-title::before,
.category-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 1px;
    background: var(--accent);
}

/* ---------------------------------------------------------------- heroes */
.hero-kicker,
.hero-category {
    display: inline-block;
    color: var(--accent);
    background: var(--accent-lt);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.hero-title {
    color: var(--ink);
    font-weight: 900;
    line-height: 1.12;
}

.hero-title span,
.hero-title em { color: var(--accent); font-style: italic; }

.hero-subtitle,
.hero-description {
    color: var(--ink-soft);
    font-size: 17.5px;
    line-height: 1.75;
}

.hero-image img,
.text-hero img {
    border: 1px solid var(--line);
    border-radius: var(--r);
}

/* --------------------------------------------------------------- buttons */
.hero-btn,
.hero-cta,
.btn-danger,
.btn-primary {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--paper);
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 999px;
    padding-inline: 22px;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.hero-btn:hover,
.hero-cta:hover,
.btn-danger:hover,
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-outline-primary,
.btn-outline-secondary {
    border: 1px solid var(--line-2);
    color: var(--ink);
    border-radius: 999px;
    font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ----------------------------------------------------------------- cards
   The whole point of the skin: no fill, no resting shadow. A card is a thin
   line with a soft corner, and it only lifts under the pointer. */
.news-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0 0 20px;
    overflow: hidden;
    height: 100%;
    box-shadow: none;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.news-card:hover {
    border-color: var(--line-2);
    box-shadow: var(--lift);
    transform: translateY(-2px);
}

.news-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.news-card .date,
.news-card .cat-badge,
.news-card h4,
.news-card p { padding-inline: 20px; }

.news-card h4 {
    margin-top: 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.28;
}

.news-card p {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.6;
}

.widget a,
.news-card a { color: var(--ink) !important; }
.news-card a:hover { color: var(--accent) !important; }

.date {
    color: var(--ink-dim);
    font-size: 11.5px;
    letter-spacing: .9px;
    text-transform: uppercase;
    font-weight: 600;
}

.cat-badge a { color: var(--accent) !important; letter-spacing: .9px; }
.cat-badge a:hover { color: var(--ink) !important; }

/* ------------------------------------------------------------- sponsored
   The band was a black strip. Here it stays on the sheet and is marked by a
   hairline of accent along the top of each card instead. */
.sponsored-news { color: var(--ink); }

.news-card.sponsored,
.sponsored-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--r);
    padding: 0 0 20px;
    overflow: hidden;
    height: 100%;
    box-shadow: none;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.news-card.sponsored:hover,
.sponsored-card:hover {
    border-color: var(--line-2);
    border-top-color: var(--accent);
    box-shadow: var(--lift);
    transform: translateY(-2px);
}

.sponsored-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.sponsored-card .date,
.sponsored-card .cat-badge,
.sponsored-card h4,
.sponsored-card p { padding-inline: 20px; }

.sponsored-card h4 { margin-top: 10px; font-size: 20px; line-height: 1.3; }
.sponsored-card p  { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.sponsored-card .date { color: var(--ink-dim); }
.sponsored-card a { color: var(--ink) !important; }
.sponsored-card a:hover { color: var(--accent) !important; }

/* --------------------------------------------------------------- pricing */
.pricing-section .section-title { color: var(--ink); text-align: center; border-bottom: none; }
.pricing-section .section-title::before { display: none; }
.section-subtitle { color: var(--ink-soft); }

.pricing-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: none;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.pricing-box:hover { border-color: var(--line-2); box-shadow: var(--lift); transform: translateY(-3px); }

.pricing-box.popular {
    border-color: var(--accent);
    box-shadow: var(--lift-lg);
}

.badge-popular {
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
}

.pricing-box.popular .badge-popular { background: var(--accent); }

.plan-name { color: var(--ink); font-weight: 800; }
.plan-desc { color: var(--ink-soft); font-weight: 600; }
.price { color: var(--ink); font-weight: 800; }
.currency { color: var(--accent); }
.duration { color: var(--ink-dim); }

.features li {
    color: var(--ink-soft);
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

/* Inline pricing cards. These carry `text-white`, so they stay ink. */
.pr-card  { border-radius: var(--r); border: none; }
.pr-black { background: var(--ink) !important; }
.pr-red   { background: var(--accent) !important; }
.pr-btn, .pr-btn-white { border-radius: 999px; letter-spacing: .6px; }
.pr-btn-white { color: var(--accent); }

/* ----------------------------------------------------------- single post */
.post-category {
    display: inline-block;
    color: var(--accent);
    background: var(--accent-lt);
    border-radius: 999px;
    padding: 6px 14px;
    letter-spacing: 1.4px;
    font-size: 11.5px;
}

.post-title {
    color: var(--ink);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.8px;
}

/* No panel around the article - the sheet is the panel. The side padding has
   to stay, though: Bootstrap's .row pulls 12px back out of the .container and
   the column's own padding is what puts it back. Zeroing it outright left the
   article flush against the edge of the viewport, which on a phone meant the
   headline, the summary rules and the body text all touched the screen. */
.single-post article,
.single-post .col-12 {
    background: transparent;
    border: none;
    padding: 0 12px;
    box-shadow: none;
}

.single-post p {
    color: #2b3448;
    font-size: 17.5px;
    line-height: 1.8;
}

.post-meta {
    color: var(--ink-dim);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    letter-spacing: .2px;
}

.post-hero,
.single-post img.img-fluid {
    border: 1px solid var(--line);
    border-radius: var(--r);
}

blockquote {
    border-left: 2px solid var(--accent);
    background: transparent;
    border-radius: 0;
    padding: 6px 0 6px 22px;
    margin-block: 26px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 19px;
    color: var(--ink-2);
}

.share-btn {
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    border-radius: 999px;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.share-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --------------------------------------------------------------- sidebar */
.sidebar-widget {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: none;
}

/* These two carry `text-white` in the markup, so they have to stay dark. */
.sidebar-widget.bg-dark,
.sponsored-widget {
    background: var(--ink) !important;
    border-color: var(--ink);
    color: var(--paper);
}

.widget-title {
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.sponsored-widget .widget-title { border-bottom-color: rgba(255, 255, 255, .18); }
.sidebar-news img { border-radius: var(--r-sm); border: 1px solid var(--line); }
.sidebar-news a { color: var(--ink); font-weight: 600; }
.sidebar-news a:hover { color: var(--accent); }
.sponsored-widget .sidebar-news a { color: var(--paper); }
.sponsored-widget .sidebar-news img { border-color: rgba(255, 255, 255, .18); }
.sponsored-widget .date { color: #c4cbdd; }

/* ---------------------------------------------------------------- footer
   White too, so the sheet runs to the bottom of the page. All of the base
   footer colours are class-scoped, so they can be lifted cleanly. */
.footer-widgets {
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: none;
}

.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    margin-top: 0;
}

.footer-widget h4 {
    color: var(--ink);
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    letter-spacing: -.2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.footer-widget p,
.footer-widget ul li a { color: var(--ink-soft); }
.footer-widget ul li a:hover { color: var(--accent); }
footer a { color: var(--ink); }
footer a:hover { color: var(--accent); }

.social-icon {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.social-icon:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ------------------------------------------------- forms / account pages */

/* The markup's pure-black panels come onto the ink/paper palette; they keep
   their fill because `text-white` is riding on them. */
.bg-black { background: var(--ink) !important; }
.bg-white { background: var(--paper) !important; }
.bg-light { background: var(--tint) !important; }
body.bg-light { background: var(--paper) !important; }
.list-group-item { border-color: var(--line); }
.rounded, .rounded-3 { border-radius: var(--r) !important; }
.shadow, .shadow-sm { box-shadow: none !important; }

.form-container,
.register-card,
.card,
.table-container {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: none;
}

.form-control,
.form-select {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    transition: border-color var(--ease), box-shadow var(--ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(20, 33, 61, .07);
}

.pkg-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.pkg-card:hover { border-color: var(--line-2); }
.pkg-card.active { border-color: var(--accent); background: var(--accent-lt); }

.credit-chip {
    background: var(--accent-lt);
    color: var(--accent);
    border: 1px solid #f0dcdf;
    border-radius: 999px;
}

.step-rail div { border-radius: 999px; }
.step-rail div.on { background: var(--ink); }
.step-rail div.done { background: #1d6b46; }

.table-light th {
    background: var(--tint);
    color: var(--ink);
    border-color: var(--line);
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: 12.5px;
}

.table > :not(caption) > * > * { border-color: var(--line); }

.alert { border: 1px solid var(--line); border-radius: var(--r); }
.alert-success { border-left: 2px solid #1d6b46; }
.alert-danger  { border-left: 2px solid var(--accent); }
.alert-warning { border-left: 2px solid #b58900; }
.alert-info    { border-left: 2px solid var(--ink); }

/* ================================================================ mobile */
@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 10px 12px;
        margin-top: 12px;
    }

    .navbar-nav .nav-link { border-radius: var(--r-sm); }
}

@media (max-width: 768px) {
    .site-header { padding-top: 14px; }

    section,
    .text-hero,
    .hero-box,
    .featured-news,
    .category-section,
    .sponsored-news,
    .pricing-section,
    .single-post { padding: 16px 0; }

    .section-title,
    .category-title { font-size: 22px; }

    .news-card h4 { font-size: 18px; }

    .post-title { letter-spacing: -.3px; }

    /* A little more than the 12px the masthead uses. The release is a full
       width block of text with no card behind it, so it needs the breathing
       room more than a card does; 4px of misalignment with the logo above it
       is not something the eye picks up. */
    .single-post article,
    .single-post .col-12 { padding-inline: 16px; }
}

@media (max-width: 480px) {
    .news-card img,
    .sponsored-card img { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
    .news-card, .sponsored-card, .news-card.sponsored, .pricing-box { transition: none; }
    .news-card:hover, .sponsored-card:hover,
    .news-card.sponsored:hover, .pricing-box:hover { transform: none; }
}

/* ------------------------------------------------------ release body ---- */
.post-summary {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 21px;
    line-height: 1.5;
    font-style: italic;
    color: var(--ink-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
    margin: 26px 0;
}

.post-body p { font-size: 17.5px; line-height: 1.8; color: #2b3448; margin-bottom: 20px; }
.post-body a { color: var(--accent); border-bottom: 1px solid rgba(140, 29, 44, .28); }
.post-body img { border: 1px solid var(--line); border-radius: var(--r); margin: 8px 0; }
.post-body li { margin-bottom: 7px; line-height: 1.7; }
.post-body h2, .post-body h3, .post-body h4 {
    font-family: "Playfair Display", Georgia, serif; color: var(--ink); margin-top: 30px;
}
.post-body td, .post-body th { border-color: var(--line); }

/* The drop cap is the one piece of ink weight on the page. */
.post-body > p:first-of-type::first-letter {
    float: left;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 62px; line-height: .82; font-weight: 800;
    color: var(--accent); padding: 6px 10px 0 0;
}

@media (max-width: 768px) {
    .post-summary { font-size: 18px; padding: 16px 0; margin: 18px 0; }
    .post-body p  { font-size: 16.5px; margin-bottom: 17px; }
    .post-body > p:first-of-type::first-letter { font-size: 46px; }
}