@font-face {
    font-family: 'Koine Serif';
    src: url('/fonts/koine-cormorant-garamond-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
  }
  @font-face {
    font-family: 'Koine Serif';
    src: url('/fonts/koine-cormorant-garamond-latin-ext-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'Koine Sans';
    src: url('/fonts/koine-inter-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
  }
  @font-face {
    font-family: 'Koine Sans';
    src: url('/fonts/koine-inter-latin-ext-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'Koine Sans';
    src: url('/fonts/koine-inter-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
  }
  @font-face {
    font-family: 'Koine Sans';
    src: url('/fonts/koine-inter-latin-ext-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
  }

  :root {
    --paper: #f7f3ec;
    --ink: #1c1c1a;
    --rule: #dcd5c8;
    --graphite: #6b6862;
    --accent: #3a2028;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    --display: clamp(2.75rem, 7vw, 6rem);
    --body-lg: clamp(1.0625rem, 1.4vw, 1.25rem);
    --meta: 0.6875rem;

    --measure: 34rem;
    --gutter: clamp(1.25rem, 5vw, 4rem);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background-color: var(--paper);
    color: var(--ink);
  }

  body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Koine Sans', Inter, system-ui, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  main {
    padding-block: var(--space-2xl);
    padding-inline: var(--gutter);
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    max-inline-size: var(--measure);
    margin-inline: auto;
  }

  /* --- la marca: el chi-rho + KOINE CO, compuesto igual que en la tienda,
     centrado sobre el centro OPTICO de la marca y no el geometrico --- */
  .mark {
    display: inline-flex;
    align-items: center;
    gap: 0.34em;
    color: var(--ink);
    text-decoration: none;
  }
  .mark svg {
    display: block;
    inline-size: 22px;
    block-size: 22px;
  }
  .mark span {
    font-family: 'Koine Sans', Inter, system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: translateY(0.0823em);
  }

  h1 {
    font-family: 'Koine Serif', Georgia, serif;
    font-size: var(--display);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }

  .body-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
  }
  .body-lines p {
    margin: 0;
    max-inline-size: var(--measure);
    font-size: var(--body-lg);
    line-height: 1.55;
    text-wrap: pretty;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    inline-size: 100%;
  }

  .meta {
    font-family: 'Koine Sans', Inter, system-ui, sans-serif;
    font-size: var(--meta);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite);
    margin: 0;
  }

  .field {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-sm) var(--space-md);
    max-inline-size: 26rem;
  }

  input[type="email"] {
    flex: 1 1 12rem;
    min-inline-size: 0;
    border: 0;
    border-radius: 0;
    border-block-end: 1px solid var(--ink);
    background-color: transparent;
    color: var(--ink);
    font-family: 'Koine Sans', Inter, system-ui, sans-serif;
    font-size: 1rem;
    padding-block: var(--space-2xs);
    padding-inline: 0;
  }
  input[type="email"]:focus {
    outline: none;
  }
  .field:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }

  /* honeypot: invisible para una persona, visible para un bot que rellena
     todos los campos del formulario sin mirar. */
  .hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  button {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-block;
    font-family: 'Koine Sans', Inter, system-ui, sans-serif;
    font-size: var(--meta);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    padding-block: var(--space-2xs);
    border: 0;
    border-block-end: 1px solid var(--ink);
    position: relative;
    transition: color 160ms var(--ease), border-color 160ms var(--ease);
  }
  button::before {
    content: '';
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    block-size: 1px;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms var(--ease);
  }
  button:hover::before,
  button:focus-visible::before {
    transform: scaleX(1);
  }
  button:hover,
  button:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
  }

  :is(a, button, input):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 1px;
  }

  .error {
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0.04em;
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before { transition-duration: 0.01ms !important; }
  }