/*
Theme Name:   Faith Founded
Theme URI:    https://faithfounded.com
Description:  Brand layer for Faith Founded, built as a child of Kadence. Christian wall art and journals for everyday faith. Kadence stays the parent, so its header builder, footer builder and block library keep working.
Author:       Faith Founded
Template:     kadence
Version:      1.4.5
License:      Proprietary
Text Domain:  faith-founded
*/

/* ==========================================================================
   Fonts are bundled in assets/fonts, so there is nothing to upload separately
   and nothing to break if the uploads folder is ever reorganised.

   Rewritten for the brand brief: one Christian lifestyle brand with two product
   categories, not a wall art shop that also sells journals.

   Palette is the brief's. Cream, white, charcoal and taupe carry the site.
   Blush and sage appear only against the journal covers, so the two categories
   never split into two brands.

   Silk Serif is a COMMERCIAL font by Rakel Tomas and it carries every heading.
   Confirm your licence covers webfont use before this goes live. Without it,
   headings fall back to Palatino.
   ========================================================================== */

@font-face{font-family:'Silk Serif';src:url('assets/fonts/silk-reg.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Silk Serif';src:url('assets/fonts/silk-med.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Silk Serif';src:url('assets/fonts/silk-medi.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'FF Sans';src:url('assets/fonts/dm-reg.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'FF Sans';src:url('assets/fonts/dm-med.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --ff-white:#FFFCF8;      /* page background            */
  --ff-cream:#F5F1EA;      /* alternating bands, footer  */
  --ff-charcoal:#37322E;   /* headings, buttons          */
  --ff-taupe:#C9B9AA;      /* rules, hairlines           */
  --ff-blush:#E5CED1;      /* journal accent, him        */
  --ff-sage:#CCD6C8;       /* journal accent, her        */
  --ff-body:#5F574F;       /* body copy      6.9:1       */
  --ff-muted:#6E655C;      /* eyebrows, captions 4.9:1 on cream */
  --ff-hair:rgba(55,50,46,.12);

  --ff-wrap:1180px;                    /* the measure content sits inside     */
  --ff-gutter:clamp(22px,6vw,72px);    /* side breathing room, scales down    */
  --ff-band:clamp(56px,7vw,104px);     /* vertical air above/below a section   */
  --ff-measure:690px;                  /* reading width, ~78 chars at 1.16rem  */

  --ff-serif:'Silk Serif',Palatino,'Palatino Linotype',Georgia,serif;
  --ff-sans:'FF Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

}

/* Kadence's own variables, repointed so the theme follows the same palette.
   Deliberately on :root:root with !important. Kadence writes its palette into
   an inline <style> in the head, and inline blocks can land after an enqueued
   stylesheet depending on plugin order and any CSS optimiser in front of it.
   Matching its specificity would make this a coin toss on load order, so this
   wins outright instead. */
:root:root{
  --global-palette1:#37322E !important;
  --global-palette2:#6E655C !important;
  --global-palette3:#37322E !important;
  --global-palette4:#5F574F !important;
  --global-palette5:#6E655C !important;
  --global-palette6:#C9B9AA !important;
  --global-palette7:#F5F1EA !important;
  --global-palette8:#F5F1EA !important;
  --global-palette9:#FFFCF8 !important;

  --global-heading-font-family:var(--ff-serif) !important;
  --global-body-font-family:var(--ff-sans) !important;
  --global-primary-nav-font-family:var(--ff-sans) !important;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body{
  background:var(--ff-white);
  color:var(--ff-body);
  font-family:var(--ff-sans);
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* Font, colour, and vertical proportion. Font SIZE stays in
   Customize > Typography so that panel keeps working and you can tune scale
   per breakpoint. Line-height and tracking live here instead: a display serif
   set at the browser default 1.5 reads as loose and unset no matter what size
   it is, so it belongs to the brand rather than to a site setting. */
h1,h2,h3,h4,h5,h6,
.entry-title,.widget-title{
  font-family:var(--ff-serif);
  color:var(--ff-charcoal);
  font-weight:400;
  text-wrap:balance;
}
/* Fluid scale, tuned between 375 and 1440. Each clamp is
   min at 375, a slope in vw, max at 1440, so a heading grows smoothly with the
   viewport instead of jumping at a breakpoint. Sizes are in px on purpose: rem
   would compound with the Customizer's base size and drift. */
h1,.entry-title{
  font-size:clamp(30px, 21.5px + 2.25vw, 54px);
  line-height:1.08;
  letter-spacing:-.015em;
}
h2{
  font-size:clamp(24px, 19px + 1.32vw, 38px);
  line-height:1.14;
  letter-spacing:-.012em;
}
h3{
  font-size:clamp(19px, 17.6px + 0.38vw, 23px);
  line-height:1.26;
  letter-spacing:-.006em;
}
h4{font-size:clamp(16.5px, 16px + 0.14vw, 18px);line-height:1.35}
h5,h6{font-size:1rem;line-height:1.35}
h4{text-transform:none}

a{color:var(--ff-charcoal)}
a:hover{color:var(--ff-body)}

.site-title{font-family:var(--ff-serif) !important;font-weight:500}
.custom-logo-link img,.site-header-item .custom-logo{max-height:24px;width:auto}
#colophon .custom-logo-link img{max-height:26px}

/* --------------------------------------------------------------------------
   3. Announcement bar
   Kadence: Customize > Header > Above Header Row. Put the text there and this
   styles it. It exists for Etsy buyers landing cold on the homepage.
   -------------------------------------------------------------------------- */
.site-top-header-wrap,
.site-above-header-wrap,
.site-header-upper-wrap > .site-top-header-wrap,
.kadence-sticky-header .site-top-header-wrap{
  background:var(--ff-charcoal) !important;
  border:0 !important;
}
.site-top-header-wrap .site-header-row-container-inner,
.site-above-header-wrap .site-header-row-container-inner{background:transparent !important}
.site-top-header-wrap *,
.site-above-header-wrap *{
  color:var(--ff-white) !important;
  font-size:.8rem;
  letter-spacing:.03em;
}

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.primary-menu-container > ul > li > a,
.header-navigation .menu > li > a{
  font-family:var(--ff-sans);
  font-size:.73rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ff-body);
  border-bottom:1px solid transparent;
}
.primary-menu-container > ul > li > a:hover,
.header-navigation .menu > li > a:hover,
.header-navigation .menu > li.current-menu-item > a{
  color:var(--ff-charcoal);
  border-bottom-color:var(--ff-taupe);
}
#main-header{border-bottom:1px solid var(--ff-hair)}

/* Header background. Kadence paints #masthead pure #ffffff and the row
   container inside it #fffcf8, so a slightly warmer panel sits inside a whiter
   bar and you see the seam down both sides. One colour at both levels.
   The announcement bar is excluded: it keeps its charcoal. */
#masthead.site-header,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .site-bottom-header-wrap .site-header-row-container-inner{
  background:var(--ff-white);
}

@media (max-width:1024px){
  /* Kadence gives the header 2rem gutters while the page content uses 22px, so
     the logo sat further in than everything below it. Match them. */
  #masthead .site-container{
    padding-inline:22px;
  }
  #masthead .site-branding{padding-block:14px}
  /* 200px of logo on a 375px screen is over half the width. */
  #masthead .site-branding a.brand img{max-width:150px}
}

/* --------------------------------------------------------------------------
   5. Buttons
   Charcoal primary, outlined secondary. Deliberately not pink: the accent
   should never compete with the call to action.
   -------------------------------------------------------------------------- */
.wp-block-button__link,.kb-button,button,input[type="submit"],.button{
  font-family:var(--ff-sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--ff-charcoal);
  background:var(--ff-charcoal);
  color:var(--ff-white);
  border-radius:0;
  transition:background .2s ease,color .2s ease;
}
.wp-block-button__link:hover,.kb-button:hover,button:hover,
input[type="submit"]:hover,.button:hover{
  background:transparent;
  color:var(--ff-charcoal);
}
/* Match core's own specificity so the two buttons are the same object with a
   different fill, rather than two different shapes. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link{
  padding:15px 30px;
  border:1px solid var(--ff-charcoal);
  background:transparent;
  color:var(--ff-charcoal);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-radius:0;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link:hover{
  background:var(--ff-charcoal);
  color:var(--ff-white);
}

/* Kadence Blocks paints buttons from a palette slot at a higher specificity
   than the base button rule, so those blocks ignored section 5 entirely. This
   catches them. A button given a literal hex in the editor still wins over
   this by design: that is a deliberate choice, not a leftover. */
.wp-block-kadence-advancedbtn .kb-button,
.kb-btns-wrap .kb-button,
.kt-blocks-info-box-link-wrap .kt-blocks-info-box-learnmore{
  background-color:var(--ff-charcoal);
  color:var(--ff-white);
  border-color:var(--ff-charcoal);
}
.wp-block-kadence-advancedbtn .kb-button:hover,
.kb-btns-wrap .kb-button:hover{
  background-color:transparent;
  color:var(--ff-charcoal);
}

/* Kadence ADVANCED Form block (wp-block-kadence-advanced-form / .kb-advanced-form).
   Not the classic Form block, which uses .kb-form and .kb-forms-submit and is a
   different set of classes entirely.

   Kadence writes per-block CSS scoped by a generated id class, e.g.
   ".wp-block-kadence-advanced-form7949-cpt-id .kb-advanced-form input[type=text]",
   which is (0,3,1). These lead with .entry-content to reach (0,4,1) and win.

   Anything set explicitly in the block's own Style tab will still beat this, and
   that is the right place to make one-off changes. This is the default so a form
   dropped on any page already matches the site. */

.entry-content .wp-block-kadence-advanced-form .kb-advanced-form input[type="text"],
.entry-content .wp-block-kadence-advanced-form .kb-advanced-form input[type="email"],
.entry-content .wp-block-kadence-advanced-form .kb-advanced-form input[type="tel"],
.entry-content .wp-block-kadence-advanced-form .kb-advanced-form textarea,
.entry-content .kb-advanced-form .kb-field{
  font-family:var(--ff-sans);
  font-size:.95rem;
  color:var(--ff-body);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ff-taupe);
  border-radius:0;
  padding:12px 2px;
}
.entry-content .kb-advanced-form .kb-field:focus{
  outline:none;
  border-bottom-color:var(--ff-charcoal);
  box-shadow:none;
}
.entry-content .kb-advanced-form .kb-field::placeholder{color:var(--ff-muted);opacity:1}

/* Floating and standard labels both land on this class. */
.entry-content .kb-advanced-form .kb-adv-form-label{
  font-family:var(--ff-sans);
  font-size:.9rem;
  color:var(--ff-muted);
}
.entry-content .kb-advanced-form .kb-adv-form-label .kb-adv-form-required{color:var(--ff-body)}

/* Submit. Kadence's advanced form uses .kb-button, so the site button rules in
   section 5 never reached it: rounded corners, its own tracking, its own size. */
.entry-content .wp-block-kadence-advanced-form .kb-advanced-form .kb-button,
.entry-content .kb-advanced-form .kb-submit-field .kb-button,
.entry-content .kb-adv-form-submit-action .kb-button{
  font-family:var(--ff-sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--ff-charcoal);
  border-radius:0;
  background:var(--ff-charcoal);
  color:var(--ff-white);
  transition:background .2s ease,color .2s ease;
}
.entry-content .wp-block-kadence-advanced-form .kb-advanced-form .kb-button:hover,
.entry-content .kb-advanced-form .kb-submit-field .kb-button:hover{
  background:transparent;
  color:var(--ff-charcoal);
}

/* Give the fields and the button the same rhythm as the rest of a section. */
.entry-content .kb-advanced-form .kb-submit-field{margin-top:8px}

/* --------------------------------------------------------------------------
   6. Reusable pieces
   Add as "Additional CSS class(es)" on any block.
   -------------------------------------------------------------------------- */

/* ff-eyebrow — small uppercase label above a heading */
.ff-eyebrow,.ff-eyebrow p{
  font-family:var(--ff-sans);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ff-muted);
  margin-bottom:0;
}
/* the one pink on the page: a short blush rule under a section eyebrow */
.ff-eyebrow::after{
  content:"";display:block;width:34px;height:2px;
  background:var(--ff-blush);margin-top:12px;
}
/* A centred eyebrow needs its rule centred too. text-align can't do this:
   the rule is a block box with a fixed width, so it needs auto margins. */
.ff-eyebrow.has-text-align-center::after{margin-inline:auto}
.ff-eyebrow.has-text-align-right::after{margin-inline-start:auto}

/* Centring an eyebrow.
   The accent rule under it is a block box with a fixed width, so text-align
   alone never moves it; it needs auto inline margins. The hard part is knowing
   WHEN to centre, and there is no CSS that reads a computed text-align. So this
   covers every way a centred eyebrow can actually occur, rather than assuming
   one. Any single one of these firing is enough.

     1  ff-center            explicit, put it on the paragraph
     2  has-text-align-center  the editor's own alignment control
     3  followed by a centred heading   container-agnostic, survives Kadence
                                        Row Layout, core Group, anything
     4  sitting inside a centred container
*/
.ff-center,
.ff-eyebrow.has-text-align-center,
.ff-eyebrow:has(+ :is(h1,h2,h3,h4,.wp-block-heading).has-text-align-center),
:has(> :is(h1,h2,h3,h4).has-text-align-center) > .ff-eyebrow,
.has-text-align-center > .ff-eyebrow,
[style*="text-align: center"] > .ff-eyebrow,
[style*="text-align:center"] > .ff-eyebrow{
  text-align:center;
}
.ff-center.ff-eyebrow::after,
.ff-center .ff-eyebrow::after,
.ff-eyebrow.has-text-align-center::after,
.ff-eyebrow:has(+ :is(h1,h2,h3,h4,.wp-block-heading).has-text-align-center)::after,
:has(> :is(h1,h2,h3,h4).has-text-align-center) > .ff-eyebrow::after,
.has-text-align-center > .ff-eyebrow::after,
[style*="text-align: center"] > .ff-eyebrow::after,
[style*="text-align:center"] > .ff-eyebrow::after{
  margin-inline:auto;
}
.ff-eyebrow.has-text-align-right::after{margin-inline-start:auto}

/* ff-band-cream — alternating section ground */
.ff-band-cream{background:var(--ff-cream)}

/* ff-sub — italic serif subtitle under a product title */
.ff-sub{
  font-family:var(--ff-serif);
  font-style:italic;
  font-weight:500;
  font-size:1.04rem;
  color:var(--ff-muted);
}

/* ff-card-him / ff-card-her — the product colour as a hairline, not a panel */
.ff-card-him h3,.ff-card-her h3{padding-top:18px;border-top:2px solid var(--ff-taupe)}
.ff-card-him h3{border-top-color:var(--ff-blush)}
.ff-card-her h3{border-top-color:var(--ff-sage)}

/* ff-go — the uppercase text link under a product card */
.ff-go a{
  font-family:var(--ff-sans);font-size:.7rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ff-charcoal);text-underline-offset:5px;
}

/* ff-lead — the sentence under a section heading. Wider than body copy would
   be, but capped so a centred lead doesn't stretch into an unreadable line. */
.ff-lead{
  font-size:1.06rem;
  line-height:1.7;
  color:var(--ff-body);
  max-width:62ch;
}
.ff-lead.has-text-align-center,
.has-text-align-center.ff-lead{margin-inline:auto}

/* ff-vcenter — on a feature column, so copy sits level with the photo beside
   it rather than at the top of a tall image. Applied to the row, not the
   column, because align-items belongs to the flex container. */
.entry-content .wp-block-columns:has(> .ff-vcenter){align-items:center}

/* ff-cta — the closing section. More air than a normal band and a short
   measure, so the last thing on the page is one clear sentence. */
/* The closing call to action centres itself rather than relying on auto margins
   inside whatever containing block it lands in. On a page that isn't set to
   Fullwidth the band and its children end up different widths, so the heading
   and the buttons each centre inside a different box and drift apart. A flex
   column takes the containing block out of the equation. */
.ff-cta{padding-block:clamp(64px,8vw,120px) !important}
/* WordPress wraps a constrained group's children in
   .wp-block-group__inner-container, so the heading and buttons are grandchildren
   of the band, not children. The centring has to be applied at whichever level
   actually holds them, hence both. */
