/* ============================================
   STYLE.CSS — this file controls how the site LOOKS
   (colors, fonts, spacing, layout).
   The HTML files control the CONTENT (words, images).
   Change a color here and it updates on every page.
   ============================================ */

/* ---- Design tokens: change these to re-theme the whole site ----
   --color-bg is the page background. #38383b is taken from
   chrishardy.org so the two sites match exactly. Change it here and
   every page updates at once. */
:root {
  --color-bg: #38383b;
  --color-bg-alt: #2e2e31;   /* slightly darker — video wells, form fields */
  --color-text: #f2f2f2;
  --color-text-muted: #c2c2c4;
  --color-heading: #a8a6a1;  /* warm gray — the name/tagline color from chrishardy.org */
  --color-accent: #e8b04b;
  --color-border: #4d4d52;

  /* Futura PT from Adobe Fonts — the same typeface as chrishardy.org.
     Headings use the Demi weight (600), which sits in the "futura-pt"
     family alongside Medium (500). The weight is set once below as
     --heading-weight, so every heading can be re-weighted from here.
     The names after it are backups if Adobe's fonts don't load. */
  --font-heading: "futura-pt", "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --heading-weight: 600;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --max-width: 1100px;
}

/* ---- Reset: removes each browser's default spacing/quirks ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}

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

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

ul {
  list-style: none;
}

/* ---- Header / navigation (same on every page) ---- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 10;
}

/* No max-width: the header runs the full width of the page so the title
   sits at the far left and the links at the far right, as on
   chrishardy.org (title ~30px from the left edge, icons ~45px from the
   right). "space-between" pushes the two groups to opposite ends. */
.site-header__inner {
  margin: 0 auto;
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* The header title and nav links use the same warm gray as the rest of
   the copy, matching chrishardy.org. */
.site-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.03em;
  /* Grows with the window, as it does on chrishardy.org. */
  font-size: clamp(1.05rem, calc(0.7rem + 1.05vw), 2rem);
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-heading);
  transition: color 0.15s ease;
}

.site-title:hover {
  color: var(--color-text);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav a {
  font-size: 1rem;          /* same 16px as chrishardy.org */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-heading);
  transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--color-text);
}

/* Social icons in the header (LinkedIn, email).
   "fill: currentColor" means the icon takes the same color as the text
   around it — so it dims and brightens on hover along with the links. */
.site-nav__icon {
  display: flex;
  align-items: center;
  color: var(--color-heading);
}

.site-nav__icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

.site-nav__icon:hover {
  color: var(--color-text);
}

/* ---- Generic page section spacing ---- */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.section--tight {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Section headers: DEMO REEL, IMPACT, STORIES, EXPERIENCES.
   On chrishardy.org these grow with the window rather than staying a
   fixed size. Measured there: 35.4px at a 900px-wide window and 43.6px
   at 1280px, which works out to "16px + 2.16% of the window width".
   The clamp() keeps it sensible on very small and very large screens. */
.section-label {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, calc(1rem + 2.16vw), 4.5rem);
  font-weight: var(--heading-weight);
  letter-spacing: normal;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}

/* ---- Hero (top of homepage) ----
   The name and tagline are centered, matching chrishardy.org. */
/* No max-width here on purpose. The name's size grows with the window
   (12.1vw below), so its container has to grow too — otherwise the text
   outgrows the box and wraps onto two lines on wide screens. On
   chrishardy.org the column widens the same way. Everything inside is
   centred, so the name still sits centred on the page. */
.hero {
  margin: 0 auto;
  /* Tight spacing, measured from chrishardy.org: ~12px above the name
     and ~16px below the tagline. */
  padding: 0.75rem 1.5rem 1rem;
  text-align: center;
}

/* "12vw" means 12% of the browser window's width, so the name grows and
   shrinks with the window like it does on your Squarespace site. The
   clamp() around it sets a floor and a ceiling so it never gets
   unreadably small on a phone or absurdly large on a huge monitor. */
.hero__name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 12.1vw, 16rem);
  /* Never split "CHRIS HARDY" across two lines. */
  white-space: nowrap;
  font-weight: var(--heading-weight);
  color: var(--color-heading);
  line-height: 1;
  margin-bottom: 1.25rem;
}

/* A line break used only on phones (switched on in the mobile section
   at the bottom of this file). Hidden here, so desktop is unchanged. */
.tagline-break {
  display: none;
}

.hero__tagline {
  font-size: clamp(1rem, 1.85vw, 1.5rem);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 0;
}

