/* Kampai – asiakaskohtaiset tyylit. tayta.py ei ylikirjoita tätä. */

/* Herokyltti = ravintolan oma "Seek what is unique" -kyltti: musta taulu, valkoinen teksti, koralli kanji/kana. */
:root {
  --motto-bg: #262425;
  --motto-text: #eef2f3;
  --motto-accent: #e0625a;
}

/* Japaninkielinen näkymä: järjestelmän japanilainen fontti (ei ladata megatavuja fontteja), väljempi riviväli. */
html:lang(ja) body { line-height: 1.8; line-break: strict; }
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3 { letter-spacing: 0.02em; line-height: 1.35; word-break: auto-phrase; }   /* rivit katkeavat sanarajoista (トレインファクトリー ei katkea keskeltä) */

/* Kyltti on herossa tunnusmerkki: hieman isompi kuin pohjan oletus. */
@media (min-width: 681px) {
  .hero-motto { font-size: clamp(0.85rem, 1.35vw, 1.1rem); padding: 1.1em 1em; left: -2.2rem; bottom: -1rem; }
}

/* Japanissa ei kursiivia (keinotekoinen kallistus näyttää virheeltä); korostus värillä. */
html:lang(ja) em, html:lang(ja) i { font-style: normal; }

/* Osioiden japanilaiset nimilaput kuten kyltissä (koriste: CSS:n alt-teksti "" piilottaa ruudunlukijalta). */
.eyebrow::after {
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;
  font-weight: 500; letter-spacing: 0.1em; color: var(--text-muted); text-transform: none;
}
#menu .eyebrow::after { content: "お品書き" / ""; }
#meista .eyebrow::after { content: "私たち" / ""; }
#arvostelut .eyebrow::after { content: "お客様の声" / ""; }
#yhteystiedot .eyebrow::after { content: "アクセス" / ""; }
html:lang(ja) :is(#menu, #meista, #arvostelut, #yhteystiedot) .eyebrow::after { content: none; }

/* Japanin otsikot ovat merkkimäärältään pitkiä: pienempi hero-otsikko puhelimessa. */
@media (max-width: 680px) {
  html:lang(ja) .hero h1 { font-size: clamp(1.55rem, 7vw, 2.2rem); }
}

/* ---------- Koristeet: hallin kuvitettujen banderollien henki (omat piirrokset + siveltimellä kirjoitetut
   sanat, sivellin.py). Himmeät (10–17 %), vain osioiden reunoilla, CSS-taustoina → eivät ole sisältöä
   eivätkä näy ruudunlukijalle. Sanat vain Kampain oikeista annoksista. ---------- */
#menu, #meista, #arvostelut, #varaa { background-repeat: no-repeat; }
#menu {
  background-image:
    url("../img/koriste/oshinagaki.svg"), url("../img/koriste/kuva-nigiri.svg"), url("../img/koriste/kuva-donburi.svg"),
    url("../img/koriste/sushi.svg"), url("../img/koriste/kuva-bento.svg");
  background-position: left 2.5% top 150px, right 3% top 70px, left 2% bottom 22%, right 3.5% top 46%, right 2% bottom 120px;
  background-size: 74px auto, 150px auto, 150px auto, 130px auto, 140px auto;
}
#meista {
  background-image:
    url("../img/koriste/kuva-olut.svg"), url("../img/koriste/teriyaki.svg"), url("../img/koriste/karaage.svg"), url("../img/koriste/kuva-tee.svg");
  background-position: left 7% top 60px, right 7% top 50px, left 6% bottom 50px, right 9% bottom 40px;
  background-size: 140px auto, 64px auto, 180px auto, 120px auto;
}
#arvostelut {
  background-image: url("../img/koriste/kanpai.svg");
  background-position: right 4% top 30px; background-size: 300px auto;
}
#varaa {
  background-image: url("../img/koriste/kuva-lyhty.svg"), url("../img/koriste/bento.svg");
  background-position: left 2% top 40px, right 3% bottom 40px; background-size: 100px auto, 150px auto;
}
/* Kapeammilla ruuduilla reunoilla ei ole tilaa: yksi pieni koriste per osio yläkulmassa */
@media (max-width: 1100px) {
  #menu { background-image: url("../img/koriste/kuva-nigiri.svg"), url("../img/koriste/oshinagaki.svg");
          background-position: right 3% top 24px, left 2% top 30px; background-size: 96px auto, 40px auto; }
  #meista { background-image: url("../img/koriste/kuva-olut.svg"); background-position: right 4% top 20px; background-size: 84px auto; }
  #arvostelut { background-size: 190px auto; background-position: right 3% top 16px; }
  #varaa { background-image: url("../img/koriste/kuva-lyhty.svg"); background-position: right 4% top 18px; background-size: 64px auto; }
}
@media (max-width: 680px) {
  #menu { background-image: url("../img/koriste/kuva-nigiri.svg"); background-position: right 4% top 20px; background-size: 84px auto; }
}