/* ==========================================================================
   La Rossa
   Realization of the "la-rossa" Novamira design direction.

   Migrated from WPCode snippet 588 ("BolognaBites Premium Design Upgrade",
   March 2026) under DESIGN-003, rubriek A. Three things changed in the move:

     1. Zero !important. Those existed only because a wp_head snippet has to
        beat Kadence inline CSS. A child stylesheet loads after the parent and
        wins on ordinary specificity, so they are not a quality being lost.
     2. Fonts are self-hosted. The source did @import from fonts.googleapis.com,
        which sends every visitor IP to Google before and regardless of consent.
     3. Three families collapse to two. Bricolage Grotesque takes over the UI
        role that DM Sans held, matching the declared design contract.

   Rubriek C of DESIGN-003 (the seven banner and spacing patches, source lines
   772 to 926) is deliberately NOT migrated. Those patched the side effects of
   earlier rules and belong in the Kadence settings instead.

   Scoped to body.larossa. Roll-out is per release increment (SOP-BUILD-001).
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens. Mirrors the design contract exactly. ------------------------ */

body.larossa {
  --lr-bg: #FBF9F5;
  --lr-surface: #FFFFFF;
  --lr-ink: #2A1F1C;
  --lr-accent: #A8321E;
  --lr-accent-deep: #8C2917;
  --lr-accent-tint: #F6EAE5;
  /* The accent on the dark ground. #A8321E against #2A1F1C reaches only 2.39:1,
     which fails AA for text; this reaches 5.37:1. Used for the wordmark in the
     footer and nowhere else. */
  --lr-accent-on-dark: #E2775F;
  --lr-support: #4E5F4A;
  --lr-muted: #6B5D57;
  --lr-faint: #A2958E;
  --lr-hairline: #E4DDD3;

  --lr-radius: 2px;
  --lr-xs: 8px;
  --lr-sm: 12px;
  --lr-md: 20px;
  --lr-lg: 48px;
  --lr-xl: 96px;

  --lr-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --lr-body: Lora, Georgia, serif;
  /* Measured, not assumed. The ch unit is not usable here: it sizes the zero
     glyph, which in Lora is 10.81px against a 5.8px average character, so 68ch
     renders 92 characters per line and not 68.

     Widened from 35rem to 38rem on 07-08-2026 at the owner's request: the
     reading column sat 170px narrower than the space it was given, and the gap
     on the right read as unfinished. 38rem measures about 75 characters, above
     the 69 ideal but inside the range long-form publications actually use. The
     reading column is now set to exactly this value, so there is no dead space
     beside a paragraph at all. */
  --lr-measure: 38rem;
  --lr-overhang: 0px;

  background-color: var(--lr-bg);
  color: var(--lr-ink);
}

/* REMOVED 06-08-2026: `overflow-x: clip` on .content-container.

   It was a precaution against horizontal overflow that never existed, and it
   broke two things at once. Kadence deliberately overflows that container in
   two places: the featured-image band (.article-post-thumbnail, alignfull,
   1920px wide with a negative margin) and the related-posts heading (alignwide,
   106px past the edge). Clip cut both back to 842px.

   The trap: getBoundingClientRect reports the layout box, not what is painted,
   so both still measured full width while rendering cropped. Measure paint, not
   layout, when checking a breakout. */

/* --- Surfaces ------------------------------------------------------------ */

body.larossa #wrapper,
body.larossa #inner-wrap {
  background-color: var(--lr-bg);
}

body.larossa .entry.content-bg,
body.larossa .content-bg {
  background-color: var(--lr-surface);
  border-radius: var(--lr-radius);
  box-shadow: 0 1px 2px rgba(42, 31, 28, 0.06);
}

/* --- Header and navigation ----------------------------------------------- */

body.larossa #masthead,
body.larossa .site-header,
body.larossa .kadence-header-main {
  background-color: var(--lr-bg);
  border-bottom: 1px solid var(--lr-hairline);
  box-shadow: none;
}

body.larossa .site-header.item-is-fixed,
body.larossa .site-header.kadence-scrolled,
body.larossa #masthead.is-sticky {
  background-color: rgba(251, 249, 245, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lr-hairline);
  box-shadow: none;
}

/* The container class is in the selector purely for specificity: Kadence sets
   the link colour from --global-palette5, a cool grey, and a shorter selector
   loses to it. Everything else here already won. */
body.larossa .header-navigation .header-menu-container ul li a,
body.larossa .header-navigation ul li a,
body.larossa .main-navigation .nav-menu > li > a {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-muted);
  /* The 2px underline below counts toward the box, so flexbox centres the box
     including it and the text lands 1.6px high. Two of those pixels move from
     the bottom padding to the top, which keeps the box height identical and
     puts the text on the true centre line. Measured, not guessed. */
  padding: 8px 2px 4px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

/* The #primary-menu prefix is there for specificity: Kadence colours the active
   item from --global-palette3 with an ID selector, so on a category archive or a
   page the current item fell back to a cool near-black. One ID outweighs any
   number of classes. */
body.larossa #primary-menu li.current-menu-item > a,
body.larossa #primary-menu li.current-menu-ancestor > a,
body.larossa #primary-menu li.current-page-ancestor > a,
body.larossa .header-navigation ul li a:hover,
body.larossa .header-navigation ul li.current-menu-item > a,
body.larossa .main-navigation .nav-menu > li.current-menu-item > a {
  color: var(--lr-accent);
  border-bottom-color: var(--lr-accent);
}

/* --- Header composition, desktop --------------------------------------------
   Kadence lays the header row out as a grid with a fixed left column of 360px
   while the wordmark is 175px, so 185px of dead space sat between the name and
   the first menu item. The menu then used justify-content: space-between across
   its full 799px, pulling the items as far apart as they would go.

   Measured: items 613px together, wordmark 175px, social 73px, container 1290px
   at most. That leaves 429px to place deliberately rather than by accident.

   The left column now shrinks to the wordmark, the menu sits directly beside it
   behind one clear gap, and the social icons stay at the right edge. Brand and
   navigation read as one group; social reads as the separate thing it is.

   Held above 1200px only. Below that the items need space-between's ability to
   collapse its gaps, or the row would overflow. */

@media (min-width: 1200px) {
  /* The first menu item lands on the same vertical line as the breadcrumb and
     the H1, so the header and the article share one left edge.

     Derived from measurements, not guessed:
       header container = min(1242px, 100vw - 48px), centred
         so its left edge is 24px below 1290px viewport, and (50vw - 621px) above
       content edge     = (100vw - 842px) / 2 + 56px
         where 56px is the boxed card's 24px offset plus its 32px padding
         (the breadcrumb and the H1 both sit exactly there)

     Expressed as a percentage of the header container itself, both regimes
     collapse into one term: 50% - 365px. Below the ceiling the container is
     (100vw - 48px) wide and the term resolves to (50vw - 389px); at and above
     the ceiling it is 1242px and the term resolves to a constant 256px.

     Percentages, not vw. A vw unit includes the scrollbar while the layout does
     not, which put the menu 7.5px right of the content edge at 1280px. Measured,
     then fixed by switching the unit.

     Sizing the COLUMN rather than padding after the logo keeps this correct if
     the wordmark ever changes width. */
  body.larossa #masthead .site-main-header-inner-wrap {
    grid-template-columns: calc(50% - 365px) 1fr;
  }

  body.larossa #masthead .site-header-main-section-right {
    padding-left: 0;
  }

  body.larossa #masthead .header-menu-container > ul {
    justify-content: flex-start;
    gap: clamp(20px, 2.6vw, 36px);
    flex-wrap: nowrap;
  }

  /* Breathing room before the social icons, so they never crowd the last item. */
  body.larossa #masthead .site-header-item-main-navigation {
    margin-right: clamp(28px, 3vw, 48px);
  }
}

body.larossa .header-navigation .sub-menu {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius);
  box-shadow: 0 8px 24px rgba(42, 31, 28, 0.10);
  padding: var(--lr-xs) 0;
}

body.larossa .header-navigation .sub-menu li a {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lr-muted);
  padding: 8px 18px;
  border-bottom: 0;
}

/* Header chrome. Kadence paints the social icons and the drawer toggle from
   --global-palette4 and 5, both cool greys, which the contract forbids. The
   icons inherit currentColor, so setting it on the wrapper is enough. */
body.larossa .header-social-item,
body.larossa .header-social-wrap .social-button,
body.larossa .kadence-svg-iconset,
body.larossa .menu-toggle-open,
body.larossa .menu-toggle-icon,
body.larossa .drawer-toggle {
  color: var(--lr-muted);
}

body.larossa .header-social-item:hover,
body.larossa .drawer-toggle:hover {
  color: var(--lr-accent);
}

/* --- Wordmark ---------------------------------------------------------------
   Real text, not an image. Sharp at any size, identical on every device, and
   selectable. Replaces a logo SVG that carried live Georgia italic, a system
   font missing from most Android devices. */

body.larossa .lr-wordmark {
  display: inline-block;
  font-family: var(--lr-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--lr-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Optical centring. "Bologna" carries a descender, so the geometric middle of
   the line box sits below the middle of the letterforms. Measured with canvas
   metrics: cap-to-baseline centres at 42 while the header section centres at 40.
   Two pixels up, purely visual, no effect on layout. */
body.larossa #masthead .lr-wordmark { position: relative; top: -2px; }

body.larossa .lr-wordmark-b { color: var(--lr-accent); }

body.larossa .lr-wordmark:hover .lr-wordmark-b { color: var(--lr-accent-deep); }

body.larossa .lr-wordmark:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 4px;
}

/* WordPress gives .wp-block-image display:table, which shrinks to its content
   and ignores the parent's text-align, so the mark sat left. */
body.larossa .lr-footer-brand {
  display: block;
  width: 100%;
  margin: 0 0 var(--lr-lg);
  text-align: center;
}

body.larossa .lr-footer-brand a { text-decoration: none; }

/* The divider between the previous and next post was a 1px rule in A0AEC0, a
   cool blue-grey from the Kadence palette. Every other separator on the site is
   the hairline, so it becomes that. */
body.larossa .nav-previous::after { background: var(--lr-hairline); }

/* Footer navigation. Kadence colours these from --global-palette5, a cool grey
   the palette forbids. Matched to the copyright line, as asked. */
body.larossa #colophon .footer-navigation .footer-menu-container > ul > li > a,
body.larossa .site-footer .footer-navigation a,
body.larossa .site-footer nav a {
  color: rgba(251, 249, 245, 0.62);
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 150ms ease;
}

body.larossa #colophon .footer-navigation .footer-menu-container > ul > li > a:hover,
body.larossa .site-footer .footer-navigation a:hover,
body.larossa .site-footer nav a:hover {
  color: #FBF9F5;
}

/* On the dark footer the ink inverts and the accent needs its lighter tone. */
body.larossa .site-footer .lr-wordmark { color: #FBF9F5; font-size: 26px; }
body.larossa .site-footer .lr-wordmark-b { color: var(--lr-accent-on-dark); }
body.larossa .site-footer .lr-wordmark:hover .lr-wordmark-b { color: #FBF9F5; }

@media (max-width: 781px) {
  body.larossa .lr-wordmark { font-size: 24px; }
}

/* --- Mobile header ----------------------------------------------------------
   The wordmark sits centred with the menu button beside it, which fills the bar
   instead of leaving the right half empty.

   Kadence reuses .site-main-header-inner-wrap for both the desktop and the
   mobile row, so this is keyed on :has(.mobile-site-branding) rather than on a
   breakpoint: it applies to the mobile row and to nothing else, whatever width
   Kadence decides to switch at.

   The button leaves the flow so it cannot pull the centre off. The container is
   padded symmetrically, so centring inside it is centring in the viewport: at
   375px the mark runs 117 to 258 and the button starts at 314, and at 320px it
   runs 90 to 231 against a button at 259. No overlap either way. */

body.larossa #masthead .site-main-header-inner-wrap:has(.mobile-site-branding) {
  grid-template-columns: 1fr;
  position: relative;
}

body.larossa #masthead .site-main-header-inner-wrap:has(.mobile-site-branding) .site-header-main-section-left {
  grid-column: 1;
  width: 100%;
  justify-content: center;
}

body.larossa #masthead .site-main-header-inner-wrap:has(.mobile-site-branding) .site-header-main-section-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* The optical lift that centres the mark against the desktop nav is not wanted
   here: on mobile it is centred in a bar of its own. */
body.larossa #masthead .mobile-site-branding .lr-wordmark { top: 0; }

/* --- Mobile drawer ----------------------------------------------------------
   The slide-in menu was untouched by everything above: ground 090C10, links in
   Lora 14px on F7FAFC, a white close button. All of it cool, none of it the
   brand. It is also the only navigation 70.5% of visitors ever see. */

body.larossa .popup-drawer .drawer-inner {
  background-color: var(--lr-ink);
  color: #FBF9F5;
}

body.larossa .popup-drawer .drawer-overlay {
  background-color: rgba(42, 31, 28, 0.55);
}

body.larossa .popup-drawer .drawer-content ul li a,
body.larossa .popup-drawer .mobile-navigation ul li a {
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.82);
  border-bottom: 1px solid rgba(251, 249, 245, 0.12);
  padding: 16px 4px;
  transition: color 150ms ease;
}

body.larossa .popup-drawer .drawer-content ul li a:hover,
body.larossa .popup-drawer .drawer-content ul li.current-menu-item > a {
  color: var(--lr-accent-on-dark);
}

body.larossa .popup-drawer .drawer-header .menu-toggle-close,
body.larossa .popup-drawer .toggle-close {
  color: rgba(251, 249, 245, 0.82);
}

body.larossa .popup-drawer .menu-toggle-close:hover { color: var(--lr-accent-on-dark); }

body.larossa .popup-drawer .menu-toggle-close:focus-visible,
body.larossa .popup-drawer .drawer-content ul li a:focus-visible {
  outline: 2px solid var(--lr-accent-on-dark);
  outline-offset: 2px;
}

/* --- Archive and page title band ------------------------------------------ */

body.larossa .page-hero-section,
body.larossa .site-above-entry-hero-wrap,
body.larossa .kadence-page-title-wrap {
  background-color: var(--lr-accent-tint);
  background-image: none;
  min-height: 72px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(168, 50, 30, 0.14);
}

body.larossa .page-hero-section .page-title,
body.larossa .kadence-page-title-wrap h1 {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-accent);
}

/* --- Article header ------------------------------------------------------- */

/* Gaps tightened on 07-08-2026. Measured before: 52px of air above the
   breadcrumb (32px of card padding plus 20px of its own), and 98px between the
   updated date and the start of the article. Both read as the page not having
   started yet. */
body.larossa .entry-header {
  margin-bottom: var(--lr-md);
}

body.larossa.single-post .entry-content-wrap { padding-top: var(--lr-md); }

/* Kadence puts a full-width hairline under the meta line, and this file puts a
   48px accent bar under the header. Two separators, 20px apart, doing the same
   job. The accent bar stays because it is the masthead signature; the hairline
   goes. */
body.larossa .entry-header .entry-meta {
  border-bottom: 0;
  margin-bottom: var(--lr-sm);
  padding-bottom: 0;
}

body.larossa .kadence-breadcrumbs {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-faint);
  padding: 0 0 var(--lr-sm);
}

body.larossa .kadence-breadcrumbs a {
  color: var(--lr-faint);
  text-decoration: none;
  transition: color 150ms ease;
}

body.larossa .kadence-breadcrumbs a:hover { color: var(--lr-accent); }
body.larossa .kadence-breadcrumbs .bc-delimiter { color: var(--lr-hairline); }
body.larossa .kadence-bread-current { color: var(--lr-muted); }

/* Archives, the blog index and the 404 name their heading .page-title rather
   than .entry-title, so the rule below has to cover both or those templates
   keep Kadence's Playfair at 32px in a cool palette3. Found by walking every
   template type rather than assuming the article was representative.

   The banner variant further down is more specific and still wins where a hero
   is actually rendered. */
body.larossa .page-title,
body.larossa .entry-title {
  font-family: var(--lr-display);
  font-size: clamp(2.125rem, 1.42rem + 3vw, 3.25rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--lr-ink);
  /* Was 20ch, which capped the H1 at 655px inside a 986px column and left a
     third of the width empty. 28ch reaches past the column, so `text-wrap:
     balance` decides the break instead of an arbitrary cap, and the title lands
     on two even lines rather than three short ones. */
  max-width: 28ch;
  margin: var(--lr-sm) 0 var(--lr-md);
  text-wrap: balance;
}

/* The accent bar under the header. Kept from the source: it is the one piece
   of pure ornament that reads as a masthead rather than as decoration. */
body.larossa .entry-header::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--lr-accent);
  margin: var(--lr-md) 0 0;
}

/* The featured image already renders above the article as a full-bleed band
   (.article-post-thumbnail, position "behind", so the content card overlaps it).
   An earlier reading of this page missed it, because the band sits OUTSIDE the
   <article> element and the check only looked inside. A second copy under the H1
   was added on that false premise and has been removed again. */

body.larossa .article-post-thumbnail {
  border-radius: 0;
}

/* Kadence adds an 80px top margin to .content-area from its vertical-padding
   setting. With a "behind" featured image that leaves an empty band between the
   header rule and the photo, and the overlap of the content card already
   supplies the breathing room. Only removed where such a band actually exists,
   so a page without a featured image keeps its spacing. */
body.larossa .content-area:has(.article-post-thumbnail) {
  margin-top: 0;
}

/* --- Post navigation --------------------------------------------------------
   Sits outside .entry-content, so the content-body rules never reached it and
   it kept Lora at 17px throughout. */

body.larossa .post-navigation .nav-links a {
  font-family: var(--lr-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lr-ink);
  text-decoration: none;
}

body.larossa .post-navigation .nav-links a:hover { color: var(--lr-accent); }

body.larossa .post-navigation .post-navigation-sub {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-faint);
  margin-bottom: var(--lr-xs);
}

body.larossa .post-navigation .nav-links a:hover .post-navigation-sub {
  color: var(--lr-accent);
}

body.larossa .lr-caption,
body.larossa .entry-content figcaption {
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--lr-muted);
  margin-top: var(--lr-sm);
  max-width: 56ch;
  text-align: left;
}

body.larossa .post-modified-info,
body.larossa .entry-meta {
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lr-faint);
  margin: 0 0 var(--lr-lg);
  padding-bottom: var(--lr-md);
  border-bottom: 1px solid var(--lr-hairline);
}

/* --- Content body ---------------------------------------------------------- */

body.larossa .entry-content {
  font-family: var(--lr-body);
}

body.larossa .entry-content p,
body.larossa .entry-content li {
  font-family: var(--lr-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--lr-ink);
}

/* Tightened from 1.4em to 1.1em on 07-08-2026. Measured gap between paragraphs
   was 24px against a 28.9px line-height, so the space between two paragraphs was
   nearly a full blank line and the text read as loosely stacked rather than as
   one column. 1.1em gives 19px, about two thirds of the leading, which still
   separates clearly. */
body.larossa .entry-content p { margin-bottom: 1.1em; }

/* Measure applies to running text only. Figures, tables and commercial blocks
   opt out by not being direct children of this list.

   REL-011 added `.lr-article__body` between .entry-content and the paragraphs on
   single posts, so the same four selectors are repeated one level down. Without
   that repetition the measure silently stopped applying to all 40 guides, which
   is the whole reason the rule exists. */
body.larossa .entry-content > p,
body.larossa .entry-content > ul,
body.larossa .entry-content > ol,
body.larossa .entry-content > blockquote,
body.larossa .lr-article__body > p,
body.larossa .lr-article__body > ul,
body.larossa .lr-article__body > ol,
body.larossa .lr-article__body > blockquote {
  max-width: var(--lr-measure);
}

/* --- Article byline: category above the title, updated date below (REL-011) --
   Both are Kadence title elements that were switched off. Turning them on
   exposed two things a settings-level check would never have shown, because
   only the rendered page has them: the category link came out in Lora at
   #C64B3F, a lightened accent Kadence derives from its own global palette and a
   colour that appears nowhere in this design, and the date came out on the faint
   tier that belongs to breadcrumbs.

   The category is the one place on an article where the accent earns its keep,
   so it takes the real accent. The date is meta, so it takes muted: more
   present than a breadcrumb, less present than the text. */

body.larossa .entry-taxonomies,
body.larossa .entry-taxonomies a,
body.larossa .entry-taxonomies .category-style-normal a {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-accent) !important;
  text-decoration: none !important;
}

body.larossa .entry-taxonomies a:hover { color: var(--lr-accent-deep) !important; }

body.larossa .entry-header .entry-meta,
body.larossa .entry-header .entry-meta .meta-label,
body.larossa .entry-header .entry-meta .posted-by,
body.larossa .entry-header .entry-meta .updated-on,
body.larossa .entry-header .entry-meta time {
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--lr-muted);
}

/* Kadence emits the label and the date as adjacent inline spans with no gap of
   their own, so "Updated" ran straight into the month. */
body.larossa .entry-header .entry-meta .meta-label { margin-right: 0.35em; }

/* --- Brand byline (REL-038) -------------------------------------------------
   The byline sits in .entry-header, outside .entry-content, so the accent link
   treatment on line ~901 does not reach it. Without a rule of its own the link
   falls back to the global anchor colour and shouts next to a muted date. Muted
   with a faint underline, accent on hover: it reads as the same line, not as a
   second element competing with the title. */
body.larossa .entry-header .entry-meta .posted-by a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(107, 93, 87, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

body.larossa .entry-header .entry-meta .posted-by a:hover,
body.larossa .entry-header .entry-meta .posted-by a:focus-visible {
  color: var(--lr-accent);
  text-decoration-color: var(--lr-accent);
}

/* --- Article rail: the table of contents on long guides (REL-011) -----------
   Two columns above 1024px: a sticky rail and the reading column. Below that the
   rail becomes a closed <details> above the article, so a phone gets a one line
   summary instead of nineteen links pushing the piece off screen. */

/* Base is the collapsed card, at every width. The two-column rail is the
   enhancement on top, not the other way round: a phone is 70.5% of sessions. */

body.larossa .lr-article { display: block; }

body.larossa .lr-article__body { min-width: 0; }

body.larossa .lr-toc {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius);
  padding: var(--lr-sm) var(--lr-md);
  margin-bottom: var(--lr-lg);
}

body.larossa .lr-toc__title {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-muted);
  cursor: pointer;
  list-style: none;
}

body.larossa .lr-toc__title::-webkit-details-marker { display: none; }

/* The closed card needs to say that it opens. */
body.larossa .lr-toc__title::after {
  content: "+";
  float: right;
  color: var(--lr-accent);
  font-size: 1rem;
  line-height: 1;
}

body.larossa .lr-toc__wrap[open] .lr-toc__title::after { content: "\2013"; }

body.larossa .lr-toc__wrap[open] .lr-toc__title {
  padding-bottom: var(--lr-xs);
  border-bottom: 1px solid var(--lr-hairline);
  margin-bottom: var(--lr-sm);
}

/* `.entry-content` is in the selector for specificity, not for scope. The rail
   is an <ol>, and `body.larossa .entry-content ol` weighs (0,2,2) with
   `padding-left: 1.4em`, which beats a plain `.lr-toc__list` at (0,2,1). That
   1.4em resolved to 24px and pushed every number in from the edge the
   breadcrumb, the H1 and the reading column all share. Measured, not guessed:
   the list sat at x=544 while everything else sat at x=520. */
body.larossa .entry-content .lr-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

body.larossa .lr-toc__list li { margin: 0 0 2px; }

/* Flush left with the breadcrumb, the H1 and the reading column. The earlier
   version carried a 2px transparent border plus 8px of padding, which pushed
   every number 10px in from the edge everything else aligns to. The active item
   is marked with colour and weight instead, so nothing shifts when it changes. */
body.larossa .lr-toc__list a {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 2px;
  padding: 5px 0;
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--lr-muted) !important;
  text-decoration: none !important;
  transition: color 150ms ease;
}

body.larossa .lr-toc__n {
  font-variant-numeric: tabular-nums;
  color: var(--lr-faint);
  font-weight: 600;
}

body.larossa .lr-toc__list a:hover { color: var(--lr-ink) !important; }

/* The section the reader is actually in. Set by the one script this theme adds;
   without it every link still works, it just never lights up. */
body.larossa .lr-toc__list a[aria-current="true"] {
  color: var(--lr-ink) !important;
  font-weight: 600;
}

body.larossa .lr-toc__list a[aria-current="true"] .lr-toc__n { color: var(--lr-accent); }

/* Headings sit under a sticky header, so an anchor jump has to stop short of it
   or the heading lands behind the bar. */
/* 112 rather than 96: the sticky header measures 81px, so 96 left a heading 15px
   below it, close enough to read as stuck to the bar. This clears it by 31px and
   still lands well above the line the rail uses to decide which section is
   active (header height plus 48, so 129). */
body.larossa .lr-article__body h2 { scroll-margin-top: 112px; }

/* --- The rail as a real column, from 1200px up --------------------------------
   Measured first, then sized. The Kadence card is `.content-container` at
   max-width 842px, which after 24px of container padding and 32px of wrap
   padding leaves a 730px reading column. Putting a 208px rail INSIDE that
   squeezed the text to 471px, which measured 51 characters per line against a
   target of 69. That is a reading regression on all 40 guides, so it was not
   shipped.

   The card is widened by exactly the rail plus its gap instead: 842 + 208 + 48
   = 1098. The reading column therefore lands back on 730px, unchanged from
   before this increment, and the rail is added space rather than borrowed space.

   Hanging the rail in the left margin was the other candidate and was rejected
   on measurement: at 1280px the container leaves 275px of margin and the rail
   needs 256 of it, so it would sit 3px from the viewport edge and break below
   that. The breakpoint is 1200 and not 1024 for the same reason. */

@media (min-width: 1200px) {
  /* `:has(> .site-main)` is doing real work here, not decoration. Kadence gives
     the related-posts wrapper the SAME `.content-container site-container`
     classes as the article card, so widening the class widened both. The related
     block is `alignfull` with an `alignwide` inner, and Kadence derives that
     breakout from the container width: measured after the first version, the
     carousel and its heading came out 1310px wide starting at x=-22, which is
     why "Similar Posts" was cut off at the left edge and the cards ran past both
     sides. Only the container that actually holds the article is widened. */
  body.larossa.single-post .content-container:has(> .site-main) {
    max-width: min(976px, 100vw - 64px);
  }

  /* The reading column IS the measure, so a paragraph has no empty strip beside
     it. 208 rail + 48 gap + 608 text = 864, and 864 + 64 wrap padding + 48
     container padding = 976. Every number in the container width above comes
     from this line. */
  body.larossa .lr-article {
    display: grid;
    grid-template-columns: 208px minmax(0, var(--lr-measure));
    gap: 48px;
    align-items: start;
  }

  /* The scrollbar on a tall rail was inheriting the site-wide accent thumb,
     which put a second red line beside the accent bar in the header. In the
     rail it is a hairline. */
  body.larossa .lr-toc::-webkit-scrollbar { width: 3px; }
  body.larossa .lr-toc::-webkit-scrollbar-thumb { background: var(--lr-hairline); }
  body.larossa .lr-toc { scrollbar-width: thin; scrollbar-color: var(--lr-hairline) transparent; }

  /* The +/- affordance belongs to the collapsed card on a phone. On desktop the
     rail is always open and the summary is not interactive, so the marker is
     noise. The `[open]` variant needs its own override: it weighs (0,3,1) and
     beat the plain rule inside this query, which is why a minus sign was still
     showing next to "On this page" on a 1920px screen. */
  body.larossa .lr-toc__wrap[open] .lr-toc__title::after,
  body.larossa .lr-toc__title::after { content: none; }

  body.larossa .lr-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
  }

  body.larossa .lr-toc__title {
    padding-bottom: var(--lr-xs);
    border-bottom: 1px solid var(--lr-hairline);
    margin-bottom: var(--lr-sm);
    cursor: default;
    pointer-events: none;
  }
}

/* REMOVED 07-08-2026: `.lr-toc__wrap:not([open]) > .lr-toc__list { display: block }`.

   It was meant to keep the rail open on desktop without a script. It does not
   work: a closed <details> hides its non-summary children through UA rendering
   that an explicit `display` does not override, so the desktop rail shipped with
   a heading, a rule and nothing under it.

   Worse, it verified clean. getComputedStyle reported `display: block` for the
   hidden list, so the measurement said the rail was fine while a reader saw an
   empty column. Same trap as the breakout check in CHG-086: computed style is
   not paint. The open state is now set in script, and the markup renders open so
   the no-script path degrades to a long list rather than an empty one. */

body.larossa .entry-content h2 {
  font-family: var(--lr-display);
  font-size: clamp(1.625rem, 1.33rem + 1.26vw, 2rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lr-ink);
  max-width: 28ch;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  padding-top: 0.5em;
  border-top: 1px solid var(--lr-hairline);
}

body.larossa .entry-content h3 {
  font-family: var(--lr-display);
  font-size: clamp(1.375rem, 1.29rem + 0.35vw, 1.5rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--lr-accent);
  max-width: 34ch;
  margin-top: 1.9em;
  margin-bottom: 0.5em;
}

body.larossa .entry-content h4,
body.larossa .entry-content h5,
body.larossa .entry-content h6 {
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--lr-muted);
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

body.larossa .entry-content strong,
body.larossa .entry-content b {
  font-weight: 700;
  color: var(--lr-ink);
}

body.larossa .entry-content a:not(.wp-block-button__link) {
  color: var(--lr-accent);
  text-decoration: underline;
  text-decoration-color: rgba(168, 50, 30, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 150ms ease;
}

body.larossa .entry-content a:not(.wp-block-button__link):hover {
  text-decoration-color: var(--lr-accent);
}

/* Scoped to .wp-block-list on 31-08-2026. This rule used to hit every ul and ol
   inside .entry-content, including components that lay themselves out. The table of
   contents needed an explicit counter-rule for exactly that reason - see the
   .lr-toc__list block above, which sets padding: 0 to undo this - and on 31-08-2026
   the Kadence posts grid on the home page turned out to have walked into the same
   rule: it rendered with a 23.8px list indent that pushed the cards in from the
   heading above them, while Kadence's own stylesheet had already set padding: 0 on
   ul.kadence-posts-list and lost on specificity.

   Fixing the component with a second counter-rule was the obvious move and is the
   wrong one: that is what happened for the table of contents, and the next component
   walked in anyway. Scoping to the class Gutenberg puts on every list block states
   the intent - running text - instead of listing exceptions.

   Measured before the change: 175 wp-block-list lists over 49 URLs (unaffected),
   40 lr-toc__list (already carried padding: 0), 43 related-post lists (outside
   .entry-content, never reached), and one posts grid on the home page - the defect.
   Specificity rises from 0,2,2 to 0,3,2, so the rule keeps winning where it applies. */
body.larossa .entry-content ul.wp-block-list,
body.larossa .entry-content ol.wp-block-list {
  padding-left: 1.4em;
  margin-bottom: 1.4em;
}

body.larossa .entry-content li { margin-bottom: 0.4em; }
body.larossa .entry-content ul li::marker { color: var(--lr-accent); }

body.larossa .entry-content blockquote {
  border-left: 3px solid var(--lr-accent);
  background: var(--lr-accent-tint);
  border-radius: 0 var(--lr-radius) var(--lr-radius) 0;
  padding: var(--lr-md) 22px;
  margin: 1.6em 0;
  box-shadow: none;
}

body.larossa .entry-content blockquote p {
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-style: normal;
  color: var(--lr-muted);
  line-height: 1.6;
  margin: 0;
}

body.larossa .entry-content blockquote strong { color: var(--lr-accent-deep); }

/* --- Form fields -------------------------------------------------------------
   Reached through the 404 page and the search results, which is exactly why it
   went unnoticed: neither is linked from anywhere. Kadence left the field on
   Lora with a 3px radius and a CBD5E0 border, a cool blue-grey the palette
   forbids.

   CookieYes elements are deliberately left alone. That is a consent interface
   with its own house style, and restyling it touches something that has to stay
   legible and recognisable for compliance reasons, not for design ones. */

body.larossa input[type="search"],
body.larossa input[type="text"],
body.larossa input[type="email"],
body.larossa input[type="url"],
body.larossa input[type="number"],
body.larossa textarea,
body.larossa select {
  font-family: var(--lr-display);
  font-size: 1rem;
  color: var(--lr-ink);
  background-color: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius);
  padding: 0.7em 0.9em;
  transition: border-color 150ms ease;
}

body.larossa input:focus-visible,
body.larossa textarea:focus-visible,
body.larossa select:focus-visible {
  border-color: var(--lr-accent);
  outline: 2px solid var(--lr-accent);
  outline-offset: 1px;
}

body.larossa ::placeholder { color: var(--lr-faint); opacity: 1; }

body.larossa .search-form .search-submit,
body.larossa .kadence-search-icon-wrap {
  color: var(--lr-muted);
}

/* --- Tables ---------------------------------------------------------------- */

body.larossa .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  margin: 1.8em 0;
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius);
  overflow: hidden;
}

body.larossa .entry-content table thead { background: var(--lr-accent-tint); }

body.larossa .entry-content table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lr-muted);
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--lr-hairline);
  text-align: left;
}

body.larossa .entry-content table td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--lr-hairline);
  color: var(--lr-muted);
  vertical-align: top;
  line-height: 1.5;
}

body.larossa .entry-content table td:first-child {
  font-weight: 600;
  color: var(--lr-ink);
}

body.larossa .entry-content table tr:last-child td { border-bottom: 0; }

body.larossa .entry-content table tr:hover td {
  background-color: var(--lr-accent-tint);
  transition: background-color 100ms ease;
}

body.larossa .entry-content table tr.bb-top-pick td { background: var(--lr-accent-tint); }

/* --- Buttons ---------------------------------------------------------------- */

body.larossa .wp-block-button { margin: var(--lr-md) 0; }

body.larossa .wp-block-button:not(.is-style-outline) .wp-block-button__link,
body.larossa .wp-element-button {
  display: inline-block;
  font-family: var(--lr-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  background-color: var(--lr-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--lr-radius);
  padding: 0.85em 1.5em;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 120ms ease;
}

body.larossa .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body.larossa .wp-element-button:hover {
  background-color: var(--lr-accent-deep);
  color: #FFFFFF;
}

body.larossa .wp-block-button.is-style-outline .wp-block-button__link {
  font-family: var(--lr-display);
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  color: var(--lr-accent);
  border: 1px solid var(--lr-accent);
  border-radius: var(--lr-radius);
  padding: 0.8em 1.45em;
}

body.larossa .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--lr-accent-tint);
}

body.larossa .wp-block-button__link:focus-visible,
body.larossa .wp-element-button:focus-visible {
  outline: 2px solid var(--lr-ink);
  outline-offset: 2px;
}

body.larossa .wp-block-button__link:active { transform: translateY(1px); }

/* --- Related posts ---------------------------------------------------------
   The "Similar Posts" heading is an H2 but sits outside .entry-content, so the
   content-body rules never reached it and it kept the old Playfair at 28px. */

body.larossa .entry-related-title {
  font-family: var(--lr-display);
  font-size: clamp(1.625rem, 1.33rem + 1.26vw, 2rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lr-ink);
  border-top: 0;
  padding-top: 0;
  margin-bottom: var(--lr-lg);
}

/* The run-up to "Similar Posts", tightened twice.

   First pass (CHG-088) took it from 198px to 123px. Measured again on 07-08-2026
   the remaining 123px turned out to come from three separate places, which is
   why one edit had not been enough:

     42.5px  margin on .post-navigation, collapsed with the same value on
             .entry-related, so the two together still cost 42.5
     20px    padding-top on this band
     59.5px  padding-top on .entry-related-inner-content, a Kadence default and
             the largest single contributor

   Now 32 + 12 + 28 = 72px. The hairline keeps clear air on both sides: 32px
   above it and 40px below, so the rule still reads as a section break rather
   than as a line stuck to a heading. The padding-bottom of the inner content is
   deliberately left alone; below the cards it separates the section from the
   footer and is not what was too roomy. */
body.larossa .post-navigation { margin-bottom: 32px; }

body.larossa .entry-related {
  background: var(--lr-bg);
  border-top: 1px solid var(--lr-hairline);
  margin-top: 32px;
  padding-top: var(--lr-sm);
}

body.larossa .entry-related-inner-content { padding-top: 28px; }

/* Kadence puts an 80px bottom margin on .content-area, the counterpart of the
   top margin already removed. Between the carousel dots and the footer that
   measured 144px, and the footer carries its own padding. */
body.larossa .content-area {
  margin-bottom: var(--lr-md);
}

/* --- Archive cards ---------------------------------------------------------- */

body.larossa article.loop-entry,
body.larossa .loop-entry {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius);
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 180ms ease;
}

body.larossa article.loop-entry:hover {
  box-shadow: 0 6px 24px rgba(42, 31, 28, 0.09);
  transform: translateY(-2px);
}

body.larossa .loop-entry .entry-title,
body.larossa .loop-entry-title {
  font-family: var(--lr-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lr-ink);
  max-width: none;
}

body.larossa .loop-entry .entry-title a { color: var(--lr-ink); text-decoration: none; }
body.larossa .loop-entry .entry-title a:hover { color: var(--lr-accent); }

body.larossa .loop-entry .entry-summary p {
  font-family: var(--lr-display);
  font-size: 0.875rem;
  color: var(--lr-muted);
  line-height: 1.55;
}

body.larossa .cat-links a,
body.larossa .tag-links a,
body.larossa .loop-entry .entry-taxonomies a {
  font-family: var(--lr-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-accent);
  text-decoration: none;
}

/* --- Homepage ---------------------------------------------------------------- */

body.larossa.home .entry-content h1,
body.larossa.home h1 {
  font-family: var(--lr-display);
  font-size: clamp(2rem, 1.5rem + 2.1vw, 3rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--lr-ink);
}

body.larossa.home .wp-block-heading,
body.larossa.home h2 {
  font-family: var(--lr-display);
  font-weight: 600;
  color: var(--lr-ink);
}

/* --- Photographic hero, entry pages only (REL-016) ----------------------------
   The declared exception in the design contract, built to its five conditions:
   a real #1A1210 scrim at 55 to 70 percent, text held LEFT and never centred,
   contrast measured per page, at most a headline plus one line plus two buttons,
   and never on an article.

   The scrim is 0.65. That is not a taste pick: the candidate photographs were
   sampled on a canvas over the left 45 percent by the middle 60 percent, which
   is the region the text actually crosses, and the brightest pixel in each was
   blended with the scrim at four opacities. Media 437 reads (239, 214, 174) at
   its brightest there, which gives white text 7.02:1 at 0.65. The three
   alternatives all had blown highlights in that zone and landed near 5.8. */

/* An entry page opens on its photograph, the way an article opens on its
   featured band. Measured before: 112px of air sat between the header and the
   hero, made of 80px of Kadence `.content-area` margin plus 32px of card
   padding, while an article had none of either. `:has()` scopes this to pages
   that actually carry a photo hero, so nothing else is touched.

   The bottom margin was 80px, which sat on top of the 72px bottom margin of the
   last block: 152px of nothing between the final call to action and the footer,
   and the owner read it as the page failing to meet the footer. It is now 0, so
   the gap is the last block's own margin and nothing else. Measured after: 72px
   on both entry pages, against 152 before. */
body.larossa:has(.lr-hero-photo) .content-area {
  margin-top: 0;
  margin-bottom: 0;
}

body.larossa:has(.lr-hero-photo) .entry-content-wrap { padding-top: 0; }

body.larossa .lr-hero-photo,
body.larossa .lr-quote-photo {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  align-items: center;
}

/* Shortened on the owner's instruction of 07-08-2026. Measured before: 560px of
   band around a 284px text block, so 138px of empty photograph above the
   headline and 138px below it. A hero is an opening, not a poster.

   The row padding is forced here rather than left to the block attribute,
   because the two pages carry different Kadence presets (`xl` and `3xl`) and
   the air should be the same on both.

   The air is the PADDING, not what is left over after a min-height. With a tall
   floor the band is a fixed box and the air is whatever the text does not use,
   which is why the first attempt gave 50px on one page and 97px on the other for
   the same declared value. The floor is now low enough that content sets the
   height, and the padding sets the air. */
