/* Yatar — cor. Greige primeiro, escuro reservado.
   Os quatro tons de marca continuam intactos; o que mudou é a hierarquia:
   a superfície padrão agora é pedra (greige claro), e o breu passa a ser
   chão de fotografia e tinta profunda — não mais o fundo de tudo.
   Calibrado contra Karimoku Case Study / Norm Architects: terroso, nude,
   bege-cinza, marrom suave. Nenhuma cor saturada em nenhum lugar. */
:root{
  /* ——— Tons de marca (fechados, não mexer) ——— */
  --yatar-breu:#14100C;
  --yatar-madeira:#2A1F17;
  --yatar-incenso:#6B5D4F;
  --yatar-cera:#EAE0CC;

  /* ——— Tier greige. O corpo do sistema. ——— */
  --yatar-pedra:#E8E5DE;   /* base — o papel greige */
  --yatar-cal:#F1EFE9;     /* elevado — card sobre pedra */
  --yatar-linho:#DCD7CD;   /* rebaixado, divisor, campo */
  --yatar-argila:#B7AFA2;  /* cinza-marrom médio, estado secundário */
  --yatar-tinta:#2E2822;   /* texto — quase-preto quente, nunca #000 */

  /* Degrau escuro derivado, para quando o breu é o chão */
  --yatar-carvao:#1C1611;

  /* Tinta especial — SOMENTE impresso (hot-stamping, verniz, gravação).
     Proibido como cor de tela. Existe aqui para especificação de gráfica. */
  --print-ouro-velho:#A47E3B;

  /* A luz da fenda. Só luz: halo atrás de imagem, borda de brilho.
     Nunca preenchimento de área, texto ou fundo. */
  --glow-fenda:#FFB25E;
  --glow-fenda-soft:rgba(255,178,94,.20);

  /* ——— Semântico: greige (padrão) ——— */
  --surface-base:var(--yatar-pedra);
  --surface-raised:var(--yatar-cal);
  --surface-sunken:var(--yatar-linho);
  --surface-inverse:var(--yatar-breu);

  --text-primary:var(--yatar-tinta);
  --text-secondary:rgba(46,40,34,.72);
  /* O greige suporta TRÊS níveis de texto em AA, não quatro: entre #2E2822 e #E8E5DE
     não cabe um quarto degrau que passe 4,5:1. Aqui muted e meta são o mesmo valor
     (5,05:1 sobre pedra) — o token existe para o código não quebrar, não para criar
     um degrau novo. No tema breu os quatro níveis existem de verdade. */
  --text-muted:var(--yatar-incenso);
  --text-meta:var(--yatar-incenso);
  --text-inverse:var(--yatar-cera);

  --border-hairline:rgba(46,40,34,.13);
  --border-strong:rgba(46,40,34,.26);

  /* Ação. Não há cor de destaque: a ação é o próprio texto com um fio embaixo. */
  --action-fg:var(--yatar-tinta);
  --action-rule:rgba(46,40,34,.30);
  --action-fg-hover:#14100C;
  --action-rule-hover:var(--yatar-tinta);
}

/* ——— Tema breu: para fotografia da peça acesa e superfícies de noite ——— */
[data-theme="breu"],.theme-breu{
  --surface-base:var(--yatar-breu);
  --surface-raised:var(--yatar-carvao);
  --surface-sunken:#0B0908;
  --surface-inverse:var(--yatar-pedra);

  --text-primary:var(--yatar-cera);
  --text-secondary:rgba(234,224,204,.70);
  --text-muted:rgba(234,224,204,.44);
  --text-meta:#8F7F6B;
  --text-inverse:var(--yatar-tinta);

  --border-hairline:rgba(234,224,204,.11);
  --border-strong:rgba(234,224,204,.24);

  --action-fg:var(--yatar-cera);
  --action-rule:rgba(234,224,204,.34);
  --action-fg-hover:#FFFBF2;
  --action-rule-hover:var(--yatar-cera);
}
/* Yatar — tipografia. Duas famílias, na lógica Karimoku Case Study:
   uma sans neutra e quieta como núcleo, uma serifa old-style como contraponto.

   SUBSTITUIÇÕES SINALIZADAS — as duas fontes da referência não são livres:
     Case Study Sans (custom, Kontrapunkt) → Hanken Grotesk
     Sabon (Linotype, paga)                → EB Garamond
   EB Garamond é a substituição honesta: Sabon é uma revivência de Garamond
   por Tschichold, então a linhagem é a mesma. Trocáveis se o Eduardo
   licenciar as originais.

   O wordmark não é nenhuma das duas — é imagem. Não existe token de fonte
   para ele de propósito: "YATAR" é sempre o SVG em curvas de assets/logo/. */

/* O @import do Google Fonts saiu daqui: as duas famílias são hospedadas
   junto com o site em src/styles/fonts.css. Valores e nomes intactos. */

:root{
  --font-core:"Hanken Grotesk",system-ui,sans-serif;
  --font-serif:"EB Garamond",Georgia,serif;

  --weight-air:200;   /* @kind other */
  --weight-light:300; /* @kind other */
  --weight-plain:400; /* @kind other */
  /* 400 é a ênfase máxima; não existe bold no sistema. */

  /* Escala. Sentence case, não caixa baixa forçada: Karimoku é sereno, não
     estilizado. O ar vem do entrelinha e da margem, não do tracking apertado. */
  --type-display-1:clamp(46px,5.6vw,88px);
  --type-display-2:clamp(34px,4vw,60px);
  --type-display-3:clamp(26px,2.6vw,40px);
  --type-title:24px;
  --type-subtitle:19px;
  --type-body-lg:17.5px;
  --type-body:16px;
  --type-body-sm:14px;
  --type-meta:12px;
  --type-label:10.5px;

  --lh-display:1.14; /* @kind other */
  --lh-title:1.28;   /* @kind other */
  --lh-body:1.76;    /* @kind other */
  --lh-meta:1.66;    /* @kind other */

  --track-display:-.008em;
  --track-body:.002em;
  --track-label:.18em;     /* rótulo versalete — Karimoku espaça, sem exagero */
  --track-descritor:.24em; /* STUDIO na trava — travado pela marca */

  --measure:66ch; /* @kind other */
}

/* Primitivas. Aplique como classe; nenhum estilo global de tag. */
.y-display-1{font:var(--weight-air) var(--type-display-1)/var(--lh-display) var(--font-core);letter-spacing:var(--track-display);text-wrap:balance}
.y-display-2{font:var(--weight-air) var(--type-display-2)/var(--lh-display) var(--font-core);letter-spacing:var(--track-display);text-wrap:balance}
.y-display-3{font:var(--weight-light) var(--type-display-3)/1.22 var(--font-core);letter-spacing:var(--track-display);text-wrap:balance}
.y-title{font:var(--weight-light) var(--type-title)/var(--lh-title) var(--font-core);letter-spacing:0}
.y-subtitle{font:var(--weight-light) var(--type-subtitle)/1.46 var(--font-core);letter-spacing:0}
.y-body-lg{font:var(--weight-light) var(--type-body-lg)/var(--lh-body) var(--font-core);letter-spacing:var(--track-body);max-width:var(--measure);text-wrap:pretty}
.y-body{font:var(--weight-light) var(--type-body)/var(--lh-body) var(--font-core);letter-spacing:var(--track-body);max-width:var(--measure);text-wrap:pretty}
.y-body-sm{font:var(--weight-light) var(--type-body-sm)/1.68 var(--font-core);letter-spacing:var(--track-body)}
.y-label{font:var(--weight-light) var(--type-label)/1.6 var(--font-core);letter-spacing:var(--track-label);text-transform:uppercase}
/* Especificação: medida, luz, coordenada, edição. Sans com tabular — não mono.
   Karimoku resolve número na própria sans; não há terceira voz. */
.y-spec{font:var(--weight-light) var(--type-meta)/var(--lh-meta) var(--font-core);letter-spacing:.03em;font-variant-numeric:tabular-nums}

/* Contraponto serifado — o papel da Sabon. Citação, número de coleção,
   abertura editorial. Nunca em interface, nunca em rótulo. */
.y-serif{font:400 var(--type-subtitle)/1.5 var(--font-serif);letter-spacing:.004em}
.y-serif-display{font:400 var(--type-display-3)/1.24 var(--font-serif);letter-spacing:-.004em;text-wrap:balance}
.y-serif-quote{font:italic 400 var(--type-body-lg)/1.66 var(--font-serif);letter-spacing:.004em;max-width:52ch;text-wrap:pretty}
/* Yatar — espaço. Base 4. O sistema é generoso: quando em dúvida, o maior. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:192px;

  --gutter:var(--space-6);
  --pad-section:var(--space-9);   /* respiro vertical de seção */
  --pad-edge:var(--space-8);      /* margem lateral de página */
  --max-page:1240px;
  --grid-cols:12; /* @kind other */

  /* Área de proteção da marca: x = 0,24 × altura do emblema. */
  --logo-clear-ratio:.24; /* @kind other */

  /* Raio. Zero. Nada na Yatar é arredondado — nem card, nem imagem, nem botão. */
  --radius-none:0;
}
/* Yatar — movimento. Só fade e deslocamento mínimo. Nada de bounce, spring, escala. */
:root{
  --ease-yatar:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur-instant:120ms; /* @kind other */
  --dur-quick:240ms; /* @kind other */
  --dur-calm:600ms; /* @kind other */
  --dur-slow:1200ms; /* @kind other */   /* entrada de imagem em fade */
  --rise:12px;         /* deslocamento máximo de entrada */
}
@keyframes y-fade-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes y-fade{from{opacity:0}to{opacity:1}}
.y-enter{animation:y-fade-rise var(--dur-calm) var(--ease-yatar) both}
.y-enter-slow{animation:y-fade var(--dur-slow) var(--ease-yatar) both}
@media (prefers-reduced-motion:reduce){.y-enter,.y-enter-slow{animation:none}}
/* Yatar — fontes hospedadas junto com o site.
   Mesmos arquivos do Google Fonts, baixados no build de 07-set-2026.
   Subsets latin e latin-ext apenas. Nenhuma requisição a terceiro em runtime. */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EBGaramond-400i-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EBGaramond-400i-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EBGaramond-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EBGaramond-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/EBGaramond-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/EBGaramond-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-300i-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-300i-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-200-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-200-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-300-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--yatar-breu);color:var(--yatar-cera);font:var(--weight-light) var(--type-body)/1.5 var(--font-core);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(234,224,204,.32);transition:border-color var(--dur-quick) var(--ease-yatar)}
a:hover,a:focus-visible{border-color:var(--yatar-cera);outline:0}
.pg{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:var(--space-5);overflow:hidden}
.bg{position:absolute;inset:0;z-index:0}
.bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;animation:y-fade var(--dur-slow) var(--ease-yatar) forwards}
.bg::after{content:"";position:absolute;inset:0;background:rgba(20,16,12,.46)}
.pg > :not(.bg){position:relative;z-index:1}
.hd{display:flex;justify-content:center}
.hd svg{height:22px;width:auto;display:block;color:var(--yatar-cera)}
.mid{align-self:center;justify-self:center;text-align:center;opacity:0;animation:y-fade-rise var(--dur-calm) var(--ease-yatar) .2s forwards}
.mid h1{margin:0;font:400 clamp(56px,9vw,140px)/.92 var(--font-serif);letter-spacing:-.02em}
.mid p{margin:var(--space-5) auto 0;max-width:34ch}
.ft{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--type-body-sm)}
@keyframes y-fade{to{opacity:1}}
@media (max-width:600px){.ft{flex-direction:column;align-items:center;text-align:center}}
@media (prefers-reduced-motion:reduce){.bg img,.mid{animation:none;opacity:1}}