:root {
  --paper:#f4f0e7;
  --ink:#27372e;
  --green:#344d3b;
  --olive:#7d8a68;
  --line:#bcbcaf;
  --ink-muted:#4e5f51;
  --accent-ink:#607854;
  --motion-fast:180ms;
  --motion-ease:cubic-bezier(.22,.72,.2,1);
  --fs-body:16px;
  --fs-body-mobile:15px;
  --fs-label:12px;
  --serif:'Komorebi Serif','Yu Mincho',serif;
  --sans:'Komorebi Latin','Komorebi Sans',arial,sans-serif
;
  --white:#fff;
  --snapshot-divider:#b7c1b1;
  --soft-white:#e7efda;
  --star:#c3d1a7;
  --tab-bg:#e8eadf;
  --visit-divider:#a7b4a4;
  --nav-shadow:#1e392219;
  --focus:#b26b35;
  --selection:#ced7ba;
  --brand-star:#697f59;
  --black:#000;
  --menu-divider:#cfcec2;
  --menu-muted:#5d685e;
  --note-muted:#72796e;
  --feature-bg:#e7e7da;
  --visit-bg:#dbe0d1;
  --visit-soft:#697d6a;
  --footer-star:#b9ca9f;
  --footer-divider:#809082;
  --snapshot-bg:#e8e9df;
  --snapshot-line:#cdd1c4;
  --snapshot-soft:#6f8669;
  --snapshot-note:#5d6e5d;
  --snapshot-fact:#61745f;
  --light-spot:#fff9d974;
  --shade-spot:#1f4e2633;
  --caption-backdrop:#27372eed}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  max-width:1440px;
  margin-inline:auto
}

img {
  display:block;
  max-width:100%
}

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

button {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px
}

::selection {
  background:var(--selection);
  color:var(--ink)
}

.skip-link {
  position:absolute;
  top:-100px;
  left:14px;
  background:var(--ink);
  color:var(--white);
  padding:12px;
  z-index:20
}

.skip-link:focus {
  top:14px
}

.demo-ribbon {
  background:var(--green);
  color:var(--white);
  text-align:center;
  font:500 12px/1.5 var(--sans);
  letter-spacing:.09em;
  padding:7px 16px
}

.site-header {
  position:relative;
  z-index:10;
  background:var(--paper)
}

.header-inner {
  height:96px;
  padding:0 clamp(24px,4.5vw,80px);
  display:flex;
  align-items:center;
  gap:28px;
  border-bottom:1px solid rgb(39 55 46 / 16%)
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:19px;
  letter-spacing:.08em;
  white-space:nowrap
}

.brand-mark {
  display:inline-flex;
  width:37px;
  height:37px;
  color:var(--brand-star);
  line-height:1
}

.brand-mark svg,.footer-star svg {
  display:block;
  width:100%;
  height:100%
}

.brand small {
  display:block;
  font:600 8px/1.7 var(--sans);
  letter-spacing:.22em
}

.site-nav {
  display:flex;
  gap:clamp(22px,3vw,53px);
  align-items:center;
  margin-left:auto
}

.site-nav-link {
  font-size:12px;
  letter-spacing:.06em;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  transition:none
}

.site-nav-link:hover {
  opacity:1;
  text-decoration:underline;
  text-underline-offset:6px
}

.nav-toggle {
  display:none
}

.hero {
  display:grid;
  grid-template-columns:minmax(390px,42%) 1fr;
  position:relative;
  min-height:clamp(620px,80svh,960px)
}

