/* =========================================================
   Mohd Mujtaba Akhtar — portfolio
   Structure:
     1. Tokens        6. Selected publications
     2. Base          7. Publications list
     3. Layout        8. Awards / news page
     4. Header        9. Footer
     5. About/hero   10. Media queries  ← ALL breakpoints live here
   Rule: never add a layout declaration below section 10.
   ========================================================= */

/* ============ 1. TOKENS ============ */
:root{
  --paper:      #fdfdfc;
  --ink:        #16181c;
  --ink-soft:   #565b63;
  --hairline:   #e6e5e1;
  --wash:       #f6f5f3;

  --oxblood:    #7a1b2e;   /* primary accent */
  --oxblood-lo: #9b2740;   /* hover / secondary */
  --gold:       #c8912b;

  --tag-bg:     #ecebe7;
  --tag-ink:    #2a2d33;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --t-name:  clamp(2rem, 1.2rem + 3vw, 3.1rem);
  --t-h2:    clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --t-body:  clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --t-small: 0.85rem;
  --t-micro: 0.72rem;

  /* rhythm */
  --gap:     clamp(1.5rem, 4vw, 3rem);
  --stack:   clamp(2.5rem, 6vw, 4.5rem);
  --pad-x:   clamp(1rem, 4vw, 2.5rem);

  --tap: 44px;  /* minimum touch target */
}

:root[data-theme="dark"]{
  --paper:      #14161a;
  --ink:        #e8eaed;
  --ink-soft:   #a7adb6;
  --hairline:   #2b2f36;
  --wash:       #1c1f25;

  --oxblood:    #f0a3b1;
  --oxblood-lo: #f7c2cc;
  --gold:       #e0b45c;

  --tag-bg:     #262a31;
  --tag-ink:    #dfe3e8;
}

/* ============ 2. BASE ============ */
*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Long titles and author lists must never push the page sideways. */
h1,h2,h3,p,li,a{ overflow-wrap:break-word }

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

a{ color:inherit; text-underline-offset:3px }
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:3px;
  border-radius:2px;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.15 }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* ============ 3. LAYOUT ============ */
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

main.container{
  flex:1;
  padding-block: var(--stack) calc(var(--stack) * 1.2);
}

.spa-section[hidden]{ display:none }

/* ============ 4. HEADER ============ */
/* sticky, not fixed — the page flows beneath it with no magic offset. */
header{
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}

.header-flex{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:64px;
  padding-block:.5rem;
}

.brand{ margin-right:auto; font-family:var(--font-display); font-size:1.15rem }
.brand-link{ text-decoration:none; letter-spacing:-.01em }
.brand-last{ font-weight:600 }

.main-nav{ display:flex; gap:1.5rem; margin-left:auto }
.nav-link{
  font-family:var(--font-mono);
  font-size:var(--t-small);
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink-soft);
  padding-block:.4rem;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav-link:hover{ color:var(--ink) }
.nav-link.active{ color:var(--oxblood); border-bottom-color:var(--oxblood) }

.social{ display:flex; gap:.15rem }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap);
  color:var(--ink-soft);
  font-size:1.05rem;
  text-decoration:none;
  transition:color .15s;
}
.social a:hover{ color:var(--oxblood) }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap);
  background:none; border:0; cursor:pointer;
  color:var(--ink-soft); font-size:1rem;
}
.icon-btn:hover{ color:var(--oxblood) }

#nav-toggle{ display:none }   /* shown at the mobile breakpoint */

/* ============ 5. ABOUT / HERO ============ */
.profile-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--gap);
  align-items:start;
}

.name{
  font-size:var(--t-name);
  margin:0 0 .5rem;
  letter-spacing:-.02em;
}
.name-first{ font-weight:300 }
.name-last{ font-weight:600 }

.role-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--t-small);
  color:var(--oxblood);
  letter-spacing:.01em;
  margin:0 0 1.5rem;
}
.role-tag a{ color:inherit }

.lede{ font-size:1.05em; color:var(--ink) }
.profile-left p{ margin:0 0 1.1rem }

.hl{ color:var(--oxblood); font-weight:500 }

