/* =========================================================
   Trisha Chhabra — Portfolio
   Matched to oak.is/helping live computed styles:
     bg #13191f, text #f5f4f1 (single off-white, no grays),
     mono 18px everywhere, serif headline 63px/700,
     container max 1320px with ~72px side padding,
     hierarchy via font-weight (700 emphasis / 400 body).

   MOBILE-FIRST: base = small screens; min-width breakpoints up.
   ========================================================= */

:root {
  /* =========================================================
     THE ONLY TWO COLOURS TO EDIT.
     Change these and the whole site updates.
       --color-1 = page background  + highlight text
       --color-2 = text + highlight background + dividers
     ========================================================= */
  --color-1: #f0ffd6;
  --color-2: #000000;

  --bg: #13191f;
  --fg: #f5f4f1;
  --line: rgba(245, 244, 241, 0.16);

  --maxw: 1320px;
  --gutter: 22px;

  --font-serif: "Newsreader", "Tiempos Headline", Georgia, serif;
  /* Hosted Input Mono Narrow (Type Network CDN). Each weight is its OWN family
     name, so we expose one variable per cut. Fallback: IBM Plex Mono. */
  --font-mono:        "Input Mono Nar Reg", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-mono-medium: "Input Mono Nar Med", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-mono-bold:   "Input Mono Nar Bd",  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-mono-italic: "Input Mono Nar It",  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 63px desktop = 3.94rem; scales down fluidly on small screens */
  --fs-hero: clamp(2.3rem, 8vw, 3.94rem);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 18px;
  font-synthesis: none; /* never fake bold/italic — use the real Input cuts */
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Text selection: purple highlight, cream text */
::selection {
  background: var(--fg);
  color: var(--accent);
}

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

/* ----- Layout ----- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* =========================================================
   BASE = MOBILE
   ========================================================= */

/* ----- Header / Nav ----- */
.site-header {
  padding-top: 2.8rem;
  padding-bottom: 1.4rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.nav__item {
  font-family: var(--font-mono-medium);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav__item:hover,
.nav__item.is-active {
  background: var(--fg);
  color: var(--accent);
}

.nav__sep {
  font-size: 0.9rem;
  opacity: 0.4;
  margin: 0 0.6em;
  user-select: none;
}

/* TRIAL: faint | separators between nav items.
   To bring the original dashes back, delete this rule (or set opacity to 0.4);
   set opacity to 0 to hide them entirely. */
.nav__sep {
  opacity: 0.15;
}

/* Single-line header menu on mobile.
   The menu text scales with screen width (the min(...) below) so the whole row
   always fits without wrapping or horizontal scroll. The faint | separators are
   hidden on mobile to save the width they'd otherwise take.
   To revert to a wrapping menu, delete this whole block. */
@media (max-width: 699px) {
  .nav {
    flex-wrap: nowrap;
    justify-content: space-between; /* spread items edge to edge, using the side space */
    gap: 0.4em;
    font-size: min(0.85rem, 3vw);   /* a touch larger; still scales to fit */
  }
  .nav__item {
    font-size: 1em;                /* follow the fluid .nav size */
    padding: 0.15em 0.25em;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .nav__sep {
    display: none;                 /* hide dividers on mobile */
  }
  .nav__icon {
    font-size: 1em;                /* icons scale with the menu too */
  }
}

/* Social icon links in the header (Instagram, LinkedIn) */
.nav__social {
  display: inline-flex;
  align-items: center;
  align-self: center;    /* center the icon group against the menu text */
  gap: 0;                /* keep the two icons together */
}

.nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--fg);
  padding: 0.25em 0.2em;
  line-height: 1;        /* normal line box so the icon centers with the text */
}

.nav__icon svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

.nav__icon:hover,
.nav__icon:focus-visible {
  background: var(--fg);
  color: var(--accent);
}


/* ----- Hero ----- */
.hero {
  padding-top: 4rem; /* matches Community's first-module top (1.6 + 2.4) */
  padding-bottom: 1rem;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 700;
  max-width: 16ch;
  margin: 0;
  overflow-wrap: break-word;
}

.hero p {
  margin: 0;
  max-width: 48ch;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.55;
}

/* ----- Section labels ----- */
.section-label {
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 2rem;
}

/* ----- Project cards ----- */
.projects {
  padding-bottom: 2.4rem;
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
}

.card {
  display: block;
}

.card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1d242c;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card__title {
  font-family: var(--font-mono-bold);
  margin: 1rem 0 0.1rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
  display: inline-block;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}

.card:hover .card__title {
  background: var(--fg);
  color: var(--accent);
}

.card__meta {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

/* ----- Collaborators ----- */
.clients {
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
}

.clients-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.clients-grid p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

.clients-grid .section-label {
  margin: 0;
}

.cta-inline {
  font-family: var(--font-mono-italic);
  font-style: italic;
  color: color-mix(in srgb, var(--fg) 48%, transparent);
}

.cta-link {
  font-family: var(--font-mono-bold);
  display: inline-block;
  margin-top: 1.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  transition: opacity 0.18s ease;
}

.cta-link:hover {
  opacity: 0.6;
}

.cta-link .arrow {
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.2s ease;
}

.cta-link:hover .arrow {
  transform: translateX(4px);
}

/* ----- Hello / contact band ----- */
.hello {
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
  border-top: 1px solid var(--line);
}

.hello__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1rem;
}

.hello__row .muted {
  opacity: 0.78;
}

.hello__row .label {
  font-family: var(--font-mono-bold);
  font-weight: 700;
}

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--fg);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  background: var(--fg);
  color: var(--accent);
  border-color: var(--fg);
}

/* ----- Footer ----- */
.site-footer {
  padding: 2.6rem 0 5.5rem;
}

.footer-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding-top: 2.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-row a {
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-row a:hover {
  background: var(--fg);
  color: var(--accent);
}

.footer-copy {
  opacity: 1;
}

/* =========================================================
   TABLET — 600px and up
   ========================================================= */
@media (min-width: 600px) {
  :root {
    --gutter: 40px;
  }

  .site-header {
    padding-top: 3.4rem;
    padding-bottom: 2rem;
  }

  .nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: left;
    gap: 1.5rem;
  }
  .nav__sep {
    margin: 0;
  }

  .hero {
    padding-top: 4.6rem; /* matches Community's first-module top (1.6 + 3) */
    padding-bottom: 1.2rem;
  }
  .hero p {
    font-size: 0.85rem;
  }

  .section-label {
    margin-bottom: 3rem;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.4rem 2rem;
  }
  .card--full {
    grid-column: 1 / -1;
  }
  .card--full .card__media {
    aspect-ratio: 16 / 9;
  }

  .clients-grid {
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
  }

  .hello__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .footer-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

/* =========================================================
   DESKTOP — 1000px and up : oak's generous ~72px padding
   ========================================================= */
@media (min-width: 1000px) {
  :root {
    --gutter: 72px;
  }

  .hero {
    padding-top: 4.6rem;
    padding-bottom: 1.2rem;
  }

  .section-label {
    margin-bottom: 3.4rem;
  }

  .projects {
    padding-bottom: 3.4rem;
  }

  .clients {
    padding-top: 3.4rem;
    padding-bottom: 3.4rem;
  }

  .card:hover .card__media img {
    transform: scale(1.03);
  }
}

/* =========================================================
   About / Community modules (oak About layout)
   left label column + right content column, divided by rules
   ========================================================= */
.modules {
  padding-top: 1.6rem;
}

.module {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  padding: 2.4rem 0;
}

.module__label {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

.entry {
  margin: 0 0 1.8rem;
}
.entry:last-child {
  margin-bottom: 0;
}

.entry__title {
  font-family: var(--font-mono-bold);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.entry__meta {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.entry__links {
  font-size: 1rem;
}

.entry__links a {
  font-family: var(--font-mono-italic);
  font-style: italic;
  color: color-mix(in srgb, var(--fg) 48%, transparent);
  margin-right: 1.4rem;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.entry__links a:hover {
  background: var(--fg);
  color: var(--accent);
}

.about-photo {
  width: 100%;
  max-width: 320px;
  margin-top: 0.35rem; /* align photo top with the first line of bio text */
  display: block;
}

.prose p {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.6;
}
.prose p:last-child {
  margin-bottom: 0;
}
.prose a {
  font-family: var(--font-mono-italic);
  font-style: italic;
  color: color-mix(in srgb, var(--fg) 48%, transparent);
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.prose a:hover {
  background: var(--fg);
  color: var(--accent);
}

@media (min-width: 600px) {
  .module {
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    padding: 3rem 0;
  }
}

/* Input Mono Narrow is loaded from the Type Network CDN via the
   fontface.css <link> in each page's <head> (hosted license). */

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

/* =========================================================
   OPTIONAL THEME — oak.is/about colors (indigo on cream)
   To try it: add class="theme-oak-light" to <body>.
   To revert: remove that class. (Dark theme is the default.)
   ========================================================= */
body.theme-oak-light {
  /* everything below derives from --color-1 and --color-2 (set in :root) */
  --accent: var(--color-1);
  --fg: var(--color-2);
  --bg: var(--color-2);
  --line: color-mix(in srgb, var(--color-2) 28%, transparent);

  background-color: var(--color-1);
  background-image: url("../images/white-texture.png");
  background-repeat: repeat;
  background-position: top center;
}

/* ----- Contents / index (home) page ----- */
.contents {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.contents-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.content-box {
  display: block;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.5rem 1.6rem 1.7rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.content-box:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--accent);
}
.content-box:hover .content-box__more {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content-box__title {
  font-family: var(--font-mono-medium);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.content-box__desc {
  margin: 0 0 1.1rem;
  line-height: 1.55;
  max-width: 42ch;
}
.content-box__more {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (min-width: 700px) {
  .contents-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }
  .content-box {
    padding: 1.8rem 1.9rem 2rem;
  }
}

/* Home page:
   - Mobile: natural flow, boxes size to content, page scrolls if needed,
     footer stays pinned to the bottom of short screens.
   - Desktop (>=700px): fill the viewport so the 2x2 grid stretches
     between header and footer with no scroll. */
.home-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.home-page main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 700px) {
  .home-page .contents {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .home-page .contents-grid {
    flex: 1;
    grid-template-rows: 1fr 1fr;
  }
  .home-page .content-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ----- Project detail page ----- */
.project-head {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.project-title {
  font-family: var(--font-mono-medium);
  margin: 0;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.project-sub {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.project-blurb {
  margin-top: 1.3rem;
  max-width: 46ch;
}
.project-blurb p {
  font-size: 0.9rem;
}

/* TRIAL layout: project title on the left, details on the right.
   To revert: in beyondthelight.html, split .project-top back into a
   .project-head section + a full-width .modules--compact block. */
.project-top {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
@media (min-width: 600px) {
  .project-top {
    padding-top: 4.6rem;
  }
}
@media (min-width: 800px) {
  .project-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  .project-top__title {
    margin-bottom: 0;
  }
}

/* Project details: stacked label + text, styled like the image captions */
.project-top__info {
  padding-top: 0; /* align first label with the title */
}
.project-top__info .module {
  display: block;
  padding: 0.9rem 0;
}
.project-top__info .module:first-child {
  padding-top: 0;
}
.project-top__info .module__label {
  font-family: var(--font-mono-medium);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}
.project-top__info .module__body p {
  font-size: 0.9rem;
}

/* ===== TRIAL: breathing room around inline link highlights =====
   The padding is offset by an equal negative margin, so surrounding text
   doesn't move (and nothing jumps on hover). Delete this whole block to
   revert to highlights that hug the text exactly. */
.prose a,
.entry__links a,
.cta-inline,
.footer-row a {
  padding: 0.05em 0.3em;
  margin: 0 -0.3em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Project switcher strip — desktop only, project pages only */
.project-nav {
  display: none;
}
@media (min-width: 900px) {
  .project-nav {
    display: block;
    margin-top: 0.8rem;
  }
  .project-nav__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 3rem;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    scrollbar-width: none; /* Firefox: hide scrollbar */
  }
  .project-nav__inner::-webkit-scrollbar {
    display: none; /* WebKit: hide scrollbar */
  }
  .project-nav a {
    font-size: 0.78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding: 0.15em 0.5em;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .project-nav a:hover {
    background: var(--fg);
    color: var(--accent);
  }
  .project-nav a.is-current {
    font-family: var(--font-mono-bold);
    font-weight: 600;
  }
}

.gallery {
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}
.stagger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5.5rem 2.5rem;
  align-items: start;
}
.stagger figure {
  margin: 0;
}
.art__media {
  display: grid;
  gap: 0.6rem;
}
.art__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
/* heading-only cell: hide description in the grid (still shown in the lightbox) */
.art--mini .cap-text {
  display: none;
}
.stagger figcaption {
  margin-top: 0.7rem;
  max-width: 48ch;
}
.cap-title {
  font-family: var(--font-mono-medium);
  display: block;
  font-size: 0.98rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cap-text {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ----- Image lightbox (project galleries) ----- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 10, 6, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw 4vw;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  width: 100%;
  max-width: 1300px;
  color: var(--color-1);
}
.lightbox__project {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin-bottom: 0.7rem;
}
.lightbox__media img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}
.lightbox__title {
  font-family: var(--font-mono-medium);
  display: block;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.lightbox__text {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 42ch;
}
.lightbox__nav,
.lightbox__close {
  position: absolute;
  background: transparent;
  border: 0;
  color: var(--color-1);
  font-family: var(--font-mono);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.lightbox__nav:hover,
.lightbox__close:hover {
  opacity: 1;
}
.lightbox__nav {
  top: 0;
  bottom: 0;
  width: 12vw;
  min-width: 48px;
  max-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}
.lightbox__prev {
  left: 0;
}
.lightbox__next {
  right: 0;
}
.lightbox__close {
  top: 1.4rem;
  right: 1.6rem;
  font-size: 1.9rem;
  line-height: 1;
  z-index: 3; /* keep above the side nav buttons */
}
@media (min-width: 800px) {
  .lightbox__content {
    grid-template-columns: 1.3fr 1fr;
    gap: 4vw;
  }
  .lightbox__media img {
    max-height: 82vh;
  }
}

@media (min-width: 600px) {
  .project-head {
    padding-top: 4.6rem;
  }
}
@media (min-width: 700px) {
  .stagger {
    grid-template-columns: 1fr 1fr;
    gap: 5.5rem 2.5rem;
  }
  /* two-image artwork: full-width row, images side by side, one caption */
  .art--pair {
    grid-column: 1 / -1;
  }
  .art--pair .art__media {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2.5rem;
  }
  .art--pair figcaption {
    max-width: none;
  }
}

/* compact detail rows (used on project pages above the gallery) */
.modules--compact {
  padding-top: 0.5rem;
}
.modules--compact .module {
  padding: 1rem 0;
}
@media (min-width: 600px) {
  .modules--compact .module {
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
  }
}
body.theme-oak-light .card__media,
body.theme-oak-light .about-photo {
  background: #ebe8da;
}

/* TRIAL: hide the site footer on all pages, but keep breathing room at the
   bottom so content doesn't run to the edge. Delete this block to bring the
   footer back. (Homepage has no footer, so it's excluded from the padding.) */
.site-footer {
  display: none;
}

body:not(.home-page) main {
  padding-bottom: 5rem;
}

/* =========================================================
   About page — centered: two-column bio, small photo,
   currently, get-in-touch
   ========================================================= */
/* .about uses the shared .wrap width, so the bio lines up with the header
   (from "trisha c." on the left to the social icons on the right). */
.about {
  /* Community/Independent: .modules (1.6rem) + .module padding-top (2.4rem) = 4rem.
     Match that so the bio starts at the same height as those pages. */
  padding-top: 4rem;
  text-align: center;
}

/* Intro paragraphs (desc 1) — a normal left-aligned text block (no column split) */
.about-bio {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Community blocks moved into About keep their normal left-aligned layout */
.about-community {
  text-align: left;
}
.about-community .module:first-child {
  padding-top: 0; /* the column already starts below the bio */
}
/* Inside column 1, stack each block: heading first, text on the next line.
   (Override the global .module label|body split so there are no sub-columns.) */
.about-community .module {
  grid-template-columns: 1fr;
  gap: 0.35rem;       /* tighter space between heading and the list below */
  padding: 1.4rem 0;  /* smaller gap between Fellowships / Teaching / Talks */
}
/* Section headings: uppercase, smaller, dimmed */
.about-community .module__label {
  font-family: var(--font-mono-medium);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
}
/* Tighten the gap between a meta line and the links beneath it,
   so it matches the title→meta spacing on the other lines. */
.about-community .entry__meta {
  margin-bottom: 0.2rem;
}
.about-community .entry__links {
  margin: 0;
}

/* Right-side blocks are left-aligned */
.about-side,
.about-desc2 {
  text-align: left;
}

/* ---- Mobile layout: one column, stacked in this order ----
   desc 1  →  photo + currently  →  desc 2  →  fellowships
   The two .about-col wrappers collapse (display:contents) so all four blocks
   become flex items of .about-cols and can be ordered freely. */
.about-cols {
  display: flex;
  flex-direction: column;
}
.about-col {
  display: contents;
}
.about-bio       { order: 1; margin-bottom: 2.75rem; }
.about-side      { order: 2; margin-bottom: 2.75rem; }
.about-desc2     { order: 3; margin-bottom: 2.75rem; }
.about-community { order: 4; }

@media (min-width: 700px) {
  /* Two real columns:
     LEFT  = desc 1, then fellowships
     RIGHT = photo + currently, then desc 2 */
  .about-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4.5rem;
    align-items: start;
  }
  .about-col {
    display: block; /* re-form the two columns (order stops applying) */
  }

  /* Spacing between the two stacked blocks within each column */
  .about-bio  { margin-bottom: 3rem; }    /* desc 1 → fellowships */
  .about-side { margin-bottom: 4.8rem; }  /* mail → desc 2 (matches the gap between fellowship sections) */
  .about-community,
  .about-desc2 { margin-bottom: 0; }
}

/* Get-in-touch keeps a comfortable centred measure */
.about-contact {
  max-width: 640px;
}

/* Photo — 65% of the right column width */
.about-side .about-photo {
  display: block;
  width: 65%;
  max-width: none;
  height: auto;
  margin: 0 0 2rem;
}

/* Currently — left-aligned under the photo */
.about-side .about-currently {
  text-align: left;
  max-width: none;
  margin: 0;
}

/* Get in touch — sits directly under the "currently" lines, same line rhythm */
.about-side .about-contact {
  text-align: left;
  max-width: none;
  margin: 0.25rem 0 0;
}
/* The "currently" + contact value links: solid black, Medium Input Mono, upright
   (overrides the dimmed italic .prose a style). */
.about-currently a,
.about-contact a {
  font-family: var(--font-mono-medium);
  font-weight: 500; /* so the IBM Plex fallback is medium too, not regular */
  font-style: normal;
  color: var(--fg);
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.about-currently a:hover,
.about-currently a:focus-visible,
.about-contact a:hover,
.about-contact a:focus-visible {
  background: var(--fg);
  color: var(--accent);
}

.about-currently__label {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.about-currently p {
  margin: 0.25rem 0;
  /* Dim the label text ("Based in:", etc.); the links stay solid black via the
     .about-currently a rule above, so they stand out. */
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}

/* Get in touch */
.about-contact {
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 1rem; /* match the "currently" lines */
  color: color-mix(in srgb, var(--fg) 55%, transparent); /* dim "Get in touch:"; link stays black */
}

/* =========================================================
   Coming soon (placeholder page, e.g. Independent)
   ========================================================= */
.coming-soon {
  padding-top: 6rem;
  padding-bottom: 4rem;
  text-align: center;
}
.coming-soon__eyebrow {
  font-family: var(--font-mono-medium);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
  margin: 0 0 0.9rem;
}
.coming-soon__title {
  font-family: var(--font-mono-medium);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 1.3rem;
}
.coming-soon__text {
  max-width: 460px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
}
.coming-soon__text a {
  border-radius: 2px;
  padding: 0 0.15em;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.coming-soon__text a:hover,
.coming-soon__text a:focus-visible {
  background: var(--fg);
  color: var(--accent);
  text-decoration: none;
}
@media (min-width: 700px) {
  .coming-soon {
    padding-top: 8rem;
  }
  .coming-soon__title {
    font-size: 2.2rem;
  }
}

/* =========================================================
   Blue dot cursor
   A small blue dot follows the pointer, layered ON TOP of the normal
   system cursor. The real cursor stays visible (never hidden), so there
   is no flicker. Change --cursor-color or the width/height to taste.
   Delete this block + the matching code in main.js to remove it.
   ========================================================= */
:root {
  --cursor-color: #2b7dc4; /* the blue dot */
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cursor-color);
  pointer-events: none;        /* never blocks clicks */
  z-index: 2147483647;         /* sits above everything, incl. lightbox */
  transform: translate(-50%, -50%);
  opacity: 0;                  /* hidden until the mouse moves */
  transition: opacity 0.25s ease, transform 0.15s ease;
}

.cursor-dot.is-visible {
  opacity: 1;
}

/* Grows 15% over links, buttons and images */
.cursor-dot.is-hot {
  transform: translate(-50%, -50%) scale(1.15);
}

/* =========================================================
   Back-to-top button
   Appears bottom-right after scrolling down; smooth-scrolls up.
   ========================================================= */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--fg);
  color: var(--accent);        /* the light page colour, so the arrow shows */
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;        /* not clickable until shown */
  transition: opacity 0.25s ease, transform 0.25s ease,
    background 0.15s ease, color 0.15s ease;
  z-index: 1000;
}

.to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.to-top:hover {
  background: var(--accent);
  color: var(--fg);
}

@media (min-width: 700px) {
  .to-top {
    right: 2rem;
    bottom: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* =========================================================
   Homepage — scattered section words + intro
   (replaces the old four content boxes)
   ========================================================= */

/* The homepage now keeps the standard top header (like the other pages) and
   hides the floating scattered words. To bring the scattered-word layout back,
   delete the .home-word rule below (and re-hide the header if wanted). */
.home-page .home-word {
  display: none;
}

/* Make the homepage fill exactly one screen — no scrolling.
   Header (hidden) + hero + footer stack to 100% of the viewport height,
   and the hero flexes to take whatever space is left over. */
.home-page {
  min-height: 100vh;
  min-height: 100dvh;        /* uses the *real* visible height on mobile */
  display: flex;
  flex-direction: column;
}

.home-page main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;             /* lets the hero shrink instead of overflowing */
}

.home-hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.25rem;
}

/* The scatter area — takes all the space ABOVE the bottom greeting line.
   Word positions (left/top %) are relative to this, so the top section
   automatically adjusts to whatever room is left above the greeting. */
.home-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
}

/* Live local-time greeting line (sits at the bottom-centre of the screen).
   Matches the intro greeting's font/size/colour. */
.home-status {
  margin: 1.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;        /* ~80% of the intro greeting's 0.95rem */
  line-height: 1.6;
  text-align: center;
  color: var(--fg);
  opacity: 0.75;
}

@media (min-width: 760px) {
  /* In-flow at the bottom of the hero, so the scatter area auto-fits above it.
     `margin-bottom` lifts it off the very bottom edge. */
  .home-status {
    margin: 0 0 2.25rem;
    white-space: nowrap;
  }
}

/* Mobile: drop the weather ("The afternoon sun's out.") onto its own line.
   (On desktop both spans stay inline = one line.) */
@media (max-width: 599px) {
  .home-status__sky {
    display: block;
  }
}

.home-word {
  font-family: var(--font-mono-medium);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.15em 0.4em;
  white-space: nowrap;
}

.home-word:hover,
.home-word:focus-visible {
  background: var(--fg);
  color: var(--accent);
}

.home-intro {
  position: relative;
  display: inline-block;
  margin: 0.5rem 0;
  text-align: left;
}

/* Photo sits behind; the photo's height defines the block */
.home-intro__photo {
  display: block;
  width: 192px;  /* 120% of the previous 160px */
  height: auto;
  /* translateY nudges the photo up without affecting the text, which is
     positioned against the container box (unchanged by transforms). */
  transform: translateY(-3%) rotate(2deg);
}

.home-line {
  display: block;
  white-space: nowrap;
}

/* Role line is a link → About page */
.home-intro__more {
  padding: 0 0.2em;
  margin: 0 -0.2em;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.home-intro__more:hover,
.home-intro__more:focus-visible {
  background: var(--fg);
  color: var(--accent);
}

/* Greeting tucks to the LEFT of the photo, aligned near its bottom (before the
   image — no overlap). `right` controls the gap from the photo; `bottom`
   raises/lowers it against the photo's bottom edge. */
.home-intro__greeting {
  position: absolute;
  right: 100%;        /* sit entirely to the left of the photo */
  bottom: 0;          /* align to the photo's bottom; raise with a positive value */
  margin: 0 0.7rem 0 0;  /* the 0.7rem is the gap from the photo */
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.95;
}

/* Role line sits BELOW the photo, aligned under its left edge.
   `left` nudges it sideways. */
.home-intro__role {
  position: absolute;
  top: 100%;          /* just below the photo */
  left: -3.5rem;      /* nudge left: more negative = further left */
  margin: 0 0 0 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.95;
}

/* ----- Mobile (option 1): stack the intro in normal flow -----
   Photo centred, then greeting, then role line — no tucking text beside/under
   the photo. Desktop layout is unchanged. To revert, delete this whole block. */
@media (max-width: 599px) {
  .home-intro {
    display: block;
    text-align: center;
  }
  .home-intro__photo {
    margin: 0 auto 1.25rem;
  }
  .home-intro__greeting {
    position: static;
    margin: 0; /* no extra gap — all three lines share the same line-height spacing */
    text-align: center;
  }
  .home-line {
    margin-left: 0 !important; /* override the inline per-line nudges */
  }
  .home-intro__role {
    position: static;
    left: auto;
    margin: 0;
    text-align: center;
    white-space: normal;
  }
}

/* ----- Wider screens: scatter the words at the chosen positions ----- */
@media (min-width: 760px) {
  .home-hero {
    padding: 0;
  }

  /* The stage becomes a plain positioning box; words are placed absolutely
     within it (so their left/top % map to the space above the greeting). */
  .home-stage {
    display: block;
  }

  .home-word {
    position: absolute;
    transform: translate(-50%, -50%); /* centre the word on its left/top point */
  }

  .home-intro {
    position: absolute;
    left: 51%;          /* raise to shift the whole intro block right */
    top: 44%;           /* lower this to nudge the intro block up */
    transform: translate(-50%, -50%);
    margin: 0;
  }
  /* NOTE: photo width and text font-size are intentionally NOT set here, so the
     single values up in the base rules (.home-intro__photo width / .home-intro__
     greeting + __role font-size) control the size on every screen. */
}