@font-face { font-family:Heebo; src:url('./assets/fonts/heebo-400.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:Heebo; src:url('./assets/fonts/heebo-500.ttf') format('truetype'); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:Heebo; src:url('./assets/fonts/heebo-700.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:Heebo; src:url('./assets/fonts/heebo-800.ttf') format('truetype'); font-style:normal; font-weight:800; font-display:swap; }
@font-face { font-family:Heebo; src:url('./assets/fonts/heebo-900.ttf') format('truetype'); font-style:normal; font-weight:900; font-display:swap; }

:root { --page:#f8f9f8; --card:#fff; --ink:#202d31; --muted:#5b7179; --coral:#137783; --on-accent:#fff; --blue:#e8f1f1; --line:#d5dedf; --year:#163f4b; --link:#126d78; --nav:#15272b; --site-desktop-body-font:16px; --site-desktop-article-heading-font:24px; --site-desktop-body-line:1.5; --site-desktop-body-gap:4px; --site-mobile-body-font:15px; --site-mobile-article-heading-font:20px; --site-mobile-body-line:1.5; --site-mobile-body-gap:10px; }
:root { --type-page:44px; --type-section:22px; --type-card:30px; --type-body:16px; --type-meta:16px; --type-action:14px; --section-first-gap:30px; --work-row-space:14px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page); color:var(--ink); font-family:Heebo,Arial,sans-serif; font-size:var(--type-body); line-height:1.5; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--coral); }
.admin-link { color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.preview-login { max-width:420px; margin-top:24px; }
.preview-login label { display:block; margin:14px 0; }
.preview-login input { display:block; width:100%; padding:9px; margin-top:5px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; }
.preview-login button { border:0; background:var(--coral); color:var(--on-accent); padding:9px 16px; font:inherit; cursor:pointer; }
.preview-error { color:var(--coral); margin-top:10px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--coral); outline-offset:4px; }
img { display:block; max-width:100%; }
figure,h1,h2,h3,p { margin:0; }
.content-wide { max-width:858px; margin-inline:auto; }
.content-narrow { max-width:682px; margin-inline:auto; }

.site-header { height:72px; }
.header-inner { max-width:1152px; height:100%; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:0 60px; }
.brand { font-size:15px; font-weight:800; letter-spacing:.08em; line-height:1; }
.site-nav { display:flex; align-items:center; gap:34px; height:100%; }
.site-nav a { font-size:20px; font-weight:500; color:var(--nav); }
.site-nav a.active,.site-nav a:hover { color:var(--coral); }
.language-toggle { display:inline-flex; align-items:center; flex:none; gap:2px; padding:2px; border:1px solid var(--line); border-radius:999px; background:var(--card); }
.language-toggle button { min-width:38px; min-height:32px; padding:4px 7px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:700; line-height:1; cursor:pointer; }
.language-toggle button[aria-pressed="true"] { background:var(--blue); color:var(--coral); }
.language-toggle button:hover { color:var(--coral); }
.language-toggle button:focus-visible { outline:2px solid var(--coral); outline-offset:2px; }
.menu-toggle { display:none; }

.home-hero { min-height:300px; padding-top:68px; }
.home-hero.has-cover { display:grid; min-height:340px; height:auto; padding:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; background:var(--card); border-radius:24px; overflow:hidden; }
.home-hero.has-cover .hero-copy { display:flex; flex-direction:column; justify-content:center; padding:28px 30px; min-width:0; }
.home-hero .hero-cover { display:none; }
.home-hero.has-cover .hero-cover { display:block; position:relative; min-height:340px; overflow:hidden; background:var(--card); }
.hero-cover-stage,.hero-cover-layer { position:absolute; inset:0; }
.hero-cover-layer { opacity:0; transition:opacity .9s ease; }
.hero-cover-layer.is-visible { opacity:1; }
.hero-cover-layer img { display:block; width:100%; height:100%; object-fit:cover; }
.hero-cover-controls { position:absolute; z-index:3; right:14px; bottom:12px; display:flex; align-items:center; gap:6px; padding:5px 7px; border-radius:30px; background:rgba(255,255,255,.86); }
.hero-cover-controls button { flex:none; border:0; background:transparent; color:#20232b; cursor:pointer; }
.hero-cover-controls button:focus-visible { outline:2px solid #20232b; outline-offset:2px; }
.hero-cover-dot { width:18px; height:22px; padding:0; position:relative; }
.hero-cover-dot::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#697078; left:50%; top:50%; transform:translate(-50%,-50%); }
.hero-cover-dot[aria-pressed="true"]::after { width:10px; height:10px; background:#1c2930; }
.hero-cover-pause { min-width:42px; min-height:28px; padding:3px 5px; font:inherit; font-size:11px; }
.hero-cover-pause:disabled { opacity:.55; cursor:default; }
@media (prefers-reduced-motion:reduce) { .hero-cover-layer { transition:none; } }
.hero-copy { padding-top:18px; }
.hero-copy h1 { max-width:540px; font-size:38px; line-height:1.35; letter-spacing:-.035em; font-weight:700; }
.hero-copy>p { max-width:497px; margin-top:23px; font-size:16px; line-height:1.48; }
.hero-copy .focus-line { font-size:18px; font-weight:500; margin-top:16px; }
.hero-copy .sample-intro { margin-top:12px; }
.hero-portrait { position:relative; width:243px; height:243px; }
.portrait-shadow { position:absolute; inset:13px 0 -13px -5px; }
.portrait-shadow .shadow-mobile { display:none; }
.portrait-photo img { position:relative; width:243px; height:243px; border-radius:50%; object-fit:cover; }
.hero-portrait figcaption { position:absolute; right:0; top:252px; color:var(--muted); font-size:11px; white-space:nowrap; }

.recent-band { background:var(--blue); min-height:396px; padding:19px 0 32px; }
.section-bar { display:flex; align-items:center; justify-content:space-between; min-height:50px; }
.section-bar h2 { font-size:var(--type-section); font-weight:500; line-height:1.3; }
.section-bar a { font-size:16px; color:var(--link); }
.section-bar a:hover { text-decoration:underline; }
.featured-view-all,.mobile-work-toolbar,.mobile-load-more { display:none; }
.recent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.recent-card { min-height:295px; background:var(--card); border-radius:4px; padding:23px; }
.recent-card:first-child { box-shadow:0 4px 10px rgba(187,225,250,.25); }
.recent-card h3 { font-size:26px; line-height:1.4; font-weight:700; min-height:85px; }
.post-meta { display:flex; align-items:center; gap:24px; font-size:18px; white-space:nowrap; }
.meta-divider { display:block; height:21px; flex:none; }
.meta-divider img { display:block; }
.recent-card p { font-size:16px; line-height:1.5; margin-top:15px; }
.category-mobile,.mobile-work-list { display:none; }

.featured-section { padding-top:7px; }
.home-hero.has-cover + .featured-section { padding-top:36px; }
.featured-section .section-bar { margin-bottom:4px; }
.featured-section .work-image-link { margin-top:0; }
.work-row { position:relative; display:grid; grid-template-columns:246px minmax(0,1fr); align-items:center; gap:22px; min-height:0; padding:var(--work-row-space) 0; margin-bottom:0; }
.row-divider { position:absolute; left:0; bottom:0; display:block; max-width:100%; }
.row-divider img { display:block; max-width:100%; }
.work-image-link { width:246px; height:180px; margin-top:0; overflow:hidden; border-radius:6px; background:var(--blue); }
.work-image-link picture { display:block; width:100%; height:100%; }
.work-image-link img { width:100%; height:100%; object-fit:cover; }
.work-copy h3 { font-size:var(--type-card); line-height:1.3; font-weight:700; }
.work-meta { display:flex; align-items:center; gap:26px; color:var(--muted); font-size:20px; margin-top:15px; }
.year { display:inline-flex; align-items:center; justify-content:center; height:25px; min-width:62px; padding:0 9px; border-radius:16px; background:var(--year); color:#fff; font-size:18px; line-height:1; font-weight:900; }
.work-copy p { font-size:16px; line-height:1.5; margin-top:17px; }
.featured-section .work-row:last-child { margin-bottom:0; }
.sample-note { color:var(--muted); font-size:12px; }
.featured-section>.sample-note { margin-top:13px; }

.index-main,.career-main { position:relative; padding-top:76px; }
.index-main h1,.career-main h1,.profile-main h1 { font-size:var(--type-page); line-height:1.3; font-weight:700; }
.index-main>.sample-note { position:absolute; top:96px; right:0; }
.index-main .work-list { margin-top:calc(var(--section-first-gap) - var(--work-row-space)); }
.index-main .work-row:last-child { margin-bottom:0; }
.page-loading,.empty-state { color:var(--muted); margin-top:var(--section-first-gap); }
.career-main #career-list { margin-top:var(--section-first-gap); }
.career-row { position:relative; min-height:0; margin-bottom:28px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.career-row:last-child { margin-bottom:0; border-bottom:0; }
.career-row .row-divider { display:none; }
.career-row h2 { font-size:var(--type-section); line-height:1.3; font-weight:500; overflow-wrap:anywhere; }
.career-row .post-meta { margin-top:9px; font-size:20px; }
.career-row .post-meta span:last-child { color:var(--muted); }
.career-row p { margin-top:13px; font-size:16px; line-height:1.5; }
.career-media { margin-top:22px; }
.career-media img { display:block; max-width:100%; height:auto; }
.career-entry.has-poster { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:start; gap:22px; }
.career-poster { width:120px; margin:0; aspect-ratio:3 / 4; overflow:hidden; border-radius:6px; background:var(--blue); }
.career-poster img { display:block; width:100%; height:100%; object-fit:contain; }
.career-poster.poster-cover img { object-fit:cover; }
.career-info { min-width:0; }
.career-info h2 { font-size:var(--type-section); line-height:1.3; font-weight:500; }
.career-title-row { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.career-title-row h2 { min-width:0; overflow-wrap:anywhere; }
.career-video-link { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; }
.career-video-link img { display:block; width:19px; height:19px; }
.career-video-link:hover { background:var(--card); }
.career-video-link:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.career-row .career-year-type { display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; row-gap:4px; margin-top:9px; color:var(--muted); font-size:var(--type-meta); line-height:1.5; overflow-wrap:anywhere; }
.career-row .career-year-type span { white-space:nowrap; }
.career-meta-divider { flex:none; width:1px; height:15px; background:var(--line); }
.career-credit { margin-top:12px; }
.career-row .career-credit p { margin:0; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.career-row .career-credit .career-position { white-space:pre-line; }
.about-section { padding:24px 0 30px; border-bottom:1px solid var(--line); }
.about-section h2 { font-size:var(--type-section); line-height:1.3; font-weight:500; margin-bottom:16px; }
.about-section p { line-height:1.65; }
.about-profile { white-space:pre-line; }
.about-profile-layout { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.about-profile-layout .about-profile { min-width:0; flex:1; }
.about-portrait { flex:none; width:180px; height:180px; border-radius:50%; overflow:hidden; background:var(--blue); }
.about-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.about-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 24px; }
.about-list li { padding:0; line-height:1.5; }
.software-badges { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.software-badges li { display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); line-height:1.4; }
.software-badges img { display:block; width:22px; height:22px; flex:none; object-fit:contain; }
.about-empty { color:var(--muted); }
.about-contact { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.about-contact a { color:var(--link); text-underline-offset:3px; }
.about-contact button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--card); padding:6px 14px; font:inherit; line-height:1.4; cursor:pointer; }
.about-contact button:hover { border-color:var(--coral); color:var(--coral); }
.about-contact #copy-about-status { color:var(--muted); font-size:14px; }

.detail-main { padding-top:70px; }
.work-detail { padding-top:22px; }
.work-detail-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.work-back-link { display:inline-flex; align-items:center; min-height:44px; color:var(--link); font-size:var(--type-action); text-decoration:none; }
.work-back-link:hover { text-decoration:underline; text-underline-offset:3px; }
.work-back-link:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
.work-edit-link { display:inline-flex; align-items:center; min-height:44px; color:var(--link); font-size:var(--type-action); text-decoration:none; }
.work-edit-link:hover { text-decoration:underline; text-underline-offset:3px; }
.work-edit-link:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
.detail-main h1.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.work-detail .detail-process { margin-top:14px; }
.work-detail .detail-process > :first-child { margin-top:0; }
.detail-main h1 { max-width:506px; font-size:34px; line-height:1.47; font-weight:700; }
.detail-meta { display:flex; align-items:center; gap:19px; font-size:20px; margin-top:23px; }
.detail-meta .year { background:var(--coral); color:var(--on-accent); }
.detail-summary { margin-top:29px; font-size:16px; }
.detail-main .sample-flag { margin-top:9px; font-size:12px; color:var(--muted); }
.detail-image { width:100%; margin-top:26px; }
.detail-image img { width:100%; aspect-ratio:681/460; object-fit:cover; }
.detail-image video { display:block; width:100%; height:auto; object-fit:contain; }
.detail-image.user-result img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }
.work-article-image { --article-width:100%; width:var(--article-width); max-width:100%; margin:20px auto; }
.work-article-image picture,.work-article-image img { display:block; }
.work-article-image img { width:auto; max-width:100%; height:auto; margin-inline:auto; aspect-ratio:auto; object-fit:contain; }
.article-width-desktop-25 { --article-width:25%; }
.article-width-desktop-50 { --article-width:50%; }
.article-width-desktop-75 { --article-width:75%; }
.article-width-desktop-100 { --article-width:100%; }
.work-article-text { white-space:pre-line; }
.rich-text-output { white-space:normal; }
.rich-text-output > p { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.rich-text-output > p:first-child { margin-top:0; }
.rich-text-output strong { font-weight:700; }
.detail-process .rich-text-output > p,
.detail-process>.article-block>p,
.hero-copy .sample-intro,
.work-copy>p,
.career-row .career-credit .career-position,
.about-profile { font-size:var(--site-desktop-body-font); line-height:var(--site-desktop-body-line); }
.detail-process .rich-text-output > p + p { margin-top:var(--site-desktop-body-gap); }
.detail-process .rich-text-output > p[data-empty="true"],
.detail-process .rich-text-output > p[data-empty="true"] + p { margin-top:0; }
.work-article-video { margin:24px 0; }
.work-article-video video { display:block; width:100%; height:auto; object-fit:contain; }
.youtube-embed { margin:24px 0; }
.youtube-frame { width:100%; aspect-ratio:16/9; background:#111; }
.youtube-frame iframe { display:block; width:100%; height:100%; border:0; }
.youtube-embed figcaption { color:var(--muted); font-size:13px; margin-top:7px; }
.youtube-embed a { color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.detail-process { margin-top:45px; }
.detail-process h2 { font-size:var(--type-section); line-height:1.5; font-weight:500; }
.detail-process h3 { font-size:24px; line-height:1.8; font-weight:500; }
.detail-process .work-article-heading { font-size:var(--site-desktop-article-heading-font); }
.detail-process p { margin-top:4px; font-size:16px; }
.detail-process .article-block + .article-block { margin-top:22px; }
.detail-process ul { margin:4px 0 0; padding-left:22px; font-size:16px; }
.detail-image + .detail-image { margin-top:27px; }
.work-webgl { margin:24px 0; }
.work-webgl a { display:inline-block; border:1px solid var(--line); padding:11px 16px; color:var(--link); text-decoration:none; }
.work-webgl a:hover,.work-webgl a:focus-visible { border-color:var(--link); }
.work-webgl-frame { width:100%; max-width:100%; aspect-ratio:48/29; overflow:hidden; background:var(--blue); }
.work-webgl-frame iframe { display:block; width:100%; height:100%; border:0; }
.work-webgl-start { display:block; width:100%; height:100%; padding:20px; border:1px solid var(--line); background:transparent; color:var(--link); font:inherit; font-weight:700; cursor:pointer; }
.work-webgl-start:hover { border-color:var(--link); }
.work-webgl-fallback { margin-top:8px!important; font-size:13px!important; color:var(--muted); }
.work-webgl-fallback a { padding:0; border:0; text-decoration:underline; text-underline-offset:2px; }
.profile-main { padding-top:76px; min-height:760px; }
.profile-main > .about-section:first-of-type { padding-top:var(--section-first-gap); }
.profile-main > .about-section:first-of-type h2 { margin-top:0; }
.profile-main h2 { margin-top:54px; font-size:var(--type-section); }
.profile-main .role-line { font-size:20px; color:var(--coral); margin-top:10px; }
.profile-main .focus-line { font-size:18px; font-weight:500; margin-top:14px; }
.profile-main p:not(.role-line) { max-width:600px; margin-top:28px; }
.profile-main .about-profile-layout .about-profile { margin-top:0; }
.underlink { display:inline-block; color:var(--link); margin-top:30px; }

.site-footer { height:182px; max-width:1152px; margin:70px auto 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; }
.footer-icons { display:flex; align-items:center; gap:32px; height:32px; }
.footer-icons img { object-fit:contain; }
.social-icons { display:flex; align-items:center; gap:24px; }
.social-icons[hidden] { display:none; }
.social-icons a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:2px; }
.social-icons a:focus-visible { outline:2px solid var(--coral); outline-offset:3px; }
.social-icons img { width:23px; height:23px; }
.site-footer p { font-size:14px; text-align:center; }
.career-main+.site-footer { margin-top:45px; }

.site-preview-switch { z-index:80; display:inline-flex; align-items:center; gap:3px; flex:none; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.94); }
.site-preview-switch>span { padding:0 6px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.site-preview-switch button { min-height:30px; padding:4px 9px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.site-preview-switch button[aria-pressed="true"] { background:var(--blue); color:var(--link); font-weight:700; }
.site-previewing-mobile> :not(.site-preview-shell) { display:none!important; }
.site-preview-shell { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; padding:12px 18px 30px; background:#e9eeee; }
.site-preview-shell>.site-preview-switch { background:var(--card); box-shadow:0 8px 24px rgba(23,47,51,.1); }
.site-preview-device { overflow:hidden; border:1px solid #bcc9cb; border-radius:18px; background:var(--page); box-shadow:0 18px 50px rgba(23,47,51,.16); }
.site-preview-device-label { height:30px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); color:var(--muted); background:var(--card); font-size:11px; font-weight:700; }
.site-preview-device iframe { display:block; width:390px; height:calc(100vh - 138px); min-height:640px; border:0; background:var(--page); }

@media (max-width:900px) {
  .content-wide { margin-inline:5%; }
  .content-narrow { margin-inline:auto; width:min(682px,calc(100% - 64px)); }
  .home-hero { grid-template-columns:minmax(0,1fr) 243px; }
  .hero-copy h1 { font-size:34px; }
}

@media (max-width:700px) {
  .site-preview-switch,.site-preview-shell { display:none!important; }
  .detail-process .rich-text-output > p,
  .detail-process>.article-block>p,
  .hero-copy .sample-intro,
  .mobile-work-list .work-copy>p,
  .career-row .career-credit .career-position,
  .about-profile { font-size:var(--site-mobile-body-font); line-height:var(--site-mobile-body-line); }
  .detail-process .rich-text-output > p + p { margin-top:var(--site-mobile-body-gap); }
  .detail-process .rich-text-output > p[data-empty="true"],
  .detail-process .rich-text-output > p[data-empty="true"] + p { margin-top:0; }
  .about-contact button { min-height:44px; }
  .work-article-image { --article-width:100%; }
  .article-width-mobile-25 { --article-width:25%; }
  .article-width-mobile-50 { --article-width:50%; }
  .article-width-mobile-75 { --article-width:75%; }
  .article-width-mobile-100 { --article-width:100%; }
  :root { --type-page:30px; --type-section:18px; --type-card:24px; --type-meta:14px; --section-first-gap:14px; }
  .site-header { height:50px; }
  .header-inner { padding:0 18px; }
  .brand { font-size:13px; }
  .menu-toggle { width:36px; height:34px; border:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .menu-toggle img { display:block; }
  .site-nav { display:none; position:absolute; z-index:20; top:50px; left:0; right:0; height:auto; padding:18px; background:var(--card); border-bottom:1px solid var(--line); box-shadow:0 12px 18px rgba(33,36,61,.08); flex-direction:column; align-items:flex-start; gap:12px; }
  .site-nav.open { display:flex; }
  .site-nav a { font-size:18px; padding:4px 0; }
  .language-toggle { max-width:100%; }
  .content-wide,.content-narrow { width:auto; max-width:none; margin-inline:18px; }
  .home-hero { min-height:280px; margin:0; padding:38px 18px; text-align:left; }
  .home-hero.has-cover { display:flex; flex-direction:column; align-items:stretch; min-height:0; height:auto; margin:0 18px; padding:0; gap:0; }
  .home-hero.has-cover .hero-cover { display:flex; flex-direction:column; width:100%; min-height:0; height:auto; overflow:visible; background:transparent; flex:none; }
  .home-hero.has-cover .hero-copy { width:100%; padding:28px 18px 24px; }
  .hero-cover-stage { position:relative; inset:auto; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:var(--blue); }
  .hero-cover-controls { position:static; align-self:stretch; justify-content:center; min-height:38px; margin:4px 0 0; padding:2px 6px; border-radius:0; background:transparent; }
  .hero-cover-dot { width:24px; height:30px; }
  .hero-cover-pause { margin-left:auto; min-width:48px; min-height:34px; font-size:13px; }
  .hero-portrait { width:171px; height:171px; flex:none; }
  .portrait-photo img { width:171px; height:171px; }
  .portrait-shadow .shadow-desktop { display:none; }
  .portrait-shadow .shadow-mobile { display:block; }
  .portrait-shadow { inset:9px 0 -9px -4px; }
  .hero-portrait figcaption { top:173px; left:50%; right:auto; transform:translateX(-50%); }
  .hero-copy { padding:0; width:100%; }
  .hero-copy h1 { max-width:none; margin:0; font-size:34px; line-height:1.18; letter-spacing:-.035em; }
  .hero-copy h1 [data-home-greeting] { display:inline-block; margin-bottom:6px; font-size:19px; line-height:1.3; }
  .hero-copy>p { max-width:none; margin:16px 0 0; line-height:1.48; }
  .hero-copy .focus-line { font-size:16px; margin-top:16px; }
  .hero-copy .sample-intro { margin-top:12px; }
  .recent-band { min-height:647px; padding:0 11px 38px; }
  .recent-band .content-wide { margin:0; }
  .recent-band .section-bar { height:60px; justify-content:center; }
  .recent-band .section-bar h2 { font-size:var(--type-section); }
  .recent-band .section-bar a { display:none; }
  .recent-grid { grid-template-columns:1fr; gap:17px; }
  .recent-card { min-height:266px; padding:12px 19px; box-shadow:0 4px 10px rgba(187,225,250,.25); }
  .recent-card h3 { font-size:22px; line-height:30px; min-height:60px; }
  .recent-card .post-meta { gap:14px; font-size:16px; }
  .recent-card .meta-divider { height:21px; }
  .category-desktop { display:none; }
  .category-mobile { display:inline; }
  .recent-card p { margin-top:16px; font-size:16px; }
  .featured-section { padding-top:0; }
  .home-hero.has-cover + .featured-section { padding-top:24px; }
  .featured-section .section-bar { height:auto; min-height:42px; justify-content:space-between; margin:0 0 4px; }
  .featured-section .section-bar h2 { font-size:24px; font-weight:700; }
  .featured-view-all { display:inline-flex; align-items:center; gap:8px; min-height:42px; font-size:15px; }
  .featured-section .work-row:nth-child(n+5) { display:none; }
  .featured-section .row-divider { display:none; }
  .work-row { display:block; }
  .work-image-link { display:block; width:100%; height:auto; aspect-ratio:339/230; margin:0; }
  .work-image-link img { transform:scale(1.085); }
  .featured-section .work-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
  .featured-section .work-row:first-child { padding-top:11px; }
  .featured-section .work-row:last-child { padding-bottom:16px; }
  .featured-section .work-row:last-child { border-bottom:0; }
  .featured-section .work-image-link { width:100%; aspect-ratio:3/2; margin:0; border-radius:8px; }
  .featured-section .work-copy { min-width:0; }
  .featured-section .work-copy h3 { margin:0; font-size:20px; line-height:1.25; overflow-wrap:anywhere; }
  .featured-section .work-meta { flex-wrap:wrap; margin-top:7px; gap:4px 8px; font-size:14px; line-height:1.35; }
  .featured-section .work-meta .year { min-width:0; height:auto; padding:0; border-radius:0; background:transparent; color:var(--muted); font-size:14px; font-weight:400; }
  .featured-section .work-copy p { display:none; }
  .work-copy h3 { font-size:var(--type-card); line-height:1.3; margin-top:15px; }
  .work-meta { margin-top:13px; gap:19px; font-size:16px; }
  .work-meta .year { font-size:16px; }
  .work-copy p { margin-top:17px; font-size:16px; }
  .featured-section>.sample-note { margin-top:8px; }
  .index-main,.career-main { padding-top:18px; }
  .index-main h1,.career-main h1,.profile-main h1 { font-size:var(--type-page); line-height:1.3; }
  .index-main>.sample-note { position:absolute; top:80px; left:0; right:auto; font-size:10px; }
  .mobile-work-toolbar { display:block; margin-top:14px; }
  .work-filters { display:flex; flex-wrap:wrap; gap:8px; }
  .work-filter-button { min-height:40px; padding:7px 18px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font:inherit; font-size:15px; cursor:pointer; }
  .work-filter-button[aria-pressed="true"] { border-color:var(--coral); background:var(--coral); color:var(--on-accent); }
  .mobile-work-count { margin-top:14px; color:var(--muted); font-size:14px; }
  .index-main .work-list { margin-top:0; }
  .index-main #all-work { display:none; }
  .mobile-work-list { display:block; }
  .mobile-work-list .work-row { padding:18px 0; border-bottom:1px solid var(--line); }
  .mobile-work-list .work-row:last-child { border-bottom:0; }
  .mobile-work-list .row-divider { display:none; }
  .mobile-work-list .work-image-link { aspect-ratio:16/9; border-radius:8px; }
  .mobile-work-list .work-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:baseline; }
  .mobile-work-list .work-copy h3 { min-width:0; margin-top:11px; font-size:22px; line-height:1.25; }
  .mobile-work-list .work-meta { justify-self:end; gap:5px; margin-top:0; color:var(--muted); font-size:14px; white-space:nowrap; }
  .mobile-work-list .work-meta span + span::before { content:"·"; margin-right:5px; }
  .mobile-work-list .work-meta .year { min-width:0; height:auto; padding:0; border-radius:0; background:transparent; color:inherit; font-size:14px; font-weight:400; }
  .mobile-work-list .work-copy p { grid-column:1/-1; margin-top:7px; font-size:var(--site-mobile-body-font); line-height:var(--site-mobile-body-line); }
  .mobile-load-more { display:block; width:100%; min-height:50px; margin-top:15px; border:1px solid var(--coral); border-radius:10px; background:transparent; color:var(--coral); font:inherit; font-size:17px; font-weight:700; cursor:pointer; }
  .mobile-load-more[hidden] { display:none; }
  .page-loading,.empty-state { font-size:14px; margin-top:var(--section-first-gap); }
  .career-main #career-list { margin-top:var(--section-first-gap); }
  .career-row { min-height:0; margin-bottom:24px; padding-bottom:22px; }
  .career-row h2 { font-size:var(--type-section); line-height:1.3; }
  .career-row .post-meta { margin-top:4px; font-size:16px; gap:15px; }
  .career-row .meta-divider { height:13px; }
  .career-row p { margin-top:17px; font-size:16px; line-height:1.5; }
  .career-entry.has-poster { grid-template-columns:96px minmax(0,1fr); gap:16px; }
  .career-poster { width:96px; }
  .career-info h2 { font-size:var(--type-section); line-height:1.3; overflow-wrap:anywhere; }
  .career-row .career-year-type { font-size:var(--type-meta); margin-top:8px; column-gap:8px; }
  .career-meta-divider { height:13px; }
  .career-credit { margin-top:12px; }
  .detail-main { padding-top:25px; }
  .work-detail { padding-top:12px; }
  .detail-main h1 { font-size:30px; line-height:40px; }
  .detail-meta { align-items:flex-start; margin-top:17px; gap:15px; font-size:18px; }
  .detail-meta .year { flex:none; margin-top:1px; }
  .detail-summary { margin-top:31px; }
  .detail-image { margin-top:25px; }
  .detail-image img { aspect-ratio:339/256; }
  .detail-process { margin-top:21px; }
  .work-detail .detail-process { margin-top:10px; }
  .detail-process h2 { font-size:var(--type-section); line-height:1.5; }
  .detail-process h3 { font-size:20px; line-height:2; }
  .detail-process .work-article-heading { font-size:var(--site-mobile-article-heading-font); }
  .detail-process p { margin-top:17px; }
  .detail-process .article-block + .article-block { margin-top:19px; }
  .detail-image + .detail-image { margin-top:17px; }
  .profile-main { padding-top:18px; min-height:650px; }
  .profile-main > .about-section:first-of-type { padding-top:var(--section-first-gap); }
  .profile-main h2 { margin-top:35px; }
  .about-profile-layout { flex-direction:column-reverse; align-items:flex-start; }
  .about-portrait { width:150px; height:150px; }
  .site-footer { height:182px; margin-top:58px; }
  body[data-page="work"] .site-footer { margin-top:0; }
  .site-footer p { font-size:12px; }
}

@media (max-width:480px) {
  .career-entry.has-poster { grid-template-columns:96px minmax(0,1fr); gap:16px; }
  .career-poster { width:96px; }
  .career-info h2 { font-size:var(--type-section); }
}