/* OFFDUTY direction pass r8b: "The Editorial Issue".
   One committed layout direction on existing assets:
   light editorial split hero, oversized serif display type, broken-grid
   mosaic, numbered world cards, generous margins - plus the gated
   cinematic motion layer (drift + staggered reveals).
   Motion only under prefers-reduced-motion: no-preference AND while the
   site calm class (.od-calm) is NOT present. RTL hero flip preserved. */

/* ================= MOTION LAYER ================= */

/* ---- slow cinematic drift on the big hero media ---- */
@media (prefers-reduced-motion: no-preference){
  html:not(.od-calm) .film-hero-media img,
  html:not(.od-calm) .collection-cover img{
    animation: odDirDrift 22s cubic-bezier(.19,.6,.22,1) both;
    will-change: transform;
  }
  /* RTL: the accepted baseline flips the hero portrait with
     transform:scaleX(-1) - the drift must compose with that flip,
     never replace it */
  html:not(.od-calm) [dir=rtl] .film-hero-media img,
  html:not(.od-calm) [dir=rtl] .film-hero-media--mj04 img{
    animation-name: odDirDriftRtl;
  }
}
@keyframes odDirDrift{
  from{ transform: scale(1.0); }
  to{ transform: scale(1.065); }
}
@keyframes odDirDriftRtl{
  from{ transform: scaleX(-1) scale(1.0); }
  to{ transform: scaleX(-1) scale(1.065); }
}
/* no drift on small screens (baseline pins hero transform there) */
@media (width<=900px){
  .film-hero-media img, .collection-cover img{ animation: none !important; }
}
/* keep hero overflow hidden so the drift never bleeds */
.film-hero-media, .collection-cover{ overflow: hidden; }

