/* ============================================================================
   Collected Design Studio
   Design tokens first, then base, then components. Everything lives on CSS
   variables so colors / type can be retuned in one place.
   ========================================================================= */

/* The studio's own display face, as used on the current site and in the
   wordmark. The file came from collecteddesignstudio.com. */
@font-face {
  font-family: "Fiona";
  src: url("../fonts/fiona-regular.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — warm, quiet, paper-like */
  --cream:        #FFFFFF;  /* page background — matches the original site */
  --sand:         #EDE6DC;  /* warm accent: the mailing-list button */
  --cream-deep:   #E2D9CC;  /* subtle bands, buttons, empty image slots */
  --ink:          #1B1A18;  /* body text */
  --ink-soft:     #55504A;  /* secondary text */
  --line:         #CFC5B6;  /* hairlines on cream */
  --white:        #FFFFFF;
  --overlay:      rgba(0, 0, 0, .18); /* scrim so nav stays legible on photos */

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --header-h:   92px;
  --gutter:     clamp(20px, 4vw, 56px);
  --gutter-header: clamp(10px, 3.1vw, 50px);  /* half the old header inset */
  --maxw:       1400px;

  /* Motion */
  --fade:       1200ms; /* slideshow crossfade */
  --ease:       cubic-bezier(.4, 0, .2, 1);
}

/* ─────────────────────────────── Base ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* no blue flash on tap */
}

body {
  margin: 0;
  /* Cormorant Garamond ships old-style figures by default, where 1 sits at
     x-height and reads as a small capital I ("House IO" for House 10). This
     asks for full-height lining figures instead. Jost is unaffected. */
  font-variant-numeric: lining-nums;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0 0 .5em;
}

.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-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--ink); color: var(--white);
  padding: 10px 18px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; transition: transform 180ms var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ────────────────────────────── Header ────────────────────────────── */

.site-header {
  position: absolute;      /* sits on top of the hero photo */
  inset: 0 0 auto 0;
  z-index: 20;
  padding: 38px var(--gutter-header) 34px;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}

/* Interior pages (no hero photo): the header is the same cream as the page,
   with dark text — it reads as part of the page, not as a separate bar. */
body:not(.has-hero) .site-header {
  position: sticky;
  top: 0;
  background: var(--cream);
  color: var(--ink);
  text-shadow: none;
}

.site-header__inner {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The studio's own logo artwork (assets/images/logo.png). */
.wordmark { text-decoration: none; display: inline-block; line-height: 0; }
.wordmark img {
  display: block;
  width: clamp(150px, 22.8vw, 338px);
  height: auto;
}

/* The logo is black artwork. Over the home page's photographs the header is
   white, so it's flipped to white there and given the same soft shadow the
   nav has. */
body.has-hero .wordmark img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
}

/* ...except when the cream mobile menu is covering the photographs. */
body.has-hero.nav-open .wordmark img { filter: none; }

/* Nav ---------------------------------------------------------------- */

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }

.nav__list, .nav__social {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.1vw, 38px);
  margin: 0; padding: 0; list-style: none;
}

.nav__list a {
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;        /* the page is 300; the nav sits a step above it */
  letter-spacing: .04em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), opacity 220ms var(--ease);
}
.nav__list a:hover { border-bottom-color: currentColor; }
.nav__list a[aria-current="page"] { border-bottom-color: currentColor; }

.nav__social { gap: 18px; }
.nav__social svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 220ms var(--ease);
}
.nav__social a:hover svg { opacity: .65; }

/* Mobile menu button (hidden on desktop) */
.nav-toggle {
  display: none;
  position: relative;
  width: 34px; height: 26px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.nav-toggle__bar {
  position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: 5px; }
.nav-toggle__bar:nth-child(2) { top: 12px; }
.nav-toggle__bar:nth-child(3) { top: 19px; }

/* Open: the middle bar fades out and the outer two cross in the middle. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────── Hero ─────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;          /* avoids the mobile URL-bar jump */
  min-height: 520px;
  overflow: hidden;
  background: var(--cream-deep);
}

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--fade) var(--ease);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Soft scrim at the top only, so the white nav stays readable on any photo. */
.hero::after {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 240px;
  background: linear-gradient(to bottom, var(--overlay), transparent);
  pointer-events: none;
  z-index: 10;
}

/* Arrows -------------------------------------------------------------- */

/* No box behind them — the chevron itself is the whole control. */
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 15;
  width: 98px; height: 98px;
  display: grid; place-items: center;
  padding: 0;
  border: 0; background: none; color: var(--white);
  cursor: pointer;
  opacity: 0;                 /* revealed on hover (see below) */
  pointer-events: none;
  transition: color 220ms var(--ease), opacity 260ms var(--ease);
}
.hero:hover .hero__arrow { opacity: .85; pointer-events: auto; }
.hero__arrow:hover { opacity: 1; }
/* Keyboard users still get them. */
.hero__arrow:focus-visible { opacity: 1; pointer-events: auto; }
/* Touch screens have no hover, so leave them visible there. */
@media (hover: none) {
  .hero__arrow { opacity: .85; pointer-events: auto; }
}
.hero__arrow--prev { left: 12px; }
.hero__arrow--next { right: 12px; }
.hero__arrow svg {
  width: 98px; height: 98px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Dots ---------------------------------------------------------------- */

.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 28px;
  z-index: 15;
  display: flex; justify-content: center; gap: 10px;
}
.hero__dot {
  width: 7px; height: 7px; padding: 0;
  border: 1px solid var(--white); border-radius: 50%;
  background: transparent; cursor: pointer;
  opacity: .8;
  transition: background-color 220ms var(--ease), transform 220ms var(--ease);
}
.hero__dot[aria-selected="true"] { background: var(--white); transform: scale(1.15); }
/* On a phone, a row of a dot per photo is too long and too fiddly to tap;
   the arrows and swiping do the job. */
@media (max-width: 700px) {
  .hero__dots { display: none; }
}

/* ────────────────────────────── Footer ────────────────────────────── */

.site-footer {
  background: var(--cream);
  padding: clamp(90px, 16vh, 190px) var(--gutter) clamp(60px, 9vh, 110px);
  text-align: center;
}

.site-footer__inner { max-width: 640px; margin: 0 auto; }

.footer-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 62px;
  line-height: 1;
  text-decoration: none;
  margin-bottom: clamp(48px, 8vh, 96px);
}

.footer-address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 18px;
}
.footer-address a { text-decoration: none; }
.footer-address a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-email { margin: 0 0 16px; font-size: 15px; }
.footer-email a { text-underline-offset: 3px; }

.footer-social {
  margin: 0 0 30px;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.footer-social a {
  display: inline-flex;
  color: var(--ink);
  opacity: .8;
  transition: opacity 220ms var(--ease);
}
.footer-social a:hover,
.footer-social a:focus-visible { opacity: 1; }
.footer-social svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}

.footer-legal { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* ──────────────────────────── Responsive ──────────────────────────── */

@media (max-width: 950px) {
  :root { --header-h: 74px; }

  .nav-toggle { display: block; z-index: 30; }

  .nav {
    position: fixed; inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    background: var(--cream);
    color: var(--ink);
    transform: translateY(-100%);
    transition: transform 420ms var(--ease);
    z-index: 25;
  }
  .nav.is-open { transform: translateY(0); }

  /* The menu panel is cream, so the hamburger/X has to flip to dark ink
     while it's open (over a photo it's white). */
  .nav { color: var(--ink); text-shadow: none; }
  body.nav-open .site-header { color: var(--ink); text-shadow: none; }

  .nav__list {
    flex-direction: column;
    gap: 26px;
    text-align: center;
  }
  .nav__list a { font-size: 22px; font-family: var(--font-display); }

  /* The drawing has to shrink with its button, or it spills out of it and the
     right-hand arrow ends up off the screen. */
  .hero__arrow { width: 56px; height: 56px; }
  .hero__arrow svg { width: 56px; height: 56px; }
  .hero__arrow--prev { left: 4px; }
  .hero__arrow--next { right: 4px; }

  .footer-mark { font-size: 50px; }
}

/* Keep the page from scrolling behind the open mobile menu. */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ───────────────────────── Interior pages ─────────────────────────── */

/* Standard page wrapper. The sticky cream header occupies real layout
   space on these pages, so content sits below it — never behind it. */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(40px, 7vw, 90px);
}

