@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@300;400;500;600&family=Fredoka:wght@500;600&family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  --black: #0c0907;
  --charcoal: #16110d;
  --ink: #1d1712;
  --white: #f3f1e9;
  --muted: #9a9086;
  --accent: #c2a15c;
  --accent-ink: #6e5520;
  --ivory: #eae6d9;
  --warm: #a16c4b;
  --sky: #252e37;
  /* ELLE撮影の背景パネルから測ったピンク（5枚の平均）。
     ページの地色を写真の壁と同じにすると、写真の縁が消えて1つの舞台に見える。 */
  --rose: #e3d0d1;
  --rose-ink: #6b4b4d;
  /* ふたりの赤いリボンの色。ELLE撮影の3枚から実測した平均は #d76072 だが、
     反射込みで明るいため、色相はそのままに濃くしてある（面にすると文字が沈むため）。
     このサイトの色はすべて暖色でくすんでいるので、鮮やかな赤は使わない。 */
  --wine: #5a4446;
  --line: rgba(243, 241, 233, .22);
  --display: "Archivo Black", "Arial Black", sans-serif;
  /* 丸ゴシック。流れる帯だけに使う。見出しには使わない（強さが落ちるため） */
  --round: "Fredoka", "Noto Sans JP", sans-serif;
  /* 手書き系。日常の章の一言だけに使う。本文に使うと読みにくくなる。 */
  --hand: "Klee One", "Noto Sans JP", serif;
  --sans: "DM Sans", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; overflow-x: hidden; color: var(--white); background: var(--black); font-family: var(--sans); }
body.menu-open { overflow: hidden; }
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { width: 100%; height: 100%; display: block; object-fit: cover; }
button { color: inherit; font: inherit; }
::selection { color: var(--black); background: var(--accent); }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px; color: var(--black); background: var(--accent); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.noise { position: fixed; z-index: 50; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.chapter { padding: 9vw 5vw; }
.chapter-no { font-size: 10px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; }
.reveal { opacity: 0; transform: translateY(48px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.loader { position: fixed; z-index: 1000; inset: 0; display: grid; grid-template-rows: 1fr auto auto; padding: 3vw; color: var(--black); background: var(--accent); transition: transform .8s cubic-bezier(.76,0,.24,1); }
.loader.is-done { transform: translateY(-102%); }
.loader-word { align-self: center; display: flex; justify-content: center; align-items: center; gap: 1vw; font-family: var(--display); font-size: clamp(64px, 15vw, 280px); line-height: .7; letter-spacing: -.07em; }
.loader-word i.amp { color: var(--white); font-style: normal; font-size: .45em; }
.loader-meta { display: flex; justify-content: space-between; align-items: end; font-size: 9px; letter-spacing: .18em; }
.loader-meta b { font-family: var(--display); font-size: 5vw; letter-spacing: -.06em; }
.loader-line { height: 3px; margin-top: 18px; overflow: hidden; background: rgba(12,9,7,.2); }
.loader-line i { display:block; width:100%; height:100%; background:var(--black); transform:scaleX(0); transform-origin:left; animation:loadLine 1.15s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes loadLine { to { transform: scaleX(1); } }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; mix-blend-mode: difference; }
.mini-logo { position: relative; z-index: 2; font-family: var(--display); font-size: 16px; letter-spacing: -.07em; }
.mini-logo span { color: var(--accent); }
.menu-toggle { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; border: 0; background: none; cursor: pointer; }
.menu-toggle span { font-size: 10px; letter-spacing: .2em; }
.menu-toggle i, .menu-toggle i::after { display: block; width: 26px; height: 1px; background: currentColor; transition: transform .3s ease; content: ""; }
.menu-toggle i::after { transform: translateY(6px); }
.menu-open .menu-toggle i { transform: rotate(45deg); }
.menu-open .menu-toggle i::after { transform: rotate(-90deg); }
.site-nav { position: fixed; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2vh; padding: 10vw; background: rgba(12,9,7,.97); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-105%); transition: transform .55s cubic-bezier(.76,0,.24,1); }
.site-nav { justify-content: safe center; }
.site-nav a { padding: 9px 0; width: max-content; font-family: var(--display); font-size: clamp(34px, 7vw, 96px); line-height: .92; letter-spacing: -.06em; }
.site-nav a:hover { color: var(--accent); }
.menu-open .site-nav { transform: none; }

.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 6vw 3vw 4vw; }
.hero-shade { position: absolute; z-index: -2; inset: -4%; }
/* 写真を拡大しない（拡大すると画素が足りなくなり眠くなる）。
   視差ぶんの余白だけ上下に持たせ、動きはtranslateだけで作る。 */
.hero-media { position: absolute; z-index: -2; inset: -5% 0; background-position: center 60%; background-size: cover; will-change: transform; }
.hero-shade { z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.02) 44%, rgba(0,0,0,.74) 92%), linear-gradient(90deg, rgba(0,0,0,.28), transparent 55%); }
.hero-kicker { position: absolute; top: 8%; left: 4.5%; margin: 0; font-size: 9px; letter-spacing: .2em; writing-mode: vertical-rl; }
.hero h1 { width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .02em; font-family: var(--display); font-size: clamp(82px, 17.2vw, 330px); line-height: .68; letter-spacing: -.07em; white-space: nowrap; mix-blend-mode: screen; }
.hero h1 span:last-child { color: var(--white); -webkit-text-stroke: 0; }
.hero h1 b { margin: 0 -.03em; color: var(--accent); font-size: .3em; font-weight: inherit; transform: rotate(-12deg); }
.hero-copy { position: absolute; right: 4vw; top: 32%; margin: 0; font-size: clamp(12px, 1.1vw, 16px); line-height: 2; letter-spacing: .08em; }
.scroll-cue { position: absolute; bottom: 3.4vw; right: 4vw; display: flex; align-items: center; gap: 14px; font-size: 9px; letter-spacing: .16em; }
.scroll-cue i { display: block; width: 48px; height: 1px; background: var(--white); transform-origin: left; animation: scan 1.8s ease-in-out infinite; }
@keyframes scan { 0%,100%{ transform:scaleX(.2); opacity:.45;} 50%{transform:scaleX(1);opacity:1;} }
.hero-status { position:absolute; top:16%; right:4vw; display:grid; padding:13px 0 13px 18px; min-width:160px; border-left:1px solid var(--accent); }
.hero-status span,.hero-status small { font-size:8px; letter-spacing:.17em; }
.hero-status b { margin:4px 0; font-family:var(--display); font-size:34px; line-height:1; letter-spacing:-.07em; }
.hero-status small { color:var(--muted); }

