/* =========================
   LOCAL FONTS
========================= */

@font-face{
  font-family:"Pickyside";
  src: url("fonts/PickysideRegular-vn7w4.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"BigShoulders";
  src: url("fonts/BigShoulders-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"BigShoulders";
  src: url("fonts/BigShoulders-Black.ttf") format("truetype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

/* =========================
   THEME
========================= */

:root{
  --mint: #CDDCBC;
  --blue: #477998;
  --black:#171211;
  --red:  #F64740;
  --dark-red:#A3333D;

  --bg: var(--black);
  --text: var(--mint);

  --line: rgba(205,220,188,.55);
  --shadow: 0 30px 70px rgba(0,0,0,.45);
}

/* =========================
   BASE
========================= */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family:"BigShoulders", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500;
}

img{ max-width:100%; display:block; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.container{
  width:min(1200px, calc(100% - 64px));
  margin-inline:auto;
}

.section{
  position:relative;
  padding: clamp(48px, 6vw, 92px) 0;
  scroll-margin-top: 82px;
}

/* =========================
   TOP NAV
========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(23,18,17,.88);
  backdrop-filter: blur(8px);
}

.nav{ padding: 18px 0; }

.nav__list{
  list-style:none;
  display:flex;
  justify-content:center;
  gap: clamp(18px, 3.5vw, 46px);
  padding:0;
  margin:0;
  flex-wrap:wrap;
}

.nav__link{
  text-decoration:none;
  color: var(--text);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 14px;
  opacity: .95;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .25s ease, opacity .25s ease;
}

.nav__link:hover{
  color: var(--blue);
  opacity: 1;
  text-shadow: none;
}

/* =========================
   HERO (Pickyside moving text background)
========================= */

.hero{
  min-height: 72vh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background: var(--bg);
}

/* background intensity */
.hero-marquee{
  position:absolute;
  inset:0;
  z-index:0;
  opacity: .80;
  pointer-events:auto;
}

/* vignette overlay */
.hero-marquee::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(to bottom,
      rgba(23,18,17,1) 0%,
      rgba(23,18,17,0) 18%
    ),
    linear-gradient(to top,
      rgba(23,18,17,1) 0%,
      rgba(23,18,17,0) 18%
    );
}

/* moving text */
.marquee{
  position:absolute;
  inset:-12%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  font-family:"Pickyside", serif;
  letter-spacing:.02em;
  line-height:1;
  text-transform:lowercase;
  color: rgba(205,220,188,.33);

  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  cursor:default;
}

.marquee__row{
  white-space:nowrap;
  width:100%;
  overflow:hidden;
}

.marquee__move{
  white-space:nowrap;
  width:max-content;
  will-change:transform;
  font-size: clamp(48px, 4.6vw, 96px);
  line-height:.92;

  user-select:none;
  cursor:default;
}

.marquee__move.is-left{ animation: marqueeLeft linear infinite; }
.marquee__move.is-right{ animation: marqueeRight linear infinite; }

@keyframes marqueeLeft{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marqueeRight{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* HERO letter hover */
.marquee__move span{
  display:inline-block;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
  pointer-events:auto;
  cursor:default;
}

.marquee__move span:hover{
  color: var(--red);
  transform: translateY(-2px);
}

.marquee__ch{
  display:inline-block;
  pointer-events:auto;
  transition: opacity .15s ease;
  user-select:none;
  cursor:default;
}

.marquee__ch:hover{
  opacity:1;
}

.marquee__space{
  width:.6em;
  display:inline-block;
}

/* Foreground */
.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  padding: 40px 0 10px;
  pointer-events:none;
}

.hero__logo{
  width:min(720px, 92vw);
  display:grid;
  place-items:center;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
  pointer-events:none;
}

.logo__img{
  width:100%;
  height:auto;
  pointer-events:none;
}

.logo__fallback{
  text-align:center;
  color: var(--text);
  font-family:"Pickyside", serif;
  font-size: clamp(54px, 7vw, 112px);
  line-height:.88;
  letter-spacing:.02em;
  display:grid;
  gap:6px;
}

/* =========================
   ABOUT
========================= */

.about__grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 4vw, 52px);
  align-items:stretch;
}

.about__text{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.about__title{
  margin:160px 0 0;
  color: var(--text);
  font-family:"Pickyside", serif;
  font-size: clamp(100px, 9vw, 150px);
  letter-spacing:.02em;
  line-height:.85;
}

.about__body{
  margin:0;
  font-size: clamp(18px, 2vw, 26px);
  line-height:1.4;
  letter-spacing:.02em;
  text-transform:uppercase;
  color: var(--text);
  opacity:.95;
}

.about__placeholder{
  background: var(--text);
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  margin-left:auto;
  box-shadow:none;
  position:relative;
  overflow:hidden;
}

.about__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}

/* =========================
   GALLERY (CLEAN + FIXED LAYOUT)
========================= */

.gallery__inner{
  width:100%;
  padding-left:24px;
  padding-right:24px;
}

.gallery__heading{
  margin:0 0 60px;
  letter-spacing:.02em;
  line-height:.9;
  text-transform:uppercase;
  perspective:900px;
  transform-style:preserve-3d;
}

.gallery__row{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}

.gallery__heading--sub{
  display:block;
  margin-top:.06em;
}

.gallery__heading--main,
.gallery__heading--sub,
.gallery__heading--accent{
  font-size: clamp(44px, 8vw, 118px);
  font-weight:900;
}

.gallery__heading--main,
.gallery__heading--sub{
  color: var(--text);
}

.gallery__heading--accent{
  color: var(--red);
}

.gallery__skin{
  margin-left:.55em;
}

.gallery__heading .marquee__ch{
  display:inline-block;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    color .2s ease;
}

.gallery__heading .marquee__ch:hover{
  transform: rotateY(180deg);
}

.gallery__heading .marquee__space{
  width:.55em;
  display:inline-block;
}

.gallery__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.5vw, 34px);
}

