/* ============================================================
   Chill Company — Page styles
   Home · Philosophy · Story · Chill Plz! · Chill Inn · Contact
   ============================================================ */

/* ===========================================================
   HOME
   =========================================================== */

.home-hero .hero__title { letter-spacing: -0.025em; }
.home-hero .hero__title .bilingual__zh {
  margin-top: var(--space-3);
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
  letter-spacing: 0;
}

.home-philosophy { background: var(--bg-elevated); }
.home-philosophy__statement {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
/* Honor explicit \n in the JP version so the two sentences sit on separate lines. */
html[lang="ja"] .home-philosophy__statement {
  white-space: pre-line;
  max-width: none;
}
.home-philosophy__body {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  max-width: 56ch;
  margin-top: var(--space-4);
}

/* Product gateway cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* Temporary: with Chill Inn hidden, only 2 cards remain.
   Two equal columns fill the row so it doesn't look unbalanced. Remove when Chill Inn returns. */
.product-grid--two {
  grid-template-columns: repeat(2, 1fr);
}
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 460px;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.product-card__art      { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.product-card__content  { position: relative; z-index: 1; }
.product-card__eyebrow {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.product-card__title {
  font-size: var(--text-h2);
  line-height: 1;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
  color: var(--text-primary);  /* explicit — defends against dark variants */
}
.product-card__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-3);
}
.product-card__desc {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-5);
  max-width: 32ch;
}
.product-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: 600;
}
.product-card__cta::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.product-card:hover .product-card__cta::after { transform: translateX(4px); }

/* STILL — dark variant: override title color */
.product-card--still {
  background: linear-gradient(155deg, #05060A 0%, #131826 60%, #1F2A45 100%);
  color: #F7F3EA;
}
.product-card--still .product-card__title { color: #F7F3EA; }
.product-card--still .product-card__eyebrow,
.product-card--still .product-card__tagline,
.product-card--still .product-card__cta { color: var(--color-chill-blue); }
.product-card--still .product-card__desc { color: rgba(247, 243, 234, 0.7); }
.product-card--still .product-card__art {
  background:
    radial-gradient(40% 30% at 80% 20%, rgba(131, 189, 236, 0.35) 0%, transparent 70%),
    radial-gradient(35% 25% at 20% 80%, rgba(144, 184, 255, 0.18) 0%, transparent 70%);
}

.product-card--plz {
  background: linear-gradient(155deg, #FEF9E0 0%, #FBE4DC 100%);
  color: var(--text-primary);
}
.product-card--plz .product-card__eyebrow,
.product-card--plz .product-card__tagline,
.product-card--plz .product-card__cta { color: #D4825D; }
.product-card--plz .product-card__desc { color: var(--text-muted); }
.product-card--plz .product-card__art::before {
  content: ""; position: absolute; right: -20%; top: 10%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(249, 235, 138, 0.6) 0%, transparent 60%);
}

.product-card--inn {
  background: linear-gradient(155deg, #EEF4FB 0%, #F7DDD2 100%);
  color: var(--text-primary);
}
.product-card--inn .product-card__eyebrow,
.product-card--inn .product-card__tagline,
.product-card--inn .product-card__cta { color: var(--accent-hover); }
.product-card--inn .product-card__desc { color: var(--text-muted); }
.product-card--inn .product-card__art {
  background:
    radial-gradient(45% 35% at 20% 80%, rgba(131, 189, 236, 0.25) 0%, transparent 70%),
    radial-gradient(35% 30% at 90% 10%, rgba(247, 190, 182, 0.4) 0%, transparent 70%);
}

@media (max-width: 1023px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 360px; }
}

.founder-teaser { background: var(--bg-elevated); text-align: center; }
.founder-teaser .pullquote { margin-inline: auto; text-align: center; max-width: 22ch; }

.home-closing {
  text-align: center;
  padding: var(--space-10) 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(131, 189, 236, 0.18) 0%, transparent 60%);
}
.home-closing__statement {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
}
/* Japanese closing statement must stay on one line.
   Scale font with viewport so it fits at every width (down to small phones). */
html[lang="ja"] .home-closing__statement {
  white-space: nowrap;
  font-size: clamp(18px, 4vw, 56px);
  letter-spacing: 0;
}
.home-closing__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--accent-hover);
}

/* ===========================================================
   PHILOSOPHY
   =========================================================== */

.philosophy-hero { padding-bottom: var(--space-8); }
.philosophy-hero .hero__title { max-width: 18ch; }

.philosophy-section { padding: var(--space-8) 0; }
.philosophy-section + .philosophy-section { border-top: 1px solid var(--line-soft); }
.philosophy-section__lead {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 22ch;
}
.philosophy-section__body {
  max-width: 60ch;
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 1023px) {
  .philosophy-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

.philosophy-meaning {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.philosophy-meaning__item {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
}
.philosophy-meaning__item--is {
  background: linear-gradient(155deg, rgba(131, 189, 236, 0.15) 0%, rgba(247, 190, 182, 0.15) 100%);
  border-color: rgba(131, 189, 236, 0.3);
}
.philosophy-meaning__label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
  line-height: 1.3;
}
@media (max-width: 1023px) { .philosophy-meaning { grid-template-columns: 1fr; } }

.philosophy-closing {
  text-align: center;
  padding: var(--space-10) 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(247, 190, 182, 0.15) 0%, transparent 70%);
}
/* Each sentence in the closing pullquote stays on its own single line.
   The pullquote's default 26ch max-width is intended for Latin and clips
   CJK lines; we drop that constraint and force nowrap on each span. */
