/* RC visit menu. Tokens from RC Hair/Brand Assets/RC_Brand_Tokens.md: RC Black #000000, one RC Gold #FBDB87 (sampled from the master logo), white body.
   Like the salon itself: white walls, black and gold trim. Two fonts only, both from the logo:
   Gilda Display for the serif RC monogram (headings), Josefin Sans for the ring lettering (labels and body). */
:root{
  --black:#000;
  --black-raised:#151515;
  --black-line:#2b2b2b;
  --gold:#fbdb87;
  --white:#fff;
  --mist:#f6f5f2;
  --line:#e6e3dc;
  --ink:#000;
  --grey:#66625b;
  --on-black:#d9d5cc;
  --serif:"Gilda Display",Georgia,serif;
  --font:"Josefin Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.6 var(--font);font-variant-numeric:lining-nums}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.1em;line-height:1.15;margin:0;text-wrap:balance}
.label{font:500 11px/1.4 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}

/* Header: black, like the RC sign */
.top{background:var(--black);color:var(--white);text-align:center;padding:34px 20px 30px}
.top .logo{width:92px;height:auto;display:block;margin:0 auto 20px;animation:settle .9s ease both}
.top .label{color:var(--gold)}
.top h1{font-size:32px;letter-spacing:.1em;margin:10px 0 10px;animation:settle .9s .12s ease both}
.top .intro{max-width:320px;margin:0 auto;font-size:16px;color:var(--on-black)}
.howto{max-width:420px;margin:22px auto 0;padding:18px 20px;border:1px solid var(--gold);border-radius:14px;animation:settle .9s .18s ease both}
.howto .label{margin-bottom:8px}
.howto-line{font:400 21px/1.4 var(--serif);color:var(--white);text-wrap:balance}
.wifi{max-width:420px;margin:14px auto 0;padding:16px 18px;background:var(--black-raised);border:1px solid var(--black-line);border-radius:14px;text-align:left;display:grid;gap:10px;animation:settle .9s .24s ease both}
.wifi .label{color:var(--gold)}
.wifi dl{margin:0;display:grid;gap:10px}
.wifi dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.wifi dt{font-size:13px;color:var(--on-black)}
.wifi dd{margin:0;font:600 17px/1.3 var(--font);letter-spacing:.08em;color:var(--white);user-select:all;-webkit-user-select:all}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Section bar: pill outlines, the website's button shape. The pill for the section in view fills gold. */
.jump{position:sticky;top:0;z-index:5;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 16px;background:var(--black);border-top:1px solid var(--black-line)}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:0 0 auto;text-decoration:none;color:var(--white);border:1px solid #5a5a5a;border-radius:999px;padding:6px 15px;font:500 11px/1.6 var(--font);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.jump a:hover{border-color:var(--gold)}
.jump a.on{background:var(--gold);border-color:var(--gold);color:var(--black)}
@media(min-width:640px){.jump{justify-content:center}}

/* White body */
main{max-width:640px;margin:0 auto}
section{padding:46px 20px;border-bottom:1px solid var(--line);display:grid;gap:14px}
section:last-child{border-bottom:0}
section h2{font-size:26px}
section h2::after{content:"";display:block;width:36px;height:3px;background:var(--gold);margin-top:14px}
.lead{color:var(--grey);font-size:15px}
.fine{font-size:13px;color:var(--grey)}

/* Drinks */
.drinks{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;border-top:1px solid var(--line)}
.drinks li{border-bottom:1px solid var(--line);padding:13px 0;font-size:15px;line-height:1.35}
.milk{font-size:14px;color:var(--grey)}
.milk .label{margin-right:10px;color:var(--ink)}

/* Extras */
.extras{margin-top:4px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 0;font-size:15px}
summary::-webkit-details-marker{display:none}
summary span{flex:1}
summary b{font-weight:500;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
summary::after{content:"";flex:0 0 auto;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
details[open] summary::after{transform:rotate(225deg) translateY(-1px)}
details p{padding:0 28px 18px 0;font-size:14px;color:var(--grey)}
details[open] p{animation:settle .35s ease both}

/* Comforts */
.comforts{margin:4px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.comforts dt{font:500 12px/1.4 var(--font);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.comforts dd{margin:0;font-size:14px;color:var(--grey);line-height:1.55}

/* Your personal pass */
.pass-card{display:block;width:100%;max-width:300px;height:auto;margin:4px auto 8px}
@media(min-width:640px){#pass{grid-template-columns:1fr 1.1fr;align-items:center;column-gap:28px}#pass .pass-card{grid-row:1/span 5}}

/* Buttons: pills, one gold */
.pill{display:inline-block;justify-self:start;text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:13px 30px;font:500 11px/1.6 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);transition:transform .2s,filter .2s}
.pill:active{transform:scale(.97)}
.pill.gold{background:var(--gold);border-color:var(--gold);color:var(--black)}
.pill.gold:hover{filter:brightness(1.05)}

/* Footer: black */
footer{background:var(--black);color:var(--white);text-align:center;padding:48px 20px calc(48px + env(safe-area-inset-bottom));display:grid;gap:12px;justify-items:center}
footer .logo{width:64px;height:auto;margin-bottom:8px}
.thanks{font:400 17px/1.5 var(--serif);letter-spacing:.04em;max-width:280px;color:var(--white)}
.bless{color:var(--gold);font:400 19px var(--serif);letter-spacing:.04em}
footer .fine{color:var(--on-black);max-width:340px;margin-bottom:14px}
footer .pill{justify-self:center;border-color:var(--white);color:var(--white)}

/* Sections rise gently into place as they scroll in, where the browser supports it. Nothing is ever hidden without it. */
@supports (animation-timeline:view()){
  main section>*{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}

@media(min-width:640px){
  section{padding:60px 28px}
  section h2{font-size:30px}
  .top h1{font-size:38px}
  .drinks{grid-template-columns:1fr 1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}