/* ============================================================
   Roham Soleimani — monochrome cinematic portfolio
   Pure black & white · Helvetica · light → dark
   ============================================================ */

:root {
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --ink:   #0a0a0a;   /* near-black */
  --paper: #f4f4f2;   /* warm-neutral off-white */
  --paper-2:#eceae6;
  --line-light: rgba(10,10,10,0.14);
  --line-dark:  rgba(244,244,242,0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--ink); color: var(--paper); }
body.is-dark ::selection { background: var(--paper); color: var(--ink); }

img { display: block; max-width: 100%; }

/* ---------- shared type ---------- */
.label {
  font-family: var(--mono);
  font-size: clamp(10px, 0.85vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.55;
}
.idx { font-family: var(--mono); }

.display {
  font-weight: 200;
  letter-spacing: -0.045em;
  line-height: 0.88;
  font-size: clamp(58px, 13.5vw, 240px);
}
.h-xl { font-weight: 200; letter-spacing: -0.04em; line-height: 0.92;
        font-size: clamp(44px, 9vw, 150px); }
.h-l  { font-weight: 250; letter-spacing: -0.03em; line-height: 0.98;
        font-size: clamp(34px, 5.5vw, 86px); }
.h-m  { font-weight: 300; letter-spacing: -0.02em; line-height: 1.05;
        font-size: clamp(26px, 3.4vw, 48px); }
.lead { font-weight: 300; line-height: 1.5; letter-spacing: -0.01em;
        font-size: clamp(19px, 2.1vw, 30px); }
.body { font-weight: 300; line-height: 1.62;
        font-size: clamp(16px, 1.25vw, 19px); }
em, .it { font-style: italic; }

/* ============================================================
   FIXED CHROME — auto-inverting via mix-blend-mode: difference
   ============================================================ */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 3vw, 34px) clamp(20px, 5vw, 60px);
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
}
.chrome a, .chrome .mono { pointer-events: auto; }
.brand { font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; letter-spacing: -0.01em;
         text-decoration: none; color: inherit; }
.brand span { opacity: 0.5; font-weight: 300; }
.nav { display: flex; gap: clamp(16px, 2.4vw, 34px); font-family: var(--mono);
       font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.nav a { color: inherit; text-decoration: none; opacity: 0.85; transition: opacity .3s; }
.nav a:hover { opacity: 0.4; }
@media (max-width: 640px){ .nav { display: none; } }

.progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%;
  z-index: 101; mix-blend-mode: difference; pointer-events: none;
}
.progress span { display: block; height: 100%; width: 0%; background: #fff;
                 transform-origin: left; }

/* scroll cue */
.cue { position: fixed; bottom: clamp(20px,3vw,36px); left: 50%; transform: translateX(-50%);
       z-index: 100; color:#fff; mix-blend-mode: difference; font-family: var(--mono);
       font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
       display:flex; flex-direction:column; align-items:center; gap:10px;
       transition: opacity .6s var(--ease); }
.cue .ln { width: 1px; height: 46px; background: #fff; transform-origin: top;
           animation: cueLn 2.4s var(--ease) infinite; }
@keyframes cueLn { 0%{transform:scaleY(0);opacity:0} 25%{opacity:1}
                   60%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);opacity:0;transform-origin:bottom} }

/* ============================================================
   LAYOUT
   ============================================================ */
section { position: relative; }
.wrap { width: 100%; max-width: 1500px; margin: 0 auto;
        padding-left: clamp(20px, 5vw, 60px); padding-right: clamp(20px, 5vw, 60px); }

.dark  { background: var(--ink);  color: var(--paper); }
.dark .label { opacity: 0.5; }

/* ---------- HERO ---------- */
.hero { min-height: 100svh; }
.hero-inner { min-height: 100svh; display: flex; flex-direction: column;
              padding-top: clamp(96px, 17vh, 180px); padding-bottom: clamp(34px, 8vh, 96px); }
.hero-top { margin-bottom: auto; }
.hero-bottom { margin-top: auto; }
.hero-name { display: block; }
.hero-name .ln { display:block; padding-bottom: 0.04em; }
.hero-name .ln i { display:block; font-style: normal; }

.hero-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
             gap: 30px; margin-top: clamp(28px, 5vh, 60px);
             border-top: 1px solid var(--line-light); padding-top: clamp(20px,2.4vw,30px); }
