/* Williamsburg General Store — painted-signboard build
   Display: IM Fell English. Body: EB Garamond.
   Palette: signboard black, sign gilt, shutter wine, clapboard cream. */

:root {
  --signboard:    #1A1A1A;
  --gilt:         #C9A44C;
  --gilt-soft:    #B89139;
  --wine:         #6B1F2A;
  --clapboard:    #F6F1E6;
  --clapboard-dim:#EDE5D2;
  --ink:          #1A1A1A;
  --ink-soft:     color-mix(in srgb, var(--signboard) 68%, transparent);
  --hair:         color-mix(in srgb, var(--signboard) 14%, transparent);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--clapboard);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      color-mix(in srgb, var(--signboard) 2.5%, transparent) 3px 4px
    );
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--wine); text-underline-offset: 3px; }
a:hover { color: var(--signboard); }

.display {
  font-family: "IM Fell English", "EB Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.display-sc {
  font-family: "IM Fell English SC", "IM Fell English", "EB Garamond", Georgia, serif;
  letter-spacing: 0.14em;
  font-weight: 400;
  text-transform: uppercase;
}

h1, h2, h3 { font-family: "IM Fell English", Georgia, serif; font-weight: 400; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); letter-spacing: 0.01em; }

p { margin: 0 0 1rem; }

/* ------------------------------------------------------------------
   Utility bar — visible phone + address on every page
   ------------------------------------------------------------------ */
.action-bar {
  background: var(--signboard);
  color: var(--clapboard);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}
.action-bar a { color: var(--gilt); text-decoration: none; }
.action-bar a:hover { color: var(--clapboard); }

/* ------------------------------------------------------------------
   SIGNATURE 1 — Painted signboard (hero)
   ------------------------------------------------------------------ */
.signboard {
  background: var(--signboard);
  color: var(--gilt);
  padding: clamp(40px, 7vw, 80px) clamp(24px, 5vw, 64px);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--signboard) 80%, var(--gilt) 20%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--signboard) 70%, var(--gilt) 30%),
    inset 0 0 0 14px var(--signboard),
    inset 0 0 0 15px color-mix(in srgb, var(--gilt) 42%, transparent),
    inset 0 0 0 20px var(--signboard);
  overflow: hidden;
}

.signboard::before,
.signboard::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--gilt);
  opacity: 0.55;
  transform: translateX(-50%) rotate(45deg);
}
.signboard::before { top: 10px; }
.signboard::after  { bottom: 10px; }

.signboard .wordmark {
  font-family: "IM Fell English", Georgia, serif;
  color: var(--gilt);
  text-align: center;
  font-size: clamp(2.5rem, 8vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: 0.04em;
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--gilt) 30%, transparent),
    0 0 18px color-mix(in srgb, var(--gilt) 10%, transparent);
}

.signboard .wordmark .line {
  display: block;
}

.signboard .estline {
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  color: color-mix(in srgb, var(--gilt) 85%, transparent);
  text-align: center;
  letter-spacing: 0.3em;
  font-size: clamp(0.72rem, 1.2vw, 0.95rem);
  margin-top: 1.1rem;
  text-transform: uppercase;
}

.signboard .painted-underline {
  display: block;
  width: clamp(120px, 22vw, 280px);
  height: 4px;
  margin: 1.2rem auto 0;
  background: var(--wine);
  border-radius: 1px;
  transform: rotate(-0.4deg);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wine) 60%, var(--signboard) 40%);
}

