/*
Theme Name: Crochet Patterns Lab
Theme URI: https://crochetpatternslab.com
Description: Widget-first Hello Elementor child theme for crochetpatternslab.com. Header, footer and homepage dynamic sections are editable Elementor widgets; WordPress controls content, menus and category data.
Author: Crochet Patterns Lab
Template: hello-elementor
Version: 5.0.0
License: GNU General Public License v2 or later
Text Domain: crochetpatternslab
*/

/* ============================================================
   Crochet Patterns Lab — "Studio Yarn" prototype design system
   Direction 1: warm editorial craft. Terracotta + sage on paper.
   Fraunces (display) + Nunito Sans (body/UI).
   ============================================================ */

/* ---- Tokens ---- */
:root {
  --paper:      #FBF7F1;   /* page ground  */
  --paper-2:    #F6EEE3;   /* alt band     */
  --card:       #FFFDFA;   /* raised card  */
  --ink:        #2B2622;   /* primary text */
  --ink-2:      #6B5F55;   /* secondary — warm, tinted (not gray) */
  --ink-3:      #756A5C;   /* faint meta — darkened to ≥4.5:1 on paper/white */
  --terra:      #C96F4A;   /* primary accent (fills, large) */
  --terra-btn:  #BC5E39;   /* button ground (white passes ≥3:1) */
  --terra-ink:  #A5502F;   /* accent as TEXT on paper (≥4.5:1) */
  --terra-wash: #F7E7DE;   /* faint accent block */
  --sage:       #7C8A5A;   /* secondary accent */
  --sage-ink:   #5C6A3C;   /* sage as text */
  --sage-wash:  #EBEEE0;
  --blush:      #F3E1D6;
  --line:       #E7DDD1;   /* hairlines */
  --line-2:     #DACebc;
  --white:      #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(64,44,30,.06), 0 2px 6px rgba(64,44,30,.05);
  --shadow-md: 0 4px 10px rgba(64,44,30,.07), 0 12px 28px rgba(64,44,30,.09);
  --shadow-lg: 0 8px 18px rgba(64,44,30,.09), 0 26px 50px rgba(64,44,30,.12);

  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  1.5rem;
  --step-3:  clamp(1.6rem, 1.1rem + 2vw, 2.35rem);
  --step-4:  clamp(2.1rem, 1.3rem + 3.4vw, 3.4rem);
  --step-5:  clamp(2.6rem, 1.4rem + 5vw, 4rem);

  --measure: 40rem;          /* ~68ch reading measure */
  --wrap: 1200px;
  --gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* chain-stitch divider (terracotta) as reusable SVG */
  --chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 26 22'%3E%3Cellipse cx='13' cy='11' rx='11.5' ry='6' transform='rotate(-22 13 11)' fill='none' stroke='%23C96F4A' stroke-width='2.4'/%3E%3C/svg%3E");
  --chain-sage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 26 22'%3E%3Cellipse cx='13' cy='11' rx='11.5' ry='6' transform='rotate(-22 13 11)' fill='none' stroke='%237C8A5A' stroke-width='2.4'/%3E%3C/svg%3E");
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--terra-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; margin: 0; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; }

/* ---- Themed browser surfaces (craft-floor: theme what you didn't draw) ---- */
::selection { background: var(--terra); color: #fff; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 4px; }
html { accent-color: var(--terra); scrollbar-color: var(--line-2) var(--paper); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--paper); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #C4B29A; }
::marker { color: var(--terra); }

/* ---- Layout helpers ---- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, 46rem); margin-inline: auto; }
.band { padding-block: clamp(2.6rem, 1.5rem + 4vw, 4.6rem); }
.band--alt { background: var(--paper-2); }
.stack > * + * { margin-top: 1rem; }
.eyebrow-free { }

/* Chain-stitch divider element */
.chain-rule { height: 22px; background-image: var(--chain); background-repeat: repeat-x; background-position: center; background-size: 26px 22px; opacity: .9; }
.chain-rule--sage { background-image: var(--chain-sage); }
.chain-rule--short { width: 132px; }

/* ---- Icons ---- */
.i { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.i--lg { width: 1.6em; height: 1.6em; }

/* =========================================================
   Header
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--line); transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.nav { display: flex; align-items: center; gap: 1.25rem; height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 34px; height: 34px; color: var(--terra); }
.brand b { color: var(--terra-ink); font-weight: 600; }
.custom-logo-link { display:flex; align-items:center; margin-right:auto; text-decoration:none; line-height:1; }
.custom-logo-link .custom-logo { display:block; width:auto; height:auto; max-width:min(300px, 42vw); object-fit:contain; }
.site-header.is-overlay .custom-logo-link { filter:none; }

.nav-links { display: flex; gap: 1.35rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .96rem; padding: .35rem 0; position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--terra); transition: right .28s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.icon-btn:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.nav-toggle { display: none; }

.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-weight: 700; font-size: .96rem; line-height: 1; padding: .8rem 1.15rem; border-radius: var(--r-pill); border: 0; cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.btn--primary { background: var(--terra-btn); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #A5502F; color:#fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--terra); color: var(--terra-ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* =========================================================
   Hero (homepage)
   ========================================================= */
.hero { padding-block: clamp(2.2rem, 1rem + 4vw, 4rem) clamp(1.5rem,1rem + 2vw,2.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.hero h1 { font-size: var(--step-5); font-optical-sizing: auto; letter-spacing: -0.03em; }
.hero h1 em { font-style: italic; color: var(--terra-ink); }
.hero .lede { font-size: 1.2rem; color: var(--ink-2); max-width: 34ch; margin-top: 1rem; }
.hero-draw { margin: 1.1rem 0 1.5rem; }
.hero-draw path { stroke: var(--terra); stroke-width: 3; fill: none; stroke-linecap: round; }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-meta { margin-top: 1.4rem; color: var(--ink-3); font-size: var(--step--1); display:flex; gap:1.2rem; flex-wrap:wrap; }
.hero-meta b { color: var(--ink); }

/* Hero media — reserved for the crochet animation (user photo later) */
.hero-media { position: relative; }
.hero-media .frame { aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.anim-note { position: absolute; left: 14px; bottom: 14px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(4px); border:1px solid var(--line); border-radius: var(--r-pill); font-size:.78rem; font-weight:700; color: var(--ink-2); padding:.4rem .8rem; display:flex; gap:.4rem; align-items:center; }
.hero-media .badge-float { position:absolute; top:16px; right:16px; z-index:3; background: var(--sage); color:#fff; font-weight:800; font-size:.8rem; padding:.5rem .9rem; border-radius: var(--r-pill); box-shadow: var(--shadow-md); transform: rotate(3deg); }

/* =========================================================
   Media tiles = crochet swatch texture (placeholder for photos)
   ========================================================= */
.photo { position: relative; background-color: var(--sw-bg, var(--blush)); overflow: hidden; }
.photo::before {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 6px 5px, transparent 2.4px, var(--sw-st, #E7C7B5) 2.6px, var(--sw-st, #E7C7B5) 3.4px, transparent 3.6px);
  background-size: 22px 18px;
  background-position: 0 0, 11px 9px;
  opacity: .55;
  mix-blend-mode: multiply;
}
.photo::after {
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(58deg, transparent 0 9px, rgba(255,255,255,.10) 9px 10px),
    repeating-linear-gradient(-58deg, transparent 0 9px, rgba(80,50,30,.05) 9px 10px),
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(70,45,28,.14), transparent 55%);
}
.photo .ph-cap { position:absolute; left:12px; bottom:10px; z-index:2; font-size:.72rem; font-weight:700; letter-spacing:.02em; color: color-mix(in srgb, var(--ink) 72%, var(--sw-bg)); background: color-mix(in srgb, var(--card) 78%, transparent); padding:.25rem .55rem; border-radius:var(--r-pill); }
/* swatch palettes */
.sw-terra { --sw-bg:#EFC9B4; --sw-st:#D98A63; }
.sw-sage  { --sw-bg:#DFE4CC; --sw-st:#A9B587; }
.sw-blush { --sw-bg:#F3DCD0; --sw-st:#E0B39F; }
.sw-cream { --sw-bg:#F0E6D6; --sw-st:#D8C4A6; }
.sw-clay  { --sw-bg:#E7B79C; --sw-st:#C9764F; }
.sw-mist  { --sw-bg:#D6DCD8; --sw-st:#A7B3AC; }

/* =========================================================
   Pattern card (signature: chain-stitch top edge + yarn-tag chip)
   ========================================================= */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.p-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; display:flex; flex-direction:column; }
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.p-card .chain-top { height: 12px; background-image: var(--chain); background-size: 22px 12px; background-repeat: repeat-x; background-position: center; }
.p-card .media { aspect-ratio: 3/4; }         /* 2:3-ish, Pinterest-friendly */
.p-card .body { padding: 1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.p-card h3 { font-size: 1.24rem; }
.p-card h3 a { color: var(--ink); text-decoration: none; }
.p-card h3 a:hover { color: var(--terra-ink); }
.p-card .p-meta { margin-top:auto; display:flex; align-items:center; gap:.8rem; color: var(--ink-2); font-size: var(--step--1); font-weight:600; }
.p-card .p-meta .m { display:flex; align-items:center; gap:.32rem; }
.pin-btn { position:absolute; top:22px; right:12px; z-index:3; display:inline-flex; align-items:center; gap:.35rem; background: var(--card); color: var(--terra-ink); border:1px solid var(--line); border-radius: var(--r-pill); font-weight:800; font-size:.78rem; padding:.4rem .7rem; opacity:0; transform: translateY(-4px); transition: .2s; box-shadow: var(--shadow-sm); cursor:pointer; }
.p-card:hover .pin-btn, .p-card:focus-within .pin-btn { opacity:1; transform: translateY(0); }
.pin-btn:hover { color:#fff; background: var(--terra-btn); border-color: var(--terra-btn); }

/* difficulty / yarn tag chips */
.chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:800; letter-spacing:.02em; padding:.32rem .7rem; border-radius: var(--r-pill); text-transform: uppercase; }
.chip--easy { background: var(--sage-wash); color: var(--sage-ink); }
.chip--inter{ background: var(--terra-wash); color: var(--terra-ink); }
.chip--adv  { background: #EADFF0; color:#6A4A82; }
.chip-row { display:flex; gap:.5rem; flex-wrap:wrap; }

.dots { display:inline-flex; gap:3px; }
.dots i { width:7px; height:7px; border-radius:50%; background: var(--line-2); }
.dots i.on { background: var(--terra); }

/* section head */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom: 1.4rem; }
.sec-head h2 { font-size: var(--step-3); }
.sec-head p { color: var(--ink-2); margin:.3rem 0 0; }
.sec-head .link { font-weight:700; text-decoration:none; white-space:nowrap; display:inline-flex; gap:.3rem; align-items:center; }
.sec-head .link:hover { gap:.55rem; }

/* category chips */
.cat-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.cat-pill { display:inline-flex; align-items:center; gap:.5rem; background: var(--card); border:1px solid var(--line); border-radius: var(--r-pill); padding:.6rem 1rem; font-weight:700; color: var(--ink); text-decoration:none; font-size:.95rem; transition:.18s; }
.cat-pill:hover { border-color: var(--terra); color: var(--terra-ink); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cat-pill .i { color: var(--terra); }
.cat-pill .n { color: var(--ink-3); font-weight:700; }

/* collections band */
.coll-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); }
.coll { position:relative; border-radius: var(--r-lg); overflow:hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); text-decoration:none; display:block; }
.coll .media { position:absolute; inset:0; }
.coll .label { position:absolute; inset:auto 0 0 0; padding:1.4rem 1rem .9rem; background: linear-gradient(to top, rgba(43,38,34,.72), transparent); color:#fff; font-family: var(--font-display); font-weight:600; font-size:1.15rem; }
.coll .n { position:absolute; top:.8rem; left:.8rem; background: color-mix(in srgb, var(--card) 85%, transparent); color:var(--ink); font-weight:800; font-size:.75rem; padding:.25rem .6rem; border-radius:var(--r-pill); }
.coll:hover .media { transform: scale(1.05); }
.coll .media { transition: transform .4s ease; }

/* newsletter band */
.news { background: var(--terra-wash); border-radius: var(--r-lg); padding: clamp(1.6rem,1rem + 2.5vw,2.8rem); display:grid; grid-template-columns: 1.2fr 1fr; gap:2rem; align-items:center; border:1px solid var(--line); }
.news h2 { font-size: var(--step-3); }
.news p { color: var(--ink-2); margin:.4rem 0 0; }
.news form { display:flex; gap:.6rem; flex-wrap:wrap; }
.field { flex:1 1 12rem; }
.field input { width:100%; font-family: var(--font-body); font-size:1rem; padding:.85rem 1rem; border-radius: var(--r-pill); border:1px solid var(--line-2); background: var(--card); color:var(--ink); }
.field input::placeholder { color: var(--ink-3); }
.news small { display:block; margin-top:.7rem; color: var(--ink-3); font-size:.8rem; }

/* =========================================================
   Ad slots (monetization — designed in, labeled)
   ========================================================= */
.ad { --h: 250px; display:grid; place-items:center; text-align:center; background: repeating-linear-gradient(45deg, var(--paper-2) 0 12px, #F1E8DA 12px 24px); border:1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-3); min-height: var(--h); }
.ad span { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.ad--leader { --h: 120px; margin-block: 1.6rem; }
.ad--rect { --h: 300px; }
.ad--label::before { content:"Advertisement"; position:absolute; }

/* =========================================================
   Article / single post
   ========================================================= */
.post-head { padding-block: clamp(1.6rem,1rem + 2vw,2.6rem) 0; }
.breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.82rem; color: var(--ink-3); font-weight:700; list-style:none; padding:0; margin:0 0 1rem; flex-wrap:wrap; }
.breadcrumb a { color: var(--ink-2); text-decoration:none; }
.breadcrumb a:hover { color: var(--terra-ink); }
.breadcrumb .sep { color: var(--line-2); }
.post-title { font-size: var(--step-4); max-width: 20ch; }
.byline { display:flex; align-items:center; gap:1rem; margin-top:1.1rem; color: var(--ink-2); font-size:.92rem; flex-wrap:wrap; }
.byline .who { display:flex; align-items:center; gap:.6rem; }
.byline .av { width:40px; height:40px; border-radius:50%; }
.byline .dot { width:4px; height:4px; border-radius:50%; background: var(--line-2); }
.byline b { color: var(--ink); }

.article-layout { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(1.5rem,1rem + 3vw,3.5rem); align-items:start; padding-block: 2rem clamp(2.5rem,2rem + 3vw,4.5rem); }
.article { max-width: var(--measure); }
.article > * { margin-inline: 0; }
.article p, .article ul, .article ol { color: var(--ink); }
.article h2 { font-size: var(--step-2); margin: 2.2rem 0 .3rem; }
.article h2 + .chain-rule { margin-bottom: 1.2rem; }
.article h3 { font-size: 1.3rem; margin: 1.6rem 0 .5rem; }
.article figure { margin: 1.6rem 0; }
.article figure .media { aspect-ratio: 3/2; border-radius: var(--r); box-shadow: var(--shadow-sm); }
.article figcaption { font-size:.84rem; color: var(--ink-3); margin-top:.5rem; }
.lead { font-size: 1.22rem; line-height:1.65; color: var(--ink-2); }
.hero-figure .media { aspect-ratio: 16/10; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }

/* pattern card (recipe-style box) */
.pattern-box { background: var(--card); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow:hidden; margin: 1.8rem 0; }
.pattern-box .pb-top { background: var(--paper-2); padding: 1.1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.pattern-box .pb-top h2 { font-size: 1.4rem; margin:0; }
.pb-actions { display:flex; gap:.5rem; }
.pb-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line); }
.pb-stats .st { background: var(--card); padding: 1rem 1.1rem; }
.pb-stats .st .k { display:flex; align-items:center; gap:.4rem; color: var(--ink-3); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.pb-stats .st .k .i { color: var(--terra); }
.pb-stats .st .v { font-weight:800; margin-top:.35rem; color: var(--ink); font-size:1.02rem; }
.pb-body { padding: 1.2rem 1.3rem 1.4rem; }
.pb-body h4 { font-family: var(--font-body); font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-2); margin:0 0 .6rem; }
.mat-list { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.5rem; }
.mat-list li { display:flex; gap:.6rem; align-items:flex-start; }
.mat-list .i { color: var(--sage-ink); margin-top:.2rem; }
.abbr { display:grid; grid-template-columns: repeat(2,1fr); gap:.35rem .9rem; font-size:.9rem; color: var(--ink-2); }
.abbr b { color: var(--ink); }

/* steps */
.steps { list-style:none; counter-reset: s; padding:0; margin: 1rem 0 0; display:grid; gap: 1.1rem; }
.steps > li { display:grid; grid-template-columns: auto 1fr; gap: 1rem; align-items:start; }
.steps > li::before { counter-increment: s; content: counter(s); font-family: var(--font-display); font-weight:600; font-size:1.05rem; width:2.2rem; height:2.2rem; border-radius:50%; background: var(--terra-wash); color: var(--terra-ink); display:grid; place-items:center; }
.steps .row-label { font-weight:800; color: var(--sage-ink); font-size:.82rem; letter-spacing:.03em; }

.callout { background: var(--sage-wash); border:1px solid color-mix(in srgb, var(--sage) 30%, var(--line)); border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.6rem 0; }
.callout .h { display:flex; align-items:center; gap:.5rem; font-weight:800; color: var(--sage-ink); margin-bottom:.3rem; }
.callout .i { color: var(--sage-ink); }

/* pin-this tall image */
.pin-this { position:relative; max-width: 30rem; margin: 2rem auto; }
.pin-this .media { aspect-ratio: 2/3; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.pin-this .save { position:absolute; top:14px; right:14px; background: var(--terra-btn); color:#fff; border:0; border-radius:var(--r-pill); font-weight:800; padding:.55rem .9rem; display:flex; gap:.4rem; align-items:center; cursor:pointer; box-shadow: var(--shadow-md); }
.pin-this .cap { position:absolute; left:0; right:0; top:0; padding:1.3rem 1.2rem 2.4rem; font-family:var(--font-display); font-weight:600; font-size:1.7rem; line-height:1.15; color:#fff; text-align:center; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(to bottom, rgba(43,38,34,.62), rgba(43,38,34,.28) 55%, transparent); text-shadow:0 1px 8px rgba(43,38,34,.55); }

/* author bio */
.author { display:flex; gap:1.1rem; align-items:center; background: var(--card); border:1px solid var(--line); border-radius: var(--r-lg); padding:1.2rem; margin: 2rem 0; box-shadow: var(--shadow-sm); }
.author .av { width:66px; height:66px; border-radius:50%; flex:none; }
.author h4 { font-family:var(--font-display); font-size:1.15rem; margin:0 0 .2rem; }
.author p { margin:0; color: var(--ink-2); font-size:.94rem; }

/* =========================================================
   Sidebar
   ========================================================= */
.sidebar { display:flex; flex-direction:column; gap: 1.6rem; position: sticky; top: 88px; }
.side-card { background: var(--card); border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem; box-shadow: var(--shadow-sm); }
.side-card h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight:800; letter-spacing:.02em; margin-bottom: .9rem; display:flex; align-items:center; gap:.5rem; }
.side-card h3 .i { color: var(--terra); }
.mini { display:flex; gap:.8rem; align-items:center; padding:.55rem 0; border-top:1px solid var(--line); text-decoration:none; }
.mini:first-of-type { border-top:0; }
.mini .media { width:64px; height:74px; border-radius: var(--r-sm); flex:none; }
.mini > span:not(.media) { display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.mini .t { font-weight:700; color: var(--ink); font-size:.95rem; line-height:1.3; }
.mini .t:hover { color: var(--terra-ink); }
.mini .m { color: var(--ink-3); font-size:.8rem; margin-top:.2rem; }
.side-news { background: var(--sage-wash); border-color: color-mix(in srgb,var(--sage) 26%,var(--line)); }
.side-news input { width:100%; margin:.6rem 0; padding:.75rem .9rem; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--card); font-family:var(--font-body); }
.side-news .btn { width:100%; justify-content:center; }

/* =========================================================
   Archive header + toolbar + pagination
   ========================================================= */
.arch-head { background: var(--paper-2); border-bottom:1px solid var(--line); padding-block: clamp(2rem,1.4rem + 3vw,3.4rem); }
.arch-head .kick { color: var(--terra-ink); font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:.5rem; }
.arch-head h1 { font-size: var(--step-4); margin:.5rem 0 .6rem; }
.arch-head p { color: var(--ink-2); max-width: 58ch; margin:0; }
.arch-stats { display:flex; gap:1.5rem; margin-top:1.2rem; color: var(--ink-3); font-size:.88rem; font-weight:700; }
.arch-stats b { color: var(--ink); }

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom: 1.6rem; }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.filters button { font-family:var(--font-body); font-weight:700; font-size:.9rem; padding:.5rem .95rem; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters button:hover:not([aria-pressed="true"]) { border-color: var(--terra); color: var(--terra-ink); }
.sortby { display:flex; align-items:center; gap:.5rem; color:var(--ink-2); font-size:.9rem; font-weight:700; }
.sortby select { font-family:var(--font-body); font-weight:700; padding:.5rem 2rem .5rem .8rem; border-radius:var(--r-pill); border:1px solid var(--line-2); background: var(--card); color:var(--ink); }

.pagination { display:flex; gap:.4rem; justify-content:center; align-items:center; margin: 2.4rem 0 0; }
.pagination a, .pagination span { min-width:42px; height:42px; display:grid; place-items:center; border-radius: var(--r-sm); border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; font-weight:700; }
.pagination a:hover { border-color: var(--terra); color: var(--terra-ink); }
.pagination [aria-current] { background: var(--terra-btn); color:#fff; border-color: var(--terra-btn); }
.pagination .gap { border:0; background:none; }

/* empty state (craft-floor: real states) */
.empty { text-align:center; padding: 3rem 1rem; color: var(--ink-2); }
.empty .i { width:56px; height:56px; color: var(--line-2); margin:0 auto 1rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--ink); color: #E9E0D6; margin-top: clamp(2.5rem,2rem + 3vw,4.5rem); }
.site-footer a { color:#E9E0D6; text-decoration:none; }
.site-footer a:hover { color:#fff; }
.foot-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.4rem,2rem + 2vw,3.4rem); }
.foot-brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.3rem; color:#fff; margin-bottom:.8rem; }
.foot-brand .mark { color: var(--terra); width:32px;height:32px; }
.site-footer h4 { color:#fff; font-family:var(--font-body); font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .9rem; }
.foot-links { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:.94rem; }
.foot-p { color:#B8ABA0; font-size:.92rem; max-width:32ch; }
.socials { display:flex; gap:.5rem; margin-top:1rem; }
.socials a { width:40px;height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; }
.socials a:hover { background: var(--terra); border-color: var(--terra); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.12); padding-block:1.3rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:#B8ABA0; font-size:.86rem; }

/* =========================================================
   Motion — ONE authored moment: the chain-stitch draws in.
   ========================================================= */
.hero-draw path { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.hero.is-in .hero-draw path { animation: draw 1.5s cubic-bezier(.16,1,.3,1) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* gentle, non-competing rise for hero text */
.hero .rise { opacity:0; transform: translateY(14px); }
.hero.is-in .rise { animation: rise .8s cubic-bezier(.16,1,.3,1) forwards; }
.hero.is-in .rise:nth-child(2){ animation-delay:.06s; }
@keyframes rise { to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-draw path, .hero-stitch path { stroke-dashoffset: 0 !important; }
  .hero-photo { transform: none !important; }
  .hero .rise { opacity:1 !important; transform:none !important; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: row; flex-wrap:wrap; }
  .sidebar > * { flex:1 1 260px; }
  .coll-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order:-1; max-width: 26rem; }
  .card-grid { grid-template-columns: repeat(2,1fr); }
  .news { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pb-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .nav-links, .nav .btn.hide-sm { display:none; }
  .nav-toggle { display:inline-grid; }
  .card-grid { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .p-card h3 { font-size: 1.05rem; }
  .coll-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .sidebar { flex-direction: column; }
  .byline { font-size:.86rem; }
}
@media (max-width: 420px) {
  .card-grid { grid-template-columns: 1fr; }
  .coll-grid { grid-template-columns: 1fr; }
}

/* mobile nav sheet */
.m-nav { position: fixed; inset:0; z-index:100; background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(3px); opacity:0; pointer-events:none; transition:.2s; }
.m-nav[data-open="true"] { opacity:1; pointer-events:auto; }
.m-nav .sheet { position:absolute; top:0; right:0; bottom:0; width: min(84vw, 340px); background: var(--paper); padding: 1.2rem; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; gap:.4rem; }
.m-nav[data-open="true"] .sheet { transform:none; }
.m-nav a { padding:.9rem .6rem; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-weight:700; font-family:var(--font-display); font-size:1.2rem; }
.m-nav .close { align-self:flex-end; }
.mobile-nav-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mobile-nav-links li { margin:0; padding:0; }
.foot-logo { display:inline-flex; margin:0 0 .8rem; }
.foot-logo .custom-logo { max-height:48px; width:auto; }


@media print {
  .site-header, .site-footer, .sidebar, .ad, .pin-btn, .pb-actions, .hero-cta, .m-nav, .pin-this .save { display:none !important; }
  body { background:#fff; }
  .pattern-box { box-shadow:none; border:1.5px solid #999; }
  .article { max-width:none; }
}

/* =========================================================
   WordPress integration — real thumbnails fill .media boxes
   ========================================================= */
.p-card .media, .coll .media, .mini .media, .pin-this .media { position:relative; overflow:hidden; display:block; }
.p-card .media img, .coll .media img, .mini .media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
img.media { width:100%; height:auto; object-fit:cover; }
.hero-figure img.media { aspect-ratio:16/10; height:auto; }
.pin-this img.media { width:100%; }
.article img { border-radius: var(--r); }
.wp-caption { max-width:100%; }
.wp-caption-text, .article figcaption { font-size:.84rem; color: var(--ink-3); }
.alignright { float:right; margin:.4rem 0 1rem 1.4rem; }
.alignleft { float:left; margin:.4rem 1.4rem 1rem 0; }
.aligncenter { display:block; margin-inline:auto; }
.post-content > *:first-child { margin-top:0; }
/* Elementor: let our container width breathe, keep header/footer full-bleed */
.elementor-widget-container .btn { text-decoration:none; }

/* =========================================================
   About / Contact page components
   ========================================================= */
.two-col { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,1rem + 3vw,3.5rem); align-items:center; }
.two-col .media { aspect-ratio:4/3; border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.prose { max-width: 38rem; }
.prose h2 { font-size: var(--step-3); margin: 0 0 .3rem; }
.prose h2 + .chain-rule { margin-bottom: 1.1rem; }
.prose p { color: var(--ink); }

.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.value { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow-sm); }
.value .ic { width:52px; height:52px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--terra-wash); color:var(--terra-ink); margin-bottom:1rem; }
.value .ic .i { width:26px; height:26px; }
.value h3 { font-size:1.2rem; margin-bottom:.4rem; }
.value p { color:var(--ink-2); margin:0; font-size:.96rem; }

.author--lg { padding:1.6rem; gap:1.4rem; }
.author--lg .av { width:88px; height:88px; }
.author--lg h4 { font-size:1.35rem; }

.cta-band { background: var(--ink); color:#F3EBDF; border-radius:var(--r-lg); padding:clamp(1.8rem,1.4rem + 2.5vw,3rem); text-align:center; }
.cta-band h2 { color:#fff; font-size:var(--step-3); }
.cta-band p { color:#C9BBAC; margin:.4rem auto 1.4rem; max-width:46ch; }

.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,1rem + 3vw,3rem); align-items:start; }
.info-row { display:flex; gap:.9rem; align-items:flex-start; padding:1rem 0; border-top:1px solid var(--line); }
.info-row:first-child { border-top:0; padding-top:0; }
.info-row .ic { width:40px; height:40px; border-radius:var(--r-pill); background:var(--sage-wash); color:var(--sage-ink); display:grid; place-items:center; flex:none; }
.info-row b { display:block; color:var(--ink); }
.info-row span { color:var(--ink-2); font-size:.95rem; }
.contact-form { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow-sm); }
.contact-form label { display:block; font-weight:700; margin:.9rem 0 .35rem; font-size:.88rem; }
.contact-form label:first-child { margin-top:0; }
.contact-form input, .contact-form textarea { width:100%; padding:.8rem 1rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); font-family:var(--font-body); font-size:1rem; color:var(--ink); }
.contact-form textarea { min-height:130px; resize:vertical; }
.contact-form .btn { margin-top:1.1rem; width:100%; justify-content:center; }
.form-note { font-size:.8rem; color:var(--ink-3); margin-top:.7rem; }

@media (max-width: 860px) {
  .two-col, .contact-grid { grid-template-columns:1fr; }
  .two-col .media { order:-1; }
  .value-grid { grid-template-columns:1fr; }
}
/* =========================================================
   Full-bleed editorial hero — photo (LCP) + Ken Burns + scrim
   + chain-stitch draw-in along the bottom edge
   ========================================================= */
.hero--full { position:relative; height:calc(100svh - 68px); min-height:520px; max-height:1000px; padding:0; overflow:hidden; display:flex; align-items:flex-end; isolation:isolate; }
.hero-photo { width:100%; height:100%; object-fit:cover; object-position:center 44%; display:block; transform-origin:center; will-change:transform; animation: kenburns 12s ease-in-out infinite alternate; }
.hero--full .hero-photo { position:absolute; inset:0; z-index:0; }
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.03); } }

.hero-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(26,18,12,.92) 0%, rgba(26,18,12,.66) 26%, rgba(26,18,12,.20) 52%, transparent 74%),
    linear-gradient(to right, rgba(26,18,12,.62) 0%, rgba(26,18,12,.24) 40%, transparent 66%),
    linear-gradient(to bottom, rgba(26,18,12,.34) 0%, transparent 15%); }

.hero-overlay { position:relative; z-index:2; width:100%; padding-top:2rem; padding-bottom:clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero--full h1 { color:#fff; font-size:clamp(2.4rem, 1.1rem + 5.6vw, 4.7rem); line-height:1.04; letter-spacing:-.03em; max-width:17ch; text-shadow:0 2px 24px rgba(26,18,12,.4); }
.hero--full h1 em { font-style:italic; color:#F5EADF; }
.hero--full .lede { color:rgba(255,255,255,.92); font-size:clamp(1.05rem, .92rem + .7vw, 1.3rem); max-width:48ch; margin:1rem 0 1.7rem; text-shadow:0 1px 14px rgba(26,18,12,.5); }
.hero--full .hero-cta { display:flex; gap:.75rem; }
.hero--full .hero-cta .btn--primary { font-size:1.02rem; padding:.95rem 1.55rem; }

.hero-stitch { position:absolute; z-index:3; pointer-events:none; overflow:visible; }
.hero--full .hero-stitch { left:0; right:0; bottom:0; width:100%; height:26px; }
.hero-stitch path { fill:none; stroke:#F4E7DD; stroke-width:3.2; stroke-linecap:round; filter: drop-shadow(0 1px 4px rgba(26,18,12,.6)); stroke-dasharray:2600; stroke-dashoffset:2600; }
.hero.is-in .hero-stitch path { animation: heroStitch 2s cubic-bezier(.16,1,.3,1) .3s forwards; }
@keyframes heroStitch { to { stroke-dashoffset: 0; } }

/* Transparent header over the hero, fading to solid on scroll (JS-toggled).
   NOTE (WordPress): the live header is built in ElementsKit, so enable its
   built-in "Transparent header" option for the homepage to match this. */
.hero-overlay .hero--full { height:100svh; }
.site-header.is-overlay { position:fixed; left:0; right:0; top:0; background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.site-header.is-overlay .brand, .site-header.is-overlay .brand b, .site-header.is-overlay .nav-links a { color:#fff; text-shadow:0 1px 8px rgba(20,14,10,.55); transition: color .3s ease; }
.site-header.is-overlay .brand .mark { color:#fff; }
.site-header.is-overlay .nav-links a::after { background:#fff; }
.site-header.is-overlay .icon-btn { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }
.site-header.is-overlay.is-solid { background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.1) blur(8px); border-bottom-color: var(--line); }
.site-header.is-overlay.is-solid .brand, .site-header.is-overlay.is-solid .nav-links a { color: var(--ink); text-shadow:none; }
.site-header.is-overlay.is-solid .brand b { color: var(--terra-ink); }
.site-header.is-overlay.is-solid .brand .mark { color: var(--terra); }
.site-header.is-overlay.is-solid .nav-links a::after { background: var(--terra); }
.site-header.is-overlay.is-solid .icon-btn { background: var(--card); border-color: var(--line); color: var(--ink); }
/* =========================================================
   Blog cards — category chip, photo fillers, byline, meta
   ========================================================= */
.p-card .media, .mini .media, .coll .media, .article figure .media, .pin-this .media { position:relative; overflow:hidden; display:block; }
.p-card .media img, .mini .media img, .coll .media img, .article figure .media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
img.media { display:block; width:100%; object-fit:cover; }
.hero-figure img.media { aspect-ratio:16/10; height:auto; }
.pin-this img.media { width:100%; aspect-ratio:2/3; }

.chip--cat { text-transform:none; letter-spacing:0; background:var(--paper-2); color:var(--terra-ink); display:inline-flex; align-items:center; gap:.36rem; font-weight:800; }
.chip--cat .i { width:1em; height:1em; color:var(--terra); }

.p-card .p-meta { gap:.45rem; align-items:center; flex-wrap:wrap; }
.p-meta .sep { color:var(--line-2); }
.byline-sm { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--ink-3); font-weight:700; }
.byline-sm .av { width:22px; height:22px; border-radius:50%; flex:none; }

/* post header byline reuse for cards */
.card-date { color:var(--ink-2); }

/* =========================================================
   Elementor native-widget integration (brand styling)
   ========================================================= */
.elementor-heading-title { font-family: var(--font-display); color: var(--ink); letter-spacing: -.02em; line-height: 1.14; }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--step-3); }
.elementor-widget-heading h1.elementor-heading-title { font-size: var(--step-4); }
.elementor-widget-text-editor { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.elementor-widget-text-editor p { margin: 0 0 1em; }
.elementor-button { background-color: var(--terra-btn); color: #fff; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; padding: .85rem 1.5rem; box-shadow: var(--shadow-sm); transition: background .2s ease, transform .12s ease; }
.elementor-button:hover, .elementor-button:focus { background-color: #A5502F; color: #fff; transform: translateY(-1px); }
.elementor-widget-image img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: block; }
.elementor-icon-list-icon i, .elementor-icon-list-icon svg { color: var(--terra); }
.elementor-icon-list-item a, .elementor-icon-list-text { color: var(--ink); font-weight: 700; }
.elementor-icon-list-item a:hover { color: var(--terra-ink); }
/* inline icon-list = category pills */
.elementor-inline-items .elementor-icon-list-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .55rem 1rem; margin-right: .6rem; margin-bottom: .6rem; }
.elementor-inline-items .elementor-icon-list-item:hover { border-color: var(--terra); box-shadow: var(--shadow-sm); }
/* hero + dark CTA: light text */
.cpl-hero .elementor-container, .cpl-cta .elementor-container { text-align: left; }
.cpl-hero-title .elementor-heading-title { color: #fff; font-size: clamp(2.4rem, 1.1rem + 5.6vw, 4.7rem); line-height: 1.05; text-shadow: 0 2px 24px rgba(26,18,12,.4); max-width: 17ch; }
.cpl-hero-text .elementor-widget-container, .cpl-hero-text p { color: rgba(255,255,255,.92); max-width: 48ch; text-shadow: 0 1px 14px rgba(26,18,12,.45); }
.cpl-cta { text-align: center; }
.cpl-cta .elementor-container { text-align: center; }
.cpl-cta .cpl-hero-title .elementor-heading-title { color: #fff; text-shadow: none; margin-inline: auto; }
.cpl-cta .cpl-hero-text p { color: #C9BBAC; margin-inline: auto; }

/* =========================================================
   LIVE-SITE FIXES (v2.1) — header full-bleed/solid, hero, search
   These override earlier rules (later in the cascade) so they apply
   on a theme UPDATE without re-running the setup engine.
   ========================================================= */

/* 1 + 2. Header: full-bleed, solid, above Elementor stacking contexts */
.site-header {
  position: sticky; top: 0; left: 0; right: 0; width: 100%;
  z-index: 1000;
  background: var(--paper);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(64,44,30,.04);
}
.site-header .wrap.nav { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.site-header.is-overlay { position: fixed; background: transparent; border-bottom-color: transparent; box-shadow: none; }
.site-header.is-overlay.is-solid { position: fixed; background: var(--paper); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.m-nav { z-index: 1100; }

/* 3. Hero: full-bleed background, content boxed to 1200 + vertically centered, 100svh */
.cpl-hero { min-height: 100svh; padding-block: 0 !important; }
.cpl-hero > .elementor-container {
  min-height: 100svh;
  align-items: center;
  width: min(100% - 3rem, var(--wrap));
  margin-inline: auto;
}
@media (max-width: 900px) {
  .cpl-hero, .cpl-hero > .elementor-container { min-height: 86svh; }
}

/* 4. Header search overlay */
.site-search { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: .9rem 0; z-index: 1001; }
.site-search .wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: .6rem; }
.site-search .i { color: var(--terra); width: 1.4em; height: 1.4em; flex: none; }
.site-search input[type="search"] { flex: 1; font-family: var(--font-body); font-size: 1.05rem; padding: .7rem .9rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); color: var(--ink); }
.site-search input[type="search"]::placeholder { color: var(--ink-3); }
.site-search .btn { white-space: nowrap; }
.arch-search { display: flex; gap: .6rem; align-items: center; margin-top: 1.2rem; max-width: 34rem; }
.arch-search input[type="search"] { flex: 1; font-family: var(--font-body); font-size: 1.02rem; padding: .7rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); color: var(--ink); }
.arch-search input[type="search"]::placeholder { color: var(--ink-3); }

/* =========================================================
   5. ElementsKit Blog Posts widget → brand cards (.cpl-blog)
   Best-effort: targets the classes ElementsKit's Blog Posts widget
   commonly outputs. If a version differs, the [cpl_posts] shortcode
   gives pixel-exact cards (one-click swap in Elementor).
   ========================================================= */
.cpl-blog ul.elementskit-post-image-cards,
.cpl-blog .elementskit-post-image-cards,
.cpl-blog .ekit-blog-posts,
.cpl-blog .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.cpl-blog article,
.cpl-blog li.elementskit-post-image-card,
.cpl-blog .elementskit-single-blog,
.cpl-blog .ekit-blog-post-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; }
.cpl-blog article:hover, .cpl-blog li.elementskit-post-image-card:hover, .cpl-blog .ekit-blog-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* signature chain-stitch top edge */
.cpl-blog article::before,
.cpl-blog li.elementskit-post-image-card::before,
.cpl-blog .elementskit-single-blog::before,
.cpl-blog .ekit-blog-post-card::before { content: ""; display: block; height: 12px; background-image: var(--chain); background-size: 22px 12px; background-repeat: repeat-x; background-position: center; }
.cpl-blog img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.cpl-blog .elementskit-entry-header,
.cpl-blog .elementskit-post-body,
.cpl-blog .ekit-post--content { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.cpl-blog .elementskit-post-title,
.cpl-blog .entry-title,
.cpl-blog h2, .cpl-blog h3 { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.15; margin: 0; }
.cpl-blog .elementskit-post-title a, .cpl-blog .entry-title a, .cpl-blog h2 a, .cpl-blog h3 a { color: var(--ink); text-decoration: none; }
.cpl-blog .elementskit-post-title a:hover, .cpl-blog .entry-title a:hover { color: var(--terra-ink); }
/* category chip */
.cpl-blog .ekit-post-meta-categories a,
.cpl-blog .elementskit-post-cat a,
.cpl-blog [class*="categor"] a { display: inline-flex; align-items: center; background: var(--paper-2); color: var(--terra-ink); border-radius: var(--r-pill); padding: .3rem .7rem; font-size: .76rem; font-weight: 800; text-decoration: none; }
/* meta row: date · read time · author */
.cpl-blog .elementskit-post-meta,
.cpl-blog .ekit-post-meta,
.cpl-blog .elementskit-meta { color: var(--ink-3); font-size: .82rem; font-weight: 700; display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin-top: auto; }
.cpl-blog .elementskit-post-meta a, .cpl-blog .ekit-post-meta a { color: var(--ink-3); text-decoration: none; }
.cpl-blog .elementskit-post-meta i, .cpl-blog .ekit-post-meta i { color: var(--terra); }
@media (max-width: 860px) { .cpl-blog .elementskit-post-image-cards, .cpl-blog .ekit-blog-posts, .cpl-blog .row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cpl-blog .elementskit-post-image-cards, .cpl-blog .ekit-blog-posts, .cpl-blog .row { grid-template-columns: 1fr; } }


/* ============================================================
   v3.1 — native category image support only
   ============================================================ */
.arch-head-inner { display: block; }
.arch-head.has-image .arch-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.arch-head-image { margin: 0; }
.arch-head-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.arch-description p:first-child { margin-top: 0; }
.arch-description p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
  .arch-head.has-image .arch-head-inner { grid-template-columns: 1fr; }
  .arch-head-image { max-width: 680px; }
}

/* ============================================================
   v5 — widget-first header/footer + Elementor CPL widgets
   ============================================================ */
.cpl-widget-header { position: relative; z-index: 1000; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(64,44,30,.04); }
.cpl-widget-header .elementor-column { min-width: 0; }
.cpl-el-site-logo a { display: inline-block; line-height: 0; }
.cpl-el-site-logo img { height: auto; max-width: 100%; border-radius: 0; box-shadow: none; }
.cpl-el-site-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }

.cpl-el-menu { width: 100%; }
.cpl-el-menu ul { list-style: none; margin: 0; padding: 0; }
.cpl-el-menu a { text-decoration: none; transition: color .18s ease; }
.cpl-el-menu.is-horizontal > .cpl-el-menu-inner > ul { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.cpl-el-menu.is-vertical > .cpl-el-menu-inner > ul { display: flex; flex-direction: column; align-items: flex-start; }
.cpl-el-menu .sub-menu { padding-top: .4rem; }
.cpl-el-menu-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: .55rem .8rem; font: inherit; cursor: pointer; }
.cpl-el-empty { padding: .7rem; border: 1px dashed var(--line-2); color: var(--ink-3); font-size: .9rem; }

.cpl-el-category-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.cpl-el-category-links a { text-decoration: none; }
.cpl-el-category-links.is-chips a { display: inline-flex; align-items: center; padding: .48rem .82rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--sage); font-weight: 700; }
.cpl-el-category-links.is-chips a:hover { border-color: var(--terra); color: var(--terra-ink); }
.cpl-el-category-links.is-list { flex-direction: column; align-items: flex-start; gap: .65rem; }
.cpl-el-post-grid { display: grid; gap: var(--gap); }

.cpl-widget-footer .elementor-heading-title { color: #F7F0E8; }
.cpl-widget-footer .elementor-widget-text-editor, .cpl-widget-footer .elementor-widget-text-editor p { color: #C9BBAC; }
.cpl-widget-footer .cpl-el-site-logo img { filter: none; }
.cpl-widget-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }

@media (max-width: 1024px) {
  .cpl-el-menu.has-mobile-collapse .cpl-el-menu-toggle { display: inline-flex; align-items: center; gap: .45rem; }
  .cpl-el-menu.has-mobile-collapse .cpl-el-menu-inner { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: .9rem; z-index: 1200; }
  .cpl-el-menu.has-mobile-collapse.is-open .cpl-el-menu-inner { display: block; }
  .cpl-el-menu.has-mobile-collapse > .cpl-el-menu-inner > ul { display: flex; flex-direction: column; align-items: stretch; gap: .2rem !important; }
  .cpl-el-menu.has-mobile-collapse a { display: block; padding: .65rem .75rem; }
  .cpl-widget-header .elementor-column:nth-child(2) { position: static; }
}
@media (max-width: 767px) {
  .cpl-widget-header .elementor-row, .cpl-widget-header .elementor-container { flex-wrap: nowrap; align-items: center; }
  .cpl-widget-header .elementor-column:first-child { width: 70% !important; }
  .cpl-widget-header .elementor-column:nth-child(2) { width: 22% !important; }
  .cpl-widget-header .elementor-column:nth-child(3) { width: 8% !important; }
}