@font-face { font-family: "Grandstander"; font-style: italic; font-weight: 200 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/grandstander/v18/ga6UawtA-GpSsTWrnNHPCSImbwC2VMBxMw.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Grandstander"; font-style: italic; font-weight: 200 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/grandstander/v18/ga6UawtA-GpSsTWrnNHPCSImbwC3VMBxMw.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Grandstander"; font-style: italic; font-weight: 200 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/grandstander/v18/ga6UawtA-GpSsTWrnNHPCSImbwC5VMA.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Grandstander"; font-style: normal; font-weight: 200 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/grandstander/v18/ga6KawtA-GpSsTWrnNHPCSImZTC7TMQ.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Grandstander"; font-style: normal; font-weight: 200 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/grandstander/v18/ga6KawtA-GpSsTWrnNHPCSImZDC7TMQ.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Grandstander"; font-style: normal; font-weight: 200 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/grandstander/v18/ga6KawtA-GpSsTWrnNHPCSImajC7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TwemojiColor"; font-display: swap;
  src: url("https://lu9.st/blog-assets/Twemoji%20Mozilla.ttf");
  unicode-range: U+00A9, U+00AE, U+200D, U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-21AA, U+231A-23FF, U+24C2, U+25AA-25FE, U+2600-27BF, U+2934-2935, U+2B05-2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F000-1FAFF, U+E0020-E007F; }

