/* ─────────────────────────────────────────
   JN STUDIO — Atelier page
   Reportage éditorial — diptyques photo/texte + citations
   ───────────────────────────────────────── */

main.atelier-page{ padding-top: 110px; }

/* ─────────────────────────────────────────
   Page title — aligned with the site logo in the header band.
   ───────────────────────────────────────── */
.atelier-title{
  position: relative;
  z-index: 102;
  display: flex; align-items: center; justify-content: center;
  height: 110px;
  margin-top: -110px;
  padding: 0 240px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}
.atelier-title > *{ pointer-events: auto; }
.atelier-title h1.display{
  font-family: var(--font-display);
  font-weight: 300; font-style: normal;
  font-size: clamp(52px, 4.8vw, 74px);
  line-height: 1;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--noir);
}
.atelier-title h1.display em{ color: var(--or); font-style: normal; }

/* ─────────────────────────────────────────
   Intro — lede + first photo full bleed
   ───────────────────────────────────────── */
.atelier-intro{
  padding: 32px 40px 20px;
  max-width: 1640px;
  margin: 0 auto;
  text-align: center;
}
.atelier-intro .lede{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.45;
  color: var(--noir-soft);
  margin: 0 auto;
  max-width: 32ch;
}
.atelier-intro .lede em{ color: var(--noir); }
.atelier-intro .gold-rule{
  display: block; height: 1px;
  background: var(--or); width: 56px;
  opacity: .85;
  margin: 20px auto 0;
}

.full-bleed{
  width: 100%;
  height: 48vh;
  min-height: 320px;
  max-height: 540px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.full-bleed.dim::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,15,44,0) 60%, rgba(6,15,44,.3) 100%);
}
.full-bleed .credit{
  position: absolute; bottom: 24px; left: 40px;
  font-family: var(--font-caps); font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(242,235,217,.7);
  z-index: 1;
}

/* ─────────────────────────────────────────
   Diptych — alternating photo + text
   ───────────────────────────────────────── */
.diptych{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 64px 40px;
  max-width: 1640px;
  margin: 0 auto;
}
.diptych.reverse{
  direction: rtl;
}
.diptych.reverse > *{ direction: ltr; }

.diptych .visual{
  position: relative;
  aspect-ratio: 4/5;
  background-color: var(--creme-soft);
  background-size: cover;
  background-position: center;
}
.diptych .visual{ overflow: hidden; }
.diptych .visual .visual-img,
.full-bleed .visual-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.full-bleed{ overflow: hidden; }
.diptych .visual.landscape{
  aspect-ratio: 4/3;
}
.diptych .visual .tag{
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(6,15,44,.65);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  font-family: var(--font-caps); font-weight: 500;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(242,235,217,.9);
  z-index: 1;
}
.diptych .visual .tag .dot{
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--or); margin-right: 8px; vertical-align: middle;
}

.diptych .copy{
  display: flex; flex-direction: column;
  gap: 16px;
  max-width: 44ch;
}
.diptych .copy .eyebrow{
  font-family: var(--font-caps); font-weight: 500;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or);
  margin: 0;
}
.diptych .copy h2{
  font-family: var(--font-display);
  font-weight: 300; font-style: normal;
  font-size: clamp(33px, 3.7vw, 52px);
  line-height: 1.0; letter-spacing: -.012em;
  margin: 0;
  color: var(--noir);
}
.diptych .copy h2 em{ color: var(--or); font-style: normal; }
.diptych .copy .rule{
  display: block; width: 48px; height: 1px;
  background: var(--or); opacity: .85;
  margin: 4px 0;
}
.diptych .copy p{
  font-family: var(--font-text);
  font-size: 15px; line-height: 1.7;
  color: var(--gris);
  margin: 0;
}
.diptych .copy p em{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  color: var(--noir-soft);
}
.diptych .copy .materials-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(184,146,84,.25);
  font-family: var(--font-caps); font-weight: 300;
  font-size: 11.5px; letter-spacing: .04em;
  color: var(--gris);
  line-height: 1.6;
}
.diptych .copy .materials-list li{
  list-style: none;
  padding: 4px 0;
  display: flex; align-items: baseline; gap: 10px;
}
.diptych .copy .materials-list li::before{
  content: "·";
  color: var(--or);
}

/* ─────────────────────────────────────────
   Pull quote — large italic, between sections
   ───────────────────────────────────────── */
.pull-quote{
  padding: 56px 40px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.pull-quote blockquote{
  font-family: var(--font-display);
  font-weight: 300; font-style: normal;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--noir);
  max-width: 24ch;
  margin: 0 auto;
}
.pull-quote blockquote em{ color: var(--or); font-style: normal; }
.pull-quote .mark{
  display: block; width: 32px; height: 1px;
  background: var(--or); opacity: .85;
  margin: 28px auto 0;
}
.pull-quote .attribution{
  font-family: var(--font-caps); font-weight: 500;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gris-l);
  margin-top: 16px;
}

/* ─────────────────────────────────────────
   Closing line — at the very bottom before footer
   ───────────────────────────────────────── */
.atelier-closing{
  padding: 56px 40px 80px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.atelier-closing .gold-rule{
  display: block; height: 1px;
  background: var(--or); width: 56px;
  opacity: .85;
  margin: 0 auto 26px;
}
.atelier-closing p{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--noir-soft);
  margin: 0 auto;
  max-width: 36ch;
}
.atelier-closing p em{ color: var(--or); }
.atelier-closing .sig{
  margin-top: 22px;
  font-family: var(--font-caps); font-weight: 500;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gris-l);
}

/* ─────────────────────────────────────────
   Responsive
   ───────────────────────────────────────── */
@media (max-width: 1100px){
  .diptych{ gap: 40px; padding: 48px 32px; }
  .pull-quote{ padding: 40px 32px; }
}

@media (max-width: 900px){
  main.atelier-page{ padding-top: 80px; }
  .atelier-title{ height: auto; margin-top: 0; padding: 14px 22px 6px; }
  .atelier-title h1.display{ font-size: clamp(32px, 9.3vw, 46px); }
  .atelier-intro{ padding: 22px 22px 22px; }
  .atelier-intro .lede{ font-size: 16px; line-height: 1.4; }
  .full-bleed{ height: 52vh; min-height: 320px; }
  .full-bleed .credit{ left: 22px; bottom: 18px; }

  .diptych{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 44px 22px;
  }
  .diptych.reverse{ direction: ltr; }
  .diptych .visual{ aspect-ratio: 4/5; }
  .diptych .visual.landscape{ aspect-ratio: 4/3; }
  .diptych .copy{ max-width: none; }
  .diptych .copy h2{ font-size: clamp(24px, 6.9vw, 32px); line-height: 1.08; }
  .diptych .copy p{ font-size: 14px; line-height: 1.6; }
  .diptych .copy .materials-list{ grid-template-columns: 1fr; }

  .pull-quote{ padding: 44px 22px; }
  .pull-quote blockquote{ font-size: clamp(22px, 6.1vw, 30px); line-height: 1.22; }
  .atelier-closing{ padding: 44px 22px 60px; }
}