/* The Fulfilment Studio — brand tokens & web components. Locked 7 Sep 2026.
   Canonical names match tfs/site.css (the live build). Warm-set names from v1
   are kept as deprecated aliases so existing markup keeps working. */
:root{
/* grounds — three, not two */
--black:#0A0A0A;--black-2:#141416;--paper:#F3F4F6;--paper-2:#E9EAEE;--white:#fff;
/* ink */
--ink:#0B0B0C;--ink-soft:#3C3E44;--ink-faint:#7A7D85;
--on-black:#F3F4F6;--on-black-soft:#A9ACB3;
--line:#D7D9DE;--line-dk:#2A2B2E;
/* wine — accent AND ground */
--wine:#880A09;--wine-dk:#6D0807;--wine-active:#560606;--wine-ghost:rgba(136,10,9,.13);
--on-wine:#fff;--on-wine-soft:rgba(255,255,255,.84);
/* pillars — data only */
--we:#6b1408;--me:#c23a1e;--be:#ff9500;--we-lift:#A6140F;--empty:#E9EAEE;
--ok:#2F6B4F;--err:#A3251C;
/* deprecated aliases — v1 warm names, mapped onto the live set */
--espresso:var(--black);--espresso-2:var(--black-2);--card:var(--white);--stone:var(--paper-2);
--cream:var(--on-black);--cream-soft:var(--on-black-soft);--line-dark:var(--line-dk);
--we-on-dark:var(--we-lift);--wine-hover:var(--wine-dk);--book-stock:#FDFBF6;
--sans:'Manrope',system-ui,sans-serif;--serif:'EB Garamond',Georgia,serif;--disp:'Bebas Neue',Impact,sans-serif;--display:var(--disp);--mono:var(--sans);
--r-sm:0;--r-md:0;--r-lg:0;--r-pill:0;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
--focus:#FF9500;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--wine);text-decoration:none}a:hover{color:var(--wine-hover);text-decoration:underline}
img{display:block;max-width:100%}
svg{display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* type scale — Garamond sets headlines, Manrope sets everything else,
   Bebas is a stamp (one word or one number), tracked Manrope replaces mono */
.t-display{font-family:var(--disp);font-weight:400;letter-spacing:.02em;line-height:.9;text-transform:uppercase}
.t-h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.4vw,96px);line-height:1.06;letter-spacing:-.01em}
.t-h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.3vw,64px);line-height:1.08;letter-spacing:-.01em}
.t-h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,36px);line-height:1.14;letter-spacing:-.01em}
.t-h1 em,.t-h2 em,.t-h3 em{font-style:italic}
.t-serif{font-family:var(--serif);font-weight:400;line-height:1.24}
.t-serif-i{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.28}
.t-body{font-size:17px;line-height:1.66;font-weight:400;max-width:66ch}
.t-body-lg{font-size:19px;line-height:1.6;font-weight:400;max-width:60ch}
.t-small{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.t-cap{font-size:12px;line-height:1.5;color:var(--ink-soft)}
.t-cap.on-dark{color:var(--on-black-soft)}
.mono,.label{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11px}
.eyebrow{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--wine);display:inline-flex;align-items:center;gap:8px}
.eyebrow.on-dark,.on-wine .eyebrow{color:#fff}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* wordmark — W2: gap under THE is +.10em */
.wm{font-family:var(--disp);display:flex;flex-direction:column;line-height:.92;text-transform:uppercase;color:var(--on-black);--fs:56px}
.wm .a{font-size:calc(var(--fs)*.34);letter-spacing:.34em;margin-bottom:calc(var(--fs)*.10)}
.wm .b{font-size:var(--fs);letter-spacing:.012em}
.wm-one{font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;line-height:1}
.wm-two{font-family:var(--disp);display:flex;flex-direction:column;line-height:.92;text-transform:uppercase;letter-spacing:.012em}
/* wine as a ground */
.on-wine{background:var(--wine);color:#fff}
.on-wine .t-small,.on-wine p{color:var(--on-wine-soft)}
.on-wine .btn{background:#fff;color:var(--wine);border-color:#fff}
.on-wine .btn:hover{background:var(--paper);color:var(--wine-dk);border-color:var(--paper)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:16px 26px;min-height:48px;border:1px solid var(--wine);border-radius:0;background:var(--wine);color:#fff;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn:hover{background:var(--wine-hover);border-color:var(--wine-hover);color:#fff;text-decoration:none}
.btn:active{background:var(--wine-active);border-color:var(--wine-active);transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn[disabled],.btn.is-disabled{background:var(--stone);border-color:var(--stone);color:var(--ink-faint);cursor:not-allowed;transform:none}
.btn .arr{transition:transform .18s}.btn:hover .arr{transform:translateX(4px)}
.btn-sec{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-sec:hover{background:var(--ink);color:var(--card)}
.btn-sec:active{background:var(--espresso);border-color:var(--espresso)}
.btn-sec.on-dark{color:var(--cream);border-color:var(--cream-soft)}
.btn-sec.on-dark:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--wine);padding:15px 12px}
.btn-ghost:hover{background:rgba(136,10,9,.07);border-color:transparent;color:var(--wine-hover);text-decoration:none}
.btn-ghost.on-dark{color:var(--cream)}.btn-ghost.on-dark:hover{background:rgba(237,227,210,.1);color:#fff}
.btn-sm{font-size:12.5px;padding:11px 18px;min-height:40px}
.btn-lg{font-size:15px;padding:18px 34px;min-height:56px}

/* forms */
.field{display:flex;flex-direction:column;gap:7px;max-width:420px}
.field > label{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}
.input{font-family:var(--sans);font-size:15px;padding:13px 14px;min-height:48px;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:0}
.input::placeholder{color:var(--ink-faint)}
.input:hover{border-color:rgba(43,38,32,.4)}
.input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
.input.is-error{border-color:var(--err);background:#FDF2F1}
.input.is-ok{border-color:var(--ok)}
.msg{font-size:12.5px;display:flex;gap:6px;align-items:center}
.msg.err{color:var(--err)}.msg.ok{color:var(--ok)}
.input[disabled]{background:var(--stone);color:var(--ink-faint);border-color:var(--stone)}

/* cards, stats, quotes, tables */
.card{background:var(--white);border:1px solid var(--line);padding:28px}
.card.on-dark{background:var(--espresso-2);border-color:var(--line-dark);color:var(--cream)}
.stat{display:flex;flex-direction:column;gap:6px}
.stat .v{font-family:var(--disp);font-size:clamp(44px,5vw,64px);line-height:.9;color:var(--wine);letter-spacing:.02em}
.stat .k{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}
.stat.on-dark .v{color:#fff}.stat.on-dark .k{color:var(--on-black-soft)}
.quote{border-left:2px solid var(--wine);padding:2px 0 2px 22px;max-width:60ch}
.quote p{font-family:var(--serif);font-size:24px;line-height:1.3;margin:0 0 12px}
.quote p em{font-style:italic}
.quote cite{font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}
table.tfs{border-collapse:collapse;width:100%;font-size:14px}
table.tfs th{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft);text-align:left;padding:10px 14px;border-bottom:1px solid var(--ink)}
table.tfs td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.tfs tr:last-child td{border-bottom:0}
table.tfs tbody tr:hover{background:rgba(231,220,199,.4)}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;padding:7px 13px;border-radius:0;border:1px solid var(--line);color:var(--ink-soft)}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.we{background:var(--we)}.dot.me{background:var(--me)}.dot.be{background:var(--be)}
.on-dark .dot.we{background:var(--we-lift)}