/* BACK2BACK17 community pages: the public player profile (/profile/<ref>) and the Discord link pages
   (/link/..., /unlink/...). Loaded after site.css and uses its colours, type and footer. Same rules as
   the rest of the site: a strict CSP (no inline styles), nothing moves, no shadows or blur. Bars are
   <progress> elements, so their length comes from the value, never from a style. */

body.cm, body.lk { display: flex; flex-direction: column; min-height: 100vh; background: var(--black); }
.cm > main, .lk > main { flex: 1 0 auto; }

/* ------------------------------------------------------------------ top bar: the mark, back to / */
.cbar { border-bottom: 1px solid var(--hair); background: var(--pure); }
.cbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--page); margin: 0 auto; padding: 12px 24px; }
.cbar-home { display: flex; align-items: center; gap: 12px; color: var(--chalk); text-decoration: none; }
.cbar-home img { width: 34px; height: 34px; }
.cbar-home span { font: 700 17px/1 var(--display); letter-spacing: .06em; }
.cbar-home:hover span { color: var(--gold); }
.cbar-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.cbar-nav a { color: var(--secondary); font: 600 12.5px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.cbar-nav a:hover { color: var(--gold); }
.cbar-nav a[aria-current="page"] { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ------------------------------------------------------------------ buttons */
.pf-btn, .lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 8px 24px;
  border: 1px solid var(--red);
  border-radius: 2px;
  background: var(--red);
  color: #fff;
  font: 700 19px/1 var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.pf-btn:hover, .lk-btn:hover { border-color: var(--red-hover); background: var(--red-hover); }
.pf-btn:active, .lk-btn:active { border-color: var(--red-pressed); background: var(--red-pressed); }
.pf-btn.ghost, .lk-btn.ghost { border-color: var(--border); background: transparent; color: var(--chalk); }
.pf-btn.ghost:hover, .lk-btn.ghost:hover { border-color: var(--secondary); background: var(--raised); }
.lk-btn svg { width: 26px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }

/* ------------------------------------------------------------------ states: loading, not found, which player, slow down */
.pf { min-height: 60vh; }
.pf:has(> .pf-state) { background: var(--pure); }         /* a state page is one black field down to the footer */
.pf-state { display: flex; flex-direction: column; align-items: center; padding: clamp(56px, 12vh, 120px) 16px; background: var(--pure); text-align: center; }
.pf-state-mark { width: 72px; height: 72px; }
.pf-state-title {
  margin: 22px 0 0;
  font: 700 clamp(36px, 5vw, 52px)/.95 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  transform: skewX(-9deg);
}
.pf-state-text { max-width: 30em; margin: 14px 0 0; color: var(--secondary); overflow-wrap: anywhere; }
.pf-state-actions { margin: 26px 0 0; }
.pf-pick { width: min(480px, 100%); margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.pf-pick li + li { margin-top: 8px; }
.pf-pick a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--red);
  background: var(--surface);
  color: var(--chalk);
  text-decoration: none;
}
.pf-pick a:hover { border-color: var(--border); border-left-color: var(--red-hover); background: var(--raised); }
.pf-pick b { font: 700 20px/1.15 var(--display); font-stretch: condensed; text-transform: uppercase; overflow-wrap: anywhere; }
.pf-pick-meta { align-self: center; color: var(--gold); font: 600 12px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pf-pick-id { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ hero: the MyPLAYER, the name, where they are */
.pf-hero { border-bottom: 1px solid var(--hair); background: var(--pure); }
.pf-hero-inner { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 48px; align-items: end; max-width: var(--page); margin: 0 auto; padding: 36px 24px 0; }
.pf-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 3px solid var(--red);
  background: radial-gradient(ellipse 70% 55% at 50% 72%, #1f1f1f, #0d0d0d 62%, var(--pure));
}
.pf-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: translateY(9%); }
.pf-photo.owl .pf-photo-img { visibility: hidden; }
.pf-photo-owl { position: absolute; top: 50%; left: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); opacity: .9; }
.pf-id { min-width: 0; padding: 0 0 34px; }
.pf-kicker { margin: 0; color: var(--gold); font: 700 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.pf-name {
  margin: 10px 0 0;
  font: 700 clamp(46px, 7vw, 88px)/.9 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transform: skewX(-9deg);
  transform-origin: 0 100%;
}
.pf-status { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--muted); font: 600 13px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pf-dot { width: 9px; height: 9px; flex: none; border: 2px solid var(--muted); border-radius: 50%; }
.pf-status.s-in-game { color: var(--chalk); }
.pf-status.s-in-game .pf-dot { border-color: var(--red); background: var(--red); }
.pf-status.s-online { color: var(--chalk); }
.pf-status.s-online .pf-dot { border-color: var(--chalk); background: var(--chalk); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pf-tag { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--border); background: #0d0d0d; font: 600 12px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pf-tag b { color: var(--chalk); font-weight: 700; }
.pf-tag span { color: var(--red); }
.pf-tag.main { border-color: var(--red); }
.pf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 28px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hair); }
.pf-facts dt { color: var(--muted); font: 600 11px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pf-facts dd { margin: 4px 0 0; color: var(--chalk); font: 700 17px/1.25 var(--display); overflow-wrap: anywhere; }
.pf-facts a { color: var(--chalk); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.pf-facts a:hover { color: var(--gold); }
.pf-handle { color: var(--chalk); }

/* ------------------------------------------------------------------ region tabs (accounts are per region) */
.pf-regions-wrap { border-bottom: 1px solid var(--hair); background: var(--surface); }
.pf-regions-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.pf-regions { display: flex; }
.pf-region {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 700 19px/1 var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  cursor: pointer;
}
.pf-region:hover { color: var(--chalk); }
.pf-region[aria-selected="true"] { border-bottom-color: var(--red); color: var(--chalk); }
.pf-region:focus-visible { outline-offset: -3px; }
.pf-regions-note { margin: 0; padding: 10px 0; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ the region's numbers */
.pf-body { max-width: var(--page); margin: 0 auto; padding: 0 24px clamp(40px, 6vw, 72px); }
.pf-panel:focus { outline: none; }
.pf-sec { padding: 36px 0 0; }
.pf-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 16px; }
.pf-sec-title {
  margin: 0;
  font: 700 clamp(28px, 3.2vw, 38px)/.95 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  transform: skewX(-9deg);
  transform-origin: 0 100%;
}
.pf-sec-hint { margin: 0; color: var(--muted); font: 600 12px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pf-grid { display: grid; gap: 16px; }
.pf-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid + .pf-sec, .pf-sec + .pf-grid, .pf-grid + .pf-grid { margin-top: 16px; }
.pf-sec .pf-sec { padding-top: 0; margin-top: 28px; }
.pf-card { min-width: 0; padding: 20px 22px 22px; border: 1px solid var(--hair); background: var(--surface); }
.pf-label { margin: 0 0 14px; color: var(--gold); font: 700 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.pf-foot { margin: 10px 0 0; color: var(--muted); font: 600 12.5px/1.4 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pf-empty { margin: 0; padding: 22px; border: 1px solid var(--hair); background: var(--surface); color: var(--secondary); font: 700 18px/1.2 var(--display); font-stretch: condensed; text-transform: uppercase; }
.pf-card .pf-empty { padding: 0; border: 0; background: none; }
.pf-body > .pf-empty { margin-top: 36px; }
.pf-notice { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 12px 16px; border: 1px solid var(--hair); border-left: 3px solid var(--gold); background: var(--surface); color: var(--secondary); font-size: 14px; }
.pf-notice .pf-dot { border-color: var(--gold); }
.pf-state .pf-notice { max-width: 30em; margin: 22px auto 0; text-align: left; }

/* bars: <progress>, red by default */
.pf-bar { display: block; width: 100%; height: 8px; margin: 14px 0 0; border: 0; border-radius: 0; background: var(--raised); color: var(--red); -webkit-appearance: none; appearance: none; }
.pf-bar::-webkit-progress-bar { background: var(--raised); }
.pf-bar::-webkit-progress-value { background: var(--red); }
.pf-bar::-moz-progress-bar { background: var(--red); }
.pf-bar.gold { color: var(--gold); }
.pf-bar.gold::-webkit-progress-value { background: var(--gold); }
.pf-bar.gold::-moz-progress-bar { background: var(--gold); }
.pf-bar.chalk::-webkit-progress-value { background: var(--secondary); }
.pf-bar.chalk::-moz-progress-bar { background: var(--secondary); }

/* rep */
.pf-rep-row { display: flex; align-items: center; gap: 18px; }
.pf-emblem { width: 60px; height: 68px; flex: none; }
.pf-emblem-back { fill: var(--tier); }
.pf-emblem-line { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 2; }
.pf-emblem-text { fill: var(--tier-ink); font: 700 30px var(--headline); font-stretch: condensed; }
.pf-emblem.t-rookie { --tier: #8a5f3d; --tier-ink: #f7f7f7; }
.pf-emblem.t-pro { --tier: #a9afb6; --tier-ink: #0b0b0b; }
.pf-emblem.t-all-star { --tier: #b4945c; --tier-ink: #0b0b0b; }
.pf-emblem.t-superstar { --tier: #f2101a; --tier-ink: #f7f7f7; }
.pf-emblem.t-legend { --tier: #f7f7f7; --tier-ink: #f2101a; }
.pf-rep-text { min-width: 0; }
.pf-rep-level { margin: 0; font: 700 40px/.95 var(--headline); font-stretch: condensed; text-transform: uppercase; transform: skewX(-9deg); transform-origin: 0 100%; }
.pf-rep-total { margin: 8px 0 0; color: var(--secondary); font: 600 13px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pf-rep-total b { color: var(--chalk); }
.pf-rep { display: flex; flex-direction: column; }
/* 24 Oct: the Park rank card (owl emblem art /site/img/ranks/, the same as the leaderboard) */
.pf-rank { margin-bottom: 16px; }
.pf-rank-row { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.pf-rank-emblem { width: 112px; height: 112px; max-width: none; flex: none; object-fit: contain; aspect-ratio: 1; }
.pf-rank-emblem.faint { opacity: .45; }
.pf-rank-text { min-width: 0; }
.pf-rank-name { margin: 0; font: 700 44px/.95 var(--headline); font-stretch: condensed; text-transform: uppercase; transform: skewX(-9deg); transform-origin: 0 100%; }
.pf-rank-flame { margin: 8px 0 0; color: var(--red); font: 700 13px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.pf-rank-sub { margin: 8px 0 0; color: var(--secondary); font: 600 13px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pf-rank-sub b { color: var(--chalk); font-size: 18px; letter-spacing: 0; }
.pf-rank-link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.pf-rep .pf-bar { margin-top: auto; }
.pf-rep-row { margin-bottom: 22px; }

/* record */
.pf-wl { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 700 64px/.9 var(--headline); font-stretch: condensed; }
.pf-wl .l { color: var(--secondary); }
.pf-wl .dash { color: var(--red); }
.pf-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.pf-mini dt { color: var(--muted); font: 600 11px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pf-mini dd { margin: 4px 0 0; font: 700 24px/1.05 var(--display); font-stretch: condensed; }
.pf-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair); }
.pf-form-label { margin: 0; color: var(--muted); font: 600 11px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pf-chips li { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); color: var(--muted); font: 700 13px/1 var(--display); }
.pf-chips li.win { border-color: var(--red); background: var(--red); color: #fff; }

/* per game: a scoreboard strip like the home page */
.pf-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 0; border: 1px solid var(--hair); background: var(--surface); }
.pf-board-cell { padding: 16px 20px 18px; border-right: 1px solid var(--hair); }
.pf-board-cell:last-child { border-right: 0; }
.pf-board dt { color: var(--gold); font: 700 12px/1.3 var(--display); letter-spacing: .14em; }
.pf-board dd { margin: 6px 0 0; font: 700 44px/.95 var(--headline); font-stretch: condensed; }
.pf-high { display: block; margin-top: 8px; color: var(--chalk); font: 700 13px/1.2 var(--display); font-stretch: normal; letter-spacing: .06em; }
.pf-high span { color: var(--muted); font-weight: 600; text-transform: uppercase; }

/* shooting */
.pf-shot + .pf-shot { margin-top: 18px; }
.pf-shot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.pf-shot-head b { color: var(--chalk); }
.pf-shot-pct { color: var(--chalk); font: 700 26px/1 var(--display); font-stretch: condensed; letter-spacing: 0; }
.pf-shot .pf-bar { margin-top: 8px; }
.pf-shot .pf-foot { margin-top: 6px; }
.pf-stack { display: grid; gap: 16px; align-content: stretch; }
.pf-big { margin: 0; font: 700 34px/1 var(--headline); font-stretch: condensed; text-transform: uppercase; overflow-wrap: anywhere; }
.pf-big a { color: var(--chalk); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pf-big a:hover { color: var(--gold); }

/* builds */
.pf-builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pf-build { min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--hair); border-top: 3px solid var(--border); background: var(--surface); }
.pf-build.active { border-top-color: var(--red); }
.pf-build-top { display: flex; align-items: flex-start; gap: 16px; }
.pf-ovr { display: flex; flex-direction: column; align-items: center; margin: 0; min-width: 62px; padding: 6px 8px 8px; border: 1px solid var(--border); background: var(--pure); }
.pf-ovr b { font: 700 46px/.95 var(--headline); font-stretch: condensed; }
.pf-ovr span { margin-top: 2px; color: var(--gold); font: 700 11px/1 var(--display); letter-spacing: .14em; }
.pf-build-id { min-width: 0; flex: 1; padding-top: 4px; }
.pf-build-pos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font: 700 28px/1 var(--headline); font-stretch: condensed; text-transform: uppercase; }
.pf-build-pos span { color: var(--muted); font: 600 12px/1.2 var(--display); letter-spacing: .08em; }
.pf-build-arch { margin: 6px 0 0; color: var(--secondary); font: 600 15px/1.25 var(--display); }
.pf-active { margin: 2px 0 0; padding: 4px 8px; background: var(--red); color: #fff; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pf-build-body { margin: 14px 0 0; color: var(--chalk); font: 700 16px/1.2 var(--display); letter-spacing: .04em; }
.pf-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 14px 0 0; padding: 0; border: 1px solid var(--hair); background: var(--hair); list-style: none; }
.pf-badges li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; background: var(--black); text-align: center; }
.pf-badges b { font: 700 22px/1 var(--display); font-stretch: condensed; }
.pf-badges li > span:last-child { color: var(--muted); font: 600 10.5px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pf-medal { width: 10px; height: 10px; border-radius: 50%; background: var(--medal); }
.b-bronze, .t-bronze { --medal: #a8703f; }
.b-silver, .t-silver { --medal: #b9c0c8; }
.b-gold, .t-gold { --medal: #d1a94f; }
.b-hof, .t-hof { --medal: #f2101a; }
.t-has { --medal: var(--border); }
.pf-upgrades { margin: 16px 0 0; }
.pf-upgrades .pf-bar { margin-top: 8px; }
.pf-upgrades .pf-shot-head span { color: var(--chalk); }
.pf-more { margin: 14px 0 0; border-top: 1px solid var(--hair); }
.pf-more summary { padding: 12px 0 0; color: var(--gold); font: 700 12px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.pf-more summary:hover { color: var(--chalk); }
.pf-badge-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.pf-badge-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 0 6px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.pf-badge-list li span { color: var(--chalk); overflow-wrap: anywhere; }
.pf-badge-list li b { flex: none; color: var(--medal); font: 700 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pf-badge-list li.t-has b { color: var(--muted); }

/* recent games */
.pf-table-wrap { overflow-x: auto; border: 1px solid var(--hair); background: var(--surface); }
.pf-table { width: 100%; border-collapse: collapse; font: 600 14px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.pf-table th { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--muted); font: 600 11px/1.2 var(--display); letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.pf-table td { padding: 12px 14px; border-bottom: 1px solid var(--hair); color: var(--secondary); white-space: nowrap; }
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table .n { text-align: right; }
.pf-table td.n { color: var(--chalk); }
.pf-table td.rep { color: var(--gold); }
.pf-result { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border); color: var(--muted); font: 700 12px/1 var(--display); }
.pf-result.win { border-color: var(--red); background: var(--red); color: #fff; }

/* ------------------------------------------------------------------ Discord link pages (rendered by the server) */
.lk-main { padding: clamp(32px, 7vh, 72px) 16px clamp(48px, 8vh, 88px); }
.lk-card { width: min(560px, 100%); margin: 0 auto; padding: 30px 30px 28px; border: 1px solid var(--border); border-top: 3px solid var(--red); background: var(--surface); }
.lk-kicker { margin: 0; color: var(--gold); font: 700 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.lk-title { margin: 12px 0 0; font: 700 clamp(30px, 4.4vw, 40px)/1 var(--headline); font-stretch: condensed; text-transform: uppercase; overflow-wrap: anywhere; }
.lk-handle { color: var(--red); }
.lk-card p { margin: 14px 0 0; color: var(--secondary); }
.lk-card .lk-kicker { margin: 0; color: var(--gold); }
.lk-who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 20px 0 0; border-top: 1px solid var(--hair); }
.lk-who dt, .lk-who dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.lk-who dt { padding-right: 20px; color: var(--muted); font: 600 11px/1.9 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.lk-who dd { color: var(--chalk); font: 700 16px/1.4 var(--display); overflow-wrap: anywhere; }
.lk-card .lk-warn { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--hair); border-left: 3px solid var(--red); background: var(--raised); color: var(--chalk); }
.lk-card .lk-warn:empty { display: none; }
.lk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.lk-actions form { margin: 0; }
.lk-actions .lk-btn { width: 100%; }
.lk-actions.stack { flex-direction: column; }
.lk-actions.pair form { flex: 1 1 200px; }
.lk-card .lk-note { margin-top: 18px; color: var(--muted); font-size: 13px; }
.lk-card a { color: var(--chalk); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.lk-card a.lk-btn { text-decoration: none; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 860px) {
  .pf-hero-inner { grid-template-columns: 220px minmax(0, 1fr); gap: 0 28px; }
  .pf-grid.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cbar-inner { padding: 10px 16px; }
  .pf-hero-inner { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .pf-photo { width: min(240px, 66vw); margin: 0 auto; aspect-ratio: 1 / 1; }
  .pf-photo-img { transform: translateY(6%) scale(1.06); transform-origin: 50% 0; }
  .pf-id { padding: 22px 0 26px; }
  .pf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .pf-regions-inner { padding: 0 16px; }
  .pf-region { flex: 1; padding: 0 14px; }
  .pf-regions { flex: 1 1 100%; }
  .pf-regions-note { padding-top: 0; }
  .pf-body { padding-right: 16px; padding-left: 16px; }
  .pf-card { padding: 18px 16px 20px; }
  .pf-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-board-cell { padding: 14px 14px 16px; border-bottom: 1px solid var(--hair); }
  .pf-board-cell:nth-child(3n) { border-right: 0; }
  .pf-board-cell:nth-last-child(-n+3) { border-bottom: 0; }
  .pf-board dd { font-size: 36px; }
  .pf-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-builds { grid-template-columns: minmax(0, 1fr); }
  .pf-build { padding: 16px 16px 18px; }
  .pf-table th, .pf-table td { padding: 10px 10px; }
  .lk-card { padding: 24px 18px 22px; }
}

.lk-step { display: block; width: 100%; max-width: 402px; height: auto; margin: 18px 0 4px; border: 2px solid #e2231a; border-radius: 6px; }