/* Every style on the site. The look is the Hope Sandoval site's: Archivo for headings and
   buttons, Source Serif for reading, a dark brand band with a bright accent button.
   Brand colors are variables written from site.json into /assets/css/theme.css
   (lib/theme.js); the neutrals below stay the same for every client. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format("woff2");
  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:"Source Serif";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-serif-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-serif-latin-ext.woff2) format("woff2");
  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{
  --disp:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif",Georgia,"Times New Roman",serif;
  --line:#DED6C6;--line-soft:#E4DDCE;--line-input:#C9C0AE;--chip:#D8D0BF;--row:#EAE3D4;--row-hi:#F6F2E8;
  --muted:#37413E;--tint:#F3EEE3;--faint:#B3AB9B;--err:#8A2A1B;--err-bg:#FFF1ED;--err-ink:#6E2216;--warn-bg:#FFF8EA;--warn-ink:#5A3D0C;
  /* fallbacks until theme.css loads */
  --main:#1B4D45;--dark:#0E312C;--accent:#E0A33E;--paper:#FBF8F2;--sand:#EFE9DC;--ink:#14181B;--stone:#5C655F;
  /* cards and form boxes, and link and heading color: the white text version changes both */
  --card:#fff;--link:var(--main);
}
/* a look drawn on part of a page (Color looks page cards) gets its own link color too */
[data-look]{--link:var(--main)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
body.home{font-size:18px}
img{display:block;max-width:100%;height:auto}
a{color:var(--link)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}
h1,h2,h3,.num,.btn,.bar,.eyebrow,legend{font-family:var(--disp)}
p{margin:0 0 16px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 14px;font-family:var(--disp);font-weight:700;text-decoration:none;border-radius:3px}
.skip:focus{top:12px}
.no-js .js-only{display:none!important}
.js .nojs-only{display:none!important}
.small{font-size:15px}
[hidden]{display:none!important}

/* ---------- sample banner (template sample site only) ---------- */
.sample{background:#FFF3C4;color:#3D2E00;font-family:var(--disp);font-size:14px;text-align:center;padding:8px 16px;line-height:1.4}
.sample a{color:#3D2E00;font-weight:700;margin-left:4px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:50;background:var(--dark);color:#fff;display:flex;align-items:center;gap:16px;padding:11px 24px;font-size:15px}
.bar a{text-decoration:none}
.bar .mark{flex:0 0 auto;display:block;line-height:0}
.bar .mark img,.bar .mark svg{width:42px;height:42px}
.bar .name{font-weight:800;letter-spacing:-.01em;font-size:16.5px;margin-right:auto;line-height:1.15;color:#fff}
.bar .nm-short{display:none}
.bar .name .tag{display:block;font-weight:500;font-size:11.5px;color:var(--on-dark-faint);letter-spacing:.02em}
.bar .tel{color:#fff;font-weight:600;white-space:nowrap}
.bar .btn{white-space:nowrap}
.mark-svg .m-b{fill:var(--main)}.mark-svg .m-a{fill:var(--accent)}.mark-svg .m-l{fill:#fff;opacity:.8}
@media(max-width:640px){
  .bar{padding:9px 12px;gap:10px}
  .bar .mark img,.bar .mark svg{width:34px;height:34px}
  .bar .name{font-size:14px}
  .bar .name .tag{display:none}
  .bar .tel{font-size:14.5px}
}
@media(max-width:400px){.bar .nm-full{display:none}.bar .nm-short{display:inline}}

/* The Colors menu in the top bar (features.json colorLooks) */
.bar-looks{position:relative}
.bar-looks summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;white-space:nowrap}
.bar-looks summary::-webkit-details-marker{display:none}
.bar-looks summary .ico{flex:none}
.bar-looks[open] summary{border-color:#fff;background:rgba(255,255,255,.1)}
.looks-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(280px,calc(100vw - 24px));padding:14px 12px 12px;
  background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.28);font-family:var(--disp)}
.looks-menu-h{margin:0 6px 8px;font-size:13px;font-weight:600;color:var(--stone);text-transform:uppercase;letter-spacing:.05em}
.looks-menu ul{list-style:none;margin:0;padding:0}
.looks-menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;text-align:left;cursor:pointer}
.looks-menu button:hover{background:var(--tint)}
.looks-menu button[aria-pressed="true"]{background:var(--sand)}
.looks-menu button[aria-pressed="true"]::after{content:"✓";margin-left:auto;color:var(--link);font-weight:800}
.looks-menu small{font-size:12.5px;font-weight:500;color:var(--stone)}
.look-dot{flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  background:linear-gradient(135deg,var(--dark) 0 50%,var(--accent) 50% 100%)}
.looks-menu-more{display:block;margin:8px 8px 2px;font-size:14.5px;font-weight:600;color:var(--link)}
.bar .looks-menu-more{color:var(--link);text-decoration:underline}
@media(max-width:640px){
  .bar-looks-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bar-looks summary{padding:8px 10px}
  /* on phones the menu hangs from the whole top bar (which is sticky, so it anchors it), edge to edge */
  .bar-looks{position:static}
  .looks-menu{left:12px;right:12px;width:auto;top:calc(100% + 6px)}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;font-weight:700;letter-spacing:-.005em;border-radius:3px;
  padding:13px 22px;font-size:16px;line-height:1.3;transition:background .15s ease;text-align:center}
.btn-sm{padding:9px 16px;font-size:14.5px}
.btn-big{padding:13px 22px;font-size:16px}
.btn-gold{background:var(--accent);color:var(--on-accent)}
.btn-gold:hover{background:var(--accent-hover)}
.btn-line{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent;padding:11.5px 20px}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--main);color:#fff}
.btn-dark:hover{background:var(--light)}
.btn-light{background:var(--paper);color:var(--dark)}
.btn-light:hover{background:#fff}
.btn-outline{background:transparent;color:var(--link);border:1.5px solid var(--main);padding:11.5px 20px}
.btn-outline:hover{background:var(--card)}
.linklike{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--link);text-decoration:underline;cursor:pointer}
@media(max-width:640px){.bar .btn{padding:9px 13px;font-size:14px}}
@media(max-width:520px){.hero .cta .btn,.book .cta .btn,.endcta .cta .btn{flex:1 1 100%}}

/* ---------- home: hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.hero .soil{position:absolute;inset:0;background:
  repeating-linear-gradient(101deg,rgba(0,0,0,.16) 0 3px,rgba(0,0,0,0) 3px 11px),
  radial-gradient(120% 90% at 78% 8%,var(--glow) 0%,var(--glow-end) 62%),
  linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}
.hero .pass{position:absolute;top:-14%;bottom:-14%;left:46%;width:64%;transform:skewX(-11deg);transform-origin:top left;
  background:repeating-linear-gradient(101deg,rgba(255,255,255,.055) 0 4px,rgba(255,255,255,0) 4px 13px),
  linear-gradient(100deg,var(--pass-a) 0%,var(--pass-b) 55%,var(--pass-c) 100%);
  box-shadow:-1px 0 0 rgba(255,255,255,.22),26px 0 44px rgba(0,0,0,.16)}
.hero .inner{position:relative;padding-top:74px;padding-bottom:128px}
.hero h1{font-size:clamp(36px,5.6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0 0 22px;max-width:19ch}
.hero h1 .where{display:block;font-size:.5em;letter-spacing:-.015em;line-height:1.1;margin-top:.45em;color:var(--on-dark-soft);font-weight:700}
.hero .lede{font-size:clamp(18px,2.1vw,21px);color:var(--on-dark-bright);max-width:46ch;margin:0 0 30px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .note{margin:22px 0 0;font-size:15px;color:var(--on-dark-soft);max-width:44ch}
.ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;display:block}
.ridge .r1{fill:var(--ridge)}.ridge .r2{fill:var(--paper)}
@media(max-width:760px){.hero .pass{left:36%;width:86%}.hero .inner{padding-top:52px;padding-bottom:96px}}

/* background video (features.json heroVideo). The dark layer over it is strong enough that
   the faintest words stay readable even on an all-white frame (lib/theme.js works it out). */
.hero-media{position:absolute;inset:0;background:var(--dark)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--video-focus,50% 50%);display:block}
.hero-media::after{content:"";position:absolute;inset:0;background:var(--video-shade);opacity:var(--video-shade-opacity)}
.hero-pause{position:absolute;z-index:2;top:14px;right:16px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 14px 7px 12px;
  font-family:var(--disp);font-size:14px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.55);border-radius:999px;cursor:pointer}
