/* ===========================================================
   THE JAUNTY SPOT — pages.css
   =========================================================== */

/* ===========================================================
   LANDING
   =========================================================== */

/* ---------- aurora ----------
   Before you take the quiz you are not one identity, you are all
   four. So the landing page runs every identity colour at once and
   lets them drift through each other. From the quiz onward the
   background settles into the single colour you chose. */
body.is-landing::before,
body.is-landing::after{display:none}

.aurora{
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;
  filter:blur(96px) saturate(108%);
}
/* The colour is present, not in charge. Dark luxury reads as depth
   with a suggestion of colour in it — the moment the colour becomes
   the subject it stops looking expensive. */
.aurora i{
  position:absolute;display:block;
  border-radius:50%;
  mix-blend-mode:screen;
  opacity:.20;
  will-change:transform;
}
/* pulls the darkness back over the top and vignettes the edges */
.aurora::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(6,7,10,.42) 62%, rgba(6,7,10,.88) 100%),
    linear-gradient(180deg, rgba(6,7,10,.30) 0%, transparent 34%, rgba(6,7,10,.55) 100%);
}
/* executive */
.aurora i:nth-child(1){
  width:52vw;aspect-ratio:1.3;top:-14vh;left:-8vw;
  background:radial-gradient(circle,rgba(91,143,214,.55) 0%,transparent 66%);
  animation:drift-a 46s ease-in-out infinite alternate;
}
/* rebel */
.aurora i:nth-child(2){
  width:46vw;aspect-ratio:1.1;top:6vh;right:-10vw;
  background:radial-gradient(circle,rgba(226,62,82,.48) 0%,transparent 66%);
  animation:drift-b 38s ease-in-out infinite alternate;
}
/* effortless */
.aurora i:nth-child(3){
  width:50vw;aspect-ratio:1.25;bottom:-18vh;left:6vw;
  background:radial-gradient(circle,rgba(143,168,122,.45) 0%,transparent 68%);
  animation:drift-c 54s ease-in-out infinite alternate;
}
/* maverick */
.aurora i:nth-child(4){
  width:42vw;aspect-ratio:1;bottom:-6vh;right:4vw;
  background:radial-gradient(circle,rgba(169,123,232,.50) 0%,transparent 66%);
  animation:drift-d 43s ease-in-out infinite alternate;
}
@keyframes drift-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(14vw,10vh,0) scale(1.18)}
  100%{transform:translate3d(4vw,20vh,0) scale(.96)}
}
@keyframes drift-b{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-18vw,14vh,0) scale(.9)}
  100%{transform:translate3d(-6vw,28vh,0) scale(1.2)}
}
@keyframes drift-c{
  0%{transform:translate3d(0,0,0) scale(.95)}
  50%{transform:translate3d(18vw,-12vh,0) scale(1.22)}
  100%{transform:translate3d(-4vw,-22vh,0) scale(1)}
}
@keyframes drift-d{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  50%{transform:translate3d(-14vw,-16vh,0) scale(.92)}
  100%{transform:translate3d(6vw,-6vh,0) scale(1.16)}
}
@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s7) 0 var(--s6);
}

