/* TelchinDomus landing page. Brand values: telchin_domus/brandbook/telchindomus_brandbook.md
   (palette, Forum headings in caps with wide tracking, Inter body). Fonts are self-hosted subsets
   (Latin + Latin Extended-A for Polish), no third-party requests. */

/* Forum with digits raised to the capital height (tools/make_forum_td_font.py); renamed per Forum's OFL
   Reserved Font Name. */
@font-face {
  font-family: "Forum TD";
  src: url("../fonts/ForumTD-latin-ext.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Buttons: Cormorant Garamond Bold (tools/make_button_font.py: static 700 instance of the variable font,
   autohinted -- variable fonts ship unhinted and looked blurry on standard-DPI screens -- then subset;
   OFL, no Reserved Font Name). Has real lining figures (lnum). Chosen over Forum (too thin) and Marcellus
   (its A apex rounded to an extra pixel row), 2026-10-07. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Bold-latin-ext.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-ext.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --td-seafoam: #7DA499;
  --td-slate: #27555A;
  --td-lavender: #A999B5;
  --td-gold: #D2AF6D;
  --td-parchment: #F8F6EF;
  --td-ink: #1E2D2F;
  --td-muted: #4A5E60;
  --td-tint: #F1EEE3;

  --font-serif: "Forum TD", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-button: "Cormorant Garamond", "Forum TD", Georgia, serif;

  --container: 1120px;
  --gutter: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--td-parchment);
  color: var(--td-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--td-slate);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: 760px;
}

/* --- Headings: Forum, caps, tracked --- */

h1,
h2,
h3,
.wordmark,
.eyebrow,
.site-nav a,
.button {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--td-slate);
}

h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.08em;
  color: var(--td-slate);
}

h3 {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--td-slate);
}

.gold-rule {
  display: block;
  width: 80px;
  height: 2px;
  margin: 1.2rem 0 1.4rem;
  background: var(--td-gold);
}

.eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--td-muted);
}

.lead {
  margin: 0;
  max-width: 34em;
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--td-muted);
}

/* --- Header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(248, 246, 239, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(210, 175, 109, 0.35);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 80px;
  flex-wrap: wrap;
}

.wordmark {
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: var(--td-slate);
  text-decoration: none;
}

.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.seal {
  width: 64px;
  height: 64px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.site-nav a {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--td-slate);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--td-ink);
  text-decoration: underline;
  text-decoration-color: var(--td-gold);
  text-underline-offset: 6px;
}

/* --- Hero: the render background's waves behind the text and image --- */

.hero {
  background: url("../images/waves.svg") center / cover no-repeat;
  padding: clamp(3rem, 8vw, 6.5rem) 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero-image {
  margin: 0;
}

.hero-image img {
  width: 100%;
}

/* Soft edges: every picture fades to transparent over --feather on all four sides (two linear masks,
   intersected), so crops of the renders blend into the section behind them. The crops leave at least
   that much background around the subject. */
.hero-image img,
.gallery img {
  --feather: 9%;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  mask-composite: intersect;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--td-slate);
  border-radius: 2px;
  font-family: var(--font-button);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  /* Cormorant's capitals are small (cap height 0.625 em): 1.15rem gives ~11.5 px caps. */
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.button-primary {
  background: var(--td-slate);
  color: var(--td-parchment);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--td-ink);
}

.button-secondary {
  color: var(--td-slate);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(39, 85, 90, 0.08);
}

/* --- Sections --- */

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.section-tinted {
  background: var(--td-tint);
}

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.pillar p {
  margin: 0;
  color: var(--td-muted);
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%;
}

.gallery figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--td-muted);
}

.centred {
  text-align: center;
}

.centred .lead {
  margin: 0 auto;
}

.gold-rule-centred {
  margin-left: auto;
  margin-right: auto;
}

.actions-centred {
  justify-content: center;
}

/* --- Footer --- */

.site-footer {
  border-top: 1px solid rgba(210, 175, 109, 0.35);
  padding: 2rem 0;
  font-size: 0.9rem;
  color: var(--td-muted);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.site-footer .wordmark {
  font-size: 1rem;
}

/* --- Wider screens --- */

@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: 5fr 6fr;
  }

  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}