/* Sackville London — one stylesheet, no framework. */

/* Palette taken from the reference photograph: a British racing green roadster
   against Dales stone — deep green bodywork, cream windscreen surround and seat
   piping, warm stone walls, gravel, chrome. Neutrals are warm throughout;
   nothing here is a neutral grey. */

:root{
  --bone:#EFEADF;        /* cream — windscreen surround, seat piping */
  --paper:#FAF7F1;
  --paper-2:#F3EFE4;
  --ink:#191C18;         /* warm near-black — tyres, headlamp shadow */
  --ink-2:#4C5249;
  --ink-3:#857F72;       /* Dales stone */
  --line:#DAD3C5;
  --line-2:#C4BCAA;      /* gravel */
  --green:#1D3A2C;       /* racing green, bodywork in shade — the site's ground */
  --green-2:#2C5540;     /* bodywork in light */
  --green-deep:#163023;  /* bodywork in deepest shadow — masthead, footer */
  --green-soft:#E2E9DF;
  --chrome:#B8BDBD;      /* wire wheels, lamp bezels */

  /* type and rules that sit ON the green bodywork */
  --on-green:#EFEADF;
  --on-green-2:#B6C4B8;
  --on-green-line:rgba(239,234,223,.20);
  --on-green-fill:rgba(239,234,223,.07);

  /* Lacquer and chrome. Car paint is a deep colour plus one hard specular
     highlight; polished metal is a light/dark/light band, never a flat tint.
     Both are built from these, so the shine stays consistent site-wide. */
  --lacquer:
    radial-gradient(125% 105% at 20% -12%, rgba(239,234,223,.17), transparent 52%),
    linear-gradient(168deg, #27492F 0%, #1D3A2C 44%, #14291E 100%);
  --chrome-band:linear-gradient(180deg,
    #FBFAF6 0%, #D6DAD8 34%, #8B9391 51%, #EDEAE2 66%, #A9AEAC 100%);
  /* A brighter chrome for small surfaces that carry dark text: the full band
     dips too dark in the middle for a label to stay legible on it. */
  --chrome-pill:linear-gradient(180deg,
    #FCFBF7 0%, #F0EEE7 44%, #D4D8D5 56%, #F6F4EE 100%);
  --chrome-rule:linear-gradient(90deg,
    transparent, rgba(239,234,223,.10) 12%, rgba(239,234,223,.45) 50%,
    rgba(239,234,223,.10) 88%, transparent);
  --gloss-top:inset 0 1px 0 rgba(239,234,223,.22);
  --lift:0 1px 2px rgba(20,34,26,.05), 0 8px 24px -8px rgba(20,34,26,.14);
  --lift-hi:0 2px 4px rgba(20,34,26,.07), 0 16px 40px -12px rgba(20,34,26,.22);

  --cta-from:#35624A;
  --cta-to:#1D3A2C;
  --cta-ink:#FBFAF6;

  --display:"EB Garamond",Georgia,"Times New Roman",serif;
  --body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1060px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bone:#12140F;
    --paper:#181B15;
    --paper-2:#1F231A;
    --ink:#EDEADF;       /* cream type on green-black */
    --ink-2:#A9A897;
    --ink-3:#7C7C6C;
    --line:#2A2E24;
    --line-2:#3A3F32;
    --green:#12281D;     /* the bodywork stays green in the dark; just deeper */
    --green-2:#8FBFA0;   /* lifted, for green type on a dark ground */
    --green-deep:#0D1F16;
    --green-soft:#18241C;
    --chrome:#6E7371;
  --on-green:#EDEADF;
    --on-green-2:#9FAFA2;
    --on-green-line:rgba(237,234,223,.16);
    --on-green-fill:rgba(237,234,223,.05);
    --lacquer:
      radial-gradient(125% 105% at 20% -12%, rgba(237,234,223,.10), transparent 52%),
      linear-gradient(168deg, #193524 0%, #12281D 44%, #0B1B13 100%);
    --chrome-band:linear-gradient(180deg,
      #E8E5DC 0%, #A8AEAB 34%, #6C7371 51%, #D9D6CE 66%, #868C8A 100%);
    --chrome-pill:linear-gradient(180deg,
      #E4E1D8 0%, #CDCAC2 44%, #A6ABA7 56%, #DCD9D1 100%);
    --gloss-top:inset 0 1px 0 rgba(237,234,223,.14);
    --lift:0 1px 2px rgba(0,0,0,.30), 0 8px 24px -8px rgba(0,0,0,.50);
    --lift-hi:0 2px 4px rgba(0,0,0,.36), 0 16px 40px -12px rgba(0,0,0,.62);
    --cta-from:#A8D2B5;
    --cta-to:#7FB394;
    --cta-ink:#0F1F16;
  }
}
:root[data-theme="dark"]{
  --bone:#12140F;
  --paper:#181B15;
  --paper-2:#1F231A;
  --ink:#EDEADF;
  --ink-2:#A9A897;
  --ink-3:#7C7C6C;
  --line:#2A2E24;
  --line-2:#3A3F32;
  --green:#12281D;
  --green-2:#8FBFA0;
  --green-deep:#0D1F16;
  --green-soft:#18241C;
  --chrome:#6E7371;
  --on-green:#EDEADF;
  --on-green-2:#9FAFA2;
  --on-green-line:rgba(237,234,223,.16);
  --on-green-fill:rgba(237,234,223,.05);
  --lacquer:
    radial-gradient(125% 105% at 20% -12%, rgba(237,234,223,.10), transparent 52%),
    linear-gradient(168deg, #193524 0%, #12281D 44%, #0B1B13 100%);
  --chrome-band:linear-gradient(180deg,
    #E8E5DC 0%, #A8AEAB 34%, #6C7371 51%, #D9D6CE 66%, #868C8A 100%);
  --chrome-pill:linear-gradient(180deg,
    #E4E1D8 0%, #CDCAC2 44%, #A6ABA7 56%, #DCD9D1 100%);
  --gloss-top:inset 0 1px 0 rgba(237,234,223,.14);
  --lift:0 1px 2px rgba(0,0,0,.30), 0 8px 24px -8px rgba(0,0,0,.50);
  --lift-hi:0 2px 4px rgba(0,0,0,.36), 0 16px 40px -12px rgba(0,0,0,.62);
  --cta-from:#A8D2B5;
  --cta-to:#7FB394;
  --cta-ink:#0F1F16;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.14; font-weight:400; text-wrap:balance}
p{margin:0}
img{max-width:100%; height:auto}
a{color:var(--green-2); text-decoration-thickness:1px; text-underline-offset:3px}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--green-2); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:26px}
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ── masthead ─────────────────────────────────
   The masthead, hero and footer are the bodywork: racing green, with cream
   type on top. Reading surfaces stay cream so long copy holds up. */
.masthead{position:relative; background:var(--green-deep)}
/* Chrome trim strip along the bottom edge, the way a bonnet meets a grille. */
.masthead::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--chrome-rule);
}
.masthead .wrap{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; padding-block:22px; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--display); font-size:24px; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none;
  color:var(--on-green);                 /* fallback before the clip applies */
  background:var(--chrome-band);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.masthead .eyebrow{white-space:nowrap; color:var(--on-green-2)}

/* ── hero ─────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:var(--lacquer);
  border-bottom:1px solid var(--on-green-line);
}
/* One specular highlight raked across the panel. A single light source is what
   makes paint read as glossy; two make it read as a gradient. */
.hero::before{
  content:""; position:absolute; pointer-events:none;
  top:-60%; left:-25%; width:95%; height:230%;
  transform:rotate(19deg);
  background:linear-gradient(90deg,
    transparent, rgba(239,234,223,.055) 42%, rgba(239,234,223,.10) 52%,
    rgba(239,234,223,.03) 62%, transparent);
  filter:blur(6px);
}
.hero-in{position:relative;
  padding-block:80px 64px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:24px;
}
.hero .eyebrow{color:var(--on-green-2)}
.hero h1{
  font-family:var(--display); font-size:clamp(40px,6.6vw,72px);
  letter-spacing:-.012em; max-width:19ch; color:var(--on-green);
  text-shadow:0 1px 0 rgba(11,22,16,.45);
}
/* The one word set in polished chrome. */
.hero h1 em{
  font-style:italic; color:var(--chrome);
  background:var(--chrome-band);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.hero .lede{color:var(--on-green-2); max-width:54ch; font-size:17px}

.search{position:relative; width:min(540px,100%)}
.search input{
  width:100%; font:inherit; font-size:16px; color:var(--on-green);
  background:var(--on-green-fill); border:1px solid var(--on-green-line);
  border-radius:2px; padding:14px 16px 14px 44px;
}
.search input::placeholder{color:var(--on-green-2)}
.search input:focus{
  outline:none; border-color:var(--on-green);
  background:rgba(239,234,223,.13);
}
.search svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--on-green-2); pointer-events:none;
}

.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 14px; border:1px solid var(--on-green-line); border-radius:100px;
  color:var(--on-green-2); transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{border-color:var(--on-green); color:var(--on-green)}
/* Selected chip is a polished chrome pill — the brightest thing in the hero. */
.chip[aria-pressed="true"]{
  background:var(--chrome-pill); border-color:rgba(239,234,223,.7);
  color:var(--green-deep); font-weight:500;
  box-shadow:var(--gloss-top), 0 2px 8px -2px rgba(0,0,0,.35);
}

/* ── index grid ───────────────────────────── */
main{padding-block:40px 76px}
.tally{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:16px;
}
/* Separate cards rather than a hairline table — each pick reads as its own
   object, and only an object can catch the light. */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(298px,1fr));
  gap:16px; background:none; border:0;
}
.card{
  position:relative; overflow:hidden;
  background:var(--paper); padding:26px 22px 22px;
  border:1px solid var(--line); border-radius:3px;
  box-shadow:var(--lift), inset 0 1px 0 rgba(255,255,255,.6);
  display:flex; flex-direction:column; gap:11px;
  text-decoration:none; color:inherit;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
/* A thin chrome edge that lights up on approach. */
.card::before{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
  background:var(--chrome-rule); opacity:0; transition:opacity .22s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--lift-hi), inset 0 1px 0 rgba(255,255,255,.75);
  border-color:var(--line-2);
}
.card:hover::before{opacity:.9}
@media (prefers-reduced-motion:reduce){
  .card:hover{transform:none}
}
.card .cat{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.card .need{font-family:var(--display); font-size:22px; line-height:1.22; color:var(--ink)}
.card .sum{color:var(--ink-2); font-size:14.5px; line-height:1.55}
/* Named .card-foot, not .foot — the page footer already owns .foot, and a
   shared name would paint the card's strip with the footer's background. */
.card-foot{
  margin-top:auto; padding-top:13px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.card .prod{font-size:14px; font-weight:500; color:var(--ink)}
.card .price{
  font-family:var(--mono); font-size:12.5px; color:var(--green-2);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.draft{
  display:inline-block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--green-soft); color:var(--green-2);
  padding:3px 8px; border-radius:2px; align-self:flex-start;
}
.empty{
  grid-column:1/-1; background:var(--paper); padding:56px 20px;
  text-align:center; color:var(--ink-3);
  border:1px solid var(--line); border-radius:3px; box-shadow:var(--lift);
}

/* ── pick page ────────────────────────────── */
.crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
  display:inline-block; margin-block:34px 22px; text-decoration:none;
}
.crumb:hover{color:var(--green-2)}
.article{
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:clamp(26px,4.4vw,50px);
  box-shadow:var(--lift), inset 0 1px 0 rgba(255,255,255,.6);
}
.article > .eyebrow{color:var(--green-2); display:block}
.article h1{
  font-family:var(--display); font-size:clamp(30px,4.8vw,46px);
  margin-block:13px 30px; max-width:21ch;
}

/* The verdict is the one panel finished in bodywork green — it should read as
   the most valuable object on the page. */
.verdict-box{
  position:relative; overflow:hidden;
  display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; background:var(--lacquer);
  border-radius:3px; padding:26px 26px;
  box-shadow:var(--gloss-top), 0 10px 30px -12px rgba(20,34,26,.35);
}
.verdict-box::after{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
  background:var(--chrome-rule);
}
.verdict-box .who{position:relative; min-width:min(260px,100%)}
.verdict-box > div{position:relative}
.verdict-box .lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-green-2); margin-bottom:7px;
}
.verdict-box .prod{
  font-family:var(--display); font-size:28px; line-height:1.18;
  color:var(--on-green); text-shadow:0 1px 0 rgba(11,22,16,.4);
}
/* The price is the number people came for — set it in chrome. */
.verdict-box .price{
  font-family:var(--mono); font-size:18px; margin-top:6px;
  font-variant-numeric:tabular-nums;
  color:var(--chrome);
  background:var(--chrome-pill);   /* the bright chrome — the band's dark
                                      midpoint would vanish on this panel */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.verdict-box .cta-note{color:var(--on-green-2)}
.cta{
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(180deg, var(--cta-from), var(--cta-to));
  color:var(--cta-ink);
  padding:13px 26px; border-radius:2px;
  border:1px solid rgba(239,234,223,.28);
  font-size:14.5px; font-weight:500; text-decoration:none;
  box-shadow:var(--gloss-top), 0 6px 18px -6px rgba(0,0,0,.45);
  transition:filter .18s ease, transform .18s ease;
}
.cta:hover{filter:brightness(1.09); transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.cta:hover{transform:none}}
.cta:hover{opacity:.87}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cta{color:var(--bone)}
}
:root[data-theme="dark"] .cta{color:var(--bone)}
.cta-note{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:9px; max-width:30ch}

.section{margin-top:36px}
.section h2{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3);
  padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:17px;
}
.section p{color:var(--ink-2); max-width:66ch; line-height:1.75}

