/* Media kit and event embed.
   The almart.in notebook substrate (paper, ink, rule lines, one cinnabar
   accent, flat, both colour modes) carrying one draftigami material: the
   position-by-pick grid. Shared by /media/ and /embed/. */

@import url("../theme.css");

/* Colours come from theme.css. These are the kit's own type and motion tokens. */
.kit, .kit-embed {
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --slab: 'Arvo', Rockwell, "Roboto Slab", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- the grid crop ---------- */

.crop {
  --cols: 13;
  display: grid;
  grid-template-columns: var(--axis, 2.6em) repeat(var(--cols), minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--crop-size, 12px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.crop > * {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: var(--cell-h, 30px);
}
.crop-head { font-weight: 700; color: var(--ink-mid); min-height: 1.9em; }
.crop-axis { justify-content: end; padding-right: 0.6em; color: var(--ink-faint); font-weight: 600; }
.crop-head.is-hit, .crop-axis.is-hit { color: var(--accent); }
.crop-cell { font-weight: 600; color: var(--heat-ink); background: rgb(var(--heat) / var(--op, 0)); }
.crop-cell.is-deep { color: var(--paper); }
.crop-cell.is-open { border: 1px solid var(--rule); }
.crop-cell.is-lane { border: 1px solid var(--rule); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.crop-cell.is-hit {
  position: relative;
  z-index: 1;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--slab);
  font-weight: 700;
  font-size: 1.7em;
  outline: 3px solid var(--paper);
  transform: scale(1.34);
}
@media (prefers-reduced-motion: no-preference) {
  .crop.is-landing .crop-cell:not(.is-hit), .crop.is-landing .crop-head, .crop.is-landing .crop-axis {
    animation: crop-settle 700ms var(--ease) both;
    animation-delay: calc(var(--d, 0) * 18ms);
  }
  .crop.is-landing .crop-cell.is-hit { animation: crop-land 900ms var(--ease) 520ms both; }
}
@keyframes crop-settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes crop-land {
  from { opacity: 0; transform: scale(2.6); }
  to { opacity: 1; transform: scale(1.34); }
}

/* ---------- the embed ---------- */

html.kit-embed, .kit-embed body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
.kit-embed body { font-family: var(--sans); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
.event {
  box-sizing: border-box;
  min-height: 100%;
  padding: clamp(14px, 3.4vw, 28px) clamp(16px, 4vw, 36px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(8px, 2vh, 16px);
}
.event-status {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.event-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.event-body:empty { display: none; }
.event-kicker {
  margin: 0 0 0.5em;
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.event-coord { margin: 0; font-family: var(--slab); font-weight: 700; line-height: 0.92; letter-spacing: -0.01em; }
.event-pos { display: block; font-size: clamp(22px, 3.6vw, 40px); line-height: 1.1; }
.event-pick { display: block; font-size: clamp(52px, 9vw, 92px); margin-left: -0.04em; }
.event-player {
  margin: 0.55em 0 0;
  padding-top: 0.5em;
  border-top: 1px solid var(--rule);
  font-family: var(--slab);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.05;
}
.event-detail { margin: 0.3em 0 0; font-weight: 600; color: var(--ink-mid); font-size: clamp(12px, 1.5vw, 15px); }
.event-team.is-mark {
  display: inline-block;
  width: var(--mark-w);
  height: var(--mark-h);
  margin-right: 0.15em;
  vertical-align: middle;
  background: var(--ink);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.event-claim { margin: 0.9em 0 0; color: var(--ink-faint); font-size: 12px; max-width: 46ch; }
.event .crop { --cell-h: clamp(22px, 8.6vh, 40px); --crop-size: clamp(10px, 1.25vw, 13px); }
.event-credit { margin: 0; font-size: 12px; color: var(--ink-faint); }
.event-credit a { color: var(--ink); font-weight: 700; text-decoration: none; }
.event-credit a:hover { text-decoration: underline; text-underline-offset: 3px; }
.event-credit .glyph { color: var(--accent); margin-right: 0.3em; }
@media (prefers-reduced-motion: no-preference) {
  .event-text.is-landing > * { animation: text-rise 700ms var(--ease) both; }
  .event-text.is-landing > :nth-child(2) { animation-delay: 60ms; }
  .event-text.is-landing > :nth-child(3) { animation-delay: 120ms; }
  .event-text.is-landing > :nth-child(n+4) { animation-delay: 180ms; }
}
@keyframes text-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .event-body { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .event-pos { display: inline; font-size: 24px; }
  .event-pick { display: inline; font-size: 44px; margin-left: 0.12em; }
  .event-player { margin-top: 0.3em; padding-top: 0.3em; font-size: 28px; }
  .event .crop { --cell-h: 22px; --crop-size: 10px; --axis: 2.4em; }
  .event .crop .is-far { display: none; }
}

/* ---------- the media kit page ---------- */

body.kit { background: var(--paper); color: var(--ink); }
.kit footer a { color: var(--ink-mid); }
.kit-main { max-width: 1080px; margin: 0 auto; padding: 24px 24px 56px; }
.kit-main a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.kit-main a:hover { text-decoration-thickness: 2px; }
.kit-main a:focus-visible, .kit-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-intro { max-width: 40rem; margin: 16px 0 0; }
.kit-intro h2 { font-family: var(--slab); font-size: clamp(34px, 6vw, 56px); line-height: 1; margin: 0 0 20px; }
.kit-lede { font-family: var(--serif); font-size: 21px; line-height: 1.5; margin: 0 0 14px; }
.kit-terms { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-mid); margin: 0 0 14px; }
.kit-jump { font-size: 14px; margin: 0; }

.media-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px 48px;
  align-items: start;
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.story-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.media-story h3 { font-family: var(--slab); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.08; margin: 0 0 6px; }
.story-who { margin: 0 0 16px; font-weight: 600; color: var(--ink-mid); }
.story-body { font-family: var(--serif); font-size: 18px; line-height: 1.6; margin: 0 0 22px; max-width: 34rem; }
.story-links { margin: 22px 0 0; font-size: 14px; line-height: 1.9; }
.story-links a { margin-right: 14px; white-space: nowrap; }
.story-card { margin: 0; }
.story-card img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }

/* The pick's ledger: one cell per draft, a row per decade. */
.ledger { margin: 0; }
.ledger figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.ledger-rows { display: grid; grid-template-columns: 3.4em repeat(10, 30px); gap: 2px; font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ledger-rows > * { box-sizing: border-box; display: grid; place-items: center; height: 22px; }
.ledger-decade { justify-content: start; font-weight: 600; font-size: 11px; color: var(--ink-faint); }
.ledger-cell { color: var(--ink-mid); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ledger-cell.is-none { background: none; border: 1px solid var(--rule); }
.ledger-cell.is-hit { background: var(--accent); color: var(--on-accent); }
.ledger-cell.is-blank { background: none; }

.kit-embed-section { margin: 72px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); }
.kit-embed-section h2 { font-family: var(--slab); font-size: 28px; margin: 0 0 8px; }
.kit-embed-section p { font-family: var(--serif); font-size: 17px; line-height: 1.6; max-width: 40rem; margin: 0 0 18px; }
.kit-embed-section iframe { display: block; width: 100%; height: 420px; border: 1px solid var(--rule); }
.kit-embed-section .kit-marks { margin: 40px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
.kit-code { position: relative; margin: 18px 0 0; }
.kit-code pre { margin: 0; padding: 16px; padding-right: 84px; background: var(--rule); border-radius: 4px; font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-copy { position: absolute; top: 10px; right: 10px; font: 600 12px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--ink-faint); border-radius: 4px; padding: 6px 10px; cursor: pointer; }
.kit-copy:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 820px) {
  .media-story { grid-template-columns: 1fr; margin-top: 40px; }
  .story-card { order: -1; }
  .kit-main { padding: 16px 16px 40px; }
}
@media (max-width: 420px) {
  .ledger-rows { grid-template-columns: 3.2em repeat(10, minmax(0, 1fr)); }
}