/* =========================================================================
   Himanshu Sihag - site stylesheet

   This replaces the AcademicPages / Minimal Mistakes theme entirely. That
   theme laid pages out as a document outline (h1 > h2 > h3 with rules), which
   is exactly the look we moved away from. Everything here is hand-written,
   so there is no vendor CSS to fight and nothing to compile.

   Sections
     1. Fonts
     2. Tokens and theming
     3. Reset and base
     4. Layout shell
     5. Sidebar
     6. Tabs
     7. Section labels
     8. Cards
     9. About page pieces
    10. CV page
    11. Password gate
    12. Footer
    13. Utilities
   ========================================================================= */

/* -- 1. Fonts ----------------------------------------------------------- */
@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-latin-700-normal.woff2") format("woff2");
}

/* -- 2. Tokens and theming ----------------------------------------------
   Light is the base. Dark is applied either by the viewer's system setting
   or by an explicit data-theme, which the toggle sets. Both are defined so
   the toggle can override the system in either direction.
   ----------------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --ink: #1d2226;
  --muted: #6d7780;
  --faint: #98a2aa;
  --line: #e6e9eb;
  --accent: #2f7f93;
  --accent-ink: #24616f;
  --card: #ffffff;
  --card-line: #e6e9eb;
  --tint: #f2f6f7;
  --shadow: 0 6px 20px rgba(16, 32, 38, 0.07);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15191c;
    --ink: #e6e9eb;
    --muted: #94a0a8;
    --faint: #78848c;
    --line: #2a3136;
    --accent: #61b3c8;
    --accent-ink: #8ccadb;
    --card: #1b2024;
    --card-line: #2a3136;
    --tint: #1e262a;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --bg: #15191c;
  --ink: #e6e9eb;
  --muted: #94a0a8;
  --faint: #78848c;
  --line: #2a3136;
  --accent: #61b3c8;
  --accent-ink: #8ccadb;
  --card: #1b2024;
  --card-line: #2a3136;
  --tint: #1e262a;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* -- 3. Reset and base --------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

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

/* -- 4. Layout shell ----------------------------------------------------- */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

.layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 56px;
  padding: 52px 0 24px;
}

.main {
  min-width: 0;
}

/* -- 5. Sidebar ---------------------------------------------------------- */
.side {
  position: sticky;
  top: 52px;
  align-self: start;
}

.side__avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.side__name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 18px 0 5px;
}

.side__role {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px;
}

.side__links {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}

.side__links li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 9px;
  color: var(--muted);
}

.side__links a {
  color: var(--muted);
}

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

.icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.icon--solid {
  fill: currentColor;
  stroke: none;
}

/* -- 6. Tabs ------------------------------------------------------------- */
.tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}

.tabs a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  padding: 0 0 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.tabs a:hover {
  color: var(--ink);
  text-decoration: none;
}

.tabs__spacer {
  flex: 1 1 auto;
}

.theme-toggle {
  background: none;
  border: 0;
  padding: 0 0 12px;
  margin: 0;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
}

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

.theme-toggle .icon {
  margin-top: 0;
  width: 17px;
  height: 17px;
  opacity: 1;
}

/* Active tab. Driven by data-tab on <html> so it is correct on first paint
   rather than after a script runs. */
html.js[data-page="home"][data-tab="about"] .tabs a[href="#about"],
html.js[data-page="home"][data-tab="papers"] .tabs a[href="#papers"],
.tabs a.is-current {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* -- 7. Section labels ---------------------------------------------------
   These replace the old <h2> headings with rules under them. Small, quiet,
   and they read as labels rather than document headings.
   ----------------------------------------------------------------------- */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 38px 0 16px;
}

.label:first-child {
  margin-top: 0;
}

/* -- 8. Cards ------------------------------------------------------------ */
.grid {
  display: grid;
  gap: 14px;
}

.grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}

.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.card__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--tint);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 11px;
}

.card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 7px;
}

.card__title a {
  color: var(--accent);
}

.card__meta {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}

.card__authors {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 3px;
}

.card__authors strong {
  color: var(--ink);
  font-weight: 600;
}

.card__cite {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 11px 0 0;
}

.card__cite strong {
  color: var(--ink);
  font-weight: 600;
}

.card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--card-line);
  font-size: 12.5px;
}

.card__date {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* -- 9. About page pieces ------------------------------------------------ */
.lead {
  font-size: 16px;
  line-height: 1.72;
  margin: 0 0 20px;
  max-width: 66ch;
}

.meta-line {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 4px;
}

.meta-line strong {
  color: var(--ink);
  font-weight: 600;
}

/* -- 10. CV page --------------------------------------------------------- */
.cv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cv-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.cv-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff;
}

.btn--sm {
  padding: 6px 11px;
  font-size: 12.5px;
}

/* A CV row: role and dates on one line, organisation under it. */
.rows {
  display: grid;
  gap: 2px;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.row:last-child {
  border-bottom: 0;
}

.row__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.row__dates {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  padding-top: 2px;
}

.row__org {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* Research & honours: date in a left gutter, entry beside it. */
.honours {
  display: grid;
  gap: 0;
}

.honour {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.honour:last-child {
  border-bottom: 0;
}

.honour__date {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.honour__text {
  margin: 0;
  line-height: 1.6;
}

.honour__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}

.honour__text a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* -- 11. Password gate --------------------------------------------------- */
.gate {
  max-width: 400px;
  margin: 4vh auto 0;
  text-align: center;
}

.gate__lock {
  width: 34px;
  height: 34px;
  color: var(--muted);
  stroke-width: 1.5;
  margin-bottom: 14px;
  opacity: 0.8;
}

.gate h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.gate p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.6;
}

.gate form {
  display: flex;
  gap: 8px;
}

.gate input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 10px 13px;
}

.gate input:focus {
  outline: none;
  border-color: var(--accent);
}

.gate__error {
  font-size: 13px;
  color: #c0392b;
  margin: 14px 0 0;
}

:root[data-theme="dark"] .gate__error,
:root:not([data-theme="light"]) .gate__error {
  color: #e88b80;
}

/* -- 12. Footer ---------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding: 22px 0 40px;
  font-size: 12.5px;
  color: var(--faint);
}

.foot a {
  color: var(--faint);
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.foot a:hover {
  color: var(--muted);
}

/* -- 13. Utilities and tab panes ----------------------------------------
   Panes are only hidden once `js` is on <html>, so with JavaScript off all
   sections stack down the page and stay readable.
   ----------------------------------------------------------------------- */
html.js .tabpane {
  display: none;
}

html.js[data-tab="about"] #pane-about,
html.js[data-tab="papers"] #pane-papers {
  display: block;
}

.tabpane:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .wrap {
    padding: 0 20px;
  }

  .layout {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 0 16px;
  }

  .side {
    position: static;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px 16px;
    align-items: center;
  }

  .side__avatar {
    width: 64px;
    height: 64px;
  }

  .side__text {
    grid-column: 2;
  }

  .side__name {
    margin: 0 0 2px;
    font-size: 17px;
  }

  .side__role {
    margin: 0;
  }

  .side__links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 4px;
  }

  .side__links li {
    margin: 0;
  }

  .tabs {
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .grid--two {
    grid-template-columns: 1fr;
  }

  .honour {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .row {
    grid-template-columns: 1fr;
  }

  .row__dates {
    text-align: left;
    padding-top: 0;
    order: 3;
  }
}

/* Show the icon for the theme you would switch TO. */
.icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon--sun { display: none; }
  :root:not([data-theme="light"]) .icon--moon { display: inline; }
}
:root[data-theme="dark"] .icon--sun { display: none; }
:root[data-theme="dark"] .icon--moon { display: inline; }
:root[data-theme="light"] .icon--sun { display: inline; }
:root[data-theme="light"] .icon--moon { display: none; }