/* ============================================================
   Atelier du Bund — Design System
   Aesthetic: Old Shanghai / Hong Kong 1930s–60s · Wong Kar-wai
   Type: Cormorant Garamond (display) + Poppins (body)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* palette — deep maroon jewel base */
  --ink:        #200d11;   /* deepest maroon base            */
  --ink-2:      #2a1116;   /* slightly lifted panel          */
  --panel:      #34151b;   /* card surface                   */
  --panel-2:    #3f1820;   /* raised card                    */
  --brass:      #c8a24b;   /* primary metallic accent        */
  --brass-soft: #ddc18a;   /* light brass for headings hint  */
  --oxblood:    #97323b;   /* the signature button red       */
  --oxblood-deep:#601f25;  /* deep lining red                */
  --jade:       #4a7361;   /* green-marble accent            */
  --ivory:      #ece3d2;   /* primary text on dark           */
  --ivory-dim:  #a99e8a;   /* secondary text                 */
  --hair:       rgba(200,162,75,.20);  /* hairline rules     */
  --hair-soft:  rgba(236,227,210,.10);
  --shadow:     0 30px 70px -30px rgba(0,0,0,.75);

  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* rhythm */
  --container: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 11vw, 9rem);
  --radius: 3px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ivory);
  background:var(--ink);
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--oxblood);color:var(--ivory)}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(3rem,7vw,5rem)}

/* ---------- Typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:.005em;
  color:var(--ivory);
  font-size:clamp(2.6rem,7vw,5.2rem);
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;color:var(--ivory)}
h2.heading{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:.01em}
h3{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.lede{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--ivory-dim);font-weight:300;max-width:56ch}
.serif-italic{font-family:var(--serif);font-style:italic;font-weight:500}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-weight:400;
  text-transform:uppercase;letter-spacing:.4em;
  font-size:.7rem;color:var(--brass);
  margin-bottom:1.3rem;
}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--brass);opacity:.7}
.eyebrow--center::after{content:"";width:2.2rem;height:1px;background:var(--brass);opacity:.7}
.center{text-align:center}
.center .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--brass);--fg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:500;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.18em;
  padding:1.05em 2.1em;border:1px solid var(--bg);
  background:var(--bg);color:var(--fg);
  border-radius:999px;transition:.4s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:transparent;color:var(--brass)}
.btn--ghost{--bg:transparent;--fg:var(--ivory);border-color:var(--hair)}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass);background:transparent}
.btn--block{width:100%}
.btn--lg{padding:1.2em 2.6em}

.textlink{
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--brass);
  display:inline-flex;align-items:center;gap:.5em;
  padding-bottom:.3em;border-bottom:1px solid var(--hair);
  transition:.35s var(--ease);
}
.textlink:hover{color:var(--brass-soft);border-color:var(--brass)}
.textlink::after{content:"→";transition:.35s var(--ease)}
.textlink:hover::after{transform:translateX(4px)}

/* ---------- Site header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gutter);
  transition:.5s var(--ease);
  background:linear-gradient(180deg,rgba(28,10,14,.55),transparent);
}
.site-header.scrolled{
  background:rgba(36,12,17,.9);
  backdrop-filter:blur(12px) saturate(1.1);
  padding-block:.9rem;
  border-bottom:1px solid var(--hair);
}
.brand{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.02em;color:var(--ivory)}
.brand span{color:var(--brass)}
.nav{display:flex;align-items:center;gap:2.2rem}
.nav a:not(.btn){
  font-family:var(--sans);font-size:.74rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ivory-dim);
  transition:.3s var(--ease);position:relative;
}
.nav a:not(.btn):hover{color:var(--ivory)}
.nav .lang{color:var(--brass);border:1px solid var(--hair);border-radius:999px;padding:.4em .9em}
.nav-toggle{display:none;background:none;border:0;color:var(--ivory);font-size:1.5rem;line-height:1}

@media (max-width:860px){
  .nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:2rem;
    background:rgba(28,10,14,.97);backdrop-filter:blur(10px);
    transform:translateX(100%);transition:.5s var(--ease);
  }
  .nav.open{transform:none}
  .nav a:not(.btn){font-size:1rem}
  .nav-toggle{display:block;z-index:101}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden}
.hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:88% 22%}
.hero::after{ /* cinematic gradient — dark panel on the left for text, suit stays lit on the right */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(28,10,14,.93) 0%,rgba(28,10,14,.72) 26%,rgba(28,10,14,.18) 52%,transparent 70%),
    linear-gradient(180deg,transparent 52%,rgba(28,10,14,.5) 80%,var(--ink) 100%),
    radial-gradient(120% 80% at 88% 16%,rgba(151,50,59,.16),transparent 60%);
}
/* hero text pinned to the left so it never overlaps the figure */
.hero__inner{padding-block:clamp(3rem,9vw,7rem);max-width:32rem;text-align:left;justify-self:start;margin-inline:0;position:relative}
.hero__inner::before{ /* subtle scrim so the copy stays legible off the dark-left, not on the suit */
  content:"";position:absolute;inset:-2rem -6rem -2rem -50vw;z-index:-1;
  background:radial-gradient(120% 100% at 25% 50%,rgba(14,4,6,.55),transparent 72%);
  pointer-events:none;
}
.hero .display{margin:.4rem 0 1.3rem;white-space:nowrap;font-size:clamp(2.1rem,6.4vw,4.4rem)}
.hero__slogan{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3vw,2rem);color:var(--brass-soft);font-weight:500;margin-bottom:2.2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem}
.scrollcue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:1;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-dim);
  display:flex;flex-direction:column;align-items:center;gap:.6rem}
