/* ============================================================
   Winky Lewis Photo — styles for every page
   ------------------------------------------------------------
   Sections in this file:
     1. Basics (colours, font, spacing)
     2. Nav bar
     3. Home page
     4. Category pages (photo grid)
     5. Lightbox (the big photo view)
     6. Inquire page (the form)
     7. Footer
     8. Corporate page (8b. Info page)
     9. Phones and tablets
    10. Hospitality pages (hidden: hospitality.html and the two collections)
   ============================================================ */


/* ---------- 1. Basics ---------- */

/* Colours and sizes used throughout. Change them here, once. */
:root {
  --ink:    #1a1a1a;   /* main text colour */
  --muted:  #8a8a8a;   /* lighter grey text */
  --line:   #e6e6e6;   /* thin borders */
  --white:  #ffffff;
  --gap:    12px;      /* space between photos in the grid */
  --side:   48px;      /* empty space at the left and right of the page */
  --header: 96px;      /* height of the nav bar */
  --header-small: 64px;  /* its height once you scroll down */

  /* Futura first: Macs have it built in. Everyone else gets Jost,
     a free look-alike loaded from Google Fonts in each page's <head>. */
  --font: Futura, "Futura PT", "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* Remove the browser's default spacing so we control it ourselves. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header);   /* room for the floating nav bar */
}

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

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

/* The main content area on every page. */
main {
  padding: 40px var(--side) 80px;
}

/* Small, spaced-out capital letters used for headings and labels. */
.page-title,
.section-title {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-title {
  margin-bottom: 40px;
}

.section-title {
  color: var(--muted);
  margin: 64px 0 20px;
}

/* No big gap when a section title sits right under the page title. */
.page-title + .section-title {
  margin-top: 0;
}

/* A quiet text link: small black capitals with a thin underline, no box.
   Used for "Get an Estimate" on the Corporate page. */
.text-link {
  display: block;
  margin-top: 20px;
  margin-left: 3px;  /* nudged right a hair */
  padding: 0;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

/* "Get an Estimate" on Corporate: close to the button above,
   with the same size and spacing as the button and lined up with its left edge. */
.text-link.estimate-link {
  font-size: 12px;        /* same as the button */
  letter-spacing: 0.16em; /* same as the button */
  margin-left: 0;         /* cancels the 3px nudge from .text-link */
  text-underline-offset: 4px;
  margin-top: 12px;
}

/* "Schedule a 15-minute call" next to the Commercial page buttons:
   the same size and spacing as the button, like "Get an Estimate" on Corporate. */
.text-link.small-link {
  font-size: 12px;        /* same as the button */
  letter-spacing: 0.16em; /* same as the button */
  margin-left: 0;         /* cancels the 3px nudge from .text-link */
  text-underline-offset: 4px;
}


/* ---------- 2. Nav bar ---------- */

/* Name on the left, Info and Inquire on the right.
   It floats: it stays at the top of the screen while the page scrolls. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;   /* above the photos, below the lightbox */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header);
  padding: 0 var(--side);
  background: var(--white);
  border-bottom: 1px solid var(--ink);   /* thin black line under the nav */
  transition: height 0.25s;
}

/* Once you scroll down (js/nav.js adds "scrolled"), the nav gets a bit
   smaller so more photos fit on screen. */
.site-header.scrolled {
  height: var(--header-small);
}

.site-header.scrolled .site-name {
  font-size: 19px;
}

.site-header.scrolled .inquire-button {
  padding: 7px 18px;
}

.site-name {
  font-family: var(--font);   /* Futura (Jost as a stand-in on non-Macs) */
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;  /* shows as WINKY LEWIS PHOTO on every page */
  transition: font-size 0.25s;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* "Info" is a plain text link, so Inquire stays the main button. */
.info-link {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

/* Darken it on hover, and while you are on the Info page. */
.info-link:hover,
.info-link[aria-current="page"] {
  color: var(--ink);
}

.inquire-button {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--ink);
  transition: background 0.2s, color 0.2s, padding 0.25s;
}

/* Light blue on hover. */
.inquire-button:hover {
  background: #cfe4f5;
  border-color: #cfe4f5;
  color: var(--ink);
}

/* Stays light blue on the Inquire page itself, to show you're there. */
.inquire-button[aria-current="page"] {
  background: #cfe4f5;
  border-color: #cfe4f5;
  color: var(--ink);
}


/* ---------- 3. Home page ---------- */

/* Four tiles side by side, filling the screen below the nav bar.
   Section 9 stacks them on phones. */
main.home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(100vh - var(--header));
  padding: 0;
}

