/* The masthead: the live-type wordmark beside the social circles, then the rule-bound nav row
   with the search pill. Values from the live stylesheet. */
.site-header { position: relative; padding-top: var(--space-4); }

/* The faint warm glow centred behind the wordmark: the live site's only wash at the top of a
   page, on the masthead and not the page. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 400px;
  pointer-events: none;
  background: radial-gradient(
    ellipse var(--radial-warm-size) at
      calc(max(0px, (100% - var(--col-wide)) / 2) + var(--gutter) + 0.9 * var(--masthead-size))
      calc(var(--space-4) + 0.4 * var(--masthead-size)),
    rgb(var(--radial-warm) / 0.14),
    rgb(var(--radial-warm) / 0.047) 40%,
    rgb(var(--radial-warm) / 0) 100%
  );
}
.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-4);
}

/* The wordmark: "pique" and its blue period in the bold sans, then the edition word. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink-1);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: inherit; }
.wordmark-name,
.wordmark-period { font: 700 1.625rem / 1 var(--font-sans); letter-spacing: -0.01em; color: var(--ink-1); }
.wordmark-period { color: var(--blue); }
.wordmark-edition { font: 500 1.25rem / 1 var(--font-mono); letter-spacing: 0.02em; color: var(--blue-deep); }
.site-header .wordmark { display: flex; width: fit-content; }
.site-header .wordmark-name,
.site-header .wordmark-period { font-size: var(--masthead-size); line-height: 0.86; letter-spacing: -0.085em; }
.site-header .wordmark-period { color: var(--blue); }
.site-header .wordmark-edition {
  margin-left: var(--space-5);
  font: 500 1rem / 1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink-2);
}

/* The masthead's utility area: the social circles, then the App Store badge after a rule. */
.masthead-utility { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-5); }

/* Social circles: each platform's Simple Icons mark, masked in the text colour. */
.masthead-social { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
.social-profile {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-1);
  background: var(--paper-0);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.social-profile:hover { color: var(--blue-deep); background: var(--wash-blue); }
.social-icon { display: block; width: 1.125rem; height: 1.125rem; background: currentColor; }
.social-icon--tiktok { -webkit-mask: url("tiktok.svg") center / contain no-repeat; mask: url("tiktok.svg") center / contain no-repeat; }
.social-icon--youtube { -webkit-mask: url("youtube.svg") center / contain no-repeat; mask: url("youtube.svg") center / contain no-repeat; }
.social-icon--instagram { -webkit-mask: url("instagram.svg") center / contain no-repeat; mask: url("instagram.svg") center / contain no-repeat; }
.social-icon--facebook { -webkit-mask: url("facebook.svg") center / contain no-repeat; mask: url("facebook.svg") center / contain no-repeat; }
.social-icon--x { -webkit-mask: url("x.svg") center / contain no-repeat; mask: url("x.svg") center / contain no-repeat; }

/* The nav row: 2px over and 1px under, the sections, then the search pill. */
.site-navigation-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 62px;
  border-top: 2px solid var(--ink-1);
  border-bottom: 1px solid var(--ink-1);
}
.site-nav { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-6); min-width: 0; }
.site-nav-link {
  padding: var(--space-3) 0;
  font: 600 0.9375rem / 1 var(--font-sans);
  color: var(--ink-1);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav-link:hover,
.site-nav-link[aria-current="page"] { color: var(--blue-deep); }
.site-nav-link[aria-current="page"] { box-shadow: inset 0 -3px var(--blue-deep); }
.site-nav-dot { color: var(--blue); }
.site-search {
  display: flex;
  flex: 0 0 280px;
  align-items: center;
  width: 280px;
  height: 42px;
  margin: 8px 0 8px auto;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: #ffffffb3;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.site-search:hover { border-color: var(--ink-2); }
.site-search:focus-within {
  border-color: var(--blue-deep);
  outline: 2px solid var(--blue-deep);
  outline-offset: 2px;
  background: #fff;
}
.site-search-submit {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.site-search-submit:hover { color: var(--blue-deep); }
.site-search-submit svg { width: 19px; height: 19px; }
.site-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-1);
  font: 400 14px / 1.4 var(--font-sans);
}
.site-search input::placeholder { color: var(--ink-2); opacity: 1; }
.site-search kbd {
  flex: 0 0 21px;
  width: 21px;
  margin: 0 13px 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-2);
  font: 12px / 21px var(--font-mono);
  text-align: center;
}
.site-search:focus-within kbd { display: none; }
.site-search:focus-within input { margin-right: 15px; }

/* The footer as the live site's .site-footer: a 1px ink rule over the cobalt band, the lockup and
   blurb taking the free width, the Read, Pique and Follow columns at their own widths on the right,
   then the legal line in mono under the field rule. */
