/* PAPER COLLAGE — FAQ, watch links and illustrated legal footer.
   Source geometry: 220:33903, 654:13691, 654:13520. No Hub selectors. */
.paper-faq {
  --paper-faq-column-gap: 8.59%;
  --paper-faq-row-pad: clamp(1.25rem, 1.875cqw, 1.815rem);
  --paper-faq-icon-size: 1.66375rem;
  display: grid;
  grid-template-columns: 28.91% minmax(0, 1fr);
  gap: var(--paper-faq-column-gap);
  width: calc(100% - 2 * var(--paper-gutter, clamp(1.25rem, 5.5556vw, 5rem)));
  max-width: 96.8125rem;
  margin: 0 auto;
  padding-block: clamp(4rem, 7.5vw, 8rem);
  color: var(--ink);
  container-type: inline-size;
}
.paper-faq-introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 1.72vw, 1.66375rem);
  min-width: 0;
}
.paper-press-collage {
  display: block;
  width: 82.868%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.paper-faq-introduction h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 5.9375cqw, 5.7475rem);
  font-weight: var(--weight-display);
  font-variation-settings: var(--font-display-axes);
  line-height: 0.8;
  letter-spacing: -0.024em;
}
.paper-faq-items {
  min-width: 0;
}
.paper-faq-items details {
  padding: var(--paper-faq-row-pad);
  border-bottom: 1px solid var(--line);
}
.paper-faq-items details:last-child {
  border-bottom: 0;
}
.paper-faq-items summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 1.5em;
  list-style: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.485cqw, 1.436875rem);
  font-weight: var(--weight-semibold);
  font-variation-settings:
    'wdth' 100,
    'wght' 590;
  line-height: 1.5;
  letter-spacing: -0.008em;
  cursor: pointer;
}
.paper-faq-items summary::-webkit-details-marker {
  display: none;
}
.paper-faq-items details[open] summary,
.paper-faq-items details[data-expanded='true'] summary {
  color: var(--ink);
}
.paper-faq-items summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}
.paper-faq-items details > p {
  max-width: 81.44%;
  margin: 1.05875rem 0 0;
  color: var(--muted);
  font: var(--weight-regular) clamp(1rem, 1.25cqw, 1.21rem) / 1.5 var(--font-body);
  letter-spacing: -0.009375em;
}
.paper-faq-icon {
  position: relative;
  flex: 0 0 var(--paper-faq-icon-size);
  width: var(--paper-faq-icon-size);
  height: var(--paper-faq-icon-size);
}
.paper-faq-icon img {
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.paper-faq-minus {
  filter: brightness(0);
  opacity: 0;
}
.paper-faq-items details[open] .paper-faq-plus,
.paper-faq-items details[data-expanded='true'] .paper-faq-plus {
  opacity: 0;
}
.paper-faq-items details[open] .paper-faq-minus,
.paper-faq-items details[data-expanded='true'] .paper-faq-minus {
  opacity: 1;
}
.paper-faq-items details[data-expanded='false'] .paper-faq-plus {
  opacity: 1;
}
.paper-faq-items details[data-expanded='false'] .paper-faq-minus {
  opacity: 0;
}

[data-theme='dark'] .paper-faq-minus {
  filter: none;
}
@media (max-width: 800px) {
  .paper-faq {
    --paper-faq-row-pad: 1.25rem 0;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: 4rem;
  }
  .paper-faq-introduction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 1.5rem;
  }
  .paper-press-collage {
    width: 100%;
    max-width: 14rem;
  }
  .paper-faq-introduction h2 {
    font-size: clamp(2.75rem, 7.5vw, 4.25rem);
  }
  .paper-faq-items details > p {
    max-width: none;
    margin-top: 0.75rem;
  }
}
@media (max-width: 480px) {
  .paper-faq-introduction {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .paper-press-collage {
    width: 11rem;
  }
  .paper-faq-introduction h2 {
    font-size: clamp(3.25rem, 14vw, 4rem);
  }
  .paper-faq-items summary {
    gap: 1rem;
    font-size: 1.0625rem;
    line-height: 1.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .paper-faq-icon img {
    transition: none;
  }
}

.paper-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Figma 654:13691. Keep type/links as DOM and print effects in artwork. */
.paper-closing {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--canvas);
  color: var(--ink);
}
.paper-closing-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28.47rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 7vw, 8.5rem);
  /* Equal outer columns keep the portrait RSVP centered while the side blocks
     meet the same fluid page gutters as the app CTA and legal footer. */
  width: calc(100% - 2 * var(--paper-gutter, clamp(1.25rem, 5.5556vw, 5rem)));
  margin-inline: auto;
  padding-block: clamp(3rem, 5.2963vw, 6.35rem);
}
.paper-closing-story,
.paper-closing-details {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2.5rem, 4.5vw, 5.4rem);
  min-width: 0;
}
.paper-closing-story h2 {
  margin: 0;
  font: var(--weight-display) clamp(3.75rem, 4.7665vw, 5.72rem) / 0.84 var(--font-display);
  font-variation-settings: var(--font-display-axes);
  letter-spacing: -0.018em;
}
.paper-closing-story h2 > span {
  display: block;
}
.paper-closing-date {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
  color: var(--muted);
  font: var(--weight-bold) clamp(1rem, 1.3418vw, 1.61rem) / 1.15 var(--font-display);
  font-variation-settings: var(--font-display-axes);
  letter-spacing: -0.02em;
}
.paper-closing-details {
  align-items: flex-end;
  gap: clamp(2.5rem, 4.061vw, 4.873rem);
  width: 100%;
  max-width: clamp(16rem, 19.61vw, 23.53rem);
  justify-self: end;
}
.paper-closing-signup {
  min-width: 0;
  width: 100%;
  max-width: 28.47rem;
  justify-self: center;
  container-type: inline-size;
}
.paper-closing .paper-closing-rsvp {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 105.73cqw;
  margin: 0;
  padding: clamp(1.25rem, 7cqw, 2rem);
  gap: clamp(1.25rem, 6cqw, 1.7rem);
  border-radius: clamp(1.125rem, 5cqw, 1.423rem);
}
.local-preview-page .paper-closing-rsvp .paper-event-title {
  width: min(100%, 60cqw);
}
.paper-closing-rsvp .offer {
  margin-top: clamp(1.125rem, 4.42cqw, 1.26rem);
  font-size: clamp(1rem, 4cqw, 1.14rem);
}
.paper-closing-rsvp .signup-form {
  gap: clamp(0.75rem, 3.12cqw, 0.889rem);
}
.paper-closing-rsvp .phone-field {
  min-height: clamp(3.125rem, 13.37cqw, 3.807rem);
  font-size: clamp(1rem, 4.16cqw, 1.185rem);
}
.paper-closing-rsvp .button {
  min-height: clamp(3rem, 12.59cqw, 3.585rem);
  font-size: clamp(1rem, 3.75cqw, 1.066rem);
}
.paper-closing-watch {
  --paper-app-size: clamp(3.5rem, 5.1609vw, 6.19rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(1rem, 1.1577vw, 1.39rem);
}
.paper-closing-watch h3 {
  margin: 0;
  font: var(--weight-display) clamp(1.5rem, 2.3851vw, 2.86rem) / 1 var(--font-display);
  font-variation-settings: var(--font-display-axes);
  text-align: right;
}
.paper-closing-watch .paper-hero-apps {
  gap: clamp(1rem, 1.658vw, 2rem);
}
.paper-closing-credits {
  /* Figma 654:13708: two unequal columns share the watch block's right edge.
     Text alignment alone leaves the narrow credits bunched under the icons. */
  display: grid;
  grid-template-columns: minmax(0, 116.517fr) minmax(0, 144.064fr);
  width: 100%;
  gap: clamp(1rem, 1.5133vw, 1.82rem);
  font: var(--weight-semibold) clamp(0.75rem, 0.8701vw, 1.044rem) / 0.9514 var(--font-display);
  font-variation-settings: var(--font-kicker-axes);
  text-align: right;
}
.paper-closing-credits > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(1.25rem, 1.7104vw, 2.052rem);
  min-width: 0;
}
.paper-closing-credits :is(h3, p) {
  margin: 0;
  font: inherit;
}
.paper-closing-art {
  position: relative;
  width: 100%;
  /* The portrait card overlaps the Capitol, matching the 1440px Figma frame. */
  margin-top: clamp(-18.65rem, -15.5vw, -7rem);
  aspect-ratio: 1440 / 394;
  overflow: hidden;
  pointer-events: none;
}
.paper-closing-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paper-closing-print-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.paper-closing-art:is([data-print-motion='active'], [data-print-motion='paused'])
  .paper-closing-print-motion {
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .paper-closing-art[data-print-motion] .paper-closing-print-motion {
    visibility: hidden;
  }
}
.paper-closing-fade {
  position: absolute;
  /* Overlap the clipped top edge shared by the image and WebGL canvas so
     fractional mobile positioning cannot expose a thin strip of the print. */
  inset: -2px 0 auto;
  height: calc(57.6142% + 2px);
  background: var(--canvas);
  /* Same exported Natural Blend equation and axes; its alpha is scale-invariant. */
  mask: url('../assets/paper/closing-fade.png') center / 100% 100% no-repeat;
}

