@charset "utf-8";

:root {
  --pennoncel: #10091e;
  --adze: #0a0512;
  --latchkey: #1d152e;
  --brookmint: #241c38;
  --doorknocker: #31284b;
  --sedgewood: #413960;
  --meander: #564e7e;
  --arrowwood: #00d6cb;
  --zephyrwind: #ff7083;
  --buckland: #927ef1;
  --lobscouse: #ffb3bd;
  --griddlecake: #4bd28f;
  --zenith: #f3f2f8;
  --crag: #cbc8da;
  --limekiln: #9591ac;
  --bulrush: linear-gradient(135deg, #ff576d 0%, #f43460 100%);
  --brigantine: 0 0 0 3px rgba(255, 87, 109, .34);
  --brockhole: 0 20px 44px -26px rgba(2, 8, 16, .95);
  --turnstile: "Familjen Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --capercaillie: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oystercatcher: 60px;
  --eaglestone: 14px;
  --snowdrop: 20px;
  --riprapwork: 13px;
  --turfhouse: 9px;
  --caravel: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0; background: var(--pennoncel); color: var(--zenith);
  /* the drawer parks off-canvas to the right; clip keeps it out of the page's
     scroll box without turning body into a scroll container (sticky survives) */
  overflow-x: clip;
  font: 400 15px/1.65 var(--capercaillie);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(78% 46% at 14% 0%, rgba(0, 214, 203, .10), transparent 62%),
    radial-gradient(62% 40% at 92% 8%, rgba(255, 112, 131, .07), transparent 64%);
  background-attachment: fixed;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--arrowwood); outline-offset: 2px; border-radius: 4px; }

