/*
 * ============================================
 * style.css
 * CSS custom properties (design tokens), base
 * resets, typography utilities, and body defaults.
 * ============================================
 */

/* ============================================
   DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ============================================ */

:root {
  --mint: #70c7ab;
  --mint-deep: #4ea189;
  --wine: #710e33;
  --wine-deep: #4a071f;
  --ink: #0a0807;
  --ink-2: #141110;
  --ink-3: #1f1a17;
  --paper: #f4ede4;
  --paper-2: #e8dfd2;
  --smoke: #8a8079;
  --rule: rgba(244,237,228,.12);
  /* Light theme tokens — used in alternating sections */
  --cream: #f8fffd;
  --linen: #f4ede5;
  --bone: #ebe2d4;
  --char: #221d1a;       /* primary ink on light bg */
  --char-soft: #4a423d;  /* secondary text on light bg */
  --rule-light: rgba(34,29,26,.14);
}

/* ============================================
   LIGHT SECTION THEME
   ============================================ */

/* Apply to <section class="light"> */
section.light {
  background: var(--linen);
  color: var(--char);
}
section.light.cream { background: var(--cream) }
section.light .section-head { border-bottom-color: var(--rule-light) }
section.light .section-head h2,
section.light .k-col h3,
section.light h3 { color: var(--char) }
section.light .h-meta { color: var(--char-soft) }
section.light .plan-note { color: var(--char-soft) }
section.light .flourish { color: #710e33 }
section.light p,
section.light .desc,
section.light .ex,
section.light .info-row .val { color: var(--char-soft) }
section.light .addr { color: var(--char-soft) }
section.light .info-row { border-bottom-color: var(--rule-light) }
section.light .info-row .day { border-bottom-color: rgba(34,29,26,.18) }
section.light .info-row .lbl { color: var(--char-soft) }
section.light .corner { color: var(--char-soft) }
section.light .city { color: var(--mint-deep) }
section.light .btn-ghost { color: var(--char); border-color: var(--char) }
section.light .btn-ghost:hover { background: var(--char); color: var(--cream) }
section.light .socials a { border-color: var(--rule-light); color: var(--char) }
section.light .socials a:hover { border-color: var(--mint-deep); color: var(--mint-deep); background: rgba(112,199,171,.12) }
section.light .k-shared { background: var(--bone); border-top-color: var(--rule-light) }
section.light .k-shared .v { color: var(--char) }
section.light .k-shared .v a:hover { color: var(--mint-deep) }
section.light .kontakt-grid { border-color: var(--rule-light) }
section.light .k-col:first-child { border-right-color: var(--rule-light) }

/* ============================================
   BASE RESETS
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================
   PG MARK ICON
   ============================================ */

/* Section-head marker — loaded as CSS mask from local file */
.pg-mark {
  width: 56px; height: 56px;
  display: inline-block;
  background-color: var(--mint);
  -webkit-mask: url('../images/misc/pg-trademark.png') center/contain no-repeat;
          mask: url('../images/misc/pg-trademark.png') center/contain no-repeat;
  flex: 0 0 56px;
}

/* ============================================
   BASE ELEMENT STYLES
   ============================================ */

img { display: block; max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

.display {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .9;
}
.serif {
  font-family: "Italiana", serif;
  font-weight: 400;
  letter-spacing: .01em;
}
.typed {
  font-family: "Special Elite", monospace;
  letter-spacing: .02em;
}
.eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: 11px;
  color: var(--mint);
}
.num {
  font-family: "Anton", sans-serif;
  letter-spacing: .04em;
}

/* Italiana flourish accent word */
.flourish {
  font-family: "Italiana", serif;
  font-style: italic;
  text-transform: none;
  color: #710e33;
  letter-spacing: 0;
}