/*
Theme Name:   Southern Lady
Theme URI:    https://www.southernladymagazine.com/
Description:  Astra child theme for the Phase 2 redesign of SouthernLadyMagazine.com. Carries the brand design system — greens-only palette, the five Adobe Fonts faces, and WCAG 2.1 AA type and contrast rules.
Author:       Hoffman Media
Author URI:   https://www.hoffmanmedia.com/
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  southern-lady
Tags:         magazine, editorial, accessibility-ready
*/

/* ==========================================================================
   SOUTHERN LADY — Redesign mockup stylesheet (Astra + Elementor target)
/* ==========================================================================
   SOUTHERN LADY — Redesign mockup stylesheet (Astra + Elementor target)
   Brand: Southern Lady Style Guide 2026 · Accessibility: WCAG 2.1 AA
   --------------------------------------------------------------------------
   Font stacks declare the true Adobe Fonts families FIRST. Once the Adobe
   Fonts web project embed is added in Astra > Customizer, the page renders in
   the real brand faces with no CSS change. Google faces are matched fallbacks.
   ========================================================================== */

:root{
  /* --- Brand palette ------------------------------------------------------
     Southern Lady is green. Chocolate and peach were retired from the line-up
     and are not used anywhere in this system. Dusty blue is the secondary and
     is held in reserve — it appears only on Travel labels.                  */
  --brand-sage:   #9AB18E;   /* the style-guide sage swatch */
  --brand-green:  #4C5C44;   /* deeper green, for type */
  --brand-forest: #23301F;   /* deepest green, for the dark band */
  --brand-cream:  #FCF7D7;   /* C1 M2 Y15 K0 */
  --brand-blue:   #849DAC;   /* SECONDARY — reserved */

  /* --- Applied tokens (light) ------------------------------------------- */
  --paper:      #FBFBF7;
  --surface:    #EFF1E9;
  --surface-2:  #E2E7DA;
  --surface-ink:#23301F;   /* the deep green band */

  --ink:        #1A1D18;
  --ink-2:      #454C42;
  --ink-3:      #5E665A;

  --accent:       #8AA37C;  /* rules, fills, non-text ornament */
  --accent-text:  #4C5C44;  /* green used AS TEXT — AA on every surface */
  --accent-on-dark:#BCCFAE; /* on the deep green band */
  --blue-text:    #4B5E6A;  /* secondary, Travel only */

  --rule:       #D9DFD1;
  --rule-strong:#6A7A62;   /* UI component borders — 3:1 per WCAG 1.4.11 */

  --on-dark:      #F7F8F2;
  --on-dark-2:    #D6DECD;

  --focus: #4C5C44;

  --btn-bg:#1A1D18; --btn-fg:#FBFBF7;
  --btn-hover-bg:#4C5C44; --btn-hover-fg:#FFFFFF;

  /* --- Type ------------------------------------------------------------- */
  --f-display: "cofo-raffine", "CoFo Raffine", "Playfair Display", "Times New Roman", serif;
  --f-editorial: "freight-big-pro", "Freight Big Pro", "Cormorant Garamond", Georgia, serif;
  --f-script: "altesse-std-24pt", "Altesse Std", "Pinyon Script", cursive;
  --f-sans: "sofia-pro", "Sofia Pro", Jost, "Helvetica Neue", Arial, sans-serif;
  --f-body: "baskerville-display-pt", "Baskerville Display PT", "Libre Baskerville", Georgia, serif;

  /* Type scale — 1.25 major third, anchored at 19px body */
  --t-body: 1.1875rem;   /* 19px */
  --t-small: 1rem;       /* 16px — hard floor, nothing smaller */
  --t-h4: 1.375rem;
  --t-h3: 1.75rem;
  --t-h2: clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem);
  --t-h1: clamp(2.35rem, 1.3rem + 3.6vw, 4.25rem);

  --measure: 34rem;      /* ~65 characters at body size */
  --gutter: clamp(1rem, 4vw, 3.25rem);
  --page: 78rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:      #12150F;
    --surface:    #1A1F16;
    --surface-2:  #232A1E;
    --surface-ink:#0C0F09;
    --ink:        #F2F5EC;
    --ink-2:      #C7CEBE;
    --ink-3:      #A4AC9A;
    --accent:       #7E9670;
    --accent-text:  #B5CBA6;
    --accent-on-dark:#BCCFAE;
    --blue-text:    #9DB4C1;
    --rule:       #2C3327;
    --rule-strong:#818F79;
    --focus:      #B5CBA6;
    --btn-bg:#F2F5EC; --btn-fg:#12150F;
    --btn-hover-bg:#B5CBA6; --btn-hover-fg:#12180F;
  }
}
:root[data-theme="dark"]{
  --paper:      #12150F;
  --surface:    #1A1F16;
  --surface-2:  #232A1E;
  --surface-ink:#0C0F09;
  --ink:        #F2F5EC;
  --ink-2:      #C7CEBE;
  --ink-3:      #A4AC9A;
  --accent:       #7E9670;
  --accent-text:  #B5CBA6;
  --accent-on-dark:#BCCFAE;
  --blue-text:    #9DB4C1;
  --rule:       #2C3327;
  --rule-strong:#818F79;
  --focus:      #B5CBA6;
  --btn-bg:#F2F5EC; --btn-fg:#12150F;
  --btn-hover-bg:#B5CBA6; --btn-hover-fg:#12180F;
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}
::selection{ background:var(--brand-sage); color:#152012; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; font-weight:400; }
/* --- Reusable atoms ------------------------------------------------------ */

.wrap{ max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:46rem; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-family:var(--f-sans); font-size:var(--t-small);
}
.skip:focus{ left:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Small-caps label — Sofia Pro in print */
.eyebrow{
  font-family:var(--f-sans);
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin:0;
}
.eyebrow--sage{ color:var(--accent-text); }
/* retained for markup compatibility */
.eyebrow--blue{ color:var(--blue-text); }
.eyebrow--muted{ color:var(--ink-3); }
/* Script accent — Altesse Std in print. Decorative only: never the sole
   carrier of meaning, and never below 1.75rem. */
.script{
  font-family:var(--f-script);
  font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);
  line-height:1;
  color:var(--accent-text);
}
/* Script used as the first line of a headline, as titles are set in print */
h1 .script, h2 .script{ display:block; margin-bottom:-.05em; padding-bottom:.06em; }
.deck{
  font-family:var(--f-editorial);
  font-size:1.3125rem;
  line-height:1.5;
  color:var(--ink-2);
  max-width:var(--measure);
  margin:0;
}
.byline{
  font-family:var(--f-editorial);
  font-size:var(--t-small);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}
/* Folio rule — the printed page-footer device: hairline + centred lozenge */
.folio{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--f-editorial);
  font-size:var(--t-small);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.folio::before, .folio::after{
  content:""; flex:1; height:1px; background:var(--rule);
}
.rule{ height:1px; background:var(--rule); border:0; margin:0; }
/* Vertical department tab, as on the printed feature openers */
.tab-vert{
  font-family:var(--f-editorial);
  font-size:var(--t-small);
  letter-spacing:.34em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:var(--accent-text);
  align-self:start;
  white-space:nowrap;
}
/* Links that read as links without relying on colour alone */
.link{
  font-family:var(--f-sans);
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-text);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:.2rem;
  display:inline-block;
}
.link:hover{ color:var(--ink); border-bottom-color:currentColor; }
.btn{
  display:inline-block;
  font-family:var(--f-sans);
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.9rem 1.6rem;
  min-height:44px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  cursor:pointer;
}
.btn:hover{ background:var(--btn-hover-bg); border-color:var(--btn-hover-bg); color:var(--btn-hover-fg); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.btn--ghost:hover{ background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); }
figure{ margin:0; }
.caption{
  font-family:var(--f-sans);
  font-size:var(--t-small);
  line-height:1.55;
  color:var(--ink-3);
  margin:.7rem 0 0;
}
.credit{
  font-family:var(--f-sans);
  font-size:var(--t-small);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
/* Photography is square-ish, echoing the oversize square print format */
.ph{ position:relative; background:var(--surface-2); overflow:hidden; }
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph--45{ aspect-ratio:4/5; }
.ph--11{ aspect-ratio:1/1; }
.ph--169{ aspect-ratio:16/9; }
.ph--32{ aspect-ratio:3/2; }
/* ==========================================================================
   Site chrome
   ========================================================================== */

.utility{
  background:var(--surface-ink);
  color:var(--on-dark);
  font-family:var(--f-sans);
  font-size:var(--t-small);
}
.utility__inner{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  align-items:center; justify-content:center;
  padding-block:.55rem;
}
.utility__tag{ letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-2); margin:0; }
.utility__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.25rem; list-style:none; margin:0; padding:0; }
.utility__links a{
  color:var(--on-dark); text-decoration:none;
  letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; min-height:34px;
}
.utility__links a:hover{ color:var(--accent-on-dark); text-decoration:underline; }
.masthead{ padding-block:clamp(1.5rem,4vw,2.75rem) 1.25rem; text-align:center; }
.wordmark{
  font-family:var(--f-display);
  font-size:clamp(2rem,1rem + 4.4vw,4.1rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  display:inline-block;
}
.wordmark span{ font-style:normal; }
.masthead__tag{
  font-family:var(--f-editorial);
  font-size:var(--t-small);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin:.9rem auto 0;
  max-width:36rem;
  line-height:1.6;
}
.nav{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.nav__inner{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.nav__list{
  display:flex; flex-wrap:wrap; justify-content:center;
  list-style:none; margin:0; padding:0;
}
.nav__list > li > a{
  display:inline-flex; align-items:center; min-height:48px;
  padding:0 clamp(.55rem,1.4vw,1.1rem);
  font-family:var(--f-sans); font-size:var(--t-small); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.nav__list > li > a:hover,
.nav__list > li > a[aria-current="page"]{ color:var(--accent-text); }
.nav__list > li > a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--accent-text); }
/* Subscribe lives in the utility bar so the primary nav stays a single
   centred editorial row at every width. */
.utility__links a.utility__cta, .utility__cta{
  display:inline-flex; align-items:center; min-height:34px;
  padding:.3rem .95rem; background:var(--brand-cream); color:#1B2417;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; font-weight:500;
}
.utility__links a.utility__cta:hover, .utility__cta:hover{ background:#fff; color:#1B2417; text-decoration:none; }
footer.site{
  background:var(--surface-ink);
  color:var(--on-dark);
  margin-top:clamp(3rem,7vw,6rem);
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
footer.site a{ color:var(--on-dark); text-decoration:none; }
footer.site a:hover{ color:var(--accent-on-dark); text-decoration:underline; }
.foot-grid{
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
@media (min-width:64rem){
  .foot-grid{ grid-template-columns:1.5fr repeat(4,1fr); }
}
.foot-col h2{
  font-family:var(--f-sans); font-size:var(--t-small); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-on-dark); margin:0 0 1rem;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot-col li a{ font-family:var(--f-sans); font-size:var(--t-small); display:inline-block; min-height:28px; }
.foot-brand .wordmark{ color:var(--on-dark); font-size:2rem; }
.foot-legal{
  margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(188,207,174,.28);
  display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; justify-content:space-between;
  font-family:var(--f-sans); font-size:var(--t-small); color:var(--on-dark-2);
}
/* ==========================================================================
   Content blocks
   ========================================================================== */

.section{ padding-block:clamp(2.75rem,6vw,5rem); }
.section--tint{ background:var(--surface); }
.section__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1rem 2rem; margin-bottom:2rem;
}
.section__title{
  font-family:var(--f-display);
  font-size:var(--t-h2);
  line-height:1.1;
  color:var(--ink);
}
.section__note{
  font-family:var(--f-sans); font-size:var(--t-small); color:var(--ink-3); margin:0;
}
/* Card: no radius, no shadow — separation comes from hairlines and space */
.card{ display:grid; gap:.9rem; }
.card a.card__link{ text-decoration:none; color:inherit; }
.card__title{
  font-family:var(--f-display);
  font-size:var(--t-h4);
  line-height:1.25;
  color:var(--ink);
}
.card a.card__link:hover .card__title{ color:var(--accent-text); text-decoration:underline; text-underline-offset:.18em; }
.card__meta{
  font-family:var(--f-sans); font-size:var(--t-small);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:.5rem .9rem;
}
.card__dept{ color:var(--accent-text); }
.card__sum{ font-size:var(--t-small); line-height:1.6; color:var(--ink-2); margin:0; }
.grid{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); }
/* Pull quote — Altesse top line over Freight Big, per the style guide */
.pull{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding-block:clamp(2rem,4vw,3rem);
  text-align:center;
}
.pull blockquote{ margin:0; }
.pull p{
  font-family:var(--f-editorial);
  font-size:clamp(1.4rem,1rem + 1.4vw,2rem);
  line-height:1.45;
  color:var(--ink);
  max-width:38rem; margin:.5rem auto 0;
}
.pull cite{
  display:block; margin-top:1.25rem;
  font-family:var(--f-sans); font-size:var(--t-small);
  letter-spacing:.2em; text-transform:uppercase; font-style:normal;
  color:var(--ink-3);
}
/* Newsletter */
.signup{ background:var(--surface-2); }
.signup__form{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem;
  max-width:34rem; margin:1.75rem auto 0;
}
.signup label{
  font-family:var(--f-sans); font-size:var(--t-small); color:var(--ink-2);
  display:block; margin-bottom:.4rem;
}
.signup input{
  font-family:var(--f-sans); font-size:var(--t-body);
  padding:.75rem 1rem; height:52px; width:100%;
  border:1px solid var(--rule-strong); background:var(--paper); color:var(--ink);
}
.signup__field{ flex:1 1 16rem; text-align:left; }
.signup .btn{ height:52px; display:inline-flex; align-items:center; flex:0 0 auto; }
.signup__hint{ font-family:var(--f-sans); font-size:var(--t-small); color:var(--ink-3); margin:.9rem 0 0; }
/* ==========================================================================
   Advertising slots
   --------------------------------------------------------------------------
   The leaderboard is its own band above the hero. Every 300x250 instead takes
   one cell of an editorial row, so the ad sits inside the reading rhythm
   rather than interrupting it — no sidebar, no empty full-width band.
   ========================================================================== */
.adband{ padding-block:clamp(1.5rem,3.5vw,2.5rem); }
/* Article rail — the 300x250 beside the story, as on Southern Home staging.
   The whole rail group is sticky, so the unit stays in view for the length of
   a long read instead of scrolling away after the first screen. */
.rail-box{ display:grid; gap:.7rem; justify-items:center; background:var(--surface); padding:1.25rem 1rem; }
.rail-box .adslot__creative{ width:300px; max-width:100%; aspect-ratio:300/250; }
/* A row of three stories plus a fixed 300px ad column. */
.loop--ad{ grid-template-columns:repeat(3,minmax(0,1fr)) 332px; }
@media (max-width:68rem){ .loop--ad{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
}
.ad-cell{
  background:var(--surface);
  display:grid; align-content:center; justify-items:center; gap:.75rem;
  padding:1.5rem 1rem;
  align-self:stretch;
}
.ad-cell .adslot__creative{ width:300px; max-width:100%; aspect-ratio:300/250; }
.retreats .ad-cell{ background:rgba(251,248,241,.07); }
.retreats .ad-cell .adslot__label{ color:var(--on-dark-2); }
.adslot{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:.7rem; }
.adslot__label{
  font-family:var(--f-sans); font-size:var(--t-small); font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); margin:0;
}
.adslot__creative{
  position:relative; display:block; overflow:hidden; text-decoration:none;
  background:var(--surface-2); border:1px solid var(--rule);
}
.adslot__creative img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.adslot--lb .adslot__creative{ width:728px; max-width:100%; aspect-ratio:728/90; }
.adslot--mrec .adslot__creative{ width:300px; max-width:100%; aspect-ratio:300/250; }
.ad-copy{
  position:relative; height:100%; display:grid; align-content:center; gap:.3rem;
  padding:.75rem 1.15rem; background:linear-gradient(90deg, rgba(16,20,14,.94) 0%, rgba(16,20,14,.78) 60%, rgba(16,20,14,.35) 100%);
}
.adslot--mrec .ad-copy{ background:linear-gradient(0deg, rgba(16,20,14,.96) 0%, rgba(16,20,14,.86) 52%, rgba(16,20,14,.55) 100%); align-content:end; gap:.45rem; padding:1.15rem; }
.ad-copy .k{ font-family:var(--f-sans); font-size:var(--t-small); letter-spacing:.22em; text-transform:uppercase; color:var(--accent-on-dark); margin:0; }
.ad-copy .t{ font-family:var(--f-display); font-size:1.4rem; line-height:1.15; color:var(--on-dark); margin:0; }
.adslot--mrec .ad-copy .t{ font-size:1.6rem; }
.ad-copy .s{ font-family:var(--f-editorial); font-size:var(--t-small); letter-spacing:.06em; color:var(--on-dark-2); margin:0; }
.ad-copy .pill{
  justify-self:start; margin-top:.25rem; background:var(--brand-cream); color:#1B2417;
  font-family:var(--f-sans); font-size:var(--t-small); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:.45rem 1rem;
}
.adslot--lb .ad-copy{ grid-template-columns:1fr auto; align-items:center; gap:.2rem 1.5rem; }
.adslot--lb .ad-copy .k{ grid-column:1; white-space:nowrap; }
.adslot--lb .ad-copy .t{ grid-column:1; white-space:nowrap; }
.adslot--lb .ad-copy .s{ grid-column:1; }
.adslot--lb .ad-copy .pill{ grid-column:2; grid-row:1 / span 2; margin:0; align-self:center; }
@media (max-width:34rem){
  .adslot--lb .adslot__creative{ aspect-ratio:320/100; }
.adslot--lb .ad-copy{ grid-template-columns:1fr; }
.adslot--lb .ad-copy .pill{ grid-column:1; grid-row:auto; }
.adslot--lb .ad-copy .t{ font-size:1.15rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* ==========================================================================
   Elementor bridge
   Maps the Elementor widget output onto the Southern Lady design system.
   Load this AFTER Elementor's own styles (child theme style.css, or
   Elementor > Custom Code > after </body>).
   ========================================================================== */

/* Containers use the design system's page width and gutter */
.e-con{ --container-max-width:78rem; }
.sl-section{ padding-block:clamp(2.75rem,6vw,5rem); }
/* Posts widget -> the card system ------------------------------------------ */
.sl-loop .elementor-posts{ gap:clamp(1.5rem,3vw,2.25rem); }
.sl-loop .elementor-post{ background:none; border:0; padding:0; }
.sl-loop .elementor-post__thumbnail{ aspect-ratio:4/5; }
.sl-loop .elementor-post__thumbnail img{ width:100%; height:100%; object-fit:cover; }
.sl-loop .elementor-post__title,
.sl-loop .elementor-post__title a{
  font-family:var(--f-display); font-size:1.25rem; line-height:1.25;
  color:var(--ink); text-decoration:none; min-height:2.5em; display:block;
}
.sl-loop .elementor-post__title a:hover{ color:var(--accent-text); text-decoration:underline; text-underline-offset:.18em; }
.sl-loop .elementor-post__meta-data{ display:none; }
/* no dates, no author */
.sl-loop .elementor-post__excerpt{ display:none; }
.sl-loop .elementor-post__read-more{ display:none; }
/* Culinary keeps its sub-category label; everything else drops the term */
.sl-loop--culinary .elementor-post__meta-data{
  display:block; font-family:var(--f-sans); font-size:var(--t-small);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text);
}
/* Rows that give their fourth cell to a 300x250 ---------------------------- */
.sl-section--ad{ display:grid; grid-template-columns:1fr 332px; gap:clamp(1.5rem,3vw,2.25rem); align-items:start; }
.sl-section--ad > .elementor-widget-html:first-child{ grid-column:1 / -1; }
@media (max-width:68rem){ .sl-section--ad{ grid-template-columns:1fr; }
}
/* The live ad slot. Give it a reserved height per breakpoint so the creative
   loading never shifts the layout — this is the main CLS risk in the build. */
.sl-ad-slot{ width:300px; max-width:100%; min-height:250px; margin-inline:auto; }
.sl-ad-slot[data-size="728x90"]{ width:728px; min-height:90px; }
@media (max-width:37.5rem){
  .sl-ad-slot[data-size="728x90"]{ width:320px; min-height:50px; }
}
/* Optional byline — hidden when Elementor renders it empty */
.sl-optional-byline:empty{ display:none; }
/* Theme widgets inside the article */
.sl-post-title{ font-family:var(--f-display); font-size:var(--t-h1); line-height:1.03; }
.sl-lede img{ width:100%; height:auto; }
/* ===================================================================
   ASTRA BRIDGE
   Elementor's Global Fonts only define CSS variables; they do not
   style body copy or headings on their own, and Astra ships its own
   typography that wins by default. This block hands those elements to
   the brand faces. Specificity is deliberately matched to Astra's own
   output (body, button, input, select, textarea / h1, .entry-content h1)
   — do not reduce it to a bare `body {}
` or Astra takes it back.
   =================================================================== */

body,
button, input, select, textarea,
.ast-container, .entry-content,
.elementor-widget-text-editor, .elementor-widget-theme-post-content{
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--ink);
}
h1, .entry-content h1, .elementor-widget-heading h1.elementor-heading-title,
h2, .entry-content h2, .elementor-widget-heading h2.elementor-heading-title,
h3, .entry-content h3, .elementor-widget-heading h3.elementor-heading-title,
h4, .entry-content h4, .elementor-widget-heading h4.elementor-heading-title{
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--ink);
}
/* Deck / standfirst */
.sl-deck, .elementor-widget-heading .sl-deck .elementor-heading-title,
.entry-content > p.has-drop-cap:first-of-type{
  font-family: var(--f-editorial);
}
/* Eyebrows, labels, buttons, nav, captions */
.sl-eyebrow, .ast-breadcrumbs, .main-navigation, .menu-item,
.wp-block-button__link, .elementor-button, .ast-button,
figcaption, .wp-caption-text, .elementor-image-caption{
  font-family: var(--f-sans);
  letter-spacing: .04em;
}
.sl-script{ font-family: var(--f-script); }
/* Astra's Customizer colors would otherwise fight the palette. */
a{ color: var(--accent-text); }
a:hover{ color: var(--brand-green); }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
/* ===================================================================
   LOOP CARDS
   Elementor's item-ratio control sets padding-bottom on the thumbnail
   box but never constrains the <img> inside it, so images of differing
   native aspect ratios render at differing heights within identical
   boxes. Measured on staging: boxes a uniform 181x226, images 121 /
   121 / 241 tall. aspect-ratio + object-fit fixes it here rather than
   relying on the widget control, which is also easier to reason about.
   =================================================================== */

.sl-loop .elementor-post__thumbnail__link,
.sl-loop .elementor-post__thumbnail{
  aspect-ratio: 3 / 2;
  height: auto !important;
  padding-bottom: 0 !important;   /* defeat Elementor's ratio hack */
  overflow: hidden;
  display: block;
  background: var(--surface);
}
.sl-loop .elementor-post__thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sl-loop .elementor-post__title,
.sl-loop .elementor-post__title a{
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}
.sl-loop .elementor-post__title a:hover{ color: var(--accent-text); }
/* Belt and braces: the widget controls already suppress these, but a
   future editor toggling them back on shouldn't break the brand rules. */
.sl-loop .elementor-post__meta-data,
.sl-loop .elementor-post__read-more{ display: none !important; }
/* A byline field left unpopulated collapses rather than printing a stub. */
.sl-optional-byline:empty,
.sl-optional-byline .elementor-icon-list-items:empty{ display: none !important; }
/* ===================================================================
   LEGACY CONTENT GUARD
   Unconverted WPBakery pages emit their shortcodes as one unbroken
   string. Measured on staging: a single <p> 5,382px wide against a
   1,394px viewport -- 4,069px of horizontal overflow on the whole
   document. This does not fix the shortcodes, it stops any long
   unbroken string from blowing out the layout.
   =================================================================== */

.sl-entry-content{ overflow-wrap: anywhere; }
.sl-entry-content pre,
.sl-entry-content code{ white-space: pre-wrap; word-break: break-word; }
/* ===================================================================
   COMPONENT LAYER — Elementor markup
   ===================================================================
   The blocks above this line were written against the standalone
   mockup's class names (.utility, .masthead, .nav__list, …). The v2
   Elementor templates emit sl- prefixed names, so those rules match
   nothing on the live site and are retained only for the mockup files.
   Everything below targets what Elementor actually renders.
   =================================================================== */

/* ---- section rhythm ---------------------------------------------- */
.sl-section{ padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.sl-section + .sl-section{ border-top: 1px solid var(--rule); }
.sl-section--band + .sl-section,
.sl-section--band{ border-top: 0; }
.sl-sec__title{
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  color: var(--accent-text);
  margin-block-end: 2rem;
  position: relative;
}
.sl-sec__title::after{
  content:""; display:block; width:3.5rem; height:1px;
  background: var(--rule-strong); margin: .9rem auto 0;
}
.sl-sec__title--script{ font-family: var(--f-script); font-size: clamp(2.2rem,4vw,3.4rem); }
.sl-sec__title--on-dark{ color: var(--on-dark); }
.sl-sec__title--on-dark::after{ background: var(--accent-on-dark); }
/* ---- utility bar -------------------------------------------------- */
.sl-utility{ background: var(--brand-forest); color: var(--on-dark); }
.sl-utility__inner{
  max-width: var(--page); margin-inline: auto;
  padding: .55rem 1rem;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  flex-wrap: wrap;
}
.sl-utility__links{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.sl-utility__links a,
.sl-utility__cta{
  font-family: var(--f-sans);
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-2); text-decoration: none;
}
.sl-utility__links a:hover{ color: var(--on-dark); }
.sl-utility__cta{
  border: 1px solid var(--accent-on-dark); color: var(--on-dark);
  padding: .3rem .9rem;
}
.sl-utility__cta:hover{ background: var(--accent-on-dark); color: var(--brand-forest); }
/* ---- masthead ----------------------------------------------------- */
.elementor-widget-theme-site-logo img{ max-width: 340px; height: auto; }
.sl-masthead__tag{
  font-family: var(--f-editorial);
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  font-style: italic; text-align: center;
  color: var(--ink-3); margin: .6rem 0 0;
}
/* ---- primary nav -------------------------------------------------- */
.sl-nav .elementor-nav-menu{ justify-content: center; flex-wrap: wrap; }
.sl-nav .elementor-nav-menu a.elementor-item{
  font-family: var(--f-sans);
  font-size: .875rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-2); padding: .85rem .95rem;
}
.sl-nav .elementor-nav-menu a.elementor-item:hover,
.sl-nav .elementor-nav-menu a.elementor-item.elementor-item-active{ color: var(--accent-text); }
.sl-nav .elementor-nav-menu--dropdown a{ font-family: var(--f-sans); font-size: .875rem; }
/* ---- current issue ------------------------------------------------ */
.sl-section--issue{ background: var(--surface); }
.sl-issue__cover{ aspect-ratio: 3/4; background: var(--surface-2); overflow: hidden; }
.sl-issue__cover img{ width:100%; height:100%; object-fit: cover; display:block; }
.sl-issue__blurb{
  font-family: var(--f-editorial); font-size: 1.15rem; line-height: 1.6;
  color: var(--ink-2); max-width: 34rem;
}
.sl-btn .elementor-button,
a.sl-btn{
  font-family: var(--f-sans); font-size: .85rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: .85rem 2rem; border-radius: 0; border: 0;
}
.sl-btn .elementor-button:hover{ background: var(--btn-hover-bg); color: var(--btn-hover-fg); }
/* ---- retreats band ------------------------------------------------ */
.sl-section--band{ background: var(--brand-forest); color: var(--on-dark); }
.sl-retreats{
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.sl-retreat{
  display: block; text-decoration: none; text-align: center;
  border: 1px solid rgba(255,255,255,.22); padding: 2rem 1.25rem;
}
.sl-retreat h3{
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 400;
  color: var(--on-dark); margin: 0 0 .35rem;
}
.sl-retreat p{
  font-family: var(--f-sans); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-dark-2); margin: 0;
}
.sl-retreat:hover{ background: rgba(255,255,255,.06); }
/* ---- boutique ----------------------------------------------------- */
.sl-shop-cats{
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.sl-shop-cat{
  display: block; text-decoration: none; text-align: center;
  background: var(--surface); padding: 3rem 1rem;
  border: 1px solid var(--rule);
}
.sl-shop-cat h3{
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 400;
  color: var(--ink); margin: 0;
}
.sl-shop-cat:hover{ background: var(--surface-2); }
/* ---- ad slots ------------------------------------------------------ */
.sl-ad-slot{
  display: grid; place-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--rule);
}
.sl-ad-slot__label{
  font-family: var(--f-sans); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
/* Heights reserved so the slot cannot shift layout when a creative loads. */
.sl-ad-slot--lb{ min-height: 90px; }
.sl-ad-slot--mr{ min-height: 250px; max-width: 300px; margin-inline: auto; }
/* ---- newsletter ---------------------------------------------------- */
.sl-section--newsletter{ background: var(--surface); }
.sl-newsletter-slot{ min-height: 4rem; }
/* ---- footer -------------------------------------------------------- */
.sl-footer{ background: var(--brand-forest); color: var(--on-dark); }
.sl-footer .sl-footer__wordmark{
  font-family: var(--f-display); font-size: 1.9rem; font-weight: 400;
  color: var(--on-dark); margin: 0 0 .5rem;
}
.sl-footer .sl-footer__blurb{
  font-family: var(--f-editorial); font-style: italic; color: var(--on-dark-2);
}
.sl-footer h3{
  font-family: var(--f-sans); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-on-dark);
}
.sl-footer .elementor-nav-menu a.elementor-item{
  font-family: var(--f-body); font-size: 1rem; color: var(--on-dark-2);
  padding: .3rem 0; text-transform: none; letter-spacing: 0;
}
.sl-footer .elementor-nav-menu a.elementor-item:hover{ color: var(--on-dark); }
.sl-colophon-row{ background: var(--brand-forest); }
.sl-colophon{
  font-family: var(--f-sans); font-size: .8rem; text-align: center;
  color: var(--on-dark-2); margin: 0; padding-block: 1rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.sl-colophon a{ color: var(--on-dark-2); }
.sl-colophon a:hover{ color: var(--on-dark); }
/* ---- post + page bodies -------------------------------------------- */
.sl-post__title, .sl-page__title{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.08;
  text-align: center; color: var(--ink);
}
.sl-rail-promo{ background: var(--surface); padding: 1.5rem; }
.sl-rail-promo h3{
  font-family: var(--f-sans); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin: 0;
}
@media (max-width: 767px){
  .sl-utility__inner{ gap: .75rem; }
.sl-utility__links{ gap: .9rem; justify-content: center; }
.sl-sec__title{ margin-block-end: 1.5rem; }
}
/* ===================================================================
   MISSING-IMAGE FALLBACK
   Staging holds the production database but only part of the uploads
   folder, so most editorial photos 404 and the browser paints their
   alt text inside the card. Suppressing the text leaves the reserved
   grey box, which reads as a deliberate placeholder rather than a
   broken page. This is safe in production: where the file exists the
   image covers the box and none of this is visible.
   =================================================================== */

.sl-loop .elementor-post__thumbnail img{
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
}
.sl-loop .elementor-post__thumbnail{
  background: var(--surface-2);
  position: relative;
}
.sl-loop .elementor-post__thumbnail::after{
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--rule);
  pointer-events: none;
}
/* ===================================================================
   FULL-WIDTH TEMPLATE
   Astra keeps its .ast-container (max-width 1240px, 20px padding) even
   on Elementor's Full Width page template, so sections cap at 1200px
   and nothing can go edge to edge — the green band and the leaderboard
   row both need to. Releasing the wrapper lets each section span the
   viewport while its inner container still boxes at the kit's 1248px,
   which is the behaviour the template promises.
   =================================================================== */

.elementor-template-full-width .ast-container{
  max-width: none;
  padding-inline: 0;
}
.elementor-template-full-width .site-content > .ast-container{ display: block; }
/* Sections that should read edge to edge keep their inner content boxed. */
.elementor-template-full-width .elementor-section.elementor-section-boxed
  > .elementor-container{
  max-width: 1248px;
  margin-inline: auto;
  padding-inline: 24px;
}
/* ===================================================================
   HOMEPAGE v3 — composition to match the approved mockup
   Supersedes the plain centred .sl-sec__title treatment for anything
   using the department header. Section backgrounds and padding live in
   Elementor settings, because 4.x drops _css_classes on legacy sections.
   =================================================================== */

/* ---- department header ------------------------------------------- */
.sl-dept{ text-align:center; margin-block-end:2.25rem; }
.sl-dept__eyebrow{
  font-family:var(--f-sans); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .5rem;
}
.sl-dept__title{
  font-family:var(--f-display); font-weight:400; line-height:1.05;
  font-size:clamp(2rem,3.6vw,3rem); color:var(--accent-text); margin:0;
}
.sl-dept__link{
  display:inline-block; margin-block-start:.9rem;
  font-family:var(--f-sans); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); padding-bottom:.2rem;
}
.sl-dept__link:hover{ color:var(--accent-text); border-color:var(--accent-text); }
/* on the forest band */
.sl-band .sl-dept__eyebrow{ color:var(--accent-on-dark); }
.sl-band .sl-dept__title{ color:var(--on-dark); }
.sl-band .sl-dept__link{ color:var(--on-dark-2); border-color:var(--accent-on-dark); }
.sl-band .sl-dept__link:hover{ color:var(--on-dark); }
/* ---- hero --------------------------------------------------------- */
.sl-hero__figure{ margin:0; aspect-ratio:4/5; background:var(--surface-2); overflow:hidden; }
.sl-hero__figure img{ width:100%; height:100%; object-fit:cover; display:block; font-size:0; color:transparent; }
.sl-hero__panel{
  background:var(--brand-cream); padding:clamp(1.75rem,3vw,2.75rem);
  margin-block-start:-18%; margin-inline-start:12%; position:relative; z-index:2;
}
.sl-hero__kicker{
  font-family:var(--f-sans); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .75rem;
}
.sl-hero__title{
  font-family:var(--f-display); font-weight:400; line-height:1;
  font-size:clamp(2.4rem,4.4vw,3.6rem); color:var(--ink); margin:0 0 .9rem;
}
.sl-hero__script{
  display:block; font-family:var(--f-script);
  font-size:1.15em; line-height:.9; color:var(--accent-text);
}
.sl-hero__dek{
  font-family:var(--f-editorial); font-size:1.1rem; line-height:1.6;
  color:var(--ink-2); margin:0 0 1rem;
}
.sl-hero__credit{
  font-family:var(--f-sans); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 1.25rem;
}
.sl-hero__cta{
  font-family:var(--f-sans); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); padding-bottom:.25rem;
}
.sl-hero__cta:hover{ color:var(--accent-text); border-color:var(--accent-text); }
/* ---- current issue ------------------------------------------------ */
.sl-issue__eyebrow{
  font-family:var(--f-sans); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .6rem;
}
.sl-issue__title{
  font-family:var(--f-display); font-weight:400; margin:0 0 .8rem;
  font-size:clamp(2rem,3.4vw,2.8rem); color:var(--accent-text);
}
.sl-issue__actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-block-start:1.5rem; }
a.sl-btn--solid, a.sl-btn--ghost{
  font-family:var(--f-sans); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; padding:.85rem 1.75rem;
  display:inline-block;
}
a.sl-btn--solid{ background:var(--btn-bg); color:var(--btn-fg); }
a.sl-btn--solid:hover{ background:var(--btn-hover-bg); color:var(--btn-hover-fg); }
a.sl-btn--ghost{ border:1px solid var(--rule-strong); color:var(--ink); }
a.sl-btn--ghost:hover{ background:var(--surface-2); }
/* ---- retreats ----------------------------------------------------- */
.sl-retreats{ display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.sl-retreat{ display:grid; gap:.6rem; text-decoration:none; border:0; padding:0; }
.sl-retreat__img{ display:block; aspect-ratio:3/2; background:rgba(255,255,255,.1); }
.sl-retreat__date{
  font-family:var(--f-sans); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-on-dark);
}
.sl-retreat__place{
  font-family:var(--f-display); font-size:1.35rem; line-height:1.2; color:var(--on-dark);
}
.sl-retreat:hover .sl-retreat__place{ color:var(--accent-on-dark); }
.sl-retreats__note{
  font-family:var(--f-editorial); font-style:italic; text-align:center;
  color:var(--on-dark-2); margin-block-start:2rem;
}
/* ---- boutique ------------------------------------------------------ */
.sl-shop-cat{ display:grid; gap:.85rem; background:none; border:0; padding:0; }
.sl-shop-cat__img{ display:block; aspect-ratio:1/1; background:var(--surface-2); border:1px solid var(--rule); }
.sl-shop-cat h3{ font-size:1.15rem; }
/* ---- newsletter ---------------------------------------------------- */
.sl-letter{ max-width:38rem; margin-inline:auto; text-align:center; }
.sl-letter__eyebrow{
  font-family:var(--f-sans); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .6rem;
}
.sl-letter__title{
  font-family:var(--f-display); font-weight:400; margin:0 0 .8rem;
  font-size:clamp(1.9rem,3.2vw,2.6rem); color:var(--accent-text);
}
.sl-letter__blurb{ font-family:var(--f-editorial); font-size:1.1rem; color:var(--ink-2); }
.sl-letter__form{ min-height:3.5rem; margin-block:1.5rem; }
.sl-letter__fine{ font-family:var(--f-sans); font-size:.75rem; color:var(--ink-3); margin:0; }
@media (max-width:1024px){
  .sl-hero__panel{ margin-block-start:-10%; margin-inline-start:6%; }
}
@media (max-width:767px){
  .sl-hero__panel{ margin:0; }
.sl-hero__figure{ aspect-ratio:3/2; }
.sl-issue__actions{ justify-content:center; }
}
/* ===================================================================
   HERO FEATURE — cream panel, driven by real content
   The mockup's overlapping cream panel is now applied to the feature
   loop's own text block, so the headline and standfirst come from the
   post instead of being typed into the template. Empty placeholder
   boxes are gone with it.
   =================================================================== */

