/* Blobs fixed to the viewport */
.blob { position: fixed; z-index: 0; }
.blob-1 { top: -80px; left: 12%;  background: #C4704B; opacity: 0.22; }
.blob-2 { top: 80px;  right: 6%;  background: #7A8F7E; opacity: 0.30; }
.blob-3 { top: 260px; left: 38%;  background: #B8943F; opacity: 0.18; }

/* Form labels */
.field-label {
    display: block;
    font-family: 'TeX Gyre Pagella', Georgia, serif;
    font-size: 15px;
    color: #2C2825;
    margin-bottom: 8px;
}

.field-label {
    display: block;
    font-family: 'TeX Gyre Pagella', Georgia, serif;
    font-size: 15px;
    color: #2C2825;
    margin-bottom: 8px;
}

.field-input,
.field-textarea,
.field-select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(44, 40, 37, 0.25);
    border-radius: 0;
    padding: 8px 2px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    color: #2C2825;
    transition: border-color 180ms ease;
}
.field-textarea { min-height: 160px; resize: vertical; }

/* Tall textarea for the message-led contact layout — fills the right column. */
.field-textarea-tall {
    min-height: 320px;
    resize: vertical;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
}
@media (min-width: 768px) {
    .field-textarea-tall { min-height: 100%; }
}

/* Edge-bleed textarea — flush to viewport right & bottom, no rounding on those corners. */
.field-textarea-bleed {
    border-radius: 0;
    resize: none;
}

/* Floating message textarea — absolutely positioned, jumps to wherever the user clicks.
   `field-sizing: content` makes the textarea grow to fit its own content (or placeholder)
   so any whitespace around it is part of <main> and stays clickable. */
.field-textarea-floating {
    position: absolute;
    field-sizing: content;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #2C2825;
    caret-color: #C4704B;
    min-width: 12ch;
    min-height: 1.7em;
}
.field-textarea-floating::placeholder {
    color: rgba(107, 99, 90, 0.45);
    font-style: italic;
}
.field-textarea-floating:focus { outline: none; }

/* Phones: drop the click-anywhere whimsy and use a normal stacked form.
   Textarea becomes a regular block input with the same bottom-border treatment as
   name/email. The JS handler is also gated by viewport width so it doesn't run here. */
@media (max-width: 767px) {
    .field-textarea-floating {
        position: static;
        field-sizing: auto;
        width: 100%;
        max-width: none !important;
        max-height: none !important;
        min-height: 180px;
        border-bottom: 1px solid rgba(44, 40, 37, 0.25);
        padding: 8px 2px;
        transition: border-color 180ms ease;
    }
    .field-textarea-floating:focus { border-bottom-color: #7A8F7E; }
    #contact-main { cursor: auto; }
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
    outline: none;
    border-bottom-color: #7A8F7E;
}
.field-input::placeholder,
.field-textarea::placeholder { color: rgba(107, 99, 90, 0.55); }
.field-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B635A'%3E%3Cpath d='M5.3 9.8a1 1 0 0 1 1.42-1.4L12 13.68l5.28-5.28a1 1 0 1 1 1.42 1.42l-5.83 5.83a1.25 1.25 0 0 1-1.77 0L5.3 9.8Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}
/* Honeypot — hide from real users; bots fill it in and we filter them out. */
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }