/* ==========================================================================
   Artisan Beats - stylesheet
   --------------------------------------------------------------------------
   Contents
     1. Design tokens      <- change colors, type and spacing HERE only
     2. Reset and base
     3. Typography and shared pieces
     4. Buttons
     5. Navigation
     6. Hero
     7. Gallery
     8. Contact and form
     9. Footer
     10. Scroll reveal and motion
     11. Responsive

   The look is North Texas evening: dark leather brown, bourbon amber, warm
   cream, and a sturdy slab serif. Single theme on purpose - everything is
   painted explicitly so it holds on any background.

   To reskin, edit section 1 and nothing else.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

  /* ---- Color ------------------------------------------------------------
     Browns, not greys. The neutral is tobacco and saddle leather, which is
     what keeps this from reading as a generic black-and-gold template.
     --------------------------------------------------------------------- */

  --c-ground:      #16110d;   /* page background, dark leather            */
  --c-surface:     #1f1811;   /* raised band                              */
  --c-surface-2:   #2a2016;   /* inputs                                   */
  --c-line:        #38291c;   /* hairline borders                         */
  --c-line-strong: #52402c;   /* borders that need to be seen             */

  --c-text:        #f5ede1;   /* primary text, warm cream                 */
  --c-text-dim:    #b3a28c;   /* secondary text                           */
  --c-text-faint:  #7a6a55;   /* captions                                 */

  --c-accent:      #c8873c;   /* bourbon amber - the single accent        */
  --c-accent-soft: #8a5a28;   /* amber at low emphasis                    */
  --c-accent-lift: #e8a85c;   /* highlight, hover                         */
  --c-accent-ink:  #1a1206;   /* text on top of an amber fill             */

  --c-brick:       #6b3225;   /* used only for depth behind the hero      */

  --c-error:       #e0806f;

  /* ---- Type -------------------------------------------------------------
     Bitter is a slab serif - sturdy and a little plainspoken, closer to a
     Texas print shop than to a bridal script. Libre Franklin carries the
     reading; it is an American gothic and pairs cleanly with the slab.

     TO CHANGE THE DISPLAY FACE edit --f-display below AND the Google Fonts
     link in index.html. Alternatives that suit this palette:

       "Zilla Slab"   squarer slab, a touch more modern
       "Vollkorn"     warmer old-style serif, softer and less blocky
       "Arvo"         heavier slab, more signage than text

     Nothing else in this file needs touching when you swap it.
     --------------------------------------------------------------------- */

  --f-display: "Bitter", "Bookman Old Style", Georgia, serif;
  --f-body:    "Libre Franklin", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale. Bitter is a wide face, so display sizes run a little
     smaller than they would with a narrow serif. */
  --t-hero:  clamp(2.4rem, 6.2vw, 4.4rem);
  --t-h2:    clamp(1.75rem, 3.4vw, 2.5rem);
  --t-lede:  clamp(1.05rem, 1.5vw, 1.18rem);
  --t-body:  1.0rem;
  --t-small: 0.875rem;
  --t-label: 0.72rem;

  /* ---- Space, radius, motion ------------------------------------------ */

  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-section: clamp(3.5rem, 8vw, 6rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);   /* never below 16px */
  --measure: 58ch;                      /* readable line length */
  --wrap-max: 1100px;

  --r-sm: 3px;
  --r-md: 6px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* keeps anchors clear of the sticky nav */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-accent-lift);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
}
.skip-link:focus { left: var(--s-2); }


/* ==========================================================================
   3. TYPOGRAPHY AND SHARED PIECES
   ========================================================================== */

h1, h2 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

/* Layout shell. Side padding lives here and nowhere else. */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s-section); }

.section-alt {
  background: var(--c-surface);
  border-block: 1px solid var(--c-line);
}

.section-title {
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
}

/* Small uppercase label. No mono face - letterspaced sans reads warmer and
   saves a font download. */
