/* ─────────────────────────────────────────────────────────────
   Experience detail pages — editorial scroll (Cocolia-style)
   Cream background, deep-red type, asymmetric image/text grid.
   ───────────────────────────────────────────────────────────── */
:root{ --exp-cream:#fef1d7; --exp-red:#9e1616; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--exp-cream); }
body.exp-detail{
  margin:0; background:var(--exp-cream); color:var(--exp-red);
  font-family:"Jost",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* close button */
.exp-close{
  position:fixed; top:24px; left:32px; z-index:60;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--exp-red); text-decoration:none; font-size:30px; line-height:1; font-weight:200;
  transition:opacity .25s ease, transform .25s ease;
}
.exp-close:hover{ opacity:.55; transform:rotate(90deg); }

/* progress hint bar on right edge (matches reference) */
.exp-progress{ position:fixed; top:0; right:0; width:6px; height:100vh; z-index:55; pointer-events:none; }
.exp-progress span{ position:absolute; right:0; top:0; width:6px; height:18%; background:var(--exp-red);
  transform-origin:top; transition:transform .1s linear; }

.exp-article{ width:100%; max-width:1660px; margin:0 auto; padding:0 clamp(22px,4.5vw,70px) 16vh; }

/* 12-column grid used by every section */
.exp-grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(18px,2.6vw,40px); row-gap:6vh; align-items:start; }

/* column-span utilities */
.gc-1-6{ grid-column:1 / 7; }   .gc-7-12{ grid-column:7 / 13; }
.gc-1-5{ grid-column:1 / 6; }   .gc-8-12{ grid-column:8 / 13; }
.gc-1-7{ grid-column:1 / 8; }   .gc-6-12{ grid-column:6 / 13; }
.gc-2-7{ grid-column:2 / 8; }   .gc-4-9{ grid-column:4 / 10; }
.gc-1-4{ grid-column:1 / 5; }   .gc-9-12{ grid-column:9 / 13; }

/* vertical rhythm */
.off-sm{ margin-top:10vh; }  .off-md{ margin-top:18vh; }  .off-lg{ margin-top:26vh; }
.sec{ margin-top:18vh; }
.sec-first{ margin-top:0; }

/* figures */
.exp-fig{ margin:0; overflow:hidden; }
.exp-fig img{ width:100%; height:auto; display:block; object-fit:cover; }
.exp-fig.tall img{ height:88vh; }
.exp-fig.bw img{ filter:grayscale(1) contrast(1.03); }

/* text */
.exp-text p{ margin:0 0 1.5em; font-weight:300; font-size:clamp(15px,1.1vw,17px); line-height:1.62; max-width:42ch; }
.exp-text p:last-child{ margin-bottom:0; }
.exp-label{ font-weight:600; font-size:15px; margin:0 0 1.3em; }

/* hero */
.exp-hero{ min-height:100vh; align-items:center; }
.exp-hero-text{ align-self:center; }
.exp-hero-title{ font-family:"cofo-raffine","Cormorant Garamond",Georgia,serif; font-weight:500;
  font-size:clamp(58px,8.6vw,148px); line-height:.86; margin:0; letter-spacing:-.01em; }
.exp-hero-title .l2{ display:block; }
.exp-hero-title sup{ font-family:"Jost",sans-serif; font-weight:400; font-size:.16em; vertical-align:top;
  margin-left:.25em; }
.exp-hero-text .exp-label{ margin-top:48px; }
.exp-hero-lead{ margin:0; max-width:38ch; font-weight:300; font-size:clamp(15px,1.15vw,17px); line-height:1.6; }
.exp-scroll{ display:inline-block; margin-top:54px; font-size:14px; letter-spacing:.04em; }
.exp-hero-img{ align-self:stretch; }
.exp-hero-img img{ height:92vh; }

/* closing */
.exp-end{ margin-top:22vh; text-align:center; }
.exp-end a{ display:inline-block; color:var(--exp-red); text-decoration:none; border:1px solid var(--exp-red);
  padding:15px 40px; border-radius:3px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .25s ease, color .25s ease; }
.exp-end a:hover{ background:var(--exp-red); color:var(--exp-cream); }

/* responsive */
@media (max-width:820px){
  .exp-article{ padding:0 22px 14vh; }
  .exp-grid{ row-gap:5vh; }
  /* collapse every span to full width and stack in source order */
  .exp-grid > *{ grid-column:1 / -1 !important; margin-top:0 !important; }
  .exp-hero{ min-height:auto; padding-top:96px; }
  .exp-hero-img img, .exp-fig.tall img{ height:auto; }
  .exp-hero-img{ margin-top:8vh; }
  .sec{ margin-top:12vh; }
  .exp-hero-title{ font-size:clamp(52px,16vw,86px); }
  .exp-close{ top:18px; left:18px; }
}

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }