/* ================================================================
   SHREYAN NARULA — PORTFOLIO
   The Builder's Record — Broadsheet Design System
   Newspaper front · Dark editorial interior
   Palette: Newsprint Ivory · Ink Black · Champagne Gold · Midnight Navy
   Typography: Playfair Display + Libre Baskerville + Inter + JetBrains Mono
   ================================================================ */

/* ── RESET & FOUNDATIONAL ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Dark palette (all sections after hero) ───── */
  --bg:          #08080f;
  --surface:     #0f0f1c;
  --surface-2:   #161628;
  --surface-3:   #1e1e35;
  --border:      rgba(255, 255, 255, 0.065);
  --border-hover:rgba(201, 169, 110, 0.3);

  --accent:      #c9a96e;
  --accent-lt:   #e0c898;
  --accent-dim:  rgba(201, 169, 110, 0.1);
  --accent-dim2: rgba(201, 169, 110, 0.06);

  --ivory:       #f0ebe2;
  --text:        #a8a5a0;
  --text-2:      #c8c5bf;
  --muted:       #3e3d52;
  --muted-2:     #6b6982;

  /* ── Newspaper palette ─────────────────────────── */
  --paper:       #f5f0e5;
  --paper-2:     #ede7d8;
  --paper-3:     #e4ddd0;
  --ink:         #18130a;
  --ink-2:       rgba(24, 19, 10, 0.75);
  --ink-3:       rgba(24, 19, 10, 0.45);
  --ink-rule:    rgba(24, 19, 10, 0.18);
  --gold-print:  #b8924a;   /* slightly warmer gold for print context */

  /* ── Icon accent colors ─────────────────────────── */
  --teal: #5bb8b8;
  --blue: #6a9fd8;
  --rose: #d47a8f;

  /* ── Typography ───────────────────────────────── */
  --font-display:    'Playfair Display', Georgia, serif;
  --font-column:     'Libre Baskerville', Georgia, serif;
  --font-body:       'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing & Layout ─────────────────────────── */
  --max-w:       1400px;
  --gutter:      clamp(20px, 5vw, 80px);
  --section-pad: clamp(80px, 10vw, 130px);
  --radius:      10px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --nav-h:       76px;

  /* ── Easing ──────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.76, 0, 0.24, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #110e08; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201,169,110,0.7) 0%, rgba(201,169,110,0.35) 100%);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,0.95); }

/* ── SELECTION — global default ────────────────────────────────── */
::selection { background: rgba(201,169,110,0.35); color: inherit; }

/* ── SELECTION — per section ───────────────────────────────────── */
/* Hero newspaper: warm sepia */
#hero ::selection { background: rgba(24,19,10,0.18); color: var(--ink); }
/* About blueprint: cool steel blue */
#about ::selection { background: rgba(80,140,220,0.32); color: #e8f0ff; }
/* Work patent: warm amber on parchment */
#work ::selection { background: rgba(120,80,30,0.22); color: var(--ink); }
/* Projects dark: gold glow */
#projects ::selection { background: rgba(201,169,110,0.28); color: #fff; }
/* Contact dark: white mist */
#contact ::selection { background: rgba(255,255,255,0.18); color: #fff; }

/* ── LAYOUT UTILS ──────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-pad { padding-block: var(--section-pad); }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--ivory);
  letter-spacing: -0.01em;
}
.section-title em {
  font-style: italic;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(240, 235, 226, 0.25);
}

.section-header { margin-bottom: clamp(3rem, 5vw, 5rem); }

.accent { color: var(--accent); }


/* ════════════════════════════════════════════════════
   NEWSPAPER INTRO — smash · highlight · tear
   ════════════════════════════════════════════════════ */

/* Stage = full black screen behind the newspaper */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;   /* must beat the nav (which is z-index ~100) */
  pointer-events: all;
  background: #000;
  overflow: hidden;
}
.io-stage {
  position: absolute;
  inset: 0;
  /* Dark desk wood/textured table color */
  background: #110e0c;
  z-index: 0;
  /* Camera shake container */
  will-change: transform;
}

/* Subtle spotlight on the desk */
.io-stage-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 235, 200, 0.08) 0%, transparent 60%);
}

/* ── Camera Shake Physics (triggers on newspaper impact) ── */
@keyframes cam-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-8px, 6px) rotate(-0.5deg); }
  40% { transform: translate(6px, -4px) rotate(0.4deg); }
  60% { transform: translate(-4px, 4px) rotate(-0.2deg); }
  80% { transform: translate(2px, -2px) rotate(0.1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.io-stage.io-shaking {
  animation: cam-shake 0.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ── Background Decoy Newspapers (The Messy Desk) ── */
.io-newspaper-bg {
  position: absolute;
  width: 110vw;
  height: 105vh;
  top: 50%;
  left: 50%;
  background: #d8cba9; /* Darker/older looking */
  z-index: 1;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
  /* Subdued paper texture */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
/* Random violent scatters */
.io-bg-1 { transform: translate(-52%, -48%) rotate(-18deg) scale(0.9); }
.io-bg-2 { transform: translate(-45%, -55%) rotate(12deg) scale(0.95); }
.io-bg-3 { transform: translate(-48%, -42%) rotate(4deg) scale(1.02); }


/* ── Newspaper container — centered so masthead is always visible ── */
.io-newspaper {
  position: absolute;
  width: 115vw;
  height: 112vh;
  /* Anchor to screen center; transform handles positioning */
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 155vh)) rotate(-8deg);
  transform-origin: 50% 50%;
  z-index: 2;
  will-change: transform;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.85));
}

/* ── Gravity-physics smash — per-keyframe easing for realism ── */
@keyframes np-smash {
  0% {
    transform: translate(-50%, calc(-50% - 155vh)) rotate(-8deg) scale(0.94);
    /* slow start: free-fall hasn't built speed yet */
    animation-timing-function: cubic-bezier(0.55, 0.0, 0.9, 0.7);
  }
  65% {
    /* IMPACT: arrived fast, overshoot the resting position */
    transform: translate(-50%, calc(-50% + 6vh)) rotate(-5deg) scale(1.02);
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.15, 1);
  }
  78% {
    /* Bounce: paper lifts slightly, slight rotation from momentum */
    transform: translate(-50%, calc(-50% - 2.5vh)) rotate(-5.6deg) scale(0.995);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  90% {
    transform: translate(-50%, calc(-50% + 0.8vh)) rotate(-5deg) scale(1.0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.0);
  }
}
.io-newspaper.io-smashing {
  animation: np-smash 0.82s forwards;
}