/* ---- scroll reveals (JS adds .od-dir-rev / .od-dir-in) ---- */
.od-dir-rev{ opacity: 0; transform: translateY(26px); }
.od-dir-rev.od-dir-in{
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.21,1), transform .9s cubic-bezier(.22,.61,.21,1);
}
html.od-calm .od-dir-rev, .od-dir-no-motion .od-dir-rev{ opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce){
  .od-dir-rev{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- image hover: slow elegant scale on cards ---- */
@media (prefers-reduced-motion: no-preference){
  html:not(.od-calm) .two-lines-card img,
  html:not(.od-calm) .mj-mosaic img,
  html:not(.od-calm) .collection-products img,
  html:not(.od-calm) .styling-looks img,
  html:not(.od-calm) .od-xedits img,
  html:not(.od-calm) .fashion-world img,
  html:not(.od-calm) .bespoke-home img,
  html:not(.od-calm) .od-journ img{
    transition: transform 1.1s cubic-bezier(.22,.61,.21,1);
  }
  html:not(.od-calm) .two-lines-card:hover img,
  html:not(.od-calm) .mj-mosaic a:hover img,
  html:not(.od-calm) .collection-products a:hover img,
  html:not(.od-calm) .styling-looks a:hover img,
  html:not(.od-calm) .od-xedits a:hover img,
  html:not(.od-calm) .fashion-world a:hover img,
  html:not(.od-calm) .bespoke-home a:hover img,
  html:not(.od-calm) .od-journ a:hover img{
    transform: scale(1.045);
  }
  .two-lines-card, .mj-mosaic a, .collection-products a,
  .styling-looks a, .od-xedits a, .fashion-world a, .bespoke-home a{ overflow: hidden; }
}

/* ---- primary CTA: quiet invert hover, no metric changes ---- */
@media (prefers-reduced-motion: no-preference){
  html:not(.od-calm) .film-cta-row a{
    transition: background-color .4s ease, color .4s ease, border-color .4s ease;
  }
  html:not(.od-calm) .film-cta:hover{ background:#2a2622 !important; }
  html:not(.od-calm) .film-cta-ghost:hover{ background:rgba(17,17,17,.08) !important; }
}

/* ---- brand-consistent text selection ---- */
::selection{ background: rgba(20,18,16,.88); color: #f3f0e9; }

/* ---- images fade in as they decode (no layout shift, dims only if slow) ---- */
@media (prefers-reduced-motion: no-preference){
  html:not(.od-calm) img{ transition: opacity .7s ease; }
  html:not(.od-calm) img.od-dir-loading{ opacity: 0; }
}

/* ================= EDITORIAL LAYER (desktop) ================= */
@media (min-width:901px){

  /* ---- hero: full-bleed dark poster -> light editorial split ---- */
  .film-hero--official{
    display: grid !important;
    grid-template-columns: minmax(0,46fr) minmax(0,54fr);
    align-items: stretch;
    min-height: min(88vh,880px) !important;
    background: #f3f0e9;
    border-bottom: 2px solid #111;
  }
  .film-hero--official .film-hero-media{
    position: relative; inset: auto; margin: 0;
    order: 2; height: auto; min-height: 100%;
  }
  .film-hero--official .film-hero-media img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 65% 27%;
    filter: contrast(1.04) saturate(.92) brightness(1.03);
  }
  [dir=rtl] .film-hero--official .film-hero-media{ order: 1; }
  [dir=rtl] .film-hero--official .film-hero-media img{
    object-position: 50% 27%;
    /* baseline flip rule still applies; drift composes via odDirDriftRtl */
  }
  .film-hero--official .film-hero-shade{ display: none; }
  .film-hero--official .film-hero-copy{
    order: 1;
    align-self: center;
    max-width: none;
    padding: 6vw 4.5vw 6vw 5vw;
    color: #111;
  }
  [dir=rtl] .film-hero--official .film-hero-copy{ order: 2; justify-self: stretch; }
  .film-hero--official .film-kicker{ color: #6b665e; letter-spacing: .3em; }
  .film-hero--official .film-hero-copy h1{
    color: #111;
    font-size: clamp(72px,7.2vw,132px) !important;
    line-height: .92 !important;
    letter-spacing: -.05em !important;
    max-width: 10ch;
  }
  .film-hero--official .film-hero-copy h1 em{ color: #4a443c; }
  .film-hero--official .film-dek{ color: #35312b; max-width: 40ch; font-size: 17px; }
  .film-hero--official .film-cta{
    color: #f3f0e9 !important; background: #111 !important; border-color: #111;
  }
  .film-hero--official .film-cta-ghost{
    color: #111 !important; background: transparent !important; border-color: rgba(17,17,17,.55);
  }
  .film-hero--official .film-caption{
    color: #6b665e; border-top-color: rgba(17,17,17,.3);
  }

  /* ---- world cards: numbered editorial plates ---- */
  .two-lines{ padding: 96px 5vw 40px; }
  .two-lines-grid{ counter-reset: odWorld; gap: 22px; }
  .two-lines-card>div{ position: relative; }
  .two-lines-card>div::before{
    counter-increment: odWorld;
    content: "No. " counter(odWorld, decimal-leading-zero);
    display: block;
    font: 600 10px/1 Arial, sans-serif;
    letter-spacing: .34em;
    opacity: .5;
    margin-bottom: 14px;
  }
  .two-lines-card h2{ font-size: clamp(34px,3.4vw,54px); letter-spacing: -.03em; }
  .two-lines-card>div{ border-top: 1px solid currentColor; padding-top: 26px; }

  /* ---- the six: portrait-gallery treatment ---- */
  .mj-mosaic--collection{ padding: 110px 5vw 120px; border-bottom: 2px solid #111; }
  .mj-mosaic--collection .mj-mosaic-head{ margin-bottom: 56px; }
  .mj-mosaic--collection .mj-mosaic-head .kicker{ letter-spacing: .3em; }
  .mj-mosaic--collection .mj-mosaic-head h2{
    font-size: clamp(44px,5.6vw,88px); letter-spacing: -.05em; line-height: .95;
  }
  .mj-mosaic--collection .mj-mosaic-grid{ gap: 28px 26px; counter-reset: odSix; }
  .mj-mosaic--collection .mj-mosaic-tile{ counter-increment: odSix; }
  .mj-mosaic--collection .mj-mosaic-tile:nth-child(even){ margin-top: 88px; }
  .mj-mosaic--collection .mj-mosaic-tile>span:last-child{
    font-size: clamp(30px,2.5vw,42px) !important;
    letter-spacing: -.02em;
    border-top: 1px solid #111;
    padding-top: 18px !important;
    margin-top: 4px;
  }
  .mj-mosaic--collection .mj-mosaic-tile>span:last-child::before{
    content: "N\00BA  " counter(odSix, decimal-leading-zero);
    display: block;
    font: 600 10px/1 Arial, sans-serif;
    letter-spacing: .38em;
    color: #8a857c;
    margin-bottom: 10px;
  }
  .mj-mosaic--collection .mj-mosaic-caption{ margin-top: 56px; font-size: 10px; letter-spacing: .22em; }

  /* ---- fashion world: compressed coming-soon interlude ---- */
  .fashion-world-head{ padding: 72px 5vw 0; }
  .fashion-world-head h2{ font-size: clamp(40px,5vw,72px); }
  .fashion-world .mj-mosaic{ padding-top: 40px; padding-bottom: 56px; }
  .fashion-world .type-band{ padding-top: 30px !important; padding-bottom: 56px !important; }

  /* ---- bespoke: gallery pacing ---- */
  .bespoke-home{ padding: 120px 6vw; gap: 8vw; }
  .bespoke-home h2{ font-size: clamp(40px,4.8vw,72px); }


  /* ---- homepage hierarchy: the six pieces take center ----
     r8: fashion band removed from homepage (Sharon, Nov 1); modular
     story module inserted after the six; About entry upgraded. */
  div:has(> .film-hero--official){ display: flex; flex-direction: column; }
  .film-hero--official{ order: 1; }
  .mj-mosaic--collection{ order: 2; }
  .two-lines{ order: 3; }
  .od-meet{ order: 4; }
  .shipping-bar{ order: 5; }
  .bespoke-home{ order: 6; }
  .od-journ{ order: 7; }
  .home-trust{ order: 8; }
  body.od-home .fashion-world{ display: none; }

  /* ---- About entry point: clear but still an entry, not the full block ---- */
  body.od-home .od-meet{
    max-width: none; text-align: start; padding: 96px 5vw; border-top: none; border-bottom: 2px solid #111;
  }
  body.od-home .od-meet .od-m-k{
    margin: 0 0 14px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #8a857c;
  }
  body.od-home .od-meet .od-m-h{
    margin: 0 0 22px; font-family: "Frank Ruhl Libre", serif; font-weight: 400;
    font-size: clamp(34px,4.2vw,64px); line-height: 1.08; letter-spacing: -.01em;
  }
  body.od-home .od-meet[dir=rtl] .od-m-h{ font-weight: 500; }
  body.od-home .od-meet .od-m-cta{ font-size: .72rem; }

  /* ---- kickers breathe everywhere ---- */
  .film-kicker, .home-trust, .shipping-bar{ letter-spacing: .26em; }
}

/* ================= EDITORIAL LAYER (mobile) ================= */
@media (width<=900px){
  div:has(> .film-hero--official){ display: flex; flex-direction: column; }
  .film-hero--official{ order: 1; }
  .mj-mosaic--collection{ order: 2; }
  .two-lines{ order: 3; }
  .od-meet{ order: 4; }
  .shipping-bar{ order: 5; }
  .bespoke-home{ order: 6; }
  .od-journ{ order: 7; }
  .home-trust{ order: 8; }
  body.od-home .fashion-world{ display: none; }
  .od-modular{ padding: 64px 20px; }
  .od-modular .od-mod-h{ font-size: clamp(30px,8.6vw,42px); }
  body.od-home .od-meet{ padding: 56px 20px; }
  .mj-mosaic--collection .mj-mosaic-grid{ counter-reset: odSix; gap: 20px 14px; }
  .mj-mosaic--collection .mj-mosaic-tile{ counter-increment: odSix; }
  .mj-mosaic--collection .mj-mosaic-tile>span:last-child::before{
    content: "N\00BA  " counter(odSix, decimal-leading-zero);
    display: block;
    font: 600 9px/1 Arial, sans-serif;
    letter-spacing: .34em;
    color: #8a857c;
    margin-bottom: 8px;
  }
  .mj-mosaic--collection{ padding: 56px 20px 64px; }
  .mj-mosaic--collection .mj-mosaic-head h2{ font-size: clamp(34px,9vw,44px); }
  /* hero copy leaves the dark overlap and sits on cream, magazine-style */
  .film-hero--official{ background: #f3f0e9; }
  .film-hero--official .film-hero-shade{ display: none; }
  .film-hero--official .film-hero-media{ margin: 0; }
  .film-hero--official .film-hero-copy{
    margin-top: 0 !important;
    padding: 28px 24px 36px !important;
    color: #111;
  }
  .film-hero--official .film-kicker{ color: #6b665e; letter-spacing: .26em; }
  .film-hero--official .film-hero-copy h1{ color: #111; }
  .film-hero--official .film-hero-copy h1 em{ color: #4a443c; }
  .film-hero--official .film-dek{ color: #35312b; }
  .film-hero--official .film-cta{
    color: #f3f0e9 !important; background: #111 !important; border-color: #111;
  }
  .film-hero--official .film-cta-ghost{
    color: #111 !important; background: transparent !important; border-color: rgba(17,17,17,.55);
  }
  .film-hero--official .film-caption{ color: #6b665e; border-top-color: rgba(17,17,17,.3); }
  .two-lines-card>div::before{ content: none; }
}