/* ========================================================================
   Dreamquest Studios homepage
   Light, minimal. Class names use studio/atelier theme so nothing collides
   with Geoframe's geographic naming.
   ======================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    background: #faf8f4;
    color: #1f1f1d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.atrium {
    max-width: 720px;
    margin: 0 auto;
    padding: 96px 32px 64px;
}

/* ---- Vestibule (header) ---------------------------------------------- */
.vestibule {
    text-align: center;
    margin-bottom: 96px;
}
.vestibule-glyph {
    width: 96px;
    margin: 0 auto 24px;
    filter: drop-shadow(0 6px 18px rgba(31, 31, 29, 0.08));
}
.vestibule-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: #1f1f1d;
    margin-bottom: 14px;
}
.vestibule-tagline {
    color: #6b6b67;
    font-size: 17px;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ---- Section primitives --------------------------------------------- */
.salon,
.atelier,
.inkwell,
.lantern {
    margin-bottom: 80px;
}
.block-peak {
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #c8403a;
    margin-bottom: 22px;
}
.block-current {
    color: #6b6b67;
    margin-bottom: 22px;
    font-size: 16px;
}

/* ---- Salon (about) -------------------------------------------------- */
.salon p {
    color: #2c2c29;
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.7;
}
.salon p:last-child { margin-bottom: 0; }

/* ---- Atelier (work) ------------------------------------------------- */
.piece {
    background: #ffffff;
    border: 1px solid #ebe8e0;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.piece:hover {
    transform: translateY(-2px);
    border-color: #d9d4c5;
    box-shadow: 0 14px 32px -16px rgba(31, 31, 29, 0.14);
}
.piece-shot {
    width: 100%;
    /*aspect-ratio: 16 / 9;*/
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #ebe8e0;
    background: #1f1f1d;
}
.piece-body {
    padding: 28px 32px 32px;
}
.piece-tag {
    font-size: 12px;
    color: #2c5d8f;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    margin-bottom: 12px;
}
.piece-name {
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    color: #1f1f1d;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}
.piece-line {
    color: #4a4a46;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ---- Cue (button) --------------------------------------------------- */
.cue {
    display: inline-block;
    padding: 12px 26px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.cue-primary {
    background: #c8403a;
    color: #ffffff;
    box-shadow: 0 4px 12px -4px rgba(200, 64, 58, 0.45);
}
.cue-primary:hover {
    background: #ad352f;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(200, 64, 58, 0.5);
}
.cue:disabled {
    background: #a09d92;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---- Inkwell (contact form) ----------------------------------------- */
.inkwell-form {
    background: #ffffff;
    border: 1px solid #ebe8e0;
    border-radius: 14px;
    padding: 28px;
}
.inkwell-field {
    display: block;
    margin-bottom: 18px;
}
.inkwell-field:last-of-type { margin-bottom: 22px; }
.inkwell-tag {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4a4a46;
    margin-bottom: 6px;
}
.inkwell-form input[type="text"],
.inkwell-form input[type="email"],
.inkwell-form textarea {
    width: 100%;
    padding: 11px 14px;
    background: #faf8f4;
    border: 1px solid #d9d4c5;
    border-radius: 8px;
    color: #1f1f1d;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s, background 0.15s;
}
.inkwell-form input:focus,
.inkwell-form textarea:focus {
    outline: none;
    border-color: #c8403a;
    background: #ffffff;
}
.inkwell-form textarea {
    resize: vertical;
    min-height: 110px;
}

/* ---- Lantern (newsletter) ------------------------------------------- */
.lantern-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.lantern-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #d9d4c5;
    border-radius: 8px;
    color: #1f1f1d;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.lantern-form input[type="email"]:focus {
    outline: none;
    border-color: #c8403a;
}
.lantern-form .form-status { width: 100%; }

/* ---- Honeypot ------------------------------------------------------- */
.hidden-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---- Form status ---------------------------------------------------- */
.form-status {
    margin-top: 14px;
    font-size: 14px;
    text-align: left;
    min-height: 20px;
    line-height: 1.4;
}
.form-status-ok { color: #2c5d8f; }
.form-status-error { color: #c8403a; }

/* ---- Colophon (footer) ---------------------------------------------- */
.colophon {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid #ebe8e0;
    text-align: center;
    color: #8a8a85;
    font-size: 13px;
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 540px) {
    .atrium { padding: 64px 22px 48px; }
    .vestibule { margin-bottom: 64px; }
    .vestibule-glyph { width: 80px; }
    .vestibule-name { font-size: 30px; }
    .salon, .atelier, .inkwell, .lantern { margin-bottom: 56px; }
    .piece-body { padding: 22px 22px 26px; }
    .piece-name { font-size: 24px; }
    .inkwell-form { padding: 22px; }
}