/* Quist, interior design for houses. A concept project by fioel.
   One system: a 12 column grid with a 2rem margin and a 1rem gutter, every size in rem from one design frame
   (1440 desktop, 375 phone), one face (Hanken Grotesk, weight 500), a bone ground, a warm ink and one stone accent
   taken from the limestone and concrete in the photographs. One curve for structure (--fast), one for text (--out). */
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/HankenGrotesk.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
:root {
  --g: #F6F5F2; --ink: #151412; --stone: #8F8A7F; --stone-l: #D6D2C8;
  --m: 2rem; --gut: 1rem; --cols: 12; --col: calc((100vw - 2 * var(--m) + var(--gut)) / var(--cols));
  --fast: linear(0, .009 2.5%, .025 5%, .05 7.5%, .091 10%, .156 12.5%, .256 15%, .379 17.5%, .497 20%, .602 22.5%, .69 25%, .761 27.5%, .817 30%, .858 32.5%, .886 35%, .912 37.5%, .936 40%, .951 42.5%, .961 45%, .969 47.5%, .974 50%, .982 55%, .988 60%, .991 65%, .994 70%, .996 75%, .998 80%, .999 85%, 1 90%);
  --out: cubic-bezier(.16, 1, .3, 1); --soft: cubic-bezier(.23, 1, .32, 1);
}
html { font-size: calc(10 * (100vw / 375)); background: var(--ink); }
@media (min-width: 768px) { html { font-size: calc(10 * (100vw / 768)); } }
@media (min-width: 1024px) { html { font-size: calc(10 * (100vw / 1024)); } }
@media (min-width: 1280px) { html { font-size: calc(10 * (100vw / 1440)); } }
@media (min-width: 1920px) { html { font-size: 13.333px; } }
@media (max-width: 767px) { :root { --m: 1.6rem; --cols: 6; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 1.6rem; line-height: 1.1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 200; background: var(--ink); color: var(--g); padding: 8px 12px; }
.skip:focus { top: 8px; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gut); padding: 0 var(--m); }
.stone { color: var(--stone); }
.tick { position: absolute; width: 2rem; height: 2rem; pointer-events: none; }
.tick::before, .tick::after { content: ''; position: absolute; background: var(--ink); }
.tick::before { width: 1.2rem; height: 1px; } .tick::after { width: 1px; height: 1.2rem; }
.tick.tl { left: var(--m); top: var(--m); } .tick.tr { right: var(--m); top: var(--m); } .tick.tr::before, .tick.tr::after { right: 0; }
.tick.bl { left: var(--m); bottom: var(--m); } .tick.bl::before, .tick.bl::after { bottom: 0; }
.tick.br { right: var(--m); bottom: var(--m); } .tick.br::before, .tick.br::after { right: 0; bottom: 0; }

/* the page sits on the ink like a card; the footer strip waits under it */
.page { position: relative; z-index: 2; background: var(--g); margin-bottom: 21.7rem; transform-origin: 50% 100%; }
@media (max-width: 767px) { .page { margin-bottom: 16rem; } }

/* lines rise out of their own masks; labels roll in */
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; transform: translateY(105%); transition: transform 1.2s var(--out); transition-delay: var(--d, 0s); }
.in .ln > span, .ln.in > span { transform: none; }
html:not(.js) .ln > span { transform: none; }
.lab { display: flex; gap: 2.4rem; font-size: 1.4rem; line-height: 1.2; text-transform: uppercase; overflow: hidden; }
.lab .no { color: var(--stone); }
.lab > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--out); }
.lab .w { transition-delay: .08s; }
.lab.in > span, html:not(.js) .lab > span { transform: none; }

