/* Folio: editorial typography, a panoramic image and a ruled service list.
   All colours stay in the shared palette contract, including named overrides. */
:root {
  --ink: #292620;
  --muted: #625e56;
  --line: #d9d4ca;
  --paper: #fcfaf6;
  --wash: #f2eee6;
  --accent: #765139;
  --accent-deep: #593b29;
  --accent-light: #e5bb97;
  --on-accent: #ffffff;
  --band: #292620;
  --on-band: #fcfaf6;
  --font: "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -.035em;
  --h1-size: 3rem;
  --h1-size-wide: 4.8rem;
  --h2-size: 2.4rem;
  --radius-card: 0px;
  --radius-shot: 0px;
  --radius-cta: 0px;
  --card-border: 0;
  --card-pad: 1.75rem 0;
  --section-y: 4.5rem;
  --hero-y: 3.5rem;
  --header-bg: var(--paper);
  --header-ink: var(--ink);
  --header-border: 1px solid var(--line);
}
.folio-intro { display: grid; gap: 1.5rem; align-items: end; }
.folio-heading, .folio-summary, .folio-image { min-width: 0; }
.hero-folio h1 { line-height: 1.03; overflow-wrap: anywhere; margin-bottom: 0; }
.hero-folio .kicker { margin-bottom: 1.25rem; }
.folio-image { margin-top: 2.75rem; background: var(--wash); }
.folio-image img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.pack-folio .services { background: var(--paper); }
.pack-folio .folio-services { display: block; border-top: 1px solid var(--ink); }
.pack-folio .folio-service { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem 1rem; border-bottom: 1px solid var(--line); }
.folio-index { color: var(--accent); font-size: .8rem; padding-top: .15rem; }
.pack-folio .folio-service p { grid-column: 2; margin: 0; max-width: 36rem; }
.pack-folio .testimonial { border-top: 1px solid var(--line); }
.pack-folio .cards > * { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 800px) {
  .folio-intro { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; }
  .pack-folio .folio-service { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; }
  .pack-folio .folio-service p { grid-column: 3; }
}
@media (max-width: 799px) {
  .pack-folio { --section-y: 2.5rem; --hero-y: 2.5rem; }
  .folio-image img { aspect-ratio: 4 / 3; }
}

/* An editorial spread, carried through the page rather than stopping at
   the panorama. Gallery placement stays in row/DOM order, not masonry. */
.pack-folio .why-us { border-bottom: 1px solid var(--line); }
.pack-folio .why-us .card { border: 0; padding: 1rem 0; text-align: left; }
.pack-folio .why-us .card-icon { display: none; }
.pack-folio .why-us .card p { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--ink); }
.pack-folio .about-copy { min-width: 0; }
.pack-folio .about-copy p:first-child { font: 400 clamp(1.4rem, 3vw, 2rem)/1.45 var(--font-display); color: var(--ink); }
.pack-folio .gallery { background: var(--paper); }
.pack-folio .gallery .cards { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.pack-folio .gallery .shot { aspect-ratio: 4 / 3; }
.pack-folio .testimonials .cards { grid-template-columns: minmax(0, 1fr); }
.pack-folio .testimonial { padding-block: 2rem; }
.pack-folio .testimonial .quote { max-width: 40rem; font: 400 clamp(1.5rem, 3vw, 2.25rem)/1.4 var(--font-display); color: var(--ink); }
.pack-folio .testimonial .quote::before { content: none; }
.pack-folio .contact { border-top: 1px solid var(--ink); }
.pack-folio .enquiry-form :is(input, select, textarea) { border-radius: 0; }
@media (min-width: 900px) {
  .pack-folio .about:has(.about-copy) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0 4rem;
  }
  .pack-folio .about > h2 { margin-top: 0; }
  .pack-folio .about > :not(h2, .edit-pencil) { grid-column: 2; min-width: 0; margin-top: 0; }
  /* .contact is deliberately absent from the selectors above. Its heading is
     three words and its form is the tallest thing on the page, so a column
     beside the form stayed empty for that whole height — the hole the shared
     rule in site.css now avoids by putting the heading on top and giving the
     form its own two columns. The other sections here keep the treatment:
     their content is tall enough to sit beside a heading without leaving
     one. */
  .pack-folio .gallery .cards { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .pack-folio .gallery .shot:nth-child(even) { aspect-ratio: 4 / 5; margin-top: 4rem; }
  .pack-folio .gallery .shot:nth-child(3n) { grid-column: 1 / -1; width: 72%; aspect-ratio: 16 / 9; }
  .pack-folio .testimonial:nth-child(even) { margin-left: 25%; }
}