/* helloimleonard.com — the channel's blueberry porridge palette (channel-kit/brand/palette.json), light and dark. */
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/Quicksand-latin.woff2") format("woff2"); }

:root {
  --ground: #F4F1EA; --ink: #24293A; --ink2: #4A5063; --grey: #8C8F9C;
  --accent: #4E5AA3; --support: #D6A63E; --accentWash: #CED2EE; --supportWash: #F0DDAE; --greyWash: #C9C8C4;
  --paper2: #F4F1EA; --plate: #FBF9F4; --crt: #232838; --glow: #CED2EE;
  --fibre: #3a3330; --fibre-o: .275;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #15161D; --ink: #E8E8F0; --ink2: #B9BBC8; --grey: #7D8090;
  --accent: #8792DA; --support: #E2B65A; --accentWash: #3A4170; --supportWash: #6A5526; --greyWash: #3A3B44;
  --paper2: #F4F1EA; --plate: #262833; --crt: #0D0E13; --glow: #B9C0F2;
  --fibre: #E8E8F0; --fibre-o: .09;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--ground); color: var(--ink); font-family: "Quicksand", "Avenir Next", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the fibre ground (taste R006), four seeded tiles cycling at 4 fps */
#ground { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ground rect { opacity: var(--fibre-o); }

/* one screen, no scrolling: title · what he says · leonard · the links */
#stage { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; justify-items: center;
  padding: calc(max(16px, env(safe-area-inset-top)) + clamp(44px, 7vh, 64px)) 16px max(14px, env(safe-area-inset-bottom)); }
#title { height: clamp(46px, 9.5vh, 104px); display: flex; justify-content: center; }
#title svg { height: 100%; width: auto; max-width: calc(100vw - 32px); }
#say { margin: clamp(4px, 1vh, 12px) 0 0; height: clamp(58px, 11.5vh, 104px); display: flex; align-items: center; justify-content: center; }
#say-ink svg { display: block; color: var(--ink2); }

#leo-row { min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(4px, 1.5vh, 16px) 0; }
#leo { height: min(100%, 470px); aspect-ratio: 152 / 166; max-width: min(78vw, 100%); position: relative; touch-action: manipulation; }
#leo:focus-visible { outline-offset: -4px; }

#links { display: flex; justify-content: center; align-items: flex-start; gap: clamp(28px, 9vw, 120px); --icon-h: clamp(54px, 8.6vh, 76px); }
.group { display: grid; grid-template-rows: auto auto var(--icon-h) auto; justify-items: center; align-items: end; }
.group .icons { align-self: center; }
.label { align-self: end; }
.label { display: flex; justify-content: center; }
.label svg { color: var(--ink2); }
.arrow { width: clamp(26px, 4vh, 36px); height: auto; margin: 2px 0 4px; overflow: visible; }
.arrow path { fill: none; stroke: var(--ink2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.icons { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(6px, 1.6vw, 14px); }
.icon { display: block; width: clamp(40px, 6.2vh, 54px); color: var(--ink); cursor: pointer; }
.icon svg { display: block; width: 100%; height: auto; overflow: visible; }
.icon[aria-disabled="true"] { cursor: default; }
#mailbox { height: var(--icon-h); width: auto; aspect-ratio: 72 / 60; }
#mailbox svg { height: 100%; width: auto; }
.small { margin: 6px 0 0; font-size: clamp(11.5px, 1.5vh, 13.5px); line-height: 1.35; color: var(--ink2); text-align: center; letter-spacing: .01em; }
.smaller { font-size: .88em; opacity: .85; }
#email { color: var(--ink); font-weight: 600; user-select: all; -webkit-user-select: all; }

/* drawn things: ink lines with flat fills */
.draw .line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.draw .thick { stroke-width: 4.2; }
.draw .dot { fill: var(--ink); }
.draw .fill-a { fill: var(--accent); } .draw .fill-aw { fill: var(--accentWash); } .draw .fill-sw { fill: var(--supportWash); }
.draw .fill-S { fill: var(--support); } .draw .fill-g { fill: var(--greyWash); } .draw .fill-p { fill: var(--paper2); }
.draw .fill-i { fill: var(--ink); } .draw .fill-plate { fill: var(--plate); } .draw .fill-n { fill: var(--ground); }
.echo circle, .echo path { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.echo.a circle, .echo.a path { stroke: var(--accent); } .echo.s circle, .echo.s path { stroke: var(--support); }

/* hover: icons wiggle on twos (snapped, no tween) */
@keyframes wiggle { 0% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } }
@media (hover: hover) { .icons .icon:hover svg { animation: wiggle .34s steps(1, end) infinite; } }

/* the mailbox: flag down; up (and the letter peeking out) on hover or after a click */
#mailbox .flag.up, #mailbox .letter { display: none; }
#mailbox.open .flag.up, #mailbox.open .letter { display: inline; }
#mailbox.open .flag.down { display: none; }
@media (hover: hover) { #mailbox:hover .flag.up { display: inline; } #mailbox:hover .flag.down { display: none; } }

/* corners */
#top-left, #top-right { position: fixed; top: max(14px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; z-index: 2; }
#top-left { left: max(16px, env(safe-area-inset-left)); }
#top-right { right: max(16px, env(safe-area-inset-right)); }
#music { display: flex; align-items: center; gap: 10px; }
#music .note { display: block; width: clamp(34px, 5vh, 42px); }
#music-label svg { color: var(--ink2); display: block; }
#mute { width: clamp(28px, 4vh, 34px); }
#switch { width: clamp(30px, 4.6vh, 38px); }
#music .note svg, #mute svg, #switch svg { display: block; width: 100%; height: auto; overflow: visible; }
#mute .off { display: none; } #mute[aria-pressed="true"] .off { display: inline; } #mute[aria-pressed="true"] .on { display: none; }
#switch .lever { transform-box: view-box; }
#switch.off .lever { transform: translateY(12.5px); }
#switch.smear .lever { transform: translateY(1.5px) scaleY(1.9); transform-origin: 22px 19.5px; }
#music.beat .note svg { transform: translateY(-2px) rotate(-4deg); }

.noscript { position: fixed; bottom: 24px; left: 0; right: 0; text-align: center; color: var(--ink2); }

/* the ink flood is drawn by site.js; the browser's own crossfade is switched off */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9; }

@media (max-width: 520px) {
  #links { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .icons .icon:hover svg { animation: none; }
}