html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

hr {
  margin: 0;
  border: none;
  border-top: 1px solid black;
}

p {
  font-size: 30px;
}

/* ── HEADER ── */
header {
  padding: 1.5rem 2rem 0;
}
h1 {
  margin: 0 0 1rem;
  font-size: 50px;
}

/* ── MAIN ── */
.site-main {
  flex: 1;
  position: relative;
  line-height: 1;
}

.main-wordmark {
  display: block;
  font-size: 38vw;
  font-weight: bold;
  line-height: 0.85;
  padding: 0 0.15rem;
  margin-top: 3vw;
  user-select: none;
  white-space: nowrap;
}

.fi {
  position: absolute;
  font-size: 1.4vw;
  line-height: 1.5;
}

/* all positions in vw — scale 1:1 with the wordmark */
.fi--time     { top: 3vw;  left: 1.5vw; }
.fi--date     { top: 3vw;  right: 1.5vw; text-align: right; }
.fi--status   { top: 20vw; left: 16vw; }
.fi--session  { top: 15vw; left: 36vw; }
.fi--desc     { top: 16vw; left: 58.5vw; }
.fi--links    { top: 14vw; left: 80vw; display: flex; flex-direction: column; }
.fi--location { top: 28vw; left: 47.5vw; }
.fi--stack    { top: 40vw; left: 1.5vw; }

/* ── FOOTER ── */
.site-footer {
  padding: 0 2rem 1rem;
  font-size: 30px;
}

.cf {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  min-height: 6rem;
  padding: 1rem 0;
  border-top: 1px solid black;
}

.cf a:nth-child(1) { grid-area: 1 / 1; align-self: start; }
.cf a:nth-child(2) { grid-area: 1 / 3; justify-self: end; align-self: start; }
.cf a:nth-child(3) { grid-area: 2 / 2; justify-self: center; align-self: center; }
.cf a:nth-child(4) { grid-area: 3 / 1; align-self: end; }
.cf a:nth-child(5) { grid-area: 3 / 3; justify-self: end; align-self: end; }

.cf-copy {
  font-size: 0.65rem;
  opacity: 0.35;
  text-align: center;
  padding-bottom: 0.5rem;
}


/* ══════════════════════════════════════
   MOBILE  ≤ 540px
   Desktop layout is untouched above.
   Only override what's needed below.
══════════════════════════════════════ */
@media (max-width: 540px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    min-width: 320px;
  }

  header { padding: 1rem 1rem 0; }
  h1     { font-size: 28px; margin-bottom: 0.5rem; }
  p      { font-size: 16px; margin: 0.4rem 0 0.6rem; }

  .site-main {
    flex: 0 0 auto;
    position: relative;
    padding: 0;
    overflow: hidden;
  }

  .main-wordmark {
    font-size: 90vw; /* JS will override per span */
    margin-top: 0;
    white-space: normal;
    line-height: 0.85;
    padding: 0;
  }

  .wm-1, .wm-2 { display: block; }

  /* all fi stay absolute, scaled to match 90vw wordmark */
  .fi { font-size: 3.5vw; }

  /*
    "23" row ≈ 0–77vw from main top
      "2": left half  — open loop top-right
      "3": right half — two open curves on left

    "AG" row ≈ 79–142vw from main top
      "A": left ~45% — triangle counter inside
      "G": right ~55% — bowl/C shape open left
  */

  /* corners — above letters */
  .fi--time     { top: 2vw;   left: 2vw; }
  .fi--date     { top: 2vw;   right: 2vw; }

  /* inside upper-left loop of "2" */
  /* inside upper open curve of "3" (right side) */
  .fi--session  { top: 23.5vw;  left: 54vw; }

  /* inside lower open curve of "3" */
  .fi--status   { top: 53vw;  left: 54vw; }

  /* between "23" and "AG" rows */
  .fi--desc     { top: 81.5vw;  left: 50%; transform: translateX(-50%); text-align: right; }

  /* inside "G" — right third, down one block */
  .fi--links    { top: 99vw;  left: 70vw; flex-direction: column; }

  /* inside "A" counter (triangle negative space) */
  .fi--location { top: 87vw;  left: 4vw; }

  /* below "A" legs, bottom-left */
  .fi--stack    { top: 132vw; left: 3vw; }

  .site-footer {
    font-size: 16px;
    padding: 0 1rem 1rem;
  }

  .cf {
    display: flex;
    flex-direction: column;
    min-height: auto;
    gap: 0.3rem;
    padding: 0.75rem 0;
  }

  /* reset grid placements */
  .cf a { grid-area: unset; justify-self: unset; align-self: unset; }

  .cf-copy { text-align: left; }
}