/* Hallmark · shape: Ledger of decks (C2): a split hero, the words left and a finished event's top cut on the one accent panel right, a decklist's way as a scroll run of four 4:3 captures (submit, deadline, archetypes, the live metagame), the format metagame page wide on a band fading into the page, ruled rows for what players share, the close as a statement · genre: modern-minimal · theme: brand · paper: oklch(17.6% 0.014 258) · accent: oklch(71.3% 0.117 253) · display: Inter 700 (the /subscribe heads) · body: Inter · job: try · hero: Split (owner decision 18), the head, line and action on six columns, the cEDH Open's top cut on the other six · nav: kept, navbar-solid (sticky bar: mark left, sentence-case links, Sign in and Sign up right) · footer: kept, footer-simple (wordmark, one line, Discord and YouTube marks; Company and Support columns; app-store buttons) · imagery: product photography on the isolated stack (plans/055-marketing-pages/photo-programs-decks/RECIPE.md): real decklists in the promo cast's names played through the real engine, the metagame pages from the real rollup, flat 3x captures, phone crops of each view's own narrow layout · signature: a winner and their deck, the first thing a finished event shows
 * axes: dark/grotesk-sans/cool · posture: restrained (flat panels; the accent on the hero panel's edge, links and focus; the tags' colours are the product's own states) · v1.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, a decklist page could be any form tool; the head promises the payoff (the metagame), the first picture is a real top cut with its commanders, and the run follows one list from submit to the metagame */
/* Hallmark · waive 1 · Inter display with JetBrains Mono declared as --font-outlier · Inter 700 is the owner's choice, the /subscribe heads and the face of the shared TopDeck navbar and footer */
/* Hallmark · waive 29 · the zero-offset accent glow on the td-btn-primary hover only · the glow-lift button is the TopDeck signature the owner kept; panels, fields and washes carry no glow */
/* Hallmark · waive 39b · td-btn-primary and td-btn-secondary stand 56px · the shared TopDeck button recipe from enhancements.css keeps one height in the hero, the navbar and every page */
/* Hallmark · waive 30b · around-icons only in the navbar sign-in link and the back-to-top button · the TopDeck page body uses Font Awesome alone; the navbar and footer partials are shared chrome */
/* Hallmark · answered F4 · the navbar Sign up is the chrome's .btn-primary; the TopDeck page body uses td-btn-primary only */
/* Hallmark · answered F16 · the accent scrollbar comes from enhancements.css and head.pug; DESIGN.md Wiring step 2 took scrollbar-color out of base.css so the site's own stays */
/* Hallmark · answered F19 · the 500 weight is the shared navbar's link weight (theme.min.css nav-link); the TopDeck page body sets only 400, 600 and 700 */
@import url("./tokens.css");
@import url("./base.css?v3");

/* ---------- Page grid: twelve columns inside Bootstrap's container ---------- */

.td-mk .dk-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

.td-mk .dk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.td-mk .dk-cta {
  white-space: nowrap;
}

.td-mk .dk-link {
  color: var(--td-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .dk-link:hover {
  color: var(--td-text-primary);
}

.td-mk .dk-link:active {
  color: var(--td-text-secondary);
}

/* ---------- Panels: flat, a 1px border, no shadow of their own ---------- */

.td-mk .dk-panel {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--td-border-default);
  border-radius: var(--td-radius-lg);
  background: var(--td-card-bg);
}

/* The page's one accent edge: the hero panel, the top cut edge to edge */
.td-mk .dk-panel--hero {
  border: 2px solid var(--td-accent);
}

.td-mk .dk-panel picture,
.td-mk .dk-panel img {
  display: block;
  width: 100%;
  height: auto;
}

/* A step: a 4:3 capture, edge to edge; the panel's foot is where the
   screen was cut. On a phone, the view's own phone layout, whole. */
.td-mk .dk-panel--step {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 56.25rem;
}

.td-mk .dk-panel--step picture,
.td-mk .dk-panel--step img {
  height: 100%;
}

.td-mk .dk-panel--step img {
  object-fit: cover;
  object-position: left top;
}

/* ---------- Hero (Split): the words left, the top cut right ---------- */

.td-mk .dk-hero {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--dk-nav-h, 76px));
  padding-block: var(--space-xl);
}

.td-mk .dk-hero > .container {
  width: 100%;
}

.td-mk .dk-hero__grid {
  align-items: center;
  row-gap: var(--space-2xl);
}

.td-mk .dk-hero__text {
  grid-column: 1 / span 6;
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.td-mk .dk-hero h1 {
  max-width: none;
  line-height: 1.05;
}

/* Beside the panel, each line of the head stays on one line down to 60rem */
@media (min-width: 60.01rem) {
  .td-mk .dk-hero h1 {
    font-size: min(var(--text-display), 4.6vw);
  }
}

.td-mk .dk-line {
  display: block;
}

.td-mk .dk-hero .lead {
  max-width: 30ch;
}

.td-mk .dk-hero .dk-actions {
  margin-top: var(--space-xs);
}

.td-mk .dk-panel--hero {
  grid-column: 7 / span 6;
}

/* ---------- A list's way: the scroll run beside one 4:3 capture ---------- */

.td-mk .dk-run {
  padding-block: var(--section-gap) calc(var(--section-gap) + var(--space-2xl));
}

.td-mk .dk-run__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

.td-mk .dk-run__head {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-md);
}

.td-mk .dk-run__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

/* A step's name and line, one unit, the icon in its own column */
.td-mk .dk-step__row {
  display: grid;
  grid-template-columns: var(--space-lg) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
}