.ff-cta,
.ff-cta > .wp-block-group__inner-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  /* Flex items do not collapse margins the way block children do, so the
     heading's 44px bottom and the buttons' 32px top were adding to 76 instead
     of collapsing to 44. One explicit gap, and the child margins zeroed below,
     makes the spacing a single number rather than an accident of two. */
  gap:34px;
}
.ff-cta > *,
.ff-cta > .wp-block-group__inner-container > *{width:100%}
.ff-cta h2{max-width:22ch;margin-inline:auto;text-align:center}
/* These have to outrank ".entry-content h2.has-text-align-center" (0,2,1) and
   ".entry-content .wp-block-buttons" (0,2,0), which is where the 44px and 32px
   come from. Without that the gap declared above simply adds to them. */
.entry-content .ff-cta h2,
.entry-content .ff-cta h2.has-text-align-center,
.entry-content .ff-cta h2.wp-block-heading{margin-block:0}
.entry-content .ff-cta .wp-block-buttons{margin-top:0}
.ff-cta .wp-block-buttons{
  margin-top:0;
  justify-content:center;
  width:auto;
}
/* The wrapper itself must not be capped short, or the content centres inside a
   narrower box than the band. */
.ff-cta > .wp-block-group__inner-container{max-width:none;width:100%}

