/* Ushi no Musume. Base: protótipo aprovado (docs/proposta-02/assets/style.css, proposta 02 + home B).
   A paleta fica toda nos tokens do :root: o ajuste de cores pedido pela Mari muda só ali. */

/* Fontes servidas pelo próprio site (só o subconjunto latino; licença OFL em static/fonts). */
@font-face{ font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-black-latin.4b6914a69e6a.woff2") format('woff2'); }
@font-face{ font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/space-grotesk-latin.87c506d88b9f.woff2") format('woff2'); }
@font-face{ font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-400-latin.049dfc5919c2.woff2") format('woff2'); }
@font-face{ font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-mono-700-latin.e5e908997a45.woff2") format('woff2'); }

:root{
  --paper: #f4efe4;
  --paper-raised: #fffcf5;
  --paper-deep: #e9e0cf;
  --ink: #1b1414;
  --ink-soft: #4b4140;
  --ink-mute: #85797a;
  --wine: #7d1622;
  --wine-deep: #560d16;
  --wine-soft: #f3dfe0;
  --gold: #b9874f;
  --gold-soft: #f1e2cc;
  --line: rgba(27,20,20,0.16);
  --line-strong: rgba(27,20,20,0.55);
  --radius-md: 8px;
  --hard-shadow: 5px 5px 0 var(--ink);
  --hard-shadow-sm: 3px 3px 0 var(--ink);
  --gutter: 10px;
  --nav-h: 76px;
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
a{ color: inherit; }
img{ max-width: 100%; height: auto; display: block; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; line-height: 1.05; }
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }
section{ padding: 72px 0; }
.eyebrow{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--wine); font-weight: 700; }
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- menu fixo: três portas em destaque ---------- */
header.site{ position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 3px solid var(--ink); }
.nav{ max-width: 1240px; margin: 0 auto; padding: 0 32px; height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
/* logo da Mari com fundo transparente, direto sobre o papel */
.brand{ display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img{ height: 56px; width: auto; }
nav.doors{ display: flex; gap: 10px; margin-left: auto; }
nav.doors a{
  font-family: var(--font-display); font-size: 17px; letter-spacing: .01em; text-decoration: none; color: var(--ink);
  padding: 11px 20px; border: 2.5px solid var(--ink); border-radius: 6px; background: var(--paper-raised);
  box-shadow: var(--hard-shadow-sm); transition: transform .1s, box-shadow .1s, background .15s;
}
nav.doors a:hover{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
nav.doors a.current{ background: var(--wine); color: #fff; }
nav.minor{ display: flex; gap: 16px; font-size: 14px; font-weight: 600; }
nav.minor a{ text-decoration: none; color: var(--ink-soft); }
nav.minor a:hover, nav.minor a.current{ color: var(--wine); text-decoration: underline; text-underline-offset: 4px; }

/* barra inferior no celular: as mesmas três portas ao alcance do polegar */
.tabbar{ display: none; }

/* ---------- botões ---------- */
.btn{
  font-family: var(--font-body); font-weight: 700; font-size: 15px; text-decoration: none;
  padding: 13px 24px; border-radius: 6px; display: inline-flex; align-items: center; gap: 8px;
  border: 2.5px solid var(--ink); cursor: pointer; box-shadow: var(--hard-shadow);
  transition: transform .12s, box-shadow .12s; background: var(--paper-raised); color: var(--ink);
}
.btn:hover{ transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.btn-wine{ background: var(--wine); color: #fff; }
.btn-gold{ background: var(--gold); color: var(--ink); }

/* ---------- home: vitrine de ilustrações ---------- */
.showcase{ padding: 0; position: relative; background: var(--ink); }
.wall{ display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-rows: 0; gap: 6px; padding: 6px; height: max(520px, calc(100vh - var(--nav-h) - 190px)); overflow: hidden; }
.wall img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 2px; min-height: 0; }
.wall img:nth-child(1), .wall img:nth-child(6){ grid-column: span 2; grid-row: span 2; }
.wall-fade{ position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(180deg, rgba(27,20,20,0), var(--ink)); pointer-events: none; }
.showcase-title{
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); z-index: 2;
  background: var(--paper-raised); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--wine);
  padding: 22px 30px; text-align: center; width: min(560px, calc(100% - 40px)); display: grid; gap: 8px;
}
.showcase-title h1{ font-size: clamp(26px, 3.4vw, 42px); }
.showcase-title h1 em{ font-style: normal; color: var(--wine); }
.showcase-title p{ margin: 0; color: var(--ink-soft); }
.door-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 32px 26px; max-width: 1240px; margin: 0 auto; }
.door{
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink);
  background: var(--paper-raised); border: 2.5px solid var(--ink); border-radius: 8px; padding: 10px; box-shadow: var(--hard-shadow);
  transition: transform .12s, box-shadow .12s;
}
.door:hover{ transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.door img{ width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 2px solid var(--ink); flex: none; }
.door b{ font-family: var(--font-display); font-weight: 400; font-size: 20px; display: block; line-height: 1.1; }
.door span{ font-size: 13px; color: var(--ink-soft); }

/* ---------- blocos da home ---------- */
.launch{ background: var(--wine); color: #fff; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.launch-grid{ display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.launch-cover{ border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: #fff; transform: rotate(-2deg); }
.launch .eyebrow{ color: var(--gold); }
.launch h2{ font-size: clamp(32px, 4vw, 50px); margin: 10px 0 16px; }
.launch p{ max-width: 56ch; margin: 0 0 22px; opacity: .92; font-size: 17px; }
.launch .btns{ display: flex; gap: 12px; flex-wrap: wrap; }
.example-tag{ font-family: var(--font-mono); font-size: 11px; background: var(--gold); color: var(--ink); padding: 2px 8px; border-radius: 100px; vertical-align: middle; }

.latest-head{ display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.latest-head h2{ font-size: 30px; margin-top: 6px; }
.strip{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.strip a{ aspect-ratio: 3/4; border: 2.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: #fff; box-shadow: var(--hard-shadow-sm); }
.strip img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.strip a:hover img{ transform: scale(1.05); }

/* ---------- cabeçalho de página ---------- */
.page-head{ padding: 40px 0 28px; border-bottom: 3px solid var(--ink); }
.page-head h1{ font-size: clamp(32px, 4vw, 46px); margin-top: 6px; }
.page-head p{ font-size: 17px; color: var(--ink-soft); max-width: 62ch; margin: 12px 0 0; }

/* ---------- galeria: filtros e grade ---------- */
.filters{ position: sticky; top: var(--nav-h); z-index: 30; background: var(--paper); padding: 14px 0; border-bottom: 1px solid var(--line); }
.chips{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip{
  font: 700 14px var(--font-body); border: 2px solid var(--ink); background: var(--paper-raised); color: var(--ink);
  padding: 7px 14px; border-radius: 100px; cursor: pointer;
}
.chip[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.chip .n{ font: 400 11px var(--font-mono); opacity: .7; margin-left: 4px; }
.years{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.years .chip{ font-size: 12px; padding: 4px 11px; border-width: 1.5px; }
.masonry{ columns: 4 220px; column-gap: 16px; padding-top: 22px; }
.masonry button{ display: block; width: 100%; padding: 0; border: 2.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: #fff; margin: 0 0 16px; break-inside: avoid; cursor: zoom-in; box-shadow: var(--hard-shadow-sm); }
.masonry img{ width: 100%; height: auto; transition: transform .4s; }
.masonry button:hover img{ transform: scale(1.03); }
.more{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 0 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }

/* ---------- commissions: preço na cara ---------- */
.tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 22px; }
.tab{ font: 400 17px var(--font-display); border: 2.5px solid var(--ink); background: var(--paper-raised); color: var(--ink); padding: 10px 18px; border-radius: 6px; cursor: pointer; box-shadow: var(--hard-shadow-sm); }
.tab[aria-selected="true"]{ background: var(--wine); color: #fff; }
.tab .from{ display: block; font: 400 11px var(--font-mono); opacity: .8; }
.comm{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.comm-examples{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.comm-examples img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 2.5px solid var(--ink); border-radius: 4px; background: #fff; cursor: zoom-in; }
.comm-examples img:first-child{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%; }
.prices{ background: var(--paper-raised); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: var(--hard-shadow); overflow: hidden; }
.prices table{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices th, .prices td{ padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.prices th{ font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); background: var(--gold-soft); }
.prices td.v{ font: 700 20px var(--font-mono); white-space: nowrap; }
.prices td.x{ font: 13px var(--font-mono); color: var(--ink-soft); }
.prices tr:last-child td{ border-bottom: 0; }
.comm-cta{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.note{ font-size: 13.5px; color: var(--ink-soft); }
.sheet-band{ margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; background: var(--gold-soft); border: 2.5px solid var(--ink); border-radius: 8px; padding: 22px; }
.sheet-band img{ border: 2px solid var(--ink); border-radius: 4px; background: #fff; }
.sheet-band h3{ font-size: 24px; }
.sheet-band .v{ font: 700 26px var(--font-mono); color: var(--wine); }

/* ---------- publicações ---------- */
.pubs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.pub{ background: var(--paper-raised); border: 2.5px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: var(--hard-shadow); display: flex; flex-direction: column; }
.pub .cover{ aspect-ratio: 4/3; background: var(--ink); border-bottom: 2.5px solid var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pub .cover img{ width: 100%; height: 100%; object-fit: cover; }
.pub .cover .ph{ color: var(--gold); font-family: var(--font-mono); font-size: 12px; text-align: center; padding: 20px; }
.pub .body{ padding: 16px 18px 20px; display: grid; gap: 6px; flex: 1; align-content: start; }
.pub .kind{ font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wine); }
.pub h3{ font-size: 21px; }
.pub p{ margin: 0; font-size: 14px; color: var(--ink-soft); }
.pub .links{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pub .links a{ font: 700 13px var(--font-body); border: 2px solid var(--ink); border-radius: 100px; padding: 4px 12px; text-decoration: none; }

/* ---------- sobre e contato ---------- */
.about-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.about-grid .portrait{ border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--wine); background: #fff; }
.about-grid p{ color: var(--ink-soft); font-size: 17px; margin: 0 0 16px; }
.tag-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag{ font-family: var(--font-mono); font-size: 12px; border: 2px solid var(--ink); border-radius: 100px; padding: 5px 12px; background: var(--paper-raised); }
.contact-card{ background: var(--paper-raised); border: 3px solid var(--ink); border-radius: 10px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; box-shadow: 9px 9px 0 var(--ink); }
.contact-form{ display: flex; flex-direction: column; gap: 12px; }
.contact-form label{ font: 700 13px var(--font-body); display: grid; gap: 4px; }
.contact-form input, .contact-form textarea, .contact-form select{ width: 100%; font: 15px var(--font-body); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: 12px 14px; }
.contact-form small{ font: 12px var(--font-mono); color: var(--wine); display: none; }
.contact-form small.show{ display: block; }
.contact-info{ display: grid; gap: 14px; align-content: start; }

/* ---------- rodapé ---------- */
footer.site{ border-top: 3px solid var(--ink); padding: 30px 0; margin-top: 30px; }
.foot-row{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font: 13px var(--font-mono); color: var(--ink-mute); }
.foot-row a{ text-decoration: none; } .foot-row a:hover{ color: var(--wine); }
.foot-links{ display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- lightbox ---------- */
.lightbox{ position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20,12,12,.86); }
.lightbox.open{ display: flex; }
.lightbox img{ max-width: min(92vw, 1100px); max-height: 86vh; width: auto; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--wine); background: #fff; }
.lightbox button{ position: absolute; border: 2px solid var(--ink); background: var(--paper-raised); color: var(--ink); width: 46px; height: 46px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.lb-close{ top: 18px; right: 18px; } .lb-prev{ left: 18px; top: 50%; } .lb-next{ right: 18px; top: 50%; }

/* ---------- tablet ---------- */
@media (max-width: 1080px){
  nav.minor{ display: none; }
  nav.doors a{ font-size: 15px; padding: 9px 14px; }
  .strip{ grid-template-columns: repeat(3, 1fr); }
  .comm{ grid-template-columns: 1fr; }
}

/* ---------- celular ---------- */
@media (max-width: 760px){
  :root{ --nav-h: 60px; }
  .wrap{ padding: 0 16px; }
  section{ padding: 48px 0; }
  .nav{ padding: 0 16px; gap: 12px; }
  .brand img{ height: 42px; }
  nav.doors{ display: none; }
  .nav .contact-link{ margin-left: auto; font: 700 14px var(--font-body); text-decoration: underline; }
  body{ padding-bottom: 72px; }
  .tabbar{
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--ink); border-top: 3px solid var(--gold); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a{ color: var(--paper); text-decoration: none; text-align: center; padding: 10px 4px 12px; font: 400 14px var(--font-display); display: grid; gap: 2px; justify-items: center; }
  .tabbar a svg{ width: 22px; height: 22px; }
  .tabbar a.current{ color: var(--gold); }
  .wall{ grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); height: 470px; }
  .showcase-title{ top: 50%; padding: 16px; }
  .door-row{ grid-template-columns: 1fr; padding: 14px 16px 22px; }
  .launch-grid{ grid-template-columns: 1fr; gap: 26px; }
  .launch-cover{ max-width: 220px; }
  .strip{ grid-template-columns: repeat(2, 1fr); }
  .masonry{ columns: 2 140px; column-gap: 10px; } .masonry button{ margin-bottom: 10px; }
  .filters{ top: var(--nav-h); }
  .comm-examples{ grid-template-columns: repeat(2, 1fr); }
  .prices th, .prices td{ padding: 10px 12px; } .prices td.v{ font-size: 17px; }
  .sheet-band, .about-grid, .contact-card{ grid-template-columns: 1fr; }
  .contact-card{ padding: 22px; }
  .lb-prev, .lb-next{ top: auto; bottom: 18px; }
  .page-head{ padding: 20px 0 12px; } .page-head h1{ font-size: 27px; } .page-head p{ font-size: 15px; margin-top: 8px; }
  .tabs{ flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 4px; padding: 0 16px 8px; scrollbar-width: none; }
  .tab{ flex: none; font-size: 15px; padding: 8px 12px; }
  .chips{ flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .chip{ flex: none; } .years{ flex-wrap: nowrap; overflow-x: auto; margin: 8px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
  .filters{ padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; } html{ scroll-behavior: auto; } }

.contact-link{ display: none; }
@media (max-width: 760px){ .nav .contact-link{ display: inline; } }

/* commissions e portas no tablet e no celular: preço primeiro, exemplos menores */
@media (max-width: 1080px){
  .comm{ gap: 18px; } .comm > div:last-child{ order: -1; }
  .comm-examples{ grid-template-columns: repeat(4, 1fr); }
  .comm-examples img:first-child{ grid-column: auto; grid-row: auto; aspect-ratio: 3/4; height: auto; }
  .comm-examples img:nth-child(n+5){ display: none; }
}
@media (max-width: 760px){
  .comm-examples{ grid-template-columns: repeat(3, 1fr); } .comm-examples img:nth-child(n+4){ display: none; }
}

/* ---------- portfólio curado: poucas peças, em séries, com o básico de cada uma ---------- */
.example-note{ font-size: 13px !important; margin-top: 10px !important; }
.series{ display: grid; gap: 16px; margin-bottom: 44px; }
.series h2{ font-size: 26px; display: flex; align-items: center; gap: 14px; }
.series h2::after{ content: ""; flex: 1; height: 3px; background: var(--ink); }
.pieces{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.piece{ margin: 0; display: grid; gap: 10px; }
.piece button{ padding: 0; border: 2.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: var(--hard-shadow); aspect-ratio: 4/5; }
.piece img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .4s; }
.piece button:hover img{ transform: scale(1.03); }
.piece figcaption{ display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.piece figcaption b{ font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.piece figcaption span{ font: 12px var(--font-mono); color: var(--ink-mute); }
.gallery-cta{ display: flex; justify-content: center; padding: 10px 0 20px; }
@media (max-width: 760px){
  .pieces{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .series h2{ font-size: 22px; }
  .piece figcaption{ flex-direction: column; gap: 0; }
}

[hidden]{ display: none !important; }

/* ---------- complementos do site (fora do protótipo) ---------- */
/* filtros da galeria são links (funcionam sem JS); o estado ativo usa aria-current */
a.chip{ text-decoration: none; display: inline-block; }
.chip[aria-current="true"]{ background: var(--ink); color: var(--paper); }
.htmx-request .masonry, .htmx-request.more{ opacity: .6; transition: opacity .2s; }
/* commissions fechadas */
.closed-notice{ background: var(--wine-soft); border: 2.5px solid var(--ink); border-radius: 6px; padding: 12px 16px; color: var(--ink) !important; font-weight: 600; }
.comm-desc{ margin: 0 0 12px; }
/* sobre: sem retrato, o texto ocupa a largura de leitura */
.about-grid-solo{ grid-template-columns: minmax(0, 62ch); }
/* páginas de texto (termos de serviço) */
.texto{ max-width: 68ch; }
.texto ul{ padding-left: 1.2em; display: grid; gap: 10px; }
.texto p, .texto li{ color: var(--ink-soft); font-size: 17px; }
.texto h2, .texto h3{ margin: 28px 0 10px; }

/* Formulário de contato: avisos e campo-isca do anti-spam (fora da tela, invisível para pessoas). */
.contact-error{ font: 13px var(--font-mono); color: var(--wine); }
.contact-done{ display: flex; flex-direction: column; gap: 16px; align-items: flex-start; align-self: center; }
.contact-ok{ font: 700 17px var(--font-body); color: var(--ink); }
.contact-form .hp{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }