/* ============================================================
   NAFAS — Direction B · Alchemical Manuscript
   Shared design tokens + component classes
   ============================================================ */
:root{
  --ink: oklch(0.155 0.012 70);
  --ink-1: oklch(0.185 0.013 68);
  --ink-2: oklch(0.215 0.014 68);
  --ink-3: oklch(0.255 0.015 66);
  --bone: oklch(0.92 0.016 80);
  --bone-dim: oklch(0.76 0.02 78);
  --faint: oklch(0.56 0.018 76);
  --faint-2: oklch(0.44 0.016 74);
  --green: oklch(0.86 0.2 148);
  --green-dim: oklch(0.72 0.14 148);
  --green-deep: oklch(0.55 0.12 150);
  --hair: oklch(0.32 0.015 72);
  --hair-soft: oklch(0.26 0.013 70);
  --glow: 0 0 34px oklch(0.85 0.2 148 / 0.5);
  --maxw: 1180px;
  --serif: "Cormorant", Georgia, serif;
  --body: "Spectral", Georgia, serif;
  --ar: "Amiri", serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);-webkit-font-smoothing:antialiased;font-weight:300}
::selection{background:var(--green-dim);color:var(--ink)}
.ar{font-family:var(--ar)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* page background wash */
.bg-wash{
  background:
    radial-gradient(70% 50% at 50% -5%, oklch(0.28 0.05 150 / 0.16), transparent 60%),
    radial-gradient(120% 120% at 50% 130%, oklch(0.11 0.01 70), transparent 70%),
    var(--ink);
}

/* ---------- typography ---------- */
.serif{font-family:var(--serif)}
.eyebrow{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--green-dim)}
.kicker{font-family:var(--body);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:0;margin:0;text-wrap:balance}
.display{font-size:clamp(48px,6.5vw,92px);line-height:1.0}
.h2{font-size:clamp(34px,4.4vw,60px);line-height:1.05}
.h3{font-size:clamp(24px,2.6vw,34px);line-height:1.12}
.italic{font-style:italic}
em{font-style:italic;color:var(--green)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--bone-dim);font-weight:300}
.muted{color:var(--bone-dim)}
.dim{color:var(--faint)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(28px,5vw,64px)}
.section{padding:clamp(70px,9vw,128px) 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent)}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{font-family:var(--serif);font-weight:800;font-size:17px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:14px 32px;border-radius:1px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  border:1px solid transparent;transition:.25s;background:none;color:var(--bone)}
.btn-primary{background:var(--green);color:var(--ink);box-shadow:0 0 30px -10px var(--green)}
.btn-primary:hover{box-shadow:0 0 42px -4px var(--green);transform:translateY(-1px)}
.btn-ghost{border-color:var(--hair);color:var(--bone)}
.btn-ghost:hover{border-color:var(--green-dim);color:var(--green)}
.btn-sm{font-size:14px;padding:10px 20px}
.btn-lg{font-size:19px;padding:17px 40px}

/* ---------- pills / tags ---------- */
.pill{font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-dim);border:1px solid var(--hair);border-radius:999px;padding:5px 14px;display:inline-block}
.pill-solid{background:oklch(0.85 0.2 148 / 0.1);border-color:transparent}

/* ---------- cards ---------- */
.card{background:linear-gradient(var(--ink-1),var(--ink));border:1px solid var(--hair-soft);border-radius:3px}
.card-pad{padding:clamp(24px,3vw,40px)}
.card:hover{border-color:var(--hair)}

/* ---------- wordmark ---------- */
.mark{display:inline-flex;align-items:baseline;gap:12px;cursor:pointer}
.mark .lat{font-family:var(--serif);font-size:24px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--bone)}
.mark .ar{font-size:24px;color:var(--green-dim)}
/* logo placeholder hint */
.logo-slot{position:relative}
.logo-slot::after{content:"⌀ logo";position:absolute;top:-7px;right:-46px;font-family:var(--body);font-size:8px;letter-spacing:.1em;color:var(--faint-2);text-transform:uppercase;opacity:.55}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:oklch(0.155 0.012 70 / 0.72);border-bottom:1px solid var(--hair-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-family:var(--serif);font-weight:500;font-size:23.5px;letter-spacing:.04em;color:var(--bone-dim);white-space:nowrap}
.nav-links a:hover{color:var(--green)}

