/* Case-study pages — loaded only by the work pages, on top of scco.css.
   Same chassis: one type size, the five-column grid, no rules, no shadows.
   Everything here is either the grid, a measured diagram, or client artwork. */

/* ---- masthead variant: a case page names the project, not the practice ---- */
.masthead .backlink { color:var(--rest); text-decoration:none; }
.masthead .backlink:hover { color:var(--ink); }

/* ---- title band ----
   The masthead on a case page is a thin sticky breadcrumb only. The standfirst
   lives here instead, so nothing long floats over the plates while you scroll. */
.case-title { margin-bottom:calc(var(--unit)*3); }
.case-title h1 { font:inherit; font-size:var(--fs); font-weight:700; grid-column:1 / 2; }
.case-title .case-title__sub { grid-column:2 / 6; color:var(--dim); max-width:46em; }

/* project facts, read as an index row so it rhymes with the home page */
.case-facts { margin-bottom:calc(var(--unit)*4); }
.fact__k { color:var(--rest); display:block; }
.fact__v { color:var(--ink); display:block; }

/* ---- numbered sections ---- */
.sec { margin-bottom:calc(var(--unit)*5); }
.sec__no { grid-column:1 / 2; color:var(--rest); }
.sec__no b { font-weight:700; color:var(--ink); display:block; }
.sec__body { grid-column:2 / 6; }
.sec__body > * + * { margin-top:var(--unit); }
.sec__body p { max-width:46em; color:var(--dim); }
.sec__body p strong { color:var(--ink); font-weight:700; }
.sec__body a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.sec__body a:hover { color:var(--dim); }

/* a caption under any plate */
.cap { color:var(--rest); margin-top:calc(var(--unit)/2); }
.cap b { color:var(--ink); font-weight:700; }

/* ---- spec lists: label left, value right, on one line ---- */
.spec { display:grid; grid-template-columns:14em 1fr; column-gap:20px; max-width:46em; }
.spec dt { color:var(--rest); }
.spec dd { color:var(--ink); margin-bottom:calc(var(--unit)/2); }

/* ---- plates: client artwork, sat on a neutral field in either theme ---- */
.plates { display:grid; gap:var(--unit); }
.plates--1 { grid-template-columns:1fr; max-width:52em; }
.plates--2 { grid-template-columns:repeat(2, 1fr); }
.plates--3 { grid-template-columns:repeat(3, 1fr); }
.plates--4 { grid-template-columns:repeat(4, 1fr); }
.plate img { width:100%; height:auto; display:block; }
/* A row of plates only reads as a row when every plate is the same height, so
   the captions sit on one line. Each row declares one ratio and crops to it. */
.plates--logo .plate > img { aspect-ratio:1397 / 720; object-fit:cover; }
.plates--logo .construct { padding:0; }   /* the dashed line IS the plate edge */

.plates--gradient .plate > img { aspect-ratio:5 / 4; object-fit:cover; }
.plates--card .plate > img { aspect-ratio:1004 / 650; object-fit:cover; }
.plates--photo .plate > img { aspect-ratio:4 / 5; object-fit:cover; }
/* social runs at several ratios — 9:16 stories, 4:5 and 3:4 posts. Cropping them
   to one shape cuts the type off, which is the one thing a post cannot lose, so
   they share a HEIGHT and keep their own widths, like prints laid on a table. */
.plates--story { grid-template-columns:repeat(4, auto); justify-content:start;
  align-items:end; column-gap:calc(var(--unit)*1.5); }
.plates--story .plate { display:flex; flex-direction:column; justify-content:flex-end; }
.plates--story .plate > img { height:clamp(160px, 20vw, 320px); width:auto; aspect-ratio:auto; }
.plates--story .cap { max-width:15em; }

/* the composition spread pairs a landscape card with a tall story — they are
   held to one height rather than one width, the way a printed spread would be */
.plates--compose { grid-template-columns:auto auto; justify-content:start; align-items:start;
  column-gap:calc(var(--unit)*2); }
.plates--compose .plate img { height:min(380px, 40vw); width:auto; }
.plates--compose .baseline { display:inline-block; }
.plates--compose .cap { max-width:30em; }