/* ff-plate — the white label box sitting over the foot of a category image,
   carried over from the old homepage. The plate overlaps the photo rather than
   sitting under it, which is what makes it read as a label on the artwork
   instead of a caption beneath it. */
.ff-plate{position:relative}
.ff-plate .wp-block-image{margin-bottom:0}
.ff-plate .ff-plate-label{
  /* Absolute, not a negative margin. A white plate half-hanging off a white
     photo onto a white band is invisible for the half that hangs off, which
     reads as a clipped box. Seating it fully on the artwork means it reads the
     same on a white band or a cream one, and the column height stays equal to
     the image so the row still lines up. */
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:2;
  width:min(88%,270px);
  margin:0;
  padding:15px 16px;
  background:var(--ff-white);
  text-align:center;
  font-family:var(--ff-serif);
  font-size:1.02rem;
  line-height:1.3;
  color:var(--ff-charcoal);
  max-width:none;
}
.ff-plate .ff-plate-label a{
  color:inherit;
  text-decoration:none;
}
.ff-plate:hover .ff-plate-label{background:var(--ff-cream)}
.ff-plate .ff-plate-label,
.ff-plate .wp-block-image img{transition:background .2s ease,opacity .2s ease}
.ff-plate:hover .wp-block-image img{opacity:.94}

/* On a cream band the plate still has to read as white, so it keeps its own
   background rather than inheriting the section's. */
.ff-band-cream .ff-plate .ff-plate-label{background:var(--ff-white)}
.ff-band-cream .ff-plate:hover .ff-plate-label{background:#fff}

/* ff-stack — the hero's paired photos, ported from the prototype's .scene.
   The original, verbatim:

     .scene            position:relative; min-height:360px
     .scene img        position:absolute; box-shadow:0 20px 50px -22px rgba(55,50,46,.45)
     .scene .room      width:76%; top:0; right:0
     .scene .bk        width:46%; bottom:0; left:0; border:6px solid var(--white)

   Both photos are absolutely positioned, which is what lets them overlap while
   keeping their own natural proportions. The container carries the height.

   Put the class on the COLUMN. First image is the large one at the back, second
   is the small one in front. */
.ff-stack{
  position:relative;
  min-height:clamp(360px, 34vw, 470px);
}
.ff-stack .wp-block-image{margin:0}
.ff-stack .wp-block-image img{
  position:absolute;
  display:block;
  box-shadow:0 20px 50px -22px rgba(55,50,46,.45);
}
.ff-stack .wp-block-image:nth-of-type(1) img{
  width:76%;
  top:0;
  right:0;
}
.ff-stack .wp-block-image:nth-of-type(2) img{
  width:46%;
  bottom:0;
  left:0;
  border:6px solid var(--ff-white);
}

/* The hero caps image height for above-the-fold reasons. The stack sizes itself
   from its own container, so it opts out. */
.ff-hero .ff-stack .wp-block-image img,
.entry-content .ff-hero .wp-block-columns .ff-stack .wp-block-image img{
  max-height:none;
}

@media (max-width:781px){
  /* Two overlapping photos in a 375px column leaves neither readable, so the
     arrangement unwinds into normal flow with a small overlap kept. */
  /* Matching :nth-of-type on both, because a media query adds no specificity:
     without it the desktop "width:76%" keeps winning and the back photo sits at
     three quarters of an already narrow column. */
  .ff-stack{min-height:0}
  .ff-stack .wp-block-image:nth-of-type(1) img,
  .ff-stack .wp-block-image:nth-of-type(2) img{
    position:static;
    box-shadow:none;
  }
  .ff-stack .wp-block-image:nth-of-type(1) img{
    width:100%;
    top:auto;right:auto;
  }
  .ff-stack .wp-block-image:nth-of-type(2) img{
    /* 46% to match the desktop proportion, and a deeper pull so roughly two
       thirds of the front photo sits ON the back one. At a shallower overlap it
       hangs below and the pair reads as two separate images rather than one
       arrangement, while costing about 90px more page height. */
    width:46%;
    bottom:auto;left:auto;
    margin:-40% 0 0 auto;
    box-shadow:0 12px 30px -14px rgba(55,50,46,.45);
  }
}

/* ff-small — fine print */
.ff-small{font-size:.88rem;color:var(--ff-muted)}
.ff-small.has-text-align-center{text-align:center;margin-inline:auto}

/* ff-shot — square product image, keeps the two-up rows even */
.ff-shot img{width:100%;aspect-ratio:1;object-fit:cover}

/* --------------------------------------------------------------------------
   7. Posts and archives
   -------------------------------------------------------------------------- */
.entry-content{font-size:1.02rem;line-height:1.78}
/* Body copy gets a readable measure. The utility paragraphs must be exempt:
   an eyebrow is a <p>, and 68ch at its 0.66rem size computes to about 495px,
   which gave it a narrow left-sitting box. Its text then centred inside that
   box instead of inside the section, which looks exactly like centring that
   never took. */
/* Was 68ch, which sounds like 68 characters and isn't. The ch unit measures the
   "0" glyph, and 0 is far wider than the average letter in proportional text, so
   68ch rendered at about 104 characters per line. Using the same px measure as
   articles keeps prose readable wherever it appears and keeps one number in
   charge of it. Column layouts are already narrower than this, so they don't
   change. */
.entry-content p:not([class*="ff-"]){max-width:var(--ff-measure)}
.entry-content .ff-eyebrow{max-width:none}
.loop-entry{border:0;background:transparent}
.loop-entry .entry-title{font-size:1.3rem}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
#colophon,.site-footer-wrap{
  background:var(--ff-cream);
  color:var(--ff-body);
}
/* One hairline, on the outer element only. Putting it on both #colophon and
   .site-footer-wrap drew two rules a pixel apart, which reads as a shadow. */
#colophon{border-top:1px solid var(--ff-hair)}
#colophon,#colophon *,.site-footer-wrap{box-shadow:none}
/* Footer links. Kadence's footer controls emit colour AND typography scoped to
   its own row containers, so a bare "#colophon a" set the colour but left the
   size to Kadence, which is why these came out at body size with body leading.
   Matching Kadence's depth and adding an id takes both. */
#colophon .site-footer-row-container-inner .site-footer-section a,
#colophon .site-footer-section a,
#colophon .widget a,
#colophon a,
.site-footer-wrap .site-footer-section a{
  color:var(--ff-body);
  font-size:.92rem;
  line-height:1.5;
  letter-spacing:0;
}
#colophon .site-footer-row-container-inner .site-footer-section a:hover,
#colophon .site-footer-section a:hover,
#colophon .widget a:hover,
#colophon a:hover,
.site-footer-wrap .site-footer-section a:hover{color:var(--ff-charcoal)}
.site-info .kadence-theme-credit,
#colophon .powered-by-kadence{display:none}
/* Footer link columns. Widget lists arrive with browser default bullets and
   margins, which read as a document outline rather than a nav column. */
#colophon ul,.site-footer-wrap ul{list-style:none;margin:0;padding:0}
#colophon li,.site-footer-wrap li{margin:0 0 9px;line-height:1.5}
#colophon li:last-child,.site-footer-wrap li:last-child{margin-bottom:0}
#colophon a,.site-footer-wrap a{text-decoration:none}
#colophon a:hover,.site-footer-wrap a:hover{text-decoration:underline;text-underline-offset:4px}
#colophon .ff-foot-note,.site-footer-wrap .ff-foot-note{
  font-size:.9rem;line-height:1.7;color:var(--ff-muted);max-width:34ch;
}
/* First column mark. Carries a logo image when there is one, and falls back to
   the wordmark set in Silk Serif when there isn't. */
#colophon .ff-foot-mark,.site-footer-wrap .ff-foot-mark{
  font-family:var(--ff-serif);font-size:1.22rem;color:var(--ff-charcoal);
  margin:0 0 16px;letter-spacing:-.01em;line-height:1.2;
}
#colophon .ff-foot-mark img,.site-footer-wrap .ff-foot-mark img{
  height:26px;
  width:auto;
  max-width:100%;
  display:block;
}
/* The first column carries the wordmark and a sentence, so it gets more room
   than the three link columns. Matches the prototype's 1.6fr 1fr 1fr 1fr. */
#colophon .site-middle-footer-inner-wrap.site-footer-row-columns-4{
  grid-template-columns:1.6fr 1fr 1fr 1fr;
}

/* Bottom bar. A divider inside the content measure, then two columns pushed
   apart: copyright on the left, the licence line on the right. */
#colophon .site-bottom-footer-inner-wrap{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
  margin-top:52px;
  padding-top:22px;
  border-top:1px solid var(--ff-hair);
}
#colophon .site-footer-bottom-section-2{text-align:right}
@media (max-width:781px){
  #colophon .site-middle-footer-inner-wrap.site-footer-row-columns-4{grid-template-columns:1fr}
  #colophon .site-bottom-footer-inner-wrap{flex-direction:column;text-align:center}
  #colophon .site-footer-bottom-section-2{text-align:center}
}

/* Bottom row: the fine print sits quieter than the columns above it. */
#colophon .ff-foot-legal,.site-footer-wrap .ff-foot-legal{
  font-size:.82rem;color:var(--ff-muted);
}
/* A link inside the fine print is still fine print. Without this the general
   footer-link rule (#colophon a, 0.92rem) outranks .ff-foot-legal (0.82rem) and
   the links come out visibly larger than the sentence they sit in. */
/* Has to outrank the general footer-link rule above, which is (1,2,1). These
   lead with the same ancestor chain plus the utility class, giving (1,3,1). */
#colophon .site-footer-row-container-inner .site-footer-section .ff-foot-legal a,
#colophon .site-footer-row-container-inner .site-footer-section .ff-foot-note a,
#colophon .ff-foot-legal a,
#colophon .ff-foot-note a,
.site-footer-wrap .ff-foot-legal a{
  color:var(--ff-muted);
  font-size:inherit;
  line-height:inherit;
}
#colophon .site-footer-row-container-inner .site-footer-section .ff-foot-legal a:hover,
#colophon .ff-foot-legal a:hover{color:var(--ff-charcoal)}