/* Each tile is a link with a dark grey background
   (the grey shows only if a tile has no photo). */
.home-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #6b6b6b;
}

/* The photo fills the tile, trimming edges if needed. */
.home-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A soft dark band across the middle of the tile, behind the title,
   so white text stays readable on light photos. 20% black at the
   centre, fading to clear above and below. */
.home-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 62%
  );
  transition: opacity 0.3s;
}

/* A dark layer over the photo. Invisible until you hover. */
.home-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Fade the dark layer in on hover, or when a keyboard user tabs to a tile. */
.home-tile:hover::after,
.home-tile:focus-visible::after {
  opacity: 1;
}

/* At the same time, fade the band out, so hover looks the same as before. */
.home-tile:hover::before,
.home-tile:focus-visible::before {
  opacity: 0;
}

/* The section name, centred, above the band and the dark layer. */
.home-tile span {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* The short description under the tiles. Plain body text, centred,
   kept to a narrow column so the lines don't get too long. */
.home-intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px var(--side) 0;
  text-align: center;
}

/* Fine Art page: three photos in a centred row, with a label under each.
   "center" lines up the middles of the photos, so the squares sit
   level with the middle of the taller Shadow Kids photo.
   Section 9 stacks them on phones. */
.fine-art-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 32px;
  max-width: 1000px;
  margin: 40px auto 80px;
}

.fine-art-tile {
  display: block;
}

/* The photo box: grey until a photo is in it. */
.fine-art-photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: #6b6b6b;
}

.fine-art-photo.tall {
  aspect-ratio: 4 / 5;
}

.fine-art-photo.square {
  aspect-ratio: 1 / 1;
}

/* The photo fills its box, trimming edges if needed. */
.fine-art-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A dark layer over the photo only. Invisible until you hover. */
.fine-art-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.fine-art-tile:hover .fine-art-photo::after,
.fine-art-tile:focus-visible .fine-art-photo::after {
  opacity: 1;
}

/* The series name: small grey spaced capitals under the photo.
   The photo names on shadow-kids.html (.photo-label) use the same look.
   Montserrat is loaded on fine-art.html and shadow-kids.html only. */
.fine-art-label,
.photo-label {
  display: block;
  margin-top: 14px;
  font-family: "Gotham Narrow", "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--muted);
}


/* ---------- 4. Category pages (photo grid) ---------- */

/* 3 columns on a computer. Section 9 drops this to 2, then 1. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* Every tile is the same shape. "cover" fills the tile, trimming edges
   if needed — the full, uncropped photo shows when you click it. */
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.2s;
}

.photo-grid img:hover {
  opacity: 0.85;
}

/* Client logo in the top-left corner of a photo (Corporate page).
   Hidden until you hover over the photo. Clicks pass through it to the photo. */
.photo-grid a {
  position: relative;
}

.photo-grid .tile-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  width: auto;
  height: 44px;          /* square and round logos */
  aspect-ratio: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.photo-grid .tile-logo.wide {
  width: 90px;           /* wide logos are sized by width instead */
  height: auto;
}

.photo-grid .tile-logo.extra-wide {
  width: 110px;          /* Acadia's thin letters need a little more size */
  height: auto;
}

.photo-grid a:hover .tile-logo {
  opacity: 0.7;
}

/* Touch screens can't hover, so the logo is always shown there,
   a little smaller and lighter. */
@media (hover: none) {
  .photo-grid .tile-logo {
    opacity: 0.6;
    transform: scale(0.85);
    transform-origin: top left;
  }
}


/* ---------- 5. Lightbox (the big photo view) ---------- */

