/* ============================================================================
   DALC — branding case studies (work-branding-<slug>.html)
   Flow after abhaysingh.in's case studies: calm, editorial, generous white
   space, no parallax. The storytelling is the effect.

   Everything here is the finished static page — brand-case.js only adds the
   lift-in and the lightbox. Reduced motion and no-JS both read correctly.
   ========================================================================== */
body.bc-page{background:#FAF7F2}
.bc{--pad:48px;--line:rgba(20,20,20,.13);--dim:var(--muted,#58524e);
    max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.bc-h2{margin:0 0 26px;font-family:var(--font-heading);font-weight:400;line-height:1;
    font-size:clamp(30px,3.6vw,54px);letter-spacing:-.005em}
.bc-standfirst{margin:0 0 40px;max-width:44em;font-size:clamp(16px,1.2vw,18.5px);line-height:1.6;
    color:var(--body,#3a3634)}

/* ── sticky breadcrumb ────────────────────────────────────────────────── */
.bc-crumb{position:sticky;top:76px;z-index:40;display:flex;align-items:center;justify-content:space-between;
    gap:16px;margin-top:96px;padding:12px clamp(22px,4vw,48px);
    background:rgba(250,247,242,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.bc-crumb nav{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;white-space:nowrap}
.bc-crumb a{color:var(--muted,#58524e);text-decoration:none;border-bottom:1.5px solid transparent}
.bc-crumb a:hover{color:var(--ink,#141414);border-color:currentColor}
.bc-crumb i{font-style:normal;color:#b3aaa2}
.bc-crumb span{overflow:hidden;text-overflow:ellipsis}
.bc-crumb-tag{flex:none;padding:5px 12px;border-radius:999px;background:var(--accent,#1FA396);color:#fff;
    font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}

/* ── hero ─────────────────────────────────────────────────────────────── */
.bc-hero{padding:clamp(56px,8vw,110px) 0 clamp(34px,4vw,58px)}
.bc-kicker{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-size:12.5px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#1FA396)}
.bc-kicker i{display:block;width:26px;height:1.5px;background:currentColor;opacity:.55}
.bc-kicker span:last-child{color:var(--dim)}
.bc-hero h1{margin:0 0 26px;font-family:var(--font-heading);font-weight:400;line-height:.92;
    font-size:clamp(48px,8vw,124px);letter-spacing:-.015em}
.bc-lede{margin:0 0 48px;max-width:26em;font-size:clamp(19px,1.7vw,25px);line-height:1.42}
.bc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:0;
    padding-top:26px;border-top:1px solid var(--line)}
.bc-facts dt{margin:0 0 7px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--dim)}
.bc-facts dd{margin:0;font-size:15.5px;line-height:1.45}

/* ── the board ────────────────────────────────────────────────────────── */
.bc-board{margin:0 0 clamp(64px,8vw,120px)}
.bc-board-img{display:block;width:100%;max-width:760px;margin:0 auto;padding:0;border:0;background:none;
    cursor:zoom-in;border-radius:4px;overflow:hidden;box-shadow:0 34px 80px rgba(20,16,12,.22)}
.bc-board-img img{width:100%;height:auto}
.bc-board figcaption{max-width:760px;margin:20px auto 0;font-size:14.5px;line-height:1.5;color:var(--dim);
    text-align:center}
.bc-board figcaption span{display:block;margin-top:4px;font-size:13px;opacity:.8}

/* ── how it started: one narrow column ────────────────────────────────── */
.bc-story{padding:0 0 clamp(64px,8vw,110px)}
.bc-col{max-width:34em;margin:0 auto}
.bc-col p{margin:0 0 22px;font-size:clamp(17px,1.35vw,19.5px);line-height:1.62;color:var(--body,#3a3634)}
.bc-col p:first-of-type{font-size:clamp(18px,1.5vw,21px);color:var(--ink,#141414)}

/* ── the brief ────────────────────────────────────────────────────────── */
.bc-brief{margin:0 0 clamp(72px,9vw,130px);padding:clamp(48px,6vw,86px) 0;
    background:#141414;color:#f5efe6}
.bc-brief-in{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.bc-brief .bc-h2{color:#f5efe6}
.bc-brief-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);
    align-items:start}
.bc-brief-lede{margin:0;font-size:clamp(19px,1.7vw,26px);line-height:1.45;font-family:var(--font-heading);
    font-weight:400}
.bc-brief-list{list-style:none;margin:0;padding:0}
.bc-brief-list li{padding:13px 0 13px 26px;border-top:1px solid rgba(245,239,230,.2);position:relative;
    font-size:15.5px;line-height:1.5;color:rgba(245,239,230,.86)}
.bc-brief-list li:last-child{border-bottom:1px solid rgba(245,239,230,.2)}
.bc-brief-list li::before{content:"";position:absolute;left:0;top:21px;width:11px;height:1.5px;
    background:var(--accent,#1FA396)}

/* ── the identity ─────────────────────────────────────────────────────── */
.bc-id{padding-bottom:clamp(64px,8vw,110px)}
.bc-lockups{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.bc-lockup{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:300px;
    padding:clamp(24px,3vw,40px);border-radius:4px;background:var(--lk-bg);color:var(--lk-ink)}
.bc-lockup-mark{display:block;width:100%;height:120px;background:var(--lk-ink);
    -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
/* Clients flagged color_logo (Island Fish Head) show their real full-colour
   logo instead of a silhouette — it is an <img>, so the mask and the ink
   background have to come back off or they paint over it. */
.bc-lockup-mark.is-color{background:none;object-fit:contain;-webkit-mask:none;mask:none}
.bc-lockup p{margin:0;font-size:13.5px;line-height:1.5;opacity:.85}
.bc-lockup strong{display:block;margin-bottom:3px;font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;opacity:.7}

.bc-pal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:clamp(40px,5vw,70px)}
.bc-sw{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
    min-height:170px;padding:18px;border-radius:4px;background:var(--c);color:var(--ink);overflow:hidden}
/* only set on swatches whose colour can't carry a label at 4.5:1 (see
   brand_cases.swatch_scrim) — everywhere else --scrim is transparent */
.bc-sw::before{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
    background:linear-gradient(to top,var(--scrim,transparent) 0,var(--scrim,transparent) 46%,transparent 100%)}
.bc-sw span,.bc-sw b{position:relative;z-index:1}
.bc-sw span{font-size:13.5px;font-weight:600}
.bc-sw b{font-size:12px;font-weight:500;letter-spacing:.06em;opacity:.78}

.bc-type{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bc-tcard{padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:4px;background:#fff}
.bc-tcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding-bottom:16px;border-bottom:1px solid var(--line)}
.bc-tcard-head strong{font-size:17px}
.bc-tcard-head span{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim)}
.bc-tcard-sample{margin:24px 0 18px;font-size:clamp(26px,3vw,42px);line-height:1.12}
.bc-tcard-note{margin:0;font-size:14.5px;line-height:1.5;color:var(--dim)}

/* ── sketch sheets: the sheet, with its note in the margin ────────────── */
.bc-sheets{padding-bottom:clamp(50px,7vw,96px)}
.bc-sheets-head{max-width:44em}
.bc-sheet{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(24px,3.5vw,54px);
    align-items:start;margin:0 0 clamp(48px,6vw,88px)}
.bc-sheet-img{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
    border-radius:4px;overflow:hidden;box-shadow:0 22px 54px rgba(20,16,12,.16)}
.bc-sheet-img img{width:100%;height:auto}
.bc-sheet figcaption{padding-top:8px}
.bc-sheet figcaption strong{display:block;margin-bottom:12px;font-family:var(--font-heading);
    font-weight:400;font-size:clamp(21px,2vw,29px);line-height:1.1}
.bc-sheet-note{display:block;margin-bottom:16px;font-size:15px;line-height:1.6;color:var(--body,#3a3634)}
.bc-concept{display:inline-block;padding:4px 11px;border-radius:999px;border:1px dashed #b3aaa2;
    font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
/* The sheets alternate sides, the way a printed case study would set them.
   Moving the image to the second slot has to move the WIDE column with it,
   or every other sheet gets squeezed into the margin column. */
.bc-sheet:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
.bc-sheet:nth-child(even) .bc-sheet-img{order:2}

/* ── making the garments ──────────────────────────────────────────────── */
.bc-make{padding-bottom:clamp(60px,8vw,110px)}
.bc-make-head{max-width:46em}
/* the honesty flag reads as a note, not as fine print */
.bc-flag{padding:16px 20px;border-left:3px solid var(--accent,#1FA396);background:#f2ece2;border-radius:0 4px 4px 0}
.bc-flag strong{color:var(--ink,#141414)}
.bc-make-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* two process visuals in a three-column grid leaves a dead column */
.bc-make-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bc-make-grid figure{margin:0}
.bc-make-img,.bc-work-img,.bc-real-img{display:block;width:100%;padding:0;border:0;background:none;
    cursor:zoom-in;border-radius:4px;overflow:hidden;background:#e8e0d5}
.bc-make-img img,.bc-work-img img,.bc-real-img img{width:100%;height:100%;object-fit:cover;
    aspect-ratio:4/5;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bc-make-img:hover img,.bc-work-img:hover img,.bc-real-img:hover img{transform:scale(1.03)}
.bc-make-grid figcaption,.bc-work-grid figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    margin-top:11px;font-size:14px;color:var(--dim)}
.bc-real{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);
    align-items:center;margin:clamp(34px,4vw,56px) 0 0;padding-top:clamp(28px,3.5vw,48px);
    border-top:1px solid var(--line)}
.bc-real figcaption{font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.bc-real-tag{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:999px;
    background:var(--accent,#1FA396);color:#fff;font-size:11px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase}

/* ── finished work ────────────────────────────────────────────────────── */
.bc-work{padding-bottom:clamp(60px,8vw,110px)}
.bc-work-head{max-width:44em}
.bc-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bc-work-grid figure{margin:0}

/* ── pull quote ───────────────────────────────────────────────────────── */
.bc-quote{margin:0 0 clamp(64px,8vw,120px);padding:clamp(54px,7vw,104px) 0;background:#1E120B;color:#F7E8D8}
/* The measure has to sit on the element that carries the display size: an
   em max-width on the <blockquote> resolves against its INHERITED 16px, which
   squeezed a 48px pull quote into a ~320px column, one or two words a line. */
.bc-quote blockquote{max-width:min(960px,100%);margin:0 auto;padding:0 var(--pad);text-align:center}
.bc-quote p{max-width:15em;margin:0 auto 26px;font-family:var(--font-heading);font-weight:400;line-height:1.16;
    font-size:clamp(25px,3.3vw,48px)}
.bc-quote cite{font-style:normal;font-size:13px;line-height:1.5;letter-spacing:.04em;opacity:.66}

/* ── in conclusion ────────────────────────────────────────────────────── */
.bc-end{padding-bottom:clamp(64px,8vw,110px)}
.bc-end-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,76px);
    align-items:start}
.bc-end-copy p{margin:0 0 20px;font-size:clamp(16.5px,1.3vw,19px);line-height:1.6;color:var(--body,#3a3634)}
.bc-table{margin:0}
.bc-table div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
    padding:13px 0;border-top:1px solid var(--line)}
.bc-table div:last-child{border-bottom:1px solid var(--line)}
.bc-table dt{margin:0;flex:none;font-size:12.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--dim)}
.bc-table dd{margin:0;text-align:right;font-size:15px;line-height:1.4}

/* ── the rest of the book ─────────────────────────────────────────────── */
.bc-next{padding-bottom:clamp(60px,8vw,100px)}
.bc-next-head{margin:0 0 22px;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
    color:var(--dim)}
.bc-next-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-bottom:30px}
.bc-next-grid a{text-decoration:none;color:inherit}
.bc-next-grid img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px;
    box-shadow:0 10px 26px rgba(20,16,12,.14);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.bc-next-grid a:hover img{transform:translateY(-5px)}
.bc-next-grid strong{display:block;margin-top:10px;font-size:13.5px;line-height:1.25}
.bc-next-grid span{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.bc-next-all{display:inline-flex;align-items:center;gap:11px;padding:14px 26px;border-radius:999px;
    border:1.6px solid var(--ink,#141414);text-decoration:none;color:inherit;font-size:14px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;transition:background .25s,color .25s,gap .25s}
.bc-next-all:hover{gap:17px;background:var(--ink,#141414);color:#FAF7F2}

/* text lifts in as it arrives */
.bc.is-live [data-rise]{opacity:0;transform:translateY(24px);
    transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.bc.is-live [data-rise].in{opacity:1;transform:none}

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .bc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-brief-grid,.bc-end-grid,.bc-real{grid-template-columns:1fr;gap:28px}
  .bc-sheet,.bc-sheet:nth-child(even){grid-template-columns:1fr;gap:20px}
  .bc-sheet:nth-child(even) .bc-sheet-img{order:0}
  .bc-next-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .bc{--pad:22px}
  .bc-crumb{top:68px;margin-top:74px;padding:10px 22px;font-size:12px}
  .bc-crumb-tag{display:none}
  .bc-lockups,.bc-type{grid-template-columns:1fr}
  .bc-lockup{min-height:210px}
  .bc-pal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-make-grid,.bc-work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bc-next-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bc-next-grid span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bc.is-live [data-rise]{opacity:1;transform:none;transition:none}
  .bc-make-img img,.bc-work-img img,.bc-real-img img,.bc-next-grid img{transition:none}
  .bc-make-img:hover img,.bc-work-img:hover img,.bc-real-img:hover img{transform:none}
  .bc-next-grid a:hover img{transform:none}
}