/* Adapted from the MIT-licensed 8B fashion template. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("assets/schibsted-grotesk.woff2") format("woff2")}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url("assets/host-grotesk.woff2") format("woff2")}

@layer tokens, base, atoms, layout, sections, scenes;


@layer tokens {
:root {
  --color-1: #ffffff;
  --color-2: #111111;
  --color-3: #767676;
  --color-4: #555555;
  --color-5: #e6e6e6;
  --color-6: #f2f2f2;
  --color-7: #a6a6a6;
  --color-8: #d92b1a;
  --color-9: #f2b705;
  --color-10: #1f4fd6;
  --color-11: #f4a3c4;
  --color-12: #a9d8ec;
  --font-1: "Schibsted Grotesk", "Schibsted Grotesk Fallback", Arial, sans-serif;
  --font-2: "Host Grotesk", "Host Grotesk Fallback", Arial, sans-serif;
  --radius-1: 14px;
  --radius-2: 999px;
  --shadow-1: 0 34px 60px -24px color-mix(in srgb, var(--color-2) 45%, transparent);
  --space-1: clamp(16px, 2.6vw, 34px);
}
}


@layer base {
@font-face { font-family: "Schibsted Grotesk Fallback"; src: local("Arial Black"), local("Arial-Black"), local("Arial Bold"); font-weight: 800 1000; size-adjust: 92.1%; ascent-override: 106.4%; descent-override: 28.2%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Grotesk Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 99.5%; ascent-override: 98.5%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Grotesk Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549; size-adjust: 98.3%; ascent-override: 99.7%; descent-override: 26.5%; line-gap-override: 0%; }
@font-face { font-family: "Host Grotesk Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549; size-adjust: 103.3%; ascent-override: 98.8%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: "Host Grotesk Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 97.1%; ascent-override: 105%; descent-override: 33%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-1); color: var(--color-2); font-family: var(--font-2); font-size: 15px; line-height: 1.55; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-2); outline-offset: 3px; }
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
}


@layer atoms {
.m-text { font-family: var(--font-2); font-size: 15px; font-weight: 400; line-height: 1.55; letter-spacing: normal; text-transform: none; font-style: normal; }
.m-text-2 { font-family: var(--font-1); font-size: 120px; font-weight: 900; line-height: .84; letter-spacing: -.035em; text-transform: uppercase; font-style: normal; }
.m-text-3 { font-family: var(--font-1); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; font-style: normal; }
.m-text-4 { font-family: var(--font-2); font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: .05em; text-transform: uppercase; font-style: normal; }
.m-text-5 { font-family: var(--font-2); font-size: 13px; font-weight: 400; line-height: 1.55; letter-spacing: normal; text-transform: none; font-style: normal; color: var(--color-4); }
.m-text-6 { font-family: var(--font-1); font-size: 72px; font-weight: 500; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; font-style: normal; }
.m-text-7 { font-family: var(--font-1); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; text-transform: none; font-style: normal; }
.m-text-8 { font-family: var(--font-2); font-size: 13px; font-weight: 400; line-height: 1.55; letter-spacing: normal; text-transform: none; font-style: normal; color: var(--color-7); }

.m-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 1.5px solid var(--color-2); border-radius: var(--radius-2); background: transparent; color: var(--color-1); font-family: var(--font-2); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer; isolation: isolate; overflow: hidden; }
.m-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-2); clip-path: inset(0 0 0 0); transition: clip-path .45s cubic-bezier(.7, 0, .2, 1); }
.m-btn__label { position: relative; transition: color .3s ease .05s; }
.m-btn-2 { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1.5px solid var(--color-1); border-radius: var(--radius-2); background: transparent; color: var(--color-2); font-family: var(--font-2); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer; isolation: isolate; overflow: hidden; }
.m-btn-2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-1); clip-path: inset(0 0 0 0); transition: clip-path .45s cubic-bezier(.7, 0, .2, 1); }
.m-btn-2__label { position: relative; transition: color .3s ease .05s; }
.m-btn-2:focus-visible { outline-color: var(--color-1); }
@media (hover: hover) {
  .m-btn:hover::before, .m-btn-2:hover::before { clip-path: inset(0 0 0 100%); }
  .m-btn:hover .m-btn__label { color: var(--color-2); }
  .m-btn-2:hover .m-btn-2__label { color: var(--color-1); }
}
.m-link { position: relative; display: inline-block; font-family: var(--font-2); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: normal; text-transform: none; font-style: normal; padding: 2px 4px; margin: -2px -4px; }
.m-link::after { content: ""; position: absolute; inset: 0; background: var(--color-1); mix-blend-mode: difference; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.7, 0, .2, 1); pointer-events: none; }
@media (hover: hover) {
  .m-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}
.m-link-2 { position: relative; display: inline-block; font-family: var(--font-1); font-size: 72px; font-weight: 500; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; font-style: normal; padding: 0 .08em; margin: 0 -.08em; }
.m-link-2::after { content: ""; position: absolute; inset: 0; background: var(--color-1); mix-blend-mode: difference; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s cubic-bezier(.7, 0, .2, 1); pointer-events: none; }
@media (hover: hover) {
  .m-link-2:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}
.m-icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-2); background: var(--color-6); color: var(--color-2); cursor: pointer; isolation: isolate; }
.m-icon::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-2); transform: scale(0); transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.m-icon svg { width: 18px; height: 18px; transition: color .3s ease; }
@media (hover: hover) {
  .m-icon:hover::before { transform: scale(1); }
  .m-icon:hover { color: var(--color-1); }
}
.m-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: var(--radius-2); background: var(--color-2); color: var(--color-1); font-family: var(--font-2); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .02em; text-transform: none; font-style: normal; }
.m-photo { position: relative; overflow: hidden; background: var(--color-6); box-shadow: var(--shadow-1); }
.m-photo > img { width: 100%; height: 100%; object-fit: cover; }
.m-field { display: grid; gap: 6px; }
.m-field__label { font-family: var(--font-2); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; }
.m-field__input { width: 100%; min-height: 46px; padding: 10px 0; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; background: transparent; font-family: var(--font-2); font-size: 16px; line-height: 1.4; }
.m-field__input:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
textarea.m-field__input { resize: vertical; min-height: 92px; }
}


@layer layout {
.l-wrap { padding-inline: var(--space-1); }
}


@layer sections {
#nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--color-1); border-bottom: 1px solid var(--color-5); transition: transform .45s cubic-bezier(.6, 0, .2, 1); }
#nav.is-hidden { transform: translateY(-100%); }
#nav .nav__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
#nav .nav__logo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-family: var(--font-1); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
#nav .nav__logo svg { width: 30px; height: 22px; }
#nav .nav__links { display: flex; gap: 34px; }
#nav .nav__tools { display: flex; gap: 8px; justify-self: end; align-items: center; }
#nav .nav__count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-2); background: var(--color-2); color: var(--color-1); font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; }
#nav .nav__menu { display: none; }
#nav .nav__sheet { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; justify-content: space-between; padding: 88px var(--space-1) 32px; background: var(--color-2); color: var(--color-1); }
#nav .nav__sheet.is-open { display: flex; }
#nav .nav__sheet ul { display: grid; gap: 14px; }
#nav .nav__sheet .m-link-2 { font-size: 13vw; }
#nav .nav__close { position: absolute; top: 14px; right: var(--space-1); }
@media (max-width: 760px) {
  #nav .nav__bar { height: 64px; grid-template-columns: 1fr auto; }
  #nav .nav__bar > nav { display: none; }
  #nav .nav__menu { display: inline-grid; }
}
}


@layer sections {
#opening { position: relative; overflow-x: clip; isolation: isolate; }
#opening .hero { position: relative; height: 100svh; min-height: 620px; padding-top: 72px; }
#opening .hero__stage { position: relative; height: 100%; container-type: size; --ph: 91cqh; --pt: 3cqh; --pw: calc(var(--ph) * 2 / 3); --pl: calc(50cqw - var(--pw) / 2); }
#opening .hero__grid { position: absolute; inset: 0; pointer-events: none; }
#opening .hero__grid i { position: absolute; background: var(--color-5); }
#opening .hero__grid i:nth-child(1) { left: var(--space-1); right: var(--space-1); top: 30cqh; height: 1px; }
#opening .hero__grid i:nth-child(2) { left: 74cqw; top: 30cqh; bottom: 0; width: 1px; }
#opening .hero__grid i:nth-child(3) { left: var(--space-1); right: var(--space-1); top: 75cqh; height: 1px; }
#opening .hero__grid i:nth-child(4) { left: 23cqw; top: 0; height: 30cqh; width: 1px; }
#opening .hero__intro { position: absolute; left: var(--space-1); top: 4cqh; display: grid; gap: 14px; max-width: 200px; }
#opening .hero__thumb { width: 84px; height: 84px; border-radius: var(--radius-1); overflow: hidden; background: var(--color-6); }
#opening .hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
#opening .hero__intro .m-text-4 { font-size: 14px; line-height: 1.5; }
#opening .hero__aside { position: absolute; z-index: 5; right: var(--space-1); top: 6cqh; width: min(300px, 26cqw); display: grid; gap: 18px; justify-items: start; }
#opening .hero__kicker { position: absolute; left: 13cqw; bottom: calc(8cqh + var(--title) * 2 * .84 + 10px); z-index: 1; }
#opening .hero__corner { position: absolute; bottom: 4cqh; z-index: 1; }
#opening .hero__corner--l { left: var(--space-1); }
#opening .hero__corner--r { right: var(--space-1); text-align: right; }
#opening .hero__stage { --title: min(26cqh, calc(80cqw / (8 * .64))); }
#opening .hero__type { position: absolute; left: 0; right: 0; bottom: 8cqh; text-align: center; }
#opening .hero__title { display: block; }
#opening .hero__line { display: block; width: fit-content; margin-inline: auto; white-space: nowrap; font-size: min(26cqh, calc(80cqw / (var(--len) * .64))); }
#opening .hero__line[data-line="2"] { font-size: min(26cqh, calc(60cqw / (var(--len) * .64))); }
#opening .hero__type--fill { z-index: 1; }
#opening .hero__panel { position: absolute; z-index: 3; left: var(--pl); top: var(--pt); width: var(--pw); height: var(--ph); margin: 0; pointer-events: none; }
#opening .hero__shade { position: absolute; inset: 0; box-shadow: var(--shadow-1); opacity: 0; }
#opening .hero__frame { position: absolute; inset: 0; overflow: hidden; background: var(--color-6); }
#opening .hero__img { width: 100%; height: 100%; object-fit: cover; scale: 1.14; }
#opening .hero__ghost { position: absolute; inset: 0; z-index: 4; pointer-events: none; clip-path: polygon(var(--pl) var(--pt), calc(var(--pl) + var(--pw)) var(--pt), calc(var(--pl) + var(--pw)) calc(var(--pt) + var(--ph)), var(--pl) calc(var(--pt) + var(--ph))); }
#opening .hero__ghost .hero__line { color: transparent; -webkit-text-stroke: 2px var(--color-1); }

#opening .about { position: relative; min-height: 100svh; padding: 12svh var(--space-1) 8svh; display: grid; grid-template-rows: auto 1fr auto; }
#opening .about__frame { position: absolute; left: var(--space-1); top: 10svh; width: 30%; height: 36svh; border: 1px solid var(--color-5); border-right: 0; pointer-events: none; }
#opening .about__statement { justify-self: end; max-width: 860px; text-align: right; font-size: clamp(24px, 3.3vw, 46px); --fill-from: var(--color-3); }
#opening .about__middle { position: relative; display: grid; align-items: center; min-height: 440px; }
#opening .about__row { position: relative; overflow: hidden; margin-inline: calc(var(--space-1) * -1); padding-block: .04em; }
#opening .about__track { display: block; white-space: nowrap; text-align: center; color: var(--color-3); font-weight: 800; font-size: calc(96vw / (var(--len) * .58)); line-height: .9; }
#opening .about__lens { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; pointer-events: none; clip-path: polygon(0 0, 0 0, 0 0); }
#opening .about__lens .about__track { color: transparent; -webkit-text-stroke: 2px var(--color-1); }
#opening .about__stack { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(300px, 36vw); aspect-ratio: 4 / 5; translate: -50% -50%; }
#opening .about__card { position: absolute; inset: 0; }
#opening .about__card--back { rotate: -2deg; translate: -14% 6%; }
#opening .about__card--front { rotate: 8deg; translate: 12% -4%; }
#opening .about__note { max-width: 280px; }
@media (max-width: 760px) {
  #opening .hero { padding-top: 64px; }
  #opening .hero__stage { --ph: 46cqh; --pt: 26cqh; }
  #opening .hero__grid i:nth-child(2), #opening .hero__grid i:nth-child(4) { display: none; }
  #opening .hero__grid i:nth-child(1) { top: 18cqh; }
  #opening .hero__grid i:nth-child(3) { top: 72cqh; }
  #opening .hero__intro { top: 3cqh; grid-template-columns: 56px 1fr; align-items: center; max-width: none; right: var(--space-1); }
  #opening .hero__thumb { width: 56px; height: 56px; }
  #opening .hero__intro .m-text-4 { font-size: 12px; }
  #opening .hero__type { bottom: 30cqh; }
  #opening .hero__stage { --title: calc(92cqw / (8 * .64)); }
  #opening .hero__line { font-size: calc(92cqw / (var(--len) * .64)); }
  #opening .hero__line[data-line="2"] { font-size: calc(69cqw / (var(--len) * .64)); }
  #opening .hero__kicker { left: var(--space-1); bottom: calc(30cqh - 40px); }
  #opening .hero__aside { top: auto; bottom: 7cqh; left: var(--space-1); right: var(--space-1); width: auto; grid-template-columns: 1fr auto; align-items: end; gap: 14px; }
  #opening .hero__corner { display: none; }
  #opening .about { padding-top: 10svh; }
  #opening .about__frame { display: none; }
  #opening .about__statement { font-size: clamp(22px, 6.4vw, 30px); }
  #opening .about__middle { min-height: 380px; }
  #opening .about__stack { width: 44vw; }
}
@media (prefers-reduced-motion: no-preference) {
  #opening .hero__rise { display: block; animation: hero-rise .95s cubic-bezier(.2, .7, .1, 1) backwards; }
  #opening .hero__img { animation: hero-settle 1.1s cubic-bezier(.2, .7, .1, 1) backwards, hero-pan-in 2.75s ease-in-out 1.1s, hero-pan 5.5s ease-in-out 3.85s infinite alternate; }
  #opening .hero__intro, #opening .hero__aside, #opening .hero__corner, #opening .hero__kicker { animation: hero-side .8s cubic-bezier(.2, .7, .1, 1) .15s backwards; }
  #opening .hero__thumb { animation: hero-sway-in 2s ease-in-out 1s, hero-sway 4s ease-in-out 3s infinite alternate; }
  #opening .hero__img[data-playing="false"], #opening .hero__thumb[data-playing="false"] { animation-play-state: paused; }
}
@keyframes hero-rise { from { translate: 0 18%; } }
@keyframes hero-settle { from { scale: 1.3; } }
@keyframes hero-pan-in { to { translate: 0 -4.5%; } }
@keyframes hero-pan { from { translate: 0 -4.5%; } to { translate: 0 4.5%; } }
@keyframes hero-side { from { translate: 0 24px; opacity: 0; } }
@keyframes hero-sway-in { to { rotate: -7deg; translate: -4px 0; } }
@keyframes hero-sway { from { rotate: -7deg; translate: -4px 0; } to { rotate: 7deg; translate: 6px 6px; } }
}


@layer sections {
#collections { position: relative; background: var(--color-2); color: var(--color-1); padding: 120px var(--space-1) 110px; overflow-x: clip; }
#collections .col__head { display: grid; grid-template-columns: 1fr minmax(0, 860px); align-items: end; gap: 32px; }
#collections .col__cap { color: var(--color-7); }
#collections .col__statement { text-align: right; font-size: clamp(24px, 3.2vw, 44px); --fill-from: var(--color-3); }
#collections .col__stage { position: relative; margin-top: 120px; }
#collections .col__word { position: relative; z-index: 0; display: block; text-align: center; white-space: nowrap; font-size: calc((100vw - var(--space-1) * 2) / (var(--len) * .7)); line-height: .78; background: linear-gradient(180deg, var(--color-3) 10%, color-mix(in srgb, var(--color-3) 0%, transparent) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#collections .col__looks { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: -6vw; }
#collections .col__look { display: grid; gap: 14px; align-content: start; }
#collections .col__photo { aspect-ratio: 4 / 5; }
#collections .col__meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
#collections .col__meta .m-text-8 { font-size: 14px; color: var(--color-1); white-space: nowrap; }
#collections .col__add { justify-self: start; }
@media (max-width: 760px) {
  #collections { padding-block: 84px 80px; }
  #collections .col__head { grid-template-columns: 1fr; gap: 20px; }
  #collections .col__statement { text-align: left; font-size: clamp(22px, 6.2vw, 30px); }
  #collections .col__stage { margin-top: 64px; }
  #collections .col__looks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-top: -8vw; }
  #collections .col__meta { flex-direction: column; gap: 2px; }
}
}


@layer sections {
#index { position: relative; padding: 130px var(--space-1) 140px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; overflow-x: clip; }
#index .idx__side { display: grid; gap: 14px; align-content: start; justify-items: start; padding-top: 18px; }
#index .idx__body { position: relative; }
#index .idx__rows { position: relative; display: grid; gap: 6px; }
#index .idx__row { position: relative; z-index: 1; }
#index .idx__row:nth-child(4n+1) { padding-left: 26%; }
#index .idx__row:nth-child(4n+2) { padding-left: 2%; }
#index .idx__row:nth-child(4n+3) { padding-left: 14%; }
#index .idx__row:nth-child(4n+4) { padding-left: 6%; }
#index .idx__link { font-size: clamp(40px, 6.2vw, 92px); color: var(--color-3); transition: color .35s ease; }
#index .idx__row.is-active .idx__link { color: var(--color-2); }
#index .idx__count { margin-left: 10px; vertical-align: top; }
#index .idx__preview { position: absolute; z-index: 2; right: 1%; top: -12px; width: clamp(150px, 19vw, 270px); aspect-ratio: 4 / 5; rotate: 8deg; pointer-events: none; }
#index .idx__shot { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
#index .idx__shot:first-child { clip-path: inset(0 0 0 0); }
@media (max-width: 760px) {
  #index { grid-template-columns: 1fr; padding-block: 90px 100px; }
  #index .idx__side { grid-auto-flow: column; justify-content: space-between; align-items: center; padding-top: 0; }
  #index .idx__row:nth-child(n) { padding-left: 0; }
  #index .idx__link { font-size: 9vw; }
  #index .idx__preview { right: 0; width: 29vw; }
}
}


@layer sections {
#voice { position: relative; padding: 110px var(--space-1) 120px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; background: linear-gradient(90deg, var(--color-6), var(--color-1) 60%); }
#voice .voice__media { position: relative; justify-self: end; width: min(100%, 440px); }
#voice .voice__photo { aspect-ratio: 1; box-shadow: none; }
#voice .voice__burst { position: absolute; right: -26px; top: -26px; width: 64px; height: 64px; color: var(--color-3); }
#voice .voice__quote { display: grid; gap: 22px; max-width: 560px; }
#voice .voice__quote .m-text-7 { font-size: clamp(24px, 2.4vw, 34px); --fill-from: var(--color-3); }
#voice .voice__who { color: var(--color-4); }
@media (prefers-reduced-motion: no-preference) {
  #voice .voice__burst { animation: voice-spin 16s linear infinite; }
  #voice .voice__burst[data-playing="false"] { animation-play-state: paused; }
}
@keyframes voice-spin { to { rotate: 360deg; } }
@media (max-width: 760px) {
  #voice { grid-template-columns: 1fr; padding-block: 80px 90px; background: var(--color-1); }
  #voice .voice__media { justify-self: start; width: 78%; }
}
}


@layer sections {
#arrivals { position: relative; padding: 40px 0 120px; overflow-x: clip; }
#arrivals .arr__stage { position: relative; }
#arrivals .arr__photo { position: relative; height: min(88svh, 62vw); min-height: 420px; overflow: hidden; background: var(--color-10); }
#arrivals .arr__photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#arrivals .arr__strip { position: absolute; top: 0; bottom: 0; overflow: hidden; }
#arrivals .arr__strip img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
#arrivals .arr__shop { position: absolute; z-index: 4; left: 50%; top: 40%; width: 92px; height: 92px; translate: -50% -50%; background: var(--color-1); }
#arrivals .arr__shop svg { width: 28px; height: 28px; }
#arrivals .arr__photo::after { content: ""; position: absolute; inset: 40% 0 0 0; z-index: 2; background: linear-gradient(180deg, color-mix(in srgb, var(--color-2) 0%, transparent), color-mix(in srgb, var(--color-2) 78%, transparent) 78%); pointer-events: none; }
#arrivals .arr__strip { z-index: 1; }
#arrivals .arr__title { position: absolute; z-index: 3; left: var(--space-1); right: var(--space-1); bottom: .08em; display: block; white-space: nowrap; color: var(--color-1); font-size: calc((100vw - var(--space-1) * 2) / (var(--len) * .66)); -webkit-text-stroke: 2px var(--color-1); pointer-events: none; }
#arrivals .arr__foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 36px var(--space-1) 0; }
#arrivals .arr__foot .m-text-5 { max-width: 360px; }
@media (max-width: 760px) {
  #arrivals { padding-bottom: 90px; }
  #arrivals .arr__photo { height: 72svh; min-height: 380px; }
  #arrivals .arr__photo > img, #arrivals .arr__strip img { object-position: 38% 30%; }
  #arrivals .arr__shop { width: 76px; height: 76px; }
  #arrivals .arr__title { -webkit-text-stroke-width: 1.5px; }
  #arrivals .arr__foot { flex-direction: column; align-items: start; }
}
}


@layer sections {
#palette { position: relative; padding-top: 120px; }
#palette .pal__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; align-items: end; padding: 0 var(--space-1) 56px; }
#palette .pal__head .m-text-3 { font-size: clamp(26px, 3.6vw, 52px); max-width: 760px; }
#palette .pal__band { position: relative; min-height: max(70svh, 440px); padding: 28px var(--space-1) 36px; display: grid; grid-template-columns: 1fr minmax(0, 320px); grid-template-rows: auto 1fr auto; gap: 16px 32px; transform-origin: 50% 0%; }
#palette .pal__band:nth-child(5n+1) { background: var(--color-8); color: var(--color-1); }
#palette .pal__band:nth-child(5n+2) { background: var(--color-9); color: var(--color-2); }
#palette .pal__band:nth-child(5n+3) { background: var(--color-10); color: var(--color-1); }
#palette .pal__band:nth-child(5n+4) { background: var(--color-11); color: var(--color-2); }
#palette .pal__band:nth-child(5n+5) { background: var(--color-12); color: var(--color-2); }
#palette .pal__tag { grid-column: 1 / -1; }
#palette .pal__name { grid-column: 1; grid-row: 3; align-self: end; font-size: clamp(56px, 13vw, 200px); font-weight: 800; line-height: .82; }
#palette .pal__use { grid-column: 2; grid-row: 3; align-self: end; }
@media (max-width: 760px) {
  #palette { padding-top: 56px; }
  #palette .pal__head { grid-template-columns: 1fr; gap: 16px; padding-bottom: 40px; }
  #palette .pal__band { min-height: max(62svh, 400px); grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  #palette .pal__name { grid-row: 3; font-size: 17vw; }
  #palette .pal__use { grid-column: 1; grid-row: 4; }
}
}


@layer sections {
#studio { position: relative; padding: 140px var(--space-1) 130px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
#studio .studio__photo { aspect-ratio: 5 / 4; rotate: -2deg; }
#studio .studio__text { display: grid; gap: 26px; padding-top: 24px; }
#studio .studio__title { font-size: clamp(26px, 2.7vw, 40px); --fill-from: var(--color-3); }
#studio .studio__facts { display: grid; gap: 0; margin-top: 10px; }
#studio .studio__fact { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 18px 0; }
#studio .studio__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-5); }
@media (max-width: 760px) {
  #studio { grid-template-columns: 1fr; padding-block: 90px; }
  #studio .studio__fact { grid-template-columns: 1fr; gap: 6px; }
}
}


@layer sections {
#notebook { position: relative; min-height: 118svh; padding: 140px var(--space-1); display: grid; place-content: center; justify-items: center; gap: 28px; overflow-x: clip; }
#notebook .nb__title { position: relative; z-index: 2; text-align: center; }
#notebook .nb__line { display: block; white-space: nowrap; font-size: min(150px, calc(56vw / (var(--len) * .64))); line-height: .9; }
#notebook .nb__note { position: relative; z-index: 2; max-width: 340px; text-align: center; }
#notebook .nb__shots { position: absolute; inset: 0; pointer-events: none; }
#notebook .nb__shot { position: absolute; width: clamp(140px, 16vw, 236px); }
#notebook .nb__shot .m-photo { aspect-ratio: 1; box-shadow: none; }
#notebook .nb__shot:nth-child(6n+1) { left: 9%; top: 12%; }
#notebook .nb__shot:nth-child(6n+2) { right: 7%; top: 8%; width: clamp(120px, 13vw, 196px); }
#notebook .nb__shot:nth-child(6n+3) { left: 3%; top: 56%; width: clamp(110px, 12vw, 180px); }
#notebook .nb__shot:nth-child(6n+4) { right: 14%; top: 62%; }
#notebook .nb__shot:nth-child(6n+5) { left: 25%; bottom: 2%; width: clamp(100px, 10vw, 150px); }
#notebook .nb__shot:nth-child(6n+6) { right: 31%; top: 2%; width: clamp(100px, 10vw, 150px); }
@media (max-width: 760px) {
  #notebook { min-height: 0; padding-block: 90px 100px; place-content: start stretch; }
  #notebook .nb__line { font-size: calc(90vw / (var(--len) * .64)); }
  #notebook .nb__shots { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; width: 100%; }
  #notebook .nb__shot:nth-child(n) { position: relative; inset: auto; width: auto; }
  #notebook .nb__shot:nth-child(3n+2) { translate: 0 22px; }
}
}


@layer sections {
#faq { padding: 120px var(--space-1); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); background: var(--color-6); }
#faq .faq__side { display: grid; gap: 18px; align-content: start; justify-items: start; }
#faq .faq__list { display: grid; }
#faq .faq__item { position: relative; }
#faq .faq__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-3); }
#faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--font-1); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.3; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: rotate .35s ease; }
#faq details[open] summary::after { rotate: 45deg; }
#faq .faq__answer { padding: 0 0 24px; max-width: 620px; color: var(--color-4); }
@media (max-width: 760px) {
  #faq { grid-template-columns: 1fr; padding-block: 84px; }
}
}


@layer sections {
#contact { position: relative; padding: 130px var(--space-1) 140px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
#contact .ct__title { grid-column: 1 / -1; font-size: clamp(26px, 3.4vw, 48px); max-width: 860px; }
#contact .ct__stores { position: relative; display: grid; }
#contact .ct__store { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 6px 24px; align-items: end; padding: 22px 0 24px; border-top: 1px solid var(--color-5); }
#contact .ct__city { font-size: clamp(44px, 7vw, 104px); }
#contact .ct__addr { grid-column: 2; grid-row: 1; }
#contact .ct__store .m-link { grid-column: 2; }
#contact .ct__bar { position: absolute; left: calc(var(--space-1) * -1); right: 0; top: 0; z-index: 0; background: var(--color-2); pointer-events: none; }
#contact .ct__store > * { position: relative; z-index: 1; transition: color .25s ease; }
#contact .ct__store.is-lit { color: var(--color-1); }
#contact .ct__store.is-lit .ct__addr { color: var(--color-7); }
#contact .ct__store .m-link:focus-visible { outline-color: var(--color-3); }
#contact .ct__form { display: grid; gap: 22px; padding-top: 22px; }
#contact .ct__form .m-btn { justify-self: start; margin-top: 6px; }
#contact .ct__status { min-height: 1.5em; }
@media (max-width: 760px) {
  #contact { grid-template-columns: 1fr; padding-block: 90px 100px; }
  #contact .ct__store { grid-template-columns: 1fr; }
  #contact .ct__addr, #contact .ct__store .m-link { grid-column: 1; grid-row: auto; }
  #contact .ct__city { font-size: 15vw; }
}
}


@layer sections {
#footer { position: relative; background: var(--color-2); color: var(--color-1); padding: 90px var(--space-1) 28px; overflow-x: clip; }
#footer .ft__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); padding-bottom: 64px; }
#footer .ft__news { display: grid; gap: 22px; align-content: start; max-width: 460px; }
#footer .ft__row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
#footer .ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#footer .ft__cols ul { display: grid; gap: 12px; align-content: start; }
#footer .m-link:focus-visible, #footer .m-field__input:focus-visible { outline-color: var(--color-1); }
#footer .ft__rule { display: block; height: 1px; background: var(--color-3); }
#footer .ft__mark { display: block; margin-top: 28px; text-align: center; white-space: nowrap; font-size: calc((100vw - var(--space-1) * 2) / (var(--len) * .7)); line-height: .8; }
#footer .ft__legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; }
@media (max-width: 760px) {
  #footer { padding-top: 72px; }
  #footer .ft__top { grid-template-columns: 1fr; gap: 48px; padding-bottom: 48px; }
  #footer .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #footer .ft__legal { flex-direction: column; gap: 4px; }
}
}


@layer scenes {
@media (prefers-reduced-motion: no-preference) {
  #arrivals .arr__photo.is-cut > img { visibility: hidden; }
}
}


@layer scenes {
@media (prefers-reduced-motion: no-preference) {
  #palette.is-stacking .pal__band { position: sticky; top: 0; }
}
}