.card{
  background:#f7f7f7;
  aspect-ratio: 3 / 4;
  box-shadow:none;
  overflow:hidden;
  position:relative;
}

.card img,
.card video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card__fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#111;
  letter-spacing:.12em;
}

/* =========================
   BOOK HEADING
========================= */

.book__heading-wrap{
  position:relative;
  display:inline-block;

  --mx:-999px;
  --my:-999px;
  --gun-w:140px;
  --gun-h:140px;
}

.book__heading{
  margin:0 0 28px;
  letter-spacing:.02em;
  line-height:.9;
  text-transform:uppercase;
  display:inline-block;
  position:relative;
  z-index:1;
}

/* main text */
.book__heading--main,
.book__heading--sub{
  display:block;
  font-size: clamp(52px, 8.6vw, 128px);
  color: var(--text);
  font-weight:900;
}

/* accent */
.book__heading--accent{
  color: var(--red);
}

/* swap layer */
.book__heading-swap{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:0;

  background: var(--mint);

  -webkit-mask-image: url("assets/icons/tattoo-gun.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: var(--gun-w) var(--gun-h);
  -webkit-mask-position: var(--mx) var(--my);

  mask-image: url("assets/icons/tattoo-gun.svg");
  mask-repeat: no-repeat;
  mask-size: var(--gun-w) var(--gun-h);
  mask-position: var(--mx) var(--my);
}

.book__heading--swap{
  margin:0;
  position:absolute;
  inset:0;
}

.book__heading--swap .book__heading--main,
.book__heading--swap .book__heading--sub,
.book__heading--swap .book__heading--accent{
  color: var(--black);
}

.book__heading-wrap.is-active .book__heading-swap{
  opacity:1;
}

/* =========================
   FORM
========================= */

.form{ margin-top:26px; }

.field{ display:block; margin:0 0 26px; }

.field__label{
  display:block;
  color: var(--text);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
  font-size:18px;
}

.field__input{
  width:100%;
  font-size:18px;
  padding:10px 6px 12px;
  color: var(--text);
  background:transparent;
  border:none;
  border-bottom:2px solid var(--line);
  outline:none;
  font-family:"BigShoulders", sans-serif;
  font-weight:500;
  letter-spacing:.02em;
}

.field__input:focus{
  border-bottom-color: var(--text);
}

.form__actions{
  display:flex;
  justify-content:flex-end;
  margin-top:30px;
}

.btn{
  border:none;
  background: var(--blue);
  color: var(--text);
  letter-spacing:.08em;
  font-size:42px;
  font-weight:900;
  padding:18px 56px;
  cursor:pointer;
  box-shadow: var(--shadow);
  text-transform:uppercase;
}

.btn:hover{ filter: brightness(1.08); }

.form__msg{
  margin:16px 0 0;
  color: var(--text);
  opacity:.95;
  min-height:22px;
  letter-spacing:.02em;
}

/* =========================
   BACK TO TOP
========================= */

.back-to-top{
  position: fixed;
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 34px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  background: var(--red);
  color: var(--text);
  font-family: "BigShoulders", sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity .24s ease,
    transform .24s ease,
    border-color .22s ease,
    color .22s ease;
}

.back-to-top::before{
  content: "";
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg) translateY(2px);
}

