/* Site CSS outside the theme. Linked before the theme CSS so equal-specificity theme rules win. */

/* Form honeypot */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Header logo: the inline logo is wide, so it is sized by height and keeps its aspect ratio. */

#tt-header .tt-logo img {
  width: auto;
  height: 52px;
  max-height: none;
}

@media (max-width: 1024px) {
  #tt-header .tt-logo img {
    height: 36px;
  }
}

/* Page transition: the preloader logo carries the theme's .tt-logo-dark class, which theme.css hides everywhere
   (light-style.css only shows it again inside the header), so the loading screen showed an empty overlay. */

#page-transition .ptr-prel-image {
  display: inline-block;
}

/* Fixed header: transparent over the page header, then a light bar once the page header has scrolled away, so the
   logo and menu never sit on top of photos and text. The bar is compact, with a shorter logo on desktop, and is
   separated from the page by a hairline rule rather than a shadow. Over the dark "next" section the theme switches to
   the light logo, so the bar stays off there. */

#tt-header {
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

#tt-header .tt-header-inner {
  padding-bottom: 20px;
  transition: padding 0.3s;
}

body:not(.tt-ph-visible):not(.tt-next-project-top):not(.tt-m-menu-active) #tt-header {
  background-color: rgb(from var(--tt-main-bg-color) r g b / 92%);
  box-shadow: 0 1px 0 var(--tt-border-color);
  backdrop-filter: blur(12px);
}

body:not(.tt-ph-visible):not(.tt-next-project-top):not(.tt-m-menu-active) #tt-header .tt-header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* The split homepage hero has no photo behind the header, so the header carries the page background from the start
   and the hero's text never scrolls under the logo and menu. */
body:has(#page-header.site-hero-split):not(.tt-m-menu-active) #tt-header {
  background-color: rgb(from var(--tt-main-bg-color) r g b / 92%);
  backdrop-filter: blur(12px);
}

@media (min-width: 1025px) {
  #tt-header .tt-logo img {
    transition: height 0.3s;
  }

  body:not(.tt-ph-visible):not(.tt-next-project-top):not(.tt-m-menu-active) #tt-header .tt-logo img {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tt-header,
  #tt-header .tt-header-inner,
  #tt-header .tt-logo img {
    transition: none;
  }
}

/* Section rhythm: every content section gets the same vertical space, and two adjacent sections on the same
   background share one gap instead of stacking both paddings. Sections that need a different edge use the theme's
   no-padding class. */

:root {
  --site-section-space: clamp(64px, 8vw, 120px);
}

#page-content > .tt-section,
#scroll-container > .tt-section {
  padding-top: var(--site-section-space);
  padding-bottom: var(--site-section-space);
}

#page-content > .tt-section:not(.no-padding, [class*='bg-']) + .tt-section:not(.no-padding, [class*='bg-']) {
  padding-top: 0;
}

/* Parallax images are inline by default, so the line box left a baseline gap under them that showed the dark cover
   overlay as a grey strip. */

.anim-image-parallax {
  display: block;
}

/* One horizontal gutter. The header and footer bars use the theme's boxed tt-wrap (see Header.astro and Footer.astro),
   so logo, page titles, content and footer share one left edge. The theme's 8%/5% page header padding between 1025px
   and 1400px pushed titles off that edge. The gutter keeps that edge at least 3.5vw (the theme's unboxed header
   padding) from the window, and 20px on phones; above the 1282px wrap the centered margin already provides it. */

:root {
  --site-gutter: max(20px, calc(3.5vw - max(0px, (100vw - 1282px) / 2)));
}

#body.tt-boxed .tt-wrap,
#body.tt-boxed .page-header-inner.tt-wrap {
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

#body.tt-boxed .tt-wrap .tt-wrap {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1024px) {
  #tt-header .tt-main-menu-inner {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
}

/* Touch devices: a backdrop blur on the fixed header is repainted on every scroll frame, so the bar is opaque instead. */

body.is-mobile:not(.tt-ph-visible):not(.tt-next-project-top):not(.tt-m-menu-active) #tt-header {
  background-color: var(--tt-main-bg-color);
  backdrop-filter: none;
}

/* Type-only header (site-hero-type: /politika-zasebnosti and /kontakt), like the homepage hero: ruled kicker, display
   title with a red full stop, the intro as the lead, and a ruled strip of key facts (site-hero-facts).

   Privacy policy (politika-zasebnosti): after that header, the sections as a numbered, ruled index
   beside a sticky contents list. Each section's purpose, legal basis and retention (and the processors, the authority's
   contact) are a definition list with small-caps labels, so they can be compared across sections. One column below
   1025px, with the contents list above the text. */

#page-header.site-hero-type {
  max-width: 1282px;
  margin: 0 auto;
  padding: clamp(136px, 20svh, 200px) var(--site-gutter) 0;
  color: var(--tt-text-color);
}

.site-hero-type .site-hero-kicker {
  margin: 0;
  color: var(--tt-muted-color);
}

.site-hero-type .site-hero-title {
  max-width: 14ch;
  padding-top: clamp(20px, 3vw, 36px);
  font-size: clamp(48px, 7.4vw, 120px);
  color: var(--tt-ink-color);
}

#page-header.site-hero-type .site-hero-lead {
  max-width: 62ch;
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--tt-text-color);
}

.site-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px clamp(24px, 4vw, 64px);
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--tt-ink-color);
  border-bottom: 1px solid var(--tt-border-color);
}

.site-hero-facts dt {
  margin-bottom: 4px;
  color: var(--tt-muted-color);
}

.site-hero-facts dd {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--tt-ink-color);
  overflow-wrap: anywhere;
}

.site-hero-facts a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tt-border-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.3s;
}

.site-hero-facts a:hover {
  text-decoration-color: var(--tt-main-color);
}

.site-legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: start;
  counter-reset: site-legal;
}

/* The theme's overflow: hidden on these wrappers makes them scroll containers, which pins a sticky element to them
   instead of the window; clip cuts off overflow the same way without that. */
#body-inner:has(.site-legal-toc, .site-about-story, .site-post-aside),
#content-wrap:has(.site-legal-toc, .site-about-story, .site-post-aside) {
  overflow: clip;
}

.site-legal-toc {
  position: sticky;
  top: 120px;
}

.site-legal-toc .site-hero-kicker {
  margin: 0 0 14px;
  color: var(--tt-muted-color);
}

.site-legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: site-legal-toc;
  border-top: 1px solid var(--tt-border-color);
}

.site-legal-toc li {
  counter-increment: site-legal-toc;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tt-text-color);
  transition: color 0.3s;
}

.site-legal-toc a::before {
  flex: none;
  min-width: 2ch;
  content: counter(site-legal-toc, decimal-leading-zero);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tt-main-color);
}

.site-legal-toc a:hover {
  color: var(--tt-ink-color);
}

.site-legal-body {
  max-width: 72ch;
}

.site-legal-section {
  counter-increment: site-legal;
  scroll-margin-top: 110px;
  padding: clamp(28px, 3vw, 40px) 0 clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--tt-ink-color);
}

.site-legal-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.site-legal-section h2 {
  margin: 0 0 24px;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tt-ink-color);
  text-wrap: balance;
}

.site-legal-section h2::before {
  display: block;
  margin-bottom: 14px;
  content: counter(site-legal, decimal-leading-zero);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--tt-main-color);
}

.site-legal-section p {
  text-wrap: pretty;
}

.site-legal-section > * {
  margin-block: 0;
}

.site-legal-section > * + * {
  margin-top: 20px;
}

.site-legal-section > * + .site-legal-facts,
.site-legal-section > * + .site-legal-rights,
.site-legal-section > .site-legal-facts + *,
.site-legal-section > .site-legal-rights + * {
  margin-top: 28px;
}

.site-legal-statement {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tt-ink-color);
}

.site-legal-facts {
  border-top: 1px solid var(--tt-border-color);
}

.site-legal-facts > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 6px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-legal-facts dt,
.site-legal-article,
.site-legal-entity {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-muted-color);
}

.site-legal-facts dt {
  padding-top: 0.35em;
}

.site-legal-facts dd {
  margin: 0;
}

.site-legal-processors dt {
  padding-top: 0;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tt-ink-color);
}

.site-legal-entity {
  display: block;
  margin-bottom: 2px;
}

.site-legal-rights {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tt-border-color);
}

.site-legal-rights li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-legal-article {
  flex: none;
}

@media (max-width: 1024px) {
  .site-legal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-legal-toc {
    position: static;
  }

  .site-legal-toc ol {
    columns: 2;
    column-gap: 32px;
  }

  .site-legal-toc li {
    break-inside: avoid;
  }
}

@media (max-width: 767px) {
  .site-hero-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .site-hero-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  .site-hero-facts dt {
    margin: 0;
  }

  .site-hero-facts dd {
    text-align: right;
  }

  .site-legal-toc ol {
    columns: 1;
  }

  .site-legal-facts > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-legal-facts dt {
    padding-top: 0;
  }

  .site-legal-rights li {
    flex-direction: column;
  }
}

/* Forms (/kontakt and the course signup): small-caps labels over square boxed fields on the card surface, whose
   hairline turns red on focus and when the server rejects the field (aria-invalid, set by enhanceForm). The submit is the heroes' solid
   red button, with the privacy note beside it; the confirmation replaces the form under an ink rule. */

.site-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
}

.site-form-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.site-form-half {
  grid-column: auto;
}

.site-form-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-muted-color);
}

.site-form-label span {
  color: var(--tt-main-color);
}

.site-form-control {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--tt-border-color);
  border-radius: 0;
  background-color: var(--tt-surface-color);
  box-shadow: none;
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
  color: var(--tt-ink-color);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  appearance: none;
}

.site-form-control::placeholder {
  color: var(--tt-subtle-color);
  opacity: 1;
}

.site-form-control:hover {
  border-color: var(--tt-subtle-color);
}

.site-form-control:focus {
  border-color: var(--tt-main-color);
  box-shadow: inset 0 0 0 1px var(--tt-main-color);
  outline: none;
}

.site-form-control[aria-invalid='true'] {
  border-color: var(--tt-main-color);
}

textarea.site-form-control {
  min-height: 160px;
  resize: vertical;
}

select.site-form-control {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23131111' stroke-width='1.5'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
}

/* The empty choice reads as a placeholder (the theme greys :invalid selects with a hard-coded grey). */
.site-form select.site-form-control:invalid,
.site-form select.site-form-control:has(option[value='']:checked) {
  color: var(--tt-muted-color);
}

.site-form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  color: var(--tt-ink-color);
  cursor: pointer;
}

.site-form-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tt-main-color);
}

.site-form-alert {
  margin: 28px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--tt-main-color);
  font-size: 15px;
  color: var(--tt-red-800);
}

.site-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(32px, 4vw, 48px);
}

.site-form-submit {
  border: 0;
  background-color: var(--tt-main-color);
  font-family: inherit;
  color: #fff;
  cursor: pointer;
}

.site-form-submit:hover {
  background-color: var(--tt-red-700);
}

.site-form-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.site-form-privacy {
  flex: 1 1 260px;
  max-width: 44ch;
  margin: 0;
  font-size: 14px;
  color: var(--tt-muted-color);
}

.site-form-privacy strong {
  display: block;
  font-weight: 500;
  color: var(--tt-ink-color);
}

.site-form-success {
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--tt-ink-color);
  color: var(--tt-text-color);
  outline: none;
}

.site-form-success .site-hero-kicker {
  margin: 0 0 16px;
  color: var(--tt-muted-color);
}

.site-form-success-title {
  margin: 0 0 16px;
  font-family: 'Syne', sans-serif;
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--tt-ink-color);
}

.site-form-success p:last-child {
  margin: 0;
  font-size: 18px;
}

@media (max-width: 767px) {
  .site-form-half {
    grid-column: 1 / -1;
  }
}

/* Contact page (kontakt), after the type-only header: what to write as a numbered, ruled list beside the form (sticky
   on desktop), with the phone as one ruled row and the featured client logos under it, then ProcessSteps. The aside
   holds nothing that leads away from the form. One column below 1025px, with the form first. The course signup
   (fotografski-tecaj#prijava) uses the same grid and aside. */

.site-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  align-items: start;
  gap: 56px clamp(32px, 6vw, 96px);
}

#body-inner:has(.site-contact-aside),
#content-wrap:has(.site-contact-aside) {
  overflow: clip;
}

.site-contact-aside {
  position: sticky;
  top: 120px;
}

.site-contact-aside .site-hero-kicker {
  margin: 0 0 16px;
  color: var(--tt-muted-color);
}

.site-contact-brief {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: site-brief;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-contact-brief li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 0;
  padding: 16px 0;
  counter-increment: site-brief;
  border-top: 1px solid var(--tt-border-color);
}

.site-contact-brief li::before {
  grid-row: span 2;
  padding-top: 6px;
  content: counter(site-brief, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-contact-brief-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tt-ink-color);
}

.site-contact-brief p {
  margin: 0;
  font-size: 15px;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

.site-contact-course {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid var(--tt-ink-color);
  border-bottom: 1px solid var(--tt-border-color);
}

.site-contact-aside .site-contact-course .site-hero-kicker {
  margin: 0 0 4px;
}

.site-contact-course-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--tt-ink-color);
  transition: color 0.3s;
}

.site-contact-course-title::after {
  display: inline-block;
  margin-left: 10px;
  content: '→';
  color: var(--tt-main-color);
  transition: transform 0.3s;
}

.site-contact-course:hover .site-contact-course-title {
  color: var(--tt-main-color);
}

.site-contact-course:hover .site-contact-course-title::after {
  transform: translateX(4px);
}

/* The homepage's logo plate, small: three to a row on a ruled grid, grey and multiplied into the page, sized by area
   (--logo-scale), without names (they are the alt text). */
.site-contact-clients {
  margin-top: 40px;
}

.site-contact-clients ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-contact-clients li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px 8px;
  border-top: 1px solid var(--tt-border-color);
  background-color: var(--tt-main-bg-color);
}

.site-contact-clients li:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--tt-border-color);
}

.site-contact-clients img {
  width: calc(clamp(36px, 3.2vw, 46px) * var(--logo-scale, 1));
  max-width: 80%;
  height: auto;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.75;
}

@media (max-width: 1024px) {
  .site-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-contact-aside {
    position: static;
    order: 1;
  }
}

/* Homepage: call-to-action buttons (hero, course and inquiry sections) and the course block. */

.site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.site-actions .tt-btn {
  margin: 0;
}

/* Centered pairs get equal widths, so the gap between the buttons sits on the page's center. */
.site-actions-center {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  margin-inline: auto;
}

.site-actions-center .tt-btn {
  justify-content: center;
}

.site-more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  color: var(--tt-main-color);
}

.site-more-link i {
  font-size: 13px;
  transition: transform 0.2s;
}

.site-more-link:hover {
  color: var(--tt-red-700);
}

.site-more-link:hover i {
  transform: translateX(4px);
}

.site-stars {
  display: inline-flex;
  gap: 2px;
  margin-left: 8px;
  font-size: 10px;
}

/* Page header caption: balanced title lines (no single orphaned word), and a description that steps down from the
   theme's fixed 24px on phones, where it ran to five lines and pushed the buttons below the fold. */

#page-header .ph-caption-title {
  text-wrap: balance;
}

#page-header .ph-caption-description {
  line-height: 1.55;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  #page-header .ph-caption-description {
    margin-top: 20px;
    font-size: 19px;
  }
}

@media (max-width: 767px) {
  .site-actions {
    flex-direction: column;
  }

  .site-actions-center {
    grid-auto-flow: row;
    width: auto;
  }

  .site-actions .tt-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Header menu (desktop), set like a magazine masthead: small tracked capitals, the current page underlined in red, and
   the last item (Kontakt) an underlined red link with an arrow, so the inquiry is one click away on every page without
   a button competing with the photos. In the mobile menu Kontakt stays a plain list item. Over photo page headers the
   theme turns the links white, and Kontakt follows. */

@media (min-width: 1025px) {
  #tt-header .tt-main-menu-list {
    display: flex;
    align-items: center;
  }

  #tt-header .tt-main-menu-list > li {
    padding: 0 16px;
  }

  #tt-header .tt-main-menu-list > li:first-child {
    padding-left: 0;
  }

  #tt-header .tt-main-menu-list > li:last-child {
    padding-right: 0;
  }

  #tt-header .tt-main-menu-list > li > a,
  #tt-header .tt-main-menu-list > li > .tt-submenu-trigger > a {
    padding: 14px 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition:
      color 0.3s,
      opacity 0.3s,
      text-decoration-color 0.3s;
  }

  #tt-header .tt-main-menu-list > li.active > a,
  #tt-header .tt-main-menu-list > li.active > .tt-submenu-trigger > a {
    text-decoration-color: var(--tt-main-color);
  }

  #tt-header .tt-main-menu-list > li > .tt-submenu-trigger > a::after {
    margin-left: 6px;
    font-size: 8px;
    vertical-align: 2px;
  }

  #tt-header .tt-main-menu-list > li.site-menu-cta {
    margin-left: 8px;
  }

  #tt-header .tt-main-menu-list > li.site-menu-cta > a,
  #tt-header .tt-main-menu-list.tt-mm-hover > li.site-menu-cta > a {
    color: var(--tt-main-color);
    opacity: 1;
    text-decoration-color: currentcolor;
  }

  #tt-header .tt-main-menu-list > li.site-menu-cta > a::after {
    display: inline-block;
    margin-left: 8px;
    content: '→';
    letter-spacing: 0;
    transition: transform 0.3s;
  }

  #tt-header .tt-main-menu-list > li.site-menu-cta > a:hover,
  #tt-header .tt-main-menu-list.tt-mm-hover > li.site-menu-cta > a:hover {
    color: var(--tt-red-700);
  }

  #tt-header .tt-main-menu-list > li.site-menu-cta > a:hover::after {
    transform: translateX(4px);
  }

  body.ph-bg-image-on.tt-ph-visible:not(.tt-light-bg-on) #tt-header .tt-main-menu-list > li.site-menu-cta > a,
  body.tt-next-project-top.tt-np-image-on:not(.tt-light-bg-on) #tt-header .tt-main-menu-list > li.site-menu-cta > a {
    color: var(--tt-on-image-color);
  }

  body.ph-bg-image-on.tt-ph-visible:not(.tt-light-bg-on) #tt-header .tt-main-menu-list > li.active > a,
  body.ph-bg-image-on.tt-ph-visible:not(.tt-light-bg-on) #tt-header .tt-main-menu-list > li.active > .tt-submenu-trigger > a {
    text-decoration-color: currentcolor;
  }

  /* Storitve dropdown: a panel on the page background, hung from a thin ink rule, that reads like a table of contents,
     each service numbered in small grey figures beside its title in the display face, with rules inset to the text. */

  #tt-header .tt-submenu {
    width: max-content;
    min-width: 280px;
    margin-top: 6px;
    border: 0;
    border-top: 1px solid var(--tt-ink-color);
    border-radius: 0;
    background-color: var(--tt-main-bg-color);
    box-shadow: 0 16px 32px rgb(19 17 17 / 6%);
  }

  #tt-header .tt-submenu-list {
    padding: 6px 0 10px;
    counter-reset: site-submenu;
  }

  #tt-header .tt-submenu-list > li + li > a {
    border-top: 1px solid var(--tt-border-color);
  }

  #tt-header .tt-submenu-list > li > a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 24px;
    padding: 13px 0;
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--tt-ink-color);
    counter-increment: site-submenu;
  }

  #tt-header .tt-submenu-list > li > a::before {
    flex: none;
    width: 2ch;
    content: counter(site-submenu, decimal-leading-zero);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--tt-muted-color);
  }

  #tt-header .tt-submenu-list > li a:hover,
  #tt-header .tt-submenu-list > li.active > a {
    background-color: transparent;
    color: var(--tt-main-color);
  }

  #tt-header .tt-submenu-list > li.active > a::before {
    color: var(--tt-main-color);
  }
}

/* ProcessSteps.astro (service pages) and the /o-meni repertoire: the shared section header over the steps as a
   numbered, ruled list, each row with its number, the step in the display face and its text (stacked on phones). */

.site-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: site-step;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-steps li {
  display: grid;
  grid-template-columns: 48px minmax(0, 5fr) minmax(0, 7fr);
  align-items: baseline;
  gap: 8px clamp(16px, 3vw, 48px);
  padding: clamp(20px, 2.5vw, 32px) 0;
  counter-increment: site-step;
  border-top: 1px solid var(--tt-border-color);
}

.site-steps li::before {
  content: counter(site-step, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-steps-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tt-ink-color);
}

.site-steps p {
  max-width: 52ch;
  margin: 0;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .site-steps li {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .site-steps li > :last-child {
    grid-column: 2;
  }
}

/* Mobile header call button. On narrow phones it replaces the "Meni" label. */

.site-m-call {
  display: none;
}

@media (max-width: 1024px) {
  .site-m-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 999px;
    background-color: var(--tt-main-color);
    color: #fff;
    font-size: 15px;
    pointer-events: initial;
  }

  .site-m-call:hover,
  .site-m-call:focus-visible {
    background-color: var(--tt-red-700);
    color: #fff;
  }
}

@media (max-width: 480px) {
  .tt-m-menu-toggle-btn-text {
    display: none;
  }
}

/* Section header (homepage services and references, ProcessSteps): a ruled kicker over a large display heading with a red full
   stop, and a short muted intro on the right. */

.site-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.site-section-head .site-hero-kicker {
  margin: 0 0 16px;
  color: var(--tt-muted-color);
}

.site-section-heading {
  margin: 0;
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.site-section-intro {
  max-width: 34ch;
  margin: 0;
  color: var(--tt-muted-color);
  text-wrap: pretty;
}

/* Homepage services: a numbered index, like a magazine's contents page. Each row has its number, the full title in
   the display face, the description's first paragraph and a text link, with the photo beside it on alternating sides
   (stacked under the text on phones). The whole row is one link. */

.site-services-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: site-services;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-services-item {
  counter-increment: site-services;
  border-top: 1px solid var(--tt-border-color);
}

.site-services-link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 24px clamp(32px, 5vw, 80px);
  padding: clamp(28px, 4vw, 56px) 0;
  color: inherit;
}

.site-services-item:nth-child(even) .site-services-text {
  order: 2;
}

.site-services-item:nth-child(even) .site-services-link {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.site-services-text::before {
  display: block;
  margin-bottom: 20px;
  content: counter(site-services, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-services-title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tt-ink-color);
  text-wrap: balance;
  transition: color 0.3s;
}

.site-services-lede {
  max-width: 44ch;
  margin: 18px 0 0;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

.site-services-more {
  display: inline-block;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-main-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.site-services-more::after {
  display: inline-block;
  margin-left: 10px;
  content: '→';
  letter-spacing: 0;
  transition: transform 0.3s;
}

.site-services-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--tt-surface-color);
}

.site-services-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.site-services-link:hover .site-services-title,
.site-services-link:focus-visible .site-services-title {
  color: var(--tt-main-color);
}

.site-services-link:hover .site-services-more::after {
  transform: translateX(4px);
}

.site-services-link:hover .site-services-photo img {
  transform: scale(1.04);
}

@media (max-width: 767px) {
  .site-services-link,
  .site-services-item:nth-child(even) .site-services-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-services-item:nth-child(even) .site-services-text {
    order: 0;
  }

  .site-services-photo {
    order: -1;
  }

  .site-services-text::before {
    margin-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-services-photo img,
  .site-services-more::after {
    transition: none;
  }
}

/* Homepage references: the featured logos on a ruled plate (three columns, two on phones), each in grey and
   multiplied into the page so white JPG backgrounds disappear, sized by area, with the client's name in small caps
   under it. The other clients follow as a running list, then a text link to /o-meni. The cells carry the page background because
   the fade-in's transform isolates the grid, and multiply would otherwise blend against transparency. */

.site-clients-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-clients-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(180px, 17vw, 232px);
  padding: clamp(28px, 3vw, 40px) 20px 20px;
  border-top: 1px solid var(--tt-border-color);
  background-color: var(--tt-main-bg-color);
}

.site-clients-item:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--tt-border-color);
}

/* Logos are sized by area, not height: --logo-scale (set in index.astro) is the square root of the aspect ratio, so a
   wide wordmark and a tall emblem cover about the same area and read as the same size (index.astro also corrects a
   few logos for ink density). */
.site-clients-item img {
  flex: none;
  width: calc(clamp(64px, 6.5vw, 92px) * var(--logo-scale, 1));
  max-width: 70%;
  height: auto;
  margin: auto 0;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.75;
  transition:
    filter 0.4s,
    opacity 0.4s;
}

.site-clients-name {
  font-size: 11px;
  text-align: center;
  color: var(--tt-muted-color);
}

@media (hover: hover) {
  .site-clients-item:hover img {
    filter: none;
    opacity: 1;
  }
}

.site-clients-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: clamp(28px, 3vw, 40px);
}

.site-clients-others {
  max-width: 72ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

.site-clients-others .site-hero-kicker {
  margin-right: 12px;
  color: var(--tt-ink-color);
}

.site-clients-link {
  flex: none;
  color: var(--tt-main-color);
}

.site-clients-link:hover {
  color: var(--tt-red-700);
}

.site-clients-link::after {
  display: inline-block;
  margin-left: 10px;
  content: '→';
  letter-spacing: 0;
  transition: transform 0.3s;
}

.site-clients-link:hover::after {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .site-clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-clients-item:not(:nth-child(3n + 1)) {
    border-left: 0;
  }

  .site-clients-item:nth-child(even) {
    border-left: 1px solid var(--tt-border-color);
  }

  .site-clients-item {
    min-height: 160px;
    padding: 24px 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-clients-item img,
  .site-clients-link::after {
    transition: none;
  }
}

/* Homepage course: the section header, then the photo with a pull quote from a review under it on the left, and on
   the right the selling points as a numbered, ruled list, the courses with their prices (each row opens the signup
   form with that course selected) and the hero's actions. On tablets and phones it is one column, with the quote
   moved after the actions so they stay close to the points. It follows the inquiry at the foot of the page, so it opens
   under a rule like the inquiry does, to read as a new chapter rather than part of it. */

.site-course .site-section-head {
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--tt-border-color);
}

.site-course-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 40px clamp(32px, 5vw, 80px);
}

.site-course-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--tt-surface-color);
}

.site-course-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-course-quote {
  margin: clamp(32px, 3vw, 44px) 0 0;
}

.site-course-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 1.8vw, 25px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tt-ink-color);
  text-wrap: pretty;
}

.site-course-quote blockquote p {
  margin: 0;
}

/* Inline Slovene quote marks in red; a large hanging guillemet read as a "next" arrow. */
.site-course-quote blockquote p::before {
  content: '»';
  color: var(--tt-main-color);
}

.site-course-quote blockquote p::after {
  content: '«';
  color: var(--tt-main-color);
}

/* Reset the theme's figcaption (a dark box over a photo) to a plain credit line. */
.site-course-quote figcaption {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  max-width: none;
  margin: 20px 0 0;
  padding: 0;
  background-color: transparent;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  color: var(--tt-ink-color);
  opacity: 1;
}

.site-course-quote figcaption::before {
  flex: none;
  width: 32px;
  height: 1px;
  background-color: currentcolor;
  content: '';
}

.site-course-quote figcaption span {
  color: var(--tt-muted-color);
}

.site-course-points {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: site-course;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-course-points li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  counter-increment: site-course;
  border-top: 1px solid var(--tt-border-color);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--tt-ink-color);
  text-wrap: pretty;
}

.site-course-points li::before {
  padding-top: 0.4em;
  content: counter(site-course, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-course-prices {
  margin-top: clamp(36px, 4vw, 56px);
}

.site-course-prices .site-hero-kicker {
  margin: 0 0 12px;
  color: var(--tt-muted-color);
}

.site-course-prices ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-course-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px clamp(16px, 2.5vw, 32px);
  padding: 18px 0;
  border-top: 1px solid var(--tt-border-color);
  color: var(--tt-ink-color);
}

.site-course-price-title,
.site-course-price-amount {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: color 0.3s;
}

.site-course-price-duration {
  font-size: 14px;
  color: var(--tt-muted-color);
}

.site-course-price-amount::after {
  display: inline-block;
  margin-left: 14px;
  content: '→';
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tt-main-color);
  transition: transform 0.3s;
}

.site-course-price:hover .site-course-price-title,
.site-course-price:focus-visible .site-course-price-title {
  color: var(--tt-main-color);
}

.site-course-price:hover .site-course-price-amount::after {
  transform: translateX(4px);
}

.site-course-links {
  margin-top: clamp(32px, 3vw, 44px);
}

.site-course .site-hero-link {
  color: var(--tt-ink-color);
}

.site-course .site-hero-link:hover {
  color: var(--tt-main-color);
}

.site-course .site-hero-link-primary,
.site-course .site-hero-link-primary:hover {
  color: #fff;
}

.site-course .site-hero-link-primary {
  background-color: var(--tt-main-color);
}

.site-course .site-hero-link-primary:hover {
  background-color: var(--tt-red-700);
}

@media (max-width: 1024px) {
  .site-course-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-course-aside {
    display: contents;
  }

  .site-course-photo {
    aspect-ratio: 3 / 2;
  }

  .site-course-quote {
    order: 1;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-course-price-title,
  .site-course-price-amount,
  .site-course-price-amount::after {
    transition: none;
  }
}

/* Course page (fotografski-tecaj), after the cover hero: why individual lessons (a standfirst beside the reasons as a
   numbered, ruled list, the homepage's site-course-points), the courses as ruled columns (number, title, price and
   duration, everything they cover, a signup link; the featured one under a red rule with a solid button), the reviews
   (one as a pull quote, the rest in two ruled columns), a statement over the photos (the service page's captioned
   sequence), the FAQ as a numbered, ruled index that opens in place, and the signup form beside /kontakt's aside. */

.site-tecaj-why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 32px clamp(32px, 5vw, 80px);
}

.site-tecaj-why-lead {
  max-width: 24ch;
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--tt-ink-color);
  text-wrap: pretty;
}

.site-tecaj-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-tecaj-plan {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  border-top: 1px solid var(--tt-ink-color);
}

.site-tecaj-plan.is-featured {
  border-top: 3px solid var(--tt-main-color);
  padding-top: 18px;
}

.site-tecaj-plan-number {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-tecaj-plan-badge {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.site-tecaj-plan-title {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tt-ink-color);
}

.site-tecaj-plan-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 12px 0 28px;
}

.site-tecaj-plan-price {
  font-family: 'Syne', sans-serif;
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tt-ink-color);
}

.site-tecaj-plan-meta .site-hero-kicker {
  color: var(--tt-muted-color);
}

.site-tecaj-plan-list {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-tecaj-plan-list li {
  padding: 12px 0;
  border-top: 1px solid var(--tt-border-color);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

/* The link sits at the foot of every column, so the three line up whatever their lists' lengths. */
.site-tecaj-plan .site-hero-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--tt-ink-color);
}

.site-tecaj-plan .site-hero-link:hover {
  color: var(--tt-main-color);
}

.site-tecaj-plan .site-hero-link-primary,
.site-tecaj-plan .site-hero-link-primary:hover {
  color: #fff;
}

.site-tecaj-plan .site-hero-link-primary {
  background-color: var(--tt-main-color);
}

.site-tecaj-plan .site-hero-link-primary:hover {
  background-color: var(--tt-red-700);
}

.site-tecaj-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 16px 0;
  list-style: none;
  border-top: 1px solid var(--tt-border-color);
  border-bottom: 1px solid var(--tt-border-color);
  color: var(--tt-ink-color);
}

.site-tecaj-notes li + li::before {
  margin: 0 16px;
  content: '/';
  color: var(--tt-main-color);
}

.site-tecaj-lead-review,
.site-tecaj-review {
  margin: 0;
}

.site-tecaj-lead-review blockquote,
.site-tecaj-review blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  text-wrap: pretty;
}

.site-tecaj-lead-review blockquote p,
.site-tecaj-review blockquote p {
  margin: 0;
}

/* Inline Slovene quote marks in red, as in the homepage course quote. */
.site-tecaj-lead-review blockquote p::before,
.site-tecaj-review blockquote p::before {
  content: '»';
  color: var(--tt-main-color);
}

.site-tecaj-lead-review blockquote p::after,
.site-tecaj-review blockquote p::after {
  content: '«';
  color: var(--tt-main-color);
}

.site-tecaj-lead-review {
  margin-bottom: clamp(48px, 6vw, 88px);
}

.site-tecaj-lead-review blockquote {
  max-width: 48ch;
  font-family: 'Syne', sans-serif;
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--tt-ink-color);
}

/* Reset the theme's figcaption (a dark box over a photo) to a plain credit line behind a short rule. */
.site-tecaj-lead-review figcaption,
.site-tecaj-review figcaption {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;
  margin: 20px 0 0;
  padding: 0;
  background-color: transparent;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  color: var(--tt-ink-color);
  opacity: 1;
}

.site-tecaj-lead-review figcaption::before,
.site-tecaj-review figcaption::before {
  flex: none;
  width: 32px;
  height: 1px;
  background-color: currentcolor;
  content: '';
}

/* Balanced columns, so reviews of very different lengths leave no holes. */
.site-tecaj-reviews {
  column-count: 2;
  column-gap: clamp(32px, 5vw, 80px);
}

.site-tecaj-review {
  padding: 24px 0 36px;
  border-top: 1px solid var(--tt-border-color);
  break-inside: avoid;
}

.site-tecaj-review blockquote {
  font-size: 16px;
  line-height: 1.65;
  color: var(--tt-text-color);
}

/* The rest of the reviews open in place under the first ones; the summary is a text link with a red +/−. */
.site-tecaj-reviews-more summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--tt-ink-color);
  text-decoration: none;
}

/* The underline goes on the label only: on the flex summary it also ran under the +/− as a separate stroke. */
.site-tecaj-reviews-more summary span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.site-tecaj-reviews-more summary::-webkit-details-marker {
  display: none;
}

.site-tecaj-reviews-more summary:hover {
  color: var(--tt-main-color);
}

.site-tecaj-reviews-more summary::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
  color: var(--tt-main-color);
}

.site-tecaj-reviews-more[open] summary::after {
  content: '−';
}

.site-tecaj-reviews-more-open,
.site-tecaj-reviews-more[open] .site-tecaj-reviews-more-closed {
  display: none;
}

.site-tecaj-reviews-more[open] .site-tecaj-reviews-more-open {
  display: inline;
}

.site-tecaj-reviews-more > .site-tecaj-reviews {
  margin-top: 32px;
}

.site-tecaj-statement {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.site-tecaj-statement .site-hero-kicker {
  margin: 0 0 20px;
  color: var(--tt-muted-color);
}

.site-tecaj-statement-text {
  max-width: 32ch;
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tt-ink-color);
  text-wrap: pretty;
}

.site-tecaj-faq {
  counter-reset: site-faq;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-tecaj-faq-item {
  counter-increment: site-faq;
  border-top: 1px solid var(--tt-border-color);
}

.site-tecaj-faq-item summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 28px) 0;
  list-style: none;
  cursor: pointer;
}

.site-tecaj-faq-item summary::-webkit-details-marker {
  display: none;
}

.site-tecaj-faq-item summary::before {
  content: counter(site-faq, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-tecaj-faq-item summary::after {
  justify-self: end;
  content: '+';
  font-size: 24px;
  line-height: 1;
  color: var(--tt-main-color);
}

.site-tecaj-faq-item[open] summary::after {
  content: '−';
}

.site-tecaj-faq-question {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tt-ink-color);
  text-wrap: balance;
  transition: color 0.3s;
}

.site-tecaj-faq-item summary:hover .site-tecaj-faq-question {
  color: var(--tt-main-color);
}

.site-tecaj-faq-answer {
  max-width: calc(64px + 68ch);
  padding: 0 40px clamp(28px, 3vw, 40px) 64px;
  color: var(--tt-text-color);
}

.site-tecaj-faq-answer p {
  margin: 0;
  text-wrap: pretty;
}

.site-tecaj-faq-answer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-tecaj-faq-answer li {
  padding: 10px 0;
  border-top: 1px solid var(--tt-border-color);
  text-wrap: pretty;
}

.site-tecaj-faq-answer li:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Gift voucher: the voucher beside what it gives (the homepage's numbered points) and its ruled course rows. */
.site-tecaj-voucher {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 40px clamp(32px, 5vw, 80px);
}

.site-tecaj-voucher-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--tt-border-color);
}

/* The signup form follows the course/voucher switch: a voucher asks for the recipient instead of the format, and
   swaps the steps beside it, the message hint, the button, the reassurance and the confirmation. Pure CSS, so it also
   holds without JS and for a preselected course. */
.site-contact-grid:not(:has(input[name='vrsta'][value='bon']:checked)) .site-tecaj-voucher-only,
.site-contact-grid:has(input[name='vrsta'][value='bon']:checked) .site-tecaj-course-only {
  display: none;
}

/* Signup choices before the contact fields: the switches as square segmented buttons (the checked one in ink), the
   courses as ruled cards with their price (the checked one under a red rule on a red tint). The radios stay in the
   tab order, visually hidden, so arrow keys move within a group. */
.site-form-choice {
  min-width: 0;
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 0;
  border: 0;
}

.site-form-choice legend {
  float: left;
  width: 100%;
  padding: 0;
}

.site-form-choice legend + * {
  clear: both;
}

.site-form-switch,
.site-form-cards {
  display: grid;
  gap: 8px;
}

.site-form-switch {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.site-form-cards {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.site-form-switch label,
.site-form-card {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.site-form-switch input,
.site-form-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.site-form-switch label {
  display: flex;
}

.site-form-switch span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border: 1px solid var(--tt-border-color);
  background-color: var(--tt-surface-color);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  color: var(--tt-ink-color);
  transition:
    border-color 0.3s,
    background-color 0.3s,
    color 0.3s;
}

.site-form-switch label:hover span {
  border-color: var(--tt-subtle-color);
}

.site-form-switch input:checked + span {
  border-color: var(--tt-ink-color);
  background-color: var(--tt-ink-color);
  color: #fff;
}

.site-form-switch input:focus-visible + span,
.site-form-card:has(input:focus-visible) {
  outline: 2px solid var(--tt-main-color);
  outline-offset: 2px;
}

.site-form-card {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
  border: 1px solid var(--tt-border-color);
  border-top: 2px solid var(--tt-ink-color);
  background-color: var(--tt-surface-color);
  transition:
    border-color 0.3s,
    background-color 0.3s;
}

.site-form-card:hover {
  border-color: var(--tt-subtle-color);
  border-top-color: var(--tt-ink-color);
}

.site-form-card:has(input:checked) {
  border-color: var(--tt-main-color);
  background-color: var(--tt-red-50);
  box-shadow: inset 0 0 0 1px var(--tt-main-color);
}

.site-form-card-number {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: var(--tt-main-color);
}

.site-form-card-badge {
  text-transform: uppercase;
}

.site-form-card-title {
  margin-top: 10px;
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--tt-ink-color);
}

.site-form-card-meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--tt-muted-color);
}

.site-form-card-price {
  margin-top: auto;
  padding-top: 14px;
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--tt-ink-color);
}

.site-form-hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--tt-muted-color);
}

textarea.site-tecaj-message {
  min-height: 104px;
}

/* A short review line between the steps and the phone, smaller than the homepage's pull quote. */
.site-tecaj-form-quote {
  margin-top: 40px;
}

.site-tecaj-form-quote blockquote {
  font-size: 20px;
}

/* Phones: the courses as full-width rows with the price on the right, the switches tighter so they stay in one row. */
@media (max-width: 767px) {
  .site-form-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-form-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 14px 16px;
  }

  .site-form-card-number {
    justify-content: flex-start;
    gap: 12px;
  }

  .site-form-card-title {
    margin-top: 4px;
  }

  .site-form-card-price {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-self: center;
    margin: 0;
    padding: 0;
  }

  .site-form-switch span {
    padding: 12px 6px;
    font-size: 14px;
  }
}

/* It follows the FAQ on the same background, so it opens under a rule, like the homepage course section. */
.site-tecaj-signup .site-section-head {
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--tt-ink-color);
}

/* Signup bar (phones and tablets): fixed to the bottom on the page background under an ink rule, with the lowest
   price and the solid red button. The script shows it (is-visible) between the hero and the form; it slides away
   rather than covering the form or the footer. Hidden on desktop, where the header and the course columns are in reach. */
.site-tecaj-bar {
  display: none;
}

@media (max-width: 1024px) {
  .site-tecaj-bar:not([hidden]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px var(--site-gutter) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--tt-ink-color);
    background-color: var(--tt-main-bg-color);
    transform: translateY(100%);
    visibility: hidden;
    transition:
      transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1),
      visibility 0s 0.35s;
  }

  .site-tecaj-bar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
}

.site-tecaj-bar-text {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.2;
}

.site-tecaj-bar-text .site-hero-kicker {
  font-size: 10px;
  color: var(--tt-muted-color);
}

.site-tecaj-bar-price {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tt-ink-color);
}

.site-tecaj-bar .site-hero-link-primary {
  margin-left: auto;
  color: #fff;
  background-color: var(--tt-main-color);
}

.site-tecaj-bar .site-hero-link-primary:hover {
  color: #fff;
  background-color: var(--tt-red-700);
}

@media (max-width: 1024px) {
  .site-tecaj-why,
  .site-tecaj-plans,
  .site-tecaj-voucher {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .site-tecaj-reviews {
    column-count: 1;
  }

  .site-tecaj-faq-item summary {
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    gap: 12px;
  }

  .site-tecaj-faq-answer {
    padding: 0 0 28px 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-tecaj-faq-question,
  .site-tecaj-bar:not([hidden]),
  .site-tecaj-bar.is-visible {
    transition: none;
  }
}

/* Inquiry (InquiryCta.astro), closing the homepage, service pages, /o-meni and blog posts: under a rule, the kicker
   and the title in the display face (its punctuation in red) on the left, and the lead with the hero's actions on the
   right (a solid red button, then phone and email as text links). On tablets and phones it is one column. */

.site-inquiry-grid {
  display: grid;
  /* The left column's minimum is its longest word, so a title never runs into the lead. */
  grid-template-columns: minmax(min-content, 40fr) minmax(0, 60fr);
  gap: 28px clamp(32px, 5vw, 80px);
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--tt-border-color);
}

.site-inquiry .site-hero-kicker {
  margin: 0 0 16px;
  color: var(--tt-muted-color);
}

.site-inquiry-title {
  margin: 0;
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--tt-ink-color);
  text-wrap: balance;
}

/* The red mark is drawn here because Prettier puts a line break (a space) between the title and a following span. */
.site-inquiry-title::after {
  content: attr(data-mark);
  color: var(--tt-main-color);
}

.site-inquiry-body {
  padding-top: 34px;
}

.site-inquiry-lead {
  max-width: 44ch;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

.site-inquiry-lead p {
  margin: 0;
}

.site-inquiry-lead p + p {
  margin-top: 1em;
}

.site-inquiry-links {
  margin-top: clamp(28px, 3vw, 40px);
}

.site-inquiry .site-hero-link {
  color: var(--tt-muted-color);
  overflow-wrap: anywhere;
}

.site-inquiry .site-hero-link:hover {
  color: var(--tt-ink-color);
}

.site-inquiry .site-hero-link-primary,
.site-inquiry .site-hero-link-primary:hover {
  color: #fff;
}

.site-inquiry .site-hero-link-primary {
  background-color: var(--tt-main-color);
}

.site-inquiry .site-hero-link-primary:hover {
  background-color: var(--tt-red-700);
}

@media (max-width: 1024px) {
  .site-inquiry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-inquiry-title {
    font-size: clamp(40px, 8vw, 64px);
  }

  .site-inquiry-body {
    padding-top: 0;
  }
}

/* Editorial heroes. The homepage sets its type on the page with the photo beside it (site-hero-split), the course page
   sets it large over a full-bleed photo (site-hero-cover). Both share a small-caps kicker, a tight display title, text
   links instead of buttons and a numbered index (services or courses). They keep #page-header and .ph-appear, so the
   theme's intro animation and the header's light bar still apply. */

.site-hero-kicker {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-hero-kicker-rule {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-hero-kicker-rule::before {
  flex: none;
  width: 48px;
  height: 1px;
  background-color: currentcolor;
  content: '';
}

#page-header .site-hero-title {
  margin: 0;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.site-hero-dot {
  color: var(--tt-main-color);
}

#page-header .site-hero-lead {
  max-width: 36ch;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.site-hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.site-hero-link {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition:
    color 0.3s,
    opacity 0.3s;
}

/* The primary action is a solid button (red on the page, white over a photo), so it stays readable on any photo and
   is a full-size tap target; the secondary action stays a text link. */
.site-hero-link-primary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 14px 22px;
  text-decoration: none;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.site-hero-link-primary::after {
  display: inline-block;
  margin-left: 10px;
  content: '→';
  letter-spacing: 0;
  transition: transform 0.3s;
}

.site-hero-link-primary:hover::after {
  transform: translateX(4px);
}

.site-hero-index ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: site-hero-index;
}

.site-hero-index li {
  counter-increment: site-hero-index;
}

.site-hero-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.3s;
}

.site-hero-index a::before {
  flex: none;
  content: counter(site-hero-index, decimal-leading-zero);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .site-hero-link-primary::after {
    transition: none;
  }
}

/* Split (homepage): a 40/60 grid inside the header's wrap, so the kicker and the photo line up with the logo and the
   menu. On desktop it is one window tall: the photo fills the row, the services (their short titles, numbered) sit at
   the foot of the text column, and the title and spacing scale with the window height so the services stay above the
   fold on short laptop windows; if the text still doesn't fit, the hero grows rather than overlapping the next
   section. On tablets and phones the photo comes first, full width, under the header, and the hero takes its natural
   height. */

#page-header.site-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(32px, 4vw, 64px);
  grid-template-rows: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1282px;
  margin: 0 auto;
  padding: clamp(136px, 20svh, 176px) var(--site-gutter) clamp(28px, 5svh, 56px);
  color: var(--tt-text-color);
}

.site-hero-split-copy {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.site-hero-kicker-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tt-border-color);
  color: var(--tt-muted-color);
}

.site-hero-split .site-hero-title {
  padding-top: clamp(20px, 5svh, 48px);
  font-size: clamp(40px, min(6vw, 9.5svh), 96px);
  color: var(--tt-ink-color);
}

#page-header.site-hero-split .site-hero-lead {
  margin: clamp(16px, 3.5svh, 28px) 0 0;
}

.site-hero-split .site-hero-links {
  margin-top: clamp(20px, 4.5svh, 36px);
}

.site-hero-split .site-hero-link {
  color: var(--tt-muted-color);
}

.site-hero-split .site-hero-link:hover {
  color: var(--tt-ink-color);
}

.site-hero-split .site-hero-link-primary,
.site-hero-split .site-hero-link-primary:hover {
  color: #fff;
}

.site-hero-split .site-hero-link-primary {
  background-color: var(--tt-main-color);
}

.site-hero-split .site-hero-link-primary:hover {
  background-color: var(--tt-red-700);
}

.site-hero-split .site-hero-index {
  margin-top: auto;
  padding-top: clamp(24px, 5svh, 48px);
}

.site-hero-split .site-hero-index ol {
  gap: 10px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--tt-border-color);
}

.site-hero-split .site-hero-index a {
  color: var(--tt-ink-color);
}

.site-hero-split .site-hero-index a::before {
  color: var(--tt-muted-color);
}

.site-hero-split .site-hero-index a:hover {
  color: var(--tt-main-color);
}

.site-hero-split-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.site-hero-split-photo img {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
}

/* The theme's figcaption is a dark box over the photo; here it is a plain credit line under it. */
.site-hero-split-photo figcaption {
  position: static;
  max-width: none;
  margin: 0;
  padding: 12px 0 0;
  background-color: transparent;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--tt-muted-color);
  opacity: 1;
}

@media (max-width: 1024px) {
  #page-header.site-hero-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 0;
    min-height: 0;
    padding-top: 104px;
    padding-bottom: 0;
  }

  .site-hero-split-copy {
    min-height: 0;
    padding-top: 36px;
  }

  .site-hero-split-photo {
    order: -1;
    margin-inline: calc(-1 * var(--site-gutter));
  }

  .site-hero-split-photo img {
    flex: none;
    height: min(62svh, 75vw);
  }

  .site-hero-split-photo figcaption {
    padding-inline: var(--site-gutter);
  }

  .site-hero-split-copy {
    padding-bottom: 8px;
  }

  .site-hero-split .site-hero-index {
    padding-top: 44px;
  }

  .site-hero-split .site-hero-title {
    padding-top: 32px;
    font-size: clamp(44px, 11vw, 80px);
  }

  #page-header.site-hero-split .site-hero-lead {
    margin-top: 28px;
  }

  .site-hero-split .site-hero-links {
    margin-top: 36px;
  }
}

@media (max-width: 480px) {
  .site-hero-kicker-split span + span {
    display: none;
  }
}

/* Cover (course page and 404): the theme's ph-bg-image photo, darkened at the top (header), the left (title) and the
   bottom (strip) only, with the type at the bottom left and a strip along the bottom edge: on the course page the
   rating, the courses (each preselects itself in the signup form) and the share button, on the 404 a label and the
   services. */

#page-header.site-hero-cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 140px;
  color: var(--tt-on-image-color);
}

#page-header.site-hero-cover .ph-image-inner::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(19 17 17 / 45%) 0, rgb(19 17 17 / 0%) 22%),
    linear-gradient(90deg, rgb(19 17 17 / 50%) 0, rgb(19 17 17 / 0%) 60%),
    linear-gradient(180deg, rgb(19 17 17 / 0%) 45%, rgb(19 17 17 / 75%) 100%);
  content: '';
}

.site-hero-cover-copy {
  position: relative;
  z-index: 2;
  width: 100%;
}

.site-hero-cover .site-hero-kicker {
  opacity: 0.9;
}

.site-hero-cover .site-hero-title {
  max-width: 12ch;
  margin-top: 22px;
  font-size: clamp(48px, 8.2vw, 136px);
  color: var(--tt-on-image-color);
}

.site-hero-cover-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
  margin-top: 36px;
  padding-bottom: 40px;
}

#page-header.site-hero-cover .site-hero-lead {
  margin: 0;
  opacity: 0.92;
}

.site-hero-cover .site-hero-link {
  color: var(--tt-on-image-color);
  text-shadow: 0 1px 12px rgb(19 17 17 / 60%);
}

.site-hero-cover .site-hero-link-primary {
  background-color: var(--tt-on-image-color);
  color: var(--tt-ink-color);
  text-shadow: none;
}

.site-hero-cover .site-hero-link-primary:hover {
  background-color: var(--tt-main-color);
  color: #fff;
}

.site-hero-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px 40px;
  width: 100%;
  padding-top: 18px;
  padding-bottom: 22px;
}

.site-hero-strip::before {
  position: absolute;
  top: 0;
  left: var(--site-gutter);
  right: var(--site-gutter);
  height: 1px;
  background-color: rgb(255 255 255 / 35%);
  content: '';
}

.site-hero-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.site-hero-rating .site-stars {
  margin-left: 0;
}

.site-hero-strip-label {
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0.8;
}

.site-hero-strip .site-hero-index {
  margin-left: auto;
}

.site-hero-strip .site-hero-index ol {
  gap: 8px 32px;
}

.site-hero-strip .site-hero-index a {
  font-size: 15px;
  color: var(--tt-on-image-color);
}

.site-hero-strip .site-hero-index a::before {
  opacity: 0.65;
}

.site-hero-strip .site-hero-index small {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.75;
}

.site-hero-strip .site-hero-index a:hover small {
  opacity: 1;
}

#page-header.site-hero-cover .ph-share {
  position: relative;
  right: auto;
  bottom: auto;
  height: auto;
}

@media (max-width: 1024px) {
  .site-hero-cover-row {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 28px;
  }

  .site-hero-strip {
    flex-wrap: wrap;
  }

  .site-hero-strip .site-hero-index {
    order: -1;
    width: 100%;
    margin-left: 0;
  }

  .site-hero-strip-label {
    order: -2;
  }

  .site-hero-strip .site-hero-index ol {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .site-hero-cover .site-hero-kicker {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .site-hero-kicker-rule::before {
    width: 24px;
  }
}

/* Footer (Footer.astro), set like a magazine colophon on the alternate panel color: the hero's kicker over the name in
   the display face with the header's red Kontakt link beside it, then four columns under small tracked capitals
   (services numbered like the Storitve dropdown, pages, contact, social) and a one-line credits bar. It doesn't use the
   theme's #tt-footer, whose link colors are forced with !important. */

.site-footer {
  padding-top: clamp(56px, 7vw, 104px);
  background-color: var(--tt-alt-color);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tt-text-color);
}

.site-footer a {
  color: var(--tt-ink-color);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition:
    color 0.3s,
    text-decoration-color 0.3s;
}

.site-footer a:hover {
  color: var(--tt-main-color);
  text-decoration-color: currentcolor;
}

.site-footer-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--tt-border-color);
}

.site-footer .site-hero-kicker {
  margin: 0;
  color: var(--tt-muted-color);
}

.site-footer-title {
  margin: 20px 0 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(44px, 8.5vw, 124px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--tt-ink-color);
}

/* The hero's red full stop, drawn here because the name is an expression and Prettier puts a line break (a space)
   between it and a following span. */
.site-footer-title::after {
  content: '.';
  color: var(--tt-main-color);
}

.site-footer .site-footer-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-main-color);
  text-decoration-color: currentcolor;
}

.site-footer .site-footer-cta:hover {
  color: var(--tt-red-700);
}

.site-footer-cta::after {
  display: inline-block;
  margin-left: 8px;
  content: '→';
  letter-spacing: 0;
  transition: transform 0.3s;
}

.site-footer-cta:hover::after {
  transform: translateX(4px);
}

.site-footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  padding: clamp(40px, 5vw, 64px) 0;
}

.site-footer .site-footer-heading {
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-muted-color);
}

.site-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-list a {
  display: inline-block;
  padding: 5px 0;
  overflow-wrap: anywhere;
}

.site-footer-index {
  counter-reset: site-footer-index;
}

.site-footer-index li {
  counter-increment: site-footer-index;
}

.site-footer-index a::before {
  display: inline-block;
  width: 3ch;
  content: counter(site-footer-index, decimal-leading-zero);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tt-muted-color);
}

.site-footer-external::after {
  margin-left: 6px;
  content: '↗\FE0E';
  font-size: 0.85em;
}

.site-footer-address {
  margin: 12px 0 0;
  font-style: normal;
  color: var(--tt-muted-color);
}

.site-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--tt-border-color);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tt-muted-color);
}

.site-footer-colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.site-footer-bar a {
  color: var(--tt-muted-color);
}

.site-footer-bar a:hover {
  color: var(--tt-ink-color);
}

.site-footer-top {
  padding: 8px 0;
}

.site-footer-top::after {
  margin-left: 8px;
  content: '↑';
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  .site-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .site-footer-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer-bar {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .site-footer-colophon {
    flex-direction: column;
  }
}

/* Service pages (storitve/[slug].astro): the course page's cover hero, with the services as its index (the current one
   marked), then the description as a ruled standfirst, the photos as a captioned sequence (a full-width photo, then a
   pair), the process, the inquiry and the next service as one ruled row. */

.site-hero-strip .site-hero-index a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--tt-main-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-hero-service .site-hero-cover-row {
  justify-content: flex-start;
}

/* No rating on the left here, so the services index starts at the left edge and the share button keeps the right. */
.site-hero-service .site-hero-strip .site-hero-index {
  margin-right: auto;
  margin-left: 0;
}

.site-service-intro {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 20px clamp(32px, 5vw, 80px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--tt-border-color);
}

.site-service-intro .site-hero-kicker {
  margin: 0;
  color: var(--tt-muted-color);
}

.site-service-intro-text p {
  max-width: 38ch;
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--tt-ink-color);
  text-wrap: pretty;
}

.site-service-intro-text p + p {
  max-width: 56ch;
  margin-top: clamp(20px, 2vw, 28px);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--tt-text-color);
}

.site-service-photos {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.site-service-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 32px);
}

.site-service-row-wide {
  grid-template-columns: minmax(0, 1fr);
}

.site-service-photo {
  margin: 0;
}

.site-service-photo-link {
  display: block;
  overflow: hidden;
  background-color: var(--tt-surface-color);
}

.site-service-photo-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.site-service-photo-link:hover img {
  transform: scale(1.03);
}

/* Reset the theme's figcaption (a dark box over a photo) to a plain caption line under it. */
.site-service-photo .site-service-caption {
  position: static;
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: none;
  margin: 16px 0 0;
  padding: 0;
  background-color: transparent;
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  color: var(--tt-muted-color);
  opacity: 1;
}

.site-service-caption-number {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-service-next-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 360px);
  align-items: center;
  gap: 24px clamp(32px, 5vw, 80px);
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--tt-border-color);
  color: inherit;
}

.site-service-next-text .site-hero-kicker {
  margin: 0 0 20px;
  color: var(--tt-muted-color);
}

.site-service-next-title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 80px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--tt-ink-color);
  text-wrap: balance;
  transition: color 0.3s;
}

.site-service-next-title::after {
  display: inline-block;
  margin-left: 0.3em;
  content: '→';
  font-family: 'Poppins', sans-serif;
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tt-main-color);
  vertical-align: 0.15em;
  transition: transform 0.3s;
}

.site-service-next-number {
  display: block;
  margin-bottom: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-service-next-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--tt-surface-color);
}

.site-service-next-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.site-service-next-link:hover .site-service-next-title,
.site-service-next-link:focus-visible .site-service-next-title {
  color: var(--tt-main-color);
}

.site-service-next-link:hover .site-service-next-title::after {
  transform: translateX(6px);
}

.site-service-next-link:hover .site-service-next-photo img {
  transform: scale(1.04);
}

@media (max-width: 1024px) {
  .site-hero-service .site-hero-strip .site-hero-index ol {
    flex-direction: row;
    gap: 8px 24px;
  }
}

@media (max-width: 767px) {
  /* Service titles start with a long word ("Fotografiranje"), which at the cover's 48px minimum overran a phone. */
  .site-hero-service .site-hero-title {
    font-size: clamp(32px, 11.5vw, 56px);
  }

  .site-service-intro,
  .site-service-row,
  .site-service-next-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-service-next-photo {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-service-photo-link img,
  .site-service-next-title,
  .site-service-next-title::after,
  .site-service-next-photo img {
    transition: none;
  }
}

/* About page (o-meni): the homepage's split hero with the portrait and a facts strip at the foot of the text column,
   then the story as a long read in chapters (each a ruled row, the numbered label beside the text; the first
   paragraph in the display face, short beats set apart), a pull quote and the motto as the signature. The photos
   reuse the service page's captioned sequence, the repertoire the ProcessSteps rows and the references the homepage
   logo cells, on a plate that holds all 21 logos (7 columns, 3 below 1025px; revisit when the list changes). */

/* The facts make this text column taller than the homepage's, so on short desktop windows the copy sets the row
   height (the hero grows past the window) instead of overflowing it; the photo is taken out of flow to fill the
   row, so it never adds height itself. */
@media (min-width: 1025px) {
  #page-header.site-hero-about {
    grid-template-rows: auto;
  }

  .site-hero-about .site-hero-split-copy {
    min-height: auto;
  }

  .site-hero-about .site-hero-split-photo img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
}

.site-hero-about .site-hero-facts {
  column-gap: 24px;
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 0;
  border-bottom: 0;
}

.site-hero-about .site-hero-split-copy > .site-hero-links {
  margin-bottom: clamp(24px, 5svh, 48px);
}

.site-about-story {
  --site-about-gap: clamp(32px, 5vw, 80px);

  border-bottom: 1px solid var(--tt-border-color);
}

.site-about-chapter {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 16px var(--site-about-gap);
  padding: clamp(28px, 3.5vw, 48px) 0;
  border-top: 1px solid var(--tt-border-color);
}

/* Sticky (see the overflow: clip on #body-inner above), so a long chapter keeps its label in view. */
.site-about-chapter-label {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  color: var(--tt-ink-color);
}

.site-about-chapter-label span {
  color: var(--tt-main-color);
}

.site-about-text p {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

.site-about-text p + p {
  margin-top: 1.1em;
}

.site-about-text-first p:first-child {
  max-width: 34ch;
  margin-bottom: clamp(8px, 1vw, 16px);
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--tt-ink-color);
}

.site-about-text .site-about-beat {
  font-family: 'Syne', sans-serif;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tt-ink-color);
}

.site-about-pull,
.site-about-motto blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Syne', sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--tt-ink-color);
  text-wrap: balance;
}

.site-about-pull {
  max-width: 24ch;
  /* Lines up with the chapters' text column. */
  margin-left: calc((100% - var(--site-about-gap)) / 3 + var(--site-about-gap));
  padding: clamp(36px, 5vw, 72px) 0;
  border-top: 1px solid var(--tt-ink-color);
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
}

.site-about-pull p,
.site-about-motto blockquote p {
  margin: 0;
}

/* Inline Slovene quote marks in red, as in the homepage course quote. */
.site-about-pull p::before,
.site-about-motto blockquote p::before {
  content: '»';
  color: var(--tt-main-color);
}

.site-about-pull p::after,
.site-about-motto blockquote p::after {
  content: '«';
  color: var(--tt-main-color);
}

.site-about-motto {
  margin: 0;
  padding: clamp(48px, 7vw, 112px) 0;
  border-top: 1px solid var(--tt-border-color);
  text-align: center;
}

.site-about-motto blockquote {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(40px, 6.4vw, 104px);
  line-height: 0.98;
}

/* Reset the theme's figcaption (a dark box over a photo) to a plain credit line. */
.site-about-motto figcaption {
  position: static;
  max-width: none;
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  padding: 0;
  background-color: transparent;
  font-style: normal;
  color: var(--tt-muted-color);
  opacity: 1;
}

.site-steps .site-about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 16px;
}

/* The cells carry the page background over the plate's border color, so the 1px gaps draw the rules between them
   (and multiply blends each logo against the page, as on the homepage). */
.site-about-clients {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px 0;
  list-style: none;
  background-color: var(--tt-border-color);
}

.site-about-clients .site-clients-item {
  min-height: clamp(150px, 13vw, 190px);
  padding: 24px 12px 16px;
  border: 0;
}

.site-about-clients .site-clients-item img {
  width: calc(clamp(48px, 4.8vw, 70px) * var(--logo-scale, 1));
  max-width: 80%;
}

@media (max-width: 1024px) {
  .site-about-clients {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-about-clients .site-clients-item img {
    width: calc(clamp(44px, 9vw, 72px) * var(--logo-scale, 1));
  }

  .site-about-pull {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .site-about-chapter {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-about-chapter-label {
    position: static;
  }

  .site-about-clients .site-clients-item {
    min-height: 132px;
    padding: 20px 8px 12px;
  }

  .site-about-clients .site-clients-name {
    font-size: 10px;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }
}

/* Blog list (blog/index.astro): the type-only header with the topics and the search as its ruled strip (the current
   topic underlined in red), then the newest post as a feature on the first unfiltered page, the rest as numbered,
   ruled rows (the whole row one link, the photo on alternating sides, above the text on phones) and the pages as a
   ruled row of small-caps links. */

.site-blog-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: end;
  gap: 24px clamp(24px, 4vw, 64px);
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--tt-ink-color);
  border-bottom: 1px solid var(--tt-border-color);
}

.site-blog-search:only-child {
  grid-column: 2;
}

.site-blog-filters .site-hero-kicker {
  display: block;
  margin: 0 0 8px;
  color: var(--tt-muted-color);
}

.site-blog-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-blog-tags a {
  display: inline-block;
  padding: 6px 0;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tt-ink-color);
  transition: color 0.3s;
}

.site-blog-tags a:hover {
  color: var(--tt-main-color);
}

.site-blog-tags a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--tt-main-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-blog-search-field {
  position: relative;
}

.site-blog-search .site-form-control {
  padding-right: 52px;
}

.site-blog-search .site-form-control::-webkit-search-cancel-button {
  display: none;
}

.site-blog-search-submit {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tt-ink-color);
  cursor: pointer;
  transition: color 0.3s;
}

.site-blog-search-submit:hover {
  color: var(--tt-main-color);
}

.site-blog-search-submit:focus-visible {
  outline: 2px solid var(--tt-main-color);
  outline-offset: -2px;
}

#page-header .site-blog-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--tt-muted-color);
}

.site-blog-status a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-main-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Shared by the feature and the rows. */
.site-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 18px;
  color: var(--tt-muted-color);
}

.site-blog-number {
  color: var(--tt-main-color);
}

.site-blog-excerpt {
  max-width: 52ch;
  margin: 18px 0 0;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

.site-blog-tagline {
  margin: 18px 0 0;
  color: var(--tt-muted-color);
}

.site-blog-more {
  display: inline-block;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-main-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.site-blog-more::after {
  display: inline-block;
  margin-left: 10px;
  content: '→';
  letter-spacing: 0;
  transition: transform 0.3s;
}

.site-blog-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--tt-surface-color);
}

.site-blog-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.site-blog-lead-link,
.site-blog-link {
  display: grid;
  align-items: center;
  gap: 24px clamp(32px, 5vw, 80px);
  color: inherit;
}

.site-blog-lead-link:hover .site-blog-more::after,
.site-blog-link:hover .site-blog-more::after {
  transform: translateX(4px);
}

.site-blog-lead-link:hover .site-blog-photo img,
.site-blog-link:hover .site-blog-photo img {
  transform: scale(1.04);
}

.site-blog-lead-link:hover :is(.site-blog-lead-title, .site-blog-title),
.site-blog-lead-link:focus-visible :is(.site-blog-lead-title, .site-blog-title),
.site-blog-link:hover .site-blog-title,
.site-blog-link:focus-visible .site-blog-title {
  color: var(--tt-main-color);
}

.site-blog-lead {
  padding-bottom: clamp(40px, 5vw, 72px);
}

.site-blog-lead-link {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.site-blog-lead-title {
  margin: 0;
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--tt-ink-color);
  text-wrap: balance;
  transition: color 0.3s;
}

.site-blog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-blog-item {
  border-top: 1px solid var(--tt-border-color);
}

.site-blog-lead + .site-blog-list .site-blog-item:first-child {
  border-top-color: var(--tt-ink-color);
}

.site-blog-link {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  padding: clamp(28px, 4vw, 56px) 0;
}

.site-blog-item:nth-child(even) .site-blog-link {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.site-blog-item:nth-child(even) .site-blog-photo {
  order: -1;
}

.site-blog-lead-link.no-photo,
.site-blog-link.no-photo,
.site-blog-item:nth-child(even) .site-blog-link.no-photo {
  grid-template-columns: minmax(0, 1fr);
}

.site-blog-title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tt-ink-color);
  text-wrap: balance;
  transition: color 0.3s;
}

.site-blog-pagin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 56px);
}

.site-blog-pagin a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-ink-color);
  transition: color 0.3s;
}

