/* Deck — a deck of panels you swipe through, not a page you scroll.

   Panel one is the front of the card the visitor just tapped: a photograph
   dissolving into a flood of the owner's colour, the mark, the name, the
   position, an index of the panels behind it, and Save contact. The panels
   after it are flat paper, ruled rather than boxed, one subject each. The only
   translucent surface on the whole card is the bar floating at the bottom:
   blur and saturate over a 72% fill with an inset specular hairline, a solid
   fallback for every browser and every viewer that does not want it, and the
   solid fill again while anything is moving. It is the only thing on screen
   at all times: the name, where you are, and one action.
   Photo-led: salons, interiors, photographers. */
body.ts2.theme-deck{
  /* Didone on iOS and macOS, Noto Serif on Android, Georgia everywhere else.
     No webfont: a beauty-trade card is read on a phone with one bar of signal. */
  --ts-font-display:"Didot","Bodoni 72","Bodoni MT","Noto Serif Display","Noto Serif",Georgia,serif;
  --ts-stage:#e2d0c5; --ts-wash-1:none; --ts-wash-2:none;
  --ts-surface:#fbf6f2; --ts-surface-2:#f4ebe5; --ts-surface-3:#eadcd3;
  --ts-ink:#2b1b16; --ts-ink-2:#57413a; --ts-ink-3:#6b5249; --ts-ink-on-brand:#ffffff;
  --ts-brand:#8b3f2c; --ts-brand-2:#74321f; --ts-brand-soft:rgba(139,63,44,.08);
  --ts-accent:#8b3f2c; --ts-accent-2:#8b3f2c; --ts-accent-soft:rgba(139,63,44,.1);
  --ts-success:#1f6b47; --ts-success-soft:rgba(31,107,71,.1);
  /* --ts-line is decorative; every interactive edge rides --ts-line-strong,
     which clears 3:1 on all three paper tones (WCAG 1.4.11). */
  --ts-line:rgba(43,27,22,.12); --ts-line-strong:rgba(43,27,22,.54); --ts-focus:#8b3f2c;
  --ts-banner:none; --ts-banner-h:0px;
  --ts-shadow-ink:rgba(43,27,22,.22); --ts-shadow-hair:rgba(43,27,22,.08);
  --ts-shadow-card:0 0 0 1px var(--ts-shadow-hair), 0 18px 36px -26px var(--ts-shadow-ink);
  --ts-shadow-btn:none;
  --ts-r-card:22px; --ts-r-lg:16px; --ts-r-md:12px; --ts-r-sm:8px; --ts-r-pill:999px;
  --ts-fs-name:40px; --ts-fw-display:400; --ts-ls-display:.004em; --ts-lh-tight:1.04;
  --ts-fs-label:10px; --ts-ls-label:.16em; --ts-fs-body:14px; --ts-lh-body:1.62;
  --ts-gutter:16px; --ts-gap:9px; --ts-section-y:24px;
  --ts-align:left; --ts-ai:flex-start; --ts-jc:flex-start; --ts-glint:0;
  /* The bar. --ts-dock-fill is what blurs; --ts-dock-solid is what ships when
     there is no backdrop-filter, or the viewer asked for less transparency, or
     anything on the page is moving. Both carry white at 7:1 or better over
     anything a customer can photograph. */
  --ts-dock-fill:rgba(28,18,15,.72); --ts-dock-solid:#2e2320;
  --ts-dock-ink:#ffffff; --ts-dock-ink-2:rgba(255,255,255,.82);
  --ts-dock-dot:rgba(255,255,255,.58); --ts-dock-hair:rgba(255,255,255,.34);
  --ts-dock-cta:#ffffff;
  /* The owner's colour as a LABEL on that white pill. accentStyleFor overwrites
     it for a card that picked a colour; this is the theme's own, measured the
     same way (7.38:1 on white). --ts-front-flood is deliberately NOT declared
     here: it falls back to --ts-brand, and only a picked colour needs it. */
  --ts-accent-on-light:#8b3f2c;
}

/* ---------- the front ---------- */
.theme-deck .ts-front-name{font-family:var(--ts-font-display)}
.theme-deck .ts-front-role{letter-spacing:.2em;font-size:10.5px}
.theme-deck .ts-front-mark{font-family:var(--ts-font-display);font-size:18px;font-weight:400}
.theme-deck .ts-front-idx a,.theme-deck .ts-front-save{border-width:1px;font-weight:600}
@media (forced-colors:active){
  .theme-deck .ts-front-mark,.theme-deck .ts-front-chip{border:1px solid CanvasText}
}

/* ---------- content panels: flat paper, one subject each ---------- */
/* One heading per panel, set like the page of a lookbook rather than a label
   strip; the icon goes because at 24px it reads as a bullet. */
.theme-deck .ts-panel .ts-label{margin:0 0 14px;gap:10px;align-items:baseline;color:var(--ts-ink);font-family:var(--ts-font-display);font-size:24px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.14}
.theme-deck .ts-panel .ts-label .ts-icon{display:none}
.theme-deck .ts-openpill{font-family:var(--ts-font-body);margin-left:auto}

/* Prices: ruled rows, the figure in the owner's colour. */
.theme-deck .ts-list{border:0;border-radius:0;gap:0}
.theme-deck .ts-row{background:transparent;padding:13px 0;border-bottom:1px solid var(--ts-line);align-items:baseline}
.theme-deck .ts-row:first-child{border-top:1px solid var(--ts-line)}
.theme-deck .ts-row-nm{font-size:15px;font-weight:600}
.theme-deck .ts-row-pr{font-size:15px;font-weight:700;color:var(--ts-accent-ink,var(--ts-accent))}
.theme-deck .ts-offer.is-quiet{border-radius:var(--ts-r-md);margin-top:14px}