.sl-loop--feature .elementor-post{ display:block; position:relative; }
.sl-loop--feature .elementor-post__thumbnail{ aspect-ratio:4/3; }
.sl-loop--feature .elementor-post__text{
  background: var(--brand-cream);
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  margin: -14% 0 0 12%;
  position: relative; z-index: 2;
}
.sl-loop--feature .elementor-post__title{ margin:0 0 .75rem; }
.sl-loop--feature .elementor-post__title,
.sl-loop--feature .elementor-post__title a{
  font-family: var(--f-display); font-weight:400; line-height:1.05;
  font-size: clamp(2rem, 3.6vw, 3rem); color: var(--ink);
}
.sl-loop--feature .elementor-post__excerpt p{
  font-family: var(--f-editorial); font-size:1.1rem; line-height:1.6;
  color: var(--ink-2); margin:0;
}
/* ===================================================================
   PLACEHOLDER BLOCKS AWAITING ARTWORK
   The issue cover, retreat tiles and boutique tiles are fed by images
   nobody has chosen yet. Left at full size they dominate the page as
   blank rectangles, which reads as broken rather than unfinished. These
   hold a modest, labelled footprint until real artwork replaces them.
   =================================================================== */

[data-sl-placeholder]{
  background:
    repeating-linear-gradient(45deg, var(--surface) 0 10px, var(--surface-2) 10px 20px);
  border: 1px solid var(--rule);
  position: relative;
}
[data-sl-placeholder]::after{
  content: "Artwork to come";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-sans); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.sl-issue__cover{ aspect-ratio: 3/4; max-width: 240px; margin-inline: auto; }
