:root {
  --page-pad: 4%;
  --container-wide: 60%;
  --logo-size: 180%;
  --h2-size: 130%;
  --muted: #6b6b6b;
  --placeholder-1: #e9e2d8; 
  --placeholder-2: #e6e6e6; 
  --accent: #d8c7bf;
}

/* RESET / BOX MODEL */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }

body {
  font-family: 'Kaisei Tokumin', serif;
  color: #222;
  background: #fff;
  line-height: 1.45;
}

/* GENERIC CENTERED CONTAINER */
.container {
  width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* HEADER */
.header-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 2%;
  padding-bottom: 2%;
}

/* LOGO (LEFT COLUMN) */
.logo {
  font-family: 'Taprom', cursive;
  font-size: var(--logo-size);
  line-height: 1;
  margin-bottom: 1%;
}

.address {
  font-family: 'Lato', sans-serif;
  font-size: 85%;
  color: var(--muted);
  margin-top: 0.6%;
  letter-spacing: 0.02em;
}

/* TOP NAV (RIGHT COLUMN) */
.top-menu ol {
  list-style: none;
  font-family: "Kaisei Tokumin", serif;
  color: var(--muted);
  font-size: 85%;
  text-align: right;
  line-height: 1.8;
}

li:hover {
  font-weight: 700;
}
/* HERO */
.hero-inner {
  padding-top: 2%;
  padding-bottom: 2%;
  text-align: left;
}

/*   
.img-placeholder {
  width: 100%;
  display: block;
  border-radius: 1%;
} */

img {
  width: 100%;
  display: block;
  border-radius: 1%;
}


/* HERO QUOTE */
.hero-quote {
  font-family: "Kaisei Tokumin", serif;
  color: var(--muted);
  font-size: 92%;
  text-align: center;
  margin-top: 1%;
  margin-bottom: 3%;
}

/* OUR SPECIALS */
.specials {
  padding-top: 2%;
  padding-bottom: 3%;
}

.specials h2 {
  font-size: var(--h2-size);
  margin-bottom: 2%;
}

/* cards grid */
.special-cards {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  flex-wrap: wrap;
}

/* INDIVIDUAL CARDS */
.special-card {
  width: 23%;               
  min-width: 18%;
  font-family: 'Kaisei Tokumin', serif;
}

.special-card img {
  height: 16vw;
  max-height: 160px;
  background: var(--placeholder-2);
  margin-bottom: 2%;
  border-radius: 1%;
  object-fit: cover;
}

/* INDIVIDUAL CARD TEXT */
.special-card h3 {
  font-size: 96%;
  margin-bottom: 1%;
  letter-spacing: 0.01em;
}

.special-card p {
  font-size: 89%;
  color: #444;
  line-height: 1.4;
}
.special-card h3 {
  margin-top: 5px;
}

/* INGREDIENTS BANNER */
.ingredients-banner {
  padding-top: 3%;
  padding-bottom: 3%;
}

.ingredients-banner img {
  height: 9vw;
  max-height: 120px;
  background: linear-gradient(90deg, #f3e9e2, #f7f4f2);
  border-radius: 1%;
  object-fit: cover;
}

/* HONEST PLATES */
.honest-plates {
  padding-top: 3%;
  padding-bottom: 3%;
}

.plates-grid {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  gap: 2%;
  align-items: start;
}

.plates-title {
  font-family: 'Kaisei Tokumin', serif;
  font-size: 95%;
}

.plates-note {
  font-family: 'Kaisei Tokumin', serif;
  font-size: 92%;
  color: #444;
  text-align: right;
  grid-column: span 2;
  width: 94%;
  
}

.plates-list {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 2%;
  margin-top: 2%;
}

.plate-col {
  width: 32%;
  font-family: 'Kaisei Tokumin', serif;
  font-size: 90%;
  color: #444;
  line-height: 1.5;
}

/* STORY / INTERIOR */
.story {
  padding-top: 4%;
  padding-bottom: 6%;
}

.story-grid {
  display: flex;
  gap: 4%;
  align-items: flex-end;
}

.story-left {
  width: 48%;
}

.story-left img {
  height: 34vw;
  max-height: 420px;
  background: linear-gradient(180deg, #efe6dc, #e8ded6);
  border-radius: 1%;
  object-fit: cover;
}

.story-right {
  width: 48%;
  font-family: 'Kaisei Tokumin', serif;
}

.story-right h3 {
  font-size: 100%;
  margin-bottom: 1%;
}

.story-right p {
  font-size: 92%;
  color: #444;
  line-height: 1.6;
}

/* FOOTER */

footer {
  width: 100%;
  background-image: url("cherryblossom.png");
  object-fit: cover;
  
}

.footer-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2%;
  padding-top: 4%;
  padding-bottom: 6%;
  align-items: start;
  font-family: 'Kaisei Tokumin', serif;
  color: #555;
}

.footer-left .logo-mini {
  font-family: 'Taprom', cursive;
  margin-top: 1.5%;
  font-size: 160%;
}

/* SMALL / MEDIUM SCREENS */
@media (max-width: 1000px) {
  :root { --container-wide: 94%; --logo-size: 160%; --h2-size: 120%; }

  .header-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 2%;
  }

  .top-menu ol { text-align: left; }

  .hero-rect { height: 46vw; }

  .special-card { width: 48%; margin-bottom: 3%; }

  .plates-grid { grid-template-columns: 1fr; }

  .plates-list { flex-direction: column; gap: 3%; }

  .story-grid { flex-direction: column; }
  .story-left, .story-right { width: 100%; }
}

/* VERY SMALL SCREENS */
@media (max-width: 480px) {
  :root { --container-wide: 98%; --logo-size: 140%; --h2-size: 110%; }

  .logo { font-size: var(--logo-size); }
  .address { font-size: 88%; }

  .hero-rect { height: 60vw; }

  .square-small { height: 36vw; max-height: none; }

  .special-card { width: 100%; }

  .plates-list { flex-direction: column; }
  .plate-col { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 4%; }
}

/* --- MENU.HTML ADDITIONS  --- */

/* hot pink placeholders for images*/
.hot-pink {
  background: #ff1493;
  border-radius: 1%;
  width: 100%;
  display: block;
  height: 18vw;
  max-height: 200px;
  object-fit: cover;
}

/* general menu sections */
.menu-section {
  padding-top: 3%;
  padding-bottom: 4%;
}

.menu-section h2 {
  font-size: var(--h2-size);
  margin-bottom: 2%;
  font-family: 'Kaisei Tokumin', serif;
}

/* grid for items */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2%;
}

.menu-grid article {
  font-family: 'Kaisei Tokumin', serif;
  font-size: 90%;
  color: #444;
  line-height: 1.5;
  padding-bottom: 2%;
}

/* drinks section */
.drinks-note {
  margin-top: 2%;
  font-size: 85%;
  color: var(--muted);
  text-align: right;
}

/* responsive adjustments */
@media (max-width: 800px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .hot-pink {
    height: 40vw;
  }
}

/*last minute additions*/
a {
  text-decoration: none;
  color: var(--muted);
}

.logo-col a {
  color: #000
}