/* Duo: two big pictures. Pick one and it swings to its side while its story comes in;
   the other slips to the edge of the screen, ready to be picked next. */
.duo-page .screen-issue { grid-template-rows: auto minmax(0, 1fr); }
.duo {
  --h: min(66dvh, 640px);
  --spread: min(15vw, 235px);
  position: relative; height: 100%; overflow: hidden;
  width: 100vw; margin: 0 0 0 calc(50% - 50vw);
}

/* Bigger masthead, smaller headline */
.duo-page .masthead img { width: clamp(255px, 24vw, 345px); }
.duo-page h1 { font-size: clamp(30px, min(4.95vw, 7.1vh), 78px); }
.duo-page.zoomed h1 { font-size: clamp(24px, min(2.3vw, 3.9vh), 34px); }
@media (max-width: 860px) {
  .duo-page .masthead img { width: clamp(220px, 60vw, 300px); }
  .duo-page h1 { font-size: clamp(26px, 7.5vw, 36px); }
  .duo-page .aside { flex-wrap: wrap; gap: 8px 18px; }
  .duo-page .aside .link { white-space: nowrap; font-size: 11px; letter-spacing: .12em; }
}

/* Natural scrolling: the page simply scrolls from the map down to the issue */
html:has(body.natural) { height: auto; }
body.natural.slide { height: auto; overflow: visible; display: block; }
.natural .vstack { height: auto; transform: none !important; transition: none; }
.natural .seam { top: calc(100dvh - 34px); transform: none !important; transition: none; }
/* The issue screen is a little shorter, so scrolling to the end leaves the divider in view at its top */
.natural .screen-issue { height: calc(100dvh - 68px); }
.natural .screen-issue .seam-space { height: 28px; }
.natural #map { touch-action: pan-y; }
@media (hover: none) { .natural .zoom-ctl { display: flex; } }
.map-hint {
  position: absolute; left: 50%; top: 50%; z-index: 4; margin: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.96); opacity: 0;
  padding: 10px 18px; background: rgba(248, 248, 244, .94); border: 0.75px solid var(--hair);
  font: italic 300 16px var(--f-body); color: var(--ink); white-space: nowrap;
  transition: opacity .3s, transform .3s;
}
.map-hint.on { opacity: 1; transform: translate(-50%, -50%); }

/* Cards */
.card {
  --x: 0px; --y: 0px; --r: 0deg; --hr: 0deg; --s: 1;
  position: absolute; left: 50%; top: 48%; z-index: 1;
  border: 0; padding: 0; background: none; cursor: pointer; color: inherit;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(calc(var(--r) + var(--hr))) scale(var(--s));
  transition: transform 1s cubic-bezier(.2, .9, .25, 1), opacity .6s;
  -webkit-tap-highlight-color: transparent;
}
.card:focus-visible { outline: none; }
.card:focus-visible img { outline: 2px solid var(--red); outline-offset: 6px; }
.card img { display: block; height: var(--h); width: auto; box-shadow: 0 1px 2px rgba(35,31,32,.12), 0 30px 60px -26px rgba(35,31,32,.5); }
.card-tote .print {
  display: block; background: var(--white); padding: 10px 10px 0;
  box-shadow: 0 1px 2px rgba(35,31,32,.12), 0 30px 60px -26px rgba(35,31,32,.5);
}
.card-tote .print img { height: calc(var(--h) - 58px); box-shadow: none; object-fit: cover; }
.print-caption {
  display: block; height: 48px; line-height: 48px; text-align: center;
  font: italic 400 clamp(18px, min(1.5vw, 2.8vh), 24px)/48px var(--f-title); color: var(--blue);
}
.card-hint {
  position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%);
  white-space: nowrap; font: 400 12px var(--f-type); letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink);
  transition: opacity .4s;
}
.card-hint i { font-style: normal; letter-spacing: 0; display: inline-block; transition: transform .3s; }
.card-cover .card-hint { --nudge: -4px; }
.card-tote .card-hint { --nudge: 4px; }
.duo[data-lean="issue"] .card-cover .card-hint i,
.duo[data-lean="tote"] .card-tote .card-hint i,
.card:focus-visible .card-hint i { transform: translateX(var(--nudge)); }

