/* YUVALTY · design system v0.1 (proposal, taken from Yuval's deck; awaiting official brand book) */
:root{
  --ink:#1C1D17;        /* deck background: olive-black */
  --ink-2:#25261F;
  --ink-3:#30312A;
  --cream:#ECE3D4;      /* deck text */
  --paper:#F5F0E7;      /* reading surface */
  --paper-2:#EBE4D7;
  --text:#22231C;
  --muted:#66604F;
  --muted-dark:#A59E8E;
  --line:#D9D0C0;
  --line-dark:#3A3B33;
  --brass:#A88A5A;      /* single accent, proposal */
  --brass-soft:#E7DCC6;
  --brass-text:#735C33; /* brass for small text on light surfaces (AA 5.6:1) */
  --good:#4E6B4A; --bad:#8E3B2F; --warn:#9A7A2E;
  --serif:"Frank Ruhl Libre","Times New Roman",serif;
  --sans:"Assistant","Heebo",system-ui,sans-serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
  --r:2px; --gutter:clamp(16px,4vw,48px);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.latin{font-family:var(--latin);letter-spacing:.32em;text-transform:uppercase}
.eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;font-weight:600}
.num{font-family:var(--latin);font-weight:300;font-size:clamp(44px,6vw,72px);line-height:1;color:var(--brass)}
.dark{background:var(--ink);color:var(--cream)}
.dark .eyebrow{color:var(--muted-dark)}
.src{font-size:13px;color:var(--muted);font-style:normal}
.dark .src{color:var(--muted-dark)}
.placeholder{border:1px dashed var(--brass);background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(168,138,90,.06) 10px 20px);color:var(--muted);padding:14px 16px;font-size:15px;border-radius:var(--r)}
.dark .placeholder{color:var(--muted-dark)}
.placeholder b{color:var(--brass)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:16px;padding:14px 28px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;text-decoration:none;border-radius:var(--r);transition:background .25s,color .25s}
.btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn.solid:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.ink:hover{background:var(--brass);border-color:var(--brass)}
.btn:hover{background:rgba(168,138,90,.12)}
.btn.sm{padding:8px 16px;font-size:14px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(28,29,23,.94);backdrop-filter:blur(6px);color:var(--cream);border-bottom:1px solid var(--line-dark)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.wordmark{font-family:var(--latin);letter-spacing:.42em;font-size:18px;text-decoration:none;white-space:nowrap}
.topbar nav{display:flex;gap:24px;font-size:15px}
.topbar nav a{text-decoration:none;opacity:.8}
.topbar nav a:hover{opacity:1}
@media(max-width:820px){.topbar nav{display:none}}

/* proto banner */
.proto{background:var(--brass);color:var(--ink);font-size:13px;text-align:center;padding:6px 16px;font-weight:600}

/* claims */
.claim{border-inline-start:2px solid var(--line);padding:6px 14px;margin:8px 0;font-size:16px}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;padding:1px 8px;margin-inline-end:8px;border-radius:20px;border:1px solid}
.tag.stable{color:var(--good)}.tag.verify{color:var(--warn)}.tag.exp{color:var(--brass)}

/* edit mode: sources, claims and production notes are for the team only (Omer 21/10) */
body:not(.edit) .src, body:not(.edit) .internal{display:none!important}
body.edit .internal{outline:1px dashed var(--brass);outline-offset:6px}
.edit-toggle[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass)}

/* motion */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}
}