/* ---- logotype construction diagram ----
   Measured, not decorative. The wordmark art is trimmed to its own bounding box
   (917 x 240 px, so width = 3.82 cap heights). The dashed box is that bounding
   box grown by exactly one cap height on all four sides — the clear-space rule —
   which makes the plate 1397 x 720. Every number below is that ratio:
     917/1397 = 65.64%   240/1397 = 17.18%   240/720 = 33.33% */
.construct { background:#FFFFFF; padding:calc(var(--unit)*2); }
:root[data-theme="dark"] .construct { background:#F4F4F4; }
.construct__box { position:relative; aspect-ratio:1397 / 720; outline:1px dashed #9C9C9C; }
.construct__box img {
  position:absolute; left:17.18%; top:33.33%; width:65.64%; height:33.34%;
  display:block;
}
.construct__unit {                       /* one cap height, squared, for scale */
  position:absolute; left:0; top:0; width:17.18%; aspect-ratio:1 / 1;
  background:#E8E8E8;
}

/* ---- colour ---- */
.ways { display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(var(--unit)*1.5); }
.way__name { margin-bottom:calc(var(--unit)/2); }
.way__name span { color:var(--rest); }
.ramp { display:grid; grid-template-columns:repeat(5, 1fr); }
.ramp .sw { aspect-ratio:1 / 1.5; }
.chips { margin-top:calc(var(--unit)/2); }
.chip { display:grid; grid-template-columns:1fr auto; column-gap:12px; color:var(--rest); }
.chip b { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---- type specimen ---- */
.specimen {
  background:#FFFFFF; color:#111111;
  padding:calc(var(--unit)*2);
  font-weight:400; letter-spacing:.02em;
}
:root[data-theme="dark"] .specimen { background:#F4F4F4; }
.specimen__big { font-size:clamp(34px, 7vw, 84px); line-height:1; letter-spacing:.02em; }
.specimen__set { font-size:18px; line-height:1.35; margin-top:var(--unit); letter-spacing:.06em; }
.specimen__glyphs {
  font-size:15px; line-height:1.6; margin-top:var(--unit);
  color:#6A6A6A; letter-spacing:.08em; overflow-wrap:anywhere; word-break:break-all;
}

/* ---- baseline / composition diagram ---- */
.baseline { position:relative; }
.baseline img { width:100%; height:auto; display:block; }
.baseline::after {                       /* the single baseline the strapline sits on */
  content:""; position:absolute; left:0; right:0; top:56%;
  border-top:1px dashed rgba(210,59,34,.85);
}

/* ---- do / don't ---- */
.rules { display:grid; grid-template-columns:repeat(2, 1fr); gap:calc(var(--unit)*2); max-width:52em; }
.rules h3 { font:inherit; font-weight:700; color:var(--ink); margin-bottom:calc(var(--unit)/2); }
.rules ul { list-style:none; }
.rules li { color:var(--dim); margin-bottom:calc(var(--unit)/2); text-indent:-1.1em; padding-left:1.1em; }
.rules li::before { content:"+\00a0"; color:var(--rest); }
.rules .dont li::before { content:"\2212\00a0"; }

/* ---- delivered files manifest ---- */
.manifest { max-width:52em; }
.manifest .mrow { display:grid; grid-template-columns:1fr 12em 9em; column-gap:20px; color:var(--dim); }
.manifest .mrow--head { color:var(--rest); margin-bottom:calc(var(--unit)/2); }
.manifest .mrow span:first-child { color:var(--ink); }
.manifest .mrow span:last-child { text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width:800px) {
  .case-title h1, .case-title .case-title__sub,
  .sec__no, .sec__body { grid-column:1 / 3; }
  /* the facts stack; the year loses its right-hand column, so it loses the rule too */
  .case-facts { row-gap:var(--unit); }
  .case-facts .fact.c--year { text-align:left; }
  .sec__no { margin-bottom:var(--unit); }
  .sec__no b { display:inline; }
  .sec__no b::after { content:" \00a0"; }
  .plates--2, .plates--3, .plates--4, .ways, .rules { grid-template-columns:1fr; }
  .plates--story { grid-template-columns:1fr; align-items:stretch; }
  .plates--story .plate > img { height:auto; width:100%; }
  .plates--story .cap { max-width:none; }
  .spec { grid-template-columns:1fr; }
  .spec dt { margin-top:calc(var(--unit)/2); }
  .manifest .mrow { grid-template-columns:1fr 6em; }
  .manifest .mrow span:nth-child(2) { display:none; }
}