/* ITM teaser - currency engraving direction.
   Cream paper, blackish-green ink, letterspaced smallcaps, no framework,
   no webfonts: the engraved feel comes from spacing and rules, not assets. */

:root {
  --paper: #f0ead8;
  --paper-deep: #e7dfc8;
  --ink: #1d4a2c;
  --ink-faint: #4a6b54;
  --serial: #2e6b3e;
}

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

html { background: var(--paper-deep); }

body {
  font-family: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  /* faint engraved line texture, pure CSS */
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(29, 74, 44, 0.025) 3px,
    rgba(29, 74, 44, 0.025) 4px
  );
}

/* the page is one banknote */
.note {
  max-width: 44rem;
  margin: 1.5rem auto;
  padding: 2.5rem 2rem 2rem;
  border: 1.5px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--ink-faint);
}

/* ===== plate header ===== */
.plate { text-align: center; }

.plate-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  margin-bottom: 1.6rem;
}

.serial { color: var(--serial); }

.monogram {
  font-size: 7rem;
  font-weight: normal;
  line-height: 1;
}

/* TM as plain letters, top-right of the I; em units so the lockup scales
   with whatever size the monogram is set at. vertical-align raises the
   baseline so the caps tops line up (tuned by eye, not typography math) */
.monogram-tm {
  font-size: 0.27em;
  letter-spacing: 0.06em;
  vertical-align: 1.85em;
  margin-left: 0.08em;
}

/* department nav */
.depts {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  margin-bottom: 2.4rem;
}

.depts a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 2px;
}

.depts a:hover { border-bottom-color: var(--ink); }

.depts .here { color: var(--ink-faint); }

.depts .sep { color: var(--ink-faint); margin: 0 0.5em; }

/* sub-page header: small monogram lockup linking home */
.monogram-home {
  display: inline-block;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 1.4rem;
}

.institute-name {
  font-variant: small-caps;
  font-size: 1.35rem;
  letter-spacing: 0.34em;
  margin-top: 0.6rem;
}

.motto-line {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin-top: 0.7rem;
}

.seal {
  margin: 2.2rem auto 0;
  width: 11.5rem;
  color: var(--ink);
}

.seal svg { width: 100%; height: auto; }

.seal-tm { font-size: 9px; fill: currentColor; letter-spacing: 1px; }

.seal figcaption {
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  margin-top: 0.4rem;
}

.tender {
  margin-top: 2.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  line-height: 2;
}

/* ===== rules between sections ===== */
.rule {
  border: none;
  border-top: 1px solid var(--ink-faint);
  position: relative;
  margin: 2.8rem 8%;
}

.rule::after {
  content: '\2042'; /* asterism */
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 0.7rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

/* ===== generation ledger ===== */
h2 {
  text-align: center;
  font-weight: normal;
  font-size: 1rem;
  letter-spacing: 0.42em;
}

.gen-sub {
  text-align: center;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

.ledger {
  margin-top: 2.4rem;
  display: grid;
  gap: 2.6rem;
}

.entry { text-align: center; }

/* engraving plates: the artwork shown at catalog scale */
.plates {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.plate-fig {
  margin: 0;
  border: 1px solid var(--ink-faint);
  padding: 0.5rem 0.5rem 0.35rem;
}

.plate-fig img {
  width: 11.5rem;
  height: auto;
  display: block;
}

.plate-fig figcaption {
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 0.35rem;
}

.gen-divider {
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.36em;
  color: var(--ink);
  margin-top: 1rem;
}

.entry-art {
  width: 15rem;
  margin: 0 auto 1rem;
  color: var(--ink);
}

.entry-art svg { width: 100%; height: auto; }

.art-type {
  font-size: 22px;
  fill: currentColor;
  letter-spacing: 4px;
  font-family: inherit;
}

.art-tm { font-size: 7px; fill: currentColor; letter-spacing: 1px; }

/* mockup lettering sizes (drafts) */
.art-small { font-size: 7px; fill: currentColor; letter-spacing: 0.5px; }
.art-mid { font-size: 12px; fill: currentColor; letter-spacing: 1.5px; }
.art-num { font-size: 9px; fill: currentColor; letter-spacing: 0.5px; }
.art-fine text { font-size: 5.5px; fill: currentColor; letter-spacing: 0.3px; }
.art-fine-c { font-size: 5.5px; fill: currentColor; letter-spacing: 0.3px; }

.entry h3 {
  font-weight: normal;
  font-size: 0.84rem;
  letter-spacing: 0.24em;
}

.entry-desc {
  font-style: italic;
  font-size: 0.86rem;
  margin-top: 0.25rem;
}

.entry-stock {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--serial);
  margin-top: 0.5rem;
}

/* ===== landing teaser ===== */
.teaser { margin-top: 2.4rem; }

.enter {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
}

.enter a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

/* ===== institute charter ===== */
.charter {
  max-width: 32rem;
  margin: 0 auto;
}

.charter p {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  text-align: left;
}

.charter h2 { margin-bottom: 0.8rem; }

/* ===== ordering ===== */
.ordering { text-align: center; }

.ordering p { margin-top: 1rem; font-size: 0.95rem; }

.order-mail {
  color: var(--ink);
  letter-spacing: 0.06em;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.price-line {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

/* ===== fine print ===== */
.fine-print {
  text-align: center;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  line-height: 2.1;
  color: var(--ink-faint);
}

.fine-print p + p { margin-top: 0.8rem; }

@media (max-width: 32rem) {
  .note { margin: 0.6rem; padding: 1.8rem 1rem 1.5rem; }
  .monogram { font-size: 4.6rem; }
  .depts { letter-spacing: 0.14em; }
  .institute-name { font-size: 1rem; letter-spacing: 0.22em; }
}