/* SHAJEDUL KABIR RAFI — HERO 00
   Bespoke luxury editorial art direction. This is deliberately NOT a terminal/IDE theme.
   The two visual assets never contain site text. All lettering is real HTML.
*/
:root {
  color-scheme: dark;
  --ink: #0a0708;
  --ink-wine: #130809;
  --surface: #1e1312;
  --burgundy: #501615;
  --cream: #e4ccaf;
  --sand: #c1af9d;
  --taupe: #a68c7b;
  --red: #b85e55;
  --fine-rule: rgba(228,204,175,.25);
  --display: 'Big Shoulders Display', 'Noto Sans Display ExtraCondensed', 'Noto Sans Display', Impact, 'Arial Narrow', sans-serif;
  --serif: 'Instrument Serif', 'Noto Serif Display', Georgia, serif;
  --ui: 'Instrument Sans', 'Noto Sans', Arial, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; background: var(--ink); }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--cream); font-family: var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
a:focus-visible,summary:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; }
::selection { background: var(--burgundy); color: var(--cream); }
.skip-link { position: fixed; z-index: 99; top: 12px; left: 12px; padding: 13px 18px; background: var(--cream); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.portfolio-shell { position: relative; isolation: isolate; min-height: 100svh; overflow: clip; background: var(--ink); }
.portfolio-shell__atmosphere { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,5,5,.23),transparent 28%,transparent 73%,rgba(8,5,5,.46)), url('https://res.cloudinary.com/wujcxa24/image/upload/f_auto,q_auto:good,c_limit,w_1672/v1792672486/hero-atmosphere.webp') center top / cover no-repeat; }
.portfolio-shell__atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7,4,5,.08), transparent 36%, rgba(7,4,5,.36) 74%, #0a0708 100%); }
.portfolio-shell__texture { position: absolute; z-index: 20; inset: 0; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.19' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

/* HEADER — a slim publication masthead */
.site-header { position: relative; z-index: 30; height: 94px; padding: 0 clamp(20px, 3.7vw, 74px); }
.site-header__topline { height: 1px; width: 100%; background: var(--fine-rule); position: absolute; top: 0; left: 0; }
.site-header__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid var(--fine-rule); }
.site-logo { display: inline-flex; align-items: center; justify-self: start; gap: 14px; width: max-content; text-decoration: none; }
.site-logo__symbol { font: 66px/.6 var(--serif); letter-spacing: -.14em; text-transform: lowercase; transform: translateY(-4px); }
.site-logo__period { color: var(--red); }
.site-logo__caption { font-weight: 600; font-size: 9px; line-height: 1.5; letter-spacing: .23em; }
.site-header__folio { font: 500 9px/1.4 var(--ui); letter-spacing: .27em; color: var(--sand); margin: 0; white-space: nowrap; }
.micro-star { display: inline-block; font-size: 13px; color: var(--red); padding: 0 12px; transform: translateY(1px); }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.3vw, 42px); }
.site-nav > a { position: relative; font-size: 10px; font-weight: 600; white-space: nowrap; letter-spacing: .16em; text-decoration: none; padding: 12px 0; transition: color .25s ease; }
.site-nav > a:not(.site-nav__contact)::after { content: ''; height: 1px; width: 0; position: absolute; left: 0; bottom: 7px; background: var(--red); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.site-nav > a:hover { color: var(--red); }
.site-nav > a:hover::after,.site-nav > a:focus-visible::after { width: 100%; }
.site-nav a span { color: var(--red); font-size: 12px; padding-left: 3px; }
.site-nav .site-nav__contact { border: 1px solid rgba(228,204,175,.43); padding: 14px 17px; transition: background .24s, border-color .24s, color .24s; }
.site-nav .site-nav__contact:hover { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.mobile-menu { display: none; }

/* CENTER STAGE */
.hero { position: relative; z-index: 1; }
.hero__stage { position: relative; isolation: isolate; height: max(680px, calc(100svh - 167px)); max-height: 1040px; min-height: 680px; margin: 0 auto; overflow: hidden; --portrait-x: 0px; --portrait-y: 0px; --type-x: 0px; --type-y: 0px; --orb-x: 0px; --orb-y: 0px; --scroll-portrait: 0px; --scroll-title: 0px; --scroll-orb: 0px; }
.hero__grid-lines { position: absolute; z-index: 0; inset: 0 clamp(20px,3.7vw,74px); pointer-events: none; }
.hero__grid-lines span { display: block; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(228,204,175,.08),transparent 62%); }
.hero__grid-lines span:first-child { left: 28%; }
.hero__grid-lines span:last-child { right: 28%; }
.hero__orb-depth { position: absolute; z-index: 1; inset: 0; pointer-events: none; transform: translate3d(var(--orb-x), calc(var(--orb-y) + var(--scroll-orb)), 0); will-change: transform; }
.hero__orb-reveal { position: absolute; width: min(57vw,800px); height: min(57vw,800px); left: 50%; top: 11%; transform: translateX(-50%); }
.hero__orb { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 38% 21%, #752020 0%, #581416 37%, #340d10 66%, #160809 100%); box-shadow: 0 0 180px rgba(75,5,12,.17), inset 0 12px 55px rgba(255,125,89,.07), inset 0 -95px 90px rgba(5,1,1,.48); }
.hero__orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: url('https://res.cloudinary.com/wujcxa24/image/upload/f_auto,q_auto:good,c_limit,w_1672/v1792672486/original-bg-reference.webp') center 44% / 155% auto no-repeat; opacity: .14; mix-blend-mode: screen; }
.hero__orb::after { content:''; position:absolute; inset:-8%; background: linear-gradient(175deg, transparent 28%, rgba(0,0,0,.45) 90%); }
.hero__orb-sheen { position: absolute; z-index: 1; width: 150%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at 35% 10%, rgba(222,79,61,.08), transparent 55%); }


