/* ==============================================================
   USAMA RAFID - "LIQUID DISPATCH"  ·  2030 glass system
   Aurora-lit cream canvas, frosted glass, depth & motion.
   Palette: parchment #F9F6F1 · ink #1A1A18 · terracotta #B5451B ·
            oxblood #8B2D10 · gold #C8A45A
   Type: DM Serif Display (headlines) · Inter (body/UI) ·
         DM Mono (metadata) · Noto Serif Bengali (Bengali script)
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&family=DM+Mono:ital,wght@0,400;0,500;1,400&family=Noto+Serif+Bengali:wght@300;400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');

:root{
  --cream:#F9F6F1; --cream-2:#EEEAE3; --paper:#FFFFFF;
  --ink:#1A1A18; --ink-soft:#6B6560;
  --red:#B5451B; --oxblood:#8B2D10; --blue:#C8A45A;
  --line:rgba(26,26,24,.12); --glass-brd:rgba(255,255,255,.55);
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 30px 60px -28px rgba(26,26,24,.45);
  --nav-h:72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Inter",sans-serif; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
}
::selection{ background:var(--red); color:var(--cream); }
img{ display:block; max-width:100%; }
.material-symbols-outlined{ line-height:1; vertical-align:middle; }

/* ---------------- Ambient aurora + grain ---------------- */
.aurora{ position:fixed; inset:-20vmax; z-index:-2; pointer-events:none; filter:blur(60px) saturate(1.25); opacity:.9; }
.aurora .blob{ position:absolute; border-radius:50%; mix-blend-mode:multiply; will-change:transform; }
.blob.b1{ width:46vmax; height:46vmax; left:-6vmax; top:-8vmax;  background:radial-gradient(circle at 30% 30%, rgba(181,69,27,.45), transparent 62%); animation:drift1 26s var(--ease) infinite alternate; }
.blob.b2{ width:42vmax; height:42vmax; right:-8vmax; top:4vmax;   background:radial-gradient(circle at 60% 40%, rgba(200,164,90,.5), transparent 62%); animation:drift2 30s var(--ease) infinite alternate; }
.blob.b3{ width:40vmax; height:40vmax; left:18vmax; bottom:-12vmax;background:radial-gradient(circle at 50% 50%, rgba(181,69,27,.35), transparent 60%); animation:drift3 34s var(--ease) infinite alternate; }
.blob.b4{ width:34vmax; height:34vmax; right:6vmax; bottom:-6vmax; background:radial-gradient(circle at 50% 40%, rgba(200,164,90,.4), transparent 60%); animation:drift1 28s var(--ease) infinite alternate-reverse; }
@keyframes drift1{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(6vmax,4vmax) scale(1.12);} }
@keyframes drift2{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-5vmax,5vmax) scale(1.1);} }
@keyframes drift3{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(4vmax,-5vmax) scale(1.15);} }

.grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dot-veil{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(26,26,24,.07) 1px, transparent 1px); background-size:30px 30px; }

/* ---------------- Glass primitives ---------------- */
.glass{
  background:linear-gradient(135deg, rgba(249,246,241,.62), rgba(238,234,227,.38));
  backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--glass-brd); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-strong{
  background:linear-gradient(135deg, rgba(249,246,241,.82), rgba(238,234,227,.6));
  backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid var(--glass-brd); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
.glass-ink{
  background:linear-gradient(135deg, rgba(26,26,24,.92), rgba(0,30,48,.86));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12); color:var(--cream);
}

/* Spotlight that follows the cursor over a card */
.spot{ position:relative; overflow:hidden; }
.spot::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(193,18,31,.16), transparent 60%);
}
.spot:hover::before{ opacity:1; }

/* 3D tilt - JS sets --rx/--ry */
.tilt{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s var(--ease), box-shadow .25s var(--ease); transform-style:preserve-3d; }
.tilt:hover{ box-shadow:0 40px 80px -30px rgba(26,26,24,.5); }
.tilt .pop{ transform:translateZ(40px); }

.lift{ transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.lift:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -30px rgba(26,26,24,.45); }

/* ---------------- Type ---------------- */
.display{ font-family:"DM Serif Display",serif; font-weight:400; letter-spacing:-.03em; line-height:.86; text-transform:uppercase; }
.serif{ font-family:"DM Serif Display","Noto Serif Bengali",serif; }
.sg{ font-family:"DM Serif Display",serif; font-weight:400; }
.mono{ font-family:"DM Mono",monospace; font-weight:400; }
.eyebrow{ font-family:"DM Mono",monospace; font-weight:500; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft); }

/* Outlined display word that fills on reveal/hover */
.stroke{ -webkit-text-stroke:1px var(--red); color:transparent; transition:color .8s var(--ease); }
.stroke.fill, h1:hover .stroke, .display:hover .stroke{ color:var(--red); }

