/* smartlocksuk.com — redesign of 2026-10-17 ("Direction B: Bold"), chosen
   by the owner from three mockups. A modern magazine: heavy condensed
   headlines, black and white, one magenta accent, serif for long reading.

   Shares no class values, fonts or colours with smartlockpro.css or
   installer.css. All three files define some of the same class names
   (.page, .btn, .prose) with different values on purpose, so a page must
   never load two of them. */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/bigshoulders-800.2f9aec33f07c.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/bigshoulders-900.9ec6b61a9765.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans-400.60715978fab2.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans-600.6b1fe1f62892.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/publicsans-700.3c0eda7c2982.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/sourceserif-400.95bbd98f2b3c.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/sourceserif-400i.fa10869cc45e.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/sourceserif-600.beb0c8d8bee8.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #0b0b0c;
  --ink-2: #34343a;
  --mute: #6a6a73; /* 5.3:1 on white */
  --line: #e4e4e8;
  --paper: #ffffff;
  --hot: #d6006a; /* 4.9:1 on white, so usable for text as well as fills */
  --hot-soft: #ffe6f1;
  --good: #0a7a45;
  --page: 1320px;
  --read: 720px;
  --disp: "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif", Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  overflow-wrap: break-word;
}
a {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 28px;
}
.disp {
  font-family: var(--disp);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.005em;
}
:focus-visible {
  outline: 3px solid var(--hot);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* kicker: the small magenta section label with a square */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 700 12.5px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hot);
  text-decoration: none;
}
.kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--hot);
  flex: none;
}
.meta,
.by {
  font: 600 12.5px/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mute);
}

