/* Florie Naomi
   Concept: an editorial cover. Concrete and bone like her shoot walls, oxblood from her hair,
   satin blue from the suit, rose gold for the shine. */
:root{
  --bone:#F6F2ED; --concrete:#E7E1D9; --stone:#CFC6BB;
  --ink:#1C1517; --ink-2:#4A3F41; --mute:#776A6B;
  --ox:#8E1F2F; --ox-hi:#B23A4B; --satin:#8FB3DE; --satin-d:#3F6EA8; --rose:#C99A84;
  --serif:"Instrument Serif","Didot","Bodoni 72",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --shadow:0 1px 1px rgba(28,21,23,.04),0 3px 6px rgba(28,21,23,.05),0 12px 24px -8px rgba(28,21,23,.10),0 30px 60px -20px rgba(28,21,23,.22);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--bone)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.sec{padding-block:clamp(80px,10vw,140px)}
.serif{font-family:var(--serif)}
.h2{font-family:var(--serif);font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-.01em}
.h2 em,.h1 em{color:var(--ox)}
.lead{font-size:clamp(18px,1.5vw,21px);color:var(--ink-2);max-width:58ch}
.kick{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ox);margin-bottom:16px}
.head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 60px;align-items:end;margin-bottom:56px}
@media (max-width:820px){.head{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font:inherit;font-weight:600;font-size:16px;line-height:1;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--ox)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bone)}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-bone:hover{background:var(--satin)}

/* header */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:80;transition:background .35s,box-shadow .35s}
.top.solid{background:rgba(246,242,237,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(28,21,23,.08)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:18px}
.brand{font-family:var(--serif);font-size:28px;line-height:1;text-decoration:none;letter-spacing:.01em}
.brand em{color:var(--ox)}
.nav{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:inline-block;font-size:15px;font-weight:500;text-decoration:none;padding:10px 13px;border-radius:999px;transition:background .2s}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(28,21,23,.07)}
.nav .cta a{background:var(--ink);color:var(--bone);margin-left:8px;padding:10px 18px}
.nav .cta a:hover{background:var(--ox)}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:none;color:var(--ink);cursor:pointer;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:980px){
  .burger{display:grid}
  .nav{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 80px) 0 auto;flex-direction:column;align-items:stretch;background:var(--bone);padding:10px var(--gr) 24px var(--gl);box-shadow:0 24px 40px -20px rgba(28,21,23,.3);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .25s,visibility 0s .25s}
  .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
  .nav a{display:block;font-size:20px;font-family:var(--serif);padding:14px 4px;border-radius:0;border-bottom:1px solid rgba(28,21,23,.08)}
  .nav .cta a{margin:14px 0 0;text-align:center;font-family:var(--sans);font-size:17px;border:0;border-radius:999px}
}

/* page hero for inner pages */
.phero{padding-block:calc(env(safe-area-inset-top,0px) + 150px) 60px}
.phero .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:50px;align-items:end}
.phero h1{font-family:var(--serif);font-size:clamp(64px,11vw,170px);line-height:.86;letter-spacing:-.02em}
.phero h1 em{color:var(--ox)}
.phero .lead{margin-top:26px}
.phero figure{margin:0;border-radius:300px 300px 20px 20px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.phero figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.phero .grid{grid-template-columns:1fr}.phero figure{max-width:420px}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid rgba(28,21,23,.12);background:var(--concrete)}
.marquee .track{display:flex;gap:48px;width:max-content;padding-block:20px;animation:mq 38s linear infinite}
.marquee span{font-family:var(--serif);font-size:clamp(26px,3vw,40px);white-space:nowrap;display:inline-flex;align-items:center;gap:48px}
.marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ox)}
@keyframes mq{to{transform:translateX(-50%)}}

/* cards */
.card{background:#fff;border-radius:22px;box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
a.card{text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-6px)}