.sl-issue__cover img[src=""]{ display:none; }
.sl-retreat__img{ aspect-ratio: 3/2; }
.sl-shop-cat__img{ aspect-ratio: 4/3; }
/* ===================================================================
   SCALE CORRECTION
   The mockup is a magazine page: a measured column of content with real
   air around it, modest images and fine type. Rendered full-bleed at
   1400px+ every element came out roughly twice its intended size — the
   hero alone filled a viewport. This pass restores the mockup's
   proportions. It is last in the file deliberately, so it wins.
   =================================================================== */

/* The page is a measured column, not edge-to-edge. Only the band bleeds. */
.elementor-template-full-width .elementor-section.elementor-section-boxed
  > .elementor-container{
  max-width: 1180px;
  padding-inline: 32px;
}
/* ---- hero: modest, not a billboard ------------------------------- */
.sl-loop--feature .elementor-post__thumbnail{
  aspect-ratio: 3 / 2;
  max-height: 460px;
}
.sl-loop--feature .elementor-post__text{
  margin: -9% 0 0 8%;
  padding: 1.75rem 2rem;
  max-width: 30rem;
}
.sl-loop--feature .elementor-post__title,
.sl-loop--feature .elementor-post__title a{
  font-size: 1.9rem;
  line-height: 1.12;
}
.sl-loop--feature .elementor-post__excerpt p{ font-size: .95rem; line-height:1.55; }
/* ---- type scale: magazine, not billboard -------------------------- */
.sl-dept{ margin-block-end: 1.75rem; }
.sl-dept__title{ font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
.sl-dept__eyebrow, .sl-issue__eyebrow, .sl-letter__eyebrow{ font-size: .625rem; }
.sl-dept__link{ font-size: .6875rem; margin-block-start: .7rem; }
.sl-issue__title, .sl-letter__title{ font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
.sl-issue__blurb, .sl-letter__blurb{ font-size: .95rem; }
.sl-retreat__place{ font-size: 1.05rem; }
.sl-retreat__date{ font-size: .625rem; }
.sl-shop-cat h3{ font-size: .95rem; }
.sl-retreats{ gap: 1.5rem; }
.sl-retreats__note{ font-size: .95rem; margin-block-start: 1.5rem; }
/* ---- tighter vertical rhythm ------------------------------------- */
.elementor-template-full-width .elementor-section{ --sl-pad: clamp(2rem, 3.4vw, 3.25rem); }
.sl-issue__cover{ max-width: 190px; }
.sl-ad-slot--lb{ min-height: 90px; max-width: 728px; margin-inline: auto; }
@media (max-width: 767px){
  .sl-loop--feature .elementor-post__text{ margin: 0; max-width: none; }
}
/* ===================================================================
   HERO + QUAD ROW — the mockup's actual structure
   The hero is one composition: photograph on the left, cream panel on
   the right, side by side. Beneath it sits a single row of four cards
   across the full measure. An earlier build had those four stacked in a
   sidebar beside the hero, which the mockup does not have.
   =================================================================== */

/* hero: image left, panel right */
.sl-loop--feature .elementor-post{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
.sl-loop--feature .elementor-post__thumbnail__link{ height:100%; margin:0; }
.sl-loop--feature .elementor-post__thumbnail{
  aspect-ratio: auto; height:100%; min-height:380px; max-height:480px;
}
.sl-loop--feature .elementor-post__text{
  background: var(--brand-cream);
  margin: 0;
  padding: clamp(2rem, 3.4vw, 3.25rem);
  max-width: none;
  display: grid; align-content: center;
}
.sl-loop--feature .elementor-post__title,
.sl-loop--feature .elementor-post__title a{
  font-family: var(--f-display); font-weight:400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height:1.08;
  color: var(--ink);
}
.sl-loop--feature .elementor-post__excerpt p{
  font-family: var(--f-editorial); font-size:1rem; line-height:1.6;
  color: var(--ink-2); margin:.75rem 0 0;
}
/* four across, beneath the hero */
.sl-loop--quad .elementor-post__thumbnail{ aspect-ratio: 4/3; max-height: 170px; }
.sl-loop--quad .elementor-post__title,
.sl-loop--quad .elementor-post__title a{ font-size:.95rem; line-height:1.3; }
.sl-loop--quad .elementor-post__excerpt p{
  font-family: var(--f-editorial); font-size:.85rem; line-height:1.5;
  color: var(--ink-3); margin:.35rem 0 0;
}
@media (max-width: 767px){
  .sl-loop--feature .elementor-post{ grid-template-columns: 1fr; }
.sl-loop--feature .elementor-post__thumbnail{ min-height:0; aspect-ratio:3/2; }
}

/* ===================================================================
   MOCKUP PARITY
   ===================================================================
   Two corrections against the approved comp:

   1. The hero panel is the pale sage-grey surface (#EFF1E9), not the
      cream (#FCF7D7). The cream belongs to the Subscribe button and
      the ad CTA only.

   2. The comp was rendered before the Adobe Fonts kit existed, so every
      face fell through to the fallback in its stack. What was approved
      is therefore Playfair Display / Cormorant Garamond / Pinyon Script
      / Jost / Libre Baskerville — NOT CoFo Raffine, Freight Big Pro,
      Altesse Std, Sofia Pro and Baskerville Display PT. These
      declarations put the approved faces first. Deleting this block
      returns the site to the licensed brand fonts; that is a brand
      decision, not a technical one.
   =================================================================== */

:root{
  --f-display:   "Playfair Display", "CoFo Raffine", Georgia, serif;
  --f-editorial: "Cormorant Garamond", "freight-big-pro", Georgia, serif;
  --f-script:    "Pinyon Script", "altesse-std-24pt", cursive;
  --f-sans:      "Jost", "sofia-pro", "Helvetica Neue", Arial, sans-serif;
  --f-body:      "Libre Baskerville", "baskerville-display-pt", Georgia, serif;
}

/* ---- hero panel: sage-grey, not cream ---------------------------- */
.sl-loop--feature .elementor-post__text,
.sl-hero__panel{ background: var(--surface); }

/* ---- masthead ----------------------------------------------------- */
.sl-wordmark{
  font-family: var(--f-display); font-weight:400;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height:1;
  text-align:center; color: var(--ink); margin:0;
}
.sl-wordmark a{ color:inherit; text-decoration:none; }
.sl-masthead__tag{
  font-family: var(--f-body); font-style:normal;
  font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink-3); text-align:center; max-width:32rem;
  margin:.9rem auto 0; line-height:1.7;
}

/* ---- nav: rules above and below, underlined active --------------- */
.sl-nav{ border-block:1px solid var(--rule); }
.sl-nav .elementor-nav-menu a.elementor-item{
  font-family: var(--f-sans); font-size:.8125rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  padding:1rem 1.1rem;
}
.sl-nav .elementor-nav-menu a.elementor-item.elementor-item-active{
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* ---- ad: label above the creative -------------------------------- */
.sl-ad-slot--lb{
  display:grid; gap:.85rem; background:none; border:0; min-height:0;
}
.sl-ad-slot__label{
  font-family: var(--f-sans); font-size:.6875rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  text-align:center;
}

/* ---- hero panel composition -------------------------------------- */
.sl-hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:stretch;
}
.sl-hero__figure{ margin:0; aspect-ratio:auto; height:100%; min-height:420px; }
.sl-hero__panel{
  position:relative; display:grid; align-content:center;
  padding: clamp(2rem,3.2vw,3rem) clamp(2rem,3.2vw,3rem) clamp(2rem,3.2vw,3rem) 4.5rem;
  margin:0;
}
/* the rotated rule running up the panel's left edge */
.sl-hero__rot{
  position:absolute; left:2rem; top:50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--f-sans); font-size:.6875rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3);
}
.sl-hero__kicker{
  font-family: var(--f-sans); font-size:.75rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 .5rem;
}
.sl-hero__title{ margin:0 0 1rem; font-family:var(--f-display); font-weight:400; }
.sl-hero__script{
  display:block; font-family:var(--f-script); font-weight:400;
  font-size: clamp(1.9rem,3vw,2.6rem); line-height:1;
  color: var(--accent-text); margin-bottom:.1em;
}
.sl-hero__display{
  display:block; font-size: clamp(2.6rem,4.6vw,4rem); line-height:.95;
  color: var(--ink);
}
.sl-hero__dek{
  font-family: var(--f-body); font-size:1rem; line-height:1.75;
  color: var(--ink-2); margin:0 0 1.25rem;
}

