/* ==========================================================
   ARTUR MACCAGNAN — Personal Portfolio
   style.css

   Aesthetic: Shadow Jazz world
   Nocturnal, dreamlike, synesthetic.
   The space between a dining room and a lake beneath stars.
   ========================================================== */


/* ----------------------------------------------------------
   1. FONTS
   ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');


/* ----------------------------------------------------------
   2. DESIGN TOKENS
   ---------------------------------------------------------- */

:root {
  --color-bg:           #0c0b12;
  --color-bg-surface:   #13111f;
  --color-bg-card:      #1a1729;
  --color-bg-hover:     #221f35;

  --color-accent:       #3b6b8a;
  --color-accent-light: #5a9ab5;
  --color-accent-glow:  #2a4d64;

  --color-purple:       #5c4a7a;
  --color-purple-light: #7d6ba0;

  --color-text-primary:   #e8e2d5;
  --color-text-secondary: #9a9188;
  --color-text-faint:     #4e4a55;
  --color-text-accent:    #7ab8d4;

  --color-border:        rgba(255, 255, 255, 0.07);
  --color-border-accent: rgba(90, 154, 181, 0.25);

  --font-title: 'Cormorant Garamond', Georgia, serif;
  --font-body:  'DM Sans', system-ui, sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  --transition-slow: 0.5s ease;
  --transition-mid:  0.3s ease;
  --transition-fast: 0.15s ease;
}


/* ----------------------------------------------------------
   3. RESET & BASE
   ---------------------------------------------------------- */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.8;
  min-height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

::selection {
  background-color: var(--color-accent-glow);
  color: var(--color-text-accent);
}


/* ----------------------------------------------------------
   4. TYPOGRAPHY
   ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.05em;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-text-primary);
  margin-bottom: 1.2em;
  max-width: 68ch;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

em {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.05em;
  color: var(--color-text-secondary);
}

blockquote {
  border-left: 1px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
}

blockquote p {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.6;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

blockquote footer {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.75rem;
}

ul {
  list-style: none;
  padding: 0;
}

main ul li {
  padding: 0.3rem 0;
  padding-left: 1.4em;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  position: relative;
  text-align: left;
}

main ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-family: var(--font-title);
}

time {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  text-transform: uppercase;
}

span {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  text-transform: uppercase;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}


/* ----------------------------------------------------------
   5. LINKS
   ---------------------------------------------------------- */

a {
  color: var(--color-text-accent);
  text-decoration: none;
  transition: color var(--transition-mid), opacity var(--transition-mid);
}

a:hover {
  color: var(--color-accent-light);
  opacity: 0.85;
}

article a {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-accent-glow);
  padding-bottom: 1px;
  transition: border-color var(--transition-mid), color var(--transition-mid);
}

article a:hover {
  border-color: var(--color-accent-light);
  color: var(--color-accent-light);
}


/* ----------------------------------------------------------
   6. LAYOUT
   ---------------------------------------------------------- */

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
}

header  { grid-area: header; }
nav     { grid-area: nav; }
main    { grid-area: main; }
footer  { grid-area: footer; }


/* ----------------------------------------------------------
   7. HEADER
   ---------------------------------------------------------- */

header {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  height: 60vw;
  background: radial-gradient(ellipse at center, rgba(59, 107, 138, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

header h1 {
  position: relative;
  margin-bottom: 0.5rem;
}

/* Subtitle — centered, warmer, more legible */
header > p {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.05rem;
  color: #b8afa4;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;      /* explicitly centered */
  max-width: none;
  margin: 0 auto;          /* centered within grid */
  line-height: 1.6;
}


/* ----------------------------------------------------------
   8. NAVIGATION
   ---------------------------------------------------------- */

nav {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

nav ul {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  padding: 1.2rem var(--space-md);
  flex-wrap: wrap;
}

nav ul li::before { display: none; }
nav ul li { padding: 0; }

nav a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--transition-mid);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}

nav a:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
  opacity: 1;
}

nav a.active {
  color: var(--color-text-accent);
  border-bottom-color: var(--color-accent);
}


/* ----------------------------------------------------------
   9. MAIN CONTENT
   ---------------------------------------------------------- */

main {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  width: 100%;
}

main section {
  margin-bottom: var(--space-xl);
}

main section:first-child {
  margin-top: 0;
}


/* ----------------------------------------------------------
   10. HOMEPAGE — Hero
   ---------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero figure {
  margin: 0 0 var(--space-md) 0;
  width: 100%;
  max-width: 640px;
}

.hero figure img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(10%) contrast(1.05);
  border: 1px solid var(--color-border-accent);
  display: block;
  margin: 0 auto;
}

.hero figcaption {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  margin-top: 0.6rem;
  text-align: center;
}

.hero-quote {
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  text-align: center;
}

.hero-quote p {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.5;
  text-align: center;
  hyphens: none;
  -webkit-hyphens: none;
  max-width: 52ch;
  margin: 0 auto;
}

/* General figure fallback */
figure {
  margin: var(--space-md) 0;
  text-align: center;
}

figure img {
  max-width: 100%;
  width: 320px;
  height: 400px;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(20%) contrast(1.05);
  border: 1px solid var(--color-border-accent);
  display: block;
  margin: 0 auto;
}

figcaption {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  margin-top: 0.75rem;
  text-align: center;
}


/* ----------------------------------------------------------
   11. WRITING INDEX — Article Cards
   Image on top, then tag / title / preview / read link
   ---------------------------------------------------------- */

.article-card {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  transition: border-color var(--transition-slow);
}

.article-card:hover {
  border-top-color: var(--color-accent-glow);
}

/* Cover image — full width, fixed height, desaturated */
.card-cover {
  margin: 0 0 var(--space-sm) 0;
  text-align: left;
  width: 100%;
}

.card-cover img {
  width: 100%;
  max-width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  filter: grayscale(25%) contrast(1.05);
  border: 1px solid var(--color-border-accent);
  display: block;
  margin: 0;
  transition: filter var(--transition-slow);
}

.article-card:hover .card-cover img {
  filter: grayscale(0%) contrast(1.05);
}

/* Card image link — no underline styling */
.article-card > a {
  border-bottom: none;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.card-body {
  padding: 0;
}

.card-meta {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-align: left;
  hyphens: none;
  max-width: none;
}

.article-card h3 {
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

/* Title link — inherits heading style */
.article-card h3 a {
  color: var(--color-text-primary);
  font-family: var(--font-title);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-bottom: none;
  text-transform: none;
  transition: color var(--transition-mid);
}

.article-card h3 a:hover {
  color: var(--color-text-accent);
  opacity: 1;
}

.card-preview {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  text-align: justify;
}

.read-more {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-accent);
  border-bottom: 1px solid var(--color-accent-glow);
  padding-bottom: 1px;
  transition: color var(--transition-mid), border-color var(--transition-mid);
}

.read-more:hover {
  color: var(--color-accent-light);
  border-color: var(--color-accent-light);
  opacity: 1;
}


/* ----------------------------------------------------------
   12. ARTICLE PAGE — Full article layout
   ---------------------------------------------------------- */

.article-page {
  max-width: 720px;  /* narrower than main for reading comfort */
}

/* Back navigation link */
.back-link {
  margin-bottom: var(--space-md);
  text-align: left;
  max-width: none;
}

.back-link a {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-bottom: none;
  transition: color var(--transition-mid);
}

.back-link a:hover {
  color: var(--color-text-accent);
  opacity: 1;
}

/* Article header block */
.article-header {
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  margin-bottom: var(--space-md);
  animation: none;
}

.article-header::before { display: none; }

.article-meta {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  text-align: left;
  max-width: none;
  hyphens: none;
}

.article-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}

.article-author {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
  text-align: left;
  hyphens: none;
}

/* Cover image — full width, with copyright line */
.article-cover {
  width: 100%;
  margin: var(--space-md) 0 var(--space-lg);
  text-align: left;
}

.article-cover img {
  width: 100%;
  max-width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
  filter: grayscale(10%) contrast(1.05);
  border: 1px solid var(--color-border-accent);
  display: block;
  margin: 0;
}

/* Copyright credit — small, faint, right-aligned */
.image-credit {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
  text-align: right;
}

/* Article body text */
.article-body {
  margin-bottom: var(--space-xl);
}

.article-body h3 {
  margin-top: var(--space-lg);
  margin-bottom: 0.75rem;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-text-primary);
}

.article-body p {
  max-width: 100%;  /* use full column width inside article */
}

/* References section */
.article-references {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  margin-bottom: var(--space-xl);
}

.article-references h3 {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-family: var(--font-body);
  font-weight: 400;
  margin-bottom: var(--space-sm);
}