.philosophy-closing__lines {
  max-width: none;
}
.philosophy-closing__lines span {
  display: inline-block;
  white-space: nowrap;
}
/* CJK languages need a smaller clamp() to fit the longer sentences on
   narrow viewports without horizontal scroll. */
html[lang="zh-Hant"] .philosophy-closing__lines,
html[lang="ja"]      .philosophy-closing__lines {
  font-size: clamp(20px, 3.6vw, 40px);
}
/* English versions are 30+ chars in italic serif. The default
   .pullquote clamp(28px, 4vw, 48px) makes "Calm is a competitive
   advantage." overflow 375px phones. Scale the EN closing down on
   mobile and let each line wrap if it must. */
@media (max-width: 599px) {
  html[lang="en"] .philosophy-closing__lines {
    font-size: clamp(18px, 5.2vw, 28px);
  }
  html[lang="en"] .philosophy-closing__lines span {
    white-space: normal;
    max-width: 28ch;
  }
}

/* ===========================================================
   STORY
   =========================================================== */

.story-hero {
  padding: var(--space-10) 0 var(--space-7);
  background:
    radial-gradient(50% 40% at 80% 20%, rgba(249, 235, 138, 0.25) 0%, transparent 60%),
    radial-gradient(40% 35% at 10% 90%, rgba(131, 189, 236, 0.18) 0%, transparent 60%);
}
.story-hero__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.25;
  max-width: 18ch;
  margin: 0 auto var(--space-5);
  text-align: center;
  /* The hero quote is now an <h1>. Reset browser h1 defaults but keep
     the editorial italic-serif look. */
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Han / JP heading tuning — the H1 wraps a serif italic quote in EN,
   but CJK fonts don't have a great italic, so we drop italics and use
   the local sans/han fallbacks. */
html[lang="zh-Hant"] .story-article__title { font-family: var(--font-han); font-style: normal; }
html[lang="ja"]      .story-article__title { font-family: var(--font-jp);  font-style: normal; letter-spacing: 0.01em; }

.story-body {
  max-width: 680px;
  margin: 0 auto;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-muted);
}
.story-body p { margin-top: var(--space-5); }
.story-body p:first-child { margin-top: 0; }
.story-body blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--text-primary);
}

.story-signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--accent-hover);
  margin-top: var(--space-7);
  text-align: center;
}

/* ===========================================================
   CHILL PLZ!
   Cleaner editorial flow; cards-first hero; structured grid.
   =========================================================== */

.plz-hero {
  position: relative;
  padding: var(--space-9) 0 var(--space-9);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(50% 60% at 80% 10%, rgba(249, 235, 138, 0.45) 0%, transparent 60%),
    radial-gradient(50% 50% at 20% 90%, rgba(247, 190, 182, 0.40) 0%, transparent 60%);
}
.plz-hero__cards {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 0;
  margin: 0 auto var(--space-6);
  max-width: 480px;
  position: relative;
}
.plz-hero__cards img {
  width: 28%;
  border-radius: 12px;
  box-shadow: 0 24px 50px -12px rgba(14, 19, 32, 0.25);
  transition: transform var(--dur) var(--ease);
}
.plz-hero__cards img:nth-child(1) { transform: translateY(12px) rotate(-9deg); margin-right: -4%; }
.plz-hero__cards img:nth-child(2) { transform: translateY(-8px);                z-index: 2; }
.plz-hero__cards img:nth-child(3) { transform: translateY(12px) rotate(9deg);   margin-left: -4%; }
.plz-hero__cards:hover img:nth-child(1) { transform: translateY(2px) rotate(-13deg); }
.plz-hero__cards:hover img:nth-child(2) { transform: translateY(-16px); }
.plz-hero__cards:hover img:nth-child(3) { transform: translateY(2px) rotate(13deg); }
.plz-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-hover);
  margin-bottom: var(--space-4);
}
.plz-hero__chip {
  padding: 4px 12px;
  background: var(--text-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  letter-spacing: var(--tracking-micro);
  font-weight: 600;
}
.plz-hero__title {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 18ch;
  margin: 0 auto var(--space-4);
}
.plz-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--accent-hover);
  margin-bottom: var(--space-4);
}
.plz-hero__sub {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}
.plz-hero__cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Narrative slabs (Quietest Distance / Invisible Wall) */
.plz-narrative {
  padding: var(--space-9) 0;
  text-align: center;
}
.plz-narrative--alt { background: var(--bg-elevated); }
.plz-narrative__eyebrow {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-hover);
  margin-bottom: var(--space-4);
}
.plz-narrative__body {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 400;
}
.plz-narrative__closer {
  margin-top: var(--space-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--accent-hover);
}

