@layer site-reset, telify;
@import url("/webapp/lib/cormorant-garamond@v21/cormorant-garamond.css");
@import url("/webapp/lib/jost@v20/jost.css");

/* =====================================================================
   Dana Wilcher Art: the stylesheet every page links first, hers and Telify's (shell.stylesheets in site.json).
   From her confirmed mockups (docs/mockups/telify-web/dana-wilcher/): home.html, bookings.html, telify-pages.html and
   brand-colors.html. Class names here are shared by every page; keep them stable.
   ===================================================================== */

/* No browser flash on anything tapped, on every page of hers (card 4 walk, Gabriel 2026-11-01) */
:root { -webkit-tap-highlight-color: transparent; }

/* Every way into booking (her header, phone menu and footer links, the home's booking section and its hero button,
   About's button) waits until she lists a service or an event, so nobody lands on an empty Book page (Gabriel
   2026-11-03: "we should hide that until she puts in a service or event"). js/menu.js asks Telify and switches them on. */
html:not(.bookable) .if-bookable { display: none !important; }

/* ---------- her colors ---------- */
:root {
  /* Her brand colors, from her palette sheet (brand-colors.html, 15 of 16) */
  --dw-garnet: #94252A;
  --dw-oxblood: #5E1A1A;
  --dw-burnt-umber: #6E2E1E;
  --dw-terracotta: #B5683F;
  --dw-camel: #BB9468;
  --dw-deep-forest: #3A4A33;
  --dw-dusty-teal: #739E96;
  --dw-steel-blue: #3C6075;
  --dw-midnight-veil: #20304D;
  --dw-amethyst: #574B73;
  --dw-dusty-plum: #886A7E;
  --dw-wheat: #E6D4A6;
  --dw-bone: #EFE7D6;
  --dw-warm-white: #F8F3EA;
  --dw-espresso: #2A211C;

  /* The working names her pages use. On her pages --amethyst and --teal hold lighter shades, not her sheet's. */
  --espresso: #2A211C; --night: #1E1814; --umber: #6E2E1E;
  --ink: #F8F3EA; --ink-2: rgba(239, 231, 214, 0.74); --ink-3: rgba(239, 231, 214, 0.5);
  --garnet: #94252A; --garnet-hot: #B8454A; --oxblood: #5E1A1A;
  --camel: #BB9468; --wheat: #E6D4A6; --bone: #EFE7D6;
  --amethyst: #978EA3; --teal: #8EAFA7;
  --hair: rgba(187, 148, 104, 0.26);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;

  /* Her signature: her own logo script as a mask over a gradient */
  --sig-crimson: linear-gradient(100deg, #A8323A 0%, #D0644F 22%, #E6C08C 44%, #F3E3BC 52%, #D9A06A 64%, #B8454A 82%, #8E2A33 100%);
  --sig: var(--sig-crimson);
  --sig-mask: url("/img/site/signature.b1431a8772b7.png");

  /* The lighter shades her soft blocks use, and the plum cap on what matters most on a page */
  --dw-soft: rgba(239, 231, 214, 0.035);
  --dw-teal-l: #A9C9C2; --dw-plum-l: #D2B5C8; --dw-terra-l: #E8A983;
  --dw-plum-cap: linear-gradient(180deg, rgba(136, 106, 126, 0.32) 0%, rgba(136, 106, 126, 0.14) 100%);
  --dw-plum-line: rgba(210, 181, 200, 0.28);
  --dw-shadow: 0 18px 44px rgba(8, 5, 4, 0.4);

  color-scheme: dark;
}

/* ---------- her element resets, below Telify's layer ---------- */
@layer site-reset {
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: var(--espresso); color: var(--ink); font-family: var(--sans); font-weight: 350; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--wheat); outline-offset: 3px; border-radius: 2px; }
}

