/* ============================================
   One-page layout
   Used only by index-onepage.html. Everything else
   comes from style.css — this file just adds the
   handful of rules a single scrolling page needs.
   ============================================ */

/* The nav is sticky, so a section jumped to from the menu would otherwise
   start underneath it. This pushes the landing point down clear of the bar. */
.band[id] {
  scroll-margin-top: var(--nav-height);
}

/* Full-width band. Padding still comes from .section inside, so the vertical
   rhythm matches the rest of the site and the mobile override still applies. */
.band {
  border-top: 1px solid var(--border);
}

/* Alternating tone stops a long page reading as one flat column */
.band--alt {
  background: var(--bg-surface);
}

/* ============================================
   Services — text first
   Three bordered cards stacked on one page reads heavy,
   so these are plain columns with an accent icon.
   ============================================ */
.svc-grid {
  display: grid;
  /* fixed at three so the note below can be placed in a known column;
     auto-fit produced two columns at some widths, which moved it */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Sits below the three cards, aligned with the left edge of the section.
   The work note uses the same style so the two sections match. */
.svc-note,
.work-note {
  margin-top: 24px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 620px;
}

/* All three are padded so they stay aligned; only the lead card is tinted. */
.svc {
  padding: 22px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.svc--lead {
  background: var(--accent-dim);
  border-color: var(--accent-line);
}

.svc__icon {
  color: var(--accent);
  line-height: 0;
  margin-bottom: 16px;
}

.svc__icon svg {
  width: 28px;
  height: 28px;
}

.svc__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.svc__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ============================================
   How I work — numbered steps
   ============================================ */
.step-grid {
  display: grid;
  /* fixed at three while the connecting line shows, so the line can be
     positioned from the maths below rather than guessed at */
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
  counter-reset: step;
  position: relative;
}

/* Joins the three circles so they read as a sequence rather than three
   separate items. Sits behind them; the ring on each circle masks it. */
.step-grid::before {
  content: '';
  position: absolute;
  top: 19px;
  /* The circles sit at the centre of each column, so the line runs half a
     column in from each side. 80px is the two 40px column gaps. */
  left: calc((100% - 80px) / 6);
  right: calc((100% - 80px) / 6);
  height: 2px;
  background: linear-gradient(to right,
    var(--accent-line), var(--accent), var(--accent-line));
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Matches the numbered circle from the original multi-page site. The counter
   keeps the numbering automatic, so adding a fourth step needs no edit here. */
.step__num {
  counter-increment: step;
  width: 38px;
  height: 38px;
  margin: 0 auto 16px;
  /* filled rather than outlined, so the step numbers carry more weight */
  background: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 0 0 5px var(--bg);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__num::before {
  content: counter(step);
}

.step__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.step__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ============================================
   Contact — closing section
   ============================================ */
/* Splits the sentence into two even lines instead of leaving one word
   on its own; still wraps sensibly on a phone */
.contact-center p {
  text-wrap: balance;
}

/* ============================================
   Work card placeholders
   Slots held open for samples not yet built. They are plain
   divs rather than links, and draw their own thumbnail panel,
   so nothing 404s while the card is still empty.
   ============================================ */
.work-card--placeholder {
  border-style: dashed;
  border-color: var(--card-border);
}

/* no lift or accent border, because there is nothing to click yet */
.work-card--placeholder:hover {
  border-color: var(--border);
  transform: none;
}

.work-card__thumb--empty {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: var(--bg);
  border-bottom: 1px dashed var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.work-card__thumb--empty svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

/* ============================================
   Featured work card
   The strongest sample runs full width with a larger image, so the
   section has a focal point instead of three equal tiles.
   ============================================ */
.work-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}

.work-card--featured .work-card__thumb {
  height: 100%;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--card-border);
}

.work-card--featured .work-card__body {
  padding: 26px 28px;
}

.work-card--featured .work-card__title {
  font-size: 1.2rem;
}

@media (max-width: 760px) {
  .work-card--featured {
    grid-template-columns: 1fr;
  }
  .work-card--featured .work-card__thumb {
    aspect-ratio: 2 / 1;
    border-right: 0;
    border-bottom: 1px solid var(--card-border);
  }
}

@media (max-width: 820px) {
  /* below this three columns no longer fit side by side */
  .svc-grid {
    grid-template-columns: 1fr;
  }

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

  .step-grid::before {
    display: none;
  }
}

/* ============================================
   About — headshot beside the bio
   ============================================ */
.about-layout {
  display: grid;
  /* a circle reads larger than a rectangle of the same width, so it sits
     narrower than the portrait crop did */
  grid-template-columns: 180px 1fr;
  gap: 34px;
  /* the photo column is taller than the text once the location sits under it,
     so the text centres against it rather than hanging from the top */
  align-items: center;
}

.about-photo-col {
  text-align: center;
}

.about-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.about-location svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

.about-photo {
  width: 100%;
  /* square, so the circle is a true circle. Stated explicitly so the space is
     reserved before the image loads and the text below does not jump. */
  aspect-ratio: 1;
  object-fit: cover;
  /* a square cut from a 3:4 photo would centre on the collarbone, so the
     framing lifts to hold the face */
  object-position: 50% 4%;
  border-radius: 50%;
  border: 1px solid var(--card-border);
}

@media (max-width: 760px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Constrain the whole column, not just the image. Capping only the photo
     left the location line centring across the full stacked width while the
     circle sat at the left edge. */
  .about-photo-col {
    max-width: 180px;
  }
}

/* The featured card is a two-column grid, so its gallery fills the left column's
   full height rather than sitting at a fixed ratio, and its edge is on the right. */
.work-card--featured .work-card__gallery {
  aspect-ratio: auto;
  height: 100%;
  border-bottom: 0;
  border-right: 1px solid var(--card-border);
}

/* Stacked, the featured card is a single column, so its gallery can no longer
   take its height from a neighbouring text column — height: 100% above resolves
   against nothing and the whole gallery collapses to zero, taking the
   screenshots with it. Put the 2:1 ratio back and move the edge to the bottom. */
@media (max-width: 760px) {
  .work-card--featured .work-card__gallery {
    aspect-ratio: 2 / 1;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--card-border);
  }
}