/* =============================================================================
   WSC — Editorial layer
   -----------------------------------------------------------------------------
   The approved final public-site design, as one layer over the existing pages.

     DESKTOP (>= 861px) = Concept 2. Asymmetric editorial composition, indexed
                          section dividers, amber eyebrows, left-ruled cards,
                          wide measure, content density preserved.
     MOBILE  (<= 860px) = Concept 1. Warm colour fields, editorial rhythm and
                          pacing, broken tile grid, progressive disclosure.
                          The homepage additionally carries Concept 2's
                          clickable tiles.

   Why a layer and not seven rewrites: every public page keeps one copy of its
   content in one place in the DOM. That is what lets the Command Center bind
   to it, and it is why the mobile tile index is composed at runtime from the
   same markup the desktop renders rather than duplicated underneath it.

   Scoped to body.wsc-editorial so it wins over each page's inline <style>
   regardless of which loads first.
   ========================================================================== */

/* Cormorant Garamond and DM Sans are linked from each page head rather than
   @imported here, so the editorial faces are requested in parallel with this
   file instead of after it. Before this release only boarding-pass.html
   loaded them, and every other public page silently fell back to Georgia and
   the system sans — the approved typography was never actually shipping. */

/* -----------------------------------------------------------------------------
   0. Shared
   -------------------------------------------------------------------------- */
.wsc-editorial {
  --wsc-rule: rgba(31, 41, 38, 0.12);
  --wsc-rule-dark: rgba(247, 243, 236, 0.15);
  --wsc-body: rgba(31, 41, 38, 0.76);
  --wsc-body-dark: rgba(247, 243, 236, 0.80);
  -webkit-font-smoothing: antialiased;
}

.wsc-editorial :focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Screen-reader-only utility, used by the tile index for honest labelling. */
.wsc-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wsc-editorial *,
  .wsc-editorial *::before,
  .wsc-editorial *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   1. DESKTOP — Concept 2 "The Index"
   ========================================================================== */
