/* ===========================================================
   Le Carnet de Céline — The Atelier Notebook
   v2 — notebook metaphor as architecture (recto/verso spreads,
   visible gutter, page numbers, bound cover, hair-swatch ring)
   =========================================================== */
:root{
  --ink:#2E4D6B;        /* Encre — primary ink */
  --petrol:#3B5D7D;     /* brand petrol — secondary ink */
  --paper:#F6F1E9;      /* carnet paper */
  --paper-2:#EFE7DA;    /* deeper paper (verso / cover cloth) */
  --white:#FFFFFF;
  --rose:#E9D0CE;       /* altrosa */
  --mauve:#9B8FA8;      /* mauve — darkened for AA on paper */
  --gold:#7D6730;       /* or atelier — AA-safe (4.85:1) for text on paper */
  --gold-leaf:#C9A86A;  /* bright gold — decorative use only (lines/rules) */
  --fg:#2C2C2C;         /* body ink */
  --muted-ink:#5A5550;  /* AA-safe muted text on paper */
  --border:#D9DBDA;
  --hair:rgba(46,77,107,.16);
  --gutter:rgba(46,77,107,.10);
  --shadow:0 18px 40px -22px rgba(46,77,107,.45);
  --r:6px;
  --maxw:1200px;
  --spine-w:118px;
  --oc-w:218px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--fg);
  font-family:"Mulish",system-ui,sans-serif;font-weight:400;
  font-size:clamp(15px,1.05vw,17px);line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 18% 8%, rgba(201,168,106,.05), transparent 40%),
    radial-gradient(circle at 92% 80%, rgba(155,143,168,.06), transparent 45%);
}
img{max-width:100%;display:block;height:auto}
a{color:var(--petrol);text-decoration:none}
a:hover{color:var(--ink)}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}

.skip-link{position:fixed;left:8px;top:-60px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:var(--r);transition:top .2s}
.skip-link:focus{top:8px;color:#fff}

/* ---------- Typography helpers ---------- */
.h-spread{
  font-family:"Italiana",serif;font-weight:400;color:var(--ink);
  text-transform:uppercase;letter-spacing:.14em;line-height:1.05;
  font-size:clamp(1.9rem,4.6vw,3.4rem);margin:.1em 0 .15em;
}
.eyebrow{
  font-family:"Spectral",serif;font-style:italic;color:var(--petrol);
  letter-spacing:.04em;font-size:.98rem;margin:0 0 .2em;
}
.numeral{
  font-family:"Spectral",serif;font-style:italic;color:var(--gold);
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:.9;margin:0 0 .1em;font-weight:500;
}
.body{max-width:46ch;margin:.4em 0 1em}
.eyebrow,.numeral{margin-left:2px}

/* ---------- Ink line (self-drawing) — used sparingly now ---------- */
.inkline{display:block;width:min(320px,72%);height:12px;margin:.2em 0 1.1em;overflow:visible}
.inkline path{
  fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--ease);
}
.inkline.drawn path{stroke-dashoffset:0}
.cover__line path{stroke:var(--gold-leaf)}

/* small section rule replaces the repeated inkline on inner spreads */
.rule{display:block;width:64px;height:2px;border:0;margin:.6em 0 1.2em;
  background:linear-gradient(90deg,var(--gold-leaf),transparent)}
.rule--center{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,transparent,var(--gold-leaf),transparent)}

/* ===========================================================
   RIBBON SPINE (desktop nav) — a real book spine
   =========================================================== */
.spine{
  position:fixed;left:0;top:0;bottom:0;width:var(--spine-w);z-index:90;
  display:flex;flex-direction:column;align-items:center;
  padding:24px 0 28px;
  background:
    linear-gradient(90deg, rgba(46,77,107,.10), transparent 22%),
    linear-gradient(180deg,var(--paper-2),#e7ddcd);
  border-right:1px solid rgba(46,77,107,.22);
  box-shadow:inset -7px 0 14px -10px rgba(46,77,107,.5);
}
/* stitched binding line */
.spine__rule{position:absolute;left:50%;top:84px;bottom:34px;width:0;
  border-left:2px dashed rgba(46,77,107,.42);transform:translateX(-50%)}
/* vertical spine title */
.spine__brand{
  font-family:"Italiana",serif;letter-spacing:.42em;color:var(--ink);
  font-size:1.1rem;margin:6px 0 22px;writing-mode:vertical-rl;text-orientation:mixed;
  transform:rotate(180deg);padding:10px 0;
}
.spine__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;
  position:relative;z-index:2;flex:1;justify-content:center;width:100%}
