/* Tessera — event page description and tabs ([tessera_event_info]).
 *
 * Two layouts from one piece of markup:
 *
 *   - The accordion. What the server renders: every tab a <details> in a warm
 *     grey tray, About open. It is the phone layout, and it is every layout
 *     when the script does not run.
 *   - The tabs. On a desktop-width screen the script adds `.tt-info--tabs`,
 *     puts a row of chips in the tray above, and shows one tab's panel at a
 *     time. The <details> are kept; only their summaries are hidden.
 *
 * Approved as "option C" on 23/09/2026 (the chips in a tray). The tray and the
 * panel under it are the same width, on purpose.
 *
 * Like the picker, this renders inside the Hello Elementor theme, whose kit
 * restyles every bare a / button / heading at (0,1,1). Every rule is prefixed
 * `.tt-info` to out-specify it, the reset below neutralises what leaks, and the
 * tokens live on `.tt-info`, not `:root`. Do not drop the prefixes.
 */

.tt-info {
  --tt-surface: #ffffff;
  --tt-tray: #f4f1ee;
  --tt-panel: #fcfbfa;
  --tt-ink: #2f2f32;
  --tt-ink-soft: #48464a;
  --tt-ink-mid: #5c5a58;
  --tt-muted: #8a8785;
  --tt-icon: #9a9591;
  --tt-line: #ece8e5;
  --tt-line-soft: #f1eeeb;
  --tt-accent: #f26641;
  --tt-accent-strong: #c14a2b;
  --tt-accent-wash: #fdefe9;
  --tt-ring: rgba(242, 102, 65, .25);
  --tt-lift: 0 1px 3px rgba(40, 30, 25, .14);
  --tt-r-tray: 9px;
  --tt-r-chip: 6px;

  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--tt-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Scoped reset: the Elementor kit's heading / link / button / list bleed ---- */
.tt-info, .tt-info *, .tt-info *::before, .tt-info *::after { box-sizing: border-box; }

.tt-info h1, .tt-info h2, .tt-info h3, .tt-info h4, .tt-info p, .tt-info ul, .tt-info ol,
.tt-info li, .tt-info blockquote, .tt-info summary, .tt-info article,
.tt-info dl, .tt-info dt, .tt-info dd {
  margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: normal; text-transform: none;
}

.tt-info button {
  font: inherit; color: inherit; background: transparent; border: 0; border-radius: 0;
  margin: 0; padding: 0; letter-spacing: inherit; text-transform: none; box-shadow: none;
  line-height: inherit; appearance: none; cursor: pointer;
}

.tt-info button:hover, .tt-info button:focus { background: transparent; color: inherit; }

.tt-info [hidden] { display: none !important; }

.tt-info .tt-info__ic {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.tt-info .tt-info__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 5px;
  background: var(--tt-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}

/* ================= The accordion (server markup; phones; no script) ================= */

.tt-info .tt-info__list {
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px; background: var(--tt-tray); border-radius: var(--tt-r-tray);
}

.tt-info .tt-info__tab { border-radius: var(--tt-r-chip); }

.tt-info .tt-info__tab[open] { background: var(--tt-surface); box-shadow: var(--tt-lift); }

.tt-info .tt-info__head {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 14px 0 10px;
  font-size: 16px; font-weight: 600; color: var(--tt-ink-mid);
  border-radius: var(--tt-r-chip);
}

.tt-info .tt-info__head::-webkit-details-marker { display: none; }
.tt-info .tt-info__head::marker { content: ''; }

.tt-info .tt-info__head:focus-visible { outline: 2px solid var(--tt-ink); outline-offset: -2px; }

.tt-info .tt-info__tab[open] > .tt-info__head { color: var(--tt-ink); }

.tt-info .tt-info__tile {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; color: var(--tt-icon);
}

.tt-info .tt-info__tab[open] > .tt-info__head .tt-info__tile { background: var(--tt-accent-wash); color: var(--tt-accent); }

.tt-info .tt-info__chev {
  width: 18px; height: 18px; margin-left: auto; flex-shrink: 0;
  fill: none; stroke: var(--tt-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s;
}

.tt-info .tt-info__tab[open] > .tt-info__head .tt-info__chev { transform: rotate(180deg); stroke: var(--tt-accent-strong); }

.tt-info .tt-info__panel { margin: 0 10px; padding: 14px 6px 20px; border-top: 1px solid var(--tt-line-soft); }

/* The panel's own heading repeats the summary in the accordion, so only the
   tabs show it. */
.tt-info .tt-info__panelhead { display: none; }

/* ================= The tabs (desktop, script on) ================= */

.tt-info .tt-info__chips {
  display: flex; flex-wrap: wrap; gap: 4px; width: 100%;
  padding: 5px; background: var(--tt-tray); border-radius: var(--tt-r-tray);
}

.tt-info .tt-info__chip {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px 0 14px; border-radius: var(--tt-r-chip);
  color: var(--tt-ink-mid); font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}

.tt-info .tt-info__chip .tt-info__ic { color: var(--tt-icon); }

.tt-info .tt-info__chip:hover { color: var(--tt-ink); }

.tt-info .tt-info__chip[aria-selected="true"],
.tt-info .tt-info__chip[aria-selected="true"]:hover {
  background: var(--tt-surface); color: var(--tt-ink);
  box-shadow: var(--tt-lift), 0 0 0 1px var(--tt-ring);
}

.tt-info .tt-info__chip[aria-selected="true"] .tt-info__ic { color: var(--tt-accent); }

.tt-info .tt-info__chip:focus-visible { outline: 2px solid var(--tt-ink); outline-offset: 2px; }

.tt-info.tt-info--tabs .tt-info__list { display: block; padding: 0; background: none; border-radius: 0; margin-top: 12px; }

/* One tab only: no chips above it, so no gap for them either. Left in, the
   panel sat 12px lower in its card than the picker's does in the next one. */
.tt-info.tt-info--tabs .tt-info__chips[hidden] + .tt-info__list { margin-top: 0; }
.tt-info.tt-info--tabs .tt-info__tab,
.tt-info.tt-info--tabs .tt-info__tab[open] { background: none; box-shadow: none; }
.tt-info.tt-info--tabs .tt-info__head { display: none; }

/* 20px, the ticket picker card's own padding, so the two cards read as a pair. */
.tt-info.tt-info--tabs .tt-info__panel {
  margin: 0; padding: 20px;
  background: var(--tt-panel); border: 1px solid var(--tt-line); border-radius: var(--tt-r-tray);
}

.tt-info.tt-info--tabs .tt-info__panelhead {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--tt-line);
}

.tt-info .tt-info__panelhead .tt-info__tile { width: 34px; height: 34px; border-radius: 6px; background: var(--tt-accent-wash); color: var(--tt-accent); }

.tt-info .tt-info__title { font-size: 18px; font-weight: 700; color: var(--tt-ink); line-height: 1.3; }

.tt-info .tt-info__meta { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--tt-muted); }

/* ================= The organizer's text ================= */

.tt-info .tt-info__body { font-size: 16px; line-height: 1.65; color: var(--tt-ink-soft); overflow-wrap: anywhere; }

.tt-info .tt-info__body > * + * { margin-top: 16px; }

.tt-info .tt-info__body p { max-width: 68ch; }

.tt-info .tt-info__body strong, .tt-info .tt-info__body b { font-weight: 700; color: var(--tt-ink); }
.tt-info .tt-info__body em, .tt-info .tt-info__body i { font-style: italic; }
.tt-info .tt-info__body u { text-decoration: underline; }
.tt-info .tt-info__body s { text-decoration: line-through; }

.tt-info .tt-info__body h3 {
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tt-accent-strong); margin-top: 24px;
}

