/* ==========================================================================
   Just Bargains — spec build
   Palette: deep blue + red on white. The language of American value retail,
   which is what this store is.
   Rule of the page: anything PROVABLE is set in mono (DM Mono) and reads as
   data. Anything persuasive is set in the display face. Never mix the two.
   ========================================================================== */

:root{
  --blue:      #0B3C8D;  /* primary field */
  --blue-deep: #072A65;  /* bands, footer */
  --red:       #CE1B21;  /* CTAs, accents */
  --red-dark:  #A9151A;
  --paper:     #FFFFFF;
  /* The store's own handwritten shelf tags are this yellow. Accent only. */
  --tag-yellow:#FFD400;
  --shell:     #F4F6FA;  /* cool off-white page field */
  --ink:       #101828;  /* body type */

  --ink-60: rgba(16,24,40,.64);
  --ink-14: rgba(16,24,40,.14);
  --wht-70: rgba(255,255,255,.72);
  --wht-45: rgba(255,255,255,.45);
  --wht-16: rgba(255,255,255,.16);

  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 4vw, 48px);
  --pad-y: clamp(64px, 9vw, 128px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,iframe{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--red); color:#fff; padding:12px 18px;
  font-family:var(--mono); font-size:13px; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.hero :focus-visible,
.section--depts :focus-visible,
.foot :focus-visible{ outline-color:#fff; }

/* ---------- shared type ---------- */

.eyebrow,
.kicker{
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 18px;
  color:var(--ink-60);
}
.hero .eyebrow{ color:var(--wht-70); }
.kicker--light{ color:var(--wht-45); }

.h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(28px,3.6vw,46px);
  line-height:1.05; letter-spacing:-.015em;
  margin:0 0 22px; max-width:17ch;
}
.h2--light{ color:#fff; }

.prose{ margin:0 0 16px; max-width:47ch; color:var(--ink-60); }
.prose--wide{ max-width:58ch; }
.prose--light{ color:var(--wht-70); }

.lede{
  margin:0 0 30px;
  font-size:clamp(17px,1.5vw,20px); line-height:1.55;
  max-width:41ch; color:var(--wht-70);
}

.actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:14px 22px; border:2px solid transparent;
  transition:transform .14s ease, background-color .14s ease, color .14s ease, border-color .14s ease;
}
.btn--lg{ padding:17px 28px; font-size:14px; }
.btn:hover{ transform:translateY(-2px); }

.btn--red{ background:var(--red); color:#fff; border-color:var(--red); }
.btn--red:hover{ background:var(--red-dark); border-color:var(--red-dark); }

.btn--outline{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--outline:hover{ background:var(--blue); color:#fff; }

.btn--outline-light{ background:transparent; color:#fff; border-color:var(--wht-45); }
.btn--outline-light:hover{ background:#fff; color:var(--blue); border-color:#fff; }

/* ---------- topbar ---------- */

.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--blue);
  border-bottom:4px solid var(--red);
}
.topbar__inner{ display:flex; align-items:center; gap:28px; min-height:68px; }

.mark{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; color:#fff; }
/* Badge mirrors the 99c decals across the store's front windows. */
.mark__badge{
  font-family:var(--display); font-size:12px;
  background:var(--tag-yellow); color:var(--red);
  width:34px; height:34px; display:grid; place-items:center;
}
.mark__name{ font-family:var(--display); font-size:17px; letter-spacing:-.01em; }
.mark__name em{ font-style:normal; color:var(--tag-yellow); }

.topnav{ display:flex; gap:26px; }
.topnav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.05em;
  text-decoration:none; color:var(--wht-70);
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.topnav a:hover{ color:#fff; border-bottom-color:var(--red); }

.topbar__call{ padding:11px 18px; }

@media (max-width:880px){
  .topnav{ display:none; }
  .mark__name{ display:none; }
}

/* ---------- hero ---------- */

.hero{
  background:var(--blue);
  color:#fff;
  padding-block:clamp(52px,7vw,96px) clamp(58px,7vw,100px);
  overflow:hidden;
}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "eyebrow burst"
    "title   burst"
    "body    burst";
  align-items:start;
  column-gap:clamp(24px,4vw,64px);
}
.hero .eyebrow{ grid-area:eyebrow; }
.hero__title{ grid-area:title; }
.hero__body{ grid-area:body; }
.hero .burst{ grid-area:burst; align-self:center; }

/* The h1 carries the business name as well as the claim. The name is the
   smaller line so the visual hierarchy still leads with the promise, but the
   heading itself now says what this business is called. */
.hero__title{
  margin:0 0 34px;
  text-transform:uppercase;
}
.hero__name{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(19px,2.3vw,30px);
  line-height:1.1; letter-spacing:-.01em;
  margin-bottom:clamp(12px,1.4vw,20px);
  color:#fff;
}
.hero__cent{ color:var(--tag-yellow); }
.hero__claim{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:clamp(46px,9.4vw,116px);
  line-height:.89; letter-spacing:-.035em;
}
.hero__title-alt{ color:#FF6B5E; }

/* SIGNATURE — the price sticker */
.burst{
  position:relative;
  width:clamp(176px,17vw,228px);
  aspect-ratio:1;
  display:grid; place-content:center; text-align:center;
  background:var(--red); color:#fff;
  border-radius:50%;
  rotate:-8deg;
  box-shadow:0 0 0 4px var(--blue), 0 0 0 7px #fff;
}
.burst__num{
  display:block; font-family:var(--display);
  font-size:clamp(62px,6.4vw,84px); line-height:.82; letter-spacing:-.04em;
}
.burst__unit{
  display:block; font-family:var(--display);
  font-size:clamp(20px,2vw,26px); line-height:1;
  text-transform:uppercase; letter-spacing:.02em; margin-top:2px;
}
.burst__since{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  margin-top:11px; color:rgba(255,255,255,.72);
}

@media (max-width:820px){
  .hero__inner{
    grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "title" "burst" "body";
  }
  .hero .burst{ justify-self:start; margin:2px 0 32px; }
  .hero__title{ margin-bottom:26px; }
}

/* ---------- ticker ---------- */

.ticker{
  background:var(--red); color:#fff;
  overflow:hidden; padding-block:14px; display:flex;
}
.ticker__track{ display:flex; flex:none; animation:slide 44s linear infinite; }
.ticker__set{ display:flex; align-items:center; flex:none; }
.ticker__set b{
  font-family:var(--display); font-weight:400;
  font-size:clamp(14px,1.6vw,19px); text-transform:uppercase;
  white-space:nowrap;
}
.ticker__set i{ font-style:normal; color:rgba(255,255,255,.55); padding-inline:20px; }

@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* ---------- sections ---------- */

.section{ padding-block:var(--pad-y); }
.section__head{ margin-bottom:clamp(34px,4vw,54px); }

.grid-2{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,76px);
  align-items:start;
}
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

/* the store */
.section--store{ background:var(--paper); }

.facts{
  background:var(--shell);
  border:2px solid var(--blue);
  padding:26px clamp(20px,2.4vw,30px) 8px;
  box-shadow:8px 8px 0 var(--blue);
}
.facts__head{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 18px; color:var(--ink-60);
}
.facts__list{ margin:0; }
.facts__row{
  display:grid; grid-template-columns:8.5ch 1fr; gap:16px;
  padding-block:13px; border-top:1px solid var(--ink-14);
}
.facts__row:first-child{ border-top:0; padding-top:0; }
.facts__row dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-60); padding-top:3px;
}
.facts__row dd{ margin:0; font-family:var(--mono); font-size:14px; line-height:1.5; }
.facts__row dd a{ color:var(--red); text-underline-offset:3px; }

/* what we carry */
.section--depts{ background:var(--blue-deep); color:#fff; }

/* Departments are rendered as the store's own handwritten shelf tags:
   yellow card, marker lettering, the "Just Bargains" script along the top.
   Taken from the tags photographed on the coffee, seafood and meat cases. */
.depts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,24px);
}
@media (max-width:900px){ .depts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .depts{ grid-template-columns:1fr; } }

.dept{
  position:relative;
  background:var(--tag-yellow);
  color:#14100A;
  min-height:clamp(112px,11vw,148px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:30px 14px 20px;
  box-shadow:4px 5px 0 rgba(0,0,0,.28);
  transition:transform .16s ease, box-shadow .16s ease;
}
/* Alternating tilt so the row reads as tags pinned by hand, not a grid. */
.dept:nth-child(odd){ rotate:-1.1deg; }
.dept:nth-child(even){ rotate:.9deg; }
.dept:nth-child(4n){ rotate:-.5deg; }
.dept:hover{ transform:translateY(-4px); box-shadow:6px 8px 0 rgba(0,0,0,.32); }

.dept__brand{
  position:absolute; top:9px; left:0; right:0;
  font-family:'Caveat',cursive; font-weight:700;
  font-size:15px; line-height:1;
  color:rgba(20,16,10,.55);
}
.dept__name{
  font-family:'Caveat',cursive; font-weight:700;
  font-size:clamp(23px,2.5vw,30px);
  line-height:1.08; letter-spacing:0;
}

.callout{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
  margin-top:clamp(28px,3.4vw,42px);
  padding-top:22px; border-top:2px solid var(--red);
}
.callout__q{ font-family:var(--display); font-size:clamp(17px,1.8vw,22px); margin:0; }
.callout__a{ font-family:var(--mono); font-size:14px; margin:0; color:var(--wht-70); }
.callout__a a{ color:#fff; text-underline-offset:4px; }

/* visit */
.section--visit{ background:var(--paper); }
.grid-2--visit{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch; }
@media (max-width:900px){ .grid-2--visit{ grid-template-columns:1fr; } }

.hours{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:14px; margin:0 0 26px;
}
.hours th,
.hours td{
  text-align:left; padding:11px 0;
  border-bottom:1px solid var(--ink-14); font-weight:400;
}
.hours th{ color:var(--ink-60); letter-spacing:.05em; }
.hours td{ text-align:right; }
.hours__odd td{ color:var(--red); }

.addr{
  font-family:var(--mono); font-size:14px; font-style:normal;
  line-height:1.7; color:var(--ink-60); margin:0 0 26px;
}

.map{ min-height:352px; border:2px solid var(--blue); }
.map iframe{ width:100%; height:100%; min-height:348px; border:0; }

/* ---------- footer ---------- */

.foot{ background:var(--blue); color:#fff; padding-block:46px 54px; }
.foot__name{ font-family:var(--display); font-size:22px; margin:0 0 12px; }
.foot__meta{ font-family:var(--mono); font-size:12.5px; margin:0 0 6px; color:var(--wht-70); }
.foot__meta--dim{ color:var(--wht-45); }

/* ---------- photo grid (dormant) ----------
   Unused until real store photographs exist. Markup is parked at the
   bottom of index.html. Styles kept here so wiring it up is paste-only. */

.shots{
  list-style:none; margin:clamp(28px,3.4vw,42px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px);
}
@media (max-width:860px){ .shots{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .shots{ grid-template-columns:1fr; } }
.shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:2px solid var(--wht-16); }
.shot__cap{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  margin:10px 0 0; color:var(--wht-45);
}

/* ---------- open-now badge ----------
   Rendered by open-now.js. Stays hidden if the script cannot determine
   store-local time, so it can never contradict the hours table. */

.onow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  margin:0 0 20px;
  padding:8px 14px 8px 12px;
  border:1px solid var(--ink-14);
  background:var(--paper);
}
.onow[hidden]{ display:none; }

.onow__dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.onow__state{ font-weight:500; text-transform:uppercase; }
.onow__detail{ color:var(--ink-60); }

.onow.is-open .onow__dot{ background:#12A150; box-shadow:0 0 0 3px rgba(18,161,80,.22); }
.onow.is-shut .onow__dot{ background:#B42318; box-shadow:0 0 0 3px rgba(180,35,24,.20); }

/* hero sits on blue — invert the chrome */
.onow--hero{
  background:rgba(255,255,255,.10);
  border-color:var(--wht-16);
  color:#fff;
}
.onow--hero .onow__detail{ color:var(--wht-70); }
.onow--hero.is-open .onow__dot{ background:#35D07F; box-shadow:0 0 0 3px rgba(53,208,127,.26); }
.onow--hero.is-shut .onow__dot{ background:#FF6B5E; box-shadow:0 0 0 3px rgba(255,107,94,.26); }

/* ---------- reveal ---------- */

.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
  .js .reveal.is-in{ transition:none; }
  .btn:hover{ transform:none; }
}