/* Homepage: builds on sheet.css. Each link is a full-width ruled row, the
   name in Oswald, what it is in mono, and an arrow (↗ when it leaves the
   site); the whole row fills on hover (or .hot, in the ink flood's copy of
   the page). */

.masthead .lede {
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.3;
}

.links li + li {
  border-top: var(--hair);
}

.links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name go' 'what go';
  align-items: center;
  gap: 2px 16px;
  padding: 14px var(--gut) 16px;
  text-decoration: none;
}

.links b {
  grid-area: name;
  font: 700 clamp(28px, 4.2vw, 52px) / 1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
}

.links span {
  grid-area: what;
  font: 400 13px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
}

.links i {
  grid-area: go;
  font: 400 clamp(22px, 3vw, 32px) / 1 var(--mono);
  font-style: normal;
  color: var(--hi);
  transition: transform 0.12s ease-out;
}

@media (min-width: 760px) {
  .links a {
    grid-template-columns: minmax(0, 1fr) 13em auto;
    grid-template-areas: 'name what go';
    gap: 24px;
  }
}

/* A trio of rows: stacked like the rest until there's room, then side by
   side in one row, ruled like the CV page's skills grid, each with what it
   is under its name. */
.trio {
  display: grid;
  margin-bottom: -1px;
  overflow: clip;
}

.links .trio li {
  border-top: 0;
  border-bottom: var(--hair);
  border-right: var(--hair);
  margin-right: -1px;
}

@media (min-width: 960px) {
  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .links .trio a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name go' 'what go';
    gap: 2px 16px;
    height: 100%;
  }

  .links .trio b {
    font-size: clamp(28px, 2.8vw, 40px);
    overflow-wrap: normal;
  }
}

.links a.hot span,
.links a:hover span,
.links a:focus-visible span,
.links a.hot i,
.links a:hover i,
.links a:focus-visible i {
  color: var(--blue);
}

.links a.hot i,
.links a:hover i,
.links a:focus-visible i {
  transform: translateX(4px);
}

/* Rows that lead to a page with its own colors flood the page with them
   (see the ink flood below) and turn inside out themselves, so the hovered
   one stays findable: the notes garden's dark-mode light green with its
   darkest Hunter, black on the whisky list's amber, the stories archive's
   riso blue on its Fluorescent Pink, and white on the CV's blue. The three Bandcamp rows take
   their own pages' colors: charcoal on Honest Magic's teal, deep purple on
   Wheels & Tracks' orange, and navy on Rocketship Radio's red. The Disney link in the lede does the same in
   Minnie's colors: white on her bow's red. */
.lede a.to-disney.hot,
.lede a.to-disney:hover,
.lede a.to-disney:focus-visible {
  background: #e1251b;
  color: #fff;
}

.links a.to-notes.hot,
.links a.to-notes:hover,
.links a.to-notes:focus-visible {
  background: #86bba4;
  color: #1e3329;
}

.links a.to-notes.hot span,
.links a.to-notes:hover span,
.links a.to-notes:focus-visible span,
.links a.to-notes.hot i,
.links a.to-notes:hover i,
.links a.to-notes:focus-visible i {
  color: #1e3329;
}

.links a.to-whisky.hot,
.links a.to-whisky:hover,
.links a.to-whisky:focus-visible {
  background: hsl(36, 100%, 62%);
  color: #000;
}

.links a.to-whisky.hot span,
.links a.to-whisky:hover span,
.links a.to-whisky:focus-visible span,
.links a.to-whisky.hot i,
.links a.to-whisky:hover i,
.links a.to-whisky:focus-visible i {
  color: #000;
}

.links a.to-stories.hot,
.links a.to-stories:hover,
.links a.to-stories:focus-visible {
  background: #ff48b0;
  color: #284690;
}

.links a.to-stories.hot span,
.links a.to-stories:hover span,
.links a.to-stories:focus-visible span,
.links a.to-stories.hot i,
.links a.to-stories:hover i,
.links a.to-stories:focus-visible i {
  color: #284690;
}

.links a.to-cv.hot,
.links a.to-cv:hover,
.links a.to-cv:focus-visible {
  background: #00f;
  color: #fff;
}

.links a.to-cv.hot span,
.links a.to-cv:hover span,
.links a.to-cv:focus-visible span,
.links a.to-cv.hot i,
.links a.to-cv:hover i,
.links a.to-cv:focus-visible i {
  color: #fff;
}

.links a.to-magic.hot,
.links a.to-magic:hover,
.links a.to-magic:focus-visible {
  background: #33c7b8;
  color: #363636;
}

.links a.to-magic.hot span,
.links a.to-magic:hover span,
.links a.to-magic:focus-visible span,
.links a.to-magic.hot i,
.links a.to-magic:hover i,
.links a.to-magic:focus-visible i {
  color: #363636;
}

.links a.to-wheels.hot,
.links a.to-wheels:hover,
.links a.to-wheels:focus-visible {
  background: #ff5700;
  color: #11002f;
}

.links a.to-wheels.hot span,
.links a.to-wheels:hover span,
.links a.to-wheels:focus-visible span,
.links a.to-wheels.hot i,
.links a.to-wheels:hover i,
.links a.to-wheels:focus-visible i {
  color: #11002f;
}

.links a.to-rocketship.hot,
.links a.to-rocketship:hover,
.links a.to-rocketship:focus-visible {
  background: #ff0000;
  color: #001224;
}

.links a.to-rocketship.hot span,
.links a.to-rocketship:hover span,
.links a.to-rocketship:focus-visible span,
.links a.to-rocketship.hot i,
.links a.to-rocketship:hover i,
.links a.to-rocketship:focus-visible i {
  color: #001224;
}

/* The ink flood: js/home.js spills a hovered or focused row's colors over
   the whole page. Each flood is a copy of the page in the new colors, laid
   over it and unclipped from the row's edges out to the window's, so all
   four corners arrive together. Floods stack while the pointer moves
   between rows; when one lands, <html> takes its colors and the copies
   under it go. Small text on the notes green uses the pale Sunflower wash
   so it stays readable, and its rules take the garden's light green. */
[data-flood='none'] {
  --blue: #00f;
  --ink: #fff;
  --dim: rgba(255, 255, 255, 0.72);
  --hi: #fe0;
  --line: initial;
}

[data-flood='notes'] {
  --blue: #3c6a5a;
  --ink: #fbe3a6;
  --line: #86bba4;
  --dim: #fbe3a6;
  --hi: #ffb511;
}

[data-flood='whisky'] {
  --blue: #000;
  --ink: hsl(36, 100%, 62%);
  --dim: hsl(36, 100%, 55%);
  --hi: hsl(36, 100%, 55%);
  --line: initial;
}

/* The stories archive's riso sheet: its deep blue ink on grained paper,
   with Fluorescent Pink for the rules and arrows */
[data-flood='stories'] {
  --blue: #f2ede2;
  --ink: #284690;
  --dim: rgba(40, 70, 144, 0.72);
  --hi: #ff48b0;
  --line: #ff48b0;
}

/* The CV turns the page inside out: blue on white, like the CV itself */
[data-flood='cv'] {
  --blue: #fff;
  --ink: #00f;
  --dim: rgba(0, 0, 255, 0.72);
  --hi: #00f;
  --line: initial;
}

/* The Bandcamp pages: Honest Magic's charcoal on white with teal links and
   blue secondary text, Wheels & Tracks' cream on deep purple with orange
   links and gold secondary text, and Rocketship Radio's white on navy with
   red links and grey secondary text */
[data-flood='magic'] {
  --blue: #fff;
  --ink: #363636;
  --dim: #3270a4;
  --hi: #33c7b8;
  --line: #33c7b8;
}

[data-flood='wheels'] {
  --blue: #11002f;
  --ink: #fff9d7;
  --dim: #ffda42;
  --hi: #ff5700;
  --line: #ff5700;
}

[data-flood='rocketship'] {
  --blue: #001224;
  --ink: #fff;
  --dim: #858585;
  --hi: #ff0000;
  --line: #ff0000;
}

/* Minnie: black, with her bow's red for the rules and arrows */
[data-flood='disney'] {
  --blue: #000;
  --ink: #fff;
  --dim: rgba(255, 255, 255, 0.72);
  --hi: #e1251b;
  --line: #e1251b;
}

/* The Disney flood sparkles: js/home.js scatters four-point stars over the
   page, each twinkling in once the flood reaches it, and fades them out
   when the flood leaves. */
.sparkles {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.sparkles i {
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle var(--for) ease-in-out var(--wait) infinite both;
}

.sparkles i:nth-child(3n) {
  background: #e1251b;
}

.sparkles i:nth-child(5n) {
  background: #ff7eb6;
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(0) rotate(0deg);
  }
  50% {
    transform: scale(1) rotate(90deg);
  }
}

/* the rules are rebuilt here so they pick up a flood's own --line or --ink
   rather than the ones sheet.css resolved them with */
:root[data-flood],
.flood {
  --rule: 2px solid var(--line, var(--ink));
  --hair: 1px solid var(--line, var(--ink));
}

.flood {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--blue);
  color: var(--ink);
  font: 15px/1.65 var(--mono);
  pointer-events: none;
}

@media print {
  .links i {
    display: none;
  }
}