:root {
  color-scheme: light;
  --paper: #f5f3ed;
  --olive: #444c3e;
  --muted: #62695e;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--olive); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; -webkit-font-smoothing: antialiased; }
p, h1 { margin: 0; }
.hero {
  position: relative;
  min-height: 96vh;
  min-height: 96svh;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.5vw, 40px);
}
.hero__visual { position: relative; flex: none; height: calc(96vh - clamp(32px, 5vw, 80px) - 128px); height: calc(96svh - clamp(32px, 5vw, 80px) - 128px); min-height: 240px; }
.hero-frame { width: 100%; margin-inline: auto; }
.hero__image { display: block; width: 100%; height: 100%; max-height: 78svh; object-fit: contain; }
.hero__content { padding: 24px 20px 8px; text-align: center; }
/* Keep a semantic heading without doubling the lettering in the artwork. */
.hero[data-artwork="embedded"] .hero__identity {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.hero__brand { font-family: Georgia, var(--serif); font-size: clamp(32px, 4vw, 56px); letter-spacing: .08em; font-weight: 400; }
h1 { margin-top: 20px; font-family: var(--serif); font-size: clamp(42px, 3.5vw, 56px); font-weight: 400; line-height: 1.65; letter-spacing: .06em; }
.hero__description { color: var(--muted); font-size: 16px; line-height: 2; letter-spacing: .12em; }
.hero[data-artwork="separate"] .hero__description { margin-top: 24px; }
.mobile-break { display: none; }
@media (max-width: 767px) {
  .hero { min-height: 80vh; min-height: 80svh; padding: 16px 16px 28px; }
  /* Dedicated composition: preserve the whole photograph at every mobile width.
     No magnification, artificial crop mask or added CSS rainbow. */
  .hero__visual { flex: none; height: auto; min-height: 0; overflow: hidden; }
  .hero__image {
    width: 100%; height: auto; max-height: none; margin: 0;
    aspect-ratio: 4 / 3; object-fit: contain;
  }
  .hero__content {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-start;
    padding: 36px 4px 4px;
  }
  .hero[data-artwork="embedded"] .hero__identity {
    position: static; width: auto; height: auto; margin: 0; overflow: visible;
    clip-path: none; white-space: normal;
  }
  .hero__brand { font-size: 30px; letter-spacing: .08em; }
  h1 { margin-top: 24px; font-size: clamp(28px, 7vw, 34px); line-height: 1.65; letter-spacing: .025em; }
  .mobile-break { display: inline; }
  .hero__description { margin-top: 26px; font-size: 14px; line-height: 2.1; letter-spacing: .06em; }
}
/* The revised master includes the supporting copy. Keep its HTML accessible
   without duplicating it visually; preserve the existing desktop geometry. */
@media (min-width: 768px) {
  .hero[data-artwork="embedded"] .hero__description { clip-path: inset(50%); }
}
/* ABOUT only. The approved HERO styles above remain fixed. */
.about {
  padding: 54px 24px 104px;
  background: var(--paper);
  color: var(--olive);
}
.about__inner { width: 100%; max-width: 640px; margin-inline: auto; }
.about__label { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.about__title {
  margin: 0; font-family: var(--serif); font-size: clamp(22px, 5.8vw, 28px);
  font-weight: 400; line-height: 1.85; letter-spacing: .025em;
  line-break: strict; overflow-wrap: anywhere;
}
.about__body {
  margin-top: 44px; color: #485142; font-size: 15px;
  line-height: 2.25; letter-spacing: .025em; line-break: strict;
  overflow-wrap: anywhere;
}
.about__body p { margin: 0; }
.about__body p + p { margin-top: 40px; }
@media (min-width: 768px) {
  .about { padding: 128px 48px 160px; }
  .about__label { margin-bottom: 36px; font-size: 12px; }
  .about__title { font-size: 38px; line-height: 1.8; }
  .about__body { margin-top: 56px; font-size: 17px; line-height: 2.3; }
  .about__body p + p { margin-top: 48px; }
}

/* OUR WAY is isolated from the approved HERO and ABOUT. */
.our-way { padding: 72px 24px 104px; background: #f6f3ed; color: #485142; }
.our-way__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 640px; margin-inline: auto; }
.our-way__photo {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; align-self: start;
  object-fit: cover; object-position: center;
  background: #eee9e1;
}
.our-way__content { min-width: 0; text-align: left; }
.our-way__label { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.our-way__title {
  margin: 0; font-family: var(--serif); font-size: clamp(24px, 6.4vw, 28px);
  font-weight: 400; line-height: 1.85; letter-spacing: .025em;
}
.our-way__subtitle {
  margin: 24px 0 0; font-family: var(--serif); font-size: 16px;
  font-weight: 400; line-height: 2; letter-spacing: .025em;
}
.our-way__body { margin-top: 40px; font-size: 15px; line-height: 2.25; letter-spacing: .025em; }
.our-way__title, .our-way__subtitle, .our-way__body { line-break: strict; overflow-wrap: anywhere; }
.our-way__body p { margin: 0; }
.our-way__quiet-emphasis { font-weight: 550; }
.our-way__body p + p { margin-top: 40px; }
@media (min-width: 1024px) {
  .our-way { padding: 128px 48px 144px; }
  .our-way__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); max-width: 1200px; gap: clamp(64px, 6vw, 96px); }
  .our-way__photo { aspect-ratio: 3 / 2; }
  .our-way__label { margin-bottom: 36px; font-size: 12px; }
  .our-way__title { font-size: clamp(30px, 2.7vw, 38px); }
  .our-way__subtitle { margin-top: 28px; font-size: 19px; }
  .our-way__body { margin-top: 48px; font-size: 17px; line-height: 2.3; }
  .our-way__body p + p { margin-top: 48px; }
}
/* PROJECTS INTRO: a quiet text-only bridge, scoped to this section. */
.projects-intro {
  padding: 72px 24px 112px;
  background: #f6f3ed; color: #485142;
}
.projects-intro__inner { width: 100%; max-width: 680px; margin-inline: auto; text-align: left; }
.projects-intro__label { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.projects-intro__title {
  margin: 0; font-family: var(--serif); font-size: clamp(24px, 6.4vw, 28px);
  font-weight: 400; line-height: 1.85; letter-spacing: .025em;
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
.projects-intro__body {
  margin-top: 44px; font-size: 15px; line-height: 2.25; letter-spacing: .025em;
  line-break: strict; overflow-wrap: anywhere;
}
.projects-intro__body p { margin: 0; }
.projects-intro__body p + p { margin-top: 44px; }
@media (min-width: 768px) {
  .projects-intro { padding: 112px 48px 160px; }
  .projects-intro__label { margin-bottom: 36px; font-size: 12px; }
  .projects-intro__title { font-size: clamp(30px, 3vw, 38px); line-height: 1.8; }
  .projects-intro__body { margin-top: 56px; font-size: 17px; line-height: 2.3; }
  .projects-intro__body p + p { margin-top: 52px; }
}
/* PROJECTS paragraph rhythm: pairs at about 60%, groups at about 80%. */
.projects-intro__body p:nth-child(2),
.projects-intro__body p:nth-child(4),
.projects-intro__body p:nth-child(7) { margin-top: 17px; }
.projects-intro__body p:nth-child(3) { margin-top: 35px; }
.projects-intro__body p:nth-child(5),
.projects-intro__body p:nth-child(6),
.projects-intro__body p:nth-child(8) { margin-top: 42px; }
@media (min-width: 768px) {
  .projects-intro__body p:nth-child(2),
  .projects-intro__body p:nth-child(4),
  .projects-intro__body p:nth-child(7) { margin-top: 22px; }
  .projects-intro__body p:nth-child(3) { margin-top: 42px; }
  .projects-intro__body p:nth-child(5),
  .projects-intro__body p:nth-child(6),
  .projects-intro__body p:nth-child(8) { margin-top: 51px; }
}
/* Individual projects: text-first, with no changes to earlier chapters. */
.brand-symbol {
  padding: 56px 24px;
  background: var(--paper);
  text-align: center;
}
.brand-symbol img {
  display: block;
  width: 56px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  opacity: .95;
}
@media (min-width: 768px) {
  .brand-symbol { padding-block: 72px; }
}

.project-story { padding: 80px 24px 104px; color: #485142; background: var(--paper); }
.project-story--after { background: #f6f3ed; }
.project-story__inner { max-width: 680px; margin-inline: auto; text-align: left; }
.project-story__label { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.project-story__title {
  margin: 0; font-family: var(--serif); font-size: clamp(24px, 6.4vw, 28px);
  font-weight: 400; line-height: 1.85; letter-spacing: .025em;
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
.project-story__body { margin-top: 44px; font-size: 15px; line-height: 2.25; letter-spacing: .025em; line-break: strict; overflow-wrap: anywhere; }
.project-story__body p { margin: 0; }
.project-story__body p + p { margin-top: 36px; }
.project-story__signature { margin: 44px 0 0; font-family: Georgia, var(--serif); font-size: 18px; line-height: 1.8; letter-spacing: .08em; }
.project-story__link {
  display: inline-block; max-width: 100%; margin-top: 28px; padding: 14px 22px;
  border: 1px solid #a5aa9d; border-radius: 0; background: transparent;
  color: #485142; font-family: inherit; font-size: 14px; line-height: 1.7;
  letter-spacing: .04em; text-decoration: none; text-align: center;
}
.project-story__link:disabled, .project-story__link[aria-disabled="true"] { opacity: .65; cursor: default; }
.project-story__link:focus-visible { outline: 2px solid #485142; outline-offset: 5px; }
@media (min-width: 768px) {
  .project-story { padding: 120px 48px 144px; }
  .project-story__label { margin-bottom: 36px; font-size: 12px; }
  .project-story__title { font-size: clamp(30px, 3vw, 38px); line-height: 1.8; }
  .project-story__body { margin-top: 56px; font-size: 17px; line-height: 2.3; }
  .project-story__body p + p { margin-top: 44px; }
  .project-story__signature { margin-top: 56px; font-size: 20px; }
  .project-story__link { margin-top: 32px; padding-inline: 28px; font-size: 15px; }
}
/* Preserve the resting tone; only border and text respond to interaction. */
.project-story__link { transition: border-color .25s ease, color .25s ease; }
@media (hover: hover) {
  .project-story__link[href]:hover { border-color: #939b89; color: #3b4536; }
}
.project-story__link[href]:active { border-color: #939b89; color: #3b4536; }
@media (prefers-reduced-motion: reduce) {
  .project-story__link { transition: none; }
}
/* Matching brand destinations; surrounding chapter spacing stays unchanged. */
.project-story__link.brand-card {
  display: inline-grid; grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center; gap: 14px; width: min(100%, 320px); min-height: 76px;
  padding: 17px 22px; border-width: 1px; border-radius: 2px;
  font-size: 14px; line-height: 1.5; letter-spacing: .08em; vertical-align: top;
}
.brand-card__mark { display: block; width: 24px; height: 24px; object-fit: contain; }
.brand-card__mark[hidden] { display: none; }
.brand-card__name { font-weight: 400; }
.project-story__link.brand-card--henna { color: #5f6648; border-color: #a6ab97; transition: background-color .2s ease, border-color .2s ease; }
.brand-card__arrow { justify-self: end; transition: transform .2s ease; }
.project-story__link.brand-card--after { grid-template-columns: 30px minmax(0, 1fr); border-color: #d2d5d8; color: #214b9a; }
.brand-card__mark-slot { display: flex; align-items: center; min-height: 30px; }
.brand-card__copy { display: grid; gap: 4px; padding-left: 16px; border-left: 1px solid #d2d5d8; text-align: left; }
.brand-card__status { color: #aeb7c4; font-size: 10px; letter-spacing: .16em; }
@media (min-width: 768px) {
  .project-story__link.brand-card { width: min(100%, 360px); min-height: 84px; padding: 19px 28px; gap: 20px; font-size: 16px; }
  .brand-card__mark { width: 30px; height: 30px; }
  .brand-card__status { font-size: 11px; }
}
@media (hover: hover) {
  .project-story__link.brand-card--henna:hover { background: #f1f3ea; border-color: #939b89; }
  .brand-card--henna:hover .brand-card__arrow { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .project-story__link.brand-card, .brand-card__arrow { transition: none; }
  .brand-card--henna:hover .brand-card__arrow { transform: none; }
}
/* Optical baseline adjustment for the AFTER SUISO numeral only. */
#after-suiso .project-story__signature .project-story__digit { position: relative; top: -.1em; }

/* Desktop only: lift the numeral a further .06em from its existing -.1em. */
@media (min-width: 768px) {
  #after-suiso .project-story__signature .project-story__digit { top: -.16em; }
}
/* PHILOSOPHY: words and breathing room only; earlier chapters stay fixed. */
.philosophy { padding: 88px 24px 120px; background: var(--paper); color: #485142; }
.philosophy__inner { width: 100%; max-width: 640px; margin-inline: auto; text-align: left; }
.philosophy__label { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.philosophy__title {
  margin: 0; font-family: var(--serif); font-size: clamp(26px, 7vw, 30px);
  font-weight: 400; line-height: 1.85; letter-spacing: .025em;
  line-break: strict; overflow-wrap: anywhere;
}
.philosophy__body {
  margin-top: 44px; font-size: 15px; line-height: 2.25; letter-spacing: .025em;
  line-break: strict; overflow-wrap: anywhere;
}
.philosophy__body p { margin: 0; }
.philosophy__body p + p { margin-top: 28px; }
.philosophy__closing { margin-top: 44px; }
.philosophy__closing p + p { margin-top: 32px; }
@media (min-width: 768px) {
  .philosophy { padding: 128px 48px 160px; }
  .philosophy__label { margin-bottom: 36px; font-size: 12px; }
  .philosophy__title { font-size: clamp(34px, 3.4vw, 42px); line-height: 1.8; }
  .philosophy__body { margin-top: 56px; font-size: 17px; line-height: 2.3; }
  .philosophy__body p + p { margin-top: 36px; }
  .philosophy__closing { margin-top: 56px; }
  .philosophy__closing p + p { margin-top: 40px; }
}
/* FUTURE: a slightly brighter continuation, isolated from existing sections. */
.future { padding: 80px 24px 120px; background: #faf9f5; color: #485142; }
.future__inner { width: 100%; max-width: 640px; margin-inline: auto; text-align: left; }
.future__label { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.future__title {
  margin: 0; font-family: var(--serif); font-size: clamp(26px, 7vw, 30px);
  font-weight: 400; line-height: 1.85; letter-spacing: .025em;
  line-break: strict; overflow-wrap: anywhere;
}
.future__body {
  margin-top: 44px; font-size: 15px; line-height: 2.25; letter-spacing: .025em;
  line-break: strict; overflow-wrap: anywhere;
}
.future__body p { margin: 0; }
.future__body p + p { margin-top: 30px; }
.future__closing { margin-top: 44px; }
.future__closing p + p { margin-top: 34px; }
@media (min-width: 768px) {
  .future { padding: 120px 48px 160px; }
  .future__label { margin-bottom: 36px; font-size: 12px; }
  .future__title { font-size: clamp(34px, 3.4vw, 42px); line-height: 1.8; }
  .future__body { margin-top: 56px; font-size: 17px; line-height: 2.3; }
  .future__body p + p { margin-top: 38px; }
  .future__closing { margin-top: 56px; }
  .future__closing p + p { margin-top: 42px; }
}
/* COMPANY: compact profile and semantic rows, scoped to this chapter. */
.company { position: relative; overflow: clip; padding: 64px 24px 88px; background: #faf9f5; color: #485142; }
.company::after {
  content: ""; position: absolute; right: -20px; bottom: -16px;
  width: min(260px, 100%); aspect-ratio: 3 / 2;
  background: url("../assets/images/earth-company-globe-faint-02.png") right bottom / contain no-repeat;
  opacity: .65; pointer-events: none;
  /* Fade only the cropped lower edge into the paper. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent calc(100% - 20px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent calc(100% - 20px));
}
.company__inner { position: relative; z-index: 1; width: 100%; max-width: 1000px; margin-inline: auto; text-align: left; }
.company__header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.company__heading { min-width: 0; }
.company__label { margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.company__title { margin: 0; font-family: Georgia, var(--serif); font-size: 36px; font-weight: 400; line-height: 1.3; letter-spacing: .025em; }
.company__message { margin-top: 18px; font-family: var(--serif); font-size: 14px; line-height: 1.9; letter-spacing: .025em; line-break: strict; word-break: keep-all; overflow-wrap: anywhere; }
.company__profile { display: flex; align-items: center; gap: 16px; min-width: 0; }
.company__portrait { display: block; flex: 0 0 88px; width: 88px; max-width: 100%; height: auto; object-fit: contain; }
.company__signature {
  min-width: 0; color: #8d9daa;
  font-family: "Segoe Script", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  font-size: clamp(17px, 4.6vw, 21px); font-weight: 400; line-height: 1.45; letter-spacing: -.04em;
  transform: rotate(-7deg); transform-origin: left center;
}
.company__signature span { display: block; white-space: nowrap; }
.company__details { margin: 30px 0 0; }
.company__row { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding-block: 11px; }
.company__row dt { margin: 0; color: #62695e; font-size: 12px; font-weight: 400; line-height: 1.9; }
.company__row dd { min-width: 0; margin: 0; padding-left: 14px; border-left: 1px solid #d9deda; font-size: 14px; line-height: 1.9; line-break: strict; overflow-wrap: anywhere; }
.company__email { color: inherit; text-decoration-line: underline; text-decoration-color: #b7bbaf; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.company__email:focus-visible { outline: 2px solid #485142; outline-offset: 4px; }
/* Only the gap into Contact changes; its content and internal spacing stay intact. */
.company + .contact { padding-top: 24px; }
@media (min-width: 768px) {
  .company { padding: 80px 48px 96px; }
  .company::after {
    width: 520px; right: -36px; bottom: -24px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent calc(100% - 28px));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent calc(100% - 28px));
  }
  .company__header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
  .company__label { margin-bottom: 18px; font-size: 12px; }
  .company__title { font-size: clamp(42px, 3.5vw, 50px); }
  .company__message { margin-top: 22px; font-size: 16px; }
  .company__profile { gap: 18px; }
  .company__portrait { flex-basis: 128px; width: 128px; }
  .company__signature { font-size: 23px; }
  .company__details { margin-top: 40px; }
  .company__row { grid-template-columns: 130px minmax(0, 1fr); column-gap: 24px; padding-block: 12px; }
  .company__row dt { font-size: 14px; }
  .company__row dd { padding-left: 32px; font-size: 16px; }
  .company + .contact { padding-top: 40px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .company__header { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .company__portrait { flex-basis: 112px; width: 112px; }
}
/* CONTACT and footer only; the existing chapters are preserved. */
.contact { padding: 80px 24px 88px; background: #faf9f5; color: #485142; text-align: center; }
.contact__inner { width: 100%; max-width: 640px; margin-inline: auto; }
.contact__label { margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .18em; }
.contact__title { margin: 0; font-family: Georgia, var(--serif); font-size: clamp(26px, 7vw, 30px); font-weight: 400; line-height: 1.8; letter-spacing: .025em; }
.contact__body { margin: 36px auto 0; max-width: 480px; font-size: 15px; line-height: 2.1; letter-spacing: .025em; line-break: strict; overflow-wrap: anywhere; }
.contact__button {
  display: inline-block; max-width: 100%; margin-top: 32px; padding: 13px 32px;
  border: 1px solid #a5aa9d; color: #485142; background: transparent;
  font-size: 15px; line-height: 1.7; letter-spacing: .04em; text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
@media (hover: hover) {
  .contact__button:hover { border-color: #939b89; color: #3b4536; }
}
.contact__button:active { border-color: #939b89; color: #3b4536; }
.contact__button:focus-visible { outline: 2px solid #485142; outline-offset: 5px; }
.contact__logo { display: block; width: 128px; max-width: 100%; height: auto; margin: 80px auto 0; }
.site-footer { padding: 0 24px 48px; background: #faf9f5; color: var(--muted); text-align: center; }
.site-footer small { font-size: 11px; line-height: 1.8; letter-spacing: .04em; }
@media (min-width: 768px) {
  .contact { padding: 112px 48px 112px; }
  .contact__label { margin-bottom: 36px; font-size: 12px; }
  .contact__title { font-size: clamp(34px, 3.4vw, 40px); }
  .contact__body { margin-top: 44px; font-size: 17px; }
  .contact__button { margin-top: 36px; padding-inline: 36px; }
  .contact__logo { width: 160px; margin-top: 104px; }
  .site-footer { padding-bottom: 64px; }
  .site-footer small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact__button { transition: none; }
}
/* Out-of-flow navigation leaves all approved section geometry unchanged. */
html { scroll-behavior: smooth; }
.page-nav { position: absolute; top: 4px; right: clamp(16px, 2.5vw, 40px); z-index: 20; }
.page-nav__toggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; padding: 0; border: 0;
  color: #62695e; background: transparent; cursor: pointer;
}
.page-nav__toggle span { width: 19px; height: 1px; background: currentColor; }
.page-nav__links {
  position: absolute; top: 48px; right: 0; width: min(240px, calc(100vw - 32px));
  padding: 16px 24px; display: flex; flex-direction: column; gap: 0;
  background: #faf9f5; visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.page-nav[data-open="true"] .page-nav__links { visibility: visible; opacity: 1; transform: none; }
.page-nav__links a {
  display: block; padding: 14px 0; color: #62695e; font-size: 13px; font-weight: 400;
  line-height: 1.5; letter-spacing: .08em; text-decoration: none; transition: color .2s ease;
}
.page-nav__toggle:focus-visible, .page-nav__links a:focus-visible { outline: 1px solid #62695e; outline-offset: 4px; }
@media (hover: hover) {
  .page-nav__links a:hover, .page-nav__toggle:hover { color: #485142; }
}
@media (min-width: 768px) {
  /* The image is contain-sized at its intrinsic 1672:941 ratio. Mirror that
     rendered width in the shared frame so both right edges are identical. */
  .hero-frame {
    width: min(100%, calc((96svh - clamp(32px, 5vw, 80px) - 128px) * 1.7768));
    max-width: min(100%, calc((96svh - clamp(32px, 5vw, 80px) - 128px) * 1.7768));
  }
  /* Use the same horizontal content box as .hero (its clamp-based padding),
     then right-align the links inside that box. */
  .page-nav {
    position: static; width: 100%;
    display: flex; justify-content: flex-end;
  }
  .page-nav__toggle { display: none; }
  .page-nav__links {
    position: static; width: auto; padding: 0; flex-direction: row; gap: 22px;
    background: transparent; visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .page-nav__links a { padding: 0; font-size: 12px; line-height: 1.5; }
}
@media (max-width: 767px) {
  /* Reserve a quiet header band above the HERO image. */
  .hero { padding-top: 56px; }
  .page-nav { top: 6px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-nav__links, .page-nav__links a { transition: none; }
}