/* Round 22b · V3 · "Made to be easy to say yes to" (#why) and its options (body.yes--N). Loads after v3.css.
   One markup (five list items, each a coded picture and its words); four ways to show them. The pictures themselves
   are drawn in v3.css (section 5) and are the same in every choice.
     1 One picture, changing as you read · the points as a list on the left; one picture holds on the right and turns
       to the point you are reading (Lusion). v3.js marks the point being read (.is-on).
     2 A row of tall cards you slide through · five upright cards in one row that runs off the page edge, two arrows
       (Basic/Dept)
     3 An index · one line a point: its number, its title large, its sentence, and a small picture at the end; the
       picture grows when the line is pointed at (Collins)
     4 Cards of different sizes · round 22's bento, as before (by Crawford): the rules in v3.css, untouched here
   Grid: 12 columns, 24px gutter (4 and 16px on a phone). Spacing scale only: 4 8 12 16 24 32 48 64 96 128 160 200. */

/* ── shared by 1, 2 and 3: open type, no boxed cards, a number to each point ── */
body:is(.yes--1, .yes--2, .yes--3) .yes { counter-reset: yes; }
body:is(.yes--1, .yes--2, .yes--3) .yes__card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
body:is(.yes--1, .yes--2, .yes--3) .yes__txt { counter-increment: yes; padding: 0; }
body:is(.yes--1, .yes--2, .yes--3) .yes__txt::before { content: counter(yes, decimal-leading-zero); display: block; font-family: var(--f-l); font-weight: var(--w-l); font-size: 13px; letter-spacing: .04em; color: var(--accent); font-variant-numeric: tabular-nums; }
body:is(.yes--1, .yes--2, .yes--3) .vis { border-radius: var(--card-r); box-shadow: inset 0 0 0 1px var(--card-line); }
body.comp--3:is(.yes--1, .yes--2, .yes--3) .vis { border-radius: 4px; }

/* ── 1 · one picture, changing as you read ───────────────────── */
@media (min-width: 900px) {
  body.yes--1 .yes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 24px; row-gap: 0; margin-top: 64px; }
  body.yes--1 .yes__card { display: contents; }
  body.yes--1 .yes__txt { grid-column: 1 / 6; min-height: 54vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; border-top: 1px solid var(--line); transition: opacity .6s var(--ease-x, ease); }
  body.yes--1 .yes__card:not(.is-on) .yes__txt { opacity: .4; }
  body.yes--1 .yes__card--a .yes__txt { grid-row: 1; } body.yes--1 .yes__card--b .yes__txt { grid-row: 2; }
  body.yes--1 .yes__card--c .yes__txt { grid-row: 3; } body.yes--1 .yes__card--d .yes__txt { grid-row: 4; }
  body.yes--1 .yes__card--e .yes__txt { grid-row: 5; border-bottom: 1px solid var(--line); }
  body.yes--1 .yes__txt::before { margin-bottom: 24px; }
  body.yes--1 .yes__t { font-size: calc(clamp(30px, 3vw, 46px) * var(--ds2)); line-height: 1.1; }
  body.yes--1 .yes__p { margin-top: 16px; max-width: 40ch; font-size: 18px; }
  /* every picture shares one place on the right and holds there while the list passes; only the one being read shows */
  body.yes--1 .yes__card .vis,
  body.yes--1 .yes__card--e .vis { grid-column: 7 / 13; grid-row: 1 / 6; align-self: start; position: sticky; top: calc((100vh - min(40vw, 64vh)) / 2); height: min(40vw, 64vh); opacity: 0; transform: scale(.97); transition: opacity .7s var(--ease-x, ease), transform .9s var(--ease-x, ease); }
  body.yes--1 .yes__card.is-on .vis { opacity: 1; transform: none; }
  html.still body.yes--1 .yes__card .vis { transition: none; transform: none; }
}

/* ── 2 · a row of tall cards you slide through ───────────────── */
body.yes--2 .yes { display: flex; gap: 24px; margin-top: 64px; margin-right: calc(-1 * clamp(20px, 3.5vw, 56px)); padding-right: clamp(20px, 3.5vw, 56px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; overscroll-behavior-x: contain; scrollbar-width: none; }
body.yes--2 .yes::-webkit-scrollbar { display: none; }
body.yes--2 .yes__card,
body.yes--2 .yes__card--e { flex: 0 0 clamp(300px, 30vw, 440px); display: flex; flex-direction: column; scroll-snap-align: start; }
body.yes--2 .yes__card .vis,
body.yes--2 .yes__card--e .vis { height: auto; aspect-ratio: 4 / 5; }
body.yes--2 .yes__txt,
body.yes--2 .yes__card--e .yes__txt { padding: 24px 8px 0 0; }
body.yes--2 .yes__txt::before { margin-bottom: 16px; }
body.yes--2 .yes__t { font-size: calc(clamp(22px, 1.8vw, 28px) * var(--ds2)); }
.yes__nav { display: none; }
body.yes--2 .yes__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 32px; }
.yes__arrow { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 70%, #ffffff 6%); color: var(--ink); cursor: pointer; transition: background-color .3s, opacity .3s; }
.yes__arrow:hover { background: color-mix(in srgb, var(--bg) 50%, #ffffff 16%); }
.yes__arrow:disabled { opacity: .3; cursor: default; }
body.comp--3 .yes__arrow { border-radius: 4px; background: transparent; }

/* ── 3 · an index, one line a point ──────────────────────────── */
body.yes--3 .yes { display: block; margin-top: 64px; border-bottom: 1px solid var(--line); }
body.yes--3 .yes__card,
body.yes--3 .yes__card--e { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); }
body.yes--3 .yes__txt,
body.yes--3 .yes__card--e .yes__txt { grid-column: 1 / 10; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 0; }
body.yes--3 .yes__txt::before { grid-column: 1; }
body.yes--3 .yes__t { grid-column: 2 / 6; font-size: calc(clamp(26px, 2.5vw, 38px) * var(--ds2)); line-height: 1.1; }
body.yes--3 .yes__p { grid-column: 6 / 10; margin: 0; max-width: 38ch; }
body.yes--3 .yes__card .vis,
body.yes--3 .yes__card--e .vis { grid-column: 10 / 13; grid-row: 1; height: auto; aspect-ratio: 16 / 10; transform-origin: 100% 50%; transition: transform .7s var(--ease-x, ease); }
body.yes--3 .yes__card:hover .vis { transform: scale(1.08); }
body.yes--3 .yes__t { transition: transform .6s var(--ease-x, ease); }
body.yes--3 .yes__card:hover .yes__t { transform: translateX(8px); }

/* ── phone ───────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* 1 and 3 become one column: the number and words, then the picture */
  body:is(.yes--1, .yes--3) .yes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 48px; border-bottom: 1px solid var(--line); }
  body:is(.yes--1, .yes--3) .yes__card,
  body:is(.yes--1, .yes--3) .yes__card--e { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); }
  body:is(.yes--1, .yes--3) .yes__txt,
  body:is(.yes--1, .yes--3) .yes__card--e .yes__txt { display: block; padding: 0; order: -1; }
  body:is(.yes--1, .yes--3) .yes__txt::before { margin-bottom: 16px; }
  body:is(.yes--1, .yes--3) .yes__t { font-size: calc(26px * var(--ds2)); }
  body:is(.yes--1, .yes--3) .yes__p { margin-top: 12px; }
  body:is(.yes--1, .yes--3) .yes__card .vis,
  body:is(.yes--1, .yes--3) .yes__card--e .vis { height: auto; aspect-ratio: 4 / 3; transform: none; }
  body.yes--2 .yes { gap: 16px; }
  body.yes--2 .yes__card, body.yes--2 .yes__card--e { flex-basis: 78vw; }
}

/* ── round 23 · "easy to say yes" on a phone (body.yp--N, under 900px only) ──
   Whichever wide layout is picked, a phone shows one of these. Each keeps the five points short to scroll past.
     1 Swipe the cards     · five cards in one row you slide: picture, number, title, sentence; dots under the row
     2 One picture on top  · the picture holds at the top of the screen and turns to the point you are reading below it
                             (the wide pick, kept)
     3 Tap to open         · five lines, number and title; tap one to open its sentence and picture */
