/* ---- rangeer (Rangeer — Scale models, kits & model railway 323) ------------
   THE STRUCTURAL MOVE: THE CATALOGUE IS DRAWN AS A PLAN. The gaps between the
   tiles are closed to nothing and replaced by hairline lead-grey rules — one
   down every gutter, one along every row — so the six portraits sit inside a
   ruled frame the way parts sit on a drawing sheet, uniform in aspect and
   height, rows lining up dead flat instead of staggering. Every caption stacks
   BENEATH its picture and never over it: the title first, the category dropped
   a size into quiet tracked caps under it, then the rand figure. Cobalt — the
   blue off a boxed enamel tin — lands exactly twice per tile, on the price and
   on the buy slab, and nowhere else on the page. The masthead above it is kept
   deliberately shallow so the plan breaks the fold on the first scroll.
   `order` appears only on the children of .sc-buy-card, which is a product
   tile; nothing in this block touches the header, the nav, or the order,
   position or alignment of a single item inside them. --------------------- */
body.t-rangeer {
  background: #f7f6f1;
  color: #23252a;
  --rg-blue: #1e4fd0;
  --rg-blue-hi: #163fab;
  --bg-flat: #f7f6f1;
  --header-bg: #f7f6f1;
  --surface: #f7f6f1;
  --surface-2: #f1f0ea;
  --line: #d6d6cf;
  --line-strong: #b6b6ad;
  --heading: #16181c;
  --text: #23252a;
  --muted: #75766f;
  --radius: 0;
  --shadow: none;
}

/* a thin bar the same bone as the paper, closed with one hairline — the same
   weight of line the catalogue is ruled with. Colour and type only. */
body.t-rangeer .sf-head, body.t-rangeer .sf-header,
body.t-rangeer .sf-foot, body.t-rangeer .sf-footer, body.t-rangeer .sf-cats {
  background: #f7f6f1; border-color: #d6d6cf;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-rangeer .sf-name, body.t-rangeer .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; font-weight: 600; }

/* COBALT 1 of 2 — a flat enamel slab with no edge on it */
body.t-rangeer .btn.brand { background: var(--rg-blue); border: 0; box-shadow: none; color: #ffffff; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; padding: 13px 26px; }
body.t-rangeer .btn.brand:hover { background: var(--rg-blue-hi); color: #ffffff; }

/* A MASTHEAD, NOT A POSTER — three panels cross-fading at barely two fifths of
   the window, so the ruled plan underneath is already showing before you touch
   the scroll wheel. Copy centred on the midline, never right. */
body.t-rangeer .sc-hero { min-height: 42vh; padding: 104px 20px 84px; }
body.t-rangeer .sc-hero h1 { font-size: clamp(24px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 12px; }

/* the only thing that introduces the catalogue is a title block: small, tracked
   open, hard left above the top rule, the way a sheet is labelled */
body.t-rangeer .sc-buygrid .sc-h2 { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.26em; font-weight: 600; color: var(--muted); margin: 0 0 14px; }

/* THE PLAN — three equal columns, no gap at all, and hairlines ruled down the
   gutters and along the rows so the tiles sit inside a drawn frame */
body.t-rangeer .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
body.t-rangeer .sc-buy-card { align-items: flex-start; text-align: left; padding: 22px 22px 30px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.t-rangeer .sc-buy-media img { aspect-ratio: 3 / 4; }

/* the caption stacks under the picture — title, then the category quieter, then
   COBALT 2 of 2 on the rand figure. `order` here is inside the product tile. */
body.t-rangeer .sc-buy-t { order: 1; margin-top: 18px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
body.t-rangeer .sc-buy-cat { order: 2; margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: 0.2em; font-weight: 500; }
body.t-rangeer .sc-buy-p { order: 3; margin-top: 12px; color: var(--rg-blue); font-size: 15px; font-weight: 700; }
body.t-rangeer .sc-buy-form, body.t-rangeer .sc-buy-btn { order: 4; }

/* four landscape tiles under the plan — wide where the catalogue is tall, so
   the two blocks never read as the same grid twice */
body.t-rangeer .sc-strip { padding: 44px 20px 10px; }
body.t-rangeer .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.t-rangeer .sc-strip-img { aspect-ratio: 16 / 10; border: 1px solid var(--line); }
body.t-rangeer .sc-strip-label { text-align: left; margin-top: 9px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; }

/* the first prose on the page, and it arrives ruled off from the tiles above */
body.t-rangeer .sc-about-split { padding: 68px 20px 72px; gap: 48px; border-top: 1px solid var(--line); }

/* the finished layout at eye level, edge to edge, carrying one line */
body.t-rangeer .sc-banner { min-height: 56vh; display: grid; align-content: center; margin: 0 calc(50% - 50vw); }

/* the quietest thing on the page and the only one that asks for anything */
body.t-rangeer .sc-contact-band { background: var(--surface-2); border-top: 1px solid var(--line); padding: 56px 0 64px; }

@media (max-width: 760px) {
  body.t-rangeer .sc-buy-grid { grid-template-columns: minmax(0, 1fr); }
  body.t-rangeer .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the paper goes to graphite and the enamel cobalt is lifted to the
   blue a tin throws back under a bench lamp, so the price and the buy slab
   still carry. The rules stay a hairline lighter than the ground, so the plan
   is still drawn rather than boxed. */
html[data-theme="dark"] body.t-rangeer {
  background: #16171a;
  color: #d3d4d0;
  --rg-blue: #7fa8ff;
  --rg-blue-hi: #9dbcff;
  --bg-flat: #16171a;
  --header-bg: #16171a;
  --surface: #16171a;
  --surface-2: #1c1d21;
  --line: #2b2c31;
  --line-strong: #3c3e44;
  --heading: #f2f1ec;
  --text: #d3d4d0;
  --muted: #85867f;
}
html[data-theme="dark"] body.t-rangeer .sf-head, html[data-theme="dark"] body.t-rangeer .sf-header,
html[data-theme="dark"] body.t-rangeer .sf-foot, html[data-theme="dark"] body.t-rangeer .sf-footer,
html[data-theme="dark"] body.t-rangeer .sf-cats { background: #16171a; border-color: #2b2c31; }
html[data-theme="dark"] body.t-rangeer .btn.brand { background: var(--rg-blue); color: #10131a; }
html[data-theme="dark"] body.t-rangeer .btn.brand:hover { background: var(--rg-blue-hi); color: #10131a; }