:root {
  --red: #db3741;
  --ink: #0a0a0a;
  --black: #000000;
  --white: #ffffff;
  --paper: #f2f0ed;
  --font-display: 'pitch', 'Arial Black', Impact, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --header-height: 68px;
  --grain-image: url('assets/paper-354l-1900-q90.webp');
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--black); font-family: var(--font-body); font-weight: 400; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
img, iframe { display: block; max-width: 100%; }
.ui-icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
::selection { background: var(--red); color: var(--white); }

.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 120; padding: 0.75rem 1rem; background: var(--white); color: var(--black); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.content-wrap { width: min(100% - 2rem, 1440px); margin-inline: auto; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; isolation: isolate; background: var(--black); color: var(--white); }
.header-inner { position: relative; z-index: 1; height: var(--header-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; width: min(100% - 2rem, 1600px); margin-inline: auto; }
.menu-toggle { display: grid; place-items: center; justify-self: start; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--white); cursor: pointer; }
.menu-toggle-lines, .menu-toggle-lines::before, .menu-toggle-lines::after { display: block; width: 23px; height: 2px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
.menu-toggle-lines { position: relative; }
.menu-toggle-lines::before, .menu-toggle-lines::after { content: ''; position: absolute; left: 0; }
.menu-toggle-lines::before { transform: translateY(-7px); }
.menu-toggle-lines::after { transform: translateY(7px); }
.menu-toggle[aria-expanded='true'] .menu-toggle-lines { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-toggle-lines::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle-lines::after { transform: rotate(-45deg); }
.header-wordmark { justify-self: center; display: grid; place-items: center; width: 76px; height: 56px; }
.header-wordmark img { width: 100%; height: 100%; object-fit: contain; }
.header-contact { justify-self: end; padding: 0.55rem 0.9rem; border: 1.5px solid var(--white); border-radius: 100px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; transition: color 180ms ease, background-color 180ms ease; }
.header-contact:hover { background: var(--white); color: var(--black); }
.site-menu[hidden] { display: none; }
.site-menu { position: fixed; z-index: 1; top: var(--header-height); left: 0; width: 100%; height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height)); padding: clamp(1.25rem, 3vw, 3rem) max(1rem, calc((100vw - 1440px) / 2)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--red); color: var(--black); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 220ms ease, transform 220ms ease; }
.site-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.site-menu.is-closing { pointer-events: auto; }
.site-menu.is-closing a { pointer-events: none; }
.site-menu ul { display: flex; flex-direction: column; justify-content: center; min-height: 100%; max-width: 1440px; margin: 0 auto; padding: 0; list-style: none; }
.site-menu li + li { border-top: 1px solid var(--black); }
.site-menu a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 48px; padding: 0.55rem 0; font-family: var(--font-display); font-size: clamp(1.3rem, min(5.3vw, 8vh), 5rem); font-weight: 400; line-height: 1.1; letter-spacing: normal; transition: color 220ms ease; }
.site-menu .menu-label { min-width: 0; overflow-wrap: anywhere; text-decoration-color: transparent; text-decoration-line: underline; text-decoration-thickness: 0.035em; text-underline-offset: 0.1em; transition: text-decoration-color 220ms ease; }
.site-menu .menu-arrow { flex: none; font-size: 0.55em; font-weight: 400; transition: transform 220ms ease; }
.site-menu a:hover, .site-menu a:focus-visible { color: var(--white); }
.site-menu a:hover .menu-label, .site-menu a:focus-visible .menu-label { text-decoration-color: currentColor; }
.site-menu a:hover .menu-arrow, .site-menu a:focus-visible .menu-arrow { transform: translate(3px, -3px); }
.site-menu a:focus-visible { outline: 3px solid var(--black); outline-offset: -3px; }

