/* Header: Figma 507:102 (desktop) e 507:27 (mobile).
   Operetta 8 Regular (400 normal), servida pelo Adobe Fonts. */
:root {
    --font-header: var(--font-operetta);
    --header-font-size: 20px;
    --header-height: 144px;
    --header-logo-size: 48px;
    --header-padding-block: 32px;
    --header-padding-inline: 16px;
    --header-link-gap: 34px;
    --header-row-gap: 85px;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.home-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    row-gap: var(--header-row-gap);
    min-height: var(--header-height);
    padding: var(--header-padding-block) var(--header-padding-inline);
    background-color: var(--color-clear-white);
}

.home-header__brand {
    display: block;
    flex: 0 0 var(--header-logo-size);
    width: var(--header-logo-size);
    height: var(--header-logo-size);
}

.home-header__brand img {
    width: var(--header-logo-size);
    height: var(--header-logo-size);
    object-fit: contain;
}

.home-header nav {
    flex-shrink: 0;
}

.home-header__links {
    display: flex;
    align-items: center;
    gap: var(--header-link-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-header__link {
    display: block;
    color: var(--color-link-on-light);
    font-family: var(--font-header);
    font-size: var(--header-font-size);
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 4%;
    text-underline-position: from-font;
    white-space: nowrap;
}

.home-header a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Decisão responsiva: o Figma fornece 412 e 1440 px, sem breakpoint.
   A partir de 48rem, usar a margem desktop; abaixo, a margem mobile. */
@media (min-width: 48rem) {
    .home-header {
        --header-padding-inline: 100px;
    }
}

/* Hero: Figma 507:109 (1440 px) e 507:34 (412 px).
   As entrelinhas seguem as caixas de texto dos metadados: 24, 63 e 20 px. */
.home-main {
    padding-block-start: 48px;
    background-color: var(--color-clear-white);
}

.home-hero {
    --hero-color-text: #000;
    --hero-color-border: #595856;
    --hero-padding-inline: 16px;
    --hero-group-gap: 256px;
    --hero-text-gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--hero-group-gap);
    min-height: 630px;
    padding: 32px var(--hero-padding-inline) 48px;
    color: var(--hero-color-text);
    font-family: var(--font-helvetica);
    font-style: normal;
    /* Traço interno: preserva a altura do Auto Layout sem somar 1 px. */
    box-shadow: inset 0 -1px 0 var(--hero-color-border);
}

.home-hero p,
.home-hero h1 {
    margin: 0;
}

.home-hero__name {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
}

.home-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hero-text-gap);
    width: 100%;
    min-width: 0;
}

.home-hero__title {
    width: 274px;
    /* Preserva a palavra inteira também com o arredondamento da viewport/scrollbar. */
    max-width: calc(100% + 1px);
    /* Usa somente os pontos discricionários do HTML quando a palavra não cabe. */
    hyphens: manual;
    font-size: 64px;
    font-weight: 700;
    line-height: 63px;
}

.home-hero__word {
    /* Mantém cada palavra inteira na próxima linha quando ela ainda cabe. */
    display: inline-block;
    max-width: 100%;
}

.home-hero__location {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
}

.home-hero__description {
    width: 374px;
    max-width: 100%;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
}

@media (min-width: 48rem) {
    .home-hero {
        --hero-padding-inline: 100px;
    }
}

/* A composição em duas colunas entra quando há espaço para os textos.
   O gap chega aos 256 px da referência em 1440 px e diminui no tablet. */
@media (min-width: 64rem) {
    .home-hero {
        --hero-group-gap: clamp(32px, 17.777778vw, 256px);
        --hero-text-gap: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-height: 215px;
        /* Espaços efetivos medidos no frame desktop de altura 215 px:
           intro em y=26, com 147 px de altura, e 42 px restantes abaixo. */
        padding-block: 26px 42px;
    }

    .home-hero__name {
        flex: 1 0 236px;
    }

    .home-hero__intro {
        flex: 0 1 710px;
    }

    .home-hero__title,
    .home-hero__description {
        width: 100%;
    }
}

/* Projeto LIBERÔ: Figma 507:119 (desktop) e 507:44 (mobile). */
.home-projects {
    --project-padding-inline: 16px;
    --project-cover-gap: 46px;
    --project-title-size: 30px;
    --project-title-line-height: 29px;
    --project-title-width: 365px;
    --project-description-width: 381px;
    margin-block-start: 48px;
    padding: 32px var(--project-padding-inline);
    color: #000;
    font-family: var(--font-helvetica);
    font-style: normal;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--project-cover-gap);
}

.project-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 380 / 153;
}

.project-card__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    min-height: 284px;
}

.project-card__text,
.project-card__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.project-card__text {
    gap: 24px;
}

.project-card__heading {
    gap: 8px;
}

.project-card__meta {
    display: flex;
    align-items: center;
    gap: 23px;
    min-height: 40px;
    font-size: 20px;
    /* Helvetica LT Pro Light, peso 300 do Web Project Adobe. */
    font-weight: 300;
    line-height: 16px;
}

.project-card__name {
    width: 72px;
}

.project-card__year {
    width: 45px;
}

.project-card__separator {
    flex: 0 0 0;
    width: 0;
    height: 40px;
}

.project-card__separator img {
    max-width: none;
}

.project-card__title,
.project-card__description {
    max-width: 100%;
    margin: 0;
}

.project-card__title {
    width: var(--project-title-width);
    font-size: var(--project-title-size);
    font-weight: 700;
    line-height: var(--project-title-line-height);
}

.project-card__description {
    width: var(--project-description-width);
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
}

.project-card__link {
    color: var(--color-link-on-light);
    font-family: var(--font-operetta);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 4%;
    text-underline-position: from-font;
}

/* Um único link nativo cobre o card, sem links aninhados ou foco duplicado. */
.project-card__link::after {
    position: absolute;
    inset: 0;
    content: "";
}

.project-card__link:focus-visible {
    outline: none;
}

.project-card__link:focus-visible::after {
    outline: 2px solid var(--color-vivid-red);
    outline-offset: 4px;
}

@media (min-width: 48rem) {
    .home-projects {
        --project-padding-inline: 100px;
        --project-cover-gap: 48px;
        --project-title-size: 32px;
        --project-title-line-height: 31px;
        --project-title-width: 504px;
        --project-description-width: 468px;
    }

    .project-card__cover {
        aspect-ratio: 1240 / 500;
    }
}

/* Sobre mim: Figma 507:136 (desktop) e 507:61 (mobile). */
.home-about {
    --about-padding-inline: 16px;
    --about-sidebar-gap: 194px;
    --about-border-color: #595856;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 128px;
    min-height: 1768px;
    margin-block-start: 72px;
    padding: 48px var(--about-padding-inline) 32px;
    background-color: var(--color-clear-white);
    color: #000;
    font-family: var(--font-helvetica);
    font-style: normal;
    box-shadow: inset 0 1px 0 var(--about-border-color);
}

.home-about:focus-visible {
    outline: 2px solid var(--about-border-color);
    outline-offset: -2px;
}

.home-about__sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: var(--about-sidebar-gap);
    width: 100%;
    /* Altura do grupo no Figma; a lista ultrapassa sua caixa em 5 px,
       dentro do espaço livre de 128 px até a apresentação. */
    height: 487px;
}

.home-about__title,
.home-about__tools-title,
.home-about__bio p {
    margin: 0;
}

.home-about__title {
    flex-shrink: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 31px;
}

.home-about__tools {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 11px;
}

.home-about__tools-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
}

.home-about__tools-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
}

.home-about__tools-list li {
    min-height: 19px;
}

.home-about__content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    min-width: 0;
    min-height: 1041px;
}

.home-about__bio {
    font-size: 16px;
    font-weight: 400;
    /* Altura das linhas medida nas caixas de texto dos dois frames. */
    line-height: 16px;
}

.home-about__bio p + p {
    margin-block-start: 18px;
}

.home-about__photos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    width: 340px;
    max-width: 100%;
}

.home-about__photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.home-about__photo img {
    position: absolute;
    width: 100%;
    max-width: none;
}

.home-about__photo--portrait img {
    top: -4.9%;
    left: 0;
    height: 133.93%;
}

.home-about__photo--graduation img {
    inset: 0;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 48rem) {
    .home-about {
        --about-padding-inline: 100px;
    }
}

/* Duas colunas a partir de 64rem, como na Hero. Fotos fluidas para
   larguras intermediárias; em 1440 px, cada foto mede 340 × 340 px. */
@media (min-width: 64rem) {
    .home-about {
        --about-sidebar-gap: 153px;
        flex-direction: row;
        justify-content: space-between;
        gap: 32px;
        min-height: 663px;
    }

    .home-about__sidebar {
        flex: 0 0 166px;
        height: 498px;
    }

    .home-about__content {
        flex: 0 1 709px;
        min-height: 524px;
    }

    .home-about__photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 29px;
        width: 100%;
    }

    .home-about__photo--portrait img {
        top: -4.89%;
        left: -0.1%;
    }
}

/* O Footer compartilhado está em footer.css; sua composição da Home é preservada. */
/* Mantém o texto do CTA acima do link estendido ao card inteiro.
   Assim, somente “Ler mais” recebe hover, sem mudar o clique na capa. */
.project-card__label {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .home-header__link,
    .project-card__link {
        transition: color 200ms ease;
    }

    .home-header__link:hover,
    .project-card__link:has(.project-card__label:hover) {
        color: var(--color-link-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-header__link,
    .project-card__link {
        transition: none;
    }
}

/* Overlay progressivo: sem JavaScript, permanece oculto e a Home é acessível. */
.intro-is-active {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.home-intro {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    padding: 32px;
    background-color: var(--color-clear-white);
    touch-action: pinch-zoom;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
}

.home-intro[hidden] {
    display: none;
}

.home-intro--leaving {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.home-intro__logo {
    display: block;
    width: min(145.5px, 50%);
    height: auto;
    max-height: calc(50vh - 32px);
    max-height: calc(50svh - 32px);
    overflow: visible;
    transform-origin: center;
    animation: intro-logo-settle 600ms 1980ms ease both;
}

.home-intro__reveal {
    transform-box: fill-box;
    transform-origin: center top;
    animation: intro-logo-reveal 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.home-intro__reveal--v {
    transform-origin: center bottom;
    animation-duration: 1100ms;
}

.home-intro__reveal--left {
    animation-delay: 1000ms;
}

.home-intro__reveal--right {
    animation-delay: 1080ms;
}

@keyframes intro-logo-reveal {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes intro-logo-settle {
    from { transform: scale(1); }
    to { transform: scale(1.025); }
}

/* Visível somente ao receber foco: permite pular a introdução por teclado. */
.home-intro__skip {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.home-intro__skip:focus {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 20;
    width: auto;
    height: auto;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 12px 16px;
    overflow: visible;
    clip-path: none;
    background-color: var(--color-clear-white);
    color: var(--color-link-on-light);
    font-family: var(--font-helvetica);
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .home-intro {
        transition: none;
    }

    .home-intro__logo,
    .home-intro__reveal {
        animation: none;
        transform: none;
    }
}