/* Gradient ink text */
.grad-text{ background:linear-gradient(120deg,var(--ink),var(--blue) 60%,var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------------- Buttons ---------------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:1rem 1.9rem;
  font-family:"Inter",sans-serif; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  border-radius:999px; cursor:pointer; text-decoration:none; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.btn-primary{ background:var(--red); color:var(--cream); box-shadow:0 18px 36px -14px rgba(193,18,31,.6); }
.btn-primary:hover{ background:var(--oxblood); }
.btn-ghost{ background:rgba(255,255,255,.25); color:var(--ink); border:1.5px solid var(--ink);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn:active{ transform:scale(.96); }
.btn .material-symbols-outlined{ transition:transform .3s var(--ease); }
.btn:hover .material-symbols-outlined{ transform:translateX(3px); }

/* Glass chips */
.chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border-radius:999px;
  font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; font-weight:400;
  background:rgba(249,246,241,.55); border:1px solid var(--glass-brd);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

/* ---------------- Nav + progress ---------------- */
#progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:80; background:linear-gradient(90deg,var(--red),var(--oxblood)); }
.nav{ position:fixed; top:0; left:0; width:100%; height:var(--nav-h); z-index:70; display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease); }
.nav.scrolled{ background:linear-gradient(135deg, rgba(245,242,237,.7), rgba(238,234,227,.5));
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 12px 30px -18px rgba(26,26,24,.4); border-bottom:1px solid var(--glass-brd); }
.nav-inner{ width:100%; max-width:1440px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
@media(min-width:768px){ .nav-inner{ padding:0 56px; } }
.brand{ font-family:"DM Serif Display",serif; font-weight:700; letter-spacing:-.04em; font-size:1.15rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.1rem; }
.brand .dot{ color:var(--red); }
.nav-links{ display:none; gap:2rem; align-items:center; }
@media(min-width:768px){ .nav-links{ display:flex; } }
.nav-links a{ font-family:"Inter",sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); text-decoration:none; position:relative; padding:.3rem 0; transition:color .3s var(--ease); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--red); transition:width .35s var(--ease); }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }

.hamburger{ display:inline-block; width:30px; height:20px; position:relative; background:none; border:0; cursor:pointer; }
@media(min-width:768px){ .hamburger{ display:none; } }
.hamburger span{ position:absolute; left:0; height:2.5px; width:100%; background:var(--ink); border-radius:2px; transition:.4s var(--ease); }
.hamburger span:nth-child(1){ top:0; } .hamburger span:nth-child(2){ top:8.5px; } .hamburger span:nth-child(3){ top:17px; }
.menu-open .hamburger span:nth-child(1){ top:8.5px; transform:rotate(45deg); }
.menu-open .hamburger span:nth-child(2){ opacity:0; }
.menu-open .hamburger span:nth-child(3){ top:8.5px; transform:rotate(-45deg); }

#mobile-menu{ position:fixed; inset:0; z-index:65; display:flex; flex-direction:column; justify-content:center; padding:0 32px;
  background:linear-gradient(160deg, rgba(245,242,237,.92), rgba(238,234,227,.9));
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  transform:translateY(-102%); transition:transform .55s var(--ease); pointer-events:none; }
.menu-open #mobile-menu{ transform:translateY(0); pointer-events:auto; }
body.menu-open{ overflow:hidden; }
#mobile-menu a{ font-family:"DM Serif Display",serif; font-weight:700; text-transform:uppercase; letter-spacing:-.02em; font-size:2rem; color:var(--ink);
  padding:18px 0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:16px; text-decoration:none; opacity:0; transform:translateY(20px); transition:color .3s var(--ease); }
.menu-open #mobile-menu a{ animation:rise .6s var(--ease) forwards; }
.menu-open #mobile-menu a:nth-child(1){animation-delay:.1s}.menu-open #mobile-menu a:nth-child(2){animation-delay:.16s}.menu-open #mobile-menu a:nth-child(3){animation-delay:.22s}.menu-open #mobile-menu a:nth-child(4){animation-delay:.28s}.menu-open #mobile-menu a:nth-child(5){animation-delay:.34s}
#mobile-menu a .idx{ font-family:"DM Mono",monospace; font-size:.8rem; letter-spacing:.2em; color:var(--red); }
#mobile-menu a:hover{ color:var(--red); }

/* ---------------- Reveal / motion ---------------- */
.reveal{ opacity:0; transform:translateY(40px); filter:blur(6px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter:none; }
.reveal-stagger.in > *{ animation:rise .9s var(--ease) both; }
.reveal-stagger.in > *:nth-child(1){animation-delay:.05s}.reveal-stagger.in > *:nth-child(2){animation-delay:.13s}.reveal-stagger.in > *:nth-child(3){animation-delay:.21s}.reveal-stagger.in > *:nth-child(4){animation-delay:.29s}.reveal-stagger.in > *:nth-child(5){animation-delay:.37s}.reveal-stagger.in > *:nth-child(6){animation-delay:.45s}
@keyframes rise{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;} }
.parallax{ will-change:transform; }

