/* ==========================================================================
   Thikará Sake — sistema visual
   Laca (urushi) + ouro (maki-e) sobre washi. Piedade/SP, desde 2009.
   ========================================================================== */

:root{
  /* tinta */
  --ink:        #101418;
  --ink-2:      #171D22;
  --ink-3:      #222A31;
  /* papel */
  --washi:      #EFEDE5;
  --washi-2:    #E5E2D7;
  --paper:      #F7F5EF;
  /* acentos */
  --kohaku:     #B8822B;   /* âmbar do sake maturado */
  --kohaku-lt:  #DCAE55;
  --seiji:      #6E8F7E;   /* celadon */
  --seiji-lt:   #9DBCAC;
  /* neutros com viés azul da tinta */
  --muted:      #6E777E;
  --muted-d:    #98A3AB;
  --rice:       #E9E5D9;

  --line:       rgba(16,20,24,.16);
  --line-soft:  rgba(16,20,24,.08);
  --line-d:     rgba(233,229,217,.18);
  --line-d-soft:rgba(233,229,217,.09);

  --f-display: "Shippori Mincho B1", "Shippori Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  --f-body:    "Zen Kaku Gothic New", "Hiragino Sans", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: 1140px;
  --gut: clamp(20px, 5vw, 48px);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--washi);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

::selection{ background:var(--kohaku); color:var(--paper); }

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

/* ---------- estrutura ---------- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.band{ padding-block:clamp(56px,8vw,104px); }
.band--dark{ background:var(--ink); color:var(--rice); }
.band--paper{ background:var(--paper); }
.band--washi{ background:var(--washi); }
.band--tight{ padding-block:clamp(40px,5vw,64px); }

.band--dark a{ color:var(--rice); }

/* ---------- tipografia ---------- */

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}

h1{ font-size:clamp(2.5rem,6.2vw,4.6rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); letter-spacing:-.006em; }
h4{ font-size:1.02rem; font-weight:600; }

p{ margin:0; }

.prose{ max-width:64ch; }
.prose p + p{ margin-top:1.05em; }

.lead{
  font-size:clamp(1.06rem,1.55vw,1.24rem);
  line-height:1.62;
  color:var(--ink);
}
.band--dark .lead, .hero .lead{ color:var(--rice); }

.dim{ color:var(--muted); }
.band--dark .dim, .hero .dim, .facts .dim{ color:var(--muted-d); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:.705rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--kohaku);
  margin:0;
}
.band--dark .eyebrow, .hero .eyebrow{ color:var(--kohaku-lt); }

/* marcador de seção: traço vertical + kanji */
.mark{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:22px;
}
.mark .glyph{
  font-family:var(--f-display);
  font-size:1.45rem;
  line-height:1;
  color:var(--kohaku);
  translate:0 2px;
}
.band--dark .mark .glyph{ color:var(--kohaku-lt); }

.rule{
  height:1px;
  background:var(--line);
  border:0;
  margin:0;
}
.band--dark .rule{ background:var(--line-d); }

/* ---------- header ---------- */

.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(16,20,24,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-d-soft);
  color:var(--rice);
}
.site-head .wrap{
  display:flex; align-items:center; gap:28px;
  min-height:70px;
}
.brand{
  display:flex; align-items:center; gap:13px;
  text-decoration:none; color:var(--rice);
  margin-right:auto;
}
.brand img{ width:auto; flex:0 0 auto; }
.brand img:first-child{ height:32px; }   /* carpa */
.brand img:last-child{ height:21px; }    /* assinatura THIKARÁ SAKE */
.brand--foot{ margin-right:0; }
.brand--foot img:first-child{ height:52px; }
.brand--foot img:last-child{ height:24px; }
@media (max-width:520px){
  .brand img:first-child{ height:32px; }
  .brand img:last-child{ height:16px; }
}
.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.nav a{
  font-size:.86rem;
  text-decoration:none;
  color:var(--rice);
  opacity:.78;
  padding-block:6px;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:opacity .18s, border-color .18s;
}
.nav a:hover{ opacity:1; border-bottom-color:var(--kohaku); }
.nav a[aria-current="page"]{ opacity:1; border-bottom-color:var(--kohaku); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-d);
  color:var(--rice); font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  padding:9px 13px; cursor:pointer;
}

