/* ═══════════════════════════════════════════════════════════
   SONDER — page components
   Loaded by every page except the home page, so index.html's
   payload is untouched. Same rules as the rest of the system:
   rem only (1rem = 10 design px at every breakpoint), colours and
   easing from the tokens in main.css, and only the five
   breakpoints that already exist — 768, 1024, max-767, max-1023.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════ PAGE HERO ═══════════════
   The home hero's sticky pin at reduced height: later sections are
   opaque and simply scroll up over the held image. */
.page-hero{
  height:58vh;min-height:44rem;overflow:hidden;position:sticky;top:0;width:100%;z-index:2;
  display:flex;align-items:flex-end;
  padding:12rem 0 calc(3rem + env(safe-area-inset-bottom,0px));
}
.page-hero--tall{height:78vh;min-height:56rem}
.page-hero__bed{position:absolute;inset:0;z-index:-1;overflow:hidden}
.page-hero__bed .hero-card__img-bw,
.page-hero__bed .hero-card__img-color{aspect-ratio:auto;height:100%;width:100%;min-width:100%}
.page-hero__inner{position:relative;display:flex;flex-direction:column;gap:1.6rem}
.page-hero__eyebrow{color:var(--red)}
.page-hero__title{
  color:#fff;font-size:6.4rem;font-weight:800;letter-spacing:-.02em;line-height:5.1rem;
  mix-blend-mode:difference;text-transform:uppercase;
}
.page-hero__title>span{display:inline-block;transform-origin:50% 100%;will-change:transform}
.page-hero__lead{
  color:#fff;font-family:var(--sans);font-size:1.2rem;font-weight:500;letter-spacing:-.02rem;
  line-height:1.6rem;max-width:34rem;mix-blend-mode:difference;text-transform:uppercase;
}
.page-hero__lead strong{color:var(--red)}
.page-hero__meta{
  color:#fff;font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;
  mix-blend-mode:difference;text-transform:uppercase;
}
@media (min-width:768px){
  .page-hero__title{font-size:8rem;line-height:6.4rem}
  .page-hero__lead{font-size:1.3rem;line-height:1.9rem;max-width:42rem}
}
@media (min-width:1024px){
  .page-hero__title{font-size:11rem;line-height:8.6rem}
}

/* a plain light header block for pages that want type, not imagery */
.page-head{padding:16rem 0 5rem;position:relative;z-index:6;background:var(--bg)}
.page-head__title{font-size:8rem;font-weight:800;line-height:6.4rem;text-transform:uppercase;letter-spacing:-.02em}
.page-head__lead{
  font-family:var(--sans);font-size:1.2rem;font-weight:500;line-height:1.6rem;
  margin-top:2rem;max-width:44rem;text-transform:uppercase;
}
.page-head__lead strong{color:var(--red)}
@media (min-width:1024px){
  .page-head__title{font-size:14rem;line-height:11rem}
  .page-head__lead{font-size:1.3rem;line-height:1.9rem}
}

/* ═══════════════ SECTION SHELL ═══════════════
   Any content block that must scroll over a sticky hero. */
