/* =====================================================================
   andyprowse.com — "Mist" theme  V7 03.11.26
   Dark, mysterious grey-black · drifting mist · silver · hexagons
   Shared by every page: tokens, page mist, hexagon top bar, honeycomb,
   mobile honeycomb menu, buttons and section headings.
   ===================================================================== */

:root{
  /* surfaces (token names kept from the previous theme so page styles map across) */
  --white:#141518;          /* card surface */
  --ice-0:#0b0c0e;          /* page */
  --ice-1:#1a1c20;          /* raised */
  --ice-2:#22252a;
  --frost:#2b2f35;

  --silver-1: rgba(255,255,255,0.08);
  --silver-2: rgba(255,255,255,0.16);
  --silver-3:#6c727b;
  --silver-4:#8b919a;

  --ink:#f2f3f5;
  --text:#d6d9de;
  --text-dim:#9aa0a9;
  --text-dim-2:#6d737c;

  /* accent = cold silver light */
  --cyan:#ffffff;
  --electric:#e8ebef;
  --electric-deep:#c5cad2;
  --ocean:#2a2e35;
  --abyss:#050506;
  --on-accent:#0b0c0e;

  --grad-electric: linear-gradient(135deg, #ffffff 0%, #d3d8df 45%, #8d949f 100%);
  --grad-silver: linear-gradient(135deg, #ffffff 0%, #c9ced6 50%, #7b828d 100%);

  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 6px 16px -6px rgba(0,0,0,0.6);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 28px 60px -24px rgba(0,0,0,0.85);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.22), 0 12px 34px -12px rgba(220,226,235,0.35);

  --wide: "Unbounded", "Arial Black", sans-serif;
  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --accent: "Unbounded", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 14px;
  --gutter: clamp(18px, 4vw, 56px);
  --bar-h: 78px;
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background: var(--ice-0); }
html,body{ margin:0; padding:0; }
body{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, #23262b 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #1a1c20 0%, transparent 60%),
    linear-gradient(180deg, #121316 0%, #0b0c0e 55%, #08090a 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}
/* film grain over everything */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index: 3000;
  pointer-events:none;
  background: url(../images/fx/grain.png);
  opacity: 0.55;
  mix-blend-mode: overlay;
}
a{ color:inherit; }
::selection{ background: rgba(255,255,255,0.22); color: #fff; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 1.5px solid #fff;
  outline-offset: 3px;
}

/* ---------- Page-level drifting mist ---------- */
.mist-field{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.mist-field .fog{ opacity:0.2; width: max(300%, 3600px); }
.mist-field .fog.f2{ opacity:0.15; }
.mist-field .fog.f3{ opacity:0.1; }
/* slow-moving pools of grey-white light */
.mist-field .glow{
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  will-change: transform, opacity;
}
.mist-field .g1{ width:60vw; height:60vw; left:-10vw; top:-25vw; background: radial-gradient(circle, rgba(200,206,215,0.20), transparent 65%); animation: roam-1 38s ease-in-out infinite alternate; }
.mist-field .g2{ width:55vw; height:55vw; right:-15vw; top:20vh; background: radial-gradient(circle, rgba(170,177,188,0.16), transparent 65%); animation: roam-2 46s ease-in-out infinite alternate; }
.mist-field .g3{ width:50vw; height:50vw; left:25vw; bottom:-30vw; background: radial-gradient(circle, rgba(225,229,235,0.12), transparent 65%); animation: roam-3 54s ease-in-out infinite alternate; }
@keyframes roam-1{ 0%{ transform: translate(0,0) scale(1); opacity:0.7; } 50%{ opacity:1; } 100%{ transform: translate(35vw, 25vh) scale(1.25); opacity:0.6; } }
@keyframes roam-2{ 0%{ transform: translate(0,0) scale(1.1); opacity:0.9; } 100%{ transform: translate(-40vw, -15vh) scale(0.85); opacity:0.5; } }
@keyframes roam-3{ 0%{ transform: translate(0,0) scale(0.9); opacity:0.5; } 100%{ transform: translate(-20vw, -35vh) scale(1.2); opacity:1; } }

/* shared fog layer: 3 tiles wide, slides one tile for a seamless loop */
.fog{
  position:absolute;
  left:0;
  top: var(--top, 0%);
  width:300%;
  height: var(--h, 100%);
  background-repeat: repeat-x;
  background-size: 33.3334% 100%;
  background-position: 0 0;
  will-change: transform, opacity;
  animation: fog-left var(--dur, 60s) linear infinite;
  pointer-events:none;
}
.fog.fa{ background-image: url(../images/fx/fog-a.webp); }
.fog.fb{ background-image: url(../images/fx/fog-b.webp); }
.fog.fc{ background-image: url(../images/fx/fog-c.webp); }
.fog.rev{ animation-name: fog-right; }
@keyframes fog-left{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-33.3334%,0,0); } }
@keyframes fog-right{ from{ transform: translate3d(-33.3334%,0,0); } to{ transform: translate3d(0,0,0); } }

/* ---------- Hexagon (shared) ---------- */
.hex{
  position:absolute;
  width: var(--w);
  height: calc(var(--w) * 1.1547);
  left: calc(var(--cx) * (var(--w) + var(--g)));
  top: calc(var(--cy) * (var(--w) * 0.866 + var(--g) * 0.866));
  clip-path: var(--hex);
  -webkit-clip-path: var(--hex);
  overflow:hidden;
  isolation:isolate;
  background:#0d0e10;
  display:block;
  text-decoration:none;
  color:#fff;
}
.hex-edge{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:20;
  overflow:visible;
}
.hex-edge polygon{
  fill:none;
  stroke: rgba(255,255,255,0.22);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: stroke 400ms ease;
}
.hex-edge .trace{
  stroke: #fff;
  stroke-width: 1.6;
  stroke-dasharray: 0 400;
  transition: stroke-dasharray 900ms cubic-bezier(.4,0,.2,1);
}

/* link hexagons */
.hex-link .hex-img{
  position:absolute; inset:-4%;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.42) contrast(1.15);
  transform: scale(1.02);
  transition: filter 700ms ease, transform 1200ms cubic-bezier(.2,.8,.2,1);
  z-index:0;
}
.hex-link .hex-shade{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(70% 55% at 50% 55%, rgba(8,9,11,0.15), rgba(8,9,11,0.75) 100%),
    linear-gradient(180deg, rgba(8,9,11,0.1) 0%, rgba(8,9,11,0.55) 100%);
  transition: opacity 600ms ease;
}
.hex-link .fog{ z-index:3; opacity:0.22; --dur: 70s; }
.hex-body{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: calc(var(--w) * 0.05);
  text-align:center;
  padding: 0 10%;
}
.hex-icon{ width: calc(var(--w) * 0.12); height: calc(var(--w) * 0.12); color: rgba(255,255,255,0.75); transition: transform 500ms ease, color 400ms ease; }
.hex-title{
  font-family: var(--wide);
  font-weight: 300;
  font-size: calc(var(--w) * 0.074);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
  white-space:nowrap;
}
.hex-link:hover .hex-img, .hex-link:focus-visible .hex-img{ filter: grayscale(0.35) brightness(0.7) contrast(1.05); transform: scale(1.12); }
.hex-link:hover .hex-edge polygon, .hex-link:focus-visible .hex-edge polygon{ stroke: rgba(255,255,255,0.55); }
.hex-link:hover .hex-edge .trace, .hex-link:focus-visible .hex-edge .trace{ stroke-dasharray: 400 0; }
.hex-link:hover .hex-icon{ transform: translateY(-3px); color:#fff; }
.hex-link:focus-visible{ outline:none; }

/* ---------- Hidden press-and-hold (see site.js): nothing visible changes ---------- */
[data-hold-href]{
  touch-action: pan-y;
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
[data-hold-href] > *{ pointer-events:none; }

/* ---------- The AP storm hexagon ---------- */
.hex-logo{ background:#08090a; }
.hex-logo .storm{
  position:absolute; inset:-6%;
  background: url(../images/fx/storm.jpg) center / cover;
  animation: storm-breathe 26s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes storm-breathe{
  0%{ transform: scale(1) rotate(0deg); filter: brightness(0.7); }
  100%{ transform: scale(1.12) rotate(2deg); filter: brightness(0.95); }
}
.hex-logo .fog{ z-index:2; }
.hex-logo .fog.back-1{ --top: 8%;  --h: 70%; --dur: 34s; opacity:0.38; }
.hex-logo .fog.back-2{ --top: 30%; --h: 80%; --dur: 46s; opacity:0.3; }
.hex-logo .ap-glow{
  position:absolute; left:50%; top:50%;
  width:70%; height:45%;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(220,228,240,0.22), transparent);
  filter: blur(6px);
  z-index:3;
  animation: glow-pulse 7s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }
.hex-logo .ap-float{
  position:absolute; left:50%; top:50%;
  width:62%;
  transform: translate(-50%,-50%);
  z-index:4;
  animation: ap-float 9s ease-in-out infinite;
}
.hex-logo .ap-svg{ width:100%; height:auto; display:block; overflow:visible; }
@keyframes ap-float{
  0%,100%{ transform: translate(-50%,-52%) rotate(-0.6deg); }
  50%{ transform: translate(-50%,-46%) rotate(0.6deg); }
}
.hex-logo .fog.front-1{ z-index:6; --top: 22%; --h: 62%; --dur: 22s; animation: fog-left var(--dur) linear infinite, veil 13s ease-in-out infinite; }
.hex-logo .fog.front-2{ z-index:7; --top: 44%; --h: 60%; --dur: 30s; animation: fog-right var(--dur) linear infinite, veil 17s ease-in-out -6s infinite; }
@keyframes veil{ 0%,100%{ opacity:0.12; } 45%{ opacity:0.78; } 70%{ opacity:0.35; } }
.hex-logo .hex-vignette{
  position:absolute; inset:0; z-index:9;
  background: radial-gradient(75% 60% at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%);
  pointer-events:none;
}
.hex-logo .hex-edge polygon{ stroke: rgba(255,255,255,0.32); }

/* ---------- Honeycomb container ---------- */
.comb{
  --w: 210px;
  --g: 14px;
  position:relative;
  width: calc(var(--w) * 3 + var(--g) * 2);
  height: calc(var(--w) * 1.1547 + var(--w) * 0.866 + var(--g) * 0.866);
  margin: 0 auto;
}

/* ---------- Top bar (inner pages) ---------- */
.hx-bar{
  position:fixed;
  top:0; left:0; right:0;
  height: var(--bar-h);
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(9,10,12,0.92) 0%, rgba(9,10,12,0.72) 70%, rgba(9,10,12,0.0) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hx-bar::after{
  content:""; position:absolute; left:var(--gutter); right:var(--gutter); bottom:8px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}
.hx-home{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.hx-mini{
  position:relative;
  width:46px; height:53px;
  clip-path: var(--hex); -webkit-clip-path: var(--hex);
  background: #0a0b0c url(../images/fx/storm.jpg) center/cover;
  display:grid; place-items:center;
  overflow:hidden;
}
.hx-mini .fog{ --dur: 18s; opacity:0.45; --top: 20%; --h: 70%; }
.hx-mini svg.ap-svg{ width:30px; position:relative; z-index:2; }
.hx-word{
  font-family: var(--wide);
  font-weight:300;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:#fff;
}
.hx-links{ display:flex; align-items:center; gap: clamp(14px, 2.4vw, 34px); }
.hx-link{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 250ms ease;
}
.hx-badge{
  position:relative;
  width:32px; height:37px;
  display:grid; place-items:center;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.hx-badge svg.hx-shape{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hx-badge svg.hx-shape polygon{ fill: rgba(255,255,255,0.02); stroke: rgba(255,255,255,0.28); stroke-width:1; vector-effect: non-scaling-stroke; transition: fill 300ms ease, stroke 300ms ease; }
.hx-badge .nav-icon-svg{ width:15px; height:15px; position:relative; z-index:1; }
.hx-badge .env-flap{ stroke: #141518; }
.hx-link:hover{ color:#fff; }
.hx-link:hover .hx-badge{ transform: rotate(30deg); }
.hx-link:hover .hx-badge .nav-icon-svg{ transform: rotate(-30deg); }
.hx-link:hover .hx-badge svg.hx-shape polygon{ stroke:#fff; }
.hx-link.is-active{ color:#fff; }
.hx-link.is-active .hx-badge svg.hx-shape polygon{ fill:#fff; stroke:#fff; }
.hx-link.is-active .hx-badge .nav-icon-svg{ color:#0b0c0e; }
.hx-link.is-active .hx-badge .env-flap{ stroke:#fff; }
.nav-icon-svg{ transition: transform 500ms cubic-bezier(.2,.8,.2,1); }

/* hex menu button (mobile) */
.gnav-toggle{
  display:none;
  position:relative;
  width:44px; height:51px;
  background:none; border:none; padding:0; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  z-index:1101;
}
.gnav-toggle::before{
  content:""; position:absolute; inset:0;
  clip-path: var(--hex); -webkit-clip-path: var(--hex);
  background: rgba(255,255,255,0.28);
}
.gnav-toggle::after{
  content:""; position:absolute; inset:1px;
  clip-path: var(--hex); -webkit-clip-path: var(--hex);
  background: #101114;
}
.gnav-toggle span{
  position:relative; z-index:1;
  display:block; width:16px; height:1.5px; background:#fff;
  transition: transform 220ms ease, opacity 220ms ease;
}
.gnav-toggle.is-open span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.gnav-toggle.is-open span:nth-child(2){ opacity:0; }
.gnav-toggle.is-open span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

/* full-screen honeycomb menu */
.gnav-drawer{
  position:fixed; inset:0;
  padding-top: var(--bar-h);
  z-index:1050;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:
    radial-gradient(700px 500px at 50% 40%, rgba(40,43,49,0.9), transparent 70%),
    #070809;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
  overflow:hidden;
}
.gnav-drawer.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity 300ms ease, visibility 0s; }
body.menu-open{ overflow:hidden; }
.gnav-drawer .comb{ --w: min(150px, calc((100vw - 48px - 2 * 10px) / 3)); --g: 10px; transform: scale(0.94); transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.gnav-drawer.is-open .comb{ transform: scale(1); }

@media (max-width: 860px){
  .hx-links{ display:none; }
  .gnav-toggle{ display:flex; }
}

.page-shell{
  position:relative;
  z-index:1;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}
.page-shell.has-bar{ padding-top: var(--bar-h); }

/* ---------- Page canvas ---------- */
.stage{
  position:relative;
  width:100%;
  flex:1;
  isolation:isolate;
  background: transparent;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  overflow:hidden;
  font-family: var(--mono);
  font-size: 11px;
  font-weight:500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration:none;
  padding: 13px 22px;
  border-radius: 0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease, transform 260ms ease;
  border: 1px solid rgba(255,255,255,0.7);
  background: transparent;
  color:#fff;
  cursor:pointer;
}
.btn-solid{ background:#fff; color: var(--on-accent); border-color:#fff; }
.btn-solid:hover{ background: transparent; color:#fff; }

/* ---------- Section headings ---------- */
section.pagesec{
  padding: clamp(40px, 7vw, 88px) var(--gutter);
  position:relative;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap:wrap;
}
.section-head h1{
  font-family: var(--wide);
  font-weight:200;
  font-size: clamp(30px, 5vw, 66px);
  line-height:1.04;
  letter-spacing:0.04em;
  text-transform: uppercase;
  margin: 12px 0 0;
  color: #fff;
}
.section-head h1 em{
  font-style: normal;
  font-weight:200;
  background: linear-gradient(180deg, #ffffff 0%, #8f96a1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.section-head p{
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height:1.75;
  margin: 16px 0 0;
}
.index-num{
  font-family: var(--mono);
  font-size: 11px;
  font-weight:500;
  color: var(--text-dim);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.index-num::before{
  content:"";
  width:9px; height:10px;
  clip-path: var(--hex); -webkit-clip-path: var(--hex);
  background:#fff;
}

/* ---------- Reveal on scroll ---------- */
.js .reveal{ opacity:0; transform: translateY(16px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-in{ opacity:1; transform:none; }

.glow-card{ position:relative; }
.glow-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity 260ms ease;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.07), transparent 60%);
}
.glow-card:hover::after{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}