:root {
  --bg-cream: #d8dde5;
  --bg-paper: #e9eef4;
  --coffee-dark: #2e3238;
  --coffee-medium: #4a515b;
  --coffee-light: #6a737f;
  --accent-olive: #6f7783;
  --accent-gold: #919aa6;
  --line-soft: #b7c0cc;
  --text-main: #262c34;
  --text-sub: #4d5763;
  --shadow-soft: 0 12px 30px rgba(25, 31, 41, 0.12);
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
  --roast-light: #87a9d9;
  --roast-light-mid: #7694bc;
  --roast-mediumdark: #64798f;
  --roast-dark-mid: #506072;
  --roast-dark: #3f4a57;
  --taste-bitter: #5d6f87;
  --taste-acidity: #8cb9e8;
  --taste-clean: #b4bec9;
  --taste-fruity: #9ca8d8;
  --site-header-height: 128px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 85% 15%, rgba(113, 127, 149, 0.24), transparent 35%),
    radial-gradient(circle at 5% 90%, rgba(91, 107, 131, 0.18), transparent 32%),
    linear-gradient(180deg, #d9dee6 0%, #ccd3dd 58%, #dbe0e8 100%);
  line-height: 1.7;
}

body.has-fixed-header {
  padding-top: calc(var(--site-header-height) + env(safe-area-inset-top));
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  overflow-x: clip;
  z-index: 20;
  backdrop-filter: blur(6px);
  background: rgba(210, 218, 230, 0.92);
  border-bottom: 1px solid rgba(71, 84, 102, 0.28);
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.brand-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.1;
}

.brand-logo {
  width: auto;
  height: 100px;
  max-width: 180px;
  object-fit: contain;
  clip-path: inset(0 0 22% 0);
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-main {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.brand-sub {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-top: 4px;
}

.global-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.global-nav a {
  padding: 8px 10px;
  border-radius: 0;
  font-size: 0.88rem;
  color: #000000;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.global-nav a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--coffee-medium), var(--coffee-dark));
}

.global-nav a.active {
  color: #fff;
  background: #2b3139;
}

@media (max-width: 1260px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .brand-area {
    width: 100%;
    justify-content: space-between;
  }

  .global-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .global-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 6px 4px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
}

.header-insta {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: inherit;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.header-insta img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.header-insta:hover {
  transform: translateY(-1px);
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.video-top {
  position: relative;
  min-height: 72svh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--shadow-soft);
}

.video-top-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-top-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(32, 38, 48, 0.62), rgba(32, 38, 48, 0.35));
}

.video-top-center {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: clamp(56px, 10vh, 96px) auto 0;
  padding: clamp(18px, 3vw, 28px);
  text-align: center;
  color: #f6f8fb;
  background: rgba(35, 41, 51, 0.54);
  border: 1px solid rgba(243, 246, 250, 0.42);
  backdrop-filter: blur(5px);
  border-radius: var(--radius-md);
}

.video-top-kicker {
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.75rem;
  opacity: 0.9;
}

.video-top-center h1 {
  margin: 8px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 5vw, 3rem);
  letter-spacing: 0.04em;
}

.video-top-center p {
  margin: 0;
  font-size: clamp(0.92rem, 2vw, 1.08rem);
}

.video-top-scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #f6f8fb;
  padding: 8px 12px;
  border-radius: 0;
  border: 1px solid rgba(243, 246, 250, 0.5);
  background: rgba(33, 39, 48, 0.4);
}

.hero {
  background: var(--bg-paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

.hero-copy {
  padding: 34px 30px;
}

.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-olive);
  margin-bottom: 14px;
}

.hero h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--coffee-dark);
}

.hero p {
  margin: 0;
  color: var(--text-sub);
  font-size: 1.02rem;
}

.hero-visual {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  background-color: #3f4a57;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: #fffaf2;
  padding: 24px;
  text-align: center;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(33, 39, 48, 0.74), rgba(33, 39, 48, 0.24));
}

.hero-home {
  background-image: url("images/IMG_1636.JPG");
}

.hero-menu {
  background-image: url("images/IMG_1642.JPG");
}

.hero-menu-slider {
  min-height: 340px;
  padding: 0;
  overflow: hidden;
  background: #d8dde5;
}

.hero-menu-slider::before {
  content: none;
}

.hero-menu-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.hero-menu-slide.slide-kabocha {
  object-position: center 28%;
}

.hero-menu-slide.slide-montblanc-roll {
  object-position: center 24%;
}

.hero-menu-slide.is-active {
  opacity: 1;
}

.hero-beans {
  background-image: url("images/IMG_1635.JPG");
}

.hero-access {
  background-image: url("images/IMG_1637.JPG");
}

.hero-webshop {
  background-image: url("images/webshop-visual.jpg");
}

.hero-beans-about {
  background-image: url("images/beans-about.jpg");
}

.hero-roasting-about {
  background-image: url("images/roasting-about.jpg");
}

.hero-access-exterior {
  background-image: url("images/access-exterior.JPG");
}

.hero-visual strong {
  font-size: 2rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.06em;
}

.hero-visual span {
  margin-top: 10px;
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section {
  margin-top: 34px;
}

.section-title {
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  color: var(--coffee-medium);
}

.section-heading-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.section-heading-inline .section-title {
  margin-bottom: 0;
}

.section-title-note {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-sub);
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bean-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bean-shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bean-shop-card[hidden] {
  display: none;
}

.badge.badge-roast-light {
  background: #5f85bd;
  color: #f6f8fb;
}

.badge.badge-roast-medium {
  background: #4f6687;
  color: #f6f8fb;
}

.badge.badge-roast-dark {
  background: #364352;
  color: #f6f8fb;
}

.badge.badge-roast-original {
  background: #475c75;
  color: #f6f8fb;
}

.base-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--coffee-medium), var(--coffee-dark));
  color: #fffaf2;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.base-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(46, 50, 56, 0.25);
}

.cta-card {
  text-align: center;
}

.base-link-large {
  min-width: 280px;
  padding: 12px 20px;
  font-size: 0.96rem;
}

.card {
  background: var(--bg-paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 8px 18px rgba(33, 39, 48, 0.08);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.25rem;
  color: var(--coffee-dark);
}

.bean-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.bean-card-head h3 {
  margin: 0;
}

.bean-card-base-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  margin-right: 2px;
  border: 1px solid #111111;
  background: #111111;
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.bean-card-base-link:hover {
  background: #2a2a2a;
  color: #ffffff;
}

.card p,
.card li {
  color: var(--text-sub);
}

.menu-list,
.bean-list,
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list {
  margin: 0;
  padding-left: 1.15rem;
}

.feature-list li {
  margin: 0 0 10px;
}

.feature-list li:last-child {
  margin-bottom: 0;
}

.ratio-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 12px;
}

