/* The Willborn, v4 (bone palette). Generated from the v4 concept. */
:root {
      --paper: #f2efe9;
      --paper-2: #e8e4da;
      --paper-3: #dcd7cb;
      --ink: #26211c;
      --ink-2: #574d43;
      --ink-3: #8b8073;
      --accent: #a85c42;
      --slate: #4a5560;
      --rule: #d6cfc2;
      --serif: 'EB Garamond', Georgia, serif;
      --mono: 'Courier Prime', 'Courier New', monospace;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); }
    a { color: var(--accent); text-decoration: none; }
    a:hover { color: var(--ink); }
    .serif { font-family: var(--serif); }
    .mono { font-family: var(--mono); }
    .label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .rule { height: 1px; background: var(--rule); border: 0; }
    .btn {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      border-bottom: 1px solid var(--accent);
      padding-bottom: 5px;
      display: inline-block;
    }
    .btn-solid {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--paper);
      background: var(--ink);
      padding: 13px 26px;
      display: inline-block;
    }
  
    /* ---------- links ---------- */
    .site-nav a, .footer-nav a { color: inherit; text-decoration: none; padding-bottom: 4px; }
    .site-nav a:hover, .footer-nav a:hover { color: var(--accent); }
    .site-nav a[aria-current="page"] { border-bottom: 1px solid var(--accent); }
    .btn, .btn-solid { text-decoration: none; }
    .btn:hover { color: var(--accent); }
    .btn-solid { border: 0; cursor: pointer; }
    .btn-solid:hover { background: var(--accent); }

    /* ---------- mobile nav ---------- */
    .nav-toggle {
      display: none;
      background: none;
      border: 1px solid var(--ink);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 8px 13px;
      cursor: pointer;
    }

    /* ---------- contact form ---------- */
    /* the form reads as a paper slip sitting on the tinted band:
       lighter ground than the section, hairline frame, weighted top edge
       (the same 2px ink rule used on the card headers elsewhere in v4) */
    .contact-form,
    .form-sent {
      max-width: 560px;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-top: 2px solid var(--ink);
      padding: 30px 32px 32px;
    }

    .form-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 14px;
      margin-bottom: 26px;
      border-bottom: 1px solid var(--rule);
    }
    .form-head-hint {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--ink-3);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px 32px;
    }
    .form-row-full { grid-column: 1 / -1; }

    .field-label {
      display: block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 7px;
    }

    .field-line {
      width: 100%;
      border: 0;
      border-bottom: 1px solid var(--rule);
      background: var(--paper-2);
      padding: 11px 12px;
      font-family: var(--mono);
      font-size: 13.5px;
      color: var(--ink);
      transition: border-color 0.15s ease;
    }
    .field-line:hover { border-bottom-color: var(--ink-3); }
    .field-line:focus {
      outline: none;
      border-bottom-color: var(--accent);
      border-bottom-width: 2px;
      padding-bottom: 10px;
    }
    .field-line::placeholder { color: var(--ink-3); }
    textarea.field-line { resize: vertical; min-height: 112px; line-height: 1.8; }

    /* select styled to match the ruled fields */
    .field-select {
      appearance: none;
      -webkit-appearance: none;
      border-radius: 0;
      cursor: pointer;
      padding-right: 34px;
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%238b8073' stroke-width='1.4'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
    }

    /* honeypot, hidden from people but reachable by bots */
    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .form-foot {
      display: flex;
      align-items: center;
      gap: 22px;
      flex-wrap: wrap;
      margin-top: 34px;
    }
    .form-note {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ink-3);
    }

    .btn-solid[disabled] { opacity: 0.55; cursor: default; }

    .form-status {
      font-family: var(--mono);
      font-size: 12.5px;
      line-height: 1.7;
      min-height: 1.3em;
      margin: 16px 0 0;
    }
    .form-status.ok  { color: #5f7a52; }
    .form-status.err { color: var(--accent); }

    .form-sent { max-width: 560px; }

    /* ---------- responsive ---------- */
    @media (max-width: 900px) {
      [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      [style*="64px"] { padding-left: 24px !important; padding-right: 24px !important; }
      hr[style*="margin:0 64px"] { margin-left: 24px !important; margin-right: 24px !important; }
      [style*="font-size:56px"] { font-size: 38px !important; }
      [style*="font-size:44px"] { font-size: 32px !important; }
      [style*="font-size:40px"] { font-size: 30px !important; }
      [style*="text-align:right"] { text-align: left !important; }
      img[style*="aspect-ratio:21/9"] { aspect-ratio: 16/10 !important; }

      .form-grid { grid-template-columns: 1fr; }
      .contact-form, .form-sent { padding: 24px 20px 26px; }
      .site-header-inner { flex-wrap: wrap; align-items: center !important; }
      .nav-toggle { display: inline-block; }
      /* inline display:flex sits on the element, so these need !important */
      .site-nav {
        display: none !important;
        width: 100%;
        flex-direction: column !important;
        gap: 16px !important;
        padding-top: 20px;
      }
      .site-nav.open { display: flex !important; }
      .footer-nav { flex-wrap: wrap; gap: 16px !important; }
    }