/* ==========================================================================
   Nicole's Crafting Corner
   See design.md for the full design system. Summary:
   Bitter (slab) for display, Karla (sans) for everything else.
   Two background families only: cream/wash (light) and #223029 (dark).
   No gradients. Sharp corners by default (3px on buttons/inputs).
   ========================================================================== */

:root {
  --cream:        #f4f2e8;
  --paper:        #fcfbf5;
  --wash:         #e9efe6;
  --ink:          #26332b;
  --body:         #55655b;
  --muted:        #7d8f83;
  --nav-link:     #5c6f63;
  --green:        #4e7d61;
  --green-hover:  #3b6149;
  --green-deep:   #2f6b43;
  --dark:         #223029;
  --darker:       #1b251f;
  --on-dark:      #eef1e6;
  --on-dark-body: #c2cfc4;
  --on-dark-acc:  #9dc7a9;
  --rule:         #dde0d2;
  --rule-wash:    #d3dbcf;
  --rule-input:   #cbd5c6;
  --rule-ghost:   #b6c2b3;
  --error:        #a8564b;

  --gutter:  clamp(20px, 5vw, 64px);
  --section: clamp(56px, 7.5vw, 104px);

  --shadow-frame: 0 24px 50px -28px rgba(34, 48, 41, 0.42);
  --shadow-card:  0 18px 40px -30px rgba(34, 48, 41, 0.4);
  --shadow-panel: 0 34px 70px -34px rgba(0, 0, 0, 0.5);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { text-decoration: none; color: var(--green); }
a:hover { color: var(--green-hover); }

::selection { background: var(--green); color: #fff; }

/* Keyboard focus ring. One rule covers every interactive element on the page:
   the only controls inside .section--dark sit on the paper panel, so a single
   deep-green ring lands on a light surface everywhere it appears.
   :focus-visible rather than :focus so a mouse click doesn't leave a ring
   behind - keyboard users get the indicator, mouse users don't see a stray
   outline after clicking. Removing this without replacing it makes the site
   unusable by keyboard, so it is an accessibility requirement, not styling. */
:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 600;
  text-wrap: pretty;
}

p { text-wrap: pretty; }

/* --------------------------------------------------------------- layout -- */

.wrap { max-width: 1140px; margin: 0 auto; }
.wrap--wide { max-width: 1240px; }

.section {
  padding: var(--section) var(--gutter);
  scroll-margin-top: 72px;
}
.section--wash { background: var(--wash); }
.section--dark { background: var(--dark); color: var(--on-dark); }

.section__head { text-align: center; margin-bottom: 40px; }
.section__head h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; }

.section__note {
  text-align: center;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--body);
  max-width: 34em;
  margin: 38px auto 0;
}

.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--on-dark-acc); }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px var(--gutter);
  background: rgba(244, 242, 232, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  color: var(--ink);
}
.wordmark__name {
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--green-deep);
}
.wordmark__rest { color: var(--green); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav__links a {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-link);
  font-weight: 600;
}
.nav__links a:hover { color: var(--green); }
.nav__links .btn { color: #fff; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px -8px -8px 0;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-ghost); }
.btn--ghost:hover { border-color: var(--green); color: var(--green); }
.btn--sm { padding: 10px 18px; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.btn--block { width: 100%; font-size: 14.5px; letter-spacing: 0.05em; margin-top: 2px; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ hero -- */

.hero { padding: clamp(44px, 7vw, 96px) var(--gutter) clamp(40px, 6vw, 76px); }

.hero__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(40px, 5.8vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
.hero__copy .eyebrow { letter-spacing: 0.3em; margin-bottom: 20px; }

.lede {
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.72;
  color: var(--body);
  max-width: 31em;
  margin-bottom: 34px;
}

/* --------------------------------------------------- photo frame + slots -- */

.frame {
  margin: 0;
  background: var(--paper);
  padding: 12px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
}
.frame--hero { padding: 14px; box-shadow: var(--shadow-frame); }
.frame--portrait { box-shadow: 0 20px 44px -28px rgba(34, 48, 41, 0.4); }
.frame--card { padding: 10px; }

.frame__img { position: relative; width: 100%; overflow: hidden; }
.frame__img img { width: 100%; height: 100%; object-fit: cover; }

/* Shown by script.js when a photo file is missing. Drop real photos into
   images/ with the filenames in index.html and this disappears. */
.frame__img.is-empty {
  background: var(--wash);
  border: 1px dashed var(--rule-input);
  display: grid;
  place-items: center;
}
.frame__img.is-empty img { display: none; }
.frame__img.is-empty::after {
  content: attr(data-placeholder);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  padding: 18px;
  max-width: 22em;
}

.frame__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 3px 3px;
}
.frame--hero .frame__caption { padding: 13px 3px 3px; }

.frame__title { font-family: 'Bitter', Georgia, serif; font-size: 18px; }
.frame--hero .frame__title { font-size: 19px; }

.frame__meta {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.frame--hero .frame__meta { font-size: 11px; }

/* ------------------------------------------------------------ quote band -- */

.band {
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(44px, 6.5vw, 84px) var(--gutter);
  text-align: center;
}
.band__quote {
  font-family: 'Bitter', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.9vw, 48px);
  line-height: 1.28;
  max-width: 19em;
  margin: 0 auto;
}
.band__quote span { color: var(--on-dark-acc); }

/* --------------------------------------------------------------- gallery -- */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 28px 0 36px;
}
.chip {
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 19px;
  border-radius: 999px;
  background: transparent;
  color: var(--nav-link);
  border: 1px solid var(--rule-ghost);
  cursor: pointer;
  transition: all 0.18s ease;
}
.chip:hover { border-color: var(--green); color: var(--green); }
.chip.is-active { background: var(--green); color: #fff; border-color: var(--green); }

/* A flex row ignores the hidden attribute on its own, so say it explicitly -
   this is what lets script.js show and hide the season row. */
.chips[hidden] { display: none; }

/* Season sub-filter. Pulled up under the category row so the two read as one
   control. Smaller and washed rather than solid green, so it stays visibly
   subordinate to the category chip that revealed it. */
.chips--sub { margin: -24px 0 32px; gap: 8px; }
.chip--sub { font-size: 11.5px; padding: 7px 15px; letter-spacing: 0.1em; }
.chip--sub.is-active {
  background: var(--wash);
  color: var(--green);
  border-color: var(--green);
}

/* Shown when a filter matches no pieces. Matches .section__note's treatment. */
.gallery__empty {
  text-align: center;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--body);
  max-width: 34em;
  margin: 4px auto 0;
}

.gallery { column-width: 265px; column-gap: 18px; }
.gallery .frame {
  break-inside: avoid;
  margin: 0 0 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery .frame:hover { transform: translateY(-3px); box-shadow: var(--shadow-frame); }
.gallery .frame[hidden] { display: none; }

/* ------------------------------------------------------ season spotlight -- */

.spotlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.card__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card h3 { font-size: 26px; line-height: 1.15; }
.card p { font-size: 16px; line-height: 1.65; color: var(--body); }

.badge {
  align-self: flex-start;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
  background: var(--wash);
  padding: 6px 11px;
  border-radius: 2px;
}

/* ----------------------------------------------------------------- about -- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(34px, 5vw, 68px);
  align-items: start;
}
.about__title { font-size: clamp(29px, 3.8vw, 44px); line-height: 1.1; margin-bottom: 24px; }

.prose {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--body);
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 38em;
}

.signature {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-wash);
}
.signature__name { font-family: 'Bitter', Georgia, serif; font-style: italic; font-size: 24px; }
.signature a { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }

/* --------------------------------------------------------------- classes -- */

.classes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.prose--center { text-align: center; max-width: 34em; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------- contact -- */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  max-width: 1080px;
}
.contact__title { font-size: clamp(31px, 4.4vw, 52px); line-height: 1.06; margin-bottom: 20px; }
.contact__lede { font-size: 16.5px; line-height: 1.72; color: var(--on-dark-body); max-width: 28em; }
.contact__facts {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  color: var(--on-dark-body);
}

.panel {
  background: var(--paper);
  border: 1px solid #cfd8ca;
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: var(--shadow-panel);
  color: var(--ink);
}
.panel__title { font-size: 24px; margin-bottom: 8px; }
.panel__sub { font-size: 14.5px; line-height: 1.6; color: #6b7a70; margin-bottom: 22px; }
.panel__sub--center { max-width: 26em; margin: 0 auto 22px; }
.panel__fine { font-size: 12.5px; line-height: 1.55; color: #8a978d; }
.panel__error { font-size: 13px; line-height: 1.5; color: var(--error); }

/* Sizing only. Never hide this container (display:none / visibility / opacity):
   data-appearance="interaction-only" already collapses it to 0px for low-risk
   traffic, and hiding it strands anyone Cloudflare gives a visible challenge. */
#contact-form .cf-turnstile { min-width: 0; }

.panel__thanks { text-align: center; padding: 22px 4px; }
.panel__thanks .panel__title { font-size: 27px; margin-bottom: 12px; }
.panel__check {
  font-family: 'Bitter', Georgia, serif;
  font-size: 40px;
  color: var(--green);
  line-height: 1;
  margin-bottom: 16px;
}
.panel__thanks .btn { padding: 13px 28px; }

/* ------------------------------------------------------------------ form -- */

form { display: flex; flex-direction: column; gap: 16px; }

form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7a70;
  font-weight: 700;
}

input, select, textarea {
  font-family: 'Karla', sans-serif;
  font-size: 16px; /* never lower — avoids iOS zoom on focus */
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  padding: 12px 13px;
  background: #fffefa;
  border: 1px solid var(--rule-input);
  border-radius: 3px;
  transition: border-color 0.18s ease;
}

/* A softer, always-on cue that pairs with the :focus-visible ring above. Do not
   add `outline: none` back to the rule above - that is what left these fields
   with no visible focus state at all. */
input:focus, select:focus, textarea:focus { border-color: var(--green); }
textarea { resize: vertical; min-height: 110px; }

/* ---------------------------------------------------------------- footer -- */

.footer {
  background: var(--darker);
  color: #8b9a90;
  text-align: center;
  padding: 28px 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.footer__mark { font-family: 'Bitter', Georgia, serif; font-size: 15.5px; color: var(--on-dark-body); }
.footer__name { font-weight: 700; color: var(--on-dark-acc); }
.footer__dot { padding: 0 6px; }

/* ------------------------------------------------------------ small screens -- */

@media (max-width: 640px) {
  .nav__toggle { display: flex; }
  .nav__links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 0 6px;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}