/* ─────────────────────────────────────────────────────────────────────────────
   The three legal pages: /legal, /privacy, /terms.

   Shared because they are one document set and must look like one. This is the
   only stylesheet on the estate kept in its own file rather than inlined per
   page — three near-identical copies of 200 lines is how two of them quietly
   stop matching the third.

   The type is bigger and the measure narrower than the rest of the site. These
   are read, not scanned, and by somebody who is either worried or obliged.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --purple-700:#241a2e;--purple-500:#3b2450;--purple-400:#522f6f;
  --night-900:#16131a;--night-800:#201c1b;
  --gold-500:#d8b66c;--gold-400:#e6c87f;--cream-100:#f1e6ce;
  --text-body:var(--cream-100);--text-muted:#bda9c9;--text-faint:#8d7a9a;
  --text-on-gold:var(--purple-500);--stroke-hairline:rgba(241,230,206,.22);
  --font-condensed:"Anton",Impact,system-ui,sans-serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --tracking-caps:.06em;--tracking-kicker:.14em;
  --radius-sm:3px;--radius-md:6px;--border-gold:2px solid var(--gold-500);
  --shadow-block:6px 6px 0 var(--purple-700);
  --shadow-focus:0 0 0 3px rgba(216,182,108,.45);--blur-panel:blur(14px);
  --container-lg:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--night-800);scroll-behavior:smooth}
body{background:linear-gradient(180deg,var(--purple-400) 0%,var(--purple-500) 18%,var(--purple-700) 44%,var(--night-800) 100%);
  background-attachment:fixed;color:var(--text-body);font:400 17px/1.7 var(--font-body);
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("/assets/img/grain.png");background-size:180px;opacity:.16;mix-blend-mode:overlay}
a{color:var(--gold-400)}
a:hover{color:var(--gold-500)}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font-condensed);font-weight:400;text-transform:uppercase;
  line-height:1.05;letter-spacing:var(--tracking-caps)}

/* ── nav, shared with every other page ── */
.o-mask{display:inline-block;background:var(--gold-500);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
  mask-size:contain;-webkit-mask-size:contain;mask-position:center;-webkit-mask-position:center}
.o-wordmark{-webkit-mask-image:url(/assets/img/oyofe-wordmark.png);mask-image:url(/assets/img/oyofe-wordmark.png)}
.o-emblem{-webkit-mask-image:url(/assets/img/oyofe-emblem.png);mask-image:url(/assets/img/oyofe-emblem.png)}
.o-bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:24px;padding:12px 56px;
  background:rgba(22,19,26,.72);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);
  border-bottom:1px solid var(--stroke-hairline)}
.o-bar-nav{display:flex;gap:20px;flex:1;flex-wrap:wrap}
.o-bar-nav a{font:400 12px/1 var(--font-condensed);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--cream-100);text-decoration:none}
.o-bar-nav a:hover{color:var(--gold-400)}
.o-bar-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.o-lang{display:flex;border:1px solid var(--stroke-hairline);border-radius:var(--radius-sm);overflow:hidden}
.o-lang button{background:none;border:0;padding:6px 9px;font:500 12px/1.35 var(--font-body);
  letter-spacing:var(--tracking-caps);color:var(--text-muted);cursor:pointer}
.o-lang button.on{background:var(--gold-500);color:var(--text-on-gold)}
@media (max-width:720px){.o-bar{padding:10px 20px;gap:14px}.o-bar-nav{display:none}}

/* ── the document ── */
.wrap{max-width:var(--container-lg);margin:0 auto;padding:0 56px}
@media (max-width:720px){.wrap{padding:0 20px}}
.doc{max-width:74ch;margin:0 auto;padding-bottom:100px}
.hero{padding:60px 0 0}
.kicker{font:700 12px/1.1 var(--font-condensed);letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;color:var(--gold-500)}
h1{margin:14px 0 16px;font-size:clamp(34px,6vw,58px);color:var(--gold-500);text-wrap:balance}
.updated{font:600 12px/1 var(--font-body);letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;color:var(--text-faint)}
.lede{margin-top:22px;font-size:18px;color:var(--cream-100)}

h2{margin:52px 0 14px;font-size:clamp(21px,3vw,27px);color:var(--gold-400);
  padding-top:18px;border-top:1px solid var(--stroke-hairline);text-wrap:balance}
