/* =====================================================
   CG.MEDIA — Website
   Editorial system: ink + paper + signal square
   ===================================================== */

:root{
  --ink:        #0E1014;
  --ink-2:      #15181F;
  --ink-3:      #1E222B;
  --slate:      #5A6271;
  --fog:        #C9CCD3;
  --paper:      #F0EFEA;
  --paper-2:    #E6E4DC;
  --signal:     oklch(0.93 0.18 115);
  --line:       rgba(14,16,20,.10);
  --line-on-ink:rgba(240,239,234,.14);

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 64px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html,body{ background: var(--paper); color: var(--ink); font-family: var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing: antialiased; }
a{ color: inherit; text-decoration: none; }
img,svg,video{ display:block; max-width:100%; }
button{ background:none; border:none; color:inherit; cursor:pointer; font-family:inherit; }
ul, ol{ list-style:none; }

/* ===== Signal square ===== */
/* Default: ink (visible on light surfaces). On dark surfaces, becomes signal yellow. */
.sq{
  display:inline-block; width: 0.16em; height: 0.16em;
  background: var(--ink);
  vertical-align: baseline; margin-left: 0.04em;
}
.sq.lg{ width: 0.22em; height: 0.22em; }
.sq.sm{ width: 0.14em; height: 0.14em; }

/* Standalone squares (not inside text) need fixed sizing */
.kicker .sq, .nav-end .sq, .scroll-cue-fixed .sq,
.entry-row .sq, .info-block .sq, .footer .sq, .work-meta .sq,
.j-meta .sq, .fcol-head .sq, .filter-row .sq,
.dz-icon .sq, .media-cap .sq, .form-meta .sq,
.sent-message .kicker .sq, .cta-kicker .sq{
  width: 8px; height: 8px; margin: 0;
}
.dz-icon .sq{ width: 24px; height: 24px; }

/* DARK SURFACES — square becomes signal yellow */
.ink-bg .sq,
.footer .sq,
.hero .sq,
.nav .sq,
.nav-end .cta .sq,
.submit-cta .sq,
.fa-overlay .sq,
.cta-pane.right .sq,
.media .stamp,
.scroll-cue-fixed.dark .sq{
  background: var(--signal);
}

/* HOVER states — when light surface hovers to signal yellow, square goes ink for contrast */
.nav-end .cta:hover .sq,
.submit-cta:hover .sq,
.dropzone:hover .dz-icon .sq{
  background: var(--ink);
}
/* When dark CTA pane hovers and turns signal, the square inside (was signal) goes ink */
.cta-pane.right:hover .sq{ background: var(--ink); }
/* When light CTA pane hovers and turns signal, square stays ink (already is) */

/* ===== Top nav ===== */
.nav{
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 40px;
  height: var(--nav-h); padding: 0 var(--gutter);
  background: var(--ink);
  border-bottom: 1px solid var(--paper);
}
.nav .brand{
  font-family: var(--serif); font-style: italic; font-size: 26px; line-height:1; letter-spacing:-.025em;
  display: inline-flex; align-items: baseline;
  margin-right: auto;
  color: var(--paper);
}
/* Crush half-leading on the lowercase wordmark so it aligns with its siblings */
.brand-mark{
  display: inline-block;
  line-height: 0.62;
  font-style: italic;
  text-box: trim-both cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.nav .brand .sq{ width: 0.18em; height: 0.18em; }
.nav .brand .meta-w{
  font-family: var(--mono); font-size: 10px; letter-spacing:.16em; text-transform: uppercase;
  font-style: normal; margin-left: 10px; color: rgba(240,239,234,.55); align-self: center;
}
.nav-links{ display:flex; gap: 32px; align-items: center; }
.nav-links a{
  font-family: var(--sans); font-size: 14px; color: var(--paper); font-weight: 400;
  display:inline-flex; align-items: baseline; gap: 6px;
  transition: opacity .2s;
  white-space: nowrap;
}
.nav-links a .num{
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: rgba(240,239,234,.55); font-weight: 400;
}
.nav-links a:hover{ opacity: .65; }
.nav-links a.active .num{ color: var(--paper); }
.nav-links a.active{ font-weight: 500; }

.nav-end .cta{
  display:inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--paper);
  padding: 10px 16px;
  border: 1px solid var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-end .cta:hover{ background: var(--signal); color: var(--ink); border-color: var(--signal); }
.nav-end .cta .sq{ background: var(--signal); }
.nav-end .cta:hover .sq{ background: var(--ink); }

/* ===== Ticker ===== */
.ticker{
  position: sticky; top: var(--nav-h); z-index: 90;
  height: var(--tick-h); background: var(--ink); color: var(--paper);
  overflow: hidden; border-bottom: 1px solid var(--line-on-ink);
}
.ticker-track{
  display: inline-flex; gap: 48px; height: 100%; align-items: center;
  white-space: nowrap; padding-left: var(--gutter);
  animation: tick 50s linear infinite;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,239,234,.7);
}
.ticker-track > span{ display:inline-flex; align-items: center; gap: 12px; }
@keyframes tick{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ===== Routes ===== */
.route{ display: none; animation: fadeIn .4s ease; }
.route-active{ display: block; }
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ===== Generic section ===== */
.section{
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  border-top: 1px solid var(--line);
  position: relative;
}
.ink-bg{ background: var(--ink); color: var(--paper); border-top-color: var(--line-on-ink); }
.ink-bg .more, .ink-bg a{ color: var(--paper); }

.section-head{
  display:flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 48px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.section-head.dark{ border-bottom-color: var(--line-on-ink); color: rgba(240,239,234,.7); }
.section-head .kicker{ display:inline-flex; align-items: center; gap: 10px; color: var(--slate); }
.section-head.dark .kicker{ color: rgba(240,239,234,.7); }
.section-head .section-num{ color: var(--slate); }
.section-head.dark .section-num{ color: rgba(240,239,234,.5); }

/* ===== Type primitives ===== */
.display{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.6vw, 88px);
  line-height: .98; letter-spacing: -.018em;
  max-width: 22ch; text-wrap: balance;
}
.display em{ font-style: italic; }
.display-sub{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
  max-width: 40ch; margin-top: 20px;
  text-wrap: balance;
}
.ink-bg .display-sub{ color: rgba(240,239,234,.85); }
.hero-h1{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 8vw, 144px);
  line-height: .92; letter-spacing: -.022em;
  text-wrap: balance;
}
.hero-h1 em{ font-style: italic; }
.hero-h1.light{ color: var(--paper); }

/* ===== Media treatment (duotone) ===== */
.media{
  position: relative; overflow: hidden; background: var(--ink);
}
.media img, .media video{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(100%) contrast(1.08) brightness(0.92);
}
.media::after{
  content:""; position:absolute; inset:0;
  background: var(--ink); mix-blend-mode: multiply; opacity: .24;
  pointer-events: none;
}
/* Strong overlay — for media used as section backgrounds behind copy */
.media.bg-strong::after{ opacity: .78; mix-blend-mode: normal; }

.media .stamp{
  position:absolute; bottom: 12px; left: 12px;
  width: 14px; height: 14px; background: var(--signal); z-index: 2;
}
.ar-43{ aspect-ratio: 4/3; }
.ar-32{ aspect-ratio: 3/2; }
.ar-45{ aspect-ratio: 4/5; }
.ar-219{ aspect-ratio: 21/9; }
.ar-11{ aspect-ratio: 1/1; }

/* Section that uses a background media layer */
.section.has-bg{ position: relative; overflow: hidden; }
.section-bg{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.section.has-bg > *:not(.section-bg){ position: relative; z-index: 1; }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position: relative;
  height: calc(100vh - var(--nav-h));
  min-height: 720px;
  overflow: hidden;
  color: var(--paper);
}
.hero-media{ position:absolute; inset:0; }
.hero-media::after{ background: var(--ink); opacity: .55; mix-blend-mode: multiply; }

/* ===== Watch-movement hero background ===== */
.hero-media.watch-bg{ background: var(--ink); }
.hero-media.watch-bg::after{ background: var(--ink); opacity: .35; }

.watch-stage{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 1;
  overflow: hidden;
}
.watch-face{
  --face: min(80vh, 80vw);
  position: relative;
  width: var(--face); height: var(--face);
  border-radius: 50%;
  border: 1px solid rgba(240,239,234,.12);
}
.watch-ring{
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(240,239,234,.08);
}
.watch-ring-inner{ inset: 20%; border-color: rgba(240,239,234,.05); }

.watch-tick{
  position: absolute;
  top: 0; left: calc(50% - 1px);
  width: 2px; height: 16px;
  background: rgba(240,239,234,.28);
  transform-origin: 1px calc(var(--face) / 2);
  transform: rotate(calc(var(--i) * 30deg));
}
.watch-tick-major{
  width: 3px; height: 28px;
  left: calc(50% - 1.5px);
  background: rgba(240,239,234,.55);
  transform-origin: 1.5px calc(var(--face) / 2);
}

.watch-hand{
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 50% 100%;
  background: rgba(240,239,234,.65);
  animation: watchTurn linear infinite;
}
.watch-hour{
  width: 6px;
  height: calc(var(--face) * 0.26);
  margin-left: -3px;
  margin-top: calc(var(--face) * -0.26);
  background: rgba(240,239,234,.55);
  border-radius: 3px 3px 0 0;
  animation-duration: 7200s; /* 2 hours per revolution — slow + barely-moving */
}
.watch-minute{
  width: 4px;
  height: calc(var(--face) * 0.38);
  margin-left: -2px;
  margin-top: calc(var(--face) * -0.38);
  background: rgba(240,239,234,.78);
  border-radius: 2px 2px 0 0;
  animation-duration: 600s; /* 10 min per revolution — visible slow drift */
}
.watch-second{
  width: 2px;
  height: calc(var(--face) * 0.44);
  margin-left: -1px;
  margin-top: calc(var(--face) * -0.44);
  background: var(--signal);
  animation-duration: 60s; /* one revolution per minute — clearly ticking */
}

.watch-pin{
  position: absolute;
  left: calc(50% - 7px);
  top:  calc(50% - 7px);
  width: 14px; height: 14px;
  background: var(--signal);
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 0 0 4px var(--ink);
}

@keyframes watchTurn{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .watch-hand{ animation: none; }
}
.hero-content{
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: 32px var(--gutter); height: 100%; gap: 24px;
}
.hero-center{
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.hero-eyebrow{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240,239,234,.75);
  display:inline-flex; align-items: center; gap: 10px; align-self: start;
}
.hero-h1{ max-width: 18ch; padding: 24px 0; }
.hero-lead{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2; letter-spacing: -.01em;
  color: rgba(240,239,234,.92);
  max-width: 42ch;
  text-wrap: balance;
}
.scroll-cue-fixed{
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  z-index: 95;
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--ink);
  transition: color .35s ease;
  pointer-events: none;
  padding: 12px 4px;
}
.scroll-cue-fixed.dark{ color: var(--paper); }
.scroll-cue-fixed .sq{
  width: 8px; height: 8px; margin: 0;
  writing-mode: horizontal-tb;
  display: inline-block;
}
.scroll-cue-fixed #scrollNum,
.scroll-cue-fixed #scrollTotal{ font-weight: 500; }

