:root{
  --cream:#F6EDDA;
  --teal:#17707C;
  --teal-deep:#0E4A52;
  --cherry:#D8323C;
  --mustard:#E8A33D;
  --asphalt:#2B2723;
  --line-yellow:#F2C230;
  --paper:#FFFDF6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Fauna One',serif;
  background:var(--cream);
  color:var(--asphalt);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- utility type ---------- */
.road-label{
  font-family:'Overpass',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
}
h1,h2,h3,.display{font-family:'Oregano',cursive;font-weight:400;line-height:1.15;letter-spacing:.01em}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- top nav ---------- */
header{
  background:var(--teal-deep);
  color:var(--cream);
  position:sticky;top:0;z-index:50;
  border-bottom:4px solid var(--mustard);
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.2rem;flex-wrap:wrap;gap:.5rem;
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:40px;width:auto}
nav ul{display:flex;list-style:none;gap:1.4rem;flex-wrap:wrap}
nav a{
  text-decoration:none;font-family:'Overpass',sans-serif;font-weight:600;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;
  padding:.25rem 0;border-bottom:2px solid transparent;transition:border-color .2s;
}
nav a:hover,nav a:focus-visible{border-color:var(--mustard)}
a:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}

/* ---------- hero: the motel sign ---------- */
.hero{
  background:
    radial-gradient(ellipse at 50% 120%, rgba(232,163,61,.25), transparent 60%),
    linear-gradient(180deg,#0E4A52 0%, #17707C 55%, #2b8f97 100%);
  color:var(--cream);
  padding:4rem 1.2rem 0;
  position:relative;
}
.hero-inner{
  max-width:1050px;margin:0 auto;
  display:grid;grid-template-columns:auto 1fr;
  gap:3.5rem;align-items:center;
}
.sign-unit{position:relative;text-align:center}
.stock-sign{
  position:relative;
  width:min(520px,92vw);
  margin:0 auto;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.35));
}
.stock-sign .frame{width:100%;height:auto;display:block}
/* neon ambience: the whole sign breathes like lit neon */
.stock-sign{animation:neonbreathe 5s ease-in-out infinite}
@keyframes neonbreathe{
  0%,100%{filter:drop-shadow(0 14px 24px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(255,233,168,.25))}
  50%{filter:drop-shadow(0 14px 24px rgba(0,0,0,.35)) drop-shadow(0 0 34px rgba(255,233,168,.5))}
}
/* glow + sparkle riding on the artwork's starburst (center 79%, 17%) */
.star-glow{
  position:absolute;left:79%;top:17%;
  width:34%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,225,130,.55) 0%, rgba(255,225,130,.18) 45%, transparent 70%);
  animation:starpulse 3s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes starpulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
.star-spark{
  position:absolute;left:86.5%;top:9%;
  font-size:clamp(1rem,4vw,1.5rem);color:#FFF3C4;
  text-shadow:0 0 10px #FFE9A8,0 0 20px rgba(232,163,61,.9);
  pointer-events:none;
  animation:sparkle 2.2s ease-in-out infinite;
}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
/* logo mounted on the big tilted panel (panel: x 147-856, y 217-628 of 940x1208) */
.stock-sign .mounted-logo{
  position:absolute;
  left:29.9%;top:26.5%;
  width:47%;height:auto;
  transform:rotate(4deg);
}
/* ART INSIDE on the lower panel (x 139-801, y 739-919 of 940x1208) */
.art-inside{
  position:absolute;
  left:15%;top:60%;
  width:70%;height:15%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15em;
}
.ai-main{
  font-family:'Overpass',sans-serif;font-weight:800;
  letter-spacing:.22em;color:#2B2723;
  font-size:clamp(1.1rem,5.2vw,1.5rem);
  animation:flicker 4s infinite;
}
.ai-sub{
  font-family:'Overpass',sans-serif;font-weight:600;
  letter-spacing:.08em;color:#2B2723;
  font-size:clamp(.5rem,2vw,.62rem);
}
@keyframes flicker{
  0%,92%,96%,100%{opacity:1}
  93%,95%{opacity:.35}
}
@media (prefers-reduced-motion: reduce){
  .ai-main,.stock-sign,.star-glow,.star-spark{animation:none}
  html{scroll-behavior:auto}
}
.hero-copy{max-width:480px;padding-bottom:4rem}
.hero .tagline{
  font-size:1.15rem;margin-top:1rem;line-height:1.75;
}
.hero .cta-row{margin-top:1.8rem;display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:820px){
  .hero{padding-top:3rem;text-align:center}
  .hero-inner{grid-template-columns:1fr;gap:2.2rem}
  .hero-copy{margin:0 auto;padding-bottom:3rem}
  .hero .cta-row{justify-content:center}
}
.btn{
  display:inline-block;text-decoration:none;
  font-family:'Overpass',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:.85rem;
  padding:.85rem 1.6rem;border-radius:8px;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--mustard);color:var(--asphalt);box-shadow:0 4px 0 #b57d24}
.btn-ghost{border:2px solid var(--cream);color:var(--cream)}

/* ---------- the highway spine ---------- */
main{position:relative}
section{position:relative;z-index:1;padding:4.5rem 1.2rem}
.mile{
  text-align:center;margin-bottom:2.4rem;
}
.mile .marker{
  display:inline-block;background:var(--paper);
  border:3px solid var(--asphalt);border-radius:8px;
  padding:.55rem 1.2rem .4rem;
  box-shadow:4px 4px 0 var(--asphalt);
}
.mile .marker .road-label{color:var(--teal-deep)}
.mile h2{font-size:clamp(1.7rem,4.5vw,2.5rem);margin-top:1.1rem}
.mile p.lede{max-width:560px;margin:.8rem auto 0;font-size:1.05rem}

/* ---------- gallery ---------- */
.gallery-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.6rem;
}
.card{
  background:var(--paper);
  border:3px solid var(--asphalt);
  border-radius:10px;
  overflow:hidden;
  box-shadow:6px 6px 0 rgba(43,39,35,.85);
  transition:transform .18s, box-shadow .18s;
  text-decoration:none;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(43,39,35,.85)}
.card img{width:100%;height:auto;display:block}
@media (min-width:640px){
  .gallery-grid{grid-template-columns:1fr 1fr;max-width:940px}
}
.card .card-body{padding:.9rem 1rem 1.1rem;text-align:left}
.card h3{font-size:1rem;line-height:1.3}
.card .place{font-size:.85rem;color:var(--teal-deep);margin-top:.25rem;font-style:italic}
.center-cta{text-align:center;margin-top:2.6rem}
.btn-dark{background:var(--teal);color:var(--cream);box-shadow:0 4px 0 var(--teal-deep)}

