:root {
  --paper:#f3f1e9;
  --ink:#263c4a;
  --ink-deep:#1e3340;
  --muted:#687477;
  --line:rgba(38,60,74,.18);
  --red:#a34e3c;
  --serif:"Noto Serif SC","Songti SC",STSong,serif;
  --sans:"PingFang SC","Microsoft YaHei",sans-serif;
  --page:1200px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:35px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:15;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23746c58' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

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

button {
  font:inherit;
}

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

button {
  color:inherit;
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--red);
  outline-offset:7px;
}

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

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

svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.page-width {
  width:min(var(--page),calc(100% - 120px));
  margin-inline:auto;
}

.section-space {
  padding-top:128px;
  padding-bottom:110px;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-weight:500;
}

h2 {
  font-family:var(--serif);
  font-size:48px;
  line-height:1.65;
  letter-spacing:.1em;
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  letter-spacing:.15em;
  line-height:1.7;
}

.chapter {
  font-family:Georgia,serif;
  font-style:italic;
  color:var(--red);
  font-size:15px;
  margin-right:3px;
}

.heading-rule {
  width:27px;
  height:1px;
  background:currentColor;
  opacity:.3;
}

.micro-label {
  font-size:9px;
  letter-spacing:.23em;
}

.skip-link {
  position:fixed;
  left:20px;
  top:-80px;
  padding:12px 20px;
  z-index:40;
  background:var(--ink);
  color:var(--paper);
}

.skip-link:focus {
  top:16px;
}

.site-header {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:23px 4.5%;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:13px;
}

.brand img {
  width:54px;
  height:54px;
  border-radius:50%;
  mix-blend-mode:multiply;
}

.brand-wordmark {
  font-family:var(--serif);
  font-size:26px;
  letter-spacing:.12em;
  line-height:1.35;
}

.brand-dot {
  font-size:19px;
  margin-inline:4px;
}

.brand-subtitle {
  display:block;
  font-family:var(--sans);
  font-size:7px;
  letter-spacing:.23em;
  margin-top:5px;
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:43px;
  font-size:12px;
  letter-spacing:.09em;
}

.desktop-nav>a {
  position:relative;
}

.desktop-nav>a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:1px;
  background:var(--ink);
  transition:right .3s;
}

.desktop-nav>a:hover::after {
  right:0;
}

.desktop-nav .nav-download {
  display:flex;
  align-items:center;
  gap:25px;
  border:1px solid rgba(38,60,74,.38);
  padding:10px 19px;
}

.desktop-nav .nav-download::after {
  display:none;
}

.nav-download svg {
  width:18px;
  height:18px;
}

.nav-download:hover {
  background:rgba(243,241,233,.5);
}

.menu-toggle,.mobile-nav {
  display:none;
}

.hero {
  height:900px;
  max-height:1100px;
  min-height:760px;
  height:100svh;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.hero-art {
  position:absolute;
  z-index:-3;
  inset:0;
  overflow:hidden;
}

.hero-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 55%;
  opacity:.9;
  transform:scale(1.025);
  animation:landscape-breathe 30s ease-in-out infinite alternate;
}

.hero-art-wash {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(243,241,233,.93) 0%,rgba(243,241,233,.7) 27%,rgba(243,241,233,.18) 55%,transparent 76%),linear-gradient(180deg,rgba(243,241,233,.5),transparent 23%,transparent 80%,var(--paper));
}

.hero-content {
  padding-top:clamp(170px,22vh,260px);
  position:relative;
}

.hero-eyebrow {
  letter-spacing:.23em;
  font-size:11px;
  margin-bottom:26px;
}

.hero-kicker-line {
  width:23px;
  height:1px;
  background:var(--red);
  flex-shrink:0;
}

.hero-category {
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  font-family:var(--serif);
  font-size:21px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.12em;
  white-space:nowrap;
}

.hero-category span {
  font-family:var(--sans);
  font-size:18px;
  letter-spacing:.1em;
}

.hero-kicker-divider {
  width:1px;
  height:16px;
  background:var(--line);
  flex-shrink:0;
}

.hero h1 {
  font-family:var(--serif);
  font-size:clamp(76px,7.5vw,112px);
  line-height:1.45;
  letter-spacing:.12em;
  font-weight:600;
  margin-left:-6px;
}

.river-character {
  position:relative;
}

.hero-seal {
  position:absolute;
  left:calc(100% + 9px);
  top:10px;
  font-family:var(--serif);
  font-size:11px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
  border:1px solid var(--red);
  color:var(--red);
  padding:5px 3px;
  transform:rotate(-5deg);
}

.hero-description {
  font-size:13px;
  line-height:2.1;
  letter-spacing:.12em;
  margin-top:23px;
  color:#54646a;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:34px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
  padding:15px 24px;
  font-size:12px;
  letter-spacing:.16em;
  transition:background .25s,transform .25s;
}

.button svg {
  width:19px;
  height:19px;
  transition:transform .25s;
}

.button:hover svg {
  transform:translateX(4px);
}

.button-ink {
  background:var(--ink);
  color:#f8f6ee;
}

.button-ink:hover {
  background:#365464;
  transform:translateY(-2px);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:23px;
  font-size:11px;
  letter-spacing:.12em;
  padding-block:9px;
}

.text-link>span {
  font-size:20px;
  line-height:1;
  transition:transform .3s;
}

.text-link:hover>span {
  transform:translate(3px,3px);
}

.hero-product {
  display:flex;
  align-items:center;
  gap:11px;
  color:#667277;
  font-size:9px;
  letter-spacing:.14em;
  margin-top:26px;
}

.tiny-line {
  width:13px;
  height:1px;
  background:#899394;
}

.product-divider {
  color:#a2aaa8;
  margin-inline:2px;
}

.hero-side-note {
  position:absolute;
  right:4.7%;
  top:38%;
  display:flex;
  align-items:center;
  gap:23px;
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.45em;
}

.hero-side-note i {
  height:66px;
  width:1px;
  background:var(--ink);
  opacity:.45;
}

.hero-bottom {
  position:absolute;
  bottom:29px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.12em;
}

.hero-index {
  display:flex;
  align-items:center;
  gap:13px;
}

.hero-index b {
  font-family:var(--serif);
  font-size:15px;
  font-weight:400;
}

.hero-index>span {
  border-left:1px solid var(--line);
  padding-left:14px;
}

.scroll-cue {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:15px;
}

.scroll-cue svg {
  width:16px;
  height:25px;
  animation:scroll-down 2.8s ease-in-out infinite;
}

.motion-toggle {
  background:none;
  border:0;
  cursor:pointer;
  padding:8px 0 8px 12px;
  display:flex;
  align-items:center;
  gap:11px;
  font-size:9px;
  letter-spacing:.1em;
}

.motion-symbol {
  display:flex;
  align-items:center;
  gap:3px;
  height:14px;
}

.motion-symbol i {
  display:block;
  width:1px;
  height:12px;
  background:var(--ink);
  animation:ink-equalizer 1.6s ease-in-out infinite alternate;
}

.motion-symbol i:nth-child(2) {
  height:7px;
  animation-delay:-.6s;
}

.motion-symbol i:nth-child(3) {
  height:10px;
  animation-delay:-1.1s;
}

#ink-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}

.mist {
  position:absolute;
  z-index:-2;
  pointer-events:none;
  height:180px;
  width:90%;
  background:radial-gradient(ellipse,rgba(243,241,233,.6),rgba(243,241,233,.15) 48%,transparent 70%);
  filter:blur(20px);
  transform:rotate(-8deg);
  animation:mist-flow 35s ease-in-out infinite alternate;
}

.mist-one {
  left:17%;
  top:44%;
}

.mist-two {
  width:70%;
  left:32%;
  top:70%;
  opacity:.6;
  animation-delay:-15s;
}

.section-heading {
  position:relative;
}

.section-heading h2 {
  margin-top:31px;
}

.section-intro {
  position:absolute;
  right:9%;
  bottom:16px;
  font-size:13px;
  color:var(--muted);
  line-height:2.2;
  letter-spacing:.09em;
}

.philosophy-composition {
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  align-items:center;
  gap:30px;
  margin-top:39px;
}

.meaning-character {
  position:relative;
  font-family:var(--serif);
  font-size:90px;
  line-height:1.3;
  letter-spacing:.05em;
  font-weight:500;
}

.meaning-character>span {
  position:absolute;
  top:29px;
  margin-left:21px;
  font-size:10px;
  writing-mode:vertical-rl;
  letter-spacing:.15em;
  color:var(--red);
}

.meaning-copy {
  margin-top:18px;
}

.meaning .micro-label {
  color:#7a8586;
  margin-bottom:17px;
}

.meaning h3 {
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.03em;
  margin-bottom:15px;
  white-space:nowrap;
}

.meaning p:not(.micro-label) {
  font-size:12px;
  line-height:2.2;
  color:var(--muted);
  letter-spacing:.025em;
}

.meaning-tag {
  display:inline-block;
  margin-top:28px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:9px;
  letter-spacing:.12em;
}

.meaning-river {
  padding-left:20px;
}

.brand-art {
  position:relative;
  isolation:isolate;
  background:var(--paper);
  text-align:center;
}

.brand-art img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  mix-blend-mode:multiply;
  opacity:.95;
}

.brand-orbit {
  position:absolute;
  inset:9%;
  border:1px solid rgba(38,60,74,.08);
  border-radius:50%;
  z-index:-1;
}

.brand-orbit::before {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  background:var(--red);
  border-radius:50%;
  top:13%;
  right:13%;
  box-shadow:0 0 0 5px var(--paper);
  animation:seal-breathe 4s ease-in-out infinite alternate;
}

.art-caption {
  display:block;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.3em;
  margin-top:0;
  color:#78817e;
}

.philosophy-footnote {
  border-top:1px solid var(--line);
  margin-top:74px;
  padding-top:27px;
  display:flex;
  align-items:center;
  gap:20px;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.15em;
}

.philosophy-footnote i {
  width:25px;
  height:1px;
  background:var(--line);
}

.footnote-en {
  margin-left:auto;
  font:9px var(--sans);
  letter-spacing:.15em;
  color:#7a8586;
}

.journey {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ink-deep);
  color:var(--paper);
}

.journey-landscape {
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:linear-gradient(90deg,rgba(23,45,58,.72),rgba(23,45,58,.92)),url("./assets/landscape.webp");
  background-size:cover;
  background-position:center 68%;
  mix-blend-mode:luminosity;
  opacity:.28;
}

.journey::after {
  position:absolute;
  content:"";
  inset:0;
  background:linear-gradient(0deg,rgba(17,35,47,.3),transparent);
  pointer-events:none;
  z-index:-1;
}

.journey-waves {
  position:absolute;
  inset:-10% -5%;
  z-index:-2;
  opacity:.13;
  pointer-events:none;
}

.journey-waves svg {
  width:100%;
  height:100%;
  stroke:#a6c3c6;
  stroke-width:.6;
}

.journey-waves path:first-child {
  stroke-dasharray:4 7;
  animation:river-flow 30s linear infinite;
}

.journey-inner {
  padding-top:114px;
  padding-bottom:80px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:125px;
}

.journey .chapter {
  color:#cb8c76;
}

.journey .eyebrow {
  color:#aebdbd;
}

.journey h2 {
  font-size:49px;
  margin-top:37px;
}

.journey-heading>p:not(.eyebrow) {
  font-size:12px;
  letter-spacing:.09em;
  line-height:2.3;
  color:#b9c4c1;
  margin-top:22px;
}

.light-link {
  margin-top:31px;
  font-size:10px;
  color:#dce0d7;
}

.journey-principles {
  padding-top:51px;
}

.principle {
  display:flex;
  align-items:flex-start;
  gap:23px;
  padding:28px 0;
  border-bottom:1px solid rgba(243,241,233,.18);
  position:relative;
}

.principle:first-child {
  padding-top:0;
}

.principle-index {
  font-family:var(--serif);
  font-size:11px;
  color:#a8b8b5;
  padding-top:7px;
}

.principle h3 {
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.principle p {
  font-size:11px;
  color:#aebdbb;
  letter-spacing:.02em;
}

.principle-mark {
  font-family:var(--serif);
  font-size:60px;
  line-height:1;
  position:absolute;
  right:5px;
  top:22px;
  color:rgba(243,241,233,.055);
}

.principle:first-child .principle-mark {
  top:-5px;
}

.journey-bottom {
  border-top:1px solid rgba(243,241,233,.14);
  padding-block:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.16em;
  color:#a7b6b5;
}

.journey-seal {
  font-family:var(--serif);
  line-height:1.4;
  border:1px solid #b26a50;
  color:#bf8066;
  padding:4px;
  font-size:10px;
  transform:rotate(-5deg);
}

.download-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:35px;
  margin-bottom:56px;
}

.download-heading h2 {
  font-size:40px;
  margin-top:31px;
  letter-spacing:.06em;
}

.download-heading>p {
  font-size:12px;
  line-height:2.2;
  letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:9px;
}

.platform-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.platform {
  padding:32px 27px 28px;
  position:relative;
  transition:background .3s;
}

.platform+.platform {
  border-left:1px solid var(--line);
}

.platform:hover {
  background:rgba(255,255,255,.28);
}

.platform-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:35px;
}

.platform-icon {
  width:32px;
  height:32px;
  stroke-width:1.4;
}

.platform-number {
  font-size:8px;
  color:#758081;
  letter-spacing:.1em;
}

.platform h3 {
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
  line-height:1.5;
  white-space:nowrap;
}

.platform h3 span {
  font:9px var(--sans);
  color:var(--muted);
  margin-left:5px;
}

.platform>p {
  font-size:10px;
  color:var(--muted);
  margin-top:8px;
  letter-spacing:.03em;
}

.platform button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:31px;
  border:1px solid rgba(38,60,74,.19);
  background:none;
  padding:10px 13px;
  font-size:10px;
  letter-spacing:.1em;
  color:#687578;
  cursor:not-allowed;
}

.platform button>span:last-child {
  font-size:17px;
  line-height:1;
  color:#8c9797;
}

.download-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.06em;
  margin-top:30px;
}

.status-dot {
  display:inline-block;
  width:4px;
  height:4px;
  background:var(--red);
  border-radius:50%;
  flex-shrink:0;
}

.closing {
  position:relative;
  isolation:isolate;
  min-height:290px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-top:1px solid rgba(38,60,74,.08);
}

.closing-art {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,var(--paper),rgba(243,241,233,.4) 55%,rgba(243,241,233,.85)),url("./assets/landscape.webp") center 72%/cover;
  opacity:.6;
}

.closing-content {
  text-align:center;
  padding:65px 20px;
}

.closing-content .micro-label {
  color:#657574;
  font-size:8px;
  letter-spacing:.24em;
}

.closing-verse {
  font-family:var(--serif);
  font-size:34px;
  letter-spacing:.2em;
  margin-top:23px;
}

.closing-seal {
  display:inline-block;
  border:1px solid var(--red);
  font-family:var(--serif);
  writing-mode:vertical-rl;
  font-size:10px;
  line-height:1.2;
  padding:5px 3px;
  color:var(--red);
  margin-top:24px;
  transform:rotate(-4deg);
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:29px;
}

.footer-brand {
  gap:10px;
}

.footer-brand img {
  width:38px;
  height:38px;
}

.footer-brand .brand-wordmark {
  font-size:20px;
}

.footer-brand .brand-dot {
  font-size:14px;
}

.site-footer>p {
  font-size:8px;
  letter-spacing:.07em;
  color:#748080;
}

.footer-divider {
  margin-inline:13px;
  color:#a5adaa;
}

.back-top {
  font-size:9px;
  letter-spacing:.1em;
  display:flex;
  gap:20px;
  align-items:center;
}

.back-top span {
  font-size:17px;
}

.reveal {
  opacity:1;
}

.motion-ready .reveal {
  transition:opacity .85s ease,transform 1s cubic-bezier(.2,.65,.3,1);
}

.motion-ready .reveal:not(.is-visible) {
  opacity:0;
  transform:translateY(24px);
}

.motion-paused *,.motion-paused *::before,.motion-paused *::after {
  animation-play-state:paused!important;
}

.motion-paused .reveal {
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

.motion-paused .motion-symbol i {
  height:8px;
}

.motion-paused .motion-symbol i:last-child {
  display:none;
}

@keyframes landscape-breathe {
  from {
    transform:scale(1.025) translateY(0);
  }
  to {
    transform:scale(1.065) translateY(-8px);
  }
}

@keyframes mist-flow {
  from {
    transform:translateX(-6%) rotate(-8deg);
    opacity:.4;
  }
  to {
    transform:translateX(8%) rotate(-5deg);
    opacity:.8;
  }
}

@keyframes scroll-down {
  0%,100% {
    transform:translateY(-3px);
  }
  50% {
    transform:translateY(4px);
  }
}

@keyframes ink-equalizer {
  to {
    transform:scaleY(.4);
  }
}

@keyframes seal-breathe {
  to {
    opacity:.4;
  }
}

@keyframes river-flow {
  to {
    stroke-dashoffset:-220;
  }
}

@media(min-width:1600px) {
  :root {
    --page:1320px;
  }
  .hero h1 {
    font-size:112px;
  }
  .hero-content {
    padding-top:22vh;
  }
  .hero-art img {
    object-position:50% 60%;
  }
}

@media(max-width:1100px) {
  .page-width {
    width:calc(100% - 88px);
  }
  .hero {
    min-height:730px;
  }
  .hero-content {
    padding-top:175px;
  }
  .hero h1 {
    font-size:86px;
  }
  .hero-description {
    margin-top:18px;
  }
  .hero-art img {
    object-position:56% center;
  }
  .hero-art-wash {
    background:linear-gradient(90deg,rgba(243,241,233,.95),rgba(243,241,233,.55) 40%,transparent 85%),linear-gradient(180deg,rgba(243,241,233,.4),transparent 28%,transparent 80%,var(--paper));
  }
  .philosophy-composition {
    gap:12px;
    grid-template-columns:1fr 1.1fr 1fr;
  }
  .meaning h3 {
    font-size:17px;
  }
  .meaning p:not(.micro-label) {
    font-size:11px;
  }
  .meaning-river {
    padding-left:10px;
  }
  .journey-inner {
    gap:65px;
  }
  .journey h2 {
    font-size:42px;
  }
  .journey .eyebrow {
    font-size:8px;
    gap:10px;
  }
  .platform {
    padding-inline:20px;
  }
  .platform h3 {
    font-size:21px;
  }
  .download-heading h2 {
    font-size:35px;
  }
  .principle h3 {
    font-size:22px;
  }
  .principle p {
    font-size:10px;
  }
  .journey-bottom {
    font-size:7px;
  }
}

@media(max-width:760px) {
  .page-width {
    width:calc(100% - 44px);
  }
  .section-space {
    padding-top:76px;
    padding-bottom:70px;
  }
  .site-header {
    padding:19px 22px;
  }
  .brand {
    gap:9px;
  }
  .brand img {
    width:45px;
    height:45px;
  }
  .brand-wordmark {
    font-size:23px;
  }
  .brand-subtitle {
    font-size:6px;
  }
  .desktop-nav {
    display:none;
  }
  .menu-toggle {
    display:flex;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    background:none;
    border:1px solid var(--line);
    z-index:2;
    cursor:pointer;
  }
  .menu-toggle>span {
    height:1px;
    width:17px;
    background:var(--ink);
    transition:transform .25s;
  }
  .menu-toggle[aria-expanded="true"]>span:first-child {
    transform:translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"]>span:last-child {
    transform:translateY(-4px) rotate(-45deg);
  }
  .mobile-nav {
    display:flex;
    position:absolute;
    top:85px;
    left:22px;
    right:22px;
    background:#f3f1e9;
    border:1px solid var(--line);
    padding:12px 23px;
    flex-direction:column;
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .25s,transform .25s,visibility .25s;
    box-shadow:0 14px 28px rgba(38,60,74,.06);
  }
  .mobile-nav.is-open {
    visibility:visible;
    opacity:1;
    transform:none;
  }
  .mobile-nav a {
    padding:17px 0;
    display:flex;
    justify-content:space-between;
    font-family:var(--serif);
    font-size:17px;
    letter-spacing:.1em;
  }
  .mobile-nav a+a {
    border-top:1px solid var(--line);
  }
  .mobile-nav a span {
    font:10px Georgia,serif;
    color:var(--red);
  }
  .hero {
    height:860px;
    height:100svh;
    min-height:730px;
    max-height:950px;
  }
  .hero-art {
    inset:30% -45% 0 -25%;
  }
  .hero-art img {
    object-position:62% 65%;
    opacity:.78;
  }
  .hero-art-wash {
    background:linear-gradient(180deg,var(--paper),rgba(243,241,233,.14) 38%,transparent 65%,var(--paper)),linear-gradient(90deg,rgba(243,241,233,.75),transparent 70%);
  }
  .hero-content {
    padding-top:143px;
    padding-left:7px;
  }
  .hero-eyebrow {
    font-size:9px;
    letter-spacing:.18em;
    margin-bottom:23px;
    gap:10px;
  }
  .hero-kicker-line {
    width:18px;
  }
  .hero-category {
    font-size:18px;
    gap:7px;
  }
  .hero-category span {
    font-size:15px;
  }
  .hero-kicker-divider {
    height:13px;
  }
  .hero h1 {
    font-size:clamp(58px,18.5vw,76px);
    line-height:1.47;
    letter-spacing:.09em;
    margin-left:-4px;
  }
  .hero-seal {
    font-size:9px;
    top:7px;
    left:calc(100% + 5px);
    padding:4px 3px;
  }
  .hero-description {
    font-size:13px;
    line-height:2.1;
    margin-top:19px;
    letter-spacing:.07em;
  }
  .hero-actions {
    gap:28px;
    margin-top:25px;
  }
  .button {
    padding:13px 20px;
    font-size:12px;
    gap:29px;
  }
  .text-link {
    font-size:10px;
  }
  .hero-product {
    font-size:8px;
    margin-top:20px;
    gap:8px;
  }
  .hero-side-note {
    right:24px;
    top:55%;
    font-size:10px;
    gap:16px;
  }
  .hero-side-note i {
    height:39px;
  }
  .hero-bottom {
    bottom:20px;
  }
  .hero-index>span {
    display:none;
  }
  .hero-index b {
    font-size:14px;
  }
  .hero-index {
    gap:0;
  }
  .scroll-cue {
    font-size:8px;
    gap:9px;
  }
  .scroll-cue svg {
    width:13px;
  }
  .motion-toggle {
    font-size:8px;
  }
  .motion-symbol {
    gap:2px;
  }
  .motion-symbol i {
    height:10px;
  }
  .mist {
    width:140%;
    left:0;
    top:60%;
    height:100px;
  }
  .mist-two {
    top:78%;
    left:15%;
  }
  h2 {
    font-size:35px;
    line-height:1.6;
    letter-spacing:.08em;
  }
  .eyebrow {
    font-size:8px;
    gap:10px;
    letter-spacing:.09em;
  }
  .chapter {
    font-size:13px;
  }
  .heading-rule {
    width:18px;
  }
  .section-heading h2 {
    margin-top:25px;
  }
  .section-intro {
    position:static;
    margin-top:22px;
    font-size:13px;
    line-height:2.1;
  }
  .philosophy-composition {
    grid-template-columns:1fr 1fr;
    gap:25px 24px;
    margin-top:35px;
  }
  .brand-art {
    grid-column:1/-1;
    grid-row:1;
    width:min(310px,85%);
    margin:0 auto 10px;
  }
  .art-caption {
    font-size:10px;
    margin-top:-5px;
  }
  .meaning-river {
    padding-left:0;
  }
  .meaning-character {
    font-size:64px;
  }
  .meaning-character>span {
    top:20px;
    margin-left:15px;
    font-size:9px;
  }
  .meaning-copy {
    margin-top:13px;
  }
  .meaning .micro-label {
    font-size:7px;
    letter-spacing:.16em;
    margin-bottom:15px;
  }
  .meaning h3 {
    font-size:16px;
    letter-spacing:0;
    white-space:normal;
  }
  .meaning p:not(.micro-label) {
    font-size:12px;
    line-height:2.1;
    letter-spacing:0;
  }
  .meaning-tag {
    font-size:8px;
    letter-spacing:.04em;
    margin-top:22px;
  }
  .philosophy-footnote {
    margin-top:40px;
    padding-top:23px;
    font-size:10px;
    justify-content:center;
    gap:18px;
  }
  .footnote-en {
    display:none;
  }
  .journey-inner {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:73px;
    padding-bottom:46px;
  }
  .journey .eyebrow {
    font-size:8px;
  }
  .journey h2 {
    font-size:38px;
    margin-top:29px;
  }
  .journey-heading>p:not(.eyebrow) {
    font-size:13px;
    margin-top:21px;
  }
  .light-link {
    margin-top:20px;
  }
  .journey-principles {
    padding-top:10px;
  }
  .principle {
    gap:20px;
    padding-block:23px;
  }
  .principle h3 {
    font-size:22px;
  }
  .principle p {
    font-size:12px;
  }
  .principle-index {
    font-size:10px;
  }
  .principle-mark {
    font-size:58px;
    right:7px;
  }
  .journey-bottom {
    font-size:7px;
    padding-block:19px;
    gap:15px;
  }
  .journey-bottom>span:last-child {
    display:none;
  }
  .journey-seal {
    font-size:9px;
  }
  .journey-landscape {
    background-position:70% center;
    opacity:.32;
  }
  .journey-waves {
    inset:15% -90%;
    opacity:.12;
  }
  .download-heading {
    display:block;
    margin-bottom:32px;
  }
  .download-heading h2 {
    font-size:31px;
    line-height:1.65;
    margin-top:26px;
    letter-spacing:.04em;
  }
  .download-heading h2>span {
    display:block;
  }
  .download-heading>p {
    margin-top:22px;
    font-size:13px;
  }
  .platform-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .platform {
    padding:25px 16px 24px;
  }
  .platform+.platform {
    border-left:0;
  }
  .platform:nth-child(even) {
    border-left:1px solid var(--line);
  }
  .platform:nth-child(n+3) {
    border-top:1px solid var(--line);
  }
  .platform-top {
    margin-bottom:22px;
  }
  .platform-icon {
    width:28px;
    height:28px;
  }
  .platform-number {
    font-size:7px;
  }
  .platform h3 {
    font-size:22px;
    white-space:normal;
  }
  .platform h3 span {
    font-size:8px;
    margin-left:3px;
  }
  .platform>p {
    font-size:11px;
  }
  .platform button {
    margin-top:24px;
    font-size:11px;
    padding:9px 11px;
  }
  .download-note {
    font-size:9px;
    letter-spacing:0;
    line-height:1.9;
    align-items:baseline;
    gap:8px;
    margin-top:24px;
    text-align:center;
  }
  .closing {
    min-height:260px;
  }
  .closing-content {
    padding-block:52px;
  }
  .closing-verse {
    font-size:28px;
    line-height:1.9;
    letter-spacing:.15em;
    margin-top:18px;
  }
  .closing-verse>span {
    display:block;
  }
  .closing-content .micro-label {
    font-size:7px;
    letter-spacing:.18em;
  }
  .closing-seal {
    margin-top:14px;
  }
  .site-footer {
    display:grid;
    grid-template-columns:1fr auto;
    gap:21px;
    padding-block:25px;
  }
  .footer-brand .brand-wordmark {
    font-size:20px;
  }
  .site-footer>p {
    grid-row:2;
    grid-column:1/-1;
    font-size:7px;
    letter-spacing:.03em;
  }
  .footer-divider {
    margin-inline:7px;
  }
  .back-top {
    font-size:8px;
    gap:13px;
  }
  .footer-brand img {
    width:33px;
    height:33px;
  }
}

@media(max-width:370px) {
  .hero-side-note {
    display:none;
  }
  .hero-content {
    padding-top:140px;
  }
  .hero {
    min-height:710px;
  }
  .meaning h3 {
    font-size:14px;
  }
  .meaning p:not(.micro-label) {
    font-size:11px;
  }
  .meaning-tag {
    font-size:7px;
  }
  .platform {
    padding-inline:12px;
  }
  .platform h3 {
    font-size:20px;
  }
  .platform h3 span {
    font-size:7px;
  }
  .eyebrow {
    gap:7px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .motion-ready .reveal:not(.is-visible) {
    opacity:1;
    transform:none;
  }
}