body.larossa .lr-hero-photo { min-height: 300px; }

body.larossa .lr-hero-photo > .kt-row-column-wrap {
  padding-top: clamp(36px, 3.6vw, 52px);
  padding-bottom: clamp(36px, 3.6vw, 52px);
}

/* THE SCRIM NEVER RENDERED. Root cause found 07-08-2026, and it is neither of
   the two things the previous two increments blamed.

   `display: table` was reaching this pseudo-element from a clearfix rule
   elsewhere in the cascade. An absolutely positioned table box with `inset: 0`
   does not stretch to its containing block: it shrink-wraps its content, and the
   content is an empty string. Measured live before this fix: the ::before box
   reported width 0px, height 0px, with the gradient correctly computed and
   painting across nothing at all.

   So the scrim has been invisible since REL-016 introduced it. That invalidates
   the diagnosis in REL-017, which read the unreadable start page as evidence
   that a flat 0.65 was too weak and replaced it with a directional gradient. It
   was not too weak. It was not there. Both increments were tuning a layer that
   was never painted.

   Werkwijzeregel voor CAP-0009: when a declared visual layer has no effect,
   measure the pseudo-element's own box before changing its values. A rule can be
   fully computed and still occupy nothing.

   The values below are measured against the actual cropped region. Both heroes
   carry blown highlights inside the text block: sampling the covered crop at the
   real element size gives a maximum luminance of 0.989 (media 800) and 0.995
   (media 761), with the 99th percentile at 0.71 and 0.84. Against a pure white
   pixel, white text at L=0.94 needs the ground at L<=0.17 for AA, which #1A1210
   reaches at alpha 0.613. The gradient therefore never drops below 0.66, which
   is where the photograph stops being decoration and starts being a ground.

   Directional is still right, because the text sits left of centre and the
   photograph should open up away from it. What changed is that the open end is
   now 0.66 instead of 0.22. Worst case at the open end: 5.26:1. At the dense
   end: 10.7:1. */
body.larossa .lr-hero-photo::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    100deg,
    rgba(26, 18, 16, 0.88) 0%,
    rgba(26, 18, 16, 0.86) 42%,
    rgba(26, 18, 16, 0.78) 72%,
    rgba(26, 18, 16, 0.66) 100%
  );
}

/* --- Why the headline stays LEFT (REL-020) ------------------------------------
   The owner asked for two things on 07-08-2026: a word of the headline in the
   red accent, and possibly the whole hero centred. Measured, those two are
   mutually exclusive, and the arithmetic is worth keeping because it will be
   asked again.

   White text needs the scrim at alpha 0.61 to clear AA against the brightest
   pixel in the text region. `--lr-accent-on-dark` needs 0.909 and `--lr-accent`
   needs 1.000, i.e. a scrim so dense the photograph is gone. Large text is
   judged at 3:1 rather than 4.5:1, which helps, but not enough to reach the
   open end of the band.

   The directional gradient already solves it: at its dense end it is 0.86, and
   at 0.86 the on-dark accent returns 3.8:1 against a blown white pixel. So the
   accent word is legible exactly where the scrim is dense, which is the LEFT.
   Centring the text would move it out over the open end, where the same word
   drops to about 2.3:1.

   The dense end was widened from 30 to 42 percent for this: the headline runs
   past the old stop, and the accent word needs the floor under all of it. */

/* Kadence nests the row content two levels deep; everything visible has to clear
   the scrim. */
body.larossa .lr-hero-photo > .kt-row-column-wrap,
body.larossa .lr-hero-photo .wp-block-kadence-column {
  position: relative;
  z-index: 1;
}

/* 40rem, not 34. The subtitle on /start-here/ is 72 characters and measures
   about 583px in Lora at 17px, so at 34rem (544px) it broke to two lines for the
   sake of 40px. The headline keeps its own 15ch cap, so widening the column
   changes the standfirst and nothing else. */
body.larossa .lr-hero-photo .kt-inside-inner-col {
  max-width: 40rem;
  margin-left: 0;
  text-align: left;
}

/* `.entry-content` and `.kt-inside-inner-col` are here for specificity, not for
   scope. The homepage section further up carries
   `body.larossa.home .entry-content h1 { color: var(--lr-ink) }` at (0,3,2),
   which beat a plain `.lr-hero-photo h1` at (0,2,2) and painted the headline in
   dark charcoal on a dark scrimmed photograph. Confirmed by dumping every rule
   that matches the element rather than by reading the file. */
body.larossa .entry-content .lr-hero-photo .kt-inside-inner-col h1 {
  color: #FBF9F5;
  font-family: var(--lr-display);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.022em;
  max-width: none;
  margin: 0 0 0.45em;
  text-wrap: balance;
}

/* The 15ch cap is gone and the COLUMN does the capping instead, at 596px. That
   is not a loosening: measured at 56px, "Bologna, and only Bologna." needs 651px
   and still breaks to two lines, while "Plan your Bologna trip" needs 538px and
   now fits on one, which is what the owner asked for. The cap was 526.68px and
   was losing that line by twelve pixels.

   Where an author sets an explicit `<br>`, the break is a decision and the
   measure must not fight it. */

/* #A8321E reaches only 2.39:1 on a dark ground and fails AA. The on-dark tone
   exists for exactly this. */
body.larossa .lr-hero-photo h1 .lr-em,
body.larossa .lr-hero-photo h1 mark { color: var(--lr-accent-on-dark); background: none; }

body.larossa .lr-hero-photo p {
  color: rgba(251, 249, 245, 0.88);
  font-family: var(--lr-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: none;
  margin: 0 0 var(--lr-md);
}

body.larossa .lr-hero-photo .wp-block-button__link,
body.larossa .lr-hero-photo .kb-button {
  background: var(--lr-accent);
  color: #FFFFFF;
  border-radius: var(--lr-radius);
}

body.larossa .lr-hero-photo .wp-block-button__link:hover { background: var(--lr-accent-deep); }

/* --- The statement, now a full-bleed quote band (REL-019) ---------------------
   Third form for this block in three increments, and the reason is worth keeping.
   REL-017 introduced it as prose on the bare ground because the homepage had no
   change of register. REL-018 centred it. It still read as a paragraph that
   happened to be large, and the owner asked for it on a photograph.

   It also moved: it now sits AFTER the guides rather than before them. A claim
   about what the brand is lands better once the reader has seen what the brand
   has than as an assertion made before any evidence.

   Same declared exception as the hero, same conditions, and the same arithmetic
   done again for a different geometry. The text is CENTRED here, which the hero
   rule forbids for a hero and which is why this is a separate component rather
   than a second `.lr-hero-photo`: a centred line crosses the whole width, so a
   directional scrim is wrong and the scrim must be flat.

   Media 780 was chosen by measurement, not by eye. Ten candidates were sampled
   on the cropped band over the middle 70 percent by 60 percent: it is the only
   one with NO blown highlight there (maximum luminance 0.817 against 0.99 or
   1.00 for the other nine, mean 0.156). That lets the scrim stay at 0.62 while
   the photograph still reads. */

body.larossa .lr-quote-photo {
  min-height: clamp(280px, 26vw, 360px);
  background-position: 50% 45%;
  margin-bottom: var(--lr-entry-gap, clamp(40px, 6vw, 72px));
}

/* Flat, because the line is centred and crosses the full width. 0.62 is the
   measured requirement plus a margin: the brightest pixel in the text band needs
   0.57 to clear AA. Verified on the composited result: worst pixel 5.2:1, mean
   10.7:1. */
body.larossa .lr-quote-photo::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(26, 18, 16, 0.62);
}

body.larossa .lr-quote-photo > .kt-row-column-wrap,
body.larossa .lr-quote-photo .wp-block-kadence-column {
  position: relative;
  z-index: 1;
}

body.larossa .lr-quote-photo .kt-inside-inner-col {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

body.larossa .entry-content .lr-quote-photo .kt-inside-inner-col .lr-statement__line {
  font-family: var(--lr-display);
  font-size: clamp(1.625rem, 1rem + 2.7vw, 2.625rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FBF9F5;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* The accent fails on a dark ground; the on-dark tone exists for this. */
body.larossa .lr-quote-photo .lr-statement__line em {
  font-style: normal;
  color: var(--lr-accent-on-dark);
}

/* --- The routing grid (REL-018) -----------------------------------------------
   Replaces the lead-plus-two arrangement of REL-016. The owner's brief was for
   blocks that send a reader to the right page, so the shape follows the job: six
   equal tiles, three abreast, each one a real decision a Bologna trip turns on.
   An asymmetric lead card says "read this one"; a grid of six says "here is the
   whole map", which is what an entry page owes a reader who has just arrived.

   Commercially ordered, not alphabetically: the money page sits first
   (`/where-to-stay-bologna/`, the only page with a dependent revenue line), then
   food, then the pages that carry the traffic.

   The same component serves /start-here/ for the essential guides, which is why
   it is not named after the homepage. */

body.larossa .entry-content .lr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.8vw, 40px) clamp(20px, 2.4vw, 32px);
  margin-bottom: var(--lr-entry-gap);
}

/* The tablet band is declared rather than left to the phone rule. Three abreast
   inside a 750px container gives 230px tiles, at which the two-line titles start
   breaking to three and the row stops scanning. */
@media (min-width: 782px) and (max-width: 1024px) {
  body.larossa .entry-content .lr-grid { grid-template-columns: 1fr 1fr; }
}

/* The margin is zeroed, not left to WordPress. Gutenberg gives every group child
   except the last a 32px block margin, and inside a grid that margin is part of
   the item's margin box: with `align-items: stretch` the ROW is sized to the
   tallest margin box, so the last item painted 32px taller than its neighbours
   while every one of them "filled" the row. Measured on the day cards, where a
   border makes it visible: 257, 257, 289.

   Grid spacing is the `gap` and nothing else. */
body.larossa .entry-content .lr-card {
  display: block;
  margin: 0;
  text-decoration: none !important;
  color: inherit;
}

body.larossa .entry-content .lr-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--lr-sm);
  transition: transform 320ms ease;
}