@media (max-width: 720px){
  .scroll-cue-fixed{ display: none; }
}

/* =====================================================
   ETHOS
   ===================================================== */
.ethos .display{
  max-width: 28ch;
  margin-bottom: 0;
}
.ethos .display-sub{
  margin-top: 24px;
  max-width: 50ch;
}
.ethos-body{
  display:grid; grid-template-columns: 1fr;
  gap: 28px;
  max-width: 64ch;
  margin-top: 32px;
}
.ethos-body p{
  font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink);
  max-width: 62ch;
}

/* ===== Brand triad — Connect / Build / Grow three-column editorial ===== */
.brand-triad{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 80px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.triad-col{
  padding: 56px 40px;
  border-right: 1px solid var(--line);
  display:grid; gap: 24px; align-content: start;
  transition: background .3s ease;
  position: relative;
}
.triad-col:last-child{ border-right: none; }
.triad-col:hover{ background: var(--paper-2); }

.triad-meta{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
  display: flex; align-items: center; gap: 10px;
}
.triad-meta .sq{ width: 6px; height: 6px; margin: 0; }

.triad-word{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(56px, 6.8vw, 96px);
  line-height: .9; letter-spacing: -.02em;
  display: inline-flex; align-items: baseline;
  color: var(--ink);
}
.triad-word .sq{
  animation: triadPulse 4s ease-in-out infinite;
  transform-origin: center bottom;
}
.triad-col:nth-child(2) .triad-word .sq{ animation-delay: 1.3s; }
.triad-col:nth-child(3) .triad-word .sq{ animation-delay: 2.6s; }

@keyframes triadPulse{
  0%, 65%, 100%{ transform: scale(1); }
  80%{ transform: scale(1.4); }
}

.triad-body{
  font-family: var(--sans);
  font-size: 14.5px; line-height: 1.6; color: var(--slate);
  max-width: 32ch;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce){
  .triad-word .sq{ animation: none; }
}

@media (max-width: 1024px){
  .brand-triad{ grid-template-columns: 1fr; }
  .triad-col{
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 40px 0;
  }
  .triad-col:last-child{ border-bottom: none; }
}

/* =====================================================
   APPROACH (home summary)
   ===================================================== */
.approach-summary .display{ max-width: 24ch; margin-bottom: 80px; color: var(--paper); }
.approach-steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line-on-ink);
}
.step{
  padding: 40px;
  border-right: 1px solid var(--line-on-ink);
}
.step:last-child{ border-right: none; }
.step-num{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: rgba(240,239,234,.55); }
.step-name{
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1; letter-spacing: -.01em; color: var(--paper);
  margin-top: 24px;
}
.step-name em{ font-style: italic; }
.step-body{
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: rgba(240,239,234,.7); margin-top: 16px; max-width: 32ch;
}
.step-tags{
  display:flex; flex-wrap: wrap; gap: 6px; margin-top: 24px;
}
.step-tags span{
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--line-on-ink);
  color: rgba(240,239,234,.6);
}
.more{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  margin-top: 64px; padding-bottom: 4px; border-bottom: 1px solid currentColor;
  transition: gap .2s;
}
.more:hover{ gap: 16px; }

