/* MyTsmall Designs — legal pages: privacy-policy.html, terms.html (page-legal.css)
   72px h1 left in the 1200px inner column (.ph/.ph-in from site.css); a 300px
   gutter holds the date beside the intro and is otherwise empty; the text
   column is 700–800px to its right. The body section keeps the shared .sec
   rhythm (120px top and bottom). Collapses to one column under 900px.
   Phones (320–430px): the h1 scales with clamp(), long tokens (the mailto
   address) may break anywhere, inline links get a 44px-tall tap area, and the
   gap between intro and body tightens.                                       */

/* ── hero: title, date, intro ── */
.lg-hero h1{margin-bottom:32px}
.lg-grid{display:grid;grid-template-columns:300px minmax(0,800px);align-items:start;overflow-wrap:anywhere}
.lg-grid>*{min-width:0}
.lg-date{font:400 16px/28px var(--body);color:var(--fg-2);padding-right:24px}
.lg-intro{max-width:800px}

/* ── text (second grid column; the gutter column is left empty) ── */
.lg-body .lg-text{grid-column:2}
.lg-text{display:grid;gap:48px;max-width:800px;min-width:0}
.lg-block{display:grid;gap:14px;max-width:700px;min-width:0;scroll-margin-top:110px}
.lg-block h2{font:400 20px/34px var(--sans);letter-spacing:-.01em;color:var(--fg)}
.lg-block p,.lg-block li{font:400 16px/28px var(--body);color:var(--fg-2)}
.lg-block p a,.lg-block li a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:text-decoration-color .3s}
.lg-block p a:hover,.lg-block li a:hover{text-decoration-color:var(--fg)}
.lg-block ul{display:grid;gap:8px}
.lg-block li{position:relative;padding-left:22px}
.lg-block li::before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--fg-2)}

/* ── motion: page-legal.js adds .reveal/.in to .lg-reveal (text rises a touch faster than cards) ── */
.lg-reveal.reveal{transition-duration:.7s}

/* ── responsive ── */
@media (max-width:1180px){
  .lg-grid{grid-template-columns:240px minmax(0,1fr)}
}
@media (max-width:900px){
  /* site.css fixes .ph h1 at 44px here; on a 280px column "Privacy Policy" needs to scale */
  .lg-hero h1{font-size:clamp(34px,9.5vw,44px);line-height:1.14;margin-bottom:20px}
  .lg-grid{grid-template-columns:1fr;row-gap:16px}
  .lg-date{padding-right:0}
  .lg-body .lg-text{grid-column:auto}
  .lg-text{gap:36px}
  .lg-block{scroll-margin-top:90px}
  /* inline prose links: a 44px-tall hit area that leaves the text and focus ring untouched */
  .lg-block p a,.lg-block li a{position:relative}
  .lg-block p a::after,.lg-block li a::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
}
@media (max-width:560px){
  .lg-intro{font-size:18px;line-height:27px}
  .lg-body{padding-top:64px}
  .lg-text{gap:32px}
  .lg-block h2{font-size:18px;line-height:28px}
  .lg-block p,.lg-block li{font-size:15px;line-height:26px}
}