/*
Theme Name: My Demo Site (Himrah)
Description: Himrah Creative Studio theme. Block pages are edited in the block editor; the "Static Demo" page template shows the same design system controlled from PHP.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: mydemosite
*/

/* =====================================================================
   HIMRAH WEB SYSTEM
   Copied from himrah-web-system.html. Values are unchanged.
   Where WordPress outputs its own markup (block buttons, form fields,
   headings and links in the editor), those selectors have been added to
   the matching system rule so both share one set of declarations.
   Brand colours, fonts and sizes are also registered in theme.json so
   they show up in the block editor. Keep the two in sync.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  /* brand colours */
  --green:#1D482D; --blush:#E8C5E5; --orange:#EF9437; --cream:#F1E6C8;
  --card:#F8F1DE;  --ox:#431112;    --olive:#2D290C;  --deep:#132F1E; --paper:#FDF8EC;

  /* semantic (light) */
  --page:var(--cream); --surface:var(--card); --field:var(--card);
  --heading:var(--green); --text:var(--olive); --label:var(--ox); --accent:var(--blush);
  --border:rgba(29,72,45,.25); --dotline:rgba(45,41,12,.35);

  /* type */
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Space Grotesk', system-ui, sans-serif;
  --hand:'La Belle Aurore', cursive;
  --fs-h1:clamp(56px, 7.2vw, 104px);
  --fs-h2:clamp(40px, 5.6vw, 76px);
  --fs-h3:clamp(26px, 2.5vw, 36px);
  --fs-final:clamp(88px, 12.2vw, 176px);
  --fs-lead:clamp(17px, 1.3vw, 19px);
  --fs-body:clamp(15px, 1.1vw, 17px);
  --fs-small:14px;
  --fs-label:12.5px;
  --fs-hand:clamp(26px, 2.6vw, 40px);

  /* shape + space */
  --r-card:22px; --r-price:28px; --r-shot:18px; --r-input:14px; --r-pill:999px;
  --content:1200px; --pad:clamp(24px, 8.3vw, 120px); --section:clamp(72px, 8.3vw, 120px);
  --nav-h:88px;

  /* depth + motion */
  --shadow-soft:0 10px 24px -14px rgba(45,41,12,.38);
  --shadow-hard:4px 4px 0 var(--olive);
  --ease:cubic-bezier(.3,1.5,.5,1);

  /* WordPress: the system's monoline icons as masks, for blocks that
     cannot hold an inline <svg> (buttons, list items, summaries) */
  --icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.3 12.4l2.5 2.5 5-5.4'/%3E%3C/svg%3E");
  --icon-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --icon-clip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 7.5v8.5a3.5 3.5 0 0 1-7 0V6a2.3 2.3 0 0 1 4.6 0v9.5a1.1 1.1 0 0 1-2.2 0V8'/%3E%3C/svg%3E");
  --icon-books:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='4' height='16' rx='.6'/%3E%3Crect x='8.5' y='6' width='4' height='14' rx='.6'/%3E%3Cpath d='M14.2 6.6l3.6-1 3.7 13.6-3.6 1z'/%3E%3Cpath d='M3.5 8h4M8.5 9.6h4'/%3E%3C/svg%3E");
  --icon-laptop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='5' width='15' height='10.5' rx='1.5'/%3E%3Cpath d='M2.5 19h19'/%3E%3C/svg%3E");
}
[data-theme="dark"]{
  --page:var(--deep); --surface:rgba(241,230,200,.07); --field:rgba(241,230,200,.06);
  --heading:var(--cream); --text:rgba(241,230,200,.8); --label:var(--blush);
  --border:rgba(241,230,200,.16); --dotline:rgba(241,230,200,.3);
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--page);color:var(--text);font:400 var(--fs-body)/1.7 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--blush);color:var(--ox)}
.container{max-width:calc(var(--content) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}

/* WordPress: blocks inside design sections space themselves with the
   system's own gaps, so switch off WordPress's automatic block spacing
   there. Component rules further down still set their own margins. */
.is-layout-flow:where(.section,.hero,.final,.ticker,.section *,.hero *,.final *) > *{margin-block-start:0}
:is(.entry-content,.is-root-container) > :is(.section,.hero,.final,.ticker){margin-block:0}

/* ---------- 3. sections ---------- */
.section{padding-block:var(--section);position:relative;color:var(--text)}
.section--cream{background:var(--page)}
.section--green{background:var(--green);--heading:var(--cream);--text:rgba(241,230,200,.86);--label:var(--blush);--border:rgba(241,230,200,.2);--dotline:rgba(241,230,200,.35);--surface:rgba(241,230,200,.07);--field:rgba(241,230,200,.06)}
.section--ox{background:var(--ox);--heading:var(--cream);--text:rgba(241,230,200,.86);--label:var(--blush);--border:rgba(241,230,200,.2);--surface:rgba(241,230,200,.07)}
.section--blush{background:var(--blush);--heading:var(--green);--text:var(--olive);--label:var(--ox);--border:rgba(67,17,18,.2)}
.section-head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-head--center{align-items:center;text-align:center;margin-inline:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.grid-2,.grid-3,.split{grid-template-columns:1fr}}

/* ---------- 4. type ---------- */
/* WordPress: plain h1-h3 (block headings, page titles) use the system heading styles */
.h1,.h2,.h3,.h-final,h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--heading);letter-spacing:-.01em}
.h1,h1{font-size:var(--fs-h1);line-height:.95}
.h2,h2{font-size:var(--fs-h2);line-height:.98}
.h3,h3{font-size:var(--fs-h3);line-height:1.08}
.h-final{font-size:var(--fs-final);line-height:.86}
.h1 em,.h2 em,.h3 em,.h-final em,h1 em,h2 em,h3 em{font-style:italic}
/* WordPress: h4 uses the system's FAQ question size, h5-h6 the label style */
h4{font-size:clamp(24px,2.4vw,32px);line-height:1.15}
h5,h6{font:700 var(--fs-label)/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.lead{font-size:var(--fs-lead);line-height:1.65;max-width:52ch}
.body{font-size:var(--fs-body);line-height:1.7;max-width:60ch}
.small{font-size:var(--fs-small);line-height:1.6}
.label{font:700 var(--fs-label)/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.hand{font:400 var(--fs-hand)/1.2 var(--hand);display:inline-block;transform:rotate(-5deg)}
.accent{font-style:italic;color:var(--blush)}
.section--cream .accent,.section--blush .accent{color:var(--ox)}
.squiggle{position:relative;display:inline-block}
.squiggle::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.2em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C14 1 24 11 36 6S58 1 70 6S90 11 98 5' fill='none' stroke='%23EF9437' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hl{background:linear-gradient(transparent 58%, var(--blush) 58% 92%, transparent 92%);padding-inline:.08em}
.strike{text-decoration:line-through;text-decoration-color:var(--blush);text-decoration-thickness:2px}

/* ---------- 5. logo ---------- */
.logo{display:inline-flex;align-items:flex-end;gap:.26em;font-size:var(--logo-size,40px);line-height:1;white-space:nowrap;color:var(--heading);text-decoration:none}
.logo__word{font:italic 400 1em/.8 var(--serif);letter-spacing:-.01em}
.logo__studio{font:700 .15em/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;padding-bottom:.6em}
.logo--stacked{flex-direction:column;align-items:center;gap:0}
.logo--stacked .logo__studio{margin-top:.9em;padding:1em 0 0;border-top:1px solid currentColor;letter-spacing:.42em}
.logo--compact{align-items:center;gap:.5em}
.logo--compact .logo__bar{width:1px;height:.9em;background:currentColor;opacity:.5}
.logo--compact .logo__studio{padding:0;font-size:.2em;line-height:1.5}
.monogram{font:italic 400 var(--logo-size,40px)/1 var(--serif);position:relative;display:inline-block;padding-right:.12em;color:var(--heading)}
.monogram::after{content:"";position:absolute;right:0;bottom:.2em;width:.1em;height:.1em;border-radius:50%;background:var(--orange)}
.monogram--ink::after{background:currentColor}
.seal{width:var(--seal-size,140px);height:var(--seal-size,140px);color:var(--heading)}

/* ---------- 6. icons ---------- */
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.14em}
.disc{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--page);border:1px solid var(--border);color:var(--label);font-size:28px;flex:none}
.disc--blush{background:var(--blush);border-color:transparent;color:var(--olive)}
.disc--orange{background:var(--orange);border-color:transparent;color:var(--olive)}
.card--blush .disc:not(.disc--orange),.section--blush .disc:not(.disc--orange){background:var(--card);border-color:transparent;color:var(--ox)}

/* ---------- 7. buttons + links ---------- */
/* WordPress: Button blocks, element buttons (search, file) and submit inputs are .btn */
.btn,.wp-block-button__link,.wp-element-button,input[type="submit"],.fluentform .ff-btn-submit{--bg:var(--green);--fg:var(--cream);--hbg:var(--ox);--hfg:var(--cream);--sh:var(--olive);
  display:inline-flex;align-items:center;justify-content:center;gap:14px;height:60px;padding:0 32px;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:1.5px solid transparent;
  font:700 15px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s,color .2s,border-color .2s}
.btn .ic{font-size:19px;stroke-width:1.6;transition:transform .3s var(--ease)}
.btn:hover,.wp-block-button__link:hover,.wp-element-button:hover,input[type="submit"]:hover,.fluentform .ff-btn-submit:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--sh);background:var(--hbg);color:var(--hfg)}
.btn:hover .ic{transform:translateX(3px)}
.btn:focus-visible,.wp-block-button__link:focus-visible,.wp-element-button:focus-visible,input[type="submit"]:focus-visible,.fluentform .ff-btn-submit:focus-visible{outline:3px solid var(--blush);outline-offset:3px}
.btn--blush,.is-style-blush>.wp-block-button__link{--bg:var(--blush);--fg:var(--olive);--hbg:var(--cream);--hfg:var(--olive);--sh:var(--orange)}
.btn--line,.is-style-line>.wp-block-button__link{--bg:transparent;--fg:var(--cream);--hbg:var(--cream);--hfg:var(--green);--sh:var(--blush);border-color:rgba(241,230,200,.8)}
.btn--final,.is-style-final>.wp-block-button__link{--bg:var(--blush);--fg:var(--olive);--hbg:var(--cream);--hfg:var(--olive);height:72px;padding:0 42px;font-size:16px;box-shadow:6px 6px 0 var(--orange)}
.btn--final:hover,.is-style-final>.wp-block-button__link:hover{box-shadow:8px 8px 0 var(--orange)}
.btn--block,.wp-block-button.has-custom-width .wp-block-button__link{width:100%}
/* dark theme: the main button turns blush, except on light islands like the price card */
[data-theme="dark"] .btn:not(.btn--line):not(.btn--blush):not(.btn--final){--bg:var(--blush);--fg:var(--olive);--hbg:var(--cream);--hfg:var(--olive);--sh:var(--orange)}
[data-theme="dark"] .price-card .btn:not(.btn--line){--bg:var(--green);--fg:var(--cream);--hbg:var(--ox);--hfg:var(--cream);--sh:var(--olive)}
/* WordPress: Button blocks draw the system's thin arrow after the text */
.wp-block-button__link::after,.fluentform .ff-btn-submit::after,.ff-message-success .btn::after{content:"";width:19px;height:19px;flex:none;background:currentColor;-webkit-mask:var(--icon-arrow) center/contain no-repeat;mask:var(--icon-arrow) center/contain no-repeat;transition:transform .3s var(--ease)}
.wp-block-button__link:hover::after,.fluentform .ff-btn-submit:hover::after,.ff-message-success .btn:hover::after{transform:translateX(3px)}
/* WordPress: links written in the editor are .link */
.link,:where(.entry-content,.is-root-container) a:where(:not(.wp-element-button,.btn)){color:var(--heading);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:color .2s}
.link:hover,:where(.entry-content,.is-root-container) a:where(:not(.wp-element-button,.btn)):hover{color:var(--ox)}
.section--green .link,.section--ox .link,.footer .link{color:var(--cream)}
.section--green .link:hover,.section--ox .link:hover,.footer .link:hover,
:where(.section--green,.section--ox,.final) a:where(:not(.wp-element-button,.btn)):hover{color:var(--blush)}

/* ---------- 8. pills, tape, dot ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--r-pill);
  font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--shadow-soft)}
.pill .ic{font-size:18px}
.pill--green{background:var(--green);color:var(--cream)}
.pill--blush{background:var(--blush);color:var(--olive)}
.pill--orange{background:var(--orange);color:var(--olive)}
.pill--ox{background:var(--ox);color:var(--cream)}
.pill--line{background:var(--cream);color:var(--olive);border:1.5px solid var(--olive)}
.pill--serif{font:italic 400 26px/1 var(--serif);letter-spacing:0;text-transform:none}
/* WordPress: pill paragraphs take their icon from a class instead of an inline <svg> */
.pill--icon-books::before,.pill--icon-laptop::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--icon-books) center/contain no-repeat;mask:var(--icon-books) center/contain no-repeat}
.pill--icon-laptop::before{-webkit-mask-image:var(--icon-laptop);mask-image:var(--icon-laptop)}
.toss{position:relative;min-height:360px}
.toss .pill{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));cursor:grab;user-select:none;touch-action:none;transition:transform .35s var(--ease)}
.toss .pill:hover{transform:rotate(calc(var(--r) * .3)) translateY(-3px)}
.toss .pill.is-drag{cursor:grabbing;transition:none;z-index:5}
/* WordPress: toss positions from the page, set by order so editors don't need inline styles */
.toss>.pill:nth-child(1){--x:6%;--y:6%;--r:-5deg}
.toss>.pill:nth-child(2){--x:52%;--y:3%;--r:4deg}
.toss>.pill:nth-child(3){--x:14%;--y:30%;--r:-2deg}
.toss>.pill:nth-child(4){--x:52%;--y:29%;--r:5deg}
.toss>.pill:nth-child(5){--x:3%;--y:56%;--r:-3deg}
.toss>.pill:nth-child(6){--x:50%;--y:56%;--r:-5deg}
.toss>.pill:nth-child(7){--x:28%;--y:80%;--r:2deg}
@media (max-width:700px){.toss{min-height:0;display:flex;flex-wrap:wrap;gap:12px 10px}.toss .pill{position:relative;left:auto;top:auto}}
.tape{position:absolute;top:-13px;left:50%;width:110px;height:28px;transform:translateX(-50%) rotate(-3deg);background:var(--blush);opacity:.92;z-index:2}
.tape--orange{background:var(--orange)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange)}

/* ---------- 9. stickers ---------- */
.sticker{display:block;transform:rotate(var(--rot,-6deg));filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));transition:transform .45s var(--ease);overflow:visible}
.sticker:hover{transform:rotate(calc(var(--rot,-6deg) * -.4)) scale(1.05)}

/* ---------- 10. tickers ---------- */
.ticker{overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-flex;animation:ticker var(--speed,70s) linear infinite}
.ticker__track span{font:700 13px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:0 22px}
.ticker__track i{font-style:normal;font-weight:700;opacity:.6}
.ticker--blush{background:var(--blush);color:var(--olive);padding:20px 0;--speed:70s}
.ticker--orange{background:var(--orange);color:var(--olive);padding:22px 0;--speed:24s;transform:rotate(-1.6deg);margin-inline:-2%}
.ticker--orange .ticker__track span{font-size:16px}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- 11. nav + menu ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:var(--page);border-bottom:1px solid var(--border)}
.nav__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__links{display:flex;align-items:center;gap:32px;list-style:none;padding:0;font-size:15px}
.nav__links a:not(.btn){text-decoration:none;color:var(--text);transition:color .2s}
.nav__links a:not(.btn):hover{color:var(--ox)}
.nav__join{height:48px;padding:0 24px;font-size:13px}
.nav__burger{display:none;width:44px;height:44px;border:0;background:none;color:var(--heading);font-size:30px;padding:0}
/* WordPress: the system switches to the compact bar at 900px. The header button's
   label is editable, and "Book a right fit call" is much longer than the original
   "Join", so the full row of links no longer fits below 1100px. The compact bar
   (logo, button, menu icon) is used up to 1099px instead; keep theme.js in sync. */
@media (max-width:1099px){
  :root{--nav-h:72px}
  .nav__links li:not(.nav__cta){display:none}
  .nav__burger{display:grid;place-items:center}
  .nav .logo{--logo-size:32px}
  .nav .logo__studio{display:none}
}
/* Just above that, drop the logo's "Creative Studio" line, as the compact bar does;
   on phones the button moves into the mobile menu. Links never break mid-label. */
.nav__links a{white-space:nowrap}
@media (max-width:1199px){.nav .logo__studio{display:none}}
@media (max-width:560px){.nav__cta--button{display:none}}
.menu{position:fixed;inset:0;z-index:100;background:var(--green);color:var(--cream);display:none;flex-direction:column;padding:0 24px 32px}
.menu.is-open{display:flex}
.menu__top{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(241,230,200,.18)}
.menu__top .logo{color:var(--cream);--logo-size:32px}
.menu__close{border:0;background:none;color:var(--cream);font-size:30px;width:44px;height:44px;display:grid;place-items:center}
.menu__links{list-style:none;padding:32px 0 0;margin:0;display:flex;flex-direction:column}
.menu__links a{display:block;font:400 clamp(44px,12vw,64px)/1.15 var(--serif);color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(241,230,200,.16);padding:6px 0}
.menu__links a:hover{font-style:italic;color:var(--blush)}
.menu__foot{margin-top:auto;display:flex;flex-direction:column;gap:18px}
.menu__foot p,.menu__foot ul{font-size:14px;opacity:.85}
/* WordPress: the contact lines in the menu come from the "Footer: Say hello" menu */
.menu__foot ul{list-style:none;padding:0}
.menu__foot ul a{color:inherit;text-decoration:none}

/* ---------- 12. hero ---------- */
.hero{background:var(--green);--heading:var(--cream);--text:rgba(241,230,200,.86);--label:var(--blush);color:var(--text);padding-block:clamp(64px,9vw,128px) clamp(72px,10vw,140px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero__actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:8px}
.index-cards{position:relative;height:clamp(360px,34vw,480px)}
.index-card{position:absolute;width:min(78%,380px);aspect-ratio:5/3;background:var(--card);border-radius:18px;padding:14px;box-shadow:0 22px 40px -18px rgba(0,0,0,.55);transform:rotate(var(--r,0deg));transition:transform .45s var(--ease)}
.index-card:hover{transform:rotate(0) translateY(-6px);z-index:3}
.index-card .label{font-size:11px;display:block;margin-bottom:10px;color:var(--ox)}
.index-card .mini,.index-card img{height:calc(100% - 28px);width:100%;object-fit:cover;border-radius:10px}
/* WordPress: an Image block can replace the stand-in in each card */
.index-card .wp-block-image{height:calc(100% - 28px);margin:0}
.index-cards .index-card .wp-block-image img{height:100%;border:0;border-radius:10px}
.index-card:nth-child(1){left:0;top:0;--r:-7deg}
.index-card:nth-child(2){right:0;top:28%;--r:4deg}
.index-card:nth-child(3){left:6%;bottom:0;--r:-2deg}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .index-cards{height:auto;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:12px var(--pad) 26px}
  .index-card{position:relative;inset:auto !important;flex:0 0 78%;scroll-snap-align:center;--r:0deg !important}
}

/* ---------- 13. work screenshot frame + stand-in ---------- */
.shot{border-radius:var(--r-shot);border:1px solid var(--border);overflow:hidden;background:var(--card);aspect-ratio:4/3}
.shot--wide{aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover}
.mini{position:relative;display:block;background:var(--paper);overflow:hidden;--a:var(--green);--b:var(--blush)}
.mini i{position:absolute;display:block;border-radius:99px}
.mini .m-top{left:0;right:0;top:0;height:42%;border-radius:0;background:var(--a)}
.mini .m-1{left:8%;top:12%;width:44%;height:8%;background:var(--cream)}
.mini .m-2{left:8%;top:25%;width:30%;height:8%;background:var(--b)}
.mini .m-btn{left:8%;top:52%;width:22%;height:11%;background:var(--a)}
.mini .m-lines{left:8%;top:70%;width:46%;height:22%;border-radius:0;background:repeating-linear-gradient(180deg,rgba(45,41,12,.22) 0 12%,transparent 12% 30%)}
.mini .m-img{right:7%;top:14%;width:34%;height:70%;border-radius:6px;background:var(--b)}
.mini .m-dot{right:12%;top:62%;width:9%;aspect-ratio:1;height:auto;background:var(--orange)}

/* ---------- 14. cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:clamp(24px,3vw,36px);position:relative}
.card--tilt{transform:rotate(-1.5deg)}
.card--green{background:var(--green);border:0;--heading:var(--cream);--text:rgba(241,230,200,.86);--label:var(--blush);color:var(--text)}
.card--ox{background:var(--ox);border:0;--heading:var(--cream);--text:rgba(241,230,200,.86);--label:var(--blush);color:var(--text)}
.card--blush{background:var(--blush);border:0;--heading:var(--green);--text:var(--olive);--label:var(--ox);color:var(--text)}
.feature{display:flex;flex-direction:column;gap:16px}
.checklist{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.checklist .ic{font-size:20px;color:var(--heading);margin-top:3px}
.checklist--serif li{font:400 24px/1.3 var(--serif);color:var(--heading)}
/* WordPress: List blocks can't hold an <svg>, so the check is drawn before each item */
.wp-block-list.checklist li::before{content:"";width:20px;height:20px;flex:none;margin-top:3px;background:var(--heading);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}

/* ---------- 15. before + now (sticky stack) ---------- */
.bn-stack{position:relative}
.bn-card{position:sticky;top:calc(var(--nav-h) + 24px + var(--i,0) * 22px);display:grid;grid-template-columns:1fr 1fr;min-height:270px;margin-bottom:150px;
  border-radius:20px;overflow:hidden;transform:rotate(var(--tilt,-2deg));border:1px solid rgba(45,41,12,.14);box-shadow:var(--shadow-soft)}
.bn-card:last-child{margin-bottom:0}
.bn-card:nth-child(2){--i:1;--tilt:1.5deg}
.bn-card:nth-child(3){--i:2;--tilt:-1deg}
.bn-card:nth-child(4){--i:3;--tilt:1deg}
.bn-card__before{background:var(--ox);color:var(--cream);padding:clamp(22px,2.6vw,30px)}
.bn-card__now{background:var(--paper);color:var(--green);padding:clamp(22px,2.6vw,30px)}
.bn-card__before .label{color:rgba(241,230,200,.75)}
.bn-card__now .label{color:var(--ox)}
.bn-card__text{font:400 clamp(26px,2.6vw,36px)/1.08 var(--serif);margin-top:22px}
.bn-card__before .bn-card__text{text-decoration:line-through;text-decoration-color:var(--blush);text-decoration-thickness:2px}
.bn-card__line{font-size:var(--fs-small);margin-top:12px;color:var(--olive)}
@media (max-width:900px){.bn-card{position:relative;top:auto;margin-bottom:16px}}
@media (max-width:560px){.bn-card{grid-template-columns:1fr}}

/* ---------- 16. folders ---------- */
.folders{position:relative;height:430px}
.folder{position:absolute;left:0;right:0;top:calc(70px - var(--d) * 16px);bottom:calc(var(--d) * 16px);z-index:calc(10 - var(--d));transition:top .5s var(--ease),bottom .5s var(--ease)}
/* WordPress: starting depth before theme.js takes over */
.folder:nth-child(1){--d:0}.folder:nth-child(2){--d:1}.folder:nth-child(3){--d:2}
.folder--green{--fc:var(--green);--ft:var(--cream);--fh:var(--cream);--tx:3%}
.folder--blush{--fc:var(--blush);--ft:var(--olive);--fh:var(--green);--tx:32%}
.folder--orange{--fc:var(--orange);--ft:var(--olive);--fh:var(--olive);--tx:61%}
.folder__tab{position:absolute;top:-42px;left:var(--tx);height:44px;width:36%;border:0;border-radius:14px 14px 0 0;background:var(--fc);color:var(--ft);font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.folder__body{height:100%;background:var(--fc);color:var(--ft);border-radius:18px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;position:relative;box-shadow:0 -6px 20px -12px rgba(45,41,12,.4)}
.folder.is-front .folder__body{box-shadow:0 18px 30px -18px rgba(45,41,12,.45)}
.folder__body .h3,.folder__body h3{color:var(--fh);font-size:clamp(34px,3.4vw,50px);margin-bottom:12px}
.folder__body p{font-size:var(--fs-small);max-width:34ch}
.folder__body .btn,.folder__body .wp-block-button__link{margin-top:20px;height:52px;font-size:13px;padding:0 24px}
.folder__body .wp-block-button__link{margin-top:0}
.folder__body .wp-block-buttons{margin-top:20px}
.folder--green .btn,.folder--green .wp-block-button__link{--bg:var(--blush);--fg:var(--olive);--hbg:var(--cream);--hfg:var(--olive);--sh:var(--orange)}
.folder:not(.is-front) .folder__content{opacity:0;pointer-events:none}
.folder__content{transition:opacity .3s}
.folder__paper{background:var(--paper);color:var(--green);border-radius:10px;padding:22px 22px 18px;transform:rotate(2deg);box-shadow:0 14px 24px -12px rgba(0,0,0,.4);position:relative}
.folder__paper .clip{position:absolute;top:-20px;right:26px;font-size:44px;color:var(--olive)}
/* WordPress: paper clip drawn on the Group block */
.wp-block-group.folder__paper::before{content:"";position:absolute;top:-20px;right:26px;width:44px;height:44px;background:var(--olive);-webkit-mask:var(--icon-clip) center/contain no-repeat;mask:var(--icon-clip) center/contain no-repeat}
.folder__sticker{position:absolute;right:-12px;top:-30px;z-index:4}
@media (max-width:700px){
  .folders{height:640px}
  .folder__body{grid-template-columns:1fr;align-content:start;padding:24px}
  .folder__tab{font-size:9.5px;letter-spacing:.1em;width:34%}
}

/* ---------- 17. pricing ---------- */
.price-card{background:var(--card);color:var(--olive);border-radius:var(--r-price);position:relative;max-width:620px;
  --heading:var(--green);--label:var(--ox);--dotline:rgba(45,41,12,.35)}
.price-card::before{content:"";display:block;height:12px;border-radius:var(--r-price) var(--r-price) 0 0;background:linear-gradient(90deg,var(--blush) 0 33.33%,var(--orange) 33.33% 66.66%,var(--ox) 66.66%)}
.price-card__body{padding:clamp(28px,4vw,48px)}
.price-lines{list-style:none;padding:0;margin:24px 0}
/* WordPress: in the List block each item is "Name <strong>value</strong>"; the dots are drawn between them */
.price-line,.price-lines>li{display:flex;align-items:baseline;gap:12px;padding:10px 0;font-size:16px}
.price-line__dots,.wp-block-list.price-lines>li::after{flex:1;border-bottom:2px dotted var(--dotline);transform:translateY(-5px)}
.wp-block-list.price-lines>li::after{content:"";order:1}
.price-line__value,.wp-block-list.price-lines>li strong{font-weight:700;color:var(--label);white-space:nowrap}
.wp-block-list.price-lines>li strong{order:2}
.price-line--total,.price-lines>li.price-line--total{font-weight:700;border-top:1px solid var(--border);margin-top:8px;padding-top:18px}
.price-pay{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:10px 0 28px}
.price-pay__amount{font:400 clamp(56px,6vw,84px)/1 var(--serif);color:var(--ox)}
.price-sticker{position:absolute;top:-30px;right:-22px;z-index:2;width:118px;height:118px;border-radius:50%;background:var(--orange);color:var(--olive);display:grid;place-items:center;text-align:center;transform:rotate(12deg);font:700 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--shadow-soft)}
.price-sticker b,p.price-sticker strong{display:block;font:400 34px/1 var(--serif);letter-spacing:0;text-transform:none}
p.price-sticker{align-content:center;gap:0}
.price-card__band{border-radius:0 0 var(--r-price) var(--r-price);background:var(--blush);color:var(--ox);padding:16px clamp(28px,4vw,48px);font:700 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.price-card__band .ic{font-size:18px}
p.price-card__band::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
@media (max-width:560px){.price-sticker{right:-6px;width:96px;height:96px}.price-sticker b,p.price-sticker strong{font-size:26px}}

/* ---------- 18. about ---------- */
.about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.signature{font:400 clamp(44px,5vw,64px)/1 var(--hand);color:var(--ox);transform:rotate(-6deg);display:inline-block;margin-top:18px}
.about__aside{position:relative;display:grid;place-items:center}
@media (max-width:900px){.about{grid-template-columns:1fr}}

/* ---------- 19. faq ---------- */
.faq{border-top:1px solid var(--border);max-width:860px}
.faq__item{border-bottom:1px solid var(--border)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:400 clamp(24px,2.4vw,32px)/1.15 var(--serif);color:var(--heading)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .ic{font-size:26px;flex:none;transition:transform .35s var(--ease);color:var(--label)}
.faq__item[open] summary .ic{transform:rotate(45deg)}
/* WordPress: the Details block summary is text only, so the plus is drawn after it */
.wp-block-details.faq__item summary::after{content:"";width:26px;height:26px;flex:none;background:var(--label);-webkit-mask:var(--icon-plus) center/contain no-repeat;mask:var(--icon-plus) center/contain no-repeat;transition:transform .35s var(--ease)}
.wp-block-details.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{padding:0 0 26px;max-width:60ch}

/* ---------- 20. steps ---------- */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:step}
.steps li{counter-increment:step;border-top:1.5px solid var(--heading);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.steps li::before{content:counter(step,decimal-leading-zero);font:italic 400 56px/1 var(--serif);color:var(--label)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* ---------- 21. forms ---------- */
/* WordPress: fields inside the main content (comment, search, password
   and any form a block adds) use the system field styles */
.form{display:flex;flex-direction:column;gap:20px}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:clamp(24px,3.4vw,40px)}
.field{display:flex;flex-direction:column;gap:8px}
.field__label,.wp-block-search__label,.fluentform .ff-el-input--label label,:where(main) label:where(:not(.check,.ff-el-form-check-label)){font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--heading)}
:where(main) label:where(:not(.check,.field__label,.fluentform label)){display:block;margin-bottom:8px}
.input,.wp-block-search__input,.fluentform .ff-el-form-control,:where(main) :where(input:not([type="checkbox"],[type="radio"],[type="submit"],[type="button"],[type="reset"],[type="hidden"],[type="file"],[type="range"],[type="color"],[type="image"]),select,textarea){width:100%;height:56px;background:var(--field);border:1.5px solid rgba(45,41,12,.42);border-radius:var(--r-input);padding:0 18px;font:400 16px/1.4 var(--sans);color:var(--text);transition:border-color .2s,box-shadow .2s;appearance:none}
[data-theme="dark"] .input,.section--green .input,.section--ox .input,
:where(.section--green,.section--ox) :where(main) :where(input:not([type="checkbox"],[type="radio"],[type="submit"]),select,textarea){border-color:rgba(241,230,200,.35)}
.input::placeholder,.fluentform .ff-el-form-control::placeholder,:where(main) :where(input,textarea)::placeholder{color:rgba(45,41,12,.5)}
[data-theme="dark"] .input::placeholder{color:rgba(241,230,200,.45)}
.input:focus,.input.is-focus,.wp-block-search__input:focus,.fluentform .ff-el-form-control:focus,:where(main) :where(input:not([type="checkbox"],[type="radio"],[type="submit"]),select,textarea):focus{outline:none;border-color:var(--green);box-shadow:0 0 0 5px rgba(232,197,229,.95)}
[data-theme="dark"] .input:focus,[data-theme="dark"] .input.is-focus{border-color:var(--blush);box-shadow:0 0 0 5px rgba(232,197,229,.35)}
textarea.input,.fluentform textarea.ff-el-form-control,:where(main) textarea{height:auto;min-height:140px;padding:16px 18px;resize:vertical}
select.input,.fluentform select.ff-el-form-control,:where(main) select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D290C' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px;padding-right:48px}
[data-theme="dark"] select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1E6C8' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.field--error .input,.fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--ox)}
.field__error,.fluentform .ff-el-group.ff-el-is-error .text-danger{display:flex;align-items:center;gap:6px;font:700 13px/1.4 var(--sans);color:var(--ox)}
[data-theme="dark"] .field--error .input{border-color:var(--blush)}
[data-theme="dark"] .field__error{color:var(--blush)}
.check,.fluentform .ff-el-form-check-label{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-small);cursor:pointer}
.check input,.fluentform .ff-el-form-check-input,:where(main) input[type="checkbox"]{appearance:none;width:22px;height:22px;border:1.5px solid rgba(45,41,12,.5);border-radius:6px;background:var(--field);display:grid;place-items:center;flex:none;margin:1px 0 0;cursor:pointer}
.check input:checked,:where(main) input[type="checkbox"]:checked{background:var(--green);border-color:var(--green)}
[data-theme="dark"] .check input:not(:checked){border-color:rgba(241,230,200,.4)}
.check input:checked::after,:where(main) input[type="checkbox"]:checked::after{content:"";width:6px;height:11px;border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.check input:focus-visible,:where(main) input[type="checkbox"]:focus-visible{box-shadow:0 0 0 4px rgba(232,197,229,.95);outline:none}
.form-row,.fluentform .frm-fluent-form .ff-t-container{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-row,.fluentform .frm-fluent-form .ff-t-container{grid-template-columns:1fr}}
.pay-slot{border:1.5px dashed var(--dotline);border-radius:var(--r-input);padding:22px;font-size:var(--fs-small);text-align:center;color:var(--text)}
/* WordPress: Fluent Forms. Its own skin is switched off in functions.php; the
   selectors added above give its fields, labels, errors and button the system
   styles. These lines only translate what Fluent's layout CSS does differently. */
.fluentform{--fluentform-danger:var(--ox);--fluentform-primary:var(--green)}
.fluentform .ff-el-input--label,.fluentform .ff-el-input--label label{display:block;margin-bottom:0}
.fluentform .ff-el-input--label{margin-bottom:8px}
.fluentform .ff-el-form-check:last-child{margin-bottom:0}
.fluentform .frm-fluent-form .ff-t-container{margin-bottom:20px}
.fluentform .ff-t-container .ff-el-group{margin-bottom:0}
.fluentform .ff-el-form-check-label .ff-el-form-check-input{top:0;margin:1px 0 0}
.fluentform .ff-el-group.ff-el-is-error .text-danger{margin-top:8px}
.fluentform .ff-el-group.ff-el-is-error .text-danger::before{content:"";width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--icon-cross) center/contain no-repeat;mask:var(--icon-cross) center/contain no-repeat}
.ff-message-success{border:0;box-shadow:none;padding:0;margin:0}

/* ---------- 22. final call ---------- */
.final{background:var(--ox);--heading:var(--cream);--text:rgba(241,230,200,.86);color:var(--text);position:relative;overflow:hidden;padding-bottom:clamp(90px,10vw,140px)}
.final .ticker--orange{margin-top:-20px}
.final__in{position:relative;padding-top:clamp(70px,9vw,120px)}
.final .h-final em{color:var(--blush)}
.final__actions{margin-top:clamp(40px,5vw,64px)}
.final__stickers{position:absolute;right:var(--pad);top:clamp(90px,10vw,140px);display:flex;flex-direction:column;align-items:flex-end}
@media (max-width:1000px){.final__stickers{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:40px}}

/* ---------- 23. footer ---------- */
.footer{background:var(--green);color:var(--cream);overflow:hidden;container-type:inline-size;padding-top:clamp(64px,7vw,96px);--heading:var(--cream);--label:var(--blush)}
.footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.footer__line{font:400 30px/1.1 var(--serif);margin-top:22px;max-width:19ch}
.footer ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px}
.footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:56px;padding-top:20px;border-top:1px solid rgba(241,230,200,.2);font-size:13px;opacity:.75}
.footer__legal div{display:flex;gap:22px}
/* WordPress: the legal links are a menu list laid out like the original row */
.footer__legal ul{flex-direction:row;flex-wrap:wrap;gap:22px;margin:0}
.footer__giant{height:18cqw;overflow:hidden;margin-top:48px}
.footer__giant span{display:block;font:italic 400 34cqw/.74 var(--serif);color:var(--blush);white-space:nowrap;letter-spacing:-.02em;margin-left:-.04em}
@media (max-width:900px){.footer__cols{grid-template-columns:1fr 1fr}.footer__cols>div:first-child{grid-column:span 2}}
@media (max-width:560px){.footer__cols{grid-template-columns:1fr}.footer__cols>div:first-child{grid-column:auto}}

/* ---------- 24. motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* =====================================================================
   PAGE-LEVEL RULES
   Carried over from the "This page only" block of the approved page,
   plus the few inline styles it used, as classes the editor can apply.
   ===================================================================== */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:var(--nav-h)}
.about__text p + p{margin-top:16px}
.about__text .lead{margin-top:24px}
.about__text .section-head{margin-bottom:0}
.about__text .signature{margin-top:18px}
.about__text .about__more{margin-top:22px}
.toolkit .section-head{margin-bottom:0}
.section--cream + .section--cream{padding-top:0}
.split--center{align-items:center}
.section-head--flush{margin:0}
/* The approved page used inline <span class="label"> in these spots, which sit on a
   body-height line. Blocks and footer headings are block-level, so match that line. */
:is(.bn-card__before,.bn-card__now,.price-card__body,.footer__cols nav) > :is(p,h2).label{line-height:calc(var(--fs-body) * 1.7)}

/* =====================================================================
   WORDPRESS CONTENT
   How ordinary pages and posts use the system. Every value below comes
   from the tokens above.
   ===================================================================== */

/* page shell */
.site-main--page{padding-block:var(--section)}
.page-header{margin-bottom:clamp(40px,5vw,64px)}

/* spacing between blocks in ordinary content */
:is(.entry-content,.is-root-container) > :is(h2,h3,h4){margin-block-start:clamp(40px,5vw,64px)}
:is(.entry-content,.is-root-container) :is(ul,ol):not(.checklist,.price-lines,.steps) li + li{margin-top:8px}

/* images, captions, embeds */
:is(.entry-content,.is-root-container) :is(.wp-block-image,.wp-block-gallery) img{border-radius:var(--r-shot);border:1px solid var(--border)}
figcaption,.wp-element-caption{font-size:var(--fs-small);line-height:1.6;margin-top:12px}

/* quotes, rules, tables */
blockquote,.wp-block-quote{margin:0;padding-left:24px;border-left:1.5px solid var(--heading);font:400 var(--fs-h3)/1.08 var(--serif);color:var(--heading)}
blockquote cite,.wp-block-quote cite{display:block;margin-top:12px;font:700 var(--fs-label)/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--label)}
hr,.wp-block-separator{border:0;border-top:1px solid var(--border);margin-inline:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
th{text-align:left;font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--label);padding:0 12px 12px 0}
td{padding:10px 12px 10px 0;border-top:1px solid var(--border);vertical-align:middle}
.wp-block-table :is(thead,tfoot){border:0}
.wp-block-table :is(th,td){border:0;border-top:1px solid var(--border);padding:10px 12px 10px 0}
.wp-block-table th{border-top:0;padding-top:0}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-input);padding:18px;overflow-x:auto}

/* post lists (blog index, archives, search) */
.post-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.post-list .h3 a{text-decoration:none}
.post-list .h3 a:hover{color:var(--ox)}
.nav-links{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(40px,5vw,64px)}

/* =====================================================================
   ACCESSIBILITY + ADMIN BAR
   ===================================================================== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;top:12px;left:12px;z-index:1000;padding:14px 22px;border-radius:var(--r-pill);background:var(--green);color:var(--cream);font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
/* visible focus for links and controls that the system doesn't already cover */
a:focus-visible,summary:focus-visible,.nav__burger:focus-visible,.menu__close:focus-visible,.folder__tab:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.admin-bar .nav{top:var(--wp-admin--admin-bar--height,32px)}
.admin-bar .menu{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .nav,.admin-bar .menu{top:0}}