/* The Matches London · design tokens
   Layer 1 primitives → layer 2 semantic → layer 3 component.
   Loaded last on every page so it wins over the older inline palettes. */

/* 1 · primitives */
html:root{
 --p-offwhite-50:#FCFBF8;
 --p-offwhite-100:#F7F5F0;
 --p-offwhite-200:#EEEBE4;
 --p-offwhite-300:#DEDAD1;
 --p-green-900:#1E3B2C;
 --p-ink-900:#1C2A23;
 --p-ink-600:#4F5A53;
 --p-red-500:#DC5A4D;
 --p-space-1:4px;--p-space-2:8px;--p-space-3:12px;--p-space-4:16px;--p-space-5:24px;--p-space-6:32px;--p-space-7:48px;
 --p-radius-1:2px;--p-radius-2:6px;

/* 2 · semantic */
 --c-bg:var(--p-offwhite-100);
 --c-surface:var(--p-offwhite-50);
 --c-surface-alt:var(--p-offwhite-200);
 --c-line:rgba(28,42,35,.14);
 --c-line-strong:var(--p-offwhite-300);
 --c-text:var(--p-ink-900);
 --c-text-muted:var(--p-ink-600);
 --c-brand:var(--p-green-900);
 --c-accent:var(--p-red-500);

/* legacy names used across the inline styles, mapped to the semantic layer */
 --paper:var(--c-bg);
 --ivory:var(--c-bg);
 --cream:var(--c-bg);
 --cream2:var(--c-surface-alt);
 --paper2:var(--c-surface-alt);
 --white:var(--c-surface);
 --grain:none;
 --fibre:none;

/* 3 · component */
 --facts-bg:var(--c-surface);
 --facts-line:var(--c-line);
 --facts-label:var(--c-text-muted);
 --facts-text:var(--c-text);
}
html,body{background:var(--c-bg)}
/* flat editorial surfaces: no paper or grain textures */
.site-footer,.site-footer:before,.say5:before,.ft::before{background-image:none!important}
.paper:before{display:none}

/* product facts (matchboxes): four short facts in a 2 × 2 grid */
.bx-facts{margin:var(--p-space-4) 0 0;padding:var(--p-space-4);background:var(--facts-bg);border:1px solid var(--facts-line);border-radius:12px}
.bx-facts dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--p-space-4) var(--p-space-5)}
.bx-facts dt{margin:0 0 2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--c-accent)}
.bx-facts dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--facts-text)}
@media (max-width:560px){.bx-facts dl{grid-template-columns:1fr;gap:var(--p-space-3)}}

/* quantity: classic chips, quantity and price only */
#builder .bx-qhead,#builder .bx-range,#builder .bx-bars,#builder .bx-barlab,#builder .bx-nudge{display:none!important}
.bx-qty{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:2px 0 var(--p-space-4)}
.bx-qty button{display:grid;gap:2px;justify-items:center;padding:10px 6px;border:1px solid var(--c-line);border-radius:10px;background:var(--c-surface);color:var(--c-text);font:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.bx-qty button b{font-size:16px;font-weight:600;line-height:1.1}
.bx-qty button span{font-size:12.5px;color:var(--c-text-muted)}
.bx-qty button:hover{border-color:var(--c-brand);transform:translateY(-1px)}
.bx-qty button[aria-checked="true"]{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-surface)}
.bx-qty button[aria-checked="true"] span{color:rgba(252,251,248,.8)}

