/* ========================================================================== BaseLinePeptide — Luxury brand layer (ADDITIVE) Link this LAST in . Restyles the shared chrome + typography to the brand look on top of the existing page. Removing this one line fully undoes it. ========================================================================== */ @import url("https://use.typekit.net/lvn0eze.css"); @import url("https://use.typekit.net/boh8wds.css"); /* Fields kit */ :root{ --paper:#f7f5f0; --ink:#000000; --accent:#000000; --muted:#000000; --hairline:rgba(17,17,17,.30); --didone:"waverly-cf",Georgia,serif; --cabrito:"waverly-cf",Georgia,serif; --caps:"aviano",sans-serif; --wordmark:"aviano-didone","aviano",Georgia,serif; --serif:"waverly-cf",Georgia,serif; --sans:"waverly-cf",system-ui,-apple-system,sans-serif; } /* ---- palette ---- */ html{ font-size:120%; } body{ background:var(--paper) !important; color:#000000; font-family:var(--sans); -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; } /* Desktop Waverly 600 (Jenny 2026-08-17, keep). Phone and iPad stay as they are. Does not restyle the locked header. */ @media (min-width: 1400px) { body, p, li, td, th, label, dt, dd, figcaption, small, .hero .sub, .about-body, .about-body p, .reg-sub, .c-prose, .c-name, .cell-name { font-weight: 600 !important; } } .bg-white{ background:var(--paper) !important; } button.bg-white, a.bg-white.border{ background:#ffffff !important; } [style*="#F8F8F8"],[style*="#f8f8f8"]{ background:#f1eee7 !important; } /* ---- header + announce: removed — now live SOLELY in bp-header.css (loaded last). Do not re-add header rules here. ---- */ /* ---- typography ---- */ h1,h2,.section-heading,.section-title{ font-family:var(--didone)!important; font-weight:600 !important; letter-spacing:.005em; } h3{ font-family:var(--cabrito)!important; font-weight:600 !important; } .tracking-\[0\.18em\]{ font-family:var(--caps)!important; color:var(--accent) !important; } /* ---- buttons — sitewide square-inside-square ---- */ /* solid / primary buttons */ a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], a[style*="background-color: #111111"], a[style*="background-color:#111111"], button[type="submit"], input[type="submit"], .rounded-full.bg-black, .rounded-lg.bg-black, .rounded-md.bg-black, .btn-primary, .btn-dark{ background:#000000 !important; color:#ffffff !important; border-radius:0 !important; font-family:"waverly-cf",Georgia,serif !important; letter-spacing:.06em !important; text-transform:uppercase; font-weight:700 !important; outline:1px solid rgba(255,255,255,.9) !important; outline-offset:-4px !important; } /* kill pill/rounded shape on any branded button */ a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], button[type="submit"], input[type="submit"]{ border-radius:0 !important; } /* ghost / outline buttons — true white, inverse of the black square-inside-square */ .btn-outline, .cta.ghost, .c-back, .c-variant, a.border.border-black, button.border.border-black, a.border-black, button.border-black, a.border-\[\#111111\], button.border-\[\#111111\], a.border-\[\#111\], button.border-\[\#111\], button.bg-white, a.bg-white.border{ background:#ffffff !important; color:#000000 !important; border:1px solid #000000 !important; border-radius:0 !important; font-family:"waverly-cf",Georgia,serif !important; letter-spacing:.06em; text-transform:uppercase; font-weight:700 !important; outline:1px solid rgba(0,0,0,.9) !important; outline-offset:-4px !important; } .btn-outline:hover, .cta.ghost:hover, .c-back:hover, a.border-black:hover, button.border-black:hover, a.border-\[\#111111\]:hover, button.border-\[\#111111\]:hover, a.border-\[\#111\]:hover, button.border-\[\#111\]:hover, button.bg-white:hover, a.bg-white.border:hover{ background:#000000 !important; color:#ffffff !important; outline-color:rgba(255,255,255,.9) !important; } /* ---- footer ---- */ footer{ background:var(--paper) !important; border-top:1px solid var(--hairline) !important; } footer .font-semibold.text-black, footer span.font-semibold{ font-family:var(--wordmark); letter-spacing:.05em; font-weight:500; } footer a{ color:var(--ink) !important; font-family:var(--caps); font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; } footer a:hover{ color:var(--accent) !important; } footer .font-extrabold{ font-family:var(--caps); letter-spacing:.08em; font-weight:400; } /* ---- mobile drawer ---- */ .bp-drawer-panel{ background:var(--paper) !important; } .bp-drawer-nav a{ color:var(--ink) !important; font-family:var(--sans); letter-spacing:.14em; text-transform:uppercase; font-size:15.5px; } /* ---- nav: auto-collapse to hamburger ---- */ /* Desktop nav visible above 820px; hamburger takes over below it — applies to all pages. */ .bp-header-row--desktop{ display:grid !important; } .bp-header-row--mobile{ display:none !important; } @media (max-width: 820px) { .bp-header-row--desktop{ display:none !important; } .bp-header-row--mobile{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; height:5rem; padding:0 1rem; } } /* ---- responsive scaling ---- */ /* All font-size, letter-spacing, and layout values use em/rem/clamp so they scale automatically. These breakpoints only handle the few pixel-specific details that don't auto-scale. */ @media (max-width: 768px) { a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], button[type="submit"], input[type="submit"], .btn-primary, .btn-dark, .btn-outline, .cta.ghost, .c-back { outline-offset: -3px !important; letter-spacing: .05em !important; } } @media (max-width: 480px) { a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], button[type="submit"], input[type="submit"], .btn-primary, .btn-dark, .btn-outline, .cta.ghost, .c-back { outline-offset: -2px !important; letter-spacing: .04em !important; } } /* ---- sitewide footer (index is the template; same height everywhere) ---- */ .bp-footer{ border-top:1px solid var(--hairline) !important; background:var(--paper) !important; padding:48px 40px 52px !important; } .bp-footer .foot-inner{ max-width:1000px; margin:0 auto; text-align:center; } .bp-footer .foot-brand{ font-family:var(--wordmark); font-size:clamp(1.05rem,4.6vw,1.5rem); letter-spacing:.03em; color:#000000; margin-bottom:20px; font-weight:700; } .bp-footer .foot-year{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; color:var(--muted); margin-left:8px; font-weight:400; } .bp-footer .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:13px 26px; margin-bottom:22px; } .bp-footer .foot-links a{ font-family:var(--caps); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink) !important; text-decoration:none; transition:color .2s; } .bp-footer .foot-links a:hover{ color:var(--accent) !important; } .bp-footer .foot-contact{ font-family:var(--serif); font-size:18px; color:var(--muted); margin-bottom:26px; } .bp-footer .foot-contact a{ color:inherit !important; text-decoration:none; border-bottom:1px solid var(--hairline); } .bp-footer .foot-ruo{ font-family:var(--sans); font-size:13px; line-height:1.65; color:#000000; max-width:830px; margin:0 auto; padding-top:22px; border-top:1px solid var(--hairline); } .bp-footer .foot-ruo strong{ color:var(--muted); font-weight:600; } @media (max-width:480px){ .bp-footer{ padding:40px 18px 48px !important; } .bp-footer .foot-links{ gap:11px 18px; } .bp-footer .foot-ruo{ font-size:12px; } } /* header + announce now live solely in bp-header.css (loaded last on every page) */ /* Footer wordmark: Tailwind preflight sets img{display:block}, which text-align cannot center. Force it centered so the footer is identical on every page. */ .foot-brand{text-align:center !important} .foot-brand img{display:block !important;margin-left:auto !important;margin-right:auto !important;float:none !important} .foot-inner,.bp-footer .foot-inner{text-align:center !important}