/* ---------- seal (alchemical) ---------- */
.seal{position:relative;display:flex;align-items:center;justify-content:center}
.seal .ring{position:absolute;border-radius:50%;border:1px solid var(--hair)}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@keyframes seal-spin-rev{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){.seal .spin{animation:none!important}.nf-spin{animation:none!important}}
.nf-spin{transform-origin:320px 320px;transform-box:view-box;animation:seal-spin 70s linear infinite}

/* ---------- placeholder imagery ---------- */
.ph{position:relative;background:
   repeating-linear-gradient(135deg, oklch(0.22 0.014 70) 0 10px, oklch(0.19 0.013 70) 10px 20px);
   border:1px solid var(--hair-soft);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ph::after{content:attr(data-label);font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:6px 12px;background:oklch(0.155 0.012 70 / 0.7);border-radius:2px}

/* ---------- field / inputs ---------- */
.field{width:100%;background:var(--ink-1);border:1px solid var(--hair);border-radius:2px;color:var(--bone);
  font-family:var(--body);font-size:17px;padding:14px 18px;outline:none;transition:.2s}
.field:focus{border-color:var(--green-dim);box-shadow:0 0 0 3px oklch(0.85 0.2 148 / 0.1)}
.field::placeholder{color:var(--faint-2)}

/* ---------- divider dot ---------- */
.dotrule{display:flex;align-items:center;gap:14px;color:var(--faint)}
.dotrule::before,.dotrule::after{content:"";flex:1;height:1px;background:var(--hair-soft)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--hair);border-radius:99px;border:3px solid var(--ink)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- screen switcher (prototype chrome) ---------- */
.switcher{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;
  display:flex;gap:4px;padding:6px;border-radius:999px;
  background:oklch(0.135 0.011 70 / 0.86);backdrop-filter:blur(16px);
  border:1px solid var(--hair);box-shadow:0 18px 50px -20px #000}
.switcher button{font-family:var(--body);font-size:12.5px;letter-spacing:.04em;color:var(--bone-dim);
  background:none;border:none;padding:8px 16px;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.switcher button:hover{color:var(--bone)}
.switcher button.on{background:var(--green);color:var(--ink);font-weight:500}
.switcher .sw-ar{font-family:var(--ar);font-size:13px;opacity:.7;margin-left:8px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr !important}
  .lib-grid{grid-template-columns:1fr !important;gap:32px !important}
  .sol-row{grid-template-columns:40px 1fr !important}
  .sol-row p{grid-column:2}
}
@media (max-width:680px){
  .grid-3,.grid-4{grid-template-columns:1fr !important}
  .nav-links{gap:18px}
  .nav-links a:not(:last-child){display:none}
  .switcher{max-width:94vw;overflow-x:auto}
}

/* ---------- platform nav ---------- */
.nf-navitem{display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;
  font-family:var(--body);font-size:16px;color:var(--bone-dim);padding:10px 12px;border-radius:3px;
  cursor:pointer;transition:.18s;text-align:left;margin-bottom:2px}
.nf-navitem:hover{background:oklch(0.21 0.014 68 / 0.6);color:var(--bone)}
.nf-navitem.on{background:oklch(0.85 0.2 148 / 0.1);color:var(--bone)}
.nf-navitem.on::before{content:"";position:absolute;left:0;width:3px;height:20px;background:var(--green);border-radius:0 3px 3px 0;margin-left:-14px}
.nf-member{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;border-top:1px solid var(--hair-soft);
  padding:18px 22px;cursor:pointer;transition:.18s;text-align:left}
.nf-member:hover{background:oklch(0.21 0.014 68 / 0.5)}
.nf-member.on{background:oklch(0.85 0.2 148 / 0.08)}
.nf-avatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;letter-spacing:.05em;color:var(--ink);background:var(--green-dim);font-weight:600}
@media (max-width:860px){
  .nf-side{position:fixed;left:0;top:0;z-index:80;transform:translateX(-100%);transition:.3s;box-shadow:30px 0 60px -30px #000}
  .nf-side.open{transform:none}
  .nf-search{display:none !important}
  .nf-menu-btn{display:inline-flex !important}
}
.nf-menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;
  background:none;border:1px solid var(--hair);border-radius:3px;color:var(--bone-dim);cursor:pointer}
.nf-backdrop{position:fixed;inset:0;z-index:70;background:oklch(0.1 0.01 70 / 0.6);backdrop-filter:blur(2px)}

/* ---------- breath orb ---------- */
@keyframes breathe{0%,100%{transform:scale(.74);opacity:.8}50%{transform:scale(1.04);opacity:1}}
@keyframes ring{0%,100%{transform:scale(.74);opacity:.15}50%{transform:scale(1.1);opacity:.45}}
@media (prefers-reduced-motion:reduce){#mini-breath{}}
@media (max-width:1080px){
  /* dashboard reflow: card wrappers dissolve, cards reorder into a smart 2-col grid */
  .nf-home{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:16px !important}
  .nf-home > div{display:contents !important}
  .nf-home .card{min-width:0}
  .nf-c-resume{order:1;grid-column:1/-1}
  .nf-c-intent{order:2;grid-column:1/-1}
  .nf-c-recs{order:3;grid-column:1/-1}
  .nf-c-breath{order:4;grid-column:auto}
  .nf-c-live{order:5;grid-column:auto}
  .nf-c-journey{order:6;grid-column:1/-1}
  /* recommendations: one swipeable row instead of a tall stack */
  .nf-recs{display:grid;grid-auto-flow:column;grid-auto-columns:236px;grid-template-columns:none !important;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .nf-recs::-webkit-scrollbar{display:none}
  .nf-recs > *{scroll-snap-align:start}
}
@media (max-width:680px){
  .nf-home-pad{padding:16px 16px 100px !important}
  .nf-topbar{padding:14px 16px !important}
  .nf-topbar h1{font-size:22px !important}
  .nf-c-resume .card-pad{padding:22px 20px !important}
  .nf-c-breath .card-pad, .nf-c-breath{padding:20px 14px}
  .nf-c-breath .serif{font-size:17px !important}
  .nf-c-live h3{font-size:19px !important}
  .nf-recs{grid-auto-columns:min(66vw,220px);margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px}
}
@media (max-width:400px){
  .nf-c-breath,.nf-c-live{grid-column:1/-1}
}
@media (max-width:620px){
  .nf-resume{grid-template-columns:1fr !important}
  .nf-resume-seal{display:none !important}
}

/* ---------- session ---------- */
@keyframes typing{0%,60%,100%{opacity:.3}30%{opacity:1}}
.nf-typing{animation:typing 1.2s ease-in-out infinite}
@media (max-width:760px){
  .nf-session{grid-template-columns:1fr !important}
  .nf-session-rail{display:none !important}
}
@media (max-width:640px){
  .nf-session-top{padding:10px 12px !important;gap:10px !important}
  .nf-session-top .serif{font-size:16px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nf-session-top .eyebrow{font-size:10px !important}
}

@media (max-width:720px){
  .nf-resi{grid-template-columns:1fr !important}
  .nf-feat{grid-template-columns:1fr !important}
  .nf-feat > a{min-height:220px !important}
  .grid-2-tb{grid-template-columns:1fr !important}
  .nf-tb-body{padding-left:0 !important}
  .nf-banner-item{font-size:15px}
  .btn-lg{font-size:16px;padding:14px 28px}
  .display{font-size:clamp(38px,11vw,52px)}
}

/* ---------- range ---------- */
.nf-range{-webkit-appearance:none;appearance:none;height:3px;background:var(--hair);border-radius:2px;outline:none}
.nf-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--green);
  box-shadow:0 0 18px -2px var(--green);cursor:pointer;border:none}
.nf-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--green);border:none;cursor:pointer;box-shadow:0 0 18px -2px var(--green)}

