/* layout: black page; the first screen holds one © whose C is a 3D slab turning on its own axis; scrolling shrinks the mark and it leaves with the page; the name below opens from the centre; then a marquee and the links */
  :root {
    --bg: #060606;
    --fg: #f4f4f2;
    --mute: #8a8a87;
    --line: #262626;
    --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --big: min(80vw, 58svh, 28rem);
    --fs: clamp(2.5rem, 11.5vw, 4.25rem);
    color-scheme: dark;
  }

  * { box-sizing: border-box; }

  html, body { min-height: 100%; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 0 2rem;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
  }

  ::selection { background: var(--fg); color: var(--bg); }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .wrap {
    max-width: 34rem;
    margin-inline: auto;
  }

  .tiny {
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--mute);
  }

  /* first screen */
  .hero { height: 175svh; }
  .pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
  }

  .mark {
    position: relative;
    width: var(--big);
    height: var(--big);
    will-change: transform;
  }
  .mark svg, .mark canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
  }
  .mark canvas { display: none; }
  .mark.gl canvas { display: block; }
  .mark.gl #c { display: none; }
  .mark .l-fg { fill: var(--fg); }
  .mark .l-bg { fill: var(--bg); }

  /* small print in the corners of the first screen */
  .hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hud span { position: absolute; white-space: nowrap; }
  .hud .tl { top: calc(1.5rem + env(safe-area-inset-top, 0px)); left: 0; }
  .hud .tr { top: calc(1.5rem + env(safe-area-inset-top, 0px)); right: 0; }
  .wifi { display: inline-block; width: 0.85rem; height: 0.65rem; margin-left: 0.5em; vertical-align: -0.08em; overflow: visible; }
  .wifi path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .wifi circle { fill: currentColor; }
  .wifi .w2 { animation: weak 5s steps(1, end) infinite; }
  .wifi .w3 { opacity: 0.2; }
  @keyframes weak { 0% { opacity: 0.9; } 55% { opacity: 0.2; } 70% { opacity: 0.9; } 85% { opacity: 0.2; } }
  .hud .bl { bottom: calc(3.2rem + env(safe-area-inset-bottom, 0px)); left: 0; }
  .hud .br { bottom: calc(3.2rem + env(safe-area-inset-bottom, 0px)); right: -0.5em; }
  .hud .bc { bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding-left: 0.5em; }
  .chev { width: 1.9rem; height: 1.1rem; overflow: visible; }
  .chev path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; animation: cue 2.2s ease-in-out infinite; }
  .chev .c2 { animation-delay: 0.3s; }
  @keyframes cue { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

  /* the name: each letter is shifted toward the centre of its line by script, which reproduces the space-between line growing from the middle */
  .name {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 2.5vw, 1rem);
    padding-block: 8svh 12svh;
  }
  .line {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 800;
    font-size: var(--fs);
    line-height: 1;
    text-transform: uppercase;
  }
  .line span { display: block; will-change: transform; }

  /* band between the name and the links */
  .band {
    overflow: hidden;
    border-block: 1px solid var(--line);
    padding-block: 0.8rem;
    margin-bottom: 3rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .track {
    display: flex;
    width: max-content;
    animation: slide 28s linear infinite;
    will-change: transform;
  }
  .track span {
    flex: none;
    padding-right: 1.6em;
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
  }
  @keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

  /* links */
  .links {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
  }
  .links li { border-bottom: 1px solid var(--line); }

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0.25rem;
    color: var(--fg);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, padding 0.15s;
  }
  .row .left { display: flex; align-items: baseline; gap: 1.1rem; }
  .row .idx {
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: var(--mute);
  }
  .row .label {
    font-weight: 700;
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: letter-spacing 0.25s;
  }
  .row .meta {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
  }
  .arr {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
    transition: transform 0.2s;
  }
  a.row:hover, a.row:focus-visible {
    background: var(--fg);
    color: var(--bg);
    padding-inline: 1rem;
  }
  a.row:hover .label, a.row:focus-visible .label { letter-spacing: 0.34em; }
  a.row:hover .meta, a.row:focus-visible .meta,
  a.row:hover .idx, a.row:focus-visible .idx { color: var(--bg); }
  a.row:hover .arr, a.row:focus-visible .arr { transform: translate3d(2px, -2px, 0); }
  a.row:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

  .row.off { cursor: default; }
  .row.off .meta { color: #55554f; }

  .tail {
    min-height: 62svh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding-left: 0.5em;
    text-align: center;
  }
  .note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    margin-block: auto;
    padding-left: 0.5em;
    text-align: center;
  }
  .note .hi { color: var(--fg); }

  @media (prefers-reduced-motion: reduce) {
    .row, .row .label, .arr { transition: none; }
    .track { animation: none; }
    .wifi .w2 { animation: none; opacity: 0.2; }
    .chev path { animation: none; opacity: 0.8; }
    .hero { height: 100svh; }
  }

html {scroll-behavior:smooth} .hud .scroll-cue {position:absolute;pointer-events:auto;color:var(--mute);text-decoration:none} .scroll-cue:focus-visible {outline:1px solid var(--fg);outline-offset:8px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}