/* Resting: a loose pair, fanned apart */
.duo[data-focus="none"] .card-cover { --x: calc(var(--spread) * -1); --r: -5deg; }
.duo[data-focus="none"] .card-tote  { --x: var(--spread); --r: 5deg; }
/* Leaning: which one you mean is decided by which half the pointer is on (set in duo.js),
   not by :hover. The cards overlap, so :hover would flip between them as they move. */
.duo[data-focus="none"] .card { transition-duration: .7s, .5s; }
.duo[data-lean="issue"] .card-cover,
.duo[data-focus="none"] .card-cover:focus-visible { --hr: -2.5deg; --x: calc(var(--spread) * -1 - 18px); --y: -6px; --s: 1.015; z-index: 2; }
.duo[data-lean="tote"] .card-tote,
.duo[data-focus="none"] .card-tote:focus-visible  { --hr: 2.5deg;  --x: calc(var(--spread) + 18px); --y: -6px; --s: 1.015; z-index: 2; }
.duo[data-lean="issue"] .card-tote  { --s: .985; opacity: .92; }
.duo[data-lean="tote"] .card-cover  { --s: .985; opacity: .92; }

/* Cover picked: it swings left, the photo slips to the right edge */
.duo[data-focus="issue"] .card-cover { --x: calc(min(25vw, 340px) * -1); --r: -2deg; --s: 1.02; z-index: 2; }
.duo[data-focus="issue"] .card-tote  { --x: min(calc(50vw - 30px), 780px); --r: 13deg; --s: .78; opacity: .55; }
/* Photo picked: it swings right, the cover slips to the left edge */
.duo[data-focus="tote"] .card-tote   { --x: min(25vw, 340px); --r: 2deg; --s: 1.02; z-index: 2; }
.duo[data-focus="tote"] .card-cover  { --x: max(calc(-50vw + 30px), -780px); --r: -13deg; --s: .78; opacity: .55; }
.duo:not([data-focus="none"]) .card-hint { opacity: 0; }
.duo[data-focus="issue"][data-lean="tote"] .card-tote  { --s: .81; --hr: -3deg; opacity: .85; }
.duo[data-focus="tote"][data-lean="issue"] .card-cover { --s: .81; --hr: 3deg; opacity: .85; }

/* The badge only turns up when the photo is picked */
.card-tote .badge {
  position: absolute; z-index: 2; width: 104px; height: 104px; top: -38px; right: -38px;
  opacity: 0; transform: scale(.3) rotate(-120deg);
  transition: opacity .4s, transform .8s cubic-bezier(.2, 1.4, .3, 1);
}
.duo[data-focus="tote"] .badge { opacity: 1; transform: none; transition-delay: .5s; }
.duo[data-focus="tote"] .badge { cursor: grab; }
.duo[data-focus="tote"] .badge:active { cursor: grabbing; }
.badge-disc { fill: var(--red); }
.badge text { fill: var(--white); font: 400 9.6px var(--f-type); letter-spacing: .14em; text-transform: uppercase; }
.badge-star { fill: var(--white); }

