/* Public entry points: farm intro strip, package / legal pages, film page, footer links, phone dock.
   These selectors exist only outside the film stage, so the 28-second film renders unchanged. */

/* ---- farm intro strip ---- */
.pub-intro {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 22px 28px; align-items: start;
  padding: 18px 22px 16px; border: 1px solid var(--c-line-hi);
  background: linear-gradient(120deg, rgba(46, 15, 41, 0.92), rgba(31, 9, 29, 0.88));
  position: relative;
}
.pub-intro::before { content: ''; position: absolute; left: -1px; top: -1px; width: 64px; height: 2px; background: var(--c-lime); }
.pi-kicker { color: var(--c-gold); margin-bottom: 8px; }
.pi-title {
  margin: 0 0 8px; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 20px; line-height: 1.25;
  letter-spacing: 0.04em; color: var(--c-ivory);
}
.pi-p { margin: 0 0 7px; font-size: 13px; line-height: 1.55; color: rgba(244, 240, 228, 0.82); max-width: 880px; }
.pi-note { margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: rgba(244, 240, 228, 0.6); letter-spacing: 0.02em; }
.pi-side { display: flex; flex-direction: column; gap: 12px; }
.pi-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pi-link {
  display: flex; align-items: center; min-height: 40px; padding: 8px 12px;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(244, 240, 228, 0.9); text-decoration: none; border: 1px solid var(--c-line-hi); background: rgba(74, 33, 67, 0.35);
  transition: border-color 0.15s, color 0.15s;
}
.pi-link:hover, .pi-link:focus-visible { border-color: var(--c-lime); color: var(--c-lime); }
.pi-link.is-primary { border-color: rgba(200, 245, 66, 0.7); color: var(--c-lime); }
.pi-offer {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; text-decoration: none;
  border: 1px solid rgba(226, 180, 94, 0.55); background: rgba(226, 180, 94, 0.06);
}
.pi-offer:hover, .pi-offer:focus-visible { border-color: var(--c-gold); }
.pi-offer-name { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--c-gold); }
.pi-offer-date { font-size: 11px; color: rgba(244, 240, 228, 0.7); }
.farm-view { grid-template-rows: auto minmax(600px, 1fr) auto; }

/* ---- package / legal / film pages ---- */
.pub-view { padding: 22px; display: flex; justify-content: center; }
.pub-card {
  width: 100%; max-width: 760px; padding: 26px 30px 22px; border: 1px solid var(--c-line-hi);
  background: linear-gradient(180deg, rgba(46, 15, 41, 0.94), rgba(31, 9, 29, 0.94)); position: relative; align-self: flex-start;
}
.pub-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 64px; height: 2px; background: var(--c-lime); }
.pub-kicker { color: var(--c-gold); margin-bottom: 10px; }
.pub-h1 {
  margin: 0 0 6px; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 24px; line-height: 1.2;
  letter-spacing: 0.05em; color: var(--c-ivory);
}
.pub-price { color: var(--c-gold); }
.pub-valid { font-size: 13px; color: var(--c-lime); margin-bottom: 6px; }
.pub-valid[data-open='0'] { color: rgba(244, 240, 228, 0.6); }
.pub-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.pub-h2 {
  margin: 0 0 8px; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ivory);
}
.pub-p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: rgba(244, 240, 228, 0.84); }
.pub-small { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: rgba(244, 240, 228, 0.62); }
.pub-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: rgba(244, 240, 228, 0.88); }
.pub-list li::marker { color: var(--c-lime); }
.pub-contact-q { margin: 0 0 8px; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 17px; letter-spacing: 0.04em; color: var(--c-ivory); }
.pub-contact { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(244, 240, 228, 0.9); }
.pub-link { color: var(--c-lime); text-decoration: underline; text-decoration-color: rgba(200, 245, 66, 0.4); text-underline-offset: 3px; }
.pub-link:hover { text-decoration-color: var(--c-lime); }
.pub-back { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 13px; }

.pub-film { gap: 22px; align-items: flex-start; }
.pf-frame { flex: 0 1 auto; border: 1px solid var(--c-line-hi); background: #000; line-height: 0; }
.pf-video { display: block; width: auto; height: calc(100vh - 160px); max-height: 1350px; min-height: 420px; aspect-ratio: 4 / 5; background: var(--c-bg); }
.pf-side { flex: 0 1 380px; padding-top: 6px; }

/* ---- footer links ---- */
.bb-links { display: flex; gap: 14px; white-space: nowrap; }
.bb-links a { color: rgba(244, 240, 228, 0.62); text-decoration: none; font-size: 10.5px; }
.bb-links a:hover { color: var(--c-ivory); text-decoration: underline; }

/* top navigation: one line per item at every width */
.nav-i { white-space: nowrap; }
@media (max-width: 1599px) { .tb-ctx { display: none; } .nav { gap: 22px; } }
/* five navigation items leave no room for the clock below 1440 px; each view shows its own clock */
@media (max-width: 1439px) { .tb-clock { display: none; } }
@media (max-width: 1199px) and (min-width: 768px) {
  .nav { overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .shell { grid-template-rows: 58px minmax(0, 1fr) auto; }
  .bottombar { flex-wrap: wrap; gap: 6px 18px; padding: 8px 18px; }
}

/* farm overview below 1600 px: the ecosystem is shorter under the intro, so its ring sits closer to the
   counters — tighter counter captions keep them clear of the nearest organism */
@media (max-width: 1599px) and (min-width: 768px) { .eco-c .t-caption { max-width: 132px; line-height: 1.3; } }

/* the organism status chips need the full width of a large screen next to the links */
@media (max-width: 1799px) { .bb-chips { display: none; } }

/* ---- phone quick-control dock (shown by mobile.css) ---- */
.org-dock { display: none; }

@media (max-width: 1199px) and (min-width: 768px) {
  /* layout.css sets 520 px for this width, but `.col > .panel { min-height: 0 }` outranks it */
  .col-c > .p-organism { min-height: 520px; }
  .nav { mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .pub-intro { grid-template-columns: 1fr; }
  .pf-video { height: auto; width: min(100%, 560px); min-height: 0; }
}