/* ---------- shared pieces ---------- */
.wrap { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 28px; border-radius: 999px; font-size: 15px; letter-spacing: 0.04em; font-weight: 450; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.btn-fill { background: radial-gradient(circle at 30% 28%, #B8454A 0%, #94252A 55%, #5E1A1A 130%); color: var(--ink); border: 1px solid rgba(187, 148, 104, 0.4); box-shadow: 0 0 26px rgba(148, 37, 42, 0.4); }
.btn-fill:hover { box-shadow: 0 0 34px rgba(184, 69, 74, 0.55); }
.btn-line { background: rgba(30, 24, 20, 0.25); color: var(--ink); border: 1px solid rgba(230, 212, 166, 0.45); }
.btn-line:hover { border-color: var(--wheat); background: rgba(30, 24, 20, 0.45); }
.btn-sm { height: 40px; padding: 0 20px; font-size: 14px; }

.sig-block { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sig { width: min(1000px, 84vw); aspect-ratio: 1580 / 300; background: var(--sig);
  -webkit-mask: var(--sig-mask) center / contain no-repeat; mask: var(--sig-mask) center / contain no-repeat; }

.h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
.lede { font-family: var(--serif); font-size: 21px; line-height: 1.55; color: var(--ink-2); max-width: 34em; margin: 0; }
.p { color: var(--ink-2); max-width: 36em; margin: 0; font-size: 16.5px; line-height: 1.7; }
.textlink { display: inline-block; font-size: 15px; letter-spacing: 0.04em; color: var(--wheat); background: none; border: 0; border-bottom: 1px solid rgba(230, 212, 166, 0.4); padding: 0 0 3px; cursor: pointer; }
.textlink:hover { border-bottom-color: var(--wheat); }
.title-it { font-family: var(--serif); font-style: italic; font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; letter-spacing: 0.03em; color: var(--ink-3); white-space: nowrap; }
.status.avail { color: var(--teal); }
.status.avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(142, 175, 167, 0.7); }
.status.low { color: #E28A8D; }
.status.low::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--garnet-hot); box-shadow: 0 0 8px rgba(184, 69, 74, 0.7); }
.painting { box-shadow: 0 24px 50px rgba(8, 5, 4, 0.55), 0 2px 6px rgba(8, 5, 4, 0.4); }

.cls-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.cls-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.cls-list .n { font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.2; }
.cls-list .w { font-size: 14.5px; color: var(--ink-3); letter-spacing: 0.02em; grid-column: 1; }
.cls-list .pr { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--serif); font-size: 22px; color: var(--wheat); }

/* ---------- her header: the night band, at the top as you scroll (Gabriel 2026-10-21: "let's go with night band") ---------- */
:root { --head-h: 92px; }
/* With the messages open her header rises over them, as Telify's own header does, so the account menu opens on top
   (card 4 walk, Gabriel 2026-11-01); otherwise it stays under the bag's drawer */
:root:has(#web-messages[aria-hidden="false"]) .topbar { z-index: 70; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px 40px; position: sticky; top: 0; z-index: 30;
  background: #15100D; box-shadow: inset 0 -1px 0 rgba(201, 163, 91, 0.45); }
.topbar .main-nav { display: flex; gap: 34px; }
.topbar .main-nav a { font-size: 14.5px; letter-spacing: 0.05em; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.topbar .main-nav a:hover { color: var(--ink); }
.topbar .main-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--camel); }
.topbar .side { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.topbar .side-l { justify-content: flex-start; font-size: 13.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: none; border: 0; cursor: pointer; position: relative; }
.icon-btn:hover { color: var(--ink); }
.icon-btn svg { width: 21px; height: 21px; }
.topbar .menu-btn { display: none; }
/* On every page but home her signature sits at the left; home says Austin, Texas there (it shows her signature large in its hero).
   Home marks itself with <body data-page="home">. */
.brand { display: block; width: 156px; }
.brand .sig { display: block; width: 156px; }
.topbar .loc { display: none; }
body[data-page="home"] .topbar .loc { display: block; }
body[data-page="home"] .topbar > .side-l .brand { display: none; }
.topbar .acct { display: inline-flex; align-items: center; }
/* The account and the bag hold their room before the kit draws them (signed in: messages and initials, 82px; the bag,
   40px), so they fade in in place and never push the header about as a page loads (card 4 walk, Gabriel 2026-11-01) */
.topbar .acct { min-width: 82px; justify-content: flex-end; }
.topbar .bag { width: 40px; }

/* Her phone menu (prints.html, about.html), opened by the menu button below 1140px (js/menu.js); it slides in from the left and back out to the left */
.phone-menu { position: fixed; inset: 0; z-index: 60; background: var(--night); display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top, 0px)) 16px 40px; overflow-y: auto; }
.phone-menu[hidden] { display: none; }
.phone-menu { transform: translateX(-100%); transition: transform .42s cubic-bezier(.32, .72, 0, 1); }
.phone-menu.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .phone-menu { transition: none; } }
.phone-menu .pm-top { display: flex; justify-content: space-between; align-items: center; }
.phone-menu .brand, .phone-menu .brand .sig { width: 128px; }
.phone-menu nav { display: grid; gap: 4px; margin-top: 44px; }
.phone-menu nav a { font-family: var(--serif); font-size: 34px; line-height: 1.3; padding: 6px 4px; color: var(--ink-2); }
.phone-menu nav a[aria-current] { color: var(--ink); }
:root.menu-open { overflow: hidden; }

/* Eight links in the header: a little tighter, then the menu button, before they crowd the sides */
@media (max-width: 1320px) { .topbar .main-nav { gap: 20px; } .topbar .main-nav a { font-size: 14px; } }
@media (max-width: 1140px) {
  :root { --head-h: 76px; }
  .topbar { grid-template-columns: 1fr auto; padding: 18px 32px; }
  .topbar .main-nav { display: none; }
  .topbar .menu-btn { display: grid; }
  .brand, .brand .sig { width: 128px; }
  .topbar .side { gap: 4px; }
  body[data-page="home"] .topbar > .side-l { display: none; }
}

/* ---------- while Telify draws ---------- */
/* Her page area, and a Telify page's, holds at least a full screen, so her footer never shows
   mid-screen while Telify's pieces fetch and draw; what they draw fades in instead of popping (Gabriel 2026-10-30). */
