/* ======================================================
   JOSTY DATA — delad stilmall för index.html & historia.html
   Designriktning: 1970-talets svenska elektronik-/databutik-
   katalog. Inspirerat av att Josty startade som Josty Kit och
   sålde byggsatser, minidatorer och ZX Spectrum/Commodore-datorer
   innan de blev en renodlad databutik 1984.
   ====================================================== */

:root{
  --paper:#F1E9D2;       /* varmt, gulnat katalogpapper */
  --paper-soft:#EADFC0;
  --card:#FBF6E9;        /* ljusare kort-yta */
  --ink:#2E2A1F;          /* varm nästan-svart bläckfärg */
  --ink-soft:#5C5540;
  --mustard:#D9A441;      /* 70-tals senapsgul */
  --teal:#1F5C56;         /* petroleumgrön/teal, sekundärfärg */
  --teal-dark:#153E3A;
  --rust:#BD5B33;         /* rostorange, CTA/prislapp */
  --rust-dark:#9A4726;
  --line:#CBB98C;         /* varm konturlinje */
  --line-strong:#A9955F;
  --radius:3px;
  --maxw:1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(rgba(46,42,31,0.035) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Bitter', serif;
  margin:0;
  color:var(--ink);
  line-height:1.1;
}

.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; }
img, svg{ max-width:100%; display:block; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
}

a:focus-visible, button:focus-visible{
  outline:3px solid var(--rust);
  outline-offset:2px;
}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(241,233,210,0.94);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Logotyp */
.stamp{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
}
.stamp-badge{
  height:46px;
  width:auto;
  flex:none;
}
.stamp-badge img{ height:100%; width:auto; display:block; }
.stamp-text{ line-height:1.15; }
.stamp-text .name{
  font-family:'Bitter', serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:-0.01em;
}
.stamp-text .est{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--teal);
  letter-spacing:.06em;
}

nav.links{ display:flex; gap:28px; font-size:15px; font-weight:600; }
nav.links a{
  text-decoration:none;
  color:var(--ink);
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}
nav.links a:hover, nav.links a.active{ border-color:var(--rust); }

.header-actions{ display:none; align-items:center; gap:14px; }
.phone-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:100px;
  padding:8px 14px;
}
.phone-pill:hover{ background:var(--ink); color:var(--paper); }

.burger{
  display:flex;
  background:none;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  width:42px; height:42px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.burger span::before{ position:absolute; top:-6px; }
.burger span::after{ position:absolute; top:6px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ transform:rotate(45deg); top:0; }
.burger.open span::after{ transform:rotate(-45deg); top:0; }

.mobile-nav{
  display:none; flex-direction:column;
  border-top:1px solid var(--line-strong);
  background:var(--paper);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  text-decoration:none; color:var(--ink); font-weight:600;
  padding:16px 24px; border-bottom:1px solid var(--line);
}
.mobile-nav .phone-pill{ margin:14px 24px; justify-content:center; color:var(--paper); }

@media (min-width:900px){
  .burger{ display:none; }
  .mobile-nav{ display:none !important; }
  .header-actions{ display:flex; }
}
@media (max-width:899px){
  nav.links{ display:none; }
}

.btn{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:14.5px;
  padding:13px 24px;
  border-radius:var(--radius);
  text-decoration:none;
  display:inline-block;
  border:2px solid var(--ink);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--rust); border-color:var(--rust); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn:active{ transform:translateY(1px); }

/* ---------- Hero ---------- */
.hero{ padding:60px 0 56px; border-bottom:2px solid var(--ink); }
.hero-grid{ display:grid; gap:36px; grid-template-columns:1fr; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:1.15fr 0.85fr; align-items:center; } }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:.05em;
  background:var(--mustard); border:1.5px solid var(--ink);
  padding:6px 14px; border-radius:100px; margin-bottom:18px; font-weight:600;
}

.hero h1{
  font-size:clamp(36px, 6vw, 56px);
  font-weight:800;
  letter-spacing:-0.01em;
}
.hero p.lead{ margin-top:18px; font-size:18px; color:var(--ink-soft); max-width:46ch; }
.hero-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

.catalog-card{
  background:var(--teal);
  color:var(--paper);
  border:2px solid var(--ink);
  border-radius:8px;
  padding:26px;
  position:relative;
}
.catalog-card .mono.label{ font-size:11.5px; letter-spacing:.1em; color:#BFDAD4; text-transform:uppercase; }
.catalog-card .hero-ticket-name{ color:#fff; font-size:24px; margin-top:8px; font-family:'Bitter',serif; font-weight:800; }
.catalog-card .row{
  display:flex; justify-content:space-between; gap:10px;
  border-bottom:1px dashed rgba(255,255,255,0.25);
  padding:9px 0; font-size:13.5px;
}
.catalog-card .row:last-child{ border-bottom:none; }
.catalog-card .row span:first-child{ color:#BFDAD4; }
.catalog-card .row span:last-child{ font-family:'JetBrains Mono', monospace; }

/* ---------- Section shell ---------- */
section{ padding:64px 0; scroll-margin-top:74px; }
#top{ scroll-margin-top:74px; }
.section-head{ max-width:60ch; margin-bottom:36px; }
.section-head h2{ font-size:clamp(26px, 4vw, 36px); margin-top:8px; }
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:16.5px; }

/* ---------- Om oss teaser ---------- */
.about-teaser{ border-bottom:2px solid var(--ink); }
.about-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:860px){ .about-grid{ grid-template-columns:1.2fr 1fr; } }
.about-copy p{ color:var(--ink-soft); font-size:16.5px; margin-top:14px; }
.about-copy p:first-child{ margin-top:0; }
.about-copy .btn{ margin-top:8px; }

.stat-strip{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--ink); border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden;
}
.stat{ background:var(--card); padding:22px 20px; }
.stat .num{ font-family:'Bitter', serif; font-weight:800; font-size:30px; color:var(--rust); }
.stat .label{ margin-top:4px; font-size:13.5px; color:var(--ink-soft); }

/* ---------- Tjänster ---------- */
.services{ border-bottom:2px solid var(--ink); }
.service-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .service-grid{ grid-template-columns:repeat(3, 1fr); } }
.service-card{
  background:var(--card); border:1.5px solid var(--ink); border-radius:6px;
  padding:24px 22px; transition:transform .15s ease, box-shadow .15s ease;
}
.service-card:hover{ transform:translateY(-3px); box-shadow:4px 4px 0 var(--mustard); }
.service-card h3{ font-size:19px; }
.service-card p{ color:var(--ink-soft); margin-top:10px; font-size:15px; }
.service-card .tag{ display:inline-block; margin-bottom:14px; }

/* ---------- Produkter ---------- */
.product-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:640px){ .product-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:980px){ .product-grid{ grid-template-columns:repeat(3, 1fr); } }

.p-card{
  background:var(--card); border:1.5px solid var(--ink); border-radius:6px;
  display:flex; flex-direction:column; overflow:hidden;
}

.p-photo{
  aspect-ratio:4/3;
  background-color:var(--card);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  border-bottom:1.5px solid var(--ink);
  padding:14px;
  background-origin:content-box;
}

.p-card-top{ padding:16px 18px 10px; }
.p-card-top .eyebrow{ margin-bottom:6px; display:block; }
.p-card-top h3{ font-size:18px; }

.p-specs{ padding:8px 18px; flex:1; }
.p-specs .row{
  display:flex; justify-content:space-between; gap:10px; padding:6px 0;
  border-bottom:1px dotted var(--line-strong); font-size:13.5px;
}
.p-specs .row:last-child{ border-bottom:none; }
.p-specs .row span:first-child{ color:var(--ink-soft); font-family:'JetBrains Mono', monospace; font-size:12.5px; }
.p-specs .row span:last-child{ text-align:right; font-weight:600; }

.p-card-bottom{ padding:14px 18px 18px; }
.price-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--rust-dark); color:#fff;
  border:1.5px solid var(--ink);
  border-radius:3px; padding:8px 14px 8px 10px;
  position:relative;
}
.price-tag::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--ink);
}
.price-tag .amount{ font-family:'Bitter', serif; font-weight:800; font-size:19px; }
.price-tag .kr{ font-family:'JetBrains Mono', monospace; font-size:12px; color:#fff; }

.products-footer{
  margin-top:32px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; background:var(--card); border:1.5px solid var(--ink);
  border-radius:6px; padding:20px 24px;
}
.products-footer p{ margin:0; color:var(--ink-soft); font-size:15px; }

.img-note{
  margin-top:20px; font-size:13.5px; color:var(--ink-soft);
  border-left:3px solid var(--mustard); padding-left:12px;
}

/* ---------- Kontakt ---------- */
.contact{ background:var(--ink); color:var(--paper); }
.contact .eyebrow{ color:var(--mustard); }
.contact h2{ color:#fff; }
.contact-grid{ display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:860px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-info p{ color:#D9CFB0; font-size:16px; }
.contact-card{
  background:rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.18);
  border-radius:6px; padding:22px; margin-top:18px;
}
.contact-card .line{
  display:flex; gap:12px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.12); font-size:15px; align-items:baseline;
}
.contact-card .line:last-child{ border-bottom:none; }
.contact-card .line b{ color:var(--mustard); min-width:100px; font-weight:700; font-family:'JetBrains Mono', monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
.contact-card .line a{ color:#fff; text-decoration:none; font-weight:600; }
.contact-card .line a:hover{ text-decoration:underline; }

.map-frame{
  border-radius:6px; overflow:hidden; border:1.5px solid rgba(255,255,255,0.18);
  height:100%; min-height:280px;
}
.map-frame iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; }

footer{ padding:26px 0; border-top:2px solid var(--ink); }
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:13.5px; color:var(--ink-soft);
}
.footer-inner a{ text-decoration:none; font-weight:600; color:var(--ink); }

/* ---------- Historia-sida ---------- */
.history-hero{ padding:56px 0 44px; border-bottom:2px solid var(--ink); }
.history-hero .eyebrow{ margin-bottom:12px; display:block; }
.history-hero h1{ font-size:clamp(32px, 5vw, 48px); }
.history-hero p.lead{ margin-top:16px; font-size:17.5px; color:var(--ink-soft); max-width:60ch; }

.timeline{ display:flex; flex-direction:column; gap:0; }
.tl-item{
  display:grid; grid-template-columns:90px 1fr; gap:24px;
  padding:28px 0; border-bottom:1px dashed var(--line-strong);
}
.tl-item:first-child{ padding-top:0; }
.tl-year{
  font-family:'Bitter', serif; font-weight:800; font-size:22px; color:var(--rust);
}
.tl-content h2{ font-size:19px; margin-bottom:8px; }
.tl-content p{ color:var(--ink-soft); font-size:16px; margin:0; }
@media (max-width:560px){
  .tl-item{ grid-template-columns:1fr; gap:8px; }
}