/* Home-page copy is independent of the canvas and its interaction area. */
.home-intro{
  --home-title-size:min(var(--mast-size, min(12.5vw, 64px)), calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 36px) / 6.15));
  position:absolute;
  z-index:auto;
  top:calc(env(safe-area-inset-top, 0px) + var(--ui-top) + 18px);
  left:calc(env(safe-area-inset-left, 0px) + 18px);
  max-width:calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 36px);
  pointer-events:none;
}
/* One scale controls the whole two-line masthead. All of its dimensions
   are em units, so a narrow viewport reduces the group without reflow. */
.masthead{
  /* Two pixels smaller at the 50px reference scale, then scale together.
     Bitrimus: final H right edge = 5.65em; T centre in WTF = .5625em.
     OrangeKid: visible subtitle width with tracking = 14.66em. */
  --wtf-size:calc(var(--home-title-size) * (var(--wtf-scale, .78) - .04));
  --wtf-left:calc(var(--home-title-size) * 5.65 - var(--wtf-size) * .5625);
  --subtitle-size:calc((var(--wtf-left) - var(--home-title-size) * .045) / 14.66);
  width:6.15em;
  font-size:var(--home-title-size);
  font-kerning:none;
}
.masthead-subline{
  position:relative;
  height:calc(var(--wtf-size) * .8);
  margin-top:-.28em;
  white-space:nowrap;
}
.masthead h1{
  position:relative;
  z-index:4;
  font-family:'Bitrimus', var(--font-head);
  font-size:1em;
  font-weight:400;
  line-height:.82;
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--mast-ink, #ffffff);
}
.masthead .wtf{
  position:absolute;
  left:var(--wtf-left);
  top:0;
  z-index:4;
  flex:none;
  font-family:'Bitrimus', var(--font-head);
  font-size:var(--wtf-size);
  letter-spacing:0;
  font-weight:400;
  line-height:.8;
  color:var(--wtf-ink, #f0a933);
}
.home-subtitle{
  position:absolute;
  z-index:1;
  /* Align visible ink, not the font's invisible left bearing or line box. */
  left:calc(var(--subtitle-size) * -.04);
  top:calc(var(--wtf-size) * .4517578125 - var(--subtitle-size) * .6895);
  flex:none;
  margin:0;
  font-family:'Orange Kid', var(--pixel);
  font-size:var(--subtitle-size);
  letter-spacing:-.025em;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  color:var(--subtitle-ink, #fff3ca);
}
.home-links{
  position:relative;
  z-index:4;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:2px;
  font-family:'Pixeloid Sans', var(--pixel);
  font-size:min(clamp(16px, 4vw, 18px), calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 48px) / 14.4));
  font-weight:400;
}
.home-links a{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  align-content:center;
  column-gap:.45em;
  width:fit-content;
  max-width:100%;
  min-height:44px;
  padding:8px;
  line-height:1.45;
  white-space:nowrap;
  pointer-events:auto;
  touch-action:manipulation;
}
.home-links a:focus-visible, .home-footer a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:0;
}
.home-links a:active, .home-footer a:active{ opacity:.7; }
@media (hover:hover){
  .home-footer a:hover{ text-decoration:underline; text-underline-offset:4px; }
}
.home-links .life-story-link{
  /* The whole invisible square belongs to this link, including empty space. */
  width:max-content;
  aspect-ratio:1;
  align-items:flex-start;
  background:transparent;
  border:0;
  text-decoration:none;
  margin-bottom:4px;
  font-size:inherit;
  color:var(--story-ink, #f0a933);
  white-space:nowrap;
}
/* The footer occupies its own space below the artwork, including the
   phone's bottom safe area. home.js measures it after fonts/settings load. */
:root{
  --footer-1-height:32px;
  --footer-2-height:36px;
  --footer-buffer-height:20px;
  --home-footer-height:calc(var(--footer-1-height) + var(--footer-2-height) + var(--footer-buffer-height));
}
#stage.pm-stage, .rain-layer, .scatter-layer{
  bottom:calc(var(--home-footer-height) + 18px);
}
.hint{
  top:var(--home-hint-top, calc(100% - var(--home-footer-height) - 32px));
  bottom:auto;
  z-index:4;
  transform:translateY(-50%);
}
.home-footer{
  --footer-font-size:min(14px, calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 26px) / 23.4));
  /* Spend the remaining width on link spacing, without shrinking the font. */
  --footer-link-gap:clamp(0px, calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 20px - var(--footer-font-size) * 23.4) / 5), 8px);
  position:fixed;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  /* The third band owns the bounded bottom spacing; do not add it twice. */
  padding:0;
  background:var(--footer-buffer-bg, #102a32);
  font-family:'Pixeloid Sans', var(--pixel);
  font-size:var(--footer-font-size);
  font-weight:400;
  color:var(--social-ink, #ffffff);
  pointer-events:none;
}
.home-footer nav{
  width:100%;
}
.home-footer .footer-row-1 a{ max-width:696px; margin:0 auto; min-height:var(--footer-1-height); }
.footer-buffer{
  height:var(--footer-buffer-height);
  background:var(--footer-buffer-bg, #102a32);
  pointer-events:none;
}
.social-links{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  column-gap:var(--footer-link-gap);
  list-style:none;
}
.footer-row{
  position:relative;
  min-width:0;
  padding-left:calc(env(safe-area-inset-left, 0px) + 10px);
  padding-right:calc(env(safe-area-inset-right, 0px) + 10px);
}
.footer-row-1{ color:var(--footer-1-ink, var(--social-ink)); background:var(--footer-1-bg, #14313a); }
.footer-row-2{ color:var(--footer-2-ink, var(--social-ink)); background:var(--footer-2-bg, #183740); }
.social-links li{ position:relative; flex:none; }
/* Five faint separators, with no trailing divider or spoken decoration. */
.social-links li + li::before{
  content:"";
  position:absolute;
  left:calc(var(--footer-link-gap) * -.5);
  top:50%;
  height:.85em;
  border-right:1px solid currentColor;
  opacity:.25;
  transform:translateY(-50%);
  pointer-events:none;
}
.home-footer a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:0;
  min-height:var(--footer-2-height);
  padding:2px .45em;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
  color:inherit;
  pointer-events:auto;
  touch-action:manipulation;
}
/* Effects remain visible behind the transparent Life Story hit area. */
.rain-layer, .scatter-layer{
  z-index:3;
}
@media (min-width:900px){
  .home-intro{ left:32px; }
}

/* A transparent copy of the live fixture sits above only the subtitle.
   The masthead's ancestors deliberately create no stacking context. */
.home-fixture{
  position:fixed;
  z-index:2;
  pointer-events:none;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.prefs .height-control{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.prefs .height-control input{ flex:1; min-width:0; width:0; }
.prefs .height-control output{ min-width:5ch; text-align:right; font-size:11px; }