/* reveal on load */
@media (prefers-reduced-motion: no-preference) {
  .signboard .wordmark,
  .signboard .estline {
    opacity: 0;
    transform: translateY(4px);
    animation: paint-in 900ms ease forwards;
  }
  .signboard .estline { animation-delay: 200ms; }
  .signboard .painted-underline {
    transform-origin: left center;
    transform: scaleX(0) rotate(-0.4deg);
    animation: stroke-in 700ms ease 450ms forwards;
  }
  @keyframes paint-in {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes stroke-in {
    to { transform: scaleX(1) rotate(-0.4deg); }
  }
}

/* Cream "shelf" below the signboard with today-line + CTA */
.shelf {
  background: var(--clapboard);
  padding: clamp(22px, 3.5vw, 36px) clamp(24px, 5vw, 64px);
  text-align: center;
  border-top: 1px solid var(--hair);
  position: relative;
}
.shelf .today {
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  color: var(--ink);
  margin: 0 0 1rem;
}
.shelf .status-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-family: "EB Garamond", serif;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.shelf .status-row .divider {
  color: var(--hair);
}

/* ------------------------------------------------------------------
   CTA — the phone button is a gilt-on-black plate
   ------------------------------------------------------------------ */
.cta-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  background: var(--signboard);
  color: var(--gilt);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--gilt) 55%, var(--signboard) 45%);
  box-shadow:
    inset 0 0 0 3px var(--signboard),
    inset 0 0 0 4px color-mix(in srgb, var(--gilt) 40%, transparent);
  transition: transform 120ms ease, background 200ms ease;
  min-height: 44px;
}
.cta-call:hover { background: #000; color: var(--clapboard); }
.cta-call:active { transform: translateY(1px); }

.cta-cream {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.3rem;
  background: var(--clapboard-dim);
  color: var(--ink);
  border: 1px solid var(--hair);
  font-family: "IM Fell English", Georgia, serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.92rem;
  min-height: 44px;
}
.cta-cream:hover { background: var(--clapboard); color: var(--wine); }

/* ------------------------------------------------------------------
   SIGNATURE 2 — Numbered-drawer chip row
   ------------------------------------------------------------------ */
.drawer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 2.6rem auto;
  padding: 0 1rem;
}
.drawer-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 52px;
  padding: 6px 10px;
  background: var(--clapboard-dim);
  border: 1px solid color-mix(in srgb, var(--gilt) 55%, var(--signboard) 10%);
  color: var(--ink);
  text-decoration: none;
  font-family: "IM Fell English", Georgia, serif;
  text-align: center;
  transition: background 180ms ease, transform 120ms ease;
  position: relative;
}
.drawer-chip::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent);
  pointer-events: none;
}
.drawer-chip .num {
  font-size: 1.15rem;
  color: var(--wine);
  line-height: 1;
  letter-spacing: 0.04em;
}
.drawer-chip .lbl {
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--ink-soft);
}
.drawer-chip:hover {
  background: var(--clapboard);
  color: var(--wine);
  transform: translateY(-1px);
}
.drawer-chip:hover .lbl { color: var(--wine); }

/* ------------------------------------------------------------------
   SIGNATURE 3 — Ledger ticket (category card)
   ------------------------------------------------------------------ */
.ticket {
  background: var(--clapboard-dim);
  color: var(--ink);
  padding: 28px 30px 32px;
  position: relative;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
}
.ticket .tnum {
  font-family: "IM Fell English", Georgia, serif;
  color: var(--wine);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.4rem;
}
.ticket h3 {
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1.55rem;
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.ticket .tkr {
  display: flex; align-items: center; gap: 10px;
  margin: 0.5rem 0 1rem;
}
.ticket .tkr::before,
.ticket .tkr::after {
  content: ""; flex: 1; height: 1px;
  background: var(--hair);
}
.ticket .tkr .mark {
  color: var(--gilt);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
}
.ticket ul {
  list-style: none; padding: 0; margin: 0.6rem 0 0;
  font-size: 1.02rem;
}
.ticket ul li {
  padding: 6px 0 6px 1.2rem;
  position: relative;
  border-bottom: 1px dashed var(--hair);
  color: var(--ink);
}
.ticket ul li:last-child { border-bottom: none; }
.ticket ul li::before {
  content: "❦";
  position: absolute;
  left: 0;
  color: var(--gilt);
  font-size: 0.9rem;
  top: 6px;
}

/* ------------------------------------------------------------------
   SIGNATURE 4 — Wine-ribbon section banner
   ------------------------------------------------------------------ */
.ribbon {
  background: var(--wine);
  color: var(--gilt);
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 14px 18px;
  font-size: 0.9rem;
  position: relative;
  border-top: 1px solid var(--signboard);
  border-bottom: 1px solid var(--signboard);
}
.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px; height: 1px;
  background: color-mix(in srgb, var(--gilt) 70%, transparent);
}
.ribbon::before { left: calc(50% - 120px); transform: translateY(-50%); }
.ribbon::after  { left: calc(50% + 102px); transform: translateY(-50%); }

