/* ===== Lamplight, relit =====
   Loaded last, after landing-day.css and site-day.css, so it wins on source
   order without those files needing to be rewritten. Delete this one <link>
   and the original Lamplight design comes back intact.

   The day-clock is the point of this page and it is fully intact: the room
   still travels from a black 02:07 to a white 13:20 and back down through
   dusk to the lamp. What changed is only *how* each hour is drawn.

   What was actually dated about the old page was the cream paper, the
   high-contrast display serif, and the chrome - an opaque navbar slab, pill
   buttons with coloured drop shadows. Not the amber. So the type, the
   spacing and the chrome are rebuilt here, and the palette's warmth and the
   clock are left alone. An earlier pass swapped the amber for a cold screen
   blue; that was wrong twice over - it fought the name, and it orphaned the
   favicon, the logos and og.png, which are all built around the amber.

   One rule holds it together: the ambient light is free to be any colour the
   hour calls for, and the accent is not. The accent keeps a single warm hue
   all day and only changes lightness so it stays legible on whatever the
   paper is doing - deep #C97A1F on white, lifted to #F0A94F on black. That
   way the hour can swing the whole page while the brand stays fixed.

   Structure:
     1. Type          a single grotesque, set tight and small
     2. Scenes        the clock: paper, ink, and accent per hour
     3. Light         the sky, repositioned per hour
     4. Chrome        navbar with no seam
     5. Hero          rhythm fixes + the signature cast
     6. Surfaces      chat, buttons, headings
     7. Floor         motion, focus, mobile
*/

/* :root carries the 13:20 scene, because every page that is not the landing -
   login, pricing, the app itself - is a lit room. Without this the inner
   pages would keep the old cream-and-terracotta tokens from landing-day.css
   and the site would read as two different products again. */
:root {
  --n-paper: #FFFFFF;
  --n-paper-alt: #F7F5EF;
  --n-surface: #FFFFFF;
  --n-surface-2: #F2EFE7;
  --n-line: rgba(31, 26, 18, 0.11);
  --n-lamplight: #C97A1F;
  --n-lamplight-deep: #A8621A;
  --n-lamplight-soft: rgba(201, 122, 31, 0.09);
  --n-ink: #16130E;
  --n-dusk: #6B6355;
  --n-leaf: #1C7A57;

  /* One family. The personality is in the light and the spacing, not in a
     second typeface competing for attention. */
  --n-font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --n-font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --n-radius: 14px;
  --n-radius-sm: 9px;

  /* The navbar's real height, published as a token because two other sheets
     need to subtract it (chat's full-height pane, .main-container's floor).
     They read it as var(--nav-h, 80px), so deleting this file restores both
     to the old 80px bar along with everything else. */
  --nav-h: 45px;
}

/* ===== 1. Type =====
   Small and tight. Nobody shouts at 2am, and a 64px display serif was
   shouting - on a page about being quietly available. The headline earns
   attention by being lit, not by being big. */
body, .landing {
  font-family: var(--n-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.landing h1, .landing h2, .landing h3 {
  font-family: var(--n-font-display);
  color: var(--n-ink);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
}
/* Capped at 2.5rem so the longest rotating phrase clears the copy column on
   one line - above that it wraps, and a wrapping phrase reintroduces the
   height jump the grid cell exists to prevent. */
.landing h1 { font-size: clamp(1.9rem, 2.9vw, 2.5rem); position: relative; }
.landing h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.landing h3 { font-size: 1.05rem; letter-spacing: -0.02em; }

/* The rotating phrase is the part of the sentence the light is falling on. */
.landing h1 em, .landing h2 em {
  font-style: normal;
  color: var(--n-lamplight);
  font-weight: 600;
}

/* Muted, not accent-coloured - an eyebrow in the accent gives the page two
   focal colours and neither wins. */
.n-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--n-dusk);
  margin-bottom: 14px;
}
.n-lead {
  color: var(--n-dusk);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 33rem;
}

/* ===== 2. Scenes =====
   The clock, full swing. Accent hue is constant (amber, ~32deg) and only its
   lightness moves, so it holds up on black and on white. */

