/* ============================================================
 PHOTO.CSS — detail page layout
 ============================================================ */

/* ── layout ─────────────────────────────────────────────── */

#app { 
 height: 100%; 
 min-height: 100svh; 
 } 

 #app.light {
    background-color: #fff;
}

body { 
 overflow: hidden; 
 } 

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

/* M Mobile: stacked (nav top, content below) */
/* Desktop: sidebar left (6rem) + main right */
#scroll-wrapper {
 height: calc(100svh - 4.8rem);
 margin-top: 4.8rem;
 overflow-x: hidden;
 overflow-y: auto;
 scroll-behavior: auto;
 scroll-snap-type: y mandatory;
 width: 100%;
 scrollbar-width: none;
 }

#scroll-wrapper::-webkit-scrollbar {
 display: none;
 }

@media (min-width: 801px) {
 #scroll-wrapper {
 height: 100svh;
 margin-left: 6rem;
 margin-top: 0;
 overflow-x: auto;
 overflow-y: hidden;
 scroll-behavior: auto;
 scroll-snap-type: none;
 scrollbar-width: none;
 }

 #scroll-wrapper::-webkit-scrollbar {
 display: none;
 }
 }

/* sections must not shrink on horizontal scroll */
#scroll-wrapper > .wrapper.horizontal > section {
 flex-shrink: 0;
 scroll-snap-align: start;
 }

/* wrapper horizontal layout */
.wrapper.horizontal {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

@media (min-width: 801px) {
 .wrapper.horizontal {
 display: flex;
 flex-direction: row;
 height: 100%;
 width: max-content;
 position: static;
 }
}

/* ── sidebar nav overrides ───────────────────────────────── */

.header-photos { 
 background-color: #fff; 
 border-bottom: 1px solid #e0dfdf; 
 position: fixed; 
 top: 0; 
 left: 0; 
 right: 0; 
 height: 4.8rem;
 z-index: 5;
 } 

@media (min-width: 801px) { 
 .header-photos { 
 position: fixed;
 top: 0;
 left: 0;
 right: auto;
 width: 6rem; 
 height: 100svh;
 border-bottom: none; 
 border-right: 1px solid #e0dfdf; 
 } 
 } 

 .header-photos__content {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: .6rem 1.6rem;
    place-items: center flex-start
}

@media (min-width: 801px) {
    .header-photos__content {
        grid-template-columns:none;
        grid-template-rows: repeat(3,1fr);
        padding: 1.6rem;
        place-items: flex-start center
    }
}

.header-photos__btn-menu-close {
 align-items: center;
 color: #000;
 display: flex;
 justify-content: center;
 left: 0;
 position: absolute;
 top: 0;
 }

.header-photos__btn-menu-close:hover { opacity: .6; } 

/* ── menu overrides ───────────────────────────────────── */

.menu { 
 display: none;
 position: fixed; 
 top: 4.8rem;
 left: 0;
 right: 0;
 z-index: 4;
 background-color: #f6f6f6;
 width: 100%;
 height: calc(100svh - 4.8rem);
 overflow-y: auto;
 }

.menu.visible {
 display: flex;
}

@media (min-width: 801px) {
 .menu { 
 top: 0;
 left: 6rem;
 right: 0;
 height: 100svh;
 z-index: 4;
 width: calc(100% - 6rem);
 }
} 

/* prev / next buttons in chapter area */
.ph-nav-btn { 
 align-items: center; 
 background: none; 
 border: none; 
 color: #000; 
 cursor: pointer; 
 display: flex; 
 justify-content: center; 
 opacity: .5; 
 padding: .4rem; 
 transition: opacity .25s; 
 } 
.ph-nav-btn:hover { opacity: 1; } 
.ph-nav-btn:disabled { opacity: .2; cursor: default; } 

.ph-counter { 
 color: #000; 
 display: block; 
 text-align: center; 
 white-space: nowrap; 
 } 

@media (min-width: 801px) { 
 .ph-counter { 
 writing-mode: vertical-rl; 
 transform: rotate(180deg); 
 margin-block: .6rem; 
 } 
 } 

/* mobile: chevrons point left/right */
.chevron { display: block; height: 2.8rem; width: 2.8rem; }
.chevron.active { transform: scaleY(-1); }
@media (min-width: 801px) {
 /* desktop: chevrons point up/down */
 .chevron { transform: rotate(90deg) scaleY(-1); }
 .chevron.active { transform: rotate(90deg); }
 }

/* progress bar */
.progress-single__wrapper {
 background-color: #e0dfdf;
 bottom: 0;
 height: .2rem;
 left: 0;
 overflow: hidden;
 position: absolute;
 width: 100vw;
 }

@media (min-width: 801px) {
 .progress-single__wrapper {
 left: 6rem;
 width: calc(100vw - 6rem);
 }
 }

.progress-single {
 background-color: #000;
 height: 100%;
 position: relative;
 transform-origin: left top;
 transform: scaleX(0);
 transition: transform .1s linear;
 width: 100%;
 }

@media (min-width: 801px) {
 .progress-single {
 transform-origin: top left;
 transform: scaleY(0);
 transition: transform .1s linear;
 }
 }

/* ── hero ────────────────────────────────────────────────── */

.ph-hero { 
 flex: 0 0 auto; 
 height: 100%; 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 } 

@media (min-width: 801px) { 
 .ph-hero { 
 width: 100vw; 
 height: 100svh; 
 scroll-snap-align: start; 
 } 
 } 

.ph-hero__bg { 
 height: 100%; 
 inset: 0; 
 object-fit: cover; 
 position: absolute; 
 transition: opacity .5s; 
 width: 100%; 
 } 

.ph-hero__overlay { 
 background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.65) 100%); 
 inset: 0; 
 position: absolute; 
 } 

.ph-hero__content { 
 bottom: 2.4rem; 
 left: 1.6rem; 
 position: absolute; 
 right: 1.6rem; 
 } 

@media (min-width: 801px) { 
 .ph-hero__content { 
 bottom: 4.4rem; 
 left: 4.4rem; 
 right: 4.4rem; 
 } 
 } 

.ph-category { margin-bottom: .6rem; } 

