/* =========================================================
   Yasmin Bassir — Portfolio
   Silent editorial system. The work speaks; the UI whispers.
   One typeface (Sora), one weight, three warm-achromatic values.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400&display=swap');

:root{
  /* Three values, warm undertone — no accent, ever. */
  --paper:   oklch(0.966 0.008 84);   /* warm off-white background */
  --paper-2: oklch(0.935 0.010 82);   /* recessed image field */
  --ink:     oklch(0.245 0.006 68);   /* warm near-black */
  --gray:    oklch(0.595 0.012 74);   /* warm mid-gray */
  --line:    oklch(0.865 0.008 82);   /* hairline divider */

  --maxw: 1320px;
  --pad: clamp(1.5rem, 5vw, 5.5rem);
  --gut: clamp(2rem, 5vw, 5rem);

  --ease: cubic-bezier(.22,.61,.36,1);

  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Sora', system-ui, sans-serif;
  font-weight:400;
  font-size:clamp(1rem, 0.55vw + 0.9rem, 1.12rem);
  line-height:1.62;
  letter-spacing:-0.002em;
  -webkit-text-size-adjust:100%;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---- Type registers ------------------------------------ */
.display{
  font-weight:300;
  line-height:0.92;
  letter-spacing:-0.035em;
  text-wrap:balance;
}
.title{
  font-weight:300;
  line-height:0.96;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
h1,h2,h3,h4{ font-weight:400; margin:0; }

.label{
  font-size:0.7rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gray);
  font-weight:400;
}

.lead{
  font-size:clamp(1.15rem, 1.3vw + 0.85rem, 1.6rem);
  line-height:1.5;
  letter-spacing:-0.012em;
  max-width:34ch;
  text-wrap:pretty;
}

.muted{ color:var(--gray); }
p{ text-wrap:pretty; }

/* Type-register classes are headings/leads: strip the UA paragraph margin
   (1em of their own — often large — font size) so they sit flush at the top
   of their box. This is what makes column items top-align in grids. Spacing
   between blocks is owned by layout (grid gap / section padding / explicit). */
.label, .lead, .lede, .statement, .summary, .hmw, .display, .title{ margin:0; }

/* ---- Layout -------------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(4.5rem, 10vw, 9rem); }
.divider{ border:0; border-top:1px solid var(--line); margin:0; }

/* generic link with quiet underline reveal */
.link{
  color:var(--ink);
  position:relative;
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .5s var(--ease), color .4s var(--ease);
}
.link:hover{ background-size:100% 1px; }
.link--static{ background-size:100% 1px; }
.link--static:hover{ color:var(--gray); }

/* ---- Header / nav -------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter:saturate(120%) blur(14px);
  -webkit-backdrop-filter:saturate(120%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--line); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:1.15rem var(--pad);
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
}
.wordmark{
  font-size:1.06rem; letter-spacing:-0.01em; white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:.06em;
}
.wordmark .dot{ color:var(--gray); }
.nav__links{ display:flex; gap:clamp(1.1rem, 2.5vw, 2.4rem); align-items:baseline; }
.nav__links a{
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray);
  transition:color .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a[aria-current="page"]{ color:var(--ink); }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav__toggle{
  display:none; position:relative; z-index:70;
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; margin:-12px -12px -12px 0; padding:0;
  align-items:center; justify-content:flex-end; color:var(--ink);
}
.nav__toggle .bars{ position:relative; display:block; width:24px; height:11px; }
.nav__toggle .bars::before,
.nav__toggle .bars::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .42s var(--ease), top .42s var(--ease), bottom .42s var(--ease);
}
.nav__toggle .bars::before{ top:0; }
.nav__toggle .bars::after{ bottom:0; }
.nav.is-open .nav__toggle .bars::before{ top:5px; transform:rotate(45deg); }
.nav.is-open .nav__toggle .bars::after{ bottom:5px; transform:rotate(-45deg); }

/* ---- Footer -------------------------------------------- */
.foot{ padding-block:clamp(3.5rem,7vw,6rem); border-top:1px solid var(--line); }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--gut);
  align-items:start;
}
.foot__name{ font-weight:300; letter-spacing:-0.03em; line-height:0.95;
  font-size:clamp(2rem, 5vw, 3.6rem); margin:0; }
.foot__col h4{ margin:0 0 0.9rem; }
.foot__col a{ display:block; color:var(--ink); width:fit-content; margin-bottom:.4rem; }
.foot__bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4rem); color:var(--gray); font-size:.78rem;
  letter-spacing:0.04em;
}
.foot__bottom a{ color:var(--gray); }
.foot__bottom a:hover{ color:var(--ink); }
@media (max-width:720px){
  .foot__grid{ grid-template-columns:1fr; gap:2.5rem; }
}

/* ---- Reveal animation ---------------------------------- */
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.is-in{ opacity:1; transform:none;
  transition:opacity 1s var(--ease), transform 1s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---- Image field utilities ----------------------------- */
.field{ background:var(--paper-2); overflow:hidden; }
figure{ margin:0; }
figcaption{ margin-top:.9rem; color:var(--gray); font-size:.84rem;
  letter-spacing:.01em; line-height:1.5; }

/* phone-screen frame for full-bleed app exports */
.screen{
  background:#0b0b0c; border-radius:18px; overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  aspect-ratio:804/1748;
}
.screen img{ width:100%; height:100%; object-fit:cover; }

/* ---- Mobile navigation (overlay menu) ------------------ */
@media (max-width:680px){
  .nav__toggle{ display:inline-flex; }
  /* backdrop-filter on an ancestor traps fixed children inside its box;
     drop it on mobile so the fixed overlay can cover the full viewport. */
  .nav{ backdrop-filter:none; -webkit-backdrop-filter:none;
    background:color-mix(in oklab, var(--paper) 93%, transparent); }
  .wordmark{ position:relative; z-index:70; }
  .nav__links{
    position:fixed; inset:0;
    background:var(--paper);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:clamp(1.2rem,4vw,1.8rem);
    padding:var(--pad);
    z-index:60;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
  }
  .nav.is-open .nav__links{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{
    font-size:clamp(1.6rem,7vw,2.2rem); letter-spacing:-0.01em; text-transform:none;
    color:var(--ink); font-weight:300;
    opacity:0; transform:translateY(10px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), color .35s var(--ease);
  }
  .nav.is-open .nav__links a{ opacity:1; transform:none; }
  .nav.is-open .nav__links a:nth-child(1){ transition-delay:.10s; }
  .nav.is-open .nav__links a:nth-child(2){ transition-delay:.16s; }
  .nav.is-open .nav__links a:nth-child(3){ transition-delay:.22s; }
  .nav.is-open .nav__links a:nth-child(4){ transition-delay:.28s; }
  .nav__links a[aria-current="page"]{ color:var(--gray); }
  body.nav-locked{ overflow:hidden; }
}
@media (max-width:680px) and (prefers-reduced-motion: reduce){
  .nav__links, .nav__links a{ transition:none; }
}