/* Nålsögat Skrädderi · Norrköping
   A2 editorial. Kritvit och plommon. Antonio + Karla + Azeret Mono.
   Greppet: prislistan är sidan. Allt annat håller sig lugnt.
   Inga kort någonstans, bara hårfina linjer och en hängande vänsterspalt. */

:root {
  --bas:        #f8f7f5;
  --yta:        #ebe8ea;
  --plommon:    #6b2f4d;   /* 9,2:1 mot bas, 8,1:1 mot yta. Klarar text i alla grader. */
  --plommon-m:  #5e2943;   /* hover-yta, 10,5:1 mot bas */
  --black:      #262224;   /* 14,7:1 mot bas, 12,9:1 mot yta */
  --dampad:     #655a60;   /* 6,2:1 mot bas, 5,4:1 mot yta */
  --pa-plommon: #f8f7f5;   /* 9,2:1 mot plommon */
  --tyst-ljus:  #e4d6dd;   /* 7,0:1 mot plommon */
  --linje:      rgba(38, 34, 36, .16);
  --linje-s:    rgba(38, 34, 36, .34);
  --linje-p:    rgba(107, 47, 77, .32);
  --linje-l:    rgba(248, 247, 245, .3);

  --hang:   13rem;   /* vänsterspaltens bredd */
  --luft:   3rem;    /* mellanrum till mätten */
  --display: "Antonio", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --brod:    "Karla", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bas);
  color: var(--black);
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-wrap: break-word;
}

body.meny-oppen { overflow: hidden; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
  /* hyphens: auto ar forbjudet: avstavningen styrs av enhetens ordlistor
   och gar inte att testa i headless. Se qa-site punkt 12. */
  p, li, dd { overflow-wrap: break-word; }
}

/* Mätt i Antonio: versalhöjd 0,86 em men Å-ringen når 1,13 em över
   baslinjen. Radavstånd under 1,2 låter ringen slå upp i raden ovanför.
   1,2 är alltså det TÄTA läget här, inte det luftiga. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 6.6vw, 4.5rem);
  letter-spacing: .012em;
}
h2 {
  font-size: clamp(1.85rem, 4.6vw, 3rem);
  letter-spacing: .02em;
}
h3 {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  letter-spacing: .05em;
}
h3.liten {
  font-size: 1rem;
  letter-spacing: .16em;
  color: var(--plommon);
}

a { color: inherit; }

.omslag {
  width: min(1100px, 100% - 2.5rem);
  margin-inline: auto;
}

.hoppa {
  position: absolute;
  left: 0;
  top: -140px;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 1.25rem;
  background: var(--plommon);
  color: var(--pa-plommon);
  text-decoration: none;
  z-index: 60;
}
.hoppa:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--plommon);
  outline-offset: 3px;
}

/* Spärrad versal mono ska aldrig avstavas. */
.etikett,
.hero__meta,
.rad__tid,
.steg__nr,
.omdome__namn,
.fot__demo,
.marke__under { hyphens: manual; }

.etikett {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--plommon);
  margin: 0 0 1rem;
}
.etikett--ljus { color: var(--tyst-ljus); }

/* ---------- Sidhuvud ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bas);
  border-bottom: 1px solid var(--linje);
}

.topp__inre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.marke {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46px;
  padding: .35rem 0;
}
.marke__namn {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.5rem;
  line-height: 1.2;
}
.marke__under {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dampad);
  margin-top: .25rem;
  line-height: 1.3;
}

.hamburgare {
  width: 46px;
  height: 46px;
  border: 1px solid var(--linje-s);
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.hamburgare span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--plommon);
  transition: transform .25s ease, opacity .2s ease;
}
.meny-oppen .hamburgare span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.meny-oppen .hamburgare span:nth-child(2) { opacity: 0; }
.meny-oppen .hamburgare span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.meny ul { list-style: none; margin: 0; padding: 0; }
.meny a {
  text-decoration: none;
  color: var(--black);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .07em;
}

@media (max-width: 899px) {
  .meny {
    display: none;
    position: fixed;
    inset: 68px 0 0;
    background: var(--bas);
    border-top: 1px solid var(--linje);
    overflow-y: auto;
    padding: .5rem 0 2.5rem;
  }
  .meny-oppen .meny { display: block; }
  .meny ul { width: min(1100px, 100% - 2.5rem); margin-inline: auto; }
  .meny li { border-bottom: 1px solid var(--linje); }
  .meny li a {
    display: flex;
    align-items: center;
    min-height: 58px;
    font-size: 1.5rem;
  }
  .meny__tel {
    display: flex;
    align-items: center;
    min-height: 56px;
    width: min(1100px, 100% - 2.5rem);
    margin: 1.5rem auto 0;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: .04em;
    color: var(--plommon);
  }
}

@media (min-width: 900px) {
  .hamburgare { display: none; }
  .meny { display: flex; align-items: center; gap: 1.75rem; }
  .meny ul { display: flex; gap: 1.6rem; }
  .meny li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.02rem;
    border-bottom: 1px solid transparent;
  }
  .meny li a:hover { border-bottom-color: var(--linje-s); }
  .meny__tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--linje-p);
    text-decoration: none;
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--plommon);
    white-space: nowrap;
  }
  .meny__tel:hover { background: var(--yta); }
}

/* ---------- Knappar ---------- */