/* ---------- story stop ---------- */
.story{background:var(--teal-deep);color:var(--cream)}
.story .marker{background:var(--teal);border-color:var(--cream);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.story .marker .road-label{color:var(--mustard)}
.story-wrap{
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem;align-items:center;
}
.story-wrap img{
  border:5px solid var(--cream);border-radius:10px;
  box-shadow:10px 10px 0 rgba(0,0,0,.3);
}
.story blockquote{
  font-size:1.15rem;font-style:italic;line-height:1.8;
  border-left:4px solid var(--mustard);padding-left:1.2rem;
}
.story .attribution{margin-top:1rem;font-family:'Overpass',sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:var(--mustard)}
.story p.note{margin-top:1.4rem;font-size:.98rem;opacity:.9}

/* ---------- book ---------- */
.book-wrap{
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;
}
.book-wrap .price-tag{
  display:inline-block;background:var(--cherry);color:var(--cream);
  font-family:'Oregano',cursive;font-size:1.6rem;
  padding:.4rem 1rem;border-radius:8px;transform:rotate(-2deg);
  margin:1rem 0;
}
.book-cover{
  border:3px solid var(--asphalt);border-radius:10px;
  box-shadow:8px 8px 0 rgba(43,39,35,.85);
  overflow:hidden;
  transform:rotate(1.2deg);
  transition:transform .2s;
}
.book-cover:hover{transform:rotate(0)}
.book-cover img{width:100%;height:auto;display:block}

/* ---------- newsletter ---------- */
.postcard{
  max-width:640px;margin:0 auto;
  background:var(--paper);
  border:12px solid;
  border-image:repeating-linear-gradient(45deg,
    var(--cherry) 0 14px, var(--paper) 14px 28px, var(--teal) 28px 42px) 12;
  box-shadow:8px 8px 0 rgba(43,39,35,.85);
  padding:2.6rem 2rem 2.2rem;text-align:center;
  position:relative;
}
.postcard .stamp{
  position:absolute;top:14px;right:14px;
  width:52px;height:62px;
  background:var(--teal-deep);color:var(--mustard);
  border:3px dashed var(--paper);
  outline:2px solid var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  transform:rotate(3deg);
}
.postcard .postmark{
  position:absolute;top:26px;left:18px;
  font-family:'Overpass',sans-serif;font-weight:600;font-size:.55rem;
  letter-spacing:.14em;color:rgba(43,39,35,.45);
  border:2px solid rgba(43,39,35,.35);border-radius:50%;
  padding:.9em .6em;transform:rotate(-8deg);
}
.postcard h2{font-size:1.6rem;color:var(--teal-deep)}
.postcard p{margin:.8rem 0 1.4rem}
.postcard .form-note{
  border:2px dashed var(--teal);border-radius:8px;
  padding:1.4rem;color:var(--teal-deep);font-size:.95rem;
}

/* ---------- footer ---------- */
footer{
  background:var(--asphalt);color:var(--cream);
  padding:3rem 1.2rem 2.2rem;text-align:center;
}
footer .foot-links{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
footer a{text-decoration:none;font-family:'Overpass',sans-serif;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
footer a:hover{color:var(--mustard)}
footer .fine{font-size:.8rem;opacity:.65;margin-top:1rem}

@media (max-width:760px){
  .story-wrap,.book-wrap{grid-template-columns:1fr}
  main::before{left:24px}
}

/* ============================================
   1950s ATOMIC-AGE TOUCHES
   ============================================ */

/* faint halftone dot texture on the cream body, like vintage print */
body{
  background-image:radial-gradient(rgba(23,112,124,.07) 1.5px, transparent 1.5px);
  background-size:26px 26px;
}

/* scattered atomic starbursts in the evening-sky heroes */
.hero,.page-hero{position:relative;overflow:hidden}
.hero > *,.page-hero > *{position:relative;z-index:1}
.hero::before,.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 0 L25 19 L44 22 L25 25 L22 44 L19 25 L0 22 L19 19 Z' fill='%23F6EDDA' opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 44 44'%3E%3Cpath d='M22 0 L25 19 L44 22 L25 25 L22 44 L19 25 L0 22 L19 19 Z' fill='%23E8A33D' opacity='.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 44 44'%3E%3Cpath d='M22 0 L25 19 L44 22 L25 25 L22 44 L19 25 L0 22 L19 19 Z' fill='%23F6EDDA' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 44 44'%3E%3Cpath d='M22 0 L25 19 L44 22 L25 25 L22 44 L19 25 L0 22 L19 19 Z' fill='%23F6EDDA' opacity='.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 7% 18%, 90% 12%, 78% 82%, 12% 78%;
  animation:skytwinkle 6s ease-in-out infinite;
}
@keyframes skytwinkle{0%,100%{opacity:.5}50%{opacity:.25}}

/* diner-awning scalloped edge at the bottom of each hero */
.hero::after,.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:16px;z-index:2;pointer-events:none;
  background-image:radial-gradient(circle 9px at 12px 0px, var(--cream) 0 8px, transparent 9px);
  background-size:24px 16px;background-repeat:repeat-x;
}
.page-hero{border-bottom:none !important}

/* mile markers get atomic star accents */
.mile .marker .road-label::before{content:"\2726\00a0\00a0";color:var(--cherry)}
.mile .marker .road-label::after{content:"\00a0\00a0\2726";color:var(--cherry)}

/* postcard scatter: featured cards sit slightly askew, straighten on hover */
.gallery-grid .card:nth-child(odd){transform:rotate(-1.2deg)}
.gallery-grid .card:nth-child(even){transform:rotate(1deg)}
.gallery-grid .card:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:9px 9px 0 rgba(43,39,35,.85)}

/* big faint atomic burst behind the story section */
.story{position:relative;overflow:hidden}
.story > *{position:relative;z-index:1}
.story::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 0 L25 19 L44 22 L25 25 L22 44 L19 25 L0 22 L19 19 Z' fill='%23F6EDDA'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;opacity:.07;
}

/* footer: highway center line up top */
footer{border-top:5px dashed var(--line-yellow)}

@media (prefers-reduced-motion: reduce){
  .hero::before,.page-hero::before{animation:none}
}