@media (max-width: 899px) {
  body:is(.yp--1, .yp--2, .yp--3) .yes { counter-reset: yes; margin-top: 48px; border: 0; }
  body:is(.yp--1, .yp--2, .yp--3) .yes__card,
  body:is(.yp--1, .yp--2, .yp--3) .yes__card--e { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
  body:is(.yp--1, .yp--2, .yp--3) .yes__txt,
  body:is(.yp--1, .yp--2, .yp--3) .yes__card--e .yes__txt { counter-increment: yes; padding: 0; opacity: 1; min-height: 0; border: 0; }
  body:is(.yp--1, .yp--2, .yp--3) .yes__txt::before { content: counter(yes, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--f-l); font-weight: var(--w-l); font-size: 13px; letter-spacing: .04em; color: var(--accent); font-variant-numeric: tabular-nums; }
  body:is(.yp--1, .yp--2, .yp--3) .yes__t { font-size: calc(clamp(24px, 1.6vw + 16px, 28px) * var(--ds2)); line-height: 1.15; }
  body:is(.yp--1, .yp--2, .yp--3) .yes__p { margin-top: 8px; font-size: 16px; max-width: 46ch; }
  body:is(.yp--1, .yp--2, .yp--3) .vis { border-radius: var(--card-r); box-shadow: inset 0 0 0 1px var(--card-line); transform: none; opacity: 1; }
  body.comp--3:is(.yp--1, .yp--2, .yp--3) .vis { border-radius: 4px; }
  body:is(.yp--1, .yp--2, .yp--3) .yes__nav { display: none; }

  /* 1 · swipe the cards */
  body.yp--1:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes {
    display: flex; gap: 12px; margin-inline: calc(-1 * clamp(20px, 3.5vw, 56px)); padding-inline: clamp(20px, 3.5vw, 56px);
    scroll-padding-inline: clamp(20px, 3.5vw, 56px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  body.yp--1 .yes::-webkit-scrollbar { display: none; }
  body.yp--1:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card,
  body.yp--1:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card--e { flex: 0 0 min(80%, 360px); display: flex; flex-direction: column; gap: 20px; scroll-snap-align: start; grid-column: auto; }
  body.yp--1:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card .vis,
  body.yp--1:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card--e .vis { order: 0; position: relative; top: auto; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  body.yp--1:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__txt { order: 1; }
  body.yp--1 .why .swipe-dots { display: flex; }

  /* 2 · one picture on top: every picture shares the first row and holds under the header; the points scroll under it */
  body.yp--2:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: min(40vh, 72vw) repeat(5, auto); gap: 0; overflow: visible; margin-inline: 0; padding: 0; }
  body.yp--2:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card,
  body.yp--2:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card--e { display: contents; }
  body.yp--2:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card .vis,
  body.yp--2:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card--e .vis {
    grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: 80px; z-index: 2; width: 100%; height: min(40vh, 72vw); aspect-ratio: auto;
    opacity: 0; transition: opacity .6s var(--ease-x, ease);
  }
  body.yp--2 .yes__card.is-on .vis { opacity: 1; }
  body.yp--2:is(.yes--1, .yes--2, .yes--3, .yes--4) .vis { background: color-mix(in srgb, var(--bg), #ffffff 4%); }   /* solid, so nothing shows through it */
  body.yp--2 .yes__card.is-past.is-past .yes__txt { opacity: 0; }   /* a point that has scrolled up behind the picture fades out */
  body.yp--2:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__txt { grid-column: 1; min-height: 34vh; padding: 32px 0 0; border-top: 1px solid var(--line); opacity: .38; transition: opacity .5s var(--ease-x, ease); }
  body.yp--2 .yes__card.is-on .yes__txt { opacity: 1; }
  body.yp--2 .yes__card--a .yes__txt { grid-row: 2; margin-top: 32px; } body.yp--2 .yes__card--b .yes__txt { grid-row: 3; }
  body.yp--2 .yes__card--c .yes__txt { grid-row: 4; } body.yp--2 .yes__card--d .yes__txt { grid-row: 5; }
  body.yp--2 .yes__card--e .yes__txt { grid-row: 6; min-height: 0; padding-bottom: 32px; border-bottom: 1px solid var(--line); }

  /* 3 · tap to open */
  body.yp--3:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes { display: block; overflow: visible; margin-inline: 0; padding: 0; border-bottom: 1px solid var(--line); }
  body.yp--3:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card,
  body.yp--3:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card--e { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
  body.yp--3:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__txt { order: 0; position: relative; padding: 24px 56px 24px 0; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; }
  body.yp--3 .yes__txt::before { grid-column: 1; margin: 0; }
  body.yp--3 .yes__t { grid-column: 2; }
  body.yp--3 .yes__p { grid-column: 2; display: none; margin-top: 12px; }
  body.yp--3 .yes__txt::after { content: ""; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2);
    background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; transition: transform .4s cubic-bezier(.22,1,.36,1); }
  body.yp--3 .yes__card.is-open .yes__txt::after { top: 24px; margin-top: 0; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat; }
  body.yp--3 .yes__card.is-open .yes__p { display: block; }
  body.yp--3:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card .vis,
  body.yp--3:is(.yes--1, .yes--2, .yes--3, .yes--4) .yes__card--e .vis { order: 1; display: none; position: relative; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 11; margin: 0 0 24px; }
  body.yp--3 .yes__card.is-open .vis { display: block; }
  body.yp--3 .yes__txt:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
}