/* page-cover.css — the index of four covers, and the "what happens if" explorer. */

.opener .display { max-width: 12ch; }

/* index with preview: the frame on the right shows whichever row is pointed at */
.cover-open { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.cover-open__text { grid-column: 1 / span 7; }
.cover-open__frame { grid-column: 8 / span 5; margin: 0; position: sticky; top: calc(var(--head-h) + 1.5rem); aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.cover-open__frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity 240ms ease; }
.cover-open__frame img.is-swapping { opacity: 0; }
.index__list { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; }
.index__row { display: block; padding-block: 0.3em; font-family: var(--font-display); font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.03em; text-decoration: none; transition: opacity var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
.index__when { font-size: var(--step-lead); letter-spacing: -0.01em; opacity: 0.78; white-space: nowrap; }
.index__thumb { display: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 0.5rem; }
@media (hover: hover) and (pointer: fine) {
  .index__list:has(.index__row:hover, .index__row:focus-visible) .index__row:not(:hover, :focus-visible) { opacity: 0.4; }
  .index__row:hover, .index__row:focus-visible { transform: translateX(10px); }
}
@media (max-width: 60rem) {
  .cover-open__text { grid-column: 1 / -1; }
  .cover-open__frame { display: none; }
  .index__thumb { display: block; }
  .index__row { padding-block: 0.6em; }
}

/* the explorer */
.explorer { padding-block: clamp(4.5rem, 9vw, 8rem); }
.explorer__lead { margin-top: 1.25rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: clamp(2rem, 4vw, 3rem); }
.tabs__tab { min-height: 3rem; padding: 0 1.4rem; font-weight: 700; background: var(--paper-2); border-radius: 999px; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .tabs__tab:hover { background: var(--sage); } }
.tabs__tab[aria-selected="true"] { background: var(--evergreen); color: #fff; box-shadow: 0 10px 22px -14px var(--evergreen); }
.tabs__tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.explorer .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.explorer .wrap > * { grid-column: 1 / -1; }
.tabpanel, .stepper { grid-column: 1 / span 5 !important; }
.chart { grid-column: 7 / span 6 !important; grid-row: span 3; margin: 2.5rem 0 0; padding: 1.5rem; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); align-self: start; }
.tp__pic { grid-column: 1 / span 5 !important; margin: 1.5rem 0 0; aspect-ratio: 16 / 9; border-radius: var(--r-md); }
.tabpanel { padding-top: 2.5rem; }
.tabpanel:focus-visible { outline-offset: 8px; }
.tp__text p { margin-top: 0.9rem; max-width: 46ch; }
.chart__svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.chart__grid line { stroke: rgba(22, 32, 28, 0.12); stroke-width: 1; }
.chart__grid line.zero { stroke: var(--ink); stroke-width: 1.5; }
.chart__grid text, .chart__labels text { font-size: 13px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--with { stroke: var(--accent); }
.chart__line--without { stroke: var(--brass); }
.chart__mark { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 4; transition: transform 260ms var(--ease-out); }
.chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1rem; font-size: var(--step-small); }
.chart__key { display: inline-flex; align-items: center; gap: 0.5rem; }
.chart__key::before { content: ''; width: 1.5rem; height: 4px; background: currentColor; }
.chart__key--with::before { background: var(--accent); }
.chart__key--without::before { background: var(--brass); }
.stepper { margin-top: 1.5rem; padding: 1.5rem; background: var(--sage); border-radius: var(--r-md); }
.stepper__text { font-family: var(--font-display); font-weight: 700; font-size: var(--step-lead); line-height: 1.25; min-height: 4.2em; max-width: 30ch; letter-spacing: -0.015em; }
.stepper__nav { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.25rem; }
.explorer__note { margin-top: 2rem; }
@media (prefers-reduced-motion: no-preference) {
  .chart__line.is-drawing { animation: draw 1100ms var(--ease-out) both; }
}
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (max-width: 60rem) {
  .tabpanel, .stepper, .chart, .tp__pic { grid-column: 1 / -1 !important; grid-row: auto; }
  .chart { order: 3; }
}

/* right plan, wrong proportion */
.mix { padding-block: clamp(5rem, 10vw, 9rem); }
.mix__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.mix__left { grid-column: 1 / span 5; display: grid; gap: 2rem; }
.mix__pic { aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r-lg); }
.mix__text { grid-column: 7 / span 6; }
.mix__text p + p { margin-top: 1.25rem; }
.mix__act { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: 2rem !important; }
@media (max-width: 60rem) { .mix__left, .mix__text { grid-column: 1 / -1; } }

/* the four covers, animated, between the index and the explorer */
.cover-jobs { padding-block: clamp(4rem, 8vw, 6rem); }
.cover-jobs .jobs { margin-top: 0; }

/* the opener's card: which of the four jobs a typical first plan really does */
.cover-open { align-items: center; }
.hold { grid-column: 8 / span 5; padding: 1.5rem 1.6rem; }
.hold__h { font-weight: 800; font-size: 0.875rem; color: var(--muted); }
.hold__list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.hold__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(12, 31, 24, 0.07); font-weight: 700; }
.hold__n { margin-left: auto; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.hold__i { width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; background: var(--accent); }
.hold__i::after { content: ''; display: block; width: 100%; height: 100%; background: #fff; -webkit-mask: var(--i-check) center / 58% no-repeat; mask: var(--i-check) center / 58% no-repeat; }
.hold__i.no { background: var(--brass); }
.hold__i.no::after { background: var(--ink); -webkit-mask-image: var(--i-cross); mask-image: var(--i-cross); }
.hold__foot { margin-top: 1rem; font-size: 0.875rem; color: var(--muted); }
:root { --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .js .hold { animation: hold-in 900ms var(--ease-back) 200ms both, bob 4.4s ease-in-out 2.4s infinite alternate; }
  .js .hold__row { animation: row-in 450ms var(--ease-out) both; }
  .js .hold__row:nth-child(1) { animation-delay: 700ms; } .js .hold__row:nth-child(2) { animation-delay: 930ms; }
  .js .hold__row:nth-child(3) { animation-delay: 1160ms; } .js .hold__row:nth-child(4) { animation-delay: 1390ms; }
  .js .hold__i { animation: pop 500ms var(--ease-back) both; }
  .js .hold__row:nth-child(1) .hold__i { animation-delay: 900ms; } .js .hold__row:nth-child(2) .hold__i { animation-delay: 1130ms; }
  .js .hold__row:nth-child(3) .hold__i { animation-delay: 1360ms; } .js .hold__row:nth-child(4) .hold__i { animation-delay: 1590ms; }
}
@keyframes hold-in { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@media (max-width: 60rem) { .hold { grid-column: 1 / -1; margin-top: 2rem; } }