.ratio-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(106, 115, 127, 0.45);
}

.ratio-list li:last-child {
  border-bottom: none;
}

.info-list li {
  margin: 0 0 8px;
}

.info-list li:last-child {
  margin-bottom: 0;
}

.info-list.compact li {
  margin: 0 0 6px;
}

.note-text {
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--text-sub);
}

.menu-item,
.bean-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(106, 115, 127, 0.45);
}

.menu-item:last-child,
.bean-item:last-child {
  border-bottom: none;
}

.bean-item.bean-feature-item {
  display: block;
  align-items: initial;
}

.bean-item.bean-feature-item span:first-child {
  display: inline-block;
  margin-bottom: 6px;
}

.bean-item.bean-feature-item span:last-child {
  display: block;
  line-height: 1.75;
}

.bean-profile {
  margin: 8px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 103, 115, 0.35);
  background: rgba(247, 245, 240, 0.68);
}

.bean-profile-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--coffee-dark);
}

.bean-profile-row {
  display: grid;
  grid-template-columns: 9.6rem 7ch 3ch;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.bean-profile-label {
  font-size: 0.82rem;
  color: var(--text-sub);
}

.bean-profile-dots {
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  color: var(--coffee-medium);
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bean-profile-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--coffee-dark);
}

.price {
  font-variant-numeric: tabular-nums;
  color: var(--coffee-medium);
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 0;
  background: rgba(145, 154, 166, 0.22);
  color: #48505a;
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.bean-block-badge {
  --block-color: #64798f;
  background: var(--block-color);
  color: #f5f8fc;
  border: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: none;
}

.bean-block-link {
  width: fit-content;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bean-block-link:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

/* Flavor-table linked label colors */
.block-1A { --block-color: #ffe347; }
.block-2A { --block-color: #ffbe3b; }
.block-3A { --block-color: #ff9440; }
.block-4A { --block-color: #ff6848; }
.block-5A { --block-color: #ff3f5c; }

.block-1B { --block-color: #cde83b; }
.block-2B { --block-color: #d6c33f; }
.block-3B { --block-color: #df9845; }
.block-4B { --block-color: #e56852; }
.block-5B { --block-color: #e33a69; }

.block-1C { --block-color: #8be23f; }
.block-2C { --block-color: #98c84a; }
.block-3C { --block-color: #a89f57; }
.block-4C { --block-color: #b26c68; }
.block-5C { --block-color: #b33a7a; }

.block-1D { --block-color: #42d456; }
.block-2D { --block-color: #4fbe6a; }
.block-3D { --block-color: #5ca67f; }
.block-4D { --block-color: #698394; }
.block-5D { --block-color: #755ca8; }

.block-1E { --block-color: #1dc66a; }
.block-2E { --block-color: #2aa782; }
.block-3E { --block-color: #368d99; }
.block-4E { --block-color: #436fab; }
.block-5E { --block-color: #514dbe; }

.strong-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.flavor-wheel-section {
  margin-top: 14px;
}

.flavor-table-wrap {
  position: relative;
  width: min(100%, 700px);
  margin: 0 auto;
  padding: 34px 40px;
}

.flavor-table-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(94, 103, 115, 0.28);
  border-radius: 0;
  overflow: hidden;
}

.flavor-table-cell {
  position: relative;
  aspect-ratio: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
}

.flavor-table-trigger {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.flavor-table-trigger::after {
  content: attr(data-display);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: pre-line;
  text-align: center;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: rgba(16, 20, 27, 0.86);
  pointer-events: none;
}

.flavor-table-trigger:hover {
  transform: scale(0.985);
}

.flavor-table-trigger.is-active {
  box-shadow: none;
}

.flavor-table-trigger:focus-visible {
  outline: 3px solid rgba(26, 33, 44, 0.62);
  outline-offset: -3px;
}

.flavor-table-cell:nth-child(5n) {
  border-right: none;
}

.flavor-table-cell:nth-last-child(-n + 5) {
  border-bottom: none;
}

.flavor-table-cell span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.flavor-table-y-top,
.flavor-table-y-bottom,
.flavor-table-x-left,
.flavor-table-x-right {
  position: absolute;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--coffee-medium);
  font-weight: 600;
}

.flavor-table-y-top {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.flavor-table-y-bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.flavor-table-x-left {
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
}

.flavor-table-x-right {
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
}

.flavor-square-wrap {
  position: relative;
  width: min(100%, 700px);
  margin: 0 auto;
  padding: 36px;
}

.flavor-square-main {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0;
  border: 1px solid rgba(94, 103, 115, 0.22);
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    linear-gradient(135deg, #6bb3d0 0%, #58bca8 28%, #ead06f 55%, #ef9565 76%, #de7278 100%);
  box-shadow: 0 10px 22px rgba(33, 39, 48, 0.12);
}

.flavor-square-meta {
  position: absolute;
  font-size: 0.9rem;
  color: var(--coffee-medium);
  letter-spacing: 0.03em;
}

.flavor-square-meta.top {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.flavor-square-meta.bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.flavor-square-meta.left {
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.flavor-square-meta.right {
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.flavor-compass-figure {
  margin: 0;
}

.flavor-compass-image {
  display: block;
  width: min(100%, 840px);
  margin: 0 auto;
  border: 1px solid rgba(94, 103, 115, 0.22);
  border-radius: 0;
  background: #e5e8ed;
}

.flavor-wheel-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: center;
}

.flavor-wheel {
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--bg-paper) 33%, transparent 34%),
    conic-gradient(
      from -90deg,
      var(--bg-paper) 0deg,
      var(--bg-paper) 0.7deg,
      #8bb0e2 0.7deg,
      #8bb0e2 12deg,
      var(--bg-paper) 12deg,
      var(--bg-paper) 12.7deg,
      #87abdb 12.7deg,
      #87abdb 24deg,
      var(--bg-paper) 24deg,
      var(--bg-paper) 24.7deg,
      #82a5d4 24.7deg,
      #82a5d4 36deg,
      var(--bg-paper) 36deg,
      var(--bg-paper) 36.7deg,
      #7ea0cd 36.7deg,
      #7ea0cd 48deg,
      var(--bg-paper) 48deg,
      var(--bg-paper) 48.7deg,
      #7a9ac6 48.7deg,
      #7a9ac6 60deg,
      var(--bg-paper) 60deg,
      var(--bg-paper) 60.7deg,
      #7595bf 60.7deg,
      #7595bf 72deg,
      var(--bg-paper) 72deg,
      var(--bg-paper) 72.7deg,
      #718fb8 72.7deg,
      #718fb8 84deg,
      var(--bg-paper) 84deg,
      var(--bg-paper) 84.7deg,
      #6c8ab1 84.7deg,
      #6c8ab1 96deg,
      var(--bg-paper) 96deg,
      var(--bg-paper) 96.7deg,
      #6884aa 96.7deg,
      #6884aa 108deg,
      var(--bg-paper) 108deg,
      var(--bg-paper) 108.7deg,
      #647fa3 108.7deg,
      #647fa3 120deg,
      var(--bg-paper) 120deg,
      var(--bg-paper) 120.7deg,
      #617a9c 120.7deg,
      #617a9c 132deg,
      var(--bg-paper) 132deg,
      var(--bg-paper) 132.7deg,
      #5e7595 132.7deg,
      #5e7595 144deg,
      var(--bg-paper) 144deg,
      var(--bg-paper) 144.7deg,
      #5b708e 144.7deg,
      #5b708e 156deg,
      var(--bg-paper) 156deg,
      var(--bg-paper) 156.7deg,
      #586b87 156.7deg,
      #586b87 168deg,
      var(--bg-paper) 168deg,
      var(--bg-paper) 168.7deg,
      #556680 168.7deg,
      #556680 180deg,
      var(--bg-paper) 180deg,
      var(--bg-paper) 180.7deg,
      #526179 180.7deg,
      #526179 192deg,
      var(--bg-paper) 192deg,
      var(--bg-paper) 192.7deg,
      #4f5c72 192.7deg,
      #4f5c72 204deg,
      var(--bg-paper) 204deg,
      var(--bg-paper) 204.7deg,
      #4c576b 204.7deg,
      #4c576b 216deg,
      var(--bg-paper) 216deg,
      var(--bg-paper) 216.7deg,
      #495264 216.7deg,
      #495264 228deg,
      var(--bg-paper) 228deg,
      var(--bg-paper) 228.7deg,
      #464d5d 228.7deg,
      #464d5d 240deg,
      var(--bg-paper) 240deg,
      var(--bg-paper) 240.7deg,
      #434955 240.7deg,
      #434955 252deg,
      var(--bg-paper) 252deg,
      var(--bg-paper) 252.7deg,
      #4a5363 252.7deg,
      #4a5363 264deg,
      var(--bg-paper) 264deg,
      var(--bg-paper) 264.7deg,
      #516071 264.7deg,
      #516071 276deg,
      var(--bg-paper) 276deg,
      var(--bg-paper) 276.7deg,
      #586d7f 276.7deg,
      #586d7f 288deg,
      var(--bg-paper) 288deg,
      var(--bg-paper) 288.7deg,
      #5f7a8d 288.7deg,
      #5f7a8d 300deg,
      var(--bg-paper) 300deg,
      var(--bg-paper) 300.7deg,
      #66879b 300.7deg,
      #66879b 312deg,
      var(--bg-paper) 312deg,
      var(--bg-paper) 312.7deg,
      #6d94a9 312.7deg,
      #6d94a9 324deg,
      var(--bg-paper) 324deg,
      var(--bg-paper) 324.7deg,
      #74a1b7 324.7deg,
      #74a1b7 336deg,
      var(--bg-paper) 336deg,
      var(--bg-paper) 336.7deg,
      #7bafc5 336.7deg,
      #7bafc5 348deg,
      var(--bg-paper) 348deg,
      var(--bg-paper) 348.7deg,
      #84bdd4 348.7deg,
      #84bdd4 360deg
    );
  border: 1px solid rgba(94, 103, 115, 0.24);
  box-shadow: 0 8px 20px rgba(33, 39, 48, 0.14);
  position: relative;
}

.flavor-wheel::after {
  content: "ROAST";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--coffee-medium);
}

.wheel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--text-sub);
}

.wheel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-roast-light {
  background: var(--roast-light);
}

.dot-roast-mediumdark {
  background: var(--roast-mediumdark);
}

.dot-roast-dark {
  background: var(--roast-dark);
}

.flavor-axis {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.axis-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: center;
}

.axis-name {
  font-size: 0.86rem;
  color: var(--text-sub);
}

.axis-bar {
  height: 10px;
  border-radius: 0;
  background: #d9dde3;
  overflow: hidden;
}

.axis-fill {
  display: block;
  height: 100%;
}

.taste-bitter {
  background: linear-gradient(90deg, rgba(93, 111, 135, 0.35), var(--taste-bitter));
}

.taste-acidity {
  background: linear-gradient(90deg, rgba(140, 185, 232, 0.35), var(--taste-acidity));
}

.taste-clean {
  background: linear-gradient(90deg, rgba(180, 190, 201, 0.35), var(--taste-clean));
}

.taste-fruity {
  background: linear-gradient(90deg, rgba(156, 168, 216, 0.35), var(--taste-fruity));
}

.taste-tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.taste-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-soft);
  background: #f2f4f7;
  border-radius: 0;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: var(--text-sub);
}

.taste-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.tag-bitter {
  color: var(--taste-bitter);
}

.tag-acidity {
  color: var(--taste-acidity);
}

.tag-clean {
  color: var(--taste-clean);
}

.tag-fruity {
  color: var(--taste-fruity);
}

.map-box {
  border: 0;
  width: 100%;
  min-height: 280px;
  border-radius: var(--radius-md);
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.photo-strip.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 8px 18px rgba(33, 39, 48, 0.12);
  background: #dde2e8;
}

.photo-card img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.photo-credit {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-sub);
}

.menu-sample-grid {
  align-items: stretch;
}

.menu-sample-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.menu-sample-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
  border-radius: 0;
  border: 0;
}

.menu-sample-item h3 {
  margin: 14px 20px 0;
}

.menu-sample-item p {
  margin: 8px 20px 18px;
}

.site-footer {
  border-top: 1px solid rgba(94, 103, 115, 0.25);
  padding: 26px 24px 24px;
  color: var(--text-sub);
  font-size: 0.94rem;
}

.footer-inner {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  grid-template-columns: 1.35fr 1fr 1fr;
  align-items: start;
}

.footer-brand h2 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 2.8vw, 1.55rem);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.footer-brand p {
  margin: 0 0 4px;
  color: var(--text-main);
  font-size: 0.88rem;
}

.footer-nav {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.footer-nav a {
  padding: 7px 11px;
  border-radius: 0;
  border: 1px solid rgba(94, 103, 115, 0.24);
  background: rgba(247, 248, 250, 0.62);
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.2;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-nav a:hover {
  background: rgba(247, 248, 250, 0.95);
  transform: translateY(-1px);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.footer-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 0;
  border: 1px solid rgba(94, 103, 115, 0.32);
  color: var(--text-main);
  background: rgba(247, 248, 250, 0.7);
  font-size: 0.82rem;
  line-height: 1.2;
  transition: transform 0.2s ease, background 0.2s ease;
}

.footer-link-button:hover {
  transform: translateY(-1px);
  background: rgba(247, 248, 250, 0.95);
}

.footer-note {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.site-footer small {
  display: block;
  width: min(1100px, 100%);
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(94, 103, 115, 0.3);
  font-size: 0.8rem;
}

@media (max-width: 880px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .footer-nav,
  .footer-links {
    justify-content: flex-start;
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.7s ease forwards;
}

.delay-1 {
  animation-delay: 0.15s;
}

.delay-2 {
  animation-delay: 0.3s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-rtd {
  color: #000000;
  background: transparent;
}

.home-rtd .site-header {
  background: rgba(222, 227, 233, 0.86);
  border-bottom-color: rgba(72, 79, 90, 0.28);
}

.home-rtd .brand-sub,
.home-rtd .global-nav a {
  color: #000000;
}

.home-rtd .global-nav a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--coffee-medium), var(--coffee-dark));
}

.home-rtd .global-nav a.active,
.home-rtd .global-nav a.active:visited {
  color: #fff;
  background: #2b3139;
}

.home-rtd .site-footer {
  background:
    radial-gradient(circle at 85% 15%, rgba(113, 127, 149, 0.24), transparent 35%),
    radial-gradient(circle at 5% 90%, rgba(91, 107, 131, 0.18), transparent 32%),
    linear-gradient(180deg, #d9dee6 0%, #ccd3dd 58%, #dbe0e8 100%);
}

.home-rtd main {
  max-width: none;
  padding: 0 0 80px;
}

.impact-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(620px, 100svh, 980px);
  overflow: hidden;
}

.home-rtd .impact-hero {
  overflow: visible;
}

.home-rtd .impact-video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -3;
  width: auto;
  height: 100svh;
  min-width: 100vw;
  display: block;
  transform: translate(-50%, -50%) translateZ(0);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.55) contrast(1.5) brightness(1.85);
  pointer-events: none;
}

.home-rtd .impact-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100svh;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
}

.impact-video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center;
}

.impact-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(82, 91, 103, 0.2) 0%, rgba(98, 108, 121, 0.14) 34%, rgba(114, 125, 139, 0.2) 100%),
    linear-gradient(100deg, rgba(121, 132, 146, 0.12) 0%, rgba(121, 132, 146, 0) 52%);
}

.home-rtd .home-band,
.home-rtd .home-statements,
.home-rtd .bean-focus,
.home-rtd .home-gallery,
.home-rtd .home-jump-section {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(175, 186, 200, 0.48);
  background: rgba(232, 238, 246, 0.84);
  box-shadow: 0 16px 32px rgba(36, 45, 59, 0.14);
  backdrop-filter: blur(3px);
}

.home-rtd .home-band {
  border-radius: 0;
  padding-left: clamp(16px, 2.2vw, 30px);
  padding-right: clamp(16px, 2.2vw, 30px);
}

.home-rtd .home-statements,
.home-rtd .home-gallery {
  border-radius: 0;
  padding: 18px;
}

.home-rtd .home-jump-section {
  border-radius: 0;
  padding: 18px;
}

.home-rtd .bean-focus {
  border-radius: 0;
  padding-left: clamp(14px, 1.8vw, 24px);
  padding-right: clamp(14px, 1.8vw, 24px);
}

.impact-inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  min-height: clamp(620px, calc(100dvh - 78px), 980px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(66px, 11vh, 130px) 0 64px;
}

.impact-brand-reveal {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  transform: translateZ(0);
}

.impact-brand-logo {
  width: clamp(102px, 13vw, 168px);
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(6, 10, 16, 0.42));
}

.impact-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.impact-brand-name {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.84rem, 6.8vw, 4.9rem);
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 12px 24px rgba(4, 8, 14, 0.5);
}

.impact-brand-sub {
  margin: 1px 0 0;
  font-size: clamp(0.78rem, 1.35vw, 1rem);
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.9);
}

.impact-kicker {
  margin: 0 0 8px;
  letter-spacing: 0.22em;
  font-size: 0.56rem;
  color: #ffffff;
}

.impact-title {
  margin: 0;
  font-family: "Great Vibes", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.2rem, 3.75vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: none;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 20px 35px rgba(3, 6, 10, 0.5);
}

.impact-title span {
  display: inline;
  margin-top: 0;
  color: #ffffff;
}

.impact-copy {
  margin: 12px 0 0;
  width: min(400px, 100%);
  color: #ffffff;
  font-size: clamp(0.68rem, 1vw, 0.8rem);
}

.home-band {
  position: relative;
  width: min(1120px, calc(100% - 44px));
  margin: 56px auto 0;
  padding: clamp(34px, 6vw, 92px) 0 clamp(26px, 4vw, 60px);
}

.home-jump-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  width: min(1120px, calc(100% - 44px));
  min-height: 207px;
  margin: 20px auto 0;
  padding-right: 56px;
  padding-top: 42px;
  padding-bottom: 42px;
  color: #000000;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.home-jump-section::after {
  content: "\2192";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.78);
}

.home-jump-section + .home-jump-section {
  margin-top: 10px;
}

.home-band::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: min(1120px, calc(100vw - 28px));
  height: 62%;
  transform: translateX(-50%);
  border-radius: 0;
  background: radial-gradient(circle at 50% 38%, rgba(239, 244, 250, 0.24), rgba(199, 208, 220, 0.08) 56%, transparent 76%);
  pointer-events: none;
}

.home-band-copy {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  margin: 0 auto;
  align-self: center;
  padding: 0;
  text-align: center;
}

.home-band-heading {
  margin: 0 0 12px;
  font-family: "Bakpia Sabang", "Cormorant Garamond", serif;
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #000000;
  text-shadow: 0 8px 22px rgba(72, 80, 92, 0.38);
}

.home-band-copy h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: 1.08;
  color: #000000;
  text-shadow: 0 8px 22px rgba(72, 80, 92, 0.35);
}

.home-band-copy p {
  margin: 18px 0 0;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
  color: #000000;
  text-shadow: 0 6px 18px rgba(72, 80, 92, 0.3);
}

.home-band-links {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.home-band-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 0;
  border: 1px solid rgba(235, 240, 246, 0.48);
  background: rgba(129, 139, 153, 0.26);
  color: #000000;
  transition: transform 0.2s ease, background 0.2s ease;
}

.home-band-links a:hover {
  transform: translateY(-1px);
  background: rgba(235, 240, 246, 0.24);
}

.home-jump-section:hover {
  transform: translateY(-1px);
  background: rgba(232, 238, 246, 0.94);
  border-color: rgba(175, 186, 200, 0.72);
}

.home-rtd .home-jump-section.home-jump-webshop {
  background: #6f7783;
  border-color: rgba(214, 222, 232, 0.78);
  overflow: hidden;
}

.home-rtd .home-jump-section.home-jump-webshop::before {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: clamp(120px, 15vw, 190px);
  height: clamp(120px, 15vw, 190px);
  transform: translateY(-50%);
  background: url("images/relieve-logo.avif") center / contain no-repeat;
  opacity: 0.52;
  pointer-events: none;
}

.home-rtd .home-jump-section.home-jump-webshop .home-jump-title,
.home-rtd .home-jump-section.home-jump-webshop .home-jump-sub,
.home-rtd .home-jump-section.home-jump-webshop::after {
  color: #f2f5f9;
}

.home-rtd .home-jump-section.home-jump-webshop:hover {
  background: #5f6670;
  border-color: rgba(231, 238, 246, 0.82);
}

.home-jump-section.home-jump-seminar {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.5), rgba(27, 33, 41, 0.22)),
    url("images/home-seminar.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(198, 206, 216, 0.72);
}

.home-jump-section.home-jump-seminar .home-jump-title,
.home-jump-section.home-jump-seminar .home-jump-sub,
.home-jump-section.home-jump-seminar::after {
  color: #f5f7fa;
}

.home-jump-section.home-jump-seminar:hover {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.38), rgba(27, 33, 41, 0.18)),
    url("images/home-seminar.jpg");
  border-color: rgba(220, 228, 236, 0.86);
}

.home-jump-section.home-jump-beans {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.46), rgba(27, 33, 41, 0.22)),
    url("images/home-beans.jpg");
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  border-color: rgba(198, 206, 216, 0.72);
}

.home-jump-section.home-jump-beans .home-jump-title,
.home-jump-section.home-jump-beans .home-jump-sub,
.home-jump-section.home-jump-beans::after {
  color: #f5f7fa;
}

.home-jump-section.home-jump-beans:hover {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.34), rgba(27, 33, 41, 0.16)),
    url("images/home-beans.jpg");
  border-color: rgba(220, 228, 236, 0.86);
}

.home-jump-section.home-jump-roasting {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.46), rgba(27, 33, 41, 0.2)),
    url("images/home-roasting-machine.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  border-color: rgba(198, 206, 216, 0.72);
}

.home-jump-section.home-jump-roasting .home-jump-title,
.home-jump-section.home-jump-roasting .home-jump-sub,
.home-jump-section.home-jump-roasting::after {
  color: #f5f7fa;
}

.home-jump-section.home-jump-roasting:hover {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.34), rgba(27, 33, 41, 0.16)),
    url("images/home-roasting-machine.jpg");
  border-color: rgba(220, 228, 236, 0.86);
}

