/* ==========================================================================
   TRIBUNE  -  premium light broadsheet, in red and black
   --------------------------------------------------------------------------
   Loaded after style.css, so everything here is an override. style.css is
   never touched, which is what keeps 'original' an exact restore.

   The brief this skin answers: broadsheet's print discipline, but in the
   brand's own red and black rather than ink-navy and wine, tuned for
   readability first and for selling second.

   How the two colours divide the work:

     BLACK   is the structure. Masthead rules, section rules, footers,
             body copy. Anything that has to stay legible for minutes.
     RED     is the decision. Kickers, the live link, the primary button,
             the popular plan. Nothing decorative is red, so red always
             means "this is the thing to look at".

   Readability targets, chosen rather than inherited:
     body        17.5px / 1.75, Inter, #23262d on #ffffff  (~14.5:1)
     release     18.5px / 1.8 measured to ~68 characters
     small print never below 13px, and never lighter than #5d626e

   Typography: Newsreader carries the headlines - a text-face cut for
   newspapers, so it holds up at 44px and still sets a 21px card title
   without shouting. Inter carries everything that is read on screen.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,600;1,6..72,700&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* The inline pricing cards on pricing.php and submit.php read these two,
       so setting them here restyles those cards for free. */
    --news-red:   #c00d1e;
    --news-black: #14161b;

    --tb-display: "Newsreader", "Times New Roman", Georgia, serif;
    --tb-text:    "Inter", "Segoe UI", Helvetica, Arial, sans-serif;

    /* Ink. Headline black is a touch blue-black so it reads as ink, not as
       a browser default; body ink is lifted just off it to cut glare. */
    --ink:      #14161b;
    --ink-2:    #23262d;
    --ink-soft: #4a4f5a;
    --ink-dim:  #6b7280;   /* meets 4.5:1 on white - safe for date lines */

    /* Red. One hue, four steps: tint, live, pressed, and a deep shade for
       text on light so red type never drops below contrast. */
    --red-tint: #fdf0f1;
    --red-line: #f0cdd1;
    --red:      #c00d1e;
    --red-dark: #96060f;
    --red-text: #a80b18;
    --red-lift: #ff5d69;   /* the red that still reads at 4.5:1 on the black masthead */

    --paper:   #ffffff;
    --paper-2: #f5f4f1;   /* warm off-white for alternating bands */
    --paper-3: #edebe6;

    --rule:      #e4e1db;
    --rule-mid:  #d3cfc7;
    --rule-dark: #b9b4a9;

    --ok:   #12694a;
    --warn: #9a6a00;

    --shadow-sm: 0 1px 2px rgba(20, 22, 27, .06);
    --shadow-md: 0 10px 28px rgba(20, 22, 27, .09);
    --shadow-lg: 0 22px 50px rgba(20, 22, 27, .16);
    --shadow-red: 0 12px 30px rgba(192, 13, 30, .22);
}

/* ------------------------------------------------------------------- base */
body {
    font-family: var(--tb-text);
    font-size: 17.5px;
    line-height: 1.75;
    background: var(--paper-2);
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--red); color: #fff; }

