:root { --accent: #d8c77a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
img, video { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.designer-wordmark { font-size: 22px; line-height: 1; }
.designer-wordmark > span { display: block; }
.wordmark-caption { display: flex !important; align-items: baseline; gap: 14px; margin-top: 8px; font-size: 11px; font-weight: 400; letter-spacing: .03em; }
.wordmark-caption > span:last-child { color: var(--muted); font-size: 10px; }
.contact-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.contact-name > strong { font-size: 36px; }
.contact-name > span { display: inline; font-size: 14px; margin: 0; }
.cover-all img { object-position: center 25%; }
.stage[data-current="all-live"] .stage-media img,
.stage[data-current="all-live"] .stage-media video { object-position: center 26%; }

/* Yellow accents move with the narrative; the surrounding gallery stays neutral. */

/* Series images replace both the text tabs and unrelated supporting stills. */
.case-series { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 18px 12px; margin-top: 20px; align-items: start; }
.series-button { display: block; min-width: 0; text-align: left; }
.series-visual { position: relative; display: block; aspect-ratio: 1.3; width: 100%; overflow: hidden; background: #181818; border: 1px solid #393939; }
.series-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.series-button[aria-pressed="true"] .series-visual { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.series-button[aria-pressed="true"] .series-visual::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--fg); pointer-events: none; }
.series-label { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.series-button[aria-pressed="true"] .series-label { color: var(--fg); }
.gallery-frame { width: 100%; text-align: left; }
.case-image-button { display: block; width: 100%; }
.document-link { width: 100%; text-align: left; }
.case-documents { display: grid; gap: 10px; margin-bottom: 28px; }
.case-documents .document-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin: 0; padding: 15px 16px; color: var(--bg); background: var(--fg); border-color: var(--fg); }
.case-documents .document-link-secondary { min-height: 48px; padding: 12px 16px; color: #c8c8c5; background: transparent; border-color: var(--line); font-size: 14px; }
.case-documents .document-link:hover { border-color: #fff; background: #fff; color: var(--bg); }
.document-label { word-break: keep-all; overflow-wrap: break-word; }
.document-arrow { flex-shrink: 0; }

/* Custom playback controls expose no download or browser media menu. */
.player-shell { width: 100%; min-width: 0; background: #030303; }
.player-controls { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid #292929; background: #121212; }
.player-controls button { min-height: 36px; font-size: 12px; white-space: nowrap; }
.player-time { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #c6c6c4; }
.player-seek { appearance: none; width: 100%; height: 44px; margin: 0; background: linear-gradient(to right, #efefed var(--played, 0%), #484846 var(--played, 0%)) center / 100% 3px no-repeat; border-radius: 0; cursor: pointer; }
.player-seek::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: #efefed; border: 0; border-radius: 0; }
.player-seek::-moz-range-thumb { width: 16px; height: 16px; background: #efefed; border: 0; border-radius: 0; }
.player-seek:focus-visible { outline: 2px solid white; outline-offset: 8px; }
.player-error { padding: 18px; color: #ccc; font-size: 15px; }
.player-error[hidden] { display: none; }
.player-shell:fullscreen { display: flex; flex-direction: column; justify-content: center; background: black; }
.player-shell:fullscreen .case-player { height: calc(100dvh - 62px); }
.player-shell:fullscreen .player-controls { flex: 0 0 auto; }

/* Full images and rendered document pages stay inside the portfolio. */
.asset-open { overflow: hidden; }
.asset-dialog { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 var(--gutter); background: #0b0b0b; color: var(--fg); border: 0; overscroll-behavior: contain; }
.asset-dialog[open] { display: flex; flex-direction: column; }
.asset-dialog::backdrop { background: #000d; }
.asset-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.asset-toolbar h2 { flex: 1; min-width: 0; font-size: 18px; line-height: 1.4; font-weight: 400; word-break: keep-all; overflow-wrap: anywhere; }
.asset-actions { display: flex; gap: 28px; flex-shrink: 0; }
.asset-actions button { min-height: 44px; font-size: 14px; white-space: nowrap; }
.asset-stage { position: relative; flex: 1; min-height: 0; width: 100%; overflow: auto; padding: 18px 0; overscroll-behavior: contain; }
.asset-stage > img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.asset-stage > img[hidden] { display: none; }
.asset-stage.is-zoomed > img { width: max(100%, 1200px); height: auto; max-width: none; max-height: none; }
.asset-error { padding: 40px 20px; text-align: center; color: var(--muted); }
.asset-error[hidden] { display: none; }
.asset-pagination { display: flex; justify-content: center; align-items: center; gap: 36px; padding: 8px 0 14px; flex-shrink: 0; border-top: 1px solid var(--line); }
.asset-pagination button { min-width: 44px; min-height: 44px; font-size: 22px; }
.asset-pagination button:disabled { opacity: .25; cursor: default; }
.asset-pagination span { font-size: 14px; letter-spacing: .06em; }
@media (max-width: 800px) {
}
@media (max-width: 640px) {
  .designer-wordmark { font-size: 18px; }
  .wordmark-caption { gap: 10px; font-size: 9px; }
  .wordmark-caption > span:last-child { font-size: 9px; }
  .case-series { gap: 15px 8px; }
  .series-label { font-size: 10px; }
  .player-controls { grid-template-columns: auto minmax(50px, 1fr) auto; gap: 2px 12px; padding: 8px 12px; }
  .player-controls button { min-height: 38px; }
  .player-controls button:nth-last-child(2) { grid-column: 1 / 2; justify-self: start; }
  .player-controls button:last-child { grid-column: 3; justify-self: end; }
  .asset-toolbar { align-items: start; gap: 14px; }
  .asset-toolbar h2 { font-size: 15px; padding-top: 9px; }
  .asset-actions { gap: 18px; }
  .asset-actions button { font-size: 14px; }
  .asset-stage.is-zoomed > img { width: max(100%, 1000px); }
}
@media print { .stage-media, .case-media, .work-cover, .asset-stage { visibility: hidden !important; } }

/* One name, one headline, one supporting line. */
.site-header { grid-template-columns: 1fr auto; }
.designer-wordmark { display: flex; align-items: baseline; gap: 10px; }
.designer-wordmark .wordmark-caption { display: inline !important; margin: 0; font-size: 11px; color: var(--muted); font-weight: 400; }

/* The filled line carries a promise: idea, shared direction, finished story. */

/* A shared detail grid adapts to portrait work without adding letterbox space. */
.project-dialog { --case-height: clamp(300px, 64svh, 680px); --case-controls: 64px; }
.project-dialog .dialog-top, #dialog-content { max-width: 1440px; margin-left: auto; margin-right: auto; }
#dialog-content { --case-columns: minmax(0, 1.8fr) minmax(250px, 1fr); }
#dialog-content[data-layout="portrait"] { --case-columns: minmax(0, min(38vw, 460px)) minmax(0, 1fr); }
.project-dialog .case-heading { display: grid; grid-template-columns: var(--case-columns); align-items: start; gap: clamp(30px, 5vw, 80px); margin: 38px 0 32px; }
.project-dialog .case-heading h2 { font-size: clamp(40px, 5.3vw, 76px); line-height: 1.05; }
.project-dialog .case-subtitle { margin-top: 12px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; word-break: keep-all; }
.project-dialog .case-credit { max-width: none; margin: 0; padding-top: 8px; font-size: 13px; }
.project-dialog .case-body { grid-template-columns: var(--case-columns); gap: clamp(30px, 5vw, 80px); align-items: start; }
.case-primary { width: 100%; min-width: 0; background: transparent; }
.case-primary .player-shell, .case-primary .case-image-button { width: min(100%, calc(var(--case-height) * var(--media-ratio, 1.5))); margin-inline: 0; }
.project-dialog .case-primary .case-player, .project-dialog .case-primary .case-image { display: block; width: 100%; height: auto; max-height: var(--case-height); aspect-ratio: var(--media-ratio, 1.5); object-fit: contain; }
.project-dialog .case-primary .player-controls { min-height: var(--case-controls); }
.case-image-action { display: flex; align-items: center; justify-content: space-between; min-height: var(--case-controls); padding: 10px 16px; background: #121212; border-top: 1px solid #292929; font-size: 14px; }
.project-dialog .case-notes { padding-top: 0; min-width: 0; max-width: 680px; }
.case-note p { max-width: 52ch; }
.case-fit { margin: 0 0 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.case-fit-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.case-fit-row + .case-fit-row { margin-top: 10px; }
.case-fit dt { color: var(--muted); font-size: 14px; line-height: 1.7; font-weight: 400; }
.case-fit dd { margin: 0; font-size: 15px; line-height: 1.7; color: #d5d5d2; word-break: keep-all; overflow-wrap: break-word; }
.project-dialog .case-series, .project-dialog .case-tabs, .project-dialog .case-gallery { margin-top: 20px; }
.project-dialog .case-primary .player-shell:fullscreen { width: 100%; height: 100%; max-width: none; }
.project-dialog .case-primary .player-shell:fullscreen .case-player { height: calc(100dvh - 120px); max-height: none; aspect-ratio: auto; }
.player-shell[data-media-shape="portrait"] .player-controls { grid-template-columns: auto minmax(35px, 1fr) auto; gap: 2px 12px; padding: 8px 12px; }
.player-shell[data-media-shape="portrait"] .player-controls button { min-height: 44px; font-size: 14px; }
.player-shell[data-media-shape="portrait"] .player-controls button:nth-last-child(2) { grid-column: 1 / 2; justify-self: start; }
.player-shell[data-media-shape="portrait"] .player-controls button:last-child { grid-column: 3; justify-self: end; }
.player-time { font-size: 12px; }
.character-design { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 22px; }
.character-design > h3 { font-size: 14px; font-weight: 400; letter-spacing: .07em; margin-bottom: 16px; }
.character-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.character-sheet { display: block; width: 100%; min-width: 0; text-align: left; }
.character-sheet:first-child { grid-column: 1 / -1; }
.character-sheet-visual { display: block; width: 100%; aspect-ratio: 1.25; background: #171717; }
.character-sheet:first-child .character-sheet-visual { aspect-ratio: 1.5; }
.character-sheet-visual img { width: 100%; height: 100%; object-fit: contain; }
.character-sheet-label { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; letter-spacing: .04em; }
.contact-details .contact-phone-note { margin-top: 12px; font-size: 14px; font-weight: 400; line-height: 1.65; color: #bcbcb9; word-break: keep-all; overflow-wrap: break-word; }
@media (max-width: 800px) {
  #dialog-content { --case-columns: minmax(0, 1.6fr) minmax(210px, 1fr); }
  .project-dialog .case-heading, .project-dialog .case-body { gap: 28px; }
  .player-controls { grid-template-columns: auto minmax(35px, 1fr) auto; gap: 2px 12px; padding: 8px 12px; }
  .player-controls button:nth-last-child(2) { grid-column: 1 / 2; justify-self: start; }
  .player-controls button:last-child { grid-column: 3; justify-self: end; }
}
@media (max-width: 640px) {
  .designer-wordmark { gap: 7px; }
  .designer-wordmark .wordmark-caption { font-size: 10px; }
  .project-dialog { --case-height: min(68svh, calc(100svh - 190px), 620px); --case-controls: 96px; }
  #dialog-content, #dialog-content[data-layout="portrait"] { --case-columns: minmax(0, 1fr); }
  .project-dialog .case-heading { display: block; margin: 28px 0 24px; }
  .project-dialog .case-heading h2 { font-size: 40px; }
  .project-dialog .case-credit { margin-top: 14px; padding: 0; font-size: 12px; }
  .project-dialog .case-body { grid-template-columns: 1fr; gap: 28px; }
  .case-series { gap: 8px; }
  .series-label { font-size: 10px; letter-spacing: 0; }
  .character-sheet-grid { gap: 18px 10px; }
  .player-controls button { min-height: 44px; min-width: 44px; font-size: 14px; }
  .project-dialog { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  .asset-pagination { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .contact-panel { padding-bottom: env(safe-area-inset-bottom); }
}

/* Give the strongest work room, with a compact supporting collection. */
.scene-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 58px; }
.work-card-featured { grid-column: span 2; }
.work-card-featured .work-caption h3 { font-size: clamp(32px, 3.6vw, 56px); }
.work-card:not(.work-card-featured) .work-caption h3 { font-size: clamp(23px, 1.8vw, 31px); }
.work-card:not(.work-card-featured) .card-meta > span:last-child { display: none; }
.work-section { padding-top: clamp(72px, 8vw, 120px); }
.work-caption { padding-top: 16px; }
.cover-all img { object-position: center 27%; }
[data-project="dubu"] > img { object-position: center 48%; }
[data-project="coffee"] > img { object-position: center 48%; }
[data-project="logo"] > img { object-fit: contain; background: #f2f0e9; }
.player-shell { position: relative; }
.player-status { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 10px; background: #090909d9; font-size: 13px; color: #e5e5e1; pointer-events: none; }
.player-status[hidden] { display: none; }
.player-error button { display: inline-block; margin-left: 16px; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
.case-sequence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.case-sequence .series-label { font-size: 12px; }
.case-sequence + .case-tabs { margin-top: 14px; }
.case-tabs[hidden] { display: none; }
.case-image-action { color: #c6c6c4; }
.contact-body { padding-top: 40px; }
.contact-body h2 { font-size: clamp(42px, 4.8vw, 66px); margin-bottom: 28px; }
.contact-details { margin-top: 26px; }
.contact-details a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1100px) {
 .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .work-card-featured { grid-column: span 1; }
 .work-card:not(.work-card-featured) .work-cover { aspect-ratio: 1.6; }
 .work-card:not(.work-card-featured) .work-caption h3 { font-size: 29px; }
}
@media (max-width: 640px) {
 .site-header { align-items: center; column-gap: 12px; }
 .site-header nav { font-size: 14px; gap: 16px; }
 .site-header nav a, .site-header nav button { min-height: 44px; display: inline-flex; align-items: center; }
 .designer-wordmark { font-size: 18px; }
 .designer-wordmark .wordmark-caption { font-size: 12px; }
 .scene-choice > span:first-child { font-size: 14px; }
 .stage { aspect-ratio: 1.13; }
 .work-grid { grid-template-columns: 1fr; row-gap: 40px; }
 .work-card-featured .work-caption h3 { font-size: 37px; }
 .case-sequence { gap: 8px; }
 .series-label, .case-sequence .series-label { font-size: 12px; letter-spacing: 0; }
 .contact-body { padding-top: 28px; }
 .contact-body h2 { font-size: 48px; margin-top: 16px; margin-bottom: 24px; }
 .contact-details { margin-top: 22px; }
 .contact-details > div { padding: 14px 0; }
 .contact-details dt { margin-bottom: 2px; }
}
@media (max-width: 360px) {
 .designer-wordmark { display: block; font-size: 17px; }
 .designer-wordmark .wordmark-caption { display: block !important; margin-top: 5px; }
 .site-header nav { gap: 12px; }
 .contact-name > strong { font-size: 30px; }
 .contact-details dd { font-size: 21px; }
}

/* The final invitation owns Contact; the footer keeps one balanced identity row. */
.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-top: 22px; padding-bottom: 22px; line-height: 1.4; }
.site-footer > span.footer-name { font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.site-footer > span.footer-role { display: block; font-size: 14px; font-weight: 400; letter-spacing: .03em; text-align: center; color: var(--muted); }
.site-footer > a.footer-top { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) {
  .site-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding-top: 22px; padding-bottom: 22px; }
  .site-footer > span.footer-name { grid-column: 1; grid-row: 1; font-size: 16px; }
  .site-footer > span.footer-role { grid-column: 1; grid-row: 2; font-size: 14px; text-align: left; letter-spacing: 0; }
  .site-footer > a.footer-top { grid-column: 2; grid-row: 1 / 3; }
  .case-fit-row { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
}