.home-jump-section.home-jump-cafe {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.44), rgba(27, 33, 41, 0.2)),
    url("images/home-cafe.jpg");
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
  border-color: rgba(198, 206, 216, 0.72);
}

.home-jump-section.home-jump-cafe .home-jump-title,
.home-jump-section.home-jump-cafe .home-jump-sub,
.home-jump-section.home-jump-cafe::after {
  color: #f5f7fa;
}

.home-jump-section.home-jump-cafe:hover {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.34), rgba(27, 33, 41, 0.16)),
    url("images/home-cafe.jpg");
  border-color: rgba(220, 228, 236, 0.86);
}

.home-jump-section.home-jump-access {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.46), rgba(27, 33, 41, 0.22)),
    url("images/home-access.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  border-color: rgba(198, 206, 216, 0.72);
}

.home-jump-section.home-jump-access .home-jump-title,
.home-jump-section.home-jump-access .home-jump-sub,
.home-jump-section.home-jump-access::after {
  color: #f5f7fa;
}

.home-jump-section.home-jump-access:hover {
  background-image:
    linear-gradient(140deg, rgba(27, 33, 41, 0.34), rgba(27, 33, 41, 0.16)),
    url("images/home-access.jpg");
  border-color: rgba(220, 228, 236, 0.86);
}