@media (max-width:880px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; inset:70px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2);
    border-bottom:1px solid var(--line-d);
    padding:8px var(--gut) 20px;
  }
  .nav[hidden]{ display:none; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--line-d-soft); }
}

/* ---------- botões ---------- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono);
  font-size:.755rem; letter-spacing:.15em; text-transform:uppercase;
  padding:14px 24px;
  text-decoration:none;
  border:1px solid var(--kohaku);
  background:var(--kohaku); color:#12161A;
  transition:background .18s, color .18s, border-color .18s;
}
.btn:hover{ background:var(--kohaku-lt); border-color:var(--kohaku-lt); }
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line);
}
.btn--ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }
.band--dark .btn--ghost, .hero .btn--ghost{ color:var(--rice); border-color:var(--line-d); }
.band--dark .btn--ghost:hover, .hero .btn--ghost:hover{ border-color:var(--rice); color:var(--rice); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- hero ---------- */

.hero{
  position:relative;
  background:var(--ink);
  color:var(--rice);
  overflow:hidden;
  isolation:isolate;
}
.hero canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; opacity:.85;
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(16,20,24,.12) 0%,rgba(16,20,24,.6) 58%,var(--ink) 100%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-inner{
  padding-block:clamp(64px,10vw,124px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,5vw,64px);
  align-items:center;
}
.hero h1{ margin-block:18px 22px; }
.hero .lead{ max-width:52ch; }
.hero .btn-row{ margin-top:34px; }
.hero-koi{ display:grid; place-items:center; }
.hero-koi img{
  width:clamp(190px,23vw,330px);
  height:auto;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.55));
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-koi{ display:none; }
}

/* faixa de fatos */
.facts{
  border-top:1px solid var(--line-d-soft);
  background:var(--ink);
  color:var(--rice);
}
.facts ul{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.facts li{
  padding:22px 22px 24px;
  border-left:1px solid var(--line-d-soft);
}
.facts li:first-child{ border-left:0; padding-left:0; }
.facts .k{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--kohaku-lt);
  display:block; margin-bottom:7px;
}
.facts .v{ font-family:var(--f-display); font-size:1.02rem; line-height:1.35; }
@media (max-width:820px){
  .facts ul{ grid-template-columns:repeat(2,1fr); }
  .facts li{ border-left:0; padding-left:0; border-top:1px solid var(--line-d-soft); }
  .facts li:nth-child(2){ padding-left:22px; border-left:1px solid var(--line-d-soft); }
  .facts li:nth-child(4){ padding-left:22px; border-left:1px solid var(--line-d-soft); }
  .facts li:first-child, .facts li:nth-child(2){ border-top:0; }
}

/* ---------- grelhas ---------- */

