/* ============================================================
   Oren Meshi · Team Hub — shared brand design system
   Fonts / colors / backgrounds per core/brand (design-dna, brand-kit)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');

:root{
  --mint:#76C4BA;
  --mint-deep:#1d6b60;
  --beige:#C3B8B1;
  --ink:#2e3a3d;
  --body:#43504e;
  --muted:#8c8073;
  --paper-1:#efe7d8;
  --paper-2:#e7ddca;
  --paper-3:#f6f0e4;
  --card:#fffdf9;
  --frame:#e4dac7;
  --line:#ece4d4;
  --shadow:0 1px 2px rgba(70,55,35,.04);
  --radius:16px;
  --wrap:1040px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--body);
  line-height:1.55;
  background:
    radial-gradient(120% 70% at 88% -6%, rgba(118,196,186,.14), rgba(118,196,186,0) 46%),
    radial-gradient(90% 55% at 4% 106%, rgba(195,184,177,.26), rgba(195,184,177,0) 52%),
    linear-gradient(160deg, var(--paper-3) 0%, var(--paper-1) 45%, var(--paper-2) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
bdi{unicode-bidi:isolate}

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

/* ---------- eyebrow / labels ---------- */
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--mint-deep)}
.sec-label{display:flex;align-items:baseline;gap:11px;margin:0 0 16px}
.sec-label .he{font-size:19px;font-weight:800;color:var(--ink)}
.sec-label .en{font-size:9.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--beige)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(246,240,228,.82);
  border-bottom:1px solid var(--frame);
}
.topbar .row{display:flex;align-items:center;justify-content:space-between;height:58px}
.brandmark{display:flex;align-items:center;gap:9px}
.brandmark .dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}
.brandmark .name{font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
.brandmark .logo{height:30px;width:auto;display:block}
.topbar .back{font-size:12.5px;font-weight:600;color:var(--mint-deep);display:inline-flex;align-items:center;gap:6px}
.topbar .back svg{width:14px;height:14px}

/* ---------- hero ---------- */
.hero{padding:52px 0 30px}
.hero .kick{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.hero .kick .dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}
.hero .kick .t{font-size:10px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(34px,6vw,52px);font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.01em}
.hero .lead{margin-top:16px;font-size:clamp(15px,2.4vw,17px);color:var(--body);max-width:62ch}
.hero .rule{height:2px;width:120px;margin-top:22px;border-radius:2px;background:linear-gradient(90deg,var(--mint),rgba(118,196,186,0))}

/* ---------- category section ---------- */
.section{padding:26px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}

/* ---------- card ---------- */
.card{
  position:relative;display:block;
  background:var(--card);
  border:1px solid var(--frame);
  border-inline-start:4px solid var(--mint);
  border-radius:var(--radius);
  padding:20px 20px 18px;
  box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(70,55,35,.10);border-color:var(--mint)}
.card .c-eyebrow{font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--beige);margin-bottom:9px}
.card h3{font-size:20px;font-weight:800;color:var(--ink);line-height:1.15}
.card .c-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(118,196,186,.12);border:1px solid rgba(118,196,186,.32);
  color:var(--mint-deep);font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:20px;
}
.pill.neutral{background:rgba(195,184,177,.16);border-color:rgba(195,184,177,.5);color:var(--muted)}
.card .updated{margin-top:14px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.card .updated .live{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(118,196,186,.25)}

/* placeholder card (coming soon) */
.card.soon{border-inline-start-color:var(--beige);background:#fbf8f2;opacity:.9}
.card.soon h3{color:var(--muted)}
.card.soon .tag{font-size:11px;font-weight:700;color:var(--beige);letter-spacing:.06em}

/* ---------- footer ---------- */
footer.site{margin-top:40px;padding:26px 0 40px;text-align:center;border-top:1px solid var(--frame)}
footer.site .brand{font-size:10.5px;font-weight:700;letter-spacing:.38em;color:#9c9382;text-transform:uppercase}
footer.site .sub{margin-top:8px;font-size:11px;color:var(--muted)}

/* ---------- passcode gate ---------- */
#gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(118,196,186,.16), rgba(118,196,186,0) 55%),
    linear-gradient(160deg,var(--paper-3),var(--paper-2));
}
#gate .box{width:min(400px,88vw);background:var(--card);border:1px solid var(--frame);border-radius:20px;padding:34px 30px;text-align:center;box-shadow:0 10px 40px rgba(70,55,35,.12)}
#gate .logo{height:40px;width:auto;display:block;margin:0 auto 16px}
#gate .kick{font-size:10px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
#gate h2{font-size:26px;font-weight:800;color:var(--ink);margin:10px 0 4px}
#gate p{font-size:13px;color:var(--muted);margin-bottom:20px}
#gate input{width:100%;text-align:center;font-family:inherit;font-size:17px;letter-spacing:.08em;padding:13px 14px;border:1.5px solid var(--frame);border-radius:12px;background:#fffdf9;color:var(--ink);outline:none}
#gate input:focus{border-color:var(--mint)}
#gate button{width:100%;margin-top:12px;font-family:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--mint-deep);border:none;border-radius:12px;padding:13px;cursor:pointer;transition:background .15s}
#gate button:hover{background:#175a50}
#gate .err{min-height:18px;margin-top:10px;font-size:12.5px;color:#c0392b;font-weight:600}
body.locked{overflow:hidden}
body.locked .site-content{filter:blur(7px);pointer-events:none;user-select:none}

@media (max-width:560px){
  .topbar .row{height:52px}
  .hero{padding:34px 0 20px}
  .grid{grid-template-columns:1fr}
}