/* Hallmark · shape: Marquee Hero · genre: editorial · theme: Sport (deal 3/3, seed public-solstice-modern-sport-f222·dbaeca8d·2026-10-23·r0) · job: try · draw: 004a89 · round 4 build-out
 * hero: Stage, reversed for a poster head · nav: masthead, tucks and carries the sandbox button once the page moves · footer: index columns · imagery: the product, 12 sandbox scenes built and captured, 11 on the page; photographs, generated 1, duotone · signature: every screen is a door into the sandbox, its volt plate naming what you get to do there, gathered in the league sheet
 * axes: light/display-condensed/chromatic-volt · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · critique: P4 H5 E4 S5 R4 V4 · weakest: E, eleven screens and a photograph ask a lot of a phone; everything below the hero loads lazily and the sheet becomes two swipeable rails */
/* Hallmark · waive 84 · the sandbox the plates open is not seeded yet, so there is no running product to capture · the scenes are stand-ins built in the app's own style and captured by capture.mjs, at the names the real captures will replace */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 80px;
  --mast-tuck: 16px;
  --mast-logo: 76px;
  --plate-drop: 3.5rem;
  /* the group label above each list, so the pinned screen lines up with the first list's bar rule */
  --jobs-label-h: calc(var(--text-xl) + var(--space-sm));
  --head-poster: clamp(3.25rem, 8.33vw, 7.5rem);
  --hero-gap: var(--space-2xl);
  --color-accent-press: color-mix(in oklab, var(--color-accent) 82%, var(--color-ink));
  --color-hair-ink: color-mix(in oklab, var(--color-ink) 16%, transparent);
  --color-on-ink: var(--color-paper);
  --color-on-ink-2: color-mix(in oklab, var(--color-paper) 74%, var(--color-ink));
  --color-rule-on-ink: color-mix(in oklab, var(--color-paper) 26%, var(--color-ink));
  /* the "go in" mark: a door with an arrow entering it, used as a mask so it takes the plate's ink */
  --icon-enter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) - var(--mast-tuck));
}

@scope (body) to (.scene) {
  h1,
  h2,
  h3 {
    text-transform: none;
    line-height: 1.02;
  }
  main:focus {
    outline: none;
  }
}

/* Product screens are captures of the sandbox: never duotoned, framed by the sheet's rules */

@scope (body) to (.scene) {
  [data-kind="product"] > img {
    filter: none;
    mix-blend-mode: normal;
    object-fit: cover;
    object-position: top left;
  }
  [data-kind="product"]:has(> img)::before {
    content: none;
  }
  [data-kind="product"],
  [data-kind="product"]:has(> img) {
    background: var(--color-paper-2);
    border-radius: var(--radius-card);
    outline: none;
  }
  [data-kind="product"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: var(--rule-hair) solid var(--color-hair-ink);
    border-top: var(--rule-bar) solid var(--color-rule-2);
    border-radius: var(--radius-card);
    transition: border-color var(--dur-short) var(--ease-out);
  }
  .shot--phone {
    display: none;
  }
}

/* Skip link: out of sight until the keyboard reaches it */

@scope (body) to (.scene) {
  .skip {
    position: fixed;
    left: var(--space-md);
    top: var(--space-sm);
    z-index: var(--z-toast);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-card);
    background: var(--color-ink);
    color: var(--color-paper);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-lg)));
  }
  .skip:focus,
  .skip:focus-visible {
    transform: none;
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
}

/* Controls: the volt block beside the ink-bordered one */

@scope (body) to (.scene) {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--space-lg);
    border: var(--rule-bar) solid var(--color-ink);
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--color-ink);
    font: var(--display-weight) var(--text-lg)/1 var(--font-display);
    text-transform: none;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--dur-short) var(--ease-out),
      border-color var(--dur-short) var(--ease-out),
      color var(--dur-short) var(--ease-out),
      transform var(--dur-micro) var(--ease-out);
  }
  .btn:active {
    transform: translateY(1px);
  }
  .btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    transition: none;
  }
  .btn--primary {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #ffffff;
  }
  .btn--sm {
    min-height: 44px;
    padding: 0 var(--space-md);
    font-size: var(--text-md);
  }
  .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .tlink {
    color: var(--color-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-rule);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--dur-short) var(--ease-out);
  }
  .tlink:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 2px;
    transition: none;
  }
}

