/* cappadocia balloon ticket guide
   newspaper-ish layout. built from scratch — no reused template.
   steve, oct 2026 */

:root {
	--paper:     #ffffff;
	--tint:      #fbf7ee;
	--ink:       #0a0a0a;
	--ink-soft:  #2a2a2a;
	--mute:      #6a6a6a;
	--rule:      #d7d1c2;
	--rule-soft: #e9e4d6;
	--red:       #a83820;
	--navy:      #163a52;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--paper);
	color: var(--ink);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}
a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
a:visited { color: #7a2a17; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }

/* ========================================================= */
/* 1. nameplate — top black strip, newspaper masthead feel   */
/* ========================================================= */
.nameplate {
	background: var(--ink);
	color: #e7e1cc;
	padding: 8px 16px;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.nameplate .wrap {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.nameplate .issue { opacity: .55; }

/* ========================================================= */
/* 2. big centred title block                                */
/* ========================================================= */
.title-block {
	text-align: center;
	padding: 22px 20px 10px;
	border-bottom: 1px double var(--ink);
	background: var(--paper);
}
.title-block h1.site-title {
	font-family: "Didot", "Bodoni 72", "Big Caslon", "Hoefler Text", Georgia, serif;
	font-weight: 900;
	font-size: clamp(32px, 5.4vw, 46px);
	line-height: 1;
	margin: 0 0 6px;
	letter-spacing: -0.5px;
}
.title-block h1.site-title a {
	color: var(--ink);
	text-decoration: none;
}
.title-block .tagline {
	font-family: "Palatino Linotype", "Palatino", "Hoefler Text", Georgia, serif;
	font-style: italic;
	font-size: 15px;
	color: var(--mute);
	margin: 0;
}

/* ========================================================= */
/* 3. section bar — nav as newspaper sections                */
/* ========================================================= */
.sections {
	border-bottom: 1px solid var(--ink);
	padding: 8px 16px;
	text-align: center;
	background: var(--paper);
}
.sections a {
	display: inline-block;
	color: var(--ink);
	text-decoration: none;
	margin: 2px 10px;
	padding: 2px 0;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
}
.sections a:hover { border-bottom-color: var(--rule); }
.sections a.on { border-bottom-color: var(--red); color: var(--red); }

/* ========================================================= */
/* 4. the piece                                              */
/* ========================================================= */
article.piece {
	max-width: 1000px;
	margin: 0 auto;
	padding: 28px 24px 50px;
}
article.piece .kicker {
	text-align: center;
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--red);
	margin: 0 0 4px;
}
article.piece h1.hed {
	font-family: "Didot", "Bodoni 72", "Big Caslon", "Hoefler Text", Georgia, serif;
	font-weight: 800;
	font-size: clamp(28px, 4.2vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.3px;
	text-align: center;
	margin: 0 0 18px;
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}
article.piece .lede {
	font-family: "Palatino Linotype", "Palatino", "Hoefler Text", Georgia, serif;
	font-size: 20px;
	line-height: 1.45;
	color: var(--ink-soft);
	text-align: center;
	max-width: 60ch;
	margin: 0 auto 10px;
}
article.piece .byline {
	text-align: center;
	font-size: 10.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0 0 30px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule);
}
article.piece .byline em { color: var(--red); font-style: normal; }

/* ========================================================= */
/* 5. CSS multi-column body, newspaper-like                  */
/* ========================================================= */
.cols {
	column-count: 1;
	column-gap: 36px;
	max-width: 880px;
	margin: 0 auto;
}
@media (min-width: 820px) {
	.cols { column-count: 2; }
}
.cols p { margin: 0 0 14px; font-size: 16px; }
.cols p:first-of-type::first-letter {
	font-family: "Didot", "Bodoni 72", "Hoefler Text", Georgia, serif;
	font-size: 54px;
	line-height: 1;
	float: left;
	margin: 2px 8px 0 0;
	color: var(--navy);
	font-weight: 900;
}
.cols h2 {
	break-after: avoid-column;
	break-inside: avoid-column;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin: 22px 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ink);
}
.cols h2 .num {
	color: var(--red);
	margin-right: 10px;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
}
.cols h3 {
	break-after: avoid-column;
	font-family: "Palatino Linotype", "Palatino", "Hoefler Text", Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	margin: 16px 0 4px;
}
.cols ul, .cols ol { margin: 0 0 14px; padding-left: 20px; }
.cols li { margin: 0 0 5px; }
.cols blockquote {
	break-inside: avoid-column;
	border-left: 3px solid var(--rule);
	padding: 2px 14px;
	margin: 14px 0;
	color: var(--mute);
	font-family: "Palatino Linotype", "Palatino", Georgia, serif;
	font-style: italic;
}

/* ========================================================= */
/* 6. pull quote — spans full width across columns           */
/* ========================================================= */
.pullquote {
	break-inside: avoid-column;
	column-span: all;
	-webkit-column-span: all;
	text-align: center;
	font-family: "Didot", "Bodoni 72", "Hoefler Text", Georgia, serif;
	font-weight: 300;
	font-style: italic;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.35;
	color: var(--ink);
	border-top: 3px double var(--ink);
	border-bottom: 3px double var(--ink);
	padding: 24px 20px;
	margin: 32px auto;
	max-width: 60ch;
}
.pullquote cite {
	display: block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 10.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 16px;
	color: var(--mute);
}

/* ========================================================= */
/* 7. data table — newspaper schedule look                   */
/* ========================================================= */
table.data {
	break-inside: avoid-column;
	border-collapse: collapse;
	width: 100%;
	margin: 18px 0;
	border-top: 3px double var(--ink);
	border-bottom: 3px double var(--ink);
	font-size: 14px;
}
table.data caption {
	caption-side: top;
	text-align: left;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--mute);
	padding: 4px 0 10px;
}
table.data th {
	text-align: left;
	font-size: 10.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 7px 10px;
	border-bottom: 1px solid var(--ink);
	color: var(--ink);
	vertical-align: bottom;
}
table.data td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

