/* 澄羽 靖 — 潮と光。値はすべて tokens.css を参照する（design/direction.md が正）。
   順：base → layout → components → motion → utilities。スマホから書いて min-width で広げる。 */
@layer base, layout, components, motion, utilities;

/* ================================================================ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { background: var(--color-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    position: relative;
    font-family: var(--font-ja);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  ul, ol { list-style: none; }
  a { color: inherit; }
  img { display: block; max-width: 100%; height: auto; }
  small { font-size: inherit; }
  p { text-wrap: pretty; line-break: strict; }
  h1, h2, h3 {
    font-size: inherit;
    font-weight: 400;
    font-feature-settings: "palt";
    word-break: auto-phrase;
    text-wrap: balance;
  }
  [lang="en"] { font-family: var(--font-en); }

  :focus-visible {
    outline: var(--rule) solid var(--focus, var(--color-accent));
    outline-offset: 6px;
  }
  ::selection { background: var(--color-sky); color: var(--color-ink); }
  .on-sea, .site-footer { --focus: var(--color-accent-on-sea); }
  .on-sea ::selection, .site-footer ::selection { background: var(--color-accent-on-sea); color: var(--color-sea); }
}

/* ================================================================ layout */
@layer layout {
  .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .grid > * { grid-column: 1 / -1; min-width: 0; }
}

