/* StudioShoot — landing V7 « La séance ».
   Le jour : papier ivoire, encre nuit (les deux couleurs de l'app, inversées). Le soir : les couleurs de l'app.
   Sans JavaScript ou sans animation, chaque partie reste lisible : la classe .gsap n'est posée
   que lorsque la chorégraphie tourne vraiment, et tout ce qui épingle ou masque en dépend. */

@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --day-paper: oklch(96.5% 0.011 84);
  --day-ink: oklch(19% 0.012 60);
  --night-paper: oklch(16.5% 0.012 60);
  --night-ink: oklch(94% 0.014 80);
  --paper: var(--day-paper);
  --ink: var(--day-ink);
  --ink-2: color-mix(in oklch, var(--ink) 68%, var(--paper));
  --ink-3: color-mix(in oklch, var(--ink) 48%, var(--paper));
  --rule: color-mix(in oklch, var(--ink) 13%, var(--paper));
  --m: max(clamp(1.25rem, 4.6vw, 4.5rem), calc((100vw - 96rem) / 2));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow: 0 1px 2px oklch(19% 0.012 60 / .1), 0 18px 36px -18px oklch(19% 0.012 60 / .28), 0 44px 88px -44px oklch(19% 0.012 60 / .32);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
html.is-intro { overflow: hidden; }
body { margin: 0; overflow-x: clip; font: 400 1.0625rem/1.5 "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--paper); }

.skip { position: absolute; left: var(--m); top: -4rem; z-index: 120; padding: .625rem 1rem; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- rafale d'ouverture ---------- */
.intro { display: none; }
.js .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--night-paper); color: var(--night-ink); animation: intro-secours .5s 6s forwards; }
@keyframes intro-secours { to { opacity: 0; visibility: hidden; } }
.intro-frame { position: relative; width: min(46svh, 68vw); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; clip-path: inset(50% 0 50% 0); }
.intro-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.intro-count { position: absolute; left: var(--m); bottom: clamp(1.25rem, 4vw, 3rem); display: flex; align-items: baseline; gap: .75rem; }
.intro-count b { font-size: clamp(4rem, 13vw, 11rem); font-weight: 500; line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.intro-count span { color: color-mix(in oklch, var(--night-ink) 60%, var(--night-paper)); }
.intro-flash { position: absolute; inset: 0; background: oklch(99.6% 0.003 84); opacity: 0; pointer-events: none; }

/* ---------- en-tête ---------- */
.top { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--m); }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em; text-decoration: none; }
.brand svg { width: 1.375rem; height: 1.375rem; }
.top-link, .text-link { display: inline-flex; align-items: center; gap: .375rem; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease); }
.top-link:hover, .text-link:hover { background-size: 100% 1px; }
.top-link svg, .text-link svg { width: .875rem; height: .875rem; }

/* ---------- bouton ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 1.625rem; border-radius: 14px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; transition: box-shadow .5s var(--ease), scale .2s var(--ease); }
.btn:hover { box-shadow: 0 14px 28px -14px color-mix(in oklch, var(--ink) 60%, transparent); }
.btn:active { scale: .97; }

/* ---------- ouverture ---------- */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 3.4vw, 3.5rem); min-height: 100svh; padding: 6.5rem var(--m) 4.5rem; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(64% 58% at 72% 34%, oklch(99.6% 0.003 84), transparent 74%); }
h1 { font-weight: 500; font-size: clamp(2.75rem, 5.4vw, 5.375rem); line-height: .98; letter-spacing: -.045em; }
.h1-l { display: block; overflow: clip; overflow-clip-margin: .12em; }
.h1-l > span { display: block; }
.h1-l:first-child { color: var(--ink-3); }
.lede { max-width: min(27rem, 34vw); margin-top: clamp(1.25rem, 2.2vw, 2rem); color: var(--ink-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.hero .btn { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }

.hero-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); align-items: start; gap: clamp(.75rem, 1.6vw, 1.5rem); width: 100%; max-width: 58rem; justify-self: end; padding-left: 6%; --px: 0; --py: 0; }
.print { position: relative; translate: calc(var(--px) * -8px) calc(var(--py) * -6px); }
.print-b { margin-top: 15%; translate: calc(var(--px) * -20px) calc(var(--py) * -14px); }
.roll { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: color-mix(in oklch, var(--ink) 9%, var(--paper)); box-shadow: var(--shadow); }
.roll-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); }
.roll-img.is-on { clip-path: inset(0); z-index: 2; }
.roll-img.was-on { clip-path: inset(0); z-index: 1; }
.roll-img.is-rolling { animation: unroll 1.05s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); transform: scale(1.07); } to { clip-path: inset(0); transform: none; } }