.tt-info .tt-info__body h4 { font-size: 15.5px; font-weight: 700; color: var(--tt-ink); margin-top: 22px; }

.tt-info .tt-info__body h3 + *, .tt-info .tt-info__body h4 + * { margin-top: 8px; }

.tt-info .tt-info__body > h3:first-child, .tt-info .tt-info__body > h4:first-child { margin-top: 0; }

.tt-info .tt-info__body ul, .tt-info .tt-info__body ol { padding-left: 22px; max-width: 68ch; }
.tt-info .tt-info__body ul { list-style: disc; }
.tt-info .tt-info__body ol { list-style: decimal; }
.tt-info .tt-info__body li { margin: 0 0 6px; padding-left: 2px; }
.tt-info .tt-info__body li::marker { color: var(--tt-accent); }
.tt-info .tt-info__body .tt-info__indent-1 { margin-left: 22px; }
.tt-info .tt-info__body .tt-info__indent-2 { margin-left: 44px; }
.tt-info .tt-info__body .tt-info__indent-3 { margin-left: 66px; }

/* The Elementor kit makes every bare link 20px, and 16px Nunito on hover, at
   (0,2,1). A link that pins its font only at rest takes the kit's on hover and
   changes size under the pointer, resizing whatever it sits in. So the font is
   set in every state, at a specificity the kit's hover rule cannot beat. */