/* header: rush link, logo, action; then the product row */
.hd.hd2{grid-template-columns:1fr auto 1fr!important;padding-top:12px;padding-bottom:10px}
.hd2 .logo{justify-self:center}
.hd2 .btn{justify-self:end}
.hd-rush{justify-self:start;display:inline-grid;gap:1px;padding:8px 16px;border:1px solid var(--c-accent);border-radius:999px;color:var(--c-accent);text-decoration:none;line-height:1.15;transition:background .2s,color .2s}
.hd-rush b{font-size:14px;font-weight:600}
.hd-rush span{font-size:11px;letter-spacing:.04em;opacity:.85}
.hd-rush:hover{background:var(--c-accent);color:var(--c-surface)}
.hd-coll{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.hd-coll div{display:flex;justify-content:center;gap:clamp(14px,2.2vw,30px);max-width:1240px;margin:0 auto;padding:0 var(--gut,20px);overflow-x:auto;scrollbar-width:none}
.hd-coll div::-webkit-scrollbar{display:none}
.hd-coll a{flex:none;padding:13px 0 11px;font-size:14px;color:var(--c-text);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.hd-coll a:hover{color:var(--c-accent)}
.hd-coll a[aria-current]{border-bottom-color:var(--c-accent);color:var(--c-brand);font-weight:600}
@media (max-width:900px){.hd-coll div{justify-content:flex-start;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}}
@media (max-width:560px){.hd-rush{padding:7px 12px}.hd-rush span{display:none}.hd-rush b{font-size:13px}}

/* home: the rush button is back, plain and clean */
html body .urgent-btn{display:inline-flex!important;background:var(--c-surface)!important;color:var(--c-accent)!important;border:1px solid var(--c-accent)!important;box-shadow:0 10px 24px -14px rgba(28,42,35,.5)!important}
html body .urgent-btn .u-txt:before{display:none!important}
html body .urgent-btn:hover{background:var(--c-accent)!important;color:var(--c-surface)!important}

/* talk to the studio */
.reach{width:min(1240px,100% - 40px);margin:clamp(24px,3vw,40px) auto 0;padding:clamp(28px,4vw,52px);background:var(--c-brand);color:var(--c-surface);border-radius:20px;display:block}
.reach-in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.reach-k{margin:0 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f3b2aa}
.reach h2{margin:0;font-family:var(--serif,var(--display,Georgia,serif));font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.01em}
.reach h2 em{color:#f3b2aa}
.reach-t p:last-child{margin:14px 0 0;max-width:44ch;color:rgba(252,251,248,.82);font-size:15.5px;line-height:1.55}
.reach-row{display:grid;gap:10px}
.reach-c{display:grid;gap:2px;padding:16px 20px;background:var(--c-surface);color:var(--c-text);border-radius:12px;text-decoration:none;transition:transform .25s,background .25s,color .25s}
.reach-c b{font-size:16px;font-weight:600}
.reach-c span{font-size:13.5px;color:var(--c-text-muted)}
.reach-c:hover{transform:translateX(6px);background:var(--c-accent);color:#fff}
.reach-c:hover span{color:rgba(255,255,255,.85)}
@media (max-width:760px){.reach-in{grid-template-columns:1fr}}

/* footer with more life */
.ft::before{background-color:#e4eae1!important}
.blob{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.blob h2{color:inherit}
.blob.b1{background:var(--c-brand)!important;color:var(--c-surface)}
.blob.b1 a{color:var(--c-surface)}
.blob.b1 a:hover{background:var(--c-accent);color:#fff}
.blob.b2{background:var(--c-accent)!important;color:#fff}
.blob.b2 a{color:#fff}
.blob.b2 a:hover{background:var(--c-surface);color:var(--c-brand)}
.blob.b1:hover{transform:rotate(-1.5deg) translateY(-6px)}
.blob.b2:hover{transform:rotate(1.5deg) translateY(8px)}
.mega{color:var(--c-brand)}
.mega i{color:var(--c-accent)!important}
.mega-long{animation:tmlSway 6s ease-in-out infinite;transform-origin:10% 60%}
@keyframes tmlSway{0%,100%{transform:translateX(9%) rotate(-1.2deg)}50%{transform:translateX(10%) rotate(.8deg)}}
.ft-coll{gap:8px!important}
.ft-coll a{padding:8px 14px!important;border:1px solid rgba(28,42,35,.22)!important;border-radius:999px;background:var(--c-surface);transition:background .2s,color .2s,border-color .2s}
.ft-coll a:hover,.ft-coll a[aria-current]{background:var(--c-brand);color:var(--c-surface);border-color:var(--c-brand)!important}
@media (prefers-reduced-motion:reduce){.mega-long{animation:none}.blob,.reach-c,.bx-qty button{transition:none}}