.sec{padding:9rem 0;position:relative;z-index:6;background:var(--bg)}
.sec--tight{padding:6rem 0}
.sec--dark{background:var(--black);color:#fff}
.sec--dark .h2{color:var(--red)}
.sec__head{align-items:baseline;display:flex;gap:2rem;justify-content:space-between;margin-bottom:4rem}
.sec__note{font-family:var(--mono);font-size:1.3rem;letter-spacing:-.07rem;text-transform:uppercase;opacity:.55}

/* ═══════════════ PINNED NARRATIVE ═══════════════
   A sticky stage with full-height spacers behind it: scrolling the
   spacers swaps the bed image and curtains each statement through. */
.pinned-section{position:relative;z-index:6;background:var(--black)}
.pinned-section__stage{
  height:var(--inner-vh);overflow:hidden;position:sticky;top:0;
  display:flex;align-items:center;
}
.pinned-section__bed{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.pinned-section__bed.is-on{opacity:1}
.pinned-section__bed img{height:100%;width:100%;object-fit:cover;filter:grayscale(1) brightness(.42)}
.pinned-section__inner{position:relative;width:100%;z-index:2}
.pinned-section__index{
  color:var(--red);font-family:var(--mono);font-size:1.3rem;letter-spacing:-.07rem;
  margin-bottom:2rem;text-transform:uppercase;
}
.pinned-section__line{
  color:#fff;font-size:6.4rem;font-weight:800;line-height:5.1rem;text-transform:uppercase;
  letter-spacing:-.02em;max-width:22ch;
  opacity:0;transform:translateY(2.4rem);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  position:absolute;top:0;left:0;right:0;pointer-events:none;
}
.pinned-section__line.is-on{opacity:1;transform:none;position:relative;pointer-events:auto}
.pinned-section__line i{color:var(--red);font-style:normal;font-weight:300}
.pinned-section__steps{position:relative}
.pinned-section__step{height:100vh}
@media (min-width:768px){.pinned-section__line{font-size:8rem;line-height:6.4rem}}
@media (min-width:1024px){.pinned-section__line{font-size:11rem;line-height:8.6rem}}

/* ═══════════════ STAT STRIP ═══════════════ */
.stat-strip{display:grid;gap:3rem 1.4rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat-strip__item{border-top:1px solid var(--red-1);padding-top:1.4rem}
.stat-strip__num{color:var(--red);font-size:6.4rem;font-weight:800;line-height:5.1rem;text-transform:uppercase}
.stat-strip__label{
  font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;
  margin-top:.8rem;text-transform:uppercase;opacity:.6;
}
@media (min-width:1024px){.stat-strip__num{font-size:8rem;line-height:6.4rem}}

/* ═══════════════ GENERIC DRAG RAIL ═══════════════
   Same behaviour as the categories strip, without its section prefix. */
.rail{position:relative;overflow:hidden}
@media (max-width:1023px){.rail{overflow-x:auto;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}}
@media (min-width:1024px){.rail{cursor:none}}
.rail__track{display:flex;gap:1.2rem;width:max-content;will-change:transform}
.rail__track>li{width:25.5rem;flex-shrink:0}
.rail__track>li.is-wide{width:38rem}
.rail__foot{align-items:center;display:flex;gap:3rem;margin-top:3rem}
.rail__foot .scroll{flex:1}
.rail-card{display:block;position:relative}
.rail-card__img{aspect-ratio:25.5/32;background:var(--red-1);overflow:hidden;margin-bottom:1rem}
.rail-card__img img{height:100%;width:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s var(--ease),transform .7s var(--ease)}
.rail-card:hover .rail-card__img img{filter:grayscale(0);transform:scale(1.04)}
.rail-card__title{font-size:2.4rem;font-weight:800;line-height:2rem;text-transform:uppercase}
.rail-card__meta{font-family:var(--mono);font-size:1.1rem;letter-spacing:-.05rem;margin-top:.6rem;opacity:.6;text-transform:uppercase}

/* ═══════════════ JOURNAL INDEX ═══════════════ */
.journal-list{position:relative;border-top:1px solid var(--red-1)}
@media (min-width:1024px){.journal-list{cursor:none}}
.journal-row{
  align-items:baseline;border-bottom:1px solid var(--red-1);display:grid;gap:.6rem 2rem;
  grid-template-columns:auto 1fr;padding:2.6rem 0;position:relative;
}
@media (min-width:768px){.journal-row{grid-template-columns:6rem 1fr auto;padding:3.4rem 0;align-items:center}}
.journal-row__num{color:var(--red);font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem}
.journal-row__title{
  font-size:4rem;font-weight:800;line-height:3.2rem;text-transform:uppercase;letter-spacing:-.02em;
}
.journal-row__title>span{display:inline-block;transition:transform .4s var(--ease)}
.journal-row:hover .journal-row__title>span{transform:scaleY(1.14)}
.journal-row__meta{
  font-family:var(--mono);font-size:1.1rem;letter-spacing:-.05rem;opacity:.6;
  text-transform:uppercase;grid-column:2;
}
@media (min-width:768px){.journal-row__meta{grid-column:auto;text-align:right}}
.journal-row__cat{color:var(--red)}
@media (min-width:1024px){
  .journal-row__title{font-size:7rem;line-height:5.6rem}
}

/* ═══════════════ ARTICLE ═══════════════ */
/* the reading rail sits above everything, pinned to the viewport top */
.read-progress{position:fixed;top:0;left:0;right:0;z-index:1500;height:2px;margin:0;background:transparent}
.read-progress::after{background:rgba(0,0,0,.12)}
.read-progress .scroll__fill{height:2px;width:100%;transform-origin:left center}

.article{padding:7rem 0 9rem;position:relative;z-index:6;background:var(--bg)}
.article__body{margin:0 auto;max-width:66rem}
.article__lead{
  font-family:var(--sans);font-size:1.6rem;font-weight:600;line-height:2.2rem;
  margin-bottom:3.4rem;text-transform:uppercase;
}
.article__lead strong{color:var(--red)}
.article__p{font-family:var(--sans);font-size:1.4rem;line-height:2.4rem;margin-bottom:2rem}
.article__p strong{color:var(--red);font-weight:600}
.article__h{font-size:4rem;font-weight:800;line-height:3.2rem;margin:5rem 0 2rem;text-transform:uppercase}
.article__pull{
  color:var(--red);font-size:5.4rem;font-weight:800;line-height:4.4rem;
  margin:5.4rem 0;text-transform:uppercase;letter-spacing:-.02em;
  transform-origin:50% 100%;
}
.article__figure{margin:4rem 0;overflow:hidden;position:relative;aspect-ratio:3/2;background:var(--red-1)}
.article__figure img{height:100%;width:100%;object-fit:cover;will-change:transform}
.article__figure--wide{margin:6rem 0;max-width:none;width:100%}
.article__caption{
  font-family:var(--mono);font-size:1.1rem;letter-spacing:-.05rem;margin-top:1rem;
  opacity:.55;text-transform:uppercase;
}
.article__meta{
  display:flex;flex-wrap:wrap;gap:1.6rem;font-family:var(--mono);font-size:1.2rem;
  letter-spacing:-.06rem;text-transform:uppercase;
}
.article__meta span{color:var(--red)}
@media (min-width:1024px){
  .article__lead{font-size:1.8rem;line-height:2.6rem}
  .article__p{font-size:1.5rem;line-height:2.7rem}
  .article__pull{font-size:8rem;line-height:6.4rem}
  .article__figure--wide{margin-left:-12rem;margin-right:-12rem;width:auto}
}

/* ═══════════════ CONTACT ═══════════════ */
.contact-grid{display:grid;gap:5rem}
@media (min-width:1024px){.contact-grid{grid-template-columns:1.2fr .8fr;gap:8rem}}
.contact-form{display:flex;flex-direction:column;gap:3.4rem}
/* the floating-label CSS keys off .footer__label, which is white-on-dark —
   the same override the signup overlay already carries */
.contact-form .footer__label{border-bottom-color:var(--red-1)}
.contact-form .footer__label input,
.contact-form .footer__label textarea{
  background:none;border:0;color:var(--black);font-family:var(--mono);font-size:1.6rem;
  letter-spacing:-.07rem;outline:none;width:100%;
}
/* the message field takes a static label instead: a floating one would end up
   pinned to the bottom of a tall box */
.contact-form__area{display:block;padding-bottom:1rem;position:relative}
.contact-form__area textarea{
  display:block;line-height:2.2rem;min-height:11rem;padding:0;resize:vertical;
}
.contact-form__area textarea::placeholder{color:var(--black);opacity:.3;text-transform:uppercase}
.contact-form__subjects{display:flex;flex-wrap:wrap;gap:.7rem}
.contact-form__legend{
  font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;
  margin-bottom:1.2rem;text-transform:uppercase;opacity:.6;
}

.contact-info{display:flex;flex-direction:column;gap:2rem}
.contact-info__row{border-top:1px solid var(--red-1);padding-top:1.4rem}
.contact-info__label{
  color:var(--red);font-family:var(--mono);font-size:1.1rem;letter-spacing:-.05rem;
  margin-bottom:.6rem;text-transform:uppercase;
}
.contact-info__value{font-size:2.4rem;font-weight:800;line-height:2.2rem;text-transform:uppercase}
.contact-info__value a{transition:color .3s}
.contact-info__value a:hover{color:var(--red)}
.contact-info__note{font-family:var(--sans);font-size:1.2rem;line-height:1.7rem;margin-top:.8rem;opacity:.6;text-transform:uppercase}

/* full-bleed location plate */
.plate{aspect-ratio:37.5/40;overflow:hidden;position:relative;width:100%;z-index:6}
@media (min-width:768px){.plate{aspect-ratio:16/7}}
@media (min-width:1024px){.plate{cursor:none}}
.plate img{height:100%;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);will-change:transform}
.plate__label{
  bottom:2rem;color:#fff;font-size:3rem;font-weight:800;left:1.6rem;line-height:2.4rem;
  mix-blend-mode:difference;position:absolute;text-transform:uppercase;z-index:2;
}
@media (min-width:768px){.plate__label{left:3.2rem;bottom:3rem}}
@media (min-width:1024px){.plate__label{left:3.5rem}}

/* ═══════════════ FAQ ═══════════════ */
.faq{border-top:1px solid var(--red-1)}
.faq__item{border-bottom:1px solid var(--red-1)}
.faq__q{
  align-items:center;display:flex;gap:2rem;justify-content:space-between;
  font-size:2.4rem;font-weight:800;line-height:2.4rem;padding:2.4rem 0;
  text-align:left;text-transform:uppercase;width:100%;transition:color .3s;
}
.faq__q:hover{color:var(--red)}
.faq__q::after{content:"+";color:var(--red);font-weight:300;transition:transform .4s var(--ease)}
.faq__item.is-open .faq__q::after{transform:rotate(45deg)}
/* 0fr → 1fr animates height without a hardcoded pixel value */
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{
  font-family:var(--sans);font-size:1.3rem;line-height:2rem;max-width:60rem;
  padding-bottom:2.4rem;text-transform:uppercase;
}
.faq__a p strong{color:var(--red)}

/* ═══════════════ EDITORIAL SPLIT ═══════════════ */
.split{display:grid;gap:3.4rem;align-items:center}
@media (min-width:768px){.split{grid-template-columns:1fr 1fr;gap:6rem}}
.split--reverse .split__media{order:-1}
@media (min-width:768px){.split--reverse .split__media{order:2}}
.split__media{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--red-1)}
.split__media img{height:100%;width:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s var(--ease)}
.split:hover .split__media img{filter:grayscale(0)}
.split__title{font-size:6.4rem;font-weight:800;line-height:5.1rem;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:2rem}
.split__title i{color:var(--red);font-style:normal;font-weight:300}
.split__text{font-family:var(--sans);font-size:1.3rem;line-height:2rem;text-transform:uppercase;margin-bottom:2.4rem}
.split__text strong{color:var(--red)}
@media (min-width:1024px){.split__title{font-size:8rem;line-height:6.4rem}}

/* ═══════════════ STORY GRID ═══════════════
   Product cards outside the shop. Deliberately not .shop-section__grid —
   that class is what initShop binds to, and it would overwrite these. */
.story-grid{display:grid;gap:3rem 1.2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.story-grid{grid-template-columns:repeat(3,1fr);gap:3.4rem 1.4rem}}
@media (min-width:1024px){.story-grid{grid-template-columns:repeat(4,1fr)}}

/* anchor targets on the new pages must clear the fixed header too */
#shop,#film,#faq,#definition,#journal,#story,#atelier{scroll-margin-top:11rem}