/*
  HOMEPAGE ONLY — the spiral hero.
*/
  /* ---------- Hero ---------- */

  .hero {
    position: relative;
    width: 100%;
    height: 100svh;      /* svh avoids the mobile browser-chrome jump */
    overflow: hidden;
  }

  /* The stage is the coordinate space the spiral math works in.
     Its centre is the centre of the hurricane. */
  .hero__stage {
    position: absolute;
    inset: 0;
  }

  /* One thumbnail. Positioned at 0,0 and pulled back by half its own size,
     so a plain translate(x, y) puts its CENTRE on the point we calculate,
     and scale() grows it from that centre. */
  .tile {
    position: absolute;
    left: 0;
    top: 0;
    /* Set from spiral.js as --z. Going through a custom property rather than an
       inline z-index is what lets :hover below lift the tile above its neighbours —
       an inline style would beat any rule here. */
    z-index: var(--z, 1);
    display: block;
    aspect-ratio: 10 / 7;         /* matches the 4448x3096 open-gate stills */
    will-change: transform, opacity;
    opacity: 0;
    text-decoration: none;
    outline: none;
  }

  .tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f0f0f0;
  }

  /* A hovered tile jumps to the front so its label, which is much wider than the
     tile itself, is not painted under the neighbouring thumbnails. */
  .tile:hover,
  .tile:focus-visible { z-index: 1000; }

  /* The label lands on whatever frame is underneath, which ranges from near-black to
     near-white, so it needs a shadow to stay readable. But a text-shadow on the label
     itself spills onto the page background either side of the thumbnail, because the
     label is wider than the tile. So the shadow lives on its own copy of the text,
     inside a box clipped to the thumbnail: transparent glyphs, shadow only. The real
     label paints crisply on top, unshadowed. */
  .tile__shadow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    /* Default: clipped to this tile only. spiral.js replaces this while the tile is
       hovered with the union of EVERY thumbnail, so the shadow also lands where the
       label crosses its neighbours — which is where legibility is worst. If the
       script ever fails to run, this fallback still keeps the shadow off the page
       background. */
    clip-path: inset(0);
  }

  .tile__shadow > span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(0.1em);
    font-family: "5by7", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--type-label);
    line-height: 1;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: transparent;
    /* +40% strength. Only affects the clipped layer, so it darkens the frame behind
       the type without touching the page background. */
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.49), 0 0 2px rgba(0, 0, 0, 0.35);
  }

  .tile:hover .tile__shadow,
  .tile:focus-visible .tile__shadow { opacity: 1; }

  /* Keyboard focus needs to be visible even mid-flight. */
  .tile:focus-visible .tile__img {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
  }

  /* Sits centred ON the thumbnail rather than below it. The label is wider than
     the tile, so the box is allowed to overflow on both sides and stays centred by
     translating back half its own width. */
  .tile__label {
    position: absolute;
    left: 50%;
    top: 50%;
    /* translate centres the BOX; the two extra nudges centre the INK inside it.
       Horizontally the text-indent below balances the trailing letter-space.
       Vertically the ink sits high in the box (cap 0.7em under a 0.75em ascent), so
       it needs pushing down by half the difference. */
    transform: translate(-50%, -50%) translateY(0.1em);
    font-family: "5by7", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--type-label);
    line-height: 1;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--fg);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    white-space: nowrap;
  }

  .tile:hover .tile__label,
  .tile:focus-visible .tile__label { opacity: 1; }

  /* Thumbnail labels deliberately do NOT turn pink on hover — they stay var(--fg),
     because the whole spiral would flicker pink as tiles pass under the cursor.
     They turn pink on press instead, as click feedback. */
  .tile:active .tile__label { color: var(--link-hover); }

  /* Name sits over the middle of the spiral. */
  /* The name is not shown — the spiral is the whole homepage. The <h1> is kept in
     the markup but visually hidden, so the page still has a heading for screen
     readers and search engines. Delete the element too if that is not wanted. */
  .hero__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }


  /* Shown until every thumbnail has loaded. */
  .hero__loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* was a stray 11px, which was both out of step with everything else and off
       the 5by7 dot grid */
    font-size: var(--type-nav);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    transition: opacity 0.4s ease;
  }

  .hero.is-ready .hero__loading { opacity: 0; }

  /* Fallback if JS never runs: a plain, readable grid of links. */
  .no-js-list {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 40px;
    align-content: start;
    overflow: auto;
  }

  .hero.is-enhanced .no-js-list { display: none; }