/* ============================================================
   WILDERFOLK DESIGN SYSTEM, COMPONENTS
   Class hooks designed to attach to WordPress core blocks via
   the block "Additional CSS class(es)" field, so pages stay
   fully editable in the block editor while rendering on brand.
   ============================================================ */

/* ---------------- Base ---------------- */
.wf-body,
body.wf-scope{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.wf-scope h1,body.wf-scope h2,body.wf-scope h3,body.wf-scope h4{
  font-family:var(--font-display);
  color:var(--text-heading);
  line-height:var(--lh-snug);
  font-weight:var(--fw-bold);
  text-wrap:balance;
}
body.wf-scope h1{font-size:var(--fs-h1);text-transform:uppercase;letter-spacing:var(--ls-label);}
body.wf-scope h2{font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:var(--fw-semibold);}
body.wf-scope h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);}
body.wf-scope p{text-wrap:pretty;}
body.wf-scope a{color:var(--text-link);text-underline-offset:2px;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-out);}
body.wf-scope a:hover{color:var(--text-link-hover);}
body.wf-scope ::selection{background:var(--ochre-200);color:var(--duff-900);}
body.wf-scope :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* ---------------- Layout ---------------- */
.wf-section{
  padding-block:var(--section-y);
  padding-inline:var(--gutter);
}
/* Selector is doubled deliberately. Component rules like .wf-eyebrow and
   .wf-display set `margin:0`, which zeroes the side margins and defeats the
   auto-centring below at equal specificity. Doubling the class outranks them
   without resorting to !important on a layout property. */
.wf-section.wf-section > *{
  max-width:var(--container-max);
  margin-inline:auto;
}
.wf-section--tight{padding-block:clamp(32px,4.5vw,52px);}
.wf-section--flush{padding-block:0;}
.wf-section--inverse{background:var(--surface-inverse);color:var(--text-inverse);}
.wf-section--inverse h1,.wf-section--inverse h2,.wf-section--inverse h3{color:var(--paper-050);}
.wf-section--inverse p{color:var(--text-inverse-mut);}
.wf-section--inverse a:not(.wf-btn):not(.wp-block-button__link){color:var(--ochre-200) !important;}
.wf-section--inverse a:not(.wf-btn):not(.wp-block-button__link):hover{color:var(--paper-050) !important;}
.wf-fullbleed a:not(.wf-btn):not(.wp-block-button__link){color:var(--ochre-200) !important;}
.wf-capture a:not(.wf-btn):not(.wp-block-button__link){color:var(--ochre-200) !important;}
.wf-section--accent{background:var(--surface-accent);color:var(--text-inverse);}
.wf-section--sunken{background:var(--surface-sunken);}
.wf-section--paper{background:var(--surface-card);}
.wf-narrow.wf-narrow > *{max-width:760px;}
.wf-measure{max-width:var(--container-text);}
.wf-center{text-align:center;}
.wf-center .wf-measure{margin-inline:auto;}
/* Grids and full-width children inside a narrow section should still use the
   whole container, only prose is constrained to the reading measure. */
.wf-narrow.wf-narrow > .wf-grid,
.wf-narrow.wf-narrow > .wp-block-group{max-width:var(--container-max);}

/* Tan hairline rule used between movements */
.wf-rule{
  border:0;border-top:var(--border-1) solid var(--rule-color);
  max-width:var(--container-max);margin:0 auto;
}

/* ---------------- Typography helpers ---------------- */
.wf-eyebrow{
  font-family:var(--font-label);font-weight:var(--fw-semibold);
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-accent);
  margin:0 0 var(--space-3);
}
.wf-section--inverse .wf-eyebrow{color:var(--ochre-200);}
.wf-hero-title{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-hero);line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);text-transform:uppercase;
  margin:0;text-wrap:balance;
}
.wf-display{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-display);line-height:var(--lh-tight);
  text-transform:uppercase;margin:0;
}
.wf-lead{font-size:var(--fs-lg);line-height:var(--lh-body);max-width:58ch;}
.wf-quote{
  font-family:var(--font-script);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  line-height:1.15;text-transform:none;letter-spacing:0;color:var(--text-heading);
}
.wf-accent-line{font-family:var(--font-brush);color:var(--text-accent);text-transform:none;}
.wf-muted{color:var(--text-muted);}
.wf-small{font-size:var(--fs-sm);}