/* ================================================================ components */
@layer components {

  /* ---------- 共通：リンクの下線（左から伸びる） ---------- */
  .gnav a,
  .about__name,
  .site-footer__links a span[lang],
  .site-footer__nav a,
  .shore__title,
  .ph__t {
    background-image: linear-gradient(var(--line-c, var(--color-accent)), var(--line-c, var(--color-accent)));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 var(--rule);
    transition: background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
  }

  /* 常時下線のリンク（作品の紹介を読む／作品のページ／404 の戻り先） */
  .shore__more a,
  .work__url a,
  .more-link {
    text-decoration: underline var(--rule) var(--more-c, var(--color-accent));
    text-decoration-thickness: var(--rule);
    text-underline-offset: 0.4em;
    transition: color var(--dur-1) var(--ease);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .shore__more a:hover, .work__url a:hover,
  .shore__more a:focus-visible, .work__url a:focus-visible { color: var(--color-accent-on-sea); }
  .more-link:hover, .more-link:focus-visible { color: var(--color-accent); }

  /* ---------- スキップリンク ---------- */
  .skip {
    position: absolute;
    z-index: 20;
    top: var(--space-1);
    left: var(--gutter);
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-bg);
    border: var(--rule) solid var(--color-ink);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-4)));
  }
  .skip:focus { transform: none; }

  /* ---------- ヘッダー ---------- */
  .site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    height: var(--header-h);
    color: var(--color-ink);
  }
  .site-header__inner { height: 100%; display: flex; align-items: center; }

  .brand {
    display: inline-flex;
    align-items: baseline;
    padding-block: var(--space-1);
    min-height: 44px;
    align-content: center;
    line-height: 1.75;
    text-decoration: none;
  }
  .brand__ja {
    font-size: 1rem;
    letter-spacing: 0.16em;
    font-feature-settings: "palt";
    transition: color var(--dur-1) var(--ease);
  }
  .brand__en {
    display: none;
    margin-inline-start: var(--space-2);
    font-size: 1rem;
    letter-spacing: var(--ls-en);
    color: var(--color-ink);
  }
  .brand:hover .brand__ja, .brand:focus-visible .brand__ja { color: var(--color-accent); }

  .gnav { margin-inline-start: auto; }
  .gnav ul {
    display: flex;
    gap: var(--space-3);
    /* 字間の最後の 0.2em と a の左右の 0.25rem を戻して、字面の右端を gutter にそろえる */
    margin-inline-end: calc(-1 * var(--ls-nav) - 0.25rem);
  }
  .gnav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.25rem;
    font-size: var(--fs-nav);
    letter-spacing: var(--ls-nav);
    line-height: var(--lh-tight);
    font-feature-settings: "palt";
    text-decoration: none;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left calc(50% + 0.85em);
  }
  .gnav a[aria-current="page"],
  .gnav a:hover,
  .gnav a:focus-visible { background-size: calc(100% - var(--ls-nav)) var(--rule); }

  /* ---------- ラベル ---------- */
  .label {
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-label);
    line-height: var(--lh-tag);
    color: var(--color-muted);
    margin-bottom: var(--space-5);
  }
  .label--sea { color: var(--color-on-sea-muted); }

  /* ================================================ ① ファーストビュー */
  .fv {
    --en-gap: var(--space-3);   /* 名前の字面の下端 → 欧文名 */
    --lower-gap: var(--space-6); /* 欧文名 → 一言 */
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-rows: var(--horizon) auto;
    background: var(--color-bg);
  }
  .fv__sky { grid-row: 1; background: var(--color-sky); transform-origin: top; }
  .fv__line {
    position: absolute;
    inset-inline: 0;
    top: var(--horizon);
    height: var(--rule);
    background: var(--color-accent);
    transform-origin: left;
  }
  .fv__namebox {
    position: absolute;
    inset-inline: 0;
    /* かな（1.5rem）＋間（1.5rem）＋名前の上 62% ぶん、水平線より上に出す */
    top: calc(var(--horizon) - var(--fs-name) * .62 - var(--space-5));
    padding-inline: var(--gutter);
    max-width: var(--max);
    margin-inline: auto;
  }
  .fv__kana {
    font-size: var(--fs-nav);
    line-height: 1.6;
    letter-spacing: var(--ls-kana);
    margin-bottom: var(--space-3);
    font-feature-settings: "palt";
  }
  .fv__name {
    font-size: var(--fs-name);
    line-height: var(--lh-tight);
    letter-spacing: 0.02em;
    font-feature-settings: "palt";
    white-space: nowrap;
    text-wrap: nowrap;
    margin-inline-start: -0.04em;
  }
  .fv__sp { display: inline-block; width: .22em; }
  .fv__en {
    margin-top: var(--en-gap);
    font-size: var(--fs-lead);
    line-height: 1.4;
    letter-spacing: var(--ls-en);
  }
  .fv__lower {
    grid-row: 2;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gap);
    grid-template-rows: auto auto;
    align-content: space-between;
    row-gap: var(--space-6);
    /* 名前の下にはみ出した分＋欧文名（上の間を含む）＋4rem */
    padding-top: calc(var(--fs-name) * .38 + var(--en-gap) + var(--fs-lead) * 1.4 + var(--lower-gap));
    padding-bottom: var(--space-4);
  }
  .fv__lower > * { grid-column: 1 / -1; }
  .fv__tag {
    grid-row: 1;
    font-size: var(--fs-tag);
    line-height: var(--lh-tag);
    letter-spacing: var(--ls-tag);
    font-feature-settings: "palt";
    word-break: auto-phrase;
    text-wrap: balance;
    max-width: 14em;
  }
  .fv__seg { display: inline-block; }
  .fv__foot {
    grid-row: 2;
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
  }
  .fv__role {
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    line-height: var(--lh-tag);
    color: var(--color-muted);
  }
  .fv__icon { width: 72px; height: 72px; object-fit: contain; }
  .fv__icon--pixel { image-rendering: pixelated; }

  /* ================================================ ② 紹介とリンク */
  .about { padding-block: var(--section); }
  .about__bio > * + * { margin-top: var(--space-3); }
  /* 本文も文節で改行する。pretty は文節の途中で折り返すことがあるので wrap に戻す */
  .about__bio p { max-width: 30em; word-break: auto-phrase; text-wrap: wrap; }
  .about__bio .about__lead {
    max-width: 24em;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    letter-spacing: 0.06em;
  }
  /* 奥付風の一行（屋号） */
  .about__bio .about__imprint {
    margin-top: var(--space-5);
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    line-height: var(--lh-tag);
    color: var(--color-ink);
  }
  .about__imprint-label { margin-inline-end: var(--space-2); color: var(--color-muted); }
  .about__imprint-kana { color: var(--color-muted); letter-spacing: 0.12em; }
  .about__bio + .about__links { margin-top: var(--space-7); }
  .about__links li + li { margin-top: var(--space-1); }
  .about__links a {
    display: inline-flex;
    align-items: baseline;
    min-height: 48px;
    text-decoration: none;
    color: var(--color-ink);
    transition: color var(--dur-1) var(--ease);
  }
  .about__name {
    font-size: var(--fs-link);
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .about__links small {
    margin-inline-start: var(--space-2);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    color: var(--color-muted);
  }
  .about__links a:hover, .about__links a:focus-visible { color: var(--color-accent); }
  .about__links a:hover .about__name,
  .about__links a:focus-visible .about__name { background-size: 100% var(--rule); }

  /* ================================================ ③ 作品帯（潮） */
  .shore {
    --line-c: var(--color-accent-on-sea);
    --more-c: var(--color-accent-on-sea);
    background: var(--color-sea);
    color: var(--color-on-sea);
    padding-block: var(--section);
  }
  .shore__list li { border-top: var(--rule) solid var(--color-line-on-sea); }
  .shore__list li:last-child { border-bottom: var(--rule) solid var(--color-line-on-sea); }
  .shore__list a {
    display: grid;
    row-gap: var(--space-1);
    padding-block: var(--space-4);
    color: inherit;
    text-decoration: none;
  }
  .shore__title {
    justify-self: start;
    font-weight: 600;
    font-size: var(--fs-display-m);
    line-height: 1.1;
    letter-spacing: 0.04em;
    font-feature-settings: "palt";
  }
  .shore__list a:hover .shore__title,
  .shore__list a:focus-visible .shore__title { background-size: 100% var(--rule); }
  .shore__reading {
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-reading);
    color: var(--color-on-sea-muted);
  }
  .shore__kind {
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    color: var(--color-on-sea-muted);
  }
  .shore__kind [lang="en"] { letter-spacing: 0.08em; }
  .shore__more {
    margin-top: var(--space-5);
    font-size: var(--fs-base);
    color: var(--color-on-sea);
  }

  /* ================================================ works / 404 の帯 */
  .ph {
    position: relative;
    display: grid;
    grid-template-rows: var(--horizon-page) auto;
    background: var(--color-bg);
  }
  .ph--404 { --horizon-page: clamp(16rem, 46svh, 26rem); }
  .ph__sky { grid-row: 1; background: var(--color-sky); transform-origin: top; }
  .ph__line {
    position: absolute;
    inset-inline: 0;
    top: var(--horizon-page);
    height: var(--rule);
    background: var(--color-accent);
    transform-origin: left;
  }
  .ph__title, .ph__num {
    position: absolute;
    left: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
    line-height: 1;
    white-space: nowrap;
  }
  .ph__title {
    top: calc(var(--horizon-page) - var(--fs-display-l) * .62);
    font-size: var(--fs-display-l);
    letter-spacing: 0.04em;
    margin-inline-start: -0.04em;
  }
  .ph__num {
    top: calc(var(--horizon-page) - var(--fs-name) * .62);
    font-size: var(--fs-name);
    letter-spacing: 0.02em;
    font-variant-numeric: lining-nums;
    margin-inline-start: -0.015em;
  }
  .ph__sand {
    grid-row: 2;
    width: 100%;
    padding-top: calc(var(--fs-display-l) * .38 + var(--space-6));
    padding-bottom: var(--space-6);
  }
  /* 目次を出さない（1作）ときは白砂の帯を余白だけにしない */
  .ph--bare .ph__sand { padding-bottom: 0; }
  .ph--bare + .works { padding-top: var(--space-7); }
  .ph--404 .ph__sand {
    padding-top: calc(var(--fs-name) * .38 + var(--space-6));
    padding-bottom: var(--section);
  }

  /* 1px の線と、線をまたぐ字を整数の位置に置く（小数位置でのにじみを防ぐ） */
  @supports (top: round(1.5px, 1px)) {
    .fv { grid-template-rows: round(var(--horizon), 1px) auto; }
    .ph { grid-template-rows: round(var(--horizon-page), 1px) auto; }
    .fv__line { top: round(var(--horizon), 1px); }
    .fv__namebox { top: calc(round(var(--horizon), 1px) - var(--fs-name) * .62 - var(--space-5)); }
    .ph__line { top: round(var(--horizon-page), 1px); }
    .ph__title { top: calc(round(var(--horizon-page), 1px) - var(--fs-display-l) * .62); }
    .ph__num { top: calc(round(var(--horizon-page), 1px) - var(--fs-name) * .62); }
  }

  /* 作品の目次（2作以上のとき） */
  .ph__index a {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    min-height: 44px;
    align-content: center;
    padding-block: var(--space-1);
    text-decoration: none;
  }
  .ph__no {
    font-style: italic;
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    color: var(--color-muted);
  }
  .ph__t { font-feature-settings: "palt"; }
  .ph__index a:hover .ph__t, .ph__index a:focus-visible .ph__t { background-size: 100% var(--rule); }

  /* 404 の本文 */
  .nf__title {
    font-size: var(--fs-tag);
    line-height: var(--lh-tag);
    letter-spacing: var(--ls-tag);
  }
  .nf__text { margin-top: var(--space-2); max-width: 34em; word-break: auto-phrase; text-wrap: wrap; }
  .nf__links {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .nf__links a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ================================================ 作品の面（潮） */
  .works {
    --line-c: var(--color-accent-on-sea);
    --more-c: var(--color-accent-on-sea);
    background: var(--color-sea);
    color: var(--color-on-sea);
    padding-block: var(--section);
  }
  .work + .work {
    margin-top: var(--section);
    padding-top: var(--space-5);
    border-top: var(--rule) solid var(--color-line-on-sea);
  }
  .work__no {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-style: italic;
    font-size: var(--fs-lead);
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: var(--color-on-sea-muted);
  }
  .work__no::after {
    content: "";
    flex: 1;
    height: var(--rule);
    background: var(--color-line-on-sea);
  }
  .work__img { width: 100%; margin-bottom: var(--space-5); }
  .work__title {
    font-weight: 600;
    line-height: .95;
    letter-spacing: 0.04em;
    margin-inline-start: -0.05em;
    font-size: var(--fs-display-m);
  }
  .work[data-size="xl"] .work__title { font-size: var(--fs-title-xl); white-space: nowrap; }
  .work[data-size="l"] .work__title { font-size: var(--fs-title-l); }
  .work__reading {
    margin-top: var(--space-3);
    font-size: var(--fs-base);
    letter-spacing: var(--ls-reading);
    color: var(--color-on-sea-muted);
  }
  .work__body { margin-top: var(--space-6); }
  .work__meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-4);
    padding-top: var(--space-2);
    border-top: var(--rule) solid var(--color-line-on-sea);
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    color: var(--color-on-sea-muted);
  }
  .work__year { letter-spacing: 0.08em; }
  .work__pub-label { margin-inline-end: var(--space-1); }
  .work__desc {
    margin-top: var(--space-4);
    max-width: 34em;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
  }
  .work__desc p { word-break: auto-phrase; text-wrap: wrap; }
  .work__desc .nw { white-space: nowrap; }
  .work__desc > * + * { margin-top: var(--space-3); }
  .work__url { margin-top: var(--space-5); }

  /* ================================================ フッター（潮） */
  .site-footer {
    --line-c: var(--color-accent-on-sea);
    background: var(--color-sea);
    color: var(--color-on-sea-muted);
    border-top: var(--rule) solid var(--color-line-on-sea);
    padding-top: var(--space-6);
    padding-bottom: var(--space-4);
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    line-height: var(--lh-tag);
  }
  .site-footer--plain { border-top: 0; }
  .site-footer__grid { row-gap: var(--space-4); align-items: baseline; }
  .site-footer__ja { color: var(--color-on-sea); font-feature-settings: "palt"; }
  .site-footer__name [lang="en"] { margin-inline-start: var(--space-1); letter-spacing: var(--ls-en); }
  /* 屋号（奥付の1行）。かなは字間を広げた小さな字 */
  .site-footer__imprint { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); margin-top: var(--space-1); }
  .site-footer__imprint .site-footer__ja { color: var(--color-on-sea-muted); }
  .site-footer__kana { font-size: var(--fs-xs); letter-spacing: var(--ls-reading); color: var(--color-on-sea-muted); }
  .site-footer__nav ul { display: flex; flex-wrap: wrap; column-gap: var(--space-4); }
  .site-footer__nav a,
  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
  }
  .site-footer__nav a { background-position: left calc(50% + 0.85em); }
  .site-footer__nav a[aria-current="page"] { color: var(--color-on-sea); }
  .site-footer__nav a:hover, .site-footer__nav a:focus-visible { background-size: calc(100% - 0.16em) var(--rule); color: var(--color-on-sea); }
  .site-footer__links { display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
  .site-footer__links a { font-size: var(--fs-lead); letter-spacing: 0.04em; color: var(--color-on-sea); }
  .site-footer__links a span[lang] { line-height: 1.2; }
  .site-footer__links a:hover span[lang],
  .site-footer__links a:focus-visible span[lang] { background-size: 100% var(--rule); }
  .site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--color-accent-on-sea); }
  .site-footer__copy { font-size: var(--fs-xs); letter-spacing: var(--ls-en); }

  /* ------------------------------------------------ 〜767px */
  @media (max-width: 767px) {
    .shore__title { font-size: var(--fs-display-l); }
  }

  /* ------------------------------------------------ 768px〜 */
  @media (min-width: 768px) {
    .brand__en { display: inline; }

    .fv { --en-gap: var(--space-4); }

    .fv__tag { grid-column: 4 / -1; }
    .fv__foot { grid-column: 1 / 4; }
    .fv__icon { width: 96px; height: 96px; }

    .about__bio, .about .label { grid-column: 1 / 8; }
    .about__links { grid-column: 3 / -1; }

    .shore__list a {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      column-gap: var(--space-4);
      align-content: end;
    }
    .shore__title { grid-row: 1 / 3; align-self: end; }
    .shore__reading { grid-column: 2; grid-row: 1; align-self: end; }
    .shore__kind { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 0.2em; }
    .shore__list a:not(:has(.shore__kind)) .shore__reading,
    .shore__list a:not(:has(.shore__reading)) .shore__kind { grid-row: 1 / 3; }

    .ph__index, .nf { grid-column: 4 / -1; }

    .work__body { grid-column: 3 / -1; }

    .site-footer__name { grid-column: 1 / 4; }
    .site-footer__nav { grid-column: 4 / 6; }
    .site-footer__links { grid-column: 7 / -1; }
    .site-footer__copy { grid-column: 1 / -1; justify-self: end; margin-top: var(--space-5); }
  }

  /* ------------------------------------------------ 1080px〜 */
  @media (min-width: 1080px) {
    .gnav ul { gap: var(--space-5); }

    .fv { --en-gap: var(--space-5); --lower-gap: var(--space-5); }
    /* 肩書きは一言と同じ行に置き、一言の最終行のベースラインにそろえる */
    .fv__lower { grid-template-rows: auto; align-items: last baseline; }
    .fv__tag { grid-column: 7 / -1; grid-row: 1; align-self: last baseline; }
    .fv__foot { grid-column: 1 / 7; grid-row: 1; align-self: last baseline; }
    .fv__icon { width: 120px; height: 120px; }

    .about .label { grid-column: 1 / -1; }
    .about__bio { grid-column: 1 / 7; grid-row: 2; }
    .about__links { grid-column: 8 / -1; grid-row: 2; }
    .about__bio + .about__links { margin-top: 0; }
    .about--single .about__bio, .about--single .about__links { grid-column: 1 / 8; }

    .shore .label { grid-column: 1 / 3; grid-row: 1; margin-bottom: 0; padding-top: var(--space-4); }
    .shore__list { grid-column: 3 / -1; grid-row: 1; }
    .shore__more { grid-column: 3 / -1; }
    .shore__list a {
      grid-template-columns: auto auto 1fr;
      grid-template-rows: auto;
      align-items: baseline;
      align-content: normal;
    }
    .shore__title, .shore__reading, .shore__kind { grid-row: 1; align-self: baseline; }
    .shore__reading { grid-column: 2; }
    .shore__kind { grid-column: 3; justify-self: end; padding-bottom: 0; }
    .shore__list a { padding-block: var(--space-3); }
    .shore__list a:not(:has(.shore__kind)) .shore__reading,
    .shore__list a:not(:has(.shore__reading)) .shore__kind { grid-row: 1; }

    .ph__index, .nf { grid-column: 7 / -1; }

    /* 1〜3字：題と読み 1〜7列、本文 8〜12列（下端をそろえる） */
    .work[data-size="xl"] .work__head { grid-column: 1 / 8; grid-row: 3; }
    .work[data-size="xl"] .work__body { grid-column: 8 / -1; grid-row: 3; align-self: end; margin-top: 0; }
    /* 偶数番目は左右を入れ替える */
    .work[data-size="xl"]:nth-child(even) .work__head { grid-column: 6 / -1; text-align: end; }
    .work[data-size="xl"]:nth-child(even) .work__title { margin-inline: 0 -0.05em; }
    .work[data-size="xl"]:nth-child(even) .work__body { grid-column: 1 / 6; }
    /* 4字以上：題は全幅、本文は 7〜12列で下に */
    .work:not([data-size="xl"]) .work__body { grid-column: 7 / -1; }
    .work__img { grid-column: 1 / 8; }

    .site-footer__name { grid-column: 1 / 5; }
    .site-footer__nav { grid-column: 7 / 10; }
    .site-footer__links { grid-column: 10 / -1; }
  }
}