/* the brand line, above everything */
.never{
  font-family:"Space Mono",monospace;
  font-size:11px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--bone-faint);
  margin:0 0 var(--s5);
}
.hero-ask{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(22px,2.4vw,30px);
  color:var(--accent);
  margin:0 0 var(--s6);
}
.hero-ask-title{
  margin:0 0 var(--s4);
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(34px,5.2vw,64px);
  line-height:1.15;color:var(--bone);
  text-wrap:pretty;
}
.hero-ask-reveal{
  display:inline-block;
  clip-path:inset(0 100% 0 0);opacity:0;
  animation:heroAskWipe 1s cubic-bezier(.22,.61,.36,1) .3s forwards;
}
@keyframes heroAskWipe{
  0%{clip-path:inset(0 100% 0 0);opacity:0;transform:translateY(6px)}
  12%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:translateY(0)}
}
.hero-ask-word{
  background-image:linear-gradient(90deg,#A4405A,#D26B32,#8B9670,#6E92BC,#A4405A);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:heroWordFlow 6s linear infinite;
}
@keyframes heroWordFlow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
.hero-subtitle{
  margin:0 0 var(--s6);
  font-size:clamp(15px,1.6vw,18px);
  color:var(--bone-dim);letter-spacing:.02em;
}
@media (prefers-reduced-motion:reduce){
  .hero-ask-reveal{animation:none;clip-path:inset(0);opacity:1;transform:none}
  .hero-ask-word{animation:none;background-position:0% 50%}
}

/* ---------- the masthead line ---------- */
.masthead-title{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-size:clamp(26px,3.2vw,42px);
  line-height:1.2;
  letter-spacing:.055em;   /* tracking tuned for Fraunces at display size */
  text-transform:uppercase;
  color:var(--bone);
  max-width:900px;          /* ch is far too narrow in Cormorant at display size */
  margin:0 0 var(--s5);
  text-wrap:pretty;
}

/* the philosophy, now sitting beneath it */
.statement{margin-bottom:var(--s6);max-width:560px}
.statement p{margin:0}
.line-one,.line-two{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.45;font-weight:300;
  color:var(--bone-dim);
}
.line-two{
  font-style:italic;
  font-weight:400;
  color:var(--bone);
  margin-top:.22em !important;
}
.line-one,.line-two{text-wrap:pretty}
@media (max-width:760px){
  .line-one,.line-two{font-size:17px}
}
.sign{
  margin-top:var(--s5) !important;
  font-family:"Space Mono",monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-faint);
}

/* ---------- the slow reveal ----------
   The first line is there when the page arrives. The second answers
   it a beat later, surfacing rather than sliding — a long fade with
   the blur lifting, so it reads as something becoming clear instead
   of an element animating in. */
/* A wipe, not a fade. The line is masked out and the mask retreats
   left to right, so the sentence is literally revealed rather than
   turned up in opacity — which is what the words are describing. */
.line-two{
  overflow:hidden;
}
.line-two span{
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  opacity:0;
  animation:wipe 2.4s cubic-bezier(.22,.61,.36,1) 1.2s forwards;
}
@keyframes wipe{
  0%   {clip-path:inset(0 100% 0 0); opacity:0;   transform:translateY(6px)}
  12%  {opacity:1}
  100% {clip-path:inset(0 -2% 0 0);  opacity:1;   transform:translateY(0)}
}
.sign{
  opacity:0;
  filter:blur(7px);
  animation:surface 2.4s cubic-bezier(.22,.61,.36,1) 3.4s forwards;
}

@keyframes surface{
  0%   {opacity:0;   filter:blur(9px); transform:translateY(9px)}
  55%  {opacity:.55; filter:blur(2.5px)}
  100% {opacity:1;   filter:blur(0);   transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .line-two span,.sign{animation:none;opacity:1;filter:none;transform:none;clip-path:none}
}

.hero-sub{
  max-width:46ch;color:var(--bone-dim);
  font-size:16.5px;margin:0 0 var(--s6);
}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%}
}

.pillars{
  margin-top:64px;padding-top:26px;
  border-top:1px solid var(--edge);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;
}
.pillars div{font-size:14px;color:var(--bone-dim);line-height:1.55}
.pillars b{
  display:block;color:var(--bone);font-weight:500;margin-bottom:6px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}