/* =====================================================
   WORK
   ===================================================== */
.work-head{
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 64px; gap: 48px;
}
.work-head .more{ margin-top: 0; }
.work-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.work-card{
  display: block; cursor: pointer;
  color: inherit;
}
.work-card .media{
  transition: transform .5s ease;
}
.work-card:hover .media{ transform: translateY(-4px); }
.work-card:hover .media img{ filter: grayscale(0%) contrast(1.05) brightness(1); transition: filter .5s; }
.work-card .media img{ transition: filter .8s; }
.work-meta{
  display:flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); margin-top: 14px;
}
.ink-bg .work-meta{ color: rgba(240,239,234,.55); }
.work-card h3{
  font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.05;
  letter-spacing: -.01em; margin-top: 6px;
}
.work-card h3 em{ font-style: italic; }
.work-card p{
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: var(--slate); margin-top: 10px; max-width: 42ch;
}
.ink-bg .work-card p{ color: rgba(240,239,234,.7); }
.work-card .work-ladder{
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  letter-spacing: .04em; color: var(--ink); margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--ink-line);
  max-width: none;
}
.work-card .work-ladder strong{ font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }

/* Featured large card */
.work-card.large{
  margin-bottom: 64px;
}
.work-card.large h3{ font-size: clamp(40px, 4.5vw, 64px); margin-top: 12px; }
.work-card.large p{ font-size: 17px; max-width: 64ch; margin-top: 16px; }
.work-tags{ display:flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.work-tags span{
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--line); color: var(--slate);
}

/* Filter chips */
.filter-row{
  display:flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 24px var(--gutter); border-top: 1px solid var(--line);
}
.filter-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); margin-right: 16px;
}
.chip{
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.chip em{ font-style: normal; color: var(--slate); }
.chip:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:hover em{ color: rgba(240,239,234,.7); }
.chip.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.active em{ color: rgba(240,239,234,.7); }

/* =====================================================
   NETWORK
   ===================================================== */
.portraits{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.portraits figure{ display: block; }
.portraits figcaption{
  margin-top: 12px;
  font-family: var(--serif); font-size: 17px; color: var(--paper);
  line-height: 1.2; letter-spacing: -.01em;
}
.portraits figcaption span{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,239,234,.55); font-style: normal; margin-top: 4px;
}

/* Full portrait grid on Network page */
.portrait-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.portrait-grid figure{ display: block; }
.portrait-grid figcaption{
  margin-top: 14px;
  font-family: var(--serif); font-size: 22px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
}
.portrait-grid figcaption em{ font-style: italic; }
.portrait-grid figcaption span{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); margin-top: 4px;
}

