/* ---------------------------------------------------------------
   Palette
   terracotta #C05C35 · amber #EDA24E · cream #F7EDDB
   sage #A1B076 · olive #536036
   --------------------------------------------------------------- */

:root {
  --terracotta: #c05c35;
  --amber: #eda24e;
  --cream: #f7eddb;
  --sage: #a1b076;
  --olive: #536036;

  --bg: var(--cream);
  --text: var(--olive);
  --accent: var(--terracotta);
  --rule: rgba(83, 96, 54, 0.18);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */

.site-header {
  padding: 34px 36px 38px;
}

/*
 * The wordmark is centred on the page rather than placed in a middle grid
 * column. A three-column `1fr auto 1fr` grid forces both side columns to the
 * width of the wider one, so the broad left-hand nav reserved the same space
 * again on the icon side -- roughly 260px of nothing, which pushed the point
 * where the header stops fitting out past most laptop screens.
 */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: relative;
}

.nav-left {
  display: flex;
  gap: 32px;
}

.nav-left a {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-left a:hover,
.nav-left a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
}

.nav-right a {
  display: inline-flex;
  color: var(--text);
  transition: color 0.2s ease;
}

/* Sized here rather than on each <svg>, so the icons stay adjustable in one
   place instead of across four copies of the nav. */
.nav-right svg {
  width: 23px;
  height: 23px;
}

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

/* ---------------------------------------------------------------
   Home — intro line + image grid
   --------------------------------------------------------------- */

.intro {
  margin: 0 0 26px;
  padding: 0 32px;
  font-family: var(--display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(83, 96, 54, 0.65);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 32px 32px;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sage);
  text-decoration: none;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

/* Hovering lifts the tile off the page rather than zooming the picture. The
   raised tile is stacked above its neighbours so its shadow falls on them
   instead of being drawn underneath. */
.tile:hover,
.tile:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 20px 34px rgba(58, 62, 38, 0.3);
  z-index: 2;
}

.tile img,
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * Each tile carries its own tint, rotating through the palette so no two
 * neighbours match -- in a three-column grid a four-colour cycle keeps
 * left-right and up-down pairs different. The value is an RGB triplet rather
 * than a colour so the alpha can be set where it is used.
 */
.tile:nth-child(4n + 1) { --tint: 192, 92, 53; }   /* terracotta */
.tile:nth-child(4n + 2) { --tint: 83, 96, 54; }    /* olive */
.tile:nth-child(4n + 3) { --tint: 161, 176, 118; } /* sage */
.tile:nth-child(4n + 4) { --tint: 237, 162, 78; }  /* amber */

.tile-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: var(--cream);
  /*
   * Two layers: the palette tint, and a soft darkening over it. The tint alone
   * cannot be trusted to carry the text, because the lighter palette colours
   * over a bright photograph leave far too little contrast. The darkening is
   * kept gentle so the picture still reads, and the text carries a shadow of
   * its own for the bright patches this does not cover.
   */
  background:
    linear-gradient(to bottom, rgba(30, 28, 19, 0.34), rgba(30, 28, 19, 0.54)),
    rgba(var(--tint), 0.5);
}

/*
 * Plots and CAD screenshots sit on white, which gives the scrim far less to
 * work with than a photograph does -- the airfoil figure came out at 3.4:1
 * behind its caption on the standard treatment. Tiles carrying that kind of
 * media deepen the neutral layer instead.
 */
.tile--light-media .tile-caption {
  background:
    linear-gradient(to bottom, rgba(30, 28, 19, 0.52), rgba(30, 28, 19, 0.68)),
    rgba(var(--tint), 0.5);
}

.tile-title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
  /* Local contrast for the bright patches a gentle scrim cannot flatten */
  text-shadow: 0 1px 14px rgba(24, 22, 14, 0.75), 0 1px 3px rgba(24, 22, 14, 0.5);
}

.tile-meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
  text-shadow: 0 1px 10px rgba(24, 22, 14, 0.7), 0 1px 3px rgba(24, 22, 14, 0.5);
}

/* The lift is decorative motion, so drop it when the visitor asks for less.
   The shadow stays, leaving hover still visibly answered. */
@media (prefers-reduced-motion: reduce) {
  .tile {
    transition: box-shadow 0.2s ease;
  }

  .tile:hover,
  .tile:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Interior pages
   --------------------------------------------------------------- */

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 32px 80px;
}

h1 {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 12px;
}

h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 40px 0 10px;
}

.lede {
  font-size: 1.15rem;
  color: rgba(83, 96, 54, 0.85);
}

/* About */

.about-layout {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 20px;
}

.about-portrait {
  margin: 0;
}

.about-portrait img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.about-body p {
  margin: 0 0 18px;
}

.button {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--cream);
  background: var(--terracotta);
  padding: 12px 26px;
  transition: background 0.2s ease;
}

.button:hover {
  background: var(--olive);
}

.about-links {
  margin: 28px 0 22px;
}

.about-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.about-contact a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.about-contact a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Project pages */

/* Wide enough that a role and a date range stay on one line together; the
   body copy below keeps its own narrower measure for readability. */
.project-header {
  max-width: 900px;
  padding: 20px 0 36px;
}

.project-meta {
  font-family: var(--display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terracotta);
  margin: 0 0 20px;
}

/* A linked heading should still read as a heading, so the underline stays
   faint until the pointer is on it. */
.title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid rgba(192, 92, 53, 0.28);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.title-link:hover,
.title-link:focus-visible {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.project-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 92, 53, 0.4);
}

.project-meta a:hover {
  border-bottom-color: var(--terracotta);
}

/* Named collaborators, one role per row: label in a column of its own, person
   beside it. The column count is fixed rather than auto-fit, because auto-fit
   packs as many cells per row as will fit and separates a label from the name
   it belongs to as soon as the container gets wide enough. */
.people {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 28px;
  align-items: baseline;
  margin: 22px 0 0;
  max-width: 620px;
}

.people dt {
  font-family: var(--display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(83, 96, 54, 0.65);
}

.people dd {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.people a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.people a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Embedded PDF */

.paper {
  margin: 0 0 44px;
}

.paper-frame {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 460px;
  border: 1px solid var(--rule);
  background: #fff;
}

.paper figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(83, 96, 54, 0.7);
}

.paper figcaption a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 92, 53, 0.4);
}

.paper figcaption a:hover {
  border-bottom-color: var(--terracotta);
}

.doc-heading {
  margin: 0 0 14px;
}

/* Video keeps its own 16:9 shape rather than the document height used for PDFs. */
.video-embed {
  margin: 0 0 44px;
}

.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  background: #000;
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  margin-bottom: 10px;
}

.link-list a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 92, 53, 0.35);
  padding-bottom: 2px;
}

.link-list a:hover {
  border-bottom-color: var(--terracotta);
}

.citation {
  border-left: 2px solid var(--terracotta);
  padding-left: 20px;
  font-size: 0.95rem;
  line-height: 1.75;
}

.citation a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}

.citation a:hover {
  text-decoration: underline;
}

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

.project-figure {
  margin: 0 0 44px;
}

.project-figure img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Not every source is high resolution — the rover CAD views come from README
   screenshots only 393px wide. Stretched to the column they would be mush, so
   they are held near their native size and keep their own proportions. */
.project-figure--small {
  max-width: 520px;
}

.project-figure--small img {
  aspect-ratio: auto;
  height: auto;
}

/* A brandmark rather than a photograph: shown small and centred, contained
   rather than cropped (used for the team logo on rocket-liquids.html). */
.project-figure--brand {
  text-align: center;
  margin-bottom: 14px;
}

.project-figure--brand img {
  width: auto;
  max-width: 188px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* The team's own website, linked directly under the brandmark. */
.site-link {
  text-align: center;
  margin: 0 0 46px;
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.site-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 92, 53, 0.4);
  padding-bottom: 3px;
}

.site-link a:hover {
  border-bottom-color: var(--terracotta);
}

.project-figure figcaption,
.project-figure-row figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(83, 96, 54, 0.6);
}