.identity-preview{padding:0 0 var(--s8)}
.identity-preview h2{
  font-size:clamp(30px,4.6vw,46px);margin-bottom:var(--s6);font-weight:500;
}
/* ---------- quiz ---------- */
.quiz{padding:var(--s8) 0;max-width:730px}
.progress{display:flex;gap:6px;margin-bottom:40px}
.progress i{
  flex:1;height:2px;background:var(--edge);border-radius:2px;
  transition:background .4s,box-shadow .4s;
}
.progress i.on{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.qnum{margin-bottom:18px}
.quiz h2{
  font-size:clamp(29px,4.8vw,46px);
  max-width:19ch;margin-bottom:36px;font-weight:400;line-height:1.1;
}
.opts{display:grid;gap:12px}
.opt{
  text-align:left;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:19px 22px;font-size:16px;color:var(--bone);
  transition:border-color .2s,background .2s,transform .2s;
}
.opt:hover{
  border-color:var(--accent);
  background:var(--glass-lift);
  transform:translateX(5px);
}
.quiz .back{
  margin-top:30px;color:var(--bone-faint);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.quiz .back:hover{color:var(--bone)}

/* ===========================================================
   THE REVEAL
   The page arrives uncoloured. The identity's colour blooms out of
   the middle and the whole interface becomes that identity at the
   moment the name lands — the proposition acted out rather than
   announced.
   =========================================================== */
body.revealing{--accent:#8A8378}          /* neutral until the answer lands */

.reveal-stage{
  position:relative;
  min-height:78vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s8) var(--s5);
  max-width:var(--maxw);margin:0 auto;
}

/* the bloom */
.reveal-bloom{
  position:absolute;z-index:-1;
  left:50%;top:46%;
  width:min(92vw,900px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.2);
  border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 66%);
  filter:blur(70px);
  opacity:0;
}
/* the beat: expanding and contracting while it decides */
.reveal-bloom.beating{
  opacity:1;
  animation:heartbeat 840ms ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{transform:translate(-50%,-50%) scale(.62); opacity:.45}
  38%    {transform:translate(-50%,-50%) scale(.92); opacity:.95}
  62%    {transform:translate(-50%,-50%) scale(.74); opacity:.6}
}

.bloom-run{animation:bloom 2.6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes bloom{
  0%   {opacity:.6;  transform:translate(-50%,-50%) scale(.7)}
  40%  {opacity:1;   transform:translate(-50%,-50%) scale(1.12)}
  100% {opacity:.72; transform:translate(-50%,-50%) scale(1)}
}

/* stage one — reading */
.reading{max-width:420px}
.reading .kicker{margin-bottom:var(--s4)}
.reading-bar{
  height:1px;background:var(--edge);position:relative;overflow:hidden;
}
.reading-bar i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(90deg,transparent,var(--bone-dim),transparent);
  transform:translateX(-100%);
  animation:reading 2.4s ease-in-out infinite;
}
@keyframes reading{
  0%{transform:translateX(-100%)} 100%{transform:translateX(100%)}
}

/* stage two — the answer */
.reveal-out h1{
  font-size:clamp(46px,10vw,104px);
  font-weight:400;font-style:italic;
  color:var(--accent);
  text-shadow:0 0 70px var(--accent-glow);
  margin:0;
}
.reveal-line{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(19px,2.3vw,27px);
  font-style:italic;color:var(--bone);
  margin:var(--s4) 0 0;
}
.reveal-out .blurb{
  font-size:var(--t-lg);color:var(--bone-dim);
  max-width:50ch;margin:var(--s5) 0 var(--s5);
}
.traits{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:var(--s6)}
.trait{
  background:var(--accent-wash);color:var(--bone);
  border:1px solid var(--edge);
  border-radius:999px;padding:7px 15px;
  font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
.reveal-cta{display:flex;gap:12px;flex-wrap:wrap}

/* each part arrives in turn, not all at once */
.revealed .reveal-out > *{
  animation:surface 1.5s cubic-bezier(.22,.61,.36,1) backwards;
}
.revealed .reveal-out .kicker{animation-delay:0s}
.revealed .reveal-out h1{animation-delay:.18s}
.revealed .reveal-line{animation-delay:.75s}
.revealed .reveal-out .blurb{animation-delay:1.05s}
.revealed .traits{animation-delay:1.3s}
.revealed .reveal-cta{animation-delay:1.5s}

/* ---------- profile ---------- */
.profile-block{padding:var(--s8) var(--s5)}
.profile-block h2{
  font-size:clamp(28px,4vw,44px);font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--s4);
}
.profile-intro{color:var(--bone-dim);max-width:54ch;margin:0 0 var(--s6)}
.profile-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s4) var(--s5);max-width:820px;
}
.profile-note{
  color:var(--bone-faint);font-size:var(--t-sm);
  max-width:56ch;margin:var(--s4) 0 var(--s6);
}
.profile-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- the identity is now settled ---------- */
.locked{
  padding:0 var(--s5) var(--s8);
  max-width:var(--maxw);margin:0 auto;
}
.locked p{
  max-width:58ch;color:var(--bone-dim);font-size:var(--t-sm);
  padding-top:var(--s5);border-top:1px solid var(--edge);
}
.locked strong{color:var(--bone);font-weight:600}
.locked a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-faint);border-bottom:1px solid var(--edge);padding-bottom:3px;
}
.locked a:hover{color:var(--accent)}

