/* Avex Barber — legal & utility pages.
   Shares the Ink & Brass tokens and the self-hosted faces already used by
   landing.css, so the policy pages read as part of the same site instead of
   the unstyled system-font documents they were. Fonts are referenced with
   ../fonts/ because this file lives one level down in assets/. */

@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-ExtraBold.ttf') format('truetype'); font-weight:800 900; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); font-weight:500 600; font-display:swap; }

:root{
  --ink:#0C0D13; --surface:#14151E; --surface-raised:#1C1D28;
  --hairline:rgba(255,255,255,.08); --outline:#33344A;
  --brass:#C9A45C; --brass-light:#D8B871; --brass-text:#E6CD92; --on-brass:#160F04;
  --text:#F4F2EC; --text-2:#A7A6B4; --text-3:#82828F;
  --gold-grad:linear-gradient(180deg,#D8B871,#C9A45C);
  --measure:68ch;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  /* A very low-contrast brass wash at the top, the same trick the landing
     uses so the page does not start as a flat black rectangle. */
  background-image:radial-gradient(120% 60% at 50% 0%, rgba(201,164,92,.07), transparent 60%);
  background-repeat:no-repeat;
}
:lang(ar) body, [dir=rtl] body{ font-family:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif; }

/* ---------- shell ---------- */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 22px}

.site-head{
  border-bottom:1px solid var(--hairline);
  padding:26px 0 20px;
  margin-bottom:38px;
}
.site-head .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.brand img{width:44px;height:auto;display:block}
.brand .name{font-weight:800;letter-spacing:.02em;font-size:1.06rem;line-height:1.15}
.brand .sub{
  display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-text);
}

/* language switcher */
.languages{margin-inline-start:auto;font-size:.86rem;color:var(--text-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.languages a{color:var(--text-2);text-decoration:none;padding:4px 9px;border-radius:999px;border:1px solid transparent}
.languages a:hover{color:var(--text);border-color:var(--outline)}
.languages strong{color:var(--on-brass);background:var(--gold-grad);padding:4px 10px;border-radius:999px;font-weight:700}
.languages .sep{color:var(--outline)}

/* ---------- content ---------- */
main{padding-bottom:56px}

h1{
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.4rem);
  font-weight:800;line-height:1.15;letter-spacing:-.015em;
  margin:0 0 10px;
}
h2{
  font-size:1.16rem;font-weight:700;color:var(--brass-text);
  margin:2.4em 0 .6em;padding-top:1.1em;border-top:1px solid var(--hairline);
  letter-spacing:.005em;
}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:1rem;font-weight:700;margin:1.8em 0 .4em}

p{margin:0 0 1.05em;color:var(--text-2)}
strong{color:var(--text);font-weight:700}
li{margin-bottom:.55em;color:var(--text-2)}
ul,ol{padding-inline-start:1.25em}
li::marker{color:var(--brass)}

a{color:var(--brass-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brass-light)}

/* "Effective date" line */
.updated{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 2.4em;
}

/* primary action (support / delete-account pages) */
.action{
  display:inline-block;background:var(--gold-grad);color:var(--on-brass);
  font-weight:700;text-decoration:none;padding:14px 22px;border-radius:12px;
  border:0;transition:transform .12s ease,filter .12s ease;
}
.action:hover{color:var(--on-brass);filter:brightness(1.05)}
.action:active{transform:scale(.985)}

.note{color:var(--text-3);font-size:.93rem}

/* callout used by delete-account / email-confirmed */
.card{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:16px;padding:22px 24px;margin:1.6em 0;
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--hairline);
  padding:34px 0 46px;margin-top:20px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.012));
}
.site-foot .wrap{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.site-foot img.wordmark{width:132px;height:auto;opacity:.9}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:.9rem}
.foot-links a{color:var(--text-2);text-decoration:none}
.foot-links a:hover{color:var(--brass-text);text-decoration:underline}
.copyright{color:var(--text-3);font-size:.82rem;margin:0}

/* ---------- responsive ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .site-head{padding:20px 0 16px;margin-bottom:28px}
  .site-head .wrap{gap:12px}
  .languages{margin-inline-start:0;width:100%}
  .brand img{width:38px}
}

/* Respect the OS setting rather than forcing motion on anyone. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* The palette is deliberately dark-only — it is the brand. Printing a dark
   page wastes ink and reads badly, so print gets an inverted, plain sheet. */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .site-head,.site-foot,.languages{display:none}
  a{color:#000}
  h2{color:#000;border-top:1px solid #ccc}
  p,li{color:#222}
}

/* contact block in the footer — placed above the legal links so someone who
   needs a human does not have to read past the boilerplate to find one */
.site-foot .contact{
  margin:0;font-size:.9rem;line-height:1.9;color:var(--text-2);text-align:center;
}
.site-foot .contact strong{
  display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-text);margin-bottom:4px;
}
.site-foot .contact a{color:var(--brass-text);text-decoration:none}
.site-foot .contact a:hover{text-decoration:underline}