/* CellierBook — cellierbook.com
   Public Sans (self-host later). --displayFace is the one-token Cera Pro swap. */

:root{
  --white:#FFFFFF;
  --paper:#F0EFEE;
  --ink:#2D2926;
  --burgundy:#8A1538;
  --hair:#D9D9D6;

  --gutter:26px;
  --mL:max(22px,5.5vw);
  --mR:max(22px,11vw);

  --t-display:clamp(2.1rem,6.4vw,6rem);
  --t-h1:clamp(1.9rem,4.8vw,4.4rem);
  --t-h2:clamp(1.6rem,3.5vw,3rem);
  --t-lede:clamp(1.05rem,1.25vw,1.28rem);
  --t-body:1.0625rem;
  --t-eyebrow:0.6875rem;
  --t-small:0.8125rem;

  --displayFace:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;font-size:var(--t-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}

html,body{max-width:100%}
.wrap{max-width:1680px;margin:0 auto}
.grid>*{min-width:0}
.grid{padding-inline:max(20px,var(--mL)) max(20px,var(--mR))}
.grid{
  display:grid;grid-template-columns:repeat(7,1fr);column-gap:var(--gutter);
  padding-left:var(--mL);padding-right:var(--mR);
}
.c1-3{grid-column:1/4}.c1-4{grid-column:1/5}.c1-5{grid-column:1/6}
.c2-6{grid-column:2/7}.c4-7{grid-column:4/8}.c5-7{grid-column:5/8}.c1-7{grid-column:1/8}

/* type */
.eyebrow{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy);margin:0 0 22px}
h1{overflow-wrap:break-word;font-family:var(--displayFace);font-size:var(--t-h1);font-weight:300;line-height:1.03;letter-spacing:-.025em;margin:0}
.hero h1{font-size:var(--t-display);line-height:1.02;overflow-wrap:break-word}
h2{overflow-wrap:break-word;font-family:var(--displayFace);font-size:var(--t-h2);font-weight:300;line-height:1.08;letter-spacing:-.02em;margin:0 0 24px}
h3{font-family:var(--displayFace);font-size:1.35rem;font-weight:300;letter-spacing:-.01em;margin:0 0 10px}
.lede{font-family:var(--displayFace);font-size:var(--t-lede);font-weight:300;line-height:1.5;margin:24px 0 0;max-width:36ch}
p{margin:0 0 18px;max-width:46ch}
.small{font-size:var(--t-small)}
a{color:inherit}

.link{display:inline-block;font-size:var(--t-small);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--burgundy);padding-bottom:5px;border-bottom:1px solid var(--burgundy)}
.link:hover{opacity:.65}
.btn{display:inline-block;font-size:var(--t-small);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:15px 30px;border-radius:2px;transition:background .18s,color .18s,opacity .18s}
.btn-fill{background:var(--burgundy);color:#fff}
.btn-fill:hover{opacity:.88}
.btn-line{border:1px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink)}

/* nav — spans the hero width */
.nav{position:sticky;top:0;z-index:60;background:var(--white);display:flex;align-items:center;flex-wrap:wrap;row-gap:12px;gap:38px;padding:24px var(--mR) 20px var(--mL);border-bottom:1px solid var(--hair)}
.nav.flush{padding-left:0;padding-right:0}
.mark{display:block;width:132px;flex:0 0 auto;color:var(--burgundy)}
.mark svg{width:100%;height:auto;fill:currentColor}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--displayFace);text-decoration:none;font-size:var(--t-small);padding-bottom:2px;border-bottom:1px solid transparent}
.nav ul a:hover,.nav ul a[aria-current="page"]{border-bottom-color:var(--burgundy)}
.nav .right{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;row-gap:10px;gap:26px;min-width:0}
.lang{font-size:var(--t-small);letter-spacing:.02em;text-decoration:none;opacity:.55}
.lang:hover{opacity:1;color:var(--burgundy)}

/* mobile menu */
.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:calc(var(--mR) * -0.35);
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
}
.navtoggle span{position:relative;display:block;width:20px;height:1px;background:currentColor;
  transition:transform .2s ease, opacity .15s ease}
.navtoggle span::before,.navtoggle span::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:currentColor;
  transition:transform .2s ease}