/* Scroll cue */
.scroll-cue{ width:26px; height:42px; border:2px solid var(--ink-soft); border-radius:14px; position:relative; }
.scroll-cue::after{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; background:var(--red); border-radius:2px; transform:translateX(-50%); animation:cue 1.6s var(--ease) infinite; }
@keyframes cue{ 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 80%{opacity:0; transform:translate(-50%,14px);} 100%{opacity:0;} }

/* Marquee */
.marquee{ overflow:hidden; } .marquee-track{ display:inline-flex; gap:2.5rem; white-space:nowrap; animation:marq 30s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* Section eyebrow rule */
.rule{ height:2px; width:46px; background:var(--red); display:inline-block; }

/* Image treatment */
.media{ overflow:hidden; }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .9s var(--ease); filter:grayscale(1) contrast(1.02); }
.media:hover img{ transform:scale(1.06); filter:grayscale(0); }

/* Counters */
.count{ font-variant-numeric:tabular-nums; }

/* Horizontal scroll strip */
.h-strip{ display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; -webkit-overflow-scrolling:touch; }
.h-strip>*{ scroll-snap-align:start; flex:0 0 auto; }
.h-strip::-webkit-scrollbar{ height:8px; } .h-strip::-webkit-scrollbar-track{ background:rgba(26,26,24,.08); border-radius:99px; }
.h-strip::-webkit-scrollbar-thumb{ background:rgba(193,18,31,.5); border-radius:99px; }

/* Archive rows */
.row{ position:relative; transition:background .35s var(--ease), padding-left .35s var(--ease); }
.row::before{ content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px; background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.row:hover{ background:rgba(193,18,31,.05); padding-left:18px; }
.row:hover::before{ transform:scaleY(1); }

/* Inputs / selects */
.field{ background:rgba(249,246,241,.6); border:1px solid var(--glass-brd); border-radius:14px; color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.field:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(193,18,31,.18); }

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:6px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  .aurora .blob,.marquee-track{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ==============================================================
   Compatibility layer to legacy component classes from the inner
   pages mapped onto the Liquid Dispatch glass system.
   ============================================================== */
.font-display-hero,.font-display-hero-mobile,.font-headline-lg,.font-headline-lg-mobile,.font-headline-sm{ font-family:"DM Serif Display",serif; font-weight:400; letter-spacing:-.03em; }
.font-label-caps{ font-family:"DM Mono",monospace; font-weight:500; }
.font-subhead-serif,.font-serif-header{ font-family:"DM Serif Display","Noto Serif Bengali",serif; }
.font-body-lg,.font-body-md,.font-body-sm{ font-family:"Inter",sans-serif; }

.text-outline{ -webkit-text-stroke:1.5px var(--red); color:transparent; transition:color .8s var(--ease); }
.text-outline.fill,h1:hover .text-outline{ color:var(--red); }

.reveal-on-scroll{ opacity:0; transform:translateY(34px); filter:blur(5px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal-on-scroll.visible{ opacity:1; transform:none; filter:none; }

.glass-card{ background:linear-gradient(135deg,rgba(249,246,241,.62),rgba(238,234,227,.38)); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--glass-brd); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.5); }
.hover-glow{ transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.hover-glow:hover{ border-color:var(--red); box-shadow:0 30px 60px -28px rgba(193,18,31,.22); transform:translateY(-4px); }

.archive-row{ position:relative; transition:background .35s var(--ease), padding-left .35s var(--ease); }
.archive-row::before{ content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px; background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.archive-row:hover{ background:rgba(193,18,31,.05); padding-left:14px; }
.archive-row:hover::before{ transform:scaleY(1); }

.hero-portrait{ object-fit:cover; }
.article-image{ object-fit:cover; transition:transform .7s var(--ease), filter .7s var(--ease); }

.expand-icon{ transition:transform .4s var(--ease); }
details[open] summary .expand-icon{ transform:rotate(45deg); }
details summary::-webkit-details-marker{ display:none; }
details summary{ list-style:none; outline:none; }
.abstract-panel{ max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--ease), opacity .5s ease-out; }
.abstract-panel.open{ max-height:720px; opacity:1; }

.custom-cursor,.custom-cursor-dot{ display:none !important; }

/* legacy hero dotted bg now handled by ambient aurora; keep a faint grid */
.page-hero-bg,.academic-grid-bg{ background-image:radial-gradient(rgba(26,26,24,.06) 1px, transparent 1px); background-size:30px 30px; }

/* generic section container width helper for ported pages */
.legacy-wrap{ max-width:1280px; margin:0 auto; }