/* =============================================================================
   WHITELY — legal pages (privacy, cookies)

   Same grid and same type as the rest of the site, but tuned for reading
   rather than for effect: a single measured column, generous leading, and
   numbered sections a person can cite over the phone ("section 6, retention").

   Nothing on these pages animates in. A policy that fades in as you scroll is
   a policy someone can plausibly claim they never saw.
   ========================================================================== */

.legal{ padding-block:clamp(6.5rem,10vw,9rem) clamp(4rem,7vw,7rem); }

/* ---------- masthead ----------------------------------------------------- */
.legal__hd{ border-bottom:1px solid var(--rule); padding-bottom:clamp(2rem,4vw,3rem); }
.legal__hd h1{
  font-size:var(--t-h2); line-height:.98; letter-spacing:-.04em;
  text-transform:uppercase; margin-top:1.1rem; max-width:18ch;
}
.legal__intro{
  margin-top:1.6rem; font-size:var(--t-lead); line-height:1.5;
  color:var(--ink-60); max-width:56ch;
}
.legal__dates{
  margin-top:2rem; display:flex; flex-wrap:wrap; gap:.6rem 2.4rem;
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}

/* ---------- table of contents -------------------------------------------- */
.legal__toc{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.1rem 2rem;
}
.legal__toc a{
  display:flex; gap:.9rem; align-items:baseline;
  padding-block:.55rem; font-size:.875rem; color:var(--ink-60);
  border-bottom:1px solid var(--rule-soft);
  transition:color .3s var(--ease);
}
.legal__toc a:hover{ color:var(--ink); }
.legal__toc i{
  font-family:var(--f-mono); font-style:normal; font-size:var(--t-micro);
  letter-spacing:.14em; color:var(--ink-60); flex:none;
}

/* ---------- body --------------------------------------------------------- */
.legal__body{ margin-top:clamp(3rem,6vw,5rem); }

.legal__sec{
  display:grid; grid-template-columns:6rem minmax(0,68ch);
  gap:0 var(--col-gap);
  padding-block:clamp(2rem,3.5vw,2.8rem);
  border-top:1px solid var(--rule);
  scroll-margin-top:6rem;
}
.legal__sec > i{
  font-family:var(--f-mono); font-style:normal; font-size:var(--t-micro);
  letter-spacing:.16em; color:var(--ink-60); padding-top:.45rem;
}
.legal__sec > div{ min-width:0; }
.legal__sec h2{
  font-size:var(--t-h3); letter-spacing:-.03em; text-transform:uppercase;
  margin-bottom:1.1rem;
}
.legal__sec h3{
  font-family:var(--f-display); font-size:1rem; font-weight:500;
  letter-spacing:-.01em; margin:1.8rem 0 .6rem;
}
.legal__sec p{ margin-bottom:1rem; line-height:1.65; color:var(--ink); }
.legal__sec p:last-child{ margin-bottom:0; }
.legal__sec a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.legal__sec a:hover{ color:var(--ember-ink); }
.legal__sec strong{ font-weight:500; }

.legal__sec ul{ margin:0 0 1rem; padding:0; list-style:none; }
.legal__sec li{
  position:relative; padding-left:1.3rem; margin-bottom:.55rem;
  line-height:1.6;
}
.legal__sec li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--ember);
}

@media (max-width:820px){
  .legal__sec{ grid-template-columns:1fr; }
  .legal__sec > i{ padding-top:0; margin-bottom:.7rem; display:block; }
}

/* ---------- tables ------------------------------------------------------- */
.legal__tbl{ overflow-x:auto; margin-bottom:1.2rem; }
.legal__tbl table{
  width:100%; min-width:34rem;
  border-collapse:collapse; font-size:.8125rem;
}
.legal__tbl th{
  text-align:left; font-family:var(--f-mono); font-weight:400;
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60);
  padding:.65rem .9rem .65rem 0; border-bottom:1px solid var(--rule);
  vertical-align:bottom;
}
.legal__tbl td{
  padding:.8rem .9rem .8rem 0; border-bottom:1px solid var(--rule-soft);
  vertical-align:top; line-height:1.5;
}
.legal__tbl tr td:first-child{ font-weight:500; white-space:nowrap; }
.legal__tbl code{
  font-family:var(--f-mono); font-size:.75rem;
  background:var(--bone-3); padding:.1rem .35rem; white-space:nowrap;
}

/* ---------- callout ------------------------------------------------------ */
.legal__note{
  border-left:2px solid var(--ember);
  background:var(--ember-wash);
  padding:1.05rem 1.2rem;
  margin-bottom:1.2rem;
  font-size:.875rem; line-height:1.6;
}
.legal__note b{
  display:block; font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember-ink);
  margin-bottom:.45rem; font-weight:400;
}

/* ---------- contact block ------------------------------------------------ */
.legal__card{
  border:1px solid var(--rule); padding:1.3rem 1.4rem;
  display:grid; gap:.55rem; font-size:.875rem; line-height:1.5;
}
.legal__card dt{
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}
.legal__card dd{ margin:0 0 .5rem; }
.legal__card dd:last-child{ margin-bottom:0; }

/* ---------- language blocks ---------------------------------------------- */
/* Greek is in the markup and visible without JavaScript. English is hidden
   until asked for — a legal page must be readable with scripting off. */
[data-lang='en']{ display:none; }
html.lang-en [data-lang='el']{ display:none; }
html.lang-en [data-lang='en']{ display:block; }

/* ---------- back to top -------------------------------------------------- */
.legal__back{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.4rem;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
}
.legal__back a,.legal__back button{ color:var(--ink-60); }
/* the eyebrow above the page title reads as a heading, so it earns the same
   contrast as one */
.legal .label,.legal__hd .label{ color:var(--ink-60); }
.legal__back a:hover,.legal__back button:hover{ color:var(--ember-ink); }