/* =============================================================================
   case.css — shared structure for every case study
   -----------------------------------------------------------------------------
   Each project page loads: base.css → case.css → themes/<project>.css
   case.css gives every page the same bones (so they read consistently):
     C1. Case hero bones      — breadcrumb, title, summary, meta facts
     C2. Chapters             — numbered sections: context, role, process…
     C3. Contribution split   — what I did / what the team owned
     C4. Lists & credits
     C5. Media layouts        — single, pair, trio and gallery grids
     C6. Takeaway             — "what it shows" statement
     C7. Notices              — confidentiality / verification notes
     C8. Brand worlds         — each opening set in the client's own world
   The theme files then give each project its own art direction.
   ============================================================================= */


/* =============================================================================
   C1. CASE HERO BONES
   ============================================================================= */
.case-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 120px));
  padding-bottom: clamp(56px, 8vw, 120px);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em .9em;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.crumbs a { color: var(--text-soft); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .3em; }
.crumbs a:hover { color: var(--text); }
.crumbs .numeral { font-size: 1.1rem; }
.case-title {
  font-size: var(--fs-h1);
  line-height: .9;
  letter-spacing: -.02em;
  max-width: 14ch;
}
.case-title .descriptor { display: block; margin-top: .3em; font-size: .32em; letter-spacing: .01em; line-height: 1.2; }
.case-summary {
  max-width: 34ch;
  margin-top: clamp(20px, 2.6vw, 34px);
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--text);
}
.case-meta { margin-top: clamp(28px, 4vw, 48px); max-width: 640px; }
.case-actions { margin-top: 28px; }


/* =============================================================================
   C2. CHAPTERS — numbered sections (i. ii. iii.)
   Heading sits in a narrow left column and scrolls with its chapter (it never
   sticks to the top); text in the reading column. Width is capped so lines
   stay comfortable on big monitors.
   ============================================================================= */
.chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px clamp(16px, 2.6vw, 44px);
  padding-block: clamp(56px, 7vw, 110px);
  border-top: 1px solid var(--rule);
}
.chapter__head { grid-column: 1 / span 4; align-self: start; }
.chapter__head .numeral { display: block; font-size: 1.4rem; margin-bottom: .3em; }
.chapter__title { font-size: var(--fs-h3); line-height: 1.02; max-width: 12ch; }
.chapter__body { grid-column: 6 / span 7; }
.chapter__body > * + * { margin-top: 1.05em; }
.chapter__body p { color: var(--text-soft); max-width: var(--measure); }
.chapter__body p strong { color: var(--text); font-weight: 600; }
.chapter__wide { grid-column: 1 / -1; margin-top: clamp(16px, 2vw, 28px); }
@media (max-width: 960px) {
  .chapter__head, .chapter__body { grid-column: 1 / -1; }
}


/* =============================================================================
   C3. WHAT I DID — one or more columns of my own work
   ============================================================================= */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 26px clamp(20px, 3vw, 44px);
}
.split__col { border-top: 1.5px solid var(--text); padding-top: 14px; }
.split__col h3 { margin-bottom: 12px; }
.split__col p { color: var(--text-soft); }


/* =============================================================================
   C4. LISTS & CREDITS
   ============================================================================= */
/* Ticked list — each item marked with a small four-point seed */
.ticks { list-style: none; padding: 0; display: grid; gap: .55em; }
.ticks li { position: relative; padding-left: 1.4em; color: var(--text-soft); line-height: 1.45; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .6em; height: .6em;
  background: currentColor;
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.8 6 14 9.2 20 10C14 10.8 10.8 14 10 20C9.2 14 6 10.8 0 10C6 9.2 9.2 6 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.8 6 14 9.2 20 10C14 10.8 10.8 14 10 20C9.2 14 6 10.8 0 10C6 9.2 9.2 6 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ticks li strong { color: var(--text); font-weight: 600; }

/* Credits — a quiet end-roll of collaborators */
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px 32px; }
.credits div { border-top: 1px solid var(--rule); padding-top: 10px; }
.credits dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); }
.credits dd { margin-top: 4px; font-size: 1.15rem; line-height: 1.3; }