/* Left-aligned pages: content starts at the header's left edge instead of
   being centered in the window. */
.page--left {
  margin-left: 0;
  margin-right: auto;
  max-width: 1500px;
  padding-left: var(--gutter-header);
  padding-right: var(--gutter-header);
}

/* Gallery pages: large photography, inset from the window edge like the
   header is. */
.page--wide {
  max-width: none;
  padding-left: clamp(16px, 5vw, 50px);
  padding-right: clamp(16px, 5vw, 50px);
  padding-top: clamp(16px, 1.8vw, 30px);
}

/* ────────────────────────── Project grid ──────────────────────────── */

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two large photographs across */
  gap: 20px;
}

/* One per row on phones (below). Three only on genuinely wide monitors, so
   the photographs stay large at ordinary laptop and desktop sizes. */
@media (min-width: 1700px) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-deep);
  text-decoration: none;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.tile:hover img,
.tile:focus-visible img { transform: scale(1.03); }

/* Project name: a soft scrim + centered label, revealed on hover so the
   photography leads. On touch screens there is no hover, so the first tap
   reveals the name and the second opens the project (see site.js). */
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(237, 230, 220, .64);   /* a pale fog, as on the press cards */
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.tile:hover::after,
.tile:focus-visible::after { opacity: 1; }

.tile__label {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity 320ms var(--ease);
  /* A pale halo, so the name holds up over the busier photographs. */
  text-shadow: 0 1px 3px rgba(237, 230, 220, .95);
  pointer-events: none;
}
.tile:hover .tile__label,
.tile:focus-visible .tile__label { opacity: 1; }

@media (hover: none) {
  .tile__label { font-size: 24px; }

  /* Shown by the first tap. */
  .tile.is-revealed::after { opacity: 1; }
  .tile.is-revealed .tile__label { opacity: 1; }
}

