@font-face { font-family: pixelB; src: url("font/JF-Dot-Izumi16B.ttf"); font-display: swap; }
@font-face { font-family: pixelSB; src: url("font/JF-Dot-Shinonome12B.ttf"); font-display: swap; }
@font-face { font-family: pixel; src: url("font/JF-Dot-Shinonome16.ttf"); font-display: swap; }
@font-face { font-family: pixelS; src: url("font/JF-Dot-ShinonomeMin16.ttf"); font-display: swap; }

:root {
  --paper: #f7f9fb;
  --paper-glass: rgba(247, 249, 251, .92);
  --ink: #101010;
  --muted: #66675f;
  --line: rgba(16, 16, 16, .34);
  --signal: #002fa7;
  --acid: #ffda1a;
  --page: min(100% - 2rem, 1240px);
  --pixel: pixel, "Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;
  --pixel-bold: pixelB, "Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(247,249,252,.88), rgba(247,249,252,.88)), url("bg.jpg");
  background-repeat: repeat;
  background-size: auto, 1000px 646px;
  font-family: var(--pixel);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .045;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px);
  mix-blend-mode: multiply;
}
body[data-page="project"]::after { display: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 9999; transform: translateY(-200%); padding: .5rem .75rem; color: var(--paper); background: var(--ink); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (pointer: fine) {
  body, a, button { cursor: none; }
  #custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10002;
    width: 118px;
    height: 118px;
    opacity: 0;
    pointer-events: none;
    background: url("../cursor.png") center / contain no-repeat;
    transition: width .18s, height .18s, opacity .15s, filter .18s;
    will-change: transform;
  }
  #custom-cursor.is-visible { opacity: .82; }
  #custom-cursor.is-link { width: 154px; height: 154px; filter: hue-rotate(30deg) saturate(1.4); }
  #custom-cursor.is-down { background-image: url("../cursor2.png"); transform-origin: center; }
}

/* The viewport pet gives each page section a stacking context; keep the navigation's
   parent above main so the gallery cannot paint over the fixed navigation. */
body > header.header { height: 112px; z-index: 10001; }
.header nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10001;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: 94px;
  padding: .9rem max(1rem, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--paper-glass);
  backdrop-filter: blur(14px);
}
.logo { justify-self: start; font: 400 clamp(1.45rem, 3vw, 3rem)/1 var(--pixel-bold); letter-spacing: -.055em; white-space: nowrap; }
.logo span { color: var(--signal); }
.header ul { display: flex; align-items: center; gap: clamp(.65rem, 2vw, 1.8rem); margin: 0; padding: 0; list-style: none; }
.header li { font: .78rem/1 var(--pixel-bold); letter-spacing: .035em; }
.left-items { justify-self: center; }
.right-items { justify-self: end; }
.header a, .header li span { position: relative; display: inline-block; padding: .45rem .1rem; }
.header a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: .16rem; height: 1px; background: currentColor; transition: right .2s; }
.header a:hover::after, .header a:focus-visible::after, .header a.is-current::after, .header a.is-active::after { right: 0; }
.right-items span { color: var(--muted); }

.masthead, .works, .index-strip, .contact-page, .project-page { width: var(--page); margin-inline: auto; }
.masthead { padding-top: clamp(2rem, 5vw, 5rem); }
.rule { width: 100%; height: 1px; background: var(--ink); }
.masthead-grid { position: relative; display: grid; grid-template-columns: 1fr 2.4fr 1fr; align-items: end; gap: 1.5rem; padding: 1.1rem 0 1.35rem; overflow: hidden; }
.masthead-grid p { margin: 0; font: .75rem/1.55 var(--pixel-bold); }
.masthead-note { justify-self: end; text-align: right; }
.masthead h1 { margin: 0; font: 400 clamp(4.7rem, 13vw, 11.6rem)/.7 var(--pixel-bold); letter-spacing: -.09em; transition: color .18s, opacity .12s; }
.masthead h1.physics-ready, .project-head h1.physics-ready { outline: none; }
.masthead h1.physics-ready:hover, .masthead h1.physics-ready:focus-visible, .project-head h1.physics-ready:hover, .project-head h1.physics-ready:focus-visible { color: var(--signal); }
.masthead h1.physics-ready:focus-visible, .project-head h1.physics-ready:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .08em; }
.masthead-grid.physics-active h1, .project-head.physics-active h1 { opacity: 0; pointer-events: none; }
.physics-letter {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: block;
  color: var(--ink);
  font: 400 clamp(4.7rem, 13vw, 11.6rem)/.7 var(--pixel-bold);
  letter-spacing: -.09em;
  user-select: none;
  touch-action: none;
  will-change: transform;
}
.physics-letter.is-dragging { z-index: 12; color: var(--signal); }

.works { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.work-list { display: grid; gap: clamp(4rem, 10vw, 9rem); }
.work-item { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s; }
.work-item.is-ready { opacity: 1; transform: none; }
.work-item:nth-child(even) .work-link { width: min(87%, 1080px); margin-left: auto; }
.work-link { display: block; width: min(92%, 1160px); }
.work-image { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ink); background: #e8edf1; }
.work-image::before, .work-image::after { content: "+"; position: absolute; z-index: 2; font: 1.1rem var(--pixel-bold); color: var(--signal); }
.work-image::before { top: .45rem; left: .6rem; }
.work-image::after { right: .6rem; bottom: .4rem; }
.work-image img { width: 100%; max-height: 82vh; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.84) contrast(1.02); transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .35s; }
.work-item .work-link.is-portrait-layout { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(13rem, 17rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; width: min(82%, 980px); margin-inline: auto; }
.work-image.is-portrait { min-height: 0; padding: 0; place-items: end; overflow: visible; border: 0; background: transparent; }
.work-image.is-portrait::before, .work-image.is-portrait::after { content: none; }
.work-image.is-portrait img { width: auto; height: min(76vh, 800px); max-width: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; border: 1px solid var(--ink); background: #edf1f4; }
.work-link.is-portrait-layout .work-info { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; min-height: clamp(15rem, 28vw, 22rem); padding: 1rem 0 0; }
.work-link.is-portrait-layout .work-name { font-size: clamp(1.75rem, 3.25vw, 3rem); }
.work-link.is-portrait-layout .work-medium { margin-top: auto; }
.work-link.is-portrait-layout .work-date { align-self: flex-start; }
.work-link:hover .work-image img, .work-link:focus-visible .work-image img { transform: scale(1.012); filter: saturate(1.05) contrast(1); }
.view-label { position: absolute; z-index: 4; right: .65rem; top: .65rem; padding: .3rem .5rem; color: var(--paper); background: var(--ink); font: .68rem var(--pixel-bold); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.work-link:hover .view-label, .work-link:focus-visible .view-label { opacity: 1; transform: none; }
.work-info { display: grid; grid-template-columns: 3rem minmax(0, 1.5fr) minmax(12rem, 1fr) auto; gap: 1rem; align-items: baseline; padding: .9rem 0 0; border-top: 1px solid var(--ink); }
.work-number, .work-medium, .work-date { font-size: .77rem; }
.work-number { color: var(--signal); }
.work-name { font: clamp(1.2rem, 2.8vw, 2.4rem)/1.12 var(--pixel-bold); letter-spacing: -.045em; }
.work-medium { color: var(--muted); }
.work-date { justify-self: end; padding: .12rem .36rem; background: var(--acid); }

.index-strip { padding: 0 0 4rem; }
.index-strip > div:nth-child(2) { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; font-size: .72rem; }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem max(1rem, calc((100vw - 1240px) / 2)) 1.25rem; color: #101010; background: #ffda1b; font-size: .72rem; font-weight: 800; }
footer a:hover { color: var(--signal); }
.noscript { position: fixed; z-index: 1000; inset: auto 1rem 1rem; padding: .7rem; color: white; background: black; }

.contact-page { padding-top: clamp(2rem, 5vw, 5rem); }
.contact-title { display: grid; grid-template-columns: 1fr 2.7fr; gap: 2rem; align-items: end; padding: 1.2rem 0 1.5rem; }
.contact-title p, .contact-block > p { margin: 0; font-size: .75rem; }
.contact-title h1 { margin: 0; font: clamp(3.7rem, 9vw, 8rem)/.82 var(--pixel-bold); letter-spacing: -.075em; }
.contact-title h1 small { display: block; margin-top: 1rem; color: var(--muted); font: .9rem/1 var(--pixel); letter-spacing: .08em; }
.profile-grid { display: grid; grid-template-columns: minmax(18rem, .8fr) 1.2fr; gap: clamp(2rem, 9vw, 8rem); padding: clamp(4rem, 8vw, 8rem) 0; }
.profile-grid figure { margin: 0; }
.profile-grid figure img { width: min(100%, 430px); aspect-ratio: 1; object-fit: cover; border: 1px solid var(--ink); filter: grayscale(1) contrast(1.05); }
.profile-grid figcaption { padding-top: .5rem; font-size: .66rem; }
.profile-grid h2, .cv-block > h2 { margin: 0 0 1.5rem; font: clamp(2rem, 4vw, 4.1rem)/1 var(--pixel-bold); }
.profile-grid p { max-width: 47rem; }
.name-kana { color: var(--signal); font-size: .78rem; letter-spacing: .08em; }
.statement { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 2; }
.cv-block { padding: 0 0 clamp(5rem, 9vw, 9rem); }
.cv-block > h2 { padding-top: 1.25rem; }
.cv-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 8vw, 8rem); }
.cv-grid h3 { margin: 0 0 1rem; font-size: .8rem; }
.cv-grid ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cv-grid li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.cv-grid time { color: var(--signal); }
.cv-grid small { grid-column: 2; color: var(--muted); font-size: .72rem; }
.contact-block { min-height: 66vh; margin-inline: calc((100vw - min(100vw - 2rem, 1240px)) / -2); padding: 0 max(1rem, calc((100vw - 1240px) / 2)) clamp(4rem, 8vw, 7rem); background: var(--acid); }
.contact-block .rule { margin-bottom: clamp(4rem, 8vw, 8rem); }
.contact-block h2 { margin: .6rem 0 2.4rem; font: clamp(4rem, 12vw, 11rem)/.78 var(--pixel-bold); letter-spacing: -.09em; }
.contact-link { display: block; width: fit-content; margin-top: .65rem; padding-bottom: .15rem; border-bottom: 1px solid; font: clamp(1rem, 2vw, 1.55rem)/1.2 var(--pixel-bold); }
.contact-link:hover { color: var(--signal); }

.project-page { padding-top: clamp(2rem, 5vw, 5rem); }
.project-loading, .project-error { min-height: 65vh; padding-top: 2rem; font: .82rem var(--pixel-bold); }
.project-head { position: relative; display: grid; grid-template-columns: 1fr 3fr auto; gap: 1.2rem; align-items: end; padding: 1.2rem 0 1.6rem; overflow: hidden; }
.project-head p { margin: 0; font-size: .75rem; }
.project-head h1 { margin: 0; font: clamp(3rem, 8vw, 8rem)/.84 var(--pixel-bold); letter-spacing: -.075em; }
.project-head .physics-letter { font: clamp(3rem, 8vw, 8rem)/.84 var(--pixel-bold); letter-spacing: -.075em; }
html[lang="en"] .project-head h1 { font-size: clamp(2.5rem, 6vw, 6rem); line-height: .92; letter-spacing: -.045em; overflow-wrap: anywhere; }
html[lang="en"] .project-head .physics-letter { font: clamp(2.5rem, 6vw, 6rem)/.92 var(--pixel-bold); letter-spacing: -.045em; }
.project-year { padding: .2rem .45rem; background: var(--acid); }
.project-cover { margin: 0; }
.project-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }
.project-cover.is-viewport-fit { width: fit-content; max-width: 100%; margin-inline: auto; }
.project-cover.is-viewport-fit img { width: auto; max-width: 100%; max-height: min(76svh, 860px); object-fit: contain; }
.image-zoom-trigger { cursor: zoom-in; }
.image-lightbox { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .7rem; width: min(96vw, 1500px); height: min(96vh, 1000px); max-width: none; max-height: none; margin: auto; padding: clamp(.65rem, 1.6vw, 1.4rem); border: 1px solid var(--paper); background: rgba(16,16,16,.96); overflow: hidden; }
.image-lightbox:not([open]) { display: none; }
.image-lightbox::backdrop { background: rgba(16,16,16,.78); backdrop-filter: blur(4px); }
.is-lightbox-open .viewport-pet-canvas, .is-lightbox-open .viewport-pet-hit, .is-lightbox-open #custom-cursor { display: none !important; }
.image-lightbox-stage { display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.image-lightbox-stage.is-zoomed { cursor: grab; }
.image-lightbox-stage.is-zoomed:active { cursor: grabbing; }
.image-lightbox-preview { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(96vh - 8.5rem); margin: 0 auto; object-fit: contain; transform-origin: center; transition: transform .12s ease-out; will-change: transform; -webkit-user-drag: none; user-select: none; }
.image-lightbox-close { display: block; margin: 0 0 .65rem auto; padding: .35rem .5rem; border: 1px solid var(--paper); color: var(--paper); background: transparent; font: .7rem var(--pixel-bold); }
.image-lightbox-close:hover, .image-lightbox-close:focus-visible { color: var(--ink); background: var(--acid); outline: none; }
.image-lightbox-controls { display: flex; align-items: stretch; justify-content: center; gap: 0; width: fit-content; margin: 0 auto; border: 1px solid var(--paper); color: var(--paper); font: .7rem var(--pixel-bold); }
.image-lightbox-control, .image-lightbox-reset { min-width: 2.7rem; padding: .38rem .65rem; border: 0; border-right: 1px solid var(--paper); color: inherit; background: transparent; font: inherit; line-height: 1; }
.image-lightbox-control { font-size: 1rem; }
.image-lightbox-level { display: grid; min-width: 4.3rem; place-items: center; padding: .35rem .65rem; border-right: 1px solid var(--paper); }
.image-lightbox-reset { border-right: 0; }
.image-lightbox-control:hover:not(:disabled), .image-lightbox-control:focus-visible, .image-lightbox-reset:hover, .image-lightbox-reset:focus-visible { color: var(--ink); background: var(--acid); outline: none; }
.image-lightbox-control:disabled { color: var(--muted); cursor: not-allowed; }
@media (pointer: fine) {
  .image-lightbox-cursor { position: fixed; left: 0; top: 0; z-index: 2; width: 118px; height: 118px; opacity: 0; pointer-events: none; background: url("../cursor.png") center / contain no-repeat; transition: opacity .15s; will-change: transform; }
  .image-lightbox-cursor.is-visible { opacity: .82; }
  .image-lightbox-cursor.is-down { background-image: url("../cursor2.png"); transform-origin: center; }
}
.project-cover figcaption, .project-gallery figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.project-specs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2.2rem 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.project-specs > div { padding: .8rem; border-right: 1px solid var(--line); }
.project-specs > div:last-child { border-right: 0; }
.project-specs dt { margin-bottom: .55rem; color: var(--muted); font-size: .66rem; }
.project-specs dd { margin: 0; font-size: .82rem; }
.project-text { display: grid; grid-template-columns: 1fr 2.5fr; gap: 2rem; padding: clamp(5rem, 10vw, 10rem) 0; }
.project-label { margin: 0; font-size: .72rem; }
.project-description { max-width: 51rem; }
.project-description p { margin: 0 0 1.7rem; font-family: var(--pixelS); font-size: clamp(1rem, 1.55vw, 1.27rem); line-height: 2; }
.video-link { grid-column: 2; width: fit-content; margin-top: 1rem; padding: .6rem .75rem; color: var(--paper); background: var(--ink); font: .72rem var(--pixel-bold); }
.video-link:hover { color: var(--ink); background: var(--signal); }
.project-gallery { display: grid; gap: clamp(4rem, 10vw, 9rem); padding-bottom: clamp(5rem, 10vw, 10rem); }
.project-gallery figure { width: min(88%, 1080px); margin: 0; }
.project-gallery figure:nth-child(even) { margin-left: auto; }
.project-gallery img { display: block; width: 100%; height: auto; object-fit: contain; object-position: left bottom; }
.project-gallery figure:nth-child(even) img { object-position: right bottom; }
.project-gallery.is-viewport-fit figure { width: fit-content; max-width: min(88%, 1080px); }
.project-gallery.is-viewport-fit img { width: auto; max-width: 100%; max-height: min(76svh, 860px); object-fit: contain; }
.project-gallery.is-flipbook { display: block; padding-top: 1rem; }
.flipbook-shell { width: min(100%, 1120px); margin-inline: auto; }
.flipbook-kicker { margin: 0 0 .75rem; font: .72rem var(--pixel-bold); letter-spacing: .04em; }
.flipbook-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--ink);
  outline: 0;
  background: #dfe4e9;
  box-shadow: 0 18px 0 -10px rgba(16, 16, 16, .18), 0 30px 48px -34px rgba(16, 16, 16, .8);
  perspective: 1800px;
  touch-action: pan-y;
}
.flipbook-stage::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 20;
  width: clamp(8px, 1.6vw, 20px);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(16,16,16,.28), rgba(16,16,16,.08) 42%, transparent);
}
.flipbook-stage:focus-visible { box-shadow: 0 0 0 3px var(--acid), 0 18px 0 -10px rgba(16, 16, 16, .18), 0 30px 48px -34px rgba(16, 16, 16, .8); }
.project-gallery .flipbook-page {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  margin: 0;
  border-left: 1px solid rgba(16,16,16,.22);
  background: var(--paper);
  backface-visibility: hidden;
  transform: rotateY(0deg);
  transform-origin: left center;
  transition: transform .72s cubic-bezier(.2,.7,.15,1), filter .72s;
}
.project-gallery .flipbook-page.is-turned { transform: rotateY(-179.5deg); filter: brightness(.72); pointer-events: none; }
.project-gallery .flipbook-page img,
.project-gallery .flipbook-page:nth-child(even) img {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(.75rem, 2.6vw, 2.2rem);
  object-fit: contain;
  object-position: center;
  background: #f7f9fb;
  user-select: none;
  -webkit-user-drag: none;
}
.project-gallery .flipbook-page figcaption { padding: .62rem 1rem .72rem clamp(1.1rem, 2.8vw, 2.4rem); background: var(--paper); }
.project-gallery.is-pdf-source .flipbook-stage { aspect-ratio: 841.89 / 595.276; background: #fff; }
.project-gallery.is-pdf-source .flipbook-page { grid-template-rows: 1fr; }
.project-gallery.is-pdf-source .flipbook-page img,
.project-gallery.is-pdf-source .flipbook-page:nth-child(even) img { padding: 0; background: #fff; }
.flipbook-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin-top: .85rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.flipbook-button { min-height: 48px; padding: .65rem .85rem; border: 0; color: var(--paper); background: var(--ink); font: .72rem var(--pixel-bold); transition: color .18s, background .18s; }
.flipbook-button:last-child { text-align: right; }
.flipbook-button:hover:not(:disabled), .flipbook-button:focus-visible { color: var(--ink); background: var(--acid); }
.flipbook-button:disabled { color: var(--muted); background: transparent; }
.flipbook-status { display: grid; min-width: 7rem; padding-inline: 1rem; place-items: center; color: var(--signal); font: .76rem var(--pixel-bold); }
.flipbook-hint { margin: .55rem 0 0; color: var(--muted); font-size: .66rem; text-align: right; }
.project-navigation { display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--ink); }
.project-navigation a { display: flex; flex-direction: column; justify-content: center; min-height: 130px; padding: 1rem; transition: color .2s, background .2s; }
.project-navigation a:hover { color: var(--paper); background: var(--ink); }
.project-navigation span { margin-bottom: .5rem; color: var(--muted); font-size: .66rem; }
.project-navigation b { font: 1rem/1.2 var(--pixel-bold); }
.previous-project { border-right: 1px solid var(--line); }
.next-project { align-items: flex-end; border-left: 1px solid var(--line); text-align: right; }
.back-index { align-items: center; font: .7rem var(--pixel-bold); }

@media (max-width: 800px) {
  :root { --page: min(100% - 1.2rem, 1240px); }
  body { font-size: 15px; }
  body > header.header { height: 124px; }
  .header nav { grid-template-columns: 1fr auto; min-height: 112px; padding: .55rem .6rem; }
  .logo { font-size: clamp(1.2rem, 5.5vw, 2rem); }
  .left-items { grid-column: 1; grid-row: 2; justify-self: start; }
  .right-items { grid-column: 2; grid-row: 2; }
  .masthead-grid { grid-template-columns: 1fr auto; }
  .masthead h1 { grid-column: 1 / -1; grid-row: 2; font-size: clamp(4.2rem, 25vw, 8rem); }
  .masthead-note { grid-column: 2; grid-row: 1; }
  .work-item:nth-child(even) .work-link, .work-link { width: 100%; }
  .work-item .work-link.is-portrait-layout { display: block; width: min(88%, 640px); }
  .work-image.is-portrait { place-items: center; }
  .work-image.is-portrait img { width: 100%; height: auto; max-height: none; }
  .work-link.is-portrait-layout .work-info { display: grid; min-height: 0; padding-top: .9rem; }
  .work-link.is-portrait-layout .work-name { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .work-link.is-portrait-layout .work-medium { margin-top: 0; }
  .work-info { grid-template-columns: 2.2rem 1fr auto; }
  .work-name { grid-column: 2 / -1; }
  .work-medium { grid-column: 2; }
  .work-date { grid-column: 3; }
  .index-strip > div:nth-child(2) { flex-wrap: wrap; }
  .contact-title { grid-template-columns: 1fr; }
  .profile-grid, .cv-grid { grid-template-columns: 1fr; }
  .profile-grid { gap: 2.5rem; }
  .project-head { grid-template-columns: 1fr auto; }
  .project-head h1 { grid-column: 1 / -1; grid-row: 2; }
  .project-file { grid-column: 1; grid-row: 1; }
  .project-year { grid-column: 2; grid-row: 1; }
  .project-specs { grid-template-columns: repeat(2, 1fr); }
  .project-specs > div:nth-child(2) { border-right: 0; }
  .project-specs > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .project-text { grid-template-columns: 1fr; gap: 2rem; }
  .video-link { grid-column: 1; }
  .flipbook-stage { aspect-ratio: 4 / 5; }
}

@media (max-width: 520px) {
  .header ul { gap: .6rem; }
  .header li { font-size: .68rem; }
  .work-list { gap: 4.8rem; }
  .work-image img { aspect-ratio: 4 / 3; }
  .work-item .work-link.is-portrait-layout { width: 100%; }
  .work-image.is-portrait img { width: auto; height: 66vh; max-width: 100%; aspect-ratio: auto; object-fit: contain; }
  .work-info { gap: .55rem; }
  .work-name { font-size: 1.35rem; }
  .project-specs { grid-template-columns: 1fr; }
  .project-specs > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .project-specs > div:last-child { border-bottom: 0; }
  .project-gallery figure { width: 100%; }
  .project-gallery.is-viewport-fit figure { max-width: 100%; }
  .project-gallery.is-viewport-fit img { max-height: 76svh; }
  .project-gallery.is-flipbook { padding-top: 0; }
  .project-gallery .flipbook-page figcaption { align-items: flex-start; padding-inline: 1rem; }
  .flipbook-status { min-width: 5rem; padding-inline: .5rem; }
  .project-navigation { grid-template-columns: 1fr 1fr; }
  .back-index { grid-column: 1 / -1; grid-row: 2; min-height: 62px !important; border-top: 1px solid var(--line); }
  .project-navigation a { min-height: 104px; }
  .cv-grid li { grid-template-columns: 5.8rem 1fr; }
  footer { flex-direction: column; }
  .image-lightbox { width: 100vw; height: 100svh; padding: .7rem; border: 0; gap: .6rem; }
  .image-lightbox-close { margin-bottom: 0; }
  .image-lightbox-controls { margin-bottom: max(.15rem, env(safe-area-inset-bottom)); }
  .image-lightbox-control, .image-lightbox-reset { min-width: 3rem; min-height: 2.7rem; }
  .image-lightbox-preview { max-height: calc(100svh - 8.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  #custom-cursor { display: none; }
  .physics-letter { transform: none; }
}