/* MRMCK. Email sign-up boxes + form controls, shared by The Vault (/library/) and The Stack (/stack/, Brief Builder).
   Loaded after style.css. The sign-ups themselves are beehiiv embedded subscribe forms pasted into
   <div class="embed-slot" data-embed-slot="..."> (see the BEEHIIV EMBED comments in the HTML). No sign-up JS of our own.
   .lib-field and .lib-btn are also used by the Vault's filters and buttons. */
:root { --concrete: #D0D0D0; }

.lib-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.lib-field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
}
.lib-field input, .lib-field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--paper);
  color: var(--black);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming on focus */
}
.lib-field select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}

/* ---------- Buttons ---------- */
.lib-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 20px;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--black);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.lib-btn:hover { background: var(--orange); color: var(--black); }
.lib-btn--ghost { background: transparent; color: var(--black); }
.lib-btn--ghost:hover { background: var(--black); color: var(--paper); }

/* ---------- Email sign-up box (black) ---------- */
.lib-signup {
  margin: 48px 20px 0;
  padding: 28px 20px 24px;
  background: var(--black);
  color: var(--paper);
  display: grid;
  gap: 20px;
}
.lib-signup__title { font-family: "Anton", sans-serif; font-weight: 400; font-size: 40px; line-height: 0.95; }
.lib-signup__title, .lib-signup__body { color: var(--paper); }
.lib-signup__body { margin-top: 12px; font-size: 17px; line-height: 1.5; max-width: 30em; }
.lib-optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.lib-signup__consent { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--concrete); } /* 12.8:1 on black */
.lib-signup :focus-visible { outline-color: var(--orange); box-shadow: 0 0 0 3px var(--black); }

/* ---------- beehiiv embed slot ----------
   What can and can't be styled from here:
   - beehiiv's embed code is one <script> that renders an IFRAME served from beehiiv. Nothing inside an iframe from
     another domain can be restyled by this site's CSS: its fonts, colours, field and button styles are set in
     beehiiv's form builder (Subscribers > Subscribe forms > Style). Suggested settings there: transparent
     background, field background #F4F4F1 with no radius, button #FF4D00 with #0B0B0B text and no radius,
     Inter if offered, Slim layout (email + button only).
   - From here we can only size and place the iframe (full width, no border) and reserve some height so the box
     doesn't jump when it loads.
   - If a plain HTML <form> is ever pasted into a slot instead, the rules further down give it the brand look. */
.embed-slot { min-width: 0; }
.embed-slot iframe { display: block; width: 100% !important; max-width: 100%; border: 0; color-scheme: normal; }
.embed-slot:has(iframe) { min-height: 56px; }
/* beehiiv sets the iframe to 350px tall; the Slim form needs about 60px, so trim the empty space. */
.embed-slot iframe { height: 76px !important; }
/* Placeholder until the embed code is pasted (and hidden automatically if it's left in by mistake). */
.embed-placeholder {
  display: flex; align-items: center; min-height: 48px; padding: 10px 16px;
  border: 2px dashed var(--concrete); color: var(--paper);
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
.embed-slot:has(iframe, form, [id^="beehiiv"], [class*="beehiiv"]) .embed-placeholder { display: none; }
/* A plain HTML form in a slot (not the standard iframe embed): brand fields and button. */
.embed-slot form { display: grid; gap: 12px; }
.embed-slot input[type="email"], .embed-slot input[type="text"] {
  width: 100%; min-height: 48px; padding: 8px 12px; border: 2px solid var(--paper); border-radius: 0;
  background: var(--paper); color: var(--black); font: inherit; font-size: 16px;
}
.embed-slot button, .embed-slot input[type="submit"] {
  min-height: 48px; padding: 8px 20px; border: 2px solid var(--orange); border-radius: 0;
  background: var(--orange); color: var(--black); font: inherit; font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
@media (hover: hover) { .embed-slot button:hover, .embed-slot input[type="submit"]:hover { background: var(--paper); border-color: var(--paper); } }
@media (min-width: 600px) { .embed-slot form { grid-template-columns: minmax(0, 1fr) auto; } }

/* Footer pointer on the Vault (orange footer, black text 5.9:1) */
.lib-signup--slim { margin-top: 40px; max-width: 34em; }
.lib-footer-teardown a { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; color: var(--black); }
.lib-footer-teardown__go { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-weight: 500; }

@media (min-width: 821px) {
  .lib-signup {
    margin: calc(var(--u) * 72) var(--margin) 0;
    padding: calc(var(--u) * 48) calc(var(--u) * 48) calc(var(--u) * 40);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: calc(var(--u) * 48);
    align-items: center;
  }
  .lib-signup__title { font-size: max(40px, calc(var(--u) * 56)); }
  .lib-signup--slim { margin-top: calc(var(--u) * 56); }
  .lib-footer-teardown a { font-size: calc(var(--u) * 18); }
}

@media (prefers-reduced-motion: reduce) { .lib-btn { transition: none; } }