/* Duo Ark — shared design tokens & base styles.
   Loaded by index.html, about.html, start.html, project.html.
   Edit colors/fonts here once instead of in every page. */

:root{
  --ivory:#F3EFE7;
  --white:#FAF9F5;
  --esp:#211D1A;
  --taupe:#81766B;
  --bronze:#987B5D;
  --burg:#7F2424;
  --line:rgba(33,29,26,.14);
  --serif:'Poppins', 'Helvetica Neue', sans-serif;
  --sans:'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
}
html[dir="rtl"]{
  --serif:'Cairo', 'Poppins', sans-serif;
  --sans:'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--esp);font-family:var(--sans);font-weight:300;line-height:1.75;overflow-x:hidden;font-size:15px}
::selection{background:var(--burg);color:var(--white)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12}
.wrap{max-width:1360px;margin:0 auto;padding:0 5vw}

/* ---------- shared shell used by about.html / start.html / project.html ---------- */
/* (index.html defines its own nav/eyebrow variants and overrides these — safe by CSS cascade) */
.label{font-size:.68rem;font-weight:400;letter-spacing:.38em;text-transform:uppercase;color:var(--taupe)}
html[dir="rtl"] .label{letter-spacing:.16em;font-size:.8rem}
.sec-num{color:var(--taupe);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase}
html[dir="rtl"] .sec-num{letter-spacing:.12em;font-size:.8rem}
.muted{color:var(--taupe)}
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1)}
.rv.on{opacity:1;transform:none}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:flex-start;gap:40px;
padding:18px 5vw;background:rgba(243,239,231,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;direction:ltr}.logo img{height:30px;width:auto;display:block}
.nav-right{display:flex;gap:14px;align-items:center}
@media(max-width:640px){nav{gap:14px}}
.lang-btn,.back-btn{cursor:pointer;border:1px solid rgba(33,29,26,.25);background:transparent;color:var(--esp);
font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;padding:8px 18px;transition:.3s;display:inline-block}
.lang-btn:hover,.back-btn:hover{border-color:var(--burg);color:var(--burg)}
footer{border-top:1px solid var(--line);padding:28px 0;font-size:.7rem;color:var(--taupe)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .logo img{height:22px}