.hero-role { max-width: 26ch; }
.hero-loc  { text-align: right; }
.reveal-up { opacity: 1; }

/* ---------- PIN: portrait scale + light→dark ---------- */
.scene-portrait { height: 240vh; position: relative; }
.sp-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden;
             display: flex; align-items: center; justify-content: center; }
.sp-photo { position: relative; z-index: 2;
            width: clamp(220px, 34vh, 420px); aspect-ratio: 1/1;
            overflow: hidden; will-change: transform; background:#cdcdcd;
            clip-path: url(#cookieClip); -webkit-clip-path: url(#cookieClip); }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transform: scale(0.8); transform-origin: 50% 46%; }
.sp-grain { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.5;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
            mix-blend-mode: overlay; }
.sp-cap { position:absolute; z-index:5; color:#fff; mix-blend-mode: difference;
          font-family: var(--mono); font-size: 11px; letter-spacing:.25em; text-transform:uppercase; }
.sp-cap.tl { top: clamp(86px,16vh,150px); left: clamp(20px,5vw,60px); }
.sp-cap.br { bottom: clamp(80px,12vh,120px); right: clamp(20px,5vw,60px); text-align:right; }

/* ---------- SUMMARY (dark, static) ---------- */
.summary { padding: clamp(110px,22vh,260px) 0; }
.summary .label { display:block; margin-bottom: clamp(30px,5vh,60px); }
.sum-body { max-width: 24ch; font-weight: 250; }

/* ---------- CAREER ---------- */
.career { padding: clamp(90px,16vh,200px) 0; }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
            border-bottom: 1px solid var(--line-dark); padding-bottom: clamp(20px,2.4vw,30px);
            margin-bottom: clamp(50px,8vh,110px); }
.light .sec-head { border-color: var(--line-light); }
.sec-head .ttl { display:flex; align-items:baseline; gap: clamp(14px,1.6vw,24px); }

.roles { display: flex; flex-direction: column; }
.role { display: grid; grid-template-columns: 0.9fr 2.1fr 1fr; gap: clamp(18px,3vw,50px);
        align-items: start; padding: clamp(30px,4.4vh,52px) 0;
        border-top: 1px solid var(--line-dark); }
.light .role { border-color: var(--line-light); }
.role:last-child { border-bottom: 1px solid var(--line-dark); }
.light .role:last-child { border-color: var(--line-light); }
.role .when { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; opacity:.6;
              padding-top: .55em; }
.role .what .pos { font-weight: 300; letter-spacing: -0.02em; line-height:1.04;
                   font-size: clamp(24px, 3vw, 44px); }
.role .what .org { font-family: var(--mono); font-size: 11px; letter-spacing:.22em;
                   text-transform: uppercase; opacity:.55; margin-top: 14px; }
.role .desc { opacity: .72; padding-top:.4em; }
@media (max-width: 860px){
  .role { grid-template-columns: 1fr; gap: 14px; }
  .role .desc { padding-top: 4px; }
}

/* reveal rows — visible by default; JS adds a self-healing inline-style tween */
.ru { opacity: 1; }

/* ---------- BANKENU PIN ---------- */
.scene-bank { height: 240vh; position: relative; background: var(--ink); color: var(--paper); }
.sb-sticky { position: sticky; top:0; height: 100svh; overflow: hidden;
             display:flex; align-items:center; justify-content:center; }
.sb-word { font-weight: 200; letter-spacing: -0.05em; line-height: .85;
           font-size: clamp(56px, 14vw, 220px); white-space: nowrap; will-change: transform;
           position: relative; z-index:2; display:block; text-align:center;
           color: inherit; text-decoration: none; transition: opacity .3s; }
.sb-word:hover { opacity:.78; }
.sb-visit { display:inline-block; margin-top:26px; font-family:var(--mono); font-size:12px;
            letter-spacing:.22em; text-transform:uppercase; color:inherit; text-decoration:none;
            opacity:.7; border-bottom:1px solid currentColor; padding-bottom:3px; transition:opacity .3s; }
.sb-visit:hover { opacity:1; }
.sb-sub { position:absolute; z-index: 3; left:50%; transform: translateX(-50%);
          bottom: clamp(56px,10vh,120px); width:min(760px,86vw); text-align:center;
          will-change: opacity, transform; }
.sb-sub .lead { font-size: clamp(15px,1.5vw,21px); line-height:1.5; }
.sb-tag { position:absolute; top: clamp(86px,16vh,150px); left:50%; transform:translateX(-50%);
          font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
          opacity:.55; }

/* ---------- COMMUNITY ---------- */
.community { padding: clamp(90px,16vh,200px) 0; }
.comm-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,70px); margin-top: clamp(40px,7vh,90px); }
@media (max-width:780px){ .comm-grid{ grid-template-columns:1fr; gap:50px; } }
.comm-card .n { font-family:var(--mono); font-size:12px; letter-spacing:.2em; opacity:.5; }
.comm-card h3 { font-weight:300; letter-spacing:-0.025em; line-height:1.0; margin:18px 0 18px;
                font-size: clamp(28px,4vw,56px); }
