/* Weaving Intelligence — site theme. REUSES the Shabel Enterprises design system verbatim as its
   starting point (the whole token system, typography, frame gutters, light/dark, prose, feed, cards,
   buttons) minus the SE photo layer. This is the "reuse the SE theme to start" baseline; WI-specific
   brand decisions (palette, badging/logos, hero art) are deferred to the WI branding discussion and
   the visual-asset gate. Until then WI intentionally shares SE's LOCKED palette:
   gold #A6862C · charcoal #20211f · steel-teal #2C7A8C.
   The frame-gutter textures (../frame/SE_Frame_*) are the SE background art the owner asked to reuse
   (2026-07-19); they keep their SE_ filenames to make the shared provenance explicit.
   WI additions (brand-text wordmark placeholder + photo-free hero) are at the END of this file. */

/* ---- Self-hosted fonts (no dependency on installed system fonts) ----
   serif = Gelasio (metrics-compatible Georgia equivalent), sans = Source Sans 3; files in ../fonts/ */
@font-face{font-family:"Gelasio";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/gelasio-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Gelasio";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/gelasio-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Gelasio";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/gelasio-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Gelasio";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/gelasio-latin-700-italic.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2")}

:root{
  --font-serif:"Gelasio",Georgia,"Times New Roman",serif;
  --font-sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gold:#A6862C; --charcoal:#20211f; --teal:#2C7A8C;
  --bg:#f6f3ee; --surface:#fffdf9; --text:#26241f; --muted:#6a6459;
  --line:#e4ddd0;
  --hero-scrim:linear-gradient(90deg, rgba(20,19,17,.92) 0%, rgba(20,19,17,.68) 40%, rgba(20,19,17,.22) 66%, rgba(20,19,17,0) 84%);
  --cta-scrim:linear-gradient(270deg, rgba(20,19,17,.8) 0%, rgba(20,19,17,.5) 40%, rgba(20,19,17,0) 72%);
  --card-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --maxw:1120px;
}
html[data-theme="dark"]{
  --bg:#141513; --surface:#1c1e1b; --text:#ece7dc; --muted:#a49c8c;
  --line:#2c2e2a;
  --hero-scrim:linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 86%);
  --cta-scrim:linear-gradient(270deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.05) 74%);
  --card-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);
  line-height:1.6;transition:background .3s,color .3s;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
h1,h2,h3,.brand{font-family:var(--font-serif);letter-spacing:.2px;line-height:1.2}
a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* .wrap zeroes the vertical padding that section{padding:64px 0} would give — restore it on
   sections that are themselves .wrap (Who-We-Are, Why), so sections keep breathing room. */
section.wrap{padding-top:64px;padding-bottom:64px}

.btn{display:inline-block;padding:12px 22px;border-radius:4px;font-weight:600;font-size:.95rem;
  border:1.5px solid transparent;transition:.2s;cursor:pointer}
.btn-primary{background:var(--gold);color:#1a1710}
.btn-primary:hover{filter:brightness(1.06);text-decoration:none}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}

/* ---- frame gutters (desktop enhancement; collapse < maxw) ---- */
.gutter{position:fixed;top:0;bottom:0;width:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:repeat-y;display:none}
.gutter-left{left:0;background-image:url("../frame/SE_Frame_Weave_L_01.jpg");
  border-right:3px solid var(--gold)}
.gutter-right{right:0;background-image:url("../frame/SE_Frame_Circuit_R_01.jpg");
  border-left:3px solid var(--teal)}
@media(min-width:1121px){
  .gutter{display:block;width:calc((100vw - var(--maxw)) / 2)}
}
/* Ultrawide/4K: gutters fill the full margin from the screen edge to the content column
   (no width cap) so the frame reaches the screen edges. background-size:cover scales the frame
   art; if it looks stretched at extreme widths, switch to a tiled texture (background-repeat). */

/* ---- header ---- */
header.site-header{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:66px}
.brand{display:inline-flex;align-items:center;line-height:0;color:var(--text)}
.brand-mark{height:24px;width:auto;display:block}
.brand b{color:var(--gold)} .brand:hover{text-decoration:none}
.brand .env{font-family:var(--font-sans);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;color:var(--teal);border:1px solid var(--teal);border-radius:20px;
  padding:2px 7px;margin-left:8px;vertical-align:middle;text-transform:uppercase}
