/* ===========================================================
   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-text, var(--bone));
  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;
  margin-left:-.07em; /* italic W leans in; pull it back so the left edge lines up with the text and buttons below */
  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%}
  .hero .cta .btn.ghost{order:-1}
}

.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, var(--bone));
  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-text, var(--bone))}

/* ---------- 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-text, var(--bone));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-text, var(--bone))}
#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-text, var(--bone))}
#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-text, var(--bone))}

.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-text, var(--bone));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-text, var(--bone));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-text, var(--bone))}
.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}
@media (hover:hover){.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);border-radius:var(--r-lg);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);
}
/* ---------- the jaunty says ---------- */
.jsays-page{position:relative;overflow-x:hidden;overflow-x:clip;min-height:100vh}
.jsays-j-bg{
  position:absolute;top:8%;right:-9%;
  width:clamp(280px,34vw,560px);height:auto;
  opacity:.1;pointer-events:none;z-index:0;
  filter:drop-shadow(0 0 50px var(--accent-glow));
}
.jsays-wrap{position:relative;z-index:1;padding-top:var(--s7);padding-bottom:var(--s8)}
.jsays-loading{text-align:center;color:var(--bone-faint);font-size:14px}
.jsays-heading{
  font-family:"Space Mono",monospace;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-faint);margin:0 0 var(--s7);text-align:center;
}
.jsays-feed{
  display:flex;flex-direction:column;gap:22px;
  max-width:640px;margin:0 auto;
}
.jsays-card{
  position:relative;display:block;
  border-radius:28px;padding:30px 32px;
  overflow:hidden;isolation:isolate;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.jsays-card:hover{transform:translateY(-4px)}
.jsays-body{position:relative;z-index:2}
.jsays-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.jsays-kicker{
  font-family:"Space Mono",monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);
}
.jsays-time{font-size:12px;color:var(--bone-faint)}
.jsays-sender{
  font-size:14px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bone);margin-bottom:12px;
}
.jsays-excerpt{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(19px,2.4vw,24px);
  line-height:1.45;color:var(--bone);margin:0;
}
@media (max-width:640px){
  .jsays-j-bg{right:-18%;opacity:.08}
  .jsays-card{padding:24px 22px;border-radius:22px}
}
/* ---------- the jaunty says: single post ---------- */
.jsays-card,.jsays-post,.jsays-comment{--card:var(--accent)}
.jsays-narrow{max-width:680px;margin:0 auto}
.jsays-back{
  display:inline-block;margin-bottom:22px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);transition:color .2s;
}
.jsays-back:hover{color:var(--bone)}

.jsays-post{
  position:relative;border-radius:28px;
  overflow:hidden;isolation:isolate;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.jsays-post-body{position:relative;z-index:2;padding:34px 36px}
.jsays-cover{
  display:block;width:100%;max-height:380px;object-fit:cover;
  border-radius:16px;margin:6px 0 20px;
}
.jsays-title{
  font-size:clamp(26px,4vw,38px);font-weight:500;
  line-height:1.15;margin:6px 0 18px;
}
.jsays-text p{
  font-size:16.5px;line-height:1.75;color:var(--bone);
  margin:0 0 1.1em;overflow-wrap:anywhere;
}

.jsays-actions{
  position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--edge);
}
.jsays-like,.jsays-share{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--edge);background:var(--glass);
  color:var(--bone-dim);font-size:13px;cursor:pointer;
  transition:border-color .25s,color .25s;
}
.jsays-share:hover{border-color:var(--edge-lift);color:var(--bone)}
.jsays-like.liked{border-color:var(--accent);color:var(--bone)}

.heart{width:22px;height:22px;overflow:visible}
.heart-line{
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;
  transition:stroke .25s;
}
.heart-fill{
  fill:transparent;opacity:0;
  transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .25s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.jsays-like.liked .heart-fill{fill:var(--accent);opacity:1;transform:scale(1)}
.jsays-like.liked .heart-line{stroke:transparent}
body.identity-cycling .jsays-like.liked .heart-fill{fill:url(#heartMix)}
.jsays-like.liked .heart{animation:heartPop .45s cubic-bezier(.22,.61,.36,1)}
@keyframes heartPop{
  0%{transform:scale(.7)}
  55%{transform:scale(1.28)}
  100%{transform:scale(1)}
}

.jsays-share-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:5;
  display:flex;flex-direction:column;min-width:170px;padding:6px;
  background:rgba(20,21,27,.96);border:1px solid var(--edge);
  border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.jsays-share-menu a,.jsays-share-menu button{
  display:block;width:100%;text-align:left;
  padding:10px 14px;border-radius:9px;
  font-size:14px;color:var(--bone-dim);cursor:pointer;
  background:none;border:none;transition:background .16s,color .16s;
}
.jsays-share-menu a:hover,.jsays-share-menu button:hover{
  background:var(--glass-lift);color:var(--bone);
}

.jsays-comments{margin-top:44px}
.jsays-comments h2{
  font-size:clamp(20px,2.6vw,26px);font-weight:400;margin:0 0 18px;
}
.jsays-form{display:grid;gap:12px;margin-bottom:28px}
.jsays-form input,.jsays-form textarea{
  width:100%;font:inherit;font-size:15px;color:var(--bone);
  padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--edge);
}
.jsays-form textarea{min-height:96px;resize:vertical}
.jsays-form input::placeholder,.jsays-form textarea::placeholder{color:var(--bone-faint)}
.jsays-form input:focus,.jsays-form textarea:focus{outline:none;border-color:var(--accent)}
.jsays-form .btn{justify-self:start}
.jsays-form-msg{font-size:13px;color:#e08a7a}
.jsays-form-msg:empty{display:none}

.jsays-comment{
  position:relative;border-radius:18px;
  overflow:hidden;isolation:isolate;margin-bottom:12px;
}
.jsays-comment-body{position:relative;z-index:2;padding:16px 20px}
.jsays-comment-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.jsays-comment-top strong{font-size:14px;font-weight:600}
.jsays-comment p{
  margin:6px 0 0;font-size:15px;line-height:1.55;
  color:var(--bone);overflow-wrap:anywhere;
}
@media (max-width:640px){
  .jsays-post{border-radius:22px}
  .jsays-post-body{padding:24px 22px}
}
/* pillars: icons and finer subheadings */
.pillar-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--edge);background:var(--glass);
  color:var(--bone-dim);margin-bottom:14px;
}
.pillars .pillar b{
  display:block;margin-bottom:6px;
  font-family:"Fraunces",Georgia,serif;
  font-size:19px;font-weight:400;letter-spacing:.01em;
  color:var(--bone);
}
.love-btn.loved{border-color:var(--accent)}
.love-btn.loved svg{animation:lovePop .4s cubic-bezier(.22,.61,.36,1)}
@keyframes lovePop{0%{transform:scale(.7)}55%{transform:scale(1.3)}100%{transform:scale(1)}}

/* admin pickers */
.size-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.size-chip{min-width:38px;padding:6px 10px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);color:var(--bone-dim);font-size:13px;cursor:pointer}
.size-chip.on{border-color:var(--accent);color:var(--accent-text, var(--bone));background:var(--glass-lift)}
.img-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.img-slot{position:relative;aspect-ratio:4/5;border:1px dashed var(--edge);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--glass)}
.img-slot.filled{border-style:solid}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-slot-n{position:absolute;top:6px;left:6px;z-index:2;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(11,12,16,.75);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.img-slot-empty{color:var(--bone-faint);font-size:12px}
.img-slot-tools{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;padding:6px;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.img-slot-tools button{width:28px;height:28px;border-radius:50%;border:1px solid var(--edge);background:rgba(11,12,16,.7);color:#fff;cursor:pointer}
.img-slot-tools button:disabled{opacity:.3;cursor:default}

/* ===== sign in ===== */
.auth-card{max-width:440px;margin:clamp(24px,6vw,64px) auto;padding:34px 30px 28px;border-radius:26px;border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 24px 60px rgba(0,0,0,.45);text-align:center}
.auth-mark{width:76px;height:76px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 32%,transparent);border:1px solid var(--edge);font-family:"Fraunces",Georgia,serif;font-size:38px;font-style:italic;color:var(--bone)}
.auth-card h1{font-size:clamp(26px,5vw,32px);font-weight:500;margin:0 0 8px}
.auth-sub{color:var(--bone-dim);font-size:15px;margin:0 0 24px}
.auth-field{display:block;text-align:left;margin-bottom:12px}
.auth-field span{display:block;font-size:12.5px;color:var(--bone-dim);margin:0 0 6px 2px}
.auth-field input{width:100%;font:inherit;font-size:16px;color:var(--bone);padding:15px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--edge)}
.auth-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.auth-msg{min-height:1.4em;margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--bone-dim);text-align:left}
.auth-msg.bad{color:#e08a7a}
.auth-or{display:flex;align-items:center;gap:14px;margin:26px 0 18px;color:var(--bone-faint);font-size:13px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--edge)}
.auth-social{display:flex;justify-content:center;gap:16px}
.auth-google{width:56px;height:56px;border-radius:50%;border:1px solid var(--edge);background:var(--glass-lift);display:grid;place-items:center;cursor:pointer;transition:transform .25s,border-color .25s}
.auth-google:hover{transform:translateY(-2px);border-color:var(--edge-lift)}
.auth-google svg{width:26px;height:26px}
.auth-legal{margin:24px 0 0;font-size:12.5px;line-height:1.55;color:var(--bone-faint)}
.auth-back{display:inline-block;margin-top:18px;font-size:13px;color:var(--bone-dim)}

