:root {
  --ink: #090b10;
  --white: #f4f2ec;
  --mint: #e3c79a;
  --paper: #f7f5ef;
  --text: #252620;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
}
header {
  height: 74px;
  background: var(--ink);
}
header .brand {
  font-size: 29px;
  letter-spacing: -0.045em;
}
header .brand small {
  display: none;
}
header nav {
  letter-spacing: 0.08em;
}
.hero {
  min-height: calc(100svh - 74px);
  background: radial-gradient(
    ellipse at 74% 50%,
    #142132 0%,
    #0e121d 42%,
    #090b10 76%
  );
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.045em;
  font-size: clamp(43px, 6.5vw, 106px);
  line-height: 1.18;
  margin: 27px 0;
}
.hero .subtitle {
  color: #c9c7c2;
}
.hero .cta {
  border-radius: 4px;
  background: #10131b;
  border-color: #e3c79a75;
  color: var(--white);
  padding: 14px 17px;
}
.hero .cta:hover {
  background: var(--mint);
  color: var(--ink);
}
.hero .cta span {
  color: var(--mint);
}
.hero .cta:hover span {
  color: var(--ink);
}
.caption,
.scroll {
  bottom: 45px;
  z-index: 1;
}
.planet i,
.planet b {
  border-color: #dbbd8c70;
}
.site-directory {
  background: var(--paper);
  color: var(--text);
}
.site-directory .label,
.vision.editorial .label,
.vision.editorial .vision-copy > .eyebrow,
.approach .label,
.approach .eyebrow,
.principles li > span {
  color: #795b39;
}
.site-directory h2 {
  font: 500 clamp(33px, 4.8vw, 64px) / 1.25 var(--serif);
  margin: 15px 0 34px;
}
.site-directory ul {
  gap: 28px;
}
.site-directory a {
  align-items: center;
  min-height: 103px;
  padding: 18px 0;
  border-color: #c8bdaa;
  border-bottom: 1px solid #c8bdaa;
}
.site-directory a:hover {
  color: #795b39;
}
.directory-item {
  display: grid;
  gap: 9px;
}
.directory-item small {
  color: #795b39;
  font:
    11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
}
.directory-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid #c8bdaa;
  border-radius: 50%;
  transition:
    background 0.18s,
    color 0.18s;
}
.site-directory a:hover .directory-arrow {
  background: #252620;
  color: var(--paper);
}
.breadcrumb {
  background: var(--ink);
}
.editorial h1 {
  font-family: var(--serif);
  font-weight: 600;
}
.vision.editorial {
  background: #eee9de;
  color: var(--text);
}
.vision.editorial .orbit {
  border-color: #96775043;
  box-shadow:
    0 0 0 28px #96775012,
    0 0 0 70px #9677500d,
    0 0 0 120px #96775009;
}
.approach {
  background: var(--paper);
  color: var(--text);
}
.company.editorial {
  background: radial-gradient(ellipse at 100% 0%, #25241f, #121318 67%);
}
@media (max-width: 650px) {
  header {
    height: 63px;
  }
  .hero {
    min-height: calc(100svh - 63px);
    padding-bottom: 82px;
  }
  .hero h1 {
    margin: 13px 0 17px;
  }
  .scroll {
    bottom: 32px;
  }
  .site-directory ul {
    gap: 0;
  }
  .site-directory a {
    min-height: 76px;
    border-bottom: 0;
  }
  .site-directory li:last-child a {
    border-bottom: 1px solid #c8bdaa;
  }
}
@media (prefers-reduced-motion: reduce) {
  .directory-arrow {
    transition: none;
  }
}