body[data-appearance] {
  background: var(--page-bg);
  color: var(--page-ink);
  --line: var(--page-line);
}
[data-appearance] .public-header,
[data-appearance] .address .wordmark { color: var(--page-ink) }
[data-appearance] .address,
[data-appearance] .sample-label,
[data-appearance] .links-bio,
[data-appearance] .profile-intro .sample-label,
[data-appearance] .profile-actions .text-link,
[data-appearance] .approach-note { color: var(--page-muted) }
[data-appearance] .name-dot,
[data-appearance] .profile-intro h1 > span,
[data-appearance] .profile-tagline { color: var(--accent-on-page) }
[data-appearance] .links-identity h1,
[data-appearance] .profile-intro h1 { font-family: var(--name-font) }
[data-appearance] { font-family: var(--body-font) }
[data-name-font]:not([data-name-font=sora]) .links-identity h1,
[data-name-font]:not([data-name-font=sora]) .profile-intro h1 { font-weight: 400; letter-spacing: -.04em }
[data-name-font=bebas-neue] :is(.links-identity, .profile-intro) h1 { letter-spacing: 0 }
[data-name-font=dancing-script] :is(.links-identity, .profile-intro) h1 { letter-spacing: 0; line-height: 1.3 }
/* The page colour is laid over the background image by --page-dim so text stays readable. */
.has-background[data-appearance] {
  background-image: linear-gradient(color-mix(in srgb, var(--page-bg) var(--page-dim), transparent), color-mix(in srgb, var(--page-bg) var(--page-dim), transparent)), var(--page-image);
  background-size: cover;
  background-position: center;
}
.has-background .public-header .address { background: color-mix(in srgb, var(--page-bg) 72%, transparent); padding: 6px 12px; border-radius: 999px }
[data-appearance] .page-banner { overflow: hidden; border-radius: 7px; border: 1px solid var(--page-line); background: var(--panel-bg) }
[data-appearance] .page-banner img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover }
.links-page[data-appearance] .page-banner { margin-bottom: -53px }
.links-page[data-appearance] .with-banner .avatar-frame { position: relative; z-index: 1; border-width: 4px; border-color: var(--page-bg) }
.links-page[data-appearance] .public-gallery { margin: 26px 0 0 }
[data-appearance] span.address { color: var(--page-muted) }
[data-appearance] .avatar-frame { background: var(--panel-bg); border-color: var(--page-line) }
[data-appearance] .destination {
  background: var(--panel-bg);
  color: var(--panel-ink);
  border-color: var(--panel-line);
  border-radius: var(--button-radius);
}
[data-appearance] .destination-icon { background: var(--accent-soft); color: var(--accent-soft-ink) }
[data-appearance] .destination-arrow { color: var(--accent-on-panel) }
[data-appearance] .primary-destination,
[data-appearance] .button.lavender {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  border-radius: var(--button-radius);
}
[data-appearance] .primary-destination .destination-icon { background: transparent; color: inherit }
[data-appearance] .primary-destination .destination-arrow { color: inherit }
.links-page[data-appearance] .primary-destination { margin-top: 6px }
[data-appearance] .links-boundaries,
[data-appearance] .approach-note { border-color: var(--page-line) }
[data-appearance] .links-boundaries > summary { color: var(--accent-on-page) }
[data-appearance] .boundary-content ol,
[data-appearance] .links-main .limits-pair p { color: var(--page-muted) }
[data-appearance] .public-footer { color: var(--page-muted) }
[data-appearance] .public-footer .wordmark { color: var(--page-ink) }
[data-appearance] .profile-content,
.profile-page[data-appearance] .public-footer { background: var(--panel-bg); color: var(--panel-ink) }
.profile-page[data-appearance] .public-footer { border-color: var(--panel-line); color: var(--panel-muted) }
.profile-page[data-appearance] .public-footer .wordmark { color: var(--panel-ink) }
[data-appearance] .about-section .eyebrow,
[data-appearance] .limits-section h3,
[data-appearance] .section-label > .icon { color: var(--accent-on-panel) }
[data-appearance] .rules-section,
[data-appearance] .interests-section,
[data-appearance] .profile-links-column { border-color: var(--panel-line) }
[data-appearance] .interest-list { gap: 9px 22px }
[data-appearance] .interest-list > span, [data-appearance] .interest-list > a { background: transparent; padding: 0; color: var(--panel-muted); font-size: 12px }
[data-appearance] .rules-section ol,
[data-appearance] .rules-section li::before,
[data-appearance] .limits-section p { color: var(--panel-muted) }
[data-appearance] :is(a, button, summary):focus-visible { outline-color: var(--accent-on-page) }
[data-appearance] .profile-content :is(a, button):focus-visible { outline-color: var(--accent-on-panel) }
[data-appearance] .destination:focus-visible { outline-color: var(--page-ink) }
@media (hover: hover) and (pointer: fine) {
  [data-appearance] .destination:hover { background: var(--panel-hover); border-color: var(--accent-on-panel) }
  [data-appearance] .primary-destination:hover,
  [data-appearance] .button.lavender:hover { background: var(--accent-hover); border-color: var(--accent) }
  [data-appearance] .icon-button:hover { background: color-mix(in srgb, var(--page-ink) 7%, transparent) }
  [data-appearance] .approach-note:hover { color: var(--page-ink) }
}
@media (max-width: 760px) {
  .links-page[data-appearance] .links-main:has(.page-banner) { margin-top: 0 }
  .links-page[data-appearance] .page-banner {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-top: 0;
    border-inline: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  [data-appearance] .profile-intro {
    align-self: end;
    padding-top: 110px;
    background: linear-gradient(180deg, transparent 0, var(--page-bg) 110px);
  }
}
/* Banner crop. height:auto lets aspect-ratio win over the image's height attribute. */
[data-appearance] .page-banner img { height: auto }
[data-appearance][data-banner=video] .page-banner img { aspect-ratio: 16 / 9 }
[data-appearance][data-banner=original] .page-banner img { aspect-ratio: auto }
/* Background fit. The first layer is the dim, the second the image. */
.has-background[data-fit=tile] { background-size: auto, auto var(--tile-size, 240px); background-repeat: no-repeat, repeat; background-position: 0 0 }
.has-background[data-fit=fit] { background-size: auto, 100% auto; background-repeat: no-repeat; background-position: top center }
/* Link marks. Colour: the brand's colour on its chip. Flat: the accent, like generic icons. */
[data-appearance] .destination-icon.mark-colour { background: var(--chip); color: var(--brand); border: 1px solid var(--panel-line) }
.destination-icon > svg:not(.icon) { width: 16px; height: 16px; fill: currentColor }
.destination-icon > i { display: block; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat }
.destination-icon > img { width: 19px; height: 19px; object-fit: contain }
.destination-icon > b { font-size: 11px; font-weight: 600; letter-spacing: -.03em }

.links-page > .public-page-content { display: flex; flex-direction: column; min-height: 100svh }
body[data-gate-open] { overflow: hidden }
[data-gate-open] .public-page-content { pointer-events: none; user-select: none }
.age-gate {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain;
  display: flex; padding: 24px;
  background: color-mix(in srgb, var(--page-bg) 45%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.age-gate[hidden] { display: none }
.age-gate:focus { outline: none }
.age-gate-card {
  width: min(100%, 380px); margin: auto; padding: 30px 26px 20px;
  border: 1px solid var(--panel-line); border-radius: 12px;
  background: var(--panel-bg); color: var(--panel-ink);
  box-shadow: 0 12px 48px #00000012;
}
.age-gate-label { font-size: 11px; color: var(--panel-muted); margin-bottom: 14px }
.age-gate-card h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.05em; margin-bottom: 28px }
.age-gate-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; cursor: pointer }
.age-gate-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-on-panel) }
.age-gate-date { display: grid; gap: 8px; font-size: 12px }
.age-gate-date input {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--panel-line); border-radius: 5px; font-size: 16px;
  background: var(--panel-bg); color: var(--panel-ink);
}
.age-gate-submit {
  display: block; width: 100%; min-height: 46px; margin-top: 22px; padding: 12px 16px;
  border-radius: var(--button-radius); background: var(--accent); color: var(--on-accent); font-size: 12px;
}
.age-gate-submit:disabled { opacity: .6; cursor: default }
.age-gate-leave { display: block; text-align: center; margin-top: 10px; padding: 12px; font-size: 11px; color: var(--panel-muted) }
.age-gate-detail { font-size: 12px; color: var(--panel-muted) }
/* Red moved halfway to the panel's text colour, so it reads on light and dark panels. */
.age-gate-card { --gate-error: color-mix(in srgb, #bc023f 50%, var(--panel-ink)) }
.age-gate-error { margin-top: 8px; font-size: 12px; color: var(--gate-error) }
.age-gate-date input[aria-invalid=true] { border-color: var(--gate-error) }
.age-gate-camera[hidden], .age-gate-card form[hidden] { display: none }
.age-gate-camera video { display: block; width: 100%; max-height: 40svh; aspect-ratio: 4 / 3; object-fit: cover; transform: scaleX(-1); border-radius: 6px; background: #17141a }
.age-gate-instruction { text-align: center; font-size: 16px; margin-top: 16px }
.age-gate-step { text-align: center; color: var(--panel-muted); font-size: 11px; margin-top: 6px }
.age-gate-cancel { display: block; width: 100%; min-height: 44px; font-size: 12px; color: var(--panel-ink); margin-top: 12px }
[data-appearance] .age-gate :is(a, button, input):focus-visible { outline-color: var(--accent-on-panel) }
@media (max-width: 400px) { .age-gate { padding: 20px }.age-gate-card { padding: 28px 22px 18px } }