/* ===== account hub ===== */
.acct-welcome{padding:22px 22px 20px;border-radius:20px;margin:0 0 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#0A0807),color-mix(in srgb,var(--accent) 22%,#0A0807));border:1px solid var(--edge)}
.acct-welcome h2{font-size:clamp(22px,4vw,28px);font-weight:500;margin:0 0 4px}
.acct-welcome p{margin:0;font-size:14px;color:var(--bone-dim);overflow-wrap:anywhere}
.acct-label{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);margin:26px 4px 8px}
.acct-list{border:1px solid var(--edge);border-radius:18px;background:var(--glass);overflow:hidden}
.acct-row{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:none;border-bottom:1px solid var(--edge);background:none;color:var(--bone);font:inherit;font-size:15px;text-align:left;text-decoration:none;cursor:pointer;transition:background .2s}
.acct-row:last-child{border-bottom:none}
.acct-row:hover{background:var(--glass-lift)}
.acct-row svg{width:20px;height:20px;flex-shrink:0;color:var(--bone-dim)}
.acct-row svg.chev{margin-left:auto;width:18px;height:18px;color:var(--bone-faint)}
.acct-count{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff}
.acct-count + svg.chev{margin-left:8px}
.acct-logout{display:block;width:100%;margin:28px 0 8px;padding:16px;border:none;background:none;color:var(--accent-text,var(--bone));font:inherit;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

/* ===== account: hero, photo, recently viewed ===== */
.acct-hero{display:flex;align-items:center;gap:18px;padding:22px;border-radius:22px;margin:0 0 6px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#0A0807),color-mix(in srgb,var(--accent) 22%,#0A0807));border:1px solid var(--edge)}
.acct-avatar-wrap{position:relative;flex-shrink:0}
.acct-avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.28);font-family:"Fraunces",Georgia,serif;font-size:40px;color:var(--bone)}
.acct-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.acct-cam{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;border:2px solid #0A0807;background:var(--bone);color:#0A0807;display:grid;place-items:center;cursor:pointer}
.acct-cam svg{width:17px;height:17px}
.acct-hero-text{min-width:0}
.acct-hero-text h2{font-size:clamp(22px,4vw,30px);font-weight:500;margin:0 0 4px}
.acct-hero-text p{margin:0 0 10px;font-size:14px;color:var(--bone-dim);overflow-wrap:anywhere}
.acct-pills{display:flex;flex-wrap:wrap;gap:8px}
.acct-pill{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:var(--bone)}
.acct-msg{min-height:1.3em;margin:8px 4px 0;font-size:13px;color:var(--bone-dim)}
.acct-msg.bad{color:#e08a7a}
.acct-link-btn{background:none;border:none;color:var(--accent-text,var(--bone));font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;margin:4px 4px 0}
.recent-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.recent-row::-webkit-scrollbar{display:none}
.recent-card{flex:0 0 118px;display:block}
.recent-img{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--glass);border:1px solid var(--edge)}
.recent-img img{width:100%;height:100%;object-fit:cover;display:block}
.recent-img em{position:absolute;left:6px;top:6px;font-style:normal;font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff}
.recent-name{margin-top:8px;font-size:13px;line-height:1.35;color:var(--bone);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-price{display:block;font-size:12.5px;color:var(--bone-dim);margin-top:2px}
@media (max-width:560px){
  .acct-hero{gap:14px;padding:18px}
  .acct-avatar{width:76px;height:76px;font-size:32px}
}

/* ===== admin: checkouts ===== */
.co-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 16px;max-width:760px}
.co-filters{display:flex;flex-wrap:wrap;gap:6px}
.co-filter{padding:7px 14px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);color:var(--bone-dim);font:inherit;font-size:13px;cursor:pointer}
.co-filter.on{border-color:var(--accent);color:var(--bone);background:var(--glass-lift)}
.co-card{max-width:760px;margin:0 0 14px;padding:18px 20px;border-radius:20px;border:1px solid var(--edge);background:var(--glass)}
.co-card.status-new{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 28px var(--accent-wash)}
.co-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.co-name{font-size:17px;font-weight:600}
.co-meta{font-size:12.5px;color:var(--bone-faint);margin-top:2px}
.co-tag{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--edge);color:var(--bone-dim);vertical-align:middle;margin-left:6px}
.co-status{padding:8px 12px;border-radius:10px;font-size:13px}
.co-contact{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0;font-size:13.5px;color:var(--bone-dim)}
.co-items{border-top:1px solid var(--edge);padding-top:10px}
.co-item{display:flex;align-items:center;gap:12px;padding:8px 0}
.co-item img,.co-ph{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--glass);flex-shrink:0}
.co-item-meta{flex:1;min-width:0;font-size:14px}
.co-price{font-size:13.5px;font-weight:600;flex-shrink:0}
.co-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--edge)}
.co-actions{display:flex;gap:8px;flex-wrap:wrap}
.co-actions .btn{padding:9px 16px;font-size:11.5px}
.co-badge{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff}
.co-toast{position:fixed;top:18px;right:18px;z-index:200;max-width:340px;padding:14px 18px;border-radius:14px;border:1px solid var(--edge-lift);background:rgba(14,15,20,.97);color:var(--bone);font:inherit;font-size:14px;text-align:left;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .3s,transform .3s}
.co-toast.show{opacity:1;transform:none;pointer-events:auto}

