/*
Theme Name: AdaptaPlay Light
Theme URI: https://adaptaplay.org/
Description: Light design system for AdaptaPlay. Child theme of Extendable. Paper, ink and sky surfaces, Exo 2 self-hosted, radius 0 throughout, one accent used as a full surface rather than trim. Built to WCAG AA in both light and dark.
Author: AdaptaPlay
Template: extendable
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adaptaplay-light
*/

/* =============================================================
   The design system below is the same stylesheet used in the
   static preview, so the two cannot drift. Everything after the
   "WORDPRESS LAYER" banner maps core and WooCommerce blocks onto
   these tokens, which is what lets pages nobody hand built, cart,
   checkout and account included, pick the design up on their own.
   ============================================================= */
/* =============================================================
   AdaptaPlay
   DESIGN_VARIANCE 9 · MOTION_INTENSITY 3 · VISUAL_DENSITY 3

   Variance 9 per §1.A for a redesign-overhaul. The accessibility
   constraint shapes MOTION and CONTRAST, not composition: nothing
   moves on scroll, everything clears WCAG AA, every target is 46px
   or more, and the layout is still free to be loud.

   LIGHT VARIANT. Same composition and type, no ink mass. The page
   runs paper and sky only; the sky field carries the weight that the
   ink band carried before. Dark mode still exists behind the toggle,
   but the document opens light regardless of the system setting,
   because that is the point of this variant.

   SHAPE LOCK: radius 0. Everywhere. No pills, no exceptions.
   COLOR LOCK: one accent, sky #6CBCE0, used as a full surface with
     ink type on it (8.56:1), not as timid trim. Never paper on sky,
     which is 1.99:1.
   SURFACES: paper, ink, sky. Three fields, used at large scale.

   Stack: native CSS. The live site is a WordPress block theme on
   shared hosting with no node, npm or build step, so the skill's
   React + Tailwind + Motion default cannot ship there. At motion 3
   no animation library is needed.
   ============================================================= */


:root{
  --sky:#6CBCE0;
  --sky-deep:#1C6E8F;

  --ink:#0B1720;
  --ink-2:#162A38;

  --paper:#F6F8F9;
  --paper-raised:#FDFEFE;
  --rule:#D3DCE2;

  --bg:var(--paper);
  --surface:var(--paper-raised);
  --text:#2B3D49;
  --heading:var(--ink);
  --border:var(--rule);
  --muted:#5A6D79;
  --accent-text:var(--sky-deep);

  --field-sky-muted:rgba(11,23,32,.78);
  --field-sky-border:rgba(11,23,32,.24);

  --btn-bg:var(--ink);
  --btn-fg:#F2F6F8;
  --btn-bg-hover:var(--ink-2);

  --focus:var(--sky-deep);

  --r:0;                         /* the entire radius system */

  --gutter:clamp(20px,5.2vw,72px);
  --maxw:1440px;
  --sec:clamp(88px,11vw,176px);
  --mast-h:96px;

  --font:'Exo 2',ui-sans-serif,system-ui,sans-serif;
  --fs-display:clamp(44px,8.6vw,124px);
  --fs-h2:clamp(34px,4.2vw,62px);
  --fs-h3:clamp(25px,2.1vw,34px);
  --fs-lead:clamp(22px,1.9vw,29px);
  --fs-body:clamp(19px,1.2vw,23px);
  --fs-small:17px;
  --fs-label:13px;

  --dur:140ms;
  --ease:cubic-bezier(.2,0,.2,1);

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#081118;
    --surface:#101E29;
    --text:#B8C8D2;
    --heading:#F2F6F8;
    --border:#25404F;
    --muted:#8B9EAA;
    --accent-text:var(--sky);
    --btn-bg:var(--sky);
    --btn-fg:var(--ink);
    --btn-bg-hover:#8ACDEC;
    --focus:var(--sky);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#081118;
  --surface:#101E29;
  --text:#B8C8D2;
  --heading:#F2F6F8;
  --border:#25404F;
  --muted:#8B9EAA;
  --accent-text:var(--sky);
  --btn-bg:var(--sky);
  --btn-fg:var(--ink);
  --btn-bg-hover:#8ACDEC;
  --focus:var(--sky);
  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur:0ms}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);font-weight:450;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
/* the rule above outranks the UA's [hidden] rule, which would otherwise
   keep a hidden <svg> visible. The menu button has two icons and only one
   may show at a time. */
[hidden]{display:none !important}
h1,h2,h3{margin:0;color:var(--heading)}
/* No bare font-size on h1/h2/h3: these leaked onto every WordPress heading and
   overrode theme.json, which is why a product title rendered at 8.6vw. The
   display scale now belongs to the components that want it. */
h1{text-wrap:balance}
h2{text-wrap:balance}
h3{}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--accent-text)}
strong{font-weight:700;color:var(--heading)}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r);
}

