/* ============================================================
   Priya Usai — Business Technology portfolio
   Minimalist black & white: off-white ground, heavy geometric
   sans headers, thin frame motif, tan/taupe accent bar.
   ============================================================ */

:root{
  --paper:#F4F4F1;
  --paper-2:#EAEAE5;
  --ink:#111111;
  --ink-soft:#444444;
  --tan:#B5A593;
  --line:rgba(17,17,17,.18);
  --maxw:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-weight:300;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
strong{font-weight:500}

/* ---------- headings ---------- */
.h{
  font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.02;
  letter-spacing:-.01em; color:var(--ink);
  display:flex; align-items:center; flex-wrap:wrap; gap:18px;
  margin-bottom:28px;
}
.h--light{ color:var(--paper) }
.bar{ display:block; height:7px; width:84px; background:var(--tan); flex:0 0 auto }
.sub{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:1.1rem;
  letter-spacing:.02em; margin-bottom:14px; display:flex; align-items:center; gap:12px;
}
.sub::before{ content:""; width:14px; height:14px; background:var(--ink); display:inline-block }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 30px; background:rgba(244,244,241,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__mark{
  font-family:"Archivo",sans-serif; font-weight:900; font-size:1.1rem;
  letter-spacing:.06em; color:var(--ink); text-decoration:none;
}
.nav__links{ display:flex; gap:24px }
.nav__links a{
  font-family:"Archivo",sans-serif; font-weight:500; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  text-decoration:none; transition:color .2s;
}
.nav__links a:hover{ color:var(--ink) }
.nav__toggle{ display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:6px }
.nav__toggle span{ width:24px; height:2px; background:var(--ink); display:block }

/* ---------- hero ---------- */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:90px 24px 40px;
}
.hero__frame{
  border:2px solid var(--ink); width:100%; max-width:1080px;
  aspect-ratio:16/9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:40px;
}
.hero__title{
  font-family:"Archivo",sans-serif; font-weight:900;
  font-size:clamp(2.6rem,11vw,8rem); line-height:.9;
  letter-spacing:-.02em; color:var(--ink);
}
.hero__rule{ width:min(58%,520px); height:3px; background:var(--ink); margin:18px 0 14px }
.hero__by{
  font-family:"Inter",sans-serif; font-weight:400;
  font-size:clamp(.9rem,2.4vw,1.4rem); letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- sections ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:110px 30px }
.section--alt{
  max-width:none; background:var(--paper-2);
  padding-left:max(30px,calc((100vw - var(--maxw))/2));
  padding-right:max(30px,calc((100vw - var(--maxw))/2));
}
.section--dark{
  max-width:none; background:var(--ink); color:var(--paper);
  padding-left:max(30px,calc((100vw - var(--maxw))/2));
  padding-right:max(30px,calc((100vw - var(--maxw))/2));
}
.section--dark p{ color:#cfcfca }
.sec-head{ margin-bottom:32px }
.sec-head--center{ text-align:center }
.sec-head--center .h{ justify-content:center }
.sec-lead{ max-width:62ch; font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--ink-soft); margin-bottom:42px }
.section--dark .sec-lead{ color:#cfcfca }

.sec-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:60px; align-items:center }
.sec-grid--reverse .sec-body{ order:2 }
.sec-grid--reverse .sec-figure,
.sec-grid--reverse .shifter-media,
.sec-grid--reverse .vayu-media{ order:1 }
.sec-body p{ color:var(--ink-soft); margin-bottom:18px }
.section--dark .sec-body p{ color:#cfcfca }

.sec-figure img{ width:100%; border:1px solid var(--line); box-shadow:0 20px 44px rgba(17,17,17,.12) }
.sec-figure--tall img{ max-height:78vh; width:auto; margin:0 auto }
.sec-figure figcaption,
.sheets-grid figcaption{
  font-family:"Archivo",sans-serif; font-weight:500; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:14px; text-align:center;
}

/* lists */
.skill-list, .feature-list{ list-style:none; margin:6px 0 18px }
.skill-list li, .feature-list li{
  position:relative; padding:7px 0 7px 26px; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.section--dark .feature-list li{ color:#cfcfca; border-color:rgba(255,255,255,.14) }
.skill-list li::before, .feature-list li::before{
  content:""; position:absolute; left:0; top:15px;
  width:9px; height:9px; background:var(--tan);
}

/* palette */
.palette{ display:flex; gap:10px; margin-top:24px }
.palette span{ width:42px; height:42px; border:1px solid rgba(255,255,255,.25) }

/* shifter media */
.shifter-media{ display:flex; flex-direction:column; gap:20px }
.shifter-logo img{ width:100%; background:#000; padding:0 }
.shifter-shoe img{ width:100% }

/* vayuapps media */
.vayu-media{ display:grid; grid-template-columns:1fr 0.7fr; gap:18px; align-items:start }
.vayu-ig img{ border:1px solid var(--line) }
.vayu-stack{ display:flex; flex-direction:column; gap:18px }
.vayu-stack img{ border:1px solid var(--line) }
.quote{
  font-family:"Archivo",sans-serif !important; font-weight:600;
  font-size:1.4rem !important; color:var(--ink) !important; margin-top:8px !important;
}

/* sheets */
.sheets-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center }
.sheets-grid img{ border:1px solid var(--line); background:#fff }

/* wide shot */
.wide-shot{ border:1px solid var(--line); background:#fff }
.wide-shot img{ width:100% }

/* links */
.link{
  display:inline-block; margin-top:12px;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; border-bottom:2px solid var(--tan); padding-bottom:3px;
  transition:border-color .25s;
}
.link:hover{ border-color:var(--ink) }

/* reflection */
.reflect{ max-width:900px; margin:0 auto }
.reflect__cols{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:30px }
.reflect__sub{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:1.15rem;
  letter-spacing:.02em; color:var(--paper); margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.reflect__sub::before{ content:""; width:24px; height:4px; background:var(--tan) }

/* footer */
.foot{ text-align:center; padding:90px 24px 70px; border-top:1px solid var(--line) }
.foot__name{
  font-family:"Archivo",sans-serif; font-weight:900;
  font-size:clamp(2rem,7vw,4rem); letter-spacing:-.01em; color:var(--ink);
}
.foot__meta{
  font-family:"Archivo",sans-serif; font-weight:400; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:14px;
}

/* reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in{ opacity:1; transform:none }

/* responsive */
@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(72vw,300px);
    flex-direction:column; gap:0; background:var(--ink);
    padding:90px 30px; transform:translateX(100%); transition:transform .4s var(--ease);
  }
  .nav__links.open{ transform:none }
  .nav__links a{ color:#fff; padding:14px 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.12) }
  .nav__toggle{ display:flex; z-index:61 }

  .sec-grid, .sec-grid--reverse{ grid-template-columns:1fr; gap:40px }
  .sec-grid--reverse .sec-body{ order:0 }
  .sec-grid--reverse .sec-figure,
  .sec-grid--reverse .shifter-media,
  .sec-grid--reverse .vayu-media{ order:0 }
  .sheets-grid, .reflect__cols{ grid-template-columns:1fr; gap:32px }
  .section{ padding:72px 24px }
  .hero__frame{ aspect-ratio:auto; min-height:60vh }
}
@media (max-width:480px){
  body{ font-size:17px }
  .palette span{ width:34px; height:34px }
  .vayu-media{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}