/* The guide as a brochure (guide.js). Pages are A4 at 96 dpi: 794 x 1123 px. Same look as the Studio:
   Playfair Display + Lato (self-hosted), colours "Sea glass". Text roles as in public/styles.css (see public/_tools/README.md). */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/playfair-display-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/playfair-display-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/lato-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/lato-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 900; src: url(/fonts/lato-latin-900-normal.woff2) format('woff2'); }

:root {
  --dark: #2E5450; --dark-2: #24423E; --on-dark: #C4CFCC;
  --bg: #F6F8F6; --light: #DFE9E6; --light-2: #C2CCC9;
  --accent: #A9653F; --accent-2: #905636; --accent-soft: #E1C9BC;
  --text: #1C2826; --muted: #5D6664; --line: #B8C2C0;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --z: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #E7ECEA; color: var(--c4, var(--text)); font-family: var(--f4, var(--font)); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
body:not(.pays) .pays-yes { display: none; }
a { color: inherit; }

/* ---- One page ---- */
.page { position: relative; width: 794px; height: 1123px; overflow: hidden; background: #fff; padding: 76px 78px 70px;
  font-size: calc(17.5px * var(--s4, 1)); line-height: var(--h4, 1.6); font-weight: calc(400 + var(--w4, 0)); font-style: var(--i4, normal); letter-spacing: var(--l4, normal); }
.page :where(p, ul, ol, h1, h2, h3, figure) { margin: 0; }
.page > * + * { margin-top: 17px; }
.page ul, .page ol { padding-left: 22px; display: grid; gap: 9px; }
.page h2 { font-family: var(--f1, var(--font-head)); font-weight: calc(600 + var(--w1, 0)); font-style: var(--i1, normal); text-transform: var(--t1, none);
  letter-spacing: var(--l1, normal); line-height: var(--h1, 1.15); font-size: calc(42px * var(--s1, 1)); color: var(--c1, var(--dark)); }
.page h2 + * { margin-top: 22px; }
.page .kicker { font-family: var(--f5, var(--font)); font-size: calc(12.5px * var(--s5, 1)); font-weight: calc(700 + var(--w5, 0)); font-style: var(--i5, normal);
  letter-spacing: var(--l5, .14em); text-transform: uppercase; color: var(--accent); }
.page .small { font-family: var(--f5, var(--font)); font-size: calc(14.5px * var(--s5, 1)); font-weight: calc(400 + var(--w5, 0)); font-style: var(--i5, normal);
  letter-spacing: var(--l5, normal); text-transform: var(--t5, none); color: var(--c5, var(--muted)); line-height: var(--h5, 1.5); }
.pno { position: absolute; bottom: 30px; right: 40px; font-family: var(--f5, var(--font)); font-size: calc(12px * var(--s5, 1)); font-style: var(--i5, normal);
  letter-spacing: var(--l5, normal); color: var(--c5, var(--muted)); font-weight: calc(400 + var(--w5, 0)); }
.page:nth-child(even) .pno { right: auto; left: 40px; }
.ph { border-radius: 14px; overflow: hidden; margin-top: 26px !important; }
.ph img { display: block; width: 100%; height: 320px; object-fit: cover; }
.ph.tall img { height: 470px; }
.ph.short img { height: 220px; }
.slot { border: 2px dashed var(--line); border-radius: 14px; display: grid; place-items: center; text-align: center; padding: 30px; background: var(--bg); margin-top: 26px !important; min-height: 300px; }
.slot.tall { min-height: 470px; }
.slot.video { aspect-ratio: 16 / 9; min-height: 0; }
.slot span { font-family: var(--f5, var(--font)); font-size: calc(14px * var(--s5, 1)); font-style: var(--i5, normal); letter-spacing: var(--l5, normal);
  color: var(--c5, var(--muted)); font-weight: calc(400 + var(--w5, 0)); max-width: 34ch; }
.read-first { background: var(--light); border-left: 4px solid var(--accent); border-radius: 10px; padding: 16px 20px; }
.page .hi { font-size: calc(44px * var(--s1, 1)); }
.box { background: var(--dark); border-radius: 18px; padding: 34px 36px; }
.box > * + * { margin-top: 13px !important; }
.box p { color: var(--c-light, var(--on-dark)); }
.page .box h2 { color: var(--c-light, #fff); }
.page .big { font-family: var(--f1, var(--font-head)); font-weight: calc(600 + var(--w1, 0)); font-style: var(--i1, normal); text-transform: var(--t1, none);
  letter-spacing: var(--l1, normal); line-height: var(--h1, 1.2); font-size: calc(30px * var(--s1, 1)); color: var(--c1, var(--accent-2)); margin-top: 26px !important; }
.sign { font-family: var(--f3, var(--font)); font-size: calc(18px * var(--s3, 1)); font-style: var(--i3, italic); color: var(--c3, var(--dark)); }
.curious { background: var(--bg); }
.curious ul { gap: 12px; }

/* Contents */
.toc { list-style: none; padding: 0 !important; gap: 0 !important; margin-top: 22px !important; border-top: 1px solid var(--light); }
.toc a { display: flex; justify-content: space-between; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--light); text-decoration: none; cursor: pointer;
  font-family: var(--f2, var(--font)); font-size: calc(20px * var(--s2, 1)); font-weight: calc(700 + var(--w2, 0)); font-style: var(--i2, normal); letter-spacing: var(--l2, normal);
  text-transform: var(--t2, none); color: var(--c2, var(--dark)); line-height: var(--h2, 1.3); }
.toc a:hover { background: var(--bg); }
.toc b { color: var(--accent); font-weight: inherit; }
.toc .sub a { padding-left: 24px; font-weight: calc(400 + var(--w2, 0)); font-size: calc(17.5px * var(--s2, 1)); }
.toc-tip { margin-top: 22px !important; }

/* Cover and back */
.cover, .back { padding: 0; background: var(--dark); }
.cover-img, .back-img { margin: 0; height: 660px; }
.cover-img img, .back-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-text, .back-text { padding: 52px 72px; }
.cover-text > * + *, .back-text > * + * { margin-top: 14px !important; }
.cover .kicker { color: var(--accent-soft); }
.cover h1 { margin: 0; font-family: var(--f1, var(--font-head)); font-weight: calc(600 + var(--w1, 0)); font-style: var(--i1, normal); text-transform: var(--t1, none);
  letter-spacing: var(--l1, normal); line-height: var(--h1, 1.05); font-size: calc(72px * var(--s1, 1)); color: var(--c-light, #fff); }
.cover .lead { font-family: var(--f3, var(--font)); font-size: calc(23px * var(--s3, 1)); font-weight: calc(400 + var(--w3, 0)); font-style: var(--i3, normal);
  letter-spacing: var(--l3, normal); text-transform: var(--t3, none); line-height: var(--h3, 1.5); color: var(--c-light, var(--on-dark)); max-width: 36ch; }
.cover .small, .back .small { color: var(--c-light, var(--on-dark)); }
.back h2 { color: var(--c-light, #fff); }
.back p { color: var(--c-light, var(--on-dark)); }
.credits { margin-top: 40px !important; }
.btn { display: inline-flex; border-radius: 999px; padding: 12px 26px; background: var(--accent); color: #fff !important; text-decoration: none;
  font-family: var(--f7, var(--font)); font-size: calc(16px * var(--s7, 1)); font-weight: calc(700 + var(--w7, 0)); font-style: var(--i7, normal); letter-spacing: var(--l7, normal); text-transform: var(--t7, none); }
.btn:hover { background: var(--accent-2); }

/* ---- The bar ---- */
.vbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; background: var(--dark); color: var(--on-dark); min-height: 52px;
  font-family: var(--f6, var(--font)); font-size: calc(14.5px * var(--s6, 1)); font-weight: calc(400 + var(--w6, 0)); font-style: var(--i6, normal); letter-spacing: var(--l6, normal); text-transform: var(--t6, none); }
.vbar .vt { color: var(--c-light, #fff); font-weight: calc(700 + var(--w6, 0)); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar a, .vbar button { font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.vbar a:hover, .vbar button:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.vbar .vnav { font-size: calc(20px * var(--s6, 1)); line-height: 1; padding: 4px 12px; }
.vbar .vpg { display: inline-flex; align-items: center; gap: 4px; }
.vbar .vin { width: 4.6em; text-align: center; font: inherit; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; padding: 4px 6px; }
.vbar .vseg { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 2px; }
.vbar .vseg button { padding: 4px 12px; }
.vbar .vseg button[aria-pressed="true"] { background: var(--on-dark); color: var(--dark); }
.vbar .vpdf { background: var(--accent); color: #fff; }

/* ---- Scroll mode (phones, or chosen) ---- */
body.vscroll #pages { display: grid; gap: 22px; justify-content: center; padding: 22px 8px 60px; }
body.vscroll .page { zoom: var(--z); box-shadow: 0 4px 24px rgba(28, 40, 38, .14); }
body.vscroll #stage { display: none; }
.totop { position: fixed; right: 16px; bottom: 16px; z-index: 40; border: 0; border-radius: 999px; padding: 11px 16px; background: var(--dark); color: #fff; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); font-family: var(--f7, var(--font)); font-size: calc(14px * var(--s7, 1)); font-weight: calc(700 + var(--w7, 0)); font-style: var(--i7, normal); letter-spacing: var(--l7, normal); text-transform: var(--t7, none); }
body.vflip .totop { display: none; }

/* ---- Book mode (large screens) ---- */
body.vflip { height: 100vh; overflow: hidden; }
body.vflip #pages { display: none; }
#stage { display: flex; align-items: center; justify-content: center; height: calc(100vh - 52px - 34px); }
.bwrap { position: relative; transition: transform .5s ease; }
.fp { background: #fff; overflow: hidden; }
.fp > .page { transform-origin: 0 0; }
.vhint { position: fixed; bottom: 8px; margin: 0; left: 50%; transform: translateX(-50%); font-family: var(--f5, var(--font)); font-size: calc(13px * var(--s5, 1)); font-style: var(--i5, normal); letter-spacing: var(--l5, normal); color: var(--c5, var(--muted)); font-weight: calc(400 + var(--w5, 0)); }
body.vscroll .vhint { display: none; }

@media (max-width: 640px) { .vbar .vt { display: none; } .vbar .vseg { display: none; } }

/* ---- Print / PDF: one page per sheet ---- */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .vbar, #stage, .totop, .vhint, .pays-yes, #cm, #ds, .cm-ui, .ds-ui { display: none !important; }
  body.vflip, body.vscroll { height: auto; overflow: visible; }
  body.vflip #pages, body.vscroll #pages { display: block !important; padding: 0; }
  .page { zoom: 1 !important; box-shadow: none !important; width: 210mm; height: 297mm; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Phones and narrow windows: pages flow to the screen width instead of being shrunk, so the text stays readable. */
@media screen and (max-width: 820px) {
  body.vscroll #pages { display: block; padding: 0 0 70px; }
  body.vscroll .page { zoom: 1; width: auto; height: auto; min-height: 0; overflow: visible; padding: 40px 22px 46px; box-shadow: none; border-bottom: 1px solid var(--light);
    font-size: calc(17px * var(--s4, 1)); }
  body.vscroll .page h2 { font-size: calc(32px * var(--s1, 1)); }
  body.vscroll .page .hi { font-size: calc(36px * var(--s1, 1)); }
  body.vscroll .cover, body.vscroll .back { padding: 0; }
  body.vscroll .cover-img, body.vscroll .back-img { height: 300px; }
  body.vscroll .cover-text, body.vscroll .back-text { padding: 30px 22px 40px; }
  body.vscroll .cover h1 { font-size: calc(46px * var(--s1, 1)); }
  body.vscroll .cover .lead { font-size: calc(19px * var(--s3, 1)); }
  body.vscroll .ph img, body.vscroll .ph.tall img { height: 230px; }
  body.vscroll .ph.short img { height: 190px; }
  body.vscroll .slot, body.vscroll .slot.tall { min-height: 200px; }
  body.vscroll .pno { display: none; }
  body.vscroll .toc a { font-size: calc(17px * var(--s2, 1)); padding: 13px 2px; }
  body.vscroll .toc .sub a { font-size: calc(15.5px * var(--s2, 1)); padding-left: 16px; }
  .vbar .vpdf { padding: 6px 12px; }
}
.page { scroll-margin-top: 64px; }

/* ---- The book's 3D look (as in the Vagabond Haven catalogue viewer) ---- */
body.vflip { background: radial-gradient(ellipse at 50% 45%, #EEF2F0 0%, #CFD9D6 100%); }
#stage .stf__block { filter: drop-shadow(0 22px 28px rgba(20, 40, 36, .28)) drop-shadow(0 3px 6px rgba(20, 40, 36, .18)); }
#stage .bwrap { transition: transform .6s ease; }
#stage .stack { position: absolute; top: 3px; bottom: 3px; pointer-events: none; transition: width .5s, left .5s;
  background: repeating-linear-gradient(90deg, #FBFCFB 0 1px, #CBD5D2 1px 2px); box-shadow: 0 18px 26px rgba(20, 40, 36, .22); }
#stage .stack.l { left: calc(var(--lx, 0px) - var(--ls, 0px)); width: var(--ls, 0px); border-radius: 3px 0 0 3px; }
#stage .stack.r { left: var(--rx, 0px); width: var(--rs, 0px); border-radius: 0 3px 3px 0; }
#stage .fp { position: absolute; } /* StPageFlip drops its own "position: absolute" while a page turns; without this the page underneath falls out of the book */
#stage .fp::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; z-index: 5; }
#stage .fp.--left::after { right: 0; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(20,30,28,.07) 50%, rgba(20,30,28,.32) 100%); }
#stage .fp.--right::after { left: 0; background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(20,30,28,.08) 50%, rgba(20,30,28,.36) 100%); box-shadow: inset 1px 0 0 rgba(20,30,28,.3); }
#stage .fp.--right::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2.5%; pointer-events: none; z-index: 5; background: linear-gradient(to left, rgba(255,255,255,.18), rgba(255,255,255,0)); }
#stage .fp.--left::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2.5%; pointer-events: none; z-index: 5; background: linear-gradient(to right, rgba(255,255,255,.18), rgba(255,255,255,0)); }

/* ---- Fold-outs ("for the curious") ---- */
.g-drop { border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; background: #fff; }
.g-drop + .g-drop { margin-top: 12px !important; }
.g-drop > summary { cursor: pointer; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--f2, var(--font)); font-size: calc(20px * var(--s2, 1)); font-weight: calc(700 + var(--w2, 0)); font-style: var(--i2, normal);
  letter-spacing: var(--l2, normal); text-transform: var(--t2, none); color: var(--c2, var(--dark)); line-height: var(--h2, 1.3); }
.g-drop > summary::-webkit-details-marker { display: none; }
.g-drop > summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.g-drop[open] > summary::after { content: "\2013"; }
.g-body { margin: 0 0 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.g-body > * + * { margin-top: 12px; }
.g-body > ul { padding-left: 22px; display: grid; gap: 9px; }
@media print {
  /* In the PDF all fold-outs are open, so a page with fold-outs can run over two or three sheets: each sheet keeps the page margins. */
  .page:has(.g-drop) { height: auto; min-height: 297mm; overflow: visible; background: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .page:has(.g-drop) .pno { display: none; }
  .g-drop > summary { break-after: avoid; }
  .g-body li, .g-body p, .box, .fbox, figure { break-inside: avoid; }
  .g-body { max-height: none !important; overflow: visible; }
  .g-drop > summary::after, .g-drop[open] > summary::after { content: none; }
}

/* German runs about 10% longer than English: slightly smaller body text so every A4 page still fits. */
html[lang="de"] .page { font-size: calc(17px * var(--s4, 1)); }
html[lang="de"] .cover .lead { max-width: 600px; }

/* Parts 1 and 2: a small label above the first chapter of each part, and headings in the contents. */
.page .part { font-family: var(--f5, var(--font)); font-size: calc(13px * var(--s5, 1)); font-weight: calc(700 + var(--w5, 0)); letter-spacing: var(--l5, .08em);
  text-transform: uppercase; color: var(--c1, var(--dark)); padding-bottom: 10px; border-bottom: 2px solid var(--accent); display: inline-block; }
.page .part + .kicker { margin-top: 26px; }

/* The three boxes in "Why I created Vagabond Studio". */
.fbox { background: var(--bg); border: 1px solid var(--light); border-radius: 16px; padding: 18px 24px; }
.fbox > * + * { margin-top: 10px !important; }
.page .fbox h3 { font-family: var(--f2, var(--font)); font-size: calc(19px * var(--s2, 1)); font-weight: calc(700 + var(--w2, 0)); font-style: var(--i2, normal);
  letter-spacing: var(--l2, normal); text-transform: var(--t2, none); line-height: 1.3; color: var(--c2, var(--dark)); }
.fbox ul { gap: 6px !important; }
/* Photo credits: tiny, in the bottom right corner of the back cover. */
.back .credits { position: absolute; right: 28px; bottom: 18px; margin: 0 !important; font-size: calc(9.5px * var(--s5, 1)); opacity: .7; }
.fbox :where(p, li) { font-size: calc(16px * var(--s4, 1)); line-height: var(--h4, 1.55); }

/* Welcome page: the greeting text a bit larger, the "read this first" box slightly larger. */
.page .intro { font-size: calc(19.5px * var(--s4, 1)); }
.page .read-first { font-size: calc(18.5px * var(--s4, 1)); }
.page .part + h2 { margin-top: 26px; }
/* Contents: Part 1 and Part 2 in two boxes of different colours. */
.toc-box { border-radius: 16px; padding: 18px 24px 8px; margin-top: 22px !important; }
.toc-box.one { background: var(--bg); border: 1px solid var(--light); }
.toc-box.two-p { background: color-mix(in srgb, var(--accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 25%, #fff); }
.toc-box .toc { margin-top: 6px !important; border-top: 0; }
.toc-box .toc li:last-child a { border-bottom: 0; }
.toc-box .toc-part { font-family: var(--f5, var(--font)); font-size: calc(12.5px * var(--s5, 1)); font-weight: calc(700 + var(--w5, 0));
  letter-spacing: var(--l5, .12em); text-transform: uppercase; color: var(--accent); }
/* Developer site and live site side by side. */
.page .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Numbers in circles on the three boxes. */
.page .fbox h3 { display: flex; align-items: center; gap: 12px; }
.fbox .nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: calc(15px * var(--s5, 1)); font-weight: 700; }
@media screen and (max-width: 820px) { body.vscroll .page .two { grid-template-columns: 1fr; } body.vscroll .page .intro { font-size: calc(18.5px * var(--s4, 1)); } }
.page .video + h2 { margin-top: 40px; }
.fbox .nr::before { content: attr(data-n); }

/* Language picker (account.js): flag and code, opens a small list with flags and full names. */
.lp { position: relative; display: inline-flex; }
.lp-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 5px 9px; cursor: pointer; font: inherit; font-size: calc(14px * var(--s6, 1)); font-weight: calc(600 + var(--w6, 0)); }
.vlang .lp-btn { color: inherit; border-color: rgba(255,255,255,.25); }
.lp-flag { display: inline-flex; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.lp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 170px; background: #fff; border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18); display: grid; }
.lp-menu[hidden] { display: none; }
.lp-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--text); text-decoration: none; white-space: nowrap;
  font-family: var(--f6, var(--font)); font-size: calc(15px * var(--s6, 1)); }
.lp-menu a:hover { background: var(--bg); }
.lp-menu a[aria-current] { font-weight: 700; }
/* The "for the curious" line in the contents: smaller, as an extra. */
.toc .toc-sub a { font-size: calc(16px * var(--s2, 1)); font-weight: calc(500 + var(--w2, 0)); padding-left: 18px; }
/* Setup button at the end of the last chapter, for readers who don't turn to the back cover. */
.page .to-setup { margin-top: 30px !important; padding-top: 22px; border-top: 1px solid var(--light); }
.page .to-setup > * + * { margin-top: 14px; }
.page .fbox { padding: 16px 22px; }
.page .fbox > * + * { margin-top: 8px !important; }
.page .fbox ul, .page .fbox ol { gap: 4px !important; }
.page .fbox :where(p, li) { line-height: var(--h4, 1.5); }
html[lang="de"] .page .fbox :where(p, li) { font-size: calc(15.5px * var(--s4, 1)); }
/* The screenshot (page 5) and the short video (page 6): whole picture, soft frame. */
.page .shot, .page .vid { margin-top: 24px !important; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--light), 0 8px 24px rgba(20,30,28,.10); }
.page .shot img, .page .vid video { display: block; width: 100%; height: auto; }
/* Family photos: keep the faces in view when the picture is cropped. */
.ph.fam img { object-position: center 30%; }
.back-img img { object-position: center 35%; }
.cover-img img { object-position: center 30%; }