.scrollcue::after{content:"";width:1px;height:2.4rem;background:linear-gradient(var(--brass),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1}100%{opacity:0;transform:translateY(8px) scaleY(1)}}

/* ---------- Manifesto ---------- */
.manifesto{text-align:center;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.manifesto p{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.4;font-weight:400;max-width:24ch;margin-inline:auto;color:var(--ivory)}
.manifesto em{font-style:italic;color:var(--brass-soft)}

/* ---------- Collection (type-led cards) ---------- */
.collection{background:var(--ink-2)}
.collection__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr);margin-top:3rem}
@media (max-width:680px){.collection__grid{grid-template-columns:1fr}}
.fit-card{
  position:relative;padding:clamp(1.8rem,3.5vw,2.8rem);
  background:linear-gradient(165deg,var(--panel),var(--ink-2));
  border:1px solid var(--hair);border-radius:var(--radius);
  min-height:300px;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;transition:.5s var(--ease);
}
.fit-card::before{ /* inner deco frame */
  content:"";position:absolute;inset:10px;border:1px solid var(--hair-soft);border-radius:2px;pointer-events:none;transition:.5s var(--ease);
}
.fit-card::after{ /* corner motif */
  content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(151,50,59,.22),transparent 65%);opacity:0;transition:.6s var(--ease);
}
.fit-card:hover{transform:translateY(-4px);border-color:var(--brass)}
.fit-card:hover::before{inset:7px;border-color:var(--hair)}
.fit-card:hover::after{opacity:1}
.fit-card__cut{font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
.fit-card__name{font-family:var(--serif);font-size:clamp(2rem,4vw,2.9rem);font-weight:500;margin:.5rem 0 .9rem;line-height:1}
.fit-card__desc{color:var(--ivory-dim);font-size:.95rem;max-width:34ch}
.fit-card__tag{margin-top:1.4rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim)}
.fit-card__num{position:absolute;bottom:1.1rem;right:1.4rem;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--brass);opacity:.6}

/* ---------- Split feature (fabrics / heritage) ---------- */
.split{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center;grid-template-columns:1fr 1fr}
.split--reverse .split__media{order:2}
@media (max-width:840px){.split{grid-template-columns:1fr}.split--reverse .split__media{order:0}}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:.8s var(--ease)}
.split__media:hover img{transform:scale(1.04)}
.split__media--frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(236,227,210,.25);pointer-events:none}

