/* HATHOR — a jeweller at Bagatelle. Bellefair (display) + Albert Sans. */
@font-face{font-family:Bellefair;src:url(fonts/bellefair-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Bellefair;src:url(fonts/bellefair-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";src:url(fonts/albertsans-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(fonts/albertsans-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0b0907; --ink-2:#14100c;
  --text:#efe6d6; --mute:rgba(239,230,214,.62); --line:rgba(239,230,214,.16);
  --gold:#d9b46c; --gold-deep:#a97c37;
  --turq:#4dbcae;   /* Hathor, Lady of Turquoise: the one cool note, used sparingly */
  --display:Bellefair,"Cormorant Garamond",Georgia,serif;
  --sans:"Albert Sans",system-ui,sans-serif;
  --gut:clamp(1.1rem,4vw,4.5rem);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font:300 1rem/1.62 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:400;margin:0;line-height:1;letter-spacing:.01em}
h1 em,h2 em{font-style:normal;color:var(--gold)}
p{margin:0}
.lang-en .fr,.lang-fr .en{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{display:flex;align-items:center;gap:.8rem;font:500 .7rem/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
/* the chapter number sits in a cartouche, the oval Egypt wrote royal names in */
.no{font-weight:500;font-size:.62rem;letter-spacing:.14em;color:var(--turq);border:1px solid rgba(77,188,174,.55);border-radius:999px;padding:.32rem .62rem .3rem}

/* ---------- THE STAGE: fixed behind the page, below every section ---------- */
.stage{position:fixed;inset:0;z-index:-1;pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:auto;touch-action:pan-y;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(42vmax 34vmax at var(--gx,64%) 46%,rgba(217,180,108,.10),rgba(217,180,108,.03) 45%,transparent 70%)}
.no-gl{position:fixed;left:50%;top:40%;transform:translateX(-50%);z-index:0;max-width:22rem;text-align:center;color:var(--mute);font-size:.9rem}
/* the canvas is covered by solid sections near the end; let them breathe */
.stage.parked{visibility:hidden}
/* the ring sits UNDER the page (z-index:-1), so the page itself must let
   touches fall through to it: body passes them on, and only the things you
   can actually press take them back. (Without this, main caught every drag
   and the ring could only turn by itself — found on the iPhone, 21 Oct.) */
body{pointer-events:none}
.nav,.visit,.foot,.sn-back,.ch .copy,.no-gl{pointer-events:auto}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:1.4rem;
  padding:calc(.9rem + env(safe-area-inset-top)) var(--gut) .9rem;transition:background .4s}
.nav.solid{background:linear-gradient(rgba(11,9,7,.94) 65%,rgba(11,9,7,0))}
.mark{display:flex;align-items:center;gap:.75rem;text-decoration:none;margin-right:auto}
.mark svg{width:2.3rem;height:2.3rem;fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linecap:round}
.mark span{font:400 1.18rem/1 var(--display);letter-spacing:.46em;display:flex;flex-direction:column;gap:.34rem}
.mark small{font:500 .55rem/1 var(--sans);letter-spacing:.34em;color:var(--mute);text-transform:uppercase}
.links{display:flex;gap:.2rem}
.links a{display:flex;align-items:baseline;gap:.45rem;padding:.55rem .8rem;text-decoration:none;border-radius:999px;
  font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:color .3s,background .3s}
.links a:hover,.links a.on{color:var(--text);background:rgba(239,230,214,.07)}
.links i{font-style:normal;color:var(--gold);font-size:.56rem}
.lang{display:flex;gap:.1rem;align-items:center;border:1px solid var(--line);border-radius:999px;padding:.18rem;position:relative}
.lang input{position:absolute;opacity:0;width:0;height:0}
.lang label{position:relative;font:500 .66rem/1 var(--sans);letter-spacing:.14em;padding:.42rem .62rem;border-radius:999px;cursor:pointer;opacity:.55;transition:opacity .3s,background .3s}
.lang label::after{content:"";position:absolute;inset:-.55rem -.35rem}
.lang input:checked + label{opacity:1;background:rgba(239,230,220,.14)}
.lang input:focus-visible + label{outline:2px solid var(--turq);outline-offset:2px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.5rem;text-decoration:none;border-radius:999px;
  font:500 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--gold);background:linear-gradient(135deg,#e6c47f,#b98b45);color:#170f05;transition:filter .3s,transform .3s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{background:rgba(11,9,7,.35);color:var(--text);border-color:var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--gold)}
.btn:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- CHAPTERS: copy on the left, the ring to the right ---------- */
main{display:block}
.ch{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:7rem var(--gut) 5rem;pointer-events:none}
.ch .copy{pointer-events:auto;width:min(31rem,40vw);display:grid;gap:1.25rem}
.ch h2{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.ch .copy > p:not(.kicker):not(.say):not(.scale-cap):not(.carry){color:var(--mute);font-size:1.02rem;max-width:30rem}

.hero .copy{gap:1.5rem}
.hero h1{font-size:clamp(3.6rem,8.4vw,7.6rem);line-height:.92}
.hero .lede{color:var(--mute);font-size:1.08rem;max-width:27rem}
.hero-word{position:absolute;z-index:-2;right:-2vw;top:50%;transform:translateY(-50%);margin:0;pointer-events:none;
  font:400 clamp(7rem,21vw,22rem)/.8 var(--display);letter-spacing:.06em;color:transparent;
  -webkit-text-stroke:1px rgba(217,180,108,.13)}
.drag-hint{position:absolute;right:var(--gut);bottom:2.2rem;display:flex;align-items:center;gap:.7rem;
  font:500 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);transition:opacity .6s}
.drag-hint svg{width:2.4rem;fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;animation:sway 2.8s ease-in-out infinite}
.drag-hint.gone{opacity:0}
@keyframes sway{50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.drag-hint svg{animation:none}}

/* ---------- CHIPS ---------- */
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips label{position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:rgba(11,9,7,.45);font:500 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);transition:color .25s,border-color .25s,background .25s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.chips label:hover{color:var(--text);border-color:rgba(217,180,108,.5)}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label:has(input:checked){color:var(--text);border-color:var(--gold);background:rgba(217,180,108,.16)}
.chips label:has(input:focus-visible){outline:2px solid var(--turq);outline-offset:2px}
.chips-scale label{min-width:2.6rem;justify-content:center;padding:.55rem .7rem;font-family:var(--display);font-size:1.15rem;letter-spacing:0;text-transform:none}
.scale-cap{display:flex;justify-content:space-between;max-width:24rem;font:500 .6rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-top:-.4rem}
.say{min-height:3.2em;font-size:.95rem;color:var(--text);border-left:1px solid var(--turq);padding-left:.9rem}
.say b{font-weight:500;color:var(--gold)}

/* the light-path drawing (cut) */
.rays{width:100%;max-width:21rem;height:auto;overflow:visible}
.rays .gem-line{fill:rgba(239,230,214,.03);stroke:rgba(239,230,214,.42);stroke-width:1;stroke-linejoin:round}
.rays .ray{fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.4s cubic-bezier(.3,.6,.2,1) forwards}
.rays .ray.in{stroke:var(--gold)}
.rays .ray.lost{stroke:rgba(239,230,214,.32);stroke-dasharray:3 4;animation:none}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.rays .ray{animation:none;stroke-dashoffset:0}}

/* the carat circles, drawn to one scale */
.ct-scale{display:flex;align-items:flex-end;gap:1.1rem;min-height:5.2rem}
.ct-scale span{display:grid;justify-items:center;gap:.5rem;font:500 .6rem/1 var(--sans);letter-spacing:.14em;color:var(--mute);transition:color .3s}
.ct-scale i{display:block;width:calc(var(--mm) * var(--ck,.52rem));height:calc(var(--mm) * var(--ck,.52rem));border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.22),rgba(255,255,255,.02) 60%);transition:border-color .3s,box-shadow .3s}
.ct-scale span.on{color:var(--text)}
.ct-scale span.on i{border-color:var(--gold);box-shadow:0 0 18px rgba(217,180,108,.35)}

/* ---------- CREATE ---------- */
.create{padding-top:5.5rem;padding-bottom:5.5rem}
.create .panel{width:min(34rem,44vw);gap:.85rem;padding:1.5rem 1.6rem;border:1px solid var(--line);border-radius:1.2rem;
  background:rgba(11,9,7,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.create h2{font-size:clamp(1.9rem,2.8vw,2.6rem)}
.create .chips label{min-height:2.35rem;padding-top:.45rem;padding-bottom:.45rem}
.carry{color:var(--mute);font-size:.95rem}
.row{display:grid;gap:.55rem}
.row-2{grid-template-columns:1fr auto;gap:.8rem}
.lbl{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font:500 .64rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.ct-out{font:400 1.2rem/1 var(--display);letter-spacing:0;color:var(--text);text-transform:none}
.chips-swatch label{padding-left:.6rem}
.sw{width:1.15rem;height:1.15rem;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sw-yellow{background:radial-gradient(circle at 35% 30%,#fff1c4,#e2b25a 45%,#8f6223)}
.sw-rose{background:radial-gradient(circle at 35% 30%,#ffe2d4,#e1a081 45%,#8e5440)}
.sw-white{background:radial-gradient(circle at 35% 30%,#fff,#d9dde2 45%,#80868e)}
.sw-diamond{background:conic-gradient(from 20deg,#fff,#cfe6ff,#fff,#ffe9f4,#fff,#e8ffef,#fff)}
.sw-sapphire{background:radial-gradient(circle at 35% 30%,#a9c4ff,#2349c4 50%,#0b1a5c)}
.sw-emerald{background:radial-gradient(circle at 35% 30%,#b9ffd6,#119a55 50%,#04442a)}
.sw-ruby{background:radial-gradient(circle at 35% 30%,#ffb5c1,#c4102f 50%,#5b0414)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:2.2rem;background:transparent;cursor:pointer}
.range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--gold) var(--p,26%),var(--line) var(--p,26%))}
.range::-moz-range-track{height:2px;background:var(--line)}
.range::-moz-range-progress{height:2px;background:var(--gold)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:1.3rem;height:1.3rem;margin-top:-.6rem;border-radius:50%;background:#f3e3bf;border:3px solid var(--gold-deep);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.range::-moz-range-thumb{width:1.1rem;height:1.1rem;border-radius:50%;background:#f3e3bf;border:3px solid var(--gold-deep)}
.range:focus-visible{outline:2px solid var(--turq);outline-offset:4px;border-radius:4px}
.field{display:grid;gap:.5rem}
.field input,.field select{font:400 1.05rem/1.2 var(--display);color:var(--text);background:rgba(239,230,214,.05);border:1px solid var(--line);border-radius:.7rem;padding:.75rem .9rem;width:100%}
.field input::placeholder{color:rgba(239,230,214,.32)}
.field input:focus,.field select:focus{outline:none;border-color:var(--turq)}
.field select{appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 1rem) 55%,calc(100% - .7rem) 55%;background-size:.32rem .32rem;background-repeat:no-repeat}
.field select option{background:var(--ink);color:var(--text)}
.field-s{width:7.4rem}
.sum{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1rem}
.sum-line{font-size:.88rem;color:var(--mute);max-width:19rem}
.price{display:grid;justify-items:end;gap:.3rem;white-space:nowrap}
.price small{font:500 .58rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.price b{font:400 1.9rem/1 var(--display);color:var(--gold);font-weight:400}

/* ---------- VISIT (solid ground) ---------- */
.visit{background:var(--ink-2);border-top:1px solid var(--line);padding:clamp(5rem,12vh,8rem) var(--gut)}
.visit-in{max-width:72rem;margin:0 auto;display:grid;gap:2.4rem}
.visit h2{font-size:clamp(2.6rem,5vw,4.4rem)}
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.visit-grid > div{display:grid;gap:1.2rem;justify-items:start}
.visit-grid > div > p:not(.big){color:var(--mute)}
.big{font:400 clamp(1.6rem,2.6vw,2.2rem)/1.15 var(--display)}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 2.2rem}
.svc li{display:grid;gap:.4rem;color:var(--mute);font-size:.95rem;border-top:1px solid var(--line);padding-top:1rem}
.svc b{font:400 1.25rem/1.15 var(--display);color:var(--text)}
.myth{max-width:40rem;font:400 1.3rem/1.45 var(--display);color:var(--text);border-left:1px solid var(--turq);padding-left:1.2rem}

/* ---------- FOOT ---------- */
.foot{background:var(--ink-2);padding:clamp(3rem,8vh,5rem) var(--gut) calc(5.5rem + env(safe-area-inset-bottom));display:grid;gap:1.6rem;justify-items:center;text-align:center;border-top:1px solid var(--line)}
.foot-word{font:400 clamp(4rem,15vw,12rem)/.85 var(--display);letter-spacing:.14em;color:transparent;-webkit-text-stroke:1px rgba(217,180,108,.55);margin:0}
.note{max-width:40rem;color:var(--mute);font-size:.95rem}
.legal{font:500 .6rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* ---------- house pill ---------- */
.sn-back{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:calc(1rem + env(safe-area-inset-bottom));z-index:50;
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem .5rem .72rem;border-radius:999px;
  background:rgba(11,9,7,.72);color:var(--text);font:500 .68rem/1 "Albert Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 22px rgba(0,0,0,.4);
  transition:background .25s,transform .25s;text-decoration:none}
.sn-back svg{flex:none}
.sn-back:hover{background:rgba(11,9,7,.92);transform:translateY(-1px)}
.sn-back:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
/* 35px of ink, 44 of target — a pseudo-element, never real padding */
.sn-back::before{content:"";position:absolute;inset:-6px -12px}
@media print{.sn-back{display:none}}

/* ---------- smaller screens: the ring rides the top, the words the bottom ---------- */
@media (max-width:1080px){ .links{display:none} }
@media (max-width:820px){
  .stage-glow{background:radial-gradient(70vmax 40vmax at 50% 28%,rgba(217,180,108,.11),transparent 65%)}
  /* each chapter opens on the ring alone; the words then rise over the
     bottom of the screen with the choices FIRST, so you tap a chip and
     see the stone change above it before you ever reach the long read */
  .ch{align-items:flex-start;padding:52svh 0 calc(4.6rem + env(safe-area-inset-bottom))}
  .ch .copy{width:100%;padding:2.6rem var(--gut) 0;gap:1rem;
    background:linear-gradient(to bottom,rgba(11,9,7,0),rgba(11,9,7,.82) 2.6rem,rgba(11,9,7,.95) 9rem)}
  .ch .copy > .kicker{order:1} .ch .copy > h2{order:2} .ch .copy > .chips{order:3}
  .ch .copy > .scale-cap{order:4} .ch .copy > .ct-scale{order:4} .ch .copy > .say{order:5}
  .ch .copy > .rays{order:6} .ch .copy > p:not(.kicker):not(.say):not(.scale-cap){order:7}
  .hero{padding-top:48svh}
  .ch h2{font-size:clamp(2.1rem,9vw,2.8rem)}
  .ch .copy > p:not(.kicker):not(.say):not(.scale-cap):not(.carry){font-size:.95rem}
  .hero .copy{background:linear-gradient(to top,rgba(11,9,7,.92) 55%,rgba(11,9,7,0))}
  .hero h1{font-size:clamp(3.2rem,15vw,4.6rem)}
  /* sized to the screen: a wider word widened the whole layout viewport to 449px */
  .hero-word{top:24%;left:0;right:0;transform:none;text-align:center;font-size:20.5vw;letter-spacing:.02em}
  .ch.hero .copy > *,.ch.create .copy > *{order:0 !important}   /* the reorder is for the four C chapters only */
  /* both hero buttons on one row, so the back pill sits clear below them */
  .hero{padding-top:40svh}
  .hero h1{font-size:clamp(2.9rem,13vw,4.2rem)}
  .hero .lede{font-size:.92rem}
  .hero .ctas{flex-wrap:nowrap;gap:.5rem}
  .hero .btn{padding:.9rem .85rem;font-size:.6rem;letter-spacing:.11em;white-space:nowrap;gap:.45rem}
  .drag-hint{left:50%;right:auto;transform:translateX(-50%);top:calc(5rem + env(safe-area-inset-top));bottom:auto;white-space:nowrap}
  .rays{max-width:17rem}
  .ct-scale{--ck:.4rem;gap:.8rem}
  .chips-scale{gap:.3rem}
  .chips-scale label{min-width:2.25rem;padding:.5rem .4rem}
  .chips label{min-height:2.75rem}
  /* the designer: a bottom sheet that holds while the ring stays in view above it */
  .create{min-height:170svh;align-items:flex-end;padding:0}
  /* the sheet stops above the back pill, so the pill never sits on a control */
  .create .panel{position:sticky;bottom:calc(3.6rem + env(safe-area-inset-bottom));width:calc(100% - 1.2rem);margin:0 .6rem;max-height:54svh;overflow:auto;overscroll-behavior:contain;
    border-radius:1.2rem;padding:1.3rem 1.1rem 1.4rem;background:rgba(11,9,7,.92)}
  .create{padding-bottom:calc(3.6rem + env(safe-area-inset-bottom))}
  .row-2{grid-template-columns:1fr}
  .field-s{width:100%}
  .sum{flex-direction:column;align-items:flex-start}
  .price{justify-items:start}
  .visit-grid,.svc{grid-template-columns:1fr}
}