a { text-decoration: none; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.hero-title, .post-title, .plan-name, .pr-title,
.section-title, .category-title, .widget-title, .news-card h4 {
    font-family: var(--tb-display);
    color: var(--ink);
    letter-spacing: -.2px;
    font-weight: 700;
}

/* Prices and dates line up in columns when the figures are tabular. */
.price, .pr-price, .date, .post-meta, .table td, .table th {
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- header
   A masthead, not a nav bar: the whole band is now black - a gradient mixed
   from four steps of the ink scale so it reads as printed black rather than
   a flat #000 - closed off by a 25px red band across the full width. The
   red is no longer a hairline; it is the base the masthead stands on.

   The band used to run 30px/20px of padding around a full-size wordmark for
   air. That air is now spent: the masthead was cut 50px shorter, taking 32px
   off the padding and the remaining 18px off the wordmark height below. */
.site-header {
    background: linear-gradient(135deg, #000000 0%, #14161b 34%, #2a2e37 58%, #101216 82%, #000000 100%);
    padding: 10px 0 8px;
    border-bottom: 25px solid var(--red);
    box-shadow: 0 10px 22px rgba(20, 22, 27, .18);
    margin-bottom: 3px;
}

.site-header .navbar {
    min-height: 68px;
    padding-top: 0;
    padding-bottom: 0;
}

/* The wordmark is dark artwork, so on black it has to be knocked out. */
.logo img { filter: brightness(0) invert(1); }

/* The 600x200 wordmark ships at width="370", which renders 123px tall and is
   what actually sets the height of the row - the min-height above never binds.
   Capping the height (width auto, so it stays in proportion) is therefore the
   only lever on the masthead that the padding above cannot reach. 32px came
   off the padding and 18px off the wordmark: 50px shorter, red band intact. */
.site-header .logo img {
    max-height: 105px;
    width: auto;
}

.navbar-nav .nav-link,
.nav-link {
    color: var(--paper);
    font-family: var(--tb-text);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-left: 2px;
    padding: 11px 12px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color .15s ease, border-color .15s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.nav-link:hover {
    color: var(--red-lift);
    background: transparent;
    border-bottom-color: var(--red-lift);
}

.navbar-toggler { border: 1px solid rgba(255, 255, 255, .35); border-radius: 2px; }
.navbar-toggler-icon { filter: none; }

.dropdown-menu {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--red);
    border-radius: 2px;
    padding: 6px;
    box-shadow: var(--shadow-md);
}

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

.dropdown-item:hover,
.dropdown-item:focus { background: var(--red-tint); color: var(--red-text); }

.nav-auth .nav-link { text-transform: none; letter-spacing: 0; font-size: 15px; }

/* Register is the one button in the masthead, so it is the one red thing. */
.nav-auth .btn.btn-danger {
    background: var(--red);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 8px 18px;
    box-shadow: var(--shadow-sm);
}

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

/* --------------------------------------------------------------- headings
   One rule, under the label, with its first inch in red.

   This used to be a flex row with a hairline ::after set to flex:1, meant to
   run out to the end of the column. Under `align-items: baseline` an empty
   flex item baselines off its own bottom edge, so that hairline sat level
   with the text baseline - partway down the heading - while border-bottom
   drew a second line beneath the whole element. Two lines, one floating in
   the middle. The accent is now part of the bottom rule instead of a rule
   of its own. */
.section-title,
.category-title {
    position: relative;
    display: block;
    width: 100%;
    background: transparent;
    color: var(--ink);
    border-left: none;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    padding: 0 0 9px;
    margin-bottom: 24px;
    font-weight: 800;
    font-size: 27px;
    letter-spacing: -.3px;
}

/* Sits exactly on the border: bottom:-2px clears the padding box, and the
   height matches the border it covers. */
.section-title::before,
.category-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 2px;
    background: var(--red);
}

/* ----------------------------------------------------------------- heroes */
.hero-box,
.text-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.hero-kicker,
.hero-category {
    display: inline-block;
    color: var(--red-text);
    border-top: 3px solid var(--red);
    padding: 9px 0 0;
    font-family: var(--tb-text);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.hero-title {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

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

.hero-subtitle,
.hero-description {
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.75;
    max-width: 62ch;
}

.hero-image img,
.text-hero img {
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------- buttons
   The primary action is red and stays red. Black is for secondary actions,
   so a page never offers two things that look equally like the next step. */
.hero-btn,
.hero-cta,
.btn-danger {
    background: var(--red);
    border: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: .6px;
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hero-btn:hover,
.hero-cta:hover,
.btn-danger:hover {
    background: var(--red-dark);
    color: #fff;
    box-shadow: var(--shadow-red);
    transform: translateY(-1px);
}

.hero-btn:active,
.hero-cta:active,
.btn-danger:active { transform: none; box-shadow: var(--shadow-sm); }

.btn-primary,
.btn-dark {
    background: var(--ink);
    border: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 2px;
}

.btn-primary:hover,
.btn-dark:hover { background: var(--red); color: #fff; }

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
    border: 1.5px solid var(--ink);
    color: var(--ink);
    background: transparent;
    border-radius: 2px;
    font-weight: 600;
}

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

.btn-outline-danger {
    border: 1.5px solid var(--red);
    color: var(--red-text);
    border-radius: 2px;
    font-weight: 700;
}

.btn-outline-danger:hover { background: var(--red); color: #fff; }

.btn-lg { padding: 13px 30px; font-size: 16px; }

/* Bootstrap utility colours, pulled onto the palette. */
.text-danger { color: var(--red-text) !important; }
.bg-danger   { background-color: var(--red) !important; }
.border-danger { border-color: var(--red) !important; }
.text-muted  { color: var(--ink-dim) !important; }
.badge.bg-danger { border-radius: 2px; letter-spacing: .6px; font-weight: 700; }

.lead { font-size: 19px; line-height: 1.7; color: var(--ink-soft); }

/* ------------------------------------------------------------------ cards */
.featured-news,
.category-section,
.single-post { background: transparent; }

.category-section.alt-bg { background: var(--paper); }

.news-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0 0 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

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

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

.news-card .date,
.news-card h4,
.news-card p { padding-inline: 18px; }

.news-card h4 {
    margin-top: 12px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.2px;
}

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

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

.date {
    color: var(--ink-dim);
    font-family: var(--tb-text);
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    font-weight: 600;
}

/* The section a release sits in is a kicker: its own row above the headline,
   set in red like every other kicker on the site. It used to be a filled black
   chip, which fought the card's red top rule for attention and boxed in a
   label nobody needs to see as an object. Type only now - so the red drops to
   --red-text, which holds 4.5:1 on paper where the lifted pink would not. */
.cat-badge {
    display: block;        /* a row of its own, not a tail on the date line */
    width: fit-content;
    background: none;
    border-radius: 0;
    padding: 0;
    font-family: var(--tb-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Beats `.news-card a { color: ... !important }`, which would otherwise pull
   the label back to ink and lose the kicker. */
.cat-badge a,
.news-card .cat-badge a { color: var(--red-text) !important; }

.cat-badge:hover { background: none; }
.cat-badge a:hover,
.news-card .cat-badge a:hover { color: var(--ink) !important; }

/* On a dark card the paper red is too dark to read, so those get the lifted
   red instead. Scoped to the dark cards themselves, not to .sponsored-news:
   the sponsored band on the home page fills with white .news-cards, which
   want the paper red like every other card. */
.sponsored-card .cat-badge a,
.sponsored-widget .cat-badge a { color: var(--red-lift) !important; }
.sponsored-card .cat-badge a:hover,
.sponsored-widget .cat-badge a:hover { color: #fff !important; }

/* The card pads its own text with 18px; the label sits outside that padding,
   so it takes the same figure as margin instead. */
.news-card .cat-badge { margin: 8px 18px 0; }

/* -------------------------------------------------------------- sponsored
   The one full-black band on a light page. It reads as bought space, which
   is exactly what it is - and it makes the Sponsored plan easier to sell. */
.sponsored-news {
    background: var(--ink);
    color: #f2f2f4;
    padding: 46px 0;
    border-top: 3px solid var(--red);
    border-radius: 2px;
    margin: 28px 0;
}

.sponsored-news .section-title {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .45);
}

.sponsored-news .section-title::before { background: var(--red); }

.sponsored-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 2px;
    padding: 0 0 16px;
    overflow: hidden;
    height: 100%;
    transition: background .2s ease, border-color .2s ease;
}

.sponsored-card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }

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

.sponsored-card .date,
.sponsored-card h4,
.sponsored-card p { padding-inline: 16px; }

.sponsored-card h4 { margin-top: 10px; font-size: 19px; color: #fff; }
.sponsored-card .date { color: #b9bcc4; }
.sponsored-card a { color: #fff !important; }
.sponsored-card a:hover { color: #ff9aa4 !important; }

/* ---------------------------------------------------------------- pricing
   Sales surface. Three jobs: make the price legible, make the recommended
   plan obvious without hiding the others, and make the button unmissable. */
.pricing-section {
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 58px 0;
    margin: 28px 0;
}

/* The pricing header is centred and carries no rule at all, so the accent
   would have nothing to sit on. */
.pricing-section .section-title {
    color: var(--ink);
    text-align: center;
    border-bottom: none;
    font-size: 34px;
}

.pricing-section .section-title::before { display: none; }

.section-subtitle {
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 60ch;
    margin-inline: auto;
}

.pricing-box {
    background: var(--paper);
    border: 1px solid var(--rule-mid);
    border-top: 3px solid var(--ink);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    padding: 38px 28px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.pricing-box:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--rule-dark);
    transform: translateY(-4px);
}

/* The recommended plan: red frame, lifted, and the only card on white with
   a shadow heavy enough to read as raised. */
.pricing-box.popular {
    background: var(--paper);
    border: 1px solid var(--red-line);
    border-top: 4px solid var(--red);
    box-shadow: var(--shadow-lg);
    transform: translateY(-10px);
}

.pricing-box.popular:hover { transform: translateY(-14px); }

.badge-popular {
    background: var(--ink);
    color: #fff;
    border-radius: 2px;
    font-size: 11.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 6px 15px;
}

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

.plan-name { color: var(--ink); font-weight: 800; font-size: 27px; }
.plan-desc { color: var(--ink-soft); font-weight: 600; font-size: 14.5px; }

.price {
    color: var(--ink);
    font-family: var(--tb-text);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.currency { color: var(--red); font-weight: 700; }
.duration { color: var(--ink-dim); font-size: 13.5px; }

/* Feature lists sell by being scannable: a red tick, a hairline, no bullets. */
.features { text-align: left; }

.features li {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.55;
    padding: 9px 0 9px 26px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule);
    position: relative;
}

.features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 9px;
    color: var(--red);
    font-weight: 700;
}

.features li:last-child { border-bottom: none; }

.features li.disabled { color: var(--ink-dim); }
.features li.disabled::before { content: "\2013"; color: var(--rule-dark); }

/* Inline pricing cards (pricing.php, submit.php). Their own <style> block
   sets the layout; this only re-tones it so it belongs to the skin. */
.pricing-container { margin-block: 46px; }
.pr-card  { border-radius: 2px; border: 1px solid rgba(255, 255, 255, .12); }
.pr-black { background-color: var(--ink) !important; }
.pr-red   { background-color: var(--red) !important; }
.pr-title { font-family: var(--tb-display); font-weight: 800; letter-spacing: -.5px; color: #fff; }
.pr-label { color: rgba(255, 255, 255, .82); }
.pr-price { font-family: var(--tb-text); font-weight: 800; letter-spacing: -2px; }
.pr-list li { font-weight: 400; }
.pr-btn, .pr-btn-white { border-radius: 2px; letter-spacing: 1px; font-weight: 800; }
.pr-btn-white { color: var(--red-dark); }
.pr-btn-white:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------ single post
   The reading surface. Everything here is measured against the 68-character
   line and the 18.5px body - the rest of the site follows from it. */
.post-category {
    display: inline-block;
    color: var(--red-text);
    border-top: 3px solid var(--red);
    padding: 9px 0 0;
    font-weight: 700;
    letter-spacing: 1.8px;
    font-size: 12px;
    text-transform: uppercase;
}

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

.single-post article,
.single-post .col-12 {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 44px;
    box-shadow: var(--shadow-sm);
}

.single-post p {
    color: var(--ink-2);
    font-size: 18.5px;
    line-height: 1.8;
}

.post-meta {
    color: var(--ink-dim);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 11px 0;
    font-size: 13.5px;
    letter-spacing: .3px;
}

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

blockquote {
    border-left: 3px solid var(--red);
    background: var(--red-tint);
    border-radius: 0;
    padding: 20px 24px;
    margin: 28px 0;
    font-family: var(--tb-display);
    font-size: 20px;
    line-height: 1.6;
    font-style: italic;
    color: var(--ink);
}

.inline-share { border-top: 1px solid var(--rule); }
.inline-share a { color: var(--red-text); }

.share-btn {
    border: 1.5px solid var(--rule-mid);
    color: var(--ink);
    background: var(--paper);
    border-radius: 50%;
}

.share-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ---------------------------------------------------------------- sidebar */
.sidebar-widget {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--ink);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
}

.sidebar-widget.bg-dark,
.sponsored-widget {
    background: var(--ink) !important;
    color: #f2f2f4;
    border-top-color: var(--red);
}

.widget-title {
    font-weight: 700;
    font-size: 18px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 9px;
}

.sponsored-widget .widget-title { color: #fff; border-bottom-color: rgba(255, 255, 255, .2); }
.sidebar-news img { border-radius: 2px; border: 1px solid var(--rule); }
.sidebar-news a { color: var(--ink); font-weight: 600; line-height: 1.45; }
.sidebar-news a:hover { color: var(--red-text); }
.sponsored-widget .sidebar-news a { color: #fff; }
.sponsored-widget .sidebar-news a:hover { color: #ff9aa4; }
.sponsored-widget .date { color: #b9bcc4; }

.subscribe-widget button { background: var(--red); border-color: var(--red); color: #fff; }
.subscribe-widget button:hover { background: var(--red-dark); border-color: var(--red-dark); }

/* ----------------------------------------------------------------- footer */
.footer-widgets {
    background: var(--ink);
    border-bottom: 4px solid var(--red);
    border-top: 3px solid var(--red);
    padding: 52px 0 30px;
}

.site-footer {
    background: #0d0f13;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #9ba0aa;
}

.footer-widget h4 {
    color: #fff;
    font-family: var(--tb-display);
    font-weight: 700;
    letter-spacing: .2px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    padding-bottom: 9px;
}

.footer-widget p,
.footer-widget ul li a { color: #a8adb7; font-size: 14.5px; }
.footer-widget ul li a:hover { color: #ff9aa4; }
footer a { color: #cdd1d8; }
footer a:hover { color: #ff9aa4; }

.social-icon {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
}

.social-icon:hover { background: var(--red); border-color: transparent; }

/* ------------------------------------------------- forms / account pages
   The submit funnel. Anything that stops a paying customer mid-form costs
   more than anything on the homepage, so the states here are explicit. */

/* Stray pure-black and pure-white panels, pulled onto the palette. */
.bg-black { background: var(--ink) !important; }
.bg-white { background: var(--paper) !important; }
.bg-light { background: var(--paper-2) !important; }
.list-group-item { border-color: var(--rule); }
.rounded, .rounded-3 { border-radius: 2px !important; }
.shadow, .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.border { border-color: var(--rule) !important; }

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

.card-header { background: var(--paper-2); border-bottom: 1px solid var(--rule); font-weight: 700; }

label, .form-label { color: var(--ink); font-weight: 600; font-size: 14.5px; }

.form-control,
.form-select {
    border: 1px solid var(--rule-mid);
    border-radius: 2px;
    background: var(--paper);
    color: var(--ink-2);
    font-size: 16px;   /* 16px stops iOS zooming the form on focus */
    padding: 10px 13px;
}

.form-control::placeholder { color: var(--ink-dim); }

.form-control:focus,
.form-select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 .2rem rgba(192, 13, 30, .13);
}

.form-text, .small { color: var(--ink-dim); }
.form-check-input:checked { background-color: var(--red); border-color: var(--red); }

.pkg-card {
    border: 1px solid var(--rule-mid);
    border-radius: 2px;
    background: var(--paper);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.pkg-card:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }

.pkg-card.active {
    border-color: var(--red);
    border-width: 2px;
    background: var(--red-tint);
    box-shadow: 0 0 0 3px rgba(192, 13, 30, .1);
}

.credit-chip {
    background: var(--red-tint);
    color: var(--red-text);
    border: 1px solid var(--red-line);
    border-radius: 2px;
    font-weight: 700;
}

.step-rail div { border-radius: 2px; background: var(--rule); }
.step-rail div.on { background: var(--red); }
.step-rail div.done { background: var(--ok); }

.table-light th,
.table > thead th {
    background: var(--paper-2);
    color: var(--ink);
    border-color: var(--rule);
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 12.5px;
    font-weight: 700;
}

.table td { border-color: var(--rule); color: var(--ink-2); }

.alert { border-radius: 2px; border: 1px solid var(--rule); font-size: 15.5px; }
.alert-success { border-left: 4px solid var(--ok);   background: #f0f7f3; color: #10402f; }
.alert-danger  { border-left: 4px solid var(--red);  background: var(--red-tint); color: #7d1219; }
.alert-warning { border-left: 4px solid var(--warn); background: #fdf7e8; color: #6b4a00; }
.alert-info    { border-left: 4px solid var(--ink);  background: var(--paper-2); color: var(--ink-2); }

/* ------------------------------------------------------------ release body
   Same measure and rhythm as .single-post above; this is the block the
   editor actually fills, so it gets the drop cap and the standfirst. */
.post-summary {
    font-family: var(--tb-display);
    font-size: 22px;
    line-height: 1.5;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 20px 0;
    margin: 28px 0;
}

/* Everything that is actually read - as opposed to scanned - is set in Inter,
   antialiased. The editor pastes markup in from Word and from other sites, so
   the face is forced onto the descendants too: without this a stray
   <span style="font-family:Times"> from a pasted release sets its own type in
   the middle of the page. Headings keep the display serif. */
.post-body,
.post-body p, .post-body li, .post-body td, .post-body th,
.post-body span, .post-body div,
.single-post p {
    font-family: var(--tb-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.post-body h2, .post-body h3, .post-body h4,
.post-body h2 span, .post-body h3 span, .post-body h4 span {
    font-family: var(--tb-display) !important;
}

.post-body p {
    font-size: 18.5px;
    line-height: 1.8;
    color: var(--ink-2);
    margin-bottom: 21px;
}

.post-body a {
    color: var(--red-text);
    border-bottom: 1px solid var(--red-line);
    font-weight: 500;
}

.post-body a:hover { border-bottom-color: var(--red); background: var(--red-tint); }

.post-body img { border: 1px solid var(--rule); border-radius: 2px; margin: 10px 0; }
.post-body li { margin-bottom: 8px; line-height: 1.75; font-size: 18px; }

.post-body h2, .post-body h3, .post-body h4 {
    font-family: var(--tb-display);
    color: var(--ink);
    font-weight: 700;
    margin-top: 32px;
    letter-spacing: -.3px;
}

.post-body td, .post-body th { border-color: var(--rule); }

.post-body > p:first-of-type::first-letter {
    float: left;
    font-family: var(--tb-display);
    font-size: 66px;
    line-height: .8;
    font-weight: 700;
    color: var(--red);
    padding: 8px 11px 0 0;
}

/* ================================================================= mobile */
@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--paper);
        border: 1px solid var(--rule);
        border-top: 3px solid var(--red);
        padding: 10px 14px;
        margin-top: 12px;
        box-shadow: var(--shadow-md);
    }

    /* The collapsed panel is white paper, like the dropdowns it contains, so
       the links go back to ink here - the white masthead text would vanish. */
    .navbar-nav .nav-link {
        color: var(--ink);
        border-bottom: 1px solid var(--rule);
        border-left: 2px solid transparent;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: var(--red-text);
        border-left-color: var(--red);
        border-bottom-color: var(--rule);
    }
}

@media (max-width: 768px) {
    body { font-size: 17px; }

    /* Less air than desktop - the burger collapses the nav to one row - but
       still enough that the wordmark is not touching the red band. */
    .site-header { padding: 20px 0 14px; }
    .site-header .navbar { min-height: 0; }

    .sponsored-news { border-radius: 0; margin-inline: -12px; }

    .single-post article,
    .single-post .col-12 { padding: 22px; }

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

    .pricing-section .section-title { font-size: 26px; }

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

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

    .single-post p,
    .post-body p { font-size: 17px; margin-bottom: 17px; }

    .post-body li { font-size: 17px; }

    .post-summary { font-size: 18.5px; padding: 15px 0; margin: 20px 0; }

    .post-body > p:first-of-type::first-letter { font-size: 48px; }

    /* On one column a lifted card just looks misaligned. */
    .pricing-box.popular { transform: none; }
    .pricing-box.popular:hover { transform: none; }
}

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

    .pricing-box { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .news-card, .sponsored-card, .pricing-box,
    .btn-danger, .hero-btn, .hero-cta, .pkg-card { transition: none; }

    .news-card:hover, .pricing-box:hover, .pricing-box.popular:hover,
    .btn-danger:hover, .hero-btn:hover, .hero-cta:hover { transform: none; }
}

/* ================================================================== print */
@media print {
    .site-header, .footer-widgets, .site-footer,
    .share-box, .inline-share, .sidebar-widget { display: none !important; }

    body { background: #fff; color: #000; font-size: 12pt; }

    .single-post article,
    .single-post .col-12 { border: none; box-shadow: none; padding: 0; }

    .post-body a { color: #000; border-bottom: none; }
}