/* Home, Gallery B style (Joe 23 Oct 2026; the style's STYLE.md stays with the studio's design files, outside this repo).
   home-base.css is Home's copy of the shared base (less the old header and Instagram strip, 29 Oct 2026; the top bar is
   header.css); everything that changes for the Gallery style lives here. */

/* Headings in Libre Caslon Display (one weight, no italic); text stays Figtree. */
:root { --display: "Libre Caslon Display", "Caslon fallback Big Caslon", "Caslon fallback Georgia", "Caslon fallback Times New Roman", "Big Caslon", Georgia, serif; }

/* First screen: body text in full ink (layout A "Cakes first" is at the end of this file). */
.hero-copy p { color: var(--ink); }

/* Panels of words: a field of dark or the warm tone, never white on white; 24px between items. */
.panel-text { gap: 24px; }
.panel-body > p:first-child { color: var(--ink); }
.tasting .panel-text { background: #f4f1ed; }
.tasting .panel-body > p + p { text-wrap: balance; }  /* the short second paragraph: no word left alone on a line */

/* Section title at the Gallery's chapter size. */
.section-head h2 { font-size: clamp(56px, 6.4vw, 96px); line-height: .95; letter-spacing: -0.02em; }

/* Photographs at their own 2:3, so the whole cake shows, topper to stand (Joe, 23 Oct 2026; replaces STYLE.md's 4:5).
   First screen: the photo column takes its width from the hero's height. Split panels: the photo keeps half
   the width and the panel grows to the photo's height. */
.hero { grid-template-columns: minmax(0, 1fr) auto; }
.hero-photo { height: 100%; aspect-ratio: 2 / 3; }
.hero-photo img { object-position: 50% 50%; }
.hero-photo picture { display: contents; }  /* the <picture> only picks the source; layout stays on the img */
.panel { min-height: 0; }
.panel-photo { aspect-ratio: 2 / 3; }

/* Edge to edge, 4px gutter, no captions, no scrims. */
.hero-photo::after { content: none; }  /* nothing sits on the photo any more, so it needs no scrim */
.panel-photo::after { content: none; }
.trio li { overflow: hidden; }

/* Buttons: styles.css draws focus rings in currentColor, white on a solid ink button, invisible on white or tone. */
.button:focus-visible, .skip-link:focus-visible { outline-color: var(--ink); }
/* The dark panel's button (Ellie's "Explore our cakes", 5 Nov 2026): light on dark, as on Flavors' quote panel. */
.panel.dark .button { background: var(--on-dark); color: var(--ink); }
.panel.dark .button:focus-visible { outline-color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) { .panel.dark .button:hover { background: #fff; } }

/* The top bar is header.css, identical on every page (Joe, 29 Oct 2026): on white at every size, nothing on the
   photo, there from first paint. Where it sits on Home is in the first-screen rules at the end of this file. */

@media (max-width: 760px) {
  .section-head h2 { font-size: 52px; }
  .hero-photo { height: auto; }
  .hero-photo, .panel .panel-photo, .trio img, .trio li:first-child img { aspect-ratio: 2 / 3; }
}

/* ==========================================================================
   Sizing (Joe, 26 Oct 2026): every panel fits one screen, the photo column takes its width from the
   panel's height at the photo's own 2:3, and no photo is ever trimmed (frames match each photo's ratio).
   Vertical rhythm comes from one token: --space-section (S) between bands, S/2 and S/4 inside them.
   ========================================================================== */

/* No trimming anywhere: images fill frames that already have their shape. */
.hero-photo img, .panel-photo img { object-fit: contain; }

/* Gallery: three cakes in one justified row at a shared height. Each cell's width is in proportion to its
   photo's ratio (2:3 = 2, square = 3), so the square cake sits at full size beside the two tall ones. */
.trio { display: flex; gap: 4px; }
.trio li { flex: 2 1 0; min-width: 0; }
.trio li:nth-child(2) { flex-grow: 3; }
/* "auto <ratio>": the photo's own ratio once loaded, the same ratio reserved before it loads (plain "auto"
   would override the width/height attributes and collapse the row until the lazy photos arrive). */
.trio img, .trio li:first-child img { width: 100%; height: auto; aspect-ratio: auto 2 / 3; object-fit: fill; }
.trio li:nth-child(2) img { aspect-ratio: auto 1; }

/* Follow along and reviews (Joe, 2026-10-29): replaces the six-photo Instagram strip. Plain links only, no feeds,
   embeds or Google widgets, and no photo (the three cakes sit just above). One white band, half the strip's height
   or less: the heading, then Instagram and Facebook, and the Hour Detroit line, a line asking for Google reviews
   and the two review links. No rating or review count (Joe, 1 Nov 2026: a count goes stale). */
.follow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px var(--panel-pad); padding: calc(var(--space-section) / 2) var(--edge); }
.follow h2 { flex: 1 0 100%; font-size: var(--s-heading); line-height: 1.03; }
.follow p { font-size: var(--s-body); line-height: 1.6; }
.follow a { font-weight: 500; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.follow-links { display: flex; flex-wrap: wrap; column-gap: 28px; }  /* same gap as .actions; each link a full line tall (27-29px) */
/* The Hour Detroit line (Joe, 1 Nov 2026) sits above the Google lines, so Instagram and Facebook still line up
   with them. It takes no width of its own: it wraps to the width those lines set. */
.follow-award { contain: inline-size; text-wrap: pretty; }  /* pretty: no word left alone on a last line */
@media (hover: hover) and (pointer: fine) { .follow a:hover { text-decoration-thickness: 2px; } }

@media (min-width: 761px) {
  /* Split panels: one screen tall (capped for very tall screens, and so the photo never takes more than half
     the width). The photo's height drives its width through aspect-ratio; the words take what's left.
     --panel-h sits on :root so the follow band above the tasting panel can line up with it. */
  :root { --panel-h: min(100svh, 1080px, 75vw); }
  .panel {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--panel-h);
  }
  .panel.tasting { grid-template-columns: auto minmax(0, 1fr); }
  .panel.dark { background: var(--dark); }
  .panel.tasting { background: #f4f1ed; }
  .panel-photo { height: var(--panel-h); width: auto; aspect-ratio: 2 / 3; align-self: center; }
  .panel-photo img { position: static; width: 100%; height: 100%; }
  /* Wider word column: keep the measure readable. */
  .panel-text h2 { max-width: 14ch; }
  .panel-body { max-width: 34em; }
  .panel-body > p:first-child { max-width: 30em; }
}

/* Follow band from 900px (where both columns fit beside the split panel): the heading across the top, then
   Instagram and Facebook on the left and the rating on the right, line for line. The right column starts where the
   tasting panel's words start below it (its photo's width plus --panel-pad), so the rating and the tasting heading
   share one left edge; on a very short, wide screen the left column keeps its lines whole instead. */
@media (min-width: 900px) {
  .follow {
    display: grid; column-gap: 0;
    grid-template-columns: minmax(max-content, calc(var(--panel-h) * 2 / 3 + var(--panel-pad) - var(--edge))) minmax(max-content, 1fr);
  }
  .follow h2 { grid-column: 1 / -1; }
  .follow-social { padding-right: 24px; }
}

@media (max-width: 760px) {
  /* Split panels: words, then the photo at full width and its own 2:3. */
  .panel-text { padding: calc(var(--space-section) * 2 / 3) var(--edge); }
  .panel-photo img { position: static; width: 100%; height: 100%; }

  .section-head { padding: var(--space-section) var(--edge) calc(var(--space-section) / 3); }
  .trio { display: flex; }
  .trio li:first-child { grid-column: auto; }

  /* Follow band: one column, heading, Instagram and Facebook, then the rating. */
  .follow { flex-direction: column; align-items: flex-start; gap: 24px; }  /* --panel-pad is a 3-value shorthand here */
  .follow h2 { flex: none; }
}

/* ==========================================================================
   First screen, layout A "Cakes first" (Joe, 29 Oct 2026; ported from comps-hero-2026-10-27/a.css). The drawing is
   the first screen; the words are a small, quiet block in the bottom-left corner the left cake leaves free. The hero
   photo shows only above 1100px; index.html's <picture> gives narrower screens a 1-px blank so they never download it.

   How the drawing is sized: opening.js frames the three cakes as a tight group (side cakes tucked behind) whenever
   the canvas is taller than wide. On tablets and laptops the canvas is always 0.84 as wide as it is tall, and as tall
   as the words allow; on phones it takes the whole screen under the bar and opening.js fits all three cakes to it.
   ========================================================================== */
.hero {
  --hero-h1: 30px;          /* about half the old 57.6px */
  --hero-lede: 16px;
  --hero-copy-w: 292px;     /* the word block's width; the canvas sizes itself to stay clear of it */
  --hero-copy-h: 248px;     /* its height (221px with its bottom padding) plus a gap: for a canvas wholly above it */
}
.hero-copy { gap: 10px; }
.hero-copy h1 { font-size: var(--hero-h1); line-height: 1.05; letter-spacing: -0.01em; text-wrap: nowrap; }
.hero-copy p { font-size: var(--hero-lede); line-height: 1.45; }
.hero-copy .actions { margin-top: 8px; gap: 20px; }
.hero-copy .button { min-height: 44px; padding: 0 18px; font-size: 15px; }
.hero-copy .phone { font-size: 15px; }

/* Landscape tablets and laptops up: words and drawing share one cell. The canvas hangs from the top right; the words
   sit at the bottom left. The canvas takes the full height when the words fit beside it, otherwise 90% of the height,
   narrowed until the words fit under the left cake (its board ends at 80% of the canvas height, and the main cake
   starts 24% of the way across), or, on a tall narrow white column (iPads sideways, 1100-1400px), the whole height
   above the words, whichever is biggest. The third case never wins at the sizes the comps showed (1440, 1024). */
@media (min-width: 761px) and (orientation: landscape) {
  .hero-left { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding-top: 0; }
  .stage {
    grid-area: 1 / 1; container-type: size;
    display: flex; justify-content: flex-end; align-items: flex-start; padding-right: 24px;
  }
  .stage canvas {
    --h: max(min(100cqh, calc((100cqw - var(--hero-copy-w) - 64px) / 0.84)),
             min(90cqh, calc((100cqw - var(--hero-copy-w) - 80px) / 0.64)),
             min(calc(100cqh - var(--hero-copy-h)), calc(100cqw / 0.84)));
    flex: none; height: var(--h); width: calc(var(--h) * 0.84);
  }
  .hero-copy {
    grid-area: 1 / 1; align-self: end; justify-self: start; position: relative; z-index: 1;
    width: calc(var(--hero-copy-w) + var(--edge)); padding: 0 0 40px var(--edge);
  }
}

/* Over 1100px, side by side: the bar takes the white column only, the drawing and words below it, the photo full
   height beside them. */
@media (min-width: 1101px) and (orientation: landscape) {
  .hero { grid-template-rows: auto minmax(0, 1fr); }
  .site-header { grid-column: 1; grid-row: 1; min-width: 0; }
  .hero-left { grid-column: 1; grid-row: 2; }
  .hero-photo { grid-column: 2; grid-row: 1 / -1; }
}

/* A wide screen held upright (over 1100px): a full-height 2:3 photo would take nearly the whole width, so the bar runs
   across the top, the drawing below it, and the words sit beside a photo sized from the lower half of the screen. */
@media (min-width: 1101px) and (orientation: portrait) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100svh; min-height: 0; max-height: 1366px;
  }
  .site-header { grid-column: 1 / -1; grid-row: 1; }
  .hero-left { display: contents; }
  .stage { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
  .hero-copy { grid-column: 1; grid-row: 3; align-self: end; padding-top: 32px; }
  .hero-photo { grid-column: 2; grid-row: 3; height: 54svh; aspect-ratio: 2 / 3; }
}

/* Tablets (761-1100px): no photo. The bar across the top, the drawing and the words share the rest of one screen. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero { grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr); height: 100svh; min-height: 560px; max-height: none; }
  .hero-photo { display: none; }
  .hero-left { padding-top: 0; min-height: 0; }
}
/* Upright tablets: the drawing first and as tall as the words below it allow. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .hero-left { display: flex; flex-direction: column; }
  .stage { flex: 1 1 auto; min-height: 0; container-type: size; display: flex; justify-content: center; }
  .stage canvas { flex: none; height: min(100cqh, 119cqw); width: min(100cqw, 84cqh); }
  .hero-copy { padding: 8px var(--edge) 48px; }
}

/* Phones (Joe, 29 Oct 2026): the first screen is the bar and the cakes only. The drawing takes every pixel under the
   bar (--bar-h, header.css) and opening.js keeps all three cakes whole inside it; the words start at the fold, so
   "Schedule a tasting" shows once on the opening screen, in the bar. No hero photo on phones (Joe, 2026-10-26). */
@media (max-width: 760px) {
  .hero { display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; min-height: 0; }
  .hero-photo { display: none; }
  .hero-left { display: flex; flex-direction: column; min-height: 0; }
  .stage { flex: none; height: calc(100svh - var(--bar-h)); min-height: 440px; }
  .hero-copy { padding: 40px var(--edge) 56px; gap: 12px; }
}

/* PDF capture keeps a fixed first screen. */
.pdf { --panel-h: 900px; }