/* ABOUT PAGE v6 */

/* Hero */
.ab-hero {
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  min-height:100svh;
  padding:calc(var(--navh) + 60px) var(--pad) 80px;
  background:transparent;border-bottom:1px solid var(--line);
  align-items:end;transition:border-color 0.45s;
  box-sizing:border-box;
}
.ab-title {
  font-family:var(--fh);font-size:clamp(80px,14vw,200px);
  line-height:0.85;text-transform:uppercase;letter-spacing:-2px;
  display:flex;flex-direction:column;margin-bottom:32px;
  margin-top:28px;
  color:var(--fg);transition:color 0.45s;
  opacity:0;transform:translateX(-40px);
  animation:abSlide 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
}
.abt-l{display:block}
.abt-sup{color:var(--yellow);font-size:0.45em;line-height:1;margin-top:-8px}
.ab-meaning{display:flex;flex-direction:column;gap:10px}
.abm-row{display:flex;align-items:center;gap:16px}
.abm-char{font-family:var(--fh);font-size:28px;color:var(--yellow);min-width:40px}
.abm-def{font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg3);transition:color 0.45s}
.ab-intro{font-size:17px;line-height:1.8;color:var(--fg2);margin-bottom:20px;max-width:100%;transition:color 0.45s}
.ab-wry{font-size:14px;color:var(--line2);font-style:italic}

/* MANIFESTO STRIP — text always adapts to light/dark */
.manifesto-strip{
  background:var(--fg);  /* dark in light mode, light in dark mode */
  padding:60px var(--pad);display:flex;flex-direction:column;gap:4px;
  transition:background 0.45s;
}

.mf-line{
  font-family:var(--fh);font-size:clamp(36px,5.5vw,80px);
  line-height:1.05;text-transform:uppercase;letter-spacing:0.01em;
  color:var(--bg);  /* bg = light in light mode = white text on dark strip */
  transition:color 0.45s;
}
  /* dark mode: dark text on light strip */
.mf-outline{color:var(--yellow);-webkit-text-stroke:0;transition:color 0.45s}

/* VALUES — 5 cards */
.values-section{padding:100px var(--pad);background:var(--bg2);transition:background 0.45s}

/* 5 cards — fills full page width, each card bigger */
.values-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin-top:40px;
  /* No max-width — stretch to full container */
  width:100%;
}
@media(max-width:1200px){.values-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.values-grid{grid-template-columns:1fr}}

.val-card{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:32px 24px;position:relative;overflow:hidden;
  min-height:280px;
  transition:transform 0.35s var(--ease-b),border-color 0.25s,box-shadow 0.35s,background 0.45s;cursor:none;
}
.val-card:hover{transform:translateY(-8px);border-color:var(--vc,var(--pink));box-shadow:0 12px 40px rgba(0,0,0,0.07)}
.val-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--vc,var(--pink));transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s var(--ease-o);
}
.val-card:hover::before{transform:scaleX(1)}
.vc-num{font-family:var(--fh);font-size:12px;letter-spacing:0.3em;color:var(--fg3);margin-bottom:14px;transition:color 0.45s}
.vc-title{font-family:var(--fh);font-size:22px;text-transform:uppercase;line-height:1.05;margin-bottom:14px;color:var(--fg);transition:color 0.45s}
.vc-body{font-size:13px;line-height:1.7;color:var(--fg2);margin-bottom:24px;transition:color 0.45s}
.vc-gif{height:70px;display:flex;align-items:center;justify-content:center;opacity:0.55}

