/* /showcase/build-film: "The film", a candidate treatment of /what-we-build.
   Layers on base.css, and is loaded on this page only.

   Three sections: the film with its headline, lede and actions; the eight
   capabilities as ruled rows; the close. The film is the one large object
   on the page, so everything around it stays in the recorded system: Paper
   ground, hairlines, no shadows, Outfit setting and Plex reading. */

/* ── Hero and film ──────────────────────────────────────────────── */

.wf-hero { padding: 40px 0 72px; }

/* Display, section: the h1 role for every page below the homepage. Two
   explicit lines, one per sentence. */
.wf-hero h1 { font-size: clamp(33px, 4.5vw, 57px); }
.wf-hero h1 .line { display: block; }
.wf-hero h1 .line + .line { margin-top: 0.1em; }

/* Lede role. One line from 1280px up, held there by its length and a wide
   measure rather than by nowrap, so it still wraps where there is no width. */
.wf-lede {
  margin-top: 16px;
  max-width: 62em;
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--body);
}

/* The actions, above the film so the primary one is in the first viewport,
   with the film's play and pause control at the other end of the row. */
.wf-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: 24px;
}
.wf-cta .actions { margin-top: 0; }

/* A quiet text control, not a third button: it names what it does and
   changes its words with the film's state. 44px tall for a thumb. */
.wf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 160ms ease;
}
.wf-toggle[hidden] { display: none; }
.wf-toggle:hover { color: var(--teal-deep); }
.wf-toggle-icon { flex: none; fill: currentColor; }
.wf-toggle[data-state="playing"] .wf-icon-play,
.wf-toggle[data-state="paused"] .wf-icon-pause { display: none; }

.wf-film { margin-top: 28px; }

/* The frame: a hairline and the panel radius, on Surface, so the poster
   and the paused film read as one object on the Paper ground. Nothing
   else: the controls are the browser's own. */
.wf-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
}
.wf-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  object-fit: contain;
}

/* The ring goes on the frame rather than the video, because the frame
   clips its corners and would cut an outline drawn on the video itself. */
.wf-video:focus-visible { outline: none; }
.wf-frame:has(.wf-video:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Captions in the site's type rather than the browser's default face, on a
   quieter Ink band than the browser's black, still dark enough for a line
   to read over a white screen. */
.wf-video::cue {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-size: clamp(14.5px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  color: #FBFBF8;
  background-color: rgba(17, 22, 27, 0.78);
}

/* The note that labels the example, directly under the frame it labels. */
.wf-note {
  max-width: 44em;
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Transcript ─────────────────────────────────────────────────── */

/* The captions as text, collapsed. The disclosure mark is drawn rather
   than left to the browser's triangle, which belongs to no design system. */
.wf-transcript {
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}
.wf-transcript summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding-top: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.wf-transcript summary::-webkit-details-marker { display: none; }
.wf-transcript summary::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 2px 0 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}
.wf-transcript[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.wf-transcript summary:hover { color: var(--teal-deep); }

/* Instrument role: a running time is a measurement. */
.wf-transcript-len,
.wf-at {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.wf-lines {
  list-style: none;
  display: grid;
  gap: 9px;
  max-width: 46em;
  margin-top: 8px;
  padding-bottom: 6px;
}
.wf-lines li {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}
.wf-at { padding-top: 3px; }

/* ── The capabilities ───────────────────────────────────────────── */

.wf-caps h2 { max-width: 14em; }
.wf-caps-lede { max-width: 34em; }

/* Ruled rows rather than cards: title, one line, the way out. Unnumbered,
   because these are switches rather than stages. */
.wf-list {
  list-style: none;
  margin-top: 44px;
  border-top: 1px solid var(--rule);
}
.wf-row {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 40px;
  padding: 24px 0 25px;
  border-bottom: 1px solid var(--rule);
}

/* A reader who followed a homepage link to one of these lands on it with
   its ground changed, so the eye finds the row the link meant. */
.wf-row:target {
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  background: var(--surface);
}

.wf-row-title { font-size: 20px; }

/* The homepage's capability mark: a 9px square in Ink. home.css moved it
   off teal, because a list marker confirms nothing. */
.wf-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 13px;
  border-radius: 2px;
  background: var(--ink);
  vertical-align: 0.14em;
}

.wf-row-line {
  max-width: 40em;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

.wf-row-go {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  white-space: nowrap;
}

/* 44px to a thumb, pulled back with a negative margin so the row keeps its
   height. */
.wf-go {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 10px 0;
  margin: -10px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 160ms ease;
}
.wf-go span { color: var(--teal-deep); transition: transform 160ms ease; }
.wf-go:hover { color: var(--teal-deep); }
.wf-go:hover span { transform: translateX(3px); }

.wf-seek {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin: -12px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition: color 160ms ease;
}
.wf-seek-icon { flex: none; fill: currentColor; }
.wf-seek:hover { color: var(--ink); }

/* ── Close ──────────────────────────────────────────────────────── */

.wf-close h2 { max-width: 15em; }

/* ── Narrow screens ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .wf-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 22px 0 23px;
  }
  .wf-row-go {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 26px;
    margin-top: 6px;
  }
}

@media (max-width: 700px) {
  .wf-hero { padding: 32px 0 56px; }
  .wf-lede { font-size: 18px; margin-top: 14px; }
  .wf-cta { margin-top: 20px; }
  .wf-film { margin-top: 24px; }
  .wf-frame { border-radius: 12px; }
  .wf-row:target { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
}

/* The phone rendition is 9:16, recorded at a phone's own width, so its
   type reads at the size it is watched. The whole frame and its native
   controls fit the screen once it is in view, so the extra control steps
   aside. */
@media (max-width: 600px) {
  .wf-video { aspect-ratio: 9 / 16; }
  .wf-toggle { display: none; }
}

/* Two full-width buttons stacked beat two that wrap unevenly. */
@media (max-width: 520px) {
  .wf-cta .actions,
  .wf-close .actions { flex-direction: column; align-items: stretch; width: 100%; }
  .wf-cta .actions .btn,
  .wf-close .actions .btn { text-align: center; }
}