/* Masthead: the lockup centred over the bar rule. Once the page moves it tucks up by --mast-tuck
   (sticky at a negative top, so nothing animates height) and the sandbox button joins it. */

@scope (body) to (.scene) {
  .mast {
    position: sticky;
    top: calc(-1 * var(--mast-tuck));
    z-index: var(--z-sticky-nav);
    border-bottom: var(--rule-bar) solid var(--color-rule-2);
    background: var(--color-paper);
  }
  .mast .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: var(--nav-h);
    column-gap: var(--space-lg);
    transition: transform var(--dur-long) var(--ease-out);
  }
  .mast.is-stuck .container {
    transform: translateY(calc(var(--mast-tuck) / 2));
  }
  .mast__links {
    display: flex;
    gap: var(--space-lg);
  }
  .mast__links a,
  .mast__mail {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-ink-2);
    text-decoration: none;
    white-space: nowrap;
    padding-block: var(--space-xs);
    border-bottom: var(--rule-bar) solid transparent;
    transition:
      border-color var(--dur-short) var(--ease-out),
      color var(--dur-short) var(--ease-out);
  }
  .mast__links a:focus-visible,
  .mast__mail:focus-visible,
  .mast__home:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    transition: none;
  }
  .mast__home {
    display: block;
    line-height: 0;
    border-radius: var(--radius-card);
  }
  .mast__home img {
    height: var(--mast-logo);
    width: auto;
    transition: transform var(--dur-long) var(--ease-out);
  }
  .mast.is-stuck .mast__home img {
    transform: scale(0.78);
  }
  .mast__end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-lg);
  }
  .mast__try {
    display: none;
  }
  .mast.is-stuck .mast__try {
    display: inline-flex;
    animation: mast-try-in var(--dur-short) var(--ease-out) both;
  }
  .mast.is-stuck .mast__end {
    gap: var(--space-md);
  }
}
@keyframes mast-try-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* Hero: the poster head and its sentence beside the first door */

@scope (body) to (.scene) {
  .hero {
    padding-block: var(--space-lg) var(--space-xl);
    border-bottom: var(--rule-bar) solid var(--color-rule-2);
  }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--hero-gap);
    align-items: center;
  }
  .hero__copy {
    display: grid;
    gap: var(--space-lg);
  }
  .hero h1 {
    max-width: none;
    font-size: var(--head-poster);
  }
  .hero h1 span {
    display: block;
  }
  .hero__copy .lead {
    max-width: 30ch;
    color: var(--color-ink-2);
  }
  .hero__copy .actions {
    margin-top: var(--space-xs);
  }
  .door.hero__door .screen {
    aspect-ratio: 1040 / 800;
  }
}

/* A door: a sandbox screen that opens itself. Its plate says what you get to do there, and the
   enter mark at its end says the click goes in. */

@scope (body) to (.scene) {
  .door {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-card);
  }
  .door .screen {
    display: block;
    width: 100%;
    aspect-ratio: 1040 / 650;
  }
  .door:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
  }
  .plate {
    position: absolute;
    z-index: 3;
    left: calc(-1 * var(--space-md));
    bottom: calc(-1 * var(--space-md));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-lg);
    row-gap: var(--space-2xs);
    max-width: min(calc(100% + var(--space-md)), 28rem);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    border-radius: var(--radius-card);
    transition:
      background-color var(--dur-short) var(--ease-out),
      color var(--dur-short) var(--ease-out);
  }
  .plate > b,
  .plate > span {
    grid-column: 1;
  }
  .plate b {
    font: var(--display-weight) var(--text-xl)/1 var(--font-display);
    text-transform: none;
  }
  .plate span {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.35;
    text-wrap: pretty;
  }
  .plate::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 26px;
    height: 26px;
    background: currentColor;
    mask: var(--icon-enter) center / contain no-repeat;
    -webkit-mask: var(--icon-enter) center / contain no-repeat;
    transition: transform var(--dur-short) var(--ease-out);
  }
  .stage__door .plate,
  .close__door .plate {
    bottom: auto;
    top: calc(100% - var(--space-md));
  }
  .close__door {
    margin-bottom: var(--plate-drop);
  }
  .door:focus-visible .plate,
  .job__link:focus-visible .plate {
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .door:focus-visible .screen::after,
  .job__link:focus-visible .screen::after {
    border-color: var(--color-ink);
  }
}

