/* Typography: Japanese reading text first, restrained supporting labels. */
:root {
  --serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --body-font: var(--serif);
  --sans: "Newsreader", Georgia, "Times New Roman", serif;
}
body {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0;
  line-break: strict;
  overflow-wrap: anywhere;
}
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
  line-break: strict;
  word-break: normal;
  text-wrap: pretty;
}
.hero__copy, .intro__title, .space__copy, .mirror__copy, .closing__panel {
  min-width: 0;
  container-type: inline-size;
}
.hero h1 {
  margin-top: 1.75rem;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-size: clamp(1.75rem, 8.5cqi, 3rem);
  line-height: 1.6;
  letter-spacing: 0;
}
.intro h2, .moments h2, .space h2, .experience h2, .mirror h2, .closing h2 {
  margin-top: 1.5rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.7;
  letter-spacing: 0;
}
.intro h2, .space h2, .mirror h2, .closing h2 {
  font-size: clamp(1.5rem, 8cqi, 2.25rem);
}
.intro h2 em, .moments h2 em, .space h2 em,
.experience h2 em, .mirror h2 em, .closing h2 em {
  color: inherit;
}
.hero__copy > p:not(.eyebrow), .intro__body > p,
.space__copy > p:not(.section-tag), .mirror__copy > p:not(.section-tag),
.closing__panel > p:not(.section-tag), .moment-grid article > p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0;
  max-width: 34em;
  text-align: left;
  text-wrap: pretty;
}
.intro__body > p + p { margin-top: 1.25rem; }
.hero__copy > p:not(.eyebrow) { margin-top: 1.5rem; }
.eyebrow, .section-tag, .moment-grid small, .experience small {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02em;
}
.eyebrow, .section-tag, .moment-grid small { color: var(--ink-soft); }
.section-tag { display: flex; align-items: center; gap: .625rem; }
.section-tag span { flex-shrink: 0; margin-right: 0; line-height: 1; }
.moments > header .section-tag { justify-content: center; }
.header nav a, .header__cta {
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}
.header nav { gap: 1.5rem; }
.logo { flex-shrink: 0; line-height: 1.2; }
.logo > span { flex-shrink: 0; }
.logo b { font-size: 1.125rem; letter-spacing: .02em; }
.logo small { font-size: .5625rem; letter-spacing: .02em; }
.pill-button {
  font-family: var(--body-font);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  gap: .75rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.pill-button b, .header__cta b { flex-shrink: 0; }
.hero__copy aside {
  flex-wrap: wrap;
  gap: .625rem .875rem;
  font-size: .875rem;
  line-height: 1.6;
}
.hero__copy aside b { font-size: .75rem; letter-spacing: .02em; }
.intro__quote span { font-size: .875rem; }
.intro__quote b { font-family: var(--serif); font-size: 1.125rem; font-weight: 500; }
.moment-grid h3 { font-size: 1.125rem; line-height: 1.7; font-weight: 600; margin-top: .75rem; }
.moment-grid article > p { max-width: 19em; margin-top: .875rem; padding-inline: .5rem; }
.experience li { gap: 1rem; }
.experience li p { font-size: 1rem; line-height: 1.75; text-wrap: pretty; }
.experience small { letter-spacing: .02em; }
.space__keywords span { font-size: .75rem; line-height: 1.5; letter-spacing: .02em; }
.hero__main figcaption, .intro figcaption, .space__gallery figcaption,
.mirror figcaption, footer > p {
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .02em;
}
.hero__badge p { font-size: .625rem; letter-spacing: .02em; line-height: 1.35; }
.hero__badge span { font-size: 1.5rem; line-height: 1.1; }
.intro figure, .mirror figure { display: flex; flex-direction: column; }
.intro figure img, .mirror figure img { flex: 1; min-height: 0; height: 0; }
.intro figcaption, .mirror figcaption { flex-shrink: 0; padding-bottom: .25rem; }
.space__gallery figure { display: flex; flex-direction: column; }
.space__gallery img { flex: 1; min-height: 0; height: 0; }
.space__gallery figcaption { flex-shrink: 0; }
footer { gap: 1.5rem; }
/* Give Japanese headings and paragraphs enough measure at intermediate widths. */
@media (min-width: 801px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8%; row-gap: 2rem; }
  .intro__title { grid-column: 1; grid-row: 1; align-self: end; }
  .intro__body { grid-column: 1; grid-row: 2; align-self: start; }
  .intro figure { grid-column: 2; grid-row: 1 / span 2; }
  .space { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); }
  .mirror { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .experience ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .hero h1 { font-size: clamp(1.5rem, 8.5cqi, 2.5rem); line-height: 1.65; }
  .hero__copy { padding-bottom: 280px; }
  .intro h2, .space h2, .mirror h2, .closing h2 {
    font-size: clamp(1.5rem, 8cqi, 2rem);
  }
  .moments h2, .experience h2 { font-size: clamp(1.5rem, 6.8vw, 2rem); }
  .intro__body { margin-top: 1.75rem; }
  .header { width: calc(100% - 20px); }
  .header__cta { gap: .5rem; padding-left: .75rem; }
  .logo > div { margin-left: .5rem; }
  footer > p { text-align: center; }
  .hero__main figcaption { max-width: calc(100% - 176px); }
}
@media (max-width: 360px) {
  .header__cta { font-size: .75rem; gap: .25rem; padding-left: .5rem; }
  .logo b { font-size: 1rem; }
  .logo small { font-size: .5rem; }
  .experience li { padding-inline: .625rem; }
}
/* Keep the introductory phrase quiet and give the main message emphasis. */
h1 .heading-lead,
h2 .heading-lead {
  font-size: .72em;
  font-weight: 500;
  line-height: 1.6;
}
.hero h1 em,
.intro h2 em,
.moments h2 em,
.space h2 em,
.experience h2 em,
.mirror h2 em,
.closing h2 em {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.65;
}
/* Reserve a separate caption row below the rounded MIRROR FIT frame. */
.mirror figure {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
}
.mirror figure::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  border: 1.5px solid rgba(117, 128, 104, .8);
  border-radius: 250px 35px 35px 250px;
  pointer-events: none;
}
.mirror figure img {
  grid-column: 1;
  grid-row: 1;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  min-height: 0;
  margin: 6px;
  border-radius: 244px 29px 29px 244px;
}
.mirror figcaption {
  grid-column: 1;
  grid-row: 2;
  padding: 0 6px;
  margin: 0;
  text-align: right;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .mirror figure::before { border-radius: 180px 25px 25px 180px; }
  .mirror figure img { border-radius: 174px 19px 19px 174px; }
}
/* Compact the promises section without shrinking the reading text. */
.experience {
  padding: 80px 7%;
}
.experience > header {
  display: block;
}
.experience h2 {
  margin-top: 16px;
}
.experience ol {
  margin-top: 32px;
  gap: 12px;
}
.experience li {
  min-height: 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 24px 14px 22px;
  border-radius: 44px 44px 22px 22px;
}
.experience li b {
  font-size: 1.75rem;
  line-height: 1.1;
}
.experience li p {
  line-height: 1.6;
}
.experience li small {
  margin-top: auto;
  line-height: 1.4;
}
@media (max-width: 800px) {
  .experience { padding: 56px 20px; }
  .experience ol { grid-template-columns: 1fr; margin-top: 24px; gap: 0; }
  .experience li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    padding: 18px 0;
    border: 0;
    border-bottom: 1.5px solid rgba(255, 255, 255, .4);
    border-radius: 0;
    text-align: left;
  }
  .experience li:last-child { grid-column: auto; }
  .experience li b { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: 1.5rem; }
  .experience li p { grid-column: 2; grid-row: 1; }
  .experience li small { grid-column: 2; grid-row: 2; margin-top: 0; }
}
/* Pin each section at the viewport top while the following section covers it. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
  main { position: relative; isolation: isolate; }
  main > section[class] {
    position: sticky;
    top: var(--section-sticky-top, 0px);
    z-index: var(--section-layer, 1);
    box-shadow: 0 -18px 40px rgba(48, 49, 45, .1);
  }
  footer { position: relative; z-index: 10; }
}
@media (prefers-reduced-motion: reduce) {
  main > section[class] { scroll-behavior: auto; transition: none; }
}
/* Supplied service logo: preserve the complete square artwork and its proportions. */
.logo .logo__image {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
footer .logo .logo__image {
  width: 112px;
  height: 112px;
}
@media (max-width: 800px) {
  .header .logo .logo__image { width: 48px; height: 48px; }
}
/* Gentle entrance on first view; section positioning remains independent. */
[data-reveal] {
  opacity: 0;
  transform: none;
  translate: 0 16px;
  transition: opacity .8s ease-out, translate .8s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    translate: none;
    transition: opacity .6s ease-out;
    transition-delay: 0ms;
  }
  [data-reveal].is-visible { translate: none; }
}
/* Separate gallery captions from curved photo frames and overlapping photos. */
.space__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 24px;
  align-items: start;
  min-height: 0;
}
.space__gallery figure {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.space__gallery .space__wide { grid-column: 1 / -1; }
.space__gallery img {
  flex: none;
  display: block;
  width: 100%;
  height: auto;
  border: 6px solid var(--white);
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(63, 52, 59, .07);
}
.space__wide img { aspect-ratio: 4 / 3; border-radius: 120px 24px 120px 24px; }
.space__small img { aspect-ratio: 3 / 4; border-radius: 100px 100px 24px 24px; }
.space__round img { aspect-ratio: 3 / 4; border-radius: 50%; }
.space__gallery figcaption {
  position: static;
  flex-shrink: 0;
  margin: 14px 0 0;
  padding: 0 6px;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 800px) {
  .space__gallery { min-height: 0; gap: 24px 16px; }
  .space__wide img { border-radius: 88px 20px 88px 20px; }
}
/* Keep all three section links visible on phones beneath the logo row. */
@media (max-width: 800px) {
  .header {
    height: auto;
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    padding: 6px 12px 4px;
    border-radius: 26px;
  }
  .header > .logo { grid-column: 1; grid-row: 1; }
  .header__cta { grid-column: 2; grid-row: 1; }
  .header nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-evenly;
    gap: 8px;
    width: 100%;
  }
  .header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: .875rem;
    line-height: 1.4;
    white-space: nowrap;
  }
  .header nav a:focus-visible {
    outline: 2px solid var(--mauve);
    outline-offset: -2px;
    border-radius: 8px;
  }
  .hero__copy { padding-top: 144px; }
  #about, #moments, #space { scroll-margin-top: 124px; }
}
/* Readable branding and an uncluttered mobile hero. */
.header .logo__wordmark { margin-left: 8px; }
.header .logo__wordmark b { font-size: 1rem; white-space: nowrap; }
.header .logo__wordmark small { font-size: .75rem; color: var(--ink-soft); }
@media (max-width: 800px) {
  .hero__badge { display: none; }
  .header .logo .logo__image { width: 40px; height: 40px; }
  .header .logo__wordmark b { font-size: .875rem; }
  .header .logo__wordmark small { font-size: .6875rem; }
  .closing__actions .pill-button { padding-left: 16px; gap: 8px; }
}