/* ── Each half of the split newspaper ── */
.io-half {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/*
  Organic 120-point tear clip-path — completely chaotic, micro-jagged edges.
*/
.io-half-top {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 53.448731864246%, 100.00% 53.45%, 99.16% 51.46%, 98.32% 52.79%, 97.48% 51.96%, 96.64% 49.15%, 95.80% 51.06%, 94.96% 48.45%, 94.12% 48.15%, 93.28% 50.70%, 92.44% 49.82%, 91.60% 48.25%, 90.76% 46.94%, 89.92% 48.29%, 89.08% 47.48%, 88.24% 48.36%, 87.39% 47.02%, 86.55% 48.93%, 85.71% 47.71%, 84.87% 45.77%, 84.03% 47.91%, 83.19% 45.10%, 82.35% 47.98%, 81.51% 44.64%, 80.67% 48.01%, 79.83% 43.50%, 78.99% 45.22%, 78.15% 44.64%, 77.31% 44.96%, 76.47% 47.27%, 75.63% 44.21%, 74.79% 43.53%, 73.95% 43.34%, 73.11% 44.51%, 72.27% 45.77%, 71.43% 45.84%, 70.59% 45.49%, 69.75% 48.62%, 68.91% 44.19%, 68.07% 46.98%, 67.23% 43.83%, 66.39% 44.48%, 65.55% 45.21%, 64.71% 46.36%, 63.87% 52.63%, 63.03% 46.93%, 62.18% 43.83%, 61.34% 46.81%, 60.50% 44.81%, 59.66% 45.80%, 58.82% 45.34%, 57.98% 46.84%, 57.14% 46.96%, 56.30% 46.75%, 55.46% 48.41%, 54.62% 41.36%, 53.78% 46.75%, 52.94% 47.16%, 52.10% 49.15%, 51.26% 47.57%, 50.42% 48.56%, 49.58% 50.13%, 48.74% 51.15%, 47.90% 48.46%, 47.06% 51.33%, 46.22% 50.53%, 45.38% 50.83%, 44.54% 49.05%, 43.70% 49.44%, 42.86% 52.15%, 42.02% 50.04%, 41.18% 50.94%, 40.34% 50.37%, 39.50% 51.26%, 38.66% 53.86%, 37.82% 53.33%, 36.97% 53.33%, 36.13% 55.02%, 35.29% 51.98%, 34.45% 52.02%, 33.61% 53.02%, 32.77% 51.52%, 31.93% 53.28%, 31.09% 52.62%, 30.25% 52.84%, 29.41% 52.63%, 28.57% 54.16%, 27.73% 53.91%, 26.89% 56.61%, 26.05% 53.51%, 25.21% 54.40%, 24.37% 56.43%, 23.53% 54.19%, 22.69% 55.18%, 21.85% 56.31%, 21.01% 56.06%, 20.17% 53.61%, 19.33% 54.03%, 18.49% 56.04%, 17.65% 53.47%, 16.81% 54.69%, 15.97% 55.75%, 15.13% 56.12%, 14.29% 54.52%, 13.45% 52.37%, 12.61% 54.10%, 11.76% 52.54%, 10.92% 52.64%, 10.08% 53.43%, 9.24% 53.29%, 8.40% 52.75%, 7.56% 50.31%, 6.72% 53.87%, 5.88% 52.44%, 5.04% 49.75%, 4.20% 49.51%, 3.36% 51.11%, 2.52% 52.40%, 1.68% 49.13%, 0.84% 48.32%, 0.00% 50.20%, 0% 50.1989371154383%
  );
}
.io-half-bot {
  clip-path: polygon(
    0% 50.1989371154383%, 0.00% 50.20%, 0.84% 48.32%, 1.68% 49.13%, 2.52% 52.40%, 3.36% 51.11%, 4.20% 49.51%, 5.04% 49.75%, 5.88% 52.44%, 6.72% 53.87%, 7.56% 50.31%, 8.40% 52.75%, 9.24% 53.29%, 10.08% 53.43%, 10.92% 52.64%, 11.76% 52.54%, 12.61% 54.10%, 13.45% 52.37%, 14.29% 54.52%, 15.13% 56.12%, 15.97% 55.75%, 16.81% 54.69%, 17.65% 53.47%, 18.49% 56.04%, 19.33% 54.03%, 20.17% 53.61%, 21.01% 56.06%, 21.85% 56.31%, 22.69% 55.18%, 23.53% 54.19%, 24.37% 56.43%, 25.21% 54.40%, 26.05% 53.51%, 26.89% 56.61%, 27.73% 53.91%, 28.57% 54.16%, 29.41% 52.63%, 30.25% 52.84%, 31.09% 52.62%, 31.93% 53.28%, 32.77% 51.52%, 33.61% 53.02%, 34.45% 52.02%, 35.29% 51.98%, 36.13% 55.02%, 36.97% 53.33%, 37.82% 53.33%, 38.66% 53.86%, 39.50% 51.26%, 40.34% 50.37%, 41.18% 50.94%, 42.02% 50.04%, 42.86% 52.15%, 43.70% 49.44%, 44.54% 49.05%, 45.38% 50.83%, 46.22% 50.53%, 47.06% 51.33%, 47.90% 48.46%, 48.74% 51.15%, 49.58% 50.13%, 50.42% 48.56%, 51.26% 47.57%, 52.10% 49.15%, 52.94% 47.16%, 53.78% 46.75%, 54.62% 41.36%, 55.46% 48.41%, 56.30% 46.75%, 57.14% 46.96%, 57.98% 46.84%, 58.82% 45.34%, 59.66% 45.80%, 60.50% 44.81%, 61.34% 46.81%, 62.18% 43.83%, 63.03% 46.93%, 63.87% 52.63%, 64.71% 46.36%, 65.55% 45.21%, 66.39% 44.48%, 67.23% 43.83%, 68.07% 46.98%, 68.91% 44.19%, 69.75% 48.62%, 70.59% 45.49%, 71.43% 45.84%, 72.27% 45.77%, 73.11% 44.51%, 73.95% 43.34%, 74.79% 43.53%, 75.63% 44.21%, 76.47% 47.27%, 77.31% 44.96%, 78.15% 44.64%, 78.99% 45.22%, 79.83% 43.50%, 80.67% 48.01%, 81.51% 44.64%, 82.35% 47.98%, 83.19% 45.10%, 84.03% 47.91%, 84.87% 45.77%, 85.71% 47.71%, 86.55% 48.93%, 87.39% 47.02%, 88.24% 48.36%, 89.08% 47.48%, 89.92% 48.29%, 90.76% 46.94%, 91.60% 48.25%, 92.44% 49.82%, 93.28% 50.70%, 94.12% 48.15%, 94.96% 48.45%, 95.80% 51.06%, 96.64% 49.15%, 97.48% 51.96%, 98.32% 52.79%, 99.16% 51.46%, 100.00% 53.45%, 100% 53.448731864246%, 100% 100%, 0% 100%
  );
}

/* ── SVG tear propagation line ── */
.io-tear-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}
.io-tear-line {
  fill: none;
  stroke: rgba(255, 230, 200, 0.9); /* bright exposed paper fibers */
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Apply the turbulent SVG filter to make the cut look fibrous and fuzzy */
  filter: url(#tear-fiber-edge);
}

/* ── The actual paper sheet ── */
.io-sheet {
  position: absolute;
  inset: 0;
  background: #eee4c8;
  /* Paper grain */
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  /* Generous padding so content sits within the visible 100vw/100vh center */
  padding: clamp(2.5rem, 5vh, 5rem) clamp(3rem, 7vw, 8rem);
  box-sizing: border-box;
  color: #13100a;
  font-family: var(--font-display);
}

/* Structural Folds Overlay */
.io-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* subtle dark fold lines */
  background: 
    linear-gradient(to right, transparent 49.8%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.03) 50.2%, transparent 51%),
    linear-gradient(to bottom, transparent 32.8%, rgba(0,0,0,0.04) 33%, rgba(255,255,255,0.2) 33.2%, transparent 33.5%);
  z-index: 10;
}

