/* Faculty Glyphic VN - Vietnamese extension of Faculty Glyphic (SIL OFL 1.1), see fonts/OFL.txt */
@font-face{
  font-family:"Faculty Glyphic VN";
  src:url("fonts/FacultyGlyphicVN-Regular.woff2") format("woff2"),url("fonts/FacultyGlyphicVN-Regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --cream:#f6efe6;
  --ink:#1d1a22;
  --ink-soft:rgba(29,26,34,.62);
  --line:rgba(29,26,34,.12);
  --peach:#ffd3b6;
  --rose:#f7b8d0;
  --lilac:#c9b8ff;
  --aqua:#b6e8e3;
  --gold:#f2d38a;
  --serif:"Noto Serif Display", Georgia, serif;
  --sans:"Faculty Glyphic VN", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
  font-synthesis:none; /* only Regular ships; no faux bold/italic for the sans */
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:inherit}
em{font-style:italic}
::selection{background:var(--lilac);color:var(--ink)}

/* Noto Serif Display is a variable font - narrow it to sit close to the Instrument Serif look */
.loader__word,.nav__logo,.h2,.hero__title,.manifesto__text,.showcase__name,.showcase__pun,.card__name,
.story__cols em,.story__facts strong,.cart__head h3,.cart__empty,.cart-item__name,.cart__total strong,.footer__big{font-stretch:65%}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:opacity .9s var(--ease),visibility .9s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__word{font-family:var(--serif);font-size:clamp(64px,12vw,140px);line-height:1;display:flex;gap:.08em}
.loader__ly{padding-bottom:.2em;margin-bottom:-.2em;font-style:italic;background:linear-gradient(120deg,#e06b8b,#7d5cff,#3bb7a9);-webkit-background-clip:text;background-clip:text;color:transparent}
.loader__bar{width:120px;height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:40%;background:var(--ink);animation:bar 1.2s var(--ease) infinite}
@keyframes bar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none}
body.no-gl .bg{display:block}
body.no-gl #gl{display:none}
.bg__blob{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.75;
  will-change:transform;mix-blend-mode:multiply;
}
.bg__blob--1{width:60vmax;height:60vmax;left:-15vmax;top:-20vmax;background:var(--peach);animation:drift1 22s ease-in-out infinite alternate}
.bg__blob--2{width:55vmax;height:55vmax;right:-20vmax;top:10vmax;background:var(--lilac);animation:drift2 26s ease-in-out infinite alternate}
.bg__blob--3{width:50vmax;height:50vmax;left:20vmax;bottom:-25vmax;background:var(--aqua);animation:drift3 30s ease-in-out infinite alternate}
.bg__blob--4{width:40vmax;height:40vmax;right:10vmax;bottom:-10vmax;background:var(--rose);animation:drift1 34s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(12vw,10vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-14vw,12vh) scale(.9)}}
@keyframes drift3{to{transform:translate(10vw,-12vh) scale(1.1)}}
.bg__grain{
  position:absolute;inset:-50%;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,48px);
  mix-blend-mode:normal;
  top:-20px;opacity:0;transition:top 1s var(--ease) .6s,opacity 1s .6s; /* 'top', not transform: a transform would trap the fixed mobile menu inside the header */
}
body.is-ready .nav{top:0;opacity:1}
.nav__logo{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.01em}
.nav__logo em{font-style:italic;color:#7d5cff}
.nav__links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:28px;font-size:14px;letter-spacing:.01em;font-weight:500}
.nav__links a{position:relative;opacity:.7;transition:opacity .3s}
.nav__links a:hover{opacity:1}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .4s var(--ease)}
.nav__links a:hover::after{right:0}
.nav__cart{
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);font-size:14px;letter-spacing:.01em;font-weight:500;
  transition:transform .4s var(--ease),background .3s;
}
.nav__cart:hover{background:rgba(255,255,255,.85)}
.nav__cart-count{
  display:grid;place-items:center;min-width:22px;height:22px;border-radius:999px;padding:0 6px;
  background:var(--ink);color:var(--cream);font-size:11px;
}
.nav__cart.bump .nav__cart-count{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.45)}}