/* ========================================================= */
/* 8. inline sidebar box ("box" inside text)                 */
/* ========================================================= */
.box {
	break-inside: avoid-column;
	background: var(--tint);
	border: 1px solid var(--rule);
	padding: 14px 16px;
	margin: 14px 0;
	font-size: 14.5px;
}
.box h3 {
	margin: 0 0 6px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--red);
}

/* ========================================================= */
/* 9. end flourish (newspaper ornament under article body)   */
/* ========================================================= */
.flourish {
	column-span: all;
	-webkit-column-span: all;
	text-align: center;
	margin: 28px 0 6px;
	color: var(--mute);
	font-size: 18px;
	letter-spacing: 14px;
}

/* ========================================================= */
/* 10. filed-under / metadata footer of a piece              */
/* ========================================================= */
.filed {
	column-span: all;
	-webkit-column-span: all;
	text-align: center;
	border-top: 1px solid var(--rule);
	margin-top: 20px;
	padding-top: 14px;
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--mute);
}
.filed em { color: var(--red); font-style: normal; }

/* ========================================================= */
/* 11. legal pages — same visuals, no columns, no drop-cap   */
/* ========================================================= */
.piece.legal .cols { column-count: 1 !important; max-width: 760px; }
.piece.legal .cols p:first-of-type::first-letter { all: unset; font-size: inherit; float: none; margin: 0; color: inherit; font-weight: inherit; }
.piece.legal .cols p { font-size: 15px; }
.piece.legal .cols h2 { font-size: 13px; margin-top: 20px; }
.piece.legal h1.hed { font-size: 32px; max-width: 30ch; }
.piece.legal .lede { font-size: 17px; }

/* ========================================================= */
/* 12. colophon (footer)                                     */
/* ========================================================= */
footer.colophon {
	border-top: 1px solid var(--ink);
	padding: 26px 20px 44px;
	margin-top: 32px;
	text-align: center;
	background: var(--tint);
}
footer.colophon .ornament {
	font-size: 14px;
	letter-spacing: 10px;
	color: var(--mute);
	margin-bottom: 14px;
}
footer.colophon .about {
	font-family: "Palatino Linotype", "Palatino", Georgia, serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 60ch;
	margin: 0 auto 14px;
}
footer.colophon .legal-nav {
	font-size: 10.5px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: var(--mute);
}
footer.colophon .legal-nav a { color: var(--mute); margin: 0 6px; }
footer.colophon .copy {
	font-size: 12px;
	color: var(--mute);
}
footer.colophon .em { color: inherit; }

/* mobile tweaks */
@media (max-width: 520px) {
	.cols p:first-of-type::first-letter { font-size: 42px; }
	.title-block { padding: 16px 14px 8px; }
	.sections a { margin: 2px 6px; letter-spacing: 1.2px; }
	article.piece { padding: 22px 16px 36px; }
	.pullquote { padding: 18px 14px; }
}

/* 2026-02 — safari ignored max-width inside figure, hack */
figure img { max-width: 100% !important; height: auto; }