/* ZenoProfile — public profile base (design phase), on top of Bootstrap 5.3 (D-051).
   Load order on a public page: bootstrap.min.css → palettes.css (tokens + Bootstrap variables per palette)
   → this file (profile components the renderer emits, t-* classes) → templates/<key>/template.css.
   No inline styles, no scripts needed. Logical properties (RTL-ready). */

/* ---------- tokens a template may override ---------- */
:root {
  --t-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --t-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --t-radius: 16px; --t-radius-sm: 10px; --t-radius-pill: 999px;
  --t-max: 1080px; --t-gutter: clamp(16px, 4vw, 40px);
  --t-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.14);
  --t-focus: 0 0 0 3px var(--t-bg), 0 0 0 6px var(--t-accent);
  --t-ease: cubic-bezier(.22,1,.36,1);
  --t-size-0: 0.8125rem; --t-size-1: 0.9375rem; --t-size-2: 1.0625rem; --t-size-3: 1.25rem; --t-size-4: 1.5rem; --t-size-5: 2rem; --t-size-6: clamp(2.25rem, 5vw, 3.25rem);
  --bs-font-sans-serif: var(--t-font-body);
  --bs-border-radius: var(--t-radius-sm); --bs-border-radius-lg: var(--t-radius); --bs-border-radius-pill: var(--t-radius-pill);
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body { background: var(--t-bg); color: var(--t-text); font-family: var(--t-font-body); font-size: var(--t-size-1); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--t-link); text-underline-offset: .15em; }
a:hover { color: var(--t-link); text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--t-focus); border-radius: 4px; }
.btn:focus-visible, .form-control:focus { box-shadow: var(--t-focus); }
::selection { background: var(--t-accent); color: var(--t-on-accent); }
img { display: block; max-width: 100%; height: auto; }
.t-section { scroll-margin-block-start: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- skip link, page, layout ---------- */
.t-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 1100; padding: 10px 16px; background: var(--t-accent); color: var(--t-on-accent); border-radius: var(--t-radius-sm); text-decoration: none; font-weight: 600; }
.t-skip:focus { top: 16px; }
.t-page { min-height: 100vh; display: flex; flex-direction: column; }
.t-layout { width: min(100% - 2 * var(--t-gutter), var(--t-max)); margin-inline: auto; padding-block: clamp(24px, 4vw, 56px); flex: 1; }
.t-layout > .row { --bs-gutter-x: clamp(24px, 4vw, 48px); --bs-gutter-y: clamp(24px, 4vw, 48px); }
.t-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); min-width: 0; }
.t-rail { display: grid; gap: 20px; align-content: start; min-width: 0; }
/* grid children never widen the page: a long unbreakable line, a nowrap rule or a horizontal scroller stays inside its column (phone-width audit) */
.t-main > *, .t-rail > *, .t-hero__inner > * { min-width: 0; }
@media (min-width: 992px) { .t-rail { position: sticky; top: 24px; } }

/* ---------- typography ---------- */
.t-name { font-family: var(--t-font-display); font-size: var(--t-size-6); line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; margin: 0; }
.t-headline { font-size: var(--t-size-3); line-height: 1.35; margin: 10px 0 0; max-width: 32ch; }
.t-tagline { color: var(--t-muted); margin: 12px 0 0; max-width: 54ch; }
.t-eyebrow { font-size: var(--t-size-0); letter-spacing: .14em; text-transform: uppercase; color: var(--t-accent-text); font-weight: 600; margin: 0; }
.t-section__title { font-family: var(--t-font-display); font-size: var(--t-size-4); line-height: 1.2; font-weight: 500; margin: 0 0 18px; }
.t-item__title { font-size: var(--t-size-2); font-weight: 600; line-height: 1.3; margin: 0; }
.t-item__sub { color: var(--t-muted); margin: 2px 0 0; }
.t-item__text { margin: 8px 0 0; }
.t-prose > :last-child { margin-bottom: 0; }
.t-prose h3, .t-prose h4 { font-size: var(--t-size-2); margin: 1em 0 .4em; }
.t-summary { margin: 0; }