/* ---------- layout ---------- */
main{position:relative;z-index:2}
section{position:relative}
.eyebrow{font-size:14px;letter-spacing:.04em;font-weight:500;color:var(--ink-soft);margin-bottom:18px}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.4vw,92px);line-height:.98;letter-spacing:-.015em}
.h2 em{font-style:italic;background:linear-gradient(110deg,#e06b8b 0%,#7d5cff 55%,#3bb7a9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:background .3s,color .3s,box-shadow .5s;
  will-change:transform;
}
.btn--primary{background:var(--ink);color:var(--cream);box-shadow:0 10px 30px -12px rgba(29,26,34,.5)}
.btn--primary:hover{box-shadow:0 18px 40px -14px rgba(29,26,34,.55)}
.btn--ghost{border:1px solid var(--line);background:rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.7)}
.btn--wide{width:100%}
.btn.is-added{background:#3bb7a9}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:84px 20px 96px;
}
.hero__title{position:relative;
  font-family:var(--serif);font-weight:400;line-height:.82;letter-spacing:-.03em;
  font-size:clamp(104px,min(22vw,31svh),300px);
}
.hero__title .line{display:block;overflow:hidden;padding:0 .4em .26em;margin:0 -.4em -.26em;height:1.08em;box-sizing:border-box}
.hero__title .line + .line{margin-bottom:0}
.hero__title .word{display:inline-block;padding-bottom:.26em;margin-bottom:-.26em;transform:translateY(110%);will-change:transform}
.word--italic{font-style:italic;background:linear-gradient(110deg,#e06b8b 0%,#7d5cff 50%,#3bb7a9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero__sub{margin-top:34px;font-size:clamp(16px,1.6vw,20px);color:var(--ink-soft);max-width:560px;font-weight:300}
.hero__cta{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap;justify-content:center}
.hero__scroll{
  position:absolute;bottom:24px;left:0;right:0;margin:0 auto;width:12px;
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.hero__scroll b{display:block;width:7px;height:7px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg);margin-top:-5px;opacity:.7}
.hero__scroll i{width:1px;height:48px;background:linear-gradient(transparent,var(--ink));animation:scrollLine 1.8s var(--ease) infinite;transform-origin:top}
@keyframes scrollLine{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- manifesto ---------- */
.manifesto{padding:22vh clamp(20px,8vw,140px);display:flex;justify-content:center}
/* manifesto: the author's own line breaks, at every screen size */
.manifesto__text .ml{display:block;white-space:nowrap}
.manifesto__text{
  font-family:var(--serif);font-size:clamp(15px,5.3vw,56px);line-height:1.22;letter-spacing:-.01em;
  max-width:1100px;text-align:center;text-wrap:balance;
}
.manifesto__text em{font-style:italic;color:#7d5cff}
.manifesto__text .w{display:inline-block;opacity:.15;transition:opacity .4s}
.manifesto__text .w.on{opacity:1}

/* ---------- collection / showcase ---------- */
.collection__head{padding:8vh clamp(20px,6vw,80px) 4vh;max-width:1400px;margin:0 auto}
.showcase{position:relative}
.showcase__item{
  min-height:100svh;display:flex;align-items:center;
  padding:12vh clamp(20px,6vw,80px);
}
.showcase__item:nth-child(even){justify-content:flex-end}
.showcase__text{
  max-width:440px;position:relative;
  padding:34px;border-radius:24px;
  background:rgba(255,255,255,.42);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 30px 80px -40px rgba(29,26,34,.35);
}
.showcase__index{font-size:13px;letter-spacing:.06em;color:var(--ink-soft)}
.showcase__name{font-family:var(--serif);font-weight:400;font-size:clamp(56px,7vw,96px);line-height:.95;letter-spacing:-.02em;margin:14px 0 14px}
.showcase__pun{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,24px);line-height:1.3;margin-bottom:14px}
.showcase__desc{color:var(--ink-soft);font-size:15px;font-weight:300;margin-bottom:22px}
.showcase__meta{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:14px}
.showcase__meta .price{font-weight:600}
.dot{width:3px;height:3px;border-radius:50%;background:var(--ink-soft)}
.showcase__text > *{opacity:0;transform:translateY(28px)}

/* ---------- shop grid ---------- */
.shop{padding:14vh clamp(20px,6vw,80px) 10vh;max-width:1400px;margin:0 auto}
.shop__head{margin-bottom:56px;max-width:900px}
.shop__note{margin-top:18px;color:var(--ink-soft);font-weight:300}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.card{
  position:relative;border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .9s var(--ease),opacity 1.1s var(--ease),box-shadow .7s var(--ease);
  opacity:0;transform:translateY(40px);
}
.card.is-in{opacity:1;transform:none}
.card.is-in:hover{transform:translateY(-6px)}
.card:hover{box-shadow:0 40px 80px -40px rgba(29,26,34,.4)}
.card__img{aspect-ratio:1/1.05;position:relative;overflow:hidden}
.card__img canvas,.card__img img{width:100%;height:100%;display:block;object-fit:cover}
.card__img::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 60%,rgba(255,255,255,.35),transparent 70%)}
.card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px}
.card__name{font-family:var(--serif);font-size:32px;line-height:1;letter-spacing:-.01em}
.card__tag{font-size:13px;color:var(--ink-soft);font-weight:300;min-height:40px}
.card__row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.card__price{font-weight:600;font-size:15px}
.card .btn{padding:12px 20px;font-size:13px}
.card__badge{
  position:absolute;top:16px;left:16px;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.02em;
  background:rgba(29,26,34,.85);color:var(--cream);z-index:2;
}