.network-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-on-ink);
}
.network-stats > div{
  display:flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(240,239,234,.55);
}
.network-stats .big{
  font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 72px);
  line-height: 1; color: var(--paper); letter-spacing: -.01em; text-transform: none;
}

/* Entry rows */
.entry-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  border-top: 1px solid var(--line);
}
.entry-row{
  display:grid; grid-template-columns: 56px 1fr; gap: 16px;
  padding: 32px 0; border-bottom: 1px solid var(--line);
}
.entry-row .er-num{
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--slate);
}
.entry-row h4{
  font-family: var(--serif); font-size: 28px; line-height: 1;
  font-weight: 400; letter-spacing: -.01em; color: var(--ink);
}
.entry-row p{
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: var(--slate); margin-top: 12px;
}
.entry-row a{
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px;
  transition: opacity .2s;
}
.entry-row a:hover{ opacity: .55; }

/* =====================================================
   JOURNAL
   ===================================================== */
.journal-list{ display:grid; grid-template-columns: 1fr; gap: 0; }
.j-row{
  display: grid; grid-template-columns: 80px 1fr 140px 80px;
  gap: 32px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line);
  transition: padding .2s, background .2s;
}
.j-row:hover{ padding-left: 16px; padding-right: 16px; background: var(--paper-2); }
.j-num{ font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--slate); }
.j-title{
  font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2;
  letter-spacing: -.01em; color: var(--ink); font-weight: 400;
}
.j-title em{ font-style: italic; }
.j-meta{ font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.j-date{ font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--slate); text-align: right; }

/* Featured article */
.featured-article{ padding-top: 0; }
.fa-card{ display:block; }
.fa-card .media{ aspect-ratio: 21/9; }
.fa-overlay{
  position: absolute; inset: 0; padding: 32px; z-index: 2;
  display: grid; grid-template-rows: auto 1fr; gap: 16px;
  color: var(--paper);
}
.fa-meta{
  display:flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,239,234,.85);
}
.fa-meta .sq{ background: var(--signal); }
.fa-title{
  align-self: end;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -.01em;
  color: var(--paper); max-width: 22ch;
}
.fa-title em{ font-style: italic; }

/* ===== Long-form article (Field notes) ===== */
.article-index{
  display:grid; grid-template-columns: 1fr; gap:0;
  margin-top: 40px; border-top: 1px solid var(--line);
}
.article-index a{
  display:grid; grid-template-columns: 80px 1fr 200px; gap:32px; align-items:baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: padding .2s, background .2s;
}
.article-index a:hover{ padding-left:16px; padding-right:16px; background: var(--paper-2); }
.ai-num{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; color: var(--slate); }
.ai-title{ font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height:1.2; letter-spacing:-.01em; color: var(--ink); }
.ai-meta{ font-family: var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); text-align:right; }

.article{ max-width: 760px; margin: 0 auto; padding-top: 96px; border-top: 1px solid var(--line); }
.article:first-of-type{ border-top:none; padding-top: 72px; }
.article-kicker{
  display:inline-flex; align-items:center; gap:10px; margin-bottom: 24px;
  font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--slate);
}
.article-title{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(32px, 4.4vw, 56px); line-height: 1.0; letter-spacing:-.018em;
  text-wrap: balance;
}
.article-title em{ font-style: italic; }
.article-standfirst{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(20px, 2.2vw, 28px); line-height:1.25; letter-spacing:-.01em;
  color: var(--ink); margin-top: 24px; max-width: 38ch; text-wrap: balance;
}
.article-meta{
  display:flex; flex-wrap:wrap; gap: 24px; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--slate);
}
.article-body{ margin-top: 40px; }
.article-body > p{ font-size: 18px; line-height: 1.72; color: rgba(14,16,20,.86); margin-bottom: 24px; }
.article-body > p.article-lead{ font-size: 21px; line-height: 1.6; color: var(--ink); }
.article-body h3{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing:-.01em;
  margin: 48px 0 16px;
}
.article-body strong{ font-weight: 600; color: var(--ink); }
.article-body a{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--slate); }
.article-body a:hover{ text-decoration-color: var(--ink); }
.pull-quote{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing:-.012em; color: var(--ink);
  margin: 48px 0; padding-left: 24px; border-left: 2px solid var(--ink); text-wrap: balance;
}
.stat-row{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background: var(--line); border: 1px solid var(--line); margin: 48px 0;
}
.stat{ background: var(--paper); padding: 28px 24px; }
.stat-num{ display:block; font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); line-height:1; letter-spacing:-.02em; color: var(--ink); }
.stat-label{ display:block; font-family: var(--mono); font-size:11px; letter-spacing:.05em; line-height:1.45; color: var(--slate); margin-top: 12px; }
.article-foot{
  margin-top: 48px; padding: 32px; background: var(--paper-2); border-left: 2px solid var(--signal);
}
.article-foot p{ font-size: 17px; line-height: 1.62; max-width: 60ch; }
.article-foot .more{ margin-top: 20px; display:inline-flex; }
.article-note{
  max-width: 760px; margin: 64px auto 0; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; line-height: 1.7; letter-spacing:.02em; color: var(--slate);
}
@media (max-width: 640px){
  .article-index a{ grid-template-columns: 1fr; gap: 8px; }
  .ai-meta{ text-align: left; }
  .stat-row{ grid-template-columns: 1fr; }
  .article-foot{ padding: 24px; }
}

/* =====================================================
   PAGE HERO (sub-pages)
   ===================================================== */
.page-hero-meta .back-link.inline{ margin-bottom: 0; }
.page-hero{
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(64px, 8vw, 96px);
  display:grid; gap: 24px;
  border-bottom: 1px solid var(--line);
}
/* Heading default font — ensures any H2/H3/H4 fall back to serif */
h2, h3, h4{ font-family: var(--serif); font-weight: 400; }
.page-hero.ink-bg{ border-bottom-color: var(--line-on-ink); }
.page-hero-meta{
  display:flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.page-hero-meta.dark{ color: rgba(240,239,234,.55); border-bottom-color: var(--line-on-ink); }
.page-hero-meta .sq{ margin-right: 8px; }
.page-hero-lead{
  font-family: var(--sans); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45;
  color: var(--ink); max-width: 56ch; padding-top: 16px;
}
.page-hero-lead.light{ color: rgba(240,239,234,.8); }

/* =====================================================
   APPROACH DETAIL ROWS
   ===================================================== */
.approach-detail{ padding-top: 0; border-top: none; display:grid; gap: 0; }
.approach-row{
  display:grid; grid-template-columns: 80px 1fr 1fr; gap: 48px; align-items: center;
  padding: 96px var(--gutter); border-bottom: 1px solid var(--line);
}
.approach-row.reverse{ grid-template-columns: 80px 1fr 1fr; }
.approach-row.reverse .ar-body{ order: 2; }
.approach-row.reverse .ar-media{ order: 1; grid-column: 2 / 3; }
.approach-row.reverse .ar-body{ grid-column: 3 / 4; }
.ar-num{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--slate); align-self: start; padding-top: 8px; }
.ar-body h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.015em; margin-bottom: 24px;
}
.ar-body h2 em{ font-style: italic; }
.ar-body .lead{
  font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink);
  max-width: 50ch;
}
.ar-body ul{ margin-top: 24px; display: grid; gap: 8px; }
.ar-body ul li{
  font-family: var(--sans); font-size: 14px; color: var(--slate); line-height: 1.5;
  display: flex; align-items: baseline; gap: 12px;
}
.ar-body ul li .sq{ flex-shrink: 0; width: 6px; height: 6px; margin: 0; transform: translateY(-2px); }

.ar-media{ aspect-ratio: 3/2; }

/* Don't list */
.dont .dont-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.dont .dont-grid > div{
  padding: 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dont .dont-grid > div:nth-child(2n){ border-right: none; }
.dont h4{
  font-family: var(--serif); font-size: 28px; line-height: 1.1;
  font-weight: 400; letter-spacing: -.01em; margin-bottom: 16px;
}
.dont p{ font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--slate); max-width: 42ch; }

/* =====================================================
   PORTRAITS — Network page
   ===================================================== */
.portraits-full{ padding-top: clamp(64px, 8vw, 120px); }

/* =====================================================
   FOR FOUNDERS / FOR INVESTORS
   ===================================================== */
.section.paper2{ background: var(--paper-2); }
.for-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: 48px; margin-bottom: 48px;
}
.section.for-founders .display,
.section.for-investors .display{ margin-bottom: 0; max-width: none; }
.section.for-founders .display-sub,
.section.for-investors .display-sub{ margin-top: 24px; }
.section.for-founders .more,
.section.for-investors .more{ margin-top: 0; }
.ink-bg .for-grid{ background: var(--line-on-ink); border-color: var(--line-on-ink); }

.for-item{
  background: var(--paper); padding: 40px;
  display:grid; gap: 16px; align-content: start;
  position: relative;
  overflow: hidden;
}
.for-item-bg{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.for-item > *:not(.for-item-bg){ position: relative; z-index: 1; }
.paper2 .for-item{ background: var(--paper-2); }
.ink-bg .for-item{ background: var(--ink); }

.for-num{
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--slate);
}
.ink-bg .for-num{ color: rgba(240,239,234,.55); }

.for-item h3{
  font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.05; letter-spacing: -.01em; font-weight: 400;
}
.for-item p{
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: var(--slate); max-width: 36ch; margin-top: 4px;
}
.ink-bg .for-item p{ color: rgba(240,239,234,.7); }

/* =====================================================
   CTA SPLIT
   ===================================================== */
.cta-split{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.cta-pane{
  padding: 80px var(--gutter); display:grid; gap: 24px; min-height: 360px;
  transition: background .3s, color .3s;
  position: relative;
}
.cta-pane.left{ background: var(--paper-2); }
.cta-pane.right{ background: var(--ink); color: var(--paper); }
.cta-pane:hover{ background: var(--signal); color: var(--ink); }
.cta-pane.right:hover .cta-kicker{ color: var(--ink); }
.cta-kicker{
  display:inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate);
}
.cta-pane.right .cta-kicker{ color: rgba(240,239,234,.7); }
.cta-pane:hover .cta-kicker .sq{ background: var(--ink); }
.cta-pane h3{
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1;
  letter-spacing: -.01em;
}
.cta-pane h3 em{ font-style: italic; }
.cta-pane p{ font-family: var(--sans); font-size: 16px; line-height: 1.5; max-width: 42ch; }
.cta-arrow{
  position: absolute; right: var(--gutter); top: 80px;
  font-family: var(--serif); font-style: italic; font-size: 56px; line-height: 1;
  transition: transform .3s;
}
.cta-pane:hover .cta-arrow{ transform: translateX(12px); }

/* =====================================================
   SUBMIT FORM
   ===================================================== */
.submit-grid{
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 64px;
}
.submit-info{ display:grid; gap: 48px; align-content: start; }
.info-block h4{
  font-family: var(--serif); font-size: 28px; line-height: 1;
  font-weight: 400; letter-spacing: -.01em; margin-bottom: 16px;
}
.info-block ul, .info-block ol{ display: grid; gap: 10px; }
.info-block li{
  font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink);
  display:flex; align-items: baseline; gap: 12px;
}
.info-block li .sq{ flex-shrink: 0; width: 6px; height: 6px; margin: 0; transform: translateY(-2px); }
.info-block li .num{
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--slate);
  min-width: 24px;
}
.info-block.disclaimer{
  border-top: 1px solid var(--line); padding-top: 24px;
}
.info-block.disclaimer p{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.6;
  color: var(--slate); text-transform: none;
}