/* Why we built it */
.plz-why { background: var(--bg-elevated); }
.plz-statement {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

/* Three card types — intro section */
.plz-types__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.plz-types__cell {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plz-types__cell:hover { transform: translateY(-3px); border-color: var(--line); }
.plz-types__icon {
  width: 64px; height: 88px;
  margin: 0 auto var(--space-4);
  border-radius: 8px;
  display: block;
}
.plz-types__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.plz-types__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--accent-hover);
  margin-bottom: var(--space-2);
}
.plz-types__body {
  font-size: var(--text-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
  max-width: 30ch;
  margin: 0 auto;
}
@media (max-width: 1023px) { .plz-types__grid { grid-template-columns: 1fr; } }

/* Elements deck — single horizontal row of category bands */
.plz-elements__group {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--line-soft);
}
.plz-elements__group:last-child { border-bottom: 0; }
.plz-elements__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
}
.plz-elements__group-label {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
}
.plz-elements__group-count {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}
.plz-cards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
.plz-elements__group--four .plz-cards-row { grid-template-columns: repeat(4, 1fr); }
.plz-elements__group--one  .plz-cards-row { grid-template-columns: 1fr; max-width: 260px; margin-inline: auto; }
@media (max-width: 1023px) {
  .plz-cards-row,
  .plz-elements__group--four .plz-cards-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .plz-cards-row,
  .plz-elements__group--four .plz-cards-row { grid-template-columns: repeat(2, 1fr); }
}

