* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  background: #fff;
  overflow: hidden;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ————— background video: fills the screen at any size ————— */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
#bg.ready { opacity: 1; }

/* ————— overlay stage ————— */
.stage {
  position: fixed;
  inset: 0;
}
/* one design unit: 1% of the original 3024x1964 canvas, fitted to the screen —
   uses the width on tall windows and the height on wide ones, so the whole
   composition always fits without crowding */
:root { --u: min(1vw, 1.54vh); }

.el {
  position: absolute;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  width: calc(var(--w) * var(--u));
}

/* ————— each element, individually placed —————
   left/top/right/bottom are % of the screen, --w is width in design units.
   move or resize anything by editing numbers here — or press E in the browser,
   drag things around, and the new CSS is copied to your clipboard. */

/* the title cluster is anchored in design units so "k ian ludwig" stays tight */
#k-lines        { left: calc(0.6 * var(--u));  top: 5.1%;  --w: 11.1; z-index: 6; }
#title-ian      { left: calc(9.1 * var(--u));  top: 5.1%;  --w: 19.2; z-index: 5; }
#title-ludwig   { left: calc(29.9 * var(--u)); top: 1.1%;  --w: 42.5; z-index: 5; }
#asterisks      { right: 0%;   top: 1.4%;   --w: 27.8; z-index: 4; }
#page-pill      { left: calc(0.8 * var(--u));  top: 1.1%;  --w: 26.6; z-index: 7; }
#jp-subtitle    { left: calc(8.9 * var(--u));  top: 20.4%; --w: 26.1; z-index: 4; }
#exclusive-feed { left: calc(45.3 * var(--u)); top: 20.3%; --w: 18.0; z-index: 4; }
#jp-vertical    { right: 0.7%; top: 12.5%;  --w: 5.1;  z-index: 3; }
#newyork2       { left: 1.3%;  top: 52.1%;  --w: 2.5;  z-index: 3; }
#barcode        { left: 0.1%;  bottom: 4.2%; --w: 5.7; z-index: 3; }
#star           { right: 1.5%; bottom: 1.6%; --w: 13.1; z-index: 6; }
#custom-bar     { left: 7.1%;  bottom: 3.3%; --w: 38.2; z-index: 4; }

/* ————— nav tree (right side, above everything) ————— */
.tree {
  position: fixed;
  /* anchored in design units just right of the exclusive/3am block (ends ~63u),
     so they can never collide at any screen size */
  left: calc(65.5 * var(--u));
  top: 26%;
  z-index: 40;
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Text Pro',
               'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* sized in design units (--u) like every other element, so it scales with
     the whole composition when the window changes — same place, no overlap */
  font-size: calc(1.55 * var(--u));
  font-weight: 500;
  line-height: 1.35;   /* tight: the wrap hugs the text */
}
.tree ul { list-style: none; }
.tree li { margin: 0; }  /* blocks stack flush */
.tree .branch { margin-bottom: .45em; transition: opacity .25s; }
.tree .branch:last-child { margin-bottom: 0; }
.tree .branch > ul { padding-left: .85em; }
/* words on a highlighted wrapped background */
.tree .cat,
.tree a {
  display: inline-block;
  padding: 0 .14em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s, text-shadow .12s;
}
.tree .cat {
  color: #1a10d8;
  background: rgba(255, 255, 255, .5);    /* same wrap as the items */
}
.tree a {
  color: #1a10d8;
  background: rgba(255, 255, 255, .5);    /* white wrap */
}
.tree a i {
  font-style: normal;
  color: #1a10d8;
  opacity: .45;
}
/* ——— done sections ([information]): clear at rest, letters blur on hover
   (the highlight block stays crisp — nothing looks pressed) ——— */
.tree .done :is(.cat, a):hover {
  color: transparent;
  text-shadow: 0 0 .19em rgba(26, 16, 216, .95);
}
.tree .done a:hover i {
  color: transparent;
  opacity: 1;
  text-shadow: 0 0 .19em rgba(26, 16, 216, .45);
}

/* ——— work-in-progress sections: blurred at rest… ——— */
.tree .wip .cat,
.tree .wip a {
  color: transparent;
  text-shadow: 0 0 .19em rgba(26, 16, 216, .95);
  cursor: default;
  position: relative;
}
.tree .wip a i {
  color: transparent;
  opacity: 1;
  text-shadow: 0 0 .19em rgba(26, 16, 216, .45);
}
/* …and on hover the blur clears into "loading..." */
.tree .wip :is(.cat, a):hover {
  text-shadow: none;
}
.tree .wip :is(.cat, a):hover i { text-shadow: none; }
.tree .wip :is(.cat, a):hover::after {
  content: 'loading...';
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 .14em;
  color: #1a10d8;
  text-shadow: none;
}

