/* ======================================================
   Figma 472:2194 / PC master 1920 × 12234
   Shared structural grid, NOT a background decoration:
   X rules: 40 / 500 / 960 / 1420 / 1880
   Cell 460, inset 40, single image 380, double image 840
   Primary Y rules: 1080 + n × 460
   ====================================================== */
:root {
   --u: min(.0520833333vw, 1px);
   --gutter: calc(40 * var(--u));
   --cell: calc(460 * var(--u));
   --pad: calc(40 * var(--u));
   --paper: #e8e8e8;
   --ink: #1a1a1a;
   --rule: rgba(255, 255, 255, .94)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scrollbar-gutter: stable;
   overflow-y: scroll
}

html.intro-active,
html.intro-active body {
   overscroll-behavior: none
}

html.intro-active body {
   touch-action: none
}

body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   font-family: "futura-100", "Yu Gothic", sans-serif;
   font-weight: 500;
   font-style: normal;
   isolation: isolate
}

button,
a {
   -webkit-tap-highlight-color: transparent
}

button {
   font: inherit;
   cursor: pointer;
   color: inherit
}

a {
   color: inherit;
   text-decoration: none
}

button {
   border: 0;
   background: none
}

h1,
h2,
h3,
p,
figure {
   margin: 0
}

h1,
h2,
h3 {
   font-weight: 500
}

img {
   display: block
}

button:focus-visible,
a:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 4px
}

button:hover,
a:hover {
   opacity: .7
}

.skip {
   position: fixed;
   top: -60px;
   left: 20px;
   padding: 12px;
   background: #fff;
   z-index: 100
}

.skip:focus {
   top: 10px
}

#contours {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: -2;
   pointer-events: none
}

.page {
   width: min(100%, 1920px);
   margin: auto;
   position: relative;
   overflow: hidden;
   container-type: inline-size
}

@media(min-width:768px) {
   .page {
      --u: min(.0520833333cqw, 1px);
      --gutter: calc(40 * var(--u));
      --cell: calc(460 * var(--u));
      --pad: calc(40 * var(--u));
      --content-cell: var(--cell);
      --content-grid-offset: var(--gutter)
   }
}

.vertical-rules {
   position: absolute;
   top: 0;
   right: var(--gutter);
   bottom: auto;
   left: var(--gutter);
   height: min(100svh, calc(1080 * var(--u)));
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   pointer-events: none;
   z-index: 0
}

.vertical-rules i {
   border-left: 1px solid var(--rule)
}

.vertical-rules i:last-child {
   border-right: 1px solid var(--rule)
}

.horizontal-rules {
   position: absolute;
   top: 0;
   right: 0;
   bottom: auto;
   left: 0;
   height: min(100svh, calc(1080 * var(--u)));
   pointer-events: none;
   z-index: 0;
   background-image: linear-gradient(to bottom, var(--rule) 0, var(--rule) 1px, transparent 1px);
   background-size: 100% var(--cell);
   background-position: 0 calc(160 * var(--u))
}

.content-grid-rules {
   display: none
}

@media(min-width:768px) {
   .content-grid-rules {
      display: block;
      position: absolute;
      top: min(100svh, calc(1080 * var(--u)));
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
         linear-gradient(to right, var(--rule) 0, var(--rule) 1px, transparent 1px),
         linear-gradient(to bottom, var(--rule) 0, var(--rule) 1px, transparent 1px);
      background-repeat: repeat-x, repeat-y;
      background-size: var(--content-cell) 100%, 100% var(--content-cell);
      background-position: var(--content-grid-offset) 0, 0 0
   }
}

.page main {
   position: relative;
   z-index: 1
}

.grid-row {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   margin-inline: var(--gutter);
   position: relative
}

.cell {
   padding: var(--pad);
   min-width: 0;
   position: relative
}

.span-2 {
   grid-column: span 2
}

.asset {
   position: relative;
   aspect-ratio: var(--ratio);
   overflow: hidden;
   background-image: url('assets/figma-reference.png');
   background-repeat: no-repeat;
   min-width: 0
}

.asset-image {
   display: block;
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   max-width: none;
   object-fit: fill;
   opacity: 0
}

.asset-image.loaded {
   opacity: 1
}

.cross {
   width: calc(34 * var(--u));
   height: calc(34 * var(--u));
   object-fit: contain;
   flex-shrink: 0
}

.small-copy {
   font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
   font-size: calc(14 * var(--u));
   line-height: 1.5;
   letter-spacing: .1em;
   font-weight: 500
}

.section-title {
   font-size: calc(64 * var(--u));
   line-height: 1.18;
   letter-spacing: .1em;
   display: flex;
   align-items: center;
   gap: calc(20 * var(--u));
   white-space: nowrap
}

.section-title .cross {
   width: calc(34.26 * var(--u));
   height: calc(34.26 * var(--u))
}

.view-more {
   font-size: calc(14 * var(--u));
   line-height: 1;
   letter-spacing: .1em;
   padding: 0 0 calc(12 * var(--u));
   border-bottom: 1px solid currentColor;
   width: calc(122 * var(--u));
   display: flex;
   align-items: center;
   justify-content: space-between
}

.view-more span {
   font-size: 1.15em
}

/* FV: image occupies a custom inset in the right two master columns. */
.site-header {
   position: fixed;
   z-index: 10;
   top: calc(12 * var(--u));
   left: 50%;
   transform: translateX(-50%);
   width: calc(min(100%, 1920px) - 2 * var(--gutter));
   height: calc(100 * var(--u));
   border-radius: calc(5 * var(--u));
   background: #dbdbdb4d;
   backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-inline: var(--pad);
   transition: opacity .9s ease, transform 1s cubic-bezier(.22, 1, .36, 1)
}

.site-header::before,
.site-header::after,
.ticker::before,
.ticker::after {
   content: "";
   position: absolute;
   width: calc(15 * var(--u));
   height: calc(15 * var(--u));
   background: url('../images/cross.svg') center/contain no-repeat;
   pointer-events: none
}

.site-header::before {
   left: calc(-27 * var(--u));
   top: 0
}

.site-header::after {
   right: calc(-27 * var(--u));
   top: 0
}

.brand-set {
   display: flex;
   align-items: center;
   height: calc(54 * var(--u))
}

.brand-logo {
   height: calc(70 * var(--u));
   width: auto
}

.progress {
   position: absolute;
   right: var(--pad);
   font-size: calc(12 * var(--u));
   font-weight: 600;
   letter-spacing: .1em
}

.header-right {
   display: flex;
   align-items: center;
   gap: calc(42 * var(--u))
}

.language {
   font-size: calc(16 * var(--u));
   letter-spacing: .1em;
   white-space: nowrap
}

.language i {
   font-style: normal;
   margin: 0 .55em
}

.language>span {
   color: #bcbcbc
}

.menu-button {
   padding: 0;
   width: calc(100 * var(--u));
   height: calc(44 * var(--u));
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(10 * var(--u))
}

.menu-button>span {
   height: calc(2 * var(--u));
   min-height: 1px;
   width: 100%;
   background: var(--ink)
}

.menu-panel {
   position: absolute;
   top: calc(100% + 12px);
   right: 0;
   background: #f1f1ef;
   border: 1px solid #ddd;
   min-width: 250px;
   padding: 24px;
   box-shadow: 0 15px 30px #0002
}

.menu-panel[hidden] {
   display: none
}

.menu-panel a {
   display: block;
   font-size: 16px;
   padding: 10px 0;
   letter-spacing: .08em
}

.menu-panel button {
   font-size: 12px;
   padding: 15px 0 0;
   border-top: 1px solid #ccc;
   width: 100%;
   text-align: left;
   margin-top: 10px
}

.hero {
   --fv-u: min(var(--u), calc(100svh * .000925926));
   --hero-copy-top: calc(50% - 217 * var(--u) + 7.5px - 17.5 * var(--fv-u));
   height: min(100svh, calc(1080 * var(--u)));
   position: relative
}

.hero-photo {
   position: absolute;
   left: auto;
   right: var(--gutter);
   top: calc(102 * var(--u) + 20px);
   width: calc(720 * var(--u));
   height: calc(100% - 102 * var(--u) - 25px - 35 * var(--fv-u));
   clip-path: inset(0);
   transition: clip-path 1.2s cubic-bezier(.22, 1, .36, 1)
}

.hero-photo .asset-image {
   inset: 0 !important;
   width: 100% !important;
   height: 100% !important;
   object-fit: cover;
   object-position: center;
   transform: translateY(0) scale(1);
   transition: transform 1.4s cubic-bezier(.22, 1, .36, 1)
}

.hero-title {
   position: absolute;
   left: calc(152.38 * var(--u));
   top: var(--hero-copy-top);
   z-index: 2;
   transform: translate(0, 0);
   transition: left 1.2s cubic-bezier(.65, 0, .35, 1), top 1.2s cubic-bezier(.65, 0, .35, 1), transform 1.2s cubic-bezier(.65, 0, .35, 1)
}

.hero h1 {
   font-size: calc(120 * var(--u));
   line-height: calc(150 * var(--u));
   letter-spacing: .1em
}

.hero h1>span {
   display: block;
   position: relative;
   white-space: nowrap;
   line-height: 1.1;
}

.hero h1 .cross {
   position: absolute;
   left: calc(-86 * var(--u));
   top: calc(55 * var(--u));
   width: calc(49 * var(--u));
   height: calc(49 * var(--u));
   transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1)
}

.air-word {
   letter-spacing: .1em;
   margin-left: calc(4 * var(--u))
}