.plz-card {
  display: block;
  text-align: center;
}
.plz-card__face {
  aspect-ratio: 2 / 3;
  background: var(--bg-elevated);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px -10px rgba(14, 19, 32, 0.18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plz-card__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plz-card:hover .plz-card__face {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 24px 48px -12px rgba(14, 19, 32, 0.25);
}
.plz-card__name {
  display: block;
  margin-top: var(--space-3);
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-body);
}
.plz-card__phrase {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.plz-card__verb {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent-hover);
  font-size: var(--text-small);
}

/* Transformation vignettes */
.plz-vignettes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.plz-vignette {
  padding: var(--space-6) var(--space-5);
  background: linear-gradient(155deg, #FEF9E0 0%, #FBE4DC 100%);
  border-radius: var(--radius-lg);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
  line-height: 1.3;
  text-align: center;
  color: var(--text-primary);
}
.plz-vignette:nth-child(2) { background: linear-gradient(155deg, #EEF4FB 0%, #FEF9E0 100%); }
.plz-vignette:nth-child(3) { background: linear-gradient(155deg, #FBE4DC 0%, #EEF4FB 100%); }
@media (max-width: 1023px) { .plz-vignettes { grid-template-columns: 1fr; } }

.plz-vignette-closer {
  text-align: center;
  margin-top: var(--space-7);
  font-size: clamp(20px, 2.2vw, 28px);
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 60ch;
  margin-inline: auto;
}

/* Game rules — neat 4×2 grid */
.plz-game { background: var(--bg-elevated); }
.plz-game__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.plz-game__item {
  padding: var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--accent);
}
.plz-game__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-hover);
  margin-bottom: var(--space-2);
}
.plz-game__body {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
@media (max-width: 1023px) { .plz-game__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .plz-game__grid { grid-template-columns: 1fr; } }

/* Use cases */
.plz-usecases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.plz-usecase {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  font-weight: 600;
}
@media (max-width: 1023px) { .plz-usecases { grid-template-columns: repeat(2, 1fr); } }

/* Promise */
.plz-promise {
  text-align: center;
  padding: var(--space-10) 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(249, 235, 138, 0.4) 0%, transparent 60%);
}
.plz-promise__title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: var(--space-4);
  max-width: 18ch;
  margin-inline: auto;
}
.plz-promise__body {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  max-width: 48ch;
  margin: 0 auto var(--space-6);
}
.plz-promise__cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.plz-closing { text-align: center; padding: var(--space-9) 0 var(--space-10); }
.plz-closing__statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1;
  color: var(--text-primary);
}

/* ===========================================================
   CHILL INN — editorial, calm, warm cream + deep ink
   =========================================================== */

body[data-page="chillInn"] {
  background: #F4EDE2;
  color: #1B1A17;
}
body[data-page="chillInn"] .nav {
  background: rgba(244, 237, 226, 0.78);
}
body[data-page="chillInn"] .nav.is-scrolled {
  background: rgba(244, 237, 226, 0.96);
  border-bottom-color: rgba(27, 26, 23, 0.14);
}
/* Mobile: solid background, no blur */
@media (max-width: 1023px) {
  body[data-page="chillInn"] .nav,
  body[data-page="chillInn"] .nav.is-scrolled {
    background: rgba(244, 237, 226, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
body[data-page="chillInn"] .nav__menu a { color: rgba(27, 26, 23, 0.65); }
body[data-page="chillInn"] .nav__menu a:hover,
body[data-page="chillInn"] .nav__menu a[aria-current="page"] { color: #1B1A17; }
body[data-page="chillInn"] .nav__menu a[aria-current="page"]::after { background: #C7522A; }
body[data-page="chillInn"] button.nav__lang,
body[data-page="chillInn"] .nav__lang-btn { border-color: rgba(27, 26, 23, 0.2); color: rgba(27, 26, 23, 0.7); }
body[data-page="chillInn"] button.nav__lang:hover,
body[data-page="chillInn"] .nav__lang-btn:hover,
body[data-page="chillInn"] .nav__lang-btn[aria-expanded="true"] { border-color: #1B1A17; color: #1B1A17; }
body[data-page="chillInn"] .nav__submenu {
  background: linear-gradient(to bottom, transparent 0 12px, #F8F2E6 12px 100%);
}
body[data-page="chillInn"] .nav__submenu::before { border-color: rgba(27, 26, 23, 0.15); }
body[data-page="chillInn"] .nav__submenu a { color: rgba(27, 26, 23, 0.65); }
body[data-page="chillInn"] .nav__submenu a:hover { color: #1B1A17; background: rgba(27, 26, 23, 0.04); }

body[data-page="chillInn"] .footer {
  margin-top: 0;
  background: #1B1A17;
  color: rgba(247, 243, 234, 0.7);
  border-top: 0;
}
body[data-page="chillInn"] .footer__tagline { color: #F7F3EA; }
body[data-page="chillInn"] .footer__col h4   { color: rgba(247, 243, 234, 0.55); }
body[data-page="chillInn"] .footer__col a    { color: rgba(247, 243, 234, 0.7); }
body[data-page="chillInn"] .footer__col a:hover { color: #F7F3EA; }
body[data-page="chillInn"] .footer__top      { border-bottom-color: rgba(247, 243, 234, 0.15); }
body[data-page="chillInn"] .footer__bottom   { color: rgba(247, 243, 234, 0.4); }

/* Buttons on cream */
body[data-page="chillInn"] .btn--primary {
  background: #1B1A17;
  color: #F4EDE2;
}
body[data-page="chillInn"] .btn--primary:hover { background: #C7522A; }
body[data-page="chillInn"] .btn--ghost {
  border-color: rgba(27, 26, 23, 0.3);
  color: #1B1A17;
}
body[data-page="chillInn"] .btn--ghost:hover {
  border-color: #1B1A17;
  background: rgba(27, 26, 23, 0.04);
}

/* Hero — full-bleed photo above, generous typography below */
.inn-hero {
  position: relative;
  background: #F4EDE2;
}
.inn-hero__photo {
  width: 100%;
  aspect-ratio: 16 / 8;
  max-height: 70vh;
  overflow: hidden;
  position: relative;
}
.inn-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inn-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, #F4EDE2 100%);
  pointer-events: none;
}
.inn-hero__content {
  padding: var(--space-7) 0 var(--space-9);
  position: relative;
  z-index: 1;
}
.inn-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(27, 26, 23, 0.6);
}
.inn-hero__meta-l::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C7522A;
  margin-right: 10px;
  vertical-align: middle;
}
.inn-hero__eyebrow {
  display: block;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: #C7522A;
  margin-bottom: var(--space-5);
}
.inn-hero__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #1B1A17;
  margin: 0 0 var(--space-4);
}
.inn-hero__title em { font-style: italic; color: #4A6F4F; }
html[lang="zh-Hant"] .inn-hero__title em { color: #4A6F4F; font-style: normal; }
.inn-hero__title-zh {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-han);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0;
}
.inn-hero__kicker {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: end;
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid rgba(27, 26, 23, 0.15);
}
.inn-hero__kicker-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: rgba(27, 26, 23, 0.78);
  max-width: 56ch;
  margin: 0;
}
.inn-hero__kicker-quote .zh {
  display: block;
  margin-top: 6px;
  font-family: var(--font-han);
  font-style: normal;
  font-size: var(--text-body);
  color: rgba(27, 26, 23, 0.6);
}
.inn-hero__vol {
  text-align: right;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: rgba(27, 26, 23, 0.55);
  font-weight: 600;
  line-height: 1.6;
}
.inn-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (max-width: 768px) {
  .inn-hero__kicker { grid-template-columns: 1fr; }
  .inn-hero__vol { text-align: left; }
}

/* Section primitives — calm, not crumbed */
.inn-section { padding: var(--space-10) 0; }
.inn-section--soft  { background: #F8F2E6; }
.inn-section--ink   { background: #1B1A17; color: rgba(247, 243, 234, 0.85); }
.inn-section--ink .inn-eyebrow { color: #E8A87C; }
.inn-section--ink .inn-h2      { color: #F7F3EA; }
.inn-section--ink .inn-h2 em   { color: #E8A87C; }
.inn-section--ink .inn-body    { color: rgba(247, 243, 234, 0.7); }
.inn-section--ink .inn-body em { color: #E8A87C; }

.inn-eyebrow {
  display: block;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: #C7522A;
  margin-bottom: var(--space-4);
}
.inn-h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: #1B1A17;
  max-width: 22ch;
  margin: 0 0 var(--space-5);
}
.inn-h2 em { font-style: italic; color: #4A6F4F; }
html[lang="zh-Hant"] .inn-h2 em { color: #4A6F4F; font-style: normal; }
.inn-body {
  font-size: var(--text-body);
  line-height: 1.7;
  color: rgba(27, 26, 23, 0.75);
  max-width: 56ch;
}
.inn-body em { font-style: italic; color: #4A6F4F; font-weight: 500; }
html[lang="zh-Hant"] .inn-body em { font-style: normal; font-weight: 700; }
.inn-body p + p { margin-top: var(--space-3); }
.inn-body--lg { font-size: var(--text-body-lg); }

.inn-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 1023px) { .inn-grid-2 { grid-template-columns: 1fr; gap: var(--space-5); } }

.inn-quote {
  margin: var(--space-7) 0 0;
  padding: var(--space-6);
  background: #1B1A17;
  color: #F7F3EA;
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
  border-left: 4px solid #C7522A;
}
.inn-quote .zh {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-han);
  font-style: normal;
  font-size: var(--text-body-lg);
  color: rgba(247, 243, 234, 0.7);
}

/* 7-hour arc — vertical timeline-style list, not 6 cards */
.inn-arc {
  margin-top: var(--space-7);
  border-top: 1px solid rgba(27, 26, 23, 0.15);
}
.inn-arc__row {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(27, 26, 23, 0.10);
}
.inn-arc__time {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
  color: #C7522A;
  line-height: 1;
}
html[lang="zh-Hant"] .inn-arc__time { font-style: normal; }
.inn-arc__label-block { display: flex; flex-direction: column; gap: 4px; }
.inn-arc__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(27, 26, 23, 0.55);
}
.inn-arc__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  font-weight: 700;
  color: #1B1A17;
}
html[lang="zh-Hant"] .inn-arc__title { font-style: normal; }
.inn-arc__desc {
  font-size: var(--text-body);
  line-height: 1.65;
  color: rgba(27, 26, 23, 0.7);
  max-width: 60ch;
}
@media (max-width: 1023px) {
  .inn-arc__row { grid-template-columns: 80px 1fr; }
  .inn-arc__desc { grid-column: 1 / -1; margin-top: -8px; }
}

/* Venue */
.inn-venue__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #c9c2b3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-7);
}
.inn-venue__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fit (3 cards) */
.inn-fit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.inn-fit__cell {
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  background: #FBF7EE;
  border: 1px solid rgba(27, 26, 23, 0.10);
  border-radius: var(--radius-md);
  border-left: 3px solid #4A6F4F;
}
.inn-fit__cell--no { border-left-color: #C7522A; background: rgba(199, 82, 42, 0.06); }
.inn-fit__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: #C7522A;
  margin-bottom: var(--space-3);
}
.inn-fit__cell:not(.inn-fit__cell--no) .inn-fit__label { color: #4A6F4F; }
.inn-fit__body {
  font-size: var(--text-small);
  line-height: 1.7;
  color: rgba(27, 26, 23, 0.78);
}
.inn-fit__body em { color: #4A6F4F; font-style: italic; }
html[lang="zh-Hant"] .inn-fit__body em { font-style: normal; font-weight: 600; }
@media (max-width: 1023px) { .inn-fit__grid { grid-template-columns: 1fr; } }

/* Science (4 metrics) */
.inn-science__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.inn-science__cell {
  padding: var(--space-5);
  border: 1px solid rgba(247, 243, 234, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.inn-science__value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1;
  color: #E8A87C;
  margin-bottom: var(--space-3);
}
html[lang="zh-Hant"] .inn-science__value { font-style: normal; }
.inn-science__label {
  font-weight: 700;
  font-size: var(--text-h4);
  color: #F7F3EA;
  margin-bottom: 6px;
}
.inn-science__body {
  font-size: var(--text-small);
  line-height: 1.65;
  color: rgba(247, 243, 234, 0.65);
}
@media (max-width: 1023px) { .inn-science__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .inn-science__grid { grid-template-columns: 1fr; } }

/* Included list — clean two-column */
.inn-included__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  columns: 2;
  column-gap: var(--space-7);
}
.inn-included__list li {
  break-inside: avoid;
  padding: var(--space-3) 0;
  padding-left: 22px;
  position: relative;
  font-size: var(--text-body);
  color: rgba(27, 26, 23, 0.82);
  border-bottom: 1px solid rgba(27, 26, 23, 0.08);
  line-height: 1.5;
}
.inn-included__list li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--space-3) + 0.5em);
  width: 8px; height: 1px;
  background: #C7522A;
}
@media (max-width: 1023px) { .inn-included__list { columns: 1; } }

/* Investment block */
.inn-invest { background: #1B1A17; color: #F7F3EA; }
.inn-invest__price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin: var(--space-6) 0 var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(247, 243, 234, 0.15);
}
.inn-invest__price-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(247, 243, 234, 0.55);
  margin-bottom: var(--space-3);
}
.inn-invest__price {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  color: #F7F3EA;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}
html[lang="zh-Hant"] .inn-invest__price { font-style: normal; }
.inn-invest__price small {
  font-size: 0.32em;
  font-style: normal;
  color: #E8A87C;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.inn-invest__price-sub {
  margin-top: var(--space-2);
  color: rgba(247, 243, 234, 0.55);
  font-size: var(--text-small);
}
.inn-invest__notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.inn-invest__note-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(247, 243, 234, 0.55);
  margin-bottom: var(--space-2);
}
.inn-invest__note-body {
  font-size: var(--text-small);
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.75);
}
.inn-invest__founding {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed rgba(232, 168, 124, 0.4);
  border-radius: var(--radius-md);
}
.inn-invest__founding-label {
  font-family: var(--font-serif);
  font-style: italic;
  color: #E8A87C;
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}
html[lang="zh-Hant"] .inn-invest__founding-label { font-style: normal; }
.inn-invest__founding-body {
  font-size: var(--text-small);
  color: rgba(247, 243, 234, 0.75);
  line-height: 1.65;
}
@media (max-width: 1023px) {
  .inn-invest__price-row,
  .inn-invest__notes { grid-template-columns: 1fr; }
}

/* Host */
.inn-host__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}
.inn-host__tagline {
  font-size: var(--text-h4);
  color: rgba(27, 26, 23, 0.7);
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-style: italic;
}
html[lang="zh-Hant"] .inn-host__tagline { font-style: normal; }
@media (max-width: 1023px) { .inn-host__layout { grid-template-columns: 1fr; } }

/* Location card */
.inn-location__card {
  padding: var(--space-6) var(--space-7);
  background: #FBF7EE;
  border: 1px solid rgba(27, 26, 23, 0.10);
  border-left: 3px solid #C7522A;
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
  max-width: 720px;
}
.inn-location__address {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  line-height: 1.4;
  color: #1B1A17;
  margin-bottom: var(--space-3);
}
html[lang="zh-Hant"] .inn-location__address { font-style: normal; font-weight: 700; }
.inn-location__transport {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: rgba(27, 26, 23, 0.75);
}

/* Book / channels */
.inn-book { background: #F8F2E6; }
.inn-book__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.inn-book__channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(27, 26, 23, 0.12);
}
.inn-book__channel-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(27, 26, 23, 0.55);
  margin-bottom: var(--space-2);
}
.inn-book__channel-handle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  color: #1B1A17;
  margin-bottom: 4px;
}
html[lang="zh-Hant"] .inn-book__channel-handle { font-style: normal; }
.inn-book__channel-note {
  font-size: var(--text-small);
  color: rgba(27, 26, 23, 0.6);
}
@media (max-width: 1023px) { .inn-book__channels { grid-template-columns: 1fr; } }

.inn-disclaimer {
  text-align: center;
  padding: var(--space-7) 0;
  font-size: var(--text-small);
  color: rgba(27, 26, 23, 0.55);
  max-width: 64ch;
  margin: 0 auto;
}

/* ===========================================================
   CONTACT — cleaner editorial layout
   =========================================================== */

.contact-hero {
  padding: var(--space-10) 0 var(--space-8);
  text-align: center;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(131, 189, 236, 0.20) 0%, transparent 60%),
    radial-gradient(40% 50% at 80% 100%, rgba(247, 190, 182, 0.18) 0%, transparent 60%);
}
.contact-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-hover);
  margin-bottom: var(--space-4);
}
.contact-hero__title {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 auto var(--space-4);
  max-width: 16ch;
  font-weight: 700;
}
.contact-hero__sub {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 auto;
}
/* Chinese version is a single 35-char line that shouldn't wrap. Drop the
   max-width, use nowrap, and scale font down so it fits across viewports. */
html[lang="zh-Hant"] .contact-hero__sub {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(10px, 1.5vw, 18px);
  letter-spacing: -0.01em;
}

/* Home products title — single short headline that shouldn't wrap.
   "兩種重新回到自己的方式。" / "二つの方法" — scale font to fit one line. */
html[lang="zh-Hant"] [data-i18n="home.products.title"],
html[lang="ja"]      [data-i18n="home.products.title"] {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(20px, 4.4vw, 56px);
  letter-spacing: -0.01em;
}

/* Chill Plz! titles that should stay on a single line across all languages. */
[data-i18n="chillPlz.usecases.title"],
[data-i18n="chillPlz.types.title"],
[data-i18n="chillPlz.elements.title"] {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(20px, 4.2vw, 52px);
  letter-spacing: -0.01em;
}

/* Chill Plz! hero headline — also single line. Slightly smaller default
   font than the original so EN / ZH / JA all fit on a phone viewport. */
[data-i18n="chillPlz.hero.headline"] {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(20px, 4.5vw, 56px);
  letter-spacing: -0.02em;
}

/* "Technology connected devices. But humans still need reconnection." —
   two stacked lines with NO internal wrapping. The i18n strings contain a
   literal \n between sentences; `white-space: pre` honours it AND prevents
   any line from wrapping. The 24ch max-width on .plz-statement is dropped
   so the longer line can render at its natural width. */
[data-i18n="chillPlz.why.statement"] {
  white-space: pre;
  max-width: none;
  font-size: clamp(18px, 3.2vw, 40px);
  letter-spacing: -0.01em;
}

/* Chill Plz! promise body — long sentence kept on a single line.
   Section width allowed to expand to fit. */
[data-i18n="chillPlz.promise.body"] {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(11px, 1.7vw, 22px);
  letter-spacing: -0.01em;
}

.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  justify-items: stretch;
}
.contact-channel {
  display: block;
  padding: var(--space-6);
  text-align: center;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-decoration: none;
}
.contact-channel:hover {
  transform: translateY(-3px);
  border-color: rgba(131, 189, 236, 0.4);
  box-shadow: var(--shadow-card);
}
.contact-channel__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-3);
  font-weight: 700;
}
.contact-channel__email {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--accent-hover);
  /* Keep the whole email address on one line. Word-break was forcing CJK-style
     intra-word breaks on email addresses like "hello@chillcompany.com". */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
