:root{
  --sky:#A4D7E1;      /* light blue */
  --paper:#F2F4F1;    /* off-white  */
  --peach:#F6C9A8;
  --red:#D95B43;
  --blue:#2E8BC0;
  --ink:#14384f;

  --display:"Fraunces",Georgia,serif;
  --text:"Cormorant Infant",Georgia,serif;
  --fs:clamp(1rem,min(1.4vw,2.4vh),1.4rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y proximity;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-weight:600;font-size:var(--fs);line-height:1.4}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:2.2vh 3vw;pointer-events:none}
.bar>*{pointer-events:auto}
.brand{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.35rem;text-decoration:none;letter-spacing:.02em}
.lang{display:flex;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--paper)}
.lang button{padding:.25em .9em;font-weight:700;letter-spacing:.08em}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- screens: three layouts, same visual language ---------- */
main{position:relative}
.screen{
  position:relative;overflow:hidden;
  width:100%;height:100vh;height:100svh;
  scroll-snap-align:start;
  background:var(--bg);
}
.a{--bg:var(--paper);--acc1:var(--red);--acc2:var(--blue)}
.b{--bg:var(--sky);--acc1:var(--peach);--acc2:var(--red)}
.c{--bg:var(--peach);--acc1:var(--blue);--acc2:var(--paper)}

/* ---------- FRAME component ----------
   --x --y        position (% of screen)
   --w --h        size for arch / pill
   --s            diameter for circle / moon
   --fill         solid colour
   --o            outline offset                                        */
.frame{
  --o:clamp(8px,1.1vw,16px);
  position:absolute;left:var(--x);top:var(--y);
  width:var(--w);height:var(--h);
  background:var(--fill,var(--ink));
  margin:0;
}
.frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.frame::after{
  content:"";position:absolute;inset:calc(var(--o) * -1);
  border:2px solid var(--ink);border-radius:inherit;pointer-events:none;
}
.frame--arch{border-radius:999px 999px 0 0}
.frame--pill{border-radius:999px}
.frame--circle{width:var(--s);height:var(--s);border-radius:50%}
.frame--moon{width:var(--s);height:calc(var(--s) / 2);border-radius:999px 999px 0 0}
.frame--deco::after{border-style:dashed}

/* paella-pan rim: a second dotted ring */
.frame--pan::before{
  content:"";position:absolute;inset:calc(var(--o) * -2.1);
  border:2px dotted var(--ink);border-radius:50%;pointer-events:none;
}
.frame--flow{position:relative;left:auto;top:auto}

/* ---------- type ---------- */
.copy{position:relative;z-index:2}
.abs{position:absolute;left:var(--x);top:var(--y);width:var(--w)}
.display{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;line-height:1;letter-spacing:-.015em}
.kicker{font-size:.85em;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:1.2vh}
.lead{font-size:1.2em;max-width:34em}
.note{margin-top:1.6vh;font-size:.95em;opacity:.85}
.hero-title{font-size:min(8.2vw,15vh);margin:1vh 0 2.5vh}
.hero-title span{display:block}
.facts{list-style:none;margin-top:3vh;display:grid;gap:.4em}
.facts li::before{content:"→ ";color:var(--red)}
.big-price{font-size:min(11vw,20vh)}
.essence{font-size:min(3.7vw,7vh);margin-bottom:2.4vh}
.cta{display:inline-block;margin-top:3vh;padding:.7em 1.6em;border:2px solid var(--ink);border-radius:99px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;letter-spacing:.06em;transition:background .2s,color .2s}
.cta:hover{background:var(--red);border-color:var(--ink);color:var(--ink)}

.list{list-style:none;display:grid;gap:2vh}
.list li{padding-left:1.4em;position:relative}
.list li::before{content:"";position:absolute;left:0;top:.55em;width:.7em;height:.7em;border-radius:50%;background:var(--acc2)}
.list h3{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:min(1.7vw,3.2vh);line-height:1.1}
.list p{opacity:.9}

.phase .num{display:block;font-family:var(--display);font-size:min(3.4vw,6.4vh);line-height:1;color:var(--acc2);-webkit-text-stroke:2px var(--ink)}
.a .phase .num{color:var(--paper)}
.phase h2{font-size:min(3.2vw,6vh);margin:.5vh 0 1.4vh}
.phase p{max-width:30em}

.pans{display:grid;grid-template-columns:1fr 1fr;gap:5vh 2vw;justify-items:center}
.pan{display:grid;justify-items:center;gap:5vh;margin:0;padding-top:2.4vh}
.pan figcaption{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:min(1.7vw,3.2vh)}

#s6 .big-price{font-size:min(7.6vw,14vh)}
.bars{list-style:none;display:grid;gap:2vh}
.bars li{display:grid;grid-template-columns:1fr auto;gap:.5vh 1em}
.bars span{font-weight:700}
.bars b{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.05em}
.bars i{grid-column:1/-1;display:block;height:1.1vh;min-height:8px;border-radius:99px;background:rgba(20,56,79,.15);position:relative}
.bars i::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--len);border-radius:inherit;background:var(--acc1)}
.note-big{font-size:1.25em;max-width:28em}

/* ---------- thread ---------- */
.thread{position:absolute;inset:0;z-index:10;pointer-events:none}
#threadSvg{position:absolute;left:0;top:0;overflow:visible}
#threadSvg path{fill:none;stroke-linecap:round}
#threadBase{stroke:var(--ink);stroke-opacity:.28;stroke-width:2;stroke-dasharray:2 9}
#threadProg{stroke:var(--ink);stroke-width:4}
.node{font-weight:800;
  position:absolute;width:var(--n,46px);height:var(--n,46px);margin:calc(var(--n,46px) / -2) 0 0 calc(var(--n,46px) / -2);
  border-radius:50%;background:var(--paper);border:3px solid var(--ink);
  display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;line-height:1;
  transition:background .3s,color .3s,transform .3s;
}
.node.dot{--n:20px}
.node.on{background:var(--red);transform:scale(1.12)}
/* paella marker: spins while you scroll; the flame under it lights only while moving */
.marker{--mk:52px;position:absolute;left:0;top:0;width:var(--mk,58px);height:var(--mk,58px);margin:calc(var(--mk,58px) / -2) 0 0 calc(var(--mk,58px) / -2)}
.marker svg{position:absolute;display:block}
.marker .paella{inset:0;width:100%;height:100%;z-index:2}
/* burner seen from above: a red disc under the pan, visible around its edge */
.marker .fire{position:absolute;inset:-13.2%;border-radius:50%;background:#D95B43;box-shadow:0 0 0 calc(var(--mk,58px) * .066) #F4A93A;
  transform:scale(.5);opacity:0;z-index:0;transition:transform .25s ease-out,opacity .25s ease-out}
.marker.lit .fire{transform:scale(1);opacity:1;animation:pulse .24s ease-in-out infinite alternate}
.marker .fire i{position:absolute;left:50%;top:50%;width:calc(var(--mk,58px) * .1);height:calc(var(--mk,58px) * .1);margin:calc(var(--mk,58px) * -.05) 0 0 calc(var(--mk,58px) * -.05);
  background:#FFE08A;border-radius:2px;opacity:0;transform:rotate(var(--a)) translateY(0)}
.marker.lit .fire i{animation:spark .55s ease-out infinite;animation-delay:var(--d)}
.marker.lit .fire i:nth-child(3n){background:#F4A93A}
.marker.lit .fire i:nth-child(4n){background:#fff}
@keyframes pulse{from{transform:scale(.96)}to{transform:scale(1.06)}}
@keyframes spark{
  0%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--mk,58px) * -.4)) rotate(0) scale(.5)}
  20%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--mk,58px) * -.95)) rotate(180deg) scale(1.1)}
}

/* ---------- reveal ---------- */
.copy{opacity:0;transform:translateY(2vh);transition:opacity .7s ease,transform .7s ease}
.screen.in .copy{opacity:1;transform:none}

/* ---------- phones: one column, thread on the left edge ---------- */
@media (max-width:760px){
  :root{--fs:1rem}
  html{scroll-snap-type:y proximity}
  .brand{font-size:1.35rem}
  .screen{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:14vh 20px 10vh 56px}
  .abs{position:relative;left:auto;top:auto;width:auto}
  .frame{position:relative;left:auto;top:auto;width:var(--mw,46vw);height:var(--mh,34vw);align-self:flex-start;--o:7px}
  .frame--circle{width:var(--ms,38vw);height:var(--ms,38vw)}
  .frame--deco{display:none}
  .frame--flow{width:var(--ms,38vw);height:var(--ms,38vw)}
  .screen .frame:not(.frame--flow){order:2}
  .hero-title{font-size:min(14vw,11vh)}
  .big-price,#s6 .big-price{font-size:min(22vw,14vh)}
  .essence{font-size:min(8vw,6.5vh)}
  .phase h2,.list h3,.pan figcaption{font-size:1.4rem}
  .phase .num{font-size:2.2rem}
  .pans{--s:34vw;gap:22px 12px}
  .node{--n:34px;font-size:1.1rem}
  .node.dot{--n:16px}
  .marker{--mk:40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marker.lit .fire,.marker.lit .fire i{animation:none}
  .copy{opacity:1;transform:none;transition:none}
}

/* ---------- header quick-reserve button ---------- */
.bar-right{display:flex;align-items:center;gap:12px}
.bar-cta{padding:.42em 1.2em;border-radius:99px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font-weight:700;letter-spacing:.04em;transition:background .2s,color .2s}
.bar-cta:hover,.bar-cta:focus-visible{background:var(--red);color:var(--ink)}

/* ---------- reservation modal ---------- */
html:has(dialog[open]){overflow:hidden}
.modal{
  position:fixed;inset:0;margin:auto;padding:0;
  width:min(720px,94vw);max-height:96vh;max-height:96svh;overflow:auto;font-size:.95rem;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:28px;
  box-shadow:0 0 0 8px var(--peach),0 0 0 10px var(--ink);
}
.modal::backdrop{background:rgba(20,56,79,.62)}
.modal[open]{animation:pop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-x{position:absolute;right:14px;top:8px;z-index:2;width:44px;height:44px;border-radius:50%;font-size:2rem;line-height:1;border:2px solid var(--ink);background:var(--paper)}
.modal-x:hover{background:var(--red)}
.rsv,.rsv-done{padding:clamp(20px,3.2vw,32px) clamp(20px,4vw,40px)}
.rsv-head h2,.rsv-done h2{font-size:clamp(1.7rem,3.6vw,2.3rem);margin:.1em 0 .25em;padding-right:44px}
.rsv .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:14px 0 12px}
.f{display:grid;gap:6px;font-weight:700;font-size:.95em;align-content:start}
.span2{grid-column:1/-1}
.rsv input,.rsv select,.rsv textarea{
  font:inherit;font-weight:600;color:var(--ink);width:100%;
  background:#fff;border:2px solid var(--ink);border-radius:14px;padding:.5em .85em;
}
.rsv textarea{resize:vertical;min-height:3.6em}
.rsv input:focus-visible,.rsv select:focus-visible,.rsv textarea:focus-visible,.modal button:focus-visible,.modal a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.rsv .bad{border-color:var(--red);background:#fff1ee}
.stepper{display:flex;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
.stepper button{width:52px;font-size:1.5rem;font-weight:700;background:var(--peach)}
.stepper button:hover{background:var(--red)}
.rsv .stepper input{border:0;border-radius:0;text-align:center;padding:.5em 0;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92em;font-weight:600}
.check input{width:22px;height:22px;margin-top:.15em;accent-color:var(--ink);flex:none}
.rsv-error{margin-top:12px;color:#a3321f;font-weight:700}
.rsv-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.total{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;font-weight:700}
.total strong{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.7rem}
.total small{opacity:.75;font-weight:600}
.modal .cta{margin-top:0;cursor:pointer;font:inherit;font-weight:700;letter-spacing:.06em}
.rsv-done .summary{margin:14px 0;padding:14px 18px;background:var(--peach);border-radius:16px;white-space:pre-line;font-weight:700}
.rsv-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;align-items:center}
.ghost{border:2px solid var(--ink);border-radius:99px;padding:.7em 1.4em;font-weight:700}
.ghost:hover{background:var(--sky)}

@media (max-width:760px){
  .bar{padding:1.6vh 3vw}
  .bar-right{gap:8px}
  .bar-cta{padding:.35em .9em;font-size:.9rem}
  .brand{font-size:1.1rem}
  .modal{width:96vw;max-height:96svh;border-radius:22px;box-shadow:0 0 0 5px var(--peach),0 0 0 7px var(--ink)}
  .rsv .grid{grid-template-columns:1fr}
  .rsv-foot{flex-direction:column;align-items:stretch}
  .modal .cta{text-align:center}
}
@media (prefers-reduced-motion:reduce){.modal[open]{animation:none}}

/* ---------- privacy & terms ---------- */
.linklike{display:inline;padding:0;background:none;border:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.linklike:hover{color:var(--blue)}
.legal-link{display:block;margin-top:1.4vh;font-size:.95em}
.rsv .linklike{display:block;margin:0 0 10px;font-size:.92em}
.rsv .check{margin-bottom:8px}
.legal{width:min(760px,94vw)}
.legal-body{padding:clamp(20px,3.2vw,34px) clamp(20px,4vw,40px)}
.legal-body>h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:.1em 0 .2em;padding-right:44px}
.legal-updated{font-size:.88em;opacity:.8;margin-bottom:1.2em}
.legal-body section{margin:1.4em 0 1.6em;padding-top:1.1em;border-top:2px solid var(--ink)}
.legal-body section>h3{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:.5em}
.legal-body h4{margin:1em 0 .15em;font-weight:700;font-size:1em;letter-spacing:.02em}
.legal-body p{max-width:60em}