/* ═══════════════════════════════════════════════════════════════════════════
   Fun-Tastic 悠樂長 · pages/privacy.css
   Page-only styles for /privacy/: one column, six statements, thirty seconds.
   Logical properties only; sizes in rem; line-heights from the per-language tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The hero is one column too, on the same axis as the statements under it. */
.page--privacy .privacy-hero .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
.page--privacy .privacy-hero .page-hero__text { max-inline-size: 42rem; }

/* <div class="privacy__list">
     <article class="privacy__item"> <span class="icon-circle …">icon</span> <div class="privacy__text"> <h2>…</h2> <p>…</p> </div> </article> × 6
   </div>
   A stack of tinted rows, each beginning with an icon in a circle: the dot row of the design system, grown up. */
.privacy__list { display: grid; gap: clamp(.75rem, 1.6vw, 1rem); }
.privacy__item {
  --hue: var(--orchid-deep);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 1rem + 1.8vw, 2.25rem);
  border-radius: var(--r-panel);
  background: var(--row);
}
.privacy__item--mint { --hue: var(--mint-deep); }
.page--privacy .privacy__icon { color: var(--hue); }
.privacy__text { flex: 1 1 15rem; display: grid; gap: .5rem; min-inline-size: 0; }
.privacy__title { font-size: var(--fs-sub); font-weight: var(--fw-sub); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
.privacy__text > p { max-inline-size: 30em; font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .1); }
/* The address stays in one piece: it moves to the next line whole, and breaks only where a whole line
   cannot hold it (a 320px screen at the largest text size). The padding makes it a 44px target; the
   equal negative margin keeps the line where it was. */
.privacy__text a[href^="mailto:"] {
  display: inline-block;
  max-inline-size: 100%;
  margin-block: -.5rem;
  padding-block: .5rem;
  overflow-wrap: anywhere;
}
@media (min-width: 40rem) {
  /* the title's first line sits level with the middle of the circle */
  .privacy__text { padding-block-start: calc((3.5rem - var(--fs-sub) * var(--lh-sub)) / 2); }
}