@font-face {
  font-family: "Radikal";
  src: url("../fonts/Radikal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --raven: #01181b;
  --field: #01535f;
  --powder: #01535f;
  --paper: #f9ffff;
  --white: #f9ffff;
  --line: rgba(1, 24, 27, 0.16);
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;
  --display: "Radikal", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--raven);
  font-family: var(--sans);
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.hero {
  position: relative;
  min-height: 46vh;
  padding: 36px 7vw 48px;
  background-color: #01535f;
  background-image:
    radial-gradient(78% 130% at 100% -8%, rgba(188, 255, 217, 0.5), transparent 46%),
    radial-gradient(58% 100% at 74% 120%, rgba(10, 157, 151, 0.42), transparent 58%),
    linear-gradient(102deg, rgba(1, 24, 27, 0.78) 0%, rgba(1, 61, 72, 0.4) 26%, rgba(1, 83, 95, 0.05) 48%, rgba(112, 188, 199, 0.34) 78%, rgba(188, 255, 217, 0.28) 100%),
    url("patrix_pattern.svg?v=2");
  background-repeat: no-repeat;
  background-size: auto, auto, auto, cover;
  background-position: center;
  color: var(--paper);
}
.hero-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.word {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.9;
  letter-spacing: 0;
}
.eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.hero h1 {
  margin: 8vh 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(72px, 12vw, 148px);
  line-height: 0.86;
  letter-spacing: 0;
}
.hero.home {
  min-height: 0;
  padding-bottom: 64px;
}
.hero.home h1 {
  margin-top: 8vh;
  font-size: clamp(68px, 10.6vw, 176px);
  line-height: 0.86;
}

.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 8vw;
  padding: 72px 7vw 8px;
  align-items: start;
}
.home-intro .lead {
  margin: 0;
  max-width: none;
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 1.22;
}
.home-intro .aside {
  padding-top: 8px;
  font-size: 18px;
  line-height: 1.55;
}
.home-intro .aside p {
  margin: 0 0 1em;
  max-width: 36rem;
}
.home-intro .aside a { text-decoration: underline; }

.home-index {
  margin: 64px 7vw 0;
  padding: 28px 0 96px;
  border-top: 1px solid var(--line);
}
.home-index .label {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}
.home-index ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-index a {
  display: grid;
  grid-template-columns: 2.35em minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.28em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1.08;
  letter-spacing: 0;
  text-decoration: none;
}
.home-index a:hover { text-decoration: none; }
.home-index a:hover span:last-child { text-decoration: underline; }

.sheet { padding: 28px 7vw 80px; }
.toc {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 420px);
  gap: 24px 48px;
  padding: 36px 0 8px;
}
.toc h2 { margin: 0; font-size: 28px; font-weight: 500; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 3px 0; }

.block { padding: 42px 0 8px; border-top: 1px solid var(--line); }
.block-head {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 24px 48px;
  margin-bottom: 28px;
}
.block h2 { margin: 0; font-size: 22px; font-weight: 500; }
.block p { margin: 0; max-width: 38rem; }

.cores, .tones, .accents, .combos, .locks {
  display: grid;
  gap: 18px;
}
.cores { grid-template-columns: 1.15fr 1fr 0.9fr; }
.tones, .accents { grid-template-columns: repeat(4, 1fr); }
.combos, .locks { grid-template-columns: repeat(3, 1fr); }

.swatch, .combo, .lock {
  min-height: 280px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.swatch dl, .meta { margin: 0; font-size: 13px; line-height: 1.45; }
.swatch dt { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.swatch dd { margin: 0; }
.swatch .name { margin: 0 0 8px; font-size: 15px; }
.raven { background: var(--raven); color: var(--paper); }
.field, .powder { background: var(--field); color: var(--paper); }
.pale { background: #e3f3f3; color: #f9ffff; }
.paper {
  background: var(--paper);
  color: var(--raven);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

.lead {
  margin: 18px 0 0;
  max-width: 18em;
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
}
.specimen { margin-top: 18px; overflow: hidden; }
.specimen .face {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 84px);
  line-height: 0.95;
}
.specimen .alpha {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
}
.ja-sample {
  margin: 8px 0 0;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.3;
}
.mark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
}
.space {
  border: 1px dashed rgba(1, 24, 27, 0.35);
  padding: 48px;
  display: flex;
  justify-content: center;
}
.logo-stage, .lock.fit {
  align-items: center;
  justify-content: center;
}
.logo-stage {
  min-height: 280px;
  display: flex;
  padding: 56px 28px;
  background: var(--paper);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.logo-stage img { width: min(100%, 720px); height: auto; }
.lock img { width: min(100%, 280px); height: auto; display: block; }
.lock img.symbol { width: 148px; }
.lock img.wide { width: min(100%, 420px); }
.logo-space { padding: 12%; }
.logo-space img { width: min(100%, 520px); height: auto; }
.shadow-logo { filter: drop-shadow(0 12px 0 rgba(253, 17, 91, 0.9)); }
.bad { transform: scaleX(1.45); display: inline-block; }
.shadowy { text-shadow: 0 8px 0 rgba(253, 17, 91, 0.9); }
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.note { margin-top: 18px; font-size: 14px; max-width: 40rem; }

@media (max-width: 800px) {
  .toc, .block-head, .cores, .tones, .accents, .combos, .locks, .home-intro { grid-template-columns: 1fr; }
  .swatch, .combo, .lock { min-height: 200px; }
  .home-intro { padding-top: 40px; }
  .home-index { margin-top: 36px; }
  .home-index a { font-size: clamp(40px, 12vw, 64px); }
}