/* ---------- story ---------- */
.story{padding:16vh clamp(20px,6vw,80px)}
.story__inner{max-width:1200px;margin:0 auto}
.story__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:56px;font-weight:300;font-size:16px;color:var(--ink-soft);line-height:1.7}
.story__cols em{font-style:italic;color:var(--ink);font-family:var(--serif);font-size:1.15em}
.story__facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:80px;border-top:1px solid var(--line);padding-top:40px}
.story__facts strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(56px,7vw,110px);line-height:1;letter-spacing:-.02em}
.story__facts span{font-size:15px;letter-spacing:.01em;color:var(--ink-soft)}

/* ---------- newsletter ---------- */
.news{padding:10vh clamp(20px,6vw,80px) 14vh}
.news__inner{
  max-width:900px;margin:0 auto;text-align:center;padding:clamp(40px,7vw,90px) clamp(24px,5vw,70px);border-radius:36px;
  background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 40px 100px -50px rgba(29,26,34,.4);
}
.news__inner p{margin-top:16px;color:var(--ink-soft);font-weight:300}
.news__form{display:flex;gap:10px;margin:30px auto 0;max-width:480px}
.news__form input{
  flex:1;padding:16px 22px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);
  font:inherit;font-size:15px;outline:none;transition:border-color .3s;
}
.news__form input:focus{border-color:var(--ink)}
.news__ok{display:none;color:#3bb7a9!important;font-weight:500!important}
.news.is-sent .news__form{display:none}
.news.is-sent .news__ok{display:block}

/* ---------- footer ---------- */
.footer{padding:0 clamp(20px,6vw,80px) 30px;overflow:hidden}
.footer__big{
  font-family:var(--serif);font-size:clamp(120px,26vw,420px);line-height:.8;letter-spacing:-.04em;text-align:center;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(29,26,34,.15) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none;padding-bottom:.24em;
}
.footer__big em{font-style:italic}
.footer__row{text-transform:none}
.footer__row a{text-decoration:underline;text-underline-offset:3px}
.footer__row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline;font-size:12px;color:var(--ink-soft);letter-spacing:.04em;margin-top:30px;border-top:1px solid var(--line);padding-top:20px}