/* animated "chasing lights" border on mile markers */
.mile .marker{position:relative}
.mile .marker::after{
  content:"";position:absolute;inset:-10px;border-radius:14px;pointer-events:none;
  background:
    linear-gradient(90deg,var(--mustard) 55%,transparent 55%) repeat-x left top/18px 3px,
    linear-gradient(90deg,var(--mustard) 55%,transparent 55%) repeat-x left bottom/18px 3px,
    linear-gradient(0deg,var(--mustard) 55%,transparent 55%) repeat-y left top/3px 18px,
    linear-gradient(0deg,var(--mustard) 55%,transparent 55%) repeat-y right top/3px 18px;
  animation:ants 1.4s linear infinite;
}
@keyframes ants{
  to{background-position:left 18px top, left -18px bottom, left top -18px, right top 18px}
}

/* horizontal road strips between sections: asphalt + dashed center line */
.roadstrip{
  height:38px;
  background-color:#3B3630;
  background-image:repeating-linear-gradient(90deg, var(--line-yellow) 0 38px, transparent 38px 70px);
  background-size:100% 6px;
  background-repeat:repeat-x;
  background-position:center;
  border-top:4px solid #262320;
  border-bottom:4px solid #262320;
  box-shadow:inset 0 6px 12px rgba(0,0,0,.3);
}

@media (prefers-reduced-motion: reduce){
  .mile .marker::after{animation:none}
}

/* little highway signs standing on the road strips */
.roadstrip{position:relative;overflow:visible}
.roadsign{
  position:absolute;bottom:34px;
  font-family:'Overpass',sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.08em;line-height:1.35;text-align:center;
  color:#fff;
  padding:.45rem .9rem;
  border:2px solid #F6EDDA;border-radius:6px;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.roadsign::after{ /* post down to the pavement */
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:100%;width:6px;height:30px;
  background:linear-gradient(90deg,#5a554e,#7b756c 45%,#5a554e);
}
.rs-green{background:#2E7D46;right:10%}
.rs-blue{background:#2A5CAA;left:10%}
@media (max-width:640px){
  .roadsign{font-size:.62rem;padding:.35rem .7rem}
  .rs-green{right:5%}
  .rs-blue{left:5%}
}

/* Brevo form dressed in postcard clothes */
.brevo-postcard{text-align:left}
.brevo-postcard #sib-container{
  background:transparent;border:none;max-width:100%;padding:0;
}
.brevo-postcard .entry__label{
  display:block;
  font-family:'Overpass',sans-serif;font-weight:800;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:.35rem;
}
.brevo-postcard .input{
  width:100%;
  font-family:'Fauna One',serif;font-size:1rem;
  padding:.7rem .9rem;
  border:2px solid var(--asphalt);border-radius:8px;
  background:#fff;color:var(--asphalt);
}
.brevo-postcard .input:focus{outline:3px solid var(--mustard);outline-offset:1px}
.brevo-postcard .input::placeholder{color:#9aa5b1;font-family:'Fauna One',serif}
.brevo-postcard .brevo-submit-row{text-align:center;margin-top:1.2rem}
.brevo-postcard .sib-form-block__button{
  border:none;cursor:pointer;font-size:.9rem;
}
.brevo-postcard .entry__error{
  font-family:'Fauna One',serif;font-size:.9rem;
  color:#661d1d;background:#ffeded;border-radius:6px;
}
.brevo-postcard .sib-form-message-panel{
  font-family:'Fauna One',serif;font-size:.95rem;
  border-radius:8px;margin-bottom:1rem;
}
#success-message{color:#0a5c2e;background:#e7faf0;border:2px solid #13ce66}
#error-message{color:#661d1d;background:#ffeded;border:2px solid #ff4949}

/* social links in footer */
.foot-social{
  display:flex;justify-content:center;align-items:center;
  gap:.4rem .9rem;flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.foot-social .fs-label{
  font-family:'Oregano',cursive;font-size:1.1rem;color:var(--mustard);
  margin-right:.4rem;
}
.foot-social a{
  text-decoration:none;color:var(--cream);
  font-family:'Overpass',sans-serif;font-weight:800;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.12em;
  padding:.2rem 0;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.foot-social a:hover{color:var(--mustard);border-color:var(--mustard)}
.foot-social a + a::before{
  content:"\2726";
  color:var(--mustard);
  margin-right:.9rem;
  font-size:.7rem;
  display:inline-block;
}

/* the fine print */
.fine-print{
  max-width:640px;margin:0 auto;
  font-size:.92rem;line-height:1.8;color:var(--teal-deep);
  text-align:center;
}