/* ---------- the jaunty says: image beside the snippet ---------- */
.jsays-row{display:flex;align-items:flex-start;gap:18px}
.jsays-row .jsays-excerpt{flex:1 1 auto;min-width:0}
.jsays-thumb{
  flex:0 0 auto;width:132px;height:132px;
  object-fit:cover;border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
@media (max-width:640px){
  .jsays-row{flex-direction:column-reverse;gap:14px}
  .jsays-thumb{width:100%;height:190px}
}

/* ===== Site light theme (toggle in header; dark is default) ===== */
html[data-theme="light"]{
  color-scheme:light;
  --void:#F6F1E7; --ink:#EFE8DA;
  --bone:#241D17; --bone-soft:#3A3027;
  --bone-dim:rgba(36,29,23,.68); --bone-faint:rgba(36,29,23,.46);
  --nude:#8A6F52;
  --glass:rgba(255,255,255,.62); --glass-lift:rgba(255,255,255,.88);
  --edge:rgba(36,29,23,.12); --edge-lift:rgba(36,29,23,.24);
}
html[data-theme="light"] body{background:var(--void);color:var(--bone)}
html[data-theme="light"] body::before,html[data-theme="light"] body::after{opacity:.35}
html[data-theme="light"] .topbar{background:rgba(246,241,231,.82)}
html[data-theme="light"] .nav-links{background:rgba(246,241,231,.97)}
html[data-theme="light"] .search-modal,html[data-theme="light"] .qv-modal,html[data-theme="light"] .cookie-sheet,html[data-theme="light"] .sf-modal,html[data-theme="light"] .filter-drawer,html[data-theme="light"] .co-toast,html[data-theme="light"] .hdr-drawer,html[data-theme="light"] .jsays-share-menu{background:rgba(250,246,238,.98)}
html[data-theme="light"] .pop,html[data-theme="light"] .toast,html[data-theme="light"] .help-link,html[data-theme="light"] .glass-pane{background:rgba(250,246,238,.92)}
html[data-theme="light"] .hdr-search,html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .jsays-form input,html[data-theme="light"] .jsays-form textarea,html[data-theme="light"] .auth-field input,html[data-theme="light"] .search-modal-box{background:rgba(255,255,255,.7)}
html[data-theme="light"] .hdr-search em{color:var(--bone)}
html[data-theme="light"] .search-backdrop,html[data-theme="light"] .qv-backdrop,html[data-theme="light"] .hdr-backdrop,html[data-theme="light"] .sf-backdrop,html[data-theme="light"] .filter-backdrop,html[data-theme="light"] .sel-scrim{background:rgba(36,29,23,.38)}
html[data-theme="light"] .hamburger span{background:var(--bone)}
html[data-theme="light"] .thumb,html[data-theme="light"] .cat-card,html[data-theme="light"] .sel-thumb{background-color:#E6DDCB}
html[data-theme="light"] .faq-item summary:hover{color:var(--bone)}
html[data-theme="light"] .jsays-form-msg,html[data-theme="light"] .auth-msg.bad,html[data-theme="light"] .acct-msg.bad{color:#B03A2A}
/* Keep dark pills over photos; they sit on imagery */
html[data-theme="light"] .love-btn,html[data-theme="light"] .quickview-btn,html[data-theme="light"] .thumb .tag{color:#fff}
/* Theme toggle button */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.theme-toggle .ico-moon{display:none}
html[data-theme="light"] .theme-toggle .ico-sun{display:none}
html[data-theme="light"] .theme-toggle .ico-moon{display:block}

/* ===== Light theme fixes (photo cards, aurora, search button) ===== */
html[data-theme="light"] .aurora{display:none}
html[data-theme="light"] .hdr-search em{color:var(--void)}
html[data-theme="light"] :is(.jcard-portrait,.cycle,.cat-card,.thumb,.cycle-card) .glass-pane{background:transparent}
html[data-theme="light"] :is(.cycle,.cat-card){--bone:#F3ECDD;--bone-soft:#E4DCCC;--bone-dim:rgba(243,236,221,.8);--bone-faint:rgba(243,236,221,.62);--edge:rgba(255,255,255,.2);--edge-lift:rgba(255,255,255,.34)}
html[data-theme="light"] .detail .img-arrow{background:rgba(11,12,16,.55);color:#fff}

/* ===== Light theme ivory ===== */
html[data-theme="light"]{--void:#FFFFF0;--ink:#F7F6E8}
html[data-theme="light"] .topbar{background:rgba(255,255,240,.86)}
html[data-theme="light"] .nav-links{background:rgba(255,255,240,.97)}
html[data-theme="light"] .search-modal,html[data-theme="light"] .qv-modal,html[data-theme="light"] .cookie-sheet,html[data-theme="light"] .sf-modal,html[data-theme="light"] .filter-drawer,html[data-theme="light"] .co-toast,html[data-theme="light"] .hdr-drawer,html[data-theme="light"] .jsays-share-menu{background:rgba(255,255,244,.98)}
html[data-theme="light"] .pop,html[data-theme="light"] .toast,html[data-theme="light"] .help-link,html[data-theme="light"] .glass-pane{background:rgba(255,255,244,.92)}
html[data-theme="light"] :is(.jcard-portrait,.cycle,.cat-card,.thumb,.cycle-card) .glass-pane{background:transparent}
html[data-theme="light"] .thumb,html[data-theme="light"] .cat-card,html[data-theme="light"] .sel-thumb{background-color:#EEEBD6}

/* ===== Light theme account hero ===== */
html[data-theme="light"] :is(.acct-hero,.acct-welcome){--bone:#F3ECDD;--bone-soft:#E4DCCC;--bone-dim:rgba(243,236,221,.8);--bone-faint:rgba(243,236,221,.62);--edge:rgba(255,255,255,.2);--edge-lift:rgba(255,255,255,.34);color:#F3ECDD}
html[data-theme="light"] .acct-cam{color:var(--void)}

/* ===== account activity and requests ===== */
.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0}
.acct-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border:1px solid var(--edge);border-radius:16px;background:var(--glass);text-align:center}
.acct-stat b{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:500;color:var(--bone);line-height:1.1}
.acct-stat span{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}
.acct-stat:hover{background:var(--glass-lift);border-color:var(--edge-lift)}
.req-list{display:flex;flex-direction:column;gap:12px}
.req-card{border:1px solid var(--edge);border-radius:18px;background:var(--glass);padding:14px 16px}
.req-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.req-date{font-size:13px;color:var(--bone-dim)}
.req-status{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--edge-lift);color:var(--bone)}
.req-status.req-new{border-color:var(--accent);color:var(--accent-text,var(--bone))}
.req-status.req-delivered,.req-status.req-paid{border-color:#6E7A5A;color:#6E7A5A}
.req-status.req-cancelled{opacity:.6}
.req-thumbs{display:flex;gap:8px;align-items:center}
.req-thumb{display:block;width:56px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--glass);border:1px solid var(--edge);flex-shrink:0}
.req-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.req-more{font-size:13px;color:var(--bone-dim);margin-left:4px}
.req-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--edge);font-size:13.5px;color:var(--bone-dim)}
.req-foot b{font-weight:600;color:var(--bone)}

/* ===== Light theme logo ===== */
html[data-theme="light"] .mark-base{filter:brightness(0)}
html[data-theme="light"] .brand .mark{filter:drop-shadow(0 0 10px var(--accent-glow))}
html[data-theme="light"] .foot-mark{opacity:1;filter:drop-shadow(0 0 14px var(--accent-wash))}

/* ===== Philosophy whisper: calligraphic dividers, one line on desktop ===== */
.whisper{padding:var(--s7) 0;display:flex;flex-direction:column;align-items:center;gap:var(--s5)}
.whisper .flourish{display:block;width:clamp(190px,24vw,300px);height:auto;color:var(--accent);opacity:0;transition:color .9s}
.whisper .flourish-bottom{transform:scaleY(-1)}
.whisper.in .flourish{animation:whisperFlourish 1.8s cubic-bezier(.22,.61,.36,1) .15s forwards}
.whisper.in .flourish-bottom{animation-name:whisperFlourishB;animation-delay:.55s}
@keyframes whisperFlourish{from{opacity:0;transform:scaleX(.6)}to{opacity:.85;transform:scaleX(1)}}
@keyframes whisperFlourishB{from{opacity:0;transform:scaleY(-1) scaleX(.6)}to{opacity:.85;transform:scaleY(-1) scaleX(1)}}
.whisper p{
  font-size:clamp(20px,2.05vw,30px);
  line-height:1.5;letter-spacing:.015em;
  color:var(--bone-dim);
  padding:0 var(--s4);
}
.whisper p em{font-style:italic;color:var(--accent);text-shadow:0 0 28px var(--accent-glow)}
@media (min-width:861px){
  .whisper p{white-space:nowrap}
  .whisper-br{display:none}
}
@media (max-width:860px){
  .whisper{padding:var(--s6) 0;gap:var(--s4)}
  .whisper p{font-size:clamp(12px,3.9vw,26px);white-space:nowrap;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .whisper .flourish{opacity:.85;animation:none!important}
}

/* ===== Even vertical rhythm between homepage sections ===== */
main{--sec-y:clamp(36px,4.5vw,64px)}
main>section.whisper,main>section.new-spot,main>section.shop-by-cat,main>section.worlds,main>section.pillars,main>section.jaunty,main>section.faq{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
main>section.hero{padding-bottom:calc(var(--sec-y) - 24px)}

/* ===== Shop by category: one sub-section per category ===== */
.cat-sections{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.cat-sub-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--edge)}
.cat-sub-head h3{font-size:clamp(20px,2.4vw,30px);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--bone)}
.cat-sub-head p{margin-top:4px;font-size:14px;color:var(--bone-dim)}
.cat-sub-all{white-space:nowrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s}
.cat-sub-all:hover{border-bottom-color:var(--accent)}
.cat-sub-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none}
.cat-sub-row::-webkit-scrollbar{display:none}
.cat-sub-row .card{flex:0 0 clamp(150px,44vw,210px);scroll-snap-align:start}
@media (min-width:900px){
  .cat-sub-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}
  .cat-sub-row .card{flex:none}
}
.cat-sub-empty{flex:1 1 100%;grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:36px 16px;border:1px dashed var(--edge-lift);border-radius:var(--r-lg);background:var(--glass)}
.cat-sub-empty span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cat-sub-empty p{font-size:14px;color:var(--bone-dim)}

.cat-sub-row .card-soon{flex:0 0 clamp(150px,44vw,210px);scroll-snap-align:start}
@media (min-width:900px){.cat-sub-row .card-soon{flex:none}}
.soon-thumb{aspect-ratio:4/5;border-radius:var(--r);border:1px dashed var(--edge-lift);background:var(--glass);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px}
.soon-thumb span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint)}
.soon-thumb em{font-style:italic;font-size:15px;color:var(--accent)}