/* ---------- header: the mark large and alone, one word that opens the menu ---------- */
.hd { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 6.4rem; padding: 0 var(--m); display: flex; justify-content: space-between; align-items: center; color: var(--ink); transition: color .45s var(--soft), transform .5s var(--soft); }
.hd.light { color: var(--g); }
.hd.hide { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 1rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.brand .mk { width: 2.9rem; height: 1.34rem; transform: translateY(.1rem); }
.mbtn { font-size: 1.6rem; line-height: 1.2; }
.roll { display: inline-grid; overflow: hidden; height: 1.2em; }
.roll > span { grid-area: 1 / 1; transition: transform 1s var(--soft); }
.roll > span + span { transform: translateY(100%); }
body.menu-open .roll > span:first-child { transform: translateY(-100%); } body.menu-open .roll > span + span { transform: none; }
html.intro .hd { opacity: 0; transform: translateY(-40%); }
html.intro-b .hd { opacity: 1; transform: none; transition: opacity .6s var(--soft) .3s, transform 1s var(--out) .3s, color .45s var(--soft); }

/* ---------- menu: a stone curtain drops while its content counter-moves; links rise; each has its picture ---------- */
.mshade { position: fixed; inset: 0; z-index: 54; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .6s cubic-bezier(.25, .46, .45, .9); }
body.menu-open .mshade { opacity: .8; pointer-events: auto; }
.menu { position: fixed; inset: 0; z-index: 55; overflow: hidden; background: var(--stone-l); color: var(--ink); transform: translateY(-100%); transition: transform .7s var(--fast); }
.menu[hidden] { display: block; visibility: hidden; }
.menu-in { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gut); padding: 0 var(--m); transform: translateY(100%); transition: transform .7s var(--fast); }
body.menu-open .menu, body.menu-open .menu-in { transform: none; transition-duration: 1.1s; }
.mlist { grid-column: 1 / 8; align-self: center; display: grid; gap: .6rem; }
.mlist a { display: inline-block; font-size: 6rem; line-height: 1.1; letter-spacing: -.02em; transition: color .3s var(--soft); }
.mlist .ln > span { transition-delay: 0s; }
body.menu-open .mlist .ln > span { transform: none; transition-delay: calc(.11s + var(--i, 0) * .1s); }
.mlist:hover a { color: var(--stone); } .mlist a:hover, .mlist a:focus-visible { color: var(--ink); }
.mpics { grid-column: 10 / 13; align-self: center; position: relative; aspect-ratio: 343 / 458; overflow: hidden; }
.mpic { position: absolute; inset: 0; opacity: 0; transition: opacity .24s var(--soft); }
.mpic.on { opacity: 1; }
.mpic img { width: 100%; height: 100%; object-fit: cover; }
.mfoot { position: absolute; left: var(--m); right: var(--m); bottom: var(--m); display: flex; justify-content: space-between; font-size: 1.6rem; }
@media (max-width: 767px) {
  .mlist { grid-column: 1 / 7; align-self: start; padding-top: 22rem; } .mlist a { font-size: 3.7rem; }
  .mpics { grid-column: 4 / 7; align-self: end; margin-bottom: 7rem; }
  .mfoot { flex-direction: column; gap: .4rem; }
}

