/* Palette Girlies home page, the cover of a printed magazine (oct 2026, docs/web/SECCIONES.md "Portada"). Loaded after site.css, editorial.css and magazine.css. In order:
     .pc    the cover: Kyara's still life edge to edge, the headline at masthead size, one button, four cover lines with their page numbers (each a link to its section)
     .pi    in this issue: a visual table of contents (five pictures, then numbered lines)
     .pq    the sixty seconds: a card that turns over (front the sand timer, back the three questions of site/js/quick-read.js)
     .pp    the pains: five paper scraps on a table photograph, each turns over to what helps
     .pz    the back cover: the way back to the free test; .home-post the newsletter
   No colored bands, no labels like "01 ·", no chat, no prices: those belong to the Shop and the Lab. Hairlines instead of cards. Swatches stay flat and exact.
   Without JavaScript every part is plain and complete (the front of the card is a link, the scraps show both faces). With reduced motion nothing moves. The cover never animates (LCP). */

.home { --hp-line: var(--mz-line); }
.home h2 { text-wrap: balance; }
.home h2 em { font-family: var(--slant); font-style: italic; font-size: 1em; line-height: inherit; letter-spacing: inherit; color: var(--berry); }

/* ---------- 1. the cover ---------- */
.pc { position: relative; isolation: isolate; display: grid; overflow: hidden; background: var(--paper); min-height: clamp(640px, calc(100svh - 120px), 860px); }
.pc-photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.pc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
/* the headline stands on a veil of the paper that thins out below the button: the sheets of the photograph show through it, and show clear under it */
.pc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(247, 241, 232, .66) 0, rgba(247, 241, 232, .6) 42%, rgba(247, 241, 232, .34) 54%, rgba(247, 241, 232, 0) 66%); }
.pc-in { display: flex; flex-direction: column; align-items: flex-start; padding-top: clamp(22px, 5vw, 56px); padding-bottom: clamp(24px, 5vw, 52px); }
.pc-title { margin: 0; max-width: 9.4em; font-size: clamp(46px, 15.2vw, 150px); line-height: .94; letter-spacing: -.015em; font-weight: 400; text-wrap: balance; color: var(--ink); }
.pc-title em { white-space: nowrap; font-family: var(--slant); font-style: italic; color: var(--berry-dark); letter-spacing: -.01em; }
.pc-lead { margin: 16px 0 0; max-width: 21em; font: 500 clamp(18px, .5vw + 16px, 22px)/1.32 var(--sans); color: var(--ink); }
.pc-go { margin: 18px 0 0; }
.pc-meta { margin: 12px 0 0; padding: 4px 10px 3px; background: rgba(247, 241, 232, .92); font: 600 14.5px/1.35 var(--sans); letter-spacing: .01em; color: var(--ink); }
.pc-meta b { color: var(--berry); font-weight: 800; }
.pc-lines { list-style: none; margin: clamp(88px, 24vw, 300px) 0 0; padding: 0; display: grid; gap: 6px; width: min(100%, 25em); }
.pc-lines a { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; column-gap: 8px; min-height: 46px; padding: 6px 14px 6px 12px; background: rgba(247, 241, 232, .94); color: var(--ink); text-decoration: none; box-shadow: inset 3px 0 0 var(--berry); transition: background .3s, transform .5s var(--mz-spring); }
.pc-lines b { font: 400 27px/1 var(--serif); letter-spacing: -.01em; color: var(--berry); text-align: right; }
.pc-lines span { font: 700 17.5px/1.25 var(--sans); }
.pc-lines a:hover { background: #fff; color: var(--ink); }
.pc-lines a:active { transform: scale(.985); }
.pc-lines a:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.pc .card-note { margin-bottom: 12px; }
@media (min-width: 900px) {
  .pc { min-height: clamp(600px, calc(100svh - 110px), 780px); align-items: center; }
  .pc-photo img { transform: scaleX(-1); object-position: 70% 45%; }   /* the sheets move to the right, the empty paper and its window light stay under the headline */
  .pc::before { background: linear-gradient(90deg, rgba(247, 241, 232, .95) 0, rgba(247, 241, 232, .9) 36%, rgba(247, 241, 232, .5) 52%, rgba(247, 241, 232, 0) 66%); }
  .pc-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; }
  .pc-title { grid-column: 1; font-size: clamp(84px, 8.4vw, 150px); max-width: 8.6em; }
  .pc-lead, .pc-go, .pc-meta { grid-column: 1; justify-self: start; }
  .pc-lines { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; width: 100%; }
  .pc .card-note { grid-column: 1; }
}