/* Figma 654:13520. The ballot overlaps the Capitol while links stay readable. */
.paper-footer {
  --paper-footer-gutter: var(--paper-gutter, clamp(1.25rem, 5.5556vw, 5rem));
  display: flex;
  justify-content: center;
  padding: 0 var(--paper-footer-gutter);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--canvas);
  color: var(--ink);
}
.paper-footer-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 4rem);
  width: 100%;
  position: relative;
  min-height: 33.1875rem;
  padding-block: clamp(6rem, 9.44vw, 8.5rem) 2.5rem;
}
.paper-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: 67.1875%;
}
.paper-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.paper-footer-brands {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  color: inherit;
  text-decoration: none;
}
.paper-footer-brands img {
  display: block;
  flex: 0 0 auto;
}
.paper-footer-tagline {
  margin: 0;
  font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
}
.paper-footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 60%;
  gap: clamp(1.5rem, 4vw, 3.6rem);
  justify-content: end;
  text-align: left;
}
.paper-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 7.5rem;
}
.paper-footer-col h3 {
  margin: 0 0 0.25rem;
  color: var(--ink);
  font: var(--weight-semibold) var(--text-sm) / 1.4 var(--font-body);
}
.paper-footer-col a {
  color: var(--muted);
  font: var(--weight-regular) var(--text-sm) / 1.4 var(--font-body);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.paper-footer-col a:hover {
  color: var(--ink);
}
.paper-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 67.1875%;
}
.paper-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
}
.paper-footer-disclaimer {
  max-width: 52rem;
  margin: 0;
  color: var(--muted);
  font: var(--weight-regular) var(--text-xs) / 1.6 var(--font-body);
  text-wrap: pretty;
}
.paper-footer-disclaimer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.paper-footer-disclaimer a:hover {
  color: var(--ink);
}
.paper-footer a:focus-visible,
.paper-footer button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Anchor the approved crop to the page edge, independently of the fluid text.
   Bound the square artwork so ultrawide screens cannot crop away the urn.
   Both artwork layers use the same square coordinates at every size. */