.back-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover{
  background: var(--dark-red);
  color: var(--text);
}

.back-to-top:focus-visible{
  outline: none;
}

@media (max-width: 640px){
  .back-to-top{
    width: 29px;
    height: 29px;
  }

  .back-to-top::before{
    width: 6px;
    height: 6px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
  }
}

/* =========================
   CONTACT + FOOTER
========================= */

.contact__title{
  margin:0 0 10px;
  font-size:56px;
  color: var(--text);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.contact__text{
  margin:0;
  max-width:70ch;
  color: var(--text);
  opacity:.90;
  font-size:20px;
  letter-spacing:.02em;
}

/* =========================
   PREMIUM FOOTER
========================= */

.footer--premium{
  position: relative;
  padding: 0 0 34px;
  margin-top: clamp(60px, 8vw, 20px);
  border-top: 1px solid rgba(205,220,188,.14);
  overflow: hidden;
}

.footer--premium::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(205,220,188,0) 0%,
    rgba(205,220,188,.26) 20%,
    rgba(246,71,64,.22) 50%,
    rgba(205,220,188,.26) 80%,
    rgba(205,220,188,0) 100%
  );
  pointer-events:none;
}

.footer__shell{
  position: relative;
  padding-top: clamp(34px, 5vw, 56px);
}

.footer__top{
  display:grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(0, 1.6fr);
  gap: clamp(30px, 5vw, 80px);
  align-items:start;
  padding-bottom: clamp(28px, 4vw, 42px);
}

.footer__brand{
  max-width: 420px;
}

.footer__logo-link{
  display:inline-block;
  text-decoration:none;
}

.footer__brand-name{
  display:block;
  font-family:"Pickyside", serif;
  font-size: clamp(42px, 5vw, 72px);
  line-height:.9;
  color: var(--text);
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

.footer__logo-link:hover .footer__brand-name{
  color: var(--red);
  transform: translateY(-1px);
}

.footer__brand-text{
  margin: 18px 0 0;
  max-width: 32ch;
  color: rgba(205,220,188,.78);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
}

.footer__col{
  position:relative;
  padding-top: 4px;
}

.footer__heading{
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(205,220,188,.58);
}

.footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}

.footer__list li{
  color: rgba(205,220,188,.88);
  font-size: clamp(19px, 1.5vw, 24px);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.footer__list a{
  position:relative;
  display:inline-block;
  text-decoration:none;
  color: var(--text);
  transition: color .22s ease, transform .22s ease, opacity .22s ease;
}

.footer__list a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .22s ease;
  opacity:.8;
}

.footer__list a:hover{
  color: var(--blue);
  transform: translateX(3px);
}

.footer__list a:hover::after{
  transform: scaleX(1);
}

.footer__list--meta li{
  color: rgba(205,220,188,.72);
  font-size: clamp(16px, 1.2vw, 19px);
  font-style: italic;
}

