/* Portfólio Vítor Castro. Tokens primeiro, componentes depois. WCAG 2.2 AA. */
:root{
  --color-paper:#F2F3F1;--color-ink:#191919;--color-ink-muted:#555B54;--color-rule:#CBD0C8;--color-accent:#2F5D3A;--color-tint:#E3E8E0;--color-on-accent:#FFFFFF;
  color-scheme:light;
  --font:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --step--1:.875rem;--step-0:1.0625rem;--step-1:1.3125rem;--step-2:1.625rem;--step-3:2.0625rem;--step-4:2.5rem;
  --step-hero:clamp(2.5rem,8vw,5.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4.5rem;
  --container:70rem;--measure:38rem;--radius:4px;
  --header-h:3.5rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--color-paper:#151815;--color-ink:#ECEFEA;--color-ink-muted:#AEB5AB;--color-rule:#3B413A;--color-accent:#86C795;--color-tint:#222722;--color-on-accent:#10180F;color-scheme:dark}}
:root[data-theme="dark"]{--color-paper:#151815;--color-ink:#ECEFEA;--color-ink-muted:#AEB5AB;--color-rule:#3B413A;--color-accent:#86C795;--color-tint:#222722;--color-on-accent:#10180F;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--space-4))}
body{margin:0;padding-top:var(--header-h);background:var(--color-paper);color:var(--color-ink);font-family:var(--font);font-size:var(--step-0);line-height:1.6;font-weight:400;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-underline-offset:.2em;text-decoration-thickness:.08em}
a:hover{color:var(--color-ink)}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font);margin:0;line-height:1.1;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0}
main:focus{outline:none}
.skip{position:absolute;left:-999px;top:0;background:var(--color-ink);color:var(--color-paper);padding:var(--space-3) var(--space-4);z-index:60}
.skip:focus{left:var(--space-4);top:var(--space-4)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--space-5)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Barra do topo, fixa */
.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:50;background:var(--color-paper);border-bottom:1px solid var(--color-rule)}
.site-header .bar{height:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--space-5);display:flex;align-items:center;gap:var(--space-4)}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:var(--step-1);letter-spacing:-.02em;color:var(--color-ink);text-decoration:none;white-space:nowrap}
.site-nav{flex:1;min-width:0}
.site-nav ul{display:flex;flex-wrap:wrap;gap:0 var(--space-5);list-style:none}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-ink);text-decoration:none;font-weight:500}
.site-nav a:hover{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.25em}
.tools{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}

/* Switch de idioma: dois links em formato de interruptor. Funciona sem JavaScript */
.seg{display:inline-flex;height:2.5rem;border:2px solid var(--color-ink);border-radius:999px;overflow:hidden}
.seg a,.seg>span{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;padding:0 var(--space-2);font-weight:700;font-size:var(--step--1);text-decoration:none;color:var(--color-ink)}
.seg [aria-current]{background:var(--color-ink);color:var(--color-paper)}
.seg a:hover{background:var(--color-tint);color:var(--color-ink)}
.seg a:focus-visible{outline-offset:-4px}

/* Switch de tema: botão com role="switch" */
.switch{display:none;align-items:center;gap:var(--space-2);min-height:44px;padding:0;background:none;border:0;font:inherit;font-weight:600;font-size:var(--step--1);color:var(--color-ink);cursor:pointer}
.js .switch{display:inline-flex}
.switch__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.switch__track{position:relative;flex:0 0 auto;display:inline-block;width:3.25rem;height:1.875rem;border:2px solid var(--color-ink);border-radius:999px;background:var(--color-paper)}
.switch:hover .switch__track{background:var(--color-tint)}
.switch__icon{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;color:var(--color-ink)}
.switch__icon--sun{left:6px}
.switch__icon--moon{right:6px}
.switch__thumb{position:absolute;top:2px;left:2px;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--color-ink);transition:transform .15s ease}
.switch[aria-checked="true"] .switch__thumb{transform:translateX(1.375rem)}
.switch[aria-checked="true"] .switch__track{background:var(--color-tint)}