/* ─── Newspaper Masthead ─── */
.np-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.np-mast-meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(19,16,10,0.5);
  white-space: nowrap;
}
.np-mast-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 700;
  font-style: italic;
  color: #13100a;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  text-align: center;
  flex: 1;
}
.np-mast-rule {
  width: 100%;
  border: none;
  border-top: 3px solid #13100a;
  margin: 0 0 0.3rem;
}
.np-mast-rule--light {
  border-top-width: 1px;
  border-top-color: rgba(19,16,10,0.3);
  margin: 0.25rem 0 0;
}
.np-mast-dateline {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: rgba(19,16,10,0.55);
  padding: 0.2rem 0;
}

/* ─── Body 2-col layout ─── */
.np-body {
  display: grid;
  grid-template-columns: 3fr 1.4fr;
  gap: 0 2.5rem;
  margin-top: 0.8rem;
  align-items: start;
}
.np-col--lead { border-right: 1px solid rgba(19,16,10,0.2); padding-right: 2.5rem; }

/* ─── Article typography ─── */
.np-kicker {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(19,16,10,0.5);
  margin: 0 0 0.5rem;
}
.np-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #13100a;
  margin: 0 0 0.6rem;
}
.np-byline {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: rgba(19,16,10,0.6);
  margin-bottom: 0.4rem;
}
.np-byline-name {
  color: #13100a;
  font-weight: 600;
}
.np-rule {
  border: none;
  border-top: 1px solid rgba(19,16,10,0.25);
  margin: 0.4rem 0 0.65rem;
}
.np-lede {
  font-family: var(--font-column);
  font-size: clamp(0.9rem, 1.6vw, 1.12rem);
  line-height: 1.7;
  color: #13100a;
  margin: 0 0 0.65rem;
  font-style: italic;
}
.np-body-text {
  font-family: var(--font-column);
  font-size: clamp(0.78rem, 1.3vw, 0.95rem);
  line-height: 1.7;
  color: rgba(19,16,10,0.85);
  columns: 2;
  column-gap: 1.4rem;
  margin: 0;
}

/* ── Highlighter on name — Realistic Multiply Blend ── */
.np-name-hl {
  position: relative;
  display: inline;
  white-space: nowrap;
  isolation: isolate;  /* own stacking context so ::after sits behind text */
}
.np-name-hl::after {
  content: '';
  position: absolute;
  bottom: 0.1em;
  left: -4px;
  right: -4px;
  height: 0.8em;
  background: #ffeb3b; /* bright fluid yellow */
  mix-blend-mode: multiply; /* Realistic ink blending! */
  z-index: 1; /* must be >0 but inside isolated parent to multiply text */
  border-radius: 4px;
  transform: skewX(-2deg) rotate(-0.5deg);
  transform-origin: left center;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.np-name-hl.hl-active::after {
  clip-path: inset(0 -4px 0 0);
}

/* ─── Sidebar ─── */
.np-sidebar-rule {
  border: none;
  border-top: 2px solid #13100a;
  margin: 0 0 0.5rem;
}
.np-sidebar-head {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(19,16,10,0.55);
  margin: 0 0 0.4rem;
}
.np-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--font-column);
  font-size: clamp(0.75rem, 1.2vw, 0.88rem);
  color: #13100a;
  line-height: 1.4;
}
.np-sidebar-list li::before { content: '— '; opacity: 0.4; }
.np-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.82rem, 1.4vw, 1.05rem);
  line-height: 1.55;
  color: rgba(19,16,10,0.7);
  border-left: 3px solid #13100a;
  padding-left: 0.75rem;
  margin: 0;
}

/* ─── Footer stats ─── */
.np-footer { margin-top: auto; padding-top: 1rem; }
.np-footer-rule {
  border: none;
  border-top: 3px solid #13100a;
  margin-bottom: 0.6rem;
}
.np-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.np-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.np-stat-n {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: #13100a;
  line-height: 1;
}
.np-stat-l {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(19,16,10,0.5);
}
.np-stat-div {
  width: 1px;
  height: 1.6rem;
  background: rgba(19,16,10,0.2);
}

/* ── 3D TEAR SEPARATION (Fly-Apart) ──────────────────── */
/*
  Parent gets 3D perspective so rotateX/Y works perfectly. 
  Halves catch simulated air resistance and curl as they fly.
*/
.io-newspaper {
  perspective: 1200px;
}  
.io-half-top {
  transition:
    transform  0.9s cubic-bezier(0.6, 0.0, 0.8, 0.6),
    opacity    0.55s ease 0.15s,
    filter     0.3s ease 0s;
  transform-origin: 85% 95%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.io-half-bot {
  transition:
    transform  0.9s cubic-bezier(0.6, 0.0, 0.8, 0.6) 0.04s,
    opacity    0.55s ease 0.2s,
    filter     0.3s ease 0.04s;
  transform-origin: 15% 5%;
  filter: drop-shadow(0 -2px 6px rgba(0,0,0,0.3));
}

#intro-overlay.io-tearing .io-half-top {
  /* Flies up, left, rotates CCW, and curls top-edge away (rotateX) */
  transform: translateY(-115vh) translateX(-15vw) translateZ(100px) rotateZ(-22deg) rotateX(25deg) rotateY(-15deg);
  opacity: 0;
  filter: drop-shadow(-20px 40px 50px rgba(0,0,0,0.7));
}
#intro-overlay.io-tearing .io-half-bot {
  /* Flies down, right, rotates CW, and curls bottom-edge away */
  transform: translateY(115vh) translateX(12vw) translateZ(-50px) rotateZ(18deg) rotateX(-20deg) rotateY(15deg);
  opacity: 0;
  filter: drop-shadow(15px -30px 40px rgba(0,0,0,0.6));
}

/* ── SCROLL REVEAL ─────────────────────────────────────────────── */
.scroll-reveal {

  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
.scroll-reveal.in { opacity: 1; transform: none; }

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--bg);
  padding: 0.85rem 1.9rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
  background: var(--accent-lt);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(201, 169, 110, 0.28);
}
.btn-primary.btn-lg { padding: 1rem 2.25rem; font-size: 1rem; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  color: var(--muted-2);
  padding: 0.85rem 1.9rem;
  border-radius: 100px;
  font-size: 0.92rem;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }


/* ════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  background: transparent;
  transition: background 0.3s, border-bottom 0.3s, backdrop-filter 0.3s, color 0.3s;
}

/* Scrolled state — dark glass */
.nav.scrolled {
  background: rgba(8, 8, 15, 0.88);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

/* On-paper state — light newspaper nav */
.nav.on-paper {
  background: rgba(245, 240, 229, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(24, 19, 10, 0.1);
}
.nav.on-paper .nav-logo { color: var(--ink); }
.nav.on-paper .nav-logo-dot { color: var(--gold-print); }
.nav.on-paper .nav-link { color: var(--ink-3); }
.nav.on-paper .nav-link:hover,
.nav.on-paper .nav-link.active { color: var(--ink); }
.nav.on-paper .nav-link::after { background: var(--ink); }
.nav.on-paper .nav-cta { color: var(--ink); border-color: rgba(24, 19, 10, 0.3); }
.nav.on-paper .nav-cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav.on-paper .nav-hamburger span { background: var(--ink); }


/* ── Nav section indicator (sits between logo and links in center) */
.nav-section-id {
  position: absolute;
  /* Sits cleanly in the left-center gap, between logo and nav-links */
  left: 160px;           /* after logo */
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  pointer-events: none;
  transition: opacity 0.4s ease, color 0.4s ease;
  opacity: 0;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
}
/* Show once scrolled past hero */
.nav.scrolled .nav-section-id { opacity: 1; }
/* Hide on light nav */
.nav.on-paper .nav-section-id { opacity: 0; }


/* ── Per-section nav themes (via data-section) ───── */

/* Hero: transparent stays cream, handled by on-paper */

/* About/blueprint: cool steel-tinged glass */
.nav.scrolled[data-section="about"] {
  background: rgba(4, 14, 28, 0.93);
  border-bottom: 1px solid rgba(80,140,220,0.12);
}
.nav.scrolled[data-section="about"] .nav-section-id {
  color: rgba(100,160,255,0.55);
}
.nav.scrolled[data-section="about"] .nav-logo-dot { color: rgba(100,160,255,0.8); }

/* Work/patent: warm dark sepia glass */
.nav.scrolled[data-section="work"] {
  background: rgba(20, 13, 5, 0.94);
  border-bottom: 1px solid rgba(201,169,110,0.14);
}
.nav.scrolled[data-section="work"] .nav-section-id {
  color: rgba(201,169,110,0.55);
}
.nav.scrolled[data-section="work"] .nav-logo-dot { color: rgba(201,169,110,0.9); }

/* Projects: pure obsidian dark */
.nav.scrolled[data-section="projects"] {
  background: rgba(6, 6, 8, 0.96);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav.scrolled[data-section="projects"] .nav-section-id {
  color: rgba(201,169,110,0.4);
}

/* Contact: absolute dark, nav nearly invisible */
.nav.scrolled[data-section="contact"] {
  background: rgba(5, 5, 5, 0.97);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav.scrolled[data-section="contact"] .nav-section-id {
  color: rgba(255,255,255,0.2);
}

/* Ensure the nav itself has position relative for the absolute indicator */
.nav { position: fixed; }

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: 0.04em;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.3s;
}
.nav-logo-dot { color: var(--accent); transition: color 0.3s; }

.nav-links {
  display: flex;
  gap: 2.5rem;
}
.nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.2s;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 100%;
  height: 1px;
  background: var(--accent);
  transition: right 0.25s var(--ease-out);
}
.nav-link:hover,
.nav-link.active { color: var(--ivory); }
.nav-link:hover::after,
.nav-link.active::after { right: 0; }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.nav-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(201, 169, 110, 0.35);
  padding: 0.5rem 1.3rem;
  border-radius: 100px;
  letter-spacing: 0.05em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-cta:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ivory);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, background 0.3s;
}
.nav-hamburger.active span:first-child { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.active span:last-child  { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: rgba(8, 8, 15, 0.97);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-expo);
}
.mobile-menu.open { transform: none; }

.mobile-link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.mobile-link:hover { color: var(--accent); }

.mobile-cta {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--bg);
  background: var(--accent);
  padding: 0.8rem 2rem;
  border-radius: 100px;
  font-weight: 600;
}


/* ════════════════════════════════════════════════════
   NEWSPAPER FRONT PAGE HERO
   ════════════════════════════════════════════════════ */
.newspaper-front {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* ── Masthead ───────────────────────────────────────── */
.masthead {
  padding-inline: var(--gutter);
  background: var(--paper);
}

.masthead-top-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink-rule);
  padding-block: 0.55rem;
}
.mts-dot { color: var(--gold-print); opacity: 0.7; }

.masthead-nameplate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem 0.85rem;
  border-bottom: 3px double var(--ink);
}

.masthead-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 56px;
}
.masthead-meta--right { min-width: 56px; }
.mm-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.mm-val {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.masthead-nameplate {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.2rem, 6.5vw, 7rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  flex: 1;
  user-select: none;
}

.masthead-info-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  border-bottom: 1px solid var(--ink);
  padding-block: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  color: var(--ink-2);
}
.mis-divider { color: var(--ink-rule); }
.mis-available {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-weight: 500;
}
.mis-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-print);
  box-shadow: 0 0 5px rgba(184, 146, 74, 0.5);
  animation: pulse-dot 2.5s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Front Grid ─────────────────────────────────────── */
.front-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  padding-inline: var(--gutter);
  border-bottom: 2.5px solid var(--ink);
  min-height: calc(100svh - 180px);
}

/* ── Main Article ───────────────────────────────────── */
.front-main {
  padding: 2rem 2.5rem 2.5rem 0;
  border-right: 1px solid var(--ink-rule);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.front-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--gold-print);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.front-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 5.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1rem;
  hyphens: auto;
}

.front-byline-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.front-byline strong { color: var(--ink); font-weight: 600; }
.fbr-sep { color: var(--ink-rule); }

.front-rule {
  height: 2px;
  background: var(--ink);
  margin-bottom: 1.5rem;
}

/* Two-column newspaper body text */
.front-body {
  column-count: 2;
  column-gap: 2.25rem;
  column-rule: 1px solid var(--ink-rule);
  font-family: var(--font-column);
  font-size: 0.9rem;
  line-height: 1.78;
  color: var(--ink-2);
  margin-bottom: 1.75rem;
  hyphens: auto;
}
.front-body p { margin-bottom: 0.85em; break-inside: avoid; }
.front-body p:last-child { margin-bottom: 0; }

/* Pull quote */
.front-pull-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-top: 2px solid var(--gold-print);
  border-bottom: 1px solid var(--ink-rule);
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  position: relative;
}
.fpq-deco {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--gold-print);
  line-height: 0.7;
  opacity: 0.35;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.front-pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}

/* Continued link */
.front-continued {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  transition: color 0.2s;
  margin-top: auto;
  cursor: pointer;
}
.front-continued:hover { color: var(--ink); }
.fc-page { color: var(--gold-print); }

/* ── Sidebar ─────────────────────────────────────────── */
.front-sidebar {
  padding: 2rem 0 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.front-photo { display: flex; flex-direction: column; gap: 0.6rem; }
.front-photo-inner {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--paper-3);
  border: 1px solid var(--ink-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fpi-initials {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  color: rgba(24, 19, 10, 0.12);
  letter-spacing: 0.08em;
  user-select: none;
}
.front-photo-caption {
  font-family: var(--font-column);
  font-size: 0.72rem;
  color: var(--ink-3);
  line-height: 1.5;
  border-top: 1px solid var(--ink-rule);
  padding-top: 0.4rem;
}

.fsb-rule {
  height: 1px;
  background: var(--ink-rule);
}

/* Sidebar stats */
.front-stats { display: flex; flex-direction: column; gap: 0.85rem; }
.fsb-heading {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1.5px solid var(--ink-rule);
  padding-bottom: 0.4rem;
  margin-bottom: 0.15rem;
}
.fsb-stat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 1px dotted var(--ink-rule);
  padding-bottom: 0.7rem;
}
.fsb-stat:last-child { border-bottom: none; padding-bottom: 0; }
.fsb-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}
.fsb-label {
  font-family: var(--font-column);
  font-size: 0.72rem;
  color: var(--ink-2);
  line-height: 1.35;
}

/* Sidebar links */
.front-online { display: flex; flex-direction: column; gap: 0.5rem; }
.fol-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: block;
  padding: 0.22rem 0;
  border-bottom: 1px dotted var(--ink-rule);
  transition: color 0.2s;
}
.fol-link:last-child { border-bottom: none; }
.fol-link:hover { color: var(--ink); }

/* Bottom rule */
.front-bottom-rule {
  height: 4px;
  background: var(--ink);
  margin-inline: var(--gutter);
}