/* Process steps — horizontal sequence that wraps */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--rule-strong);
}
.steps li { position: relative; padding: 18px 18px 22px 0; border-bottom: 1px solid var(--rule); }
.steps li + li { padding-left: 18px; border-left: 1px solid var(--rule); }
.steps .numeral { display: block; margin-bottom: 6px; font-size: 1.2rem; }
.steps h3 { font-size: 1.35rem; line-height: 1.1; margin-bottom: 6px; }
.steps p { font-size: 1.04rem; color: var(--text-soft); line-height: 1.4; }
@media (max-width: 640px) { .steps li + li { padding-left: 0; border-left: 0; } }


/* =============================================================================
   C5. MEDIA LAYOUTS
   Frames (base.css 09f) keep every image's real proportions. These grids only
   decide how many sit side by side and how wide the group may get.
   ============================================================================= */
.media-single { max-width: 1100px; margin-inline: auto; }
.media-pair, .media-trio, .gallery {
  display: grid;
  gap: clamp(16px, 2.4vw, 36px);
  align-items: start;
}
.media-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.media-pair .frame, .media-trio .frame, .gallery .frame { --frame-max-h: min(60vh, 560px); }
@media (max-width: 760px) {
  .media-pair, .media-trio { grid-template-columns: 1fr; }
}
/* Video frame: 16:9 stage for the click-to-load facade */
.frame--video { --ar: 1.7778; background: var(--sumi); }


/* =============================================================================
   C6. TAKEAWAY — what the project demonstrates
   ============================================================================= */
.takeaway {
  padding-block: clamp(64px, 9vw, 140px);
  border-top: 1px solid var(--rule);
}
.takeaway__label { margin-bottom: 18px; }
.takeaway__text {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  max-width: 26ch;
  text-wrap: balance;
}
.takeaway__text em { color: var(--text-soft); }


/* =============================================================================
   C7. NOTICES
   ============================================================================= */
.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 760px;
  padding: 16px 18px;
  border: 1px dashed var(--rule-strong);
  font-size: 1.04rem;
  font-style: italic;
  color: var(--text-soft);
}
.notice .seed { flex: none; margin-top: .45em; }


/* =============================================================================
   C8. BRAND WORLDS — each case study opens inside its client's own world
   -----------------------------------------------------------------------------
   The opening (.case-hero) of a featured project is set in that organisation's
   colours and motifs (Urban List's black and white, the cardiology practice's
   navy and heartbeat, SYN's red studio…), as HEARTPULSE's does. The theme file
   paints the world; these are the shared bones:
     .world          light text on the brand's ground (a light world, like the
                     Naginata Federation's stone, resets the colours itself)
     .world--edge    paper follows: the world ends on a dry-brush edge, so the
                     paper below shows through its bristles
     .world--fade    the night follows: the world dissolves into the void
   Both endings are static masks: drawn by the GPU, never repainted.
   ============================================================================= */
.world {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --text: #fff;
  --text-soft: rgba(255, 255, 255, .82);
  --text-faint: rgba(255, 255, 255, .64);
  --rule: rgba(255, 255, 255, .18);
  --rule-strong: rgba(255, 255, 255, .36);
  color: var(--text);
}
.world ::selection { background: #fff; color: #000; }
.world :focus-visible { outline-color: #fff; }
.world--edge {
  --edge: clamp(48px, 7vw, 120px);
  padding-bottom: calc(clamp(56px, 8vw, 120px) + var(--edge));
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--edge) + 2px) no-repeat,
                url("/assets/brand/edge-flyingwhite.svg") 0 100% / 100% var(--edge) no-repeat;
          mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--edge) + 2px) no-repeat,
                url("/assets/brand/edge-flyingwhite.svg") 0 100% / 100% var(--edge) no-repeat;
}
.world--fade {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent);
}