/* ============================================================================
   Sundry Goods — the shop sign
   Mid-century small-town Americana, the corner shop circa 1965.
   Palette pinned here is the canonical source of truth for the brand tokens.
   ========================================================================= */

:root {
  /* Kodachrome, not modern — lightly desaturated warm print colors */
  --paper: #f7efdd; /* off-white stock */
  --paper-deep: #efe4cb; /* shaded paper, for vignette */
  --ink: #2b2a26; /* body / tagline text */
  --tomato: #e24e3b; /* the wordmark */
  --gold: #e8a33d; /* badge, accents */
  --avocado: #7e8b3f; /* ornament, badge ring */
  --turquoise: #3fa9a0; /* misregistration ghost */

  --font-script: "Grand Hotel", "Brush Script MT", cursive;
  --font-sans: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
}

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

html {
  height: 100%;
}

body {
  min-height: 100svh;
  overflow-x: hidden; /* guard against the wordmark's offset ghost nudging the edge */
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--paper);
  /* faint mid-century sunburst + a soft paper vignette layered under content */
  background-image:
    repeating-conic-gradient(
      from 0deg at 50% 42%,
      rgba(232, 163, 61, 0.05) 0deg 4deg,
      transparent 4deg 8deg
    ),
    radial-gradient(
      ellipse 120% 120% at 50% 40%,
      transparent 55%,
      var(--paper-deep) 100%
    );
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- print grain overlay ---------------------------------------------------
   An inlined feTurbulence noise, multiplied over the page at low opacity so
   the paper reads as printed stock rather than a flat fill. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* --- the sign: one centered composition ---------------------------------- */
.sign {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 3.5vw, 2.4rem);
  padding: 8vh clamp(1.25rem, 5vw, 3rem);
  text-align: center;
}

/* --- wordmark with faint ink misregistration ----------------------------- */
.wordmark {
  position: relative;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.6rem, 13vw, 9rem);
  line-height: 0.95;
  color: var(--tomato);
  /* the script sits slightly tilted, like a hand-set sign */
  transform: rotate(-2.5deg);
  padding: 0 0.12em; /* room for the ghost + descenders */
  max-width: 100%;
}

.wordmark__main {
  position: relative;
  display: inline-block;
}

/* the offset color plate — the signature "just-off" printing detail */
.wordmark__main::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--turquoise);
  transform: translate(0.035em, 0.03em);
  z-index: -1;
  opacity: 0.55;
}

/* the small deadpan-formal "Co." tucked up off the script */
.wordmark__co {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.2em;
  letter-spacing: 0.06em;
  color: var(--tomato);
  vertical-align: 0.9em;
  margin-left: 0.18em;
}

/* --- tagline in tracked geometric caps, flanked by hairline rules --------- */
.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 2vw, 1.15rem);
  max-width: min(92vw, 40rem);
  /* extra breathing room off the script's descenders + tilt */
  margin-top: clamp(0.6rem, 2.2vw, 1.6rem);
}

.tagline__text {
  font-size: clamp(0.72rem, 2vw, 1.02rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: 0.3em;
  white-space: nowrap;
}

/* hairline rule with a small diamond nub at its inner end */
.rule {
  position: relative;
  width: clamp(1.4rem, 6vw, 3.5rem);
  height: 1px;
  background: currentColor;
  color: var(--avocado);
  flex: 0 0 auto;
}
.rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.tagline .rule:first-child::after {
  right: -2px;
}
.tagline .rule:last-child::after {
  left: -2px;
}

/* --- est. medallion ------------------------------------------------------- */
.badge {
  width: clamp(5rem, 13vw, 6.75rem);
  height: auto;
  margin-top: clamp(0.6rem, 2.4vw, 1.4rem);
  overflow: visible;
  /* a soft printed drop, so the medallion lifts off the sunburst */
  filter: drop-shadow(0 3px 5px rgba(43, 42, 38, 0.16));
}
.badge__outer {
  fill: none;
  stroke: var(--avocado);
  stroke-width: 2;
}
.badge__fill {
  /* a touch deeper than --avocado so cream text stays legible */
  fill: #6f7c37;
}
.badge__keyline {
  fill: none;
  stroke: var(--paper);
  stroke-width: 0.75;
  opacity: 0.65;
}
.badge__star {
  fill: var(--gold);
}
.badge__est {
  fill: var(--paper);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 2.4px;
  text-anchor: middle;
}
/* the year in the wordmark's script — the emphasized, distinct note */
.badge__year {
  fill: var(--paper);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 24px;
  text-anchor: middle;
}

/* --- one orchestrated page load ------------------------------------------ */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* the wordmark keeps its tilt while it rises */
@keyframes rise-tilted {
  from {
    opacity: 0;
    transform: translateY(14px) rotate(-2.5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-2.5deg);
  }
}

.wordmark,
.tagline,
.badge {
  opacity: 0;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.wordmark {
  animation-name: rise-tilted;
  animation-delay: 0.1s;
}
.tagline {
  animation-delay: 0.45s;
}
.badge {
  animation-delay: 0.7s;
}

/* --- narrow screens ------------------------------------------------------
   Scale the wordmark to sit comfortably on one line, and retire the tagline
   rules (which would otherwise push the phrase off the edge). */
@media (max-width: 560px) {
  .wordmark {
    font-size: clamp(2.6rem, 14vw, 4rem);
  }
  .tagline__text {
    white-space: normal;
    letter-spacing: 0.24em;
    padding-left: 0.24em;
  }
  .tagline .rule {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .tagline,
  .badge {
    animation: none;
    opacity: 1;
  }
}