/* ── photo grid ──────────────────────────────────────────── */

.ph-grid { 
 flex: 0 0 auto; 
 width: 100%; 
 display: flex; 
 flex-direction: row; 
 gap: .4rem; 
 overflow-x: auto; 
 overflow-y: hidden; 
 padding: .4rem; 
 scroll-snap-type: x mandatory; 
 -webkit-overflow-scrolling: touch; 
 } 

@media (min-width: 801px) { 
 .ph-grid { 
 flex: 0 0 auto; 
 width: auto; 
 height: 100svh; 
 gap: .8rem; 
 overflow: visible; 
 padding: .8rem; 
 scroll-snap-align: start; 
 } 
 } 

.ph-grid__item { 
 aspect-ratio: 4 / 3; 
 background-color: #1a1a1a; 
 height: 100%; 
 overflow: hidden; 
 position: relative; 
 flex: 0 0 auto; 
 width: 55vw; 
 scroll-snap-align: start; 
 } 

@media (min-width: 801px) { 
 .ph-grid__item { 
 width: 50vw; 
 } 
 } 

.ph-grid__item--wide { 
 aspect-ratio: 16 / 9; 
 width: 85vw; 
 } 

@media (min-width: 801px) { 
 .ph-grid__item--wide { 
 width: 80vw; 
 } 
 } 

.ph-grid__img { 
 height: 100%; 
 inset: 0; 
 object-fit: cover; 
 position: absolute; 
 transition: transform .7s cubic-bezier(.23, 1, .32, 1); 
 width: 100%; 
 } 

.ph-grid__item:hover .ph-grid__img { 
 transform: scale(1.04); 
 } 

.ph-grid__num { 
 bottom: .8rem; 
 color: rgba(255,255,255,.45); 
 left: .8rem; 
 position: absolute; 
 } 

/* ── description ─────────────────────────────────────────── */

.ph-desc { 
 flex: 0 0 auto; 
 width: 100%; 
 border-top: 1px solid #e0dfdf; 
 padding: 3.2rem 1.6rem; 
 display: flex; 
 flex-direction: column; 
 justify-content: center; 
 } 

@media (min-width: 801px) { 
 .ph-desc { 
 flex: 0 0 auto; 
 width: 100vw; 
 height: 100svh; 
 padding: 5.6rem 4.4rem; 
 scroll-snap-align: start; 
 } 
 } 

.ph-desc__label { margin-bottom: 1.6rem; } 

.ph-desc__text { 
 color: #1a1a1a; 
 letter-spacing: -.02em; 
 line-height: 1.1; 
 } 

/* ── collection nav ──────────────────────────────────────── */

.ph-collection-nav { 
 flex: 0 0 auto; 
 width: 100%; 
 border-top: 1px solid #e0dfdf; 
 display: flex; 
 flex-direction: column; 
 gap: 0; 
 } 

@media (min-width: 801px) { 
 .ph-collection-nav { 
 flex: 0 0 auto; 
 width: 100vw; 
 height: 100svh; 
 flex-direction: row; 
 border-top: 1px solid #e0dfdf; 
 scroll-snap-align: start; 
 } 
 } 

.ph-coll-item { 
 cursor: pointer; 
 display: block; 
 flex: 0 0 auto; 
 height: 100%; 
 width: 50vw; 
 overflow: hidden; 
 position: relative; 
 text-decoration: none; 
 scroll-snap-align: start; 
 } 

@media (min-width: 801px) { 
 .ph-coll-item { 
 width: 50%; 
 } 
 } 

.ph-coll-item + .ph-coll-item { 
 border-top: 1px solid #e0dfdf; 
 } 

@media (min-width: 801px) { 
 .ph-coll-item + .ph-coll-item { 
 border-top: none; 
 border-left: 1px solid #e0dfdf; 
 } 
 } 

.ph-coll-item__bg { 
 height: 100%; 
 inset: 0; 
 object-fit: cover; 
 opacity: 0; 
 position: absolute; 
 transition: opacity .5s; 
 width: 100%; 
 } 

.ph-coll-item:hover .ph-coll-item__bg { opacity: .3; } 

.ph-coll-item__inner { 
 align-items: flex-start; 
 display: flex; 
 flex-direction: row; 
 justify-content: space-between; 
 padding: 2rem 1.6rem; 
 position: relative; 
 } 

@media (min-width: 801px) { 
 .ph-coll-item__inner { 
 flex-direction: column; 
 min-height: 20rem; 
 padding: 2.8rem; 
 } 
 } 