/* The radius and the clip live on the figure, not the image, so the image can be
   scaled on hover without its corners escaping the frame. */
body.larossa .entry-content .lr-card figure.wp-block-image {
  overflow: hidden;
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .lr-card:hover img { transform: scale(1.035); }

body.larossa .entry-content .lr-card__kicker {
  display: block;
  font-family: var(--lr-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-accent);
  margin-bottom: 4px;
}

body.larossa .entry-content .lr-card__title {
  display: block;
  font-family: var(--lr-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lr-ink);
  margin-bottom: 4px;
}

body.larossa .entry-content .lr-card__why {
  display: block;
  font-family: var(--lr-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--lr-muted);
}

/* The card is a group, not an anchor: the title carries the link so the block
   stays editable in Gutenberg. core/image renders a <figure>, which brings its
   own margin. */
body.larossa .entry-content .lr-card figure { margin: 0 0 var(--lr-sm); }

/* A linked core/image wraps the <img> in an inline <a>. An inline box shrinks to
   its content, and LiteSpeed's lazy placeholder is a 1x1 gif, so the anchor
   measured 1px and `width: 100%` on the image resolved against that: every card
   image rendered one pixel wide. It would have been broken with the real image
   too, just less obviously. */
body.larossa .entry-content .lr-card figure a { display: block; }

body.larossa .entry-content .lr-card__title a {
  color: var(--lr-ink) !important;
  text-decoration: none !important;
}

body.larossa .entry-content .lr-card__title a:hover { color: var(--lr-accent) !important; }

/* --- Wordmark tagline (REL-016) ---------------------------------------------- */

/* The tagline lives in the footer only. It was in the header too and read as
   clutter: the header is a navigation bar, not a place for a strapline, and at
   375px it came within 2px of the menu button. */
body.larossa .site-header .lr-wordmark-tag,
body.larossa .kadence-header-main .lr-wordmark-tag { display: none; }

body.larossa .lr-wordmark-tag {
  display: block;
  font-family: var(--lr-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lr-muted);
  white-space: nowrap;
}

/* The footer lockup. Corrected 07-08-2026: the tagline was rendering BESIDE the
   wordmark, not under it. The base rule above sets `display: block`, and this
   rule overrode it back to `inline-block`, so inside an inline-block `.lr-wordmark`
   it simply flowed on after "Bites" and the hairline read as a rule beside the
   mark. Measured before: the tagline box started at x=576 while the wordmark
   ended at x=575.

   `display: block` puts it underneath. The wordmark span then stretches to the
   wider of the two children, which is the tagline, so it needs `text-align:
   center` of its own or "BolognaBites" hangs left inside its own box.

   The rule is a short centred pseudo-element rather than a `border-top`: a
   border spans the full 265px of the tagline and reads as a line beside a
   150px mark. 40px centred reads as a lockup. */
body.larossa .site-footer .lr-wordmark {
  display: block;
  text-align: center;
}

body.larossa .site-footer .lr-wordmark-tag {
  display: block;
  color: rgba(251, 249, 245, 0.45);
  margin-top: 16px;
  padding-top: 16px;
  position: relative;
}

body.larossa .site-footer .lr-wordmark-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: rgba(251, 249, 245, 0.22);
}

/* The gap under the lockup carries the separation from the footer menu, which
   sits directly below it. 20px read as the tagline belonging to the menu rather
   than to the mark; 48px, measured as 52px to the menu, read as a hole in the
   middle of the footer. 24px keeps the lockup its own object without the gap
   becoming the loudest thing in the band. */
body.larossa .lr-footer-brand { margin-bottom: 24px; }

/* --- Entry pages: the homepage and /start-here/ ---------------------------------
   REL-010. Both carry a journey role from ARC-004 and both failed the same way:
   a flat list of equally weighted links and no named next step. These components
   exist to make one route obviously primary and the rest obviously secondary.

   Everything below is scoped to .lr-entry, a class carried by the page content
   itself, so no other template can pick it up by accident. */

body.larossa .entry-content .lr-entry {
  --lr-entry-gap: clamp(40px, 6vw, 72px);
}

/* The measure rule caps direct children of .entry-content at 35rem. These
   components are laid out and set their own inner measure, so they opt out. */
/* Gutenberg wraps every core/group's children in .wp-block-group__inner-container.
   The class we set lands on the OUTER element, so a grid declared there has
   exactly one grid item and every child selector misses the real content.

   Measured live on 07-08-2026, before this rule: .lr-hero reported two columns
   and childCount 1, with the image stacked underneath the text inside column one.
   .lr-facts reported three columns and one item. Every component failed the same
   way, and none of it is visible in the block spec, the saved markup or the
   rendered text: only the box tree shows it.

   display: contents removes the wrapper from the box tree, so the real children
   become grid items. It does not touch the DOM, which is why the child selectors
   below still have to step through the wrapper.

   Werkwijzeregel voor CAP-0009: a class set on a core/group lands one element
   above the content. Never declare a grid on it without checking childCount. */
body.larossa .entry-content :is(
  .lr-entry, .lr-facts, .lr-next, .lr-next__body,
  .lr-grid, .lr-card,
  .lr-days, .lr-day,
  .lr-about, .lr-about__body
) > .wp-block-group__inner-container {
  display: contents;
}

body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > * { max-width: none; }

/* The last block on the page drops its bottom margin. Measured after setting
   `.content-area` margin-bottom to 0: still 104px of nothing before the footer,
   made of the last block's own 72px plus 32px of wrapper padding. Zeroing the
   margin leaves 32px plus the footer's own 30px of top padding, so the dark band
   arrives about 62px after the content instead of 152px. */
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0;
}

/* Running text that is a direct child of the page, rather than part of a laid
   out component, keeps the site measure. Without this the "why trust" copy
   would run the full container width, which is the slop tell the measure rule
   exists to prevent. */
/* Lists are running text too. The site rule at the top of this file puts p, ul,
   ol and blockquote on the measure together; .lr-entry restored it for p only,
   so a prose page inside this wrapper rendered paragraphs at 608px and lists at
   the full 1153px. Measured on /about/ 30-08-2026, the only page that uses
   .lr-entry for plain prose rather than as a shell around components.

   Same class of bug as the .lr-article__body repetition noted above: the measure
   silently stops applying one level down. Third time; hence this comment. */
/* ul and ol are scoped to .wp-block-list for the same reason as the site rule above:
   a Kadence posts grid is a ul. REL-058 gave it the reading measure of 608px on the
   home page - the one page that uses .lr-entry as a shell around components - so three
   cards were squeezed into a text column while the rule one line up (direct children,
   max-width: none) had correctly exempted exactly this case.

   Fourth time this measure has silently applied one level too far; the comment above
   already reads "third time". p and blockquote stay unscoped: neither is a component. */
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > p,
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > ul.wp-block-list,
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > ol.wp-block-list,
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > blockquote {
  max-width: var(--lr-measure);
}

/* A prose page opts in to a wider measure. .lr-entry was built as a shell around
   components, which fill the width themselves; /about/ is the first page to put
   plain running text inside it, and there the site measure of 38rem left a 608px
   column under a 1280px full-bleed hero with nothing beside it for the whole
   length of the page.

   46rem on the owner's instruction of 30-08-2026, after 38rem was judged too
   narrow here. It is not a free choice: measured in Lora at 17px the average
   character is 7.75px, so this moves a line from 78 to 95 characters. That is
   above the 45-75 usually called ideal and at the top of what stays readable.
   The value is reused rather than invented - .lr-quote-photo already uses 46rem.

   Overriding the variable rather than the rule means every measure inside this
   subtree moves together, so p, ul, ol and blockquote cannot drift apart again.
   Tuning is this one value. Headings are unaffected: they carry their own 32ch
   cap and are meant to run shorter than body text. */
body.larossa .entry-content .lr-entry.lr-prose { --lr-measure: 46rem; }

/* The standfirst under a section heading is the exception, on the owner's
   instruction of 07-08-2026. These are one-sentence decks, not running text: at
   38rem they broke to two lines for the sake of a dozen characters, and a deck
   that wraps reads as a paragraph. The longest of them is 101 characters, about
   820px in Lora at 17px, so it fits the 1153px column on a desktop and wraps
   naturally below that. Body copy keeps the measure. */
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > p.lr-lead {
  max-width: none;
  color: var(--lr-muted);
}

/* The first block under a full-bleed band takes a smaller gap than a section
   break. It is not separating two sections; it is the page starting. Measured on
   /start-here/: 72px before, then 0 when the margin was simply zeroed, which put
   the heading hard against the photograph. 44px is the middle and it is declared
   rather than inherited. */
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > :first-child {
  margin-top: clamp(32px, 3.4vw, 44px);
}

/* Section headings inside these pages drop the hairline rule that articles use.
   On a page built out of banded components the rule doubles up with the band
   edges and reads as noise. */
/* A section heading is a DIRECT child of the page container. Anything deeper is a
   component's own heading and sets its own spacing.

   REL-021 fixed this with `:not(.entry-title)`, and that was wrong in a way worth
   recording. `:not()` takes the specificity of its argument, so adding a class
   inside it lifted this rule from (0,3,2) to (0,4,2) — above
   `.lr-about h2 { margin-top: 0 }` and `.lr-next h2 { margin-top: 0 }`, which are
   both (0,3,2). Two components silently gained 72px of top margin, which is
   exactly the misalignment and the extra height the owner reported next.

   The child combinator says what was meant all along and needs no exception
   list: card titles, `.lr-about` and `.lr-next` are all deeper than one level and
   are simply not matched.

   Werkwijzeregel voor CAP-0009: `:not(.foo)` is not free. It raises specificity
   by a class, and a rule you were relying on to lose may start winning. */
body.larossa .entry-content .lr-entry > .wp-block-group__inner-container > h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--lr-entry-gap);
  max-width: 32ch;
}

/* The split hero of REL-010 (.lr-hero, .lr-hero__text, .lr-hero__lead,
   .lr-hero__media) and the asymmetric picks band (.lr-picks, .lr-picks__intro)
   were removed on 07-08-2026. REL-016 replaced both with the photographic hero
   and the card grid, and a database scan across every published post confirmed
   the classes appear in no content. Dead rules in this file are not neutral:
   four of the six defects in the last three increments were a live rule quietly
   outweighing a new one, and the more of them there are the likelier that is. */