.home-jump-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.home-jump-sub {
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.8);
}

.home-statements {
  width: min(1120px, calc(100% - 44px));
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.statement-card {
  background: var(--bg-paper);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 18px;
  box-shadow: 0 8px 18px rgba(33, 39, 48, 0.08);
}

.statement-card h3 {
  margin: 0;
  color: var(--coffee-dark);
  font-size: 1.16rem;
}

.statement-card p {
  margin: 10px 0 0;
  color: var(--text-sub);
}

.cafe-menu-integrated {
  margin-top: 24px;
}

.cafe-menu-intro {
  margin: 0 0 14px;
}

.cafe-menu-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.cafe-menu-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.cafe-menu-stack figure,
.cafe-menu-main {
  margin: 0;
}

.cafe-menu-stack img,
.cafe-menu-main img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--line-soft);
}

.cafe-menu-main img {
  min-height: 444px;
}

@media (min-width: 901px) {
  .cafe-menu-main img {
    display: block;
    height: auto;
    min-height: 0;
    object-fit: contain;
    background: var(--bg-paper);
  }
}

.consult-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.flow-list {
  margin: 0;
  padding-left: 1.2rem;
}

.flow-list li + li {
  margin-top: 8px;
}

.cafe-hours-card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.cafe-hours-card li + li {
  margin-top: 6px;
}

