/* =============================================
   BASE
   Custom properties, reset, typography base,
   font imports.
   ============================================= */

@font-face {
  font-family: 'August Script';
  src: url('../fonts/august.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* The script comma is barely larger than its full stop. This face serves
   only U+002C, from the same file, scaled up so it reads as a comma. */
@font-face {
  font-family: 'August Script';
  src: url('../fonts/august.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+002C;
  size-adjust: 180%;
}

@font-face {
  font-family: 'Noto Serif Display';
  src: url('../fonts/noto.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* --- Custom Properties --- */
:root {
  /* --- Colors from style guide - must use --- */
  --color-parchment:  #eeebe7;
  --color-blush:      #e7d8c4;
  --color-sand:       #e0ba99;
  --color-clay:       #ba9174;
  --color-terracotta: #ba9174;
  --color-caramel:    #a36637;
  --color-charcoal:   #474646;
  /* --- Additional colors --- */
  --color-bark:       #473D2B;
  --color-sage:       #6A705D;
  --color-obsidian:   #191919;
  --color-white:      #ffffff;

  /* Near-white surface: parchment lifted toward white. Global page/card
     canvas for the editorial subpages (About chapters, team, services). */
  --abt-surface: color-mix(in oklch, white 82%, var(--color-parchment));

  --font-serif:  'Noto Serif Display', Georgia, serif;
  --font-sans:   'Red Hat Display', system-ui, sans-serif;
  --font-script: 'August Script', cursive;

  /* --- Type scale ---
     Single source of truth for every font-size on the site. A heading, a
     paragraph or a label of the same role uses the same token on every page —
     never a hand-written clamp() or a raw px value.
     Three things are deliberately exempt and keep explicit values: icon glyph
     sizes, the .site-nav__brand wordmark, and third-party widget CSS. */
  --fs-h1:        clamp(2.25rem, 4vw, 3.5rem);     /* statement headings */
  --fs-h2:        clamp(1.9rem, 3vw, 2.9rem);      /* section titles */
  --fs-h2-sm:     clamp(1.6rem, 2.4vw, 2.3rem);    /* lead article headline */
  --fs-h3:        clamp(1.2rem, 1.8vw, 1.55rem);   /* card headlines */
  --fs-h4:        clamp(1.05rem, 1.4vw, 1.3rem);   /* small card titles, names */

  --fs-script-lg: clamp(2.25rem, 5.5vw, 4.5rem);   /* script display lines */
  --fs-script-md: clamp(1.9rem, 4.25vw, 3.5rem);   /* script strip lines */
  --fs-script:    clamp(1.6rem, 3vw, 2.5rem);      /* script sign-off lines */

  --fs-quote:     clamp(1.375rem, 2.5vw, 2rem);      /* pullquotes */
  --fs-lead:      clamp(1.05rem, 1.4vw, 1.1875rem);
  --fs-body:      1rem;
  --fs-body-sm:   0.9375rem;
  --fs-label:     0.8125rem;
  --fs-label-sm:  0.75rem;

  /* --- Motion ---
     Reveals are deliberately slow: a section must still be arriving as
     the reader reaches it. See assets/js/reveal.js for the trigger point. */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --anim-quick:   1200ms;
  --anim-base:    1800ms;
  --anim-slow:    2400ms;
  --anim-stagger: 220ms;
  --anim-veil:    600ms;    /* page loader fade-out */

  --radius-sm: 2px;
  --radius-md: 4px;

  /* Every portrait clip in assets/videos is 1080×1620. A frame that holds one
     takes this ratio instead of its photo crop, so the clip is never cut. */
  --ratio-video: 2 / 3;

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  120px;

  --nav-height: 64px;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
  touch-action: pan-x pan-y; /* no pinch / double-tap zoom on mobile */
}

html.fonts-loading {
  visibility: hidden;
}

/* Load-time entrance animations (the hero) would otherwise run out their
   whole duration while the document is still hidden above, and the page
   would fade in already settled. Holding them at frame 0 until the gate
   lifts is what makes the first block of the page actually animate.
   Scroll-triggered reveals solve the same problem in JS -- see reveal.js.

   The gate lifts in two beats (header.php): `page-shown` makes the document
   visible and starts the loader fading; `fonts-ready` follows once the veil
   has cleared and a frame has actually been painted. Motion is held until
   the second beat -- on a phone the first paint of a freshly un-hidden page
   is slow enough that anything started at the first beat had already
   played out under the veil. */
html:not(.fonts-ready) * {
  animation-play-state: paused !important;
}

html.page-shown {
  visibility: visible;
}

/* ---- Page loader ----
   Sits over the whole document while the gate in header.php waits for the
   webfonts and for every <video> on the page to buffer. It must escape both
   halves of the gate above: forced visible, and its own animations kept
   running. Fades out the moment the gate lifts, so the first reveals start
   underneath it. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background-color: var(--color-parchment);
  visibility: visible;
  opacity: 1;
  transition: opacity var(--anim-veil) ease-out, visibility 0s linear var(--anim-veil);
}

html:not(.fonts-ready) .page-loader,
html:not(.fonts-ready) .page-loader * {
  animation-play-state: running !important;
}

.page-loader__logo {
  width: clamp(120px, 14vw, 180px);
  height: auto;
  animation: page-loader-breathe var(--anim-slow) ease-in-out infinite;
}

.page-loader__bar {
  position: relative;
  display: block;
  width: clamp(120px, 14vw, 180px);
  height: 1px;
  background-color: color-mix(in oklch, var(--color-clay) 30%, transparent);
  overflow: hidden;
}

.page-loader__bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background-color: var(--color-terracotta);
  animation: page-loader-sweep var(--anim-base) var(--ease-spring) infinite;
}

html.page-shown .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes page-loader-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes page-loader-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__logo,
  .page-loader__bar::after {
    animation: none;
  }
  .page-loader__bar::after {
    width: 100%;
  }
}

body {
  overflow-x: clip;
  background-color: var(--color-parchment);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Editorial body copy ---
   Every paragraph-length text on the site justifies the same way. Automatic
   hyphenation is off on purpose: with lang="hu" the browser breaks words
   aggressively and the hyphens read as noise at these measures. `text-wrap:
   pretty` and the 65ch cap keep the word gaps from opening up in exchange. */
.text-body,
.abt-lead p,
.about-story__body,
.about-philosophy__body,
.about-pair__body,
.services-intro,
.client-voices__excerpt p,
.news-detail__lede,
.news-detail__paragraph,
.news-detail__content p,
.news-card__excerpt,
.news-listing__excerpt,
.news-listing__item-excerpt,
.about-team__header-intro,
.about-team__member-bio,
.stories-card__text,
.prop-rail-card__excerpt,
.pd-info__desc p,
.pd-contact__sub,
.privacy__lede,
.privacy__p {
  text-align: justify;
  hyphens: manual;
  text-wrap: pretty;
  overflow-wrap: break-word;
  max-width: 65ch;
}

/* --- Centred headings ---
   Centred display lines look untidy when the last line is a single orphan
   word. `balance` evens the line lengths out; it only applies to short
   blocks, so it is safe to set broadly on headings. */
.slogan-band__heading,
.news-section__label,
.page-banner__heading,
.client-voices__heading,
.newsletter-heading,
.hero-banner__title,
.se-wide__head .se-title,
.se-wide__head .se-script,
.team-member__name,
.abt-team__script {
  text-wrap: balance;
}

/* --- Headings inside admin rich text ---
   The TinyMCE editor offers h2 / h3 (see admin RichEditor.jsx). They land in
   the article, property and reference bodies with no class of their own. */
.news-detail__content h2,
.news-detail__content h3,
.pd-info__desc h2:not(.pd-info__heading),
.pd-info__desc h3,
.rd-intro__body h2,
.rd-intro__body h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-charcoal);
  max-width: 65ch;
  margin: clamp(28px, 4vh, 44px) 0 clamp(12px, 2vh, 20px);
  text-wrap: balance;
}

.news-detail__content h2,
.pd-info__desc h2:not(.pd-info__heading),
.rd-intro__body h2 {
  font-size: var(--fs-h3);
}

.news-detail__content h3,
.pd-info__desc h3,
.rd-intro__body h3 {
  font-size: var(--fs-h3);
}

/* --- Links inside admin rich text ---
   The global `a` reset (colour inherit, no underline) made links typed in
   the editor invisible. Terracotta with a hairline underline, like the CTAs. */
.news-detail__content a,
.pd-info__desc a,
.rd-intro__body a {
  color: var(--color-terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, var(--color-terracotta) 45%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease-out;
}

.news-detail__content a:hover,
.pd-info__desc a:hover,
.rd-intro__body a:hover {
  text-decoration-color: var(--color-terracotta);
}

/* --- Bold inside admin rich text ---
   TinyMCE's B button writes <strong>. It stays in the text colour and uses
   600, the heaviest Red Hat Display weight the site loads — the same weight
   the editor shows (RichEditor.jsx content_style). */
.news-detail__content strong,
.news-detail__content b,
.pd-info__desc strong,
.pd-info__desc b,
.rd-intro__body strong,
.rd-intro__body b {
  font-weight: 600;
  color: inherit;
}