/* ---------- cart ---------- */
.cart{position:fixed;inset:0;z-index:50;pointer-events:none}
.cart__backdrop{position:absolute;inset:0;background:rgba(29,26,34,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .6s var(--ease)}
.cart__panel{
  position:absolute;top:12px;right:12px;bottom:12px;width:min(440px,calc(100vw - 24px));
  background:rgba(246,239,230,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.8);border-radius:28px;
  display:flex;flex-direction:column;
  transform:translateX(calc(100% + 24px));transition:transform .8s var(--ease);
  box-shadow:0 50px 100px -40px rgba(29,26,34,.5);
}
.cart.is-open{pointer-events:auto}
.cart.is-open .cart__backdrop{opacity:1}
.cart.is-open .cart__panel{transform:none}
.cart__head{display:flex;align-items:center;justify-content:space-between;padding:26px 28px 18px;border-bottom:1px solid var(--line)}
.cart__head h3{font-family:var(--serif);font-weight:400;font-size:34px}
.cart__head h3 span{color:var(--ink-soft);font-size:.6em}
.cart__close{font-size:30px;line-height:1;width:40px;height:40px;border-radius:50%;transition:background .3s}
.cart__close:hover{background:rgba(29,26,34,.08)}
.cart__items{flex:1;overflow:auto;padding:18px 28px}
.cart__empty{color:var(--ink-soft);font-weight:300;text-align:center;padding:60px 0;font-family:var(--serif);font-size:22px;font-style:italic}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item__thumb{width:64px;height:72px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.5)}
.cart-item__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cart-item__name{font-family:var(--serif);font-size:22px;line-height:1}
.cart-item__price{font-size:13px;color:var(--ink-soft);margin-top:4px}
.cart-item__qty{display:flex;align-items:center;gap:8px;font-size:14px}
.cart-item__qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s}
.cart-item__qty button:hover{background:rgba(29,26,34,.08)}
.cart__foot{padding:20px 28px 26px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.cart__total{display:flex;justify-content:space-between;align-items:baseline}
.cart__total strong{font-family:var(--serif);font-size:30px;font-weight:400}
.cart__fine{font-size:12px;color:var(--ink-soft);text-align:center;font-weight:300}
.cart__fine.is-flash{color:#e06b8b;font-weight:500}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%,20px);opacity:0;
  padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:14px;
  transition:transform .6s var(--ease),opacity .6s;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 32px);
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(30px)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav__links{display:none}
  .story__cols,.story__facts{grid-template-columns:1fr}
  .showcase__item,.showcase__item:nth-child(even){min-height:88svh;justify-content:center;align-items:flex-end;padding-bottom:5vh}
  .showcase__text{max-width:520px;padding:26px}
  .showcase__name{font-size:56px}
  .news__form{flex-direction:column}
  .footer__row{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .bg__blob,.bg__grain,.hero__scroll i{animation:none}
}

.story__facts .inf{font-family:var(--sans);font-size:.8em}

/* ---------- lowercase: every heading, label, name and button; only long text keeps its case ---------- */
body{text-transform:lowercase}
.showcase__pun,.showcase__desc,.manifesto__text,.story__cols,.shop__note,.news__inner > p,input{text-transform:none}

/* ---------- glass buttons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  color:var(--ink);
  background:linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.4) 100%);
  border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.25),
    inset 0 -10px 18px -12px rgba(125,92,255,.35),
    0 12px 30px -14px rgba(29,26,34,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.btn::before{ /* sheen that sweeps across on hover, like sun on a rim */
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 47%,rgba(255,255,255,.2) 53%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s var(--ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn::after{ /* thin iridescent edge */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(224,107,139,.55),rgba(255,255,255,0) 30%,rgba(125,92,255,.45) 60%,rgba(59,183,169,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.btn--primary{
  color:var(--ink);
  background:
    linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.5) 100%),
    linear-gradient(110deg,rgba(255,196,214,.55),rgba(201,184,255,.55) 55%,rgba(182,232,227,.55));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -12px 20px -12px rgba(125,92,255,.45),
    0 14px 34px -14px rgba(125,92,255,.55);
}
.btn--primary:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -12px 20px -12px rgba(125,92,255,.55),0 20px 44px -16px rgba(125,92,255,.6)}
.btn--ghost{background:linear-gradient(135deg,rgba(255,255,255,.45),rgba(255,255,255,.12))}
.btn--ghost:hover{background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.3))}
.btn.is-added{background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(182,232,227,.75))}
.nav__cart{box-shadow:inset 0 1px 0 #fff,0 10px 26px -14px rgba(29,26,34,.35)}
.cart__close,.cart-item__qty button{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff;backdrop-filter:blur(8px)}

/* ---------- glass cursor ---------- */
@media (hover:hover) and (pointer:fine){
  html.has-glass-cursor, html.has-glass-cursor *{cursor:none !important}
}
.cursor-gl{position:fixed;left:0;top:0;width:88px;height:88px;z-index:10000;pointer-events:none;will-change:transform;opacity:0;transition:opacity .3s}
.cursor-dot{position:fixed;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;z-index:10001;pointer-events:none;
  background:#fff;box-shadow:0 0 0 1px rgba(29,26,34,.55),0 0 8px 2px rgba(255,255,255,.9);opacity:0;transition:opacity .3s,transform .25s var(--ease)}
html.cursor-on .cursor-gl,html.cursor-on .cursor-dot{opacity:1}
html.cursor-hover .cursor-dot{transform:scale(0)}
.cursor-spark{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;z-index:9999;pointer-events:none;
  animation:spark .75s var(--ease) forwards}
.cursor-spark::before,.cursor-spark::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate(-50%,-50%)}
.cursor-spark::before{width:100%;height:1.5px}
.cursor-spark::after{width:1.5px;height:100%;background:linear-gradient(180deg,transparent,#fff,transparent)}
@keyframes spark{0%{opacity:1;transform:translate(var(--x),var(--y)) scale(1) rotate(0)}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(.2) rotate(90deg)}}

/* ---------- drag-to-rotate ---------- */
.showcase__item{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}


/* ---------- hero word morph (mê ly ⇄ mỹ lệ) ---------- */
.hero__title .ch{display:inline;line-height:.82;transition:filter .25s,text-shadow .4s}
.hero__title .ch.is-glitch{display:inline-block;height:.82em;line-height:.82em;vertical-align:baseline;overflow:visible}
.hero__title .word{height:1.08em;vertical-align:top}
.hero__title .ch.is-settle{text-shadow:0 0 .12em rgba(201,184,255,.9),0 0 .35em rgba(255,255,255,.8)}
.morph-spark{position:absolute;pointer-events:none;font-style:normal;font-family:var(--sans);color:#8b6cff;
  text-shadow:0 0 8px rgba(255,255,255,.9);animation:mspark 1s var(--ease) forwards;-webkit-text-fill-color:#8b6cff}
@keyframes mspark{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-.5em) scale(1.1) rotate(90deg)}}

/* morph v2: the purple italic word follows the meaning - "ly" in mê ly, "mỹ" in mỹ lệ */
.hero__title .ch.grad{font-style:italic;color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(110deg,#e06b8b 0%,#7d5cff 50%,#3bb7a9 100%);background-size:1.4em 100%;
  -webkit-background-clip:text;background-clip:text}
.hero__title .ch.grad{padding:.25em .3em;margin:-.25em -.3em}
.hero__title .ch{transition:filter .35s var(--ease),opacity .35s var(--ease),text-shadow .6s}
.hero__title .ch.is-glitch{filter:blur(.012em);opacity:.85}
/* mỹ lệ: the y's tail would hit the circumflex of ệ - open the lines a touch (transform only, no layout shift) */
.hero__title .line + .line{transition:transform 1.1s var(--ease)}
/* line 2 is placed by JS after each word settles: 'ly' flush right under 'mê', 'lệ' nudged left clear of the y */

/* verse headings: each line stays whole at every screen size */
.h2--verse{font-size:clamp(20px,6vw,80px);line-height:1.05}
.h2--verse .ml{display:block;white-space:nowrap}

/* phones: the verse heading breaks into four short lines */
@media (max-width:600px){
  .h2--verse{font-size:clamp(20px,12vw,64px);line-height:1}
  .h2--verse .ms{display:block}
}

/* ---------- strip: the collection passing by, between manifesto and collection ---------- */
.strip{position:relative;padding:4vh 0 16vh;overflow:hidden}
.strip__band{overflow:hidden;padding:18px 0}
.strip__band--glass{transform:rotate(-2.5deg);
  background:rgba(255,255,255,.28);border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.strip__band--words{transform:rotate(-2.5deg);margin-top:6px}
.strip__track{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);width:max-content;animation:strip 70s linear infinite}
.strip__track--rev{animation-duration:55s;animation-direction:reverse}
@keyframes strip{to{transform:translateX(-50%)}}
.strip__item{display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,16px);white-space:nowrap}
.strip__item img{width:clamp(56px,7vw,96px);height:clamp(56px,7vw,96px);border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px -14px rgba(29,26,34,.45),inset 0 0 0 1px rgba(255,255,255,.5)}
.strip__item em{font-family:var(--serif);font-stretch:65%;font-style:italic;font-size:clamp(30px,4.4vw,64px);line-height:1;color:var(--ink)}
.strip__sep{color:#7d5cff;font-size:clamp(14px,1.6vw,22px)}
.strip__word{font-family:var(--serif);font-stretch:65%;font-size:clamp(18px,2vw,28px);color:var(--ink-soft);white-space:nowrap}
.strip__dot{color:#e06b8b}
.strip:hover .strip__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .strip__track{animation:none} }

/* ---------- section names big, taglines small ---------- */
.eyebrow{
  font-family:var(--serif);font-stretch:65%;font-weight:400;color:var(--ink);
  font-size:clamp(64px,10vw,150px);line-height:.9;letter-spacing:-.02em;margin-bottom:clamp(14px,2vw,26px);
}
.h2{font-size:clamp(26px,3.4vw,50px);line-height:1.08}
.h2--verse{font-size:clamp(20px,3.2vw,48px);line-height:1.1}
@media (max-width:600px){
  .h2--verse{font-size:clamp(20px,8.4vw,40px);line-height:1.05}
}

/* section names in the sans */
.eyebrow{font-family:var(--sans);font-stretch:normal;letter-spacing:-.03em;font-size:clamp(56px,8.4vw,128px);line-height:.95}
/* phones: split marked tagline halves onto their own lines */
@media (max-width:600px){ .h2 .ms{display:block} }

/* phones: the three sections live in a floating glass pill at the bottom */
@media (max-width:900px){
  .nav__links{
    display:flex;position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));top:auto;transform:translateX(-50%);
    gap:6px;padding:6px;border-radius:999px;z-index:30;white-space:nowrap;
    background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);
    backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
    box-shadow:inset 0 1px 0 #fff,0 14px 34px -14px rgba(29,26,34,.45);
  }
  .nav__links a{opacity:1;padding:10px 16px;border-radius:999px;font-size:14px}
  .nav__links a::after{display:none}
  .nav__links a.is-here{background:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff}
  .toast{bottom:84px}
}

