/* Loquin — shared styling for the standalone legal pages (privacy.html, terms.html).
   The marketing page (loquin.html) is deliberately one self-contained file; these two
   share a stylesheet instead, so the tokens can never drift apart between them.
   Token values are copied from loquin.html — if you change them there, change them here. */

:root{
  --ink:        #2F2A26;
  --oat:        #ECE5D6;
  --paper:      #F4EFE4;
  --stone:      #8A8272;
  --stone-text: #655C4D;
  --brick:      #8C4A38;
  --celadon:    #7FA290;
  --line:       #D9CFBC;
  --line-dark:  rgba(244,239,228,.16);

  --ff-display: "Marcellus", Georgia, serif;
  --ff-body:    "Karla", system-ui, -apple-system, sans-serif;

  --measure:  66ch;
  --content:  1200px;
  --pad:      clamp(1.5rem, 5vw, 3rem);
}

*, *::before, *::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--oat);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--celadon); color:var(--ink); }

.wrap{ width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--pad); }

h1,h2,h3{ font-family:var(--ff-display); font-weight:400; margin:0; letter-spacing:.02em; }
h1{ font-size:clamp(2.25rem, 5vw, 3.25rem); line-height:1.1; }
em, i{ font-style:normal; }   /* Marcellus has no italic — never fake it */

/* ---------- wordmark ---------- */
.mark{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ff-display); text-decoration:none; color:var(--ink); white-space:nowrap;
}
.mark__word{ font-size:1.35rem; text-transform:uppercase; letter-spacing:.16em; line-height:1; }
.mark__rule{ width:1px; height:1.15em; background:var(--stone); opacity:.55; }
.mark__descriptor{ font-size:.62rem; text-transform:uppercase; letter-spacing:.32em; color:var(--stone); line-height:1; }
.mark--stack{ flex-direction:column; align-items:flex-start; gap:.28rem; }
.mark--stack .mark__rule{ display:none; }
.mark--stack .mark__descriptor{ letter-spacing:.44em; font-size:.58rem; }
@media (max-width:400px){ .mark__rule, .mark__descriptor{ display:none; } }

/* ---------- header ---------- */
.hdr{
  background:var(--oat); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.1rem; }
.hdr__back{
  font-size:.9375rem; font-weight:500; letter-spacing:.02em;
  color:var(--stone-text); text-decoration:none; transition:color .2s ease;
}
.hdr__back:hover{ color:var(--ink); }

/* ---------- page body ---------- */
.legal{ padding-block:clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.legal__in{ max-width:72ch; }
.eyebrow{
  font-family:var(--ff-body); font-size:.75rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--stone-text);
  line-height:1.4; margin:0; display:block;
}
.eyebrow::after{
  content:""; display:block; width:64px; height:1px;
  background:var(--celadon); margin-top:14px; margin-bottom:1.4rem;
}
.updated{ font-size:.875rem; color:var(--stone-text); margin:1.1rem 0 0; }
.lede{ font-size:1.1875rem; line-height:1.6; margin-top:2rem; }

.prose{ margin-top:2.6rem; }
.prose h2{
  font-size:1.5rem; line-height:1.25;
  margin:2.8rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.125rem; margin:1.8rem 0 .5rem; }
.prose p{ margin:0 0 1.1em; max-width:var(--measure); }
.prose ul{ margin:0 0 1.2em; padding-left:1.1rem; max-width:var(--measure); }
.prose li{ margin-bottom:.5em; padding-left:.2rem; }
.prose li::marker{ color:var(--celadon); }
.prose a{ color:var(--brick); text-underline-offset:3px; }
.prose strong{ font-weight:600; }
.prose .note{ font-size:.875rem; color:var(--stone-text); max-width:var(--measure); }

/* Placeholder marker — every one must be gone before publish. Same contract as loquin.html. */
.fill{
  background:var(--brick); color:var(--paper); padding:0 .3em; border-radius:2px;
  font-family:var(--ff-body); font-size:.8em; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}

/* A callout for the one thing on each page people actually need to notice. */
.callout{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--celadon);
  border-radius:8px; padding:1.2rem 1.4rem; margin:0 0 1.6em; max-width:var(--measure);
}
.callout p:last-child{ margin-bottom:0; }

/* ---------- footer ---------- */
.ftr{ background:var(--ink); color:rgba(244,239,228,.6); padding-block:3.2rem 2.4rem; font-size:.875rem; }
.ftr__in{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; }
.ftr .mark{ color:var(--paper); }
.ftr .mark__descriptor{ color:rgba(244,239,228,.6); }
.ftr__tag{ margin-top:1rem; max-width:30ch; color:rgba(244,239,228,.6); }
.ftr a{ color:rgba(244,239,228,.6); text-decoration:none; transition:color .2s ease; }
.ftr a:hover{ color:var(--paper); }
.ftr__links{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.ftr__base{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.8125rem; color:rgba(244,239,228,.42);
}