.paper-footer-art {
  position: absolute;
  z-index: -1;
  right: calc(-1 * var(--paper-footer-gutter) - min(6.25vw, 5.625rem));
  top: -6.625rem;
  bottom: 0;
  width: min(51.6406%, 41.3125rem);
  overflow: hidden;
  pointer-events: none;
}
.paper-footer-art-composition {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.paper-footer-ballot {
  display: block;
  width: 100%;
  height: 100%;
}
.paper-footer-ballot-wordmark {
  position: absolute;
  left: 52.153%;
  top: 39.9%;
  width: 22.2513%;
  height: auto;
  rotate: 40.65deg;
}
@media (max-width: 1200px) {
  .paper-footer-top {
    flex-direction: column;
    gap: var(--space-8);
  }
  .paper-footer-columns {
    width: 100%;
    justify-content: start;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .paper-footer-top,
  .paper-footer-bottom {
    width: 65%;
  }
  .paper-footer-art {
    top: 5rem;
  }
}
@media (max-width: 1280px) {
  .paper-closing-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    padding-block: 3rem;
  }
  .paper-closing-signup {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .paper-closing-details {
    grid-column: 1;
  }
  .paper-closing-art {
    aspect-ratio: 1440 / 520;
    margin-top: -2rem;
  }
}
@media (max-width: 900px) {
  .paper-footer-inner {
    min-height: 0;
    padding-block: 3rem calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
  .paper-footer-top,
  .paper-footer-bottom {
    width: 100%;
  }
  .paper-footer-art {
    display: none;
  }
  .paper-footer-columns {
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
  .paper-footer-col {
    min-width: 0;
  }
}
@media (max-width: 700px) {
  .paper-closing-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
  .paper-closing-signup {
    grid-column: auto;
    grid-row: auto;
    width: min(100%, 30rem);
    justify-self: center;
  }
  .paper-closing-story {
    gap: 2rem;
  }
  .paper-closing-details {
    width: 100%;
    gap: 2.5rem;
  }
  .paper-closing-art {
    aspect-ratio: 2;
  }
  .paper-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Wide phones in landscape can exceed the compact width breakpoint. Keep the
   decorative ballot out of the touch layout instead of reserving a spare column. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .paper-footer-art {
    display: none;
  }
  .paper-footer-inner {
    min-height: 0;
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
  .paper-footer-top,
  .paper-footer-bottom {
    width: 100%;
  }
}

/* Keep the first watch tooltip inside the mobile clipping boundary. */
@media (max-width: 560px) {
  .paper-closing .paper-hero-apps > li:first-child .pk-tooltip {
    left: 0;
    transform: translateY(-4px) scale(0.96);
  }
  .paper-closing
    .paper-hero-apps
    > li:first-child
    .paper-app-icon:is(:hover, :focus-visible)
    .pk-tooltip {
    transform: translateY(0) scale(1);
  }
}

/* Mobile links and legal copy remain usable at normal reading size. Keep
   these changes scoped to Paper and below the approved desktop composition. */
@media (max-width: 1024px) {
  .paper-footer-col {
    gap: 0;
  }
  .paper-footer-col h3 {
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
  }
  .paper-footer-col a {
    display: flex;
    align-items: center;
    min-height: var(--control-hit-size);
    padding-block: 0.5rem;
    overflow-wrap: anywhere;
  }
  .paper-footer-brands {
    min-height: var(--control-hit-size);
  }
  .paper-footer-disclaimer {
    font-size: 0.75rem;
    line-height: 1.6;
  }
  .paper-page .paper-footer .theme-toggle {
    flex: 0 0 var(--control-hit-size);
    width: var(--control-hit-size);
    height: var(--control-hit-size);
  }
}
@media (max-width: 560px) {
  .paper-closing-credits {
    font-size: 0.875rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .paper-closing-watch,
  .paper-closing-watch h3 {
    max-width: 100%;
  }
  .paper-closing-story h2,
  .paper-closing-watch h3 {
    overflow-wrap: anywhere;
  }
  .paper-closing-date {
    flex-wrap: wrap;
  }
  .paper-footer-col:last-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .paper-footer-col:last-child h3 {
    grid-column: 1 / -1;
  }
  .paper-footer-legal-row {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .paper-footer-disclaimer {
    flex-basis: 100%;
  }
  .paper-page .paper-footer .theme-toggle {
    margin-left: auto;
  }
}
