/* ==========================================================================
   HD Membership showcase: The Gastineau Gazette (gz-) and the landing page's
   live pieces (hdms-). Colors come from the HD Showcase tokens (--hd-*).
   ========================================================================== */

:root {
	--gz-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
	--gz-ink: #14213d;
	--gz-navy: #0b3a6e;
	--gz-rule: #d9dee6;
	--gz-paper: #fbfaf7;
}

/* ---------- The Gazette ---------- */

.gz { background: var(--gz-paper); color: var(--gz-ink); padding-bottom: 48px; }
.gz a { color: inherit; }

.gz-plate { border-bottom: 1px solid var(--gz-rule); background: #fff; }
.gz-plate__in { max-width: 1120px; margin: 0 auto; padding: 22px var(--hds-gutter, 24px) 0; text-align: center; }
.gz-plate__line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 10px; font: 500 13px/1.4 var(--hds-font); color: var(--hd-slate, #5a6172); }
.gz-plate__sample { color: var(--hd-teal, #127f86); }
.gz-plate__name { display: block; font: 700 clamp(34px, 6vw, 64px)/1 var(--gz-serif); letter-spacing: -.02em; color: var(--gz-navy) !important; text-decoration: none; }
.gz-plate__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin-top: 16px; padding: 10px 0; border-top: 3px double var(--gz-rule); font: 500 14px/1.2 var(--hds-font); }
.gz-plate__nav a { padding: 6px 10px; border-radius: 999px; text-decoration: none; color: var(--gz-ink); }
.gz-plate__nav a:hover, .gz-plate__nav a:focus-visible { background: #eef2f7; }
.gz-plate__nav a[aria-current="page"] { background: var(--gz-navy); color: #fff; }
.gz-plate__nav .gz-plate__sub { color: var(--hd-ember, #e14b2a); font-weight: 600; }

.gz-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: var(--gz-navy); font: 600 11.5px/1.5 var(--hds-font); letter-spacing: .01em; vertical-align: 1px; }

.gz-art { max-width: 720px; margin: 0 auto; padding: 40px var(--hds-gutter, 24px) 0; }
.gz-art__kick { margin: 0 0 12px; font: 600 14px/1.3 var(--hds-font); color: var(--hd-teal, #127f86); }
.gz-art__kick a { text-decoration: none; }
.gz-art__title { margin: 0; font: 700 clamp(30px, 4.6vw, 46px)/1.08 var(--gz-serif); letter-spacing: -.015em; color: var(--gz-ink); text-wrap: balance; }
.gz-art__dek { margin: 16px 0 0; font: 400 21px/1.45 var(--gz-serif); color: #3d4659; }
.gz-art__meta { margin: 18px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--gz-rule); font: 500 14px/1.4 var(--hds-font); color: var(--hd-slate, #5a6172); }
.gz-art__photo { margin: 28px 0 0; }
.gz-art__photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.gz-art__body { margin-top: 28px; font: 400 19px/1.7 var(--gz-serif); }
.gz-art__body > p, .gz-art__body .hdmb-lead > p { margin: 0 0 1.1em; }
.gz-art__body h2 { margin: 1.6em 0 .5em; font: 700 25px/1.25 var(--gz-serif); color: var(--gz-ink); }
.gz-art__body blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 3px solid var(--hd-coral, #ff6b4a); font-style: italic; }

.gz-h { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gz-ink); font: 700 15px/1.2 var(--hds-font); color: var(--gz-ink); }
.gz-h--section { font: 700 clamp(28px, 4vw, 40px)/1.1 var(--gz-serif); border-bottom-width: 3px; }

.gz-more, .gz-front { max-width: 1120px; margin: 56px auto 0; padding: 0 var(--hds-gutter, 24px); }
.gz-front { margin-top: 32px; }
.gz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.gz-grid--front { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--gz-rule); }

.gz-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; margin-bottom: 12px; }
.gz-card__kick { margin: 0 0 6px; font: 600 13px/1.3 var(--hds-font); color: var(--hd-teal, #127f86); }
.gz-card__title { margin: 0; font: 700 21px/1.25 var(--gz-serif); color: var(--gz-ink); text-wrap: balance; }
.gz-card__title a { text-decoration: none; }
.gz-card__title a:hover, .gz-card__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gz-card__dek { margin: 8px 0 0; font: 400 16px/1.5 var(--gz-serif); color: #3d4659; }
.gz-card__meta { margin: 8px 0 0; font: 500 12.5px/1.3 var(--hds-font); color: var(--hd-slate, #5a6172); }
.gz-card--lead .gz-card__title { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; }
.gz-card--lead .gz-card__dek { font-size: 19px; }
.gz-card--brief { padding: 14px 0; border-bottom: 1px solid var(--gz-rule); }
.gz-card--brief:last-child { border-bottom: 0; }
.gz-card--brief .gz-card__title { font-size: 18px; }

.gz-front__top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; }
.gz-front__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--gz-rule); }
.gz .navigation.pagination { margin-top: 32px; font: 500 15px/1 var(--hds-font); }
.gz .page-numbers { display: inline-block; padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.gz .page-numbers.current { background: var(--gz-navy); color: #fff; }
.gz-front__side { padding-left: 32px; border-left: 1px solid var(--gz-rule); }

.gz-note { max-width: 720px; margin: 56px auto 0; padding: 18px 22px; border: 1px dashed #b9c3d1; border-radius: 10px; background: #fff; font: 400 15px/1.55 var(--hds-font); color: var(--hd-slate, #5a6172); }
.gz-note p { margin: 0; }
.gz-note p + p { margin-top: 8px; }
.gz-note a { color: var(--hd-action, #105378); font-weight: 600; }

@media (max-width: 860px) {
	.gz-front__top { grid-template-columns: 1fr; gap: 24px; }
	.gz-front__side { padding-left: 0; border-left: 0; }
	.gz-front__pair { grid-template-columns: 1fr; }
	.gz-grid { grid-template-columns: 1fr; gap: 22px; }
	.gz-art { padding-top: 28px; }
	.gz-art__body { font-size: 18px; }
	.gz-art__dek { font-size: 19px; }
}

/* The bare article in the landing page's browser frame. */
html.hdms-frame, body.hdms-frame { background: var(--gz-paper); margin: 0; }
.gz--frame { padding: 0 0 40px; }
.gz-mini { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--gz-rule); background: #fff; font: 700 17px/1.2 var(--gz-serif); color: var(--gz-navy); }
.gz-mini__sec { font: 600 12.5px/1 var(--hds-font); color: var(--hd-teal, #127f86); }
.gz--frame .gz-art { padding-top: 24px; }
.gz--frame .gz-art__title { font-size: clamp(26px, 6vw, 36px); }

/* ---------- Landing: the article switcher ---------- */

.hdms-sw { position: relative; }
.hdms-sw__browser { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(0, 27, 68, .18), 0 30px 60px -20px rgba(0, 10, 30, .55); }
.hdms-sw__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #eef2f7; border-bottom: 1px solid #dfe5ea; }
.hdms-sw__bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9d2de; }
.hdms-sw__url { flex: 1; min-width: 0; margin-left: 8px; padding: 5px 12px; overflow: hidden; border-radius: 999px; background: #fff; font: 400 12.5px/1.2 var(--hds-font); color: var(--hd-slate, #5a6172); white-space: nowrap; text-overflow: ellipsis; }
.hdms-sw__url b { font-weight: 500; color: var(--hd-ink, #323643); }
.hdms-sw__view { position: relative; height: clamp(420px, 58vh, 580px); background: var(--gz-paper); }
.hdms-sw__view iframe { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .35s var(--hds-ease, ease); }
.hdms-sw__view.is-ready iframe { opacity: 1; }
.hdms-sw__skel { position: absolute; inset: 0; padding: 56px 28px; pointer-events: none; transition: opacity .25s; }
.hdms-sw__view.is-ready .hdms-sw__skel { opacity: 0; }
.hdms-sw__skel i { display: block; height: 14px; margin-bottom: 14px; border-radius: 7px; background: linear-gradient(90deg, #e9edf3 0%, #f5f7fa 50%, #e9edf3 100%) 0 0 / 200% 100%; animation: hdms-shimmer 1.4s linear infinite; }
.hdms-sw__skel i:first-child { width: 70%; height: 26px; }
.hdms-sw__skel i:nth-child(2) { width: 92%; }
.hdms-sw__skel i:nth-child(3) { width: 86%; }
.hdms-sw__skel i:nth-child(4) { width: 60%; }
.hdms-sw__skel b { display: block; height: 150px; margin-top: 30px; border-radius: 12px; background: #eef2f7; }
@keyframes hdms-shimmer { to { background-position: -200% 0; } }

.hdms-sw__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hdms-sw__tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(179, 224, 242, .35); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #dbe9f5; font: 500 14px/1.2 var(--hds-font); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.hdms-sw__tabs button svg { flex: none; opacity: .85; }
.hdms-sw__tabs button:hover { border-color: rgba(179, 224, 242, .7); background: rgba(255, 255, 255, .12); color: #fff; }
.hdms-sw__tabs button:focus-visible { outline: 2px solid var(--hd-aqua, #3ecfb2); outline-offset: 2px; }
.hdms-sw__tabs button[aria-selected="true"] { border-color: var(--hd-coral, #ff6b4a); background: var(--hd-coral, #ff6b4a); color: var(--hd-navy, #001b44); font-weight: 600; }
.hdms-sw__line { margin: 14px 0 0; font: 400 15px/1.5 var(--hds-font); color: #c4d6e8; }
.hdms-sw__line a { margin-left: 4px; color: #fff; font-weight: 600; text-underline-offset: 3px; }

/* ---------- Landing: members-first clock ---------- */

.hdms-clock { padding: 28px; border-radius: var(--hds-radius, 12px); background: var(--hd-navy, #001b44); color: #dbe9f5; }
.hdms-clock__k { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 14px/1.2 var(--hds-font); color: var(--hd-aqua, #3ecfb2); }
.hdms-clock__t { margin: 12px 0 0; font: 700 23px/1.25 var(--gz-serif); }
.hdms-clock__t a { color: #fff; text-decoration: none; }
.hdms-clock__t a:hover, .hdms-clock__t a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.hdms-clock__d { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; }
.hdms-clock__d span { padding: 12px 6px; border-radius: 10px; background: rgba(255, 255, 255, .07); text-align: center; font: 400 13px/1.3 var(--hds-font); color: #9fb8d3; }
.hdms-clock__d b { display: block; font: 600 34px/1.1 var(--hds-font); font-variant-numeric: tabular-nums; color: #fff; }
.hdms-clock__n { margin: 18px 0 0; font: 400 15px/1.55 var(--hds-font); }

/* ---------- Landing: the next issue ---------- */

.hdms-issue { position: relative; padding: 26px 28px; border: 1px solid var(--hd-line, #dfe5ea); border-radius: var(--hds-radius, 12px); background: #fff; box-shadow: var(--hds-shadow); }
.hdms-issue::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; border-top: 3px dashed var(--hd-coral, #ff6b4a); opacity: .55; }
.hdms-issue__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hdms-issue__k { margin: 0; font: 600 14px/1.2 var(--hds-font); color: var(--hd-teal, #127f86); }
.hdms-issue__date { margin: 0; font: 700 20px/1.2 var(--gz-serif); color: var(--hd-navy, #001b44); }
.hdms-issue__big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.hdms-issue__big p { margin: 0; padding: 12px; border-radius: 10px; background: var(--hd-mist, #f4f7f9); font: 400 13px/1.3 var(--hds-font); color: var(--hd-slate, #5a6172); }
.hdms-issue__big b { display: block; font: 600 28px/1.1 var(--hds-font); font-variant-numeric: tabular-nums; color: var(--hd-navy, #001b44); }
.hdms-issue__zones { width: 100%; margin-top: 18px; border-collapse: collapse; font: 400 14.5px/1.4 var(--hds-font); }
.hdms-issue__zones caption { margin-bottom: 6px; text-align: left; font-weight: 600; color: var(--hd-ink, #323643); }
.hdms-issue__zones th, .hdms-issue__zones td { padding: 7px 0; border-bottom: 1px solid var(--hd-line, #dfe5ea); text-align: left; font-weight: 400; }
.hdms-issue__zones td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--hd-ink, #323643); }
.hdms-issue__ch { margin: 14px 0 0; font: 400 14.5px/1.5 var(--hds-font); }
.hdms-issue__ch b { color: var(--hd-ink, #323643); }
.hdms-issue__out { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.hdms-issue__out li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #eef6fb; font: 500 13px/1.2 var(--hds-font); color: var(--hd-action, #105378); }

/* ---------- Landing: the paper's numbers ---------- */

.hdms-num__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hdms-num__tile { padding: 18px; border: 1px solid var(--hd-line, #dfe5ea); border-radius: var(--hds-radius, 12px); background: #fff; }
.hdms-num__v { margin: 0; font: 600 32px/1.1 var(--hds-font); font-variant-numeric: tabular-nums; color: var(--hd-navy, #001b44); }
.hdms-num__l { margin: 4px 0 0; font: 500 14px/1.35 var(--hds-font); color: var(--hd-ink, #323643); }
.hdms-num__n { margin: 8px 0 0; font: 400 13px/1.45 var(--hds-font); color: var(--hd-slate, #5a6172); }
.hdms-num__chart { margin: 22px 0 0; padding: 18px 18px 12px; border: 1px solid var(--hd-line, #dfe5ea); border-radius: var(--hds-radius, 12px); background: #fff; }
.hdms-num__chart figcaption { margin-bottom: 10px; font: 600 14px/1.3 var(--hds-font); color: var(--hd-ink, #323643); }
.hdms-num__plot { position: relative; height: 160px; cursor: crosshair; }
.hdms-num__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hdms-num__grid { stroke: #e8edf2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hdms-num__line { fill: none; stroke: var(--hd-blue, #136fa5); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hdms-num__area { fill: var(--hd-blue, #136fa5); fill-opacity: .08; }
.hdms-num__cross { stroke: #9aa6b6; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.hdms-num__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid #fff; border-radius: 50%; background: var(--hd-blue, #136fa5); box-shadow: 0 0 0 1px var(--hd-blue, #136fa5); pointer-events: none; }
.hdms-num__end { position: absolute; right: 0; top: -2px; font: 600 13px/1 var(--hds-font); color: var(--hd-ink, #323643); }
.hdms-num__tip { position: absolute; top: 0; z-index: 2; padding: 8px 10px; border-radius: 8px; background: var(--hd-navy, #001b44); color: #fff; font: 400 12.5px/1.4 var(--hds-font); white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.hdms-num__tip b { display: block; font-size: 14px; }
.hdms-num__axis { display: flex; justify-content: space-between; margin-top: 6px; font: 400 12.5px/1 var(--hds-font); color: var(--hd-slate, #5a6172); }
.hdms-num__table { margin-top: 12px; font: 400 14px/1.4 var(--hds-font); }
.hdms-num__table summary { cursor: pointer; color: var(--hd-action, #105378); font-weight: 600; }
.hdms-num__table table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.hdms-num__table th, .hdms-num__table td { padding: 5px 8px; border-bottom: 1px solid var(--hd-line, #dfe5ea); text-align: left; font-weight: 400; }
.hdms-num__table td { text-align: right; font-variant-numeric: tabular-nums; }
.hdms-num__table thead th { font-weight: 600; }
.hdms-num__why { margin-top: 18px; }
.hdms-num__wk { margin: 0 0 8px; font: 600 14px/1.3 var(--hds-font); color: var(--hd-ink, #323643); }
.hdms-num__why ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hdms-num__why li { display: inline-flex; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--hd-mist, #f4f7f9); font: 400 13.5px/1.2 var(--hds-font); }
.hdms-num__why li b { font-weight: 600; color: var(--hd-ink, #323643); }

/* ---------- Landing: page sections ---------- */

@media (min-width: 1100px) {
	.hdms-home .hdmb-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hdms-num__start { position: absolute; left: 0; margin-top: -22px; font: 600 13px/1 var(--hds-font); color: var(--hd-slate, #5a6172); }

.hdms-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hdms-split--top { align-items: start; }
.hdms-list { margin: 18px 0 0; padding: 0; list-style: none; }
.hdms-list li { position: relative; padding: 0 0 12px 28px; font: 400 16px/1.55 var(--hds-font); }
.hdms-list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--hd-coral, #ff6b4a); }
.hdms-list b { color: var(--hd-ink, #323643); font-weight: 600; }
.hdms-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.hdms-role { padding: 22px; border: 1px solid var(--hd-line, #dfe5ea); border-radius: var(--hds-radius, 12px); background: #fff; }
.hdms-role h3 { margin: 0; font: 600 18px/1.3 var(--hds-font); color: var(--hd-navy, #001b44); }
.hdms-role p { margin: 8px 0 0; font: 400 15px/1.55 var(--hds-font); }
.hdms-role a { color: var(--hd-action, #105378); font-weight: 600; }
.hdms-test { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px auto 0; padding: 14px 20px; max-width: 880px; border-radius: 12px; background: #fff7f4; border: 1px solid #ffd9cf; font: 400 15px/1.5 var(--hds-font); }
.hdms-test code { padding: 1px 6px; border-radius: 5px; background: #fff; font: 500 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hd-ink, #323643); }
.hdms-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin-top: 28px; }
.hdms-cols h3 { margin: 0; font: 600 17px/1.3 var(--hds-font); color: var(--hd-navy, #001b44); }
.hdms-cols p { margin: 6px 0 0; font: 400 15px/1.55 var(--hds-font); }
.hdms-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hdms-links a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--hd-line, #dfe5ea); border-radius: 999px; background: #fff; font: 500 14.5px/1.2 var(--hds-font); color: var(--hd-ink, #323643); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.hdms-links a:hover, .hdms-links a:focus-visible { border-color: var(--hd-blue, #136fa5); box-shadow: 0 0 0 3px rgba(19, 111, 165, .12); }
.hdms-links small { color: var(--hd-slate, #5a6172); font-size: 13px; }

@media (max-width: 900px) {
	/* The theme's 1fr track grows to the switcher's unwrapped address bar; keep it to the screen. */
	.hdms-hero .hds-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.hdms-sw { margin-top: 8px; }
}
@media (max-width: 960px) {
	.hdms-split, .hdms-roles, .hdms-cols { grid-template-columns: 1fr; }
	.hdms-split--rev > :first-child { order: 2; }
	.hdms-num__tiles, .hdms-issue__big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.hdms-clock__d b { font-size: 26px; }
	.hdms-sw__view { height: 460px; }
	.hdms-sw__tabs button { padding: 7px 11px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.hdms-sw__skel i { animation: none; }
	.hdms-sw__view iframe, .hdms-sw__skel { transition: none; }
}