.comm-card p { opacity:.72; max-width: 40ch; }

/* ---------- ROOTS (light) ---------- */
.roots { padding: clamp(90px,16vh,200px) 0; }
.disc { display:flex; flex-direction:column; }
.disc .row { display:flex; align-items:center; gap:clamp(16px,2.4vw,40px);
             padding: clamp(22px,3.4vh,40px) 0; border-top:1px solid var(--line-light); }
.disc .row:last-child { border-bottom:1px solid var(--line-light); }
.disc .yr { font-family:var(--mono); font-size:12px; opacity:.5; width: 90px; flex:none; letter-spacing:.06em; }
.disc .nm { font-weight:200; letter-spacing:-0.03em; font-size:clamp(30px,5.6vw,86px); line-height:.95; }
.disc .pl { margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
            text-transform:uppercase; opacity:.5; text-align:right; }
@media (max-width:680px){ .disc .pl{ display:none; } .disc .yr{ width:64px; } }

/* ---------- DETAILS (light) ---------- */
.details { padding: clamp(80px,13vh,170px) 0 clamp(90px,16vh,200px); }
.det-grid { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(24px,3vw,48px) clamp(20px,3vw,40px); }
.det-block { display:flex; flex-direction:column; gap: 16px; }
.det-block .label { margin-bottom: 4px; }
.col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-12{ grid-column: span 12; }
@media (max-width: 820px){ .col-4,.col-6 { grid-column: span 12; } }
.kv { display:flex; justify-content:space-between; gap:16px; padding: 12px 0;
      border-top: 1px solid var(--line-light); font-size: clamp(15px,1.3vw,18px); }
.kv:first-of-type{ border-top:0; }
.kv .v { opacity:.55; font-family:var(--mono); font-size: 13px; letter-spacing:.04em; text-align:right; }
.taglist { display:flex; flex-wrap:wrap; gap:10px; }
.tag { border:1px solid var(--line-light); border-radius:100px; padding:9px 16px;
       font-size: clamp(13px,1.1vw,15px); font-weight:300; }
.award { border:1px solid var(--line-light); padding: clamp(22px,3vw,34px); }
.award .h-m { margin-top: 12px; font-weight:200; }

/* ---------- CONTACT (dark finale) ---------- */
.scene-contact { height: 240vh; position: relative; background: var(--ink); color: var(--paper); }
.sc-sticky { position: sticky; top:0; height:100svh; overflow:hidden; display:flex;
             flex-direction:column; justify-content:center; }
.sc-sticky .wrap { width:100%; }
.contact-lead { opacity:.55; }
.mailto { display:block; text-decoration:none; color:inherit; font-weight:200;
          letter-spacing:-0.04em; line-height:.9; font-size: clamp(40px,9vw,160px);
          margin: clamp(20px,4vh,44px) 0; transition: opacity .4s; word-break: break-word; }
.mailto:hover { opacity:.55; }
.contact-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;
                border-top:1px solid var(--line-dark); padding-top: clamp(20px,2.4vw,30px); }
.contact-foot .links { display:flex; gap: clamp(20px,3vw,46px); flex-wrap:wrap; }
.contact-foot a { color:inherit; text-decoration:none; font-family:var(--mono);
                  font-size: 12px; letter-spacing:.16em; text-transform:uppercase; opacity:.8;
                  transition: opacity .3s; border-bottom:1px solid transparent; padding-bottom:2px; }
.contact-foot a:hover { opacity: .45; }
.contact-foot .colo { font-family:var(--mono); font-size:11px; letter-spacing:.16em;
                      text-transform:uppercase; opacity:.4; }

@media (prefers-reduced-motion: reduce){
  .ru { opacity:1 !important; transform:none !important; }
}