@font-face {
  font-family: 'TexGyreHeroscn';
  src: url('https://maxtelos.com/fonts/texgyreheroscn-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TexGyreHeroscn';
  src: url('https://maxtelos.com/fonts/texgyreheroscn-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TexGyreHeros';
  src: url('https://maxtelos.com/fonts/texgyreheros-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TexGyreHeros';
  src: url('https://maxtelos.com/fonts/texgyreheros-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --black:   #161616;
  --white:   #D8D8D8;
  --magenta: magenta;
  --bg:      var(--white);
  --fg:      var(--black);
  --ink-2:   #5C5C5C;

  --font-sans:      'TexGyreHeroscn', 'Arial Narrow', Arial, sans-serif;
  --font-sans-text: 'TexGyreHeros', Arial, Helvetica, sans-serif;

  --text-xs:   .9rem;
  --text-base: 1.1rem;
  --text-md:   clamp(1.75rem, 2.5vw, 2.25rem);

  --b:  2.25rem;
  --b1: var(--b);
  --b2: calc(2 * var(--b));
  --lh-small: calc(1.35 * var(--text-xs));
  --measure: 62ch;
  --gutter: 1.5rem;
}

/* ─── Ground ──────────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  scrollbar-color: var(--fg) var(--bg);
  scrollbar-width: thin;
}

::selection { background-color: var(--magenta); color: var(--bg); }

/* listmonk wraps every page in .wrap / .container and boxes it in a card —
   the card is retired, whitespace separates instead (no-borders doctrine) */
.wrap, .container, .body-inner, .box {
  background: var(--bg) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* the listmonk logo in the header is replaced by a wordmark line; swap the
   content for an <img> by setting a background-image if you export one */
.logo, .header img, header img { display: none !important; }

.header::before, header::before {
  content: "Max Telos";
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--fg);
  padding-block: var(--b1) var(--b2);
}

/* ─── Headings ────────────────────────────────────────────────────────────── */

h1, h2 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
  margin: 0 0 var(--b1) 0;
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--lh-small) 0;
}

/* the "Lists" heading above the checkboxes is a label, not a heading */
.lists h2, .lists h3, form h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-2);
  margin-block-end: var(--lh-small);
}

/* ─── Reading text ────────────────────────────────────────────────────────── */

p, li {
  font-family: var(--font-sans-text);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.2;
  max-width: var(--measure);
  margin: 0 0 var(--b1) 0;
}

p:last-child { margin-block-end: 0; }

a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--magenta); }

p a, li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
p a:hover, li a:hover { text-decoration-thickness: 2px; color: var(--fg); }

/* ─── Form ────────────────────────────────────────────────────────────────── */

form { margin-block: var(--b1); }

label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-2);
  margin-block-end: var(--lh-small);
}

input[type="text"],
input[type="email"] {
  display: block;
  width: 100%;
  max-width: 28rem;
  font-family: var(--font-sans-text);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  border: 0;
  border-radius: 0.2em;
  padding: 0.5em 0.6em;
  margin-block-end: var(--b1);
}

input[type="text"]:focus,
input[type="email"]:focus {
  outline: 2px solid var(--magenta);
  outline-offset: 0;
  background: color-mix(in srgb, var(--fg) 12%, var(--bg));
}

::placeholder { color: var(--ink-2); opacity: 1; }

/* ─── List checkboxes ─────────────────────────────────────────────────────── */

ul.lists, .lists ul, ul { list-style: none; padding: 0; margin: 0; }

.lists li, ul.lists li {
  margin-block-end: var(--b1);
  max-width: var(--measure);
}

.lists li label, ul.lists li label {
  display: inline;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  cursor: pointer;
}

.lists li label:hover { color: var(--magenta); }

/* the description under each list name is the small prose register */
.lists .description, .lists li p {
  font-family: var(--font-sans-text);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--ink-2);
  margin: 0.35em 0 0 0;
}

/* the box-and-cross control from the site's footer toggles */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0.85em;
  height: 0.85em;
  margin: 0 0.4em 0 0;
  border: 1px solid var(--fg);
  background-color: var(--bg);
  vertical-align: baseline;
  flex-shrink: 0;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20d='M2,2%208,8%20M8,2%202,8'%20fill='none'%20stroke='magenta'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90%;
}

input[type="checkbox"]:focus-visible { outline: 2px solid var(--magenta); }

/* ─── Buttons — the accent chip from the rail ─────────────────────────────── */

button, input[type="submit"], .button {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg);
  background-color: color-mix(in srgb, var(--fg) 15%, var(--bg));
  border: 0;
  border-radius: 0.4em;
  padding: 0.4em 0.8em;
  margin-block-start: var(--b1);
  cursor: pointer;
}

button:hover, input[type="submit"]:hover, .button:hover {
  background-color: var(--magenta);
  color: var(--fg);
}

/* the secondary / danger action (unsubscribe, blocklist) stays a text control */
button.is-danger, .button.is-danger {
  background: none;
  padding-inline: 0;
  color: var(--ink-2);
}
button.is-danger:hover, .button.is-danger:hover { background: none; color: var(--magenta); }

/* ─── Messages (confirmation, error) ──────────────────────────────────────── */

.message, .notification, .error {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-sans-text);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--fg);
  margin-block-end: var(--b1);
}

.error, .is-danger { color: var(--magenta); }

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.footer, footer {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--ink-2);
  padding-block: var(--b2) var(--b1);
  border: 0;
}

.footer a, footer a { color: var(--ink-2); }
.footer a:hover, footer a:hover { color: var(--magenta); }

body > footer, .footer, #powered { display: none; }

@media (max-width: 767px) {
  .wrap, .container, .body-inner, .box { padding-inline: 0.75rem; }
}