@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("big-shoulders-latin.woff2?v=698f996092") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("source-serif-4-latin.woff2?v=f2ea9c12d2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("source-serif-4-italic-latin.woff2?v=96e6393209") format("woff2"); }
:root {
  --paper: #E4E4DF; --ink: #262624; --muted: #55554F; --rule: #262624; --hair: #A9A9A2;
  --spot: #0B6E78; --spot-ink: #FFFFFF; --spot-text: #0B6E78;
  --head: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Source Serif 4", Georgia, serif;
}

:root[data-theme="dark"] { --paper: #1C1D1F; --ink: #E5E3DE; --muted: #A3A19A; --rule: #E5E3DE; --hair: #4A4A47;
          --spot: #4FC3CF; --spot-ink: #10181A; --spot-text: #4FC3CF; color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1C1D1F; --ink: #E5E3DE; --muted: #A3A19A; --rule: #E5E3DE; --hair: #4A4A47;
          --spot: #4FC3CF; --spot-ink: #10181A; --spot-text: #4FC3CF; }
}
@property --spot { syntax: "<color>"; inherits: true; initial-value: #0B6E78; }
@property --spot-text { syntax: "<color>"; inherits: true; initial-value: #0B6E78; }
@property --spot-ink { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }
html.live { transition: --spot 2s ease, --spot-text 2s ease, --spot-ink 2s ease; }
@media (prefers-reduced-motion: reduce) { html.live { transition: none; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--text); font-optical-sizing: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--spot); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 16px; }

.flag { padding-top: 14px; }
.flag .name { display: block; margin: 0; padding-bottom: .06em; font: 900 clamp(3.2rem, 17vw, 8rem)/.86 var(--head); letter-spacing: -.01em; text-decoration: none; }

.cal { color: var(--spot-text); }
.flag nav { display: flex; gap: 4px 16px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  border-top: 5px solid var(--rule); border-bottom: 1px solid var(--spot); margin-top: 10px; padding: 6px 0; }
.flag nav::-webkit-scrollbar { display: none; }
.flag nav a { font: 700 1.15rem var(--head); letter-spacing: .02em; text-decoration: none; padding: 0 3px; }
.flag nav a[aria-current="page"] { background: var(--spot); color: var(--spot-ink); }

main { padding-bottom: 28px; }
.backlink { display: none; }
.prose { max-width: 40rem; }
.prose p { margin: 0 0 .9em; }
.divider { border-top: 1px solid var(--spot); padding-top: 1em; margin-top: 1.2em; }
.b-label { font: italic 400 .95rem var(--text); color: var(--muted); margin: 0 0 .2em; }
h1 { font: 900 clamp(2.4rem, 11vw, 4.2rem)/.95 var(--head); margin: .1em 0 .35em; }
h2 { font: 900 clamp(1.8rem, 7vw, 2.6rem)/1 var(--head); margin: 1.2em 0 .3em; border-top: 3px solid var(--rule); padding-top: .2em; }
h3 { font: 700 1.35rem/1.15 var(--head); letter-spacing: .02em; margin: 1em 0 .3em; }
.lede { font-size: 1.22rem; line-height: 1.5; }
.lede.dropcap::first-letter { float: left; font: 900 4.1em/.8 var(--head); margin: .06em .08em 0 0; }
.sig { text-align: right; font-style: italic; }
.link-safety-note { font-style: italic; color: var(--muted); }
.quiet { color: var(--muted); }

.about-cols { display: grid; gap: 0 2.2rem; grid-template-columns: minmax(0, 1fr); }
.about-photo { order: -1; }
.about-text { padding-top: 12px; }
@media (min-width: 52rem) {
  .about-cols { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "text photo" "text stats" "more stats"; }
  .about-text { grid-area: text; } .about-photo { grid-area: photo; order: 0; } .about-stats { grid-area: stats; align-self: start; } .about-more { grid-area: more; }
}
.photo-frame { margin: 14px 0 0; }
.photo-stack { position: relative; height: clamp(170px, 34vh, 300px); }
.photo-stack .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.photo-stack .photo.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .photo-stack .photo { transition: none; } }
.photo-credit { font: italic .8rem var(--text); color: var(--muted); text-align: right; padding-top: 2px; }
.hold { position: absolute; z-index: 3; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; border: 0; padding: 3px 9px; font: 600 .78rem var(--text); }
.hold[aria-pressed="true"] { background: var(--spot); color: var(--spot-ink); }
.about-stats { border: 1px solid var(--rule); border-top: 5px solid var(--rule); padding: 8px 12px 10px; margin-top: 18px; }
.about-stats .b-label { font: 900 1.6rem/1 var(--head); color: var(--ink); font-style: normal; border-bottom: 1px solid var(--spot); padding-bottom: 4px; margin-bottom: 6px; }
.stats { display: grid; gap: 0; }
.stat { display: grid; grid-template-columns: auto 1fr; gap: 0 .6em; align-items: baseline; border-bottom: 1px dotted var(--hair); padding: 5px 0; }
.stat:last-child { border-bottom: 0; }
.stat b { font: 900 1.9rem/1 var(--head); font-variant-numeric: lining-nums tabular-nums; color: var(--spot-text); }
.stat span { font-weight: 600; }
.stat small { grid-column: 2; color: var(--muted); font-style: italic; }

.divider:has(> h2:first-child) { border-top: 0; padding-top: 0; }

.stats-table { width: 100%; max-width: 44rem; border-collapse: collapse; font-size: .92rem; margin: .4em 0 1em; }
.stats-table tbody th { font: 600 .92rem var(--text); color: var(--ink); text-align: left; border-bottom: 1px dotted var(--hair); padding: 3px 6px 3px 0; }
.stats-table th { font: italic 400 .85rem var(--text); color: var(--muted); text-align: left; border-bottom: 2px solid var(--rule); padding: 3px 6px 3px 0; }
.stats-table td { border-bottom: 1px dotted var(--hair); padding: 3px 6px 3px 0; }
.stats-table .num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.stats-table tbody tr:hover td { background: color-mix(in srgb, var(--spot) 8%, transparent); }
.stats-block { margin-top: 1.4em; }
.stats-row { display: grid; gap: 0; margin: .6em 0 1em; }
@media (min-width: 52rem) { .stats-row { grid-template-columns: repeat(4, 1fr); gap: 0 1.2rem; } .stats-row .stat { border-bottom: 0; border-top: 5px solid var(--rule); display: block; } .stats-row .stat b { display: block; font-size: 2.6rem; } }
.stats-note { color: var(--muted); font-style: italic; font-size: .92rem; }
.stats-more summary { font: 700 1.15rem var(--head); cursor: pointer; }
.how-to, .ask { margin-top: 1.4em; }
.method { border-left: 3px solid var(--spot); padding-left: 12px; }
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9em; }