/* Gradient bridge Hero → About (blueprint navy) */
.front-fade {
  height: 120px;
  background: linear-gradient(to bottom, var(--paper), #071325);
  pointer-events: none;
}



/* ════════════════════════════════════════════════════
   NEWS TICKER  (replaces marquee)
   ════════════════════════════════════════════════════ */
.news-ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  height: 40px;
  overflow: hidden;
}

.ticker-label {
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold-print);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-track-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  animation: ticker-scroll 55s linear infinite;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: rgba(245, 240, 229, 0.65);
  padding-left: 2rem;
}
.tk-sep { color: var(--gold-print); opacity: 0.55; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.news-ticker:hover .ticker-track { animation-play-state: paused; }


/* ════════════════════════════════════════════════════
   ABOUT — ARCHITECT'S BLUEPRINT
   ════════════════════════════════════════════════════ */

/* ── Base layer ─────────────────────────────────────── */
.blueprint {
  position: relative;
  background-color: #071325;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px;
  overflow: visible;
}
/* Gradient bridge About → Work: navy fades to patent dark sepia */
.blueprint::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #1a1208);
  pointer-events: none;
  z-index: 2;
}


/* ── Corner registration marks ──────────────────────── */
.bp-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: rgba(255,255,255,0.22);
  border-style: solid;
  z-index: 2;
}
.bp-corner--tl { top: 20px; left: 20px; border-width: 1.5px 0 0 1.5px; }
.bp-corner--tr { top: 20px; right: 20px; border-width: 1.5px 1.5px 0 0; }
.bp-corner--bl { bottom: 20px; left: 20px; border-width: 0 0 1.5px 1.5px; }
.bp-corner--br { bottom: 20px; right: 20px; border-width: 0 1.5px 1.5px 0; }

/* ── Grid coordinate labels ─────────────────────────── */
.bp-coords-top {
  position: absolute;
  top: 0; left: 56px; right: 56px;
  display: flex;
  justify-content: space-around;
  padding-top: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 2;
}
.bp-coords-left {
  position: absolute;
  top: 32px; left: 0; bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 8px;
  border-right: 1px solid rgba(255,255,255,0.1);
  width: 32px;
  z-index: 2;
}
.bp-coords-top span,
.bp-coords-left span {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.1em;
}

/* ── Drawing area ───────────────────────────────────── */
.bp-drawing {
  padding: clamp(3.5rem, 7vw, 7rem) clamp(2.5rem, 5vw, 6rem);
  padding-top: clamp(2.5rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}

/* ── Document stamp bar ─────────────────────────────── */
.bp-doc-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.bp-doc-ref {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}
.bp-doc-conf {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.15rem 0.6rem;
}

/* ── Central three-column layout ───────────────────── */
.bp-central {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 0;
  align-items: center;
  min-height: clamp(320px, 35vw, 520px);
  margin-bottom: clamp(3rem, 6vw, 6rem);
  position: relative;
}

/* ── Callout panels (left spec, right stack) ────────── */
.bp-callout-spec,
.bp-callout-stack {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Leader lines — spec panel right edge → name */
.bp-leader-right {
  position: absolute;
  right: -3rem;
  top: 50%;
  display: flex;
  align-items: center;
  width: 3rem;
  transform: translateY(-50%);
}
.bp-leader-left {
  position: absolute;
  left: -3rem;
  top: 50%;
  display: flex;
  align-items: center;
  width: 3rem;
  transform: translateY(-50%);
}
.bp-leader-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.2);
  border-top: 1px dashed rgba(255,255,255,0.2);
}
.bp-leader-arrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.bp-leader-arrow--l {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}

/* Callout head */
.bp-cs-head {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.bp-cs-ref {
  font-size: 0.48rem;
  background: rgba(255,255,255,0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  color: rgba(255,255,255,0.5);
}

/* Spec items */
.bp-cs-items { display: flex; flex-direction: column; flex: 1; }
.bp-cs-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bp-cs-item:last-child { border-bottom: none; }
.bp-cs-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.bp-cs-value {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.02em;
}
.bp-cs-available {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #7ed4a4;
}
.bp-avail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7ed4a4;
  box-shadow: 0 0 8px #7ed4a4;
  flex-shrink: 0;
  animation: bp-pulse 2s ease-in-out infinite;
}
@keyframes bp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Stack groups */
.bp-stack-groups { display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.bp-sg-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bp-sg-row:last-child { border-bottom: none; }
.bp-sg-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  padding-top: 0.1rem;
  min-width: 32px;
  flex-shrink: 0;
}
.bp-sg-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bp-sg-tags span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.18rem 0.55rem;
  border-radius: 2px;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.05);
}

/* SYS STATUS badge */
.bp-sys-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: #7ed4a4;
  text-transform: uppercase;
}
.bp-sys-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7ed4a4;
  box-shadow: 0 0 8px #7ed4a4;
  flex-shrink: 0;
  animation: bp-pulse 2s ease-in-out infinite;
}

/* ── Name block (centre) ────────────────────────────── */
.bp-name-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  text-align: center;
  position: relative;
}

/* Dimension lines */
.bp-dim-line {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}
.bp-dim-tick {
  width: 1.5px;
  height: 14px;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.bp-dim-bar {
  flex: 1;
  height: 1.5px;
  background: rgba(255,255,255,0.2);
}
.bp-dim-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
  padding: 0 0.75rem;
  flex-shrink: 0;
}

/* THE NAME — grand central element */
.bp-name {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 11vw, 14rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 0.88;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(1.5rem, 3vw, 3rem) 0;
  text-shadow: 0 0 120px rgba(255,255,255,0.08);
}
.bp-name-line { display: block; }

/* Revision badge */
.bp-rev-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1.5px solid rgba(255,255,255,0.2);
  padding: 0.3rem 0.5rem;
  gap: 0.1rem;
}
.bp-rev-label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}
.bp-rev-num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}

/* ── Operational Profile ────────────────────────────── */
.bp-profile {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-block: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}
.bp-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.bp-profile-rule-l {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.bp-profile-rule-r {
  width: clamp(2rem, 4vw, 4rem);
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.bp-profile-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-profile-ref {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.18);
  white-space: nowrap;
}
.bp-profile-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.bp-profile-cols p {
  font-family: var(--font-column);
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.72);
}

/* ── Bottom bar: revision table + title block ───────── */
.bp-bottom-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Revision history table */
.bp-revision-table { border-right: 1px solid rgba(255,255,255,0.12); }
.bp-rt-head,
.bp-rt-row {
  display: grid;
  grid-template-columns: 48px 72px 1fr 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bp-rt-row:last-child { border-bottom: none; }
.bp-rt-head span,
.bp-rt-row span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.75rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
}
.bp-rt-row span { color: rgba(255,255,255,0.75); }
.bp-rt-head span { color: rgba(255,255,255,0.3); text-transform: uppercase; font-size: 0.6rem; }
.bp-rt-row span:last-child,
.bp-rt-head span:last-child { border-right: none; }
.bp-rt-current span { color: rgba(255,255,255,0.88); }
.bp-rt-current { background: rgba(255,255,255,0.04); }

/* Engineering title block */
.bp-title-block {
  width: 260px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.bp-tb-rows { display: flex; flex-direction: column; flex: 1; }
.bp-tb-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex: 1;
}
.bp-tb-row:last-child { border-bottom: none; }
.bp-tb-label,
.bp-tb-value {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 0.55rem 0.85rem;
  letter-spacing: 0.07em;
}
.bp-tb-label {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
}
.bp-tb-value {
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
}

/* APPROVED stamp */
.bp-approved {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(126,212,164,0.18);
  border: 2px solid rgba(126,212,164,0.15);
  padding: 0.2rem 0.6rem;
  transform: rotate(-12deg);
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ── Blueprint Responsive ───────────────────────────── */
@media (max-width: 1200px) {
  .bp-central { grid-template-columns: 260px 1fr 260px; }
  .bp-title-block { width: 220px; }
}
@media (max-width: 1020px) {
  .bp-central {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    gap: 1.5rem;
  }
  .bp-name-block {
    grid-column: 1 / -1;
    order: -1;
  }
  .bp-leader-right, .bp-leader-left { display: none; }
  .bp-profile-cols { grid-template-columns: 1fr 1fr; }
  .bp-bottom-bar { grid-template-columns: 1fr; }
  .bp-title-block { width: 100%; flex-direction: row; border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .bp-tb-rows { flex-direction: row; }
  .bp-tb-row { grid-template-columns: 1fr; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); }
  .bp-tb-row:last-child { border-right: none; }
  .bp-approved { display: none; }
}
@media (max-width: 720px) {
  .bp-central { grid-template-columns: 1fr; }
  .bp-callout-spec, .bp-callout-stack { height: auto; }
  .bp-profile-cols { grid-template-columns: 1fr; }
  .bp-rt-head, .bp-rt-row { grid-template-columns: 36px 56px 1fr 36px; }
  .bp-coords-top, .bp-coords-left { display: none; }
  .bp-dim-label { display: none; }
  .bp-rev-badge { display: none; }
}
@media (max-width: 480px) {
  .bp-name { font-size: clamp(4rem, 18vw, 6rem); }
  .bp-tb-rows { flex-direction: column; }
  .bp-tb-row { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
}







/* ════════════════════════════════════════════════════
   EXPERIENCE — PATENT OFFICE FILING
   ════════════════════════════════════════════════════ */
.patent {
  background: #f5f2eb;
  position: relative;
  /* Seamless entry: the masthead IS dark, so no harsh top border needed */
}
/* Scroll offset for sticky nav */
#hero, #about, #work, #projects, #contact {
  scroll-margin-top: 55px;
}


/* ── MASTHEAD ──────────────────────────────────────── */
.pt-section-id {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem clamp(2rem, 6vw, 8rem);
  background: #1a1208;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pt-section-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.3);
}
.pt-section-name {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pt-masthead {
  background: #1a1208;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 6vw, 8rem);
  border-bottom: 3px solid rgba(255,255,255,0.04);
}
.pt-masthead-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.pt-masthead-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pt-office {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  line-height: 1.1;
  margin: 0 0 1rem;
}
.pt-context {
  font-family: var(--font-column);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  line-height: 1.75;
  color: rgba(255,255,255,0.5);
  max-width: 560px;
  margin-bottom: 1.25rem;
}
.pt-docket-line {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
}
.pt-masthead-right {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.pt-tally {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.pt-tally-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1;
}
.pt-tally-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.pt-masthead-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.pt-masthead-sep { color: rgba(255,255,255,0.15); }

/* ── FILINGS LIST ──────────────────────────────────── */
.pt-filings {
  border-top: 3px solid #1a1208;
}

/* Each filing: left docket sidebar + right body */
.pt-filing {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-bottom: 1px solid rgba(24,19,10,0.14);
  position: relative;
}
.pt-filing:last-child { border-bottom: none; }

/* ── LEFT: DOCKET SIDEBAR ──────────────────────────── */
.pt-docket {
  background: #ede9df;
  border-right: 1px solid rgba(24,19,10,0.14);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.pt-docket-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(24,19,10,0.45);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(24,19,10,0.1);
}
.pt-docket-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pt-docket-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(24,19,10,0.07);
}
.pt-docket-item:last-child { border-bottom: none; }
.pt-di-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(24,19,10,0.38);
}
.pt-di-value {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: rgba(24,19,10,0.82);
  line-height: 1.45;
}
.pt-granted { color: #2d6a4f !important; }
.pt-pending { color: #7a5c00 !important; }

.pt-docket-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(24,19,10,0.08);
}
.pt-docket-tags span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(24,19,10,0.45);
  border: 1px solid rgba(24,19,10,0.18);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

/* ── RIGHT: FILING BODY ────────────────────────────── */
.pt-body {
  background: #f5f2eb;
  padding: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.pt-body-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(24,19,10,0.1);
}
.pt-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #1a1208;
  line-height: 1.25;
  flex: 1;
}

/* Bold visible GRANTED / PENDING stamp */
.pt-stamp {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 0.35rem;
}
.pt-stamp--granted {
  color: #1a4731;
  border: 1.5px solid #1a4731;
  background: rgba(26,71,49,0.07);
}
.pt-stamp--pending {
  color: #6b4800;
  border: 1.5px solid #6b4800;
  background: rgba(107,72,0,0.07);
}

.pt-section-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(24,19,10,0.35);
  margin-bottom: 0.65rem;
}

.pt-abstract {
  margin-bottom: 1.75rem;
}
.pt-abstract p:not(.pt-section-label) {
  font-family: var(--font-column);
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(24,19,10,0.72);
  font-style: italic;
}

.pt-claims { margin-bottom: 1.75rem; }
.pt-claims-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 0;
}
.pt-claims-list li {
  font-family: var(--font-column);
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(24,19,10,0.8);
  padding-left: 1.5rem;
  border-left: 2.5px solid rgba(24,19,10,0.2);
}
.pt-claims-list li strong { font-weight: 700; color: #1a1208; }

.pt-exhibit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1208;
  background: rgba(24,19,10,0.06);
  border: 1.5px solid rgba(24,19,10,0.25);
  padding: 0.6rem 1.25rem;
  transition: background 0.2s, border-color 0.2s;
}
.pt-exhibit-link:hover { background: rgba(24,19,10,0.12); border-color: rgba(24,19,10,0.5); }

/* ── CERTIFICATION FOOTER ──────────────────────────── */
.pt-certification {
  background: #1a1208;
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 6vw, 8rem);
  border-top: none;
}
.pt-cert-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.pt-cert-text {
  font-family: var(--font-column);
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  max-width: 600px;
}
.pt-cert-sig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pt-cert-line {
  width: 160px;
  height: 1px;
  background: rgba(255,255,255,0.25);
}
.pt-cert-name {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.pt-cert-date {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
}

/* ── PATENT RESPONSIVE ─────────────────────────────── */
@media (max-width: 1100px) {
  .pt-filing { grid-template-columns: 240px 1fr; }
}
@media (max-width: 768px) {
  .pt-filing { grid-template-columns: 1fr; }
  .pt-docket { border-right: none; border-bottom: 1px solid rgba(24,19,10,0.14); }
  .pt-masthead { padding: 1.5rem; }
  .pt-section-id { padding: 0.75rem 1.5rem; }
  .pt-masthead-right { gap: 1.5rem; }
  .pt-tally { align-items: flex-start; }
  .pt-cert-inner { flex-direction: column; align-items: flex-start; }
  .pt-cert-sig { align-items: flex-start; }
}
@media (max-width: 500px) {
  .pt-body-header { flex-direction: column; }
  .pt-tally-num { font-size: 2rem; }
}



.exp-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.exp-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 0;
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: background 0.3s;
}
.exp-item:hover { background: linear-gradient(90deg, var(--accent-dim2), transparent 60%); }