.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 100svh; min-height: max(680px, 100svh); padding: calc(var(--header-height) + 5rem) 1rem 6rem; background: var(--black); color: var(--white); text-align: center; }
.hero-inner { position: relative; z-index: 1; width: min(100%, 1160px); }
.grain-surface::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; background-image: var(--grain-image); background-repeat: repeat; background-size: 950px auto; background-position: calc(var(--grain-x, 0px) + var(--grain-section-x, 0px)) calc(var(--grain-y, 0px) + var(--grain-section-y, 0px)); opacity: var(--grain-opacity, 0.13); mix-blend-mode: screen; filter: brightness(1.5); transition: opacity 100ms steps(2, end); }

/* Secondary footage sits above section grain and below section content. */
.has-aggressive-dust:not(.site-header) { position: relative; isolation: isolate; overflow: hidden; }
.aggressive-dust { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-select: none; }
.aggressive-dust--light { opacity: 0.15; mix-blend-mode: screen; }
.aggressive-dust--dark { opacity: 0.14; filter: invert(1); mix-blend-mode: multiply; }
.site-menu ul, .portfolio-inner, .portfolio-coming-soon-inner { position: relative; z-index: 1; }
.hero-logo { display: grid; place-items: center; margin: 0; }
.hero-logo-mark { position: relative; isolation: isolate; display: block; width: min(82vw, 660px); }
.hero-logo img { width: 100%; height: auto; object-fit: contain; }
.hero-logo-mark::before, .hero-logo-mark::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background-image: var(--grain-image); background-repeat: repeat; background-size: 950px auto; opacity: 0; -webkit-mask-image: url('assets/wto-visuals-logo.svg'); mask-image: url('assets/wto-visuals-logo.svg'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity 100ms steps(2, end); }
.hero-logo-mark::before { background-position: var(--visuals-grain-x, 0px) var(--visuals-grain-y, 0px); clip-path: inset(62% 0 0 0); mix-blend-mode: multiply; }
.hero-logo-mark::after { background-position: var(--wto-grain-x, 0px) var(--wto-grain-y, 0px); clip-path: inset(0 0 39% 0); mix-blend-mode: screen; filter: brightness(1.65); }
@supports ((-webkit-mask-image: url('assets/wto-visuals-logo.svg')) or (mask-image: url('assets/wto-visuals-logo.svg'))) {
  .hero-logo-mark::before { opacity: var(--visuals-grain-opacity, 0.09); }
  .hero-logo-mark::after { opacity: var(--wto-grain-opacity, 0.32); }
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: clamp(3.5rem, 8vw, 7rem); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 2.5rem; min-height: 52px; padding: 0.85rem 1.25rem; border: 2px solid currentColor; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease, background-color 180ms ease; }
.button .ui-icon { width: 0.9em; }
.button:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--red); }
.button-light { background: var(--white); color: var(--black); border-color: var(--white); }
.button-outline { color: var(--white); }
.button-outline:hover { background: var(--white); color: var(--black); }

