/* ==========================================================================
   Global — brsilva.co
   Reset, typography, layout primitives, shared components.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity var(--duration-fast) ease;
}
a:hover { opacity: 0.6; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

::selection {
  background-color: var(--color-text);
  color: var(--color-bg);
}

/* ---- Layout Primitives ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--reading-width);
}

.section {
  padding-block: var(--space-section);
}

/* ---- Typography Utilities ---- */
.text-display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}

.text-heading {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.text-subheading {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.text-body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text-sec);
}

.text-caption {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-sec);
}

/* ---- Nav ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-sm) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(245, 243, 239, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) ease;
  visibility: hidden;
  opacity: 0;
}

.nav.is-scrolled {
  border-bottom-color: var(--color-border);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.nav__links {
  display: flex;
  gap: var(--space-md);
}

.nav__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-sec);
  transition: color var(--duration-fast) ease;
}

.nav__link:hover {
  color: var(--color-text);
  opacity: 1;
}

.nav__link.is-active {
  color: var(--color-text);
}

/* ---- Project Grid ---- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.project-card:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.project-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  position: relative;
}

.project-card__image-placeholder {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-placeholder);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.project-card__company {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-sec);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.project-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-sec);
  line-height: var(--lh-normal);
}

/* ---- Footer ---- */
.footer {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__links {
  display: flex;
  gap: var(--space-md);
}

.footer__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-sec);
}

.footer__link:hover {
  color: var(--color-text);
  opacity: 1;
}

.footer__note {
  font-size: var(--fs-xs);
  color: var(--color-placeholder);
}

@media (max-width: 600px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Section Number ---- */
.section-number {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-placeholder);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

/* ---- Image Placeholder (full-bleed) ---- */
.image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-placeholder--wide {
  border-radius: 0;
  margin-inline: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter) * 2);
}

.image-placeholder__text {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-placeholder);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Spacer ---- */
.spacer-nav { height: 64px; }

/* ---- Visually Hidden ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Portfolio editorial system, September 2026. */
:root{--color-bg:#f4f3ef;--color-bg-alt:#eae8e2;--color-text:#202329;--color-text-sec:#62656a;--color-border:#d5d4ce;--max-width:1360px;--gutter:clamp(24px,5vw,80px)}
body{font-family:var(--font-body);font-size:16px}a:focus-visible,button:focus-visible{outline:2px solid #597cba;outline-offset:6px}button{touch-action:manipulation}.nav{visibility:visible;opacity:1;padding:28px var(--gutter);background:rgba(244,243,239,.96)}.nav__logo{font-size:24px;font-weight:600;letter-spacing:-1px}.nav__links{gap:32px;align-items:center}.nav__link{font-size:13px}.nav-contact{margin-left:15px}.nav-contact span{margin-left:12px}.logo-dot{color:#636f84}.skip-link{position:fixed;left:20px;top:-100px;z-index:1000;background:white;color:black;padding:14px}.skip-link:focus{top:15px}.project-card{transition:none}.project-card:hover{transform:none}.project-card__image{border:0;border-radius:3px;background:#e6e5df;margin-bottom:22px;aspect-ratio:1.4}.project-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.3,1)}a.project-card:hover img{transform:scale(1.035)}.project-card__name{font-size:clamp(22px,2vw,29px);font-weight:500;letter-spacing:-.035em;margin-bottom:8px}.project-card__company{text-transform:none;letter-spacing:0;font-size:13px}.project-card__desc{font-size:14px;max-width:55ch}.case-status{font-size:12px;color:#666;margin-top:10px}.project-card--unavailable{opacity:.8}.footer{background:#171b22;color:#f4f3ef;padding:70px 0 30px;border:0}.footer__intro{color:#b8c0cb;font-size:14px;margin-bottom:25px}.footer__headline{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-size:clamp(38px,6vw,86px);letter-spacing:-.055em;line-height:1.15;color:inherit;padding-bottom:55px;border-bottom:1px solid #3b414b}.footer__headline span{font-size:.8em}.footer__inner{padding-top:28px;align-items:center;font-size:12px;line-height:1.8}.footer__links{gap:28px}.footer a{color:inherit}.footer__location{color:#abb3bf}.about-photo{display:flex;align-items:center;min-height:300px;background:#1c2633!important;border-radius:3px}.about-signature{font-family:var(--font-display);font-size:clamp(32px,5vw,68px);line-height:1.12;letter-spacing:-.04em;color:#e9edf4;padding:45px}.cs-hero-image{border-radius:3px!important;overflow:hidden}.cs-hero-image img{width:100%;height:100%;object-fit:cover}.cs-section__number{display:none}.cs-section__title{letter-spacing:-.035em}.text-caption{text-transform:none;letter-spacing:0}.cs-meta__label{text-transform:none!important;letter-spacing:0!important}
@media(max-width:600px){.nav{padding-top:23px;padding-bottom:23px}.nav__logo{font-size:21px}.nav__links{gap:20px}.nav-contact{display:none}.footer{padding-top:50px}.footer__headline{padding-bottom:35px}.footer__inner{align-items:flex-start;gap:22px}.footer__links{gap:25px}.about-signature{padding:24px}.project-card__image{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.project-card:hover img{transform:none}}
.project-card__image{aspect-ratio:14/9}.project-card__image img{object-fit:fill}.project-card__image .project-card__open{z-index:1}