MediaWiki:Common.css: Difference between revisions

Latest revision as of 07:14, 14 November 2026

/* ============================================================
   ParksWiki design system — Vector 2022.
   Loaded on every page as MediaWiki:Common.css.

   Concept: "gateway". Deep park-night ink, warm paper, gilt
   accent. Every illustration on this wiki is duotone and drawn
   in CSS — no image files, so it stays crisp, themeable and
   instant in both light and dark mode.

   Sections
     1. Tokens
     2. Dark mode tokens
     3. Chrome (logo, chrome tweaks)
     4. Article typography
     5. Infobox
     6. Main Page: hero
     7. Main Page: park gateway cards (CSS-drawn duotone art)
     8. Main Page: panels, browse strip
     9. Advertising slots and the house ad
    10. Footer: operator line
    11. Responsive
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------- */
:root {
	--pw-ink: #16243f;
	--pw-ink-soft: #3c4d6b;
	--pw-muted: #6a7384;
	--pw-paper: #fcfbf8;
	--pw-paper-2: #f3efe6;
	--pw-rule: #ddd6c7;
	--pw-gilt: #b07d1f;
	--pw-gilt-ink: #8a6216;
	--pw-gilt-light: #e8c479;

	/* Duotone art */
	--pw-art-ink: #16243f;
	--pw-facet: rgba(255, 255, 255, 0.22);
	--pw-card-shadow: rgba(22, 36, 63, 0.16);
}

/* ---- 2. Dark mode tokens ---------------------------------- */
/* Vector 2022 night mode: explicit choice. */
html.skin-theme-clientpref-night {
	--pw-ink: #dfe5f0;
	--pw-ink-soft: #aeb8cc;
	--pw-muted: #949db0;
	--pw-paper: #16191d;
	--pw-paper-2: #1d2127;
	--pw-rule: #3a3f49;
	--pw-gilt: #d9a93f;
	--pw-gilt-ink: #e0b452;
	--pw-gilt-light: #f0d08c;
	--pw-art-ink: #eaeef6;
	--pw-facet: rgba(0, 0, 0, 0.28);
	--pw-card-shadow: rgba(0, 0, 0, 0.5);
}

/* Night mode: follow the operating system. */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os {
		--pw-ink: #dfe5f0;
		--pw-ink-soft: #aeb8cc;
		--pw-muted: #949db0;
		--pw-paper: #16191d;
		--pw-paper-2: #1d2127;
		--pw-rule: #3a3f49;
		--pw-gilt: #d9a93f;
		--pw-gilt-ink: #e0b452;
		--pw-gilt-light: #f0d08c;
		--pw-art-ink: #eaeef6;
		--pw-facet: rgba(0, 0, 0, 0.28);
		--pw-card-shadow: rgba(0, 0, 0, 0.5);
	}
}

/* Fallback for skins/builds that expose no theme class at all:
   honour the OS preference, but never override an explicit day
   or night choice. */
@media screen and (prefers-color-scheme: dark) {
	html:not(.skin-theme-clientpref-day):not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) {
		--pw-ink: #dfe5f0;
		--pw-ink-soft: #aeb8cc;
		--pw-muted: #949db0;
		--pw-paper: #16191d;
		--pw-paper-2: #1d2127;
		--pw-rule: #3a3f49;
		--pw-gilt: #d9a93f;
		--pw-gilt-ink: #e0b452;
		--pw-gilt-light: #f0d08c;
		--pw-art-ink: #eaeef6;
		--pw-facet: rgba(0, 0, 0, 0.28);
		--pw-card-shadow: rgba(0, 0, 0, 0.5);
	}
}

/* ---- 3. Chrome -------------------------------------------- */
/* The wordmark is an SVG and should scale, not pixel-snap. */
.mw-logo-wordmark {
	max-width: 100%;
	height: auto;
}

/* The Main Page carries its own masthead, so suppress the
   generic page title there (reading view only — edit and
   history keep it). */
body.page-Main_Page.action-view #firstHeading,
body.page-Main_Page.action-view #siteSub,
body.page-Main_Page.action-view .mw-page-title-main {
	display: none;
}

/* Gilt marker on the active table-of-contents entry. */
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
	border-inline-start-color: var(--pw-gilt);
}

/* ---- 4. Article typography --------------------------------- */
.ns-0 .mw-parser-output p {
	line-height: 1.65;
}

/* A short gilt rule tucked under every section heading.
   MW 1.43 still defaults to the legacy heading DOM (a bare <h2>);
   1.44+ wraps headings in .mw-heading2. Both are handled, and the
   inner <h2> tick is suppressed when the wrapper is present so the
   rule is never drawn twice. */
.ns-0 .mw-parser-output h2,
.ns-0 .mw-parser-output .mw-heading2 {
	position: relative;
}

.ns-0 .mw-parser-output h2::after,
.ns-0 .mw-parser-output .mw-heading2::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -1px;
	width: 2.6em;
	height: 2px;
	background: var(--pw-gilt);
}

.ns-0 .mw-parser-output .mw-heading2 h2::after {
	display: none;
}

/* "See also" / "References" lists read tighter than body prose. */
.ns-0 .mw-parser-output ul {
	line-height: 1.6;
}

/* ---- 5. Infobox -------------------------------------------- */
/* Presentation lives here, not in the templates' inline styles, so
   that dark mode and the narrow-screen rules can reach it. */
.infobox {
	width: 22em;
	font-size: 90%;
	border: 1px solid var(--pw-rule);
	background-color: var(--pw-paper);
	color: var(--pw-ink);
	border-radius: 3px;
	padding: 0;
	margin: 0.5em 0 1em 1.4em;
	float: right;
	clear: right;
	border-spacing: 0;
	box-shadow: 0 1px 3px var(--pw-card-shadow);
}

.infobox caption {
	font-weight: bold;
}

.infobox th,
.infobox td {
	text-align: left;
	vertical-align: top;
	padding: 0.4em 0.65em;
	border-top: 1px solid var(--pw-rule);
}

.infobox th {
	color: var(--pw-ink-soft);
	font-weight: 600;
}

/* Label column. */
.infobox > tbody > tr > th:not(.pw-infobox-title) {
	width: 7.5em;
}

/* Title row: ink band, serif, gilt underline. */
.infobox .pw-infobox-title {
	background: var(--pw-ink);
	color: var(--pw-paper);
	font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
	font-size: 1.25em;
	font-weight: 400;
	text-align: center;
	border-top: 0;
	border-bottom: 2px solid var(--pw-gilt);
	border-radius: 2px 2px 0 0;
	padding: 0.5em 0.65em;
}

.infobox .pw-infobox-title a {
	color: var(--pw-gilt-light);
}

.infobox > tbody > tr:nth-child(even) > td,
.infobox > tbody > tr:nth-child(even) > th {
	background: var(--pw-paper-2);
}

/* ---- 6. Main Page: hero ------------------------------------ */
.pw-hero {
	position: relative;
	overflow: hidden;
	padding: 1.7em 1.9em 1.5em;
	margin-bottom: 0.4em;
	border-radius: 3px;
	border-bottom: 3px solid var(--pw-gilt);
	background: linear-gradient(135deg, #1d2f51 0%, #16243f 55%, #0e1729 100%);
	color: #f2f4f8;
}

/* Ghost spire, bottom right. */
.pw-hero::after {
	content: "";
	position: absolute;
	inset-inline-end: 34px;
	bottom: -42px;
	width: 0;
	height: 0;
	border-left: 74px solid transparent;
	border-right: 74px solid transparent;
	border-bottom: 158px solid rgba(255, 255, 255, 0.05);
}

.pw-hero > * {
	position: relative;
	z-index: 1;
}

/* The hero title is a real <h1>: Vector's own page title is hidden on
   the Main Page, so this has to carry the document heading. Reset
   Vector's h1 chrome rather than inherit it. */
.pw-hero-title {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
	font-size: 2.15em;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.005em;
}

.pw-hero-title .pw-accent {
	color: var(--pw-gilt-light);
}

.pw-hero-sub {
	margin-top: 0.5em;
	max-width: 42em;
	font-size: 1.05em;
	line-height: 1.55;
	color: #cdd5e3;
}

.pw-hero-meta {
	margin-top: 1em;
	padding-top: 0.75em;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.88em;
	color: #a9b3c6;
}

.pw-hero a,
.pw-hero a.external {
	color: #a9c8f6;
}

.pw-hero a:visited {
	color: #c2b2e8;
}

/* ---- Section labels ---------------------------------------- */
.pw-label {
	display: flex;
	align-items: center;
	gap: 0.85em;
	margin: 1.7em 0 0.75em;
	font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
	font-size: 0.8em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--pw-gilt-ink);
}