/* Form */
.submit-form{
  background: var(--paper-2); padding: 32px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
  border: 1px solid var(--line);
  position: relative;
}
.form-meta{
  grid-column: 1 / -1;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.form-meta .sq{ margin-right: 8px; }
.submit-form label{ display: grid; gap: 6px; }
.submit-form label.full{ grid-column: 1 / -1; }
.fl{
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate);
}
.submit-form input,
.submit-form textarea{
  background: var(--paper); border: 1px solid var(--line);
  padding: 14px 16px;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  resize: vertical;
}
.submit-form input::placeholder,
.submit-form textarea::placeholder{ color: var(--slate); }
.submit-form input:focus,
.submit-form textarea:focus{ outline: none; border-color: var(--ink); }

.dropzone{
  background: var(--paper); border: 1px dashed var(--slate);
  padding: 32px; display: grid; place-items: center;
  cursor: pointer; transition: background .2s, border-color .2s;
  position: relative;
}
.dropzone.dragover{ background: var(--signal); border-color: var(--ink); border-style: solid; }
.dropzone.has-file{ border-style: solid; border-color: var(--ink); }
.dropzone:hover{ background: var(--signal); border-color: var(--ink); border-style: solid; }
.dz-inner{ display:flex; align-items: center; gap: 16px; }
.dz-text{ display: grid; gap: 2px; }
.dz-text strong{ font-family: var(--sans); font-size: 16px; color: var(--ink); font-weight: 500; }
.dz-text span{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

.submit-cta{
  background: var(--ink); color: var(--paper);
  padding: 18px 24px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  display:flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: background .2s, color .2s;
}
.submit-cta:hover{ background: var(--signal); color: var(--ink); }
.submit-cta .sq{ background: var(--signal); }
.submit-cta:hover .sq{ background: var(--ink); }

/* Sent state */
.sent-message{ display: none; }
.submit-form.sent > *:not(.sent-message):not(.form-meta){ display: none; }
.submit-form.sent .sent-message{
  display: block; grid-column: 1 / -1;
  padding: 48px 16px 16px; text-align: left;
}
.sent-message .kicker{
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate);
  display:inline-flex; align-items: center; gap: 10px;
}
.sent-message h3{
  font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1;
  letter-spacing: -.01em; margin-top: 16px;
}
.sent-message h3 em{ font-style: italic; }
.sent-message p{ font-family: var(--sans); font-size: 16px; color: var(--slate); margin-top: 12px; }

/* =====================================================
   FOOTER
   ===================================================== */
.footer{
  background: var(--ink); color: var(--paper);
  padding: 56px var(--gutter) 24px;
}
.footer-top{
  display:grid; grid-template-columns: auto 1fr auto; gap: 48px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line-on-ink);
  align-items: center;
}
.footer-brand{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-brand .brand.big{
  font-family: var(--serif); font-style: italic; font-size: 56px;
  letter-spacing: -.04em;
  display: inline-block;
  line-height: 1;
}
.footer-brand .brand.big .sq{ width: 0.18em; height: 0.18em; }
.footer-strap{
  font-family: var(--sans); font-size: 13px; color: rgba(240,239,234,.65);
  max-width: 28ch; line-height: 1.5; margin: 0;
}
.footer-strap em{ font-style: italic; }
.footer-rows{ display: grid; gap: 0; }
.frow{
  display: grid; grid-template-columns: 120px 1fr; gap: 24px;
  align-items: center;
  padding: 12px 0; border-top: 1px solid var(--line-on-ink);
}
.frow:first-child{ border-top: 0; padding-top: 0; }
.fcol-head{
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240,239,234,.55);
  display:inline-flex; align-items: center; gap: 10px;
}
.frow-items{
  display: flex; flex-wrap: wrap; gap: 6px 22px;
}
.frow-items a,
.frow-items span{
  font-family: var(--sans); font-size: 14px; color: var(--paper);
  transition: opacity .2s;
}
.frow-items a:hover{ opacity: .55; }

.footer-cta{ display: flex; align-items: flex-start; justify-content: flex-end; }
.footer-cta .cta{
  display:inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--paper);
  padding: 10px 16px;
  border: 1px solid var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.footer-cta .cta:hover{ background: var(--signal); color: var(--ink); border-color: var(--signal); }
.footer-cta .cta .sq{ background: var(--signal); }
.footer-cta .cta:hover .sq{ background: var(--ink); }

.footer-disclaimer{ padding: 20px 0; border-bottom: 1px solid var(--line-on-ink); }
.footer-disclaimer p{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.65;
  color: rgba(240,239,234,.5); max-width: none; margin: 0;
}
.footer-bot{
  display:flex; justify-content: space-between; padding-top: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,239,234,.5);
}
.footer-bot .sq{ width: 6px; height: 6px; vertical-align: middle; }

/* =====================================================
   NETWORK DIAGRAM (home teaser)
   ===================================================== */
.network-diagram{
  display:grid; grid-template-columns: 1.3fr 0.9fr 1.3fr; gap: 0;
  margin-top: 64px; margin-bottom: 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 280px;
}
.nd-col{
  padding: 48px 32px;
  display:grid; gap: 16px; align-content: start;
}
.nd-col.right{ text-align: right; }
.nd-col.right .nd-meta{ justify-content: flex-end; }
.nd-col.right .nd-list{ text-align: right; }
.nd-col.right .nd-list li{ justify-content: flex-end; }