/* Covers the whole screen. Hidden until lightbox.js adds the "open" class. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Close (×), previous (‹) and next (›) buttons. */
.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: 34px;
  line-height: 1;
  padding: 12px 16px;
  cursor: pointer;
  opacity: 0.6;
}

.lightbox button:hover {
  opacity: 1;
}

.lightbox-close { top: 12px;  right: 16px; }
.lightbox-prev  { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 12px; top: 50%; transform: translateY(-50%); }

/* Stop the page behind from scrolling while the lightbox is open. */
body.no-scroll {
  overflow: hidden;
}


/* ---------- 6. Inquire page (the form) ---------- */

.inquire-form {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.inquire-intro {
  max-width: 520px;
  color: var(--muted);
  margin-bottom: 40px;
}

.inquire-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Just a thin line under each box, for a quiet look. */
.inquire-form input,
.inquire-form textarea {
  font-family: var(--font);
  font-size: 16px;   /* 16px stops iPhones zooming in when you tap a box */
  color: var(--ink);
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  background: transparent;
  outline: none;
  resize: vertical;
}

.inquire-form input:focus,
.inquire-form textarea:focus {
  border-bottom-color: var(--ink);
}

/* Hide the little up/down arrows in the number box. */
.inquire-form input[type="number"] {
  -moz-appearance: textfield;   /* Firefox */
  appearance: textfield;
}

.inquire-form input[type="number"]::-webkit-inner-spin-button,
.inquire-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;     /* Safari and Chrome */
  margin: 0;
}

/* The light grey example text, like "e.g. early November". */
.inquire-form input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

/* A group of round buttons (Location, Type). No box around it. */
.choice-group {
  border: none;
}

/* The group's heading, matching the other field labels. */
.choice-group legend {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* The options sit side by side, and wrap on narrow phones. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

/* Each option: normal text (not small capitals), button then words. */
.inquire-form .choices label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

/* Undo the underline look for the round buttons and tick boxes themselves. */
.inquire-form input[type="radio"],
.inquire-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: none;
  accent-color: var(--ink);   /* dark grey dot instead of the browser's blue */
  cursor: pointer;
}

.inquire-form button {
  align-self: flex-start;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}

.inquire-form button:hover {
  background: var(--white);
  color: var(--ink);
}

/* The bottom row, holding the Send button. */
.form-actions {
  display: flex;
  align-items: center;
}



/* ---------- 7. Footer ---------- */

.site-footer {
  padding: 40px var(--side);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}

/* One-line description above the copyright line. Same look as the copyright text. */
.footer-tagline {
  margin: 0 0 6px;
}

/* Instagram and LinkedIn icons, in a row above the copyright line. */
.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.social-links a {
  color: var(--muted);   /* same grey as the Info link */
  transition: color 0.2s;
}

.social-links a:hover {
  color: var(--ink);     /* dark on hover */
}

.social-links svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}


/* ---------- 8. Corporate page ---------- */

/* Headline, intro paragraph and button, above everything else.
   They sit close together as one group,
   with a bigger space below before the photos start. */
.corp-intro {
  margin-bottom: 64px;
}