body.larossa .entry-content .lr-entry h1 {
  font-family: var(--lr-display);
  font-size: clamp(2.125rem, 1.45rem + 2.9vw, 3.25rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--lr-ink);
  margin: 0 0 0.5em;
  max-width: 14ch;
}

/* One word of the headline in the accent. Same family, same weight: the colour
   step carries the emphasis, not a second typeface. */
body.larossa .entry-content .lr-entry h1 .lr-em { color: var(--lr-accent); }

/* LiteSpeed swaps the real src for a 1x1 GIF until the image scrolls into view.
   That gif's intrinsic ratio is 1:1 and it beats the width/height attributes, so
   an unconstrained figure reserves a square box and collapses to the real ratio
   on load. Measured on /start-here/: 1153 by 1153 for a 2560 by 1701 source.

   These are the first in-content images the site has ever carried (DESIGN-001
   found zero sitewide), which is why no earlier increment hit it. Declaring the
   ratio reserves the correct box up front and removes the shift. */
body.larossa .entry-content .lr-entry figure.wp-block-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  height: auto;
}

/* --- Masthead facts. Three plain statements, no cards, no icons. -------------
   Moved down the homepage on 07-08-2026: they are evidence for the "why trust"
   claim, and reading them before that claim exists made them three orphan
   numbers between the hero and the guides. They now sit inside `.lr-about`,
   which is why the hairlines below invert on that ground. */

body.larossa .entry-content .lr-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--lr-hairline);
  border-bottom: 1px solid var(--lr-hairline);
  margin: var(--lr-entry-gap) 0;
}

/* The inner-container path is listed alongside the direct one throughout this
   component: display: contents flattens the BOX tree, not the DOM, so a child
   combinator still has to walk through the wrapper. */
body.larossa .entry-content .lr-facts > .wp-block-group__inner-container > p,
body.larossa .entry-content .lr-facts > p {
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--lr-muted);
  margin: 0;
  padding: var(--lr-md) var(--lr-md) var(--lr-md) 0;
  border-left: 1px solid var(--lr-hairline);
  padding-left: var(--lr-md);
}

body.larossa .entry-content .lr-facts > .wp-block-group__inner-container > p:first-child,
body.larossa .entry-content .lr-facts > p:first-child {
  border-left: 0;
  padding-left: 0;
}

body.larossa .entry-content .lr-facts strong {
  display: block;
  font-weight: 600;
  color: var(--lr-ink);
}

/* --- The day-count decision, /start-here/ (REL-018) ---------------------------
   Replaces the full-width route rows of REL-010. The rows worked and the owner
   said so; what he asked for was a better arrangement, and the row form had a
   real weakness behind the taste question. A stack of three rows is read in
   order, top to bottom, which suits a ranked list. This is not a ranked list: it
   is one question with three equal answers, and only the reader knows which one
   applies. Three cards side by side put them at the same weight and let the
   reader pick rather than work down.

   The number stays the loudest thing on the page. It is the whole decision, and
   ARC-004 puts /start-here/ in the Planning role with exactly one decision to
   support. */

body.larossa .entry-content .lr-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-bottom: var(--lr-entry-gap);
}

body.larossa .entry-content .lr-day {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius);
  padding: clamp(22px, 2.4vw, 32px);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body.larossa .entry-content .lr-day:hover {
  border-color: var(--lr-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(42, 31, 28, 0.09);
}

body.larossa .entry-content .lr-day__n {
  font-family: var(--lr-display);
  font-size: clamp(3rem, 1.9rem + 4.2vw, 4.5rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--lr-accent);
  margin: 0 0 var(--lr-sm);
}

/* The word under the number carries the unit, so the number itself never has to
   read as "1 day" on its own. */
body.larossa .entry-content .lr-day__unit {
  display: block;
  font-family: var(--lr-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lr-faint);
  margin-top: var(--lr-xs);
}

body.larossa .entry-content .lr-day__body { margin: 0; }

body.larossa .entry-content .lr-day__body a {
  font-family: var(--lr-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--lr-ink) !important;
  text-decoration: none !important;
  display: inline-block;
  margin-bottom: 6px;
}

/* The whole card is the target, not just the four words of the title. The
   anchor keeps the real href for assistive technology and search engines; this
   stretches its hit area over the card. */
body.larossa .entry-content .lr-day__body a::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.larossa .entry-content .lr-day { position: relative; }

body.larossa .entry-content .lr-day:hover .lr-day__body a { color: var(--lr-accent) !important; }

body.larossa .entry-content .lr-day__body .lr-day__why {
  display: block;
  font-family: var(--lr-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--lr-muted);
  font-weight: 400;
}

/* --- The trust band (REL-018, rebuilt REL-019) --------------------------------
   Shipped on the ink ground in REL-018 and the owner rejected it on two counts:
   the dark treatment, and that it did not read as one thing because the right
   half was empty under a 58ch paragraph.

   Both are the same fault. The band was a stack in a box, so its width was
   decided by the longest paragraph and everything to the right of that was dead.
   It is now a two-column lockup — the claim left, the evidence right — which
   fills the width because the content fills it, not because a background colour
   covers it.

   Light, because the page already has two dark bands (the hero and the quote)
   and a third turns a rhythm into a habit. The register change now comes from
   the surface and the rule, not from inverting the palette. */

body.larossa .entry-content .lr-about {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 3.6vw, 56px);
  align-items: start;
  background: var(--lr-surface);
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-radius);
  padding: clamp(26px, 3vw, 40px);
  margin: var(--lr-entry-gap) 0;
  box-shadow: 0 1px 2px rgba(42, 31, 28, 0.06);
}

body.larossa .entry-content .lr-about h2 {
  margin-top: 0;
  margin-bottom: 0.55em;
  padding-bottom: 0.45em;
  max-width: none;
  position: relative;
}

/* A short accent rule under the heading rather than a full border. The block was
   correct and, in the owner's word, dull: the arrangement earns its keep and the
   surface is right, so the craft goes into two small marks instead of a redesign.
   This is the first, and the accent on the fact labels is the second. */
body.larossa .entry-content .lr-about h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--lr-accent);
}

body.larossa .entry-content .lr-about p {
  max-width: none;
  margin-bottom: 0;
}

/* Three abreast becomes three stacked, because this is a column now and not a
   band. The horizontal rules that separated them turn into horizontal ones. */
body.larossa .entry-content .lr-about .lr-facts {
  display: block;
  border: 0;
  margin: 0;
}

body.larossa .entry-content .lr-about .lr-facts > .wp-block-group__inner-container > p,
body.larossa .entry-content .lr-about .lr-facts > p {
  max-width: none;
  padding: var(--lr-sm) 0;
  border-left: 0;
  border-top: 1px solid var(--lr-hairline);
}

body.larossa .entry-content .lr-about .lr-facts > .wp-block-group__inner-container > p:first-child,
body.larossa .entry-content .lr-about .lr-facts > p:first-child {
  border-top: 0;
  padding-top: 0;
}

body.larossa .entry-content .lr-about .lr-facts > .wp-block-group__inner-container > p:last-child,
body.larossa .entry-content .lr-about .lr-facts > p:last-child { padding-bottom: 0; }

/* The label takes the accent and the label case of a kicker. `#A8321E` on the
   white surface returns 6.7:1, so this is colour that carries meaning rather
   than colour that decorates: the three labels are now the thing the eye lands
   on and the sentences under them are plainly subordinate. */
