/* ENTRYPOINT — responsive
   Load last: these blocks override layout and components.
   The site was designed at 1280×800. Breakpoints: 1024px and 640px. */

/* ── FLUID TYPE ────────────────────────────────────────────
   Each vw was calculated to yield the exact original value at 1280px, and the
   ceiling locks there — so nothing changes above 1280px.

   The headline is the exception: it is a sentence, not a slogan, and its size
   is dictated by the space left between the left edge of the text and the left
   edge of the terminal window. The longest of its three lines measures 13.3em
   (measured in the browser, not estimated), so 13.3 × the size has to clear
   that space at EVERY width — which caps it at 52px, reached at 1444px. The
   28px floor is where the first line stops fitting on a 375px screen and starts
   wrapping on its own, which is fine: the <br>s hold the three clauses, the
   wrapping only splits inside one. */

.hero-title       { font-size: clamp(28px, 3.6vw, 52px); }   /* 46px a 1280px */
.apply-title      { font-size: clamp(28px, 3.4375vw, 44px); }/* 44px a 1280px */


/* ══ ≤1024px — TABLET ═══════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Hero becomes one column; the terminal panel stops being absolute. */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right {
    border-left: none;
    border-top: 1px solid var(--t-border);
    min-height: 520px;
  }
  /* Stacked, the window becomes the panel: it leaves absolute positioning and
     fills .hero-right edge to edge, without frame — a terminal in fullscreen
     inside the div, like #screen-cli under .is-max.
     `height: auto` undoes the 600px of the desktop window: without it the
     window keeps its desktop height inside a panel that is now as tall as the
     content, and the flex `1 1 auto` below has nothing to grow into. Only the
     641–1024px band sees any of this — at ≤640px the panel is hidden. */
  .hero-terminal-stack {
    /* No bleed when stacked: the window is the panel now, edge to edge, so
       there is nothing for the screen to crop — and the right padding of the
       body, which carries this same variable, goes back to the usual 16px. */
    --hero-term-bleed: 0px;
    position: static;
    width: auto;
    flex: 1;
  }
  .hero-macterm {
    flex: 1 1 auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-left { padding: 56px 32px; }

  /* Thesis: one column. The borders were calculated for two. */
  .thesis-grid { grid-template-columns: 1fr; }
  .thesis-item:nth-child(2n)  { border-right: none; }
  .thesis-item:nth-child(n+3) { border-bottom: 1px solid var(--t-border); }
  .thesis-item:last-child     { border-bottom: none; }

  /* Portfolio: two columns. The terminal's count again, by two: odd starts a
     fresh row (hidden), even closes one with a single cell. :nth-child(n)
     only lifts the specificity to undo the desktop placement. */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .port-next:nth-child(n)   { display: block; grid-column: auto; }
  .port-next:nth-child(odd) { display: none; }

  /* Apply: one column; the vertical divider becomes horizontal. */
  .apply-section { grid-template-columns: 1fr; }
  .apply-left  { padding-right: 0; border-right: none;
                 padding-bottom: 48px; border-bottom: 1px solid var(--t-border); }
  .apply-right { padding-left: 0; padding-top: 48px; }

  .thesis, .portfolio, .apply-section, .apply-cta { padding: 64px 32px; }
}


