/* ============================================================
   sitekali — shared styles
   Concrete-white gallery + ink + one electric Klein blue.
   ============================================================ */

:root {
  /* palette */
  --paper:    #e9e8e3;   /* concrete off-white (cooler than cream) */
  --paper-2:  #e1e0da;   /* recessed panels */
  --ink:      #121214;   /* near-black */
  --ink-soft: #34343a;
  --mute:     #75756e;   /* secondary text */
  --line:     rgba(18,18,20,.16);
  --line-2:   rgba(18,18,20,.07);
  --klein:    #1b1fe6;   /* electric blue accent */
  --klein-2:  #1418c2;
  --paper-rgb: 233,232,227;

  /* day→night descent (driven by trunk.js on scroll) */
  --page-bg:  #e9e8e3;
  --tk-trunk: #121214;
  --tk-leaf:  #34343a;
  --tk-bark:  #2a2a31;
  --tk-word:  #121214;
  --tk-accent: #1b1fe6;

  /* type */
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --display-x: "Syne", "Bricolage Grotesque", system-ui, sans-serif;  /* expressive display */
  --serif:   "Fraunces", Georgia, "Times New Roman", serif;           /* editorial italic accent */
  --body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* metrics */
  --pad: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1340px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--page-bg); transition: background-color .25s linear; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ambient atmosphere: fixed dust layer behind transparent page content */
#atmos {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; display: block;
}

/* descending trunk: scroll-grown SVG vine behind the page content */
#trunk {
  position: absolute; top: 0; left: 0; width: 100%;
  z-index: -1; pointer-events: none; overflow: visible;
}
#trunk svg { display: block; overflow: visible; }
#trunk-words {
  position: absolute; top: 0; left: 0; width: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
}
/* tree colour tokens shift day→night as you descend */
#trunk [data-ink]  { fill: var(--tk-trunk); }
#trunk [data-leaf] { fill: var(--tk-leaf); }
#trunk [data-bark] { stroke: var(--tk-bark); }
#trunk [data-inkstroke] { stroke: var(--tk-trunk); }

/* branch-words — cinematic reveal + focus emphasis */
.trunk-word {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 0.8rem + 3vw, 3.2rem);
  line-height: 1.06; letter-spacing: -.035em;
  color: var(--tk-word); white-space: normal; overflow-wrap: break-word;
  pointer-events: none; opacity: 0;
  transition: color .3s linear;
  will-change: transform, opacity, clip-path, filter;
}
.trunk-word--float {
  font-weight: 500; font-style: italic;
  font-size: clamp(1rem, 0.6rem + 2vw, 2rem);
  color: var(--tk-word);
  opacity: 0.6;
}
.trunk-word__line {
  display: block; height: 2px; margin-top: .22em;
  background: var(--tk-accent); transform: scaleX(0);
  transform-origin: inherit;
  transition: background .3s linear;
}
@media (max-width: 760px) {
  .trunk-word {
    font-size: clamp(1.15rem, 0.9rem + 2.8vw, 1.8rem);
    white-space: normal;
    line-height: 1.12;
    left: auto !important;       /* override JS inline left */
    right: 28vw;
    max-width: 62vw;
    text-align: right;
    overflow-wrap: break-word;
  }
  .trunk-word__line { margin-left: auto; width: 50%; height: 1.5px; }
  .trunk-word--float { font-size: clamp(0.9rem, 0.6rem + 2vw, 1.3rem); }
}

.leafcluster { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .leafcluster { animation: leafsway 6s var(--ease) infinite alternate; }
  #trunk .tk-halo { animation: tkpulse 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes leafsway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes tkpulse { 0%,100% { transform: scale(.65); opacity: .45; } 50% { transform: scale(1.2); opacity: .9; } }
@keyframes tktwinkle { from { opacity: 0.1; transform: scale(0.8); } to { opacity: 0.7; transform: scale(1.2); } }

/* fish recolours with the scene */
#fish-layer [data-fishbody] { fill: var(--tk-word); }
#fish-layer [data-fishtail] { fill: var(--tk-leaf); }
#fish-layer [data-fishfin]  { stroke: var(--tk-bark); }

/* night mode — nav + footer flip to light text on the dark descent */
.is-night .nav.scrolled {
  background: rgba(12,12,18,.65);
  border-bottom-color: rgba(27,31,230,.12);
  box-shadow: 0 1px 30px rgba(27,31,230,.08);
}
.is-night .nav__links a, .is-night .brand, .is-night .nav__cta { color: var(--paper); }
.is-night .nav__cta { background: var(--tk-accent); box-shadow: 0 0 16px rgba(27,31,230,.3); }
.is-night .nav__toggle span { background: var(--paper); }
.is-night .footer { border-top-color: rgba(233,232,227,.12); }
.is-night .footer__big,
.is-night .footer__col a,
.is-night .footer__col span { color: var(--paper); }
.is-night .footer__col h4,
.is-night .footer__bottom { color: rgba(233,232,227,.55); }
.is-night .footer__bottom { border-top-color: rgba(233,232,227,.1); }

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--klein); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--klein);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: fixed; left: var(--pad); top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; font: 600 .8rem/1 var(--mono);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- type helpers ---------- */
.eyebrow {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 1px; background: var(--ink);
  opacity: .55;
}
.eyebrow--plain::before { display: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 1.1rem + 4.2vw, 3.9rem); }
h3 { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); letter-spacing: -.01em; }
p { max-width: 64ch; }
strong { font-weight: 600; }

