/* SAMinfo theme — block-level geometry + behavior layer.
   Design tokens live in theme.json (--wp--preset--color--*, font families).
   This file only adds what theme.json can't express:
   scroll carousel, releasing sidebar, dept badges, parallax ad,
   distinct captions, responsive/mobile, brand-guide palette refinements.

   Palette slugs: base / base-2 / base-3 · ink / ink-2 / ink-3 ·
   navy / navy-2 / navy-deep · gold / gold-2 · rule · tag-*.
*/

:root {
  --sam-navy: var(--wp--preset--color--navy);
  --sam-gold: var(--wp--preset--color--gold);
  --sam-rule: var(--wp--preset--color--rule);
  /* Horizontal content gutter. Token lives in theme.json as --wp--custom--gutter:
     clamp(spacing-40 1rem, 5vw, spacing-60 2rem). 5vw (not 2vw) holds the 2rem /
     32px desktop gutter through Liv's minimized-laptop band (~1100–1400) and
     tablet (~768); it only eases toward 1rem below 640px. */
  --sam-gutter: var(--wp--custom--gutter, clamp(var(--wp--preset--spacing--40), 5vw, var(--wp--preset--spacing--60)));
  /* Matches sam-section-label padding-bottom in dept/canvas patterns (~0.75rem;
     0.875rem aligns with measured label box gap below the heading at runtime). */
  --sam-scroll-label-gap: 0.875rem;
}

/* Focus rings are contrast-aware: navy reads on the site's light surfaces;
   yellow reads on the navy bars/footer (style guide: interactive on navy =
   yellow). One system, always visible — never tone-on-tone. */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--navy);
  outline-offset: 2px;
  border-radius: 2px;
}
.sam-utility-bar :focus-visible,
.sam-primary-nav :focus-visible,
.sam-site-footer :focus-visible,
.sam-modal-inner :focus-visible,
.sam-search-panel :focus-visible {
  outline-color: var(--wp--preset--color--yellow);
}
.sam-utility-subscribe:focus-visible,
.sam-drawer-subscribe:focus-visible {
  outline-color: var(--wp--preset--color--navy);
}

/* ── Type-role guards ─────────────────────────────────────────────
   theme.json sets sans headlines / serif body. These keep the role
   intact even where a block omits an explicit family. */
