/* Deptford High Street Hamper: landing page. Tokens mirror brand/tokens.css */
@font-face { font-family: "Bebas Neue"; src: url(fonts/bebas-neue-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url(fonts/josefin-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --dhh-pink: #C93463;
  --dhh-pink-deep: #A6264F;
  --dhh-navy: #1A2238;
  --dhh-white: #FFFFFF;
  --dhh-chalk: #F7F2EC;
  --dhh-kraft: #C8A57A;
  --dhh-rule: rgb(26 34 56 / 0.18);
  --dhh-font-display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  --dhh-font-label: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --dhh-font-body: "Source Serif 4", Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--dhh-chalk);
  color: var(--dhh-navy);
  font: 400 1.125rem/1.6 var(--dhh-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main, .top, footer, .traders-inner { max-width: 70rem; margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 720px) { main, .top, footer, .traders-inner { padding-inline: 2rem; } }

/* Labels */
.top, .tag, .signup label, .num, footer, .ticker, .svg-label {
  font-family: var(--dhh-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
}
.top {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.25rem; font-size: .72rem; border-bottom: 1px dashed var(--dhh-rule);
}

/* Hero */
.hero { display: grid; gap: 1.5rem; align-items: center; padding-block: 2rem 3rem; }
@media (min-width: 860px) {
  .hero { grid-template-columns: .9fr 1.1fr; gap: 3rem; padding-block: 3.5rem 4rem; }
}
.hero-stamp { justify-self: center; width: min(72vw, 26rem); }
.stamp {
  display: block; width: 100%; height: auto;
  clip-path: circle(49.6%); mix-blend-mode: multiply;
  transform: rotate(-6deg);
  animation: stamp-press .75s cubic-bezier(.2, .9, .3, 1.2) .15s both;
  transition: transform .4s ease;
}
.stamp:hover { transform: rotate(-2deg) scale(1.02); }
@keyframes stamp-press {
  0%   { opacity: 0; transform: scale(1.7) rotate(-18deg); filter: blur(3px); }
  55%  { opacity: 1; transform: scale(.94) rotate(-5deg); filter: blur(0); }
  75%  { transform: scale(1.02) rotate(-6.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}

.hero-text { animation: rise .7s ease .55s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tag {
  display: inline-block; padding: .4rem .9rem .3rem;
  background: var(--dhh-pink); color: var(--dhh-white); font-size: .72rem;
  transform: rotate(-2deg);
}
h1 {
  margin: 1rem 0 .75rem;
  font: 400 clamp(3.5rem, 12vw, 7rem)/.92 var(--dhh-font-display);
  letter-spacing: .02em; text-transform: uppercase;
}
.lede { max-width: 32rem; margin: 0 0 2rem; }

/* Sign-up */
.signup { max-width: 30rem; }
.signup label { display: block; margin-bottom: .5rem; font-size: .75rem; }
.signup .row { display: flex; flex-wrap: wrap; gap: .5rem; }
.signup input[type=email] {
  flex: 1 1 14rem; min-width: 0; padding: .8rem 1rem;
  font: inherit; font-size: 1rem; color: var(--dhh-navy); background: var(--dhh-white);
  border: 2px solid var(--dhh-navy); border-radius: 3px;
}
.signup button {
  flex: 0 0 auto; padding: .85rem 1.4rem .7rem;
  font: 400 1.25rem/1 var(--dhh-font-display); letter-spacing: .06em;
  color: var(--dhh-white); background: var(--dhh-pink);
  border: 2px solid var(--dhh-pink); border-radius: 3px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.signup button:hover { background: var(--dhh-pink-deep); border-color: var(--dhh-pink-deep); }
.signup button:active { transform: translateY(1px) rotate(-1deg); }
.signup input:focus-visible, .signup button:focus-visible, a:focus-visible {
  outline: 3px solid var(--dhh-navy); outline-offset: 3px;
}
.signup small { display: block; margin-top: .6rem; font-size: .9rem; font-style: italic; }
.hp { position: absolute; left: -9999px; }

/* The street scene */
.scene { margin: 0; line-height: 0; }
.scene svg { display: block; width: 100%; height: clamp(230px, 30vw, 360px); }
.svg-label { letter-spacing: .2em; }

/* Market-day awnings and bunting in the wind */
.awning { transform-box: fill-box; transform-origin: 50% 0; animation: flap 3.2s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes flap { from { transform: skewX(-2.5deg) scaleY(.97); } to { transform: skewX(2.5deg) scaleY(1.02); } }
.bunting { transform-box: fill-box; transform-origin: 50% 0; animation: bunting 4s ease-in-out infinite alternate; }
@keyframes bunting { from { transform: translateY(-1px) skewX(-1deg); } to { transform: translateY(2px) skewX(1deg); } }

/* Hanging shop sign */
.swing { transform-box: fill-box; transform-origin: 50% 0; animation: swing 2.8s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* Shoppers walking the High Street (base positions are used when motion is reduced) */
.w1 { transform: translateX(520px); animation: walk-right 26s linear infinite; }
.w2 { transform: translateX(820px); animation: walk-left 32s linear infinite; animation-delay: -9s; }
.w3 { transform: translateX(180px); animation: walk-right 38s linear infinite; animation-delay: -21s; }
@keyframes walk-right { from { transform: translateX(-40px); } to { transform: translateX(1240px); } }
@keyframes walk-left { from { transform: translateX(1240px); } to { transform: translateX(-40px); } }
.step { animation: step .38s ease-in-out infinite alternate; }
@keyframes step { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.leg-a, .leg-b { transform-box: fill-box; transform-origin: 50% 0; animation: leg .38s ease-in-out infinite alternate; }
.leg-b { animation-direction: alternate-reverse; }
@keyframes leg { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

/* Pigeons pecking by the stalls */
.peck { transform-box: fill-box; transform-origin: 30% 100%; animation: peck 1.6s ease-in-out infinite; }
@keyframes peck { 0%, 60%, 100% { transform: rotate(0); } 70%, 85% { transform: rotate(22deg); } }

/* Ticker */
.ticker { background: var(--dhh-pink); color: var(--dhh-white); overflow: hidden; font-size: .78rem; padding-block: .8rem .65rem; }
.ticker-track { display: flex; width: max-content; align-items: center; animation: ticker 40s linear infinite; }
.ticker span { white-space: nowrap; padding-inline: 1.1rem; }
.ticker i {
  width: .9rem; height: .9rem; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='4' r='2.2'/%3E%3Cpath d='M12 6.2V21M7 9h10M4 14c1 4 4 7 8 7s7-3 8-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* What it is */
.three { display: grid; gap: 2.25rem; padding-block: 3.5rem; }
@media (min-width: 720px) { .three { grid-template-columns: repeat(3, 1fr); padding-block: 4.5rem; } }
.num { display: block; color: var(--dhh-pink-deep); font-size: .75rem; }
.three h2 { margin: .4rem 0 .3rem; font: 400 2rem/1 var(--dhh-font-display); letter-spacing: .02em; text-transform: uppercase; }
.three p { margin: 0; }

/* Who's in the box: tag carousel */
.makers { padding-block: 1rem 4.5rem; border-top: 1px dashed var(--dhh-rule); }
.makers-head { max-width: 70rem; margin: 0 auto; padding: 3rem 1rem 1.5rem; }
@media (min-width: 720px) { .makers-head { padding-inline: 2rem; } }
.makers h2 { margin: .4rem 0 .3rem; font: 400 clamp(2.4rem, 7vw, 4rem)/1 var(--dhh-font-display); letter-spacing: .02em; text-transform: uppercase; }
.makers-head p { margin: 0; max-width: 34rem; }

.carousel {
  overflow: hidden; padding-block: 1.5rem 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carousel-track {
  /* left padding equals the gap so translateX(-50%) loops seamlessly */
  display: flex; gap: 1.25rem; width: max-content; margin: 0; padding: 0 0 0 1.25rem; list-style: none;
  animation: carousel 60s linear infinite;
}
.carousel:hover .carousel-track, .carousel:focus-within .carousel-track { animation-play-state: paused; }
@keyframes carousel { to { transform: translateX(-50%); } }

/* Each name is a kraft swing tag */
.carousel-track li {
  position: relative; flex: none;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 12.5rem; min-height: 7.5rem; padding: 1.4rem 1.6rem 1.1rem 2.6rem;
  background: var(--dhh-kraft); color: var(--dhh-navy);
  font: 400 calc(1.85rem * var(--s, 1))/1 var(--dhh-font-display); letter-spacing: .03em; text-transform: uppercase; text-align: center;
  clip-path: polygon(1.4rem 0, 100% 0, 100% 100%, 1.4rem 100%, 0 50%);
  transform: rotate(-2deg);
  transition: transform .25s ease;
}
.carousel-track li:nth-child(even) { transform: rotate(1.5deg) translateY(6px); }
.carousel-track li:nth-child(3n):not([class]) { background: var(--dhh-pink); color: var(--dhh-white); }
.carousel-track li:hover { transform: rotate(0) translateY(-4px); }
/* hole + string */
.carousel-track li::before {
  content: ""; position: absolute; left: 1.05rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.35rem;
  border-radius: 50%; background: var(--dhh-chalk); box-shadow: inset 0 0 0 2px var(--dhh-navy);
}
.carousel-track li::after {
  content: ""; position: absolute; inset: .45rem .45rem .45rem 2rem;
  border: 1.5px dashed currentColor; opacity: .35; pointer-events: none;
}
.carousel-track small {
  display: block; margin-top: .45rem;
  font: 600 .66rem/1 var(--dhh-font-label); letter-spacing: .18em;
}
.carousel-track li.more { background: var(--dhh-navy); color: var(--dhh-white); }

/* Trader wordmarks: approximations of each trader's own logo colours and lettering.
   Swap for their real logo files once we have them (with permission). Shared with promo/short. */
@font-face { font-family: "Rye"; src: url(fonts/rye-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Abril Fatface"; src: url(fonts/abril-fatface-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bowlby One"; src: url(fonts/bowlby-one-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; src: url(fonts/anton-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url(fonts/yellowtail-latin-400-normal.woff2) format("woff2"); font-display: swap; }

:is(.carousel-track li, .ttag).b-elsewhere { background: #FAB03C; color: #000F9F; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; text-transform: none; letter-spacing: -.02em; --s: 1.1; }
:is(.carousel-track li, .ttag).b-bigjs     { background: #B08848; color: #111; font-family: "Rye", serif; --s: .9; }
:is(.carousel-track li, .ttag).b-gobsmackd { background: #F0E000; color: #111; font-family: "Bowlby One", sans-serif; --s: .78; }
:is(.carousel-track li, .ttag).b-gobsmackd small { color: #C8201E; }
:is(.carousel-track li, .ttag).b-jars      { background: #000; color: #fff; font-family: "Anton", sans-serif; letter-spacing: .02em; --s: 1.05; }
:is(.carousel-track li, .ttag).b-villages  { background: #fff; color: #28A088; font-family: "Anton", sans-serif; --s: 1.1; }
:is(.carousel-track li, .ttag).b-waiting   { background: #000; color: #fff; font-family: "Rye", serif; --s: .68; }
:is(.carousel-track li, .ttag).b-dogbell   { background: #fff; color: #111; font-family: "Abril Fatface", serif; letter-spacing: .01em; --s: .95; }
:is(.carousel-track li, .ttag).b-lucky     { background: #102048; color: #E85008; font-family: "Bowlby One", sans-serif; --s: .8; }
:is(.carousel-track li, .ttag).b-lucky small { font: 400 1.15em/1 "Yellowtail", cursive; letter-spacing: 0; text-transform: none; color: #F4E6CF; }
:is(.carousel-track li, .ttag)[class*="b-"]::before { box-shadow: inset 0 0 0 2px currentColor; }

@media (prefers-reduced-motion: reduce) {
  .carousel { -webkit-mask-image: none; mask-image: none; }
  .carousel-track { flex-wrap: wrap; width: auto; max-width: 70rem; margin: 0 auto; padding-inline: 1rem; }
  .carousel-track li[aria-hidden] { display: none; }
}

/* Traders */
.traders { background: var(--dhh-navy); color: var(--dhh-white); }
.traders-inner { padding-block: 3.5rem 4rem; }
.traders h2 { margin: 0 0 .5rem; font: 400 clamp(2.2rem, 6vw, 3.2rem)/1 var(--dhh-font-display); letter-spacing: .02em; text-transform: uppercase; }
.traders p { margin: 0 0 1.25rem; max-width: 34rem; }
.link-light { color: var(--dhh-white); font-weight: 600; text-decoration-color: var(--dhh-pink); text-decoration-thickness: 2px; text-underline-offset: 4px; word-break: break-word; }
.link-light:hover { text-decoration-color: var(--dhh-white); }
.traders a:focus-visible { outline-color: var(--dhh-white); }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding-block: 1.75rem 2.25rem; font-size: .68rem;
}

/* Thanks page */
.thanks { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; padding-block: 3rem; }
.thanks .stamp { width: min(50vw, 12rem); }
.thanks h1 { font-size: clamp(3rem, 12vw, 5rem); }
.thanks p { max-width: 28rem; margin: 0 auto 1.5rem; }
.thanks a { color: var(--dhh-pink-deep); font-weight: 600; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stamp { transform: rotate(-6deg); }
}