.spine__tab{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;
  padding:8px 4px;min-height:44px;justify-content:center}
.spine__tab .num{font-family:"Spectral",serif;font-style:italic;font-size:1.45rem;color:var(--petrol);
  transition:color .25s}
.spine__tab .lbl{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-ink);
  transition:color .25s}
.spine__tab:hover .num,.spine__tab.is-active .num{color:var(--ink)}
.spine__tab:hover .lbl,.spine__tab.is-active .lbl{color:var(--ink)}
.spine__tab.is-active .num{font-weight:500}
/* the sliding ribbon bookmark — protrudes from the page edge */
.spine__bookmark{
  position:absolute;right:-1px;width:16px;height:46px;
  background:linear-gradient(180deg,#e7b8b4,var(--rose));
  z-index:3;border-radius:2px 0 0 2px;
  box-shadow:-3px 4px 10px -4px rgba(46,77,107,.5);
  transition:top .45s var(--ease);top:-80px;
}
.spine__bookmark::after{content:"";position:absolute;right:0;bottom:-9px;
  border:8px solid transparent;border-top-color:var(--rose);border-right:0;border-bottom:0}

/* ===========================================================
   DOCKED ORDER CARD (desktop right) — clipped appointment slip
   =========================================================== */
.ordercard{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);width:var(--oc-w);z-index:80;
  background:
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(46,77,107,.07) 27px, rgba(46,77,107,.07) 28px),
    var(--white);
  border:1px solid var(--border);border-radius:3px;
  padding:18px 18px 20px;box-shadow:var(--shadow);
}
/* perforated top edge */
.ordercard::before{content:"";position:absolute;left:0;right:0;top:-1px;height:8px;
  background:radial-gradient(circle at 6px -2px, transparent 5px, var(--white) 5px) 0 0/12px 8px repeat-x;
  filter:drop-shadow(0 1px 0 var(--border))}
/* rubber-stamp TERMIN mark */
.ordercard::after{content:"TERMIN";position:absolute;right:10px;top:8px;
  font-family:"Italiana",serif;letter-spacing:.18em;font-size:.62rem;
  color:#b06a64;border:1.5px solid #b06a64;border-radius:3px;padding:2px 6px;
  transform:rotate(-9deg);opacity:.7}
.ordercard__kicker{font-family:"Spectral",serif;font-style:italic;color:var(--ink);
  font-size:.94rem;margin:0 0 12px;border-bottom:1px solid var(--hair);padding-bottom:8px}
.ordercard__line{display:flex;justify-content:space-between;gap:8px;margin:.45em 0;font-size:.88rem}
.ordercard__line span{color:var(--muted-ink)}
.ordercard__line em{font-style:normal;color:var(--ink);font-weight:600}
.ordercard__line a{font-weight:600}
.ordercard__cta{display:block;text-align:center;margin:14px 0 10px;background:var(--ink);color:#fff;
  padding:12px;border-radius:var(--r);font-weight:600;letter-spacing:.03em;font-size:.9rem;
  transition:background .25s,transform .25s}
