/* 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 use document flow so stories and results can grow without clipping. */
@media (max-width: 860px), (max-width: 1024px) and (max-height: 500px) {
  .duo-page { --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .duo-page .masthead { padding-top: max(20px, env(safe-area-inset-top)); }
  .duo-page .screen-main { height: auto; min-height: 100svh; display: block; }
  .duo-page .stage { overflow: visible; }
  .duo-page .vstack { will-change: auto; }
  .duo-page .track { display: block; height: auto; transform: none !important; transition: none; }
  .duo-page .pane { height: auto; padding: 16px var(--gutter) 24px; transition: none; }
  .duo-page .pane-map { opacity: 1; }
  .duo-page .pane-list { display: none; }
  .duo-page.listing .pane-map { display: none; }
  .duo-page.listing .pane-list { display: flex; opacity: 1; }
  .duo-page .lead { padding: 0; }
  .duo-page h1, .duo-page.zoomed h1 { font-size: clamp(26px, 7.5vw, 36px); }
  .duo-page .search, .duo-page.zoomed .search { max-width: none; }
  .duo-page .search input, .duo-page.zoomed .search input { font-size: 18px; min-width: 0; }
  .duo-page .search button { padding-inline: 8px; font-size: 11px; letter-spacing: .1em; }
  .duo-page .aside { gap: 4px 16px; }
  .duo-page .aside .link { min-height: 44px; display: inline-flex; align-items: center; }
  .duo-page .status:empty { display: none; }
  .duo-page .map-fig { flex: none; margin-top: 12px; }
  .duo-page .map-frame { flex: none; height: clamp(280px, 48svh, 440px); }
  .duo-page .zoom-ctl { display: flex; }
  .duo-page .zoom-ctl button { width: 44px; height: 44px; }
  .duo-page .map-hint { max-width: calc(100% - 32px); white-space: normal; text-align: center; }
  .duo-page .tip { max-width: calc(100% - 24px); white-space: normal; }
  .duo-page .results { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; gap: 0; margin-top: 16px; }
  .duo-page .results:empty { display: none; }
  .duo-page .results li { padding: 16px 0; border-bottom: .75px solid var(--hair); }
  .duo-page .results li:nth-child(n+5) { display: block; }
  .duo-page .results .dir { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
  .duo-page .edge-tab.to-list { display: none; }
  .duo-page .edge-tab.to-map { display: none; }
  .duo-page.listing .edge-tab.to-map { display: flex; position: static; width: fit-content; margin: 0 var(--gutter) 24px; min-height: 44px; transform: none; }
  .duo-page .list-head h2 { font-size: 38px; }
  .duo-page .stock-list { flex: auto; max-height: 60svh; }
  .duo-page .stock-cols { columns: 1; }
  .duo-page .stock-state li button { min-height: 44px; width: 100%; }
  .duo-page .screen-main > .seam-space, .duo-page .screen-issue > .seam-space { display: none; }
  .duo-page.natural .seam { position: relative; top: auto; padding-block: 20px; }
  .duo-page .v-tab { top: 24.5px; height: 44px; }
  .duo-page.natural .screen-issue { height: auto; min-height: 100svh; display: block; padding: 0 var(--gutter) max(32px, env(safe-area-inset-bottom)); }
  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; width: auto; height: auto; margin: 0; padding: 24px 0; overflow: visible; }
  .duo .card { position: relative; left: auto; top: auto; width: 100%; align-self: start; transform: none !important; transition: none; opacity: 1; }
  .duo .card img { width: 100%; height: 200px; object-fit: contain; box-shadow: none; }
  .duo .card-tote .print { padding: 6px 6px 0; }
  .duo .card-tote .print img { height: 164px; object-fit: cover; }
  .duo .print-caption { height: 30px; font-size: 15px; line-height: 30px; }
  .duo .card-hint { position: static; display: block; margin-top: 16px; transform: none; opacity: 1; font-size: 10px; letter-spacing: .08em; white-space: normal; }
  .duo[data-focus] .card-hint { opacity: 1; }
  .duo .card-tote .badge { display: none; }
  .duo .panel { display: none; position: static; grid-column: 1 / -1; width: auto; transform: none; text-align: left; transition: none; }
  .duo[data-focus="issue"] .panel-issue, .duo[data-focus="tote"] .panel-tote { display: block; opacity: 1; pointer-events: auto; }
  .duo .panel > * { opacity: 1; transform: none; transition: none; }
  .duo .panel h2 { font-size: 36px; line-height: 1.05; margin-bottom: 16px; }
  .duo .panel .contents { display: block; margin-bottom: 20px; }
  .duo .panel .contents li { font-size: 19px; padding: 9px 0; }
  .duo .panel .columns { font-size: 17px; }
  .duo .steps li { font-size: 19px; padding: 12px 0; }
  .duo .panel .how a { overflow-wrap: anywhere; min-height: 44px; display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .panel, .panel > *, .card-tote .badge { transition: none; }
}