.hero__masthead-depth {
  position: absolute;
  z-index: 2;
  top: 2.3%;
  left: 50%;
  width: max-content;
  pointer-events: none;

  /* Permanent horizontal centering */
  translate: -50% 0;

  /* GSAP-controlled movement only */
  transform: translate3d(
    var(--type-x, 0px),
    calc(var(--type-y, 0px) + var(--scroll-title, 0px)),
    0
  );

  will-change: transform;
}

.hero__masthead-mask { overflow: hidden; padding: 0 10px 15px; }
.hero__masthead { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(8rem, 26.9vw, 29rem); font-stretch: ultra-condensed; line-height: .82; letter-spacing: -.023em; color: var(--cream); margin: 0; white-space: nowrap; text-align: center; text-shadow: 0 5px 40px rgba(0,0,0,.08); }

.hero__portrait-depth {
  position: absolute;
  z-index: 5;
  width: clamp(460px, 47.3vw, 760px);
  bottom: -22%;
  left: 50%;
  pointer-events: none;

  /* Permanent horizontal centering */
  translate: -50% 0;

  /* Independent GSAP parallax and scroll movement */
  transform: translate3d(
    var(--portrait-x, 0px),
    calc(
      var(--portrait-y, 0px) +
      var(--scroll-portrait, 0px)
    ),
    0
  );

  will-change: transform;
}

.hero__portrait-reveal { width: 100%; display: block; }
.hero__portrait-reveal picture { display: block; }
.hero__portrait { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 5px 33px rgba(0,0,0,.37)); -webkit-user-drag: none; user-select: none; }

/* FLANKING TEXT */
.hero__side { position: absolute; z-index: 7; top: 47.5%; width: 22%; max-width: 280px; }
.hero__side--left { left: clamp(20px, 3.7vw, 74px); }
.hero__side--right { right: clamp(20px, 3.7vw, 74px); }
.hero__side-line { height: 1px; width: 36px; background: var(--red); margin-bottom: 21px; }
.eyebrow { color: var(--sand); font-size: 10px; font-weight: 600; line-height: 1.65; letter-spacing: .25em; }
.hero__side-manifesto { margin: 24px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(33px, 4vw, 61px); line-height: .92; letter-spacing: .005em; }
.hero__side-manifesto em { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.02em; }
.accent-dot { color: var(--red); }
.hero__side-mark { display: block; margin-top: 24px; background: linear-gradient(90deg, var(--red) 0 36px, transparent 36px 45px, rgba(228,204,175,.35) 45px 100%); height: 1px; width: 104px; }
.hero__role-list { list-style: none; padding: 0; margin: 27px 0 0; display: grid; gap: 23px; }
.hero__role-list li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; font-size: 12px; line-height: 1.65; font-weight: 600; letter-spacing: .13em; }
.hero__role-index { color: var(--red); font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.4; }
.hero__role-list small { color: var(--taupe); display: block; font-size: 9px; font-weight: 600; letter-spacing: .16em; margin-top: 5px; }