/* ---------------- Buttons (core block button styling) ---------------- */
.wf-btn .wp-block-button__link,
a.wf-btn{
  font-family:var(--font-label);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--ls-label);
  font-size:var(--fs-sm);line-height:1;
  padding:16px 26px;border-radius:var(--radius-md);
  border:var(--border-2) solid transparent;
  text-decoration:none;display:inline-block;
  transition:background-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
/* Colours are marked important: themes (and page builders) reset bare <a>
   colour with high specificity, which silently breaks button contrast. */
.wf-btn--accent .wp-block-button__link,a.wf-btn--accent{
  background:var(--action-accent-bg) !important;color:var(--action-accent-fg) !important;
}
.wf-btn--accent .wp-block-button__link:hover,a.wf-btn--accent:hover{
  background:var(--action-accent-bg-hover) !important;color:var(--paper-050) !important;
}
.wf-btn--primary .wp-block-button__link,a.wf-btn--primary{
  background:var(--action-primary-bg) !important;color:var(--action-primary-fg) !important;
}
.wf-btn--primary .wp-block-button__link:hover,a.wf-btn--primary:hover{
  background:var(--action-primary-bg-hover) !important;color:var(--paper-050) !important;
}
.wf-btn--outline .wp-block-button__link,a.wf-btn--outline{
  background:transparent !important;color:var(--paper-050) !important;
  border-color:var(--paper-050) !important;
}
.wf-btn--outline .wp-block-button__link:hover,a.wf-btn--outline:hover{
  background:var(--paper-050) !important;color:var(--pine-800) !important;
}
.wf-btn--ghost .wp-block-button__link,a.wf-btn--ghost{
  background:transparent !important;color:var(--action-ghost-fg) !important;
  border-color:var(--border-strong) !important;
}
.wf-btn--ghost .wp-block-button__link:hover,a.wf-btn--ghost:hover{
  background:var(--pine-700) !important;color:var(--paper-050) !important;
}
.wf-btn--sm .wp-block-button__link,a.wf-btn--sm{padding:11px 18px;font-size:var(--fs-xs);}

/* Text link with arrow, used on cards */
.wf-link{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);text-decoration:none;
  color:var(--text-accent);
}
.wf-link:hover{color:var(--candy-600);text-decoration:underline;}
.wf-link::after{content:" \2192";}

/* ---------------- Cards ---------------- */
.wf-card{
  background:var(--surface-card);
  border:var(--border-1) solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:var(--space-8);
  box-shadow:var(--shadow-xs);
  height:100%;
}
.wf-card h3{margin-top:0;}
.wf-card--numbered .wf-card-num{
  font-family:var(--font-display);font-size:3.25rem;line-height:.9;
  color:var(--candy-500);display:block;margin-bottom:var(--space-3);
}

/* Zone card, the four camping zones */
.wf-zone{
  background:var(--surface-card);
  border:var(--border-1) solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:var(--space-6);
  border-top:var(--border-2) solid var(--pine-700);
  height:100%;
}
.wf-zone--soon{opacity:.82;border-top-color:var(--bark-600);}
.wf-zone h3{margin:0 0 var(--space-2);}
.wf-zone-meta{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-xs);
  color:var(--text-muted);margin-top:var(--space-4);display:block;
}
.wf-badge{
  display:inline-block;font-family:var(--font-label);
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  font-size:11px;font-weight:var(--fw-semibold);
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--ochre-200);color:var(--duff-800);
}

