/* =========================================================
   flmno case study — modelled on wearecollins.com/case-studies
   ========================================================= */
@font-face{font-family:"Reckless";src:url("../assets/fonts/LaicaB-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Apercu";src:url("../assets/fonts/Apercu Pro Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Apercu";src:url("../assets/fonts/Apercu Pro Bold.otf") format("opentype");font-weight:700;font-display:swap}

:root{
  --bg:#050507;          /* page */
  --surface:#121214;     /* sheets, explore card */
  --fg:#f7f7f2;
  --muted:rgba(247,247,242,.56);
  --faint:rgba(247,247,242,.2);
  --serif:"Reckless",Georgia,serif;
  --sans:"Apercu",Helvetica,Arial,sans-serif;
  --content:min(960px,calc(100vw - 2 * clamp(20px,4vw,40px)));
  --inset:calc((100vw - var(--content)) / 2);
  --col-gap:16px;
  --radius:16px;
  --spring:cubic-bezier(.34,1.45,.55,1);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.3;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,p,dl,dd,figure{margin:0}

.grid{width:var(--content);margin-inline:auto;display:grid;grid-template-columns:repeat(10,1fr);column-gap:var(--col-gap)}

/* ── Header ── */
.cs-header{width:var(--content);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;padding:28px 0}
.cs-header__brand{font-family:"Apercu",-apple-system,sans-serif;font-weight:700;font-size:28px;letter-spacing:.01em}
.cs-header__back{font-size:14px;color:var(--muted);transition:color .2s}
.cs-header__back:hover{color:var(--fg)}

/* ── Hero ── */
.cs-hero{padding-top:clamp(72px,10vw,160px);margin-bottom:52px}
.cs-hero__label{grid-column:1 / span 4;font-size:16px;color:var(--muted);padding-top:.35em}
.cs-hero__head{grid-column:5 / span 6}
.cs-hero__title{font-family:var(--serif);font-weight:500;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:.01em;max-width:376px;font-size:16px;line-height:1.2;color:var(--muted)}

/* ── Carousel ── */
.cs-carousel{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;
  padding-inline:var(--inset);
  scrollbar-width:none;cursor:grab;
  overscroll-behavior-x:contain;
}
.cs-carousel::-webkit-scrollbar{display:none}
.cs-carousel.is-dragging{cursor:grabbing}
.cs-carousel.is-dragging *{pointer-events:none}
.cs-carousel__item{
  flex:0 0 auto;height:450px;border:0;padding:0;background:rgba(255,255,255,.05);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
}
.cs-carousel__item img{height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none}

/* Explore card */
.cs-explore{
  flex:0 0 auto;height:450px;aspect-ratio:3 / 4;
  position:relative;border:0;padding:0;cursor:pointer;
  border-radius:var(--radius);background:var(--surface);text-align:left;
}
.cs-explore__stack{
  position:absolute;inset:0 0 56px 0;
  display:grid;place-items:center;perspective:800px;
}
.cs-explore__thumb{
  grid-area:1 / 1;width:33%;aspect-ratio:1;
  border-radius:var(--radius);overflow:hidden;background:#222;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .8s var(--spring);
}
.cs-explore__thumb img{width:100%;height:100%;object-fit:cover}
.cs-explore__thumb:nth-child(1){transform:translate(27px,27px) rotate(5deg)}
.cs-explore__thumb:nth-child(2){transform:translate(-27px,0) rotate(-5deg)}
.cs-explore__thumb:nth-child(3){transform:translate(7px,-34px) rotate(4deg)}
.cs-explore:hover .cs-explore__thumb:nth-child(1){transform:translate(27px,54px) rotateX(30deg) rotateY(15deg) rotate(10deg)}
.cs-explore:hover .cs-explore__thumb:nth-child(2){transform:translate(-54px,-27px) rotateY(-25deg) rotate(-10deg)}
.cs-explore:hover .cs-explore__thumb:nth-child(3){transform:translate(34px,-82px) rotateX(-25deg) rotateY(20deg) rotate(7deg)}
.cs-explore__label{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;font-size:14px;
}
.cs-explore__label svg{width:14px;height:14px}

/* ── Meta + story ── */
.cs-body{padding-block:0 40px}
.cs-meta{grid-column:2 / span 3;padding-block:80px;display:flex;flex-direction:column;gap:24px}
.cs-meta dt{font-size:16px;line-height:1.3}
.cs-meta dd{font-size:16px;line-height:1.3;color:var(--muted)}
.cs-story{grid-column:5 / span 5;padding-block:80px;display:flex;flex-direction:column;align-items:flex-start;gap:48px}
.cs-story__text{font-size:clamp(26px,2.6vw,36px);line-height:1.1;max-width:620px}
/* First sentence rendered as serif spans, rest as sans spans */
.cs-story__text .s1{font-family:var(--serif);letter-spacing:.01em}
.cs-story__text .s2{font-family:var(--sans);letter-spacing:0;font-size:.88em;line-height:1.35}
.cs-story__text .w{display:inline-block;white-space:nowrap}
.cs-story__text .c{color:var(--faint);transition:color .25s ease}
.cs-story__text .c.on{color:var(--fg)}

.cs-pill{
  display:inline-flex;align-items:center;gap:10px;
  height:45px;padding:0 24px;border:1px solid var(--fg);border-radius:96px;
  background:transparent;font-size:14px;cursor:pointer;
  transition:background .2s,color .2s;
}
.cs-pill:hover{background:var(--fg);color:var(--bg)}
.cs-pill svg{width:12px;height:12px}

/* ── More work flipbook ── */
.cs-more{padding:clamp(80px,10vw,140px) 0 clamp(96px,12vw,160px)}
.cs-more__head{width:var(--content);margin-inline:auto;margin-bottom:40px}
.cs-more__title{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1;letter-spacing:.01em;font-size:16px;color:var(--muted)}

/* Horizontal scroll strip */
.cs-related{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;
  padding-inline:var(--inset);
  padding-bottom:4px;          /* room for focus rings */
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  scroll-behavior:smooth;
}
.cs-related::-webkit-scrollbar{display:none}
.cs-related.is-dragging{cursor:grabbing}
.cs-related.is-dragging *{pointer-events:none}

/* Square cards */
.cs-related__card{
  flex:0 0 clamp(180px,22vw,260px);
  aspect-ratio:1 / 1;
  border-radius:var(--radius);
  overflow:hidden;
  background:#1a1a1c;
  text-decoration:none;
  color:inherit;
  position:relative;
  -webkit-user-drag:none;
  transition:transform .3s var(--ease);
}
.cs-related__card:hover{transform:translateY(-4px)}
.cs-related__card img{
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
  transition:transform .5s var(--ease);
}
.cs-related__card:hover img{transform:scale(1.04)}
.cs-related__card__foot{
  position:absolute;inset:auto 0 0;
  padding:14px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
}
.cs-related__card__title{
  font-size:14px;line-height:1.2;color:#fff;
}

/* ── Sheets ── */
.cs-sheet{
  position:fixed;inset:auto 0 0 0;margin:0;padding:0;border:0;
  width:100%;max-width:100%;height:calc(100dvh - 20px);max-height:none;
  background:var(--surface);color:var(--fg);
  border-radius:24px 24px 0 0;overflow:hidden;
  transform:translateY(100%);transition:transform .55s var(--ease);
}
.cs-sheet.is-open{transform:none}
.cs-sheet::backdrop{background:rgba(0,0,0,0);transition:background .4s}
.cs-sheet.is-open::backdrop{background:rgba(0,0,0,.55)}
.cs-sheet__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain}
.cs-sheet__close{
  position:absolute;top:24px;right:24px;z-index:2;
  width:52px;height:52px;border:0;border-radius:50%;
  background:var(--bg);display:grid;place-items:center;cursor:pointer;
}
.cs-sheet__close svg{width:16px;height:16px}

.cs-gallery{
  width:var(--content);margin:0 auto;padding:96px 0 96px;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.cs-gallery figure{border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.04)}
.cs-gallery figure.full{grid-column:1 / -1}
.cs-gallery img{width:100%;height:auto}

.cs-read{width:min(490px,calc(100vw - 48px));margin:0 auto;padding:96px 0 120px}
.cs-read p{font-family:var(--sans);font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:rgba(247,247,242,.84);margin-bottom:1.4em}
.cs-read p.first{font-family:var(--serif);font-size:clamp(24px,2.5vw,34px);line-height:1.05;letter-spacing:.01em;color:var(--fg);margin-bottom:1.2em}
.cs-read hr{border:0;border-top:1px solid rgba(247,247,242,.16);margin:64px 0 32px}
.cs-read dl{display:grid;grid-template-columns:140px 1fr;row-gap:16px;font-size:16px}
.cs-read dt{color:var(--muted)}

/* ── Responsive ── */
@media (max-width:900px){
  .cs-meta{grid-column:1 / span 4}
  .cs-story{grid-column:5 / span 6}
}
@media (max-width:700px){
  .grid{grid-template-columns:1fr}
  .cs-hero__label,.cs-hero__head,.cs-meta,.cs-story{grid-column:1}
  .cs-hero__label{margin-bottom:24px}
  .cs-meta{padding-block:56px 0}
  .cs-story{padding-block:40px 56px}
  .cs-carousel__item,.cs-explore{height:320px}
  .cs-gallery{grid-template-columns:1fr;gap:16px;padding-top:88px}
  .cs-gallery figure.full{grid-column:auto}
  .cs-read dl{grid-template-columns:1fr;row-gap:4px}
  .cs-read dd{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}

/* ── Impact section ── */
.cs-impact {
  padding-block: 80px;
}
.cs-impact__head {
  width: var(--content);
  margin-inline: auto;
  margin-bottom: 48px;
}
.cs-impact__head h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.cs-impact__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 320px;
  gap: 16px;
  padding-inline: var(--inset);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.cs-impact__track::-webkit-scrollbar { display: none }
.cs-impact__track.is-dragging { cursor: grabbing }

.cs-impact__card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  padding: 36px 32px 48px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.07);
  min-height: 380px;
}
.cs-impact__card svg {
  width: 56px;
  height: 56px;
}
.cs-impact__card__body { display: flex; flex-direction: column; gap: 10px }
.cs-impact__card h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}
.cs-impact__card p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
/* Impact cards — full opacity now that content is real */
.cs-impact__card h3 { color: var(--fg) }
.cs-impact__card p  { color: var(--muted) }

@media (max-width: 700px) {
  .cs-impact__track { grid-auto-columns: 280px }
}