/* 02:07 - the hour the product exists for. Only the phone is on. */
.landing[data-time="night"] {
  --n-paper: #080A10;
  --n-paper-alt: #0C0F17;
  --n-surface: #10141F;
  --n-surface-2: #161B29;
  --n-line: rgba(160, 185, 225, 0.11);
  --n-lamplight: #E9A44C;
  --n-lamplight-deep: #C97A1F;
  --n-lamplight-soft: rgba(233, 164, 76, 0.12);
  --n-ink: #EDE7DE;
  --n-dusk: #918A80;
  --n-leaf: #4FD1A5;
  background-color: #080A10;
}

/* 07:30 - first light. Warm, because the accent is: a cold dawn under an
   amber accent reads as two unrelated decisions. */
.landing[data-time="dawn"] {
  --n-paper: #F6E9DA;
  --n-paper-alt: #F0DEC9;
  --n-surface: #FFFFFF;
  --n-surface-2: #F3E4D2;
  --n-line: rgba(42, 30, 20, 0.13);
  --n-lamplight: #C05C18;
  --n-lamplight-deep: #A34D12;
  --n-lamplight-soft: rgba(192, 92, 24, 0.10);
  --n-ink: #2A1E14;
  --n-dusk: #6E5A48;
  --n-leaf: #1F7F5C;
  background-color: #F6E9DA;
}

/* 13:20 - flat daylight. The brightest the page ever gets. */
.landing[data-time="day"] {
  --n-paper: #FFFFFF;
  --n-paper-alt: #F7F5EF;
  --n-surface: #FFFFFF;
  --n-surface-2: #F2EFE7;
  --n-line: rgba(31, 26, 18, 0.11);
  --n-lamplight: #C97A1F;
  --n-lamplight-deep: #A8621A;
  --n-lamplight-soft: rgba(201, 122, 31, 0.09);
  --n-ink: #16130E;
  --n-dusk: #6B6355;
  --n-leaf: #1C7A57;
  background-color: #FFFFFF;
}

/* 18:45 - the light going. The one true mid-tone on the page. */
.landing[data-time="dusk"] {
  --n-paper: #2B2733;
  --n-paper-alt: #322D3B;
  --n-surface: #363042;
  --n-surface-2: #3E3749;
  --n-line: rgba(232, 222, 240, 0.14);
  --n-lamplight: #E8A65C;
  --n-lamplight-deep: #D08C3A;
  --n-lamplight-soft: rgba(232, 166, 92, 0.13);
  --n-ink: #F2EDF6;
  --n-dusk: #ABA1B8;
  --n-leaf: #67C7A0;
  background-color: #2B2733;
}

/* 22:30 - one lamp on in a dark room. The namesake state. */
.landing[data-time="lamp"] {
  --n-paper: #0A0910;
  --n-paper-alt: #0E0C15;
  --n-surface: #13111C;
  --n-surface-2: #1A1724;
  --n-line: rgba(210, 200, 230, 0.11);
  --n-lamplight: #F0A94F;
  --n-lamplight-deep: #D28C33;
  --n-lamplight-soft: rgba(240, 169, 79, 0.12);
  --n-ink: #F3E9DC;
  --n-dusk: #9A9084;
  --n-leaf: #59CCA1;
  background-color: #0A0910;
}

/* ===== 3. Light =====
   One fixed wash behind everything, and its position is the hour: it starts
   at the chat panel on the right at 02:07, crosses left through the morning,
   sits overhead at midday, drops to the street at dusk, and comes back close
   and warm for the lamp. This is what carries the day - the paper colour is
   the destination, the light is the journey. */
.n-sky { transition: background 1100ms ease; }