.work { padding: clamp(5rem, 9vw, 9rem) 0 clamp(2.5rem, 4vw, 4rem); background: var(--paper); scroll-margin-top: var(--header-height); }
.eyebrow { margin: 0 0 1.5rem; color: var(--red); font-size: 0.73rem; font-weight: 900; letter-spacing: 0.15em; }
.work-title { margin: 0 0 clamp(1.2rem, 2vw, 2rem); font-family: var(--font-display); font-size: clamp(2.8rem, 9vw, 9rem); font-weight: 400; line-height: 0.95; letter-spacing: normal; overflow-wrap: anywhere; }
.work-title > .work-subtitle { display: block; margin-top: 0.35em; font-size: 0.38em; line-height: 1; letter-spacing: normal; }
.work-description { max-width: 50ch; margin: 0 0 clamp(2rem, 5vw, 5rem); color: var(--ink); font-family: var(--font-body); font-size: clamp(0.95rem, 1.3vw, 1.1rem); line-height: 1.5; }
html.motion-ready [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 650ms ease, transform 650ms ease; transition-delay: var(--reveal-delay, 0ms); }
html.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.theater { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black); }
.theater [hidden] { display: none; }
.theater-poster, .theater-embed, .theater iframe { display: block; width: 100%; height: 100%; }
.theater-poster { position: absolute; z-index: 1; inset: 0; object-fit: contain; }
.theater-embed { position: absolute; z-index: 0; inset: 0; }
.theater iframe { border: 0; }
.theater-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 48px; padding: 0.8rem 1.1rem; border: 1px solid var(--white); background: rgb(0 0 0 / 82%); color: var(--white); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; white-space: nowrap; cursor: pointer; transform: translate(-50%, -50%); transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.theater-play:hover, .theater-play:focus-visible { border-color: var(--red); background: var(--black); }
.theater-play .ui-icon { color: var(--red); }
.theater[data-player-state='error'] .theater-play { top: 0.75rem; right: 0.75rem; left: auto; min-height: 40px; padding: 0.6rem 0.8rem; font-size: 0.64rem; transform: none; }
.theater-status { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; left: 1rem; width: fit-content; max-width: calc(100% - 2rem); margin: 0; padding: 0.65rem 0.8rem; background: rgb(0 0 0 / 85%); color: var(--white); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em; line-height: 1.3; }
.theater[data-player-state='initializing'] .theater-status { top: 50%; right: auto; bottom: auto; left: 50%; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; overflow: hidden; border: 2px solid rgb(255 255 255 / 55%); border-top-color: var(--red); border-radius: 50%; background: rgb(0 0 0 / 55%); font-size: 0; transform: translate(-50%, -50%); animation: player-spin 700ms linear infinite; }
@keyframes player-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.video-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(1rem, 3vw, 3rem); align-items: baseline; padding: 1.1rem 0 1.5rem; border-bottom: 2px solid var(--ink); }
.video-number { color: var(--red); font-size: 0.8rem; font-weight: 900; white-space: nowrap; }
.video-title { margin: 0; min-width: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.7vw, 2.3rem); font-weight: 400; line-height: 1.1; letter-spacing: normal; overflow-wrap: break-word; }
.video-youtube-link { justify-self: end; padding-bottom: 0.35rem; border-bottom: 1px solid var(--red); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.05em; white-space: nowrap; }
.video-youtube-link:hover, .video-youtube-link:focus-visible { color: var(--red); }
.video-provider-note { margin: 0.55rem 0 0; font-size: 0.68rem; line-height: 1.5; }
.video-provider-note a { border-bottom: 1px solid var(--red); }
.video-provider-note a:hover { color: var(--red); }
.playlist-heading { margin: 2.25rem 0 0; font-size: 0.73rem; font-weight: 900; letter-spacing: 0.14em; }
.playlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); padding: 1.5rem 0 0; }
.playlist-card { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 2px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.playlist-card[aria-current='true'] { border-color: var(--red); }
.playlist-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.playlist-card--upcoming { cursor: default; }
.playlist-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.playlist-card:not(.playlist-card--upcoming) .playlist-thumb::after { content: ''; position: absolute; z-index: 1; inset: 0; background: var(--black); opacity: 0; pointer-events: none; transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.playlist-image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); }
.playlist-card[aria-current='true'] .playlist-thumb::after { opacity: 0.1; }
.playlist-card:focus-visible .playlist-thumb::after { opacity: 0.13; }
.playlist-card:focus-visible .playlist-image { transform: scale(1.02); }
.playlist-action { position: absolute; right: 0.55rem; bottom: 0.55rem; z-index: 1; padding: 0.35rem 0.45rem; background: var(--black); color: var(--white); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; opacity: 0; transform: translateY(3px); transition: opacity 220ms ease, transform 220ms ease; }
.playlist-card .playlist-action { z-index: 2; transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.playlist-card:focus-visible .playlist-action { opacity: 1; transform: none; }
.playlist-thumb--upcoming .playlist-action { display: none; }
.playlist-thumb--upcoming { background: #181818; color: var(--white); }
.coming-soon-mark { position: absolute; right: 0.75rem; bottom: 0.65rem; font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.45rem); text-align: right; }
.album-badge { position: absolute; top: 0.55rem; left: 0.55rem; z-index: 2; display: flex; align-items: center; gap: 0.45rem; width: 185px; height: 48px; padding: 0.3rem; background: var(--black); color: var(--white); text-align: left; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.playlist-card:focus-visible .album-badge { transform: translateY(-2px); }
.album-badge-art { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; object-fit: cover; background: #333; color: var(--white); font-family: var(--font-body); font-size: 1rem; }
.album-badge-copy { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; }
.album-badge-label { font-size: 0.56rem; font-weight: 400; line-height: 1.1; letter-spacing: 0.025em; }
.album-badge-name { overflow: hidden; font-size: 0.73rem; font-weight: 900; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.playlist-details { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.8rem; align-items: baseline; width: 100%; padding: 0.7rem 0.35rem 0.3rem; }
.playlist-number { color: var(--red); font-size: 0.75rem; font-weight: 900; white-space: nowrap; }
.playlist-card[aria-current='true'] .playlist-number { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.playlist-name { min-width: 0; font-family: var(--font-display); font-size: clamp(0.95rem, 1.4vw, 1.18rem); font-weight: 400; line-height: 1.15; overflow-wrap: break-word; }
@media (hover: hover) and (pointer: fine) {
  .playlist-card:not(.playlist-card--upcoming):hover .playlist-thumb::after { opacity: 0.13; }
  .playlist-card:not(.playlist-card--upcoming):hover .playlist-image { transform: scale(1.02); }
  .playlist-card:not(.playlist-card--upcoming):hover .playlist-action { opacity: 1; transform: none; }
  .playlist-card:not(.playlist-card--upcoming):hover .album-badge { transform: translateY(-2px); }
}
@media (min-width: 600px) { .playlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .playlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .playlist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.collections { padding: 0 0 clamp(5rem, 9vw, 9rem); background: var(--paper); scroll-margin-top: var(--header-height); }
.collections .content-wrap { padding-top: clamp(2.5rem, 4vw, 4rem); border-top: 1px solid var(--ink); }
.collections-title { margin-bottom: clamp(1.8rem, 3vw, 3rem); }
.collections-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
.collection-card { display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-align: left; }
.collection-card[href]:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.collection-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); color: var(--white); }
.collection-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 200ms ease, filter 200ms ease; }
.collection-card[href]:focus-visible .collection-thumb img { transform: scale(1.02); filter: brightness(0.9); }
.collection-card[href]:focus-visible .playlist-action { opacity: 1; transform: none; }
.collection-card .playlist-action { transition-duration: 200ms; }
.collection-card .playlist-name { overflow-wrap: normal; }
@media (hover: hover) and (pointer: fine) {
  .collection-card[href]:hover .collection-thumb img { transform: scale(1.02); filter: brightness(0.9); }
  .collection-card[href]:hover .playlist-action { opacity: 1; transform: none; }
}
@media (min-width: 600px) { .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .collections-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .collection-card:nth-child(-n+4) { grid-column: span 3; }
  .collection-card:nth-child(n+5) { grid-column: span 4; }
}

.portfolio { padding: clamp(5rem, 9vw, 9rem) 0; background: var(--red); color: var(--black); scroll-margin-top: var(--header-height); }
.portfolio-inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2rem, 4vw, 4rem); }
.portfolio h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 8.5vw, 8.5rem); font-weight: 400; line-height: 0.96; letter-spacing: normal; overflow-wrap: anywhere; }
.button-black { border-color: var(--black); background: var(--black); color: var(--white); }
.button-black:hover { box-shadow: 3px 3px 0 var(--white); }