/* Callouts: a single hairline rule, no gradients. */
.callout{
  border-left:2px solid var(--oxblood);
  padding:.15rem 0 .15rem 1rem;
  margin:1.5rem 0;
  color:var(--ink-soft);
  font-size:.96em;
}
.callout strong{ color:var(--ink); font-weight:600 }

.section-label{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:var(--stack) 0 1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--hairline);
  font-weight:500;
}

.about-list{
  columns:2;
  column-gap:2rem;
  list-style:none;
  padding:0;
  margin:0;
}
.about-list li{
  font-size:var(--t-small);
  color:var(--ink-soft);
  padding:.3rem 0;
  break-inside:avoid;
}
.about-list li::before{
  content:"—";
  color:var(--oxblood);
  margin-right:.5rem;
}

/* portrait */
.photo-card{ margin:0; position:sticky; top:calc(64px + 2rem) }
.photo-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid var(--hairline);
}
.address-badge{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  line-height:1.7;
  color:var(--ink-soft);
  letter-spacing:.03em;
  margin-top:.75rem;
}

/* ============ 6. NEWS ============ */
.news-list{ list-style:none; padding:0; margin:0 }
.news-list li{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:1rem;
  padding:.6rem 0;
  font-size:var(--t-small);
  border-bottom:1px solid var(--hairline);
}
.news-date{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  letter-spacing:.02em;
  padding-top:.15rem;
}
.news-list a{ color:var(--oxblood); text-decoration:none; font-weight:500 }
.news-list a:hover{ text-decoration:underline }
.news-more{ margin-top:1rem; font-size:var(--t-small) }
.news-more a{ color:var(--oxblood); text-decoration:none; font-weight:500 }
.news-more a:hover{ text-decoration:underline }

/* ============ 7. SELECTED PUBLICATIONS ============ */
.selected-list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--gap) }

.sel-card{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:1.5rem;
  align-items:start;
}

.sel-thumb{ position:relative; border:1px solid var(--hairline) }
.sel-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.venue-ribbon{
  position:absolute; inset:auto 0 0 0;
  background:var(--oxblood);
  color:#fff;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  text-align:center;
  padding:.3rem;
}

.sel-title{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  margin:0 0 .4rem;
}
.sel-title a{ text-decoration:none }
.sel-title a:hover{ color:var(--oxblood) }
.sel-authors{ margin:0 0 .7rem; font-size:var(--t-small); color:var(--ink-soft) }

.me{
  color:var(--oxblood);
  font-weight:600;
  border-bottom:1px dashed currentColor;
}

/* ============ chips (shared) ============ */
.sel-actions{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }

.chip,
.pdf-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:30px;
  padding:.25rem .7rem;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  background:none;
  color:var(--ink);
  border:1px solid var(--ink-soft);
  cursor:pointer;
}
.chip:hover,
.pdf-badge:hover{ color:var(--oxblood); border-color:var(--oxblood) }

.chip.soft{
  background:var(--tag-bg);
  color:var(--tag-ink);
  border-color:transparent;
  cursor:default;
}
.chip.award{ background:var(--gold); color:#1a1206; border-color:transparent }

.abstract-box{
  display:none;
  margin-top:1rem;
  padding:1rem 1.15rem;
  background:var(--wash);
  border-left:2px solid var(--hairline);
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--ink-soft);
}
.abstract-box.open{ display:block }
.abstract-box p{ margin:0 }

/* ============ 8. PUBLICATIONS LIST ============ */
.pub-heading{
  font-size:var(--t-h2);
  color:var(--ink);
  margin:0 0 .3rem;
  letter-spacing:-.01em;
}
.pub-subline{
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  letter-spacing:.04em;
  margin:0 0 var(--gap);
}

.pub-list{ list-style:none; padding:0; margin:0 0 var(--stack) }
.pub-list > li{
  padding:1.4rem 0;
  border-bottom:1px solid var(--hairline);
}
.pub-title{
  display:block;
  font-weight:600;
  font-size:1rem;
  line-height:1.4;
  margin-bottom:.35rem;
}
.pub-authors{ display:block; font-size:var(--t-small); color:var(--ink-soft); margin-bottom:.7rem }
.pub-venue{
  display:inline-flex; align-items:center;
  min-height:30px;
  padding:.25rem .7rem;
  background:var(--tag-bg);
  color:var(--tag-ink);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-right:.5rem;
}
.pub-actions{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }
.ital{ font-style:italic }