.accent { color: var(--klein); }
.lead { font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); line-height: 1.4; letter-spacing: -.01em; color: var(--ink); max-width: 26ch; }
.lead--wide { max-width: 36ch; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(4.5rem, 9vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.rule { height: 1px; background: var(--line); border: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.4vw, 2.4rem); }

/* generic section header: label + heading two-column */
.sec-head { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,9fr); gap: clamp(1rem,3vw,3rem); align-items: end; }
.sec-head__num { font: 500 .72rem/1 var(--mono); letter-spacing: .14em; color: var(--mute); }
@media (max-width: 720px){ .sec-head { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- buttons / links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 500 .82rem/1 var(--mono); letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1.05rem 1.5rem;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  transition: background .35s var(--ease), transform .35s var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--klein); transform: translateY(-2px); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translate(3px,-3px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 500 .82rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  position: relative; padding-bottom: .35rem; color: var(--ink);
}
.tlink::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.tlink:hover { color: var(--klein); }
.tlink:hover::after { transform: scaleX(1); }
.tlink .arr { transition: transform .35s var(--ease); }
.tlink:hover .arr { transform: translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem,2.2vw,1.6rem) var(--pad);
  mix-blend-mode: normal;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(var(--paper-rgb), .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
  padding-block: .9rem;
}
.brand {
  font: 700 1.18rem/1 var(--display); letter-spacing: -.03em;
  display: inline-flex; align-items: baseline; gap: .12rem;
}
.brand .dot { color: var(--klein); }
.nav__links { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav__links a {
  font: 500 .78rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); position: relative; padding: .3rem 0;
}
.nav__links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background: var(--klein); transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--klein); }
.nav__cta {
  display: inline-flex;
  font-size: .72rem; letter-spacing: .03em;
  padding: .75rem 1.15rem;
  text-transform: none;
  font-family: var(--body); font-weight: 500;
}

.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: .4rem;
}
.nav__toggle span { width: 26px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-out);
  pointer-events: none;
}
.menu.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu a {
  font: 700 clamp(2.2rem, 11vw, 4.5rem)/.98 var(--display);
  letter-spacing: -.03em; padding: .2rem 0; color: var(--paper);
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.menu.open a { opacity: 1; transform: none; }
.menu.open a:nth-child(1){ transition-delay:.12s }
.menu.open a:nth-child(2){ transition-delay:.18s }
.menu.open a:nth-child(3){ transition-delay:.24s }
.menu.open a:nth-child(4){ transition-delay:.30s }
.menu.open a:nth-child(5){ transition-delay:.36s }
.menu a:hover { color: var(--klein); }
.menu a .ix { font: 500 .8rem/1 var(--mono); color: rgba(233,232,227,.5); align-self: flex-start; margin-top: .6rem; }
.menu__foot { margin-top: 3rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font: 500 .78rem/1 var(--mono); color: rgba(233,232,227,.6); letter-spacing: .04em; }
.menu__foot .btn { background: var(--paper); color: var(--ink); font-size: .68rem; padding: .8rem 1.2rem; }
.menu__foot .btn:hover { background: var(--klein); color: var(--paper); }

@media (max-width: 880px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  body.menu-open .nav__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); background: var(--paper); }
  body.menu-open .nav__toggle span:nth-child(2){ opacity: 0; }
  body.menu-open .nav__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); background: var(--paper); }
  body.menu-open .nav.scrolled { background: transparent; border-color: transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ============================================================
   HERO (index)
   ============================================================ */
/* the hero pins while its wrapper scrolls: that scroll is the dive */
.hero-dive { position: relative; height: calc(100svh + 240vh); }
@media (max-width: 760px) { .hero-dive { height: calc(100svh + 220vh); } }
.hero { position: sticky; top: 0; height: 100svh; min-height: 640px; width: 100%; overflow: hidden; }
.hero__dive-hint {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 2.6rem); transform: translateX(-50%);
  z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font: 500 .66rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);   /* opacity is driven by the dive in hero3d.js; the fade-in lives on the children */
}
.hero__dive-hint > span { opacity: 0; animation: hintIn 1.2s var(--ease-out) 1.6s forwards; }
.hero__dive-hint .line { width: 1px; height: 30px; background: var(--ink); transform-origin: top; }
.hero__dive-hint > span.line { animation: hintIn 1.2s var(--ease-out) 1.6s forwards, drop 2.4s var(--ease) 2.8s infinite; }
@keyframes hintIn { to { opacity: .75; } }
.showcase[data-no-trunk] { padding-top: clamp(4rem, 14vh, 9rem); }
#tk-stars.tk-stars--css { opacity: 0; transition: opacity .8s linear; }
.is-night #tk-stars.tk-stars--css { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-dive { height: auto; }
  .hero { position: relative; }
  .hero__dive-hint { display: none; }
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hero__fallback {
  position:absolute; inset:0; display:none; place-items:center;
  background: radial-gradient(60% 60% at 50% 45%, #1a1a1f 0%, var(--paper) 70%);
}
.hero__grain { position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(5.5rem,10vh,8rem) var(--pad) clamp(3.5rem,9vh,6.5rem);
  /* white text + difference: reads dark on the light page,
     flips to white wherever the dark 3D form passes behind it */
  color: #fff;
  mix-blend-mode: difference;
}
.hero__center { align-self: end; max-width: 18ch; margin-bottom: clamp(2rem, 6vh, 5rem); }
.hero__title {
  font-size: clamp(2.9rem, 1.5rem + 8.5vw, 8.5rem);
  line-height: .92; letter-spacing: -.035em;
  opacity: 0.85;
}
.hero__title .accent { color: #fff; }            /* monochrome in hero so the blend stays clean */
.hero__title .soft { color: rgba(255,255,255,.5); }
.hero__foot { display: flex; align-items: flex-end; justify-content: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.hero__tagbox {
  background: #121214; color: #e9e8e3;
  font: 500 .78rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  padding: .85rem 1.3rem; max-width: 30ch;
  mix-blend-mode: normal;
}
.hero__slogan { font: 500 .8rem/1.5 var(--mono); letter-spacing: .04em; color: #fff; max-width: 30ch; text-transform: uppercase; }
.hero__meta { font: 500 .72rem/1.6 var(--mono); letter-spacing: .06em; color: rgba(255,255,255,.7); text-align: right; text-transform: uppercase; }
.hero__hint {
  position:absolute; left:50%; bottom: clamp(1rem,4vh,2.2rem); transform: translateX(-50%);
  z-index:3; font: 500 .68rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color: #fff;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; pointer-events:none;
  mix-blend-mode: difference;
}
.hero__hint .line { width:1px; height:34px; background: #fff; opacity:.5; animation: drop 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes drop { 0%{transform:scaleY(0);opacity:0} 30%{opacity:.5} 100%{transform:scaleY(1);opacity:0} }
@media (max-width: 640px){ .hero__hint{ display:none } }
@media (max-width: 640px){
  .hero__overlay { padding-top: clamp(7rem, 22vh, 11rem); }
  .hero__center { align-self: start; }
}

/* ============================================================
   SECTIONS / COMPONENTS
   ============================================================ */

/* what-I-build type list (index) — short, bold, numbered */
.typelist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: clamp(1.5rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.typelist li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: clamp(.75rem, 1.7vw, 1.15rem) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.7vw, 2.2rem);
  letter-spacing: -.02em; line-height: 1.04;
  transition: color .3s var(--ease);
}
.typelist li:hover { color: var(--klein); }
.typelist__n { font: 500 .72rem/1 var(--mono); letter-spacing: .08em; color: var(--mute); }
@media (max-width: 640px) {
  .typelist { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

/* trunk scroll space — empty height for the branch-word tree to grow through */
.trunk-space { height: clamp(2800px, 420vh, 4200px); }
@media (max-width: 760px) { .trunk-space { height: clamp(1400px, 260vh, 2200px); } }

/* ============================================================
   SHOWCASE (make.html) — project cards + side trunk
   ============================================================ */
.showcase-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.showcase-hero .lead { max-width: 56ch; }
.showcase-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.showcase-jump__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem .55rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font: 500 .72rem/1 var(--mono); letter-spacing: .04em;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.showcase-jump__chip span { color: var(--klein); font-size: .62rem; }
.showcase-jump__chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.showcase-jump__chip:hover span { color: var(--paper); }
.work { scroll-margin-top: 6rem; }
.showcase { position: relative; }
.showcase .eyebrow { color: var(--tk-word); transition: color .3s linear; }
.showcase .eyebrow::before { background: var(--tk-accent); }
.showcase h2 { color: var(--tk-word); transition: color .3s linear; }

.work-list { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: clamp(3.5rem, 8vw, 8rem); }

/* index dive → the listings sweep in from alternating sides (warp.js),
   continuing the canopy dive. Extra vertical spacing gives each card its own
   stretch of scroll; overflow-x is clipped since cards slide off-screen. */
.showcase[data-no-trunk] { overflow-x: clip; }
.showcase[data-no-trunk] .work-list {
  gap: clamp(5rem, 13vh, 10rem);
}
.showcase.is-warp .work {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: none;                 /* warp drives transform/opacity directly */
}
.showcase.is-warp .work__media { transition: box-shadow .5s var(--ease); }  /* keep hover lift off the swept card */
.showcase.is-warp .work:hover .work__media { transform: none; }

/* "Websites I've made." heading — a clean, staggered rise-in (driven by warp.js) */
.showcase.is-warp .wtitle {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.showcase.is-warp .eyebrow.wtitle { transition-delay: 0s; }
.showcase.is-warp h2.wtitle { transition-delay: .12s; }
.showcase.is-warp .wtitle.wtitle--in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .showcase[data-no-trunk] .work-list { gap: clamp(4rem, 11vh, 8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase[data-no-trunk] .work-list { gap: clamp(3rem, 10vw, 5rem); }
}

/* ============================================================
   WHAT I MAKE / THE STACK — the quick brief between the dive and the work
   ============================================================ */
.intro-space { padding-top: clamp(4rem, 12vh, 9rem); padding-bottom: clamp(2rem, 6vh, 5rem); }
.intro-space .eyebrow { color: var(--tk-word); transition: color .3s linear; }
.intro-space .eyebrow::before { background: var(--tk-accent); }
.intro-space h2 { color: var(--tk-word); transition: color .3s linear; }
.intro-lead {
  margin-top: 1.4rem; max-width: 46ch; font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  line-height: 1.5; color: color-mix(in srgb, var(--tk-word) 72%, transparent);
  transition: color .3s linear;
}

/* the section hosts a Three.js canvas behind its content */
.intro-space { position: relative; overflow: hidden; }
.make-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.make-gl.in { opacity: 1; }
.intro-space .wrap { position: relative; z-index: 1; }

/* simpler, un-boxed list — hairline-separated rows */
.make-list {
  list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; padding: 0;
}
.make-row {
  display: grid; grid-template-columns: auto 1fr; column-gap: clamp(1rem, 3vw, 2.4rem);
  align-items: baseline; padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--tk-word) 14%, transparent);
  transition: transform .4s var(--ease);
}
.make-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--tk-word) 14%, transparent); }
.make-row__n {
  font-family: var(--mono, "JetBrains Mono", monospace); font-size: .72rem;
  color: var(--tk-accent); letter-spacing: .12em; padding-top: .35em;
  transition: color .35s var(--ease);
}
.make-row__b { min-width: 0; }
.make-row h3 {
  margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); font-weight: 600;
  letter-spacing: -.01em; color: var(--tk-word); line-height: 1.05;
  transition: transform .4s var(--ease);
}
.make-row p {
  margin: .5rem 0 0; font-size: clamp(.9rem, .85rem + .2vw, 1rem); line-height: 1.5;
  max-width: 52ch; color: color-mix(in srgb, var(--tk-word) 60%, transparent);
}
@media (hover: hover) {
  .make-row:hover { transform: translateX(8px); }
  .make-row:hover h3 { color: var(--tk-accent); }
}

/* the stack: an endless, quick marquee */
.stack-strip { margin-top: clamp(2.4rem, 5vw, 3.6rem); display: flex; align-items: center; gap: 1.2rem; }
.stack-strip__label {
  flex: none; font-family: var(--mono, "JetBrains Mono", monospace); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--tk-word) 55%, transparent);
}
.stack-strip__viewport {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stack-track { display: inline-flex; gap: .6rem; white-space: nowrap; animation: stackScroll 34s linear infinite; }
.stack-strip:hover .stack-track { animation-play-state: paused; }
.stack-track span {
  flex: none; padding: .5rem .95rem; border-radius: 999px;
  font-family: var(--mono, "JetBrains Mono", monospace); font-size: .74rem; letter-spacing: .02em;
  color: color-mix(in srgb, var(--tk-word) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--tk-word) 18%, transparent);
  background: color-mix(in srgb, var(--tk-word) 4%, transparent);
}
@keyframes stackScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .stack-track { animation: none; flex-wrap: wrap; white-space: normal; }
  .stack-strip { flex-direction: column; align-items: flex-start; }
  .stack-strip__viewport { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 620px) {
  .stack-strip { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .stack-strip__viewport { width: 100%; }
}

/* one project: slideshow on one side, words on the other */
.work {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  perspective: 1300px;   /* the media panel becomes a 3D object in this space */
}
.work--flip .work__media { order: 2; }
.work--flip .work__info  { order: 1; }
/* keep the words clear of the trunk drawn down the right margin */
.work:not(.work--flip) .work__info { padding-right: clamp(2.5rem, 7vw, 6rem); }

.work__media {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #0c0c10;
  /* a coloured "edge" + deep drop makes the panel read as a solid slab */
  border: 1px solid color-mix(in srgb, var(--tk-accent) 70%, #fff 0%);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--tk-accent) 55%, transparent),
    0 30px 60px -18px rgba(18,18,20,.55),
    0 60px 90px -40px rgba(27,31,230,.35);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: grab; outline: none;
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .5s var(--ease), transform .45s var(--ease);
  animation: workFloat 9s ease-in-out infinite;
}
.work--flip .work__media { animation-delay: -4.5s; }   /* de-sync the two columns */
.work__media:active { cursor: grabbing; }
.work__media:focus-visible { box-shadow: 0 0 0 3px var(--tk-accent), 0 30px 60px -18px rgba(18,18,20,.5); }
.is-night .work__media {
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--tk-accent) 60%, transparent),
    0 30px 70px -18px rgba(0,0,0,.6),
    0 70px 110px -46px rgba(27,31,230,.55);
}
/* while the pointer is tilting a card, JS drives the transform — pause the float */
.work__media.is-tilting { animation: none; transition: box-shadow .5s var(--ease); }

