/* ==========================================================================
   "A place shaped over time" (/a-place-shaped-over-time/)
   The approved demo (lakefront-place-shaped-over-time.html) is the reference for
   proportions, type scale, spacing, radii and the order of the colours.
   Every rule starts with .lakefront-page--story, so nothing here can reach another page.
   Colours come from the theme's own variables: --paper, --blue, --burgundy (the Customizer's main
   colour, coral by default) and --mint. Header, mobile menu, footer, page-jump bar, Take part and
   the cursor are the theme's own components and are not styled here.
   ========================================================================== */

/* ---------- Hero ---------- */
.lakefront-page--story .story-hero { grid-template-columns: minmax(170px, 250px) minmax(0, 900px); justify-content: center; }
.lakefront-page--story .story-hero .sub-hero__copy { width: 100%; max-width: 900px; }
/* The accent word is a bold run (a format the editor keeps), shown in the main colour. */
.lakefront-page--story .story-hero h1 strong { color: var(--burgundy); font-weight: inherit; }
/* Same width as the demo (the theme's 610px intro), but never wider than what is left of the column after the indent. */
.lakefront-page--story .story-hero .sub-hero__intro { width: calc(100% - min(12vw, 145px)); margin-left: min(12vw, 145px); margin-right: 0; }
.lakefront-page--story .story-hero__link { margin: 32px 0 0 min(12vw, 145px); max-width: 610px; font-weight: 500; }
/* The link behaves exactly like "Explore the story ↓" on About: 1px underline 7px below at 48% strength; full
   strength and 10px below on hover and keyboard focus, same 180ms transition. The text colour never changes.
   The rgba line is the fallback for a browser without color-mix(). */
.lakefront-page--story .story-hero__link a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(0, 0, 0, .48);
  text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease), text-underline-offset 180ms var(--ease);
}
.lakefront-page--story .story-hero__link a:hover,
.lakefront-page--story .story-hero__link a:focus-visible {
  text-decoration-color: currentColor;
  text-underline-offset: 10px;
}

/* ---------- Image and text rows (Before Lakefront, A tradition of shared life, The wider place) ---------- */
.lakefront-page--story .story-editorial { padding: clamp(95px, 10vw, 165px) clamp(24px, 6vw, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 7vw, 110px); align-items: center; background: var(--paper); }
.lakefront-page--story .story-editorial--blue { background: var(--blue); }
.lakefront-page--story .story-editorial--reverse .story-copy { order: 2; }
.lakefront-page--story .story-editorial--reverse figure { order: 1; }
.lakefront-page--story .story-copy { max-width: 680px; min-width: 0; }
.lakefront-page--story .story-editorial h2 { margin: 27px 0 28px; max-width: 11ch; font: 400 clamp(3.2rem, 5.5vw, 7rem) / .96 var(--serif); letter-spacing: -.047em; }
.lakefront-page--story .story-editorial p:not(.eyebrow) { max-width: 55ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; }
.lakefront-page--story .story-editorial figure { margin: 0; min-width: 0; }
.lakefront-page--story .story-editorial img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }
.lakefront-page--story .story-editorial figcaption,
.lakefront-page--story .story-archive figcaption,
.lakefront-page--story .story-images figcaption { margin-top: 13px; font-size: .82rem; line-height: 1.45; letter-spacing: .02em; opacity: .72; }
.lakefront-page--story .story-place h2 { max-width: 12ch; }
.lakefront-page--story .story-place img { object-position: center; }

/* ---------- Historic archive image ---------- */
.lakefront-page--story .story-archive { padding: 48px clamp(24px, 6vw, 96px) clamp(95px, 10vw, 165px); background: var(--paper); } /* 48 px of paper above the image, so it does not touch the blue section */
.lakefront-page--story .story-archive figure { margin: 0; }
.lakefront-page--story .story-archive img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }

/* ---------- Lakefront today (main colour) ---------- */
.lakefront-page--story .story-today { padding: clamp(100px, 10vw, 160px) clamp(24px, 6vw, 96px); background: var(--burgundy); color: var(--paper); }
.lakefront-page--story .story-today .sub-band__head { margin-bottom: clamp(42px, 5vw, 75px); }
.lakefront-page--story .story-today .sub-band__text p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; max-width: 680px; }
.lakefront-page--story .story-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 40px); align-items: start; }
.lakefront-page--story .story-images figure { margin: 0; min-width: 0; }
.lakefront-page--story .story-images figure { grid-row: 1; }
.lakefront-page--story .story-images .story-slot-1 { grid-column: 1; }
.lakefront-page--story .story-images .story-slot-2 { grid-column: 2; margin-top: 48px; }
.lakefront-page--story .story-images .story-slot-3 { grid-column: 3; }
.lakefront-page--story .story-images img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }
.lakefront-page--story .story-images .story-slot-2 img { object-position: 50% 15%; } /* upright photograph in a 4:3 frame: keeps the whole head in view */

/* Take part: the link may use the full column (the shared 26ch limit made long labels wrap early) */
.lakefront-page--story .gi-link { max-width: none; }

/* ---------- What continues ---------- */
.lakefront-page--story .story-continuity { padding: clamp(85px, 9vw, 145px) clamp(24px, 6vw, 96px); background: var(--paper); }
.lakefront-page--story .story-continuity__inner { max-width: 1500px; margin: auto; }
.lakefront-page--story .story-continuity .eyebrow { margin: 0 0 clamp(42px, 6vw, 90px); }
.lakefront-page--story .story-continuity blockquote { margin: 0; padding: 0; border: 0; max-width: none; font: 300 clamp(4.2rem, 7vw, 9rem) / .9 var(--serif); font-style: normal; letter-spacing: -.055em; }
.lakefront-page--story .story-continuity blockquote p { display: block; margin: 0; font: inherit; letter-spacing: inherit; }
.lakefront-page--story .story-continuity blockquote p:nth-child(2) { padding-left: clamp(20px, 12vw, 210px); }
.lakefront-page--story .story-continuity blockquote p:nth-child(3) { padding-left: clamp(48px, 10vw, 160px); }
.lakefront-page--story .story-continuity__note { max-width: 720px; margin: clamp(44px, 5vw, 72px) 0 0 auto; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; }

/* ---------- Responsive (the demo's own breakpoints) ---------- */
@media (max-width: 900px) {
  .lakefront-page--story .story-hero { grid-template-columns: 1fr; }
  .lakefront-page--story .story-hero .sub-hero__intro { width: 100%; margin-left: 0; }
  .lakefront-page--story .story-hero__link { margin-left: 0; }
  .lakefront-page--story .story-editorial { grid-template-columns: 1fr; }
  .lakefront-page--story .story-editorial--reverse .story-copy,
  .lakefront-page--story .story-editorial--reverse figure { order: initial; }
}
@media (max-width: 640px) {
  .lakefront-page--story .story-editorial img { aspect-ratio: 4 / 3; }
  .lakefront-page--story .story-archive { padding-top: 32px; }
  .lakefront-page--story .story-images { grid-template-columns: 1fr; gap: 30px; }
  .lakefront-page--story .story-images .story-slot-1,
  .lakefront-page--story .story-images .story-slot-2,
  .lakefront-page--story .story-images .story-slot-3 { grid-row: auto; grid-column: auto; margin-top: 0; }
  .lakefront-page--story .story-continuity blockquote { font-size: clamp(3.7rem, 13.5vw, 5.5rem); }
}

/* ---------- Block editor only: the image slot that still waits for final photographs ---------- */
.lakefront-page--story .story-images .wp-block-image:not(:has(img[src])):not(:has(.components-spinner))::before {
  content: "Open image slot: final photograph still to be chosen";
  display: block;
  margin-bottom: 8px;
  font: 500 .82rem/1.4 var(--sans);
  letter-spacing: .02em;
}