.menu-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.menu-heading-row .section-title {
  margin-bottom: 0;
}

.menu-heading-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-sub);
}

.bean-focus {
  width: min(1120px, calc(100% - 44px));
  margin: 38px auto 0;
  padding: clamp(20px, 3vw, 34px) 0 8px;
}

.bean-focus-header {
  text-align: center;
}

.bean-focus-title {
  margin: 0;
  font-family: "Bakpia Sabang", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  line-height: 1;
  color: #000000;
  letter-spacing: 0.04em;
  text-shadow: 0 8px 22px rgba(72, 80, 92, 0.35);
}

.bean-focus-subtitle {
  margin: 8px 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000000;
}

.bean-focus-layout {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 26px;
  align-items: stretch;
}

.bean-pyramid {
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-height: 420px;
  height: 100%;
}

.pyramid-top-label {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 3px 10px;
  border-radius: 0;
  border: 2px solid rgba(255, 217, 102, 0.95);
  background: rgba(191, 143, 39, 0.86);
  color: #000000;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 0 0 0 4px rgba(255, 217, 102, 0.28);
  z-index: 2;
  pointer-events: none;
}

.pyramid-tier {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border: 1px solid rgba(235, 240, 246, 0.32);
  display: grid;
  place-items: center;
  color: #000000;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 12px rgba(68, 76, 88, 0.35);
}