@layer site-reset { body > main, body > #root { min-height: 100svh; } }
@keyframes telify-arrive { from { opacity: 0; } }
main [data-telify-frame] > *, #root > main[data-telify-screen] > * { animation: telify-arrive .22s ease-out; }
@media (prefers-reduced-motion: reduce) { main [data-telify-frame] > *, #root > main[data-telify-screen] > * { animation: none; } }

/* ---------- her footer: the night band ---------- */
.foot { background: var(--night); padding: 80px 0 40px; border-top: 1px solid rgba(187, 148, 104, 0.18); }
.foot .sig { width: min(380px, 70vw); }
/* three columns, Letters from Dana first: kept together under her signature, not spread across the page
   (Gabriel 2026-10-26) */
.foot-grid { display: grid; grid-template-columns: minmax(0, 360px) max-content max-content; justify-content: center; gap: 48px 112px; margin-top: 56px; }
.foot h4 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 14px; }
.foot p, .foot li { color: var(--ink-3); font-size: 14.5px; margin: 0; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot ul a:hover { color: var(--ink); }
/* Her Instagram, with its mark (home.html's footer). */
.foot .ig { display: inline-flex; gap: 8px; align-items: center; }
/* Letters from Dana: the email signup piece drawn as her mockup's subscribe row (home.html .subscribe), with its
   consent line under it. Her footer's p rule would otherwise size and color the box's own lines. */
[data-telify="email-signup"] [data-part="email"] { height: 44px; border-radius: 999px; border: 1px solid rgba(239, 231, 214, 0.18); background: rgba(239, 231, 214, 0.04); color: var(--ink); padding: 0 18px; font-size: 14.5px; }
[data-telify="email-signup"] [data-part="email"]::placeholder { color: var(--ink-3); }
/* Her mockup's outlined button (btn-line), not the garnet her rule below gives every primary action. */
.foot [data-telify="email-signup"] [data-part="submit"] { height: 44px; padding: 0 20px; font-size: 14px; font-weight: 450; letter-spacing: 0.04em; background: rgba(30, 24, 20, 0.25); color: var(--ink); border: 1px solid rgba(230, 212, 166, 0.45); box-shadow: none; }
.foot [data-telify="email-signup"] [data-part="submit"]:hover { border-color: var(--wheat); background: rgba(30, 24, 20, 0.45); box-shadow: none; }
.foot [data-telify="email-signup"] [data-part="consent"] { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.foot [data-telify="email-signup"] [data-part="error"] { font-size: 13.5px; color: var(--danger); }
.foot [data-telify="email-signup"] [data-part="done"] { font-size: 15px; color: var(--ink-2); }
.foot-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(239, 231, 214, 0.08); display: flex; justify-content: space-between; color: var(--ink-3); font-size: 13px; }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .wrap { width: calc(100% - 32px); }
  .topbar { padding: 18px 16px; }
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
  .foot-base { flex-direction: column; gap: 8px; }
}

/* =====================================================================
   HER LOOK FOR TELIFY'S PIECES AND PAGES (telify-pages.html and bookings.html, the Spruced look, both confirmed).
   Level 1: her values for Telify's tokens, on the page root. Level 3: her rules on the pieces' published parts and roles.
   Unlayered, so they win over Telify's layer. Where the built pieces differ from the mockups' drawing, the rule says how.
   ===================================================================== */
:root {
  --font-body: var(--sans); --font-display: var(--serif);
  --bg-page: #2A211C; --bg-page-rgb: 42, 33, 28; --bg-card-2: #3A2E26; --fg-page-rgb: 239, 231, 214;
  --text-primary: #F8F3EA; --text-secondary: rgba(239, 231, 214, 0.74); --text-tertiary: rgba(239, 231, 214, 0.56); --text-muted: rgba(239, 231, 214, 0.38);
  --accent: #E6D4A6; --accent-rgb: 230, 212, 166; --accent-hot: #F3E3BC; --text-on-accent: #2A211C;
  --accent-light: #F3E3BC; --accent-light-rgb: 243, 227, 188; --accent-deep: #BB9468; --accent-deep-rgb: 187, 148, 104;
  --border-soft: rgba(187, 148, 104, 0.24); --border-subtle: rgba(187, 148, 104, 0.13);
  --spots-low-color: #E28A8D; --danger: #E28A8D; --danger-rgb: 226, 138, 141;
  --avatar-bg: radial-gradient(circle at 30% 28%, #F3E3BC 0%, #E6D4A6 50%, #BB9468 120%); --avatar-initials-color: #2A211C;
  --glass-bg: rgba(58, 46, 38, 0.72); --glass-bg-strong: rgba(30, 24, 20, 0.94); --glass-blur: blur(18px) saturate(1.2); --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --chevron-color: rgba(239, 231, 214, 0.4);
  --r-ctl: 999px;
  /* Telify's pages sit on her page width */
  --wrap: 1240px;
  /* The plum cap drawn across several parts that share no box of their own: a top that fades into one flat tint */
  --dw-plum-top: linear-gradient(180deg, rgba(136, 106, 126, 0.32) 0%, rgba(136, 106, 126, 0.24) 100%);
  --dw-plum-flat: rgba(136, 106, 126, 0.24);
}

/* ---------- roles: her pills in Jost, the one filled action her garnet button, the second her outlined pill ---------- */
[data-role$="-action"] { font-weight: 450; letter-spacing: 0.04em; font-size: 15px; }
[data-role="primary-action"]:not(:disabled) { background: radial-gradient(circle at 30% 28%, #B8454A 0%, #94252A 55%, #5E1A1A 130%); color: var(--ink); border: 1px solid rgba(187, 148, 104, 0.4); box-shadow: 0 0 26px rgba(148, 37, 42, 0.4); }
[data-role="primary-action"]:not(:disabled):hover { box-shadow: 0 0 34px rgba(184, 69, 74, 0.55); }
[data-role="secondary-action"] { border-color: rgba(230, 212, 166, 0.45); background: rgba(30, 24, 20, 0.25); color: var(--ink); }
[data-role="secondary-action"]:hover { border-color: var(--wheat); }
[data-role="time"] { border-radius: 999px; }
/* Headings in her serif at her weight; photos as her paintings hang */
[data-role="title"] { font-weight: 500; }
[data-role="photo"] { border-radius: 2px; box-shadow: 0 24px 50px rgba(8, 5, 4, 0.45); }
/* The month above a booking's date in her camel, as her own class list draws it */
[data-telify="bookings-list"] [data-part="month"] { color: var(--camel); letter-spacing: 0.22em; padding-left: 0.22em; }

/* ---------- the account piece in her header: Sign in her outlined pill, the client menu on her night band ---------- */
[data-telify="account"] [data-part="signIn"] { background: rgba(30, 24, 20, 0.25); }
[data-telify="account"] [data-part="signIn"]:hover { border-color: var(--wheat); }
[data-telify="account"] [data-part="messages"] { color: var(--ink-2); }
[data-telify="account"] [data-part="messages"]:hover { color: var(--ink); }
[data-telify="account"] [data-part="messagesBadge"] { background: var(--garnet-hot); box-shadow: 0 0 0 2px var(--espresso); }
[data-telify="account"] [data-part="avatar"] { border: 1px solid rgba(230, 212, 166, 0.5); }
[data-telify="account"] [data-part="menu"] { background: var(--night); border: 1px solid rgba(187, 148, 104, 0.3); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); }
[data-telify="account"] [data-part="menuHead"] { border-bottom-color: var(--hair); }
[data-telify="account"] [data-part="menuNote"] { color: var(--ink-3); }
[data-telify="account"] [data-part="menu"] [role="menuitem"]:hover { background: rgba(239, 231, 214, 0.06); color: var(--ink); }

/* ---------- the messages panel: her lockup at its head, its messages on her ground, room for every filter ---------- */
/* Telify's messages as soft cards of her brown with a light shadow, in place of the dark glass and its heavy shadow
   (a dark brown halo round each message, Gabriel 2026-10-28); her own messages keep her wheat */
[data-telify="messages-panel"] { --glass-bg-strong: #3A2E26; --glass-shadow: 0 6px 18px rgba(8, 5, 4, 0.28); }
/* just wide enough on a computer for all seven filters on one line; a phone's panel is the whole screen and they scroll */
[data-telify="messages-panel"] [data-part="panel"] { width: min(496px, 100%); }
/* her signature with ART under it, as her home page sets it, in place of the studio's logo and name, centred across
   the panel with Secure · Telegram under it, the close button to one side (Gabriel 2026-10-28); the name stays in the
   heading, unseen, for screen readers, which label the panel by it */
[data-telify="messages-panel"] [data-part="header"] { position: relative; justify-content: center; padding-top: 24px; padding-bottom: 10px; }
[data-telify="messages-panel"] [data-part="header"] > span:has(> [data-part="logo"]) { display: none; }
[data-telify="messages-panel"] [data-part="header"] > div:has(> [data-part="name"]) { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-telify="messages-panel"] [data-part="close"] { position: absolute; top: 20px; right: 20px; }
[data-telify="messages-panel"] [data-part="name"] { display: flex; flex-direction: column; align-items: center; font-size: 0; line-height: 0; overflow: visible; }
[data-telify="messages-panel"] [data-part="name"]::before { content: ""; display: block; width: 210px; aspect-ratio: 1580 / 300; background: var(--sig);
  -webkit-mask: var(--sig-mask) center / contain no-repeat; mask: var(--sig-mask) center / contain no-repeat; }
[data-telify="messages-panel"] [data-part="name"]::after { content: "ART"; content: "ART" / ""; display: block; margin-top: 10px; padding-left: 0.62em;
  font: 300 12px/1 var(--sans); letter-spacing: 0.62em; color: var(--wheat); opacity: .85; }
/* the same hairline as above the message box, across the panel between her lockup and Secure · Telegram */
[data-telify="messages-panel"] [data-part="rooms"] { justify-content: center; align-self: stretch; margin: 16px -22px 0; padding-top: 12px; border-top: 1px solid rgba(var(--fg-page-rgb), 0.06); }@media (max-width: 1140px) {
  [data-telify="account"] [data-part="signIn"] { height: 36px; padding: 0 14px; font-size: 13.5px; margin-right: 6px; }
}

/* ---------- a service or event page (bookings.html "Soft blocks"; Gabriel 2026-10-26: "i like number 3", "plum looks good.")
   The facts, About, How to prepare, the details and the booking column each a soft block; the facts' labels in her brand
   colors, the details' labels in dusty teal; the booking column's head (the price, how it is paid, spots for an event) its plum
   cap, the price in wheat. The built column has no box around its head, so the cap is drawn on each of its parts. */
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] { border: 0; padding: 4px 24px; border-radius: 12px; background: var(--dw-soft); }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > :nth-child(1) > :first-child { color: var(--dw-teal-l); }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > :nth-child(2) > :first-child { color: var(--dw-plum-l); }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > :nth-child(3) > :first-child { color: var(--camel); }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > :nth-child(4) > :first-child { color: var(--dw-terra-l); }
/* the facts a slim strip (Gabriel 2026-10-31: "not so big and bulky"): smaller words, and on a computer each fact as wide as
   its words, so the date stays on one line */
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > * > :first-child { font-size: 11.5px; letter-spacing: .06em; line-height: 1.5; }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > * > :last-child { margin-top: 2px; font-size: 15.5px; line-height: 1.4; }
/* the price is drawn in wheat, which reads thinner than cream on her dark ground: one step heavier so it holds its weight */
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > :nth-child(3) > :last-child { font-weight: 600; }
@media (min-width: 861px) {
  :is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] { padding: 2px 6px; }
  :is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > * { flex: 1 1 auto; padding: 12px 18px; }
  :is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > * > :last-child { white-space: nowrap; }
}
:is([data-telify="service-page"], [data-telify="event-page"]) :is(section:has(> [data-part="description"]), [data-part="preparation"]) { margin-top: 18px; padding: 28px 30px 30px; border-radius: 12px; background: var(--dw-soft); }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="details"] { margin-top: 18px; padding: 4px 30px; border: 0; border-radius: 12px; background: var(--dw-soft); }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="details"] > div:last-child > * { border-bottom: 0; }
:is([data-telify="service-page"], [data-telify="event-page"]) [data-part="details"] dt { color: var(--dw-teal-l); }
[data-telify="booking-column"][data-telify-root] { padding: 26px 26px 24px; border: 0; border-radius: 12px; background: var(--dw-soft); }
[data-telify="booking-column"] > :first-child { margin: -26px -26px 0; padding: 24px 26px 0; border-radius: 12px 12px 0 0; background: var(--dw-plum-top); }
[data-telify="booking-column"] > :is([data-part="terms"], [data-part="spots"]) { margin: 0 -26px; padding: 8px 26px 0; background: var(--dw-plum-flat); }
/* the last part of the head closes the cap */
[data-telify="booking-column"] > :is(:first-child, [data-part="terms"], [data-part="spots"]):not(:has(+ :is([data-part="terms"], [data-part="spots"]))) { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--dw-plum-line); }
[data-telify="booking-column"] :is([data-part="calendar"], [data-part="event-time"]) { border-top: 0; padding-top: 0; }
[data-telify="booking-column"] [data-part="price"] { color: var(--wheat); }