@media (max-width:767px){
  .sl-hero{ grid-template-columns:1fr; }
  .sl-hero__figure{ min-height:0; aspect-ratio:3/2; }
  .sl-hero__panel{ padding:2rem; }
  .sl-hero__rot{ display:none; }
}

/* ---- leaderboard creative ---------------------------------------- */
.sl-ad-creative{
  display:grid; align-content:center; gap:.2rem;
  max-width:728px; min-height:90px; margin-inline:auto;
  padding:1rem 1.25rem; text-decoration:none;
  background: var(--brand-forest); color: var(--on-dark);
  position:relative;
}
.sl-ad-creative__kicker{
  font-family:var(--f-sans); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-on-dark);
}
.sl-ad-creative__line{
  font-family:var(--f-display); font-size:1.35rem; color:var(--on-dark);
}
.sl-ad-creative__cta{
  position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  background: var(--brand-cream); color: var(--brand-forest);
  font-family:var(--f-sans); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.6rem 1.1rem;
}
.sl-hero__credit{
  font-family:var(--f-sans); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 1rem;
}
.sl-hero__cta{
  justify-self:start;
  font-family:var(--f-sans); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule-strong); padding-bottom:.25rem;
}
@media (max-width:600px){
  .sl-ad-creative__cta{ position:static; transform:none; justify-self:start; margin-top:.6rem; }
}

/* ===================================================================
   HEADER: FULL-BLEED BANDS
   The header sections already span the viewport, but Elementor boxes
   the .elementor-container inside them at 1248px — and the utility
   bar's green is painted on that inner element, so the colour stopped
   short while the section around it ran edge to edge. Releasing the
   container lets the band and the nav rules bleed, with their content
   re-centred to the same 1180px measure as the rest of the page.

   The selector is deliberately long: the full-width rule earlier in
   this file carries four classes and would otherwise win.
   =================================================================== */

.elementor-template-full-width .elementor-location-header
  .elementor-section.elementor-section-boxed > .elementor-container,
body .elementor-location-header
  .elementor-section.elementor-section-boxed > .elementor-container{
  max-width: none;
  padding-inline: 0;
}

.sl-utility__inner,
.sl-nav .elementor-nav-menu,
.sl-ad-slot--lb{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 32px;
}