/* CSS animated elements */
.gif-grid{display:grid;grid-template-columns:repeat(3,14px);gap:4px}
.gg-cell{width:14px;height:14px;background:var(--pink);border-radius:2px;animation:ggPulse 1.8s ease-in-out infinite var(--d,0s)}
@keyframes ggPulse{0%,100%{opacity:0.15;transform:scale(0.7)}50%{opacity:1;transform:scale(1)}}
.gif-rings{position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center}
.gr-ring{position:absolute;width:var(--r);height:var(--r);border-radius:50%;border:1.5px solid var(--blue);animation:grSpin var(--sp,3s) linear infinite var(--d,0s)}
@keyframes grSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.gif-bounce{display:flex;flex-direction:column;align-items:center;gap:4px}
.gb-dot{width:20px;height:20px;background:var(--brown);border-radius:50%;animation:gbBounce 1s cubic-bezier(0.36,0,0.66,-0.56) infinite alternate}
@keyframes gbBounce{from{transform:translateY(0)}to{transform:translateY(-30px)}}
.gb-shadow{width:20px;height:5px;background:rgba(0,0,0,0.15);border-radius:50%;animation:gbShadow 1s ease-in-out infinite alternate}
@keyframes gbShadow{from{transform:scaleX(1);opacity:0.3}to{transform:scaleX(0.5);opacity:0.1}}
.gif-cube{position:relative;width:50px;height:50px;animation:gcRotate 4s linear infinite}
@keyframes gcRotate{from{transform:rotateY(0deg) rotateX(15deg)}to{transform:rotateY(360deg) rotateX(15deg)}}
.gc-face{position:absolute;width:40px;height:40px;border:1.5px solid var(--red);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.gc-back{transform:translate(-50%,-50%) translate(8px,-8px);opacity:0.4}
.gc-line{position:absolute;top:50%;left:50%;width:12px;height:1.5px;background:var(--red);opacity:0.35;transform:translate(-50%,-50%) rotate(var(--a))}

/* PROCESS SECTION */
.process-section{padding:100px var(--pad);background:var(--bg);transition:background 0.45s}
.process-list{display:flex;flex-direction:column;gap:0;margin-top:48px;max-width:860px}
.pr-item{
  display:grid;grid-template-columns:56px 1fr;gap:28px;
  padding:28px 16px;border-bottom:1px solid var(--line);
  border-radius:6px;transition:background 0.25s,padding-left 0.3s,border-color 0.45s;cursor:none;
}
.pr-item:last-child{border-bottom:none}
.pr-item:hover{background:color-mix(in srgb,var(--pc,var(--pink)) 8%,transparent);padding-left:20px}
.pri-num{font-family:var(--fb);font-size:10px;font-weight:700;letter-spacing:0.25em;color:var(--fg3);padding-top:6px;transition:color 0.45s}
.pri-title{font-family:var(--fh);font-size:28px;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:8px;transition:color 0.2s;color:var(--fg)}
.pr-item:hover .pri-title{color:var(--pc,var(--pink))}
.pri-desc{font-size:14px;line-height:1.7;color:var(--fg2);max-width:540px;transition:color 0.45s}

/* CTA */
.ab-cta{padding:100px var(--pad);background:var(--bg);text-align:center;transition:background 0.45s}
.ab-cta .sec-title{margin-bottom:20px}
.ab-cta p{font-size:16px;line-height:1.75;color:var(--fg2);margin-bottom:36px;max-width:540px;margin-left:auto;margin-right:auto;transition:color 0.45s}

@keyframes abSlide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}

@media(max-width:700px){
  .ab-hero{grid-template-columns:1fr;gap:40px}
}

/* Process layout — list left, meme right (bigger) */
.process-layout {
  display: grid;
  grid-template-columns: 1fr 580px;
  gap: 80px;
  align-items: start;
  width: 100%;
}
@media(max-width:1000px) {
  .process-layout { grid-template-columns: 1fr; }
}

/* Process meme — sticky, shifted slightly left (toward centre) */
.process-meme{
  border-radius:12px;overflow:hidden;background:var(--bg2);
  transition:background 0.45s;
  margin-top: 48px;
  margin-left: -40px;  /* shift left into the gap */
  position: sticky;
  top: calc(var(--navh) + 40px);
  max-width: calc(100% + 40px);
  transform: scale(0.85) translateX(-60px);
  transform-origin: top left;
}
/* NO hover effect */
.process-meme:hover{ /* intentionally empty */ }
.pm-img{width:100%;display:block;filter:saturate(0.85);}
/* no hover filter change */
.pm-caption{padding:18px 22px;font-size:14px;line-height:1.6;color:var(--fg2);font-style:italic;transition:color 0.45s}

/* ── HALO CONTROL — about page ──
   Hero, manifesto, process, footer: solid bg covers the fixed canvas.
   Values section + ab-cta: transparent bg lets halo show through.
*/
.ab-hero {
  position: relative;
  z-index: 1;
  background: transparent;    /* transparent — halo visible */
}
.manifesto-strip {
  position: relative;
  z-index: 2;
  /* already has solid bg via var(--fg) — halo hidden */
}
.process-section {
  position: relative;
  z-index: 2;
  background: var(--bg);      /* opaque — hides halo */
}
/* values-section and ab-cta: transparent, halo shows through */
.values-section {
  position: relative;
  z-index: 1;
  background: transparent;    /* halo visible */
}
.ab-cta {
  position: relative;
  z-index: 1;
  background: transparent;    /* halo visible */
}
/* Footer always covers halo */
.footer {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════
   PERSONAL SECTION — "The person behind the work"
   ═══════════════════════════════════════════════════════ */

.ab-person {
  padding: 100px var(--pad);
  background: var(--bg);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
  transition: background 0.45s, border-color 0.45s;
}

.ab-person-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

@media (max-width: 900px) {
  .ab-person-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Left — heading + quote */
.ab-person-left {
  position: sticky;
  top: calc(var(--navh) + 40px);
}

.ab-person-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 20px;
  transition: color 0.45s;
}

.ab-person-heading {
  font-family: var(--fh);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--fg);
  margin-bottom: 48px;
  transition: color 0.45s;
}