/* ---------- Message the studio, a card over her brushes photo (Gabriel 2026-10-25: "i like the message the studio card you did, keep that.") ---------- */
[data-telify="message-studio"][data-telify-root] { margin-top: 48px; padding: 36px 38px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; border: 1px solid rgba(187, 148, 104, 0.32); border-radius: 8px; box-shadow: var(--dw-shadow);
  background: linear-gradient(90deg, rgba(30, 24, 20, 0.94) 0%, rgba(30, 24, 20, 0.78) 48%, rgba(30, 24, 20, 0.35) 100%), url("/img/site/studio-brushes-warm.23ca460b6386.jpg") 70% 50% / cover no-repeat; }
[data-telify="message-studio"] h2 { font-style: italic; }
[data-telify="message-studio"] [data-part="messageStudio"] { margin-top: 0; }
/* her card is words and a button: a studio logo, where the studio has one, would take the words' column (her signature is her mark) */
[data-telify="message-studio"] [data-part="logo"] { display: none; }
[data-telify="message-studio"] :is([data-part="messageStudio"], [data-part="signInError"]) { grid-column: auto; }

/* ---------- the checkout, a money page: her home page's soft garnet glow behind the top (below), the title in her italic serif.
   Each step a soft block, the current step's number dusty plum, a finished step's check dusty teal; the summary one soft
   block, the photo across its top, then the name, length and price in the plum band, the rows' labels in dusty teal. ---------- */