.wp-block-post-title,
.wp-block-query .wp-block-post-title,
.wp-block-heading {
  font-family: var(--wp--preset--font-family--sans);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.wp-block-post-content,
.wp-block-post-content p,
.wp-block-post-excerpt,
.wp-block-post-excerpt p {
  font-family: var(--wp--preset--font-family--serif);
}

/* ── Header: masthead + utility + actions ─────────────────────── */
.sam-header-region { position: relative; }
/* Content gutters — keep the navy/white bars full-bleed but inset their
   content to match the <main> gutters (constrained children center at
   1320px, so without this they sit flush to the viewport edges < 1320). */
.sam-utility-bar,
.sam-site-header,
.sam-primary-nav,
.sam-subnav {
  padding-left: var(--sam-gutter);
  padding-right: var(--sam-gutter);
}
/* Full-width homepage bands. The editable-Page shell (front-page.html) renders
   the homepage through wp:post-content inside a <main> that carries horizontal
   padding — which insets `alignfull` bands to the padded content box instead of
   the viewport. Break out to the viewport so navy/ad surfaces stay edge-to-edge,
   but:
     1. box-sizing:border-box + padding-inline:var(--sam-gutter) keep CONTENT
        on the token even when saved homepage markup still has the old 2vw clamp.
     2. overflow-x:clip on html (below) clips the classic 100vw-vs-scrollbar
        overflow that ate the opposite gutter at mid-desktop widths.
   Media (images/covers/embeds) stay inside the padded content box — they are
   the thing Liv sees flush against a minimized laptop window. */
.sam-main .alignfull {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--sam-gutter) !important;
  padding-right: var(--sam-gutter) !important;
}
.sam-main .wp-block-image.alignfull,
.sam-main .wp-block-cover.alignfull,
.sam-main .wp-block-gallery.alignfull,
.sam-main .wp-block-video.alignfull,
.sam-main .wp-block-embed.alignfull,
.sam-main .wp-block-media-text.alignfull,
.sam-main .sam-image-full.alignfull {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Article alignfull: stay in the padded column — groups, columns, pullquotes,
   and nested media too, not only direct-child media. Beats WP's
   `.wp-container-* > .alignfull` negative margins so content cannot sit flush
   if releasing-sidebar.js is late or off. JS promote() still lifts
   .sam-fullbleed after sidebar release. Parallax mid-ad is not in this list
   (true-viewport takeover in this ship).
   Exclude .sam-parallax-slot and .sam-depts: homepage (front-page.html) also
   renders through .entry-content.wp-block-post-content, and this lock is more
   specific than `.sam-main .alignfull`, so it pinned the Wiegand promo band
   and the Mountain Departments navy band to the padded content box. */
.entry-content.wp-block-post-content .wp-block-image.alignfull,
.entry-content.wp-block-post-content .wp-block-cover.alignfull,
.entry-content.wp-block-post-content .wp-block-gallery.alignfull,
.entry-content.wp-block-post-content .wp-block-video.alignfull,
.entry-content.wp-block-post-content .wp-block-embed.alignfull,
.entry-content.wp-block-post-content .wp-block-media-text.alignfull,
.entry-content.wp-block-post-content .sam-image-full.alignfull,
.entry-content.wp-block-post-content .wp-block-group.alignfull:not(.sam-parallax-slot):not(.sam-depts),
.entry-content.wp-block-post-content .wp-block-columns.alignfull,
.entry-content.wp-block-post-content .wp-block-pullquote.alignfull,
.entry-content.wp-block-post-content .wp-block-quote.alignfull {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.entry-content.wp-block-post-content .alignfull.sam-fullbleed {
  max-width: none;
}
/* Homepage Wiegand / promo band: true viewport, no chrome padding.
   Load-bearing unpin is :not(.sam-parallax-slot) on the article group lock
   above (0,4,0+, 0,5,0 with :not()). This rule is only 0,3,0 — source order
   cannot beat that lock on width/margin. Do not drop the :not() or the slot
   is re-pinned to the padded content box. What this rule does win: padding
   (article lock sets none; beats `.sam-main .alignfull` 0,2,0 !important
   gutter) and, once excluded, width/margin vs `.sam-main .alignfull`. */
.sam-main .alignfull.sam-parallax-slot {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Homepage Mountain Departments: true viewport navy, keep inner gutter.
   Load-bearing unpin is :not(.sam-depts) on the article group lock above.
   This rule is only 0,3,0 — it cannot beat the lock on width/margin. Do not
   drop the :not() or the band is re-pinned to the padded content box.
   Unlike .sam-parallax-slot, do not zero padding: heading/cards stay on the
   1320 / --sam-gutter inset from `.sam-main .alignfull`. */
.sam-main .alignfull.sam-depts {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Canvas / event landings (page-canvas.html): <main> has no inline padding so
   a full-width block can be true full-bleed. Constrained/alignwide children
   then go flush below wideSize (1100) and on mobile. Pad the column; keep
   alignwide inside it (fill the padded column — do not cap at 1320). Any
   top-level alignfull (editor "full width") breaks back out, any block type. */
.sam-canvas-content {
  padding-left: var(--sam-gutter);
  padding-right: var(--sam-gutter);
  box-sizing: border-box;
}
.sam-canvas-content > .alignwide {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sam-canvas-content.entry-content > .alignfull {
  box-sizing: border-box;
  width: calc(100% + 2 * var(--sam-gutter)) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--sam-gutter)) !important;
  margin-right: calc(-1 * var(--sam-gutter)) !important;
}
/* Promoted article color bands: chrome at true viewport (JS g=0). Pad CONTENT
   like homepage .sam-main .alignfull. No !important — inline block padding
   wins, so bands that already gutter do not double-inset. Parallax stays 0. */
.wp-block-post-content .alignfull.sam-fullbleed-band {
  box-sizing: border-box;
  padding-left: var(--sam-gutter);
  padding-right: var(--sam-gutter);
}
.wp-block-post-content .alignfull.sam-fullbleed.sam-article-midad,
.wp-block-post-content .alignfull.sam-fullbleed.sam-parallax-band {
  padding-left: 0;
  padding-right: 0;
}

/* line-height:0 + block anchor collapse the inline line-box around the block
   logo img — without it the figure runs ~10px taller than the img (a font
   descender), top-aligning the logo so it reads with less space above than below
   (most visible in the compact scrolled state). */
.sam-header-bar .sam-logo { flex: 0 0 auto; line-height: 0; }
.sam-header-bar .sam-logo a { display: block; line-height: 0; }
.sam-header-bar .sam-logo img { display: block; }
.sam-masthead-tagline { flex: 1; text-align: center; margin: 0; }

/* Utility items (social + sign-in/newsletter/subscribe) now live in the white
   masthead's right cluster (utility bar collapsed in) — so they read navy. */
.sam-header-right .sam-utility-social { display: flex; gap: 0.55rem; align-items: center; }
.sam-header-right .sam-utility-social a { display: inline-flex; color: var(--wp--preset--color--navy); text-decoration: none; transition: color 140ms ease; }
.sam-header-right .sam-utility-social a:hover { color: var(--wp--preset--color--orange); }
.sam-util-link { color: var(--wp--preset--color--navy); text-decoration: none; cursor: pointer; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color 140ms ease; }
.sam-util-link:hover { color: var(--wp--preset--color--orange); }
/* Subscribe = single top-nav CTA. Style guide: navy w/ white text on the white
   masthead; orange on rollover (orange = actionable, hover-only). */
.sam-utility-subscribe { color: #ffffff !important; background: var(--wp--preset--color--navy); padding: 0.4rem 0.8rem; border-radius: 2px; text-decoration: none; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transition: background 150ms ease; }
.sam-utility-subscribe:hover { background: var(--wp--preset--color--orange); color: #ffffff !important; }

/* Sticky head — the masthead row AND the primary nav pin together as one block,
   so the nav stays in reach on scroll (not just the logo row). The drawer, search
   overlay, and modals are position:fixed siblings OUTSIDE this wrapper, so the
   sticky stacking context here doesn't trap their z-index. */
.sam-sticky-head { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 14px -10px rgba(20,16,63,0.55); }
/* The sticky wrapper's short ancestors (the template-part <header> and
   .sam-header-region) would constrain it into a ~166px scroller; display:contents
   removes those boxes → the wrapper's containing block becomes the tall page and
   it sticks for the whole scroll (DOM/interactivity intact). */
header.wp-block-template-part:has(.sam-header-region),
.sam-header-region { display: contents; }
/* Site Editor: display:contents collapses the region (and recovery UI). Keep a
   real box on canvas so saminfo/header-region is selectable. */
.editor-styles-wrapper .sam-header-region { display: block; }

/* iOS Safari sticky fix. Ollie's mega-menu CSS ships
     body:has(.wp-block-ollie-mega-menu__menu-container.menu-width-full){overflow-x:hidden}
   to suppress horizontal scroll. On iOS WebKit an overflow-x:hidden body becomes
   a scroll CONTAINER, so `position: sticky` descendants pin to that container's
   scrollport instead of the viewport — the masthead un-pins and scrolls away
   mid-page (only on real iOS; Chromium never reproduced it). `overflow-x: clip`
   clips the exact same horizontal overflow WITHOUT establishing a scroll
   container, so the sticky head keeps pinning to the viewport. We reuse Ollie's
   selector but prefix `html` (specificity 0,2,2 > Ollie's 0,2,1) so it wins
   regardless of stylesheet order — the mega-menu container is in the DOM at all
   widths, so the hidden rule applies on mobile too. (Safari <16 lacks `clip` and
   keeps Ollie's hidden — no regression there.) */
html body:has(.wp-block-ollie-mega-menu__menu-container.menu-width-full) { overflow-x: clip; }

/* Kill browser SCROLL ANCHORING on the document. When the sticky masthead
   compacts (~34px shorter), anchoring would yank scrollY DOWN by that delta to
   "hold" the visible content — which dropped scrollY back under the expand
   threshold and ping-ponged the header shrink/grow near the top. Chrome/Firefox
   only (Safari never anchored, so it never looped). overflow-x:clip also
   contains 100vw alignfull breakout (scrollbar width) so it cannot eat the
   side gutter — clip does not create a scroll container, unlike overflow:hidden. */
html { overflow-anchor: none; overflow-x: clip; }

/* Scroll-compaction: once scrolled, the logo and masthead padding ease down to
   reclaim vertical real estate, restoring smoothly on the way back up. The logo
   img + masthead padding are set inline by the blocks, so the scrolled overrides
   use !important to beat those inline values; transitions live on the base
   elements so both directions animate. state.scrolled (view.js) toggles the
   .is-scrolled class on .sam-header-region. */
.sam-site-header { transition: padding-top 280ms cubic-bezier(.2,.6,.2,1), padding-bottom 280ms cubic-bezier(.2,.6,.2,1); }
.sam-header-bar .sam-logo img { transition: width 280ms cubic-bezier(.2,.6,.2,1); }
.sam-header-region.is-scrolled .sam-site-header { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
/* Scrolled logo width is breakpoint-aware (always SMALLER than the base at each
   size) via --sam-logo-scrolled-w, set per media query below. Without this the
   fixed 148px would GROW the already-smaller mobile logo (150/132px) on scroll. */
.sam-header-region.is-scrolled .sam-header-bar .sam-logo img { width: var(--sam-logo-scrolled-w, 148px) !important; }
@media (prefers-reduced-motion: reduce) {
  .sam-site-header, .sam-header-bar .sam-logo img { transition: none; }
}

/* Account for the WordPress admin bar (logged-in users): it's fixed at the top
   (32px desktop / 46px ≤782px) and overlays our fixed/sticky chrome. Offset the
   sticky masthead, drawer, search panel, and modals so nothing hides beneath it. */
.admin-bar .sam-sticky-head { top: 32px; }
.admin-bar .sam-drawer-panel { top: 32px; height: calc(100% - 32px); }
.admin-bar .sam-search-panel { margin-top: 32px; }
.admin-bar .sam-modal { padding-top: calc(1rem + 32px); }
@media (max-width: 782px) {
  .admin-bar .sam-sticky-head { top: 46px; }
  .admin-bar .sam-drawer-panel { top: 46px; height: calc(100% - 46px); }
  .admin-bar .sam-search-panel { margin-top: 46px; }
  .admin-bar .sam-modal { padding-top: calc(1rem + 46px); }
}

.sam-header-right { display: flex; align-items: center; gap: 0.95rem; flex: 0 0 auto; }
/* subtle divider before the search button */
.sam-header-right .sam-search-trigger { margin-left: 0.15rem; }
.sam-subscribe-btn {
  display: inline-flex; align-items: center;
  background: var(--wp--preset--color--navy); color: #fff;
  padding: 0.7rem 1.1rem; border-radius: 2px; text-decoration: none;
  font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; transition: background 150ms ease, color 150ms ease;
}
.sam-subscribe-btn:hover { background: var(--wp--preset--color--orange); color: #ffffff; }
.sam-search-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--rule);
  color: var(--wp--preset--color--navy); cursor: pointer; transition: background 150ms ease, color 150ms ease;
}
.sam-search-trigger:hover { background: var(--wp--preset--color--orange); color: #fff; border-color: var(--wp--preset--color--orange); }

/* ── Primary nav (navy bar) ───────────────────────────────────── */
/* Typography (font, size, tracking, caps) lives in theme.json →
   styles.blocks.core/navigation. Only structural geometry + interaction
   states are here — they can't be expressed in theme.json for the
   core/navigation block. */
.sam-primary-nav .wp-block-navigation a { text-decoration: none; }
.sam-primary-nav .wp-block-navigation-item__content {
  padding: 1rem 1.15rem;
  display: block;
  position: relative;
  transition: background-color 160ms ease, color 160ms ease;
}
/* Resting color for the top-level labels on the navy bar. The nav group carries
   `has-background` (navy) but no paired text color, so the labels default to the
   body's dark ink and read navy-on-navy — invisible until hover flips them to
   #fff. The Ollie Menu Designer migration (f310acf) dropped the color the old
   hand-authored wp:navigation carried. Ollie's own
   `.wp-block-ollie-mega-menu .…__toggle { color: currentColor }` is (0,2,0) and
   ties a plain `.sam-primary-nav .…__content` rule, winning by source order and
   resetting to inherited ink — so we qualify with the `.sam-mega-nav` navigation
   block (0,3,0) to win decisively. `…item__content` exists ONLY on the 6
   top-level toggles here (mega-panel links are plain <a> with their own dark
   colors), so this can't cause white-on-white in the dropdowns. Kept in CSS,
   not block markup, so it survives Menu Designer re-saves. */
.sam-primary-nav .sam-mega-nav .wp-block-navigation-item__content { color: #ffffff; }
.sam-primary-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.sam-primary-nav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
  /* Rollover = orange highlight (client 2026-06: orange on interaction, not the
     lighter-blue cell; underline removed). */
  background: var(--wp--preset--color--orange);
  color: #fff;
}
/* Persistent underline on the section the reader is currently in — yellow
   (interactive accent on navy per the style guide); orange stays hover-only. */
.sam-primary-nav .current-menu-item > .wp-block-navigation-item__content,
.sam-primary-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.sam-primary-nav .wp-block-navigation-item__content[aria-current] {
  box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--yellow);
}
/* Parent-item chevron: snug to the label, dims by default, warms to gold and
   flips when its menu is open — a quiet "there's more here" cue. */
.sam-primary-nav .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.sam-primary-nav .wp-block-navigation-item .wp-block-navigation__submenu-icon {
  margin-left: 0.1rem;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 180ms ease, color 160ms ease;
}
.sam-primary-nav .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon,
.sam-primary-nav .wp-block-navigation-item:focus-within .wp-block-navigation__submenu-icon {
  color: var(--wp--preset--color--gold);
  transform: rotate(180deg);
}

/* ── Sub-nav "beats" rail (header, raw HTML) ──────────────────── */
.sam-subnav-inner { display: flex; align-items: center; gap: 1.25rem; }
.sam-subnav-label { flex: 0 0 auto; border-right: 1px solid var(--wp--preset--color--rule); padding-right: 1.1rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--navy); }
.sam-subnav-links { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.sam-subnav-links::-webkit-scrollbar { display: none; }
.sam-subnav-links a { white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--ink-2); font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 600; }
.sam-subnav-links a:hover { color: var(--wp--preset--color--navy); }
.sam-subnav-hot { color: var(--wp--preset--color--ink) !important; font-weight: 700 !important; }
.sam-subnav-hot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--cyan); margin-right: 0.4rem; vertical-align: middle; }

/* ── Dept sub-beats (department template, block-based) ────────── */
/* Dept sub-beats: not sticky (the masthead is the sticky row) */
.sam-subbeats { position: static; }
.sam-subbeats-links a { text-decoration: none; color: var(--wp--preset--color--ink-2); }
.sam-subbeats-links a:hover { color: var(--wp--preset--color--navy); }
.sam-subbeats-active a { color: var(--wp--preset--color--navy); box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--navy); }
.sam-subbeats-label { border-right: 1px solid var(--wp--preset--color--rule); padding-right: 1.1rem; margin: 0; }
.sam-subbeats-links { overflow-x: auto; scrollbar-width: none; }
.sam-subbeats-links::-webkit-scrollbar { display: none; }

/* ── Search overlay (Interactivity API) ───────────────────────── */
.sam-search-overlay { position: fixed; inset: 0; z-index: 1000; display: none; }
.sam-search-overlay.is-open { display: block; }
.sam-search-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: rgba(20,16,63,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sam-search-panel { position: relative; background: var(--wp--preset--color--base); border-bottom: 4px solid var(--wp--preset--color--navy); max-height: 100vh; overflow-y: auto; animation: sam-slide-down 220ms cubic-bezier(.2,.6,.2,1); }
@keyframes sam-slide-down { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sam-search-panel .inner { max-width: 1320px; margin: 0 auto; padding: 2.25rem 2rem; }
.sam-search-form { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "prefix field close" ". clear ."; gap: 0.35rem 1rem; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--rule); }
.sam-search-form .prefix { grid-area: prefix; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--navy); padding: 0 0.5rem; }
.sam-search-field { grid-area: field; position: relative; display: flex; align-items: center; min-width: 0; }
.sam-search-form .close { grid-area: close; width: 40px; height: 40px; border: 1px solid var(--wp--preset--color--rule); background: transparent; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--ink-2); border-radius: 50%; }
.sam-search-form .close:hover { background: var(--wp--preset--color--ink); color: #fff; border-color: var(--wp--preset--color--ink); }
.sam-search-clear-link { grid-area: clear; justify-self: start; margin: 0.15rem 0 0; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--navy); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease, color 0.16s ease; }
.sam-search-clear-link.is-in { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.sam-search-clear-link:hover { color: var(--wp--preset--color--orange, #d45a1e); }
.sam-search-field-clear { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 1.35rem; line-height: 1; color: var(--wp--preset--color--ink-3); padding: 0 0.15rem; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.92); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, color 0.16s ease; }
.sam-search-field-clear.is-in { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.sam-search-field-clear:hover { color: var(--wp--preset--color--navy); }
@media (prefers-reduced-motion: reduce) { .sam-search-clear-link, .sam-search-field-clear { transition: none; transform: none; } }
/* Selector specificity (0,2,1) must beat Ollie's input:not(...):not(...) rule that
   otherwise forces 13px — and <16px makes iOS zoom on focus. */
.sam-search-overlay input[type="search"] { border: 0; padding: 0.75rem 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.5rem; font-weight: 700; outline: 0; background: transparent; color: var(--wp--preset--color--ink); width: 100%; }
.sam-search-overlay input[type="search"]::-webkit-search-cancel-button,
.sam-search-overlay input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.sam-search-form input::placeholder { color: var(--wp--preset--color--ink-3); font-weight: 500; }
.sam-search-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); max-width: 840px; }
.sam-search-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sam-search-filters .filter-chip { padding: 0.5rem 0.9rem; border: 1px solid var(--wp--preset--color--rule); background: transparent; cursor: pointer; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); border-radius: 2px; transition: background 120ms, color 120ms; }
.sam-search-filters .filter-chip:hover { border-color: var(--wp--preset--color--orange, #d45a1e); color: var(--wp--preset--color--orange, #d45a1e); }
.sam-search-filters .filter-chip.active { background: var(--wp--preset--color--navy); color: #fff; border-color: var(--wp--preset--color--navy); }
.sam-search-filters .filter-chip.active:hover { background: var(--wp--preset--color--orange, #d45a1e); border-color: var(--wp--preset--color--orange, #d45a1e); color: #fff; }
/* Auto-applied (natural-language) filter chips — own full-width row, removable. */
.sam-search-applied { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.sam-applied-label { font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6b76); margin-right: 0.2rem; }
.sam-applied-chip { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; border: 0; border-radius: 999px; padding: 0.32rem 0.75rem; font: 600 0.8125rem/1 var(--wp--preset--font-family--sans, sans-serif); background: var(--wp--preset--color--navy, #04024D); color: #fff; }
.sam-applied-chip:hover { background: var(--wp--preset--color--orange, #d45a1e); }
.sam-applied-chip span[aria-hidden] { opacity: 0.7; font-size: 0.7rem; }
/* Jump-to-print-reference row — matches the select-row voice; always visible. */
.sam-search-printref { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; }
.sam-printref-label { font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6b76); }
.sam-search-overlay .sam-search-printref label { display: inline-flex; width: auto; flex: 0 0 auto; align-items: center; gap: 0.4rem; margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-search-overlay .sam-search-printref input { width: 4.25rem; padding: 0.35rem 0.5rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; background: var(--wp--preset--color--base, #fff); font-variant-numeric: tabular-nums; }
.sam-search-overlay .sam-search-printref input:focus-visible { outline: 2px solid var(--wp--preset--color--orange, #d45a1e); outline-offset: 1px; }
.sam-printref-go { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.42rem 0.9rem; border: 1px solid var(--wp--preset--color--navy, #04024d); background: var(--wp--preset--color--navy, #04024d); color: #fff; border-radius: 2px; cursor: pointer; transition: background 120ms, border-color 120ms; }
.sam-printref-go:hover { background: var(--wp--preset--color--orange, #d45a1e); border-color: var(--wp--preset--color--orange, #d45a1e); }
@media (max-width: 600px) { .sam-search-overlay .sam-search-printref input { font-size: 16px; width: 5rem; } } /* 16px → no iOS focus-zoom */
.sam-search-selects { display: flex; gap: 1.25rem; flex-wrap: wrap; flex-basis: 100%; align-items: center; }
.sam-search-select { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-search-select select { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--ink); padding: 0.35rem 0.5rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; background: var(--wp--preset--color--base, #fff); cursor: pointer; }
@media (max-width: 600px) { .sam-search-selects { width: 100%; } .sam-search-select { flex: 1; } .sam-search-select select { flex: 1; font-size: 16px; } } /* 16px selects → no iOS focus-zoom */

/* ── Date range: preset dropdown (in the selects row) + dual-handle slider on
      its own row, shown only when a range is active (sliderHidden) ──────────── */
.sam-search-rangerow { flex-basis: 100%; max-width: 840px; padding-top: 0.15rem; }
.sam-search-select select:hover { border-color: var(--wp--preset--color--orange, #d45a1e); }
/* Force Sort + Dates onto one row regardless of any inherited form/label rules
   from the parent theme (higher specificity than `form label`). */
.sam-search-overlay .sam-search-selects { display: flex; flex-flow: row wrap; align-items: center; gap: 1.5rem; flex-basis: 100%; width: 100%; }
.sam-search-overlay .sam-search-select { display: inline-flex; width: auto; flex: 0 0 auto; align-items: center; gap: 0.4rem; margin: 0; }
.sam-range { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; max-width: 360px; }
.sam-range__years { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; color: var(--wp--preset--color--ink-2); font-variant-numeric: tabular-nums; }
.sam-range__track { position: relative; height: 18px; }
.sam-range__track::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; height: 4px; background: var(--wp--preset--color--rule); border-radius: 2px; }
.sam-range__fill { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; height: 4px; background: var(--wp--preset--color--navy, #04024d); border-radius: 2px; }
/* Selector specificity (0,2,1) must beat Ollie's input:not(...):not(...) rule, which
   otherwise paints these range inputs as white bordered text fields. */
.sam-range input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 18px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.sam-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; height: 18px; }
.sam-range input[type="range"]::-moz-range-track { background: transparent; border: 0; height: 18px; }
.sam-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--wp--preset--color--navy, #04024d); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); cursor: pointer; }
.sam-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--wp--preset--color--navy, #04024d); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); cursor: pointer; }
.sam-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--wp--preset--color--orange, #d45a1e); outline-offset: 2px; }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.sam-search-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.25rem 0 0.4rem; max-width: 840px; }
.sam-search-pager__btn { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.5rem 0.95rem; border: 1px solid var(--wp--preset--color--rule); background: transparent; border-radius: 2px; cursor: pointer; color: var(--wp--preset--color--ink); transition: border-color 120ms, color 120ms; }
.sam-search-pager__btn:hover:not([disabled]) { border-color: var(--wp--preset--color--orange, #d45a1e); color: var(--wp--preset--color--orange, #d45a1e); }
.sam-search-pager__btn[disabled] { opacity: 0.35; cursor: default; }
.sam-search-pager__info { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; color: var(--wp--preset--color--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .sam-search-rangerow { width: 100%; } .sam-range { max-width: none; } }
.sam-search-body { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.25rem; padding-top: 1.5rem; }
.sam-search-col h4 { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin: 0 0 0.85rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--wp--preset--color--navy); }
.sam-search-col ul { list-style: none; padding: 0; margin: 0; }
.sam-search-col li { padding: 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.sam-search-col a { display: block; color: var(--wp--preset--color--ink); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; }
.sam-search-col a:hover { color: var(--wp--preset--color--navy); }
.sam-search-col .meta { display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); margin-top: 0.25rem; }

/* ── Live search results (WS1) — results-first; editorial, not feed ─────────
   Single ranked column (not the 3-col idle layout); AI answer reuses the house
   gold "AI" treatment; rows highlight by background/weight, NO colored spine.
   Constrained to a readable measure so desktop reads like the magazine, not a feed. */
.sam-search-results { padding-top: 1.25rem; max-width: 840px; }
.sam-search-count { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--wp--preset--color--ink-3); margin: 0 0 0.5rem; }
.sam-search-count strong { color: var(--wp--preset--color--ink); }
.sam-search-answer { background: var(--wp--preset--color--base-2, #f6f4ee); border-left: 3px solid var(--wp--preset--color--gold, #e8b800); padding: 0.9rem 1.1rem; margin: 0 0 1.1rem; border-radius: 2px; max-width: 840px; }
.sam-search-answer__label { display: inline-block; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin-bottom: 0.35rem; }
.sam-search-answer__text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--wp--preset--color--ink); }
.sam-search-status { padding: 0.85rem 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; color: var(--wp--preset--color--ink-3); }
.sam-search-status--error { color: var(--wp--preset--color--orange, #d45a1e); }
.sam-search-hits { list-style: none; margin: 0; padding: 0; }
.sam-search-hit { border-bottom: 1px solid var(--wp--preset--color--rule); }
.sam-search-hit a { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.85rem 0.75rem; text-decoration: none; border-radius: 2px; }
.sam-search-hit.is-active a, .sam-search-hit a:hover { background: var(--wp--preset--color--base-2, #f3f3f0); }
.sam-search-hit__media { flex: 0 0 auto; }
.sam-search-hit__thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 3px; background: var(--wp--preset--color--base-2, #ece9e0); }
.sam-search-hit__ph { width: 76px; height: 76px; border-radius: 3px; display: grid; place-items: center; background: color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 8%, transparent); color: var(--wp--preset--color--navy, #04024d); font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.5rem; }
.sam-search-hit__text { flex: 1 1 auto; min-width: 0; }
.sam-search-hit__type { display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin-bottom: 0.2rem; }
.sam-search-hit__title { display: block; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: var(--wp--preset--color--ink); }
.sam-search-hit__snippet { display: block; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 0.875rem; line-height: 1.55; color: var(--wp--preset--color--ink-3); margin-top: 0.28rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sam-search-hit__snippet mark { background: color-mix(in oklab, var(--wp--preset--color--orange, #d45a1e) 28%, #fff); color: var(--wp--preset--color--navy); font-weight: 700; padding: 0.02em 0.12em; border-radius: 2px; }
.sam-search-overlay [hidden] { display: none !important; }

/* ── Related Coverage (WS2) — editorial, curated 3-up, NO spine border ─────── */
.sam-related { margin: 2.5rem 0; }
.sam-related__heading { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin: 0 0 1.1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--wp--preset--color--navy); }
.sam-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sam-related__card { display: flex; gap: 0.75rem; align-items: flex-start; text-decoration: none; color: inherit; }
.sam-related__media { flex: 0 0 96px; width: 96px; display: grid; place-items: center; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--wp--preset--color--base-2, #ece9e0); border-radius: 2px; margin-bottom: 0; }
.sam-related__media--ph { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--wp--preset--color--navy, #04024d); background: color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 8%, transparent); }
.sam-related__body { display: block; flex: 1 1 auto; min-width: 0; }
.sam-related__kicker { display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--orange-ink, #C2410C); margin-bottom: 0.3rem; }
.sam-related__title { display: block; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-weight: 700; font-size: 1.0625rem; line-height: 1.28; color: var(--wp--preset--color--ink); }
.sam-related__card:hover .sam-related__title { color: var(--wp--preset--color--navy); }
.sam-related__byline { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; color: var(--wp--preset--color--ink-3); margin-top: 0.35rem; }
@media (max-width: 781px) { .sam-related__grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Read Next sidebar list (saminfo/read-next — related, already-read-filtered).
   Items stay hidden behind a skeleton until the read-filter resolves, so the
   final list appears in one paint (no show-then-hide flash). */
.sam-readnext__items { display: none; }
.sam-readnext.is-ready .sam-readnext__items { display: block; }
.sam-readnext.is-ready .sam-readnext__skeletons { display: none; }
.sam-readnext__skel { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.sam-readnext__skel > span { display: block; height: 0.55rem; border-radius: 3px; background: linear-gradient(90deg, rgba(4,2,77,0.06) 25%, rgba(4,2,77,0.12) 37%, rgba(4,2,77,0.06) 63%); background-size: 400% 100%; animation: sam-readnext-shimmer 1.4s ease infinite; }
.sam-readnext__skel > span:first-child { width: 38%; height: 0.45rem; margin-bottom: 0.42rem; }
.sam-readnext__skel > span:last-child { width: 88%; }
@keyframes sam-readnext-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sam-readnext__skel > span { animation: none; } }
.sam-readnext__item { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); text-decoration: none; }
.sam-readnext__item[hidden] { display: none; }
.sam-readnext__kicker { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange-ink, #C2410C); margin-bottom: 0.2rem; }
.sam-readnext__title { display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: var(--wp--preset--color--navy); transition: color 140ms ease; }
.sam-readnext__item:hover .sam-readnext__title { color: var(--wp--preset--color--orange, #F37021); }

/* ── Related Picks: on-page editor overlay (editors only) ──────────
 * The panel ships hidden; the admin-bar "◉ Related Picks" toggle adds
 * .sam-reledit-on to <body> to reveal it. Mirrors the ad-insights overlay. */
.sam-rel-panel { display: none; }
.sam-reledit-on .sam-rel-panel {
  display: block; margin: 0 0 1rem; padding: 0.85rem 1rem;
  background: var(--wp--preset--color--navy, #04024D); color: #fff; border-radius: 4px;
  font-family: var(--wp--preset--font-family--sans, sans-serif);
}
.sam-rel-panel__hd { font-size: 0.75rem; letter-spacing: 0.04em; margin-bottom: 0.6rem; }
.sam-rel-panel__hd b { letter-spacing: 0.12em; text-transform: uppercase; }
.sam-rel-panel__hd span { opacity: 0.7; }
.sam-rel-chips { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sam-rel-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(255,255,255,0.12); border-radius: 3px; padding: 0.25rem 0.3rem 0.25rem 0.4rem; font-size: 0.8125rem; max-width: 100%; cursor: grab; }
.sam-rel-chip:active { cursor: grabbing; }
.sam-rel-chip.is-dragging { opacity: 0.5; }
.sam-rel-chip__grip { opacity: 0.5; font-size: 0.7rem; letter-spacing: -1px; cursor: grab; user-select: none; }
.sam-rel-chip.is-pinned { background: rgba(255,242,0,0.18); box-shadow: inset 0 0 0 1px rgba(255,242,0,0.5); }
.sam-rel-chip__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.sam-rel-chip__act { cursor: pointer; border: 0; background: rgba(255,255,255,0.16); color: #fff; border-radius: 2px; padding: 0.15rem 0.45rem; font: inherit; font-size: 0.6875rem; white-space: nowrap; }
.sam-rel-chip__act:hover { background: var(--wp--preset--color--orange, #d45a1e); }
.sam-rel-empty { opacity: 0.7; font-size: 0.8125rem; font-style: italic; }
.sam-rel-add { position: relative; }
.sam-rel-panel input.sam-rel-q,
.sam-reledit-on .sam-rel-panel input.sam-rel-q {
  width: 100%; box-sizing: border-box; border: 0; border-radius: 3px;
  padding: 0.5rem 0.65rem; font: inherit; font-size: 0.8125rem;
  /* Force dark-on-white: the input sits inside a navy (#fff text) panel, and
     WebKit's -webkit-text-fill-color can win over `color`, so set both + !important. */
  background-color: #fff !important;
  color: #181826 !important;
  -webkit-text-fill-color: #181826 !important;
  caret-color: #181826;
}
.sam-rel-panel input.sam-rel-q::placeholder { color: #6b6b76 !important; -webkit-text-fill-color: #6b6b76 !important; opacity: 1; }
.sam-rel-results { list-style: none; margin: 0.3rem 0 0; padding: 0; max-height: 230px; overflow: auto; background: #fff; border-radius: 3px; }
.sam-rel-result { display: block; width: 100%; text-align: left; cursor: pointer; border: 0; background: transparent; color: var(--wp--preset--color--ink, #181826); padding: 0.45rem 0.65rem; font: inherit; font-size: 0.8125rem; border-bottom: 1px solid var(--wp--preset--color--rule, #e6e2d6); }
.sam-rel-result:hover { background: var(--wp--preset--color--base-2, #ece9e0); }

/* ── Modals: subscribe + login (Interactivity API) ────────────── */
.sam-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; }
.sam-modal.is-open { display: flex; }
/* Site Editor: front-end display:none until .is-open would hide save-markup
   recovery; edit() uses .sam-modal-editor. Force both visible as a card. */
.editor-styles-wrapper .sam-modal,
.editor-styles-wrapper .sam-modal-editor {
	display: block;
	position: relative;
	inset: auto;
	z-index: auto;
	padding: 0;
	max-width: 460px;
	margin: 1.25rem 0;
}
.editor-styles-wrapper .sam-modal .sam-modal-backdrop,
.editor-styles-wrapper .sam-modal-editor .sam-modal-backdrop { display: none; }
.sam-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: rgba(20,16,63,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sam-modal-inner { position: relative; z-index: 1; background: var(--wp--preset--color--base); border-radius: 2px; box-shadow: 0 24px 60px -16px rgba(20,16,63,0.45); max-width: 460px; width: 100%; padding: 2.5rem; }
.sam-modal-close { position: absolute; top: 0.85rem; right: 0.85rem; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--ink-3); border-radius: 50%; }
.sam-modal-close:hover { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--ink); }
.sam-modal-eyebrow { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin-bottom: 0.85rem; }
.sam-modal-inner h2 { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.875rem; line-height: 1.05; letter-spacing: -0.018em; margin: 0 0 0.6rem; color: var(--wp--preset--color--ink); }
.sam-modal-inner > p,
.sam-modal-copy > p { color: var(--wp--preset--color--ink-2); font-size: 0.9375rem; line-height: 1.5; margin: 0 0 1.25rem; }
.sam-modal-btn { display: flex; justify-content: center; padding: 0.9rem; background: var(--wp--preset--color--navy); color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; }
.sam-modal-btn:hover { background: var(--wp--preset--color--orange); color: #ffffff; }
/* Stacked sign-in form (login modal) — inputs over a full-width button */
.sam-modal-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.25rem; }
.sam-modal-form input { padding: 0.8rem 0.85rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; }
.sam-modal-form input:focus { outline: 2px solid var(--wp--preset--color--navy); outline-offset: -2px; }
.sam-modal-form .sam-modal-btn { border: 0; cursor: pointer; margin-top: 0.15rem; }
.sam-modal-form .sam-modal-btn:disabled { opacity: 0.6; cursor: default; }
/* Inline sign-in error (orange = the brand's attention color; [hidden] until set) */
.sam-modal-error { margin: 0; font: 700 0.8125rem/1.4 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--orange-ink); }
.sam-modal-formrow { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.sam-modal-formrow input { flex: 1 1 auto; min-width: 0; padding: 0.75rem 0.85rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; }
.sam-modal-formrow input:focus { outline: 2px solid var(--wp--preset--color--navy); outline-offset: -2px; }
.sam-modal-formrow .sam-modal-btn { flex: 0 0 auto; padding: 0.75rem 1.1rem; }
.sam-plans { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.sam-plan { display: flex; padding: 0.85rem 1rem; border: 1px solid var(--wp--preset--color--rule); justify-content: space-between; align-items: baseline; gap: 0.75rem; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.875rem; color: var(--wp--preset--color--ink); border-radius: 2px; text-decoration: none; }
.sam-plan:hover { border-color: var(--wp--preset--color--navy); }
.sam-plan.featured { border-color: var(--wp--preset--color--yellow); background: color-mix(in oklab, var(--wp--preset--color--yellow) 14%, var(--wp--preset--color--base)); }
.sam-plan .price { font-weight: 900; }
.sam-plan .term { font-size: 0.6875rem; color: var(--wp--preset--color--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.sam-newsletter-form { margin-top: 0.25rem; }
.sam-newsletter-form .sam-newsletter-picks { margin-bottom: 0.75rem; }
.sam-newsletter-pick { cursor: pointer; align-items: center; }
.sam-newsletter-pick input[type="checkbox"] { flex: 0 0 auto; accent-color: var(--wp--preset--color--gold); margin: 0; }
.sam-modal-foot { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--wp--preset--color--rule); text-align: center; font-size: 0.8125rem; color: var(--wp--preset--color--ink-3); }
.sam-modal-foot a { color: var(--wp--preset--color--navy); font-weight: 700; text-decoration: none; cursor: pointer; }

/* ── Header bands flush (no block-gap between utility/masthead/nav/beats) ── */
.sam-header-region > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ── Masthead menu toggle (mobile only) ───────────────────────── */
.sam-nav-toggle { display: none; align-items: center; gap: 0.5rem; background: transparent; border: 0; cursor: pointer; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0; }
.sam-nav-toggle-bars { width: 20px; height: 14px; position: relative; display: inline-block; }
.sam-nav-toggle-bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; }
.sam-nav-toggle-bars span:nth-child(1) { top: 0; }
.sam-nav-toggle-bars span:nth-child(2) { top: 6px; }
.sam-nav-toggle-bars span:nth-child(3) { top: 12px; }

/* ── Mobile drawer (Interactivity API) ────────────────────────── */
.sam-drawer { position: fixed; inset: 0; z-index: 1000; display: none; }
.sam-drawer.is-open { display: block; }
/* Site Editor: front-end display:none until .is-open would hide the drawer
   on canvas. Force a real in-flow box (mirrors .sam-modal editor override). */
.editor-styles-wrapper .sam-drawer {
	display: block;
	position: relative;
	inset: auto;
}
.sam-drawer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: rgba(20,16,63,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sam-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 88vw); background: var(--wp--preset--color--base); overflow-y: auto; padding: 1.25rem 1.5rem 2rem; box-shadow: -12px 0 40px -16px rgba(20,16,63,0.5); display: flex; flex-direction: column; gap: 1.25rem; animation: sam-slide-in 220ms cubic-bezier(.2,.6,.2,1); }
@keyframes sam-slide-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
.sam-drawer-head { display: flex; justify-content: space-between; align-items: center; }
.sam-drawer-title { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--navy); }
.sam-drawer-close { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--ink-3); border-radius: 50%; }
.sam-drawer-close:hover { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--ink); }
/* drawer nav = the WP/Ollie menu (ref 4) rendered vertically */
.sam-drawer-nav ul { list-style: none; margin: 0; padding: 0; gap: 0 !important; }
.sam-drawer-nav .wp-block-navigation-item { width: 100%; }
.sam-drawer-nav .wp-block-navigation-item__content { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); color: var(--wp--preset--color--ink); text-decoration: none; }
.sam-drawer-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--navy); }
.sam-drawer-issue { padding-top: 0.5rem; }
.sam-drawer-issue a { text-decoration: none; }
.sam-drawer-cta { display: grid; gap: 0.6rem; margin-top: auto; }
.sam-drawer-subscribe { display: block; text-align: center; padding: 0.9rem; background: var(--wp--preset--color--navy); color: #fff; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; text-decoration: none; }
.sam-drawer-subscribe:hover { background: var(--wp--preset--color--orange); color: #ffffff; }
.sam-drawer-signin { text-align: center; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; color: var(--wp--preset--color--ink-3); text-decoration: none; }
.sam-drawer-signin:hover { color: var(--wp--preset--color--navy); }
/* Drawer submenu (e.g. Mountain Departments) — always-open inline list,
   never a right-side flyout box. Override every core positioning prop. */
.sam-drawer-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--sans); }
/* Collapsible accordion submenus: the has-child item stacks (label row with a
   caret; submenu drops full-width INLINE below when tapped — not a flyout).
   Core toggles open/closed via openSubmenusOnClick; we only fix positioning. */
.sam-drawer-nav .wp-block-navigation-item.has-child { display: block !important; width: 100%; }
.sam-drawer-nav .wp-block-navigation__submenu-container {
  position: static !important;
  transform: none !important; left: auto !important; right: auto !important; top: auto !important;
  width: 100% !important; min-width: 0 !important;
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important;
}
.sam-drawer-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.6rem 0; font-size: 0.875rem; font-weight: 600;
  color: var(--wp--preset--color--ink-2);
}
.sam-drawer-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--navy); }
/* Parent label row: full-width with the caret pushed to the right edge */
.sam-drawer-nav .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle,
.sam-drawer-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-left: 0; padding-right: 0; }
.sam-drawer-nav .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--ink-3); margin-left: auto; }
/* Drawer issue thumbnail — small fixed size, never upscaled (avoids pixelation) */
.sam-drawer-issue-row { align-items: flex-start; }
.sam-drawer-issue-row > .wp-block-post-featured-image { flex: 0 0 112px; width: 112px; }
.sam-drawer-issue-row .wp-block-post-featured-image img { width: 100%; height: auto; border-radius: 2px; display: block; }

/* ── Footer link contrast (was dark navy on navy — failed WCAG) ── */
.sam-site-footer a { color: #cfd2e6; }
.sam-site-footer a:hover { color: var(--wp--preset--color--orange); }
.sam-site-footer .sam-footer-head { color: #ffffff; }
/* Mobile browsers auto-inflate tiny text on narrow viewports, blowing the
   11px footer headings up on phones while desktop stays correct. */
.sam-site-footer { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Site-Editor Global Styles forces EVERY h2.wp-block-heading to 32px
   !important at ≤782px (custom CSS, meant for article headings). An
   !important declaration beats even the footer's inline 0.6875rem, so
   re-assert the 11px intent with a more specific selector: (0,2,1) beats
   the global (0,1,1) regardless of stylesheet order. Line-height 1.5
   matches the footer group's own setting. */
@media (max-width: 782px) {
  .sam-site-footer h2.sam-footer-head { font-size: 0.6875rem !important; line-height: 1.5 !important; }
}
/* Footer content gutters (was flush to container edges) */
.sam-site-footer { padding-left: var(--sam-gutter); padding-right: var(--sam-gutter); }
.sam-site-credit { color: #9aa0c4; }
.sam-site-credit a { color: #cfd2e6; font-weight: 700; }
.sam-site-credit a:hover { color: var(--wp--preset--color--orange); }

/* Social icons (utility bar) */
.sam-utility-social a { display: inline-flex; align-items: center; line-height: 0; }
.sam-utility-social svg { display: block; }

/* Social icons (footer — moved from masthead per client 2026-06) */
.sam-footer-social { display: flex; gap: 0.85rem; align-items: center; margin-top: 1.1rem; }
.sam-footer-social a { display: inline-flex; color: #cfd2e6; line-height: 0; transition: color 140ms ease; }
.sam-footer-social a:hover { color: var(--wp--preset--color--orange); }

/* ── Desktop primary-nav dropdowns ────────────────────────────── */
.sam-primary-nav .wp-block-navigation__submenu-container {
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--rule);
  border-top: 2px solid var(--wp--preset--color--navy);
  box-shadow: 0 22px 48px -26px rgba(20, 16, 63, 0.5);
  padding: 0.4rem 0;
  min-width: 248px;
  border-radius: 0 0 4px 4px;
  margin-top: 0;
  /* Core toggles opacity/visibility on hover/focus-within; we add the rise. */
  transform: translateY(8px);
  transition: opacity 180ms cubic-bezier(.2,.7,.2,1), transform 180ms cubic-bezier(.2,.7,.2,1);
}
.sam-primary-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.sam-primary-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container,
.sam-primary-nav .wp-block-navigation__submenu-container.is-open {
  transform: translateY(0);
}
.sam-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.55rem 1.4rem;
  color: var(--wp--preset--color--ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  box-shadow: none;
  transition: background-color 140ms ease, color 140ms ease, padding-left 140ms ease;
}
.sam-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.sam-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--navy);
  padding-left: 1.65rem; /* subtle nudge toward the reader */
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .sam-primary-nav .wp-block-navigation__submenu-container { transform: none; transition: opacity 120ms ease; }
  .sam-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content { padding-left: 1.4rem; }
}

/* ── Headline News cards — flat editorial cards (client mockup 2026-06):
   image top, headline, date. Tight stack; no leftover group padding that
   opened a hole between title and date. */
.sam-headlines-track .sam-headline-card > .wp-block-group {
  padding: 0.7rem 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sam-headlines-track .sam-headline-signup { padding: 1.25rem 1.1rem !important; }
.sam-headline-card .wp-block-post-title {
  margin: 0;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}
.sam-headline-card .wp-block-post-title a { transition: color 140ms ease; }
.sam-headline-card .wp-block-post-title a:hover { color: var(--wp--preset--color--orange); }
/* Karolyn 2026-09: navy signup was hyphenating "resort" as "re- / sort"
   because .wp-block-heading sets hyphens:auto + word-break:break-word.
   Keep whole words intact; wrap only at spaces. */
.sam-headline-signup,
.sam-headline-signup .wp-block-heading,
.sam-headline-signup__title {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
}
/* Homepage scroller is isolated from archive preview/dek work. Never show
   author or excerpt here — HN archive uses .sam-hn-archive-card + article-dek. */
.sam-headline-card .wp-block-post-excerpt,
.sam-headline-card .sam-article-dek,
.sam-headline-card .wp-block-post-author-name { display: none; }
.sam-headline-card .wp-block-post-date,
.sam-headline-card .sam-headline-card__date {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink-2);
}
.sam-headline-card > .wp-block-group .wp-block-post-date { margin-top: 0; }
.sam-hl-more .wp-block-post-date,
.sam-hl-more .sam-headline-card__date,
.sam-hl-more time { display: none !important; }
.sam-hn-archive-card .wp-block-post-author-name { display: none; }
.sam-hn-archive-card .wp-block-post-date {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink-2);
}
.sam-hn-archive-card:has(.sam-article-dek) .wp-block-post-date { display: none; }

/* ── SAM Picks sidebar — v2 side-cards (light card, image beside text) ── */
.sam-pick-item {
  background: var(--wp--preset--color--base-2) !important;
  border-bottom: 0 !important; border-radius: 2px;
  padding: 0.85rem 1rem !important; margin-bottom: 0.6rem;
  transition: background 150ms ease;
}
.sam-pick-item:hover { background: var(--wp--preset--color--base-3) !important; }
/* Flex row (not wp:columns — avoids core's mobile stacking): text + 72px thumb */
.sam-pick-row { align-items: center; }
.sam-pick-text { flex: 1 1 auto; min-width: 0; }
.sam-pick-text .wp-block-post-title a { text-decoration: none; }
.sam-pick-thumb { flex: 0 0 72px; margin: 0; }
.sam-pick-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; display: block; }
.sam-pick-thumb:not(:has(img)) { display: none; }
.sam-cat-tag { margin-bottom: 0.4rem; }

/* ════════════════════════════════════════════════════════════════
   REFINEMENT PASS — colored tags, drawer carets, cards, magazine, footer
   ════════════════════════════════════════════════════════════════ */

/* ── Category tags / boxes — style guide: 10% SAM Cyan background with SAM
   Cyan text, uniform across every topic (per client feedback round 2026-06).
   The per-topic .sam-term--{slug} classes still exist in markup; they all
   resolve to the same cyan treatment now. */
.sam-term {
  display: inline-block; padding: 0.25rem 0.55rem; border-radius: 3px;
  font-weight: 800; line-height: 1.15;
  color: var(--wp--preset--color--cyan-ink) !important;
  background: var(--wp--preset--color--cyan-tint) !important;
}
.sam-term:hover { filter: brightness(0.97); }

/* ── Drawer submenu rows: parent <li> is a flex row so the label link and
   the caret toggle sit on ONE line; the submenu <ul> wraps full-width below.
   (Core renders label <a> + caret <button> + submenu <ul> as li children.) ── */
.sam-drawer-nav .wp-block-navigation-item.has-child {
  display: flex !important; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.sam-drawer-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  flex: 1 1 auto !important; width: auto !important; border-bottom: 0 !important;
  justify-content: flex-start !important;
}
.sam-drawer-nav .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
  flex: 0 0 auto !important; width: auto !important; display: flex !important; align-items: center;
  background: transparent; border: 0; cursor: pointer; padding: 0.9rem 0 0.9rem 0.6rem; margin: 0;
  color: var(--wp--preset--color--ink-3);
}
.sam-drawer-nav .wp-block-navigation__submenu-icon { display: flex !important; align-items: center; margin: 0 !important; }
.sam-drawer-nav .wp-block-navigation__submenu-icon svg { width: 13px; height: 13px; transition: transform 160ms ease; }
.sam-drawer-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sam-drawer-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { flex: 1 1 100% !important; }
/* Simple (no-submenu) items full-width too, so every divider spans the row */
.sam-drawer-nav .wp-block-navigation-item:not(.has-child) { width: 100%; }
.sam-drawer-nav .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content { display: block; width: 100%; }
.sam-drawer-nav .wp-block-navigation__container { width: 100%; }

/* ── SAM Picks row spacing handled in the SAM Picks side-card block above ── */

/* ── Classifieds featured card: handle no image gracefully ────── */
/* Don't stretch the featured card to match the taller job list */
.sam-classifieds > .wp-block-columns { align-items: flex-start; }
.sam-featured-job .wp-block-columns { align-items: flex-start; margin-bottom: 0; }
.sam-featured-job:not(:has(.wp-block-post-featured-image img)) .wp-block-column:first-child { display: none; }
.sam-featured-job:not(:has(.wp-block-post-featured-image img)) .wp-block-column:last-child > .wp-block-group { padding: 1.4rem 1.5rem !important; }
.sam-class-row:last-child { border-bottom: 0 !important; }

/* ── FROM THE ARCHIVES — feature + side shelf (saminfo/archive-mosaic, R5) ──
   Two equal-height columns (no fragile row-spanning). The feature is an
   IMMERSIVE card: the issue's own cover, blurred + navy-toned, fills the
   panel at any height (so it never voids), with the crisp cover + white text
   on top. Echoes the page's hero/Departments dark treatments. The side is a
   2×2 grid of white issue cards + the sponsored slot, each filling its cell. */
.sam-archm {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}

/* Feature — immersive ambient cover */
.sam-archm-feature {
  flex: 1 1 44%;
  position: relative;
  min-height: clamp(340px, 26vw, 430px);
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  background: var(--wp--preset--color--navy);
  isolation: isolate;
}
.sam-archm-feature__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* the cover, blown up + blurred = ambient art that fills any height;
     it's never read as detail, so the upscale doesn't matter. */
  filter: blur(34px) brightness(0.5) saturate(1.15);
  transform: scale(1.25);
}
.sam-archm-feature::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(118deg,
    rgba(4,2,77,0.86) 0%, rgba(4,2,77,0.58) 52%, rgba(4,2,77,0.80) 100%);
}
.sam-archm-feature__inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2rem);
  width: 100%; padding: clamp(1.5rem, 2.2vw, 2.25rem);
}
.sam-archm-feature__cover { flex: 0 0 auto; display: block; }
.sam-archm-feature__cover img {
  display: block; width: clamp(140px, 15vw, 210px); height: auto;
  border-radius: 2px; box-shadow: 0 20px 44px -18px rgba(0,0,0,0.75);
  transition: transform 220ms cubic-bezier(.2,.6,.2,1);
}
.sam-archm-feature:hover .sam-archm-feature__cover img { transform: translateY(-4px); }
.sam-archm-feature__text { min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; }

.sam-archm-eyebrow {
  font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--cyan-ink);
}
.sam-archm-title { margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.015em; }
.sam-archm-title a { color: var(--wp--preset--color--navy); text-decoration: none; transition: color 140ms ease; }
.sam-archm-title a:hover { color: var(--wp--preset--color--orange); }
.sam-archm-title--sm {
  font-size: 0.9375rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Feature text reverses to light on the navy panel */
.sam-archm-feature__text .sam-archm-title { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); color: #ffffff; } /* color on the h3 itself — the editor preview renders no <a>, so an a-only rule left it navy-on-navy */
.sam-archm-feature__text .sam-archm-title a { color: #ffffff; }
.sam-archm-feature__text .sam-archm-title a:hover { color: var(--wp--preset--color--orange); }
.sam-archm-dek {
  margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: 0.9375rem;
  line-height: 1.5; color: var(--wp--preset--color--ink-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sam-archm-feature__text .sam-archm-dek {
  color: rgba(255,255,255,0.85); font-size: 1rem; -webkit-line-clamp: 3;
}
.sam-archm-more {
  font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--wp--preset--color--navy); transition: color 140ms ease;
}
.sam-archm-feature__text .sam-archm-more { color: #ffffff; margin-top: 0.2rem; }
.sam-archm-more:hover { color: var(--wp--preset--color--orange); }
.sam-archm-feature__text .sam-archm-more .sam-dept-cover__arrow,
.sam-archm-more span { display: inline-block; margin-left: 0.35em; transition: transform 220ms cubic-bezier(.2,.6,.2,1); }
.sam-archm-more:hover span { transform: translateX(4px); }

/* Side — 2×2 grid that defines the section height; cards fill their cells */
.sam-archm-side {
  flex: 1 1 56%;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
  gap: 1rem; min-width: 0;
}
.sam-archm-card {
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; min-height: 0;
  background: #fff; border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px; padding: 0.85rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.sam-archm-card:hover { background: var(--wp--preset--color--base-2); border-color: var(--wp--preset--color--navy); }
/* Image flex-fills the remaining cell height so no card voids at the bottom. */
.sam-archm-card__media { flex: 1 1 auto; min-height: 96px; display: block; }
.sam-archm-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: 2px; display: block; transition: filter 200ms ease;
}
.sam-archm-card__text { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.sam-archm-card:hover .sam-archm-card__media img { filter: brightness(0.93); }
.sam-archm-ad {
  display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; padding: 0.5rem;
}
.sam-archm-ad .sam-ad { display: flex; width: auto; max-width: 100%; }
.sam-archm-ad .sam-ad img,
.sam-archm-ad .sam-ad video { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.sam-archm-ad .sam-ad__inner { width: 100%; }
.sam-archm-ad__ph {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  border: 1px dashed var(--wp--preset--color--rule); border-radius: 2px; padding: 1rem; text-align: center;
}
.sam-archm-ad__ph .t { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.sam-archm-ad__ph .s { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; color: var(--wp--preset--color--ink-3); }
.sam-archm-ad__ph a { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--navy); text-decoration: none; }
.sam-archm-ad__ph a:hover { color: var(--wp--preset--color--orange); }
@media (max-width: 880px) {
  /* Feature stacks above the side shelf; both keep their internal layout. */
  .sam-archm { flex-direction: column; }
  .sam-archm-feature { min-height: 260px; }
}
@media (max-width: 520px) {
  .sam-archm-side { grid-template-columns: 1fr; }
  .sam-archm-feature__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Cover shelf: horizontal scroll, MORE covers (smaller cells), equal-height
   boxes so every cover's top edge aligns (client R3), centered titles. */
.sam-archcovers .wp-block-post-template {
  display: flex !important;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.sam-archcovers .wp-block-post-template::-webkit-scrollbar { height: 6px; }
.sam-archcovers .wp-block-post-template::-webkit-scrollbar-thumb { background: var(--wp--preset--color--rule); border-radius: 3px; }
.sam-archcovers .wp-block-post-template > li { flex: 0 0 124px; scroll-snap-align: start; margin: 0; }
.sam-archcovers .sam-magazine-item .wp-block-post-title { text-align: center; font-size: 0.8125rem !important; }
.sam-archcovers .sam-magazine-item a { text-decoration: none; }
.sam-archcovers .sam-magazine-item .wp-block-post-title a { transition: color 140ms ease; }
.sam-archcovers .sam-magazine-item .wp-block-post-title a:hover { color: var(--wp--preset--color--orange); }
.sam-archcovers .wp-block-post-featured-image {
  background: var(--wp--preset--color--base-2) !important;
  height: 164px; /* FIXED box height = every cover's frame matches the first */
  padding: 0.5rem !important; display: flex; justify-content: center; align-items: center;
  aspect-ratio: auto !important; border: 1px solid var(--wp--preset--color--rule);
}
.sam-archcovers .wp-block-post-featured-image img {
  aspect-ratio: auto !important; width: auto !important; max-width: 100%;
  max-height: 100%; object-fit: contain; box-shadow: 0 6px 18px -10px rgba(20,16,63,0.4);
  transition: filter 200ms ease;
}
.sam-archcovers .sam-magazine-item:hover .wp-block-post-featured-image img { filter: brightness(0.9); }

/* ── Footer link lists: no bullets ────────────────────────────── */
.sam-site-footer .wp-block-list { list-style: none; padding-left: 0; margin-left: 0; }
.sam-site-footer .wp-block-list li { margin-left: 0; }

/* ── Section labels ───────────────────────────────────────────── */
.sam-section-label .wp-block-heading { margin: 0; }
.sam-section-label a { text-decoration: none; }
.sam-section-label a:hover { color: var(--wp--preset--color--gold-2); }

/* ── Byline separators ────────────────────────────────────────── */
.sam-byline .wp-block-post-date::before,
.sam-cover-card .wp-block-post-date::before {
  content: "·";
  margin: 0 0.45rem;
  color: var(--wp--preset--color--ink-3);
}

/* ── Story / card hover lift ──────────────────────────────────── */
.sam-cal-item,
.sam-tool-card,
.sam-magazine-item,
.sam-featured-job {
  transition: background-color 160ms ease, border-color 160ms ease;
}
/* One consistent hover signal site-wide: the card DARKENS (no move up/down).
   (Headline cards are flat now — their hover is the orange headline.) */
.sam-cal-item:hover,
.sam-tool-card:hover,
.sam-featured-job:hover {
  background-color: var(--wp--preset--color--base-2);
  border-color: var(--wp--preset--color--navy);
}
.sam-headline-card:hover :is(.wp-block-post-featured-image, figure) img,
.sam-featured-job:hover img,
.sam-dept-card:hover img,
.sam-magazine-item:hover img { filter: brightness(0.93); }
.sam-headline-card :is(.wp-block-post-featured-image, figure) img,
.sam-featured-job img, .sam-dept-card img, .sam-magazine-item img { transition: filter 160ms ease; }
.wp-block-post-featured-image { overflow: hidden; }
/* Image hover = darken only (no scale/zoom) — one consistent motion site-wide. */
.sam-featured-lead:hover .wp-block-post-featured-image img { filter: brightness(0.93); }

/* ── HEADLINE NEWS — horizontal scroll-snap carousel ──────────────
   Signup + query cards share one flex track. Desktop sticky-pins the navy
   signup left in-row (Client 2026-07); mobile rides it inline at slot 4.
   Do not hoist signup outside the track — that stacked a full-width banner. */
.sam-headlines-scroller {
  --sam-hl-card: clamp(260px, 26vw, 320px);
  --sam-hl-gap: 1.25rem;
  position: relative;
}
.sam-headlines-track {
  display: flex;
  gap: var(--sam-hl-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
  /* Inset the snapport by the sticky signup footprint (card width + gap).
     Without this the first snap target sits underneath the sticky card. */
  scroll-padding-left: calc(var(--sam-hl-card) + var(--sam-hl-gap));
}
.sam-headlines-track::-webkit-scrollbar { display: none; }
.sam-headlines-track > .wp-block-query,
.sam-headlines-track .wp-block-post-template,
.sam-headlines-track .wp-block-post-template > li { display: contents; }
.sam-headlines-track .sam-headline-card,
.sam-headlines-track .sam-headline-signup,
.sam-headlines-track .sam-hl-more {
  flex: 0 0 auto;
  width: var(--sam-hl-card);
  scroll-snap-align: start;
}
.sam-headline-card { display: flex; flex-direction: column; }
.sam-headline-card a { text-decoration: none; }
.sam-headline-signup { display: flex; flex-direction: column; justify-content: center; }
.sam-headline-signup a { text-decoration: none; }

/* Client 2026-07: sticky left signup in the track. `order: -1` is load-bearing
   (signup sits last in markup). Clear scroll-snap-align — sticky + snap deadlocks. */
.sam-headlines-track .sam-headline-signup {
  order: -1;
  position: sticky; left: 0; z-index: 2;
  scroll-snap-align: none;
  box-shadow: 10px 0 22px -14px rgba(3,0,77,0.55);
}

/* Prev arrow lives at left:10px, which is underneath the sticky card. Push it
   to the card's trailing edge so mouse users can still scroll back; it stays
   opacity-gated by .at-start. Mobile resets this below (nothing is sticky). */
.sam-headlines-scroller .sam-hl-prev {
  left: calc(var(--sam-hl-card) + var(--sam-hl-gap) + 10px);
}

/* "More" tile at the end of the Headline News feed — a quiet call to the full
   feed, same width as a card, copy centered. Never a post date. */
.sam-hl-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 1.1rem;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 4px;
  background: var(--wp--preset--color--base-2);
  box-sizing: border-box;
}
.sam-hl-more__eyebrow {
  margin: 0; font-family: var(--wp--preset--font-family--sans);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wp--preset--color--cyan-ink);
}
.sam-hl-more__link { margin: 0; }
.sam-hl-more__link a {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy); transition: color 140ms ease;
}
.sam-hl-more:hover .sam-hl-more__link a { color: var(--wp--preset--color--orange); }

/* Section "see all" links sit hard-right in their flex label rows. */
.sam-section-label .sam-seeall { margin: 0 0 0 auto; }

/* Editorial tagline under the Mountain Departments heading (on navy). */
.sam-depts-tagline { margin-top: -0.25rem; color: rgba(255,255,255,0.82); }

/* Headline-News horizontal-scroll affordance: arrow buttons only (the edge
   fade read too heavy over the navy signup card). Classes (at-start / at-end /
   no-overflow) are toggled from scroll position by callbacks.headlinesInit so
   the "more" arrow shows only while there's more to reveal. */
.sam-headlines-scroller { position: relative; }

.sam-hl-arrow {
  position: absolute; top: calc((100% - 1rem) / 2); transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wp--preset--color--rule);
  background: var(--wp--preset--color--base); color: var(--wp--preset--color--navy);
  font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -4px rgba(3,0,77,0.28);
  transition: background 140ms ease, color 140ms ease, opacity 160ms ease, transform 140ms ease;
}
.sam-hl-arrow:hover { background: var(--wp--preset--color--navy); color: #fff; }
.sam-hl-prev { left: 10px; opacity: 0; pointer-events: none; }
.sam-hl-next { right: 10px; }
.sam-headlines-scroller:not(.at-start) .sam-hl-prev { opacity: 1; pointer-events: auto; }
.sam-headlines-scroller.at-end .sam-hl-next { opacity: 0; pointer-events: none; }
.sam-headlines-scroller.no-overflow .sam-hl-arrow { opacity: 0; pointer-events: none; }
/* Touch: keep the arrows as a visible scroll affordance — hiding them made the
   horizontal scroll unclear on mobile (client 2026-06). Still tappable. */

/* Signup + CTA forms */
.sam-signup-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.sam-signup-form input {
  flex: 1 1 140px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  padding: 0.7rem 0.8rem;
  border-radius: 2px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.875rem;
}
.sam-signup-form input::placeholder { color: rgba(255,255,255,0.65); }
/* Signup / CTA buttons live on NAVY bands → yellow w/ navy text (style guide:
   interactive on navy = cyan), ORANGE on hover (client 2026-06-19: buttons on
   navy are cyan and roll over to orange). */
.sam-signup-form button,
.sam-cta-form button {
  background: var(--sam-cta-bg);
  color: var(--sam-cta-fg);
  border: 0;
  padding: 0.7rem 1.1rem;
  border-radius: 2px;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.sam-signup-form button:hover,
.sam-cta-form button:hover { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }
.sam-cta-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
/* Opaque white field with dark text — legible on ANY surface. The form appears
   on both the navy newsletter band (homepage) and light sections (department
   pages); a translucent field only worked on navy and rendered white-on-white
   (1.08:1) elsewhere. A solid white field reads cleanly in every context. */
.sam-cta-form input {
  flex: 1 1 200px;
  background: #fff;
  border: 1px solid var(--wp--preset--color--rule);
  color: var(--wp--preset--color--ink-2);
  padding: 0.95rem 1rem;
  border-radius: 2px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 1rem;
}
.sam-cta-form input::placeholder { color: var(--wp--preset--color--ink-3); }
/* Re-assert at higher specificity to clear Ollie's global input rule (0,2,1). */
form.sam-cta-form input[type="email"],
form.sam-cta-form input[type="text"],
form.sam-signup-form input[type="email"],
form.sam-signup-form input[type="text"] {
  background: #fff;
  color: var(--wp--preset--color--ink-2);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  box-shadow: none;
}
form.sam-cta-form input::placeholder,
form.sam-signup-form input::placeholder { color: var(--wp--preset--color--ink-3); }
/* Keep autofill a white field with dark text too. */
form.sam-cta-form input:-webkit-autofill,
form.sam-cta-form input:-webkit-autofill:hover,
form.sam-cta-form input:-webkit-autofill:focus,
form.sam-cta-form input:-webkit-autofill:active,
form.sam-signup-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--wp--preset--color--ink-2);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--wp--preset--color--ink-2);
}
form.sam-cta-form input:autofill,
form.sam-signup-form input:autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 1000px var(--wp--preset--color--navy) inset;
  caret-color: #fff;
}
/* Stacked variant (saminfo/subscribe-form stacked=true) — narrow cards like the
   Headline News inline signup card. */
.sam-cta-form--stacked { flex-direction: column; flex-wrap: nowrap; }

/* Newsletter subscribe (saminfo/subscribe-form) — MailerLite-backed. */
.sam-subscribe { margin: 0; }
/* Honeypot — visually + AT hidden, but not display:none (some bots skip those). */
.sam-cta-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.sam-cta-form button[disabled] { opacity: 0.6; cursor: default; }
/* Inline result message — default to high-contrast tokens on light/gray surfaces. */
.sam-cta-form__msg { margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.4; font-weight: 600; }
.sam-cta-form__msg.is-success { color: var(--wp--preset--color--navy); }
.sam-cta-form__msg.is-error { color: var(--wp--preset--color--orange-ink); }
/* Navy signup bands keep lighter feedback on dark ground. */
:is(.has-navy-background-color, .has-navy-2-background-color, .has-navy-deep-background-color, .sam-newsletter) .sam-cta-form__msg.is-success {
  color: var(--wp--preset--color--cyan);
}
:is(.has-navy-background-color, .has-navy-2-background-color, .has-navy-deep-background-color, .sam-newsletter) .sam-cta-form__msg.is-error {
  color: #ffb3a2;
}

/* Mountain-department badge (saminfo/dept-rail) — circular monogram. The base
   styling used to live inline in a wp:html span; now a core paragraph carries
   the class, so reset its default margin. */
.sam-dept-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--wp--preset--font-family--sans);
  flex-shrink: 0;
  margin: 0;
}

/* Yellow corner flag on the Headline News inline signup card — was a wp:html
   span; now a CSS pseudo-element (the group sets position:relative;overflow:hidden). */
.sam-headline-signup.has-corner-flag::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: var(--wp--preset--color--yellow);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* ── THE LATEST — feed rows + sidebar ─────────────────────────── */
.sam-feed-row:first-child { padding-top: 0 !important; }
.sam-latest-feed a,
.sam-popular a,
.sam-class-list a { text-decoration: none; }
.sam-popular-row:last-child { border-bottom: 0 !important; }

/* ── EDITOR'S PICKS — curated aside list (replaces the old Most Popular) ── */
.sam-edpicks { margin: 0; }
.sam-edpicks__head {
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  border-bottom: 2px solid var(--wp--preset--color--navy);
  margin: 0 0 0.5rem; padding-bottom: 0.5rem;
}
.sam-edpicks__list { list-style: none; margin: 0; padding: 0; }
.sam-edpicks__item { margin: 0; }
.sam-edpick {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0; text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.sam-edpicks__item:last-child .sam-edpick { border-bottom: 0; }
.sam-edpick__img {
  flex: 0 0 56px; width: 56px; height: 56px;
  object-fit: cover; border-radius: 2px; display: block;
}
.sam-edpick__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sam-edpick__issue {
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--orange-ink, #b34a15);
}
.sam-edpick__title {
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-size: 0.9375rem; font-weight: 700; line-height: 1.25;
  color: var(--wp--preset--color--navy);
}
.sam-edpick:hover .sam-edpick__title { color: var(--wp--preset--color--orange, #f37021); }
.sam-edpicks__hint { font-size: 0.85rem; color: var(--wp--preset--color--ink-muted, #5f6062); padding: 0.5rem 0; margin: 0; }

/* ── ARCHIVE COVER FAN — "From the Archives" (saminfo/cover-fan) ──
   Productized from the archive design lab's variant B. Decade chips swap a
   draggable 3-cover fan + a randomized story list for that era. Real 2010s
   scanned covers; typographic tiles for not-yet-digitized decades. */
.sam-fan { margin: 0; overflow-x: clip; }
.sam-fan time { flex: 0 0 auto; white-space: nowrap; font: 700 0.6875rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6b76); }

.sam-fan__tag { display: inline-block; font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--navy, #04024d); padding: 0.35rem 0.6rem; align-self: flex-start; }

/* Cover tile (real scan) + typographic fallback tile. */
.sam-fan__cover { position: relative; display: block; text-decoration: none; }
.sam-fan__cover img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border: 1px solid var(--wp--preset--color--rule, #e3e3e8); box-shadow: 0 14px 34px -18px rgba(4, 2, 77, 0.55); }
.sam-fan__cover-label { position: absolute; left: 0.5rem; bottom: 0.5rem; font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(4, 2, 77, 0.85); padding: 0.3rem 0.5rem; }
.sam-fan__cover--type { aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: space-between; padding: 0.9rem; background: linear-gradient(160deg, var(--wp--preset--color--navy, #04024d), #1a1670); box-shadow: 0 14px 34px -18px rgba(4, 2, 77, 0.55); }
.sam-fan__brand { font: 800 1.5rem/1 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--yellow, #fff200); letter-spacing: -0.02em; }
.sam-fan__decade { font: 800 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--wp--preset--font-family--sans, sans-serif); color: #fff; }
.sam-fan__note { font: 700 0.5625rem/1.3 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: #8f8cc9; }

/* Decade chip row. */
.sam-fan__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
button.sam-fan__chip { font: inherit; }
.sam-fan__chip { display: inline-block; cursor: pointer; text-decoration: none; border: 1px solid var(--wp--preset--color--rule, #d0d0d5); background: #fff; border-radius: 999px; padding: 0.32rem 0.8rem; font: 700 0.8125rem/1 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink-2, #41414a); }
.sam-fan__chip.is-active, .sam-fan__chip:hover:not([disabled]) { background: var(--wp--preset--color--navy, #04024d); border-color: var(--wp--preset--color--navy, #04024d); color: #fff; }
.sam-fan__chip[disabled] { cursor: default; }

/* The fan + story-list two-column layout. */
.sam-fan__wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem; align-items: center; }
.sam-fan__fan { position: relative; height: 340px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sam-fan__fan:active { cursor: grabbing; }
.sam-fan__fan .sam-fan__cover { position: absolute; width: 210px; top: 10px; left: 50%; transform-origin: bottom center; transition: transform 200ms ease-out; will-change: transform; }
.sam-fan__c1 { transform: translateX(-85%) rotate(-9deg); }
.sam-fan__c2 { transform: translateX(-50%) rotate(0deg); z-index: 2; }
.sam-fan__c3 { transform: translateX(-15%) rotate(9deg); }
.sam-fan__fan:hover .sam-fan__c1 { transform: translateX(-98%) rotate(-13deg); }
.sam-fan__fan:hover .sam-fan__c3 { transform: translateX(-2%) rotate(13deg); }
.sam-fan__fan .sam-fan__cover.is-dragging { transition: none; z-index: 4; }
.sam-fan__fan .sam-fan__c2.is-dragging { transform: translateX(calc(-50% + var(--drag-x, 0px))) rotate(var(--drag-r, 0deg)); }
.sam-fan__fan .sam-fan__cover.is-flung { transition: transform 160ms ease-in, opacity 160ms; opacity: 0; }
.sam-fan__fan img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* Sits in the empty band below the fanned covers, inside the fan box, so it
   never overhangs into the decade chip row beneath the panel. */
.sam-fan__hint { position: absolute; left: 50%; bottom: 0.25rem; transform: translateX(-50%); font: 700 0.5625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6d70); white-space: nowrap; }
.sam-fan__side { display: flex; flex-direction: column; gap: 0.75rem; }
.sam-fan__list { list-style: none; margin: 0; padding: 0; }
.sam-fan__list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8); }
.sam-fan__list a { font-family: var(--wp--preset--font-family--sans, sans-serif); font-weight: 700; text-decoration: none; color: inherit; }
.sam-fan__list a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }

/* Panel enter animation on decade switch. */
.sam-fan__panel { animation: sam-fan-in 240ms ease-out; }
@keyframes sam-fan-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sam-fan__panel { animation: none; } }
/* While a fresh random sample loads for the selected decade. */
.sam-fan__panel.is-loading { opacity: 0.55; transition: opacity 120ms ease-out; }

@media (max-width: 782px) {
  .sam-fan__wrap { grid-template-columns: 1fr; }
  /* Narrower covers so the fanned spread stays inside the single column
     (at 210px the rotated back covers overflowed the mobile viewport). */
  .sam-fan__fan { height: 270px; }
  .sam-fan__fan .sam-fan__cover { width: 150px; }
}

/* ── THE MAGAZINE — current-issue articles (saminfo/current-issue) ──
   Image · headline (orange hover) · serif dek · byline below the dek.
   No dates (client 2026-06). */
.sam-curissue-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 0.25rem;
  font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--cyan-ink);
}
.sam-curissue-all { color: var(--wp--preset--color--navy); text-decoration: none; font-weight: 700; letter-spacing: 0.08em; transition: color 140ms ease; }
.sam-curissue-all:hover { color: var(--wp--preset--color--orange); }
.sam-curissue-row {
  display: grid; grid-template-columns: 38% 1fr; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--wp--preset--color--rule);
}
/* The footer <p> always follows the rows, so :last-child never matches a row —
   without this the last row keeps its bottom border AND the footer adds its
   top border (two gray rules). :last-of-type targets the last <article> row. */
.sam-curissue-row:last-of-type { border-bottom: 0; }
.sam-curissue-row__media { display: block; }
.sam-curissue-row__media img {
  display: block; width: 100%; aspect-ratio: var(--wp--custom--featured-image--aspect-ratio, 770 / 595); object-fit: cover;
  border-radius: 2px; transition: filter 200ms ease;
}
.sam-curissue-row:hover .sam-curissue-row__media img { filter: brightness(0.93); }
.sam-curissue-row__title {
  margin: 0 0 0.4rem;
  font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 1.5rem;
  line-height: 1.16; letter-spacing: -0.012em;
}
.sam-curissue-row__title a { color: var(--wp--preset--color--navy); text-decoration: none; transition: color 140ms ease; }
.sam-curissue-row__title a:hover { color: var(--wp--preset--color--orange); }
.sam-curissue-row__dek {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--serif); font-size: 1rem; line-height: 1.5;
  color: var(--wp--preset--color--ink-2);
}
.sam-curissue-row__byline {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 700;
  color: var(--wp--preset--color--ink-2);
}
@media (max-width: 640px) {
  .sam-curissue-row { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Homepage Magazine cover callout — match Karolyn mockup + Current Issue hero:
   prominent cover, orange COVER STORY kicker, View Full Issue CTAs. */
.sam-mag-cover {
  display: grid;
  grid-template-columns: minmax(180px, 38%) 1fr;
  gap: 1.5rem 1.75rem;
  align-items: start;
  margin: 0 0 1.75rem;
  padding: 1.5rem 1.6rem;
  background: var(--wp--preset--color--navy);
  color: #fff;
}
.sam-mag-cover__shot { margin: 0; }
.sam-mag-cover__shot-link { display: block; }
.sam-mag-cover__img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.65);
}
.sam-mag-cover__meta { min-width: 0; }
.sam-mag-cover__issue {
  margin: 0 0 0.85rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.sam-mag-cover__kicker {
  margin: 0 0 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in oklab, #fff 22%, transparent);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Editorial eyebrow — same orange family as Editors' Picks dates (mockup). */
  color: var(--wp--preset--color--orange);
}
.sam-mag-cover__title {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.18;
}
.sam-mag-cover__title a { color: #fff; text-decoration: none; }
.sam-mag-cover__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sam-mag-cover__dek {
  margin: 0 0 0.85rem;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in oklab, #fff 82%, transparent);
}
.sam-mag-cover__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.35rem;
  margin: 0;
}
.sam-mag-cover__cta {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.sam-mag-cover__cta:hover { color: var(--wp--preset--color--orange); }
.sam-curissue-full {
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--wp--preset--color--rule);
}
/* Solid button matching the theme.json button tokens (navy rest, orange
   hover) — the footer CTA must read as a button, not a bare text link. */
.sam-curissue-full__btn {
  display: inline-block;
  padding: 0.8rem 1.25rem;
  border-radius: 2px;
  background: var(--wp--preset--color--navy);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--eyebrow, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.sam-curissue-full__btn:hover,
.sam-curissue-full__btn:focus-visible {
  background: var(--wp--preset--color--orange);
  color: #fff;
}
@media (max-width: 640px) {
  .sam-mag-cover { grid-template-columns: 1fr; padding: 1.1rem; }
  .sam-mag-cover__img { max-width: 220px; }
}

/* ── EVENTS — full-width color-coded calendar (Award/Contest/Event) ──── */
.sam-eventcal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--wp--preset--color--navy); }
.sam-eventcal-title { font-family: var(--wp--preset--font-family--sans); font-size: 2rem; font-weight: 800; letter-spacing: -0.018em; color: var(--wp--preset--color--navy); margin: 0; }
.sam-eventcal-legend { display: flex; gap: 1.1rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.sam-eventcal-legend .lg { display: inline-flex; align-items: center; gap: 0.4rem; }
.sam-eventcal-legend .lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
/* Client-spec category colors: Award #006991 · Contest #3A7F2D ·
   Industry Event #B11116 · Online Education #472F92 */
.lg-award::before     { background: var(--wp--preset--color--event-award, #006991); }
.lg-contest::before   { background: var(--wp--preset--color--event-contest, #3A7F2D); }
.lg-event::before     { background: var(--wp--preset--color--event-industry, #B11116); }
.lg-education::before { background: var(--wp--preset--color--event-education, #472F92); }

/* ── Featured program promo above the calendar (client 2026-06) ── */
.sam-eventfeat {
  display: grid; grid-template-columns: minmax(280px, 46%) 1fr;
  border-radius: 2px; overflow: hidden; margin-bottom: 1.5rem;
  background: var(--wp--preset--color--navy);
}
/* Placeholder art: cyan halftone dots (accent color per the guide) until an
   editor drops in campaign artwork. */
.sam-eventfeat-media {
  position: relative; min-height: 300px;
  display: flex; align-items: flex-end; padding: 1.5rem;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,174,239,0.35) 7px, transparent 8px),
    linear-gradient(135deg, #ffffff 0%, #eaf7fd 60%, #cfeefb 100%);
  background-size: 34px 34px, 100% 100%;
}
.sam-eventfeat-art {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.15;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--wp--preset--color--navy); max-width: 16ch;
}
/* Editor-chosen feature image fills the media panel edge-to-edge, replacing
   the dot-pattern art (client 2026-07). */
.sam-eventfeat-media .sam-eventfeat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sam-eventfeat-panel {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  color: rgba(255,255,255,0.92);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.sam-eventfeat-eyebrow {
  margin: 0 0 0.8rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem;
  font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--yellow);
}
.sam-eventfeat-title {
  margin: 0 0 0.35rem; font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); line-height: 1.02;
  letter-spacing: -0.02em; color: #fff; text-transform: uppercase;
}
.sam-eventfeat-sub {
  margin: 0 0 0.9rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.sam-eventfeat-text {
  margin: 0 0 1.1rem; font-family: var(--wp--preset--font-family--serif);
  font-size: 0.9875rem; line-height: 1.5; color: rgba(255,255,255,0.84); max-width: 52ch;
}
.sam-eventfeat-meta {
  display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.25rem;
  padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.22);
  align-self: stretch;
}
.sam-eventfeat-meta .lbl { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.sam-eventfeat-meta .val { font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; font-weight: 800; color: #fff; }
/* Button on navy: yellow at rest, cyan on hover (client 2026-06). */
.sam-eventfeat-btn {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.85rem 1.4rem; border-radius: 2px;
  background: var(--sam-cta-bg); color: var(--sam-cta-fg);
  transition: background 140ms ease, color 140ms ease;
}
.sam-eventfeat-btn:hover { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }
@media (max-width: 860px) {
  .sam-eventfeat { grid-template-columns: 1fr; }
  .sam-eventfeat-media { min-height: 180px; }
}

.sam-eventcal-up {
  margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--navy);
}
/* Legend now sits by the calendar (paired with the "Upcoming" label), not the
   header — it describes the calendar cards' category colors. */
.sam-eventcal-uprow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.sam-eventcal-uprow .sam-eventcal-up { margin: 0; }

.sam-eventcal { display: grid; grid-template-columns: repeat(var(--sam-cal-cols, 5), 1fr); gap: 0; background: #fff; border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; overflow: hidden; }
.sam-eventcal .cal-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 0.4rem; padding: 1.5rem 1.2rem 1.25rem; border-right: 1px solid var(--wp--preset--color--rule); text-decoration: none; transition: background 160ms ease; }
.sam-eventcal .cal-card:last-child { border-right: 0; }
.sam-eventcal .cal-card:hover { background: var(--wp--preset--color--base-2); }
.sam-eventcal .cal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.cal-card.type-award::before     { background: var(--wp--preset--color--event-award, #006991); }
.cal-card.type-contest::before   { background: var(--wp--preset--color--event-contest, #3A7F2D); }
.cal-card.type-event::before     { background: var(--wp--preset--color--event-industry, #B11116); }
.cal-card.type-education::before { background: var(--wp--preset--color--event-education, #472F92); }
.sam-eventcal .cal-date { display: flex; align-items: baseline; gap: 0.4rem; }
.sam-eventcal .cal-date .mo { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.sam-eventcal .cal-date .dy { font-family: var(--wp--preset--font-family--sans); font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--navy); }
.sam-eventcal .cal-type { font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.cal-card.type-award .cal-type     { color: var(--wp--preset--color--event-award, #006991); }
.cal-card.type-contest .cal-type   { color: var(--wp--preset--color--event-contest, #3A7F2D); }
.cal-card.type-event .cal-type     { color: var(--wp--preset--color--event-industry, #B11116); }
.cal-card.type-education .cal-type { color: var(--wp--preset--color--event-education, #472F92); }
.sam-eventcal .cal-title { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.0625rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--wp--preset--color--navy); }
.sam-eventcal .cal-dek { grid-row: 4; align-self: start; font-family: var(--wp--preset--font-family--serif); font-size: 0.8125rem; line-height: 1.4; color: var(--wp--preset--color--ink-2); }
/* Calendar CTA: navy rule at rest (orange was decorative — removed per client);
   the whole card is the link, so hover paints CTA text + rule orange. */
/* Explicit rows: a card with NO host/dek line must still pin the CTA to the
   bottom row instead of letting it fall into (and stretch across) the 1fr
   filler row — that detached the underline from the text (client 2026-07). */
.sam-eventcal .cal-cta { grid-row: 5; align-self: end; justify-self: start; margin-top: 0.3rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--navy); border-bottom: 2px solid var(--wp--preset--color--navy); padding-bottom: 2px; transition: color 140ms ease, border-color 140ms ease; }
.sam-eventcal .cal-card:hover .cal-cta { color: var(--wp--preset--color--orange); border-bottom-color: var(--wp--preset--color--orange); }
.sam-eventcal-foot { margin-top: 1rem; text-align: right; }
.sam-eventcal-foot a { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--navy); text-decoration: none; }
/* Mobile legend: a tidy 2×2 grid with no mid-label wrapping ("Industry
   Event" was breaking across lines — client R6). */
@media (max-width: 640px) {
  .sam-eventcal-uprow { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
  .sam-eventcal-legend { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 0.45rem 1.4rem; }
  .sam-eventcal-legend .lg { white-space: nowrap; }
}
@media (max-width: 1100px) { .sam-eventcal { grid-template-columns: repeat(3, 1fr); } .sam-eventcal .cal-card:nth-child(3n) { border-right: 0; } }
@media (max-width: 720px)  { .sam-eventcal { grid-template-columns: repeat(2, 1fr); } .sam-eventcal .cal-card:nth-child(3n) { border-right: 1px solid var(--wp--preset--color--rule); } .sam-eventcal .cal-card:nth-child(2n) { border-right: 0; } }
@media (max-width: 520px)  { .sam-eventcal { grid-template-columns: 1fr; } .sam-eventcal .cal-card { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--rule); } }

/* ── INITIATIVES — navy lead + calendar list (legacy) ─────────── */
.sam-init-lead { display: flex; flex-direction: column; height: 100%; }
.sam-init-lead a { text-decoration: none; }
.sam-cal-item a { text-decoration: none; }
/* No side-stripe: the gold accent lives in the category eyebrow (gold-2)
   and the hover state. The card keeps its full 1px rule border. */

/* Dark-band section label: links must be WHITE — the global link color is
   navy, which is invisible on the navy band (it read as a phantom gap under
   the title, client R6). Hover stays orange. */
.sam-depts .sam-section-label a { color: #ffffff; transition: color 140ms ease; }
.sam-depts .sam-section-label a:hover { color: var(--wp--preset--color--orange); }

/* ── MOUNTAIN DEPARTMENTS — dark navy band, photo tiles (client 2026-06) ──
   Default tile: photo + department title only (top-left).
   Hover: an OPAQUE WHITE filter covers the photo, the title turns orange,
   and the dek + "Explore →" appear in orange — orange-on-interaction.
   One featured tile spans both rows (rotated editorially via `feature`). */
.sam-dept-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1rem;
}
/* WP's flow layout injects margin-block-start on the group's children (first
   child 0, rest 1.5rem) — inside a grid that skews row 1 and bloats the row
   gap. Zero it so every gap is the grid's uniform 1rem. */
.sam-dept-grid > * { margin-block-start: 0 !important; margin-top: 0 !important; }
/* …and the grid itself gets the section's 1.5rem flow gap above it — pin it
   to 1rem so the space above row 1 equals the grid gaps (tight, equidistant). */
.sam-depts .sam-dept-grid { margin-block-start: 1rem !important; }
/* Structural split (not an overlay): photo box on TOP, solid navy reading band
   BELOW. White text on opaque navy = fixed, WCAG-strong contrast on every card
   regardless of the photo. Text is never over the image, so bright/busy resort
   photography can't wash it out. Works identically on touch: content lives in
   the band at rest, the whole card is one link, one tap navigates. */
.sam-dept-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px; /* taller card → more of the photo shows (Explore CTA removed) */
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background: var(--wp--preset--color--navy, #04024D);
}
.sam-dept-cover--feature { grid-row: span 2; }
.sam-dept-cover--feature .sam-dept-cover__title { font-size: 1.5rem; }
.sam-dept-cover--feature .sam-dept-cover__dek { max-width: 38ch; font-size: 0.95rem; -webkit-line-clamp: 3; }
.sam-dept-cover--wide { grid-column: 1 / -1; min-height: 200px; }

/* Photo: its own box at the top, fills the space above the band. */
.sam-dept-cover__img {
  position: relative;
  flex: 1 1 auto;
  min-height: 116px;
  background-size: cover;
  background-position: center;
  background-color: var(--wp--preset--color--navy-2, #1B2A8A);
  transform-origin: center;
  transition: transform 460ms cubic-bezier(.2,.6,.2,1);
}
/* Soft dissolve into the band so the seam isn't a hard line. */
.sam-dept-cover__img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(to top, var(--wp--preset--color--navy, #04024D), rgba(4,2,77,0));
  pointer-events: none;
}
.sam-dept-cover.is-imageless .sam-dept-cover__img {
  background: linear-gradient(155deg, var(--wp--preset--color--navy-2, #1B2A8A), var(--wp--preset--color--navy, #04024D));
}
.sam-dept-cover.is-imageless .sam-dept-cover__img::after { display: none; }
.sam-dept-cover__shade { display: none; } /* legibility now comes from the solid band */

/* Solid navy reading band. Horizontal padding is 0 so the title/dek/Explore align
   flush-left with the full-bleed photo above (the band is the same navy as the
   section, so any inset just read as an arbitrary indent — worst on full-width
   mobile). Vertical padding only. */
.sam-dept-cover__meta {
  position: relative; z-index: 2;
  background: var(--wp--preset--color--navy, #04024D);
  padding: 0.9rem 0 1.05rem;
}
.sam-dept-cover__num { display: none; }
.sam-dept-cover__title {
  display: inline-block; /* hug the text so the hover underline matches its width */
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 0.3rem;
  /* Underline-grow on hover (the affordance the old "Explore" CTA carried) — in
     brand orange, the interaction-only color. */
  padding-bottom: 2px;
  background-image: linear-gradient(var(--wp--preset--color--orange, #F37021), var(--wp--preset--color--orange, #F37021));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 300ms cubic-bezier(.2,.6,.2,1), color 200ms ease;
}
.sam-dept-cover__dek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.74);
  max-width: 42ch;
  margin-bottom: 0;
}
.sam-dept-cover__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cyan, #00AEEF); /* cyan on navy = legible CTA at rest */
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 280ms cubic-bezier(.2,.6,.2,1);
}
.sam-dept-cover__arrow { transition: transform 280ms cubic-bezier(.2,.6,.2,1); }

/* Hover/focus = non-essential flourish: slow photo zoom, Explore underline
   grows, arrow nudge. Nothing shown/hidden; touch just loses the flourish. */
@media (hover: hover) {
  .sam-dept-cover:hover .sam-dept-cover__img { transform: scale(1.06); }
}
.sam-dept-cover:hover .sam-dept-cover__more,
.sam-dept-cover:focus-visible .sam-dept-cover__more { background-size: 100% 1.5px; }
.sam-dept-cover:hover .sam-dept-cover__title,
.sam-dept-cover:focus-visible .sam-dept-cover__title { background-size: 100% 2px; color: var(--wp--preset--color--orange, #F37021); }
.sam-dept-cover:hover .sam-dept-cover__arrow,
.sam-dept-cover:focus-visible .sam-dept-cover__arrow { transform: translateX(4px); }
.sam-dept-cover:focus-visible {
  outline: 3px solid var(--wp--preset--color--cyan, #00AEEF);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .sam-dept-cover__img,
  .sam-dept-cover:hover .sam-dept-cover__img { transform: none; transition: none; }
  .sam-dept-cover__arrow,
  .sam-dept-cover:hover .sam-dept-cover__arrow { transition: none; transform: none; }
  .sam-dept-cover__title { transition: none; }
}

/* ── CLASSIFIEDS ──────────────────────────────────────────────── */
.sam-featured-job { overflow: hidden; }
.sam-class-row:last-child { border-bottom: 0 !important; }
.sam-feat-label { display: inline-block; border-radius: 2px; align-self: flex-start; }

/* ── Homepage section polish (client 2026-06) ───────────────────────── */
/* Gray panels (Events, Classifieds): vertical padding equals the horizontal —
   the top/bottom was reading top-heavy vs the clamp(1rem,2vw,2rem) sides. */
.sam-initiatives, .sam-classifieds { padding-top: var(--sam-gutter) !important; padding-bottom: var(--sam-gutter) !important; }
/* Featured classified fills its stretched column so its bottom lines up with the
   two card rows beside it (the cover's 380px floor left a gap below it). */
.sam-classifieds .is-vertically-aligned-stretch > .wp-block-query,
.sam-classifieds .is-vertically-aligned-stretch .wp-block-post-template,
.sam-classifieds .is-vertically-aligned-stretch .wp-block-post-template > li,
.sam-classifieds .sam-class-feat { height: 100%; }
/* Breathing room between the yellow "Featured Listing" chip and the title below. */
.sam-class-feat .sam-feat-label { margin-bottom: 0.55rem; }

/* Featured listing cards — saminfo/classified-feature block (typed) */
.sam-class-stack { display: flex; flex-direction: column; gap: 1rem; }
.sam-class-feature { display: flex; flex-wrap: nowrap; align-items: stretch; border-radius: 2px; overflow: hidden; }
.sam-class-feature__thumb { flex: 0 0 110px; width: 110px; display: block; line-height: 0; background: var(--wp--preset--color--base-2); }
.sam-class-feature__img { width: 110px; height: 110px; object-fit: cover; display: block; transition: filter 160ms ease; }
.sam-class-feature__body { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.sam-class-feature__body .sam-feat-label { margin: 0 0 0.1rem; }
.sam-class-feature__title { margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.sam-class-feature__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sam-class-feature__title a:hover { color: var(--wp--preset--color--orange); }
.sam-class-feature__date { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.sam-class-feature:hover .sam-class-feature__img { filter: brightness(0.93); }

/* Layout A — navy featured anchor + uniform text-card grid (more placements).
   Classified listings have no images in the data, so these are clean text cards
   with a listing-type chip rather than empty image boxes. */
/* Featured listing = image cover card (curated photo + listing overlaid) */
.sam-class-feat.wp-block-cover { height: 100%; border-radius: 2px; overflow: hidden; }
.sam-class-feat .wp-block-cover__image-background { transition: transform 600ms cubic-bezier(.2,.6,.2,1), filter 300ms ease; }
.sam-class-feat:hover .wp-block-cover__image-background { transform: scale(1.04); filter: brightness(1.04); }
.sam-class-feat .sam-feat-label { display: inline-block; align-self: flex-start; border-radius: 2px; }
.sam-class-feat .wp-block-post-title { margin: 0; }
.sam-class-feat .wp-block-post-title a { color: #fff; text-decoration: none; }
.sam-class-feat .wp-block-query, .sam-class-feat .wp-block-post-template { width: 100%; }
.sam-class-feat.sam-class-feat--logo { background-color: #ffffff; }
.sam-class-feat.sam-class-feat--logo .wp-block-cover__image-background,
.sam-class-feat.sam-class-feat--logo .wp-block-cover__image-background[data-object-fit] {
  object-fit: contain !important;
  object-position: center center;
  padding: 2.5rem;
  box-sizing: border-box;
}
.sam-class-feat.sam-class-feat--logo:hover .wp-block-cover__image-background { transform: none; }

.sam-class-grid { gap: 0.85rem !important; }
/* Static rows (saminfo/classified-row) are plain divs — give them the grid. */
.sam-class-grid--row { display: grid; grid-template-columns: repeat(4, 1fr); }
/* let each grid cell's card fill the (row-stretched) cell so bottoms align */
.sam-class-grid > li { display: flex; }
/* saminfo/classified-card — image-or-monogram tile + body.
   Hover (client 2026-06): the section BELOW the gray rule fills orange and
   its text flips to white — orange-on-interaction. */
.sam-class-card { width: 100%; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--wp--preset--color--rule); border-radius: 7px; overflow: hidden; background: var(--wp--preset--color--base); text-decoration: none; box-shadow: 0 1px 2px rgba(3,0,77,0.04); transition: transform 180ms cubic-bezier(.2,.6,.2,1), box-shadow 180ms ease, border-color 180ms ease; }
.sam-class-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--rule); box-shadow: 0 18px 34px -20px rgba(3,0,77,0.42); }
/* listings carry employer LOGOS — contain (don't crop) on a soft tinted tile so
   varied logo shapes/colors read as a consistent set */
/* Image fills the top band of the card as a cover photo (was a contained logo).
   aspect-ratio gives a consistent "upper half" band; object-fit:cover fills it and
   object-position (set inline from the focal-point meta) keeps portraits framed. */
.sam-class-card__tile { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--wp--preset--color--base-2); border-bottom: 1px solid var(--wp--preset--color--rule); overflow: hidden; }
/* Editor-only focal-point handle on each card (opens the drag editor for it). */
.sam-class-card__focus { position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(4,2,77,0.78); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 140ms ease, background 140ms ease; }
.sam-class-card:hover .sam-class-card__focus { opacity: 1; }
.sam-class-card__focus:hover { background: var(--wp--preset--color--orange, #F37021); opacity: 1; }
.sam-class-card__tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 220ms cubic-bezier(.2,.6,.2,1); }
.sam-class-card:hover .sam-class-card__tile img { transform: scale(1.04); }
/* Logo mode (image_type=logo): contain + padding on a white tile so resort logos
   are never cropped/squished (Jordyn 2026-06). No hover scale-crop for logos. */
.sam-class-card__tile--logo { background: #ffffff; padding: 14px; }
.sam-class-card__tile--logo img { object-fit: contain; }
.sam-class-card:hover .sam-class-card__tile--logo img { transform: none; }
.sam-class-card__mono + br { display: none; }
.sam-class-card__mono { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.65rem; letter-spacing: 0.04em; color: var(--wp--preset--color--navy); }
/* body fills the (row-stretched) card; the type chip is pinned to the bottom so
   every card's chip lines up. */
.sam-class-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.95rem 1rem 1rem; transition: background-color 180ms ease; }
/* min-height reserves two title lines so the employment row and the equipment
   row (separate grids) resolve to the SAME card height regardless of whether a
   given title wraps to one line or two (client 2026-07: "make employment boxes
   the same size as equipment boxes"). */
.sam-class-card__title { flex: 1 1 auto; min-height: 2.4rem; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.9375rem; line-height: 1.28; letter-spacing: -0.005em; color: var(--wp--preset--color--navy); transition: color 160ms ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sam-class-card .sam-class-type { margin-top: auto; font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wp--preset--color--cyan-ink); transition: color 160ms ease; }
/* Hover: the lower half (__body) fills SAM Orange with white text — the version
   the client liked, brought back onto the current premium card (lift + line-clamp
   kept). Restores the rule removed in 6306bfa. */
.sam-class-card:hover .sam-class-card__body { background: var(--wp--preset--color--orange); }
.sam-class-card:hover .sam-class-card__title,
.sam-class-card:hover .sam-class-type { color: #ffffff; }

/* Paid-tier hierarchy (REQ-CLASS-16): featured/premium listings carry a corner
   badge and a stronger frame so they read above standard cards. */
.sam-class-card { position: relative; }
.sam-class-card__badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 8px; border-radius: 999px; font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; box-shadow: 0 2px 6px rgba(3,0,77,0.22); }
.sam-class-card__badge--featured { background: var(--wp--preset--color--orange); }
.sam-class-card__badge--premium { background: var(--wp--preset--color--navy); }
.sam-class-card--featured { border-color: var(--wp--preset--color--orange); box-shadow: 0 2px 4px rgba(212,90,30,0.14); }
/* Every tile shares 16:10 — home + archive, desktop + mobile identical (Jordyn 2026-06).
   (Previously featured used 4/3; unified so resorts have ONE ideal image size: 1200×750.) */
.sam-class-card--premium { border-color: color-mix(in oklab, var(--wp--preset--color--navy) 40%, var(--wp--preset--color--rule)); }

/* Equipment photo slideshow — rt-carousel built from the gallery meta (listing detail).
   Jordyn 2026-08: drop the 160px top-left tile on equipment singles; one photo or
   many, the image under the headline uses this larger frame. */
.sam-cl-is-equipment .sam-cl-single-head > .wp-block-column:first-child { display: none; }
.sam-cl-gallery { margin: 0 0 1.5rem; }
/* Viewport clips; track is the flex parent. Putting both on .embla made the
   track a shrinkable item so later slides clipped and Embla could not page. */
.sam-cl-gallery .embla { overflow: hidden; }
.sam-cl-gallery .embla__container { display: flex; }
.sam-cl-gallery .embla__slide { flex: 0 0 100%; min-width: 0; }
.sam-cl-gallery .embla__slide img,
.sam-cl-gallery--single img { width: 100%; height: clamp(320px, 56vh, 640px); object-fit: contain; background: var(--wp--preset--color--base-2); border-radius: 3px; display: block; margin: 0; }
.sam-cl-gallery .wp-block-image,
.sam-cl-gallery--single .wp-block-image,
.sam-cl-gallery a.sam-cl-gallery__full { cursor: zoom-in; display: block; }
.sam-cl-gallery .wp-lightbox-overlay img,
.wp-lightbox-overlay .lightbox-image-container img { object-fit: contain; height: auto; max-height: 90vh; }
.sam-cl-gallery__nav { margin-top: 0.75rem; align-items: center; }
.sam-cl-gallery .rt-carousel-dot.is-active { background-color: var(--wp--preset--color--orange); }
.sam-cl-gallery .rt-carousel-controls__btn:hover { border-color: var(--wp--preset--color--navy); }

/* Classifieds mega-nav highlight (Maximum upgrade — a featured listing tile). */
.sam-cl-navhl { display: block; margin-bottom: 0.85rem; padding: 0.85rem 0.95rem; border: 1px solid var(--wp--preset--color--orange); border-radius: 4px; background: var(--wp--preset--color--base-2); text-decoration: none; transition: box-shadow 140ms ease; }
.sam-cl-navhl:hover { box-shadow: 0 4px 14px -6px rgba(243,112,33,0.4); }
.sam-cl-navhl__eyebrow { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--orange); margin-bottom: 0.4rem; }
.sam-cl-navhl__img { display: block; width: 100%; height: 84px; background-size: cover; background-position: center; border-radius: 3px; margin-bottom: 0.5rem; }
.sam-cl-navhl__title { display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.875rem; line-height: 1.25; color: var(--wp--preset--color--navy); }
.sam-cl-navhl__cat { display: block; margin-top: 0.25rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }

/* Front-end card-image focal-point editor (editors only; toggled from admin bar). */
.sam-focal { position: fixed; right: 1rem; bottom: 1rem; z-index: 99990; width: 320px; max-width: calc(100vw - 2rem); background: var(--wp--preset--color--navy, #04024D); color: #fff; border-radius: 8px; padding: 0.9rem; box-shadow: 0 12px 44px rgba(0,0,0,0.45); font-family: var(--wp--preset--font-family--sans, sans-serif); }
.sam-focal__hd { font-size: 0.72rem; margin-bottom: 0.55rem; }
.sam-focal__hd b { text-transform: uppercase; letter-spacing: 0.1em; }
.sam-focal__hd span { opacity: 0.7; display: block; margin-top: 2px; }
.sam-focal__frame { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-repeat: no-repeat; border-radius: 4px; cursor: crosshair; overflow: hidden; user-select: none; touch-action: none; }
.sam-focal__dot { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #fff; background: rgba(243,112,33,0.55); box-shadow: 0 0 0 2px rgba(0,0,0,0.45); cursor: grab; padding: 0; }
.sam-focal__row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.sam-focal__val { font-size: 0.8rem; font-variant-numeric: tabular-nums; opacity: 0.85; }
.sam-focal__reset { background: rgba(255,255,255,0.16); border: 0; color: #fff; border-radius: 3px; padding: 0.3rem 0.6rem; font: inherit; font-size: 0.75rem; cursor: pointer; }
.sam-focal__reset:hover { background: var(--wp--preset--color--orange, #F37021); }
.sam-cl-tier { display: inline-block; margin: 0 0 1rem; padding: 4px 10px; border-radius: 999px; font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; }
.sam-cl-tier--featured { background: var(--wp--preset--color--orange); }
.sam-cl-tier--premium { background: var(--wp--preset--color--navy); }
.sam-cl-blind-form { display: grid; gap: 8px; max-width: 420px; }
.sam-cl-input { width: 100%; padding: 9px 12px; border: 1px solid var(--wp--preset--color--rule); border-radius: 7px; font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; background: var(--wp--preset--color--base); }
.sam-cl-input:focus { outline: none; border-color: var(--wp--preset--color--orange); box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--orange) 20%, transparent); }
.sam-cl-blind--ok { color: var(--wp--preset--color--navy); font-weight: 700; }
@media (max-width: 980px) { .sam-class-grid, .sam-class-grid--row { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .sam-class-grid, .sam-class-grid--row { grid-template-columns: repeat(2, 1fr) !important; } }

/* ── COMMUNITY BOARD: "Wanted Requests" cards, grid, badges, submit form ──
   Shares the classifieds card language (navy → orange hover, rule borders,
   Overpass/Spectral, cyan chips) so the two systems read as one family. */
.sam-board-grid { display: grid; gap: 0.85rem; }
.sam-board-grid--row { grid-template-columns: repeat(4, 1fr); }
.sam-board-grid--stack { grid-template-columns: 1fr; }
.sam-board-empty { font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; color: var(--wp--preset--color--ink-2); margin: 0; }

.sam-board-card { display: flex; flex-direction: row; align-items: flex-start; gap: 0.9rem; height: 100%; padding: 1.2rem 1.35rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 8px; background: var(--wp--preset--color--base); text-decoration: none; box-shadow: 0 1px 2px rgba(3,0,77,0.04); transition: box-shadow 180ms ease, transform 180ms cubic-bezier(.2,.6,.2,1), border-color 180ms ease; }
.sam-board-card:hover { box-shadow: 0 18px 34px -20px rgba(3,0,77,0.42); transform: translateY(-3px); }
.sam-board-card.is-resolved { opacity: 0.78; }
.sam-board-card.is-boosted { border-color: var(--wp--preset--color--gold-2, var(--wp--preset--color--orange)); }
.sam-board-card__avatar { flex: 0 0 auto; padding-top: 0.1rem; }
.sam-board-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.sam-board-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.sam-board-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; flex-shrink: 0; }
.sam-board-topic { font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--cyan-ink); white-space: nowrap; }
.sam-board-badge { font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 100px; white-space: nowrap; }
.sam-board-badge--pay { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--navy); }
.sam-board-badge--resolved { background: var(--wp--preset--color--base-3); color: var(--wp--preset--color--ink-2); }
.sam-board-badge--boost { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--base); }
.sam-board-badge--sample { background: color-mix(in oklab, var(--wp--preset--color--navy) 10%, transparent); color: var(--wp--preset--color--ink-2); }

.sam-board-card__title { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.9375rem; line-height: 1.28; letter-spacing: -0.005em; color: var(--wp--preset--color--navy); transition: color 140ms ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sam-board-card:hover .sam-board-card__title { color: var(--wp--preset--color--orange); }
.sam-board-card__excerpt { font-family: var(--wp--preset--font-family--serif); font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Calmer meta row: author + time recede to one muted tone, replies lose the
   boxy rule and loud cyan (a quiet dot separator instead), leaving the single
   reputation chip as the only accent. */
.sam-board-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 500; color: var(--wp--preset--color--ink-3); }
.sam-board-card__time { font-weight: 600; color: var(--wp--preset--color--ink-3); }
.sam-board-card__replies { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.6875rem; color: var(--wp--preset--color--ink-3); }
.sam-board-card__replies::before { content: "·"; margin-right: 0.4rem; color: var(--wp--preset--color--ink-3); }

/* Submit + gate */
.sam-board-gate { padding: 1.1rem 1.25rem; border: 1px solid var(--wp--preset--color--cyan); border-radius: 8px; background: var(--wp--preset--color--cyan-tint); font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; line-height: 1.5; }
.sam-board-gate a { color: var(--wp--preset--color--orange-ink); font-weight: 800; text-decoration: none; }
.sam-board-gate a:hover { text-decoration: underline; }
.sam-board-browse-gate { display: flex; flex-direction: column; gap: 1rem; }
.sam-board-gate--browse { margin: 0; }
.sam-board-preview-label { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-board-submit { max-width: 640px; }
.sam-board-submit.is-sent .sam-board-form { display: none; }
.sam-board-form__intro { font-family: var(--wp--preset--font-family--serif); font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--ink-2); margin: 0 0 1.1rem; }
.sam-board-field { display: block; margin-bottom: 0.85rem; }
.sam-board-field > span { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin-bottom: 0.3rem; }
.sam-board-field input[type="text"], .sam-board-field textarea, .sam-board-field select { width: 100%; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; padding: 0.55rem 0.65rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; background: #fff; color: var(--wp--preset--color--ink); }
.sam-board-field input:focus, .sam-board-field textarea:focus, .sam-board-field select:focus { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 1px; border-color: var(--wp--preset--color--cyan); }
.sam-board-field--inline { display: flex; align-items: center; gap: 0.5rem; }
.sam-board-field--inline > span { margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 600; }
.sam-board-boosthint { margin: 0.35rem 0 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--ink-2); }
.sam-board-form__submit { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--orange); border: 0; border-radius: 2px; padding: 0.7rem 1.4rem; cursor: pointer; transition: filter 140ms ease; }
.sam-board-form__submit:hover { filter: brightness(1.06); }
.sam-board-form__submit[disabled] { opacity: 0.6; cursor: default; }
.sam-board-form__error { color: var(--wp--preset--color--event-industry, #b11116); font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; margin: 0.6rem 0 0; }
.sam-board-form__done { padding: 1.1rem 1.25rem; border: 1px solid var(--wp--preset--color--cyan-tint); background: var(--wp--preset--color--cyan-tint); border-radius: 7px; font-family: var(--wp--preset--font-family--sans); }
.sam-board-form__done p { margin: 0 0 0.4rem; }

@media (max-width: 980px) { .sam-board-grid--row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sam-board-grid--row { grid-template-columns: 1fr; } }

/* Archive stream: post-template <ul> of full-width cards (no bullets). */
ul.sam-board-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
ul.sam-board-grid > li { margin: 0; }
.sam-board-grid__cell { display: block; }
ul.sam-board-feed > .sam-board-cell { margin: 0; }

/* Board stat + browse toolbar: topic chips, status segment, sort */
/* ── Board filtering — standardized: one chip language, aligned labeled groups ──
   (prior art: Linear/Airbnb — consistent control system, one accent, calm count) */

/* Row 1: search (grows) + sort. Grid so the search reliably fills. */
.sam-board-filterbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; margin: 0.2rem 0 0.85rem; }
.sam-board-filterbar > .sam-cl-search { margin: 0 !important; min-width: 0; }
.sam-board-filterbar > .sam-cl-search > .sam-cl-search__input { width: 100% !important; max-width: none !important; box-sizing: border-box; }
.sam-board-filterbar > .sam-board-sort { justify-self: end; }
.sam-board-sort select { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--navy); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--rule); border-radius: 100px; padding: 0.5rem 1.9rem 0.5rem 0.95rem; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2304024D' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; }
.sam-board-sort select:focus { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 1px; }

/* Aligned labeled filter groups (Topic / Status / Region) — one shared language. */
.sam-board-filters { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.7rem; }
.sam-board-fgroup { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: start; gap: 0.55rem; }
.sam-board-fgroup__label { font-family: var(--wp--preset--font-family--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); padding-top: 0.5rem; }
.sam-board-fgroup__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ONE chip — identical for topic links, status buttons, and region links. */
.sam-board-chip { display: inline-flex; align-items: center; font-family: var(--wp--preset--font-family--sans); font-size: 0.72rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em; color: var(--wp--preset--color--ink-2); background: var(--wp--preset--color--base); text-decoration: none; padding: 0.42rem 0.8rem; border: 1px solid color-mix(in oklab, var(--wp--preset--color--rule) 72%, transparent); border-radius: 100px; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; transition: background-color 130ms ease, color 130ms ease, border-color 130ms ease; }
.sam-board-chip:hover { border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); }
.sam-board-chip:focus-visible { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 1px; }
.sam-board-chip.is-active { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); }

/* Single, calm result count. */
.sam-board-count { font-family: var(--wp--preset--font-family--sans); font-size: 0.72rem; font-weight: 600; color: var(--wp--preset--color--ink-3); margin: 0 0 1rem; }

ul.sam-board-feed.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 160ms ease; }
.sam-board-more-wrap { display: flex; justify-content: center; margin-top: 1.75rem; }
.sam-board-more { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--navy); background: transparent; border: 1px solid var(--wp--preset--color--navy); border-radius: 2px; padding: 0.7rem 1.5rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.sam-board-more:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); }

@media (max-width: 560px) {
  /* Stack the label above its chips; chips wrap freely. */
  .sam-board-fgroup { grid-template-columns: 1fr; gap: 0.25rem; }
  .sam-board-fgroup__label { padding-top: 0.2rem; }
}

/* Sidebar card */
.sam-board-aside { border-radius: 8px; background: var(--wp--preset--color--base); box-shadow: 0 1px 2px rgba(3,0,77,0.04); position: sticky; top: 7rem; }
.sam-board-rules { padding-left: 1.1rem; }
.sam-board-rules li { margin-bottom: 0.4rem; }
/* Industry resources: phone/contact directory under the board guidelines */
.sam-board-resources { list-style: none; margin: 0; padding: 0; }
.sam-board-resources li { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8); }
.sam-board-resources li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sam-board-resources strong { color: var(--wp--preset--color--navy, #04024d); }
.sam-board-resources a { color: var(--wp--preset--color--cyan-ink, #0a6c8f); text-decoration: none; font-weight: 700; }
.sam-board-resources a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }

/* Single-request detail */
.sam-board-detail__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.sam-board-region { font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-board-detail__actions { margin: 0.75rem 0 0; }
.sam-board-detail__staff { margin: 0.5rem 0 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; }
.sam-board-detail__staff a { color: var(--wp--preset--color--navy); }
.sam-board-resolve { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--navy); background: transparent; border: 1px solid var(--wp--preset--color--navy); border-radius: 2px; padding: 0.5rem 1rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.sam-board-resolve:hover { background: var(--wp--preset--color--navy); color: #fff; }
.sam-board-boost { margin: 1.1rem 0 0; }
.sam-board-boost__copy { margin: 0 0 0.55rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; color: var(--wp--preset--color--ink-2); }
.sam-board-boost__btn { display: inline-block; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--base); background: var(--wp--preset--color--orange); border-radius: 2px; padding: 0.6rem 1.2rem; text-decoration: none; transition: filter 140ms ease; }
.sam-board-boost__btn:hover { color: var(--wp--preset--color--base); filter: brightness(1.06); }
.sam-board-boost.is-boosted { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--wp--preset--color--cyan-ink); }
.sam-board-back a { color: var(--wp--preset--color--navy); text-decoration: none; }
.sam-board-back a:hover { color: var(--wp--preset--color--orange); }

/* ── CLASSIFIEDS: category browse, single-listing facts + CTA ── */
.sam-cl-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.75rem; }
.sam-cl-cats a { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--wp--preset--color--navy); text-decoration: none; padding: 0.35rem 0.8rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 100px; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.sam-cl-cats a:hover { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: #fff; }

.sam-cl-detail { margin-top: 1.5rem; }
.sam-cl-detail__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2rem; margin: 0 0 1.5rem; padding: 1.2rem 1.35rem; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--rule); border-radius: 8px; }
.sam-cl-fact { display: flex; flex-direction: column; gap: 0.1rem; }
.sam-cl-fact dt { font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-cl-fact dd { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; font-weight: 600; color: var(--wp--preset--color--navy); }
.sam-cl-detail__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sam-cl-apply { display: inline-block; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--orange); border-radius: 2px; padding: 0.7rem 1.4rem; text-decoration: none; transition: filter 140ms ease; }
.sam-cl-apply:hover { color: var(--wp--preset--color--base); filter: brightness(1.06); }
.sam-cl-contact { display: inline-block; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--navy); text-decoration: none; border: 1px solid var(--wp--preset--color--navy); border-radius: 2px; padding: 0.65rem 1.2rem; transition: background-color 140ms ease, color 140ms ease; }
.sam-cl-contact:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); }
/* Single-listing logo: framed tile so varied employer logos read as a set */
.single-sam_classified .wp-block-post-featured-image { background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--rule); border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sam-cl-blind { font-family: var(--wp--preset--font-family--serif); font-size: 0.9375rem; color: var(--wp--preset--color--ink-2); margin: 0; }
.sam-cl-blind a { color: var(--wp--preset--color--orange); font-weight: 700; text-decoration: none; }
.sam-cl-estimate { font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; color: var(--wp--preset--color--ink-2); margin: -0.35rem 0 0.85rem; }
.sam-cl-estimate strong { color: var(--wp--preset--color--navy); }
@media (max-width: 560px) { .sam-cl-detail__facts { grid-template-columns: 1fr; } }

/* ── CLASSIFIEDS browse block (dynamic filtering) ── */
.sam-cl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 0.85rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--wp--preset--color--navy); }
.sam-cl-head__lede { min-width: 0; }
.sam-cl-eyebrow { margin: 0 0 0.25rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--navy); }
.sam-cl-title { margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--wp--preset--color--ink); }
/* Title + sibling-hub cross-link share a baseline row, so the wayfinding sits
   NEXT TO the heading (client 2026-08-04) — mirrored on the Parts & Resource
   Board hero for parity — not beside the Post-a-Listing CTA. */
.sam-cl-head__titlerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.sam-cl-post-btn { flex: 0 0 auto; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--orange); border-radius: 2px; padding: 0.6rem 1.1rem; text-decoration: none; transition: background-color 140ms ease, color 140ms ease; }
/* Hover is SAM Navy + white. Selector must beat `.sam-section-label a:hover`
   (gold-2 text) — the CTA lives inside that labeled head group. */
.sam-cl-head a.sam-cl-post-btn:hover,
.sam-cl-head a.sam-cl-post-btn:focus-visible { background: var(--wp--preset--color--navy); color: #fff; }
.sam-cl-board-btn { flex: 0 0 auto; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--navy); background: #fff; border: 2px solid var(--wp--preset--color--navy); border-radius: 2px; padding: 0.55rem 1rem; text-decoration: none; transition: background-color 140ms ease, color 140ms ease; }
.sam-cl-board-btn:hover, .sam-cl-board-btn:focus-visible { background: var(--wp--preset--color--navy); color: #fff; }
.sam-cl-head__actions { display: flex; align-items: center; gap: 0.65rem; flex: 0 0 auto; flex-wrap: wrap; }
/* Shared sibling-hub cross-link (Classifieds ⇄ Parts & Resource Board). One
   class on both heroes guarantees the two links look identical. Cyan text-link
   identity so it reads as "go here", not "filter by this". */
.sam-siblink { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--cyan-ink, #0a6c8f); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color 140ms ease, color 140ms ease; }
.sam-siblink:hover, .sam-siblink:focus-visible { color: var(--wp--preset--color--navy); border-bottom-color: var(--wp--preset--color--cyan, #00aeef); }
/* Parts & Resource Board hero — same title-row treatment as Classifieds so the
   two sibling hubs read as a matched pair (client 2026-08-04). */
.sam-board-hero__titlerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.sam-board-hero__title { margin: 0; }
.sam-board-hero__xlink { margin: 0; }
.sam-board-hero__sub { max-width: 62ch; }
@media (max-width: 640px) {
  /* On narrow screens the title + CTA crowd; let the CTA drop under the lede. */
  .sam-cl-head { flex-wrap: wrap; }
  .sam-cl-head__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .sam-cl-post-btn, .sam-cl-board-btn { width: 100%; text-align: center; }
}
/* Used-equipment disclaimer note (equipment classified pages only) */
.sam-cl-disclaimer { margin: 1.5rem 0 0; padding: 0.85rem 1rem; background: var(--wp--preset--color--base-2, #f7f7f9); border: 1px solid var(--wp--preset--color--rule, #e3e3e8); border-radius: 3px; }
.sam-cl-disclaimer p { margin: 0; font: 400 0.8125rem/1.55 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink-2, #41414a); }
.sam-cl-disclaimer strong { color: var(--wp--preset--color--navy, #04024d); }
.sam-cl-disclaimer a { color: var(--wp--preset--color--cyan-ink, #0a6c8f); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sam-cl-disclaimer a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }
/* "Search Headline News" button on the news archive (client 2026-07-17).
   Lives as the right-hand item of the header's space-between flex row, so it
   carries NO vertical margin of its own — the flex row (verticalAlignment
   bottom) baselines it against the title. (Was margin:-1.5rem 0 2rem for a
   prior stacked layout; that fought the flex row, client 2026-08.) */
.sam-hn-searchbar { display: flex; justify-content: flex-end; margin: 0; }
.sam-hn-searchbtn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--wp--preset--font-family--sans, sans-serif); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--wp--preset--color--navy, #04024d); background: #fff; border: 1px solid var(--wp--preset--color--rule, #d0d0d5); border-radius: 100px; padding: 0.5rem 1.1rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.sam-hn-searchbtn:hover, .sam-hn-searchbtn:focus-visible { background: var(--wp--preset--color--navy, #04024d); border-color: var(--wp--preset--color--navy, #04024d); color: #fff; }
.sam-hn-searchbtn__icon { font-size: 0.95rem; line-height: 1; }
@media (max-width: 600px) { .sam-hn-searchbar { justify-content: stretch; } .sam-hn-searchbtn { width: 100%; justify-content: center; } }

/* News/category archive grid — EQUAL-HEIGHT cards so the bottom rule under every
   card lands on the same baseline across a row (client 2026-08). CSS grid already
   stretches each <li> to the tallest in its row; the fix is to make the card group
   fill that <li> and pin its meta row (byline · date) to the bottom, so the
   border-bottom sits at the cell floor instead of at the ragged content bottom. */
.sam-news-grid.is-layout-grid > li { display: flex; }
.sam-news-grid.is-layout-grid > li > .wp-block-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
/* the last child of the card is the byline·date group — push it (and the rule) down */
.sam-news-grid.is-layout-grid > li > .wp-block-group > .wp-block-group:last-child { margin-top: auto; }

.sam-cl-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.sam-cl-chip { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--wp--preset--color--navy); text-decoration: none; padding: 0.4rem 0.9rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 100px; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.sam-cl-chip:hover { border-color: var(--wp--preset--color--navy); }
.sam-cl-chip.is-active { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); }
/* Mobile: one clean scrollable row instead of 4 wrapped rows (matches the board) */
@media (max-width: 640px) {
  .sam-cl-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .sam-cl-cats::-webkit-scrollbar { display: none; }
  .sam-cl-chip { flex: 0 0 auto; }
}

.sam-cl-count { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); margin: 0 0 1.25rem; }

ul.sam-cl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; transition: opacity 160ms ease; }
ul.sam-cl-grid.is-loading { opacity: 0.45; pointer-events: none; }
.sam-cl-grid > .sam-cl-cell { margin: 0; display: flex; }
@media (max-width: 980px) { ul.sam-cl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { ul.sam-cl-grid { grid-template-columns: repeat(2, 1fr); } }

.sam-cl-more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.sam-cl-more { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--navy); background: transparent; border: 1px solid var(--wp--preset--color--navy); border-radius: 2px; padding: 0.7rem 1.6rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.sam-cl-more:hover { background: var(--wp--preset--color--navy); color: #fff; }

/* ── COMMUNITY BOARD — forum thread (single request) ───────────────────── */
/* Original post card */
.sam-thread-op {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 8px;
  padding: 1.75rem clamp(1.1rem, 3vw, 2rem);
  box-shadow: 0 10px 30px -24px rgba(3,0,77,0.45);
}
.sam-thread-title { color: var(--wp--preset--color--navy); }
/* Board body lives in core/post-content, which doesn't pass our className to its
   wrapper — target it via the thread card. (Drop-cap is scoped to .single-post,
   so no reset needed here.) */
.sam-thread-op .wp-block-post-content { color: var(--wp--preset--color--ink); }
.sam-thread-op .wp-block-post-content p { margin: 0 0 1rem; }

/* OP byline */
.sam-op-byline { align-items: center; }
.sam-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--sans); font-weight: 800; letter-spacing: 0.01em; line-height: 1; }
.sam-op-author { margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.9375rem; color: var(--wp--preset--color--navy); }
.sam-op-date { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-op-byline + .wp-block-post-content { border-top: 1px solid var(--wp--preset--color--base-3); padding-top: 1.1rem; margin-top: 1.1rem; }

/* Replies region — forum thread */
.sam-board-replies { margin-top: 2.5rem; }
.sam-replies-title { margin: 0 0 1.25rem; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--wp--preset--color--navy); padding-bottom: 0.6rem; border-bottom: 2px solid var(--wp--preset--color--navy); }
.sam-board-replies ol.wp-block-comment-template { list-style: none; margin: 0; padding: 0; }
.sam-board-replies ol.wp-block-comment-template > li { margin: 0 0 1.15rem; }
/* nested replies: indented, with a thread connector */
.sam-board-replies ol.wp-block-comment-template ol.children { list-style: none; margin: 1rem 0 0; padding-left: clamp(1rem, 4vw, 2.5rem); border-left: 1px solid var(--wp--preset--color--rule); }

/* Reply = forum post card with a cyan accent rail */
.sam-reply { align-items: flex-start; gap: 0.9rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--rule); border-radius: 8px; padding: 1.1rem 1.25rem; transition: box-shadow 140ms ease; }
.sam-reply:hover { box-shadow: 0 10px 26px -20px rgba(3,0,77,0.4); }
.sam-reply-body { flex: 1 1 auto; min-width: 0; }
.sam-reply-meta { gap: 0.5rem; margin-bottom: 0.15rem; align-items: baseline; }
.sam-reply-author { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.9375rem; color: var(--wp--preset--color--navy); }
.sam-reply-author a { color: inherit; text-decoration: none; }
.sam-reply-date { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-reply-date::before { content: "·"; margin-right: 0.5rem; }
.sam-reply-content { color: var(--wp--preset--color--ink); margin-top: 0.35rem; }
.sam-reply-content p { margin: 0 0 0.6rem; }
.sam-reply-content p:last-child { margin-bottom: 0; }
.comment-awaiting-moderation { display: inline-block; margin: 0.35rem 0; font-style: normal; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; color: var(--wp--preset--color--navy); background: var(--wp--preset--color--cyan-tint); padding: 0.2rem 0.6rem; border-radius: 100px; }
.sam-reply-link { margin-top: 0.8rem; }
.sam-reply-link a { display: inline-block; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--navy); text-decoration: none; border: 1px solid var(--wp--preset--color--rule); border-radius: 100px; padding: 0.3rem 0.85rem; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.sam-reply-link a:hover { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); }

/* Composer */
.sam-board-replies .wp-block-post-comments-form,
.sam-board-replies .comment-respond { margin-top: 2rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--rule); border-radius: 8px; padding: 1.5rem clamp(1.1rem, 3vw, 1.75rem); }
.sam-board-replies .comment-reply-title { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1rem; color: var(--wp--preset--color--navy); margin: 0 0 0.75rem; }
.sam-board-replies .comment-form label { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--navy); }
.sam-board-replies .comment-form textarea,
.sam-board-replies .comment-form input[type="text"],
.sam-board-replies .comment-form input[type="email"],
.sam-board-replies .comment-form input[type="url"] { width: 100%; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; padding: 0.6rem 0.7rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 3px; background: #fff; }
.sam-board-replies .comment-form textarea:focus,
.sam-board-replies .comment-form input:focus { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 1px; border-color: var(--wp--preset--color--cyan); }
.sam-board-replies .form-submit .submit,
.sam-board-replies .wp-block-post-comments-form .wp-element-button { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--navy); border: 0; border-radius: 2px; padding: 0.7rem 1.5rem; cursor: pointer; transition: background-color 140ms ease; }
.sam-board-replies .form-submit .submit:hover,
.sam-board-replies .wp-block-post-comments-form .wp-element-button:hover { background: var(--wp--preset--color--orange); }
.sam-board-replies .comment-form-cookies-consent { font-size: 0.8125rem; }

@media (max-width: 560px) {
  .sam-reply { padding: 0.85rem 0.9rem; }
}

/* ── Gravity Forms on SAM pages (boost, submit-classified-ad) ── */
.sam-page-title { color: var(--wp--preset--color--navy); }
.sam-page .gform_wrapper { margin-top: 0.25rem; }
.sam-page .gform_wrapper .gform_required_legend { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; color: var(--wp--preset--color--ink-3); margin: 0 0 1.25rem; }
.sam-page .gform_wrapper .gform_description { display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.0625rem; line-height: 1.55; color: var(--wp--preset--color--ink-2); margin-bottom: 1.5rem; }
.sam-page .gform_wrapper .gfield { margin-bottom: 1.15rem; }
.sam-page .gform_wrapper .gfield_label,
.sam-page .gform_wrapper legend.gfield_label { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin-bottom: 0.4rem; }
.sam-page .gform_wrapper input[type="text"],
.sam-page .gform_wrapper input[type="email"],
.sam-page .gform_wrapper input[type="url"],
.sam-page .gform_wrapper input[type="number"],
.sam-page .gform_wrapper textarea,
.sam-page .gform_wrapper select { width: 100%; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; padding: 0.6rem 0.7rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 3px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }
.sam-page .gform_wrapper input:focus,
.sam-page .gform_wrapper textarea:focus,
.sam-page .gform_wrapper select:focus { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 1px; border-color: var(--wp--preset--color--cyan); }
.sam-page .gform_wrapper .ginput_container_consent label,
.sam-page .gform_wrapper .gchoice label { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sam-page .gform_wrapper .gfield--type-product .ginput_product_price,
.sam-page .gform_wrapper .ginput_total,
.sam-page .gform_wrapper .gfield_total span { font-family: var(--wp--preset--font-family--sans); font-weight: 800; color: var(--wp--preset--color--navy); }
.sam-page .gform_wrapper .gform_footer { margin-top: 1.5rem; }
.sam-page .gform_wrapper .gform_button { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--base); background: var(--wp--preset--color--navy); border: 0; border-radius: 2px; padding: 0.8rem 1.7rem; cursor: pointer; transition: background-color 140ms ease; }
.sam-page .gform_wrapper .gform_button:hover { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--base); }

/* ── Classified submit: sectioned "how it works / pricing / upgrades" guide ── */
.sam-page .gform_wrapper .sam-cl-formintro-field { margin-bottom: 1.75rem; }
.sam-cl-formintro { padding: 1.25rem 1.4rem; background: var(--wp--preset--color--base-2, #f7f7f9); border: 1px solid var(--wp--preset--color--rule, #e3e3e8); border-left: 3px solid var(--wp--preset--color--cyan, #00aeef); border-radius: 3px; }
.sam-cl-formintro > :first-child { margin-top: 0; }
.sam-cl-formintro > :last-child { margin-bottom: 0; }
.sam-cl-formintro p { font-family: var(--wp--preset--font-family--sans, sans-serif); font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--ink-2, #41414a); margin: 0 0 0.85rem; }
.sam-cl-formintro__lead { font-size: 1rem !important; color: var(--wp--preset--color--ink, #1a1a20) !important; }
.sam-cl-formintro__h { font-family: var(--wp--preset--font-family--sans, sans-serif); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--wp--preset--color--navy, #04024d); margin: 1.4rem 0 0.5rem; }
.sam-cl-formintro__ups { list-style: none; margin: 0 0 0.85rem; padding: 0; }
.sam-cl-formintro__ups li { font-family: var(--wp--preset--font-family--sans, sans-serif); font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--ink-2, #41414a); padding: 0.4rem 0; border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8); }
.sam-cl-formintro__ups li:last-child { border-bottom: 0; }
.sam-cl-formintro__ups strong { color: var(--wp--preset--color--navy, #04024d); }
.sam-cl-formintro__note { font-size: 0.85rem !important; font-style: italic; color: var(--wp--preset--color--ink-3, #6a6a72) !important; }
.sam-cl-formintro a { color: var(--wp--preset--color--cyan-ink, #0a6c8f); font-weight: 700; text-decoration: none; }
.sam-cl-formintro a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }

/* ── Mountain Department badge (official SAM artwork, self-contained) ── */
.sam-dept-badge-lg { margin: 0; }
.sam-dept-badge-lg img { display: block; width: 132px; height: auto; }
/* Homepage Mountain Departments section mark */
.sam-mdept-head { align-items: center; }
.sam-mdept-mark { flex: 0 0 auto; }
.sam-mdept-mark img { display: block; }
.sam-toolkit a { text-decoration: none; }
.sam-media-kit a.wp-block-button__link { text-decoration: none; }

/* ── ARTICLE: header two-col, body, sidebar ───────────────────── */
.sam-article-head-text .wp-block-post-title { margin-top: 0; }
.sam-byline-row .wp-block-post-author-name a { text-decoration: none; }

/* Captions visually distinct from (serif) body → sans, gold rule. Hero/featured
   images never show captions; inline body images and full-bleed figures do. */
.wp-block-image figcaption,
.sam-image-full figcaption {
  font-family: var(--wp--preset--font-family--sans) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
  color: var(--wp--preset--color--ink-2) !important;
  padding-top: 0.5rem;
  position: relative;
}
.wp-block-image figcaption::before,
.sam-image-full figcaption::before {
  content: "";
  display: block;
  width: 28px; height: 2px;
  background: var(--wp--preset--color--navy);
  margin-bottom: 0.45rem;
}

/* Exec summary — newline bullets, compact */
.sam-exec-summary-body {
  margin: 0; padding: 0;
  white-space: pre-line;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
}

/* Drop cap — serif, navy. Scoped to article posts only (NOT board/classifieds
   CPT singles, which are also `.single` but should not get a magazine drop-cap). */
.single-post .wp-block-post-content > p:first-of-type::first-letter,
.sam-dropcap::first-letter {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 800;
  font-size: 4.4em;
  line-height: 0.82;
  float: left;
  color: var(--wp--preset--color--navy);
  margin: 0.06em 0.12em 0 0;
}

/* Article body link contrast — navy at rest, orange on hover (interaction rule).
   Scoped to .single: the homepage renders through wp:post-content too, so an
   unscoped .wp-block-post-content selector underlined the ENTIRE homepage. */
.single .wp-block-post-content a {
  color: var(--wp--preset--color--navy);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--wp--preset--color--navy), transparent 55%);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.single .wp-block-post-content a:hover {
  color: var(--wp--preset--color--orange);
  text-decoration-color: var(--wp--preset--color--orange);
}

/* Pull quotes */
.wp-block-pullquote,
.sam-pullquote {
  margin: 3rem 0;
  padding: 1.5rem 0;
  border-top: 2px solid var(--wp--preset--color--navy);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  text-align: left;
}
.wp-block-pullquote::before,
.sam-pullquote::before {
  content: "";
  display: block;
  width: 36px; height: 2px;
  background: var(--wp--preset--color--navy);
  margin: 0 0 0.75rem;
}
.wp-block-pullquote p,
.sam-pullquote p {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1.3;
  color: var(--wp--preset--color--navy);
}

/* HORIZONTAL PARALLAX AD — full-width navy band, subtle fixed sheen */
.sam-parallax-ad {
  position: relative;
  background-image: linear-gradient(110deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 55%);
  background-attachment: fixed;
}
.sam-parallax-ad::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--wp--preset--color--yellow);
}

/* ── Disappearing top leaderboard — Vanity Fair mechanics ─────────
   Studied from vanityfair.com's ad-stickyhero system (2026-06): the band is
   position:sticky pinned BELOW the site header at a LOWER z-index; to
   disappear, it translateY's up behind the header (0.2s ease-in) while a
   second staggered transition closes the reserved space — two cheap
   transitions, no height jank, and the reader actually SEES it leave
   because the band is stuck on screen when it goes.
   topAdInit (view.js) sets --sam-topad-top to the live masthead height and
   adds .is-collapsed after the reader commits to the page. */
.sam-top-ad {
  position: sticky;
  top: var(--sam-topad-top, 0px);
  z-index: 40; /* below the sticky masthead (z 50) so the band slides UNDER it */
  /* Constrained 1320px with no inline left/right padding — below wideSize the
     creative sat flush to the viewport. Keep the band full-bleed; inset the slot. */
  padding-left: var(--sam-gutter);
  padding-right: var(--sam-gutter);
  box-sizing: border-box;
  /* Tall enough for the largest creative this band serves (970×250 + the
     band's 0.75rem×2 padding ≈ 274px). 220px clipped the bottom of every
     970×250 leaderboard (Karolyn, 2026-08 QA video) — the cap exists only so
     the .is-collapsed zip-up has a numeric height to animate from. */
  max-height: 300px;
  overflow: hidden;
  /* Spring easings — projector-screen physics (client R3). The collapse zip
     is fast and fluid; the RETURN (scrolling back to top) carries the visible
     bounce. linear() is a real damped-spring curve; older browsers get a
     single-overshoot cubic-bezier. */
  --sam-spring-return: cubic-bezier(.34, 1.45, .5, 1);
  --sam-zip-up: cubic-bezier(.55, .06, .28, 1.02);
  /* This (base) transition runs when .is-collapsed is REMOVED — the band
     zips back DOWN with a springy settle. */
  transition: transform 620ms var(--sam-spring-return),
              max-height 380ms cubic-bezier(.22, .61, .36, 1),
              padding 380ms cubic-bezier(.22, .61, .36, 1),
              opacity 260ms ease-out 80ms;
}
@supports (animation-timing-function: linear(0, 1)) {
  .sam-top-ad {
    /* Damped spring ≈ spring(mass 1, stiffness 100, damping 10): one clear
       bounce, then a soft settle — the projector-screen snap. */
    --sam-spring-return: linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.5%, 0.723 12.9%, 0.938 16.7%,
      1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%,
      1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%,
      0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1
    );
  }
}
/* This transition runs when .is-collapsed is ADDED — the fast fluid zip UP
   (any overshoot lands behind the masthead, so it reads clean). */
.sam-top-ad.is-collapsed {
  transform: translateY(-112%);
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  border-bottom-width: 0;
  transition: transform 420ms var(--sam-zip-up),
              max-height 360ms cubic-bezier(.4, 0, .2, 1) 70ms,
              padding 360ms cubic-bezier(.4, 0, .2, 1) 70ms,
              opacity 240ms ease-in 120ms;
}
@media (prefers-reduced-motion: reduce) {
  .sam-top-ad, .sam-top-ad.is-collapsed { transition: none; }
}
/* Center the creative in the band: a 970-wide leaderboard inside the 1320px
   content column otherwise hugs the left edge. (max-width:100% on the img
   already handles narrow viewports.) */
.sam-top-ad .saminfo-ad-slot img,
.sam-top-ad .saminfo-ad-slot video {
  margin-inline: auto;
}

/* ── Full-width PARALLAX ad band (Prinoth-style demo, client 2026-06 R2) ──
   A true full-bleed takeover: the creative is a fixed-attachment background,
   so the band scrolls like a window onto it (the classic parallax read).
   iOS ignores fixed attachment → falls back to a normal cover image. */
.sam-parallax-band {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background-color: var(--wp--preset--color--navy, #04024D); /* fallback when no image / image fails */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  isolation: isolate;
}
@supports (-webkit-touch-callout: none) {
  .sam-parallax-band { background-attachment: scroll; } /* iOS */
}
/* Video background layer: fills the band, behind the gradient + copy. */
.sam-parallax-band__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.sam-parallax-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(2,0,51,0.72) 0%, rgba(2,0,51,0.25) 45%, rgba(2,0,51,0.05) 100%);
}
.sam-parallax-band__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 2rem var(--sam-gutter);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.sam-parallax-band__label {
  position: absolute; z-index: 2; top: 0.9rem; left: var(--sam-gutter);
  font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.75);
}
/* Sponsor logo chip: its own row above the title/CTA line. Light backdrop so
   dark logomarks read over the photo; contained so any aspect ratio behaves. */
.sam-parallax-band__logo {
  flex-basis: 100%;
  align-self: flex-start;
  width: auto;
  max-width: var(--sam-parallax-logo-max-w, 200px);
  height: var(--sam-parallax-logo-h, 2.75rem);
  object-fit: contain;
  object-position: left center;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.45rem 0.7rem;
  border-radius: 2px;
  box-sizing: content-box;
}
.sam-parallax-band__logo--align-center {
  align-self: center;
  object-position: center center;
}
.sam-parallax-band__logo--align-right {
  align-self: flex-end;
  object-position: right center;
}
.sam-parallax-band__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.05;
  letter-spacing: -0.015em; color: #fff; max-width: 24ch;
  text-shadow: 0 1px 18px rgba(2,0,51,0.55);
}
.sam-parallax-band__cta {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.85rem 1.4rem; border-radius: 2px;
  background: var(--wp--preset--color--navy); color: #ffffff;
  transition: background 140ms ease;
}
.sam-parallax-band__cta:hover { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }
@media (prefers-reduced-motion: reduce) {
  .sam-parallax-band { background-attachment: scroll; }
}

/* ── Ad-slot guards ───────────────────────────────────────────────
   Keep oversized creatives (e.g. a video served into a banner slot)
   from blowing out the layout. Caps each IAB slot to its format. */
.sam-ad { display: block; margin-inline: auto; }
/* Ad notation: its own eyebrow system — small all-caps Overpass in navy,
   distinct from editorial orange (COVER STORY / Editors' Picks dates).
   Avoid the `font:` shorthand with multi-family CSS vars (commas break it
   and the label falls back to body Spectral / sentence case). */
.sam-ad-unit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}
.sam-ad-unit > .sam-ad-notation,
.sam-ad-notation {
  margin: 0;
  padding: 0;
  font-family: var(--wp--preset--font-family--sans), "Overpass", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  text-align: center;
}
/* IMAGE creatives render at their intrinsic ratio — never upscaled past their
   own pixels, never cropped (client 2026-07: real 728×90 uploads were being
   height-cut by a fixed-height cover crop). */
.sam-ad img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.sam-ad video { display: block; width: 100%; height: auto; object-fit: contain; }
/* Leaderboard band: bound VIDEO creatives to a clean ~90px strip (the original
   reason this slot was height-capped — a 16:9 hero video assigned here blew out
   to 200px+). Images are exempt: a real 728×90 shows all 90 of its pixels. */
.sam-ad--leaderboard-728x90,
.sam-ad--article-mid-leaderboard { max-width: 970px; margin-inline: auto; border-radius: 4px; }
.sam-ad--leaderboard-728x90 > video,
.sam-ad--article-mid-leaderboard > video { width: 100% !important; height: 90px !important; object-fit: cover !important; }
.sam-ad--billboard-970x250 { max-width: 970px; }
.sam-ad--billboard-970x250 img, .sam-ad--billboard-970x250 video { max-height: 260px; }
.sam-ad--sidebar-300x250 { max-width: 300px; }
.sam-ad--sidebar-300x250 img, .sam-ad--sidebar-300x250 video { max-height: 260px; }

/* ── Callout variations (editor block-variations) ─────────────── */
.sam-callout { margin-block: 1.5rem; padding: 1rem 1.5rem; background: var(--wp--preset--color--base-2); }
/* Callout system reads as a family: a top accent rule sets the type.
   navy = context, gold = by-the-numbers. (Top rules, not side stripes.) */
.sam-callout-context { border-top: 2px solid var(--wp--preset--color--navy); }
.sam-callout-numbers { border-top: 2px solid var(--wp--preset--color--yellow); background: var(--wp--preset--color--base-2); }
.sam-callout-numbers strong {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.75rem;
  color: var(--wp--preset--color--navy); display: inline-block; margin-right: 0.5rem;
}
/* Editor's note is a quiet aside — the italic serif carries it; a hairline
   top rule sets it off without a colored stripe. */
.sam-callout-editors-note {
  border-top: 1px solid var(--wp--preset--color--rule); background: transparent;
  font-family: var(--wp--preset--font-family--serif); font-style: italic;
  font-size: 0.9375rem; color: var(--wp--preset--color--ink-2);
}
.sam-callout-methodology { background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--rule); font-size: 0.9375rem; }
.sam-callout .sam-callout-label {
  font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--navy); margin-bottom: 0.5rem;
}

/* Inline-right + full-bleed images */
.sam-image-inline-right { float: right; margin: 0.5rem 0 1rem 1.5rem; max-width: 50%; }
.sam-image-inline-right img { width: 100%; height: auto; }
.sam-image-full, .sam-image-full.alignfull { margin-block: 2rem; }
.sam-image-full figcaption { max-width: 1080px; margin: 0.5rem auto 0; padding: 0 1rem; }

/* ════════════════════════════════════════════════════════════════
   EDITORIAL PATTERN LIBRARY — callouts, quotes, stats, carousels.
   These back the curated SAMinfo pattern set (themes/.../patterns/).
   Tokens only; ported from design-lab/06–09-article*.html.
   ════════════════════════════════════════════════════════════════ */

/* What This Means / Key Points — accent-barred takeaway lists */
.sam-takeaways {
  margin-block: 1.75rem; padding: 1.1rem 1.5rem 1.25rem;
  background: var(--wp--preset--color--base-2);
  border-left: 3px solid var(--wp--preset--color--navy);
}
.sam-takeaways ul, .sam-keypoints ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.sam-takeaways li, .sam-keypoints li {
  position: relative; padding-left: 1.4rem;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.0625rem; line-height: 1.5; color: var(--wp--preset--color--ink);
}
.sam-takeaways li::before, .sam-keypoints li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--wp--preset--color--navy); font-weight: 700;
}

/* Stat / data panel — name left, figure right, hairline-divided rows */
.sam-stat-panel { margin-block: 1.75rem; }
.sam-stat-panel .sam-stat {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; padding: 0.7rem 0; border-bottom: 1px dotted var(--wp--preset--color--rule);
}
.sam-stat-panel .sam-stat:last-child { border-bottom: 0; }
.sam-stat-panel .sam-stat > * { max-width: none; margin: 0; } /* defeat constrained-layout child rules */
.sam-stat__name {
  font-family: var(--wp--preset--font-family--serif); font-style: italic;
  font-size: 0.9375rem; color: var(--wp--preset--color--ink-2);
}
.sam-stat__v {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: 1.25rem; letter-spacing: -0.01em; color: var(--wp--preset--color--navy);
  font-feature-settings: "tnum"; white-space: nowrap;
}

/* Sourced pull quote — attribution line under the SAM pull-quote treatment */
.sam-pullquote cite {
  display: block; margin-top: 0.9rem;
  font-family: var(--wp--preset--font-family--sans); font-style: normal;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-2);
}

/* Carousels are now rtCarousel blocks (saminfo/carousel-*). Brand theming only —
   the plugin owns layout/interaction; we tint the eyebrow, active dot, and
   arrow hover to the SAM palette. */
.sam-carousel-eyebrow {
  font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-2);
  margin-bottom: 2rem;
}
.rt-carousel .rt-carousel-dot.is-active { background-color: var(--wp--preset--color--orange); }
.rt-carousel .rt-carousel-controls__btn:hover { border-color: var(--wp--preset--color--navy); }

/* ════════════════════════════════════════════════════════════════
   SECTION / EDITORIAL POP — full-width bands, splits, heroes, and
   article-flow accents (back the saminfo/section-* + editorial-* patterns).
   Tokens only. ════════════════════════════════════════════════════ */

/* Split feature — photo edge-to-edge beside a navy plate; stacks on mobile */
.sam-splitfeature { align-items: stretch; }
.sam-splitfeature > .wp-block-column { margin: 0; }
.sam-splitfeature .wp-block-image,
.sam-splitfeature .wp-block-image img { height: 100%; margin: 0; }
.sam-splitfeature .wp-block-image img { width: 100%; object-fit: cover; display: block; min-height: 280px; }
@media (max-width: 781px) {
  .sam-splitfeature .wp-block-image img { min-height: 220px; }
}

/* Quote over image — large serif quote on the cover wash */
.sam-quote-cover .wp-block-cover__inner-container { max-width: 56ch; }
.sam-quote-cover__q {
  margin: 0; color: #fff;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.28;
  text-shadow: 0 1px 18px rgba(2,0,51,0.5);
}
.sam-quote-cover__cite {
  margin: 0.9rem 0 0; color: #c9cbe0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Standfirst — magazine deck/lede under the title */
.sam-standfirst {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.4;
  color: var(--wp--preset--color--ink);
  margin-block: 1.25rem 1.75rem; padding-left: 1.1rem;
  border-left: 3px solid var(--wp--preset--color--orange);
}

/* Data spotlight — the one big number + a sentence of context */
.sam-spotlight {
  display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
  margin-block: 1.75rem; padding: 1.1rem 0;
  border-top: 2px solid var(--wp--preset--color--navy);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.sam-spotlight > * { margin: 0; max-width: none; }
.sam-spotlight__num {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 0.92; letter-spacing: -0.02em;
  color: var(--wp--preset--color--orange); font-feature-settings: "tnum";
}
.sam-spotlight__ctx {
  flex: 1 1 14rem; font-family: var(--wp--preset--font-family--serif);
  font-size: 1.0625rem; line-height: 1.45; color: var(--wp--preset--color--ink-2);
}

/* Section divider — orange rule + uppercase kicker between chapters */
.sam-sectiondivider {
  margin-block: 2.5rem; padding-top: 1.1rem;
  border-top: 2px solid var(--wp--preset--color--orange);
}
.sam-sectiondivider__kicker {
  margin: 0; font-family: var(--wp--preset--font-family--sans);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--navy);
}

/* Author card — name/bio hairline box */
.sam-authorcard { border-radius: 3px; margin-block: 2rem; }
.sam-authorcard .wp-block-columns { margin: 0; }
.sam-authorcard p { margin: 0; }
.sam-authorcard .wp-block-column + .wp-block-column p:first-child { margin-bottom: 0.25rem; }

/* Sponsor takeover band — orange top rule + a quiet "Sponsored" label */
.sam-sponsor-band { border-top: 3px solid var(--wp--preset--color--orange); }
.sam-sponsor-band__label {
  margin: 0 0 1rem; font-family: var(--wp--preset--font-family--sans);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
}

/* Save Article button */
.sam-save-button:hover {
  background: var(--wp--preset--color--base-2);
  border-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--navy);
}
.sam-save-button[data-saved="1"] {
  border-color: var(--wp--preset--color--cyan);
  color: var(--wp--preset--color--navy);
}

/* Empty-image guard */
.wp-block-post-featured-image:not(:has(img)) { display: none; }

/* Department/column singles use single.html. Stack issue date, title, dek,
   byline, then fill sam-article-head-media full-width — not the magazine 50/50.
   Empty media still collapses when featured_media is 0. */
body.sam-type-department .sam-article-head-cols,
body.sam-type-column .sam-article-head-cols {
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
}
body.sam-type-department .sam-article-head-text,
body.sam-type-department .sam-article-head-media,
body.sam-type-column .sam-article-head-text,
body.sam-type-column .sam-article-head-media {
  flex-basis: 100% !important;
  width: 100%;
  max-width: 100%;
}
.sam-article-head:not(:has(.sam-article-head-media img)) .sam-article-head-media {
  display: none;
}
.sam-article-head:not(:has(.sam-article-head-media img)) .sam-article-head-text {
  flex-basis: 100% !important;
  width: 100%;
  max-width: 100%;
}

/* Skip link */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: static; display: inline-block; padding: 8px 12px;
  background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--navy);
  font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   - Featured content stacks first (lead column is first in DOM)
   - Dept cards reflow + hide latest text
   - Carousel single-item snap
   - Sub-navs hide on mobile
   ════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 980px) {
  .sam-dept-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sam-article-head .wp-block-columns { flex-wrap: wrap; }
}

/* Phone */
/* Tablet / small-laptop (782–1139px): the 8-item mega nav can't fit on one row
   (the last item clips off-screen) and an open mega panel eats too much height
   for the available width. Switch to the mobile drawer across this whole range —
   not just below 781px — while keeping the masthead at its desktop size. The
   toggle lives in .sam-header-right (a masthead sibling of .sam-primary-nav), so
   hiding the nav here doesn't hide the hamburger. */
@media (max-width: 1139px) {
  .sam-primary-nav { display: none; }
  .sam-nav-toggle { display: inline-flex; }
  /* The secondary masthead links all live in the drawer too (Subscribe, Sign in,
     My Account, Sign out), so drop them from the bar across this range. Net effect
     is a CLEANER masthead than the desktop one — it sheds ~300px of links and adds
     only the ~70px hamburger — leaving logo + tagline + search + Menu. */
  .sam-header-right .sam-util-link,
  .sam-header-right .sam-utility-subscribe,
  .sam-header-right .sam-utility-social { display: none; }
}

@media (max-width: 781px) {
  /* Masthead: hide center tagline, keep logo + subscribe */
  .sam-masthead-tagline { display: none; }

  /* Beats rail stays, but scrolls horizontally (label hidden to save room) */
  .sam-subnav-label { display: none; }
  .sam-subnav-links { font-size: 0.8125rem; -webkit-overflow-scrolling: touch; }
  .sam-subbeats { position: static; }
  .sam-subbeats-links { font-size: 0.75rem; }

  /* Masthead fit: smaller logo, compact actions */
  .sam-header-bar .sam-logo img { width: 150px !important; --sam-logo-scrolled-w: 118px; }
  .sam-subscribe-btn { padding: 0.6rem 0.85rem; font-size: 0.625rem; }
  .sam-search-trigger { width: 38px; height: 38px; }

  /* The masthead's right cluster was overflowing the row (horizontal scroll):
     too many items for a phone. Drop the secondary utility links + social into
     the drawer; keep Subscribe + search + Menu. Allow the bar to wrap and never
     exceed the viewport as a safety net. */
  .sam-header-right .sam-util-link,
  .sam-header-right .sam-utility-social { display: none; }
  .sam-header-right { gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .sam-header-bar { flex-wrap: wrap; row-gap: 0.5rem; }
  /* Safety net against a stray horizontal scroll from the bar — clip the header
     itself (the drawer is a SIBLING, not a child, so it isn't affected). */
  .sam-site-header { overflow-x: clip; }

  /* Search overlay → single column, slimmer */
  .sam-search-panel .inner { padding: 1.25rem; }
  .sam-search-form { grid-template-columns: 1fr auto; grid-template-areas: "field close" "clear clear"; }
  .sam-search-form .prefix { display: none; }
  .sam-search-overlay input[type="search"] { font-size: 1.0625rem; } /* 17px — fits more, ≥16px so no iOS zoom */
  .sam-search-body { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Modals → snug padding */
  .sam-modal-inner { padding: 1.75rem; }

  /* Mobile uses the masthead toggle + custom drawer; hide the desktop nav
     bar and the masthead Subscribe button (Subscribe lives in the drawer). */
  .sam-primary-nav { display: none; }
  .sam-subscribe-btn { display: none; }
  .sam-nav-toggle { display: inline-flex; }

  /* Featured: lead stacks above picks (lead is first in DOM) */
  .sam-featured .wp-block-column { flex-basis: 100% !important; }

  /* The Latest: feed stacks above sidebar; feed rows go single-col */
  .sam-latest .wp-block-columns,
  .sam-feed-row,
  .sam-initiatives .wp-block-columns,
  .sam-classifieds .wp-block-columns,
  .sam-featured-job .wp-block-columns,
  .sam-vendor-spotlight .wp-block-columns,
  .sam-dept-embed .wp-block-columns,
  .sam-media-kit .wp-block-columns,
  .sam-article-body .wp-block-columns,
  .sam-newsletter .wp-block-columns,
  .sam-dept-newsletter .wp-block-columns { flex-wrap: wrap; }
  .sam-latest .wp-block-column,
  .sam-feed-row .wp-block-column,
  .sam-initiatives .wp-block-column,
  .sam-classifieds .wp-block-column,
  .sam-featured-job .wp-block-column,
  .sam-article-body .wp-block-column,
  .sam-newsletter .wp-block-column { flex-basis: 100% !important; }

  /* Article header: featured image first on mobile */
  .sam-article-head .wp-block-columns { flex-direction: column-reverse; }
  .sam-article-head .wp-block-column { flex-basis: 100% !important; }

  /* Article body: don't wrap text around floated/inline images on mobile —
     it creates cramped columns + awkward drop-cap wrap. Stack them. */
  .wp-block-post-content img,
  .wp-block-post-content .alignleft,
  .wp-block-post-content .alignright,
  .wp-block-post-content .sam-image-inline-right {
    float: none !important;
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1rem;
    max-width: 100% !important;
    height: auto;
  }

  /* Releasing sidebar never sticky on mobile (also enforced in JS) */
  .sam-sidebar { position: static !important; }

  /* Department hero: badge centers above text */
  .sam-dept-hero .wp-block-columns { flex-wrap: wrap; }
  .sam-dept-hero .wp-block-column { flex-basis: 100% !important; }
  .sam-dept-stats { order: 3; }

  /* Carousel: ~1.1 cards visible, snap through */
  .sam-headlines-track .sam-headline-card,
  .sam-headlines-track .sam-headline-signup,
  .sam-headlines-track .sam-hl-more { width: 84%; }

  /* Client 2026-07: never sticky-pin the sign-up on mobile — at 84% wide it
     covers essentially the whole viewport and buries the news. It rides inline
     as a normal tile instead, and the prev arrow returns to the left edge.

     Desktop hoists it to slot 1 with order:-1; here it should read as slot 4.
     Track order in the live page markup is: sign-up, cards 1-8, "More" tile —
     the sign-up is FIRST, not last, so every slot has to be stated explicitly
     rather than leaning on source order. Verified against the rendered page,
     not patterns/home.php: front-page.html renders wp:post-content, so the
     homepage markup lives in the DB and the pattern file does not describe it.

     Note `.wp-block-post-template > li` is display:contents, so the flex item
     is the card inside the li, not the li itself — hence reaching through with
     `> .sam-headline-card`. The "More" tile is a direct child of the track. */
  .sam-headlines-track .sam-headline-signup { position: static; box-shadow: none; }
  .sam-headlines-track .wp-block-post-template > li:nth-child(-n+3) > .sam-headline-card { order: 0; }
  .sam-headlines-track .sam-headline-signup { order: 1; }
  .sam-headlines-track .wp-block-post-template > li:nth-child(n+4) > .sam-headline-card { order: 2; }
  .sam-headlines-track .sam-hl-more { order: 3; }
  /* Nothing is sticky here, so the cards snap flush to the real start edge. */
  .sam-headlines-track { scroll-padding-left: 0; }
  .sam-headlines-scroller .sam-hl-prev { left: 10px; }

  /* Dept cards: single column; the featured tile is just one tall card */
  .sam-dept-grid { grid-template-columns: 1fr !important; }
  .sam-dept-cover--feature { grid-row: auto; min-height: 260px; }
  .sam-dept-badge { width: 32px; height: 32px; font-size: 1rem; }

  /* Tighter section rhythm */
  .sam-headlines, .sam-latest, .sam-initiatives, .sam-depts,
  .sam-classifieds, .sam-archives { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .sam-newsletter, .sam-media-kit { padding: 2rem 1.25rem !important; }

  /* Footer: brand column full width, then the four link lists as a 2×2 grid
     (a single stacked column scrolled forever — client R6). */
  .sam-site-footer .wp-block-columns { flex-direction: row; flex-wrap: wrap; gap: 1.75rem 1.5rem; }
  .sam-site-footer .wp-block-column { flex: 1 1 calc(50% - 0.75rem) !important; min-width: 0; }
  .sam-site-footer .wp-block-column:first-child { flex: 1 1 100% !important; }

  /* The Magazine: the in-feed "All articles in this issue →" stacks right
     under the header's "Read the current issue →" — redundant; hide it here
     and keep the issue label (client R6). */
  .sam-curissue-all { display: none; }

  /* Mountain Departments header: tighter rhythm — space above the grid
     should not exceed the space above the title. */
  .sam-depts .sam-section-label { margin-bottom: 0.75rem !important; }
  .sam-depts .sam-mdept-mark img { width: 56px !important; }

  /* Section heading scale */
  .sam-section-label .wp-block-heading { font-size: clamp(1.375rem, 1.1rem + 2vw, 2rem) !important; }
  .single .wp-block-post-title { font-size: clamp(1.75rem, 1.3rem + 3vw, 2.5rem) !important; }
}

/* Narrowest — aggressive word breaking + declutter the utility bar */
@media (max-width: 540px) {
  .wp-block-post-title, .wp-block-heading { overflow-wrap: anywhere; }
  .sam-headline-signup .wp-block-heading,
  .sam-headline-signup__title {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  .sam-utility-social { display: none; }
  .sam-utility-row { justify-content: flex-end; }
}

/* Phones: keep the masthead to a single clean row — logo + Subscribe + search +
   hamburger (the "Menu" word and a larger logo pushed the row past ~405px, wider
   than common phones). Subscribe stays (key CTA; also in the drawer). */
@media (max-width: 600px) {
  .sam-header-bar .sam-logo img { width: 132px !important; --sam-logo-scrolled-w: 104px; }
  .sam-nav-toggle-label { display: none; }
  /* Headline cards: bigger title, tighter to the image (client 2026-06). */
  .sam-headlines-track .sam-headline-card > .wp-block-group { padding-top: 0.55rem !important; }
  .sam-headline-card .wp-block-post-title { font-size: 1.25rem !important; line-height: 1.22; }
  .sam-header-right { gap: 0.45rem; }
  .sam-utility-subscribe { padding: 0.38rem 0.7rem; font-size: 0.625rem; }
}

/* ── MEGA MENU — Departments panel (Topics · Latest · Recommends) ──────
   Mega is now the single nav-dropdown system (see the shared column system
   further down); these are the Departments-specific column classes. ──── */
.sam-mega-nav { position: relative; }
.sam-mega-row { align-items: stretch; }
/* WP gives any group with a background `padding:1.25em 2.375em` via a
   zero-specificity :where() rule. We keep the left/right gutter (set above) but
   zero the vertical padding so the bar hugs the links — the hover/active
   highlight then fills the full bar height and the orange underline sits flush
   at the bottom edge (instead of floating with navy space above and below).

   This was a COMPOUND selector (`.sam-primary-nav.sam-mega-nav`) requiring both
   classes on one element. That held for the old hand-authored nav, but the Ollie
   Menu Designer migration split them across two nested <nav>s — `sam-primary-nav`
   on the outer group, `sam-mega-nav` on the inner wp:navigation — so the rule has
   silently matched nothing since, and the navy padding came back (client
   2026-07-20). Single class: it targets the bar itself.

   WP 7.1's `.wp-block-group.has-background` (0,2,0) and `.has-global-padding`
   beat a lone `.sam-primary-nav` (0,1,0) and put the 1.25em group padding back
   (navy strips above/below the hover fill). Qualify with both classes. */
.sam-primary-nav { padding-top: 0; padding-bottom: 0; }
.wp-block-group.sam-primary-nav.has-background,
.wp-block-group.sam-primary-nav.has-global-padding {
  padding-top: 0;
  padding-bottom: 0;
}
/* Nav links: slightly larger text, no underline; rollover = orange highlight
   (client 2026-06). */
.sam-mnav-link {
  display: flex; align-items: center; padding: 1.15rem 1.15rem; color: #fff;
  font: 700 0.875rem/1 var(--wp--preset--font-family--sans); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; transition: background 160ms ease, color 160ms ease;
}
.sam-mnav-link span { margin-left: 0.35rem; font-size: 0.7em; opacity: 0.7; }
.sam-mnav-link:hover,
.sam-mnav-trigger.is-active,
.sam-has-mega:focus-within .sam-mnav-trigger {
  background: var(--wp--preset--color--orange);
  color: #fff;
}

/* ── RETIRED 2026-06: VARIANT A — horizontal "Beats" sub-nav strip ──────
   News moved to the mega panel; NO nav item uses .sam-has-sub / .sam-subnav-*
   anymore (every item is now a mega). These rules are kept only as a reference
   for a future horizontal sub-nav and can be deleted. (Note: .sam-subbeats on
   the department template is a DIFFERENT, still-live component.) */
.sam-subnav-drop {
  position: absolute; left: 0; right: 0; top: calc(100% - 24px);
  background: #fff;
  border: 1px solid var(--wp--preset--color--rule);
  border-top: 0;
  box-shadow: 0 28px 64px -32px rgba(3, 0, 77, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  z-index: 60;
}
.sam-has-sub:hover .sam-subnav-drop,
.sam-has-sub:focus-within .sam-subnav-drop {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.sam-subnav-drop .sam-subnav-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 0.9rem var(--sam-gutter);
}
/* ════════════════════════════════════════════════════════════════
   BUTTON INTERACTION SYSTEM (brand rule, token-driven)
   ────────────────────────────────────────────────────────────────
   Orange is the interaction accent on LIGHT grounds; CYAN on DARK grounds.
   theme.json holds the color VALUES + the LIGHT default (navy button, orange
   hover). It can't express "cyan only on dark" (no contextual selectors), so
   this thin layer routes the same tokens by context. ANY button — a core
   Button block an editor drops in, or our components — picks it up:

     • Editor sets a block's background to SAM Navy/Navy-2/Navy-deep/Ink from the
       palette → WP auto-adds .has-<token>-background-color → buttons inside flip.
     • For image/gradient dark sections with no bg-color class, apply the
       "Dark surface (cyan CTAs)" block style (is-style-on-dark) in the editor.

   Result: no per-component code needed for future/dynamic content. */
:root {
  /* CTA REST tokens (light surfaces) + HOVER tokens. Dark contexts override
     both below. Client 2026-06-19: on dark navy, CTAs are CYAN at rest and roll
     to ORANGE on hover (reversed from the earlier yellow→cyan). */
  --sam-cta-bg: var(--wp--preset--color--yellow);
  --sam-cta-fg: var(--wp--preset--color--navy);
  --sam-hover-bg: var(--wp--preset--color--orange);
  --sam-hover-fg: #ffffff;
}
/* Dark contexts flip the interaction token. Includes WP's auto background
   classes (dynamic/editorial content), the editorial block style, and our own
   dark component surfaces so the whole site shares ONE rule. */
.has-navy-background-color,
.has-navy-2-background-color,
.has-navy-deep-background-color,
.has-ink-background-color,
.is-style-on-dark,
.sam-mega-promo,
.sam-hero-feature,
.sam-eventfeat,
.sam-parallax-band,
.sam-hero-carousel,
.sam-signup-form,
.sam-cta-form,
.sam-spot:not(.sam-spot--orange) {
  --sam-cta-bg: var(--wp--preset--color--cyan);
  --sam-cta-fg: var(--wp--preset--color--navy);
  --sam-hover-bg: var(--wp--preset--color--orange);
  --sam-hover-fg: #ffffff;
}
/* Core button blocks (dynamic content): on a dark section, default to CYAN at
   rest so they never read navy-on-navy. Guarded by :not(.has-background) /
   :not(.has-text-color) — WP adds those classes only when an editor explicitly
   picks a button colour, so this default applies ONLY when they haven't and never
   overrides a deliberate choice. */
:is(.has-navy-background-color, .has-navy-2-background-color, .has-navy-deep-background-color, .has-ink-background-color, .is-style-on-dark) .wp-element-button:not(.has-background) {
  background-color: var(--sam-cta-bg);
}
:is(.has-navy-background-color, .has-navy-2-background-color, .has-navy-deep-background-color, .has-ink-background-color, .is-style-on-dark) .wp-element-button:not(.has-text-color) {
  color: var(--sam-cta-fg);
}
/* Hover routes to the contextual token — ORANGE on hover in every context (rest
   colour is yellow on light, cyan on dark). Matches theme.json's selector
   specificity and loads after it, so it wins by cascade. */
.wp-element-button:hover,
.wp-block-button__link:hover {
  background-color: var(--sam-hover-bg);
  color: var(--sam-hover-fg);
}
/* Our component CTAs are <a>s, so WP's element link :hover (orange text +
   underline) TIES our button :hover (both 0,2,0) and can win by cascade order —
   that's the orange-text-on-cyan bug. The `a.` element prefix out-specifies it
   (0,2,1) and removes the link underline so on-dark CTAs read as cyan + navy. */
a.sam-spot-cta-btn:hover,
a.sam-hf-btn:hover,
a.sam-mega-promo-btn:hover,
a.sam-eventfeat-btn:hover,
a.sam-parallax-band__cta:hover {
  color: var(--sam-hover-fg);
  text-decoration: none;
}

/* PERSISTENT STAGE — the single white frame that stays mounted while the active
   panel's content cross-fades on top of it. JS sets its height; the height
   transition is the "morph" you see when moving item→item. The top:calc(100%-24px)
   seats it flush under the fixed 53px bar (matches the panels). */
.sam-mega-stage {
  position: absolute; left: 0; right: 0; top: calc(100% - 24px);
  height: 0; overflow: hidden;
  background: #fff;
  border: 1px solid var(--wp--preset--color--rule);
  border-top: 0;
  box-shadow: 0 28px 64px -32px rgba(3, 0, 77, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, visibility 0s linear 200ms;
  z-index: 55;
}
.sam-mega-stage.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

/* PANELS — content layers stacked at the same coordinates, transparent (the stage
   is the frame). Only `.is-active` is shown; switching cross-fades the content. */
.sam-mega {
  position: absolute; left: 0; right: 0; top: calc(100% - 24px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  z-index: 60;
}
.sam-mega.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .sam-mega-stage { transition: opacity 120ms ease, visibility 0s linear 120ms; }
  .sam-mega { transition: opacity 120ms ease, visibility 0s linear 120ms; }
}
/* No-JS fallback — without the Interactivity runtime there's no stage, so give the
   panel its own frame and reveal it on hover/focus (degrades gracefully). */
@media (scripting: none) {
  .sam-has-mega:hover .sam-mega,
  .sam-has-mega:focus-within .sam-mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    background: #fff; border: 1px solid var(--wp--preset--color--rule); border-top: 0;
    box-shadow: 0 28px 64px -32px rgba(3, 0, 77, 0.55);
  }
}
/* EDITOR ONLY — sam-blocks.css is an editor style, so the hide-until-JS rules
   above also load inside the Site Editor iframe, where nothing adds .is-active.
   That left every mega template part rendering as an un-editable white void
   (opacity:0 + visibility:hidden + pointer-events:none, floated out of flow by
   position:absolute). Inside .editor-styles-wrapper (the canvas body), pin the
   panel back in-flow and fully visible so it can be edited. Front end unaffected —
   this selector never matches there. */
.editor-styles-wrapper .sam-mega,
.editor-styles-wrapper .sam-mega-stage {
  position: static;
  height: auto;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
/* The linked cards stretch a title link over the whole card via ::after. In the
   editor that invisible overlay would swallow clicks meant to select the inner
   paragraphs, so drop it here — the links stay editable as plain text. */
.editor-styles-wrapper .sam-mega-tile-title a::after,
.editor-styles-wrapper .sam-mega-promo-title a::after {
  content: none;
}

/* Flex set here (not just via the WP group layout) so the raw-HTML panels
   (Events / Awards / Classifieds / Community) lay out in columns too. */
.sam-mega-grid { display: flex; flex-wrap: nowrap; max-width: 1320px; margin: 0 auto; }
/* All columns stretch to ONE equal height (client R5: aligned bottoms,
   no ragged whitespace below the shorter columns). */
.sam-mega-grid { align-items: stretch !important; }
/* 2.25rem → 1.75rem (client 2026-07-20: "the padding is crazy"). The VALUE did not
   change — it has been 2.25rem since 0f6c997 (2026-06-17, "breathing room"). The
   CONTAINER did: that bump was tuned against the old full-width 1320px
   .sam-mega-stage, and the Ollie Menu Designer migration replaced it with
   shrink-to-fit panels (classifieds renders 774px). Identical 36px gutters on a
   panel ~40% narrower read as crowding, which is why nothing in git blame explains
   the complaint. 1.75rem is the value these columns carried the last time panels
   were this narrow. */
.sam-mega-col { padding: 1.75rem 1.75rem 2rem; }
.sam-mega-topics { flex: 0 0 260px; background: var(--wp--preset--color--base-2); }
.sam-mega-latest { flex: 1; }
/* Recommends: the tall vertical creative is scaled to sit WITHIN the shared
   column height (centered) rather than dictating the panel height. */
.sam-mega-recommends {
  flex: 0 0 300px; background: var(--wp--preset--color--base-2);
  display: flex; align-items: center; justify-content: center;
}
.sam-mega-recommends .sam-ad { width: auto; }
.sam-mega-recommends .sam-ad img,
.sam-mega-recommends .sam-ad video {
  width: auto; max-width: 100%; max-height: 520px;
  margin-inline: auto;
}
/* Eyebrow with a short orange rule after the label (Nat-Geo style) */
.sam-mega-eyebrow {
  display: flex; align-items: center; gap: 0.55rem;
  font: 800 11px/1 var(--wp--preset--font-family--sans); letter-spacing: 0.16em; text-transform: uppercase;
  /* margin-top 0 on BOTH the raw-HTML (Topics) and block (Latest) renditions so
     the two column labels line up (client 2026-06: "line up Topics and The Latest"). */
  color: var(--wp--preset--color--ink-2); margin-top: 0; margin-bottom: 1.6rem;
}
.sam-mega-eyebrow::after {
  content: ""; flex: 1; height: 2px; max-width: 2.25rem;
  background: var(--wp--preset--color--navy);
}
.sam-mega-topics a { display: block; font: 800 1.1875rem/1.15 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--navy); margin-bottom: 0.9rem; letter-spacing: -0.012em; transition: color 140ms ease; }
.sam-mega-topics a:hover,
.sam-mega-topics a.is-active,
.sam-mega-topics a[aria-current="true"] { color: var(--wp--preset--color--orange); }
/* "All Departments" — navy button w/ white text, orange on hover (client) */
.sam-mega-topics .sam-mega-all {
  display: inline-block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffffff; background: var(--wp--preset--color--navy);
  padding: 0.55rem 0.9rem; border-radius: 2px; margin-top: 0.55rem;
  transition: background 140ms ease;
}
.sam-mega-topics a.sam-mega-all:hover { color: #ffffff; background: var(--wp--preset--color--orange); }
/* Latest — horizontal thumbnail cards. Single column by default; 2-up when the
   Latest column itself is wide enough (container query, not viewport — so it can
   never crush the text the way a fixed 2-col grid did). */
.sam-mega-latest { container-type: inline-size; }
.sam-mega-latest .wp-block-post-template { display: flex; flex-direction: column; gap: 1.5rem; }
.sam-mega-latest .wp-block-post-template > li { margin: 0; min-width: 0; }
.sam-mega-card { align-items: center; gap: 0.8rem; }
.sam-mega-latest .wp-block-post-featured-image {
  flex: 0 0 80px; width: 80px; margin: 0;
}
.sam-mega-latest .wp-block-post-featured-image img {
  display: block; width: 80px; height: auto; aspect-ratio: var(--wp--custom--featured-image--aspect-ratio, 770 / 595); object-fit: cover; border-radius: 2px;
  background: var(--wp--preset--color--base-2);
}
.sam-mega-card__text { flex: 1 1 auto; min-width: 0; }
/* The category pill and the headline were touching outright (0px measured), so
   the pill read as part of the title rather than a label above it (client
   2026-07-20). Both blocks ship margin:0, and the card is a flow container with
   no block gap, so nothing separated them. */
.sam-mega-card .wp-block-post-terms { margin-bottom: 0.4rem; }
.sam-mega-card__text .wp-block-post-title {
  margin: 0; color: var(--wp--preset--color--ink); overflow-wrap: break-word;
}
.sam-mega-latest .wp-block-post-title a { color: var(--wp--preset--color--ink); transition: color 140ms ease; }
.sam-mega-latest .wp-block-post-title a:hover { color: var(--wp--preset--color--orange); }
.sam-mega-mag-picks {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sam-mega-mag-picks[hidden] { display: none !important; }
.sam-mega-mag-picks-switch { display: block; }
.sam-mega-mag-picks--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
.sam-mega-mag-picks__row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.sam-mega-mag-picks__img {
  flex: 0 0 80px;
  width: 80px;
  height: auto;
  aspect-ratio: var(--wp--custom--featured-image--aspect-ratio, 770 / 595);
  object-fit: cover;
  border-radius: 2px;
  background: var(--wp--preset--color--base-2);
}
.sam-mega-mag-picks__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.32rem;
  min-width: 0;
}
.sam-mega-mag-picks__pill {
  font: 800 0.625rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  background: var(--wp--preset--color--cyan-tint);
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
}
.sam-mega-mag-picks__title {
  font: 700 0.9375rem/1.3 var(--wp--preset--font-family--sans);
  color: var(--wp--preset--color--ink);
  overflow-wrap: break-word;
}
.sam-mega-mag-picks__issue {
  font: 700 0.625rem/1.3 var(--wp--preset--font-family--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--orange-ink, #C2410C);
}
.sam-mega-mag-picks__row:hover .sam-mega-mag-picks__title { color: var(--wp--preset--color--orange); }
/* Two columns once the Latest column can comfortably hold two cards */
@container (min-width: 430px) {
  .sam-mega-latest .wp-block-post-template { flex-flow: row wrap; column-gap: 1.75rem; row-gap: 1.25rem; }
  .sam-mega-latest .wp-block-post-template > li { flex: 1 1 calc(50% - 0.875rem); }
}

/* Mega menu narrows gracefully between the drawer breakpoint (782px) and desktop */
@media (max-width: 1100px) {
  .sam-mega-col { padding: 1.25rem 1.25rem 1.5rem; }
  .sam-mega-topics { flex-basis: 210px; }
  .sam-mega-recommends { flex-basis: 250px; }
  .sam-mega-topics a { font-size: 1.0625rem; margin-bottom: 0.7rem; }
}
@media (max-width: 980px) {
  /* Reclaim the Recommends column for the Latest list when space is tight */
  .sam-mega-recommends { display: none; }
  .sam-mega-topics { flex-basis: 200px; }
}

/* ════════════════════════════════════════════════════════════════
   MEGA MENU — shared column system (all sections share one language)
   Departments keeps its bespoke Topics/Latest/Recommends classes; the
   other sections use these generic roles: .sam-mega-list (nav rail),
   .sam-mega-feature (promo tiles), .sam-mega-cover (issue cover),
   .sam-mega-rail (ad / promo card). Variants tune the column widths.
   ════════════════════════════════════════════════════════════════ */

/* No underlines on any link inside a mega panel (editorial nav, not body copy);
   list links signal via the color shift on hover instead. */
.sam-mega a { text-decoration: none; }

/* Left nav-rail — the curated list of sub-sections (shares the Topics look).
   All-native markup: each link is a `wp:paragraph.sam-mega-link` wrapping the
   anchor (core has no bare-anchor block), so the styling targets the paragraph
   for spacing and the nested <a> for the link chrome. The ad-slot block in this
   column styles its own creative links, so scoping to `.sam-mega-link a` keeps
   this rule off the ad. */
.sam-mega-list { flex: 0 0 250px; background: var(--wp--preset--color--base-2); }
.sam-mega-list .sam-mega-link { margin: 0 0 1.1rem; }
.sam-mega-list .sam-mega-link a {
  display: block; font: 800 1.0625rem/1.15 var(--wp--preset--font-family--sans);
  color: var(--wp--preset--color--navy); letter-spacing: -0.01em;
  transition: color 140ms ease;
}
.sam-mega-list .sam-mega-link a:hover { color: var(--wp--preset--color--orange); }
/* "Hot"/primary item — cyan dot lead-in (matches the old Beats accent). The dot
   sits on the anchor (which is display:block) so it renders inline with the link
   text rather than stacking above it. */
.sam-mega-list-hot a { position: relative; }
.sam-mega-list-hot a::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--wp--preset--color--cyan); margin-right: 0.5rem; vertical-align: middle;
}
/* "All … →" — navy pill, orange on hover. Its paragraph carries only
   `.sam-mega-all` (not `.sam-mega-link`) so the list-link rule above never
   touches it. */
.sam-mega-list .sam-mega-all { margin: 0.65rem 0 0; }
.sam-mega-list .sam-mega-all a {
  display: inline-block; font: 800 0.75rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffffff; background: var(--wp--preset--color--navy);
  padding: 0.6rem 0.95rem; border-radius: 2px;
  transition: background 140ms ease;
}
.sam-mega-list .sam-mega-all a:hover { color: #ffffff; background: var(--wp--preset--color--orange); }

/* Right rail — ad slot or promo card. Content sits at the TOP (a short ad must
   not float in the vertical middle of a taller, tiles-driven panel); promo cards
   stretch to full height via their own align-self. */
.sam-mega-rail {
  flex: 0 0 300px; background: var(--wp--preset--color--base-2);
  display: flex; align-items: flex-start; justify-content: center;
}
.sam-mega-rail--wide { flex: 1; }
.sam-mega-rail .sam-ad { width: auto; max-width: 100%; }
.sam-mega-rail .sam-ad img, .sam-mega-rail .sam-ad video { max-width: 100%; height: auto; margin-inline: auto; }

/* Promo card — house CTA (newsletter / subscribe / community). Navy ground so it
   reads as a deliberate panel, not an ad. Yellow→orange button per style guide. */
.sam-mega-promo {
  position: relative; /* anchor for the title's stretched link */
  width: 100%; align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  background: var(--wp--preset--color--navy); color: rgba(255,255,255,0.92);
  padding: 2rem 1.85rem; border-radius: 3px;
}
.sam-mega-promo-eyebrow {
  font: 800 0.625rem/1 var(--wp--preset--font-family--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--yellow); margin: 0 0 0.6rem;
}
.sam-mega-promo-title { margin: 0 0 0.55rem; font: 800 1.25rem/1.1 var(--wp--preset--font-family--sans); color: #fff; letter-spacing: -0.015em; }
/* Stretched link — the title anchor covers the whole card so it clicks through
   to the board, while the anchor itself inherits the title's colour/hover. */
.sam-mega-promo-title a { color: inherit; text-decoration: none; }
.sam-mega-promo-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sam-mega-promo-text { margin: 0 0 1.1rem; font: 400 0.9375rem/1.5 var(--wp--preset--font-family--serif); color: rgba(255,255,255,0.82); }
.sam-mega-promo-btn {
  align-self: flex-start; font: 800 0.75rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.7rem 1.15rem; border-radius: 2px; text-decoration: none;
  background: var(--sam-cta-bg); color: var(--sam-cta-fg);
  transition: background 140ms ease, color 140ms ease;
}
.sam-mega-promo-btn:hover { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }

/* Classifieds: the rail carries the Parts & Resource Board promo ONLY. It used to
   stack the promo AND the sponsor ad, which made the rail ~810px tall and set the
   height of the entire panel while the four-link left column sat empty below 255px.
   Moving the ad into the left column (see parts/mega-classifieds.html) drops the
   panel ~250px; moving the promo instead would have saved only ~65px, since the
   promo would simply have become the new tallest column. */
.sam-mega--classifieds .sam-mega-rail {
  flex-direction: column; align-items: stretch; gap: 1.25rem;
  /* 300px → 250px, trading the width the left column just took. These panels are
     shrink-to-fit and absolutely positioned under their nav item, so column widths
     are NOT zero-sum — the panel simply grows. Classifieds is the rightmost item,
     so at +50px its right edge landed at 1441px on a 1440 viewport. Giving the
     50px back here restores the original 774px panel. The rail no longer holds an
     ad, so it has no reason to keep an ad-standard 300px. */
  flex: 0 0 250px;
  /* The base rule pairs align-items:flex-start with justify-content:center for a
     ROW: content at top, centered horizontally. Flipping to column swaps both
     axes, so that `center` started centering the promo VERTICALLY — with the ad
     gone it floated mid-rail with ~160px of dead space above and below. */
  justify-content: flex-start;
}
/* Fill the column rather than top-align at the promo's natural ~322px: the panel
   is 647px tall regardless (the feature column sets that), and a short card
   stranded above 250px of white read as unfinished. When a mega-nav featured
   listing is in the rail, shrink the board promo so the stack stays compact. */
.sam-mega--classifieds .sam-mega-promo--board { flex: 1; }
.sam-mega--classifieds .sam-mega-rail .sam-cl-navhl { margin-bottom: 0; }
.sam-mega--classifieds .sam-mega-rail:has(.sam-cl-navhl) .sam-mega-promo--board { flex: 0 0 auto; }
.sam-mega--classifieds .sam-mega-rail:has(.sam-cl-navhl) .sam-mega-promo-text { display: none; }

/* Left column widens 250px → 300px to match the rail it inherited the ad from, so
   the creative keeps its usable width: both columns carry .sam-mega-col's 36px of
   side padding, i.e. 228px of content either way. Without this the ad would render
   ~50px narrower here than it did in the rail. */
.sam-mega--classifieds .sam-mega-list { flex: 0 0 300px; }
.sam-mega--classifieds .sam-mega-list .sam-ad {
  width: auto; max-width: 100%; margin-top: 1.75rem;
}
.sam-mega--classifieds .sam-mega-list .sam-ad img,
.sam-mega--classifieds .sam-mega-list .sam-ad video { max-width: 100%; height: auto; }
/* The promo is now a native group, not an <a> — the whole card is made
   clickable by stretching the title link over it (see .sam-mega-promo-title a
   below). Hover chrome keys off :hover on the card itself. */
.sam-mega-promo--board:hover .sam-mega-promo-btn { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }
.sam-mega-promo--board:hover .sam-mega-promo-title { color: var(--wp--preset--color--yellow); }

/* Feature column — two stacked promo tiles (Events / Awards / Classifieds) */
.sam-mega-feature { flex: 1; }
.sam-mega-feature-grid { display: flex; flex-direction: column; gap: 1.25rem; }
.sam-mega-tile {
  position: relative; /* anchor for the title's stretched link */
  display: block; padding: 1.4rem 1.45rem; border: 1px solid var(--wp--preset--color--rule);
  border-radius: 3px; background: #fff; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.sam-mega-tile:hover { border-color: var(--wp--preset--color--navy); transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(3,0,77,0.5); }
.sam-mega-tile-tag {
  display: inline-block; font: 800 0.625rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: var(--wp--preset--color--navy); padding: 0.22rem 0.45rem; border-radius: 2px; margin: 0 0 0.55rem;
}
.sam-mega-tile-title { display: block; font: 700 1.0625rem/1.2 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--navy); margin: 0 0 0.35rem; }
/* Stretched link — the title anchor covers the whole tile (native cards have no
   group-level href); it inherits the title colour + the :hover shift below. */
.sam-mega-tile-title a { color: inherit; text-decoration: none; }
.sam-mega-tile-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sam-mega-tile-text { display: block; margin: 0; font: 400 0.875rem/1.45 var(--wp--preset--font-family--serif); color: var(--wp--preset--color--ink-2); }
.sam-mega-tile:hover .sam-mega-tile-title { color: var(--wp--preset--color--orange); }
/* Accent tile — navy ground for the headline "now open / post a listing" CTA */
.sam-mega-tile--accent { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); }
.sam-mega-tile--accent .sam-mega-tile-tag { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--navy); }
.sam-mega-tile--accent .sam-mega-tile-title { color: #fff; }
.sam-mega-tile--accent .sam-mega-tile-text { color: rgba(255,255,255,0.82); }
.sam-mega-tile--accent:hover .sam-mega-tile-title { color: var(--wp--preset--color--yellow); }

/* Magazine cover column */
.sam-mega-cover { flex: 0 0 210px; }
.sam-mega-cover-card .wp-block-post-featured-image,
.sam-mega-cover-card .sam-mega-cover-shot { margin: 0 0 0.65rem; display: block; }
.sam-mega-cover-card .wp-block-post-featured-image img,
.sam-mega-cover-card .sam-mega-cover-img {
  width: 100%; height: auto; border-radius: 2px; display: block;
  box-shadow: 0 14px 30px -20px rgba(3,0,77,0.6); background: var(--wp--preset--color--base-2);
}
.sam-mega-cover-card .wp-block-post-title a,
.sam-mega-cover-name a { color: var(--wp--preset--color--ink); transition: color 140ms ease; text-decoration: none; }
.sam-mega-cover-card .wp-block-post-title a:hover,
.sam-mega-cover-name a:hover { color: var(--wp--preset--color--orange); }
.sam-mega-cover-name { font: 700 1rem/1.2 "Overpass", sans-serif; margin: 0; }

/* Magazine fills the full bar width like the other panels: cover (fixed) ·
   browse (grows) · featured picks (fixed) · subscribe promo (fixed). Without
   a growing column the fixed widths left a large empty gap on the right
   (client: "expand the width"). */
.sam-mega--magazine .sam-mega-cover { flex: 0 0 230px; }
.sam-mega--magazine .sam-mega-list { flex: 1; }
.sam-mega--magazine .sam-mega-featured { flex: 0 0 450px; background: var(--wp--preset--color--base-2); }
.sam-mega--magazine .sam-mega-rail { flex: 0 0 360px; }

/* Per-variant width trims so each panel feels purpose-built, not boilerplate.

   ⚠ UNREACHABLE — DO NOT ADD RULES HERE. `.sam-primary-nav` is `display:none`
   below 1140px (see the max-width:1139px block), so the desktop mega menu only
   ever renders at ≥1140px and nothing in these two queries can match. They were
   written when the drawer breakpoint was 782px and were orphaned when the nav
   hide moved to 1139px. Kept rather than deleted so the intended narrow-viewport
   sizing survives if that breakpoint ever moves back down; verified dead
   2026-07-20. Panel sizing that needs to take effect belongs above, unscoped. */
@media (max-width: 1100px) {
  .sam-mega-list { flex-basis: 210px; }
  .sam-mega-rail { flex-basis: 250px; }
  .sam-mega-cover { flex-basis: 180px; }
  .sam-mega-list .sam-mega-link { margin-bottom: 0.65rem; }
  .sam-mega-list .sam-mega-link a { font-size: 1rem; }
}
@media (max-width: 980px) {
  /* Drop the ad/promo rail before the content columns when space is tight */
  .sam-mega--events .sam-mega-rail,
  .sam-mega--awards .sam-mega-rail,
  .sam-mega--classifieds .sam-mega-rail,
  .sam-mega--community .sam-mega-rail { display: none; }
  .sam-mega-list { flex-basis: 190px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE NAV ACCORDION — replaces the flat drawer list (≤781px). Each
   section links straight to its landing page; the chevron expands the
   sub-links. Panel open/close uses a grid-template-rows transition so
   there's no fixed-height measuring (animates from real content height).
   ════════════════════════════════════════════════════════════════ */
.sam-macc { display: flex; flex-direction: column; }
.sam-macc-item { border-bottom: 1px solid var(--wp--preset--color--rule); }
.sam-macc-head { display: flex; align-items: stretch; justify-content: space-between; }
.sam-macc-link {
  flex: 1; display: flex; align-items: center; padding: 0.95rem 0.25rem;
  font: 700 1.0625rem/1.1 var(--wp--preset--font-family--sans); letter-spacing: 0.01em;
  color: var(--wp--preset--color--navy); text-decoration: none;
}
.sam-macc-link:hover { color: var(--wp--preset--color--orange); }
.sam-macc-toggle {
  flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-left: 1px solid var(--wp--preset--color--rule);
  color: var(--wp--preset--color--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sam-macc-chevron { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 220ms cubic-bezier(0.22,1,0.36,1); margin-top: -3px; }
.sam-macc-toggle[aria-expanded="true"] { color: var(--wp--preset--color--orange); }
.sam-macc-toggle[aria-expanded="true"] .sam-macc-chevron { transform: rotate(-135deg); margin-top: 2px; }
/* Collapsible panel — grid-rows 0fr → 1fr animates from intrinsic height */
.sam-macc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms cubic-bezier(0.22,1,0.36,1); }
.sam-macc-panel.is-open { grid-template-rows: 1fr; }
.sam-macc-panel-inner { overflow: hidden; min-height: 0; }
.sam-macc-panel-inner a {
  display: block; padding: 0.55rem 0.25rem 0.55rem 1rem;
  font: 600 0.9375rem/1.2 var(--wp--preset--font-family--sans);
  color: var(--wp--preset--color--ink-2); text-decoration: none;
  border-left: 2px solid var(--wp--preset--color--rule);
}
.sam-macc-panel-inner a:hover { color: var(--wp--preset--color--navy); border-left-color: var(--wp--preset--color--orange); }
.sam-macc-panel.is-open .sam-macc-panel-inner { padding-bottom: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
  .sam-macc-panel, .sam-macc-chevron { transition: none; }
}

/* Main content top padding — CSS-driven so phones get less whitespace above the
   hero/slider than desktop. Horizontal: the Site Editor still ships saved
   front-page markup with the old clamp(1rem, 2vw, 2rem) inline on <main>
   (22px at 1100, 16px at 390). Beat that so homepage content uses the same
   --sam-gutter token as articles (32px from 640 up; ~20px at 390). */
.sam-main {
  padding-top: 2.5rem;
  padding-left: var(--sam-gutter) !important;
  padding-right: var(--sam-gutter) !important;
}
@media (max-width: 600px) { .sam-main { padding-top: 1.25rem; } }

/* ── HERO: featured article (client 2026-06 mockup) ───────────────
   Navy panel (kicker · yellow eyebrow · headline · serif dek · yellow CTA)
   beside a CLEAN image — no text over the photo. */
.sam-featured .wp-block-columns { align-items: stretch; }

.sam-hero-feature {
  display: grid;
  grid-template-columns: minmax(280px, 37%) 1fr;
  height: 100%;
  min-height: 340px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--wp--preset--color--navy);
}
.sam-hf-panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-top: 3.25rem;
  color: rgba(255,255,255,0.92);
}
.sam-hf-kicker {
  position: absolute; top: 0; left: 0;
  font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  padding: 0.9rem clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.sam-hf-eyebrow {
  margin: 0 0 0.7rem;
  font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--yellow);
}
.sam-hf-title {
  margin: 0 0 0.75rem;
  font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: clamp(1.625rem, 1.1rem + 2vw, 2.375rem);
  line-height: 1.05; letter-spacing: -0.02em;
}
.sam-hf-title a { color: #fff; text-decoration: none; transition: color 140ms ease; }
.sam-hf-title a:hover { color: var(--wp--preset--color--orange); }
.sam-hf-dek {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(0.95rem, 0.92rem + 0.25vw, 1.0625rem);
  line-height: 1.5; color: rgba(255,255,255,0.84); max-width: 44ch;
}
/* CTA on navy → yellow w/ navy text; cyan on hover (client 2026-06). */
.sam-hf-btn {
  font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.85rem 1.4rem; border-radius: 2px; text-decoration: none;
  background: var(--sam-cta-bg); color: var(--sam-cta-fg);
  transition: background 140ms ease, color 140ms ease;
}
.sam-hf-btn:hover { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }
.sam-hf-media { display: block; position: relative; min-height: 100%; }
.sam-hf-media .sam-hf-img,
.sam-hf-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; z-index: 1;
  transition: filter 300ms ease;
}
/* Blurred cover fill behind the contained image — legacy 440/770px art shows
   in full (no crop, no blow-up) with an elegant edge (client 2026-07). */
.sam-hf-blur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(28px) brightness(0.72) saturate(1.1); transform: scale(1.15); }
.sam-hero-feature:hover .sam-hf-media img { filter: brightness(0.93); }

@media (max-width: 900px) {
  .sam-hero-feature { grid-template-columns: 1fr; min-height: 0; }
  .sam-hf-media { min-height: 220px; }
  .sam-hf-media img { position: absolute; }
  .sam-hf-panel { order: 2; padding-top: 1.5rem; }
  .sam-hf-kicker { display: none; }
  .sam-hf-media { order: 1; }
}

/* ── SAM Picks rail — curated cards (replaces the auto news feed) ── */
.sam-picksrail {
  display: flex; flex-direction: column; height: 100%;
  background: var(--wp--preset--color--base-2);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 3px; padding: 1.1rem 1.2rem 1.2rem;
}
.sam-picksrail-top {
  margin: 0 0 0.8rem; padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--wp--preset--color--navy);
}
.sam-picksrail-head {
  margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 800;
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--navy);
}
.sam-picksrail-list { display: flex; flex-direction: column; gap: 0.7rem; flex: 1 1 auto; }
.sam-pick-card {
  display: flex; align-items: center; gap: 0.85rem;
  background: #ffffff; border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px; padding: 0.85rem 0.95rem; text-decoration: none;
  flex: 0 0 auto;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.sam-pick-card:hover { background: var(--wp--preset--color--base-2); border-color: var(--wp--preset--color--navy); }
.sam-pick-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.sam-pick-card__tag { font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sam-pick-card__title {
  font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.9375rem;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--wp--preset--color--navy);
  transition: color 140ms ease;
}
.sam-pick-card:hover .sam-pick-card__title { color: var(--wp--preset--color--orange); }
.sam-pick-card__img { flex: 0 0 76px; width: 76px; height: 76px; object-fit: cover; border-radius: 2px; display: block; }
/* Per-pick image layout (set by render.php): side (left/right), a % width up to
   50, contain/cover, an optional fixed height, and vertical alignment. The card
   sizes to its content (flex:0 0 auto above), so the image no longer over-
   stretches into whitespace — its height comes from the editor's height control,
   its aspect ratio, or (in stretch mode) the card height. */
.sam-pick-card--img-left { flex-direction: row-reverse; }
.sam-pick-card--v-top { align-items: flex-start; }
.sam-pick-card--v-center { align-items: center; }
.sam-pick-card--v-stretch { align-items: stretch; }
.sam-pick-card--img-flex .sam-pick-card__img { flex-grow: 0; flex-shrink: 0; height: auto; }
.sam-pick-card--v-stretch.sam-pick-card--img-flex .sam-pick-card__img { align-self: stretch; min-height: 96px; }
.sam-picksrail-hint { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; color: var(--wp--preset--color--ink-2); }
@media (max-width: 900px) {
  .sam-picksrail { margin-top: 1.25rem; }
}

/* Spotlight carousel — a curated, rotating set of promo CALLOUTS (classifieds,
   subscribe, events, magazine), not a post feed. A flex row of full-width slides
   is translated in PIXELS by the store (positionHero in view.js): the glide runs
   on the Web Animations API and the final inline transform holds position, since
   a CSS transition on transform was perpetually restarted by re-application. */
.sam-hero-carousel { position: relative; height: 100%; min-height: 400px; border-radius: 3px; overflow: hidden; background: var(--wp--preset--color--navy); }
.sam-hc-eyebrow { position: absolute; top: 0; left: 0; z-index: 3; font-family: var(--wp--preset--font-family--sans); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 0.9rem 1.4rem; }
.sam-hc-viewport { position: relative; height: 100%; overflow: hidden; }
.sam-hc-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; will-change: transform; }
.sam-hc-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; }

/* Callout slide */
.sam-spot { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; overflow: hidden; padding: clamp(1.4rem, 0.8rem + 2.2vw, 2.4rem); padding-top: 2.5rem; color: rgba(255,255,255,0.92); }
.sam-spot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sam-spot-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(2,0,51,0.92) 0%, rgba(2,0,51,0.66) 52%, rgba(2,0,51,0.32) 100%); }
.sam-spot-body { position: relative; z-index: 2; }
/* Tones — soft same-hue radial lift over a brand base (token-driven, no slop). */
.sam-spot--navy   { background: radial-gradient(125% 95% at 88% 8%, color-mix(in oklab, var(--wp--preset--color--navy), white 14%), transparent 58%), var(--wp--preset--color--navy); }
.sam-spot--ink    { background: radial-gradient(125% 95% at 88% 8%, color-mix(in oklab, var(--wp--preset--color--navy), white 10%), transparent 58%), color-mix(in oklab, var(--wp--preset--color--navy), black 38%); }
.sam-spot--blue   { background: radial-gradient(125% 95% at 88% 8%, color-mix(in oklab, var(--wp--preset--color--navy), white 30%), transparent 60%), color-mix(in oklab, var(--wp--preset--color--navy), white 14%); }
.sam-spot--orange { background: radial-gradient(125% 95% at 88% 8%, color-mix(in oklab, var(--wp--preset--color--orange), white 16%), transparent 60%), var(--wp--preset--color--orange); color: var(--wp--preset--color--navy); }
/* Featured-article slide — image-backed, so it gets a stronger scrim than the
   colour-panel callouts (dark at the text edge, with a bottom lift). */
.sam-spot--feature { background: var(--wp--preset--color--navy); }
.sam-spot--feature .sam-spot-shade { background: linear-gradient(95deg, rgba(2,0,51,0.94) 0%, rgba(2,0,51,0.76) 46%, rgba(2,0,51,0.40) 78%, rgba(2,0,51,0.28) 100%), linear-gradient(to top, rgba(2,0,51,0.5) 0%, rgba(2,0,51,0) 55%); }

.sam-spot-kicker { font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--yellow); margin-bottom: 0.7rem; }
.sam-spot--orange .sam-spot-kicker { color: var(--wp--preset--color--navy); opacity: 0.7; }
.sam-spot-title { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: clamp(1.5rem, 1rem + 1.9vw, 2.2rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 0.65rem; max-width: 18ch; }
.sam-spot--orange .sam-spot-title { color: var(--wp--preset--color--navy); }
.sam-spot-text { font-family: var(--wp--preset--font-family--serif); font-size: clamp(0.95rem, 0.92rem + 0.25vw, 1.06rem); line-height: 1.45; color: rgba(255,255,255,0.84); margin: 0 0 1.05rem; max-width: 46ch; }
.sam-spot--orange .sam-spot-text { color: color-mix(in oklab, var(--wp--preset--color--navy), transparent 12%); }
.sam-spot-cta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
/* Hero CTA on navy: yellow w/ navy text at rest, cyan on hover (client 2026-06) */
.sam-spot-cta-btn { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.8rem 1.3rem; border-radius: 2px; border: 0; cursor: pointer; text-decoration: none; background: var(--sam-cta-bg); color: var(--sam-cta-fg); transition: background 140ms ease, color 140ms ease; }
.sam-spot-cta-btn:hover { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }
.sam-spot--orange .sam-spot-cta-btn { background: var(--wp--preset--color--navy); color: #fff; }
.sam-spot--orange .sam-spot-cta-btn:hover { background: #fff; color: var(--wp--preset--color--navy); }
.sam-spot-cta-link { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; text-decoration: none; color: inherit; opacity: 0.82; background: none; border: 0; border-bottom: 1px solid transparent; padding: 0 0 1px; cursor: pointer; transition: opacity 140ms ease, border-color 140ms ease; }
.sam-spot-cta-link:hover { opacity: 1; border-bottom-color: currentColor; }

/* Controls sit in the bottom band, away from the left-aligned slide content:
   arrows paired bottom-right, dots bottom-left. (Centred side-arrows used to
   cover the headline.) */
.sam-hc-arrow { position: absolute; bottom: 1.05rem; z-index: 4; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 140ms ease; }
.sam-hc-arrow:hover { background: var(--sam-hover-bg); color: var(--sam-hover-fg); }
.sam-hc-prev { right: 4rem; } .sam-hc-next { right: 1.05rem; }
.sam-hc-dots { position: absolute; bottom: 1.3rem; left: 1.6rem; z-index: 4; display: flex; gap: 0.45rem; }
.sam-hc-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.42); cursor: pointer; transition: background 140ms ease, transform 140ms ease; }
.sam-hc-dot:hover { background: rgba(255,255,255,0.7); }
.sam-hc-dot.is-active { background: var(--wp--preset--color--yellow); transform: scale(1.3); }

/* "The News" rail — recent headlines list + newsletter signup */
.sam-newsrail { display: flex; flex-direction: column; height: 100%; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--rule); border-radius: 3px; padding: 1.1rem 1.35rem 1rem; }
.sam-newsrail-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.55rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--wp--preset--color--navy); }
.sam-newsrail-head { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--navy); margin: 0; }
.sam-newsrail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; counter-reset: none; }
.sam-newsrail-item { padding: 0.5rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.sam-newsrail-item:first-child { padding-top: 0; }
.sam-newsrail-link { display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.9rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--wp--preset--color--navy); text-decoration: none; }
.sam-newsrail-item:first-child .sam-newsrail-link { font-size: 1rem; }
.sam-newsrail-link:hover { color: var(--wp--preset--color--orange); }
.sam-newsrail-date { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in oklab, var(--wp--preset--color--navy), transparent 48%); margin-top: 0.22rem; }
.sam-newsrail-foot { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--wp--preset--color--rule); display: flex; flex-direction: column; gap: 0.6rem; }
.sam-newsrail-all { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--navy); text-decoration: none; white-space: nowrap; }
.sam-newsrail-all:hover { color: var(--wp--preset--color--orange); }
.sam-newsrail-signup { cursor: pointer; border: 0; background: var(--wp--preset--color--navy); color: #fff; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.62rem 1rem; border-radius: 2px; transition: background 140ms ease; }
.sam-newsrail-signup:hover { background: var(--wp--preset--color--orange); }

@media (max-width: 900px) {
  .sam-featured .wp-block-columns { flex-wrap: wrap; }
  .sam-featured .wp-block-column { flex-basis: 100% !important; }
  .sam-hero-carousel { min-height: 320px; }
}

/* Phones: let the slide HUG its content + a compact control band instead of a
   fixed min-height (which left a big gap below short content). Auto-height makes
   the carousel as tall as the tallest slide's content; a small bottom band holds
   the centred [‹ • • • ›] row. Placed AFTER the 900px rule so these win. */
@media (max-width: 600px) {
  .sam-hero-carousel, .sam-hc-viewport, .sam-hc-track, .sam-hc-slide { height: auto; }
  .sam-hero-carousel { min-height: 0; }
  .sam-spot { justify-content: flex-start; padding-top: 1.5rem; padding-bottom: 3.5rem; }
  .sam-hc-arrow { display: flex; top: auto; bottom: 1rem; width: 34px; height: 34px; font-size: 1.25rem; background: rgba(255,255,255,0.22); }
  .sam-hc-prev { left: calc(50% - 88px); right: auto; }
  .sam-hc-next { right: calc(50% - 88px); left: auto; }
  .sam-hc-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 1.5rem; }
}

/* ── Account Dashboard (saminfo/account-dashboard) ────────────────────
   The membership desk of a 63-year-old trade journal. Editorial, not SaaS:
   Spectral serif for headings, Overpass for UI labels; hairline rules over
   card-soup; orange reserved for ~10%. No spine borders, no gradient text. */
.sam-account {
  --sam-acct-gap: clamp(1.5rem, 3vw, 2.5rem);
  --sam-acct-hair: var(--wp--preset--color--rule);
  max-width: 64rem;
  margin-inline: auto;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--sans);
}

/* Kicker / eyebrow */
.sam-account-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
}

/* Masthead */
.sam-account-masthead {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sam-acct-hair);
  margin-bottom: 0;
}
.sam-account-mastrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sam-account-name {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy);
}
.sam-account-signout {
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.sam-account-signout:hover { color: var(--wp--preset--color--orange); }

/* Section nav (tabs) — magazine section-nav, not pill tabs */
.sam-account-nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--sam-acct-hair);
  margin-bottom: var(--sam-acct-gap);
}
.sam-account-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.85rem 0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.sam-account-tab:hover { color: var(--wp--preset--color--navy); }
.sam-account-tab.is-active {
  color: var(--wp--preset--color--navy);
  border-bottom-color: var(--wp--preset--color--orange);
}

/* Panel reveal */
.sam-account-panel { animation: samAcctFade .32s cubic-bezier(.22,.61,.36,1); }
@keyframes samAcctFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sam-account-panel { animation: none; } }

/* Overview: asymmetric credential + aside */
.sam-account-overview {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sam-acct-gap);
  align-items: start;
}
@media (max-width: 720px) { .sam-account-overview { grid-template-columns: 1fr; } }

/* The subscriber credential — a flat navy press-pass. The memorable element. */
.sam-account-cred {
  background: var(--wp--preset--color--navy);
  color: #fff;
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
}
.sam-account-cred::after {
  /* a faint embossed seal, not glassmorphism — a tactile credential touch */
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 18px rgba(255,255,255,0.04);
}
.sam-account-cred-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sam-account-cred-pub {
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.sam-account-cred-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.sam-account-cred-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--cyan); box-shadow: 0 0 0 3px rgba(0,174,239,0.25); }
.sam-account-cred-state.is-inactive .sam-account-cred-dot { background: var(--wp--preset--color--ink-3); box-shadow: none; }
.sam-account-cred-name {
  margin: 0.75rem 0 0;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.1;
}
.sam-account-cred-org { margin: 0; font-size: var(--wp--preset--font-size--caption); color: rgba(255,255,255,0.66); }
.sam-account-cred-foot {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.sam-account-cred-fact { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--wp--preset--font-size--caption); }
.sam-account-cred-fact b {
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Overview aside */
.sam-account-peek { padding-top: 0.25rem; }
.sam-account-peek-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.sam-account-peek-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--sam-acct-hair); }
.sam-account-peek-list li:first-child { padding-top: 0; }
.sam-account-peek-list a {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.3;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.sam-account-peek-list a:hover { color: var(--wp--preset--color--orange); }

/* Headings inside panels */
.sam-account-h {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--h4);
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy);
}

/* Facts (definition lists) — hairline rows, no box */
.sam-account-section { max-width: 46rem; }
.sam-account-facts { margin: 0; }
.sam-account-fact-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--sam-acct-hair);
}
.sam-account-fact-row:first-child { padding-top: 0; }
.sam-account-fact-row dt {
  margin: 0;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
  padding-top: 0.15rem;
}
.sam-account-fact-row dd {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--reading);
  color: var(--wp--preset--color--ink);
}

/* Status pill (used in facts) */
.sam-account-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sam-account-pill.is-active { background: var(--wp--preset--color--cyan-tint); color: var(--wp--preset--color--navy); }
.sam-account-pill.is-inactive { background: var(--wp--preset--color--base-3); color: var(--wp--preset--color--ink-2); }

/* Actions + notes */
.sam-account-actions { margin-top: 1.75rem; }
.sam-account-note {
  margin: 1.25rem 0 0;
  max-width: 46ch;
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--ink-3);
}

/* Buttons + text links */
.sam-account-btn {
  display: inline-block;
  background: var(--wp--preset--color--orange);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.7rem 1.3rem;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.sam-account-btn:hover { background: var(--wp--preset--color--navy); }
.sam-account-btn[disabled] { opacity: 0.55; cursor: default; }
.sam-account-textlink {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  cursor: pointer;
}
.sam-account-textlink:hover { color: var(--wp--preset--color--orange); }

/* Saved list */
.sam-account-saved { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.sam-account-saved-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--sam-acct-hair);
}
.sam-account-saved-item:first-child { padding-top: 0; }
.sam-account-saved-item a {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--reading);
  line-height: 1.25;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.sam-account-saved-item a:hover { color: var(--wp--preset--color--orange); }
.sam-account-saved-item .sam-account-meta { white-space: nowrap; }
/* Saved searches list (email-alert home for "Save this search") */
.sam-account-savedsearch { margin: 0 0 2.25rem; }
.sam-account-savedsearch__lede { margin-bottom: 1rem; max-width: 46rem; }
.sam-account-savedsearch__list { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.sam-account-savedsearch__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--sam-acct-hair);
}
.sam-account-savedsearch__item:first-child { padding-top: 0; }
.sam-account-savedsearch__link { display: flex; align-items: baseline; gap: 0.5rem 0.65rem; flex-wrap: wrap; text-decoration: none; min-width: 0; }
.sam-account-savedsearch__cat { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--wp--preset--color--navy); }
.sam-account-savedsearch__link:hover .sam-account-savedsearch__cat { color: var(--wp--preset--color--orange); }
.sam-account-savedsearch__q { font-family: var(--wp--preset--font-family--serif); font-style: italic; color: var(--wp--preset--color--ink-2, #5a6472); }
.sam-account-savedsearch__remove { flex: 0 0 auto; background: none; border: 0; padding: 0.15rem 0.25rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--ink-3); cursor: pointer; border-bottom: 2px solid transparent; transition: color 140ms ease, border-color 140ms ease; }
.sam-account-savedsearch__remove:hover, .sam-account-savedsearch__remove:focus-visible { color: var(--wp--preset--color--orange-ink, #b34a15); border-bottom-color: currentColor; }
.sam-account-savedsearch__remove[disabled] { opacity: 0.5; cursor: default; }
.sam-account-h--saved { margin-top: 0.5rem; }
.sam-account-meta { margin: 0; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-3); }

/* Empty / notice */
.sam-account-empty { padding: 3rem 1rem; text-align: center; }
.sam-account-empty .sam-account-stat--sm {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--dek);
  color: var(--wp--preset--color--navy);
  margin: 0 0 0.4rem;
}

/* ── Gate (connect / sign-in) ─────────────────────────────────────── */
.sam-account--gate { max-width: 34rem; padding-top: clamp(2rem, 6vw, 4rem); }
.sam-account-gate { text-align: left; }
.sam-account-gate-title {
  margin: 0 0 0.75rem;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--navy);
}
.sam-account-lede {
  margin: 0 0 1.75rem;
  max-width: 42ch;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--reading);
  line-height: 1.5;
  color: var(--wp--preset--color--ink-2);
}
.sam-account-form { margin: 0; }
.sam-account-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
}
.sam-account-field { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sam-account-input {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--ink);
  background: #fff;
}
/* Only the connect-gate field grows horizontally in its flex row. (In the edit
   form the input sits in a vertical flex column, where a flex-basis would
   balloon its HEIGHT.) */
.sam-account-field .sam-account-input { flex: 1 1 14rem; }
.sam-account-input:focus-visible { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 1px; border-color: var(--wp--preset--color--cyan); }
.sam-account-fineprint { margin: 0.85rem 0 0; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-3); }

/* Flash messages */
.sam-account-flash { margin: 0.85rem 0 0; font-size: var(--wp--preset--font-size--caption); }
.sam-account-flash.is-ok { color: var(--wp--preset--color--navy); font-weight: 600; }
.sam-account-flash.is-warn { color: var(--wp--preset--color--orange); font-weight: 600; }

@media (max-width: 600px) {
  .sam-account-fact-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .sam-account-cred-foot { gap: 1.5rem; }
}

/* ── Link underlines: clean by default, underlined only in article prose ──────
   theme.json's elements.link.typography.textDecoration isn't compiled by WP for
   the link element, so the browser's default underline bled through everywhere
   (worst on whole-card <a>s like Mountain Departments, where it painted under
   the title + dek + Explore). Set the global default here instead. Genuine
   affordances opt back in: article body prose (below) and the dept "Explore"
   faux-underline (a background-image, unaffected by this). */
a { text-decoration: none; }
/* Post-title links carry an Ollie global-styles underline (specificity 0,1,0)
   that the bare `a` reset can't beat — kill it so card/headline titles are clean.
   Article body prose re-adds underlines via the scoped .single rule elsewhere. */
.wp-block-post-title a { text-decoration: none; }

/* ── Account edit form + auto-renew switch (Phase 3 writes) ──────────── */
.sam-account-h--mt { margin-top: 2.25rem; }
.sam-account-editform { max-width: 46rem; }
.sam-account-fldgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.25rem; }
.sam-account-fld { display: flex; flex-direction: column; gap: 0.3rem; }
.sam-account-fld > span {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-3);
}
.sam-account-editform .sam-account-input { width: 100%; }
.sam-account-editform .sam-account-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.sam-account-editform .sam-account-flash { margin: 0; }
@media (max-width: 560px) { .sam-account-fldgrid { grid-template-columns: 1fr; } }

/* Auto-renew switch */
.sam-account-switch {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--reading);
  color: var(--wp--preset--color--ink);
}
.sam-account-switch[disabled] { opacity: 0.6; cursor: default; }
.sam-account-switch-track {
  position: relative; width: 42px; height: 24px; border-radius: 999px;
  background: var(--wp--preset--color--base-3); transition: background .18s ease; flex: 0 0 auto;
}
.sam-account-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease;
}
.sam-account-switch.is-on .sam-account-switch-track { background: var(--wp--preset--color--cyan); }
.sam-account-switch.is-on .sam-account-switch-knob { transform: translateX(18px); }
.sam-account-switch:focus-visible { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 3px; border-radius: 4px; }

/* ── Passwordless sign-in modal + set-password (2026-06) ────────────── */
.sam-modal-ok { margin: 0.8rem 0 0; color: var(--wp--preset--color--navy); font-weight: 600; }
.sam-modal-altlink {
  background: none; border: 0; padding: 0; margin: 0.9rem 0 0;
  font-family: var(--wp--preset--font-family--sans); font-size: 0.85rem; font-weight: 700;
  color: var(--wp--preset--color--navy); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.sam-modal-altlink:hover { color: var(--wp--preset--color--orange); }
.sam-modal-form--pw,
.sam-modal-form--acct { margin-top: 0.75rem; }
/* View-switch links — stacked under the active form; one view shows at a time. */
.sam-modal-switch { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; }
.sam-modal-switch .sam-modal-altlink { margin: 0; }
.sam-modal-dev { border: 1px dashed color-mix(in oklab, var(--wp--preset--color--navy) 35%, transparent); padding: 0.6rem 0.75rem; border-radius: 6px; }
.sam-modal-dev a { color: var(--wp--preset--color--orange); font-weight: 700; }

/* Post-login "set a password" nudge */
.sam-account-prompt {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: var(--wp--preset--color--cyan-tint);
  border-radius: 8px; padding: 0.8rem 1.1rem; margin-bottom: 1.5rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.95rem; color: var(--wp--preset--color--navy);
}
/* Password section divider */
.sam-account-pw { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--wp--preset--color--rule); }

/* The `hidden` attribute (set by data-wp-bind--hidden) must beat component
   display rules like `.sam-modal-form{display:flex}`, else Interactivity-hidden
   elements stay visible. Canonical HTML5-boilerplate reset. */
[hidden] { display: none !important; }

.sam-cl-stats { margin-top: 1rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--cyan-ink); }

/* Classifieds search box */
.sam-cl-search { margin: 0.75rem 0 1rem; }
.sam-cl-search__input { width: 100%; max-width: 480px; padding: 0.6rem 0.95rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 100px; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; background: var(--wp--preset--color--base); }
.sam-cl-search__input:focus { outline: none; border-color: var(--wp--preset--color--orange); box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--orange) 20%, transparent); }
/* Board reuses the classifieds search; tighten it only there (calmer filter header). */
/* (board search now lives in .sam-board-filterbar — see the board-filter section) */
.sam-board-browse .sam-cl-search__input { font-size: 0.875rem; padding: 0.55rem 0.9rem; }

/* Media-kit rate-card tables (saminfo/rate-sheet) — a premium card: navy header,
   zebra rows, hover, emphasized label column, tabular right-aligned prices. */
.sam-ratecard-table { margin-block: 1.1rem 1.75rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 10px; overflow: hidden; background: var(--wp--preset--color--base); box-shadow: 0 1px 0 color-mix(in oklab, var(--wp--preset--color--navy) 6%, transparent); }
.sam-ratecard-table table { width: 100%; border-collapse: collapse; }
.sam-ratecard-table thead th { background: var(--wp--preset--color--navy); color: #fff; font-family: var(--wp--preset--font-family--sans); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.72rem 1.05rem; text-align: left; }
.sam-ratecard-table tbody td { padding: 0.64rem 1.05rem; border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--rule) 65%, transparent); font-size: 0.9rem; }
.sam-ratecard-table tbody tr:first-child td { border-top: 0; }
.sam-ratecard-table tbody tr:nth-child(even) { background: color-mix(in oklab, var(--wp--preset--color--navy) 3%, transparent); }
.sam-ratecard-table tbody tr:hover { background: color-mix(in oklab, var(--wp--preset--color--orange) 7%, transparent); }
.sam-ratecard-table td:first-child { font-weight: 700; color: var(--wp--preset--color--navy); }
.sam-ratecard-table th:not(:first-child), .sam-ratecard-table td:not(:first-child) { text-align: right; }
.sam-ratecard-table td:not(:first-child) { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wp--preset--color--ink-2); }
.sam-ratecard-table figcaption { padding: 0.62rem 1.05rem; margin: 0; background: color-mix(in oklab, var(--wp--preset--color--rule) 26%, transparent); border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--rule) 70%, transparent); font-size: 0.8rem; color: var(--wp--preset--color--ink-3); }

/* Rate sheet — live inventory block (saminfo/rate-inventory): availability viz + CTAs. */
.sam-rate-inventory { margin: 1rem 0 1.75rem; }
.sam-ri-summary { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; padding: 1rem 1.25rem; background: var(--wp--preset--color--navy); color: #fff; border-radius: 8px; margin-bottom: 1.25rem; }
.sam-ri-summary__stat { display: flex; align-items: baseline; gap: 0.45rem; }
.sam-ri-summary__stat strong { font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; line-height: 1; }
.sam-ri-summary__stat span { font-family: var(--wp--preset--font-family--sans); font-size: 0.8rem; opacity: 0.85; }
.sam-ri-summary__bar { flex: 1 1 130px; min-width: 110px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.22); overflow: hidden; }
.sam-ri-summary__bar > span { display: block; height: 100%; background: var(--wp--preset--color--cyan); }
.sam-ri-link { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }
.sam-ri-link:hover { color: var(--wp--preset--color--yellow); }
.sam-ri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 0.85rem; }
.sam-ri-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 8px; background: var(--wp--preset--color--base); }
.sam-ri-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.sam-ri-card__name { font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--wp--preset--color--navy); }
.sam-ri-avail { flex: 0 0 auto; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.sam-ri-avail--open { background: #e0f5e7; color: #1d7a3f; }
.sam-ri-avail--limited { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--navy); }
.sam-ri-avail--sold { background: color-mix(in oklab, var(--wp--preset--color--ink-3) 20%, transparent); color: var(--wp--preset--color--ink-3); }
.sam-ri-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sam-ri-tag { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); background: color-mix(in oklab, var(--wp--preset--color--rule) 40%, transparent); padding: 0.2rem 0.5rem; border-radius: 4px; }
.sam-ri-tag--premium { background: color-mix(in oklab, var(--wp--preset--color--orange) 16%, transparent); color: var(--wp--preset--color--orange); }
.sam-ri-tag--email { background: color-mix(in oklab, var(--wp--preset--color--cyan) 16%, transparent); color: var(--wp--preset--color--navy); }
.sam-ri-card__loc { font-family: var(--wp--preset--font-family--sans); font-size: 0.72rem; color: var(--wp--preset--color--ink-3); }
.sam-ri-card__foot { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 0.2rem; }
.sam-ri-card__rate { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.9rem; color: var(--wp--preset--color--navy); white-space: nowrap; }
.sam-ri-fill { flex: 1 1 auto; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--wp--preset--color--rule) 50%, transparent); overflow: hidden; }
.sam-ri-fill__bar { display: block; height: 100%; background: var(--wp--preset--color--navy); }
.sam-ri-card__example { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.7rem; color: var(--wp--preset--color--cyan-ink); text-decoration: none; }
.sam-ri-card__example:hover { color: var(--wp--preset--color--orange); }
.sam-ri-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.sam-ri-btn { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.03em; text-decoration: none; padding: 0.7rem 1.4rem; border-radius: 4px; border: 1px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); transition: background-color 140ms ease, color 140ms ease; }
.sam-ri-btn:hover { background: var(--wp--preset--color--navy); color: #fff; }
.sam-ri-btn--primary { background: var(--wp--preset--color--orange); border-color: var(--wp--preset--color--orange); color: #fff; }
.sam-ri-btn--primary:hover { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); }
.sam-ri-empty { font-style: italic; color: var(--wp--preset--color--ink-3); }

/* Front-end ad-insights overlay — toggled by the admin-bar "Ad Insights" item.
   Off by default; only privileged users ever get the markup. */
.sam-slot-wrap { position: relative; }
.sam-slot-panel { display: none; }
body.sam-adinsights-on .sam-slot-wrap { outline: 2px dashed color-mix(in oklab, var(--wp--preset--color--orange) 55%, transparent); outline-offset: 2px; }
body.sam-adinsights-on .sam-slot-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; position: absolute; top: 6px; left: 6px; right: 6px; z-index: 6; background: rgba(4,2,77,0.94); color: #fff; padding: 6px 10px; border-radius: 7px; font-family: var(--wp--preset--font-family--sans); font-size: 11px; line-height: 1.3; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.sam-slot-panel .sam-slot-tag { position: static; font-weight: 800; color: #fff; text-decoration: none; }
.sam-slot-panel .sam-slot-tag:hover { color: var(--wp--preset--color--yellow); }
.sam-slot-panel .sam-slot-tag b { color: var(--wp--preset--color--yellow); }
.sam-slot-stats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: auto; font-weight: 500; }
.sam-slot-stats > span { white-space: nowrap; color: rgba(255,255,255,0.82); }
.sam-slot-stats b { color: #fff; font-weight: 800; }
.sam-slot-stats__win { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5) !important; }
/* Flight chip — how much longer the slot is committed. Neutral by default,
   amber when ≤7 days (about to free up / sellable soon), red when expired. */
.sam-slot-flight { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); white-space: nowrap; }
.sam-slot-flight::before { content: "◷"; font-size: 10px; line-height: 1; opacity: 0.85; }
.sam-slot-flight.is-soon { background: rgba(243,112,33,0.92); color: #fff; }
.sam-slot-flight.is-over { background: rgba(214,40,40,0.95); color: #fff; }
.sam-slot-flight.is-ongoing { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.sam-slot-flight.is-ongoing::before { content: "∞"; font-size: 11px; }
/* Rule-injected in-article ad placements (saminfo_inject_content_placements). */
.sam-ad-placement { margin: 2rem 0; clear: both; }
.sam-ad-placement--before_content { margin-top: 0; }
.sam-ad-placement--after_content { margin-bottom: 0; }
/* Swap control — reassign which creative fills this position, from the overlay. */
.sam-slot-swap { position: relative; }
.sam-slot-swap__btn { font: 800 9px/1 var(--wp--preset--font-family--sans); text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: rgba(255,255,255,0.14); border: 0; border-radius: 999px; padding: 3px 9px; cursor: pointer; transition: background 120ms; }
.sam-slot-swap__btn:hover { background: var(--wp--preset--color--orange, #d45a1e); }
.sam-slot-picker { position: absolute; top: calc(100% + 6px); right: 0; z-index: 7; width: 280px; max-height: 320px; overflow-y: auto; background: #fff; color: var(--wp--preset--color--ink); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); padding: 5px; font-family: var(--wp--preset--font-family--sans); }
.sam-slot-search { position: sticky; top: 0; width: 100%; box-sizing: border-box; margin: 0 0 4px; padding: 8px 10px; font: 600 12px/1.4 var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ink); background: #fff; border: 1px solid var(--wp--preset--color--rule, #dad6c8); border-radius: 5px; }
.sam-slot-search::placeholder { color: var(--wp--preset--color--ink-3, #777); font-weight: 400; }
.sam-slot-search:focus { outline: 2px solid var(--wp--preset--color--orange, #d45a1e); outline-offset: -1px; border-color: transparent; }
.sam-slot-pick { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 7px 9px; cursor: pointer; color: inherit; }
.sam-slot-pick:hover { background: var(--wp--preset--color--rule, #eee); }
.sam-slot-pick.is-active { background: color-mix(in oklab, var(--wp--preset--color--orange, #d45a1e) 14%, #fff); }
.sam-slot-pick__t { font-size: 12.5px; font-weight: 700; }
.sam-slot-pick__s { font-size: 10px; color: var(--wp--preset--color--ink-3, #777); text-transform: uppercase; letter-spacing: 0.04em; }

/* Community member reputation + profile (M8) */
.sam-rep { display: inline-block; padding: 1px 7px; border-radius: 999px; font-family: var(--wp--preset--font-family--sans); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
.sam-rep--trusted { background: var(--wp--preset--color--orange); color: #fff; }
.sam-rep--contributor { background: color-mix(in oklab, var(--wp--preset--color--navy) 12%, transparent); color: var(--wp--preset--color--navy); }
.sam-board-profile { max-width: 640px; }
.sam-board-profile__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.sam-board-profile__name { font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.5rem; margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.sam-board-profile__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 0; }
.sam-board-profile__stats > div { border: 1px solid var(--wp--preset--color--rule); border-radius: 10px; padding: 0.85rem 1rem; }
.sam-board-profile__stats dt { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--cyan-ink); margin: 0 0 0.25rem; }
.sam-board-profile__stats dd { font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.5rem; margin: 0; color: var(--wp--preset--color--navy); }

/* Saved search + follow-thread buttons (C7, M7) */
.sam-cl-savesearch, .sam-board-follow { margin-left: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--wp--preset--color--navy); border-radius: 100px; background: transparent; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.sam-cl-savesearch { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.sam-cl-savesearch__icon { font-size: 0.9em; line-height: 1; }
.sam-cl-savesearch:hover, .sam-board-follow:hover { background: var(--wp--preset--color--navy); color: #fff; }
.sam-cl-savesearch[disabled] { opacity: 0.6; cursor: default; }
.sam-board-detail__follow { margin-top: 0.75rem; }
/* What "Save this search" actually does — stated up front, then confirmed. The
   caption explains the email-alert outcome before the click and turns into the
   confirmation + a link to manage it afterward (client 2026-08-04). */
.sam-cl-savehint { margin: 0.5rem 0 1rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--ink-2, #5a6472); max-width: 60ch; }
.sam-cl-savehint.is-done { color: var(--wp--preset--color--navy); font-weight: 600; }
.sam-cl-savehint.is-error { color: var(--wp--preset--color--orange-ink, #b34a15); font-weight: 600; }
.sam-cl-savehint__link { margin-left: 0.5rem; font-weight: 800; color: var(--wp--preset--color--cyan-ink, #0a6c8f); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 140ms ease; }
.sam-cl-savehint__link:hover, .sam-cl-savehint__link:focus-visible { border-bottom-color: var(--wp--preset--color--cyan, #00aeef); }

/* Employer "My Listings" portal (C6) */
.sam-my-listings { max-width: 760px; }
.sam-my-listings__title { font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.5rem; margin: 0 0 1rem; }
.sam-ml-row { border: 1px solid var(--wp--preset--color--rule); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 0.85rem; }
.sam-ml-row__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sam-ml-row__name { font-size: 1rem; color: var(--wp--preset--color--navy); }
.sam-ml-row__status { font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--ink-2, #5F6062); }
.sam-ml-row__status--publish { background: #e0f5e7; color: #1d7a3f; }
.sam-ml-row__status--pending { background: #fff4d6; color: #8a6d00; }
.sam-ml-row__meta { font-size: 0.8125rem; color: var(--wp--preset--color--cyan-ink); margin: 0.4rem 0 0.6rem; }
.sam-ml-row__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sam-ml-edit, .sam-ml-renew, .sam-ml-view, .sam-ml-save { display: inline-block; padding: 0.4rem 0.85rem; border-radius: 100px; border: 1px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); background: transparent; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.sam-ml-renew { background: var(--wp--preset--color--orange); border-color: var(--wp--preset--color--orange); color: #fff; }
.sam-ml-form { margin-top: 0.85rem; display: grid; gap: 0.5rem; }
.sam-ml-form input, .sam-ml-form textarea { width: 100%; padding: 0.55rem 0.8rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 7px; font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; }
.sam-ml-save { background: var(--wp--preset--color--navy); color: #fff; }
.sam-ml-status { font-size: 0.8125rem; color: #1d7a3f; margin-left: 0.5rem; }
.sam-ml-hint { font-size: 0.75rem; color: var(--wp--preset--color--cyan-ink); margin: 0.25rem 0 0; }
/* Board pinned badge + cell */
.sam-board-badge--pin { background: color-mix(in oklab, var(--wp--preset--color--navy) 12%, transparent); color: var(--wp--preset--color--navy); }
.sam-board-cell.is-pinned .sam-board-card { border-color: color-mix(in oklab, var(--wp--preset--color--navy) 35%, var(--wp--preset--color--rule)); }

/* ── Department supplier guide (saminfo/dept-suppliers) ─────────────────────── */
.sam-dept-suppliers { padding-top: 2.5rem; padding-bottom: 1rem; border-top: 1px solid var(--wp--preset--color--rule); }
.sam-dept-suppliers__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem 1rem; border-bottom: 2px solid var(--wp--preset--color--navy); margin-bottom: 1.5rem; padding-bottom: 0.75rem; }
.sam-dept-suppliers__title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.018em; margin: 0; }
.sam-dept-suppliers__list { margin: 0; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--sans, Overpass, sans-serif); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sam-suppliers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sam-supplier-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 1.25rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 4px; background: #fff; text-decoration: none; color: var(--wp--preset--color--ink); transition: border-color 140ms, box-shadow 140ms, transform 140ms; }
.sam-supplier-card:hover { border-color: var(--wp--preset--color--orange, #d45a1e); box-shadow: 0 6px 18px rgba(0,0,0,0.07); transform: translateY(-2px); }
.sam-supplier-logo { display: flex; align-items: center; justify-content: center; height: var(--sam-supplier-logo-h, 110px); margin-bottom: 0.15rem; }
.sam-supplier-logo img { max-height: var(--sam-supplier-logo-h, 110px); max-width: 100%; width: auto; object-fit: contain; }
.sam-supplier-logo--text { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.05rem; color: var(--wp--preset--color--navy); }
.sam-supplier-name { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 0.9375rem; letter-spacing: -0.01em; }
/* No-logo cards: the name becomes the visual anchor (navy, larger). */
.sam-supplier-card.is-no-logo { justify-content: center; }
.sam-supplier-card.is-no-logo .sam-supplier-name { font-size: 1.1875rem; color: var(--wp--preset--color--navy); }
.sam-supplier-blurb { font-size: 0.8125rem; line-height: 1.4; color: var(--wp--preset--color--ink-2); overflow-wrap: anywhere; }
.sam-suppliers-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--rule); border-left: 4px solid var(--wp--preset--color--gold, #f0a500); border-radius: 4px; padding: 1.5rem 1.75rem; }
.sam-suppliers-cta__lead { margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.0625rem; color: var(--wp--preset--color--navy); }
.sam-suppliers-cta__sub { margin: 0; color: var(--wp--preset--color--ink-2); font-size: 0.9375rem; }
.sam-suppliers-cta__btn { margin-top: 0.4rem; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--navy); text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--orange, #d45a1e); padding-bottom: 2px; }
@media (max-width: 900px) { .sam-suppliers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .sam-dept-suppliers__head { flex-direction: column; align-items: flex-start; }
  .sam-dept-suppliers__title { font-size: 1.35rem; }
  .sam-suppliers-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .sam-supplier-card { padding: 0.85rem; }
  .sam-supplier-logo { height: var(--sam-supplier-logo-h, 72px); }
  .sam-supplier-logo img { max-height: var(--sam-supplier-logo-h, 72px); }
}

/* ──────────────────────────────────────────────────────────────────────
   ACCESSIBILITY — WCAG AA contrast fixes (Lighthouse a11y → 100)
   White text on SAM Orange is only 2.9:1; navy text on the same orange is
   5.5:1 and keeps the vivid brand color. Applied to the orange-background
   button variants that previously used near-white (base) text.
   ────────────────────────────────────────────────────────────────────── */
.wp-block-button__link.has-orange-background-color.has-base-color,
.wp-block-button__link.has-orange-background-color.has-base-color:hover,
.wp-block-button__link.has-orange-background-color.has-base-color:focus,
.sam-board-boost__btn,
.sam-board-boost__btn:hover {
  color: var(--wp--preset--color--navy) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   CORE TABLE STYLING (core/table) — on-brand, accessible, site-wide.
   Fixes white-on-white headers and gives every table a navy header row,
   striped body, clear borders, and comfortable padding.
   ────────────────────────────────────────────────────────────────────── */
.wp-block-table { margin: 1.75rem 0; overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; font-family: var(--wp--preset--font-family--sans); font-size: 0.94rem; line-height: 1.5; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-table thead th {
  background: var(--wp--preset--color--navy);
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--wp--preset--color--navy);
}
.wp-block-table tbody td,
.wp-block-table tbody th {
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--wp--preset--color--rule);
  vertical-align: top;
  color: var(--wp--preset--color--ink-2);
}
.wp-block-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--base-2); }
.wp-block-table tbody tr:hover td { background: var(--wp--preset--color--cyan-tint); }
.wp-block-table td code,
.wp-block-table th code { background: var(--wp--preset--color--base-3); color: var(--wp--preset--color--navy); padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.85em; }
.wp-block-table figcaption,
.wp-block-table .wp-element-caption { margin-top: 0.5rem; color: var(--wp--preset--color--ink-2); font-size: 0.8rem; font-style: italic; }

/* Legal pages (Privacy/Cookie/Terms): a touch more breathing room + a clear
   note callout. Tables inherit the core styling above. */
.sam-legal-table table { font-size: 0.9rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Industry Calendar — saminfo/events-list (the /events/ archive feed)
   Editorial rows grouped by month: date chip · title/meta · region badge.
   ───────────────────────────────────────────────────────────────────────── */
.sam-evtlist { margin: 0; }

.sam-evtlist-month {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--wp--preset--color--base);
  padding: 0.6rem 0 0.5rem;
  margin: 2rem 0 0.25rem;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.sam-evtlist-month:first-child { margin-top: 0; }
.sam-evtlist-month span {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
}

.sam-evtlist-rows { list-style: none; margin: 0; padding: 0; }

.sam-evt-row {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.05rem 0.5rem 1.05rem 0;
  border-bottom: 1px solid var(--wp--preset--color--rule);
  transition: background-color 0.15s ease;
}
.sam-evt-row:hover { background: var(--wp--preset--color--base-2); }

/* Date chip — navy block, stacked month over day. */
.sam-evt-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: 0.4rem 0.25rem;
  background: var(--wp--preset--color--navy);
  color: #fff;
  border-radius: 3px;
  line-height: 1;
}
.sam-evt-mon {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.2rem;
}
.sam-evt-day {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sam-evt-body { min-width: 0; }
.sam-evt-title {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.sam-evt-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sam-evt-title a:hover { color: var(--wp--preset--color--orange); }
.sam-evt-meta {
  margin: 0.3rem 0 0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.82rem;
  color: var(--wp--preset--color--ink-2);
}

.sam-evt-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  text-align: right;
}
.sam-evt-region {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  text-decoration: none;
  white-space: nowrap;
}
.sam-evt-region:hover { border-color: var(--wp--preset--color--navy); }
.sam-evt-ext {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wp--preset--color--ink-2);
  text-decoration: none;
}
.sam-evt-ext:hover { color: var(--wp--preset--color--orange); }

.sam-evtlist--empty {
  padding: 2.5rem 0;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--wp--preset--color--ink-2);
}

@media (max-width: 600px) {
  .sam-evt-row { grid-template-columns: 3.5rem 1fr; gap: 0.9rem; }
  .sam-evt-aside {
    grid-column: 2 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    margin-top: 0.1rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Program pages (Summer Ops Camp, Cutter's Camp, Summit Series, AI Bootcamp)
   Companion styles for the saminfo/program-* patterns. Colors and type all
   come from theme.json tokens — no program-specific hex values.
   ───────────────────────────────────────────────────────────────────────── */

/* Section nav — jump links across long program pages. Pins below the masthead
   like the department mini-nav; --sam-sticky-head-h is set in view.js. */
.sam-dept-mininav,
.sam-program-subnav {
  position: sticky;
  top: var(--sam-sticky-head-h, 0px);
  z-index: 40;
  background: var(--wp--preset--color--base, #fff);
  box-sizing: border-box;
  /* Full-bleed bar: background + borders span the viewport; link row stays on
     the template content measure (theme.json wideSize / canvasContentSize). */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* No top border — it read as a 1px hairline gap under the navy masthead while
     scrolling; bottom rule is enough to separate from page content. */
  border-top: 0;
  border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8);
}
.sam-dept-mininav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: center;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.5rem;
}
.sam-dept-content .sam-dept-mininav {
  padding-left: max(var(--sam-gutter), calc((100vw - var(--wp--style--global--wide-size, 1320px)) / 2 + var(--sam-gutter)));
  padding-right: max(var(--sam-gutter), calc((100vw - var(--wp--style--global--wide-size, 1320px)) / 2 + var(--sam-gutter)));
}
.sam-program-subnav {
  gap: 0.5rem 2rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.sam-canvas-content .sam-program-subnav {
  padding-left: max(var(--sam-gutter), calc((100vw - var(--wp--custom--canvas-content-size, 1080px)) / 2 + var(--sam-gutter)));
  padding-right: max(var(--sam-gutter), calc((100vw - var(--wp--custom--canvas-content-size, 1080px)) / 2 + var(--sam-gutter)));
}
.sam-program-subnav-link {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.sam-program-subnav-link a { color: var(--wp--preset--color--navy); text-decoration: none; }
.sam-program-subnav-link a:hover { color: var(--wp--preset--color--orange-ink); }

/* Explore cards — the whole card reads as one link target. */
.sam-program-card h3 a { color: inherit; text-decoration: none; }
.sam-program-card h3 a:hover { color: var(--wp--preset--color--orange-ink); }
.sam-program-readmore a { color: var(--wp--preset--color--navy); text-decoration: none; }
.sam-program-readmore a:hover { color: var(--wp--preset--color--orange-ink); }

/* Venue feature quote — sourced pull-quote, tighter than editorial pullquote. */
.sam-program-quote blockquote p {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  text-align: left;
}
.sam-program-quote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  color: var(--wp--preset--color--ink-2);
  text-align: left;
}

/* Registration package cards. */
.sam-pkg-card { overflow: hidden; }
.sam-pkg-card > figure img { border-radius: 5px 5px 0 0; }
.sam-pkg-price sub {
  bottom: 0;
  margin-left: 0.35rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink-3);
}

/* Schedule day — zebra rows, mobile stack. */
.sam-program-day { overflow: hidden; }
.sam-program-day .sam-program-slot { border-bottom: 1px solid var(--wp--preset--color--rule); }
.sam-program-day .sam-program-slot:last-child { border-bottom: none; }
.sam-program-day .sam-program-slot:nth-child(odd) { background: var(--wp--preset--color--base-2); }
.sam-program-slot .sam-slot-time { flex: 0 0 140px; }
.sam-program-slot p { margin: 0; }
@media (max-width: 600px) {
  .sam-program-slot { flex-wrap: wrap; }
  .sam-program-slot .sam-slot-time { flex: 1 1 100%; }
}

/* Partner logo wall — logo sizes come from each image block's width
   (editor-controlled: select the images and set a width to scale the whole
   grid), so no CSS size clamps here. */
.sam-partner-grid .sam-partner-logo { margin: 0; }
.sam-partner-grid .sam-partner-logo img { object-fit: contain; height: auto; }
@media (max-width: 700px) {
  .sam-partner-grid {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 1.25rem !important;
  }
  .sam-partner-grid .sam-partner-logo {
    width: min(100%, 220px);
    max-width: 220px;
  }
}

/* Past-cohort tile grid (Summit Series). */
.sam-tile-card h3 a { color: inherit; text-decoration: none; }
.sam-tile-card h3 a:hover { color: var(--wp--preset--color--orange-ink); }

/* Canvas pages open with a full-bleed hero and end on a full-bleed band —
   remove the standard page/footer gutters so navy meets navy. */
.page-template-page-canvas .sam-site-footer { margin-top: 0 !important; }

/* ── Contest ballot (saminfo/contest-ballot) ─────────────────────────────── */
.sam-contest-ballot { margin: 2rem 0; }
.sam-ballot-sponsor { font: 800 0.6875rem/1.4 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6b76); margin: 0 0 1.25rem; }
.sam-ballot-notice, .sam-ballot-closed { font-family: var(--wp--preset--font-family--sans); font-weight: 600; padding: 1rem 1.25rem; margin: 0 0 1.5rem; border: 1px solid var(--wp--preset--color--rule, #e3e3e8); border-top: 3px solid var(--wp--preset--color--navy, #04024d); background: var(--wp--preset--color--base-2, #f7f7f9); }
.sam-ballot-category { border: 0; padding: 0; margin: 0 0 2.5rem; }
.sam-ballot-category__title { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1.125rem; letter-spacing: 0.02em; padding: 0 0 0.75rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--wp--preset--color--navy, #04024d); width: 100%; }
.sam-ballot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.sam-ballot-card { display: block; cursor: pointer; position: relative; }
.sam-ballot-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sam-ballot-card__body { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; padding: 1rem; border: 1px solid var(--wp--preset--color--rule, #e3e3e8); background: var(--wp--preset--color--base, #fff); transition: border-color 120ms, box-shadow 120ms; }
.sam-ballot-card:hover .sam-ballot-card__body { border-color: var(--wp--preset--color--navy, #04024d); }
.sam-ballot-card input:checked + .sam-ballot-card__body { border-color: var(--wp--preset--color--navy, #04024d); box-shadow: inset 0 0 0 2px var(--wp--preset--color--navy, #04024d); }
.sam-ballot-card input:checked + .sam-ballot-card__body::after { content: "✓ Your pick"; font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--navy, #04024d); padding: 0.35rem 0.6rem; position: absolute; top: 0.6rem; right: 0.6rem; }
.sam-ballot-card input:focus-visible + .sam-ballot-card__body { outline: 2px solid var(--wp--preset--color--orange, #d45a1e); outline-offset: 2px; }
.sam-ballot-card__img { width: 100%; height: 150px; object-fit: cover; margin-bottom: 0.35rem; }
.sam-ballot-card__name { font-family: var(--wp--preset--font-family--sans); font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--wp--preset--color--ink, #17171d); }
.sam-ballot-card__resort { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--ink-3, #6b6b76); }
.sam-ballot-card__blurb { font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--ink-2, #41414a); }
.sam-ballot-card__video { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-weight: 700; margin-top: auto; }
.sam-ballot-submit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem; padding-top: 0.5rem; border-top: 1px solid var(--wp--preset--color--rule, #e3e3e8); }
.sam-ballot-email { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sam-ballot-email input { min-width: 16rem; padding: 0.55rem 0.75rem; font-size: 16px; font-family: var(--wp--preset--font-family--sans); border: 1px solid var(--wp--preset--color--rule); border-radius: 2px; }
.sam-ballot-hp { position: absolute !important; left: -9999px !important; }
.sam-ballot-fineprint { flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: var(--wp--preset--color--ink-3); }
.sam-ballot-message { margin-top: 1rem; font-family: var(--wp--preset--font-family--sans); font-weight: 600; }
.sam-contest-ballot.is-sent .sam-ballot-form fieldset, .sam-contest-ballot.is-sent .sam-ballot-submit { opacity: 0.45; pointer-events: none; }

/* ── Department page — 2026-07 redesign round ────────────────────────────── */

/* Container gutters: the dept template's main is chrome-only, so the content
   column carries its own fluid gutter; full-bleed children (parallax band)
   pull back out with matching negative margins. Keeps text/headings off the
   viewport edge on mobile without double-padding other templates. */
.sam-dept-content { padding-left: var(--sam-gutter); padding-right: var(--sam-gutter); }
.sam-dept-content > .alignfull {
  margin-left: calc(-1 * var(--sam-gutter)) !important;
  margin-right: calc(-1 * var(--sam-gutter)) !important;
  max-width: none !important;
  padding-left: var(--sam-gutter);
  padding-right: var(--sam-gutter);
  box-sizing: border-box;
}
.sam-dept-content > .alignfull.sam-parallax-slot {
  padding-left: 0;
  padding-right: 0;
}

/* Breadcrumb bar (above the top ad) with current page */
.sam-crumbs { font: 600 0.75rem/1.4 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.04em; color: var(--wp--preset--color--ink-2, #41414a); }
.sam-crumbs a { text-decoration: none; }
.sam-crumbs a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }
.sam-crumbs__current { color: var(--wp--preset--color--navy, #04024d); font-weight: 800; }

/* Sticky mini-nav — pins below the site masthead; --sam-sticky-head-h is set live
   in view.js (initHeader) so the bar never hides under .sam-sticky-head. */
.sam-dept-mininav a { font: 700 0.6875rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-2, #41414a); text-decoration: none; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
@media (min-width: 901px) {
  .sam-dept-mininav { gap: 0.4rem 2rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .sam-dept-mininav a { font-size: 0.8125rem; letter-spacing: 0.12em; }
}
.sam-dept-mininav a:hover,
.sam-dept-mininav a.is-active,
.sam-dept-mininav a[aria-current="true"] { color: var(--wp--preset--color--orange-ink, #b34a15); border-bottom-color: var(--wp--preset--color--orange, #d45a1e); }
.sam-program-subnav-link a.is-active,
.sam-program-subnav-link a[aria-current="true"] { color: var(--wp--preset--color--orange-ink); }
/* In-page anchors: offset = live masthead + sticky subnav (initHeader in view.js).
   Section-label headings add --sam-scroll-label-gap so the air above the title
   matches the label's padding-bottom above the rule (0.75rem in patterns). */
main [id],
main [id] > :is(h2, h3, .wp-block-heading),
.sam-canvas-content [id],
.sam-canvas-content [id] > :is(h2, h3, .wp-block-heading),
.sam-dept-content [id],
.sam-dept-content [id] > :is(h2, h3, .wp-block-heading),
:is(h2, h3)[id] { scroll-margin-top: var(--sam-scroll-offset, 7.5rem); }
main [id] .sam-section-label :is(h2, h3),
.sam-canvas-content [id] .sam-section-label :is(h2, h3),
.sam-dept-content [id] .sam-section-label :is(h2, h3) {
  scroll-margin-top: calc(var(--sam-scroll-offset, 7.5rem) + var(--sam-scroll-label-gap));
}
@media (max-width: 700px) { .sam-dept-mininav { gap: 0.25rem 1rem; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; } }

/* In-feed placement cell inside the features grid */
.sam-dept-infeed-ad { display: flex; align-items: stretch; }
.sam-dept-infeed-ad > * { width: 100%; }

/* Latest News — TYPOGRAPHIC wire wall: date-led text bricks on aligned rows,
   no images (news art is logo-heavy/low-res; the image-led section above stays
   Features). Lead brick = 2 columns of bigger type; every row lines up. */
.sam-dept-news-masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.sam-news-brick { border: 1px solid var(--wp--preset--color--rule, #e3e3e8); border-top: 3px solid var(--wp--preset--color--navy, #04024d); background: var(--wp--preset--color--base, #fff); transition: border-color 120ms, box-shadow 120ms; min-width: 0; }
.sam-news-brick:hover { border-color: var(--wp--preset--color--navy, #04024d); box-shadow: 0 2px 10px rgba(4, 2, 77, 0.07); }
.sam-news-brick > a { display: flex; flex-direction: column; height: 100%; padding: 1.15rem 1.3rem 1.2rem; color: inherit; text-decoration: none; }
.sam-news-brick--lead { grid-column: span 2; border-top-color: var(--wp--preset--color--orange, #d45a1e); }
.sam-news-brick__date { display: block; font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange-ink, #b34a15); margin-bottom: 0.5rem; }
.sam-news-brick__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.45rem; }
.sam-news-brick--lead .sam-news-brick__title { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem); line-height: 1.2; }
.sam-news-brick__dek { font-size: 0.875rem; line-height: 1.55; color: var(--wp--preset--color--ink-2, #41414a); margin: 0 0 0.6rem; }
.sam-news-brick--lead .sam-news-brick__dek { font-size: 0.9375rem; }
.sam-news-brick__more { margin-top: auto; font: 700 0.6875rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--navy, #04024d); }
.sam-news-brick > a:hover .sam-news-brick__more { color: var(--wp--preset--color--orange-ink, #b34a15); }
@media (max-width: 1000px) { .sam-dept-news-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sam-news-brick--lead { grid-column: span 2; } }
@media (max-width: 640px) { .sam-dept-news-masonry { grid-template-columns: 1fr; } .sam-news-brick--lead { grid-column: auto; } }

/* Community — calendar + contest side-by-side, then full-width board and
   classifieds rows (each block gets the width its cards were designed for). */
.sam-dept-community { display: flex; flex-direction: column; gap: 2.5rem; }
.sam-dept-community__top { display: flex; align-items: stretch; gap: 2.5rem; }
.sam-dept-community__top > .sam-dept-community__col:first-child { flex: 5 1 0; min-width: 0; display: flex; flex-direction: column; }
.sam-dept-community__top > .sam-dept-community__col:nth-child(2) { flex: 7 1 0; min-width: 0; }
.sam-dept-community__h { font: 800 0.8125rem/1.3 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--navy, #04024d); margin: 0 0 0.9rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8); }
.sam-dept-community__more { margin: 0.75rem 0 0; }
.sam-dept-community__top > .sam-dept-community__col:first-child > .sam-dept-community__more { margin-top: auto; }
.sam-dept-community__more a { font: 700 0.75rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.sam-dept-community__empty { color: var(--wp--preset--color--ink-3, #6b6b76); font-style: italic; }
@media (max-width: 900px) { .sam-dept-community__top { flex-direction: column; gap: 2rem; } }

/* Community — events list. Items grow so the column matches the featured contest. */
.sam-dept-community__top .sam-dept-events { flex: 1 1 auto; display: flex; flex-direction: column; }
.sam-dept-events { list-style: none; margin: 0; padding: 0; }
.sam-dept-events__item { display: flex; gap: var(--wp--preset--spacing--40, 1rem); align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8); }
.sam-dept-community__top .sam-dept-events__item { flex: 1 1 auto; align-items: center; }
.sam-dept-events__date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 3.1rem; padding: 0.4rem 0.5rem; background: var(--wp--preset--color--navy, #04024d); color: #fff; font-family: var(--wp--preset--font-family--sans, sans-serif); line-height: 1.1; }
.sam-dept-events__date span { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.sam-dept-events__date strong { font-size: 1.25rem; font-weight: 800; }
.sam-dept-events__text { display: flex; flex-direction: column; gap: 0.15rem; }
.sam-dept-events__text a { font-weight: 700; font-size: 1rem; line-height: 1.3; text-decoration: none; color: inherit; }
.sam-dept-events__text a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }
.sam-dept-events__text em { font-style: normal; font-family: var(--wp--preset--font-family--sans, sans-serif); font-size: 0.8125rem; color: var(--wp--preset--color--ink-3, #6b6b76); }

/* Community — featured contest card */
.sam-dept-contest { display: flex; flex-direction: column; border: 1px solid var(--wp--preset--color--rule, #e3e3e8); border-top: 3px solid var(--wp--preset--color--navy, #04024d); background: var(--wp--preset--color--base-2, #f7f7f9); text-decoration: none; color: inherit; transition: border-color 120ms; }
.sam-dept-contest:hover { border-color: var(--wp--preset--color--navy, #04024d); }
.sam-dept-contest__media img { width: 100%; aspect-ratio: 16/8; object-fit: cover; display: block; }
.sam-dept-contest__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.2rem 1.4rem 1.4rem; }
.sam-dept-contest__pill { align-self: flex-start; font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--navy, #04024d); padding: 0.3rem 0.6rem; }
.sam-dept-contest--open .sam-dept-contest__pill { background: var(--wp--preset--color--cyan-ink, #0e7490); }
.sam-dept-contest__title { font-size: 1.375rem; font-weight: 800; line-height: 1.2; }
.sam-dept-contest__sponsor { font: 700 0.6875rem/1.4 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6b76); }
.sam-dept-contest__dek { font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--ink-2, #41414a); }
.sam-dept-contest__cta { margin-top: 0.3rem; font: 700 0.75rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--orange-ink, #b34a15); }

/* Embedded-voting variant: the card is a <div> (it wraps a form), title/CTA are links. */
.sam-dept-contest--embed .sam-dept-contest__dek { margin: 0; }
.sam-dept-contest--embed .sam-dept-contest__title a { color: inherit; text-decoration: none; }
.sam-dept-contest--embed .sam-dept-contest__title a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }
.sam-dept-contest--embed .sam-dept-contest__cta a { color: inherit; text-decoration: none; }
.sam-dept-contest--embed .sam-dept-contest__cta a:hover { text-decoration: underline; }
.sam-dept-contest--embed .sam-ballot-sponsor { margin: 0.4rem 0 0; }
.sam-dept-contest--embed .sam-ballot-notice, .sam-dept-contest--embed .sam-ballot-closed { margin: 0.6rem 0 0; }
.sam-dept-ballot { margin-top: 0.6rem; border-top: 1px solid var(--wp--preset--color--rule, #e3e3e8); }
.sam-dept-ballot__toggle { list-style: none; cursor: pointer; display: inline-block; margin-top: 1rem; padding: 0.6rem 1.1rem; font: 700 0.75rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--navy, #04024d); transition: background 120ms; }
.sam-dept-ballot__toggle:hover { background: var(--wp--preset--color--orange-ink, #b34a15); }
.sam-dept-ballot__toggle::-webkit-details-marker { display: none; }
.sam-dept-ballot__toggle::after { content: " ▾"; }
.sam-dept-ballot[open] > .sam-dept-ballot__toggle::after { content: " ▴"; }
.sam-dept-ballot > .sam-contest-ballot { margin-top: 1rem; }
.sam-dept-ballot .sam-ballot-grid { grid-template-columns: 1fr; }
.sam-dept-ballot .sam-ballot-card__img { height: 120px; }
.sam-dept-ballot .sam-ballot-category { margin-bottom: 1.5rem; }
.sam-dept-ballot .sam-ballot-email { flex: 1 1 12rem; }
.sam-dept-ballot .sam-ballot-email input { min-width: 0; width: 100%; }

/* Community — classifieds cards, full-width 4-up row (their designed density);
   stays 2-up on phones (client 2026-07: never single-column). */
.sam-cl-grid--community { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1000px) { .sam-cl-grid--community { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sam-cl-grid--community { gap: 0.75rem; } }

/* Through the Decades — snap rail */
.sam-decades-rail { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; }
.sam-decade-card { position: relative; flex: 0 0 260px; scroll-snap-align: start; border: 1px solid var(--wp--preset--color--rule, #e3e3e8); background: var(--wp--preset--color--base, #fff); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color 120ms; }
.sam-decade-card:hover { border-color: var(--wp--preset--color--navy, #04024d); }
.sam-decade-card__media img, .sam-decade-card__img { width: 100%; aspect-ratio: var(--wp--custom--featured-image--aspect-ratio, 770 / 595); object-fit: cover; display: block; filter: saturate(0.9); }
.sam-decade-card__decade { position: absolute; top: 0.75rem; left: 0.75rem; font: 800 1.05rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.02em; color: #fff; background: var(--wp--preset--color--navy, #04024d); padding: 0.4rem 0.65rem; }
.sam-decade-card--text .sam-decade-card__decade { position: static; align-self: flex-start; margin: 1rem 0 0 1rem; }
.sam-decade-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem 1.1rem; }
.sam-decade-card__title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.sam-decade-card__date { font: 700 0.6875rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6b76); }

/* Through the Decades — archive search row */
.sam-decades-note { margin: 0.75rem 0 0; font: 400 0.8125rem/1.45 var(--wp--preset--font-family--serif, Georgia, serif); color: var(--wp--preset--color--ink-3, #6b6b76); }
.sam-decades-search { margin-top: 1.25rem; padding: 1.5rem 1.75rem; background: var(--wp--preset--color--base-2, #f7f7f9); border: 1px solid var(--wp--preset--color--rule, #e3e3e8); border-top: 3px solid var(--wp--preset--color--navy, #04024d); }
.sam-decades-search__label { display: block; font: 800 0.9375rem/1.3 var(--wp--preset--font-family--sans, sans-serif); margin-bottom: 0.75rem; }
.sam-decades-search__row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sam-decades-search__row input { flex: 1 1 260px; padding: 0.6rem 0.85rem; font-size: 16px; font-family: var(--wp--preset--font-family--sans, sans-serif); border: 1px solid var(--wp--preset--color--rule, #d0d0d5); border-radius: 2px; background: #fff; }
.sam-decades-search__chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.85rem; }
.sam-decades-chip { cursor: pointer; border: 1px solid var(--wp--preset--color--rule, #d0d0d5); background: #fff; border-radius: 999px; padding: 0.32rem 0.8rem; font: 700 0.8125rem/1 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink-2, #41414a); transition: all 120ms; }
.sam-decades-chip:hover { background: var(--wp--preset--color--navy, #04024d); border-color: var(--wp--preset--color--navy, #04024d); color: #fff; }

/* Quarterly department promo (image/callout — not an ad) */
.sam-dept-promo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; margin: 2rem 0 0; border: 1px solid var(--wp--preset--color--rule, #e3e3e8); border-left: 5px solid var(--wp--preset--color--gold, #c8a856); background: var(--wp--preset--color--navy, #04024d); color: #fff; }
.sam-dept-promo--noimg { grid-template-columns: 1fr; }
.sam-dept-promo__media { display: block; }
.sam-dept-promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 240px; }
.sam-dept-promo__body { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: 2rem 2.25rem; }
.sam-dept-promo__kicker { margin: 0; font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--navy, #04024d); background: var(--wp--preset--color--gold, #c8a856); align-self: flex-start; padding: 0.3rem 0.6rem; }
.sam-dept-promo__title { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem); font-weight: 800; line-height: 1.15; }
.sam-dept-promo__title a { color: #fff; text-decoration: none; }
.sam-dept-promo__text { margin: 0; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.0625rem; line-height: 1.55; color: #d6d2ec; }
.sam-dept-promo__cta { margin: 0.4rem 0 0; }
@media (max-width: 800px) { .sam-dept-promo { grid-template-columns: 1fr; } .sam-dept-promo__media img { min-height: 180px; } }

/* ── Article templates — 2026-07 client round ────────────────────────────── */

/* Breadcrumb bar (always on white — separates a dark header from the nav) */
.sam-article-crumbs { font: 700 0.75rem/1.4 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.02em; color: var(--wp--preset--color--ink-3, #6b6d70); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem; }
.sam-article-crumbs a { color: var(--wp--preset--color--navy, #04024d); text-decoration: none; }
.sam-article-crumbs a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }
.sam-article-crumbs .sep { margin: 0 0.45rem; color: var(--wp--preset--color--ink-3, #9a9aa4); }
.sam-article-crumbs [aria-current] { color: var(--wp--preset--color--ink-2, #41414a); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.sam-crumbs-bar { border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8); }

/* Issue-date eyebrow above the title */
.sam-issue-eyebrow { font: 800 0.6875rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--orange-ink, #b34a15); margin: 0 0 1.1rem; }

/* Header: text block centers on the artwork; hard rule delineates the header
   from the article (the NYer/Wired 50/50 the client pointed to). */
.sam-article-head { border-bottom: 3px solid var(--wp--preset--color--navy, #04024d); }
/* Side gutter lock — some singles (and WP has-global-padding + alignfull children)
   drop the template's inline padding on mobile so title/kicker/hero sit flush.
   Same token as the mid-desktop flexing gutter; !important beats missing inline. */
.sam-article-head,
.sam-article-head.sam-news-head {
  padding-left: var(--sam-gutter) !important;
  padding-right: var(--sam-gutter) !important;
  box-sizing: border-box;
}
.sam-article-head-cols { align-items: center; min-width: 0; }
.sam-article-head-text,
.sam-article-head-media { min-width: 0; max-width: 100%; }
.sam-article-head-media figure { margin: 0; }
.sam-byline-row { border-top: 1px solid var(--wp--preset--color--rule, #e3e3e8); padding-top: 1rem; }
.sam-byline-row p { margin: 0; }

/* Dark header for special reports (post sidebar → "Article header" box).
   The breadcrumb bar stays white above it. */
.sam-dark-head .sam-article-head { background: var(--wp--preset--color--navy, #04024d); border-bottom-color: var(--wp--preset--color--gold, #c8a856); }
.sam-dark-head .sam-article-head :is(h1, h1 a) { color: #fff; }
.sam-dark-head .sam-article-head .wp-block-post-excerpt__excerpt, .sam-dark-head .sam-article-head .sam-byline-by { color: #c9cbe0; }
.sam-dark-head .sam-article-head .wp-block-post-author-name a { color: var(--wp--preset--color--yellow, #fff200); }
.sam-dark-head .sam-article-head .sam-issue-eyebrow { color: var(--wp--preset--color--gold, #c8a856); }
.sam-dark-head .sam-article-head .sam-byline-row { border-top-color: rgba(255, 255, 255, 0.22); }

/* Article toolbar — playback + Share/Save above the body; listen extras dock below. */
.sam-article-toolbar {
	--sam-action-height: 2.5rem;
	max-width: 680px;
	margin-inline: auto;
	margin-bottom: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--rule, #e3e3e8);
	border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8);
}
.sam-article-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 0;
}
.sam-article-actions__playback { min-width: 0; }
.sam-article-actions__playback:empty { display: none; }
.sam-article-actions__share,
.sam-article-actions__save { flex: 0 0 auto; }
.sam-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 1px solid var(--wp--preset--color--rule, #d0d0d5);
	background: #fff;
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	min-height: var(--sam-action-height);
	box-sizing: border-box;
	font: 700 0.8125rem/1 var(--wp--preset--font-family--sans, sans-serif);
	color: var(--wp--preset--color--navy, #04024d);
	cursor: pointer;
	white-space: nowrap;
	transition: background 140ms, color 140ms, border-color 140ms;
}
.sam-share-btn:hover, .sam-share-btn:focus-visible { background: var(--wp--preset--color--navy, #04024d); border-color: var(--wp--preset--color--navy, #04024d); color: #fff; }
.sam-share-btn.is-copied { background: var(--wp--preset--color--cyan-ink, #0a6c8f); border-color: var(--wp--preset--color--cyan-ink, #0a6c8f); color: #fff; }
.sam-article-toolbar .sam-listen-dock { padding-bottom: 0.35rem; }

/* Mid-article slot sits inside the 680px text measure. Leaderboard is an
   in-column 728×90 (unsold default); parallax keeps alignfull for takeover. */
.sam-article-midad { margin: 2.25rem 0; }
.sam-article-midad--leaderboard {
  padding: 1.25rem 0;
  border-top: 1px solid var(--wp--preset--color--rule, #e3e3e8);
  border-bottom: 1px solid var(--wp--preset--color--rule, #e3e3e8);
}

@media (max-width: 781px) {
  .sam-article-head { border-bottom-width: 2px; }
  .sam-article-head-cols { display: flex; flex-direction: column-reverse; gap: 1.25rem; } /* image first on mobile */
  .sam-article-crumbs [aria-current] { max-width: 24ch; }
  /* Keep title / kicker / dek / hero image off the viewport edge on stacked
     singles. Parent already carries --sam-gutter; this stops WP column/alignfull
     negative margins from pulling children through it. */
  .sam-article-head .alignfull,
  .sam-article-head .wp-block-post-featured-image,
  .sam-article-head .wp-block-post-featured-image img,
  .sam-article-head .wp-block-columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
  }
}
.sam-article-byline { margin: 0; font: 400 0.9375rem/1.4 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink-2, #41414a); }
.sam-article-byline strong, .sam-article-byline a { font-weight: 700; color: var(--wp--preset--color--navy, #04024d); text-decoration: none; }
.sam-article-byline a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }
/* In the issue-grid story card the byline follows the dek directly; the shared
   `margin:0` above (needed flush in the single-article header) collapses the
   card's block-gap to 0, so the dek and author touch. Re-open a wee bit of air,
   scoped to the card so the article header stays flush. */
.sam-story-card .sam-article-byline { margin-top: 0.4rem; }
.sam-dark-head .sam-article-head .sam-article-byline { color: #c9cbe0; }
.sam-dark-head .sam-article-head .sam-article-byline :is(strong, a) { color: var(--wp--preset--color--yellow, #fff200); }

/* Article chrome sits flush: kill the root block-gap margins between the nav,
   the top-ad band, the crumbs bar, and the article header (client 2026-07:
   "no padding above the ad; breadcrumbs has too much top padding"). */
.wp-site-blocks > .sam-top-ad,
.wp-site-blocks > .sam-crumbs-bar,
.wp-site-blocks > .sam-article-head { margin-block-start: 0; }
.sam-crumbs-bar { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; background: var(--wp--preset--color--base-2, #f7f7f9); }

/* Action bar layout: Share LEFT, Listen + Save RIGHT; share popover menu */
.sam-article-actions { justify-content: flex-start; }
.sam-article-actions__share { order: 1; }
.sam-article-actions__playback { order: 2; margin-left: auto; }
.sam-article-actions__save { order: 3; }
.sam-share { position: relative; }
.sam-share-menu { position: absolute; z-index: 30; top: calc(100% + 0.4rem); left: 0; min-width: 170px; background: #fff; border: 1px solid var(--wp--preset--color--rule, #d0d0d5); border-radius: 8px; box-shadow: 0 16px 40px -16px rgba(4, 2, 77, 0.35); padding: 0.35rem; display: flex; flex-direction: column; }
.sam-share-menu__item { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0.5rem 0.7rem; border-radius: 5px; font: 700 0.8125rem/1.2 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink, #1d1d24); }
.sam-share-menu__item:hover, .sam-share-menu__item:focus-visible { background: var(--wp--preset--color--base-2, #f0f0f4); color: var(--wp--preset--color--navy, #04024d); }
.sam-share-menu__item { display: flex; align-items: center; gap: 0.6rem; }
.sam-share-menu__item svg { flex: 0 0 auto; color: var(--wp--preset--color--navy, #04024d); }
.sam-share-menu__item:hover svg { color: var(--wp--preset--color--orange-ink, #b34a15); }

/* Desktop: single tidy row — equal-height listen/save controls. */
.sam-article-actions .sam-listen { flex-wrap: nowrap; align-items: stretch; }
.sam-article-actions .sam-listen-toggle,
.sam-article-actions .sam-listen-skip,
.sam-article-actions .sam-save-button {
	min-height: var(--sam-action-height);
	box-sizing: border-box;
	white-space: nowrap;
}

/* Mobile: stack playback, then Share + Save — never cram into one row. */
@media (max-width: 781px) {
	.sam-article-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"playback playback"
			"share save";
		gap: 0.5rem;
		align-items: stretch;
	}
	.sam-article-actions--no-listen {
		grid-template-areas: "share save";
	}
	.sam-article-actions__playback { grid-area: playback; order: unset; margin-left: 0; }
	.sam-article-actions__share { grid-area: share; order: unset; display: flex; min-width: 0; }
	.sam-article-actions__save { grid-area: save; order: unset; display: flex; min-width: 0; }
	.sam-article-actions__playback .sam-listen {
		display: flex;
		width: 100%;
		min-height: var(--sam-action-height);
		gap: 0.35rem;
		align-items: stretch;
	}
	.sam-article-actions__playback .sam-listen-toggle {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
	}
	.sam-article-actions__share .sam-share { display: flex; width: 100%; min-width: 0; }
	.sam-article-actions__share .sam-share-btn {
		flex: 1 1 auto;
		width: 100%;
		border-radius: 2px;
		font-size: 0.6875rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.sam-article-actions__save .sam-save-button {
		width: 100%;
		justify-content: center;
	}
}
@media (max-width: 359px) {
	.sam-article-actions__share .sam-share-btn,
	.sam-article-actions__save .sam-save-button {
		position: relative;
	}
	.sam-article-actions__share .sam-share-btn__label,
	.sam-article-actions__save .sam-save-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Author bio block (self-hiding — renders only with a real bio) */
.sam-author-bio { display: flex; gap: 1.75rem; align-items: flex-start; margin-top: 3rem; padding: 2rem; background: var(--wp--preset--color--base-2, #f7f7f9); border-top: 3px solid var(--wp--preset--color--navy, #04024d); }
.sam-author-bio__img { border-radius: 50%; display: block; }
.sam-bio-label { margin: 0 0 0.35rem; font: 800 0.625rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ink-2, #41414a); }
.sam-author-bio__name { margin: 0 0 0.4rem; font: 800 1.375rem/1.1 var(--wp--preset--font-family--sans, sans-serif); }
.sam-author-bio__name a { color: var(--wp--preset--color--navy, #04024d); text-decoration: none; }
.sam-author-bio__name a:hover { color: var(--wp--preset--color--orange-ink, #b34a15); }
.sam-author-bio__text { margin: 0; font: 400 1.0625rem/1.55 var(--wp--preset--font-family--serif, serif); color: var(--wp--preset--color--ink-2, #41414a); }

/* ── 2026-07-10 client round ─────────────────────────────────────────────── */

/* Dek: commanding, not a whisper — upright serif, medium weight, near-ink */
.sam-article-dek { margin: 0 0 1.5rem; font-family: var(--wp--preset--font-family--serif, serif); font-style: normal; font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.5; color: var(--wp--preset--color--ink, #1d1d24); }
.sam-dark-head .sam-article-head .sam-article-dek { color: #e6e7f2; }
.sam-news-grid .sam-article-dek { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 400; }

/* No thin rule under the dek */
.sam-byline-row--bare { border-top: 0 !important; padding-top: 0.25rem !important; }

/* Header featured image: 770×595 (Joomla-era crop). Same-ratio art
   (770×595 / 440×340) fills the box; other sources cover without a new ratio. */
.sam-article-head-media img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--featured-image--aspect-ratio, 770 / 595);
  object-fit: cover;
}

/* Feature · Hero Lead template (single-feature-hero.html). The lead photo and
   headline plate are alignfull inside a padded <main>; WP has-global-padding
   then pulls them to the viewport. Split:
     • 21/9 lead: neutralize only on stacked mobile (≤781) so the photo sits
       in main's gutter; above 781 the designed full-bleed lead stays.
     • Plate (kicker/title/dek): pad through tablet + Liv's minimized laptop
       (782–1400). Alignwide inside a pulled-out parent fills the viewport
       from 782–880 and can still meet the edge through ~1400. */
@media (max-width: 1400px) and (min-width: 782px) {
  .sam-feature-hero-plate {
    box-sizing: border-box;
    max-width: 100%;
    padding-left: var(--sam-gutter) !important;
    padding-right: var(--sam-gutter) !important;
  }
}
@media (max-width: 781px) {
  .sam-feature-hero.alignfull {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .sam-feature-hero .alignfull,
  .sam-feature-hero .wp-block-post-featured-image,
  .sam-feature-hero .wp-block-post-featured-image img,
  .sam-feature-hero .wp-block-cover,
  .sam-feature-hero .wp-block-cover__image-background {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sam-feature-hero-plate {
    box-sizing: border-box;
    max-width: 100%;
  }
}

/* Tags/kickers are sans-serif EVERYWHERE (client 2026-07) */
.sam-kicker, .sam-kicker a,
.sam-readnext__kicker,
.sam-related__kicker,
.sam-issue-eyebrow,
.wp-block-post-terms.sam-kicker, .wp-block-post-terms.sam-kicker a {
  font-family: var(--wp--preset--font-family--sans, sans-serif) !important;
}

/* Subscribe card in the headlines rail: tighter, centered (Safari slack) */
.sam-newsrail { padding: 1rem 1.15rem; justify-content: center; gap: 0.5rem; }

/* Most Popular: bigger thumbs + titles */
.sam-popular .sam-popular-row .wp-block-post-title { font-size: 1.0625rem !important; line-height: 1.3 !important; }
.sam-popular .sam-popular-row .wp-block-column:first-child { flex-basis: 72px !important; }

/* Mobile hierarchy: section headers must outrank card titles */
@media (max-width: 640px) {
  .sam-section-label h2 { font-size: 1.75rem !important; }
  .sam-headlines .wp-block-post-title, .sam-popular .wp-block-post-title { font-size: 1rem !important; }
}

/* Industry Calendar — region filter chips (mobile: horizontal scroll) */
.sam-cal-regions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; }
.sam-cal-region { display: inline-block; text-decoration: none; border: 1px solid var(--wp--preset--color--rule, #d0d0d5); background: #fff; border-radius: 999px; padding: 0.4rem 0.9rem; font: 700 0.8125rem/1 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink-2, #41414a); transition: background 140ms, color 140ms, border-color 140ms; }
.sam-cal-region:hover { border-color: var(--wp--preset--color--navy, #04024d); color: var(--wp--preset--color--navy, #04024d); }
.sam-cal-region.is-active { background: var(--wp--preset--color--navy, #04024d); border-color: var(--wp--preset--color--navy, #04024d); color: #fff; }
@media (max-width: 640px) {
  .sam-cal-regions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; margin-inline: calc(-1 * var(--sam-gutter)); padding-inline: var(--sam-gutter); }
  .sam-cal-regions::-webkit-scrollbar { display: none; }
  .sam-cal-region { flex: 0 0 auto; }
}
/* Hide EventKoi's technical timezone toggle row ("UTC, AM/PM") */
.sam-event-calendar .text-foreground.py-4 { display: none !important; }

/* EventKoi portals `[data-event-popover]` into `.fc`. Overflow on the month
   grid clipped it (hover/click produced no visible popover). Keep the calendar
   box visible so the popover can paint; don't touch timeGrid scrollers. */
.sam-event-calendar .fc,
.sam-event-calendar .fc-daygrid,
.sam-event-calendar .fc-daygrid-body,
.sam-event-calendar .fc-scrollgrid,
.sam-event-calendar .fc-scrollgrid-sync-table {
  overflow: visible;
}
.sam-event-calendar [data-event-popover] { z-index: 130; }

/* EventKoi Tailwind: .font-normal { font-weight: 400 !important } */
.sam-event-calendar [id^="eventkoi-calendar-"] :is(
  [aria-label="Select month and year"],
  [aria-label="Open week picker"],
  [aria-label="Close week picker"],
  [aria-label="Jump to today"],
  [aria-label="Month view"],
  [aria-label="Week view"],
  [aria-label="Go to previous period"],
  [aria-label="Go to next period"]
) {
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-weight: 600 !important;
}
.sam-event-calendar .fc :is(
  .fc-col-header-cell-cushion,
  .fc-daygrid-day-number,
  .fc-event-title,
  .fc-event-time,
  .fc-daygrid-more-link,
  .fc-list-day-cushion,
  .fc-list-event-title,
  .fc-list-event-time,
  .fc-timegrid-slot-label-cushion,
  .fc-timegrid-axis-cushion
) {
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-weight: 600;
}

/* EventKoi Radix portals WeekPopover / CalendarHeaderPopover to document.body */
#eventkoi-week-picker,
#eventkoi-week-picker * {
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-weight: 600 !important;
}
[aria-label="Month and year selection"],
[aria-label="Month and year selection"] * {
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-weight: 600 !important;
}

/* Event-type color legend (client #52) — matches the homepage type colors;
   events are recolored by event_type at REST output (class-eventkoi-type-colors.php). */
.sam-cal-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0 0 1.25rem; }
.sam-cal-legend__item { display: inline-flex; align-items: center; gap: 0.45rem; font: 700 0.75rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--ink-2, #41414a); }
.sam-cal-legend__dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: 0 0 auto; }

/* Calendar-wide search (reader report 2026-07-19) ────────────────────
   EventKoi's own search box only filters the events already loaded for the
   month on screen, so "Summer Ops" in July misses Summer Ops Camp in
   September. We render our own field (saminfo_event_search_field) and hide
   theirs, so there aren't two boxes with different scopes.

   ⚠ The vendor markup is Tailwind utilities only — no semantic class to hook,
   so this targets the input by TYPE and hides its wrapper via :has(). If a
   plugin update ever adds a second search input inside the calendar, this
   selector is where it will go wrong. */
.sam-event-calendar div:has(> input[type="search"]) { display: none !important; }

/* Full-bleed within the calendar column — the search reads as part of the
   calendar, so it matches the calendar's width rather than sitting short. */
.sam-evtsearch { position: relative; margin: 0 0 1.25rem; width: 100%; }
.sam-evtsearch-form { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--wp--preset--color--rule, #d0d0d5); border-radius: 999px; background: #fff; padding: 0.15rem 0.4rem 0.15rem 1rem; transition: border-color 140ms, box-shadow 140ms; }
.sam-evtsearch-form:focus-within { border-color: var(--wp--preset--color--navy, #04024d); box-shadow: 0 0 0 3px rgb(0 174 239 / 0.18); }
/* The pill IS the container. The input must contribute no chrome of its own or
   you get a box inside a box.
   ⚠ THREE classes deliberately. Ollie's base rule is
   `input:not([type="submit"]):not([type="radio"])`, and :not() carries the
   specificity of its argument — that scores (0,2,1), so a two-class selector
   loses to it and the inner rounded box survives. Do not "simplify" this. */
.sam-evtsearch .sam-evtsearch-form .sam-evtsearch-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding: 0.6rem 0;
	font: 500 0.9375rem/1.2 var(--wp--preset--font-family--sans, sans-serif);
	color: var(--wp--preset--color--navy, #04024d);
}
.sam-evtsearch .sam-evtsearch-form .sam-evtsearch-input:focus,
.sam-evtsearch .sam-evtsearch-form .sam-evtsearch-input:focus-visible { outline: none; box-shadow: none; background: transparent; }
.sam-evtsearch-input::-webkit-search-cancel-button { cursor: pointer; }
/* Real submit button — it's the no-JS path (JS preventDefaults it, since with
   JS the results are already on screen). Needs the border/appearance reset. */
.sam-evtsearch-hint { flex: 0 0 auto; border: 0; cursor: pointer; appearance: none; padding: 0.5rem 1rem; border-radius: 999px; background: var(--wp--preset--color--navy, #04024d); color: #fff; font: 700 0.75rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.04em; text-transform: uppercase; }
.sam-evtsearch-hint:hover { background: var(--wp--preset--color--orange, #f37021); }

.sam-evtsearch-results { position: absolute; z-index: 20; top: calc(100% + 0.5rem); left: 0; right: 0; max-height: 26rem; overflow-y: auto; background: #fff; border: 1px solid var(--wp--preset--color--rule, #d0d0d5); border-radius: 0.75rem; box-shadow: 0 18px 40px rgb(4 2 77 / 0.14); }
.sam-evtsearch-list { list-style: none; margin: 0; padding: 0.4rem; }
.sam-evtsearch-msg { margin: 0; padding: 1rem 1.1rem; font: 500 0.875rem/1.4 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink-2, #41414a); }
.sam-evtsearch-sep { padding: 0.75rem 0.85rem 0.35rem; font: 700 0.6875rem/1 var(--wp--preset--font-family--sans, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3, #6b6b76); }
.sam-evtsearch-item { margin: 0; }
.sam-evtsearch-link { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.65rem 0.85rem; border-radius: 0.5rem; text-decoration: none; }
.sam-evtsearch-link:hover, .sam-evtsearch-link:focus-visible { background: var(--wp--preset--color--base-2, #f4f4f7); }
.sam-evtsearch-title { font: 700 0.9375rem/1.25 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--navy, #04024d); }
.sam-evtsearch-meta { font: 500 0.8125rem/1.3 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink-2, #41414a); }
.sam-evtsearch-item.is-past .sam-evtsearch-title { color: var(--wp--preset--color--ink-2, #41414a); }

/* ══════════════════════════════════════════════════════════════════
   OLLIE MEGA MENU BRIDGE (client 2026-07-17)
   The primary nav now uses Ollie's mega-menu block; each panel is an
   editable menu template part (parts/mega-*.html) so SAM can edit the
   nav + panels in the Site Editor. Ollie owns open/close + container
   positioning/width (its own JS + the [aria-expanded=true] ~ container
   rule). This layer only (a) dresses Ollie's container as the SAM white
   full-width panel and (b) neutralises the RETIRED .sam-mega absolute-
   hidden positioning so the ported panel content shows statically inside
   Ollie's container. The old .sam-mnav-* / .sam-mega-stage rules are now
   dead markup and inert. Visual fine-tuning is expected after staging QA.
   ────────────────────────────────────────────────────────────────── */

/* Ollie's dropdown container → the SAM panel frame. Ollie's JS sets its
   position/size (menu-width-full); we supply the surface + chrome. */
.sam-primary-nav .wp-block-ollie-mega-menu__menu-container {
  background: #fff;
  border: 1px solid var(--wp--preset--color--rule);
  border-top: 0;
  box-shadow: 0 28px 64px -32px rgba(3, 0, 77, 0.55);
  padding: 0;
}
.sam-primary-nav .wp-block-ollie-mega-menu__menu-container.menu-width-full {
  max-width: none;
  padding-left: var(--sam-gutter);
  padding-right: var(--sam-gutter);
  box-sizing: border-box;
}

/* Ollie's JS writes `top: 40px` INLINE on the panel, a fixed offset that ignores
   how tall the nav item actually is. With the toggle now 94px the panel opened
   30px above the bar's bottom edge and covered the navy — which is why the bar
   looked shorter with a menu open (client 2026-07-20). `top:100%` anchors it to
   the item's real height instead. !important is the only way to beat an inline
   style; the offsetting risk is nil because the nav is `overlayMenu:"never"`, so
   the .is-menu-open branch that also positions this container never runs. */
.sam-primary-nav .wp-block-ollie-mega-menu__menu-container { top: 100% !important; }

/* Ollie nests each mega panel INSIDE its nav <li>, so the panel inherits the
   navigation block's typography — and parts/header.html sets
   textTransform:uppercase as a block support on that nav. The result was
   article headlines inside the panels rendering in ALL CAPS. Reset at the
   panel root: nav labels (the toggles) sit outside this container and keep
   their uppercase, while eyebrows that genuinely want caps (.sam-term,
   .sam-mega-all) declare text-transform themselves and are unaffected. */
.sam-primary-nav .wp-block-ollie-mega-menu__menu-container { text-transform: none; }

/* Ported panels: .sam-mega was absolute + opacity:0 to stack under the old
   custom stage. Inside Ollie's container it must be static, and it must FOLLOW
   the container's reveal rather than force its own.

   `visibility: visible` here was a site-wide click-blocker. Ollie's container
   is opacity:0 + visibility:hidden while closed, but visibility is inherited
   and a descendant can revert it — so forcing `visible` on .sam-mega un-hid the
   subtree for hit-testing. Only the container's opacity:0 still made it *look*
   closed, and opacity does nothing to pointer events. The result was an
   invisible 770x422 panel at z-index:100 parked below the masthead, swallowing
   every click that landed in it (Headline News arrows, in-page links).
   Reproduced 2026-07-20: Playwright click on .sam-hl-next timed out on a fresh
   load with no hover, elementFromPoint returning .sam-mega-col.

   `inherit` makes both properties track the container: hidden (and therefore
   not hit-tested) when closed, interactive when open. Do not restore the
   literal values — .sam-mega's own base rule sets visibility:hidden, so this
   override has to exist, it just has to inherit instead of assert. */
.wp-block-ollie-mega-menu__menu-container .sam-mega {
  position: static;
  opacity: 1;
  visibility: inherit;
  pointer-events: inherit;
  transition: none;
}

/* Ollie's close (×) button, tucked into the panel's top-right. */
.sam-primary-nav .menu-container__close-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: 0;
  padding: 0.35rem;
  line-height: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 140ms ease;
}
.sam-primary-nav .menu-container__close-button:hover { opacity: 1; }

/* Toggle cadence matches the retired .sam-mnav-link.
   Menu Designer (Ollie 2.8 / plugin update) split the old single
   `__toggle.wp-block-navigation-item__content` control into a label <a>
   (`.wp-block-ollie-mega-menu__link`) plus a sibling caret <button>
   (`.wp-block-ollie-mega-menu__toggle`). Hover fill on `__content` therefore
   missed the caret, and padding on `__toggle` no longer sized the bar. Paint
   the top-level <li>, stretch label + caret to the bar height, and rotate the
   caret in a square box so open/closed share one x-center. */
.sam-primary-nav .wp-block-navigation.sam-mega-nav,
.sam-primary-nav .wp-block-navigation.sam-mega-nav .wp-block-navigation__container {
  align-items: stretch;
}
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu {
  align-items: stretch;
  align-self: stretch;
  margin: 0;
}
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu:hover,
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu:focus-within,
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu:has(> .wp-block-ollie-mega-menu__toggle[aria-expanded="true"]) {
  background-color: var(--wp--preset--color--orange);
  color: #fff;
}
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu:hover > .wp-block-navigation-item__content,
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu:focus-within > .wp-block-navigation-item__content,
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu:has(> .wp-block-ollie-mega-menu__toggle[aria-expanded="true"]) > .wp-block-navigation-item__content {
  background: transparent;
  color: #fff;
}
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu.current-menu-item,
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu.current-menu-ancestor,
.sam-primary-nav .wp-block-navigation .wp-block-navigation__container > .wp-block-ollie-mega-menu:has(> .wp-block-navigation-item__content[aria-current]) {
  box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--yellow);
}
.sam-primary-nav .wp-block-ollie-mega-menu > .wp-block-ollie-mega-menu__link.wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  padding: 1.5rem 0.45rem 1.5rem 1.15rem;
  color: #fff;
  font: 700 0.875rem/1 var(--wp--preset--font-family--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sam-primary-nav .wp-block-ollie-mega-menu > .wp-block-ollie-mega-menu__toggle.wp-block-ollie-mega-menu__submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  margin: 0;
  padding: 0 1.15rem 0 0.15rem;
  height: auto;
  min-height: 100%;
  color: #fff;
  background: transparent;
  border: 0;
}
.sam-primary-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.sam-primary-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon svg {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  transform-origin: 50% 50%;
  transition: transform 0.125s linear;
}
.sam-primary-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] .wp-block-ollie-mega-menu__toggle-icon svg {
  transform: rotate(180deg);
}

/* ── Issue archive ad rail (taxonomy-issue.html) ──────────────────────────
   The sidebar column that carries the edition's ads. Sticks alongside the
   article grid on desktop; the core columns block stacks it below on mobile,
   where sticky is a no-op. Kept in the theme (presentation), fed by the
   revenue console (sidebar-300x600 / sidebar-300x250 positions). */
.sam-issue-rail {
  position: sticky;
  top: 1.5rem;
}
.sam-issue-rail .sam-rail-label {
  margin: 0 0 0.5rem;
  text-align: left;
  font-family: var(--wp--preset--font-family--sans), "Overpass", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
}
/* On stacked (mobile) columns, don't pin — let it flow with the content. */
@media (max-width: 781px) {
  .sam-issue-rail { position: static; }
}

/* ── Article card grid — dept Features & Analysis + magazine archive ───────
   Shared 3-up grid (2-up ≤900px, 1-up ≤640px) and card chrome so query-loop
   archive cards match saminfo/dept-feed grid cards pixel-for-pixel. */
.sam-article-card-grid,
.sam-dept-feed-grid,
.sam-archive-grid.is-layout-grid {
  gap: 2rem;
}
.sam-article-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}
/* Constrained group layout adds has-global-padding — strip it on cards. */
.sam-article-card.has-global-padding {
  padding: 0;
}
.sam-article-card__media,
.sam-article-card .wp-block-post-featured-image {
  margin: 0;
}
.sam-article-card__media img,
.sam-article-card__img,
.sam-article-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: var(--wp--custom--featured-image--aspect-ratio, 770 / 595);
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.sam-article-card__title,
.sam-article-card .wp-block-post-title {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--reading, 1.1875rem) !important;
  line-height: 1.2;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sam-article-card__title a,
.sam-article-card .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.sam-article-card .sam-article-dek {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--wp--preset--color--ink-2, #41414a);
}
.sam-article-card-meta {
  margin: 0;
  font: 400 0.8125rem/1.4 var(--wp--preset--font-family--sans, "Overpass", sans-serif);
  color: var(--wp--preset--color--ink-2, #41414a);
}
@media (max-width: 900px) {
  .sam-article-card-grid,
  .sam-dept-feed-grid,
  .sam-archive-grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .sam-article-card-grid,
  .sam-dept-feed-grid,
  .sam-archive-grid.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* Branded placeholder for archive posts that have no cover image yet — keeps
  the cover wall gap-free. :has() targets only cards missing the featured
  image element (the block renders nothing when there's no thumbnail). The
  low-res/missing-image report (admin tool) surfaces these to get real covers. */
.sam-article-card:not(:has(.wp-block-post-featured-image)):not(:has(.sam-article-card__media))::before {
  content: "SAM";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--wp--custom--featured-image--aspect-ratio, 770 / 595);
  border-radius: 2px;
  background: linear-gradient(135deg, var(--wp--preset--color--navy, #04024d), #1b2a4a);
  color: rgba(255, 255, 255, 0.22);
  font: 800 1.5rem/1 "Overpass", sans-serif;
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------------ *
 * WidgetKit → blocks: linked-image grid (Joomla gallery migration).
 * Core grid layout supplies the responsive columns (minimumColumnWidth);
 * these rules add brand polish only. Used by the SAMMY Hall of Fame grid
 * and, going forward, every migrated grid/gallery widget.
 * ------------------------------------------------------------------ */
.sam-wk-grid {
  align-items: start;
}

.sam-wk-card {
  margin: 0;
  text-align: center;
}

.sam-wk-card img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--wp--preset--color--rule, rgba(4, 2, 77, 0.12));
  box-shadow: 0 1px 2px rgba(4, 2, 77, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sam-wk-card a {
  display: block;
}

.sam-wk-card a:hover img,
.sam-wk-card a:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(4, 2, 77, 0.16);
}

.sam-wk-card a:focus-visible img {
  outline: 2px solid var(--wp--preset--color--orange, #f37021);
  outline-offset: 2px;
}

.sam-wk-card figcaption {
  margin-top: 0.55rem;
  font: 800 0.875rem/1 "Overpass", sans-serif;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--navy, #04024d);
}

/* Drop the theme-global caption accent dash for these centered year labels. */
.sam-wk-card figcaption::before {
  display: none;
}

/* WidgetKit → core/gallery (slideshow-panel / slideset): tidy caption. */
.sam-wk-gallery figcaption {
  font: 400 0.8125rem/1.4 "Spectral", Georgia, serif;
  font-style: italic;
  color: var(--wp--preset--color--ink-2, #414042);
}

/* WidgetKit → core/buttons (list): comfortable stacked CTAs. */
.sam-wk-list {
  gap: 0.75rem;
}

/* ── 404 (templates/404.html) ─────────────────────────────────────────────
   Navigation-recovery surface. Left-aligned lede + a tidy routes column list
   so a visitor who hit a renamed/moved Joomla URL lands on real destinations. */
.sam-404__lede { margin-left: 0; margin-right: 0; }
.sam-404__title { color: var(--wp--preset--color--navy); }
.sam-404__routes { gap: 0.75rem; }
.sam-404__routes .wp-block-column { display: flex; flex-direction: column; gap: 0.55rem; }
.sam-404__route { margin: 0; }
.sam-404__route a {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sam-404__route a:hover,
.sam-404__route a:focus-visible {
  color: var(--wp--preset--color--orange);
  border-bottom-color: var(--wp--preset--color--orange);
}
@media (max-width: 600px) {
  .sam-404__routes { display: flex; flex-direction: column; }
}