.ab-person-heading em {
  color: var(--blue);
  font-style: normal;
}

/* Pull quote */
.ab-person-quote {
  position: relative;
  padding: 28px 28px 28px 24px;
  border-left: 3px solid var(--yellow);
  background: var(--bg2);
  border-radius: 0 6px 6px 0;
  transition: background 0.45s, border-color 0.45s;
}

.ab-person-quote blockquote {
  font-family: var(--fb);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.75;
  color: var(--fg);
  margin-bottom: 12px;
  transition: color 0.45s;
}

.ab-person-quote cite {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg3);
  font-style: normal;
  transition: color 0.45s;
}

/* Right — narrative */
.ab-person-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ab-person-p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--fg2);
  transition: color 0.45s;
}

.ab-person-p strong {
  color: var(--fg);
  font-weight: 600;
  transition: color 0.45s;
}

/* Name callout */
.ab-person-name-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 8px 0;
  transition: border-color 0.45s;
}

.ab-person-name {
  font-family: var(--fh);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
  transition: color 0.45s;
}

.ab-person-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg3);
  transition: color 0.45s;
}

/* CTA */
.ab-person-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.ab-person-cta-note {
  font-size: 13px;
  color: var(--fg3);
  font-style: italic;
  transition: color 0.45s;
}

/* Personal site button — outline style */
.btn-personal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg);
  padding: 13px 24px;
  border: 2px solid var(--fg);
  border-radius: 2px;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-b);
  white-space: nowrap;
}

.btn-personal:hover {
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-2px);
}

.btn-personal .btn-arrow {
  font-size: 13px;
  transition: transform 0.25s var(--ease);
}

.btn-personal:hover .btn-arrow {
  transform: translate(2px, -2px);
}

/* ── About hero ³ as true superscript ── */
.abt-sup-inline {
  font-size: 0.48em;
  vertical-align: super;
  line-height: 0;
  color: var(--yellow);
  font-style: normal;
  letter-spacing: 0;
  margin-left: 2px;
  transition: color 0.45s;
}
/* Remove old separate abt-sup block styling */
.abt-sup { display: none; }

/* ── MANIFESTO — brutalist centred override ── */
.manifesto-brutalist {
  min-height: 100svh;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  background: var(--fg);
  position: relative;
  overflow: hidden;
  transition: background 0.45s;
  box-sizing: border-box;
}

.manifesto-brutalist .mf-line {
  font-family: var(--fh);
  font-size: clamp(52px, 9.5vw, 148px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--bg);
  text-align: center;
  display: block;
  width: 100%;
  transition: color 0.45s;
}

.manifesto-brutalist .mf-outline {
  color: var(--yellow);
  font-style: normal;
  font-size: clamp(52px, 9.5vw, 148px);
  letter-spacing: -0.03em;
}

/* ── Manifesto — bottom scenery animation ── */
.manifesto-brutalist {
  position: relative;
  padding-bottom: 0 !important; /* scene sits flush at bottom */
}

.mf-scene {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-top: 32px;
  flex-shrink: 0;
}

.mf-scene svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Ground line */
.mf-ground {
  /* static — drawn in SVG */
}

/* Walking person */
.mf-walker {
  animation: walkerMove 14s linear infinite;
}
@keyframes walkerMove {
  from { transform: translateX(110vw); }
  to   { transform: translateX(-220px); }
}

/* City buildings parallax slower */
.mf-city {
  animation: cityMove 34s linear infinite;
}
@keyframes cityMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }
}

/* Clouds drift */
.mf-clouds {
  animation: cloudDrift 50s linear infinite;
}
@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }
}

/* Floating dot above walker */
.mf-dot {
  animation: walkerMove 14s linear infinite;
  animation-delay: -0.2s;
}

/* Ō — letter black, macron bar yellow via positioned overlay */
.abt-accent {
  color: var(--fg); /* O stays black */
  position: relative;
  display: inline-block;
}