/* Botão do menu, só em telas estreitas e com JavaScript */
.menu-btn{display:none;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;min-width:44px;padding:0 var(--space-3);background:none;border:2px solid var(--color-ink);border-radius:var(--radius);color:var(--color-ink);font:inherit;font-weight:600;font-size:var(--step--1);cursor:pointer}
.menu-btn:hover{background:var(--color-tint)}
.menu-btn svg{width:18px;height:18px;flex:0 0 18px}
.menu-btn .menu-icon--close{display:none}
.menu-btn[aria-expanded="true"] .menu-icon--open{display:none}
.menu-btn[aria-expanded="true"] .menu-icon--close{display:block}

/* Botões */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--space-5);border:2px solid var(--color-accent);border-radius:var(--radius);font-weight:600;text-decoration:none}
.btn--solid{background:var(--color-accent);color:var(--color-on-accent)}
.btn--solid:hover{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.btn--line{color:var(--color-accent)}
.btn--line:hover{border-color:var(--color-ink);color:var(--color-ink)}

/* Selo de status: a forma carrega o significado e o texto sempre aparece */
.status{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--step--1);line-height:1.3;color:var(--color-ink)}
.status svg{width:14px;height:14px;flex:0 0 14px}
.status{min-width:0;overflow-wrap:anywhere}

/* Topo */
.hero{padding-block:var(--space-8) var(--space-7)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(14rem,21rem);gap:var(--space-7);align-items:end}
.hero h1{font-size:var(--step-hero);font-weight:800;line-height:.98;letter-spacing:-.035em}
.hero .lead{margin-top:var(--space-5);font-size:var(--step-2);line-height:1.3;font-weight:500;max-width:28ch;letter-spacing:-.01em}
.hero .sub{margin-top:var(--space-4);max-width:var(--measure);color:var(--color-ink-muted)}
.hero .actions{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero figure{margin:0}
.hero img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}

/* Seções */
.section{padding-block:var(--space-8)}
.section--rule{border-top:1px solid var(--color-rule)}
.split{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--space-4) var(--space-7)}
.split>h2{font-size:var(--step-1);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:var(--space-4)}
.prose>ul:first-child{margin-top:0}
.prose ul{list-style:none;margin-top:var(--space-3)}
.prose ul+p{margin-top:var(--space-4)}
.prose li{position:relative;padding-left:var(--space-5)}
.prose li+li{margin-top:var(--space-3)}
.prose li::before{content:"";position:absolute;left:0;top:.8em;width:.6rem;height:2px;background:var(--color-ink)}
.prose strong{font-weight:700}
.prose h3{font-size:var(--step-0);font-weight:700;letter-spacing:0;margin-top:var(--space-5)}
.prose h3:first-child{margin-top:0}
.prose h3+p,.prose h3+ul{margin-top:var(--space-2)}