/* ---------------- Site header ---------------- */
.wf-site-header{
  position:sticky;top:0;z-index:100;
  background:var(--pine-800);
  border-bottom:3px solid var(--ochre-500);
}
.wf-site-header .wf-header-inner{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-5) var(--gutter);
  display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;
}
.wf-wordmark{text-decoration:none !important;display:block;}
.wf-wordmark .wf-wordmark-name{
  display:block;
  font-family:var(--font-display);text-transform:uppercase;
  color:var(--paper-100) !important;font-size:26px;line-height:.9;letter-spacing:.02em;
}
.wf-wordmark .wf-wordmark-tag{
  display:block;
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.22em;font-size:9px;color:var(--ochre-200) !important;margin-top:6px;
}
.wf-nav{display:flex;gap:var(--space-6);margin-left:auto;align-items:center;flex-wrap:wrap;}
/* Block themes set link colour with `:root :where(a)`, which outranks a
   single class. Nav and footer links sit on dark ground, so losing that
   fight is a contrast failure, not a cosmetic one, hence important. */
.wf-navlink{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.1em;font-size:13px;color:var(--pine-100) !important;
  padding:4px 0;border-bottom:2px solid transparent;text-decoration:none !important;
  transition:color 140ms var(--ease-out),border-color 140ms var(--ease-out);
}
.wf-navlink:hover,.wf-navlink:focus-visible{color:var(--ochre-200) !important;border-bottom-color:var(--ochre-500);}
.wf-navlink[aria-current="page"]{color:var(--ochre-200) !important;border-bottom-color:var(--ochre-500);}

/* ---------------- Hero ---------------- */
.wf-hero{
  position:relative;min-height:clamp(420px,58vh,620px);
  display:flex;align-items:flex-end;overflow:hidden;
  background:var(--pine-800);
}
.wf-hero .wf-hero-media{position:absolute;inset:0;}
.wf-hero .wf-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
.wf-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,38,26,.35) 0%,rgba(22,38,26,.72) 100%);
  pointer-events:none;
}
.wf-hero .wf-hero-body{
  position:relative;z-index:2;
  max-width:var(--container-max);margin:0 auto;width:100%;
  padding:0 var(--gutter) clamp(36px,5vw,64px);
}
.wf-hero .wf-eyebrow{color:var(--ochre-200);}
.wf-hero .wf-hero-title{color:var(--paper-050);max-width:20ch;}
.wf-hero .wf-lead{color:var(--pine-100);margin-top:var(--space-5);}
.wf-hero-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;}

/* ---------------- Seasonal strip ---------------- */
.wf-strip{
  background:var(--pine-800);
  border-top:2px solid var(--ochre-500);
  border-bottom:2px solid var(--pine-900);
}
.wf-strip-inner{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-4) var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
}
.wf-strip-label{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);font-size:11px;color:var(--ochre-200);
}
.wf-strip-value{font-size:var(--fs-sm);line-height:1.3;color:var(--pine-100);margin-top:4px;}

/* ---------------- Grids ---------------- */
.wf-grid{display:grid;gap:var(--space-5);}
.wf-grid--2{grid-template-columns:repeat(2,1fr);}
.wf-grid--3{grid-template-columns:repeat(3,1fr);}
.wf-grid--4{grid-template-columns:repeat(4,1fr);}

/* ---------------- Email capture ---------------- */
.wf-capture{
  background:var(--pine-700);color:var(--text-inverse);
  border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,40px);
}
.wf-capture h2,.wf-capture h3{color:var(--paper-050);}
.wf-capture p{color:var(--pine-100);}
.wf-capture-form{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5);}
.wf-capture-form input[type=email]{
  flex:1 1 260px;min-width:0;
  font-family:var(--font-body);font-size:var(--fs-body);
  padding:15px 16px;border-radius:var(--radius-md);
  border:var(--border-1) solid var(--border-soft);
  background:var(--paper-050);color:var(--text-body);
}
.wf-capture-form input[type=email]::placeholder{color:var(--bark-600);}
.wf-capture-form button{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);padding:15px 26px;cursor:pointer;
  border:0;border-radius:var(--radius-md);
  background:var(--action-accent-bg);color:var(--action-accent-fg);
  transition:background-color var(--dur-base) var(--ease-out);
}
.wf-capture-form button:hover{background:var(--action-accent-bg-hover);}
.wf-capture-note{font-size:var(--fs-xs);color:var(--pine-200);margin-top:var(--space-3);}

