/* =========================================================================
   NAV (Nav C): logo + wordmark, the day's chapters, one "4.8 | Get the app"
   pill. 72px on desktop, 60px on phones with a menu that drops from the top.
   ========================================================================= */
.nav.nav-c {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 24px;
  height: 72px;
  min-height: 0;
  padding: 0 max(24px, min(120px, calc((100vw - 1010px) / 2)));
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
/* The frosted sky sits on a layer of its own: a backdrop-filter on the
   header itself would become the containing block of the fixed menu. It is
   the sky's own colour, so over the open sky it reads as no bar at all. */
.nav.nav-c::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  pointer-events: none;
}
.nav-c__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-c__brand img { display: block; width: 32px; height: 32px; border-radius: 8px; }

.nav-c__chapters {
  position: relative;
  z-index: 0;
  display: flex;
  gap: 2px;
  padding: 0 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.nav-c__chapters a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 4px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* On hover a chapter comes out of the bar: it lifts onto a raised chip of
   its own and its sticker tips toward the pointer. The chip mixes the ink
   into the sky, so it reads by day and at night. The target stays 44px. */
.nav-c__chapters a::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, var(--bg));
  box-shadow: 0 8px 16px -10px rgba(40, 18, 4, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-c__chapters a:hover,
.nav-c__chapters a:focus-visible { transform: translateY(-3px) scale(1.06); }
.nav-c__chapters a:hover::before,
.nav-c__chapters a:focus-visible::before { opacity: 1; }
.nav-c__chapters img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-c__chapters a:hover img,
.nav-c__chapters a:focus-visible img { transform: rotate(-10deg) scale(1.12); }

.nav-c__get {
  justify-self: end;
  display: flex;
  align-items: stretch;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cta, var(--accent));
  color: var(--ctaInk, var(--accentInk));
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease, filter 0.2s ease;
}
.nav-c__get:hover,
.nav-c__get:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 18px -10px rgba(40, 18, 4, 0.6);
  filter: brightness(1.05);
}
.nav-c__get:active { transform: none; filter: brightness(0.94); }
/* one tone: the score sits on the pill itself, the star is the only accent */
.nav-c__score {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 0 18px;
}
/* #FFD58A on the rust pill; it follows the label into the gold night pill */
.nav-c__score svg {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  fill: color-mix(in srgb, currentColor 55%, #FFB000);
}
.nav-c__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding: 0 20px 0 12px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-c__chapters a, .nav-c__chapters img, .nav-c__get { transition: none; }
  .nav-c__chapters a:hover, .nav-c__chapters a:focus-visible,
  .nav-c__chapters a:hover img, .nav-c__chapters a:focus-visible img,
  .nav-c__get:hover, .nav-c__get:focus-visible { transform: none; }
}

/* ---- the menu: a native disclosure, so it opens and closes with no JS ---- */
.nav-c__menu { display: none; justify-self: end; }
.nav-c__menu > summary {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-c__menu > summary::-webkit-details-marker { display: none; }
.nav-c__menu > summary::marker { content: ""; }
.nav-c__menu > summary svg { display: block; }
.nav-c__menu > summary .nav-c__x { display: none; }
.nav-c__menu[open] > summary { background: #F6E7CE; color: #4E2C16; }
.nav-c__menu[open] > summary .nav-c__bars { display: none; }
.nav-c__menu[open] > summary .nav-c__x { display: block; }
/* the scrim: a click on it lands on the <details> itself (site.js closes) */
.nav-c__menu[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(40, 24, 12, 0.45);
}
.nav-c__panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  padding: 0 24px 24px;
  border-radius: 0 0 28px 28px;
  background: #FFF9EF;
  color: #4E2C16;
  box-shadow: 0 30px 60px -24px rgba(30, 15, 5, 0.55);
  animation: nav-c-drop 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes nav-c-drop {
  from { transform: translateY(-24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-c__panel { animation: none; }
}
.nav-c__panel-top { display: flex; align-items: center; height: 60px; flex-shrink: 0; }
.nav-c__panel .nav-c__brand { color: #4E2C16; }
.nav-c__panel .nav-c__brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav-c__list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.nav-c__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 14px 0 12px;
  border-radius: 18px;
  background: rgba(246, 231, 206, 0.72);
  color: #4E2C16;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.nav-c__list a:hover { background: #F6E7CE; }
.nav-c__list img { display: block; flex-shrink: 0; width: 36px; height: 36px; object-fit: contain; }
.nav-c__list span { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; }
.nav-c__list svg { display: block; flex-shrink: 0; margin-left: auto; }
.nav-c__panel .nav-c__get {
  justify-self: auto;
  width: 100%;
  height: 52px;
  margin-top: 24px;
  flex-shrink: 0;
  background: #AD5B0C;
  color: #FFF9EF;
}
.nav-c__panel .nav-c__get { justify-content: center; }
.nav-c__panel .nav-c__score { padding: 0; }
.nav-c__panel .nav-c__score svg { width: 17px; height: 17px; fill: #FFD58A; }
.nav-c__panel .nav-c__label { flex: 0 0 auto; padding: 0 0 0 12px; }

/* Tablets and small laptops: the chapter row no longer fits between the
   logo and the pill, so the chapters move into the menu. */
@media (max-width: 1119px) {
  .nav.nav-c { grid-template-columns: 1fr auto auto; gap: 0 12px; padding: 0 32px; }
  .nav-c__chapters { display: none; }
  .nav-c__menu { display: block; }
  .nav-c__panel { left: auto; width: min(100%, 440px); padding: 0 32px 24px 24px; }
  .nav-c__panel-top { height: 72px; }
}
@media (max-width: 700px) {
  .nav.nav-c { display: flex; justify-content: space-between; height: 60px; padding: 0 24px; }
  .nav.nav-c > .nav-c__get { display: none; }
  .nav-c__brand img { width: 28px; height: 28px; border-radius: 7px; }
  .nav-c__panel { left: 0; width: auto; padding: 0 24px 24px; }
  .nav-c__panel-top { height: 60px; }
}
@media (max-width: 340px) {
  .nav.nav-c, .nav-c__panel { padding-inline: 16px; }
  .nav-c__brand { font-size: 20px; }
}