@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&family=Ma+Shan+Zheng&display=swap');

:root { --ink:#303936; --muted:#69716d; --line:#d9ded9; --soft:#f3f6f8; --blue:#426d7a; --white:#fff; --paper:#fff; --index-paper:#b9dfe6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper) url("assets/paper-grain.svg") repeat; color:var(--ink); font-family:"Times New Roman", Times, serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-shell { display:block; min-height:100svh; }
.site-header { padding:32px 24px 0; }
.site-header #site-nav { display:flex; justify-content:center; gap:clamp(20px,4vw,52px); }
.projects-overview { max-width:760px; margin:0 auto; }
#about { max-width:1136px; }
@media(max-width:760px) {
  .site-header { padding:24px 16px 0; }
  .site-header #site-nav { gap:clamp(16px,5vw,30px); }
  .site-header .nav-link { font-size:14px; }
  .site-shell .page,.viewing-home #home { padding:40px 20px 56px; }
  #photos .photo-index { gap:20px; margin:-12px 0 36px; }
}
.masthead { position:fixed; z-index:3; left:0; top:0; width:250px; padding:28px 24px; }
.wordmark { display:inline-block; color:#354e55; font:400 28px/1.1 "Times New Roman", Times, serif; letter-spacing:0; }
.masthead p,.sidebar-note { color:var(--muted); font:14px/1.32 "Times New Roman",serif; margin:13px 0 0; }
.menu-button { display:none; }
.sidebar { position:fixed; z-index:2; left:0; top:96px; bottom:0; width:250px; padding:0 24px 28px; display:flex; flex-direction:column; justify-content:space-between; }
nav { display:grid; gap:18px; padding:0; background:none; }
.nav-link { display:block; width:fit-content; padding:0; color:var(--muted); font-size:16px; line-height:1.4; transition:color .2s ease; }
.nav-link.active { color:var(--blue); }
.nav-link:hover { color:var(--ink); }
.nav-link:focus-visible { outline:1px solid #426d7a; outline-offset:4px; }
.sidebar-note { max-width:180px; }
main { grid-column:2; min-width:0; overflow:hidden; }
.page { display:none; min-height:0; width:100%; max-width:1136px; margin:0 auto; padding:48px 48px 72px; }
.page.active { display:block; }
.home-note { min-height:clamp(180px,25vw,340px); padding:10px 0 35px; display:flex; flex-direction:column; justify-content:end; color:var(--blue); }
.home-note p { margin:0; font:normal 400 24px/1.45 "Ma Shan Zheng", "Kaiti SC", KaiTi, cursive; letter-spacing:.04em; }
.home-note .home-note-translation { margin-top:5px; font:normal 400 21px/1.4 Caveat, "Segoe Print", cursive; letter-spacing:0; }
#home .home-note { min-height:clamp(48px,7vw,96px); padding:0; }
.viewing-home .site-shell { display:block; }
.viewing-home .masthead { display:none; }
.viewing-home .sidebar { position:relative; inset:auto; width:100%; padding:32px 24px 0; display:block; }
.viewing-home .sidebar nav { display:flex; justify-content:center; gap:clamp(20px,4vw,52px); }
.viewing-home .sidebar-note { display:none; }
.viewing-home #home { max-width:1016px; padding:48px 48px 64px; }
.viewing-home #home .home-note { display:none; }
.viewing-home .showreel { margin:0 auto; max-width:920px; }
.showreel-heading { margin-bottom:24px; }
.showreel-heading h1 { margin:0; font:400 28px/1.2 "Times New Roman",Times,serif; letter-spacing:-.02em; color:var(--ink); }
.showreel-profession { margin:8px 0 0; color:#969a9b; font:400 12px/1.5 "Times New Roman",Times,serif; letter-spacing:.065em; }
@media(max-width:760px) {
  .viewing-home .sidebar { padding:24px 16px 0; }
  .viewing-home .sidebar nav { gap:clamp(16px,5vw,30px); }
  .viewing-home .nav-link { font-size:14px; }
  .viewing-home #home { padding:54px 20px 90px; }
}
.showreel { position:relative; margin:0; max-width:1040px; }
.showreel-cover { display:block; position:relative; width:100%; padding:0; border:0; background:var(--soft); cursor:pointer; }
.showreel-cover:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.showreel-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(0,0,0,.22); color:white; transition:background .2s ease; }
.showreel-cover:hover .showreel-play { background:rgba(0,0,0,.45); }
.showreel-cover img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; }
@media(max-width:760px) { #home .home-note { min-height:24px; padding:0; } }
.eyebrow { margin:0 0 14px; color:var(--blue); font:12px/1.4 "Times New Roman",serif; text-transform:uppercase; letter-spacing:.06em; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:16px; font:normal clamp(52px,6vw,92px)/.84 "Times New Roman",Times,serif; letter-spacing:-.055em; }
.lede { max-width:380px; margin:0; color:var(--muted); font-size:16px; line-height:1.45; }
.selection-note { color:var(--muted); font-size:14px; }
.personal-selection { min-height:180px; }
#projects .section-heading h1 { font-size:44px; line-height:1.1; letter-spacing:-.035em; }
.project-studies { display:grid; gap:80px; max-width:1040px; }
.project-study { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); align-items:start; gap:32px; padding-top:24px; border-top:1px solid var(--line); }
.project-film { display:block; position:relative; width:100%; border:0; padding:0; background:#f5f5f3; cursor:pointer; color:var(--ink); font:14px "Times New Roman",serif; }
.project-film img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.project-film span { position:absolute; bottom:14px; right:14px; padding:8px 12px; background:white; }
.project-film:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.project-context h2 { font:normal clamp(24px,2.3vw,32px)/1.15 "Times New Roman",serif; margin:0 0 18px; }
.project-credit { font-size:12px; color:var(--muted); line-height:1.6; letter-spacing:.025em; }
.project-story { display:inline-block; margin-top:12px; color:var(--blue); font-size:14px; }
.project-story:hover,.project-story:focus-visible { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.project-contents { display:flex; flex-wrap:wrap; gap:16px 30px; margin:0 0 64px; padding:0; list-style:none; counter-reset:project-list; }
.project-contents li { counter-increment:project-list; font-size:14px; color:var(--muted); }
.project-contents li::before { content:counter(project-list,decimal-leading-zero); margin-right:9px; font-size:11px; }
.project-contents a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.project-cases { max-width:1040px; }
.project-case { min-width:0; }
.project-cases[hidden],.project-case[hidden],.projects-overview[hidden] { display:none; }
.project-covers { display:grid; grid-template-columns:minmax(0,1fr); gap:56px; max-width:760px; margin:0 auto; }
.project-cover { display:block; min-width:0; transition:transform 140ms ease; }
.project-cover-image { display:block; overflow:hidden; aspect-ratio:8/5; }
.project-cover img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; transition:transform 400ms ease; }
.project-cover h2 { font:400 25px/1.2 "Times New Roman",Times,serif; margin:17px 0 8px; transition:color 200ms ease; }
@media(hover:hover) and (pointer:fine) {
  .project-cover:hover img { transform:scale(1.015); }
  .project-cover:hover h2 { color:#426b8a; }
}
.project-cover:active { transform:scale(.992); }
.project-cover:active h2, .project-cover:focus-visible h2 { color:#426b8a; }
@media(prefers-reduced-motion:reduce) {
  .project-cover, .project-cover img, .project-cover h2 { transition:none; }
  .project-cover:hover img, .project-cover:active { transform:none; }
}
.project-cover p { margin:0; max-width:390px; font-size:15px; line-height:1.5; color:var(--muted); }
.project-cover:focus-visible,.case-back:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.case-back { display:inline-block; color:var(--muted); font-size:13px; margin-bottom:26px; }
.case-back:hover { color:var(--ink); }
.case-back-bottom { margin:48px 0 0; }
.case-hero { margin:0 0 36px; }
.case-hero img { display:block; width:100%; height:auto; }
.case-hero figcaption { margin-top:8px; color:var(--muted); font-size:11px; }
.case-heading { max-width:820px; margin-bottom:36px; }
.case-number { font-size:12px; color:var(--muted); margin:0 0 18px; letter-spacing:.08em; }
.case-heading h2 { font:400 clamp(29px,3.2vw,42px)/1.12 "Times New Roman",Times,serif; letter-spacing:-.025em; margin:0 0 18px; }
.case-publication { color:var(--muted); font-size:13px; margin:0; }
.case-heading .case-subtitle { font-size:13px; line-height:1.7; letter-spacing:.08em; color:var(--muted); margin:0 0 16px; }
.project-cover .case-subtitle { font-size:12px; letter-spacing:.08em; }
.project-cover .project-deck, .case-heading .project-deck { max-width:660px; margin:12px 0 0; font-size:13px; line-height:1.7; color:var(--muted); }
.story-heading { margin:48px 0 28px; max-width:820px; }
.project-case .story-heading h3 { font:400 clamp(22px,2.5vw,29px)/1.3 "Times New Roman",Times,serif; color:var(--ink); letter-spacing:-.01em; margin:0 0 12px; }
.story-number { font-size:12px; color:var(--muted); letter-spacing:.08em; margin-right:12px; vertical-align:middle; }
.story-description { font-size:13px; line-height:1.6; color:var(--muted); margin:0; }
.project-case h3 { font:400 13px/1.5 "Times New Roman",Times,serif; color:var(--muted); letter-spacing:.04em; margin:0 0 16px; }
.case-intro { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; max-width:660px; margin-bottom:42px; }
.case-prose { max-width:660px; font-size:17px; line-height:1.65; }
.case-prose p { margin:0 0 18px; }
.case-prose p:last-child { margin-bottom:0; }
.case-meta { font-size:13px; color:var(--muted); line-height:1.7; }
.case-meta p { margin:0 0 15px; }
.case-meta .project-story { margin-top:0; line-height:1.6; }
.project-case .project-story { display:inline-block; color:#426b8a; font-size:14px; font-weight:600; padding-bottom:3px; text-decoration:none; }
.project-case .project-story:hover { color:#284c68; text-decoration:underline; text-underline-offset:4px; }
.project-case .project-story:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.case-video { margin:0 0 36px; }
.case-video > h3 { display:none; }
.case-video .project-film { max-width:none; }
.case-video .project-film span { font-size:13px; }
.case-stills { margin:0 0 46px; min-width:0; }
.case-stills-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.case-stills-heading h3 { margin:0; }
.case-stills-heading small { display:inline-block; font-size:11px; letter-spacing:0; margin-left:14px; }
.case-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#home-away-stills, #birthday-stills { grid-template-columns:repeat(3,minmax(0,1fr)); }
.draft-writing-space { min-height:90px; }
.draft-note { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.story-link-pending { cursor:default; }
.birthday-video-slot { margin:0 0 40px; }
.birthday-video-slot .project-film { max-width:760px; }
.draft-video-space { max-width:760px; aspect-ratio:16/9; display:grid; place-items:center; background:rgba(120,130,140,.055); color:var(--muted); font-size:12px; }
.project-reflections { margin-top:72px; display:grid; grid-template-columns:minmax(125px,1fr) minmax(0,3fr); gap:32px; }
.reflection-kicker { margin:0 0 10px; font-size:11px; line-height:1.6; color:var(--muted); }
.project-case .project-reflections h3 { font:400 25px/1.3 "Times New Roman",Times,serif; color:var(--ink); letter-spacing:0; }
@media(max-width:760px) {
  .project-reflections { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:48px; }
}
.project-still { display:block; min-width:0; padding:0; border:0; background:transparent; cursor:zoom-in; }
.project-still img { display:block; width:100%; height:auto; }
.project-still:focus-visible,.case-gallery:focus-visible,.case-gallery-controls button:focus-visible,.project-contents a:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.case-about { display:grid; grid-template-columns:minmax(125px,1fr) minmax(0,3fr); gap:32px; }
@media(max-width:760px) {
  .project-covers { grid-template-columns:minmax(0,1fr); gap:34px; }
  .project-cover h2 { font-size:23px; }
  .project-contents { flex-direction:column; gap:14px; margin-bottom:40px; }
  .project-cases { gap:68px; }
  .case-heading { margin-bottom:28px; }
  .case-intro,.case-about { grid-template-columns:minmax(0,1fr); gap:24px; }
  .case-prose { font-size:16px; }
  .case-about { gap:0; }
  .case-gallery,#home-away-stills,#birthday-stills { grid-template-columns:minmax(0,1fr); gap:16px; }
  .case-stills-heading small { display:block; margin:3px 0 0; }
  .case-video,.case-stills { margin-bottom:32px; }
}
@media(max-width:760px) { .project-study { grid-template-columns:minmax(0,1fr); gap:20px; } .project-studies { gap:48px; } #projects .section-heading h1 { font-size:36px; } }
#videos .video-catalog { grid-template-columns:minmax(0,1fr); }
#videos .video-shelf { min-width:0; }
#videos .video-rail { align-items:flex-start; gap:28px; scroll-snap-type:x proximity; }
#videos .section-heading { margin-bottom:36px; }
#videos .section-heading h1 { font-size:44px; line-height:1.1; letter-spacing:-.035em; }
#videos .shelf-heading { flex-direction:row; align-items:center; }
#videos .shelf-heading h2 { font-size:30px; line-height:1.1; letter-spacing:-.025em; }
#videos .published-film { flex:0 0 40%; width:40%; min-width:0; }
#videos .published-film strong { min-height:3.75em; font-size:18px; line-height:1.25; overflow-wrap:break-word; }
.video-controls { display:flex; gap:8px; }
.video-scroll { width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:50%; background:white; color:var(--blue); cursor:pointer; font:16px "Times New Roman",serif; }
.video-scroll:disabled { opacity:.3; cursor:default; }
.video-scroll:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@media (max-width:760px) {
  #videos .published-film { flex-basis:76%; width:76%; }
  #videos .video-rail { gap:24px; }
  #videos .section-heading h1 { font-size:36px; }
  #videos .shelf-heading h2 { font-size:26px; }
}
.published-film { flex:0 0 min(410px,76vw); width:min(410px,76vw); align-self:flex-start; border:0; padding:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; font-family:"Times New Roman",serif; scroll-snap-align:start; }
.published-film img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.published-film strong { display:block; margin:12px 0 6px; font-size:20px; font-weight:normal; line-height:1.25; }
.published-film small,.social-film small { display:block; color:var(--muted); font-size:13px; line-height:1.4; }
.social-film { flex:0 0 280px; width:280px; scroll-snap-align:start; }
.social-film img { display:block; width:100%; aspect-ratio:9/16; object-fit:contain; }
.social-film a { display:block; margin:0; font-size:13px; color:var(--muted); }
.social-film a span { display:block; margin-top:12px; }
.social-film a:hover { color:var(--ink); }
.film-strip { overflow:hidden; width:calc(100% + clamp(26px,5.5vw,88px)); padding:3px 0 28px; mask-image:linear-gradient(to right, black 0%, black 88%, transparent 100%); }
.film-track { display:flex; width:max-content; animation:film-drift 38s linear infinite; }
.film-sequence { display:flex; gap:18px; padding-right:18px; }
.film-strip:hover .film-track,.film-strip:focus-within .film-track { animation-play-state:paused; }
.feature-card { flex:0 0 min(38vw,410px); border:0; border-radius:0; overflow:hidden; background:#cad3dd; box-shadow:none; transition:transform .25s ease; cursor:pointer; }
.feature-card:hover { transform:translateY(-7px); }
.card-image { aspect-ratio:16/10; height:auto; position:relative; background-position:center; background-size:cover; }
.drive-image { background-image:url('assets/the-film.jpg'); }
.image-one { background-image:url('assets/bead.jpg'); }
.image-two { background-image:linear-gradient(rgba(20,28,30,.08),rgba(20,28,30,.08)),url('assets/blockhouse-bay.jpg'); }
.play { position:absolute; bottom:14px; right:15px; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fff; color:var(--blue); font:13px "Times New Roman",serif; }
.card-meta { padding:11px 0 0; background:#fff; }
.card-meta h2 { margin:0 0 3px; font:normal 20px/1.1 "Times New Roman",serif; }
#home .feature-card { width:min(38vw,410px); min-width:0; }
@media (max-width:760px) { #home .feature-card { width:78vw; } }
.card-meta p { margin:0; color:var(--muted); font:13px "Times New Roman",serif; }
.deck-hint { margin:4px 0 0; color:var(--muted); font:13px "Times New Roman",serif; }
.deck-hint span { color:var(--blue); }
@keyframes film-drift { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .film-track { animation:none; } }
.section-heading { padding-top:8px; margin-bottom:52px; }
.section-heading h1 { margin:0; }
.archive-intro { max-width:290px; margin:18px 0 0; color:var(--muted); font-size:15px; line-height:1.25; }
.video-catalog { display:grid; gap:64px; }.video-shelf { padding-top:16px; border-top:1px solid var(--line); }.selected-shelf { border-top-color:var(--blue); }.shelf-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:18px; }.shelf-heading p { margin:0 0 6px; color:var(--blue); font-size:13px; }.shelf-heading h2 { margin:0; font:normal clamp(30px,3vw,44px)/.9 "Times New Roman",serif; letter-spacing:-.045em; }.shelf-heading > span { max-width:230px; color:var(--muted); font-size:15px; line-height:1.2; }.video-rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:1px 0 12px; scrollbar-width:thin; }.archive-video-card { flex:0 0 min(34vw,340px); aspect-ratio:16/10; display:flex; flex-direction:column; justify-content:space-between; padding:14px; border:0; color:var(--ink); text-align:left; scroll-snap-align:start; background:#d6dce0; }.button.archive-video-card,.archive-video-card[data-video] { cursor:pointer; }.archive-video-card[data-video]:hover { transform:translateY(-5px); }.archive-video-card.vertical-card { flex-basis:min(19vw,190px); aspect-ratio:9/14; }.archive-video-card strong { display:block; max-width:220px; font:normal clamp(27px,3vw,37px)/.9 "Times New Roman",serif; letter-spacing:-.04em; }.archive-video-card small,.card-format { font-size:13px; line-height:1.1; }.archive-video-card small { color:rgba(20,23,27,.68); }.cover-blue { background:linear-gradient(135deg,#a8bac5,#e6e5db 51%,#778f9d); }.cover-stone { background:linear-gradient(135deg,#a9a49b,#e8e4da 51%,#c5beb0); }.cover-warm { background:linear-gradient(135deg,#cda994,#eee5da 54%,#9b9fa6); }.cover-ink { color:#f5f4ef; background:linear-gradient(135deg,#26363e,#62767d 58%,#aeb8b8); }.cover-ink small { color:rgba(255,255,255,.73); }.cover-linen { background:linear-gradient(135deg,#d8d0bf,#f2eee5 53%,#aab8b4); }
.photo-index { display:flex; gap:20px; flex-wrap:wrap; margin:-22px 0 55px; padding-bottom:12px; border-bottom:1px solid var(--line); }.photo-index a { color:var(--muted); font-size:15px; }.photo-index a:hover { color:var(--blue); }
.photo-archive { display:grid; gap:68px; }.photo-series { scroll-margin-top:32px; }.archive-label { margin:0 -0.5px -43px; color:var(--blue); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }.series-intro { display:grid; grid-template-columns:minmax(200px,.9fr) minmax(180px,1fr) auto; align-items:end; gap:20px; margin-bottom:17px; }.series-year { margin:0 0 6px; color:var(--blue); font-size:13px; }.series-intro h2 { margin:0; font:normal clamp(30px,3vw,44px)/.9 "Times New Roman",serif; letter-spacing:-.045em; }.series-intro > p { max-width:220px; margin:0; color:var(--muted); font-size:15px; line-height:1.25; }.rail-controls { display:flex; gap:6px; }.rail-button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--line); background:#fff; color:var(--blue); font:18px "Times New Roman",serif; cursor:pointer; }.rail-button:hover { border-color:var(--blue); }
.photo-rail { display:flex; gap:24px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; touch-action:pan-y; padding:0 1px 18px; scrollbar-color:var(--blue) transparent; scrollbar-width:thin; cursor:grab; }.photo-rail.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }.photo-placeholder { flex:0 0 255px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; margin:0; padding:13px; border:0; text-align:left; scroll-snap-align:start; color:#596975; background:linear-gradient(135deg,#d9e1e2,#eef0e9 52%,#bbc9cf); cursor:zoom-in; }.photo-placeholder:hover { opacity:.86; }.photo-placeholder.landscape { flex-basis:430px; aspect-ratio:3/2; }.photo-placeholder.portrait { aspect-ratio:2/3; }.photo-placeholder.square { aspect-ratio:1/1; }.photo-placeholder.warm { background:linear-gradient(135deg,#e7d5c6,#f4eee6 52%,#cba991); }.photo-placeholder.blue { background:linear-gradient(135deg,#9db3c4,#dce7e4 52%,#f2e9d7); }.photo-placeholder.soft { background:linear-gradient(135deg,#d5d7d2,#f0eee8 58%,#c9c1b5); }.photo-placeholder.photo-image { color:#fff; background:#111; }.photo-placeholder img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }.photo-placeholder:hover img { transform:scale(1.025); }.photo-placeholder > span { position:relative; z-index:1; text-shadow:0 1px 8px rgba(0,0,0,.5); }.photo-placeholder span { font-size:13px; }.photo-placeholder .photo-caption { font-size:14px; color:inherit; }.archive-note { margin:0; color:var(--muted); font-size:14px; }
.empty-archive { display:flex; align-items:end; justify-content:space-between; min-height:52vh; padding:25px; background:var(--soft); }.empty-archive p { margin:0; font:normal clamp(40px,6vw,80px)/.86 "Times New Roman",serif; }.empty-archive span { color:var(--muted); font:14px "Times New Roman",serif; }
.project-list { border-top:1px solid var(--line); }.project { display:grid; grid-template-columns:120px minmax(0,1fr) 145px; gap:22px; padding:27px 0; border-bottom:1px solid var(--line); }.project-number,.project-role { color:var(--muted); font:13px "Times New Roman",serif; }.project h2 { max-width:600px; margin:0 0 10px; font:normal clamp(29px,3vw,47px)/.94 "Times New Roman",serif; letter-spacing:-.035em; }.project-role { margin:0; }.project-actions { display:grid; align-content:start; gap:9px; }.project-actions a,.project-actions button { padding:0; border:0; background:transparent; color:var(--blue); text-align:left; font:14px "Times New Roman",serif; cursor:pointer; }.project-actions a:hover,.project-actions button:hover { color:var(--ink); }
.about-portrait { margin:0; max-width:820px; }
.about-portrait img { display:block; width:100%; height:auto; }
.about-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:clamp(32px,5vw,64px); }
.about-biography { font-size:17px; line-height:1.7; }
.about-biography > p { margin:0 0 22px; }
.about-biography .about-reporting { font-size:14px; color:var(--muted); margin-top:30px; }
.about-biography a, .about-email a { color:#426b8a; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.about-biography a:hover, .about-email a:hover { color:#284c68; }
.about-biography a:focus-visible, .about-email a:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.about-email { margin:16px 0 0; font-size:14px; line-height:1.5; }
.about-email a { text-decoration:none; }
.about-email a:hover { text-decoration:underline; }
@media(max-width:760px) {
  .about-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .about-biography { font-size:16px; }
}
dialog { width:min(1000px,94vw); padding:0; border:0; background:#fff; box-shadow:0 25px 70px rgba(0,0,0,.28); }dialog::backdrop { background:rgba(12,20,28,.75); backdrop-filter:blur(4px); }.modal-top { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; }.modal-top p,.close-modal,.close-photo-modal { margin:0; font:14px "Times New Roman",serif; }.close-modal,.close-photo-modal { border:0; background:transparent; color:var(--blue); cursor:pointer; }.player-wrap { aspect-ratio:16/9; background:#10161d; }.player-wrap iframe { display:block; width:100%; height:100%; border:0; }.photo-large { display:grid; place-items:center; min-height:min(70vh,760px); color:var(--muted); background:#10161d; }.photo-large img { display:block; max-width:100%; max-height:min(70vh,760px); object-fit:contain; }.photo-large span { font-size:15px; }
.blockhouse-cover { color:#fff; background:linear-gradient(rgba(12,23,26,.12),rgba(12,23,26,.28)),url('assets/blockhouse-bay.jpg') center/cover; }.blockhouse-cover small { color:rgba(255,255,255,.8); }
/* Constrain grid children so the photo rail, not the whole page, overflows. */
#photos .photo-archive { grid-template-columns:minmax(0,1fr); }
#photos .photo-series { min-width:0; }
#photos .photo-index { margin:0 0 48px; }
#photos .series-intro { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
#photos .series-intro h2 { font:normal 16px/1.4 "Times New Roman",Times,serif; letter-spacing:0; color:var(--muted); }
#photos .photo-archive { counter-reset:photo-series; }
#photos .photo-series { counter-increment:photo-series; }
#photos .series-intro h2::before { content:counter(photo-series, decimal-leading-zero); display:inline-block; margin-right:16px; color:#929ca5; font-size:11px; letter-spacing:.08em; vertical-align:middle; }
#videos .published-film:hover strong,#videos .published-film:focus-visible strong { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.project-context > p:not(.project-credit) { font-size:16px; line-height:1.6; }
@media(prefers-reduced-motion:reduce) { .nav-link,.nav-link::before,.showreel-play { transition:none; } }
#photos .photo-rail { width:100%; min-width:0; gap:32px; align-items:center; touch-action:pan-x pan-y pinch-zoom; scroll-snap-type:x proximity; background:transparent; }
#photos .photo-placeholder { flex:0 0 auto; }
#photos .photo-placeholder.landscape { flex-basis: min(340px,76vw); }
#photos .photo-placeholder.portrait { flex-basis: min(190px,55vw); }
#photos .photo-placeholder.square { flex-basis: min(250px,66vw); }
#photos .photo-image { aspect-ratio:8/5; padding:0; background:transparent; }
#photos .photo-image img { object-fit:contain; user-select:none; -webkit-user-drag:none; }
#photos .photo-image > span { display:none; }
#photos .photo-placeholder:hover { opacity:1; }
#photos .photo-placeholder:hover img { transform:none; }
#photos .photo-rail.is-dragging { scroll-snap-type:none; }
#photos .photo-rail.is-dragging * { cursor:grabbing; }
#photos .rail-button { width:44px; height:44px; }
#photo-modal { width:min(1200px,94vw); max-height:94dvh; }
#photo-modal .photo-large { min-height:0; padding:16px; background:#fff; }
#photo-modal .photo-large img { width:auto; height:auto; max-width:100%; max-height:78dvh; object-fit:contain; }
.sidebar > .photo-index { display:none; }
.viewing-photos .sidebar { justify-content:flex-start; }
.viewing-photos .sidebar > .photo-index { display:flex; flex-direction:column; gap:22px; margin:36px 0 0; padding:24px 0 0; border:0; border-top:1px solid var(--line); }
.viewing-photos .sidebar-note { margin-top:auto; }
.photo-index a { padding:4px 0 4px 14px; border-left:1px solid transparent; }
.photo-index a.current { color:var(--blue); border-left-color:var(--blue); }
#photos { padding-top:48px; }
#photos .section-heading h1 { font-size:44px; line-height:1.1; letter-spacing:-.035em; }
#videos .video-shelf { border-top:0; }
#photos .photo-index { display:flex; flex-wrap:wrap; gap:24px; margin:-20px 0 48px; padding:0 0 14px; border-bottom:0; }
#photos .photo-index a { padding:4px 0; border:0; }
#photos .photo-index a.current { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
#photos .archive-label { display:none; }
#photos .photo-archive { gap:100px; }
#photos .photo-series { position:relative; scroll-margin-top:64px; }
#photos .series-intro { display:block; margin-bottom:26px; }
#photos .photo-rail { padding-bottom:16px; align-items:flex-start; }
#photos .photo-placeholder.landscape { flex-basis:78%; aspect-ratio:8/5; }
#photos .photo-placeholder.portrait { flex-basis:32.5%; aspect-ratio:2/3; align-self:center; }
#photos .rail-controls { position:absolute; top:calc(50% + 15px); left:-20px; right:-20px; justify-content:space-between; z-index:2; pointer-events:none; }
#photos .rail-button { pointer-events:auto; width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 2px 7px #00000012; }
@media (max-width:760px) {
  .viewing-photos .sidebar > .photo-index { flex-direction:row; flex-wrap:wrap; gap:14px; margin:10px 0 0; padding-top:16px; }
  #photos { padding-top:32px; }
  #photos .photo-archive { gap:64px; }
  #photos .photo-rail { gap:22px; }
  #photos .photo-placeholder.landscape { flex-basis:86%; }
  #photos .photo-placeholder.portrait { flex-basis:35.8333%; }
  #photos .rail-controls { left:-12px; right:-12px; }
}
@media (max-width:760px) { .site-shell { display:block; }.masthead { position:relative; display:grid; grid-template-columns:1fr auto; align-items:start; width:auto; padding:20px; }.masthead p { grid-column:1; }.menu-button { display:block; grid-column:2; grid-row:1/3; padding:0; border:0; background:none; color:var(--blue); font:14px "Times New Roman",serif; }.sidebar { position:relative; top:auto; left:auto; bottom:auto; width:auto; padding:0 20px 16px; }.sidebar nav { display:none; }.sidebar nav.open { display:grid; }.sidebar-note { display:none; }main { overflow:visible; }.page { min-height:auto; padding:27px 20px 48px; }.home-note { min-height:220px; padding-bottom:30px; }.film-strip { width:calc(100% + 20px); }.film-sequence { gap:13px; padding-right:13px; }.feature-card { flex-basis:78vw; }.section-heading { margin-bottom:35px; }.video-catalog { gap:46px; }.shelf-heading { align-items:start; flex-direction:column; gap:9px; }.shelf-heading > span { max-width:270px; }.archive-video-card { flex-basis:76vw; }.archive-video-card.vertical-card { flex-basis:48vw; }.photo-index { margin:-9px 0 35px; gap:14px; }.photo-archive { gap:48px; }.archive-label { margin-bottom:-28px; }.series-intro { grid-template-columns:1fr auto; gap:12px; }.series-intro > p { grid-column:1/3; order:3; }.photo-placeholder { flex-basis:68vw; }.photo-placeholder.landscape { flex-basis:100vw; }.photo-placeholder.portrait { flex-basis:62vw; }.project { grid-template-columns:1fr; gap:7px; }.project-number { margin:0; }.project-actions { grid-template-columns:1fr 1fr; margin-top:8px; }.about-copy { grid-template-columns:1fr; gap:25px; }.empty-archive { min-height:55vh; flex-direction:column; align-items:start; justify-content:space-between; }.empty-archive p { font-size:54px; } }