@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/noto-serif-jp-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --ivory: #f4f0e5;
  --slate: #485555;
  --olive: #4d5549;
  --haze: #bcc3bd;
  --grass: #a49e7a;
  --edge: clamp(1.5rem, 3.8vw, 4.5rem);
  font-family: "Noto Serif JP", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ivory);
  background: var(--slate);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
::selection { color: #293638; background: #f4f0e5; }

.landscape { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.landscape__image, .landscape__canvas, .landscape__shade, .landscape__grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.landscape__image { object-fit: cover; object-position: 50% 50%; }
.landscape__canvas { opacity: 0; }
.landscape__canvas.is-ready { opacity: 1; }
.landscape__shade {
  background: linear-gradient(180deg, rgb(20 32 39 / 25%) 0%, rgb(31 43 45 / 5%) 30%, rgb(31 43 45 / 2%) 58%, rgb(20 28 29 / 37%) 100%);
}
.landscape__grain {
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.page {
  position: relative; isolation: isolate; min-height: 100svh;
  padding: max(2rem, env(safe-area-inset-top)) var(--edge) max(2.7rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between; gap: 12rem;
}
.header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.wordmark {
  margin: 0; font-family: inherit; font-optical-sizing: auto;
  font-size: clamp(1rem, 1.75vw, 1.5rem); font-weight: 400; font-style: normal;
  line-height: 1.4; letter-spacing: .015em; white-space: nowrap;
}
.contact { color: inherit; font-size: .875rem; text-decoration: none; letter-spacing: .035em; padding: .35rem 0; }
.contact::after { content: ""; display: block; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; margin-top: .3rem; }
.contact:hover::after, .contact:focus-visible::after { transform: scaleX(1); }
.contact:focus-visible, .motion-control:focus-visible { outline: 1px solid var(--ivory); outline-offset: 6px; border-radius: 2px; }
.footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 2.5rem; }
.investment-thesis {
  max-width: 34rem; margin: 0; text-align: right;
}
.investment-thesis h2 { margin: 0 0 1rem; font-size: clamp(1.8rem, 2.7vw, 2.4rem); font-weight: 400; line-height: 1.35; letter-spacing: -.015em; }
.investment-thesis p { margin: 0; font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.75; font-weight: 400; text-wrap: pretty; }
.place { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.place p { margin: 0; font-size: 1rem; letter-spacing: .035em; line-height: 1.75; }
.motion-control { border: 1px solid rgb(244 240 229 / 24%); background: transparent; color: inherit; border-radius: 50%; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.motion-control:hover { border-color: rgb(244 240 229 / 65%); background: rgb(244 240 229 / 7%); }
.motion-control__play, .motion-control[aria-pressed="true"] .motion-control__pause { display: none; }
.motion-control[aria-pressed="true"] .motion-control__play { display: block; }

@media (max-width: 600px) {
  .page { padding-top: max(1.75rem, env(safe-area-inset-top)); padding-bottom: max(1.65rem, env(safe-area-inset-bottom)); gap: 4rem; }
  .footer { flex-direction: column; align-items: stretch; gap: 1.8rem; }
  .investment-thesis { order: -1; align-self: flex-end; max-width: 25rem; }
  .place { align-self: flex-start; }
  .motion-control { width: 2.75rem; height: 2.75rem; }
  .landscape__shade { background: linear-gradient(180deg, rgb(20 32 39 / 29%) 0%, rgb(31 43 45 / 3%) 36%, rgb(20 28 29 / 16%) 65%, rgb(20 28 29 / 54%) 100%); }
}
@media (max-width: 360px) {
  .header { gap: .75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .header, .footer { animation: arrive 1.4s ease-out both; }
  .footer { animation-delay: .12s; }
  @keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}