/* FOLHA clone: layout, timing and curves measured from the reference, written from scratch. */
:root {
  --out: cubic-bezier(.215, .61, .355, 1);
  --reveal: cubic-bezier(.07, .51, .12, 1);
  --hover: cubic-bezier(.47, 0, .745, .715);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: #fff; font-family: "Barlow", Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
img, video { display: block; }
.clear { clear: both; }

/* Type */
.text { font-size: .875rem; line-height: 1.6875rem; letter-spacing: .003em; color: #fff; margin: 0; padding: 0 0 1.6875rem; font-weight: 400; }
.text:last-child { padding-bottom: 0; }
.text--tight { padding: 0; }
.text--single { padding-bottom: .9375rem; line-height: 1.6875rem; }
.quote { font-weight: 700; font-size: 3.125rem; line-height: 1.4em; margin: 0; color: #fff; }
@media (max-width: 47.5em) {
  .text { font-size: .75rem; line-height: 1.3125rem; padding-bottom: 1.3125rem; }
  .quote { font-size: 6.5625vw; }
}

/* Figures: frame keeps the ratio, image covers it */
.frame { position: relative; }
.fig { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.fig img, .fig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fig--bottom img { object-position: 50% 100%; }
.fig img.lazy { opacity: 0; transition: opacity .4s linear; }
.fig img.loaded { opacity: 1; }
.img-parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ---------- Scroll engine: the active page is fixed and moved; this panel provides the scroll height ---------- */
.scroll-panel { width: 1px; }
.pages { position: relative; width: 100%; z-index: 100; }
.page { display: none; position: relative; }
.page.is-active { display: block; }
.js-smooth .pages { position: fixed; top: 0; left: 0; }

/* ---------- Loader: progress ring in four stages, then play / skip ---------- */
.loader { position: fixed; inset: 0; z-index: 9999; background: #000; }
.loader__video { position: absolute; inset: 0; }
.loader__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.loader__video video.is-playing { opacity: 1; }
.loader__enter { position: absolute; top: 0; left: calc(50% - 2.25rem); width: 4.5rem; height: 100%; display: flex; justify-content: center; align-items: center; }
.loader__play { display: block; width: 4.5rem; transition: opacity .4s; }
.loader__icon { display: block; position: relative; width: 3.5rem; height: 3.5rem; margin: 0 auto .375rem; }
.loader__icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loader__icon circle { stroke-dashoffset: 170; transition: stroke-dashoffset 4s linear; }
.stage-1 .loader__icon circle { stroke-dashoffset: 90; }
.stage-2 .loader__icon circle { stroke-dashoffset: 70; }
.stage-3 .loader__icon circle { stroke-dashoffset: 40; }
.stage-4 .loader__icon circle { stroke-dashoffset: 0; transition-duration: .6s; }
.show-buttons .loader__icon circle { stroke-dashoffset: 170; transition: stroke-dashoffset .4s linear; }
.show-buttons .loader__play:hover circle { stroke-dashoffset: 0; }
.loader__triangle { position: absolute; top: calc(50% - .375rem); left: calc(50% - .25rem); width: 0; height: 0; border-style: solid; border-width: .375rem 0 .375rem .625rem; border-color: transparent transparent transparent #fff; opacity: 0; transition: opacity .2s linear; }
.show-buttons .loader__play:hover .loader__triangle { opacity: 1; transition-delay: .2s; }
.loader__label, .loader__skip { display: block; width: 4.5rem; text-align: center; padding: 0; opacity: 0; }
.loader__rule { display: block; width: 2rem; height: 1px; margin: .6875rem auto .75rem; background: #fff; opacity: 0; }
.show-buttons .loader__label, .show-buttons .loader__skip, .show-buttons .loader__rule { opacity: 1; transition: opacity .4s; }
.show-buttons .loader__enter:has(.loader__skip:hover) .loader__play, .show-buttons .loader__enter:has(.loader__skip:hover) .loader__rule { opacity: .3; }
.show-buttons .loader__enter:has(.loader__play:hover) .loader__skip, .show-buttons .loader__enter:has(.loader__play:hover) .loader__rule { opacity: .3; }
.loader.is-done .loader__label, .loader.is-done .loader__skip, .loader.is-done .loader__rule { opacity: 0 !important; }
.loader.is-done .loader__icon circle { stroke-dashoffset: 170 !important; transition: stroke-dashoffset .4s var(--hover) !important; }
.loader.is-done { opacity: 0; visibility: hidden; transition: opacity 0s linear .6s, visibility 0s linear .6s; }

/* Full-screen intro video (Play) */
.video-modal { position: fixed; inset: 0; z-index: 9500; background: #000; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; }
.video-modal video { width: 100%; height: 100%; object-fit: contain; }
.video-open .video-modal { opacity: 1; visibility: visible; transition: opacity .4s; }
.close-modal { position: absolute; top: 4rem; right: 4rem; padding: 0 2.5rem 0 0; line-height: .75rem; }
.close-modal__icon { position: absolute; right: 0; top: -.5rem; width: 1.75rem; height: 1.75rem; }
.close-modal__icon::before, .close-modal__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; transform: rotate(45deg); }
.close-modal__icon::after { transform: rotate(-45deg); }

/* Page change: black cover fades in for 400 ms */
.page-cover { position: fixed; inset: 0; z-index: 6000; background: #000; opacity: 0; visibility: hidden; }
.page-cover.is-active { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }

/* ---------- Fixed chrome ---------- */
.site-logo { position: fixed; z-index: 9000; left: 4rem; top: 4rem; width: 2.8125rem; height: .75rem; }
.site-logo svg { display: block; width: 100%; height: 100%; }
.menu-btn { position: fixed; z-index: 9000; left: 2.875rem; top: calc(50% - .75rem); width: 5rem; height: 1.5rem; display: block; }
.menu-btn__inner { position: absolute; inset: 0; transform: rotate(-90deg); }
.menu-btn__text { display: block; padding: 0; line-height: 1.4375rem; }
.menu-btn__square { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; transform: rotate(-225deg); }
.menu-btn__big, .menu-btn__small { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff; }
.menu-btn__small { width: 50%; height: 50%; border-color: transparent #fff #fff transparent; transition: width .25s var(--hover), height .25s var(--hover); }
.no-touch .menu-btn:hover .menu-btn__small, .menu-open .menu-btn__small { width: 75%; height: 75%; }
.head-links { position: fixed; z-index: 9000; top: 4rem; right: 4rem; height: .75rem; transition: opacity .2s linear .2s, visibility 0s linear .4s; }
.video-open .head-links { opacity: 0; visibility: hidden; transition: opacity .4s linear, visibility 0s linear .4s; }
.head-links__link { position: relative; display: inline-block; padding: 0; margin-left: 2.75rem; line-height: .75rem; border-left: 1rem solid transparent; }
.head-links__link::before { content: ""; position: absolute; left: 0; bottom: -.1875rem; width: 0; height: 1px; background: #fff; transition: width 125ms var(--hover); }
.head-links__link::after { content: ""; position: absolute; left: -1rem; top: .1875rem; width: .4375rem; height: .4375rem; border-radius: 50%; border: 1px solid #fff; background: rgba(255, 255, 255, 0); transition: background-color 125ms var(--hover); }
.no-touch .head-links__link:hover::before, .head-links__link.is-current::before { width: 100%; }
.no-touch .head-links__link:hover::after { background: #fff; }

/* ---------- Menu: black curtain opens from the right, items slide in one by one ---------- */
.menu-panel { position: fixed; top: 0; right: 0; left: auto; z-index: 8900; width: 0; height: 100%; overflow: hidden; visibility: hidden; transition: width 1.6s var(--out), visibility 0s linear 1.6s; }
.menu-open .menu-panel { left: 0; right: auto; width: 100%; visibility: visible; transition: width 1.6s var(--out); }
.menu-panel__inner { position: absolute; top: 0; right: 0; width: 100vw; height: 100%; background: #000; }
.menu-open .menu-panel__inner { left: 0; right: auto; }
.menu-panel__image { position: absolute; top: 0; right: 10.8125rem; bottom: 10.8125rem; left: calc(50% + 4rem); z-index: 10; opacity: 0; transition: opacity 0s linear 1.6s; }
.menu-open .menu-panel__image { opacity: 1; transition: opacity .8s linear; }
.menu-panel__nav { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; min-height: 100%; padding: 4rem 10.8125rem; display: flex; align-items: center; }
.menu-panel__list { width: 100%; }
.menu-panel__item { display: block; height: 4.875rem; opacity: 0; transform: translateX(3rem); }
.menu-open .menu-panel__item { opacity: 1; transform: translateX(0); }
.menu-open .menu-panel__item:nth-child(1) { transition: transform 1.6s var(--out) 50ms, opacity .8s linear 50ms; }
.menu-open .menu-panel__item:nth-child(2) { transition: transform 1.6s var(--out) 100ms, opacity .8s linear 100ms; }
.menu-open .menu-panel__item:nth-child(3) { transition: transform 1.6s var(--out) 150ms, opacity .8s linear 150ms; }
.menu-open .menu-panel__item:nth-child(4) { transition: transform 1.6s var(--out) 200ms, opacity .8s linear 200ms; }
.menu-open .menu-panel__item:nth-child(5) { transition: transform 1.6s var(--out) 250ms, opacity .8s linear 250ms; }
.menu-open .menu-panel__item:nth-child(6) { transition: transform 1.6s var(--out) 300ms, opacity .8s linear 300ms; }
.menu-open .menu-panel__item:nth-child(7) { transition: transform 1.6s var(--out) 350ms, opacity .8s linear 350ms; }
.menu-open .menu-panel__item:nth-child(8) { transition: transform 1.6s var(--out) 400ms, opacity .8s linear 400ms; }
.menu-panel__link { position: relative; display: inline-block; height: 4.875rem; line-height: 4.875rem; font-weight: 700; font-size: 2.8125rem; opacity: .15; border-left: 1.875rem solid transparent; transition: opacity .25s linear; }
.no-touch .menu-panel__link:hover, .menu-panel__link.is-current { opacity: 1; }
.menu-panel__count { position: absolute; top: 0; left: -1.875rem; font-weight: 400; font-size: .75rem; line-height: 4.875rem; }

/* ---------- Entrance of a page (after loader or page change) ---------- */
.text-in { opacity: 0; transform: translateX(3rem); transition: transform 1.2s var(--out) .4s, opacity .8s linear .4s; }
.page.is-loaded .text-in { opacity: 1; transform: translateX(0); }
.media-in { overflow: hidden; }
.media-in__cover { position: absolute; inset: 0; background: #000; transform: translateX(0); transition: transform 1.6s var(--out); }
.page.is-loaded .media-in__cover { transform: translateX(-100%); }
.media-in img { transform: translateX(6rem); }
.page.is-loaded .media-in img { transform: translateX(0); transition: transform 1.6s var(--out), opacity .4s linear; }

/* ---------- Home: hero ---------- */
.hero { position: relative; height: 100vh; }
.hero__image { position: absolute; top: 0; right: 0; width: 50%; height: 100%; }
.hero__call { position: absolute; top: 0; left: 0; width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; }
.hero__box { width: 37.5%; max-width: calc(100% - 21.625rem); }
.hero__words { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; padding: 2rem; white-space: nowrap; }
.hero__word { font-weight: 700; font-size: clamp(4rem, 8vw, 8rem); letter-spacing: -.05em; line-height: .65; text-transform: uppercase; opacity: 0; animation: 20s ease-in-out infinite; }
.hero__word--a { animation-name: word-a; }
.hero__word--b { margin-left: 1.73em; animation-name: word-b; }
/* Two words slide in from opposite sides, hold, fade, and loop every 20 s. */
@keyframes word-a { 0% { opacity: 0; transform: translateX(1.5em); } 3% { opacity: 1; transform: translateX(1.5em); } 20% { opacity: 1; transform: translateX(0); } 75% { opacity: 1; transform: translateX(0); } 85% { opacity: 0; transform: translateX(0); } 100% { opacity: 0; transform: translateX(1.5em); } }
@keyframes word-b { 0% { opacity: 0; transform: translateX(-1em); } 5% { opacity: 1; transform: translateX(-1em); } 20% { opacity: 1; transform: translateX(0); } 75% { opacity: 1; transform: translateX(0); } 85% { opacity: 0; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-1em); } }

/* Outline letters */
.letter { position: absolute; z-index: 100; font-size: 1rem; width: 9em; height: 12.625em; }
.letter--o { width: 9.875em; height: 12.75em; }
.letter svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.letter path { opacity: .43; fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 2.4s; }
.letter.is-in path { stroke-dashoffset: 0; }

/* ---------- Home: manifesto ---------- */
.manifesto { position: relative; z-index: 100; padding: 11.75em 0 13.75em; }
.manifesto__letter-f { top: 11.75em; left: calc(31.40625% - 4.5rem); }
.manifesto__small { width: 17.1875%; float: right; margin-right: -3.90625%; }
.manifesto__big { width: 37.5%; margin: -9.375% auto 0; }
.manifesto__big .fig, .reveal-skew .fig { opacity: 0; transform: translateY(10vh) skewX(-5deg); transition: transform 1.2s var(--reveal) .5s, opacity .8s linear .5s; }
.manifesto__big.is-in .fig { opacity: 1; transform: none; }
.manifesto__info { width: 100%; margin-top: -8.75rem; display: flex; align-items: flex-end; flex-direction: row-reverse; }
.manifesto__quote { width: 43.25%; padding-bottom: .375rem; }
.manifesto__text { width: 17.5rem; margin-right: calc(39.125% - 17.5rem); opacity: 0; transition: opacity .8s linear .5s; }
.manifesto__text.is-in { opacity: 1; }
.manifesto__button { width: 13.75rem; margin-left: 17.625%; padding-top: 4rem; opacity: 0; transition: opacity .8s linear .5s; }
.manifesto__button.is-in { opacity: 1; }
.manifesto__letter-o { left: calc(80.625% - 4.9375em); bottom: -5em; }

/* Quote lines enter one after another */
.js-wrap-lines .line { position: relative; display: block; }
.js-wrap-lines .line-inner { position: relative; display: block; transform-origin: 0 50%; opacity: 0; transform: translateX(3rem); }
.js-wrap-lines .line:nth-child(1) .line-inner { transition: transform 1.6s var(--out) .25s, opacity .8s linear .25s; }
.js-wrap-lines .line:nth-child(2) .line-inner { transition: transform 1.6s var(--out) .3s, opacity .8s linear .3s; }
.js-wrap-lines .line:nth-child(3) .line-inner { transition: transform 1.6s var(--out) .35s, opacity .8s linear .35s; }
.js-wrap-lines .line:nth-child(4) .line-inner { transition: transform 1.6s var(--out) .4s, opacity .8s linear .4s; }
.js-wrap-lines .line:nth-child(5) .line-inner { transition: transform 1.6s var(--out) .45s, opacity .8s linear .45s; }
.js-wrap-lines.is-in .line-inner { opacity: 1; transform: translateX(0); }

/* Button: thin frame with a small diamond in the corner that grows on hover */
.button { position: relative; display: block; width: 100%; max-width: 13.75rem; height: 4.5rem; line-height: 4.5rem; text-align: center; white-space: nowrap; overflow: hidden; font-size: .875rem; color: #fff; }
.button__text { position: absolute; inset: 0; z-index: 10; }
.button::before { content: ""; position: absolute; inset: 0; border: 1px solid #666; transition: border-color .25s; }
.button::after { content: ""; position: absolute; right: -.5625rem; bottom: -.5625rem; width: 0; height: 0; border: 1px solid #666; background: #000; transform: rotate(45deg); transition: border-color .25s, width .25s, height .25s; }
.no-touch .button:hover::before { border-color: #fff; }
.no-touch .button:hover::after { border-color: #fff; width: 1.125rem; height: 1.125rem; }

/* ---------- Home: wide image ---------- */
.wide { position: relative; z-index: 90; padding-bottom: 14.75em; }
.wide .frame { margin-bottom: 6.75em; }

/* ---------- Home: zig-zag gallery ---------- */
.gallery { position: relative; padding-bottom: 14.625em; }
.gallery__frame { width: 73.4375%; margin: 0 auto; }
.gallery__inner { position: relative; padding-top: 70%; }
.gallery__slider { position: absolute; inset: 0; }
.gallery__slider .slick-list, .gallery__slider .slick-track { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }
.gallery__slider .slide { position: absolute !important; top: 0 !important; width: calc(33% - .75rem) !important; height: 62.5% !important; display: block !important; visibility: visible !important; overflow: hidden; z-index: 0 !important; opacity: 0 !important; transform: translateY(10vh) skewX(-5deg) !important; transition: transform 1.2s var(--reveal) .5s, opacity .8s linear .5s !important; }
.gallery__slider .slide:nth-child(3n + 1) { left: 0 !important; }
.gallery__slider .slide:nth-child(3n + 2) { top: auto !important; bottom: 0 !important; left: calc(33.333% + .375rem) !important; transition-delay: .6s !important; }
.gallery__slider .slide:nth-child(3n + 3) { left: auto !important; right: 0 !important; transition-delay: .7s !important; }
.gallery__inner.is-in .slide { opacity: 1 !important; transform: none !important; }
/* Pictures slide inside their frames when the set changes */
.gallery__slider .slide .fig { width: 130%; left: 0; transform: translateX(100%); transition: transform .4s var(--hover), left .4s var(--hover); }
.gallery__slider .slide.is-visible .fig { transform: translateX(0); left: -30%; }
.gallery__slider .slide.slick-active .fig { transform: translateX(0); left: 0; }
.gallery__dots { position: absolute; left: 0; top: calc(62.5% + 3.75rem); width: calc(33% - .75rem); }
.dots { height: 1.5rem; display: flex; justify-content: center; }
.dots a { position: relative; display: block; width: 1.5rem; height: 1.5rem; }
.dots a::after { content: ""; position: absolute; top: calc(50% - .0625rem); left: calc(50% - .0625rem); width: .125rem; height: .125rem; border: 1px solid #fff; border-radius: 50%; transition: width .25s, height .25s, top .25s, left .25s; }
.dots a.is-active::after, .no-touch .dots a:hover::after { width: .75rem; height: .75rem; top: calc(50% - .375rem); left: calc(50% - .375rem); }
.gallery__letter-a { left: 71.75%; top: 19.5em; }

/* ---------- Home: stores ---------- */
.stores { position: relative; z-index: 1000; padding: 8.125em 0 2.875rem; }
.stores__map { position: relative; display: block; box-sizing: content-box; width: 12rem; height: 12rem; margin-left: calc(50% - 14rem); border: .1875rem solid #444; border-radius: 50%; overflow: hidden; }
.stores__map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(35deg, #111 0 14px, #161616 14px 15px), #0c0c0c; }
.stores__pin { position: absolute; top: calc(50% - .375rem); left: calc(50% - .375rem); width: .75rem; height: .75rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .4rem rgba(255, 255, 255, .15); }
.stores__list { position: absolute; left: calc(50% + 2rem); top: 50%; transform: translateY(-50%); width: 31.5rem; }
.stores__item { display: block; }
.stores__item * { transition: color .25s; }
.no-touch .stores__item:hover * { color: #8d8d8d; }
/* 24 px rule before each store name */
.dash { position: relative; top: -.25rem; display: inline-block; width: 1.5rem; height: 1px; margin-right: .375rem; overflow: hidden; text-indent: -9999px; background: #fff; }

/* ---------- About page ---------- */
.about-hero { position: relative; height: 100vh; }
.about-hero__quote { position: absolute; left: 17.625%; top: 50%; transform: translateY(-50%); z-index: 20; width: 40%; }
.about-hero__image { position: absolute; right: 10.8125rem; top: 12%; width: 31%; height: 76%; }
.about-hero__letter { left: 52%; bottom: 8%; }
.about-text { position: relative; padding: 8em 0 14.75em; }
.about-text__body { width: 31.5rem; margin-left: 50%; }
.about-text__button { margin-left: 50%; }
.entries { margin-top: 3em; }
.entries .entry { margin-bottom: 2.25em; }
.entries .entry h3 { margin-bottom: .5em; }
.about-text__body + .about-text__button { margin-top: 3em; }

/* ---------- Footer ---------- */
.site-foot { margin: 8.75rem 4rem 0; /* 10em at the 14px footer size */ height: 1.125rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 4rem solid transparent; box-sizing: content-box; position: relative; }
.site-foot__link { position: relative; display: inline-block; padding: 0; line-height: 1.125rem; }
.site-foot__link::before { content: ""; position: absolute; left: 0; bottom: -.1875rem; width: 0; height: 1px; background: #fff; transition: width 125ms var(--hover); }
.no-touch .site-foot__link:hover::before { width: 100%; }
.site-foot__credit { padding: 0; line-height: 1.125rem; opacity: .5; }
.site-foot__credit a { text-decoration: underline; }
.site-foot__icons { height: 1.125rem; display: flex; }
.site-foot__icon { display: block; width: 1.125rem; height: 1.125rem; margin-left: 1.25rem; opacity: .5; transition: opacity .25s; }
.no-touch .site-foot__icon:hover { opacity: 1; }
.site-foot__icon svg { display: block; width: 100%; height: 100%; }

/* ---------- Tablet ---------- */
@media (max-width: 60rem) {
  .site-logo { left: 2.5rem; top: 2.5rem; }
  .menu-btn { left: 1.375rem; }
  .head-links { top: 2.5rem; right: 2.5rem; }
  .menu-panel__image { left: calc(50% + 2.5rem); bottom: 50%; right: 0; }
  .menu-panel__nav { padding: 2.5rem 7.8125rem; }
  .menu-panel__item, .menu-panel__link { height: 3.9375rem; line-height: 3.9375rem; }
  .menu-panel__link { font-size: 2.25rem; }
  .menu-panel__count { line-height: 3.9375rem; }
  .hero { min-height: 100vw; }
  .hero__image { width: 60%; }
  .hero__image img { object-position: 35% 50%; }
  .hero__box { width: 100%; max-width: 33.333vh; }
  .hero__call { width: 40%; border-left: 7.8125rem solid transparent; border-right: 2.5rem solid transparent; }
  .manifesto__small { width: 33.333%; margin-right: -5rem; }
  .manifesto__big { width: 66.667%; margin: -5rem 0 0; padding-left: 7.8125rem; }
  .manifesto__info { display: block; padding-left: calc(66.667% - 12.5rem); }
  .manifesto__quote { width: 100%; padding-bottom: 2.875rem; }
  .manifesto__text { margin-right: 0; }
  .manifesto__button { margin-left: calc(66.667% - 12.5rem); }
  .gallery__frame { width: calc(100% - 15.625rem); }
  .js-wrap-lines .line-inner { transform: none !important; transition: opacity .8s linear .5s !important; }
  .site-foot { margin: 10em 2.5rem 0; border-bottom-width: 2.5rem; }
  .about-hero__quote { left: 7.8125rem; width: 60%; }
  .about-hero__image { right: 2.5rem; width: 40%; }
  .about-text__body, .about-text__button { margin-left: calc(66.667% - 12.5rem); width: auto; padding-right: 2.5rem; }
}

/* ---------- Phones ---------- */
@media (max-width: 47.5em) {
  /* Module spacing is in em; the reference drops the module base to 10px on phones. */
  .manifesto, .wide, .gallery { font-size: .625rem; }
  .site-logo { left: 1.25rem; top: 1.25rem; }
  .menu-btn { right: 1.25rem; left: auto; top: 1.25rem; width: 3.5rem; height: 1rem; }
  .menu-btn__inner { transform: none; }
  .menu-btn__text { line-height: .9375rem; }
  .menu-btn__square { width: 1rem; height: 1rem; }
  .head-links { display: none; }
  .menu-panel__image { left: 33.333%; z-index: 0; }
  .menu-panel__nav { padding: 2.5rem 1.25rem; }
  .menu-panel__item, .menu-panel__link { height: 3rem; line-height: 3rem; }
  .menu-panel__link { font-size: 2rem; opacity: .3; }
  .menu-panel__count { line-height: 3rem; }
  .hero__call { border-left-width: 1.25rem; border-right-width: 1.25rem; }
  .hero__box { width: 100%; max-width: none; }
  .hero__words { padding: 0; }
  .hero__word { font-size: 3rem; }
  .letter { font-size: .625rem; }
  .manifesto { padding-bottom: 20em; }
  .manifesto__small { width: calc(50% - 3.4375rem); margin-right: -1.25rem; }
  .manifesto__big { width: calc(50% + 3.4375rem); padding-left: 0; margin: -3vh 0 0; }
  .manifesto__info { padding-left: calc(50% - 6.875rem); margin-top: 25vw; }
  .manifesto__text { width: 15rem; }
  .manifesto__button { margin-left: auto; margin-right: auto; }
  .manifesto__letter-o { bottom: -1.5em; }
  .gallery { padding-bottom: 20em; }
  .gallery__frame { width: calc(100% - 2.5rem); }
  .gallery__inner { padding-top: 106.4375%; }
  .gallery__slider .slide { width: calc(50% - .625rem) !important; left: 0 !important; }
  .gallery__slider .slide:nth-child(2n + 1) { left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; }
  .gallery__slider .slide:nth-child(2n + 2) { left: auto !important; right: 0 !important; top: auto !important; bottom: 0 !important; }
  .gallery__dots { left: -.625rem; }
  .dots { justify-content: flex-start; }
  .stores { min-height: 23.375rem; } /* same 374 px block as desktop, like the reference */
  .stores__map { width: 7.5rem; height: 7.5rem; margin-left: calc(50% - 8.75rem); }
  .stores__list { left: calc(50% + 1.25rem); width: auto; right: 1.25rem; }
  .site-foot { margin: 10em 1.25rem 0; border-bottom-width: 1.25rem; }
  .site-foot__credit { display: none; }
  .close-modal { top: 1.25rem; right: 1.25rem; }
  .about-hero__quote { left: 1.25rem; width: auto; right: 1.25rem; top: 30%; }
  .about-hero__image { left: 33.333%; right: 0; width: auto; top: 45%; height: 45%; }
  .about-text__body, .about-text__button { margin-left: 1.25rem; padding-right: 1.25rem; }
}
@media (max-width: 35em) {
  .gallery, .wide { padding-bottom: 25em; }
  .manifesto { padding-bottom: 25em; }
  .gallery__inner { padding-top: 136.667%; }
  .gallery__slider .slide { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: 0 !important; }
  .gallery__dots { width: auto; left: 50%; top: calc(100% + 1.5rem); transform: translateX(-50%); }
  .stores__map { margin-left: calc(50% - 8.125rem); }
  .stores__list { left: calc(50% + .625rem); }
}