/* the gem alone is the cursor */
.cursor-dot{display:none !important}

/* contact form: email + message */
.news__form{flex-direction:column;align-items:stretch;max-width:520px;gap:12px}
.news__form textarea{
  padding:16px 22px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.7);
  font:inherit;font-size:15px;line-height:1.5;outline:none;resize:vertical;min-height:120px;transition:border-color .3s;text-transform:none;
}
.news__form textarea:focus{border-color:var(--ink)}
.news__form .btn{align-self:center;min-width:180px}
.news__form .btn[disabled]{opacity:.6;pointer-events:none}
.news__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.news__err{color:#e06b8b!important;font-weight:500!important;min-height:1.2em;margin-top:12px!important}

/* mở lời: four paragraphs read best as a 2 x 2 grid */
.story__cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,72px);row-gap:28px;max-width:1040px}
@media (max-width:900px){ .story__cols{grid-template-columns:1fr} }

/* logo sits in a glass pill, like the cart */
.nav__logo{
  display:inline-flex;align-items:center;padding:7px 16px 9px;border-radius:999px;font-size:28px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 #fff,0 10px 26px -14px rgba(29,26,34,.35);
}

/* mở lời: four columns on wide screens, two on tablets, one on phones */
@media (min-width:1100px){ .story__cols{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;column-gap:clamp(24px,2.6vw,44px)} }

