/* ==========================================================
   Design tokens
   Colours eyeballed from the Figma canvas — swap for exact
   Inspect values when available. Sizes are from Figma layers.
   ========================================================== */
:root {
  --teal:   #0f6a6e;
  --gold:   #c9992d;
  --olive:  #7e7637;
  --sand:   #e4cdb5;
  --rust:   #9b5b1e;
  --card:   #dadada;
  --ink:    #111111;
  --white:  #ffffff;

  /* TODO: confirm font names from Figma */
  --font-display: 'Comfortaa', system-ui, sans-serif;   /* Campbell / Smith / section headings */
  --font-hero:    'Comfortaa', system-ui, sans-serif;   /* "Kia Ora!" — placeholder, real font TBC */
  --font-body:    Arial, Helvetica, sans-serif;

  /* Figma: page 1408, content 1280 */
  --page-max: 1280px;
  --gutter: 64px;

  /* Figma layer sizes */
  --band-top: 138px;      /* Rectangle 1 */
  --band-bottom: 128px;   /* Rectangle 2 */
  --brand-col: 356px;     /* space left of nav strip */
  --nav-strip: 996px;     /* frame "Images" */
  --hero-h: 286px;        /* Hero 1 */
  --heading-row: 118px;   /* Frame 18 */
  --card-row: 316px;      /* Frame 19 / 20 */
  --card-gap: 50px;       /* Rectangle 8 / 10 */
  --footer-h: 112px;      /* Frame 21 */
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
}

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

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header ---------- */
.header-top    { background: var(--teal); }
.header-bottom { background: var(--gold); }

.header-row {
  display: flex;
  align-items: center;
}
.header-top .header-row {
  min-height: var(--band-top);
  justify-content: space-between;
}
.header-bottom .header-row {
  min-height: var(--band-bottom);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  text-decoration: none;
  flex: none;
}
.brand-first { color: var(--gold); }
.brand-last  { color: var(--teal); width: var(--brand-col); }

.sun-icon {
  width: 132px;
  height: 132px;
  flex: none;
}

/* Nav strip — clipped at the page edge, scrolls infinitely.
   app.js duplicates the pill run so the loop is seamless. */
.site-nav {
  flex: 1 1 auto;
  max-width: var(--nav-strip);
  margin-right: calc(-1 * var(--gutter));   /* clip at page edge, as in Figma */
  overflow: hidden;
}

.site-nav-track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding: 4px 0;
}

/* Set once app.js has cloned the run; --marquee-dur is written by app.js
   from the measured run width so speed stays constant at any pill count. */
.site-nav--running .site-nav-track {
  animation: nav-marquee var(--marquee-dur, 40s) linear infinite;
}
.site-nav--running:hover .site-nav-track,
.site-nav--running:focus-within .site-nav-track {
  animation-play-state: paused;
}

@keyframes nav-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--run-width))); }
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rust);
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  height: 36px;
  padding: 0 24px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}

/* ---------- Brand font cycle ----------
   The Figma Header component has 12 variants; "Campbell" steps through them
   and holds on the initial (Default) face. Font names below are PLACEHOLDERS
   pending Campbell's real list — swap the font-family values only. */
.brand-first { transition: none; }

.brand-font-0  { font-family: 'Comfortaa', system-ui, sans-serif; font-weight: 700; font-style: normal; }
.brand-font-1  { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-style: normal; }
.brand-font-2  { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-style: italic; }
.brand-font-3  { font-family: 'Bebas Neue', Impact, sans-serif;   font-weight: 400; font-style: normal; }
.brand-font-4  { font-family: 'Lora', Georgia, serif;             font-weight: 400; font-style: normal; }
.brand-font-5  { font-family: 'Dancing Script', cursive;          font-weight: 700; font-style: normal; }
.brand-font-6  { font-family: 'Courier Prime', monospace;         font-weight: 400; font-style: normal; }
.brand-font-7  { font-family: 'Abril Fatface', Georgia, serif;    font-weight: 400; font-style: normal; }
.brand-font-8  { font-family: 'Josefin Sans', system-ui, sans-serif; font-weight: 600; font-style: normal; }
.brand-font-9  { font-family: 'Caveat', cursive;                  font-weight: 700; font-style: normal; }
.brand-font-10 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-style: italic; }
.brand-font-11 { font-family: 'Space Mono', monospace;            font-weight: 700; font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .site-nav--running .site-nav-track { animation: none; }
  .site-nav { overflow-x: auto; }
}