/* moving sheen that tracks the cursor, so the surface catches "light" */
.work__glare {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(
    240px 240px at var(--gx, 50%) var(--gy, 0%),
    rgba(255,255,255,.28), rgba(255,255,255,.05) 40%, transparent 65%);
  mix-blend-mode: screen;
}
.work__media.is-tilting .work__glare { opacity: 1; }

@keyframes workFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50%      { transform: translateY(-10px) rotateX(1.2deg) rotateY(-1.4deg); }
}

.work__chrome {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .75rem; background: rgba(0,0,0,.45);
  font: 500 .66rem/1 var(--mono); color: rgba(255,255,255,.78);
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.work__chrome i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.work__chrome b { margin-left: .4rem; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.work__count { margin-left: auto; opacity: .7; letter-spacing: .06em; }
.work__count em { font-style: normal; color: #fff; opacity: 1; }

.work__viewport { overflow: hidden; }
.work__track {
  display: flex; list-style: none; will-change: transform;
  transition: transform .6s var(--ease-out);
}
.work__slide { flex: 0 0 100%; min-width: 0; }
.work__slide img {
  display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top center;
  pointer-events: none;
}

/* arrows + dots only render when a project has more than one screenshot */
.work__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(12,12,16,.62); color: #fff; font: 500 1rem/1 var(--mono);
  display: grid; place-items: center; opacity: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .3s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.work__nav--prev { left: .7rem; }
.work__nav--next { right: .7rem; }
.work__media:hover .work__nav, .work__media:focus-within .work__nav { opacity: 1; }
.work__nav:hover { background: var(--klein); }
.work__nav:active { transform: translateY(-50%) scale(.92); }
@media (hover: none) { .work__nav { opacity: 1; } }

.work__dots {
  position: absolute; left: 0; right: 0; bottom: .7rem; z-index: 3;
  display: flex; justify-content: center; gap: .4rem;
}
.work__dots button {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.45); transition: transform .3s var(--ease), background .3s var(--ease);
}
.work__dots button.on { background: #fff; transform: scale(1.35); }

.work__info { min-width: 0; }
.work__ix {
  display: inline-block; font: 500 .72rem/1 var(--mono); letter-spacing: .3em;
  color: var(--tk-accent); opacity: .8;
}
/* genre as an editorial italic-serif eyebrow — expressive, off-beat */
.work__genre {
  display: block; margin-top: .7rem;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.6rem); line-height: 1.05;
  letter-spacing: .005em; color: var(--tk-accent);
  transition: color .3s linear;
}
.work__name {
  margin-top: .25rem;
  font-family: var(--display-x); font-weight: 800;
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.9rem); letter-spacing: -.03em; line-height: .95;
  color: var(--tk-word); transition: color .3s linear;
}
.work__name a { color: inherit; text-decoration: none; }
.work__name a:hover { color: var(--tk-accent); }
.work__arr { color: var(--tk-accent); font-size: .6em; vertical-align: .15em; }
.work__url { display: block; margin-top: .55rem; font: 500 .74rem/1 var(--mono); letter-spacing: .04em; color: var(--mute); }
.is-night .work__url { color: rgba(233,232,227,.55); }
.work__desc {
  margin-top: 1.1rem; max-width: 46ch;
  font-size: clamp(.98rem, .9rem + .3vw, 1.1rem); line-height: 1.55;
  color: var(--tk-word); opacity: .82; transition: color .3s linear;
}
.work__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.work__tag {
  font: 500 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: .45rem .65rem; border-radius: 999px;
  color: var(--tk-word); border: 1px solid var(--line); transition: color .3s linear, border-color .3s linear;
}
.is-night .work__tag { border-color: rgba(233,232,227,.22); }
.work__tag--genre { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; }
.work__visit { margin-top: 1.6rem; color: var(--tk-word); border-color: var(--tk-word); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s linear; }
.work__visit:hover { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; }

/* coming-soon projects: small blurred tiles under the list */
.soon { margin-top: clamp(4rem, 9vw, 8rem); }
.soon-grid { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem; }
.soon__frame {
  position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
  background: radial-gradient(80% 80% at 30% 20%, #1a1a3a, #0c0c10); border: 1px solid var(--line);
}
.is-night .soon__frame { border-color: rgba(233,232,227,.18); }
.soon__frame img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: blur(12px) saturate(.5) brightness(.8); transform: scale(1.1); }
.soon__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 .7rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: #fff; background: rgba(12,12,18,.35);
}
.soon__name { display: block; margin-top: .6rem; font: 500 .8rem/1 var(--mono); color: var(--tk-word); transition: color .3s linear; }
.soon__url { display: block; margin-top: .35rem; font-size: .68rem; font-weight: 400; color: var(--mute); }
.is-night .soon__url { color: rgba(233,232,227,.5); }