/* finale: the name alone, one full screen, colour flowing right to left with a soft glow */
.finale{min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 4vw}
.finale__word{
  font-family:var(--serif);font-stretch:65%;font-weight:400;
  font-size:clamp(140px,min(40vw,78svh),720px);line-height:.8;letter-spacing:-.04em;
  padding:.12em .18em .28em;user-select:none;
  background:linear-gradient(90deg,#e06b8b 0%,#b25cff 10%,#7d5cff 20%,#3bb7a9 30%,#f0a04b 40%,
                                     #e06b8b 50%,#b25cff 60%,#7d5cff 70%,#3bb7a9 80%,#f0a04b 90%,#e06b8b 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:finaleFlow 7s linear infinite,finaleGlow 3.6s ease-in-out infinite;
}
.finale__word em{font-style:italic}
@keyframes finaleFlow{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes finaleGlow{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 0 28px rgba(125,92,255,.25))}
  50%{filter:drop-shadow(0 0 22px rgba(255,255,255,.95)) drop-shadow(0 0 60px rgba(224,107,139,.45))}
}
@media (prefers-reduced-motion:reduce){ .finale__word{animation:none} }
.footer{padding-top:0}

/* ?og: clean hero for the share image */
html.og .nav,html.og .hero__scroll,html.og .loader{display:none!important}

/* phones: give every glass a full screen of its own before its card arrives, and let the card leave before the next glass */
@media (max-width:900px){
  .showcase__item,.showcase__item:nth-child(even){min-height:0;padding-top:72svh;padding-bottom:42svh;align-items:flex-end;justify-content:center}
  .footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* bands driven by JS: swipe/drag horizontally, keep vertical page scroll */
.strip__track.is-js{animation:none}
.strip__band{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.strip__band.is-grabbing{cursor:grabbing}
.strip__band img{-webkit-user-drag:none;user-select:none;pointer-events:none}

/* phones: the closing name breaks into mê / ly */
@media (max-width:600px){
  .finale__word{font-size:min(64vw,40svh);line-height:.78;text-align:center}
  .finale__word em{display:block}
}

/* header shares the page's content edge (same inset as every section) */
.nav{padding-left:clamp(20px,6vw,80px);padding-right:clamp(20px,6vw,80px)}

/* one menu everywhere: the floating glass pill at the bottom, on desktop too */
.nav__links{
  display:flex;position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));top:auto;transform:translateX(-50%);
  gap:6px;padding:6px;border-radius:999px;z-index:30;white-space:nowrap;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 #fff,0 14px 34px -14px rgba(29,26,34,.45);
}
.nav__links a{opacity:1;padding:10px 18px;border-radius:999px;font-size:14px;transition:background .3s}
.nav__links a::after{display:none}
.nav__links a:hover{background:rgba(255,255,255,.6)}
.nav__links a.is-here{background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff}
.toast{bottom:88px}
.footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}

/* phones: in the closing name, "ly" sits flush right under "mê" */
@media (max-width:600px){
  .finale__word{text-align:left}
  .finale__word em{text-align:right}
}

/* phones: the manifesto breaks into four short lines */
@media (max-width:600px){
  .manifesto__text{font-size:clamp(20px,9vw,44px);line-height:1.12}
  .manifesto__text .ms{display:block}
}

/* gradient italic words in headings: give the paint box room for the italic overhang (e.g. the "?" of "email?") */
.h2 em{padding:0 .14em 0 .04em;margin:0 -.1em 0 -.04em}

/* ---------- shop: deck 66% | docked cart 33% ---------- */
.shop{max-width:none}
.shop__layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.shop__dock{min-height:60vh}
@media (max-width:900px){ .shop__layout{grid-template-columns:1fr} .shop__dock{display:none} }