/* ---------- shop ---------- */
.identity-head{
  border-bottom:1px solid var(--edge);
  padding:var(--s8) 0 var(--s6);
}
.identity-head .kicker{margin-bottom:14px}
.identity-head h1{
  font-size:clamp(42px,8vw,86px);
  color:var(--accent);font-weight:400;font-style:italic;
  text-shadow:0 0 60px var(--accent-glow);
}
.identity-head p{
  color:var(--bone-dim);max-width:54ch;margin:18px 0 0;font-size:15px;
}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:30px}
.text-link{
  color:var(--bone-dim);font-size:13px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--edge);
  transition:color .2s;
}
.text-link:hover{color:var(--bone)}
.search-and-filters{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.search-bar{
  flex:1;min-width:180px;display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;
  background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--bone-faint);
}
.search-bar svg{width:15px;height:15px;flex-shrink:0}
.search-bar input{
  flex:1;background:none;border:none;outline:none;
  color:var(--bone);font-size:13.5px;font-family:inherit;
}
.search-bar input::placeholder{color:var(--bone-faint)}
.filters-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;
  background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--bone);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  flex-shrink:0;
}
.filters-btn svg{width:15px;height:15px}
.filters-btn.filled{border-color:var(--accent);color:var(--accent)}
#filtersCount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-size:10px;margin-left:4px;
}
.filter-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;
  opacity:0;transition:opacity .25s ease;
}
.filter-backdrop.show{opacity:1}
.filter-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,90vw);
  background:rgba(14,15,20,.97);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-left:1px solid var(--edge);
  z-index:90;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.filter-drawer.show{transform:translateX(0)}
.filter-drawer-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--s5);border-bottom:1px solid var(--edge);flex-shrink:0;
}
.filter-drawer-head h3{font-size:22px;font-weight:400;margin:0;font-family:"Fraunces",Georgia,serif}
.filter-close{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--edge);
  background:var(--glass);color:var(--bone);font-size:18px;cursor:pointer;
  line-height:1;
}
.filter-body{flex:1;overflow-y:auto;padding:var(--s5)}
.filter-section{margin-bottom:var(--s6)}
.filter-section h4{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-faint);margin:0 0 var(--s3);font-weight:400;
}
.filter-check{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  font-size:14.5px;color:var(--bone-dim);cursor:pointer;
}
.filter-check input{accent-color:var(--accent);width:16px;height:16px}
.filter-pills{display:flex;flex-wrap:wrap;gap:8px}
.filter-pill{
  padding:7px 14px;border-radius:999px;border:1px solid var(--edge);
  background:var(--glass);color:var(--bone-dim);font-size:13px;cursor:pointer;
}
.filter-pill.on{border-color:var(--accent);color:var(--accent)}
#filterPrice{width:100%;accent-color:var(--accent)}
.filter-drawer-foot{
  padding:var(--s5);border-top:1px solid var(--edge);
  display:flex;flex-direction:column;gap:10px;flex-shrink:0;
}
@media (max-width:640px){
  .filter-drawer{width:100%;transform:translateY(100%)}
  .filter-drawer.show{transform:translateY(0)}
}
.count{
  margin-left:auto;color:var(--bone-faint);
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;
}

/* ---------- item detail ---------- */
.crumb{padding-top:var(--s6)}
.crumb a{
  color:var(--bone-faint);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;transition:color .2s;
}
.crumb a:hover{color:var(--accent)}