@media (min-width: 861px) {

  /* ---- Measure and rhythm ---------------------------------------------- */
  .wsc-editorial .wrap { max-width: 1240px; padding: 0 48px; }
  .wsc-editorial section { padding: 76px 0; }

  /* Concept 2 is asymmetric and left-set, not centred. */
  .wsc-editorial section .section-eyebrow,
  .wsc-editorial section .section-head h2,
  .wsc-editorial section .section-sub {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .wsc-editorial .section-eyebrow {
    color: var(--amber);
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 14px;
  }
  .wsc-editorial .section-head h2 {
    font-size: 40px;
    line-height: 1.14;
    max-width: 18em;
    letter-spacing: -0.01em;
  }
  .wsc-editorial .section-head h2 em { color: var(--terracotta); font-style: italic; }
  .wsc-editorial .section-sub {
    max-width: 44em;
    font-size: 16.5px;
    color: var(--wsc-body);
    margin-top: 14px;
  }

  /* An indexed rule under each section head — Concept 2's spine. */
  .wsc-editorial section > .wrap > .section-head {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--wsc-rule);
  }
  .wsc-editorial section[data-index] > .wrap > .section-head::after {
    content: attr(data-index);
    position: absolute;
    right: 0; bottom: 20px;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--amber);
    letter-spacing: 1px;
  }

  /* Dark sections invert the rule and the heading. */
  .wsc-editorial section[style*="forest-deep"] > .wrap > .section-head,
  .wsc-editorial section.data-section > .wrap > .section-head,
  .wsc-editorial section.before-start > .wrap > .section-head,
  .wsc-editorial section.of-the-day > .wrap > .section-head,
  .wsc-editorial section.connect > .wrap > .section-head {
    border-bottom-color: var(--wsc-rule-dark);
  }

  /* A standing watermark numeral on page heroes. */
  .wsc-editorial .page-hero,
  .wsc-editorial .hero,
  .wsc-editorial .lisbon-hero {
    text-align: left;
    position: relative;
    overflow: hidden;
    padding: 96px 0 72px;
  }
  .wsc-editorial .page-hero > .wrap,
  .wsc-editorial .hero > .wrap { position: relative; z-index: 2; }
  .wsc-editorial .page-hero .section-eyebrow,
  .wsc-editorial .page-hero h1,
  .wsc-editorial .page-hero p.sub {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .wsc-editorial .page-hero h1 {
    font-size: 54px;
    line-height: 1.08;
    max-width: 20em;
    letter-spacing: -0.015em;
  }
  .wsc-editorial .page-hero p.sub { max-width: 40em; font-size: 17px; }
  .wsc-editorial .page-hero::after,
  .wsc-editorial .hero::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--amber);
  }
  .wsc-editorial .page-hero[data-watermark]::before {
    content: attr(data-watermark);
    position: absolute;
    right: 48px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: 220px;
    font-weight: 700;
    line-height: 1;
    color: rgba(247, 243, 236, 0.045);
    pointer-events: none;
    z-index: 1;
  }
  .wsc-editorial .jump-row { justify-content: flex-start; }

  /* ---- One content column -----------------------------------------------
     Concept 2 is asymmetric: the heading, the rule and everything under it
     share one left edge. The pages were built with every block centred on
     its own max-width, which read as a column of misaligned islands once the
     headings moved left. Prose keeps a reading measure; grids take the full
     content width. */
  .wsc-editorial section .prose,
  .wsc-editorial section .sources {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .wsc-editorial section .service-grid,
  .wsc-editorial section .before-grid,
  .wsc-editorial section .env-grid,
  .wsc-editorial section .trip-grid,
  .wsc-editorial section .data-grid,
  .wsc-editorial section .work-grid,
  .wsc-editorial section .stat-strip,
  .wsc-editorial section .teams-block {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .wsc-editorial section .service-note,
  .wsc-editorial section .numbers-note,
  .wsc-editorial section .budget-note {
    max-width: 44em;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  /* Pull quotes stay a deliberate moment, set against the left edge with a
     rule rather than floated into the middle of the measure. */
  .wsc-editorial section .pull-quote {
    text-align: left;
    max-width: 24em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 24px;
    border-left: 3px solid var(--amber);
  }

  /* ---- Left-ruled card system ------------------------------------------ */
  .wsc-editorial .before-card,
  .wsc-editorial .service-card,
  .wsc-editorial .env-card,
  .wsc-editorial .trip-card,
  .wsc-editorial .contact-aside,
  .wsc-editorial .work-card {
    border-left: 4px solid var(--forest);
    border-radius: 6px;
  }
  .wsc-editorial .service-card.wsc-featured,
  .wsc-editorial .before-card.wsc-featured {
    border-left-color: var(--amber);
    background: rgba(201, 138, 62, 0.05);
  }
  .wsc-editorial .service-card h3,
  .wsc-editorial .before-card h4 { letter-spacing: -0.005em; }

  /* ---- Founder / about: square portrait, correct measure --------------- */
  .wsc-editorial .about-grid { grid-template-columns: 300px 1fr; gap: 56px; max-width: 1100px; }
  .wsc-editorial .about-photo { aspect-ratio: 1 / 1; border-radius: 6px; }
  .wsc-editorial .about-photo img { border-radius: 0; object-position: center top; }

  /* The approved About body is 17px prose, not a 23px display size. */
  .wsc-editorial .about-copy > p {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.72;
    color: var(--wsc-body);
    max-width: 38em;
  }
  .wsc-editorial .about-pull { font-size: 27px; }

  .wsc-editorial .founder-portrait,
  .wsc-editorial .founder-brief img {
    border-radius: 6px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
  }
}

/* Wide desktop gets a little more air without losing density. */
@media (min-width: 1400px) {
  .wsc-editorial .wrap { max-width: 1320px; }
  .wsc-editorial .section-head h2 { font-size: 44px; }
}

/* =============================================================================
   2. MOBILE — Concept 1, editorial tile system
   ========================================================================== */
@media (max-width: 860px) {

  .wsc-editorial .wrap { padding: 0 20px; }
  .wsc-editorial section { padding: 44px 0; }

  /* ---- Editorial typography and pacing --------------------------------- */
  .wsc-editorial .section-eyebrow {
    color: var(--amber);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-align: left;
    margin-bottom: 10px;
  }
  .wsc-editorial .section-head h2 {
    text-align: left;
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.16;
    max-width: none;
  }
  .wsc-editorial .section-sub {
    text-align: left;
    margin: 10px 0 0;
    max-width: none;
    font-size: 15px;
    line-height: 1.6;
  }

  /* Heroes stay left-set and cinematic rather than centred and clinical. */
  .wsc-editorial .page-hero,
  .wsc-editorial .hero,
  .wsc-editorial .lisbon-hero { text-align: left; padding: 48px 0 36px; }
  .wsc-editorial .page-hero .section-eyebrow,
  .wsc-editorial .page-hero h1,
  .wsc-editorial .page-hero p.sub { text-align: left; margin-left: 0; margin-right: 0; }
  .wsc-editorial .page-hero h1 { font-size: 32px; line-height: 1.14; }
  .wsc-editorial .page-hero p.sub { font-size: 15.5px; margin-bottom: 22px; }
  .wsc-editorial .jump-row { justify-content: flex-start; gap: 16px; }

  /* Nothing may push the viewport sideways at 390 or 430. */
  .wsc-editorial, .wsc-editorial body { overflow-x: hidden; }
  .wsc-editorial img,
  .wsc-editorial video,
  .wsc-editorial table { max-width: 100%; }
  .wsc-editorial .budget-table { display: block; overflow-x: auto; }

  /* -------------------------------------------------------------------------
     Tile index
     A page that marks sections with data-tile is rebuilt on mobile as an index
     of editorial entry points. The sections themselves stay in the DOM and are
     moved into their panels, so there is exactly one copy of the content.
     ---------------------------------------------------------------------- */
  .wsc-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px 14px 8px;
    align-items: stretch;
  }
  .wsc-tile {
    position: relative;
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .wsc-tile:active { transform: scale(0.975); }
  .wsc-tile:hover { box-shadow: 0 10px 26px rgba(20, 32, 28, 0.18); }

  /* Broken grid: deliberately uneven weight, never six identical buttons. */
  .wsc-tile.is-tall { grid-row: span 2; }
  .wsc-tile.is-wide,
  .wsc-tile.is-full { grid-column: span 2; }

  .wsc-tile-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 118px;
    height: 100%;
    padding: 20px 16px;
    position: relative;
  }
  .wsc-tile.is-tall .wsc-tile-inner { min-height: 246px; }
  .wsc-tile.is-full .wsc-tile-inner { min-height: 128px; }

  .wsc-tile.t-forest .wsc-tile-inner { background: var(--forest-deep); color: var(--cream); }
  .wsc-tile.t-ink    .wsc-tile-inner { background: var(--ink);         color: var(--cream); }
  .wsc-tile.t-sand   .wsc-tile-inner { background: var(--sand);        color: var(--charcoal); }
  .wsc-tile.t-amber  .wsc-tile-inner { background: var(--amber);       color: var(--ink); }
  .wsc-tile.t-terra  .wsc-tile-inner { background: var(--terracotta);  color: var(--cream); }
  .wsc-tile.t-cream  .wsc-tile-inner { background: #fff; color: var(--charcoal); border: 1px solid var(--wsc-rule); }

  .wsc-tile-num {
    position: absolute;
    top: 6px; right: 12px;
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.16;
    pointer-events: none;
  }
  /* The numeral is a watermark, not a collision. Text keeps clear of it. */
  .wsc-tile-eyebrow,
  .wsc-tile-title { padding-right: 42px; }
  .wsc-tile.is-full .wsc-tile-title,
  .wsc-tile.is-wide .wsc-tile-title { padding-right: 56px; }
  .wsc-tile-eyebrow {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0.62;
    margin-bottom: 6px;
  }
  .wsc-tile-title {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.14;
    margin: 0 0 4px;
  }
  .wsc-tile.is-full .wsc-tile-title,
  .wsc-tile.is-wide .wsc-tile-title { font-size: 24px; }
  .wsc-tile-deck {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.45;
    opacity: 0.74;
    margin: 2px 0 0;
  }
  .wsc-tile-cue {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.72;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .wsc-tile-cue::after { content: '\2192'; font-size: 12px; }
  .wsc-tile:hover .wsc-tile-cue,
  .wsc-tile:focus-visible .wsc-tile-cue { opacity: 1; }

  /* A typographic full-width moment between tile clusters. */
  .wsc-tile-pull {
    grid-column: span 2;
    background: var(--cream);
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
    padding: 24px 4px;
    margin: 6px 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.34;
    color: var(--forest-deep);
    text-align: left;
  }

  /* -------------------------------------------------------------------------
     Tile panel — the opened subject
     ---------------------------------------------------------------------- */
  .wsc-panel {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    background: var(--cream);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .wsc-panel.is-open { display: block; animation: wscPanelIn 0.28s ease; }
  @keyframes wscPanelIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .wsc-panel-head {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--ink);
    color: var(--cream);
    padding: 15px 18px;
    border-bottom: 1px solid rgba(247, 243, 236, 0.1);
  }
  .wsc-panel-head h2 {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--cream);
  }
  .wsc-panel-close {
    flex: 0 0 auto;
    background: none;
    border: 1px solid rgba(247, 243, 236, 0.32);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 3px;
    cursor: pointer;
  }
  .wsc-panel-close:hover { background: rgba(247, 243, 236, 0.1); }

  /* The hosted subject drops its own page chrome inside the panel. A whole
     section arrives with a .wrap of its own; a card arrives bare and is given
     the same measure so both read identically once opened. */
  .wsc-panel-body > section { padding: 26px 0 32px; }
  .wsc-panel-body > section > .wrap { padding: 0 20px; }
  .wsc-panel-body > section > .wrap > .section-head { margin-bottom: 4px; }
  .wsc-panel-body > :not(section) {
    padding: 26px 20px 32px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .wsc-panel-body > :not(section) > h3:first-child { margin-top: 0; }

  /* Return affordance at the foot of the subject, so a reader who scrolled
     the whole way down is not stranded. */
  .wsc-panel-foot {
    border-top: 1px solid var(--sand);
    padding: 22px 20px 40px;
  }
  .wsc-panel-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--forest-deep);
    color: var(--cream);
    border: none;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 13px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  .wsc-panel-back::before { content: '\2190'; }

  body.wsc-panel-lock { overflow: hidden; }

  /* A container the page nominated as its own mount becomes the broken grid
     once its hosted children have moved into panels. */
  .wsc-editorial [data-tile-mount-self][data-tile-built] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    margin-top: 20px;
  }

  /* ---- Mobile card and grid behaviour ---------------------------------- */
  .wsc-editorial .before-grid,
  .wsc-editorial .service-grid,
  .wsc-editorial .env-grid,
  .wsc-editorial .trip-grid,
  .wsc-editorial .work-grid,
  .wsc-editorial .data-grid { grid-template-columns: 1fr; gap: 14px; }

  .wsc-editorial .before-card,
  .wsc-editorial .service-card,
  .wsc-editorial .env-card,
  .wsc-editorial .work-card {
    border-left: 4px solid var(--forest);
    border-radius: 6px;
  }
  .wsc-editorial .service-card.wsc-featured {
    border-left-color: var(--amber);
    background: rgba(201, 138, 62, 0.06);
  }

  .wsc-editorial .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .wsc-editorial .about-photo {
    max-width: 260px;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    position: static;
  }
  .wsc-editorial .about-photo img { border-radius: 0; object-position: center top; }
  .wsc-editorial .about-copy > p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--wsc-body);
  }
  .wsc-editorial .about-pull { font-size: 21px; padding-left: 16px; }
  .wsc-editorial .about-stats { gap: 10px; }

  .wsc-editorial .founder-portrait,
  .wsc-editorial .founder-brief img {
    border-radius: 6px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
  }

  .wsc-editorial .footer-grid { grid-template-columns: 1fr; text-align: left; }
}

