/* ============================================================
   rodrigo-neves.com — base stylesheet
   Structured and quiet by default, alive on interaction.
   ============================================================ */

:root {
    /* tokens — the design system grows from here */
    --ink: #141414;
    --paper: #faf9f6;
    --muted: #6b6b66;
    --line: #e2e0da;
    --accent: #2b39ff;

    --font-body: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
    --measure: 62ch;
    --width: 72rem;
    --space: clamp(1.25rem, 4vw, 2.5rem);

    --ease: cubic-bezier(.25, .8, .25, 1);
    --t-fast: 160ms;
}

/* reset-lite */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; }
img, video { max-width: 100%; height: auto; display: block; }

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip; /* full-bleed sections use 100vw */
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* one grid for everything: header, main and footer share this rail */
.container {
    width: 100%;
    max-width: var(--width);
    margin-inline: auto;
    padding-inline: var(--space);
}

/* accessibility primitives */
.skip-link {
    position: absolute;
    left: var(--space);
    top: -3rem;
    padding: .5rem 1rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--space); z-index: 10; }

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

/* header */
.site-header {
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 2;
    background: var(--paper);
}

.site-header-inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space);
    padding-block: 1.25rem;
}

.site-mark {
    font-weight: 700;
    letter-spacing: -.01em;
    color: inherit;
    text-decoration: none;
}

.site-nav ul {
    display: flex;
    gap: clamp(1rem, 3vw, 2rem);
    list-style: none;
    padding: 0;
}

.site-nav a {
    color: inherit;
    text-decoration: none;
    position: relative;
}
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -.2em;
    height: 1px;
    background: currentColor;
    transition: right var(--t-fast) var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { right: 0; }

/* main */
main {
    flex: 1;
    padding-block: var(--space);
}

a { color: var(--accent); }

/* hero (generic: 404, simple pages) */
.hero { padding-block: clamp(3rem, 12vh, 8rem); }

/* home hero: full-bleed interactive field behind the type */
.hero-home {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: calc(-1 * var(--space)); /* meet the header hairline */
    min-height: min(85svh, 52rem);
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 10vh, 6rem);
}

.hero-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.hero-content { position: relative; z-index: 1; }

.hero-kicker {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8125rem;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    font-weight: 700;
    max-width: 20ch;
}

.hero-lede {
    max-width: var(--measure);
    margin-top: 1.5rem;
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    color: var(--muted);
}

.hero-cta { margin-top: 2.5rem; }

/* button */
.button {
    display: inline-block;
    padding: .75rem 1.5rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.button:hover { background: var(--accent); }
.button:active { transform: translateY(1px); }

/* footer */
.site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .875rem;
}
.site-footer .container { padding-block: var(--space); }

/* page furniture */
.page-head { padding-block: clamp(2rem, 6vh, 4rem) 1.5rem; }
.page-head h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}
.page-lede {
    max-width: var(--measure);
    margin-top: 1rem;
    color: var(--muted);
    font-size: 1.125rem;
}

.breadcrumb {
    padding-block: 1.5rem 0;
    font-size: .875rem;
    color: var(--muted);
}
.breadcrumb a { color: inherit; }

.empty-note { color: var(--muted); padding-block: 2rem; max-width: var(--measure); }

section h2, .about-section h2, .home-featured h2 {
    font-size: 1.375rem;
    letter-spacing: -.01em;
    margin-bottom: 1.5rem;
}

/* work filters */
.work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2.5rem;
}
.work-filters a {
    color: var(--muted);
    text-decoration: none;
    position: relative;
    padding-block: .25rem;
}
.work-filters a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transition: right var(--t-fast) var(--ease);
}
.work-filters a:hover { color: var(--ink); }
.work-filters a[aria-current] { color: var(--ink); }
.work-filters a[aria-current]::after { right: 0; }

/* project grid */
.work-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.project-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.project-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1efe9;
    margin-bottom: .875rem;
}
.project-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 480ms var(--ease);
}
.project-card-link:hover .project-card-media img { transform: scale(1.04); }