body.larossa .entry-content .lr-about .lr-facts strong {
  color: var(--lr-accent);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* --- The named next step. One block, one button, nothing competing. ---------
   Deliberately NOT the affiliate treatment: the 3px accent left rule stays
   reserved for commercial blocks so that signature keeps meaning one thing. */

/* Two columns since REL-019, on the owner's instruction: the action sits to the
   RIGHT of the text rather than under it. Under it, the block was a tall box with
   an empty right half — the same fault the trust band had. */
/* The accent tint on BOTH variants since REL-022, on the owner's instruction. This
   is the last thing on the page and its job is to keep the reader on the site, so
   it is the one block that should not look like the rest of the page. A white box
   on a bone ground is a whisper. */
body.larossa .entry-content .lr-next {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  background: var(--lr-accent-tint);
  border: 0;
  border-radius: var(--lr-radius);
  padding: clamp(22px, 2.6vw, 32px);
  margin: var(--lr-entry-gap) 0 0;
  box-shadow: none;
}

body.larossa .entry-content .lr-next h2 { margin-top: 0; margin-bottom: 0.4em; max-width: none; }

body.larossa .entry-content .lr-next p {
  max-width: none;
  margin-bottom: 0;
}

body.larossa .entry-content .lr-next .wp-block-buttons {
  margin-bottom: 0;
  justify-content: flex-end;
}

/* The button column shrinks to the button. Measured before: a 470px column with
   a 339px button in it, so the control floated in 131px of nothing and read, in
   the owner's word, lost. `auto` puts it directly beside the sentence it acts
   on, and the accent tint binds the two into one object instead of a box with
   something in the corner.

   Scoped with `:has()` because the same component carries a picture on
   /start-here/, and a picture does need a column of its own. */
body.larossa .entry-content .lr-next:has(.wp-block-buttons) {
  grid-template-columns: 1fr auto;
}

/* On /start-here/ the right column is a picture of the destination rather than a
   button. It is the same `.lr-card` the grids use, so a reader who has just
   scanned six of them recognises the seventh without being told.

   340px, not the 470px it started at. At full column width the picture read as
   the subject of the block rather than as its destination, and it pushed the
   block to 380px tall for two sentences of text. */
/* Top-aligned, not centred. The picture is taller than the two sentences beside
   it, so centring left dead air above and below the text and the block read as
   two things sharing a box. Level tops read as one. */
body.larossa .entry-content .lr-next:has(.lr-card) {
  grid-template-columns: 1fr 320px;
  align-items: start;
}

body.larossa .entry-content .lr-next .lr-card { margin: 0; }

/* 16:9, not 3:2. The text beside it is two sentences, about 153px; at 3:2 the
   card came to 293px and left 140px of nothing under the paragraph. The wider
   crop brings the two columns to within about 80px of each other, which reads as
   a pair rather than as a picture with a caption next to it.

   `figure.wp-block-image` is in the selector for specificity, not for scope. The
   generic entry-page figure rule is `.lr-entry figure.wp-block-image img` at
   (0,4,3); without the figure in the path this lands at (0,4,2) and loses, which
   it did on the first attempt — measured 320x213, still 3:2. */
body.larossa .entry-content .lr-next .lr-card figure.wp-block-image img {
  aspect-ratio: 16 / 9;
}

/* `.lr-more`, the two columns of plain secondary links, was removed on
   07-08-2026. Those six links are now six tiles in `.lr-grid` with the featured
   photograph of each guide, which is what the owner asked for and also the
   better answer: they were the only place on /start-here/ where a real guide was
   reduced to eight words of link text. */

/* --- Latest guides: the category label (REL-020) ------------------------------
   Turned back on at the owner's request, and it needed NO new CSS. The rule
   `.loop-entry .entry-taxonomies a` from the sitewide roll-out already sets it to
   11px uppercase Bricolage in the accent, which is exactly the kicker on the
   tiles above, so the label matched the rest of the page the moment the block
   attribute flipped.

   A block of `.kb-posts` rules was written here first and then deleted: measured
   live, it was byte-for-byte the same declarations the existing rule already
   applied. Recorded because the reason it looked necessary was a bad
   measurement, not a real gap — see the note in REL-020 section 4. */

/* --- Latest guides as tiles (REL-021) -----------------------------------------
   The owner asked for this block to look like the routing grid above it, and it
   was three separate things away from that: the boxed card, the internal
   padding, and the 72px the section-heading rule was putting on every title.

   The last of those is fixed at the rule itself, further up. What is left here
   is to take the box off and close the gaps, so the same photograph, kicker and
   title arrangement appears twice on the page rather than two treatments of the
   same idea.

   Scoped to `.lr-entry`, so the archives and the blog index — which use the same
   loop markup — keep their boxed cards. */

body.larossa .entry-content .lr-entry .kb-posts {
  gap: clamp(24px, 2.8vw, 40px) clamp(20px, 2.4vw, 32px);
}

body.larossa .entry-content .lr-entry .kb-posts article.loop-entry {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.larossa .entry-content .lr-entry .kb-posts .post-thumbnail {
  border-radius: var(--lr-radius);
  overflow: hidden;
  margin-bottom: var(--lr-sm);
}

body.larossa .entry-content .lr-entry .kb-posts .post-thumbnail img {
  transition: transform 320ms ease;
}

body.larossa .entry-content .lr-entry .kb-posts article:hover .post-thumbnail img {
  transform: scale(1.035);
}

body.larossa .entry-content .lr-entry .kb-posts .entry-content-wrap { padding: 0; }

body.larossa .entry-content .lr-entry .kb-posts .entry-header { margin-bottom: 0; }

/* The 48px accent mark under the header belongs to an archive card, where it
   separates one entry from the next in a long list. Three tiles in a row do not
   need separating, and the grid above carries no such mark. */
body.larossa .entry-content .lr-entry .kb-posts .entry-header::after { display: none; }

body.larossa .entry-content .lr-entry .kb-posts .entry-taxonomies { margin-bottom: 4px; }

/* The hairline over the title is the archive treatment again: it separates the
   category from the headline in a list. On a tile the kicker and the title are one
   unit, and the grid above draws no line between them. */
body.larossa .entry-content .lr-entry .kb-posts .entry-title {
  font-family: var(--lr-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  max-width: none;
  border-top: 0;
  padding-top: 0;
}

body.larossa .entry-content .lr-entry .kb-posts .entry-title a {
  color: var(--lr-ink);
  text-decoration: none;
}

body.larossa .entry-content .lr-entry .kb-posts article:hover .entry-title a {
  color: var(--lr-accent);
}

/* --- Footer ------------------------------------------------------------------ */

/* Kadence paints the footer on the row container, not on <footer> itself, so a
   rule on .site-footer alone renders transparent. Both are set here. */
body.larossa .site-footer,
body.larossa .site-footer .site-footer-row-container-inner {
  background: var(--lr-ink);
  border-top: 0;
}

body.larossa .site-footer,
body.larossa .site-footer p,
body.larossa .site-footer a {
  color: rgba(251, 249, 245, 0.62);
  font-family: var(--lr-display);
  font-size: 0.8125rem;
}

body.larossa .site-footer a:hover { color: rgba(251, 249, 245, 0.95); }

/* --- Disclosure note ----------------------------------------------------------
   The transparency note carries hardcoded inline styles in the post content
   (#f9f9f9 ground, #cccccc rule, #666 text), all cool greys off this palette.
   Inline styles can only be beaten with !important, so this is the one place
   the file uses it. Stopgap: the note should become a real block in a content
   increment, after which these five lines can go. */

body.larossa .entry-content > div[style] {
  background-color: var(--lr-surface) !important;
  border-left: 3px solid var(--lr-support) !important;
  color: var(--lr-muted) !important;
  font-family: var(--lr-display) !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  padding: var(--lr-md) !important;
  margin-bottom: var(--lr-lg) !important;
  border-radius: var(--lr-radius);
}

body.larossa .entry-content > div[style] strong { color: var(--lr-ink) !important; }

/* --- Global polish ------------------------------------------------------------ */

body.larossa a:focus-visible,
body.larossa button:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 3px;
}

body.larossa ::selection {
  background: rgba(168, 50, 30, 0.15);
  color: var(--lr-ink);
}

body.larossa ::-webkit-scrollbar { width: 5px; }
body.larossa ::-webkit-scrollbar-track { background: var(--lr-bg); }
body.larossa ::-webkit-scrollbar-thumb {
  background: rgba(168, 50, 30, 0.28);
  border-radius: var(--lr-radius);
}
body.larossa ::-webkit-scrollbar-thumb:hover { background: var(--lr-accent); }

body.larossa hr,
body.larossa .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--lr-hairline);
  margin: var(--lr-xl) 0;
}

/* The source set scroll-behavior: smooth unconditionally, which overrides a
   reader's reduced-motion preference. Gated here instead. */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.larossa) { scroll-behavior: smooth; }
}

/* --- Mobile collapse, declared explicitly -------------------------------------- */

@media (max-width: 781px) {
  /* The featured band keeps a fixed proportion that works at desktop width and
     fails badly on a phone. Measured at 375px before this rule: the band was
     164px tall, the content card overlapped 74px of it, so 90px of photo was
     visible, and the 2.29 box against a 1.42 source cropped 38% vertically.
     A 4:3 box brings the crop down to about 6% and leaves roughly 207px in
     view, which reads as a hero instead of a strip. */
  body.larossa .article-post-thumbnail,
  body.larossa .article-post-thumbnail img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  body.larossa .article-post-thumbnail img {
    width: 100%;
    object-fit: cover;
    object-position: 50% 45%;
  }

  body.larossa .entry-title { max-width: none; }
  body.larossa .entry-related-title { max-width: none; }
  body.larossa .entry-content h2 { margin-top: 2em; max-width: none; }
  body.larossa .entry-content h3 { max-width: none; }
  body.larossa .entry-content table { font-size: 0.8125rem; }
  body.larossa .entry-content table th,
  body.larossa .entry-content table td { padding: 9px 12px; }

  body.larossa .entry-content .lr-entry h1,
  body.larossa .entry-content .lr-entry h2 { max-width: none; }

  /* Three abreast becomes three stacked rows, separated the same way the band
     separated them horizontally. */
  body.larossa .entry-content .lr-facts { grid-template-columns: 1fr; }

  body.larossa .entry-content .lr-facts > .wp-block-group__inner-container > p,
  body.larossa .entry-content .lr-facts > p {
    border-left: 0;
    padding-left: 0;
    padding-top: var(--lr-sm);
    padding-bottom: var(--lr-sm);
    border-top: 1px solid var(--lr-hairline);
  }

  body.larossa .entry-content .lr-facts > .wp-block-group__inner-container > p:first-child,
  body.larossa .entry-content .lr-facts > p:first-child { border-top: 0; }

  /* Six tiles go to two abreast rather than one. A single column would make the
     grid 3400px tall on a phone and bury the trust band and the latest guides
     below it; 70.5% of sessions are mobile, so that is the majority reading.
     Two abreast keeps the whole map inside two thumb-scrolls. */
  body.larossa .entry-content .lr-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--lr-md) var(--lr-sm);
  }

  body.larossa .entry-content .lr-card__title { font-size: 1rem; }
  body.larossa .entry-content .lr-card__why { font-size: 0.875rem; }

  /* The day cards do go to one column: three of them side by side at 375px
     leaves 105px per card, and the number alone is 48px wide. */
  body.larossa .entry-content .lr-days { grid-template-columns: 1fr; }

  body.larossa .entry-content .lr-day {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--lr-md);
    align-items: center;
    padding: var(--lr-md);
  }

  body.larossa .entry-content .lr-day__n { margin-bottom: 0; }

  /* Both two-column lockups collapse. The action and the picture follow the text
     rather than lead it: on a phone the reader needs to know what is being
     offered before the offer. */
  body.larossa .entry-content .lr-about,
  body.larossa .entry-content .lr-next,
  body.larossa .entry-content .lr-next:has(.wp-block-buttons),
  body.larossa .entry-content .lr-next:has(.lr-card) { grid-template-columns: 1fr; }

  body.larossa .entry-content .lr-about { padding: var(--lr-md); }
  body.larossa .entry-content .lr-next .wp-block-buttons { justify-content: flex-start; }
  body.larossa .entry-content .lr-quote-photo { min-height: 260px; }
  body.larossa .lr-hero-photo .kt-inside-inner-col { max-width: none; }
  body.larossa .lr-wordmark-tag { font-size: 0.625rem; letter-spacing: 0.12em; }

  /* The mobile-only rule that used to sit here is gone: the tagline is now out
     of the header at every width, so hiding it again below 782px said nothing. */
}

@media (prefers-reduced-motion: reduce) {
  body.larossa *,
  body.larossa *::before,
  body.larossa *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  body.larossa article.loop-entry:hover { transform: none; }
}