/* ============================================================================
   The public landing page.

   Rebuilt 2026-10 for the light corporate direction, from sketch/redesign.html.
   What makes this read as a company rather than a side project, roughly in
   order of effect: a navigation bar, a specification you can check, one accent
   used thinly, and movement you only notice if you look for it.

   Colours and type all come from the tokens in base.css, so this file never
   names a hex value except where a photograph has to be pulled into the
   palette.
   ========================================================================= */

.landing { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Navigation ----------------------------------------------------------------
   A site with no navigation reads as a landing page somebody made in an
   afternoon. This is the cheapest single thing that fixes that. */

.nav {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1.1rem, 4vw, 3.5rem);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav__brand { text-decoration: none; color: inherit; white-space: nowrap; }
.nav__links { display: flex; gap: 1.35rem; margin-left: .6rem; }
.nav__links a {
  position: relative;
  padding: .3rem 0;
  font-size: .8rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: .9rem; }

/* The light / dark switch. An icon button, so it survives the 820px breakpoint
   that hides the links and the sign-in: a reader on a phone is the one most
   likely to want the dark setting. */
.nav__theme {
  display: grid; place-items: center;
  width: 2.05rem; height: 2.05rem; padding: 0;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.nav__theme:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  transform: translateY(-1px);
}
.nav__theme svg { width: 1.02rem; height: 1.02rem; display: block; }
.nav .btn { padding: .58rem 1.1rem; font-size: .68rem; }

@media (max-width: 820px) {
  .nav__links { display: none; }
}

/* ---- Hero ------------------------------------------------------------------------ */

.lhero {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: center; gap: 2rem;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.1rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
  background: linear-gradient(170deg, #f7f9fb, #eef2f6);
  overflow: hidden;
}
:root[data-theme="dark"] .lhero,
.lhero { background: linear-gradient(170deg, var(--paper-sunk), var(--paper)); }

.lhero__say { position: relative; z-index: 3; max-width: 34rem; }
.lhero__kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink);
}
.lhero__kicker::before { content: ""; width: 2.1rem; height: 2px; background: var(--accent); }

.lhero__head {
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  line-height: 1.04;
  margin: 1rem 0 0;
  text-wrap: balance;
  color: var(--ink);
}
.lhero__head em { font-style: normal; color: var(--accent-ink); }

.lhero__lead {
  margin-top: 1.1rem; max-width: 30rem;
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.7;
  color: var(--ink-soft);
}
.lhero__hand { margin-top: .9rem; font-family: var(--hand); font-size: 1.6rem; color: var(--accent-ink); }
.lhero__cta { margin-top: 1.9rem; display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---- The book ---------------------------------------------------------------------
   Six faces on a preserve-3d parent: no WebGL, no library. The three cut edges
   are a fine repeating gradient, and that one detail is what stops the whole
   thing reading as a rectangle with a picture on it. */

.stage {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  perspective: 1400px;
  min-height: 26rem;
  padding-bottom: 3.5rem;
  cursor: grab;
}
.stage:active { cursor: grabbing; }
.stage__hint {
  position: absolute; left: 50%; bottom: .2rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .45rem;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); pointer-events: none;
}
.stage__hint b { width: 1.3rem; height: 1px; background: currentColor; }

.scene { transform-style: preserve-3d; will-change: transform; }
.book { --w: 15.5rem; --h: 22rem; --d: 2.4rem;
  position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; }
.bface { position: absolute; inset: 0; backface-visibility: hidden; }