.ph-coll-item__label { color: #5e5d5d; } 

.ph-coll-item__title { 
 color: #000; 
 margin-top: auto; 
 } 

.ph-coll-item__arrow { 
 align-items: center; 
 color: #000; 
 display: flex; 
 margin-left: auto; 
 } 

@media (min-width: 801px) { 
 .ph-coll-item__arrow { margin-left: 0; margin-top: auto; } 
 } 

/* ── ADDITIONAL RULES (INTRO/CHAPTER) ───────────────────── */

.intro {
 background-color: #fff;
 position: relative;
 vertical-align: top;
 display: inline-flex;
 flex-direction: column;
 width: 100%;
 height: calc(100svh - 4.8rem);
 margin-top: 0;
 }

@media (min-width: 801px) {
 .intro {
 width: calc(100vw - 6rem);
 height: 100%;
 flex-shrink: 0;
 display: inline-flex;
 }
}

.intro-wrapper {
 display: inline-flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

.intro-header {
 flex: 0 0 auto;
 margin-top: 9.2rem;
 text-align: center;
 width: 100%
 }

@media (min-width: 801px) {
 .intro-header {
 margin-top: 4rem
 }

 }

.intro-content {
 align-items: center;
 display: flex;
 flex: 1;
 flex-direction: column;
 height: auto;
 justify-content: center;
 width: 100%;
 }

.intro-content__pre { 
 margin-bottom: .4rem
 } 

@media (min-width: 801px) { 
 .intro-content__pre { 
 margin-bottom:.2rem
 } 

 } 

.intro-content-center { 
 align-items: top; 
 display: flex; 
 flex-direction: row
 } 

.intro-picture { 
 aspect-ratio: 131/164; 
 height: auto; 
 margin-inline:.6rem; -o-object-fit: cover; 
 object-fit: cover; 
 width: 13.1rem
 } 

@media (min-width: 801px) { 
 .intro-picture { 
 aspect-ratio:253/318; 
 margin-inline:1.2rem; width: 25.3rem
 } 

 } 

.intro-footer {
 flex: 0 0 auto;
 margin-bottom: 6.8rem;
 text-align: center;
 width: 100%
 }

@media (min-width: 801px) {
 .intro-footer {
 margin-bottom: 4rem
 }

 } 

.intro-scroll { 
 align-items: flex-end; 
 bottom: 1.6rem; 
 display: flex; 
 flex-direction: column; 
 left: 50%; 
 position: absolute; 
 transform: translate(-50%)
 } 

@media (min-width: 801px) { 
 .intro-scroll { 
 bottom:1.2rem; 
 left: auto; 
 right: 2.4rem; 
 transform: none
 } 

 } 

.intro-scroll__icon { 
 align-items: center; 
 aspect-ratio: 1/1; 
 display: none
 } 

@media (min-width: 801px) { 
 .intro-scroll__icon { 
 display:flex
 } 

 } 

.caption { 
 position: relative
 } 

.caption-copy { 
 margin-top: .2rem
 } 

.chapter-intro { 
 display: flex; 
 flex: 1 1 auto; 
 flex-direction: column; 
 margin-top: 0;
 } 

@media (min-width: 801px) {
 .chapter-intro {
 flex: 0 0 calc(100vw - 6rem);
 flex-direction: row;
 height: 100svh;
 margin-top: 0;
 }
 }

.intro-photo { 
 padding: 1.6rem; 
 position: relative; 
 width: 100%
 } 

@media (min-width: 801px) { 
 .intro-photo { 
 padding:2rem; 
 width: 65.2rem
 } 

 } 

.intro-photo__container { 
 aspect-ratio: 288/357; 
 display: flex; 
 flex-direction: column; 
 overflow: hidden; 
 padding: 2rem 0 2.4rem; 
 position: relative; 
 text-align: center
 } 

@media (min-width: 801px) { 
 .intro-photo__container { 
 aspect-ratio:auto; 
 padding: 3.2rem 0 6rem
 } 

 } 

.intro-photo__header { 
 margin-bottom: auto
 } 

.header-number { 
 text-transform: capitalize
 } 

.intro-photo__content { 
 margin-top: auto; 
 position: relative
 } 

.intro-photo__location { 
 margin-bottom: .2rem
 } 

.intro-photo__coords { 
 margin-top: 1.6rem
 } 

.intro-content { 
 align-items: center; 
 display: flex; 
 flex-direction: column; 
 justify-content: center; 
 padding: 2.8rem 1.6rem; 
 text-align: center; 
 text-wrap: wrap; 
 width: 100%
 } 

@media (min-width: 801px) {
 .chapter-intro .intro-content {
 padding:4rem 1.6rem;
 width: 72.8rem
 }

 }

.intro-content__header { 
 margin-bottom: 4rem
 } 

@media (min-width: 801px) { 
 .intro-content__header { 
 margin-bottom:auto
 } 

 } 

.intro-content__pretitle { 
 margin-bottom: .8rem
 } 

.intro-content__footer { 
 margin-top: 4rem; 
 max-width: 40rem
 } 

@media (min-width: 801px) { 
 .intro-content__footer { 
 margin-top:auto
 } 

 } 

.chapter-full { 
 align-items: flex-start; 
 display: flex; 
 flex-direction: column; 
 height: 100svh; 
 justify-content: flex-end; 
 overflow: hidden; 
 padding: 2rem; 
 position: relative
 } 

@media (min-width: 801px) {
 .chapter-full {
 flex: 0 0 calc(100vw - 6rem);
 height: 100svh;
 padding: 4rem 4.5rem;
 }
 }

.chapter-full__footer { 
 text-align: center; 
 width: 100%
 } 

@media (min-width: 801px) { 
 .chapter-full__footer { 
 text-align:left; 
 width: auto
 } 

 } 

.chapter-mid { 
 align-items: flex-start; 
 display: flex; 
 flex-direction: column; 
 justify-content: flex-start; 
 padding: 1.6rem; 
 position: relative
 } 

@media (min-width: 801px) {
 .chapter-mid {
 flex: 0 0 calc(100vw - 6rem);
 flex-direction: row;
 height: 100svh;
 padding: 2rem;
 }
 }

.chapter-mid__content { 
 display: flex; 
 flex-direction: column; 
 padding: 0; 
 width: 100%
 } 

@media (min-width: 801px) { 
 .chapter-mid__content { 
 display:grid; 
 grid-template-columns: auto; 
 grid-template-rows: repeat(3,1fr); 
 padding: 2rem 4rem 2rem 2rem; 
 width: 81.2rem
 } 

 } 

.full-photo-wrapper { 
 width: 100%
 } 

@media (min-width: 801px) { 
 .full-photo-wrapper { 
 width:60rem
 } 

 } 

.photo-wrapper { 
 overflow: hidden; 
 position: relative
 } 

.chapter-mid__photo1, .chapter-mid__photo2 { 
 margin-bottom: 2.4rem; 
 position: relative; 
 width: 100%
 } 

.chapter-mid__photo1>.photo-wrapper, .chapter-mid__photo2>.photo-wrapper { 
 aspect-ratio: 288/270
 } 

@media (min-width: 801px) { 
 .chapter-mid__photo1, .chapter-mid__photo2 { 
 aspect-ratio:190/200; 
 margin-bottom: 0; 
 width: 19rem
 } 

.chapter-mid__photo1>.photo-wrapper, .chapter-mid__photo2>.photo-wrapper { 
 aspect-ratio: auto
 } 

 } 

.chapter-mid__photo1 { 
 margin-top: auto
 } 

.chapter-mid__photo2 { 
 margin-left: auto
 } 

.photo1-caption, .photo2-caption { 
 margin-top: 1.2rem; 
 position: relative
 } 

@media (min-width: 801px) { 
 .photo1-caption, .photo2-caption { 
 margin-top:0; 
 position: absolute
 } 

.photo1-caption { 
 bottom: calc(100% + 1.2rem)
 } 

.photo2-caption { 
 top: calc(100% + 1.2rem)
 } 

 } 

.chapter-mid__full-photo { 
 aspect-ratio: 288/361; 
 display: flex; 
 flex-direction: column; 
 position: relative; 
 width: 100%
 } 

@media (min-width: 801px) { 
 .chapter-mid__full-photo { 
 aspect-ratio:auto; 
 flex-direction: row; 
 height: 100%; 
 width: auto
 } 

 } 

.full-photo-caption { 
 margin-top: 1.2rem
 } 

@media (min-width: 801px) { 
 .full-photo-caption { 
 margin-left:2rem; 
 margin-top: 0
 } 

 } 

.chapter-mid__copy { 
 align-items: flex-start; 
 display: inline-flex; 
 flex-direction: column; 
 justify-content: flex-start; 
 margin: auto; 
 width: auto
 } 

.chapter-mid__copy-title { 
 display: flex; 
 flex-direction: column; 
 max-width: 56rem; 
 width: 100%
 } 

.chapter-mid__copy-title span { 
 display: inline-flex
 } 

.chapter-mid__copy-title>span:nth-of-type(3) { 
 margin-left: 0
 } 

@media (min-width: 801px) { 
 .chapter-mid__copy-title>span:nth-of-type(3) { 
 margin-left:31%
 } 

 } 

.chapter-mid__copy-subtitle { 
 margin-bottom: 2.6rem; 
 margin-left: 0; 
 margin-top: 1.2rem; 
 max-width: 100%; 
 text-wrap: wrap
 } 

@media (min-width: 801px) { 
 .chapter-mid__copy-subtitle { 
 margin-bottom:0; 
 margin-left: auto; 
 margin-top: 2.5rem; 
 max-width: 27rem
 } 

 } 

.chapter-end { 
 align-items: flex-start; 
 display: flex; 
 flex-direction: column; 
 justify-content: flex-start; 
 padding: 1.6rem; 
 position: relative
 } 

@media (min-width: 801px) {
 .chapter-end {
 flex: 0 0 calc(100vw - 6rem);
 flex-direction: row;
 height: 100svh;
 padding: 2rem 2rem 2rem 3rem;
 }
 }

.chapter-end__title-wrapper { 
 display: flex
 } 

@media (min-width: 801px) { 
 .chapter-end__title-wrapper { 
 margin-right:15rem
 } 

 } 

.chapter-end__title { 
 margin-block:0 2.4rem } 

@media (min-width: 801px) { 
 .chapter-end__title { 
 margin-block:auto 7rem
 } 

 } 

.end-photo-wrapper { 
 aspect-ratio: 288/245; 
 width: 100%
 } 

@media (min-width: 801px) { 
 .end-photo-wrapper { 
 aspect-ratio:600/520; 
 width: 60rem
 } 

 } 

.photo-wrapper { 
 overflow: hidden; 
 position: relative
 } 

.end-photo-caption { 
 margin-top: 1.2rem
 } 

@media (min-width: 801px) { 
 .end-photo-caption { 
 margin-top:2rem
 } 

 } 

.chapter-end__photo { 
 display: flex; 
 flex-direction: column
 } 

.chapter-end__photo-container { 
 margin-bottom: 2.4rem
 } 

@media (min-width: 801px) { 
 .chapter-end__photo-container { 
 margin-top:3rem
 } 

 } 

.chapter-end__subtitle { 
 text-wrap: wrap
 } 

@media (min-width: 801px) { 
 .chapter-end__subtitle { 
 margin:auto 6.5rem 5rem auto; 
 max-width: 34rem
 } 

 } 

.chapter { 
 background-color: #fff; 
 display: flex; 
 flex-direction: column; 
 position: relative; 
 vertical-align: top;
 width: 100%;
 } 

@media (min-width: 801px) {
 .chapter {
 display: inline-flex;
 flex-direction: row;
 height: 100svh;
 width: auto;
 margin-right: -1px;
 flex-shrink: 0;
 }

 } 

.chapter:last-of-type {
 margin-bottom: env(safe-area-inset-bottom)
 }

/* ── path / icon ─────────────────────────────────────────── */

.path-line {
 fill: none;
 stroke: currentcolor;
 stroke-width: 1.25;
 }

/* ── btn-menu ────────────────────────────────────────────── */

.btn-menu {
 align-items: center;
 color: #e0dfdf;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 height: 2.8rem;
 justify-content: center;
 position: relative;
 transition: color .3s cubic-bezier(.445,.05,.55,.95);
 width: 2.8rem;
 }

.btn-menu.alt-color { color: #000; }

.btn-menu__lines {
 align-items: center;
 display: flex;
 flex-direction: column;
 gap: .5rem 0;
 justify-content: center;
 width: 2.8rem;
 }

/* ── logo-link / logo ────────────────────────────────────── */

.logo-link {
 align-items: center;
 aspect-ratio: 1/1;
 color: #000;
 display: flex;
 flex-direction: column;
 justify-content: center;
 transition: color .3s cubic-bezier(.445,.05,.55,.95);
 }

.logo {
 display: block;
 height: 1.2rem;
 width: 1.3rem;
 }

/* ── header ──────────────────────────────────────────────── */

.header {
 align-items: center;
 background-color: #000;
 display: flex;
 height: 4.8rem;
 left: 0;
 position: sticky;
 top: 0;
 z-index: 5;
 }

.header .logo-link { color: #e0dfdf; }
.header.alt-color .logo-link { color: #000; }

@media (min-width: 801px) {
 .header {
 background-color: transparent;
 padding: 1rem 2rem;
 position: absolute;
 }
 }

.header__container {
 align-items: center;
 display: flex;
 flex-direction: row;
 padding: 1rem 1.6rem;
 }

@media (min-width: 801px) {
 .header__container { padding: 1rem 0; }
 }

.header__btn-close {
 margin-left: auto;
 position: absolute;
 right: 1.6rem;
 top: 1rem;
 }

@media (min-width: 801px) {
 .header__btn-close { position: relative; right: auto; top: auto; }
 }

.header__content {
 align-items: center;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 }

@media (min-width: 801px) {
 .header__content { padding-right: 1.8rem; }
 }

.header__border {
 background-color: #fff;
 bottom: 0;
 height: 1px;
 left: 0;
 opacity: .1;
 position: absolute;
 }

/* ── header-photos:after ─────────────────────────────────── */

.header-photos:after {
 background-color: #000;
 bottom: 0;
 content: "";
 display: none;
 height: .2rem;
 left: 0;
 position: absolute;
 width: calc(100% + 1px);
 }

@media (min-width: 801px) {
 .header-photos:after { display: block; }
 }

/* ── header-photos nav ───────────────────────────────────── */

.btn-chapters {
 align-items: center;
 display: flex;
 flex-direction: row;
 }

@media (min-width: 801px) {
 .btn-chapters {
 padding-bottom: .4rem;
 text-orientation: mixed;
 writing-mode: vertical-rl;
 }
 }

.header-photos__chapters {
 margin-top: .2rem;
 margin-inline: auto;
 order: 1;
 }

@media (min-width: 801px) {
 .header-photos__chapters {
 margin-top: auto;
 margin-inline: 0;
 order: 2;
 }
 }

.header-photos__logo {
 align-items: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin-block: 0;
 order: 0;
 }

@media (min-width: 801px) {
 .header-photos__logo {
 margin-block: auto;
 order: 1;
 width: 100%;
 }
 }

.header-photos__btn-wrapper {
 margin-left: auto;
 order: 2;
 position: relative;
 }

@media (min-width: 801px) {
 .header-photos__btn-wrapper {
 margin-left: 0;
 order: 0;
 }
 }

/* ── photos-modal ────────────────────────────────────────── */

.photos-modal { z-index: 15; }

.photos-modal__container {
  background-color: #f6f6f6;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 2rem 0 0;
  position: relative;
  width: 100%;
}

.list-item__body,
.list-item__head {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 width: 100%;
 }

.list-item__body { align-items: flex-end; margin-top: auto; }
.list-item__head { margin-bottom: 5rem; }

.list-item__thumbnail {
 aspect-ratio: 203/255;
 background-color: #5e5d5d;
 display: block;
 position: relative;
 width: 20.3rem;
 }

.card-arrow { margin-bottom: -.65rem; width: 2.8rem; }

.photos-list__item {
 background-color: #fff;
 margin-inline: auto;
 max-width: 32rem;
 padding: 1.2rem;
 width: 100%;
 }

@media (min-width: 801px) {
 .photos-list__item { margin-inline: 0; max-width: 100%; width: auto; }
 }

.photos-list__item.small { padding: 1rem; }
.photos-list__item.small .list-item__head { margin-bottom: 4rem; }
.photos-list__item.small .list-item__thumbnail { width: 16rem; }
.photos-list__item.small .arrow { margin-bottom: -.45rem; width: 2rem; }

@media (min-width: 801px) {
 .photos-list__item.small { padding: .7rem; }
 .photos-list__item.small .list-item__head { margin-bottom: 2.4rem; }
 .photos-list__item.small .list-item__thumbnail { width: 15rem; }
 .photos-list__item.small .arrow { margin-bottom: -.25rem; width: 1.6rem; }
 }

.list-item__btn { cursor: pointer; display: flex; flex-direction: column; height: 100%; width: 100%; }
.list-item__body-copy { text-align: left; }
.list-item__title { display: block; margin-bottom: .6rem; max-width: 22.8rem; }
.list-item__location { vertical-align: bottom; }

.thumb-img { opacity: 0; visibility: hidden; }
.thumb-img.visible {
 opacity: 1;
 transition: opacity 1.25s cubic-bezier(.445,.05,.55,.95) .125s;
 visibility: visible;
 }

@media (min-width: 801px) {
 .photos-modal { left: 6rem; top: 0; width: calc(100% - 6rem); }
 .photos-modal__container { max-width: 80rem; }
 .photos-modal .photos-list {
   display: grid;
   gap: 0;
   grid-template-columns: repeat(3, 1fr);
   overflow: hidden;
   scroll-snap-type: none;
  }
 .photos-modal .photos-list__card { border-bottom: 1px solid #e0dfdf; }
 .photos-modal .photos-list__card:nth-child(3n+1) { border-left: 1px solid #e0dfdf; }
 }

.photos-modal__title { padding: 0 1.6rem; }

.photos-list {
 display: flex;
 flex-direction: column;
 gap: 1.6rem 0;
 height: auto;
 margin-bottom: 5rem;
 width: 100%;
 }

@media (min-width: 801px) {
 .photos-list {
 display: grid;
 gap: 2.8rem;
 grid-template-columns: repeat(3,1fr);
 grid-template-rows: repeat(2,1fr);
 height: 100%;
 margin-bottom: 0;
 width: auto;
 }
 }

.photos-list__card { max-width: 30rem; }

.photos-card__link {
 cursor: pointer;
 display: flex;
 flex-direction: column;
 text-decoration: none;
 }

.photos-card__img {
 aspect-ratio: 3/4;
 margin: 0;
 overflow: hidden;
 position: relative;
 }

.photos-card__img img {
 height: 100%;
 inset: 0;
 object-fit: cover;
 position: absolute;
 transition: transform .5s cubic-bezier(.23,1,.32,1);
 width: 100%;
 }

.photos-card__link:hover .photos-card__img img { transform: scale(1.04); }

.photos-card__info {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 margin-top: .8rem;
 }

/* ── menu-list ───────────────────────────────────────────── */

.menu-list__item-link {
 color: #ffffff80;
 cursor: pointer;
 transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
 }

.menu-list__item-link:hover { opacity: .5; }

.menu-list__wrapper {
 color: #e0dfdf;
 margin-block: 1.6rem;
 }

.menu-list__wrapper.light { color: #000; }
.menu-list__wrapper.light .menu-list__item-link { color: #00000080; }

@media (min-width: 801px) {
 .menu-list__wrapper { margin-block: 0; }
 .menu-list__wrapper:nth-of-type(2) { margin-left: 5.4rem; }
 }

.menu-list__title { margin-bottom: .4rem; overflow: hidden; }
.menu-list__item { margin-top: 1.2rem; overflow: hidden; }
.menu-list__title-line { display: block; }

.menu-list__item-container,
.menu-list__title-line { transform: translate3d(0,110%,0); }

/* ── split ───────────────────────────────────────────────── */

.split-wrapper { overflow: hidden; padding: 1px; }
.split-element { display: block; transform: translate3d(0,110%,0); }

/* ── nav-link ────────────────────────────────────────────── */

.nav-link {
 display: flex;
 padding-bottom: 2rem;
 position: relative;
 transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
 }

.nav-link.disabled { opacity: .35; }

@media (min-width: 801px) {
 .nav-link { padding-bottom: 3.6rem; }
 }

.nav-link__content {
 align-items: flex-end;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 position: relative;
 width: 100%;
 }

.nav-block {
 align-items: flex-start;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 width: 100%;
 }

@media (min-width: 801px) {
 .nav-block { overflow: initial; width: auto; }
 }

.nav-inline { display: flex; flex-direction: column; }

@media (min-width: 801px) {
 .nav-inline { flex-direction: row; }
 }

.nav-photo {
 background-size: cover;
 display: none;
 height: 6.4rem;
 margin-inline: 2rem;
 width: 11.3rem;
 }

@media (min-width: 801px) {
 .nav-photo { display: inline-block; }
 }

.alone-word {
 --offset: 0;
 transform: translate(calc(-13.8rem * var(--offset)));
 }

.nav-numbered { position: relative; width: 100%; }

@media (min-width: 801px) {
 .nav-numbered { width: auto; }
 }

.nav-number { position: absolute; right: 0; top: 0; }

@media (min-width: 801px) {
 .nav-number { left: calc(100% + 1rem); right: auto; top: -.5rem; }
 }

.nav-arrow {
 align-items: center;
 aspect-ratio: 1/1;
 bottom: 0;
 display: flex;
 position: absolute;
 right: 0;
 }

@media (min-width: 801px) {
 .nav-arrow { position: relative; }
 }

.nav-border { background-color: #ffffff1a; bottom: 0; height: 1px; left: 0; position: absolute; }
.nav-border.is-alt { background-color: #e0dfdf; }

/* ── menu (full overlay) ─────────────────────────────────── */

.menu__wrapper {
 display: flex;
 flex-direction: column;
 overflow-y: scroll;
 overscroll-behavior: none;
 padding: 7.8rem 1.6rem calc(env(safe-area-inset-bottom) + 2rem);
 position: relative;
 }

@media (min-width: 801px) {
 .menu__wrapper { overflow-y: hidden; padding: 10rem 5.4rem 4.4rem; }
 }

.menu__bg { background-color: #000; top: 0; right: 0; bottom: 0; left: 0; position: absolute; }

.menu__border {
 background-color: #fff;
 height: 1px;
 left: 0;
 opacity: .1;
 position: absolute;
 top: calc(4.8rem - 1px);
 }

.socials {
 border-top: 1px solid hsla(0,2%,88%,.1);
 display: flex;
 flex-direction: row;
 gap: 0 1.2rem;
 margin-left: auto;
 padding-top: 1.4rem;
 width: 100%;
 }

@media (min-width: 801px) {
 .socials { border-top: none; margin-left: auto; padding-top: 0; width: auto; }
 }

.socials__item { color: #ffffff80; }

.item-credits { margin-left: auto; }

@media (min-width: 801px) {
 .item-credits { margin-left: 0; }
 }

.menu.light { color: #000; }
.menu.light .menu-list__item-link { color: #00000080; }
.menu.light .menu__bg { background-color: #f6f6f6; }
.menu.light .menu__wrapper { padding: 7.8rem 1.6rem 2rem; }

@media (min-width: 801px) {
 .menu.light .menu__wrapper { padding: 4.4rem 5.4rem 4.4rem 10rem; }
 }

.menu.light .nav-border { opacity: 1; }
.menu.light .socials { border-top: 1px solid #e0dfdf; }

@media (min-width: 801px) {
 .menu.light .socials { border-top: none; }
 }

.menu.light .socials__item { color: #00000080; }

.menu-secondary {
 align-items: flex-end;
 display: flex;
 flex-direction: row;
 margin-top: 1.2rem;
 }

@media (min-width: 801px) {
 .menu-secondary { margin-top: auto; }
 }

.nav-list__item:nth-of-type(2) .nav-link { margin-top: 4rem; }

@media (min-width: 801px) {
 .nav-list__item:nth-of-type(2) .nav-link { margin-top: 0; padding-top: 2.8rem; }
 }

.socials__item-link { transition: opacity .3s cubic-bezier(.445,.05,.55,.95); }
.socials__item-link:hover { opacity: .5; }

/* ── text-image ──────────────────────────────────────────── */

.text-image__wrapper {
 height: 0;
 top: 0; right: 0; bottom: 0; left: 0;
 pointer-events: none;
 position: absolute;
 width: 0;
 z-index: 3;
 }

.text-image {
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 object-fit: cover;
 position: absolute;
 transform: scale(1.4);
 transition: transform 1.4s cubic-bezier(.165,.84,.44,1);
 width: 100%;
 }

.text-image__container {
 aspect-ratio: 1/1;
 clip-path: inset(100% 100%);
 display: block;
 left: 50%;
 position: absolute;
 top: 50%;
 transform: translate(-50%,-50%);
 transition: clip-path 1.4s cubic-bezier(.165,.84,.44,1);
 width: 18rem;
 }

.text-image__container.visible {
 clip-path: inset(0 0);
 transition: clip-path 1s cubic-bezier(.19,1,.22,1);
 }

.text-image__container.visible .text-image {
 transform: scale(1);
 transition: transform 1s cubic-bezier(.19,1,.22,1);
 }

/* ── progresses / scroll-hint ────────────────────────────── */

.progresses { pointer-events: none; position: fixed; z-index: 3; }
.progresses.is-photo { bottom: 0; left: 0; }
.progresses.is-home { left: 0; top: 0; }

.scroll-hint {
 display: none;
 opacity: 1;
 pointer-events: none;
 position: absolute;
 transition: opacity .65s cubic-bezier(.445,.05,.55,.95);
 }

.scroll-hint.hint-up { right: 2rem; top: 1.6rem; }
.scroll-hint.hint-down { bottom: 1.6rem; left: 2rem; }

@media (min-width: 801px) {
 .scroll-hint { display: block; }
 }

.home-progress,
.photos-progress { position: relative; }

.home-progress.scrolled .scroll-hint { opacity: 0; }

.progress-wrapper {
 background-color: #0000004d;
 height: calc(100dvh - 4.8rem);
 overflow: hidden;
 position: absolute;
 top: 4.8rem;
 width: .2rem;
 }

.progress-wrapper.progress-left { left: 0; }
.progress-wrapper.progress-right { right: 0; }

@media (min-width: 801px) {
 .progress-wrapper { height: 100svh; top: 0; }
 }

.progress {
 background-color: #fff;
 height: 100%;
 position: relative;
 transform-origin: top left;
 width: 100%;
 }

.progress-right .progress { transform-origin: top right; }

/* ── wrapper (base) ──────────────────────────────────────── */

.wrapper {
 backface-visibility: hidden;
 left: 0;
 top: 0;
 width: 100%;
 will-change: transform;
 }

/* .wrapper { position: fixed } removed — static scroll layout uses #scroll-wrapper overflow instead */

/* ── pointer-blocker ─────────────────────────────────────── */

.pointer-blocker {
 display: none;
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 pointer-events: none;
 position: fixed;
 width: 100%;
 z-index: 10;
 }

.pointer-blocker.blocking { pointer-events: all; }

@media (min-width: 801px) {
 .pointer-blocker { display: block; }
 }

/* ── arrow ───────────────────────────────────────────────────── */

.arrow { display: block; width: 2.8rem; }
.arrow-stroke { fill: none; stroke: currentcolor; stroke-width: 1.25; }

/* ── split-text ──────────────────────────────────────────────── */

.split-text .line { overflow: hidden; }
.split-text.padded .line { padding-inline: 1px; }

/* ── btn-main ────────────────────────────────────────────────── */

.btn-main__underline {
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 overflow: hidden;
 position: absolute;
 transform-origin: top left;
 width: 100%;
 }

.btn-main__underline:after,
.btn-main__underline:before {
 background-color: #ffffff80;
 content: "";
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 position: absolute;
 width: 100%;
 }

.btn-main__underline:before { opacity: 0; transform: translate(0); }
.btn-main__underline:after {
 opacity: 1;
 transform: translate(0);
 transition: transform .3s cubic-bezier(.77,0,.175,1);
 }

.btn-main__underline-wrapper {
 bottom: -2px;
 display: none;
 height: max(.1rem,1px);
 left: 0;
 position: absolute;
 transform-origin: top left;
 width: 100%;
 }

.btn-main {
 cursor: pointer;
 position: relative;
 transition: opacity .2s cubic-bezier(.445,.05,.55,.95);
 }

.btn-main.underline .btn-main__underline-wrapper { display: block; }
.btn-main:disabled { opacity: .25; }

.btn-main:hover .btn-main__underline:before {
 opacity: 1;
 transform: translate(102%);
 transition: transform .6s cubic-bezier(.77,0,.175,1);
 }

.btn-main:hover .btn-main__underline:after {
 opacity: 0;
 transform: translate(-102%);
 transition: none;
 }

/* ── text-line ───────────────────────────────────────────────── */

.text span { display: block; }
.text-line-wrapper { overflow: hidden; }
.text-line { transform: translate3d(0,110%,0); }

/* ── btn-arrow ───────────────────────────────────────────────── */

.btn-arrow__icon { margin-left: 4.8rem; }

.btn-arrow__border-wrapper {
 background-color: #ffffff1a;
 bottom: -1px;
 height: 1px;
 left: 0;
 position: absolute;
 width: 100%;
 }

.btn-arrow__border {
 height: 100%;
 left: 0;
 overflow: hidden;
 position: absolute;
 top: 0;
 width: 100%;
 }

.btn-arrow__border:after,
.btn-arrow__border:before {
 background-color: #ffffff80;
 content: "";
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 position: absolute;
 width: 100%;
 }

.btn-arrow__border:before { opacity: 0; transform: translate(-102%); }
.btn-arrow__border:after {
 opacity: 1;
 transform: translate(102%);
 transition: transform .6s cubic-bezier(.77,0,.175,1);
 }

.btn-arrow {
 align-items: center;
 border-bottom: 1px solid transparent;
 cursor: pointer;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 padding-block: .7rem .9rem;
 position: relative;
 }

.btn-arrow > span { color: currentcolor; }

.btn-arrow:hover .btn-arrow__border:before {
 opacity: 1;
 transform: translate(0);
 transition: transform 1.1s cubic-bezier(.77,0,.175,1);
 }

.btn-arrow:hover .btn-arrow__border:after {
 opacity: 0;
 transform: translate(0);
 transition: none;
 }

/* ── work-modal ──────────────────────────────────────────────── */

.work-modal {
 display: none;
 top: 0; right: 0; bottom: 0; left: 0;
 position: fixed;
 z-index: 7;
 }

.work-modal.visible { display: block; }

@media (max-width: 800px) {
 .work-modal { height: 100dvh; overflow: hidden; }
 }

.modal-bg {
 background-color: #000;
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 opacity: 0;
 position: absolute;
 width: 100%;
 }

.modal-content {
 background-color: #0d0d0d;
 display: flex;
 flex-direction: row;
 position: relative;
 }

@media (max-width: 800px) {
 .modal-content { height: 100%; overflow-y: scroll; overscroll-behavior: none; }
 }

.modal-wrapper {
 display: flex;
 flex-direction: column;
 padding: 6rem 1.6rem 0;
 }

.modal-actions {
 display: flex;
 flex-direction: row;
 }

@media (min-width: 801px) {
 .modal-actions {
  bottom: 1.6rem;
  gap: 0 .8rem;
  left: 2rem;
  position: absolute;
  z-index: 2;
  }
 }

@media (max-width: 800px) {
 .modal-actions {
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(env(safe-area-inset-bottom) + 3.2rem);
  width: 100%;
  }
 }

.modal-left {
 display: flex;
 flex-direction: column;
 padding-inline: 11rem 15.5rem;
 }

.modal-title {
 position: relative;
 z-index: 2;
 }

@media (min-width: 801px) {
 .modal-title { margin-left: -.4rem; margin-block: 12rem 3rem; }
 }

@media (max-width: 800px) {
 .modal-title { margin-bottom: 2.8rem; margin-left: -.4rem; }
 }

.modal-imgs {
 margin-bottom: 4.4rem;
 margin-top: auto;
 position: relative;
 width: 100%;
 }

@media (min-width: 801px) {
 .modal-imgs { height: min(49vh,40rem); }
 }

@media (max-width: 800px) {
 .modal-imgs { aspect-ratio: 288/174; margin-bottom: .8rem; }
 }

.item-img__ind {
 opacity: 0;
 position: absolute;
 top: -1.6rem;
 transition: opacity .1s cubic-bezier(.445,.05,.55,.95);
 transition-delay: 0s;
 }

.item-img,
.item-img:after {
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 position: absolute;
 width: 100%;
 }

.item-img { transition: transform .85s cubic-bezier(.23,1,.32,1); }

@media (max-width: 800px) {
 .item-img { opacity: 0; transition: opacity .25s cubic-bezier(.445,.05,.55,.95); }
 }

.item-img:after {
 background-color: #0d0d0d;
 content: "";
 opacity: .35;
 transition: opacity .25s cubic-bezier(.445,.05,.55,.95);
 }

.item-img.current { transform: translateZ(0); }
.item-img.current .item-img__ind { opacity: 1; transition-delay: .2s; }
.item-img.current:after { opacity: 0; }

@media (max-width: 800px) {
 .item-img.current { opacity: 1; transform: none; }
 }

.item-img.prev { transform: translate3d(0,-91vh,0); }
.item-img.next { transform: translate3d(0,91vh,0); }

.item-img__element {
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 object-fit: contain;
 object-position: top left;
 position: absolute;
 width: 100%;
 }

.modal-right {
 display: flex;
 flex-direction: column;
 padding: 2.8rem 8.8rem 6.8rem 2.8rem;
 }

.modal-lists {
 display: flex;
 flex-direction: row;
 }

@media (min-width: 801px) {
 .modal-lists { padding-top: 9.2rem; }
 }

@media (max-width: 800px) {
 .modal-lists { margin-bottom: 2.8rem; padding-top: 2rem; }
 }

.modal-list { margin-right: 5.6rem; }

@media (max-width: 800px) {
 .modal-list { margin-right: 0; width: 50%; }
 }

.list__item,
.list__title { margin-bottom: 1.2rem; }

.modal-text { transform: translate3d(0,110%,0); }
.modal-description__wrapper { margin-top: auto; }
.modal-description > span { overflow: hidden; }
.modal-year { margin-bottom: 2rem; }
.modal-url { margin-top: 3.6rem; }

@media (max-width: 800px) {
 .modal-url { margin-top: 1.6rem; }
 }

.btn-close {
 position: absolute;
 right: 2rem;
 top: 2rem;
 z-index: 2;
 }

@media (max-width: 800px) {
 .btn-close { right: 1.6rem; }
 }

.btn-next,
.btn-prev { touch-action: none; }
.btn-prev { padding: .6rem .6rem .6rem 0; }
.btn-next { padding: .6rem 0 .6rem .6rem; }

/* ── orientation-fallback ────────────────────────────────────── */

.orientation-fallback {
 align-items: center;
 background-color: #fff;
 color: #000;
 display: none;
 flex-direction: column;
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 justify-content: center;
 position: fixed;
 width: 100%;
 z-index: 8;
 }

.orientation-fallback.dark { background-color: #000; color: #fff; }

@media screen and (orientation: landscape) and (height <= 600px) {
 .orientation-fallback { display: flex; }
 }

.orientation-fallback__copy {
 padding-inline: 1.2rem;
 text-align: center;
 width: 100%;
 }

/* ── preloader ───────────────────────────────────────────────── */

.preloader-section { background-color: #000; height: 100%; }

.section-right {
 background-color: transparent;
 left: 0;
 position: absolute;
 top: 0;
 }

@media (min-width: 801px) {
 .section-right { background-color: #000; position: relative; }
 }

.filling-section {
 background-color: #0d0d0d;
 height: 100%;
 transform: scaleX(var(--ae489c8e));
 transform-origin: top left;
 width: 100%;
 }

.preloader-number {
 bottom: 0;
 color: #e0dfdf;
 left: 1.6rem;
 overflow: hidden;
 position: absolute;
 }

@media (min-width: 801px) {
 .preloader-number { bottom: 2rem; left: 2rem; }
 }

.loading-span,
.number-span { display: block; }

.loading-label {
 color: #e0dfdf;
 margin-left: 1.6rem;
 margin-top: 1.6rem;
 overflow: hidden;
 }

@media (min-width: 801px) {
 .loading-label { margin-left: 2.4rem; margin-top: 2rem; }
 }

.preloader {
 display: flex;
 flex-direction: row;
 top: 0; right: 0; bottom: 0; left: 0;
 overflow: hidden;
 position: fixed;
 width: 100%;
 z-index: 9;
 }

.preloader.light .filling-section,
.preloader.light .preloader-section { background-color: #fff; }

.preloader.light .loading-label,
.preloader.light .preloader-number { color: #000; }

/* ── highlight-container ─────────────────────────────────────── */

#highlight-container {
 height: 100%;
 top: 0; right: 0; bottom: 0; left: 0;
 overflow: hidden;
 pointer-events: none;
 position: absolute;
 width: 100%;
 }

/* ── header chapters button ──────────────────────────────── */
.header-photos__chapters { margin-top: auto; }

.btn-chapters {
 align-items: center;
 display: flex;
 flex-direction: row;
}

@media (min-width: 801px) {
 .btn-chapters {
 padding-bottom: .4rem;
 text-orientation: mixed;
 writing-mode: vertical-rl;
 }
}