.ordercard__cta:hover{background:var(--petrol);color:#fff;transform:translateY(-1px)}
.ordercard__note{font-size:.78rem;color:var(--muted-ink);margin:0;text-align:center;
  font-family:"Spectral",serif;font-style:italic}

/* ---------- Mobile bottom bar (hidden on desktop) ---------- */
.mbar{display:none}

/* ===========================================================
   CARNET LAYOUT — true two-page spread
   =========================================================== */
.carnet{margin-left:var(--spine-w);margin-right:calc(var(--oc-w) + 36px)}
.spread{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(44px,6vw,86px) clamp(20px,4vw,56px);
  position:relative;
}
.spread + .spread{border-top:1px solid var(--hair)}

/* the open-book two-page grid: verso (margin/notes) | recto (content) */
.leaf{
  display:grid;
  grid-template-columns:34fr 66fr;
  column-gap:clamp(32px,5vw,72px);
  align-items:start;position:relative;
}
.leaf__verso,.leaf__recto{min-width:0}
/* center binding shadow down the gutter (sits in the column gap) */
.leaf::before{content:"";position:absolute;top:0;bottom:0;
  left:34%;width:2px;transform:translateX(-1px);
  background:linear-gradient(180deg,transparent,var(--gutter) 8%,var(--gutter) 92%,transparent);
  pointer-events:none}
.leaf::after{content:"";position:absolute;top:0;bottom:0;left:34%;width:16px;
  background:linear-gradient(90deg,rgba(46,77,107,.06),transparent);pointer-events:none}
.leaf__verso{text-align:right}
.leaf__recto{padding-left:clamp(8px,2vw,30px)}

/* page number in the outer margin */
.pageno{position:absolute;top:clamp(14px,2.4vw,30px);
  font-family:"Spectral",serif;font-style:italic;color:var(--gold);
  font-size:.82rem;letter-spacing:.12em}
.pageno--verso{left:clamp(20px,4vw,56px)}
.pageno--recto{right:clamp(20px,4vw,56px)}

/* verso marginalia */
.marginalia{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);
  font-size:.9rem;line-height:1.5;border-right:2px solid var(--rose);
  padding-right:14px;margin:0 0 1em}
.leaf__verso .eyebrow,.leaf__verso .numeral{margin-left:0}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===========================================================
   COVER — a bound notebook cover
   =========================================================== */
.cover{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,7vh,90px) clamp(18px,4vw,40px)}
.cover__board{
  position:relative;width:min(680px,100%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), transparent 40%),
    linear-gradient(180deg,#efe6d6,#e6dcc9);
  border-radius:6px;
  padding:clamp(34px,5vw,64px) clamp(26px,5vw,72px) clamp(40px,6vw,72px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -28px rgba(46,77,107,.55),
    -10px 0 22px -18px rgba(46,77,107,.5);
  text-align:center;overflow:hidden;
}
/* cloth weave texture */
.cover__board::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(0deg, rgba(46,77,107,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(46,77,107,.035) 0 1px, transparent 1px 3px)}
/* debossed border frame */
.cover__board::after{content:"";position:absolute;inset:clamp(14px,2.6vw,26px);pointer-events:none;
  border:1px solid rgba(46,77,107,.28);border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(46,77,107,.18) inset}
/* elastic closure band crossing the cover */
.cover__band{position:absolute;top:0;bottom:0;right:clamp(40px,8%,70px);width:18px;z-index:4;
  background:linear-gradient(90deg,rgba(46,77,107,.0),rgba(46,77,107,.28) 30%,rgba(46,77,107,.42) 50%,rgba(46,77,107,.28) 70%,rgba(46,77,107,.0));
  box-shadow:0 0 14px -4px rgba(46,77,107,.5)}
/* ribbon bookmark dangling from the top */
.cover__ribbon{position:absolute;top:0;left:clamp(38px,12%,90px);width:13px;height:120px;z-index:4;
  background:linear-gradient(180deg,#e7b8b4,var(--rose));box-shadow:2px 6px 12px -6px rgba(46,77,107,.5)}
.cover__ribbon::after{content:"";position:absolute;left:0;bottom:-10px;
  border:6.5px solid transparent;border-top-color:var(--rose);border-bottom:0}

.cover__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cover__stamp{width:clamp(120px,17vw,168px);height:auto;
  filter:drop-shadow(0 10px 22px rgba(46,77,107,.2));margin-bottom:12px}
.cover__est{font-family:"Spectral",serif;font-style:italic;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);font-size:.8rem;margin:0 0 12px}
/* embossed / letterpressed wordmark */
.cover__wordmark{font-family:"Italiana",serif;font-weight:400;color:var(--ink);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.04;
  font-size:clamp(2.1rem,6vw,4.2rem);margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 1px rgba(46,77,107,.22)}
.cover__wordmark span{color:var(--petrol)}
/* hand-written signature that draws on load */
.cover__sig{display:block;width:min(300px,72%);height:auto;margin:8px auto 2px}
.cover__sig path{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease) .25s}
.cover__sig.drawn path{stroke-dashoffset:0}
.cover__sub{font-family:"Spectral",serif;color:var(--fg);font-size:clamp(.95rem,1.6vw,1.12rem);
  margin:.7em 0 .2em;letter-spacing:.02em}
.cover__tagline{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);
  font-size:.92rem;margin:.3em 0 0;letter-spacing:.03em}
