/* Bruno Zabala, round 2 rebuild of the Gradogna layout. Clean-room; all values measured from captures at 1440x900 and 390x844.
   1rem = 12px at 1440 wide (desktop), 12.19px at 390 wide (phone). */

@font-face { font-family: "Grotesk"; src: url("fonts/InterTight-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Flare"; src: url("fonts/Marcellus-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --black: #000;
  --ink: #0d0d0d;          /* loader fill, project view */
  --line: #1b1b1b;         /* rules on black */
  --text: #e0dfdf;         /* light text */
  --mute: #5e5d5d;         /* grey labels */
  --half: rgba(255,255,255,.5);
  --dark-half: rgba(0,0,0,.5);
  --paper: #fff;
  --ph-dark: #1d1d1d;      /* photo placeholder on dark */
  --ph-dark-text: #6d6d6d;
  --ph-light: #e4e4e2;     /* photo placeholder on light */
  --ph-light-text: #8b8b88;
  --side-line: #e0e0e0;
  --ease: cubic-bezier(.77, 0, .175, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sans: "Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Flare", "Times New Roman", serif;
}

html { font-size: calc(100vw / 120); -webkit-text-size-adjust: 100%; }
@media (max-width: 767px) { html { font-size: calc(100vw / 32); } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--black); color: var(--text); font-family: var(--sans); font-size: 1rem; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
: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; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body.is-loading { overflow: hidden; }

/* ---------- photo placeholder: flat neutral box in the reference's frame ---------- */
.ph { position: relative; overflow: hidden; width: 100%; height: 100%; background: var(--ph-dark); color: var(--ph-dark-text); }
.ph--light { background: var(--ph-light); color: var(--ph-light-text); }
.ph--deep { background: #262626; color: #5a5a5a; }
.ph__t { position: absolute; left: .8333rem; bottom: .75rem; right: .8333rem; font-size: .8333rem; line-height: 1.2; letter-spacing: 0; text-transform: none; font-family: var(--sans); font-style: normal; text-align: left; pointer-events: none; }
.ph__t b { display: block; font-weight: 400; font-size: .6667rem; text-transform: uppercase; opacity: .8; margin-top: .25rem; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: #010101; color: var(--text); pointer-events: none; }
.loader__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; max-width: 73.3333rem; background: var(--ink); }
.loader__label { position: absolute; top: 1.8333rem; left: 79.5833rem; transform: translateX(-50%); font-size: 1.1667rem; color: #fff; }
.loader__count { position: absolute; left: 1.5rem; bottom: 2.6667rem; font-size: 12.6667rem; line-height: .8; letter-spacing: -.04em; font-weight: 400; }
.loader.is-out { transition: opacity .01s linear 1.5s; opacity: 0; }
.loader.is-out .loader__fill { transition: transform 1.1s var(--ease); transform: translateY(-100%); width: 73.3333rem; }
.loader.is-out .loader__label, .loader.is-out .loader__count { transition: opacity .3s; opacity: 0; }
.loader.is-out { background: transparent; }

/* ---------- bar (logo + burger) ---------- */
.bar { position: fixed; z-index: 40; top: 0; left: 0; width: 73.3333rem; height: 4rem; pointer-events: none; mix-blend-mode: difference; }
.bar__logo { position: absolute; left: 1.6667rem; top: 1.1667rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: #fff; pointer-events: auto; letter-spacing: -.02em; font-weight: 700; -webkit-text-stroke: .04em #fff; }
.bar__burger { position: absolute; left: 69.1667rem; top: 1.5rem; width: 2.3333rem; height: 1.25rem; pointer-events: auto; }
.bar__burger span { position: absolute; left: 0; right: 0; height: 1px; background: #fff; transition: transform .5s var(--ease-out); }
.bar__burger span:first-child { top: .1667rem; }
.bar__burger span:last-child { top: .75rem; }
.bar__burger:hover span:first-child { transform: scaleX(.6); transform-origin: right; }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--black); color: var(--text); visibility: hidden; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease), visibility 0s linear .9s; overflow-y: auto; }
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease); }
.menu__head { position: relative; height: 3.9167rem; border-bottom: 1px solid var(--line); }
.menu__logo { position: absolute; left: 1.6667rem; top: 1.1667rem; font-family: var(--serif); font-size: 1.5rem; color: #fff; font-weight: 700; -webkit-text-stroke: .04em #fff; }
.menu__close { position: absolute; right: 1.6667rem; top: 1.0833rem; width: 1.75rem; height: 1.75rem; }
.menu__close span { position: absolute; left: -.2rem; right: -.2rem; top: 50%; height: 1px; background: #fff; transform: rotate(45deg); }
.menu__close span + span { transform: rotate(-45deg); }
.menu__body { position: relative; min-height: calc(100vh - 3.9167rem); padding: 0 4.5rem; }
.menu__item { display: block; position: relative; border-bottom: 1px solid var(--line); padding: 2rem 0 3.6667rem; }
.menu__item:first-child { padding-top: 3.6667rem; }
.menu__big { font-size: 6.5rem; line-height: .95; letter-spacing: -.04em; display: block; }
.menu__line { display: flex; align-items: center; gap: 1.6667rem; }
.menu__img { width: 8.6667rem; height: 5.3333rem; flex: none; transform: translateY(.25rem); }
.menu__img .ph__t { display: none; }
.menu__num { display: inline-block; align-self: flex-start; margin-left: .6667rem; font-size: 1rem; line-height: 1; color: var(--half); letter-spacing: 0; transform: translateY(.4rem); }
.menu__arrow { position: absolute; right: 0; bottom: 3.6667rem; width: 2.3333rem; }
.menu__item:hover .menu__arrow { transform: translateX(.5rem); }
.menu__arrow, .arrow { transition: transform .5s var(--ease-out); }
.menu__lists { position: absolute; left: 4.5rem; right: 4.5rem; bottom: 4rem; display: flex; align-items: flex-start; gap: 0; }
.menu__col { width: 17.8333rem; }
.menu__col h3 { font-size: 1rem; font-weight: 400; text-transform: uppercase; color: var(--text); margin-bottom: 1rem; }
.menu__col li { margin-bottom: 1rem; }
.menu__col li:last-child { margin-bottom: 0; }
.menu__col a, .menu__col button { font-size: 1rem; color: var(--half); transition: color .3s; text-align: left; }
.menu__col a:hover, .menu__col button:hover { color: #fff; }
.menu__social { margin-left: auto; align-self: flex-end; display: flex; gap: 1rem; font-size: 1rem; color: var(--half); }
.menu__social a:hover { color: #fff; }

/* arrow glyph (drawn line + head) */
.arrow { display: inline-block; width: 2.3333rem; height: .6667rem; position: relative; }
.arrow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: .4167rem; height: .4167rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translate(0, -50%) rotate(45deg); transform-origin: center; }

/* ---------- loop container (desktop endless page) ---------- */
.loop { position: relative; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; overflow: hidden; z-index: 1; background: var(--black); }
.hero__move { position: absolute; inset: 0; will-change: transform; }
.hero__left { position: absolute; left: 0; top: 0; bottom: 0; width: 73.3333rem; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg .ph__t { left: auto; right: auto; left: 1.6667rem; bottom: auto; top: 4.5rem; }
.hero__detail .ph { background: #161616; }
.hero__detail { position: absolute; left: 39rem; top: calc(50% + 10.6667rem); width: 34.3333rem; bottom: 0; }
.hero__shade { position: absolute; left: 39rem; top: 0; width: 34.3333rem; height: calc(50% + 10.6667rem); background: rgba(255,255,255,.04); pointer-events: none; }
.hero__card { position: absolute; left: 19.5rem; top: 50%; width: 34.3333rem; height: 40.6667rem; margin-top: -20.3333rem; background: var(--paper); color: #000; padding: 1.3333rem; }
.hero__card-top { display: flex; justify-content: space-between; color: var(--dark-half); font-size: 1rem; }
.hero__card-bottom { position: absolute; left: 1.3333rem; right: 1.3333rem; bottom: 1.5rem; }
.hero__kicker { color: var(--dark-half); font-size: 1rem; margin-bottom: .5rem; }
.hero__title { font-size: 3.6667rem; font-weight: 400; line-height: .9; letter-spacing: -.05em; color: #000; }
.hero__mark { position: absolute; left: 27.1667rem; top: .8333rem; font-size: 1rem; }
.hero__sub { position: absolute; left: 0; width: 73.3333rem; bottom: 3.75rem; text-align: center; color: #fff; }
.hero__sub p:first-child { margin-bottom: .8333rem; }
.hero__sub p + p { font-size: 1rem; text-transform: uppercase; width: 31rem; margin: 0 auto; line-height: 1; }
.hero__hint { position: absolute; left: 1.6667rem; bottom: 1rem; font-size: 1rem; color: #9a9a9a; }
.hero__right { position: absolute; left: 73.3333rem; right: 0; top: 0; bottom: 0; overflow: hidden; color: #fff; text-align: center; }
.hero__rbg { position: absolute; inset: 0; }
.hero__rbg .ph__t { display: none; }
.hero__cap { position: absolute; left: 0; right: 0; top: 3.6667rem; }
.cap__k { display: block; font-size: .6667rem; text-transform: uppercase; color: var(--half); margin-bottom: .1667rem; }
.cap__v { display: block; font-size: .8333rem; font-style: italic; }
.hero__up { position: absolute; right: 1.6667rem; top: 1.6667rem; font-size: 1rem; color: #9a9a9a; }
.hero__lens { position: absolute; left: 0; right: 0; top: calc(50% - 9rem); }
.lens__mark { font-size: 1rem; display: block; margin-bottom: .1667rem; }
.lens__t { font-family: var(--serif); font-size: 4rem; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; font-weight: 400; }
.lens__row { display: flex; justify-content: center; align-items: flex-start; gap: 1.0833rem; }
.lens__img { width: 10.0833rem; height: 12.6667rem; flex: none; margin-top: .1667rem; }
.lens__img .ph { background: #3a3a3a; color: #8a8a8a; }
.lens__img .ph__t { font-size: .6667rem; left: .4rem; right: .4rem; bottom: .4rem; }
.hero__rbottom { position: absolute; left: 0; right: 0; bottom: 3.75rem; }
.hero__rbottom .lens__mark { margin-bottom: .8333rem; }
.hero__rbottom p { font-size: 1.1667rem; line-height: 1; }
.hero__explore { display: inline-block; margin-top: 1.25rem; font-size: 1rem; border-bottom: 1px solid currentColor; padding-bottom: .1667rem; }

/* intro motion */
.hero__card, .hero__sub, .hero__hint { transition: transform 1.3s var(--ease-out), opacity 1s; }
.hero__right { transition: clip-path 1.2s var(--ease); }
body.is-loading .hero__card { transform: translateY(60vh); }
body.is-loading .hero__sub, body.is-loading .hero__hint, body.is-loading .hero__lens, body.is-loading .hero__rbottom, body.is-loading .hero__cap, body.is-loading .hero__up { opacity: 0; }
body.is-loading .hero__right { clip-path: inset(0 100% 0 0); }
.hero__lens, .hero__rbottom, .hero__cap, .hero__up { transition: opacity 1s .6s; }

/* ---------- work (projects) ---------- */
.work { position: relative; z-index: 2; background: var(--black); display: flex; }
.work__left { position: relative; width: 73.3333rem; flex: none; }
.work__bgs { position: absolute; inset: 0; }
.work__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.work__bg { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.work__bg.is-on { opacity: 1; }
.work__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.work__bg .ph__t { bottom: auto; top: 4.5rem; color: #4a4a4a; }
.work__block { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; }
.work__img { width: 55rem; height: 33.3333rem; cursor: pointer; transition: transform 1s var(--ease-out); }
.work__img:hover { transform: scale(.985); }
.work__right { position: relative; width: 46.6667rem; flex: none; }
.work__panel { position: sticky; top: 0; height: 100vh; padding: 0 2.3333rem; }
.work__list { position: absolute; left: 2.3333rem; top: 2.3333rem; }
.work__list li { display: flex; gap: 0; height: 1.6667rem; font-size: 1rem; text-transform: uppercase; color: var(--text); }
.work__list button { display: flex; text-transform: uppercase; color: rgba(224,223,223,.45); transition: color .3s; }
.work__list button:hover, .work__list li.is-on button { color: var(--text); }
.work__list .n { width: 3.8333rem; position: relative; }
.work__list .n::before, .work__list .n::after { opacity: 0; transition: opacity .3s; }
.work__list .n::before { content: "{"; position: absolute; left: -.6667rem; top: 0; }
.work__list .n::after { content: " }"; white-space: pre; }
.work__list li.is-on .n::before, .work__list li.is-on .n::after { opacity: 1; }
.work__num { position: absolute; right: 2.3333rem; top: 2.3333rem; width: 24rem; height: 12.6667rem; overflow: hidden; font-size: 12.6667rem; line-height: 1; letter-spacing: -.04em; text-align: right; }
.work__num span, .work__title span { display: block; transition: transform .9s var(--ease), opacity .9s; }
.work__num span { position: absolute; right: 0; top: 0; transform: translateY(100%); }
.work__num span.is-on { transform: translateY(0); }
.work__num span.is-past { transform: translateY(-100%); }
.work__rule { position: absolute; left: 2.3333rem; right: 2.3333rem; top: 17.3333rem; height: 1px; background: var(--line); }
.work__more { position: absolute; left: 2.3333rem; right: 2.3333rem; top: calc(100vh - 20.0833rem); display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); font-size: 1.1667rem; color: var(--text); }
.work__more:hover .arrow { transform: translateX(.4167rem); }
.work__titles { position: absolute; left: 2.3333rem; right: 2.3333rem; bottom: 2.3333rem; height: 13.2rem; overflow: hidden; pointer-events: none; }
.work__title { position: absolute; left: 0; right: 0; bottom: 0; font-size: 6.5rem; line-height: .925; letter-spacing: -.04em; font-weight: 400; }
.work__title span { transform: translateY(105%); }
.work__title.is-on span { transform: translateY(0); }
.work__title.is-past span { transform: translateY(-105%); opacity: 0; }

/* ---------- about (revealed under the projects) ---------- */
.about-wrap { position: relative; z-index: 1; margin-top: -100vh; height: 250vh; }
.about { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--black); }
.about__left { position: absolute; left: 3.6667rem; bottom: 4rem; width: 62rem; }
.about__label { font-size: 1.1667rem; color: var(--mute); margin-bottom: 2rem; }
.about__text { font-size: 3.8333rem; line-height: .925; letter-spacing: -.04em; color: var(--text); max-width: 58.6667rem; }
.about__tags { display: flex; flex-wrap: wrap; gap: 0 1.6667rem; margin-top: 1.75rem; font-size: 1rem; color: var(--mute); }
.about__right { position: absolute; left: 73.3333rem; right: 0; top: 0; bottom: 0; }
.about__portrait { position: absolute; left: 0; right: 0; top: 0; height: calc(100vh - 10.5rem); }
.about__portrait .ph__t { bottom: auto; top: 1.6667rem; }
.about__card { position: absolute; left: 11.25rem; top: 20.1667rem; width: 27.5rem; height: 32.5rem; background: var(--paper); color: #000; text-align: center; font-size: 1rem; text-transform: uppercase; padding: 1.3333rem; }
.about__card small { display: block; font-size: 1rem; color: var(--dark-half); margin-top: .5rem; }
.about__card .b { position: absolute; left: 0; right: 0; bottom: 1.3333rem; }
.about__card .b small { margin: 0 0 .5rem; }
.about__acc { position: absolute; left: 2.3333rem; right: 2.3333rem; bottom: 2.4167rem; background: var(--black); }
.acc { border-bottom: 1px solid var(--line); }
.acc__btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.0833rem 0 1.0833rem; font-size: 1.1667rem; color: var(--text); text-align: left; }
.acc__plus { position: relative; width: 1.1667rem; height: 1.1667rem; }
.acc__plus::before, .acc__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--text); transition: transform .4s var(--ease-out); }
.acc__plus::after { transform: rotate(90deg); }
.acc.is-open .acc__plus::after { transform: rotate(0); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__grid { display: grid; grid-template-columns: repeat(3, 13.3333rem); gap: 2.6667rem 1rem; padding: .6667rem 0 2rem; }
.acc__grid h4 { font-size: .6667rem; font-weight: 400; text-transform: uppercase; color: #fff; margin-bottom: .6667rem; }
.acc__grid li { font-size: 1.1667rem; line-height: 1.2857; color: var(--half); }

/* ---------- white "road" section ---------- */
.road { position: relative; z-index: 2; background: var(--paper); color: #000; height: 100vh; }
.road__left { position: absolute; left: 0; top: 0; bottom: 0; width: 73.3333rem; text-align: center; }
.road__label { position: sticky; top: 1.6667rem; margin-top: 3.6667rem; font-size: 1.1667rem; color: #555; display: block; z-index: 1; }
.road__mid { position: absolute; left: 0; right: 0; top: 25.6667rem; }
.road__k { font-family: var(--serif); font-size: 1.1667rem; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: .5rem; }
.road__st { font-family: var(--serif); font-size: 4rem; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; width: 56rem; margin: 0 auto; font-weight: 400; }
.blank { display: inline-block; position: relative; width: 4rem; height: .1em; border-bottom: 1px solid currentColor; margin: 0 .25em; vertical-align: baseline; }
.blank::before { content: "{ * }"; position: absolute; left: 50%; bottom: .7em; transform: translateX(-50%); font-family: var(--sans); font-size: .2083em; letter-spacing: 0; white-space: nowrap; }
.road__foot { position: absolute; left: 0; right: 0; bottom: 3.5rem; font-size: 1.1667rem; line-height: 1; width: 45rem; margin: 0 auto; }
.road__photo { position: absolute; left: 73.3333rem; top: 1.6667rem; bottom: 1.6667rem; width: 45rem; }

/* ---------- chapters grid ---------- */
.grid { position: relative; z-index: 2; background: #0a0a0a; color: #000; }
.grid__bg { position: absolute; inset: 0; }
.grid__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.grid__stick > .ph { position: absolute; inset: 0; }
.grid__bg .ph__t { display: none; }
.grid__cap { position: absolute; right: 1.6667rem; top: 1.6667rem; text-align: right; color: #fff; z-index: 1; }
.grid__cards { position: relative; margin-left: 6rem; width: 61.3333rem; padding: 7rem 0 6.1667rem; display: grid; align-content: start; grid-template-columns: 29.3333rem 29.3333rem; gap: 2.6667rem; }
.card { position: relative; display: block; height: 37.1667rem; background: var(--paper); padding: 1rem; transition: transform .8s var(--ease-out); }
.card:hover { transform: translateY(-.4167rem); }
.card__n { font-size: 1rem; color: var(--dark-half); }
.card__img { position: absolute; right: 1rem; top: 1rem; width: 16.9167rem; height: 21.25rem; }
.card__img .ph__t { font-size: .6667rem; }
.card__b { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; }
.card__t { font-family: var(--serif); font-size: 2rem; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; width: 19rem; margin-bottom: .5rem; font-weight: 400; }
.card__meta { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; text-transform: uppercase; color: var(--dark-half); }
.card__meta .arrow { color: #000; }
.card:hover .arrow { transform: translateX(.4167rem); }
.grid__side { position: relative; margin-left: auto; width: 46.6667rem; display: flex; flex-direction: column; justify-content: flex-end; }
.grid__box { position: sticky; bottom: 0; height: 22.1667rem; background: var(--paper); padding: 2.3333rem 2.3333rem 0; }
.grid__inner { position: relative; }
.grid__st { font-family: var(--serif); font-size: 2rem; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; width: 37.5rem; font-weight: 400; }
.grid__all { position: absolute; left: 2.3333rem; right: 2.3333rem; bottom: 3.6667rem; display: flex; justify-content: space-between; align-items: center; font-size: 1.1667rem; }
.grid__all:hover .arrow { transform: translateX(.4167rem); }
.grid__wrap { position: relative; display: flex; }

/* ---------- project view ---------- */
.project { position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--text); visibility: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease), visibility 0s linear 1s; overflow-y: auto; overscroll-behavior: contain; }
.project.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease); }
.project__inner { position: relative; min-height: 100vh; opacity: 0; transition: opacity .6s; }
.project.is-open .project__inner { opacity: 1; transition: opacity .8s .5s; }
.pv__close { position: fixed; right: 1.6667rem; top: 1.6667rem; font-size: 1rem; color: #fff; z-index: 2; }
.pv__nav { position: fixed; left: 1.6667rem; bottom: 1.6667rem; font-size: 1rem; display: flex; gap: .6667rem; z-index: 2; }
.pv__nav button { color: rgba(255,255,255,.45); transition: color .3s; }
.pv__nav button.is-on, .pv__nav button:hover { color: #fff; }
.pv__grid { position: relative; min-height: 100vh; padding: 46.0833rem 0 8rem 75.6667rem; }
.pv__title { position: absolute; left: 8.8333rem; top: 10rem; font-size: 6.5rem; line-height: .925; letter-spacing: -.04em; font-weight: 400; }
.pv__lists { position: absolute; left: 75.6667rem; top: 10rem; display: flex; }
.pv__col { min-width: 13.0833rem; padding-right: 1.6667rem; }
.pv__col + .pv__col { max-width: 26rem; }
.pv__col h3 { font-size: .6667rem; font-weight: 400; text-transform: uppercase; margin-bottom: 1rem; color: var(--text); }
.pv__col li { font-size: 1.1667rem; line-height: 1.2; color: var(--half); margin-bottom: .9rem; }
.pv__fig { position: absolute; left: 9.1667rem; top: 36.6667rem; }
.pv__fig small { display: block; font-size: .6667rem; text-transform: uppercase; margin-bottom: .6667rem; }
.pv__frame { position: relative; width: 51.25rem; height: 31rem; }
.pv__frame .ph { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.pv__frame .ph.is-on { opacity: 1; }
.pv__copy { width: 37rem; }
.pv__k { font-size: 1rem; text-transform: uppercase; margin-bottom: 1.6667rem; }
.pv__st { font-size: 3rem; line-height: .925; letter-spacing: -.04em; font-weight: 400; }
.pv__story { margin-top: 2rem; }
.pv__story p { font-size: 1.1667rem; line-height: 1.3; color: var(--half); margin-bottom: .8rem; }
.pv__story h4 { font-size: .6667rem; font-weight: 400; text-transform: uppercase; color: #fff; margin: 1.6rem 0 .6rem; }
.pv__story ol li { font-size: 1.1667rem; line-height: 1.3; color: var(--half); margin-bottom: .5rem; }
.pv__story ol { counter-reset: s; }
.pv__story ol li::before { counter-increment: s; content: "0" counter(s) "  "; color: #fff; }
.pv__ev { margin-bottom: 1rem; }
.pv__ev b { display: block; font-weight: 400; color: #fff; font-size: 1.1667rem; margin-bottom: .25rem; }
.pv__visit { display: flex; justify-content: space-between; align-items: center; margin-top: 4.1667rem; padding-bottom: 1.25rem; border-bottom: 1px solid #2a2a2a; font-size: 1.1667rem; }
.pv__visit:hover .arrow { transform: translateX(.4167rem); }

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .loader__fill { max-width: none; }
  .loader__label { left: 50%; top: 1.5rem; font-size: 1rem; }
  .loader__count { left: 1rem; bottom: 2rem; font-size: 8rem; }
  .loader.is-out .loader__fill { width: 100%; }
  .bar { width: 100%; height: 4.75rem; background: var(--black); mix-blend-mode: normal; }
  .bar__logo { left: 1.6406rem; top: 1.5rem; font-size: 1.5rem; }
  .bar__burger { left: auto; right: 1.6406rem; top: 1.75rem; width: 2.3rem; }
  .loop { padding-top: 0; }
  .hero { height: 69.25rem; }
  .hero__move { transform: none !important; }
  .hero__left { width: 100%; }
  .hero__detail, .hero__shade { left: 50%; width: 50%; top: 56.7rem; }
  .hero__detail .ph__t, .hero__bg .ph__t { display: none; }
  .hero__shade { display: none; }
  .hero__card { left: 3.6rem; width: 24.8rem; height: 29.3rem; top: 18.38rem; margin: 0; padding: 1rem; }
  .hero__card-bottom { left: 1rem; right: 1rem; bottom: 1.1rem; }
  .hero__title { font-size: 2.65rem; }
  .hero__mark { left: 17.8rem; }
  .hero__sub { width: 100%; bottom: 5.2rem; }
  .hero__sub p + p { width: 24.4rem; }
  .hero__hint { left: 0; right: 0; text-align: center; bottom: 1.6rem; font-size: .8rem; color: var(--mute); z-index: 1; }
  .hero__hint span { display: none; }
  .hero__right { display: none; }
  .hero--clone { display: none; }
  .work { display: block; }
  .work__left { width: 100%; }
  .work__bgs, .work__right { display: none; }
  .work__block { height: auto; display: block; padding: 0; }
  .work__media { position: relative; height: 32.5rem; display: flex; align-items: center; justify-content: center; }
  .work__media > .ph:first-child { position: absolute; inset: 0; }
  .work__media > .ph:first-child .ph__t { display: none; }
  .work__img { position: relative; width: 28.7rem; height: 17.4rem; }
  .work__info { position: relative; padding: 1.4rem 1.6406rem 0; height: 20.5rem; }
  .work__info h3 { font-size: 3.2rem; line-height: .9; letter-spacing: -.04em; font-weight: 400; width: 26.9rem; }
  .work__info .n { position: absolute; right: 1.6406rem; top: 1.4rem; font-size: 1rem; }
  .work__info .work__more { position: absolute; top: auto; left: 1.6406rem; right: 1.6406rem; bottom: 2.2rem; font-size: 1.2rem; padding-bottom: 1.8rem; }
  .about-wrap { margin: 0; height: auto; }
  .about { position: relative; height: auto; overflow: visible; }
  .about__left { position: relative; left: auto; bottom: auto; width: auto; padding: 3.5rem 1.6406rem 3.5rem; }
  .about__label { font-size: 1.2rem; margin-bottom: 1.2rem; }
  .about__text { font-size: 3.2rem; line-height: .9; }
  .about__tags { display: block; margin-top: 2rem; }
  .about__tags span { display: block; margin-bottom: .4rem; }
  .about__right { position: relative; left: auto; }
  .about__portrait { position: relative; height: 45.6rem; }
  .about__card { left: 3.6rem; width: 24.8rem; height: 29.5rem; top: 2.8rem; padding: 1rem; }
  .about__card .b { bottom: 1rem; }
  .about__acc { position: relative; left: auto; right: auto; bottom: auto; padding: 1rem 1.6406rem 1.6rem; }
  .acc__btn { font-size: 1.2rem; padding: 1.1rem 0; }
  .acc__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .acc__grid h4 { font-size: .8rem; }
  .acc__grid li { font-size: 1.2rem; }
  .road { height: auto; padding: 2.4rem 0 1.6406rem; }
  .road__left { position: relative; width: auto; padding: 0 1.6406rem; }
  .road__label { position: relative; top: 0; padding: 0; margin: 0 auto; font-size: 1.2rem; width: 12rem; line-height: 1; }
  .road__mid { position: relative; top: auto; margin-top: 2.5rem; }
  .road__k { font-size: 1.2rem; }
  .road__st { font-size: 3.2rem; width: auto; }
  .road__foot { position: relative; bottom: auto; width: 24rem; margin: 2.6rem auto 2.4rem; font-size: 1.2rem; line-height: 1.05; }
  .road__photo { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 42.6rem; margin: 0 .82rem; }
  .grid { padding: 1.6rem 0 0; }
  .grid__stick { height: 100%; position: absolute; inset: 0; }
  .grid__cap { right: 2.5rem; top: 1.6rem; }
  .grid__cards { padding-top: 4.6rem !important; }
  .grid__wrap { display: block; }
  .grid__side { width: auto; display: block; }
  .grid__cards { margin: 0 1.6406rem; width: auto; grid-template-columns: 1fr; gap: 1.1rem; padding: 0 0 1.1rem; }
  .card { height: 41.4rem; padding: 1rem 1.1rem; }
  .card__img { right: 1.1rem; top: 1rem; width: 19.3rem; height: 24.2rem; }
  .card__b { left: 1.1rem; right: 1.1rem; }
  .card__t { font-size: 1.8rem; width: 22.8rem; }
  .grid__box { position: relative; width: auto; height: auto; padding: 1.6rem 1.6406rem 2rem; }
  .grid__st { font-size: 1.8rem; width: auto; }
  .grid__all { position: relative; left: auto; right: auto; bottom: auto; margin-top: 2.4rem; font-size: 1.2rem; }
  .menu__head { height: 4.75rem; }
  .menu__logo { left: 1.6406rem; top: 1.5rem; }
  .menu__close { right: 1.6406rem; top: 1.4rem; width: 2rem; height: 2rem; }
  .menu__body { padding: 0 1.6406rem 3rem; min-height: 0; }
  .menu__item { padding: 2.6rem 0 2.6rem !important; }
  .menu__big { font-size: 4.4rem; line-height: .95; }
  .menu__line { display: block; }
  .menu__img { display: none; }
  .menu__num { position: absolute; right: 0; top: 2.6rem; margin: 0; transform: none; color: #333; }
  .menu__arrow { bottom: 2.9rem; width: 2.8rem; }
  .menu__lists { position: relative; left: auto; right: auto; bottom: auto; display: block; padding-top: 2rem; }
  .menu__col { width: auto; margin-bottom: 2.4rem; }
  .menu__col li { margin-bottom: 1.2rem; }
  .menu__social { margin: 0; flex-wrap: wrap; }
  .project { overflow-y: auto; }
  .pv__close { right: 1.6406rem; top: 1.75rem; }
  .pv__nav { position: relative; left: auto; bottom: auto; padding: 0 1.6406rem 2.5rem; }
  .pv__grid { display: block; padding: 5.5rem 1.6406rem 2.5rem; }
  .pv__title { position: relative; left: auto; top: auto; padding: 0; font-size: 3.2rem; line-height: .9; margin-bottom: 2.5rem; }
  .pv__lists { position: relative; left: auto; top: auto; flex-wrap: wrap; gap: 1.5rem 0; }
  .pv__col li { font-size: 1.2rem; }
  .pv__fig { position: relative; left: auto; top: auto; padding: 0; margin: 3rem 0 2.5rem; }
  .pv__frame { width: 100%; height: 21rem; }
  .pv__copy { width: auto; }
  .pv__st { font-size: 2.4rem; }
  .pv__story p, .pv__story ol li, .pv__visit { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* =========================================================
   Chapters page (horizontal on desktop, stacked on phone)
   ========================================================= */
.page-chapters { background: var(--paper); color: #000; }
.loader--light { background: #fff; color: #000; }
.loader--light .loader__fill { background: #f3f3f3; }
.loader--light .loader__label { color: #000; }
.ch-side { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: 5rem; background: var(--paper); border-right: 1px solid var(--side-line); }
.page-chapters .bar { width: 5rem; height: 100%; mix-blend-mode: normal; }
.page-chapters .bar__logo { left: 50%; top: 50%; transform: translate(-50%, -50%); color: #000; -webkit-text-stroke-color: #000; }
.page-chapters .bar__burger { left: 1.3333rem; top: 2rem; }
.page-chapters .bar__burger span { background: #000; }
.ch-all { position: absolute; left: 50%; bottom: 1.6667rem; writing-mode: vertical-rl; transform: translateX(-50%); font-size: 1rem; color: #000; white-space: nowrap; }
.ch-all span { display: inline-block; margin-top: .6667rem; font-size: 1.3333rem; line-height: .6; }
.ch-progress { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.ch-progress span { display: block; height: 100%; background: #000; transform-origin: 0 0; transform: scaleX(0); }
.track { position: fixed; left: 5rem; top: 0; height: 100vh; display: flex; align-items: stretch; will-change: transform; background: var(--paper); }
.track > section { flex: none; height: 100vh; position: relative; display: flex; }
.ch { display: flex; }
.ch > div { flex: none; height: 100vh; position: relative; }
.ch-label { position: absolute; left: 0; right: 0; top: 3.3333rem; text-align: center; font-size: 1.1667rem; color: #000; }
.ch-k { font-family: var(--serif); font-size: 1.1667rem; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: .3333rem; }
.ch-intro { width: calc(100vw - 5rem); text-align: center; }
.ch-intro__mid { position: absolute; left: 0; right: 0; top: 19.25rem; }
.ch-big { font-family: var(--serif); font-weight: 400; font-size: 7.5rem; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.ch-big__l { display: block; }
.ch-big__row { display: flex; justify-content: center; align-items: flex-start; gap: .9167rem; }
.ch-big__img { width: 21.0833rem; height: 26.5rem; margin-top: 0; }
.ch-big__img .ph { position: absolute; inset: 0; }
.ch-big__img { position: relative; }
.ch-intro__sub { position: absolute; left: 0; right: 0; bottom: 3.5rem; font-size: 1.1667rem; line-height: 1; }
.ch-scroll { position: absolute; right: 2rem; bottom: 2rem; font-size: 1rem; color: var(--mute); display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.ch-title { width: 61rem; padding-left: 10rem; }
.ch-title__img { position: absolute; left: 10rem; top: 1.6667rem; bottom: 1.6667rem; width: 51rem; }
.ch-title__img .ph { position: absolute; inset: 0; }
.ch-title__img .ph__t { bottom: auto; top: 7rem; }
.ch-title__cap { position: absolute; left: 10rem; width: 51rem; top: 4.5rem; text-align: center; color: #fff; }
.ch-title__txt { position: absolute; left: 10rem; width: 51rem; bottom: 6.6667rem; text-align: center; color: #fff; }
.ch-name { font-family: var(--serif); font-weight: 400; font-size: 4rem; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 1rem; }
.ch-meta { font-size: 1rem; }
.ch-st { width: 64rem; text-align: center; }
.ch-st__mid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 2.6667rem; }
.ch-serif { font-family: var(--serif); font-size: 4rem; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.ch-serif.is-small { font-size: 3rem; }
.ch-foot { position: absolute; left: 0; right: 0; bottom: 3rem; width: 33.3333rem; margin: 0 auto; font-size: 1rem; line-height: 1; }
.ch-wide { width: 95rem; margin: 0 2.6667rem 0 0; }
.ch-wide .ph { position: absolute; left: 0; right: 0; top: 1.6667rem; bottom: 1.6667rem; }
.ch-mix { width: 69rem; }
.ch-mix__img { position: absolute; left: 50rem; top: 3.3333rem; width: 15.8333rem; }
.ch-mix__img .ph { height: 16.6667rem; }
.ch-mix__img figcaption { margin-top: 1.25rem; color: #000; }
.ch-mix__img .cap__k { color: var(--dark-half); }
.ch-mix__st { position: absolute; left: 11.6667rem; top: 28.5rem; width: 46rem; }
.ch-mix__p { position: absolute; left: 31.6667rem; top: calc(28.5rem + 14rem); width: 22.5rem; font-size: 1.1667rem; line-height: 1; }
.ch-long { width: 62rem; }
.ch-long .ch-serif { position: absolute; left: 6rem; bottom: 7.5rem; width: 40rem; }
.ch-long__list { position: absolute; left: 49rem; bottom: 6rem; width: 12rem; font-size: 1.1667rem; line-height: 1; }
.ch-long__list li { margin-bottom: .6rem; }
.ch--next .ch-st { width: 72rem; }
.ch-back { position: relative; flex: none; align-self: flex-end; width: 30rem; margin: 0 4rem 4rem 0; display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid #000; font-size: 1.1667rem; }
.ch-back:hover .arrow { transform: translateX(.4167rem); }

@media (max-width: 767px) {
  .loader--light .loader__fill { background: #f3f3f3; }
  .ch-side { right: 0; bottom: auto; width: auto; height: 4.75rem; border-right: 0; border-bottom: 1px solid var(--side-line); }
  .page-chapters .bar { width: 100%; height: 4.75rem; background: transparent; }
  .page-chapters .bar__logo { left: 1.6406rem; top: 1.5rem; transform: none; }
  .page-chapters .bar__burger { left: auto; right: 1.6406rem; top: 1.75rem; }
  .ch-all { left: 50%; top: 1.7rem; bottom: auto; writing-mode: horizontal-tb; transform: translateX(-50%); font-size: 1rem; }
  .ch-all span { display: none; }
  .track { position: relative; left: auto; height: auto; display: block; padding-top: 4.75rem; }
  .track > section { display: block; height: auto; }
  .ch > div { height: auto; }
  .ch-intro { width: auto; padding: 3rem 0 3rem; }
  .ch-label { position: relative; top: auto; margin: 0 0 2.4rem; }
  .ch-intro__mid { position: relative; top: auto; }
  .ch-big { font-size: 4.6rem; }
  .ch-big__img { width: 11rem; height: 13.8rem; }
  .ch-intro__sub { position: relative; bottom: auto; margin-top: 3rem; }
  .ch-scroll { display: none; }
  .ch-title { width: auto; padding: 0 1.6406rem; height: 44rem !important; }
  .ch-title__img, .ch-title__cap, .ch-title__txt { left: 1.6406rem; right: 1.6406rem; width: auto; }
  .ch-title__img { top: 0; bottom: 0; }
  .ch-title__txt { bottom: 3rem; }
  .ch-name { font-size: 3.6rem; }
  .ch-st { width: auto; padding: 3rem 1.6406rem 3rem; }
  .ch-st__mid { position: relative; top: auto; transform: none; padding: 0; }
  .ch-serif { font-size: 3.4rem; }
  .ch-serif.is-small { font-size: 2.6rem; }
  .ch-foot { position: relative; bottom: auto; width: auto; margin: 2.4rem 1rem 0; font-size: 1rem; }
  .ch-wide { width: auto; margin: 0 1.6406rem; height: 24rem !important; }
  .ch-wide .ph { top: 0; bottom: 0; }
  .ch-mix { width: auto; padding: 3rem 1.6406rem; }
  .ch-mix__img, .ch-mix__st, .ch-mix__p { position: relative; left: auto; top: auto; width: auto; }
  .ch-mix__img { width: 15.8rem; margin-bottom: 2.5rem; }
  .ch-mix__st { font-size: 3.2rem; }
  .ch-mix__p { margin: 1.6rem 0 0 auto; width: 22rem; font-size: 1.2rem; }
  .ch-long { width: auto; padding: 0 1.6406rem 3.5rem; }
  .ch-long .ch-serif, .ch-long__list { position: relative; left: auto; bottom: auto; width: auto; }
  .ch-long__list { margin-top: 1.6rem; font-size: 1.2rem; }
  .ch--next .ch-st { width: auto; }
  .ch-back { margin: 0 1.6406rem 3rem; width: auto; }
}