/* ==============================================================================
  LEGAL — privacy.html and terms.html

  Their own sheet, and deliberately not pavilion.css. Those two documents are
  prose at a readable measure with a back link and a rule; they need the brand
  palette, the font roles and the box-sizing reset, all of which live in
  00-shared.css, and none of the site's sections, overlays, rails or canvas
  engines. Handing them the whole cascade would mean every future change to a
  villa panel had to be checked against a page that has none.

  Same reasoning the two iframes use — see the note at the top of map.html.
   ============================================================================== */

body.legal{
  margin:0;
  background:var(--navy-950);
  color:var(--ivory);
  font-family:var(--f-firma);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* ── the way back ─────────────────────────────────────────────────────────
   The site's nav is a scroll-driven bar with a language menu, a 360 viewer
   and a register button, none of which belongs on a legal page. One link
   home is the whole requirement. */
.legal__top{
  padding:clamp(20px,4vh,34px) clamp(20px,5vw,72px);
  border-bottom:1px solid var(--hair);
}
.legal__back{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-sub);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute);text-decoration:none;
  transition:color .35s var(--e);
}
.legal__back:hover{color:var(--gold-400)}
.legal__back svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--e2);
}
.legal__back:hover svg{transform:translateX(-3px)}

/* ── the document ─────────────────────────────────────────────────────────
   A measure, not a container width. Legal text is read line by line and 68
   characters is about the limit before the eye loses its place returning. */
.legal__doc{
  max-width:68ch;
  margin:0 auto;
  padding:clamp(40px,8vh,84px) clamp(20px,5vw,40px) clamp(60px,12vh,120px);
}
.legal__eyebrow{
  font-family:var(--f-sub);font-size:10.5px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint);margin:0 0 18px;
}
.legal__doc h1{
  font-family:var(--f-firma);font-weight:300;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(2rem,4.4vw,3.2rem);margin:0 0 14px;
}
.legal__meta{
  font-size:14px;line-height:1.6;color:var(--mute);margin:0 0 8px;
}
.legal__doc h2{
  font-family:var(--f-firma);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.25;
  margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--hair-2);
}
.legal__doc p{
  font-size:15.5px;line-height:1.72;color:var(--mute);margin:0 0 14px;
}
.legal__doc a{color:var(--gold-400)}

/* ── the two states a draft paragraph can be in ───────────────────────────
   Loud on purpose, both of them. A legal page that ships with placeholder
   text in it is a worse outcome than one that is obviously unfinished, so
   neither of these is allowed to look like finished copy. */
.legal__draft{
  margin:0 0 40px;padding:16px 18px;border-radius:10px;
  border:1px solid rgba(233,212,161,.45);background:rgba(233,212,161,.07);
  font-size:14px;line-height:1.6;color:var(--sand,#E9D4A1);
}
.legal__draft b{font-weight:600}
.legal__draft em{font-style:italic}
.legal__todo{
  border-inline-start:2px solid rgba(233,212,161,.5);
  padding-inline-start:14px;
  color:var(--faint);font-style:italic;
}

.legal__foot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:68ch;margin:0 auto;
  padding:22px clamp(20px,5vw,40px) clamp(40px,8vh,70px);
  border-top:1px solid var(--hair);
  font-family:var(--f-sub);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.legal__foot nav{display:flex;gap:20px}
.legal__foot a{color:var(--faint);text-decoration:none;transition:color .35s var(--e)}
.legal__foot a:hover{color:var(--gold-400)}