/* ===================================================
   Aaryan [Last] — Curriculum Vitae
   Silicon wafer + copper interconnect design system
   =================================================== */

/* ---------- Custom properties: Light (default) ---------- */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg: #ECEDEC;
  --surface: #E1E3E2;
  --surface-recess: #E6E8E7;

  /* Ink */
  --ink: #18191A;
  --text-2: #5C5E5D;
  --text-3: #8E908E;

  /* Lines */
  --hairline: #BFC1BF;
  --hairline-strong: #18191A;

  /* Accent: copper interconnect */
  --accent: #8B5A2B;
  --accent-soft: rgba(139, 90, 43, 0.08);

  /* SVG illustration colors */
  --svg-substrate: #2C2D2C;
  --svg-box: #6A6C6A;
  --svg-sd: #6E7B85;
  --svg-sd-stroke: #4A5560;
  --svg-gate: #383D3F;
  --svg-nanosheet: #A8B0B8;
  --svg-grid: #BFC1BF;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Newsreader', Georgia, 'Iowan Old Style', serif;

  /* Layout */
  --max-width: 880px;
  --side-pad: clamp(20px, 5vw, 56px);
  --top-pad: clamp(64px, 12vw, 112px);
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] {
  --bg: #161716;
  --surface: #1F211F;
  --surface-recess: #1A1B1A;

  --ink: #ECEDEC;
  --text-2: #A8AAA8;
  --text-3: #6B6D6B;

  --hairline: #383A38;
  --hairline-strong: #ECEDEC;

  --accent: #C97E3E;
  --accent-soft: rgba(201, 126, 62, 0.12);

  --svg-substrate: #424342;
  --svg-box: #5A5C5A;
  --svg-sd: #5A6770;
  --svg-sd-stroke: #7A8893;
  --svg-gate: #4E5355;
  --svg-nanosheet: #8B939B;
  --svg-grid: #383A38;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  transition: background-color 200ms ease, color 200ms ease;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

a:hover { color: var(--accent); }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

/* ---------- Layout ---------- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--top-pad) var(--side-pad) 56px;
}

section { margin-bottom: 40px; }

/* ---------- Eyebrow (recurring section marker) ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.eyebrow.accent { color: var(--accent); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 0.5px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease;
  z-index: 10;
}

.theme-toggle:hover {
  border-color: var(--ink);
  background: var(--bg);
}

.theme-toggle:active { transform: scale(0.96); }

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ===================================================
   HERO
   =================================================== */
.hero { margin-bottom: 24px; }

.hero-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: flex-end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-strong);
  margin-bottom: 20px;
}

.name {
  font-family: var(--font-sans);
  font-size: clamp(32px, 7vw, 50px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--ink);
}

.name .surname {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.018em;
  font-size: 1.04em;
}

.doc-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: right;
  line-height: 1.75;
  white-space: nowrap;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 36px;
  align-items: center;
}

.tagline {
  font-size: clamp(18px, 3.4vw, 24px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-bottom: 18px;
  color: var(--ink);
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

/* Subtle résumé button in the hero */
.resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-recess) 100%);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: color 200ms ease, border-color 200ms ease, transform 160ms ease, box-shadow 200ms ease;
}

/* Copper sheen that sweeps across on hover */
.resume-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, var(--accent-soft) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 600ms ease;
}

.resume-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.resume-btn:hover::before { transform: translateX(120%); }
.resume-btn:active { transform: translateY(0); }

.resume-btn span, .resume-btn svg { position: relative; z-index: 1; }
.resume-btn svg { transition: transform 200ms ease; }
.resume-btn:hover svg { transform: translate(1px, -1px); }

/* Button row in the hero */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-actions .resume-btn { margin-top: 0; }

