/* BeamCue home — v2. Loads after v2-core.css. */

/* ---------- timeline spine ---------- */
.v2-frame { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.v2-spine {
  position: relative; border-right: 1px solid var(--line);
  background-image:
    repeating-linear-gradient(to bottom, var(--ruler-tick) 0 1px, transparent 1px var(--ruler-tick-gap)),
    repeating-linear-gradient(to bottom, var(--ruler-tick-major) 0 1px, transparent 1px var(--ruler-tick-major-gap));
  background-size: 18px 100%, 34px 100%;
  background-position: right 0 top 0;
  background-repeat: no-repeat;
}
.v2-tc { position: absolute; left: 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--fg-3); }
.v2-tc.now { color: var(--sig); }
.v2-playhead { position: absolute; left: -1px; width: calc(100% + 1px); height: var(--playhead-width); background: var(--playhead); }
.v2-playhead::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--playhead); }
.v2-col { min-width: 0; }

/* ---------- hero ---------- */
.v2-hero { padding: 78px 56px 0; }
.v2-hero h1 { font-size: clamp(48px, 7vw, 100px); letter-spacing: var(--track-display); margin: 26px 0 0; max-width: 1120px; }
.v2-hero h1 em { font-style: normal; color: var(--sig); }
.v2-lede { color: var(--fg-2); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; max-width: 700px; margin-top: 30px; }
.v2-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 38px; }
.v2-hero .v2-micro { margin-top: 20px; }

/* ---------- clip track ---------- */
.v2-track { margin-top: 56px; padding: 22px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v2-track-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.v2-clips { display: flex; gap: 6px; }
/* A clip is as wide as its scene is long. The share arrives as a custom
   property rather than an inline `flex`, so a narrow screen can drop the
   proportions instead of being overruled by the style attribute. */
.v2-clip {
  flex: var(--clip-share, 1) 1 0;
  display: grid; align-content: space-between; gap: 8px; min-width: 0; min-height: 104px;
  padding: 12px 13px; border: 1px solid var(--clip-border); border-radius: var(--clip-radius); background: var(--clip-bg);
}
.v2-clip .n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--fg-3); }
.v2-clip .t { font-size: 13px; line-height: 1.35; color: var(--fg-2); }
.v2-clip .d { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); }
.v2-clip.on { border-color: var(--clip-border-selected); background: var(--clip-bg-selected); }
.v2-clip.on .n, .v2-clip.on .d { color: var(--sig); }
.v2-clip.on .t { color: var(--fg); font-weight: 700; }

/* ---------- gallery strip ---------- */
.v2-strip { margin-top: 60px; }
.v2-strip-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.v2-strip-head h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.042em; margin-top: 14px; max-width: 720px; }
.v2-strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* Card component: same anatomy as the gallery grid. gallery.css owns the copy
   the gallery page loads; home.css carries its own because v2 keeps one
   stylesheet per page (see design.md "Migration"). Keep the two in step. */
.v2-card { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--bg-2); overflow: hidden; display: grid; align-content: start; }
.v2-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-3); border-bottom: 1px solid var(--line); overflow: hidden; }
.v2-card-media img, .v2-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-medium) var(--ease-out); }
.v2-card:hover .v2-card-media img, .v2-card:hover .v2-card-media video { transform: scale(1.02); }
.v2-card-live {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--radius-round);
  background: var(--sig); color: var(--bg);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.v2-card-open {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: oklch(8% 0.02 265 / 0.58);
  opacity: 0; transition: opacity var(--duration-short) var(--ease-out);
}
.v2-card-open > span {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--control-height); padding: 0 18px;
  border-radius: var(--radius-control); background: var(--sig); color: var(--bg);
  font-size: 14px; font-weight: 700;
}
.v2-card:hover .v2-card-open, .v2-card:focus-within .v2-card-open { opacity: 1; }
/* The card opens the story page, so the media well advertises what is inside
   the story — scenes and conversation — instead of a play button that used to
   promise the player itself. */
.v2-card-badge {
  position: absolute; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--radius-round);
  background: oklch(15.5% 0.022 265 / 0.86);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; color: var(--fg);
}
.v2-card-badge.left { left: 12px; }
.v2-card-badge.right { right: 12px; }
.v2-card-body { display: grid; gap: 11px; padding: 16px; }
.v2-card-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.v2-card-title h3 { font-size: 19px; letter-spacing: -0.03em; line-height: 1.22; }
/* A long title must not squeeze the category chip into a two-line stack:
   the title wraps, the chip keeps its own width. */