/* Registro de projetos */
.section-title{font-size:var(--step-4);font-weight:800;letter-spacing:-.03em}
.section-intro{margin-top:var(--space-3);max-width:var(--measure);color:var(--color-ink-muted)}
.key{margin:var(--space-6) 0;padding:var(--space-5) 0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--space-3) var(--space-7)}
.key h3{font-size:var(--step--1);font-weight:700;line-height:1.5;letter-spacing:0}
.key dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-6)}
.key dt{margin:0}
.key dd{margin:var(--space-1) 0 0;font-size:var(--step--1);color:var(--color-ink-muted);line-height:1.45}
.ledger{list-style:none;border-top:2px solid var(--color-ink)}
.ledger-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"status" "main" "facts";gap:var(--space-3);padding:var(--space-6) var(--space-3);margin-inline:calc(var(--space-3) * -1);border-bottom:1px solid var(--color-rule)}
.ledger-row:hover{background:var(--color-tint)}
.ledger-row .status{grid-area:status;align-self:start}
.ledger-main{grid-area:main;min-width:0}
.ledger-row .facts{grid-area:facts;color:var(--color-ink-muted);font-size:var(--step--1);line-height:1.5}
.ledger-row h3{font-size:var(--step-3);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.ledger-row h3 a{color:var(--color-ink);text-decoration:none}
.ledger-row h3 a::after{content:"";position:absolute;inset:0}
.ledger-row:hover h3 a{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.15em}
.ledger-row .result{margin-top:var(--space-3);font-size:var(--step-1);font-weight:600;line-height:1.35;max-width:30ch}
.ledger-row .blurb{margin-top:var(--space-2);color:var(--color-ink-muted);max-width:var(--measure)}

/* Experiência */
.timeline{list-style:none;border-top:2px solid var(--color-ink);margin-top:var(--space-6)}
.job{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--space-3) var(--space-7);padding-block:var(--space-6);border-bottom:1px solid var(--color-rule)}
.job .when{font-weight:600;font-size:var(--step--1)}
.job .where{margin-top:var(--space-1);color:var(--color-ink-muted);font-size:var(--step--1);line-height:1.45}
.job h3{font-size:var(--step-2);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.job ul{list-style:none;margin-top:var(--space-3);max-width:var(--measure)}
.job li{position:relative;padding-left:var(--space-5)}
.job li+li{margin-top:var(--space-2)}
.job li::before{content:"";position:absolute;left:0;top:.8em;width:.6rem;height:2px;background:var(--color-ink)}
.job .more{margin-top:var(--space-3);font-size:var(--step--1)}
.job .more a{display:inline-flex;align-items:center;min-height:44px;margin-right:var(--space-5)}

/* IA e notas */
.ai-list{margin:var(--space-5) 0 0}
.ai-list div+div{margin-top:var(--space-5)}
.ai-list dt{font-weight:700}
.ai-list dd{margin:var(--space-1) 0 0;max-width:var(--measure)}
.note{margin-top:var(--space-5);color:var(--color-ink-muted);font-size:var(--step--1)}

/* Contato */
.contact h2.section-title{max-width:14ch}
.contact .links{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.contact .mail{display:inline-block;margin-top:var(--space-5);font-size:clamp(1.1rem,4.6vw,1.625rem);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}

/* Rodapé */
.site-footer{border-top:1px solid var(--color-rule);padding-block:var(--space-6);color:var(--color-ink-muted);font-size:var(--step--1)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3) var(--space-6)}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}

/* Página de projeto */
.back{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-4);font-weight:600}
.case-head{padding-block:var(--space-7) var(--space-6)}
.case-head h1{margin-top:var(--space-4);font-size:clamp(2.25rem,7vw,4.5rem);font-weight:800;line-height:1;letter-spacing:-.035em}
.case-head .lead{margin-top:var(--space-5);max-width:28ch;font-size:var(--step-2);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.case-meta{margin:var(--space-7) 0 0;padding-top:var(--space-5);border-top:2px solid var(--color-ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--space-4) var(--space-6)}
.case-meta dt{font-size:var(--step--1);font-weight:700}
.case-meta dd{margin:var(--space-1) 0 0;color:var(--color-ink-muted);line-height:1.5}
.case-section{padding-block:var(--space-6);border-top:1px solid var(--color-rule)}
.figure-big{font-size:var(--step-3);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--space-3)}
.lesson p{font-size:var(--step-2);line-height:1.3;font-weight:700;letter-spacing:-.015em;max-width:28ch}
.shot{margin:0 0 var(--space-6)}
.shot:last-child{margin-bottom:0}
.shot img{width:100%;border-radius:var(--radius);border:1px solid var(--color-rule)}
.shot figcaption{margin-top:var(--space-2);font-size:var(--step--1);color:var(--color-ink-muted);max-width:var(--measure)}
.case-cover{margin:0 0 var(--space-6)}
.case-cover:empty{display:none}
.gallery{max-width:none;min-width:0}
.case-nav{border-top:2px solid var(--color-ink);margin-top:var(--space-7);padding-block:var(--space-6) var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7);justify-content:space-between;align-items:flex-end}
.case-nav .label{font-size:var(--step--1);color:var(--color-ink-muted)}
.case-nav .next{display:block;margin-top:var(--space-1);font-size:var(--step-3);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--color-ink);text-decoration:none}
.case-nav .next:hover{text-decoration:underline;text-underline-offset:.15em}

.case-nav>div{min-width:0}
h1,h2,h3,.case-nav .next,.brand{overflow-wrap:anywhere}

@media (min-width:70rem){.site-nav{margin-left:var(--space-5)}}
/* Telas largas: etiqueta do switch de tema aparece */
@media (min-width:80rem){
  .switch__label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
}