.ticker { overflow:hidden; padding:18px 0 15px; color:var(--black); background:var(--accent); border-top:1px solid var(--black); border-bottom:1px solid var(--black); }
.ticker div { width:max-content; font-family:var(--round); font-weight:600; font-size:clamp(22px,2.8vw,46px); line-height:1; letter-spacing:.01em; white-space:nowrap; animation:ticker 18s linear infinite; }
@keyframes ticker { to { transform:translateX(-50%); } }

.intro { min-height: 120vh; position: relative; display: grid; grid-template-columns: 1fr 1.3fr .7fr; grid-template-rows: auto 1fr auto; background: var(--black); }
.intro > .chapter-no { grid-column: 1 / -1; }
.intro-lead { grid-column: 1 / 3; align-self: center; margin: 12vw 0 3vw; z-index: 2; font-family: var(--display); font-size: clamp(40px, 7.2vw, 126px); line-height: .98; letter-spacing: -.07em; }
.intro-lead em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--ivory); }
.intro-aside { grid-column: 1; align-self: end; margin-bottom: 8vw; }
.intro-aside span, .intro-photo figcaption { font-size: 9px; letter-spacing: .18em; color: var(--accent); }
.intro-aside p { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 2; }
/* 下へはみ出す量は、次の OFF OUT / STOPPING IN の枠（33vw）より小さくしておく。
   大きくすると、下の章の見出しが写真の裏に隠れる。 */
.intro-photo { grid-column: 2 / 4; height: 46vw; margin: 0 0 -11vw; z-index: 1; }
.intro-photo figcaption { margin-top: 12px; color: var(--muted); }

.worlds { display:grid; grid-template-columns:1fr 1fr; background:var(--black); }
/* 枠は常に横長 3:2。高さを「画面の高さ」ではなく「画面の幅」から出しているのは、
   2列なので 1枠 = 50vw、その 1.5 分の 1 が 33vw になるため。どの画面幅でも比率が
   変わらないので、横写真がほとんど切られない。svh 基準に戻すと、幅の狭いPCで
   枠が縦長になってしまう。 */
.world { position:relative; min-height:min(33vw, 62svh); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; padding:4vw; border-right:1px solid rgba(255,255,255,.28); }
.world-photo { position:absolute; z-index:-2; inset:0; background-position:center; background-size:cover; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
/* 写真は加工しない。文字が乗る下側だけを暗くして読ませる。 */
.world::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.12) 30%,rgba(0,0,0,.82)); }
/* ラベルは見出しのすぐ上（枠の下側）に置く。枠の上半分を空けておくことで、
   上の intro-photo を大きく重ねても、文字が一切隠れない。 */