/* =============================================================================
   2.5 Navigational tiles
   The homepage's clickable tiles are authored anchors, so they are real links
   with no JavaScript and they survive into the desktop index. On mobile they
   sit in the broken grid beside the subject tiles; on desktop they become
   Concept 2 index cards.
   ========================================================================== */
.wsc-editorial a.wsc-tile,
.wsc-editorial a.wsc-tile:hover {
  display: block;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 861px) {
  .wsc-editorial .wsc-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px 8px;
  }
  .wsc-editorial .wsc-tile {
    position: relative;
    display: block;
    border: 1px solid var(--wsc-rule);
    border-left: 4px solid var(--forest);
    border-radius: 6px;
    background: #fff;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-left-color 0.18s ease;
  }
  .wsc-editorial .wsc-tile:hover,
  .wsc-editorial .wsc-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(20, 32, 28, 0.12);
    border-left-color: var(--amber);
  }
  .wsc-editorial .wsc-tile.is-wide,
  .wsc-editorial .wsc-tile.is-full { grid-column: span 2; }

  .wsc-editorial .wsc-tile-inner {
    display: block;
    padding: 28px 26px;
    min-height: 168px;
  }
  .wsc-editorial .wsc-tile-num {
    position: absolute;
    top: 16px; right: 20px;
    font-family: var(--serif);
    font-size: 15px;
    color: rgba(31, 41, 38, 0.3);
    letter-spacing: 1px;
  }
  .wsc-editorial .wsc-tile-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 10px;
  }
  .wsc-editorial .wsc-tile-title {
    display: block;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--forest-deep);
    margin: 0 0 8px;
  }
  .wsc-editorial .wsc-tile-deck {
    display: block;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--wsc-body);
    margin: 0;
  }
  .wsc-editorial .wsc-tile-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-top: 14px;
  }
  .wsc-editorial .wsc-tile-cue::after { content: '\2192'; }
  .wsc-editorial .wsc-tile-pull { display: none; }
}

