/* 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);
}

/* 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); }

.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); }
  .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-social { flex-basis: 100%; }
}