/* The league sheet: two groups of jobs, one pinned screen */
/* the section's bottom space sits inside the list column, so the stage has room to ride down beside it */
@scope (body) to (.scene) {
  .sheet {
    padding-block: var(--section-gap-s) 0;
  }
  .sheet__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--hero-gap);
    align-items: end;
    margin-bottom: var(--space-2xl);
  }
  .sheet__head h2 {
    font-size: var(--text-section);
    max-width: 16ch;
  }
  .sheet__head .lead {
    color: var(--color-ink-2);
    max-width: 40ch;
  }
  .sheet__body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--hero-gap);
    align-items: start;
  }
  .jobs {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-bottom: var(--section-gap);
    container: jobs / inline-size;
  }
  .jobs__group {
    min-width: 0;
  }
  .jobs__label {
    max-width: none;
    font-size: var(--text-xl);
    line-height: 1;
    padding-bottom: var(--space-sm);
  }
  .jobs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block: var(--rule-bar) solid var(--color-rule-2);
  }
  .job + .job {
    border-top: var(--rule-hair) solid var(--color-rule);
  }
  .job__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-md);
    row-gap: var(--space-3xs);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color var(--dur-short) var(--ease-out);
  }
  .job__what {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.3;
  }
  .job__who {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.4;
  }
  .job.is-on > .job__link {
    background: var(--color-accent);
  }
  .job.is-on .job__who {
    color: var(--color-accent-ink);
  }
  .job__link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    transition: none;
  }
}
/* where the longest job and its role cannot share a line, every row stacks, so the sheet keeps one rhythm */
@scope (body) to (.scene) {
  @container jobs (max-width: 27.5rem) {
    .job__link {
      flex-direction: column;
    }
  }
  .job__door {
    display: none;
  }
}
/* The stage rides beside the list, so the pinned screen stays in view whichever row the pointer is on */
@scope (body) to (.scene) {
  .sheet__stage {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--nav-h) - var(--mast-tuck) + var(--space-lg));
    display: grid;
    margin-top: var(--jobs-label-h);
    padding-bottom: var(--plate-drop);
  }
}
/* The pinned screen: the incoming one fades in over the outgoing one, which leaves once it is covered */
@scope (body) to (.scene) {
  .stage__door {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0s linear var(--dur-short),
      visibility 0s linear var(--dur-short);
  }
  .stage__door.is-on {
    z-index: 2;
    visibility: visible;
    opacity: 1;
    transition:
      opacity var(--dur-short) var(--ease-out),
      visibility 0s;
  }
  .sheet__body:has(.job__link:focus-visible) .stage__door.is-on .plate {
    background: var(--color-ink);
    color: var(--color-paper);
  }
}

/* Bring your own sport: the one photograph, then Northfield's setup */

@scope (body) to (.scene) {
  .fit {
    padding-block: var(--section-gap-s);
    border-top: var(--rule-bar) solid var(--color-rule-2);
  }
  .fit__photo {
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-card);
  }
  .fit__photo > img {
    object-position: 50% 42%;
  }
  .fit__spec {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--hero-gap);
    margin-top: var(--space-xl);
    align-items: start;
  }
  .fit__copy h2 {
    font-size: var(--text-section);
    max-width: 12ch;
  }
  .fit__lede {
    margin-top: var(--space-md);
    font-size: var(--text-lead);
    line-height: 1.45;
    color: var(--color-ink-2);
    max-width: 30ch;
  }
  .fit__figs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: var(--rule-bar) solid var(--color-rule-2);
  }
  .fit__figs li {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-md) 0;
    border-left: var(--rule-hair) solid var(--color-rule);
  }
  .fit__figs li:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .fit__figs b {
    font: var(--display-weight) var(--text-display-s)/1 var(--font-display);
    font-variant-numeric: tabular-nums;
  }
  .fit__figs span {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-muted);
    text-wrap: balance;
  }
}