.cap { position: relative; height: 1.5rem; margin-top: .75rem; overflow-x: visible; overflow-y: clip; font-size: .875rem; color: var(--ink-2); }
.cap-line { position: absolute; inset: 0 auto auto 0; white-space: nowrap; opacity: 0; transform: translateY(70%); transition: opacity .45s, transform .7s var(--ease); }
.cap-line.is-on { opacity: 1; transform: none; }
.cap-line.was-on { transform: translateY(-70%); }
.cap b { margin-right: .5rem; font-weight: 700; color: var(--ink); }
.cap i { font-style: normal; }
.print-a .cap { margin-left: 33%; }

.chip { position: absolute; left: 0; bottom: -.5rem; z-index: 6; width: 20%; translate: calc(var(--px) * -30px) calc(var(--py) * -22px); padding: 5px 5px 0; border-radius: 5px; background: oklch(99.2% 0.004 84); color: var(--day-ink); box-shadow: var(--shadow); rotate: -5deg; }
.chip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.chip figcaption { padding: .3125rem 0 .375rem; text-align: center; font-size: .6875rem; font-weight: 700; letter-spacing: .01em; }

[data-hold] { cursor: pointer; touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.roll-selfie { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.is-held .roll-selfie { opacity: 1; }
.hold-tip { position: absolute; right: .875rem; bottom: .875rem; z-index: 5; display: grid; padding: .4375rem .8125rem; border-radius: 99px; background: oklch(16.5% 0.012 60 / .66); color: oklch(96% 0.01 84); font-size: .75rem; font-weight: 500; white-space: nowrap; pointer-events: none; }
.hold-tip i { grid-area: 1 / 1; font-style: normal; text-align: center; transition: opacity .2s; }
.hold-tip i + i, .is-held .hold-tip i { opacity: 0; }
.is-held .hold-tip i + i { opacity: 1; }

/* ---------- titres ---------- */
h2 { font-weight: 500; font-size: clamp(2.125rem, 4.3vw, 4.125rem); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); padding-inline: var(--m); }
.head p { max-width: 34rem; margin-top: 1rem; color: var(--ink-2); font-size: clamp(1.0625rem, 1.45vw, 1.3125rem); }

/* ---------- neuf styles pour le travail : galerie horizontale ---------- */
.pro { position: relative; }
.pro-pin { position: relative; display: flex; flex-direction: column; padding-top: clamp(4.5rem, 10vh, 6.5rem); }
.pro-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2.5rem; padding-inline: var(--m); padding-right: calc(var(--m) + 6rem); }
.pro-head h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.pro-head p { color: var(--ink-2); }
.pro-count { position: absolute; right: var(--m); top: clamp(4.75rem, 10.4vh, 6.9rem); display: none; gap: .4rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pro-count-n { display: inline-block; height: 1.5em; overflow: clip; }
.pro-count b { display: block; font-weight: 500; }
.pro-count i { font-style: normal; color: var(--ink-3); }
.pro-track { display: flex; gap: 9vw; padding: 0 var(--m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pro-track::-webkit-scrollbar { display: none; }
.plate { position: relative; flex: 0 0 auto; width: 72vw; height: max(34rem, 78svh); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(1.25rem, 4.5vh, 3rem); scroll-snap-align: start; --w: min(27vw, 43svh); }
.plate-shots { position: absolute; inset: clamp(1.5rem, 5vh, 3.5rem) 0 auto 0; z-index: 1; height: calc(var(--w) * 1.2); }
.shot { position: absolute; width: var(--w); aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in oklch, var(--ink) 9%, var(--paper)); box-shadow: var(--shadow); }
.shot-f { left: 0; top: 0; }
.shot-m { left: calc(var(--w) + 2.2vw); top: calc(var(--w) * .2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.plate-sub { position: absolute; z-index: 1; left: calc(var(--w) * 2 + 4.4vw); top: calc(clamp(1.5rem, 5vh, 3.5rem) + var(--w) * .2); max-width: 12rem; color: var(--ink-2); font-size: 1rem; line-height: 1.35; }
.plate-sub span { display: block; margin-bottom: .5rem; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.plate-name { position: relative; z-index: 0; font-size: min(14vw, 24svh, calc(160vw / var(--len))); font-weight: 500; line-height: .86; letter-spacing: -.055em; white-space: nowrap; }

.gsap .pro-pin { height: 100svh; overflow: clip; }
.gsap .pro-count { display: flex; }
.gsap .pro-track { flex: 1; min-height: 0; width: max-content; overflow: visible; padding-right: 22vw; will-change: transform; }
.gsap .plate { height: auto; }
.gsap .shot img { width: 124%; max-width: none; margin-left: -12%; }

/* ---------- trois gestes : le téléphone épinglé ---------- */
.phone { width: 100%; padding: 2.6%; border-radius: 15.6% / 7.2%; background: oklch(12% 0.008 60); box-shadow: 0 0 0 1px oklch(34% 0.01 60), var(--shadow); }
.phone img { width: 100%; border-radius: 13.6% / 6.3%; }
.how-pin { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 5fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); min-height: 100svh; padding: clamp(4.5rem, 10vh, 6.5rem) var(--m) clamp(2rem, 6vh, 4rem); overflow: clip; }
.how-copy h2 { font-size: clamp(2.125rem, 3.6vw, 3.5rem); }
.how-steps { margin-top: clamp(1.75rem, 4vh, 3rem); max-width: 26rem; border-bottom: 1px solid var(--rule); }
.how-step { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; padding: 1.125rem 0; border-top: 1px solid var(--rule); }
.how-step > span { font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.how-step h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.how-step p { margin-top: .375rem; color: var(--ink-2); }
.gsap .how-step { color: var(--ink-3); transition: color .5s; }
.gsap .how-step p { opacity: .55; transition: opacity .5s; }
.gsap .how-step.is-on { color: var(--ink); }
.gsap .how-step.is-on p { opacity: 1; }
.how-phone { width: min(19.5rem, calc((100svh - 13rem) * .47)); perspective: 1400px; }
.phone-screens { position: relative; aspect-ratio: 780 / 1688; border-radius: 13.6% / 6.3%; overflow: hidden; background: oklch(12% 0.008 60); isolation: isolate; }
.screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.phone .screen { border-radius: 0; }
.screen.is-on { opacity: 1; }
.how-num { justify-self: end; height: .8em; overflow: clip; color: color-mix(in oklch, var(--ink) 8%, var(--paper)); font-size: min(46svh, 30vw); font-weight: 500; line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.how-num span { display: flex; flex-direction: column; }
.how-num b { display: block; height: .8em; font-weight: 500; }
.gsap .how-pin { height: 100svh; min-height: 0; }

/* ---------- le soir ---------- */
.night { position: relative; z-index: 3; --paper: var(--night-paper); --ink: var(--night-ink); --ink-2: color-mix(in oklch, var(--ink) 68%, var(--paper)); --ink-3: color-mix(in oklch, var(--ink) 48%, var(--paper)); --rule: color-mix(in oklch, var(--ink) 13%, var(--paper)); background: var(--paper); color: var(--ink); }
.night-curve { display: none; }
.gsap .night-curve { display: block; position: absolute; left: -8%; right: -8%; top: 0; height: clamp(5rem, 16vw, 14rem); translate: 0 -50%; border-radius: 50%; background: var(--paper); pointer-events: none; }
.more { position: relative; padding: clamp(5rem, 11vw, 9.5rem) 0 clamp(3rem, 6vw, 5rem); }
.rails { display: grid; gap: clamp(1.5rem, 3vw, 3rem); overflow-x: clip; }
.rail-head { display: flex; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: clamp(.875rem, 1.4vw, 1.25rem); padding-inline: var(--m); }
.rail[data-dir="1"] .rail-head { flex-direction: row-reverse; }
.rail-head h3 { font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.rail-head p { color: var(--ink-2); font-size: 1rem; }
.rail-view { overflow-x: auto; scrollbar-width: none; }
.rail-view::-webkit-scrollbar { display: none; }
.gsap .rail-view { overflow: visible; }
.rail-track { display: flex; gap: clamp(.625rem, 1.2vw, 1.125rem); width: max-content; padding-inline: var(--m); will-change: transform; }
.tile { flex: 0 0 auto; width: var(--tile); }
.tile-img { aspect-ratio: 1; border-radius: 5px; overflow: hidden; background: color-mix(in oklch, var(--ink) 8%, var(--paper)); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.tile figcaption { margin-top: .5rem; color: var(--ink-2); font-size: .875rem; transition: color .3s; }
@media (hover: hover) {
  .tile:hover img { scale: 1.06; }
  .tile:hover figcaption { color: var(--ink); }
}

/* ---------- confiance ---------- */
.trust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(4.5rem, 9.5vw, 8.5rem) var(--m); }
.trust h2 { font-size: clamp(1.875rem, 3.3vw, 3.125rem); line-height: 1.04; }
.trust h2 span { color: var(--ink-3); }
.facts { border-bottom: 1px solid var(--rule); }
.facts li { max-width: 44rem; padding: 1.125rem 0; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); }
.trust .text-link { margin-top: 1.75rem; }

/* ---------- fin ---------- */
.end { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(4.5rem, 9.5vw, 8.5rem) var(--m) 0; overflow: clip; }
.end-copy { padding-bottom: clamp(4.5rem, 9.5vw, 8.5rem); }
.end-icon { width: 4.75rem; height: 4.75rem; border-radius: 22.5%; box-shadow: 0 0 0 1px color-mix(in oklch, var(--ink) 22%, transparent); }
.end h2 { max-width: 14ch; margin-top: 2rem; }
.end .btn { margin-top: 2.25rem; }
.end-phone { width: min(100%, 19.5rem); justify-self: center; align-self: end; margin-bottom: -6.5rem; }
.end-phone .phone { box-shadow: 0 0 0 1px oklch(34% 0.01 60), 0 -30px 90px -30px oklch(94% 0.014 80 / .14); }

.foot { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; padding: 1.75rem var(--m) calc(1.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); font-size: .875rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.foot-note { flex: 1 1 22rem; }

.dock { display: none; }

/* ---------- téléphone et tablette ---------- */
@media (max-width: 900px) {
  .top { padding-block: 1.125rem; }
  .lede { max-width: 30rem; }
  .hero { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: end; gap: 1.75rem; padding: 4.25rem var(--m) 1.5rem; }
  .hero::before { background: radial-gradient(90% 46% at 60% 26%, oklch(99.6% 0.003 84), transparent 76%); }
  .hero-stage { grid-row: 1; align-self: center; justify-self: center; max-width: 36rem; padding-left: 0; }
  .hero-copy { grid-row: 2; }
  .print, .print-b, .chip { translate: none; }
  .print-b { margin-top: 22%; }
  .chip { left: -3%; width: 25%; }
  .print-a .cap { margin-left: 42%; }
  h1 { font-size: clamp(2.5rem, 11.6vw, 3.75rem); }
  .lede { margin-top: 1rem; font-size: 1rem; line-height: 1.45; }
  .hero .btn { width: 100%; margin-top: 1.25rem; }

  .pro-pin { padding-top: 4.25rem; }
  .pro-head { display: block; padding-right: calc(var(--m) + 4.5rem); }
  .pro-head h2 { font-size: 1.875rem; }
  .pro-head p { margin-top: .5rem; font-size: 1rem; }
  .pro-count { top: 4.6rem; }
  .pro-track { gap: 12vw; }
  .plate { width: 84vw; height: max(30rem, 70svh); padding: 1.25rem 0 1.75rem; --w: min(58vw, 33svh); }
  .plate-shots { position: relative; inset: auto; height: calc(var(--w) * 1.52); margin: auto 0; }
  .shot-m { left: calc(var(--w) * .586); top: calc(var(--w) * .66); width: calc(var(--w) * .862); }
  .plate-sub { position: static; display: flex; gap: .75rem; max-width: none; margin-bottom: .625rem; font-size: .9375rem; }
  .plate-sub span { display: inline; margin: 0; }
  .plate-name { font-size: min(21vw, 12.5svh, calc(172vw / var(--len))); }
  .gsap .pro-track { padding-right: 16vw; }

  .how-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; justify-items: center; gap: 1.25rem; padding: 4.25rem var(--m) 1.5rem; }
  .how-copy { display: contents; }
  .how-copy h2 { justify-self: start; font-size: 2.125rem; }
  .how-phone { grid-row: 2; align-self: center; width: min(15.5rem, calc((100svh - 19.5rem) * .47)); }
  .how-steps { grid-row: 3; width: 100%; max-width: none; margin: 0; }
  .how-num { position: absolute; z-index: -1; right: var(--m); top: 22%; font-size: 44vw; }
  .gsap .how-steps { display: grid; border: 0; }
  .gsap .how-step { grid-area: 1 / 1; border: 0; padding: 0; opacity: 0; transition: opacity .45s; }
  .gsap .how-step.is-on { opacity: 1; }
  .gsap .how-step p { min-height: 3em; }

  .more { padding-top: 5.5rem; }
  .tile { width: var(--tile-m); }
  .rail-head p { font-size: .875rem; }

  .trust { grid-template-columns: 1fr; }
  .end { grid-template-columns: 1fr; gap: 3rem; }
  .end-copy { padding-bottom: 0; }
  .end h2 { max-width: 13ch; }
  .end-phone { width: min(70vw, 17.5rem); margin-bottom: -13rem; }
  .foot { flex-direction: column; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .foot-note { flex: none; }

  .dock { position: fixed; left: var(--m); right: var(--m); bottom: calc(.875rem + env(safe-area-inset-bottom)); z-index: 10; display: flex; align-items: center; justify-content: center; min-height: 3.25rem; border-radius: 14px; background: var(--day-ink); color: var(--day-paper); font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px -10px oklch(10% 0.01 60 / .5); translate: 0 180%; transition: translate .7s var(--ease), background-color .6s, color .6s; }
  .dock.is-on { translate: 0 0; }
  .is-night .dock { background: var(--night-ink); color: var(--night-paper); }
}
@media (max-width: 560px) {
  .chip { padding: 4px 4px 0; }
  .chip figcaption { font-size: .625rem; padding: .25rem 0 .3125rem; }
  .print-a .cap { margin-left: 50%; }
  .cap { font-size: .8125rem; }
  .cap i { display: none; }
  .hold-tip { right: .5rem; bottom: auto; top: .5rem; padding: .3125rem .625rem; font-size: .6875rem; }
}
@media (max-width: 900px) and (max-height: 720px) {
  .hero { gap: 1.25rem; padding-top: 3.75rem; }
  .lede-more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .intro { display: none; }
  .roll-img.is-rolling { animation: none; }
  .dock, .tile img { transition: none; }
}