/* Self-hosted Inter — matches newsystems styling (weights 400 body / 500 headings) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

:root{
  /* Light theme (default) */
  --bg: #fafafa;            /* background */
  --fg: #4a4a4a;            /* body text */
  --heading: #1a1a1a;       /* headings */
  --select: #aaaaaa;
  --muted: #8a8a8a;         /* dimmer text, e.g. captions */
  --hot: #F17FB2;           /* highlight / hover accent (primary) */
  --hot-soft: #F9C2DA;      /* pale tint of the accent, for the breathing gradient */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-body: 14px;
  --fs-h1: 1.2rem;          /* small */
  --fs-h2: 1.1rem;          /* smaller still — compressed scale */
  --lh-body: 1.5;
  --lh-heading: 1.3;
  --weight-body: 400;
  --weight-heading: 500;
  --tracking: normal;
  --measure: 42.5rem;       /* 680px, matches source content-width */
  --gap-block: 2.5rem;      /* space before "Founding Partners" */
  --gap-tight: 0.75rem;     /* title -> blurb, label -> partner */
  --pad-mobile: 1.5rem;
  --pad-top: 12vh;          /* column top padding == title's vertical offset */
}

/* Dark theme — only the base tones flip; accent + greys stay */
:root[data-theme="dark"]{
  --bg: #0a0a0a;            /* near-black background */
  --fg: #c4c4c4;            /* light grey body text */
  --heading: #fafafa;       /* near-white headings */
}

*{ box-sizing: border-box; }
html,body{ margin:0; }
html{ background:var(--bg); transition:background-color 240ms ease; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-body);
  line-height:var(--lh-body); font-weight:var(--weight-body);
  letter-spacing:var(--tracking);
  min-height:100dvh;             /* fill the viewport even when content is short */
  transition:background-color 240ms ease, color 240ms ease;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Theme toggle — top-right of the centred column, sized to the body text */
.theme-toggle{
  display:flex; width:fit-content;          /* own line, shrink to the icon, left-aligned */
  align-items:center; justify-content:center;
  margin:0 0 1.25rem; padding:0; border:0; background:none;
  font-size:var(--fs-body); line-height:0;
  color:var(--heading); transition:color 150ms ease;
}
.theme-toggle:hover{ color:var(--hot); }
.theme-toggle .icon{ width:1em; height:1em; display:none; }
.theme-toggle .moon{ display:block; }          /* light mode shows moon (switch to dark) */
.theme-toggle .sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .sun{ display:block; }  /* dark mode shows sun */

/* Text selection — matches source */
::selection{ background:var(--select); color:var(--bg); }
::-moz-selection{ background:var(--select); color:var(--bg); }

.column{
  position:relative;             /* positioning context for the theme toggle */
  max-width:var(--measure);
  margin-inline:auto;            /* centered, large side margins on wide screens */
  padding-inline:var(--pad-mobile);
  padding-block: var(--pad-top) 10vh;   /* vertical placement */
}

.title{
  font-size:var(--fs-h1); font-weight:var(--weight-heading);
  line-height:var(--lh-heading); color:var(--heading); margin:0;
}
.blurb{ margin:var(--gap-tight) 0 0; }

/* Image + caption, side by side */
.media{
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
  margin:var(--gap-block) 0 0;
}
.figure{                 /* image: half the column width, scales fluidly */
  flex:none;
  width:50%;
  height:auto;
  display:block;
  margin:0;
}
.caption{                /* slightly smaller than body and a bit lighter */
  flex:1;
  font-size:0.85em;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}
/* Caption links breathe pink like every other link (inherit the global a style). */
.section-label{
  font-size:var(--fs-h1); font-weight:var(--weight-heading);
  line-height:var(--lh-heading); color:var(--heading);
  margin:var(--gap-block) 0 0;
}
.partner{ margin:var(--gap-tight) 0 0; }
.footnote{ font-size:0.85em; color:var(--muted); margin:var(--gap-block) 0 0; }

/* Cycling glyphs during the decode-on-load animation */
.dud{ color:var(--select); }

/* Custom crosshair cursor (pointer:fine only) */
@media (pointer: fine){
  .cursor-active, .cursor-active *{ cursor:none; }
}
.cursor{
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none; opacity:0;
  transition:opacity 160ms ease;
  will-change:transform;
}
.cursor.visible{ opacity:1; }

/* The + */
.cursor-cross{ position:absolute; top:0; left:0; transition:transform 180ms ease, opacity 180ms ease; }
.cursor-cross::before,
.cursor-cross::after{
  content:''; position:absolute; background:var(--hot);
  transform:translate(-50%,-50%);
}
.cursor-cross::before{ width:13px; height:1.5px; }
.cursor-cross::after{ width:1.5px; height:13px; }
.cursor.targeting .cursor-cross{ transform:scale(.5); opacity:.5; }

/* Lock-on reticle: four corner brackets */
.cursor-reticle{ --h:18px; position:absolute; top:0; left:0; }
.cursor-reticle i{
  position:absolute; width:7px; height:7px;
  border-top:1px solid var(--heading);
  border-left:1px solid var(--heading);
  opacity:0;
  transition:transform 220ms cubic-bezier(.2,.85,.25,1), opacity 160ms ease;
}
.cursor-reticle i:nth-child(1){ transform:translate(calc(-50% - var(--h)), calc(-50% - var(--h))) rotate(0deg); }
.cursor-reticle i:nth-child(2){ transform:translate(calc(-50% + var(--h)), calc(-50% - var(--h))) rotate(90deg); }
.cursor-reticle i:nth-child(3){ transform:translate(calc(-50% + var(--h)), calc(-50% + var(--h))) rotate(180deg); }
.cursor-reticle i:nth-child(4){ transform:translate(calc(-50% - var(--h)), calc(-50% + var(--h))) rotate(270deg); }
.cursor.targeting .cursor-reticle{ --h:10px; }
.cursor.targeting .cursor-reticle i{ opacity:1; border-color:var(--hot); }
.cursor.targeting .cursor-cross::before,
.cursor.targeting .cursor-cross::after{ background:var(--hot); }
.cursor.firing .cursor-reticle{ --h:7px; }
/* Soft lock-on for not-yet-linked items: grey instead of the pink accent */
.cursor.targeting.soft .cursor-reticle i{ border-color:var(--select); }
.cursor.targeting.soft .cursor-cross::before,
.cursor.targeting.soft .cursor-cross::after{ background:var(--select); }

/* Links — no underline; a soft breathing gradient signals interactivity */
a{
  color:var(--hot);                /* fallback if background-clip:text unsupported */
  text-decoration:none;
  background-image:linear-gradient(90deg, var(--hot) 0%, var(--hot-soft) 50%, var(--hot) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:breathe 3.6s ease-in-out infinite;
  transition:-webkit-text-fill-color 150ms ease;
}
@keyframes breathe{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
a:hover{
  animation:none;
  background-image:none;
  -webkit-text-fill-color:var(--hot);
}

/* Footnote-style reference marker. Picks up the highlight when inside a hovered link. */
.ref{
  color:var(--select);
  -webkit-text-fill-color:var(--select);   /* opt out of the link's gradient fill */
  font-size:0.7em;
  vertical-align:super;
  margin-left:0.15em;
  text-decoration:none;
}
a:hover .ref{ color:var(--hot); -webkit-text-fill-color:var(--hot); }

@media (prefers-reduced-motion: reduce){
  a{ animation:none; background-image:none; -webkit-text-fill-color:var(--hot); }
}

/* Brackets that frame interactive text on hover. Inline pseudo-elements so they
   sit at the true start/end of the text and wrap with it (multi-line links stay
   correctly framed). Collapsed to zero size at rest (no gap), grown in on hover
   so neighbouring text shifts to make room. */
a::before, a::after,
[data-cursor="target"]::before, [data-cursor="target"]::after,
.soon::before, .soon::after{
  display:inline-block;
  font-size:0; opacity:0;
  color:var(--hot); -webkit-text-fill-color:var(--hot);
  transition:font-size 200ms cubic-bezier(.2,.85,.25,1), opacity 150ms ease, margin 200ms cubic-bezier(.2,.85,.25,1);
}
a::before, [data-cursor="target"]::before, .soon::before{ content:'['; }
a::after,  [data-cursor="target"]::after,  .soon::after{ content:']'; }
a:hover::before, [data-cursor="target"]:hover::before, .soon:hover::before{ font-size:1em; opacity:1; margin-right:0.15em; }
a:hover::after,  [data-cursor="target"]:hover::after,  .soon:hover::after{ font-size:1em; opacity:1; margin-left:0.15em; }

/* "Soon" items (dates not yet linked): same framing, in a lighter grey */
.soon{ color:var(--fg); transition:color 150ms ease; }
.soon:hover{ color:var(--select); }
.soon::before, .soon::after{ color:var(--select); -webkit-text-fill-color:var(--select); }
.soon:hover .ref{ color:var(--select); -webkit-text-fill-color:var(--select); }

/* Image hover: fade the rest of the page to 50% (image stays full), plus pink
   guide lines spanning the viewport that draw in from the edges to frame it. */
.img-frame{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:0; transition:opacity 200ms ease; }
.img-frame.active{ opacity:1; }
.if-line{ position:fixed; background:var(--hot); transition:transform 700ms cubic-bezier(.16,.8,.3,1); }

/* Everything but the image fades back while the image is hovered */
.title, .blurb, .caption, .section-label, .partner{ transition:opacity 220ms ease; }
.img-focus .title,
.img-focus .blurb,
.img-focus .caption,
.img-focus .section-label,
.img-focus .partner{ opacity:0.5; }
/* transform-origin is set per-line in image-frame.js to the image centre */
.if-top, .if-bottom{ left:0; width:100vw; height:1.5px; transform:scaleX(0); }
.if-left, .if-right{ top:0; height:100vh; width:1.5px; transform:scaleY(0); }
.img-frame.active .if-top, .img-frame.active .if-bottom{ transform:scaleX(1); }
.img-frame.active .if-left, .img-frame.active .if-right{ transform:scaleY(1); }

@media (prefers-reduced-motion: reduce){
  .if-line{ transition:none; }
}

@media (max-width:600px){
  :root{ --pad-top:8vh; }
  .column{ padding-inline:var(--pad-mobile); padding-block:var(--pad-top) 8vh; }
  .media{ flex-direction:column; gap:var(--gap-tight); }
  .figure{ width:70%; }
}