/* What it runs: a well, the jobs set as a team sheet in four columns */

@scope (body) to (.scene) {
  .runs {
    padding-block: var(--section-gap);
    background: var(--color-paper-2);
    border-top: var(--rule-bar) solid var(--color-rule-2);
  }
  .runs__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--hero-gap);
    align-items: end;
    margin-bottom: var(--space-2xl);
  }
  .runs__head h2 {
    font-size: var(--text-section);
    max-width: 22ch;
  }
  .runs__head .lead {
    color: var(--color-ink-2);
    max-width: 40ch;
  }
  .runs__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gap-columns);
  }
}
/* the columns share their row lines, so a job that takes two lines opens the same space across the sheet */
@scope (body) to (.scene) {
  .runs__cols > div {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
  .runs__cols ul {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
  .runs__cols h3 {
    max-width: none;
    font: 500 var(--text-md)/1.3 var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-muted);
    padding-bottom: var(--space-sm);
    border-bottom: var(--rule-bar) solid var(--color-rule-2);
  }
  .runs__cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .runs__cols li {
    padding-block: var(--space-md);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    font: var(--display-weight) var(--text-xl)/1.05 var(--font-display);
    text-transform: none;
    text-wrap: balance;
  }
}

/* The story: the one ink band */

@scope (body) to (.scene) {
  .story {
    padding-block: var(--section-gap);
    background: var(--color-ink);
    color: var(--color-on-ink);
  }
  .story__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--hero-gap);
    align-items: start;
  }
  .story h2 {
    font-size: var(--text-display);
    max-width: 16ch;
  }
  .story__note p:not([class]) {
    margin-top: var(--space-lg);
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--color-on-ink-2);
    max-width: 52ch;
  }
  .story__sign {
    margin-top: var(--space-lg);
    font-weight: 500;
  }
  .story__record {
    align-self: end;
    margin: var(--space-3xl) 0 0;
    border-top: var(--rule-bar) solid var(--color-on-ink);
    border-bottom: var(--rule-bar) solid var(--color-on-ink);
  }
  .story__record > div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--space-lg);
    padding-block: var(--space-md);
  }
  .story__record > div + div {
    border-top: var(--rule-hair) solid var(--color-rule-on-ink);
  }
  .story__record dt {
    font: var(--display-weight) var(--text-2xl)/1 var(--font-display);
    text-transform: none;
    font-variant-numeric: tabular-nums;
  }
  .story__record dd {
    margin: 0;
    color: var(--color-on-ink-2);
  }
}

/* The close: the sandbox, open */

@scope (body) to (.scene) {
  .close {
    padding-block: var(--section-gap-s);
  }
  .close__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--hero-gap);
    align-items: center;
  }
  .close__copy {
    display: grid;
    gap: var(--space-lg);
  }
  .close h2 {
    font-size: var(--text-display);
    max-width: 12ch;
  }
  .close__copy .lead {
    color: var(--color-ink-2);
    max-width: 30ch;
  }
  .close__member {
    color: var(--color-ink-2);
  }
}

/* Footer: index columns */

@scope (body) to (.scene) {
  .foot {
    border-top: var(--rule-bar) solid var(--color-rule-2);
    padding-block: var(--space-2xl) var(--space-xl);
  }
  .foot__cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    column-gap: var(--gap-columns);
  }
  .foot__brand img {
    height: 72px;
    width: auto;
    margin-left: calc(-1 * var(--space-2xs));
  }
  .foot__brand p {
    margin-top: var(--space-xs);
    color: var(--color-ink-2);
  }
  .foot__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
  }
  .foot__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-xs);
  }
  .foot__nav--cast ul {
    display: block;
    columns: 2;
    column-gap: var(--gap-columns);
  }
  .foot__nav--cast li {
    break-inside: avoid;
    padding-bottom: var(--space-xs);
  }
}
/* a 27px hit area on a 19px line; the negative margin keeps the list's rhythm */
@scope (body) to (.scene) {
  .foot__nav a {
    display: inline-block;
    padding-block: var(--space-2xs);
    margin-block: calc(-1 * var(--space-2xs));
    color: var(--color-ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--dur-short) var(--ease-out);
  }
  .foot__nav a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 2px;
    transition: none;
  }
  .foot__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-lg);
    margin-top: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: var(--rule-hair) solid var(--color-rule);
    font-size: var(--text-sm);
    color: var(--color-muted);
  }
}

