/* Case-study pages of the draft site, built on the draft homepage (../index.html), Calvin 10 Oct.
   tools/draft_site.py writes work/<client>/index.html from content/work/<client>/ through _template.html.
   The order is the Little Plains-style case study he sent (Tennr): project info (cover card + facts), the intro, then
   each section as captioned media and short prose. Same ground, type, column and corners as the homepage's work grid.
   Pages link this file after ../../../../src/assets/brand.css (the tokens). */
:root[data-theme="dark"] { --ground: #000; }   /* the homepage's pure black */
:root { --col: 840px; --r: 14px; --gap: 20px; --beat: clamp(48px, 7vw, 80px); }

html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.case { max-width: var(--col); margin: 0 auto; padding-inline: 16px; }
@media (min-width: 600px) { .case { padding-inline: max(16px, 6vw); box-sizing: content-box; } }   /* the home grid's edge room */

/* the site menu sits docked over the top of the page (../../menu.css: a 52 px capsule, 10 px down), so the page starts
   below it, and anything a link lands on (a homepage card opens its piece: #anchor) stops below it too (Calvin, 3 Nov:
   "adjust where it loads after click so the top of the image that's clicked on opens below the menu") */
:root { --menu-clear: 88px; }
.case { padding-top: calc(var(--menu-clear) + clamp(24px, 6vh, 72px)); padding-bottom: clamp(96px, 14vh, 160px); }

/* project info: cover card left, the facts right */
.client__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.client__cover { position: relative; width: clamp(140px, 23vw, 288px); aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: #161616; }
/* square, a little taller than the facts beside it (Calvin 10 Oct: "smaller tile -- no need for it to be so much taller than the text",
   then "too small now -- fine for it to be a bit bigger": 288 px at desktop against ~223 px of text) */
.client__cover figure { margin: 0; height: 100%; }
.client__cover img, .client__cover video,
.client__cover .blk img, .client__cover .blk video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }   /* a poster cover fills the tile (beats .blk img's height: auto) */
.client__cover figcaption, .rail__cover figcaption { display: none; }
/* the client's logo, as supplied, centred on its ground (client.md logo + logo_bg), clear space well over the pack's minimum */
.client__logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--paper); }
.client__cover .client__logo img { width: 58%; height: auto; object-fit: contain; }
.client__name { margin: 0; font: 400 clamp(40px, 5.2vw, 60px)/1 var(--font-body); letter-spacing: -.03em; }
.client__link { margin: 12px 0 0; font: 400 13px/1 var(--font-mono); }
.client__link a { color: var(--ink); text-decoration: none; }
.client__link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.meta { display: grid; gap: 20px; margin: clamp(24px, 3.4vw, 36px) 0 0; }
.meta dt { font: 400 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); opacity: .7; }
.meta dd { margin: 7px 0 0; font: 400 16px/1.45 var(--font-body); }