.tt-info .tt-info__body a,
.tt-info .tt-info__body a:visited,
.tt-info .tt-info__body a:hover,
.tt-info .tt-info__body a:focus,
.tt-info .tt-info__body a:active {
  font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: 600;
}
.tt-info .tt-info__body a,
.tt-info .tt-info__body a:visited { color: var(--tt-accent-strong); text-decoration: none; }
.tt-info .tt-info__body a:hover,
.tt-info .tt-info__body a:focus { color: var(--tt-accent); text-decoration: underline; }

.tt-info .tt-info__body img { max-width: 100%; height: auto; border-radius: var(--tt-r-chip); }

/* ---- Video ---- */
.tt-info .tt-info__video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--tt-r-chip); overflow: hidden; background: var(--tt-ink); }
.tt-info .tt-info__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Older Android WebViews have no aspect-ratio; the padding trick does the same. */
@supports not (aspect-ratio: 16 / 9) {
  .tt-info .tt-info__video { height: 0; padding-top: 56.25%; }
}

/* ---- Updates ---- */
.tt-info .tt-info__rows { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-r-chip); }
.tt-info .tt-info__row { padding: 16px 18px; }
.tt-info .tt-info__row + .tt-info__row { border-top: 1px solid var(--tt-line); }
.tt-info .tt-info__when { font-size: 12.5px; font-weight: 600; color: var(--tt-muted); margin-bottom: 3px; }
/* Out-specifies the body's h3 rule above: a post's title is a title, not one
   of the organizer's capitals subheadings. */
.tt-info .tt-info__body .tt-info__rowtitle {
  margin-top: 0; font-size: 15.5px; font-weight: 700; letter-spacing: normal;
  text-transform: none; color: var(--tt-ink);
}
.tt-info .tt-info__rowbody { margin-top: 4px; font-size: 15px; color: var(--tt-ink-mid); }
.tt-info .tt-info__rowbody > * + * { margin-top: 10px; }

/* ================= The facts bar: [tessera_event_facts] =================
 *
 * One white card: the event's name and host, then each fact on a card of its
 * own, with the Tessera pattern faint in the top-right corner. It used to be a
 * strip of cells in a grey tray inside an orange-bordered Elementor box, which
 * read as a form rather than as the event (Jason, 24/09/2026). The card draws
 * its own surface now, so the Elementor container around it is left plain. */

/* Full width wherever it is placed. In an Elementor row container the shortcode
   widget shrinks to its content, which left the tray narrow and centred in the
   bar on staging on 24/09/2026; :has() lets the widget grow without anybody
   remembering to set it in the editor. Browsers without :has() keep the
   widget's own width. */
.tt-facts { width: 100%; }
.elementor-widget-shortcode:has(.tt-facts) { flex: 1 1 100%; width: 100%; max-width: 100%; }