.site-blog-pagin a:hover {
  color: var(--tt-main-color);
}

.site-blog-pagin-prev a::before {
  margin-right: 10px;
  content: '←';
  letter-spacing: 0;
  color: var(--tt-main-color);
}

.site-blog-pagin-next {
  text-align: right;
}

.site-blog-pagin-next a::after {
  margin-left: 10px;
  content: '→';
  letter-spacing: 0;
  color: var(--tt-main-color);
}

.site-blog-pagin-numbers {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-blog-pagin-numbers a {
  justify-content: center;
  min-width: 44px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tt-muted-color);
}

.site-blog-pagin-numbers a[aria-current='page'] {
  color: var(--tt-ink-color);
  text-decoration: underline;
  text-decoration-color: var(--tt-main-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-blog-empty {
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--tt-ink-color);
}

.site-blog-empty .site-hero-kicker {
  margin: 0 0 16px;
  color: var(--tt-muted-color);
}

.site-blog-empty-title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tt-ink-color);
  text-wrap: balance;
}

.site-blog-empty-title::after {
  content: '.';
  color: var(--tt-main-color);
}

@media (max-width: 1024px) {
  .site-blog-lead-link {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .site-blog-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-blog-search:only-child {
    grid-column: auto;
  }

  .site-blog-link,
  .site-blog-item:nth-child(even) .site-blog-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-blog-photo,
  .site-blog-item:nth-child(even) .site-blog-photo {
    order: -1;
  }

  .site-blog-pagin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-blog-pagin-numbers {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-blog-photo img,
  .site-blog-more::after {
    transition: none;
  }
}

/* Blog post (blog/[slug].astro): the service page's cover hero over the post's photo (the type-only header without
   one), with the date, the topics and the share button as its strip. Then the post as a long read: sticky facts beside
   a text column (the first paragraph in the display face, headings in it, photos wider than the text with numbered
   captions, quotes as pull quotes with red guillemets), the topics and share links as a ruled row, the inquiry, and
   the newer and older post as rows of the blog list. */

.site-hero-post .site-hero-kicker a {
  font-style: normal;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.site-hero-post .site-hero-kicker a:hover {
  color: var(--tt-main-color);
}

#page-header.site-hero-post .site-hero-title {
  max-width: 18ch;
}

/* Post titles run longer than service titles, so the cover title steps down. */
.site-hero-cover.site-hero-post .site-hero-title {
  font-size: clamp(40px, 6.4vw, 104px);
}

.site-hero-type.site-hero-post .site-hero-title {
  font-size: clamp(40px, 6.4vw, 104px);
}

/* The red mark is drawn here, as in the InquiryCta title. */
.site-hero-post-title::after {
  content: attr(data-mark);
  color: var(--tt-main-color);
}

.site-hero-post.site-hero-cover .site-hero-post-copy {
  padding-bottom: 40px;
}

.site-hero-post-date {
  margin: 0;
  white-space: nowrap;
}

.site-hero-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}

.site-hero-post-tags a {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  transition: color 0.3s;
}

.site-hero-post-tags a:hover {
  color: var(--tt-main-color);
}

.site-hero-post-date + .ph-share {
  margin-left: auto;
}

#page-header.site-hero-post .ph-share {
  position: relative;
  right: auto;
  bottom: auto;
  height: auto;
}

/* Type-only header: the strip sits on the page under an ink rule, like the blog list's topics. */
.site-hero-type.site-hero-post .site-hero-strip {
  margin-top: clamp(40px, 5vw, 72px);
  padding-right: 0;
  padding-left: 0;
  border-top: 1px solid var(--tt-ink-color);
  border-bottom: 1px solid var(--tt-border-color);
  color: var(--tt-ink-color);
}

.site-hero-type.site-hero-post .site-hero-strip::before {
  display: none;
}

.site-hero-type.site-hero-post .site-hero-post-date {
  color: var(--tt-muted-color);
}

.site-post {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: start;
}

/* Sticky (see the overflow: clip on #body-inner above), so the facts stay beside a long post. */
.site-post-aside {
  position: sticky;
  top: 120px;
}

.site-post-facts {
  margin: 0;
  border-top: 1px solid var(--tt-ink-color);
}

.site-post-facts > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--tt-border-color);
}

.site-post-facts dt {
  margin-bottom: 4px;
  color: var(--tt-muted-color);
}

.site-post-facts dd {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--tt-ink-color);
}

.site-post-facts a,
.site-post-end-tags a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tt-border-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition:
    color 0.3s,
    text-decoration-color 0.3s;
}

.site-post-facts a:hover,
.site-post-end-tags a:hover {
  color: var(--tt-main-color);
  text-decoration-color: var(--tt-main-color);
}

.site-post-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-ink-color);
  transition: color 0.3s;
}

.site-post-back::before {
  margin-right: 10px;
  content: '←';
  letter-spacing: 0;
  color: var(--tt-main-color);
}

.site-post-back:hover {
  color: var(--tt-main-color);
}

.site-post-body {
  counter-reset: site-post-figure;
}

.site-post-body > * {
  max-width: 62ch;
  margin-top: 0;
  margin-bottom: 0;
}

.site-post-body > * + * {
  margin-top: 1.2em;
}

.site-post-body p,
.site-post-body li {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--tt-text-color);
  text-wrap: pretty;
}

.site-post-body .site-post-lead {
  max-width: 34ch;
  margin-bottom: clamp(16px, 2vw, 28px);
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--tt-ink-color);
}

.site-post-body :is(h2, h3, h4) {
  max-width: 28ch;
  font-weight: 700;
  color: var(--tt-ink-color);
  text-wrap: balance;
}

.site-post-body > :is(h2, h3, h4):not(:first-child) {
  margin-top: clamp(40px, 4.5vw, 64px);
}

.site-post-body > :is(h2, h3, h4) + * {
  margin-top: 0.8em;
}

.site-post-body h2 {
  padding-top: 20px;
  border-top: 1px solid var(--tt-border-color);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.site-post-body h3 {
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.site-post-body h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-post-body :is(ul, ol) {
  padding-left: 1.4em;
}

.site-post-body li + li {
  margin-top: 0.4em;
}

.site-post-body li::marker {
  color: var(--tt-main-color);
}

.site-post-body p a,
.site-post-body li a {
  color: var(--tt-ink-color);
  text-decoration: underline;
  text-decoration-color: var(--tt-main-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.3s;
}

.site-post-body p a:hover,
.site-post-body li a:hover {
  color: var(--tt-main-color);
}

/* Photos take the column's full width, wider than the text; portraits are capped at the window's height. */
.site-post-body > .site-post-figure {
  max-width: none;
  margin-top: clamp(32px, 4vw, 56px);
  margin-bottom: clamp(16px, 2vw, 24px);
  counter-increment: site-post-figure;
}

.site-post-figure-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--tt-surface-color);
  vertical-align: top;
}

.site-post-figure-link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 85svh;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.site-post-figure-link:hover img {
  transform: scale(1.03);
}

/* Reset the theme's figcaption (a dark box over a photo) to a plain caption line under it, numbered in red. */
.site-post-figure .site-post-caption {
  position: static;
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: 62ch;
  margin: 16px 0 0;
  padding: 0;
  background-color: transparent;
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  color: var(--tt-muted-color);
  opacity: 1;
}

.site-post-caption::before {
  flex: none;
  content: counter(site-post-figure, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tt-main-color);
}

.site-post-body > .site-post-quote {
  max-width: 22ch;
  margin-top: clamp(36px, 4vw, 56px);
  margin-bottom: clamp(16px, 2vw, 24px);
  padding: clamp(24px, 3vw, 40px) 0 0;
  border: 0;
  border-top: 1px solid var(--tt-ink-color);
  font-family: 'Syne', sans-serif;
  font-size: clamp(26px, 3vw, 44px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--tt-ink-color);
  text-wrap: balance;
}

/* Inline Slovene quote marks in red, as on /o-meni. */
.site-post-quote::before {
  content: '»';
  color: var(--tt-main-color);
}

.site-post-quote::after {
  content: '«';
  color: var(--tt-main-color);
}

.site-post-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px clamp(32px, 5vw, 80px);
  margin-top: clamp(48px, 5vw, 72px);
  padding: 18px 0;
  border-top: 1px solid var(--tt-ink-color);
  border-bottom: 1px solid var(--tt-border-color);
}

.site-post-end .site-hero-kicker {
  margin: 0 0 8px;
  color: var(--tt-muted-color);
}

.site-post-end-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-post-end-tags a {
  display: inline-block;
  padding: 6px 0;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.site-post-end-share .social-buttons ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-post-end-share .social-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tt-ink-color);
  transition: color 0.3s;
}

.site-post-end-share .social-buttons li:first-child a {
  justify-content: flex-start;
}

.site-post-end-share .social-buttons a:hover {
  color: var(--tt-main-color);
}

/* The inquiry after it opens with its own rule. */
.site-post-more .site-blog-list {
  border-bottom: 0;
}

.site-post-more-kicker {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  color: var(--tt-muted-color);
}

@media (max-width: 1024px) {
  .site-post {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-post-aside {
    position: static;
  }

  .site-post-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    border-bottom: 1px solid var(--tt-border-color);
  }

  .site-post-facts > div {
    border-bottom: 0;
  }

  .site-post-back {
    display: none;
  }

  .site-hero-post .site-hero-strip .site-hero-post-tags {
    order: 0;
    width: auto;
  }
}

@media (max-width: 767px) {
  .site-hero-cover.site-hero-post .site-hero-title,
  .site-hero-type.site-hero-post .site-hero-title {
    font-size: clamp(32px, 9.6vw, 56px);
  }

  .site-hero-post-tags {
    order: -1;
    width: 100%;
  }

  .site-post-facts dd {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-post-figure-link img {
    transition: none;
  }
}