/* CartNest — shared boutique design system. * Cormorant Garamond (display) + Jost (sans), warm-white / near-black monochrome, * hairline rules, generous space, sharp uppercase letter-spaced controls. * Pages link this first, then add only their page-specific layout. * Fonts are loaded in each page's (Google Fonts: Cormorant Garamond + Jost). */ :root{ --paper:#faf9f6; --paper-2:#f2efe9; --ink:#16140f; --ink-2:#403a31; --soft:#6e6656; --line:#e7e2d9; --hair:#dbd5c9; --stone:#8a7c67; --ok:#5b6f54; --danger:#9c4a36; /* spacing scale — every gap/margin/padding draws from this */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.2s; --t-mid:.35s; --t-slow:1s; --display:"Cormorant Garamond", Georgia, serif; --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400; -webkit-font-smoothing:antialiased;line-height:1.62;font-size:16px;letter-spacing:.012em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--ink);color:var(--paper)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:1.5px solid var(--ink);outline-offset:3px} h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:0;margin:0;text-wrap:balance} .ital{font-style:italic} .num{font-variant-numeric:tabular-nums lining-nums} .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,56px)} .eyebrow{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:.3em;color:var(--soft)} .rule{height:1px;background:var(--line);border:0;margin:0} /* buttons — sharp, uppercase, letter-spaced */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans); font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;min-height:48px; padding:15px 32px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer; transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease),transform var(--t-fast) var(--ease)} .btn:hover{background:transparent;color:var(--ink)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)} .btn.light{border-color:#fff;background:#fff;color:var(--ink)} .btn.light:hover{background:transparent;color:#fff} .btn.sm{min-height:40px;padding:11px 22px;font-size:10.5px} .btn.danger{border-color:var(--danger);background:transparent;color:var(--danger)} .btn.danger:hover{background:var(--danger);color:var(--paper)} /* form fields */ .field-input{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:0;padding:14px 16px;width:100%;transition:border-color var(--t-fast)} .field-input:focus{outline:none;border-color:var(--ink)} .field-input::placeholder{color:var(--soft)} /* brand wordmark */ .brand{font-family:var(--sans);font-weight:600;letter-spacing:.4em;text-transform:uppercase;font-size:clamp(15px,2vw,18px)} .brand b{font-weight:300} /* scroll reveal (opt-in via [data-reveal]) */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)} [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto} [data-reveal]{opacity:1!important;transform:none!important} }