/* HiveLab — shared styles.
 *
 * The design language is the app's, not Orrery's: where that site is deep
 * space with a cold blue-black and a sun glow, this one is the inside of a
 * hollow tree. Warm near-black, wax and honey golds, a comb lattice standing
 * in for the starfield, and lamp-light rising from the bottom of the page the
 * way it rises off the comb in the app's home screen.
 *
 * Every colour below is Palette.swift converted to sRGB hex, so the site and
 * the app cannot drift apart.
 */

:root {
  --night:      #171311;  /* Palette.night */
  --night-deep: #100C0A;
  --ember:      #221A14;  /* the warm floor the glow sits on */

  --honey:      #EDAD30;  /* Palette.honey, the accent, once per idea */
  --honey-deep: #BD7517;  /* Palette.honeyDeep */
  --pollen:     #E08C38;  /* Palette.pollen */
  --wax:        #E8C978;  /* Palette.waxCap */
  --warmth:     #FF8C29;  /* Palette.warmth, the lamp */
  --cream:      #F2EBDB;  /* Palette.ink */
  /* The conditions colour. In the app it marks the things the user sets and
     the second curve in a comparison, so on this page it belongs to anything
     about choice, never to anything about the bees themselves. */
  --lilac:      #A79FCB;

  --text:      rgba(242, 235, 219, 0.92);
  --text-dim:  rgba(242, 235, 219, 0.68);
  --text-fade: rgba(242, 235, 219, 0.46);

  --glass-fill:   rgba(255, 236, 200, 0.045);
  --glass-border: rgba(255, 225, 180, 0.12);

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
           "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--night);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- The hollow tree: fixed backdrop behind everything ---- */
.hollow {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120vw 70vh at 50% 108%,
                    rgba(255, 140, 41, 0.20),
                    rgba(189, 117, 23, 0.07) 42%,
                    transparent 72%),
    linear-gradient(180deg, var(--night-deep) 0%, var(--night) 42%, var(--ember) 100%);
}
/* The comb itself: one seamless SVG tile, masked so it fades through the
   middle of the page and never competes with the screenshots. */
.hollow::after {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.5;
  background-image: url("img/comb.svg");
  background-size: 90.067px 156px; /* the tile's own size, or the seams show */
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.7));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.7));
  pointer-events: none;
}
#motes {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- Typography helpers ---- */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-fade);
}
.gold  { color: var(--honey); }
.lilac { color: var(--lilac); }
.serif { font-family: var(--serif); }

a { color: var(--wax); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

section { padding: 96px 0; }

/* ---- Nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(23, 19, 17, 0.62);
  border-bottom: 1px solid rgba(255, 225, 180, 0.07);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.nav .brand {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.42em;
  color: var(--cream);
  padding-left: 0.42em;
}
.nav .links { display: flex; gap: 26px; }
.nav .links a {
  color: var(--text-dim);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}
.nav .links a:hover { color: var(--cream); text-decoration: none; }
@media (max-width: 640px) {
  .nav .links { gap: 18px; }
  .nav .links a.hide-sm { display: none; }
}

/* ---- Hero ---- */
.hero {
  text-align: center;
  padding: 116px 0 80px;
  position: relative;
}
.hero .eyebrow { margin-bottom: 26px; }
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.1rem, 11.5vw, 6.2rem);
  letter-spacing: 0.26em;
  padding-left: 0.26em;
  line-height: 1;
  background: linear-gradient(175deg, var(--cream) 30%, var(--wax));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--text-dim);
  margin: 28px auto 0;
  max-width: 32ch;
}
.hero .tagline {
  margin-top: 14px;
  color: var(--text-fade);
  font-family: var(--serif);
  font-size: 1rem;
}

/* ---- Buttons ---- */
.cta-row {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.cta-note {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--text-fade);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn-primary {
  background: var(--honey);
  color: #23180A;
  box-shadow: 0 0 28px rgba(237, 173, 48, 0.18);
}
.btn-primary:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 6px 34px rgba(237, 173, 48, 0.28); }
.btn-ghost {
  border: 1px solid var(--glass-border);
  color: var(--text);
  background: var(--glass-fill);
}
.btn-ghost:hover { text-decoration: none; border-color: rgba(255, 225, 180, 0.26); }

/* The App Store slot before there is an App Store link. Deliberately not a
   disabled <button>: there is nothing to press, so it is a label with the
   shape of the button it will become. */
.btn-soon {
  border: 1px dashed rgba(237, 173, 48, 0.45);
  color: var(--honey);
  background: rgba(237, 173, 48, 0.07);
  cursor: default;
}

/* ---- Hero device strip ---- */
.shots {
  margin-top: 72px;
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}
/* <picture> is transparent to layout, so the <img> stays the flex item and
   .raise and flex-end alignment keep working. */
.shots picture { display: contents; }
.shot {
  width: 210px;
  height: auto;
  border-radius: 30px;
  border: 1px solid rgba(255, 225, 180, 0.10);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  display: block;
  background: var(--night-deep);
}
.shot.raise { margin-bottom: 34px; }
@media (max-width: 720px) {
  .shot { width: 150px; }
  .shot.raise { margin-bottom: 20px; }
}

/* ---- Glass card ---- */
.glass {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- Section heads ---- */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--cream);
  margin-top: 14px;
  line-height: 1.25;
}
.section-head p {
  color: var(--text-dim);
  max-width: 52ch;
  margin: 18px auto 0;
}

/* ---- The claim: text beside one tall screenshot ---- */
.claim {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: center;
}
/* Screenshot on the left instead. The column widths have to swap with it, or
   the phone takes the wide track and the prose is squeezed into 300px. */
.claim.reverse { grid-template-columns: 300px 1fr; }
/* Two phones where the section describes two decisions, so the picture makes
   the same count the prose does. The column widens to keep each one legible. */
.claim.pair-left { grid-template-columns: 372px 1fr; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
/* The <picture> is the grid item here, not `display: contents` as in .shots.
   Under contents, each <source> becomes a grid item too, and the two images
   get pushed into the second column and stack. */
.pair picture { display: block; min-width: 0; }
/* min-width: 0 is load-bearing. A grid item's automatic minimum is its content
   size, and for an image that is the intrinsic 630px, so without this the pair
   refuses to shrink into its track and lies across the prose. */
.pair .shot-lg { width: 100%; min-width: 0; border-radius: 22px; }
.claim h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  color: var(--cream);
  margin-top: 14px;
  line-height: 1.3;
}
.claim p { color: var(--text-dim); margin-top: 18px; max-width: 46ch; }
/* Not scoped to .claim: the compare band uses a .shot-lg too, and without a
   width the image renders at its intrinsic 630px and walks out of the card. */
.shot-lg {
  width: 100%;
  height: auto;
  border-radius: 32px;
  border: 1px solid rgba(255, 225, 180, 0.10);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.62);
  display: block;
}
@media (max-width: 820px) {
  .claim, .claim.reverse, .claim.pair-left { grid-template-columns: 1fr; gap: 40px; justify-items: center; text-align: center; }
  .claim p { margin-left: auto; margin-right: auto; }
  .claim figure { max-width: 260px; }
  /* The pair stays a pair when stacked, just narrower: side by side is what
     makes it read as two decisions rather than two unrelated screenshots. */
  .claim figure.pair { max-width: 340px; }
}

/* ---- Three doors ---- */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 820px) { .doors { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.door { padding: 26px 24px 28px; text-align: center; }
.door img {
  width: 100%;
  max-width: 190px;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 225, 180, 0.09);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  margin-bottom: 22px;
}
.door h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--cream);
}
.door .role {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--honey);
  margin-bottom: 8px;
}
.door p { color: var(--text-dim); font-size: 0.94rem; margin-top: 10px; text-align: left; }

/* ---- The eight questions ---- */
.questions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .questions { grid-template-columns: 1fr; } }
.q {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 236, 200, 0.035);
  border: 1px solid rgba(255, 225, 180, 0.09);
}
.q .num {
  font-family: var(--serif);
  color: var(--honey-deep);
  font-size: 0.9rem;
  min-width: 1.4em;
}
.q .text { font-family: var(--serif); color: var(--text); font-size: 1.02rem; line-height: 1.45; }
.q .ans { display: block; color: var(--text-fade); font-size: 0.82rem; font-family: var(--sans); margin-top: 4px; }

/* ---- Band ---- */
.band { text-align: center; padding: 44px 32px; }
.band .eyebrow { margin-bottom: 18px; }
.band h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: var(--cream);
  line-height: 1.35;
  max-width: 22ch;
  margin: 0 auto;
}
.band p { color: var(--text-dim); margin-top: 18px; max-width: 54ch; margin-left: auto; margin-right: auto; }
/* A phone inside the band rather than beside it, so the band stays a band.
   Small is the right size here: the comparison's whole argument is which of
   the two hives is fuller, and that survives being shrunk. */
.band figure { margin: 34px auto 0; max-width: 250px; }

/* ---- Footer ---- */
footer {
  border-top: 1px solid rgba(255, 225, 180, 0.07);
  padding: 54px 0 70px;
  margin-top: 40px;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
footer .brand {
  font-family: var(--serif);
  letter-spacing: 0.36em;
  color: var(--cream);
  font-size: 1rem;
}
footer .fnote { color: var(--text-fade); font-size: 0.82rem; margin-top: 12px; max-width: 36ch; }
footer nav { display: flex; flex-direction: column; gap: 10px; }
footer nav a { color: var(--text-dim); font-size: 0.9rem; }
footer nav a:hover { color: var(--cream); text-decoration: none; }
footer .cols { display: flex; gap: 64px; flex-wrap: wrap; }

/* ---- Legal / document pages ---- */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 100px;
}
.doc .eyebrow { margin-bottom: 16px; }
.doc h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 2.8rem);
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.doc .updated { color: var(--text-fade); font-size: 0.85rem; margin-bottom: 40px; }
.doc h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--cream);
  margin: 40px 0 12px;
}
.doc p, .doc li { color: var(--text-dim); margin-bottom: 14px; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc .back {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.doc .lead {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
  padding: 22px 24px;
  border-radius: 18px;
  margin-bottom: 36px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #motes { display: none; }
}