.hero-caption {
   position: absolute;
   left: calc(61 * var(--u));
   top: calc(var(--hero-copy-top) + 420 * var(--u));
   width: calc(521 * var(--u));
   font-size: calc(12 * var(--u));
   line-height: 1.2;
   letter-spacing: .1em;
   z-index: 2;
   transition: opacity .85s ease
}

.photo-label {
   position: absolute;
   left: 50%;
   top: 46.68%;
   transform: translateX(-50%);
   width: 30.556%;
   height: 5.978%;
   background: #222c;
   color: #fff;
   display: grid;
   place-items: center;
   font-family: "Yu Gothic", sans-serif;
   font-weight: 700;
   font-size: calc(27 * var(--fv-u));
   letter-spacing: .15em
}

.ticker {
   position: fixed;
   top: auto;
   bottom: 0;
   left: 50%;
   right: auto;
   width: min(100%, 1920px);
   transform: translateX(-50%);
   height: calc(35 * var(--fv-u));
   font-size: calc(16 * var(--fv-u));
   line-height: calc(30 * var(--fv-u));
   letter-spacing: .1em;
   display: flex;
   align-items: center;
   pointer-events: none;
   z-index: 9;
   transition: opacity .9s ease, transform 1s cubic-bezier(.22, 1, .36, 1)
}

.ticker::before,
.ticker::after {
   top: 50%;
   transform: translateY(-50%)
}

.ticker::before {
   left: calc(13 * var(--u))
}

.ticker::after {
   right: calc(13 * var(--u))
}

.ticker-window {
   width: calc(100% - 2 * var(--gutter));
   height: 100%;
   margin-inline: var(--gutter);
   border-radius: calc(5 * var(--u));
   background: #dbdbdb4d;
   backdrop-filter: blur(10px);
   display: flex;
   align-items: center;
   overflow: hidden
}

.ticker-track {
   display: flex;
   width: max-content;
   white-space: nowrap;
   will-change: transform;
   animation: ticker-flow 76s linear infinite
}

.ticker-track span {
   flex: none;
   padding-right: 0
}

@keyframes ticker-flow {
   to {
      transform: translateX(-50%)
   }
}

/* Text entrance: clipped and staggered like the motion reference. */
.text-reveal {
   --reveal-order: 0
}

.text-reveal__mask {
   display: block;
   overflow: hidden
}

.text-reveal.is-revealed > .text-reveal__mask {
   overflow: visible
}

.text-reveal__inner {
   display: block;
   opacity: 0;
   transform: translateY(112%);
   transform-origin: 50% 100%;
   will-change: transform, opacity
}

.text-reveal.is-visible .text-reveal__inner {
   animation: text-rise var(--reveal-duration, 1s) cubic-bezier(.22, 1, .36, 1) both;
   animation-delay: calc(var(--reveal-order) * var(--reveal-step, 75ms))
}

.hero h1 > .text-reveal {
   --reveal-step: 150ms
}

.hero-caption.text-reveal,
.photo-label.text-reveal {
   --reveal-duration: 1.15s
}

.intro-active:not(.intro-title-docked) .hero-title {
   left: 50%;
   top: 50%;
   transform: translate(calc(-50% + 43 * var(--u)), -50%)
}

.intro-active:not(.intro-crosses-visible) .hero h1 .cross {
   opacity: 0;
   transform: scale(.65)
}

.intro-elements-hidden .site-header {
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, calc(-14 * var(--u)))
}

.intro-elements-hidden .hero-photo {
   clip-path: inset(100% 0 0)
}

.intro-elements-hidden .hero-photo .asset-image {
   transform: translateY(12%) scale(1.055)
}

.intro-elements-hidden .hero-caption {
   opacity: 0
}

.intro-elements-hidden .ticker {
   opacity: 0;
   transform: translate(-50%, calc(14 * var(--u)))
}

.text-reveal.is-revealed .text-reveal__inner {
   animation: none;
   opacity: 1;
   transform: none;
   will-change: auto
}

@keyframes text-rise {
   0% {
      opacity: 0;
      transform: translateY(112%)
   }

   100% {
      opacity: 1;
      transform: translateY(0)
   }
}

@media (prefers-reduced-motion: reduce) {
   .text-reveal__inner,
   .text-reveal.is-visible .text-reveal__inner {
      animation: none;
      opacity: 1;
      transform: none;
      will-change: auto
   }
}

/* Concept: title 1 grid row / story 3 rows / logo 1 row. */
.project-heading {
   height: var(--cell);
   align-items: end;
   padding: 0 var(--pad) calc(47 * var(--u))
}

.project-heading h2 {
   grid-column: 1/-1;
   font-size: calc(110 * var(--u));
   line-height: 1.1;
   letter-spacing: .1em
}

.project-body {
   height: calc(3 * var(--cell))
}

.project-copy {
   display: flex;
   flex-direction: column
}

.project-cross {
   width: calc(51 * var(--u));
   height: calc(51 * var(--u))
}