/* ————— sound toggle ————— */
#sound {
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 50;
  font: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
}

/* ————— who_am_i overlay: light blur over everything, email types out ————— */
#bg, .stage, .tree { transition: filter .45s ease; }
body.whoami :is(#bg, .stage, .tree, #sound) { filter: blur(5px); }
#whoami {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#whoami.open { display: flex; }
#typeline {
  font-family: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk Text Pro',
               'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: min(6.5vw, 10vh);
  color: #1a10d8;
  background: rgba(255, 255, 255, .5);
  padding: .02em .08em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s ease;
}
/* click-to-copy confirmation: the wrap goes pale green */
#typeline.copied { background: rgba(193, 242, 201, .85); }
/* one smooth sweep: wrap and email reveal together, left to right */
#typeline {
  animation: sweep 1.15s cubic-bezier(.65, 0, .25, 1) both;
}
@keyframes sweep {
  from { clip-path: inset(-10% 100% -10% 0); }
  to   { clip-path: inset(-10% -6% -10% 0); }
}
/* big block cursor at the end — solid through the reveal, then blinks */
#typeline .cursor {
  display: inline-block;
  width: .55em;
  height: 1em;
  margin: 0 .04em;
  vertical-align: -.12em;
  background: #1a10d8;
  animation: caret 1.1s steps(1) infinite 1.3s;
}
@keyframes caret { 50% { opacity: 0; } }

/* ————— edit mode ————— */
body.editing .el { outline: 1px dashed rgba(255, 0, 128, .8); cursor: grab; }
body.editing .el:active { cursor: grabbing; }
#edit-hint {
  position: fixed;
  left: 16px;
  bottom: 14px;
  z-index: 50;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

/* ————— MOBILE (≤768px wide) — its own layout, fully independent —————
   edits here never affect the desktop view above. edit mode in a narrow
   window copies CSS already wrapped in this media query. */
@media (max-width: 768px) {
  /* capped by height as well: the whole stack (title→tree→feed→bottom row)
     is ~100 units tall, so it always fits any phone proportion */
  :root { --u: min(1.8vw, 0.95vh); }

  /* the whole top cluster is chained in design units from the pill down,
     so pill→kian→ludwig→japanese→3am stay linked at any screen height */
  #page-pill      { left: calc(1.7 * var(--u)); top: 1.5%; --w: 36; }
  #k-lines        { left: calc(1.5 * var(--u)); top: calc(1.5% + 3.3 * var(--u)); --w: 11; }
  #title-ian      { left: calc(10 * var(--u));  top: calc(1.5% + 3.3 * var(--u)); --w: 20; }
  #asterisks      { left: calc(30 * var(--u));  top: calc(1.5% + 3.5 * var(--u)); --w: 24; }
  #title-ludwig   { left: calc(3.5 * var(--u)); top: calc(1.5% + 11.5 * var(--u)); --w: 48; }
  #jp-subtitle    { left: calc(4.5 * var(--u)); top: calc(1.5% + 29.5 * var(--u)); --w: 36; }
  #exclusive-feed { left: calc(14 * var(--u)); top: calc(1.5% + 87 * var(--u)); --w: 18; }
  #jp-vertical    { right: 1%;  top: calc(1.5% + 38 * var(--u)); --w: 4; }
  #newyork2       { left: 1.5%; top: calc(1.5% + 60 * var(--u)); --w: 3; }
  #barcode        { left: 0.8%; bottom: 8%;  --w: 5.5; }  /* raised clear of the bar */
  #star           { right: 2%;  bottom: 2%;  --w: 15; }
  #custom-bar     { left: 2%;   bottom: 2.8%; --w: 38; }  /* narrower: no star overlap */

  /* sound chip: bottom-left on mobile, out of the star/bar corner */
  #sound          { left: 10px; right: auto; bottom: 3px; }

  /* nav tree: its own clear band under the title cluster */
  .tree {
    left: calc(7 * var(--u));
    right: auto;
    top: calc(1.5% + 37 * var(--u));
    font-size: calc(2.3 * var(--u));
    line-height: 1.35;
  }
  .tree li { margin: 0; }
  .tree .branch { margin-bottom: .4em; }
  .tree .branch > ul { padding-left: .8em; }
}