.hero-copy {
  position:relative;
  padding:clamp(70px,10vw,160px) 6vw 75px clamp(28px,8.3vw,140px);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.eyebrow,.overline,.section-label,.hero-photo-caption,.menu-footnote,.visit-card small,.footer-bottom,.intro-signature {
  font-family:var(--sans)
}

.eyebrow {
  font-size:12px;
  letter-spacing:.22em;
  font-weight:600
}

.eyebrow .line {
  display:inline-block;
  width:27px;
  height:1px;
  background:var(--ink);
  vertical-align:middle;
  margin-right:11px
}

.hero h1 {
  font-weight:500;
  line-height:1.55;
  margin:32px -80px 23px 0;
  white-space:nowrap;
  z-index:1;
  font-feature-settings:"palt";
  letter-spacing:.04em;
  font-size:clamp(48px,5.8vw,82px);
  margin-right:0
}

.hero-lead {
  font-size:15px;
  line-height:2.45;
  letter-spacing:.06em;
  margin:0 0 38px
}

.text-link {
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  border-bottom:1px solid var(--ink);
  padding:0 0 10px;
  display:inline-flex;
  align-items:center;
  gap:30px;
  transition:color var(--motion-fast) var(--motion-ease)
}

.text-link:hover {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:5px
}

.hero-vertical {
  position:absolute;
  right:23px;
  bottom:53px;
  writing-mode:vertical-rl;
  font:600 11px var(--sans);
  letter-spacing:.18em
}

.hero-photo-wrap {
  min-width:0;
  position:relative;
  overflow:hidden
}

.hero-photo {
  width:100%;
  height:100%;
  min-height:710px;
  object-fit:cover;
  object-position:center
}

.hero-photo-caption {
  position:absolute;
  bottom:24px;
  left:28px;
  right:auto;
  color:var(--white);
  display:flex;
  justify-content:space-between;
  letter-spacing:.12em;
  text-shadow:0 1px 6px var(--black);
  font-size:12px;
  z-index:1;
  background:var(--caption-backdrop);
  padding:8px 13px;
  max-width:calc(100% - 36px)
}

.section-pad {
  padding:clamp(90px,11vw,170px) clamp(28px,8.3vw,140px)
}

.section-label {
  display:flex;
  gap:18px;
  align-items:center;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:700
}

.section-number {
  font-size:12px;
  color:var(--olive)
}

.intro {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:6vw
}

.intro-content {
  max-width:710px
}

.overline {
  font-size:11px;
  letter-spacing:.16em;
  color:var(--olive);
  font-weight:700
}

.intro h2,.section-heading h2,.visit h2 {
  font-weight:500;
  line-height:1.55;
  margin:22px 0 34px;
  font-size:clamp(34px,4vw,60px);
  font-feature-settings:"palt";
  letter-spacing:.04em
}

.intro-title-accent {
  padding-left:15%
}

.intro-copy {
  font-size:14px;
  line-height:2.5;
  letter-spacing:.04em;
  max-width:495px
}

.intro-signature {
  font-style:italic;
  font-size:13px;
  color:var(--olive);
  margin-top:44px;
  letter-spacing:.05em
}

.photo-story {
  height:min(58vw,680px);
  min-height:430px;
  position:relative
}

.story-image,.story-image img {
  width:100%;
  height:100%
}

.story-image img {
  object-fit:cover;
  object-position:center 54%
}

.story-image picture,.feature-image picture {
  display:block;
  width:100%;
  height:100%
}

.story-note {
  position:absolute;
  right:clamp(28px,8.3vw,140px);
  bottom:-55px;
  width:290px;
  min-height:220px;
  padding:24px 33px;
  background:var(--green);
  color:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.story-note-copy {
  font-size:21px;
  line-height:1.8;
  letter-spacing:.08em;
  margin:0
}

.menu-section {
  padding-top:clamp(140px,16vw,240px)
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px
}

.section-heading h2 {
  margin-bottom:47px
}

.section-heading>p {
  font-size:13px;
  line-height:2;
  letter-spacing:.05em;
  margin-bottom:52px
}

.heading-dot {
  color:var(--olive)
}

.menu-layout {
  display:grid;
  grid-template-columns:34% 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  max-width:1100px;
  margin-inline:auto
}

.menu-section .section-heading {
  max-width:1100px;
  margin-inline:auto
}

.menu-tabs {
  border-right:1px solid var(--line)
}

.menu-tabs button {
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:34px 26px 34px 0;
  color:var(--ink);
  text-align:left;
  display:flex;
  align-items:center;
  gap:17px;
  font-size:20px;
  letter-spacing:.07em;
  cursor:pointer;
  transition:background var(--motion-fast) var(--motion-ease)
}

.menu-tabs button:last-child {
  border-bottom:0
}

.menu-tabs button[aria-selected="true"] {
  padding-left:15px;
  color:var(--ink);
  box-shadow:inset 3px 0 0 var(--ink);
  background:var(--tab-bg)
}

.menu-tab-number {
  font:600 11px var(--sans);
  color:var(--olive)
}

.menu-panels {
  padding:30px clamp(30px,5vw,85px) 20px
}

.menu-item {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  border-bottom:1px solid var(--menu-divider);
  padding:15px 0 20px
}

.menu-item h3 {
  font-size:17px;
  font-weight:500;
  letter-spacing:.06em;
  margin:0 0 9px
}

.menu-item-description {
  letter-spacing:.04em;
  margin:0;
  font-size:13px;
  color:var(--ink-muted);
  line-height:1.8
}

.menu-item>span {
  font:500 14px var(--sans);
  white-space:nowrap
}

.menu-footnote {
  font-size:10px;
  color:var(--note-muted);
  margin-top:23px
}

.feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--feature-bg);
  min-height:680px
}

.feature-image {
  overflow:hidden
}

.feature-image img {
  width:100%;
  height:100%;
  max-height:780px;
  object-fit:cover;
  object-position:center 55%
}

.feature-copy {
  padding:70px clamp(35px,7vw,125px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center
}

.feature h2 {
  font-size:clamp(34px,3.5vw,57px);
  font-weight:500;
  line-height:1.65;
  letter-spacing:.07em;
  margin:28px 0
}

.feature-description {
  font-size:13px;
  line-height:2.4;
  max-width:370px;
  margin:0 0 33px
}

.visit {
  background:var(--visit-bg)
}

.visit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
  margin-top:52px
}

.visit h2 {
  font-size:clamp(39px,4.5vw,68px);
  margin:20px 0 29px
}

.visit-intro {
  max-width:410px;
  font-size:13px;
  line-height:2.3
}

.visit-card {
  border-top:1px solid var(--visit-divider)
}

.visit-card small {
  display:block;
  font-size:9px;
  letter-spacing:.14em;
  color:var(--visit-soft);
  margin-top:5px
}

.visit-disclaimer {
  margin-top:18px
}

.footer {
  background:var(--green);
  color:var(--paper);
  padding:85px clamp(28px,8.3vw,140px) 24px
}

.footer-top {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:90px
}

.footer-star {
  display:inline-flex;
  width:64px;
  height:64px;
  color:var(--footer-star);
  line-height:1
}

.footer-top p {
  font-size:clamp(27px,3vw,43px);
  line-height:1.7;
  margin:0 auto 0 6vw;
  letter-spacing:.08em
}

.footer-top-link {
  font:600 12px var(--sans);
  letter-spacing:.1em;
  border-bottom:1px solid var(--paper);
  padding-bottom:8px
}

.footer-bottom {
  border-top:1px solid var(--footer-divider);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:.05em
}

.footer-bottom small {
  display:block;
  font-size:8px;
  letter-spacing:.14em;
  margin-top:8px
}

@media(width <=900px) {
  .header-inner {
    height:76px
  }

  .site-nav {
    gap:18px
  }

  .site-nav-link {
    font-size:11px
  }

  .hero {
    grid-template-columns:43% 57%;
    min-height:620px
  }

  .hero-copy {
    padding:95px 20px 60px 6vw
  }

  .hero h1 {
    font-size:clamp(36px,5.2vw,55px)
  }

  .hero-photo {
    min-height:620px
  }

  .hero-vertical {
    display:none
  }

  .intro {
    grid-template-columns:1fr 1.6fr
  }

  .feature {
    min-height:540px
  }

  .feature-copy {
    padding:45px
  }

  .feature h2 {
    font-size:clamp(30px,4vw,45px)
  }
}

@media(width <=680px) {
  .demo-ribbon {
    font-size:12px
  }

  .header-inner {
    height:72px;
    padding:0 22px
  }

  .brand {
    font-size:16px
  }

  .brand-mark {
    width:31px;
    height:31px
  }

  .brand small {
    font-size:7px
  }

  .js .nav-toggle {
    display:flex;
    width:44px;
    height:44px;
    margin-left:auto;
    background:transparent;
    border:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    z-index:12
  }

  .nav-toggle-line {
    width:25px;
    height:1px;
    background:var(--ink);
    transition:transform .2s
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-line-top {
    transform:translateY(3.5px) rotate(45deg)
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-line-bottom {
    transform:translateY(-3.5px) rotate(-45deg)
  }

  .site-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--paper);
    padding:20px 28px 35px;
    box-shadow:0 15px 22px var(--nav-shadow);
    z-index:11;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }

  .site-nav.is-open {
    display:flex
  }

  .site-nav-link {
    padding:18px 5px;
    border-bottom:1px solid var(--line);
    font-size:15px
  }

  .hero {
    display:flex;
    flex-direction:column;
    min-height:0
  }

  .hero-copy {
    padding:76px 28px 73px;
    min-height:430px
  }

  .hero h1 {
    font-size:clamp(42px,10vw,65px);
    margin:18px 0
  }

  .hero-lead {
    font-size:13px;
    line-height:2.2;
    margin-bottom:29px
  }

  .hero-photo-wrap {
    height:420px
  }

  .hero-photo {
    min-height:0;
    height:100%
  }

  .hero-photo-caption {
    left:18px;
    right:auto;
    bottom:18px;
    font-size:12px
  }

  .section-pad {
    padding:94px 28px
  }

  .intro {
    display:block
  }

  .intro-content {
    margin-top:42px
  }

  .intro h2,.section-heading h2,.visit h2 {
    font-size:clamp(37px,8.5vw,57px)
  }

  .intro-title-accent {
    padding-left:9%
  }

  .intro-copy {
    font-size:13px
  }

  .photo-story {
    height:440px;
    min-height:0
  }

  .story-note {
    width:235px;
    min-height:175px;
    bottom:-65px;
    right:20px;
    padding:19px 25px
  }

  .story-note-copy {
    font-size:17px
  }

  .menu-section {
    padding-top:160px
  }

  .section-heading {
    display:block
  }

  .section-heading h2 {
    margin-bottom:20px
  }

  .section-heading>p {
    margin:0 0 38px;
    font-size:12px
  }

  .menu-layout {
    display:block
  }

  .menu-tabs {
    border-right:0;
    display:flex;
    border-bottom:1px solid var(--line)
  }

  .menu-tabs button,.menu-tabs button[aria-selected="true"] {
    font-size:13px;
    padding:17px 7px;
    justify-content:center;
    gap:5px;
    white-space:nowrap
  }

  .menu-tabs button {
    border-bottom:0;
    border-right:1px solid var(--line)
  }

  .menu-tabs button:last-child {
    border-right:0
  }
  .menu-tab-number { font-size:11px }

  .menu-panels {
    padding:25px 3px 10px
  }

  .menu-item h3 {
    font-size:15px
  }

  .menu-item-description {
    font-size:10px;
    line-height:1.7
  }

  .feature {
    display:flex;
    flex-direction:column
  }

  .feature-image {
    height:440px
  }

  .feature-image img {
    max-height:none
  }

  .feature-copy {
    padding:70px 28px 85px
  }

  .feature h2 {
    font-size:clamp(33px,7vw,48px)
  }

  .visit-grid {
    display:block;
    margin-top:35px
  }

  .visit-intro {
    margin-bottom:44px
  }

  .footer {
    padding:70px 28px 25px
  }

  .footer-top {
    display:block;
    padding-bottom:70px
  }

  .footer-top p {
    margin:30px 0;
    font-size:clamp(27px,7.2vw,31px)
  }

  .footer-bottom {
    gap:20px;
    align-items:flex-start;
    font-size:10px
  }

  .footer-demo-label {
    text-align:right;
    white-space:nowrap
  }

  .footer-bottom small {
    font-size:7px
  }
}

@media(width <=360px) {
  .hero h1 {
    font-size:38px
  }

  .menu-tabs button,.menu-tabs button[aria-selected="true"] {
    font-size:12px
  }

  .footer-top p {
    font-size:27px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
}

@media(width >=681px) {
  .visit h2 {
    font-size:clamp(39px,3.9vw,59px)
  }
}

.menu-footnote,.visit-disclaimer {
  font-size:12px;
  color:var(--ink-muted)
}

@media(width <=680px) {
  .hero-photo-caption {
    font-size:12px
  }

  .demo-ribbon {
    font-size:12px
  }
}

@media(width >=681px) and (width <=900px) {
  .visit-grid {
    display:block
  }

  .visit-intro {
    max-width:570px
  }

  .visit-card {
    margin-top:48px;
    max-width:570px
  }
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:18px 31px;
  align-items:center
}

.visit-snapshot {
  display:grid;
  grid-template-columns:minmax(195px,1.5fr) repeat(3,minmax(110px,1fr)) auto;
  align-items:center;
  gap:0;
  padding:22px clamp(28px,8.3vw,140px);
  background:var(--snapshot-bg);
  border-bottom:1px solid var(--snapshot-line)
}

.snapshot-heading {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-right:20px
}

.snapshot-link,.snapshot-fact-label {
  font:600 12px var(--sans);
  letter-spacing:.1em
}

.snapshot-heading strong {
  font-size:17px;
  font-weight:500;
  letter-spacing:.07em
}

.snapshot-heading small {
  font-size:11px;
  color:var(--snapshot-note)
}

.snapshot-fact {
  min-height:52px;
  border-left:1px solid var(--snapshot-divider);
  padding:4px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px
}

.snapshot-fact-label {
  color:var(--snapshot-fact)
}

.snapshot-fact strong {
  font:500 14px var(--serif);
  white-space:nowrap
}

.snapshot-link {
  border-bottom:1px solid var(--ink);
  padding:8px 0 7px;
  margin-left:18px;
  white-space:nowrap
}

.snapshot-link-arrow {
  margin-left:8px
}

@media(width <=900px) {
  .visit-snapshot {
    grid-template-columns:repeat(3,1fr);
    gap:14px 0
  }

  .snapshot-heading {
    grid-column:1/-1;
    padding:0 0 7px
  }

  .snapshot-heading + .snapshot-fact {
    border-left:0;
    padding-left:0
  }

  .snapshot-link {
    grid-column:1/-1;
    justify-self:start;
    margin:0 0 2px
  }
}

@media(width <=680px) {
  .hero-actions {
    gap:22px 24px
  }

  .hero-actions .text-link {
    font-size:12px;
    gap:12px
  }

  .visit-snapshot {
    padding:25px 28px;
    grid-template-columns:1fr 1fr;
    gap:0
  }

  .snapshot-heading {
    padding-bottom:13px
  }

  .snapshot-fact {
    padding:13px 0;
    min-height:64px;
    border-left:0;
    border-top:1px solid var(--snapshot-divider)
  }

  .snapshot-fact:nth-child(3) {
    padding-left:18px;
    border-left:1px solid var(--snapshot-divider)
  }

  .snapshot-fact:nth-child(4) {
    grid-column:1/-1
  }

  .snapshot-fact strong {
    font-size:13px
  }

  .snapshot-link {
    margin-top:1px
  }
}

/* Opus review: legibility, focus, navigation and responsive rhythm. */
.visually-hidden {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

.hero-title-accent,.feature-title-accent {
  color:var(--accent-ink)
}

.hero-lead,.intro-copy,.feature-description,.visit-intro {
  font-size:var(--fs-body);
  line-height:1.95
}

.overline,.section-number,.intro-signature,.menu-tab-number,.snapshot-fact-label,.snapshot-heading small {
  color:var(--ink-muted)
}

.overline,.section-label,.snapshot-fact-label,.snapshot-heading small,.brand small,.footer-bottom small {
  font-size:var(--fs-label)
}

.brand small,.footer-bottom small {
  letter-spacing:.1em
}

.menu-panel:not([hidden]) {
  animation:panel-enter .28s var(--motion-ease) both
}

@keyframes panel-enter {
  from {
    opacity:.5;
    transform:translateY(8px)
  }

  to {
    opacity:1;
    transform:none
  }
}

.site-nav-link:active,.text-link:active,.menu-tabs button:active {
  opacity:.7
}

.text-link-arrow {
  display:inline-block;
  transition:transform var(--motion-fast) var(--motion-ease)
}

@media(hover:hover) {
  .text-link:hover .text-link-arrow {
    transform:translateY(-5px)
  }

  .hero .text-link:hover .text-link-arrow {
    transform:translateY(5px)
  }
}

.visit-card .visit-disclaimer {
  font-size:12px;
  color:var(--ink-muted);
  margin:18px 0 0;
  letter-spacing:.04em
}

.footer :focus-visible {
  outline-color:var(--paper)
}

.hero-photo-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 27% 25%,var(--light-spot),transparent 45%),radial-gradient(ellipse at 76% 78%,var(--shade-spot),transparent 60%);
  mix-blend-mode:soft-light;
  pointer-events:none
}

@supports(animation-timeline:scroll()) {
  @media(prefers-reduced-motion:no-preference) {
    .hero-photo-wrap::after {
      animation:daylight linear both;
      animation-timeline:scroll(root block)
    }

    @keyframes daylight {
      to {
        transform:translateY(-7%)
      }
    }
  }
}

@media(width <=900px) {
  .site-nav {
    gap:12px
  }
}

@media(width >=681px) and (width <=900px) {
  .site-nav-link { font-size:12px }
}

@media(width <=680px) {
  .site-nav {
    display:flex;
    position:static;
    box-shadow:none;
    padding:10px 22px 20px
  }
  .site-nav-link { font-size:15px }

  html:not(.js) .header-inner {
    height:auto;
    display:block;
    padding:0
  }
  html:not(.js) .brand { padding:14px 22px }

  .js .site-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--paper);
    padding:20px 28px 35px;
    box-shadow:0 15px 22px var(--nav-shadow)
  }

  .js .site-nav.is-open {
    display:flex
  }

  html:not(.js) .site-nav { margin:0 }

  .hero {
    min-height:0
  }

  .hero h1 {
    font-size:clamp(42px,10vw,65px);
    margin:18px 0
  }

  .hero-lead,.intro-copy,.feature-description,.visit-intro {
    font-size:var(--fs-body-mobile);
    line-height:1.95
  }

  .menu-tabs button[aria-selected="true"] {
    box-shadow:inset 0 -3px 0 var(--ink)
  }

  .menu-item-description {
    font-size:13px
  }

  .footer-bottom {
    font-size:12px
  }
}

@media(forced-colors:active) {
  .story-note,.story-note *,.footer,.footer * { color:CanvasText }
  .story-note,.footer { border:1px solid CanvasText }

  .nav-toggle-line {
    background:CanvasText
  }

  .menu-tabs [aria-selected="true"] {
    outline:2px solid Highlight;
    outline-offset:-2px
  }
}

@media(prefers-reduced-motion:reduce) {
  .menu-panel:not([hidden]),.hero-photo-wrap::after {
    animation:none!important
  }

  .text-link-arrow {
    transition:none
  }
}

@font-face {
  font-family:'Komorebi Serif';
  src:url('./assets/fonts/noto-serif-jp-subset.woff2') format('woff2');
  font-style:normal;
  font-weight:400 700;
  font-display:swap
}

@font-face {
  font-family:'Komorebi Sans';
  src:url('./assets/fonts/noto-sans-jp-subset.woff2') format('woff2');
  font-style:normal;
  font-weight:400 700;
  font-display:swap
}

.visit-card dl {
  margin:0
}

.visit-card dl>div {
  padding:21px 0;
  border-bottom:1px solid var(--visit-divider);
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:baseline
}

.visit-card dt,.visit-card dd {
  font-size:14px
}

.visit-card dd {
  margin:0;
  text-align:right
}

.visit-card dt small {
  display:block;
  font-size:11px;
  color:var(--ink-muted);
  letter-spacing:.04em;
  margin-top:5px
}

@media(width <=680px) {
  .visit-card dt,.visit-card dd {
    font-size:12px
  }
}

/* Keep the headline fully on its paper panel with local fonts at every breakpoint. */
@media(width >=681px) and (width <=900px) {
  .hero h1 {
    font-size:44px
  }
}

@media(width <=680px) {
  .hero h1 {
    font-size:clamp(42px,10vw,65px)
  }
}

@media(hover:none) {
  .text-link:hover {
    color:inherit
  }

  .site-nav-link:hover {
    text-decoration:none
  }
}

.hero-photo-wrap picture {
  display:block;
  width:100%;
  height:100%
}

@media(width >=681px) {
  .story-note {
    width:265px;
    min-height:320px;
    gap:18px
  }

  .story-note-copy {
    writing-mode:vertical-rl;
    align-self:center;
    line-height:1.55;
    max-height:225px
  }
}

@media(width <=680px) {
  .story-note-copy { writing-mode:horizontal-tb }
}

.story-index {
  color:var(--soft-white);
  align-self:flex-start;
  font-size:11px;
  letter-spacing:.12em
}

.story-index .section-number {
  color:var(--soft-white);
  font-size:12px
}

@media(forced-colors:active) {
  .story-index .section-number { color:CanvasText }
}

@media(width <=680px) {
  .story-index { font-size:11px }
  .story-note { gap:18px }
}

@media(width >=681px) and (width <=900px) {
  .hero { min-height:clamp(620px,70svh,760px) }

  .hero-photo { object-position:35% center }
}

@media(width <=680px) {
  .intro h2,.section-heading h2,.visit h2 { font-size:clamp(34px,4vw,60px) }
}

@font-face {
  font-family:'Komorebi Latin';
  src:url('./assets/fonts/dm-sans-latin-subset.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+0000-024F
}