.label{font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.lead{font-size:var(--fs-lead);line-height:1.42;color:var(--text)}
.small{font-size:var(--fs-small);line-height:1.55}
.muted{color:var(--muted)}
.m64{max-width:64ch}.m46{max-width:46ch}.m38{max-width:38ch}.m30{max-width:30ch}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#F2F6F8;padding:18px 24px;font-weight:700;text-decoration:none}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.icon{width:1.2em;height:1.2em;flex:none;fill:currentColor}

:target,#main,#how,#modules,#buy,#fit,#institutions,#questions{scroll-margin-top:calc(var(--mast-h) + 16px)}

/* ---------- buttons. Rectangles. ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:60px;padding:0 32px;
  font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.1;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  border:2px solid transparent;border-radius:var(--r);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{background:var(--btn-bg-hover);color:var(--btn-fg)}
.btn-ghost{background:transparent;color:var(--heading);border-color:var(--heading)}
.btn-ghost:hover{background:var(--heading);color:var(--bg)}
.btn:active{transform:translateY(2px)}
.btn-wide{min-height:68px;padding:0 40px;font-size:19px}

.field-ink .btn-primary{background:var(--ink);color:#F2F6F8}
.field-ink .btn-primary:hover{background:var(--ink-2);color:#F2F6F8}
.field-ink .btn-ghost{color:var(--ink);border-color:var(--ink)}
.field-ink .btn-ghost:hover{background:var(--ink);color:var(--sky)}
.field-ink :where(a,button,summary):focus-visible{outline-color:var(--ink)}

.field-sky .btn-primary{background:var(--ink);color:#F2F6F8}
.field-sky .btn-primary:hover{background:var(--ink-2);color:#F2F6F8}
.field-sky .btn-ghost{color:var(--ink);border-color:var(--ink)}
.field-sky .btn-ghost:hover{background:var(--ink);color:var(--sky)}
.field-sky :where(a,button,summary):focus-visible{outline-color:var(--ink)}

/* ---------- masthead. A rule, not a filled bar. ---------- */
.mast{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--heading)}
.mast-in{
  height:var(--mast-h);display:flex;align-items:center;gap:clamp(14px,2vw,36px);
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none;min-height:52px}
.brand img{width:40px;height:40px}
.brand b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--heading);line-height:1}
.mast nav{margin-left:auto}
.navlist{display:flex;align-items:center;gap:clamp(6px,1.3vw,26px)}
.navlist a{
  display:inline-flex;align-items:center;min-height:52px;padding:0 4px;
  font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--heading);text-decoration:none;border-bottom:3px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.navlist a:hover{border-bottom-color:var(--sky);color:var(--heading)}
.mast-util{display:flex;align-items:center;gap:6px;flex:none}
.util{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:52px;min-height:52px;padding:0 12px;
  background:transparent;border:2px solid transparent;border-radius:var(--r);
  color:var(--heading);font-family:inherit;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:border-color var(--dur) var(--ease);
}
.util:hover{border-color:var(--heading)}
.util .icon{width:24px;height:24px}
.mast .btn{min-height:52px;padding:0 22px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.mast-toggle{display:none}
.theme-toggle [data-ti="dark"]{display:none}
:root[data-theme="dark"] .theme-toggle [data-ti="dark"]{display:block}
:root[data-theme="dark"] .theme-toggle [data-ti="light"]{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle [data-ti="dark"]{display:block}
  :root:not([data-theme="light"]) .theme-toggle [data-ti="light"]{display:none}
}
@media (max-width:1120px){
  .mast-toggle{display:inline-flex;margin-left:auto}
  .mast nav{margin-left:0}
  .navlist{
    position:absolute;left:0;right:0;top:var(--mast-h);flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:2px solid var(--heading);padding:0 var(--gutter) 16px;display:none;
  }
  .navlist[data-open="true"]{display:flex}
  .navlist a{min-height:60px;font-size:15px;letter-spacing:.1em;border-bottom:1px solid var(--border)}
  .navlist li:last-child a{border-bottom:0}
  .mast .btn{display:none}
}
@media (max-width:620px){.brand b{display:none}.util .t{display:none}}

/* ---------- hero. Full bleed video, type laid over it. ---------- */
/* Light hero: ink type on paper at the left, footage bleeding to the right
   viewport edge. No scrim, because no type sits over the video. -2px for the
   masthead rule, which is outside --mast-h. */
.hero{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;background:var(--bg);
  min-height:min(880px,calc(100dvh - var(--mast-h) - 2px));
}
.hero-in{
  /* aligns with .wrap's left edge while the grid itself runs full width */
  padding-block:clamp(40px,6vh,88px);
  padding-left:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-right:clamp(24px,3vw,56px);
}
/* The hero headline lives in a half-width column here, so it cannot use the
   full-bleed display scale. §4.7: plan font size and column width together. */
.hero h1{font-size:clamp(36px,4.6vw,78px);max-width:13ch}
.hero .lead{margin-top:clamp(20px,2vw,30px);max-width:38ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,42px)}
.hero-media{position:relative;align-self:stretch;overflow:hidden;background:var(--ink);border-left:2px solid var(--heading)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;pointer-events:none}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-in{padding-inline:var(--gutter);padding-block:clamp(32px,5vh,56px) clamp(36px,5vh,64px)}
  .hero-media{order:-1;aspect-ratio:16/10;border-left:0;border-bottom:2px solid var(--heading)}
  .hero h1,.hero .lead{max-width:none}
}