/* Sticky site-wide capture bar */
.wf-capture-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--pine-800);border-top:3px solid var(--ochre-500);
  padding:var(--space-3) var(--gutter);
  transform:translateY(110%);transition:transform 280ms var(--ease-out);
}
.wf-capture-bar.is-open{transform:translateY(0);}
.wf-capture-bar-inner{
  max-width:var(--container-max);margin:0 auto;
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
}
.wf-capture-bar-copy{color:var(--pine-100);font-size:var(--fs-sm);flex:1 1 260px;}
.wf-capture-bar-copy strong{color:var(--paper-050);}
.wf-capture-bar form{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.wf-capture-bar input[type=email]{
  font-family:var(--font-body);padding:11px 14px;border-radius:var(--radius-md);
  border:var(--border-1) solid var(--border-soft);background:var(--paper-050);
  color:var(--text-body);min-width:220px;
}
.wf-capture-bar button{
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:var(--ls-label);
  font-weight:var(--fw-semibold);font-size:var(--fs-xs);padding:11px 20px;
  border:0;border-radius:var(--radius-md);cursor:pointer;
  background:var(--action-accent-bg);color:var(--action-accent-fg);
}
.wf-capture-bar button:hover{background:var(--action-accent-bg-hover);}
.wf-capture-bar-close{
  background:none;border:0;color:var(--pine-200);cursor:pointer;
  font-size:22px;line-height:1;padding:4px 8px;
}
.wf-capture-bar-close:hover{color:var(--paper-050);}

/* ---------------- Testimonials ---------------- */
.wf-testimonial{
  background:var(--surface-card);
  border-left:var(--border-2) solid var(--candy-500);
  border-radius:var(--radius-sm);
  padding:var(--space-6) var(--space-8);
}
.wf-testimonial .wf-quote{margin:0 0 var(--space-4);}
.wf-testimonial cite{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-xs);
  font-style:normal;color:var(--text-muted);
}

/* ---------------- Footer ---------------- */
.wf-site-footer{
  background:var(--pine-900);color:var(--text-inverse-mut);
  border-top:3px solid var(--ochre-500);
  padding:var(--space-16) var(--gutter) var(--space-10);
}
.wf-site-footer-inner{max-width:var(--container-max);margin:0 auto;}
.wf-site-footer h2,.wf-site-footer h3{color:var(--paper-050);}
.wf-footer-tagline{
  font-family:var(--font-label);font-weight:var(--fw-bold,700);text-transform:uppercase;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);
  color:var(--paper-050);letter-spacing:.06em;margin:0 0 var(--space-2);
}
.wf-footlink{
  color:var(--pine-100) !important;font-family:var(--font-body);
  font-size:var(--fs-sm);text-decoration:none !important;display:block;padding:3px 0;
}
.wf-footlink:hover{color:var(--ochre-200) !important;text-decoration:underline !important;}
.wf-footer-colhead{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);font-size:var(--fs-xs);
  color:var(--ochre-200);margin:0 0 var(--space-3);
}
.wf-footer-legal{
  border-top:var(--border-1) solid var(--pine-700);
  margin-top:var(--space-10);padding-top:var(--space-5);
  font-size:var(--fs-xs);color:var(--pine-300);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
}

/* ---------------- Media ---------------- */
.wf-figure{margin:0;}
.wf-figure img{width:100%;height:auto;display:block;border-radius:var(--radius-md);}
.wf-figure figcaption{
  font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--space-2);
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:var(--ls-label);
}
.wf-fullbleed{
  position:relative;min-height:clamp(320px,44vh,480px);
  display:flex;align-items:center;overflow:hidden;background:var(--pine-800);
}
.wf-fullbleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.wf-fullbleed::after{content:"";position:absolute;inset:0;background:rgba(22,38,26,.55);}
.wf-fullbleed .wf-fullbleed-body{
  position:relative;z-index:2;max-width:var(--container-max);
  margin:0 auto;padding:var(--space-12) var(--gutter);width:100%;
}
.wf-fullbleed .wf-fullbleed-body h2{color:var(--paper-050);max-width:20ch;}
.wf-fullbleed .wf-fullbleed-body p{color:var(--pine-100);max-width:52ch;}

/* Placeholder for image slots not yet filled */
.wf-imgslot{
  display:flex;align-items:center;justify-content:center;
  min-height:280px;background:var(--pine-700);color:var(--pine-200);
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-xs);
  text-align:center;padding:var(--space-6);border-radius:var(--radius-md);
}
/* Inside a hero the placeholder fills the whole area, so pin its label to the
   top, centred, it collides with the headline and reads as broken copy. */
.wf-hero-media .wf-imgslot,
.wf-fullbleed > .wf-imgslot{align-items:flex-start;opacity:.55;}

/* Full-bleed wrapper emitted by the page builder. Block themes add their own
   padding to alignfull groups; the section inside owns its own spacing. */
.wf-bleed{padding:0 !important;}
.wf-bleed > .wp-block-group__inner-container{max-width:none;padding:0;}
.wp-block-group.alignfull.wf-section{padding-inline:var(--gutter);}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .wf-grid--3,.wf-grid--4{grid-template-columns:repeat(2,1fr);}
  .wf-strip-inner{grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
}
@media (max-width:640px){
  .wf-grid--2,.wf-grid--3,.wf-grid--4{grid-template-columns:1fr;}
  .wf-strip-inner{grid-template-columns:1fr;}
  .wf-site-header .wf-header-inner{gap:var(--space-4);padding-block:var(--space-4);}
  .wf-nav{gap:var(--space-4);width:100%;margin-left:0;}
  .wf-navlink{font-size:12px;}
  .wf-hero .wf-hero-title{max-width:none;}
  .wf-hero-actions .wf-btn,.wf-hero-actions a.wf-btn{width:100%;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .wf-capture-bar{transition:none;}
}

/* ---------------- Membership tiers ---------------- */
.wf-tiers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
  margin-top:var(--space-8);text-align:left;align-items:stretch;
}
.wf-tier{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface-card);
  border:var(--border-1) solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:var(--space-8);box-shadow:var(--shadow-xs);
}
.wf-tier--featured{
  border:var(--border-2) solid var(--pine-700);
  box-shadow:var(--shadow-md);
}
.wf-tier--featured .wf-badge{
  position:absolute;top:calc(var(--space-4) * -1);left:var(--space-8);
}
.wf-tier-name{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-accent);margin:0 0 var(--space-2);
}
.wf-tier-price{
  font-family:var(--font-display);font-size:3rem;line-height:1;
  color:var(--text-heading);margin:0 0 var(--space-3);
}
.wf-tier-cadence{
  font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--text-muted);margin-left:var(--space-2);
}
.wf-tier-pitch{
  font-size:var(--fs-body);color:var(--text-body);
  margin:0 0 var(--space-5);min-height:3em;
}
.wf-tier-list{
  list-style:none;padding:0;margin:0 0 var(--space-6);
  border-top:var(--border-1) solid var(--border-hair);flex:1;
}
.wf-tier-list li{
  position:relative;padding:var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom:var(--border-1) solid var(--border-hair);
  font-size:var(--fs-sm);line-height:1.45;
}
.wf-tier-list li::before{
  content:"";position:absolute;left:0;top:1.15em;
  width:8px;height:8px;border-radius:50%;background:var(--pine-400);
}
.wf-tier .wf-btn{align-self:flex-start;}

/* ---------------- Pricing table ---------------- */
.wf-table-wrap{overflow-x:auto;margin-top:var(--space-6);}
.wf-table{
  width:100%;border-collapse:collapse;font-size:var(--fs-sm);
  background:var(--surface-card);
  border:var(--border-1) solid var(--border-soft);
  border-radius:var(--radius-md);overflow:hidden;
}
.wf-table caption{caption-side:bottom;text-align:left;padding-top:var(--space-3);}
.wf-table th,.wf-table td{
  padding:var(--space-3) var(--space-4);text-align:left;
  border-bottom:var(--border-1) solid var(--border-hair);
}
.wf-table thead th{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-xs);
  background:var(--surface-sunken);color:var(--text-heading);
}
.wf-table tbody th{font-weight:var(--fw-bold);color:var(--text-heading);}
.wf-table tbody tr:last-child td,.wf-table tbody tr:last-child th{border-bottom:0;}

/* ---------------- Fine print ---------------- */
.wf-details{list-style:none;padding:0;margin:var(--space-6) 0 0;}
.wf-details li{
  position:relative;padding:var(--space-4) 0 var(--space-4) var(--space-6);
  border-bottom:var(--border-1) solid var(--border-hair);
  font-size:var(--fs-sm);line-height:1.55;color:var(--text-body);
}
.wf-details li::before{
  content:"";position:absolute;left:0;top:1.5em;
  width:10px;height:1px;background:var(--tan-400);
}

@media (max-width:900px){ .wf-tiers{grid-template-columns:1fr;} }

/* ---------------- Primary brand lockup ----------------
   The stacked colour lockup, used as a feature rather than a header mark.
   The artwork carries its own clear space (a quarter of the artwork height on
   every side), so no extra padding is added around the image, per the logo
   use guide, nothing should crop into that margin. */
.wf-brandmark{
  text-align:center;
  margin:0 auto var(--space-8);
  max-width:520px;
}
.wf-brandmark img{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
  margin:0 auto;
}
/* The tagline is set in Parkland Rounded, the wordmark's own face, so the
   lockup reads as one piece rather than two competing display fonts. */
.wf-brandline{
  font-family:var(--font-label);
  font-weight:var(--fw-bold,700);
  text-transform:uppercase;
  font-size:clamp(1.375rem,1.1rem + 1.3vw,2rem);
  letter-spacing:.08em;
  line-height:1;
  color:var(--text-heading);
  margin:var(--space-4) 0 0;
}
/* Same treatment where the tagline is a section heading rather than part of
   the logo lockup. Beats .wf-display on specificity. */
.wf-tagline.wf-tagline{
  font-family:var(--font-label);
  font-weight:var(--fw-bold,700);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.wf-section--inverse .wf-brandline,
.wf-fullbleed .wf-brandline{color:var(--paper-050);}

@media (max-width:640px){
  .wf-brandmark img{max-width:240px;}
}

/* ---------------- Header sizing (v1.1.0) ----------------
   More vertical room and a larger mark. The header was reading cramped at
   20px padding with a 40px lockup. */
.wf-site-header .wf-header-inner{
  padding-block:var(--space-8);
}
.wf-site-header .wf-wordmark img{height:52px !important;}
@media (max-width:640px){
  .wf-site-header .wf-header-inner{padding-block:var(--space-5);}
  .wf-site-header .wf-wordmark img{height:40px !important;}
}

/* ---------------- Product cards ---------------- */
.wf-product{
  background:var(--surface-card);
  border:var(--border-1) solid var(--border-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  box-shadow:var(--shadow-xs);
}
.wf-product-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--surface-sunken);}
.wf-product-media img{width:100%;height:100%;object-fit:cover;display:block;}
.wf-product-flag{
  position:absolute;top:var(--space-4);left:var(--space-4);
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);font-size:11px;font-weight:var(--fw-semibold);
  padding:6px 13px;border-radius:var(--radius-pill);
  background:var(--paper-050);color:var(--duff-800);
  box-shadow:var(--shadow-sm);
}
.wf-product-body{padding:var(--space-6);display:flex;flex-direction:column;flex:1;}
.wf-product-body h3{margin:0 0 var(--space-2);}
.wf-product-body p{margin:0 0 var(--space-4);font-size:var(--fs-sm);}
.wf-product-meta{
  margin-top:auto;padding-top:var(--space-4);
  border-top:var(--border-1) solid var(--border-hair);
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-xs);color:var(--text-muted);
}

/* ---------------- Class cards ---------------- */
.wf-class{
  background:var(--surface-card);
  border:var(--border-1) solid var(--border-soft);
  border-radius:var(--radius-md);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  box-shadow:var(--shadow-xs);
}
.wf-class-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunken);}
.wf-class-media img{width:100%;height:100%;object-fit:cover;display:block;}
.wf-class-flag{
  position:absolute;top:var(--space-3);right:var(--space-3);
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);font-size:10.5px;font-weight:var(--fw-semibold);
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--ochre-200);color:var(--duff-800);
}
.wf-class-body{padding:var(--space-6);display:flex;flex-direction:column;flex:1;}
.wf-class-body h3{margin:0 0 var(--space-2);}
.wf-class-body p{margin:0 0 var(--space-4);font-size:var(--fs-sm);}
.wf-class-facts{
  margin-top:auto;padding-top:var(--space-4);
  border-top:var(--border-1) solid var(--border-hair);
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);
}
.wf-class-facts span{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);font-size:var(--fs-xs);color:var(--text-muted);
}
.wf-class-facts b{color:var(--text-heading);font-weight:var(--fw-semibold);}

/* ---------------- Journal post cards ----------------
   Matches the Claude-design journal treatment: paper card, 16:10 image,
   rust category eyebrow, display-font title, byline in muted body type.
   Styles core query-loop output so posts stay editable as normal blocks. */
.wf-postgrid.wp-block-post-template{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  /* WP's flow-layout rule adds a top margin to every sibling after the first,
     which knocks cards 2 and 3 down and shortens them. Reset it and pin the
     row so all cards in a row are the same height. */
  align-items:stretch;
}
.wf-postgrid.wp-block-post-template > li.wp-block-post + li.wp-block-post,
.wf-postgrid.wp-block-post-template > li.wp-block-post{margin-block:0 !important;}
.wf-postgrid.wp-block-post-template > li.wp-block-post{
  background:var(--surface-card);
  border:var(--border-1) solid var(--border-hair);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.wf-postgrid > li.wp-block-post:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.wf-postgrid .wp-block-post-featured-image{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--surface-sunken);}
.wf-postgrid .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block;}
.wf-post-card-body{
  padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;text-align:left;
}
.wf-postgrid .wp-block-post-terms{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--text-accent);
  margin:0 0 10px;
}
.wf-postgrid .wp-block-post-terms a{color:var(--text-accent) !important;text-decoration:none !important;}
.wf-postgrid .wp-block-post-title{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:22px;line-height:1.08;letter-spacing:.02em;
  color:var(--text-heading);margin:0 0 8px;
}
.wf-postgrid .wp-block-post-title a{color:var(--text-heading) !important;text-decoration:none !important;}
.wf-postgrid .wp-block-post-title a:hover{color:var(--text-accent) !important;}
.wf-postgrid .wp-block-post-excerpt{margin:0;flex:1;}
.wf-postgrid .wp-block-post-excerpt__excerpt{
  font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--text-body);
}
.wf-postgrid .wp-block-post-excerpt__more-text{display:none;}
.wf-post-byline{
  font-family:var(--font-body);font-size:13px;color:var(--text-muted);
  margin:14px 0 0;display:flex;gap:6px;flex-wrap:wrap;
}
.wf-post-byline .wp-block-post-author-name,
.wf-post-byline .wp-block-post-date{font-size:13px;color:var(--text-muted);}
.wf-post-byline .wp-block-post-date a{color:var(--text-muted) !important;text-decoration:none !important;}

/* Pagination under the grid */
.wf-postgrid-nav{
  margin-top:var(--space-10);display:flex;justify-content:center;gap:var(--space-4);
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:var(--ls-label);
  font-size:var(--fs-xs);
}
.wf-postgrid-nav a{color:var(--text-link) !important;text-decoration:none !important;}
.wf-postgrid-nav a:hover{color:var(--text-accent) !important;}

@media (max-width:900px){ .wf-postgrid.wp-block-post-template{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .wf-postgrid.wp-block-post-template{grid-template-columns:1fr;} }