/* ---------- Tiers ---------- */
.tiers{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr;margin-top:2.5rem}
@media (max-width:680px){.tiers{grid-template-columns:1fr}}
.tier{padding:clamp(1.8rem,3.5vw,2.6rem);border:1px solid var(--hair);border-radius:var(--radius);background:var(--panel);position:relative}
.tier--premium{background:linear-gradient(165deg,var(--panel-2),var(--panel));border-color:var(--brass)}
.tier__badge{position:absolute;top:1.4rem;right:1.4rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);border:1px solid var(--hair);border-radius:999px;padding:.35em .9em}
.tier__name{font-family:var(--serif);font-size:1.8rem;font-weight:500}
.tier__price{font-family:var(--serif);font-size:2.6rem;color:var(--brass-soft);margin:.3rem 0 .2rem}
.tier__price small{font-size:.9rem;color:var(--ivory-dim);font-family:var(--sans);letter-spacing:.05em}
.tier__list{list-style:none;margin-top:1.4rem;display:grid;gap:.7rem}
.tier__list li{padding-left:1.6em;position:relative;color:var(--ivory-dim);font-size:.92rem}
.tier__list li::before{content:"—";position:absolute;left:0;color:var(--brass)}

/* ---------- Process ---------- */
.process{background:var(--ink-2)}
.steps{display:grid;gap:1.5rem;grid-template-columns:repeat(4,1fr);margin-top:3rem;counter-reset:step}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:2.4rem;border-top:1px solid var(--hair)}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:.9rem;left:0;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--brass)}
.step h3{font-size:1.25rem;margin-bottom:.5rem}
.step p{color:var(--ivory-dim);font-size:.9rem}

/* ---------- Founding band (parallax CTA) ---------- */
.band{position:relative;isolation:isolate;text-align:center;padding-block:clamp(5rem,12vw,9rem);overflow:hidden}
.band__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,10,14,.82),rgba(28,10,14,.68)),radial-gradient(80% 60% at 50% 50%,rgba(151,50,59,.2),transparent)}
.band .display{font-size:clamp(2.2rem,5.5vw,4rem)}

/* ---------- Pricing note ---------- */
.note{font-size:.82rem;color:var(--ivory-dim);font-style:italic}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);border-top:1px solid var(--hair);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:720px){.footer__grid{grid-template-columns:1fr}}
.footer__brand .brand{font-size:2rem;display:inline-block;margin-bottom:1rem}
.footer__brand p{color:var(--ivory-dim);max-width:34ch;font-size:.92rem}
.footer h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:1.2rem;font-weight:500}
.footer ul{list-style:none;display:grid;gap:.7rem}
.footer a{color:var(--ivory-dim);font-size:.92rem;transition:.3s var(--ease)}
.footer a:hover{color:var(--ivory)}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--hair);color:var(--ivory-dim);font-size:.78rem}

/* ---------- Forms (booking / design) ---------- */
.form{display:grid;gap:1.4rem;margin-top:2.5rem}
.form__row{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr}
@media (max-width:600px){.form__row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-dim)}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:.95rem;font-weight:300;color:var(--ivory);
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);
  padding:.95em 1.1em;transition:.3s var(--ease);width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass);background:#241c14}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);background-position:calc(100% - 22px) center,calc(100% - 16px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.choice-grid{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.choice-grid{grid-template-columns:1fr}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:block;padding:1em 1.2em;border:1px solid var(--hair);border-radius:var(--radius);background:var(--ink-2);color:var(--ivory-dim);font-size:.9rem;transition:.3s var(--ease)}
