/* lillienterprises.com — styles for the landing page, the only page (Levi, 17 Oct 2026).
   Values come from the Claude Design export (Landing page). Self-hosted only. */

@font-face{font-family:'Crimson Text';font-weight:400;font-display:swap;src:url(/assets/fonts/crimson-400.woff2) format('woff2')}
@font-face{font-family:'Crimson Text';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/crimson-400i.woff2) format('woff2')}
@font-face{font-family:'Crimson Text';font-weight:600;font-display:swap;src:url(/assets/fonts/crimson-600.woff2) format('woff2')}
@font-face{font-family:'Julius Sans One';font-weight:400;font-display:swap;src:url(/assets/fonts/julius-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-weight:400 500;font-display:swap;src:url(/assets/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-weight:700;font-display:swap;src:url(/assets/fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Lexend Mega';font-weight:400;font-display:swap;src:url(/assets/fonts/lexend-mega-400.woff2) format('woff2')}

:root{
  --ink:#111;--white:#fff;--espresso:#1e130b;--green:#304012;--olive:#2f3d13;
  --cream:#f3eee6;--sand:#e8dccd;--taupe:#6b6458;--bronze:#f2b46a;--rule:#c9b98f;--grey:#5e5e5e;
  --serif:'Crimson Text',Georgia,serif;--display:'Julius Sans One',sans-serif;
  --mega:'Lexend Mega',sans-serif;--sans:'Lato',system-ui,sans-serif;
  --gutter:clamp(16px,3vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--serif);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--espresso)}a:hover{color:var(--green)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1500px;margin:0 auto}

/* ---------- 3D hero: the photo is a plane in perspective that tilts with the pointer
   and drifts on its own; type floats on a nearer plane. site.js drives --rx/--ry/--sy. */
.hero{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#1b1a16;perspective:1100px;color:var(--white);isolation:isolate}
.hero-media{position:absolute;inset:-6%;background:center/cover no-repeat;z-index:-2;
  transform:translate3d(0,var(--sy,0px),-80px) scale(1.16) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform;animation:drift 26s ease-in-out infinite alternate}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--shade,.28));z-index:-1}
.hero-depth{transform:translate3d(var(--dx,0px),var(--dy,0px),40px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@keyframes drift{from{background-position:48% 50%}to{background-position:52% 46%}}
@media (prefers-reduced-motion:reduce){.hero-media{animation:none;transform:scale(1.06)}.hero-depth{transform:none}html{scroll-behavior:auto}}

.topbar{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:28px var(--gutter) 0}
.topbar .row{display:flex;width:100%;max-width:1600px;justify-content:flex-end;min-height:48px}
.pill{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--white);text-decoration:none;border:1px solid rgba(255,255,255,.85);border-radius:50px;padding:12px 26px;transition:background .3s}
.pill:hover{color:var(--white);background:rgba(255,255,255,.12)}
.wordmark{display:block;width:240px}.wordmark img{display:block;width:100%;height:auto}
.mainnav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 48px}
.mainnav a{font-family:var(--display);font-size:15px;letter-spacing:.18em;color:var(--white);text-decoration:none;text-shadow:0 0 15px rgba(0,0,0,.5);padding:4px 0;border-bottom:1px solid transparent}
.mainnav a:hover,.mainnav a[aria-current]{color:var(--white);border-bottom-color:rgba(255,255,255,.7)}
.hero-copy{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px;padding:120px var(--gutter) 160px}
.kicker{margin:0;font-family:var(--mega);font-size:16px;letter-spacing:4px;text-shadow:0 0 15px rgba(0,0,0,.5)}
.mega{margin:0;max-width:1200px;font-family:var(--mega);font-weight:400;font-size:clamp(22px,2.6vw,38px);line-height:1.35;letter-spacing:4px;text-shadow:0 0 15px rgba(0,0,0,.5)}
.hero.short{min-height:clamp(380px,36vw,700px)}
.hero.short .hero-copy{padding:40px var(--gutter) 80px;gap:6px}
.hero.short .mega{font-size:clamp(24px,3.4vw,52px);letter-spacing:.32em}
.hero .step{font-family:var(--mega);font-size:14px;letter-spacing:5px;margin:0}

/* ---------- type + buttons */
.h-display{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.3;letter-spacing:.12em}
.h-big{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,52px);line-height:1.2;letter-spacing:.16em}
.green{color:var(--green)}
.body{margin:0;font-size:20px;line-height:1.7;letter-spacing:.2px;color:#3a372f;max-width:62ch}
.label{margin:0;font-family:var(--display);font-size:14px;letter-spacing:.14em;line-height:1.7;color:#6f6a5a}
.rule{width:113px;height:1px;background:var(--ink);border:0;margin:0}
.rule.gold{width:68px;background:var(--rule)}
.btn{display:inline-block;font-family:var(--display);font-size:14px;letter-spacing:.2em;color:var(--ink);text-decoration:none;background:var(--white);padding:16px 32px;border:1px solid var(--espresso);cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--espresso);color:var(--white)}
.btn.plain{border-color:transparent}.btn.plain:hover{border-color:var(--espresso)}
.btn.solid{background:var(--olive);color:var(--white);border-color:var(--olive);font-size:14px;padding:16px 30px}
.btn.solid:hover{background:var(--green)}
.btn.small{font-size:12px;letter-spacing:.18em;padding:11px 20px}

/* ---------- landing sections */
.split{padding:110px var(--gutter)}
.split .wrap{display:flex;flex-wrap:wrap;gap:80px;align-items:center;justify-content:center}
.split .photo{flex:1 1 420px;max-width:640px;width:100%;aspect-ratio:758/861;object-fit:cover;display:block}
.split .text{flex:1 1 420px;max-width:700px;display:flex;flex-direction:column;gap:22px}
.signature{width:260px;height:auto;display:block}
.banner{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px var(--gutter);background:#2a2a22 center/cover no-repeat;color:var(--white)}
.banner::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--shade,.25))}
.banner>*{position:relative}
.banner .body,.boxed .body,.hero .body{color:inherit}
.banner .inner{display:flex;flex-direction:column;gap:24px;align-items:center;max-width:900px}

.focus{background:var(--sand);padding:88px 0 96px}
.focus .head{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:0 var(--gutter);max-width:1600px;margin:0 auto 36px}
.round{width:56px;height:56px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--serif);font-size:24px;cursor:pointer;transition:background .25s,color .25s}
.round:hover{background:var(--ink);color:var(--white)}
.rail{display:flex;gap:28px;overflow-x:auto;padding:0 var(--gutter) 16px;scroll-snap-type:x mandatory;scrollbar-width:thin;max-width:1600px;margin:0 auto}
.rail figure{margin:0;flex:0 0 min(380px,82vw);background:var(--white);scroll-snap-align:start;perspective:900px}
.rail img{width:100%;aspect-ratio:508/314;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rail figure:hover img{transform:scale(1.04)}
.rail figcaption{padding:22px 22px 24px;font-family:var(--display);font-size:16px;letter-spacing:.14em}

.overlap{padding:110px var(--gutter)}
.overlap .wrap{display:flex;flex-wrap:wrap;align-items:center}
.overlap img{flex:1 1 420px;max-width:640px;width:100%;height:auto;display:block;position:relative;z-index:1}
.overlap .panel{flex:1 1 480px;background:var(--cream);padding:56px 56px 56px 72px;margin-left:-40px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}

.pair{display:flex;flex-wrap:wrap}
.pair>div{flex:1 1 520px;padding:110px var(--gutter) 120px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.pair>div.alt{background:var(--cream)}
.pair>div.center{align-items:center;text-align:center}
.pair .wide{width:100%;max-width:740px;aspect-ratio:740/406;object-fit:cover;display:block}
.quote{margin:24px 0 0;max-width:640px;font-size:clamp(21px,1.8vw,26px);font-style:italic;line-height:1.6;letter-spacing:.3px;color:#3a372f}
.boxed{max-width:1140px;background:rgba(0,0,0,.75);padding:72px 56px;display:flex;flex-direction:column;gap:26px;align-items:center;text-align:center}

/* ---------- footers */
.foot{background:var(--espresso);color:var(--white);padding:48px var(--gutter) 56px}
.foot .wrap{max-width:1620px;display:flex;flex-direction:column;gap:32px}
.foot .band{border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.6);padding:30px 0;text-align:center;font-family:var(--sans);font-size:clamp(16px,1.6vw,24px);letter-spacing:3px}
.foot .band.serif{font-family:var(--serif);font-size:18px;letter-spacing:3px}
.foot .row{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end}
.foot .join .cap,.foot .know{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.2em}
.foot .know{font-size:16px;text-align:center}
.foot .join{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot .join .cap,.foot .join .note{margin:0}
.foot .legal{text-align:right;font-family:var(--sans);font-size:15px;letter-spacing:.12em;line-height:1.8}
.foot .legal a{color:var(--bronze)}
.foot .cd{display:inline-block;margin-top:8px;background:var(--white);color:var(--espresso);font-family:var(--display);font-size:13px;letter-spacing:2px;padding:7px 22px;text-decoration:none}
.foot .note{font-family:var(--sans);font-size:14px;letter-spacing:1px;opacity:.8;margin:0}

@media (max-width:820px){
  .hero-copy{padding:72px var(--gutter) 96px}
  .mainnav{gap:10px 22px}.mainnav a{font-size:14px;letter-spacing:2px}
  .wordmark{width:180px}
  .overlap .panel{margin-left:0;padding:36px 24px}
  .foot .legal{text-align:left}
  .split,.overlap{padding-top:64px;padding-bottom:64px}
  .pair>div{padding:72px var(--gutter)}
  .boxed{padding:44px 22px}
  .banner{min-height:440px}
  .body{font-size:18px}
}