/* ---------- sky statement. The signature field. ---------- */
.field-sky{background:var(--sky);color:var(--ink)}
.field-sky h2,.field-sky h3{color:var(--ink)}
.field-sky p{color:var(--field-sky-muted)}
.statement{padding-block:clamp(72px,9vw,140px)}
.statement .say{
  font-size:clamp(28px,4.6vw,62px);font-weight:800;letter-spacing:-.036em;line-height:1.02;
  color:var(--ink);max-width:19ch;margin-left:auto;
}
.statement .meta{
  margin-top:clamp(28px,3.2vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,40px);border-top:2px solid var(--field-sky-border);padding-top:clamp(20px,2vw,30px);
}
.statement .meta dt{font-size:clamp(17px,1.4vw,21px);font-weight:700;letter-spacing:-.018em;color:var(--ink);line-height:1.25}
.statement .meta dd{margin:6px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--field-sky-muted)}
@media (max-width:820px){
  .statement .say{margin-left:0;max-width:none}
  .statement .meta{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ---------- how it works. Hanging numerals, render bleeding right. ---------- */
.how{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,88px);align-items:start}
.how-head{margin-bottom:clamp(40px,5vw,80px);display:grid;gap:20px}
.steps{display:grid;gap:clamp(36px,4.4vw,68px)}
.step{display:grid;grid-template-columns:clamp(74px,8vw,150px) minmax(0,1fr);gap:clamp(14px,2vw,36px);align-items:start}
/* --accent-text, not --sky: bright sky on paper is 1.99:1 and fails even the
   large-text bar. This token is sky-deep in light, sky in dark, so the numeral
   stays saturated in both and clears 3:1 in both. */
.step .n{font-size:clamp(48px,7.4vw,118px);font-weight:800;letter-spacing:-.06em;line-height:.76;color:var(--accent-text)}
.step h3{margin-bottom:12px}
.step:nth-child(1) p{max-width:40ch}
.step:nth-child(2){padding-left:clamp(0px,5vw,92px)}
.step:nth-child(2) p{max-width:34ch}
.step:nth-child(3) p{max-width:37ch}
.how-aside{position:sticky;top:calc(var(--mast-h) + 32px);margin-right:calc(-1 * var(--gutter))}
.how-aside img{width:100%;height:auto;background:#FFFFFF;border:2px solid var(--heading)}
@media (max-width:980px){
  .how{grid-template-columns:minmax(0,1fr);gap:40px}
  .how-aside{position:static;margin-right:0;order:-1}
  .step:nth-child(2){padding-left:0}
}
@media (max-width:560px){
  .step{grid-template-columns:minmax(0,1fr);gap:4px}
  .step .n{font-size:56px}
}

/* ---------- modules. Horizontal scroll-snap strip, no hijack. ---------- */
.strip-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3vw,48px)}
.strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,420px);
  gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding-bottom:20px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
}
.strip > li{scroll-snap-align:start}
.strip:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.card{height:100%;display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--heading)}
.card figure{margin:0;aspect-ratio:4/3;background:#FFFFFF;overflow:hidden}
.card img{width:100%;height:100%;object-fit:contain;padding:16px}
.card.photo figure{background:var(--surface)}
.card.photo img{object-fit:cover;padding:0}
.card .cap{padding:22px clamp(18px,2vw,26px) 26px;border-top:2px solid var(--heading)}
.card .cap h3{margin-bottom:8px}
.card .cap p{font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.strip-hint{margin-top:14px;font-size:var(--fs-small);color:var(--muted)}

/* ---------- buy. Shot overlapping an ink panel. ---------- */
.buy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.buy-shot{position:relative;z-index:2;border:2px solid var(--heading);background:#FFFFFF}
.buy-shot img{width:100%;height:auto}
.buy-panel{
  position:relative;z-index:1;background:var(--surface);color:var(--text);
  border:2px solid var(--heading);
  padding:clamp(36px,4.4vw,72px) clamp(28px,3.4vw,60px) clamp(36px,4.4vw,72px) clamp(56px,6.4vw,112px);
  margin-left:clamp(-96px,-6vw,-40px);
}
.buy-panel h2{color:var(--heading)}
.buy-panel p{color:var(--text)}
.price{margin:clamp(20px,2.4vw,32px) 0;display:flex;align-items:baseline;gap:12px}
.price b{font-size:clamp(42px,5.4vw,78px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--heading)}
.price span{font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.incl{display:grid;gap:12px;margin-bottom:clamp(24px,3vw,36px)}
.incl li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:var(--fs-small);line-height:1.5;color:var(--text)}
.incl .icon{width:20px;height:20px;margin-top:2px;color:var(--accent-text)}
@media (max-width:980px){
  .buy{grid-template-columns:minmax(0,1fr)}
  .buy-panel{margin-left:0;padding:clamp(32px,5vw,48px)}
}

/* ---------- fit. Uneven type grid, hairline ruled. ---------- */
.fit-head{display:grid;gap:22px;margin-bottom:clamp(36px,4vw,64px)}
.fit-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid var(--heading)}
.fit-grid li{
  display:flex;align-items:center;gap:16px;
  padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,28px) clamp(22px,2.6vw,34px) 0;
  border-bottom:2px solid var(--heading);
}
.fit-grid li:nth-child(1){grid-column:span 3}
.fit-grid li:nth-child(2){grid-column:span 3}
.fit-grid li:nth-child(3){grid-column:span 2}
.fit-grid li:nth-child(4){grid-column:span 4}
.fit-grid .icon{width:26px;height:26px;color:var(--accent-text)}
.fit-grid b{font-size:clamp(19px,2vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--heading)}
.fit-foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:clamp(30px,3.4vw,48px)}
@media (max-width:820px){
  .fit-grid{grid-template-columns:minmax(0,1fr)}
  .fit-grid li:nth-child(n){grid-column:auto}
}

/* ---------- institutions. Full-bleed ink, photo bleeding left. ---------- */
/* the institutions band is sky, not ink: ink type on sky is 8.56:1 */
.field-ink{background:var(--sky);color:var(--ink)}
.field-ink h2,.field-ink h3{color:var(--ink)}
.field-ink p{color:var(--field-sky-muted)}
.inst{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.inst-media{margin-left:calc(-1 * var(--gutter))}
.inst-media img{width:100%;height:auto;border:2px solid var(--field-sky-border)}
.inst-copy{display:grid;gap:24px;justify-items:start}
.tags{display:flex;flex-wrap:wrap}
.tags li{
  padding:11px 18px;border:2px solid var(--field-sky-border);margin:0 -2px -2px 0;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
@media (max-width:980px){
  .inst{grid-template-columns:minmax(0,1fr)}
  .inst-media{margin-left:0;order:-1}
}

/* ---------- questions. Big editorial accordion. ---------- */
.qa{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,5vw,88px);align-items:start}
.qa-list{border-top:2px solid var(--heading)}
.qa-list details{border-bottom:2px solid var(--heading)}
.qa-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:84px;padding:18px 0;cursor:pointer;list-style:none;
  font-size:clamp(18px,1.9vw,27px);font-weight:700;letter-spacing:-.024em;line-height:1.15;
  color:var(--heading);transition:color var(--dur) var(--ease);
}
.qa-list summary::-webkit-details-marker{display:none}
.qa-list summary:hover{color:var(--accent-text)}
.qa-list summary .icon{width:28px;height:28px;color:var(--accent-text);transition:transform var(--dur) var(--ease)}
.qa-list details[open] summary .icon{transform:rotate(180deg)}
.qa-list .a{padding:0 0 30px;max-width:58ch;font-size:var(--fs-lead);line-height:1.45}
.qa-mail{display:inline-flex;align-items:center;min-height:46px;font-size:var(--fs-lead);font-weight:700;letter-spacing:-.01em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:980px){.qa{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ---------- footer ---------- */
.foot{background:var(--bg);color:var(--text);border-top:10px solid var(--sky);padding-block:clamp(56px,6vw,88px) 36px}
.foot a{color:var(--text);text-decoration:none}
.foot a:hover{color:var(--heading);text-decoration:underline}
.foot :where(a,button):focus-visible{outline-color:var(--focus)}
.foot .brand b{color:var(--heading)}
.foot-word{font-size:clamp(46px,12vw,168px);font-weight:800;letter-spacing:-.05em;line-height:.86;color:var(--heading);margin-bottom:clamp(36px,4vw,64px)}
.foot-word i{font-style:normal;color:var(--accent-text)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);border-top:2px solid var(--heading);padding-top:clamp(28px,3vw,44px)}
.foot h3{font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.foot-nav a{display:inline-flex;align-items:center;min-height:46px;font-size:var(--fs-small)}
.foot-blurb{max-width:34ch;color:var(--muted);font-size:var(--fs-small);margin-top:14px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;margin-top:clamp(32px,4vw,56px);padding-top:26px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
.foot-bottom address{font-style:normal}
.foot-social{display:flex;gap:10px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:46px;padding:0 10px;font-size:var(--fs-small)}
@media (max-width:820px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:30px}}

/* =============================================================
   CONTENT PAGES
   Everything below serves the pages other than the home page.
   Same tokens, same shape lock (radius 0), same one accent.
   ============================================================= */

/* ---------- page head. Sky field for content pages, paper for legal. ---------- */
.pagehead{padding-block:clamp(56px,7vw,110px)}
.pagehead .kicker{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:18px;
}
.pagehead h1{font-size:clamp(38px,6.4vw,92px);max-width:16ch}
.pagehead .lead{margin-top:clamp(18px,2vw,28px);max-width:48ch}
.pagehead.field-sky .kicker{color:var(--field-sky-muted)}
.pagehead.field-sky h1{color:var(--ink)}
.pagehead.field-sky .lead{color:var(--field-sky-muted)}
.pagehead.plain{border-bottom:2px solid var(--heading)}
.pagehead.plain .kicker{color:var(--accent-text)}

/* ---------- prose. The converted page body. ---------- */
.prose{max-width:66ch}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-size:clamp(24px,2.7vw,38px);margin-top:1.9em;
  padding-top:.5em;border-top:2px solid var(--heading);
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:clamp(18px,1.5vw,23px);margin-top:1.7em}
.prose p{font-size:var(--fs-body);line-height:1.68}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose ul,.prose ol{display:grid;gap:.6em;padding-left:0}
.prose li{position:relative;padding-left:1.6em;line-height:1.6}
.prose ul > li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;background:var(--accent-text);
}
.prose ol{counter-reset:p}
.prose ol > li{counter-increment:p}
.prose ol > li::before{
  content:counter(p);position:absolute;left:0;top:0;
  font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums;
}
.prose figure{margin:2em 0}
.prose figure img{width:100%;height:auto;border:2px solid var(--heading)}
.prose figcaption{margin-top:10px;font-size:var(--fs-small);color:var(--muted)}
.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 24px;border-left:6px solid var(--sky);
  font-size:var(--fs-lead);line-height:1.45;color:var(--heading);
}
.prose strong{font-weight:700}
.prose hr{border:0;border-top:2px solid var(--heading);margin:2.4em 0}

