/* Arnold's Home of Sweets: the shared base for Gallery, Schedule a tasting and the 404 page (each page's own stylesheet
   follows it). It began as Home's approved layout B "Edge to Edge".
   Full-width split panels, photograph on one half and words on the other, no white margins.
   Figtree for text; headings are Libre Caslon Display, which each page's own stylesheet sets as --display. The
   --display below is left over from the previews: it is always overridden and its font is never loaded.
   One ink, one dark panel colour. */

:root {
  --paper: #ffffff;
  --ink: #1b1918;
  --soft: #5f5954;
  --dark: #1b1918;
  --on-dark: #f3eee8;
  --on-dark-soft: #c9c0b6;
  --bar-pencil: #57524e;  /* the circle round "Schedule a tasting" in the top bar (header.css) */
  --bar-tone: #f4f1ed;    /* the wash inside that circle on hover */

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --text: "Figtree", "Figtree fallback Helvetica Neue", "Figtree fallback Arial", "Helvetica Neue", Arial, sans-serif;

  --s-display: clamp(40px, 4vw, 60px);
  --s-heading: clamp(34px, 4vw, 60px);
  --s-section: clamp(28px, 2.6vw, 40px);
  --s-lead: 22px;
  --s-body: 18px;

  --edge: 48px;
  --panel-pad: clamp(56px, 6.5vw, 104px);
  --space-section: clamp(96px, 9vw, 144px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--s-body)/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 10; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip-link:focus { top: 16px; }

.button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500; font-size: 16px; letter-spacing: 0.01em;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.button:active { transform: scale(0.97); }
.text-link { font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.phone { font-weight: 500; text-underline-offset: 6px; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.note { font-size: 16px; color: var(--soft); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #000; }
  .text-link:hover { text-decoration-thickness: 2px; }
}

/* ---------- First screen: drawing and words on the left, the cake on the right ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100svh; min-height: 780px; max-height: 1040px; }
/* The top bar (.site-header) is in header.css, the same file on every page. */
.hero-photo figcaption, .panel-photo figcaption { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }

.hero-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding-top: 104px; }
.stage { position: relative; min-height: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage-still { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.no-webgl .stage canvas { display: none; }
.no-webgl .stage-still { display: block; }
.hero-copy { padding: 8px var(--edge) 56px; display: grid; gap: 20px; }
.hero-copy h1 { font-size: var(--s-display); line-height: 1; }
.hero-copy p { color: var(--soft); font-size: 17px; max-width: 30em; }
.hero-copy .actions { margin-top: 8px; }

.hero-photo { position: relative; min-height: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .45), transparent 18%, transparent 86%, rgba(0, 0, 0, .35)); }
.hero-photo figcaption, .panel-photo figcaption { position: absolute; left: 32px; bottom: 28px; z-index: 1; color: #fff; font-size: 15px; }

/* ---------- Split panels ---------- */
.panel { display: grid; grid-template-columns: 1fr 1fr; min-height: min(100svh, 900px); }
.panel-text { padding: var(--panel-pad); display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.panel-text h2 { font-size: var(--s-heading); line-height: 1.03; max-width: 13ch; }
.panel-body { display: grid; gap: 24px; justify-items: start; max-width: 32em; }
.panel-body > p:first-child { font-size: var(--s-lead); line-height: 1.45; }
.panel-photo { position: relative; overflow: hidden; }
.panel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 82%, rgba(0, 0, 0, .32)); }
.panel.dark .panel-text { background: var(--dark); color: var(--on-dark); }
.panel.dark .panel-body > p:first-child { color: var(--on-dark); }
.panel.dark .note { color: var(--on-dark-soft); }
.tasting .panel-photo img { object-position: 50% 0%; }
.tasting .panel-photo::after { content: none; }

/* ---------- Gallery: three cakes edge to edge ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: var(--space-section) var(--edge) 40px; }
.section-head h2 { font-size: var(--s-section); line-height: 1.1; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.trio li { position: relative; }
.trio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.trio li:first-child img { object-position: 50% 40%; }
.trio p { padding: 14px 20px 24px; font-size: 15px; color: var(--soft); }

/* ---------- Instagram strip (links out; no Meta scripts) ---------- */
.insta { padding-bottom: var(--space-section); }
.insta-foot { text-align: right; padding: 16px var(--edge) 0; font-size: 15px; }
.insta-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.insta-row a { display: block; overflow: hidden; }
.insta-row img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) { .insta-row a:hover img { opacity: 0.85; } }

/* ---------- Footer: one compact band (Joe, 2026-10-26: "condense it"). The same on every page. ----------
   Tablet and desktop: logo, Visit, Hours and Follow in one row. Phones: two columns, logo beside Follow, then
   Visit beside Hours. */
.site-footer { background: var(--dark); color: var(--on-dark); padding: calc(var(--space-section) / 3) var(--edge) calc(var(--space-section) / 4); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: clamp(28px, 4.5vw, 96px); align-items: start; }
.footer-logo { height: 56px; width: auto; max-width: none; filter: invert(1); mix-blend-mode: screen; }
/* The logo keeps its own shape. Between 761 and 780px its 1fr column comes out narrower than the logo, and the
   img max-width squeezed it sideways (to 0.82 of its shape at 761); a tighter gap there gives the column the room. */
@media (min-width: 761px) and (max-width: 780px) { .footer-grid { column-gap: 28px; } }
.nowrap { white-space: nowrap; }
.site-footer h2 { font-family: var(--text); font-size: 15px; font-weight: 500; color: var(--on-dark-soft); margin-bottom: 4px; letter-spacing: 0; }
.site-footer p { font-size: 16px; line-height: 1.5; }
.site-footer p + p { margin-top: 6px; }
.site-footer a { text-decoration: none; }
/* Footer links: at least 24px tall to tap (they're stacked lines, so the spacing exception doesn't cover them). */
.site-footer p a { display: inline-block; padding: 3px 0; margin: -3px 0; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.small-print { margin-top: calc(var(--space-section) / 3); font-size: 14px; color: var(--on-dark-soft); }
@media (max-width: 760px) {
  /* The first column takes at most 60% of the row, so a reader's wider letter spacing (WCAG 1.4.12) wraps the address
     instead of pushing the hours past the screen edge (it did at 360-375px). At normal spacing the address fits inside it. */
  .footer-grid { grid-template-columns: fit-content(60%) minmax(0, 1fr); grid-template-areas: "logo follow" "visit hours"; gap: 24px 20px; }
  .footer-grid > :nth-child(1) { grid-area: logo; }
  .footer-grid > :nth-child(2) { grid-area: visit; }
  .footer-grid > :nth-child(3) { grid-area: hours; }
  .footer-grid > :nth-child(4) { grid-area: follow; }
  .footer-logo { height: 48px; }
  .site-footer p { font-size: 15px; line-height: 1.6; }  /* 24px lines: stacked links stay 24px targets */
  .site-footer .nowrap { white-space: normal; }
}
/* Under 360px the two columns can't hold the address and the hours side by side (the hours column came out 78px wide
   and "appointment" ran past it), so logo and Follow keep their row and Visit and Hours each take a full row.
   The same block is on all five pages. */
@media (max-width: 359px) {
  .footer-grid { grid-template-areas: "logo follow" "visit visit" "hours hours"; }
}

/* ---------- Entrances: one quiet rise, once ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: opacity 300ms ease; } }
@media print { .js .reveal { opacity: 1; transform: none; transition: none; } }  /* printed straight after opening, nothing waits to scroll in */
.js .reveal:focus-within { opacity: 1; transform: none; transition: none; }  /* a block the keyboard enters shows at once */

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .panel { min-height: 760px; }
}

/* ---------- Phone: everything stacks, photographs stay full width ---------- */
@media (max-width: 760px) {
  :root { --edge: 20px; --panel-pad: 56px 20px 64px; --s-display: 44px; --s-heading: 36px; --s-section: 28px; --s-lead: 19px; --s-body: 17px; --space-section: 72px; }
  .hero { display: block; height: auto; min-height: 0; max-height: none; }
  .hero-left { display: block; padding-top: 0; }
  .stage { height: 420px; }
  .hero-copy { padding: 8px var(--edge) 48px; gap: 16px; }
  .hero-photo { aspect-ratio: 4 / 5; }
  .panel { display: flex; flex-direction: column; min-height: 0; }
  .panel .panel-photo { aspect-ratio: 4 / 5; }
  .tasting .panel-text { order: -1; }
  .panel-text { gap: 32px; }
  .section-head { flex-direction: column; gap: 10px; padding: 80px var(--edge) 28px; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio li:first-child { grid-column: 1 / -1; }
  .trio img { aspect-ratio: 3 / 4; }
  .trio li:first-child img { aspect-ratio: 4 / 5; }
  .trio p { padding: 10px var(--edge) 16px; font-size: 14px; line-height: 1.4; }
  .insta-foot { text-align: left; }
  .insta-row { grid-template-columns: repeat(3, 1fr); }
}

/* PDF capture (?pdf): fixed first-screen height so the render is predictable. */
.pdf .hero { height: 900px; min-height: 0; max-height: none; }
@media (max-width: 760px) { .pdf .hero { height: auto; } }

/* ---------- Windows High Contrast (forced colours) ----------
   The browser swaps every colour for the user's own palette and drops fills, so anything that was only a fill, a blend
   or a faint pencil line has to carry its shape another way. Only system colours are used, so whichever palette the
   person chose stays in charge. Nothing here applies to normal rendering. Header.css loads last, so the bar's
   rules below start with html to win over it. */
@media (forced-colors: active) {
  /* Buttons: the ink fill is gone, so a 2px edge in the text's own colour is the shape. The padding gives the 2px back,
     so the button keeps its size. (Tag and class, so a page's own "border: 0" on a button can't remove it.) */
  a.button { border: 2px solid LinkText; padding: 0 22px; }
  button.button { border: 2px solid ButtonText; }

  /* The logo is black ink on a clear background. In the footer it is inverted and blended onto the dark band, which the
     browser paints in the user's canvas colour: it vanished on a light palette, and the bar's logo vanishes on a dark
     one. Here it is drawn in the palette's text colour through its own shape, so it contrasts with the canvas in any
     palette. The picture itself is moved out of its box, which keeps its size. */
  .site-header .logo img, .footer-logo {
    filter: none; mix-blend-mode: normal;
    background-color: CanvasText;
    -webkit-mask: url("/images/arnolds-logo.png") center / contain no-repeat;
    mask: url("/images/arnolds-logo.png") center / contain no-repeat;
    object-fit: none; object-position: -9999px 0;
  }

  /* "Schedule a tasting" in the bar: its loop is drawn in the link's own colour at full strength (pencil grey on a
     dark canvas was close to invisible), and the hover wash inside it is dropped (it left pale fill behind light text). */
  html .site-header .bar .cta .loop { stroke: LinkText; }
  html .site-header .bar .cta .loop .lead { opacity: 1; }
  html .site-header .bar .cta .loop .ghost { opacity: 0.6; }
  html .site-header .bar .cta:hover .loop path { stroke: LinkText; fill: none; }

  /* Schedule a tasting: the dropdown's arrow is a dark-ink picture, which almost disappears on a dark canvas. The field
     takes the browser's own arrow instead, drawn in the palette's colours. */
  .tasting-form .field select { appearance: auto; -webkit-appearance: menulist; background-image: none; }
}