/* Phase 3 pages. Shared values remain in tokens.css and main.css. */
.site-header__inner {
  min-height: 5.5rem;
  padding-block: .5rem;
}

.site-brand {
  flex: none;
  width: clamp(14rem, 23vw, 18rem);
  height: auto;
  overflow: visible;
}

.site-brand__logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  transform: none;
}

.site-footer__brand {
  display: block;
  width: min(100%, 18rem);
  height: 6.25rem;
  overflow: hidden;
  background: transparent;
}

.site-footer__brand img {
  width: 100%;
  height: auto;
  transform: translateY(-17%);
}

.site-footer__identity > p {
  margin-block: var(--space-4) 0;
}

.site-footer__company {
  color: var(--color-surface-blue);
  font-size: var(--font-size-sm);
}

.eyebrow {
  margin-block-end: var(--space-5);
  color: var(--color-gold);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.statement {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 1.12rem + 1.55vw, 2.75rem);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.035em;
}

.provisional-note {
  margin-block: 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.section-action {
  margin-block: var(--space-6) 0;
  text-align: right;
}

.hero {
  overflow: hidden;
  padding-block: var(--space-7) var(--section-space);
  background: linear-gradient(130deg, var(--color-canvas), var(--color-surface-sage));
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero__heading {
  max-width: 12em;
  margin-block-end: var(--space-5);
  color: var(--color-primary-hover);
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.4;
}

.hero__copy .lead {
  max-width: 38rem;
  color: var(--color-text-muted);
}

.hero__last {
  white-space: nowrap;
}

.hero__actions {
  margin-block-start: var(--space-6);
}

.hero-visual {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #dce9e6 4%, #b7d3d0 48%, #e9dec2 100%);
  isolation: isolate;
}

.hero-visual::before,
.hero-visual::after {
  position: absolute;
  right: -5%;
  left: -5%;
  height: 3rem;
  border-top: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  content: "";
  transform: rotate(-4deg);
}

.hero-visual::before {
  bottom: 24%;
}

.hero-visual::after {
  bottom: 18%;
}

.hero-visual__sun {
  position: absolute;
  top: 15%;
  right: 15%;
  width: 7.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f8f0d7;
  box-shadow: 0 0 5rem rgb(255 255 255 / 70%);
}

.hero-visual__hill {
  position: absolute;
  right: -10%;
  left: -10%;
  height: 52%;
  border-radius: 52% 48% 0 0;
}

.hero-visual__hill--back {
  bottom: -18%;
  background: #8cae9c;
  transform: rotate(-8deg);
}

.hero-visual__hill--front {
  bottom: -32%;
  background: #3b725d;
  transform: rotate(12deg);
}

.hero-visual__caption {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 88%);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.hero-visual__caption span {
  letter-spacing: 0;
}

.home-about__inner {
  display: grid;
  gap: var(--space-5);
}

.home-about__copy {
  max-width: 46rem;
}

.home-about__copy .text-link {
  margin-block-start: var(--space-5);
}

.dragon-map {
  max-width: 67rem;
  margin-inline: auto;
  text-align: center;
}

.dragon-map__center {
  position: relative;
  z-index: 1;
  max-width: 16rem;
  margin-inline: auto;
}

.dragon-map__center::after {
  position: absolute;
  top: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: var(--space-6);
  background: var(--color-gold-soft);
  content: "";
}

.dragon-map__branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.dragon-map__node {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  min-height: 8rem;
  align-content: center;
  padding: var(--space-3);
  border: var(--border-default);
  border-top: 3px solid var(--dragon-color, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-sm);
}

.dragon-map__node strong {
  font-family: var(--font-serif);
  font-size: var(--font-size-h3);
}

.dragon-map__symbol {
  color: var(--dragon-color, var(--color-primary));
  font-size: 1.5rem;
  line-height: 1;
}

.dragon-map__node--yellow,
.role-card--yellow { --dragon-color: var(--color-gold); }
.dragon-map__node--white,
.role-card--white { --dragon-color: #8ba8a5; }
.dragon-map__node--black,
.role-card--black { --dragon-color: #354b50; }
.dragon-map__node--red,
.role-card--red { --dragon-color: #a66b5c; }
.dragon-map__node--blue,
.role-card--blue { --dragon-color: #527f96; }

.home-goryu__closing {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-7);
  text-align: center;
}

.home-goryu__closing p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-lead);
}

.home-goryu__closing strong {
  color: var(--color-primary);
}

.business-card {
  display: grid;
  align-content: start;
  min-height: 15rem;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.business-card__number {
  display: inline-block;
  margin-block-end: var(--space-5);
  color: var(--color-gold);
  font-family: var(--font-serif);
  font-size: 2rem;
}

.business-card h3,
.business-card p {
  margin-block-end: var(--space-2);
}

.business-card p {
  color: var(--color-text-muted);
}

.activity-card__visual {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #dce9e6, #b6d0c1);
  color: var(--color-primary-hover);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.activity-card__visual--food { background: linear-gradient(145deg, #f1e9d5, #c5d2ae); }
.activity-card__visual--nature { background: linear-gradient(145deg, #dae5e6, #9ebeb4); }

.news-list {
  margin: 0;
  padding: 0;
  border-top: var(--border-default);
  list-style: none;
}

.news-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: var(--border-default);
}

.news-list__item time {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.company-preview {
  background: var(--color-surface-blue);
}

.company-facts {
  margin-block: var(--space-6);
}

.company-facts > div {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-default);
}

.company-facts dt {
  color: var(--color-text-muted);
}

.company-facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 700;
}

.contact-cta {
  padding-block: var(--section-space);
  background: var(--color-primary);
  color: var(--color-surface);
}

.contact-cta .eyebrow {
  color: var(--color-gold-soft);
}

.contact-cta h2 {
  max-width: 16em;
}

.contact-cta p:last-child {
  margin-block-end: 0;
}

.contact-cta__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.button--light {
  width: fit-content;
  background: var(--color-surface);
  color: var(--color-primary);
}

.button--light:hover {
  background: var(--color-surface-sage);
  color: var(--color-primary-hover);
}

.page-intro {
  padding-block: var(--space-8);
  border-bottom: var(--border-default);
  background: linear-gradient(110deg, var(--color-surface-sage), var(--color-canvas));
}

.page-intro h1 {
  margin-block-end: var(--space-4);
  color: var(--color-primary-hover);
}

.page-intro .lead {
  margin: 0;
}

.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.editorial-grid__index {
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.prose {
  max-width: var(--container-narrow);
}

.prose h2 {
  margin-block-end: var(--space-5);
}

.flow-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 5.5rem;
  padding: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.flow-list li:not(:last-child)::after {
  position: absolute;
  bottom: calc(-1 * var(--space-3) - 1px);
  left: 50%;
  width: 2px;
  height: var(--space-3);
  background: var(--color-gold);
  content: "";
}

.flow-list li span {
  flex: none;
  color: var(--color-gold);
  font-family: var(--font-serif);
  font-weight: 700;
}

.flow-list li strong {
  font-size: var(--font-size-lead);
}

.flow-list__note {
  margin-block: var(--space-5) 0;
  color: var(--color-text-muted);
  text-align: center;
}

.next-link {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.next-link h2 {
  margin-block-end: var(--space-3);
}

.role-grid {
  margin-block-start: var(--space-7);
}

.role-card {
  padding: var(--space-5);
  border-top: 3px solid var(--dragon-color);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.role-card h3 {
  margin-block-end: var(--space-2);
}

.role-card__role {
  color: var(--color-primary);
  font-weight: 700;
}

.role-card p:last-child {
  margin-block-end: 0;
}

.step-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
}

.step-list li:not(:last-child)::after {
  margin-inline-start: var(--space-4);
  content: "→";
}

.sixth-dragon {
  text-align: center;
}

.sixth-dragon h2 {
  color: var(--color-primary);
}

.business-detail-list {
  border-top: var(--border-default);
}

.business-detail {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-bottom: var(--border-default);
}

.business-detail__index {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--color-gold);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.business-detail__index span:first-child {
  font-family: var(--font-serif);
  font-size: 2.5rem;
}

.business-detail__copy {
  color: var(--color-primary);
  font-size: var(--font-size-lead);
  font-weight: 700;
}

.signature {
  text-align: right;
}

.plain-list {
  padding-inline-start: 1.3em;
}

.access-placeholder {
  display: grid;
  min-height: 17rem;
  place-items: center;
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: linear-gradient(130deg, var(--color-surface-blue), var(--color-surface-sage));
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}

.access-placeholder small {
  font-weight: 400;
  letter-spacing: 0;
}

.privacy-draft {
  padding-block: var(--section-space);
}

.privacy-draft section {
  padding-block: var(--space-5);
  border-bottom: var(--border-default);
}

.not-found {
  min-height: 60vh;
  padding-block: var(--space-9);
}

@media (min-width: 48rem) {
  .hero-visual {
    min-height: 26rem;
  }

  .home-about__inner,
  .company-preview__inner,
  .news-layout,
  .editorial-grid,
  .business-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .dragon-map__branches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: relative;
  }

  .dragon-map__branches::before {
    position: absolute;
    top: calc(-1 * var(--space-6));
    right: 12.5%;
    left: 12.5%;
    height: 2px;
    background: var(--color-gold-soft);
    content: "";
  }

  .dragon-map__branches .dragon-map__node::before {
    position: absolute;
    top: calc(-1 * var(--space-6));
    left: 50%;
    width: 2px;
    height: var(--space-6);
    background: var(--color-gold-soft);
    content: "";
  }

  .dragon-map__branches .dragon-map__node {
    position: relative;
  }

  .contact-cta__inner,
  .next-link {
    grid-template-columns: minmax(0, 2fr) auto;
  }

  .flow-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .flow-list li {
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .flow-list li:not(:last-child)::after {
    top: 50%;
    right: calc(-1 * var(--space-3));
    bottom: auto;
    left: auto;
    width: var(--space-3);
    height: 2px;
  }
}

@media (min-width: 70rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    min-height: 36rem;
  }

  .hero-visual {
    min-height: 34rem;
  }
}

@media (max-width: 47.99rem) {
  .site-brand {
    width: min(14rem, calc(100vw - 9rem));
    height: auto;
  }

  .news-list__item {
    grid-template-columns: 1fr;
    gap: var(--space-1) var(--space-4);
  }

  .news-list__item time {
    grid-column: 1;
  }

  .company-facts > div {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

@media (max-width: 23rem) {
  .site-brand {
    width: calc(100vw - 6.5rem);
  }

  .site-nav__toggle > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-nav__toggle {
    width: 3rem;
    padding-inline: var(--space-2);
  }
}