/* ==========================================================================
   STYLES.CSS
   --------------------------------------------------------------------------
   SECTION 1 below is the dashboard: colours, fonts, and sizes.
   Change values there to restyle the whole site.
   Sections 2 onward are the layout. You can leave them alone.
   ========================================================================== */


/* ==========================================================================
   1. THE DASHBOARD  -  edit these values
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@500;600;700&family=IBM+Plex+Sans:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {

  /* --- Colours -------------------------------------------------------
     Sampled from the boards themselves: navy soldermask, gold ENIG pads,
     and the pale blue-grey of drafting paper. Swap any hex code. --- */
  --paper:  #ECEFF1;   /* page background                         */
  --sheet:  #F8FAFB;   /* project panels, sits on top of --paper  */
  --ink:    #0E2338;   /* body text, headings                     */
  --muted:  #5A6B7C;   /* labels, captions, secondary text        */
  --rule:   #C2CAD1;   /* hairlines and borders                   */
  --board:  #16324F;   /* dark blocks: top bar, closing section   */
  --brass:  #9A6E24;   /* the one accent. Links, status badges.   */

  /* --- Type ----------------------------------------------------------
     To change a typeface, pick one at fonts.google.com, swap the name
     here, AND update the @import URL above (family list + weights). --- */
  --font-display: "IBM Plex Sans", system-ui, sans-serif;   /* headings, labels */
  --font-body: "DM Sans", Georgia, serif;      /* paragraphs       */

  --text-base: 1.0625rem;   /* body size. 1rem = 16px               */
  --leading: 1.62;          /* line spacing on paragraphs           */

  /* --- Sizing --------------------------------------------------------
     --measure caps how wide paragraphs get, for comfortable reading. */
  --page-max: 76rem;        /* widest the content ever gets         */
  --measure: 34rem;         /* widest a paragraph gets              */
  --radius: 3px;            /* corner rounding. 0 for hard corners. */
}


/* ==========================================================================
   2. FOUNDATIONS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brass); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

.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;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--board); color: #fff; padding: .7rem 1.1rem;
  font-family: var(--font-display); text-decoration: none;
}
.skip:focus { left: 0; }

/* Sections set their own gutters so the dark closing block can run
   full width while its text stays aligned with everything above it. */
.hero,
.work,
.documents,
.closing-inner,
.foot p {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}


/* ==========================================================================
   3. TOP BAR
   ========================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  align-items: baseline;
  background: transparent;
  padding: .8rem clamp(1.25rem, 4vw, 3rem);
  transition: background .3s ease, box-shadow .3s ease;
}
.topbar.scrolled {
  background: var(--board);
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* Hidden until the page scrolls up over the big centred name on the
   banner, so only one version of the name is ever on screen. */
.topbar-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.topbar-name.visible {
  opacity: 1;
  pointer-events: auto;
}

.topbar-nav { display: flex; flex-wrap: wrap; gap: 1.15rem; }

.topbar-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: #B9C7D4;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.topbar-nav a:hover { color: #fff; border-bottom-color: var(--brass); }


/* ==========================================================================
   3b. BANNER  -  full-screen image behind the transparent top bar
   ========================================================================== */
.banner {
  position: fixed;
  inset: 0;
  z-index: -1;
  height: 100vh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  background: var(--board);
  will-change: transform;
}

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

/* Slideshow: every photo occupies the same box, and only the active
   one is opaque, so advancing is a plain cross-fade. */
.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.banner-slide.is-active { opacity: 1; }

.banner .ph { height: 100%; border: 0; border-radius: 0; }

/* A light scrim over the photo so the centred name stays legible
   whatever the image behind it happens to be. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(6, 18, 30, .3);
  pointer-events: none;
}

/* Name + subtitle centred in the visible part of the banner photo.
   Moves and gets covered along with the image as the page scrolls.
   The 75vh height matches the spacer, so the text centres in the
   part of the photo the page content does not already overlap. */
.banner-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 75vh;
  height: 75svh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  color: #fff;
}