/* the stream: one text size throughout; blocks sit a beat apart, paragraphs run together */
.client__intro { margin-top: var(--beat); }
.prose p { margin: var(--beat) 0 0; max-width: 38em; font: 400 clamp(18px, 1.9vw, 22px)/1.55 var(--font-body); letter-spacing: -.005em; text-wrap: pretty; }
.prose p + p { margin-top: .9em; }
.client__intro > p:first-child { margin-top: 0; }
.prose a { color: inherit; text-underline-offset: 3px; }
.work-item, .blk, .case [id] { scroll-margin-top: var(--menu-clear); }
.work-item__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* anchors + screen readers */
.blk { margin: var(--beat) 0 0; }
.blk img, .blk video { display: block; width: 100%; height: auto; border-radius: var(--r); background: #161616; }
/* pairs and rows: one height, each width set by its aspect ratio (--ar), nothing cropped; same-shape pairs split evenly */
.blk--pair { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.blk--pair > .blk__half { flex: var(--ar, 1) 1 0; min-width: 0; margin: 0; }
.blk--pair > figcaption { flex: 0 0 100%; margin-top: -8px; }
[data-frame] img, [data-frame] video { border: 1px solid #2F3336; box-sizing: border-box; }   /* `frame`: screenshots on black read as cards (X's divider grey) */
figcaption { margin-top: 12px; font: 400 12px/1.45 var(--font-mono); letter-spacing: .01em; color: var(--ink-2); opacity: .8; }
@media (max-width: 560px) { .blk--pair > .blk__half { flex: 0 0 100%; } }
/* a row of 3-4: one height, widths by aspect ratio, nothing cropped (Calvin 10 Oct: the three Barbour shots in one row);
   phones stack them */
.blk--row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.blk--row > .blk__cell { flex: var(--ar, 1) 1 0; min-width: 0; margin: 0; }
.blk--row > figcaption { flex: 0 0 100%; margin-top: -8px; }
@media (max-width: 560px) { .blk--row > .blk__cell { flex: 0 0 100%; } }
/* a bento (::bento): rows a gap apart, each row one height with widths by aspect ratio, so the tiles interlock and
   nothing is cropped (Calvin 10 Oct: a bento of other Valarian content after the relationship copy); phones stack them */
.blk--bento { display: flex; flex-direction: column; gap: var(--gap); }
.bento__row { display: flex; gap: var(--gap); align-items: flex-start; }
.bento__row > .blk__cell { flex: var(--ar, 1) 1 0; min-width: 0; margin: 0; }
.blk--bento > figcaption { margin-top: -8px; }
@media (max-width: 560px) { .bento__row { flex-wrap: wrap; } .bento__row > .blk__cell { flex: 0 0 100%; } }
/* a horizontal scroll (::scroll): one height, widths by aspect ratio, nothing cropped (Calvin, 2 Nov: "rather than
   cropping the images so much in the internet culture row, make it a horizontal scroll"). It keeps the column's edges
   like every other block and scrolls inside them (Calvin: "I don't like the row going full bleed off screen, should have
   same padding rules, just be scrollable"), so the piece cut at the column's edge says there's more. Trackpads and
   phones swipe; the arrows under it (shown only when it overflows) are for a mouse. */
.blk--scroll { --h: 267px; position: relative; }   /* the height of a three-up row in the 840 px column (Calvin, 2 Nov: "vertically the size was
   right, I just wanted full image", "not massive images"), on phones too */
.scroll__track { display: flex; gap: var(--gap); align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; }
.scroll__track::-webkit-scrollbar { display: none; }
.scroll__track:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 6px; }
.scroll__track > .blk__cell { flex: none; width: calc(var(--h) * var(--ar)); margin: 0; scroll-snap-align: start; }
.scroll__track figcaption { max-width: calc(100vw - 32px); }   /* on a phone a caption wraps at the column, not at its wider piece */
.blk--scroll > figcaption { margin-top: 12px; }
/* the arrows ride on the strip's two edges, centred on the pictures (Calvin, 2 Nov: "move arrows"); each goes once its end
   is reached, and touch screens, which swipe, never show them */
.scroll__nav { position: absolute; left: 0; right: 0; top: 0; height: var(--h); pointer-events: none; }
.scroll__nav button { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; color: #fff; background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, opacity .2s; }
.scroll__prev { left: 12px; }
.scroll__next { right: 12px; }
.scroll__nav button:hover { background: rgba(0,0,0,.8); }
.scroll__nav button:disabled { opacity: 0; pointer-events: none; }
.scroll__nav svg { width: 16px; height: 16px; }
@media (hover: none) { .scroll__nav { display: none; } }

/* the rail (Calvin, 1 Nov, from a Tennr case study): the client's tile, name, link and services in the left margin once the
   intro has scrolled away, so you always know whose work you're looking at. Only where the margin can hold it. */
.rail { display: none; }
@media (min-width: 1360px) {
  .rail { display: block; position: fixed; z-index: 5; top: 96px; width: 184px; left: calc(50% - var(--col) / 2 - 44px - 184px);
          opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
  .rail.is-on { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; transform: none; } }
/* the testimonial in the rail, under Services: option 03 of the AD's rail board (_explorations/home-hero/testimonial/rail/),
   Calvin, 3 Nov: "let's go with lime mark, but let's make it white for now. but I like that layout a lot". The display
   face's open quote on the tile's left edge, white for now, then the words with no other quote marks, a step over the
   list. Anton's metrics, measured on the board: line-height .868 puts the top of the glyph on the top of the box, the
   box is the glyph's height (.26em) and the ink starts .026em in. Where the rail shows and the window is 760 px or
   taller, the closing quote steps aside; anywhere else the quote closes the page. */
.rail__quote { margin: 30px 0 0; color: var(--ink); }
.rail__quote blockquote { margin: 0; }
.rail__mark { display: block; height: .26em; margin: 0 0 14px -.026em; font: 400 88px/.868 var(--font-display); color: var(--ink); }
.rail__quote p { margin: 0; font: 400 15px/1.45 var(--font-body); letter-spacing: -.005em; text-wrap: pretty; }
.rail__quote.is-long p { font-size: 14px; }
.rail__quote figcaption { margin: 12px 0 0; font: 400 10px/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
                          color: inherit; opacity: 1; }
.rail__quote .tq__name, .rail__quote .tq__role { display: block; }
.rail__quote .tq__role { color: var(--ink-2); opacity: .8; }
@media (min-width: 1360px) and (min-height: 760px) { .tq--case { display: none; } }
@media (max-height: 759px) { .rail__quote { display: none; } }
.rail__cover { position: relative; width: 120px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #161616; }
.rail__cover figure { margin: 0; height: 100%; }
.rail__cover img, .rail__cover video, .rail__cover .blk img, .rail__cover .blk video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.rail__cover .client__logo img { width: 58%; height: auto; object-fit: contain; }
.rail__name { margin: 16px 0 0; font: 400 24px/1.1 var(--font-body); letter-spacing: -.02em; }
.rail__link { margin: 8px 0 0; font: 400 12px/1.3 var(--font-mono); }
.rail__link a { color: var(--ink); text-decoration: none; }
.rail__link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rail__meta { margin: 22px 0 0; }
.rail__meta dt { font: 400 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); opacity: .7; }
.rail__meta dd { margin: 7px 0 0; font: 400 14px/1.45 var(--font-body); }

/* film facade, quotes, numbers: plain until a case study uses them */
.film { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: #161616; color: var(--ink); }
.film img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* the play button, centred on the poster with the film's running time (Calvin, 1 Nov: "for the longer form videos we
   should highlight them a bit more by NOT having them autoplay, and instead putting a play button on them") */
.film__play { position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%);   /* lower third: clear of a centred subject (the Perplexity lockup) */
              display: inline-flex; align-items: center; gap: 10px;
              padding: 15px 22px 15px 20px; border: 0; border-radius: 999px; background: var(--paper); color: var(--asphalt);
              font: 400 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
              box-shadow: 0 12px 32px rgba(0, 0, 0, .32); transition: transform .2s ease; }
.film:hover .film__play, .film__play:focus-visible { transform: translate(-50%, -50%) scale(1.05); }
.film__icon { width: 10px; height: 12px; flex: none; }
.film__time { margin-left: 2px; opacity: .55; }
.film--clip { aspect-ratio: auto; background: none; }   /* a film keeps its own shape (Casa Virgin's are vertical) */
.film--clip.is-playing .film__play { display: none; }
@media (max-width: 560px) { .film__play { padding: 12px 17px 12px 15px; font-size: 12px; } }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk--quote, .quote { margin: var(--beat) 0 0; font: 400 clamp(20px, 2.4vw, 28px)/1.4 var(--font-body); }
.blk--quote p, .quote p { margin: 0; font: inherit; }
.blk--quote cite, .quote cite { display: block; margin-top: 12px; font: 400 12px/1.4 var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.blk--stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap); }
.stat b { display: block; font: 400 clamp(40px, 6vw, 72px)/.9 var(--font-display); }
.stat span { display: block; margin-top: 8px; font: 400 13px/1.35 var(--font-body); color: var(--ink-2); }

/* more work: shows once another client is live */
.more { margin-top: var(--beat); }
.more:has(> .more__grid:empty) { display: none; }
.more .kicker { margin: 0 0 16px; font: 400 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ccard { display: block; color: inherit; text-decoration: none; }
.ccard__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: #161616; }
.ccard__media img, .ccard__media video { width: 100%; height: 100%; object-fit: cover; }
/* a client's logo tile (Calvin, 3 Nov: "show client logo cards, not work examples"): its own logo file on its logo_bg,
   sized by area (width = k × √aspect) so a long wordmark and a compact mark carry the same weight; work.client_card */
.ccard__media--logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; container-type: inline-size; --logo-k: 15cqi; }
.ccard__logo { position: relative; display: block; flex: none; width: min(calc(var(--logo-k) * sqrt(var(--ar, 4))), 72%); aspect-ratio: var(--ar, 4);
               overflow: clip; overflow-clip-margin: 2px; }
.ccard__media .ccard__logo img { position: absolute; display: block; max-width: none; height: auto; object-fit: fill;
               width: calc(var(--iw, 1) * 100%); left: calc(var(--ix, 0) * 100%); top: calc(var(--iy, 0) * 100%); }
@media (max-width: 560px) { .ccard__media--logo { --logo-k: 24cqi; } }   /* three across on a phone: the marks need more of the tile */
.ccard__label { display: block; margin-top: 10px; font: 400 12px/1.4 var(--font-mono); color: var(--ink-2); }
.ccard__label b { display: block; font: 400 16px/1.3 var(--font-body); color: var(--ink); }

/* The testimonial that closes the page, as text: the client's words in big type, who said it under them (Calvin, 3 Nov:
   "I also don't think this should be on a card -- should be text?"). Until then it was template A's card on the client's
   ground (1 Nov), which the homepage's testimonial cards keep (their copy is in ../index.html). Written by
   work.quote_html(case=True). */
.tq__q { display: block; margin: 0; text-wrap: pretty; }
.tq__q p { margin: 0; font: inherit; }
.tq__hang { margin-left: -.475em; }   /* hanging open quote: Plex's “ is .475em wide */
.tq__by { display: block; text-transform: uppercase; }
.tq__name, .tq__role { display: block; }
.tq__role { opacity: .62; }
.tq__logo { position: relative; display: block; flex: none; width: calc(var(--logo-k) * sqrt(var(--ar, 4))); aspect-ratio: var(--ar, 4);
            overflow: clip; overflow-clip-margin: 2px; }
.tq__logo img { position: absolute; display: block; max-width: none; height: auto;
                width: calc(var(--iw, 1) * 100%); left: calc(var(--ix, 0) * 100%); top: calc(var(--iy, 0) * 100%); }
.tq--case { --q: clamp(22px, 2.6vw, 32px); margin: var(--beat, 80px) 0 0; color: var(--ink); }
.tq--case.is-long { --q: clamp(20px, 2.1vw, 26px); }
.tq--case .tq__q { padding: 0; font: 400 var(--q)/1.3 var(--font-body); letter-spacing: -.015em; }
.tq--case.is-long .tq__q { line-height: 1.36; }
.tq--case .tq__by { margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; font: 400 12px/1.55 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); }