.corp-headline {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.corp-intro p {
  max-width: 640px;   /* keeps the paragraph to a comfortable line length */
  color: var(--muted);
}

/* The "I come to you" line: no width limit, so it stays on one line
   (it still wraps on phones, where there isn't room). */
.corp-intro .corp-lead {
  max-width: none;
}

/* The call button under the intro paragraph, kept close to it. */
.corp-intro .inquire-button {
  display: inline-block;
  margin-top: 16px;
}

/* The estimator, opened below the button, with a thin line above it.
   The question and answers use the Inquire form styles (section 6). */
.estimate {
  max-width: 520px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Make sure hidden screens and buttons really hide. */
.estimate-form [hidden] {
  display: none;
}

/* A thin grey bar that fills in black as they go. estimate.js sets the width. */
.estimate-bar {
  height: 4px;
  background: var(--line);
}

.estimate-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 0.3s;
}

/* All the screens share one spot, so the area is always as tall as the
   tallest screen and the buttons below don't move. Screens not showing
   are kept in place but invisible (they can't be clicked or tabbed to). */
.estimate-screens {
  display: grid;
  min-height: 210px;   /* room for the longest result (price, math and three notes) */
}

.estimate-screens > .estimate-step {
  grid-area: 1 / 1;
}

.estimate-form .estimate-screens > .estimate-step[hidden] {
  display: block;
  visibility: hidden;
}

.estimate-form .estimate-screens > label.estimate-step[hidden] {
  display: flex;   /* the "How many people?" screen keeps its usual layout */
}

/* Answers in a column, since some are long. The button lines up
   with the first line of text if an answer wraps. */
.choices.stacked {
  flex-direction: column;
}

.inquire-form .choices.stacked label {
  align-items: flex-start;
}

.inquire-form .choices.stacked input {
  margin-top: 4px;
  flex-shrink: 0;
}

/* Note when a question hasn't been answered. Its line is always kept,
   even when empty, so the buttons don't jump when it appears. */
.corp-intro .estimate-error {
  color: var(--ink);   /* black, not the grey of the intro paragraph */
  font-size: 14px;
  line-height: 20px;
  min-height: 20px;
  margin: -12px 0 -8px;
}

/* Back, Next and Start over in a row. Next is black (section 6);
   Back and Start over are white with a thin border. */
.estimate-buttons {
  display: flex;
  gap: 12px;
}

.inquire-form .estimate-buttons button {
  padding: 12px 28px;
}

.inquire-form .estimate-back,
.inquire-form .estimate-restart {
  background: var(--white);
  color: var(--ink);
}

.inquire-form .estimate-back:hover,
.inquire-form .estimate-restart:hover {
  background: var(--ink);
  color: var(--white);
}

/* The result screen: price, math, notes, then the call button. */
.estimate-result:focus {
  outline: none;
}

.corp-intro .estimate-price {
  color: var(--ink);   /* black, not the grey of the intro paragraph */
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 4px;
}

.estimate-math {
  color: var(--muted);
  margin-bottom: 12px;
}

.estimate-note {
  color: var(--muted);
  font-size: 14px;
}

.estimate-result .inquire-button {
  display: inline-block;
  margin-top: 20px;
}

/* The two options, side by side below the client logos, in a centred
   column the same width as the quotes. Section 9 stacks them on phones. */
.corp-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 700px;
  margin: 56px auto 0;
  text-align: center;
}

.corp-option {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

/* Smaller gap above the option headings than other section titles. */
.corp-option .section-title {
  margin: 0 0 10px;
  color: var(--ink);
}

/* The bottom "Schedule a call" button, centred, with room above and below. */
.corp-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 48px 0 56px;
}

/* The small "or send an inquiry" link under the bottom button. */
.corp-small-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
}

.corp-small-link:hover {
  color: var(--ink);
}

/* Client logos in a row: grey, and all the same height. */
/* "Clients include" heading and logos, centred like the quotes. */
.corp-clients {
  text-align: center;
}

/* Less room above "Clients include" than other section titles. */
.corp-clients .section-title {
  margin-top: 48px;
}

/* Client logos in a centred row, shown in grey. */
.client-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 56px;
  margin-top: 24px;
}

/* Each logo fits inside a box 180px wide and 50px tall,
   keeping its shape, so wide logos don't look bigger. */
.client-logos img {
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 50px;
  filter: grayscale(1);
  opacity: 0.7;
}

/* Square logos can be a little taller, to balance the wide ones. */
.client-logos img.logo-square {
  max-height: 64px;
}

/* A client with no logo yet, shown as text. */
.client-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A client quote that sits in the photo grid like a photo:
   same 4:5 shape, very light grey, text centred both ways. */
.quote-tile {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10%;
  background: #f4f4f4;
  text-align: center;
  container-type: inline-size;   /* lets the text size follow the tile's width (cqw below) */
}

/* Text grows and shrinks with the tile, between the two sizes in clamp().
   The first line is a fallback for older browsers. */