.navtoggle span::before{top:-6px}
.navtoggle span::after{top:6px}
.navtoggle[aria-expanded="true"] span{transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.navtoggle[aria-expanded="true"] span::after{opacity:0}

.navpanel{
  display:none;position:fixed;inset:0;z-index:80;background:var(--white);
  flex-direction:column;overflow-y:auto;
}
.navpanel[data-open="true"]{display:flex}

/* top row mirrors the nav exactly, so nothing shifts when it opens */
.navpanel .top{
  display:flex;align-items:center;flex:0 0 auto;
  padding:24px var(--mR) 20px var(--mL);
  border-bottom:1px solid var(--hair);
}
.navpanel .top .mark{width:132px}
.navpanel .top .navtoggle{margin-left:auto;margin-right:-10px}

.navpanel ul{list-style:none;margin:0;padding:2.2rem var(--mR) 0 var(--mL);flex:0 0 auto}
.navpanel li+li{border-top:1px solid var(--hair)}
.navpanel a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.35rem 0;text-decoration:none;
  font-family:var(--displayFace);font-size:1.5rem;font-weight:300;letter-spacing:-.015em;
}
.navpanel a::after{
  content:"\2192";font-size:1rem;color:var(--burgundy);opacity:0;
  transform:translateX(-6px);transition:opacity .18s ease,transform .18s ease;
}
.navpanel a:hover::after{opacity:1;transform:translateX(0)}
.navpanel a[aria-current="page"]{color:var(--burgundy)}
.navpanel a[aria-current="page"]::after{opacity:1;transform:translateX(0)}

.navpanel .foot-actions{
  margin-top:auto;flex:0 0 auto;
  padding:2rem var(--mR) 2.6rem var(--mL);
  border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:1.4rem;align-items:stretch;
}
.navpanel .foot-actions .btn{
  display:block;width:100%;box-sizing:border-box;
  padding:17px 20px;text-align:center;white-space:normal;overflow-wrap:break-word;
}
.navpanel .foot-actions .lang{
  align-self:flex-start;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;
}
body[data-lock="true"]{overflow:hidden}

.rule{height:1px;background:var(--hair);border:0;margin:0}
.rule-wrap{padding-left:var(--mL);padding-right:var(--mR)}