/* ================================================================ motion */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* index：空が降り、ヘッダーが現れ、水平線が走り、名前が浮かぶ（合計 2.4 秒で静止） */
    .page-index .fv__sky { animation: sky var(--dur-5) var(--ease) 0ms both; }
    .page-index .site-header { animation: fade 600ms var(--ease) 200ms both; }
    .page-index .fv__line { animation: line var(--dur-4) var(--ease) 700ms both; }
    .page-index .fv__name { animation: rise 1100ms var(--ease) 900ms both; }
    .page-index .fv__kana,
    .page-index .fv__en { animation: fade var(--dur-4) var(--ease) 1300ms both; }
    .page-index .fv__lower { animation: rise-8 var(--dur-4) var(--ease) 1500ms both; }

    /* works / 404：同じ順番を短く */
    .ph__sky { animation: sky var(--dur-4) var(--ease) 0ms both; }
    .page-works .site-header,
    .page-404 .site-header { animation: fade 400ms var(--ease) 0ms both; }
    .ph__line { animation: line var(--dur-3) var(--ease) 400ms both; }
    .ph__title, .ph__num { animation: rise var(--dur-4) var(--ease) 600ms both; }
    .work:first-child { animation: fade var(--dur-3) var(--ease) 900ms both; }

    /* スクロール出現（JS があるときだけ） */
    .js .reveal {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
      transition-delay: calc(var(--i, 0) * 120ms);
    }
    .js .reveal.is-in { opacity: 1; transform: none; }
  }

  @keyframes sky { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes line { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
  @keyframes rise-8 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ================================================================ utilities */
@layer utilities {
  .vh {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}