:root{ --paper:#f6f4f0; --cream:#efece4; --white:#fdfcf9; --ink:#1a1a17; --ink-soft:#565248; --ink-mute:#6d685b; /* AA on paper (~5.1:1) & cream (~4.75:1); was #928d80 = 3.0:1 fail */ --hair:#9a9488; /* decorative-only muted (rules, dividers) — never text */ --line:rgba(26,26,23,0.14); --line-soft:rgba(26,26,23,0.08); --stone-deep:#6f6656; /* AA for inline links/legends (~5.1:1); was #7f7565 = 4.1:1 */ --maxw:1360px; --pad:clamp(20px,4.5vw,60px); --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --serif:'Newsreader','Georgia',serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* ---------- Motion ---------- Transform-only entrance: content stays visible even if the animation never fires (hidden tab / headless render), so the hero never ships blank. */ @keyframes ln-rise{from{transform:translateY(10px)}to{transform:none}} .hero-copy>*{animation:ln-rise .62s cubic-bezier(.16,1,.3,1) both} .hero-copy>:nth-child(1){animation-delay:.04s} .hero-copy>:nth-child(2){animation-delay:.12s} .hero-copy>:nth-child(3){animation-delay:.20s} .page-hero>.wrap>*{animation:ln-rise .55s cubic-bezier(.16,1,.3,1) both} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important} } body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font);font-weight:400;font-size:16.5px;line-height:1.7; letter-spacing:-0.004em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{display:block;max-width:100%} a{color:inherit} h1,h2,h3{margin:0} .serif{font-family:var(--serif)} .label{font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute)} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100} .skip:focus{left:12px;top:12px} /* ---------- Header ---------- */ /* Opaque, not translucent-blurred: the blur is the startup tell, and a solid bar lets a plate scroll under it as a clean print trim. */ .site-head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line-soft)} .site-head .bar{display:flex;align-items:center;justify-content:space-between;height:64px} /* LN Flooring keeps the brown-gold. LN Living Concepts is black and white — so the wordmark is the one place on this site that steps OUT of the warm palette: neutral greys, not --ink (#1a1a17, warm) or --ink-mute (#6d685b, brown-gold). Two sister brands, one mark, told apart by colour. */ .wordmark{display:inline-flex;flex-direction:column;text-decoration:none;color:#141414;line-height:1} .wordmark .ln{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:0.01em} .wordmark .full{font-size:9.5px;font-weight:500;letter-spacing:0.26em;text-transform:uppercase;color:#5b5b5b;margin-top:4px} .nav{display:flex;align-items:center;gap:32px} .nav a{text-decoration:none;font-size:13px;font-weight:500;letter-spacing:0.01em;color:var(--ink-soft);transition:color .18s} .nav a:hover{color:var(--ink)} .nav .say{border:1px solid var(--ink);border-radius:100px;padding:9px 18px;color:var(--ink)} .nav .say:hover{background:var(--ink);color:var(--paper)} .menu-btn{display:none;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:10px 14px;margin-right:-14px;line-height:0;position:relative} /* 26px of bars + 20px padding renders 54x34.5 — wide enough for a thumb but 9.5px short vertically, and on a phone this is the ONLY nav control. Grow the hit area to 44px with a pseudo-element rather than padding, so the 64px header keeps its rhythm. Same trick the in-page links use. */ .menu-btn::after{content:'';position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:44px} /* ---------- Mobile: the nav moves to the bottom ---------- Same