/* Panels */
.panel {
  position: absolute; top: 48%; width: min(440px, 36vw);
  transform: translateY(-50%); opacity: 0; pointer-events: none;
  transition: opacity .5s;
}
.panel-issue { left: calc(50% + 10px); text-align: center; }
.panel-tote  { right: calc(50% + 10px); text-align: left; }
.duo[data-focus="issue"] .panel-issue,
.duo[data-focus="tote"] .panel-tote { opacity: 1; pointer-events: auto; transition-delay: .35s; }
.panel > * { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.duo[data-focus="issue"] .panel-issue > *,
.duo[data-focus="tote"] .panel-tote > * { opacity: 1; transform: none; }
.panel > :nth-child(1) { transition-delay: .4s; }
.panel > :nth-child(2) { transition-delay: .48s; }
.panel > :nth-child(3) { transition-delay: .56s; }
.panel > :nth-child(4) { transition-delay: .66s; }
.panel > :nth-child(5) { transition-delay: .74s; }
.panel .tag { color: var(--red-ink); margin-bottom: 12px; }
.panel h2 { font: 400 clamp(40px, min(4.4vw, 8vh), 72px)/.95 var(--f-title); color: var(--red); margin: 0 0 clamp(14px, 2.6vh, 24px); }
.panel-tote h2 { color: var(--blue); }
.panel .contents { list-style: none; margin: 0 0 clamp(14px, 2.6vh, 24px); padding: 0; }
.panel .contents li {
  font: 300 clamp(17px, min(1.45vw, 2.6vh), 23px)/1.25 var(--f-cond);
  padding: clamp(2px, .45vh, 5px) 0; border-bottom: 0.75px solid var(--hair);
}
.panel .contents li:last-child { border-bottom: 0; }
.panel .columns { font: italic 300 clamp(15px, min(1.2vw, 2.2vh), 18px)/1.4 var(--f-body); color: var(--muted); margin: 0 0 clamp(14px, 2.6vh, 24px); }
.panel .button { color: var(--red-ink); }
.panel .button:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.steps { list-style: none; margin: 0 0 clamp(14px, 2.6vh, 24px); padding: 0; }
.steps li {
  display: grid; grid-template-columns: 34px 1fr; align-items: baseline;
  padding: 10px 0; border-bottom: 0.75px solid var(--hair);
  font: 300 clamp(18px, min(1.5vw, 2.8vh), 22px)/1.3 var(--f-cond);
}
.steps li:last-child { border-bottom: 0; }
.steps b { font: 400 22px/1 var(--f-title); color: var(--red); font-variant-numeric: lining-nums; }
.panel .how { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.panel .how a { font: 400 12px var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); text-decoration: none; }
.panel .how a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* Phones: the picked card rises to the top, its story sits underneath */
@media (max-width: 860px) {
  .duo { --h: min(44dvh, 380px); --spread: min(22vw, 92px); }
  .card { top: 44%; }
  .card-hint { font-size: 11px; top: calc(100% + 14px); }
  .duo[data-focus="issue"] .card-cover { --x: 0px; --y: calc(-1 * 21dvh); --s: .56; --r: -2deg; }
  .duo[data-focus="issue"] .card-tote  { --x: calc(50vw + 10px); --y: calc(-1 * 21dvh); --s: .5; }
  .duo .panel-issue .contents { display: block; margin-bottom: 14px; }
  .duo .panel-issue .tag { display: none; }
  .duo .panel-issue h2 { margin-bottom: 8px; }
}
@media (max-width: 860px) and (min-height: 780px) {
  .duo[data-focus="issue"] .card-cover { --y: calc(-1 * 16dvh); --s: .68; }
  .duo[data-focus="issue"] .card-tote  { --y: calc(-1 * 16dvh); }
  .duo[data-focus="tote"] .card-tote   { --x: 0px; --y: calc(-1 * 10dvh); --s: .8; --r: 2deg; }
  .duo[data-focus="tote"] .card-cover  { --x: calc(-50vw - 10px); --y: calc(-1 * 10dvh); --s: .62; }
  .panel { top: auto; bottom: 18px; left: var(--gutter); right: var(--gutter); width: auto; transform: none; text-align: center; }
  .panel .contents li { font-size: 16px; padding: 2px 0; }
  .panel h2 { font-size: 34px; }
  .steps li { text-align: left; font-size: 17px; padding: 7px 0; }
  .panel .how { align-items: center; }
  .card-tote .badge { width: 78px; height: 78px; top: -26px; right: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .panel, .panel > *, .card-tote .badge { transition: none; }
}