.site-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:.93rem}
.site-nav a{color:var(--muted)} .site-nav a:hover{color:var(--gold);text-decoration:none}
.site-nav .nav-current a{color:var(--gold)}
.toggle{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:20px;padding:6px 12px;font-size:.8rem;white-space:nowrap}
.nav-wrap{display:flex;align-items:center;gap:20px}
.menu-btn{display:none}

/* ---- home hero ---- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .imgbg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .scrim{position:absolute;inset:0;background:var(--hero-scrim)}
.hero .inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:56px 24px;width:100%}
.hero h1{font-size:2.7rem;max-width:640px;margin:0 0 18px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero p.lede{font-size:1.15rem;max-width:560px;margin:0 0 12px;color:#f2ede2}
.hero p.tag{font-style:italic;color:var(--gold);margin:0 0 26px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .cta-row .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}

/* ---- interior page hero ---- */
.page-hero{position:relative;min-height:300px;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden}
.page-hero .imgbg{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero .scrim{position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(20,19,17,.85) 0%, rgba(20,19,17,.4) 55%, rgba(20,19,17,.15) 100%)}
.page-hero .inner{position:relative;max-width:var(--maxw);margin:0 auto;
  padding:40px 24px 34px;width:100%}
.page-hero .eyebrow{color:var(--gold);font-size:.92rem;text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.7)}
.page-hero h1{font-size:2.7rem;margin:0;max-width:820px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.page-hero .hero-lede{position:relative;margin:16px 0 0;max-width:620px;font-size:1.15rem;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 20px rgba(0,0,0,.6)}   /* optional hero subtitle (page custom excerpt) */

/* ---- page body: full-width container; each content .se-section sets its own width via .wrap ---- */
.page-body{position:relative}
.page-body > *:last-child{margin-bottom:56px}

/* ---- sections / home blocks ---- */
.site-main{position:relative;z-index:1;flex:1 0 auto}   /* grow so the footer stays at the viewport bottom on short pages (sticky footer) */
section{padding:64px 0}
.eyebrow{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.78rem;margin:0 0 8px}
h2{font-size:1.9rem;margin:0 0 18px}
.whoweare{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.whoweare .media{border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow);
  aspect-ratio:3/2;background:var(--line)}
.whoweare .media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- se-section: THE shared section component (extracted from .whoweare above; used site-wide by
   home + every interior page via partials/se-section.hbs). Same grid/media as .whoweare, plus a
   flip modifier (alternate image side down a page), a portrait media variant, and a plain (text-only)
   variant. Sits inside section.wrap so it inherits the 64px vertical rhythm. ---- */
.se-section{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.se-section .media{border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow);
  aspect-ratio:3/2;background:var(--line)}
.se-section .media img{width:100%;height:100%;object-fit:cover;display:block}
.se-section .media.portrait{aspect-ratio:4/5;max-width:420px;width:100%;justify-self:center}
.se-section__text > *:first-child{margin-top:0}
.se-section--flip .se-section__text{order:2}
.se-section--flip .media{order:1}
.se-section--plain{display:block;max-width:760px}   /* text-only: single centered column */
@media(max-width:900px){
  .se-section{grid-template-columns:1fr}
  .se-section--flip .se-section__text{order:1}
  .se-section--flip .media{order:2}                 /* image follows its own text on mobile */
}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--card-shadow);display:flex;flex-direction:column}
.card .thumb{aspect-ratio:1/1;background:var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:20px 20px 24px}
.card h3{font-size:1.18rem;margin:0 0 8px}
.card p{margin:0 0 14px;color:var(--muted);font-size:.95rem}
/* "What We Do" band — bounded, pulled in from the gutter lines (clears the scrollbar offset) */
.band{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  max-width:calc(var(--maxw) - 32px);margin:0 auto}
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px;margin-top:10px}
.why .pt strong{color:var(--text)} .why .pt{color:var(--muted);font-size:.96rem;margin:0}

/* ---- pillar cards: title is a real link; whole card is a "stealth" link (stretched-link pattern) ---- */
.card{position:relative}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--gold)}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}      /* covers the card → whole card clickable */
.card .body > a{position:relative;z-index:2}                          /* keep "Learn More" independently clickable */
.card:hover{border-color:var(--gold);transition:border-color .2s}

