/*
Theme Name: airis
Theme URI: https://airis.co.za
Author: airis
Author URI: https://airis.co.za
Description: The airis marketing site. A light, gold on ivory single page with a WebGL hero, glass surfaces and a request access dialog that emails the team. Built as a classic theme, no page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: airis
Tags: one-column, custom-menu, custom-logo, editor-style, full-width-template
*/

/* ══════════════════════════════════════════════════════════════════
   airis
   Ground   warm ivory, the colour of paper held near a lamp
   Accent   real gold, used as light rather than as fill
   Voice    an instrument panel, not a brochure
══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* ground */
  --ivory:      #FCFAF3;
  --ivory-2:    #F8F3E8;
  --parchment:  #F3ECDD;
  --sand:       #EEE4CF;
  --edge:       #E6DCC5;

  /* warm brown rather than black, so nothing on the page reads as ink */
  --ink:        #34291C;
  --ink-panel:  #241B11;
  --ink-2:      #5C5040;
  --ink-3:      #8A7C63;
  --ink-4:      #AC9E85;

  /* gold */
  --gold-pale:  #FAE5A4;
  --gold-lit:   #EEBE4C;
  --gold:       #CE9A16;
  --gold-deep:  #A87709;
  --gold-ink:   #7E5804;

  /* semantic, kept apart from the accent */
  --good:       #5C7C4E;
  --warn:       #B8922F;
  --crit:       #A4483A;

  /* glass */
  --glass:      rgba(255,253,247,.52);
  --glass-2:    rgba(255,253,247,.30);
  --glass-line: rgba(255,255,255,.72);
  --glass-gold: rgba(190,152,66,.26);
  --glass-blur: blur(30px) saturate(185%);
  --glass-lift: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(190,152,66,.10);

  --shadow-s: 0 2px 10px rgba(96,74,26,.05);
  --shadow-m: 0 14px 44px rgba(96,74,26,.09), 0 3px 10px rgba(96,74,26,.04);
  --shadow-l: 0 36px 100px rgba(96,74,26,.15), 0 10px 28px rgba(96,74,26,.06);

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand: "Comfortaa", var(--sans);

  --measure: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .16vw,1.0625rem);
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
::selection{ background:rgba(227,194,113,.42); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:3px;
}

/* ── ambient ground ───────────────────────────────────────────── */
#dust{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85; }
.aurora{
  position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 42% at 18% 8%,  rgba(238,190,76,.28), transparent 62%),
    radial-gradient(46% 40% at 88% 26%, rgba(250,229,164,.38), transparent 66%),
    radial-gradient(60% 50% at 50% 108%,rgba(206,154,22,.20),  transparent 68%);
  filter:blur(6px);
}

/* ── layout ───────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; z-index:1; padding-block:clamp(68px,7.4vw,116px); }
.section > .wrap{ position:relative; }

.section--ink{
  background:linear-gradient(168deg,#2A2015 0%,#241B11 46%,#2E2317 100%);
  color:var(--ivory-2);
  overflow:hidden;
  border-radius:clamp(22px,3vw,42px);
  margin-inline:clamp(0px,2vw,28px);
}
.section--ink::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(54% 48% at 14% 2%,  rgba(216,174,86,.20), transparent 66%),
    radial-gradient(46% 46% at 90% 92%, rgba(240,214,150,.12), transparent 70%);
}
/* warm light band, used where a section needs separation without going dark */
.section--warm{
  background:linear-gradient(178deg,rgba(246,233,203,.78) 0%,rgba(252,246,231,.6) 52%,rgba(242,227,190,.7) 100%);
  overflow:hidden;
}
.section--warm::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 82% 8%, rgba(238,190,76,.34), transparent 64%);
}
.section--tight{ padding-block:clamp(48px,5vw,76px); }

.rule{ height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,var(--edge) 18%,var(--edge) 82%,transparent); }
.section--ink .rule{ background:linear-gradient(90deg,transparent,rgba(227,194,113,.24) 18%,rgba(227,194,113,.24) 82%,transparent); }

