/* Mikayo - studio pages. Sumi ink on paper; the bird carries all the color. */

@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --ink: #17191f;
  --ink-soft: #5b6270;
  --paper: #ffffff;
  --rule: #e4e7ec;
  --blue: #3878ff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  font: 400 1rem/1.6 "Montserrat", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.caps { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; }

/* The splash card, as a page */
.card { margin: auto; padding: 64px 24px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.card .bird { width: clamp(96px, 16vw, 132px); height: auto; margin-bottom: 34px; }
.kanji { font-family: "Noto Serif JP", serif; font-size: clamp(1.9rem, 4.6vw, 2.5rem); letter-spacing: 0.32em; margin-right: -0.32em; line-height: 1.2; }
.latin { margin-top: 12px; font-weight: 600; letter-spacing: 0.62em; margin-right: -0.62em; font-size: 0.86rem; }

/* Settle in like the splash: bird eases in, kanji lands, wordmark follows */
@media (prefers-reduced-motion: no-preference) {
  .card .bird { animation: settle 0.9s 0.1s both cubic-bezier(.2,.7,.2,1); }
  .kanji { animation: settle 0.7s 0.55s both cubic-bezier(.2,.7,.2,1); }
  .latin { animation: fade 0.7s 1s both; }
  .after { animation: fade 0.8s 1.3s both; }
}
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* A list of places: hairline rows, label left, arrow right */
.list { width: min(30rem, 100%); margin: 52px auto 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); text-align: left; }
.list li { border-bottom: 1px solid var(--rule); }
.list a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; padding: 16px 4px; transition: background 0.2s; }
.list a:hover { background: #f5f8fc; }
.list a:hover .go { transform: translateX(3px); color: var(--blue); }
.list .icon { width: 40px; height: 40px; display: grid; place-items: center; }
.list .icon img, .list .icon svg { width: 100%; height: auto; }
.list .name { font-weight: 600; }
.list .sub { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.list .go { color: var(--ink-soft); transition: transform 0.2s, color 0.2s; }
.group { width: min(30rem, 100%); margin: 44px auto -36px; color: var(--ink-soft); text-align: left; }

.foot { padding: 28px 24px; text-align: center; color: var(--ink-soft); font-size: 0.8rem; }