/* a wider page body with a sticky side rail */
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.4fr);gap:clamp(32px,5vw,80px);align-items:start}
.rail{position:sticky;top:calc(var(--mast-h) + 28px);display:grid;gap:22px}
.rail-card{border:2px solid var(--heading);padding:clamp(20px,2.2vw,28px);background:var(--surface)}
.rail-card h2{font-size:var(--fs-h3);margin-bottom:10px}
.rail-card p{font-size:var(--fs-small);line-height:1.55;color:var(--muted);margin-bottom:16px}
.rail-toc{display:grid;gap:0}
.rail-toc a{
  display:block;padding:11px 0;font-size:var(--fs-small);font-weight:550;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);
}
.rail-toc a:last-child{border-bottom:0}
.rail-toc a:hover{color:var(--accent-text)}
@media (max-width:980px){
  .page-grid{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
}

/* ---------- forms. Label above, no placeholder-as-label. ---------- */
.form{display:grid;gap:22px;max-width:44ch}
.field{display:grid;gap:8px}
.field label{font-size:var(--fs-small);font-weight:700;color:var(--heading)}
.field .hint{font-size:var(--fs-small);color:var(--muted)}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:var(--fs-body);color:var(--heading);
  background:var(--surface);border:2px solid var(--heading);border-radius:var(--r);
  padding:14px 16px;min-height:56px;width:100%;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;
}
.field .err{font-size:var(--fs-small);font-weight:700;color:var(--heading);display:none}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--accent-text)}
.field[data-invalid="true"] .err{display:block}
.form-note{font-size:var(--fs-small);color:var(--muted);max-width:44ch}

/* ---------- shop grid ---------- */
.shopgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pcard{display:flex;flex-direction:column;border:2px solid var(--heading);background:var(--surface)}
.pcard figure{margin:0;aspect-ratio:4/3;background:#FFFFFF;overflow:hidden;border-bottom:2px solid var(--heading)}
.pcard img{width:100%;height:100%;object-fit:contain;padding:14px}
.pcard .body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.pcard h2{font-size:var(--fs-h3);line-height:1.25}
.pcard .p-price{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--heading)}
.pcard .btn{margin-top:auto}
.soon{
  display:inline-flex;align-items:center;padding:8px 14px;border:2px solid var(--border);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:980px){.shopgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.shopgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4vw,72px);align-items:start}