.footer {
  border-top: 1px solid var(--ink-1);
  background: var(--editorial-field);
  color: var(--field-ink);
}
.footer a { text-decoration: none; }
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-block: var(--space-8);
}
.footer-grid > :first-child { flex: 1 1 260px; }
.footer .wordmark-name,
.footer .wordmark-period { font-size: 4.5rem; letter-spacing: -0.075em; color: var(--field-ink); }
.footer .wordmark-edition { margin-left: var(--space-3); font: var(--text-ui-sm); color: var(--field-dim); }
.footer-grid p { max-width: 28rem; margin: var(--space-4) 0 0; font: var(--text-ui); color: var(--field-dim); }
.footer h2 {
  margin: 0 0 var(--space-3);
  font: var(--text-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--field-dim);
}
.footer ul { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.footer-grid li { font: var(--text-ui-sm); }
.footer-grid li a { display: block; padding-bottom: 2px; color: var(--field-ink); }
.footer :focus-visible { outline-color: var(--field-ink); }
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5) 32px;
  border-top: 1px solid var(--field-rule);
  font: var(--text-mono);
  color: var(--field-dim);
}
.legal p { margin: 0; }
.legal nav { display: flex; gap: var(--space-5); }
.legal a { color: var(--field-dim); transition: color var(--dur-fast) var(--ease-out); }
.legal a:hover,
.legal a:focus-visible { color: var(--field-ink); }

/* Apple's badge, unmodified, at its 40px artwork height with a 44px target. The masthead's sits
   after a rule beside the social circles and goes at the narrow masthead, where Safari's own banner
   would stack above it; the footer's stays on every width, under the brand promise. */
.app-badge { display: inline-flex; flex: none; align-items: center; min-height: 44px; line-height: 0; }
.app-badge img { display: block; width: auto; height: 40px; }
.app-badge--masthead { padding-left: var(--space-5); border-left: 1px solid var(--line-strong); }
.app-badge--footer { margin-top: var(--space-4); }

/* The desktop handoff: a QR code to scan, and the store link beside it. */
.app-handoff {
  width: calc(100% - 2 * var(--gutter));
  max-width: 35rem;
  padding: var(--space-6);
  border: 1px solid var(--line-strong);
  background: var(--paper-0);
  color: var(--ink-1);
}
.app-handoff::backdrop { background: rgb(22 24 29 / 0.5); }
.app-handoff h2 { margin: var(--space-3) 0; font: 500 2.5rem / 1.05 var(--font-display); letter-spacing: -0.025em; }
.app-handoff p { margin: 0; font: var(--text-ui); color: var(--ink-2); }
.app-handoff .kicker { color: var(--blue-ink); }
.app-handoff-close {
  float: right;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  color: var(--ink-1);
  font: 400 1.75rem / 1 var(--font-sans);
  cursor: pointer;
}
.app-handoff-grid { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); }
.app-handoff-qr { flex: none; width: 140px; height: 140px; }
.app-handoff-grid .app-handoff-lede { font: 600 1rem / 1.3 var(--font-sans); color: var(--ink-1); }
.app-handoff-grid p + p { margin-top: var(--space-1); }
.app-handoff-store {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--editorial-field);
  color: var(--field-ink);
  font: 500 0.875rem / 1.2 var(--font-sans);
  text-decoration: none;
}
.app-handoff-store:hover { color: var(--field-ink); background: var(--blue-ink); }

.search-results { max-width: 940px; list-style: none; margin: 0; padding: 0; }
.search-results li { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.search-results a { text-decoration: none; display: grid; gap: var(--space-2); }
.newsletter { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: 32rem; }
.hp { position: absolute; left: -10000px; }

@media (forced-colors: active) {
  .social-icon { background: LinkText; forced-color-adjust: none; }
}

@media print, (forced-colors: active) {
  .site-header::before { display: none; }
}

@media (max-width: 800px) {
  .site-navigation-row { gap: 16px; }
  .site-nav { gap: 20px; }
  .site-search { flex-basis: 230px; width: 230px; }
}

@media (max-width: 736px) {
  .masthead-row { flex-wrap: wrap; gap: var(--space-3); padding-bottom: var(--space-3); }
  .app-badge--masthead { display: none; }
  .site-header .wordmark-edition { margin-left: var(--space-4); font-size: 0.875rem; }
  .site-nav {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    gap: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-1);
    padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav-link { font-size: 0.875rem; scroll-snap-align: start; }
  .footer-grid { gap: var(--space-6); }
  .footer .wordmark-name,
  .footer .wordmark-period { font-size: 3.5rem; }
}

/* Phones: the nav scrolls on its own line and the search pill takes the full width. */
@media (max-width: 600px) {
  .site-navigation-row { flex-wrap: wrap; gap: 0; padding-bottom: 10px; }
  .site-nav { flex: 0 0 100%; gap: 26px; padding: 2px 0; }
  .site-nav-link { padding: 14px 0; }
  .site-search { flex: 0 0 100%; width: 100%; height: 44px; margin: 8px 0 0; }
  .site-search input { margin-right: 14px; font-size: 16px; }
  .site-search kbd { display: none; }
}

@media (max-width: 544px) {
  .masthead-utility { flex-basis: 100%; }
}