.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.split{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* ---------- garrafas / produtos ---------- */

.bottle{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-top:2px solid var(--kohaku);
}
.bottle--seiji{ border-top-color:var(--seiji); }
.bottle--silver{ border-top-color:#9BA5AC; }
.bottle .shot{
  aspect-ratio:3/4;
  display:grid; place-items:center;
  padding:24px 18px;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(184,130,43,.10), transparent 62%),
    var(--washi-2);
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.bottle--seiji .shot{ background:radial-gradient(120% 80% at 50% 12%, rgba(110,143,126,.14), transparent 62%), var(--washi-2); }
.bottle--silver .shot{ background:radial-gradient(120% 80% at 50% 12%, rgba(155,165,172,.16), transparent 62%), var(--washi-2); }
.bottle .shot svg{ width:46%; height:auto; }
.bottle .shot img{
  max-height:100%; width:auto; max-width:86%;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(16,20,24,.16));
}
.bottle--wide .shot{ aspect-ratio:4/3; }
.bottle .body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bottle .type{
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--muted);
}
.bottle p{ font-size:.925rem; color:#2C343A; }
.bottle .spec{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line-soft);
  display:grid; gap:6px;
  font-family:var(--f-mono); font-size:.735rem;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.bottle .spec div{ display:flex; justify-content:space-between; gap:12px; }
.bottle .spec b{ font-weight:500; color:var(--ink); }

/* ---------- processo (sequência real) ---------- */

.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  counter-increment:s;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,40px);
  padding-block:26px;
  border-top:1px solid var(--line-d-soft);
  align-items:start;
}
.step:first-child{ border-top:0; }
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--f-mono);
  font-size:.78rem; letter-spacing:.1em;
  color:var(--kohaku-lt);
  padding-top:5px;
}
.step .jp{
  font-family:var(--f-display);
  font-size:.95rem; color:var(--muted-d);
  letter-spacing:.06em;
  margin-top:5px;
}
.step h3{ margin-bottom:7px; }
.step p{ color:var(--muted-d); font-size:.95rem; max-width:62ch; }
.band--paper .step{ border-top-color:var(--line-soft); }
.band--paper .step::before{ color:var(--kohaku); }
.band--paper .step p{ color:#3A4249; }
.band--paper .step .jp{ color:var(--muted); }

/* ---------- cartões de canal / conteúdo ---------- */

.card{
  padding:26px 24px 28px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:10px;
}
.card .glyph{
  font-family:var(--f-display);
  font-size:1.5rem; line-height:1; color:var(--kohaku);
}
.card p{ font-size:.925rem; color:#394148; }
.band--dark .card{
  background:var(--ink-2);
  border-color:var(--line-d-soft);
}
.band--dark .card p{ color:var(--muted-d); }
.band--dark .card .glyph{ color:var(--kohaku-lt); }

/* citação / lenda */
.legend{
  font-family:var(--f-display);
  font-size:clamp(1.35rem,2.8vw,2.05rem);
  line-height:1.45;
  max-width:24ch;
  letter-spacing:-.008em;
}
.legend em{ color:var(--kohaku-lt); font-style:normal; }

/* ---------- tabela de dados ---------- */

.table-scroll{ overflow-x:auto; }
table{
  width:100%; border-collapse:collapse;
  font-size:.875rem;
  font-variant-numeric:tabular-nums;
  min-width:640px;
}
th,td{ text-align:left; padding:13px 16px 13px 0; border-bottom:1px solid var(--line-soft); }
th{
  font-family:var(--f-mono); font-weight:500;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
}
td b{ font-weight:600; }

/* ---------- formulário ---------- */

.form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.field input, .field select, .field textarea{
  font-family:var(--f-body); font-size:.95rem;
  padding:12px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  width:100%;
}
.field textarea{ min-height:118px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--kohaku); outline:none; }
.form-note{ font-size:.8rem; color:var(--muted); }

/* ---------- lista de contato ---------- */

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.contact-list .k{
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  display:block; margin-bottom:4px;
}
.contact-list a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contact-list a:hover{ border-bottom-color:var(--kohaku); }

/* ---------- CTA ---------- */

.cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,56px);
  align-items:center;
}
@media (max-width:760px){ .cta{ grid-template-columns:1fr; } }

/* ---------- rodapé ---------- */

.site-foot{
  background:var(--ink); color:var(--muted-d);
  padding-block:52px 30px;
  font-size:.875rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(22px,4vw,48px);
  padding-bottom:34px;
  border-bottom:1px solid var(--line-d-soft);
}
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.site-foot h4{
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--kohaku-lt);
  margin-bottom:14px;
}
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.site-foot a{ text-decoration:none; }
.site-foot a:hover{ color:var(--rice); }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:14px 26px;
  justify-content:space-between; align-items:center;
  padding-top:24px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em;
}
.age{
  border:1px solid var(--line-d);
  padding:5px 10px;
  color:var(--kohaku-lt);
}

/* ---------- portão de idade ---------- */

.gate{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid; place-items:center;
  padding:var(--gut);
  text-align:center;
  color:var(--rice);
}
.gate[hidden]{ display:none; }
.gate-seal{ display:grid; place-items:center; margin-bottom:24px; }
.gate-seal img{ height:72px; width:auto; }
.gate h2{ margin-bottom:14px; }
.gate p{ color:var(--muted-d); max-width:44ch; margin-inline:auto; }
.gate .btn-row{ justify-content:center; margin-top:28px; }

/* ---------- utilidades ---------- */