/* Work: the first photograph takes the full width of the panel. The base
   "last odd item spans two" rule assumes no leading span, so it is swapped for
   its mirror here, otherwise a four-photo gallery leaves a hole. */
.theme-deck .ts-grid.two{gap:8px}
.theme-deck .ts-grid.two>li:first-child{grid-column:span 2}
.theme-deck .ts-grid.two>li:last-child:nth-child(odd){grid-column:auto}
.theme-deck .ts-grid.two>li:last-child:nth-child(even){grid-column:span 2}
.theme-deck .ts-tile{border:0;border-radius:var(--ts-r-lg)}
.theme-deck .ts-grid.two>li:first-child .ts-tile{aspect-ratio:1}
.theme-deck .ts-tile-cap{padding:20px 12px 10px;font-size:11.5px}

/* About */
.theme-deck .ts-bio{font-size:15.5px;line-height:1.66;color:var(--ts-ink)}
.theme-deck .ts-chips li{background:transparent;border-color:var(--ts-line-strong);color:var(--ts-ink);font-size:12.5px;padding:7px 12px}

/* Rows and boxes: ruled, not carded; buttons are pills. */
.theme-deck .ts-contact,.theme-deck .ts-links{gap:0}
.theme-deck .ts-contact-link,.theme-deck .ts-linkrow{background:transparent;border:0;border-bottom:1px solid var(--ts-line);border-radius:0;padding:14px 0}
.theme-deck .ts-contact-ic{background:var(--ts-accent-soft);border-radius:50%;color:var(--ts-accent-ink,var(--ts-accent))}
.theme-deck .ts-contact-vl{font-size:14.5px}
.theme-deck .ts-linkrow .arw{color:var(--ts-accent-ink,var(--ts-accent))}
.theme-deck .ts-hours{border:0;border-radius:0;gap:0}
.theme-deck .ts-hours li{background:transparent;padding:10px 0;border-bottom:1px solid var(--ts-line)}
.theme-deck .ts-hours li.today{background:var(--ts-accent-soft);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:var(--ts-r-sm)}
.theme-deck .ts-office,.theme-deck .ts-rev,.theme-deck .ts-pay,.theme-deck .ts-book{background:var(--ts-surface-2);border:0;border-radius:var(--ts-r-lg)}
.theme-deck .ts-book{text-align:left}
.theme-deck .ts-book-ic{margin:0 0 11px}
.theme-deck .ts-btn,.theme-deck .ts-cta{border-radius:var(--ts-r-pill)}
.theme-deck .ts-btn{border-color:var(--ts-line-strong)}
.theme-deck .ts-qbtn{background:transparent;border-color:var(--ts-line-strong);border-radius:var(--ts-r-pill)}
.theme-deck .ts-social{background:transparent;border-color:var(--ts-line-strong);color:var(--ts-ink)}
.theme-deck .ts-footer{text-align:left}

/* ---------- the one piece of glass ----------
   On the bar, never on a panel and never on .ts-card: blurring the content
   layer re-blurs every scroll frame, which is the 36%-janky-frames case Halo
   was carrying until it lost its blur. The fill is 72% opaque, above the 55%
   floor that keeps white legible over an arbitrary customer photograph, so
   the blur is decoration and the contrast comes from the fill. The solid
   colour is declared FIRST and the blur added in @supports, so a browser
   without backdrop-filter, a viewer who asked for less transparency, a viewer
   who asked for more contrast, and forced colours all get an opaque bar with
   the same measured contrast. */
.theme-deck .ts-dock-in{background:var(--ts-dock-solid);box-shadow:inset 0 1px 0 var(--ts-dock-hair), 0 14px 32px -14px var(--ts-shadow-ink)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .theme-deck .ts-dock-in{background:var(--ts-dock-fill);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
}
/* A blur over a backdrop that is translating is the one case WebKit cannot
   cache, the mock's own rule: "never on a sticky element". So the glass is
   only ever computed at rest: the controller flags any scroll on the body and
   the bar drops to its solid fill, which measures the same. */
.theme-deck.is-swiping .ts-dock-in{background:var(--ts-dock-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .theme-deck .ts-dock-in{background:var(--ts-dock-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (forced-colors:active){
  .theme-deck .ts-dock-in{background:Canvas;border:1px solid CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* The action is a light pill carrying the owner's colour as its label. A
   brand-coloured FILL is invisible against a dark glass bar for half the
   colours a picker can reach; a white pill is 7.4:1 against the bar over
   anything, and --ts-accent-on-light is the owner's colour corrected to 4.75:1
   on white by the solver. */
.theme-deck .ts-dock .ts-cta{background:var(--ts-dock-cta);color:var(--ts-accent-on-light);border:0;border-radius:var(--ts-r-pill);box-shadow:none;font-size:14px;font-weight:700;letter-spacing:.01em;text-transform:none}
.theme-deck .ts-dock .ts-cta .ts-icon{color:var(--ts-accent-on-light);width:17px;height:17px}
.theme-deck .ts-dock .ts-cta:active{background:var(--ts-dock-cta)}

/* The wallet pill on the front keeps the front's own ink, like Save contact
   above it: an outline in currentColor, never filled. */
.theme-deck .ts-front .ts-wallet--pill .ts-wallet-link{color:inherit;border-color:currentColor;padding:8px 14px 8px 10px;gap:10px}
.theme-deck .ts-front .ts-wallet--pill .ts-wallet-ic{width:30px;height:30px}