.salterns {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tuckshop {
  position: absolute; left: 10px; top: -60px; z-index: 200; padding: 11px 18px;
  border-radius: var(--turfhouse); background: var(--brookmint); color: var(--zenith);
  transition: top .18s;
}
.tuckshop:focus { top: 10px; }

.grubstake { width: 100%; max-width: var(--caravel); margin-inline: auto; padding-inline: 14px; }

/* --------------------------------------------------------------- header -- */
.carminered {
  position: sticky; top: 0; z-index: 60; background: rgba(6, 19, 33, .92);
  border-bottom: 1px solid var(--sedgewood); backdrop-filter: blur(10px);
}
.carminered__bar {
  height: var(--oystercatcher); display: flex; align-items: center; gap: 10px;
}
.railhead { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.railhead__type { display: grid; line-height: 1; }
.railhead__name {
  font: 800 clamp(17px, 5vw, 20px)/1 var(--turnstile); letter-spacing: -.4px;
  color: var(--zenith);
}
.railhead__name em { font-style: normal; color: var(--zephyrwind); }
.railhead__sub {
  font: 600 8.5px/1 var(--capercaillie); letter-spacing: 3.1px; margin-top: 4px;
  color: var(--limekiln); text-transform: uppercase;
}
.quirewood { display: none; min-width: 0; }
.sheepwalk {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
  border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--crag);
  white-space: nowrap; transition: background .16s, color .16s;
}
.sheepwalk:hover { background: var(--brookmint); color: var(--zenith); }
.sheepwalk.is-bailey { background: var(--doorknocker); color: var(--zenith); font-weight: 600; }
.sheepwalk.is-bailey svg { color: var(--arrowwood); }
.sheepwalk svg { width: 16px; height: 16px; color: var(--limekiln); flex: 0 0 16px; }

.stucco { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* the mobile bar is logo - register - burger, exactly as the reference has it,
   so log-in only appears once the horizontal nav does */
.stucco .uplands--mezzanine { display: none; }
.stucco .uplands--rookery { padding: 10px 15px; }
.uplands {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border-radius: 999px; border: 1px solid transparent;
  font: 700 14px/1 var(--capercaillie); white-space: nowrap;
  transition: transform .16s, box-shadow .16s, background .16s, color .16s;
}
.uplands:hover { transform: translateY(-1px); }
.uplands--is-rimestone { padding: 14px 30px; font-size: 15px; }
.uplands--rookery { background: var(--bulrush); color: #2b0610; box-shadow: 0 10px 30px -12px rgba(255, 87, 109, .70); }
.uplands--rookery:hover { color: #2b0610; box-shadow: 0 14px 36px -12px rgba(255, 87, 109, .86); }
.uplands--mezzanine { border-color: var(--meander); color: var(--zenith); }
.uplands--mezzanine:hover { background: var(--brookmint); }
.uplands--sm { padding: 8px 14px; font-size: 13px; }

.riffleway {
  width: 42px; height: 42px; flex: 0 0 42px;
  /* a column flexbox, not a grid: grid gave each bar its own stretched row and
     spread them 14px apart no matter what margin they carried */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--riprapwork); border: 1px solid var(--meander); background: var(--brookmint);
}
.riffleway span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--zenith); }

/* ---------------------------------------------------------------- drawer -- */
/* a viewport-sized clipping host: the drawer parks off-canvas inside it, so
   the slide never widens the page's own scrollable box */
.wintergreen {
  position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none;
}
/* only the panel itself is clickable — everything around it falls through to
   the scrim below, which is what closes the drawer */
.topgallant { pointer-events: auto; }
.topgallant {
  position: absolute; inset: 0 0 0 auto; width: min(310px, 86vw);
  background: var(--latchkey); border-left: 1px solid var(--sedgewood);
  padding: 14px 12px 30px; overflow-y: auto; overflow-x: hidden; transform: translateX(103%);
  visibility: hidden; transition: transform .26s ease, visibility .26s;
}
.topgallant.is-fascia { transform: translateX(0); visibility: visible; }
.topgallant__top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 14px; }
.topgallant__close {
  width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--sedgewood); background: var(--brookmint);
  color: var(--crag); transition: color .16s, border-color .16s;
}
.topgallant__close:hover { color: var(--zenith); border-color: var(--meander); }
.topgallant__close svg { width: 17px; height: 17px; }
.pennyroyal + .pennyroyal {
  border-top: 1px solid var(--sedgewood); margin-top: 10px; padding-top: 12px;
}
.pennyroyal__title {
  font: 700 10.5px/1 var(--capercaillie); letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--limekiln); padding: 4px 10px 8px;
}
.topgallant .sheepwalk { display: flex; border-radius: var(--turfhouse); padding: 10px 12px; }
.topgallant__cta { padding: 14px 10px 0; display: grid; gap: 8px; }
.topgallant__cta .uplands { width: 100%; }
.slatework {
  position: fixed; inset: 0; z-index: 70; background: rgba(2, 8, 16, .72);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .22s;
}
.slatework.is-fascia { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------ main -- */
.mireford { min-height: 62vh; }
.racklight { padding-block: 16px 34px; display: grid; gap: 26px; }
.racklight > * { min-width: 0; }

/* ---------------------------------------------------------------- banner -- */
.balsa {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--snowdrop); border: 1px solid var(--meander);
  box-shadow: var(--brockhole);
}
.balsa__art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.balsa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 66% at 24% 26%, rgba(0, 214, 203, .17), transparent 64%),
    radial-gradient(44% 58% at 84% 74%, rgba(255, 112, 131, .13), transparent 66%),
    linear-gradient(180deg, rgba(4, 15, 26, .56) 0%, rgba(4, 15, 26, .26) 40%, rgba(4, 15, 26, .92) 100%);
}
.balsa__body {
  position: relative; padding: 30px 18px 34px; display: grid; gap: 13px;
  justify-items: center; text-align: center;
}
.balsa__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 11.5px/1 var(--capercaillie); letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--lobscouse);
}
.balsa__kicker::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--arrowwood);
}
.balsa__big {
  margin: 0; font: 800 clamp(25px, 6.1vw, 43px)/1.1 var(--turnstile);
  letter-spacing: -1.1px; text-wrap: balance; text-shadow: 0 6px 26px rgba(0, 0, 0, .62);
}
.balsa__big span { display: block; }
.balsa__big span + span {
  background: linear-gradient(96deg, var(--lobscouse), var(--arrowwood) 56%, var(--buckland));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.balsa__sub {
  margin: 0; max-width: 48ch; font-size: 14px; color: #d8e8f7;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
.balsa__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0;
  padding: 0; list-style: none;
}
.balsa__trust li {
  display: flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: rgba(9, 32, 54, .64); border: 1px solid var(--meander); backdrop-filter: blur(6px);
}
.balsa__trust b { font: 700 13px/1 var(--turnstile); color: var(--zenith); }
.balsa__trust span { font-size: 11px; letter-spacing: .3px; color: var(--crag); }

/* ----------------------------------------------------------------- pills -- */
.privet {
  display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 10px;
  /* the shell's own gap sits between the two, so the pull has to clear it
     before it can overlap the banner's bottom edge the way the reference does */
  margin-top: -46px; padding: 0 2px 6px; overflow-x: auto; position: relative; z-index: 2;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.privet::-webkit-scrollbar { display: none; }
.mitre {
  position: relative; display: flex; align-items: center; gap: 11px; scroll-snap-align: start;
  padding: 9px 34px 9px 9px; border-radius: 999px; color: #04121f; font-weight: 700;
  font-size: 14px; box-shadow: var(--brockhole); overflow: hidden;
}
.mitre::after {
  content: ""; position: absolute; right: 15px; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); opacity: .8;
}
.mitre__art {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(4, 18, 31, .22);
  border: 1px solid rgba(4, 18, 31, .2);
}
.mitre__art svg { width: 19px; height: 19px; }
.mitre:hover { transform: translateY(-1px); }

/* ----------------------------------------------------------------- chips -- */
.linchpin { display: flex; align-items: center; gap: 8px; }
.linchpin__search {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bulrush); color: #2b0610;
}
.linchpin__search svg { width: 17px; height: 17px; }
.linchpin__scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.linchpin__scroll::-webkit-scrollbar { display: none; }
.crown {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--brookmint); border: 1px solid var(--sedgewood); color: var(--crag);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .16s, color .16s;
}
.crown:hover { background: var(--doorknocker); color: var(--zenith); }
.crown svg { width: 15px; height: 15px; color: var(--arrowwood); }

