/* Colour variables: define a colour once, then reuse its name throughout the stylesheet. */
:root {
  --navy: #102a43; /* The main dark navy blue. */
  --navy-light: #1f4b70; /* A lighter navy used for subtle contrast. */
  --bronze: #b77935; /* The main bronze accent colour. */
  --bronze-light: #d69e4b; /* A lighter bronze used on dark backgrounds. */
  --cream: #f8f5ee; /* The warm off-white page background. */
  --white: #ffffff; /* Pure white, mainly for card backgrounds. */
  --text: #243b53; /* A readable dark blue-grey for normal text. */
}

/* The star selects every element, making sizing easier to predict. */
* {
  box-sizing: border-box; /* Padding and borders count inside a width instead of adding to it. */
}

/* This makes links scroll smoothly to sections instead of jumping instantly. */
html {
  scroll-behavior: smooth;
}

/* Default styles for the visible page. */
body {
  margin: 0; /* Removes the browser's default outer gap. */
  background: var(--cream); /* Uses the cream colour variable as the background. */
  color: var(--text); /* Sets the default text colour. */
  font-family: Arial, Helvetica, sans-serif; /* Chooses a readable font, with fallback options. */
  line-height: 1.6; /* Gives regular text comfortable space between lines. */
}

/* Removes default top margins so CSS controls spacing consistently. */
h1, h2, h3, p {
  margin-top: 0;
}

/* Styles the dark top portion of the page. */
.site-header {
  background-color: var(--navy); /* Provides the navy fallback behind the image. */
  background-image: linear-gradient(rgba(16, 42, 67, 0.58), rgba(16, 42, 67, 0.58)), url("images/engineering-render.png"); /* Places a lighter semi-transparent navy layer over the engineering render, keeping it visible. */
  background-position: center center; /* Centres the engine image horizontally and vertically without changing the header's size. */
  background-repeat: no-repeat; /* Prevents the image from repeating if the header is larger than it. */
  background-size: cover; /* Scales the image until it fully covers the header. */
  color: var(--white); /* Makes text inside the header white by default. */
}

/* Centres header content and positions the logo and links in one horizontal row. */
.navigation {
  width: min(1100px, calc(100% - 48px)); /* Limits width on big screens and leaves side space on smaller ones. */
  min-height: 76px; /* Gives the navigation a consistent height. */
  margin: 0 auto; /* Centres the navigation container. */
  display: flex; /* Places the logo and link group in a row. */
  align-items: center; /* Centres the row's items vertically. */
  justify-content: space-between; /* Pushes the logo left and the links right. */
}

/* Styles the initials logo. */
.logo {
  color: var(--bronze-light); /* Makes the logo bronze. */
  font-size: 1.3rem; /* Enlarges the initials. */
  font-weight: 800; /* Makes the initials bold. */
  letter-spacing: -0.08em; /* Pulls the letters slightly closer together. */
  text-decoration: none; /* Removes the normal underline from the link. */
}

/* Keeps the two navigation links in a row with space between them. */
.nav-links {
  display: flex;
  gap: 24px;
}

/* Styles navigation links. */
.nav-links a {
  color: var(--white);
  font-size: 0.95rem;
  text-decoration: none;
}

/* Changes a navigation link's colour when a mouse hovers over it. */
.nav-links a:hover {
  color: var(--bronze-light);
}