.detail{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s7);padding:var(--s6) 0 var(--s8);
}
.detail .img{
  position:relative;
  aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;
}
.cursor-hint{
  position:absolute;top:50%;right:70px;z-index:3;
  width:26px;height:26px;pointer-events:none;opacity:0;
  animation:cursorHint 3.2s ease-in-out 1s 1 both;
}
.cursor-hint svg{width:100%;height:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
@keyframes cursorHint{
  0%{opacity:0;transform:translate(30px,-50%) scale(1)}
  15%{opacity:1;transform:translate(30px,-50%) scale(1)}
  40%{opacity:1;transform:translate(-10px,-50%) scale(1)}
  50%{opacity:1;transform:translate(-10px,-50%) scale(.8)}
  60%,85%{opacity:1;transform:translate(-10px,-50%) scale(1)}
  100%{opacity:0;transform:translate(-10px,-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .cursor-hint{display:none}
}
.detail .img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .35s ease;
}
.detail .img img.active{opacity:1}
.detail .img-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:2;
}
.detail .img-dots button{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;
  background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s;
}
.detail .img-dots button.active{background:#fff}
.detail .img-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.detail .img.show-controls .img-arrow{opacity:1;pointer-events:auto}
.detail .img-arrow.prev{left:12px}
.detail .img-arrow.next{right:12px}
.detail h1{font-size:clamp(30px,4vw,42px);margin-bottom:12px;font-weight:500}
.detail .price{
  font-size:24px;font-weight:600;margin-bottom:26px;
  font-family:"Space Mono",monospace;letter-spacing:-.01em;
}

/* the designed sold-out state — never a dead end */
.soldstate{padding:var(--s7) 0 var(--s5)}
.soldstate h1{
  font-size:clamp(31px,4.8vw,50px);max-width:18ch;
  color:var(--accent);font-weight:400;font-style:italic;
  margin:14px 0 14px;text-shadow:0 0 56px var(--accent-glow);
}
.soldstate > p{color:var(--bone-dim);max-width:55ch;margin:0;font-size:15px}

/* ---------- account ---------- */
.account{padding:var(--s8) 0;max-width:640px}
.account h1{font-size:clamp(36px,5.4vw,56px);margin-bottom:var(--s6);font-weight:400}
.account section{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  padding:var(--s5);margin-bottom:var(--s4);
}
.account section h2{font-size:21px;margin-bottom:8px;font-weight:500}
.account section > p{margin:0 0 var(--s5);font-size:14px;color:var(--bone-dim)}

/* ---------- instrumentation panel ---------- */
.instr{
  border-top:1px solid var(--edge);
  padding:var(--s6) 0 var(--s8);
  color:var(--bone-faint);font-size:var(--t-sm);
}
.instr summary{
  cursor:pointer;font-family:"Space Mono",monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
}
.instr summary:hover{color:var(--bone-dim)}
.instr ul{margin:18px 0 0;padding-left:20px;line-height:1.8}
.instr code{font-family:"Space Mono",monospace;color:var(--accent);font-size:12px}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .detail{grid-template-columns:1fr;gap:var(--s5)}
  .detail .img{aspect-ratio:1/1}
  .cursor-hint{right:56px;width:22px;height:22px}
  .count{margin-left:0;width:100%}
  .topbar-inner{padding-top:12px;padding-bottom:12px}
  .brand{letter-spacing:.18em;font-size:13px}
}


/* ===========================================================
   LANDING SECTIONS
   =========================================================== */

/* the page whispering — nothing else on the screen */
.whisper{
  padding:var(--s6) 0;
  text-align:center;
}
.whisper p{
  margin:0;
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(19px,2.1vw,26px);
  color:var(--bone-faint);
  letter-spacing:.01em;
  text-shadow:0 0 30px var(--accent-glow);
  opacity:0;transform:translateY(18px);
}
.whisper p.in{
  animation:whisperRise 1.4s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes whisperRise{
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .whisper p{opacity:1;transform:none}
  .whisper p.in{animation:none}
}

/* identity worlds */
.worlds{padding:0 0 var(--s8)}
.worlds h2{
  font-size:clamp(27px,3.6vw,42px);
  font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:var(--s6);
  color:var(--bone-soft);
}
.worlds-note{
  margin:var(--s6) 0 0;max-width:54ch;
  font-size:var(--t-sm);color:var(--bone-faint);
}

.idcards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--s5);
}
.idcard{
  position:relative;display:block;
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5) var(--s5);
  overflow:hidden;isolation:isolate;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  opacity:0;transform:translateY(32px);
}
.idcard.in{
  animation:idcardReveal .85s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes idcardReveal{
  0%{opacity:0;transform:translateY(32px)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0)}
}
.idcard.in .glass-tint{animation:pool 19s ease-in-out infinite alternate, tintBloom 1.1s ease-out}
@keyframes tintBloom{
  0%{opacity:0}
  35%{opacity:.75}
  100%{opacity:.30}
}
@media (prefers-reduced-motion:reduce){
  .idcard{opacity:1;transform:none}
  .idcard.in{animation:none}
  .idcard.in .glass-tint{animation:none}
}
.idcard-body{position:relative;z-index:2;display:block}

