@layer reset, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  button, input, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
}

@layer base {
  :root {
    color-scheme: dark;

    --oxblood: #650f10;
    --ink: #120304;
    --cream: #edc38d;
    --muted: #d6ae87;
    --ornament: #c7a37a;
    --line: rgb(237 195 141 / 0.27);
    /* 7 回目: 本文は今より明るいクリーム。額縁と見出しの目印は金（--ornament）を細い線で */
    --text: #f6e0bf;
    --gold-line: rgb(199 163 122 / 0.55);
    --fs-body: 15px;
    --frame-pad: 24px;
    --orn-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c7a37a' stroke-width='.9'%3E%3Cg transform='matrix(1 0 0 1 0 0)'%3E%3Cpath d='M1.5 1.5c6 0 9.5 2 10.5 7M1.5 1.5c0 6 2 9.5 7 10.5' stroke-opacity='.8'/%3E%3Cpath d='M12 8.5c.4 2.3-1.4 3.4-2.7 2.5-1-.8-.5-2.3.7-2.1M8.5 12c2.3.4 3.4-1.4 2.5-2.7-.8-1-2.3-.5-2.1.7'/%3E%3Cpath d='M5 2.6l1.6 1.6L5 5.8 3.4 4.2z' fill='%23c7a37a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c7a37a' stroke-width='.9'%3E%3Cg transform='matrix(-1 0 0 1 20 0)'%3E%3Cpath d='M1.5 1.5c6 0 9.5 2 10.5 7M1.5 1.5c0 6 2 9.5 7 10.5' stroke-opacity='.8'/%3E%3Cpath d='M12 8.5c.4 2.3-1.4 3.4-2.7 2.5-1-.8-.5-2.3.7-2.1M8.5 12c2.3.4 3.4-1.4 2.5-2.7-.8-1-2.3-.5-2.1.7'/%3E%3Cpath d='M5 2.6l1.6 1.6L5 5.8 3.4 4.2z' fill='%23c7a37a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c7a37a' stroke-width='.9'%3E%3Cg transform='matrix(1 0 0 -1 0 20)'%3E%3Cpath d='M1.5 1.5c6 0 9.5 2 10.5 7M1.5 1.5c0 6 2 9.5 7 10.5' stroke-opacity='.8'/%3E%3Cpath d='M12 8.5c.4 2.3-1.4 3.4-2.7 2.5-1-.8-.5-2.3.7-2.1M8.5 12c2.3.4 3.4-1.4 2.5-2.7-.8-1-2.3-.5-2.1.7'/%3E%3Cpath d='M5 2.6l1.6 1.6L5 5.8 3.4 4.2z' fill='%23c7a37a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --orn-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c7a37a' stroke-width='.9'%3E%3Cg transform='matrix(-1 0 0 -1 20 20)'%3E%3Cpath d='M1.5 1.5c6 0 9.5 2 10.5 7M1.5 1.5c0 6 2 9.5 7 10.5' stroke-opacity='.8'/%3E%3Cpath d='M12 8.5c.4 2.3-1.4 3.4-2.7 2.5-1-.8-.5-2.3.7-2.1M8.5 12c2.3.4 3.4-1.4 2.5-2.7-.8-1-2.3-.5-2.1.7'/%3E%3Cpath d='M5 2.6l1.6 1.6L5 5.8 3.4 4.2z' fill='%23c7a37a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --mark-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 8'%3E%3Crect y='3.5' width='32' height='1' fill='%23c7a37a'/%3E%3Cpath d='M39 1l3 3-3 3-3-3z' fill='%23c7a37a'/%3E%3C/svg%3E");

    --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    --font-sans: "Hiragino Sans", "Noto Sans JP", sans-serif;
    --font-en: Georgia, "Times New Roman", serif;

    --fs-xs: 12px;
    --fs-s: 15px;
    --fs-m: 18px;
    --fs-l: 26px;

    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 48px;
    --sp-6: 64px;
    --sp-7: 96px;

    --frame: 480px;
    /* 固定表示の部品を、PC でも 480px の本体の端に揃えるための余白 */
    --frame-gutter: max(0px, (100vw - var(--frame)) / 2);

    /* 作例 ancient-oath の値 */
    --ease-quart: cubic-bezier(0.41, 0.35, 0.2, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --dur-word: 1.6s;
    --step-word: 75ms;
    --split-mask-pad: 0.08em;
    --split-mask-bleed-y: 0.3em;
  }

  @media (width < 360px) {
    :root { --fs-body: 14.5px; --frame-pad: 20px; }
  }

  html {
    background: var(--oxblood);
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--sp-5);
    -webkit-text-size-adjust: 100%;
  }

  /* PC のホイールだけ Lenis がなめらかにする間は、ブラウザ側のなめらかさを切る（二重にかけない）。Lenis の dist/lenis.css の要点 */
  html.lenis { scroll-behavior: auto; }
  html.lenis, html.lenis body { block-size: auto; }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-s);
    line-height: 2.1;
    color: var(--cream);
    /* 改行は HTML の <wbr>（文節の切れ目）だけで起こす。auto-phrase は Safari に無いので keep-all を土台にする */
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    overflow-x: clip;
  }

  h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.03em;
    text-wrap: balance;
  }

  /* 中央寄せの短い段落で最後の行に 1 語だけ残らないように。pretty は Safari で同じ行を 2 回描く不具合があるので balance を使う */
  p { text-wrap: balance; }

  h2 { font-size: var(--fs-l); }
  h3 { font-size: var(--fs-m); }

  [lang="en"] { font-family: var(--font-en); letter-spacing: 0.12em; }

  /* Safari は # の直後や（の直後でも改行することがあるので、ひとかたまりで扱う */
  .nowrap { white-space: nowrap; }

  a { color: inherit; text-underline-offset: 0.3em; }

  :focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
}

