/* Weidianliang / 沿途 — charcoal editorial system, v14. No external font or UI dependency. */
:root {
  color-scheme: dark;
  --paper: #191919;
  --fog: #8c8c86;
  --ink: #efeee8;
  --muted: #b4b4ad;
  --surface: #222222;
  --surface-soft: #303030;
  --light: #191919;
  --line: rgb(239 238 232 / 16%);
  --line-strong: rgb(239 238 232 / 28%);
  --serif: Georgia, 'Times New Roman', 'Songti SC', 'STSong', SimSun, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 20px;
  --shadow: 0 8px 24px rgb(74 92 106 / 7%);
  --gutter: 24px;
  --body: 1rem; --meta: .75rem; --label: .875rem;
  --card-title: 1.125rem;
  --section-title: clamp(1.75rem, 3.2vw, 2.75rem);
  --motion-fast: 180ms; --motion-slow: 450ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--body)/1.85 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button, a { touch-action: manipulation; }
a, button, summary { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--ink); }
button:disabled { opacity: .4; cursor: default; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
figure, h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; overflow-wrap: anywhere; }
h2 { font-family: var(--serif); font-size: var(--section-title); line-height: 1.5; letter-spacing: -.025em; text-wrap: balance; }
h3 { font-size: var(--card-title); line-height: 1.5; }
::selection { background: var(--fog); color: var(--ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eyebrow, .tiny { overflow-wrap: anywhere; font: 400 var(--meta)/1.6 var(--sans); letter-spacing: .12em; color: var(--muted); }
.eyebrow { margin-bottom: var(--s4); }
.skip { position: fixed; z-index: 50; left: var(--s4); top: var(--s4); padding: var(--s3) var(--s4); background: var(--ink); color: var(--light); transform: translateY(-180%); }
.skip:focus { transform: none; }

/* A quiet masthead. Mobile keeps six destinations in a compact disclosure. */
.nav { position: fixed; inset: 0 0 auto; z-index: 10; min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: var(--s6); padding: var(--s4) var(--gutter); }
.nav { transition: background var(--motion-fast), border-color var(--motion-fast); border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgb(25 25 25 / 92%); border-color: var(--line); backdrop-filter: blur(8px); }
.wordmark { font-family: var(--serif); font-size: 1.125rem; line-height: 1.25; }
.wordmark span { display: none; margin-top: var(--s1); font: var(--meta)/1.5 var(--sans); letter-spacing: .12em; color: var(--muted); }
.desktop-nav { display: none; }
.mobile-menu { position: relative; }
.mobile-menu summary { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding-left: var(--s3); font-size: var(--label); cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; top: calc(100% + var(--s2)); right: 0; width: 192px; padding: var(--s2); border: 1px solid var(--line); background: rgb(30 30 30 / 98%); border-radius: var(--radius); box-shadow: var(--shadow); }
.mobile-menu nav a { display: block; padding: var(--s3) var(--s4); border-radius: var(--radius-sm); font-size: var(--label); }
.mobile-menu nav a:hover { background: var(--surface-soft); }

/* A pale photographic opening: asymmetrical image, one title, one entry. */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 96px var(--gutter) var(--s6); background: var(--surface); }
.portrait-bg { position: absolute; z-index: -3; top: 80px; right: -6%; left: 13%; height: 55%; min-height: 340px; background: url('assets/avatar.jpg') 58% 36% / cover no-repeat; filter: grayscale(.85) contrast(.76) brightness(1.18); opacity: .87; mask-image: linear-gradient(90deg, transparent, #000 16%), linear-gradient(180deg, transparent, #000 8%, #000 68%, transparent); mask-composite: intersect; }
.hero-fog { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, var(--surface), rgb(237 240 237 / 68%) 12%, transparent 48%), linear-gradient(180deg, transparent 27%, rgb(237 240 237 / 48%) 43%, var(--surface) 63%); }
.hero-content { position: relative; margin-top: clamp(208px, 28svh, 280px); }
.hero-content .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); letter-spacing: .13em; }
.eyebrow-line { display: block; width: var(--s8); height: 1px; background: var(--fog); }
h1 { font-family: var(--serif); font-size: clamp(2.75rem, 15.2vw, 5rem); line-height: 1.05; letter-spacing: -.06em; font-weight: 400; overflow-wrap: anywhere; }
.hero-statement { font: 400 clamp(1.5rem, 5vw, 2rem)/1.5 var(--serif); letter-spacing: .025em; margin-top: var(--s6); }
.intro { margin-top: var(--s6); color: var(--muted); font-size: var(--label); letter-spacing: .025em; }
.hero-english { display: block; font-size: var(--meta); letter-spacing: .015em; margin-top: var(--s1); }
.hero-actions { display: flex; align-items: center; margin-top: var(--s8); }
.primary-link { display: inline-flex; gap: var(--s8); align-items: center; justify-content: space-between; min-height: 48px; padding: var(--s3) var(--s6); border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--ink); color: var(--light); font-size: var(--label); transition: background var(--motion-fast), transform var(--motion-fast); }
.primary-link svg { width: 18px; height: 18px; transition: transform var(--motion-fast); }
.primary-link:hover { background: color-mix(in srgb, var(--ink) 90%, var(--fog)); }
.primary-link:hover svg { transform: translate(2px, -2px); }
.primary-link:active { transform: translateY(1px); }
.hero-note { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--line); }
.hero-note > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.hero-note .tiny { font-size: var(--meta); letter-spacing: .09em; }
.hero-note p { font-size: var(--meta); color: var(--muted); }
.hero-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); font-size: var(--meta); color: var(--muted); letter-spacing: .02em; }
.hero-bottom a { display: flex; gap: var(--s2); align-items: center; min-height: 44px; }
.hero-bottom svg { width: 16px; height: 16px; }
.section-nav { display: none; }