.tt-info.tt-facts {
  position: relative; overflow: hidden; box-sizing: border-box;
  padding: 30px 32px 32px; background: var(--tt-surface); border-radius: 16px;
  /* The same shadow the template gives the tabs and picker cards, so the three
     read as one family and stand off the white page. */
  box-shadow: 0 5px 28px -8px rgba(31, 29, 27, .28);
}

/* The pattern, from artwork/PNG (cropped to the motif). Decoration only.
   It hangs from the card's top-right corner and fades out downwards, so it is
   gone by the time the fact cards begin rather than being cut off behind one.
   The fact cards sit above it. */
.tt-facts .tt-facts__head { position: relative; }
.tt-facts .tt-facts__head > :not(.tt-facts__pattern),
.tt-facts .tt-facts__tray { position: relative; }

.tt-facts .tt-facts__pattern {
  position: absolute; top: -30px; right: -32px; height: 190px; aspect-ratio: 500 / 404;
  pointer-events: none; opacity: .45;
  background: url("../img/tessera-pattern.png") no-repeat right top / contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 62%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 62%);
}

/* The event's name, and who hosts it; kept clear of the pattern. */
.tt-facts .tt-facts__head { margin: 0 0 24px; padding-right: 150px; }

/* Small orange subheadings over the name and over the facts (Jason, 24/09/2026). */
.tt-facts .tt-facts__eyebrow {
  position: relative; margin: 0 0 8px; text-align: left;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tt-accent); line-height: 1.3;
}
.tt-facts .tt-facts__eyebrow--details { margin-bottom: 12px; }

/* The ticket picker's card stays in view beside long tab content, on screens
   wide enough to have the two side by side. The class is set on the card's
   Elementor container in the template. */
@media (min-width: 1025px) {
  .tt-sticky, .e-con.tt-sticky { --position: sticky; position: sticky !important; top: 24px; }
  .admin-bar .tt-sticky { top: 56px; }
}

.tt-facts .tt-facts__title {
  font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--tt-ink);
  overflow-wrap: anywhere;
}

.tt-facts .tt-facts__host { margin-top: 6px; font-size: 15px; color: var(--tt-ink-mid); }
.tt-facts .tt-facts__host strong { font-weight: 700; color: var(--tt-ink); }

/* Each fact its own card, sharing the row evenly. */
.tt-facts .tt-facts__tray {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0;
}

.tt-facts .tt-facts__cell {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 18px 18px 20px; background: #f8f6f4; border-radius: 12px;
}

/* The pattern across the whole of each fact card, in white at a quarter
   strength: barely off the card's grey (Jason, 24/09/2026: the cards looked
   plain, and a corner motif was too much). One motif covering the card
   rather than a tile, because the artwork does not repeat seamlessly and the
   joins showed. A mask, so the one PNG serves in any colour. Cards only: on a
   phone the facts are a list, not cards. */
@media (min-width: 600px) {
  .tt-facts:not(.tt-contact) .tt-facts__cell { position: relative; overflow: hidden; }
  .tt-facts:not(.tt-contact) .tt-facts__cell > * { position: relative; z-index: 1; }
  .tt-facts:not(.tt-contact) .tt-facts__cell::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: .25;
    -webkit-mask: url("../img/tessera-pattern.png") no-repeat center / cover;
    mask: url("../img/tessera-pattern.png") no-repeat center / cover;
  }
}

.tt-facts .tt-info__tile {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--tt-accent-wash); color: var(--tt-accent);
}
.tt-facts .tt-info__ic { width: 24px; height: 24px; stroke-width: 1.8; }

.tt-facts .tt-facts__text { min-width: 0; }

.tt-facts .tt-facts__label {
  margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tt-muted); line-height: 1.3;
}

.tt-facts .tt-facts__value {
  margin: 6px 0 0; font-size: 17px; font-weight: 600; color: var(--tt-ink); line-height: 1.35;
  overflow-wrap: anywhere;
}

.tt-facts .tt-facts__cell--time .tt-facts__value { white-space: nowrap; }

/* A note (the city, CAT, "2 days") sits under its value. */
.tt-facts .tt-facts__sub { display: block; margin: 3px 0 0; font-size: 14px; font-weight: 500; color: var(--tt-ink-mid); }

