/* ============================================================
   SPEC9 Flooring — Main Stylesheet
   ------------------------------------------------------------
   File:assets/css/styles.css
   Theme tokens:assets/css/themes.css   ->  edit ALL colours here
   Images:assets/                 ->  swap via <img> tags
   ------------------------------------------------------------
   For the WordPress/ACF port every numbered section below maps
   to a template partial (header,hero,services,projects…),which makes migrating rules into the theme later trivial.
   ============================================================ */

/* ------------------------------------------------------------
   1. RESET & BASE
   ------------------------------------------------------------ */
html{scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box; margin:0}
/*:root also carries the safe-area paddings alongside the
   theme tokens defined in themes.css */:root{box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{background:var(--bg); color:var(--ink); font:17px/1.4 Barlow,system-ui,sans-serif}
h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif; font-weight:600; line-height:1.1; letter-spacing:-.005em}
h2{font-size:clamp(36px,5vw,56px); max-width:100%;}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
/* ------------------------------------------------------------
   2. LAYOUT UTILITIES
   .w = page container | .sec = section spacing
   .warm = warm content band | .lab = section eyebrow
   .lead = intro paragraph
   ------------------------------------------------------------ */

/* .w{max-width:1240px; margin:0 auto; padding:0 28px}
*/
.w{width:100%; margin:0 auto; padding-left:20px; padding-right:20px;}
/* ≥ 576px */
@media (min-width:576px){
  .w{max-width:540px;}
}
/* ≥ 768px */
@media (min-width:768px){
  .w{max-width:720px;}
}
/* ≥ 992px */
@media (min-width:992px){
  .w{max-width:960px;}
}
/* ≥ 1200px */
@media (min-width:1200px){
  .w{max-width:1140px;}
}
/* ≥ 1400px */
@media (min-width:1400px){
  .w{max-width:1240px;}
}
.sec{padding:100px 0}
.sec-sm{padding:60px 0}
.warm{background:var(--warm)}
.lab{font-weight: 500;
    font-size: 14px;
    color: var(--red);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    TEXT-TRANSFORM: UPPERCASE;
    letter-spacing: .3px;
    word-spacing: 2px;}
.lab:before{content:""; width:22px; height:2px; background:var(--red)}
p.lead{color:var(--mute); max-width:34em; margin-top:22px}
/* ------------------------------------------------------------
   3. BUTTONS
   .btn     neutral underline-style
   .btn.p   primary (red)
   .btn.g   ghost (on dark surfaces)
   ------------------------------------------------------------ */
.btn{display:inline-block; padding:15px 28px; font-weight:500; font-size:16px; border:1.5px solid var(--ink); transition:background .2s,color .2s,border-color .2s}
.btn.p{background:var(--red); border-color:var(--red); color:#fff}
.btn.p:hover{background:var(--ink); border-color:var(--ink)}
.btn.g{border-color:rgba(255,255,255,.7); color:#fff}
.btn.g:hover{background:#fff; color:#111}
button.btn{font-family:inherit; cursor:pointer}
/* ------------------------------------------------------------
   4. PHOTO CONTAINERS (.ph)
   Used by About,Services and Projects. Each .ph holds a real
   <img> that fills the box via object-fit:cover.
   The gradients below are only a fallback while an image loads.
   ------------------------------------------------------------ */
.ph{position:relative; background:linear-gradient(135deg,rgba(0,0,0,.05) 25%,transparent 25%) 0 0/48px 48px,linear-gradient(160deg,#4a4741,#2a2926 60%,#3b3833); overflow:hidden}
.ph.b{background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 90px),linear-gradient(160deg,#6d6759,#37342d)}
.ph.c{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 36px),linear-gradient(160deg,#59616a,#2b3036)}
.ph i{position:absolute; left:14px; bottom:12px; font:12px Barlow; color:rgba(255,255,255,.55); font-style:normal}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;border:1px solid var(--line)}
/* ------------------------------------------------------------
   4b. TOP BAR
   Always dark, independent of the light/dark theme tokens, so
   the contact strip keeps the same look in either mode.
   ------------------------------------------------------------ */
.topbar{background:#0a0a0a; color:#fff; font-size:13.5px; line-height:1; padding-top:env(safe-area-inset-top,0px)}
.topbar a{color:#fff; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:color .2s}
.topbar a:hover{color:var(--red)}
.topbar .w{display:flex; align-items:center; justify-content:space-between; gap:8px 24px; min-height:40px; padding-top:6px; padding-bottom:6px}
/* Left: quick-contact links. Right: address. */
.tb-list{display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; margin:0; padding:0; list-style:none}
.tb-list li{display:inline-flex; align-items:center}
.tb-addr{display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.72)}
.topbar svg{width:15px; height:15px; flex:none; color:var(--red)}
/* ------------------------------------------------------------
   5. HEADER & NAVIGATION
   ------------------------------------------------------------ */
/* Top bar + header stay pinned together as one sticky stack, so
   the top bar does not scroll away. */
.site-head{position:sticky; top:0; z-index:9}
header{background:var(--bg); border-bottom:1px solid var(--line)}
/* Only the topmost element in the stack takes the notch inset, so a
   present top bar does not leave a gap under it on notched devices. */
.site-head > header:first-child{padding-top:env(safe-area-inset-top,0px)}
header .w{display:flex; align-items:center; justify-content:space-between; min-height:88px}
header img{height:48px; display:block}
/* Header logo:the white/dark-mode variant is hidden by default.
   themes.css swaps it in when dark mode is active. */
header img.header-logo-dark{display:none}
nav{display:flex; gap:34px; font-size:16px}
nav{font-size:16px; color:var(--ink);    text-transform: uppercase;
    letter-spacing: .3px;
    font-weight: 500;}
nav a:hover{color:var(--red)}
header .btn{padding:10px 20px; font-size:15px}
/* header right-hand actions:theme toggle + CTA */
.h-actions{display:flex; align-items:center; gap:14px}
/* Dark/light switcher. Icon swap rules live in themes.css. */
.theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--ink); font-size:18px; font-family:inherit; line-height:1; cursor:pointer; transition:background .2s,color .2s,border-color .2s}
.theme-toggle:hover{border-color:var(--red); color:var(--red)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:inline}
/* Hamburger: hidden on desktop, shown once the nav collapses (≤960px). */
.menu-toggle{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--ink); cursor:pointer; transition:background .2s,color .2s,border-color .2s}
.menu-toggle:hover{border-color:var(--red); color:var(--red)}
.mt-bar{display:block; width:16px; height:2px; background:currentColor; transition:transform .2s,opacity .2s}
/* Animate the three bars into an ✕ while the menu is open. */
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ------------------------------------------------------------
   6. HERO
   Background image comes from the inline style on the <section>
   so it can be swapped per-page (or via ACF later).
   ------------------------------------------------------------ */


.hero{color:#fff; min-height:calc(100vh - 88px); /* min-height:min(820px,88vh); */
    display:flex; align-items:center; background:linear-gradient(180deg,rgba(10,10,10,.15),rgba(10,10,10,.75)),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 120px),linear-gradient(150deg,#5b564b,#25231f 70%)}
/* < 576px */
@media (max-width:575px){
	.hero{min-height:600px};
	.hero p{font-size:17px; }
}
.hero  .w{display:flex;}
.hero_text{max-width:50em;}
.hero h1{font-size:clamp(46px,6.5vw,90px); font-weight:700; line-height:1;}
.hero p{font-size:19px; margin:28px 0 38px; max-width:38em; color:rgba(255,255,255,.9)}
.hero .btn+.btn{margin-left:10px}
/* ------------------------------------------------------------
   7. INDUSTRIES / MARKETS
   ------------------------------------------------------------ */
.ind{display:grid; grid-template-columns:repeat(7,1fr); margin-top:36px; border-top:1px solid var(--line)}
.ind div{padding:30px 18px 8px 0; border-right:1px solid var(--line); padding-left:18px}
.ind div:first-child{padding-left:0}
.ind div:last-child{border:0}
.ind svg{width:38px; height:38px; stroke:var(--red); fill:none; stroke-width:1.5; display:block; margin-bottom:18px}
.ind .icon{font-size:38px; color:var(--red); display:block; margin-bottom:18px}
.ind b{font:600 22px 'Barlow Condensed'}
/* ------------------------------------------------------------
   8. ABOUT
   ------------------------------------------------------------ */
.about{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
.about .ph{aspect-ratio:4/5}
.dif{margin-top:38px; border-top:1px solid var(--line)}
.dif p{padding:16px 0; border-bottom:1px solid var(--line)}
.dif b{font-weight:500; color:var(--red);}
/* ------------------------------------------------------------
   9. SERVICES
   Six cards,each with a .ph photo container.
   ------------------------------------------------------------ */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:46px}
.svc .ph{aspect-ratio:4/3; transition:transform .5s}
.svc a>div{overflow:hidden}
.svc a:hover .ph{transform:scale(1.04)}
.svc h3{font-size:30px; margin:20px 0 8px}
.svc p{color:var(--mute); font-size:16px}
.svc span{display:inline-block; margin-top:12px; font-weight:500; border-bottom:1.5px solid var(--red)}
/* ------------------------------------------------------------
   10. FEATURED PROJECTS / GALLERY
   A 12-column grid; each figure = one project (ACF CPT "project").
   ------------------------------------------------------------ */
.gal{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:46px}
.gal .ph{min-height:300px}
.gal .a{grid-column:span 7; min-height:440px}
.gal .b2{grid-column:span 5}
.gal .c2{grid-column:span 4}
.gal .d{grid-column:span 4}
.gal .e{grid-column:span 4}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:40px 18px 14px; color:#fff; font-size:15px; background:linear-gradient(transparent,rgba(0,0,0,.7))}
/* ------------------------------------------------------------
   11. STATS BAND
   Dark surface in both themes (uses --dk / --dkt tokens).
   ------------------------------------------------------------ */
.stats{background:var(--dk); color:#000000;}
.stats .g{display:grid; grid-template-columns:repeat(4,1fr)}
.stats .g div{padding:0 28px; border-left:1px solid #3a3b40}
.stats .g div:last-child{border-right:1px solid #3a3b40;}
.stats strong{display:block; font:600 clamp(60px,8vw,104px)/1 'Barlow Condensed'}
.stats span{color:#444444}
.stats em{color:var(--red); font-style:normal}
/* ------------------------------------------------------------
   12. TESTIMONIALS
   ------------------------------------------------------------ */
.q{display:grid; grid-template-columns:1fr 1fr 1fr; gap:56px; margin-top:56px}
blockquote{border-top:2px solid var(--ink); padding-top:26px; font-size:21px; line-height:1.45}
blockquote cite{display:block; margin-top:22px; font-size:15px; font-style:normal; color:var(--mute)}
/* ------------------------------------------------------------
   13. CTA (always dark by design)
   ------------------------------------------------------------ */
.cta{color:#fff; padding:140px 0; background:linear-gradient(rgba(12,12,12,.68),rgba(12,12,12,.8)),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),linear-gradient(150deg,#565d66,#22262b)}
.cta h2{max-width:10em}
.cta .btn{margin:38px 12px 0 0}
/* ------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------ */
footer{background:var(--dk); color:#a9a59d; padding:72px 0 32px; font-size:15px}
footer .g{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:48px}
footer img{height:44px; margin-bottom:18px}
footer h4{color:#fff; font-weight:500; margin-bottom:14px}
footer li{list-style:none; margin-bottom:8px}
footer ul{padding:0}
footer a:hover{color:#fff}
.legal{margin-top:56px; padding-top:22px; border-top:1px solid #33353a; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:14px}

footer .contact-list li a,footer .contact-list li p{display:flex; align-items:center; gap:8px}
footer .contact-list svg{width:16px; height:16px; flex:none; color:var(--red)}


/* ------------------------------------------------------------
   15. MODAL / CONTACT FORM
   Dialog overlay opened by every element with
   data-modal-open="quote" (see index.html + main.js).
   Uses theme tokens,so it inherits light & dark automatically.
   ------------------------------------------------------------ */
.modal-backdrop{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(10,10,12,.55)}
.modal-backdrop.open{display:flex; animation:backdrop-in .2s ease}
@keyframes backdrop-in{
  from{opacity:0}
  to{opacity:1}
}
.modal{width:min(760px,calc(100% - 32px)); max-height:calc(100% - 32px); background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 48px rgba(0,0,0,.3); padding:28px 32px; overflow:auto; animation:modal-in .25s ease}
@keyframes modal-in{
  from{opacity:0; transform:translateY(14px) scale(.98)}
  to{opacity:1; transform:none}
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.modal h2{font-size:clamp(26px,3.4vw,38px); max-width:none}
.modal-close{flex:none; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--ink); font-size:16px; font-family:inherit; line-height:1; cursor:pointer}
.modal-close:hover{border-color:var(--red); color:var(--red)}
.modal .quote-form{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px}
.f{display:flex; flex-direction:column; gap:7px}
.f.wide{grid-column:1 / -1}
.f label{font-size:14px; font-weight:500; color:var(--mute)}
.f label em{color:var(--red)}
.f input,.f select,.f textarea{font:15px/1.45 Barlow,sans-serif; padding:11px 14px; border:1.5px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 18%,transparent)}
.f textarea{min-height:120px; resize:vertical}
.f .note,.modal .actions .note{font-size:13px; color:var(--mute)}
.hp{/* Honeypot — visually hidden; bots fill it in,people don't */
    position:absolute; left:-9999px; opacity:0}
.modal .actions{grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.modal-done{display:none; margin-top:26px; text-align:center}
.modal-done.open{display:block}
.modal-done .ok{width:60px; height:60px; margin:0 auto 16px; border:2px solid var(--red); border-radius:50%; color:var(--red); font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center}
.modal-done h3{font:600 30px 'Barlow Condensed'}
.modal-done p{color:var(--mute)}
.modal-done .actions{display:flex; justify-content:center; gap:12px; margin-top:20px; flex-wrap:wrap}
html.modal-open{overflow:hidden}
/* Hide additional unknown field */

.hidden-fields-container{display:none;}


/* ------------------------------------------------------------
   16. RESPONSIVE (960px tablet,560px phone)
   ------------------------------------------------------------ */
@media(max-width:960px){
  .menu-toggle{display:inline-flex}
  /* Nav drops out of the bar into a full-width panel under the header. */
  nav{position:absolute; top:100%; left:0; right:0; display:block; background:var(--bg); border-bottom:1px solid var(--line); padding:4px 20px 14px; box-shadow:0 18px 30px rgba(0,0,0,.12); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .2s,transform .2s,visibility .2s}
  nav.open{opacity:1; visibility:visible; pointer-events:auto; transform:none}
  nav a{display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:18px}
  nav a:last-child{border-bottom:0}
  .ind{grid-template-columns:repeat(2,1fr)}
  .ind div{border:0; border-bottom:1px solid var(--line); padding-left:0}
  .about,.q,footer .g{grid-template-columns:1fr; gap:40px}
  .svc{grid-template-columns:1fr 1fr}
  .stats .g{grid-template-columns:1fr 1fr}
  .stats .g div:nth-child(3){border-left:0; padding-left:0}
  .gal .a,.gal .b2,.gal .c2,.gal .d,.gal .e{grid-column:span 12; min-height:260px}
  .sec{padding:80px 0}
}
/* The address needs room the smaller screens do not have. */
@media(max-width:768px){
  .tb-addr{display:none}
}
@media(max-width:560px){
  .topbar{font-size:12.5px}
  .topbar .w{justify-content:center; min-height:0; padding-top:8px; padding-bottom:8px}
  .tb-list{justify-content:center}
  .svc{grid-template-columns:1fr}
  .modal{padding:20px}
  .modal .quote-form{grid-template-columns:1fr}
  .hero .btn+.btn{margin:12px 0 0}
  header .btn{display:none}
}
/* ------------------------------------------------------------
   17. ACCESSIBILITY — reduced motion
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}
/* ============================================================
   18. WORDPRESS PORT
   ------------------------------------------------------------
   Sections 1–17 above are a verbatim copy of the static site's
   assets/css/styles.css,so a diff against it stays meaningful.
   Everything below exists only because the markup is generated
   by WordPress now. Two static-only rulesets (.hp honeypot and
   .modal-done) are kept above but are unused:Contact Form 7
   does the submission and its own spam handling.

   The one place the port changes how the static pages rendered:background images. The static pages carried them in an inline
   `style` attribute; the theme passes the URL in through the
   --bg-img custom property,so it can come from a Customizer
   setting or the featured image.
   ============================================================ */

/* --- Background images (--bg-img) ---------------------------
   .hero,.cta and .stats receive --bg-img inline. The gradient
   must live in the SAME background-image list — a separate
   declaration would replace the list rather than layer under it.
   Gradient + position + size match the static inline styles.
   ------------------------------------------------------------ */
.hero{background-image:linear-gradient(180deg,rgba(10,10,10,.25),rgba(10,10,10,.72)),var(--bg-img,none); background-position:center; background-size:cover; background-repeat:no-repeat}
.cta{background-image:linear-gradient(180deg,rgba(10,10,10,.25),rgba(10,10,10,.72)),var(--bg-img,none); background-position:bottom center; background-size:cover; background-repeat:no-repeat}
.stats{/* No gradient:the tiles image sits straight on the --dk
       surface set in section 11. */
    background-image:var(--bg-img,none); background-position:center; background-size:cover; background-repeat:no-repeat}
/* --- Core button blocks -> .btn -----------------------------
   Hero headings/paragraphs/buttons are real blocks now,so the
   static `a.btn` markup becomes .wp-block-button. The theme
   registers two block styles (see inc/enqueue.php):"primary" -> .btn.p,"ghost" -> .btn.g. Geometry is repeated
   on all three selectors so a styled button works outside the
   hero too (a project gallery,for example).
   ------------------------------------------------------------ */
.hero .wp-block-buttons{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0}
.hero .wp-block-button{margin:0}
.hero .wp-block-button__link,.wp-block-button.is-style-primary .wp-block-button__link,.wp-block-button.is-style-ghost .wp-block-button__link,/* A button block with no style class. theme.json neutralises core's
   element button styles,so without this an author's default button
   renders as bare text. The:not() also keeps this rule away from
   core's own is-style-outline,which would otherwise lose its
   padding and border to these declarations. */
.wp-block-button:where(:not([class*="is-style-"])) .wp-block-button__link{display:inline-block; padding:15px 28px; font-weight:500; font-size:16px; border:1.5px solid var(--ink); border-radius:0; box-shadow:none; text-decoration:none; transition:background .2s,color .2s,border-color .2s}
.wp-block-button.is-style-primary .wp-block-button__link{background:var(--red); border-color:var(--red); color:#fff}
.wp-block-button.is-style-primary .wp-block-button__link:hover{background:var(--ink); border-color:var(--ink)}
.wp-block-button.is-style-ghost .wp-block-button__link{border-color:rgba(255,255,255,.7); color:#fff}
.wp-block-button.is-style-ghost .wp-block-button__link:hover{background:#fff; color:#111}
/* --- Contact Form 7 in the quote modal ----------------------
   CF7's stylesheet is dequeued (inc/enqueue.php) so the modal
   keeps the static .f field styling. What is left to handle:CF7 wraps every control in a span,and appends status markup
   the static form never had.
   ------------------------------------------------------------ */
.modal .wpcf7-form-control-wrap{display:block}
.modal .wpcf7-form-control-wrap > *{width:100%}
/* [submit] renders an <input>,which does not inherit the font */
.modal input.wpcf7-submit{font-family:inherit; cursor:pointer}
/* The response box is in the DOM from the start; only CF7's
   status classes on the form should reveal it. Without this it
   renders as an empty bordered grid cell. */
.modal form.wpcf7-form .wpcf7-response-output{display:none}
.modal form.wpcf7-form.sent .wpcf7-response-output,.modal form.wpcf7-form.invalid .wpcf7-response-output,.modal form.wpcf7-form.failed .wpcf7-response-output,.modal form.wpcf7-form.spam .wpcf7-response-output,.modal form.wpcf7-form.aborted .wpcf7-response-output,.modal form.wpcf7-form.unaccepted .wpcf7-response-output,.modal form.wpcf7-form.acceptance-missing .wpcf7-response-output{display:block; grid-column:1 / -1; margin:0; padding:12px 16px; border:1.5px solid var(--line); border-left:3px solid var(--red); border-radius:8px; font-size:14px}
.modal .wpcf7-not-valid-tip{display:block; margin-top:6px; font-size:13px; color:var(--red)}
.modal .wpcf7-not-valid{border-color:var(--red)}
/* Empty status span:an empty flex item still costs a gap. */
.modal .actions .wpcf7-spinner{display:none}
/* CF7's aria-live region — kept for screen readers,out of flow */
.modal .screen-reader-response{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* --- Project grid:whole-figure link ------------------------
   The figure has to stay the grid child so the bento span
   classes keep working; the link overlays it instead. */
.gal .cover{position:absolute; inset:0; z-index:2}
/* --- Single pages & archives -------------------------------- */
.hero.band{min-height:42vh; padding:80px 0}
.hero.band h1{font-size:clamp(38px,5vw,60px)}
.entry-content > * + *{margin-top:1.25em}
.entry-content h1{font-size:clamp(38px,5vw,60px)}
/* Keeps a .btn solid when one lands inside editor content. */
.entry-content a.btn{text-decoration:none}
.entry-content h2{font-size:clamp(30px,3.6vw,44px); max-width:none; margin-top:1.5em}
.entry-content h3{font-size:26px; margin-top:1.4em}
.entry-content ul,.entry-content ol{padding-left:1.25em}
.entry-content img{max-width:100%; height:auto}
.entry-content a{text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px}
.entry-content a:hover{color:var(--red)}
/* --- Logos in the header and footer -------------------------
   wp_get_attachment_image() emits width/height attributes for
   CLS. Those are presentational hints:as author styles go,`height:44px` wins over the height attribute in both places,but nothing sets `width`,so the hint's width survives. The
   header logo laid out at its full 2079px — pushing the nav and
   the CTA off-screen and giving the page a horizontal scrollbar
   — and the footer logo forced its 1.6fr grid column to 1013px,squeezing the other three and overflowing the page. The static
   markup carries no width attribute,so it sizes both logos from
   the intrinsic ratio. Restoring `width:auto` reproduces that
   exactly (~122px),and lets srcset pick a small candidate. */
header img,footer img{width:auto}
/* --- Legal bar ---------------------------------------------
   The static markup grouped both links in one span,so the
   flex row has two children and stays flush right. */
.legal-links a + a::before{content:" · "}