#colophon h2,#colophon h3,#colophon h4,
.site-footer-wrap h2,.site-footer-wrap h3,.site-footer-wrap h4{
  font-family:var(--ff-sans);
  font-size:.68rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ff-charcoal);
  margin:0 0 15px;
}

/* --------------------------------------------------------------------------
   9. No boxes
   Kadence Info Box blocks ship with a 1px border on all four sides.
   -------------------------------------------------------------------------- */
[class*="kt-info-box"] .kt-blocks-info-box-link-wrap,
.kt-blocks-info-box-link-wrap,
.kt-info-box-inner-wrap,
.loop-entry,
.entry-content-wrap{
  border:0 !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------------------
   10. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--ff-charcoal);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* --------------------------------------------------------------------------
   11. Blog and archives
   Deliberately CSS, not template overrides. Kadence builds its archives through
   its own component system, so a child archive.php means reimplementing that
   loop and losing every Customize > Blog setting with it. Styling the markup
   Kadence already outputs keeps those panels working.
   -------------------------------------------------------------------------- */

/* the archive header */
.archive .page-title,
.blog .page-title,
.search .page-title{
  font-family:var(--ff-serif);
  font-weight:400;
  color:var(--ff-charcoal);
}
.archive-description,
.taxonomy-description{
  font-family:var(--ff-sans);
  color:var(--ff-body);
  max-width:60ch;
}

/* post cards: no boxes, no shadows, a hairline instead */
.loop-entry.content-bg,
.loop-entry{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0;
}
.grid-cols .loop-entry .entry-content-wrap{padding:22px 0 34px}
.loop-entry .entry-title{
  font-family:var(--ff-serif);
  font-weight:400;
  font-size:1.42rem;
  line-height:1.2;
}
.loop-entry .entry-title a{color:var(--ff-charcoal);text-decoration:none}
.loop-entry .entry-title a:hover{color:var(--ff-body)}
.loop-entry .entry-summary{color:var(--ff-body);font-size:.98rem}

/* the category / date line above each title */
.loop-entry .entry-taxonomies,
.loop-entry .entry-meta{
  font-family:var(--ff-sans);
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ff-muted);
}
.loop-entry .entry-taxonomies a,
.loop-entry .entry-meta a{color:var(--ff-muted);text-decoration:none}

/* featured images sit flush, square, so a mixed-ratio library still lines up */
.loop-entry .post-thumbnail img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* single post */
.single .entry-title{font-family:var(--ff-serif);font-weight:400}
.single .entry-content{font-size:1.04rem;line-height:1.8}
.single .entry-content h2,
.single .entry-content h3{margin-top:1.8em}
.single .entry-content p,
.single .entry-content ul,
.single .entry-content ol{max-width:68ch}
.single .entry-content blockquote{
  border-left:2px solid var(--ff-blush);
  padding-left:22px;
  font-family:var(--ff-serif);
  font-style:italic;
  font-size:1.24rem;
  color:var(--ff-charcoal);
}

/* pagination */
.navigation.pagination .page-numbers{
  font-family:var(--ff-sans);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ff-body);
  border-radius:0;
}
.navigation.pagination .page-numbers.current{
  background:var(--ff-charcoal);
  color:var(--ff-white);
}

/* sidebar, if the blog keeps one */
.primary-sidebar .widget-title{
  font-family:var(--ff-sans);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ff-charcoal);
}


/* --------------------------------------------------------------------------
   12. Layout and spacing

   Page Layout "Fullwidth" + Content Style "Unboxed" is what lets a cream band
   reach both edges of the screen. It also removes every scrap of container
   padding Kadence would otherwise supply, which is why sections were running
   edge to edge with the text pinned to the glass.

   So the band spans the viewport and the content inside it does not. The band
   carries the colour and the padding; a max-width on its children keeps the
   words in a readable measure.
   -------------------------------------------------------------------------- */

/* Full-bleed bands: colour to the edges, content in the middle. */
:is(.entry-content, .entry-content > *) > :is(.wp-block-group, .wp-block-cover).alignfull{
  padding:var(--ff-band) var(--ff-gutter);
  margin-block:0;
}
:is(.entry-content, .entry-content > *) > :is(.wp-block-group, .wp-block-cover).alignfull > *{
  max-width:var(--ff-wrap);
  margin-inline:auto;
}
/* ...except a lead, which keeps its own narrower measure. A centred sentence
   running the full 1180px is a hard line to read; 62ch is about 12 words.

   The auto margins have to come off, though. A left-aligned lead with a centred
   BOX sits indented from the heading above it, which is the single thing that
   makes a section look like it can't decide how it's aligned. Auto margins are
   restored only when the lead is actually centred. */
:is(.entry-content, .entry-content > *) > :is(.wp-block-group, .wp-block-cover).alignfull > .ff-lead{
  max-width:62ch;
  /* Siblings are 1180-wide boxes auto-centred inside the padding box, so their
     left edge sits (100% - 1180) / 2 in from it. A narrower lead has to repeat
     that offset by hand, otherwise margin-inline:0 flushes it to the padding
     edge and it hangs LEFT of the heading instead of right of it. */
  margin-inline:max(0px, calc((100% - var(--ff-wrap)) / 2)) auto;
}
:is(.entry-content, .entry-content > *) > :is(.wp-block-group, .wp-block-cover).alignfull > .ff-lead.has-text-align-center,
:is(.entry-content, .entry-content > *) > :is(.wp-block-group, .wp-block-cover).alignfull > .ff-lead.ff-center{
  margin-inline:auto;
}

/* Nothing gets to cross the gutter, whatever a block tries to do to itself. */
.entry-content .alignfull{overflow-x:clip}
.entry-content img{max-width:100%;height:auto}