/* Full-portfolio variant: single-line italic brand + centred banner text */
.header-top--single .brand {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  color: var(--gold);
}
.header-bottom--banner .header-row {
  justify-content: center;
  min-height: 100px;
}
.banner-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  color: var(--teal);
  text-align: center;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--sand);
  text-align: center;
}
.hero .page {
  min-height: var(--hero-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 40px;
}

.hero-title {
  margin: 0 0 20px;
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
}

.hero-text {
  margin: 0 auto 32px;
  font-size: 24px;
  max-width: 1100px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn--dark  { background: var(--ink);  color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); border-color: #cfcfcf; }

/* ---------- Projects ---------- */
.projects { background: var(--olive); }
.projects .page { padding-bottom: var(--card-gap); }

.section-title {
  margin: 0;
  min-height: var(--heading-row);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  text-align: center;
  color: var(--teal);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap) 25px;
}

.project-card {
  background: var(--card);
  border-radius: 50px;
  height: var(--card-row);
  overflow: hidden;
}

/* ---------- About ---------- */
.about { background: var(--sand); }
.about .page {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 64px;
}

.about-photo {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--ink);
}

.about-content p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 68ch;
}

.about-facts {
  margin: 0;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 68ch;
}
.about-facts li { margin-bottom: 10px; }

/* ---------- Footer / Contact ---------- */
.site-footer {
  background: var(--gold);
  color: var(--teal);
}
.site-footer .page {
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
}

.footer-location {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
}

.footer-email {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--teal);
}

.linkedin-icon {
  width: 40px;
  height: 40px;
  color: var(--ink);
}

/* ---------- Full-portfolio page ----------
   Six discipline bands whose gradients run into one another, each
   separated by a sand rule, as in the Figma. */

/* Discipline nav strip under the banner */
.disc-nav-bar { background: var(--sand); }
.disc-nav-bar .page { padding-top: 14px; padding-bottom: 14px; }
.disc-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* Each pill takes the colour its band opens with, so it reads as a key to
   that section. Sand text as on the band titles; the one-offs band is too
   light for sand, so it takes ink. */