/* FOREGROUND NAME — real HTML, layered above suit */
.hero__nameplate { position: absolute; z-index: 8; top: 69%; left: 50%; width: min(58vw, 650px); transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 3px 14px rgba(10,7,8,.65), 0 3px 38px rgba(10,7,8,.45); }
.hero__given-name { font: 400 clamp(16px, 2.1vw, 27px)/1.2 var(--serif); letter-spacing: .28em; white-space: nowrap; margin: 0; }
.hero__given-separator { font-size: .48em; color: var(--red); vertical-align: middle; padding: 0 .12em; }
.hero__surname { margin: 0; font: 400 clamp(92px, 10.2vw, 175px)/.84 var(--serif); letter-spacing: -.035em; }
.hero__name-rule { display: flex; justify-content: center; margin: 21px 0 15px; }
.hero__name-rule span { display: block; width: 58px; height: 2px; background: var(--red); }
.hero__profession { margin: 0; font-size: 11px; letter-spacing: .46em; font-weight: 600; white-space: nowrap; }
.hero__profession span { color: var(--red); padding: 0 .55em; }

/* LOWER IMPRINTS */
.hero__lower-left,.hero__lower-right { position: absolute; z-index: 9; bottom: 19px; }
.hero__lower-left { left: clamp(20px, 3.7vw, 74px); }
.hero__lower-right { right: clamp(20px, 3.7vw, 74px); text-align: right; }
.hero__small-line { display: block; background: var(--red); width: 37px; height: 2px; margin-bottom: 17px; }
.hero__lower-right .hero__small-line { margin-left: auto; }
.hero__lower-left p,.hero__lower-right p { font: 400 20px/1.02 var(--serif); letter-spacing: .014em; margin: 0 0 12px; }
.hero__lower-sub { color: var(--taupe); font-size: 9px; letter-spacing: .22em; font-weight: 600; }
.hero__lower-sub span { color: var(--red); }

/* CHAPTER FOOTER */
.hero__bottom-strip { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 73px; border-top: 1px solid var(--fine-rule); padding: 0 clamp(20px,3.7vw,74px); gap: 14px; background: rgba(7,5,5,.25); z-index: 21; }
.hero__bottom-folio,.hero__bottom-scroll { white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .19em; color: var(--taupe); }
.hero__bottom-folio { display: flex; align-items: center; gap: 11px; }
.hero__bottom-folio i { display: inline-block; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(184,94,85,.13); }
.hero__bottom-slash { color: var(--red); }
.hero__bottom-scroll { text-align: right; }
.hero__scroll-motif { display: inline-block; color: var(--red); font-size: 19px; padding-right: 10px; animation: scrollHint 2.5s ease-in-out infinite; }
.hero__cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 21px; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .22em; padding: 17px 0 17px 18px; overflow: hidden; transition: color .25s; }
.hero__cta::before { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; background: var(--red); height: 1px; transform: scaleX(.28); transform-origin: right; transition: transform .45s cubic-bezier(.19,1,.22,1); }
.hero__cta:hover::before,.hero__cta:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.hero__cta-arrow { color: var(--red); font-size: 19px; transition: transform .3s; }
.hero__cta:hover .hero__cta-arrow { transform: translate(3px,-3px); }

/* CINEMATIC ENTER TIMELINE; all content is shown without JavaScript */
@keyframes scrollHint { 0%,100% { transform:translateY(-3px); } 50% {transform:translateY(3px);} }

