:root { color-scheme: light; /* color */ --color-bg: #f2f2f2; --color-fg: #111; --color-fg-inverse: #fff; --color-overlay: rgba(255, 255, 255, 0.96); --color-image-overlay-start: rgba(0, 0, 0, 0.08); --color-image-overlay-end: rgba(0, 0, 0, 0.22); /* typography */ --font-ui: "Plus Jakarta Sans", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-display: "Plus Jakarta Sans", "Hiragino Sans", "Noto Sans JP", sans-serif; --text-size-meta: 13px; --text-size-ui: 14px; --text-size-body: 16px; --text-size-title: clamp(18px, 3.2vw, 42px); --text-size-title-sp: clamp(18px, 6.8vw, 28px); --text-size-display: clamp(28px, 4vw, 56px); --text-size-menu: clamp(24px, 4vw, 40px); --letter-spacing-ui: 0.04em; --letter-spacing-meta: 0.12em; --letter-spacing-title: -0.02em; --letter-spacing-display: -0.03em; --line-height-title: 1.04; --line-height-display: 1.08; --line-height-body: 1.9; --font-weight-regular: 400; --font-weight-light: 300; /* spacing */ --space-1: 10px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 96px; /* motion */ --motion-fast: 200ms; --motion-base: 220ms; --motion-menu: 280ms; --motion-slow: 600ms; /* layers */ --z-project-stream: 1; --z-trail: 20; --z-menu: 40; --z-header: 50; --z-toggle: 51; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); font-family: var(--font-ui); overflow-x: hidden; overflow-y: auto; } /* Font fallback testing: To simulate an environment where local premium fonts are unavailable, temporarily add `class="test-fallback-fonts"` to the element. */ body.test-fallback-fonts { --font-ui: "Hiragino Sans", "Noto Sans JP", sans-serif; --font-display: "Hiragino Sans", "Noto Sans JP", sans-serif; } /* force override for testing (in case variables are cached or overridden) */ body.test-fallback-fonts .site-title, body.test-fallback-fonts .site-nav a, body.test-fallback-fonts .project-title, body.test-fallback-fonts .info-title { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif !important; } body.test-fallback-fonts .project-year, body.test-fallback-fonts .project-tags, body.test-fallback-fonts .info-copy, body.test-fallback-fonts .info-eyebrow { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif !important; } .site-title, .site-nav a, .project-title, .info-title { font-family: var(--font-display); } .site-title, .site-nav a, .project-title, .info-title, .project-year, .project-tags, .info-copy, .info-eyebrow { font-weight: var(--font-weight-light); } .project-year, .project-tags, .info-copy, .info-eyebrow { font-family: var(--font-ui); } #app { width: 100vw; min-height: 100vh; height: auto; position: relative; background: var(--color-bg); } .site-header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--space-3); z-index: var(--z-header); mix-blend-mode: difference; color: var(--color-fg-inverse); pointer-events: none; gap: var(--space-2); transform: translateY(0); transition: transform var(--motion-menu) ease, color var(--motion-fast) ease, mix-blend-mode var(--motion-fast) ease; will-change: transform; } #app.header-hidden .site-header { transform: translateY(calc(-100% - 8px)); } #app.header-theme-light .site-header { mix-blend-mode: normal; color: var(--color-fg); } #app.header-theme-dark .site-header { mix-blend-mode: normal; color: var(--color-fg-inverse); } #app.header-theme-light .menu-toggle, #app.header-theme-light .site-title, #app.header-theme-light .site-nav a { color: var(--color-fg); } #app.header-theme-dark .menu-toggle, #app.header-theme-dark .site-title, #app.header-theme-dark .site-nav a { color: var(--color-fg-inverse); } .page-about, .page-contact, .page-works { color: var(--color-fg); } body:has(.page-about) .site-header, body:has(.page-contact) .site-header, body:has(.page-works-main) .site-header, #app:has(.site-nav.is-open) .site-header { mix-blend-mode: normal; color: var(--color-fg); } #app:has(.site-nav.is-open) .menu-toggle, #app:has(.site-nav.is-open) .site-title, #app:has(.site-nav.is-open) .site-nav a { color: var(--color-fg); } #app.header-theme-dark:has(.site-nav.is-open) .site-header, #app.header-theme-light:has(.site-nav.is-open) .site-header { mix-blend-mode: normal; color: var(--color-fg); } #app.header-theme-dark:has(.site-nav.is-open) .menu-toggle, #app.header-theme-dark:has(.site-nav.is-open) .site-title, #app.header-theme-dark:has(.site-nav.is-open) .site-nav a, #app.header-theme-light:has(.site-nav.is-open) .menu-toggle, #app.header-theme-light:has(.site-nav.is-open) .site-title, #app.header-theme-light:has(.site-nav.is-open) .site-nav a { color: var(--color-fg); } .page-hero.about-hero { min-height: auto; align-items: flex-start; padding-top: 0; padding-bottom: 88px; } .page-hero.contact-hero { min-height: auto; align-items: flex-start; padding-top: 0; padding-bottom: 88px; } .contact-hero .section-copy { margin-top: 14px; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.38; letter-spacing: -0.02em; font-family: var(--font-display); font-weight: var(--font-weight-light); max-width: 18em; } .page-hero.thanks-hero { min-height: auto; align-items: flex-start; padding-top: 0; padding-bottom: 88px; } .thanks-hero .section-copy { margin-top: 14px; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.38; letter-spacing: -0.02em; font-family: var(--font-display); font-weight: var(--font-weight-light); max-width: 12em; } .thanks-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 48px; } .thanks-link { font-size: var(--text-size-body); text-decoration: none; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .thanks-link:hover { opacity: 0.6; } .about-hero__inner { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); column-gap: 64px; align-items: start; } .about-hero__media { width: 100%; max-width: 360px; } .about-hero__media img { width: 100%; aspect-ratio: 3 / 4; display: block; object-fit: cover; } .about-hero__content { min-width: 0; display: flex; flex-direction: column; gap: 56px; } .about-hero__intro, .about-background { min-width: 0; } .about-role { margin: 12px 0 0; font-size: var(--text-size-body); line-height: var(--line-height-body); font-family: var(--font-ui); font-weight: var(--font-weight-light); color: rgba(17, 17, 17, 0.56); } .site-title, .site-nav a { color: inherit; text-decoration: none; font-size: var(--text-size-ui); letter-spacing: var(--letter-spacing-ui); pointer-events: auto; } .site-nav { position: fixed; inset: 0; z-index: var(--z-menu); display: none; opacity: 0; visibility: hidden; transition: opacity var(--motion-menu) ease, visibility var(--motion-menu) ease; padding: var(--space-3); padding-top: var(--space-5); background: var(--color-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--space-2); mix-blend-mode: normal; color: var(--color-fg); } .site-nav.is-open { display: flex; opacity: 1; visibility: visible; } .site-nav a { color: inherit; text-decoration: none; font-size: var(--text-size-menu); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); opacity: 0.42; transform: translateY(8px); transition: opacity var(--motion-fast) ease, transform var(--motion-menu) ease; } .site-nav a.is-active { opacity: 1; } .language-switch { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: var(--space-4); } .language-switch a, .language-switch span { font-size: var(--text-size-ui); line-height: 1; letter-spacing: var(--letter-spacing-ui); } .language-switch a { opacity: 0.42; } .language-switch a.is-active, .language-switch a[aria-current="page"] { opacity: 1; } .language-switch span { opacity: 0.42; } .site-nav.is-open a { transform: translateY(0); } .menu-toggle { display: block; position: fixed; top: 20px; right: var(--space-3); z-index: var(--z-toggle); width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: inherit; pointer-events: auto; cursor: pointer; } .menu-toggle span { display: block; width: 20px; height: 2px; margin-left: auto; background: currentColor; transform-origin: center; transition: transform var(--motion-base) ease, opacity var(--motion-base) ease; } .menu-toggle span + span { margin-top: 4px; } .menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle.is-open span:nth-child(2) { opacity: 0; } .menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } #trail { display: none; position: fixed; inset: 0; z-index: var(--z-trail); pointer-events: none; color: inherit; } #line-segments path { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; } #square-dots rect, #circle-dots circle { fill: currentColor; } .project-stream { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding-top: 0; position: relative; z-index: var(--z-project-stream); } .project-panel, .info-panel { min-height: 100vh; height: 100vh; scroll-snap-align: start; position: relative; } .project-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; } .panel-link { position: absolute; inset: 0; display: block; z-index: 1; color: inherit; text-decoration: none; } .project-panel { color: white; } .info-panel { color: black; } .project-media { position: absolute; inset: 0; margin: 0; } .project-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-image-overlay-start) 0%, var(--color-image-overlay-end) 100%); } .project-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .project-meta { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 2; pointer-events: none; color: white; text-align: left; display: flex; flex-direction: column; gap: 12px; transform: translateY(20px); opacity: 0; transition: transform var(--motion-slow) ease, opacity var(--motion-slow) ease; } .project-panel.is-visible .project-meta, .info-panel.is-visible .info-panel__inner { transform: translateY(0); opacity: 1; } .project-year, .project-tags, .project-title { margin: 0; } .project-year, .project-tags, .info-eyebrow { font-size: var(--text-size-meta); letter-spacing: var(--letter-spacing-meta); text-transform: uppercase; } .project-title { font-size: var(--text-size-title); font-weight: var(--font-weight-light); line-height: var(--line-height-title); letter-spacing: var(--letter-spacing-title); } .info-panel { background: var(--color-bg); color: var(--color-fg); display: grid; align-items: end; padding: var(--space-3); } .info-panel__inner { position: relative; z-index: 2; max-width: 720px; margin-right: auto; text-align: left; transform: translateY(20px); opacity: 0; transition: transform var(--motion-slow) ease, opacity var(--motion-slow) ease; } .info-title, .info-copy { margin: 0; } .info-title { font-size: var(--text-size-display); font-weight: var(--font-weight-light); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); margin-top: 14px; } .info-panel__inner--interactive .info-title { font-size: clamp(22px, 2.8vw, 36px); line-height: 1.38; letter-spacing: -0.02em; } .info-copy { margin-top: 22px; font-size: var(--text-size-body); line-height: var(--line-height-body); } #cursor-dot { display: none; } #app.theme-light-trail { color: var(--color-fg); } body:has(.page-about) #trail, body:has(.page-contact) #trail, body:has(.page-works-main) #trail, body.page-home:has(#contact.info-panel) #trail { color: var(--color-fg); } #app.theme-dark-trail { color: var(--color-fg-inverse); } .page { min-height: 100vh; padding-top: 140px; } .page-work-detail--hero-flush { padding-top: 0; } .page-hero, .page-section { padding: 0 var(--space-3); } .page-hero { min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: var(--space-3); } .page-hero__inner { width: min(calc(100% - (var(--space-3) * 2)), 720px); } .page-section__inner { width: 100%; max-width: 1350px; margin-left: auto; margin-right: auto; } .page-section { padding-bottom: 120px; } .section-label, .bio-list__year, .credit-list__label, .work-meta__role, .related-card__year, .related-card__tags, .form-label, .form-note { margin: 0; font-size: var(--text-size-meta); letter-spacing: var(--letter-spacing-meta); text-transform: uppercase; font-family: var(--font-ui); font-weight: var(--font-weight-light); color: rgba(17, 17, 17, 0.48); } .section-title, .related-card__title { margin: 14px 0 0; font-size: var(--text-size-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); font-family: var(--font-display); font-weight: var(--font-weight-light); } .section-copy, .bio-list__text, .credit-list__value, .related-card__tags, .work-meta__role, .form-input, .form-textarea, .form-button { font-family: var(--font-ui); font-weight: var(--font-weight-light); } .section-copy { margin: 22px 0 0; font-size: var(--text-size-body); line-height: var(--line-height-body); } .link-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .link-list__item, .cta-link { display: inline-block; width: fit-content; color: inherit; text-decoration: none; font-size: var(--text-size-body); line-height: 1.15; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .inline-link, .inline-link:hover, .inline-link:visited, .inline-link:active { color: var(--color-fg); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0; line-height: 1.2; } .inline-link-group { display: inline-flex; align-items: center; gap: 0; } .inline-separator { color: var(--color-fg); } .info-panel__inner--interactive .info-copy { display: inline-block; } .info-panel__inner--interactive .inline-link, .info-panel__inner--interactive .inline-link-group, .info-panel__inner--interactive .inline-separator { position: relative; z-index: 3; } .bio-list, .credit-list { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; } .credit-list--aligned { width: 100%; max-width: 100%; } .bio-list__item, .credit-list__item { display: grid; grid-template-columns: minmax(72px, 96px) minmax(0, 1fr); gap: 16px; align-items: start; } .about-background .bio-list__item { align-items: center; } .credit-list__item--aligned { grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; row-gap: 0; } .credit-list__item--aligned .credit-list__label, .credit-list__item--aligned .credit-list__value { align-self: center; } .credit-list__item--aligned .credit-list__value { justify-self: start; } .bio-list__text, .credit-list__value { margin: 0; font-size: var(--text-size-body); line-height: var(--line-height-body); } .works-hero { min-height: auto; align-items: flex-start; padding-top: 0; padding-bottom: 88px; } .works-hero__copy { margin-top: 14px; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.38; letter-spacing: -0.02em; font-family: var(--font-display); font-weight: var(--font-weight-light); max-width: 16em; } .works-index { padding-bottom: 120px; } .works-index__inner { width: 100%; max-width: 1350px; } .works-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; } .works-filter__chip { border: 1px solid rgba(17, 17, 17, 0.14); background: transparent; color: inherit; padding: 10px 14px; font-family: var(--font-ui); font-weight: var(--font-weight-light); font-size: var(--text-size-ui); line-height: 1; letter-spacing: var(--letter-spacing-ui); cursor: pointer; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-fast) ease; } .works-filter__chip.is-active { background: var(--color-fg); color: var(--color-fg-inverse); border-color: var(--color-fg); } .works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } .works-card { min-width: 0; } .works-card.is-hidden { display: none; } .works-card__link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; } .works-card__media { display: block; aspect-ratio: 5 / 4; overflow: hidden; background: rgba(0, 0, 0, 0.04); } .works-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .works-card__meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .works-card__year, .works-card__title, .works-card__tags { margin: 0; } .works-card__year, .works-card__tags { font-size: var(--text-size-meta); letter-spacing: var(--letter-spacing-meta); text-transform: uppercase; font-family: var(--font-ui); font-weight: var(--font-weight-light); color: rgba(17, 17, 17, 0.48); } .works-card__title { font-size: clamp(18px, 2.6vw, 34px); line-height: 1.08; letter-spacing: var(--letter-spacing-title); font-family: var(--font-display); font-weight: var(--font-weight-light); overflow-wrap: anywhere; } .work-hero { position: relative; min-height: 0; height: 100vh; color: var(--color-fg-inverse); display: flex; align-items: flex-end; overflow: hidden; } .work-hero--flush { min-height: 0; height: 100vh; animation: workHeroCollapse 1.05s ease forwards; will-change: height; } .work-hero__media { position: absolute; inset: 0; height: 100%; } .work-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-image-overlay-start) 0%, var(--color-image-overlay-end) 100%); } .work-hero__media img, .work-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .work-hero__meta { position: relative; z-index: 1; width: 100%; padding: 0 var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .work-meta__title, .work-meta__year, .work-meta__tags, .work-meta__role { margin: 0; } .work-hero__meta .project-year, .work-hero__meta .project-title, .work-hero__meta .project-tags { color: inherit; } .work-intro__inner { display: grid; align-items: center; } .work-intro__inner--split { width: 100%; max-width: 100%; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); column-gap: 96px; } .work-intro--spaced { padding-top: 72px; } .work-intro__lead, .work-intro__body { min-width: 0; } .work-intro__lead { display: flex; flex-direction: column; } .work-intro__body { opacity: 0; transform: translateY(14px); animation: workIntroReveal 1.05s ease forwards; animation-delay: 0ms; } .work-intro__heading { margin: 14px 0 0; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.38; letter-spacing: -0.02em; font-family: var(--font-display); font-weight: var(--font-weight-light); max-width: 9em; } .work-intro__copy { margin: 0; width: 100%; max-width: 100%; font-size: var(--text-size-body); line-height: var(--line-height-body); font-family: var(--font-ui); font-weight: var(--font-weight-light); } .media-stack { display: flex; flex-direction: column; gap: 24px; margin-top: 22px; } .media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .media-pair--video { align-items: stretch; } .media-pair--video .media-block { height: 100%; } .media-pair--video .media-block img, .media-pair--video .media-block video { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .media-stack > .media-block--video video { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } .work-gallery__note { width: 100%; margin: 8px 0; } .work-gallery__note--aligned { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); column-gap: 96px; align-items: start; } .work-gallery__note-spacer { min-width: 0; } .work-gallery__note-body { min-width: 0; } .work-gallery__note-copy { margin: 0; font-size: var(--text-size-body); line-height: var(--line-height-body); font-family: var(--font-ui); font-weight: var(--font-weight-light); max-width: 100%; } .work-gallery__inner { width: 100%; max-width: 100%; } .media-block { margin: 0; } .media-block img, .media-block video { width: 100%; display: block; } .media-pair--landscape .media-block { height: 100%; } .media-block--landscape img, .media-block--landscape video { width: 100%; aspect-ratio: 16 / 10; height: 100%; object-fit: cover; } .media-pair--portrait .media-block { height: 100%; } .media-pair--portrait .media-block--portrait img, .media-pair--portrait .media-block--portrait video { width: 100%; aspect-ratio: 3 / 4; height: 100%; object-fit: cover; } .media-stack > .media-block--portrait img { width: 100%; aspect-ratio: 16 / 10; height: 100%; object-fit: cover; } .media-stack > .media-block--portrait video { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 22px; width: 100%; max-width: 100%; } .related-more { display: flex; justify-content: flex-end; margin-top: 24px; } .related-more__link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; font-size: var(--text-size-meta); letter-spacing: var(--letter-spacing-meta); text-transform: uppercase; font-family: var(--font-ui); font-weight: var(--font-weight-light); } .related-card { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .related-card__media { aspect-ratio: 5 / 4; overflow: hidden; background: rgba(0, 0, 0, 0.04); } .related-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .related-card__meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .related-card__title, .related-card__year, .related-card__tags { margin: 0; } .related-card__title { font-size: clamp(18px, 2.2vw, 30px); line-height: 1.08; letter-spacing: var(--letter-spacing-title); overflow-wrap: anywhere; } .work-links-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; } .work-links__inner, .work-contact-cta__inner { min-width: 0; } .work-contact-cta__copy { margin: 18px 0 0; font-size: var(--text-size-body); line-height: var(--line-height-body); font-family: var(--font-ui); font-weight: var(--font-weight-light); } .work-contact-cta__link { display: inline-block; margin-top: 18px; color: inherit; text-decoration: none; font-size: var(--text-size-body); line-height: 1.15; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .contact-form { display: flex; flex-direction: column; gap: 18px; } .form-group { display: flex; flex-direction: column; gap: 10px; } .form-label { display: flex; align-items: center; gap: 8px; } .form-note { opacity: 0.56; } .form-input, .form-textarea { width: 100%; border: 1px solid rgba(17, 17, 17, 0.14); background: transparent; color: inherit; font-size: var(--text-size-body); line-height: var(--line-height-body); padding: 14px 16px; border-radius: 0; appearance: none; } .form-textarea { resize: vertical; min-height: 180px; } .form-input:focus, .form-textarea:focus { outline: none; border-color: rgba(17, 17, 17, 0.36); } .form-actions { padding-top: 8px; } .form-button { border: 1px solid var(--color-fg); background: transparent; color: inherit; padding: 14px 20px; font-size: var(--text-size-body); line-height: 1; cursor: pointer; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } @keyframes workHeroCollapse { 0% { height: 100vh; } 100% { height: 82vh; } } @keyframes workIntroReveal { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } } @media (max-width: 767px) { .site-header { padding: var(--space-2); align-items: center; flex-direction: row; justify-content: space-between; } .menu-toggle { top: var(--space-2); right: var(--space-2); } .site-nav { inset: 0; padding: 20px var(--space-2); padding-top: 88px; background: var(--color-overlay); color: var(--color-fg); } .language-switch { padding-top: var(--space-3); } .language-switch a, .language-switch span { font-size: 13px; } .project-stream { height: 100svh; min-height: 100svh; } .project-panel, .info-panel { min-height: 100svh; height: 100svh; } .project-meta { left: var(--space-2); right: var(--space-2); bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); text-align: left; max-width: calc(100% - (var(--space-2) * 2)); } .project-meta { gap: var(--space-1); } .project-title { font-size: var(--text-size-title-sp); max-width: 100%; overflow-wrap: anywhere; } .work-hero__meta .project-title { letter-spacing: var(--letter-spacing-title); line-height: var(--line-height-title); } .info-panel { padding: var(--space-2); } .info-panel__inner { margin-right: auto; text-align: left; } .page { padding-top: 112px; } .page-work-detail--hero-flush { padding-top: 0; } .page-hero, .page-section { padding-left: var(--space-2); padding-right: var(--space-2); } .page-hero__inner, .page-section__inner { width: 100%; max-width: 100%; } .page-hero.about-hero { padding-bottom: 72px; } .page-hero.contact-hero { padding-bottom: 72px; } .works-hero { padding-bottom: 72px; } .works-hero__copy { margin-top: 12px; font-size: clamp(16px, 5.2vw, 22px); line-height: 1.4; letter-spacing: 0; max-width: 100%; } .works-filter { gap: 10px; margin-bottom: 28px; } .works-filter__chip { font-size: 13px; padding: 9px 12px; } .works-grid { grid-template-columns: 1fr; gap: 24px; } .works-card__title { font-size: clamp(18px, 5.2vw, 24px); line-height: 1.12; letter-spacing: 0; } .contact-hero .section-copy { margin-top: 12px; font-size: clamp(16px, 5.2vw, 22px); line-height: 1.4; letter-spacing: 0; max-width: 100%; } .page-hero.thanks-hero { padding-bottom: 72px; } .thanks-hero .section-copy { margin-top: 12px; font-size: clamp(16px, 5.2vw, 22px); line-height: 1.4; letter-spacing: 0; max-width: 100%; } .thanks-links { gap: 18px; margin-top: 36px; flex-direction: column; align-items: flex-start; } .about-hero__inner { grid-template-columns: 1fr; row-gap: 24px; } .about-hero__media { max-width: 100%; } .about-hero__content { gap: 40px; } .about-role { margin-top: 10px; font-size: 15px; } .page-hero { padding-bottom: var(--space-2); } .page-section { padding-bottom: 88px; } .section-title { margin-top: 12px; font-size: var(--text-size-title-sp); line-height: 1.12; letter-spacing: 0; } .section-copy, .bio-list__text, .credit-list__value, .related-card__tags { font-size: 15px; } .bio-list__item, .credit-list__item { grid-template-columns: 1fr; gap: 6px; } .credit-list__item--aligned { grid-template-columns: 1fr; row-gap: 6px; column-gap: 0; } .credit-list--aligned { width: 100%; max-width: 100%; } .work-hero__meta { padding: 0 var(--space-2) var(--space-2); gap: 10px; } .work-hero, .work-hero--flush { min-height: 0; height: 100svh; } .work-hero--flush { animation: workHeroCollapseSp 1.05s ease forwards; will-change: height; } .work-intro__inner { grid-template-columns: 1fr; row-gap: 28px; } .work-intro--spaced { padding-top: 40px; } .work-intro__inner--split { max-width: 100%; grid-template-columns: 1fr; column-gap: 0; } .work-intro__heading { margin-top: 12px; font-size: clamp(16px, 5.2vw, 22px); line-height: 1.4; letter-spacing: 0; max-width: 100%; } .work-intro__body { transform: translateY(12px); } .work-intro__copy { font-size: 15px; max-width: 100%; } .media-stack { gap: 16px; } .media-pair { grid-template-columns: 1fr; gap: 16px; } .media-block--landscape img, .media-block--landscape video { aspect-ratio: auto; height: auto; } .media-block--portrait img, .media-block--portrait video { aspect-ratio: auto; height: auto; } .media-pair--video .media-block img, .media-pair--video .media-block video { aspect-ratio: auto; height: auto; } .work-gallery__note { max-width: 100%; margin: 4px 0; } .work-gallery__note--aligned { grid-template-columns: 1fr; column-gap: 0; } .work-gallery__note-spacer { display: none; } .work-gallery__note-copy { font-size: 15px; } .work-gallery__inner { max-width: 100%; } .related-grid { grid-template-columns: 1fr; gap: 32px; } .related-card { gap: 14px; } .related-more { margin-top: 16px; } .work-links-contact__grid { grid-template-columns: 1fr; gap: 32px; } .work-contact-cta__copy, .work-contact-cta__link { font-size: 15px; } .form-input, .form-textarea, .form-button { font-size: 15px; } .form-textarea { min-height: 160px; } @keyframes workHeroCollapseSp { 0% { height: 100svh; } 100% { height: 90svh; } } }