/* Cocoon Lux preview: the shared stylesheet, loaded first on every page (then nav.css, then the page's own files from its manifest, wp/src/pages/.json). Mobile first. Holds what every page shares: the self-hosted fonts and their metric fallbacks, the design tokens, base elements, the silk texture, type, links, pill buttons, image frames, the header bar (its condensed state), the footer, the phone Book and Call bar, the reveal, reduced motion and print. Up to 767px: the phone artboards (390); from 600px the phone layout sits in a centred 560px column. 1024px and up: the desktop artboards (designed at 1440, fluid). 768 to 1023: the tablet layout between them. Phones held sideways (768 or wider, 500 or less tall) keep the phone header. Theme: the injectables "hub" (design/DESIGN.md section 0). Split out of the 0.4.0 lux-home.css (6 Oct 2026) without changing the order of any rule: base.css, nav.css and pages/home.css, loaded in that order, are that one file. Page agents do not edit this file (wp/ARCHITECTURE.md): a rule here changes every page. */ /* Fonts: self-hosted latin woff2 (no other host is ever asked), plus metric-matched local fallbacks. Jost Fallback was measured against Arial in headless Chrome: Jost is 0.9605 of Arial's width for mixed-case 400 text and 0.960 for the uppercase 500 labels and buttons; ascent 1.070em, descent 0.375em, no line gap. The overrides are those metrics divided by size-adjust, so lines keep their height. */ @font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-400.woff2) format("woff2")} @font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-400-italic.woff2) format("woff2")} @font-face{font-family:"Jost";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jost-latin-400-500.woff2) format("woff2")} @font-face{font-family:"Playfair Fallback";font-style:normal;src:local("Georgia");size-adjust:101.8%;ascent-override:106.3%;descent-override:24.7%;line-gap-override:0%} @font-face{font-family:"Playfair Fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:94.3%;ascent-override:114.7%;descent-override:26.6%;line-gap-override:0%} @font-face{font-family:"Jost Fallback";font-style:normal;font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:96.05%;ascent-override:111.4%;descent-override:39.04%;line-gap-override:0%} @font-face{font-family:"Jost Fallback";font-style:normal;font-weight:500;src:local("Arial"),local("ArialMT");size-adjust:96%;ascent-override:111.46%;descent-override:39.06%;line-gap-override:0%} /* Android has no Arial: there the fallback is Roboto, tuned the same way (measured in headless Chrome with Roboto 400 and 500 at 100px: Jost is 0.966 of Roboto's width for mixed-case 400 text and 1.034 of Roboto Medium's for the uppercase 500 labels and buttons; same Jost ascent and descent). */ @font-face{font-family:"Jost Fallback Android";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular");size-adjust:96.6%;ascent-override:110.77%;descent-override:38.82%;line-gap-override:0%} @font-face{font-family:"Jost Fallback Android";font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium");size-adjust:103.41%;ascent-override:103.47%;descent-override:36.26%;line-gap-override:0%} :root{ --ivory:#FBF8F2;--cream:#F3ECDF;--line:#D9CAB0;--line-soft:#E8DCC6;--img:#EFE6D6; --espresso:#2A211B;--night:#1F1813;--bark:#4A3F36;--umber:#5A4D42; --gold:#A48646;--gold-text:#7F6735;--gold-deep:#5E4A22;--gold-bright:#CE982C;--gold-light:#E9C77F;--gold-pale:#F3DDAE; --on-dark:#FBF8F2;--on-dark-muted:#E6DACB;--lead-dark:#F4EEE4;--foot-text:#CDBFAE;--foot-line:#3A2F27;--dark-line:rgba(251,248,242,.16); --serif:"Playfair Display","Playfair Fallback",Georgia,"Times New Roman",serif; --sans:"Jost","Jost Fallback","Jost Fallback Android",Arial,Helvetica,sans-serif; --ease:cubic-bezier(.22,1,.36,1); --max:1240px; --gutter:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); --sec:56px; /* header: full height over the hero, condensed height, and the transforms between them */ --h:72px;--hc:60px;--h-scale:.8334;--h-shift:-6px;--logo-w:60px;--logo-scale:.8; --bar-h:78px; /* how far an image may run past the text column, up to the 1680 image container */ --bleed:calc((min(100vw,1680px) - min(100vw - 2*var(--gutter),var(--max)))/2); } @media (min-width:768px){:root{--gutter:max(40px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--sec:88px;--h:112px;--hc:80px;--h-scale:.7143;--h-shift:-16px;--logo-w:84px;--logo-scale:.7143}} @media (min-width:1024px){:root{--gutter:max(56px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--sec:120px}} /* Base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hc) + 16px);scroll-padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 16px)} html.lux-menu-open{overflow:hidden} body{margin:0;background:var(--ivory);color:var(--bark);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.7;font-variant-numeric:lining-nums} main{display:block;overflow-x:hidden;overflow-x:clip} img,video{display:block;max-width:100%} h1,h2,h3,p,ul,figure{margin:0} ul{padding:0;list-style:none} em{font-style:italic} a{color:var(--gold-text);text-decoration:none;transition:color .3s} a:hover{color:var(--gold-deep)} :focus-visible{outline:2px solid var(--espresso);outline-offset:3px} .lux-dark :focus-visible,.lux-hero :focus-visible,.lux-header:not(.is-condensed) :focus-visible,.lux-menu-open .lux-header :focus-visible{outline-color:var(--gold-light)} .lux-dark{background:var(--espresso);color:var(--on-dark)} .lux-wrap{max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)} .lux-sprite{position:absolute;width:0;height:0;overflow:hidden} .lux-nowrap{white-space:nowrap} .lux-skip{position:absolute;left:12px;top:12px;z-index:100;padding:12px 18px;background:var(--ivory);color:var(--espresso);font-weight:500;transform:translateY(-200%)} .lux-skip:focus{transform:none} /* Silk: a sheet of ivory silk behind the page, as on both artboards: one 720x4320 file (AVIF, WebP fallback; assets-src/silk, copied by wp/export-assets.py) drawn 1440px wide from the top of the page, centred and repeated. The dark bands, the cream band and the footer paint over it, so it shows on the ivory sections only. Decoration only: its darkest tone, #F8F2E7, keeps every text colour inside the rules (gold #A48646 large type 3.1:1, #7F6735 4.8:1, umber 7.3:1, bark 9.2:1). The file is fetched only after the page has loaded, once the first ivory section is within a screen of view (assets/js/lux-home.js adds is-silk; without JavaScript a