.tt-facts .tt-facts__link,
.tt-facts .tt-facts__link:visited {
  display: flex; width: max-content; align-items: center; gap: 4px; margin-top: 8px;
  color: var(--tt-accent-strong); text-decoration: none;
}

/* Pinned in every state: see the kit's link hover note above the tab body links.
   Resting-only, Directions grew to 16px Nunito under the pointer and the whole
   card grew with it (Jason, 24/09/2026). */
.tt-info.tt-facts .tt-facts__link,
.tt-info.tt-facts .tt-facts__link:visited,
.tt-info.tt-facts .tt-facts__link:hover,
.tt-info.tt-facts .tt-facts__link:focus,
.tt-info.tt-facts .tt-facts__link:active {
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.35; letter-spacing: normal;
}
.tt-facts .tt-facts__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tt-facts .tt-facts__link:hover,
.tt-facts .tt-facts__link:focus { color: var(--tt-accent); text-decoration: underline; }

@media (max-width: 899px) {
  .tt-info.tt-facts { padding: 24px 22px 24px; }
  .tt-facts .tt-facts__pattern { top: -24px; right: -22px; height: 160px; }
  .tt-facts .tt-facts__head { padding-right: 110px; }
}

/* Phones: a compact list rather than a stack of cards.
 *
 * Stacked, the cards took about 400px before a buyer reached the tickets. As
 * a list — icon and value, a hairline between rows — it is under half that,
 * and the icons already say which line is which. The labels stay in the
 * markup for screen readers, only hidden from view. */
@media (max-width: 599px) {
  .tt-info.tt-facts { padding: 20px 16px 16px; border-radius: 14px; }
  .tt-facts .tt-facts__pattern { top: -20px; right: -16px; height: 120px; opacity: .4; }
  .tt-facts .tt-facts__head { margin-bottom: 14px; padding-right: 64px; }
  .tt-facts .tt-facts__title { font-size: 26px; }
  .tt-facts .tt-facts__host { font-size: 14px; margin-top: 4px; }

  .tt-facts .tt-facts__tray { display: block; padding: 2px 14px; background: #f8f6f4; border-radius: 12px; }

  .tt-facts .tt-facts__cell {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 0; background: none; border-radius: 0;
  }

  .tt-facts .tt-facts__cell + .tt-facts__cell { border-top: 1px solid #e7e2de; }

  .tt-facts .tt-info__tile { width: 28px; height: 28px; border-radius: 6px; background: var(--tt-surface); }
  .tt-facts .tt-info__ic { width: 16px; height: 16px; }

  .tt-facts .tt-facts__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .tt-facts .tt-facts__value { margin: 0; font-size: 15px; }
  .tt-facts .tt-facts__cell--time .tt-facts__value { white-space: normal; }
  .tt-facts .tt-facts__sub { display: inline; margin: 0 0 0 4px; font-size: 13px; color: var(--tt-muted); }
  .tt-facts .tt-facts__link, .tt-facts .tt-facts__link:visited { display: inline-flex; margin: 0 0 0 8px; }
}

/* ------------------------------------------------------------------
 * The contact card ([tessera_event_contact]): the facts card's surface,
 * eyebrow and cells, with the pattern turned into the bottom-left corner
 * (Jason, 24/09/2026), so the two cards bracket the page between them.
 * ------------------------------------------------------------------ */
/* A motif of its own (Jason, 24/09/2026: artwork/PNG a86ed1e6…, black taken
   out): a strip cut along its left side, so it stands against the card's left
   edge from the bottom corner and fades out upwards. */
.tt-contact .tt-contact__pattern {
  position: absolute; left: 0; bottom: 0; height: 230px; aspect-ratio: 511 / 708;
  pointer-events: none; opacity: .5;
  background: url("../img/tessera-pattern-contact.png") no-repeat left bottom / contain;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 78%);
  mask-image: linear-gradient(to top, #000 30%, transparent 78%);
}
.tt-contact > :not(.tt-contact__pattern) { position: relative; }

.tt-contact .tt-contact__title {
  margin: 0; font-family: inherit; font-size: 24px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.005em; text-transform: none; color: var(--tt-ink);
}

.tt-contact .tt-contact__lede {
  max-width: 62ch; margin: 8px 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--tt-ink-mid);
}

.tt-contact .tt-contact__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}

