/* ==========================================================================
   NITRATE — THE LANDING PAGES  (MOVIES · SERIES)
   Owned by the landing agent.  Pairs with landing.js.  Nothing else.

   Form: a film-lab job ticket.  A ruled ledger at the top, then sections
   announced by a small caption and a hairline that runs to the margin.
   No cards, no accent bars, no gradients.  Colour is only ever severity.
   Every token comes from tokens.css; none are redefined here.
   ========================================================================== */

.lnd {
  padding: 18px var(--pad) 72px;
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
}

/* ------------------------------------------------------------------ slate */
.lnd-slate {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.lnd-slate h2 {
  font-size: 30px;
  letter-spacing: -.035em;
}
.lnd-slate-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;   /* a flex item floors at min-content without this */
}

/* ----------------------------------------------------------------- ledger
   The headline numbers.  Hairline verticals, no boxes.  Digits are the
   loudest thing on the page — that is the point of the page.            */
.lnd-ledger {
  display: flex;
  flex-wrap: wrap;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  padding: 12px 0 11px;
  margin-bottom: 26px;
  row-gap: 14px;
}
.lnd-fig {
  padding: 0 22px;
  border-left: var(--hair) solid var(--rule);
  min-width: 104px;
  flex: 0 0 auto;
}
.lnd-fig:first-child { border-left: 0; padding-left: 0; }
.lnd-fig b {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
}
.lnd-fig b .u {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 5px;
}
.lnd-fig-k {
  display: block;
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.lnd-fig-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 2px;
  white-space: nowrap;
}
.lnd-fig.is-hot b { color: var(--accent); }

/* ---------------------------------------------------------------- section */
.lnd-sec { margin-bottom: 34px; }
.lnd-sec-hd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.lnd-sec-hd h3 {
  font-size: 12px;
  letter-spacing: .13em;
  white-space: nowrap;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lnd-rule {
  flex: 1 1 auto;
  min-width: 16px;
  height: 0;
  border-top: var(--hair) solid var(--rule);
  transform: translateY(-4px);
}
.lnd-sec-meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the route into the screener */
.lnd-jump {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding: 2px 0 2px 10px;
  white-space: nowrap;
}
.lnd-jump:hover { color: var(--accent); }
.lnd-jump::after { content: " \2192"; }

/* --------------------------------------------------------------- calendar
   COMING SOON.  A date gutter on the left, rows to the right.  Grouped by
   the server's pre-formatted air_date so a day never splits at midnight UTC. */
.lnd-cal { border-top: var(--hair) solid var(--rule); }
.lnd-day { display: flex; align-items: flex-start; }
.lnd-day + .lnd-day { border-top: var(--hair) solid var(--rule); }
.lnd-day-hd {
  flex: 0 0 128px;
  padding: 7px 12px 8px 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1.3;
}
.lnd-day-d { display: block; color: var(--ink); letter-spacing: .04em; }
.lnd-day-rel {
  display: block;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}
.lnd-day.is-today .lnd-day-d { color: var(--accent); }
.lnd-day.is-today .lnd-day-rel { color: var(--accent); }
.lnd-day-rows { flex: 1 1 auto; min-width: 0; }

.lnd-up {
  appearance: none;
  background: transparent;
  display: grid;
  grid-template-columns: 30px 74px minmax(130px, .8fr) minmax(0, 2.4fr) 116px 84px;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 5px 6px 5px 0;
  min-height: 34px;
}
.lnd-up + .lnd-up { border-top: var(--hair) solid var(--rule); }
.lnd-up.is-link { cursor: pointer; }
.lnd-up.is-link:hover { background: var(--panel); }
.lnd-up:not(.is-link) { cursor: default; }

/* display:block matters — a bare <span> is inline, and an inline box ignores
   width/aspect-ratio.  Inside .lnd-up it was blockified by the grid and looked
   fine; inside the poster strip it was not, and every card sized itself to the
   poster's natural width. */
.lnd-art {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--panel-2);
  aspect-ratio: 2 / 3;
  width: 30px;
}
/* absolute, so DOM order decides: the poster covers the initials plate.  A
   static img would paint UNDER the positioned plate whatever the order. */
.lnd-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lnd-art-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  color: var(--ink);
  opacity: .55;
  letter-spacing: .04em;
}

.lnd-up-code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
  white-space: nowrap;
}
.lnd-up-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lnd-up-sub {
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lnd-up-net {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lnd-up-mark {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
}
.lnd-up-mark.is-have { color: var(--ok); }
.lnd-up-mark.is-missing { color: var(--accent); }

/* release window: cinema / physical / digital */
.lnd-win {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: var(--hair) solid var(--rule);
  padding: 1px 5px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ strip
   RECENTLY ADDED.  A contact sheet that scrolls sideways.               */
.lnd-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}
.lnd-card {
  flex: 0 0 128px;
  /* without this the flex item floors at min-content, and the nowrap caption
     line ("2026 · 24 ep · 45.1 GiB · 4d ago") drags every card 50px wider */
  min-width: 0;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.lnd-card .lnd-art { width: 128px; }
.lnd-card:hover { outline: var(--hair) solid var(--rule); outline-offset: 3px; }
.lnd-card-t {
  width: 128px;
  margin-top: 6px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lnd-card-m {
  display: block;
  width: 128px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lnd-card-m + .lnd-card-m { margin-top: 0; }

/* ------------------------------------------------------------------ table */
/* fixed layout + declared <col> widths: a long title ellipses inside its own
   cell instead of shouldering the table off the page */
.lnd-tbl { width: 100%; table-layout: fixed; }
.lnd-tbl th {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 8px 5px 0;
  border-bottom: var(--hair) solid var(--rule);
  white-space: nowrap;
}
.lnd-tbl td {
  padding: 5px 8px 5px 0;
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: baseline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lnd-tbl th.num, .lnd-tbl td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 16px;
}
.lnd-tbl td.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.lnd-tbl td.wrapy { white-space: normal; overflow: visible; }
.lnd-flagname { font-weight: 700; }
/* hover fill, matching the screener's row convention — not a zebra stripe */
.lnd-tbl tbody tr.is-link { cursor: pointer; }
.lnd-tbl tbody tr.is-link:hover > td { background: var(--panel); }
.lnd-tbl .t-name { color: var(--ink); font-weight: 600; }
.lnd-tbl td.dim { color: var(--muted); }

.lnd-scroll {
  max-height: 456px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: var(--hair) solid var(--rule);
}
.lnd-scroll .lnd-tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ground);
}

/* the kind marker: series / anime */
.lnd-kind {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------------- bars */
.lnd-bar {
  display: block;
  height: 4px;
  background: var(--panel-2);
  width: 100%;
  min-width: 60px;
}
.lnd-bar i { display: block; height: 100%; background: var(--muted); }
.lnd-bar.sev-crit i { background: var(--crit); }
.lnd-bar.sev-warn i { background: var(--warn); }
.lnd-bar.sev-info i { background: var(--muted); }
td.lnd-barcell { width: 26%; padding-right: 0; }

/* ------------------------------------------------------- actionable flags */
.lnd-todo { margin-top: 14px; }
.lnd-todo-hd {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: var(--hair) solid var(--rule);
  margin-bottom: 6px;
}
.lnd-todo-hd b { color: var(--ink); font-weight: 700; }
.lnd-names { display: flex; flex-wrap: wrap; gap: 0 6px; margin-bottom: 16px; }
.lnd-names:last-child { margin-bottom: 0; }
.lnd-name {
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  color: var(--ink-2);
  text-align: left;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lnd-name:hover { color: var(--accent); }
.lnd-name::after { content: " \00b7"; color: var(--rule); padding-left: 5px; }
.lnd-name:last-child::after { content: ""; }
.lnd-more {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  border: 0;
  padding: 2px 0;
  cursor: pointer;
}
.lnd-more:hover { color: var(--accent); }

/* ------------------------------------------------------------------- grid */
.lnd-cols {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.lnd-panel h4 {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
  font-weight: 700;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: var(--hair) solid var(--rule);
}

/* ------------------------------------------------------------------ notes */
.lnd-note {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 8px;
  max-width: 74ch;
}
.lnd-empty {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 0;
  border-top: var(--hair) solid var(--rule);
}
.lnd-empty.is-err { color: var(--crit); text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .lnd-up { grid-template-columns: 30px 74px minmax(120px, 1.2fr) minmax(0, 1.5fr) 84px; }
  .lnd-up-net { display: none; }
}
@media (max-width: 860px) {
  .lnd-up { grid-template-columns: 30px 70px minmax(0, 1fr) 78px; }
  .lnd-up-sub { display: none; }
  .lnd-day-hd { flex-basis: 96px; }
  .lnd-slate h2 { font-size: 22px; }
  .lnd-fig b { font-size: 21px; }
  .lnd-fig { padding: 0 14px; min-width: 88px; }
  /* the section caption, its rule and its meta stop competing for one line */
  .lnd-sec-hd { flex-wrap: wrap; row-gap: 2px; }
  .lnd-sec-hd h3 { flex: 0 0 auto; }
  .lnd-rule { order: 3; flex-basis: 100%; transform: none; margin-top: 5px; }
  .lnd-sec-meta { white-space: normal; }
}
@media (max-width: 620px) {
  .lnd-day { display: block; }
  .lnd-day-hd { padding-bottom: 2px; }
  .lnd-up { grid-template-columns: 30px 66px minmax(0, 1fr) 74px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   2026-08-10 redesign. The page opens with a decision, not an inventory:
   one film, big enough to look at, with the rule that chose it stated.
   The ambient wash is that title's OWN extracted poster tint - the only
   site in the world that can colour its page from this collection.
   ───────────────────────────────────────────────────────────────────── */
.lnd-hero{
  position:relative; margin:0 0 6px; padding:30px 18px 26px; overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.lnd-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 140% at 12% 0%, var(--tint) 0%, transparent 62%);
  opacity:.30; pointer-events:none;
}
.lnd-hero-eye{
  position:relative; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:16px;
}
.lnd-hero-body{position:relative; display:flex; gap:24px; align-items:flex-start}
.lnd-hero-art{flex:0 0 auto; border-radius:2px; overflow:hidden; border:1px solid var(--rule)}
.lnd-hero-art img{display:block; width:100%}
.lnd-hero-txt{min-width:0; flex:1 1 auto; padding-top:2px}
.lnd-hero-title{
  font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.035em;
  line-height:.98; margin:0 0 10px; color:var(--ink); text-wrap:balance;
}
.lnd-hero-meta{
  display:flex; flex-wrap:wrap; gap:7px; align-items:baseline;
  font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--muted);
  letter-spacing:.04em; margin-bottom:12px;
}
.lnd-hero-dot{opacity:.5}
.lnd-hero-sum{
  margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--ink-2); max-width:62ch;
}
.lnd-hero-acts{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px}
.lnd-hero-more{
  font:inherit; font-size:12.5px; letter-spacing:.02em;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:2px; padding:7px 14px; cursor:pointer;
}
.lnd-hero-more:hover{color:var(--ink); outline:1px solid var(--rule)}
.lnd-hero-why{
  margin:0; font-family:ui-monospace,Menlo,monospace; font-size:11px;
  color:var(--muted); display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.lnd-hero-score{
  font-size:15px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* rails — the collection, scannable, at a size worth looking at */
.lnd-railwrap{margin:0 0 4px}
.lnd-rail{
  display:flex; gap:12px; overflow-x:auto; padding:4px 18px 18px;
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
.lnd-rail::-webkit-scrollbar{height:7px}
.lnd-rail::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.lnd-card{
  flex:0 0 132px; scroll-snap-align:start; display:flex; flex-direction:column; gap:5px;
  background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit;
}
.lnd-card .lnd-art{
  width:132px; height:198px; border-radius:2px; overflow:hidden;
  border:1px solid var(--rule); display:block;
}
.lnd-card .lnd-art img{width:100%; height:100%; object-fit:cover; display:block}
.lnd-card:hover .lnd-art{outline:2px solid var(--accent); outline-offset:-1px}
.lnd-card-t{
  font-size:12px; color:var(--ink); line-height:1.3; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lnd-card-s{
  font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.lnd-card-when{
  font-family:ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); font-weight:700;
}
.lnd-rail-empty{margin:0 18px 18px; font-size:13px; color:var(--muted)}

@media (prefers-reduced-motion:reduce){ .lnd-rail{scroll-behavior:auto} }
@media (max-width:760px){
  .lnd-hero-body{flex-direction:column; gap:16px}
  .lnd-hero-art{width:132px}
  .lnd-card{flex-basis:112px}
  .lnd-card .lnd-art{width:112px; height:168px}
}