.pdp-media{display:grid;gap:14px}
.pdp-media .main{border:2px solid var(--heading);background:#FFFFFF}
.pdp-media .main img{width:100%;height:auto}
.pdp-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pdp-thumbs img{width:100%;aspect-ratio:1;object-fit:contain;background:#FFFFFF;border:2px solid var(--heading);padding:8px}
.pdp-buy{display:grid;gap:20px;position:sticky;top:calc(var(--mast-h) + 28px)}
@media (max-width:980px){
  .pdp{grid-template-columns:minmax(0,1fr)}
  .pdp-buy{position:static}
}

/* ---------- spec rows ---------- */
.specs{display:grid;border-top:2px solid var(--heading)}
.specs > div{
  display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr);gap:20px;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.specs dt{font-weight:700;color:var(--heading);font-size:var(--fs-small)}
.specs dd{margin:0;font-size:var(--fs-small);line-height:1.55}
@media (max-width:520px){.specs > div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* =============================================================
   WORDPRESS LAYER

   Maps core and WooCommerce blocks onto the tokens above. This is
   deliberately conservative on the functional commerce pages: it
   changes type, colour, borders and radius, and does NOT move
   anything. Cart, checkout and account keep the markup and the
   layout WooCommerce ships, so nothing in the purchase path
   depends on a selector this file invents.
   ============================================================= */

/* ---------- base ---------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-weight:450;
  line-height:1.62;
  overflow-x:hidden;
}

/* the parent theme ships rounded corners; the shape lock is radius 0 */
.wp-block-button__link,
.wp-element-button,
.wc-block-components-button,
.wc-block-components-text-input input,
.wc-block-components-select__container,
.wc-block-components-panel,
.wc-block-components-totals-item,
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="password"],input[type="search"],input[type="number"],
select,textarea{
  border-radius:var(--r) !important;
}

/* ---------- links ---------- */
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link){
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.wp-block-post-content a:not(.wp-element-button):hover{color:var(--heading)}

/* ---------- buttons, everywhere WordPress and Woo draw one ---------- */
.wp-block-button__link,
.wp-element-button,
button.wc-block-components-button,
a.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:60px;padding:0 32px;
  font-family:var(--font);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.1;
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.wp-block-button__link:hover,
.wp-element-button:hover,
button.wc-block-components-button:hover,
a.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{background:var(--btn-bg-hover);color:var(--btn-fg)}
.wp-block-button__link:active,.wp-element-button:active,
button.wc-block-components-button:active{transform:translateY(2px)}

/* outline variant the editor offers */
.wp-block-button.is-style-outline .wp-block-button__link,
.wc-block-components-button.outlined{
  background:transparent;color:var(--heading);border-color:var(--heading);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wc-block-components-button.outlined:hover{background:var(--heading);color:var(--bg)}

/* ---------- focus. Never removed, 3px sky, offset. ---------- */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible,
.wc-block-components-button:focus-visible,
.wp-block-button__link:focus-visible{
  outline:3px solid var(--focus) !important;
  outline-offset:3px !important;
  box-shadow:none !important;
}

/* ---------- forms. Label above, 56px targets, real error colour. ---------- */
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="password"],input[type="search"],input[type="number"],
select,textarea,
.wc-block-components-text-input input{
  font-family:var(--font);
  font-size:var(--fs-body);
  color:var(--heading);
  background:var(--surface);
  border:2px solid var(--heading);
  padding:14px 16px;
  min-height:56px;
  width:100%;
}
textarea{min-height:150px;line-height:1.5}
label,.wc-block-components-text-input label{
  font-size:var(--fs-small);font-weight:700;color:var(--heading);
}
::placeholder{color:var(--muted);opacity:1}
.wc-block-components-validation-error{color:var(--heading);font-weight:700}

/* WPForms, used by the contact and signup forms */
.wpforms-container .wpforms-field-label{font-size:var(--fs-small);font-weight:700;color:var(--heading)}
.wpforms-container input[type="submit"],
.wpforms-container button[type="submit"]{
  min-height:60px;padding:0 32px;border-radius:var(--r);border:2px solid transparent;
  background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:17px;font-family:var(--font);
}

/* ---------- prose. Post and page content. ---------- */
.wp-block-post-content > *{max-width:66ch}
.wp-block-post-content > .alignwide,
.wp-block-post-content > .alignfull,
.wp-block-post-content > figure,
.wp-block-post-content > .wp-block-columns,
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-cover{max-width:none}
.wp-block-post-content h2{
  margin-top:1.9em;padding-top:.5em;border-top:2px solid var(--heading);
}
.wp-block-post-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.wp-block-post-content p{line-height:1.66}
.wp-block-post-content ul li,.wp-block-post-content ol li{line-height:1.6;margin-bottom:.5em}
.wp-block-post-content figure img{border:2px solid var(--heading)}
.wp-block-post-content blockquote{
  padding:4px 0 4px 24px;border-left:6px solid var(--sky);
  font-size:var(--fs-lead);line-height:1.45;color:var(--heading);
}

/* ---------- WooCommerce: catalogue ---------- */
.wc-block-grid__product,
.wp-block-woocommerce-product-template li.product,
.woocommerce ul.products li.product{
  background:var(--surface);
  border:2px solid var(--heading);
  padding:0 0 clamp(18px,2vw,26px);
}
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img{
  border-bottom:2px solid var(--heading);
  border-radius:0;
}
.wc-block-components-product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--heading);
  padding-inline:clamp(14px,1.6vw,22px);
}
.wc-block-components-product-price,
.woocommerce ul.products li.product .price{
  font-weight:800;letter-spacing:-.03em;color:var(--heading);
  padding-inline:clamp(14px,1.6vw,22px);
}
.wc-block-components-product-button,
.woocommerce ul.products li.product .button{margin-inline:clamp(14px,1.6vw,22px)}

/* sale flash, the one place a second colour would creep in */
.woocommerce span.onsale,.wc-block-grid__product-onsale{
  background:var(--sky);color:var(--ink);border-radius:0;border:2px solid var(--ink);
  font-weight:700;min-height:0;padding:6px 12px;line-height:1.2;
}