/* ---------- the loader: the name runs through its slot, a counter, then the page rises into a window ---------- */
.loader { display: none; }
html.intro .loader { display: block; position: fixed; inset: 0; z-index: 1; color: var(--g); }
.lw { position: absolute; left: var(--m); right: var(--m); top: var(--m); display: flex; justify-content: space-between; font-size: 18.6vw; font-weight: 600; line-height: .74; letter-spacing: -.04em; transition: transform 1.2s var(--fast); }
.lc { position: relative; display: block; overflow: hidden; padding: .02em 0 .07em; }
.lc .a { position: absolute; left: 0; top: .02em; transform: translateY(120%); }
.lc .b { display: block; transform: translateY(240%); }
html.intro-a0 .lc .a { transform: translateY(-120%); transition: transform 2s var(--out); transition-delay: calc(var(--i) * .0475s); }
html.intro-a0 .lc .b { transform: none; transition: transform 2s var(--out); transition-delay: calc(var(--i) * .0475s); }
html.intro-b .lw { transform: translateY(calc(-100% - 12vh - var(--m))); }
.lt { position: absolute; left: 0; right: 0; bottom: var(--m); display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gut); padding: 0 var(--m); font-size: 1.6rem; line-height: 1.2; }
.lt .l1 { grid-column: 1 / 5; } .lt .l2 { grid-column: 5 / 9; } .lt .l3 { grid-column: 10 / 13; text-align: right; }
@media (max-width: 767px) { .lt .l1 { grid-column: 1 / 4; } .lt .l2 { display: none; } .lt .l3 { grid-column: 4 / 7; } }
html.intro-a0 .lt .ln > span { transform: none; transition-delay: calc(.3s + var(--i, 0) * .075s); }
html.intro-a1 .lt .ln > span { transform: translateY(-105%); transition: transform 1.2s var(--fast); transition-delay: calc(var(--i, 0) * .05s); }
html.intro .page { clip-path: inset(100vh 30vw 0); transform: translateY(var(--wmh, 22vw)) scale(var(--sc, .972)); transform-origin: 50% 0; }
html.intro-a1 .page { clip-path: inset(0 0 0 0); transition: clip-path 1.7s var(--fast); }
html.intro-b .page { transform: none; transition: clip-path 1.7s var(--fast), transform 1.2s var(--fast); }
html.intro .strip { visibility: hidden; }
@media (max-width: 767px) { html.intro .page { clip-path: inset(110vh 10vw 0); } }

/* ---------- hero: one photograph of the house, held in a window, then the whole screen ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 52rem; overflow: hidden; color: var(--g); background: var(--g); }
.hero-m { position: absolute; inset: 0; overflow: hidden; }
.hero-i { position: absolute; inset: 0; }
.hero-i img { width: 100%; height: 100%; object-fit: cover; }
.hero-m::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: .22; }
html.intro .hero-m { clip-path: inset(100vh 50vw 0); }
html.intro .hero-i { transform: scale(.75); }
html.intro-a1 .hero-m { clip-path: inset(25vh 30vw 0); transition: clip-path 1.2s var(--fast) .25s; }
html.intro-a1 .hero-i { transform: scale(.8); transition: transform 1.2s var(--fast) .25s; }
html.intro-b .hero-m { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--fast); }
html.intro-b .hero-i { transform: none; transition: transform 1.2s var(--fast); }
@media (max-width: 767px) { html.intro-a1 .hero-m { clip-path: inset(0 0 0 0); } html.intro .hero-i, html.intro-a1 .hero-i { transform: scale(1.1); } }
.hero-row { position: absolute; left: 0; right: 0; bottom: var(--m); align-items: end; }
.hero-sd { grid-column: 1 / 4; opacity: .6; } .hero-sd span { display: inline-block; transition: transform 1s var(--fast); }
html.intro .hero-sd span:first-child { transform: translateX(2rem); } html.intro .hero-sd span:last-child { transform: translateX(-2rem); }
html.intro-b .hero-sd span { transform: none; transition-delay: .4s; }
.hero-h { grid-column: 9 / 13; font-size: 2rem; line-height: 1.3; font-weight: 500; }
@media (max-width: 767px) { .hero-sd { display: none; } .hero-h { grid-column: 1 / 7; } }

/* ---------- studio: a small picture rides 25rem, a label, a paragraph, a statement indented three columns ---------- */
.about { position: relative; padding: var(--m) 0; }
.ab-top { padding-top: 5.2rem; }
.ab-pic { grid-column: 1 / 3; height: calc(27rem + 25rem); }
.ab-fig { position: sticky; top: 8.2rem; aspect-ratio: 225 / 270; overflow: hidden; }
.ab-fig img { width: 100%; height: 100%; object-fit: cover; }
.ab-txt { grid-column: 7 / 11; display: grid; gap: 2.4rem; align-content: start; }
.ab-txt p:not(.lab) { font-size: 1.6rem; line-height: 1.25; max-width: 46rem; }
.ab-h { margin-top: -5.7rem; padding: 0 var(--m); font-size: 7.2rem; line-height: 1; font-weight: 500; letter-spacing: -.025em; }
.ab-bot { margin-top: 12rem; padding-bottom: 4rem; align-items: start; }
.ab-k { grid-column: 4 / 6; line-height: 1.2; } .ab-p { grid-column: 7 / 11; line-height: 1.25; }
@media (max-width: 767px) {
  .ab-pic { grid-column: 1 / 4; height: auto; grid-row: 2; margin-top: 3rem; } .ab-fig { position: static; }
  .ab-txt { grid-column: 1 / 7; } .ab-h { margin-top: 6rem; font-size: 3.7rem; line-height: 1.05; }
  .ab-bot { margin-top: 6rem; row-gap: 2rem; } .ab-k { grid-column: 1 / 7; } .ab-p { grid-column: 1 / 7; }
}