/* ---- 3-across triptych: SEPARATED cards (keep the base gap) with only the two outer corners rounded ---- */
@media(min-width:901px){
  .pillars .card{border-radius:0}
  .pillars .card:first-child{border-radius:10px 0 0 10px}             /* round top-left + bottom-left */
  .pillars .card:last-child{border-radius:0 10px 10px 0}             /* round top-right + bottom-right */
}

/* ---- CTA band — bounded within the content column (only the top hero is full-bleed) ---- */
.ctaband{position:relative;min-height:340px;display:flex;align-items:center;color:#fff;overflow:hidden;
  max-width:calc(var(--maxw) - 32px);margin:24px auto 56px;border-radius:12px;box-shadow:var(--card-shadow)}
.ctaband .imgbg{position:absolute;inset:0;background-size:cover;background-position:center}
.ctaband .scrim{position:absolute;inset:0;background:var(--cta-scrim)}
.ctaband .inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:48px 24px;width:100%;
  display:flex;justify-content:flex-end}
.ctaband .box{max-width:460px;text-align:right}
.ctaband h2{color:#fff} .ctaband p{color:#f0ebe0}

/* ---- interior bounded figure row (secondary imagery; always within the gutter frame) ---- */
.figrow{max-width:var(--maxw);margin:0 auto;padding:8px 24px 8px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.figrow figure{margin:0;border-radius:10px;overflow:hidden;box-shadow:var(--card-shadow);
  background:var(--line);aspect-ratio:3/2}
.figrow figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;color:#fff;
  font-size:.9rem;background:linear-gradient(0deg,rgba(20,19,17,.82),rgba(20,19,17,0))}
.figrow figure{position:relative}
.figrow a{display:block;border-bottom:0}
.figrow a:hover{text-decoration:none}
.figrow figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.figrow a:hover figure img{transform:scale(1.04)}
/* portrait-oriented lead figure (e.g. founder) sits narrower and centered */
.figrow.lead{grid-template-columns:minmax(0,420px);justify-content:center}
.figrow.lead figure{aspect-ratio:4/5}
/* single landscape image — capped so it isn't unnecessarily wide */
.figrow.solo{grid-template-columns:minmax(0,760px);justify-content:center}
/* spacing so figure blocks breathe between prose and the CTA */
.page .figrow{margin-top:8px;margin-bottom:8px}
.page .figrow:last-of-type{margin-bottom:56px}

/* ---- v0.8: interleaved interior sections (the HOME-PAGE pattern, all the way down) ----
   se-interleave.js splits {{content}} at <h2> boundaries and pairs each section with the
   page's next image, alternating image-right / image-left exactly like .whoweare on home.
   Mobile: each pair stacks together (text, then ITS image) so imagery keeps its context.
   No-JS fallback: the v0.7 centered prose + bounded figure rows (styles above) stand. */
.prose--interleaved{max-width:var(--maxw);padding:12px 24px 8px}
.media-sec{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  padding:52px 0}                                   /* home-section breathing room */
.media-sec .txt>*:first-child{margin-top:0}
.media-sec .txt h2{margin-top:0}
.media-sec .media{border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow);
  aspect-ratio:3/2;background:var(--line)}          /* identical card to .whoweare .media */
.media-sec .media img{width:100%;height:100%;object-fit:cover;display:block}
.media-sec.media-left{grid-template-columns:.95fr 1.05fr}
.media-sec.media-left .txt{order:2}
.media-sec.media-left .media{order:1}
.media-sec .media.portrait{aspect-ratio:4/5;max-width:420px;justify-self:center;width:100%}
.media-sec--full{display:block;max-width:760px;margin:0 auto}
@media(max-width:900px){
  .media-sec,.media-sec.media-left{grid-template-columns:1fr;padding:32px 0}
  .media-sec .txt,.media-sec.media-left .txt{order:1}
  .media-sec .media,.media-sec.media-left .media{order:2}  /* image follows its own text */
}

/* ---- contact form (house-styled inputs; dark/light via tokens; works with NO JS) ---- */
.contact-form-section{padding-top:8px;padding-bottom:72px}
.contact-form-section h2{margin-bottom:10px}
.cf-intro{color:var(--muted);max-width:640px;margin:0 0 24px}
.contact-form{max-width:680px}
.contact-form .field{margin:0 0 18px}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form label{display:block;font-size:.86rem;font-weight:600;color:var(--text);margin:0 0 6px}
.contact-form .opt{color:var(--muted);font-weight:400}
.contact-form input,.contact-form textarea{width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:11px 13px;color:var(--text);
  font:inherit;font-size:.98rem;transition:border-color .15s,box-shadow .15s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.contact-form textarea{resize:vertical;min-height:150px;line-height:1.5}
.contact-form button[type=submit]{margin-top:4px;font-family:inherit}  /* <button> needs font-family */
.contact-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:600px){.contact-form .field-row{grid-template-columns:1fr;gap:0}}

/* ---- prose (interior page + post content) ---- */
.prose{max-width:760px;margin:0 auto;padding:52px 0}
.prose h2{font-size:1.9rem;margin:2em 0 .6em}   /* v0.8: one h2 scale site-wide (= home h2) */
.prose h3{font-size:1.18rem;margin:1.6em 0 .5em} /* v0.8: = home card h3 */
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.3em}
.prose li{margin:.3em 0}
.prose blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:3px solid var(--gold);
  color:var(--muted);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose img{border-radius:8px;box-shadow:var(--card-shadow)}
.prose a{border-bottom:1px solid transparent} .prose a:hover{border-bottom-color:var(--gold);text-decoration:none}

/* ---- blog / index feed ---- */
.post-feed{max-width:820px;margin:0 auto;padding:52px 0}
.feed-head{margin:0 0 8px}
.post-card{padding:26px 0;border-bottom:1px solid var(--line)}
.post-card:last-child{border-bottom:0}
.post-card-title{font-size:1.4rem;margin:0 0 8px}
.post-card-title a{color:var(--text)} .post-card-title a:hover{color:var(--gold);text-decoration:none}
.post-card-excerpt{color:var(--muted);margin:0 0 12px}
.post-card-link{color:var(--gold);font-weight:600}

/* ---- footer ---- */
footer.site-footer{position:relative;z-index:1;background:#20211f;color:#cfc8ba;
  padding:34px 0;font-size:.88rem;margin-top:0}
footer.site-footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer.site-footer a{color:#cfc8ba} footer.site-footer a:hover{color:var(--gold)}
footer .pub{color:var(--gold)}

@media(max-width:900px){
  .whoweare,.pillars,.why{grid-template-columns:1fr}
  .hero h1{font-size:2rem} .page-hero h1{font-size:2rem}  /* v0.8: same title scale everywhere */
  .site-nav{display:none} .menu-btn{display:inline-block}
}

/* ================================================================================================
   v0.9 — UNIFIED CONTENT-DRIVEN ARCHITECTURE additions
   Home now flows through the shared se-hero + page-body (no bespoke .hero). These rules give the
   ONE hero its two content-agnostic variants and style the case grid / contact form / prose blocks
   that the content-driven pages compose. RQ-03 (2026-07-05): interior section titles are serif <h2>.
   ================================================================================================ */

/* ---- se-hero HOME variant: tall, centered, with tagline + CTA row (mirrors the retired .hero) ---- */
.page-hero--home{min-height:560px;align-items:center}
.page-hero--home .inner{padding-top:56px;padding-bottom:56px}
.page-hero--home .page-title{max-width:680px}
.page-hero .hero-lede{max-width:600px}
.page-hero .hero-tag{position:relative;font-style:italic;color:var(--gold);margin:14px 0 0;
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 2px 16px rgba(0,0,0,.6)}
.page-hero .cta-row{position:relative;display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.page-hero .cta-row .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.page-hero .cta-row .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---- se-hero PLAIN variant: a page with no feature_image (legal / thank-you) — dark title band,
        no photo, no broken image. Solid in both modes (heroes are always dark w/ light text). ---- */
.page-hero--plain{min-height:220px;background:#20211f}

/* Home text is left-aligned + vertically centered, so it needs the LEFT-heavy hero scrim (as the
   retired .hero used) rather than the interior bottom-heavy scrim — keeps the tagline/lede legible
   over a bright hero photo. */
.page-hero--home .scrim{background:var(--hero-scrim)}

/* ---- interior section headings (RQ-03: serif h2 at home's weight; tighten top margin in a section) */
.se-section__text > h2:first-child{margin-top:0}

/* ---- case-studies index: full-width responsive card grid (reuses the .card component) ---- */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:8px}
.case-grid .card .thumb{aspect-ratio:3/2}
.case-grid .card .body{display:flex;flex-direction:column;gap:6px}
.case-industry{color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.72rem;margin:0}
.case-grid .card h3{margin:0}
.case-grid .card p{margin:4px 0 10px}
.case-grid .card .body > a:last-child{position:relative;z-index:2;color:var(--gold);font-weight:600;margin-top:auto}

/* ---- case sub-page prose + prev/next nav footer ---- */
.prose.case-detail,.prose.legal{padding-top:0;padding-bottom:0;max-width:820px}
.prose.legal > p:first-child{color:var(--muted);font-style:italic}   /* "Effective date:" line */
.case-nav{padding-top:8px;padding-bottom:8px}
.case-nav p{margin:0;font-size:.92rem;color:var(--muted)}
.case-nav a{font-weight:600}

/* ---- contact form: select + consent checkbox + required marker (extends the v0.8 form styles) ---- */
.contact-form-block .se-section__text{max-width:none}
.contact-form select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:11px 13px;color:var(--text);font:inherit;font-size:.98rem;transition:border-color .15s,box-shadow .15s}
.contact-form select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.contact-form .req{color:var(--gold)}
.contact-form .field.consent label{display:flex;gap:10px;align-items:flex-start;font-weight:400;
  font-size:.9rem;color:var(--muted)}
.contact-form .field.consent input{width:auto;margin-top:3px;flex:0 0 auto}
.contact-form .field.consent a{border-bottom:1px solid transparent}
.contact-form .field.consent a:hover{border-bottom-color:var(--gold)}

/* ================================================================================================
   WEAVING INTELLIGENCE additions (on top of the reused SE design system)
   Two things only, for now: (1) a TEXT wordmark placeholder standing in for the WI brand mark until
   badging/logos are decided; (2) a PHOTO-FREE hero — WI drops the SE photo layer, so the hero is the
   typographic dark band (SE's .page-hero--plain), enriched to carry eyebrow + title + lede + (home)
   tagline/CTA. Everything above is SE's proven system, reused unchanged.
   ================================================================================================ */

/* ---- brand wordmark placeholder (text; TODO: replace with the WI mark via a brand-mark partial) ---- */
.brand-text{font-family:var(--font-serif);font-size:1.18rem;font-weight:700;letter-spacing:.2px;
  color:var(--text);line-height:1;white-space:nowrap}
.brand-text b{color:var(--gold);font-weight:700}
.brand:hover .brand-text{color:var(--text)}

/* ---- wi-hero: photo-free typographic hero (extends .page-hero--plain) ----
   .page-hero--plain already gives a dark charcoal band with light text (heroes are always dark).
   WI adds top padding + a gold hairline so the band reads as a masthead, not an accident. */
.wi-hero{min-height:0;padding:8px 0 0}
.wi-hero .inner{padding-top:52px;padding-bottom:40px}
.wi-hero .page-title{max-width:900px}
.wi-hero .hero-lede{color:#f2ede2}
.wi-hero--home{border-bottom:3px solid var(--gold)}
.wi-hero--home .inner{padding-top:64px;padding-bottom:56px}
.wi-hero--post .inner{padding-bottom:28px}
.post-byline{position:relative;margin:14px 0 0;color:var(--muted);font-size:.92rem}
.wi-hero--post .post-byline{color:#cfc8ba}

/* ---- publication feed additions (kicker = Vertical primary tag; byline; tag-archive description) ---- */
.feed-desc{color:var(--muted);max-width:680px;margin:0 0 8px}
.post-card-kicker{color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.72rem;margin:0 0 6px}
.post-card-meta{color:var(--muted);font-size:.85rem;margin:0 0 10px}

/* ---- Koenig editor image cards (gscan-required: .kg-width-wide / .kg-width-full must be styled) ----
   WI articles are authored in Ghost, so wide/full image cards will appear. The bounded frame layout
   (fixed gutters) means a true viewport-full breakout would collide with the frame, so wide/full fill
   their content column cleanly rather than the whole viewport. Enhance later if a fuller bleed is wanted. */
.kg-width-wide,.kg-width-full{width:100%;margin-top:1.4em;margin-bottom:1.4em}
.kg-width-wide img,.kg-width-full img{width:100%;border-radius:8px;box-shadow:var(--card-shadow)}
.kg-width-full{max-width:var(--maxw);margin-left:auto;margin-right:auto}