/* LAPTOP */
@media (max-width: 1230px) {
  .site-header__folio { display:none; }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .hero__side { width: 24%; }
  .hero__side-manifesto {font-size:clamp(32px,4.2vw,51px);}
  .hero__role-list li {font-size:11px;gap:6px;grid-template-columns:23px 1fr;}
  .hero__portrait-depth { width: clamp(450px,50vw,650px); bottom:-18%; }
  .hero__nameplate {top:72%;}
}
/* TABLET */
@media (max-width: 900px) {
  .site-header { height: 82px; }
  .hero__stage { height:max(760px,calc(100svh - 149px)); min-height:760px; }
  .site-nav {gap:17px;}
  .site-nav > a {font-size:9px;}
  .site-nav .site-nav__contact {padding:13px 12px;}
  .hero__masthead {font-size:26.7vw;}
  .hero__masthead-depth {top:5%;}
  .hero__orb-reveal {width:75vw;height:75vw;top:14%;}
  .hero__portrait-depth {width: min(68vw,630px);bottom:4%;}
  .hero__side {top:48%;width:23%;}
  .hero__side-manifesto {font-size:clamp(30px,4.4vw,40px);}
  .hero__role-list li {font-size:9px;letter-spacing:.08em;}
  .hero__role-index {font-size:14px;}
  .eyebrow {font-size:9px;letter-spacing:.14em;}
  .hero__nameplate {top:72%;}
  .hero__surname {font-size:clamp(93px,13vw,135px);}
  .hero__given-name {font-size:18px;}
  .hero__profession {letter-spacing:.32em;font-size:9px;}
  .hero__lower-left p,.hero__lower-right p {font-size:16px;}
  .hero__lower-sub {font-size:8px;}
  .hero__bottom-scroll {display:none;}
  .hero__bottom-strip {grid-template-columns:1fr auto;}
}
/* MOBILE: independently art-directed rather than proportionally shrinking the desktop poster */
@media (max-width: 680px) {
  .site-header {height:72px;padding:0 20px;}
  .site-logo {gap:10px;}
  .site-logo__symbol {font-size:54px;}
  .site-logo__caption {font-size:8px;letter-spacing:.15em;}
  .site-nav {display:none;}
  .mobile-menu {display:block;justify-self:end; position:relative;}
  .mobile-menu summary {display:flex; align-items:center; justify-content:flex-end; gap:15px; cursor:pointer; min-width:65px;min-height:44px;list-style:none;font-size:10px;letter-spacing:.2em;font-weight:700;}
  .mobile-menu summary::-webkit-details-marker {display:none;}
  .mobile-menu__glyph {display:flex; flex-direction:column;gap:6px;width:20px;}
  .mobile-menu__glyph i {display:block;width:20px;height:1px;background:var(--cream);transition:transform .22s;}
  .mobile-menu[open] .mobile-menu__glyph i:first-child {transform:translateY(3.5px) rotate(45deg);}
  .mobile-menu[open] .mobile-menu__glyph i:last-child {transform:translateY(-3.5px) rotate(-45deg);}
  .mobile-menu__panel {position:absolute;z-index:50;right:-5px;top:48px;width:min(310px,calc(100vw - 38px));background:#1a0c0d;border:1px solid rgba(228,204,175,.35);padding:20px;box-shadow:0 20px 65px rgba(0,0,0,.68);display:grid;}
  .mobile-menu__panel a {display:flex;justify-content:space-between;align-items:center;min-height:49px;letter-spacing:.16em;font-size:11px;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(228,204,175,.14);}
  .mobile-menu__panel a:last-child {border-bottom:none;}
  .mobile-menu__panel a span {font-size:16px;color:var(--red);}
  .hero__stage {height: max(770px, calc(100svh - 137px));min-height:770px;}
  .hero__grid-lines {inset:0 20px;}
  .hero__grid-lines span:first-child {left:10%;}.hero__grid-lines span:last-child {right:10%;}
  .hero__masthead-depth {top:8%;}
  .hero__masthead {font-size:27.9vw;letter-spacing:-.04em;}
  .hero__masthead-mask {padding:0 4px 18px;}
  .hero__orb-reveal {width:112vw;height:112vw;top:18.5%;}
  .hero__portrait-depth {width: max(106vw,420px);bottom:12%;}
  .hero__side {top:39.7%;max-width:none;width:36%;}
  .hero__side--left {left:20px;}
  .hero__side--right {right:20px;text-align:right;}
  .hero__side--right .hero__side-line {margin-left:auto;}
  .hero__side-line {width:25px;margin-bottom:13px;}
  .eyebrow {font-size:7px;letter-spacing:.13em;line-height:1.6;}
  .hero__side-manifesto {font-size:clamp(20px,6.5vw,33px);line-height:.97;margin-top:11px;}
  .hero__side-mark {display:none;}
  .hero__role-list {margin-top:13px;gap:13px;}
  .hero__role-list li {display:flex;flex-direction:column;gap:0;font-size:8px;line-height:1.45;letter-spacing:.07em;}
  .hero__role-index {font-size:14px;}
  .hero__role-list small {font-size:7px;letter-spacing:.05em;margin-top:2px;color:#c0aca0;}
  .hero__nameplate {top:68.9%;width:100%;}
  .hero__given-name {font-size:clamp(16px,4.3vw,20px);letter-spacing:.23em;}
  .hero__surname {font-size:clamp(90px,23vw,142px);}
  .hero__name-rule {margin:14px 0 11px;}
  .hero__profession {font-size:8px;letter-spacing:.18em;}
  .hero__lower-left,.hero__lower-right {display:none;}
  .hero__lower-left {left:20px;}.hero__lower-right {right:20px;}
  .hero__small-line {width:24px;margin-bottom:9px;}
  .hero__lower-left p,.hero__lower-right p {font-size:12px;}
  .hero__lower-sub {font-size:7px;letter-spacing:.09em;}
  .hero__bottom-strip {height:65px;padding:0 20px;}
  .hero__bottom-folio {font-size:8px;letter-spacing:.1em;}
  .hero__cta {font-size:8px;gap:8px;letter-spacing:.08em;padding-left:4px;}
  .hero__cta-arrow {font-size:17px;}
}
@media (max-width: 400px) {
 .hero__stage {min-height:730px;height:max(730px,calc(100svh - 137px));}
 .hero__portrait-depth {width:112vw;bottom:13%;}
 .hero__side {top:37.5%;}
 .hero__side-manifesto {font-size:clamp(19px,6vw,24px);}
 .hero__role-list li {font-size:7.5px;}
 .hero__nameplate {top:68%;}
 .hero__given-name {font-size:16px;}
 .hero__surname {font-size:clamp(77px,24vw,98px);}
 .hero__lower-left p,.hero__lower-right p {font-size:11px;}
}
@media (max-width: 355px) {
 .hero__stage {height:745px;min-height:745px;}
 .hero__portrait-depth {width:117vw;bottom:19%;}
 .hero__side--right {right:15px;}
 .hero__side--left {left:15px;}
 .hero__side--left .eyebrow,.hero__side--right .eyebrow {font-size:6.8px;}
 .hero__surname {font-size:83px;}
 .hero__nameplate {top:64%;}
 .hero__profession {letter-spacing:.11em;font-size:7.5px;}
 .hero__given-name {letter-spacing:.16em;}
 .hero__bottom-strip {padding:0 15px;}
}
/* Short viewport landscape, don't lose photo or interactive links */
@media (max-height: 760px) and (min-width: 901px) {
 .hero__stage {min-height:640px;height:640px;}
 .hero__portrait-depth {width:min(47vw,610px);bottom:-22%;}
 .hero__nameplate {top:68%;}
}
@media (hover:none), (pointer:coarse) {
 .hero__portrait-depth,.hero__masthead-depth,.hero__orb-depth {will-change:auto;}
}
@media (prefers-reduced-motion: reduce) {
 *,*::before,*::after { animation-duration:.001ms !important;animation-delay:0ms !important; transition-duration:.001ms !important;scroll-behavior:auto !important; }
 .hero__portrait-depth,.hero__masthead-depth,.hero__orb-depth {transform:none;}
 .hero__portrait-depth {transform:translateX(-50%);}
 .hero__masthead-depth {transform:translateX(-50%);}
 .hero__orb-reveal {transform:translateX(-50%);}
 .hero__nameplate {transform:translateX(-50%);}
 .hero__scroll-motif {animation:none;}
}