/* Creates the large introductory hero area. */
.hero {
  width: min(1100px, calc(100% - 48px));
  min-height: 530px;
  margin: 0 auto;
  padding: 90px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A reusable small, capital-letter label. */
.eyebrow {
  margin-bottom: 16px;
  color: var(--bronze); /* Bronze makes this small text stand out. */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* The main heading is responsive: it grows with screen width, within safe limits. */
h1 {
  max-width: 820px;
  margin-bottom: 24px;
  font-size: clamp(3.25rem, 8vw, 6.8rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

/* Styles the supporting text beneath the heading. */
.hero-text {
  max-width: 580px;
  margin-bottom: 34px;
  color: #d9e2ec;
  font-size: 1.2rem;
}

/* Gives the hero link the appearance of a button. */
.button {
  align-self: flex-start;
  padding: 13px 20px;
  background: var(--bronze);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

/* Gives visitors feedback when they point at the button. */
.button:hover {
  background: var(--bronze-light);
  color: var(--navy);
}

/* Centres the normal page sections and gives them breathing room. */
.projects-section, .contact-section {
  width: min(1200px, calc(100% - 48px)); /* Lets project rows use more room on large displays while remaining centred. */
  margin: 0 auto;
  padding: 110px 0;
}

/* Styles section-level headings. */
h2 {
  margin-bottom: 16px;
  color: var(--navy);
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.06em;
}

/* Limits the introductory text line width. */
.section-intro {
  max-width: 600px;
  margin-bottom: 42px;
  font-size: 1.1rem;
}

/* Uses CSS Grid with one column, so projects appear as a top-to-bottom list. */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Styles each project as an image-and-text row rather than a panel. */
.project-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); /* Both columns are allowed to shrink with the window. */
  gap: 48px;
  padding: 0 0 48px;
  border-bottom: 1px solid #cbd2d9;
}

/* Removes the separator below the final project. */
.project-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Makes the placeholder image fill its column without stretching. */
.project-image {
  width: 100%;
  aspect-ratio: 16 / 10; /* Keeps a consistent image shape at every screen size. */
  object-fit: contain; /* Shows the complete project image instead of cropping its edges. */
  background: var(--navy); /* Fills any unused space around images with navy. */
}

/* Adds a little space above the written information. */
.project-details {
  padding-top: 8px;
}

/* Styles the project date. */
.project-date, .tools {
  color: var(--bronze);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Styles each project title. */
h3 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 1.55rem;
  letter-spacing: -0.035em;
}

/* Pushes the tools line away from the description. */
.tools {
  display: none; /* Hides the old tool placeholder, leaving only the requested sections. */
}

/* Styles the “What I did” and “What I learned” labels. */
h4 {
  margin: 22px 0 4px;
  color: var(--navy-light);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Creates a full-width navy contact area while keeping its content aligned with the rest of the page. */
.contact-section {
  width: 100%;
  padding-right: max(24px, calc((100% - 1100px) / 2));
  padding-left: max(24px, calc((100% - 1100px) / 2));
  background: var(--navy);
  color: var(--white);
}

/* Makes the contact heading readable on its navy background. */
.contact-section h2 {
  color: var(--white);
}

/* Styles the email link. */
.contact-section a {
  color: var(--bronze-light);
  font-size: 1.2rem;
  font-weight: 700;
}

/* Styles the bottom line of the page. */
.site-footer {
  padding: 24px;
  background: #0b1f33;
  color: #bcccdc;
  font-size: 0.9rem;
  text-align: center;
}

/* At tablet width and below, put each project image above its description. */
@media (max-width: 850px) {
  .project-card {
    grid-template-columns: 1fr; /* Prevents narrow side-by-side content from being squeezed or cut off. */
    gap: 22px;
  }
}

/* These rules apply only when the screen is 650px wide or narrower, such as a phone. */
@media (max-width: 650px) {
  .navigation, .hero, .projects-section {
    width: min(100% - 32px, 1100px); /* Uses smaller side gaps on compact screens. */
  }

  .nav-links {
    gap: 16px; /* Reduces space between navigation links. */
  }

  .hero {
    min-height: 480px; /* Keeps the hero from using too much vertical phone space. */
  }

  .projects-section, .contact-section {
    padding-top: 75px;
    padding-bottom: 75px;
  }

}

/* CAD project links and screenshot gallery. */
.cad-image-link { display: block; }
.project-title-link { color: inherit; text-decoration: none; }
.project-title-link:hover { text-decoration: underline; }
.cad-project-link { color: var(--navy-light); font-weight: 700; }
.cad-home { color: var(--white); text-decoration: none; font-weight: 700; }
a:focus-visible { outline: 3px solid var(--bronze-light); outline-offset: 5px; }
.cad-header { background-image: none; }

/* Drone V1 header photo with a navy overlay for readable text. */
.drone-header {
  background-image: linear-gradient(rgba(16, 42, 67, 0.65), rgba(16, 42, 67, 0.65)), url('images/drone-v1/header-front-view.png');
}

.cad-hero { min-height: 340px; padding: 64px 0; }
.cad-hero .eyebrow { color: var(--bronze-light); }
.cad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.cad-item { min-width: 0; border-bottom: 1px solid #cbd2d9; padding-bottom: 24px; }
.cad-image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: var(--white); }
.cad-details { padding-top: 24px; }
.cad-details .project-date { margin-bottom: 8px; }
.cad-details p:last-child { margin-bottom: 0; }
@media (max-width: 850px) {
  .cad-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 650px) {
  .cad-header .navigation { flex-wrap: wrap; gap: 12px; padding: 18px 0; }
  .cad-hero { min-height: 300px; padding: 48px 0; }
}

/* Smaller printed-part photo directly below the CAD image. */
.cad-secondary-photo { width: 150px; max-width: 45%; margin-top: 12px; }
.cad-secondary-photo img { display: block; width: 100%; height: auto; border-radius: 4px; }

.cad-photo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }

/* Full-size image overlay, closed with X, Escape, or the dark background. */
.image-viewer {
  position: fixed; inset: 0; margin: 0; border: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  padding: 64px 24px 24px; background: rgba(8, 18, 28, 0.95);
}
.image-viewer[open] { display: flex; align-items: center; justify-content: center; }
.image-viewer::backdrop { background: rgba(0, 0, 0, 0.65); }
.image-viewer img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.image-viewer-close {
  position: absolute; top: 12px; right: 16px; width: 44px; height: 44px;
  border: 1px solid #fff; border-radius: 50%; background: #102a43;
  color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
}
.image-viewer-close:hover { background: #1f4b70; }
.image-viewer-close:focus-visible { outline: 3px solid #d69e4b; outline-offset: 3px; }
/* Drone project write-up and editable project facts. */
.drone-section { margin-bottom: 72px; }
.drone-section > p { max-width: 760px; }
.drone-section h3 { margin-top: 28px; }
.drone-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; }
.drone-facts div { border-top: 1px solid #cbd2d9; padding-top: 16px; }
.drone-facts dt { font-weight: 700; color: var(--navy); }
.drone-facts dd { margin: 6px 0 0; }
.drone-gallery .cad-image { background: var(--white); }
.drone-section:last-child { margin-bottom: 0; }
@media (max-width: 650px) { .drone-facts { grid-template-columns: 1fr; } }
.drone-build-photo { width: min(100%, 640px); margin: 24px 0; }
.drone-build-photo img { display: block; width: 100%; height: auto; }
.drone-build-photo figcaption { margin-top: 8px; color: var(--navy-light); font-size: 0.9rem; }

/* High-school turbojet project. */
.jet-header {
  background-image: linear-gradient(90deg, rgba(16,42,67,.94), rgba(16,42,67,.64)), url("images/jet-engine/impeller.png");
  background-position: center, 75% center;
}
.jet-header h1 { max-width: 850px; }
.jet-assembly { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; margin: 24px 0 48px; }
.jet-assembly .drone-build-photo { margin: 0; width: 100%; }
.jet-assembly img { max-height: 520px; object-fit: contain; background: #242424; }
.jet-components { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.jet-components .cad-image { height: auto; background: #eff2f4; aspect-ratio: 7 / 5; }
.jet-draft { border-left: 3px solid var(--bronze-light); padding: 12px 20px; background: #f0ede7; }
@media (max-width: 850px) { .jet-components { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .jet-assembly { grid-template-columns: 1fr; gap: 16px; } }