/* Registro de projetos em duas colunas (tablet) e três (desktop) */
@media (min-width:40rem){
  .ledger-row{grid-template-columns:minmax(0,11rem) minmax(0,1fr);grid-template-areas:"status main" "status facts";gap:var(--space-3) var(--space-6)}
}
@media (min-width:64rem){
  .ledger-row{grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,15rem);grid-template-areas:"status main facts";gap:var(--space-4) var(--space-7)}
}

/* Barra compacta: menu recolhido, switches sempre visíveis */
@media (max-width:69.99rem){
  .brand{margin-right:auto}
  .tools{margin-left:0}
  .js .menu-btn{display:inline-flex}
  .js .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex:none;background:var(--color-paper);border-bottom:1px solid var(--color-rule);max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto}
  .js .nav-open .site-nav{display:block}
  .js .site-nav ul{flex-direction:column;gap:0;padding:var(--space-3) var(--space-5) var(--space-5);max-width:var(--container);margin:0 auto}
  .js .site-nav a{min-height:52px;font-size:var(--step-1);width:100%;border-bottom:1px solid var(--color-rule)}
  /* sem JavaScript: a barra deixa de ser fixa e o menu fica aberto, em linhas */
  html:not(.js) .site-header{position:static;height:auto}
  html:not(.js) body{padding-top:0}
  html:not(.js) .site-header .bar{flex-wrap:wrap;height:auto;padding-block:var(--space-2)}
  html:not(.js) .site-nav{flex-basis:100%;order:3}
}
@media (max-width:52rem){
  .hero{padding-block:var(--space-7) var(--space-6)}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero figure{max-width:17rem;order:-1}
  .split,.key,.job{grid-template-columns:minmax(0,1fr)}
  .key dl{grid-template-columns:minmax(0,1fr)}
  .section{padding-block:var(--space-7)}
}
@media (max-width:30rem){
  .site-header .bar{padding-inline:var(--space-3);gap:var(--space-2)}
  .wrap{padding-inline:var(--space-4)}
  .brand{font-size:1.0625rem}
  .menu-btn{padding:0}
  .menu-btn__text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tools{gap:var(--space-1)}
  .seg a,.seg>span{min-width:2.25rem;padding:0 var(--space-1)}
  .switch__track{width:2.875rem}
  .switch[aria-checked="true"] .switch__thumb{transform:translateX(1rem)}
  .section-title{font-size:var(--step-3)}
  .ledger-row h3{font-size:var(--step-2)}
  .ledger-row{margin-inline:0;padding-inline:0}
}
/* Telas muito estreitas (abaixo de 320 px): a barra passa para duas linhas */
@media (max-width:19.99rem){
  :root{--header-h:6rem}
  .site-header .bar{flex-wrap:wrap;align-content:center;row-gap:0}
  .tools{flex-basis:100%;justify-content:flex-end}
  .btn{width:100%;justify-content:center}
}
/* Celular deitado ou zoom alto: barra baixa e menu rolável */
@media (max-height:30rem){
  :root{--header-h:3rem}
  .brand,.menu-btn,.switch{min-height:40px}
}
/* Ampliação extrema de texto (acima de uns 200% em celular): a barra deixa de ser fixa e quebra linhas */
@media (max-width:11rem){
  :root{--header-h:0px}
  .site-header{position:static;height:auto}
  .site-header .bar{flex-wrap:wrap;height:auto;padding-block:var(--space-2);row-gap:var(--space-2)}
  .brand{white-space:normal}
  .tools{flex-basis:100%;flex-wrap:wrap;justify-content:flex-start}
  .js .site-nav{position:static;flex-basis:100%;max-height:none}
  html{scroll-padding-top:var(--space-4)}
  .wrap,.site-header .bar{padding-inline:var(--space-2)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.switch__thumb{transition:none}}
@media (forced-colors:active){
  .btn,.menu-btn,.seg{border:2px solid ButtonText}
  .switch__track{border:2px solid ButtonText}
  .switch__thumb{background:CanvasText}
  .seg [aria-current]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .status svg{forced-color-adjust:auto}
}
@media print{.site-header,.site-footer,.skip{display:none}body{background:#fff;color:#000;padding-top:0}}