/* A row of images that belong to one task, sharing a single caption (used on
   solar-car-suspension.html). Each is held at a fixed height and keeps its own
   proportions, so CAD renders, a short clip, and photos of different shapes
   still line up. The row wraps; on a phone each image takes the full width. */
.project-figure-row {
  margin: 0 0 44px;
}

.project-figure-row .row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.project-figure-row figcaption {
  max-width: 680px;
}

.project-figure-row img,
.project-figure-row video {
  height: 300px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: #efe6d3;
  border: 1px solid rgba(83, 96, 54, 0.15);
}

@media (max-width: 680px) {
  .project-figure-row img,
  .project-figure-row video {
    height: auto;
    width: 100%;
  }
}

.project-text {
  max-width: 680px;
}

.project-text p {
  margin: 0 0 18px;
}

/* rocket-liquids.html is split into the two roles Aras has held on the team.
   Each role is an <h2.role-heading> with its own date line under it, and the
   work inside a role is broken into <h3> sections. The second role carries a
   rule above it to separate the two. */
.role-heading {
  font-size: 1.9rem;
  margin: 52px 0 4px;
}

.role-heading--between {
  margin-top: 76px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
}

.role-dates {
  font-family: var(--display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(83, 96, 54, 0.55);
  margin: 0 0 18px;
}

.project-text h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 34px 0 8px;
}

.project-text ol,
.project-text ul {
  max-width: 640px;
  padding-left: 22px;
}

.project-text li {
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------
   Source-code listings (used on the MAE 146 page)

   A plain no-build site has no syntax highlighter, so the listings
   are unstyled monospace on a faint panel. They are allowed to run
   wider than the 680px prose measure and scroll sideways inside
   their own box rather than widening the page.
   --------------------------------------------------------------- */
.code {
  margin: 0 0 40px;
  max-width: 860px;
}

.code figcaption {
  font-family: var(--display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terracotta);
  margin: 0 0 8px;
}

.code pre {
  margin: 0;
  padding: 18px 20px;
  background: rgba(83, 96, 54, 0.06);
  border-left: 2px solid var(--sage);
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #3f4a2c;
  tab-size: 4;
}

/* A run of console output printed straight after a listing. */
.code pre.output {
  background: rgba(30, 28, 19, 0.04);
  border-left-color: rgba(83, 96, 54, 0.35);
  color: rgba(63, 74, 44, 0.85);
}

/* Long or supporting listings collapse behind a summary line. */
details.code > summary {
  font-family: var(--display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terracotta);
  cursor: pointer;
  margin-bottom: 8px;
}

details.code[open] > summary {
  margin-bottom: 12px;
}

.hw-section {
  max-width: 680px;
}

.hw-section h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 30px 0 8px;
}

.back-link {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
}

.back-link a {
  text-decoration: none;
}

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

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.site-footer {
  padding: 30px 32px 40px;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.site-footer p {
  margin: 0;
}

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

.site-footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

/*
 * Stack the header before the centred wordmark can reach the nav links. The
 * full name set at this size is wide, so the two collide at about 1240px --
 * on smaller laptops, not just tablets. Measured, not guessed: at 1180px the
 * wordmark overlapped "Resume" by 15px.
 */
@media (max-width: 1260px) {
  .header-inner {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
  }

  .wordmark {
    position: static;
    transform: none;
    order: 1;
  }

  .nav-left {
    order: 2;
  }

  .nav-right {
    order: 3;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* The portrait keeps its 3:4 shape when the layout stacks. Widening it to
     landscape here would crop a head-and-shoulders photograph down to a band
     across the face. */
  .about-portrait {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 20px 20px 24px;
  }

  .nav-left {
    gap: 22px;
  }

  .nav-left a {
    font-size: 0.95rem;
  }

  .wordmark {
    font-size: 1.2rem;
  }

  .intro,
  .grid,
  .page,
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

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

  h1 {
    font-size: 2rem;
  }

  .role-heading {
    font-size: 1.5rem;
  }

  /* Label and name side by side is too wide for a phone; stack them. */
  .people {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .people dd {
    margin-bottom: 14px;
  }
}