@media (max-width: 700px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────── About ─────────────────────────────── */

/* One centred column, the way the original site stacks it: copy, portrait,
   copy. The portrait sits in the gap between the studio blurb and Holly's. */
.about-heading {
  font-family: "Fiona", var(--font-display), serif;
  font-weight: 500;
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1.15;
  text-align: center;
  margin: 0 0 clamp(26px, 3.4vw, 44px);
}

.about-stack {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.about-stack p {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-size: 18px;
  line-height: 1.95;
}
.about-stack p:last-child { margin-bottom: 0; }

.about-portrait {
  margin: clamp(38px, 6vw, 72px) 0 20px;
}
.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2 / 3;      /* the portrait's own proportions */
  object-fit: cover;
}

/* Holly's name and title below the portrait, as on the studio's own site. */
.about-stack p.about-name {
  font-family: "Fiona", var(--font-display), serif;
  font-weight: 500;
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1;
  margin: 0 0 10px;
}

.about-stack p.about-role {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
  color: #333333;
  margin: 0 0 clamp(40px, 6.5vw, 78px);
}

@media (max-width: 700px) {
  .about-stack p { font-size: 17px; }
  .about-stack p.about-role { font-size: 16px; }
}

/* ───────────────── Centered intro (Commercial etc.) ───────────────── */

.intro {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(60px, 11vh, 130px) var(--gutter) clamp(50px, 9vh, 100px);
  text-align: center;
}

.intro__title {
  font-size: clamp(40px, 5.6vw, 72px);
  margin: 0 0 clamp(20px, 3vh, 34px);
}

.intro__copy {
  margin: 0 auto clamp(30px, 5vh, 52px);
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
}

/* Quiet, squared button in the studio's palette. */
.btn {
  display: inline-block;
  padding: 16px 34px;
  background: var(--cream-deep);
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: .04em;
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}
.btn:hover { background: var(--ink); color: var(--cream); }

/* ────────────────────────────── Contact ───────────────────────────── */

.contact-title {
  font-size: clamp(34px, 3.6vw, 52px);
  margin: 0 0 18px;
}

.rule {
  width: 72px;
  margin: 0 0 clamp(26px, 4vw, 48px);
  border: 0;
  border-top: 1px solid var(--ink);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

.contact-block { margin: 0 0 clamp(26px, 3.4vw, 40px); }

.contact-block h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.contact-block address { font-style: normal; }

.contact-block p,
.contact-block address {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.85;
  max-width: 56ch;
}

.contact-block a { text-underline-offset: 3px; }

.contact-block .btn { margin-top: 10px; }

/* Map column sticks alongside the copy on tall screens. */
.contact-map {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(420px, 66vh, 680px);
  border: 0;
  filter: grayscale(100%) contrast(.92);   /* keeps the map in the palette */
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { position: static; order: -1; }
  .contact-map iframe { height: 320px; }
}

/* ───────────────────── Project inquiry (modal form) ───────────────────── */

/* A button styled to sit in the copy exactly like the old link did. */
button.btn {
  border: 0;
  font-family: var(--font-sans);
  cursor: pointer;
}

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(14px, 4vh, 46px) clamp(12px, 3vw, 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__scrim {
  position: fixed;
  inset: 0;
  background: rgba(27, 26, 24, .55);
  animation: modal-fade 260ms var(--ease);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;   /* top-aligned: a tall form must not have its head cut off */
  background: var(--white);
  animation: modal-rise 300ms var(--ease);
}

@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .modal__scrim, .modal__panel { animation: none; }
}

.modal__body { padding: clamp(34px, 5vw, 72px) clamp(22px, 6vw, 96px) clamp(40px, 5vw, 76px); }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  opacity: .6;
  transition: opacity 200ms var(--ease);
}
.modal__close:hover,
.modal__close:focus-visible { opacity: 1; }
.modal__close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
}

.inquiry__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 clamp(18px, 3vw, 30px);
}

.inquiry__intro {
  max-width: 62ch;
  margin: 0 auto clamp(34px, 6vw, 62px);
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* ── Fields ── */

.field { margin: 0 0 clamp(20px, 2.6vw, 30px); }

.field label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink);
}

.field .req { color: #B4453C; }

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid transparent;
  background: #F6F2EC;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.field textarea { resize: vertical; min-height: 96px; }

.field input::placeholder,
.field textarea::placeholder { color: #9C948A; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--white);
}

/* A field the visitor got wrong, flagged only after they try to send. */
.field.is-invalid input,
.field.is-invalid textarea { border-color: #B4453C; background: #FBF1EF; }

.field__error {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: .02em;
  color: #B4453C;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(16px, 2.4vw, 30px);
}

/* Honeypot — off-screen for bots, invisible to everyone else. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn--send {
  display: block;
  width: 100%;
  margin-top: clamp(14px, 2vw, 24px);
  background: var(--ink);
  color: var(--white);
  letter-spacing: .08em;
}
.btn--send:hover { background: #3A3733; color: var(--white); }
.btn--send[disabled] { opacity: .55; cursor: default; }

.inquiry-form__status {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #B4453C;
}
.inquiry-form__status:empty { display: none; }

/* Confirmation shown in place of the form after a successful send. */
.inquiry-done {
  padding: clamp(20px, 5vw, 48px) 0 0;
  text-align: center;
}
.inquiry-done p {
  max-width: 54ch;
  margin: 0 auto 14px;
  font-size: 17px;
  line-height: 1.9;
}

body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────── Press ───────────────────────────── */

.press-title {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 300;
  letter-spacing: .02em;
  margin: 0 0 18px;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Three per row only on genuinely wide monitors, matching .project-grid. */
@media (min-width: 1700px) {
  .press-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .press-grid { grid-template-columns: 1fr; }
}

.press-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-deep);
  color: var(--ink);
  text-decoration: none;
}

.press-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease);
}

/* A pale wash so the type reads over any photograph. */
.press-card__wash {
  position: absolute;
  inset: 0;
  background: rgba(237, 230, 220, .64);
  transition: background-color 400ms var(--ease);
}

.press-card__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(18px, 3vw, 38px);
  text-align: center;
  /* A pale halo, so the type holds up over the busier photographs. */
  text-shadow: 0 1px 3px rgba(237, 230, 220, .95);
}

.press-card__date {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.press-card__outlet {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* For names that carry their own capitals, like 1stDibs. */
.press-card__outlet--asis { text-transform: none; letter-spacing: .02em; }

.press-card__headline {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  max-width: 34ch;
}

.press-card__byline {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* "Read more" waits until the card is hovered, so the grid stays quiet. */
.press-card__more {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.press-card:hover img,
.press-card:focus-visible img { transform: scale(1.04); }

.press-card:hover .press-card__wash,
.press-card:focus-visible .press-card__wash { background: rgba(237, 230, 220, .52); }

.press-card:hover .press-card__more,
.press-card:focus-visible .press-card__more {
  opacity: 1;
  transform: none;
}

/* Touch screens have no hover, so show it always. */
@media (hover: none) {
  .press-card__more { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .press-card img,
  .press-card__more { transition: none; }
  .press-card:hover img { transform: none; }
}

/* The Home tab is only useful once you've left home, so it hides there.
   (`has-hero` is the home page; every other page is an interior page.) */
body.has-hero .nav__home { display: none; }

/* ────────────────────────── Single project page ───────────────────────── */

.project { max-width: 1500px; margin: 0 auto; }

.project__back {
  display: inline-block;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.project__back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.project__name {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 300;
  letter-spacing: .02em;
  margin: 0 0 20px;
}

/* Slideshow on the left, the writing in a column beside it. */
.project__body {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
  margin: clamp(22px, 3vw, 36px) 0 0;
}

.project__copy { padding-top: 2px; }

/* Location / Scope / Year, stacked in the narrow column. */
.project__facts {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  padding: 0 0 clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
}
.project__facts dt {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 3px;
}
.project__facts dd {
  margin: 0 0 14px;
  font-size: 16px;
}
.project__facts dd:last-child { margin-bottom: 0; }

.project__blurb {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.85;
}
.project__blurb:last-child { margin-bottom: 0; }

/* Writing about the photograph on screen — changes as the visitor moves. */
.project__caption {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: clamp(16px, 2.2vw, 24px) 0 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.project__caption[hidden] { display: none; }

/* ── Gallery ── */

.gallery {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream);     /* the page colour, so gaps are invisible */
}
.gallery:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.gallery__track { position: absolute; inset: 0; }

.gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.gallery__slide.is-active { opacity: 1; }

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

/* No box: the chevron itself is the control. */
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 87px;
  height: 87px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  opacity: .9;      /* always visible: the gallery only moves when clicked */
  transition: color 260ms var(--ease), opacity 260ms var(--ease);
}
.gallery__arrow svg {
  width: 87px;
  height: 87px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery__arrow--prev { left: clamp(10px, 1.6vw, 22px); }
.gallery__arrow--next { right: clamp(10px, 1.6vw, 22px); }

.gallery:hover .gallery__arrow { opacity: 1; }
.gallery__arrow:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }

.gallery__count {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-align: right;
}

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

/* ── Previous / next project ── */

.project__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px clamp(20px, 3vw, 40px);
  margin: clamp(40px, 5vw, 70px) 0 0;
  padding: clamp(22px, 3vw, 32px) 0 0;
  border-top: 1px solid var(--line);
}

.project__nav-link {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
}
.project__nav-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.project__nav-link--all {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Now that the slideshow takes more of the row, stack sooner — a description
   squeezed below about 290px wide reads as a ribbon. */
@media (max-width: 1050px) {
  .project__body { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
}

@media (max-width: 560px) {
  .project__nav { justify-content: center; text-align: center; }
}

/* ── Contact page: social links in the column, pared-back footer ───────── */

.contact-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 34px);
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
}
.contact-social a:hover span,
.contact-social a:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-social svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
  flex: none;
}

/* The address, email and social links all appear in the page above, so this
   page's footer carries the copyright line alone and needs far less room. */
.site-footer--minimal {
  padding-top: clamp(50px, 8vh, 90px);
  padding-bottom: clamp(36px, 5vh, 60px);
}

/* ── Mailing-list pop-up: a much smaller panel than the inquiry form ───── */

.modal__panel--narrow { max-width: 520px; }

.modal__panel--narrow .modal__body {
  padding: clamp(40px, 5vw, 62px) clamp(24px, 5vw, 58px) clamp(36px, 4.5vw, 54px);
}

.modal__panel--narrow .inquiry__title { font-size: clamp(30px, 3.6vw, 42px); }

.modal__panel--narrow .inquiry__intro {
  margin-bottom: clamp(26px, 4vw, 38px);
  font-size: 15.5px;
}

.inquiry-form__note {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
}

/* ── Contact page: the inquiry form is the page ───────────────────────── */

.page--form {
  max-width: 760px;
  margin: 0 auto;
}

.form-title {
  font-family: "Fiona", var(--font-display), serif;   /* as on the About page */
  font-weight: 500;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 clamp(18px, 3vw, 28px);
}

.form-lede {
  max-width: 62ch;
  margin: 0 auto clamp(40px, 6vw, 70px);
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.page--form .inquiry-form { max-width: 620px; margin: 0 auto; }

.page--form .inquiry-done {
  max-width: 54ch;
  margin: 0 auto;
  text-align: center;
}

/* ── Mailing-list button, bottom-left of every page ────────────────────── */

.list-fab {
  position: fixed;
  left: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 150;                 /* over the page, under an open pop-up */
  padding: 12px 20px;
  border: 1px solid var(--line);
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(27, 26, 24, .13);
  transition: background-color 240ms var(--ease), color 240ms var(--ease),
              box-shadow 240ms var(--ease);
}

.list-fab:hover,
.list-fab:focus-visible {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 4px 20px rgba(27, 26, 24, .22);
}

/* The mobile menu covers the screen; the button shouldn't sit on top of it. */
body.nav-open .list-fab,
body.modal-open .list-fab { display: none; }

@media (max-width: 560px) {
  .list-fab { padding: 11px 15px; font-size: 12px; letter-spacing: .05em; }
}

/* A slide carrying two photographs side by side, as on the reference site. */
.gallery__slide--split {
  display: flex;
  align-items: center;      /* the void falls above and below, evenly */
  justify-content: center;
  gap: 5px;
}
.gallery__slide--split img {
  /* One box for every photograph on the slide — same width, same height.
     project-page.js measures it: the width is an equal share of the frame,
     the height follows the tallest photograph but never exceeds the frame.
     Two side by side therefore fill it; three are shorter, so the frame
     shows above and below them. */
  flex: none;
  object-fit: cover;
}

/* Photographer credit, under the project description. */
.project__credit {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* A portrait photograph on its own keeps its shape: shown whole inside the
   frame rather than cropped to a landscape box. */
.gallery__slide--portrait img {
  object-fit: contain;
}