/* Hover only where there is a pointer that hovers, so a tap never leaves a state stuck on */
@media (hover: hover) {
  @scope (body) to (.scene) {
    .btn:hover {
      background: var(--color-ink);
      color: var(--color-paper);
    }
    .btn--primary:hover {
      background: #244355;
      border-color: #244355;
      color: #ffffff;
    }
    .tlink:hover {
      text-decoration-color: var(--color-accent-deep);
    }
    .mast__links a:hover,
    .mast__mail:hover {
      color: var(--color-ink);
      border-bottom-color: var(--color-accent-deep);
    }
    .door:hover .screen::after,
    .job__link:hover .screen::after {
      border-color: var(--color-ink);
    }
    .door:hover .plate::after,
    .job__link:hover .plate::after {
      transform: translateX(3px);
    }
    .job__link:hover {
      background: var(--color-paper-2);
    }
    .sheet.is-js .job:not(.is-on) > .job__link:hover {
      background: none;
    }
    .sheet__body:has(.job__link:hover) .stage__door.is-on .plate::after {
      transform: translateX(3px);
    }
    .sheet__body:has(.job__link:hover) .stage__door.is-on .screen::after {
      border-color: var(--color-ink);
    }
    .foot__nav a:hover {
      text-decoration-color: var(--color-accent-deep);
    }
  }
}

@media (min-width: 60.0625rem) {
  @scope (body) to (.scene) {
    .hero {
      min-height: calc(100svh - var(--nav-h));
      display: grid;
      align-content: center;
    }
  }
}

/* below this the team sheet's longest jobs would break inside four columns: two columns of two groups */
@media (max-width: 86.5rem) {
  @scope (body) to (.scene) {
    .runs__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .runs__cols > :nth-child(n + 3) {
      margin-top: var(--space-xl);
    }
  }
}
@media (max-width: 47.9375rem) {
  @scope (body) to (.scene) {
    .runs__cols {
      grid-template-columns: minmax(0, 1fr);
    }
    .runs__cols > :nth-child(n + 2) {
      margin-top: var(--space-xl);
    }
  }
}