/* Ghost variant — lighter, transparent, secondary to the filled résumé */
.resume-btn--ghost {
  background: transparent;
  color: var(--text-2);
}
.resume-btn--ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Hero portrait — circular, duotone-graded photo beside the name */
.hero-portrait {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portrait-frame {
  position: relative;
  width: clamp(140px, 22vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pull the crop toward the upper-middle so the face/head stays in the
     circle. Adjust the second value: 0% = top of photo, 50% = center,
     100% = bottom. Lower it if your head is still cut off. */
  object-position: center 28%;
  display: block;
  z-index: 1;

  /* Photo shown in natural color, unaffected by light/dark mode.
     To apply the copper/silicon duotone grade instead, set:
     filter: grayscale(1) sepia(0.4) saturate(1.15) hue-rotate(-8deg)
             contrast(0.98) brightness(1.03); */
  filter: none;
}

.portrait-frame.has-photo .portrait-placeholder { display: none; }

.portrait-placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(40px, 8vw, 60px);
  color: var(--text-2);
  letter-spacing: 0.02em;
  user-select: none;
}

/* RibbonFET interactive module — map its --rf-* theme onto the site palette
   so it follows light/dark mode automatically. Constrained smaller and
   centered in its closing section at the page bottom. */
.ribbonfet-mount {
  --rf-substrate: var(--svg-substrate);
  --rf-sti: var(--surface-recess);
  --rf-silicon: var(--svg-nanosheet);
  --rf-silicon-light: #c2cad2;
  --rf-iox: var(--svg-box);
  --rf-hk: var(--accent);
  --rf-wfm-p: var(--accent);
  --rf-wfm-n: var(--svg-box);
  --rf-gate-fill: var(--svg-gate);
  --rf-via: var(--accent);
  --rf-label: var(--ink);
  --rf-label-dim: var(--text-2);
  --rf-bg: transparent;
  --rf-grid: var(--hairline);
  --rf-highlight: var(--accent);
  --rf-font: var(--font-mono);
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The module's tooltip background is always dark; keep its text light
   regardless of site theme so it stays readable. */
.ribbonfet-mount .rf-tooltip { color: #e8ebf0 !important; }
.ribbonfet-mount .rf-tooltip-title { color: var(--accent) !important; }

/* Contact + device, side by side at the page bottom */
.contact-device {
  border-top: 0.5px solid var(--hairline);
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.contact-col .eyebrow { margin-bottom: 16px; display: block; }
.device-col .eyebrow { margin-bottom: 18px; display: block; }

.device-figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

.gaa-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
  margin: 12px 0 0;
}

.gaa-hint { color: var(--accent); }

/* ===================================================
   METADATA STRIP
   =================================================== */
.meta-strip {
  border-top: 0.5px solid var(--hairline);
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 24px;
}

.meta-item .eyebrow { margin-bottom: 8px; }

.meta-value {
  font-size: 14px;
  line-height: 1.4;
}

.muted { color: var(--text-3); }

/* ===================================================
   ABOUT (serif moment)
   =================================================== */
.bio {
  border-top: 0.5px solid var(--hairline);
  padding-top: 24px;
}

.bio .eyebrow { margin-bottom: 16px; }

.bio-text {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.5;
  max-width: 560px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ===================================================
   SPECIFICATIONS
   =================================================== */
.specs {
  border-top: 0.5px solid var(--hairline);
  padding-top: 22px;
}

.specs .eyebrow { margin-bottom: 14px; }

.spec-table {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.85;
}

.spec-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  border-bottom: 0.5px dotted var(--hairline);
  padding: 5px 0;
}

.spec-row:last-child { border-bottom: none; }

.spec-row dt { color: var(--text-2); }

/* ===================================================
   PROJECTS
   =================================================== */
.projects { padding-top: 8px; }

.projects > .eyebrow {
  margin-bottom: 28px;
  display: block;
}

.project {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 18px;
  margin-bottom: 40px;
}

.project-header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 22px;
}

.project-number {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}

.project-title {
  font-size: clamp(16px, 2.6vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.project-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.project-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}

.project[data-side="left"] .project-body {
  grid-template-columns: 300px minmax(0, 1fr);
}

/* keep the figure vertically centered against the text without affecting size */
.project-figure {
  align-self: center;
}

.project-text p {
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 16px;
}

.mini-table {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.85;
}

.mini-table > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  border-bottom: 0.5px dotted var(--hairline);
  padding: 3px 0;
}

.mini-table > div:last-child { border-bottom: none; }

.mini-table dt { color: var(--text-2); }

.project-ref {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.project-ref a { color: var(--accent); }
.project-ref a:hover { opacity: 0.75; }

.project-figure {
  background: var(--surface);
  border-radius: 6px;
  padding: 14px 12px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.project-figure svg { width: 100%; height: auto; display: block; }

/* Project 03: text-only */
.project--text-only .project-summary {
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 600px;
}

/* More work link */
.more-link {
  display: block;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-top: -16px;
  margin-bottom: 12px;
}

/* ===================================================
   LATTICE BACKGROUND — full-page Si crystal texture
   Fixed behind all content, very low contrast, draggable
   wherever it's exposed (margins, gaps between sections).
   Replaces body's flat background fill.
   =================================================== */
#lattice-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  cursor: grab;
  touch-action: none;
}

#lattice-bg.is-dragging { cursor: grabbing; }

/* ===================================================
   EDUCATION
   =================================================== */
.education {
  padding-top: 22px;
  border-top: 0.5px solid var(--hairline);
}

.education .eyebrow { margin-bottom: 16px; display: block; }

.edu-list { border-top: 1px solid var(--hairline-strong); }

.edu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--hairline);
  align-items: baseline;
}

.edu-item:last-child { border-bottom: none; }

.edu-degree {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}

.edu-school {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.edu-thesis {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 4px;
}

.edu-honor {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.edu-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ===================================================
   SKILLS & SERVICE — wider label column variant
   =================================================== */
.skills,
.service {
  padding-top: 22px;
  border-top: 0.5px solid var(--hairline);
}

.skills .eyebrow,
.service .eyebrow {
  margin-bottom: 14px;
  display: block;
}

.spec-table--wide .spec-row {
  grid-template-columns: 180px minmax(0, 1fr);
}

/* ===================================================
   PUBLICATIONS
   =================================================== */
.publications {
  padding-top: 32px;
  border-top: 0.5px solid var(--hairline);
}

.publications .eyebrow { margin-bottom: 16px; display: block; }

.pub-list { border-top: 1px solid var(--hairline-strong); }

.pub-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--hairline);
  align-items: baseline;
}

.pub-item:last-child { border-bottom: none; }

.pub-authors {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 3px;
  letter-spacing: 0.02em;
}

.pub-title {
  font-size: 14.5px;
  line-height: 1.5;
}

.pub-venue {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pub-venue:hover { color: var(--accent); }

.pub-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 0.5px dotted var(--hairline);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 620px;
}

.pub-note em { color: var(--ink); font-style: italic; }

/* ===================================================
   CONTACT
   =================================================== */
.contact {
  padding-top: 32px;
  border-top: 0.5px solid var(--hairline);
}

.contact .eyebrow { margin-bottom: 16px; display: block; }

.contact-list { border-top: 1px solid var(--hairline-strong); padding-top: 14px; }

.contact-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 7px 0;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.contact-row dt { color: var(--text-2); }
.contact-row dd { margin: 0; }
.contact-mark { color: var(--accent); }

.closing {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 0.5px solid var(--hairline);
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.5;
  max-width: 540px;
  letter-spacing: -0.005em;
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
  max-width: var(--max-width);
  margin: 56px auto 0;
  padding: 18px var(--side-pad) 32px;
  border-top: 0.5px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ===================================================
   MOTION — subtle reveal on scroll
   =================================================== */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===================================================
   MOBILE — stack at 720px
   =================================================== */
@media (max-width: 720px) {
  main { padding-top: clamp(48px, 14vw, 80px); }

  .theme-toggle {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }

  .hero-identity {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 12px;
  }

  .doc-meta { text-align: left; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    text-align: center;
  }

  .hero-portrait { order: -1; }

  .meta-strip {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-device {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .meta-item { padding-bottom: 16px; border-bottom: 0.5px dotted var(--hairline); }
  .meta-item:last-child { border-bottom: none; padding-bottom: 0; }

  .spec-row { grid-template-columns: 120px minmax(0, 1fr); }

  .project-header {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas: 'num title' '. when';
    gap: 12px 14px;
  }

  .project-number { grid-area: num; }
  .project-title { grid-area: title; }
  .project-when { grid-area: when; }

  .project-body,
  .project[data-side="left"] .project-body {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .project[data-side="left"] .project-figure { order: -1; }

  .project-figure {
    width: 100%;
    justify-self: stretch;
  }

  .mini-table > div { grid-template-columns: 100px minmax(0, 1fr); }

  .pub-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .pub-venue { justify-self: start; }

  .edu-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .edu-when {
    order: -1;
    font-size: 10.5px;
  }

  .spec-table--wide .spec-row {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .contact-row {
    grid-template-columns: 90px minmax(0, 1fr) auto;
    font-size: 12px;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 9.5px;
  }
}

/* ===================================================
   PRINT — clean A4 resume on Cmd+P
   =================================================== */
@media print {
  :root { --bg: #FFFFFF; --ink: #000000; --accent: #6B4220; }
  .theme-toggle, .more-link { display: none; }
  .reveal { opacity: 1; transform: none; }
  body { font-size: 11pt; }
  main { padding: 0; max-width: 100%; }
  .hero-portrait, .project-figure { break-inside: avoid; }
  .device-col { display: none; }
  .project, section { break-inside: avoid; }
  a { color: inherit; }
}