/* Jian Cha case page. Same two-column rule as the FAVE page; reels sit in the site's tile (--tile-r, --tile-shadow, round play chip),
   planning notes are a hairline list with frames from the reel between them. Motion is opacity only (poster to playing video) on the site's one easing. */
.jc-page { --jc-cols:minmax(0,1.15fr) minmax(0,1fr); --jc-gap-l:48px; --jc-gap-s:24px; --jc-r:var(--tile-r); --jc-lead-w:clamp(300px,30vw,440px); --jc-d1:clamp(44px,6vw,76px); --jc-d2:clamp(36px,4.4vw,58px); --jc-d3:clamp(30px,3.2vw,42px); }
.jc-page :where(figure,h1,h2,h3,p,ol) { margin:0; }
.jc-page a { text-underline-offset:5px; }
.jc-shell { width:min(100%,var(--shell)); padding-inline:var(--site-gutter); margin-inline:auto; }
.jc-page .kicker { margin:0; text-transform:uppercase; }

/* Opening: name, intro and the Jacaranda note read as one block from the top of the reel down (same stacking as the FAVE page),
   so the left column has no hole in the middle. Rows: head / the rest of the reel / the reel's caption. */
.jc-opening { display:grid; grid-template-columns:minmax(0,1fr) var(--jc-lead-w); grid-template-rows:auto 1fr auto; column-gap:var(--jc-gap-l); padding-top:118px; }
.jc-head { grid-column:1; grid-row:1; }
.jc-head h1 { margin-top:18px; font-size:var(--jc-d1); font-weight:300; line-height:1.03; letter-spacing:-.04em; text-wrap:balance; }
.jc-intro { margin-top:var(--jc-gap-s); max-width:600px; color:var(--ink-soft); font-size:clamp(18px,1.7vw,21px); line-height:1.6; text-wrap:pretty; }
.jc-lead { grid-column:2; grid-row:1 / 4; width:100%; display:grid; grid-template-rows:subgrid; }
.jc-lead > .jc-film { grid-row:1 / 3; }
.jc-lead > .jc-caption { grid-row:3; }
.jc-label { grid-column:1; grid-row:2; align-self:start; padding-top:clamp(48px,5vw,72px); }
.jc-label h2 { font-size:var(--jc-d3); font-weight:300; line-height:1.15; letter-spacing:-.03em; }
.jc-label > p { margin-top:14px; max-width:480px; font-size:16px; line-height:1.6; color:var(--ink-soft); text-wrap:pretty; }
.jc-label > p.jc-credit { margin-top:10px; }
.jc-credit { color:var(--ink); }

/* A reel: 9:16, rounded, the poster underneath and the video fading in over it once it plays. */
.jc-film { position:relative; aspect-ratio:9/16; border-radius:var(--jc-r); overflow:hidden; isolation:isolate; background:var(--bg-espresso); box-shadow:var(--tile-shadow); }
.jc-film > img, .jc-film video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.jc-film video { opacity:0; transition:opacity var(--m-d1) var(--m-ease); }
.jc-film video.is-on { opacity:1; }
html:not(.js) .jc-film > img { display:none; }
html:not(.js) .jc-film video { opacity:1; }
html.motion-paused .jc-film video { transition:none; }
@media (prefers-reduced-motion: reduce) { .jc-film video { transition:none; } }
/* Pause and play, added by the page script as <button class="jc-toggle play-chip"><span class="play-chip-dot">: every value
   (30px ink dot in a clear 44px target, right:10px bottom:10px) comes from site.css .play-chip, the same chip as the home film. */

/* Name and date on the left, the outbound link pushed to the right edge. */
.jc-caption { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; padding-top:16px; font-size:14px; }
.jc-caption small { color:var(--ink-soft); font-size:13px; }
.jc-caption .jc-links { display:flex; gap:18px; margin-left:auto; }
.jc-caption a { display:inline-flex; align-items:center; gap:.3em; min-height:44px; margin-block:-12px; font-size:13px; text-decoration:none; }