:root {
  --font: "TwemojiColor", "Grandstander", "Roboto Slab", sans-serif;
  --star-white: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpolygon%20points%3D%2220%2C1%2027%2C12.3%2040%2C15.5%2031.4%2C25.7%2032.4%2C39%2020%2C34%207.6%2C39%208.6%2C25.7%200%2C15.5%2013%2C12.3%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3C%2Fsvg%3E");
  --star-yellow: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpolygon%20points%3D%2220%2C1%2027%2C12.3%2040%2C15.5%2031.4%2C25.7%2032.4%2C39%2020%2C34%207.6%2C39%208.6%2C25.7%200%2C15.5%2013%2C12.3%22%20fill%3D%22%23FFD978%22%20%2F%3E%3C%2Fsvg%3E");
  --heart-pink: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M20.9%2C37L33%2C25.3c3-3%2C4.5-5.9%2C4.5-8.8c0-2.9-0.8-5.1-2.5-6.7c-1.6-1.6-3.9-2.4-6.8-2.4c-0.8%2C0-1.6%2C0.1-2.5%2C0.4%20S24.1%2C8.5%2C23.3%2C9c-0.7%2C0.5-1.3%2C0.9-1.9%2C1.3c-0.5%2C0.4-1%2C0.9-1.5%2C1.3c-0.5-0.5-1-0.9-1.5-1.3C18%2C9.9%2C17.4%2C9.5%2C16.7%2C9%20c-0.7-0.5-1.5-0.9-2.3-1.1s-1.7-0.4-2.5-0.4C9%2C7.5%2C6.7%2C8.3%2C5%2C9.9s-2.5%2C3.8-2.5%2C6.7c0%2C0.9%2C0.2%2C1.8%2C0.5%2C2.7c0.3%2C0.9%2C0.7%2C1.7%2C1%2C2.4%20c0.4%2C0.6%2C0.8%2C1.3%2C1.3%2C1.9c0.5%2C0.6%2C0.9%2C1%2C1.1%2C1.3C6.7%2C25%2C6.9%2C25.2%2C7%2C25.3L19.1%2C37c0.2%2C0.2%2C0.5%2C0.4%2C0.9%2C0.4S20.6%2C37.3%2C20.9%2C37z%22%20fill%3D%22%23FF7AA2%22%20%2F%3E%3C%2Fsvg%3E");
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, iframe, h2, p, a, code, em, img, strong, sub, sup, u, ul, li,
header, nav, main, section, mark, video {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
ul { list-style: none; }

html { font-size: 18pt; }
body {
  background: #000;
  color: #fff;
  font-family: var(--font);
  line-height: 1;
  min-width: 320px;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

#bg {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  pointer-events: none;
}
#bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: url("../assets/rain.svg"), linear-gradient(41deg, rgba(219, 35, 113, .11) 10%, rgba(47, 250, 202, .11) 85%);
  background-size: cover, cover;
  background-position: center, 0% 0%;
  background-repeat: no-repeat, repeat;
}
#bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

/* ---------- layout ---------- */
.page {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh;
  padding: 1rem;
  overflow: hidden;
}

main {
  --spacing: .75rem;
  --pad-h: .75rem;
  --pad-v: 1rem;
  position: relative; z-index: 1;
  width: 40rem; max-width: 100%;
  padding: var(--pad-v) var(--pad-h) calc(var(--pad-v) + var(--spacing));
  text-align: center;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
}

main:has(.links-box) { padding-bottom: var(--pad-v); }

.flow > * { margin-block: var(--spacing); }
.flow > :first-child { margin-top: 0; }
.flow > :last-child { margin-bottom: 0; }
header.flow { margin-bottom: 0; }

.columns {
  --gutters: 2rem;
  --pad: 2rem;
  --n: 2;
  --w1: 50%; --w2: 50%; --w3: 33.33333%;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  padding: 0 var(--pad);
}
.columns > * {
  flex: 0 0 auto; max-width: 100%;
  padding-left: var(--gutters);
}
.columns > :first-child { margin-left: calc(var(--gutters) * -1); }
.columns > :nth-child(1) { width: calc(var(--w1) + var(--gutters) / var(--n)); }
.columns > :nth-child(2) { width: calc(var(--w2) + var(--gutters) / var(--n)); }
.columns > :nth-child(3) { width: calc(var(--w3) + var(--gutters) / var(--n)); }
.columns > * > * { margin-block: var(--inner, var(--spacing)); }
.columns > * > :first-child { margin-top: 0; }
.columns > * > :last-child { margin-bottom: 0; }

.columns--3 { --n: 3; --w1: 33.33333%; --w2: 33.33333%; --w3: 33.33333%; }
.intro { --w1: 45%; --w2: 55%; }
.links-box { --gutters: .75rem; --pad: .875rem; --inner: 1.25rem; --w1: 40%; --w2: 60%; padding-block: var(--pad-v); }
.links-box > * { padding-bottom: var(--inner); }

h2 { font-size: 3em; line-height: 1.25; font-weight: 200; letter-spacing: -.125rem; }
h3 { padding-top: 15px; }
.name { font-size: 1.5em; line-height: 1.25; font-weight: 200; letter-spacing: -.075rem; }
.text, .text-right, .bio { font-size: .875em; line-height: 1.75; font-weight: 300; }
.text-right { text-align: right; }
.bio { text-align: left; }
.name a, .text a, .text-right a, .bio a { text-decoration: underline; }
.name a:hover, .text a:hover, .text-right a:hover, .bio a:hover { text-decoration: none; }
.para { display: block; }
.para:nth-child(n + 2) { margin-top: 1rem; }

a { color: inherit; text-decoration: underline; transition: color .25s ease; }
a.easteregg { text-decoration: none;}
strong { color: inherit; font-weight: 600; }
em { font-style: italic; }
u { text-decoration: underline; }
sup { font-size: smaller; vertical-align: super; }
sub { font-size: smaller; vertical-align: sub; }
mark { background: rgba(144, 144, 144, .25); color: inherit; }
code {
  background: rgba(144, 144, 144, .25); border-radius: .25em;
  font-family: "Roboto Mono", "Lucida Console", "Courier New", monospace;
  font-size: .9em; font-weight: normal; letter-spacing: 0; margin: 0 .25em; padding: .25em .5em;
}
.hl { color: lightyellow; }
.dim { color: grey; }
.help a { cursor: help; }

.pic { display: block; line-height: 0; max-width: 100%; position: relative; }
.pic > img { display: inline-block; vertical-align: top; max-width: 100%; width: var(--w, 100%); height: auto; }
.pic.gap-before:not(:first-child) { margin-top: 3rem; }
.pic.gap-after:not(:last-child) { margin-bottom: 3rem; }

.logo {
  --hover: 1.06;
  display: block; width: 330px; max-width: 100%; margin-inline: auto;
  overflow: hidden; line-height: 0;
  transition: transform .25s ease, z-index .25s ease;
}
.logo img { display: block; width: 100%; height: auto; -webkit-touch-callout: none; user-select: none; }
.logo:hover { transform: scale(var(--hover)); z-index: 1; }

.lang { display: flex; justify-content: center; gap: 2rem; }
.lang label {
  position: relative; display: block; width: 72px; max-width: 100%; overflow: hidden; line-height: 0;
  cursor: default; user-select: none; -webkit-user-select: none;
  transition: transform .25s ease, z-index .25s ease;
}
.lang label:hover { transform: scale(1.095); z-index: 1; }
.lang img { display: block; width: 100%; height: auto; }
.lang input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: default; }
.lang label:has(:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }

body:has(input[name="lang"][value="pt"]:checked) {
  [data-l="en"] { display: none; }
  .logo { --hover: 1.0775; }
  .nav { gap: .375rem; }
  :is(.flow, .columns > *) > [data-l="en"]:first-child + [data-l="pt"] { margin-top: 0; }
}
body:not(:has(input[name="lang"][value="pt"]:checked)) {
  [data-l="pt"] { display: none; }
  :is(.flow, .columns > *) > [data-l="en"]:has(+ [data-l="pt"]:last-child) { margin-bottom: 0; }
}

.rule {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 1rem; border: 0; padding: 0; position: relative;
}
.rule::before { content: ""; width: 36rem; height: 1px; background: #fff; }
.rule:not(:first-child) { margin-top: .25rem; }
.rule:not(:last-child) { margin-bottom: .25rem; }
.gap { visibility: hidden; display: flex; width: 100%; min-height: 1rem; border: 0; padding: 0; }
.gap::before { content: ""; width: 1rem; height: 1px; background: #fff; }
.gap:not(:last-child) { margin-bottom: 3.75rem; }

.buttons { display: flex; justify-content: center; padding: 0; cursor: default; letter-spacing: 0; }
.buttons li { max-width: 100%; }
.buttons a {
  align-items: center; justify-content: center; max-width: 100%;
  text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap;
  cursor: default; user-select: none; -webkit-user-select: none;
  font-size: .875em; border-radius: 2rem; overflow: hidden;
}

.nav { gap: .75rem; flex-flow: row wrap; }
.nav a, .back a {
  display: inline-block; height: 1.75rem; line-height: calc(1.75rem - 2px);
  text-overflow: ellipsis;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.nav a { width: auto; padding: .1rem .875rem 0; font-weight: 300; color: rgba(255, 255, 255, .541); border: 1px solid rgba(255, 255, 255, .541); }
.back { gap: .75rem; flex-flow: row wrap; }
.back a { width: 12.375rem; padding: .1rem .4375rem 0; font-weight: 200; color: rgba(255, 255, 255, .54); border: 1px solid rgba(255, 255, 255, .32); }
.nav a:hover, .back a:hover { color: #fff; border-color: #fff; }

.links { flex-direction: column; flex-wrap: nowrap; gap: .25rem; }
.links a {
  display: inline-flex; width: 100%; height: 1.875rem; line-height: 1.875rem; justify-content: flex-start;
  padding: .1rem .9375rem 0; font-weight: 300; letter-spacing: -.05rem;
  background: rgba(255, 255, 255, .459); color: #293752;
  transition: transform .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease;
}
.links a:hover { background: rgba(255, 255, 255, .8); transform: scale(1.0425); }
.links svg {
  display: block; flex: 0 0 auto; width: 1.625em; height: 100%; min-width: 16px;
  margin-left: -.125em; margin-right: .5em;
  fill: #293752; pointer-events: none; transition: fill .25s ease;
}
.links .label { flex: 1 1 0; width: 100%; overflow: hidden; text-align: right; }

.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 22rem; margin-inline: auto; }
.gallery li { position: relative; }
.gallery a { display: block; position: relative; }
.gallery img { display: block; width: auto; max-width: 100%; height: auto; max-height: 15rem; }

.list { display: block; font-size: .75em; line-height: 1.75; font-weight: 300; }
.list ul { display: inline-block; width: 100%; max-width: 100%; text-align: left; vertical-align: middle; }
.list li {
  position: relative; margin-top: .5rem;
  padding: 4px 0 0 calc(var(--bw, .615234rem) + .5rem);
  text-align: left;
}
.list li:first-child { margin-top: 0; }
.list li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--bw, .615234rem); height: 1.3125rem;
  background: var(--bullet, var(--star-white)) left 60% / contain no-repeat;
}
.list li > p { margin: 0; }
.list--yellow { --bullet: var(--star-yellow); }
.list-yellow li::before { height: 1rem; }
.list--heart {  --bullet: var(--heart-pink); }
.list--heart li::before { height: 1rem; }
.list--tight { line-height: 1; }
.list--plain li { gap: 0; }
.list--plain li::before { display: none; }

.my-button textarea { resize: none; }
iframe { width: 100%; height: 600px; border: 0; }

@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px)  { html { font-size: 11pt; } }
@media (max-width: 736px) {
  html { font-size: 10pt; }

  .logo { width: 13.5rem; }
  .lang { gap: 0; }
  .lang img { scale: .6; }

  h2 { letter-spacing: -.109375rem; }
  .name { letter-spacing: -.065625rem; }
  .text, .text-right { letter-spacing: -.025rem; }
  .bio { letter-spacing: 0; }

  .intro { --pad: 0rem; }
  .links-box { --pad: 3.375rem; --inner: 2rem; }

  .stack, .links-box { flex-flow: column; }
  .stack-reverse { flex-flow: column-reverse; }
  .stack > *, .links-box > * { width: 100% !important; min-height: 100%; padding: calc(var(--gutters) * .5) 0; }
  .stack > :first-child, .links-box > :first-child { margin-left: 0; padding-top: 0; }
  .stack > :last-child { padding-bottom: 0; }
  .links-box > * { padding-bottom: calc(var(--gutters) * .5 + var(--inner)); }
  .links-box > :last-child { padding-bottom: var(--inner); }
  .stack-reverse > :first-child { padding-top: calc(var(--gutters) * .5); padding-bottom: 0; }
  .stack-reverse > :last-child { padding-top: 0; padding-bottom: calc(var(--gutters) * .5); }

  .gallery img { max-height: 11.25rem; }
  .pic.pix { --w: 12rem !important; }
}
@media (max-width: 480px) {
  main { --spacing: .65625rem; }
  .intro { padding-bottom: var(--spacing); }
  .links-box { --inner: 2rem; }
}
@media (max-width: 360px) {
  main { --pad-h: .5625rem; --pad-v: .75rem; --spacing: .5625rem; }
  .columns { --gutters: 1.5rem; --pad: 1.5rem; }
  .intro { --pad: 0rem; }
  .links-box { --gutters: .5625rem; --pad: 2.53125rem; --inner: 1.75rem; }
  h2 { font-size: 2em; }
}

:root {
  --panel-bg: rgba(17, 50, 69, .38);
  --panel-radius: .775rem;
  --panel-shadow: 0 1.75rem .75rem 0 rgba(0, 0, 0, .231);
  --panel-blur: blur(.3rem);
}
@view-transition { navigation: auto; }
main { view-transition-name: panel; }
header { view-transition-name: header; }
main > section { view-transition-name: content; }
html:not(.js) #bg { view-transition-name: bg; }

::view-transition-group(panel),
::view-transition-group(content) { animation-duration: .5s; animation-timing-function: ease-in-out; }
::view-transition-group(panel) {
  background: var(--panel-bg); border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
}
::view-transition-old(panel), ::view-transition-new(panel) { display: none; }
::view-transition-group(content) { overflow: clip; }
::view-transition-old(content), ::view-transition-new(content) {
  height: 100%; object-fit: none; object-position: 50% 0;
}
::view-transition-old(content) { animation: fade-out .25s ease-in-out both; }
::view-transition-new(content) { animation: fade-in .5s ease-in-out .25s both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(header), ::view-transition-new(header) { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .nav li { animation: flip-in 1s ease backwards; animation-delay: calc(var(--i) * .125s); transform-origin: 50% 50%; }
  .links li { animation: slide-in .5s ease backwards; animation-delay: calc(var(--i) * .125s); }
}
@keyframes flip-in { from { opacity: 0; transform: perspective(1000px) rotateX(90deg); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-1.425rem); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.9); } 90% { opacity: 0.9; transform: scale(1.1);} }

.js .gallery li:not(.in) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gallery li.in { animation: pop-in .25s ease backwards; animation-delay: calc(var(--i) * 60ms); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.list-title { text-align: center; margin-bottom: .5rem; }