/* =============================================================
   SELIGMAN COMMERCIAL HISTORIC DISTRICT — Hero 1C
   "Typography-First — no photo needed"
   Production build: scaffold removed, responsive sizing, reduced-motion.
   Fonts loaded via homepage head_extra block (Google Fonts).
   ============================================================= */

/* ===================== HERO COMPONENT ===================== */
.c1c {
  position: relative;
  width: 100%;
  min-height: min(760px, 100svh);
  overflow: hidden;
  font-family: "Oswald", sans-serif;
  color: #2c1c12;
  background: radial-gradient(130% 110% at 88% 18%, #f6ddae 0%, #f0c483 30%, #e39a52 58%, #c8632f 100%);
}

/* printed-poster sunburst */
.c1c-burst {
  position: absolute;
  top: -28%;
  right: -14%;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,240,210,.5) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 38%, transparent 60%);
  mask: radial-gradient(circle, #000 0 38%, transparent 60%);
  opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  .c1c-burst {
    animation: c1cspin 90s linear infinite;
  }
}

@keyframes c1cspin { to { transform: rotate(360deg); } }

/* halftone dots */
.c1c-halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: radial-gradient(#5a2716 1.1px, transparent 1.3px);
  background-size: 11px 11px;
}

/* warm vignette */
.c1c-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 200px 40px rgba(120,47,28,.32);
}

/* editorial nav strip — inside the hero (the "middle" nav) */
.c1c-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 50px;
}

.c1c-brand {
  font-family: "Alfa Slab One", serif;
  font-size: 19px;
  letter-spacing: .5px;
  color: #2c1c12;
  line-height: 1.05;
}

.c1c-brand small {
  display: block;
  white-space: nowrap;
  font-family: "Special Elite", monospace;
  font-size: 9px;
  letter-spacing: 3px;
  opacity: .65;
}

.c1c-links {
  display: flex;
  gap: 30px;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.c1c-links a {
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
  color: #2c1c12;
  text-decoration: none;
}

.c1c-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #b8542a;
  transition: width .24s ease-out;
}

.c1c-links a:hover::after { width: 100%; }
.c1c-links a:hover { text-decoration: none; }

/* Route 66 shield — the only "image" */
.c1c-shield {
  position: absolute;
  top: 96px;
  right: 60px;
  z-index: 4;
  transform: rotate(-4deg);
  opacity: .96;
  filter: drop-shadow(0 16px 26px rgba(80,30,16,.35));
}

/* headline block, anchored upper-left */
.c1c-content {
  position: absolute;
  left: 56px;
  top: 92px;
  z-index: 5;
  max-width: 820px;
}

.c1c-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-family: "Special Elite", monospace;
  font-size: 13px;
  letter-spacing: 5px;
  color: #8a3a20;
  margin-bottom: 14px;
}

.c1c-eyebrow .rule {
  width: 46px;
  height: 2px;
  background: #b8542a;
  flex-shrink: 0;
}

.c1c-title {
  font-family: "Alfa Slab One", serif;
  color: #3a2114;
  line-height: .9;
  font-size: clamp(52px, 8vw, 104px);
  margin: 0;
}

.c1c-title em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-weight: 400;
  color: #b8542a;
  display: block;
  font-size: clamp(37px, 5.6vw, 72px);
  line-height: .95;
  margin-top: 6px;
}

.c1c-sub {
  margin: 26px 0 0;
  max-width: 540px;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: #5a3320;
}

.c1c-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.c1c-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  background: #2c1c12;
  color: #ffe7b8;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  padding: 15px 30px;
  border-radius: 2px;
  box-shadow: 0 8px 16px rgba(80,30,16,.3);
  transition: transform .2s, background .2s;
  text-decoration: none;
}

.c1c-cta:hover {
  transform: translateY(-2px);
  background: #b8542a;
  text-decoration: none;
  color: #ffe7b8;
}

.c1c-ghost {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: #8a3a20;
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: border-color .2s;
  text-decoration: none;
}

.c1c-ghost:hover {
  border-color: #b8542a;
  text-decoration: none;
  color: #8a3a20;
}

/* bottom ticker strip */
.c1c-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 46px;
  background: #2c1c12;
  color: #ffd98a;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 50px;
  font-family: "Special Elite", monospace;
  font-size: 12px;
  letter-spacing: 3px;
  overflow: hidden;
  white-space: nowrap;
}

.c1c-strip .dot { color: #ff5800; }

/* Route 66 shield SVG */
.shieldsvg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .c1c-shield {
    width: 140px;
    top: 70px;
    right: 20px;
    opacity: .7;
  }
  .c1c-content {
    left: 24px;
    top: 70px;
    max-width: calc(100% - 48px);
  }
  .c1c-nav {
    padding: 14px 24px;
  }
  .c1c-links {
    gap: 18px;
    font-size: 11px;
  }
  .c1c-sub {
    max-width: 100%;
    font-size: 16px;
  }
  .c1c-strip {
    gap: 20px;
    padding: 0 24px;
    font-size: 10px;
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  .c1c-links { display: none; }
  .c1c-shield { opacity: .35; width: 110px; right: 10px; top: 50px; }
  .c1c-nav { padding: 12px 20px; }
  .c1c-content { left: 20px; top: 60px; }
  .c1c-strip { gap: 16px; }
  .c1c-cta { padding: 12px 22px; font-size: 13px; }
}