/* Shared editorial rhythm, with open rows instead of nested card containers. */
.section { width: 100%; max-width: 1248px; margin: auto; padding: var(--s16) var(--gutter); }
.section-title, .music-heading { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s8); }
.section-title > p, .music-heading > p { color: var(--muted); font-size: var(--label); }
.personal-story { display: grid; gap: var(--s8); align-items: center; }
.story-art { width: min(100%, 420px); margin-inline: auto; }
.story-art img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.story-art figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font-size: var(--meta); color: var(--muted); padding-top: var(--s3); }
.story-text { min-width: 0; }
.story-text h3 { font: 400 clamp(1.5rem, 2.8vw, 2rem)/1.7 var(--serif); margin-bottom: var(--s6); }
.story-school { font-size: var(--body); }
.story-english { color: var(--muted); font-size: var(--meta); letter-spacing: .04em; margin-top: var(--s1); }
.personality { margin-top: var(--s8); padding: var(--s6) 0; border-block: 1px solid var(--line); }
.personality-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.personality h4 { font-size: var(--label); }
.mbti-label { display: inline-flex; align-items: baseline; gap: var(--s2); font-size: var(--meta); color: var(--muted); }
.mbti-label strong { font-weight: 500; color: var(--ink); font-size: var(--label); letter-spacing: .12em; }
.personality > p { color: var(--muted); line-height: 1.95; }
.personality > p + p { margin-top: var(--s3); }
.story-intro { color: var(--muted); font-size: var(--label); margin-top: var(--s6); }
.story-intro br { display: none; }
.story-signature { font: italic 1.5rem/1.5 var(--serif); margin-top: var(--s6); }
.connections { background: transparent; border-radius: var(--radius); }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
.connection-card { min-width: 0; overflow-wrap: anywhere; border-top: 1px solid var(--line-strong); padding-top: var(--s4); }
.connection-index { font-family: var(--serif); font-size: var(--meta); color: var(--muted); }
.connection-card .tiny { margin: var(--s4) 0 var(--s2); letter-spacing: .08em; }
.connection-card h3 { font-size: var(--card-title); }
.connection-verb { font: italic 1rem/1.5 var(--serif); color: var(--muted); margin-top: var(--s3); min-height: 48px; }
.connection-detail { font-size: var(--label); color: var(--muted); margin-top: var(--s4); }
.project { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s3) var(--s4); border-top: 1px solid var(--line); padding-block: var(--s8); }
.project:last-child { border-bottom: 1px solid var(--line); }
.project-no { font: 1.25rem/1.5 var(--serif); color: var(--muted); }
.project .tiny { overflow-wrap: anywhere; letter-spacing: .06em; }
.project h3 { margin: var(--s2) 0 var(--s3); font-size: 1.25rem; }
.project p { color: var(--muted); }
.project p br { display: none; }
.project-tag { grid-column: 2; font-size: var(--meta); color: var(--muted); }
.now { padding-top: 0; }
.now-grid { display: grid; gap: var(--s6); margin-top: var(--s8); }
.now-item { border-top: 1px solid var(--line); padding-top: var(--s4); }
.now-item h3 { margin-block: var(--s3) var(--s2); }
.now-item p { color: var(--muted); }
.now-item p br { display: none; }
.moments { color: var(--ink); position: relative; isolation: isolate; overflow: hidden; min-height: 440px; display: flex; align-items: center; background: var(--surface); border-radius: var(--radius-lg); margin: 0 var(--s3); }
.rain, .rain-shade { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.rain { object-fit: cover; filter: grayscale(.6) brightness(1.4); opacity: .45; }
.rain-shade { background: linear-gradient(90deg, rgb(237 240 237 / 97%), rgb(237 240 237 / 65%) 55%, rgb(237 240 237 / 35%)); }
.moment-copy { width: 100%; max-width: 1248px; margin: auto; padding: var(--s16) var(--gutter) var(--s24); }
.moment-copy h2 { line-height: 1.65; }
.moment-copy h2 em { font-style: normal; color: var(--muted); }
.moment-copy > p:not(.eyebrow) { margin: var(--s6) 0; }
.rain-caption { position: absolute; bottom: var(--s6); right: var(--s6); font-size: var(--label); color: var(--muted); text-align: right; }
.rain-caption span { display: block; font-size: var(--meta); letter-spacing: .08em; }

/* Uncropped photographic contact sheet; captions live on a shallow scrim. */
.photo-grid { display: grid; grid-template-columns: repeat(var(--photo-columns, 2), minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.photo-column { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.photo-item { position: relative; min-width: 0; isolation: isolate; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.photo-button { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; text-align: left; overflow: hidden; }
.photo-button img { display: block; width: 100%; height: auto; }
.photo-item .photo-button:focus-visible { outline-offset: -4px; }
.photo-grid > .photo-item { grid-column: 1 / -1; }
.photo-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 76%, rgb(74 92 106 / 72%)); }
.photo-item figcaption { z-index: 1; position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); pointer-events: none; background: none; color: #f0f2f1; }
.photo-item h3 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--label); font-weight: 400; line-height: 1.5; text-shadow: 0 1px 8px rgb(74 92 106 / 50%); }
.photo-index { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; font-size: var(--meta); font-variant-numeric: tabular-nums; }
.photo-index svg { width: 14px; height: 14px; }
.photo-item img { transition: opacity .25s; }
@media (hover: hover) {
  .photo-item figcaption { z-index: 1; opacity: .85; transition: opacity .2s; }
  .photo-item:hover figcaption, .photo-item:focus-within figcaption { opacity: 1; }
  .photo-item:hover img { opacity: .94; }
}

/* Music stays a record shelf: covers and typography, no outer boxes. */
.listening { padding-top: var(--s8); }
.music-heading > p span { color: var(--muted); font-size: var(--meta); }
.album-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s4); }
.album { min-width: 0; display: block; padding: 0; border: 0; background: none; text-align: left; }
.album-cover { display: block; position: relative; overflow: hidden; border-radius: var(--radius-sm); transition: transform .2s; }
.album-cover img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.album:hover .album-cover { transform: translateY(-2px); }
.album-open { transition: opacity var(--motion-fast); position: absolute; right: var(--s2); bottom: var(--s2); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgb(74 92 106 / 20%); background: rgb(25 25 25 / 65%); }
.album-open svg { width: 16px; height: 16px; }
.album-title { display: block; font: 1.125rem/1.4 var(--serif); margin-top: var(--s3); overflow-wrap: anywhere; }
.album-artist { display: block; color: var(--muted); font-size: var(--label); margin-top: var(--s1); }

/* Progressive galleries: the main image works before JS; controls appear only for 2+ images. */
.games { padding-top: var(--s8); }
.game-feature { margin-bottom: var(--s8); }
.game-media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.game-media .photo-button { border-radius: inherit; touch-action: pan-y pinch-zoom; }
.game-media .photo-button img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; transition: opacity .18s; }
.game-feature .photo-button img { aspect-ratio: 16 / 9; }
.image-open { transition: background var(--motion-fast); position: absolute; right: var(--s2); top: var(--s2); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(25 25 25 / 65%); border: 1px solid rgb(74 92 106 / 20%); }
.image-open svg { width: 16px; height: 16px; }
.game-grid { display: grid; gap: var(--s8); }
.game-card { min-width: 0; }
.game-card figcaption, .game-feature figcaption, .game-fragment figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: var(--s4) 0 0; }
.game-card h3 { grid-column: 1; }
.game-en { grid-column: 1; overflow-wrap: anywhere; font-size: var(--meta); color: var(--muted); margin-top: var(--s1); }
.game-card figcaption p { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: var(--meta); }
.game-feature .tiny { margin-bottom: var(--s1); }
.game-feature h3, .game-fragment h3 { font-size: 1.25rem; }
.game-feature figcaption > p, .game-fragment figcaption > p { color: var(--muted); font-size: var(--label); align-self: end; }
.game-fragment { max-width: 768px; margin-top: var(--s12); }
.gallery-controls { position: absolute; bottom: var(--s2); left: var(--s2); display: inline-flex; align-items: center; gap: var(--s1); border: 1px solid rgb(239 238 232 / 16%); border-radius: var(--radius-sm); background: rgb(25 25 25 / 85%); }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--ink); transition: background .2s; }
.icon-button:hover { background: rgb(155 168 171 / 16%); }
.icon-button:active { background: rgb(155 168 171 / 28%); }
.gallery-count, .viewer-count { min-width: 40px; text-align: center; font-size: var(--meta); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.gallery-loading { opacity: .65; }
.gallery-message { margin-top: var(--s2); color: var(--muted); font-size: var(--label); }
.contact { padding-block: var(--s24); text-align: center; }
.contact > p:not(.eyebrow) { color: var(--muted); margin-top: var(--s6); }
.contact-note { display: inline-block; margin-top: var(--s6); color: var(--muted); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); font-size: var(--label); }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); max-width: 1120px; margin: auto var(--gutter); border-top: 1px solid var(--line); padding-block: var(--s6); color: var(--muted); font-size: var(--meta); }
footer > a:first-child { width: 100%; font: 1.25rem/1.4 var(--serif); color: var(--ink); }
footer em { font: var(--label)/1.5 var(--sans); margin-left: var(--s3); }

/* Native dialogs preserve Escape, focus containment, and screen-reader semantics. */
.photo-dialog, .album-dialog { max-height: calc(100dvh - 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); padding: var(--s16) var(--s4) var(--s6); box-shadow: var(--shadow); }
.photo-dialog::backdrop, .album-dialog::backdrop { background: rgb(12 12 12 / 96%); backdrop-filter: blur(4px); }
.photo-dialog { width: min(1120px, calc(100vw - 24px)); }
.album-dialog { width: min(820px, calc(100vw - 24px)); }
.photo-close, .album-close { position: absolute; right: var(--s2); top: var(--s2); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.photo-close:hover, .album-close:hover { background: var(--surface-soft); }
.photo-dialog img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 240px); object-fit: contain; margin-inline: auto; border-radius: var(--radius-sm); }
.photo-dialog figcaption { padding-top: var(--s4); }
.photo-dialog h2 { font-family: var(--sans); font-size: var(--card-title); }
.photo-dialog figcaption p { margin-top: var(--s2); font-size: var(--label); color: var(--muted); }
.viewer-navigation { position: absolute; top: var(--s2); left: var(--s2); display: flex; align-items: center; }
.album-dialog-layout { display: grid; gap: var(--s6); }
.album-dialog-layout > img { width: min(100%, 240px); height: auto; justify-self: center; border-radius: var(--radius-sm); }
.album-dialog-copy h2 { font-size: 2rem; line-height: 1.25; overflow-wrap: anywhere; }
#album-dialog-meta { color: var(--muted); font-size: var(--label); margin-block: var(--s4); }
#album-dialog-description { line-height: 1.9; }
#album-dialog-source { display: inline-block; color: var(--muted); text-decoration: underline; font-size: var(--label); margin-top: var(--s4); }
body.album-is-open, body.photo-is-open { overflow: hidden; }

/* Enhancement only: content remains visible if an observer is unavailable. */
.motion-ready .reveal { transition: opacity var(--motion-slow), transform var(--motion-slow); }
.motion-ready .reveal:not(.visible) { opacity: 0; transform: translateY(8px); }
@media (min-width: 700px) {
  :root { --gutter: 48px; }
  .nav { padding-block: var(--s3); }
  .mobile-menu { display: none; }
  .desktop-nav { display: flex; gap: var(--s6); font-size: var(--label); }
  .desktop-nav a { display: flex; align-items: center; min-height: 44px; color: var(--muted); transition: color .2s; }
  .desktop-nav a:hover { color: var(--ink); }
  .hero { min-height: min(920px, 100svh); padding-top: 176px; }
  .hero-content { margin: 0; }
  h1 { font-size: clamp(4rem, 9.4vw, 8.5rem); }
  .hero-fog { background: linear-gradient(90deg, var(--surface) 5%, rgb(237 240 237 / 94%) 27%, rgb(237 240 237 / 25%) 65%, transparent), linear-gradient(0deg, var(--surface), transparent 45%); }
  .portrait-bg { top: 64px; bottom: 0; left: 34%; right: -4%; height: calc(100% - 64px); min-height: 0; mask-image: linear-gradient(180deg, transparent, #000 10%, #000 70%, transparent); background-position: 55% 34%; opacity: .85; }
  .hero-note { align-self: flex-start; border: 0; padding: 0; margin-top: var(--s12); }
  .hero-bottom { margin-top: var(--s12); padding-top: var(--s4); border-top: 1px solid var(--line); }
  .section { padding-block: var(--s24); }
  .section-title, .music-heading { flex-direction: row; align-items: end; justify-content: space-between; gap: var(--s8); margin-bottom: var(--s12); }
  .personal-story { grid-template-columns: .9fr 1fr; gap: var(--s12); }
  .story-art { width: 100%; }
  .connections { width: calc(100% - 48px); }
  .now { padding-top: 0; }
  .now-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .moments { margin-inline: var(--s6); min-height: 520px; }
  .moment-copy { padding-block: var(--s24); }
  .photo-grid { grid-template-columns: repeat(var(--photo-columns, 3), minmax(0, 1fr)); gap: var(--s4); }
  .photo-column { gap: var(--s4); }
  .photo-item figcaption { z-index: 1; padding: var(--s3) var(--s4); }
  .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
  .game-feature { margin-bottom: var(--s12); }
  .game-feature .photo-button img { aspect-ratio: 2.1; }
  .listening, .games { padding-top: var(--s8); }
  .album-dialog, .photo-dialog { padding-inline: var(--s8); }
  .album-dialog-layout { grid-template-columns: 1fr 1.2fr; gap: var(--s8); align-items: center; }
  .album-dialog-layout > img { width: 100%; }
  .photo-dialog figcaption { display: flex; justify-content: space-between; gap: var(--s6); align-items: baseline; }
  footer > a:first-child { width: auto; }
}
@media (min-width: 1100px) {
  :root { --gutter: 64px; }
  .nav { padding-inline: 6%; }
  .hero { padding-inline: 8%; justify-content: center; min-height: 720px; height: 100svh; max-height: 1100px; padding-block: 144px; }
  .hero-note { position: absolute; right: 8%; bottom: 112px; margin: 0; }
  .hero-note > div { display: block; }
  .hero-note p { margin-top: var(--s2); }
  .hero-bottom { position: absolute; left: 8%; right: 8%; bottom: var(--s6); }
  .hero-statement { font-size: 2rem; }
  .connection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); }
  .connection-verb { min-height: 48px; }
  .personal-story { gap: var(--s24); }
  .project { grid-template-columns: 48px 1fr auto; gap: var(--s6); }
  .project-tag { grid-column: auto; padding-top: var(--s1); }
  footer { margin-inline: auto; }
}
@media (min-width: 1440px) {
  .section-nav { display: flex; position: fixed; z-index: 4; right: var(--s6); top: 40%; flex-direction: column; gap: var(--s2); color: var(--muted); font-size: var(--meta); }
  .section-nav a { display: block; padding: var(--s1) var(--s2); border-right: 1px solid transparent; }
  .section-nav a.active { border-color: var(--ink); color: var(--ink); }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .photo-grid { gap: var(--s2); }
  .photo-column { gap: var(--s2); }
  .photo-item figcaption { z-index: 1; padding-inline: var(--s2); }
  .photo-index { display: none; }
  .hero-actions { gap: var(--s4); }
  .connection-grid { gap: var(--s6) var(--s4); }
}

/* Native horizontal scrolling works with touch, trackpad, keyboard and without JS. */
.album-grid { display: flex; gap: var(--s6); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s1); scroll-behavior: smooth; padding: var(--s2) var(--s1) var(--s6); scrollbar-width: thin; scrollbar-color: var(--fog) transparent; }
.album { flex: 0 0 76%; scroll-snap-align: start; align-self: flex-start; }
.album-cover img { -webkit-user-drag: none; user-select: none; }
.album-grid:focus-visible { outline-offset: 4px; }
.shelf-toolbar { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s3); margin-bottom: var(--s3); }
.shelf-status { font-size: var(--meta); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.shelf-navigation { display: flex; gap: var(--s2); }
.shelf-navigation .icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (min-width: 700px) { .album { flex-basis: 30%; } }
@media (prefers-reduced-motion: reduce) { .album-grid { scroll-behavior: auto; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal:not(.visible) { opacity: 1; transform: none; }
}

/* v14 composition — charcoal, image-led, with glass confined to the biography. */
:root { --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --shadow: 0 12px 40px #0002; --section-title: clamp(2rem,4vw,3.5rem); }
body { line-height:1.8; }
.wordmark { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:14px; }
.wordmark .identity-name { display:inline; margin:0; color:inherit; font:inherit; letter-spacing:0; }
.identity-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.nav { min-height:64px; padding-block:8px; }
.section-nav { display:none; }
.hero { height:100svh; min-height:760px; max-height:1100px; padding:96px 5% 24px; justify-content:flex-end; background:#191919; }
.portrait-bg { inset:40px 12% 0 28%; height:auto; min-height:0; max-height:none; background:none; opacity:1; filter:none; mask-image:linear-gradient(90deg,transparent,#000 18%,#000 80%,transparent); }
.portrait-bg img { width:100%; height:100%; object-fit:contain; object-position:center top; }
.hero-fog { background:linear-gradient(0deg,#191919 1%,#19191900 46%); }
.hero-content { margin:0; display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:16px 32px; }
.hero-content .eyebrow { position:absolute; top:112px; left:0; font-size:11px; }
h1 { grid-column:1/-1; order:3; font:600 clamp(60px,13.3vw,210px)/.9 var(--sans); letter-spacing:-.065em; margin-top:16px; overflow-wrap:normal; }
.hero-content .eyebrow { position:static; grid-column:1/-1; order:0; margin-bottom:8px; }
.hero-statement { order:1; font:400 clamp(24px,3vw,42px)/1.4 var(--serif); margin:0; }
.intro { order:2; margin:0; text-align:right; font-size:13px; }
.hero-english { font-size:10px; }
.hero-actions { order:4; grid-column:1/-1; margin-top:16px; }
.primary-link { border-radius:0; padding:8px 0; border:0; border-bottom:1px solid #efeee86b; background:transparent; color:var(--ink); min-width:152px; min-height:44px; }
.primary-link:hover { background:transparent; border-color:var(--ink); }
.hero-note { position:absolute; top:112px; right:5%; bottom:auto; background:none; padding:0; border:0; margin:0; font-size:10px; }
.hero-note p { display:none; }
.hero-note .tiny { font-size:10px; }
.hero-bottom { position:static; margin-top:16px; padding-top:8px; border-top:1px solid var(--line); font-size:10px; }
.hero-bottom a { min-height:32px; }
.section { max-width:1400px; padding-block:96px; }
.section-title { margin-bottom:48px; }
h2 { font-family:var(--sans); letter-spacing:-.035em; line-height:1.25; }
.about { max-width:none; padding-bottom:48px; }
.about>.section-title { max-width:1272px; margin-inline:auto; }
.personal-story { max-width:1272px; margin:auto; grid-template-columns:.65fr 1fr; gap:64px; padding:64px; background:linear-gradient(90deg,#10101022,#10101011),url('assets/photos/p27.jpg') center/cover; border-radius:4px; }
.story-art { width:100%; max-width:300px; }
.story-art img { border-radius:0; }
.story-art figcaption { color:#eeeee8; }
.story-text { position:relative; padding:32px; background:linear-gradient(120deg,#ffffff12,#16161650); border:1px solid #ffffff42; border-radius:12px; backdrop-filter:blur(14px) saturate(.9); -webkit-backdrop-filter:blur(14px) saturate(.9); box-shadow:inset 1px 1px 0 #ffffff20,inset -1px -1px 0 #ffffff0d,0 24px 56px #0003; color:#f5f3ed; }
.story-text .eyebrow,.story-text .story-english,.story-text .story-intro,.story-text .personality>p,.story-text .mbti-label { color:#dbdcd7; }
.glass-avatar { width:48px; height:48px; object-fit:cover; border-radius:50%; margin-bottom:16px; }
.story-text h3 { font-family:var(--sans); line-height:1.45; }
.personality { margin-top:24px; padding-block:16px; }
.story-signature { font-size:24px; }
.identity-studio { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-top:48px; }
.identity-copy>p:not(.eyebrow) { margin-top:24px; color:var(--muted); }
.identity-switch { display:flex; gap:24px; margin-top:32px; }
.identity-switch button { background:none; padding:12px 0; border:0; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; }
.identity-switch button[aria-pressed=true] { color:var(--ink); border-color:var(--ink); }
.identity-art { min-width:0; }
.identity-art img { height:400px; width:100%; object-fit:contain; }
.identity-art.painted img { height:400px; width:100%; object-fit:contain; }
.identity-art figcaption { margin-top:24px; padding-top:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.identity-art figcaption span { font:italic 18px var(--serif); }
.type-chapter { overflow:hidden; padding:64px 5%; background:#222; border-block:1px solid var(--line); }
.type-chapter>div { padding:32px 0; }
.type-chapter span { display:block; font:500 clamp(36px,9.5vw,160px)/.88 var(--sans); letter-spacing:-.06em; white-space:nowrap; }
.type-chapter span:nth-child(2) { margin-left:24%; }
.type-chapter span:nth-child(3) { margin-left:-6%; }
.type-chapter span:nth-child(4) { margin-left:18%; }
.type-chapter span:nth-child(5) { margin-left:40%; }
.outline { color:transparent; -webkit-text-stroke:1px #efeee898; }
.connections { width:100%; background:transparent; border-radius:0; }
.connection-card { padding-top:24px; }
.moments { margin:0 5%; min-height:580px; border-radius:0; color:var(--ink); overflow:visible; }
.rain { filter:none; opacity:1; }
.rain-shade { background:linear-gradient(90deg,#111b,transparent); }
.moment-copy { padding:64px; }
.moment-copy h2 em { color:var(--ink); }
.rain-caption { color:#eee; }
.outline-bridge { position:relative; margin-top:-.48em; z-index:1; font:600 12.2vw/.95 var(--sans); letter-spacing:-.055em; color:transparent; -webkit-text-stroke:1px #eeeee8; text-align:center; white-space:nowrap; pointer-events:none; }
.photo-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:64px 32px; align-items:start; }
.photo-grid>.photo-item { grid-column:span 4; background:none; border-radius:0; overflow:visible; }
.photo-grid>.photo-item:nth-child(6n+1) { grid-column:span 5; }
.photo-grid>.photo-item:nth-child(6n+2) { grid-column:span 3; margin-top:96px; }
.photo-grid>.photo-item:nth-child(6n+3) { grid-column:span 4; margin-top:32px; }
.photo-grid>.photo-item:nth-child(6n+4) { grid-column:2/span 3; }
.photo-grid>.photo-item:nth-child(6n+5) { grid-column:6/span 5; margin-top:64px; }
.photo-grid>.photo-item:nth-child(6n+6) { grid-column:span 4; margin-top:32px; }
.photo-item::after { display:none; }
.photo-item figcaption { position:static; padding:12px 0 0; color:var(--ink); opacity:1; align-items:center; }
.photo-item h3 { text-shadow:none; white-space:normal; font-size:14px; }
.photo-index { color:var(--muted); font-size:11px; }
.photo-item .photo-button { background:none; }
.photo-item img { border-radius:2px; }
.photo-series { padding-top:0; }
.series-spread { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:64px; }
.series-spread>div { padding-top:32px; }
.series-description { margin:24px 0 48px; color:var(--muted); }
.series-spread figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:12px; }
.series-spread figcaption h3 { font-size:14px; }
.series-spread figcaption span { font-size:10px; color:var(--muted); }
.photo-strip { display:flex; align-items:center; gap:32px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--fog) transparent; padding:32px 0; cursor:grab; }
.photo-strip figure { flex:0 0 auto; width:auto; scroll-snap-align:start; }
.photo-strip img { height:320px; width:auto; max-width:none; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.photo-strip h3 { font-size:14px; }
.photo-strip figcaption { display:flex; justify-content:space-between; padding-top:12px; font-size:11px; gap:16px; }
.photo-strip.is-dragging,.album-grid.is-dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
.game-media,.album-cover { border-radius:2px; }
.game-grid { gap:64px 32px; }
.game-feature .photo-button img,.game-media .photo-button img { aspect-ratio:auto; object-fit:contain; }
.gallery-controls { border-color:#ffffff26; backdrop-filter:blur(6px); }
.icon-button { min-width:44px; min-height:44px; }
.image-open,.album-open { border:1px solid #ffffff40; background:#19191955; color:#fff; box-shadow:none; }
.photo-dialog { width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; margin:0; border:0; border-radius:0; padding:64px 32px 24px; background:#151515; }
.photo-dialog-image,#photo-dialog-image { max-height:calc(100dvh - 240px); width:100%; object-fit:contain; }
.photo-dialog figcaption { padding-top:16px; }
.viewer-index { display:flex; gap:8px; overflow-x:auto; padding-block:12px; margin-top:12px; border-top:1px solid var(--line); }
.viewer-index button { flex:0 0 44px; min-height:44px; border:1px solid transparent; background:transparent; color:var(--muted); font-size:12px; }
.viewer-index button[aria-current=true] { border-color:var(--line-strong); color:var(--ink); }
.original-link { font-size:12px; text-decoration:underline; display:inline-block; padding:8px 0; }
.personal-sign { width:200px; height:64px; margin:0 auto 32px; }
.contact { padding-block:96px; }
@media(max-width:699px) {
 :root { --gutter:24px; }
 .hero { height:auto; min-height:844px; min-height:100svh; max-height:none; padding:440px 24px 16px; }
 .portrait-bg { inset:48px -8% auto -8%; height:520px; mask-image:linear-gradient(180deg,#000 68%,transparent); }
 .portrait-bg img { object-fit:contain; }
 .hero-fog { background:linear-gradient(0deg,#191919 3%,#19191900 55%); }
 .hero-content { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
 .hero-content .eyebrow { font-size:9px; margin-bottom:12px; order:0; }
 h1 { order:1; font-size:15.4vw; line-height:.92; margin:0; letter-spacing:-.065em; }
 .hero-statement { order:2; font-size:26px; margin-top:24px; }
 .intro { order:3; text-align:left; font-size:12px; margin-top:16px; }
 .hero-english { font-size:9px; }
 .hero-actions { margin-top:16px; }
 .hero-note { top:88px; right:24px; writing-mode:vertical-rl; }
 .hero-note .tiny { font-size:8px; letter-spacing:.08em; }
 .hero-bottom { margin-top:24px; font-size:9px; }
 .section { padding-block:64px; }
 .section-title { margin-bottom:32px; }
 .about { padding-inline:0; padding-bottom:32px; }
 .about>.section-title { padding-inline:24px; }
 .about h2 { font-size:28px; }
 .personal-story { display:flex; flex-direction:column-reverse; gap:32px; padding:32px 16px; border-radius:0; }
 .story-text { padding:24px; }
 .story-text h3 { font-size:24px; }
 .story-school { font-size:14px; }
 .personality>p { font-size:14px; }
 .story-art { max-width:216px; margin-left:8px; }
 .story-art figcaption { font-size:9px; }
 .identity-studio { grid-template-columns:1fr; gap:32px; padding-top:32px; }
 .identity-copy h2 { font-size:32px; }
 .identity-art img,.identity-art.painted img { height:320px; }
 .identity-copy>p:not(.eyebrow) { font-size:14px; }
 .type-chapter { padding:48px 24px; }
 .type-chapter .eyebrow { font-size:9px; }
 .type-chapter span { font-size:12vw; }
 .type-chapter span:nth-child(2) { margin-left:24%; }
 .type-chapter span:nth-child(3) { font-size:10.7vw; margin-left:-3%; }
 .type-chapter span:nth-child(4) { margin-left:8%; }
 .type-chapter span:nth-child(5) { margin-left:28%; }
 .moments { margin-inline:16px; min-height:480px; }
 .moment-copy { padding:48px 24px; }
 .outline-bridge { font-size:12vw; }
 .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 16px; }
 .photo-grid>.photo-item:nth-child(n) { grid-column:auto; margin:0; }
 .photo-grid>.photo-item:nth-child(5n+1) { grid-column:1/-1; width:88%; }
 .photo-grid>.photo-item:nth-child(5n+3) { margin-top:48px; }
 .photo-grid>.photo-item:nth-child(5n+4) { grid-column:1/-1; width:76%; justify-self:end; }
 .photo-item h3 { font-size:12px; }
 .photo-item figcaption { gap:8px; }
 .photo-index { font-size:9px; }
 .photo-index svg { width:12px; height:12px; }
 .photo-series { padding-top:0; }
 .series-spread { grid-template-columns:1fr; gap:32px; }
 .series-spread>div { padding:0; }
 .series-spread>figure { width:76%; }
 .series-description { margin-bottom:32px; font-size:14px; }
 .photo-strip { gap:16px; }
 .photo-strip img { height:216px; max-width:78vw; object-fit:contain; }
 .photo-strip .photo-button { background:transparent; }
 .game-grid { gap:32px; }
 .photo-dialog { padding:64px 16px 16px; }
 .photo-dialog h2 { font-size:20px; }
 .photo-dialog figcaption { display:block; }
 .photo-dialog figcaption p { font-size:13px; }
 #photo-dialog-image { max-height:calc(100dvh - 280px); }
}
@media(prefers-reduced-motion:reduce) { .photo-strip { scroll-behavior:auto; } }
/* Bound visually-hidden captions to their own gallery instead of the root scroll area. */
body { overflow-x:clip; }
.photo-strip,.album-grid,.strip-photo { position:relative; }
.strip-photo .sr-only { left:0; top:0; }

#photo-dialog-image { height:calc(100dvh - 240px); }
.viewer-index { scrollbar-width:thin; scrollbar-color:var(--fog) transparent; }
@media(max-width:699px) { #photo-dialog-image { height:calc(100dvh - 280px); } }

/* V15 / a typographic identity: tall display, fine outlines, quiet Chinese serif. */
@font-face { font-family:'Along Display'; src:url('assets/fonts/display-medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Along Editorial'; src:url('assets/fonts/editorial-sc.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
:root { --display:'Along Display','Arial Narrow',sans-serif; --editorial:'Along Editorial','Songti SC',serif; }
h1 { font-family:var(--display); font-weight:500; font-size:clamp(80px,16.5vw,250px); letter-spacing:-.025em; line-height:.86; white-space:nowrap; }
.hero-name-solid { color:#efeee8; }
.hero-name-outline { color:transparent; -webkit-text-stroke:1px #efeee8; }
.hero-statement { font-family:var(--editorial); font-size:clamp(24px,2.6vw,38px); font-weight:400; letter-spacing:0; line-height:1.6; }
h2,.about h2,.story-text h3,.identity-copy h2 { font-family:var(--editorial); font-weight:400; letter-spacing:0; line-height:1.55; }
h2 { font-size:clamp(28px,3.4vw,48px); }
.story-text h3 { font-size:30px; }
.hero-content .eyebrow,.eyebrow { font-size:11px; letter-spacing:.11em; }
.wordmark { font-size:13px; letter-spacing:.015em; }
.type-chapter span { font-family:var(--display); font-weight:500; font-size:clamp(64px,12vw,188px); letter-spacing:-.015em; line-height:.86; }
.type-chapter .outline { -webkit-text-stroke:.8px #efeee8a6; }
.outline-bridge { font-family:var(--display); font-weight:500; font-size:16.2vw; letter-spacing:-.015em; -webkit-text-stroke:.8px #eeeee8; }
.photo-item h3,.photo-strip h3 { font-family:var(--sans); font-weight:400; letter-spacing:0; }
@media(max-width:699px) {
 h1 { font-size:18.4vw; line-height:.94; letter-spacing:-.025em; }
 .hero-name-outline { -webkit-text-stroke:.65px #efeee8; }
 .hero-statement { font-size:25px; margin-top:24px; }
 .hero-content .eyebrow { font-size:9px; }
 h2,.about h2,.identity-copy h2 { font-size:28px; line-height:1.55; }
 .story-text h3 { font-size:25px; }
 .type-chapter span { font-size:16vw; }
 .type-chapter span:nth-child(3) { font-size:14vw; margin-left:0; }
 .type-chapter span:nth-child(4) { margin-left:14%; }
 .type-chapter span:nth-child(5) { margin-left:36%; }
 .outline-bridge { font-size:16vw; }
}

/* V15 / soft image corners, with a consistent scale. */
:root { --image-radius:20px; --image-radius-large:32px; }
.photo-item .photo-button,.photo-strip .photo-button,.series-spread .photo-button,
.game-media,.album-cover { border-radius:var(--image-radius); overflow:hidden; }
.photo-item img,.photo-strip img,.series-spread img { border-radius:var(--image-radius); }
.story-art img,.personal-story { border-radius:var(--image-radius-large); }
.moments .rain,.moments .rain-shade { border-radius:var(--image-radius-large); }
.album-dialog-layout>img { border-radius:var(--image-radius); }
@media(max-width:699px) {
 :root { --image-radius:16px; --image-radius-large:24px; }
 .personal-story { border-radius:var(--image-radius-large); }
}

/* V16 / the person behind the camera, alongside the glass introduction. */
.story-art { max-width:none; align-self:center; }
.personal-story { grid-template-columns:1fr 1.12fr; gap:40px; padding:48px; }
.portrait-note { margin-top:24px; font-size:12px; color:var(--muted); }
.portrait-note summary { cursor:pointer; padding:12px 0; }
.portrait-note img { margin-top:12px; }
@media(max-width:699px) { .personal-story { padding:32px 16px; gap:32px; } .story-art { max-width:100%; } }

/* V16 / artwork lives inside the narrative, rather than as a separate showcase. */
.personal-story { background:linear-gradient(100deg,#17191ce8 0%,#17191ca8 42%,#17191c55),url('assets/photos/p27.jpg') center/cover; }
.story-text { padding-bottom:100px; }
.identity-aside { position:absolute; right:20px; bottom:14px; width:76px; margin:0; pointer-events:none; }
.identity-aside img { width:70px; height:104px; object-fit:contain; }
.identity-aside figcaption { font-size:8px; color:#c2c2bc; text-align:center; }
.story-signature { padding-right:76px; }
.editorial-interlude { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:28px 64px; min-height:0; margin:48px 5% 0; background:transparent; }
.interlude-copy { grid-column:1/-1; padding:0 0 12px; }
.interlude-copy h2 { max-width:850px; margin:20px 0; }
.interlude-copy>p:last-child { color:var(--muted); font-size:14px; }
.interlude-photo img { width:100%; height:auto; border-radius:var(--image-radius-large); }
.interlude-photo figcaption,.painted-aside figcaption { font-size:11px; color:var(--muted); margin-top:12px; }
.painted-aside { align-self:end; padding-bottom:64px; }
.painted-aside img { width:100%; height:auto; border-radius:12px; }
.editorial-interlude+.outline-bridge { margin-top:-.1em; }
@media(max-width:699px) {
 .editorial-interlude { grid-template-columns:minmax(0,1fr) 90px; gap:24px 20px; margin-top:32px; }
 .interlude-photo { grid-column:1/-1; }
 .painted-aside { grid-column:2; padding-bottom:0; margin-top:-68px; transform:rotate(3deg); }
 .painted-aside img { border:5px solid #252525; }
 .painted-aside figcaption { font-size:8px; }
 .editorial-interlude+.outline-bridge { margin-top:24px; }
 .identity-aside { right:16px; }
}

/* Compact mobile contact sheet; preserve the full photographs' own proportions. */
.photo-overview-controls { display:none; }
@media(max-width:699px) {
 .photo-grid { gap:24px 12px; }
 .photo-grid>.photo-item:nth-child(n) { grid-column:auto; width:100%; margin:0; justify-self:stretch; }
 .photo-grid>.photo-item.is-mobile-hidden { display:none; }
 .photo-item figcaption { padding-top:8px; gap:4px; }
 .photo-item h3 { font-size:11px; line-height:1.5; }
 .photo-index { font-size:9px; }
 .photo-overview-controls { display:flex; align-items:center; gap:20px; padding:24px 0 0; font-size:12px; color:var(--muted); }
 .photo-more { min-height:44px; padding:8px 0; color:var(--ink); border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer; }
 .photo-overview-controls a { padding:12px 0; margin-left:auto; }
 .photo-series { padding-top:24px; }
 .photo-strip { padding-block:16px; }
}

@media(max-width:699px) {
 .photo-grid { display:block; column-count:2; column-gap:12px; }
 .photo-grid>.photo-item:nth-child(n) { display:inline-block; break-inside:avoid; vertical-align:top; margin:0 0 20px; width:100%; }
 .photo-grid>.photo-item.is-mobile-hidden { display:none; }
}

@media(max-width:699px) { .photography { padding-top:48px; padding-bottom:48px; } .photography .section-title { margin-bottom:28px; } .photography .section-title>p { margin-top:12px; font-size:12px; } }

/* V17 / a quiet disclosure within the school name. */
.campus-drawer { margin-top:24px; }
.campus-drawer summary { display:flex; align-items:center; gap:9px; width:fit-content; min-height:44px; cursor:pointer; list-style:none; margin:0; font-size:14px; color:var(--ink); }
.campus-drawer summary::-webkit-details-marker { display:none; }
.campus-drawer summary:hover { color:#fff; }
.campus-drawer summary:focus-visible { outline:1px solid currentColor; outline-offset:4px; }
.campus-hint { font-size:11px; color:var(--muted); transition:transform .2s; }
.campus-drawer[open] .campus-hint { transform:rotate(45deg); }
.campus-caption { padding-top:16px; font-size:12px; color:var(--muted); }
.campus-drawer .connection-grid { gap:20px 16px; padding-block:16px; }
.campus-drawer .connection-card { padding-top:12px; }
.campus-drawer .connection-card h3 { font-family:var(--sans); font-size:15px; }
.campus-drawer .connection-card .tiny { margin:8px 0 6px; font-size:9px; }
.campus-drawer .connection-verb { font-size:11px; min-height:0; margin-top:8px; }
.campus-drawer .connection-detail { font-size:11px; margin-top:8px; }
.campus-drawer .connection-index { font-size:10px; }
@media(prefers-reduced-motion:reduce) { .campus-hint { transition:none; } }

/* V18 / approved personal voice. */
.hero-description { display:block; margin-top:10px; font:400 12px/1.9 var(--sans); letter-spacing:0; color:var(--muted); white-space:pre-line; }
.photo-introduction { margin-top:16px; font:400 13px/1.9 var(--sans); color:var(--muted); white-space:pre-line; }
@media(max-width:699px) { .hero-description { font-size:11px; margin-top:8px; } .story-text h3 { font-size:24px; } .photo-introduction { font-size:12px; margin-top:12px; } }