/* korriwan.com: the coming-soon page: its words and its links.
   Layout: one screen, one left edge. A clearing with patterned butterflies in
   the air; the words sit in the open sky on the left,
   each line written again underneath in a vine script, and the credits sit on a
   bar of frosted glass across the foot, with the land carrying on behind it. The
   light theme is day, the dark theme is dusk. */
@layer page {
  .words {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(16px, 2.2vw, 24px);
    padding-block: 24px clamp(96px, 18vh, calc(var(--land) * .78));
  }
  .words h1 {
    --lh: .95;
    --extra: .84;
    --vine-ink: .8;   /* under the headline the vine is large, so it sits back a little */
    font: 300 clamp(3.1rem, min(9vw, 12.5vh), 6.25rem) var(--display);
    letter-spacing: -.022em;
  }
  .socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: clamp(4px, 1vw, 12px);
  }
  /* each link wears one fairy's signature colour, and calls her butterfly */
  .socials li { --c: var(--aisha); }
  .socials [data-fairy="bloom"] { --c: var(--bloom); }
  .socials [data-fairy="stella"] { --c: var(--stella); }
  .socials [data-fairy="flora"] { --c: var(--flora); }
  .socials [data-fairy="musa"] { --c: var(--musa); }
  .socials [data-fairy="tecna"] { --c: var(--tecna); }
  .social {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 46px;
    padding: 0 19px 0 15px;
    border: 1px solid color-mix(in srgb, var(--c) 38%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) var(--tint-mix), var(--glass));
    box-shadow: var(--lift);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .social:hover,
  .social:focus-visible {
    border-color: color-mix(in srgb, var(--c) 62%, transparent);
    background: color-mix(in srgb, var(--c) var(--tint-mix-strong), var(--glass-strong));
  }
  .social .ico {
    flex: none;
    width: 19px;
    height: 19px;
    fill: color-mix(in srgb, var(--c) 78%, var(--ink));
  }
  .social .label {
    --lh: 1.3;
    --extra: .72;
  }
}