.landing[data-time="night"] .n-sky {
  background:
    radial-gradient(ellipse 46% 42% at 74% 40%, rgba(233, 164, 76, 0.18), transparent 66%),
    radial-gradient(ellipse 70% 40% at 20% 100%, rgba(38, 52, 92, 0.32), transparent 70%);
}
.landing[data-time="dawn"] .n-sky {
  background:
    radial-gradient(ellipse 62% 48% at 4% 2%, rgba(255, 255, 255, 0.75), transparent 66%),
    radial-gradient(ellipse 56% 40% at 92% 92%, rgba(96, 116, 158, 0.18), transparent 64%);
}
.landing[data-time="day"] .n-sky {
  background:
    radial-gradient(ellipse 110% 42% at 50% -10%, rgba(198, 218, 244, 0.40), transparent 68%),
    radial-gradient(ellipse 46% 40% at 86% 98%, rgba(140, 165, 200, 0.16), transparent 62%);
}
/* Sodium streetlight, low and to the left. The one warm moment on the page,
   and it lands because everything on either side of it is cold. */
.landing[data-time="dusk"] .n-sky {
  background:
    radial-gradient(ellipse 74% 46% at 6% 104%, rgba(240, 158, 82, 0.26), transparent 64%),
    radial-gradient(ellipse 62% 48% at 86% -4%, rgba(74, 82, 150, 0.34), transparent 66%);
}
.landing[data-time="lamp"] .n-sky {
  background:
    radial-gradient(circle 38vw at 24% 38%, rgba(240, 178, 98, 0.17), transparent 60%),
    radial-gradient(ellipse 70% 44% at 86% 102%, rgba(46, 54, 96, 0.28), transparent 68%);
}

/* ===== 4. Chrome =====
   The navbar was an opaque slab in a different grey from the hero with a hard
   border under it - two unrelated planes stacked, the single most dated thing
   a page can do. Here it is a scrim in the scene's own paper colour, fading
   to nothing, so there is no seam at any hour.

   The scene tokens live on .landing, and the navbar is its SIBLING - so
   var(--n-paper) inside .navbar resolves from :root and never sees the hour.
   That mismatch is what made the old navbar a grey slab floating on a black
   hero.

   A fading scrim was the wrong tool: behind the navbar is the BODY, which
   carries :root's white paper so the inner pages work - so the scrim faded
   out to reveal white and the bar became a black-to-white ramp. The seam is
   better killed by making the bar exactly the hour's paper colour, with no
   border, shadow or blur. Matching colour is invisible; a gradient over an
   unknown backdrop is a guess. The body follows the hour for the same
   reason - anything that shows behind the chrome has to be the same room. */
.navbar {
  background: var(--n-paper);
  backdrop-filter: none;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0;
}
body:has(.landing[data-time="night"]) .navbar,
body:has(.landing[data-time="night"]) { background: #080A10 !important; }
body:has(.landing[data-time="dawn"]) .navbar,
body:has(.landing[data-time="dawn"]) { background: #F6E9DA !important; }
body:has(.landing[data-time="day"]) .navbar,
body:has(.landing[data-time="day"]) { background: #FFFFFF !important; }
body:has(.landing[data-time="dusk"]) .navbar,
body:has(.landing[data-time="dusk"]) { background: #2B2733 !important; }
body:has(.landing[data-time="lamp"]) .navbar,
body:has(.landing[data-time="lamp"]) { background: #0A0910 !important; }
body { transition: background 900ms ease; }
/* The nav links have the same sibling problem - they need the scene's ink,
   not :root's. (The wordmark used to need it too; it is an image now, and
   swaps colourway instead of colour.) */
body:has(.landing[data-time="night"]) .nav-link,
body:has(.landing[data-time="lamp"]) .nav-link,
body:has(.landing[data-time="dusk"]) .nav-link { color: #97A0B5 !important; }
body:has(.landing[data-time="night"]) .nav-link:hover,
body:has(.landing[data-time="lamp"]) .nav-link:hover,
body:has(.landing[data-time="dusk"]) .nav-link:hover { color: #EDE9F5 !important; }
.navbar, .navbar .nav-link { transition: background 900ms ease, color 900ms ease; }
/* base.css also puts vertical padding on .navbar itself, so the bar was the
   container height PLUS that - zeroing it is what actually makes it thin. */
.navbar-container { height: 45px; min-height: 0; }
.navbar .btn-primary { padding: 6px 15px; font-size: 0.84rem; }

/* The wordmark. Both colourways stack in one grid cell so swapping them costs
   no layout, and the height is set in CSS while the intrinsic 600x141 stays
   on the tag - that pair is what reserves the right box before either file
   has loaded. Ink is the default, because every page that is not the
   homepage is a lit room. */
.brand-link { display: grid; align-items: center; line-height: 0; }
.brand-logo {
  grid-area: 1 / 1;
  height: 21px;
  width: auto;
  transition: opacity 900ms ease;
}
.brand-logo-paper { opacity: 0; }
body:has(.landing[data-time="night"]) .brand-logo-ink,
body:has(.landing[data-time="dusk"]) .brand-logo-ink,
body:has(.landing[data-time="lamp"]) .brand-logo-ink { opacity: 0; }
body:has(.landing[data-time="night"]) .brand-logo-paper,
body:has(.landing[data-time="dusk"]) .brand-logo-paper,
body:has(.landing[data-time="lamp"]) .brand-logo-paper { opacity: 1; }

.nav-link, body:has(.landing) .nav-link {
  color: var(--n-dusk);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nav-link:hover, body:has(.landing) .nav-link:hover { color: var(--n-ink); }

/* ===== 5. Hero ===== */
.n-container { max-width: 1180px; }
.n-hero { position: relative; padding: 56px 0 72px; background: none; }

/* Wider column and smaller display type together do one job: every rotating
   phrase now fits on a single line. That removes two defects at once - the
   ~90px hole the inline-grid reserved for the tallest phrase, and the
   headline jumping as the phrases cycled. */
.n-hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: start; }
.n-hero-copy .n-lead { margin: 18px 0 30px; }

/* The phrases stack in one grid cell so a crossfade overlays exactly. My
   earlier absolute-positioning version let the outgoing and incoming phrase
   sit on two different lines for the length of the fade, which read as the
   headline having two subtitles. They also need their own line - inline with
   the fixed text, the grid box is as wide as the longest phrase and drags a
   ragged gap after "up". */
.n-rotator {
  display: grid;
  width: max-content;
  max-width: 100%;
}
.n-rotator em {
  grid-area: 1 / 1;
  position: static;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.08em);
  transition: opacity 500ms ease, transform 500ms ease;
}
.n-rotator em.is-on { opacity: 1; transform: none; }

.n-hero-notes { margin-top: 26px; gap: 18px; font-size: 0.82rem; color: var(--n-dusk); }
.n-hero-notes span::before { background: var(--n-dusk); width: 3px; height: 3px; }

/* --- The signature: the chat panel is the light source ---
   Anchored where the panel actually sits and falling off with distance, so
   the copy on the left is dimmer than the copy near the screen. Only at
   night and lamp - at midday the sun is the light source, not the phone,
   and a glow on a white page would just be a smudge. */
.n-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  background: radial-gradient(ellipse 40% 46% at 72% 52%,
              rgba(233, 164, 76, 0.15), transparent 62%);
}
.landing[data-time="night"] .n-hero::after,
.landing[data-time="lamp"] .n-hero::after { opacity: 1; }
.n-hero > * { position: relative; z-index: 1; }

/* ===== 6. Surfaces ===== */
.n-chat {
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 70px -24px rgba(0, 0, 0, 0.55);
}
/* At the dark hours the panel stops being a card and starts being a lamp. */
.landing[data-time="night"] .n-chat,
.landing[data-time="lamp"] .n-chat {
  box-shadow:
    inset 0 1px 0 rgba(255, 216, 168, 0.16),
    0 0 90px -10px rgba(233, 164, 76, 0.26),
    0 40px 80px -20px rgba(0, 0, 0, 0.8);
}

.n-chat-top { background: transparent; border-bottom: 1px solid var(--n-line); padding: 15px 18px; }
.n-chat-avatar { background: var(--n-lamplight-soft); width: 34px; height: 34px; font-size: 1rem; }
.n-chat-name { font-size: 0.9rem; letter-spacing: -0.01em; }
.n-chat-status { font-size: 0.74rem; }
.n-chat-clock { font-size: 0.76rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* The log had min-height:320px and the messages overflowed it, leaving a dead
   band above the input. Content sizes the panel now. */
/* The big hole inside the panel was the messages that have not been typed
   yet: they sit in the DOM at opacity 0 and still take up their full height,
   so the panel was drawn at its final size from the first frame with nothing
   in the bottom two thirds. Taking them out of flow until they arrive means
   the panel fills the way a real conversation does. The cost is the fade -
   an element cannot transition out of display:none in older browsers, so
   @starting-style restores it where it is supported and it simply appears
   where it is not. */
.n-chat-log { min-height: 0; padding: 18px 18px 6px; gap: 10px; }
/* Scoped to the hero panel. Unscoped, this also caught the static example
   exchanges at 07:30 and 18:45 - only #heroChatLog ever gets .is-visible from
   the script, so those columns went blank apart from their caption. */
.n-chat-log .n-msg:not(.is-visible) { display: none; }
.n-chat-log .n-msg.is-visible { opacity: 1; transform: none; }
@starting-style {
  .n-chat-log .n-msg.is-visible { opacity: 0; transform: translateY(6px); }
}
.n-msg { font-size: 0.88rem; border-radius: 14px; padding: 10px 14px; }
.n-msg-user { background: var(--n-surface-2); color: var(--n-ink); }
.n-msg-ai {
  background: var(--n-lamplight-soft);
  border: 1px solid color-mix(in srgb, var(--n-lamplight) 22%, transparent);
  color: var(--n-ink);
}
.n-msg-memory { font-size: 0.72rem; color: var(--n-dusk); letter-spacing: 0.01em; }
.n-chat-input { padding: 12px 18px 18px; }
.n-chat-input input { background: var(--n-paper-alt); border-color: var(--n-line); font-size: 0.86rem; }
.n-chat-input button { background: var(--n-lamplight-deep); color: #fff; font-weight: 600; }

/* Buttons: flat and tight. The old pill had a coloured drop shadow under it,
   which is the most reliable tell of a 2016 landing page. */
.n-btn { border-radius: 10px; padding: 12px 22px; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.n-btn-primary, .navbar .btn-primary {
  background: var(--n-lamplight-deep);
  color: #fff;
  border-radius: 10px;
  box-shadow: none;
  font-weight: 600;
}
.n-btn-primary:hover, .navbar .btn-primary:hover {
  background: var(--n-lamplight);
  transform: none;
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--n-lamplight) 55%, transparent);
}
.n-btn-ghost { border: 1px solid var(--n-line); color: var(--n-ink); background: transparent; }
.n-btn-ghost:hover { background: var(--n-lamplight-soft); border-color: var(--n-lamplight); }

/* The same treatment for the Phase-2 button, which is what every screen that
   is not the landing actually uses - login, signup, the wizard, dashboard,
   account, subscription. Without this the marketing pages have flat 10px
   buttons and the app has gradient pills that lift on hover, which is the
   two-different-products problem in its most visible form. Note the gradient:
   .btn-primary in base.css paints --gradient-primary, so overriding the
   colour alone is not enough - the background shorthand has to replace it. */
.btn-primary,
.auth-form .btn-primary,
.auth-form .btn-block {
  background: var(--n-lamplight-deep);
  color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.btn-primary:hover,
.auth-form .btn-primary:hover,
.auth-form .btn-block:hover {
  background: var(--n-lamplight);
  opacity: 1;
  transform: none;
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--n-lamplight) 55%, transparent);
}
/* .btn's own hover lifts and drops a shadow under every button on the page,
   secondary and ghost included. */
.btn { border-radius: 10px; }
.btn:hover { transform: none; box-shadow: none; }
.btn-secondary { border-width: 1px; }

/* Section rhythm. 88px of padding was set against a 64px display serif; with
   the type now much smaller the same gap reads as dead space rather than as a
   break between ideas. Whitespace has to scale with the type it separates. */
.n-section { padding: 68px 0; }
.n-section-header { margin-bottom: 38px; }
.n-honest-item { border-left-width: 1px; }

/* The hour, in the same face, tabular. It reads as a timestamp because it is
   one - not as decoration. */
.n-scene-time {
  font-family: var(--n-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--n-ink);
  font-variant-numeric: tabular-nums;
}
.n-scene-time span { color: var(--n-dusk); font-size: 0.5em; margin-left: 4px; }
.n-scene-label { color: var(--n-dusk); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* The rail read as two stray dashes floating over the hero, because the ticks
   are visible before their labels are. It appears once you have left the hero
   and there is a day to navigate. */
.n-rail { opacity: 0; transition: opacity 500ms ease; }
.landing:not([data-time="night"]) .n-rail { opacity: 1; }
.n-rail-stop.is-now { color: var(--n-lamplight); }

/* ===== 7. Floor ===== */
:focus-visible { outline: 2px solid var(--n-lamplight); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .n-sky, .n-rail, .n-hero::after { transition: none; }
}

@media (max-width: 900px) {
  .n-hero { padding: 76px 0 64px; }
  .n-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .landing h1 { font-size: clamp(1.9rem, 7vw, 2.3rem); }
  .n-rotator em { white-space: normal; }
  /* The cast follows the panel below the copy on narrow screens. */
  .landing[data-time="night"] .n-hero::after,
  .landing[data-time="lamp"] .n-hero::after {
    background: radial-gradient(ellipse 80% 30% at 50% 78%,
                rgba(233, 164, 76, 0.15), transparent 64%);
  }
}

/* ===== 8. Mobile navigation =====
   site-day.css hides every .nav-link below 560px, and nothing replaced them:
   a phone had no navigation at all. Logged out there was no Log in link
   anywhere on the site; logged in, Chat and Dashboard were both unreachable
   and the only survivor was the email dropdown. These rules add the sheet
   those links belong in.

   base.css also switches .navbar-container to flex-direction: column below
   768px, which fights the fixed 45px bar height set above and stacks the links
   inside it. The bar stays a row at every width now. */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: -8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 19px;
  height: 1.5px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--n-ink);
  transition: transform 220ms ease, opacity 180ms ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* The scene tokens live on .landing, which is the navbar's sibling, so chrome
   that has to follow the clock needs its own body:has() rule. Same trap as the
   navbar background itself. */
body:has(.landing[data-time="night"]) .nav-toggle-bar,
body:has(.landing[data-time="lamp"]) .nav-toggle-bar,
body:has(.landing[data-time="dusk"]) .nav-toggle-bar { background: #EDE9F5; }

/* Extra destinations that only earn their place in the sheet. */
.nav-link-more { display: none; }

@media (max-width: 860px) {
  .navbar-container { flex-direction: row; align-items: center; gap: 0; }
}

@media (max-width: 560px) {
  .nav-toggle { display: flex; }

  .navbar { position: sticky; }
  .navbar-container { position: relative; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 14px;
    border-bottom: 1px solid var(--n-line);
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.45);
  }
  .nav-links.is-open { display: flex; }

  /* Undoes site-day.css's blanket hide, which is what left the bar empty. */
  .nav-links .nav-link,
  .nav-links .nav-link-more {
    display: block;
    padding: 13px 2px;
    font-size: 0.98rem;
    border-bottom: 1px solid var(--n-line);
  }
  .nav-links .nav-link:last-of-type { border-bottom: 0; }

  .nav-links .btn-primary {
    display: block;
    margin-top: 12px;
    text-align: center;
    padding: 11px 15px;
  }

  /* The email dropdown is redundant once its contents are in the sheet. */
  .nav-links .nav-dropdown { display: none; }
}

/* The navbar paints itself per scene; the sheet inherits that paint via
   `background: inherit`, which resolves against .navbar-container, not the
   bar. Give the container the bar's colour at every hour so it does. */
@media (max-width: 560px) {
  .navbar-container { background: transparent; }
  .nav-links { background: var(--n-paper); }
  /* Exactly the values the .navbar rules above use, so the sheet and the bar
     it hangs from are the same paint at every hour. */
  body:has(.landing[data-time="night"]) .nav-links { background: #080A10; }
  body:has(.landing[data-time="dawn"]) .nav-links { background: #F6E9DA; }
  body:has(.landing[data-time="day"]) .nav-links { background: #FFFFFF; }
  body:has(.landing[data-time="dusk"]) .nav-links { background: #2B2733; }
  body:has(.landing[data-time="lamp"]) .nav-links { background: #0A0910; }
}