:root {
  color-scheme: light;
  --ivory: #f1ede5;
  --ink: #282824;
  --olive: #69695e;
  --gray: #d5d0c6;
  --serif: Georgia, 'Times New Roman', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans JP', 'Yu Gothic', sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
::selection { background: var(--gray); }
.page { max-width: 1600px; margin: auto; padding: 0 6.25%; }
.cover {
  min-height: 670px;
  min-height: max(670px, 80svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 90px 0 76px;
}
.wordmark {
  width: 100%;
  font: 400 clamp(100px, 16.4vw, 260px)/.78 var(--serif);
  letter-spacing: -.065em;
}
.wordmark span { display: block; }
.wordmark span + span { margin-left: 14.4%; margin-top: .09em; }
.philosophy {
  margin-top: 64px;
  font: 400 clamp(24px, 2.5vw, 38px)/1.3 var(--serif);
  letter-spacing: -.025em;
}
.studio { padding: 42px 0 64px; border-top: 1px solid var(--gray); }
.eyebrow {
  color: var(--olive);
  font: 400 10px/1.6 var(--sans);
  letter-spacing: .15em;
}
.description {
  margin-top: 18px;
  font: 400 clamp(15px, 1.5vw, 20px)/2 var(--serif);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.product {
  border-top: 1px solid var(--gray);
  padding: 38px 0 58px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.product > .eyebrow { padding-top: 9px; }
.product h2 { font: 400 clamp(40px, 4.5vw, 64px)/1.1 var(--serif); letter-spacing: -.035em; }
.product-details p { margin-top: 15px; font: 400 16px/1.7 var(--serif); color: var(--olive); }
.return-link { padding: 26px 0 34px; border-top: 1px solid var(--gray); }
.return-link a {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 44px;
  color: var(--ink);
  font: 400 13px/1.6 var(--sans);
  text-decoration: none;
}
.return-link a:hover { text-decoration: underline; text-underline-offset: .35em; }
.return-link a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

@media (max-width: 600px) {
  .page { padding: 0 7%; }
  .cover { min-height: max(510px, 72svh); padding: 78px 0 62px; }
  .wordmark { font-size: clamp(60px, 19vw, 114px); line-height: 1.05; }
  .wordmark span + span { margin-left: 18%; }
  .philosophy { margin-top: 48px; font-size: 25px; }
  .studio { padding: 30px 0 42px; }
  .description { margin-top: 16px; font-size: 16px; }
  .product { grid-template-columns: 1fr; padding: 30px 0 40px; gap: 26px; }
  .product > .eyebrow { padding-top: 0; }
  .product h2 { font-size: 44px; }
  .product-details p { font-size: 15px; }
  .return-link { padding: 22px 0 28px; }
}