:root {
  color-scheme: light;
  --paper: #fafafa;
  --ink: #161616;
  --quiet: #66666b;
  --logo-width: clamp(260px, 30vw, 640px);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
svg { display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home { padding: clamp(100px, 16vh, 180px) 32px 160px; }
.brand-stage { width: var(--logo-width); margin: 0 auto 96px; }
.wordmark { width: 100%; display: block; }
.wordmark svg { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.introduction { max-width: 900px; margin: 0 auto; text-align: center; font-family: "Times New Roman", Times, "Noto Serif", serif; font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.introduction p { margin: 0; }
.works { margin: 64px 0; padding: 0; list-style: none; }
.inspiration { margin: 0; }
.inspiration blockquote { margin: 0; text-wrap: pretty; }
.inspiration blockquote p + p { margin-top: 48px; }
.inspiration figcaption { margin-top: 32px; font-size: .64em; }
.inspiration a { color: inherit; text-decoration: none; }
.inspiration a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.introduction .contact { margin-top: 52px; font-size: .72em; letter-spacing: -.015em; }
.contact a { color: inherit; text-decoration: none; }
.contact a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.company-credit { position: fixed; z-index: 1; top: max(24px, env(safe-area-inset-top)); right: clamp(24px, 3vw, 48px); max-width: calc(100% - 48px); padding: 8px 0 8px 12px; color: var(--quiet); background: var(--paper); font-size: 18px; line-height: 1.5; }
.operator { text-align: center; }
@media (max-width: 600px) {
  :root { --logo-width: min(70vw, 310px); }
  .home { padding: 104px 24px 148px; }
  .brand-stage { margin-bottom: 68px; }
  .introduction { font-size: clamp(26px, 7.4vw, 40px); }
  .works { margin: 44px 0; }
  .introduction .contact { margin-top: 36px; font-size: .8em; }
  .company-credit { top: max(16px, env(safe-area-inset-top)); right: 20px; max-width: calc(100% - 40px); font-size: 16px; }
  .inspiration blockquote p + p { margin-top: 36px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  :root { --logo-width: min(30vw, 360px); }
}