.cover__line{margin:1em auto 1.3em}

.index{width:min(460px,94%);text-align:left;border-top:1px solid var(--hair);padding-top:16px}
.index__head{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);
  letter-spacing:.04em;font-size:.94rem;margin:0 0 8px}
.index__row{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:10px;
  padding:11px 6px;min-height:44px;border-bottom:1px dashed var(--hair);color:var(--fg);
  transition:background .2s,padding-left .2s}
.index__row:hover{background:rgba(233,208,206,.3);padding-left:12px}
.index__row .rn{font-family:"Spectral",serif;font-style:italic;color:var(--gold);font-size:1.2rem}
.index__row .rt{font-family:"Italiana",serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);font-size:1rem}
.index__row .rd{font-size:.8rem;color:var(--muted-ink)}

.scrollcue{display:flex;flex-direction:column;align-items:center;gap:7px;
  margin:clamp(22px,4vh,40px) auto 0;color:var(--petrol);width:max-content}
.scrollcue__ribbon{width:2px;height:38px;background:linear-gradient(180deg,var(--rose),transparent);
  position:relative;animation:cueflow 2.4s var(--ease) infinite}
.scrollcue__ribbon::after{content:"";position:absolute;left:-4px;bottom:0;border:5px solid transparent;
  border-top-color:var(--rose);border-bottom:0}
.scrollcue__txt{font-family:"Spectral",serif;font-style:italic;font-size:.84rem;letter-spacing:.1em}
@keyframes cueflow{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

/* ===========================================================
   LE MOT — recto/verso leaf
   =========================================================== */
.mot .leaf{align-items:center}
.pull{font-family:"Spectral",serif;font-style:italic;font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--ink);line-height:1.45;border-left:3px solid var(--rose);
  margin:.2em 0 1em;padding:.2em 0 .2em 18px;max-width:42ch}
.notes{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:8px}
.notes li{display:flex;gap:10px;align-items:baseline;font-size:.95rem}
.notes li span{color:var(--gold);font-weight:700}
.values{font-family:"Italiana",serif;text-transform:uppercase;letter-spacing:.16em;color:var(--petrol);
  font-size:.92rem;margin:0}
.values i{color:var(--gold);font-style:normal;padding:0 4px}

/* ---------- Mounted plates (photos) — varied mounting ---------- */
.plate{position:relative;margin:0;background:var(--white);padding:10px 10px 0;
  border:1px solid var(--border);box-shadow:var(--shadow)}
.plate img{width:100%}
.plate figcaption{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);
  font-size:.88rem;text-align:center;padding:8px 4px 10px}

/* mounting style: tape */
.plate--tape::before,.plate--tape::after{content:"";position:absolute;width:72px;height:24px;
  background:rgba(201,168,106,.28);border:1px solid rgba(201,168,106,.4);
  box-shadow:0 1px 3px -1px rgba(46,77,107,.3);z-index:3}
.plate--tape::before{left:10px;top:-12px;transform:rotate(-7deg)}
.plate--tape::after{right:10px;top:-12px;transform:rotate(6deg)}

/* mounting style: photo corners */
.plate--corners .corner{position:absolute;width:26px;height:26px;z-index:3;
  background:linear-gradient(135deg,rgba(46,77,107,.55),rgba(46,77,107,.2));
  clip-path:polygon(0 0,100% 0,0 100%)}
.plate--corners .corner.tr{right:0;top:0;transform:rotate(90deg)}
.plate--corners .corner.bl{left:0;bottom:0;transform:rotate(-90deg)}
.plate--corners .corner.br{right:0;bottom:0;transform:rotate(180deg)}
.plate--corners .corner.tl{left:0;top:0}

/* mounting style: handwritten margin caption */
.plate--note{transform:rotate(-.6deg)}
.plate--note figcaption{font-size:.92rem;color:var(--ink)}

.plate--bleed img{aspect-ratio:4/5;object-fit:cover}

/* ===========================================================
   ATELIER spreads
   =========================================================== */
.atelier__head{margin-bottom:clamp(18px,2.6vw,30px)}
.atelier__head .eyebrow{margin-top:.1em}
.atelier__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center;
  margin-bottom:clamp(28px,4vw,48px)}
.atelier__copy .margin-tag{font-family:"Spectral",serif;font-style:italic;font-size:.9rem;
  color:var(--petrol);border-top:1px solid var(--hair);padding-top:10px;margin-top:6px;max-width:44ch}