.stack-sm > * + *{ margin-top:12px; }
.stack   > * + *{ margin-top:20px; }
.stack-lg > * + *{ margin-top:36px; }
.mt-lg{ margin-top:clamp(32px,5vw,56px); }
.center{ text-align:center; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- premiações ---------- */

.award{
  display:flex; flex-direction:column; gap:8px;
  padding:24px 22px 26px;
  background:var(--washi);
  border:1px solid var(--line-soft);
  border-top:2px solid var(--line);
}
.band--washi .award{ background:var(--paper); }
.award--top{ border-top-color:var(--kohaku); }
.award-rank{
  font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.award--top .award-rank{ color:var(--kohaku); }
.award h3{ font-size:1.32rem; }
.award-comp{
  font-size:.9rem; color:#39424A;
  max-width:34ch;
}
.award-meta{
  margin-top:auto; padding-top:16px;
  border-top:1px solid var(--line-soft);
  display:grid; gap:9px;
  font-family:var(--f-mono); font-size:.715rem;
  color:var(--muted); line-height:1.5;
}
.award-meta span{ display:block; letter-spacing:.15em; text-transform:uppercase; font-size:.64rem; }
.award-meta b{ font-weight:500; color:var(--ink); }

.medal{ display:grid; place-items:center; }
.medal img{ width:clamp(130px,15vw,190px); height:auto; filter:drop-shadow(0 12px 22px rgba(16,20,24,.2)); }

.badge{
  font-family:var(--f-mono);
  font-size:.635rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--kohaku);
  border:1px solid rgba(184,130,43,.4);
  padding:5px 9px;
  align-self:flex-start;
  line-height:1.4;
}

.quote{
  margin:clamp(34px,5vw,56px) 0 0;
  padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line);
  display:grid; gap:16px;
}
.quote blockquote{
  margin:0;
  font-family:var(--f-display);
  font-size:clamp(1.24rem,2.4vw,1.75rem);
  line-height:1.46;
  max-width:30ch;
  letter-spacing:-.008em;
}
.quote figcaption{
  font-family:var(--f-mono);
  font-size:.715rem; letter-spacing:.09em;
  color:var(--muted); line-height:1.7;
  max-width:60ch;
}

/* ---------- bandeiras e página de premiações ---------- */

.flag{
  height:1.05em; width:auto;
  display:block;
  border:1px solid rgba(16,20,24,.18);
  flex:0 0 auto;
}
.band--dark .flag{ border-color:rgba(233,229,217,.28); }

.award-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:2px;
}
.award-head .flag{ height:14px; }
.award-head .award-rank{ margin:0; }

.country{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3.5vw,40px);
  align-items:start;
}
.country-flag .flag{
  height:auto;
  width:clamp(88px,10vw,124px);
  box-shadow:0 10px 24px rgba(16,20,24,.14);
}
@media (max-width:620px){
  .country{ grid-template-columns:1fr; }
}

.podium{
  margin-top:clamp(34px,5vw,52px);
  border-top:1px solid var(--line);
}
.podium-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,3vw,32px);
  align-items:center;
  padding-block:24px;
  border-bottom:1px solid var(--line-soft);
}
.podium-row .pos{
  font-family:var(--f-display);
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1;
  color:var(--muted);
  min-width:2.2ch;
}
.podium-row--win .pos{ color:var(--kohaku); }
.podium-row h3{ margin-bottom:3px; }
.podium-row p{ font-size:.9rem; color:var(--muted); }
.podium-row--none{ opacity:.62; }
.podium-row--none h3{ font-style:italic; font-weight:500; }
.podium-medal img{ width:clamp(74px,9vw,104px); height:auto; filter:drop-shadow(0 10px 18px rgba(16,20,24,.2)); }
@media (max-width:560px){
  .podium-row{ grid-template-columns:auto minmax(0,1fr); }
  .podium-medal{ display:none; }
}

/* ---------- crédito de desenvolvimento ---------- */

.foot-bottom{ gap:12px 24px; }
.credit a{
  color:var(--rice);
  text-decoration:none;
  border-bottom:1px solid rgba(233,229,217,.3);
  transition:color .18s, border-color .18s;
}
.credit a:hover{ color:var(--kohaku-lt); border-bottom-color:var(--kohaku-lt); }