/* ---------- rooms: one large picture, two small, one wide tucked under them; each breathes on hover ---------- */
.rooms { padding: 16rem 0 22rem; }
.ro-head { align-items: end; }
.ro-h { grid-column: 1 / 9; font-size: 10rem; line-height: .9; font-weight: 500; letter-spacing: -.035em; margin-left: -.06em; }
.arrow { grid-column: 9 / 13; justify-self: end; display: inline-flex; gap: .8rem; align-items: center; font-size: 1.6rem; position: relative; }
.arrow::after { content: ''; width: 1.4rem; height: 1rem; background: currentColor; clip-path: polygon(0 45%, 70% 45%, 70% 0, 100% 50%, 70% 100%, 70% 55%, 0 55%); transition: transform .5s var(--soft); }
.arrow:hover::after { transform: translateX(.6rem); }
.ro-rule { height: 1px; margin: 3rem var(--m); background: rgba(21, 20, 18, .18); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--fast); }
.ro-rule.in, html:not(.js) .ro-rule { transform: none; }
.ro-grid { grid-template-columns: repeat(calc(var(--cols) * 2), 1fr); row-gap: 4rem; }
.card { display: block; }
.ca { grid-column: 1 / 15; grid-row: 1 / 3; } .cb { grid-column: 15 / 20; } .cc { grid-column: 20 / 25; } .cd { grid-column: 15 / 25; grid-row: 2; align-self: end; }
.fr { display: block; overflow: hidden; aspect-ratio: 1 / .8457; background: var(--stone-l); }
.cd .fr { aspect-ratio: 3 / 2; }
.par { display: block; height: 120%; margin-top: -10%; will-change: transform; }
.par img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--soft); }
.card:hover .par img, .card:focus-visible .par img { transform: scale(1.02); }
.cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.cap span + span { opacity: .45; }
@media (max-width: 767px) {
  .rooms { padding: 10rem 0 12rem; } .ro-h { grid-column: 1 / 7; font-size: 5.6rem; } .arrow { grid-column: 1 / 7; justify-self: start; margin-top: 2rem; }
  .ro-grid { grid-template-columns: 1fr; } .ca, .cb, .cc, .cd { grid-column: 1; grid-row: auto; } .cd .fr { aspect-ratio: 1 / .8457; }
}

/* ---------- the house: a small card grows to the whole screen, then the rooms step through it ---------- */
.vision { position: relative; height: 425vh; background: var(--g); }
.v-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.v-card { position: absolute; left: 50%; top: 50%; width: 22.5rem; height: 29.3rem; margin: -14.65rem 0 0 -11.25rem; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.v-img { position: absolute; inset: 0; will-change: transform; }
.v-img img { width: 100%; height: 100%; object-fit: cover; }
.v-card::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: var(--veil, 0); }
.v-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.v-gl.on { opacity: 1; }
.v-lab { position: absolute; left: var(--m); right: var(--m); top: 9rem; display: flex; align-items: center; font-size: 1.6rem; text-transform: uppercase; color: var(--lc, var(--ink)); }
.v-l, .v-r { flex: none; will-change: transform; }
.v-rule { flex: 1; height: 1px; margin: 0 2rem; background: currentColor; opacity: .32; transform: scaleX(0); }
.v-text { position: absolute; inset: 0; pointer-events: none; color: var(--g); }
.vision.dark-on .v-text { pointer-events: auto; }
.v-track-w { position: absolute; left: calc(var(--m) + 2 * var(--col)); right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; }
.v-track { display: flex; white-space: nowrap; transition: transform 1.2s var(--fast); }
.vt { flex: none; font-size: 6rem; line-height: 1.1; padding-right: calc(2 * var(--col)); opacity: .32; transform: translateY(110%); transition: opacity .35s cubic-bezier(.25, .46, .45, .9), transform 1.2s var(--out); }
.vt.on { opacity: 1; }
.vision.dark-on .vt { transform: none; } .vision.dark-on .vt:nth-child(2) { transition-delay: 0s, .1s; } .vision.dark-on .vt:nth-child(3) { transition-delay: 0s, .2s; }
.v-paras { position: absolute; left: calc(var(--m) + 7 * var(--col)); width: calc(4 * var(--col) - var(--gut)); top: calc(50% + 7rem); }
.vp { position: absolute; top: 0; left: 0; right: 0; font-size: 2.4rem; line-height: 1.2; opacity: 0; transition: opacity .25s; }
.vp.on { opacity: 1; transition: opacity .3s .15s; }
.vp .ln > span { transition-duration: 1.1s; }
@media (max-width: 767px) {
  .vt { font-size: 3.7rem; } .v-track-w { left: var(--m); } .v-paras { left: var(--m); width: calc(100vw - 2 * var(--m)); top: calc(50% + 5rem); }
  .v-lab { top: 8rem; }
}

/* ---------- in the house: a running sentence of places; the one you point at turns ink and shows its picture ---------- */
.method { position: relative; padding: 10rem 0; }
.me-g { row-gap: 10rem; }
.me-list { grid-column: 1 / 9; font-size: 4.8rem; line-height: 1.2; letter-spacing: -.02em; color: var(--stone); }
.st { color: var(--stone); transition: color .2s; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.st.on, .st:hover, .st:focus-visible { color: var(--ink); }
.st sup { font-size: .6em; vertical-align: .62em; line-height: 0; margin-left: .12em; }
.sl { color: var(--stone-l); }
.me-pics { grid-column: 10 / 13; grid-row: 1 / 3; position: relative; aspect-ratio: 343 / 458; align-self: start; overflow: hidden; background: var(--stone-l); }
.pp { position: absolute; inset: 0; opacity: 0; transition: opacity .24s var(--soft); }
.pp.on { opacity: 1; }
.pp img { width: 100%; height: 100%; object-fit: cover; }
.me-foot { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gut); align-items: start; }
.me-foot .lab { grid-column: 1 / 4; } .me-p { grid-column: 4 / 7; line-height: 1.25; }
@media (max-width: 767px) {
  .method { padding: 8rem 0; } .me-g { row-gap: 4rem; } .me-list { grid-column: 1 / 7; font-size: 3.2rem; }
  .me-pics { grid-column: 1 / 7; grid-row: auto; aspect-ratio: 1 / .72; } .me-foot { grid-column: 1 / 7; grid-template-columns: 1fr; row-gap: 1.6rem; } .me-foot .lab, .me-p { grid-column: 1; }
}

