/* Tiga opsi identitas The 707 Company.
   --accent untuk bidang warna dan garis; --accent-text untuk teks kecil di atas
   --paper (versi lebih gelap supaya kontrasnya cukup).
   Markup wordmark sama untuk semua opsi; huruf, warna, dan kapitalisasi
   datang dari kelas tema .opsi-a / .opsi-b / .opsi-c. */

.opsi-a {
  --ink: #1F1B18; --paper: #F3EDE2; --accent: #6B1E23; --accent-2: #A07C4A; --muted: #6A5F55; --accent-text: #6B1E23;
  --display: 'Bodoni Moda', Georgia, serif;
  --doc: Georgia, 'Times New Roman', serif;
}
.opsi-b {
  --ink: #121212; --paper: #F2F2EE; --accent: #FF5A1F; --accent-2: #8C8C86; --muted: #5E5E59; --accent-text: #B5390C;
  --display: 'Unbounded', Arial, sans-serif;
  --doc: Arial, Helvetica, sans-serif;
}
.opsi-c {
  --ink: #10233A; --paper: #F7F6F2; --accent: #C8892E; --accent-2: #5C6877; --muted: #5C6877; --accent-text: #8F5C10;
  --display: 'Manrope', Arial, sans-serif;
  --doc: Arial, Helvetica, sans-serif;
}

/* ── Wordmark ───────────────────────────────────────────────────────── */
.wm { font-family: var(--display); white-space: nowrap; line-height: 1; display: inline-block; }
.opsi-a .wm { font-weight: 500; letter-spacing: -0.01em; }
.opsi-b .wm { font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; }
.opsi-b .wm .n { font-weight: 700; }
.opsi-c .wm { font-weight: 500; text-transform: lowercase; letter-spacing: -0.035em; }
.opsi-c .wm .n { font-weight: 800; }

/* Susunan bertumpuk: THE / 707 / COMPANY */
.wm-stack { display: inline-flex; flex-direction: column; align-items: center; white-space: normal; gap: 0.06em; }
.wm-stack .w { font-size: 0.24em; letter-spacing: 0.42em; text-transform: uppercase; margin-right: -0.42em; }
.wm-stack .n { line-height: 0.92; }
.opsi-b .wm-stack, .opsi-c .wm-stack { align-items: flex-start; }
.opsi-b .wm-stack .w { letter-spacing: 0.28em; margin-right: 0; }
.opsi-c .wm-stack .w { font-size: 0.34em; letter-spacing: -0.02em; text-transform: lowercase; margin-right: 0; }

/* ── Mockup: kartu nama 90 × 55 mm ──────────────────────────────────── */
/* Elemen container sendiri tidak bisa memakai cqw (mengacu ke leluhurnya),
   jadi padding-nya pakai % dari lebar induk; isinya baru pakai cqw. */
.bcard {
  aspect-ratio: 90 / 55; container-type: inline-size; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.10);
  display: flex; overflow: hidden;
}
.bcard-front { background: var(--ink); color: var(--paper); align-items: center; justify-content: center; }
.bcard-front .wm { font-size: 8.4cqw; }
.opsi-b .bcard-front .wm { font-size: 6.2cqw; }
.bcard-front.stack .wm { font-size: 13cqw; }
.bcard-back {
  background: var(--paper); color: var(--ink); flex-direction: column; justify-content: space-between;
  padding: 7% 7.5%; font-family: var(--doc);
}
.bcard-back .nm { font-size: 5.2cqw; font-weight: 700; line-height: 1.15; }
.bcard-back .tt { font-size: 3.4cqw; color: var(--muted); margin-top: 1cqw; }
.bcard-back .ct { font-size: 3.2cqw; line-height: 1.55; }
.bcard-back .ct b { color: var(--accent-text); font-weight: 700; }
.bcard-back .foot { display: flex; justify-content: space-between; align-items: flex-end; }
.bcard-back .foot .wm { font-size: 3.6cqw; }
.opsi-b .bcard-back .foot .wm { font-size: 2.7cqw; }
.bcard-back .rule { height: 0.5cqw; width: 12cqw; background: var(--accent); margin: 2.4cqw 0; }

/* ── Mockup: kop surat A4 ───────────────────────────────────────────── */
.lhead {
  aspect-ratio: 210 / 297; container-type: inline-size; background: #FFFEFC; color: var(--ink);
  padding: 8% 9% 6%; display: flex; flex-direction: column;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.10); font-family: var(--doc);
}
.lhead .hd { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 3cqw; margin-bottom: 6cqw; border-bottom: 0.35cqw solid var(--accent); }
.lhead .hd .wm { font-size: 5.6cqw; }
.opsi-b .lhead .hd .wm { font-size: 4.2cqw; }
.lhead .hd small { font-size: 2.2cqw; color: var(--muted); }
.opsi-a .lhead .hd { flex-direction: column; align-items: center; gap: 1.6cqw; border-bottom-width: 0.2cqw; }
.opsi-b .lhead .hd { border-bottom: none; border-left: 1.4cqw solid var(--accent); padding: 1cqw 0 1cqw 3cqw; }
.lhead .bar { height: 1.5cqw; border-radius: 1cqw; background: #E7E3DB; margin-bottom: 2cqw; }
.lhead .gap { height: 3cqw; }
.lhead .fill { flex: 1; }
.lhead .ft { border-top: 0.2cqw solid #E3DED4; padding-top: 2cqw; font-size: 2.1cqw; line-height: 1.5; color: var(--muted); }
.opsi-a .lhead .ft { text-align: center; }

/* ── Mockup: email ──────────────────────────────────────────────────── */
.mail { background: #FFFFFF; border: 1px solid #E3E0D8; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.mail-top { display: flex; gap: 8px; padding: 12px 16px; background: #F1EFEA; border-bottom: 1px solid #E3E0D8; }
.mail-top i { width: 11px; height: 11px; border-radius: 50%; background: #D3CFC6; }
.mail-meta { padding: 14px 22px; border-bottom: 1px solid #EEEBE5; font: 14px/1.6 Arial, sans-serif; color: #6B6962; }
.mail-meta b { color: #2A2A2E; font-weight: 600; }
.mail-body { padding: 20px 22px 24px; font: 15px/1.6 Arial, sans-serif; color: #2A2A2E; }
.mail-body .sk { height: 9px; border-radius: 5px; background: #ECE9E3; margin: 8px 0; }
.sig { margin-top: 20px; font-family: var(--doc); color: var(--ink); }
.sig .nm { font-size: 17px; font-weight: 700; }
.sig .tt { font-size: 14px; color: var(--muted); }
.sig .rule { width: 44px; height: 3px; background: var(--accent); margin: 12px 0; }
.sig .wm { font-size: 20px; }
.opsi-b .sig .wm { font-size: 14px; }
.sig .ct { font-size: 13px; line-height: 1.7; color: #3A3A3E; margin-top: 8px; }
.sig .ct b { color: var(--accent-text); }