/* korriwan.com: the coming-soon page. */
/* Layout: one screen, one left edge. The same clearing as the full site, 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. */
@font-face {
  /* Tendrilis, a vine script by Anomalis. Its guide allows this use; it is credited at the foot of the page. */
  font-family: "Tendrilis";
  src: url("../fonts/Tendrilis-v2.1-Regular.woff") format("woff");
  font-display: block;
}
:root {
  color-scheme: light;

  /* ground and ink */
  --ground: #EDF2EE;
  --ink: #15211A;
  --ink-2: rgba(21, 33, 26, .68);
  --line: rgba(21, 33, 26, .11);
  --tint: .6;                 /* how tinted the glass is, from 0 (clear) to 1 (solid); the slider in the header sets it */
  --tint-mix: 17%;            /* a link's share of its fairy colour at that tint */
  --tint-mix-strong: 28%;
  --glass: rgba(244, 248, 244, calc(.12 + var(--tint) * .8));
  --glass-strong: rgba(248, 250, 247, calc(.34 + var(--tint) * .8));
  --sheen: rgba(255, 255, 255, .6);
  --shade: rgba(21, 33, 26, .24);
  --spark: #FFFFFF;
  --edge: #1D2823;
  --focus: #2C6A4F;

  /* the clearing */
  --sky-1: #CCD8F2;
  --sky-2: #E0EBEA;
  --sky-3: #F6E8DB;
  --sky-4: #F3EBDD;
  --ridge-1: #B6C7DA;
  --ridge-2: #9DBBB8;
  --ridge-3: #80A594;
  --ridge-4: #628A72;
  --orb: #FFFCEF;
  --orb-bloom: rgba(255, 238, 200, .95);
  --orb-far: rgba(255, 243, 220, .6);
  --mote: #B98E2E;
  --star: #F3F0FF;
  --night: 0;

  /* the butterflies: one for each Winx fairy, in her colours. The first colour of
     each set is her signature one; it also tints a link and the glow at dusk. */
  --bloom: #2FA4E7;
  --bloom-flame: #F26B21;
  --bloom-ember: #D62E2E;
  --bloom-gold: #FFC83D;
  --stella: #F7931E;
  --stella-gold: #FFD447;
  --stella-pink: #F06BA8;
  --flora: #F173AC;
  --flora-rose: #D23F8E;
  --flora-leaf: #56B947;
  --musa: #E1273D;
  --musa-magenta: #C3298E;
  --musa-night: #1F2B7A;
  --tecna: #9A6BE1;
  --tecna-green: #3FD18C;
  --tecna-pink: #E052A2;
  --aisha: #17B6A0;
  --aisha-aqua: #8DE8DC;
  --aisha-deep: #0C6C74;
  --aisha-pink: #F58EC4;
  --roxy: #8FD64F;
  --roxy-mint: #4FCFA0;
  --roxy-lime: #E6EE62;
  --roxy-berry: #C4409E;
  --roxy-plum: #4A2A7A;
  --roxy-pink: #F7A7CF;
  /* the pixies, each in the colours she wears */
  --lockette: #F25CA2;
  --lockette-deep: #B4247A;
  --lockette-teal: #2DB5A3;
  --lockette-sky: #A8DCF7;
  --lockette-key: #D4E552;
  --amore: #F9A9C6;
  --amore-wine: #A21D5B;
  --amore-rose: #E2334F;
  --amore-leaf: #5EBB66;
  --chatta: #F4A928;
  --chatta-mint: #A9E57A;
  --chatta-sky: #4AA8EA;
  --chatta-plum: #9A68D6;
  --tune: #C8A6F0;
  --tune-violet: #5C3BB0;
  --tune-blue: #4A7FE6;
  --tune-rose: #E052A6;
  --digit: #3A86E8;
  --digit-ice: #AEDDFF;
  --digit-deep: #1B3C9C;
  --digit-volt: #FFE24A;
  --piff: #E8689B;
  --piff-cream: #FFF0CF;
  --piff-wine: #9A2948;
  --cherie: #6A7BE0;
  --cherie-sky: #A9D6FA;
  --cherie-pink: #F8AFCB;
  --cherie-rose: #EE5A80;
  --cherie-sun: #F6D472;
  --cherie-mint: #8EDDA2;
  --caramel: #F28A2E;
  --caramel-toffee: #6E4322;
  --caramel-lime: #B8E245;
  --caramel-gold: #FFD64F;
  --caramel-candy: #F06BA8;
  /* the flowers along the foot of the clearing, in pastels that sit quietly against the land: their
     stems and leaves, then each kind's own colours. At dusk they take on some of the night: every
     one of these is mixed with --nightfall, by the share --veil, which is nothing by day. */
  --nightfall: #1B1D47;
  --veil: 0%;
  --stem: color-mix(in srgb, #7C9F86, var(--nightfall) var(--veil));
  --leaf: color-mix(in srgb, #AECFAC, var(--nightfall) var(--veil));
  --sakura: color-mix(in srgb, #FBDAE4, var(--nightfall) var(--veil));
  --sakura-heart: color-mix(in srgb, #EE9DBA, var(--nightfall) var(--veil));
  --sakura-twig: color-mix(in srgb, #A48A86, var(--nightfall) var(--veil));
  --bluebell: color-mix(in srgb, #A9C2F6, var(--nightfall) var(--veil));
  --bluebell-deep: color-mix(in srgb, #7F9BE3, var(--nightfall) var(--veil));
  --amaryllis: color-mix(in srgb, #F6BFD3, var(--nightfall) var(--veil));
  --amaryllis-deep: color-mix(in srgb, #EA98B6, var(--nightfall) var(--veil));
  --amaryllis-throat: color-mix(in srgb, #FFF7EE, var(--nightfall) var(--veil));
  --amaryllis-anther: color-mix(in srgb, #9A5C72, var(--nightfall) var(--veil));
  --amaryllis-stem: color-mix(in srgb, #A98A97, var(--nightfall) var(--veil));
  --hortensia: color-mix(in srgb, #B7BCF2, var(--nightfall) var(--veil));
  --hortensia-lilac: color-mix(in srgb, #CEB7EE, var(--nightfall) var(--veil));
  --hortensia-deep: color-mix(in srgb, #9390D6, var(--nightfall) var(--veil));
  /* the signs: the infinity's two colours, the schnauzer's silver, the beagle's brownish orange and the ducks' white */
  --sign-blue: #3F9BE2;
  --sign-pink: #E85FA3;
  --sign-silver: #7F8A9C;
  --sign-amber: #BF7235;
  --sign-white: #FFFFFF;
  --halo-o: .12;

  /* type: Apple's 17-point body under a storybook serif */
  --display: "Cormorant Infant", "Cormorant Garamond", ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 40px);
  --column: 1040px;
  --land: clamp(210px, 28vw, 320px);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* frosted glass, shared by the links, the toggles and the footer bar */
  --frost: blur(18px) saturate(1.6);
  --lift: inset 0 1px 0 var(--sheen), 0 10px 24px -16px var(--shade);
  --under: 400px;   /* how far the sky and land run on below the clearing, behind the footer bar */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1512;
    --ink: #EAF0EA;
    --ink-2: rgba(234, 240, 234, .7);
    --line: rgba(234, 240, 234, .12);
    --glass: rgba(16, 25, 21, calc(.08 + var(--tint) * .7));
    --glass-strong: rgba(19, 29, 25, calc(.32 + var(--tint) * .7));
    --sheen: rgba(255, 255, 255, .12);
    --shade: rgba(2, 5, 4, .6);
    --edge: #141A30;
    --focus: #8FE3CF;
    --sky-1: #0C122E;
    --sky-2: #24224A;
    --sky-3: #523E5E;
    --sky-4: #87596A;
    --ridge-1: #3A345C;
    --ridge-2: #2A2C4B;
    --ridge-3: #1B2637;
    --ridge-4: #121E21;
    --veil: 30%;
    --orb: #F2F0E4;
    --orb-bloom: rgba(170, 162, 255, .22);
    --orb-far: rgba(150, 140, 255, .1);
    --mote: #F7E8A6;
    --sign-blue: #9BD6FF;
    --sign-pink: #FFA6D1;
    --sign-silver: #DCE2EC;
    --sign-amber: #F0A868;
    --night: 1;
    --halo-o: .36;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0D1512;
  --ink: #EAF0EA;
  --ink-2: rgba(234, 240, 234, .7);
  --line: rgba(234, 240, 234, .12);
  --glass: rgba(16, 25, 21, calc(.08 + var(--tint) * .7));
  --glass-strong: rgba(19, 29, 25, calc(.32 + var(--tint) * .7));
  --sheen: rgba(255, 255, 255, .12);
  --shade: rgba(2, 5, 4, .6);
  --edge: #141A30;
  --focus: #8FE3CF;
  --sky-1: #0C122E;
  --sky-2: #24224A;
  --sky-3: #523E5E;
  --sky-4: #87596A;
  --ridge-1: #3A345C;
  --ridge-2: #2A2C4B;
  --ridge-3: #1B2637;
  --ridge-4: #121E21;
  --veil: 30%;
  --orb: #F2F0E4;
  --orb-bloom: rgba(170, 162, 255, .22);
  --orb-far: rgba(150, 140, 255, .1);
  --mote: #F7E8A6;
  --sign-blue: #9BD6FF;
  --sign-pink: #FFA6D1;
  --sign-silver: #DCE2EC;
  --sign-amber: #F0A868;
  --night: 1;
  --halo-o: .36;
  color-scheme: dark;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.47 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
vine-text { display: block; }
::selection { background: color-mix(in srgb, var(--aisha) 34%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .9s; }
.wrap {
  width: 100%;
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* the page is the clearing with the footer bar across its foot. The clearing's sky
   and land run on below it (by --under), so the bar has something to frost. */
.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.scene {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sky {
  --h: calc(100% - var(--under));   /* the height of the clearing itself */
  position: absolute;
  inset: 0 0 calc(-1 * var(--under)) 0;
  background: linear-gradient(180deg, var(--sky-1) 0, var(--sky-2) calc(var(--h) * .44), var(--sky-3) calc(var(--h) * .76), var(--sky-4) var(--h));
}
.orb {
  position: absolute;
  top: clamp(104px, 11vw, 122px);
  right: clamp(7%, 14vw, 17%);
  width: clamp(54px, 6vw, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, var(--spark), var(--orb) 64%);
  box-shadow: 0 0 70px 26px var(--orb-bloom), 0 0 240px 96px var(--orb-far);
}
.orb::after {
  content: "";
  position: absolute;
  inset: clamp(-72px, -6vw, -40px);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    transparent 68%,
    color-mix(in srgb, var(--aisha) 18%, transparent) 76%,
    color-mix(in srgb, var(--tecna) 16%, transparent) 85%,
    color-mix(in srgb, var(--flora) 10%, transparent) 93%,
    transparent 100%);
  opacity: var(--night);
}
/* the signs: small drawings in starlight, spread about the page, each in a part of its own. They
   are there to be found, not noticed: small and dim, and a little brighter while the pointer is
   on them. The first is an infinity, half blue and half pink, with a four-pointed star of the
   other colour beyond each open end. The script puts it on the left of the sky, wherever the
   wordmark and the heading leave room. */
.sign {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(36px, 3.2vw, 46px);
  overflow: visible;
  transform: translate(-50%, -50%) rotate(-6deg);
  opacity: calc(.2 + var(--night) * .12);
  transition: opacity .6s ease;
  pointer-events: none;
}
.sign.is-lit { opacity: calc(.4 + var(--night) * .16); }
.sign.is-away { display: none; }
/* then two dogs, each drawn in lines of one colour with a glow of its own. The schnauzer, in silver,
   stands beside the sun or moon and looks at it. The beagle, in a brownish orange, stands over the
   hills on the right, turned round to face into the page. */
.sign.dog {
  width: clamp(44px, 4.2vw, 60px);
  transform: translate(-50%, -50%);
}
.sign.schnauzer { color: var(--sign-silver); }
.sign.beagle {
  transform: translate(-50%, -50%) scaleX(-1);
  color: var(--sign-amber);
}
/* and a family of four white ducks, walking in a line over the hills on the left. White hardly
   shows against the pale land by day, so by day they are let through more strongly than the rest. */
.sign.ducks {
  width: clamp(78px, 7.6vw, 108px);
  transform: translate(-50%, -50%);
  color: var(--sign-white);
  opacity: calc(.7 - var(--night) * .38);
}
.sign.ducks.is-lit { opacity: calc(.95 - var(--night) * .39); }
.sign.dog .lines,
.sign.ducks .lines { stroke: currentColor; }
.sign.dog .patch { fill: currentColor; }
.sign .blue { fill: var(--sign-blue); stop-color: var(--sign-blue); }
.sign .pink { fill: var(--sign-pink); stop-color: var(--sign-pink); }
.sign .lines path { vector-effect: non-scaling-stroke; }
.sign .haze {
  opacity: calc(.3 + var(--night) * .3);
  transition: opacity .6s ease;
}
.sign.is-lit .haze { opacity: calc(.5 + var(--night) * .4); }
.sign .glow { opacity: calc(.2 + var(--night) * .5); }
@media (prefers-reduced-motion: no-preference) {
  .sign .st { animation: twinkle var(--t) ease-in-out var(--d) infinite alternate; }
}
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sign, .sign .haze { transition: none; }
}
.ridges {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  width: 100%;
  height: var(--land);
  overflow: visible;
}
.rs-1 { stop-color: var(--ridge-1); }
.rs-2 { stop-color: var(--ridge-2); }
.rs-3 { stop-color: var(--ridge-3); }
.rs-4 { stop-color: var(--ridge-4); }
.rs-fade { stop-opacity: .3; }
.mist {
  --h: calc(var(--land) * .7);   /* its depth inside the clearing */
  position: absolute;
  inset: auto 0 calc(-1 * var(--under)) 0;
  height: calc(var(--h) + var(--under));
  background: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--ground) 46%, transparent) calc(var(--h) * .52),
    color-mix(in srgb, var(--ground) 80%, transparent) var(--h));
}
.air {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the flowers along the foot of the clearing: sakura, Spanish bluebells, amaryllis and hortensias.
   The garden is a line along the ground. Each plant stands on it in a box of its own and sways
   from its foot; the stems below the ground stand still, behind the footer bar. */
.garden {
  --s: 1;   /* how large the plants are drawn; the script makes them smaller on a narrow screen */
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  isolation: isolate;
  pointer-events: none;
}
.garden .roots {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: var(--under);
}
.plant {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}
.plant svg {
  position: absolute;
  left: calc(var(--s) * -70px);
  bottom: 0;
  display: block;
  width: calc(var(--s) * 140px);
  height: calc(var(--s) * 180px);
  overflow: visible;
}
/* the tall ones stand at the back */
.plant.amaryllis { z-index: 1; }
.plant.hortensia { z-index: 2; }
.plant.bluebell { z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .plant {
    animation: sway var(--t) ease-in-out var(--d) infinite alternate;
    will-change: transform;
  }
}
@keyframes sway {
  from { transform: rotate(calc(var(--lean) * -1)); }
  to { transform: rotate(var(--lean)); }
}
.garden .stalk,
.garden .twig {
  fill: none;
  stroke: var(--stem);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.garden .stalk.fine { stroke-width: .9; }
.garden .stalk.stout { stroke-width: 3.4; }
.garden .twig {
  stroke: var(--sakura-twig);
  stroke-width: 1.3;
}
.garden .twig.stout { stroke-width: 2.3; }
.garden .stalk.dusky { stroke: var(--amaryllis-stem); }   /* the bare stem of the belladonna lily */
.sakura .buds { fill: var(--sakura-heart); }
.bluebell .buds { fill: var(--bluebell-deep); }
.amaryllis .bud {
  fill: var(--amaryllis);
  stroke: var(--amaryllis-deep);
  stroke-width: .7;
}
.garden .funnel { fill: var(--amaryllis-deep); }
.garden .mop { fill: color-mix(in srgb, var(--p, var(--hortensia)) 55%, var(--hortensia-deep)); }
.garden .blush { stop-color: var(--sakura-heart); }
.garden .throat-white { stop-color: var(--amaryllis-throat); }
.garden .throat-pink { stop-color: var(--amaryllis); }
.garden .throat-deep { stop-color: var(--amaryllis-deep); }
/* the parts of a flower head. The heads are set out with <use>, and a copy made by <use> is
   only styled by a rule that names its own class and nothing above it, so these stand alone. */
.leaf {
  fill: var(--leaf);
  stroke: var(--stem);
  stroke-width: .6;
  stroke-linejoin: round;
}
.vein {
  fill: none;
  stroke: var(--stem);
  stroke-width: .5;
  stroke-linecap: round;
  opacity: .7;
}
/* sakura */
.petals {
  fill: var(--sakura);
  stroke: color-mix(in srgb, var(--sakura-heart) 60%, transparent);
  stroke-width: .5;
  stroke-linejoin: round;
}
.stamens {
  fill: none;
  stroke: var(--sakura-heart);
  stroke-width: .8;
  stroke-linecap: round;
  stroke-dasharray: .01 1.695;   /* a ring of seven dots */
}
/* Spanish bluebells */
.bell {
  fill: var(--bluebell);
  stroke: var(--bluebell-deep);
  stroke-width: .5;
  stroke-linejoin: round;
}
.bell-line {
  fill: none;
  stroke: var(--bluebell-deep);
  stroke-width: .6;
  stroke-linecap: round;
  opacity: .7;
}
/* amaryllis: the tepals are filled from the throat outwards, white to pink, by a gradient the script draws */
.tepal {
  stroke: color-mix(in srgb, var(--amaryllis-deep) 70%, transparent);
  stroke-width: .4;
  stroke-linejoin: round;
}
.streak {
  fill: var(--amaryllis-deep);
  opacity: .6;
}
.filaments,
.anthers {
  fill: none;
  stroke: var(--amaryllis-throat);
  stroke-width: .6;
  stroke-linecap: round;
}
.anthers {
  stroke: var(--amaryllis-anther);
  stroke-width: 1;
}
/* hortensias: every floret is handed its own blend of the head's two colours as --p */
.floret {
  fill: var(--p, var(--hortensia));
  stroke: color-mix(in srgb, var(--p, var(--hortensia)) 50%, var(--hortensia-deep));
  stroke-width: .4;
  stroke-linejoin: round;
}
.eye { fill: var(--hortensia-deep); }

/* the butterflies: one kind for each fairy and a smaller one for each pixie, each with its own wing pattern and colours, flying behind the words */
.flock {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bf {
  --b: .8;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.bf .halo {
  position: absolute;
  left: calc(var(--w) * -.85);
  top: calc(var(--w) * -.85);
  width: calc(var(--w) * 1.7);
  height: calc(var(--w) * 1.7);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 64%);
  opacity: calc(var(--halo-o) * var(--b));
}
.bf .wing {
  position: absolute;
  left: 0;
  top: calc(var(--w) * -.5);
  width: calc(var(--w) * .5);
  height: var(--w);
  transform-origin: 0 50%;
  transform: scaleX(1);
  will-change: transform;
}
.bf .wing.wl { transform: scaleX(-1); }
.bf .body {
  position: absolute;
  left: calc(var(--w) * -.08);
  top: calc(var(--w) * -.5);
  width: calc(var(--w) * .16);
  height: var(--w);
}
.bf svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bf .o {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.bf .b { fill: var(--edge); }
/* a pixie is small, so her lines are drawn a little heavier to hold together */
.bf.pixie .o { stroke-width: 2; }
.bf.pixie .a { stroke-width: 1.7; }
.bf .a {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .bf {
    animation: wake 1.5s ease backwards;
    animation-delay: calc(.2s + var(--i) * .16s);
  }
  .bf .wing { animation: flap-r var(--flap) ease-in-out infinite; }
  .bf .wing.wl { animation-name: flap-l; }
  .bf.is-called .wing { animation-duration: calc(var(--flap) * .55); }
}
@keyframes wake { from { opacity: 0; } }
@keyframes flap-r { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }
@keyframes flap-l { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-.2); } }

/* the words */
.top {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 20px;
}
.mark {
  --lh: 1;
  --extra: .66;
  font: 500 2.25rem var(--display);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.tools {
  display: flex;
  justify-content: flex-end;
}
.tools > * + * { margin-left: 8px; }
.tool {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: var(--lift);
  cursor: pointer;
  transition: background-color .2s ease, width .4s var(--ease), margin .4s var(--ease), opacity .25s ease .1s, visibility 0s;
}
.tool:hover { background: var(--glass-strong); }
/* on a narrow screen the two round toggles step aside while the tint slider is open */
.tools[data-tight] > .tool {
  width: 0;
  margin-left: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: width .4s var(--ease), margin .4s var(--ease), opacity .15s ease, visibility 0s .4s;
}
.tool svg,
.tint-btn svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the glass tint: a round button that opens out, to the left, into a slider */
.tint {
  display: flex;
  flex-direction: row-reverse;   /* the button keeps its place on the right */
  align-items: center;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: var(--lift);
  transition: width .5s cubic-bezier(.3, 1.25, .4, 1), background-color .2s ease;
}
.tint[data-open] { width: var(--tint-w, 204px); }
.tint:not([data-open]):hover { background: var(--glass-strong); }
.tint-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.tint-btn:focus-visible { outline-offset: -4px; }
.tint-btn .half {
  fill: var(--ink);
  stroke: none;
  opacity: calc(.15 + var(--tint) * .85);   /* the icon fills as the glass does */
}
.tint-range {
  --fill: calc(10px + var(--p, .6) * (100% - 20px));   /* where the thumb's centre sits along the track */
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: calc(var(--tint-w, 204px) - 58px);
  height: 36px;                  /* a tall area to catch a finger around a thin track */
  margin: 0 6px 0 14px;
  padding: 0;
  background: none;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease, visibility 0s .5s;
}
.tint[data-open] .tint-range {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease .15s, visibility 0s;
}
.tint-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ink) var(--fill), color-mix(in srgb, var(--ink) 20%, transparent) var(--fill));
}
.tint-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;              /* centres the thumb on the track */
  border: 0;
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 0 .5px var(--line), 0 1px 4px var(--shade);
}
.tint-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
}
.tint-range::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}
.tint-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 0 .5px var(--line), 0 1px 4px var(--shade);
}
.tint-range:focus-visible { outline: none; }
.tint-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--focus), 0 1px 4px var(--shade); }
.tint-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--focus), 0 1px 4px var(--shade); }
@media (prefers-reduced-motion: reduce) {
  .tint, .tint-range, .tint[data-open] .tint-range, .tool, .tools[data-tight] > .tool { transition: none; }
}
.tool .sun { opacity: var(--night); }
.tool .moon { opacity: calc(1 - var(--night)); }
.tool .sprig, .tool .strike { transition: opacity .3s ease; }
.tool .strike { opacity: 0; }
.tool[aria-pressed="false"] .sprig { opacity: .4; }
.tool[aria-pressed="false"] .strike { opacity: 1; }
.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));
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  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;
}

/* the footer: a bar of frosted glass across the foot of the page, holding the credits */
.foot {
  position: relative;
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.credits {
  display: flex;
  flex-wrap: wrap;
  align-items: first baseline;
  gap: 2px 28px;
  padding-block: 13px 18px;
  font-size: 13px;
  color: var(--ink-2);
}
.credits h2 {
  --lh: 1.2;
  --extra: .8;
  font: 500 1.125rem var(--display);
  color: var(--ink);
}
.credits p {
  --lh: 1.45;
  --extra: .92;
}
.credits a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* on a narrow screen (under 700px, where the script also calls the clearing narrow) the credits take
   less of the page: smaller type, tighter gaps and padding, and less room under each line for its vine */
@media (max-width: 699px) {
  .credits {
    gap: 0 16px;
    padding-block: 9px 12px;
    font-size: 12px;
  }
  .credits h2 { font: 500 1rem var(--display); }
  .credits h2, .credits p { --extra: .7; }
}
/* where glass cannot blur what is behind it, it is made less see-through instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tool, .tint, .foot { background: var(--glass-strong); }
}