/* stagger the cards a little as they arrive */
.work.reveal { transition-duration: 1s; }
.work.reveal .work__info > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.work.reveal.in .work__info > * { opacity: 1; transform: none; }
.work.reveal.in .work__info > :nth-child(1) { transition-delay: .15s }
.work.reveal.in .work__info > :nth-child(2) { transition-delay: .22s }
.work.reveal.in .work__info > :nth-child(3) { transition-delay: .29s }
.work.reveal.in .work__info > :nth-child(4) { transition-delay: .36s }
.work.reveal.in .work__info > :nth-child(5) { transition-delay: .43s }
.work.reveal.in .work__info > :nth-child(6) { transition-delay: .50s }
.work.reveal.in .work__desc { opacity: .82; }

@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; gap: 1.3rem; }
  .work--flip .work__media { order: 0; }
  .work--flip .work__info  { order: 0; }
  .work:not(.work--flip) .work__info { padding-right: 0; }
  .work-list { gap: clamp(3rem, 10vw, 5rem); }
  .work__desc { max-width: none; }
}
/* pause the float during the left/right warp entrance so transforms don't fight */
.showcase.is-warp .work__media { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .work__track { transition: none; }
  .work.reveal .work__info > * { opacity: 1; transform: none; transition: none; }
  .work:hover .work__media { transform: none; }
  .work__media { animation: none; }
  .work__glare { display: none; }
}