/* ── type ─────────────────────────────────────────────────────── */
.d-xl{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem,8.4vw,7rem);
  line-height:.96;
  letter-spacing:-.028em;
  text-wrap:balance;
  margin:0;
}
.d-l{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem,5.2vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.024em;
  text-wrap:balance;
  margin:0;
}
.d-m{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.75rem,3vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0;
}
.gilt{
  font-style:italic;
  background:linear-gradient(96deg,var(--gold-deep) 0%,var(--gold) 34%,var(--gold-lit) 62%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.section--ink .gilt{
  background:linear-gradient(96deg,var(--gold) 0%,var(--gold-lit) 38%,var(--gold-pale) 66%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text;
}
.lede{
  font-size:clamp(1.0625rem,.98rem + .38vw,1.3125rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:56ch;
  margin:0;
}
.section--ink .lede{ color:rgba(246,241,228,.72); }
.body{ color:var(--ink-2); max-width:62ch; margin:0; }
.section--ink .body{ color:rgba(246,241,228,.68); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.head{ display:flex; flex-direction:column; gap:clamp(18px,2vw,26px); max-width:44ch; }
.head--wide{ max-width:56ch; }

/* ── nav ──────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:clamp(10px,1.4vw,16px) var(--gutter) 0;
  transition:transform .5s var(--ease);
}
/* the bar stays invisible over the hero, then settles into a glass pill */
.nav.is-stuck .nav__in{
  background:linear-gradient(180deg,rgba(255,253,246,.74),rgba(255,253,246,.5));
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-color:var(--glass-line);
  box-shadow:var(--shadow-m), var(--glass-lift);
}
.nav.is-hidden{ transform:translateY(-102%); }
.nav__in{
  max-width:var(--measure); margin-inline:auto;
  padding:10px 12px; border-radius:999px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  border:1px solid transparent;
  transition:background .45s ease, border-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.nav__side{ display:flex; align-items:center; gap:14px; min-width:0; }
.lbl-s{ display:none; }
.nav__side--l{ grid-column:1; justify-self:stretch; justify-content:flex-end; }
.nav__side--r{ grid-column:3; justify-self:stretch; justify-content:flex-end; }
.nav__side--r .nav__links{ flex:1; justify-content:flex-start; }
.brand{ display:flex; align-items:center; flex:none; grid-column:2; justify-self:center; padding-inline:clamp(22px,3.2vw,48px); }
.brand img{ width:clamp(92px,8.4vw,124px); height:auto; }
.nav__links{ display:flex; gap:clamp(18px,2vw,30px); }
.nav__links a{
  font-size:.875rem; font-weight:600; letter-spacing:-.002em;
  color:var(--ink-2); position:relative; padding:4px 0; white-space:nowrap;
  transition:color .25s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ── buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:.9375rem; font-weight:500;
  padding:.72em 1.35em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), color .3s ease, border-color .3s ease;
  will-change:transform;
}
.btn--gold{
  color:#221A08;
  background:linear-gradient(168deg,var(--gold-pale) 0%,var(--gold-lit) 40%,var(--gold) 100%);
  box-shadow:0 6px 22px rgba(162,124,38,.28), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn--gold::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(168deg,var(--gold-lit),var(--gold-pale));
  opacity:0; transition:opacity .45s ease;
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 14px 38px rgba(162,124,38,.34), inset 0 1px 0 rgba(255,255,255,.8); }
.btn--gold:hover::before{ opacity:1; }
.btn--ghost{
  color:var(--ink); border-color:var(--edge); background:rgba(255,253,247,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{ border-color:var(--gold); transform:translateY(-2px); }
.section--ink .btn--ghost{ color:var(--ivory-2); border-color:rgba(227,194,113,.34); background:rgba(255,253,247,.05); }
.section--ink .btn--ghost:hover{ border-color:var(--gold-lit); }
.btn--sm{ font-size:.875rem; padding:.6em 1.15em; }
.btn__arrow{ transition:transform .45s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ── glass ────────────────────────────────────────────────────── */
.glass{
  position:relative;
  background:linear-gradient(158deg,var(--glass) 0%,var(--glass-2) 100%);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-radius:20px;
  box-shadow:var(--shadow-m), var(--glass-lift);
}
/* a hairline of gold just inside the white edge, the way real glass catches a rim */
.glass::before{
  content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
  border:1px solid var(--glass-gold); opacity:.55;
}
.section--ink .glass::before{ border-color:rgba(227,194,113,.16); }
.section--ink .glass{
  background:linear-gradient(158deg,rgba(255,250,236,.075),rgba(255,250,236,.03));
  border-color:rgba(227,194,113,.22);
  box-shadow:0 28px 70px rgba(28,20,10,.36), inset 0 1px 0 rgba(255,255,255,.09);
}
.glass--sheen::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px 200px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.55), transparent 70%);
  opacity:0; transition:opacity .5s ease;
}
.section--ink .glass--sheen::after{ background:radial-gradient(260px 220px at var(--mx,50%) var(--my,0%), rgba(227,194,113,.13), transparent 70%); }
.glass--sheen:hover::after{ opacity:1; }

/* ── hero ─────────────────────────────────────────────────────── */
.hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:clamp(112px,14vh,168px);
  padding-bottom:clamp(72px,9vh,120px);
  background:
    radial-gradient(54% 58% at 72% 44%, rgba(186,128,14,.30), transparent 62%),
    radial-gradient(68% 52% at 16% 8%,  rgba(242,196,86,.30), transparent 64%),
    radial-gradient(46% 40% at 94% 86%, rgba(204,146,26,.26), transparent 70%),
    linear-gradient(178deg, #F1DFAA 0%, #EBD293 42%, #F5EBCE 78%, var(--ivory) 100%);
}
.hero__3d{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  will-change:opacity;
}
.hero__3d.is-done{ visibility:hidden; }
.hero__3d canvas{ width:100%; height:100%; display:block; }
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(244,237,221,.94) 0%, rgba(244,237,221,.74) 24%, rgba(244,237,221,.26) 44%, rgba(244,237,221,0) 58%),
    linear-gradient(0deg, var(--ivory) 0%, rgba(252,250,243,0) 22%);
}
.hero > .wrap{ position:relative; z-index:2; width:100%; }
.hero__grid{ display:grid; gap:clamp(48px,6vw,72px); align-items:center; }
@media (min-width:1020px){ .hero__grid{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); } }
@media (max-width:1019px){
  .hero__3d{ opacity:.85; }
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(244,237,221,.96) 0%, rgba(244,237,221,.92) 32%, rgba(244,237,221,.6) 52%, rgba(244,237,221,.18) 74%, rgba(244,237,221,0) 90%),
      linear-gradient(0deg, var(--ivory) 0%, rgba(252,250,243,0) 16%);
  }
}