.choice input:checked + span{border-color:var(--brass);color:var(--ivory);background:#241c14}
.choice input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- Page hero (subpages) ---------- */
.page-hero{position:relative;padding-top:clamp(8rem,16vw,11rem);padding-bottom:clamp(3rem,7vw,5rem);background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.page-hero .display{font-size:clamp(2.4rem,6vw,4.2rem)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Misc ---------- */
.divider{height:1px;background:var(--hair);border:0;margin-block:0}
.muted{color:var(--ivory-dim)}
.tag-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);border:1px solid var(--hair);border-radius:999px;padding:.45em 1em}
.swatches{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:1.6rem}
.swatch{display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-dim)}
.swatch i{width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--hair-soft);box-shadow:inset 0 0 0 4px rgba(0,0,0,.25)}

/* ============================================================
   v2 — lighter mood, WKW flourish, heritage map
   ============================================================ */
:root{
  --parch:   #ece1ca;   /* warm parchment            */
  --parch-2: #e2d4b6;   /* deeper parchment          */
  --ink-warm:#2a2017;
  --ink-warm-dim:#6b5f4a;
  --gold-deep:#9a6a2f;   /* legible gold on light     */
}

/* ---------- Light sections (lift the darkness) ---------- */
.section--light{background:linear-gradient(180deg,var(--parch),var(--parch-2));color:var(--ink-warm)}
.section--light .heading,.section--light h1,.section--light h2,.section--light h3,.section--light .display{color:#241b10}
.section--light .lede{color:var(--ink-warm-dim)}
.section--light .muted{color:#6f6450}
.section--light .note{color:#857a64}
.section--light .eyebrow{color:var(--gold-deep)}
.section--light .eyebrow::before,.section--light .eyebrow--center::after{background:var(--gold-deep);opacity:.85}
.section--light .serif-italic{color:var(--gold-deep)}
.section--light .swatch{color:#6f6450}
.section--light .swatch i{border-color:rgba(40,30,16,.18);box-shadow:inset 0 0 0 4px rgba(255,255,255,.4)}
.section--light .split__media--frame::after{border-color:rgba(40,28,16,.3)}
.section--light .textlink{color:var(--gold-deep);border-color:rgba(40,28,16,.25)}
.section--light .textlink:hover{color:#7a521f;border-color:var(--gold-deep)}
.section--light .tag{color:#6f6450;border-color:rgba(40,28,16,.22)}
.section--light .tier{background:#f4ecd9;border-color:#d8c8a2}
.section--light .tier--premium{background:linear-gradient(165deg,#fbf4e3,#f1e7cd);border-color:#b8924f}
.section--light .tier__name{color:#241b10}
.section--light .tier__price{color:var(--gold-deep)}
.section--light .tier__list li{color:var(--ink-warm-dim)}
.section--light .tier__list li::before{color:var(--gold-deep)}
.section--light .tier__badge{color:var(--gold-deep);border-color:rgba(40,28,16,.28)}

/* ---------- Plum-blossom motif + deco divider ---------- */
.blossom{width:30px;height:30px;flex:none;color:inherit}
.blossom circle{fill:none;stroke:currentColor;stroke-width:1.3}
.deco-divider{display:flex;align-items:center;justify-content:center;gap:1.3rem;color:var(--brass)}
.deco-divider::before,.deco-divider::after{content:"";height:1px;width:min(20vw,140px)}
.deco-divider::before{background:linear-gradient(90deg,transparent,currentColor)}
.deco-divider::after{background:linear-gradient(90deg,currentColor,transparent)}
.section--light .deco-divider{color:var(--gold-deep)}

.manifesto{position:relative;overflow:hidden}
.manifesto__pattern{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%239a6a2f' stroke-opacity='0.16' stroke-width='1'%3E%3Ccircle cx='65' cy='46' r='10'/%3E%3Ccircle cx='81' cy='58' r='10'/%3E%3Ccircle cx='75' cy='77' r='10'/%3E%3Ccircle cx='55' cy='77' r='10'/%3E%3Ccircle cx='49' cy='58' r='10'/%3E%3Ccircle cx='65' cy='62' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:130px 130px;
}
.manifesto .container{position:relative}
.manifesto p{margin-top:1.6rem}
.manifesto em{font-style:italic;color:var(--oxblood)}

/* ---------- XL button ---------- */
.btn--xl{padding:1.45em 3.4em;font-size:.85rem;letter-spacing:.22em}

/* ---------- Heritage journey map ---------- */
.heritage{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.heritage .container{position:relative;z-index:1}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(90px,14vw,170px);opacity:.12;color:var(--brass);pointer-events:none;z-index:0}
.journey{margin-top:3.5rem}
.journey__track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.journey__line{position:absolute;top:19px;left:7%;right:7%;height:2px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 9px,transparent 9px 19px);opacity:.45}
.j-node{position:relative;background:none;border:0;color:inherit;cursor:pointer;padding:46px .4rem 0;text-align:center;transition:.3s var(--ease)}
.j-node__dot{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;
  border:2px solid var(--brass);background:var(--ink);transition:.35s var(--ease)}
.j-node__dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brass);opacity:0;transition:.35s var(--ease)}
.j-node--future .j-node__dot{border-style:dashed;opacity:.65}
.j-node:hover .j-node__dot,.j-node.active .j-node__dot{box-shadow:0 0 0 6px rgba(200,162,75,.16)}
.j-node.active .j-node__dot::after{opacity:1}
.j-node__city{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--ivory);line-height:1.1}
.j-node__year{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-top:.2rem}
.j-node.active .j-node__city{color:var(--brass-soft)}
.journey__panel{margin-top:2.6rem;padding:1.9rem 2.1rem;border:1px solid var(--hair);border-radius:var(--radius);
  background:linear-gradient(165deg,var(--panel),var(--ink-2));min-height:96px}
.journey__panel h3{font-size:1.5rem;margin-bottom:.45rem}
.journey__panel p{color:var(--ivory-dim);max-width:64ch}
.journey__hint{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-top:1.2rem;opacity:.8}
@media (max-width:680px){
  .journey__track{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .journey__line{display:none}
}

/* ============================================================
   v3 — The Invitation entry · plum-blossom cursor ·
         three-tier pricing · contact · private appointment page
   ============================================================ */

/* ---------- Plum-blossom cursor (desktop pointer devices only) ----------
   CSS-only, gated to fine pointers; touch devices keep the native cursor.
   Interactive elements keep their conventional cursor so clicking is never
   impeded, and a standard keyword fallback follows the custom image. */
@media (hover:hover) and (pointer:fine){
  body{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%2397323b' fill-opacity='0.9' stroke='%23ece3d2' stroke-opacity='0.55' stroke-width='0.7'%3E%3Ccircle cx='14' cy='7' r='4.6'/%3E%3Ccircle cx='20.7' cy='12' r='4.6'/%3E%3Ccircle cx='18.2' cy='19.8' r='4.6'/%3E%3Ccircle cx='9.8' cy='19.8' r='4.6'/%3E%3Ccircle cx='7.3' cy='12' r='4.6'/%3E%3C/g%3E%3Ccircle cx='14' cy='13.5' r='2.3' fill='%23c8a24b'/%3E%3C/svg%3E") 14 14, auto;
  }
  a,button,label,summary,[role="button"],.j-node,.choice,.opt,.swatch-opt{cursor:pointer}
  input[type=text],input[type=email],input[type=tel],input[type=date],input[type=search],textarea,select{cursor:text}
  select,input[type=date]{cursor:pointer}
}

/* The Invitation / envelope intro styles were archived to
   /archive/envelope-intro/envelope.css (removed from live so the page opens on the hero). */

/* ---------- Three-tier pricing ---------- */
.tiers--three{grid-template-columns:repeat(3,1fr)}
@media (max-width:780px){.tiers--three{grid-template-columns:1fr}}
.tier__cloth{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);margin-top:.1rem}
.section--light .tier__cloth{color:#857a64}

/* ---------- Contact band ---------- */
.band__mail{
  display:inline-block;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,3.8vw,2.4rem);color:var(--brass-soft);
  border-bottom:1px solid var(--hair);padding-bottom:.12em;transition:.35s var(--ease);
}
.band__mail:hover{color:var(--ivory);border-color:var(--brass)}

/* a single, quiet price — the only figure on the site */
.price-whisper{
  margin-top:1.5rem;font-family:var(--sans);font-weight:400;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-dim);
}


/* ---------- Private "Your Appointment" page ---------- */
.appointment{
  min-height:100vh;
  background:radial-gradient(125% 90% at 50% 0%,#f6eed9,#e8dabd 58%,#dcc9a3);
  color:var(--ink-warm);
  padding:clamp(2.5rem,7vw,5rem) var(--gutter);
  display:grid;place-items:start center;
}
.appt-letter{
  position:relative;max-width:50rem;width:100%;
  background:linear-gradient(180deg,#fbf4e3,#f2e7cd);
  border:1px solid #d8c5a0;border-radius:2px;
  box-shadow:0 42px 90px -45px rgba(60,40,20,.5),inset 0 0 0 1px rgba(255,255,255,.45);
  padding:clamp(2.4rem,6vw,4.4rem) clamp(1.6rem,6vw,4rem);
}
.appt-letter::before{content:"";position:absolute;inset:14px;border:1px solid rgba(154,106,47,.24);pointer-events:none}
.appt-head{text-align:center}
.appt-seal{
  width:72px;height:72px;margin:0 auto 1.5rem;border-radius:50%;
  display:grid;place-items:center;color:#f3e3c8;
  background:radial-gradient(circle at 38% 32%,#b8434b,#7e2730 68%,#5e1c23);
  box-shadow:0 8px 18px -6px rgba(94,28,35,.7),inset 0 2px 6px rgba(255,255,255,.25),inset 0 -7px 13px rgba(0,0,0,.4);
}
.appt-seal svg{width:40px;height:40px}
.appt-seal .blossom circle{stroke:#f0dcbf;stroke-width:1.4}
.appt-seal .blossom .pistil{fill:#f0dcbf;stroke:none}
.appt-eyebrow{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.36em;font-size:.7rem;color:var(--gold-deep)}
.appt-letter h1{font-family:var(--serif);font-weight:500;color:#241b10;font-size:clamp(2.1rem,5.5vw,3.2rem);line-height:1.06;margin:.7rem 0 0}
.appt-sub{font-family:var(--serif);font-style:italic;color:var(--ink-warm-dim);font-size:clamp(1.05rem,2.4vw,1.35rem);margin-top:.7rem}
.appt-block{margin-top:2.4rem;padding-top:2rem;border-top:1px solid rgba(154,106,47,.25)}
.appt-block h2{font-family:var(--serif);font-weight:500;color:#2a2017;font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:.7rem}
.appt-block p{color:#5c513c;font-size:1rem;line-height:1.75;max-width:60ch}
.appt-list{list-style:none;display:grid;gap:.8rem;margin-top:.4rem}
.appt-list li{padding-left:1.5em;position:relative;color:#5c513c;font-size:1rem;line-height:1.7}
.appt-list li::before{content:"—";position:absolute;left:0;color:var(--gold-deep)}
.appt-list strong{color:#2a2017;font-weight:500}
.appt-details{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);margin-top:.4rem}
@media (max-width:560px){.appt-details{grid-template-columns:1fr;gap:1.1rem}}
.appt-detail .lbl{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--gold-deep);margin-bottom:.35rem}
.appt-detail .val{font-family:var(--serif);font-size:1.3rem;color:#241b10}
.appt-foot{margin-top:2.6rem;text-align:center;font-style:italic;color:#9c8b6c;font-size:.85rem}
.appt-foot a{color:var(--gold-deep);border-bottom:1px solid rgba(154,106,47,.4)}
.appt-foot a:hover{color:#7a521f}

/* ---------- Design Studio (legacy, configurator removed) — kept for the
   private measurement sheet which still uses .form / .field primitives ---------- */
.form-status{margin-top:1rem;font-size:.88rem;min-height:1.2em}
.form-status.error{color:#e6a4a4}
.form-status.success{color:var(--brass-soft)}