/* ==========================================================================
Celeste Hair Evolution — Malfa, Salina
Design tokens: pumice cream ground, bordeaux + caramel color story,
an antique gold hairline, a muted Aeolian sea for the coastal notes.
========================================================================== */
/* Font is now loaded via tags in (faster discovery than @import,
which reduces the visible font-swap jump on first paint). */
:root{
color-scheme: light;
--cream: #F3E9D7;
--cream-deep: #E9DABC;
--cream-line: #DCC9A3;
--paper: #FBF6EC;
--ink: #2E2119;
--ink-soft: #5A4A3D;
--wine: #6E1F2E;
--wine-deep: #521521;
--terracotta: #B97A4A;
--caramel: #D6A96C;
--gold: #A6813F;
--sea: #3C6E72;
--display: 'Fraunces', 'Iowan Old Style', serif;
--body: 'Work Sans', 'Helvetica Neue', sans-serif;
--container: 1120px;
--radius: 2px;
--ease: cubic-bezier(.22,.7,.24,1);
}
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body{
margin:0;
background: var(--cream);
color: var(--ink);
font-family: var(--body);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
position: relative;
}
/* subtle paper grain, warm not grey */
body::before{
content:"";
position: fixed; inset:0;
pointer-events: none;
z-index: 0;
opacity: .5;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--display); font-weight: 500; margin:0; color: var(--ink); letter-spacing: -0.01em; }
p{ margin:0; }
a:focus-visible, button:focus-visible, .btn:focus-visible{
outline: 2px solid var(--wine);
outline-offset: 3px;
}
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--body); font-weight:600; font-size: 12px;
letter-spacing: .16em; text-transform: uppercase;
color: var(--wine);
}
.eyebrow::before{
content:""; width: 22px; height:1px; background: var(--gold);
}
/* ---------------------------------------------------------------------- */
/* Page transitions */
/* ---------------------------------------------------------------------- */
/* Native cross-document transitions where supported (Chrome/Edge) */
@view-transition{
navigation: auto;
}
/* Fade-in on every page load — also masks any residual font swap */
body{
animation: pageFadeIn .55s var(--ease) both;
}
@keyframes pageFadeIn{
from{ opacity:0; transform: translateY(10px); }
to{ opacity:1; transform:none; }
}
/* Fade-out just before leaving to an internal page (JS-driven fallback) */
body.leaving{
opacity:0;
transform: translateY(-6px);
transition: opacity .26s var(--ease), transform .26s var(--ease);
}
/* ---------------------------------------------------------------------- */
/* Header / nav */
/* ---------------------------------------------------------------------- */
.site-header{
position: sticky; top:0; z-index: 100;
padding: 22px 0;
transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.site-header.scrolled{
padding: 12px 0;
background: rgba(243,233,215,.86);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 1px 0 rgba(46,33,25,.08);
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-mark{
font-family: var(--display); font-style: italic; font-weight: 500;
font-size: 24px; color: var(--wine); white-space: nowrap;
}
.brand-sub{
font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink-soft); display:none;
}
@media(min-width:640px){ .brand-sub{ display:inline; } }
.nav-desktop{ display:none; align-items:center; gap: 36px; }
@media(min-width: 920px){ .nav-desktop{ display:flex; } }
.nav-desktop a{
position:relative; font-size: 14.5px; font-weight:500; color: var(--ink);
padding: 4px 0;
}
.nav-desktop a::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
background: var(--wine); transform: scaleX(0); transform-origin: right;
transition: transform .35s var(--ease);
}
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; }
.nav-desktop a[aria-current="page"]{ color: var(--wine); }
.header-cta{ display:flex; align-items:center; gap: 16px; }
.header-cta .nav-book{ display:none; }
@media(min-width: 920px){ .header-cta .nav-book{ display:inline-flex; } }
.header-cta .lang-switch{ display:none; }
@media(min-width: 920px){ .header-cta .lang-switch{ display:block; } }
.hamburger{
display:flex; flex-direction:column; justify-content:center; gap:5px;
width: 42px; height: 42px; background: none; border:none; cursor:pointer;
z-index: 210; position:relative;
}
@media(min-width:920px){ .hamburger{ display:none; } }
.hamburger span{
display:block; height:1.5px; width: 24px; background: var(--ink);
transition: transform .4s var(--ease), opacity .3s var(--ease);
margin: 0 auto;
}
body.menu-open .hamburger span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ opacity:0; }
body.menu-open .hamburger span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
/* centered modern mobile dropdown */
.mobile-menu{
position: fixed; inset:0; z-index: 200;
background: var(--cream);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; pointer-events:none;
transition: opacity .45s var(--ease), visibility .45s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-menu::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 50% 30%, rgba(214,169,108,.28), transparent 60%);
}
.mobile-menu-inner{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap: 26px; }
.mobile-menu a{
font-family: var(--display); font-size: clamp(26px,7vw,34px); font-weight:500;
color: var(--ink); opacity:0; transform: translateY(14px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-open .mobile-menu a{ opacity:1; transform: translateY(0); }
body.menu-open .mobile-menu a:nth-child(1){ transition-delay:.08s; }
body.menu-open .mobile-menu a:nth-child(2){ transition-delay:.14s; }
body.menu-open .mobile-menu a:nth-child(3){ transition-delay:.2s; }
body.menu-open .mobile-menu a:nth-child(4){ transition-delay:.26s; }
body.menu-open .mobile-menu a:nth-child(5){ transition-delay:.32s; }
.mobile-menu a[aria-current="page"]{ color: var(--wine); font-style: italic; }
.mobile-menu-foot{
margin-top: 18px; display:flex; flex-direction:column; align-items:center; gap: 10px;
opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease) .38s, transform .5s var(--ease) .38s;
}
body.menu-open .mobile-menu-foot{ opacity:1; transform:translateY(0); }
.mobile-menu-foot a{ font-size: 13px; letter-spacing:.06em; color: var(--ink-soft); font-family: var(--body); }
/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
.btn{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--body); font-weight:600; font-size: 14px;
letter-spacing:.02em; padding: 14px 26px; border-radius: var(--radius);
border: 1px solid transparent; cursor:pointer;
transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{ background: var(--wine); color: var(--paper); }
.btn-primary:hover{ background: var(--wine-deep); transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(110,31,46,.55); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ border-color: var(--wine); color: var(--wine); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--wine); padding-left:0; padding-right:0; }
.btn-ghost::after{ content:"→"; transition: transform .3s var(--ease); }
.btn-ghost:hover::after{ transform: translateX(5px); }
/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll */
/* ---------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }
/* ---------------------------------------------------------------------- */
/* Hero */
/* ---------------------------------------------------------------------- */
.hero{ position:relative; padding: 64px 0 40px; overflow:hidden; }
.hero .wrap{ display:grid; gap: 46px; align-items:center; grid-template-columns: 1fr; }
@media(min-width: 980px){ .hero .wrap{ grid-template-columns: 1.05fr .95fr; padding-top: 20px; } }
.hero h1{
font-size: clamp(38px, 6.4vw, 68px); line-height: 1.03; letter-spacing: -0.015em;
margin: 18px 0 22px;
}
.hero h1 em{ font-style: italic; color: var(--wine); font-weight: 400; }
.hero p.lede{ font-size: 17.5px; color: var(--ink-soft); max-width: 46ch; margin-bottom: 32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 16px; }
.ribbon-hero{ width:100%; height:auto; }
.ribbon-path{ stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.6s var(--ease) .3s forwards; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){ .ribbon-path{ stroke-dashoffset:0; animation:none; } }
/* ---------------------------------------------------------------------- */
/* Marquee strip */
/* ---------------------------------------------------------------------- */
.marquee{
background: var(--wine); color: var(--paper);
overflow:hidden; white-space:nowrap; padding: 15px 0;
border-top: 1px solid var(--wine-deep); border-bottom: 1px solid var(--wine-deep);
}
.marquee-track{ display:inline-flex; gap: 46px; animation: scroll 32s linear infinite; }
.marquee span{
font-family: var(--display); font-style: italic; font-weight: 400;
font-size: 18px; letter-spacing: .02em; display:inline-flex; align-items:center; gap:14px;
}
.marquee span::after{ content:"✦"; font-style:normal; color: var(--caramel); font-size:12px; }
@keyframes scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* ---------------------------------------------------------------------- */
/* Sections */
/* ---------------------------------------------------------------------- */
section{ position:relative; z-index:1; }
.section{ padding: 96px 0; }
.section-tight{ padding: 72px 0; }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(30px,4vw,42px); margin-top:14px; line-height:1.12; }
.section-head p{ color: var(--ink-soft); margin-top:16px; font-size:16px; max-width:56ch; }
.divider-wave{ display:block; width:100%; height:44px; }
/* Alt background bands */
.band-deep{ background: var(--cream-deep); }
.band-paper{ background: var(--paper); }
.band-ink{ background: var(--ink); color: var(--paper); }
.band-ink h2, .band-ink h3{ color: var(--paper); }
.band-ink .eyebrow{ color: var(--caramel); }
.band-ink .eyebrow::before{ background: var(--caramel); }
.band-ink p{ color: #DCCBB9; }
/* ---------------------------------------------------------------------- */
/* Cards */
/* ---------------------------------------------------------------------- */
.grid{ display:grid; gap: 26px; }
.grid-3{ grid-template-columns: 1fr; }
@media(min-width: 720px){ .grid-3{ grid-template-columns: repeat(3,1fr); } }
.grid-2{ grid-template-columns: 1fr; }
@media(min-width: 720px){ .grid-2{ grid-template-columns: repeat(2,1fr); } }
.card{
background: var(--paper);
border: 1px solid var(--cream-line);
padding: 34px 28px;
position:relative;
transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 22px 40px -26px rgba(46,33,25,.35); border-color: var(--gold); }
.card .num{
font-family: var(--display); font-style: italic; color: var(--caramel);
font-size: 14px; margin-bottom: 14px; display:block;
}
.card h3{ font-size: 21px; margin-bottom: 10px; }
.card p{ color: var(--ink-soft); font-size: 15px; }
.card-icon{ width: 34px; height:34px; margin-bottom: 18px; color: var(--wine); }
.pull-quote{
font-family: var(--display); font-style: italic; font-weight: 400;
font-size: clamp(24px,3.4vw,34px); line-height: 1.35; color: var(--ink);
max-width: 780px; position:relative; padding-left: 30px;
border-left: 2px solid var(--gold);
}
.pull-quote cite{ display:block; font-family: var(--body); font-style:normal; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); margin-top: 20px; }
/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
footer.site-footer{ background: var(--ink); color: #E7DCCB; padding: 68px 0 28px; }
footer.site-footer a{ color:#E7DCCB; }
.footer-grid{ display:grid; gap: 40px; grid-template-columns: 1fr; margin-bottom: 50px; }
@media(min-width:780px){ .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand .brand-mark{ color: var(--caramel); }
.footer-brand p{ color: #B8A88F; margin-top: 14px; font-size: 14px; max-width: 32ch; }
.footer-col h4{ font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color: var(--caramel); margin-bottom: 18px; font-family: var(--body); font-weight:600; }
.footer-col li{ margin-bottom: 11px; font-size: 14.5px; }
.footer-col a:hover{ color: var(--caramel); }
.footer-bottom{ border-top: 1px solid rgba(231,220,203,.15); padding-top: 22px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size: 12.5px; color:#8C7C66; }
.footer-bottom .admin-link{ color:#8C7C66; text-decoration:underline; text-underline-offset:3px; }
.footer-bottom .admin-link:hover{ color: var(--caramel); }
.footer-credit{ text-align:center; margin-top:16px; font-size:11.5px; color:#7A6B56; }
.footer-credit a{ color:#B8A88F; text-decoration:underline; text-underline-offset:2px; transition: color .3s var(--ease); }
.footer-credit a:hover{ color: var(--caramel); }
/* ---------------------------------------------------------------------- */
/* Gallery */
/* ---------------------------------------------------------------------- */
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 40px; }
.pill{
font-family: var(--body); font-size: 13.5px; font-weight: 600; letter-spacing:.02em;
padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cream-line);
background: var(--paper); color: var(--ink-soft); cursor:pointer;
transition: all .3s var(--ease);
}
.pill:hover{ border-color: var(--wine); color: var(--wine); }
.pill.active{ background: var(--wine); border-color: var(--wine); color: var(--paper); }
.gallery-grid{
display:grid; gap: 14px;
grid-template-columns: repeat(2, 1fr);
}
@media(min-width:640px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap:18px; } }
@media(min-width:980px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }
.gallery-tile{
position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
aspect-ratio: 4 / 5; overflow:hidden; background: var(--cream-deep);
}
.gallery-tile img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .6s var(--ease); }
.gallery-tile:hover img{ transform: scale(1.06); }
.gallery-tag{
position:absolute; left:10px; bottom:10px; padding: 5px 11px;
background: rgba(46,33,25,.72); color: var(--paper); font-size: 11px;
letter-spacing:.08em; text-transform:uppercase; backdrop-filter: blur(4px);
}
.gallery-empty{ color: var(--ink-soft); font-size:15px; padding: 40px 0; text-align:center; display:none; }
.lightbox{
position: fixed; inset:0; z-index: 300; background: rgba(46,33,25,.92);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transition: opacity .35s var(--ease), visibility .35s;
padding: 26px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(90vw,780px); max-height:82vh; object-fit:contain; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-nav{
position:absolute; background: none; border:1px solid rgba(251,246,236,.35); color: var(--paper);
width: 46px; height:46px; border-radius:50%; cursor:pointer; font-size:18px;
display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(251,246,236,.12); border-color: var(--caramel); }
.lightbox-close{ top: 22px; right: 22px; }
.lightbox-prev{ left: 18px; top:50%; transform: translateY(-50%); }
.lightbox-next{ right: 18px; top:50%; transform: translateY(-50%); }
@media(max-width:640px){ .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } }
/* ---------------------------------------------------------------------- */
/* Admin (reserved area) */
/* ---------------------------------------------------------------------- */
.admin-shell{ min-height: 100dvh; display:flex; flex-direction:column; }
.admin-login{
flex:1; display:flex; align-items:center; justify-content:center; padding: 40px 24px;
}
.admin-login-card{
width:100%; max-width: 380px; background: var(--paper); border:1px solid var(--cream-line);
padding: 40px 32px;
}
.admin-login-card h1{ font-size: 24px; margin-bottom:8px; }
.admin-login-card p{ color: var(--ink-soft); font-size:14px; margin-bottom:28px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.04em; color: var(--ink-soft); margin-bottom:7px; text-transform:uppercase; }
.field input{
width:100%; padding: 12px 14px; border:1px solid var(--cream-line); background: var(--cream);
font-family: var(--body); font-size:15px; color: var(--ink); border-radius: var(--radius);
transition: border-color .3s var(--ease);
}
.field input:focus{ outline:none; border-color: var(--wine); }
.form-error{ color: var(--wine-deep); font-size:13.5px; min-height:18px; margin-bottom:8px; }
.admin-panel{ display:none; }
.admin-topbar{
display:flex; align-items:center; justify-content:space-between; padding: 18px 0;
border-bottom: 1px solid var(--cream-line);
}
.admin-topbar .brand-mark{ font-size:20px; }
.upload-zone{
border: 1.5px dashed var(--cream-line); background: var(--paper);
padding: 44px 24px; text-align:center; cursor:pointer; transition: all .3s var(--ease);
}
.upload-zone.drag, .upload-zone:hover{ border-color: var(--wine); background: var(--cream-deep); }
.upload-zone p{ color: var(--ink-soft); font-size:14.5px; margin-top:8px; }
.upload-zone strong{ color: var(--wine); font-family: var(--display); font-style:italic; font-size:19px; font-weight:500; }
.upload-controls{ display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin-bottom:22px; }
.upload-controls .field{ margin-bottom:0; min-width:220px; }
select{
width:100%; padding: 12px 14px; border:1px solid var(--cream-line); background: var(--cream);
font-family: var(--body); font-size:15px; color: var(--ink); border-radius: var(--radius);
}
.upload-queue{ display:grid; gap:10px; margin-top:20px; }
.queue-row{ display:grid; grid-template-columns: 1fr 2fr auto; gap:14px; align-items:center; font-size:13px; color: var(--ink-soft); }
.queue-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-bar{ height:5px; background: var(--cream-deep); border-radius:3px; overflow:hidden; }
.queue-fill{ height:100%; width:0; background: var(--wine); transition: width .3s var(--ease); }
.admin-grid{
display:grid; gap:14px; grid-template-columns: repeat(2,1fr); margin-top:28px;
}
@media(min-width:640px){ .admin-grid{ grid-template-columns: repeat(4,1fr); } }
.admin-tile{ position:relative; aspect-ratio: 4/5; overflow:hidden; background: var(--cream-deep); }
.admin-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.admin-delete{
position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
background: rgba(46,33,25,.75); color:#fff; border:none; cursor:pointer; font-size:13px;
display:flex; align-items:center; justify-content:center; transition: background .3s var(--ease);
}
.admin-delete:hover{ background: var(--wine); }
.admin-empty{ text-align:center; color: var(--ink-soft); padding: 30px 0; display:none; }
.admin-note{ font-size:13px; color: var(--ink-soft); margin-top:10px; }
.admin-feature-btn{
position:absolute; top:8px; left:8px; width:30px; height:30px; border-radius:50%;
background: rgba(46,33,25,.55); color:#fff; border:none; cursor:pointer; font-size:14px;
display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease);
}
.admin-feature-btn:hover{ background: rgba(46,33,25,.8); }
.admin-feature-btn.is-featured{ background: var(--caramel); color: var(--ink); }
.admin-tile-label{
position:absolute; bottom:8px; left:8px; right:8px; font-size:10.5px; letter-spacing:.05em;
color:#fff; background: rgba(46,33,25,.6); padding:3px 8px; text-align:center; opacity:0;
transition: opacity .25s var(--ease); pointer-events:none;
}
.admin-tile.is-featured .admin-tile-label{ opacity:1; background: rgba(110,31,46,.75); }
/* ---------------------------------------------------------------------- */
/* Home — featured photos strip */
/* ---------------------------------------------------------------------- */
.home-gallery-grid{
display:grid; gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
@media(min-width:720px){ .home-gallery-grid{ grid-template-columns: repeat(4, 1fr); gap:14px; } }
.home-gallery-tile{
position:relative; display:block; aspect-ratio: 4/5; overflow:hidden;
background: var(--cream-deep); border:1px solid var(--cream-line);
}
.home-gallery-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.home-gallery-tile:hover img{ transform: scale(1.07); }
.home-gallery-empty{ grid-column: 1 / -1; text-align:center; color: var(--ink-soft); font-size:14.5px; padding: 20px 0; }
/* ---------------------------------------------------------------------- */
/* Language switcher */
/* ---------------------------------------------------------------------- */
.lang-switch{ position:relative; }
.lang-switch-btn{
display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--cream-line);
color: var(--ink); font-family: var(--body); font-size:12.5px; font-weight:600;
letter-spacing:.04em; padding: 8px 12px; border-radius:999px; cursor:pointer;
transition: all .3s var(--ease);
}
.lang-switch-btn:hover{ border-color: var(--wine); color: var(--wine); }
.lang-switch-btn::after{ content:"▾"; font-size:9px; opacity:.7; }
.lang-switch-menu{
position:absolute; top: calc(100% + 8px); right:0; background: var(--paper);
border:1px solid var(--cream-line); box-shadow: 0 18px 34px -18px rgba(46,33,25,.35);
min-width: 150px; opacity:0; visibility:hidden; transform: translateY(-6px);
transition: all .25s var(--ease); z-index: 120;
}
.lang-switch.open .lang-switch-menu{ opacity:1; visibility:visible; transform:none; }
.lang-switch-menu button{
display:flex; width:100%; align-items:center; gap:10px; padding:11px 16px;
background:none; border:none; text-align:left; font-family: var(--body); font-size:13.5px;
color: var(--ink); cursor:pointer; transition: background .2s var(--ease);
}
.lang-switch-menu button:hover{ background: var(--cream-deep); }
.lang-switch-menu button.active{ color: var(--wine); font-weight:600; }
.lang-switch-menu .lc{ font-size:11px; letter-spacing:.06em; color: var(--ink-soft); width:22px; }
.lang-switch-mobile{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.lang-switch-mobile button{
font-family: var(--body); font-size:12.5px; font-weight:600; letter-spacing:.03em;
padding: 7px 14px; border-radius:999px; border:1px solid var(--cream-line);
background:none; color: var(--ink-soft); cursor:pointer; transition: all .3s var(--ease);
}
.lang-switch-mobile button.active{ background: var(--wine); border-color: var(--wine); color: var(--paper); }
/* utility */
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top: 44px; }
.small{ font-size: 13px; color: var(--ink-soft); }