.nd-meta{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
  display: flex; align-items: center; gap: 10px;
}
.nd-h{
  font-family: var(--serif); font-style: italic; font-size: clamp(48px, 6.5vw, 88px);
  line-height: .95; letter-spacing: -.02em; color: var(--ink); font-weight: 400;
}
.nd-p{
  font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
  color: var(--slate); max-width: 36ch;
}
.nd-list{ display: grid; gap: 12px; list-style: none; }
.nd-list li{
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5;
  color: var(--ink); display: flex; align-items: center; gap: 10px;
}
.nd-list.big li{
  font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05; letter-spacing: -.01em; color: var(--ink);
  display: flex; align-items: baseline; gap: 14px;
}
.nd-list.big.detailed li{
  flex-direction: row; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.nd-list.big.detailed li:last-child{ border-bottom: none; padding-bottom: 0; }
.nd-list.big.detailed li:first-child{ padding-top: 0; }
.nd-list.big.detailed .nd-detail{
  display: grid; grid-template-columns: 160px 1fr; gap: 24px;
  align-items: center;
  flex: 1;
}
.nd-list.big.detailed .nd-name{
  font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 36px);
  line-height: 0.95; color: var(--ink);
}
.nd-list.big.detailed .nd-desc{
  font-family: var(--sans); font-style: normal; font-size: 13px;
  line-height: 1.5; color: var(--slate); letter-spacing: 0;
}
.nd-col.right .nd-list.big.detailed li{ flex-direction: row; text-align: left; }
.nd-col.right .nd-list.big.detailed .nd-detail{ align-items: center; }

.nd-bridge{
  position: relative;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--paper-2);
  display: grid; place-items: center;
}
.nd-bridge-track{
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: var(--ink); opacity: .4;
}
.nd-bridge-center{
  position: relative; z-index: 2;
  background: var(--paper-2); padding: 24px 32px;
  display: grid; gap: 12px; text-align: center;
}
.nd-bridge-mark{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(56px, 8vw, 120px); line-height: .9;
  letter-spacing: -.04em; color: var(--ink);
  display: inline-flex; align-items: baseline;
}
.nd-bridge-pulse{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
}
.nd-bridge-pulse:not(.end){ left: -6px; }
.nd-bridge-pulse.end{ right: -6px; }
.nd-bridge-pulse .sq{
  width: 14px; height: 14px;
  background: var(--signal);
  display: block;
  animation: ndPulse 3s ease-in-out infinite;
}
.nd-bridge-pulse.end .sq{ animation-delay: 1.5s; }
@keyframes ndPulse{
  0%, 60%, 100%{ transform: scale(1); }
  75%{ transform: scale(1.4); }
}

@media (max-width: 1024px){
  .network-diagram{ grid-template-columns: 1fr; }
  .nd-bridge{ border-left: none; border-right: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px; }
  .nd-bridge-track{ width: 1px; height: 100%; top: 0; bottom: 0; left: 50%; right: auto; }
  .nd-bridge-pulse:not(.end){ left: 50%; top: 0; transform: translate(-50%, -50%); }
  .nd-bridge-pulse.end{ right: auto; left: 50%; top: auto; bottom: 0; transform: translate(-50%, 50%); }
  .nd-col.right{ text-align: left; }
  .nd-col.right .nd-meta{ justify-content: flex-start; }
  .nd-col.right .nd-list{ text-align: left; }
  .nd-col.right .nd-list li{ justify-content: flex-start; }
}

/* =====================================================
   JOURNAL CATEGORIES (Announcements / News / Thought pieces)
   ===================================================== */
.journal-cats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: 48px;
}
.ink-bg .journal-cats{ background: var(--line-on-ink); border-color: var(--line-on-ink); }
.journal-cats.vertical{ grid-template-columns: 1fr; }
.j-cat{
  background: var(--paper); padding: 40px;
  display: grid; gap: 16px; align-content: start;
  position: relative; overflow: hidden; isolation: isolate;
  text-decoration: none; color: inherit;
  transition: background .3s ease;
}
.ink-bg .j-cat{ background: var(--ink); }
.j-cat:hover{ background: var(--paper-2); }
.ink-bg .j-cat:hover{ background: var(--ink-2, #15181F); }
.j-cat-meta{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
  display: flex; align-items: center; gap: 10px;
}
.ink-bg .j-cat-meta{ color: rgba(240,239,234,.65); }
.j-cat h3{
  font-family: var(--serif); font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15; letter-spacing: -.01em; font-weight: 400;
  color: var(--ink);
}
.ink-bg .j-cat h3{ color: var(--paper); }
.j-cat p{
  font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--slate);
}
.ink-bg .j-cat p{ color: rgba(240,239,234,.72); }
.j-cat-status{
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
  padding-top: 12px; margin-top: auto; border-top: 1px solid var(--line);
}
.j-cat.full{ padding: 56px 48px; }
.j-cat.full h3{ font-size: clamp(28px, 3vw, 40px); max-width: 36ch; }

/* Background imagery for category tiles */
.j-cat-bg{
  position: absolute; inset: 0; z-index: -1;
  border-radius: 0;
}
.j-cat-bg::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,18,.55) 0%, rgba(11,13,18,.78) 100%);
}
.j-cat-bg img{ filter: grayscale(1) brightness(.55); transition: transform .8s ease, filter .8s ease; }
.j-cat.has-bg:hover .j-cat-bg img{ filter: grayscale(.85) brightness(.65); }
.j-cat.has-bg{ background: var(--ink); min-height: 280px; }
.j-cat.has-bg .j-cat-meta{ color: rgba(240,239,234,.7); }
.j-cat.has-bg h3{ color: var(--paper); }
.j-cat.has-bg p{ color: rgba(240,239,234,.78); }
.j-cat.has-bg:hover{ background: var(--ink); }
.j-cat.has-bg:hover .j-cat-bg img{ transform: scale(1.04); }