/* Anything not deliberately full-width still needs its own gutters, because
   Unboxed took away the ones it used to inherit. */
.entry-content > *:not(.alignfull):not(.alignwide){
  max-width:var(--ff-wrap);
  margin-inline:auto;
  padding-inline:var(--ff-gutter);
}

/* Columns sat flush against each other at the default gap. */
.entry-content .wp-block-columns{
  gap:clamp(28px,4vw,64px);
  margin-bottom:0;
}
/* A four-up grid wants a tighter gutter than a two-up feature row. At the
   two-column gap the prints shrink to about 252px and the gaps read louder
   than the artwork. */
.entry-content .wp-block-columns:has(> :nth-child(4)){gap:clamp(14px,1.8vw,26px)}

/* Vertical rhythm inside a section. An eyebrow belongs to the heading under
   it, so it sits tight; the heading then opens up into the body copy. */
.entry-content .ff-eyebrow{margin-bottom:16px}
.entry-content h2{margin-top:0;margin-bottom:20px}
.entry-content h2.has-text-align-center{margin-bottom:44px}
.entry-content .ff-eyebrow.has-text-align-center{margin-bottom:20px}
.entry-content h3{margin-bottom:10px}
.entry-content .wp-block-buttons{margin-top:32px}
/* Core ships these, but a centred call to action is a layout decision the
   design depends on, so the theme states it rather than inheriting it. */
.entry-content .wp-block-buttons.is-content-justification-center{justify-content:center}
.entry-content .wp-block-buttons.is-content-justification-right{justify-content:flex-end}
.entry-content .ff-small{margin-top:28px}

/* Images shouldn't set the height of a section on their own. */
.entry-content .wp-block-image{margin-block:0}
.entry-content .wp-block-image img{
  width:100%;
  height:auto;
  display:block;
}

/* Image height caps. These are unconditional rather than hanging off a hand-added
   class, because a section whose photo sets its own height is the thing that
   pushes everything else off the screen. */
.entry-content .wp-block-columns .wp-block-image img{
  max-height:560px;
  object-fit:cover;
}
.entry-content .wp-block-columns .ff-shot img{max-height:440px}

/* The hero has one job: fit on one screen. */
.ff-hero{padding-block:clamp(40px,5vw,72px) !important}
.entry-content .ff-hero .wp-block-columns .wp-block-image img{max-height:480px}
.ff-hero h1{margin-top:0;margin-bottom:18px}
.ff-hero .wp-block-columns{align-items:center}

/* Two bands of the same colour touching would read as one section. Cream on
   cream collapses the gap; white on white gets a hairline instead, since the
   closing call to action still needs its own air above it. */
.ff-band-cream + .ff-band-cream{padding-top:0}
.entry-content > .wp-block-group.alignfull:not(.ff-band-cream)
  + .wp-block-group.alignfull:not(.ff-band-cream){
  border-top:1px solid var(--ff-hair);
}

@media (max-width:781px){
  /* Stacked columns need the gap back as vertical space, not horizontal. */
  .entry-content .wp-block-columns{gap:36px}

  /* Two buttons rarely fit side by side in a 330px column, so they stack. Left
     at their natural widths they stack unevenly, which looks like a mistake
     rather than a decision. Full width also gives a bigger tap target. */
  .entry-content .wp-block-buttons .wp-block-button,
  .entry-content .wp-block-buttons .wp-block-button__link{width:100%}
  .entry-content .wp-block-buttons{gap:10px}
  .entry-content .wp-block-columns .wp-block-image img,
  .entry-content .ff-hero .wp-block-columns .wp-block-image img,
  .entry-content .wp-block-columns .ff-shot img{max-height:380px}
}


/* A page built from full-bleed bands cannot sit inside Kadence's boxed content
   card. The card carries a shadow and rounded corners, which cut a visible line
   and two curved notches straight across bands that are meant to run edge to
   edge. That reads as a stray shadow at the foot of the page.

   Setting Content Style to Unboxed in the page sidebar is the real fix; this
   makes the page survive it either way. */
.content-bg:has(.entry-content > .alignfull),
.entry-content:has(> .alignfull){
  box-shadow:none;
  border-radius:0;
  background:transparent;
  padding-block:0;
}

/* The footer is cream. A cream band as the last thing on a page runs straight
   into it with only a hairline between, which looks like a shadow rather than
   a boundary. Close on white and the footer edge reads as intended. */
.entry-content > .wp-block-group.alignfull.ff-band-cream:last-child{
  padding-bottom:calc(var(--ff-band) + 8px);
}

/* --------------------------------------------------------------------------
   13. Single posts and pages

   The homepage is a page too, and it is built from full-bleed bands, so this
   cannot simply narrow every .entry-content. The :has() guard below gives a
   reading measure to ordinary content pages and leaves anything using
   alignfull blocks at full width.
   -------------------------------------------------------------------------- */

body.single-post .entry-content,
body.page .entry-content:not(:has(> .alignfull)):not(:has(> .alignwide)){
  max-width:var(--ff-measure);
  margin-inline:auto;
}

/* Section 12 gives every direct child of .entry-content its own gutter and a
   1180 cap, which is what a homepage built from bands needs. An article does
   not: the column is already narrow and centred, so that padding just pushed
   the body copy 72px right of its own headline. Reset it here. */
body.single-post .entry-content > *,
body.page .entry-content:not(:has(> .alignfull)):not(:has(> .alignwide)) > *{
  max-width:none;
  padding-inline:0;
  margin-inline:0;
}