/* ---- masthead ---------------------------------------------------------- */
.mast {
  border-bottom: 3px solid var(--ink);
  background: #fff;
  position: relative;
  z-index: 20;
}
.mast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 78px;
}
.word {
  font: 900 40px/1 var(--disp);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.word b {
  color: var(--hot);
  font-weight: 900;
}
.links {
  display: flex;
  gap: 28px;
  font: 700 13.5px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.links a {
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 3px solid transparent;
}
.links a:hover,
.links a[aria-current="page"] {
  border-bottom-color: var(--hot);
}
/* Mobile menu with no JavaScript: a <details> disclosure. This site loads
   no framework at all, and a menu is not a reason to start. */
.menu {
  display: none;
  position: relative;
}
.menu summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu[open] summary {
  background: var(--ink);
  color: #fff;
}
.menu nav {
  position: absolute;
  right: 0;
  top: 54px;
  width: min(300px, calc(100vw - 32px));
  background: #fff;
  border: 3px solid var(--ink);
  display: grid;
  padding: 8px 0;
  box-shadow: 8px 8px 0 var(--hot);
}
.menu nav a {
  padding: 12px 18px;
  font: 700 15px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.menu nav a:hover {
  background: var(--hot-soft);
}

.ticker {
  background: var(--ink);
  color: #fff;
  font: 600 13.5px/1 var(--sans);
}
.ticker .page {
  display: flex;
  gap: 26px;
  height: 42px;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.ticker b {
  color: var(--hot);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
}
.ticker a {
  text-decoration: none;
}
.ticker a:hover {
  text-decoration: underline;
}
.ticker span {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.ticker span {
  min-width: 0;
}
.ticker a {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- home: lead -------------------------------------------------------- */
.lead {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  margin-top: 40px;
  align-items: stretch;
}
.lead-txt {
  padding: 6px 44px 6px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.lead-title {
  font: 900 clamp(48px, 7.4vw, 108px) / 0.9 var(--disp);
  text-transform: uppercase;
  margin: 16px 0 18px;
  text-wrap: balance;
}
.lead-title a {
  text-decoration: none;
}
.lead-title a:hover {
  color: var(--hot);
}
.lead-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 46ch;
}
.lead .by {
  margin-top: 18px;
}
.lead-ph {
  position: relative;
  min-height: 520px;
  background: #eee;
  display: block;
}
.lead-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lead-ph::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -16px;
  width: 110px;
  height: 110px;
  background: var(--hot);
  z-index: 1;
}
.home-intro {
  margin: 34px 0 0;
  max-width: 70ch;
  color: var(--ink-2);
  font-size: 17px;
}
.home-intro p {
  margin: 0;
}

/* ---- section heads & story grid --------------------------------------- */
.sect-ttl {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  border-top: 3px solid var(--ink);
  padding-top: 12px;
  margin: 64px 0 26px;
}
.sect-ttl h2 {
  font: 900 56px/0.9 var(--disp);
  text-transform: uppercase;
  margin: 0;
}
.sect-ttl a {
  font: 800 12.5px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}
.sect-ttl a:hover {
  color: var(--hot);
}
.stories {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}
.story {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-column: span 4;
}
.story.big {
  grid-column: span 6;
}
.story.mid {
  grid-column: span 3;
}
.story-ph {
  overflow: hidden;
  background: #eee;
}
.story-ph img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s;
}
.story.big .story-ph img {
  aspect-ratio: 16 / 10;
}
.story:hover .story-ph img {
  transform: scale(1.04);
}
.story .kicker {
  margin-top: 16px;
}
.story h3 {
  font: 800 30px/0.95 var(--disp);
  text-transform: uppercase;
  margin: 10px 0 8px;
  text-wrap: balance;
}
.story.big h3 {
  font-size: 46px;
}
.story:hover h3 {
  color: var(--hot);
}
.story p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}
.story .by {
  margin-top: 10px;
}

/* ---- ask an installer -------------------------------------------------- */
.ask {
  background: var(--hot-soft);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  margin-top: 64px;
}
.ask h2 {
  font: 900 66px/0.9 var(--disp);
  text-transform: uppercase;
  margin: 0;
}
.ask h2 span {
  color: var(--hot);
}
.ask p {
  margin: 12px 0 0;
  color: var(--ink-2);
}
.qs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}
.qs a {
  background: #fff;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 2px solid transparent;
}
.qs a:hover {
  border-color: var(--ink);
}
.qs a::after {
  content: "→";
  color: var(--hot);
  font-size: 22px;
}

/* ---- the names on the box --------------------------------------------- */
.brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 3px solid var(--ink);
}
.brand {
  padding: 24px;
  border-right: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand:last-child {
  border-right: 0;
}
.brand h3 {
  font: 900 40px/0.9 var(--disp);
  text-transform: uppercase;
  margin: 0;
}
.brand .is {
  font: 700 12px/1.2 var(--sans);
  color: var(--hot);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.brand p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
}
.brand p b {
  color: var(--ink);
}
.brand a {
  margin-top: auto;
  font: 800 12.5px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding-top: 6px;
}
.brand a:hover {
  color: var(--hot);
}

/* ---- river ------------------------------------------------------------ */
.river {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
}
.row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.row img {
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.row h4 {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.25;
}
.row:hover h4 {
  color: var(--hot);
}

/* ---- section index page ------------------------------------------------ */
.sect-head {
  padding: 54px 0 0;
}
.sect-head h1 {
  font: 900 clamp(64px, 11vw, 150px) / 0.85 var(--disp);
  text-transform: uppercase;
  margin: 14px 0 18px;
}
.sect-head .standfirst,
.sect-head .standfirst p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0;
}
.sect-head + .sect-ttl {
  margin-top: 44px;
}

/* ---- article ---------------------------------------------------------- */
.art-hero {
  background: linear-gradient(
    var(--ink) calc(100% - 170px),
    #fff calc(100% - 170px)
  );
  color: #fff;
  margin-bottom: 44px;
}
.art-hero.no-image {
  background: var(--ink);
  padding-bottom: 50px;
}
.art-hero .in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 28px 0;
}
.art-hero .crumb {
  font: 600 13px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 18px;
}
.art-hero .crumb a {
  color: #fff;
  text-decoration: none;
}
.art-hero .crumb a:hover {
  color: var(--hot);
}
.art-hero h1 {
  font: 900 clamp(48px, 7.6vw, 108px) / 0.9 var(--disp);
  text-transform: uppercase;
  margin: 16px 0 20px;
  text-wrap: balance;
}
.art-hero .dek {
  font-size: 21px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
  max-width: 50ch;
  margin: 0;
}
.art-hero .by {
  color: rgba(255, 255, 255, 0.62);
  margin: 22px 0 0;
  padding-bottom: 40px;
}
.art-hero .by span + span::before {
  content: "·";
  margin: 0 8px;
}
.art-lead {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}
.art-lead img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.art-lead figcaption {
  color: var(--mute);
  font-size: 13px;
  margin-top: 8px;
}
.art {
  max-width: var(--read);
  margin: 0 auto;
  padding: 0 28px 20px;
}

.article-body {
  font: 400 19.5px/1.72 var(--serif);
  color: #1f1f23;
}
.article-body > p,
.article-body p {
  margin: 0 0 22px;
}
.article-body a {
  color: var(--hot);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body h2 {
  font: 900 44px/0.95 var(--disp);
  text-transform: uppercase;
  color: var(--ink);
  margin: 50px 0 16px;
  text-wrap: balance;
}
.article-body h3 {
  font: 700 21px/1.3 var(--sans);
  margin: 32px 0 10px;
  color: var(--ink);
}
.article-body ul,
.article-body ol {
  margin: 0 0 22px;
  padding-left: 1.2em;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body strong,
.article-body b {
  font-weight: 600;
  color: var(--ink);
}
.article-standfirst {
  font: 400 22px/1.5 var(--sans);
  color: var(--ink-2);
  margin: 0 0 28px;
}
.article-standfirst p {
  margin: 0;
}

.keypoints {
  border: 3px solid var(--ink);
  padding: 26px 24px 20px;
  margin: 6px 0 36px;
  position: relative;
  font-family: var(--sans);
}
.keypoints h2 {
  position: absolute;
  top: -15px;
  left: 18px;
  margin: 0;
  background: var(--hot);
  color: #fff;
  font: 900 22px/1.2 var(--disp);
  text-transform: uppercase;
  padding: 2px 10px;
}
.keypoints ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  font-size: 16px;
  line-height: 1.55;
}
.keypoints li {
  margin: 0;
}

.pullquote {
  margin: 40px -60px;
  padding: 0 0 0 26px;
  border-left: 10px solid var(--hot);
}
.pullquote p {
  font: 900 44px/0.98 var(--disp);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.pullquote cite {
  display: block;
  margin-top: 12px;
  font: 600 13px/1.3 var(--sans);
  font-style: normal;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-figure {
  margin: 36px 0;
}
.article-figure img {
  width: 100%;
}
.article-figure figcaption {
  font: 400 14px/1.5 var(--sans);
  color: var(--mute);
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.article-figure .credit {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.spectable {
  margin: 44px 0;
  border-top: 3px solid var(--ink);
  font-family: var(--sans);
}
.spectable h2 {
  font: 900 34px/1 var(--disp);
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.spectable-scroll {
  overflow-x: auto;
}
.spectable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.5;
}
.spectable th,
.spectable td {
  text-align: left;
  vertical-align: top;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.spectable th {
  width: 210px;
  padding-right: 16px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
  font-weight: 700;
  padding-top: 15px;
}

.verdict {
  background: var(--hot-soft);
  padding: 30px;
  margin: 44px 0;
  font-family: var(--sans);
}
.verdict .verdict-head {
  font: 900 54px/0.9 var(--disp);
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
}
.verdict-body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}
.verdict-body p {
  margin: 0 0 14px;
}
.verdict-best {
  background: #fff;
  padding: 14px 16px;
  border-left: 6px solid var(--hot);
  font-size: 15.5px;
}
.verdict-best b {
  display: block;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.verdict-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.verdict-cols > div {
  background: #fff;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.5;
}
.verdict .verdict-cols h3 {
  margin: 0 0 8px;
  font: 700 12.5px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.verdict-good h3 {
  color: var(--good);
}
.verdict-bad h3 {
  color: var(--hot);
}
.verdict-cols ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.disclosure {
  font: 400 15px/1.55 var(--sans);
  background: #f4f4f6;
  border-left: 6px solid var(--ink);
  padding: 14px 18px;
  margin: 0 0 28px;
  color: var(--ink-2);
}
.howwerate {
  font: 400 15.5px/1.6 var(--sans);
  color: var(--ink-2);
  border-top: 3px solid var(--ink);
  padding-top: 14px;
  margin: 44px 0 0;
}
.howwerate b {
  display: block;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.next {
  max-width: var(--page);
  margin: 70px auto 0;
  padding: 0 28px;
}

/* ---- standard pages, legal pages, contact ----------------------------- */
.std-head {
  border-bottom: 3px solid var(--ink);
  padding: 54px 0 30px;
  margin-bottom: 40px;
}
.std-head h1 {
  font: 900 clamp(56px, 9vw, 120px) / 0.88 var(--disp);
  text-transform: uppercase;
  margin: 0 0 16px;
  text-wrap: balance;
}
.std-head .standfirst,
.std-head .standfirst p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0;
}
.prose {
  max-width: var(--read);
  margin: 0 auto;
  font: 400 18px/1.7 var(--serif);
  padding: 50px 0 10px;
}
.prose h1 {
  font: 900 clamp(52px, 8vw, 96px) / 0.9 var(--disp);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.prose h2 {
  font: 900 36px/0.95 var(--disp);
  text-transform: uppercase;
  margin: 40px 0 12px;
}
.prose .meta {
  margin-bottom: 24px;
}
.prose a {
  color: var(--hot);
}
.prose ul {
  padding-left: 1.2em;
}
.prose li {
  margin-bottom: 8px;
}

form .field {
  margin: 0 0 18px;
  font-family: var(--sans);
}
form label {
  display: block;
  font: 700 13px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 7px;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
  width: 100%;
  font: 400 17px/1.5 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 12px 14px;
}
form textarea {
  min-height: 160px;
  resize: vertical;
}
form input:focus,
form textarea:focus {
  outline: 0;
  border-color: var(--hot);
  box-shadow: 4px 4px 0 var(--hot);
}
.errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  color: var(--hot);
  font: 600 14px/1.4 var(--sans);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 0;
  font: 800 14px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 16px 22px;
  text-decoration: none;
}
.btn:hover {
  background: var(--hot);
  border-color: var(--hot);
}
.btn-outline {
  background: #fff;
  color: var(--ink);
}
.btn-outline:hover {
  color: #fff;
}
.btn-block {
  width: 100%;
}
.form-success {
  border: 3px solid var(--ink);
  padding: 26px;
  box-shadow: 8px 8px 0 var(--hot);
  margin-bottom: 26px;
  font-family: var(--sans);
}
.form-success h1 {
  font: 900 44px/0.95 var(--disp);
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* ---- footer ----------------------------------------------------------- */
.std-band {
  margin-top: 80px;
  background: var(--ink);
  color: #fff;
}
.std-band .page {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 28px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.std-band h2 {
  font: 900 58px/0.9 var(--disp);
  text-transform: uppercase;
  margin: 0;
}
.std-band h2 span {
  color: var(--hot);
}
.std-band b {
  font-size: 18px;
  display: block;
}
.std-band p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
}
.foot {
  padding: 40px 0 56px;
  font-size: 14.5px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 28px;
}
.foot .word {
  font-size: 30px;
}
.foot-about {
  color: var(--ink-2);
  max-width: 46ch;
  margin: 12px 0 0;
}
.foot-label {
  font: 800 12.5px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 6px 0 12px;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.foot ul a {
  text-decoration: none;
}
.foot ul a:hover {
  color: var(--hot);
}
.foot-note {
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 13px;
  line-height: 1.55;
}

/* ---- cookie banner ---------------------------------------------------- */
.cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 560px;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--hot);
  padding: 18px 20px;
  font-size: 15px;
}
.cookie p {
  margin: 0 0 14px;
}
.cookie .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie .btn {
  padding: 13px 16px;
}
.hidden {
  display: none !important;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
  .links {
    display: none;
  }
  .menu {
    display: block;
  }
  .lead {
    grid-template-columns: 1fr;
  }
  .lead-txt {
    padding: 0 0 28px;
  }
  .lead-ph {
    min-height: 420px;
  }
  .story.big {
    grid-column: 1 / -1;
  }
  .story.mid,
  .story {
    grid-column: span 6;
  }
  .ask {
    grid-template-columns: 1fr;
  }
  .brands {
    grid-template-columns: 1fr 1fr;
  }
  .brand:nth-child(2n) {
    border-right: 0;
  }
  .brand:nth-child(-n + 2) {
    border-bottom: 3px solid var(--ink);
  }
  .river {
    grid-template-columns: 1fr 1fr;
  }
  .std-band .page {
    grid-template-columns: 1fr 1fr;
  }
  .pullquote {
    margin: 34px 0;
  }
}
@media (max-width: 640px) {
  .page,
  .art-hero .in,
  .art-lead,
  .art,
  .next {
    padding-left: 16px;
    padding-right: 16px;
  }
  .mast-row {
    height: 64px;
  }
  .word {
    font-size: 30px;
  }
  .ticker .page {
    gap: 16px;
  }
  .ticker .more {
    display: none;
  }
  .lead {
    margin-top: 24px;
  }
  .lead-sub {
    font-size: 17px;
  }
  .lead-ph {
    min-height: 300px;
  }
  .lead-ph::before {
    width: 64px;
    height: 64px;
    left: -8px;
    top: -8px;
  }
  .sect-ttl {
    margin: 46px 0 20px;
  }
  .sect-ttl h2 {
    font-size: 40px;
  }
  /* One column on phones. Twelve columns with 28px gaps need 308px of gaps
     alone, which is wider than a 320px screen's content box. */
  .stories {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* Bigger tap targets: these were 13-19px tall, under the ~44px a thumb
     needs. Padding grows the hit area without changing the look. */
  .foot ul {
    gap: 0;
  }
  .foot ul a,
  .sect-ttl a,
  .brand a {
    display: inline-block;
    padding: 12px 0;
  }
  .story,
  .story.mid {
    grid-column: 1 / -1;
  }
  .story.big h3 {
    font-size: 38px;
  }
  .ask {
    padding: 26px 18px;
    margin-top: 46px;
  }
  .ask h2 {
    font-size: 48px;
  }
  .qs {
    grid-template-columns: 1fr;
  }
  .brands {
    grid-template-columns: 1fr;
  }
  .brand {
    border-right: 0 !important;
    border-bottom: 3px solid var(--ink);
  }
  .brand:last-child {
    border-bottom: 0;
  }
  .river {
    grid-template-columns: 1fr;
  }
  .art-hero {
    background: linear-gradient(
      var(--ink) calc(100% - 90px),
      #fff calc(100% - 90px)
    );
    margin-bottom: 32px;
  }
  .art-hero .in {
    padding-top: 32px;
  }
  .art-hero .dek {
    font-size: 18px;
  }
  .art-lead img {
    aspect-ratio: 4 / 3;
  }
  .article-body {
    font-size: 18px;
  }
  .article-body h2 {
    font-size: 36px;
  }
  .article-standfirst {
    font-size: 19px;
  }
  .pullquote p {
    font-size: 32px;
  }
  .pullquote {
    border-left-width: 7px;
    padding-left: 18px;
  }
  .spectable th {
    width: auto;
    display: block;
    padding-bottom: 0;
    border-top: 1px solid var(--line);
  }
  .spectable td {
    display: block;
    border-top: 0;
    padding-top: 4px;
  }
  .spectable tr {
    display: block;
  }
  .verdict {
    padding: 22px 18px;
  }
  .verdict .verdict-head {
    font-size: 44px;
  }
  .verdict-cols {
    grid-template-columns: 1fr;
  }
  .sect-head,
  .std-head {
    padding-top: 34px;
  }
  .std-band .page {
    grid-template-columns: 1fr;
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .std-band h2 {
    font-size: 44px;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot-grid > :first-child {
    grid-column: 1 / -1;
  }
  .prose {
    padding-top: 34px;
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}