.quote-tile blockquote {
  font-size: 16px;
  font-size: clamp(13px, 5.6cqw, 18px);
  line-height: 1.6;
  margin-bottom: 1em;
}

.quote-tile figcaption {
  font-size: 13px;
  font-size: clamp(11px, 4.2cqw, 14px);
  line-height: 1.5;
  color: var(--muted);
}

/* The person's name, darker than the title line below it. */
.quote-name {
  color: var(--ink);
  font-weight: 500;
}


/* ---------- 8b. Info page ---------- */

/* Words on the left, Winky's portrait filling the space on the right.
   The photo lines up with the top of the statement.
   Below 1000px they stack, photo first. */
.info-layout {
  display: grid;
  grid-template-columns: minmax(0, 540px) 1fr;   /* about 65–75 characters a line */
  gap: 164px;
  align-items: start;
}

.info-photo {
  width: 100%;
  height: auto;
}

@media (max-width: 1000px) {
  .info-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .info-photo {
    order: -1;          /* shows above the words */
    max-width: 640px;
  }
}

/* The statement, kept to a comfortable reading width. */
.info-text {
  max-width: 640px;
}

.info-text p {
  margin-bottom: 24px;
}

/* The "Shadow Kids" link, in the same small capitals as the titles. */
.info-text a {
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.info-text a:hover {
  border-color: var(--ink);
}

/* Name, cities, email and phone under the statement. */
.info-contact {
  font-style: normal;    /* browsers make <address> italic by default */
  color: var(--muted);
  margin: 48px 0 80px;
}

.info-contact a:hover {
  color: var(--ink);
}

.info-name {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ---------- 8c. Page intro line and Book page ---------- */

/* A short line and a button above the photos (Children & Family, Commercial, Corporate).
   Plain body text on purpose: it's an aside, not a headline. */
.page-intro {
  margin: -24px 0 56px;   /* pulls it a little closer to the page title */
}

/* The series statement on shadow-kids.html, running the full width of the page. */
.series-statement {
  margin-top: 0;   /* no page title above it to pull up toward */
}

.series-statement p + p {
  margin-top: 1em;
}

/* The button: the same box as "Schedule a 15-minute call" on Corporate. */
.page-intro .inquire-button {
  display: inline-block;
  margin-top: 16px;
}

/* A button with a small link to its right (Commercial). */
.button-row {
  display: flex;
  flex-wrap: wrap;        /* the link drops below on very narrow screens */
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
}

.button-row .inquire-button,
.button-row .text-link {
  margin-top: 0;
}

/* The small dot between a button and the link next to it (Corporate, Commercial). */
.link-dot {
  font-size: 16px;
  line-height: 1;
}

/* Below the photos, the call link sits centered under the button. */
.page-outro .small-link {
  margin: 12px 0 0;
}

/* The same block again below the photos, with space above it instead. */
.page-outro {
  margin: 48px 0 0;
  text-align: center;   /* centers the line and the button */
}

/* A little less space between these blocks and the photos (Commercial). */
.page-intro.compact {
  margin-bottom: 40px;
}

.page-outro.compact {
  margin: 36px 0 0;
}

/* Book page: NYC and Maine as two big blocks side by side.
   Section 9 stacks them on phones. */
.book-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 40px auto 0;
}

/* Each block: a thin grey frame with the name in the middle.
   The frame turns black on hover. */
.book-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  border: 1px solid var(--line);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: border-color 0.3s;
  position: relative;   /* so the picture can sit behind the name */
  overflow: hidden;
}

/* The faint grey skyline or map, centred behind the name. */
.book-silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75%;
  fill: #ececec;
}

/* The skyline is wide, so size it by width and stand it on the bottom edge. */
.book-silhouette.skyline {
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
  width: 90%;
  height: auto;
}

/* The name sits on top of the picture. */
.book-option span {
  position: relative;
}

.book-option:hover,
.book-option:focus-visible {
  border-color: var(--ink);
}

/* ---------- 9. Phones and tablets ---------- */

/* Tablets and small laptops: 2 photos across. */
@media (max-width: 1000px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Computers (3 photos across): hide one Corporate photo so the
   last row of 3 has no empty spot. It shows at every smaller size. */
@media (min-width: 1001px) {
  .hide-at-3-columns {
    display: none;
  }
}

/* Phones and narrow windows. */
@media (max-width: 820px) {
  :root {
    --side: 20px;
    --header: 56px;        /* on phones the nav is always the small size */
    --header-small: 56px;
  }

  /* The nav starts out minimized on phones (the same size it shrinks to
     on bigger screens), so it doesn't change size when you scroll. */
  .site-name,
  .site-header.scrolled .site-name {
    font-size: clamp(12px, 8vw - 18px, 18px);
  }

  .site-nav {
    gap: 18px;
  }

  /* No "Info" link on phones, just the Get in Touch button. */
  .info-link {
    display: none;
  }

  .inquire-button {
    padding: 8px 14px;
  }

  .site-header .inquire-button,
  .site-header.scrolled .inquire-button {
    padding: 6px 12px;
  }

  main {
    padding-top: 24px;
  }

  /* Stack the home tiles, each about half the screen tall. */
  main.home {
    grid-template-columns: 1fr;
    height: auto;
    padding-top: 0;
  }

  .home-tile {
    height: 50vh;
  }

  /* Fine Art page: stack the three tiles, each label under its photo. */
  .fine-art-tiles {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 24px auto 40px;
  }

  .lightbox {
    padding: 56px 12px;
  }

  /* Corporate page: stack the options. */
  .corp-options {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 44px;
  }

  /* Book page: NYC on top, Maine below, a bit shorter. */
  .book-options {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }

  .book-option {
    height: 200px;
  }

  /* On phones "Get an Estimate" can drop below the button, so hide the dot. */
  .link-dot {
    display: none;
  }

}

/* Small phones: 1 photo across. */
@media (max-width: 520px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}


/* ---------- 10. Hospitality pages ---------- */
/* hospitality.html, flora-collection.html and letters-collection.html.
   Nothing else on the site uses these styles. */

/* "Hospitality Collections" heading, centred like "Licensing Fees". */
.hospitality-title {
  text-align: center;
}

/* "Winky Lewis Photo" centred in the nav bar (hospitality.html only).
   Three columns: an empty one on the left, the name in the middle,
   and Info and Get in Touch on the right. Phones keep the usual layout. */
.site-header.centered-name {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.site-header.centered-name .site-name {
  grid-column: 2;
}

.site-header.centered-name .site-nav {
  grid-column: 3;
  justify-self: end;
}

/* The landing page has two tiles instead of three (see .fine-art-tiles, section 3). */
.fine-art-tiles.two-tiles {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}

/* "Licensing Fees": the title, table and note, centred under the tiles. */
.licensing {
  max-width: 520px;
  margin: 0 auto;
}

.licensing .section-title {
  margin-top: 0;
  text-align: center;
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.fee-table th,
.fee-table td {
  padding: 12px 4px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

/* Column headings: small grey capitals. */
.fee-table th {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The fee column lines up on the right. */
.fee-table th:last-child,
.fee-table td:last-child {
  text-align: right;
}

.fee-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
}

/* The "Book a 15-minute call" button at the bottom, centred. */
.hospitality-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 64px;
}

/* "Back to collections", above the page title. */
.back-link {
  display: inline-block;
  margin: 0 0 32px;
}

/* Collection grids: show each whole photo instead of cropping it to 4:5.
   Photos sit at the top of their row, so different shapes still line up. */
.photo-grid.uncropped {
  align-items: start;
  row-gap: 32px;
}

.photo-grid.uncropped img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* Titles can be long, so let them wrap instead of running off the edge. */
.photo-grid.uncropped .photo-label {
  white-space: normal;
}

/* Phones: stack the two landing page tiles, like the Fine Art page. */
@media (max-width: 820px) {
  .fine-art-tiles.two-tiles {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .hospitality-contact {
    margin-top: 48px;
  }
}

/* Tablets and phones: not enough room to centre the name next to the links,
   so it goes back to the left like every other page. */
@media (max-width: 1000px) {
  .site-header.centered-name {
    display: flex;
  }
}