/* Sections share one head: big title left, short line right. */
.jc-section { padding-top:112px; }
.jc-section-head { display:grid; grid-template-columns:var(--jc-cols); column-gap:var(--jc-gap-l); align-items:end; margin-bottom:32px; }
.jc-section-head h2 { font-size:var(--jc-d2); font-weight:300; line-height:1.08; letter-spacing:-.04em; text-wrap:balance; }
.jc-section-head p { max-width:415px; font-size:16px; color:var(--ink-soft); }

/* Planning notes: a hairline list on the page's two columns (like the About page), one count across the three lists,
   with two frames from the reel set against the notes they belong to. */
.jc-plan { display:grid; grid-template-columns:var(--jc-cols); column-gap:var(--jc-gap-l); row-gap:clamp(48px,5vw,72px); align-items:start; counter-reset:jc-note; }
.jc-notes { list-style:none; padding:0; display:grid; row-gap:36px; }
.jc-notes-a { grid-column:1 / -1; grid-row:1; grid-template-columns:var(--jc-cols); column-gap:var(--jc-gap-l); }
.jc-still-a { grid-column:1; grid-row:2; }
.jc-notes-b { grid-column:2; grid-row:2; }
.jc-notes-c { grid-column:1; grid-row:3; }
.jc-still-b { grid-column:2; grid-row:3; }
.jc-notes li { counter-increment:jc-note; padding-top:20px; border-top:1px solid var(--ink-hairline); }
.jc-notes li::before { content:counter(jc-note, decimal-leading-zero); display:block; margin-bottom:12px; font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.jc-notes h3 { font-size:20px; font-weight:400; line-height:1.3; letter-spacing:-.015em; }
.jc-notes p { margin-top:8px; max-width:34em; font-size:15px; line-height:1.6; color:var(--ink-soft); text-wrap:pretty; }
.jc-still img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--jc-r); background:var(--bg-cream-alt); }
.jc-still figcaption { padding-top:12px; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.jc-handover { margin-top:48px; max-width:640px; font-size:15px; color:var(--ink-soft); text-wrap:pretty; }

/* Two more reels side by side, each with its own notes underneath. */
.jc-pair { display:grid; grid-template-columns:var(--jc-cols); column-gap:var(--jc-gap-l); align-items:start; }
.jc-work { max-width:390px; }
.jc-work:nth-child(2) { margin-top:120px; }
.jc-work h3 { margin-top:26px; font-size:28px; font-weight:400; line-height:1.2; letter-spacing:-.025em; }
.jc-work > p { margin-top:10px; max-width:430px; font-size:15px; line-height:1.6; color:var(--ink-soft); text-wrap:pretty; }
.jc-work > p.jc-credit { color:var(--ink); }
.jc-work .jc-caption { margin-top:6px; }

/* Big cup props: copy on the left, the three print files on a wide tile. */
.jc-props { display:grid; grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr); column-gap:var(--jc-gap-l); align-items:end; }
.jc-props-copy h2 { font-size:var(--jc-d2); font-weight:300; line-height:1.08; letter-spacing:-.04em; }
.jc-props-copy p { margin-top:16px; max-width:380px; font-size:16px; color:var(--ink-soft); text-wrap:pretty; }
.jc-props-sheet { border-radius:var(--jc-r); background:var(--bg-cream-alt); padding:clamp(20px,3.4vw,48px); }
.jc-props-sheet img { display:block; width:100%; height:auto; }
.jc-props figcaption { padding-top:16px; font-size:13px; color:var(--ink-soft); }