/* ══ ≤640px — MOBILE ════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Nav: the mark alone, centred ──
     The top links go away on mobile. The home is a single scroll, the terminal
     opens on every visit with thesis/portfolio/apply, and the footer holds all
     four destinations for whoever reaches the end. No hamburger: there is no
     open/closed state to maintain. */
  .site-nav   { justify-content: center; padding: 0 16px; }
  .nav-center { display: none; }

  .hero { min-height: auto; }

  /* ── Sections ── */
  .hero-left { padding: 40px 20px; }
  /* The floor of the fluid size (28px) still overflows 375px minus the 40px of
     padding: the first clause is 13.3em wide, so it needs 24px to fit. Below
     640px the size goes back to following the screen — three lines, one clause
     each, instead of six with orphan words. */
  .hero-title { font-size: min(6.4vw, 28px); }
  .thesis, .portfolio, .apply-section, .apply-cta { padding: 48px 20px; }
  footer { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
  /* With ▸_ on the line, the four destinations exceed 320px of width. */
  .footer-links { flex-wrap: wrap; row-gap: 12px; }

  /* Portfolio and thesis: single column. One column never leaves a gap, so the
     terminal has nothing to close. */
  .portfolio-grid { grid-template-columns: 1fr; }
  .port-next:nth-child(n) { display: none; }

  /* No panel on mobile: hidden, not stacked. Every visit already opens on the
     entry terminal, which on this width IS the screen (below), so repeating a
     terminal in the hero right under it says the same thing twice — and the
     session, at a font size that has to shrink to ~4px to fit 130 columns, is
     unreadable there anyway. What is left in the hero is the sentence, the
     paragraph and the two buttons, which is what a phone has room to read.
     `display: none` and not `visibility`: the row must not hold height. */
  .hero-right { display: none; }

  /* ── Terminal ──
     On mobile there is no window: the terminal IS the screen. The light backdrop,
     the frame (corners + shadow) and the title bar all go — the macOS quotation
     does not hold up on a device that is not a Mac, and the chrome only steals
     usable height. With no bar there are no traffic lights: whoever wants the
     site taps `site` on the hint line. Maximising loses its meaning too.

     The ASCII art is a fixed 130 columns. Rather than cropping it (which reads
     as a defect), the font shrinks so the whole mark fits — now measured against
     the terminal body (100cqw, the container declared in terminal.css) instead
     of against the viewport. Same formula the hero already uses: 130 columns of
     a 0.6em-advance mono need 78 × the size, and dividing by 80 leaves ~3% for
     the fallback monospaces whose advance is not exactly 0.6em. The 1.05vw it
     replaces ignored the body's padding and borders and so left 35px of a 298px
     box unused at 320px — a mark that small cannot afford to give any back.
     It is still small: ~3.7px at 320px, ~4.5px at 375px. Making it READABLE on a
     phone needs a narrower mark, which is new art and a design decision, not a
     breakpoint. overflow-x is the safety net for extremes. */
  #screen-cli { padding: 0; background: var(--term-bg); background-image: none; }
  .term-window {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .term-titlebar { display: none; }
  .cli-line.ascii { font-size: min(7px, calc(100cqw / 80)); overflow-x: auto; }
  .term-body { padding: 10px; }

  /* Hero buttons take the full width. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { justify-content: center; }
}


/* ══ ALVOS E PONTEIRO ═══════════════════════════════════════
   Por `pointer`/`hover` e não por largura: largura não diz com o que a pessoa
   está apontando. Um notebook com tela sensível ao toque tem 1440px e um dedo;
   um tablet com mouse tem 1024px e precisão. Dois patamares — 24px é o mínimo
   do WCAG 2.5.8 e vale para todo ponteiro, 44px é o conforto de dedo e entra só
   em `pointer: coarse`.
   O que cresce aqui é a CAIXA, nunca o tipo: estes controles são de 9 a 11px de
   propósito, e aumentar a fonte seria redesenhar o rodapé para resolver um
   problema de dedo. */

/* O rodapé é a navegação inteira do site num telefone — as quatro linhas dele
   mediam 9px de altura, menos de metade do mínimo, e o `gap: 20px` entre elas
   também reprovava na exceção de espaçamento. */
.footer-link,
.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Alvo embutido em linha de texto: crescer a caixa empurraria a sessão do
   terminal e quebraria o ritmo das linhas, então o alvo cresce por fora, num
   ::after que não ocupa espaço. As linhas vizinhas não são clicáveis, então não
   há com o que disputar o toque. */
.cli-cmd-link { position: relative; }
.cli-cmd-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 24px;
}

/* Os semáforos têm 12px porque é o tamanho que o macOS usa, e com mouse isso
   funciona há quarenta anos. O que não funciona é 12px com 8px de intervalo
   para um dedo. Com ponteiro fino o desenho fica intocado e só o alvo cresce
   até o passo da fileira (12 + 8 = 20px, sem invadir o vizinho) e até a altura
   da barra. Os do terminal do portfólio são o mesmo desenho e a mesma conta. */
.term-light,
.port-next-light { position: relative; }
.term-light::after,
.port-next-light::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 8px);
  height: 28px;
}

@media (pointer: coarse) {
  .footer-link,
  .nav-logo,
  .btn-icon { min-height: 44px; }
  .btn-icon { min-width: 44px; }
  .cli-cmd-link::after { height: 44px; }

  /* Aqui o desenho cede: num dispositivo de toque a barra cresce, os pontos
     crescem e o intervalo cresce junto, para o alvo ser o passo da fileira
     (16 + 16 = 32px) sem sobrepor o vizinho. Fechar quando se queria maximizar
     é o tipo de erro que não tem desfazer. */
  .term-titlebar { height: 36px; }
  .term-lights   { gap: 16px; }
  .term-light    { width: 16px; height: 16px; }
  .term-light::after { width: calc(100% + 16px); height: 32px; }
  .port-next .hero-macterm-bar    { height: 36px; }
  .port-next .hero-macterm-lights { gap: 16px; }
  .port-next .hero-macterm-light  { width: 16px; height: 16px; }
  .port-next-light::after { width: calc(100% + 16px); height: 32px; }

  /* 16px não é escolha de tipografia: abaixo disso o Safari do iOS dá zoom no
     campo em foco, o layout salta e a pessoa perde o lugar no formulário. Os
     44px vêm junto porque preencher isto é a única tarefa da página. */
  .form-input {
    font-size: 16px;
    min-height: 44px;
  }
  .form-submit { min-height: 44px; }

  /* O mesmo zoom pega o terminal de entrada: tocar no prompt ampliava a tela e
     cortava as colunas da esquerda, e o Safari não desfaz o zoom sozinho. Cresce
     a linha do prompt inteira e só ela — o rótulo para não haver dois tamanhos
     na mesma linha, e o bloco porque o cli.js o posiciona medindo a fonte do
     input: se os dois divergem, o cursor descola do texto. As linhas de saída
     ficam em 13px: a tabela do `help` tem 42 colunas e a 16px quebraria num
     telefone. */
  .term-input-prompt,
  #cli-input,
  .term-cursor { font-size: 16px; }
}

/* Sem hover não há como trazer a barra de volta. Em tela cheia ela sai de cena
   e só o ponteiro em cima do topo a traz — num tablet sem teclado isso deixa o
   botão verde, que é o único que restaura, inalcançável. (O Esc resolve, mas
   supõe teclado.) Onde não existe hover, a tela cheia mantém a barra: perde-se
   a citação do fullscreen do macOS e ganha-se o caminho de volta. */
@media (hover: none) {
  #screen-cli.is-max .term-titlebar {
    position: static;
    transform: none;
  }
  #screen-cli.is-max .term-titlebar::after { content: none; }
}


/* ── Respect anyone who asked for less motion ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* The rule above shortens durations, not delays. The portfolio terminal
     sequences its dock with delays (components.css), which would leave the
     cell empty for a beat before the icon appears. */
  .port-next-window,
  .port-next-icon { transition-delay: 0s !important; }
}