/* ---------- hero ---------- */
.t-hero { position: relative; }
/* width is explicit: with an auto width, CSS transfers max-height through the aspect-ratio into a max-width and the cover stops short of the right edge on wide screens */
.t-cover { width: 100%; aspect-ratio: 3 / 1; max-height: 360px; overflow: hidden; background: var(--t-surface2); position: relative; }
.t-cover img { width: 100%; height: 100%; object-fit: cover; }
.t-hero__inner { width: min(100% - 2 * var(--t-gutter), var(--t-max)); margin-inline: auto; display: grid; gap: 20px; padding-block: clamp(24px, 4vw, 48px); align-items: start; }
.t-photo { width: clamp(96px, 18vw, 160px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--t-surface2); box-shadow: 0 0 0 4px var(--t-bg); }
.t-photo--initials { display: grid; place-items: center; font-family: var(--t-font-display); font-size: clamp(2rem, 6vw, 3.5rem); color: var(--t-accent-text); background: var(--t-surface2); }
.t-hero--cover .t-hero__media { margin-block-start: clamp(-48px, -9vw, -80px); }
.t-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--t-muted); font-size: var(--t-size-1); }
.t-meta li { display: inline-flex; align-items: center; gap: 6px; }
.t-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 22px; }
.t-stats { display: flex; flex-wrap: wrap; gap: 24px 32px; margin: 22px 0 0; padding: 0; list-style: none; }
.t-stats li { display: grid; }
.t-stats strong { font-family: var(--t-font-display); font-size: var(--t-size-5); line-height: 1; font-weight: 500; }
.t-stats span { color: var(--t-muted); font-size: var(--t-size-0); margin-block-start: 4px; }
@media (min-width: 600px) { .t-hero__inner { grid-template-columns: auto minmax(0, 1fr); } .t-hero__inner > .t-stats { grid-column: 1 / -1; } }

/* ---------- Bootstrap components on the tokens ---------- */
.btn { --bs-btn-border-radius: var(--t-radius-pill); --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .625rem; --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; transition: transform .18s var(--t-ease), background-color .18s, border-color .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { --bs-btn-bg: var(--t-accent); --bs-btn-border-color: var(--t-accent); --bs-btn-color: var(--t-on-accent); --bs-btn-hover-bg: var(--t-accent); --bs-btn-hover-border-color: var(--t-accent); --bs-btn-hover-color: var(--t-on-accent); --bs-btn-active-bg: var(--t-accent); --bs-btn-active-border-color: var(--t-accent); --bs-btn-active-color: var(--t-on-accent); }
.btn-outline-primary { --bs-btn-color: var(--t-accent-text); --bs-btn-border-color: var(--t-accent); --bs-btn-hover-bg: var(--t-surface2); --bs-btn-hover-border-color: var(--t-accent); --bs-btn-hover-color: var(--t-accent-text); --bs-btn-active-bg: var(--t-surface2); --bs-btn-active-color: var(--t-accent-text); --bs-btn-active-border-color: var(--t-accent); }
.btn .t-icon { width: 18px; height: 18px; }
.t-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card { --bs-card-bg: var(--t-surface); --bs-card-border-color: var(--t-line); --bs-card-border-radius: var(--t-radius); --bs-card-inner-border-radius: calc(var(--t-radius) - 1px); --bs-card-cap-bg: var(--t-surface2); --bs-card-color: var(--t-text); box-shadow: var(--t-shadow); }
.badge { --bs-badge-font-weight: 500; }
.form-control { --bs-border-color: var(--t-line); background: var(--t-surface); color: var(--t-text); min-height: 44px; border-width: 1.5px; }
.form-control:focus { background: var(--t-surface); color: var(--t-text); border-color: var(--t-accent); }
.form-label { font-weight: 500; }

/* ---------- chips, links ---------- */
.t-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.t-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--t-radius-pill); background: var(--t-surface2); border: 1px solid var(--t-line); font-size: var(--t-size-0); font-weight: 500; color: var(--t-text); }
.t-chip[data-level]::after { content: ""; width: 34px; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--t-accent) var(--level, 0%), var(--t-line) var(--level, 0%)); }
.t-chip[data-level="1"] { --level: 20%; } .t-chip[data-level="2"] { --level: 40%; } .t-chip[data-level="3"] { --level: 60%; } .t-chip[data-level="4"] { --level: 80%; } .t-chip[data-level="5"] { --level: 100%; }
.t-skillgroup + .t-skillgroup { margin-block-start: 16px; }
.t-skillgroup h3 { font-size: var(--t-size-0); text-transform: uppercase; letter-spacing: .1em; color: var(--t-muted); margin: 0 0 8px; font-weight: 600; }
.t-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.t-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: var(--t-radius-pill); border: 1px solid var(--t-line); background: var(--t-surface); color: var(--t-text); text-decoration: none; font-weight: 500; transition: border-color .18s, transform .18s var(--t-ease); }
.t-link:hover { border-color: var(--t-accent); color: var(--t-text); transform: translateY(-1px); }
.t-link__handle { color: var(--t-muted); font-size: var(--t-size-0); }
.t-links--hero { margin-block-start: 18px; }

/* ---------- cards, timeline, gallery, quotes, lists ---------- */
.t-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; list-style: none; }
.t-card { overflow: hidden; }
.t-card__media { aspect-ratio: 4 / 3; background: var(--t-surface2); }
.t-card__media img { width: 100%; height: 100%; object-fit: cover; }
.t-card .card-body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; }
.t-card__sub { color: var(--t-muted); font-size: var(--t-size-0); margin: 0; }
.t-card__price { font-weight: 600; color: var(--t-accent-text); margin: 0; }
.t-card p { margin: 0; }
.t-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.t-tags .badge { background: var(--t-surface2); color: var(--t-muted); font-weight: 500; }
.t-card__link { margin-block-start: 4px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.t-timeline { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.t-timeline__item { display: grid; gap: 4px 20px; position: relative; }
.t-timeline__when { color: var(--t-muted); font-size: var(--t-size-0); font-variant-numeric: tabular-nums; }
.t-item__highlights { margin: 8px 0 0; padding-inline-start: 1.1em; }
.t-item__highlights li + li { margin-block-start: 4px; }
@media (min-width: 600px) { .t-timeline__item { grid-template-columns: 140px minmax(0, 1fr); } .t-timeline__when { padding-block-start: 3px; } }
.t-gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
.t-gallery__item figure { position: relative; border-radius: var(--t-radius-sm); overflow: hidden; background: var(--t-surface2); margin: 0; }
.t-gallery__item img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform .4s var(--t-ease); }
.t-gallery__item a { text-decoration: none; color: inherit; }
.t-gallery__item a:hover img { transform: scale(1.03); }
.t-gallery figcaption { padding: 8px 2px 0; font-size: var(--t-size-0); color: var(--t-muted); }
.t-gallery figcaption strong { color: var(--t-text); font-weight: 600; display: block; }
.t-quotes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
.t-quote { padding: 20px 22px; border-radius: var(--t-radius); background: var(--t-surface); border: 1px solid var(--t-line); display: grid; gap: 12px; }
.t-quote blockquote { font-family: var(--t-font-display); font-size: var(--t-size-3); line-height: 1.35; margin: 0; }
.t-quote__mark { color: var(--t-accent-text); }
.t-quote__by { color: var(--t-muted); font-size: var(--t-size-0); margin: 0; }
.t-quote__by strong { color: var(--t-text); font-weight: 600; }
.t-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.t-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding-block-end: 10px; border-block-end: 1px solid var(--t-line); }
.t-list li:last-child { border: 0; padding-block-end: 0; }
.t-list strong { font-weight: 600; }
.t-list span { color: var(--t-muted); font-size: var(--t-size-0); }
.t-list .t-item__text { flex-basis: 100%; }
.t-list--plain li { display: block; }
.t-facts { padding: 18px 20px; border-radius: var(--t-radius); background: var(--t-surface); border: 1px solid var(--t-line); display: grid; gap: 12px; }
.t-facts h2 { font-size: var(--t-size-0); text-transform: uppercase; letter-spacing: .12em; color: var(--t-muted); font-weight: 600; margin: 0; }
.t-facts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.t-facts li { display: flex; gap: 10px; align-items: flex-start; }
.t-facts .t-icon { color: var(--t-accent-text); margin-block-start: 2px; }
.t-rail .t-links { flex-direction: column; }
.t-rail .t-link { justify-content: flex-start; }