.specs{width:100%; border-collapse:collapse; font-size:15px}
.specs th{
  text-align:left; font-family:var(--mono); font-size:12px; font-weight:400;
  color:var(--ink-3); width:40%; padding:11px 0; border-bottom:1px solid var(--line);
  vertical-align:top; letter-spacing:.02em;
}
.specs td{
  padding:11px 0; border-bottom:1px solid var(--line);
  vertical-align:top; font-variant-numeric:tabular-nums; color:var(--ink);
}

.beat{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.beat li{display:flex; gap:14px; flex-wrap:wrap; font-size:15px; color:var(--ink-2)}
.beat b{color:var(--ink); font-weight:500; min-width:min(200px,44%)}

/* ── how it works ─────────────────────────── */
.how{background:var(--paper); border-top:1px solid var(--line)}
.how-in{padding-block:56px}
.how h2{font-family:var(--display); font-size:clamp(25px,3.6vw,34px); margin-block:14px 8px}
.how .lede{color:var(--ink-2); max-width:58ch; margin-bottom:28px}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px}
.step{border-top:2px solid var(--green-2); padding-top:14px}
.step .n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--green-2); display:block; margin-bottom:7px;
}
.step strong{display:block; font-size:15.5px; font-weight:500; margin-bottom:4px; color:var(--ink)}
.step p{font-size:14.5px; color:var(--ink-2)}