.idcard h3{
  font-size:23px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:10px;
}
.idcard-line{
  margin:0 0 14px;
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-size:17px;
  color:var(--bone);
}
.idcard-blurb{margin:0;font-size:14px;color:var(--bone-dim);line-height:1.55}
.idcard:hover .idcard-blurb,
.idcard:focus-visible .idcard-blurb{color:rgba(255,255,255,.82)}

/* pillars, now their own band */
.pillars{
  padding:var(--s6) 0 var(--s8);
  border-top:1px solid var(--edge);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s6);margin-top:0;
}

/* ===========================================================
   THE IDENTITY CYCLE

   The copy above it never moves. The identities take turns, and
   each one lifts its own colour into the room for its turn — the
   proposition demonstrated before anyone has clicked anything.
   =========================================================== */
.cycle{
  position:relative;display:block;
  padding:var(--s4) 0 var(--s5);
  margin-bottom:var(--s5);
  min-height:112px;
}
.cycle::before{
  content:"";position:absolute;
  left:-6%;top:-40%;width:52%;height:190%;
  border-radius:50%;
  background:radial-gradient(circle,var(--cyc,transparent) 0%,transparent 68%);
  opacity:.15;filter:blur(52px);
  z-index:-1;pointer-events:none;
  transition:background 1.1s ease,opacity 1.1s ease;
}
.cycle-name,
.cycle-line{
  display:block;
  transition:opacity .6s ease,filter .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.cycle-name{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(28px,3.4vw,44px);
  font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyc,var(--bone));
}
.cycle-line{
  margin-top:8px;
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-size:clamp(16px,1.7vw,20px);
  color:var(--bone-dim);
}
/* it dissolves rather than slides — same language as the reveal above */
.cycle.leaving .cycle-name,
.cycle.leaving .cycle-line{
  opacity:0;filter:blur(7px);transform:translateY(-5px);
}
.cycle.leaving::before{opacity:.04}
.cycle:hover .cycle-line{color:var(--bone)}

@media (prefers-reduced-motion:reduce){
  .cycle-name,.cycle-line{transition:none}
}

/* ===========================================================
   THE CYCLING IDENTITY PANE
   The copy stays still. The identities do the talking.
   =========================================================== */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:var(--s8);
  align-items:center;
}
.hero-copy{min-width:0}

.cycle{
  position:relative;
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5) var(--s5);
  overflow:hidden;isolation:isolate;
  min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.cycle-body{position:relative;z-index:2}
.cycle-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;z-index:0;
}
.cycle-img.show{opacity:1}
.cycle::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 55%,transparent 85%);
  pointer-events:none;
}
.cycle .glass-pane{
  -webkit-backdrop-filter:blur(3px) saturate(140%);
  backdrop-filter:blur(3px) saturate(140%);
  background:transparent;
}
.cycle-eyebrow{
  margin:0 0 var(--s3);
  font-family:"Space Mono",monospace;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-faint);
}
.cycle-name{
  margin:0 0 10px;
  font-size:clamp(27px,3vw,38px);font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--bone);
}
.cycle-line{
  margin:0 0 var(--s5);
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-size:18px;
  color:rgba(255,255,255,.78);
}
.cycle-enter{
  display:inline-block;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:border-color .3s,color .3s;
}
.cycle-enter:hover{border-color:var(--bone);color:#fff}

/* each identity surfaces the way the philosophy line does */
.cycle.in .cycle-name,
.cycle.in .cycle-line,
.cycle.in .cycle-enter{
  animation:surface 1.15s cubic-bezier(.22,.61,.36,1) backwards;
}
.cycle.in .cycle-line{animation-delay:.10s}
.cycle.in .cycle-enter{animation-delay:.20s}

.cycle-dots{
  position:absolute;z-index:2;
  top:var(--s5);right:var(--s5);
  display:flex;gap:7px;
}
.cycle-dots .dot{
  width:6px;height:6px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.22);
  transition:background .35s,transform .35s;
}
.cycle-dots .dot.on{background:var(--bone);transform:scale(1.35)}

