/* Launch pieces shared by every page: the Privacy and Terms pages, the
   footer links, the email form for phones and the cookie banner. Built from
   the same tokens as styles.css and hybrid.css, so nothing new to learn. */

/* ---------- Who sees what ----------
   "Phone" here means a small screen, or any touch-first device (an iPad
   too), since Nigel needs a desktop browser either way. */

.phone-only { display: none !important; }
@media (max-width: 699px), (hover: none) and (pointer: coarse) {
  .phone-only { display: block !important; }
  .desktop-only { display: none !important; }
  .v-hybrid .note.mobile-only { display: block; }
}

/* ---------- Footer links ---------- */

.footer-links { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2vw, 32px); }
.footer-links a, .footer-links button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.footer-links a:hover, .footer-links a:focus-visible,
.footer-links button:hover, .footer-links button:focus-visible {
  color: var(--ink);
  border-bottom-color: currentColor;
  outline: none;
}

/* ---------- Email me the link (phones) ---------- */

.email-link { margin-top: 28px; max-width: 420px; }
.email-link label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.email-link .field { display: flex; flex-direction: column; gap: 10px; }
.email-link input[type="email"] {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, #fff 55%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: 16px;               /* 16px stops iOS zooming in on focus */
  font-weight: 400;
}
.email-link input[type="email"]:focus { outline: 2px solid var(--fg); outline-offset: 1px; }
.email-link button {
  height: 50px;
  border: 0;
  border-radius: 0;
  background: var(--fg);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.email-link button[disabled] { opacity: .55; cursor: default; }
.email-link .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.email-link .status { margin-top: 12px; font-size: 15px; min-height: 1.6em; }
.email-link.is-sent .field { display: none; }

/* ---------- Cookie banner ---------- */

.consent {
  position: fixed;
  z-index: 50;
  left: clamp(12px, 1.6vw, 24px);
  bottom: clamp(12px, 1.6vw, 24px);
  width: min(380px, calc(100% - 24px));
  padding: 16px 18px 18px;
  background: var(--page);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .35);
  font-size: 14px;
  line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent .consent-label {
  display: block;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.consent p a { border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); }
.consent .consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
/* Accept and Decline are the same size and the same weight, on purpose */
.consent button {
  height: 44px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.consent button:hover, .consent button:focus-visible { background: var(--ink); color: var(--page); outline: none; }

/* ---------- Privacy and Terms pages ---------- */

.legal {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 110px) var(--pad) clamp(60px, 7vw, 120px);
}
.legal-head, .legal-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.legal-head { padding-bottom: clamp(32px, 4vw, 64px); }
.legal-head .kicker {
  grid-column: 1 / 4;
  align-self: start;
  padding-top: .9em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.legal-head h1 {
  grid-column: 4 / 13;
  font-size: clamp(40px, 5vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}
.legal-head .lede {
  grid-column: 4 / 11;
  margin-top: clamp(18px, 1.8vw, 28px);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55;
  max-width: 50ch;
}
.legal-head .updated {
  grid-column: 4 / 13;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.legal-section {
  padding: clamp(22px, 2.4vw, 36px) 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.legal-section:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.legal-section h2 {
  grid-column: 1 / 4;
  display: flex;
  gap: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.legal-section h2 b { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .45; }
.legal-body { grid-column: 4 / 11; max-width: 64ch; }
.legal-body > * + * { margin-top: 14px; }
.legal-body p, .legal-body li { font-size: 17px; line-height: 1.65; }
.legal-body h3 { margin-top: 26px; font-size: 17px; font-weight: 500; }
.legal-body h3 + p { margin-top: 6px; }
.legal-body ul { list-style: none; }
.legal-body ul li { position: relative; padding: 6px 0 6px 22px; }
.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 9px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.legal-body strong { font-weight: 500; }
.legal-body a { color: var(--blue); border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); }
.legal-body a:hover { border-bottom-color: currentColor; }

.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal-table th {
  text-align: left;
  padding: 0 16px 8px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.legal-table td {
  padding: 10px 16px 10px 0;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.legal-table td:first-child { font-weight: 500; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* Things for Sean to check before launch. Loud on purpose, so none slip
   through. Delete each one once it's settled. */
mark.check {
  background: #fff1a8;
  color: #4a3a00;
  padding: .05em .3em;
  font-weight: 500;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 899px) {
  .legal-head .kicker, .legal-head h1, .legal-head .lede, .legal-head .updated,
  .legal-section h2, .legal-body { grid-column: 1 / -1; }
  .legal-head h1 { margin-top: 14px; }
  .legal-section h2 { margin-bottom: 14px; }
}
@media (max-width: 699px) {
  .legal-body p, .legal-body li { font-size: 16px; }
}