/* =========================================================================
   Shared scaffolding for the application templates.
   Colours, type and tokens come from ../brand.css; this file only lays out the
   working view (notes, frame labels) and the export view.

   URL options (add to the address bar):
     ?frame=2          show frame 2 alone at the top-left corner, no notes
     ?export=1         hide notes, labels, guides and sample underlines
     ?frame=2&export=1 the exact artwork for frame 2, ready to screenshot
   Printing (Save as PDF) uses the export view automatically, one frame per page.
   ========================================================================= */
html { background: #DAD5CC; }
body { margin: 0; padding: 48px; background: #DAD5CC; color: var(--ink); font-family: var(--sans); }

.note { max-width: 1100px; margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.note b { color: var(--ink); }
.note p { margin: 0 0 8px; }

.frames { display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.f { margin: 0; display: grid; gap: 12px; justify-items: start; }
.f > figcaption { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.frame { position: relative; overflow: hidden; flex: none; box-shadow: 0 24px 60px -36px rgba(0,0,0,.45);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.frame * { box-sizing: border-box; }

/* sample copy: dotted underline in the working view, so nobody publishes it by mistake */
.sample { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px;
  text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); }

/* print and layout guides (safe zones, punch slots): working view only */
.guide { position: absolute; pointer-events: none; z-index: 5; }

/* photo panel: deep bottom fade, caption bottom-left on the shared 24px edge */
.photo { position: relative; overflow: hidden; background: #2A2420; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,8,8,.86) 0%, rgba(12,8,8,.42) 30%, rgba(12,8,8,0) 56%); }
.photo .cap { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; color: #fff; display: grid; gap: 4px; text-align: left; }
.photo .cap b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; margin-left: -1px; }
.photo .cap span { font-size: 15px; line-height: 1.4; opacity: .9; }

/* headline defaults: Libre Baskerville Regular, never bold */
.frame h1, .frame h2, .frame .serif { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
.frame p { margin: 0; }

/* ---------- solo / export views ---------- */
html.solo, html.export, html.solo body, html.export body { background: transparent; }
html.solo body, html.export body { padding: 0; }
html.solo .note, html.export .note, html.solo .f > figcaption, html.export .f > figcaption { display: none; }
html.solo .frames, html.export .frames, html.solo .f, html.export .f { gap: 0; }
html.solo .frame, html.export .frame { box-shadow: none; }
html.solo .f.off { display: none; }
html.export .guide { display: none; }
html.export .sample { text-decoration: none; }

@media print {
  html, body { background: transparent !important; padding: 0 !important; }
  .note, .f > figcaption, .guide { display: none !important; }
  .frames, .f { gap: 0 !important; display: block; }
  .frame { box-shadow: none; break-after: page; page-break-after: always; }
  .sample { text-decoration: none; }
}

/* logos never stretch inside flex columns */
.frame img.logo { align-self: flex-start; width: auto; max-width: none; }