.deck{position:relative;height:clamp(460px,64vh,620px);max-width:520px;margin:10px auto 0;touch-action:pan-y}
.deck__card{
  position:absolute;inset:0;border-radius:32px;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 #fff,0 40px 80px -40px rgba(29,26,34,.45);
  display:flex;flex-direction:column;will-change:transform;
}
.deck__card.is-dragging{cursor:grabbing}
.deck__img{flex:1;min-height:0;position:relative;overflow:hidden}
.deck__img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.deck__body{padding:20px 26px 24px;display:flex;flex-direction:column;gap:6px}
.deck__name{font-family:var(--serif);font-stretch:65%;font-weight:400;font-size:clamp(34px,4vw,48px);line-height:1}
.deck__tag{font-size:15px;color:var(--ink-soft);text-transform:none}
.deck__meta{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:4px}
.deck__stamp{
  position:absolute;top:26px;z-index:3;padding:8px 18px;border-radius:14px;border:2px solid currentColor;
  font-family:var(--serif);font-stretch:65%;font-size:40px;line-height:1;opacity:0;pointer-events:none;background:rgba(255,255,255,.55)
}
.deck__stamp--yes{left:24px;color:#7d5cff;transform:rotate(-12deg);opacity:var(--yes,0)}
.deck__stamp--no{right:24px;color:#e06b8b;transform:rotate(12deg);opacity:var(--no,0)}
.deck__done{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  border-radius:32px;border:1px dashed rgba(29,26,34,.2);background:rgba(255,255,255,.3)}
.deck.is-empty .deck__done{display:flex}
.deck__done-title{font-family:var(--serif);font-stretch:65%;font-size:40px;line-height:1}
.deck__done-sub{color:var(--ink-soft);margin-bottom:10px}
.deck__bar{display:flex;align-items:center;justify-content:center;gap:18px;margin:34px auto 0;max-width:520px}
.deck__btn{min-width:130px}
.deck__count{font-size:14px;color:var(--ink-soft);min-width:60px;text-align:center}
.deck__hint{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:14px}

.extras{margin-top:clamp(60px,9vh,110px)}
.extras__title{font-family:var(--sans);font-weight:400;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;margin-bottom:22px}
.grid--extras{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.grid--extras .card__name{font-size:26px}

/* ---------- docked cart: the shop's right column, no dimming, page stays scrollable ---------- */
.cart.is-docked{pointer-events:none}
.cart.is-docked .cart__backdrop{opacity:0}
.cart.is-docked .cart__panel{
  pointer-events:auto;transform:none;
  top:96px;bottom:96px;right:clamp(20px,6vw,80px);
  width:calc((100vw - 2 * clamp(20px,6vw,80px) - clamp(24px,3vw,44px)) / 3);
  background:rgba(246,239,230,.72);box-shadow:0 30px 70px -40px rgba(29,26,34,.45);
  transition:transform .8s var(--ease),top .6s var(--ease),bottom .6s var(--ease),width .6s var(--ease);
}
.nav__cart{transition:opacity .4s var(--ease),transform .5s var(--ease),background .3s}
.nav__cart.is-docked-away{opacity:0;transform:translateY(-8px) scale(.9);pointer-events:none}
.grid--extras{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--extras .card__row{flex-direction:column;align-items:flex-start;gap:10px}
@media (max-width:700px){ .grid--extras{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .grid--extras .card__name{font-size:22px} }
@media (max-width:900px){ .shop__layout{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .deck__bar{gap:10px} .deck__btn{min-width:0;padding:14px 20px} .deck__count{min-width:44px} }

/* lifted card flies above everything, including the docked cart */
#dragLayer{position:fixed;inset:0;z-index:70;pointer-events:none}
#dragLayer .deck__card{pointer-events:auto;cursor:grabbing}
/* the docked panel is animated by GSAP (grow from / shrink into the cart button) */
.cart.is-docked .cart__panel{transition:none}

/* cart list scrolls on its own (wheel, trackpad, touch) in both the modal and the docked column */
.cart__items{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;min-height:0}
/* extras can be grabbed and tossed into the cart */
.grid--extras .card{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.grid--extras .card img{-webkit-user-drag:none;pointer-events:none}
.grid--extras .card.is-tossing{opacity:.55}
.toss{position:fixed;z-index:1;border-radius:22px;overflow:hidden;pointer-events:none;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 60px -24px rgba(29,26,34,.45);transform-origin:50% 50%}
.toss img{display:block;width:100%;aspect-ratio:1/1.05;object-fit:cover}
.toss span{display:block;padding:8px 12px 10px;font-family:var(--serif);font-stretch:65%;font-size:22px;line-height:1}

/* ---------- one pill for everything: logo · sections · mẹt mê (desktop and phone) ---------- */
.nav{padding:0;height:0}
.nav__links{gap:4px;padding:6px;align-items:center}
.nav__links .nav__logo{
  font-family:var(--serif);font-stretch:65%;font-size:24px;line-height:1;padding:6px 14px 8px;border-radius:999px;
  background:rgba(255,255,255,.7);border:0;box-shadow:inset 0 1px 0 #fff;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav__links .nav__logo em{font-style:italic;color:#7d5cff}
.nav__links .nav__cart{
  position:static;padding:8px 8px 8px 16px;gap:8px;font-size:14px;letter-spacing:.01em;
  background:linear-gradient(110deg,rgba(255,196,214,.6),rgba(201,184,255,.6) 55%,rgba(182,232,227,.6));
  border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav__links .nav__cart.is-docked-away{opacity:.25;transform:none;pointer-events:none}
.nav__links a.nav__sec{padding:10px 16px}
/* docked mẹt: no header any more, so it can use the full height above the pill */
.cart.is-docked .cart__panel{top:24px;bottom:96px}
@media (max-width:600px){
  .nav__links{gap:2px;padding:5px;max-width:calc(100vw - 16px)}
  .nav__links .nav__logo{font-size:19px;padding:5px 10px 7px}
  .nav__links a.nav__sec{padding:9px 9px;font-size:13px}
  .nav__links .nav__cart{padding:6px 6px 6px 10px;font-size:13px;gap:6px}
  .nav__links .nav__cart-count{min-width:20px;height:20px;font-size:10px}
}
@media (max-width:370px){ .nav__links .nav__cart-label{display:none} .nav__links .nav__cart{padding:6px} }
/* drop target feedback while dragging something over the mẹt */
.cart__panel.is-drop{box-shadow:0 0 0 3px rgba(125,92,255,.55),0 30px 70px -30px rgba(125,92,255,.55)!important}
.nav__links .nav__cart.is-drop{transform:scale(1.12);box-shadow:0 0 0 3px rgba(125,92,255,.55),0 10px 30px -8px rgba(125,92,255,.6)}
/* drop target feedback while dragging something over the mẹt */
.cart__panel.is-drop{box-shadow:0 0 0 3px rgba(125,92,255,.55),0 30px 70px -30px rgba(125,92,255,.55)!important}
.nav__links .nav__cart.is-drop{transform:scale(1.12);box-shadow:0 0 0 3px rgba(125,92,255,.55),0 10px 30px -8px rgba(125,92,255,.6)}
/* the lifted layer never blocks clicks (the deck keeps the pointer while dragging) */
#dragLayer,#dragLayer *{pointer-events:none!important}
/* logo is just another item in the pill: plain until you are on the hero */
.nav__links .nav__logo{background:transparent;box-shadow:none;transition:background .3s}
.nav__links .nav__logo.is-here{background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff}

/* nicer rag everywhere there is running text (no lonely last words), especially "mở lời" */
p,li,.showcase__pun,.showcase__desc,.deck__tag,.card__tag,.cart__fine,.news__inner p,.footer__row span{text-wrap:pretty}
.story__cols p{text-wrap:pretty;hyphens:manual}

/* deck cards: the text part is (almost) opaque, so the cards stacked behind never show through */
.deck__card{background:rgba(250,246,241,.9)}
.deck__body{background:rgba(252,249,245,.96);position:relative;z-index:1}

/* cart: clear-all */
.cart__acts{display:flex;align-items:center;gap:10px}
.cart__clear{font-size:13px;padding:8px 14px;border-radius:999px;color:var(--ink-soft);background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff;transition:color .3s,background .3s}
.cart__clear:hover{color:#e06b8b;background:rgba(255,255,255,.85)}
.cart__clear[hidden]{display:none}

/* footer: © line + visitor count stacked */
.footer__meta{display:flex;flex-direction:column;gap:4px}
.footer__visits b{font-weight:500;color:var(--ink)}
.footer__visits[hidden]{display:none}

/* footer: always three columns, left / center / right */
.footer__row,.footer__row[class]{display:grid;grid-template-columns:1fr minmax(0,1.7fr) 1fr;gap:clamp(12px,3vw,40px);align-items:start;flex-direction:initial}
.footer__row>:nth-child(1){text-align:left}
.footer__row>:nth-child(2){text-align:center}
.footer__row>:nth-child(3){text-align:right}
@media (max-width:760px){.footer__row,.footer__row[class]{grid-template-columns:1fr;gap:14px}.footer__row>:nth-child(n){text-align:center}}
.br-m{display:none}
@media (max-width:760px){.br-m{display:inline}}