/* The Meraki Inn. "The Day", in the style of the reference Adam sent: a thin
   display serif in capitals, a text serif for reading, small spaced capitals
   over a short rule, photographs that hang over the edge of each ground, and
   text set in a bordered card. The home page is one day at the inn, hour by
   hour. Every other page opens on its own hour, in the same very large
   numerals, on the ground that belongs to that time of day.
   Noto Serif Display, Source Serif 4, Jost. No italics anywhere. */
:root {
  --cream: #FBF5E6;
  --paper: #FFFCF6;
  --mist: #F1F6F3;
  --blush: #F8E8DB;
  --sand: #EBD7A8;
  --ink: #14261F;
  --deep: #12231D;
  --slate: #33473F;
  --label: #4E7165;
  --sea: #A9CDBD;
  --coral: #B8324A;
  --display: "Noto Serif Display", Didot, "Bodoni MT", Georgia, serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Jost", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --gut: clamp(20px, 5vw, 72px);
  --max: 1440px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23FBF5E6' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M18 40a12 12 0 0 1 24 0M12 40h36M84 106a12 12 0 0 1 24 0M78 106h36'/%3E%3C/g%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath d='M0 7h28M22 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
em, i, cite, address, dfn { font-style: normal; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.125rem/1.7 var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--coral); }
.dark a:hover { color: #fff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 200; }
p { margin: 0 0 1em; max-width: 58ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
b, strong { font-weight: 600; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--deep); color: var(--cream); padding: 10px 14px; z-index: 100; font: 500 0.9rem var(--sans); }
.skip:focus { left: 12px; }
section[id], article[id] { scroll-margin-top: 96px; }
.fine { font-size: 0.95rem; line-height: 1.5; color: var(--label); }
.w { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.w.narrow { max-width: 900px; }

/* small capitals over a short rule */
.label { margin: 0 0 30px; max-width: none; font: 500 0.82rem/1.4 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--label); }
.label::after { content: ""; display: block; width: 140px; height: 1px; margin-top: 22px; background: currentColor; }
.cap { font-size: clamp(2.1rem, 3.5vw, 3.15rem); line-height: 1.1; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 28px; }
.hair { width: 188px; height: 1px; margin: 52px auto; border: 0; color: inherit; background: currentColor; }
.hair.wide { width: min(860px, 100%); }

/* arrow links, as on the reference */
.go { display: inline-flex; align-items: center; gap: 22px; padding: 11px 0; border: 0; background: none; cursor: pointer; text-decoration: none; text-align: left; color: var(--label); font: 500 0.88rem/1.3 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; }
.go::before { content: ""; flex: none; width: 30px; height: 14px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform 0.25s; }
.go:hover { color: var(--coral); }
.go:hover::before { transform: translateX(6px); }
.gos { display: flex; flex-direction: column; align-items: flex-start; margin: 10px 0 0; max-width: none; }
.gos.wide { flex-direction: row; flex-wrap: wrap; gap: 4px 48px; margin: 0; }
.btn { display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; font: 500 0.86rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; padding: 19px 26px; }
.btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* header */
.hd { position: sticky; top: 0; z-index: 40; background: var(--deep); color: var(--cream); border-bottom: 1px solid rgba(251, 245, 230, 0.3); }
.hd-in { display: flex; align-items: center; gap: 34px; max-width: var(--max); min-height: 78px; margin: 0 auto; padding: 0 var(--gut); }
.mark { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; white-space: nowrap; font: 300 1.32rem/1 var(--display); letter-spacing: 0.09em; text-transform: uppercase; }
.mark svg { width: 40px; height: 40px; padding: 7px; border: 1px solid currentColor; border-radius: 50%; }
.hd a:hover { color: #fff; }
.hd nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.hd nav a { padding: 10px 0; text-decoration: none; white-space: nowrap; font: 500 0.8rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; }
.hd nav a:hover, .hd nav a[aria-current] { text-decoration: underline; text-underline-offset: 8px; }
.hd nav a.book { padding: 13px 18px; border: 1px solid currentColor; }
.hd nav a.book:hover { background: var(--cream); color: var(--deep); text-decoration: none; }
.menu-btn { margin-left: auto; padding: 12px 14px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; font: 500 0.76rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.menu-btn, .menu-btn[hidden] { display: none; }

/* dark ground with a faint sunrise pattern */
.dark { background: var(--deep) var(--pattern); color: var(--cream); }
.dark .label, .dark .go, .dark .fine, .dark .people .role { color: var(--sea); }
.dark .go:hover { color: #fff; }

/* the block: a photograph over a two tone ground, text in a bordered card */
.blocks { background: var(--mist); }
.block { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding-bottom: 128px; background: linear-gradient(90deg, var(--paper) 0, var(--paper) 29%, var(--slate) 29%); }
.block figure { position: relative; }
.block img { width: 100%; object-fit: cover; }
.block .small { grid-column: 3 / 8; grid-row: 1; margin-top: -56px; z-index: 2; }
.block .small img { aspect-ratio: 3 / 2; }
.block .card { position: relative; z-index: 3; grid-column: 1 / 7; grid-row: 2; margin: 10px 0 0 var(--gut); padding: 46px 42px 34px; background: var(--paper); border: 1px solid var(--ink); }
.block .big { grid-column: 7 / 13; grid-row: 1 / 4; margin: 64px 0 0 12%; }
.block .big img { aspect-ratio: 8 / 9; }
.block.solo .card { grid-row: 1; margin-top: 128px; }
.block.solo .big { grid-row: 1 / 3; }
.block.flip { background: linear-gradient(90deg, var(--deep) 0, var(--deep) 71%, var(--paper) 71%); }
.block.flip .small { grid-column: 6 / 11; }
.block.flip .card { grid-column: 7 / 13; margin: 10px var(--gut) 0 0; }
.block.flip .big { grid-column: 1 / 7; margin: 64px 12% 0 0; }
.block.flip.solo .card { margin-top: 128px; }
.card h1, .card h3 { font-size: clamp(2rem, 3.3vw, 3.05rem); line-height: 1.08; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 20px; }
.card p { max-width: none; }
.card .rate { font: 500 0.82rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }
.block.hero { padding-bottom: 150px; }
.block.hero .big { margin-top: 0; }
.block.hero .big img { aspect-ratio: 1 / 1; object-position: 50% 62%; }
.block.hero .card { margin-top: 84px; padding-bottom: 40px; }
.card h1 { text-transform: none; letter-spacing: 0.01em; font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1.12; }
/* the moving hero */
.vid video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 62%; background: var(--slate); }
.vid .still { display: none; }
.motion { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; border: 1px solid rgba(251, 245, 230, 0.8); background: rgba(18, 35, 29, 0.72); color: var(--cream); cursor: pointer; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.motion:hover { background: var(--deep); }
.motion[hidden] { display: none; }
.sun { padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-weight: 600; }

/* the hours */
.hour { position: relative; padding: 118px 0 0; }
.hour.dawn { background: var(--blush); }
.hour.morning { background: var(--mist); }
.hour.noon { background: var(--paper); }
.hour.golden { background: var(--sand); }
.hour.night { padding-bottom: 124px; }
.hour.golden .go { color: var(--ink); }
.hour.golden .go:hover { color: var(--coral); }
.hour.over { padding-top: 232px; }
.hour-title { padding: 0 var(--gut); text-align: center; }
.hour-title h2, .when { margin: 0 -0.42em 0 0; max-width: none; font: 500 clamp(1.05rem, 2vw, 1.7rem)/1.2 var(--sans); letter-spacing: 0.42em; text-transform: uppercase; }
.clock { margin: 14px 0 0; max-width: none; font: 200 clamp(4rem, 13vw, 10rem)/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.clock small { margin-left: 0.3em; font: 500 0.2em/1 var(--sans); letter-spacing: 0.3em; }
.hour-title .hair { margin: 34px auto 62px; }
.hour-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; max-width: var(--max); margin: 0 auto; }
.hour-copy { grid-column: 1 / 6; grid-row: 1; padding: 18px 0 60px var(--gut); }
.hour-g > figure { position: relative; z-index: 2; grid-column: 7 / 13; grid-row: 1; margin-bottom: -112px; }
.hour-g > figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hour-g > figure.tall img { aspect-ratio: 4 / 5; }
.hour-g.rev .hour-copy { grid-column: 8 / 13; padding: 18px var(--gut) 60px 0; }
.hour-g.rev > figure { grid-column: 1 / 7; }
.hour-g.flat .hour-copy { padding-bottom: 0; }
.hour-g.flat > .rows, .hour-g.flat > figure { grid-column: 7 / 13; margin: 0 var(--gut) 0 0; }
.hour.noon.over { padding-bottom: 124px; }
.hour.night .hour-g > figure img { aspect-ratio: 4 / 3; object-position: 50% 78%; }
.hour-table { margin-top: 84px; }

/* an inner page opens on its own hour */
.hour.opener { padding-top: 64px; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 0 0 40px; font: 500 0.74rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { opacity: 0.72; }
.hour-copy h1 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1.12; letter-spacing: 0.01em; margin-bottom: 22px; }
.lede { font-size: 1.22rem; line-height: 1.55; }
.hour.opener.night { padding-bottom: 0; }
.hour.opener.nofig { padding-bottom: 104px; }
.hour-g.solo .hour-copy { grid-column: 3 / 11; padding: 0 var(--gut); text-align: center; }
.hour-g.solo .hour-copy p { margin-left: auto; margin-right: auto; }
.opener + .sec, .opener + .faqs { padding-top: 232px; }
.opener.nofig + .sec { padding-top: 118px; }

/* sections */
.sec { padding: 118px 0; }
.sec.mist { background: var(--mist); }
.sec.paper { background: var(--paper); }
.sec.center { text-align: center; }
.sec.center .cap { margin: 0 auto; padding: 0 var(--gut); max-width: 22ch; }
.sec.center .hair { margin: 34px auto 46px; }
.sec.more { padding: 0 0 96px; }
.faqs + .sec.more { padding-top: 96px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.split img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.split.top { align-items: start; }
.lead-g { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.prose p { max-width: 62ch; font-size: 1.16rem; }
.prose.legal h2 { margin: 54px 0 14px; font-size: 1.9rem; font-weight: 300; letter-spacing: 0.02em; line-height: 1.2; }
.prose.legal h2:first-child { margin-top: 0; }
.prose.legal .fine { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ink); max-width: none; }

.rows li { padding: 28px 0 26px; border-top: 1px solid currentColor; }
.rows li:last-child { border-bottom: 1px solid currentColor; }
.rows h3, .people h3 { font-size: 1.75rem; font-weight: 300; line-height: 1.2; letter-spacing: 0.02em; margin-bottom: 8px; }
.rows p { margin: 0; max-width: 62ch; }
.steps { counter-reset: step; }
.steps li { position: relative; padding-left: 74px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 16px; font: 200 3rem/1 var(--display); }
.checks { margin-top: 8px; }
.checks li { position: relative; padding: 15px 0 15px 40px; border-top: 1px solid rgba(20, 38, 31, 0.28); }
.checks li:last-child { border-bottom: 1px solid rgba(20, 38, 31, 0.28); }
.checks li::before { content: ""; position: absolute; left: 0; top: 1.72em; width: 22px; height: 1px; background: currentColor; }
.checks + .gos { margin-top: 22px; }

.people li { padding: 26px 0 24px; border-top: 1px solid currentColor; }
.people li:last-child { border-bottom: 1px solid currentColor; }
.people h3 { margin-bottom: 0; }
.people .role { margin: 8px 0 10px; font: 500 0.78rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--label); }
.people p { margin: 0; }
.people + .fine { margin-top: 16px; }

/* tables */
.tw { max-width: 1120px; margin: 0 auto; padding: 0 var(--gut); text-align: left; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl caption { caption-side: bottom; padding-top: 20px; text-align: left; font-size: 0.95rem; line-height: 1.5; color: var(--label); }
.tbl th, .tbl td { padding: 22px 26px 20px 0; border-top: 1px solid currentColor; text-align: left; vertical-align: top; }
.tbl thead th { padding: 0 26px 14px 0; border-top: 0; font: 500 0.78rem/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--label); }
.tbl tbody th { width: 31%; font: 300 1.5rem/1.25 var(--display); letter-spacing: 0.02em; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 1px solid currentColor; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.dark .tbl caption, .dark .tbl thead th { color: var(--sea); }

.faqs { padding: 118px var(--gut) 124px; background: var(--mist); text-align: center; }
.faqs .cap { margin-bottom: 0; }
.faqs .hair { margin: 34px auto 46px; }
.faq { max-width: 880px; margin: 0 auto; text-align: left; }
.faq details { border-top: 1px solid var(--ink); }
.faq details:last-child { border-bottom: 1px solid var(--ink); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 24px 54px 24px 0; font: 300 1.55rem/1.25 var(--display); letter-spacing: 0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 200 2.3rem/1.2 var(--display); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 54px 26px 0; max-width: none; }

.bigtel { margin: 30px 0 22px; }
.bigtel a { text-decoration: none; font: 200 clamp(2.2rem, 3.8vw, 3.3rem)/1 var(--display); letter-spacing: 0.04em; }
.form { padding: 42px 40px 36px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.fields label { display: flex; flex-direction: column; gap: 9px; font: 500 0.76rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); }
.fields .full { grid-column: 1 / -1; }
.fields input, .fields select { width: 100%; padding: 13px 12px; border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: 400 1.06rem var(--text); letter-spacing: 0; text-transform: none; }
.total { display: flex; align-items: baseline; gap: 14px; max-width: none; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--ink); }
.total span { margin-right: auto; }
.total b { font: 300 2.2rem/1 var(--display); letter-spacing: 0.02em; }
.total small { font: 500 0.74rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); }
.form .btn { width: 100%; margin-top: 20px; }
.form-note { margin: 16px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--label); max-width: none; }
.form-done { display: none; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--label); background: var(--mist); max-width: none; }
.form-done.show { display: block; }

.ft { padding: 80px var(--gut) 44px; text-align: center; font-size: 1rem; line-height: 1.65; }
.ft .lock { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 auto 46px; max-width: none; font: 200 1.9rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.ft .lock svg { width: 54px; height: 54px; padding: 10px; border: 1px solid currentColor; border-radius: 50%; }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; max-width: 1180px; margin: 0 auto; padding-bottom: 44px; }
.ft h2 { margin-bottom: 14px; font: 500 0.8rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sea); }
.ft p { margin: 8px auto 0; max-width: 34ch; }
.ft li a { text-decoration: none; }
.ft li a:hover { text-decoration: underline; }
.ft-base { max-width: 96ch !important; padding-top: 28px; border-top: 1px solid rgba(251, 245, 230, 0.26); font-size: 0.9rem; color: #C9D6CF; }

/* the assistant: a launcher in the corner and a panel that opens over it */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-open[data-chat-launch] { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 12px; border: 1px solid var(--cream); background: var(--deep); color: var(--cream); cursor: pointer; font: 500 0.8rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(18, 35, 29, 0.3); }
.chat-open[data-chat-launch] svg { width: 32px; height: 32px; padding: 5px; border: 1px solid currentColor; border-radius: 50%; }
.chat-open[data-chat-launch]:hover { background: var(--coral); }
.chat-open[hidden], .chat-open[data-chat-launch][aria-expanded="true"], .chat[hidden], .go[hidden] { display: none; }
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 61; display: flex; flex-direction: column; width: min(420px, calc(100vw - 40px)); height: min(640px, calc(100vh - 118px)); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 18px 50px rgba(18, 35, 29, 0.32); }
.chat-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--deep); color: var(--cream); }
.chat-hd h2 { font-size: 1.3rem; font-weight: 300; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; }
.chat-x { padding: 9px 12px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.chat-x:hover { background: var(--cream); color: var(--deep); }
.chat-log { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow-y: auto; font-size: 1.02rem; line-height: 1.55; }
.chat-msg { max-width: 90%; padding: 12px 15px; border: 1px solid rgba(20, 38, 31, 0.3); }
.chat-msg p { margin: 0; max-width: none; overflow-wrap: anywhere; }
.chat-msg p + p { margin-top: 0.6em; }
.chat-msg.bot { align-self: flex-start; background: #fff; }
.chat-msg.you { align-self: flex-end; background: var(--mist); border-color: var(--label); }
.chat-msg.error { align-self: flex-start; border-color: var(--coral); color: #7C1D2F; }
.chat-msg .go { margin-top: 8px; padding: 6px 0 0; font-size: 0.74rem; letter-spacing: 0.18em; }
.chat-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; max-width: none; }
.chat-starters button { padding: 9px 12px; border: 1px solid var(--label); background: none; color: var(--label); cursor: pointer; text-align: left; font: 500 0.72rem/1.25 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.chat-starters button:hover { border-color: var(--ink); color: var(--ink); }
.chat-status { min-height: 1.5em; margin: 0; padding: 0 18px; max-width: none; font: 500 0.7rem/1.5 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); }
.chat-form { padding: 4px 18px 0; }
.chat-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-row { display: flex; gap: 8px; }
.chat-row input { flex: 1 1 auto; min-width: 0; padding: 12px; border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: 400 1rem var(--text); }
.chat-row .btn { padding: 0 18px; font-size: 0.76rem; }
.chat-row [disabled] { opacity: 0.55; cursor: not-allowed; }
.chat-note { margin: 10px 18px 14px; max-width: none; font-size: 0.8rem; line-height: 1.45; color: var(--label); }
.chat-note button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.chat-note button:hover { color: var(--coral); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vid video, .vid .motion { display: none; }
  .vid .still { display: block; }
  .go::before { transition: none; }
}
@media (max-width: 1160px) {
  .hd nav { gap: 20px; }
  .hd nav a { font-size: 0.74rem; letter-spacing: 0.16em; }
}
@media (max-width: 980px) {
  /* Without the script the links wrap under the name. With it they fold behind a Menu button. */
  .hd-in { flex-wrap: wrap; }
  .hd nav { flex-basis: 100%; flex-wrap: wrap; gap: 2px 22px; margin: 0; padding-bottom: 14px; }
  .js .menu-btn { display: inline-block; }
  .js .hd nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 20px; }
  .js .hd nav.open { display: flex; }
  .js .hd nav a { padding: 17px 0; border-top: 1px solid rgba(251, 245, 230, 0.26); font-size: 0.86rem; letter-spacing: 0.22em; }
  .js .hd nav a.book { margin-top: 14px; padding: 17px; border: 1px solid currentColor; text-align: center; }
}
@media (max-width: 900px) {
  .hair { margin: 36px auto; }
  .sec { padding: 76px 0; }
  .split, .lead-g { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .block, .block.flip { display: flex; flex-direction: column; padding: 0 var(--gut) 70px; background: var(--paper); }
  .block .big { order: -1; }
  .block.flip { background: var(--cream); }
  .block .small { display: none; }
  .block .big, .block.flip .big { margin: 0; }
  .block .big img, .block.hero .big img { aspect-ratio: 4 / 3; }
  .vid video { aspect-ratio: 4 / 3; }
  .block .card, .block.flip .card, .block.solo .card, .block.flip.solo .card, .block.hero .card { margin: 0; padding: 32px 0 0; border: 0; background: none; }
  .block.hero { padding: 32px var(--gut) 70px; }
  .blocks .block:first-child { padding-top: 70px; }
  .faqs { padding: 76px var(--gut) 80px; }
  .faq summary { font-size: 1.32rem; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .hour, .hour.over, .hour.opener { padding-top: 76px; }
  .hour.opener { padding-top: 48px; }
  .hour.noon.over, .hour.night { padding-bottom: 80px; }
  .hour-title .hair { margin: 26px auto 40px; }
  .hour-g { display: block; padding: 0 var(--gut); }
  .hour-copy, .hour-g.rev .hour-copy { padding: 0 0 34px; }
  .hour-g.solo .hour-copy { padding: 0; }
  .hour-g > figure { margin-bottom: 0; padding-bottom: 76px; }
  .hour-g.flat > .rows, .hour-g.flat > figure { margin: 0; }
  .hour.night .hour-g > figure { padding-bottom: 0; }
  .hour.opener.night { padding-bottom: 0; }
  .hour-table { margin-top: 56px; }
  .opener + .sec, .opener + .faqs, .opener.nofig + .sec { padding-top: 76px; }
  .crumbs { margin-bottom: 30px; }
  .tbl tbody th { font-size: 1.3rem; }
}
@media (max-width: 700px) {
  /* A table with three or more columns becomes one stack per row, each cell under its column name. */
  .tbl.lab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl.lab { display: flex; flex-direction: column; }
  .tbl.lab tbody, .tbl.lab tr, .tbl.lab th, .tbl.lab td { display: block; width: auto; }
  .tbl.lab caption { display: block; order: 3; }
  .tbl.lab tr { padding: 22px 0 18px; border-top: 1px solid currentColor; }
  .tbl.lab tbody tr:last-child { border-bottom: 1px solid currentColor; }
  .tbl.lab th, .tbl.lab td, .tbl.lab tbody tr:last-child th, .tbl.lab tbody tr:last-child td { padding: 0; border: 0; }
  .tbl.lab td { margin-top: 12px; }
  .tbl.lab td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--label); }
  .dark .tbl.lab td::before { color: var(--sea); }
  .tbl:not(.lab) tbody th { width: 36%; }
}
@media (max-width: 560px) {
  body { font-size: 1.06rem; }
  .chat { right: 0; bottom: 0; left: 0; width: 100%; height: min(640px, 86vh); border-width: 1px 0 0; }
  .chat-open[data-chat-launch] { right: 12px; bottom: 12px; gap: 9px; padding: 8px 14px 8px 8px; font-size: 0.7rem; letter-spacing: 0.18em; }
  .chat-open[data-chat-launch] svg { width: 26px; height: 26px; padding: 4px; }
  .mark { font-size: 1.02rem; gap: 9px; }
  .mark svg { width: 34px; height: 34px; padding: 6px; }
  .hd-in { min-height: 68px; gap: 12px; }
  .label { margin-bottom: 22px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 28px 22px 26px; }
  .clock small { font-size: 0.24em; }
  .hour-title h2, .when { letter-spacing: 0.3em; margin-right: -0.3em; }
  .steps li { padding-left: 54px; }
  .steps li::before { font-size: 2.4rem; }
  .ft-cols { grid-template-columns: minmax(0, 1fr); }
  .gos.wide { flex-direction: column; }
}