/* Zaftrus polish layer: layout fixes found in the v9 audit */

/* 1. Spec table: two columns, so it must never force a 760px minimum width */
.matrix table{min-width:0!important}
.matrix th,.matrix td{overflow-wrap:anywhere}
.matrix__val{white-space:normal}

/* 2. 3D scene callouts: wrap instead of running off the edge of the stage */
.callout span{white-space:normal!important;max-width:210px;line-height:1.3}

/* 3. Code/terminal panels: real monospace, not Orbitron, and wrap on small screens */
.zf-panel pre,.zf-panel pre span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;letter-spacing:0!important}

/* 4. Font fallback so headings keep their width if Orbitron is slow or blocked */
:root{--f-mono:"Orbitron","Eurostile","Bank Gothic","Segoe UI","Helvetica Neue",Arial,sans-serif}

/* 5. Keep long words and numbers from pushing layouts sideways */
h1,h2,h3,.fs__title,.fs__text,.lede,.body-lg{overflow-wrap:break-word}
img,svg,video,canvas{max-width:100%}
.fs__title{text-wrap:balance}
.hero__title{text-wrap:balance}

/* 6. Focus visibility for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-ink,#5cc8f5);outline-offset:3px;border-radius:4px}

/* 7. Page never scrolls sideways */
html,body{overflow-x:clip}

@media(max-width:640px){
  .title-block{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:100%}
  .title-block>div{border-right:0!important;border-bottom:1px solid var(--line-2)}
  .title-block>div:nth-child(odd){border-right:1px solid var(--line-2)!important}
  .title-block>div:nth-last-child(-n+2){border-bottom:0}
  .callout span{max-width:120px;font-size:8.5px!important;margin-left:22px!important;padding:5px 7px!important}
  .callout span:before{width:20px!important}
  .callout.is-flip span{margin-right:22px!important;margin-left:0!important}
  .dim-tag{font-size:9.5px!important}
  .zf-panel pre{white-space:pre-wrap;word-break:break-word;font-size:12px!important;padding:16px}
  .matrix th,.matrix td{padding:13px 12px!important}
  .hero__strip{row-gap:6px}
}

/* ==========================================================================
   v11: layout fixes + design refinements
   ========================================================================== */

/* -- A. Contrast: secondary text sat near 3.7:1 on the dark ground; lift it past 4.5:1 -- */
:root,.night{--mute:#eaf0f6a8;--mute-2:#eaf0f68f}

/* -- B. Anchors land clear of the fixed header -- */
html{scroll-padding-top:calc(var(--header-h,68px) + 16px)}

/* -- C. Smallest type floor: nothing under 10.5px -- */
.title-block span,.orbit-tag span,.graph-tag,.callout span,.fs__figure figcaption,.dim-tag{font-size:10.5px}

/* -- D. Footer wordmark: capped so it never spills its container on wide screens -- */
.ftr .ftr__word[data-astro-cid-jo6i4kqk]{font-size:clamp(48px,14.6vw,205px)}

/* -- E. Touch targets -- */
.ftr__up{display:inline-flex;align-items:center;min-height:44px}
.link-arrow:not(.btn){position:relative}
.link-arrow:not(.btn)::after{content:"";position:absolute;inset:-10px 0}
.story__nav button{min-height:44px}

/* -- F. Hero: actions sit directly under the lede instead of floating to the far right -- */
.hero__word{display:none}
.hero__foot[data-astro-cid-lcdefpme]{flex-direction:column;align-items:flex-start;gap:30px}
.hero__foot[data-astro-cid-lcdefpme] .lede{text-wrap:pretty}

/* -- G. Type rhythm: balanced headings, no orphans in paragraphs -- */
h1,h2,h3,.h1,.h2,.h3,.display{text-wrap:balance}
p,li,.lede,.body-lg,.fs__text{text-wrap:pretty}

/* -- H. One radius scale: media 14px, cards 18px, controls pill -- */
:root{--r-card:18px;--r-media:14px}
.fs__figure{border-radius:var(--r-media)}
.ftr__mail{border-radius:var(--r-card)}

/* -- I. No sticky hover lift on touch screens -- */
@media(hover:none){.zf-spot:hover{translate:none;box-shadow:none}.zf-spot:hover:before{opacity:0}}

/* -- J. Phones -- */
@media(max-width:860px){
  /* full-bleed photo panels: the headline must fit the column, and text needs a firmer scrim over busy photos */
  .fs__title,.fs--lead .fs__title{font-size:clamp(1.3rem,6.3vw,1.9rem);overflow-wrap:normal;hyphens:manual}
  .fs__shade,.fs--split .fs__shade{background:linear-gradient(180deg,rgba(6,9,13,.55) 0%,rgba(6,9,13,.08) 22%,rgba(6,9,13,.62) 46%,rgba(6,9,13,.94) 70%,rgba(6,9,13,.98) 100%)}
}
@media(max-width:640px){
  .hero__title[data-astro-cid-lcdefpme]{max-width:none}
  /* keyword strip: tidy chips instead of "x" separators that dangle at line ends */
  .hero__strip .x{display:none}
  .hero__strip .label{padding:5px 12px;border:1px solid var(--line-2);border-radius:999px}
  .hero__strip{gap:8px}
  .callout span{max-width:132px;font-size:10px!important}
  .dim-tag{font-size:10.5px!important}
}

/* -- K. Metric figures size to their own card, so "≈0.00006 kWh/L" can never outgrow its frame -- */
.nm>div{container-type:inline-size;min-width:0}
.nm .metric__value{font-size:min(clamp(40px,4.6vw,72px),14.5cqi);white-space:nowrap;max-width:100%}

/* -- L. Spec tables: headers align with the columns they label -- */
.matrix th{text-align:left}

/* -- M. Calculator: the tariff number was inheriting the old light-theme colour (near-black on dark) -- */
.calc[data-astro-cid-bac6bcrh] input[data-astro-cid-bac6bcrh][type=number]{color:#fff;-webkit-text-fill-color:#fff;caret-color:var(--accent-ink);background:rgba(234,240,246,.04)}
.calc[data-astro-cid-bac6bcrh] input[data-astro-cid-bac6bcrh][type=number]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* -- N. Table column headers: same label voice as the rest of the site, same padding as the cells below -- */
.matrix thead th{
  font-family:var(--f-orb);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);text-align:left;padding:16px 18px;white-space:nowrap;
  background:var(--paper-2);border-bottom:1px solid var(--line-3)}
@media(max-width:640px){.matrix thead th{padding:13px 12px!important;font-size:10.5px;letter-spacing:.1em}}