@media (max-width: 1024px){
  .journal-cats{ grid-template-columns: 1fr; }
}

/* =====================================================
   BACK LINK
   ===================================================== */
.back-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
  margin-bottom: 24px; padding-bottom: 4px;
  text-decoration: none;
  transition: gap .2s, color .2s;
}
.back-link:hover{ gap: 14px; color: var(--ink); }
.ink-bg .back-link{ color: rgba(240,239,234,.65); }
.ink-bg .back-link:hover{ color: var(--paper); }

/* =====================================================
   CTA BLOCK (closing CTA on detail pages)
   ===================================================== */
.cta-block{
  padding-top: clamp(80px, 10vw, 144px);
  padding-bottom: clamp(80px, 10vw, 144px);
}
.cta-block-inner{
  display: grid; gap: 16px; max-width: 64ch;
}
.cta-block .display-sub{ margin-top: 8px; }
.cta-block .more{ margin-top: 24px; }

/* =====================================================
   CONTACT SPLIT (founders | investors)
   ===================================================== */
.contact-split{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.contact-pane{
  padding: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 64px);
  display: grid; gap: 16px; align-content: start;
  border-right: 1px solid var(--line);
}
.contact-pane:last-child{ border-right: none; }
.contact-pane.ink{ background: var(--ink); color: var(--paper); }
.contact-meta{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
  display: flex; align-items: center; gap: 10px;
}
.contact-pane.ink .contact-meta{ color: rgba(240,239,234,.65); }
.contact-pane .display{ max-width: 16ch; }
.contact-list{ list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.contact-list li{
  font-family: var(--sans); font-size: 14.5px; line-height: 1.5;
  display: flex; align-items: center; gap: 10px; color: var(--ink);
}
.contact-list.dark li{ color: var(--paper); }
.contact-pane .more{ margin-top: 24px; }

@media (max-width: 720px){
  .contact-split{ grid-template-columns: 1fr; }
  .contact-pane{ border-right: none; border-bottom: 1px solid var(--line); }
}

/* =====================================================
   MOBILE NAV TOGGLE
   ===================================================== */
.nav-toggle{
  display: none;
  background: transparent; border: 1px solid var(--paper); padding: 8px 10px;
  cursor: pointer;
  flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
}
.nav-toggle .sq{
  width: 16px; height: 2px; background: var(--paper); margin: 0;
}

@media (max-width: 720px){
  .nav-toggle{ display: inline-flex; margin-left: auto; margin-right: 12px; }
  .nav-links{
    display: none;
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: var(--ink); padding: 32px 24px;
    flex-direction: column; align-items: flex-start; gap: 20px;
    z-index: 99;
  }
  body.nav-open .nav-links{ display: flex; }
  .nav-links a{ font-size: 22px; font-family: var(--serif); }
  .nav-links a .num{ font-size: 12px; }
}

/* =====================================================
   SCROLL CUE — hide total on short pages
   ===================================================== */
.scroll-cue-fixed:not(.long) .cue-rest{ display: none; }
@media (max-width: 1024px){
  .approach-steps{ grid-template-columns: 1fr 1fr; }
  .step{ border-right: none; border-bottom: 1px solid var(--line-on-ink); padding: 32px 0; }
  .step:nth-child(2n) { padding-right: 0; }
  .work-grid{ grid-template-columns: 1fr 1fr; }
  .portraits{ grid-template-columns: repeat(3, 1fr); }
  .portrait-grid{ grid-template-columns: repeat(3, 1fr); }
  .ethos-body{ grid-template-columns: 1fr; }
  .submit-grid{ grid-template-columns: 1fr; }
  .for-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .nav{ gap: 16px; padding: 0 16px; }
  .nav-links{ display: none; }
  .nav-end .cta{ padding: 8px 12px; font-size: 10px; }
  .ticker{ font-size: 10px; }
  .hero{ min-height: 560px; height: auto; padding-bottom: 32px; }
  .hero-content{ padding: 24px 20px; gap: 32px; }
  .hero-foot{ grid-template-columns: 1fr 1fr; }
  .hero-stats > div{ font-size: 9px; }
  .hero-stats .big{ font-size: 28px; }
  .scroll-cue{ display: none; }
  .work-grid, .portrait-grid, .entry-grid, .for-grid{ grid-template-columns: 1fr; gap: 24px; }
  .portraits{ grid-template-columns: 1fr 1fr; }
  .work-head{ flex-direction: column; align-items: start; }
  .approach-row{ grid-template-columns: 1fr; gap: 24px; padding: 48px 20px; }
  .approach-row.reverse .ar-media{ grid-column: auto; }
  .approach-row.reverse .ar-body{ grid-column: auto; }
  .dont .dont-grid{ grid-template-columns: 1fr; }
  .dont .dont-grid > div{ border-right: none; padding: 28px 20px; }
  .cta-split{ grid-template-columns: 1fr; }
  .cta-arrow{ display: none; }
  .footer-top{ grid-template-columns: 1fr; gap: 24px; }
  .footer-brand .brand.big{ font-size: 56px; }
  .frow{ grid-template-columns: 1fr; gap: 6px; }
  .footer-cta{ justify-content: flex-start; }
  .footer-bot{ flex-direction: column; gap: 8px; }
  .j-row{ grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .j-date{ text-align: left; }
  .submit-form{ grid-template-columns: 1fr; }
  .network-stats{ grid-template-columns: 1fr 1fr; }
}