@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500&display=swap');

:root { --paper: #efefed; --ink: #151515; --muted: #8d8d89; --line: #c8c8c3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: 15px; line-height: 1.16; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-shell { padding: 10px; max-width: 1600px; margin: 0 auto; }
.masthead { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-height: 0; position: relative; align-items: start; }
.single-view .masthead { display: none; }
.single-view .studio-intro { display: none; }
.single-view > .site-shell > .site-nav,
.single-view .single-top { display: none; }
.single-view .single { margin-top: 0; }
.mark { display: block; width: 100%; aspect-ratio: 1; }
.mark-p-top { grid-column: 1; grid-row: 1; }
.mark-e-top { grid-column: 2; grid-row: 1; }
.mark-p-bottom { grid-column: 3; grid-row: 1; }
.mark-e-bottom { grid-column: 4; grid-row: 1; }
.masthead.is-chaotic { position: fixed; z-index: 20; inset: 0; display: block; background: var(--paper); cursor: pointer; }
.masthead.is-chaotic .mark { position: absolute; transition: transform .7s cubic-bezier(.2,.8,.2,1), left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1); }
.masthead.is-chaotic .mark-p-top { left: 5vw; top: 8vh; transform: rotate(-19deg); }
.masthead.is-chaotic .mark-e-top { left: 57vw; top: 13vh; transform: rotate(24deg); }
.masthead.is-chaotic .mark-p-bottom { left: 18vw; top: 58vh; transform: rotate(13deg); }
.masthead.is-chaotic .mark-e-bottom { left: 68vw; top: 63vh; transform: rotate(-28deg); }
.studio-intro { margin: 0 0 86px; }
.site-nav { display: flex; align-items: center; gap: 18px; margin: 10px 0 38px; }
.site-nav a { font-size: 16px; }
.site-nav .active { text-decoration: underline; text-underline-offset: 3px; }
.view-icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; }
.site-nav a:last-child .view-icon { fill: none; }
.category-filters { display: flex; align-items: center; gap: 18px; margin-left: 4px; flex-wrap: wrap; }
.category-filters button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.category-filters button.active { text-decoration: underline; text-underline-offset: 3px; }
.projects { border-top: 0; }
.projects[hidden] { display: none; }
#table-project-list { display: none; }
#single-table-project-list { display: none; }
.table-project-card { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; cursor: pointer; }
.table-project-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.table-view #project-list { display: none; }
.table-view .projects > .project-head { display: none; }
.table-view #table-project-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.table-view .single-projects > .project-head,
.table-view .single-projects #single-project-list { display: none; }
.table-view .single-projects #single-table-project-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.single-nav { margin: 0 0 18px; }
.footer-project-info { opacity: 0; transition: opacity .18s ease; }
.table-view.table-hover .footer-project-info { opacity: 1; }
.project-grid { display: grid; grid-template-columns: 2.2fr .75fr 1fr .35fr; gap: 16px; }
.project-head { padding: 8px 0 7px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; }
.project-row { border-top: 0; padding: 11px 0 12px; min-height: 47px; font-size: 17px; }
.project-row span:not(:first-child) { color: #666662; }
.project-row a:hover { color: #777; text-decoration: none; }
.project-row { position: relative; cursor: pointer; }
.project-row a { display: block; }
.hover-still { position: fixed; z-index: 5; left: 50vw; top: 50vh; width: 420px; aspect-ratio: 16 / 10; background: var(--ink); opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity .18s ease, transform .18s ease, left .22s ease, top .22s ease, width .22s ease; }
.hover-still.is-visible { transform: translate(-50%, -50%); }
.hover-still.is-visible { opacity: 1; }
.hover-still video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hover-still span { position: absolute; bottom: 8px; left: 10px; color: var(--paper); font: 12px 'DM Mono', monospace; }
.single { border-top: 0; margin-top: 60px; padding-bottom: 110px; }
.single[hidden] { display: none; }
.single-top { display: flex; justify-content: space-between; padding: 9px 0 14px; font: 12px 'DM Mono', monospace; color: var(--muted); }
.player-wrap { display: flex; flex-wrap: wrap; align-items: center; }
.video-frame { order: 1; position: relative; width: 100%; }
.single-player { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: none; object-fit: contain; background: var(--ink); }
.carousel-button { order: 2; width: 52px; height: 38px; margin-top: 10px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; opacity: .68; transition: opacity .18s ease; }
.carousel-button:hover { opacity: 1; }
.carousel-prev { margin-right: auto; }
.carousel-next { margin-left: auto; }
.audio-toggle { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 30px; height: 30px; display: grid; place-items: center; padding: 4px; border: 0; background: rgba(0, 0, 0, .42); color: #fff; cursor: pointer; }
.audio-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.audio-toggle .speaker-shape { fill: currentColor; stroke: none; }
.audio-toggle .speaker-slash { display: block; }
.audio-toggle.is-unmuted .speaker-slash { display: none; }
.audio-toggle:hover { background: rgba(0, 0, 0, .7); }
.single-projects { margin-top: 42px; }
.single-info { display: grid; grid-template-columns: 2.2fr 1.55fr 1fr; gap: 16px; padding: 30px 0 120px; min-height: 270px; }
.single-title { font-size: clamp(2rem, 4vw, 4.8rem); line-height: .95; letter-spacing: -.05em; font-weight: 400; margin: 10px 0 0; }
.single-description { margin: 0; font-size: 18px; max-width: 600px; }
.single-meta { margin: 0; color: #666662; }
.single-meta div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; margin-bottom: 5px; }
.single-meta dt { color: var(--muted); }
.single-meta dd { margin: 0; }
.image-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 90px; }
.mini-image { height: 250px; background: var(--ink); position: relative; overflow: hidden; }
.mini-image span { position: absolute; z-index: 1; color: var(--paper); left: 10px; top: 10px; font-family: 'DM Mono', monospace; }
.mini-one::before { width: 80%; height: 55%; top: 23%; left: 10%; border-radius: 50%; transform: rotate(10deg); }
.mini-two::before { width: 65%; height: 75%; top: 12%; left: 18%; border-radius: 50% 50% 0 0; }
.mini-three::before { width: 120%; height: 50%; top: 22%; left: -10%; border-radius: 50%; }
.mini-four::before { width: 45%; height: 45%; top: 28%; left: 28%; border-radius: 50%; box-shadow: 0 0 0 30px var(--ink), 0 0 0 55px var(--paper); }
.studio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border-top: 0; margin-top: 0; padding: 14px 0 130px; }
.eyebrow { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--muted); }
.studio-copy { grid-column: 3; min-width: 0; max-width: 100%; margin: 0; font-size: clamp(1.2rem, 2.55vw, 2.85rem); line-height: 1.02; letter-spacing: -.04em; }
.studio-meta { display: flex; flex-direction: column; gap: 4px; color: #666662; }
.studio-intro .studio-meta { grid-column: 4; }
body:not(.single-view) footer { margin-top: 110px; }
.footer-line { border-top: 0; display: flex; justify-content: space-between; padding: 9px 0 12px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; }
.footer-name { margin-left: auto; }
.footer-contact { text-align: right; }
.footer-mark { display: none; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 54px; }
.single-view .footer-mark { display: grid; }
.footer-mark img { display: block; width: 100%; aspect-ratio: 1; }
@media (max-width: 760px) {
  body { font-size: 14px; }
  .site-shell { padding: 7px; }
  .masthead { min-height: 0; gap: 7px; }
  .site-nav { margin-bottom: 26px; align-items: flex-start; }
  .category-filters { gap: 10px 14px; }
  .project-grid { grid-template-columns: 1.8fr .85fr .9fr .35fr; gap: 7px; }
  .project-head { font-size: 10px; }
  .project-row { font-size: 14px; padding: 9px 0; }
  .table-view #table-project-list,
  .table-view .single-projects #single-table-project-list { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .hover-still { width: 240px; }
  .single { margin-top: 42px; }
  .single-player { min-height: 200px; }
  .carousel-button { width: 40px; height: 40px; font-size: 22px; }
  .carousel-prev { left: 8px; }
  .carousel-next { right: 8px; }
  .footer-mark { gap: 7px; padding-top: 34px; }
  .single-info { grid-template-columns: 1fr; gap: 24px; padding: 26px 0 84px; min-height: 0; }
  .studio { grid-template-columns: 1fr; margin-top: 0; padding-bottom: 90px; }
  .studio-copy, .studio-intro .studio-meta { grid-column: auto; }
  .studio-meta { flex-direction: row; flex-wrap: wrap; justify-content: space-between; font-size: 12px; }
  footer { gap: 12px; flex-direction: column; }
  .footer-line { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 4px; text-align: center; }
  .footer-back-link { grid-row: 1; }
  .footer-project-info { display: none !important; }
  .footer-separator { display: none; }
  .footer-name { grid-row: 2; margin-left: 0; }
  .footer-contact { grid-row: 3; text-align: center; }
}