.hero__copy{ display:flex; flex-direction:column; gap:clamp(22px,2.6vw,30px); }
.hero h1{ max-width:15ch; font-size:clamp(2.7rem,4.7vw,4.7rem); }
.hero__lede{ max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.hero__note{ font-family:var(--mono); font-size:.75rem; letter-spacing:.05em; color:var(--ink-3); }

.reveal-line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.reveal-line > span{ display:block; will-change:transform; }

/* floating glass readouts, arranged around the lens */
.hero__panels{ position:relative; min-height:clamp(330px,48vw,520px); }
@media (max-width:1019px){ .hero__panels{ min-height:clamp(300px,72vw,460px); } }

.hpanel{
  position:absolute;
  padding:15px 17px; border-radius:16px;
  background:linear-gradient(158deg,rgba(255,253,246,.60),rgba(255,253,246,.30));
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-m), var(--glass-lift);
  display:flex; flex-direction:column; gap:7px;
  will-change:transform;
}
.hpanel::after{
  content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
  border:1px solid var(--glass-gold); opacity:.5;
}
.hpanel__k{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.hpanel__v{ font-family:var(--display); font-size:1.85rem; line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.hpanel__r{ display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--ink-2); white-space:nowrap; }
.hpanel--health{ top:2%;  left:-2%;  width:min(210px,54%); }
.hpanel--risk{   top:38%; right:-4%; width:min(240px,62%); }
.hpanel--agents{ bottom:3%; left:8%; width:min(226px,58%); }

.hring{ width:34px; height:34px; flex:none; }
.hring circle{ fill:none; stroke-width:3.5; stroke-linecap:round; }
.hring .t{ stroke:rgba(140,120,80,.2); }
.hring .v{ stroke:url(#gaugeGrad); }

/* status chips, used by the hero readout panels */
.chip{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; white-space:nowrap;
}
.chip--good{ color:var(--good); background:rgba(92,124,78,.14); }
.chip--warn{ color:#8A6D1E; background:rgba(184,146,47,.18); }
.chip--crit{ color:var(--crit); background:rgba(164,72,58,.14); }

/* ── ledger (the problem) ─────────────────────────────────────── */
.ledger{ display:grid; gap:0; margin-top:clamp(30px,3.4vw,44px); border-top:1px solid var(--edge); }
.ledger__row{
  display:grid; grid-template-columns:2.6em 1fr; align-items:baseline; gap:clamp(16px,3vw,34px);
  padding:clamp(16px,2vw,22px) 0;
  border-bottom:1px solid var(--edge);
  transition:padding-left .6s var(--ease-out);
}
.ledger__row:hover{ padding-left:12px; }
.ledger__i{ font-family:var(--mono); font-size:.6875rem; color:var(--gold-deep); letter-spacing:.1em; }
.ledger__t{ font-family:var(--display); font-size:clamp(1.2rem,2.5vw,1.9rem); line-height:1.2; letter-spacing:-.015em; color:var(--ink); }
.ledger__row:hover .ledger__t{ color:var(--gold-ink); }
.ledger__t{ transition:color .4s ease; }

/* ── manifesto ────────────────────────────────────────────────── */
.manifesto{ text-align:center; display:grid; justify-items:center; gap:clamp(26px,3.4vw,40px); }
.manifesto blockquote{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.9rem);
  line-height:1.14; letter-spacing:-.022em;
  max-width:24ch; text-wrap:balance;
}
.manifesto__attr{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.word{ display:inline-block; will-change:transform,opacity; }

/* ── chat ─────────────────────────────────────────────────────── */
.chat-stage{ display:grid; gap:clamp(30px,4vw,56px); align-items:center; margin-top:clamp(36px,4vw,56px); }
@media (min-width:940px){ .chat-stage{ grid-template-columns:minmax(0,1fr) minmax(0,420px); } }
.phone{
  width:100%; max-width:400px; margin-inline:auto;
  border-radius:32px; padding:12px;
  background:linear-gradient(168deg,rgba(255,253,247,.8),rgba(241,234,218,.55));
  border:1px solid rgba(194,155,60,.28);
  box-shadow:var(--shadow-l), var(--glass-lift);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
.phone__screen{
  border-radius:22px; background:linear-gradient(180deg,#FDFBF4,#F5EEDF);
  border:1px solid var(--edge); overflow:hidden;
  display:flex; flex-direction:column; height:min(66vh,510px);
}
.phone__bar{
  padding:13px 15px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--edge); background:rgba(255,253,247,.7);
}
.phone__bar img{ width:20px; height:20px; }
.phone__bar .nm{ font-family:var(--brand); font-size:.8125rem; letter-spacing:.22em; color:var(--ink); }
.phone__bar .st{ margin-left:auto; font-family:var(--mono); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--good); }
.thread{ flex:1; overflow:hidden; padding:16px 14px; display:flex; flex-direction:column; gap:10px; justify-content:flex-end; }
.msg{
  max-width:82%; padding:10px 13px; border-radius:15px; font-size:.8125rem; line-height:1.5;
  opacity:0; transform:translateY(10px);
}
.msg--them{ align-self:flex-start; background:rgba(255,253,247,.95); border:1px solid var(--edge); color:var(--ink-2); border-bottom-left-radius:5px; }
.msg--you{ align-self:flex-end; background:linear-gradient(160deg,var(--gold-pale),var(--gold-lit)); color:#2A2008; border-bottom-right-radius:5px; }
.msg b{ font-weight:600; color:var(--ink); }
.msg .mono{ font-size:.75rem; }
.typing{ display:flex; gap:4px; align-self:flex-start; padding:12px 14px; background:rgba(255,253,247,.95); border:1px solid var(--edge); border-radius:15px; border-bottom-left-radius:5px; }
.typing i{ width:5px; height:5px; border-radius:50%; background:var(--ink-4); animation:bob 1.3s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes bob{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.phone__input{ padding:11px 14px; border-top:1px solid var(--edge); display:flex; align-items:center; gap:9px; background:rgba(255,253,247,.7); }
.phone__input .fake{ flex:1; height:30px; border-radius:999px; background:rgba(122,110,91,.09); border:1px solid var(--edge); display:flex; align-items:center; padding:0 12px; font-size:.75rem; color:var(--ink-4); }
.phone__input .snd{ width:30px; height:30px; border-radius:50%; background:linear-gradient(160deg,var(--gold-lit),var(--gold)); display:grid; place-items:center; }

/* ── outcome figures ──────────────────────────────────────────── */
.figures{ display:grid; gap:clamp(14px,2vw,24px); margin-top:clamp(40px,5vw,64px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.figure{ padding:clamp(22px,2.6vw,30px); border-radius:18px; display:flex; flex-direction:column; gap:9px; }
.figure__v{ font-family:var(--display); font-size:clamp(2.6rem,5vw,3.9rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:linear-gradient(168deg,#C6A04A 0%,#9A7726 60%,#6F5418 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.figure__k{ font-family:var(--mono); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); }
.figure p{ margin:0; font-size:.875rem; line-height:1.55; color:var(--ink-2); }

/* ── faq ──────────────────────────────────────────────────────── */
.faq{ margin-top:clamp(28px,3vw,40px); border-top:1px solid var(--edge); }
.q{ border-bottom:1px solid var(--edge); }
.q__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:clamp(18px,2.2vw,24px) 0; display:flex; align-items:flex-start; gap:18px;
  font-family:var(--display); font-weight:400; font-size:clamp(1.1rem,2vw,1.4rem);
  letter-spacing:-.015em; line-height:1.3; color:var(--ink);
  transition:color .3s ease;
}
.q__btn:hover{ color:var(--gold-ink); }
.q__ic{ width:15px; height:15px; flex:none; margin-top:.4em; margin-left:auto; position:relative; }
.q__ic::before,.q__ic::after{ content:""; position:absolute; background:var(--gold-deep); border-radius:1px; transition:transform .45s var(--ease-out), opacity .3s ease; }
.q__ic::before{ inset:47% 0 47% 0; }
.q__ic::after{ inset:0 47% 0 47%; }
.q[open] .q__ic::after{ transform:scaleY(0); opacity:0; }
.q__body{ overflow:hidden; height:0; }
.q__body p{ margin:0 0 clamp(20px,2.2vw,26px); max-width:66ch; color:var(--ink-2); font-size:.9375rem; line-height:1.68; }

/* ── cta ──────────────────────────────────────────────────────── */
.form{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.field input{
  width:100%; padding:.85em 1.05em; border-radius:12px;
  border:1px solid var(--edge); background:rgba(255,253,247,.8);
  font-size:.9375rem; transition:border-color .3s ease, box-shadow .3s ease;
}
.field input::placeholder{ color:var(--ink-4); }
.field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(194,155,60,.14); }
.form__row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .form__row{ grid-template-columns:1fr; } }
.form__foot{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.form__note{ font-family:var(--mono); font-size:.6875rem; color:var(--ink-3); line-height:1.5; }
.form__err{ font-family:var(--mono); font-size:.6875rem; color:var(--crit); min-height:1em; }
.done{ display:none; flex-direction:column; gap:12px; align-items:flex-start; }
.form.is-done{ display:none; }
.done.is-on{ display:flex; }
.done__mark{ width:42px; height:42px; }

/* ── access dialog ────────────────────────────────────────────── */
.modal{
  border:0; padding:0; background:transparent; color:inherit;
  width:min(560px, calc(100vw - 28px)); max-width:none; margin:auto;
  overflow:visible;
}
.modal::backdrop{
  background:rgba(46,35,22,.38);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.modal__card{
  border-radius:26px; padding:clamp(26px,4vw,42px);
  position:relative; overflow-y:auto;
  max-height:calc(100svh - 40px);
  display:flex; flex-direction:column; gap:clamp(20px,2.6vw,28px);
  background:linear-gradient(158deg,rgba(255,253,246,.94),rgba(246,240,226,.9));
  box-shadow:0 40px 120px rgba(60,44,14,.3), var(--glass-lift);
  opacity:0; transform:translateY(20px) scale(.97);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.modal.is-in .modal__card{ opacity:1; transform:none; }
.modal__x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--edge); background:rgba(255,253,246,.7);
  display:grid; place-items:center; color:var(--ink-2);
  transition:border-color .3s ease, color .3s ease, transform .3s var(--ease-out);
}
.modal__x svg{ width:15px; height:15px; }
.modal__x:hover{ border-color:var(--gold); color:var(--ink); transform:rotate(90deg); }
.modal__head{ display:flex; flex-direction:column; gap:12px; }
.modal__head img{ opacity:.95; }
.modal__head h2{ margin:0; }

/* ── closing block ────────────────────────────────────────────── */
.closer{
  margin-top:clamp(40px,5vw,64px);
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
}
.closer p.d-m{ margin:0; max-width:18ch; }
.btn--lg{ font-size:1rem; padding:.92em 1.7em; }

.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:.9375rem; color:var(--ink-2); text-align:left;
  transition:color .25s ease;
}
.linkish:hover{ color:var(--gold-ink); }

/* ── footer ───────────────────────────────────────────────────── */
.footer{ position:relative; z-index:1; border-top:1px solid var(--edge); padding-block:clamp(44px,5vw,68px); }
.footer__in{ display:grid; gap:clamp(28px,4vw,44px); }
@media (min-width:800px){ .footer__in{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer h4{ font-family:var(--mono); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; font-weight:400; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer li a{ font-size:.9375rem; color:var(--ink-2); transition:color .25s ease; }
.footer li a:hover{ color:var(--gold-ink); }
.footer__brand{ display:flex; flex-direction:column; gap:14px; max-width:34ch; }
.footer__brand img{ width:92px; height:auto; }
.footer__brand p{ margin:0; font-size:.875rem; color:var(--ink-3); line-height:1.6; }
.footer__base{
  margin-top:clamp(34px,4vw,52px); padding-top:22px; border-top:1px solid var(--edge);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  font-family:var(--mono); font-size:.6875rem; color:var(--ink-4); letter-spacing:.04em;
}
.footer__base .spacer{ margin-left:auto; }

/* ── reveal + motion ──────────────────────────────────────────── */
[data-rise]{ opacity:0; transform:translateY(26px); }
.js-off [data-rise]{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rise]{ opacity:1 !important; transform:none !important; }
  .reveal-line > span{ transform:none !important; }
  .hpanel{ opacity:1 !important; transform:none !important; }
  #dust{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════
   Small screens
   The page is built for a phone first here: bigger touch targets,
   fewer expensive effects, no layout that depends on hover.
══════════════════════════════════════════════════════════════════ */

/* nothing should feel like a mis-tap */
a, button, summary, input, label{ -webkit-tap-highlight-color:transparent; }

@media (max-width:900px){
  /* backdrop blur is the most expensive thing on the page, so it costs
     less where the GPU is smaller */
  :root{ --glass-blur: blur(16px) saturate(165%); }
}

@media (max-width:760px){
  .nav{ padding-top:max(8px, env(safe-area-inset-top)); }
  .nav__links{ display:none; }
  .nav__in{ padding:8px; gap:10px; position:relative; min-height:56px; }
  .nav__side--l{ padding-left:0; }
  .brand{
    position:absolute; grid-column:auto; left:50%; top:50%;
    transform:translate(-50%,-50%); padding-inline:0;
    min-height:44px; align-items:center; justify-content:center;
  }
  .brand img{ width:96px; }
  .nav__in .btn{ font-size:.8125rem; padding:.78em 1.05em; min-height:44px; }
  .lbl-l{ display:none; }
  .lbl-s{ display:inline; }

  /* the hero stops being a fixed viewport and just fits its content */
  .hero{ min-height:auto; padding-top:104px; padding-bottom:clamp(40px,9vw,64px); }
  .hero h1{ font-size:clamp(2.5rem,10.4vw,3.4rem); max-width:100%; }
  .hero__lede{ font-size:1.0625rem; line-height:1.58; }
  .hero__grid{ gap:34px; }
  .hero__cta{ gap:12px; }
  .hero__cta .btn{ width:100%; justify-content:center; padding-block:.95em; }

  /* the readouts stop floating over each other and become a clean stack */
  .hero__panels{
    position:static; min-height:0;
    display:flex; flex-direction:column; gap:12px;
  }
  .hpanel{ position:static; width:100%; }
  .hpanel--health, .hpanel--risk, .hpanel--agents{ top:auto; left:auto; right:auto; bottom:auto; }

  .section{ padding-block:clamp(56px,13vw,80px); }
  .section--tight{ padding-block:clamp(40px,9vw,60px); }
  .section--ink{ margin-inline:0; border-radius:0; }

  .d-l{ font-size:clamp(2rem,8.6vw,2.9rem); }
  .d-m{ font-size:clamp(1.6rem,6.6vw,2.1rem); }
  .lede{ font-size:1.0625rem; }

  /* the one sentence must not break mid-word */
  .manifesto blockquote{
    font-size:clamp(1.6rem,7.2vw,2.4rem); max-width:100%;
    hyphens:none; -webkit-hyphens:none; overflow-wrap:normal;
  }
  .manifesto{ gap:22px; }

  /* the ledger reads as a list rather than a table */
  .ledger__row{ grid-template-columns:2.4em 1fr; gap:10px; padding-block:16px; }
  .ledger__row:hover{ padding-left:0; }
  .ledger__t{ font-size:1.0625rem; line-height:1.35; }

  /* the messaging panel filled with dead space at phone height */
  .phone{ max-width:100%; border-radius:26px; padding:9px; }
  .phone__screen{ height:min(62vh,430px); border-radius:19px; }
  .chat-stage{ gap:30px; }
  .msg{ max-width:88%; }

  .figures{ grid-template-columns:1fr; gap:12px; }
  .figure{ padding:22px; }
  .figure__v{ font-size:clamp(2.4rem,11vw,3rem); }

  .closer{ gap:16px; margin-top:clamp(30px,7vw,44px); }
  .closer .btn{ width:100%; justify-content:center; }
  .btn--lg{ padding-block:1em; }

  /* every question is a comfortable target */
  .q__btn{ padding-block:20px; gap:14px; min-height:44px; font-size:1.0625rem; }
  .q__ic{ width:17px; height:17px; }
  .q__body p{ font-size:1rem; }

  .footer{ padding-bottom:max(clamp(40px,9vw,60px), env(safe-area-inset-bottom)); }
  .footer__in{ gap:30px; }
  .footer li a, .linkish{ display:inline-flex; align-items:center; min-height:44px; }
  .footer__base{ font-size:.625rem; gap:8px; }
  .footer__base .spacer{ display:none; }

  /* the dialog behaves like a sheet on a phone */
  .modal{ width:100%; max-width:100%; margin:0; align-self:flex-end; }
  .modal__card{
    border-radius:24px 24px 0 0;
    max-height:92svh;
    padding:26px 20px max(26px, env(safe-area-inset-bottom));
  }
  .modal__x{ width:42px; height:42px; top:12px; right:12px; }
  .form__row{ grid-template-columns:1fr; }
  .form__foot .btn{ width:100%; justify-content:center; padding-block:.95em; }

  /* 16px stops iOS zooming the page when a field takes focus */
  .field input{ font-size:16px; padding:.9em 1em; }
  .search-form input[type="search"]{ font-size:16px; }
}

@media (max-width:400px){
  .brand img{ width:86px; }
  .nav__in .btn{ font-size:.75rem; padding:.72em .9em; }
  .hero h1{ font-size:clamp(2.25rem,10.2vw,2.9rem); }
  .d-l{ font-size:clamp(1.85rem,8.4vw,2.4rem); }
}

/* a phone held sideways has almost no height to give */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:88px; padding-bottom:44px; }
  .phone__screen{ height:min(78vh,340px); }
  .modal__card{ max-height:94svh; }
}

/* a mouse is never assumed */
@media (hover:none){
  .mod:hover, .glass--sheen:hover::after{ transform:none; }
  .btn--gold:hover, .btn--ghost:hover{ transform:none; }
  .ledger__row:hover{ padding-left:0; }
  .btn:active{ transform:scale(.985); }
  .q__btn:active{ opacity:.7; }
}

/* ══════════════════════════════════════════════════════════════════
   WordPress additions
   Everything above is the site design. Everything below exists only
   because the markup is now rendered by WordPress.
══════════════════════════════════════════════════════════════════ */

/* menus come out of wp_nav_menu as lists */
.nav__links{
  list-style:none; margin:0; padding:0;
  align-items:center;
}
.nav__links li{ display:block; }
.nav__links li a{ display:inline-block; }

/* the admin bar pushes the fixed header down */
body.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .nav{ top:46px; }
}

/* skip link, visible only on focus */
.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;
  width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--ivory); clip:auto; clip-path:none;
  color:var(--ink-2); display:block; font-family:var(--mono); font-size:.8125rem;
  height:auto; left:16px; line-height:normal; padding:14px 20px;
  border:1px solid var(--gold); border-radius:10px;
  text-decoration:none; top:16px; width:auto; z-index:100000;
}

/* ── the inner pages: posts, pages, search, 404 ─────────────────── */
.page-shell{ position:relative; z-index:1; padding-block:clamp(120px,15vh,190px) clamp(72px,9vw,120px); }
.page-shell .wrap{ max-width:820px; }
.entry-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(28px,4vw,44px); }
.entry-meta{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.entry-content{ color:var(--ink-2); }
.entry-content > * + *{ margin-top:1.15em; }
.entry-content h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.018em; color:var(--ink); margin-top:1.8em; }
.entry-content h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.015em; color:var(--ink); margin-top:1.6em; }
.entry-content a{ color:var(--gold-ink); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
.entry-content a:hover{ color:var(--ink); }
.entry-content img{ border-radius:16px; }
.entry-content blockquote{
  margin:0; padding:4px 0 4px 22px; border-left:2px solid var(--gold);
  font-family:var(--display); font-size:1.3rem; line-height:1.4; color:var(--ink);
}
.entry-content code, .entry-content pre{ font-family:var(--mono); font-size:.875rem; }
.entry-content pre{ background:rgba(140,120,80,.1); padding:18px; border-radius:14px; overflow-x:auto; }
.entry-content ul, .entry-content ol{ padding-left:1.3em; }
.entry-content li + li{ margin-top:.4em; }
.entry-content table{ width:100%; border-collapse:collapse; }
.entry-content th, .entry-content td{ border-bottom:1px solid var(--edge); padding:10px 12px; text-align:left; }

.post-list{ display:grid; gap:clamp(14px,2vw,22px); }
.post-card{ padding:clamp(20px,2.4vw,28px); border-radius:18px; display:flex; flex-direction:column; gap:10px; }
.post-card h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.75rem); letter-spacing:-.015em; margin:0; }
.post-card p{ margin:0; font-size:.9375rem; color:var(--ink-2); }

.pager{ display:flex; gap:12px; margin-top:clamp(28px,4vw,44px); flex-wrap:wrap; }
.pager .page-numbers{
  font-family:var(--mono); font-size:.8125rem; padding:.5em .9em; border-radius:999px;
  border:1px solid var(--edge); color:var(--ink-2);
}
.pager .page-numbers.current{ background:linear-gradient(160deg,var(--gold-pale),var(--gold-lit)); border-color:transparent; color:#2A2008; }

.search-form{ display:flex; gap:10px; margin-top:20px; }
.search-form input[type="search"]{
  flex:1; padding:.8em 1em; border-radius:12px; border:1px solid var(--edge);
  background:rgba(255,253,246,.8); font-size:.9375rem;
}
.search-form input[type="search"]:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(206,154,22,.14); }

/* the honeypot field, never shown to a person */
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }