/* ==================================================================
   ZAYTOOLIT — page-specific layout
   Look and feel comes from ui.css components; colours, type and spacing
   from theme.css tokens. Nothing here uses a raw colour, so both modes
   work. Load order: theme.css → ui.css → site.css.
   ================================================================== */

/* ------------------------------------------------------------------
   HEADER EXTRAS: burger, theme toggle, mobile menu
   ------------------------------------------------------------------ */
.site-head .ztl-nav { margin-inline-start: auto; }
.site-head .ztl-nav a { white-space: nowrap; }    /* 4 items still fit one line at 600px */

.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
.theme-toggle[data-mode="dark"] .icon-sun { display: inline-flex; }    /* shows where a click goes */
.theme-toggle[data-mode="light"] .icon-moon { display: inline-flex; }
.theme-toggle svg { width: 17px; height: 17px; }

.nav__links { display: none; }

.burger { display: none; }
.burger__lines, .burger__lines::before, .burger__lines::after {
  display: block; width: 16px; height: 2px; margin-inline: auto;
  background: currentColor; border-radius: 1px;
  transition: transform var(--ztl-dur-normal), background-color var(--ztl-dur-normal);
}
.burger__lines { position: relative; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; }
.burger__lines::before { top: -5px; }
.burger__lines::after { top: 5px; }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 599px) {
  .site-head .ztl-header__bar { gap: var(--ztl-space-3); }
  .site-head .ztl-header__actions { margin-inline-start: auto; }
  .burger { display: inline-flex; }
  .links-btn { display: none; }
  .nav__links { display: block; }
  .nav__links-btn {
    display: block; width: 100%; padding: 14px 2px; border: 0; background: none; cursor: pointer;
    text-align: left; font-size: 17px; font-weight: 500; color: var(--ztl-text-2);
  }
  .nav__links-btn:hover { color: var(--ztl-text); }
  .site-head .ztl-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: var(--ztl-space-2) var(--ztl-gutter) var(--ztl-space-4);
    background: var(--ztl-bg); border-bottom: 1px solid var(--ztl-border);
    visibility: hidden; opacity: 0;
    transition: opacity var(--ztl-dur-normal), visibility 0s linear var(--ztl-dur-normal);
  }
  .site-head .ztl-nav.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
  .site-head .ztl-nav ul { flex-direction: column; gap: 0; }
  .site-head .ztl-nav li + li { border-top: 1px solid var(--ztl-border); }
  .site-head .ztl-nav a { padding: 14px 2px; font-size: 17px; }
  .site-head .ztl-nav a[aria-current="page"] { text-underline-offset: 6px; }
}

/* ------------------------------------------------------------------
   LINKS DRAWER ROWS
   ------------------------------------------------------------------ */
.link-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px;
  padding-inline: var(--ztl-space-5);
  color: var(--ztl-text-2); font-size: 15px; font-weight: 500;
}
.link-row:focus-visible { outline-offset: -2px; border-radius: 0; }
.link-row__icon { display: inline-flex; width: 20px; height: 20px; }
.link-row__icon svg { width: 20px; height: 20px; }
.link-row:visited { color: var(--ztl-text-2); }
.link-row:hover .link-row__icon { color: var(--ztl-text); }
.link-row__label { color: var(--ztl-text); }
.link-row__arrow { font-size: 13px; }
/* every row's arrow uses the same token (the mailto row once rendered in the link accent) */
.link-row .link-row__arrow, .link-row:visited .link-row__arrow { color: var(--ztl-text-3); }
.link-row:hover .link-row__arrow, .link-row:focus-visible .link-row__arrow { color: var(--ztl-text); }
.theme-choice { display: flex; align-items: center; justify-content: space-between; gap: var(--ztl-space-3); width: 100%; }

/* ------------------------------------------------------------------
   PAGE STRUCTURE
   ------------------------------------------------------------------ */
.section { padding-block: var(--ztl-space-8) 0; }
.page-head { margin-bottom: var(--ztl-space-6); }
/* Page heading with a single action beside it (freebounce.html) */
.page-head--action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ztl-space-3) var(--ztl-space-4); }
@media (max-width: 559px) { .page-head--action .ztl-btn { width: 100%; justify-content: center; } }
.page-title { font-size: var(--ztl-fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.sec-title { font-size: var(--ztl-fs-lg); font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 720px) {
  .section { padding-block: var(--ztl-space-12) 0; }
  .page-title { font-size: var(--ztl-fs-3xl); }
  .sec-title { font-size: var(--ztl-fs-xl); }
}

/* ------------------------------------------------------------------
   MUSIC (index.html) — a calm gallery; every play goes to the global player
   ------------------------------------------------------------------ */
.gallery { position: relative; display: grid; gap: var(--ztl-space-6); }
.gallery__lead { display: grid; gap: var(--ztl-space-4); }
.gallery__lead:empty { display: none; }
@media (min-width: 1000px) { .gallery__lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.catalog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ztl-space-2) var(--ztl-space-4); margin-top: var(--ztl-space-4); }

/* lead cards: pinned release + the playlist tile */
.feature { display: grid; grid-template-columns: 1fr; }
.feature__art { position: relative; aspect-ratio: 1; background: var(--ztl-surface-2); overflow: hidden; }
.feature__img { width: 100%; height: 100%; object-fit: cover; }
.feature__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.feature__collage img { width: 100%; height: 100%; object-fit: cover; }
.feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--ztl-space-4); min-width: 0; }
.feature__meta { display: flex; align-items: center; gap: var(--ztl-space-2); font-size: var(--ztl-fs-xs); color: var(--ztl-text-2); }
.feature__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.feature__credit {
  font-size: var(--ztl-fs-sm); color: var(--ztl-text-2); line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ztl-space-2); margin-top: auto; padding-top: var(--ztl-space-2); }
@media (min-width: 560px) {
  .feature { grid-template-columns: 180px minmax(0, 1fr); }
  .feature__art { width: 180px; height: 180px; aspect-ratio: auto; }
  .feature__body { padding: var(--ztl-space-5); justify-content: center; }
}
@media (min-width: 720px) {
  .feature { grid-template-columns: 200px minmax(0, 1fr); }
  .feature__art { width: 200px; height: 200px; }
}

/* uniform grid: every card identical, rows never stretch */
.rack { --cols: 2; gap: var(--ztl-space-4); }
.rack:empty { display: none; }
@media (min-width: 800px) { .rack { --cols: 3; } }
@media (min-width: 1100px) { .rack { --cols: 4; } }

.rel { display: flex; flex-direction: column; overflow: hidden; }
.rel__media { position: relative; aspect-ratio: 1; background: var(--ztl-surface-2); }
.rel__art { width: 100%; height: 100%; object-fit: cover; }
.rel__play { position: absolute; right: 10px; bottom: 10px; }
.rel .card-more { position: absolute; top: 8px; right: 8px; }