.exp-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 0.5rem;
  transition: color 0.3s;
}
.exp-item:hover .exp-num { color: var(--accent); }

.exp-body { display: flex; flex-direction: column; gap: 0.75rem; padding-right: 2rem; }

.exp-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.exp-company {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: -0.01em;
  line-height: 1;
}
.exp-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(201, 169, 110, 0.3);
  background: var(--accent-dim);
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
}
.exp-role {
  font-size: 0.88rem;
  color: var(--muted-2);
  font-weight: 500;
}
.exp-period {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.exp-desc {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.75;
  max-width: 680px;
  margin-top: 0.25rem;
}
.exp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.exp-tags span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 0.22rem 0.65rem;
  border-radius: 4px;
}

/* Mobile link (hidden on desktop) */
.exp-link-mobile {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}

.exp-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted-2);
  padding: 0.5rem 0;
  padding-top: 0.8rem;
  white-space: nowrap;
  transition: color 0.2s;
  flex-shrink: 0;
}
.exp-link svg { width: 16px; height: 16px; transition: transform 0.2s; }
.exp-link:hover { color: var(--accent); }
.exp-link:hover svg { transform: translateX(4px); }


/* Projects section — manages its own bottom transition via bridge strip */
.projects {
  padding-bottom: 0;
  position: relative;
  background: #0c0c0c;
}


/* ════════════════════════════════════════════════════
   PROJECTS — THE EDITIONS
   ════════════════════════════════════════════════════ */

.editions-deck {
  font-family: var(--font-column);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted-2);
  margin-top: 0.85rem;
  line-height: 1.55;
}

.editions-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: minmax(420px, auto) minmax(380px, auto);
  gap: 2px;
  background: rgba(255,255,255,0.04);
  /* No overflow:hidden — that clips scroll-reveal animations on row 2 */
  border-radius: var(--radius-xl);
  isolation: isolate;
}

/* ── Edition Card Base ───────────────────────────── */
.edition-card {
  position: relative;
  background: var(--surface);
  overflow: hidden;
  transition: background 0.35s;
}
.edition-card:hover { background: var(--surface-2); }

/* Grid placement */
.edition-lead:nth-child(1)      { grid-column: 1; grid-row: 1; }
.edition-secondary:nth-child(2) { grid-column: 2; grid-row: 1; }
.edition-lead:nth-child(3)      { grid-column: 1; grid-row: 2; }
.edition-secondary:nth-child(4) { grid-column: 2; grid-row: 2; }

/* ── ec-inner: text + visual split (lead Ventlr) ──── */
.ec-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  min-height: 420px;
  height: 100%;
}
.ec-inner--col {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  min-height: 380px;
  gap: 1rem;
}

/* Text column inside the lead card */
.ec-text {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Publication Masthead ──────────────────────────── */
.ec-masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
}
.ec-masthead-left {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.ec-publication {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: -0.01em;
  line-height: 1;
}
.ec-category {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.ec-edition-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  flex-shrink: 0;
  padding-top: 0.1rem;
}

/* Masthead rule — the horizontal line with per-edition color */
.ec-masthead-rule {
  height: 2px;
  background: var(--accent);
  margin-top: -0.25rem;
  flex-shrink: 0;
}
.ec-masthead-rule--blue { background: var(--blue); }
.ec-masthead-rule--rose { background: var(--rose); }
.ec-masthead-rule--gold { background: var(--accent); }

/* ── Headline ──────────────────────────────────────── */
.ec-headline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ── Byline Row ────────────────────────────────────── */
.ec-byline-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.ec-byline strong { color: var(--text-2); font-weight: 600; }
.ec-byline-sep { color: var(--muted); }

/* Status badges — same style, inside edition cards */
.ec-status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.7rem;
  border-radius: 100px;
}
.ec-status--live    { color: #7ed4a4; border: 1px solid rgba(126,212,164,0.3); background: rgba(126,212,164,0.08); }
.ec-status--project { color: var(--rose); border: 1px solid rgba(212,122,143,0.3); background: rgba(212,122,143,0.08); }

/* ── Body — 2 columns for lead, single for secondary ─ */
.ec-body {
  font-family: var(--font-column);
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.78;
  column-count: 2;
  column-gap: 1.75rem;
  column-rule: 1px solid var(--border);
  hyphens: auto;
  flex: 1;
}
.ec-body p { break-inside: avoid; margin-bottom: 0.7em; }
.ec-body p:last-child { margin-bottom: 0; }
.ec-body--cols-lead { column-count: 2; }

.ec-lede {
  font-family: var(--font-column);
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.78;
  flex: 1;
}

/* ── Pull Quote (secondary cards) ─────────────────── */
.ec-pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding: 0.4rem 0.9rem;
  line-height: 1.5;
  background: var(--accent-dim2);
  border-radius: 0 4px 4px 0;
}

/* ── Numbers (stats strip) ────────────────────────── */
.ec-numbers {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 0.85rem;
}
.ec-numbers--three { justify-content: space-between; }
.ec-number {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-right: 1.5rem;
}
.ec-numbers--three .ec-number { padding: 0; flex: 1; }
.ec-n {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.ec-nl {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ── Footer ───────────────────────────────────────── */
.ec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: auto;
}
.ec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ec-tags span {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  border: 1px solid var(--border);
  background: var(--surface-3);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}
.ec-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
  transition: gap 0.2s;
  flex-shrink: 0;
}
.ec-link:hover { gap: 0.55rem; }
.ec-arrow { transition: transform 0.2s; }
.ec-link:hover .ec-arrow { transform: translateX(3px); }

/* ── Situation First SF Trio ──────────────────────── */
.sf-trio {
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 0.75rem;
}
.sft-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  padding-inline: 0.5rem;
}
.sft-item:first-child { padding-left: 0; }
.sft-item strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ivory);
}
.sft-item small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
.sft-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Visual panel (Ventlr mockup inside edition) ──── */
.ec-visual {
  background: #090c10;
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.ec-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(91,184,184,0.07) 0%, transparent 65%);
}
.ecv-screen {
  width: 220px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 1rem;
  position: relative; z-index: 1;
}
.ecv-topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 1rem;
}
.ecv-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.ecv-url {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.2);
  margin-left: 0.5rem;
  letter-spacing: 0.04em;
}
.ecv-feed { display: flex; flex-direction: column; gap: 0.55rem; }
.ecv-post {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background 0.4s, border-color 0.4s;
}
.ecv-post--glow {
  animation: ecv-glow 3.5s ease-in-out infinite alternate;
}
.ecv-post--glow2 {
  animation: ecv-glow 3.5s ease-in-out 1.75s infinite alternate;
}
@keyframes ecv-glow {
  from { background: var(--surface-2); border-color: rgba(91,184,184,0.04); }
  to   { background: rgba(91,184,184,0.06); border-color: rgba(91,184,184,0.16); }
}
.ecv-handle {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--teal);
  opacity: 0.65;
  letter-spacing: 0.04em;
}
.ecv-lines { display: flex; flex-direction: column; gap: 0.28rem; }
.ecv-line { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); width: 100%; }
.ecv-line--med { width: 70%; }
.ecv-line--short { width: 45%; }
.ecv-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
.ecv-btn {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
}
.ecv-zk-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--teal);
  opacity: 0.55;
  letter-spacing: 0.08em;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(91,184,184,0.1);
}
.ecv-zk-badge svg { width: 10px; height: 10px; }