.front { display: grid; gap: 0 2.2rem; grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
@media (min-width: 52rem) {
  .front { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "lead photo" "wire photo" "wire ."; }
  .front-lead { grid-area: lead; } .front-photo { grid-area: photo; } .wire { grid-area: wire; }
}
.front-lead h1 { font-size: clamp(2.6rem, 12vw, 4.8rem); }
.deck { font-size: 1.2rem; line-height: 1.45; }
.works i { color: var(--muted); }
.front-photo .photo-stack { height: clamp(200px, 40vh, 380px); }
.wire { border-top: 5px solid var(--rule); margin-top: 18px; }
.wire h2 { border-top: 0; margin: .3em 0 .2em; font-size: 1.8rem; }
.wire-note { margin: 0 0 6px; font-size: .92rem; font-style: italic; }
.wire ul { list-style: none; margin: 0; padding: 0; }
.wire li { border-bottom: 1px dotted var(--hair); padding: 5px 0; line-height: 1.38; }
.wire a { text-decoration: none; display: block; }
.wire a:hover b { text-decoration: underline; text-decoration-color: var(--spot); }
.wire b { color: var(--spot-text); }
.wire i { color: var(--muted); white-space: nowrap; }
.dir { margin-top: 26px; }
.dir-h { margin-top: 0; }
.cityfind input { width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none; padding: 8px 0; font: inherit; font-size: 1.15rem; color: inherit; border-radius: 0; }
.cityfind input:focus-visible { outline: none; border-bottom: 3px solid var(--spot); }
.country h3 { font: 900 1.9rem/1 var(--head); border-top: 3px solid var(--rule); padding-top: .2em; margin: 1.1em 0 .4em; }
.regions { columns: 20rem; column-gap: 2rem; column-rule: 1px solid var(--hair); }
.region { break-inside: avoid; border-top: 1px solid var(--hair); padding: 7px 0 9px; font-size: .98rem; }
.regions > .region:first-child { border-top: 0; }
.rhead { margin: 0 0 2px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rcities { margin: 0; line-height: 1.55; }
.rname { font: 700 1.25rem var(--head); letter-spacing: .02em; color: var(--spot-text); }
.rn { color: var(--muted); font-style: italic; font-size: .85rem; white-space: nowrap; }

.region .item:not([hidden]) ~ .item:not([hidden])::before { content: ", "; }
.region a.city { font-weight: 600; text-decoration-color: var(--hair); }
.region a.city:hover { text-decoration-color: var(--spot); }
.cn { color: var(--muted); font-size: .85em; font-variant-numeric: oldstyle-nums; }
.region .hit { background: color-mix(in srgb, var(--spot) 22%, transparent); }

.foot { border-top: 5px solid var(--rule); padding: 10px 0 30px; font-size: .92rem; display: grid; gap: 8px; }
.foot .donate { font: 700 1.1rem var(--head); text-decoration: none; background: var(--ink); color: var(--paper); padding: 3px 10px; justify-self: start; }
.foot .req { color: var(--muted); }
.proto { font-size: .82rem; color: var(--muted); font-style: italic; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 40; background: var(--ink); color: var(--paper); padding: 8px 12px; font-weight: 600; }
.skip:focus { top: 8px; }
main:focus { outline: none; }

.flag nav a.classic { color: var(--muted); font-weight: 500; }

.paper-foot { border-top: 2px solid var(--rule); margin-top: 36px; padding: 14px 0 40px; font-size: .9rem; color: var(--muted); display: grid; gap: 10px; }
.paper-foot a { color: var(--ink); text-decoration-color: var(--spot); text-underline-offset: 3px; }
.paper-foot .donate { justify-self: start; font: 700 1.1rem var(--head); text-decoration: none; background: var(--ink); color: var(--paper); padding: 3px 10px; }
.paper-foot .req { line-height: 1.6; }
.paper-foot .txt { background: none; border: 0; padding: 6px 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.topbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }

.modebtn { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--ink);
  display: inline-grid; place-items: center; padding: 0; font: 1rem/1 system-ui, sans-serif; cursor: pointer; }
.modebtn::after { content: ""; position: absolute; inset: -5px; }
.modebtn:hover { border-color: var(--spot); }
.modebtn .sun { display: none; }
:root[data-theme="dark"] .modebtn .sun { display: inline; }
:root[data-theme="dark"] .modebtn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modebtn .sun { display: inline; }
  :root:not([data-theme="light"]) .modebtn .moon { display: none; }
}
html:not(.js) .modebtn { display: none; }
@media (min-width: 52rem) {
  .paper-foot { grid-template-columns: 1fr auto; align-items: start; }
  .paper-foot .gen { grid-column: 1 / -1; }
}

.flag nav { padding: 4px 4px 6px; }
main > :first-child { margin-top: 18px; }