/* Wide screens: the heading in a column of its own on the left, the two
   contacts beside it. That leaves the bottom-left corner open, under the
   words, for the pattern to show in rather than behind a card. */
@media (min-width: 900px) {
  .tt-info.tt-facts.tt-contact {
    display: grid; grid-template-columns: minmax(240px, 4fr) 8fr; column-gap: 36px; align-items: start;
  }
  .tt-contact .tt-contact__intro { padding-bottom: 96px; }
  .tt-contact .tt-contact__lede { margin-bottom: 0; }
}

.tt-contact .tt-contact__note { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--tt-ink-mid); }

.tt-contact .tt-contact__lines { margin: 12px 0 0; padding: 0; list-style: none; }
.tt-contact .tt-contact__lines li { margin: 0; padding: 0; }
.tt-contact .tt-contact__lines li + li { margin-top: 6px; }

.tt-contact .tt-contact__link,
.tt-contact .tt-contact__link:visited {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  color: var(--tt-accent-strong); text-decoration: none;
}
/* Pinned in every state, for the kit's link hover; see the Directions link. */
.tt-info.tt-contact .tt-contact__link,
.tt-info.tt-contact .tt-contact__link:visited,
.tt-info.tt-contact .tt-contact__link:hover,
.tt-info.tt-contact .tt-contact__link:focus,
.tt-info.tt-contact .tt-contact__link:active {
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: normal;
}
.tt-contact .tt-contact__link span { overflow-wrap: anywhere; }
.tt-contact .tt-contact__link .tt-info__ic {
  flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tt-contact .tt-contact__link:hover,
.tt-contact .tt-contact__link:focus { color: var(--tt-accent); text-decoration: underline; }
.tt-contact .tt-contact__link:focus-visible { outline: 2px solid var(--tt-ink); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 899px) {
  .tt-contact .tt-contact__pattern { height: 190px; }
}

/* Phones: the facts card turns its cells into a list with the labels hidden.
   Here the labels are the point, so the cells stay cards, side by side with
   their icon, one above the other. */
@media (max-width: 599px) {
  .tt-contact .tt-contact__pattern { height: 150px; opacity: .45; }
  .tt-contact .tt-contact__title { font-size: 21px; }
  .tt-contact .tt-contact__lede { margin-bottom: 14px; font-size: 14.5px; }

  .tt-facts.tt-contact .tt-facts__cell {
    flex-direction: row; align-items: flex-start; gap: 12px;
    padding: 14px; background: #f8f6f4; border-radius: 12px;
  }
  .tt-facts.tt-contact .tt-facts__cell + .tt-facts__cell { border-top: 0; }
  .tt-facts.tt-contact .tt-info__tile { width: 36px; height: 36px; border-radius: 10px; background: var(--tt-accent-wash); }
  .tt-facts.tt-contact .tt-info__ic { width: 20px; height: 20px; }
  .tt-facts.tt-contact .tt-contact__link .tt-info__ic { width: 16px; height: 16px; }
  .tt-facts.tt-contact .tt-facts__label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  }
  .tt-facts.tt-contact .tt-facts__value { margin: 4px 0 0; font-size: 16px; }
}

@media (min-width: 768px) {
  .tt-info .tt-info__body { font-size: 16.5px; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-info .tt-info__chev, .tt-info .tt-info__chip { transition: none; }
}

/* An agreement tab's closing line: buyers will be asked to agree at checkout. */
.tt-info .tt-info__body .tt-info__agree-note {
  margin: 18px 0 0; padding: 10px 14px; border-radius: 8px;
  background: var(--tt-accent-wash); color: var(--tt-ink-soft); font-size: 14px; line-height: 1.5;
}