/* ---------- WooCommerce: notices, panels, totals ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.wc-block-components-notice-banner{
  border-radius:var(--r);
  border:2px solid var(--heading);
  background:var(--surface);
  color:var(--text);
}
.wc-block-components-notice-banner.is-error{border-color:var(--sky-deep)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--accent-text)}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-weight:800;letter-spacing:-.02em;color:var(--heading);
}
.wc-block-components-panel__button{color:var(--heading);font-weight:700}
.wc-block-cart-items__header{border-bottom:2px solid var(--heading)}

/* mini cart drawer keeps the same surfaces */
.wc-block-mini-cart__drawer .components-modal__content{background:var(--bg)}
.wc-block-mini-cart__title{color:var(--heading)}

/* ---------- tables ---------- */
.woocommerce table.shop_table,.wp-block-table table{
  border-collapse:collapse;border-radius:0;border:0;
}
.woocommerce table.shop_table th,.wp-block-table th{
  border-bottom:2px solid var(--heading);color:var(--heading);font-weight:700;text-align:left;
}
.woocommerce table.shop_table td,.wp-block-table td{border-bottom:1px solid var(--border)}

/* ---------- motion. Level 3: state change only. ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- admin bar offset for the sticky masthead ---------- */
.admin-bar .mast{top:32px}
@media (max-width:782px){.admin-bar .mast{top:46px}}

/* =============================================================
   BLOCK CHROME
   The header and footer are built from core blocks so they stay
   editable in the Site Editor. WordPress's own navigation block
   brings its accessible mobile overlay, which is better than a
   hand-rolled one, so these rules dress it rather than replace it.
   ============================================================= */

/* ---------- masthead ---------- */
.wp-block-group.mast{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:2px solid var(--heading);
  padding:0;
}
.wp-block-group.mast-in{
  min-height:var(--mast-h);
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  gap:clamp(14px,2vw,36px);
}
.mast .wp-block-group.brand{gap:12px;min-height:52px}
/* The site logo is 211x256, not square. Pinning both axes to 40px squashed it.
   Constrain the height and let the width follow the file's own ratio. */
.mast .wp-block-site-logo img{height:54px;width:auto;max-width:none;border-radius:0;object-fit:contain}



/* navigation */
.mast .wp-block-navigation{gap:clamp(6px,1.3vw,26px)}
.mast .wp-block-navigation-item__content{
  display:inline-flex;align-items:center;min-height:52px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--heading);text-decoration:none;
  border-bottom:3px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.mast .wp-block-navigation-item__content:hover,
.mast .current-menu-item .wp-block-navigation-item__content{
  color:var(--heading);border-bottom-color:var(--sky);
}
/* the overlay, opened on small screens */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  min-width:52px;min-height:52px;color:var(--heading);
}
.wp-block-navigation__responsive-container.is-menu-open{
  background:var(--bg);color:var(--heading);padding:clamp(24px,5vw,48px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-size:20px;letter-spacing:.06em;min-height:60px;
}
.wp-block-navigation__submenu-container{
  background:var(--surface);border:2px solid var(--heading);border-radius:0;
}

/* utilities on the right */
.wp-block-group.mast-util{gap:6px}
.mast .wc-block-mini-cart__button{
  min-width:52px;min-height:52px;color:var(--heading);
  border:2px solid transparent;border-radius:0;background:transparent;
}
.mast .wc-block-mini-cart__button:hover{border-color:var(--heading)}
/* orphaned @media removed; the wordmark is .wm now, hidden below via .mast .wm */

/* ---------- page head ---------- */
.pagehead{padding-block:clamp(56px,7vw,110px)}
.pagehead .wp-block-post-title,
.pagehead h1{
  font-size:clamp(38px,6.4vw,92px);max-width:16ch;
  color:var(--ink);margin:0;
}
.pagehead.field-sky{background:var(--sky)}
.pagehead.field-sky .wp-block-post-title,
.pagehead.field-sky h1{color:var(--ink)}

/* ---------- footer ---------- */
.wp-block-group.foot{
  background:var(--ink);color:#F2F6F8;
  border-top:10px solid var(--sky);
  padding-block:clamp(56px,6vw,88px) 36px;
}
.foot,.foot p,.foot li{color:rgba(242,246,248,.80)}
.foot .wp-block-heading{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);margin-bottom:14px;border-top:0;padding-top:0;
}
.foot .wp-block-site-title a{color:#F2F6F8;text-decoration:none}
.foot a{color:rgba(242,246,248,.80);text-decoration:none}
.foot a:hover{color:#F2F6F8;text-decoration:underline}
.foot .foot-nav{list-style:none;padding-left:0}
.foot .foot-nav li{margin-bottom:0}
.foot .foot-nav a{display:inline-flex;align-items:center;min-height:46px;font-size:var(--fs-small)}
.foot .wp-block-social-link{background:transparent}
.foot .wp-block-social-link a{color:#F2F6F8}
.foot :where(a,button):focus-visible{outline-color:var(--sky) !important}

/* =============================================================
   LIVE FIXES
   ============================================================= */

/* The display sizes are tuned for the new compositions. Applied to the
   existing cover block, whose inner container is 450px wide, a 92px
   wordmark overflowed and broke mid-word as "AdaptaP / lay". Headings
   must never hyphenate or break inside a word. */
h1,h2,h3,h4,.wp-block-heading,.wp-block-site-title{
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
}
.wp-block-cover h1,.wp-block-cover .wp-block-heading{
  font-size:clamp(30px,4.4vw,58px);
  line-height:1;
}

/* Keep the masthead on one line: the nav shrinks before it wraps. */
.mast .wp-block-navigation{flex-wrap:nowrap}
.mast .wp-block-navigation__container{flex-wrap:nowrap}
.mast .wp-block-navigation-item__content{white-space:nowrap}
@media (min-width:1121px){
  .mast .wp-block-navigation{font-size:15px;letter-spacing:.08em}
}

/* The existing page content carries inline border-radius on images and covers,
   left over from the previous design. Inline styles outrank the stylesheet, so
   the shape lock has to say so explicitly. Radius 0, everywhere, no exceptions. */
.wp-block-post-content img,
.wp-block-image img,
.wp-block-image,
.wp-block-cover,
.wp-block-media-text__media img,
.wc-block-components-product-image img{
  border-radius:0 !important;
}

/* ---------- wordmark. Two-tone, per the brand's own rule: first half in the
   accent, second in ink. On paper the bright sky measures 2.12:1, which fails
   even the large-text bar, so the light theme uses the deep sky (5.36:1) and
   the dark theme uses the bright one. Same two-tone read, legible in both. */
.mast .brand{gap:14px}
.mast .wm{
  font-family:var(--font);
  font-size:30px;
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1;
  color:var(--heading);
  text-decoration:none;
  white-space:nowrap;
}
.mast .wm i{font-style:normal;color:var(--accent-text)}
.mast .wm:hover{text-decoration:none}
.mast .wm:hover i{color:var(--heading)}
@media (max-width:620px){
  .mast .wm{font-size:24px}
  .mast .wp-block-site-logo img{height:44px}
}

/* =============================================================
   HEADER AND TITLE CORRECTIONS
   ============================================================= */

/* Product and post titles must not use the hero display scale. A 60-character
   product name at clamp(44px,6.4vw,92px) fills the screen. Cap them. */
/* Titles in the content column. The product title is .wp-block-post-title and
   the body has no single-product class, which is why the previous selector
   never matched. .pagehead keeps its larger scale via a longer selector. */
.wp-block-post-title,
.woocommerce div.product .product_title{
  font-size:clamp(27px,2.6vw,44px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.wp-block-post-title{line-height:1.05}

/* Long titles anywhere in the content column get the same treatment. */
.wp-block-post-content h1{font-size:clamp(30px,3.2vw,52px)}

/* Wordmark: raised specificity. The earlier .mast .wm rule was losing to
   WordPress's own global element styles, which are printed after the theme
   stylesheet, so it rendered at body size. */
.mast .brand a.wm{
  font-size:clamp(23px,2vw,31px);
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
}
.mast .brand a.wm i{font-style:normal;color:var(--accent-text)}

/* Navigation: the wrap guard has to sit on the container the block actually
   renders, not just the wrapper, or the items stack. */
.mast .wp-block-navigation,
.mast .wp-block-navigation__container{
  flex-wrap:nowrap !important;
  align-items:center;
  row-gap:0;
}
.mast .wp-block-navigation-item__content{
  font-size:15px !important;
  letter-spacing:.07em;
  white-space:nowrap;
}
.mast .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  font-size:15px !important;
  letter-spacing:.04em;
}

/* The display scale, restored only where it belongs. */
.hero h1{font-size:clamp(36px,4.6vw,78px);font-weight:800;letter-spacing:-.042em;line-height:.95}
.pagehead h1,.pagehead .wp-block-post-title{font-size:clamp(38px,5.2vw,78px);font-weight:800;letter-spacing:-.04em;line-height:1}
.statement .say{font-weight:800}
.foot-word{font-weight:800}

/* =============================================================
   ACCESSIBILITY FIXES FROM THE QA PASS
   ============================================================= */

/* The footer's secondary text was inheriting --muted, which is a light-theme
   grey. On the ink footer it measured 3.37:1 against a 4.5 requirement. */
.foot address,
.foot .foot-bottom,
.foot .foot-bottom p,
.foot .foot-bottom address,
.foot .foot-bottom li{
  color:rgba(242,246,248,.86);
}

/* WordPress's own skip link stayed 1x1 even when focused, so a keyboard user
   could never see or activate it. Give it back a real, visible target. */
.skip-link.screen-reader-text:focus,
a.skip-link:focus,
#wp-skip-link:focus{
  position:fixed !important;
  top:12px !important;
  left:12px !important;
  width:auto !important;
  height:auto !important;
  clip:auto !important;
  clip-path:none !important;
  margin:0 !important;
  padding:16px 24px !important;
  background:var(--ink) !important;
  color:#F2F6F8 !important;
  border:3px solid var(--sky) !important;
  border-radius:var(--r) !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  overflow:visible !important;
  white-space:nowrap !important;
  z-index:100000 !important;
}

/* The submenu toggle rendered as a 9x9 hit area, under the 24px minimum. */
.mast .wp-block-navigation__submenu-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  min-height:44px;
  padding:0 6px;
}