.v2-card-title .v2-chip { flex: none; }
.v2-card-summary { color: var(--fg-2); font-size: 13px; line-height: 1.55; min-height: 40px; }
.v2-card-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); }
.v2-card-meta strong { color: var(--fg-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v2-empty-panel { display: grid; gap: 16px; justify-items: start; margin-top: 60px; padding: 40px; }
.v2-empty-panel h2 { font-size: 28px; }
.v2-empty-panel p { color: var(--fg-2); max-width: 560px; }

/* ---------- claims ---------- */
.v2-claims { border-top: 1px solid var(--line-2); }
.v2-claim { display: grid; grid-template-columns: 80px 360px minmax(0, 1fr) 220px; gap: 36px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.v2-claim:last-child { border-bottom: 0; }
.v2-claim .k { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--sig); }
.v2-claim h3 { font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.035em; line-height: 1.06; }
.v2-claim > p { color: var(--fg-2); font-size: 15px; line-height: 1.62; }
.v2-claim .vs { border-left: 1px solid var(--line); padding-left: 22px; }
.v2-claim .vs .x { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; }
.v2-claim .vs p { font-size: 13px; color: var(--fg-3); line-height: 1.55; }

/* ---------- recorders, outputs, metrics ---------- */
.v2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v2-rec { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 18px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--bg-2); }
.v2-rec-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 16px; }
.v2-rec h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.035em; }
.v2-plat { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: var(--radius-round); padding: 5px 11px; max-width: 100%; overflow-wrap: anywhere; }
.v2-rec p { color: var(--fg-2); font-size: 15px; line-height: 1.62; }
.v2-rec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v2-rec li { display: flex; gap: 11px; font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.v2-rec li svg { flex: none; color: var(--sig); margin-top: 3px; }

.v2-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
.v2-mode { display: grid; align-content: start; gap: 12px; padding: 26px 22px; background: var(--bg-2); }
.v2-mode .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--bg-3); color: var(--sig); }
.v2-mode h3 { font-size: 19px; letter-spacing: -0.03em; }
.v2-mode p { color: var(--fg-2); font-size: 13px; line-height: 1.55; }

/* Keep Korean words together; long words can still wrap on small screens. */

.v2-led { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; margin: 0 0 20px; }
.v2-led > div { display: grid; gap: 8px; padding: 26px 24px; background: var(--bg-2); }
.v2-led dt { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.v2-led dd { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.v2-led .fall { color: var(--data); }

/* ---------- close ---------- */
.v2-close { padding: 96px 56px; background: var(--sig); color: var(--bg); }
/* Ink on the accent panel: the small type carried so little of it that the
   kicker and the fine print read as grey on lime. Only the long sentence, set
   large, can afford to be held back. */
.v2-close .v2-label { color: var(--bg); opacity: 0.88; }
.v2-close h2 { font-size: clamp(38px, 5.5vw, 76px); letter-spacing: -0.05em; max-width: 1000px; }
.v2-close p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; margin-top: 24px; max-width: 620px; opacity: 0.82; }
.v2-close-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.v2-btn-dark { background: var(--bg); border-color: var(--bg); color: var(--sig); }
.v2-btn-dark:hover { background: var(--bg-2); border-color: var(--bg-2); color: var(--sig); }
.v2-btn-line { background: transparent; border-color: oklch(15.5% 0.022 265 / 0.4); color: var(--bg); }
.v2-btn-line:hover { background: oklch(15.5% 0.022 265 / 0.08); border-color: var(--bg); color: var(--bg); }
.v2-close .fine { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; margin-top: 26px; opacity: 0.9; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .v2-claim { grid-template-columns: 56px minmax(0, 1fr); gap: 20px; }
  /* Four children, two columns: without this the claim's own paragraph lands in
     the 56px number column and wraps to one word a line. It belongs under the
     heading, beside the number, like everything else in the claim. */
  .v2-claim > p,
  .v2-claim .vs { grid-column: 2; }
  .v2-claim .vs { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; }
  .v2-modes, .v2-led { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* The count and the note sit at either end of one line until a phone leaves
     them touching in the middle; then they read as two lines. */
  .v2-track-head { flex-direction: column; gap: 4px; }
}
@media (max-width: 900px) {
  .v2-frame { grid-template-columns: 1fr; }
  .v2-spine { display: none; }
  .v2-hero { padding: 32px 18px 0; }
  .v2-close { padding: 56px 18px; }
  .v2-two { grid-template-columns: 1fr; }
  .v2-rec { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  /* Six proportional clips across a phone leave about fifty pixels each: one
     syllable a line and a duration broken in half. They wrap into readable
     cards instead, and the proportions go, since nothing can be read from a
     50px column anyway. */
  .v2-clips { flex-wrap: wrap; }
  .v2-clip { flex: 1 1 140px; }
  .v2-hero-actions .v2-btn { flex: 1 1 200px; }
  .v2-strip-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .v2-modes, .v2-led { grid-template-columns: 1fr; }
}