.project-cross-end {
   position: absolute;
   right: var(--pad);
   bottom: var(--pad);
   width: calc(51 * var(--u));
   height: calc(51 * var(--u))
}

.intro-copy {
   padding-top: calc(113 * var(--u));
   font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
   font-size: calc(30 * var(--u));
   line-height: 2;
   letter-spacing: .05em;
   font-weight: 500
}

.intro-copy>p+p {
   margin-top: calc(42 * var(--u))
}

.intro-copy>p:first-child+p {
   margin-top: calc(8 * var(--u))
}

.intro-copy mark {
   background: #1a1a1a;
   color: white;
   padding: .06em .08em;
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone
}

.office-photo {
   height: 100%;
   width: 100%
}

.about-teaser {
   position: relative;
   text-align: center;
   height: calc(6 * var(--cell));
   overflow: hidden;
   padding: calc(160 * var(--u)) var(--gutter) calc(140 * var(--u))
}

.about-cross-start {
   position: absolute;
   top: calc(56 * var(--u));
   left: var(--gutter)
}

.about-cross-end {
   position: absolute;
   bottom: calc(96 * var(--u));
   right: var(--gutter)
}

.about-teaser h2 {
   font-size: calc(72 * var(--u));
   letter-spacing: .08em;
   font-weight: 700
}

.about-subtitle {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: calc(24 * var(--u));
   margin-top: calc(28 * var(--u))
}

.about-subtitle > span {
   width: calc(90 * var(--u));
   height: 1px;
   background: var(--ink)
}

.about-subtitle p {
   font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
   font-size: calc(18 * var(--u));
   font-weight: 700;
   letter-spacing: .15em
}

.about-copy {
   max-width: calc(920 * var(--u));
   margin: calc(64 * var(--u)) auto 0;
   display: flex;
   flex-direction: column;
   gap: calc(30 * var(--u));
   font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
   font-size: calc(16 * var(--u));
   line-height: 2;
   letter-spacing: .05em;
   font-weight: 500
}

.about-brand-row {
   margin-top: calc(140 * var(--u));
   text-align: left
}

.about-brand-heading {
   grid-column: 1/-1;
   font-size: calc(48 * var(--u));
   letter-spacing: .06em;
   font-weight: 700;
   margin-bottom: calc(50 * var(--u))
}

.about-brand-tiles {
   grid-column: 1/-1;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: calc(24 * var(--u))
}

.brand-tile {
   position: relative;
   width: calc(380 * var(--u));
   aspect-ratio: 1/1;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden
}

.brand-tile img {
   max-width: 55%;
   max-height: 28%;
   object-fit: contain
}

.brand-tile::after {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;
   width: calc(30 * var(--u));
   height: calc(30 * var(--u));
   background: var(--ink);
   clip-path: polygon(100% 0, 100% 100%, 0 100%)
}

.brand-x {
   font-size: calc(28 * var(--u));
   flex-shrink: 0
}

.about-logo-row {
   margin-top: calc(140 * var(--u));
   text-align: left
}

.about-logo-card {
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center
}

.about-logo-image {
   width: 100%
}

.about-logo-copy {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: calc(60 * var(--u))
}

.about-logo-copy h3 {
   display: flex;
   align-items: center;
   gap: calc(15 * var(--u));
   font-size: calc(40 * var(--u));
   letter-spacing: .1em;
   line-height: 1;
   margin-bottom: calc(28 * var(--u))
}

.about-logo-copy h3 .cross {
   width: calc(28 * var(--u));
   height: calc(28 * var(--u))
}

.logo-row {
   height: var(--cell)
}

.logo-card {
   height: 100%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center
}

.collab-logo-image {
   width: calc(215 * var(--u));
   height: calc(266 * var(--u))
}

.logo-copy {
   padding-top: calc(142 * var(--u))
}

.logo-copy h3 {
   display: flex;
   align-items: center;
   gap: calc(15 * var(--u));
   font-size: calc(40 * var(--u));
   letter-spacing: .1em;
   line-height: 1;
   margin-bottom: calc(36 * var(--u))
}

.logo-copy h3 .cross {
   width: calc(28 * var(--u));
   height: calc(28 * var(--u))
}

/* Contributors: each row uses [1 col mark][1 col portrait][2 cols text]. */
.contributors-header {
   height: var(--cell)
}

.marquee {
   height: calc(176 * var(--u));
   display: flex;
   align-items: center;
   border-block: 1px solid white;
   overflow: hidden
}

.marquee>div {
   display: flex;
   width: max-content;
   animation: marquee 42s linear infinite
}

.marquee span {
   position: relative;
   top: -1px;
   font-size: calc(128 * var(--u));
   font-style: italic;
   letter-spacing: .1em;
   line-height: 1;
   white-space: nowrap;
   padding-right: calc(60 * var(--u))
}

@keyframes marquee {
   to {
      transform: translateX(-50%)
   }
}

.contributors-title {
   height: calc(284 * var(--u));
   align-items: end;
   padding: 0 var(--pad) calc(38 * var(--u))
}

