/* Press — a printed label, not a page. A heritage shop's card should read as
   a made object: a coloured rim, a double-ruled cream label with a seal and
   the year the house opened, a window onto what it sells, and wavy edges
   where every other theme draws a rectangle. The waves are one 40x10 SVG
   path used as a CSS mask, painted once and never animated. System faces
   only: Bodoni and Didot on Apple devices, Noto Serif on Android, which also
   ships every Indian script. */
body.ts2.theme-press{
  --ts-font-display:"Bodoni 72",Didot,"Bodoni MT","Noto Serif Display","Noto Serif",Georgia,serif;
  --ts-stage:#e8dcc4; --ts-wash-1:none; --ts-wash-2:none;
  --ts-surface:#e8dcc4; --ts-surface-2:#fbf6ea; --ts-surface-3:#d8c9ab;
  --ts-ink:#2a1c12; --ts-ink-2:#4d3a2b; --ts-ink-3:#65503f; --ts-ink-on-brand:#ffffff;
  --ts-brand:#861d52; --ts-brand-2:#6c1642; --ts-brand-soft:rgba(134,29,82,.08);
  --ts-accent:#861d52; --ts-accent-2:#861d52; --ts-accent-soft:rgba(134,29,82,.09);
  --ts-success:#17693f; --ts-success-soft:rgba(23,105,63,.1);
  /* --ts-line is decorative. Boundaries INSIDE a slip ride --ts-line-strong,
     which the accent solver measures against that cream paper; boundaries on
     the kraft ground ride --ts-ink-3 instead, see the note further down. */
  --ts-line:rgba(42,28,18,.16); --ts-line-strong:rgba(42,28,18,.55); --ts-focus:#861d52;
  --ts-banner:none; --ts-banner-h:0px;
  --ts-shadow-ink:rgba(42,28,18,.18); --ts-shadow-card:none; --ts-shadow-btn:none;
  --ts-r-card:0px; --ts-r-lg:3px; --ts-r-md:3px; --ts-r-sm:2px; --ts-r-pill:999px;
  --ts-fw-display:400; --ts-ls-display:0;
  --ts-fs-label:10.5px; --ts-ls-label:.24em; --ts-fs-body:14px; --ts-lh-body:1.62;
  --ts-gutter:18px; --ts-gap:10px; --ts-section-y:18px;
  --ts-align:center; --ts-ai:center; --ts-jc:center; --ts-glint:0;
  /* One wave, two directions: filled below for an edge that sits above a
     panel, filled above for one that sits below it. The tiles join seamlessly
     because the end tangent of each equals its start tangent. No colour in
     the data URI, so a mask is all it can ever be. */
  --pr-wave-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 10V5Q10 0 20 5T40 5V10Z'/%3E%3C/svg%3E");
  --pr-wave-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 0V5Q10 10 20 5T40 5V0Z'/%3E%3C/svg%3E");
  --pr-squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5Q5 1 10 5T20 5T30 5T40 5V6.6Q35 10.6 30 6.6T20 6.6T10 6.6T0 6.6Z'/%3E%3C/svg%3E");
}

/* ---------- the label ---------- */
.theme-press .ts-imprint{padding-bottom:21px}
/* The window is an arch with a cream-and-accent ring. The ring is an OUTER
   shadow, not an outline: outline only follows a border-radius on recent
   engines, and a rectangle around an arch is worse than no ring at all. */
.theme-press .ts-imprint-photo{border-radius:999px 999px var(--ts-r-sm) var(--ts-r-sm);box-shadow:0 0 0 4px var(--ts-surface-2),0 0 0 5px var(--ts-accent-ink,var(--ts-accent))}

/* ---------- the wavy edges ---------- */
/* Everything in here degrades to a straight edge, which is what a browser
   without masks gets: the rim ends flat, the slips are rectangles, the
   ornament is the hairline base.css already draws. */
@supports ((-webkit-mask-image:none) or (mask-image:none)){
  .theme-press .ts-imprint{background:none}
  .theme-press .ts-imprint::before{content:"";position:absolute;inset:0 0 9px;background:var(--ts-brand)}
  .theme-press .ts-imprint::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ts-brand);-webkit-mask:var(--pr-wave-down) 0 0/40px 10px repeat-x;mask:var(--pr-wave-down) 0 0/40px 10px repeat-x}
  .theme-press .ts-body>.ts-sec:has(>.ts-label)::before,
  .theme-press .ts-body>.ts-sec:has(>.ts-label)::after{content:"";position:absolute;left:0;right:0;height:10px;background:var(--ts-surface-2);pointer-events:none}
  .theme-press .ts-body>.ts-sec:has(>.ts-label)::before{top:-9px;-webkit-mask:var(--pr-wave-up) 0 0/40px 10px repeat-x;mask:var(--pr-wave-up) 0 0/40px 10px repeat-x}
  .theme-press .ts-body>.ts-sec:has(>.ts-label)::after{bottom:-9px;-webkit-mask:var(--pr-wave-down) 0 0/40px 10px repeat-x;mask:var(--pr-wave-down) 0 0/40px 10px repeat-x}
  .theme-press .ts-imprint-orn{width:40px;height:10px;-webkit-mask:var(--pr-squiggle) center/40px 10px no-repeat;mask:var(--pr-squiggle) center/40px 10px no-repeat}
}