/* ── footer ───────────────────────────────── */
.foot{background:var(--green-deep)}
.foot .wrap{padding-block:32px 42px}
.foot .disclosure{
  font-size:13.5px; color:var(--on-green-2); max-width:70ch;
  padding-bottom:18px; border-bottom:1px solid var(--on-green-line); margin-bottom:16px;
}
.foot .disclosure strong{color:var(--on-green); font-weight:500}
.foot .meta{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--on-green-2);
}

/* ── standing pages (about / disclosure / contact) ─────────
   Long-form prose rather than a spec sheet, so it gets a measure and a
   heading rhythm of its own. */
.prose h1{
  font-family:var(--display); font-size:clamp(30px,4.8vw,46px);
  margin-bottom:14px; max-width:22ch;
}
.prose .standfirst{
  font-size:19px; line-height:1.55; color:var(--ink-2);
  max-width:56ch; padding-bottom:26px; margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.prose h2{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3);
  margin-top:34px; margin-bottom:12px;
}
.prose p{color:var(--ink-2); max-width:66ch; line-height:1.78; margin-top:14px}
.prose h2 + p{margin-top:0}

/* footer nav */
.footlinks{display:flex; gap:18px; flex-wrap:wrap}
.footlinks a{
  color:var(--on-green-2); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.footlinks a:hover{color:var(--on-green); border-bottom-color:var(--on-green-line)}