/* ===== The Jaunty Says on the homepage ===== */
.says-home .says-head{text-align:center;margin-bottom:var(--s7)}
.says-home .says-kicker{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:var(--s3)}
.says-home h2{font-size:clamp(27px,3.6vw,42px);font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--bone-soft)}
.says-home .says-sub{margin-top:var(--s3);font-size:15px;color:var(--bone-dim)}
.says-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.says-card{display:flex;flex-direction:column;padding:26px 26px 24px}
.says-card .jsays-body{display:flex;flex-direction:column;flex:1}
.says-title{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(17px,1.6vw,21px);line-height:1.3;text-transform:none;letter-spacing:0;color:var(--bone);margin:6px 0 10px}
.says-teaser{font-size:14px;line-height:1.6;color:var(--bone-dim);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.says-read{margin-top:auto;padding-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.says-cta{text-align:center;margin-top:var(--s6)}
@media (max-width:900px){
  .says-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:14px;padding-bottom:8px;scrollbar-width:none}
  .says-grid::-webkit-scrollbar{display:none}
  .says-card{flex:0 0 min(84vw,340px);scroll-snap-align:start}
}
main>section.says-home{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}

/* ===== About snippet on the homepage ===== */
.about-home{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,64px);align-items:center}
.about-home.has-photos{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.about-home .ah-kicker{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint);margin:0 0 var(--s4)}
.about-home h2{font-family:"Fraunces",Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(28px,3.8vw,48px);line-height:1.1;color:var(--bone);margin:0 0 var(--s4);text-transform:none;letter-spacing:0}
.about-home .ah-text>p{font-size:16px;line-height:1.75;color:var(--bone-dim);margin:0 0 var(--s5);max-width:560px}
.ah-facts{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:560px}
.ah-facts li{padding:14px 0;border-top:1px solid var(--edge)}
.ah-facts b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:17px;color:var(--bone);margin-bottom:4px}
.ah-facts span{font-size:13px;line-height:1.5;color:var(--bone-dim)}
.ah-photos{position:relative;height:clamp(280px,32vw,420px)}
.ah-photos[hidden]{display:none}
.ah-shot{position:absolute;width:56%;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--edge-lift);box-shadow:0 24px 50px rgba(0,0,0,.35);background:var(--glass)}
.ah-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ah-shot:nth-child(1){left:0;top:0;transform:rotate(-3deg)}
.ah-shot:nth-child(2){right:0;bottom:0;transform:rotate(3deg);z-index:2}
@media (max-width:900px){
  .about-home.has-photos{grid-template-columns:1fr}
  .ah-photos{max-width:420px;width:100%;margin:0 auto;height:clamp(260px,70vw,380px)}
}
@media (max-width:560px){.ah-facts{grid-template-columns:1fr}}
main>section.about-home{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}