/* recto content sits to the right of the gutter; verso carries the chapter number */
.atelier .leaf__verso .numeral{display:block;line-height:.85;margin:0 0 .15em}
.atelier .leaf__verso .eyebrow{color:var(--ink)}

/* ---------- Ritual (Hauptwerk) — the centerpiece, breaks the grid ---------- */
.atelier--ritual{
  background:linear-gradient(180deg,rgba(155,143,168,.12),transparent 70%);
  padding-top:clamp(60px,9vw,130px);padding-bottom:clamp(60px,9vw,130px);
}
.ritual{max-width:var(--maxw);margin:0 auto;text-align:center}
.ritual__kicker{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);
  letter-spacing:.04em;font-size:1rem;margin:0 0 .2em}
.ritual__title{font-family:"Italiana",serif;font-weight:400;color:var(--ink);
  text-transform:uppercase;letter-spacing:.16em;line-height:1.04;
  font-size:clamp(2.4rem,6vw,4.6rem);margin:.1em 0 .2em}
.ritual__hero{margin:clamp(28px,4vw,52px) auto;background:var(--white);padding:14px;
  border:1px solid var(--border);box-shadow:var(--shadow);max-width:980px}
.ritual__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ritual__hero figcaption{font-family:"Spectral",serif;font-style:italic;color:var(--ink);
  text-align:center;padding:12px 4px 4px;letter-spacing:.06em;font-size:1rem}
.ritual__lede{font-family:"Spectral",serif;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.6;
  color:var(--fg);max-width:54ch;margin:0 auto 1.2em}
.ritual__price{font-family:"Italiana",serif;color:var(--ink);font-size:clamp(1.6rem,3.2vw,2.3rem);
  letter-spacing:.08em;margin:.4em 0}
.ritual__price span{font-family:"Mulish";font-size:.92rem;color:var(--muted-ink);letter-spacing:0}
.hint--silent{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);margin:.2em 0 0}
.hint{font-size:.95rem}
.ritual__meta{display:flex;gap:clamp(20px,4vw,52px);justify-content:center;flex-wrap:wrap;
  margin-top:clamp(8px,2vw,16px)}
.seal{width:128px;height:128px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f0d8d6,#d4a8a4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ink);box-shadow:inset 0 0 0 4px rgba(255,255,255,.45),var(--shadow);
  transform:rotate(-8deg);flex:0 0 auto}
.seal__pct{font-family:"Italiana",serif;font-size:1.8rem;letter-spacing:.04em}
.seal__sub{font-family:"Spectral",serif;font-style:italic;font-size:.78rem;margin-top:3px}
.seal__mark{font-family:"Italiana",serif;font-size:.7rem;letter-spacing:.18em;margin-top:4px;color:var(--petrol)}

/* ---------- Mariée lookbook ---------- */
.lookbook{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1em}
.plate--mini{padding:7px 7px 0}
.plate--mini:nth-child(1){transform:rotate(-1.5deg)}
.plate--mini:nth-child(2){transform:rotate(.8deg)}
.plate--mini:nth-child(3){transform:rotate(-.6deg)}
.plate--mini img{aspect-ratio:4/5;object-fit:cover}
.plate--mini figcaption{font-size:.78rem;padding:6px 2px 8px}

/* ===========================================================
   HAIR-SWATCH RING (price lists) — colourist's tool
   =========================================================== */
.prices{margin-top:clamp(16px,2.6vw,28px)}
.fan__title{font-family:"Spectral",serif;font-style:italic;color:var(--ink);margin:0 0 6px;font-size:1rem}
.fan__hint{font-size:.86rem;color:var(--muted-ink);margin:0 0 18px;max-width:52ch}

/* the ring: slim hair-tone strips bound at the bottom-left by a rivet */
.ring{position:relative;padding:6px 0 0 4px}
.ring__strips{position:relative;display:flex;gap:0;align-items:flex-end;
  min-height:230px;padding-left:6px;transition:none}