.pw-label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--pw-rule);
}

/* ---- 7. Park gateway cards --------------------------------- */
.pw-gates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1em;
}

.pw-gate {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pw-rule);
	border-radius: 3px;
	overflow: hidden;
	background: var(--pw-paper);
	transition: box-shadow 120ms ease, transform 120ms ease;
}

.pw-gate:hover {
	box-shadow: 0 2px 12px var(--pw-card-shadow);
	transform: translateY(-1px);
}

.pw-gate-body {
	padding: 0.7em 0.9em 0.9em;
}

.pw-gate-name {
	font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
	font-size: 1.2em;
	line-height: 1.2;
}

.pw-gate-name a {
	color: var(--pw-ink);
}

.pw-gate-name a:hover {
	color: var(--pw-gilt-ink);
}

.pw-gate-meta {
	margin-top: 0.2em;
	font-size: 0.82em;
	color: var(--pw-muted);
}

.pw-gate-links {
	margin-top: 0.55em;
	padding-top: 0.55em;
	border-top: 1px dotted var(--pw-rule);
	font-size: 0.85em;
	line-height: 1.55;
}

/* Art panel: duotone ground + ink silhouette, drawn in CSS. */
.pw-art {
	position: relative;
	height: 118px;
	overflow: hidden;
	border-bottom: 1px solid var(--pw-rule);
	background: linear-gradient(180deg, var(--pw-tint-2) 0%, var(--pw-tint) 100%);
}

.pw-art .pw-s {
	position: absolute;
	bottom: 20px;
}

.pw-ground {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 20px;
	background: var(--pw-art-ink);
	opacity: 0.9;
}

/* Per-park duotone grounds. */
.pw-gate--mk { --pw-tint: #b7c7e2; --pw-tint-2: #e8edf7; }
.pw-gate--ep { --pw-tint: #a9cfca; --pw-tint-2: #e3f0ee; }
.pw-gate--hs { --pw-tint: #e0b394; --pw-tint-2: #f6e8dd; }
.pw-gate--ak { --pw-tint: #b1cb97; --pw-tint-2: #e9f1e0; }
.pw-gate--dl { --pw-tint: #cbb4d8; --pw-tint-2: #efe7f4; }
.pw-gate--dca { --pw-tint: #e6c585; --pw-tint-2: #faf0db; }

html.skin-theme-clientpref-night .pw-gate--mk { --pw-tint: #26334d; --pw-tint-2: #161d2b; }
html.skin-theme-clientpref-night .pw-gate--ep { --pw-tint: #1c3633; --pw-tint-2: #121f1e; }
html.skin-theme-clientpref-night .pw-gate--hs { --pw-tint: #3a2a20; --pw-tint-2: #211812; }
html.skin-theme-clientpref-night .pw-gate--ak { --pw-tint: #22311b; --pw-tint-2: #151d11; }
html.skin-theme-clientpref-night .pw-gate--dl { --pw-tint: #2e2440; --pw-tint-2: #1b1626; }
html.skin-theme-clientpref-night .pw-gate--dca { --pw-tint: #3a2f16; --pw-tint-2: #221c0e; }

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .pw-gate--mk { --pw-tint: #26334d; --pw-tint-2: #161d2b; }
	html.skin-theme-clientpref-os .pw-gate--ep { --pw-tint: #1c3633; --pw-tint-2: #121f1e; }
	html.skin-theme-clientpref-os .pw-gate--hs { --pw-tint: #3a2a20; --pw-tint-2: #211812; }
	html.skin-theme-clientpref-os .pw-gate--ak { --pw-tint: #22311b; --pw-tint-2: #151d11; }
	html.skin-theme-clientpref-os .pw-gate--dl { --pw-tint: #2e2440; --pw-tint-2: #1b1626; }
	html.skin-theme-clientpref-os .pw-gate--dca { --pw-tint: #3a2f16; --pw-tint-2: #221c0e; }

	html:not(.skin-theme-clientpref-day):not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) .pw-gate--mk { --pw-tint: #26334d; --pw-tint-2: #161d2b; }
	html:not(.skin-theme-clientpref-day):not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) .pw-gate--ep { --pw-tint: #1c3633; --pw-tint-2: #121f1e; }
	html:not(.skin-theme-clientpref-day):not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) .pw-gate--hs { --pw-tint: #3a2a20; --pw-tint-2: #211812; }
	html:not(.skin-theme-clientpref-day):not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) .pw-gate--ak { --pw-tint: #22311b; --pw-tint-2: #151d11; }
	html:not(.skin-theme-clientpref-day):not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) .pw-gate--dl { --pw-tint: #2e2440; --pw-tint-2: #1b1626; }
	html:not(.skin-theme-clientpref-day):not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) .pw-gate--dca { --pw-tint: #3a2f16; --pw-tint-2: #221c0e; }
}

/* Magic Kingdom — three-spire castle. */
.pw-gate--mk .pw-s1 {
	left: 50%;
	margin-left: -13px;
	width: 26px;
	height: 52px;
	background: var(--pw-art-ink);
}

.pw-gate--mk .pw-s1::before {
	content: "";
	position: absolute;
	left: -5px;
	top: -30px;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 30px solid var(--pw-art-ink);
}

.pw-gate--mk .pw-s2,
.pw-gate--mk .pw-s3 {
	width: 17px;
	height: 34px;
	background: var(--pw-art-ink);
}

.pw-gate--mk .pw-s2 { left: 50%; margin-left: -47px; }
.pw-gate--mk .pw-s3 { left: 50%; margin-left: 30px; }

.pw-gate--mk .pw-s2::before,
.pw-gate--mk .pw-s3::before {
	content: "";
	position: absolute;
	left: -4px;
	top: -21px;
	border-left: 12px solid transparent;
	border-right: 13px solid transparent;
	border-bottom: 21px solid var(--pw-art-ink);
}

/* EPCOT — faceted sphere on two legs. */
.pw-gate--ep .pw-s1 {
	left: 50%;
	margin-left: -37px;
	bottom: 26px;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--pw-art-ink);
	background-image:
		repeating-linear-gradient(60deg, var(--pw-facet) 0 1px, transparent 1px 13px),
		repeating-linear-gradient(-60deg, var(--pw-facet) 0 1px, transparent 1px 13px),
		repeating-linear-gradient(0deg, var(--pw-facet) 0 1px, transparent 1px 13px);
}

.pw-gate--ep .pw-s2,
.pw-gate--ep .pw-s3 {
	width: 7px;
	height: 30px;
	background: var(--pw-art-ink);
}

.pw-gate--ep .pw-s2 { left: 50%; margin-left: -22px; transform: skewX(12deg); }
.pw-gate--ep .pw-s3 { left: 50%; margin-left: 15px; transform: skewX(-12deg); }

/* Hollywood Studios — stepped art-deco tower. */
.pw-gate--hs .pw-s1 { left: 50%; margin-left: -26px; width: 52px; height: 34px; background: var(--pw-art-ink); }
.pw-gate--hs .pw-s2 { left: 50%; margin-left: -17px; width: 34px; height: 60px; background: var(--pw-art-ink); }
.pw-gate--hs .pw-s3 { left: 50%; margin-left: -9px; width: 18px; height: 82px; background: var(--pw-art-ink); }

.pw-gate--hs .pw-s3::before {
	content: "";
	position: absolute;
	left: 8px;
	top: -16px;
	width: 2px;
	height: 16px;
	background: var(--pw-art-ink);
}

/* Animal Kingdom — the tree. */
.pw-gate--ak .pw-s1 {
	left: 50%;
	margin-left: -15px;
	width: 30px;
	height: 44px;
	background: var(--pw-art-ink);
	clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
}

.pw-gate--ak .pw-s2 {
	left: 50%;
	margin-left: -44px;
	bottom: 52px;
	width: 88px;
	height: 48px;
	border-radius: 50%;
	background: var(--pw-art-ink);
}

.pw-gate--ak .pw-s3 {
	left: 50%;
	margin-left: -14px;
	bottom: 74px;
	width: 54px;
	height: 34px;
	border-radius: 50%;
	background: var(--pw-art-ink);
	opacity: 0.85;
}

/* Disneyland Park — rounded castle with a lit gateway arch. */
.pw-gate--dl .pw-s1 {
	left: 50%;
	margin-left: -17px;
	width: 34px;
	height: 54px;
	border-radius: 17px 17px 0 0;
	background: var(--pw-art-ink);
}

.pw-gate--dl .pw-s1::before {
	content: "";
	position: absolute;
	left: 9px;
	bottom: 0;
	width: 16px;
	height: 22px;
	border-radius: 8px 8px 0 0;
	background: var(--pw-tint-2);
}

.pw-gate--dl .pw-s1::after {
	content: "";
	position: absolute;
	left: -11px;
	top: -32px;
	border-left: 22px solid transparent;
	border-right: 23px solid transparent;
	border-bottom: 32px solid var(--pw-art-ink);
}

.pw-gate--dl .pw-s2,
.pw-gate--dl .pw-s3 {
	width: 15px;
	height: 32px;
	background: var(--pw-art-ink);
}

.pw-gate--dl .pw-s2 { left: 50%; margin-left: -40px; }
.pw-gate--dl .pw-s3 { left: 50%; margin-left: 25px; }

.pw-gate--dl .pw-s2::before,
.pw-gate--dl .pw-s3::before {
	content: "";
	position: absolute;
	left: -4px;
	top: -22px;
	border-left: 11px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 22px solid var(--pw-art-ink);
}

/* California Adventure — the pier wheel. */
.pw-gate--dca .pw-s1 {
	left: 50%;
	margin-left: -36px;
	bottom: 30px;
	width: 72px;
	height: 72px;
	box-sizing: border-box;
	border: 6px solid var(--pw-art-ink);
	border-radius: 50%;
}

.pw-gate--dca .pw-s2 {
	left: 50%;
	margin-left: -30px;
	bottom: 36px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, var(--pw-art-ink) 0 1.6deg, transparent 1.6deg 30deg);
}

.pw-gate--dca .pw-s3 {
	left: 50%;
	margin-left: -5px;
	width: 10px;
	height: 36px;
	background: var(--pw-art-ink);
}

.pw-gate--dca .pw-s3::before {
	content: "";
	position: absolute;
	left: -3px;
	top: -12px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pw-art-ink);
}

/* ---- 8. Panels and browse strip ---------------------------- */
.pw-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1em;
}

.pw-panel {
	border: 1px solid var(--pw-rule);
	border-radius: 3px;
	background: var(--pw-paper);
	overflow: hidden;
}

.pw-panel-title {
	padding: 0.45em 0.9em;
	background: var(--pw-paper-2);
	border-bottom: 1px solid var(--pw-rule);
	font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
	font-size: 1.05em;
	color: var(--pw-ink);
}

.pw-panel-body {
	padding: 0.85em 0.95em;
	line-height: 1.6;
}

.pw-panel-body p {
	margin: 0 0 0.6em;
}

.pw-panel-body p:last-child {
	margin-bottom: 0;
}

.pw-panel-body ul {
	margin: 0 0 0 1.3em;
	padding: 0;
}

.pw-panel-body li {
	margin-bottom: 0.45em;
}

.pw-browse {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6em;
}

.pw-chip {
	padding: 0.55em 0.7em;
	border: 1px solid var(--pw-rule);
	border-radius: 3px;
	background: var(--pw-paper);
	text-align: center;
	font-size: 0.92em;
	transition: border-color 120ms ease;
}

.pw-chip:hover {
	border-color: var(--pw-gilt);
}

/* Make the whole chip the hit target, not just the link text. */
.pw-chip a {
	display: block;
}

.pw-colophon {
	margin-top: 1.6em;
	padding-top: 0.9em;
	border-top: 1px solid var(--pw-rule);
	font-size: 0.9em;
	line-height: 1.6;
	color: var(--pw-muted);
}

.pw-colophon p,
.pw-hero > div > p,
.pw-gate-body p {
	margin: 0;
}

/* ---- 9. Advertising slots ---------------------------------- */
/* Three slots, all injected server-side from LocalSettings.php so
   that no article wikitext knows they exist:

     .pw-ad--leaderboard  beneath the page title, above the prose
     .pw-ad--in-article   after the lead section, long articles only
     .pw-ad--rail         in the Vector 2022 sidebar

   A slot with no creative is never emitted at all, so an unsold
   slot leaves no gap; the :empty rules here are belt and braces
   for an ad tag that renders to nothing at request time. */
.pw-ad {
	margin: 1.15em 0 1.5em;
}

.pw-ad:empty {
	display: none;
}

/* The frame is the containing block for whatever the network
   serves: it can be no wider than the column it sits in. */
.pw-ad__frame {
	max-width: 100%;
	overflow: hidden;
}

.pw-ad__frame:empty {
	display: none;
}

/* Label. Same small-caps serif grammar as the Main Page section
   labels, one step quieter — it is a disclosure, not a heading. */
.pw-ad__label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.4em;
	font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
	font-size: 0.7em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pw-muted);
}

.pw-ad__label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--pw-rule);
}

/* (a) Leaderboard: sits directly under the title block, so it is
   pulled up tight against it rather than floating in the gap. */
.pw-ad--leaderboard {
	margin-top: 0.3em;
}

/* (b) In-article: clears the infobox float so a creative is never
   squeezed into the gutter beside it, and so it can never reflow
   or overlap a line of prose. */
.pw-ad--in-article {
	clear: both;
	margin: 1.9em 0;
}

/* (c) Rail: lives in the skin's sidebar, outside the prose column
   entirely, which is what makes it structurally incapable of
   disturbing article text. */
.pw-ad--rail {
	margin: 1em 0 0.3em;
	font-size: 0.9em;
}

/* ---- House ad ---------------------------------------------- */
/* The founding-advertiser placeholder. Duotone, drawn in CSS, same
   grammar as the gateway cards: ink tower, gilt roof, paper ground. */
.pw-house {
	display: flex;
	align-items: center;
	gap: 0.85em;
	padding: 0.8em 1em;
	border: 1px solid var(--pw-rule);
	border-radius: 3px;
	background: linear-gradient(180deg, var(--pw-paper) 0%, var(--pw-paper-2) 100%);
	transition: border-color 120ms ease;
}

a.pw-house,
a.pw-house:visited {
	color: var(--pw-ink);
	text-decoration: none;
}

.pw-house:hover {
	border-color: var(--pw-gilt);
}

.pw-house__mark {
	position: relative;
	flex: 0 0 34px;
	height: 34px;
}

.pw-house__mark::before {
	content: "";
	position: absolute;
	left: 11px;
	bottom: 0;
	width: 12px;
	height: 19px;
	background: var(--pw-art-ink);
}

.pw-house__mark::after {
	content: "";
	position: absolute;
	left: 5px;
	bottom: 19px;
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 13px solid var(--pw-gilt);
}

.pw-house__text {
	display: block;
	min-width: 0;
}

.pw-house__name {
	display: block;
	font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
	font-size: 1.15em;
	line-height: 1.2;
	color: var(--pw-ink);
}

/* The neutral tagline area: reserved for the advertiser's own line
   once a real creative replaces this placeholder. */
.pw-house__tag {
	display: block;
	margin-top: 0.15em;
	font-size: 0.82em;
	line-height: 1.3;
	color: var(--pw-muted);
}

.pw-house__cta {
	margin-left: auto;
	padding-bottom: 1px;
	border-bottom: 1px solid var(--pw-gilt);
	font-size: 0.78em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pw-gilt-ink);
}

/* Rail variant: a narrow column, so the card stacks. */
.pw-ad--rail .pw-house {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
	padding: 0.75em 0.8em;
}

.pw-ad--rail .pw-house__cta {
	margin-left: 0;
}

/* ---- 10. Footer: operator line ------------------------------ */
#footer-info-pw-operator {
	color: var(--pw-muted);
}

#footer-info-pw-operator .pw-operator-sep {
	padding: 0 0.45em;
	color: var(--pw-rule);
}

/* ---- 11. Responsive ----------------------------------------- */
@media screen and (max-width: 999px) {
	/* The sidebar collapses to a drawer below this width; a rail ad
	   inside a drawer is an ad nobody asked to open, so it goes. */
	.pw-ad--rail { display: none; }
}

@media screen and (max-width: 860px) {
	.pw-gates { grid-template-columns: repeat(2, 1fr); }
	.pw-browse { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 600px) {
	.pw-gates { grid-template-columns: 1fr; }
	.pw-cols { grid-template-columns: 1fr; }
	.pw-hero { padding: 1.3em 1.2em 1.2em; }
	.pw-hero-title { font-size: 1.7em; }
	.pw-hero::after { display: none; }
	.infobox { float: none; margin: 0 0 1em; width: auto !important; }
	/* Phone width: the call to action wraps under the name rather
	   than squeezing it. */
	.pw-house { flex-wrap: wrap; gap: 0.6em 0.85em; }
	.pw-house__cta { margin-left: 0; }
}

@media print {
	.pw-ad { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pw-gate { transition: none; }
	.pw-gate:hover { transform: none; }
	.pw-house { transition: none; }
}