/* ---------- bars, menu, numbered (industry templates) ---------- */
.t-bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.t-bars__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.t-bars__label { font-weight: 500; }
.t-bars__track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--t-surface2); overflow: hidden; display: block; }
.t-bars__fill { display: block; height: 100%; width: var(--level, 0%); background: var(--t-accent); border-radius: 4px; }
.t-bars__item[data-level="1"] { --level: 20%; } .t-bars__item[data-level="2"] { --level: 40%; } .t-bars__item[data-level="3"] { --level: 60%; } .t-bars__item[data-level="4"] { --level: 80%; } .t-bars__item[data-level="5"] { --level: 100%; }
@media (min-width: 600px) { .t-bars { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.t-menu { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.t-menu__row { display: flex; align-items: baseline; gap: 10px; }
.t-menu__leader { flex: 1; border-block-end: 2px dotted var(--t-line); transform: translateY(-4px); min-width: 24px; }
.t-menu__price { font-weight: 600; color: var(--t-accent-text); white-space: nowrap; }
.t-menu__desc { color: var(--t-muted); margin: 4px 0 0; max-width: 60ch; }
.t-numbered { counter-reset: item; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.t-numbered__item { counter-increment: item; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.t-numbered__item::before { content: counter(item, decimal-leading-zero); grid-row: 1 / span 3; font-family: var(--t-font-display); font-size: var(--t-size-4); color: var(--t-accent-text); line-height: 1.2; }

/* ---------- contact ---------- */
.t-contact { font-style: normal; margin: 0 0 18px; }
.t-contact ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.t-contact li { display: flex; gap: 10px; align-items: center; }
.t-form { display: grid; gap: 14px; max-width: 560px; }
.t-form textarea.form-control { min-height: 140px; resize: vertical; }
.t-form__hp { position: absolute; inset-inline-start: -9999px; }
.t-form__note { color: var(--t-muted); font-size: var(--t-size-0); margin: 0; }

/* ---------- footer ---------- */
.t-footer { width: min(100% - 2 * var(--t-gutter), var(--t-max)); margin-inline: auto; padding-block: 24px 32px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; color: var(--t-muted); font-size: var(--t-size-0); border-block-start: 1px solid var(--t-line); }
.t-footer a { color: inherit; }
.t-badge { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; }
.t-badge__mark { width: 18px; height: 18px; }

/* ---------- design-phase preview control (not part of the product) ---------- */
.t-preview { position: fixed; inset-inline-end: 16px; inset-block-end: 16px; z-index: 1050; font-family: "Inter", system-ui, sans-serif; font-size: 13px; color: #232826; }
.t-preview summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: #232826; color: #F6F1E5; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); font-weight: 600; }
.t-preview summary::-webkit-details-marker { display: none; }
.t-preview__panel { position: absolute; inset-inline-end: 0; inset-block-end: 52px; width: min(92vw, 340px); background: #FFFDF6; color: #232826; border: 1px solid #E2D9C3; border-radius: 16px; padding: 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.4); display: grid; gap: 12px; }
.t-preview h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #55605B; margin: 0; font-family: inherit; }
.t-preview__row { display: flex; flex-wrap: wrap; gap: 6px; }
.t-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #E2D9C3; cursor: pointer; background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); padding: 0; }
.t-swatch[aria-pressed="true"] { border-color: #232826; box-shadow: 0 0 0 2px #FFFDF6, 0 0 0 4px #232826; }
.t-preview__btn { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid #C9BFA6; background: #FFF; color: #232826; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.t-preview__btn[aria-pressed="true"] { background: #232826; color: #F6F1E5; border-color: #232826; }
.t-preview a { color: #0F3D3A; }
.t-preview__links { display: flex; flex-wrap: wrap; gap: 6px 12px; }

/* ---------- print ---------- */
@media print {
  .t-preview, .t-skip, .t-cover, .t-form, .t-badge { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .t-layout { width: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .card, .t-quote, .t-facts { box-shadow: none; border-color: #bbb; break-inside: avoid; }
}