.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 6vw, 6rem) 0 calc(7rem + env(safe-area-inset-bottom, 0px)); background: var(--black); color: var(--white); }
.footer-inner { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.footer-email { justify-self: start; font-size: clamp(1.45rem, 4.6vw, 4rem); font-weight: 900; letter-spacing: -0.055em; overflow-wrap: anywhere; }
.footer-email:hover { color: var(--red); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.footer-links a { display: grid; place-items: center; width: 44px; height: 44px; transition: transform 180ms ease, opacity 180ms ease; }
.footer-links a:hover { transform: translateY(-3px); opacity: 0.7; }
.footer-links img { width: 25px; height: 25px; object-fit: contain; }
.footer-links .back-to-top { margin-left: auto; font-size: 1.75rem; line-height: 1; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1rem; border-top: 1px solid #555; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.09em; }
.footer-legal a, .portfolio-privacy a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.25em; }
.footer-legal a:hover, .portfolio-privacy a:hover { color: var(--red); }

.portfolio-page { min-height: 100svh; overflow-x: hidden; background: var(--black); color: var(--white); }
.portfolio-back { position: absolute; z-index: 1; top: calc(1.5rem + env(safe-area-inset-top, 0px)); left: calc(1.5rem + env(safe-area-inset-left, 0px)); display: inline-flex; align-items: center; gap: 0.35em; padding: 0.5rem 0; border-bottom: 2px solid var(--red); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; transition: color 180ms ease; }
.portfolio-back:hover { color: var(--red); }
.portfolio-coming-soon { min-height: 100svh; display: grid; place-items: center; padding: clamp(4.5rem, 10svh, 7rem) clamp(1.25rem, 3vw, 3rem); text-align: center; }
.portfolio-coming-soon-inner { width: min(100%, 1700px); margin-inline: auto; }
.portfolio-coming-soon-label { margin: 0 0 1.5rem; color: var(--red); font-size: clamp(0.8rem, 1.5vw, 1rem); font-weight: 900; letter-spacing: 0.18em; }
.construction-title { margin: 0; font-family: var(--font-display); font-size: clamp(4rem, 11vw, 11rem); font-weight: 400; line-height: 0.88; word-break: keep-all; overflow-wrap: normal; }
.construction-title span { display: block; white-space: nowrap; }
.portfolio-contact { margin: clamp(2.5rem, 4vw, 3.4rem) auto 0; font-family: var(--font-body); }
.portfolio-contact p { margin: 0 0 0.7rem; font-size: clamp(0.85rem, 1.25vw, 1rem); line-height: 1.45; }
.portfolio-contact-link { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; min-height: 44px; padding: 0.35rem 0.2rem 0.55rem; color: var(--red); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; }
.portfolio-contact-label { display: inline-flex; align-items: center; gap: 0.35em; }
.portfolio-contact-address { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.02em; }
.portfolio-contact-link::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; transform: scaleX(0.75); transition: transform 220ms ease; }
.portfolio-contact-link:hover::after, .portfolio-contact-link:focus-visible::after { transform: scaleX(1); }
.portfolio-contact-link:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.portfolio-privacy { padding: 1.25rem; color: var(--white); font-size: 0.65rem; letter-spacing: 0.09em; text-align: center; }

.privacy-page { min-height: 100svh; background: var(--paper); color: var(--ink); }
.privacy-header { padding: 0.6rem max(1rem, calc((100vw - 700px) / 2)); background: var(--black); color: var(--white); }
.privacy-header a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.privacy-header a:hover { color: var(--red); }
.privacy-main { width: min(100% - 2rem, 700px); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); }
.privacy-main h1 { margin: 0 0 0.35rem; font-family: var(--font-body); font-size: clamp(1.75rem, calc(1.5rem + 1vw), 2.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.privacy-main h2 { margin: 2rem 0 0.45rem; font-family: var(--font-body); font-size: clamp(1.0625rem, calc(1rem + 0.25vw), 1.25rem); font-weight: 700; line-height: 1.3; }
.privacy-main p, .privacy-main li { font-size: 0.9375rem; line-height: 1.7; }
.privacy-main p { margin: 0 0 1rem; }
.privacy-main .privacy-updated { margin: 0 0 1.5rem; color: #555; font-size: 0.75rem; letter-spacing: normal; }
.privacy-main ul { margin: 0.5rem 0 1.25rem; padding-left: 1.25rem; }
.privacy-main li + li { margin-top: 0.5rem; }
.privacy-main a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.privacy-main a:hover { color: var(--red); }
.privacy-footer { padding: 1.25rem max(1rem, calc((100vw - 700px) / 2)); background: var(--black); color: var(--white); font-size: 0.7rem; letter-spacing: 0.08em; }
.privacy-footer a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.2em; }

@media (max-width: 699px) {
  .privacy-main p, .privacy-main li { font-size: 0.875rem; }
}

.recent-upload-dock { position: fixed; z-index: 90; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); visibility: hidden; background: var(--black); color: var(--white); border: 1px solid #777; border-left: 3px solid var(--red); opacity: 0.72; transform: translateY(6px); transition: opacity 300ms ease, transform 300ms ease, border-color 180ms ease; }
.recent-upload-dock.is-ready { visibility: visible; opacity: 0.86; transform: none; }
.recent-upload-dock.is-scrolled { opacity: 0.96; }
.recent-upload-link { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; min-height: 66px; padding: 0.4rem 0.55rem; }
.recent-upload-image { width: 92px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; background: #222; }
.recent-upload-copy { display: grid; min-width: 0; gap: 0.3rem; }
.recent-upload-label { color: var(--red); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; white-space: nowrap; }
.recent-upload-title { overflow: hidden; font-size: 0.72rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.recent-upload-arrow { align-self: start; font-size: 1rem; line-height: 1; }
.recent-upload-link:focus-visible { outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .recent-upload-dock:hover { opacity: 1; transform: translateY(-2px); border-color: var(--white); }
}

@media (min-width: 700px) {
  :root { --header-height: 78px; }
  .content-wrap { width: min(100% - 4rem, 1440px); }
  .header-inner { width: min(100% - 4rem, 1600px); }
}

@media (max-width: 699px) {
  .work { padding: 3.5rem 0 2.75rem; }
  .work .eyebrow { margin-bottom: 1rem; }
  .work .work-title { font-size: clamp(2.7rem, 11vw, 4.5rem); }
  .work-description { margin-bottom: 1.5rem; }
  .video-info { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.8rem; row-gap: 0.55rem; padding: 0.85rem 0 1rem; }
  .video-title { font-size: clamp(1.1rem, 4.8vw, 1.5rem); line-height: 1.15; }
  .video-youtube-link { grid-column: 2; justify-self: start; font-size: 0.65rem; }
  .playlist-heading { margin-top: 1.5rem; }
  .playlist { gap: 1rem; padding-top: 1rem; }
  .playlist-details { padding: 0.6rem 0.3rem 0.35rem; }
  .playlist-name { font-size: clamp(1rem, 3.8vw, 1.15rem); overflow-wrap: normal; }
  .recent-upload-dock { right: calc(0.65rem + env(safe-area-inset-right, 0px)); bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)); width: min(238px, calc(100vw - 1.3rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
  .recent-upload-link { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 0.5rem; min-height: 54px; padding: 0.3rem 0.4rem; }
  .recent-upload-image { width: 68px; }
  .recent-upload-label { font-size: 0.5rem; }
  .recent-upload-title { font-size: 0.61rem; }
  .recent-upload-dock.is-gallery-visible { opacity: 0; transform: translateY(calc(100% + 1rem + env(safe-area-inset-bottom, 0px))); pointer-events: none; }
}

@media (max-width: 380px) {
  .header-inner { width: min(100% - 1.25rem, 1600px); }
  .header-contact { padding-inline: 0.6rem; font-size: 0.6rem; }
  .header-wordmark { width: 66px; height: 48px; }
  .album-badge { width: 170px; height: 44px; }
  .album-badge-art { flex-basis: 32px; width: 32px; height: 32px; }
  .album-badge-name { font-size: 0.68rem; }
}

@media (max-width: 480px) {
  .portfolio-back { left: calc(1rem + env(safe-area-inset-left, 0px)); font-size: 0.6rem; }
}

@media (max-width: 720px) {
  .construction-title { font-family: var(--font-display); font-size: clamp(1.75rem, 8.5vw, 5.25rem); font-weight: 400; line-height: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .theater[data-player-state='initializing'] .theater-status { animation: none; }
  .aggressive-dust { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html.motion-ready [data-reveal] { opacity: 1; transform: none; }
  .recent-upload-dock { transform: none; }
  .grain-surface::before { opacity: 0.13; background-position: 0 0; }
  .hero-logo-mark::before { background-position: 0 0; }
  .hero-logo-mark::after { background-position: 0 0; }
}