/* ---------- the body: printed slips on kraft ---------- */
.theme-press .ts-body{padding-top:14px}
.theme-press .ts-body>.ts-sec:has(>.ts-label){position:relative;margin:32px 12px;padding:16px 18px 18px;background:var(--ts-surface-2)}
.theme-press .ts-label{justify-content:center;color:var(--ts-ink)}
.theme-press .ts-label .ts-icon{display:none}
/* Accent-coloured small text ONLY inside a slip: that cream is the panel the
   accent solver measures against, and the kraft ground is a step darker. */
.theme-press .ts-sec:has(>.ts-label)>.ts-label{margin:0 0 12px;padding-left:.24em;color:var(--ts-accent-ink,var(--ts-accent))}
.theme-press .ts-sec:has(>.ts-label)>.ts-label::before,
.theme-press .ts-sec:has(>.ts-label)>.ts-label::after{content:"";flex:0 1 28px;height:1px;background:currentColor}
/* The hours heading already carries the open/closed pill; rules as well is
   three things fighting for one line on a 360px phone. */
.theme-press .ts-sec:has(>.ts-label)>.ts-label:has(.ts-openpill)::before,
.theme-press .ts-sec:has(>.ts-label)>.ts-label:has(.ts-openpill)::after{display:none}
.theme-press .ts-openpill{margin-left:6px;letter-spacing:.07em}

/* rate list: shop type, a dotted rule between rows, the figure on the right */
.theme-press .ts-list{border:0;border-radius:0;gap:0;text-align:left}
.theme-press .ts-row{background:transparent;padding:11px 0;border-bottom:1px dotted var(--ts-line-strong);gap:0;align-items:baseline}
.theme-press .ts-row:last-child{border-bottom:0}
.theme-press .ts-row>span:first-child{flex:1 1 auto;min-width:0}
.theme-press .ts-row-nm{font-family:var(--ts-font-display);font-size:17px;font-weight:400;line-height:1.3}
.theme-press .ts-row-pr{padding-left:14px;font-size:14px;font-weight:750;color:var(--ts-ink)}

/* hours + history + contact: ruled, never boxed. overflow:visible so the
   today row's tint actually bleeds into the slip's padding; base.css clips
   it otherwise and the negative margin is dead code. */
.theme-press .ts-hours{border:0;border-radius:0;gap:0;overflow:visible;text-align:left}
.theme-press .ts-hours li{background:transparent;padding:9px 2px;border-bottom:1px dotted var(--ts-line-strong);font-size:13px;color:var(--ts-ink-2)}
.theme-press .ts-hours li:last-child{border-bottom:0}
.theme-press .ts-hours li.today{background:var(--ts-accent-soft);color:var(--ts-ink);margin:0 -8px;padding-left:10px;padding-right:10px}
.theme-press .ts-steps{text-align:left}
.theme-press .ts-step{padding:12px 0;border-bottom:1px dotted var(--ts-line-strong)}
.theme-press .ts-step:first-child{border-top:0}
.theme-press .ts-step:last-child{border-bottom:0}
/* Years, not durations: set them in the display face so the column reads as a
   date list. */
.theme-press .ts-step-when{font-family:var(--ts-font-display);font-size:19px;font-weight:700;line-height:1.15}
.theme-press .ts-step-what{font-size:14px;color:var(--ts-ink)}
.theme-press .ts-contact,.theme-press .ts-links{gap:0;text-align:left}
.theme-press .ts-contact-link,
.theme-press .ts-linkrow{background:transparent;border:0;border-bottom:1px dotted var(--ts-line-strong);border-radius:0;padding:12px 0}
.theme-press .ts-contact li:last-child .ts-contact-link{border-bottom:0}
.theme-press .ts-contact-ic{background:transparent;width:22px;border-radius:0;color:var(--ts-accent-ink,var(--ts-accent))}

/* the shop's photographs: arched windows with the caption under them */
.theme-press .ts-grid.two{gap:16px 12px;text-align:left}
.theme-press .ts-tile{border:0;border-radius:0;background:transparent}
.theme-press .ts-grid.two .ts-tile{aspect-ratio:auto;display:flex;flex-direction:column}
.theme-press .ts-grid.two .ts-tile img{aspect-ratio:4/5;height:auto;border-radius:999px 999px var(--ts-r-sm) var(--ts-r-sm)}
.theme-press .ts-grid.two>li:last-child:nth-child(odd) .ts-tile img{aspect-ratio:16/9}
.theme-press .ts-tile-cap{position:static;background:none;color:var(--ts-ink);padding:9px 0 0;font-size:13px;font-weight:650;text-align:center}
.theme-press .ts-tile-desc{color:var(--ts-ink-3);font-size:12px;text-align:center}

/* panels that are really just text */
.theme-press .ts-office,.theme-press .ts-rev,.theme-press .ts-pay,.theme-press .ts-book{background:transparent;border:0;border-radius:0;padding:4px 0 0;text-align:left}
.theme-press .ts-office-nm{font-family:var(--ts-font-display);font-size:19px;font-weight:400}
.theme-press .ts-rev-score{font-family:var(--ts-font-display);font-size:32px;font-weight:400}
.theme-press .ts-bio{font-size:15px;color:var(--ts-ink);text-align:left}
.theme-press .ts-social{background:transparent;border-color:var(--ts-line-strong);color:var(--ts-ink)}

/* ---------- buttons: a stamped label, not a pill ---------- */
.theme-press .ts-cta{letter-spacing:.14em;border-radius:var(--ts-r-md)}
.theme-press .ts-cta:not(.is-quiet){box-shadow:inset 0 0 0 4px var(--ts-brand),inset 0 0 0 5px var(--ts-ink-on-brand)}
.theme-press .ts-cta:not(.is-quiet):active{background:var(--ts-brand-2);box-shadow:inset 0 0 0 4px var(--ts-brand-2),inset 0 0 0 5px var(--ts-ink-on-brand)}
/* THE KRAFT-GROUND BOUNDARIES. These four controls are the only ones press
   paints on --ts-surface rather than on a slip, and --ts-line-strong is the
   wrong token for them: the accent solver corrects it to 3:1 against
   THEME_BG.press.panel (the label paper), and kraft is 1.26x darker, so an
   owner-picked accent lands at 2.54:1 here on 7 of the 10 probe colours the
   accent test sweeps. --ts-ink-3 is 5.58:1 on kraft by default and
   deriveGround guarantees it >= 3.1:1 against whatever an owner's ground
   produces. */
.theme-press .ts-qbtn,
.theme-press .ts-dock-2,
body.ts2.theme-press .ts-cta.is-quiet{border-color:var(--ts-ink-3)}
.theme-press .ts-qbtn{background:transparent;color:var(--ts-ink);border-radius:var(--ts-r-md)}
/* The offer is a stamp on the label's own paper, so its text is measured
   against the panel like everything else. */
body.ts2.theme-press .ts-offer.is-quiet{background:var(--ts-surface-2);border:1px dashed var(--ts-accent-ink,var(--ts-accent));border-radius:var(--ts-r-md);text-align:left}
body.ts2.theme-press .ts-offer.is-quiet .ts-icon{color:var(--ts-accent-ink,var(--ts-accent))}

/* ---------- the contents bar ---------- */
.theme-press .ts-index{margin:22px var(--ts-gutter) 0;gap:0;border-top:1px solid var(--ts-ink-3);border-bottom:1px solid var(--ts-ink-3)}
.theme-press .ts-index a{border:0;border-radius:0;padding:11px 12px;color:var(--ts-ink-2);letter-spacing:.14em}
.theme-press .ts-index a+a{box-shadow:inset 1px 0 0 var(--ts-line)}

/* ---------- one stamp, once ---------- */
/* Finite and transform-only, and it starts dimmed rather than invisible so a
   screenshot or a browser that never runs it still shows the seal. */
@media (prefers-reduced-motion:no-preference){
  .theme-press .ts-imprint-seal{animation:pr-stamp .6s var(--ts-spring) .12s both}
}
@keyframes pr-stamp{from{opacity:.4;transform:scale(1.16) rotate(-8deg)}to{opacity:1;transform:none}}

/* ---------- desktop: the label is the left column ---------- */
@media (min-width:1024px){
  .theme-press .ts-body{padding-top:28px}
  .theme-press .ts-body>.ts-sec:has(>.ts-label){margin-left:28px;margin-right:28px}
}