/* ---------- 2. in this issue ---------- */
.pi { padding-block: var(--mz-pad) var(--mz-pad-b); }
.pi h2 { margin: 0 0 24px; font-size: var(--mz-h2); line-height: 1; letter-spacing: -.015em; font-weight: 400; }
.pi-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.pi-tile--wide { grid-column: 1 / -1; }
.pi-tile a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pic pic" "n h" "n s"; column-gap: 10px; align-items: baseline; color: var(--ink); text-decoration: none; }
.pi-pic { grid-area: pic; margin: 0 0 10px; overflow: hidden; background: var(--news); line-height: 0; aspect-ratio: 1; }
.pi-tile--wide .pi-pic { aspect-ratio: 3 / 2; }
.pi-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--mz-spring); }
.pi-tile:nth-child(3) .pi-pic img { object-position: 30% 50%; }
.pi-tile:nth-child(4) .pi-pic img { object-position: 38% 50%; }
.pi-tile:nth-child(5) .pi-pic img { object-position: 46% 50%; }
.pi-pic--ring { display: grid; place-items: center; background: var(--card) url(/img/collage/paper.webp); box-shadow: inset 0 0 0 1px var(--mz-line); }
.pi-pic--ring svg { display: block; width: 88%; height: auto; }
.pi-ring { transform-origin: 80px 80px; }
.pi-n { grid-area: n; align-self: start; margin: 0; font: 400 40px/.9 var(--serif); letter-spacing: -.02em; color: var(--berry); }
.pi-tile h3 { grid-area: h; margin: 0; font: 400 clamp(26px, 6.4vw, 34px)/1 var(--serif); letter-spacing: -.01em; }
.pi-sub { grid-area: s; margin: 4px 0 0; font: 400 16px/1.3 var(--sans); color: var(--ink); }
.pi-tile a:hover .pi-pic img { transform: scale(1.04); }
.pi-tile a:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; }
.pi-list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--hp-line); }
.pi-list a { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "n t" "n s"; column-gap: 8px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hp-line); color: var(--ink); text-decoration: none; }
.pi-list b { grid-area: n; align-self: start; font: 400 32px/1 var(--serif); letter-spacing: -.02em; color: var(--berry); }
.pi-list span { grid-area: t; font: 400 26px/1.05 var(--serif); letter-spacing: -.008em; }
.pi-list i { grid-area: s; font: 400 16px/1.3 var(--sans); font-style: normal; color: var(--ink); }
.pi-list a:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.pi-list a:focus-visible { outline: 3px solid var(--berry); outline-offset: -3px; }
/* the contents come in one after another when they are seen (site/js/fx/type-paint.js, data-pop) */
/* (was a hidden state until the scroll; off since Kyara, 29 oct 2026) */
.pi-grid.pop-on .pi-tile { opacity: 1; translate: 0 0; transition: opacity .5s ease-out calc(var(--i, 0) * 90ms), translate .8s var(--mz-spring) calc(var(--i, 0) * 90ms); }
.pi-grid.pop-on .pi-ring { animation: pi-turn 2.4s var(--mz-spring) both; }
@keyframes pi-turn { from { transform: rotate(-60deg); } to { transform: rotate(0); } }
@media (min-width: 900px) {
  .pi-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px 28px; }
  .pi-tile { grid-column: span 4; }
  .pi-tile--wide { grid-column: 1 / span 7; }
  .pi-tile:nth-child(2) { grid-column: 8 / span 5; }
  .pi-tile a { height: 100%; grid-template-rows: minmax(0, 1fr) auto auto; }
  .pi-pic { aspect-ratio: 4 / 3; }
  .pi-tile--wide .pi-pic { aspect-ratio: 3 / 2; }
  .pi-tile:nth-child(2) .pi-pic { aspect-ratio: auto; min-height: 0; }
  .pi-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; border-top: 0; margin-top: 48px; }
  .pi-list li { border-top: 1px solid var(--hp-line); }
  .pi-list a { border-bottom: 0; }
}

/* ---------- 3. the sixty seconds: a card that turns over ---------- */
.pq { padding-block: var(--mz-pad) var(--mz-pad-b); border-top: 1px solid var(--hp-line); }
.pq h2 { margin: 0; font-size: var(--mz-h2); line-height: 1; letter-spacing: -.015em; font-weight: 400; max-width: 12em; }
.pq-card { margin-top: 24px; max-width: 560px; }
.pq-inner { display: grid; position: relative; }
.pq-face { grid-area: 1 / 1; min-width: 0; background: var(--card) url(/img/collage/paper.webp); box-shadow: 0 0 0 1px var(--mz-line), 0 18px 30px -22px rgba(43, 34, 48, .5); border-radius: 3px; overflow: hidden; }
.pq-pic { margin: 0; line-height: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--news); }
.pq-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.pq-cap { display: grid; justify-items: start; gap: 6px; padding: 14px 18px 20px; }
.pq-60 { margin: 0; display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
.pq-60 b { font: 400 clamp(80px, 24vw, 112px)/.8 var(--serif); letter-spacing: -.03em; color: var(--berry); }
.pq-60 span { font: 700 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pq-line { margin: 4px 0 0; font: 400 18px/1.38 var(--sans); max-width: 22em; }
.hq-static { margin: 6px 0 0; }
.js .hq-static { display: none; }
.pq-flip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 6px; padding: 4px 18px 3px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 700 16.5px/1.1 var(--sans); cursor: pointer; transition: background .25s, color .25s, transform .5s var(--mz-spring); -webkit-tap-highlight-color: transparent; }
.pq-flip::after { content: "\21BB"; font: 400 19px/1 var(--sans); }
.pq-flip:hover { background: var(--ink); color: var(--paper); }
.pq-flip:active { transform: scale(.96); }
.pq-flip:focus-visible, .pq-x:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.pq-back { padding: 18px 18px 22px; }
.pq-x { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 6px; padding: 0; border: 0; background: none; color: var(--berry); font: 700 15.5px/1.2 var(--sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
/* with the script the card turns on its vertical axis; the face that is not showing is out of the reading order (inert), and with reduced motion the card changes at once */
.pq-card.is-live { perspective: 1500px; }
.pq-card.is-live .pq-inner { transform-style: preserve-3d; transition: transform .9s var(--mz-spring); }
.pq-card.is-live .pq-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pq-card.is-live .pq-back { transform: rotateY(180deg); }
.pq-card.is-flipped .pq-inner { transform: rotateY(180deg); }
/* the face that is turned away is not shown at all (not just turned): it appears just before the card passes the middle of its turn (the focus moves after that) */
.pq-card.is-live .pq-face { transition: visibility 0s linear .38s; }
.pq-card.is-live .pq-back, .pq-card.is-live.is-flipped .pq-front { visibility: hidden; }
.pq-card.is-live.is-flipped .pq-back, .pq-card.is-live .pq-front { visibility: visible; }
.hq-ui[hidden] { display: none; }
.hq-dots { list-style: none; display: flex; gap: 8px; margin: 0 0 14px; padding: 0; }
.hq-dots li { width: 28px; height: 4px; border-radius: 2px; background: rgba(43, 34, 48, .2); transition: background .3s; }
.hq-dots li.is-done { background: var(--ink); }
.hq-dots li.is-now { background: var(--berry); }
.hq-stage { position: relative; min-height: 262px; }
.hq-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.hq-step[hidden], .hq-result[hidden] { display: none; }
.hq-step legend { padding: 0; font: 400 clamp(23px, 6.4vw, 30px)/1.12 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; max-width: 22em; }
.hq-how { margin: 10px 0 0; max-width: 34em; font: 400 16.5px/1.4 var(--sans); color: var(--ink); }
.hq-step.is-in, .hq-result.is-in { animation: hq-in .7s var(--mz-spring) both; }
@keyframes hq-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.hq-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.hq-gray { display: grid; align-content: start; gap: 8px; padding: 0; border: 0; background: none; font: 600 13.5px/1.2 var(--sans); color: var(--ink); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .5s var(--mz-spring); }
.hq-gray i { display: block; height: 76px; background: var(--c); border-radius: 2px; box-shadow: 0 0 0 1px rgba(43, 34, 48, .12); }
.hq-gray:active, .hq-pick:active { transform: scale(.96); }
.hq-gray.is-picked i { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--berry); }
.hq-pick.is-picked .hq-sw { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--berry); }
.hq-same.is-picked { color: var(--ink); }
.hq-gray:focus-visible, .hq-pick:focus-visible, .hq-same:focus-visible, .hq-back:focus-visible, .hq-again:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.hq-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.hq-pick { display: grid; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .5s var(--mz-spring); }
.hq-sw { display: flex; height: 96px; box-shadow: 0 0 0 1px rgba(43, 34, 48, .14); border-radius: 2px; overflow: hidden; }
.hq-sw i { flex: 1; background: var(--c); }
.hq-pick b { font: 700 17px/1.25 var(--sans); color: var(--ink); }
.hq-same, .hq-back, .hq-again { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; font: 700 16.5px/1.3 var(--sans); color: var(--berry); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.hq-nav { margin: 6px 0 0; min-height: 0; }
.hq-back[hidden] { display: none; }
/* the first guess: each season painted as a disc of its own colors, its flat exact color in the middle */
.hq-result h3 { font: 400 clamp(28px, 7.4vw, 38px)/1.04 var(--serif); letter-spacing: -.012em; margin: 0; text-wrap: balance; }
.hq-lede { margin: 10px 0 0; max-width: 34em; font: 400 17.5px/1.4 var(--sans); color: var(--ink); }
.hq-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; border-top: 1px solid var(--hp-line); }
.hq-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hp-line); }
.hq-disc { position: relative; width: 76px; height: 76px; }
.hq-disc canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.hq-disc i { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: var(--c); border-radius: 2px; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px rgba(43, 34, 48, .2); }
.hq-name { display: block; font: 400 26px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.hq-trait { display: block; margin-top: 2px; font: 400 16px/1.3 var(--sans); color: var(--ink); }
.hq-read { margin: 14px 0 0; font: 600 16px/1.35 var(--sans); color: var(--ink); }
.hq-note { margin: 8px 0 0; max-width: 34em; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.hq-next { margin: 18px 0 0; display: grid; gap: 8px; justify-items: start; }
.hq-next p { margin: 0; max-width: 32em; font: 400 16.5px/1.4 var(--sans); color: var(--ink); }
@media (min-width: 900px) {
  .pq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 72px; align-items: center; }
  .pq h2 { grid-column: 1; }
  .pq-card { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 640px; justify-self: end; width: 100%; }
  .pq-front { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .pq-front .pq-pic { aspect-ratio: auto; min-height: 100%; }
  .pq-front .pq-cap { align-content: center; padding: 22px; }
  .hq-stage { min-height: 300px; }
  .hq-gray i { height: 92px; }
  .hq-sw { height: 120px; }
  .pq-back { padding: 24px 28px 28px; }
}

/* ---------- 4. the pains: paper scraps on a table, each turns over to what helps ---------- */
.pp { padding-block: var(--mz-pad) 0; border-top: 1px solid var(--hp-line); }
.pp h2 { margin: 0; font-size: var(--mz-h2); line-height: 1; letter-spacing: -.015em; font-weight: 400; max-width: 11em; }
.pp-table { position: relative; isolation: isolate; margin-top: 22px; padding: 30px 0 30px; overflow: hidden; background: var(--news); }
.pp-photo { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hs { position: relative; }
.hs-row { list-style: none; margin: 0; padding: 8px var(--gutter) 16px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hs-row::-webkit-scrollbar { display: none; }
.hs:focus-visible { outline: 3px solid var(--berry); outline-offset: -3px; }
.hs-item { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; perspective: 1400px; filter: drop-shadow(0 16px 14px rgba(43, 34, 48, .26)); }
.hs-item:nth-child(odd) { --tilt: -1.4deg; }
.hs-item:nth-child(even) { --tilt: 1.1deg; margin-top: 14px; }
.hs-card { display: grid; rotate: var(--tilt, 0deg); transform-style: preserve-3d; }
.hs-face { grid-area: 1 / 1; display: grid; align-content: space-between; gap: 18px; min-height: 262px; padding: 4px 8px 10px; color: var(--ink); background: var(--news) url(/img/collage/paper.webp); border: solid transparent; border-width: 16px; border-image: url(/img/collage/frame-news.webp) 52 fill / 16px / 7px round; }
.hs-back { background: var(--card) url(/img/collage/paper.webp); border-image-source: url(/img/collage/frame-card.webp); }
.hs-item:nth-child(2) .hs-front, .hs-item:nth-child(5) .hs-front { background-color: var(--blush-soft); border-image-source: url(/img/collage/frame-blush.webp); }
.hs-item:nth-child(3) .hs-front { background-color: var(--book); border-image-source: url(/img/collage/frame-book.webp); }
.hs-four { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-self: end; }
.hs-four li { display: grid; gap: 6px; align-content: start; font: 600 12.5px/1.2 var(--sans); color: var(--ink); }
.hs-four i { display: block; height: 44px; background: var(--c); border-radius: 2px; box-shadow: 0 0 0 1px rgba(43, 34, 48, .14); }
.hs-pain { margin: 0; font: 500 clamp(26px, 7vw, 32px)/1.14 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.hs-back h3 { font: 400 clamp(26px, 6.4vw, 31px)/1.06 var(--serif); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.hs-back h3 em { font-family: var(--slant); font-style: italic; color: var(--berry); }
.hs-back p { margin: 10px 0 0; font: 400 17.5px/1.42 var(--sans); max-width: 30em; }
.hs-back .more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; }
.hs-turn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 16px 3px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 700 16px/1.1 var(--sans); cursor: pointer; transition: background .25s, color .25s, transform .5s var(--mz-spring); -webkit-tap-highlight-color: transparent; }
.hs-turn::after { content: "\21BB"; font: 400 19px/1 var(--sans); }
.hs-turn:active { transform: scale(.96); }
.hs-turn:hover { background: var(--ink); color: var(--paper); }
.hs-turn:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.hs-back .hs-turn { margin-top: 8px; }
/* with the script the two faces share one place and the card turns (the first without it: both faces read one after the other) */
.hs-on .hs-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s var(--mz-spring), visibility 0s linear .34s; }
.hs-on .hs-back { transform: rotateY(180deg); }
.hs-on .hs-back, .hs-on .hs-card.is-flipped .hs-front { visibility: hidden; }   /* the face turned away is not shown at all: it appears as the scrap passes the middle of its turn */
.hs-on .hs-card.is-flipped .hs-back, .hs-on .hs-front { visibility: visible; }
.hs-on .hs-card.is-flipped .hs-front { transform: rotateY(-180deg); }
.hs-on .hs-card.is-flipped .hs-back { transform: rotateY(0); }
.hs-on .hs-front { cursor: pointer; }
.hs:not(.hs-on) .hs-front { min-height: 0; margin-bottom: -6px; }
.hs:not(.hs-on) .hs-card { gap: 0; }
.hs:not(.hs-on) .hs-face { grid-area: auto; min-height: 0; }
.hs:not(.hs-on) .hs-turn { display: none; }
.hs-ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px var(--gutter) 0; }
.hs-ctl[hidden] { display: none; }
.hs-dots { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.hs-dots li { width: 10px; height: 10px; border-radius: 50%; background: rgba(43, 34, 48, .3); transition: background .3s, transform .5s var(--mz-spring); }
.hs-dots li.is-on { background: var(--berry); transform: scale(1.3); }
.hs-arrows { display: none; margin: 0; gap: 8px; }
.hs-arrows button { width: 48px; height: 48px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 22px/1 var(--sans); cursor: pointer; transition: background .25s, color .25s; }
.hs-arrows button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.hs-arrows button:disabled { visibility: hidden; }   /* at the first scrap there is nothing before it: the arrow is not there (its place stays, so the other one does not move) */
.hs-arrows button:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) and (min-width: 760px) { .hs-arrows { display: flex; } }
@media (min-width: 900px) {
  .hs-row { padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .hs-ctl { padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .hs-item { flex-basis: 340px; }
  .pp-table { padding-block: 44px; }
}

/* ---------- 5. the back cover, and the newsletter ---------- */
.pz { padding-block: var(--mz-pad) 26px; }
.pz h2 { margin: 0; font-size: var(--mz-d1); line-height: .98; letter-spacing: -.015em; font-weight: 400; max-width: 10em; }
.pz-go { margin: 26px 0 0; }
.home-post { padding-block: 0 var(--mz-pad); }
.home-post .signup { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .pq-card.is-live .pq-inner, .pq-card.is-live .pq-face, .hs-on .hs-face, .hq-gray, .hq-pick, .hq-dots li, .hs-dots li, .pi-pic img, .pc-lines a { transition: none; }
  .hq-step.is-in, .hq-result.is-in, .pi-grid.pop-on .pi-ring { animation: none; }
  .pi-grid.pop-wait .pi-tile { opacity: 1; translate: none; }
}