/*
 * Discovery Mailbox — Explorer's Field Journal
 * Shared base styles for cream-paper printing
 *
 * PRINT: Chrome → Print → Margins: None → Background graphics: ON
 * PAPER: 32lb textured cream stock — the paper IS the background
 *
 * This file contains structural and decorative elements shared
 * across all letter pages. Page-specific layouts stay inline.
 */

@page {
  size: letter;
  margin: 0;
}

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

body {
  --print-offset-top: 5mm; /* tune to center content vertically on your printer */
  width: 8.5in;
  height: 11in;
  margin: 0 auto;
  background: #f0ebe3; /* screen preview — approximates cream paper */
  font-family: 'Crimson Pro', Georgia, serif;
  color: #2c2418;
  position: relative;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* === PARCHMENT LAYER ===
   Full-bleed overlay — no inset, no simulated background.
   Real cream paper provides the base tone and texture.
   Single subtle aging gradient for broad tonal warmth. */
.parchment {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
}

.parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(139,109,71,0.04) 100%);
  pointer-events: none;
}

/* === INNER BORDER ===
   Positioned to account for printer's ~0.25in unprinted margin.
   0.45in from body edge = ~0.2in visible gap from paper edge. */
.inner-border {
  position: absolute;
  top: 0.30in;
  left: 0.30in;
  right: 0.30in;
  bottom: 0.30in;
  border: 1px solid rgba(139,109,71,0.35);
  z-index: 1;
  pointer-events: none;
}

.inner-border::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 0.5px solid rgba(139,109,71,0.2);
}

/* === CORNER ORNAMENTS ===
   Track inner border at 2px inside. */
.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.45;
}
.corner::before, .corner::after {
  content: '';
  position: absolute;
  background: #8b6b3f;
}
.corner-tl { top: 0.28in; left: 0.28in; }
.corner-tl::before { top: 0; left: 0; width: 14px; height: 1px; }
.corner-tl::after { top: 0; left: 0; width: 1px; height: 14px; }
.corner-tr { top: 0.28in; right: 0.28in; }
.corner-tr::before { top: 0; right: 0; width: 14px; height: 1px; }
.corner-tr::after { top: 0; right: 0; width: 1px; height: 14px; }
.corner-bl { bottom: 0.28in; left: 0.28in; }
.corner-bl::before { bottom: 0; left: 0; width: 14px; height: 1px; }
.corner-bl::after { bottom: 0; left: 0; width: 1px; height: 14px; }
.corner-br { bottom: 0.28in; right: 0.28in; }
.corner-br::before { bottom: 0; right: 0; width: 14px; height: 1px; }
.corner-br::after { bottom: 0; right: 0; width: 1px; height: 14px; }


/* === CLASSIFICATION BADGE ===
   Opacity boosted slightly for cream paper contrast. */
.classification {
  position: absolute;
  font-family: 'Special Elite', monospace;
  font-size: 7pt;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(139,69,19,0.55);
  border: 1.5px solid rgba(139,69,19,0.35);
  padding: 2px 8px;
  z-index: 4;
}

/* === TAPE EFFECTS === */
.tape {
  position: absolute;
  height: 20px;
  background: rgba(225,215,190,0.7);
  border: 0.5px solid rgba(180,170,150,0.35);
  z-index: 5;
}
.tape-tl { top: -4px; left: 20px; width: 60px; transform: rotate(-3deg); }
.tape-tr { top: -4px; right: 20px; width: 55px; transform: rotate(2deg); }
.tape-bl { bottom: -4px; left: 25px; width: 55px; transform: rotate(2deg); }
.tape-br { bottom: -4px; right: 18px; width: 60px; transform: rotate(-4deg); }

/* === ILLUSTRATION AREA ===
   Transparent background — art sits on real paper.
   Border and tape provide the "mounted photo" frame. */
.illustration-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid #b0a090;
  overflow: hidden;
}

.illustration-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === FOLD GUIDES ===
   Full-bleed since parchment is no longer inset. */
.fold-guide-h,
.fold-guide-v {
  display: none;
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

body.fold-guides .fold-guide-h,
body.fold-guides .fold-guide-v {
  display: block;
}

.fold-guide-h {
  top: 5.5in;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(139,109,71,0.25);
}

.fold-guide-v {
  left: 4.25in;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(139,109,71,0.25);
}

/* === SHARED TYPOGRAPHY === */
.handwritten {
  font-family: 'Caveat', cursive;
  font-size: 12pt;
  color: #3a5a8a;
  line-height: 1.4;
}

.emphasis-word {
  font-weight: 600;
  color: #5a3a1a;
  font-style: italic;
}

/* === INLINE SPECIMEN ILLUSTRATIONS (floated, framed) === */
.specimen-float {
  width: 1.3in;
  height: auto;
  border: 1px solid rgba(184,168,138,0.4);
  padding: 3px;
  background: rgba(255,252,245,0.35);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 0.06in;
}

.specimen-float img {
  width: 100%;
  height: auto;
  display: block;
}

.specimen-float-left {
  float: left;
  margin-right: 0.12in;
  margin-top: 0.03in;
}

.specimen-float-right {
  float: right;
  margin-left: 0.12in;
  margin-top: 0.03in;
}

.specimen-float-caption {
  font-family: 'Caveat', cursive;
  font-size: 8pt;
  color: #7a6a55;
  text-align: center;
  margin-top: 2px;
  line-height: 1.2;
}

/* === MARGIN SKETCHES (floated, unframed) === */
.margin-sketch {
  width: 1.2in;
  height: auto;
  margin-bottom: 0.04in;
}

.margin-sketch img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.85;
}

.margin-sketch-left {
  float: left;
  margin-right: 0.1in;
  margin-top: 0.05in;
}

.margin-sketch-right {
  float: right;
  margin-left: 0.1in;
  margin-top: 0.05in;
}

/* === BETWEEN-PARAGRAPH ILLUSTRATIONS === */
.illustration-break {
  width: 100%;
  max-width: 2.8in;
  margin: 0.08in auto;
  text-align: center;
}

.illustration-break img {
  width: 100%;
  height: auto;
  max-height: 1.2in;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.illustration-break-caption {
  font-family: 'Caveat', cursive;
  font-size: 9pt;
  color: #3a5a8a;
  opacity: 0.7;
  margin-top: 2px;
  line-height: 1.2;
}

.illustration-break-wide { max-width: 3.2in; }
.illustration-break-narrow { max-width: 2in; }

/* === BACKGROUND WATERMARKS === */
.watermark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
}

.watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.watermark-panel {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3in;
  height: 3in;
}

.watermark-corner-br {
  bottom: 0.3in;
  right: 0.1in;
  width: 2in;
  height: 2in;
}

/* === PAGE NUMBER === */
.page-number {
  position: absolute;
  bottom: 0.35in;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Crimson Pro', serif;
  font-size: 7pt;
  color: rgba(100,80,60,0.25);
  z-index: 3;
}

/* === PRINT === */
@media print {
  body {
    width: 8.5in;
    height: 11in;
    margin: 0;
    background: transparent; /* let the real paper show through */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .parchment::before {
    background: transparent;
  }
}