/* =============================================================================
   3. Citation presentation (both breakpoints)
   Sources are named inline. There is no "source pending" state any more: a
   figure either carries an authority or it is not published.
   ========================================================================== */
.wsc-editorial .src-line,
.wsc-editorial .stat-src {
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.45;
}
.wsc-editorial .src-line .src-k,
.wsc-editorial .src-line b {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 9.5px;
  color: var(--amber);
}
.wsc-editorial .sources {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wsc-body);
  border-top: 1px solid var(--wsc-rule);
  padding-top: 16px;
  margin-top: 28px;
}
.wsc-editorial .sources a { text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================================
   Owner Operations pass (2026-10)
   -----------------------------------------------------------------------------
   • The two WSC statements — "Wellness should never be expensive…" and
     "You cannot heal where you got sick…" — are centred moments at every
     width. Alignment stays owner-editable (Content Studio presentation sets
     data-wsc-align with !important, which still wins).
   • Owner tile choices: a subject can be inline or hidden on phones, and a
     navigation tile can be hidden on phones only.
   • Owner tile images get a legibility scrim; text never sits on bare photo.
   ========================================================================== */
.wsc-editorial section .pull-quote,
.wsc-editorial .pull-quote {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 30em;
  padding-left: 0;
  padding-right: 0;
  border-left: 0;
  border-top: 1px solid var(--sand, #E4D8CC);
  border-bottom: 1px solid var(--sand, #E4D8CC);
  padding-top: 26px;
  padding-bottom: 26px;
  overflow-wrap: break-word;
}
.wsc-editorial .hero-quote {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 34em;
  overflow-wrap: break-word;
}
.wsc-tile-pull { text-align: center; }
@media (max-width: 860px) {
  .wsc-mobile-hidden, .wsc-tile--mobile-hidden { display: none !important; }
  .wsc-editorial .pull-quote { font-size: clamp(20px, 5.6vw, 24px); padding-left: 4px; padding-right: 4px; }
  .wsc-editorial .hero-quote { font-size: clamp(19px, 5.4vw, 22px); }
}
.wsc-tile.has-image { position: relative; background-size: cover; background-position: center; isolation: isolate; }
.wsc-tile.has-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,28,.15) 0%, rgba(20,32,28,.72) 100%); z-index: -1; border-radius: inherit; }
.wsc-tile.has-image .wsc-tile-inner, .wsc-tile.has-image .wsc-tile-title, .wsc-tile.has-image .wsc-tile-deck, .wsc-tile.has-image .wsc-tile-eyebrow { color: #F7F3EC; }

/* Collection cards (The Collective, Plant Wellness, Around NYC lists) —
   rendered from approved, published entries; text only, no owner HTML. */
.wsc-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 36px; }
.wsc-collection[hidden] { display: none; }
.wsc-ccard { background: #fff; border: 1px solid var(--sand, #E4D8CC); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.wsc-ccard-media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #3F6D5F, #1E362D); display: grid; place-items: center; color: rgba(247,243,236,.9); font-family: var(--serif, Georgia, serif); font-size: 42px; }
.wsc-ccard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsc-ccard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wsc-ccard-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--terracotta, #1848A0); }
.wsc-ccard h3 { font-size: 20px; line-height: 1.25; color: var(--forest-deep, #1E362D); margin: 0; overflow-wrap: break-word; }
.wsc-ccard p { font-size: 14.5px; line-height: 1.55; color: rgba(31,41,38,.78); margin: 0; overflow-wrap: break-word; }
.wsc-ccard dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; font-size: 13px; margin: 4px 0 0; }
.wsc-ccard dt { font-weight: 700; color: var(--forest-deep, #1E362D); }
.wsc-ccard dd { margin: 0; overflow-wrap: anywhere; }
.wsc-ccard details { font-size: 13.5px; }
.wsc-ccard details summary { cursor: pointer; font-weight: 700; color: var(--terracotta, #1848A0); min-height: 32px; display: flex; align-items: center; }
.wsc-ccard-src { font-size: 12px; color: rgba(31,41,38,.6); }