/* fade-up util */
/* reveal-on-scroll (transition-based so end-state is guaranteed visible) */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none !important}}

/* running announcement banner */
.nf-banner{display:block;overflow:hidden;white-space:nowrap;background:var(--green);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--hair-soft);margin-bottom:26px}
.nf-banner:hover .nf-banner-track{animation-play-state:paused}
.nf-banner-track{display:inline-block;padding:11px 0;animation:nfMarquee 30s linear infinite;will-change:transform}
.nf-banner-item{display:inline-block;font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.05em;color:var(--ink);padding-right:72px}
@keyframes nfMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.nf-banner-track{animation:none}}


/* ---------- wordmark dotted rule (fuchsia) ---------- */
.mark-rule{align-self:center;width:0;border-left:1px dotted var(--fuchsia);opacity:.75;margin:0 2px}

/* ---------- language toggle ---------- */
.lang-toggle{display:flex;align-items:center;gap:2px;border:1px solid var(--hair-soft);border-radius:2px;padding:2px;background:oklch(0.185 0.013 68 / .5)}
.lang-toggle button{font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);background:none;border:none;border-radius:1px;padding:5px 10px;cursor:pointer;line-height:1;transition:.22s}
.lang-toggle button:hover{color:var(--bone)}
.lang-toggle button.on{color:var(--ink);background:var(--bone)}
.lang-toggle button[lang="ar"]{font-family:var(--ar);font-size:14px;letter-spacing:0;padding:3px 10px 5px}
@media (max-width:600px){.lang-toggle button{padding:5px 8px}}