/* The steps are things, not states: their icons stay neutral. */
.td-mk .dk-step__icon {
  grid-row: 1;
  font-size: var(--text-md);
  text-align: center;
  color: var(--td-text-secondary);
}

.td-mk .dk-step h3 {
  grid-column: 2;
  max-width: none;
  font-size: var(--text-lg);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.td-mk .dk-step__row p {
  grid-column: 2;
  color: var(--td-text-secondary);
}

.td-mk .dk-step,
.td-mk .dk-step__show {
  min-width: 0;
}

.td-mk .dk-step__show {
  margin-top: var(--space-lg);
}

.td-mk .dk-step__more {
  grid-column: 2;
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  margin-top: var(--space-sm);
  color: var(--td-text-secondary);
  line-height: 1.6;
}

.td-mk .dk-step__more p {
  max-width: 60ch;
  text-wrap: pretty;
}

/* The run spans the grid under the head (partials/marketing-pin). Its
   stage takes seven columns, so each step reads at its capture's size. */
.td-mk .dk-run__pin {
  grid-column: 1 / -1;
}

.td-mk .dk-run__pin.is-pinned {
  margin-top: var(--space-2xl);
}

.td-mk .dk-run__pin.is-pinned > .dk-run__steps {
  grid-column: 1 / span 4;
}

.td-mk .dk-run__pin.is-pinned > .td-pin__stage {
  grid-column: 6 / -1;
}

.td-mk .td-pin__stage > .dk-step__show {
  max-width: none;
  margin: 0;
}

/* In the run the line under the name steps up, so the note stays a step below it */
.td-mk .is-pinned .dk-step__more p {
  font-size: var(--text-md);
}

/* ---------- Every format: a seam, the head beside its links, the page wide ---------- */

.td-mk .dk-format {
  padding-block: var(--section-gap-s) 0;
  border-top: 1px solid var(--td-border-default);
}

.td-mk .dk-format__head {
  align-items: end;
  row-gap: var(--space-lg);
}

.td-mk .dk-format__text {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-md);
}

.td-mk .dk-format__links {
  grid-column: 9 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs) var(--space-xl);
  margin: 0;
  white-space: nowrap;
}

/* The format page as a reader opens it, about 1.15x its CSS size, on the
   canvas it was shot on, fading into the page where it was cut */
.td-mk .dk-slice {
  width: min(100%, 73.125rem);
  margin: var(--space-2xl) auto 0;
  overflow: hidden;
  aspect-ratio: 3168 / 1740;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-paper) 55%, transparent);
  mask-image: linear-gradient(to bottom, var(--color-paper) 55%, transparent);
}

.td-mk .dk-slice img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- What players share: ruled rows ---------- */

.td-mk .dk-more {
  padding-block: var(--section-gap);
}

.td-mk .dk-rows {
  margin: var(--space-2xl) 0 0;
  border-bottom: 1px solid var(--td-border-default);
}

.td-mk .dk-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  row-gap: var(--space-2xs);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .dk-row dt {
  grid-column: 1 / span 4;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.3;
  color: var(--td-text-primary);
}

/* The rows name things, not states: their icons stay neutral. */
.td-mk .dk-row dt .fa-solid {
  flex-shrink: 0;
  width: 1.25em;
  text-align: center;
  color: var(--td-text-secondary);
}

.td-mk .dk-row dd {
  grid-column: 5 / -1;
  margin: 0;
  font-size: var(--text-lead);
  color: var(--td-text-secondary);
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---------- Close: a statement at the hero's size, then the price and the trial ---------- */

.td-mk .dk-close {
  padding-block: var(--section-gap);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .dk-close__text {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
  max-width: 50rem;
}

.td-mk .dk-close h2 {
  max-width: 16ch;
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
}

.td-mk .dk-close .lead {
  text-wrap: balance;
}

.td-mk .dk-close__help {
  max-width: 48ch;
  margin-top: var(--space-sm);
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

/* ---------- Under 60rem: every split stacks in reading order ---------- */

@media (max-width: 60rem) {
  .td-mk .dk-hero__text,
  .td-mk .dk-panel--hero,
  .td-mk .dk-run__head,
  .td-mk .dk-format__text,
  .td-mk .dk-format__links {
    grid-column: 1 / -1;
  }

  .td-mk .dk-format__links {
    justify-content: flex-start;
  }

  .td-mk .dk-hero {
    min-height: 0;
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .td-mk .dk-panel--hero {
    width: 100%;
    max-width: 40rem;
  }

  .td-mk .dk-row dt,
  .td-mk .dk-row dd {
    grid-column: 1 / -1;
  }
}

/* ---------- Under 40rem: each capture shows its phone layout whole ---------- */

@media (max-width: 40rem) {
  .td-mk .dk-hero h1 {
    font-size: clamp(2rem, 10.4vw, 2.75rem);
  }

  .td-mk .dk-panel--hero,
  .td-mk .dk-panel--step {
    max-width: 26rem;
  }

  .td-mk .dk-panel--step {
    aspect-ratio: auto;
  }

  .td-mk .dk-panel--step picture,
  .td-mk .dk-panel--step img {
    height: auto;
  }

  .td-mk .dk-run__steps {
    gap: var(--space-2xl);
  }

  /* The format page's own phone layout, its top whole, fading at its foot */
  .td-mk .dk-slice {
    width: 100%;
    max-width: 26rem;
    margin-inline: 0;
    aspect-ratio: 1080 / 1500;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-mk .dk-link {
    transition: none;
  }
}