/* fixed-height body: 1-line title + one line that shows type · year, or the credit on hover/focus */
.rel__body { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.rel__title { font-size: 15px; font-weight: 600; line-height: 21px; height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel__sub { display: grid; height: 20px; min-width: 0; }
.rel__sub > * { grid-area: 1 / 1; min-width: 0; font-size: 12px; line-height: 20px; color: var(--ztl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel__meta { display: flex; gap: 6px; }
.rel__meta span + span::before { content: "· "; }
.rel__meta .ztl-mono { font-size: 12px; }
.rel__credit { visibility: hidden; }
.rel:hover .rel__meta, .rel:focus-within .rel__meta { visibility: hidden; }
.rel:hover .rel__credit, .rel:focus-within .rel__credit { visibility: visible; }

/* the card whose source is playing: an accent border, no glow */
.rel.is-current, .feature.is-current { border-color: var(--ztl-accent); }

.catalog-fallback { display: grid; }
.catalog-fallback li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ztl-border); }
.catalog-fallback .ztl-mono, .catalog-fallback .mono { color: var(--ztl-text-2); font-size: var(--ztl-fs-xs); }

/* ------------------------------------------------------------------
   BEATS PAGE
   ------------------------------------------------------------------ */
.deck__in { display: flex; flex-direction: column; gap: var(--ztl-space-3); padding: var(--ztl-space-4); }
@media (max-width: 559px) { .deck__in { padding: var(--ztl-space-3); } }
/* Loading state (JS only): hide the no-JS cue list and show a placeholder
   until beat-player.js marks the deck is-ready (or is-failed, which brings
   the static list back). Without JS the placeholder never shows. */
.bp-sk { display: none; }
.js .deck:not(.is-ready):not(.is-failed) [data-bp-fallback] { display: none; }
.js .deck:not(.is-ready):not(.is-failed) .bp-sk { display: flex; flex-direction: column; gap: var(--ztl-space-3); }
.bp-sk span { display: block; background: var(--ztl-surface-2); border-radius: var(--ztl-radius-sm); }
.bp-sk__transport { display: flex; align-items: center; gap: var(--ztl-space-3); height: 64px; padding: 0 var(--ztl-space-3); border: 1px solid var(--ztl-border); border-radius: var(--ztl-radius-md); }
.bp-sk__art { flex: none; width: 36px; height: 36px; }
.bp-sk__art--lg { width: 40px; height: 40px; }
.bp-sk__lines { flex: 1; display: flex !important; flex-direction: column; gap: 6px; background: none !important; }
.bp-sk__lines span { height: 10px; width: 45%; }
.bp-sk__lines span + span { width: 28%; height: 8px; }
.bp-sk__keys { flex: none; width: 112px; height: 36px; }
.bp-sk__controls { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--ztl-space-2); }
.bp-sk__controls span { height: 36px; }
.bp-sk__row { display: flex; align-items: center; gap: var(--ztl-space-3); height: 49px; padding: 0 var(--ztl-space-2); border-bottom: 1px solid var(--ztl-border); }
.bp-sk__n { flex: none; width: 18px; height: 10px; }
.bp-sk__buy { flex: none; width: 32px; height: 32px; }
@media (max-width: 559px) {
  .bp-sk__transport { height: 120px; flex-wrap: wrap; align-content: center; }
  .bp-sk__controls { grid-template-columns: 1fr; }
  .bp-sk__row { height: 60px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bp-sk span:not(.bp-sk__lines) { animation: bp-sk-pulse 1.2s ease-in-out infinite; }
}
@keyframes bp-sk-pulse { 50% { opacity: .55; } }
.deck__note { font-size: 12px; color: var(--ztl-text-3); }

/* static cue list: the no-JS fallback */
.cue li + li { border-top: 1px solid var(--ztl-border); }
.cue a {
  display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 4px; color: var(--ztl-text); font-size: 15px;
}
.cue a:hover { background: var(--ztl-tint); text-decoration: none; }
.cue__n { font-family: var(--ztl-font-mono); font-size: var(--ztl-fs-xs); color: var(--ztl-text-3); }
.cue__t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cue__g { font-size: var(--ztl-fs-xs); color: var(--ztl-text-2); text-align: right; }

.store__fallback {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding-top: var(--ztl-space-3); border-top: 1px solid var(--ztl-border);
  color: var(--ztl-text-2); font-size: var(--ztl-fs-sm);
}

/* ==================================================================
   BEAT PLAYER (assets/js/beat-player.js) — layout only
   ================================================================== */
.bp { display: flex; flex-direction: column; gap: var(--ztl-space-3); min-width: 0; }

/* transport: one slim bar */
.bp-transport {
  display: grid; align-items: center; gap: 10px var(--ztl-space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "now keys" "scrub scrub" "vol buy";
  padding: 10px var(--ztl-space-3);
  background: var(--ztl-surface-2); border: 1px solid var(--ztl-border); border-radius: var(--ztl-radius-md);
}
@media (min-width: 860px) {
  .bp-transport {
    min-height: 64px; padding: var(--ztl-space-2) var(--ztl-space-3);
    grid-template-columns: minmax(180px, 260px) auto minmax(0, 1fr) auto auto;
    grid-template-areas: "now keys scrub vol buy";
  }
}
.bp-now { grid-area: now; display: flex; align-items: center; gap: var(--ztl-space-3); min-width: 0; }
.bp-now__art { flex: none; width: 40px; height: 40px; border-radius: 4px; overflow: hidden; background: var(--ztl-surface-hover); }
.bp-now__art img { width: 100%; height: 100%; object-fit: cover; }
.bp-now__meta { min-width: 0; }
.bp-now__title { font-family: var(--ztl-font-body); font-size: var(--ztl-fs-sm); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-now__title em { font-weight: 400; }
.bp-now__sub { font-size: 12px; line-height: 1.3; color: var(--ztl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-now__bpm { font-family: var(--ztl-font-mono); font-variant-numeric: tabular-nums; }
.bp-now__bpm:not(:empty) + .bp-now__genre::before { content: " · "; }
.bp-now__buy { grid-area: buy; justify-self: end; }

.bp-keys { grid-area: keys; display: flex; align-items: center; gap: 2px; }
.bp-key svg { width: 14px; height: 14px; fill: currentColor; }
.bp-key .ico-pause { display: none; }
.bp.is-playing .bp-key--play .ico-play { display: none; }
.bp.is-playing .bp-key--play .ico-pause { display: block; }

.bp-scrub { grid-area: scrub; display: flex; align-items: center; gap: var(--ztl-space-3); min-width: 0; }
.bp-wave { position: relative; flex: 1; height: 28px; min-width: 0; border-radius: 4px; cursor: pointer; touch-action: none; }
.bp-wave canvas { display: block; width: 100%; height: 100%; }
.bp-time { flex: none; font-family: var(--ztl-font-mono); font-size: 12px; color: var(--ztl-text-2); font-variant-numeric: tabular-nums; }

.bp-vol { grid-area: vol; display: flex; align-items: center; gap: var(--ztl-space-2); color: var(--ztl-text-3); }
.bp-vol svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.bp-vol .ztl-range { width: 88px; }

/* controls: one line */
.bp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ztl-space-2); }
.bp-filters .ztl-input { flex: 1 1 200px; min-width: 0; }
.bp-genre-select { flex: 0 1 auto; }
.bp-sort { flex: 0 0 auto; }
@media (max-width: 559px) {
  .bp-genre-select, .bp-sort { flex: 1 1 calc(50% - 4px); }
  .bp-filters .ztl-input { flex-basis: 100%; order: -1; }
}

/* list: ~48px rows */
.bp-head, .bp-row { display: grid; align-items: center; gap: var(--ztl-space-3); grid-template-columns: 32px minmax(0, 1fr) 32px; }
@media (min-width: 720px) {
  .bp-head, .bp-row { grid-template-columns: 32px 36px minmax(0, 1fr) minmax(90px, 180px) 44px 48px 64px 32px; gap: 14px; }
}
.bp-head { display: none; padding: 0 var(--ztl-space-2) 6px; font-size: 12px; font-weight: 500; color: var(--ztl-text-3); border-bottom: 1px solid var(--ztl-border); }
@media (min-width: 720px) { .bp-head { display: grid; } }
.bp-head span:nth-child(n+5) { text-align: right; }

.bp-row { position: relative; padding: 6px var(--ztl-space-2); cursor: pointer; }
[data-bp-root]:not(.is-expanded) .bp-row.is-extra { display: none; }

.bp-play {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--ztl-text-3);
  font-family: var(--ztl-font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.bp-glyph { display: none; width: 13px; height: 13px; }
.bp-glyph svg { width: 13px; height: 13px; fill: currentColor; }
.bp-row:hover .bp-idx, .bp-row.is-active .bp-idx, .bp-play:focus-visible .bp-idx { display: none; }
.bp-row:hover .bp-glyph, .bp-row.is-active .bp-glyph, .bp-play:focus-visible .bp-glyph { display: block; }
.bp-row:hover .bp-play { color: var(--ztl-text); }
.bp-row.is-active .bp-play { color: var(--ztl-accent); }
.bp-glyph .ico-pause { display: none; }
.bp.is-playing .bp-row.is-active .bp-glyph .ico-play { display: none; }
.bp.is-playing .bp-row.is-active .bp-glyph .ico-pause { display: block; }

.bp-art { display: none; width: 36px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--ztl-surface-2); }
@media (min-width: 720px) { .bp-art { display: block; } }
.bp-t { display: flex; flex-direction: column; min-width: 0; }
.bp-name { font-size: var(--ztl-fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-name em { font-weight: 400; }
.bp-sub { font-size: 12px; color: var(--ztl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bp-genre, .bp-num, .bp-price { display: none; }
@media (min-width: 720px) {
  .bp-sub { display: none; }
  .bp-genre, .bp-num, .bp-price { display: block; }
  .bp-genre { font-size: var(--ztl-fs-xs); color: var(--ztl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bp-num, .bp-price { font-family: var(--ztl-font-mono); font-size: var(--ztl-fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
  .bp-num { color: var(--ztl-text-2); }
  .bp-price { color: var(--ztl-text); }
}
.bp-buy { justify-self: end; }
.bp-buy svg { width: 14px; height: 14px; fill: currentColor; }
.bp-err { grid-column: 2 / -1; font-size: var(--ztl-fs-xs); color: var(--ztl-danger); }

.bp-empty { padding: var(--ztl-space-6) var(--ztl-space-3); text-align: center; color: var(--ztl-text-2); }
.bp-more { align-self: center; }
.bp-status { padding: var(--ztl-space-4) 4px; font-size: 15px; color: var(--ztl-text-2); }

/* licence modal content */
.bp-dialog__head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--ztl-space-4); align-items: center; }
.bp-dialog__head img { width: 56px; height: 56px; border-radius: var(--ztl-radius-sm); object-fit: cover; background: var(--ztl-surface-2); }
.bp-dialog__head h3 { font-size: var(--ztl-fs-lg); overflow-wrap: anywhere; }
.bp-dialog__head p { font-size: var(--ztl-fs-xs); color: var(--ztl-text-2); }
.bp-dialog__x { align-self: start; font-size: 20px; }
.bp-dialog__body { display: grid; gap: var(--ztl-space-3); }
.lic { display: grid; gap: var(--ztl-space-3); padding: var(--ztl-space-4); background: var(--ztl-surface-2); }
.lic__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ztl-space-3); }
.lic__title { font-size: 17px; font-weight: 600; }
.lic__price { font-family: var(--ztl-font-mono); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lic__files { display: flex; flex-wrap: wrap; gap: 6px; }
.lic__feats { display: grid; gap: 4px; font-size: var(--ztl-fs-sm); color: var(--ztl-text-2); }
.lic__feats li { display: flex; gap: var(--ztl-space-2); }
.lic__feats li::before { content: "·"; color: var(--ztl-text-3); }
.lic__feats strong { color: var(--ztl-text); font-weight: 500; }
.lic .ztl-btn { justify-self: start; }
.bp-dialog__foot { font-size: var(--ztl-fs-xs); color: var(--ztl-text-3); }

/* ------------------------------------------------------------------
   FREE BOUNCE PAGE
   ------------------------------------------------------------------ */
.fb-tour__in { display: flex; flex-direction: column; gap: var(--ztl-space-3); padding: var(--ztl-space-4); }
.fb-tour__hint { font-size: var(--ztl-fs-xs); color: var(--ztl-text-3); }
/* the tour keeps its own dark look; framed so it sits cleanly in either mode */
.fb-tour__frame {
  display: block; width: 100%; height: 640px; max-height: 76vh;
  border: 1px solid var(--ztl-border); border-radius: var(--ztl-radius-md);
  background: var(--ztl-black-0); color-scheme: dark;
}

/* ------------------------------------------------------------------
   FOOTER — one quiet row
   ------------------------------------------------------------------ */
.site-foot { margin-top: var(--ztl-space-16); border-top: 1px solid var(--ztl-border); }
.site-foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ztl-space-2) var(--ztl-space-6); padding-block: var(--ztl-space-5); }
.site-foot__legal, .site-foot__top { font-size: var(--ztl-fs-xs); color: var(--ztl-text-2); }
.site-foot__top:hover { color: var(--ztl-text); }

/* ------------------------------------------------------------------
   ABOUT + CONTACT (about.html)
   ------------------------------------------------------------------ */
.about { display: grid; gap: var(--ztl-space-10); align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ztl-space-12); } }
.about__intro { display: grid; gap: var(--ztl-space-5); min-width: 0; }
.about__lead {
  font-family: var(--ztl-font-display); font-size: var(--ztl-fs-lg); font-weight: 500;
  line-height: 1.35; letter-spacing: -.01em; color: var(--ztl-text);
}
@media (min-width: 720px) { .about__lead { font-size: 22px; } }
.about__text { max-width: 62ch; color: var(--ztl-text-2); }
.about__block { display: grid; gap: var(--ztl-space-3); margin-top: var(--ztl-space-3); }

.services { overflow: hidden; }
.service-row { gap: 14px; padding: var(--ztl-space-3) var(--ztl-space-4); }
div.service-row:hover { background: transparent; }            /* only the Beats row is a link */
.service-row:focus-visible { outline-offset: -2px; }
.service-row__icon { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--ztl-accent); }
.service-row__icon svg { width: 20px; height: 20px; }
.service-row__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.service-row__title { font-weight: 500; color: var(--ztl-text); }
.service-row__desc { font-size: var(--ztl-fs-sm); color: var(--ztl-text-2); }
.service-row__arrow { color: var(--ztl-text-3); }
a.service-row:hover .service-row__arrow { color: var(--ztl-text); }
.about__credits { font-weight: 500; }

.contact {
  display: grid; gap: var(--ztl-space-6); padding: var(--ztl-space-5);
}   /* about.html#contact clears the sticky header via html { scroll-padding-top } in ui.css */
@media (min-width: 720px) { .contact { padding: var(--ztl-space-6); } }
.contact__subtitle { margin-bottom: var(--ztl-space-3); font-size: var(--ztl-fs-md); font-weight: 600; }
.contact__email-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ztl-space-2) var(--ztl-space-3); margin-top: calc(-1 * var(--ztl-space-2)); }
.contact__email {
  min-width: 0; overflow-wrap: anywhere;
  font-family: var(--ztl-font-display); font-size: clamp(20px, 5.6vw, 26px); font-weight: 500; letter-spacing: -.01em;
  color: var(--ztl-text);
}
.contact__email:hover { color: var(--ztl-accent); }
.copy-btn .copy-btn__done { display: none; }
.copy-btn[data-state="copied"] .copy-btn__copy { display: none; }
.copy-btn[data-state="copied"] .copy-btn__done { display: inline-flex; color: var(--ztl-accent); }
.copy-btn svg { width: 17px; height: 17px; }
.contact__status { font-size: var(--ztl-fs-xs); color: var(--ztl-text-2); }

.contact-form { display: grid; gap: var(--ztl-space-4); }
.contact-form .ztl-input, .contact-form .ztl-select { width: 100%; }
.contact-form .ztl-select, .contact-form .ztl-input:not(textarea) { min-height: 40px; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ztl-space-2) var(--ztl-space-4); }
.contact-form__note { font-size: var(--ztl-fs-xs); color: var(--ztl-text-3); }
@media (max-width: 559px) { .contact-form__actions .ztl-btn { width: 100%; } }

.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ztl-space-2); }
@media (min-width: 480px) and (max-width: 899px), (min-width: 1100px) { .profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profile-link { justify-content: flex-start; width: 100%; min-width: 0; padding-inline: var(--ztl-space-3); }
.profile-link__icon { display: inline-flex; flex: none; color: var(--ztl-text-2); }
.profile-link__icon svg { width: 18px; height: 18px; }
.profile-link:hover .profile-link__icon { color: var(--ztl-text); }
.profile-link__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }