/* ecuris.com — single static page. No build step, no JS. */

:root {
  --backdrop:   oklch(0.42 0.02 250);
  --paper:      oklch(0.93 0.022 88);
  --stamp:      oklch(0.97 0.012 90);
  --stripe:     oklch(0.97 0.01 90);
  --red:        oklch(0.52 0.19 25);
  --blue:       oklch(0.45 0.16 255);
  --ink:        oklch(0.24 0.02 60);
  --ink-body:   oklch(0.34 0.02 60);
  --ink-muted:  oklch(0.45 0.03 60);
  --ink-faint:  oklch(0.5 0.03 60);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--backdrop); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
::selection { background: oklch(0.52 0.19 25 / 0.2); }

.page {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  font-family: 'Space Mono', ui-monospace, monospace;
}

/* Airmail border. The padding IS the stripe. */
.frame {
  width: 100%;
  max-width: 1120px;
  padding: 13px;
  background: repeating-linear-gradient(45deg,
    var(--red) 0 14px, var(--stripe) 14px 28px,
    var(--blue) 28px 42px, var(--stripe) 42px 56px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
}

.paper {
  background: var(--paper);
  padding: clamp(24px, 4.5vw, 56px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}

.texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(oklch(0.35 0.03 70 / 0.14) 1px, transparent 1px);
  background-size: 4px 4px;
}

.head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.route {
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 2;
  color: var(--ink-muted);
}

.philatelic {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 28px);
}

/* flex:none + vw-based clamp keep these from overflowing on phones. Keep both. */
.stamp {
  width: clamp(84px, 12vw, 132px);
  height: clamp(100px, 14.4vw, 158px);
  flex: none;
  background: var(--stamp);
  padding: clamp(9px, 1.5vw, 16px) clamp(6px, 1vw, 11px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  transform: rotate(2.5deg);
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.12));
  -webkit-mask-image: radial-gradient(circle 5.5px, transparent 96%, black), conic-gradient(black 0 0);
  -webkit-mask-size: 11px 11px, calc(100% - 11px) calc(100% - 11px);
  -webkit-mask-position: 0 0, 50% 50%;
  -webkit-mask-repeat: space, no-repeat;
  mask-image: radial-gradient(circle 5.5px, transparent 96%, black), conic-gradient(black 0 0);
  mask-size: 11px 11px, calc(100% - 11px) calc(100% - 11px);
  mask-position: 0 0, 50% 50%;
  mask-repeat: space, no-repeat;
}
.stamp-top, .stamp-bot { font-size: clamp(7px, 0.85vw, 9px); color: var(--ink-faint); }
.stamp-top { letter-spacing: 0.2em; }
.stamp-bot { letter-spacing: 0.16em; }
.stamp-letter {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 0.9;
  color: var(--red);
}

.postmark {
  width: clamp(72px, 10.2vw, 112px);
  height: clamp(72px, 10.2vw, 112px);
  flex: none;
  border: 2px solid oklch(0.45 0.16 255 / 0.55);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transform: rotate(-9deg);
  margin-top: clamp(6px, 1.2vw, 14px);
  color: oklch(0.45 0.16 255 / 0.75);
  font-size: clamp(6.5px, 0.82vw, 9px);
  letter-spacing: 0.12em;
  text-align: center;
}
.postmark-mid { font-size: clamp(8px, 1.1vw, 12px); letter-spacing: 0.1em; }
.postmark .rule { width: 74%; height: 1px; background: currentColor; opacity: 0.6; }

.address {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.address-left { display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font-size: 10px; letter-spacing: 0.24em; color: var(--ink-faint); }

.address h1 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.address p {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-body);
  max-width: 44ch;
  text-wrap: pretty;
}

.foot {
  position: relative;
  border-top: 2px solid oklch(0.24 0.02 60 / 0.25);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.email {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 38px);
  letter-spacing: -0.02em;
  color: var(--ink);
  border-bottom: 3px solid var(--red);
  padding-bottom: 2px;
}
.email:hover { color: var(--red); }

.barcode { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bars { display: flex; align-items: flex-end; height: 38px; }
/* Real Code 39 encoding "ECURIS.COM". Bar widths are load-bearing — do not restyle. */
.bars i { display: block; height: 100%; background: var(--ink); }
.barcode-caption { font-size: 9px; letter-spacing: 0.22em; color: var(--ink-muted); }

@media (max-width: 620px) {
  .frame { padding: 6px; background-size: 38px 38px; }
}