/* ---------------------------------------------------------------- shelves -- */
.harrowfield { display: block; }
.harrowfield__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.harrowfield__title {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font: 700 clamp(17px, 4.2vw, 22px)/1.2 var(--turnstile); letter-spacing: -.3px;
}
.harrowfield__title svg { width: 20px; height: 20px; color: var(--arrowwood); flex: 0 0 auto; }
.harrowfield__tools { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.harrowfield__all {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--meander); font-size: 13px; font-weight: 600; color: var(--crag);
}
.harrowfield__all:hover { color: var(--zenith); border-color: var(--arrowwood); }
.harrowfield__arw {
  width: 34px; height: 34px; display: none; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brookmint); border: 1px solid var(--sedgewood);
  color: var(--crag);
}
.harrowfield__arw:hover { color: var(--zenith); border-color: var(--meander); }
.harrowfield__arw[disabled] { opacity: .3; cursor: default; }
.harrowfield__arw svg { width: 15px; height: 15px; }

.stipple {
  display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px;
  align-items: start; overflow-x: auto; padding: 5px 0 9px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.stipple::-webkit-scrollbar { display: none; }
.witchhazel {
  position: relative; display: block; overflow: hidden; scroll-snap-align: start;
  aspect-ratio: 5 / 7; align-self: start;
  border-radius: var(--riprapwork); background: var(--brookmint); border: 1px solid var(--sedgewood);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.witchhazel:hover { transform: translateY(-3px); border-color: var(--arrowwood); box-shadow: var(--brockhole); }
.witchhazel img { width: 100%; height: 100%; object-fit: cover; }
.witchhazel__rtp {
  position: absolute; top: 7px; left: 7px; padding: 4px 8px; border-radius: 999px;
  background: rgba(4, 15, 26, .82); border: 1px solid var(--meander);
  font: 700 10.5px/1 var(--capercaillie); letter-spacing: .3px; color: var(--lobscouse);
}
.witchhazel__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 25, 43, .62); opacity: 0; transition: opacity .2s;
}
.witchhazel:hover .witchhazel__play { opacity: 1; }
.witchhazel__play span {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bulrush); color: #2b0610;
}
.witchhazel__play svg { width: 17px; height: 17px; margin-left: 2px; }
/* the reference prints nothing over the artwork, so the title rides in with
   the hover veil instead of sitting on top of the provider's own logo */
.witchhazel__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px;
  font-size: 11.5px; font-weight: 600; color: var(--zenith);
  background: linear-gradient(180deg, transparent, rgba(4, 15, 26, .96));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity .2s;
}
.witchhazel:hover .witchhazel__name, .witchhazel:focus-visible .witchhazel__name { opacity: 1; }