.hero__intro {
  max-width: 640px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.hero__intro strong {
  color: var(--color-text);
}

/* ---- Statement lines under the demo reel ----
   Sizes taken from chrishardy.org: ~32px, bold, in the heading font. */
.statement {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: var(--heading-weight);
  line-height: 1.33;
  color: var(--color-heading);
  max-width: 900px;
}

/* Space between each statement line. */
.statement + .statement {
  margin-top: 2rem;
}

/* "Creator. Visual artist." — the italic opening line. */
.statement--lead {
  font-style: italic;
}

/* ---- Photo slideshow ----
   .carousel__viewport is the visible window. Every <img> inside it is
   stacked directly on top of the others (position: absolute); we just
   fade the active one in and the rest out. See js/main.js for the
   logic that swaps which slide has the "is-active" class. */
.carousel {
  width: 100%;
}

/* 75vh = 75% of the window's height, which is what chrishardy.org uses.
   A shorter frame would crop more off the top and bottom of each photo,
   making them look more zoomed in. */
.carousel__viewport {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 320px;
  max-height: 820px;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.carousel__slide.is-active {
  opacity: 1;
}

/* ---- Video box ----
   Holds either a real <video> or a "coming soon" placeholder.
   See assets/videos/README.md for how to add your files. */
.video-box {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Boxes still waiting on a video get a dashed outline, so it's obvious
   at a glance which ones are placeholders. */
.video-box:has(.video-box__placeholder) {
  border-style: dashed;
}

/* "contain" means the whole frame is always visible — the video is
   never cropped, even if its shape doesn't match the box exactly. */
.video-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-box__placeholder {
  text-align: center;
  color: var(--color-text-muted);
  padding: 1.5rem;
}

.video-box__placeholder-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* The two lines under each video: the name in bold, then the role in a
   smaller, lighter weight. Sizes taken from chrishardy.org (16px / 14.4px). */
.video-box__caption {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
}

.video-box__role {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-heading);
}

/* ---- Looping background video (Experiences) ----
   pointer-events: none means clicks pass straight through it, so there's
   no right-click menu and nothing for a visitor to interact with. */
.loop-video {
  margin-top: 2rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.loop-video__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ---- Grid for the "Impact / Stories" video pair ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

/* ---- Contact page ---- */
.contact-form {
  max-width: 520px;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field textarea {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.7rem 0.85rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Send button — the same warm gray as the headings, matching
   chrishardy.org (square corners, 16px, medium weight). */
.button {
  align-self: flex-start;
  background: var(--color-heading);
  color: #26262a; /* dark text — see note in the reply about contrast */
  border: none;
  border-radius: 0;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.button:hover {
  opacity: 0.85;
}

.form-status {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  min-height: 1.4em; /* reserves space so the form doesn't jump when a message appears */
}

/* The spam-trap field — hidden from people, still visible to bots. */
.contact-form input[name="_gotcha"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* While the message is being sent. */
.button:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* ---- Resume page ----
   The resume is shown as an image (see the note in resume.html for why).
   Clicking it opens the real PDF. */
.resume-page {
  display: block;
  max-width: 850px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.resume-page img {
  width: 100%;
  height: auto;
}



/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 3rem;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---- Small screens ---- */
/* ---- Menu button (phones only) ----
   Hidden on desktop. The three spans are the three bars of the icon;
   when the menu is open they rotate into an X. */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 34px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.site-nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-heading);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Turn the icon into an X while the menu is open. */
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---- Phone layout ----
   Everything in here applies only at 640px and below, so the desktop
   header is completely unaffected. */
@media (max-width: 640px) {
  /* One row: title on the left, menu button on the right — as on
     chrishardy.org. (It used to stack into two rows.) */
  .site-header__inner {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
  }

  .site-title {
    font-size: 0.95rem;
  }

  /* Break the tagline after "Writer," so it reads as two tidy lines. */
  .tagline-break {
    display: inline;
  }

  .site-nav-toggle {
    display: flex;
  }

  /* The links become a drop-down panel, hidden until the button is
     tapped. "position: absolute" lets it hang below the header without
     pushing the page down. */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
    padding: 1.4rem 1.25rem 1.6rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    font-size: 1.05rem;
  }

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

/* ---- Footer social icons ----
   32px icons, centered under the looping video. chrishardy.org uses
   black here; we use the site's warm gray instead so they're easier to
   see against the dark background. */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  padding: 1.75rem 1.5rem 0;
}

.footer-social a {
  display: flex;
  color: var(--color-heading);
  transition: color 0.15s ease;
}

.footer-social svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

.footer-social a:hover {
  color: var(--color-text);
}

/* ---- Contact page ---- */
/* The portrait sits to the right of the intro text. "float" lets the
   paragraphs wrap around it, the same way it reads on chrishardy.org. */
.contact-portrait {
  float: right;
  width: 200px;
  height: 200px;
  object-fit: cover;
  /* The squircle outline defined in contact.html. The border-radius is a
     fallback for any browser that can't do clip-path. */
  border-radius: 22%;
  clip-path: url(#photo-squircle);
  margin: 0 0 1.25rem 2rem;
}

/* Clears the float so following content doesn't ride up beside the photo. */
.contact-intro::after {
  content: "";
  display: block;
  clear: both;
}

/* "Reach out to me using this form." — its own line, heavier and larger
   than the paragraphs above it (chrishardy.org: 23.92px, weight 700). */
.contact-cta {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--heading-weight);
  color: var(--color-heading);
  margin-top: 2rem;
}

/* On phones the photo goes full width above the text instead of floating. */
@media (max-width: 600px) {
  .contact-portrait {
    float: none;
    width: 160px;
    height: 160px;
    margin: 0 0 1.25rem 0;
  }
}