.footer__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 18px;
  min-height: 48px;
  padding: 12px 18px;
  text-decoration:none;
  color: var(--text);
  background: rgba(71,121,152,.14);
  border: 1px solid rgba(71,121,152,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.footer__cta:hover{
  background: rgba(71,121,152,.22);
  border-color: rgba(71,121,152,.55);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 18px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(205,220,188,.12);
  flex-wrap: wrap;
}

.footer__bottom-left,
.footer__bottom-right{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer__bottom small,
.footer__bottom a{
  color: rgba(205,220,188,.68);
  text-decoration:none;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .22s ease, opacity .22s ease;
}

.footer__bottom a:hover{
  color: var(--text);
}

.footer__dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(205,220,188,.35);
}

/* subtle premium motion */
@media (prefers-reduced-motion: no-preference){
  .footer__col,
  .footer__brand{
    animation: footerFadeUp .7s ease both;
  }

  .footer__brand{ animation-delay: .03s; }
  .footer__col:nth-child(1){ animation-delay: .08s; }
  .footer__col:nth-child(2){ animation-delay: .14s; }
  .footer__col:nth-child(3){ animation-delay: .20s; }

  @keyframes footerFadeUp{
    from{
      opacity:0;
      transform: translateY(14px);
    }
    to{
      opacity:1;
      transform: translateY(0);
    }
  }
}

/* responsive */
@media (max-width: 980px){
  .footer__top{
    grid-template-columns: 1fr;
  }

  .footer__cols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .footer__cols{
    grid-template-columns: 1fr;
  }

  .footer__brand-text{
    max-width: none;
  }

  .footer__bottom{
    align-items:flex-start;
  }

  .footer__bottom-left,
  .footer__bottom-right{
    width:100%;
  }
}
/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px){
  .container{ width: min(1200px, calc(100% - 40px)); }
  .about__grid{ grid-template-columns: 1fr; }
  .about__placeholder{ margin-left:0; }
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .container{ width: min(1200px, calc(100% - 28px)); }
  .gallery__grid{ grid-template-columns: 1fr; }

  .gallery__row{
    white-space:nowrap;
    flex-wrap:nowrap;
  }

  .gallery__heading--main,
  .gallery__heading--sub,
  .gallery__heading--accent{
    font-size: clamp(24px, 7.1vw, 54px);
  }

  .gallery__skin{
    margin-left:.35em;
  }

  .gallery__heading .marquee__space{
    width:.35em;
  }

  .gallery__heading--accent::after{
    content:",";
  }

  .gallery__heading--sub .marquee__ch:first-child{
    display:none;
  }

  .btn{ width:100%; }
  .form__actions{ justify-content:stretch; }

  .about__title{
    margin-top:30px;
    font-size:72px;
  }

  .book__heading-wrap{
    --gun-w:110px;
    --gun-h:110px;
  }
}

/* =========================
   BODY CURSOR HELPER FOR JS
========================= */

.cursor-hidden{
  cursor:none;
}

/* =========================
   GALLERY PAGE
========================= */

.gallery-page{
  background: var(--bg);
  color: var(--text);
}

.gallery-page #main{
  padding-bottom: 40px;
}

.gallery-page__inner{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}

/* title section */
.gallery-page-hero{
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(18px, 2vw, 28px);
}

.gallery-page__title{
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 30px);
  flex-wrap: wrap;
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.gallery-page__title-main,
.gallery-page__title-accent{
  font-family: "BigShoulders", sans-serif;
  font-weight: 900;
  font-size: clamp(72px, 11vw, 170px);
}

.gallery-page__title-main{
  color: var(--text);
}

.gallery-page__title-accent{
  color: var(--red);
}

/* gallery wrapper */
.gallery-editorial{
  padding-top: 14px;
  padding-bottom: 20px;
}

.gallery-editorial__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "item01 item04 item07 item10"
    "item01 item05 item07 item10"
    "item02 item05 item08 item11"
    "item02 item06 item09 item12"
    "item03 item06 .      item12";
  gap: 24px;
  align-items: stretch;
}