.strip{
  position:relative;width:88px;min-height:208px;flex:0 0 auto;
  border:1px solid rgba(46,77,107,.18);border-radius:5px 5px 7px 7px;
  background:var(--white);
  margin-left:-58px;transform-origin:left bottom;transform:rotate(0deg);
  box-shadow:0 10px 22px -16px rgba(46,77,107,.6);
  transition:transform .55s var(--ease),margin .55s var(--ease),box-shadow .3s;
  cursor:pointer;text-align:left;padding:0;font-family:inherit;color:inherit;
  display:flex;flex-direction:column;overflow:hidden;
}
.strip:first-child{margin-left:6px}
/* the rivet binding all strips at the lower-left corner */
.ring::after{content:"";position:absolute;left:9px;bottom:8px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9c08a,#8a6f3a);
  box-shadow:0 2px 5px -1px rgba(46,77,107,.6), inset 0 0 0 2px rgba(255,255,255,.35);z-index:20}
/* realistic hair-tone gradient swatch */
.strip__tone{flex:1;min-height:120px;border-radius:4px 4px 0 0;margin:4px 4px 0;
  box-shadow:inset 0 0 14px -4px rgba(0,0,0,.35);
  background-size:200% 100%;background-position:30% 0}
.strip__meta{padding:9px 9px 12px}
.strip__len{display:flex;align-items:center;gap:6px;
  font-family:"Italiana",serif;font-size:1.02rem;letter-spacing:.06em;color:var(--ink)}
.strip__len svg{flex:0 0 auto}
.strip__lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-ink);
  margin:4px 0 0}
.strip__hint{font-family:"Spectral",serif;font-style:italic;font-size:.8rem;color:var(--petrol);margin:5px 0 0}
/* hair tones: ash / beige-blonde / copper / brunette */
.strip[data-tier="kurz"] .strip__tone{background-image:linear-gradient(180deg,#cfc7bd,#9a9389,#6f6a63)}
.strip[data-tier="mittel"] .strip__tone{background-image:linear-gradient(180deg,#e7d3a9,#cdb074,#9c8049)}
.strip[data-tier="lang"] .strip__tone{background-image:linear-gradient(180deg,#c98a55,#a85f30,#6e3a1c)}
.strip[data-tier="extra"] .strip__tone{background-image:linear-gradient(180deg,#5a4533,#3d2c1e,#241710)}
.strip:hover,.strip:focus-visible{box-shadow:0 16px 30px -14px rgba(46,77,107,.6);border-color:var(--gold)}

/* fanned-open state (set by JS / reduced motion) */
.ring.is-open .strip{margin-left:16px}
.ring.is-open .strip:first-child{margin-left:6px}
.ring.is-open .strip:nth-child(1){transform:rotate(-2deg)}
.ring.is-open .strip:nth-child(2){transform:rotate(-.6deg)}
.ring.is-open .strip:nth-child(3){transform:rotate(.7deg)}
.ring.is-open .strip:nth-child(4){transform:rotate(2deg)}

/* a strip expanded IN PLACE into its price column */
.strip.is-expanded{width:300px;cursor:default;border-color:var(--gold);
  box-shadow:0 22px 40px -18px rgba(46,77,107,.7)}
.ring.is-open .strip.is-expanded{transform:rotate(0deg)!important}
.strip__col{display:none;padding:4px 12px 14px;animation:fadecol .45s var(--ease)}
.strip.is-expanded .strip__tone{min-height:54px}
.strip.is-expanded .strip__col{display:block}
.strip.is-expanded .strip__hint{display:none}
@keyframes fadecol{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.strip__col .pr-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--hair);font-size:.84rem}
.strip__col .pr-row:last-child{border-bottom:0}
.strip__col .pr-row .nm{color:var(--fg);line-height:1.25}
.strip__col .pr-row .pr{font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.strip__colfoot{font-family:"Spectral",serif;font-style:italic;font-size:.78rem;color:var(--petrol);
  margin:8px 0 0}
.strip__close{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  background:none;border:1px solid var(--hair);border-radius:var(--r);
  padding:7px 12px;min-height:36px;font-size:.78rem;color:var(--ink);cursor:pointer;font-family:inherit}
.strip__close:hover{border-color:var(--gold)}

/* single-column lists (Head Spa / Herren / Specials) */
.pricelist{background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:6px 6px}
.pricelist__row{display:flex;justify-content:space-between;gap:14px;padding:11px 12px;
  border-bottom:1px solid var(--hair);font-size:.94rem}
.pricelist__row:last-child{border-bottom:0}
.pricelist__row .nm{color:var(--fg)}
.pricelist__row .pr{font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pricelist__foot{font-family:"Spectral",serif;font-style:italic;font-size:.84rem;color:var(--petrol);
  padding:10px 12px 4px}

/* ===========================================================
   GALERIE
   =========================================================== */
.planches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.plate--plate{padding:9px 9px 0}
.plate--plate:nth-child(3n+1){transform:rotate(-1.1deg)}
.plate--plate:nth-child(3n+2){transform:rotate(.8deg)}
.plate--plate:nth-child(3n){transform:rotate(-.4deg)}
.plate--plate img{aspect-ratio:4/5;object-fit:cover}

.proddrop{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,4vw,46px);
  padding-top:24px;border-top:1px solid var(--hair)}
.prod{margin:0;text-align:center}
.prod img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border);border-radius:var(--r)}
.prod figcaption{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);font-size:.86rem;
  margin-top:8px}

/* ===========================================================
   COMPTOIR
   =========================================================== */
.comptoir__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px)}
.comptoir__card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px 22px}
.comptoir__card h3{font-family:"Italiana",serif;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);font-size:1.15rem;margin:0 0 12px;font-weight:400}
.comptoir__card p{margin:.4em 0;font-size:.94rem}
.comptoir__card a{display:inline-block;padding:3px 0;min-height:30px}
.addr{line-height:1.5}
.muted{color:var(--muted-ink);font-size:.86rem}
.small{font-size:.82rem}
.hours{margin:0}
.hours div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair)}
.hours dt{font-weight:600;color:var(--ink)}
.hours dd{margin:0;text-align:right;font-size:.9rem;color:var(--fg)}
.comptoir__cta{display:block!important;text-align:center;background:var(--ink);color:#fff;padding:13px;
  border-radius:var(--r);font-weight:600;margin:4px 0 14px;transition:background .25s,transform .25s}