/* ---------------------------------------------------------------- ticker -- */
.husbandman {
  border-block: 1px solid var(--sedgewood); padding: 12px 0;
  display: grid; gap: 9px;
}
.husbandman__label {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0;
  font: 700 11px/1 var(--capercaillie); letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--limekiln);
}
.husbandman__label svg { width: 14px; height: 14px; color: var(--zephyrwind); }
.husbandman__scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.husbandman__scroll::-webkit-scrollbar { display: none; }
.husbandman__item {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px;
  background: var(--brookmint); border: 1px solid var(--sedgewood); white-space: nowrap;
}
.husbandman__item img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 30px; }
.husbandman__item b { display: block; font-size: 12px; font-weight: 600; color: var(--crag); max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
.husbandman__item span { font: 700 12.5px/1.4 var(--turnstile); color: var(--griddlecake); }

/* ---------------------------------------------------------- wins + mults -- */
.shoal { display: grid; gap: var(--eaglestone); }
.shoal > * { min-width: 0; }
.shoal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shoal__card {
  position: relative; display: block; padding: 26px 8px 12px; border-radius: var(--riprapwork);
  background: var(--latchkey); border: 1px solid var(--sedgewood); text-align: center;
  transition: border-color .2s, transform .2s;
}
.shoal__card:hover { border-color: var(--arrowwood); transform: translateY(-3px); }
.shoal__rank {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  min-width: 30px; padding: 3px 9px 4px; border-radius: 0 0 9px 9px;
  background: var(--doorknocker); border: 1px solid var(--meander); border-top: 0;
  font: 700 12px/1 var(--turnstile); color: var(--lobscouse);
}
.shoal__card img {
  width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover;
  border-radius: var(--turfhouse);
}
/* Three cards across leaves about 74px of text at 320px, and an 11-character
   money string in the display face needs 117px there — measured, not guessed.
   The amount therefore takes the body face, which is far narrower, and sizes
   against the card itself so it holds for any future type pairing. The vw
   clamp is the fallback for engines without container units. */
.shoal__card { container-type: inline-size; }
.shoal__amt {
  display: block; margin-top: 9px; letter-spacing: -.2px; color: var(--griddlecake);
  font: 700 clamp(11px, 3.6vw, 14px)/1.2 var(--capercaillie);
}
.shoal__amt { font-size: clamp(11px, 13cqi, 14px); }
.shoal__name { display: block; margin-top: 3px; font-size: 11px; color: var(--crag); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shoal__by {
  display: inline-block; margin-top: 7px; padding: 4px 10px; border-radius: 999px;
  background: var(--doorknocker); font-size: 10.5px; font-weight: 600; color: var(--limekiln);
}

.sequoia { display: grid; gap: 7px; }
.sequoia > *, .shoal__grid > * { min-width: 0; }
.sequoia__row {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--riprapwork);
  background: var(--latchkey); border: 1px solid var(--sedgewood); transition: border-color .2s;
  min-width: 0; overflow: hidden;
}
.sequoia__row:hover { border-color: var(--arrowwood); }
.sequoia__row img { width: 36px; height: 36px; border-radius: var(--turfhouse); object-fit: cover; flex: 0 0 36px; }
.sequoia__who { min-width: 0; flex: 1 1 auto; }
.sequoia__who b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sequoia__who span { font-size: 11.5px; color: var(--limekiln); }
.sequoia__val { margin-left: auto; text-align: right; flex: 0 0 auto; }
.sequoia__val b { display: block; font: 700 13px/1.3 var(--turnstile); color: var(--griddlecake); }
.sequoia__val span {
  display: inline-block; margin-top: 3px; padding: 3px 9px; border-radius: 999px;
  background: rgba(75, 210, 143, .14); border: 1px solid rgba(75, 210, 143, .3);
  font: 700 11px/1 var(--capercaillie); color: var(--griddlecake);
}

/* -------------------------------------------------------------- promotions -- */
.abutment { display: grid; gap: var(--eaglestone); }
.abutment > *, .racklight > * > * { min-width: 0; }
.brushwood {
  display: grid; gap: 9px; padding: 20px 18px; border-radius: var(--riprapwork);
  background: linear-gradient(168deg, var(--brookmint), var(--latchkey));
  border: 1px solid var(--sedgewood);
}
.brushwood__kicker {
  font: 700 10.5px/1 var(--capercaillie); letter-spacing: 1.9px; text-transform: uppercase;
  color: var(--arrowwood);
}
.brushwood__title { margin: 0; font: 800 clamp(20px, 5vw, 25px)/1.15 var(--turnstile); letter-spacing: -.5px; }
.brushwood__line { margin: 0; font-size: 14px; color: #cfe2f2; }
.brushwood__meta { margin: 2px 0 0; font-size: 12px; color: var(--limekiln); }
.brushwood .uplands { justify-self: start; }

/* ------------------------------------------------------------------ band -- */
.bowyer {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: 26px 20px; border-radius: var(--snowdrop);
  background: linear-gradient(104deg, #31284b 0%, #413960 58%, #241c38 100%);
  border: 1px solid var(--meander); box-shadow: var(--brockhole);
}
.bowyer__big { margin: 0; font: 800 clamp(24px, 6.4vw, 38px)/1.06 var(--turnstile); letter-spacing: -.8px; }
.bowyer__sub { margin: 0; max-width: 52ch; font-size: 14px; color: #cfe2f2; }

/* ---------------------------------------------------------------- wallet -- */
.ridgeline { display: grid; gap: 12px; justify-items: center; padding-block: 6px; }
.ridgeline__set { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.ridgeline__set img { height: 23px; width: auto; opacity: .88; }
.ridgeline__set img[src$=".webp"] { height: 27px; border-radius: 5px; }
.ridgeline__set--coin img { height: 27px; }
.ridgeline__label {
  margin: 0; font: 700 10.5px/1 var(--capercaillie); letter-spacing: 2.3px;
  text-transform: uppercase; color: var(--limekiln);
}
.ridgeline__more {
  position: relative; display: inline-flex; align-items: center; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--meander); background: var(--brookmint);
  font: 700 12px/1 var(--capercaillie); color: var(--crag);
}

/* --------------------------------------------------------------- article -- */
.junipergrove { margin: 0 0 14px; padding: 0; font-size: 12.5px; color: var(--limekiln); }
.junipergrove ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.junipergrove li + li::before { content: "/"; margin-right: 7px; color: var(--meander); }
.junipergrove a:hover { color: var(--arrowwood); }

.rapeseed {
  position: relative; padding: 26px 18px 30px; border-radius: var(--snowdrop);
  background: var(--latchkey); border: 1px solid var(--sedgewood);
}
.rapeseed h1 {
  margin: 0 0 16px; font: 800 clamp(24px, 6vw, 38px)/1.14 var(--turnstile); letter-spacing: -1px;
}
.rapeseed h2 {
  margin: 32px 0 12px; padding-top: 18px; border-top: 1px solid var(--sedgewood);
  font: 700 clamp(20px, 4.8vw, 27px)/1.22 var(--turnstile); letter-spacing: -.5px;
}
.rapeseed h2::before {
  content: ""; display: block; width: 38px; height: 3px; border-radius: 3px;
  margin-bottom: 13px; background: var(--bulrush);
}
.rapeseed h3 { margin: 24px 0 9px; font: 700 clamp(17px, 4vw, 21px)/1.3 var(--turnstile); color: #f2faff; }
.rapeseed h4 { margin: 19px 0 8px; font-size: 15.5px; font-weight: 700; color: var(--lobscouse); }
.rapeseed p { margin: 0 0 14px; color: #cfe2f2; }
.rapeseed strong { color: var(--zenith); font-weight: 700; }
.rapeseed a { color: var(--arrowwood); text-decoration: underline; text-underline-offset: 2px; }
.rapeseed .uplands, .rafter a { text-decoration: none; }
.rapeseed .uplands--rookery { color: #2b0610; }
.rapeseed .junipergrove a { color: var(--limekiln); text-decoration: none; }
.rapeseed ul, .rapeseed ol { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.rapeseed ul li { position: relative; padding-left: 22px; color: #cfe2f2; }
.rapeseed ul li::before {
  content: ""; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px;
  border-radius: 2px; background: var(--bulrush); transform: rotate(45deg);
}
.rapeseed ol { counter-reset: step; }
.rapeseed ol li { position: relative; padding-left: 34px; color: #cfe2f2; }
.rapeseed ol li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px; width: 23px; height: 23px;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--doorknocker); border: 1px solid var(--meander);
  font: 700 11.5px/1 var(--turnstile); color: var(--arrowwood);
}
.rapeseed li ul { margin: 8px 0 0; }
.rapeseed table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.rapeseed th, .rapeseed td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--sedgewood); }
.rapeseed th {
  font: 700 10.5px/1.3 var(--capercaillie); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--limekiln); background: var(--brookmint); white-space: nowrap;
}
.rapeseed td { color: #cfe2f2; }
.rapeseed tbody tr:hover td { background: rgba(49, 40, 75, .40); }
.rapeseed .is-shieling { text-align: right; white-space: nowrap; }
.rapeseed__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px;
  border: 1px solid var(--sedgewood); border-radius: var(--riprapwork);
}
.rapeseed details {
  margin: 0 0 9px; border: 1px solid var(--sedgewood); border-radius: var(--riprapwork);
  background: var(--brookmint); overflow: hidden;
}
.rapeseed summary {
  padding: 14px 42px 14px 16px; position: relative; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--zenith);
}
.rapeseed summary::-webkit-details-marker { display: none; }
.rapeseed summary::after {
  content: ""; position: absolute; right: 18px; top: 20px; width: 8px; height: 8px;
  border-right: 2px solid var(--arrowwood); border-bottom: 2px solid var(--arrowwood);
  transform: rotate(45deg); transition: transform .2s;
}
.rapeseed details[open] summary::after { transform: rotate(-135deg); top: 23px; }
.rapeseed details > div { padding: 0 16px 14px; }
.rapeseed details p:last-child { margin-bottom: 0; }
.rapeseed__cta {
  margin-top: 26px; padding: 20px 18px; border-radius: var(--riprapwork);
  background: var(--brookmint); border: 1px solid var(--meander); display: grid; gap: 10px;
  justify-items: start;
}
.rapeseed__cta b { font: 700 17px/1.3 var(--turnstile); }
.rapeseed__cta p { margin: 0; }

.rafter {
  margin: 0 0 22px; padding: 16px 18px; border-radius: var(--riprapwork);
  background: var(--brookmint); border: 1px solid var(--sedgewood);
}
.rafter__title {
  margin: 0 0 10px; font: 700 10.5px/1 var(--capercaillie); letter-spacing: 2px;
  text-transform: uppercase; color: var(--limekiln);
}
.rafter ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; counter-reset: none; }
.rafter ol li { padding-left: 18px; position: relative; }
.rafter ol li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--arrowwood);
}
.rafter a { font-size: 13.5px; color: var(--crag); }
.rafter a:hover { color: var(--arrowwood); }

.mizzen { display: none; }
.rapeseed.is-harrow .mizzen {
  display: flex; align-items: center; justify-content: center;
}
.rapeseed.is-harrow .rapeseed__body {
  max-height: 1120px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.mizzen { margin-top: 18px; }

/* ---------------------------------------------------------------- footer -- */
.heliport {
  margin-top: 30px; padding: 30px 18px 34px; border-top: 1px solid var(--sedgewood);
  background: var(--adze); border-radius: var(--snowdrop) var(--snowdrop) 0 0;
}
.heliport__cols { display: grid; gap: 26px; }
.heliport__title {
  margin: 0 0 12px; font: 700 11px/1 var(--capercaillie); letter-spacing: 1.9px;
  text-transform: uppercase; color: var(--zenith);
}
.heliport__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.heliport__list a { font-size: 13.5px; color: var(--crag); }
.heliport__list a:hover { color: var(--arrowwood); }
.heliport__mail a { color: var(--arrowwood); text-decoration: underline; text-underline-offset: 3px; }
.heliport__social { display: flex; flex-wrap: wrap; gap: 9px; }
.heliport__social a {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brookmint); border: 1px solid var(--sedgewood); color: var(--crag);
}
.heliport__social a:hover { color: var(--arrowwood); border-color: var(--arrowwood); }
.heliport__social svg { width: 16px; height: 16px; }
.heliport__badges { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.heliport__badges img { height: 30px; width: auto; opacity: .9; }
.heliport__legal { margin: 0 0 12px; font-size: 12px; line-height: 1.7; color: var(--limekiln); }
.heliport__locale {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 15px;
  border-radius: 999px; border: 1px solid var(--sedgewood); font-size: 12.5px; color: var(--crag);
}
.heliport__locale svg { width: 15px; height: 15px; color: var(--arrowwood); }
.heliport__bottom {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--sedgewood);
  display: grid; gap: 14px;
}

/* ------------------------------------------------------------------- 404 -- */
.javelin { padding: 40px 0 26px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.javelin__code {
  margin: 0; font: 900 clamp(66px, 22vw, 128px)/1 var(--turnstile); letter-spacing: -4px;
  background: linear-gradient(120deg, var(--lobscouse), var(--arrowwood) 52%, var(--buckland));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.javelin h1 { margin: 0; font: 800 clamp(22px, 5.6vw, 32px)/1.2 var(--turnstile); }
.javelin p { margin: 0; max-width: 54ch; color: var(--crag); }
.javelin__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 6px; }
.javelin__links a {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--meander);
  font-size: 13.5px; color: var(--crag);
}
.javelin__links a:hover { color: var(--zenith); border-color: var(--arrowwood); }

.veinstone {
  position: fixed; right: 14px; bottom: 14px; z-index: 55; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; background: var(--bulrush);
  color: #2b0610; box-shadow: var(--brockhole); opacity: 0; visibility: hidden;
  transform: translateY(9px); transition: opacity .2s, transform .2s, visibility .2s;
}
.veinstone.is-fascia { opacity: 1; visibility: visible; transform: none; }
.veinstone svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------ breakpoints -- */
/* 320px is the narrowest phone worth supporting, and the mobile bar there is
   logo + CTA + burger with nothing to give. A two-word CTA — "Open account"
   rather than "Sign up" — pushed the row 1px past the viewport, so the bar
   tightens itself instead of the copy having to stay short. */
@media (max-width: 359px) {
  .carminered__bar { padding-inline: 8px; gap: 8px; }
  .railhead__name { font-size: 15px; }
  .railhead__sub { letter-spacing: 1.4px; }
  .stucco { gap: 6px; }
  .stucco .uplands { padding: 9px 12px; font-size: 12.5px; }
  .riffleway { width: 38px; height: 38px; flex: 0 0 38px; }
}

@media (min-width: 480px) {
  .stipple { grid-auto-columns: 31%; }
  .privet { grid-auto-columns: 46%; }
  .balsa__body { padding: 42px 26px 44px; }
}

@media (min-width: 620px) {
  /* the wide art starts here, and it is composed with the cast flush right,
     so every crop above this width must eat the haze, never the phone */
  .balsa__art { object-position: right center; }
  .grubstake { padding-inline: 18px; }
  .stipple { grid-auto-columns: 23%; }
  .privet { grid-auto-columns: 31%; }
  .abutment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heliport__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rapeseed { padding: 30px 26px 34px; }
  .bowyer { grid-template-columns: 1fr auto; justify-items: start; text-align: left; align-items: center; }
  .bowyer .uplands { justify-self: end; }
}

@media (min-width: 900px) {
  :root { --oystercatcher: 68px; --eaglestone: 16px; }
  .grubstake { padding-inline: 24px; }
  .racklight { padding-block: 22px 44px; gap: 34px; }
  .quirewood {
    display: flex; align-items: center; gap: 2px; margin-left: 8px;
    flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
  }
  .quirewood::-webkit-scrollbar { display: none; }
  .stucco { flex: 0 0 auto; }
  .stucco .uplands--mezzanine { display: inline-flex; }
  .stucco .uplands--rookery { padding: 10px 17px; }
  .riffleway { display: none; }
  .balsa__body {
    padding: 62px 44px 66px; text-align: left; justify-items: start; max-width: 44%;
  }
  .balsa::after {
    background:
      radial-gradient(30% 70% at 20% 42%, rgba(0, 214, 203, .18), transparent 62%),
      radial-gradient(26% 60% at 78% 66%, rgba(255, 112, 131, .15), transparent 64%),
      linear-gradient(92deg, rgba(4, 15, 26, .95) 0%, rgba(4, 15, 26, .80) 34%,
                      rgba(4, 15, 26, .26) 64%, rgba(4, 15, 26, .04) 100%);
  }
  .balsa__sub { max-width: 44ch; }
  .balsa__trust { justify-content: flex-start; }
  .privet { grid-auto-columns: minmax(0, 1fr); margin-top: -62px; }
  .stipple { grid-auto-columns: 17.4%; }
  .harrowfield__arw { display: inline-flex; }
  .abutment { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shoal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .heliport__cols { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 30px; }
  .heliport { padding: 38px 32px 40px; }
  .rapeseed { padding: 38px 38px 42px; }
  .rapeseed ol { columns: auto; }
  .veinstone { right: 22px; bottom: 22px; }
}

@media (min-width: 1180px) {
  .balsa__body { padding: 74px 54px 78px; max-width: 42%; }
  .sheepwalk { padding: 9px 14px; font-size: 14.5px; }
}