.hero-pause:hover{background:rgba(0,0,0,.6);border-color:#fff}
.hero-pause::before{content:"";flex:none;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hero-pause[data-state="paused"]::before{width:0;height:0;border-left:10px solid currentColor;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- home: sections ---------- */
.home section h2{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.022em;line-height:1.06;margin:0 0 18px}
.home section h3{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.home section p{max-width:62ch}
section .inner{padding-top:66px;padding-bottom:66px}
.lead{font-size:20px;max-width:56ch}
.home .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ph{display:grid;place-items:center;aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--sand) 0 12px,var(--row) 12px 24px);
  border:1px dashed var(--chip);border-radius:2px;padding:16px;text-align:center;font-family:var(--disp);font-size:14px;color:var(--stone)}
.book{background:var(--dark);color:#fff;text-align:center}
.book .inner{padding-top:70px;padding-bottom:70px}
.home .book h2{color:#fff;max-width:20ch;margin-left:auto;margin-right:auto}
.home .book p{color:var(--on-dark);margin-left:auto;margin-right:auto;max-width:44ch}
.book .cta{justify-content:center;margin-top:26px}
.book p a{color:#fff}

/* ---------- inner pages ---------- */
.page-head{background:var(--dark);color:#fff;padding:52px 0 44px}
.page-head h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(32px,5.5vw,50px);line-height:1;margin:0 0 14px}
.page-head p{margin:0;color:var(--on-dark);font-size:16px;max-width:60ch}
.page-main{padding:44px 0 60px}
.page-main h2{font-weight:600;font-size:19px;letter-spacing:-.01em;margin:34px 0 10px;color:var(--link);scroll-margin-top:84px}
.page-main h2 .n{color:var(--stone);font-weight:500;margin-right:8px}
.page-main h3{font-size:17px;font-weight:600;margin:0 0 4px}
.intro{background:var(--sand);border-left:3px solid var(--main);padding:18px 20px;margin:0 0 30px;font-size:16px}
.intro p{margin:0}
.callout{background:var(--sand);border-left:3px solid var(--main);padding:18px 20px;margin:26px 0;font-size:16px}
.callout p{margin:0}
.callout p+p{margin-top:10px}
.updated{font-family:var(--disp);font-size:14px;color:var(--stone);border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.contact{margin-top:44px;border-top:1px solid var(--line);padding-top:22px;font-size:16px}
.fine{margin-top:30px;font-size:16px;color:var(--stone)}
.page-main .cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none;font-family:var(--disp);font-size:14.5px}
.jump a{display:inline-block;border:1px solid var(--chip);background:var(--card);border-radius:2px;padding:6px 12px;text-decoration:none;color:var(--dark)}
.jump a:hover{border-color:var(--link)}
.checks{list-style:none;margin:12px 0 26px;padding:0;border-top:1px solid var(--line-soft)}
.checks li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid var(--line-soft);font-size:16.5px}
.checks li::before{content:"";position:absolute;left:3px;top:18px;width:15px;height:15px;border:2px solid var(--main);border-radius:3px}
.checks b{font-family:var(--disp);font-weight:600}
.day{list-style:none;margin:14px 0 18px;padding:0}
.day li{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.day li:last-child{border-bottom:1px solid var(--line)}
.day .num{flex:0 0 34px;height:34px;font-size:15px}
.day h3{margin:4px 0 3px}
.day p{margin:0;font-size:16px;color:var(--muted)}
.endcta{background:var(--dark);color:#fff;text-align:center}
.endcta .inner{max-width:760px;margin:0 auto;padding:52px 24px}
.endcta h2{color:#fff;font-family:var(--disp);font-size:clamp(26px,4vw,36px);font-weight:800;margin:0 0 12px}
.endcta p{color:var(--on-dark);margin:0 auto;max-width:44ch}
.endcta .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 0}

/* ---------- forms ---------- */
.send-sec{border-top:1px solid var(--line);margin-top:48px;padding-top:34px;scroll-margin-top:70px}
.page-main .send-sec h2{font-size:clamp(22px,3.2vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.send-sec>.help{font-size:16px;color:var(--stone);margin:0 0 24px;max-width:58ch}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:6px}
.field .hint{font-family:var(--serif);font-weight:400;color:var(--stone);font-size:14.5px}
.field input,.field select,.field textarea{width:100%;font-family:var(--serif);font-size:17px;color:var(--ink);background:var(--card);border:1.5px solid var(--line-input);border-radius:2px;padding:12px 13px}
.field input[type=file]{padding:10px;font-size:15px}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%235C655F' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--link);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.field .note{display:block;font-family:var(--serif);font-size:14.5px;color:var(--stone);margin-top:6px;line-height:1.45}
.field .err{display:none;font-family:var(--disp);font-size:14px;color:var(--err);margin-top:6px}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--err);background:#FFF8F6}
.field[data-invalid="true"] .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.row2{grid-template-columns:1fr;gap:0}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formtop{display:none;border-left:3px solid var(--err);background:var(--err-bg);padding:12px 14px;margin-bottom:22px;font-family:var(--disp);font-size:15px;color:var(--err-ink)}
.formtop[data-show="true"]{display:block}
.send{margin-top:6px}
.send[disabled]{opacity:.75;cursor:progress}
.send .spin{display:none;width:15px;height:15px;margin:0 9px -2px 0;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.send[aria-busy="true"] .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.formstatus{display:none;margin:18px 0 0;padding:12px 14px;max-width:640px;font-family:var(--disp);font-size:15px;line-height:1.45}
.formstatus[data-kind]{display:block}
.formstatus[data-kind="error"],.formstatus[data-kind="timeout"]{border-left:3px solid var(--err);background:var(--err-bg);color:var(--err-ink)}
.formstatus[data-kind="blocked"]{border-left:3px solid var(--accent);background:var(--warn-bg);color:var(--warn-ink)}
.formstatus a{color:inherit;font-weight:700}
.smallprint{font-size:15px;color:var(--stone);margin-top:16px;max-width:52ch}

/* ---------- footer ---------- */
.foot{background:var(--footer);color:var(--footer-text);font-family:var(--disp);font-size:14.5px}
.foot .inner{padding-top:40px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.foot b{color:#fff;font-weight:600;display:block;margin-bottom:6px;font-size:15.5px}
.foot a,.foot .linklike{color:var(--on-dark-soft);text-decoration:none;display:inline-block;padding:2px 0;font-weight:500}
.foot a:hover,.foot .linklike:hover{text-decoration:underline}
.foot .fsub{margin-top:18px}
.foot .flinks{list-style:none;margin:0;padding:0}
.foot .flinks a{display:inline-flex;align-items:center;gap:8px;min-height:28px}
.foot .flinks svg{flex:none;fill:currentColor}
.foot .fmark{display:block;margin-bottom:12px;line-height:0}
.foot .fmark img,.foot .fmark svg{width:64px;height:64px}
.foot .base{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;padding-bottom:28px;font-size:13.5px}

/* ---------- cookie banner (only with trackers on) ---------- */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:18px}
.consent p{font-size:15.5px;margin:0 0 12px}
.consent .actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- color looks (features.json colorLooks; normally the sample site only) ---------- */
.looks-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 26px}
.looks-status{margin:0;font-family:var(--disp);font-size:15px;font-weight:600;color:var(--link);min-height:1.4em}
.looks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px}
.look{display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.look-text{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px}
.page-main .look-text h2{margin:0;font-size:21px;font-weight:700;color:var(--link)}
.look-text p{margin:0;font-size:16px}
.look-from{font-family:var(--disp);font-size:14px;color:var(--stone)}
.look-mine{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 10px;border-radius:999px;background:var(--sand);color:var(--ink);font-size:12.5px;font-weight:600}
.look .btn{align-self:flex-start;margin-top:auto}
.swatches{list-style:none;margin:4px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-family:var(--disp);font-size:13px;color:var(--stone)}
.swatches li{display:flex;flex-direction:column;gap:4px;line-height:1.25}
.sw{display:block;height:26px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.sw-dark{background:var(--dark)}.sw-main{background:var(--main)}.sw-accent{background:var(--accent)}
.sw-paper{background:var(--paper)}.sw-sand{background:var(--sand)}.sw-footer{background:var(--footer)}
.looks-own{margin:30px 0 0;font-size:16px;color:var(--muted)}
.try-styles{margin:48px 0 0}
.page-main .try-styles h2{font-size:clamp(22px,3.2vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.try-styles>p{font-size:16px;color:var(--muted);max-width:60ch}
.style-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px;margin:18px 0 0}
.page-main .style-groups h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);margin:0 0 8px}
.style-list{list-style:none;margin:0;padding:0}
.style-list li{padding:12px 0;border-top:1px solid var(--line-soft);font-size:16px;color:var(--muted)}
.style-list a{font-family:var(--disp);font-size:17px;margin-right:6px}
.style-reset{font-family:var(--disp);font-weight:600;font-size:15.5px;margin:18px 0 0}
html[data-format="seamless"] .style-list li{border-top-color:transparent;background:var(--card);border-radius:12px;padding:12px 16px;margin-bottom:8px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
/* a small drawing of the site in each look */
.look-demo{background:var(--paper);border-bottom:1px solid var(--line)}
.ld-top{position:relative;display:flex;flex-direction:column;gap:7px;padding:0 16px 34px;
  background:radial-gradient(120% 90% at 78% 8%,var(--glow) 0%,var(--glow-end) 62%),linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}
.ld-bar{display:block;height:14px;margin:0 -16px 8px;background:var(--dark);border-bottom:1px solid rgba(255,255,255,.1)}
.ld-h{display:block;height:11px;width:78%;border-radius:2px;background:#fff}
.ld-h.short{width:52%}
.ld-btns{display:flex;gap:8px;margin-top:6px}
.ld-gold,.ld-light{display:block;width:62px;height:18px;border-radius:3px}
.ld-gold{background:var(--accent)}.ld-light{background:var(--paper)}
.ld-ridge{position:absolute;left:0;right:0;bottom:-1px;height:18px;background:var(--ridge);
  clip-path:polygon(0 100%,0 70%,20% 55%,28% 20%,34% 45%,40% 0,47% 40%,55% 25%,63% 60%,80% 55%,100% 70%,100% 100%)}
.ld-ridge::after{content:"";position:absolute;inset:0;background:var(--paper);
  clip-path:polygon(0 100%,0 88%,22% 80%,30% 55%,36% 72%,42% 40%,49% 66%,57% 58%,65% 80%,82% 78%,100% 86%,100% 100%)}
.ld-page,.ld-sand,.ld-foot{display:flex;flex-direction:column;gap:6px;padding:11px 16px}
.ld-sand{background:var(--sand)}
.ld-foot{background:var(--footer)}
.ld-h2{display:block;height:9px;width:46%;border-radius:2px;background:var(--main)}
.ld-p{display:block;height:6px;width:90%;border-radius:2px;background:var(--ink);opacity:.35}
.ld-p.short{width:64%}
.ld-foot .ld-p{width:50%;background:var(--footer-text);opacity:.8}
/* on other pages while a look is being tried */
.look-note-box{position:fixed;left:12px;bottom:12px;z-index:60}
.look-note{display:block;padding:8px 14px;border-radius:999px;background:var(--dark);color:#fff;
  font-family:var(--disp);font-size:14px;font-weight:600;text-underline-offset:3px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.look-note:hover{background:var(--main)}
@media(max-width:760px){.has-actionbar .look-note-box{bottom:78px}}

/* ====================== restaurant ====================== */

/* a photo of the restaurant behind the headline (site.json > photos > hero) */
.hero-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 45%}
.hero-credit{position:absolute;z-index:1;right:16px;bottom:44px;margin:0;font-family:var(--disp);font-size:12px;color:var(--on-dark-soft)}
@media(max-width:760px){.hero-credit{bottom:34px;left:16px;right:auto}}

/* top bar: Menu and Call now, on every screen size */
.bar .bar-call{display:inline-flex;align-items:center;gap:7px}
.bar .bar-call svg{flex:none;fill:currentColor}
.bar .bar-menu[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--accent)}
@media(max-width:980px){.bar .bar-num{display:none}}
@media(max-width:400px){.bar{gap:8px}.bar .btn-sm{padding:9px 12px}}

/* "Open now, until 4 PM" (hours.js). Always on a dark panel; the words say it, the dot repeats it. */
.open-status{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-family:var(--disp);font-size:15.5px;font-weight:600;line-height:1.35;color:#fff}
.open-status::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#9CE3B4;box-shadow:0 0 0 3px rgba(156,227,180,.28)}
.open-status[data-state="soon"]::before{background:#F4D06F;box-shadow:0 0 0 3px rgba(244,208,111,.3)}
.open-status[data-state="closed"]::before{background:#F4AFAF;box-shadow:0 0 0 3px rgba(244,175,175,.28)}
.endcta .open-status{justify-content:center}

/* hours table: days with the same hours share a row; today is marked (hours.js) */
.hours{border-collapse:collapse;width:100%;max-width:440px;font-family:var(--disp);font-size:15.5px}
.hours th,.hours td{padding:7px 0;border-bottom:1px solid var(--line-soft);text-align:left;font-weight:500;vertical-align:top}
.hours th{padding-right:16px;color:var(--ink)}
.hours td{text-align:right;color:var(--muted);white-space:nowrap}
.hours tr.today th,.hours tr.today td{font-weight:700;color:var(--ink)}
.hours tr.today th::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--main);margin:0 8px 2px -16px;vertical-align:middle}
.hours tr.today th{padding-left:0}
.hours-note{font-size:15px;color:var(--stone);margin:10px 0 0}

/* home: hours, address and paying, right under the top */
.info{list-style:none;margin:0;padding:34px 0 8px;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px}
.info>li{background:var(--card);border:1px solid var(--line-soft);border-radius:4px;padding:20px 22px 20px 34px}
.home .info h2{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--link);margin:0 0 10px}
.home .info h2.sub{margin-top:20px}
.info p{margin:0 0 8px;font-size:16.5px}
.info .pay{font-family:var(--disp);font-weight:700}
@media(max-width:900px){.info{grid-template-columns:1fr}}

/* home: guest favorites */
.favs{background:var(--sand)}
.dishes{list-style:none;margin:30px 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px}
.dishes li{background:var(--card);border:1px solid var(--line-soft);border-radius:4px;overflow:hidden;padding:0 0 16px}
.dishes .ph{border:0;border-radius:0;margin:0 0 14px}
.home .dishes h3{font-size:19px;margin:0 16px 4px}
.home .dishes p{margin-left:16px;margin-right:16px}
.dish-meta{font-family:var(--disp);font-size:14px;color:var(--stone);margin-top:0;margin-bottom:8px}
.dish-price{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--link);margin:0}

/* home: the family's story */
.story .inner{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.story .ph{aspect-ratio:4/3}
@media(max-width:820px){.story .inner{grid-template-columns:1fr;gap:26px}}

/* menu page */
.menu-facts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.menu-facts li{font-family:var(--disp);font-size:14.5px;background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.menu-facts .pay{font-weight:700}
.menu-jump{position:sticky;top:64px;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);margin:0 -24px 6px;padding:10px 24px}
.menu-jump ul{list-style:none;margin:0;padding:2px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.menu-jump a{display:inline-block;white-space:nowrap;font-family:var(--disp);font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink);border:1px solid var(--chip);background:var(--card);border-radius:999px;padding:7px 14px}
.menu-jump a:hover{border-color:var(--main)}
@media(max-width:640px){.menu-jump{top:52px;margin:0 -24px 6px;padding:8px 12px}}
.menu-sec{padding:26px 0 8px;scroll-margin-top:130px}
.page-main .menu-sec h2{font-family:var(--disp);font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--link);margin:0 0 4px}
.menu-note{font-size:16px;color:var(--stone);margin:0 0 8px}
.menu-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
@media(max-width:820px){.menu-items{grid-template-columns:1fr}}
.mi{padding:11px 0;border-bottom:1px dashed var(--line)}
.mi-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-family:var(--disp);font-size:17px}
.mi-name{font-weight:600;color:var(--ink)}
.mi-num{color:var(--link);font-weight:700}
.mi-star{color:var(--link);font-weight:700;margin-left:2px}
.mi-dots{flex:1 0 16px;align-self:center;border-bottom:2px dotted var(--chip)}
.mi-price{margin-left:auto;font-weight:700;color:var(--ink);white-space:nowrap}
.mi-size{font-weight:500;color:var(--stone);font-size:14.5px}
.mi-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:3px}
.mi-desc{font-size:15.5px;color:var(--muted)}
.mi-tag{font-family:var(--disp);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--accent);color:var(--on-accent);border-radius:3px;padding:2px 7px}
.mi-tag-plain{background:var(--sand);color:var(--ink)}
.menu-small{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--stone)}
.menu-small p{margin:0 0 8px}
.menu-small b{color:var(--ink)}

/* reserve and visit pages */
.row3{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:18px}
@media(max-width:600px){.row3{grid-template-columns:1fr;gap:0}}
.address{font-family:var(--disp);font-size:18px;line-height:1.5}
.btn-big{padding:14px 24px;font-size:17px}

/* footer additions */
.foot .fhours{list-style:none;margin:0;padding:0}
.foot .fhours li{padding:2px 0}
.foot .fnote{margin:10px 0 0;color:#fff;font-weight:600}

/* phones: Menu, Call, Directions, Reserve fixed to the bottom (features.json actionBar) */
.actionbar{display:none}
@media(max-width:760px){
  .has-actionbar{padding-bottom:66px}
  .actionbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:4px;background:var(--dark);box-shadow:0 -4px 16px rgba(0,0,0,.22);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .actionbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:6px 4px;border-radius:6px;color:#fff;text-decoration:none;font-family:var(--disp);font-size:13px;font-weight:600}
  .actionbar a:hover{background:rgba(255,255,255,.1)}
  .actionbar svg{fill:currentColor}
}

/* printing the menu: just the dishes and prices */
@media print{
  .bar,.actionbar,.sample,.menu-jump,.endcta,.foot,.skip,.look-note-box,.open-status{display:none!important}
  .page-head{background:none;color:#000;padding:0}
  .page-head h1,.page-head p{color:#000}
  .has-actionbar{padding-bottom:0}
  .mi{break-inside:avoid}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.send .spin{animation:none}}

/* ====================== font and layout options ======================
   site.json > style > font and format (or ?font= &format= on the demo's options board).
   A font file is only downloaded by visitors when its option is chosen. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-latin-ext.woff2) format("woff2");
  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:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/oswald-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/oswald-latin-ext.woff2) format("woff2");
  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 1, Fraunces: a warm, soft serif like a hand-painted sign, with Source Serif for reading */
html[data-font="fraunces"]{--disp:"Fraunces",Georgia,"Times New Roman",serif}
html[data-font="fraunces"] :is(h1,h2,h3){letter-spacing:-.012em;font-variation-settings:"SOFT" 100,"WONK" 0}
html[data-font="fraunces"] .hero h1{font-weight:800;line-height:1.02}
html[data-font="fraunces"] :is(.btn,.bar .name,.mi-line,.menu-jump a,.hours,.info h2){letter-spacing:0}

/* Font 2, Oswald: tall, bold letters like a menu board, with Archivo for reading */
html[data-font="oswald"]{--disp:"Oswald","Arial Narrow",Arial,sans-serif;--serif:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif}
html[data-font="oswald"] :is(h1,h2,h3){letter-spacing:.005em;text-transform:uppercase;font-weight:700}
html[data-font="oswald"] .hero h1{font-size:clamp(40px,6.4vw,70px);line-height:1}
html[data-font="oswald"] .hero h1 .where{text-transform:none;font-weight:500;letter-spacing:.01em}
html[data-font="oswald"] .page-main .menu-sec h2{font-size:clamp(26px,3.6vw,34px)}
html[data-font="oswald"] :is(.btn,.menu-jump a,.info h2,.mi-tag){text-transform:uppercase;letter-spacing:.04em;font-weight:600}
html[data-font="oswald"] .mi-line{font-size:17.5px;letter-spacing:.01em}
html[data-font="oswald"] body{font-size:16.5px}

/* Format 1, Centered: everything on a center line, the menu in one column like a printed menu */
html[data-format="centered"] :is(.hero .inner,.page-head .wrap,.endcta .inner){text-align:center}
html[data-format="centered"] :is(.hero h1,.hero .lede,.page-head p){margin-left:auto;margin-right:auto}
html[data-format="centered"] :is(.hero .cta,.open-status,.menu-facts,.home .book .cta){justify-content:center}
html[data-format="centered"] .home section :is(h2,.lead){text-align:center;margin-left:auto;margin-right:auto}
html[data-format="centered"] :is(.home section h2,.page-main .menu-sec h2)::after{content:"";display:block;width:56px;height:3px;margin:14px auto 0;background:var(--accent);border-radius:2px}
html[data-format="centered"] .home .info h2::after{display:none}
html[data-format="centered"] .info>li{text-align:center;padding-left:22px}
html[data-format="centered"] .info .hours{margin:0 auto}
html[data-format="centered"] .dishes li{text-align:center}
html[data-format="centered"] .favs .inner>p:last-child{text-align:center}
html[data-format="centered"] .story .inner{grid-template-columns:1fr;max-width:760px;text-align:center}
html[data-format="centered"] .story .inner p{margin-left:auto;margin-right:auto}
html[data-format="centered"] .menu-page .wrap{max-width:780px}
html[data-format="centered"] .menu-items{grid-template-columns:1fr}
html[data-format="centered"] :is(.page-main .menu-sec h2,.menu-note){text-align:center}
html[data-format="centered"] .menu-jump ul{justify-content:safe center}
html[data-format="centered"] .menu-small{text-align:center}

/* Format 2, Bold bands: left-aligned, colored bands and thick edges like a menu board */
html[data-format="bands"] .page-head{border-bottom:6px solid var(--accent)}
html[data-format="bands"] .home section h2{border-left:8px solid var(--accent);padding-left:16px}
html[data-format="bands"] .home .info h2{border-left:0;padding-left:0}
html[data-format="bands"] .info>li{border-top:5px solid var(--main);border-radius:0 0 4px 4px}
html[data-format="bands"] .dishes li{border-top:5px solid var(--accent);border-radius:0 0 4px 4px}
html[data-format="bands"] .story .ph{order:2}
html[data-format="bands"] .page-main .menu-sec h2{background:var(--main);color:#fff;padding:10px 16px;border-radius:3px;margin-bottom:8px}
html[data-format="bands"] .menu-note{padding:0 16px}
html[data-format="bands"] .menu-items{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:36px;padding:0 4px}
html[data-format="bands"] .mi-line{text-transform:uppercase;font-size:15.5px;letter-spacing:.02em}
html[data-format="bands"] .mi-num{display:inline-block;min-width:2.1em;text-align:center;background:var(--accent);color:var(--on-accent);border-radius:3px;padding:0 4px;margin-right:4px}
html[data-format="bands"] .mi{border-bottom:1px solid var(--line-soft)}

@media(min-width:641px){html[data-format="centered"] .menu-jump ul{flex-wrap:wrap;justify-content:center}}

/* Format 3, Seamless: no boxes or hard lines. The photo fades into the page, sections blend
   into each other, and the dark bands fade in from the page color. Text always sits on the
   solid part of each fade, never on the see-through part. */
html[data-format="seamless"] .hero .ridge{display:none}
html[data-format="seamless"] .hero .inner{padding-bottom:190px}
html[data-format="seamless"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--paper));pointer-events:none}
html[data-format="seamless"] .hero-credit{top:14px;bottom:auto}
html[data-format="seamless"] .info>li{border:0;border-radius:16px;background:color-mix(in srgb,var(--card) 62%,transparent);box-shadow:0 14px 34px rgba(0,0,0,.06)}
html[data-format="seamless"] .favs{background:linear-gradient(to bottom,var(--paper),var(--sand) 16%,var(--sand) 84%,var(--paper))}
html[data-format="seamless"] .dishes li{border:0;border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.07)}
html[data-format="seamless"] .ph{border:0;border-radius:14px}

/* More fonts (2026-09-30). Each is only downloaded by visitors when its option is chosen. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/playfair-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/playfair-latin-ext.woff2) format("woff2");
  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:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/space-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/space-latin-ext.woff2) format("woff2");
  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:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/bricolage-latin-ext.woff2) format("woff2");
  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:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(../fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(../fonts/nunito-latin-ext.woff2) format("woff2");
  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:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url(../fonts/josefin-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url(../fonts/josefin-latin-ext.woff2) format("woff2");
  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:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/caveat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/caveat-latin-ext.woff2) format("woff2");
  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}

/* Playfair Display: an elegant, high-contrast serif, like a restaurant menu or a boutique */
html[data-font="playfair"]{--disp:"Playfair Display",Georgia,"Times New Roman",serif}
html[data-font="playfair"] :is(h1,h2,h3){font-weight:800;letter-spacing:-.01em}
html[data-font="playfair"] .hero h1{line-height:1.04}
html[data-font="playfair"] :is(.btn,.bar .name,.tabs button,.jump a,.qh,.svc .tick,.eyebrow){letter-spacing:0}

/* Space Grotesk: modern and techy, with Archivo for reading */
html[data-font="space"]{--disp:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--serif:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif}
html[data-font="space"] :is(h1,h2,h3){font-weight:700;letter-spacing:-.025em}
html[data-font="space"] body{font-size:16.5px}

/* Bricolage Grotesque: bold and characterful, with Source Serif for reading */
html[data-font="bricolage"]{--disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif}
html[data-font="bricolage"] :is(h1,h2,h3){font-weight:800;letter-spacing:-.03em}
html[data-font="bricolage"] .hero h1{line-height:.98}

/* Nunito: round and friendly, for headings and reading */
html[data-font="nunito"]{--disp:"Nunito","Helvetica Neue",Arial,sans-serif;--serif:"Nunito","Helvetica Neue",Arial,sans-serif}
html[data-font="nunito"] :is(h1,h2,h3){font-weight:900;letter-spacing:-.015em}
html[data-font="nunito"] body{font-size:17.5px}

/* Josefin Sans: vintage, art deco capitals for headings only (its letters sit high, so
   buttons and labels keep Archivo) */
html[data-font="josefin"] :is(h1,h2,h3){font-family:"Josefin Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
html[data-font="josefin"] .hero h1 .where{text-transform:none;letter-spacing:0}

/* Caveat: handwritten headings only, made a bit bigger (font-size-adjust) so they read as
   easily as the others; buttons and labels keep Archivo */
html[data-font="caveat"] :is(h1,h2,h3){font-family:"Caveat","Comic Sans MS",cursive;font-weight:700;letter-spacing:0;font-size-adjust:.52}
html[data-font="caveat"] .hero h1 .where{font-family:var(--disp);font-size-adjust:none}

html[data-format="seamless"] .book{background:linear-gradient(to bottom,var(--paper) 0,var(--dark) 170px,var(--dark) calc(100% - 140px),var(--footer) 100%)}
html[data-format="seamless"] .book .inner{padding-top:200px}
html[data-format="seamless"] .page-head{background:linear-gradient(to bottom,var(--dark) 0,var(--dark) calc(100% - 100px),var(--paper) 100%);padding-bottom:120px}
html[data-format="seamless"] .endcta{background:linear-gradient(to bottom,var(--paper) 0,var(--dark) 150px,var(--dark) calc(100% - 120px),var(--footer) 100%)}
html[data-format="seamless"] .endcta .inner{padding-top:180px}
html[data-format="seamless"] :is(.mi,.hours th,.hours td){border-bottom-color:transparent}
html[data-format="seamless"] .menu-jump{border-bottom:0;background:color-mix(in srgb,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-format="seamless"] .menu-small{border-top:0}
html[data-format="seamless"] .btn{border-radius:10px}

/* Format 4, Opaque (frosted panels): the restaurant photo stays fixed behind the whole site,
   under the same dark layer as the home page's top, and every section is a solid, frosted
   panel floating over it. Without backdrop blur the panels are simply solid. */
html[data-format="frosted"] body{position:relative;z-index:0;background:var(--dark) var(--site-photo) center / cover no-repeat fixed}
html[data-format="frosted"] body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--video-shade);opacity:var(--video-shade-opacity)}
html[data-format="frosted"] .hero{background:transparent}
html[data-format="frosted"] .hero :is(.hero-media,.soil,.pass,.ridge){display:none}
html[data-format="frosted"] .hero .inner{padding-bottom:96px}
html[data-format="frosted"] .bar{background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.12)}
html[data-format="frosted"] .page-head{background:transparent;padding-bottom:36px}
html[data-format="frosted"] :is(main>section:not(.book),.page-main){width:min(1180px,calc(100% - 32px));margin:0 auto 22px;border-radius:24px;-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 24px 60px rgba(0,0,0,.28)}
html[data-format="frosted"] main>section:not(.book){background:color-mix(in srgb,var(--paper) 90%,transparent)}
html[data-format="frosted"] main>section.favs{background:color-mix(in srgb,var(--sand) 92%,transparent)}
html[data-format="frosted"] .page-main{background:color-mix(in srgb,var(--paper) 92%,transparent)}
html[data-format="frosted"] .infostrip .info{padding-bottom:34px}
html[data-format="frosted"] .info>li{border:0;border-radius:16px;background:color-mix(in srgb,var(--card) 70%,transparent)}
html[data-format="frosted"] .dishes li{border:0;border-radius:16px}
html[data-format="frosted"] .ph{border-radius:12px}
html[data-format="frosted"] :is(.book,.endcta){width:min(1180px,calc(100% - 32px));margin:0 auto 22px;border-radius:24px;background:color-mix(in srgb,var(--dark) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-format="frosted"] .menu-jump{background:color-mix(in srgb,var(--paper) 94%,transparent)}
html[data-format="frosted"] .foot{background:color-mix(in srgb,var(--footer) 94%,transparent)}
html[data-format="frosted"] .btn{border-radius:12px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-format="frosted"] :is(main>section:not(.book),.page-main){background:var(--paper)}
  html[data-format="frosted"] .bar{background:var(--dark)}
}

/* Format 5, Editorial: like Canlis and Hemlock. A light, quiet top with a big centered
   headline in the main color, the restaurant photo underneath in a rounded arch, pill
   buttons, hairlines instead of boxes, and lots of space. */
html[data-format="editorial"] .bar{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
html[data-format="editorial"] .bar .name{color:var(--link)}
html[data-format="editorial"] .bar .name .tag{color:var(--stone)}
html[data-format="editorial"] .btn{border-radius:999px}
html[data-format="editorial"] :is(.bar .bar-menu,.bar .bar-looks summary,.bar .bar-text,.hero .btn-light,.hero .btn-line,.book .btn-line,.endcta .btn-line){background:transparent;color:var(--link);border:1.5px solid var(--link)}
html[data-format="editorial"] :is(.hero .btn-light,.hero .btn-line,.book .btn-line,.endcta .btn-line){padding:11.5px 22px}
html[data-format="editorial"] .bar .bar-menu[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--link)}
html[data-format="editorial"] :is(.bar-looks[open] summary,.bar-text[aria-pressed="true"]){border-color:var(--link);background:var(--tint)}
html[data-format="editorial"] .hero{display:flex;flex-direction:column;background:var(--paper);color:var(--ink)}
html[data-format="editorial"] .hero :is(.soil,.pass,.ridge){display:none}
html[data-format="editorial"] .hero .inner{order:1;text-align:center;padding-top:64px;padding-bottom:36px}
html[data-format="editorial"] .hero h1{color:var(--link);margin-left:auto;margin-right:auto;font-size:clamp(38px,6vw,72px)}
html[data-format="editorial"] .hero h1 .where{color:var(--ink)}
html[data-format="editorial"] .hero .lede{color:var(--muted);margin-left:auto;margin-right:auto}
html[data-format="editorial"] :is(.hero .cta,.hero .open-status){justify-content:center}
html[data-format="editorial"] :is(.hero .open-status,.page-head .open-status,.endcta .open-status){color:var(--ink)}
html[data-format="editorial"] .hero-media{order:2;position:relative;inset:auto;width:min(1100px,calc(100% - 48px));height:clamp(240px,40vw,520px);margin:0 auto;border-radius:999px 999px 28px 28px;overflow:hidden;background:var(--sand)}
html[data-format="editorial"] .hero-media::after{display:none}
html[data-format="editorial"] .hero-credit{order:3;position:static;text-align:center;color:var(--stone);margin:10px 0 44px}
html[data-format="editorial"] .page-head{background:var(--paper);color:var(--ink);text-align:center;border-bottom:1px solid var(--line)}
html[data-format="editorial"] .page-head h1{color:var(--link)}
html[data-format="editorial"] .page-head p{color:var(--muted);margin-left:auto;margin-right:auto}
html[data-format="editorial"] .page-head .open-status{justify-content:center}
html[data-format="editorial"] .home section h2{text-align:center}
html[data-format="editorial"] .home section .lead{margin-left:auto;margin-right:auto;text-align:center}
html[data-format="editorial"] .info>li{background:transparent;border:0;border-radius:0;border-left:1px solid var(--line)}
html[data-format="editorial"] .info>li:first-child{border-left:0}
@media(max-width:900px){html[data-format="editorial"] .info>li{border-left:0;border-top:1px solid var(--line)}html[data-format="editorial"] .info>li:first-child{border-top:0}}
html[data-format="editorial"] .favs{background:var(--paper);border-top:1px solid var(--line)}
html[data-format="editorial"] .dishes li{background:transparent;border:0;text-align:center}
html[data-format="editorial"] .dishes .ph{border-radius:999px 999px 18px 18px}
html[data-format="editorial"] .favs .inner>p:last-child{text-align:center}
html[data-format="editorial"] .story .ph{border-radius:999px 999px 24px 24px;border:0}
html[data-format="editorial"] :is(.book,.endcta){background:var(--sand);color:var(--ink)}
html[data-format="editorial"] :is(.home .book h2,.endcta h2){color:var(--link)}
html[data-format="editorial"] :is(.home .book p,.endcta p){color:var(--muted)}
html[data-format="editorial"] .menu-jump a{border-radius:999px}
html[data-format="editorial"] .page-main .menu-sec h2{text-align:center}
html[data-format="editorial"] .menu-note{text-align:center}
html[data-format="seamless"] :is(.intro,.callout,.restored,.nojs-note){border-left:0;border-radius:14px}
html[data-format="seamless"] :is(.updated,.contact,.send-sec,.checks,.checks li,.mats,.mat){border-color:transparent}
html[data-format="seamless"] :is(.jump a,.opt,.stepper,.req,.addphoto,.look){border-radius:12px}
html[data-format="seamless"] .jump a{border:0;box-shadow:0 4px 14px rgba(0,0,0,.07)}
html[data-format="seamless"] .look{border:0;box-shadow:0 14px 34px rgba(0,0,0,.08)}
html[data-format="seamless"] .foot .base{border-top-color:transparent}
/* A page that ends without a dark band (terms, privacy, color looks): the footer fades in
   from the page too. The footer's words sit below the fade. */
html[data-format="seamless"] main:not(:has(>.book:last-child))+.foot{background:linear-gradient(to bottom,var(--paper) 0,var(--footer) 130px)}
html[data-format="seamless"] main:not(:has(>.book:last-child))+.foot .inner{padding-top:160px}

/* ---------- Motion styles (site.json › style › motion; assets/js/motion.js) ----------
   The background video drives the whole home page, top bar included. Each style has a still
   version made of CSS alone, for browsers without JavaScript, visitors who ask for less
   motion and phones. motion.js adds .motion-live when a style's script runs. */
.cues,.scroll-hint,.vwin{display:none}
.motion-canvas,.flow-shape{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.flow-shape path{fill:var(--flow-shape,var(--flow-1-soft,var(--sand)))}
@media print{.motion-canvas,.flow-shape,.vwin{display:none!important}}

/* The video behind the whole page: Liquid glass, Scene change, Video windows. The shade that
   keeps the headline readable covers the top of the page only, so windows show it clearly. */
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero{background:transparent;min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center}
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero::before{content:"";position:absolute;inset:0;background:var(--video-shade);opacity:var(--video-shade-opacity)}
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero::after{content:none}
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero .ridge{display:none}
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero .inner{padding-top:60px;padding-bottom:90px}
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero-media{position:fixed;inset:0;z-index:-1}
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero-media::after{content:none}
/* The video keeps playing all the way down, so its Pause button stays on screen too. */
:is(html[data-motion="glass"],html[data-motion="scenes"],html[data-motion="windows"]) .home .hero-pause{position:fixed;top:auto;bottom:16px;right:16px;z-index:45}

/* Liquid glass and Scene change: every section floats on frosted glass over the video, with
   gaps where it shows. 92% of the page color keeps every word readable over any frame. */
:is(html[data-motion="glass"],html[data-motion="scenes"]) .home main>section{background:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);border:0;margin:3vh clamp(8px,2vw,28px);border-radius:26px;-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.28)}
/* The dark bands stay solid: their small light text needs every bit of the dark behind it. */
:is(html[data-motion="glass"],html[data-motion="scenes"]) .home main>section.who{background:var(--main)}
:is(html[data-motion="glass"],html[data-motion="scenes"]) .home main>section.book{background:var(--dark);margin-bottom:0;border-radius:26px 26px 0 0}
:is(html[data-motion="glass"],html[data-motion="scenes"]) .home main>section .inner{padding-top:64px;padding-bottom:64px}
:is(html[data-motion="glass"],html[data-motion="scenes"]) .home .vwin{display:block;height:34vh}
html[data-motion="glass"] .home .bar{background:var(--dark);background:color-mix(in srgb,var(--dark) 90%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 -1px 0 rgba(255,255,255,.18)}

/* Video windows: solid walls in the video's colors, start of the video at the top, with open
   windows between them. --wall-deep is the matching top bar color (motion/windows.js). */
html[data-motion="windows"] .home main>section{background:var(--wall);border:0;box-shadow:0 -22px 44px -24px rgba(0,0,0,.55),0 22px 44px -24px rgba(0,0,0,.55)}
html[data-motion="windows"] .home main>section:nth-of-type(5n+1){--wall:var(--flow-1-soft,var(--paper));--wall-deep:var(--flow-1-deep,var(--dark))}
html[data-motion="windows"] .home main>section:nth-of-type(5n+2){--wall:var(--flow-2-soft,var(--sand));--wall-deep:var(--flow-2-deep,var(--dark))}
html[data-motion="windows"] .home main>section:nth-of-type(5n+3){--wall:var(--flow-3-soft,var(--paper));--wall-deep:var(--flow-3-deep,var(--dark))}
html[data-motion="windows"] .home main>section:nth-of-type(5n+4){--wall:var(--flow-4-soft,var(--sand));--wall-deep:var(--flow-4-deep,var(--dark))}
html[data-motion="windows"] .home main>section:nth-of-type(5n){--wall:var(--flow-5-soft,var(--paper));--wall-deep:var(--flow-5-deep,var(--dark))}
html[data-motion="windows"] .home main>section.who{--wall:var(--main);--wall-deep:var(--main)}
html[data-motion="windows"] .home main>section.book{--wall:var(--dark);--wall-deep:var(--dark)}
html[data-motion="windows"] .home main>section .inner{padding-top:84px;padding-bottom:84px}
html[data-motion="windows"] .home .vwin{display:block;height:62vh}

/* The top bar takes the color under it (Video windows, Scene change, Color flow). */
:is(html[data-motion="windows"],html[data-motion="scenes"],html[data-motion="flow"]).motion-live .home .bar{background:var(--bar-bg,var(--dark));transition:background-color .5s ease}

/* Color flow: the page and a big soft shape behind it take the video's colors in order
   (motion/flow.js); sections are see-through except the dark bands. Without JavaScript,
   each section simply has its own color from the video. */
html[data-motion="flow"] .home{background:var(--flow-bg,var(--flow-1-pale,var(--paper)))}
html[data-motion="flow"] .home main>section{background:transparent;border-color:transparent}
html[data-motion="flow"] .home main>section.who{background:linear-gradient(to bottom,transparent 0,var(--main) 130px,var(--main) calc(100% - 130px),transparent 100%)}
html[data-motion="flow"] .home main>section.book{background:linear-gradient(to bottom,transparent 0,var(--dark) 170px,var(--dark) calc(100% - 140px),var(--footer) 100%)}
html[data-motion="flow"] .home .hero::after{background:linear-gradient(to bottom,rgba(0,0,0,0),var(--flow-bg,var(--flow-1-pale,var(--paper))))}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+1):not(.who,.book){background:var(--flow-1-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+2):not(.who,.book){background:var(--flow-2-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+3):not(.who,.book){background:var(--flow-3-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+4):not(.who,.book){background:var(--flow-4-pale,transparent)}
html[data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n):not(.who,.book){background:var(--flow-5-pale,transparent)}

/* Keyhole: the top of the page is pinned while the video opens from a keyhole and plays
   with the scroll (motion/keyhole.js). Without it, the normal top of the page. */
html.motion-live[data-motion="keyhole"] .home .hero{height:235vh;overflow:clip}
html.motion-live[data-motion="keyhole"] .home .hero-stage{position:sticky;top:var(--bar-h,64px);height:calc(100vh - var(--bar-h,64px));overflow:hidden}
html.motion-live[data-motion="keyhole"] .home .hero .inner{padding-top:clamp(28px,7vh,74px);padding-bottom:40px}
html.motion-live[data-motion="keyhole"] .home .cues{display:block;position:absolute;right:6%;bottom:14%;margin:0;padding:0;list-style:none;pointer-events:none;z-index:1}
html.motion-live[data-motion="keyhole"] .home .cues li{position:absolute;right:0;bottom:0;white-space:nowrap;opacity:0;font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:1;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.5)}
html.motion-live[data-motion="keyhole"] .home .scroll-hint{display:block;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft);pointer-events:none}
html.motion-live[data-motion="keyhole"] .home .scroll-hint::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:currentColor;opacity:.7}
@media(max-width:760px){html.motion-live[data-motion="keyhole"] .home .cues{display:none}}

/* ---------- Style menu: text color, fonts and motion (features.json colorLooks) ----------
   The Style menu in the top bar holds the color looks, a Black text / White text switch,
   every font and the motion styles. The text switch also sits in the bar itself on wider
   screens. A choice lasts until the tab closes (early.js). */
.looks-menu{width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain}
.looks-menu-group{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.looks-menu .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.looks-menu .pair button{justify-content:center;border:1.5px solid var(--line-input);min-height:40px}
.looks-menu .pair button[aria-pressed="true"]{border-color:var(--link)}
.looks-menu .pair button[aria-pressed="true"]::after{margin-left:4px}
.text-swatch{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.layout-swatch{flex:none;width:22px;height:18px;border:2px solid currentColor}
.layout-swatch.seamless{border-radius:9px;border-color:transparent;background:linear-gradient(to bottom,var(--link),rgba(0,0,0,0));opacity:.85}
.layout-swatch.normal{border-radius:1px;background:linear-gradient(currentColor,currentColor) 4px 5px/12px 2px no-repeat}
.text-swatch.black{background:#FBF8F2;color:#14181B}
.text-swatch.white{background:#14181B;color:#fff}
.looks-menu .fonts{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.looks-menu .fonts button{font-size:16.5px;min-height:40px}
.looks-menu .motion-links{list-style:none;margin:0;padding:0}
.looks-menu .motion-links a{display:flex;align-items:center;min-height:40px;padding:6px 8px;border-radius:10px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.looks-menu .motion-links a:hover{background:var(--tint)}
.looks-menu .motion-links a[aria-current="true"]{background:var(--sand)}
.looks-menu .motion-links a[aria-current="true"]::after{content:"✓";margin-left:auto;color:var(--link);font-weight:800}
/* each font's name is shown in that font (only downloaded when the menu opens) */
[data-font-pick="fraunces"] span{font-family:"Fraunces",Georgia,serif}
[data-font-pick="archivo"] span{font-family:"Archivo",Arial,sans-serif}
[data-font-pick="oswald"] span{font-family:"Oswald","Arial Narrow",sans-serif}
[data-font-pick="playfair"] span{font-family:"Playfair Display",Georgia,serif}
[data-font-pick="space"] span{font-family:"Space Grotesk",Arial,sans-serif}
[data-font-pick="bricolage"] span{font-family:"Bricolage Grotesque",Arial,sans-serif}
[data-font-pick="nunito"] span{font-family:"Nunito",Arial,sans-serif}
[data-font-pick="josefin"] span{font-family:"Josefin Sans",Arial,sans-serif}
[data-font-pick="caveat"] span{font-family:"Caveat",cursive;font-size:1.25em}
.bar-text{display:inline-flex;align-items:center;gap:7px}
.bar-text .ico{flex:none}
.bar-text[aria-pressed="true"]{border-color:#fff;background:rgba(255,255,255,.14)}
@media(max-width:900px){.bar-text-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bar-text{padding:8px 10px}}
@media(max-width:640px){.bar-text{display:none}.looks-menu .fonts{grid-template-columns:1fr}}

/* ---------- White text version (html[data-text="white"]: the text button) ----------
   Dark pages with light words. The colors (paper, sand, card, ink, muted, stone, link, lines)
   come from lib/night.js, worked out per look and checked in tests/night.test.mjs. */
html[data-text="white"]{color-scheme:dark}
html[data-text="white"] .btn-light{background:#F4F1EC}
html[data-text="white"] :is(.mat-highlights h3 a,.jump a,.tabs button[aria-selected="true"]){color:var(--ink)}
html[data-text="white"] :is(.btn-outline,.btn-add,.addphoto){border-color:var(--link)}
html[data-text="white"] .tabs button[aria-selected="true"]{border-bottom-color:var(--link)}
html[data-text="white"] :is(.intro,.callout,.restored,.nojs-note){border-left-color:var(--link)}
html[data-text="white"] .field[data-invalid="true"] :is(input,select,textarea){background:var(--card)}
html[data-text="white"] .opt:has(input:checked){background:var(--row-hi)}
html[data-text="white"][data-format="seamless"] .ptable tbody tr:nth-child(odd) td{background:var(--row)}
html[data-text="white"] :is(.svc>div,.example,.quotes li,.mat-highlights li){box-shadow:0 14px 34px rgba(0,0,0,.3)}
/* motion styles in white text: walls and the Color flow page use the dark versions of the
   video's colors (lib/flow.js nsoft, npale) */
html[data-text="white"][data-motion="windows"] .home main>section:nth-of-type(5n+1):not(.who,.book){--wall:var(--flow-1-nsoft,var(--paper))}
html[data-text="white"][data-motion="windows"] .home main>section:nth-of-type(5n+2):not(.who,.book){--wall:var(--flow-2-nsoft,var(--sand))}
html[data-text="white"][data-motion="windows"] .home main>section:nth-of-type(5n+3):not(.who,.book){--wall:var(--flow-3-nsoft,var(--paper))}
html[data-text="white"][data-motion="windows"] .home main>section:nth-of-type(5n+4):not(.who,.book){--wall:var(--flow-4-nsoft,var(--sand))}
html[data-text="white"][data-motion="windows"] .home main>section:nth-of-type(5n):not(.who,.book){--wall:var(--flow-5-nsoft,var(--paper))}
html[data-text="white"][data-motion="flow"] .home{background:var(--flow-bg,var(--flow-1-npale,var(--paper)))}
html[data-text="white"][data-motion="flow"] .home .hero::after{background:linear-gradient(to bottom,rgba(0,0,0,0),var(--flow-bg,var(--flow-1-npale,var(--paper))))}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+1):not(.who,.book){background:var(--flow-1-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+2):not(.who,.book){background:var(--flow-2-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+3):not(.who,.book){background:var(--flow-3-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n+4):not(.who,.book){background:var(--flow-4-npale,transparent)}
html[data-text="white"][data-motion="flow"]:not(.motion-live) .home main>section:nth-of-type(5n):not(.who,.book){background:var(--flow-5-npale,transparent)}
html[data-text="white"] .flow-shape path{fill:var(--flow-shape,var(--flow-1-nsoft,var(--sand)))}

/* ---------- Restaurant style (2026-09-30) ----------
   Food first and menu-board touches: a chalkboard of specials, plates drawn or photographed
   on every favorite, a gallery, and menu sections with a painted rule like a menu board. */

/* This week's specials: a chalkboard in a wood frame, always dark with chalk-white words,
   whatever the look or the text color. Caveat (handwriting) for the heading and the days. */
.specials .inner{padding-top:44px;padding-bottom:44px}
.board{position:relative;max-width:820px;margin:0 auto;padding:30px clamp(18px,4vw,46px) 26px;background:#24302B;color:#F4F1E8;border-radius:6px;
  border:10px solid #7A4E2D;box-shadow:inset 0 0 70px rgba(0,0,0,.4),0 16px 34px rgba(0,0,0,.18)}
.home .board h2{font-family:"Caveat","Comic Sans MS",cursive;font-size:clamp(38px,5.4vw,54px);font-weight:700;line-height:1;letter-spacing:0;text-transform:none;color:#FFF7D6;text-align:center;margin:0 0 6px}
.home .board h2::after{content:none}
html[data-format] .home .board h2{border-left:0;padding-left:0;background:none}
.home .board .board-lead{text-align:center;color:#D9E0D6;font-size:16px;margin:0 auto 16px}
.board-list{list-style:none;margin:0;padding:0}
.board-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:9px 0;border-bottom:1px dashed rgba(244,241,232,.28);font-family:var(--disp);font-size:18px;line-height:1.35}
.board-list li:last-child{border-bottom:0}
.sp-day{font-family:"Caveat","Comic Sans MS",cursive;font-size:25px;font-weight:700;color:#F6D776;min-width:5.6em;line-height:1}
.sp-name{color:#F4F1E8;font-weight:600}
.sp-name small{font-weight:400;color:#C9D3C6;font-size:15px}
.board .mi-dots{border-bottom-color:rgba(244,241,232,.38)}
.sp-price{margin-left:auto;font-weight:700;color:#F4F1E8;white-space:nowrap}
@media(max-width:520px){.sp-day{min-width:0;flex-basis:100%}.board{border-width:7px}}

/* Drawings that stand in for photos on the sample (partials/food-art.njk) */
.food-art{display:block;width:100%;height:auto;aspect-ratio:4/3}
.fa-table{fill:var(--sand)}
.fa-cloth{fill:var(--row);opacity:.8}
.dish-art{position:relative;margin:0 0 14px}
.dish-art figcaption,.art-note{position:absolute;right:8px;bottom:8px;font-family:var(--disp);font-size:12px;font-weight:600;line-height:1.4;background:rgba(20,16,12,.76);color:#fff;padding:2px 9px;border-radius:999px}
.dish-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 14px}
.story-art{margin:0}
.story-art .food-art,.story-photo{border-radius:4px}

/* home: a strip of the gallery */
.gstrip{border-top:1px solid var(--line-soft)}
.gstrip-list{list-style:none;margin:28px 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gstrip-list a{display:block;text-decoration:none;color:var(--ink)}
.gstrip-media{position:relative;display:block}
.gstrip-list :is(.food-art,img,.ph){display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.gstrip-t{display:block;font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.3;margin-top:9px}
.gstrip-list a:hover .gstrip-t{text-decoration:underline}
@media(max-width:820px){.gstrip-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the Gallery page */
.gallery-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.chipbtn{font-family:var(--disp);font-size:15px;font-weight:600;min-height:44px;padding:8px 16px;border:1.5px solid var(--line-input);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.chipbtn:hover{border-color:var(--link)}
.chipbtn[aria-pressed="true"]{background:var(--main);border-color:var(--main);color:#fff}
.gallery-count{font-family:var(--disp);font-size:14.5px;color:var(--stone);margin:0 0 6px;min-height:1.4em}
.art-explain{color:var(--stone);margin:0 0 18px}
.gallery-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px}
.shot figure{margin:0;height:100%;background:var(--card);border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
.shot-media{position:relative}
.shot-media :is(img,.food-art,.ph){display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{display:grid;gap:4px;padding:14px 16px 16px}
.shot-tag{font-family:var(--disp);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--link)}
.shot-title{font-family:var(--disp);font-size:18px;font-weight:700;line-height:1.25;color:var(--ink)}
.shot-caption{font-size:15.5px;color:var(--muted)}
.gallery-permission{margin-top:28px;font-size:15px;color:var(--stone)}

/* the menu: "red, green or Christmas", and section names with a painted rule like a menu board */
.chile-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;font-family:var(--disp);font-size:15px}
.ck{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.ck::before{content:"";flex:none;width:13px;height:13px;border-radius:50%;background:#B3202A;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.ck-green::before{background:#4E7D2A}
.ck-xmas::before{background:linear-gradient(90deg,#B3202A 50%,#4E7D2A 50%)}
.ck-text{font-family:var(--serif);color:var(--stone)}
:is(html:not([data-format]),html[data-format="standard"],html[data-format="seamless"]) .page-main .menu-sec h2{display:flex;align-items:center;gap:16px}
:is(html:not([data-format]),html[data-format="standard"],html[data-format="seamless"]) .page-main .menu-sec h2::after{content:"";flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),rgba(0,0,0,0))}

/* the layouts on the new parts */
html[data-format="seamless"] :is(.shot figure,.gstrip-list :is(.food-art,img)){border:0;border-radius:18px}
html[data-format="seamless"] .shot figure{box-shadow:0 14px 34px rgba(0,0,0,.08)}
html[data-format="seamless"] :is(.gstrip,.specials){border-top:0}
html[data-format="seamless"] .board{border-radius:22px}
html[data-format="seamless"] .dish-art .food-art,html[data-format="seamless"] .story-art .food-art{border-radius:14px}
html[data-format="bands"] .shot figure{border-top:5px solid var(--accent);border-radius:0 0 4px 4px}
html[data-format="centered"] .gstrip .inner>p:last-child{text-align:center}
html[data-format="centered"] :is(.gallery-filter,.chile-key){justify-content:center}
html[data-format="editorial"] .hero-stage{display:flex;flex-direction:column}
html[data-format="editorial"] .shot figure{background:transparent;border:0}
html[data-format="editorial"] :is(.shot-media,.gstrip-list :is(.food-art,img)){border-radius:999px 999px 18px 18px;overflow:hidden}
html[data-format="editorial"] .shot figcaption{text-align:center}
html[data-format="editorial"] .gstrip .inner>p:last-child{text-align:center}

/* the Style menu's layout pictures for the restaurant's six layouts */
.layout-swatch.standard{border-radius:1px;background:linear-gradient(currentColor,currentColor) 4px 5px/12px 2px no-repeat}
.layout-swatch.bands{border-radius:1px;border-left-width:6px;border-left-color:var(--accent)}
.layout-swatch.centered{border-radius:1px;background:linear-gradient(currentColor,currentColor) center 4px/10px 2px no-repeat,linear-gradient(currentColor,currentColor) center 9px/6px 2px no-repeat}
.layout-swatch.frosted{border-radius:5px;background:color-mix(in srgb,currentColor 28%,transparent)}
.layout-swatch.editorial{border-radius:11px 11px 2px 2px}

/* ---------- Working model on My Koga (src/_data/model.js) ----------
   My Koga's own bar, in its own colors so it never looks like part of the sample business. */
.model-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;padding:9px 16px;background:#FFF1C2;color:#2A1F05;font-family:var(--disp);font-size:14.5px;line-height:1.4}
.model-what{margin:0}
.model-actions{display:flex;flex-wrap:wrap;gap:8px}
.model-actions :is(button,a){display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1.5px solid #2A1F05;border-radius:3px;background:transparent;color:#2A1F05;font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.model-actions [data-model-send]{background:#2A1F05;color:#FFF1C2}
.model-actions :is(button,a):hover{text-decoration:underline}
.model-status{flex-basis:100%;margin:0;text-align:center;font-weight:600}
.model-status:empty{display:none}
.formstatus[data-kind="model"]{border-left:3px solid #2A1F05;background:#FFF1C2;color:#2A1F05}