.banner-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: .95;
  letter-spacing: -0.03em;
  margin: 0 0 .6rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}

.banner-subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(.95rem, 1.7vw, 1.25rem);
  letter-spacing: .04em;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

.banner-scroll-hint {
  position: fixed;
  left: 50%;
  bottom: clamp(.4rem, 1.5vh, .9rem);
  z-index: 10;
  transform: translateX(-50%);
  color: #000;
  opacity: .85;
  animation: banner-bob 1.8s ease-in-out infinite;
  transition: opacity .3s ease;
  pointer-events: none;
}
.banner-scroll-hint.hidden { opacity: 0; }

@keyframes banner-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* Reserves the banner's space in normal document flow. Only 3/4 of
   the banner's height so the page content already overlaps the
   bottom quarter of it at rest, then keeps scrolling up over it. */
.banner-spacer {
  height: 75vh;
  height: 75svh;
}

/* Opaque so it visually covers the fixed banner as it scrolls over it. */
main {
  position: relative;
  background: var(--paper);
}


/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
  padding-top: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.hero-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* The highest-value line on the page - its own boxed treatment so it
   reads before the title block's plain label/value rows. */
.experience-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .85rem;
}

.experience-badges {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.experience-badge {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

/* Company logo. Sized so the role + season stack beside it reads at
   about the same height. */
.experience-logo {
  flex: 0 0 auto;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.experience-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.experience-logo .ph {
  height: 100%;
  border-radius: var(--radius);
  font-size: .5rem;
  line-height: 1.2;
  padding: .2rem;
}

.experience-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.experience-role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.experience-meta {
  font-size: 1.05rem;
  color: var(--muted);
}

/* The title block, borrowed from the corner of a drawing sheet. */
.titleblock {
  margin: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.titleblock > div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
}
.titleblock > div:last-child { border-bottom: 0; }

.titleblock dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted);
  padding-top: .08em;
}

.titleblock dd {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.45;
}

.titleblock dd .line-break { display: block; margin-top: .5em; }

/* One deliberate page-load moment, and only here. */
.experience, .titleblock {
  animation: rise .7s cubic-bezier(.2,.7,.3,1) both;
}
.titleblock { animation-delay: .14s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   5. HERO FIGURE
   ========================================================================== */
.hero-figure {
  display: flex;
  flex-direction: column;
}

.hero-figure img {
  width: 100%;
  flex: 1;
  min-height: clamp(22rem, 46vw, 36rem);
  object-fit: cover;
  border-radius: var(--radius);
}

.hero-figure figcaption,
.gallery-caption {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .6rem;
}


/* ==========================================================================
   5b. SUMMARY  -  short centered welcome, directly below the banner
   ========================================================================== */
.summary {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
  scroll-margin-top: 5rem;
}

.summary-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.summary-text {
  max-width: 46rem;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
}


/* ==========================================================================
   6. PLACEHOLDERS  (shown wherever an image has not been added yet)
   ========================================================================== */
.ph {
  display: grid;
  place-items: center;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      rgba(14,35,56,.045) 11px 22px
    ),
    var(--sheet);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .82rem;
  padding: 1.5rem;
}

.hero-figure .ph { flex: 1; min-height: clamp(22rem, 46vw, 36rem); }


/* ==========================================================================
   7. PROJECTS
   ========================================================================== */
.work {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  scroll-margin-top: 5rem;
}

.work-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* Collapsed cards in a scannable grid; an opened card spans the
   full row to make room for its detail. */
#projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.project {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  scroll-margin-top: 5rem;
  overflow: hidden;
}
.project[open] { grid-column: 1 / -1; }

.project-summary {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  cursor: pointer;
  list-style: none;
}
.project-summary::-webkit-details-marker { display: none; }
.project-summary:hover .project-title { color: var(--brass); }

.project-thumb {
  flex: 0 0 clamp(9rem, 22vw, 15rem);
  width: clamp(9rem, 22vw, 15rem);
  height: clamp(6.5rem, 15vw, 10.5rem);
  border-radius: var(--radius);
  overflow: hidden;
}
.project-thumb img,
.project-thumb .ph { width: 100%; height: 100%; object-fit: cover; }
.project-thumb .ph { font-size: .58rem; padding: .4rem; }

.project-summary-text { flex: 1; min-width: 0; }

.project-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .8rem;
  margin-top: .35rem;
  transition: transform .2s ease;
}
.project[open] .project-chevron { transform: rotate(180deg); }

.project-blurb {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
  max-width: 52rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .8rem;
}

.project-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 auto 0 0;
  transition: color .15s ease;
}

.project-dates {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap;
}

.project-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule);
}

/* A card with no images gives its text the full width. */
.project-body.no-gallery { grid-template-columns: 1fr; }

/* --- prose column --- */
.field { margin-bottom: 1.6rem; }
.field:last-child { margin-bottom: 0; }

.field-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
  margin: 0 0 .3rem;
}

.field p {
  margin: 0;
  max-width: var(--measure);
}

.spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.spec-list li {
  position: relative;
  padding-left: 1.15rem;
  padding-block: .3rem;
  border-bottom: 1px solid var(--rule);
  font-size: .97rem;
  line-height: 1.5;
}
.spec-list li:last-child { border-bottom: 0; }

.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: .5rem;
  height: 1px;
  background: var(--brass);
}

/* --- image column --- */
.gallery-main { margin-bottom: .6rem; }

.gallery-main img,
.gallery-main .ph {
  width: 100%;
  height: clamp(13rem, 30vw, 21rem);
  object-fit: cover;
  border-radius: var(--radius);
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.thumb {
  width: 4.75rem;
  height: 3.4rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: var(--muted); }
.thumb[aria-current="true"] { border-color: var(--brass); border-width: 2px; }

.thumb .ph { height: 100%; border: 0; font-size: .6rem; padding: .25rem; }


/* ==========================================================================
   7c. DOCUMENTS  -  resume and portfolio, previewed and downloadable
   ========================================================================== */
.documents { padding-block: clamp(2rem, 5vw, 3.5rem); scroll-margin-top: 5rem; }

.documents-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.doc {
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.doc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 .35rem;
}

.doc-blurb {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
}

/* The browser's built-in PDF viewer fills this box. */
.doc-preview {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  margin-bottom: 1rem;
}

.doc-preview iframe {
  display: block;
  width: 100%;
  height: clamp(20rem, 42vh, 30rem);
  border: 0;
}

.doc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.doc-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .55rem 1rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.doc-btn:hover { border-color: var(--brass); color: var(--brass); }

.doc-btn-primary {
  background: var(--board);
  border-color: var(--board);
  color: #fff;
}
.doc-btn-primary:hover { background: var(--brass); border-color: var(--brass); color: #fff; }


/* ==========================================================================
   8. CLOSING + FOOTER
   ========================================================================== */
.closing {
  background: var(--board);
  color: #E4EAF0;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* .closing-inner gets its width from the shared rule near the top. */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem 2rem;
}

.contact-list dt,
.contact-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .76rem;
  color: #93A7B9;
  margin-bottom: .15rem;
}

.contact-list a {
  color: #fff;
  font-size: 1rem;
  text-decoration-color: var(--brass);
}
.contact-list a:hover { color: #FFD9A0; }

.foot {
  padding-block: 1.6rem;
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--muted);
}
.foot p { margin-block: 0; }


/* ==========================================================================
   9. NARROW SCREENS
   ========================================================================== */
@media (max-width: 60rem) {
  .hero { grid-template-columns: 1fr; align-items: start; gap: 2.25rem; }
  .project-body { grid-template-columns: 1fr; }
  .project-body .gallery { order: -1; }   /* image first on mobile */
}

/* Mobile browsers will not reliably render a PDF inline, so drop the
   preview there and leave the Open / Download buttons to do the work. */
@media (max-width: 40rem) {
  .doc-preview { display: none; }
}

@media (max-width: 34rem) {
  .titleblock > div { grid-template-columns: 1fr; gap: .1rem; }
  .project-title { margin-right: 0; width: 100%; }
}