.world > span { display:block; margin-bottom:14px; font-size:9px; letter-spacing:.18em; }
/* 大きさの上限は2つの条件で決まる。
   ① 横：長い語が枠幅に収まること（STOPPING などに戻すなら下げる）
   ② 縦：見出しが高いほどラベルが上へ押し上がり、上から垂れてくる intro-photo に当たる
   ②のほうが先に効くので、ここを上げるときは intro-photo の margin も合わせて見直すこと。 */
.world h2 { margin:0; font-family:var(--display); font-size:clamp(54px,10.4vw,168px); line-height:.74; letter-spacing:-.085em; }
.world p { margin:4.5vw 0 0; font-size:12px; }
.world > i { position:absolute; right:4vw; bottom:4vw; display:grid; place-items:center; width:48px; height:48px; border:1px solid currentColor; border-radius:50%; font-style:normal; }
.world:hover .world-photo { transform:scale(1.06); }
.world:hover h2 { color:var(--accent); }

.profile { position: relative; min-height: 130vh; overflow: hidden; display: grid; grid-template-columns: 58% 42%; align-items: center; padding: 18vw 5vw 8vw; }
.profile-tio { background: var(--charcoal); }
.profile-image-wrap { position: relative; z-index: 2; width: 100%; height: 74vw; max-height: 960px; }
.profile-image-wrap img { object-position: center; }
.profile-type { position: absolute; z-index: 3; top: 17%; left: 42%; font-family: var(--display); font-size: clamp(100px, 22vw, 390px); line-height: .75; letter-spacing: -.075em; color: transparent; -webkit-text-stroke: 1px rgba(243,241,233,.55); pointer-events: none; }
.profile-copy { position: relative; z-index: 4; align-self: end; margin: 0 0 6vw -4vw; padding: 4vw; background: rgba(18,19,16,.9); }
.profile-copy h2 { margin: 40px 0 4vw; font-family: var(--display); font-size: clamp(55px, 9vw, 155px); line-height: .7; letter-spacing: -.06em; }
.profile-copy h2 span { margin-left: 18px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .15em; }
/* 断片ではなく文章が入るので、詩の頃より小さい。大きくすると1行が枠から出る。 */
.statement { font-size: clamp(17px, 1.95vw, 30px); line-height: 1.75; letter-spacing: -.01em; }
.profile dl { margin: 4vw 0 0; border-top: 1px solid var(--line); }
.profile dl div { display: grid; grid-template-columns: 1fr 1fr; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.profile dt { color: var(--muted); letter-spacing: .12em; }
.profile dd { margin: 0; }
/* サイトで唯一の「濃い赤の面」。金地に濃い色を乗せると彩度がぶつかるので、
   地のほうを赤にして、文字は白（塗り）と金（袋文字）にしてある。 */
.interlude { display: grid; min-height: 58vh; place-items: center; padding: 0 5vw; background: var(--wine); color: var(--white); }
.interlude p { margin: 0; font-family: var(--display); font-size: clamp(52px, 9.6vw, 168px); line-height: .84; letter-spacing: -.06em; transform: rotate(-3deg); }
/* 袋文字は線が細いぶん沈みやすいので太めに。ずらし幅を大きくすると広い画面で右へはみ出す。 */
.interlude span { margin-left: 4vw; color: transparent; -webkit-text-stroke: 4px var(--accent); }
.profile-rin { grid-template-columns: 42% 58%; padding-top: 12vw; background: var(--ivory); color: var(--black); }
.profile-rin .rin-field { position: absolute; inset: 0 53% 0 0; background: var(--warm); }
.profile-rin .profile-image-wrap { grid-column: 2; height: 70vw; max-height: 920px; }
/* TIO 側と同じ袋文字にそろえる。べた塗りにすると重く出るうえ、
   下の黒いパネルと重なった部分が完全に消える。 */
/* TIO 側と同じ袋文字にそろえる。縦位置も TIO と同じ「パネルの上端より約17ポイント上」に置く。
   下げるとパネルに隠れる面積が一気に増える（20%にすると53%が隠れた）。 */
.profile-rin .profile-type { top: 11%; left: -2%; color: transparent; -webkit-text-stroke: 1px rgba(12,9,7,.55); }
.profile-rin .profile-copy { grid-column: 1; grid-row: 1; align-self: end; margin: 0 -4vw 5vw 0; background: var(--black); color: var(--white); }

/* ── 03 DAILY LIFE ──────────────────────────────────────────
   見出しは単独の行。写真と横に並べると、背の高さが違うぶん必ず穴が空く。

   写真は「1行に2枚、高さは同じ、向きは逆」。高さがそろっているので
   行の中に空きができない。幅は向きから決まる（よこ長は広く、たて長は狭く）。

     1行目  よこ長 ＋ たて長   高さ 40vw   左づめ
     2行目  たて長 ＋ よこ長   高さ 34vw   右づめ（ずらしてリズムを出す）

   管理画面の「向きの目安」もこの並びと同じにしてある。 */
/* 12列のグリッドに、写真を段違いに置く章。列の指定（1/9 など）が配置、
   高さ（52vw など）が大きさ。片方だけ変えると形が崩れるので必ず対で見ること。 */
.moments { min-height: 260vh; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(80px, auto); gap: 7vw 2vw; padding-top: 12vw; background: #14100c; }
.moments-heading { grid-column: 1 / 8; }
.moments-heading h2 { margin: 3.5vw 0 2.5vw; font-family: var(--display); font-size: clamp(56px, 10.6vw, 158px); line-height: .86; letter-spacing: -.05em; }
.moments-heading p { margin-left: 42%; font-size: 13px; color: var(--muted); }
.moment { margin: 0; }
.moment img { transition: transform .8s ease; }
.moment:hover img { transform: scale(1.015); }
.moment figcaption { margin-top: 10px; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.m1 { grid-column: 8 / 13; height: 48vw; }
.m2 { grid-column: 1 / 9; height: 52vw; margin-top: 6vw; }
.m3 { grid-column: 1 / 5; height: 54vw; }
.m4 { grid-column: 7 / 13; height: 62vw; margin-top: 16vw; }
.moment-quote { grid-column: 9 / 13; align-self: end; margin: 0 0 2vw;
  font-family: var(--hand); font-weight: 600;
  font-size: clamp(21px, 2.5vw, 38px); line-height: 2; letter-spacing: .03em; }

/* 見出しと額を横に並べる。上下に分けると、写真を小さくすれば宙に浮き、
   大きくすれば画面に収まらない。横に置けば章まるごとが一画面に収まる。 */
.dressed { padding: 9vh 5vw; color: var(--black); background: var(--rose); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.7fr; align-items: end; gap: 4vw; }
.dressed .chapter-no { color: var(--rose-ink); }
.dressed-heading h2 { margin: 2vw 0 0; font-family: var(--display); font-size: clamp(42px, 6.9vw, 104px); line-height: .82; letter-spacing: -.055em; }
.dressed-heading p { margin: 1.4vw 0 0; font-size: 13px; line-height: 2; color: var(--rose-ink); }
/* 額は1枚ずつ。ヨークシャーの毛色 "blue and tan" に合わせて、金と銀を1つずつ使う。
   画像は使わず、斜めのグラデーションで金属の面（明→暗→明）を作り、
   内側の暗線・面取りの光・壁に落ちる影を box-shadow で重ねている。
   色は位置で決めているので、写真を差し替えても左が金・右が銀のまま。 */
.dressed-strip { display: flex; gap: clamp(10px, 1.4vw, 22px); }
.dressed-photo { flex: 1 1 0; min-width: 0; margin: 0; padding: clamp(9px, 1.4vw, 20px); }
.dressed-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; }

/* 左：金（帯の色と、毛色のタンに合わせる） */
.dressed-photo:first-child {
  background: linear-gradient(138deg, #f6e7b8, #c9a54f 24%, #8d6c2c 48%, #eddaa0 70%, #a8853c);
  box-shadow:
    inset 0 0 0 2px rgba(62,42,12,.5),
    inset 0 0 0 6px rgba(255,255,255,.18),
    inset 0 0 0 7px rgba(62,42,12,.28),
    0 28px 56px -22px rgba(70,45,20,.55),
    0 4px 10px rgba(70,45,20,.18); }

/* 右：銀（ドレスの白と、毛色のブルーに合わせる） */
.dressed-photo:last-child {
  background: linear-gradient(138deg, #fdfefe, #c6cad1 24%, #868d97 48%, #eef1f5 70%, #a4aab3);
  box-shadow:
    inset 0 0 0 2px rgba(38,44,54,.5),
    inset 0 0 0 6px rgba(255,255,255,.30),
    inset 0 0 0 7px rgba(38,44,54,.26),
    0 28px 56px -22px rgba(40,45,55,.5),
    0 4px 10px rgba(40,45,55,.16); }

.walks { position: relative; min-height: 115vh; overflow: hidden; display: flex; align-items: flex-end; padding: 5vw; isolation: isolate; }
.walks-photo, .walks-overlay { position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; }
/* 縦写真を全画面に敷くと被写体が下で切れるため、下寄りを見せる。
   横写真のときは上下に余りが出ないので、この指定は効かない（無害）。 */
.walks-photo { inset: -4% 0; background-position: center 70%; }
.walks-overlay { z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.02) 34%, rgba(0,0,0,.20) 66%, rgba(0,0,0,.80)); }
/* 見出しは写真の左下だけを使う。中央を空けておくと、どんな写真を入れても
   被写体（ふたりの顔）が文字で隠れない。 */
.walks-heading { max-width: min(52%, 620px); }
.walks-heading h2 { margin: 1.4vw 0 0; font-family: var(--display); font-size: clamp(52px, 7.4vw, 124px); line-height: .76; letter-spacing: -.07em; }
/* 明るい写真の上でも読めるよう、この小さな注記だけ下敷きを持つ（写真全体は暗くしない） */
.walk-notes { position: absolute; top: 13%; right: 6%; padding: 14px 18px; border-left: 1px solid var(--accent); background: rgba(12,9,7,.68); }
.walk-notes span { font-size: 9px; letter-spacing: .16em; color: var(--accent); }
.walk-notes p { font-size: 13px; line-height: 2; }
.route-line { position: absolute; right: 5vw; bottom: 6vw; display: flex; align-items: center; gap: 14px; font-size: 9px; letter-spacing: .16em; }
.route-line i { width: 12vw; height: 1px; background: var(--accent); }

.archive { background: var(--ivory); color: var(--black); }
.archive-head { display: flex; align-items: end; justify-content: space-between; padding-bottom: max(18px, 1.2vw); border-bottom: 2px solid var(--black); }
.archive-head h1, .archive-head h2 { margin: 0; font-family: var(--display); font-size: clamp(70px, 15vw, 250px); line-height: .75; letter-spacing: -.09em; }
/* 年表：左の年齢が貼り付いたまま、右の写真だけが流れていく。
   数字は輪郭だけで置き、その段が画面に入ると塗りつぶされる。 */
/* 年表：1年が1行。年号と罫線、その下に写真を横並び。それだけ。 */
/* 年号を左の列に置き、写真を右の列にまとめる。年号の上に太い罫線を引くと
   10行並んだときに表に見えるので、罫線は細く薄い1本だけにしてある。 */
.archive-list { display: flex; flex-direction: column; margin-top: 3vh; }
.archive-year { display: grid; grid-template-columns: minmax(118px, 16%) 1fr; gap: 2.6vw; align-items: start;
  padding: 3.2vw 0; border-top: 1px solid rgba(12,9,7,.15); }
.archive-year:first-child { border-top: 0; padding-top: 1.4vw; }
.archive-mark { display: block; padding: 0; margin: 0; border: 0; }
.archive-mark .year { display: block; font-family: var(--display); font-size: clamp(38px, 5.4vw, 88px); line-height: .86; letter-spacing: -.05em; color: var(--black); }
.archive-mark b { display: block; margin-top: 10px; font-size: 10px; letter-spacing: .2em; font-weight: 500; color: var(--accent-ink); }
.archive-mark p { margin: 15px 0 0; font-size: 12px; line-height: 1.9; color: #6b6459; }
.archive-mark.is-last .year { color: var(--warm); }
.archive-photos { display: flex; gap: 4px; }
.archive-photo { flex: 1 1 auto; height: clamp(170px, 21vw, 320px); margin: 0; overflow: hidden; }
.archive-photo img { width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.archive-photo:hover img { transform: scale(1.03); }
/* 年表は archive.html という別ページ。トップページには置かない
   （10年ぶんあるので、トップに入れると全体の4分の1を占めてしまう）。 */
.page-archive { color: var(--black); background: var(--ivory); }
.page-archive .archive { padding-top: 15vh; }
/* トップページの最後に置く、年表ページへの入口。 */
.archive-gate { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 6px 24px; padding: 8vh 5vw; color: var(--black); background: var(--ivory);
  border-top: 1px solid rgba(12,9,7,.14); transition: background .5s ease; }
.archive-gate span { grid-column: 1; font-size: 10px; letter-spacing: .18em; color: var(--accent-ink); }
.archive-gate strong { grid-column: 1; font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 8vw, 130px); line-height: .9; letter-spacing: -.05em; }
.archive-gate em { grid-column: 1; font-style: normal; font-size: 13px; line-height: 2; color: #6b6459; }
.archive-gate i { grid-column: 2; grid-row: 1 / 4; display: grid; place-items: center;
  width: clamp(56px, 6vw, 88px); aspect-ratio: 1; border: 1px solid var(--black); border-radius: 50%;
  font-size: 18px; font-style: normal; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.archive-gate:hover { background: #f1eee2; }
.archive-gate:hover i { transform: translateX(10px); }

.archive-back { display: inline-block; margin-top: 8vh; padding: 14px 22px;
  border: 1px solid var(--black); font-size: 11px; letter-spacing: .14em; }
.archive-back:hover { color: var(--ivory); background: var(--black); }

.random-memory { min-height: 105vh; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--sky); }
.memory-visual { min-height: 105vh; overflow: hidden; }
.memory-visual img { transition: opacity .25s ease, transform .7s ease; }
.memory-visual img.is-changing { opacity: 0; transform: scale(1.03); }
.memory-panel { display: flex; flex-direction: column; justify-content: center; padding: 7vw; }
.memory-date { margin-top: 10vh; color: var(--accent); font-size: 11px; letter-spacing: .18em; }
.memory-panel h2 { margin: 3.5vw 0 3vw; font-family: var(--display); font-size: clamp(60px, 9vw, 150px); line-height: .73; letter-spacing: -.09em; }
.memory-panel p { min-height: 4em; max-width: 30em; color: #c3bbb0; font-size: 14px; line-height: 2; }
.memory-panel button { width: 100%; display: flex; justify-content: space-between; margin-top: 7vw; padding: 18px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; cursor: pointer; font-size: 10px; letter-spacing: .18em; }
.memory-panel button:hover { color: var(--accent); }
.memory-panel small { margin-top: 13px; color: #8d96a0; font-size: 8px; letter-spacing: .14em; }

footer { padding: 5vw 4vw 2vw; background: var(--accent); color: var(--black); }
.footer-top { display: flex; align-items: end; justify-content: space-between; padding-bottom: 4vw; border-bottom: 2px solid var(--black); }
.footer-top p { margin: 0; font-family: var(--display); font-size: clamp(70px, 15vw, 270px); line-height: .65; letter-spacing: -.07em; }
.footer-top p span { color: var(--white); }
.footer-top a { font-size: 9px; letter-spacing: .15em; }
.footer-bottom { display: grid; grid-template-columns: 1fr 1fr auto; padding-top: 20px; font-size: 9px; letter-spacing: .12em; }
.footer-bottom nav { display: flex; gap: 28px; }

/* 明るい写真の章だけ、文字と暗幕を反転する。
   判定は script.js が写真の明るさを実測して .photo-light を付ける。 */
.hero.photo-light { align-items: end; padding-bottom: 17vh; color: var(--black); }
.hero.photo-light .hero-shade { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%, rgba(255,255,255,.26) 94%), linear-gradient(90deg, rgba(255,255,255,.14), transparent 50%); }
.hero.photo-light h1 { mix-blend-mode: normal; }
.hero.photo-light h1 span:last-child { color: var(--black); }
.hero.photo-light h1 b { color: var(--accent-ink); }
.hero.photo-light .hero-status { border-left-color: var(--accent-ink); }
.hero.photo-light .hero-status small { color: #5c5e54; }
.hero.photo-light .scroll-cue i { background: var(--black); }

.world.photo-light { color: var(--black); }
.world.photo-light::after { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.1) 30%, rgba(255,255,255,.8)); }
.world.photo-light:hover h2 { color: var(--accent-ink); }

.walks.photo-light { color: var(--black); }
.walks.photo-light .walks-overlay { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.74)); }
.walks.photo-light .walk-notes { border-left-color: var(--accent-ink); background: rgba(255,255,255,.62); }
.walks.photo-light .walk-notes span { color: var(--accent-ink); }
.walks.photo-light .route-line i { background: var(--accent-ink); }

.profile.photo-light .profile-type { -webkit-text-stroke-color: rgba(12,9,7,.42); }

/* 指で押す部分を広げる。見た目は変えず、当たり判定だけを外側へ広げている
   （文字が小さいリンクは、指の腹より小さいと押せない）。 */
.menu-toggle::before, .mini-logo::before, .scroll-cue::before,
.footer-top a::before, .archive-back::before {
  content: ""; position: absolute; inset: -15px; }
.mini-logo, .scroll-cue, .footer-top a, .archive-back { position: relative; }

@media (max-width: 760px) {
  .loader { padding:18px; }
  .loader-word { flex-wrap:wrap; font-size:24vw; }
  .loader-meta b { font-size:13vw; }
  .site-header { padding: 18px; }
  .hero { padding: 24vw 18px 32px; }
  .hero-media { background-position: 46% center; }
  .hero h1 { flex-wrap: wrap; align-content: center; gap: 0; font-size: 26vw; line-height: .82; }
  .hero h1 span { width: 100%; }
  .hero h1 b { position: absolute; left: 57%; bottom: 25%; }
  .hero-copy { top: 28%; right: 18px; font-size: 11px; }
  .hero-kicker { display: none; }
  .hero-status { top:13%; right:18px; min-width:145px; }
  .scroll-cue { left: 18px; right: auto; bottom: 18px; }
  .chapter { padding: 90px 18px; }
  .intro { min-height: 110vh; grid-template-columns: 1fr; display: block; }
  .intro-lead { margin: 20vh 0 12vh; font-size: 12vw; }
  .intro-aside { margin-bottom: 50px; }
  .intro-photo { width: calc(100% + 18px); height: 72vw; margin: 0 0 -26vw; }
  .worlds { grid-template-columns:1fr; }
  /* スマホは1列なので、枠の高さを画面ではなく幅から決める（64vw ≒ 3:2 の横長） */
  .world { min-height:64vw; padding:22px 18px; }
  .world > span { margin-bottom:10px; }
  .world h2 { font-size:20vw; }
  .world > i { right:18px; bottom:24px; }
  .profile { min-height: auto; display: flex; flex-direction: column; padding: 48vw 18px 90px; }
  .profile-image-wrap { height: 125vw; }
  .profile-type { top: 20vw; left: 7px; font-size: 36vw; }
  .profile-copy { width: 92%; align-self: flex-end; margin: -22vw 0 0; padding: 28px 22px; }
  .profile-copy h2 { font-size: 22vw; margin-bottom: 26px; }
  .statement { font-size: 17px; }
  .interlude { min-height: 42vh; padding: 0 18px; }
  .interlude p { font-size: 14vw; }
  .interlude span { margin-left: 6vw; -webkit-text-stroke-width: 2px; }
  .profile-rin { padding-top: 45vw; }
  .profile-rin .rin-field { inset: 0 40% 0 0; }
  .profile-rin .profile-image-wrap { order: 1; height: 125vw; }
  .profile-rin .profile-copy { order: 2; margin: -18vw 0 0; }
  .profile-rin .profile-type { top: 17vw; left: 8px; }
  .moments { min-height: auto; grid-template-columns: repeat(6,1fr); gap: 90px 10px; padding-top: 120px; }
  .moments-heading { grid-column: 1 / 7; }
  .moments-heading h2 { font-size: 20vw; }
  .moments-heading p { margin-left: 0; }
  .m1 { grid-column: 2 / 7; height: 95vw; }
  .m2 { grid-column: 1 / 6; height: 76vw; margin: 0; }
  .moment-quote { grid-column: 1 / 7; margin: 0; font-size: 21px; }
  .m3 { grid-column: 1 / 4; height: 80vw; }
  .m4 { grid-column: 3 / 7; height: 105vw; margin-top: 20vw; }
  .dressed { display: block; padding: 7vh 18px 8vh; }
  .dressed-heading { padding: 0; }
  .dressed-heading h2 { font-size: 17vw; }
  .dressed-strip { margin-top: 4vh; }
  .walks { min-height: 100svh; padding: 24px 18px 55px; }
  .walks-photo { background-position: 58% center; }
  .walks-heading { max-width: none; }
  .walks-heading h2 { font-size: 15vw; }
  .walk-notes { top: 15%; right: 18px; }
  .archive-head { display: block; }
  .archive-head h1, .archive-head h2 { font-size: 20vw; margin-top: 25px; }
  .archive-year { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .archive-year:first-child { padding-top: 6px; }
  .archive-mark .year { font-size: 42px; }
  .archive-mark b { margin-top: 6px; }
  .archive-mark p { margin-top: 10px; }
  .archive-photo { height: 40vw; }
  .random-memory { grid-template-columns: 1fr; }
  .memory-visual { min-height: 70vh; }
  .memory-panel { min-height: 85vh; padding: 90px 18px; }
  .memory-date { margin-top: 12vh; }
  .footer-top { display: block; }
  .footer-top p { font-size: 22vw; }
  .footer-top a { display: block; margin-top: 40px; }
  .footer-bottom { grid-template-columns: 1fr auto; gap: 30px; }
  .footer-bottom > span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media, .walks-photo { transform: none !important; }
  .scroll-cue i { animation: none; }
}

/* LIN の I と N のあいだだけ空きすぎるため、この一対だけ詰める。
   （L の足が I に寄るぶん L-I は狭く見え、I-N は縦線同士で広く見えるため） */
.kern-i { font-style: normal; margin-right: -.035em; }
.loader-word i.amp { color: var(--white); font-style: normal; font-size: .45em; margin-right: 0; }

/* 写真の拡大表示。クリックした1枚を全画面で見る。 */
.archive-photo img, .moment img, .intro-photo img, .memory-visual img, .profile-image-wrap img { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; z-index: 900; inset: 0; display: none; grid-template-columns: 64px 1fr 64px; align-items: center;
  padding: 72px 2vw; background: rgba(12,9,7,.94); backdrop-filter: blur(6px); }
.lightbox.is-open { display: grid; }
.lightbox-stage { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
.lightbox-stage img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 150px); object-fit: contain; cursor: zoom-out; }
.lightbox-stage figcaption { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.lightbox-close { position: absolute; top: 22px; right: 24px; border: 0; padding: 10px 14px; color: var(--white); background: none; cursor: pointer; font-size: 10px; letter-spacing: .18em; }
.lightbox-close:hover { color: var(--accent); }
.lightbox-move { height: 64px; border: 1px solid var(--line); background: none; color: var(--white); cursor: pointer; font-size: 18px; }
.lightbox-move:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }
.lightbox-count { position: absolute; left: 24px; top: 26px; color: var(--muted); font-size: 10px; letter-spacing: .16em; }
@media (max-width: 760px) {
  .lightbox { grid-template-columns: 44px 1fr 44px; padding: 64px 10px; }
  .lightbox-stage img { max-height: calc(100vh - 170px); }
  .lightbox-move { height: 52px; }
}

/* 写真をわずかに浮かせて立体感を出す（オーナー選定）。
   明るい写真がアイボリー背景に溶けるのを防ぐ役目も兼ねる。 */
/* 年表の写真は影を付けない。隙間4pxで詰めて並べるので、影が付くと
   1枚ずつのシールが貼ってあるように見える。 */
.moment { box-shadow: 0 18px 40px -20px rgba(12,9,7,.55), 0 2px 6px rgba(12,9,7,.10); }

/* 明るい版の比較用（?bg=light）。暗いのは写真が主役の章だけにして、
   読む章（導入・日常）を紙の色にする。 */

/* 読む章は紙の色、写真が主役の章は暗いまま。思い出の章は写真から拾った青灰色。 */
.intro { background: #efece3; color: var(--black); }
.intro-aside span { color: var(--accent-ink); }
.intro-aside p { color: #5c5a52; }
.intro-lead em { -webkit-text-stroke-color: rgba(12,9,7,.55); }
.intro-photo figcaption { color: #5c5a52; }
.intro .chapter-no { color: var(--accent-ink); }
.worlds { background: #efece3; }
.profile-tio { background: #4a3527; }
.profile-tio .profile-type { -webkit-text-stroke-color: rgba(243,241,233,.5); }
.profile-tio .profile-copy { background: rgba(12,9,7,.86); }
.moments { background: #f3f0e7; color: var(--black); }
.moments .chapter-no { color: var(--accent-ink); }
.moments-heading p { color: #5c5a52; }
.moment figcaption { color: #5c5a52; }
.moment-quote { color: var(--black); }
.archive .chapter-no { color: var(--accent-ink); }

/* 文章を空にしたら、その余白ごと消す */
figcaption:empty, .archive-mark p:empty, .moments-heading > p:empty,
.dressed-heading > p:empty { display: none; }
/* 中身が空なら、下敷きの箱ごと消す（空の黒い箱が写真に残らないように） */
.walk-notes:has(span:empty):has(p:empty) { display: none; }
/* 短文を消したら、その余白ごと詰める。ここを空けたままにすると見出しが上へ押し上がり、
   上から垂れてくる intro-photo に近づいてしまう。 */
.world p:empty { height: 0; margin: 0; }

/* 縦が短い画面では、メニュー7項目が一画面に収まらずスクロールが必要になる。
   文字サイズと余白に高さ基準の上限もかけて、開いた瞬間に全項目が見えるようにする。
   縦に余裕がある画面（861px以上）は従来どおりの大きな文字のまま。 */
@media (max-height: 860px) {
  .site-nav { padding: 7vh 10vw; gap: 1.2vh; }
  .site-nav a { padding: 0.7vh 0; font-size: clamp(30px, min(7vw, 7.2vh), 96px); }
}