.pyramid-tier + .pyramid-tier {
  margin-top: -1px;
}

.pyramid-tier span {
  padding: 0 10px;
}

.tier-specialty {
  background: linear-gradient(160deg, rgba(255, 237, 169, 0.95), rgba(255, 213, 94, 0.95));
  border: 2px solid rgba(255, 191, 36, 0.95);
  filter: drop-shadow(0 0 12px rgba(255, 209, 86, 0.38));
  clip-path: polygon(50% 0, 50% 0, 62.5% 100%, 37.5% 100%);
}

.tier-premium {
  background: linear-gradient(160deg, rgba(210, 219, 231, 0.42), rgba(172, 184, 199, 0.56));
  clip-path: polygon(37.5% 0, 62.5% 0, 75% 100%, 25% 100%);
}

.tier-commercial {
  background: linear-gradient(160deg, rgba(186, 197, 211, 0.4), rgba(149, 163, 180, 0.54));
  clip-path: polygon(25% 0, 75% 0, 87.5% 100%, 12.5% 100%);
}

.tier-lowgrade {
  background: linear-gradient(160deg, rgba(163, 176, 193, 0.38), rgba(132, 147, 166, 0.52));
  clip-path: polygon(12.5% 0, 87.5% 0, 100% 100%, 0 100%);
}

.bean-grade-notes {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 420px;
  height: 100%;
}

.bean-grade-notes article {
  padding: 12px 14px;
  border-radius: 0;
  border: 1px solid rgba(233, 238, 245, 0.26);
  background: rgba(132, 143, 158, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bean-grade-notes h3 {
  margin: 0;
  font-size: 1.02rem;
  color: #000000;
}

.bean-grade-notes p {
  margin: 6px 0 0;
  color: #000000;
  font-size: 0.93rem;
  line-height: 1.65;
}

.bean-focus-policy {
  margin: 20px auto 0;
  max-width: 76ch;
  color: #000000;
  text-align: center;
  line-height: 1.85;
  text-shadow: 0 6px 16px rgba(72, 80, 92, 0.24);
}

.bean-check-lead-title {
  margin: 0;
  font-family: "Bakpia Sabang", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  line-height: 1;
  color: #000000;
  letter-spacing: 0.04em;
  text-shadow: 0 8px 22px rgba(72, 80, 92, 0.35);
  text-align: center;
}

.bean-check-subtitle {
  margin: 10px 0 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  color: var(--coffee-medium);
  letter-spacing: 0.03em;
}

.bean-check-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.bean-check-image {
  width: 100%;
  height: clamp(300px, 32vw, 360px);
  display: block;
  object-fit: cover;
  object-position: center;
  align-self: start;
  border-right: 1px solid var(--line-soft);
}

.bean-check-copy {
  padding: 20px 20px 22px;
}

.bean-check-copy p {
  margin: 0 0 14px;
  color: var(--text-sub);
  line-height: 1.8;
}

.bean-check-points {
  margin: 0;
}

.home-gallery {
  width: min(1120px, calc(100% - 44px));
  margin: 40px auto 0;
}

.home-gallery h2 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #000000;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  letter-spacing: 0.05em;
}

.home-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-gallery-grid figure {
  margin: 0;
  width: min(100%, 300px);
  justify-self: center;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(229, 234, 240, 0.26);
  background: rgba(116, 125, 138, 0.82);
  box-shadow: 0 12px 22px rgba(56, 64, 74, 0.2);
}

.home-gallery-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  filter: saturate(0.84) contrast(1.03);
}

.roasting-about-page {
  display: grid;
  gap: 0;
}

.roasting-about-hero {
  grid-template-columns: 1.3fr 1fr;
}

.roasting-about-main-visual {
  min-height: 430px;
  background-image:
    linear-gradient(150deg, rgba(28, 33, 41, 0.68), rgba(28, 33, 41, 0.24)),
    url("images/roasting-about.jpg");
  background-size: cover;
  background-position: center;
}

.roasting-about-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.roasting-about-hero-copy .kicker,
.roasting-about-cta .kicker,
.roasting-about-message .kicker {
  margin: 0;
}

.roasting-about-hero-copy h1,
.roasting-about-message .section-title,
.roasting-about-cta h2 {
  margin: 0;
}

.roasting-about-hero-copy p {
  margin: 0;
}

.roasting-about-taste-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.roasting-about-taste-card h3,
.roasting-about-level-card h3,
.roasting-about-focus-card h3,
.roasting-about-step-copy h3 {
  margin: 0 0 8px;
}

.roasting-about-taste-card p,
.roasting-about-level-card p,
.roasting-about-focus-card p,
.roasting-about-step-copy p,
.roasting-about-message p,
.roasting-about-cta p {
  margin: 0;
}

.roasting-about-roast-levels {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.roasting-about-level-card {
  background: linear-gradient(180deg, rgba(246, 248, 251, 0.88), rgba(229, 234, 241, 0.88));
}

.roasting-about-level-label {
  margin: 0 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coffee-medium);
}

.roasting-about-steps {
  display: grid;
  gap: 18px;
}

.roasting-about-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.roasting-about-step.is-reverse .roasting-about-step-media {
  order: 2;
}

.roasting-about-step.is-reverse .roasting-about-step-copy {
  order: 1;
}

.roasting-about-step-media {
  margin: 0;
  min-height: 250px;
  border-right: 1px solid var(--line-soft);
  background: rgba(202, 210, 220, 0.56);
}