/* ---------- footer: the page lifts off a dark strip with the name ---------- */
.ft { position: relative; min-height: 68.3rem; padding: 10rem 0 var(--m); }
.ft-top { align-items: start; }
.ft-ask { grid-column: 1 / 6; font-size: 3.6rem; line-height: 1.1; }
.uline { position: relative; display: inline-block; }
.uline::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.05em; height: 1px; background: currentColor; transform-origin: 100% 50%; transition: transform .7s var(--soft); }
.uline:hover::after { transform: scaleX(0); }
.ft-nav { grid-column: 7 / 9; display: grid; gap: .4rem; } .ft-nav a { transition: color .3s; } .ft-nav a:hover { color: var(--stone); }
.ft-ad { grid-column: 10 / 13; display: grid; gap: .4rem; } .ft-ad div { display: flex; gap: 1.2rem; } .ft-ad dt { color: var(--stone); width: 1.2rem; }
@media (max-width: 767px) { .ft { padding-top: 6rem; min-height: 0; padding-bottom: 6rem; } .ft-top { row-gap: 4rem; } .ft-ask, .ft-nav, .ft-ad { grid-column: 1 / 7; } .ft-ask { font-size: 3rem; } }
.strip { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; height: 21.7rem; background: var(--ink); color: var(--g); overflow: hidden; }
.strip-in { position: absolute; inset: 0; padding: 0 var(--m) var(--m); display: flex; flex-direction: column; justify-content: flex-end; will-change: transform; }
.strip-wm { display: flex; justify-content: space-between; font-size: 14.2vw; font-weight: 600; line-height: .74; letter-spacing: -.04em; text-transform: uppercase; }
.strip-legal { display: flex; justify-content: space-between; margin-top: 2rem; font-size: 1.4rem; opacity: .52; }
@media (max-width: 767px) { .strip { height: 16rem; } }

/* ---------- page change: the old page shrinks and darkens, the next rises into an opening window ---------- */
.arrive-shade { position: fixed; inset: 0; z-index: 50; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .6s cubic-bezier(.25, .46, .45, .9) .14s; }
html.leave .arrive-shade { opacity: .9; }
html.leave .page { transform: translateY(2rem) scale(var(--sc, .972)); transform-origin: 50% 0; transition: transform 1.4s var(--fast); }
html.leave .hd { opacity: 0; transition: opacity .35s; }
html.arrive .page { transform: translateY(110vh); }
html.arrive.go .page { transform: none; clip-path: inset(0 0 0 0); transition: transform 1.35s var(--fast), clip-path 1.35s var(--fast); }
html.arrive .strip { visibility: hidden; }