/* ============================================================
   CONTACT — open, centred, atmospheric
   ============================================================ */
.contact-page { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(8rem, 18vh, 12rem) clamp(4rem, 10vh, 7rem); }
.contact-wrap { width: 100%; max-width: 640px; margin-inline: auto; padding-inline: var(--pad); }
.contact-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.contact-head .eyebrow { justify-content: center; }
.contact-head .eyebrow::before { display: none; }
.contact-head h1 { font-size: clamp(3rem, 1.5rem + 9vw, 6.5rem); line-height: .95; margin-top: 1.2rem; }
.contact-head p { color: var(--ink-soft); max-width: 46ch; margin: 1.4rem auto 0; font-size: clamp(1.02rem, .96rem + .4vw, 1.15rem); }
.contact-form { gap: 1.8rem; }
.contact-form .field input, .contact-form .field textarea { font-size: 1.1rem; padding: .9rem 0; }
.contact-form__foot { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: .6rem; }
.contact-direct {
  text-align: center; margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .5rem;
}
.contact-direct > span:first-child { font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.contact-direct a { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); letter-spacing: -.02em; }
.contact-direct a:hover { color: var(--klein); }
.contact-direct__meta { font: 500 .74rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin-top: .3rem; }

/* manifesto */
.manifesto p { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1rem + 3vw, 3rem); line-height: 1.12; letter-spacing: -.02em; max-width: 20ch; }
.manifesto .dim { color: var(--mute); }