.roasting-about-step.is-reverse .roasting-about-step-media {
  border-right: 0;
  border-left: 1px solid var(--line-soft);
}

.roasting-about-step-media img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  display: block;
}

.roasting-about-step-copy {
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.roasting-about-step-no {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--coffee-medium);
}

.roasting-about-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.roasting-about-focus-card {
  display: grid;
  gap: 8px;
}

.roasting-about-message {
  display: grid;
  gap: 14px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(234, 239, 246, 0.9), rgba(224, 231, 240, 0.9));
}

.roasting-about-cta {
  border: 1px solid rgba(109, 117, 128, 0.52);
  box-shadow: 0 12px 24px rgba(31, 38, 49, 0.14);
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(145deg, #4b5562, #353e49);
  color: #f7f9fc;
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.roasting-about-cta .kicker {
  color: rgba(247, 249, 252, 0.78);
}

.roasting-about-cta h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.15;
  margin-bottom: 10px;
}

.roasting-about-cta .base-link {
  margin-top: 0;
}

.seminar-page {
  display: grid;
  gap: 0;
}

.seminar-hero {
  grid-template-columns: 1.3fr 1fr;
}

.seminar-hero-visual {
  min-height: 430px;
  background-image:
    linear-gradient(150deg, rgba(29, 33, 42, 0.66), rgba(29, 33, 42, 0.26)),
    url("images/seminar-images/seminar-7.JPG");
  background-size: cover;
  background-position: center;
}

.seminar-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.seminar-hero-copy .kicker,
.seminar-cta .kicker {
  margin: 0;
}

.seminar-hero-copy h1,
.seminar-cta h2 {
  margin: 0;
}

.seminar-hero-copy p,
.seminar-intro-card p,
.seminar-feature-card p,
.seminar-first-card p,
.seminar-factor-card p,
.seminar-cta p {
  margin: 0;
}

.seminar-intro-card {
  margin-bottom: 16px;
}

.seminar-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.seminar-feature-card h3,
.seminar-level-card h3,
.seminar-factor-card h3 {
  margin: 0 0 8px;
}

.seminar-heading-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.seminar-heading-inline .section-title {
  margin-bottom: 0;
}

.seminar-date {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-sub);
}

.seminar-first-card {
  margin-top: 12px;
}