.contributors-title h2 {
   grid-column: 1/-1
}

.person {
   height: var(--cell)
}

.person-mark {
   display: grid;
   place-items: center
}

.person-mark .cross {
   width: calc(70 * var(--u));
   height: calc(70 * var(--u))
}

.portrait-wrap,
.air-card {
   width: 100%;
   height: 100%
}

.portrait {
   width: 100%;
   aspect-ratio: 1
}

.air-card {
   background: white;
   display: grid;
   place-items: center
}

.air-image {
   width: calc(185 * var(--u));
   height: calc(99 * var(--u))
}

.person-copy h3 {
   display: flex;
   gap: calc(15 * var(--u));
   align-items: center;
   font-family: "Yu Gothic", sans-serif;
   font-size: calc(48 * var(--u));
   line-height: 1;
   letter-spacing: .1em
}

.person-copy h3 .cross {
   width: calc(29 * var(--u));
   height: calc(29 * var(--u))
}

.person-role {
   font-family: "Yu Gothic", sans-serif;
   font-size: calc(16 * var(--u));
   letter-spacing: .1em;
   line-height: 1;
   margin-top: calc(20 * var(--u))
}

.person-copy .small-copy {
   margin-top: calc(36 * var(--u))
}

.person-copy .view-more {
   position: absolute;
   left: var(--pad);
   bottom: var(--pad)
}

/* Interview: two rows, right side follows four single-square cells. */
.interview {
   height: calc(2 * var(--cell));
   background: #222f;
   color: white;
   position: relative
}

.interview-grid {
   height: 100%
}

.interview-copy {
   align-self: center;
   padding-left: calc(94 * var(--u));
   padding-right: var(--pad)
}

.interview-copy h2 {
   display: flex;
   gap: calc(20 * var(--u));
   font-size: calc(64 * var(--u));
   letter-spacing: .1em;
   line-height: 1.19;
   position: relative;
   margin-bottom: calc(40 * var(--u))
}

.interview-copy h2>.cross {
   filter: invert(1);
   position: absolute;
   left: calc(-54 * var(--u));
   top: .2em
}

.interview-copy .view-more {
   margin-top: calc(45 * var(--u))
}

.interview-portraits {
   grid-column: 3/5;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr
}

.interview-logo-card {
   width: 100%;
   height: 100%;
   background: #fff;
   display: grid;
   place-items: center
}

.interview-logo {
   width: calc(217 * var(--u));
   height: calc(94 * var(--u))
}

.interview-cross {
   position: absolute;
   left: calc(1420 * var(--u));
   top: var(--cell);
   transform: translate(-50%, -50%);
   z-index: 3
}

.interview-cross .cross {
   width: calc(40 * var(--u));
   height: calc(40 * var(--u));
   filter: invert(1);
   transform: rotate(45deg)
}

/* Each product: 1 row for number / 3 rows for all content. */
.product-spacer {
   height: var(--cell)
}

.item-number {
   grid-column: 4;
   justify-self: center;
   align-self: start;
   margin-top: calc(200 * var(--u));
   font-size: calc(40 * var(--u));
   line-height: 1;
   letter-spacing: .1em
}

.item-number--left {
   grid-column: 1
}

.product-spacer .section-title {
   position: absolute;
   left: var(--pad);
   bottom: calc(38 * var(--u))
}

.product-grid {
   grid-template-rows: repeat(3, var(--cell))
}

.product-main {
   grid-column: 1/3;
   grid-row: 1/3
}

.product-main-image {
   width: 100%;
   height: 100%
}

.product-copy {
   grid-column: 3/5;
   grid-row: 1
}

.product-title {
   display: flex;
   align-items: baseline;
   gap: calc(26 * var(--u))
}

.product-title h3 {
   font-size: calc(40 * var(--u));
   line-height: 1.1;
   letter-spacing: .1em;
   display: flex;
   gap: calc(18 * var(--u));
   align-items: center;
   white-space: nowrap
}

.product-title .cross {
   width: calc(28 * var(--u));
   height: calc(28 * var(--u))
}

.product-title p {
   font-family: "Yu Gothic", sans-serif;
   font-size: calc(16 * var(--u));
   letter-spacing: .05em;
   white-space: nowrap;
   font-weight: 700
}

.product-copy>.small-copy {
   margin-top: calc(28 * var(--u))
}

.product-action {
   position: absolute;
   left: var(--pad);
   right: var(--pad);
   bottom: calc(40 * var(--u));
   height: calc(24 * var(--u));
   display: grid;
   grid-template-columns: calc(260 * var(--u)) calc(120 * var(--u)) 1fr;
   gap: calc(40 * var(--u));
   align-items: center
}

.price {
   font-size: calc(24 * var(--u));
   line-height: 1;
   letter-spacing: .05em
}

.swatches {
   display: flex;
   justify-content: flex-end;
   gap: calc(9 * var(--u))
}

