:root {
  --ink: #151515;
  --paper: #f7f7f2;
  --white: #ffffff;
  --red: #e31b23;
  --vermilion: #ff4b16;
  --blue: #0057b8;
  --cobalt: #1434cb;
  --yellow: #ffd500;
  --gap: clamp(6px, .65vw, 11px);
  --pad: clamp(10px, 1.2vw, 20px);
  --columns: 1.05fr 1.05fr 1.2fr .8fr .8fr;
  --rows: 1.1fr 1fr 1fr 36px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  min-width: 320px;
  height: 100%;
  background: var(--ink);
}

body {
  overflow: hidden;
  color: var(--ink);
  font-family: "Source Han Sans JP", "源ノ角ゴシック", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-weight: 500;
  letter-spacing: .015em;
}

.profile {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  padding: var(--gap);
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows: var(--rows);
  grid-template-areas:
    "identity identity identity coral sky"
    "about about books books lime"
    "violet yellow video video video"
    "contact contact contact pink pink";
  gap: var(--gap);
  background: var(--ink);
}

.identity,
.card,
.contact {
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 2;
}

.motion-board {
  position: absolute;
  z-index: 0;
  inset: var(--gap);
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows: var(--rows);
  grid-template-areas:
    "identity identity identity coral sky"
    "about about books books lime"
    "violet yellow video video video"
    "contact contact contact pink pink";
  gap: var(--gap);
  pointer-events: none;
  overflow: hidden;
}

.puzzle-slot,
.color-block {
  min-width: 0;
  min-height: 0;
}

.puzzle-slot {
  background: var(--white);
}

.color-block {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1;
  transform-origin: top left;
  will-change: transform;
  transition: transform 620ms cubic-bezier(.22, .8, .2, 1);
}

.motion-board.is-settling .color-block {
  transition-duration: 760ms;
}

.identity,
.card {
  background: var(--paper);
  padding: var(--pad);
}

.identity {
  grid-area: identity;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, .8fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(18px, 3vw, 52px);
  align-items: end;
}

.eyebrow,
.index,
.contact {
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  align-self: start;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 6.2vw, 104px);
  line-height: .78;
  letter-spacing: -.065em;
  font-weight: 900;
  align-self: end;
}

.meta {
  align-self: end;
  padding-bottom: 2px;
  border-top: 2px solid var(--ink);
}

.meta p {
  margin: 0;
  padding: 7px 0 6px;
  border-bottom: 1px solid rgba(21, 21, 21, .28);
  font-size: clamp(10px, .86vw, 13px);
  line-height: 1.35;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.index {
  margin: 0 0 12px;
}

h2 {
  margin: 0;
  font-size: clamp(20px, 2.3vw, 38px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 850;
}

.card > p:last-of-type {
  margin: auto 0 0;
  max-width: 34em;
  font-size: clamp(10px, .95vw, 14px);
  line-height: 1.6;
}

.books ul {
  list-style: none;
  margin: clamp(10px, 1.4vh, 18px) 0 0;
  padding: 0;
  border-top: 1px solid rgba(21, 21, 21, .35);
}

.books li {
  padding: clamp(5px, .7vh, 9px) 0;
  border-bottom: 1px solid rgba(21, 21, 21, .25);
  font-size: clamp(9px, .82vw, 12px);
  line-height: 1.2;
}

.slot-coral { grid-area: coral; }
.slot-sky { grid-area: sky; }
.slot-lime { grid-area: lime; }
.slot-violet { grid-area: violet; }
.slot-yellow { grid-area: yellow; }
.slot-pink { grid-area: pink; }

.red { background: var(--red); }
.blue { background: var(--blue); }
.yellow { background: var(--yellow); }
.cobalt { background: var(--cobalt); }
.vermilion { background: var(--vermilion); }

.about { grid-area: about; }
.books { grid-area: books; }
.video { grid-area: video; }

.contact {
  grid-area: contact;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
  background: var(--white);
  white-space: nowrap;
}

.contact span {
  color: rgba(21, 21, 21, .55);
}

.contact a {
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .05em;
}

.contact a:hover,
.contact a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

::selection {
  background: var(--blue);
  color: var(--white);
}

@media (max-width: 760px) {
  :root {
    --gap: 5px;
    --pad: 10px;
    --columns: 1fr 1fr .78fr;
    --rows: 1.15fr .95fr 1fr 32px;
  }

  .profile {
    grid-template-areas:
      "identity identity coral"
      "about books books"
      "violet video video"
      "contact contact pink";
  }

  .motion-board {
    grid-template-areas:
      "identity identity coral"
      "about books books"
      "violet video video"
      "contact contact pink";
  }

  .slot-sky,
  .slot-lime,
  .slot-yellow,
  .color-block[data-home="1"],
  .color-block[data-home="2"] { display: none; }

  .identity {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    row-gap: 7px;
  }

  .eyebrow { grid-column: 1; }

  h1 {
    font-size: clamp(34px, 11vw, 58px);
  }

  .meta {
    padding: 0;
  }

  .meta p {
    padding: 3px 0;
    font-size: clamp(7px, 2.2vw, 9px);
  }

  .eyebrow,
  .index,
  .contact {
    font-size: clamp(7px, 2vw, 9px);
  }

  h2 {
    font-size: clamp(15px, 4.3vw, 23px);
  }

  .card > p:last-of-type,
  .books li {
    font-size: clamp(7px, 2.1vw, 9px);
    line-height: 1.35;
  }

  .books ul {
    margin-top: 5px;
  }

  .books li {
    padding: 4px 0;
  }

  .contact {
    gap: 10px;
    overflow: hidden;
  }

  .contact a {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-height: 640px) {
  :root {
    --rows: 1.05fr .95fr .95fr 30px;
  }

  .profile {
    grid-template-rows: var(--rows);
  }

  .identity,
  .card {
    padding: 9px 11px;
  }

  h1 {
    font-size: clamp(36px, 5.4vw, 72px);
  }

  h2 {
    font-size: clamp(17px, 1.9vw, 28px);
  }

  .meta p,
  .card > p:last-of-type,
  .books li {
    font-size: 9px;
  }

  .books li {
    padding: 3px 0;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .color-block {
    transition: none;
  }
}