/* ===== Identity flip cards (homepage) ===== */
.idcards{gap:var(--s5)}
.idcard{padding:0;overflow:visible;isolation:auto;perspective:1300px;aspect-ratio:4/5;min-height:340px}
.idc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.65,.05,.25,1)}
.idcard.flipped .idc-inner{transform:rotateY(-180deg)}
.idc-face{
  position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid var(--edge);
}
.idc-front{background:color-mix(in srgb,var(--card) 22%,#14110f);color:#F4EFE6}
.idc-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0}
.idc-wash{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(10,8,7,.88) 0%,rgba(10,8,7,.4) 38%,transparent 66%),
    linear-gradient(155deg,color-mix(in srgb,var(--card) 42%,transparent),transparent 58%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 40px rgba(255,255,255,.04);
}
.idc-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--s5)}
.idc-cap h3,.idc-back h3{font-size:23px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.idc-cap .idcard-line{margin:0;color:rgba(244,239,230,.88);font-size:17px}
.idc-back{
  transform:rotateY(180deg);display:flex;align-items:center;
  background:color-mix(in srgb,var(--card) 12%,#14110f);
}
.idc-back .glass-tint{opacity:.6;animation:pool 19s ease-in-out infinite alternate}
.idc-back .idcard-body{padding:var(--s6) var(--s5);width:100%}
.idc-back .idcard-blurb{font-size:15.5px;line-height:1.6;color:var(--bone)}
.idc-go{display:inline-block;margin-top:18px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
html[data-theme="light"] .idc-back{background:color-mix(in srgb,var(--card) 14%,#FFFFF0)}
@media (prefers-reduced-motion:reduce){.idc-inner{transition:none}}

/* ===== Category rows: let the next card peek on mobile ===== */
@media (max-width:899px){
  .cat-sub-row{margin:0 calc(-1 * var(--s5));padding:0 var(--s5) 6px calc(var(--s5) - 12px);scroll-padding-left:calc(var(--s5) - 12px)}
  .cat-sub-row .card,.cat-sub-row .card-soon{flex-basis:clamp(128px,38vw,200px)}
}

/* ===== The Jaunty Says: big cropped J + faint scattered icons ===== */
.jsays-j-bg{width:clamp(560px,78vw,1180px);right:-27%;top:-4%;opacity:.1}
.jsays-icons{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:var(--bone)}
.jsays-icons svg{position:absolute;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.075}
@media (max-width:640px){
  .jsays-j-bg{width:150vw;right:-72%;top:2%;opacity:.09}
  .jsays-icons svg{opacity:.065}
}

/* ===== Rail heading: identity piece blended into the glass ===== */
.identity-head{position:relative;overflow:hidden}
.identity-head .wrap{position:relative;z-index:2}
.ih-hero{
  position:absolute;z-index:1;right:max(2%,calc((100% - var(--maxw)) / 2 + 24px));top:50%;
  height:min(118%,420px);width:auto;max-width:46%;transform:translateY(-50%);
  object-fit:contain;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.55) 66%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.55) 66%,transparent 100%);
  mix-blend-mode:lighten;opacity:.95;
}
html[data-theme="light"] .ih-hero{mix-blend-mode:multiply}
@media (max-width:760px){.ih-hero{height:230px;max-width:60%;right:-6%;top:34%;opacity:.55}}

/* ===== Jaunty Says: full-page backdrop + intro ===== */
.jsays-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.jsays-bg .jsays-icons{position:absolute;inset:0;color:var(--bone)}
.jsays-bg .jsays-icons svg{position:absolute;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.07}
.jsays-bg .jsays-j-bg{position:absolute;top:0;left:auto;max-width:none;opacity:.035;filter:none;will-change:transform}
.jsays-intro{max-width:640px;margin:0 auto var(--s7);text-align:center}
.jsays-intro h1{font-size:clamp(38px,6vw,64px);font-weight:400;font-style:italic;margin:0 0 14px;color:var(--accent-text,var(--bone))}
.jsays-lede{margin:0 auto 26px;max-width:52ch;color:var(--bone-dim);font-size:15.5px;line-height:1.6}
.jsays-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left}
.jsays-how li{border:1px solid var(--edge);border-radius:16px;padding:14px 16px;display:grid;gap:4px;background:rgba(255,255,255,.02)}
.jsays-how b{font-family:"Space Mono",monospace;font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.jsays-how span{font-size:13.5px;color:var(--bone-dim);line-height:1.5}
@media (max-width:520px){.jsays-how{grid-template-columns:1fr}}

/* ===== Jaunty Says: one-line how-to, airy snippets, J as full-height backdrop ===== */
.jsays-intro{max-width:760px}
.jsays-how{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px}
.jsays-how li{padding:12px 10px;text-align:center}
.jsays-how span{font-size:12.5px}
@media (max-width:520px){
  .jsays-how{gap:6px}
  .jsays-how li{padding:10px 4px}
  .jsays-how b{font-size:9.5px;letter-spacing:.12em}
  .jsays-how span{font-size:11px}
}
.jsays-bg .jsays-j-bg{right:auto;max-width:none;opacity:.035}
.jsays-excerpt{font-family:inherit;font-size:inherit;line-height:inherit}
.jsays-excerpt .jsays-ex-title{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(20px,2.4vw,25px);line-height:1.3;letter-spacing:0;text-transform:none;color:var(--bone);margin:0 0 16px}
.jsays-excerpt p{font-size:15.5px;line-height:1.7;color:var(--bone-dim);margin:0 0 12px}
.jsays-excerpt .jsays-ex-read{display:block;margin-top:18px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.says-title{margin:12px 0 16px;line-height:1.35}
.says-teaser{line-height:1.7}


/* ===== Speed: lighter glass on phones, skip work for off-screen sections ===== */
@media (max-width:860px){
  .glass-pane{-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
  .glass-tint{animation-duration:30s}
}
.pillars,.about-home,.says-home{content-visibility:auto;contain-intrinsic-size:auto 640px}


/* ===== Category rows slide on desktop too ===== */
.cat-sub-side{display:flex;align-items:center;gap:18px}
.cat-nav{display:none;gap:8px}
.cat-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--edge-lift);background:var(--glass);color:var(--bone);font-size:16px;line-height:1;cursor:pointer;transition:border-color .2s,opacity .2s,transform .2s}
.cat-nav button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.cat-nav button:disabled{opacity:.3;cursor:default}
@media (min-width:900px){
  .cat-nav{display:flex}
  .cat-sub-row{display:flex;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;gap:16px;padding-bottom:8px}
  .cat-sub-row .card,.cat-sub-row .card-soon{flex:0 0 calc((100% - 64px) / 4.4);scroll-snap-align:start}
}


/* ===== Homepage Jaunty Says cards: image on top, then title and text ===== */
.says-card{padding:28px}
.says-cover{aspect-ratio:16/10;border-radius:18px;overflow:hidden;margin:0 0 22px;background:var(--glass)}
.says-cover img{width:100%;height:100%;object-fit:cover;display:block}
.says-title{font-size:clamp(20px,1.9vw,24px);line-height:1.25;margin:0 0 14px}
.says-teaser{font-size:15px;line-height:1.7;-webkit-line-clamp:3}
.says-read{padding-top:20px}
@media (max-width:900px){.says-card{padding:22px}}


/* Reference layout, kept in the coloured glass */
.says-card.jsays-card{padding:28px}
.says-card .says-title{
  font-family:"Manrope",system-ui,sans-serif;font-weight:700;
  font-size:clamp(21px,2vw,26px);line-height:1.15;letter-spacing:-.01em;
  color:var(--bone);margin:0 0 16px;
}
.says-card .says-teaser{font-size:16px;line-height:1.75;color:var(--bone-dim);-webkit-line-clamp:3}
.says-cover.empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.says-cover.empty img{width:38%;height:auto;object-fit:contain;opacity:.22}
@media (max-width:900px){.says-card.jsays-card{padding:22px}}

/* Google reviews */
.rv-home{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.rv-head{text-align:center;max-width:640px;margin:0 auto 28px}
.rv-kicker{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,#d26b32);margin:0 0 10px}
.rv-head h2{margin:0 0 12px}
.rv-sum{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0;font-size:14px;opacity:.85}
.rv-stars{display:inline-flex;gap:2px}
.rv-stars i{display:inline-flex;color:color-mix(in srgb,currentColor 25%,transparent)}
.rv-stars i.on{color:#E8A93B}
.rv-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3);gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 14px;scrollbar-width:none}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 5%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rv-body{margin:0;font-size:15px;line-height:1.65;flex:1}
.rv-card footer{display:flex;flex-direction:column;gap:2px;font-size:13px}
.rv-card footer span{opacity:.6;font-size:12px}
.rv-cta{text-align:center;margin-top:18px}
@media(max-width:900px){.rv-track{grid-auto-columns:calc((100% - 18px)/2)}}
@media(max-width:600px){.rv-track{grid-auto-columns:86%}}

.rv-cta a[hidden],.rv-home[hidden]{display:none!important}

/* reviews: show every card on desktop (wrap, last row centred) */
@media(min-width:901px){
  .rv-track{display:flex;flex-wrap:wrap;justify-content:center;overflow:visible;gap:18px}
  .rv-card{flex:0 1 calc((100% - 36px)/3);box-sizing:border-box}
}

/* ---- Jaunty Says page redesign ---- */
.jb{padding:0}
.jb-hero{position:relative;overflow:hidden;text-align:center;color:#FFF8EC;
  background:radial-gradient(900px 420px at 80% 15%,color-mix(in srgb,var(--accent) 70%,transparent),transparent 62%),radial-gradient(700px 420px at 8% 90%,color-mix(in srgb,var(--accent) 38%,#4a1020),transparent 62%),linear-gradient(160deg,#241410,#0f0908)}
.jb-hero-in{position:relative;z-index:1;padding-top:clamp(72px,12vw,120px);padding-bottom:clamp(110px,16vw,160px)}
.jb-hero h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(40px,7vw,72px);line-height:1.05;margin:0 0 16px;text-wrap:balance}
.jb-hero p{max-width:52ch;margin:0 auto 28px;font-size:16px;opacity:.9}
.jb-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.jb-btn{display:inline-block;padding:13px 26px;font-size:14px;font-weight:700;border-radius:6px}
.jb-p{background:#F2B628;color:#1c1408}
.jb-g{background:rgba(255,255,255,.14);color:#FFF8EC;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.jb-p2{background:var(--accent);color:#fff;align-self:flex-start}
.jb-bigj{position:absolute;right:4%;top:2%;font:600 clamp(260px,38vw,460px)/1 "Fraunces",Georgia,serif;color:#fff;opacity:.06;pointer-events:none;user-select:none}
.jb-float{position:relative;z-index:3;margin-top:-84px}
.jb-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;padding:clamp(24px,4vw,44px);border-radius:10px;background:var(--glass-lift);border:1px solid var(--edge);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 18px 50px rgba(0,0,0,.28)}
html[data-theme="light"] .jb-how{background:#fff;box-shadow:0 18px 50px rgba(22,18,15,.12)}
.jb-h{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0}
.jb-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent)}
.jb-ic svg{width:24px;height:24px}
.jb-h h3{margin:4px 0 0;font:600 18px "Fraunces",Georgia,serif}
.jb-h p{margin:0;font-size:13px;color:var(--bone-dim)}
.jb-h a{font-size:12px;text-decoration:underline}
.jb-stories{padding-top:72px;padding-bottom:24px;position:relative;z-index:1}
.jb-stories h2{font:500 clamp(28px,4vw,40px) "Fraunces",Georgia,serif;text-align:center;margin:0}
.jb-sub{text-align:center;font:700 11px "Space Mono",monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint);margin:8px 0 34px}
.jb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.jb-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}
.jb-post{display:flex;flex-direction:column;min-width:0;border-radius:8px;overflow:hidden;background:var(--glass-lift);border:1px solid var(--edge);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 14px 40px rgba(0,0,0,.22);transition:transform .25s ease,box-shadow .25s ease}
html[data-theme="light"] .jb-post{background:#fff;box-shadow:0 14px 40px rgba(22,18,15,.1)}
.jb-post:hover{transform:translateY(-4px)}
.jb-cover{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 75%,#000),#1a0f0c)}
.jb-cover img{width:100%;height:100%;object-fit:cover}
.jb-cj{font:600 54px "Fraunces",Georgia,serif;color:rgba(255,255,255,.88)}
.jb-cover small{position:absolute;left:14px;top:14px;font:700 10px "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);padding:4px 9px;border-radius:999px}
.jb-t{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.jb-t h3{margin:0;font:600 20px/1.25 "Fraunces",Georgia,serif;text-wrap:balance}
.jb-t p{margin:0;font-size:14px;color:var(--bone-dim)}
.jb-m{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--bone-dim)}
.jb-m b{color:var(--accent);font-weight:700}
.jb-post.row{flex-direction:row}
.jb-post.row .jb-cover{aspect-ratio:auto;flex:0 0 38%}
.jb-split{display:grid;grid-template-columns:1fr 1fr;margin-top:72px;position:relative;z-index:1}
.jb-split-img{min-height:340px;display:grid;place-items:center;font:600 160px "Fraunces",Georgia,serif;color:rgba(255,255,255,.2);background:radial-gradient(500px 300px at 30% 30%,var(--accent),transparent 70%),linear-gradient(150deg,color-mix(in srgb,var(--accent) 45%,#3a0f1c),#160c0a)}
.jb-split-txt{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(28px,6vw,72px);background:#FFF6E4;color:#16120F}
html:not([data-theme="light"]) .jb-split-txt{background:#1a1411;color:var(--bone)}
.jb-split-txt h2{margin:0;font:500 clamp(26px,3.6vw,36px)/1.15 "Fraunces",Georgia,serif}
.jb-split-txt p{margin:0;max-width:44ch;opacity:.75}
@media(max-width:860px){.jb-how{grid-template-columns:repeat(2,minmax(0,1fr))}.jb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jb-split{grid-template-columns:1fr}}
@media(max-width:560px){.jb-grid,.jb-grid.two{grid-template-columns:minmax(0,1fr)}.jb-post.row{flex-direction:column}.jb-post.row .jb-cover{aspect-ratio:4/3;flex:none}}

/* ---- single post: magazine sheet ---- */
.jsays-narrow.jp-wide{max-width:1000px}
.jp-sheet{padding:8px 0 4px;color:var(--bone)}
.jp-bar{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--edge-lift);border-bottom:1px solid var(--edge-lift);font:700 11px "Space Mono",monospace;letter-spacing:.2em;text-transform:uppercase}
.jp-big{margin:clamp(28px,6vw,56px) 0;text-align:center;font:500 clamp(34px,8.5vw,92px)/1 "Manrope",system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-wrap:balance}
.jp-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:stretch}
.jp-media{position:relative;min-height:320px;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 70%,#000),#1a0f0c);display:grid;place-items:center}
.jp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jp-mj{font:600 180px "Fraunces",Georgia,serif;color:rgba(255,255,255,.2)}
.jp-side{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.jp-title{margin:0;text-align:center;font:400 clamp(26px,3.6vw,40px)/1.2 "Fraunces",Georgia,serif;text-wrap:balance}
.jp-text p{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--bone-soft)}
.jp-text p:last-child{margin-bottom:0}
.jp-lead{margin-top:clamp(28px,5vw,48px)}
.jp-lead p{font-size:16px}
.jp-cols{margin-top:28px;columns:2;column-gap:clamp(24px,5vw,56px)}
.jp-cols p{break-inside:avoid-column}
.jp-foot{margin-top:clamp(32px,6vw,56px);padding-top:18px;border-top:1px solid var(--edge-lift);text-align:center;font:700 11px "Space Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.jp-actions{justify-content:center;margin-top:18px}
@media(max-width:760px){.jp-top{grid-template-columns:minmax(0,1fr)}.jp-media{min-height:260px}.jp-cols{columns:1}}

/* single post v2: tidy reading column */
.jp-top{align-items:center}
.jp-side{justify-content:center;gap:20px;text-align:left}
.jp-title{text-align:left;font-size:clamp(28px,4vw,46px);line-height:1.12}
.jp-deck{margin:0;font:italic 400 clamp(17px,2vw,21px)/1.55 "Fraunces",Georgia,serif;color:var(--bone-soft)}
.jp-by{display:flex;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--edge-lift);font:700 11px "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}
.jp-story{max-width:640px;margin:clamp(36px,6vw,64px) auto 0;display:flex;flex-direction:column;gap:20px}
.jp-story p{margin:0;font:400 clamp(17px,2vw,20px)/1.7 "Fraunces",Georgia,serif;color:var(--bone)}
.jp-sig{max-width:640px;margin:clamp(36px,6vw,56px) auto 0;padding:26px 28px;border-radius:14px;text-align:center;background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.jp-sig b{display:block;margin-bottom:10px;font:700 11px "Space Mono",monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.jp-sig p{margin:0;font:italic 400 18px/1.6 "Fraunces",Georgia,serif}

/* single post v3: hero + info bar + split */
.jp-hero{position:relative;overflow:hidden;min-height:min(78vh,620px);display:flex;color:#FFF8EC;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 60%,#000),#120b0a)}
.jp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jp-hero-j{position:absolute;right:8%;top:6%;font:600 clamp(260px,40vw,480px)/1 "Fraunces",Georgia,serif;color:#fff;opacity:.08}
.jp-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,5,.72),rgba(8,6,5,.5) 45%,rgba(8,6,5,.88))}
.jp-hero-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;padding-top:28px;padding-bottom:clamp(70px,10vw,110px)}
.jp-back{align-self:flex-start;font:700 11px "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.jp-hero-mid{text-align:center;max-width:760px;padding-block:40px}
.jp-hero h1{margin:0 0 16px;font:600 clamp(32px,6vw,60px)/1.1 "Fraunces",Georgia,serif;text-wrap:balance}
.jp-hero p{margin:0 auto;max-width:52ch;font-size:clamp(15px,1.8vw,18px);opacity:.88}
.jp-mouse{width:24px;height:38px;border:2px solid rgba(255,248,236,.7);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.jp-mouse i{width:3px;height:8px;border-radius:2px;background:#FFF8EC;animation:jpm 1.6s ease-in-out infinite}
@keyframes jpm{50%{transform:translateY(8px);opacity:.3}}
.jp-info{position:relative;z-index:3;margin-top:calc(-62px - var(--s7));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:26px clamp(16px,3vw,36px);background:color-mix(in srgb,var(--accent) 38%,#1c1613);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);color:#FFF8EC;text-align:center}
.jp-info>div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.jp-i svg{width:24px;height:24px}
.jp-info b{font:600 17px "Fraunces",Georgia,serif}
.jp-info span{font-size:12.5px;opacity:.85}
.jp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;margin-top:clamp(48px,8vw,88px)}
.jp-frame{position:relative;padding:0 0 28px 0}
.jp-frame::after{content:"";position:absolute;right:-22px;bottom:0;width:62%;height:78%;background:color-mix(in srgb,var(--accent) 30%,#0c0908);z-index:0}
.jp-frame .jp-media{position:relative;z-index:1;min-height:0;aspect-ratio:4/5}
.jp-split-txt{display:flex;flex-direction:column;gap:16px}
.jp-no{font:700 11px "Space Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.jp-split-txt h2{margin:0;font:600 clamp(24px,3.2vw,34px)/1.2 "Fraunces",Georgia,serif;text-wrap:balance}
.jp-intro{display:flex;flex-direction:column;gap:12px}
.jp-intro p{margin:0;font-size:15px;line-height:1.7;color:var(--bone-soft)}
.jp-actions{justify-content:flex-start;margin-top:6px}
@media(max-width:760px){.jp-info{grid-template-columns:minmax(0,1fr);gap:18px}.jp-split{grid-template-columns:minmax(0,1fr)}.jp-frame::after{right:-10px}}
@media(prefers-reduced-motion:reduce){.jp-mouse i{animation:none}}

/* single post v4: full-width text, darker ground */
.jp-hero-shade{background:linear-gradient(180deg,rgba(6,4,3,.84),rgba(6,4,3,.68) 45%,rgba(6,4,3,.94))}
.jp-story,.jp-sig{max-width:none}
.jp-story p{font-size:clamp(17px,1.9vw,21px);line-height:1.75}
.jp-sig{padding:30px clamp(20px,4vw,48px)}
.jp-intro p{font-size:16px}
.jsays-page:has(.jp-hero){background:#E9E2CC}
html:not([data-theme="light"]) .jsays-page:has(.jp-hero){background:#070504}
html[data-theme="light"] .jp-story p,html[data-theme="light"] .jp-intro p{color:#1f1914}

/* single post v5: article typography */
.jp-story{max-width:860px;margin-left:auto;margin-right:auto;display:block}
.jp-story>*{margin:0}
.jp-story p,.jp-story li{font:400 clamp(16.5px,1.7vw,18.5px)/1.85 "DM Sans",system-ui,sans-serif;color:var(--bone)}
html[data-theme="light"] .jp-story p,html[data-theme="light"] .jp-story li{color:#1f1914}
.jp-story p{margin-bottom:22px}
.jp-story h2{margin:clamp(40px,6vw,60px) 0 18px;font:700 clamp(24px,3.2vw,34px)/1.2 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance}
.jp-story ul{margin:0 0 24px;padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.jp-story li::marker{color:var(--accent)}
.jp-intro p{font:400 clamp(17px,1.9vw,20px)/1.75 "DM Sans",system-ui,sans-serif}
.jp-split-txt h2{font-family:"Space Grotesk",system-ui,sans-serif}
.jp-sig{max-width:860px;margin-left:auto;margin-right:auto}

/* Homepage Jaunty Says: dark card section after the portfolio reference */
main>section.sy-home{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.sy-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.sy-titlebox{position:relative;isolation:isolate}
.sy-no{display:block;margin-bottom:6px;font:700 11px "Space Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sy-home h2{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(27px,3.6vw,42px);line-height:1.05;letter-spacing:.05em;text-transform:uppercase;color:var(--bone)}
.sy-home h2::after{content:none}
.sy-all{flex:none;padding:11px 18px;border-radius:6px;font:700 10.5px "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;background:var(--glass-lift);border:1px solid var(--edge);color:var(--bone)}
.sy-all:hover{background:var(--accent);color:#fff;border-color:transparent}
.sy-sub{margin:14px 0 30px;font-size:15px;color:var(--bone-dim)}
.sy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sy-card{display:flex;flex-direction:column;min-width:0;border-radius:8px;overflow:hidden;background:#1c1917;border:1px solid var(--edge);color:#F1ECE2;transition:transform .25s ease}
html[data-theme="light"] .sy-card{background:#fff;color:#16120F;box-shadow:0 10px 30px rgba(22,18,15,.08)}
.sy-card:hover{transform:translateY(-4px)}
.sy-cover{position:relative;aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 55%,#000),#120b09)}
.sy-cover img{width:100%;height:100%;object-fit:cover}
.sy-j{font:600 64px "Fraunces",Georgia,serif;color:rgba(255,255,255,.7)}
.sy-go{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sy-body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;flex:1}
.sy-body h3{margin:0;font:700 17px/1.3 "Manrope",system-ui,sans-serif;text-transform:none;letter-spacing:0}
.sy-body p{margin:0;font-size:13.5px;line-height:1.65;opacity:.72;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sy-meta{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;gap:10px;font-size:11.5px;opacity:.8}
.sy-meta b{font:700 10.5px "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sy-card.hot{background:var(--accent);border-color:transparent;color:#fff}
.sy-card.hot .sy-go{background:#fff;color:var(--accent)}
.sy-card.hot .sy-meta b{color:#fff}
.sy-card.hot .sy-body p{opacity:.9}
@media(max-width:900px){.sy-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:14px;padding-bottom:8px;scrollbar-width:none}.sy-grid::-webkit-scrollbar{display:none}.sy-card{flex:0 0 min(84vw,340px);scroll-snap-align:start}}
@media(max-width:560px){.sy-head{flex-wrap:wrap}}

@media(max-width:700px){.sy-home h2::after{display:none}.sy-home h2{font-size:clamp(28px,8vw,36px)}}

/* Jaunty Says card motion */
.sy-card{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.sy-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s ease}
.sy-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(0,0,0,.35);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.sy-card:hover::after{transform:translateX(120%)}
.sy-cover img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sy-card:hover .sy-cover img{transform:scale(1.08)}
.sy-go{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sy-card:hover .sy-go{transform:translateX(4px) scale(1.1)}
.sy-j{animation:syfloat 4.5s ease-in-out infinite}
@keyframes syfloat{50%{transform:translateY(-8px)}}
.sy-card.hot{animation:syglow 3.6s ease-in-out infinite}
@keyframes syglow{50%{box-shadow:0 0 34px color-mix(in srgb,var(--accent) 55%,transparent)}}
.sy-grid.reveal .sy-card:not(.in){opacity:0;transform:translateY(34px)}
.sy-grid.reveal .sy-card.in{animation:syin .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms) both}
.sy-grid.reveal .sy-card.hot.in{animation:syin .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms) both,syglow 3.6s ease-in-out 1s infinite}
@keyframes syin{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sy-j,.sy-card.hot{animation:none}.sy-card,.sy-card::after,.sy-cover img,.sy-go{transition:none}}

/* Jaunty Says: four slimmer cards */
.sy-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sy-cover{aspect-ratio:4/3}
.sy-body{padding:18px 16px 16px;gap:8px}
.sy-body h3{font-size:15.5px}
.sy-body p{font-size:13px;-webkit-line-clamp:3}
.sy-go{width:34px;height:34px;right:10px;bottom:10px}
@media(max-width:1000px) and (min-width:901px){.sy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.sy-card{flex:0 0 min(70vw,260px)}}

/* phones and tablets: the hero copy is centred above the image card */
@media (max-width:900px){
  .hero-copy{text-align:center}
  .hero-copy .hero-ask-reveal{margin-left:0}
}

/* New to the Spot: keep the moving strip light, so phones don't stutter */
.new-track{will-change:transform;backface-visibility:hidden}
.new-track .thumb,.new-track .thumb .tag,.new-track .love-btn{-webkit-backdrop-filter:none;backdrop-filter:none}
.new-track .thumb .tag{background:rgba(11,12,16,.82)}
.new-track.off{animation-play-state:paused}
@media (max-width:760px){
  .new-strip{-webkit-mask-image:none;mask-image:none}
}

/* Spot the Jaunty: show the photos clean, no glass shading over them */
.jcard-portrait .glass-tint,.jcard-portrait .glass-pane{display:none}

/* Spot the Jaunty: no dark fade at the strip edges, photos stay true to colour */
.marquee{-webkit-mask-image:none;mask-image:none}

/* Spot the Jaunty: the strip runs the full width of the screen, edge to edge */
.jaunty .marquee{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}