.nav-seal{display:flex;align-items:center;cursor:pointer;opacity:.9;transition:opacity .25s}
.nav-seal:hover{opacity:1}
.nav-sep{width:1px;height:22px;background:var(--hair-soft);margin:0 4px}
@media (max-width:980px){.nav-sep{display:none}}

.nav-right{display:flex;align-items:center;flex-shrink:0;margin-left:clamp(8px,1.5vw,24px)}
@media (max-width:980px){.nav-right{margin-left:auto}}

/* soft washing-wave announcement banner — black wave washing down from the top */
.nf-wave-banner{position:relative;display:block;overflow:hidden;height:70px;background:oklch(0.24 0.03 210);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--hair-soft);margin-bottom:16px}
.nf-wave-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px;font-family:var(--serif);font-weight:700;font-size:clamp(17px,2.4vw,26px);letter-spacing:.09em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity 1.9s ease}
.nf-wave-text.on{opacity:1}
.nf-wave{position:absolute;left:0;top:0;width:100%;height:210%;transform:translateY(-106%);animation:nfWash 5.2s ease-in-out infinite;will-change:transform;pointer-events:none;overflow:hidden}
.nf-wave svg{width:200%;animation:nfDrift 5.2s ease-in-out infinite alternate}
.nf-wave-a{color:#04070a}
.nf-wave-b{color:#04070a;opacity:.5;animation-delay:.24s}
.nf-wave-b svg{animation-direction:alternate-reverse}
@keyframes nfWash{0%{transform:translateY(-106%)}26%{transform:translateY(-2%)}36%{transform:translateY(-2%)}62%{transform:translateY(-106%)}100%{transform:translateY(-106%)}}
@keyframes nfDrift{from{transform:translateX(0)}to{transform:translateX(-30%)}}
@media (prefers-reduced-motion:reduce){.nf-wave{animation:none}.nf-wave svg{animation:none}.nf-wave-text{opacity:1;transition:none}}

/* logo animation — counter-rotating rings, firefly dots */
.nf-spin-rev{transform-origin:320px 320px;transform-box:view-box;animation:seal-spin-rev 85s linear infinite}
@keyframes nfFly{0%,100%{opacity:.25}50%{opacity:1}}
.nf-fly{animation:nfFly 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nf-spin-rev,.nf-fly{animation:none!important}}