/* --- the header above an article ---------------------------------------- */
.single-entry .entry-header,
.page .entry-header{
  max-width:var(--ff-measure);
  margin:0 auto 34px;
  text-align:left;
}
.entry-header .entry-title{
  font-family:var(--ff-serif);
  color:var(--ff-charcoal);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 16px;
}

/* The global h1 scale tops out at 54px, which is sized for a hero spanning a
   1180px band. Dropped into a 690px article column the same size wraps a normal
   title onto three lines and dwarfs the copy under it. Article titles get their
   own, smaller curve. */
body.single-post .entry-header .entry-title,
body.single .entry-header .entry-title,
body.page .entry-header .entry-title{
  font-size:clamp(28px, 22px + 1.55vw, 40px);
}

/* Category links read as the eyebrow does elsewhere on the site. */
.entry-taxonomies,
.entry-taxonomies a{
  font-family:var(--ff-sans);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ff-muted);
  text-decoration:none;
}
.entry-taxonomies{margin-bottom:14px}
.entry-taxonomies a:hover{color:var(--ff-charcoal)}

.entry-meta{
  font-family:var(--ff-sans);
  font-size:.82rem;
  color:var(--ff-muted);
}
.entry-meta a{color:var(--ff-muted);text-decoration:none}
.entry-meta a:hover{color:var(--ff-charcoal)}
.entry-meta .meta-label{letter-spacing:.02em}

/* --- the article body ---------------------------------------------------- */
/* Slightly larger than the homepage's body copy. An article is read straight
   through rather than scanned, and the measure below is narrow, so the type can
   afford the size. Together these land about 74 characters per line, inside the
   65 to 75 band. At the previous 1.05rem in a 760px column it was 99. */
.single-entry .entry-content,
.page .entry-content{font-size:1.16rem;line-height:1.75}

.entry-content h2{margin:2.2em 0 .6em}
.entry-content h3{margin:1.9em 0 .5em}
.entry-content h4{margin:1.7em 0 .45em}

/* An article heading sits in a 620px column, so it wants to be smaller than the
   same tag spanning a 1180px band. Scoped to real articles: without the guard
   this also resized every heading on the homepage. */
body.single-post .entry-content h2,
body.page .entry-content:not(:has(> .alignfull)):not(:has(> .alignwide)) h2{
  font-size:clamp(22px, 19px + 0.8vw, 30px);
}
body.single-post .entry-content h3,
body.page .entry-content:not(:has(> .alignfull)):not(:has(> .alignwide)) h3{
  font-size:clamp(18.5px, 17.5px + 0.28vw, 22px);
}
.entry-content h2:first-child,
.entry-content h3:first-child{margin-top:0}

.entry-content ul,.entry-content ol{margin:0 0 1.35em;padding-left:1.3em}
.entry-content li{margin-bottom:.55em}
.entry-content li::marker{color:var(--ff-taupe)}

.entry-content blockquote{
  margin:2em 0;
  padding:4px 0 4px 26px;
  border-left:2px solid var(--ff-blush);
  font-family:var(--ff-serif);
  font-style:italic;
  font-size:1.16rem;
  line-height:1.6;
  color:var(--ff-charcoal);
}
.entry-content blockquote p:last-child{margin-bottom:0}

.entry-content figure{margin:2em 0}
.entry-content figcaption{
  font-size:.84rem;color:var(--ff-muted);text-align:center;margin-top:10px;
}
.entry-content hr{border:0;border-top:1px solid var(--ff-hair);margin:2.6em 0}

/* Prose links only. Without the exclusions this rule (0,2,0) outranks the base
   button rule (0,1,0) and repaints every filled button's label charcoal, on a
   charcoal background. Buttons are links; they just aren't prose. */
.entry-content a:not(.wp-block-button__link):not(.kb-button):not(.ff-go a):not([class*="button"]){
  color:var(--ff-charcoal);
  text-underline-offset:3px;
}
.entry-content a:not(.wp-block-button__link):not(.kb-button):not([class*="button"]):hover{
  color:var(--ff-body);
}

.entry-content table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.95rem}
.entry-content th,.entry-content td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--ff-hair);
}
.entry-content th{
  font-family:var(--ff-sans);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ff-charcoal);
}

/* --- featured image ------------------------------------------------------ */
.post-thumbnail img{width:100%;height:auto;display:block}
.article-post-thumbnail{margin-bottom:38px}

/* --- what sits after the article ---------------------------------------- */
.entry-related,.comments-area,.post-navigation{
  max-width:var(--ff-measure);margin-inline:auto;
}
.entry-related{
  margin-top:64px;padding-top:40px;border-top:1px solid var(--ff-hair);
}
.entry-related .entry-related-title{
  font-family:var(--ff-sans);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ff-charcoal);
  margin-bottom:24px;
}
.entry-related .entry-title{font-size:1.1rem;line-height:1.35}
.comments-area{margin-top:56px;padding-top:40px;border-top:1px solid var(--ff-hair)}

/* --- the blog archive ---------------------------------------------------- */
.loop-entry .entry-title{font-family:var(--ff-serif);line-height:1.2}
.loop-entry .entry-taxonomies{margin-bottom:10px}
.loop-entry .entry-summary{color:var(--ff-body)}
.loop-entry .post-thumbnail img{width:100%;height:auto}

@media (max-width:781px){
  body.single-post .entry-content,
  .single-entry .entry-header,
  .page .entry-header,
  .entry-related,.comments-area{max-width:none}
  .entry-content h2{font-size:1.45rem;margin-top:1.9em}
  .entry-content h3{font-size:1.18rem}
  .entry-content blockquote{padding-left:18px;font-size:1.08rem}
}