/* ============================================================
   PLOMBERIE NATIONALE — Design Tokens
   "Heraldic Modern" — Belgian heritage × institutional precision
   ============================================================ */

:root {
  /* ---- Color: Heraldic Palette ---- */
  --noir-national: #1A1A1A;
  --noir-deep:     #0E0E0E;
  --noir-soft:     #2A2A2A;
  --noir-line:     rgba(26, 26, 26, 0.12);

  --or-heraldique: #FDDA24;
  --or-deep:       #E8C200;
  --or-soft:       #FFF3A8;

  --rouge-royal:   #EF3340;
  --rouge-deep:    #C8222E;

  --bleu-eau:      #00A4E4;
  --bleu-deep:     #0078A8;

  --parchemin:     #FAF6EE;   /* warm off-white surface */
  --parchemin-2:   #F2EBDB;   /* slightly deeper */
  --ivoire:        #FFFDF7;
  --pierre:        #6B6B6B;   /* secondary text */
  --pierre-soft:   #9A9A9A;

  /* ---- Type ---- */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:    'Montserrat', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Hardware-inspired elevation (directional, like embossed metal) ---- */
  --shadow-emboss:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(0, 0, 0, 0.12) inset,
    0 2px 0 rgba(0, 0, 0, 0.08),
    0 8px 24px -8px rgba(26, 26, 26, 0.25);

  --shadow-plate:
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 14px 30px -10px rgba(26, 26, 26, 0.35);

  --shadow-deep:
    0 4px 0 rgba(0, 0, 0, 0.25),
    0 28px 60px -16px rgba(26, 26, 26, 0.45);

  --shadow-gold-glow:
    0 0 0 1px rgba(253, 218, 36, 0.4),
    0 12px 36px -10px rgba(253, 218, 36, 0.45);

  /* ---- Layout ---- */
  --content-max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius-sharp: 2px;       /* sharp geometry */
  --radius-stamp: 4px;
  --radius-pill: 999px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--noir-national);
  background: var(--ivoire);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--or-heraldique); color: var(--noir-national); }

/* ============================================================
   Heraldic Tricolor Divider — recurring structural motif
   ============================================================ */
.tricolor {
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--noir-national) 0 33.33%,
    var(--or-heraldique) 33.33% 66.66%,
    var(--rouge-royal)   66.66% 100%
  );
}
.tricolor--thick { height: 8px; }
.tricolor--thin  { height: 2px; }
.tricolor--vertical {
  height: 100%;
  width: 4px;
  background: linear-gradient(
    to bottom,
    var(--noir-national) 0 33.33%,
    var(--or-heraldique) 33.33% 66.66%,
    var(--rouge-royal)   66.66% 100%
  );
}

/* Tricolor "ribbon" used under labels */
.ribbon-tricolor {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 6px;
  width: 48px;
}
.ribbon-tricolor span { flex: 1; height: 100%; }
.ribbon-tricolor span:nth-child(1) { background: var(--noir-national); }
.ribbon-tricolor span:nth-child(2) { background: var(--or-heraldique); }
.ribbon-tricolor span:nth-child(3) { background: var(--rouge-royal); }

/* ============================================================
   Type system
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--noir-national);
}
.eyebrow--gold { color: var(--or-deep); }
.eyebrow--light { color: var(--or-heraldique); }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  margin: 0;
}
.display--xl { font-size: clamp(2.8rem, 7vw, 6rem); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  margin: 0 0 0.4em;
  line-height: 1.1;
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--pierre);
  max-width: 60ch;
}

/* ============================================================
   Buttons — hardware-inspired
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sharp);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.btn:active { transform: translateY(2px); }

.btn--emergency {
  background: var(--rouge-royal);
  color: #fff;
  box-shadow:
    0 0 0 1px var(--rouge-deep) inset,
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 3px 0 var(--rouge-deep),
    0 14px 30px -10px rgba(239, 51, 64, 0.55);
}
.btn--emergency:hover { background: #ff3a48; }

.btn--planned {
  background: var(--bleu-eau);
  color: #fff;
  box-shadow:
    0 0 0 1px var(--bleu-deep) inset,
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 3px 0 var(--bleu-deep),
    0 14px 30px -10px rgba(0, 164, 228, 0.45);
}
.btn--planned:hover { background: #10b6f6; }

.btn--gold {
  background: var(--or-heraldique);
  color: var(--noir-national);
  box-shadow:
    0 0 0 1px var(--or-deep) inset,
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 3px 0 var(--or-deep),
    0 14px 30px -10px rgba(253, 218, 36, 0.55);
}
.btn--gold:hover { background: #ffe455; }

.btn--ghost {
  background: transparent;
  color: var(--noir-national);
  box-shadow: 0 0 0 1.5px var(--noir-national) inset;
}
.btn--ghost:hover { background: var(--noir-national); color: var(--ivoire); }

.btn--dark {
  background: var(--noir-national);
  color: var(--ivoire);
  box-shadow:
    0 0 0 1px #000 inset,
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 3px 0 #000;
}
.btn--dark:hover { background: var(--noir-soft); }

.btn--sm { padding: 10px 16px; font-size: 12px; }
.btn--lg { padding: 22px 32px; font-size: 16px; }

.btn .arr {
  width: 18px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h15M11 1l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='square'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h15M11 1l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='square'/></svg>") center/contain no-repeat;
}

/* ============================================================
   Container & sections
   ============================================================ */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(40px, 6vw, 80px) 0; }
.section--dark { background: var(--noir-national); color: var(--ivoire); }
.section--cream { background: var(--parchemin); }
.section--ivoire { background: var(--ivoire); }

/* ============================================================
   "Stamped" labels with corner notches — heraldic feel
   ============================================================ */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  background: var(--noir-national);
  color: var(--or-heraldique);
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px), 0 8px
  );
}
.stamp--gold { background: var(--or-heraldique); color: var(--noir-national); }
.stamp--red  { background: var(--rouge-royal); color: #fff; }
.stamp .dot {
  width: 6px; height: 6px; background: currentColor; border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

/* ============================================================
   Heraldic ornament — corner flourishes
   ============================================================ */
.frame-heraldic {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  background: var(--ivoire);
  box-shadow: var(--shadow-plate);
}
.frame-heraldic::before,
.frame-heraldic::after,
.frame-heraldic > .corner-tl,
.frame-heraldic > .corner-br {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--or-heraldique);
}
.frame-heraldic::before { top: 8px; left: 8px;  border-right: none; border-bottom: none; }
.frame-heraldic::after  { top: 8px; right: 8px; border-left: none;  border-bottom: none; }
.frame-heraldic > .corner-tl { bottom: 8px; left: 8px;  border-right: none; border-top: none; }
.frame-heraldic > .corner-br { bottom: 8px; right: 8px; border-left: none;  border-top: none; }

/* Subtle paper grain */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>");
  mix-blend-mode: multiply;
}
.grain > * { position: relative; z-index: 1; }

/* ---- Utility: visually hidden ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}