/* ---------------------------------------------------------------
   Christopher Bird

   Built on ma (間) — the interval as an active element. Space
   separates the content here; rules and borders do not. The
   spacing scale is deliberately uneven, so the page has a rhythm
   rather than a uniform stack.

   Type follows the Japanese mincho/gothic division: Noto Serif JP
   (mincho) at light weight for the name and prose, Noto Sans JP
   (gothic) for small utility labels.

   Palette is traditional and restrained — sumi ink, washi paper,
   indigo (藍) for links. Vermilion (朱) appears exactly once.
   --------------------------------------------------------------- */

:root {
  --washi:     #efece5;  /* warm off-white paper */
  --sumi:      #1a1a17;  /* ink */
  --sumi-thin: #6d6a61;  /* diluted ink, for secondary text */
  --ai:        #22406e;  /* indigo */
  --shu:       #b7352d;  /* vermilion — one use only */

  /* Uneven intervals. The largest gap precedes the name. */
  --ma-sm: 1.5rem;
  --ma-md: clamp(2.5rem, 6vw, 4rem);
  --ma-lg: clamp(5rem, 14vh, 9rem);
  --ma-xl: clamp(7rem, 22vh, 14rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --washi:     #14140f;
    --sumi:      #e6e2d6;
    --sumi-thin: #8d887c;
    --ai:        #8ba6d4;
    --shu:       #d4574c;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: "Noto Serif JP", ui-serif, Georgia, serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 2;          /* generous leading — ma between lines too */
  -webkit-font-smoothing: antialiased;
}

/* Content sits off-centre. Symmetry would close the space up. */
.page {
  max-width: 40rem;
  margin: 0;
  padding: 0 2rem 0 clamp(2rem, 12vw, 11rem);
}

/* --- masthead --------------------------------------------------
   One idea per view: the name holds the first screen by itself. */

.masthead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82vh;
  padding: var(--ma-lg) 0 var(--ma-md);
}

.role {
  margin: 0 0 var(--ma-md);
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sumi-thin);
}

.name {
  margin: 0;
  font-weight: 200;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1.3;
  letter-spacing: 0.015em;
}

/* The single point of vermilion on the page. */
.mark { color: var(--shu); }

/* --- bio -------------------------------------------------------- */

.bio {
  margin: 0 0 var(--ma-xl);
  max-width: 32rem;
  color: var(--sumi-thin);
}

/* --- link index ------------------------------------------------- */

/* Held close to the list it labels. When the heading sits as far
   from its own items as the groups sit from each other, it reads as
   floating and the grouping collapses. */
.eyebrow {
  margin: 0 0 var(--ma-sm);
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sumi-thin);
}

/* The interval between groups is larger than the interval between
   items within one — that difference is what marks them as groups,
   in place of a rule or a box. */
.index section + section { margin-top: var(--ma-xl); }

.index ul {
  display: grid;
  gap: var(--ma-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.index a {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.site {
  font-size: 1.25rem;
  line-height: 1.4;
  transition: color 300ms ease;
}

.handle {
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--sumi-thin);
  overflow-wrap: anywhere;
  transition: color 300ms ease;
}

.index a:hover .site,
.index a:focus-visible .site,
.index a:hover .handle,
.index a:focus-visible .handle {
  color: var(--ai);
}

.index a:focus-visible {
  outline: 1px solid var(--ai);
  outline-offset: 0.75rem;
}

/* --- footer ----------------------------------------------------- */

.foot {
  display: flex;
  gap: 2.5rem;
  margin-top: var(--ma-xl);
  padding-bottom: var(--ma-lg);
  font-family: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sumi-thin);
}

/* --- arrival ---------------------------------------------------
   One quiet entrance, staggered so the space settles before the
   content does. Nothing moves after this. */

@media (prefers-reduced-motion: no-preference) {
  .masthead, .bio, .index, .foot {
    animation: settle 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .masthead { animation-delay: 0.1s; }
  .bio      { animation-delay: 0.25s; }
  .index    { animation-delay: 0.4s; }
  .foot     { animation-delay: 0.55s; }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}