.comptoir__cta:hover{background:var(--petrol);color:#fff;transform:translateY(-1px)}
.link-out{font-family:"Spectral",serif;font-style:italic;font-weight:600;line-height:1.6;
  display:inline-block;padding:8px 0;min-height:40px}

/* ===========================================================
   COLOPHON
   =========================================================== */
.colophon{margin-left:var(--spine-w);margin-right:calc(var(--oc-w) + 36px);
  text-align:center;padding:clamp(40px,6vw,72px) 24px clamp(90px,9vw,72px);border-top:1px solid var(--hair)}
.colophon__line{margin:0 auto 18px}
.colophon__mark{font-family:"Spectral",serif;font-style:italic;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);font-size:.8rem;margin:0 0 14px}
.colophon__name{font-family:"Italiana",serif;letter-spacing:.06em;color:var(--ink);margin:.2em 0}
.colophon__meta{font-size:.88rem;color:var(--muted-ink);margin:.3em 0}
.colophon__meta a{padding:4px 2px;display:inline-block}
.colophon__links{font-size:.86rem;color:var(--muted-ink);margin:.6em 0}
.colophon__links a{padding:6px 4px;display:inline-block;min-height:30px}
.colophon__fin{font-family:"Spectral",serif;font-style:italic;color:var(--petrol);margin-top:1em;font-size:.92rem}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1100px){
  :root{--oc-w:0px}
  .ordercard{display:none}
  .carnet,.colophon{margin-right:0}
}
@media (max-width:920px){
  /* collapse the two-page leaf into a single flowing page */
  .leaf{grid-template-columns:1fr;gap:0}
  .leaf::before,.leaf::after{display:none}
  .leaf__verso{text-align:left;padding-right:0;margin-bottom:1.4em}
  .leaf__recto{padding-left:0}
  .marginalia{border-right:0;border-left:2px solid var(--rose);padding-right:0;padding-left:14px;text-align:left}
  .pageno{position:static;display:inline-block;margin-bottom:.4em}
  .pageno--verso,.pageno--recto{left:auto;right:auto}
  .atelier .leaf__verso .numeral{display:inline-block}
}
@media (max-width:860px){
  :root{--spine-w:0px}
  .carnet,.colophon{margin-left:0}
  /* spine -> top thumb-index bar (fore-edge tabs) */
  .spine{flex-direction:row;left:0;right:0;bottom:auto;width:auto;height:56px;
    padding:0 8px 0 10px;align-items:stretch;justify-content:flex-start;gap:0;
    border-right:0;border-bottom:1px solid rgba(46,77,107,.22);overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;box-shadow:none;
    background:linear-gradient(180deg,var(--paper-2),#e7ddcd);
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .spine::-webkit-scrollbar{display:none}
  .spine__rule{display:none}
  .spine__bookmark{display:none}
  .spine__brand{margin:0 10px 0 2px;font-size:.92rem;flex:0 0 auto;writing-mode:horizontal-tb;
    transform:none;letter-spacing:.18em;padding:0;align-self:center}
  .spine__list{flex-direction:row;gap:0;flex:0 0 auto;justify-content:flex-start;align-items:stretch}
  /* cut tabs on the fore-edge of a notebook */
  .spine__tab{flex-direction:column;gap:1px;padding:8px 12px 0;min-height:56px;white-space:nowrap;
    justify-content:flex-start;align-items:center;
    background:var(--white);border:1px solid var(--hair);border-bottom:0;
    border-radius:7px 7px 0 0;margin-right:5px;margin-top:8px}
  .spine__tab.is-active{background:var(--rose);border-color:var(--rose);margin-top:4px}
  .spine__tab .num{font-size:1.05rem}
  .spine__tab .lbl{font-size:.72rem;color:var(--muted-ink)}
  .cover{padding-top:78px;min-height:auto;padding-bottom:52px}
  body{padding-top:0}
  main{padding-top:56px}
  /* mobile bottom bar */
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:var(--white);border-top:1px solid var(--border);
    box-shadow:0 -8px 24px -16px rgba(46,77,107,.5);
    padding:9px 12px env(safe-area-inset-bottom,9px);gap:10px}
  .mbar__call,.mbar__book{flex:1;text-align:center;padding:13px;border-radius:var(--r);font-weight:600;
    letter-spacing:.03em;min-height:48px;display:flex;align-items:center;justify-content:center}
  .mbar__call{border:1px solid var(--ink);color:var(--ink)}
  .mbar__book{background:var(--ink);color:#fff}
  .colophon{padding-bottom:92px}
}
@media (max-width:760px){
  .atelier__body{grid-template-columns:1fr;gap:26px}
  .atelier--ritual .ritual__meta{gap:24px}
  .planches{grid-template-columns:repeat(2,1fr)}
  .proddrop{grid-template-columns:1fr}
  .comptoir__grid{grid-template-columns:1fr}
  .lookbook{grid-template-columns:repeat(3,1fr)}
  .mot__photo{max-width:340px;margin:0 auto}
}
/* ring: stack strips vertically on narrow screens (no negative-margin overflow) */
@media (max-width:640px){
  .ring__strips{flex-direction:column;padding-left:0;min-height:0;gap:10px;align-items:stretch}
  .ring::after{display:none}
  .strip{width:100%!important;margin-left:0!important;min-height:0;flex-direction:row;align-items:stretch;
    transform:none!important}
  .strip:first-child{margin-left:0}
  .strip__tone{width:64px;flex:0 0 auto;min-height:auto;margin:6px 0 6px 6px;border-radius:4px}
  .strip__meta{flex:1}
  .strip.is-expanded{flex-direction:column}
  .strip.is-expanded .strip__tone{width:auto;min-height:40px;margin:6px 6px 0}
  .ring.is-open .strip,.ring.is-open .strip:first-child{margin-left:0}
}
@media (max-width:480px){
  .planches{grid-template-columns:1fr}
  .lookbook{grid-template-columns:1fr;gap:18px}
  .index__row{grid-template-columns:28px 1fr;gap:8px}
  .index__row .rd{grid-column:2;font-size:.78rem}
  .cover__board{padding-left:22px;padding-right:22px}
  .cover__band{right:24px}
}

/* ===========================================================
   MOTION GUARD
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .inkline path,.cover__sig path{stroke-dashoffset:0!important}
  .ring .strip{margin-left:16px;transform:none}
  .ring .strip:first-child{margin-left:6px}
}
html.noanim *,html.noanim *::before,html.noanim *::after{
  animation:none!important;transition:none!important}
html.noanim .reveal{opacity:1!important;transform:none!important}
html.noanim .inkline path,html.noanim .cover__sig path{stroke-dashoffset:0!important}
html.noanim .ring .strip{margin-left:16px;transform:none}
html.noanim .ring .strip:first-child{margin-left:6px}