/* HOURGLASS · site.css
   A fashion-editorial salon. Ink, paper and one accent per look (emerald on pearl, copper on inkwell, coral on saltair).
   Bodoni Moda for display, Manrope for reading, DM Mono for captions, prices and times.
   No gradients behind words, no circles, no pills. Every text pairing below was checked for contrast at AA.
   Layout: a thin ink strip, one bar (wordmark, four plain pages, Book a time), full-bleed photographs, an
   asymmetric menu, a sideways lookbook, a numbered roster. On a phone a split bar at the foot: Book, then Call. */
:root {
  --font-head: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 0px;
  --wrap: 1120px;
  --util-h: 44px;
  --bg: #f4f0e8; --bg2: #ebe5d8; --panel: #fbf8f2; --line: #cdc5b3;
  --ink: #0e0e0f; --ink2: #47453f; --accent: #006b4a; --accent-ink: #ffffff; --link: #005a3e; --accent-lt: #4fcf9f;
  --deep: #0e0e0f; --deep-ink: #f4f0e8; --deep-ink2: #bfb9aa;
  --pop: #006b4a;
}
html[data-look="inkwell"] {
  --bg: #0f1014; --bg2: #17181e; --panel: #1b1d24; --line: #3a3c47;
  --ink: #efece4; --ink2: #b9b6ad; --accent: #d9894a; --accent-ink: #0f1014; --link: #f0a56c; --accent-lt: #f0a56c;
  --deep: #07080a; --deep-ink: #efece4; --deep-ink2: #b9b6ad; --pop: #d9894a;
}
html[data-look="saltair"] {
  --bg: #f3f6f8; --bg2: #e6edf1; --panel: #ffffff; --line: #c3d0d8;
  --ink: #10202a; --ink2: #43545f; --accent: #c4472f; --accent-ink: #ffffff; --link: #a8362a; --accent-lt: #ff9a82;
  --deep: #10202a; --deep-ink: #f3f6f8; --deep-ink2: #b9c8d1; --pop: #c4472f;
}
html[data-font="bodoni"] { --font-head: "Bodoni Moda", Georgia, "Times New Roman", serif; }
html[data-font="manrope"] { --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-font="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-corners="round"] { --radius: 16px; }
html[data-corners="sharp"] { --radius: 0px; }
html[data-zone="center"] .hero-copy { text-align: center; }
html[data-zone="center"] .hero-copy .ctas { justify-content: center; }
html[data-zone="right"] .hero-copy { text-align: right; }
html[data-zone="right"] .hero-copy .ctas { justify-content: flex-end; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--font-body); }
img, svg { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.04; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.012em; }
h1 { font-size: clamp(2.7rem, 6.2vw, 5.4rem); line-height: .98; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
p { margin: 0 0 1em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .94em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap.narrow { max-width: 720px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { display: inline-flex; align-items: center; min-height: 44px; position: absolute; left: 8px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 60; border-radius: var(--radius); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--pop); outline-offset: 3px; }
.tiny { font-size: .85rem; color: var(--ink2); }
.lead { font-size: 1.15rem; color: var(--ink2); max-width: 36rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.linkish { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.tpl[hidden] { display: none; }
.kicker { display: flex; align-items: center; gap: 14px; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--link); margin: 0 0 18px; }
.kicker::before { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; }

/* surfaces that are always dark, in every look: the strip, the proof bar, the inner-page masthead, the lookbook, the closer, the colophon */
.util, .proof, .hero.small, .lookbook, .closer, .today, .signup, .foot {
  --bg: var(--deep); --ink: var(--deep-ink); --ink2: var(--deep-ink2); --link: var(--accent-lt); --pop: var(--accent-lt); --line: rgba(255,255,255,.24);
  background: var(--deep); color: var(--deep-ink);
}

/* buttons: square, flat, set in capitals */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent); border-radius: var(--radius); padding: 13px 24px; font: 700 .8rem/1.1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.big { padding: 18px 32px; font-size: .84rem; }
.btn.small { padding: 9px 14px; font-size: .74rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.chip { display: inline-block; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 8px 14px; margin: 0 8px 8px 0; text-decoration: none; font: inherit; font-size: .95rem; cursor: pointer; }
.chip:hover { border-color: var(--accent); }

/* ribbon (demo only) */
.ribbon { background: #fff4d6; color: #3a2a00; border-bottom: 3px solid #e2b23a; font-size: .92rem; }
.ribbon .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; padding: 8px 0; }
.ribbon p { margin: 0; }
.ribbon a { color: #7a4a00; }
.yours { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.yours label { display: flex; flex-direction: column; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.yours input, .yours select { font: inherit; font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 8px 10px; min-height: 44px; border: 1px solid #b89658; border-radius: 4px; background: #fff; color: #222; min-width: 0; width: 150px; }
.yours-lead { font-weight: 700; }
.yours .btn.small { background: #7a4a00; border-color: #7a4a00; color: #fff; }
.yours .btn.small.ghost { background: transparent; color: #7a4a00; }
@media (max-width: 720px) { .yours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; } .yours .yours-lead { grid-column: 1 / -1; } .yours input, .yours select { width: 100%; } }



.top.rail[data-chrome-static] { position: static; } /* the owner turned off "stays at the top" (Builder M11) */
/* language picker */
.langpick { position: relative; }
.langpick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: .9rem; }
.langpick summary::-webkit-details-marker { display: none; }
.langpick .globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langmenu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; display: grid; min-width: 150px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.langmenu a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: var(--radius); }
.langmenu a:hover, .langmenu a[aria-current] { background: var(--bg2); }

/* the language switch: EN and ES are plain buttons in the top bar, always visible, the current one filled in */
.langpick-inline { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.langpick-inline .globe { width: 16px; height: 16px; margin: 0 2px 0 8px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--ink2); flex: none; }
.langpick-inline a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 38px; padding: 0 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; color: var(--ink2); }
.langpick-inline a:hover { color: var(--ink); background: var(--bg2); }
.langpick-inline a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.langpick-inline a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* forms */
label { display: block; font-weight: 600; font-size: .95rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; width: 100%; margin-top: 4px; }
input[type="color"] { width: 48px; height: 36px; padding: 2px; vertical-align: middle; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
p a[data-biz="tel"] { display: inline-block; min-height: 24px; line-height: 24px; }
li > p > a[data-biz="tel"] { min-height: 44px; line-height: 44px; }
.block { margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-weight: 600; }
.receipt { background: var(--panel); border: 2px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; }
.signup { border-top: 1px solid var(--line); }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.signup-form input { flex: 1 1 240px; margin: 0; }
.fallback { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--radius); }

/* owner toolbar */
.owner { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.3); z-index: 40; overflow-y: auto; padding: 0 18px 30px; font-size: .95rem; }
.owner[hidden] { display: none; }
.owner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; position: sticky; top: 0; background: var(--panel); }
.owner-title { margin: 0; font: 700 1.1rem var(--font-head); }
.owner-title .tiny { display: block; font: .8rem var(--font-body); }
.x { background: none; border: 1px solid var(--line); color: inherit; border-radius: 50%; width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tabs button { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font: 600 .8rem var(--font-body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pane .lead { font-size: 1rem; }
.pane label { margin-bottom: 8px; }
.pane .row label { flex: 1 1 160px; }
.looks { display: grid; gap: 8px; margin-bottom: 12px; }
.look { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; background: var(--bg2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer; font: inherit; }
.look[aria-pressed="true"] { border-color: var(--accent); }
.look .swatch { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); }
.look small { color: var(--ink2); }
.swatch-linden { background: linear-gradient(135deg, #f7f3ea 50%, #2f6b57 50%); }
.swatch-inkwell { background: linear-gradient(135deg, #14171f 50%, #d9894a 50%); }
.swatch-saltair { background: linear-gradient(135deg, #f4f7f9 50%, #c4472f 50%); }
.sections { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sections li { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.sections li b { flex: 1; }
.sections li.off b { text-decoration: line-through; color: var(--ink2); }
.sections button { background: none; border: 1px solid var(--line); color: inherit; border-radius: var(--radius); padding: 3px 8px; cursor: pointer; font: inherit; font-size: .85rem; }
.sections select { font: inherit; font-size: .85rem; max-width: 40%; }
.sections li[data-sec] { flex-wrap: wrap; }
.sections li small[data-diff] { flex-basis: 100%; font-size: .8rem; color: var(--ink2); }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.checks li { padding: 6px 10px; border-radius: var(--radius); background: var(--bg2); border-left: 4px solid #4caf50; }
.checks li.warn { border-left-color: #e2b23a; }
.checks li.bad { border-left-color: #d13b2c; }
.ld { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font-size: .75rem; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.ai-team { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-team a { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; color: var(--ink); text-decoration: none; }
.ai-team a span { display: block; font-size: .85rem; color: var(--ink2); }
.url { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; word-break: break-all; font-size: .85rem; flex: 1 1 200px; }
.answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 40px; }
.answer:empty { display: none; }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 14px; }
.nums div { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.nums dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.nums dd { margin: 0; font: 700 1.8rem var(--font-head); font-variant-numeric: tabular-nums; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 6px; }
body.editing [data-edit] { outline: 2px dashed var(--accent); outline-offset: 3px; cursor: text; }
[data-edit][contenteditable="true"]:focus { outline: 3px solid var(--accent); }


/* front desk */
.desk-open { position: fixed; left: 16px; bottom: 16px; z-index: 26; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.desk-open[hidden] { display: none; }
@media (max-width: 720px) { .desk-open { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 12px; } }
/* the floating desk button sits above the call bar on phones; the footer ends clear of both so the Owner link stays tappable */
@media (max-width: 720px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } }
.desk-panel { position: fixed; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); max-height: min(70vh, 560px); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.35); z-index: 41; padding: 0 14px 14px; display: flex; flex-direction: column; }
.desk-panel[hidden] { display: none; }
.desk-log { overflow-y: auto; flex: 1; display: grid; gap: 8px; margin-bottom: 10px; }
.desk-log p { margin: 0; padding: 8px 12px; border-radius: var(--radius); background: var(--bg2); max-width: 92%; }
.desk-log p.you { background: var(--accent); color: var(--accent-ink); margin-left: auto; }
.starters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.starters .chip { margin: 0; font-size: .85rem; padding: 4px 10px; }
.desk-form { display: flex; gap: 6px; }
.desk-form input { margin: 0; }


/* The look peek in the demo ribbon: three swatch buttons, each a whole look, pressed one outlined */
.peek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.peek-cap { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.peek-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #3a2a00; border: 2px solid #d9c08a; border-radius: 999px; padding: 4px 12px 4px 5px; font-size: .82rem; font-weight: 600; line-height: 1.2; font-family: inherit; cursor: pointer; }
.peek-btn .swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.peek-btn:hover { border-color: #7a4a00; }
.peek-btn[aria-pressed="true"] { border-color: #3a2a00; background: #3a2a00; color: #fff; }
@media (max-width: 720px) { .peek { grid-column: 1 / -1; } }


/* ---------- v6.6 Point and change: the Customize button and the editor ---------- */
.q-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.q-cz { display: grid; gap: 2px; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.q-cz b { font: 600 .95rem var(--font-head); }
.q-cz small { font-size: .78rem; color: var(--ink2); line-height: 1.3; }
.q-cz[aria-pressed="true"] { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.q-cz:focus-visible { outline: 2px solid #1D67CD; outline-offset: 2px; }
#cz { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.cz-box, .cz-sec-box { position: fixed; border-radius: 6px; pointer-events: none; transition: all .08s ease-out; }
.cz-box { outline: 3px solid #1D67CD; outline-offset: 2px; background: rgba(29,103,205,.08); }
.cz-sec-box { outline: 2px dashed rgba(29,103,205,.75); outline-offset: -2px; }
.cz-sec-box.whole { outline-style: solid; outline-width: 3px; background: rgba(29,103,205,.06); }
.cz-chip { position: absolute; left: 0; top: -30px; background: #1D67CD; color: #fff; font: 600 .78rem/1 var(--font-body); padding: 7px 10px; border-radius: 6px; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cz-sec-chip { top: 6px; left: 6px; background: rgba(20,40,90,.88); }
.cz-box[hidden], .cz-sec-box[hidden] { display: none; }
.cz-pop { position: fixed; z-index: 48; width: min(380px, calc(100vw - 24px)); max-height: min(78vh, 620px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(10,20,50,.3); padding: 12px 16px 16px; font-size: .95rem; }
.cz-pop[hidden] { display: none; }
.cz-pop.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-height: 82vh; max-height: 82dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.cz-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cz-pop-head h2 { margin: 0; font: 600 1.05rem var(--font-head); outline: none; }
.cz-pop label { display: block; font-weight: 600; font-size: .88rem; margin: 10px 0 4px; }
.cz-pop textarea { min-height: 90px; }
.cz-acts { display: grid; gap: 6px; }
.cz-act { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; cursor: pointer; }
.cz-act b { font-size: .95rem; }
.cz-act small { font-size: .8rem; color: var(--ink2); line-height: 1.3; }
.cz-act:hover, .cz-act:focus-visible { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.cz-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.cz-hint { font-size: .82rem; color: var(--ink2); margin: 6px 0 0; }
.cz-msg { font-size: .88rem; margin: 8px 0 0; min-height: 0; }
.cz-msg:empty, .cz-answer:empty { display: none; }
.cz-answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: .88rem; margin: 10px 0 0; max-height: 240px; overflow: auto; }
.cz-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 46; width: min(620px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(10,20,50,.28); padding: 10px 14px; font-size: .92rem; }
.cz-bar[hidden] { display: none; }
.cz-bar p { margin: 0; }
.cz-bar .cz-note:empty { display: none; }
.cz-bar .cz-note { margin-top: 4px; font-size: .85rem; color: var(--ink2); }
.cz-bar .cz-row { margin-top: 8px; }
@media (max-width: 720px) { .cz-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
body.customizing main * { cursor: pointer; }
@media (max-width: 720px) { body.customizing .callbar { display: none; } }
.cz-added { margin-top: 18px; }
.cz-added.cz-text p { max-width: 42rem; }
.cz-pic { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.cz-sec .wrap > :first-child { margin-top: 0; }
.cz-sec .wrap > h2 + p { margin-inline: auto; text-align: center; max-width: 42rem; }
[data-layout="center"] { text-align: center; }
[data-layout="center"] .cz-pic { margin-inline: auto; }
[data-layout="narrow"] > .wrap { max-width: 760px; }
[data-layout="shade"] { background: var(--bg2); }
.cz-flash { animation: cz-flash 1.2s ease-out; }
@keyframes cz-flash { 0% { box-shadow: inset 0 0 0 4px #1D67CD, 0 0 0 4px rgba(29,103,205,.35); } 100% { box-shadow: inset 0 0 0 4px rgba(29,103,205,0), 0 0 0 4px rgba(29,103,205,0); } }
@media (prefers-reduced-motion: reduce) { .cz-flash { animation: none; box-shadow: inset 0 0 0 4px #1D67CD; } }
.cz-peek { box-shadow: inset 0 0 0 4px rgba(29,103,205,.7); }

/* A section's own look, set in Customize, whole section, Look (lib/added.cjs look() writes the --s-* values).
   Panels inside the section (cards, forms, tables) keep the site's own ink, so words on white stay dark. */
html { --muted: var(--ink2); --pink: var(--ink); --pink2: var(--ink2); --pmuted: var(--muted); }
main > section[data-s-fg] { color: var(--s-fg); --ink: var(--s-fg); --ink2: var(--s-fg); --muted: var(--s-fg); --hero-ink: var(--s-fg); }
main > section[data-s-fg] :is(.sub, .kicker, .lead, .tiny, .btn.ghost) { color: var(--s-fg); }
main > section[data-s-fg] .btn.ghost { border-color: var(--s-fg); }
main > section[data-s-fg] :is(.hero-panel, .strip li, .hours, .receipt, .fallback, .provider, .cz-card:not([data-s-card]), input, select, textarea) { --ink: var(--pink); --ink2: var(--pink2); --muted: var(--pmuted); color: var(--pink); }
main > section[data-s-head] :is(h1, h2, h3):not(:is(.hero-panel, .strip li, .hours, .receipt, .fallback, .provider, .cz-card) *) { color: var(--s-head); }
main > section[data-s-bg]:not([data-s-pic]) { background: var(--s-bg); }
main > section[data-s-bg]:not([data-s-pic])::before, main > section[data-s-pic]::before { display: none; }
main > section[data-s-pic] { background-image: linear-gradient(rgba(16,20,26,.62), rgba(16,20,26,.72)), var(--hero-photo); background-size: cover; background-position: center; }
main > section[data-s-pic][data-s-bg] { background-image: linear-gradient(color-mix(in srgb, var(--s-bg) 72%, transparent), color-mix(in srgb, var(--s-bg) 80%, transparent)), var(--hero-photo); }
main > section[data-s-pic] :is(h1, h2, .sub, .lead) { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
main > section[data-s-pic][data-s-bg] :is(h1, h2, .sub, .lead) { text-shadow: none; }
main > section[data-s-pic]:not(#_) { background-size: cover; background-position: center; background-repeat: no-repeat; }
main > section[data-s-btn] { --accent: var(--s-btn); --accent-ink: var(--s-btn-ink); }
main > section[data-s-font="bodoni"] { --font-body: "Bodoni Moda", Georgia, serif; }
main > section[data-s-font="manrope"] { --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; }
main > section[data-s-font="serif"] { --font-body: Georgia, "Times New Roman", serif; }
main > section[data-s-font="system"] { --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-font] { font-family: var(--font-body); }
main > section[data-s-hfont="bodoni"] { --font-head: "Bodoni Moda", Georgia, serif; }
main > section[data-s-hfont="manrope"] { --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; }
main > section[data-s-hfont="serif"] { --font-head: Georgia, "Times New Roman", serif; }
main > section[data-s-hfont="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-size="s"] { --s-k: .88; }
main > section[data-s-size="l"] { --s-k: 1.14; }
main > section[data-s-size="xl"] { --s-k: 1.3; }
main > section[data-s-size] { font-size: calc(17px * var(--s-k)); }
main > section[data-s-size] h1 { font-size: calc(clamp(2.1rem, 5vw, 3.4rem) * var(--s-k)); }
main > section[data-s-size] h2 { font-size: calc(clamp(1.7rem, 3.4vw, 2.4rem) * var(--s-k)); }
main > section[data-s-size] :is(h3, h2.h3) { font-size: calc(1.25rem * var(--s-k)); }
main > section[data-s-size] :is(.lead, .sub) { font-size: calc(1.1rem * var(--s-k)); }
main > section[data-s-space="tight"] { padding-block: clamp(24px, 3.5vw, 44px); }
main > section[data-s-space="roomy"] { padding-block: clamp(72px, 11vw, 150px); }
main > section[data-s-align="left"], main > section[data-s-align="left"] :is(h1, h2, .hero-in, .lead, .sub, p.center) { text-align: left; }
main > section[data-s-align="left"] :is(.lead, .sub) { margin-inline: 0; }
main > section[data-s-align="left"] .hero .ctas, main > section[data-s-align="left"].hero .ctas { justify-content: flex-start; }
main > section[data-s-align="center"], main > section[data-s-align="center"] :is(h1, h2, h3, p, .hero-in) { text-align: center; }
main > section[data-s-align="center"] :is(.lead, .sub, .cz-pic) { margin-inline: auto; }

/* Boxes the owner added: side by side cards, each with its own color if chosen */
.cz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; margin-top: 18px; }
.cz-cards > .cz-card { margin: 0; }
.cz-card { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 14px; }
.cz-card h3 { color: inherit; }
.cz-card[data-s-card] { background: var(--s-card); color: var(--s-card-ink); border-color: transparent; --ink: var(--s-card-ink); --ink2: var(--s-card-ink); }
.cz-picture[data-size="s"] .cz-pic { max-width: min(320px, 100%); }
.cz-picture[data-size="l"] .cz-pic { width: 100%; }

/* The whole-section editor: tabs, the parts list and color rows */
.cz-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 10px; padding: 3px; background: var(--bg2); border-radius: var(--radius); }
.cz-tab { font: 600 .85rem/1.2 var(--font-body); padding: 8px 4px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink); cursor: pointer; }
.cz-tab[aria-selected="true"] { background: var(--panel); color: #1D67CD; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cz-tab:focus-visible { outline: 2px solid #1D67CD; outline-offset: 1px; }
.cz-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cz-part { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; line-height: 1.35; }
.cz-part b { font-weight: 700; }
.cz-part.gone { opacity: .7; border-style: dashed; }
.cz-part-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-part-btns .btn.small { padding: 5px 10px; font-size: .8rem; }
.cz-color-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.cz-pop .cz-color-row label { margin: 0; flex: 1; }
.cz-pop .cz-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.cz-check input { width: auto; margin: 0; }



/* a section with a photo behind it carries white words; panels inside keep the site's own ink */
main > section[data-s-pic]:not([data-s-fg]):not([data-s-bg]) { color: #fff; --ink: #fff; --ink2: #fff; --link: #fff; }
main > section[data-s-pic]:not([data-s-fg]):not([data-s-bg]) :is(.kicker, .sub, .lead, .tiny, .btn.ghost) { color: #fff; }
main > section[data-s-pic]:not([data-s-fg]):not([data-s-bg]) .btn.ghost { border-color: #fff; }
main > section[data-s-pic]:not([data-s-fg]):not([data-s-bg]) :is(.hero-panel, .strip li, .hours, .receipt, .fallback, .provider, .cz-card:not([data-s-card]), input, select, textarea, .lrow) { --ink: var(--pink); --ink2: var(--pink2); color: var(--pink); }


/* ======================= the page ======================= */
/* the owner tooling keeps its own markup; its round bits go square, its swatches take this palette */
.x, .look .swatch, .peek-btn, .peek-btn .swatch, .tabs button, .desk-open { border-radius: 0; }
.swatch-linden { background: linear-gradient(135deg, #f4f0e8 50%, #006b4a 50%); }
.swatch-inkwell { background: linear-gradient(135deg, #0f1014 50%, #d9894a 50%); }
.swatch-saltair { background: linear-gradient(135deg, #f3f6f8 50%, #c4472f 50%); }
.desk-open { position: fixed; left: 16px; bottom: 16px; z-index: 44; box-shadow: none; background: var(--ink); color: var(--bg); border: 2px solid var(--ink); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; transition: opacity .2s; }
.desk-open:hover { transform: none; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
body:not([data-past-hero]) .desk-open { visibility: hidden; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .desk-open { transition: none; } }
.still { display: none; }

/* header: a thin ink strip, then one bar of wordmark, four plain pages and the booking button */
.top.rail { position: sticky; top: calc(-1 * var(--util-h)); z-index: 40; background: var(--bg); border-bottom: 1px solid var(--ink); }
.util { height: var(--util-h); }
.util-in { width: min(var(--wrap), 100% - 32px); margin-inline: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rail-now { min-width: 0; }
.now { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.dot { flex: none; width: 9px; height: 9px; border: 2px solid currentColor; background: transparent; }
.now[data-state="open"] .dot { background: var(--accent-lt); border-color: var(--accent-lt); }
.now-text span { display: inline; }
.util-tools { display: flex; align-items: center; gap: 4px 18px; }
.util .call, .callbar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font: 500 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.util .call:hover { color: var(--link); }
.call svg, .callbar svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.call b { font-weight: 500; }
[data-biz="phone"] { white-space: nowrap; }
.langpick-inline { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0; }
.langpick-inline .globe { display: none; }
.langpick-inline a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 0; font: 500 .72rem/1 var(--font-mono); letter-spacing: .14em; text-decoration: none; color: var(--ink2); }
.langpick-inline a:hover { color: var(--ink); background: transparent; text-decoration: underline; }
.langpick-inline a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.rail-in { width: min(var(--wrap), 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav book"; align-items: center; gap: 8px 28px; min-height: 84px; padding: 8px 0; }
.brand { grid-area: brand; display: inline-flex; align-items: center; min-height: 44px; max-width: 9.6em; font: 400 1.6rem/1.04 var(--font-head); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.rnav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
.rnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0 0; border-bottom: 3px solid transparent; color: var(--ink); text-decoration: none; font: 700 .76rem/1 var(--font-body); letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.rnav a:hover { color: var(--link); }
.rnav a[aria-current="page"] { border-bottom-color: var(--accent); }
.bookbar { grid-area: book; white-space: nowrap; }
.callbar { display: none; }
@media (max-width: 1023px) {
  .rail-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand book" "nav nav"; min-height: 0; padding: 10px 0 4px; }
  .rnav { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .top.rail { position: static; }
  .util .call { display: none; }
  .now { font-size: .68rem; letter-spacing: .08em; }
  .now-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-now { flex: 1 1 auto; }
  .rail-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "nav"; padding: 12px 0 0; }
  .brand { max-width: none; font-size: 1.7rem; }
  .rnav { gap: 0 18px; flex-wrap: nowrap; overflow-x: auto; padding: 2px 3px 3px; margin: 0 -3px; scrollbar-width: none; }
  .rnav::-webkit-scrollbar { display: none; }
  .rnav a { font-size: .72rem; letter-spacing: .11em; flex: none; }
  .top .bookbar { position: fixed; left: 0; right: 38%; bottom: 0; z-index: 45; min-height: 60px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 2px solid var(--ink); font-size: .82rem; }
  .callbar { position: fixed; left: 62%; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: center; min-height: 60px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--deep); color: var(--deep-ink); border-top: 2px solid var(--ink); font-size: .82rem; font-weight: 700; }
  .callbar [data-biz="phone"] { display: none; }
  .callbar:hover { color: var(--deep-ink); }
  .desk-open { left: 12px; bottom: calc(60px + 14px + env(safe-area-inset-bottom, 0px)); }
  body.customizing .callbar, body.customizing .top .bookbar { display: none; }
}

/* hero: a full-bleed photograph, one paper panel set low and to the left, a bar of true facts under it */
.hero { position: relative; background: var(--bg); }
.hero-in { position: relative; z-index: 1; }
.hero-copy { background: var(--bg); color: var(--ink); max-width: 31rem; padding: 32px 30px 34px; margin: 0 0 40px; }
.hero-copy h1 { margin-bottom: .3em; font-size: clamp(2.4rem, 4vw, 3.5rem); }
.sub { font-size: 1.08rem; color: var(--ink2); max-width: 30rem; margin: 0 0 22px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
html[data-zone="center"] .hero-copy { margin-inline: auto; }
html[data-zone="right"] .hero-copy { margin-left: auto; }
.hero.has-photo { min-height: min(88vh, 54rem); display: flex; flex-direction: column; justify-content: flex-end; background: var(--deep); }
.hero.has-photo .hero-in { padding-top: 90px; }
.hero-photo { position: absolute; inset: 0; display: block; margin: 0; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero:not(.has-photo):not(.small) { background: var(--deep); padding-top: 84px; }
.hero:not(.has-photo):not(.small) .hero-copy { margin-bottom: 0; }
.hero.small { padding: 64px 0 60px; }
.hero.small .hero-copy { background: none; padding: 0; margin: 0; max-width: 52rem; }
.hero.small h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.hero.small .sub { max-width: 36rem; }
.proof { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 max(0px, calc((100% - var(--wrap)) / 2)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof li { padding: 20px 22px 20px 0; font: 500 .74rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; border-left: 1px solid var(--line); padding-left: 22px; }
.proof li:first-child { border-left: 0; padding-left: 0; }
.proof .now { font-size: inherit; letter-spacing: inherit; color: var(--ink); }
.proof .now.big { font-size: inherit; }
@media (max-width: 720px) {
  .hero.has-photo { display: block; min-height: 0; background: var(--bg); }
  .hero-photo { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; width: 100%; }
  .hero.has-photo .hero-in { padding-top: 0; margin-top: -44px; }
  .hero-copy { padding: 26px 22px 24px; margin: 0; }
  .hero.has-photo .proof { background: var(--deep); margin-top: 28px; }
  .hero:not(.has-photo):not(.small) { padding-top: 40px; }
  .hero.small { padding: 40px 0 40px; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 16px; }
  .proof li { padding: 16px 12px 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof li:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--line); }
  .proof li:nth-child(-n+2) { border-top: 0; }
}

/* bands */
.band { padding: 92px 0; }
.band.alt { background: var(--bg2); }
.band > .wrap > h2 { max-width: 15em; }
@media (max-width: 720px) { .band { padding: 60px 0; } }
.photo { display: block; }
.photo img { display: block; width: 100%; height: auto; }
.tz-note { margin: 14px 0 0; }

/* today: the week set as a strip of hours */
.strip { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.strip li { padding: 16px 14px 18px 0; display: grid; gap: 12px; align-content: start; }
.strip li + li { padding-left: 14px; border-left: 1px solid var(--line); }
.strip b { font: 500 .78rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.strip .bar { position: relative; display: block; height: 8px; background: var(--line); }
.strip li:not(.shut) .bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); background: var(--accent-lt); }
.strip li.shut .bar { background: transparent; border-top: 1px dashed var(--ink2); height: 0; margin: 4px 0; }
.strip li[aria-current="date"] b::after { content: "today"; margin-left: 8px; padding: 2px 6px; background: var(--accent-lt); color: var(--deep); font-size: .62rem; letter-spacing: .1em; vertical-align: .08em; }
.strip li[aria-current="date"] .bar::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--now, -10px); width: 3px; margin-left: -1px; background: var(--ink); }
.strip .hrs { font-size: .8rem; line-height: 1.35; color: var(--ink2); }
@media (min-width: 721px) and (max-width: 1100px) { .strip .hrs { font-size: .7rem; } }
@media (max-width: 720px) {
  .strip { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .strip li, .strip li + li { grid-template-columns: 4.2rem minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .strip li[aria-current="date"] b::after { display: none; }
  .strip .hrs { text-align: right; white-space: nowrap; }
}

/* hours table (visit page) */
.hours { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); }
.hours th, .hours td { text-align: left; padding: 14px 8px 14px 0; border-bottom: 1px solid var(--line); }
.hours thead th { font: 500 .72rem var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink2); }
.hours tbody th { font: 400 1.25rem var(--font-head); }

/* the menu: photographs with the price written like a caption, then ruled rows for what has no photograph */
.menu .tiles { display: grid; gap: 36px 32px; margin-top: 52px; align-items: start; }
.tiles-3 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b c"; }
.tiles-2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "a b"; }
.tiles-1 { grid-template-columns: minmax(0, 28rem); grid-template-areas: "a"; }
.t1 { grid-area: a; } .t2 { grid-area: b; } .t3 { grid-area: c; }
.tiles-3 .t2 { margin-top: 64px; } .tiles-3 .t3 { margin-top: 128px; } .tiles-2 .t2 { margin-top: 64px; }
.tphoto .photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.tiles-3 .t1 .tphoto .photo img { aspect-ratio: 4 / 4.4; }
.tbody { padding-top: 18px; }
.cap { margin: 0 0 6px; font: 500 .76rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.cap .n { font-size: 1.1rem; color: var(--ink); letter-spacing: .02em; }
.cap .sep { margin: 0 6px; color: var(--link); }
.tbody h3, .rname h3 { font: 400 1.9rem/1.1 var(--font-head); margin: 0 0 .2em; }
.tbody h3 a, .rname h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.tbody h3 a:hover, .rname h3 a:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tbody p, .rdesc p { color: var(--ink2); max-width: 30rem; }
.expect-head { margin: 1.3em 0 .3em !important; font: 500 .72rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink) !important; }
.expect { margin: 0 0 .5em; padding-left: 20px; color: var(--ink2); }
.rows { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.tiles + .rows { margin-top: 72px; }
.lrow { display: grid; grid-template-columns: minmax(0, 1.4fr) 7rem 8rem; grid-template-areas: "name time price" "desc desc desc"; gap: 0 24px; align-items: baseline; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.rname { grid-area: name; } .rtime { grid-area: time; } .rprice { grid-area: price; } .rdesc { grid-area: desc; }
.rtime, .rprice { margin: 0; text-align: right; font: 500 .76rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.rtime .n, .rprice .n { font-size: 1.2rem; color: var(--ink); letter-spacing: .02em; }
.rdesc p { margin: 0 0 .4em; }
.menu > .wrap > .row { margin-top: 44px; }
.menu .lead { margin-bottom: 0; }
@media (max-width: 900px) {
  .menu .tiles { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 44px; margin-top: 36px; }
  .menu .tiles > * { grid-area: auto; margin-top: 0 !important; }
  .tphoto .photo img, .tiles-3 .t1 .tphoto .photo img { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .lrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "time time" "desc desc"; }
  .rtime { text-align: left; margin-bottom: 6px; }
  .tbody h3, .rname h3 { font-size: 1.7rem; }
}

/* lookbook: reference photographs, scrolling sideways */
.lookbook { padding: 92px 0 100px; }
.lookbook .lead { margin-bottom: 0; }
.scroller { margin-top: 44px; overflow-x: auto; padding: 4px max(16px, calc((100% - var(--wrap)) / 2)) 26px; scroll-snap-type: x proximity; scroll-padding-inline: max(16px, calc((100% - var(--wrap)) / 2)); scrollbar-color: var(--deep-ink2) transparent; }
.scroller:focus-visible { outline-offset: -4px; }
.lookrow { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; width: max-content; }
.lookrow > li { flex: 0 0 clamp(15rem, 26vw, 21rem); scroll-snap-align: start; }
.lookrow figure { margin: 0; }
.look-photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.lookrow figcaption { display: grid; gap: 4px; padding-top: 14px; }
.lookrow .no { font: 500 .72rem/1.2 var(--font-mono); letter-spacing: .16em; color: var(--accent-lt); }
.lookrow .what { font: 400 1.55rem/1.1 var(--font-head); }
.lookrow .who { font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.lookrow .look-cta { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 28px; border: 1px solid var(--line); aspect-ratio: 4 / 5; align-self: flex-start; }
.look-cta p { font: 400 1.8rem/1.12 var(--font-head); margin: 0 0 22px; }

/* the roster: named people with a numeral each */
.roster { list-style: none; margin: 52px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.roster li { display: grid; grid-template-columns: 6rem minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "num who bio"; gap: 12px 40px; align-items: start; padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.roster .num { grid-area: num; font: 400 clamp(3rem, 6vw, 5rem)/.9 var(--font-head); color: var(--link); }
.roster .who { grid-area: who; }
.roster .bio { grid-area: bio; padding-top: .5rem; }
.roster h3 { font: 400 clamp(2.1rem, 3.8vw, 3.2rem)/1.02 var(--font-head); margin: 0 0 .25em; }
.role { margin: 0; font: 500 .76rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.roster .bio p { color: var(--ink2); }
.days { margin: 0; }
@media (max-width: 720px) {
  .roster li { grid-template-columns: 3.4rem minmax(0, 1fr); grid-template-areas: "num who" "bio bio"; gap: 10px 14px; padding: 28px 0 30px; }
  .roster .num { font-size: 2.6rem; }
  .roster .bio { padding-top: 0; }
}

/* the closer */
.closer { padding: 108px 0 112px; }
.closer h2 { font-size: clamp(2.8rem, 8vw, 7rem); line-height: .96; max-width: 11em; margin-bottom: .5em; }
@media (max-width: 720px) { .closer { padding: 64px 0 72px; } }

/* policies, the owner's words: a margin of heads */
.policies { margin: 28px 0 0; border-top: 1px solid var(--ink); }
.pol { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pol dt { font: 400 1.5rem/1.15 var(--font-head); }
.pol dd { margin: 0; color: var(--ink2); }
@media (max-width: 720px) { .pol { grid-template-columns: 1fr; } }
.faq { margin-top: 28px; border-top: 1px solid var(--ink); }
.faq .qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 40px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq h3 { font: 400 1.5rem/1.2 var(--font-head); margin: 0; }
.faq p { margin: 0; color: var(--ink2); }
@media (max-width: 720px) { .faq .qa { grid-template-columns: 1fr; } }
.points { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.points li { padding: 22px 0 10px; border-bottom: 1px solid var(--line); }
.points h3 { font: 400 1.5rem/1.2 var(--font-head); }
.points p { color: var(--ink2); }
.prose h2 { font-size: 1.9rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 6px; }
.addr { font: 400 clamp(1.7rem, 3.4vw, 2.5rem)/1.2 var(--font-head); margin: 0 0 .6em; }
.reach { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.reach li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 4px 28px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reach h3 { font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin: 0; }
.reach p { margin: 0; }
.reach a { display: inline-flex; align-items: center; min-height: 44px; font: 400 1.5rem/1.2 var(--font-head); color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.reach a:hover { color: var(--link); }
@media (max-width: 720px) { .reach li { grid-template-columns: 1fr; } .reach a { font-size: 1.3rem; overflow-wrap: anywhere; } }

/* the request form: a numbered sheet, fields as ruled lines */
.request-band { background: var(--bg2); }
.provider { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 14px 18px 4px; margin: 0 0 24px; }
.req-note { margin: 0 0 16px; }
.stepped .step { border-top: 1px solid var(--ink); padding: 22px 0 10px; margin-bottom: 8px; }
.stepped .step-h { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 0; font: 500 .8rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.stepped .step-n { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 2rem; height: 2rem; padding: 0 4px; background: var(--ink); color: var(--bg); font: 500 .85rem/1 var(--font-mono); letter-spacing: 0; }
fieldset.choices { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.stepped .choices legend { padding: 0; width: 100%; float: left; margin-bottom: 14px; }
.stepped .choices legend + * { clear: both; }
.choice { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 14px; align-items: end; padding: 12px 0; border-top: 1px dashed var(--ink2); }
.choice .ord { margin: 0; font: 400 1.25rem var(--font-head); align-self: center; }
.choice label { margin: 0; }
@media (max-width: 720px) { .choice { grid-template-columns: 1fr 1fr; } .choice .ord { grid-column: 1 / -1; } }
@media (max-width: 420px) { .choice { grid-template-columns: 1fr; } }
label { font: 700 .78rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
input, select, textarea { padding: 11px 12px; background: var(--panel); border: 1px solid var(--line); border-bottom: 2px solid var(--ink); border-radius: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--pop); outline-offset: 0; }
label.hp input { width: 12rem; min-height: 44px; }
.req { color: var(--link); font-weight: 700; }
.receipt { background: var(--panel); border: 2px solid var(--accent); border-radius: 0; padding: 22px 24px; }
.fallback { border-radius: 0; }

/* signup: one slim line */
.signup { padding: 56px 0; }
.signup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy box"; gap: 20px 56px; align-items: center; }
.signup-copy { grid-area: copy; } .signup-box { grid-area: box; }
.signup h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.signup-copy p:last-child { margin-bottom: 0; }
.signup-form input { background: transparent; color: var(--ink); border: 1px solid var(--line); border-bottom: 2px solid var(--ink); }
.signup ::placeholder { color: var(--ink2); }
@media (max-width: 800px) { .signup-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "box"; } .signup { padding: 44px 0; } }
::placeholder { color: var(--ink2); opacity: 1; }
textarea { min-height: 120px; }

/* the colophon */
.foot { padding: 64px 0 52px; border-top: 4px solid var(--accent); }
.foot a { color: var(--deep-ink); text-decoration-color: rgba(244,240,232,.45); }
.foot a:hover { color: var(--accent-lt); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); grid-template-areas: "brand hours pages"; gap: 32px 56px; }
.foot-grid > :nth-child(1) { grid-area: brand; } .foot-grid > :nth-child(2) { grid-area: hours; } .foot-grid > :nth-child(3) { grid-area: pages; }
.foot-head { margin: 0 0 14px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-lt); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links { display: flex; flex-direction: column; align-items: flex-start; }
.foot-line:not(.tiny) { font-size: .9rem; color: var(--deep-ink2); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot .tiny { color: var(--deep-ink2); }
.foot .linkish { color: var(--deep-ink); text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
.foot-line { margin: 28px 0 0; }
.foot-line.tiny a { display: inline-block; min-height: 24px; line-height: 24px; }
.hours-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.hours-table th, .hours-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(255,255,255,.2); text-align: left; font: 500 .84rem/1.3 var(--font-mono); letter-spacing: .04em; }
.hours-table th { font-weight: 500; color: var(--deep-ink2); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "hours" "pages"; } }
@media (max-width: 720px) { .foot { padding-bottom: calc(60px + 44px + env(safe-area-inset-bottom, 0px)); } body:has(.desk-open:not([hidden])) .foot { padding-bottom: calc(60px + 110px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 721px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: 96px; } }
.noscript { margin: 0; padding: 10px 16px; background: var(--bg2); text-align: center; font-size: .9rem; }

/* reveal, only with scripting on */
.js .band > .wrap, .js .scroller { animation: rise .6s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .band > .wrap, .js .scroller { animation: none; } }
@media print { .top, .callbar, .ribbon, .desk-open, .owner, .still { display: none !important; } body { padding-left: 0 !important; } }


/* ribbon fold (demo only): one slim line on the first screen; the form unfolds below it */
.ribbon { font-size: .85rem; border-bottom-width: 1px; }
.ribbon .wrap.ribbon-line { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 8px; padding: 3px 0; }
.ribbon-fold { flex: 1 1 auto; min-width: 0; }
.ribbon-fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; list-style: none; }
.ribbon-fold > summary::-webkit-details-marker { display: none; }
.ribbon-fold > summary::after { content: "\25BE"; font-size: .8em; transition: transform .15s; }
.ribbon-fold[open] > summary::after { transform: rotate(180deg); }
.ribbon-cta { text-decoration: underline; text-underline-offset: 3px; }
.ribbon-note { margin: 4px 0 8px; }
.ribbon-fold .yours { padding-bottom: 8px; }
.ribbon-back { display: inline-flex; align-items: center; min-height: 28px; }
@media (prefers-reduced-motion: reduce) { .ribbon-fold > summary::after { transition: none; } }

/* Ask button: a small ink label centred at the foot of the page, like a caption under a lookbook spread */
.btn.desk-open { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
.btn.desk-open:hover { transform: translateX(-50%); }
@media (min-width: 721px) { .btn.desk-open { bottom: 22px; padding: 12px 28px; } .desk-panel { left: 50%; transform: translateX(-50%); bottom: 80px; border-radius: 0; } }
@media (max-width: 720px) { .btn.desk-open { left: 50%; } }

/* The demo ribbon is FireForge chrome, not the demo design: set in the system font so it never rewraps when the web font arrives (phone CLS). */
.ribbon { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Builder M13: advanced typography and theme. Every rule hangs off a data- attribute on <html> that the owner's
   theme sets (served page and preview alike), so an absent key leaves the model's own style untouched. Heading
   rules reach every h1, h2 and h3 on the page, small label headings included. */
html[data-hweight="light"] :is(h1, h2, h3) { font-weight: 300; }
html[data-hweight="normal"] :is(h1, h2, h3) { font-weight: 400; }
html[data-hweight="bold"] :is(h1, h2, h3) { font-weight: 700; }
html[data-hweight="black"] :is(h1, h2, h3) { font-weight: 800; }
html[data-hcase="upper"] :is(h1, h2, h3) { text-transform: uppercase; }
html[data-hcase="caps"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: small-caps; }
html[data-hcase="normal"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: normal; }
html[data-htrack="tight"] :is(h1, h2, h3) { letter-spacing: -.03em; }
html[data-htrack="normal"] :is(h1, h2, h3) { letter-spacing: 0; }
html[data-htrack="wide"] :is(h1, h2, h3) { letter-spacing: .08em; }
html[data-lead="snug"] body { line-height: 1.4; }
html[data-lead="normal"] body { line-height: 1.6; }
html[data-lead="airy"] body { line-height: 1.85; }
html[data-btnshape="pill"] .btn { border-radius: 999px; }
html[data-btnshape="square"] .btn { border-radius: 0; }
html[data-btnshape="soft"] .btn { border-radius: 8px; }
html[data-links="underline"] main a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
html[data-links="plain"] main a:not(.btn) { text-decoration: none; }

/* Composed sections (lib/compose.cjs): a 12 column grid; every part spans 1 to 12 columns and 1 to 6 rows */
.fc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(48px, auto); gap: 24px; align-items: start; }
.fc-grid[data-gap="s"] { gap: 12px; }
.fc-grid[data-gap="l"] { gap: 40px; }
.fc-sec[data-pad="s"] { padding-block: clamp(20px, 3vw, 36px); }
.fc-sec[data-pad="l"] { padding-block: clamp(72px, 10vw, 140px); }
.fc-b { --fc-c: var(--fc-span, 12); --fc-r: var(--fc-rows, 1); grid-column: span var(--fc-c); grid-row: span var(--fc-r); min-width: 0; }
.fc-b[data-fc-bg] { background: var(--fc-bg); padding: 18px; border-radius: var(--radius); }
.fc-b[data-fc-fg] { color: var(--fc-fg); --ink: var(--fc-fg); }
.fc-b[data-fc-fg] :is(h2, h3, p) { color: var(--fc-fg); }
.fc-b[data-fc-dayoff] { display: none; }
body.customizing .fc-b[data-fc-dayoff] { display: block; opacity: .4; }
.fc-b > :first-child { margin-top: 0; }
.fc-b > :last-child { margin-bottom: 0; }
.fc-box { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.fc-box[data-fc-bg] { background: var(--fc-bg); border-color: transparent; }
.fc-inner { margin-top: 16px; grid-auto-rows: minmax(32px, auto); }
.fc-inner .fc-image img { min-height: calc(var(--fc-r, 1) * 56px); }
.fc-image { align-self: stretch; }
.fc-image img { display: block; width: 100%; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); object-fit: cover; border-radius: var(--radius); }
.fc-image img[data-fc-fit="contain"] { object-fit: contain; }
.fc-empty { display: none; }
body.customizing .fc-empty { display: grid; place-items: center; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .95rem; }
.fc-pic { display: block; height: 100%; }
.fc-cap { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.fc-video { align-self: stretch; }
.fc-mail, .fc-form .receipt { max-width: 44rem; }
.fc-mail { display: grid; gap: 12px; }
.fc-mail label { display: grid; gap: 4px; font-weight: 600; }
.fc-mail input, .fc-mail select, .fc-mail textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-mail p { margin: 0; }
.fc-mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-mail .form-status:empty { display: none; }
.fc-form [hidden] { display: none !important; }
.fc-joinform { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; max-width: 36rem; }
.fc-joinform label { display: grid; gap: 4px; font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.fc-joinform input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-joinform p { margin: 0; }
.fc-joinform .form-status, .fc-joinform .fallback { flex-basis: 100%; }
.fc-joinform .form-status:empty { display: none; }
.fc-joinform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-join [hidden] { display: none !important; }
.fc-joined { font-weight: 600; margin: 0; }
.fc-form .receipt { padding: 16px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); }
.fc-frame { position: relative; aspect-ratio: 16 / 9; min-width: 0; max-width: 100%; min-height: calc(var(--fc-r, 1) * 72px); border-radius: var(--radius); overflow: hidden; background: #000; }
.fc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-clip { display: block; width: 100%; max-height: 100%; border-radius: var(--radius); background: #000; }
.fc-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fc-pics[data-fc-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-pics[data-fc-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-pics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel, #fff); }
.fc-pics[data-fc-fit="contain"] img { object-fit: contain; }
.fc-pics[data-fc-mode="slide"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.fc-pics[data-fc-mode="slide"] img { flex: 0 0 min(100%, 420px); scroll-snap-align: start; }
.fc-pics[data-fc-mode="slide"][data-fc-cols="2"] img { flex-basis: min(100%, 560px); }
.fc-pics[data-fc-mode="slide"][data-fc-cols="4"] img { flex-basis: min(100%, 300px); }
.fc-space[data-fc-h="s"] { height: 16px; }
.fc-space[data-fc-h="m"] { height: 40px; }
.fc-space[data-fc-h="l"] { height: 88px; }
[data-fc-w="400"] { font-weight: 400; } [data-fc-w="500"] { font-weight: 500; } [data-fc-w="600"] { font-weight: 600; } [data-fc-w="700"] { font-weight: 700; } [data-fc-w="800"] { font-weight: 800; }
[data-fc-hw="400"] :is(h1, h2, h3) { font-weight: 400; } [data-fc-hw="500"] :is(h1, h2, h3) { font-weight: 500; } [data-fc-hw="600"] :is(h1, h2, h3) { font-weight: 600; } [data-fc-hw="700"] :is(h1, h2, h3) { font-weight: 700; } [data-fc-hw="800"] :is(h1, h2, h3) { font-weight: 800; }
[data-fc-w] :is(p, .lead, .sub) { font-weight: inherit; }
.fc-b[data-fc-size="s"] { font-size: .88em; } .fc-b[data-fc-size="l"] { font-size: 1.14em; } .fc-b[data-fc-size="xl"] { font-size: 1.3em; }
[data-fc-align="left"] { text-align: left; } [data-fc-align="center"] { text-align: center; } [data-fc-align="right"] { text-align: right; }
/* Tablets (721 to 1024px): a part's tablet size wins over its desk size; a tablet-hidden part goes. */
@media (min-width: 721px) and (max-width: 1024px) {
  .fc-b { --fc-c: var(--fc-tspan, var(--fc-span, 12)); --fc-r: var(--fc-trows, var(--fc-rows, 1)); }
  .fc-sec[data-tpad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-tpad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-tpad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-tgap="s"] { gap: 12px; } .fc-grid[data-tgap="m"] { gap: 24px; } .fc-grid[data-tgap="l"] { gap: 40px; }
  [data-fc-thide] { display: none; }
  body.customizing [data-fc-thide] { display: block; opacity: .4; }
}
/* Phones (up to 720px): the grid keeps its 12 columns so a phone size can be set; a part with no phone
   size takes the full width, which is the stacked look the page had before phone sizes existed. */
@media (max-width: 720px) {
  .fc-b { --fc-c: var(--fc-pspan, 12); --fc-r: var(--fc-prows, var(--fc-rows, 1)); }
  .fc-sec[data-ppad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-ppad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-ppad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-pgap="s"] { gap: 12px; } .fc-grid[data-pgap="m"] { gap: 24px; } .fc-grid[data-pgap="l"] { gap: 40px; }
  [data-fc-phide] { display: none; }
  body.customizing [data-fc-phide] { display: block; opacity: .4; }
  .fc-pics[data-fc-mode="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Motion (builder M9). Entrances ride the scroll itself: a part fades, rises, slides or zooms in over the
   stretch where it enters the screen, with no script. Browsers without scroll-driven animations skip
   the @supports block and show every part at rest. */
@supports (animation-timeline: view()) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in] { animation: fc-fade linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  [data-fx-in="rise"] { animation-name: fc-rise; } [data-fx-in="slide"] { animation-name: fc-slide; } [data-fx-in="zoom"] { animation-name: fc-zoom; }
  [data-fx-in][data-fx-speed="slow"] { animation-range: entry 5% entry 95%; } [data-fx-in][data-fx-speed="fast"] { animation-range: entry 5% entry 30%; }
  .fc-image[data-fx-scroll="drift"] .fc-shot { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: 1.18; animation: fc-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; border-radius: 0; }
}
@keyframes fc-fade { from { opacity: 0; } }
@keyframes fc-rise { from { opacity: 0; translate: 0 32px; } }
@keyframes fc-slide { from { opacity: 0; translate: -32px 0; } }
@keyframes fc-zoom { from { opacity: 0; scale: .92; } }
@keyframes fc-drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
/* Hover answers only a real pointer; a finger on a phone gets no half-state. */
@media (hover: hover) {
  .fc-b[data-fx-hover] { transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
  .fc-b[data-fx-hover][data-fx-speed="slow"] { transition-duration: .5s; } .fc-b[data-fx-hover][data-fx-speed="fast"] { transition-duration: .12s; }
  .fc-b[data-fx-hover="lift"]:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35); }
  .fc-b[data-fx-hover="grow"]:hover { transform: scale(1.03); }
  .fc-b[data-fx-hover="glow"]:hover { box-shadow: 0 0 0 3px var(--accent, #8ab4f8), 0 10px 30px -10px var(--accent, #8ab4f8); }
  .fc-b[data-fx-hover="dim"]:hover { opacity: .75; }
}
/* At rest: a visitor who asks their device for less motion, or the design's Still switch, sees no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in], .fc-image[data-fx-scroll] img { animation: none; }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
  .fc-b[data-fx-hover] { transition: none; } .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
}
html[data-still] .fc-b[data-fx-in], html[data-still] .fc-sec[data-fx-in], html[data-still] .fc-image[data-fx-scroll] img { animation: none; }
html[data-still] .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
html[data-still] .fc-b[data-fx-hover] { transition: none; } html[data-still] .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
/* Builder M11: the header and footer as the owner set them (compose.chrome). */
[data-chrome-hid] { display: none !important; }
img.mark[data-chrome-logo] { width: auto; max-width: 180px; height: 36px; object-fit: contain; }
.top[data-chrome-static] { position: static; }
.top[data-chrome-layout="center"] .bar { flex-direction: column; justify-content: center; text-align: center; }
.top[data-chrome-layout="center"] .tools { margin-left: 0; }
.foot[data-chrome-layout="center"] .foot-grid { grid-template-columns: 1fr; text-align: center; }
.foot[data-chrome-layout="center"] .foot-links { justify-content: center; }
.foot[data-chrome-hide] { padding-top: 10px; } .foot[data-chrome-hide] .foot-line { border: 0; padding-top: 0; }