.article-references ul li {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  padding-left: 1.2em;
}

.article-references ul li::before {
  color: var(--color-text-faint);
}


/* ----------------------------------------------------------
   13. PROJECTS / GENERIC ARTICLE CARDS
   ---------------------------------------------------------- */

article {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  transition: border-color var(--transition-slow);
}

article:hover {
  border-top-color: var(--color-accent-glow);
}

article header {
  padding: 0;
  text-align: left;
  border: none;
  background: none;
  margin-bottom: var(--space-sm);
  animation: none;
}

article header::before { display: none; }

article header p {
  margin-bottom: 0;
  font-size: 0.8rem;
  text-align: left;
  hyphens: none;
}

article figure {
  margin: var(--space-sm) 0;
  text-align: left;
}

article figure img {
  width: 100%;
  max-width: 480px;
  height: 280px;
  margin: 0;
  filter: grayscale(30%) contrast(1.05);
  transition: filter var(--transition-slow);
}

article figure img:hover {
  filter: grayscale(0%) contrast(1.05);
}

article figure figcaption {
  text-align: left;
}


/* ----------------------------------------------------------
   14. CONTACT PAGE
   ---------------------------------------------------------- */

.contatti article {
  padding: var(--space-sm) 0;
}

.contatti article h3 {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-family: var(--font-body);
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.contatti article p {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  text-align: left;
}

.contatti article p:last-child {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.contatti article a {
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: none;
  color: var(--color-text-accent);
}

.contatti article a:hover {
  color: var(--color-accent-light);
}


/* ----------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------- */

footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md);
  text-align: center;
}

footer p {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-width: none;
  margin: 0;
  text-align: center;
}


/* ----------------------------------------------------------
   16. RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 600px) {
  :root {
    --space-md: 1.25rem;
    --space-lg: 2.5rem;
    --space-xl: 3.5rem;
  }

  header {
    padding: var(--space-lg) var(--space-sm) var(--space-sm);
  }

  nav ul {
    gap: var(--space-sm);
    padding: 1rem var(--space-sm);
  }

  main {
    padding: var(--space-lg) var(--space-sm);
  }

  .hero figure img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .card-cover img {
    height: 180px;
  }

  .article-cover img {
    height: 240px;
  }
}


/* ----------------------------------------------------------
   17. FADE-IN ON LOAD
   ---------------------------------------------------------- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

header { animation: fadeInUp 1s ease both; }
nav    { animation: fadeInUp 1s ease 0.1s both; }
main   { animation: fadeInUp 1s ease 0.2s both; }


/* ----------------------------------------------------------
   WATERMARK — real brand logo, fixed behind all content
   Active on pages with <body class="has-watermark">
   ---------------------------------------------------------- */

body.has-watermark {
  position: relative;
}

body.has-watermark::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 90vw);
  height: min(480px, 90vw);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%2794 6 64 136%27 preserveAspectRatio=%27xMidYMid meet%27%3E %3Cpath fill-rule=%27nonzero%27 fill=%27%23e8e2d5%27 d=%27M 129.84375 17.902344 C 133.464844 15.859375 137.078125 13.800781 141.308594 13.265625 C 143.546875 12.984375 145.742188 13.167969 147.898438 13.859375 C 148.382812 14.011719 148.3125 14.183594 148.097656 14.542969 C 146.667969 16.878906 146.320312 19.492188 146.179688 22.160156 C 146.140625 22.878906 146.375 23.019531 147.023438 22.777344 C 148.914062 22.054688 150.816406 21.351562 152.726562 20.679688 C 153.035156 20.570312 153.589844 20.042969 153.726562 20.8125 C 153.832031 21.414062 154.324219 22.210938 153.417969 22.625 C 152.585938 23.003906 151.722656 23.324219 150.84375 23.574219 C 149.851562 23.863281 149.011719 24.421875 148.125 24.902344 C 147.929688 25.007812 147.652344 25.113281 147.660156 25.359375 C 147.671875 25.6875 148.011719 25.691406 148.246094 25.765625 C 151.226562 26.710938 153.851562 25.847656 156.316406 24.179688 C 156.6875 23.929688 157.046875 23.660156 157.527344 23.316406 C 157.730469 25.179688 157.597656 26.898438 157.371094 28.597656 C 157.074219 30.8125 156.574219 33.023438 155.34375 34.894531 C 154.617188 35.996094 154.695312 36.679688 155.285156 37.789062 C 156.863281 40.773438 157.078125 44.023438 156.703125 47.34375 C 156.386719 50.164062 155.597656 52.847656 154.667969 55.503906 C 154.046875 57.273438 153.839844 59.128906 153.484375 60.953125 C 153.371094 61.53125 153.132812 61.910156 152.445312 62.171875 C 152.621094 60.714844 152.804688 59.351562 152.945312 57.980469 C 153.394531 53.585938 153.035156 49.289062 151.304688 45.175781 C 149.78125 41.558594 146.824219 39.863281 143.125 39.210938 C 142.773438 39.152344 142.457031 39.292969 142.222656 39.515625 C 139.9375 41.675781 137.09375 42.742188 134.136719 43.472656 C 128.367188 44.890625 123.042969 43.632812 118.140625 40.421875 C 116.605469 39.417969 115.058594 39.472656 113.464844 40.082031 C 111.917969 40.671875 110.550781 41.5625 109.398438 42.773438 C 108.75 43.453125 108.136719 43.421875 107.511719 42.691406 C 107.011719 42.109375 106.683594 41.433594 106.605469 40.660156 C 106.539062 40.019531 106.257812 40.03125 105.847656 40.386719 C 105.121094 41.015625 104.949219 41.882812 104.84375 42.769531 C 104.664062 44.238281 104.632812 45.699219 105.265625 47.214844 C 102.882812 47.21875 100.761719 46.773438 99 45.222656 C 98.3125 44.617188 97.707031 43.921875 97.074219 43.257812 C 96.835938 43.011719 96.636719 42.753906 96.25 43.035156 C 95.824219 43.347656 95.949219 43.71875 96.242188 43.941406 C 97.574219 44.953125 97.128906 45.941406 96.402344 47.101562 C 95.265625 48.921875 94.972656 51.042969 94.839844 53.121094 C 94.710938 55.230469 94.527344 57.390625 95.203125 59.460938 C 95.566406 60.578125 94.714844 60.917969 94.054688 61.625 C 93.558594 58.773438 92.824219 56.113281 92.804688 53.332031 C 92.765625 48.058594 92.625 42.773438 94.015625 37.617188 C 94.804688 34.683594 95.507812 31.660156 97.703125 29.386719 C 98.589844 28.46875 98.746094 27.871094 97.984375 26.789062 C 97.257812 25.761719 96.804688 24.527344 96.058594 23.488281 C 95.667969 22.949219 95.847656 22.699219 96.386719 22.484375 C 98.746094 21.550781 101.1875 21.269531 103.707031 21.507812 C 104.707031 21.601562 105.671875 21.976562 106.71875 21.773438 C 107.257812 21.671875 107.125 22.265625 107.148438 22.535156 C 107.3125 24.679688 107.910156 26.710938 108.742188 28.675781 C 108.859375 28.957031 108.738281 29.621094 109.382812 29.367188 C 109.917969 29.15625 109.894531 28.714844 109.671875 28.222656 C 108.445312 25.496094 107.855469 22.636719 107.984375 19.640625 C 108.1875 14.976562 110.011719 11.234375 114.136719 8.789062 C 115.488281 7.988281 116.824219 7.160156 118.433594 6.953125 C 118.722656 6.917969 119.007812 6.824219 119.3125 6.941406 C 118.390625 9.542969 117.785156 12.210938 117.84375 14.976562 C 117.953125 20.023438 120.34375 23.660156 124.785156 26.011719 C 125.789062 26.542969 126.835938 26.359375 127.867188 26.34375 C 131.347656 26.28125 134.441406 27.328125 137.132812 29.523438 C 137.867188 30.121094 138.519531 30.820312 139.191406 31.492188 C 139.511719 31.808594 139.847656 32.136719 140.277344 31.753906 C 140.722656 31.351562 140.292969 31.050781 140.042969 30.773438 C 136.851562 27.191406 132.910156 25.292969 128.0625 25.558594 C 126.644531 25.636719 125.460938 25.261719 124.285156 24.492188 C 119.824219 21.574219 118.40625 17.339844 118.84375 12.265625 C 118.902344 11.550781 119.21875 11.207031 120.03125 11.1875 C 124.253906 11.074219 127.648438 12.496094 129.875 16.253906 C 130.234375 16.863281 130.300781 17.320312 129.652344 17.726562 C 129.554688 17.96875 129.363281 18.132812 129.253906 18.203125 C 129.351562 18.089844 129.601562 18.003906 129.84375 17.902344 %27/%3E %3Cpath fill-rule=%27nonzero%27 fill=%27%23e8e2d5%27 d=%27M 107.757812 129.761719 C 107.800781 125.855469 108.144531 123.171875 108.742188 120.511719 C 108.953125 119.570312 109.234375 119.230469 110.316406 119.429688 C 114.289062 120.148438 118.199219 121.007812 121.648438 123.261719 C 121.8125 123.371094 122.074219 123.441406 122.128906 123.589844 C 122.660156 124.953125 123.761719 124.683594 124.828125 124.59375 C 125.3125 124.554688 125.800781 124.605469 126.289062 124.714844 C 126.984375 124.867188 127.738281 125.066406 127.917969 123.964844 C 127.96875 123.636719 128.378906 123.523438 128.644531 123.339844 C 131.722656 121.265625 135.214844 120.328125 138.804688 119.671875 C 139.382812 119.566406 139.976562 119.53125 140.539062 119.375 C 141.132812 119.21875 141.375 119.417969 141.515625 119.980469 C 142.816406 125.304688 143.203125 130.625 141.503906 135.945312 C 141.105469 137.1875 140.953125 137.242188 139.675781 137.054688 C 135.539062 136.445312 131.984375 134.601562 128.753906 132.03125 C 128.550781 131.871094 128.257812 131.714844 128.191406 131.5 C 127.832031 130.355469 126.96875 130.410156 126.046875 130.503906 C 125.230469 130.585938 124.417969 130.5625 123.609375 130.339844 C 123.125 130.203125 122.597656 130.179688 122.554688 130.941406 C 122.527344 131.386719 122.140625 131.59375 121.847656 131.839844 C 118.511719 134.621094 114.742188 136.46875 110.425781 137.144531 C 109.597656 137.273438 109.195312 136.914062 108.96875 136.195312 C 108.183594 133.71875 107.722656 131.1875 107.757812 129.761719 %27/%3E %3Cpath fill-rule=%27nonzero%27 fill=%27%23e8e2d5%27 d=%27M 104.804688 74.59375 C 104.949219 73.464844 105.03125 72.152344 105.300781 70.875 C 105.511719 69.886719 105.15625 69.242188 104.460938 68.648438 C 103.390625 67.726562 102.339844 66.789062 101.289062 65.851562 C 101.070312 65.660156 100.808594 65.460938 100.917969 65.113281 C 101.023438 64.757812 101.347656 64.78125 101.640625 64.730469 C 103.085938 64.476562 104.527344 64.203125 105.972656 63.953125 C 106.753906 63.816406 107.261719 63.382812 107.570312 62.660156 C 108.148438 61.308594 108.753906 59.964844 109.339844 58.617188 C 109.457031 58.34375 109.539062 58.054688 109.914062 58.039062 C 110.308594 58.019531 110.382812 58.347656 110.519531 58.59375 C 111.230469 59.882812 111.949219 61.167969 112.632812 62.472656 C 113.019531 63.214844 113.554688 63.554688 114.421875 63.589844 C 115.859375 63.648438 117.289062 63.839844 118.71875 63.988281 C 119.003906 64.019531 119.347656 64.058594 119.453125 64.386719 C 119.554688 64.714844 119.304688 64.929688 119.101562 65.148438 C 118.113281 66.195312 117.160156 67.285156 116.117188 68.28125 C 115.460938 68.910156 115.335938 69.578125 115.53125 70.40625 C 115.847656 71.738281 116.148438 73.078125 116.421875 74.421875 C 116.488281 74.753906 116.632812 75.164062 116.273438 75.425781 C 115.941406 75.675781 115.660156 75.359375 115.382812 75.230469 C 114.046875 74.613281 112.707031 74.007812 111.394531 73.339844 C 110.800781 73.035156 110.304688 73.039062 109.746094 73.378906 C 108.539062 74.109375 107.320312 74.816406 106.09375 75.503906 C 105.738281 75.703125 105.355469 76.144531 104.953125 75.878906 C 104.617188 75.65625 104.832031 75.148438 104.804688 74.59375 %27/%3E %3Cpath fill-rule=%27nonzero%27 fill=%27%23e8e2d5%27 d=%27M 133.03125 69.589844 C 133.078125 68.992188 132.730469 68.597656 132.371094 68.207031 C 131.414062 67.171875 130.453125 66.136719 129.507812 65.09375 C 129.292969 64.859375 129.007812 64.628906 129.207031 64.246094 C 129.375 63.917969 129.691406 63.976562 129.980469 63.957031 C 131.417969 63.839844 132.851562 63.671875 134.289062 63.613281 C 135.085938 63.582031 135.554688 63.21875 135.917969 62.566406 C 136.632812 61.28125 137.359375 59.996094 138.113281 58.734375 C 138.527344 58.039062 138.851562 58.054688 139.179688 58.789062 C 139.75 60.074219 140.3125 61.363281 140.804688 62.679688 C 141.140625 63.570312 141.667969 64.050781 142.644531 64.191406 C 143.996094 64.382812 145.335938 64.710938 146.671875 65.011719 C 146.933594 65.070312 147.292969 65.066406 147.355469 65.457031 C 147.410156 65.804688 147.183594 65.996094 146.953125 66.1875 C 145.851562 67.121094 144.777344 68.085938 143.648438 68.980469 C 142.980469 69.507812 142.742188 70.089844 142.890625 70.9375 C 143.125 72.257812 143.257812 73.59375 143.40625 74.925781 C 143.441406 75.261719 143.566406 75.679688 143.164062 75.90625 C 142.8125 76.101562 142.546875 75.820312 142.273438 75.65625 C 141.070312 74.925781 139.851562 74.214844 138.675781 73.441406 C 138.027344 73.015625 137.449219 72.988281 136.753906 73.332031 C 135.464844 73.96875 134.148438 74.546875 132.824219 75.117188 C 132.558594 75.230469 132.234375 75.527344 131.929688 75.191406 C 131.699219 74.9375 131.84375 74.644531 131.914062 74.355469 C 132.292969 72.769531 132.660156 71.179688 133.03125 69.589844 %27/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/* All direct children stack above the watermark */