.val {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2rem 0 1.75rem;
}

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.7rem;
  background: var(--plommon);
  border: 1px solid var(--plommon);
  color: var(--pa-plommon);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.knapp:hover { background: var(--plommon-m); border-color: var(--plommon-m); }

.knapp--tyst {
  background: transparent;
  border-color: var(--linje-p);
  color: var(--plommon);
}
.knapp--tyst:hover { background: var(--yta); border-color: var(--plommon); }

@media (max-width: 479px) {
  .val { flex-direction: column; }
  .knapp { width: 100%; }
}

/* ---------- Hero ---------- */

.hero__inre { padding-block: clamp(2.75rem, 7vw, 5rem); }

.ingress {
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.6;
  max-width: 33em;
  margin-top: 1.5rem;
}

.hero__meta {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dampad);
  line-height: 1.8;
}
.hero__meta span { white-space: nowrap; }
.hero__meta span + span::before { content: "·"; margin: 0 .5em 0 .35em; }

/* På smal skärm får adressen en egen rad i stället för att radbrytningen
   ska lämna en ensam punkt sist på raden. */
@media (max-width: 559px) {
  .hero__meta .plats { display: block; }
  .hero__meta .plats::before { content: none; }
}

.hero__bild {
  background: var(--yta);
  height: 200px;
  overflow: hidden;
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
/* Under 980 px är panelen ett liggande band. Fotot beskärs uppifrån så
   händerna och fållen är kvar när höjden kapas. */
.hero__foto {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
}

@media (min-width: 980px) {
  .hero__inre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--luft);
    align-items: stretch;
  }
  .hero__bild {
    height: auto;
    margin-top: 0;
    display: block;
  }
}

/* ---------- Bandet mellan hero och prislistan ---------- */

.band { margin: 0 auto; }
.band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* ---------- Gemensam avdelningsrubrik ---------- */

.avdelning { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.avdelning h2 { margin-bottom: 1.1rem; }
.avdelning__text {
  max-width: 34em;
  color: var(--black);
  margin-bottom: 0;
}

/* ---------- 2. Prislistan. Sidans grepp. ---------- */

.priser { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.grupp { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.grupp:last-child { margin-bottom: 0; }

.grupp__namn {
  color: var(--plommon);
  font-size: 1rem;
  letter-spacing: .16em;
  padding-bottom: .85rem;
  margin: 0;
}

.rader {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--linje-s);
}

.rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  row-gap: .3rem;
  align-items: baseline;
  padding: 1rem 0 1.05rem;
  border-top: 1px solid var(--linje);
}
.rader > .rad:first-child { border-top: 1px solid var(--linje-s); }

.rad__namn {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 3.1vw, 1.32rem);
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.24;
}

.rad__tid {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dampad);
  line-height: 1.6;
}

.rad__pris {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--dampad);
}
.rad__pris b {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--plommon);
}

.rad__pris--ord {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  text-align: left;
  white-space: normal;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--plommon);
  margin-top: .35rem;
}

.grupp__not,
.priser__slut {
  font-size: .95rem;
  color: var(--dampad);
  max-width: 40em;
}
.grupp__not { margin-top: 1.1rem; }
.priser__slut {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linje);
}

@media (min-width: 640px) {
  .rad { grid-template-columns: minmax(0, 1fr) 10rem 7.5rem; column-gap: 1.5rem; }
  .rad__tid { grid-column: 2; grid-row: 1; text-align: right; }
  .rad__pris { grid-column: 3; grid-row: 1; }
  .rad__pris--ord { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; margin-top: 0; font-size: 1.05rem; }
}

/* ---------- Hängande vänsterspalt. Sidans ryggrad, satt i typografi. ---------- */

@media (min-width: 980px) {
  .avdelning,
  .grupp,
  .steg__post,
  .hitta__block,
  .omdome__inre {
    display: grid;
    grid-template-columns: var(--hang) minmax(0, 1fr);
    column-gap: var(--luft);
    align-items: start;
  }
  .avdelning > .etikett,
  .grupp > .grupp__namn,
  .steg__post > .steg__nr,
  .hitta__block > h3,
  .omdome__inre > .etikett {
    grid-column: 1;
    text-align: right;
    margin: 0;
  }
  .avdelning > h2,
  .avdelning > .avdelning__text,
  .grupp > .rader,
  .grupp > .grupp__not,
  .steg__post > h3,
  .steg__post > p,
  .hitta__block > *:not(h3),
  .omdome__inre > blockquote,
  .omdome__inre > .omdome__namn {
    grid-column: 2;
  }
  .grupp__namn {
    position: sticky;
    top: 96px;
    padding-bottom: 0;
    padding-top: .35rem;
  }
  .priser__slut { margin-left: calc(var(--hang) + var(--luft)); }

  /* Bilderna hänger i vänsterspalten, högerställda mot rännilen precis
     som etiketterna. Explicit rad, annars flyter de i fel ordning. */
  .steg__post > .steg__bild {
    grid-column: 1;
    grid-row: 2;
    width: 10rem;
    margin: .9rem 0 0 auto;
  }
  .omdome__inre > .omdome__bild {
    grid-column: 1;
    grid-row: 2;
    width: 7.5rem;
    margin: 1.75rem 0 0 auto;
  }
}

/* ---------- 3. Så går det till ---------- */

.gang {
  background: var(--yta);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--linje);
}

.steg {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steg__post {
  padding: 1.75rem 0;
  border-top: 1px solid var(--linje-s);
}
.steg__post:last-child { border-bottom: 1px solid var(--linje-s); }

.steg__nr {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--plommon);
  margin-bottom: .6rem;
  line-height: 1.6;
}

/* Liten kvadrat per steg. height: auto krävs, annars gör width- och
   height-attributen båda måtten definita och aspect-ratio slutar gälla. */
.steg__bild {
  display: block;
  width: 7rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 0 1.15rem;
}

.steg__post h3 { margin-bottom: .6rem; }
.steg__post p { max-width: 36em; margin-bottom: 0; }

/* ---------- 4. Öppettider och hitta hit ---------- */

.hitta {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--linje);
}

.hitta__block {
  padding: 1.75rem 0;
  border-top: 1px solid var(--linje-s);
}
.hitta__block:last-child { border-bottom: 1px solid var(--linje-s); }
.hitta__block h3 { margin-bottom: 1.1rem; }

.tider {
  margin: 0 0 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.5rem;
  row-gap: .5rem;
  max-width: 26rem;
  font-family: var(--mono);
  font-size: .85rem;
}
.tider dt { color: var(--black); }
.tider dd { margin: 0; text-align: right; color: var(--plommon); }

.adress {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 1.3rem;
  line-height: 1.32;
  margin-bottom: .9rem;
}

.hitta__not {
  font-size: .95rem;
  color: var(--dampad);
  max-width: 34em;
}

.kontakt {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}
/* Understrykningen ligger på texten, inte på taparean. En 48 px hög
   inline-flex med border-bottom lägger strecket långt under bokstäverna. */
.kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .03em;
  color: var(--plommon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: var(--linje-p);
}
.kontakt a:hover { text-decoration-color: var(--plommon); }

.hitta__bild {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-top: 1.75rem;
}

/* ---------- 5. Omdöme ---------- */

.omdome {
  background: var(--plommon);
  color: var(--pa-plommon);
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
}

.omdome blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .035em;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  line-height: 1.24;
}
.omdome blockquote p { margin: 0; max-width: 20em; }

.omdome__bild {
  display: block;
  width: 6.5rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 2rem 0 0;
}

.omdome__namn {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tyst-ljus);
  margin: 1.5rem 0 0;
}

@media (min-width: 980px) {
  .omdome__namn { margin-top: 1.75rem; }
}

/* ---------- Sidfot ---------- */

.fot {
  border-top: 1px solid var(--linje);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: .95rem;
}

.fot__inre {
  display: grid;
  gap: 1.75rem;
}

.fot__block p { margin: 0 0 .2rem; }
.fot__block a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--plommon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: transparent;
}
.fot__block a:hover { text-decoration-color: var(--linje-p); }

.fot__namn {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 1.25rem;
  margin-bottom: .5rem;
}

.fot__demo {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dampad);
  margin: 0;
}

@media (min-width: 760px) {
  .fot__inre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fot__demo { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--linje); }
}

/* ---------- Ankare under den klibbiga toppen ---------- */

#priser, #gang, #hitta, #omdome, #innehall { scroll-margin-top: 76px; }

/* ---------- Rörelse ---------- */

.js .rev {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .rev.inne { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rev { opacity: 1; transform: none; transition: none; }
  .hamburgare span { transition: none; }
}