.bface--front, .bface--back {
  width: var(--w); height: var(--h);
  border-radius: 2px 5px 5px 2px;
  box-shadow: inset 0 0 60px rgba(0,0,0,.35);
}
.bface--front { transform: translateZ(calc(var(--d) / 2)); background: linear-gradient(150deg, #24405f, #16283f); overflow: hidden; }
.bface--back  { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: linear-gradient(150deg, #1b314b, #142338); }

.bface--spine {
  width: var(--d); height: var(--h); left: calc(var(--w) / 2 - var(--d) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(90deg, #132135, #1e3350 40%, #0f1c2d);
  display: grid; place-items: center;
}
.bspine {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--display); font-size: .7rem; letter-spacing: .06em;
  color: var(--gold); white-space: nowrap;
}
.bface--pages {
  width: var(--d); height: var(--h); left: calc(var(--w) / 2 - var(--d) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: repeating-linear-gradient(90deg, #efe7d8 0 1px, #d9cfbb 1px 2px), #e8dfcd;
}
.bface--top, .bface--bottom {
  width: var(--w); height: var(--d); top: calc(var(--h) / 2 - var(--d) / 2);
  background: repeating-linear-gradient(0deg, #efe7d8 0 1px, #d9cfbb 1px 2px), #e8dfcd;
}
.bface--top    { transform: rotateX(90deg)  translateZ(calc(var(--h) / 2)); }
.bface--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

.bcover { position: absolute; inset: 0; padding: 1.5rem 1.2rem; display: flex; flex-direction: column; }
.bcover__kicker { font-size: .48rem; letter-spacing: .24em; text-transform: uppercase; color: #cbd7e4; }
.bcover__title { margin-top: .5rem; font-family: var(--display); font-weight: 600; font-size: 1.8rem; line-height: 1; color: #f3ede2; }
.bcover__title em { font-style: normal; color: var(--gold); }
.bcover__rule { margin-top: .65rem; width: 2.4rem; height: 3px; background: var(--gold); border-radius: 2px; }
.bcover__sub { margin-top: .55rem; font-family: var(--serif); font-size: .52rem; line-height: 1.5; color: #a9bbcd; }
.bcover__art { margin-top: auto; }
.bcover__foot { margin-top: .7rem; font-size: .43rem; letter-spacing: .2em; text-transform: uppercase; color: #8fa2b6; }

/* Turning a book over to find a blank rectangle is worse than not being able
   to turn it at all. */
.bback { position: absolute; inset: 0; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; }
.bback__hand { font-family: var(--hand); font-size: 1.05rem; line-height: 1.1; color: var(--gold); }
.bback__body { margin-top: .8rem; font-family: var(--serif); font-size: .47rem; line-height: 1.75; color: #aebdcd; }
.bback__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.bback__bars {
  width: 3.2rem; height: 1.3rem; padding: 2px; border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, #e9e2d6 0 1px, #e9e2d6 1px 2px, transparent 2px 3px,
      #e9e2d6 3px 5px, transparent 5px 6px, #e9e2d6 6px 7px, transparent 7px 9px),
    #f3ede2;
}
.bback__mark { font-family: var(--display); font-size: .55rem; color: #6d8199; }

.book__shadow {
  position: absolute; left: 50%; bottom: -2.8rem;
  width: 17rem; height: 2.2rem;
  transform: translateX(-50%) rotateX(84deg);
  background: radial-gradient(ellipse at center, rgba(16,36,61,.30), transparent 68%);
  filter: blur(9px);
}

/* ---- The specification line -------------------------------------------------
   Small, tracked-out, separated by gold dots. The job is to answer "what is
   this, exactly" in one glance without turning four facts into four
   headlines. */

.spec {
  border-block: 1px solid var(--rule);
  background: var(--paper);
  padding: 1rem clamp(1.1rem, 4vw, 3.5rem);
}
.spec__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
}
.spec__list li {
  position: relative;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* A gold dot between items rather than before each, so the row reads as one
   sentence and not as a bulleted list. */
.spec__list li + li::before {
  content: "";
  position: absolute; left: -.8rem; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%; background: var(--accent);
}

@media (max-width: 560px) {
  .spec__list { gap: .45rem 1.1rem; }
  .spec__list li { font-size: .64rem; letter-spacing: .1em; }
}

/* ---- Shared band furniture --------------------------------------------------- */

.band { padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1.1rem, 4vw, 3.5rem); }
.band--sunk { background: var(--paper-sunk); }
.band--ink  { background: #0d1b2d; color: #e8eef5; }
.band__head { max-width: 42rem; margin-bottom: 2.4rem; }
.band__eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.band--ink .band__eyebrow { color: var(--gold); }
.band__heading {
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.75rem, 3.8vw, 2.6rem); line-height: 1.08;
  margin: .55rem 0 0; text-wrap: balance;
}
.band--ink .band__heading { color: #fff; }
.band__lead { margin-top: .85rem; font-family: var(--serif); font-size: 1.04rem; line-height: 1.7; color: var(--ink-soft); }
.band--ink .band__lead { color: #a9bccd; }

/* ---- The story, in photographs -------------------------------------------------- */

.story { display: grid; gap: clamp(2.4rem, 6vw, 4rem); }
.beat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3.2rem); align-items: center; }
.beat:nth-child(even) .beat__shot { order: 2; }

.beat__shot {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--paper-sunk);
  align-self: center;
  box-shadow: 0 18px 40px -28px rgba(16,36,61,.5);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
.beat__shot.is-tilting { transition: transform .08s linear; }
.beat:hover .beat__shot { box-shadow: 0 32px 64px -32px rgba(16,36,61,.55); }

.beat__shot img {
  display: block; width: 100%;
  /* Each photo states its own frame and focal point. A tall portrait forced
     into a landscape box crops to the middle and throws the person away. */
  aspect-ratio: var(--ratio, 4 / 3);
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: saturate(.84) contrast(1.02);
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .7s ease;
}
.beat:hover .beat__shot img { transform: scale(1.06); filter: saturate(1) contrast(1.02); }
/* A navy wash, so photographs from four photographers look like one set. */
.beat__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(16,36,61,.26), rgba(16,36,61,.02) 55%);
}
.beat__when { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.beat__title {
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.3rem, 2.8vw, 1.85rem); line-height: 1.12; margin: .45rem 0 0;
}
.beat__body { margin: .75rem 0 0; font-family: var(--serif); font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

/* ---- A photograph the width of the screen ---------------------------------------- */

.wide {
  position: relative;
  display: grid; place-items: center;
  min-height: 30rem;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.1rem, 4vw, 3.5rem);
  background-image: var(--shot);
  background-size: cover; background-position: center 55%;
  background-attachment: fixed;   /* cheap parallax */
  color: #f6f1e7; text-align: center; overflow: hidden;
}
/* iOS renders fixed backgrounds wrong and Android renders them expensively. */
@media (hover: none) { .wide { background-attachment: scroll; } }

.wide::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(9,15,25,.35), rgba(9,15,25,.78)),
    linear-gradient(180deg, rgba(16,36,61,.55), rgba(16,36,61,.35));
}
.wide__inner { position: relative; z-index: 2; max-width: 44rem; }
.wide__quote {
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.14;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.wide__quote em { font-style: normal; color: var(--gold); }
.wide__by { margin-top: 1.3rem; font-family: var(--hand); font-size: 1.45rem; color: var(--gold); }
/* ---- Pillars ------------------------------------------------------------------- */

.pillars { display: grid; }
.pillar {
  position: relative;
  display: grid; grid-template-columns: 10rem 1fr; gap: 1.4rem; align-items: baseline;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255,255,255,.13);
  transition: padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.pillar:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.pillar:hover { padding-left: .8rem; }
.pillar::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.pillar:hover::after { transform: scaleX(1); }
.pillar__name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: #fff; }
.pillar:hover .pillar__name { color: var(--gold); }
.pillar__line { font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: #a7b8c9; }

/* ---- Companion ------------------------------------------------------------------- */

.companion { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3.2rem); align-items: center; }
.companion__shot { border-radius: var(--radius); overflow: hidden; background: var(--paper-sunk); }
.companion__shot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.85); }

/* ---- The offer -------------------------------------------------------------------- */

.loffer-section { padding-block: clamp(3rem, 7vw, 5rem); }
.lwrap { width: 100%; max-width: 46rem; margin: 0 auto; }
.lwrap--narrow { max-width: 34rem; }

.loffer {
  padding: 2.25rem 2rem 2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.loffer .eyebrow--flanked { justify-content: center; margin-bottom: .7rem; }
.loffer__heading {
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.55rem, 3.4vw, 2.1rem); line-height: 1.08; text-wrap: balance;
}
.loffer__price {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1;
  color: var(--accent-ink); margin: .9rem 0 .25rem;
}
.loffer__price--tbd {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.loffer__body { margin: .7rem auto 0; max-width: 44ch; font-family: var(--serif); font-size: 1rem; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.loffer__list { margin: 1.5rem auto; max-width: 28rem; text-align: left; display: grid; gap: .6rem; }
.loffer__list li { position: relative; padding-left: 1.5rem; font-family: var(--serif); font-size: .96rem; line-height: 1.55; color: var(--ink-soft); }
.loffer__list li::before { content: ""; position: absolute; left: 0; top: .52em; width: .65rem; height: 2px; border-radius: 2px; background: var(--accent); }
.loffer__cta { display: grid; gap: .65rem; justify-items: center; margin-top: 1.4rem; }
.loffer__note { font-size: .78rem; color: var(--ink-faint); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.loffer__account {
  margin: 1.4rem auto 0; padding-top: 1.2rem; max-width: 44ch;
  border-top: 1px solid var(--rule);
  font-size: .85rem; line-height: 1.6; color: var(--ink-faint); text-wrap: pretty;
}

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


.landing__foot {
  margin-top: auto;
  padding: 1.5rem clamp(1.1rem, 4vw, 3.5rem) 1.75rem;
  border-top: 1px solid var(--rule);
  display: grid; gap: .5rem;
  text-align: center;
  font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.landing__legal { font-size: .72rem; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .85; }

/* ---- Arriving -----------------------------------------------------------------------
   Gated behind a class the script adds. A page that hides its own content until
   an observer speaks is one failed observer away from being blank, so with no
   script at all everything is simply visible. */

.js-reveal .rise {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js-reveal .rise.is-in { opacity: 1; transform: none; }

/* ---- Gate back link -------------------------------------------------------------- */

.gate__back {
  justify-self: start;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: .3rem .1rem;
}
.gate__back:hover { color: var(--ink); }

/* ---- Small screens ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .lhero { grid-template-columns: 1fr; }
  .stage { order: -1; min-height: 19rem; padding-bottom: 3rem; }
  .book { --w: 11.5rem; --h: 16.2rem; --d: 1.8rem; }
  .beat, .companion { grid-template-columns: 1fr; }
  .beat:nth-child(even) .beat__shot { order: 0; }
  .pillar { grid-template-columns: 1fr; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .rise { opacity: 1 !important; transform: none !important; }
  .wide { background-attachment: scroll; }
}


/* ---- Contact ------------------------------------------------------------------- */

.contact { text-align: center; }
.contact .band__lead { margin-left: auto; margin-right: auto; }
.contact__act { margin: 1.9rem 0 0; }
.contact__addr {
  margin: 1rem 0 0;
  font-family: var(--mono, var(--sans));
  font-size: .82rem; letter-spacing: .01em;
}
.contact__addr a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.contact__addr a:hover { color: var(--accent-ink); border-color: var(--accent); }


/* ---- Chat, not built yet -------------------------------------------------------
 * A placeholder, deliberately honest about it: the panel says so and hands the
 * reader the email address instead, so the button is never a dead end. When a
 * real widget goes in, the markup in index.html is what it replaces.
 */

.chatdock {
  position: fixed; right: clamp(.9rem, 2.5vw, 1.6rem); bottom: clamp(.9rem, 2.5vw, 1.6rem);
  z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: .7rem;
}

.chatdock__btn {
  display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem; padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(16,36,61,.26);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease;
}
.chatdock__btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 36px rgba(16,36,61,.32); }
.chatdock__btn svg { width: 1.3rem; height: 1.3rem; display: block; }
.chatdock__btn .chatdock__x { display: none; }
.chatdock.is-open .chatdock__btn .chatdock__x { display: block; }
.chatdock.is-open .chatdock__btn .chatdock__bubble { display: none; }

.chatdock__panel {
  order: -1;                 /* above the button, which is last in the markup */
  width: min(19.5rem, calc(100vw - 2rem));
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--rule); border-radius: calc(var(--radius) * 2);
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(16,36,61,.18);
  transform-origin: bottom right;
}
.chatdock__panel[hidden] { display: none; }
.chatdock__title {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--display-tracking);
  font-size: 1.02rem;
}
.chatdock__soon {
  display: inline-block; margin: .5rem 0 0;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink);
  font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.chatdock__body {
  margin: .7rem 0 0;
  font-family: var(--serif);
  font-size: .88rem; line-height: 1.6; color: var(--ink-soft);
}
.chatdock__body a { color: var(--accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .chatdock.is-open .chatdock__panel { animation: chatpop .22s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes chatpop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* The dock sits over the footer on a short screen, so give the footer room. */
.landing__foot { padding-bottom: 5.5rem; }

/* ---- Which theme icon shows ------------------------------------------------------
 * The button shows the theme it will switch TO, so a moon in daylight and a sun
 * at night. Doing it in CSS rather than JS means the right icon is on screen in
 * the first paint, including when no choice has been saved and the device
 * preference decides. Same three-selector pattern as base.css: the media query
 * for "following the device", then the explicit [data-theme] override.
 */

.nav__theme-sun  { display: none; }
.nav__theme-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__theme-sun  { display: block; }
  :root:not([data-theme="light"]) .nav__theme-moon { display: none; }
}

:root[data-theme="dark"] .nav__theme-sun  { display: block; }
:root[data-theme="dark"] .nav__theme-moon { display: none; }
:root[data-theme="light"] .nav__theme-sun  { display: none; }
:root[data-theme="light"] .nav__theme-moon { display: block; }