/* Tablet */
@media (max-width: 75rem) {
  :root {
    --hero-gap: var(--space-xl);
  }
  /* the close copy keeps both buttons on one line; the roles keep "The league director" on one */
  @scope (body) to (.scene) {
    .close__grid {
      grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    }
    .foot__cols {
      grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    }
  }
}
/* where the tucked masthead cannot hold the mail link beside both buttons, the sandbox button takes its place */
@media (max-width: 70rem) {
  @scope (body) to (.scene) {
    .mast.is-stuck .mast__mail {
      display: none;
    }
  }
}
/* just above the stacked layout the hero copy column is narrowest: slimmer buttons keep them side by side */
@media (min-width: 60.0625rem) and (max-width: 64rem) {
  @scope (body) to (.scene) {
    .hero .actions .btn {
      padding-inline: var(--space-md);
    }
  }
}
@media not all and (min-width: 960px) {
  :root {
    --nav-h: 72px;
    --mast-tuck: 8px;
    --mast-logo: 60px;
  }
  @scope (body) to (.scene) {
    .mast .container {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .mast__links,
    .mast__mail {
      display: none;
    }
    .mast__home {
      order: -1;
    }
    .mast__home img {
      margin-left: calc(-1 * var(--space-xs));
      transform-origin: left center;
    }
    .mast__end {
      gap: var(--space-sm);
    }
    .hero__grid,
    .sheet__head,
    .runs__head,
    .story__grid,
    .close__grid,
    .fit__spec {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-xl);
    }
    .hero__copy .lead {
      max-width: 34ch;
    }
    .door {
      display: flex;
      flex-direction: column;
    }
    .close__door {
      margin-bottom: 0;
    }
    .plate,
    .job__door .plate,
    .close__door .plate {
      position: static;
      order: -1;
      max-width: none;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
    }
    .door .screen,
    .door .screen::after {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .sheet__head,
    .runs__head {
      row-gap: var(--space-md);
      margin-bottom: var(--space-xl);
    }
    .sheet__body {
      display: block;
    }
    .sheet__stage {
      display: none;
    }
  }
  /* each group becomes a swipeable rail of phone screens, the next one cut by the edge */
  @scope (body) to (.scene) {
    .jobs__list {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: min(80%, 340px);
      column-gap: var(--space-md);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      margin-inline: calc(-1 * var(--gutter));
      padding: 0 var(--gutter) var(--space-md);
      scroll-padding-inline: var(--gutter);
      border: 0;
    }
    .job + .job {
      border-top: 0;
    }
  }
  /* positioned, so the visually hidden label stays inside its rail instead of widening the page */
  @scope (body) to (.scene) {
    .job {
      position: relative;
      scroll-snap-align: start;
    }
    .job__link {
      display: grid;
      padding: 0;
      gap: var(--space-xs);
      align-content: start;
    }
    .job__what {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .job.is-on > .job__link {
      background: none;
    }
    .job.is-on .job__who {
      color: var(--color-muted);
    }
    .job__door .screen {
      aspect-ratio: 390 / 560;
    }
  }
  /* plates in a rail grow to the tallest one, so every screen in the row starts on the same line */
  @scope (body) to (.scene) {
    .job {
      display: grid;
    }
    .job__link {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      justify-content: stretch;
      align-items: stretch;
    }
    .job__door {
      display: flex;
      flex-direction: column;
    }
    .job__door .plate {
      flex: 1 0 auto;
      align-content: center;
    }
    .job__door .screen {
      flex: none;
    }
    .fit__figs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .fit__figs li {
      padding-bottom: var(--space-md);
      border-bottom: var(--rule-hair) solid var(--color-rule);
    }
    .fit__figs li:nth-child(odd) {
      border-left: 0;
      padding-left: 0;
    }
    .story__record {
      margin-top: var(--space-xl);
    }
    .foot__cols {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      row-gap: var(--space-xl);
    }
    .foot__brand {
      grid-column: 1 / -1;
    }
  }
}
@media not all and (min-width: 960px) {
  @media (hover: hover) {
    @scope (body) to (.scene) {
      .job__link:hover {
        background: none;
      }
    }
  }
}
@media (max-width: 40rem) {
  :root {
    --nav-h: 64px;
  }
  @scope (body) to (.scene) {
    .mast.is-stuck .mast__signin {
      display: none;
    }
    .mast.is-stuck .mast__home img {
      transform: scale(0.8);
    }
    .hero {
      padding-block: var(--space-md) var(--space-xl);
    }
    .hero__grid {
      row-gap: var(--space-lg);
    }
    .hero__copy {
      gap: var(--space-md);
    }
    .actions .btn {
      flex: 1 1 auto;
      padding-inline: var(--space-md);
    }
    .door.hero__door .screen {
      aspect-ratio: 390 / 560;
    }
    .hero__door .shot--desk,
    .close__door .shot--desk {
      display: none;
    }
    .hero__door .shot--phone,
    .close__door .shot--phone {
      display: block;
    }
    .close__door .screen {
      aspect-ratio: 390 / 560;
    }
    .plate b {
      font-size: var(--text-lg);
    }
    .fit__photo {
      aspect-ratio: 4 / 5;
    }
    .foot__cols {
      grid-template-columns: minmax(0, 1fr);
    }
    .foot__legal {
      flex-direction: column;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  @scope (body) to (.scene) {
    .btn,
    .plate,
    .plate::after,
    .tlink,
    .job__link,
    .stage__door,
    .stage__door.is-on,
    .mast .container,
    .mast__home img,
    .mast__links a,
    .mast__mail,
    .foot__nav a,
    [data-kind="product"]::after {
      transition: none;
    }
    .mast.is-stuck .mast__try {
      animation: none;
    }
  }
}
@scope (body) to (.scene) {
  .plate span,
  .job__what,
  .job__who,
  .foot__legal span {
    text-wrap: pretty;
  }
  .nobr {
    white-space: nowrap;
  }
}