[data-telify="checkout"] [data-part="title"] { font-style: italic; }
[data-telify="checkout"] [data-part="steps"] > [data-part="step"] { margin-top: 16px; padding: 22px 26px 24px; border-top: 0; border-radius: 12px; background: var(--dw-soft); }
[data-telify="checkout"] [data-part="steps"] > [data-part="step"][data-state="waiting"] { background: rgba(239, 231, 214, 0.02); }
[data-telify="checkout"] [data-part="steps"] > [data-part="step"][data-state="active"] > :first-child > :first-child { background: var(--dw-plum-l); border-color: var(--dw-plum-l); color: var(--espresso); }
[data-telify="checkout"] [data-part="steps"] > [data-part="step"][data-state="done"] > :first-child > :first-child { border-color: var(--dw-teal-l); color: var(--dw-teal-l); }
[data-telify="checkout"] [data-part="summary"] { padding: 0 0 22px; border: 0; border-radius: 12px; background: var(--dw-soft); overflow: hidden; }
[data-telify="checkout"] [data-part="summary"] > * { margin-left: 24px; margin-right: 24px; }
[data-telify="checkout"] [data-part="summary"] > [data-part="photo"] { margin: 0; border-radius: 0; box-shadow: none; }
[data-telify="checkout"] [data-part="summary"] > [data-part="offering"] { margin: 0; padding: 18px 24px 16px; background: var(--dw-plum-cap); border-bottom: 1px solid var(--dw-plum-line); }
[data-telify="checkout"] [data-part="rows"] { padding-top: 8px; }
[data-telify="checkout"] [data-part="rows"] dt { color: var(--dw-teal-l); }
[data-telify="checkout"] [data-part="rows"] dt svg { color: rgba(169, 201, 194, 0.6); }
[data-telify="checkout"] :is([data-part="offering"] > :last-child, [data-part="total"] > span:last-child) { color: var(--wheat); }
[data-telify="checkout"] [data-part="holdNote"] { margin-top: 16px; }

/* ---------- the shop's pieces and pages (prints.html, confirmed): a product's name in her italic serif wherever it is
   listed, as her Prints page draws it; the bag's drawer on her night band, its Your bag on her open line height (the
   drawer's is the title followed by its Close). Continue with Telegram and the other main buttons are her garnet
   through their primary-action role (above). ---------- */
:is([data-telify="shop-bag"] [data-part="name"], [data-telify="shop-product"] [data-part="title"], :is([data-telify="shop-checkout"], [data-telify="shop-order"]) [data-part="itemName"]) { font-style: italic; }
[data-telify="shop-bag"] [data-part="bag"] { background: var(--night); }
[data-telify="shop-bag"] [data-part="title"]:has(+ [data-part="close"]) { line-height: 1.6; }
/* the thank-you page's line for after paying (the holiday form sets it): her italic subtitle in wheat, centred under the
   title, balanced so its last word never sits alone */
[data-telify="shop-order"] [data-part="paidLine"] { max-width: 30em; margin: 12px auto 4px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.4; color: var(--wheat); text-wrap: balance; }

/* ---------- the booked page: her painted band behind the check, Booking confirmed and its sentence; the ticket a soft block
   whose head (photo, name, with Dana) is the plum band above its tear line, the rows' labels in dusty teal, the amount in wheat.
   Pay now draws the same ticket. ---------- */
[data-telify="booked"][data-telify-root] { padding-top: 0; }
[data-telify="booked"] > :has(> [data-part="title"]) { margin: 0 calc(50% - 50vw); padding: 76px calc(50vw - 50%) 64px; border-bottom: 1px solid var(--hair);
  background: radial-gradient(ellipse 60% 85% at 50% 50%, rgba(30, 24, 20, 0.66), rgba(30, 24, 20, 0.4) 78%), url("/img/site/book-band.5753c62bb185.webp") center / cover no-repeat; }
[data-telify="booked"] [data-part="title"] { font-style: italic; }
[data-telify="booked"] > :has(> [data-part="title"]) + * { margin-top: 44px; }
[data-telify="booked"] > :has(> [data-part="viewBooking"]) { margin-top: 40px; }
:is([data-telify="booked"], [data-telify-screen]:has([data-telify="payment-step"])) [data-part="ticket"] { padding: 0 26px 6px; border: 0; border-radius: 12px; background: var(--dw-soft); overflow: hidden; }
:is([data-telify="booked"], [data-telify-screen]:has([data-telify="payment-step"])) [data-part="ticket"] > :first-child { margin: 0 -26px; padding: 22px 26px; background: var(--dw-plum-cap); }
:is([data-telify="booked"], [data-telify-screen]:has([data-telify="payment-step"])) [data-part="ticket"] > [aria-hidden="true"] { margin: 0 -26px; border-top-color: rgba(210, 181, 200, 0.4); }
:is([data-telify="booked"], [data-telify-screen]:has([data-telify="payment-step"])) [data-part="ticket"] dt { color: var(--dw-teal-l); }
[data-telify="booked"] [data-part="amount"] { color: var(--wheat); }
/* a row with no action of its own keeps an empty cell; on a phone it would add a blank line */
[data-part="ticket"] [data-part="row"] > span:empty { display: none; }

/* ---------- Bookings (Gabriel 2026-10-25: "go with band + the painting"): her Book page's brush band behind the page heading,
   the next session's own photo filling its block, darkened behind the words ---------- */
[data-telify="bookings-list"] > [data-part="head"] { margin: 0 calc(50% - 50vw); padding: 84px calc(50vw - 50%) 80px; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; border-bottom: 1px solid var(--hair);
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(30, 24, 20, 0.62), rgba(30, 24, 20, 0.38) 75%), url("/img/site/book-band.5753c62bb185.webp") center / cover no-repeat; }
[data-telify="bookings-list"] > [data-part="head"] h1 { font-style: italic; font-size: clamp(60px, 7.4vw, 108px); line-height: 1; }
[data-telify="bookings-list"] > [data-part="head"] p { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 23px; color: var(--ink); }
/* The built next session lays its photo and words out in a row, so the main part becomes a grid and the photo's width is freed */
[data-telify="next-session"] [data-part="session"] { position: relative; isolation: isolate; overflow: hidden; margin-top: 28px; padding: 120px 48px 48px; min-height: 420px; box-shadow: 0 24px 50px rgba(8, 5, 4, 0.45); }
[data-telify="next-session"] [data-part="main"] { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-telify="next-session"] [data-part="photo"] { position: absolute; inset: 0; z-index: -1; width: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
[data-telify="next-session"] [data-part="photo"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 24, 20, 0.94) 0%, rgba(30, 24, 20, 0.72) 42%, rgba(30, 24, 20, 0.2) 100%); }
[data-telify="next-session"] [data-part="details"] { max-width: 560px; }
/* its heading loses the rule so it reads like the blocks around it */
[data-telify="next-session"][data-telify-root] > :first-child:not([data-part="session"]) { border-bottom: 0; padding-bottom: 6px; }
/* Waiting on you a soft block with its heading as the plum cap, each kind of row marked in its own color */
[data-telify="waiting-on-you"][data-telify-root] { padding: 0 26px 2px; border-radius: 12px; background: var(--dw-soft); }
[data-telify="waiting-on-you"] > [data-part="head"] { margin: 0 -26px; padding: 22px 26px 18px; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--dw-plum-line); background: var(--dw-plum-cap); }
[data-telify="waiting-on-you"] li:last-child { border-bottom: 0; }
[data-telify="waiting-on-you"] [data-part="held"] > [data-part="icon"] { color: var(--dw-teal-l); }
[data-telify="waiting-on-you"] :is([data-part="form"], [data-part="formsSummary"]) > [data-part="icon"] { color: var(--dw-plum-l); }
[data-telify="waiting-on-you"] [data-part="payment"] > [data-part="icon"] { color: var(--camel); }
[data-telify="waiting-on-you"] [data-part="messages"] > [data-part="icon"] { color: var(--dw-terra-l); }
/* Upcoming and Past: each table a soft block, the column labels in teal like her details' labels, amounts in wheat */
[data-telify="bookings-list"] :has(+ :is([data-part="upcoming"], [data-part="past"])) { border-bottom: 0; padding-bottom: 6px; }
[data-telify="bookings-list"] :is([data-part="upcoming"], [data-part="past"]) { padding: 0 24px; border-radius: 12px; background: var(--dw-soft); }
/* the built column labels are small capitals; hers are her details' quiet labels, as telify-pages.html draws them */
[data-telify="bookings-list"] :is([data-part="upcoming"], [data-part="past"]) > [role="row"]:not([data-part]) { padding: 14px 0; color: var(--dw-teal-l); }
[data-telify="bookings-list"] :is([data-part="upcoming"], [data-part="past"]) > [role="row"]:not([data-part]) > * { font-size: 13px; font-weight: inherit; letter-spacing: 0.03em; text-transform: none; color: inherit; }
[data-telify="bookings-list"] [data-part="row"]:last-child { border-bottom: 0; }
[data-telify="bookings-list"] [data-part="row"]:not([data-state="off"]) [data-part="amount"] { color: var(--wheat); }