/* ── Editions Responsive ───────────────────────────── */
@media (max-width: 1020px) {
  .editions-grid { grid-template-columns: 1fr; }
  .edition-lead:nth-child(1),
  .edition-secondary:nth-child(2),
  .edition-lead:nth-child(3),
  .edition-secondary:nth-child(4) { grid-column: 1; grid-row: auto; }
  .ec-inner { grid-template-columns: 1fr; }
  .ec-visual { min-height: 200px; border-left: none; border-top: 1px solid var(--border); }
  .ec-body { column-count: 1; }
  .ec-body--cols-lead { column-count: 1; }
}
@media (max-width: 768px) {
  .ec-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
  .sf-trio { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .sft-sep { display: none; }
  .ec-numbers { flex-wrap: wrap; gap: 0.75rem; }
}

/* ─── NEW: Section Header ─────────────────────────── */
.ec-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 6vw, 8rem) clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.ec-section-head-left { display: flex; flex-direction: column; gap: 0.85rem; }
.ec-section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,169,110,0.75);   /* gold, clearly visible */
}
.ec-section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}
.ec-section-title em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.55);   /* visible, not invisible */
}
.ec-section-deck {
  font-family: var(--font-column);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--muted-2);
  max-width: 480px;
  font-style: italic;
  align-self: flex-end;
  padding-bottom: 0.4rem;
}
@media (max-width: 900px) {
  .ec-section-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 3rem 2rem 2rem; }
  .ec-section-deck { max-width: 100%; }
}

/* Remove the old container/section-header in the projects section */
.projects > .container { display: contents; }
.projects .section-header { display: none; }

/* ─── NEW: Architecture Diagram (replaces fake feed) ─ */
.ec-arch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2rem 2rem 2.5rem;
  border-left: 1px solid var(--border);
  gap: 0;
  min-width: 200px;
}
.ec-arch-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.5rem;
}
.ec-arch-layers {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  justify-content: center;
}
.ec-arch-layer {
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ec-arch-layer--top { border-color: rgba(255,255,255,0.30); }
.ec-arch-layer--mid { border-color: rgba(255,255,255,0.22); }
.ec-arch-layer--bot { border-color: rgba(255,255,255,0.16); }
.ec-al-tag {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,169,110,0.8);   /* gold tag, readable */
  opacity: 1;
}
.ec-al-name {
  font-family: var(--font-column);
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
}
.ec-al-note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.52);
  opacity: 1;
}
.ec-arch-arrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  padding: 0.3rem 0;
  opacity: 1;
}
.ec-arch-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(201,169,110,0.7);
  opacity: 1;
}
.ec-arch-badge svg { width: 10px; height: 10px; flex-shrink: 0; }

/* ─── NEW: Bridge CTA ─────────────────────────────── */
.ec-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 6vw, 8rem);
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.ec-bridge-text {
  font-family: var(--font-column);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.75;
  color: var(--muted-2);
  max-width: 680px;
}
.ec-bridge-cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 0.15rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}
.ec-bridge-cta:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 768px) {
  .ec-bridge { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 2rem; }
}

/* ----------------------------------------------------
   CONTACT � THE CLOSE
   ---------------------------------------------------- */
.ct-section {
  height: calc(100dvh - 55px);
  min-height: 600px;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Subtle grain texture overlay */
.ct-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

.ct-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 6vw, 8rem);
}

/* -- TOP: SECTION CAP -------------------------------- */
.ct-cap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.ct-cap-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.2);
}
.ct-cap-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.ct-cap-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-left: auto;
}
.ct-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4caf84;
  animation: ct-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ct-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* -- CENTRE: HOOK + EMAIL ---------------------------- */
.ct-centre {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ct-hook {
  font-family: var(--font-column);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.ct-email {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  letter-spacing: -0.025em;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,0.15);
  padding-bottom: 0.1em;
  transition: color 0.3s, border-color 0.3s;
  display: block;
  cursor: pointer;
}
.ct-email:hover {
  color: #ffffff;
  border-color: rgba(255,255,255,0.6);
}
.ct-trust {
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 1.2vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}

/* -- BOTTOM: LINKS + COPYRIGHT ----------------------- */
.ct-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.ct-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.ct-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  transition: color 0.25s;
}
.ct-link:hover { color: rgba(255,255,255,0.9); }
.ct-link-sep {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.12);
}
.ct-copy {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.18);
}

/* -- CONTACT RESPONSIVE ------------------------------ */
@media (max-width: 768px) {
  .ct-inner { padding: 2rem 1.5rem; }
  .ct-email { font-size: clamp(1.6rem, 7vw, 2.8rem); }
  .ct-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

   ════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 1.75rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer-nameplate {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.footer-copy { font-size: 0.78rem; color: var(--muted-2); }


/* ════════════════════════════════════════════════════
   CURSOR GLOW (ambient)
   ════════════════════════════════════════════════════ */
/* applied via JS */


/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */

/* ── 1200px ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .about-grid { grid-template-columns: 1fr 340px; }
  .bento-featured .bc-inner { grid-template-columns: 1fr 300px; }
  .front-grid { grid-template-columns: 1fr 240px; }
}

/* ── 1020px ───────────────────────────────────────── */
@media (max-width: 1020px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-card { position: static; }
  .bento-featured .bc-inner { grid-template-columns: 1fr; }
  .bc-visual { min-height: 200px; }

  /* Stack newspaper front grid */
  .front-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .front-main { border-right: none; border-bottom: 1px solid var(--ink-rule); padding-right: 0; }
  .front-sidebar { padding-left: 0; padding-top: 1.5rem; }
  .front-photo-inner { aspect-ratio: 16 / 7; }

  .cf-grid { grid-template-columns: 1fr; }
  .cf-sidebar { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; }
}

/* ── 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --gutter: 24px; }

  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* Newspaper mobile */
  .front-body { column-count: 1; }
  .masthead-nameplate { font-size: clamp(2rem, 10vw, 4rem); }

  /* Bento stack */
  .bento-grid { grid-template-columns: 1fr; border-radius: var(--radius-lg); }
  .bento-featured { grid-column: 1; }
  .bento-wide { grid-column: 1; }
  .bc-visual { min-height: 180px; }

  /* Experience — hide desktop link, show mobile link */
  .exp-item { grid-template-columns: 48px 1fr; }
  .exp-link { display: none; }
  .exp-link-mobile { display: block; }
  .exp-num { font-size: 0.65rem; }

  .about-stats { gap: 1.5rem; }

  /* Masthead */
  .masthead-info-strip { justify-content: center; gap: 0.4rem 0.75rem; }
  .mis-divider { display: none; }
}

/* ── 540px ────────────────────────────────────────── */
@media (max-width: 540px) {
  :root { --gutter: 18px; }

  .masthead-nameplate { font-size: clamp(1.7rem, 9vw, 3rem); }
  .masthead-top-strip { display: none; }
  .front-headline { font-size: clamp(2rem, 9vw, 3.5rem); }
  .front-pull-quote { display: none; } /* hide on small screens, saves space */

  .btn-primary, .btn-outline { width: 100%; justify-content: center; }

  .exp-item { grid-template-columns: 1fr; gap: 0.5rem; padding-block: 2rem; }
  .exp-num { display: none; }

  .about-stats { flex-direction: column; gap: 1.25rem; }
  .sf-pillars { flex-direction: column; gap: 1rem; }

  .cff-details { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .cff-sep { display: none; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  .fsb-stat { flex-direction: column; gap: 0.2rem; align-items: flex-start; }
}