@layer layout {
  .intro, .hero, main, .footer, .works-head {
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--frame);
    margin-inline: auto;
  }

  /* 背景はページの最後まで 1 枚: oxblood に薄い gothic-night を重ねた絵（前もって 1 枚に焼いてある）。セクションは透明。
     アドレスバーの伸び縮みで端が見えないよう、上下を 20% ずつはみ出させる */
  .backdrop {
    position: fixed;
    inset-block: -20%;
    inset-inline: 0;
    z-index: -1;
    inline-size: min(100%, var(--frame));
    margin-inline: auto;
    overflow: hidden;
    background: var(--oxblood);
  }

  .backdrop__art {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
  }

  /* 紙の粒子 */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  }

  main { overflow-x: clip; }

  main > section, .story__intro {
    position: relative;
    z-index: 1;
    padding-block: var(--sp-6);
    padding-inline: var(--sp-3);
  }

  @media (width >= 960px) {
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(rgb(18 3 4 / 0.82), rgb(18 3 4 / 0.82)),
        url("../img/hero-architecture-828.webp") center / cover;
    }

    .backdrop { box-shadow: 0 0 80px rgb(0 0 0 / 0.6); }
  }
}

@layer components {
  .skip {
    position: absolute;
    inset-inline-start: var(--sp-2);
    inset-block-start: -100px;
    z-index: 20;
    padding: var(--sp-1) var(--sp-2);
    background: var(--cream);
    color: var(--ink);

    &:focus { inset-block-start: var(--sp-2); }
  }

  .eyebrow {
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
  }

  /* 7 回目: 本文（p・dd）は 15px（360 未満は 14.5px）・行の高さ 1.9・明るいクリーム。ラベル類はクラスの指定が勝つ */
  main :is(p, dd) {
    font-size: var(--fs-body);
    line-height: 1.9;
    color: var(--text);
  }

  /* 3 行を超える本文は左揃え。1 行は 22 字（21〜23 字）まで */
  .long {
    max-inline-size: 22em;
    margin-inline: auto;
    text-align: start;
    text-wrap: wrap;
  }

  /* 見出しの上の英字の目印: ——◆ ABOUT ◆——。字間の後ろの余りを左にも足して真ん中に */
  .mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-en);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: var(--ornament);
    text-align: center;

    &::before, &::after {
      content: "";
      flex: none;
      inline-size: 42px;
      block-size: 8px;
      background: var(--mark-rule) no-repeat center / contain;
    }

    &::before { margin-inline-end: 0.2em; }
    &::after { scale: -1 1; }
  }

  /* 額縁: 細い二重線（間 4px）と四隅の唐草。古い劇場の招待状の線 */
  .frame {
    position: relative;
    padding: var(--frame-pad);
    border: 1px solid var(--gold-line);
    background: rgb(24 4 6 / 0.42);

    &::before, &::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    &::before { inset: 4px; border: 1px solid var(--gold-line); }

    &::after {
      inset: 7px;
      background:
        var(--orn-tl) top left / 18px no-repeat,
        var(--orn-tr) top right / 18px no-repeat,
        var(--orn-bl) bottom left / 18px no-repeat,
        var(--orn-br) bottom right / 18px no-repeat;
    }
  }

  .prose {
    text-align: center;

    & h2 { margin-block: var(--sp-2) var(--sp-4); }
    & > p + p { margin-block-start: var(--sp-3); }
  }

  /* ヒーロー: 左上ラベル → 右上メニュー → wordmark → リード → 骸骨の視線の先（右下）に日時 → SCROLL。
     大きさは幅で決める（高さで決めると、バーの出ている iPhone で骸骨が縮む） */
  .hero {
    display: flex;
    flex-direction: column;
    block-size: clamp(640px, 100svh, 860px);
    padding-block: max(var(--sp-2), env(safe-area-inset-top)) var(--sp-3);
    padding-inline: var(--sp-2);
    /* 層は舞台の外に出さない（序章の文字の所に何も残さない） */
    overflow: clip;
    isolation: isolate;
    /* 骸骨は舞台の下へはみ出すので、下端で切れた線に見えないよう下の 64px を透かして地続きの背景へ溶かす（SCROLL の文字はこの外） */
    mask-image: linear-gradient(#000 calc(100% - 64px), transparent);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      /* 8 回目: 上の暗さ 0.27 → 0.6（左上の英字ラベルの明るさの差を 4.5 以上に） */
      background: linear-gradient(rgb(48 11 13 / 0.6), transparent 33%, transparent 64%, var(--oxblood));
    }

    /* 文字は骸骨（1）と街（0）より手前。flex の子と absolute の子なので z-index だけで重なり順が決まる */
    & > :not(.hero__city, .hero__figure) { z-index: 2; }
  }

  .hero__city {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform-origin: 50% 50%;

    & img {
      inline-size: 100%;
      block-size: 100%;
      max-inline-size: none;
      object-fit: cover;
      filter: brightness(0.62);
      mask-image: linear-gradient(transparent, #000 6% 80%, transparent);
    }
  }

  .hero__label {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    /* 右上の MENU と重ならないよう、ボタンの幅だけ空ける */
    max-inline-size: calc(100% - 120px);
    font-size: var(--fs-xs);
    line-height: 1.6;
  }

  .hero__title {
    margin-block-start: var(--sp-2);
    /* 近づきながら大きくなる時に上の MENU へかぶらないよう、上端を基準に広げる */
    transform-origin: 50% 0;

    & img {
      inline-size: 88%;
      margin-inline: auto;
      filter: drop-shadow(0 4px 18px rgb(0 0 0 / 0.65));
    }
  }

  /* 下の余白を auto にして骸骨を下へ押す。画面が低い時は余白が 0 になり、骸骨は縮まずに下へはみ出す */
  .hero__lead {
    align-self: center;
    margin-block: var(--sp-1) auto;
    padding: 2px var(--sp-3);
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--fs-m);
    letter-spacing: 0.08em;
    text-shadow: 0 2px 12px rgb(18 3 4), 0 0 18px rgb(18 3 4);
    /* 8 回目: 文字の後ろの暗さ 0.55 → 0.75（18px は大きな文字に入らないので 4.5 以上に） */
    background: radial-gradient(closest-side, rgb(18 3 4 / 0.75), transparent);
  }

  .hero__lead-text { display: block; }

  /* 頭がリードに重ならないよう、上端はリードの下端から 24px 以上空ける */
  .hero__figure {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    align-self: flex-start;
    inline-size: 70%;
    margin-block: var(--sp-3) calc(-1 * var(--sp-5));
    margin-inline-start: -20%;
    /* 消さずに流すので、大きくなる時は右端を止めて左へ広げる（右の日時の列へ入らない。作例に無い値） */
    transform-origin: 100% 50%;

    & img {
      inline-size: 100%;
      filter: brightness(0.9) contrast(1.05) drop-shadow(0 0 22px rgb(33 8 8 / 0.53));
      mask-image: linear-gradient(#000 82%, transparent);
    }
  }

  /* 骸骨のランタンの光の先に置く。骸骨の右端（幅 70% − 20%）より右に収まる幅にする。SCROLL はこの下に右寄せ */
  .hero__info {
    position: absolute;
    inset-inline-end: var(--sp-2);
    inset-block-end: var(--sp-3);
    inline-size: 45%;
    text-align: end;
    line-height: 1.4;
    text-shadow: 0 2px 10px rgb(0 0 0 / 0.9);
  }

  .hero__date { font-size: var(--fs-l); letter-spacing: 0.06em; }
  .hero__start { font-size: var(--fs-m); }
  .hero__tag { margin-block-start: var(--sp-1); font-size: var(--fs-s); }

  .hero__about {
    margin-block-start: var(--sp-1);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--muted);
  }

  .hero__scroll {
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    inline-size: max-content;
    margin: var(--sp-2) 0 0 auto;
    font-size: var(--fs-xs);
    text-decoration: none;

    &::after {
      content: "";
      inline-size: 1px;
      block-size: var(--sp-4);
      background: linear-gradient(var(--cream), transparent);
    }
  }

  .menu-button {
    position: fixed;
    inset-block-start: max(var(--sp-2), env(safe-area-inset-top));
    inset-inline-end: calc(var(--frame-gutter) + var(--sp-2));
    z-index: 11;
    display: none;
    align-items: center;
    gap: var(--sp-1);
    min-block-size: 44px;
    padding-inline: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgb(48 11 13 / 0.75);
    backdrop-filter: blur(6px);
    font-size: var(--fs-xs);

    .js & { display: inline-flex; }
  }

  .menu-button__lines {
    inline-size: 16px;
    block-size: 7px;
    border-block: 1px solid currentColor;
  }

  .menu {
    inline-size: min(100vw, var(--frame));
    max-inline-size: none;
    block-size: 100svh;
    max-block-size: none;
    margin: 0 auto;
    /* 上は閉じるボタン（44px）の分だけ空ける。iPhone SE（568px）でも全部が 1 画面に入る高さ */
    padding: 76px var(--sp-4) var(--sp-4);
    border: 0;
    background: rgb(48 11 13 / 0.98);
    color: var(--cream);

    &::backdrop { background: rgb(0 0 0 / 0.7); }

    & nav { display: grid; gap: 4px; }

    & nav > a:not(.menu__works) {
      display: block;
      padding-block: 12px;
      border-block-end: 1px solid var(--line);
      font-family: var(--font-serif);
      font-size: var(--fs-m);
      text-align: center;
      text-decoration: none;
    }
  }

  /* 作品ページだけは別のページなので、ページ内の目次と分けて額縁のカードにする */
  .menu__works {
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    margin-block-end: var(--sp-4);
    padding: var(--sp-3) var(--frame-pad);
    text-decoration: none;
    text-align: center;
  }

  .menu__works-en {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--ornament);
  }

  .menu__works-title {
    font-family: var(--font-serif);
    font-size: var(--fs-l);
  }

  .menu__works-note { font-size: 14px; }

  .menu .mark { margin-block-end: var(--sp-1); }

  .menu__close {
    position: absolute;
    inset-block-start: var(--sp-2);
    inset-inline-end: var(--sp-2);
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: none;
    font-size: var(--fs-m);
  }

  /* つたの線画（元の版の .drift）。左右の端に薄く */
  .drift {
    position: absolute;
    z-index: 0;
    inline-size: 350px;
    block-size: 620px;
    pointer-events: none;
    opacity: 0.12;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c8a37c' stroke-width='.6'%3E%3Cpath d='M95 600C15 470 270 410 125 240S90 80 180 0M100 580C65 440 220 420 115 250S95 70 173 0'/%3E%3Cpath d='M100 550C-10 530 10 430 78 422C40 490 100 520 100 550ZM110 510C195 505 260 445 235 410C165 450 145 480 110 510ZM135 455C50 410 32 360 60 333C120 375 125 425 135 455ZM156 382C230 370 270 302 235 283C175 325 180 353 156 382ZM149 316C50 280 38 220 75 198C125 250 135 280 149 316ZM115 235C190 205 240 160 205 130C160 160 130 200 115 235ZM102 171C27 130 37 80 66 65C110 117 100 138 102 171ZM124 86C195 95 220 50 205 25C164 45 145 68 124 86Z'/%3E%3Cpath d='M100 550L78 422M110 510L235 410M135 455L60 333M156 382L235 283M149 316L75 198M115 235L205 130M102 171L66 65M124 86L205 25'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  }

  .drift--one { inset-inline-start: -210px; inset-block-start: 4%; rotate: 15deg; }
  .drift--two { inset-inline-end: -210px; inset-block-start: 40%; transform: scaleX(-1); rotate: -10deg; }
  .drift--three { inset-inline-start: -210px; inset-block-end: 12%; rotate: 25deg; }

  .story {
    padding: 0;

    & .story__intro { text-align: center; }
    & .story__intro h2 { margin-block: var(--sp-2) var(--sp-4); }
    & .story__intro p + p { margin-block-start: var(--sp-3); }
  }

  /* 場面: 切り抜きの絵を画面より少し大きく、左右にずらして置く（元の版の night-scene） */
  .scene {
    position: relative;
    margin-block-end: var(--sp-4);
  }

  /* 絵は押せる（もう一度「ありえないこと」が起きる）。見た目は絵のまま */
  .scene__art {
    position: relative;
    display: block;
    inline-size: 116%;
    margin-inline-start: -18%;
    padding: 0;
    border: 0;
    background: none;
    -webkit-tap-highlight-color: transparent;
    /* つまむ（作例 orbit-stickers）。scale プロパティで、translate（絵のずれ）と transform（刷り出し）に混ぜない */
    scale: 1;
    transition: scale 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);

    &.is-held { scale: 1.04; }

    & img {
      inline-size: 100%;
      max-inline-size: none;
      aspect-ratio: 3 / 2;
      object-fit: contain;
      filter: drop-shadow(0 0 20px rgb(33 11 19 / 0.47));
    }
  }

  /* 駅の時計の針。絵の針は消してあり、この針だけが文字盤（1440×960 の絵で中心 1161.5,258・半径 72）に乗る */
  .trick-hands {
    position: absolute;
    inset-inline-start: calc((1161.5 - 72) / 1440 * 100%);
    inset-block-start: calc((258 - 72) / 960 * 100%);
    inline-size: calc(144 / 1440 * 100%);
    block-size: calc(144 / 960 * 100%);
    overflow: visible;
    pointer-events: none;
    transform: rotate(0deg);
  }

  .trick-hands__minute, .trick-hands__hour { stroke: #2a1a14; stroke-linecap: round; }
  .trick-hands__minute { stroke-width: 6; }
  .trick-hands__hour { stroke-width: 9; }
  .trick-hands__pin { fill: #5c1518; }

  /* 湯気と花びらを置く層。絵と同じ 3:2 の箱に重ねる */
  .trick-layer {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .trick-steam { fill: none; stroke: #f6e4c4; stroke-width: 6; stroke-linecap: round; opacity: 0; }
  .trick-petal { transform-box: fill-box; transform-origin: center; opacity: 0; }

  /* 見出しの文節を下から持ち上げる窓（作例 ancient-oath の .word-mask） */
  .word-mask {
    display: inline-block;
    padding-inline-end: var(--split-mask-pad);
    margin-inline-end: calc(var(--split-mask-pad) * -1);
    clip-path: inset(calc(var(--split-mask-bleed-y) * -1) 0 calc(var(--split-mask-bleed-y) * -1) 0);
  }

  .word { display: inline-block; }

  .scene--cafe .scene__art { inline-size: 111%; margin-inline-start: 0; }
  .scene--florist .scene__art { inline-size: 113%; margin-inline-start: -19%; }

  .scene__copy {
    position: relative;
    inline-size: 85%;
    /* 絵の下端と見出しの間を 24px 以上空ける（絵のずれの分の余白も含めて 40px） */
    margin: 8px 0 0 12%;
    padding: 20px 10px;
    text-align: center;
    text-shadow: 0 2px 20px var(--oxblood);
    background: radial-gradient(ellipse, rgb(101 15 16 / 0.73), transparent 75%);

    & h3 { font-size: var(--fs-l); line-height: 1.75; margin-block: 12px var(--sp-2); }
  }

  /* 「しているのは、影だけ。」を 1 行に収める幅（26px の 11 字＋余白）は狭い画面でも確保する */
  .scene--cafe .scene__copy { inline-size: min(100%, max(86%, 316px)); margin: 8px 0 0; }
  .scene--florist .scene__copy { margin-inline-start: 13%; }

  .scene__star {
    display: block;
    margin-block-start: 18px;
    font-size: 25px;
    color: #b28a70;
  }

  /* いつ／どこで／なにを: 左にラベル（12px の 4 字分）、右に中身。行の間に点線。3 行とも同じ大きさ・色 */
  .event__when {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: var(--sp-2);
    margin-block-start: var(--sp-5);
    font-family: var(--font-serif);
    text-align: start;

    & dt, & dd { padding-block: 12px; }
    & dt:first-of-type, & dd:first-of-type { padding-block-start: 0; }
    & dt:last-of-type, & dd:last-of-type { padding-block-end: 0; }
    & dt:not(:first-of-type), & dt:not(:first-of-type) + dd { border-block-start: 1px dotted var(--gold-line); }
    /* ラベルの行の高さを中身の 1 行目と揃える */
    & dt { align-self: start; font-size: var(--fs-xs); line-height: calc(var(--fs-body) * 1.9); color: var(--muted); letter-spacing: 0.2em; }
  }

  @media (width < 340px) {
    .event__when {
      grid-template-columns: 1fr;

      & dt { line-height: 1.6; }
      & dd { padding-block-start: 2px; }
      & dt:not(:first-of-type) + dd { border-block-start: 0; }
    }
  }

  .rules {
    display: grid;
    gap: var(--sp-3);
    margin-block-start: var(--sp-4);
  }

  .rule {
    & h3 { font-size: 21px; margin-block-end: 12px; }
  }

  .rule__label { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }

  .rule__num {
    display: block;
    margin-block: 6px 10px;
    font-size: 22px;
    line-height: 1.5;
    color: #bc9478;
  }

  .steps { margin-block-start: var(--sp-4); }

  .step {
    & h3 { font-size: 21px; margin-block: 6px 12px; }

    /* 段と段の間は点線 */
    & + & {
      margin-block-start: var(--sp-3);
      padding-block-start: var(--sp-3);
      border-block-start: 1px dotted var(--gold-line);
    }
  }

  .step__num {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    color: var(--muted);
  }

  .copy-button {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    margin-block-start: var(--sp-2);
    padding: var(--sp-1) 5px;
    border: 0;
    border-block-end: 1px solid rgb(237 195 141 / 0.3);
    background: none;
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: border-color 0.2s;

    &:hover { border-color: var(--cream); }
  }

  .tag {
    display: grid;
    justify-items: center;
    margin-block-start: 45px;

    & .copy-button { margin-block-start: 10px; }
  }

  .join__note {
    margin-block-start: var(--sp-3);
    font-size: 13px;
    line-height: 2;
    text-align: center;
    color: var(--muted);
  }

  .tag__name {
    font-family: var(--font-serif);
    font-size: 28px;
    letter-spacing: 0.02em;
  }

  .prompt__form {
    display: grid;
    gap: var(--sp-1);
    margin-block-start: var(--sp-4);
    text-align: start;

    & label { font-size: 14px; }
    & label:not(:first-child) { margin-block-start: var(--sp-2); }

    & input, & textarea {
      inline-size: 100%;
      padding: 12px var(--sp-2);
      border: 1px solid var(--line);
      border-radius: 0;
      background: rgb(48 11 13 / 0.6);
      font-size: 16px;
      line-height: 1.6;
    }

    & .button {
      margin-block-start: var(--sp-3);
      min-block-size: 50px;
      border: 0;
      background: var(--cream);
      color: var(--oxblood);
      font-size: 14px;
      letter-spacing: 0.02em;

      &:hover { background: #f5e5ca; }
    }
  }

  .prompt__output:not([hidden]) {
    display: grid;
    gap: var(--sp-1);
    margin-block-start: var(--sp-3);

    & .copy-button { justify-self: start; }
  }

  .prompt__note { margin-block-start: var(--sp-3); }

  .gallery__empty {
    margin-block-start: var(--sp-4);

    /* 空の時の本文（「最初の一枚は、…」）。額縁の中の注記（.empty-pair__note）には当てない */
    & > p { font-family: var(--font-serif); font-size: var(--fs-m); }
  }

  /* 作品の空の枠: 額縁の中に記号と公開の日時 */
  .empty-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-block-end: var(--sp-3);

    & > .frame {
      display: grid;
      place-content: center;
      justify-items: center;
      gap: var(--sp-1);
      aspect-ratio: 4 / 5;
      padding-inline: 10px;
      background: radial-gradient(ellipse, rgb(139 41 34 / 0.18), transparent 72%), rgb(24 4 6 / 0.42);
    }
  }

  .empty-pair__glyph {
    font-family: var(--font-serif);
    font-size: 50px;
    line-height: 1.2;
    color: rgb(199 170 148 / 0.6);
  }

  /* 額縁の中の注記は 12px。字の形は空の時の本文と同じ明朝のまま */
  .empty-pair__note {
    font-family: var(--font-serif);
    font-size: var(--fs-xs);
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: center;
  }

  /* 幅 360 未満では「10.31 21:00」が枠の内側に収まるよう字間を詰める */
  @media (width < 360px) {
    .empty-pair__note { letter-spacing: 0; }
  }

  .works-grid:not(:empty) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
    text-align: start;
  }

  .copy-button[data-works-more][hidden] { display: none; }

  .work--threads {
    grid-column: 1 / -1;
    inline-size: 100%;
    max-inline-size: 540px;
    min-inline-size: 0;
    justify-self: center;

    & blockquote.text-post-media {
      inline-size: 100%;
      min-inline-size: 0 !important;
      max-inline-size: 540px;
      margin-inline: auto !important;
    }
  }

  .work__creator {
    margin-block-end: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: start;

    & a {
      border-block-end: 1px solid var(--line);
      text-decoration: none;

      &:hover { border-color: var(--cream); }
    }
  }

  .work a {
    display: grid;
    gap: 4px;
    text-decoration: none;

    & img { aspect-ratio: 4 / 5; object-fit: cover; }
    & h2, & h3 { font-size: var(--fs-s); line-height: 1.6; }
    & p, & span { font-size: var(--fs-xs); color: var(--muted); }
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-block-size: 44px;
    margin-block-start: var(--sp-3);
    border-block-end: 1px solid var(--line);
    font-size: 14px;
    text-decoration: none;

    &:hover { border-color: var(--cream); }
  }

  .organizer__links {
    display: grid;
    justify-items: center;
    margin-block-start: var(--sp-2);

    & .text-link { margin-block-start: var(--sp-1); }
  }

  .notes {
    padding-block-start: var(--sp-4);
    font-size: 13px;
    line-height: 2;
    color: var(--muted);

    & p:last-child { margin-block-start: 18px; }
  }

  .end-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px 20px;
    font-size: 25px;
    color: #b28a70;

    & span { inline-size: 65px; block-size: 1px; background: linear-gradient(to right, transparent, rgb(178 138 112 / 0.4)); }
    & span:last-child { rotate: 180deg; }
  }

  .footer {
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-3) max(70px, env(safe-area-inset-bottom));
    font-size: var(--fs-xs);
    color: var(--muted);

    & .text-link { margin-block-start: 0; }
  }

  .footer__mark { inline-size: 230px; }

  .toast {
    position: fixed;
    inset-block-end: max(var(--sp-3), env(safe-area-inset-bottom));
    inset-inline: var(--sp-2);
    z-index: 30;
    max-inline-size: calc(var(--frame) - var(--sp-4));
    margin-inline: auto;
    padding: 12px var(--sp-2);
    background: var(--cream);
    color: var(--oxblood);
    font-size: 14px;
    text-align: center;
    opacity: 0;
    translate: 0 var(--sp-1);
    pointer-events: none;
    transition: opacity 0.3s, translate 0.3s;

    &.is-visible { opacity: 1; translate: 0 0; }
    &:empty { visibility: hidden; }
  }

  .works-head {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-7) var(--sp-3) var(--sp-5);
    text-align: center;

    & h1 { font-size: var(--fs-l); }
    & > p:not(.eyebrow) { font-size: var(--fs-body); line-height: 1.9; color: var(--text); }
  }

  .works-head__mark { justify-self: center; inline-size: 64%; }

  .works__empty {
    padding-block: var(--sp-5);
    border-block: 1px solid var(--line);
    text-align: center;

    & p:first-child { font-family: var(--font-serif); font-size: var(--fs-m); }
    & p + p { margin-block-start: var(--sp-2); }
  }

  .works-guide {
    & h2 { font-size: 21px; }
    & > p { max-inline-size: 22em; margin-inline: auto; text-align: start; text-wrap: wrap; }
  }
}

@layer motion {
  /* 動きは motion.js が html に motion を付けた時だけ。JS なし・動きを減らす設定では上の静かな並びのまま */
  @media (prefers-reduced-motion: no-preference) {
    .motion {
      /* ヒーローは貼り付けずに 1 画面ぶんで流す（.intro の高さ＝ヒーローの高さ）。流れている間だけ層に速さの差を付ける */
      & .hero__city, & .hero__figure { will-change: transform; }

      & .reveal-image { clip-path: inset(-15% -5% 115% -25%); }
      & .reveal-image.is-inview.is-loaded { animation: reveal-wipe 0.9s var(--ease-quart) both; }
      & .reveal-image.is-inview.is-loaded img { animation: reveal-settle 0.9s var(--ease-quart) both; }

      & [data-words] .word {
        transform: translateY(130%);
        transition: transform var(--dur-word) var(--ease-out-expo);
        transition-delay: calc(var(--step-word) * var(--word, 0));
      }
      & [data-words].is-inview .word { transform: translateY(0%); }
      & [data-words]:not(.is-inview) .word { transition-duration: 0s; transition-delay: 0s; }
    }

    /* 幕開け（読み込み時に 1 回だけ）。作例 orbit-stickers と interactive-discovery の原文。
       fill-mode は backwards: 遅延中は始まりの姿、終わったら元の CSS に戻る。JS が動かす箱（層・ロゴ・日時）の内側に当てて、スクロールの動きとぶつけない */
    .opening {
      & .hero__city img { animation: heroZoom 1.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
      & .hero__title img { animation: riseMask 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.08s backwards; }
      & .hero__lead-text { animation: riseMask 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.36s backwards; }
      & .hero__figure img { --rot: 0deg; animation: settle 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.46s backwards; }
      & .hero__info > * { animation: softRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.06s backwards; }
    }

    @keyframes heroZoom { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }

    @keyframes riseMask {
      from { opacity: 0; transform: translateY(100%); clip-path: inset(0 -4% 0 -4%); }
      to { opacity: 1; transform: translateY(0); clip-path: inset(-70% -4% -70% -4%); }
    }

    @keyframes settle {
      from { opacity: 0; transform: translateY(14px) scale(0.985) rotate(var(--rot)); }
      to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot)); }
    }

    @keyframes softRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

    @keyframes reveal-wipe {
      0% { clip-path: inset(-15% -5% 115% -25%); }
      to { clip-path: inset(-15% -5% -5% -25%); }
    }

    @keyframes reveal-settle {
      0% { transform: scale(1.08) translateY(-3%); }
      to { transform: scale(1); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      animation: none !important;
    }
  }
}