/* ------------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------------ */
section { padding: clamp(40px, 6vw, 72px) 0; }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1.8rem;
  padding: 0 1rem;
}
.section-head .kicker {
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  color: var(--wine);
  letter-spacing: 0.24em;
  font-size: 0.82rem;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.6rem;
}
.section-head h2 { margin-bottom: 0.5rem; }
.section-head .sub {
  font-family: "EB Garamond", serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.hair-rule {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 2.4rem 0;
  color: var(--gilt);
}
.hair-rule::before,
.hair-rule::after {
  content: "";
  height: 1px;
  width: 80px;
  background: var(--hair);
}
.hair-rule span { font-size: 0.85rem; }

/* ------------------------------------------------------------------
   Wrapple pull-out (special article)
   ------------------------------------------------------------------ */
.wrapple-pull {
  background: var(--clapboard-dim);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  position: relative;
}
.wrapple-pull::before {
  content: "Nº 01";
  position: absolute;
  top: 14px; right: 18px;
  font-family: "IM Fell English", Georgia, serif;
  color: var(--wine);
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.wrapple-pull .lede {
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 720px;
}
.wrapple-pull .lede em { color: var(--wine); font-style: italic; }

.wrapple-pull .attrib {
  font-family: "EB Garamond", serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 1rem;
}

/* ------------------------------------------------------------------
   Photo placeholders — deliberate "coming soon" cards
   ------------------------------------------------------------------ */
.photo-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 20px;
  background: var(--clapboard);
  border: 1px dashed var(--wine);
  color: var(--ink-soft);
  font-family: "EB Garamond", serif;
  font-style: italic;
  min-height: 180px;
  position: relative;
}
.photo-note::before {
  content: "Photograph";
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  color: var(--gilt);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-style: normal;
}

/* ------------------------------------------------------------------
   Hours grid
   ------------------------------------------------------------------ */
.hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 22px;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1.08rem;
  max-width: 380px;
  margin: 0 auto;
}
.hours-grid .day { color: var(--wine); letter-spacing: 0.05em; }
.hours-grid .time { color: var(--ink); }

/* ------------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------------ */
.site-header {
  background: var(--clapboard);
  border-bottom: 1px solid var(--hair);
}
.site-header .brand {
  font-family: "IM Fell English", Georgia, serif;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.14em;
}
.site-header nav a {
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.82rem;
  margin-left: 1.6rem;
}
.site-header nav a:hover { color: var(--wine); }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
footer.site {
  background: var(--signboard);
  color: var(--clapboard);
  padding: clamp(30px, 4vw, 50px) 0 0;
  margin-top: 3rem;
}
footer.site a { color: var(--gilt); }
footer.site .display-sc { color: var(--gilt); letter-spacing: 0.28em; font-size: 0.82rem; }
footer.site .tiny {
  text-align: center;
  font-size: 0.78rem;
  padding: 18px 10px;
  color: color-mix(in srgb, var(--clapboard) 60%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--clapboard) 16%, transparent);
}

/* ------------------------------------------------------------------
   Timeline (year markers)
   ------------------------------------------------------------------ */
.timeline {
  display: grid;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1rem;
}
.timeline .yr {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.timeline .yr:last-child { border-bottom: none; }
.timeline .yr .num {
  font-family: "IM Fell English", Georgia, serif;
  color: var(--wine);
  font-size: 1.6rem;
  line-height: 1;
}
.timeline .yr p { margin: 0; font-size: 1rem; }

/* ------------------------------------------------------------------
   Mobile tune-up
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .signboard { padding: 36px 18px; }
  .signboard .wordmark { font-size: clamp(2.1rem, 11vw, 3rem); letter-spacing: 0.02em; }
  .signboard .estline { font-size: 0.68rem; letter-spacing: 0.22em; }
  .shelf .today { font-size: 1.25rem; }
  .drawer-chip { min-width: 64px; padding: 5px 8px; }
  .ribbon { letter-spacing: 0.2em; font-size: 0.8rem; padding: 10px 14px; }
  .ticket { padding: 22px 20px 26px; }
  .timeline .yr { grid-template-columns: 68px 1fr; gap: 14px; }
}

/* ------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------ */
.muted { color: var(--ink-soft); }
.italic { font-style: italic; }
.center { text-align: center; }