/* Security-printing layer. Loaded after styles.css.
   The textures are generated by the note engine at build time and injected as
   CSS custom properties, so the page and the art are printed by the same press. */

/* ── the plate: a guilloche watermark under the whole document ── */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--field); background-size:1400px auto; background-repeat:repeat;
  opacity:.085; mix-blend-mode:screen;
}
body > *{position:relative; z-index:1}

/* the ground gets a faint warm cast, like aged stock rather than flat black */
body{
  background-image:
    radial-gradient(ellipse 110% 70% at 50% -8%, rgba(216,198,138,.055), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 104%, rgba(143,174,155,.04), transparent 60%);
  background-attachment:fixed;
}

/* ── engraved divider between clauses ── */
.lathe{
  height:26px; margin:0; border:0; width:100%;
  background-image:var(--rule-orn); background-size:100% 26px;
  background-repeat:no-repeat; background-position:center;
  opacity:.55;
}
.lathe-wrap{padding-block:34px}

/* ── section headings get a printed-document eyebrow mark ── */
.eyebrow::before,
[class$="-eyebrow"]::before{
  content:"❧"; margin-right:9px; color:var(--ink-dim); opacity:.6;
  font-family:Newsreader,Georgia,serif; font-size:12px;
}
/* purely an engraver's mark — give it empty alt text so it is not announced.
   Declared second so browsers without the alt-text syntax keep the line above. */
.eyebrow::before,
[class$="-eyebrow"]::before{ content:"❧" / ""; }

/* ── the subscription panel becomes a certificate ── */
.panel{
  position:relative;
  background:
    linear-gradient(var(--ground-2),var(--ground-2)) padding-box,
    linear-gradient(var(--ground-2),var(--ground-2)) border-box;
  border:1px solid var(--ink-dim);
  outline:1px solid var(--rule); outline-offset:5px;
  overflow:hidden;
}
.panel::before{
  content:""; position:absolute; right:-54px; bottom:-54px; width:220px; height:220px;
  background-image:var(--seal); background-size:contain; background-repeat:no-repeat;
  opacity:.16; pointer-events:none;
}
.panel > *{position:relative}
/* corner register marks, as on a printing plate */
.panel::after{
  content:""; position:absolute; inset:7px; pointer-events:none;
  background:
    linear-gradient(var(--ink-dim),var(--ink-dim)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) 100% 100%/1px 10px no-repeat;
  opacity:.5;
}

/* ── display type: tighter, more engraved ── */
.mint-h,
[class$="-headline"],
[class$="-title"]{
  font-variant-ligatures:common-ligatures;
  font-feature-settings:"onum" 1,"liga" 1;
}
.mint-h{font-size:clamp(26px,3.4vw,38px)}

/* figures read as struck numerals */
.hero-fig,.ledger-row dd,.cost b{font-variant-numeric:lining-nums tabular-nums}

/* ── the hero plate gets a printed border, not a flat box ── */
.hero-plate{
  border:1px solid var(--ink-dim) !important;
  outline:1px solid var(--rule); outline-offset:4px;
  background:var(--ground-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset;
}

/* ── specimen frames ── */
.gal-item{
  outline:1px solid var(--rule-soft); outline-offset:3px;
  border-color:var(--ink-dim);
}
/* was color:var(--rule) — 1.4:1 against the panel, i.e. unreadable */
.gal-item figcaption::before{content:"SPECIMEN · "; color:var(--green-dim)}

/* ── primary action reads as a struck plate ── */
#mint-cta{
  letter-spacing:.2em; font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(11,15,13,.35);
}

/* ── the charter reads as legislation ── */
[class^="ethos-"] p:first-of-type::first-letter{
  float:left; font-family:Newsreader,Georgia,serif; font-size:3.1em; line-height:.84;
  padding:4px 10px 0 0; color:var(--ink);
}

@media (prefers-reduced-motion:no-preference){
  #mint-cta{transition:background .18s ease,color .18s ease}
}
/* ── Fig. 1 is a 1000-unit-wide engraving. Squeezed into a phone it renders its
   labels at ~5px, which is not "small" so much as absent. Below 720px it gets a
   scroller and keeps a legible minimum width instead. ── */
.ladder-scroll{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; scrollbar-color:var(--ink-dim) transparent;
}
.ladder-scroll:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.ladder-scroll::-webkit-scrollbar{height:6px}
.ladder-scroll::-webkit-scrollbar-thumb{background:var(--ink-dim); border-radius:3px}
.ladder-hint{display:none}
@media (max-width:720px){
  .ladder-sec .ladder-scroll > .ladder-svg{width:660px; max-width:none}
  .ladder-hint{
    display:block; margin:0; font-family:"JetBrains Mono",monospace; font-size:10px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--green-dim);
  }
}

@media (max-width:640px){
  body::before{background-size:900px auto; opacity:.06}
  .panel::before{width:150px;height:150px;right:-38px;bottom:-38px}
}