/* the aurora leans toward whichever identity is showing */
body[data-cycle="executive"]  .aurora i:nth-child(1),
body[data-cycle="rebel"]      .aurora i:nth-child(2),
body[data-cycle="effortless"] .aurora i:nth-child(3),
body[data-cycle="maverick"]   .aurora i:nth-child(4){
  opacity:.44;
  transition:opacity 1.6s ease;
}
.aurora i{transition:opacity 1.6s ease}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s6)}
  .cycle{min-height:360px}
}
@media (prefers-reduced-motion:reduce){
  .cycle.in .cycle-name,
  .cycle.in .cycle-line,
  .cycle.in .cycle-enter{animation:none}
}

/* ===========================================================
   SPOT THE JAUNTY
   The customer wall. It moves right to left on its own, slowly,
   and stops the moment someone reaches for it.
   =========================================================== */
.jaunty{padding:var(--s8) 0 var(--s7);border-top:1px solid var(--edge)}
.jaunty h2{
  font-size:clamp(27px,3.6vw,42px);font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;
}
.jaunty-sub{color:var(--bone-dim);margin:0 0 var(--s6);font-size:15px}

.marquee{
  overflow:hidden;width:100%;
  /* the ends fade rather than cut, so nothing pops in */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{
  display:flex;gap:var(--s5);width:max-content;
  animation:drift-left 56s linear infinite reverse;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes drift-left{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}   /* the list is rendered twice */
}

.jcard{display:block;width:230px;flex-shrink:0}
.jcard-portrait{
  position:relative;display:block;
  aspect-ratio:4/5;border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  margin-bottom:var(--s3);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.jcard-portrait img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.jcard:hover .jcard-portrait{transform:translateY(-5px)}
.jcard-portrait .glass-pane{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:transparent;
}
.jcard-name{
  display:block;font-size:16px;font-weight:500;color:var(--bone);
}
.jcard-identity{
  display:block;font-family:"Space Mono",monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-faint);margin-top:3px;
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto}
}
@media (max-width:640px){
  .jcard{width:170px}
}

/* ===========================================================
   THE QUIZ
   A glass card floating on a background that cannot make up its
   mind which identity it is — because neither can the shopper,
   yet. It settles the moment they finish.
   =========================================================== */
.quiz-page .aurora i{opacity:.26}

/* Each pool takes its turn forward, so the tint behind the card
   cycles through all four identities while the questions run. */
.aurora.shifting i:nth-child(1){animation:drift-a 46s ease-in-out infinite alternate, pulse 12s ease-in-out infinite}
.aurora.shifting i:nth-child(2){animation:drift-b 38s ease-in-out infinite alternate, pulse 12s ease-in-out 3s infinite}
.aurora.shifting i:nth-child(3){animation:drift-c 54s ease-in-out infinite alternate, pulse 12s ease-in-out 6s infinite}
.aurora.shifting i:nth-child(4){animation:drift-d 43s ease-in-out infinite alternate, pulse 12s ease-in-out 9s infinite}
@keyframes pulse{
  0%,100%{opacity:.12}
  22%    {opacity:.62}
  44%    {opacity:.12}
}

.quiz-card{
  position:relative;
  border-radius:var(--r-lg);
  padding:var(--s7) var(--s6);
  overflow:hidden;isolation:isolate;
  --card:var(--accent);
}
.quiz-card .glass-tint{opacity:.22}
.quiz-body{position:relative;z-index:2;transition:none}