h3{margin:30px 0 10px;font-size:17px;color:var(--cream-100);letter-spacing:.04em}
p{margin:0 0 16px;color:var(--text-muted)}
p strong,li strong{color:var(--cream-100);font-weight:600}
ul,ol{margin:0 0 18px;padding-left:0;list-style:none}
li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--text-muted)}
ul li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:5px;
  border-left:2px solid var(--gold-500);border-bottom:2px solid var(--gold-500);transform:rotate(-45deg)}
ol{counter-reset:n}
ol li{counter-increment:n}
ol li::before{content:counter(n) ".";position:absolute;left:0;top:0;
  font:600 14px/1.7 var(--font-body);color:var(--gold-500)}

/* the identification block — a table, because that is what it is */
.idcard{margin:24px 0 8px;border:var(--border-gold);border-radius:var(--radius-md);
  background:var(--purple-700);box-shadow:var(--shadow-block);overflow:hidden}
.idcard dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0}
.idcard dt,.idcard dd{padding:13px 20px;border-bottom:1px solid var(--stroke-hairline)}
.idcard dt{font:600 11px/1.5 var(--font-body);letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;color:var(--text-faint);background:rgba(0,0,0,.16)}
.idcard dd{color:var(--cream-100)}
.idcard dl>:nth-last-child(-n+2){border-bottom:0}
@media (max-width:560px){
  .idcard dl{grid-template-columns:1fr}
  .idcard dt{border-bottom:0;padding-bottom:0;background:none}
  .idcard dd{padding-top:4px}
}

/* Something only OYOFE can fill in. Deliberately loud: a legal notice that
   ships saying "XXXXXXXX" is worse than one that does not exist. */
.todo{display:inline-block;background:rgba(168,91,71,.22);border:1px dashed #d08e7c;
  color:#f0b9a9;padding:1px 8px;border-radius:var(--radius-sm);
  font:600 13px/1.6 var(--font-body);letter-spacing:.02em}

.callout{margin:26px 0;padding:20px 24px;border-left:4px solid var(--gold-500);
  background:rgba(216,182,108,.09);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.callout p:last-child{margin-bottom:0}
.callout.warn{border-left-color:#a85b47;background:rgba(168,91,71,.14)}

table.plain{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15.5px}
table.plain th,table.plain td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--stroke-hairline);
  vertical-align:top;color:var(--text-muted)}
table.plain th{font:600 11px/1.5 var(--font-body);letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;color:var(--gold-500)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.doclinks{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.doclinks a{font:400 13px/1 var(--font-condensed);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;text-decoration:none;color:var(--cream-100);
  border:1px solid var(--stroke-hairline);border-radius:var(--radius-sm);padding:11px 15px}
.doclinks a:hover{border-color:var(--gold-500);color:var(--gold-400)}
.doclinks a[aria-current]{background:var(--gold-500);color:var(--text-on-gold);border-color:var(--gold-500)}

footer{margin-top:80px;border-top:var(--border-gold);background:var(--night-900)}
.foot-in{max-width:var(--container-lg);margin:0 auto;padding:40px 56px 52px;
  display:flex;flex-direction:column;align-items:center;gap:16px}
@media (max-width:720px){.foot-in{padding:32px 20px 40px}}
.foot-logo{display:flex;align-items:center;gap:10px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.foot-links a{font:400 13px/1 var(--font-condensed);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--cream-100);text-decoration:none}
.foot-links a:hover{color:var(--gold-400)}
.foot-copy{font-size:12.5px;color:var(--text-faint);text-align:center}

/* Each language is a whole document rather than a bag of strings. Legal prose
   has to be readable in the source by whoever reviews it, and a paragraph
   assembled from twelve dictionary keys is not. */
/* SECTION, not [data-lang] — the language buttons carry data-lang too, and an
   unscoped rule hid two of the three, leaving a switcher with one button. */
section[data-lang]{display:none}
section[data-lang].on{display:block}

@media print{
  body{background:#fff;color:#000}
  body::after,.o-bar,footer,.o-lang,.doclinks{display:none!important}
  a{color:#000}
  h1,h2,h3{color:#000}
  p,li,td{color:#222}
  .idcard{border:1px solid #000;box-shadow:none;background:none}
  .idcard dt,.idcard dd{color:#000;background:none}
}