html[lang="zh-Hant"] .contact-channel__email { font-style: normal; }
.contact-channel__email:hover { color: var(--text-primary); }
@media (max-width: 1023px) { .contact-channels { grid-template-columns: 1fr; max-width: 480px; } }

.contact-form-wrap {
  max-width: 720px;
  margin: 0 auto;
}
.contact-form-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.contact-form-header__eyebrow {
  display: inline-block;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.contact-form-header__title {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.contact-form {
  padding: var(--space-7);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .contact-form-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .contact-form     { padding: var(--space-5); }
}
.contact-form-actions {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.contact-form-actions .btn { margin-left: auto; }
@media (max-width: 480px) {
  .contact-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-form-actions .btn { margin-left: 0; width: 100%; }
  .contact-form-note { text-align: center; }
}
.contact-form-note {
  font-size: var(--text-small);
  color: var(--text-soft);
  word-break: break-all;
}

/* ===========================================================
   MOBILE CLEANUP — final pass
   Consolidated reduction of section paddings, card grid breakpoints,
   hero alignment, and hero photo aspect ratio for small screens.
   =========================================================== */

@media (max-width: 1023px) {
  /* Generic sections shrink */
  .inn-section { padding: var(--space-8) 0; }
  .plz-narrative { padding: var(--space-8) 0; }
  .plz-hero { padding: var(--space-8) 0; }

  /* Inn hero photo — wider/shorter aspect for landscape phones */
  .inn-hero__photo { aspect-ratio: 16 / 10; max-height: 60vh; }
  .inn-hero__content { padding: var(--space-6) 0 var(--space-8); }

  /* Inn hero meta — stack instead of justify-between */
  .inn-hero__meta { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Inn host body padding sane */
  .inn-host__layout { gap: var(--space-5); }
}

@media (max-width: 640px) {
  /* Tighter section padding on small phones */
  .inn-section { padding: var(--space-7) 0; }
  .plz-narrative { padding: var(--space-7) 0; }
  .plz-hero { padding: var(--space-7) 0; }
  .contact-hero { padding: var(--space-8) 0 var(--space-6); }
  .plz-promise { padding: var(--space-8) 0; }
  .plz-closing { padding: var(--space-7) 0 var(--space-8); }
  .home-closing { padding: var(--space-8) 0; }
  .founder-teaser { padding-top: var(--space-7); padding-bottom: var(--space-7); }

  /* Chill Plz hero — CTA buttons stack to full width */
  .plz-hero__cta { display: flex; flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
  .plz-hero__cta .btn { width: 100%; }
  .plz-hero__cards { max-width: 360px; }

  /* Inn hero — CTA stack */
  .inn-hero__cta { flex-direction: column; align-items: stretch; }
  .inn-hero__cta .btn { width: 100%; }
  .inn-hero__title { font-size: clamp(40px, 11vw, 56px); }
  .inn-hero__kicker { gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); }
  .inn-hero__photo { aspect-ratio: 4 / 3; max-height: 50vh; }

  /* Inn book CTA */
  .inn-book__cta { flex-direction: column; align-items: stretch; }
  .inn-book__cta .btn { width: 100%; }

  /* Inn invest pricing — center align on small screens */
  .inn-invest__price-row { gap: var(--space-5); margin-bottom: var(--space-6); padding-bottom: var(--space-5); }
  .inn-invest__price { font-size: clamp(56px, 16vw, 88px); }
  .inn-invest__founding { padding: var(--space-4) var(--space-5); }

  /* Inn arc — tighter time column */
  .inn-arc__row { grid-template-columns: 64px 1fr; gap: var(--space-3); padding: var(--space-4) 0; }
  .inn-arc__time { font-size: var(--text-h4); }
  .inn-arc__desc { font-size: var(--text-small); }

  /* Inn location card padding */
  .inn-location__card { padding: var(--space-4) var(--space-5); }
  .inn-location__address { font-size: var(--text-body-lg); }

  /* Inn quote padding */
  .inn-quote { padding: var(--space-5); font-size: clamp(20px, 4vw, 24px); margin-top: var(--space-5); }

  /* Chill Plz cards on small phones: 3 then 2 — 5 cards in chill group becomes 3 wide */
  .plz-cards-row,
  .plz-elements__group--four .plz-cards-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .plz-card__name { font-size: var(--text-small); }
  .plz-card__phrase, .plz-card__verb { font-size: 12px; }
  .plz-elements__group { padding: var(--space-5) 0; }
  .plz-elements__group-label { font-size: var(--text-h4); }

  /* Plz types stack on phone */
  .plz-types__cell { padding: var(--space-5) var(--space-3); }

  /* Home product cards smaller padding & min height */
  .product-card { min-height: 320px; padding: var(--space-5); }
  .product-card__title { font-size: clamp(32px, 8vw, 40px); }

  /* Section header centering on mobile */
  .section-head__title { font-size: clamp(28px, 7vw, 36px); }

  /* Inn fit, science, included spacing */
  .inn-fit__cell { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); }
  .inn-fit__body { font-size: var(--text-body); }
  .inn-included__list li { font-size: var(--text-small); padding: var(--space-2) 0 var(--space-2) 22px; }

  /* Contact channels — single column with cleaner padding */
  .contact-channel { padding: var(--space-5); }
  .contact-channel__email { font-size: clamp(16px, 4.5vw, var(--text-h4)); }
  .contact-hero__title { font-size: clamp(36px, 9vw, 56px); }
}

@media (max-width: 420px) {
  /* Very small phones — single-card row */
  .plz-cards-row,
  .plz-elements__group--four .plz-cards-row { grid-template-columns: repeat(2, 1fr); }
  .container { padding-left: 20px; padding-right: 20px; }
  .inn-hero__title { font-size: clamp(36px, 13vw, 52px); }
  .inn-h2 { font-size: clamp(28px, 8vw, 40px); }
  .plz-hero__title { font-size: clamp(34px, 9vw, 48px); }
}

/* ============================================================
   MOBILE OVERFLOW GUARDS
   The user explicitly asked for many CJK headlines to stay on a
   single line (white-space: nowrap | pre). CJK glyphs are wide
   so each line is short — they fit a phone viewport at the
   chosen clamp() min. The corresponding English strings are
   longer and would overflow at < 480px even with min font-size,
   so we relax nowrap and let EN flow into multiple lines on
   small phones. CJK versions are scoped by html[lang] to keep
   their single-line behaviour intact.
   ============================================================ */
@media (max-width: 599px) {
  /* ===== EN: long English strings that had nowrap need to wrap =====
     Per-line: EN strings in titles below are 22–47 chars; even at min
     clamp size they overflow. Force normal wrap and shrink slightly. */
  html[lang="en"] [data-i18n="chillPlz.usecases.title"],
  html[lang="en"] [data-i18n="chillPlz.types.title"],
  html[lang="en"] [data-i18n="chillPlz.elements.title"],
  html[lang="en"] [data-i18n="chillPlz.hero.headline"],
  html[lang="en"] [data-i18n="stillApp.concept.title"] {
    white-space: normal !important;
    max-width: 22ch !important;
    margin-inline: auto;
    font-size: clamp(26px, 7.4vw, 44px) !important;
  }
  /* Promise body — long sentence on every language. Force wrap. */
  [data-i18n="chillPlz.promise.body"] {
    white-space: normal !important;
    max-width: 32ch !important;
    margin-inline: auto;
    font-size: clamp(15px, 4.2vw, 20px) !important;
  }

  /* ===== CJK: shrink the nowrap clamp so longer lines (16–18 chars)
     fit inside the 335px usable container width on phones =====
     Without this, ja "多様なエレメントが、無限の物語を生む。" (18 chars)
     at clamp min 20px = 360px → overflows 335 container. */
  html[lang="zh-Hant"] [data-i18n="chillPlz.hero.headline"],
  html[lang="ja"]      [data-i18n="chillPlz.hero.headline"],
  html[lang="zh-Hant"] [data-i18n="chillPlz.types.title"],
  html[lang="ja"]      [data-i18n="chillPlz.types.title"],
  html[lang="zh-Hant"] [data-i18n="chillPlz.elements.title"],
  html[lang="ja"]      [data-i18n="chillPlz.elements.title"],
  html[lang="zh-Hant"] [data-i18n="chillPlz.usecases.title"],
  html[lang="ja"]      [data-i18n="chillPlz.usecases.title"] {
    font-size: clamp(14px, 4.4vw, 28px) !important;
    letter-spacing: -0.01em !important;
  }

  /* Promise body CJK — already covered by the all-language rule above */

  /* Home products title — CJK "兩種重新回到自己的方式。" / "二つの戻り方。"
     min 20px × 12 chars = 240px ✓ fits 335. No change. */

  /* Home closing statement (JA) — "数十億人が、CHILL でいられるように。"
     18 chars at min 18px = 324px → cuts close to 335 container.
     Shrink min so it sits comfortably. */
  html[lang="ja"] .home-closing__statement {
    font-size: clamp(14px, 4.4vw, 40px);
  }

  /* STILL hero title (JA + zh-Hant) — short single lines, but
     "ストレスの上を、ふわりと。" (13 chars) at clamp(28px, 7vw, 72px)
     = 28px × 13 = 364px → overflows on 360px viewports. */
  html[lang="zh-Hant"] .still-hero__title,
  html[lang="ja"]      .still-hero__title {
    font-size: clamp(22px, 6.8vw, 56px);
  }

  /* STILL statement bodies (pre, ja + zh-Hant) — already use
     clamp(20px, 3.8vw, 52px). Per-line lengths up to 10 chars
     (ja "不是逃離世界。") fit easily. No change. */

  /* Closing lines on philosophy page — EN already handled in the
     dedicated block above (.philosophy-closing__lines). */
}

/* Even smaller — protect very narrow phones (320–380px) */
@media (max-width: 420px) {
  html[lang="ja"] [data-i18n="stillApp.hero.headline"] {
    font-size: clamp(16px, 4.4vw, 48px) !important;
  }
  html[lang="zh-Hant"] [data-i18n="stillApp.hero.headline"] {
    font-size: clamp(20px, 5.6vw, 60px) !important;
  }
  html[lang="ja"] [data-i18n="stillApp.concept.title"],
  html[lang="zh-Hant"] [data-i18n="stillApp.concept.title"] {
    font-size: clamp(16px, 4.4vw, 52px) !important;
  }
  /* Push the contact channels even tighter so the @hello email
     row never sticks out on 320px phones. */
  .contact-channel__email { font-size: clamp(14px, 4vw, 20px); }
}