/* the blink between questions */
.quiz-body.out{
  opacity:0;transform:translateY(-6px) scale(.995);filter:blur(3px);
  transition:opacity .22s ease,transform .22s ease,filter .22s ease;
}
.quiz-body.in{
  animation:blink-in .46s cubic-bezier(.22,.61,.36,1);
}
@keyframes blink-in{
  0%  {opacity:0;transform:translateY(8px) scale(.99);filter:blur(4px)}
  100%{opacity:1;transform:translateY(0)   scale(1);  filter:blur(0)}
}
@media (prefers-reduced-motion:reduce){
  .quiz-body.out,.quiz-body.in{animation:none;transition:none;opacity:1;filter:none;transform:none}
  .aurora.shifting i{animation:none;opacity:.3}
}
@media (max-width:640px){
  .quiz-card{padding:var(--s6) var(--s5)}
}

/* ===========================================================
   FAQ — glass panels that open
   =========================================================== */
.faq{padding:var(--s8) var(--s5) var(--s7)}
.faq h2{
  font-size:clamp(27px,3.6vw,42px);font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--s6);
}
.faq-list{display:grid;gap:var(--s3);max-width:860px}
.faq-item{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  --card:var(--accent);
}
.faq-item .glass-tint{opacity:.16;animation:none}
.faq-item[open] .glass-tint{opacity:.34}
.faq-item summary{
  position:relative;z-index:2;
  list-style:none;cursor:pointer;
  padding:var(--s4) var(--s5);
  font-family:"Fraunces",Georgia,serif;
  font-size:19px;font-weight:400;color:var(--bone);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:"Space Mono",monospace;font-size:19px;
  color:var(--bone-faint);flex-shrink:0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),color .3s;
}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq-item summary:hover{color:#fff}
.faq-a{
  position:relative;z-index:2;
  padding:0 var(--s5) var(--s5);
  color:var(--bone-dim);font-size:15px;line-height:1.65;max-width:66ch;
}
.faq-a p{margin:0}
.faq-item[open] .faq-a{animation:surface .55s cubic-bezier(.22,.61,.36,1)}
@media (max-width:640px){
  .faq-item summary{font-size:17px;padding:var(--s4)}
  .faq-a{padding:0 var(--s4) var(--s4)}
}
/* ---------- new to the spot: the wipe reveal ---------- */
.new-spot{padding:var(--s7) 0 var(--s8)}
.new-spot-kicker{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(27px,3.6vw,42px);
  font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  color:var(--bone-soft);
  margin:0 0 var(--s6);
}
.new-strip{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
@media (max-width:760px){
  .new-strip{
    margin-left:calc(-1 * var(--s5));
    margin-right:calc(-1 * var(--s5));
    mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
  }
}
.new-track{display:flex;gap:14px;width:max-content;animation:newScroll 40s linear infinite}
.new-strip:hover .new-track{animation-play-state:paused}
.new-track .card{flex:0 0 200px}
.new-track .thumb{border-radius:0}
@keyframes newScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .new-track{animation:none}
}
.love-btn{
  position:absolute;top:10px;right:10px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(11,12,16,.55);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;padding:0;
}
.love-btn svg{width:16px;height:16px}
.love-btn.loved svg{fill:var(--accent);stroke:var(--accent)}

.new-spot-cta-wrap{text-align:center;margin-top:var(--s6)}
.new-spot-cta-wrap .btn.ghost{border:none;background:none}
.new-spot-cta-wrap .btn.ghost:hover{background:none;box-shadow:none}

.shop-by-cat{padding:var(--s7) 0}
.shop-by-cat h2{
  font-size:clamp(27px,3.6vw,42px);
  font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:var(--s6);color:var(--bone-soft);
}
.cat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
@media (min-width:760px){
  .cat-grid{grid-template-columns:repeat(4,1fr)}
}
.cat-card{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border:1px solid var(--edge);display:flex;align-items:flex-end;
  background:
    repeating-linear-gradient(58deg,rgba(255,255,255,.045) 0 1px,transparent 1px 6px),
    linear-gradient(155deg,var(--accent-wash),rgba(255,255,255,.02));
}
.cat-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.cat-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 60%);
}
.cat-label{
  position:relative;z-index:2;padding:16px;
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone);
}