/* cards */
.gallery-editorial__item{
  background: var(--bg); /* of transparant */
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.gallery-editorial__item img,
.gallery-editorial__item video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.gallery-editorial__item:hover img,
.gallery-editorial__item:hover video{
  transform: none;
}

/* fixed layout areas */
.gallery-editorial__item--01{ grid-area: item01; aspect-ratio: 0.74 / 1.18; }
.gallery-editorial__item--02{ grid-area: item02; aspect-ratio: 0.74 / 1.18; }
.gallery-editorial__item--03{ grid-area: item03; aspect-ratio: 0.74 / 0.74; }

.gallery-editorial__item--04{ grid-area: item04; aspect-ratio: 1 / 0.92; }
.gallery-editorial__item--05{ grid-area: item05; aspect-ratio: 0.86 / 1.34; }
.gallery-editorial__item--06{ grid-area: item06; aspect-ratio: 0.86 / 1.34; }

.gallery-editorial__item--07{ grid-area: item07; aspect-ratio: 0.74 / 1.18; }
.gallery-editorial__item--08{ grid-area: item08; aspect-ratio: 1 / 0.74; }
.gallery-editorial__item--09{ grid-area: item09; aspect-ratio: 1 / 0.74; }

.gallery-editorial__item--10{ grid-area: item10; aspect-ratio: 0.74 / 1.18; }
.gallery-editorial__item--11{ grid-area: item11; aspect-ratio: 1 / 0.74; }
.gallery-editorial__item--12{ grid-area: item12; aspect-ratio: 0.86 / 1.34; }

/* optional: if an item has no real image yet */
.gallery-editorial__item::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* footer on gallery page a bit quieter */
.gallery-page .footer--premium{
  border-top: none;
}

.gallery-page__title--flip{
  perspective: 900px;
  transform-style: preserve-3d;
}

.gallery-page__title--flip .marquee__ch{
  display:inline-block;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    color .2s ease;
}

.gallery-page__title--flip .marquee__ch:hover{
  transform: rotateY(180deg);
}

.gallery-page__title--flip .marquee__space{
  width:.55em;
  display:inline-block;
}

/* =========================
   RESPONSIVE GALLERY PAGE
========================= */

@media (max-width: 1100px){
  .gallery-page__inner{
    width: min(1200px, calc(100% - 40px));
  }

  .gallery-editorial__grid{
    gap: 20px;
  }

  .gallery-page__title-main,
  .gallery-page__title-accent{
    font-size: clamp(64px, 10vw, 132px);
  }
}

@media (max-width: 820px){
  .gallery-page-hero{
    padding-top: 26px;
    padding-bottom: 16px;
  }

  .gallery-page__title{
    gap: 10px 16px;
    line-height: .9;
  }

  .gallery-editorial__grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "item01 item04"
      "item01 item05"
      "item02 item05"
      "item02 item06"
      "item03 item06"
      "item07 item10"
      "item07 item11"
      "item08 item11"
      "item08 item12"
      "item09 item12";
    gap: 18px;
  }

  .gallery-editorial__item--01,
  .gallery-editorial__item--02,
  .gallery-editorial__item--07,
  .gallery-editorial__item--10{
    aspect-ratio: 0.78 / 1.12;
  }

  .gallery-editorial__item--04,
  .gallery-editorial__item--08,
  .gallery-editorial__item--09,
  .gallery-editorial__item--11{
    aspect-ratio: 1 / 0.78;
  }

  .gallery-editorial__item--05,
  .gallery-editorial__item--06,
  .gallery-editorial__item--12{
    aspect-ratio: 0.88 / 1.18;
  }
}

@media (max-width: 560px){
  .gallery-page__inner{
    width: min(1200px, calc(100% - 28px));
  }

  .gallery-page-hero{
    padding-top: 18px;
    padding-bottom: 10px;
  }

  .gallery-page__title{
    display: block;
  }

  .gallery-page__title-main,
  .gallery-page__title-accent{
    display: block;
    font-size: clamp(52px, 14vw, 84px);
  }

  .gallery-page__title-accent{
    margin-top: -4px;
  }

  .gallery-editorial__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "item01"
      "item02"
      "item03"
      "item04"
      "item05"
      "item06"
      "item07"
      "item08"
      "item09"
      "item10"
      "item11"
      "item12";
    gap: 16px;
  }

  .gallery-editorial__item{
    aspect-ratio: 4 / 5 !important;
  }
}