.swatches span {
   width: calc(24 * var(--u));
   height: calc(24 * var(--u))
}

.blue {
   background: #393268
}

.white {
   background: white
}

.sand {
   background: #cfbf95
}

.item-detail {
   height: 100%;
   padding: 0 calc(18 * var(--u));
   color: white;
   background: var(--ink);
   font-size: calc(14 * var(--u));
   letter-spacing: .1em;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: calc(20 * var(--u));
   line-height: 1
}

.pair {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-width: 0
}

.pair--upper {
   grid-column: 3/5;
   grid-row: 2
}

.pair--lower {
   grid-column: 1/3;
   grid-row: 3
}

.thumbnail-card {
   background: #fff;
   height: 100%;
   width: 100%;
   display: grid;
   place-items: center
}

.single-lamp {
   width: calc(282 * var(--u));
   height: calc(344 * var(--u))
}

.product-wide {
   grid-column: 3/5;
   grid-row: 3
}

.wide-image {
   width: 100%;
   height: 100%
}

.is-reverse .product-main {
   grid-column: 3/5
}

.is-reverse .product-copy {
   grid-column: 1/3
}

.is-reverse .pair--upper {
   grid-column: 1/3
}

.is-reverse .pair--lower {
   grid-column: 3/5
}

.is-reverse .product-wide {
   grid-column: 1/3
}

.event {
   height: var(--cell);
   align-items: end;
   padding: 0 var(--pad) calc(40 * var(--u))
}

.event .section-title {
   grid-column: 1/-1
}

.footer {
   position: relative;
   z-index: 2;
   min-height: calc(114 * var(--u));
   display: flex;
   align-items: center;
   justify-content: center;
   border-top: 1px solid var(--rule);
   padding: calc(30 * var(--u)) var(--gutter) calc(70 * var(--u))
}

.footer-brand {
   position: relative;
   z-index: 1
}

dialog {
   width: min(660px, 90vw);
   border: 1px solid #bbb;
   padding: 44px;
   background: #efefed;
   color: #222
}

dialog::backdrop {
   background: #0009
}

dialog h2 {
   font-size: 28px;
   font-weight: 500;
   letter-spacing: .07em;
   margin-bottom: 20px
}

dialog p {
   white-space: pre-line;
   font-family: "Yu Gothic", sans-serif;
   font-size: 15px;
   line-height: 1.9
}

.close-dialog {
   position: absolute;
   right: 12px;
   top: 6px;
   font-size: 30px
}

body:has(dialog[open]) {
   overflow: hidden
}

/* No SP frame supplied: responsive adaptation. Shared rule/cell inset remains. */
@media(max-width:767px) {
   :root {
      --u: .0520833333vw;
      --gutter: 4vw;
      --pad: 4vw;
      --cell: 46vw
   }

   .page {
      width: 100%
   }

   .vertical-rules,
   .horizontal-rules {
      display: none
   }

   .content-grid-rules {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
         linear-gradient(to right, var(--rule) 0, var(--rule) 1px, transparent 1px),
         linear-gradient(to bottom, var(--rule) 0, var(--rule) 1px, transparent 1px);
      background-repeat: repeat-x, repeat-y;
      background-size: calc(50% - var(--gutter)) 100%, 100% 33.333333%;
      background-position: var(--gutter) 0, 0 0
   }

   .content-grid-rules::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 1px;
      background: var(--paper)
   }

   .grid-row {
      grid-template-columns: 1fr 1fr
   }

   .small-copy {
      font-size: clamp(.75rem, 3.25vw, .95rem);
      line-height: 1.8;
      letter-spacing: .04em
   }

   .cross {
      width: 5vw;
      height: 5vw
   }

   .section-title {
      font-size: clamp(1rem, 4.65vw, 1.7rem);
      gap: 2vw;
      letter-spacing: .045em
   }

   .section-title .cross {
      width: 3.6vw;
      height: 3.6vw
   }

   .site-header {
      top: 2vw;
      height: 15vw;
      padding-inline: 4vw
   }

   .site-header::before,
   .site-header::after,
   .ticker::before,
   .ticker::after {
      display: none
   }

   .brand-set {
      height: 10vw
   }

   .brand-logo {
      height: 9vw
   }

   .progress {
      right: 4vw;
      font-size: 2.8vw
   }

   .menu-button {
      width: 10vw;
      height: 9vw;
      gap: 1.5vw
   }

   .menu-button>span {
      height: 1px
   }

   .header-right {
      gap: 0
   }

   .hero {
      height: 100svh;
      min-height: 0;
      z-index: 1
   }

   .hero-title {
      left: 12vw;
      top: 26vw;
      transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
      will-change: transform
   }

   html.intro-active:not(.intro-title-docked) .hero-title {
      left: 12vw;
      top: 26vw;
      transform: translate(
         calc(50cqw - 12vw - 50% + 3.5vw),
         calc(50svh - 26vw - 50%)
      )
   }

   .hero h1 {
      font-size: 10.8vw;
      line-height: 1.1;
      letter-spacing: .08em
   }

   .hero h1 .cross {
      left: -7vw;
      top: 3.5vw;
      width: 4.8vw;
      height: 4.8vw
   }

   .hero-caption {
      left: 5vw;
      top: 65vw;
      width: 88vw;
      font-size: 2.5vw;
      line-height: 1.4;
      letter-spacing: .07em
   }

   .hero-photo {
      left: 4vw;
      right: 4vw;
      top: 84vw;
      bottom: 9vw;
      width: auto;
      height: auto;
      aspect-ratio: auto;
      z-index: 3
   }

   .photo-label {
      left: auto;
      right: 22vw;
      top: 121vw;
      width: 28vw;
      height: 7vw;
      font-size: 3.4vw
   }

   .ticker {
      top: auto;
      bottom: 2vw;
      height: 6vw;
      font-size: 2.6vw;
      line-height: 6vw
   }

   .project-heading {
      height: auto;
      padding: 14vw 4vw 8vw;
      border-block: 1px solid var(--rule)
   }

   .project-heading h2 {
      font-size: 6vw;
      line-height: 1.15;
      letter-spacing: .06em
   }

   .project-body {
      height: auto;
      grid-template-columns: 1fr
   }

   .project-body>.span-2 {
      grid-column: 1
   }

   .project-copy {
      padding: 5vw 4vw 8vw
   }

   .project-cross {
      width: 6vw;
      height: 6vw
   }

   .intro-copy {
      padding-top: 6vw;
      font-size: clamp(.85rem, 3.6vw, 1rem);
      line-height: 2;
      letter-spacing: .04em
   }

   .intro-copy>p+p {
      margin-top: 6vw
   }

   .intro-copy>p:first-child+p {
      margin-top: 4vw
   }

   .project-cross-end {
      display: none
   }

   .project-image {
      padding: 4vw;
      margin-left: 15vw
   }

   .about-teaser {
      height: auto;
      overflow: visible;
      padding: 18vw 4vw 20vw
   }

   .about-teaser h2 {
      font-size: clamp(1.6rem, 8vw, 2.4rem)
   }

   .about-subtitle > span {
      width: 8vw
   }

   .about-subtitle p {
      font-size: clamp(.75rem, 3.4vw, .95rem)
   }

   .about-copy {
      max-width: 100%;
      margin-top: 10vw;
      gap: 6vw;
      font-size: clamp(.85rem, 3.6vw, 1rem)
   }

   .about-brand-row {
      margin-top: 16vw
   }

   .about-brand-heading {
      font-size: clamp(1.2rem, 6vw, 1.7rem);
      margin-bottom: 6vw
   }

   .about-brand-tiles {
      gap: 3vw
   }

   .brand-tile {
      width: calc(50% - 6vw)
   }

   .brand-x {
      font-size: 4vw
   }

   .about-logo-row {
      margin-top: 10vw
   }

   .about-logo-copy {
      padding-left: 0;
      padding-top: 6vw
   }

   .about-logo-copy h3 {
      font-size: clamp(1.1rem, 5vw, 1.5rem);
      margin-bottom: 4vw
   }

   .office-photo {
      height: auto;
      aspect-ratio: 840/1300
   }

   .logo-row {
      height: auto;
      grid-template-columns: 1fr
   }

   .logo-row>.span-2 {
      grid-column: 1
   }

   .logo-card {
      height: 43vw
   }

   .collab-logo-image {
      width: 18vw;
      height: 22.3vw
   }

   .logo-copy {
      padding-top: 5vw;
      padding-bottom: 9vw
   }

   .logo-copy h3 {
      font-size: 4.2vw;
      gap: 2vw;
      line-height: 1.3;
      margin-bottom: 4vw
   }

   .logo-copy h3 .cross {
      width: 3.2vw;
      height: 3.2vw
   }

   .contributors-header {
      height: auto
   }

   .marquee {
      height: 18vw;
      align-items: flex-start
   }

   .marquee>div {
      align-items: flex-start
   }

   .marquee span {
      font-size: 14vw;
      line-height: 1.15;
      padding-right: 6vw
   }

   .contributors-title {
      height: 30vw;
      padding: 0 4vw 5vw
   }

   .person {
      height: auto;
      min-height: 46vw;
      grid-template-columns: 1fr 2fr;
      border-bottom: 1px solid var(--rule)
   }

   .person-mark {
      display: none
   }

   .person-image {
      padding: 4vw 2vw 4vw 4vw
   }

   .person-copy {
      grid-column: 2;
      padding: 4vw 4vw 4vw 2vw
   }

   .person-copy h3 {
      font-size: 4vw;
      gap: 1vw;
      letter-spacing: .04em
   }

   .person-copy h3 .cross {
      width: 2.5vw;
      height: 2.5vw
   }

   .person-role {
      font-size: 2.5vw;
      line-height: 1.5;
      margin-top: 2vw;
      letter-spacing: .03em
   }

   .person-copy .small-copy {
      margin-top: 3vw;
      font-size: clamp(.7rem, 2.85vw, .85rem);
      line-height: 1.8
   }

   .person-copy .view-more {
      position: static;
      margin-top: 5vw
   }

   .view-more {
      width: 24vw;
      font-size: 2.5vw;
      padding-bottom: 2vw
   }

   .air-card {
      height: 24vw
   }

   .air-image {
      width: 15vw;
      height: 8vw
   }

   .interview {
      height: auto
   }

   .interview-grid {
      grid-template-columns: 1fr
   }

   .interview-copy {
      grid-column: 1;
      padding: 10vw 4vw 9vw 10vw
   }

   .interview-copy h2 {
      font-size: 7vw;
      gap: 3vw;
      margin-bottom: 5vw
   }

   .interview-copy h2 .cross {
      left: -6vw;
      width: 4vw;
      height: 4vw
   }

   .interview-copy .view-more {
      margin-top: 5vw
   }

   .interview-portraits {
      grid-column: 1;
      grid-template-rows: repeat(2, 46vw)
   }

   .interview-logo {
      width: 25vw;
      height: 10.8vw
   }

   .interview-cross {
      display: none
   }

   .product-spacer {
      height: 46vw
   }

   .item-number {
      grid-column: 2;
      margin-top: 15vw;
      font-size: 4vw
   }

   .item-number--left {
      grid-column: 1
   }

   .product-spacer .section-title {
      left: 4vw;
      bottom: 5vw
   }

   .product-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto 46vw 46vw
   }

   .product-main,
   .is-reverse .product-main {
      grid-column: 1/3;
      grid-row: 1
   }

   .product-main-image {
      height: auto;
      aspect-ratio: 1
   }

   .product-copy,
   .is-reverse .product-copy {
      grid-column: 1/3;
      grid-row: 2;
      padding-block: 5vw 7vw;
      min-height: 52vw
   }

   .product-title {
      gap: 3vw;
      flex-wrap: wrap
   }

   .product-title h3 {
      font-size: 5vw;
      letter-spacing: .065em;
      gap: 2vw
   }

   .product-title h3 .cross {
      width: 3.5vw;
      height: 3.5vw
   }

   .product-title p {
      font-size: 2.7vw
   }

   .product-copy>.small-copy {
      margin-top: 4vw
   }

   .product-action {
      position: static;
      margin-top: 8vw;
      height: 6vw;
      display: grid;
      grid-template-columns: 1fr auto 40%;
      gap: 4vw
   }

   .price {
      font-size: 3.5vw
   }

   .swatches {
      gap: 1.3vw
   }

   .swatches span {
      width: 3vw;
      height: 3vw
   }

   .item-detail {
      font-size: 2.2vw;
      padding: 0 2vw;
      gap: 2vw
   }

   .pair--upper,
   .is-reverse .pair--upper {
      grid-column: 1/3;
      grid-row: 3
   }

   .pair--lower,
   .is-reverse .pair--lower {
      grid-column: 1;
      grid-row: 4
   }

   .pair--lower {
      gap: 0
   }

   .pair--lower .cell {
      padding: 4vw 1.5vw
   }

   .pair--lower .cell:first-child {
      padding-left: 4vw
   }

   .pair--lower .single-lamp {
      width: 13vw;
      height: 16vw
   }

   .single-lamp {
      width: 28vw;
      height: 34.2vw
   }

   .product-wide,
   .is-reverse .product-wide {
      grid-column: 2;
      grid-row: 4;
      padding-left: 1.5vw
   }

   .event {
      height: 46vw;
      border-bottom: 1px solid var(--rule);
      padding: 0 4vw 6vw
   }

   .footer {
      min-height: 12vw;
      padding: 6vw 4vw 12vw
   }
}

/* Section markers: only the leading rule is black; internal/end rules stay white. */
.page main > section:not(.hero),
.page main > .marquee,
.page main > #items > section,
.page > .footer {
   border-top: 1px solid var(--ink)
}

@media(min-width:768px) {
   .page main > .marquee {
      position: relative;
      z-index: 2;
      border-top: 1px solid #000 !important
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   .marquee>div {
      animation: none
   }

   .ticker-track {
      animation: none
   }
}

/* On the dark section the same grid remains, with subdued rules. */
.interview::before {
   content: "";
   position: absolute;
   inset: 0 var(--gutter);
   pointer-events: none;
   background-image: linear-gradient(90deg, #ffffff10 1px, transparent 1px), linear-gradient(#ffffff10 1px, transparent 1px);
   background-size: 25% var(--cell);
   border-right: 1px solid #ffffff10
}

@media(max-width:767px) {
   .interview::before {
      background-size: 50% var(--cell)
   }
}