/* placeholder echoes the hero's topographic motif */
.project-card-ph {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-radial-gradient(circle at 70% 20%,
            transparent 0 13px, rgba(20, 20, 20, .05) 13px 14px),
        #f1efe9;
    transition: transform 480ms var(--ease);
}
.project-card-link:hover .project-card-ph { transform: scale(1.04); }

.project-card-title {
    font-size: 1.0625rem;
    line-height: 1.3;
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--t-fast) var(--ease);
}
.project-card-link:hover .project-card-title { background-size: 100% 1px; }

.project-card-meta {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--muted);
}
.project-card-year { margin-right: .625rem; }

/* home featured strip */
.home-featured { padding-block: clamp(2rem, 6vh, 4rem); }
.home-featured-more { margin-top: 2rem; }
.home-featured-more a { text-decoration: none; }
.home-featured-more a:hover { text-decoration: underline; }

/* case study */
.case-head { padding-block: 1.5rem 2rem; }
.case-head h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}
.case-tagline {
    max-width: var(--measure);
    margin-top: .75rem;
    color: var(--muted);
    font-size: 1.125rem;
}

.case-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .9375rem;
}
.case-facts dt {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .6875rem;
    color: var(--muted);
    margin-bottom: .125rem;
}
.case-facts dd { margin: 0; }

.case-hero { margin: 2.5rem 0; }
.case-hero img, .case-hero video { width: 100%; }

.case-gallery {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-block: 3rem;
}
.case-gallery figure { margin: 0; }
figcaption {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--muted);
}

/* prose (case bodies, posts, bio) */
.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol, .prose blockquote { margin-block: 1em; }
.prose h2 { margin-top: 2em; margin-bottom: .75em; font-size: 1.375rem; }
.prose h3 { margin-top: 1.5em; margin-bottom: .5em; font-size: 1.125rem; }
.prose img, .prose video { margin-block: 1.5em; }
.prose blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 1.25rem;
    color: var(--muted);
}

/* about */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 48rem) {
    .about-grid { grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); }
}
.about-aside-note {
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--muted);
}
.about-section { padding-block: clamp(2rem, 6vh, 4rem) 0; }

.timeline {
    list-style: none;
    padding: 0;
    border-left: 1px solid var(--line);
}
.timeline li {
    position: relative;
    padding: 0 0 2rem 1.75rem;
}
.timeline li::before {
    content: "";
    position: absolute;
    left: -4px;
    top: .5em;
    width: 7px;
    height: 7px;
    background: var(--accent);
}
.timeline h3 { font-size: 1.0625rem; }
.timeline-org { color: var(--ink); font-size: .9375rem; }
.timeline-dates {
    color: var(--muted);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .125rem;
}
.timeline-desc { margin-top: .5rem; max-width: var(--measure); color: var(--muted); }

/* blog */
.post-list { list-style: none; padding: 0; max-width: var(--measure); }
.post-list li { padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.post-teaser h2 { font-size: 1.375rem; line-height: 1.25; }
.post-teaser h2 a { color: inherit; text-decoration: none; }
.post-teaser h2 a:hover { color: var(--accent); }
.post-teaser time { font-size: .8125rem; color: var(--muted); display: block; margin-top: .25rem; }
.post-teaser p { margin-top: .625rem; color: var(--muted); }

.pagination {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    padding-block: 2rem;
    font-size: .9375rem;
}
.pagination a { text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination-state { color: var(--muted); }

.post-head { padding-block: 1.5rem 0; }
.post-head h1 {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    max-width: 26ch;
}
.post-head time { display: block; margin: .75rem 0 1.5rem; font-size: .875rem; color: var(--muted); }

/* contact */
.contact-block { padding-block: 1rem 3rem; }
.contact-email a {
    font-size: clamp(1.375rem, 3.5vw, 2.25rem);
    letter-spacing: -.01em;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
    transition: color var(--t-fast) var(--ease);
}
.contact-email a:hover { color: var(--accent); }
.contact-socials {
    list-style: none;
    padding: 0;
    margin-top: 2.5rem;
    display: flex;
    gap: 2rem;
}
.contact-socials a { text-decoration: none; }
.contact-socials a:hover { text-decoration: underline; }

/* motion is brand, but never at the reader's expense */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}