/* letter roll */
.letters .w{display:inline-block;white-space:nowrap}
.letters .c{display:inline-block}
.letters .c.rolling{position:relative;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.letters .c .ghost{visibility:hidden}
.letters .c .reel{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center}
.letters .c .reel span{display:block;padding-bottom:.14em}
.letters .c .reel span:not(:last-child){color:var(--ox);opacity:.5}

/* cursor + sparkles */
html.fn-cursor,html.fn-cursor *{cursor:none!important}
html.fn-cursor input,html.fn-cursor textarea{cursor:text!important}
.fn-cur{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;z-index:400;opacity:0;transition:opacity .25s}
.fn-cur.on{opacity:1}
.fn-cur svg{width:100%;height:100%;overflow:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fn-cur .ring{fill:none;stroke:var(--ox);stroke-width:1.2;transform:scale(.45);transform-origin:center;transform-box:fill-box;transition:transform .4s cubic-bezier(.3,1.5,.5,1),stroke .3s}
.fn-cur .dot{fill:var(--ox)}
.fn-cur .spark{fill:var(--rose);opacity:0;transform:scale(.4) rotate(0deg);transform-origin:center;transform-box:fill-box;transition:opacity .3s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.fn-cur.hot .ring{transform:scale(1);stroke:var(--rose)}
.fn-cur.hot .spark{opacity:1;transform:scale(1) rotate(45deg)}
.fn-cur.press svg{transform:scale(.8)}
.fn-cur.text{opacity:0}
.fn-spark{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:399}

/* forms */
.form{display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--stone);border-radius:12px;padding:13px 14px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ox);box-shadow:0 0 0 3px rgba(142,31,47,.12)}
.form .note{font-size:15px;min-height:1.4em;color:var(--satin-d)}
.form .note.err{color:var(--ox)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--ink);color:#CFC4C0;padding-block:80px 46px}
.foot .big{font-family:var(--serif);font-size:clamp(56px,10vw,150px);line-height:.9;color:var(--bone)}
.foot .big em{color:var(--rose)}
.foot .cols{margin-top:50px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.foot h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:12px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--bone)}
.foot .fine{margin-top:40px;padding-top:22px;border-top:1px solid rgba(207,196,192,.16);font-size:14px}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* intro: stage curtains part around a spinning gold record (once per visit) */
html.fnl::after{content:"";position:fixed;inset:0;z-index:9998;background:#3A0A14}
html.fnl body{overflow:hidden}
.fnl-wrap{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden}
.fnl-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 46%,#5A1120 0%,#2A0610 75%);transition:opacity .7s .15s}
.fnl-wrap.open{pointer-events:none}
.fnl-wrap.open::before{opacity:0}
.fnl-wrap .cur{position:absolute;top:-2%;bottom:-2%;width:51%;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 18%,transparent 80%,rgba(0,0,0,.45)),repeating-linear-gradient(90deg,#3B0912 0,#7A1A2C 22px,#5A1120 40px,#2E0710 58px);box-shadow:inset 0 0 80px rgba(0,0,0,.55);transition:transform 1.25s cubic-bezier(.7,0,.2,1)}
.fnl-wrap .cur::after{content:"";position:absolute;left:0;right:0;bottom:2%;height:14px;background:repeating-linear-gradient(90deg,#C9A24A 0 3px,#8a6a22 3px 6px);opacity:.85}
.fnl-wrap .cur.l{left:0;transform-origin:left;border-right:1px solid rgba(0,0,0,.4)}
.fnl-wrap .cur.r{right:0;transform-origin:right}
.fnl-wrap.open .cur.l{transform:translateX(-102%) skewX(-2deg)}
.fnl-wrap.open .cur.r{transform:translateX(102%) skewX(2deg)}
.fnl-mid{position:relative;z-index:3;display:grid;justify-items:center;gap:22px;transition:opacity .45s,transform .45s}
.fnl-wrap.open .fnl-mid{opacity:0;transform:scale(.94)}
.fnl-rec{position:relative;width:132px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,transparent 30%,rgba(90,60,10,.35) 31%,transparent 33%),repeating-radial-gradient(circle,#b98a2e 0 1.1px,#e2c06a 1.5px 2.4px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 60px rgba(226,192,106,.25);animation:spin 1.8s linear infinite}
.fnl-rec::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 25deg,transparent 0 6%,rgba(255,255,255,.35) 11%,transparent 17% 50%,rgba(255,255,255,.2) 60%,transparent 66%);animation:spin 1.8s linear infinite reverse}
.fnl-rec .lab{position:absolute;inset:31%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),transparent 55%),#8E1F2F}
.fnl-rec .lab b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:#F6F2ED;transform:translateY(-34%)}
.fnl-rec .lab::after{content:"";position:absolute;width:12%;aspect-ratio:1;border-radius:50%;background:#2A0610}
.fnl-name{font-family:var(--serif);font-size:clamp(40px,6vw,64px);line-height:1;color:#F6F2ED;letter-spacing:.01em;opacity:0;transform:translateY(10px);animation:fnlUp .7s .25s cubic-bezier(.2,.7,.2,1) forwards}
.fnl-name em{color:#F2B8C4}
.fnl-wave{display:flex;align-items:center;gap:4px;height:28px;opacity:0;animation:fnlUp .6s .5s forwards}
.fnl-wave i{display:block;width:3px;height:100%;border-radius:2px;background:#E2C06A;transform-origin:center;animation:fnlBar .9s ease-in-out infinite alternate}
@keyframes fnlUp{to{opacity:1;transform:none}}
@keyframes fnlBar{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}