/* work list (rows) */
.worklist { border-top: 1px solid var(--line); }
.work-row {
  display: grid; grid-template-columns: 3.5rem minmax(0,5fr) minmax(0,3fr) auto;
  align-items: center; gap: 1.5rem;
  padding: clamp(1.4rem,3vw,2.3rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease), background .45s var(--ease);
}
.work-row:hover { padding-left: 1.2rem; background: var(--paper-2); }
.work-row__ix { font: 500 .74rem/1 var(--mono); color: var(--mute); }
.work-row__name { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 2.2vw, 2.6rem); letter-spacing: -.02em; line-height: 1; }
.work-row__tag { font: 500 .74rem/1.5 var(--mono); letter-spacing: .04em; color: var(--mute); text-transform: uppercase; }
.work-row__arr { justify-self: end; opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease); color: var(--klein); }
.work-row:hover .work-row__arr { opacity: 1; transform: none; }
.work-row:hover .work-row__name { color: var(--klein); }
@media (max-width: 760px){
  .work-row { grid-template-columns: 2rem 1fr auto; row-gap: .4rem; }
  .work-row__tag { grid-column: 2 / -1; }
  .work-row__arr { display:none; }
}

/* capability grid */
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cap { background: var(--paper); padding: clamp(1.4rem,2.4vw,2rem); display: flex; flex-direction: column; gap: .8rem; min-height: 200px; transition: background .35s var(--ease); }
.cap:hover { background: var(--paper-2); }
.cap__k { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.cap__t { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; line-height: 1.05; }
.cap__d { font-size: .94rem; color: var(--ink-soft); line-height: 1.55; margin-top: auto; }

/* process steps */
.steps { display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 4.5rem minmax(0,4fr) minmax(0,6fr); gap: clamp(1rem,3vw,3rem);
  padding: clamp(1.6rem,3vw,2.6rem) 0; border-top: 1px solid var(--line); align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font: 500 .8rem/1 var(--mono); color: var(--klein); letter-spacing: .04em; }
.step__t { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem,1rem+1.4vw,2rem); letter-spacing: -.015em; line-height: 1.05; }
.step__d { color: var(--ink-soft); }
@media (max-width: 720px){ .step { grid-template-columns: 3rem 1fr; } .step__d { grid-column: 2; } }

/* toolkit chips */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { font: 500 .76rem/1 var(--mono); letter-spacing: .02em; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); transition: .3s var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* big CTA band */
.cta-band { background: var(--ink); color: var(--paper); transition: box-shadow .6s linear; }
.is-night .cta-band { box-shadow: 0 -40px 80px rgba(27,31,230,.12); }
.cta-band .eyebrow { color: rgba(233,232,227,.6); }
.cta-band .eyebrow::before { background: var(--paper); }
.cta-band h2 { font-size: clamp(2.4rem, 1rem + 7vw, 6.5rem); line-height: .96; }
.cta-band .btn { background: var(--paper); color: var(--ink); }
.cta-band .btn:hover { background: var(--klein); color: var(--paper); }
.cta-band .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(233,232,227,.35); }
.cta-band .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .rule { background: rgba(233,232,227,.16); }

/* feature split (about/services) */
.split { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(1.5rem,4vw,4rem); align-items: start; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } }

/* stat / fact list */
.facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: clamp(1rem,2.4vw,2rem); }
.fact__n { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem,1rem+4vw,3.6rem); letter-spacing: -.03em; line-height: 1; }
.fact__l { font: 500 .74rem/1.4 var(--mono); letter-spacing: .04em; color: var(--mute); text-transform: uppercase; margin-top: .6rem; }

/* page hero (interior) */
.phero { padding-top: clamp(8rem, 16vh, 12rem); padding-bottom: clamp(2.5rem,5vw,4rem); }
.phero h1 { font-size: clamp(2.8rem, 1.4rem + 7vw, 7rem); line-height: .95; }
.phero__sub { margin-top: 1.4rem; }

/* service cards */
.svc { border-top: 1px solid var(--line); display:grid; gap:0; }
.svc-item { display:grid; grid-template-columns: 3.5rem minmax(0,4fr) minmax(0,6fr); gap: clamp(1rem,3vw,3rem); padding: clamp(1.6rem,3vw,2.6rem) 0; border-bottom: 1px solid var(--line); align-items:start; transition: background .35s var(--ease); }
.svc-item:hover { background: var(--paper-2); }
.svc-item__n { font: 500 .76rem/1 var(--mono); color: var(--mute); }
.svc-item__t { font-family: var(--display); font-weight:700; font-size: clamp(1.3rem,1rem+1.4vw,2rem); letter-spacing:-.015em; line-height:1.05; }
.svc-item ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-top:.9rem; }
.svc-item li { position:relative; padding-left:1.2rem; color: var(--ink-soft); font-size:.96rem; }
.svc-item li::before { content:""; position:absolute; left:0; top:.62em; width:.4rem; height:.4rem; background: var(--klein); }
@media (max-width:720px){ .svc-item { grid-template-columns: 2.5rem 1fr; } .svc-item__t ~ * , .svc-item ul { grid-column: 1 / -1; } }

/* contact form */
.form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: .5rem; }
.field label { font: 500 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 1.05rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: .7rem 0; transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--klein); }
.field textarea { resize: vertical; min-height: 120px; }
.field--row { display:grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width:560px){ .field--row { grid-template-columns: 1fr; } }
.form__note { font: 500 .76rem/1.5 var(--mono); color: var(--mute); }

.contact-grid { display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; } }
.channels { display:grid; gap:1.5rem; }
.channel { display:grid; gap:.3rem; padding-block: 1.1rem; border-top: 1px solid var(--line); }
.channel:last-child { border-bottom: 1px solid var(--line); }
.channel__k { font: 500 .72rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color: var(--mute); }
.channel__v { font-family: var(--display); font-weight:700; font-size: 1.4rem; letter-spacing:-.01em; }
.channel a.channel__v:hover { color: var(--klein); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem,6vw,5rem) 2rem; }
.footer__top { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.footer__big { font: 700 clamp(2.5rem,1rem+9vw,7rem)/.9 var(--display); letter-spacing:-.04em; }
.footer__big .dot { color: var(--klein); }
.footer__cols { display:grid; grid-template-columns: repeat(2,minmax(120px,auto)); gap: 2.5rem; }
.footer__col h4 { font: 500 .72rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color: var(--mute); margin-bottom:1rem; }
.footer__col a, .footer__col span { display:block; padding:.3rem 0; font-size:.95rem; }
.footer__col a:hover { color: var(--klein); }
.footer__bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(2.5rem,6vw,4.5rem); padding-top:1.5rem; border-top:1px solid var(--line-2); font: 500 .72rem/1.5 var(--mono); letter-spacing:.04em; color: var(--mute); text-transform:uppercase; }
@media (max-width: 640px){ .footer__top { flex-direction:column; } }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ============================================================
   GLOBE (make.html)
   ============================================================ */
.globe-section { overflow: hidden; }
.globe-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.globe-text { align-self: center; }
.globe-canvas {
  width: 100%;
  aspect-ratio: 1;
  max-height: 560px;
  position: relative;
}
.globe-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
@media (max-width: 820px) {
  .globe-layout { grid-template-columns: 1fr; }
  .globe-canvas { max-height: 400px; margin-inline: auto; max-width: 400px; }
}

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

/* ============================================================
   Embedded mode: when this site is framed inside
   ihatekali.com/websites.html, that page supplies the menu bar,
   so hide this site's own header and mobile drawer.
   The .is-embedded class is set in each page's <head>.
   ============================================================ */
html.is-embedded .nav,
html.is-embedded .menu { display: none !important; }