/* ---------- a booking's page and Profile open with the same painted band as Bookings ---------- */
[data-telify="booking-page"] > [data-part="crumbs"] { position: relative; z-index: 1; }
[data-telify="booking-page"] > [data-part="heading"] { margin: -44px calc(50% - 50vw) 0; padding: 86px calc(50vw - 50%) 52px; border-bottom: 1px solid var(--hair);
  background: radial-gradient(ellipse 75% 95% at 30% 50%, rgba(30, 24, 20, 0.7), rgba(30, 24, 20, 0.44) 78%), url("/img/site/book-band.5753c62bb185.webp") center / cover no-repeat; }
[data-telify="booking-page"] > [data-part="heading"] h1 { font-style: italic; }
/* the ticket a soft block with When as its plum cap, each label in its own color, the amount in wheat; How to prepare and About
   each a soft block */
[data-telify="booking-page"] [data-part="ticket"] { border: 0; padding: 0 30px 2px; border-radius: 12px; background: var(--dw-soft); }
[data-telify="booking-page"] [data-part="ticket"] > dl { padding: 0; }
[data-telify="booking-page"] [data-part="ticket"] [data-part="row"]:first-child { margin: 0 -30px; padding: 22px 30px 20px; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--dw-plum-line); background: var(--dw-plum-cap); }
[data-telify="booking-page"] [data-part="ticket"] [data-part="row"]:first-child + [data-part="row"] { border-top: 0; }
[data-telify="booking-page"] [data-part="ticket"] [data-part="row"]:nth-child(1) dt { color: var(--dw-plum-l); }
[data-telify="booking-page"] [data-part="ticket"] [data-part="row"]:nth-child(2) dt { color: var(--dw-teal-l); }
[data-telify="booking-page"] [data-part="ticket"] [data-part="row"]:nth-child(3) dt { color: var(--camel); }
[data-telify="booking-page"] [data-part="ticket"] [data-part="row"]:nth-child(4) dt { color: var(--dw-terra-l); }
[data-telify="booking-page"] [data-part="ticket"] [data-part="amount"] { color: var(--wheat); }
[data-telify="booking-page"] :is([data-part="preparation"], [data-part="about"]) { margin-top: 18px; padding: 28px 30px 30px; border-radius: 12px; background: var(--dw-soft); }
[data-telify="booking-page"] [data-part="preparation"] { margin-top: 24px; }
/* the cancel and remove windows' two buttons centred under the words, not pushed right (Gabriel 2026-10-31 walk) */
:is([data-part="cancelWindow"], [data-part="removeWindow"]) > :last-child { justify-content: center; }
/* Profile: the band behind who is signed in; My info, Payment methods and Preferences each a soft block, their labels in teal,
   My info's title the plum top. The built page holds these in its page part; Preferences is found by the time zone it holds. */
[data-telify="profile"] [data-part="page"] > [data-part="identity"] { margin: 0 calc(50% - 50vw); padding: 64px calc(50vw - 50%) 46px; border-bottom: 1px solid var(--hair);
  background: radial-gradient(ellipse 60% 95% at 50% 50%, rgba(30, 24, 20, 0.66), rgba(30, 24, 20, 0.42) 78%), url("/img/site/book-band.5753c62bb185.webp") center / cover no-repeat; }
[data-telify="profile"] [data-part="identity"] h1 { font-style: italic; }
/* Her serif draws old-style figures, where a count of 0 reads as the letter O: the sessions count takes its digits, and
   only its digits, from her sans (Jost's latin file in Telify's shared library); the serif keeps everything else. */
@font-face { font-family: 'DW Digits'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/webapp/lib/jost@v20/jost-latin.woff2") format("woff2"); unicode-range: U+0030-0039; }
[data-telify="profile"] [data-part="identity"] b { font-family: 'DW Digits', var(--serif); }
[data-telify="profile"] [data-part="page"] > :is([data-part="myInfo"], [data-part="cards"], :has(> [data-part="timezone"])) { margin-top: 18px; padding: 26px 30px 16px; border-bottom: 0; border-radius: 12px; background: var(--dw-soft); }
[data-telify="profile"] [data-part="page"] > [data-part="myInfo"] { margin-top: 28px; }
[data-telify="profile"] [data-part="myInfo"] > :first-child { margin: -26px -30px 4px; padding: 22px 30px 18px; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--dw-plum-line); background: var(--dw-plum-cap); }
[data-telify="profile"] :is([data-part="infoRow"], [data-part="infoField"], [data-part="timezone"]) > :first-child { color: var(--dw-teal-l); }
[data-telify="profile"] [data-part="cards"] > :last-child { padding-bottom: 8px; }

/* ---------- the checkout and the task pages (Pay now, a sent form, the Complete step) sit in her home page's garnet glow, so
   nothing competes with the fields and the pay button. Keyed on the region Telify's page draws in, by the piece it holds. ---------- */
[data-telify-screen]:has([data-telify="checkout"], [data-telify="payment-step"], [data-telify="form-request"], [data-telify="complete-step"]) { position: relative; isolation: isolate; }
[data-telify-screen]:has([data-telify="checkout"], [data-telify="payment-step"], [data-telify="form-request"], [data-telify="complete-step"])::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 900px; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(148, 37, 42, 0.34), transparent 70%), radial-gradient(ellipse 36% 40% at 84% 6%, rgba(87, 75, 115, 0.22), transparent 70%); }
[data-telify-screen]:has([data-telify="payment-step"], [data-telify="form-request"], [data-telify="complete-step"]) h1 { font-style: italic; }
/* Pay now: the card fields and Confirm & pay one soft block (on the checkout the payment step already sits in its step's block) */
[data-telify-screen]:not(:has([data-telify="checkout"])) [data-telify="payment-step"] { margin-top: 18px; padding: 26px 26px 28px; border-radius: 12px; background: var(--dw-soft); }
/* the built page holds the step 40 pixels under the ticket; hers sits 18 under it, as its blocks do */
[data-telify-screen]:not(:has([data-telify="checkout"])) :has(> [data-telify="payment-step"]) { margin-top: 18px; }
/* a sent form and the Complete step: the questions one soft block, no plum, so the questions lead */
:is([data-telify="form-request"], [data-telify="complete-step"]) [data-part="fields"] { margin-top: 28px; padding: 28px 30px 30px; border-radius: 12px; background: var(--dw-soft); }