/* hero */
.hero{position:relative;height:min(84vh,860px);min-height:520px;overflow:hidden;margin-top:3.2rem}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% center}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(18,14,12,.80) 0%,rgba(18,14,12,.56) 34%,rgba(18,14,12,.18) 64%,rgba(18,14,12,0) 90%)}
.hero .grid{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:8vh}
.hero h1,.hero .lede{color:#fff}
.hero .eyebrow{color:#fff;opacity:.82}
.hero .lede{margin-top:26px;opacity:.92}

/* page header (interior pages) */
.hd{padding-block:5rem 3.5rem}

/* sections */
.sec{padding-block:10rem}
.sec-tight{padding-block:6.5rem}
.sec-sm{padding-block:4rem}
.stick{align-self:center}

/* photographs */
.figure{border-radius:2px;overflow:hidden}
.figure img{width:100%;height:100%;object-fit:cover}
.r16{aspect-ratio:16/7}
.r43{aspect-ratio:4/3}
.r45{aspect-ratio:4/5}

/* paper block */
.paper{background:var(--paper);border-radius:2px;padding:5rem 4rem}
.paper h2{max-width:20ch;margin-bottom:20px}
.paper p:last-child{margin-bottom:0}

/* the app, rendered in HTML */
.frame{background:var(--paper);border-radius:2px;padding:34px}
.ui{background:#fff;border:1px solid var(--hair);border-radius:8px;overflow:hidden;font-variant-numeric:tabular-nums}
.ui-head{display:flex;align-items:flex-end;gap:18px;padding:20px 24px 14px}
.ui-lbl{font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.45;margin-bottom:6px}
.ui-figure{font-family:var(--displayFace);font-size:clamp(2.6rem,4vw,3.9rem);font-weight:500;color:var(--burgundy);line-height:.86;letter-spacing:-.03em}
.ui-date{margin-left:auto;font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.45}
.ui-cols,.ui-row{display:grid;grid-template-columns:70px 1fr 44px 82px;column-gap:12px;align-items:center}
.ui-cols{padding:0 24px 9px;border-bottom:1px solid var(--hair)}
.ui-cols span{font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.45}
.ui-row{padding:14px 24px;border-bottom:1px solid var(--hair);font-size:.95rem}
.ui-row:last-child{border-bottom:0}
.ui-time{font-weight:500}
.ui-party{opacity:.55}
.ui-status{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.ui-status.on{color:var(--burgundy);opacity:1}
.ui-fade{position:relative}
.ui-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
.ui-book{padding:26px 24px 30px}
.ui-book .day{font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.45;margin-bottom:16px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{border:1px solid var(--hair);border-radius:3px;padding:11px 0;text-align:center;font-size:.88rem}
.slot.sel{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.slot.out{opacity:.3}
.ui-search{padding:22px 24px}
.ui-field{background:var(--paper);border-radius:3px;padding:12px 14px;font-size:.92rem;opacity:.75}

/* index rows */
.index{padding-left:var(--mL);padding-right:var(--mR)}
.row{display:grid;grid-template-columns:repeat(7,1fr);column-gap:var(--gutter);align-items:baseline;
  padding:2.6rem 0;border-top:1px solid var(--hair);text-decoration:none;color:inherit}
.row:last-child{border-bottom:1px solid var(--hair)}
.row .lbl{grid-column:1/2;font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy)}
.row h3{grid-column:2/5;margin:0;max-width:22ch;font-size:clamp(1.4rem,2.1vw,2rem)}
.row .desc{grid-column:5/7;font-size:var(--t-small);margin:0;max-width:34ch;opacity:.72}
.row .arw{grid-column:7/8;justify-self:end;color:var(--burgundy);font-size:1.1rem;transition:transform .18s ease}
.row:hover h3{opacity:.6}
.row:hover .arw{transform:translateX(4px)}

/* pricing */
.price{font-family:var(--displayFace);font-size:clamp(3.4rem,7vw,6.4rem);font-weight:300;letter-spacing:-.03em;
  line-height:1;color:var(--burgundy);margin:0}
.terms{list-style:none;padding:0;margin:2.4rem 0 0}
.terms li{margin-bottom:12px;max-width:44ch;font-size:var(--t-small)}

/* documents */
.doc{max-width:64ch}
.doc .docdate{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;opacity:.45;margin:0 0 2.4rem}
.doc h2{font-size:1.2rem;margin:2.6rem 0 12px}
.doc h2:first-of-type{margin-top:0}
.doc p,.doc li{max-width:none;font-size:.98rem}

/* closing + footer */
.closing{padding-block:9rem 10rem}
.closing h2{max-width:16ch}
.foot{padding-block:3.5rem 4.5rem;border-top:1px solid var(--hair)}
.foot h4{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;opacity:.45}
.foot ul{list-style:none;margin:0;padding:0;font-size:var(--t-small)}
.foot li{margin-bottom:8px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--burgundy)}
.foot .legal{grid-column:1/8;margin-top:3.5rem;font-size:var(--t-small);opacity:.5}

@media (max-width:1280px){
  :root{--mL:40px;--mR:40px;--gutter:18px}
  .grid{grid-template-columns:1fr}
  .c1-3,.c1-4,.c1-5,.c2-6,.c4-7,.c5-7,.c1-7{grid-column:1/2}
  .sec{padding-block:5.5rem}
  .sec-tight{padding-block:4rem}
  .hero{height:78vh;margin-top:2rem}
  .paper{padding:3rem 2rem}
  .frame{padding:18px}
  .ui-cols,.ui-row{grid-template-columns:56px 1fr 34px 66px;column-gap:8px}
  .ui-cols,.ui-row{padding-left:16px;padding-right:16px}
  .ui-head{padding-left:16px;padding-right:16px}
  .ui-book{padding-left:16px;padding-right:16px}
  .order-first{order:-1;margin-bottom:2.5rem}
  .r45,.r43{aspect-ratio:4/3}
  .nav{gap:16px;flex-wrap:nowrap}
  .nav.flush{padding-left:var(--mL)!important;padding-right:var(--mR)!important}
  .nav ul{display:none}
  .nav .right .link{display:none}
  .navtoggle{display:flex}
  .mark{width:112px}
  .row{grid-template-columns:1fr;row-gap:10px;padding:2rem 0}
  .row .lbl,.row h3,.row .desc,.row .arw{grid-column:1/2}
  .row .arw{justify-self:start}
  .foot .col{margin-bottom:2rem}
}

@media (max-width:600px){
  :root{--mL:24px;--mR:24px}
  .mark{width:104px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--mL);top:10px;z-index:99;background:#fff;padding:10px 16px;border:1px solid var(--burgundy)}