/* Before the brief: the review on the left, the dated run of work on the right. */
.jc-before { display:grid; grid-template-columns:var(--jc-cols); column-gap:var(--jc-gap-l); align-items:start; }
.jc-before h2 { margin-top:14px; font-size:var(--jc-d2); font-weight:300; line-height:1.08; letter-spacing:-.04em; }
.jc-before-copy > p:not(.kicker):not(.jc-stat) { margin-top:18px; max-width:500px; font-size:16px; color:var(--ink-soft); text-wrap:pretty; }
/* The review itself, as the same 9:16 tile the Creator page uses, with its play count beside it. */
.jc-review { display:flex; align-items:flex-end; gap:28px; margin-top:32px; }
.jc-review > .jc-film { flex:0 0 clamp(150px,16vw,220px); border-radius:var(--tile-r-sm); }
.jc-review-copy { min-width:0; }
.jc-stat { margin-top:0; }
.jc-stat strong { display:block; font-size:clamp(48px,5.6vw,72px); line-height:1; letter-spacing:-.045em; font-weight:300; color:var(--ink); font-variant-numeric:lining-nums; }
.jc-stat span { display:block; margin-top:10px; font-size:16px; color:var(--ink); }
.jc-before .text-link { display:inline-block; margin-top:20px; padding:10px 0; font-size:16px; text-decoration:underline; text-underline-offset:5px; }
.jc-timeline { list-style:none; padding:28px 32px 30px; border-radius:var(--jc-r); background:var(--bg-cream-alt); }
.jc-timeline-title { margin-bottom:12px !important; }
.jc-timeline li { display:grid; grid-template-columns:78px minmax(0,1fr); column-gap:16px; padding-block:12px; font-size:15px; line-height:1.5; }
.jc-timeline time { color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }

.jc-note { padding-block:72px 96px; }
.jc-note p { max-width:520px; font-size:13px; line-height:1.55; color:var(--ink-soft); }

.jc-page .end-h2 { font-size:var(--jc-d2); line-height:1.08; letter-spacing:-.04em; }
.jc-end-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; }
.jc-end-links .btn-dark { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink); text-decoration:none; }
.jc-end-links .btn-dark > span[aria-hidden='true'] { margin-left:0; }
.jc-page .text-link { display:inline-block; padding:10px 0; text-decoration:underline; text-underline-offset:5px; font-size:16px; }

@media (max-width:960px) {
  .jc-page { --jc-gap-l:32px; --jc-gap-s:16px; }
  /* Here the text column is as tall as the reel, so the caption simply stays under the reel. */
  .jc-lead { display:block; }
  .jc-label { padding-top:var(--jc-gap-l); }
  .jc-section { padding-top:88px; }
  .jc-work:nth-child(2) { margin-top:64px; }
  .jc-props { grid-template-columns:1fr; row-gap:28px; }
  .jc-props-copy p { max-width:560px; }
}
@media (max-width:640px) {
  .jc-page { --jc-r:var(--tile-r-sm); }
  .jc-opening { grid-template-columns:1fr; grid-template-rows:none; padding-top:96px; }
  .jc-head, .jc-lead, .jc-label { grid-column:1; grid-row:auto; }
  .jc-lead { display:block; }
  .jc-label { align-self:auto; }
  .jc-head h1 { margin-top:12px; }
  .jc-intro { margin-top:14px; font-size:17px; }
  .jc-lead { max-width:none; margin-top:36px; }
  .jc-label { padding:32px 0 0; }
  .jc-section { padding-top:72px; }
  .jc-section-head { grid-template-columns:1fr; row-gap:12px; margin-bottom:24px; }
  .jc-plan { grid-template-columns:1fr; row-gap:40px; }
  .jc-notes { row-gap:28px; }
  .jc-notes-a { grid-template-columns:1fr; row-gap:28px; }
  .jc-notes-a, .jc-still-a, .jc-notes-b, .jc-notes-c, .jc-still-b { grid-column:1; grid-row:auto; }
  .jc-notes li { padding-top:18px; }
  .jc-notes li::before { margin-bottom:10px; }
  .jc-handover { margin-top:40px; }
  .jc-review { gap:20px; margin-top:28px; }
  .jc-review > .jc-film { flex-basis:44%; }
  .jc-pair { grid-template-columns:1fr; row-gap:56px; }
  .jc-work { max-width:none; }
  .jc-work:nth-child(2) { margin-top:0; }
  .jc-work h3 { margin-top:22px; font-size:25px; }
  .jc-before { grid-template-columns:1fr; row-gap:36px; }
  .jc-timeline { padding:22px 22px 24px; }
  .jc-timeline li { grid-template-columns:64px minmax(0,1fr); column-gap:12px; padding-block:10px; }
  .jc-stat strong { font-size:44px; }
  .jc-note { padding-block:56px 64px; }
  .jc-caption { font-size:13px; gap:6px 10px; }
}
@media (hover: hover) and (pointer: fine) {
  .jc-caption a:hover { text-decoration:underline; }
}