/* year marker — the one decorative flourish, kept */
.year-sep{
  list-style:none;
  border:0 !important;
  padding:0 !important;
  margin:var(--gap) 0 .5rem;
  font-family:var(--font-mono);
  font-size:clamp(2.5rem, 8vw, 4rem);
  font-weight:200;
  line-height:1;
  color:var(--hairline);
  letter-spacing:-.02em;
}
.year-sep::after{ content:attr(data-year) }

/* ============ 9. AWARDS ============ */
.awards-list{ list-style:none; padding:0; margin:0 }
.awards-list > li{
  padding:1.1rem 0;
  border-bottom:1px solid var(--hairline);
  font-size:var(--t-small);
}
.award-tags{ display:inline-flex; flex-wrap:wrap; gap:.4rem; margin-left:.5rem; vertical-align:middle }

/* ============ FOOTER ============ */
/* static, not fixed — a fixed bar eats scarce vertical space on phones. */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:1.5rem 0;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  text-align:center;
  letter-spacing:.03em;
}

/* =========================================================
   10. MEDIA QUERIES — nothing layout-related goes below this

   Breakpoints, and why each one exists:
     1100px  sidebar narrows, text column keeps a comfortable measure
      900px  small laptops / large tablets — still two columns
      700px  tablet portrait and below — single column, hamburger nav
      480px  phones — tighter spacing, smaller portrait
   ========================================================= */

/* ---- large tablet / small laptop: keep two columns ---- */
@media (max-width: 1100px){
  .profile-section{ grid-template-columns:minmax(0,1fr) 260px }
  .sel-card{ grid-template-columns:130px minmax(0,1fr) }
}

@media (max-width: 900px){
  .profile-section{ grid-template-columns:minmax(0,1fr) 210px }
  .sel-card{ grid-template-columns:115px minmax(0,1fr); gap:1.1rem }
  .main-nav{ gap:1.1rem }
  .nav-link{ font-size:.8rem }
  .social a{ width:38px }
}

/* ---- tablet portrait and below: single column, menu collapses ---- */
@media (max-width: 700px){
  .profile-section{ grid-template-columns:minmax(0,1fr) }

  /* `order` applies to the grid child itself, not to what's inside it —
     so it belongs on .profile-right, not on .photo-card. */
  .profile-right{ order:-1 }
  .photo-card{
    position:static;
    max-width:200px;
    margin-bottom:1.75rem;
  }
  .photo-card img{ aspect-ratio:1/1 }
  .address-badge{ text-align:left }

  .sel-card{ grid-template-columns:100px minmax(0,1fr); gap:1rem }

  #nav-toggle{ display:inline-flex; order:3 }
  .main-nav{
    display:none;
    order:4;
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    margin:0;
    padding-bottom:.5rem;
  }
  .main-nav.open{ display:flex }
  .nav-link{
    font-size:var(--t-small);
    padding:.75rem .5rem;
    border-bottom:1px solid var(--hairline);
    border-left:2px solid transparent;
  }
  .nav-link.active{
    border-bottom-color:var(--hairline);
    border-left-color:var(--oxblood);
  }

  .header-flex{ flex-wrap:wrap }
  .brand{ display:block !important }
  .social{ order:2 }
}

/* ---- phones ---- */
@media (max-width: 480px){
  .about-list{ columns:1 }
  .news-list li{ grid-template-columns:minmax(0,1fr); gap:.15rem }
  .news-date{ padding-top:0 }
  .pub-venue{ margin-bottom:.4rem }

  .photo-card{ max-width:150px; margin-bottom:1.25rem }

  .sel-card{ grid-template-columns:84px minmax(0,1fr); gap:.85rem }
  .sel-title{ font-size:.95rem }

  /* ribbon must stay legible — never below 10px */
  .venue-ribbon{
    font-size:10px;
    letter-spacing:.02em;
    padding:.2rem .1rem;
  }

  .chip, .pdf-badge{ padding:.25rem .5rem }
  .social a{ width:36px; font-size:1rem }
}

@media print{
  header, .site-footer, .pdf-badge, .abs-toggle{ display:none }
  .spa-section[hidden]{ display:block !important }
}