@media (max-width: 860px) {
  :is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] { padding: 2px 18px; }
  :is([data-telify="service-page"], [data-telify="event-page"]) [data-part="facts"] > * { padding: 10px 0; }
  :is([data-telify="service-page"], [data-telify="event-page"]) :is(section:has(> [data-part="description"]), [data-part="preparation"]) { padding: 22px 20px 24px; }
  :is([data-telify="service-page"], [data-telify="event-page"]) [data-part="details"] { padding: 2px 20px; }
  [data-telify="booking-column"][data-telify-root] { padding: 22px 20px; }
  [data-telify="booking-column"] > :first-child { margin: -22px -20px 0; padding: 20px 20px 0; }
  [data-telify="booking-column"] > :is([data-part="terms"], [data-part="spots"]) { margin: 0 -20px; padding: 8px 20px 0; }
  [data-telify="booking-column"] > :is(:first-child, [data-part="terms"], [data-part="spots"]):not(:has(+ :is([data-part="terms"], [data-part="spots"]))) { margin-bottom: 20px; padding-bottom: 18px; }
  [data-telify="message-studio"][data-telify-root] { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; row-gap: 20px;
    background: linear-gradient(0deg, rgba(30, 24, 20, 0.95) 0%, rgba(30, 24, 20, 0.8) 55%, rgba(30, 24, 20, 0.45) 100%), url("/img/site/studio-brushes-warm.23ca460b6386.jpg") 60% 50% / cover no-repeat; }
  /* a booking's page stacks its parts on a phone and spaces the card itself, so the card adds no space of its own there */
  [data-telify="booking-page"] [data-telify="message-studio"][data-telify-root] { margin-top: 0; }
  [data-telify="checkout"] [data-part="steps"] > [data-part="step"] { padding: 20px 18px 22px; }
  [data-telify="checkout"] [data-part="summary"] > * { margin-left: 18px; margin-right: 18px; }
  [data-telify="checkout"] [data-part="summary"] > [data-part="offering"] { padding: 16px 18px 14px; }
  [data-telify="booked"] > :has(> [data-part="title"]) { padding-top: 52px; padding-bottom: 44px; }
  [data-telify="booked"] > :has(> [data-part="title"]) + * { margin-top: 32px; }
  :is([data-telify="booked"], [data-telify-screen]:has([data-telify="payment-step"])) [data-part="ticket"] { padding: 0 20px 4px; }
  :is([data-telify="booked"], [data-telify-screen]:has([data-telify="payment-step"])) [data-part="ticket"] > :first-child { margin: 0 -20px; padding: 20px; }
  :is([data-telify="booked"], [data-telify-screen]:has([data-telify="payment-step"])) [data-part="ticket"] > [aria-hidden="true"] { margin: 0 -20px; }
  [data-telify="bookings-list"] > [data-part="head"] { padding-top: 56px; padding-bottom: 52px; gap: 24px; align-items: center; }
  [data-telify="bookings-list"] > [data-part="head"] h1 { font-size: 56px; }
  [data-telify="bookings-list"] > [data-part="head"] p { font-size: 19px; margin-top: 14px; }
  [data-telify="next-session"] [data-part="session"] { padding: 200px 20px 24px; min-height: 0; }
  [data-telify="next-session"] [data-part="photo"]::after { background: linear-gradient(0deg, rgba(30, 24, 20, 0.96) 0%, rgba(30, 24, 20, 0.86) 45%, rgba(30, 24, 20, 0.15) 100%); }
  [data-telify="waiting-on-you"][data-telify-root] { padding: 0 18px 2px; }
  [data-telify="waiting-on-you"] > [data-part="head"] { margin: 0 -18px; padding: 18px 18px 14px; }
  [data-telify="bookings-list"] :is([data-part="upcoming"], [data-part="past"]) { padding: 0 18px; }
  [data-telify="booking-page"] > [data-part="heading"] { padding-top: 76px; padding-bottom: 32px; }
  [data-telify="booking-page"] [data-part="ticket"] { padding: 0 20px 2px; }
  [data-telify="booking-page"] [data-part="ticket"] [data-part="row"]:first-child { margin: 0 -20px; padding: 18px 20px 16px; }
  [data-telify="booking-page"] :is([data-part="preparation"], [data-part="about"]) { padding: 22px 20px 24px; }
  [data-telify="profile"] [data-part="page"] > [data-part="identity"] { padding-top: 40px; padding-bottom: 30px; }
  [data-telify="profile"] [data-part="page"] > :is([data-part="myInfo"], [data-part="cards"], :has(> [data-part="timezone"])) { padding: 22px 20px 12px; }
  [data-telify="profile"] [data-part="myInfo"] > :first-child { margin: -22px -20px 4px; padding: 18px 20px 14px; }
  [data-telify-screen]:not(:has([data-telify="checkout"])) [data-telify="payment-step"] { padding: 20px 18px 22px; }
  :is([data-telify="form-request"], [data-telify="complete-step"]) [data-part="fields"] { padding: 22px 20px 24px; }
}