/* ---------- the house page ---------- */
.hs { padding-top: 22rem; }
.hs-h { grid-column: 1 / 11; font-size: 10rem; line-height: .95; font-weight: 500; letter-spacing: -.035em; }
.hs-tags { margin-top: 4rem; row-gap: 1.2rem; }
.hs-tags div { grid-column: span 3; display: grid; gap: .4rem; } .hs-tags dt { color: var(--stone); }
.slit { margin: 6rem var(--m) 0; aspect-ratio: 3840 / 2380; overflow: hidden; clip-path: inset(0 36% 0 36%); will-change: clip-path; }
.slit-i { width: 100%; height: 100%; transform: scale(1.12); will-change: transform; }
.slit img { width: 100%; height: 100%; object-fit: cover; }
.det { position: relative; padding: 12rem 0; }
.det .lab { grid-column: 1 / 5; } .det-r { grid-column: 7 / 13; display: grid; gap: 6rem; }
.det-p { font-size: 2rem; line-height: 1.3; }
.det-rows { display: grid; gap: 2rem; }
.det-rows div { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gut); padding-top: 1rem; position: relative; }
.det-rows div::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--stone-l); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--fast); transition-delay: var(--d, 0s); }
.det-rows.in div::before, html:not(.js) .det-rows div::before { transform: none; }
.det-rows dt { grid-column: 1 / 3; color: var(--stone); } .det-rows dd { grid-column: 3 / 7; }
.pair { padding-top: 4rem; padding-bottom: 4rem; align-items: start; }
.pair-s { grid-column: 1 / 4; align-self: end; position: sticky; bottom: var(--m); }
.pair-s figure { aspect-ratio: 343 / 432; overflow: hidden; } .pair-b { grid-column: 7 / 13; } .pair-b figure { aspect-ratio: 695 / 848; overflow: hidden; }
.pair img, .sq3 img, .sq2 img { width: 100%; height: 100%; object-fit: cover; }
.txt { padding-top: 6rem; padding-bottom: 6rem; align-items: start; }
.txt .lab { grid-column: 1 / 5; } .txt-p { grid-column: 7 / 13; font-size: 2rem; line-height: 1.3; }
.gal { padding: 6rem 0 10rem; }
.g-frame { position: relative; margin: 4rem auto 0; width: min(calc(6 * var(--col) - var(--gut)), 68vh); aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-l); cursor: none; }
.g-it { position: absolute; inset: 0; opacity: 0; } .g-it.on { opacity: 1; }
.g-it img { width: 100%; height: 100%; object-fit: cover; }
.g-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .g-gl.on { opacity: 1; }
.g-prev, .g-next { position: absolute; top: 0; bottom: 0; width: 50%; cursor: none; } .g-prev { left: 0; } .g-next { right: 0; }
.g-cur { position: absolute; left: 0; top: 0; pointer-events: none; color: var(--g); font-size: 1.6rem; opacity: 0; transition: opacity .2s; will-change: transform; }
.g-frame:hover .g-cur { opacity: 1; }
.g-count { text-align: center; margin-top: 1.4rem; color: var(--stone); }
@media (hover: none) { .g-frame, .g-prev, .g-next { cursor: pointer; } .g-cur { display: none; } }
.quote { padding-top: 16rem; padding-bottom: 6rem; row-gap: 6rem; align-items: start; }
.q { grid-column: 1 / 10; font-size: 6rem; line-height: 1.05; letter-spacing: -.025em; }
.quote .lab { grid-column: 1 / 5; } .quote .txt-p { grid-column: 7 / 13; }
.wide { margin: 1rem var(--m); }
.wide img { width: 100%; }
.sq3 { margin-top: 1rem; row-gap: 1rem; } .sq3 figure { grid-column: span 4; aspect-ratio: 1; overflow: hidden; }
.sq2 { margin-top: 1rem; padding-bottom: 14rem; } .sq2 figure { grid-column: span 6; aspect-ratio: 1; overflow: hidden; }
@media (max-width: 767px) {
  .hs { padding-top: 14rem; } .hs-h { grid-column: 1 / 7; font-size: 5.6rem; } .hs-tags div { grid-column: span 3; }
  .slit { aspect-ratio: 1 / 1.1; }
  .det { padding: 8rem 0; } .det .lab, .det-r { grid-column: 1 / 7; } .det-r { margin-top: 3rem; gap: 4rem; }
  .pair-s { grid-column: 1 / 4; position: static; grid-row: 2; margin-top: 1rem; } .pair-b { grid-column: 1 / 7; }
  .txt .lab, .txt-p, .quote .lab, .quote .txt-p, .q { grid-column: 1 / 7; } .txt { row-gap: 2rem; } .q { font-size: 3.7rem; }
  .g-frame { width: calc(100vw - 2 * var(--m)); }
  .sq3 figure, .sq2 figure { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  .ln > span, .lab > span, .vt { transform: none !important; }
}

html.intro { overflow: hidden; }
.ab-h, .ro-h, .hs-h, .q, .vt, .ft-ask, .me-list, .mlist a { font-variation-settings: 'wght' var(--bw, 500); }
[data-lines] { text-wrap: pretty; }
@media (max-width: 767px) { .strip-wm { font-size: 17vw; } }