/* The Telltale: the printed issue, two 8.5 × 11 in pages (front and back) */
@page { size: 8.5in 11in; margin: 0; }
:root { --navy: #123a5e; --navy-2: #0b2740; --red: #c8102e; --green: #1b7f3b; --ink: #111; --muted: #444; --rule: #123a5e; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #e9edf1; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: var(--ink); }
/* Ads come in exact sizes (Tom): a single 2 × 2 in, a double 2 × 4 in, a triple 2 × 6 in. Each side column is 2 in wide
   and 10.2 in tall, so five slips (10 in) fit with the last 0.2 in shared out as the gaps between ads. */
.sheet { width: 8.5in; height: 11in; padding: .22in .3in .2in; margin: 0 auto .3in; background: #fff; display: grid;
  grid-template-columns: 2in 1fr 2in; grid-template-rows: .16in 1fr .16in; column-gap: .12in; row-gap: .03in; overflow: hidden; page-break-after: always; break-after: page; position: relative; }
.sheet:last-child { page-break-after: auto; break-after: auto; }
@media print { html, body { background: #fff; } .sheet { margin: 0; box-shadow: none; } .no-print { display: none !important; } }
@media screen { .sheet { box-shadow: 0 4px 24px rgba(0, 0, 0, .18); } }
.strip { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font: 600 6.5pt/1 'Inter', Arial, sans-serif; color: var(--navy); letter-spacing: .02em; }
.strip.top { border-bottom: .6pt solid var(--navy); padding-bottom: 2pt; }
.strip.bottom { border-top: .6pt solid var(--navy); padding-top: 2pt; }
.strip .over { font-weight: 800; font-size: 7.5pt; }
.strip .sample { margin-left: 8pt; background: var(--red); color: #fff; padding: 1.5pt 5pt; border-radius: 6pt; font-size: 6pt; text-transform: uppercase; letter-spacing: .06em; }
/* Side columns of ad boxes */
.side { display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
.slot { min-height: 0; display: flex; flex: none; } .slot > * { flex: 1; min-width: 0; }
.slot.u1 { height: 2in; } .slot.u2 { height: 4in; } .slot.u3 { height: 6in; }
.ad, .feature { border: 1.3pt solid var(--navy); border-radius: 8pt; padding: 5pt 6pt; overflow: hidden; display: flex; flex-direction: column; background: #fff; font: 7.4pt/1.25 'Inter', Arial, sans-serif; }
.ad p, .feature p { margin: 0 0 3pt; }
.ad-head { font: 800 12.5pt/1.05 'Playfair Display', Georgia, serif; color: var(--navy); margin-bottom: 4pt !important; }
.ad-text { position: relative; padding-top: 9pt; font-size: 8.6pt; line-height: 1.3; }
.ad-text .ribbon { position: absolute; top: 0; left: 10%; right: 10%; height: 3pt; border-radius: 0 0 3pt 3pt; background: linear-gradient(90deg, var(--red) 0 48%, #fff 48% 52%, var(--green) 52%); }
.slot.u2 .ad-text .ad-head, .slot.u3 .ad-text .ad-head { font-size: 15pt; }
.slot.u2 .ad-text, .slot.u3 .ad-text { font-size: 9.4pt; }
.ad-text .ad-name { font-size: 9pt; } .ad-text .ad-contact { font-size: 8.4pt; }
.ad-head.big { font-size: 15pt; } .ad .al-center { text-align: center; } .ad .al-right { text-align: right; }   /* an ad's headline or text, set in the ad library */
.ad-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 4pt; }
.ad-name { font-weight: 800; font-size: 8pt; color: var(--navy-2); }
.house-logo { height: 1em; width: auto; vertical-align: -.12em; margin-right: 3pt; }
/* --ls: the logo's size from the ad library (1 = 100%). It can grow until it reaches the QR code (1.18 in across). */
.ad-logo { display: block; width: auto; height: auto; max-width: min(1.18in, calc(1in * var(--ls, 1))); max-height: calc(.4in * var(--ls, 1)); margin: 0 0 2pt; object-fit: contain; }
.ad-logo.top { max-width: min(1.79in, calc(1in * var(--ls, 1))); margin: 0 0 4pt; align-self: flex-start; }   /* above the headline: the full width of the slip */
.ad-contact { font-weight: 700; font-size: 7.6pt; color: var(--red); }
.ad.ad-image { padding: 0; border-width: 1.3pt; }
.ad.ad-image .qr-corner { position: absolute; right: 4pt; bottom: 4pt; width: .5in; height: .5in; background: #fff; padding: 2pt; border-radius: 3pt; }
.ad.ad-image img, .ad.ad-image a { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad.house { background: #f3f7fb; border-style: dashed; }
.ad.house .qr { margin: auto auto 3pt; }
.qr { width: .56in; height: .56in; flex: none; } .qr img, .qr canvas { width: 100% !important; height: 100% !important; image-rendering: pixelated; }
/* An ad's QR code (set in the ad library): in the bottom row at the left, centre (above the logo and website), or right;
   or in the text, which wraps around it (at the centre, on its own line). */
.ad-text .ad-body { display: flow-root; }
.ad-text .ad-foot.qr-left { flex-direction: row-reverse; } .ad-text .ad-foot.qr-left > div { text-align: right; } .ad-text .ad-foot.qr-left .ad-logo { margin-left: auto; } .ad-text .ad-foot.qr-center { flex-direction: column-reverse; align-items: center; text-align: center; }
.ad-text .ad-foot.qr-center .ad-logo { margin-left: auto; margin-right: auto; }
.ad-text .ad-foot > div > p:last-child { margin-bottom: 0; }   /* no gap under the website: the slip's own padding is enough */
.ad-text .ad-foot > .al-center, .ad-text .ad-foot > .al-right { flex: 1; } .ad-text .ad-foot > .al-center .ad-logo { margin-left: auto; margin-right: auto; } .ad-text .ad-foot > .al-right .ad-logo { margin-left: auto; }   /* website alignment */
.ad-text .ad-body .qr.fl-right { float: right; margin: 1pt 0 2pt 4pt; } .ad-text .ad-body .qr.fl-left { float: left; margin: 1pt 4pt 2pt 0; } .ad-text .ad-body .qr.fl-center { margin: 0 auto 3pt; }
/* Feature boxes (in the side columns) */
.feature h3.sec { font-size: 11.5pt; margin: 0 0 3pt; }
.feature .r-title { font: 700 8.6pt/1.2 'Source Serif 4', Georgia, serif; color: var(--navy-2); margin-bottom: 3pt !important; }
.feature .muted { color: var(--muted); font-weight: 400; }
.feature img { width: 100%; height: auto; max-height: 1.6in; object-fit: cover; border-radius: 5pt; margin-bottom: 3pt; }
.f-photo img { max-height: none; flex: 1; min-height: 0; }
.f-photo .cap { font-style: italic; } .credit { font-style: normal; color: var(--muted); font-size: 6.6pt; }
.cols2 { columns: 2; column-gap: 6pt; font-size: 6.9pt; }
.f-recipe p, .f-knot p { font-size: 6.9pt; line-height: 1.22; }
.ws { border-collapse: collapse; margin: 1pt auto 3pt; }
.ws td { width: .145in; height: .145in; text-align: center; vertical-align: middle; font: 700 6.4pt/1 'Inter', Arial, sans-serif; color: #111; padding: 0; }
.f-wordsearch .theme { text-align: center; font-style: italic; font-size: 7pt; color: var(--muted); }
.f-wordsearch .words { text-align: center; font-weight: 700; font-size: 6.6pt; letter-spacing: .02em; color: var(--navy-2); }
.alm { width: 100%; border-collapse: collapse; font-size: 6.8pt; }
.alm th, .alm td { padding: .4pt 2pt; text-align: center; } .alm th[scope=row] { text-align: left; font-weight: 700; color: var(--navy-2); }
.alm tr:nth-child(even) td, .alm tr:nth-child(even) th { background: #eef3f8; }
.moon { margin-top: 3pt !important; text-align: center; font-weight: 600; font-size: 6.6pt; line-height: 1.35; } .moon .mp { white-space: nowrap; margin: 0 2pt; }
.f-almanac .where { text-align: center; font-size: 6.4pt; color: var(--muted); }
.f-contest { background: #fffaf0; border-color: var(--red); }
.c-foot { margin-top: auto; display: flex; gap: 5pt; align-items: center; } .c-foot .qr { width: .55in; height: .55in; } .c-foot p { margin: 0; font-size: 6.8pt; line-height: 1.3; min-width: 0; }
.c-url { font-weight: 700; color: var(--red); } .f-contest .win { font: 800 10pt/1.15 'Playfair Display', Georgia, serif; color: var(--red); text-align: center; }
.mini { width: 13pt; height: 9pt; vertical-align: -1pt; }
.ad { position: relative; } .ad-hit { position: absolute; inset: 0; z-index: 2; border-radius: 8pt; }
@media screen { .ad-hit:hover, .ad-hit:focus-visible { outline: 2pt solid var(--red); outline-offset: -2pt; } } .hidden-tt { position: absolute; right: 4pt; bottom: 3pt; } .hidden-tt .mini { width: 11pt; height: 8pt; }
.ad-text .hidden-tt { top: 1pt; bottom: auto; right: 3pt; }   /* in a text ad: the top corner, clear of the QR code */
.ad-image .hidden-tt { top: 3pt; bottom: auto; right: auto; left: 4pt; }   /* a picture ad's QR code is bottom right */
/* Centre column */
.centre { min-height: 0; overflow: hidden; font: 7.9pt/1.27 'Source Serif 4', Georgia, serif; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.centre p { margin: 0 0 3pt; }
.sec { font: italic 800 14.5pt/1.05 'Playfair Display', Georgia, serif; color: var(--navy); text-align: center; margin: 5pt 0 3pt; }
.sec::after { content: ''; display: block; width: .7in; height: 2pt; margin: 2.5pt auto 0; background: linear-gradient(90deg, var(--red) 0 48%, transparent 48% 52%, var(--green) 52%); border-radius: 2pt; }
.masthead { text-align: center; border-bottom: 1.2pt solid var(--navy); padding-bottom: 4pt; margin-bottom: 2pt; position: relative; }
.mh-free { position: absolute; left: -2pt; top: -1pt; font: italic 900 12pt/1 'Playfair Display', Georgia, serif; color: var(--red); transform: rotate(-8deg); text-align: center; }
.mh-free span { display: block; font: 600 5.6pt/1.2 'Inter', Arial, sans-serif; color: var(--navy); transform: rotate(0); font-style: normal; }
.mh-title { display: flex; align-items: center; justify-content: center; gap: 4pt; margin-top: 2pt; padding-left: .5in; }
.logo { width: .48in; height: .48in; }
.mh-name { font: 900 25pt/1 'Playfair Display', Georgia, serif; color: var(--navy-2); letter-spacing: -.01em; }
.mh-tag { font: italic 600 7.6pt/1.2 'Source Serif 4', Georgia, serif; color: var(--muted); }
.mh-ed { font: 700 9pt/1.3 'Inter', Arial, sans-serif; color: var(--navy); margin-top: 3pt; }
.mh-meta { font: 600 7pt/1.3 'Inter', Arial, sans-serif; color: var(--muted); }
.mh-contact { font: 700 7.4pt/1.3 'Inter', Arial, sans-serif; color: var(--red); }
.item { overflow: hidden; } .inline-photo { float: right; width: 1.05in; height: .8in; object-fit: cover; border-radius: 4pt; margin: 1pt 0 2pt 5pt; }
blockquote { margin: 0 0 4pt; padding: 0 6pt; text-align: center; font-style: italic; }
blockquote p { margin: 0; } blockquote footer { font-style: normal; font-size: 7pt; color: var(--muted); }
.events { list-style: none; margin: 0; padding: 0; text-align: left; } .events li { margin: 0 0 2pt; padding-left: 8pt; position: relative; }
.events li::before { content: '⚓'; position: absolute; left: -1pt; font-size: 6pt; top: 1pt; color: var(--navy); }
.events .place { color: var(--muted); }
.quiz { margin: 0; padding-left: 13pt; text-align: left; } .quiz li { margin-bottom: 1.5pt; }
.see-over { text-align: center; font-style: italic; font-size: 7pt; color: var(--muted); margin-top: 2pt !important; }
.safety { background: #fdf2f3; border-left: 3pt solid var(--red); padding: 4pt 6pt; border-radius: 0 4pt 4pt 0; }
.stars p { margin-bottom: 2.5pt; } .stars .range { font-size: 6.6pt; color: var(--muted); }
.s-jokes p { text-align: left; margin-bottom: 3.5pt; }
.dict { margin: 0; } .dict dt { font-weight: 700; display: inline; } .dict dt::after { content: ': '; } .dict dd { display: inline; margin: 0; } .dict dd::after { content: ''; display: block; margin-bottom: 2.5pt; }
.s-lore p { text-align: center; font-style: italic; margin-bottom: 3pt; }
.s-answers { text-align: center; } .upside { display: inline-block; transform: rotate(180deg); font-size: 7.4pt; margin-top: 2pt; }
.s-where p { text-align: center; font-size: 7.4pt; }