/* =========================
   STORY PAGE
========================= */

/* =========================
   STORY PAGE
========================= */

html{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.story-page{
  background: var(--bg);
  color: var(--text);
}

/* keep the same nav behavior as index */
.story-page #main,
.story-main{
  width: 100%;
  height: calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}

/* exact 50 / 50 split */
.story-split{
  display: grid;
  grid-template-columns: 50% 50%;
  width: 100%;
  height: calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}

.story-split__media,
.story-split__panel{
  width: 100%;
  min-width: 0;
  height: calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}

/* left image side */
.story-split__media{
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.story-split__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(100%);
}

/* right panel */
.story-split__panel{
  overflow: hidden;
  background: var(--bg);
}

/* only right side scrolls */
.story-split__scroll{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-red) transparent;
}

.story-split__scroll::-webkit-scrollbar{
  width: 8px;
}

.story-split__scroll::-webkit-scrollbar-track{
  background: transparent;
}

.story-split__scroll::-webkit-scrollbar-thumb{
  background: var(--dark-red);
  border-radius: 999px;
}

/* inner content */
.story-split__inner{
  min-height: 140vh;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* title */
.story-title{
  margin: 0 0 36px;
  line-height: .84;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.story-title__top,
.story-title__bottom{
  display: block;
  font-family: "BigShoulders", sans-serif;
  font-weight: 900;
}

.story-title__top{
  color: var(--red);
  font-size: clamp(86px, 9vw, 172px);
}

.story-title__bottom{
  color: var(--text);
  font-size: clamp(108px, 11vw, 220px);
}

/* body copy */
.story-copy{
  max-width: 760px;
}

.story-copy p{
  margin: 0 0 22px;
  color: var(--text);
  opacity: .95;
  font-family: "BigShoulders", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(22px, 1.9vw, 38px);
  line-height: 1.12;
}

.story-copy p:first-child{
  margin-top: 6px;
}

/* large desktop */
@media (min-width: 1400px){
  .story-split{
    grid-template-columns: 50% 50%;
  }

  .story-split__inner{
    padding: 64px;
  }

  .story-copy p{
    font-size: clamp(24px, 1.8vw, 40px);
  }
}

/* tablet */
@media (max-width: 1100px){
  .story-split{
    grid-template-columns: 50% 50%;
  }

  .story-split__inner{
    padding: 40px;
  }

  .story-title{
    margin-bottom: 28px;
  }

  .story-title__top{
    font-size: clamp(74px, 8vw, 122px);
  }

  .story-title__bottom{
    font-size: clamp(90px, 10vw, 150px);
  }

  .story-copy p{
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.16;
  }
}

/* mobile */
@media (max-width: 820px){
  .story-page{
    overflow: auto;
  }

  .story-page #main,
  .story-main{
    height: auto;
    min-height: 0;
  }

  .story-split{
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .story-split__media,
  .story-split__panel{
    height: auto;
    min-height: 0;
  }

  .story-split__media{
    height: 58vh;
    min-height: 420px;
  }

  .story-split__panel{
    overflow: visible;
  }

  .story-split__scroll{
    height: auto;
    overflow: visible;
  }

  .story-split__inner{
    min-height: 0;
    padding: 34px 24px 40px;
  }

  .story-title{
    margin-bottom: 24px;
    line-height: .88;
  }

  .story-title__top{
    font-size: clamp(66px, 15vw, 108px);
  }

  .story-title__bottom{
    font-size: clamp(82px, 18vw, 128px);
  }

  .story-copy p{
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 18px;
  }
}

/* small mobile */
@media (max-width: 560px){
  .story-split__media{
    height: 50vh;
    min-height: 320px;
  }

  .story-split__inner{
    padding: 28px 18px 34px;
  }

  .story-copy p{
    font-size: 20px;
  }
}