body.has-watermark > header,
body.has-watermark > nav,
body.has-watermark > main,
body.has-watermark > footer {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------
   CONTACT FORM & NEWSLETTER
   ---------------------------------------------------------- */

.contact-form p, .newsletter-form p, .survey-form p {
  margin-bottom: var(--space-sm);
}

.contact-form label, .survey-form label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.4rem;
  margin-top: 1rem;
}

.contact-form input, .contact-form select, .contact-form textarea, .survey-form select {
  width: 100%;
  padding: 0.75rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 2px;
  transition: border-color var(--transition-mid);
  box-sizing: border-box;
}

.contact-form input:focus, .contact-form textarea:focus,
.contact-form select:focus, .survey-form select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form textarea { resize: vertical; min-height: 120px; }

button[type="submit"] {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-text-accent);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background var(--transition-mid), color var(--transition-mid);
  margin-top: 0.5rem;
}

button[type="submit"]:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.newsletter-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.newsletter-row input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 2px;
  box-sizing: border-box;
}

.newsletter-row input[type="email"]:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ----------------------------------------------------------
   SURVEY FORM
   ---------------------------------------------------------- */

.survey-form { margin-top: var(--space-md); }

.survey-form p > label:first-child {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
  display: block;
}

.radio-option, .check-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.radio-option input, .check-option input {
  width: auto;
  margin: 0;
  accent-color: var(--color-accent);
}

/* ----------------------------------------------------------
   RESPONSIVE — MOBILE
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  h1 { font-size: clamp(2rem, 10vw, 3rem); }
  header { padding: var(--space-md) var(--space-sm) var(--space-sm); }
  nav ul { flex-direction: column; align-items: center; gap: 0.5rem; padding: var(--space-sm); }
  main { padding: var(--space-lg) var(--space-sm); }
  .hero figure img { height: auto; aspect-ratio: 3 / 4; }
  .card-cover img { height: 200px; }
  .article-cover img { height: 200px; }
  .newsletter-row { flex-direction: column; align-items: stretch; }
  .newsletter-row input[type="email"] { min-width: 0; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
  nav ul { gap: 0.3rem; }
  nav a { font-size: 0.65rem; }
  p { hyphens: auto; -webkit-hyphens: auto; }
}

/* Browser-native translation is sufficient — no widget needed */