/* =========================================================
   Felipe Lourenço — personal site
   Monochrome, mono-type, minimal. Interactive portrait.
   Shared by / (English) and /pt/ (Portuguese): edit once.
   ========================================================= */

/* ---------- self-hosted fonts (formerly Google Fonts; same files, latin + latin-ext subsets) ---------- */
/* Inter 300 latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.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;
}
/* Inter 300 latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/inter-latin.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;
}
/* Inter 400 latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.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;
}
/* Inter 400 latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-latin.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;
}
/* JetBrains Mono 300 latin-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin-ext.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;
}
/* JetBrains Mono 300 latin */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin.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;
}
/* JetBrains Mono 400 latin-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin-ext.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;
}
/* JetBrains Mono 400 latin */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin.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;
}
/* JetBrains Mono 500 latin-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin-ext.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;
}
/* JetBrains Mono 500 latin */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin.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;
}

:root {
  --ff-mono: "JetBrains Mono", menlo, monaco, consolas, "Courier New", monospace;
  --ff-sans: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;

  --color-bg: #0c0c0c;
  --color-text: #ffffff;
  --color-soft: #7a7a7a;
  --color-border: #2a2a2a;

  /* text selection highlight (photo background slate) */
  --sel-bg: #282c37;
  --sel-fg: #ffffff;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 20px;
  --space-4: 24px;
  --space-6: 52px;
  --space-7: 80px;

  --maxw: 1440px;

  --space-columns: 12;
  --grid: repeat(var(--space-columns), minmax(10px, 1fr));
}

@media (max-width: 36.999em) { :root { --space-columns: 6; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--ff-mono);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 300;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--color-soft); outline-offset: 3px; }

::selection { background: var(--sel-bg); color: var(--sel-fg); }
::-moz-selection { background: var(--sel-bg); color: var(--sel-fg); }

h1, h2, h3, h4, p, ul, li { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
a { color: currentColor; text-decoration: none; }
img, svg, canvas { max-width: 100%; height: auto; display: block; }

/* ---------- type scale (fluid) ---------- */
.type-1 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem); line-height: 1.1; }
.type-2 { font-size: clamp(1.125rem, 1.03rem + 0.38vw, 1.375rem); line-height: 1.5; }
.type-3 { font-size: clamp(0.875rem, 0.83rem + 0.19vw, 1rem); }

/* ---------- layout primitives ---------- */
.flex { display: flex; gap: var(--space-1); }
.flex--no-gap { gap: 0; }
.flex--align-items-baseline { align-items: baseline; }
.flex--align-items-center { align-items: center; }
.flex--justify-between { justify-content: space-between; }

.grid { display: grid; grid-template-columns: var(--grid); column-gap: var(--space-4); }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--space-4); }

.u-upper { text-transform: uppercase; }
.u-inline > * { display: inline; }
.link { text-decoration: underline; text-underline-offset: 3px; }
.visibility-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; border: 0;
}
.skipnav { position: absolute; top: var(--space-2); left: var(--space-4); z-index: 10; }
.skipnav:focus { clip: auto; width: auto; height: auto; }

/* ===================== HEADER / INTRO ===================== */
.header { position: relative; font-size: 14px; line-height: 1.5; }

.logo a { display: inline-flex; padding-block: var(--space-3); font-size: 14px; }
.logo span { display: inline-block; }
.logo__txt { width: 100%; }
.logo__txt-wrapper { width: 0; overflow: hidden; transition: width 0.4s ease; }
/* intro: starts fully expanded on load, then collapses to [fl] after a hold */
.logo.is-open .logo__txt-wrapper { width: 44px; }
.logo.is-open .logo__txt-wrapper--space { width: 8px; }
.logo.is-open .logo__txt-wrapper--last { width: 62px; }
@media (hover: hover) {
  .logo a:hover .logo__txt-wrapper { width: 44px; }
  .logo a:hover .logo__txt-wrapper--space { width: 8px; }
  .logo a:hover .logo__txt-wrapper--last { width: 62px; }
}

.intro { grid-column: 1 / -1; }
@media (min-width: 37em) { .intro { grid-column: auto / span 7; } }

.name {
  font-size: clamp(1.375rem, 1.05rem + 1.45vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
}
.bio {
  margin-block-start: var(--space-3);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
  max-width: 50ch;
}
/* exact line breaks on wide screens; natural wrap below */
.bio-br { display: none; }
@media (min-width: 56em) { .bio-br { display: inline; } }
.bio a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.tagline {
  margin-block-start: var(--space-2);
  font-size: 13px;
  font-weight: 300;
  color: var(--color-soft);
  line-height: 1.5;
  max-width: 60ch;
}

/* ===================== TRACK RECORD ===================== */
.section { position: relative; }
.ledger {
  margin-block-start: calc(var(--space-6) + 15px);
}

.ledger__title {
  font-family: var(--ff-sans);
  font-size: 14px; font-weight: 400; letter-spacing: 0.6px;
  color: var(--color-soft);
  margin-block-end: calc(var(--space-2) + 5px);
}

.facts { display: flex; flex-direction: column; gap: var(--space-2); }
.fact {
  position: relative;
  padding-left: 1.8ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
}
.fact::before { content: "-"; position: absolute; left: 0; color: var(--color-soft); }
.fact b { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fact a { text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.3s; }
@media (hover: hover) { .fact a:hover { opacity: 0.6; } }
/* ===================== WRITING LIST =====================
   The date takes the place of the "-" marker, so every entry hangs off the
   same left edge and the titles align. Body type is mono, so every date is
   exactly 8ch — the column is true without hard-coding a pixel width. */
.writing { display: flex; flex-direction: column; gap: var(--space-2); }
.writing__item {
  position: relative;
  padding-left: 10ch;          /* 8ch date + 2ch gutter */
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
}
.writing__date {
  position: absolute;
  left: 0;
  color: var(--color-soft);
  transition: color 0.3s;
}
.writing__item a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .writing__item a:hover { opacity: 0.6; }
  /* the row reads as one unit: hovering the title lifts its date out of grey */
  .writing__item:hover .writing__date { color: var(--color-text); }
}
/* too narrow for two columns — the date stacks above the title instead */
@media (max-width: 30em) {
  .writing__item { padding-left: 0; }
  .writing__date {
    position: static;
    display: block;
    font-size: 12px;
    margin-block-end: 2px;
  }
}

.ticker {
  font-family: var(--ff-sans);
  color: var(--color-soft);
  font-size: 11px;
  letter-spacing: 0.6px;
  white-space: nowrap;
  margin-left: 4px;
}

/* ===================== HERO (portrait + intro) ===================== */
.hero { align-items: start; margin-block-start: var(--space-4); row-gap: var(--space-4); }
.hero .intro { margin-block-start: 0; }

/* ---------- interactive portrait ---------- */
.portrait {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  grid-column: 1 / -1;
  max-width: 496px; /* matches the reference wrapper width */
}
@media (min-width: 37em) {
  .portrait { grid-column: auto / span 5; }
  .hero .intro { grid-column: auto / span 7; }
}
.portrait canvas,
.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* static mobile photo — monochrome, matching the canvas */
.portrait__img { object-fit: cover; object-position: center 12%; filter: grayscale(1) contrast(1.05); }
/* canvas: monochrome at rest; colour follows the interaction.
   The 1.4s base transition matches the pixel collapse after mouseleave. */
.portrait canvas { display: none; filter: grayscale(1) contrast(1.05); transition: filter 1.4s ease; }
/* Show the live canvas only where hover exists; otherwise keep the static photo. */
@media (hover: hover) and (min-width: 37em) {
  .portrait__img { display: none; }
  .portrait canvas { display: block; }
  .portrait { cursor: pointer; }
  .portrait:hover canvas { filter: none; transition: filter 0.5s ease; } /* colour tease on hover */
  .portrait.is-revealed canvas { filter: none; transition: filter 1.2s ease; } /* full colour with the click reveal */
}

/* ===================== FOOTER ===================== */
.footer {
  position: sticky; top: 100%;
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  padding-block: var(--space-4);
}
.socials { gap: var(--space-4); margin-top: var(--space-2); }
.socials a { transition: opacity 0.3s; }
@media (hover: hover) { .socials a:hover { opacity: 0.55; } }

/* ===================== SCROLL REVEAL ===================== */
[animate-up],
[animate-up-children] [animate-up-child] {
  opacity: 0;
  transform: translateY(1rem);
  transition: transform 0.8s 0.15s ease, opacity 0.8s 0.15s ease;
}
[animate-up].isVisible,
[animate-up-child].isVisible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [animate-up], [animate-up-child] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ===================== PORTUGUESE MEASURE =====================
   Portuguese says the same thing in noticeably more characters, so the
   hero measure tuned for English wraps ragged here. Widen it, and hold
   the hand-set line breaks back until there is room to honour them. */
html[lang="pt-BR"] .bio { max-width: 56ch; }
html[lang="pt-BR"] .tagline { max-width: 68ch; }
html[lang="pt-BR"] .bio-br { display: none; }
@media (min-width: 70em) {
  html[lang="pt-BR"] .bio-br { display: inline; }
}

/* ===================== LANGUAGE SWITCH =====================
   Sits opposite the logo in the header. Same 11px sans caps as the
   footer socials, so it reads as chrome rather than content. */
.langswitch {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-soft);
  gap: var(--space-1);
  align-items: center;
}
.langswitch a { transition: opacity 0.3s; }
@media (hover: hover) { .langswitch a:hover { opacity: 0.55; } }
/* the page you are already on is stated, not offered */
.langswitch [aria-current] { color: var(--color-text); }
.langswitch__sep { color: var(--color-border); }