.disc-nav .pill { color: var(--sand); }
.disc-nav .pill[href="#ui-ux"]          { background: var(--rust); }
.disc-nav .pill[href="#coding"]         { background: #8a6a1f; }
.disc-nav .pill[href="#graphic-design"] { background: #3f6a56; }
.disc-nav .pill[href="#photography"]    { background: #17565c; }
.disc-nav .pill[href="#3d-design"]      { background: #2c3f31; }
.disc-nav .pill[href="#ai-exploration"] { background: #6b6a38; }
.disc-nav .pill[href="#one-offs"]       { background: #a98a2f; color: var(--ink); }

/* Bands */
.disc { position: relative; }
.disc + .disc::before,
.site-footer::before {
  content: "";
  display: block;
  height: 10px;
  background: var(--sand);
}
.disc + .disc::before { position: absolute; top: 0; left: 0; right: 0; }

.disc .page {
  padding-top: 56px;
  padding-bottom: 64px;
}

.disc-title {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  text-align: center;
  color: var(--sand);
}

/* Cards centre when a section has fewer than three projects, so a short
   section never leaves a hole in the row. */
.disc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 34px;
}

.disc-card {
  flex: 0 1 calc((100% - 68px) / 3);
  min-width: 240px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: transform .18s ease;
}
.disc-card-img {
  display: block;
  background: var(--card);
  border: 4px solid var(--sand);
  border-radius: 44px;
  aspect-ratio: 410 / 300;
  overflow: hidden;
}
.disc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.disc-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--sand);
  text-align: center;
  text-wrap: balance;
}
.disc-card:hover,
.disc-card:focus-visible { transform: translateY(-4px); }
.disc-card:focus-visible { outline: 3px solid var(--sand); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .disc-card { transition: none; }
  .disc-card:hover, .disc-card:focus-visible { transform: none; }
}

/* Band gradients — each ends on the colour the next one starts from,
   so the seven sections read as one continuous fall from rust to gold. */
.disc--ui-ux          { background: linear-gradient(180deg, var(--rust) 0%, #8a6a1f 100%); }
.disc--coding         { background: linear-gradient(180deg, #8a6a1f 0%, var(--olive) 45%, #3f6a56 100%); }
.disc--graphic-design { background: linear-gradient(180deg, #3f6a56 0%, var(--teal) 55%, #17565c 100%); }
.disc--photography    { background: linear-gradient(180deg, #17565c 0%, #245046 60%, #2c3f31 100%); }
.disc--3d-design      { background: linear-gradient(180deg, #2c3f31 0%, #4d5730 60%, #6b6a38 100%); }
.disc--ai-exploration { background: linear-gradient(180deg, #6b6a38 0%, var(--olive) 50%, #a98a2f 100%); }
.disc--one-offs       { background: linear-gradient(180deg, #a98a2f 0%, var(--gold) 100%); }

.disc-note {
  margin: -24px 0 34px;
  text-align: center;
  color: var(--sand);
  opacity: .85;
  font-size: 15px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .brand-last { width: auto; margin-right: 32px; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .disc-card { flex-basis: calc((100% - 34px) / 2); }
}

@media (max-width: 800px) {
  :root { --gutter: 20px; }
  .header-top .header-row, .header-bottom .header-row { min-height: 0; padding: 20px 0; }
  .header-bottom .header-row { flex-wrap: wrap; gap: 16px; }
  .brand-last { width: 100%; margin-right: 0; }
  .site-nav { max-width: 100%; }
  .pill { font-size: 14px; height: 32px; padding: 0 20px; }
  .sun-icon { width: 80px; height: 80px; }

  .hero-text { font-size: 18px; }

  .project-grid { grid-template-columns: 1fr; gap: 32px; }
  .disc-grid { gap: 26px; }
  .disc-card { flex-basis: 100%; }
  .disc-card-img { border-radius: 32px; border-width: 3px; }
  .disc .page { padding-top: 36px; padding-bottom: 40px; }
  .project-card { border-radius: 36px; height: auto; aspect-ratio: 410 / 316; }

  .about .page { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .about-photo { width: 260px; height: 260px; }

  .site-footer .page, .footer-left, .footer-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* A card whose project still has no name — visibly provisional. */
.disc-card--unnamed .disc-card-img {
  border-style: dashed;
  opacity: .6;
}
.disc-card--unnamed .disc-card-name {
  font-style: italic;
  opacity: .75;
}

/* ---------- Project pages ----------
   Same two header bands as the rest of the site; the second carries a
   back-link instead of the discipline nav. The body takes the colour of
   the discipline the project sits in, so a project page still reads as
   part of its section. */
.header-bottom--crumb .header-row { min-height: 74px; }
.crumb-back {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--teal);
  text-decoration: none;
  padding: 6px 2px;
}
.crumb-back:hover { text-decoration: underline; }
.crumb-back:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

.project-intro { background: var(--sand); }
.project-intro .page { padding-top: 46px; padding-bottom: 50px; }

.project-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}

.project-desc { margin-top: 22px; }
.project-desc p {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 68ch;
  color: var(--ink);
}
.project-desc p:last-child { margin-bottom: 0; }

.project-body .page { padding-top: 48px; padding-bottom: 72px; }

/* Masonry-ish: images keep their own proportions rather than being cropped,
   because these are the work itself, not decorative cards. */
.shots {
  columns: 3;
  column-gap: 28px;
}
.shot {
  margin: 0 0 28px;
  break-inside: avoid;
  background: var(--card);
  border: 4px solid var(--sand);
  border-radius: 28px;
  overflow: hidden;
  line-height: 0;
}
.shot img { width: 100%; height: auto; display: block; }

/* Project bodies reuse the band colours so each page sits in its section */
.project--ui-ux          { background: linear-gradient(180deg, var(--rust) 0%, #8a6a1f 100%); }
.project--coding         { background: linear-gradient(180deg, #8a6a1f 0%, var(--olive) 100%); }
.project--graphic-design { background: linear-gradient(180deg, #3f6a56 0%, var(--teal) 100%); }
.project--photography    { background: linear-gradient(180deg, #17565c 0%, #2c3f31 100%); }
.project--3d-design      { background: linear-gradient(180deg, #2c3f31 0%, #6b6a38 100%); }
.project--ai-exploration { background: linear-gradient(180deg, #6b6a38 0%, #a98a2f 100%); }
.project--one-offs       { background: linear-gradient(180deg, #a98a2f 0%, var(--gold) 100%); }
/* the sand intro band sits above, so the gradient starts under it */
.project .project-intro { background: var(--sand); }

@media (max-width: 1100px) { .shots { columns: 2; } }
@media (max-width: 800px)  {
  .shots { columns: 1; column-gap: 0; }
  .shot { border-radius: 20px; border-width: 3px; margin-bottom: 20px; }
  .project-body .page { padding-top: 32px; padding-bottom: 48px; }
  .project-intro .page { padding-top: 30px; padding-bottom: 34px; }
}

/* ---------- PDF banners ----------
   A full-width band per document. The size is on the face of it, because
   some of these run to tens of megabytes and a visitor on mobile should
   be able to decide before loading one. */
.docs { background: var(--sand); }
.docs .page { padding-top: 34px; padding-bottom: 38px; }

.docs-head {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rust);
}

.doc { margin-bottom: 14px; }
.doc:last-child { margin-bottom: 0; }

.doc-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--teal);
  color: var(--sand);
  border: 0;
  border-radius: 18px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease;
}
.doc-banner:hover { background: #0c585c; }
.doc-banner:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.doc-tag {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  background: var(--gold);
  color: #2a2208;
  padding: 5px 10px;
  border-radius: 6px;
}
.doc-name {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 21px);
  min-width: 0;
  flex: 1 1 auto;
}
.doc-size {
  flex: none;
  font-size: 14px;
  opacity: .8;
  font-variant-numeric: tabular-nums;
}
.doc-cue {
  flex: none;
  font-family: var(--font-display);
  font-size: 15px;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 5px 16px;
}
.doc-banner[aria-expanded="true"] {
  border-radius: 18px 18px 0 0;
  background: #0c585c;
}
.doc-banner[aria-expanded="true"] .doc-cue::after { content: ""; }

.doc-view {
  border: 4px solid var(--teal);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  background: var(--card);
}
/* pdf.js draws each page into its own holder; the scroller keeps a long
   document from swallowing the page. */
.doc-view {
  max-height: min(84vh, 1040px);
  overflow-y: auto;
  padding: 14px;
}
.doc-page {
  background: #fff;
  margin: 0 auto 14px;
  max-width: 980px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.doc-page:last-of-type { margin-bottom: 6px; }
.doc-page canvas { display: block; }
.doc-count {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #6d6151);
  opacity: .8;
}
.doc-fallback {
  padding: 22px;
  text-align: center;
  color: var(--ink);
}
.doc-fallback a { color: var(--teal); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .doc-banner { transition: none; } }

@media (max-width: 800px) {
  .doc-banner { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; border-radius: 14px; }
  .doc-name { flex-basis: 100%; order: 3; }
  .doc-view { max-height: 76vh; padding: 8px; }
}