.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--s-2);
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--f-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.18s var(--ease);
}
.btn:hover {
  background: var(--c-accent-lift);
  border-color: var(--c-accent-lift);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn-sm    { padding: 0.5rem 1rem; font-size: 0.8rem; }
.btn-lg    { padding: 0.95rem 1.9rem; font-size: 0.95rem; }
.btn-block { width: 100%; }


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque fallback first, for browsers without color-mix() */
  background: var(--c-ground);
  background: color-mix(in srgb, var(--c-ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
/* .is-stuck is added by main.js once the page scrolls */
.nav.is-stuck {
  border-bottom-color: var(--c-line);
  background: var(--c-ground);
  background: color-mix(in srgb, var(--c-ground) 96%, transparent);
}

.nav-inner {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}

.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--c-accent);
}

.brand-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--c-text);
  white-space: nowrap;
}


/* ==========================================================================
   6. HERO
   Sized by its content, not the viewport, so it lands whole in the first
   frame on a laptop.
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem) var(--s-section);
  overflow: hidden;
}

/* Two soft pools of light: amber upper left, brick lower right. The only
   place the brick token is used. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 55% at 16% 6%,
      color-mix(in srgb, var(--c-accent) 15%, transparent) 0%, transparent 70%),
    radial-gradient(55% 50% at 90% 94%,
      color-mix(in srgb, var(--c-brick) 40%, transparent) 0%, transparent 72%);
}

.hero-inner { position: relative; }

.hero-title {
  font-size: var(--t-hero);
  line-height: 1.06;
  margin-bottom: var(--s-3);
  max-width: 17ch;
}

.hero-lede {
  font-size: var(--t-lede);
  color: var(--c-text-dim);
  max-width: 52ch;
}

.hero-lede-2 { margin-bottom: var(--s-4); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.hero-area {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin: 0;
}


/* ==========================================================================
   7. GALLERY
   Two across, so four photos read as a feature rather than thumbnails.
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-ground);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback for a tile with no image at all (src set to null). */
.shot-empty {
  display: flex;
  align-items: flex-end;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 9px,
      color-mix(in srgb, var(--c-accent) 4%, transparent) 9px 10px
    ),
    var(--c-surface-2);
}

.shot-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-2);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c-ground) 94%, transparent), transparent);
}


/* ==========================================================================
   8. CONTACT AND FORM
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.contact-copy { max-width: var(--measure); }
.contact-copy .section-title { margin-bottom: var(--s-3); }
.contact-copy p { color: var(--c-text-dim); }

.quote-form {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.field { display: grid; gap: 0.4rem; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.field label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.5;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.field textarea { resize: vertical; min-height: 6rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--c-text-faint); }

.field input:focus,
.field textarea:focus {
  border-color: var(--c-accent);
  background: var(--c-ground);
}

/* The native date control is near-invisible on a dark ground without this */
.field input[type="date"] { color-scheme: dark; }

.field-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--c-text-faint);
}

.field-error {
  margin: 0;
  font-size: 0.78rem;
  color: var(--c-error);
}

.field.has-error input,
.field.has-error textarea { border-color: var(--c-error); }

.form-status {
  margin: 0;
  min-height: 1.2rem;
  font-size: var(--t-small);
  color: var(--c-accent);
}
.form-status.is-error { color: var(--c-error); }


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-5);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}

.footer-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
}

.footer-tag {
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--c-text-faint);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer-social a {
  font-size: var(--t-small);
  color: var(--c-text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 2px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.footer-social a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.footer-legal {
  width: 100%;
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--c-text-faint);
}


/* ==========================================================================
   10. SCROLL REVEAL AND MOTION

   The hidden state applies only when main.js confirms IntersectionObserver
   support, by putting .has-reveal on <html>. Without JS everything is
   visible - nothing important is ever parked invisible.
   ========================================================================== */

.has-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}

.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .has-reveal .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
}

@media (max-width: 620px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }

  .field-row { grid-template-columns: minmax(0, 1fr); }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .footer-brand { margin-right: 0; }
}