.seminar-timeline {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.seminar-timeline-item {
  display: block;
  padding: 14px 16px;
}

.seminar-timeline-text {
  margin: 0;
  color: var(--text-sub);
}

.seminar-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.seminar-gallery-item {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.seminar-gallery-item img {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: cover;
}

.seminar-level-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.seminar-level-card {
  background: linear-gradient(180deg, rgba(243, 246, 250, 0.92), rgba(231, 236, 243, 0.9));
}

.seminar-level-kicker {
  margin: 0 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coffee-medium);
}

.seminar-level-card .info-list li {
  margin: 0 0 7px;
}

.seminar-level-card .info-list li:last-child {
  margin-bottom: 0;
}

.seminar-factor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.seminar-factor-card {
  display: grid;
  gap: 8px;
}

.seminar-factor-note {
  margin: 14px 0 0;
  color: var(--text-sub);
  line-height: 1.85;
}

.seminar-cta {
  border: 1px solid rgba(109, 117, 128, 0.52);
  box-shadow: 0 12px 24px rgba(31, 38, 49, 0.14);
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(150deg, #4f5866, #363f4a);
  color: #f7f9fc;
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.seminar-cta .kicker {
  color: rgba(247, 249, 252, 0.78);
}

.seminar-cta h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.15;
  margin-bottom: 10px;
}

.seminar-cta-link {
  margin-top: 0;
}

.seminar-cta-sub {
  margin-top: 12px;
  font-size: 0.9rem;
  color: rgba(247, 249, 252, 0.9);
}

@media (max-width: 900px) {
  .seminar-hero {
    grid-template-columns: 1fr;
  }

  .seminar-hero-visual {
    min-height: 280px;
  }

  .seminar-feature-grid,
  .seminar-level-grid,
  .seminar-factor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seminar-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seminar-cta {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .seminar-feature-grid,
  .seminar-gallery,
  .seminar-level-grid,
  .seminar-factor-grid {
    grid-template-columns: 1fr;
  }

  .seminar-timeline-item {
    display: block;
  }

  .seminar-factor-note {
    font-size: 0.95rem;
  }
}

@media (max-width: 900px) {
  .roasting-about-hero {
    grid-template-columns: 1fr;
  }

  .roasting-about-main-visual {
    min-height: 280px;
  }

  .roasting-about-taste-grid,
  .roasting-about-roast-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roasting-about-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roasting-about-step {
    grid-template-columns: 1fr;
  }

  .roasting-about-step.is-reverse .roasting-about-step-media,
  .roasting-about-step.is-reverse .roasting-about-step-copy {
    order: initial;
  }

  .roasting-about-step-media,
  .roasting-about-step.is-reverse .roasting-about-step-media {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    min-height: 220px;
  }

  .roasting-about-step-media img {
    min-height: 220px;
  }

  .roasting-about-cta {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .roasting-about-taste-grid,
  .roasting-about-roast-levels,
  .roasting-about-focus-grid {
    grid-template-columns: 1fr;
  }

  .roasting-about-step-copy {
    padding: 20px 18px;
  }

  .roasting-about-message {
    padding: 22px 18px;
  }
}

@media (max-width: 900px) {
  .header-inner {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .brand-area {
    gap: 8px;
  }

  .brand-logo {
    height: 68px;
    max-width: 150px;
  }

  .brand-main {
    font-size: 1.2rem;
    letter-spacing: 0.03em;
  }

  .brand-sub {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .header-insta {
    width: 28px;
    height: 28px;
  }

  .global-nav {
    gap: 2px;
    justify-content: flex-end;
  }

  .global-nav a {
    font-size: clamp(0.56rem, 1.35vw, 0.7rem);
    letter-spacing: 0;
    padding: 5px 4px;
    min-width: 0;
    line-height: 1.15;
  }

  .home-rtd main {
    padding-bottom: 66px;
  }

  .impact-hero,
  .impact-inner {
    min-height: clamp(500px, 82svh, 760px);
  }

  .home-band {
    margin-top: 40px;
    padding-top: 18px;
  }

  .home-gallery-grid figure {
    width: 100%;
  }

  .bean-focus-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bean-check-card {
    grid-template-columns: 1fr;
  }

  .bean-check-image {
    height: 240px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .bean-pyramid,
  .bean-grade-notes {
    min-height: 0;
    height: auto;
  }

  .bean-focus-policy {
    text-align: left;
  }

  .cafe-menu-gallery,
  .consult-grid {
    grid-template-columns: 1fr;
  }

  .cafe-menu-main img {
    min-height: 260px;
  }

  .home-gallery-grid img {
    height: 140px;
  }

  .home-statements,
  .home-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .video-top {
    min-height: 62svh;
  }

  .video-top-center {
    margin-top: clamp(44px, 8vh, 72px);
  }

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

  .hero-visual {
    min-height: 220px;
  }

  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bean-shop-grid {
    grid-template-columns: 1fr;
  }

  .strong-points {
    grid-template-columns: 1fr;
  }

  .flavor-wheel-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .flavor-square-wrap {
    width: min(100%, 560px);
    padding: 30px;
  }

  .flavor-table-wrap {
    width: min(100%, 620px);
    padding: 30px 34px;
  }
}

@media (max-width: 680px) {
  .impact-inner,
  .home-band,
  .home-statements,
  .home-gallery,
  .home-jump-section {
    width: calc(100% - 28px);
  }

  .impact-title {
    font-size: clamp(0.8rem, 3.1vw, 1.1rem);
  }

  .impact-brand-reveal {
    gap: 10px;
    margin-bottom: 12px;
  }

  .impact-brand-logo {
    width: clamp(86px, 24vw, 114px);
  }

  .impact-brand-name {
    font-size: clamp(1.34rem, 8vw, 2.2rem);
    letter-spacing: 0.05em;
  }

  .impact-brand-sub {
    font-size: clamp(0.64rem, 2.7vw, 0.74rem);
  }

  .impact-brand-copy {
    min-width: 0;
  }

  .impact-hero,
  .impact-inner {
    min-height: clamp(420px, 76svh, 620px);
  }

  .home-rtd .impact-hero,
  .home-rtd .impact-inner {
    min-height: calc(100svh - var(--site-header-height) - env(safe-area-inset-top));
  }

  .home-rtd .impact-video {
    width: auto;
    height: 100svh;
    min-width: 100vw;
    filter: saturate(1.28) contrast(1.12) brightness(1.06);
    object-fit: cover;
    object-position: center;
  }

  .home-rtd .impact-overlay {
    width: 100vw;
    height: 100svh;
  }

  .impact-overlay {
    background:
      linear-gradient(180deg, rgba(82, 91, 103, 0.18) 0%, rgba(98, 108, 121, 0.12) 34%, rgba(114, 125, 139, 0.18) 100%),
      linear-gradient(100deg, rgba(121, 132, 146, 0.1) 0%, rgba(121, 132, 146, 0) 52%);
  }

  .impact-copy {
    font-size: 0.62rem;
  }

  @media (max-width: 420px) {
    .impact-brand-name {
      font-size: clamp(1.12rem, 7vw, 1.6rem);
      letter-spacing: 0.03em;
    }
  }

  .home-band-heading {
    font-size: clamp(1.45rem, 8vw, 2.1rem);
  }

  .home-rtd .home-band,
  .home-rtd .home-statements,
  .home-rtd .bean-focus,
  .home-rtd .home-gallery,
  .home-rtd .home-jump-section {
    backdrop-filter: none;
  }

  .home-statements,
  .home-gallery-grid {
    grid-template-columns: 1fr;
  }

  .bean-focus {
    width: calc(100% - 28px);
  }

  .pyramid-tier {
    font-size: 0.86rem;
  }

  .pyramid-top-label {
    font-size: 0.8rem;
  }

  .home-gallery-grid img {
    height: 120px;
  }

  .home-band-links a {
    width: 100%;
  }

  .home-jump-section {
    min-height: 177px;
    padding: 30px 14px;
    padding-right: 44px;
  }

  .home-jump-section::after {
    right: 14px;
    font-size: 1.12rem;
  }

  .home-jump-title {
    font-size: 1.15rem;
  }

  .home-jump-sub {
    font-size: 0.82rem;
  }

  .video-top {
    min-height: 58svh;
  }

  .video-top-center {
    width: calc(100% - 24px);
    margin-top: 40px;
  }

  .video-top-scroll {
    bottom: 12px;
  }

  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 7px 9px;
  }

  .brand-area {
    width: 100%;
    flex: 0 0 auto;
    justify-content: space-between;
    gap: 8px;
  }

  .brand-logo {
    height: 42px;
    max-width: 88px;
  }

  .brand-main {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .brand-sub {
    display: block;
    margin-top: 1px;
    font-size: 0.48rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .header-insta {
    width: 20px;
    height: 20px;
  }

  .global-nav {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    overflow: hidden;
  }

  .global-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(0.5rem, 2.25vw, 0.62rem);
    letter-spacing: 0;
    line-height: 1.1;
    padding: 6px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .global-nav a.nav-seminar {
    flex-direction: column;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.05;
  }

  .global-nav a.nav-seminar .nav-seminar-second-line {
    display: block;
  }

  main {
    padding: 28px 16px 56px;
  }

  .hero-copy {
    padding: 26px 20px;
  }

  .flavor-square-wrap {
    width: 100%;
    padding: 24px;
  }

  .flavor-square-meta {
    font-size: 0.82rem;
  }

  .flavor-table-wrap {
    width: 100%;
    padding: 24px 28px;
  }

  .flavor-table-y-top,
  .flavor-table-y-bottom,
  .flavor-table-x-left,
  .flavor-table-x-right {
    font-size: 0.78rem;
  }

  .flavor-table-x-left {
    left: -10px;
  }

  .flavor-table-x-right {
    right: -10px;
  }


  .grid.two,
  .grid.three,
  .bean-shop-grid,
  .photo-strip,
  .photo-strip.two {
    grid-template-columns: 1fr;
  }

  .base-link,
  .base-link-large {
    width: 100%;
    min-width: 0;
  }

  .photo-card img {
    height: 210px;
  }
}

@media (max-width: 420px) {
  .header-inner {
    gap: 5px;
    padding: 6px 7px;
  }

  .brand-logo {
    height: 36px;
    max-width: 76px;
  }

  .brand-main {
    font-size: 0.72rem;
  }

  .brand-sub {
    font-size: 0.44rem;
  }

  .header-insta {
    width: 18px;
    height: 18px;
  }

  .global-nav {
    gap: 1px;
  }

  .global-nav a {
    font-size: clamp(0.43rem, 1.9vw, 0.52rem);
    padding: 5px 1px;
  }
}