/* ================================================================
   DAGENS PASTA — trattoria möter svensk minimalism
   Ordning: Pastaväggen → Brevet → Receptet → I går/I morgon → Svarskortet
   Kontrast: grön värld → vitt brev → grönt fält med vita kort → grönt slut

   FÄRGREGLER:
   · --gold används ENDAST på mörk botten (verde/verde-deep)
   · på ljus botten (cream/paper) används --brass-dark för text
   · vaxsigillets färger (#8E2A18-familjen, #E8C9A0-emblem) är sigill-exklusiva
   ================================================================ */

:root {
  --verde:       #1E3A2C;
  --verde-deep:  #14291F;
  --cream:       #F6F1E4;
  --paper:       #FBF8EF;
  --pomodoro:    #C23A22;
  --pomodoro-deep: #A93118;
  --pomodoro-soft: #E8A08F; /* felmeddelanden på mörk botten */
  --wax:         #8E2A18;
  --brass-dark:  #82652A;
  --gold:        #C9AF6B;
  --ink:         #221E17;
  --cream-dim:   #E9E2CF;
  --hairline:    rgba(34, 30, 23, 0.14);
  --hairline-lt: rgba(246, 241, 228, 0.22);
  /* WCAG 1.4.11 kraver 3:1 pa graenser till interaktiva ytor. Den dekorativa
     hairline-lt ligger pa 1,89:1 och duger inte som knappkant. Uppmatt: */
  --kant-interaktiv: rgba(246, 241, 228, 0.40);   /* 3,10:1 mot --verde */
  --kant-guld:       rgba(201, 175, 107, 0.58);   /* 3,3:1 mot --verde-deep */
  --pomodoro-pa-mork: #DA4E32;                    /* 3,22:1 mot gradientens ljusaste punkt under ordet */
  --ink-60:      rgba(34, 30, 23, 0.6);
  --ink-65:      rgba(34, 30, 23, 0.65);

  /* ---------- rorelse ----------
     Sajten hade 19 olika varaktigheter och noll tokens. Sex steg racker, och
     stegen ar valda sa att skillnaden mellan tva grannar faktiskt gar att se. */
  --dur-tap:    120ms;   /* direkt aterkoppling: aktiv knapp */
  --dur-micro:  200ms;   /* hover, fargbyten, sma lyft */
  --dur-reveal: 350ms;   /* nagot dyker upp eller forsvinner */
  --dur-move:   550ms;   /* nagot forflyttar sig en strackan */
  --dur-stage:  800ms;   /* scenbyte, hela ytor */
  --ease-ut:    cubic-bezier(0.22, 1, 0.36, 1);   /* husets kurva: snabbt ut, mjukt in */
  --ease-inut:  cubic-bezier(0.65, 0, 0.35, 1);   /* symmetrisk, for fram och tillbaka */

  --font-display: "Fraunces", "Fraunces-fallback", "Times New Roman", serif;
  --font-body: "Instrument Sans", "InstrumentSans-fallback", "Helvetica Neue", Arial, sans-serif;

  /* typskala */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.2rem;
  --text-lg: clamp(1.5rem, 2.6vw, 2.7rem);
  --text-xl: clamp(2rem, 3.6vw, 3rem);
  --text-2xl: clamp(2.6rem, 5.2vw, 4.4rem);
  --text-2xs: 0.68rem;                              /* mindre an xs: brickor, bad */
  --text-3xl: clamp(3rem, 6.5vw, 6.5rem);           /* ordmarket i entren */
  --text-4xl: clamp(3.4rem, 10vw, 10rem);           /* guldordet bakom vaggen */

  /* ---------- sparvidd ----------
     Arton olika varden for fem avsikter. Varje kluster ligger inom 0,04em,
     sa bytet syns inte - men skalan blir mojlig att halla. */
  --track-tight: -0.012em;        /* displayrubriker */
  --track-normal: 0;              /* brodtext */
  --track-ui: 0.05em;             /* knappar och sma etiketter */
  --track-label: 0.14em;          /* versaletiketter */
  --track-label-wide: 0.2em;      /* entrens ogonbryn, de vidaste */

  /* mellanrum — monoton skala */
  --space-025: 0.25rem;
  --space-05: 0.5rem;
  --space-075: 0.75rem;
  --space-1: 1rem;
  --space-2: 1.5rem;
  --space-3: 2.5rem;
  --space-4: 4rem;
  --space-5: 6.5rem;

  --radius: 8px;   /* mjuka ytor; väggens kort är skarpa (0) */
  --head-h: 60px;
  --ring: var(--gold);

  --z-wall-word: 1;
  --z-wall-cards: 10;
  --z-head: 40;
  --z-detail: 100;
  --z-curtain: 1000;
}

/* ---------- bas ---------- */

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

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* sidans egen rullningslist var det enda ostylade i hela fönstret */
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 175, 107, 0.45) var(--verde-deep);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--verde-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.05;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
i { font-style: italic; }

::selection { background: var(--pomodoro); color: var(--paper); }
.wall ::selection, .hero ::selection, .today ::selection,
.dagband ::selection, .site-foot ::selection, .curtain ::selection {
  background: var(--gold); color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}
.reply, .detail, .hero-card, .menyn,
.today .recipe-cols > div, .today .drink, .today .vinkeln {
  --ring: var(--pomodoro);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  /* rubriken syns aldrig - den ska inte heller bara en egen storlek i skalan */
  font-size: inherit;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-1);
  z-index: calc(var(--z-curtain) + 1);
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 4px;
  transition: top var(--dur-micro) var(--ease-ut);
}
.skip-link:focus-visible { top: var(--space-1); }

/* dölj bytesytor tills dagens recept är ifyllt — men bara när JS lever */
html.js:not(.is-filled) #reveal-name,
html.js:not(.is-filled) #reveal-sub,
html.js:not(.is-filled) .today-title,
html.js:not(.is-filled) .today-sub {
  visibility: hidden;
  animation: dp-reveal-fallback 0s 3s forwards;
}
@keyframes dp-reveal-fallback { to { visibility: visible; } }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  color: var(--brass-dark);
}
.wall .eyebrow,
.curtain .eyebrow,
.dagband .eyebrow,
.site-foot .eyebrow,
.today .eyebrow { color: var(--gold); }

/* guld-progresslinje under toppbaren */
.progress {
  position: fixed;
  /* satt i fonsterkanten: huvudet skrollar bort och linjen hangde annars kvar
     60 px ner, tvars over kuvertet och receptkorten */
  top: 0;
  left: 0; right: 0;
  height: 2px;
  z-index: var(--z-head);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ================================================================
   SIDHUVUD — egen list högst upp
   ================================================================ */

.site-head {
  position: relative;
  z-index: var(--z-head);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  height: var(--head-h);
  padding: 0 var(--space-3);
  background: var(--verde);
  border-bottom: 1px solid rgba(201, 175, 107, 0.35);
  color: var(--cream);
}

.brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: inherit;
  text-decoration: none;
  padding: var(--space-05) 0;
}

.site-head nav { display: flex; gap: var(--space-2); align-items: center; }
.site-head nav a,
.site-head nav button {
  position: relative;
  background: none;
  border: 0;
  color: inherit;
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  min-height: 44px;
  padding: var(--space-05) var(--space-075);
}
.site-head nav a::after,
.site-head nav button::after {
  content: "";
  position: absolute;
  left: var(--space-075);
  right: var(--space-075);
  bottom: 9px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease-ut);
}
.site-head nav a:hover::after,
.site-head nav button:hover::after,
.site-head nav .is-active::after { transform: scaleX(1); }

#nav-news {
  border: 1px solid var(--kant-guld);
  border-radius: 999px;
  padding: 0 var(--space-1);
  min-height: 38px;
}
#nav-news::after { display: none; }
#nav-news:hover { border-color: var(--gold); }

/* ================================================================
   0 · ENTRÉN — moodboard-kollage (Orivelle-inspirerat, vårt varumärke)
   ================================================================ */

.entre {
  position: relative;
  height: calc(100svh - var(--head-h));
  min-height: 560px;
  /* mörkgrön vägg — tavlan hänger på den, inga tomma vita fält */
  background: var(--verde-deep);
  padding: 14px;
  /* raderna glider isär vid skroll och ska då kunna lämna bild */
  overflow: hidden;
}

/* Underkanten löses upp i väggens grönska så entrén och pastaväggen läser
   som en enda yta i stället för två sidor staplade på varandra. */
.entre::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  pointer-events: none;
  z-index: 2;
  /* 34 % lade en sloja over 74 % av understa fotot och malade bort
     passepartoutens nederkant - mattan syntes pa tre sidor men inte fjarde */
  background: linear-gradient(to bottom,
    rgba(20, 41, 31, 0) 0%,
    rgba(20, 41, 31, 0.10) 45%,
    rgba(20, 41, 31, 0.55) 78%,
    var(--verde-deep) 100%);
}

/* Passepartouten sitter på .entre-grid och skulle annars stanna kvar när
   rutorna glider ut — då blir det grönt bakom fotona mitt i rörelsen.
   Varje foto bär i stället sin egen gräddvita ram (14 px = rutnätets gap),
   så den vita ytan följer med bilden hela vägen ut. */
.et-foto,
.et-brand {
  /* Rutan bar sin egen graddvita botten ocksa - annars star en annu inte
     laddad bricka som ett gront hal i tavlan. */
  background-color: #E9E7E1;
  /* Varje ruta bar sin egen passepartout. Rutnatets graddvita botten ar borta:
     den stannade kvar nar rutorna gled isar och blottade ett tomt kritvitt hal
     mitt i rorelsen. Nu ar det vaggen som syns mellan dem. */
  box-shadow: 0 0 0 14px #E9E7E1;
}

@media (prefers-reduced-motion: reduce) {
  .et { transform: none !important; }
}

.entre-grid {
  height: 100%;
  /* kollaget beter sig som en riktig uppfäst tavla: blir fönstret för brett
     växer passepartouten på sidorna i stället för att fotona dras ut till
     smala band — brickorna behåller fotovänliga proportioner */
  max-width: min(100%, 152svh, 1620px);
  margin-inline: auto;
  /* passepartouten bars av rutorna, inte har - se .et-foto */
  background: transparent;
  padding: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: 24fr 13fr 13fr;
  grid-template-rows: 27fr 27fr 46fr;
  grid-template-areas:
    "brand ing vin"
    "brand ing tom"
    "ratt  till till";
}

.et { position: relative; overflow: hidden; margin: 0; }
.et-brand { grid-area: brand; }
.et-ing { grid-area: ing; }
.et-vin { grid-area: vin; }
.et-tom { grid-area: tom; }
.et-ratt { grid-area: ratt; }
.et-till { grid-area: till; }

.et-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.et-brand {
  background: var(--verde-deep);
  color: var(--cream);
  display: grid;
  place-items: center;
  text-align: center;
}
.et-eyebrow {
  position: absolute;
  top: 18px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.et-eyebrow--l { left: 22px; }
.et-eyebrow--r { right: 22px; }

.et-tag {
  font-family: var(--font-display);
  font-size: clamp(var(--text-sm), 1.4vw, var(--text-md));
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-1);
}
.et-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--text-3xl);
  line-height: 0.95;
  letter-spacing: var(--track-tight);
  color: var(--cream);
}
/* ordmarket satt i --pomodoro pa mork gron lag pa 2,87:1 — under 3:1 aven
   for stor text, och det ar sajtens storsta typografi */
.et-wordmark i { color: var(--pomodoro-pa-mork); }

/* dra-för-att-öppna — vägen in */
.slide-open { margin-top: clamp(1.5rem, 4svh, 3rem); }
.slide-track {
  position: relative;
  width: min(300px, 70vw);
  height: 56px;
  margin: 0 auto;
  border: 1px solid var(--kant-guld);
  border-radius: 999px;
  background: rgba(246, 241, 228, 0.07);
  overflow: hidden;
}
.slide-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(201, 175, 107, 0.25);
}
.slide-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 40px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  color: var(--cream-dim);
  pointer-events: none;
  user-select: none;
}
.slide-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--pomodoro);
  color: var(--paper);
  cursor: grab;
  transition: background var(--dur-micro) var(--ease-ut);
  --ring: var(--gold);
}
.slide-handle:hover { background: var(--pomodoro-deep); }
.slide-handle:active { cursor: grabbing; }
.slide-handle svg { width: 20px; }
.slide-open.is-done .slide-handle { background: var(--gold); color: var(--ink); }
.slide-open.is-done .slide-label { color: var(--gold); }

/* platshållare tills riktiga foton lagts i assets/photos/ */
.et-foto.is-placeholder { background: var(--verde); }
.et-foto.is-placeholder svg { width: 100%; height: 100%; }

@media (max-width: 767px) {
  .entre { min-height: 0; height: auto; padding: 10px; }
  .entre-grid {
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(46svh, auto) 22svh 22svh 26svh;
    grid-template-areas:
      "brand brand"
      "ratt  till"
      "ing   vin"
      "tom   tom";
  }
  .et-eyebrow { top: 12px; }
  .et-eyebrow--l { left: 14px; }
  .et-eyebrow--r { right: 14px; }
}

/* ================================================================
   1 · PASTAVÄGGEN
   ================================================================ */

.wall {
  position: relative;
  height: 100svh;
  min-height: 540px;
  background: var(--verde-deep);
  color: var(--cream);
  overflow: hidden;
}

.wall::before,
.wall::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  z-index: calc(var(--z-wall-cards) + 1);
  height: 110px;
  pointer-events: none;
}
.wall::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(20, 41, 31, 0.92), rgba(20, 41, 31, 0));
}
.wall::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(20, 41, 31, 0.94), rgba(20, 41, 31, 0));
}

.wall-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  /* operativsystemets griphand OCH den egna brickan syntes samtidigt,
     tjugo pixlar isar - se html.dp-cursor nedan */
  perspective: 1200px;
}
.wall-viewport.is-dragging { cursor: grabbing; }
.wall-viewport.wall--static { overflow: auto; }

.wall-word {
  position: absolute;
  inset: 0;
  z-index: var(--z-wall-word);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-4xl);
  color: rgba(201, 175, 107, 0.3); /* guld — läsbart, men korten vinner alltid */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* OBS: ingen preserve-3d — och z-index är OBLIGATORISKT så ordet hamnar bakom */
.wall-par {
  position: absolute;
  inset: 0;
  z-index: var(--z-wall-cards);
}

.wall-canvas {
  position: absolute;
  top: 0; left: 0;
}

.wall-tag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-1);
  z-index: calc(var(--z-wall-cards) + 2);
  margin: 0;
  pointer-events: none;
}

.pasta-card {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  text-align: left;
  transition: transform var(--dur-micro) var(--ease-ut);
}
/* Hela kortet lyfte forut - foto OCH bildtext, som vilket webbkort som helst.
   Nu lyfter bara bilden ur sin ram; etiketten sitter spikad. Galleri, inte rutnat. */
.pasta-card:hover { transform: none; }
.pasta-card:active { transform: none; }
.pasta-card:hover .card-art { transform: translateY(-6px); }
.pasta-card:active .card-art { transform: translateY(-2px); }
.wall-viewport.is-dragging .pasta-card .card-art { transform: none; transition: none; }
.wall-viewport.is-dragging .pasta-card { transform: none; transition: none; }

.card-lag { display: block; }

/* Utan eget kompositlager ritas varje kort om från grunden vid varje bildruta
   (skugga + foto), och draget landar på ~44 fps. Med lager: 59.
   Lagren skapas bara medan väggen syns — 48 permanenta lager är onödigt
   minne resten av sidan. */
.wall-canvas.is-live .card-lag { will-change: transform; }

.pasta-card .card-art {
  position: relative;
  display: block;
  overflow: hidden; /* skarpa hörn på väggen */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 24px rgba(0, 0, 0, 0.24);
  transition: box-shadow var(--dur-micro) var(--ease-ut);
}
.pasta-card:hover .card-art { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30), 0 26px 48px rgba(0, 0, 0, 0.38); }
.pasta-card:active .card-art { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); }
.pasta-card .card-art svg { width: 100%; height: auto; }
/* tryckt material har alltid en kant - utan den blir fotona palimmade jpeg:ar */
.pasta-card .card-art::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(246, 241, 228, 0.12);
}
.pasta-card .card-art::after {
  content: "Öppna →";
  position: absolute;
  right: 8px; bottom: 6px;
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-ut);
}
/* markoren bar redan ordet OPPNA - etiketten behovs bara for tangentbord */

.pasta-card .card-name {
  display: block;
  margin-top: var(--space-075);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-micro) var(--ease-ut);
}
.pasta-card:hover .card-name { color: var(--gold); }
.pasta-card .card-sub {
  display: block;
  font-size: var(--text-xs);
  /* namnet och underraden lag inom 4 % luminans - ingen hierarki alls */
  color: rgba(233, 226, 207, 0.58);
  letter-spacing: var(--track-normal);
}

.badge-today {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: var(--space-025) var(--space-075);
  background: var(--pomodoro);
  color: var(--paper);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* eget muspekarmärke på väggen — halvtransparent, glasigt, aldrig i vägen */
.wall-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-head) + 1);
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 999px;
  background: rgba(201, 175, 107, 0.85);
  box-shadow: 0 0 0 1px rgba(20, 41, 31, 0.15), 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--dur-micro) var(--ease-ut),
    width var(--dur-micro) var(--ease-ut),
    height var(--dur-micro) var(--ease-ut),
    margin var(--dur-micro) var(--ease-ut),
    background var(--dur-micro) var(--ease-ut);
  display: grid;
  place-items: center;
}
.wall-cursor.is-on { opacity: 1; }
.wall-cursor.is-open,
.wall-cursor.is-drag {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(251, 248, 239, 0.78);
  box-shadow: 0 0 0 1px rgba(201, 175, 107, 0.55), 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Oskärpan hör hemma vid hover, där markören står nästan stilla.
   Under drag tvingar backdrop-filter en omsampling av bakgrunden varje
   bildruta — och bakgrunden är just då 48 kort i rörelse. Mätt kostnad:
   42 fps i stället för 56. Något tätare yta ger samma intryck gratis. */
.wall-cursor.is-open {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.wall-cursor.is-drag {
  background: rgba(251, 248, 239, 0.9);
}
.wall-cursor span {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-ut);
}
.wall-cursor.is-open span, .wall-cursor.is-drag span { opacity: 1; }

/* skrollpil */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  color: var(--cream-dim);
  text-decoration: none;
  font-size: var(--text-xs);
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  min-height: 44px;
  padding: var(--space-05) var(--space-1);
}
.scroll-cue svg { width: 18px; }
.scroll-cue svg path {
  stroke-dasharray: 46;
  animation: cue-draw 4s ease-in-out infinite;
}
@keyframes cue-draw {
  0%, 55% { stroke-dashoffset: 0; }
  60% { stroke-dashoffset: 46; }
  62% { stroke-dashoffset: 92; }
  100% { stroke-dashoffset: 46; }
}
.scroll-cue:hover { color: var(--cream); }

.wall-cue {
  position: absolute;
  bottom: var(--space-1);
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-wall-cards) + 2);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* återbesökarens genväg */
.quick-pill {
  position: fixed;
  right: var(--space-1);
  bottom: var(--space-1);
  z-index: var(--z-head);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--verde-deep);
  border: 1px solid rgba(201, 175, 107, 0.5);
  color: var(--gold);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: opacity var(--dur-reveal) var(--ease-ut),
              transform var(--dur-reveal) var(--ease-ut),
              visibility 0s;
}
/* Bara opacity 0 racker inte: pillret lag kvar som tabbstopp aven nar det var
   osynligt, sa tangentbordet fick ett stopp helt utan synlig ring. visibility
   tas bort forst nar intoningen ar klar, annars slocknar det tvart. */
.quick-pill.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  visibility: hidden;
  transition-delay: 0s, 0s, var(--dur-reveal);
}

/* ================================================================
   2 · BREVET — CSS beskriver slutläget, GSAP animerar dit
   ================================================================ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  background: var(--verde);
  color: var(--cream);
  overflow: hidden;
}
/* söm mot väggen: mörkare grönt tonas in i stället för hård kant */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(var(--verde-deep), transparent);
  pointer-events: none;
  z-index: 1;
}

.env-rise { position: absolute; inset: 0; z-index: 2; }

.envelope {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max(50svh, 300px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  transform-origin: 50% 0;
}

.env-paper { position: absolute; inset: 0; width: 100%; height: 100%; }

.env-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  transform-origin: 50% 50%;
}

/* sigillet är en knapp: bryt det själv, eller skrolla förbi så bryts det tyst */
.env-seal {
  width: clamp(64px, 9svh, 88px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 6px rgba(34, 30, 23, 0.3));
  transition: transform var(--dur-micro) var(--ease-ut);
  position: relative;
  --ring: var(--pomodoro);
}
.env-seal:not(.is-cracked):hover { transform: scale(1.06); }
.env-seal:not(.is-cracked):active { transform: scale(0.97); }
.env-seal.is-cracked { cursor: default; }
/* statiskt brutet läge — för återbesök och reducerad rörelse */
.env-seal.is-cracked #seal-l { transform: rotate(-9deg) translate(-6px, 2px); transform-origin: 80% 50%; }
.env-seal.is-cracked #seal-r { transform: rotate(8deg) translate(6px, 3px); transform-origin: 20% 50%; }

.seal-shard {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  margin: -3px 0 0 -3px;
  background: var(--wax);
  clip-path: polygon(50% 0, 100% 80%, 0 100%);
  pointer-events: none;
}
.seal-shard--gold { background: var(--gold); width: 4px; height: 4px; clip-path: none; border-radius: 999px; }

.env-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 5svh, 3.6rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: var(--track-tight);
}
.env-brand i { color: var(--brass-dark); }

/* ETT kort över nedre halvan — tre sektioner, varma grå konturer */
.hero-card {
  position: absolute;
  top: max(50svh, 300px);
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1px;
  padding: 1px 1px 0; /* ingen bottenlinje mot nästa sektion */
  background: #D8D2C2;
  color: var(--ink);
}

.hc-sec {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
}

.hc-fade { height: 100%; }

.hc-name .hc-fade,
.hc-keys .hc-fade {
  padding: clamp(1rem, 2.2vw, 2.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hc-name h1 {
  font-size: var(--text-lg);
  margin-top: var(--space-05);
}
.hc-sub {
  margin-top: var(--space-05);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(var(--text-sm), 1.4vw, var(--text-md));
  color: var(--ink-65);
}

.hc-art { height: 100%; }
.hc-art svg { width: 100%; height: 100%; }

.hc-meta { margin-top: var(--space-1); }
.hc-meta span {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  padding: var(--space-05) 0;
  border-bottom: 1px solid var(--hairline);
}
.hc-meta span { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1); }
.hc-meta strong {
  /* float gjorde vardet till ett eget block - baslinjen lag 3 px fel i alla rader */
  float: none;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--track-normal);
  text-transform: none;
}
.hc-drink {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-65);
}
.hc-cta {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--pomodoro);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.hc-cta:hover { color: var(--pomodoro-deep); }

/* ================================================================
   3 · DAGENS RECEPT — grön botten, vita kort
   ================================================================ */

.today {
  background: var(--verde);
  color: var(--cream);
  padding: var(--space-5) var(--space-3);
}

.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-4);
  max-width: 72rem;
  margin: 0 auto;
  align-items: start;
}

.today-art {
  /* sticky utan hojdskillnad att rora sig i gav 625x553 px dod gron yta;
     papper ar mjukt, fotografier ar rakt avskurna */
  position: static;
  border-radius: 0;
  overflow: hidden;
}
.today-art svg { width: 100%; height: auto; }

.today-body .eyebrow { margin-bottom: var(--space-1); }

.today-title {
  font-size: var(--text-2xl);
  letter-spacing: var(--track-tight);
}

.today-sub {
  margin-top: var(--space-05);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--cream-dim);
}

.today-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--hairline-lt);
  border-bottom: 1px solid var(--hairline-lt);
  font-size: var(--text-sm);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.today-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-normal);
  text-transform: none;
}

/* Vinkeln — kockens rad, som ett draget citat */
.vinkeln {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--paper);
  color: var(--ink);
  border-left: 3px solid var(--brass-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.vinkeln .eyebrow { display: block; margin-bottom: var(--space-025); color: var(--brass-dark); }
.vinkeln p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.4;
}

.recipe-cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.recipe-cols > div {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-2);
  border-radius: var(--radius);
}

.recipe-cols h3,
.detail-body h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: var(--space-1);
}

.ingredients li:last-child,
.hc-meta span:last-child { border-bottom: 0; }

.ingredients li {
  list-style: none;
  padding: var(--space-05) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
}

.steps { counter-reset: steg; }
.steps li {
  list-style: none;
  counter-increment: steg;
  position: relative;
  padding: 0 0 var(--space-1) 2.6rem;
}
.steps li::before {
  content: counter(steg, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--pomodoro);
}

.drink {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.drink .eyebrow { display: block; margin-bottom: 0.4rem; color: var(--brass-dark); }
.drink p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
}

.today-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.today-actions button {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--kant-interaktiv);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color var(--dur-micro) var(--ease-ut), color var(--dur-micro) var(--ease-ut);
}
.today-actions button:hover { border-color: var(--gold); color: var(--gold); }

/* ================================================================
   4 · I GÅR / I MORGON
   ================================================================ */

.dagband {
  background: var(--verde);
  color: var(--cream);
  padding: 0 var(--space-3) var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  max-width: 72rem;
  margin: 0 auto;
}

.band-card {
  border: 1px solid var(--kant-interaktiv);
  border-radius: var(--radius);
  background: rgba(20, 41, 31, 0.5);
  color: var(--cream);
  padding: var(--space-2);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  transition: border-color var(--dur-micro) var(--ease-ut);
}
button.band-card:hover { border-color: var(--gold); }
.band-card .eyebrow { display: block; }
.band-card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
}
.band-imorgon { position: relative; overflow: hidden; }
.band-imorgon #band-imorgon-shape svg {
  position: absolute;
  right: -10px; top: -10px;
  width: 120px;
  stroke: var(--cream);
}
.band-count { margin-top: auto; }

/* ================================================================
   5 · SVARSKORTET
   ================================================================ */

.reply {
  background: var(--verde);
  padding: 0 var(--space-3) var(--space-5);
}

.reply-card {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  background: var(--paper);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 24px 60px rgba(10, 20, 15, 0.35);
}
.reply-card .eyebrow { display: block; margin-bottom: var(--space-1); }
.reply-card h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}
.reply-card h2 i { color: var(--brass-dark); }
.reply-sub {
  color: rgba(34, 30, 23, 0.7);
  max-width: 30rem;
  margin: 0 auto var(--space-3);
}

.news-form {
  display: flex;
  gap: 0.6rem;
  max-width: 26rem;
  margin: 0 auto var(--space-05);
}
.news-form input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 1.1rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1.5px solid rgba(34, 30, 23, 0.5);
  border-radius: 999px;
  transition: border-color var(--dur-micro) var(--ease-ut);
}
.news-form input::placeholder { color: rgba(34, 30, 23, 0.66); }
/* Fokusmarkering enligt WCAG 2.2 SC 2.4.11: minst 3:1 mot ofokuserat lage och
   minst 2 px omkrets. Kantfargen ensam gav 1,24-1,51:1 och holl inte. */
.news-form input:focus-visible {
  border-color: var(--pomodoro);
  outline: 3px solid var(--pomodoro);
  outline-offset: 2px;
}
.curtain .news-form input:focus-visible {
  border-color: var(--gold);
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.news-form button {
  min-height: 48px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--pomodoro);
  color: var(--paper);
  font-weight: 600;
  transition: transform var(--dur-tap) var(--ease-ut), background var(--dur-tap) var(--ease-ut);
}
.news-form button:hover { background: var(--pomodoro-deep); }
.news-form button:active { transform: scale(0.96); }

.news-error {
  color: var(--pomodoro-deep);
  font-size: var(--text-sm);
  min-height: 1.4em;
}
.news-success {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--brass-dark);
}
.news-consent {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: var(--track-normal);
  color: rgba(34, 30, 23, 0.7);
}
.news-consent a { color: inherit; }
.is-done .news-form, .is-done .news-error { display: none; }
.is-done .news-success { display: block; }

/* ================================================================
   6 · MANIFESTET
   ================================================================ */

.manifest {
  background: var(--verde);
  color: var(--cream-dim);
  padding: 0 var(--space-3) var(--space-5);
  text-align: center;
}
.manifest p {
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 2.2vw, 1.6rem);
  line-height: 1.7;
  max-width: 36rem;
  margin: 0 auto;
}
.manifest i { color: var(--gold); }

/* ================================================================
   RECEPT-OVERLAY & MENYN
   ================================================================ */

.detail, .menyn {
  position: fixed;
  inset: 0;
  z-index: var(--z-detail);
  display: none;
  background: var(--cream);
  color: var(--ink);
}
.detail.is-open, .menyn.is-open { display: block; }

.detail-scroll, .menyn-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--verde) var(--cream);
}
.detail-scroll::-webkit-scrollbar, .menyn-scroll::-webkit-scrollbar { width: 8px; }
.detail-scroll::-webkit-scrollbar-track, .menyn-scroll::-webkit-scrollbar-track { background: var(--cream); }
.detail-scroll::-webkit-scrollbar-thumb, .menyn-scroll::-webkit-scrollbar-thumb {
  background: var(--verde);
  border-radius: 999px;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100%;
}

.detail-art-wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.detail-art-wrap .detail-art { width: 100%; height: 100%; }
.detail-art-wrap svg { width: 100%; height: 100%; }

.detail-body {
  padding: var(--space-5) var(--space-3) var(--space-4);
  max-width: 38rem;
  margin-inline: auto;
}
.detail-body .eyebrow { margin-bottom: var(--space-1); }
.detail-title { font-size: var(--text-xl); }
.detail-sub {
  margin-top: var(--space-05);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--ink-65);
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-1) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.detail-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-normal);
  text-transform: none;
}
.detail-body .vinkeln {
  background: var(--paper);
  border-left-color: var(--brass-dark);
}
.detail-body h3 { margin-top: var(--space-2); }
.detail-body .drink { border: 1px solid var(--hairline); }

.detail-close {
  position: fixed;
  top: var(--space-1);
  right: var(--space-1);
  z-index: calc(var(--z-detail) + 1);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 30, 23, 0.48);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  transition: transform var(--dur-tap) var(--ease-ut), background var(--dur-tap) var(--ease-ut);
}
.detail-close:hover { background: var(--cream-dim); transform: rotate(90deg); }
.detail-close svg { width: 18px; }

.menyn-scroll {
  padding: var(--space-4) var(--space-3);
  max-width: 44rem;
  margin: 0 auto;
}
.menyn-scroll h2 { font-size: var(--text-xl); margin: var(--space-05) 0 var(--space-3); }
.menyn-list { list-style: none; }
.menyn-list button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-1);
  width: 100%;
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: none;
  text-align: left;
  color: inherit;
}
.menyn-list button:hover .m-name { color: var(--pomodoro); }
.m-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  transition: color var(--dur-tap) var(--ease-ut);
}
.m-idag {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--pomodoro);
}
.m-sub { grid-column: 1; font-size: var(--text-sm); color: var(--ink-65); }
.m-min {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: var(--text-sm);
  color: var(--ink-65);
}

/* ================================================================
   SIDFOT
   ================================================================ */

.site-foot {
  background: var(--verde-deep);
  color: var(--cream-dim);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  position: relative;
}
.site-foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(var(--verde), transparent);
  pointer-events: none;
}
.site-foot > * { position: relative; }
.site-foot .brand { font-size: 1.6rem; display: inline-block; margin-bottom: var(--space-1); }
.site-foot p { max-width: 34rem; margin: 0 auto var(--space-2); font-size: var(--text-sm); }
.foot-links {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.foot-links a {
  color: var(--cream-dim);
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 226, 207, 0.4);
  padding-bottom: 2px;
}
.foot-links a:hover { color: var(--cream); border-color: var(--gold); }
.site-foot small { display: block; font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; }

/* ================================================================
   NYHETSBREVS-RIDÅN
   ================================================================ */

.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--verde-deep);
  color: var(--cream);
  text-align: center;
  padding: var(--space-2);
}
.curtain.is-open { display: flex; }

.curtain-inner {
  max-width: 34rem;
  max-height: 100svh;
  overflow-y: auto;
  padding: var(--space-1);
}

.curtain-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.curtain h2 {
  /* xl, inte 2xl: pa 2xl (70 px) foll rubriken isar i tre rader i ridans
     smalare spalt. xl ligger narmast det gamla rava vardet och far plats. */
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
  text-wrap: balance;
}
.curtain h2 i { color: var(--gold); }

.curtain > .curtain-inner > p { color: var(--cream-dim); }
.curtain-inner > p:not(.eyebrow) { max-width: 28rem; margin: 0 auto var(--space-3); }

.curtain .news-form input {
  color: var(--cream);
  border-color: rgba(246, 241, 228, 0.6);
}
.curtain .news-form input::placeholder { color: rgba(246, 241, 228, 0.75); }
.curtain .news-form input:focus { border-color: var(--gold); }
.curtain .news-error { color: var(--pomodoro-soft); }
.curtain .news-success { color: var(--gold); }
.curtain .news-consent { color: var(--cream-dim); }

.curtain-skip {
  background: none;
  border: 0;
  color: var(--cream-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  padding: 0 var(--space-1);
  margin-top: var(--space-05);
}
.curtain-skip:hover { color: var(--cream); }

/* ================================================================
   RESPONSIVT
   ================================================================ */

@media (max-width: 1023px) {
  .today-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .today-art { position: static; max-width: 26rem; }
  .recipe-cols { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .site-head { padding: 0 var(--space-05); }
  .site-head nav { gap: var(--space-05); }
  .site-head nav a, .site-head nav button { font-size: var(--text-2xs); padding: var(--space-05) var(--space-025); letter-spacing: var(--track-ui); }
  #nav-index { display: none; } /* menyn nås via sidfoten på mobil */
  .wall::before { height: 90px; }
  .brand { font-size: var(--text-base); }

  .pasta-card .card-name { font-size: var(--text-sm); }
  .pasta-card .card-sub { display: none; }
  .wall-tag { left: var(--space-1); bottom: var(--space-05); }
  .wall-cue { bottom: 2.8rem; }

  .envelope { height: max(34svh, 220px); }
  .env-seal { width: 56px; }
  .env-inner { gap: var(--space-05); padding: 0 var(--space-1); }

  .hero-card {
    top: max(34svh, 220px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .hc-name .hc-fade { padding: var(--space-1) var(--space-2); }
  .hc-name h1 { font-size: 1.35rem; }
  .hc-keys .hc-fade { padding: var(--space-1) var(--space-2); }
  .hc-meta span { padding: var(--space-025) 0; font-size: var(--text-xs); }
  .hc-cta { margin-top: var(--space-05); }

  .today { padding: var(--space-4) var(--space-1); }
  .dagband { grid-template-columns: 1fr; padding: 0 var(--space-1) var(--space-2); }
  .reply { padding: 0 var(--space-1) var(--space-4); }
  .reply-card { padding: var(--space-3) var(--space-2); }
  .manifest { padding: 0 var(--space-1) var(--space-4); }
  .news-form { flex-direction: column; }

  .detail-grid { grid-template-columns: 1fr; }
  .detail-art-wrap { position: static; height: 42svh; }
  .detail-body { padding: var(--space-2) var(--space-1) var(--space-4); }
  .detail-body .eyebrow { padding-right: 56px; } /* stängknappen skuggar inte rubriken */
}

/* landskapstelefoner och andra låga fönster: brevet komponeras utan pin */
@media (max-height: 520px) {
  .hero { min-height: 100svh; }
  .envelope { height: max(30svh, 140px); }
  .hero-card { top: max(30svh, 140px); }
  .hc-name h1 { font-size: 1.2rem; }
}

@media (min-width: 1440px) {
  .today-grid { max-width: 80rem; }
}

/* ================================================================
   UTSKRIFT — receptet som ett brevpapper
   ================================================================ */

@media print {
  .wall, .hero, .dagband, .reply, .manifest, .curtain, .menyn,
  .site-head nav, .scroll-cue, .site-foot, .progress, .quick-pill,
  .today-actions, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .site-head { background: none; border-bottom: 2px solid #000; color: #000; height: auto; padding: 0 0 8pt; }
  .today { background: none; color: #000; padding: 12pt 0; }
  .today .eyebrow, .today-meta, .vinkeln .eyebrow { color: #000; }
  .today-grid { display: block; }
  .today-art { display: none; }
  .today-sub { color: #333; }
  .today-meta { border-color: #000; }
  .vinkeln { border-left-color: #000; background: none; padding-left: 12pt; }
  .recipe-cols { display: block; }
  .recipe-cols > div, .drink { background: none; padding: 8pt 0; border-radius: 0; }
  .recipe-cols h3, .drink .eyebrow { color: #000; }
  .ingredients li, .steps li { border-color: #ccc; }
  .steps li::before { color: #000; }
  .detail.is-open { position: static; display: block; background: none; color: #000; }
}

/* ================================================================
   QA-LÄGE (?solo=… — fungerar endast lokalt via DEV-gaten)
   ================================================================ */

html[data-solo="entre"] .wall,
html[data-solo="entre"] .hero,
html[data-solo="entre"] .today,
html[data-solo="entre"] .dagband,
html[data-solo="entre"] .reply,
html[data-solo="entre"] .manifest,
html[data-solo="entre"] .site-foot { display: none; }

html[data-solo="wall"] .entre,
html[data-solo="hero"] .entre,
html[data-solo="today"] .entre { display: none; }

html[data-solo="wall"] .hero,
html[data-solo="wall"] .today,
html[data-solo="wall"] .dagband,
html[data-solo="wall"] .reply,
html[data-solo="wall"] .manifest,
html[data-solo="wall"] .site-foot { display: none; }

html[data-solo="hero"] .wall,
html[data-solo="hero"] .today,
html[data-solo="hero"] .dagband,
html[data-solo="hero"] .reply,
html[data-solo="hero"] .manifest,
html[data-solo="hero"] .site-head,
html[data-solo="hero"] .site-foot { display: none; }

html[data-solo="today"] .wall,
html[data-solo="today"] .hero,
html[data-solo="today"] .site-head,
html[data-solo="today"] .site-foot { display: none; }

/* ================================================================
   REDUCERAD RÖRELSE — riktad, inte global
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pasta-card, .card-art, .card-lag, .envelope, .env-inner, .hero-card,
  .hc-fade, .detail, .detail-art, .curtain, .wall-par, .wall-canvas,
  .scroll-cue svg path, .wall-cursor, .quick-pill {
    animation: none !important;
    transition: none !important;
  }
  /* skip-länk, fokusringar och formulärens mikroövergångar behålls */
}

/* ---------- rättfoto ovanpå tallriks-SVG:n ---------- */
/* Tallriksteckningen är platshållare och tonar UT medan fotot tonar IN.
   Laddar fotot inte alls blir teckningen kvar — inget går sönder. */
.card-art, .r-art, .hc-art { position: relative; }

.plate-svg { transition: opacity 0.45s var(--ease-ut); }
.photo-on .plate-svg { opacity: 0; }

.dish-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* tallrikarna sitter en aning högt i bild — beskär därefter */
  object-position: 50% 47%;
  opacity: 0;
  transform: scale(1.03);
  transform-origin: 50% 52%;
  transition: opacity 0.55s var(--ease-ut), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.dish-photo.is-on { opacity: 1; transform: scale(1); }

/* fotot rör sig inuti sin ram vid hover — ramen står still, som i ett galleri */
.pasta-card .card-art .dish-photo { transition: opacity 0.55s var(--ease-ut), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.pasta-card:hover .card-art .dish-photo.is-on { transform: scale(1.05); }

/* "Öppna →" stod i bläck på mörkt trä och försvann helt när fotona kom.
   Etiketten får en egen mörk sarg och ljus text i stället. */
.pasta-card .card-art::after {
  right: 0;
  bottom: 0;
  padding: 16px 10px 7px;
  color: var(--paper);
  background: linear-gradient(to top, rgba(20, 41, 31, 0.78), rgba(20, 41, 31, 0));
}
/* tangentbordsanvändare ska få samma signal som mushovern ger */
.pasta-card:focus-visible .card-art::after { opacity: 0.95; }

@media (prefers-reduced-motion: reduce) {
  .dish-photo,
  .pasta-card .card-art .dish-photo,
  .plate-svg { transition: none; }
  .dish-photo { transform: none; }
  .pasta-card:hover .card-art .dish-photo.is-on { transform: none; }
}


/* ---------- en enda markör på väggen ---------- */
/* Sätts av JS först när den egna markören faktiskt är aktiv, så pekdon och
   reducerad rörelse behåller systemets pekare. */
html.dp-cursor .wall-viewport,
html.dp-cursor .wall-viewport * { cursor: none; }

/* IDAG-brickan var den enda helt mättade ytan i hela fotograferingen —
   nu husets mässing i stället för ett klistermärke. */
.badge-today {
  padding: 4px 11px 3px;
  border-radius: 999px;
  background: rgba(20, 41, 31, 0.52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(201, 175, 107, 0.55);
  color: var(--gold);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label-wide);
}

/* Brandrutan var en platt hålighet bland fem graderade fotografier —
   nu en tryckt panel, tänd från samma fönster uppe till vänster. */
.et-brand {
  /* maste komma EFTER .et-foto,.et-brand ovan for att vinna over bottenfargen */
  background: radial-gradient(115% 95% at 28% 18%, #24402F 0%, #172E22 55%, #10211A 100%);
}

/* fyra display-rader saknade kerning medan tre hade den */
.hc-name h1,
.detail-title,
.curtain h2,
.reply-card h2 { letter-spacing: var(--track-tight); }

/* manifestet var satt för luftigt för att läsa som ett block */
.manifest p { line-height: 1.45; letter-spacing: var(--track-tight); }

@media (max-width: 767px) {
  /* returbesökarens pil landade rakt på väggens skrollpil */
  .wall-cue { bottom: 5.25rem; }
  /* ramen är 14 px men mellanrummet 10 px på mobil — ramarna överlappade 18 px */
  .et-foto, .et-brand { box-shadow: 0 0 0 10px #E9E7E1; }
}

@media (prefers-reduced-motion: reduce) {
  .pasta-card:hover .card-art,
  .pasta-card:active .card-art { transform: none; }
}

/* pilen i "I går" ska följa rubriken, inte hänga på egen rad */
.band-card strong .band-pil {
  display: inline-block;
  transition: transform var(--dur-micro) var(--ease-ut);
}
button.band-card:hover strong .band-pil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .band-card strong .band-pil { transition: none; }
  button.band-card:hover strong .band-pil { transform: none; }
}

/* Upplysningen om bilderna: sagd rakt ut, inte bortgömd. Skämtraden i sidfoten
   ska inte längre sättas som juridisk versalsatt finstilt. */
.foot-bilder {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--cream-dim);
  opacity: 0.72;
  max-width: 34rem;
}
.site-foot small { text-transform: none; letter-spacing: var(--track-normal); }

/* ---------- kuvertet: geometri som tål sin behållare ---------- */
/* Allt nedan ligger på .envelope och ritas i CSS, så det förvrängs inte av
   viewBox-sträckningen. Fliken behåller en läsbar tonskillnad och en riktig
   vikkant; guldramen får samma insättning runt om. */

.env-flik,
.env-sidoflik,
.env-ram { position: absolute; pointer-events: none; }

/* överfliken — full bredd, spets nedåt, tydlig ton mot papperet */
.env-flik {
  left: 0; right: 0; top: 0;
  height: 46%;
  z-index: 1;
  background: linear-gradient(180deg, #F8F3E6 0%, #EBE2C9 100%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  /* vikkanten: en hårfin skugga längs spetsen i stället för en streckad path
     som plattas ut när rutan sträcks */
  filter: drop-shadow(0 1px 0 rgba(34, 30, 23, 0.22));
}

/* sidoflikarna, svagare — de ger papperet vikning utan att ta uppmärksamhet */
.env-sidoflik { inset: 0; z-index: 0; background: #F7F2E4; }
.env-sidoflik--v { clip-path: polygon(0 0, 32% 50%, 0 100%, 100% 100%, 68% 50%, 100% 0); opacity: 0.55; }
.env-sidoflik--h { clip-path: polygon(0 100%, 50% 52%, 100% 100%); background: #F3EDDC; opacity: 0.75; }

/* guldramen — samma insättning runt om, inte 36 mot 19 */
.env-ram {
  inset: 16px;
  z-index: 2;
  border: 1px solid rgba(201, 175, 107, 0.5);
}

/* innehållet ligger över papperskonstruktionen */
.env-inner { z-index: 3; }

@media (max-width: 767px) {
  .env-flik { height: 42%; }
  .env-ram { inset: 11px; }
}

/* Reducerad rörelse: sigillknappen byggde aldrig någon scen, så den gjorde
   ingenting alls trots att den lovade att öppna brevet. Nu visar den kortet. */
html.dp-brev-oppet .hc-fade { opacity: 1 !important; }
html.dp-brev-oppet #hero-card { transform: none !important; }

/* ---------- mobilens tryckytor ---------- */
@media (max-width: 767px) {
  /* sidfotens lankar var 25 px hoga - 44 px ar rimlig niva for tumme */
  .site-foot nav a,
  .site-foot a.brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Registret nas annars bara via en 25 px lank langst ner pa en 6200 px sida.
     Genvagspillret far darfor en andra atgard pa mobil. */
  .quick-pill { padding-right: 0; }
  .quick-pill .pill-index {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-1);
    margin-left: var(--space-05);
    border-left: 1px solid var(--kant-guld);
    color: inherit;
  }
}
@media (min-width: 768px) {
  .quick-pill .pill-index { display: none; }
}

/* Entrebilderna hade ingen platshallare och stod som tomma graddvita plattor i
   drygt tva sekunder. En morkgron ton under bilden gor vantan till en del av
   kompositionen i stallet for ett hal. */
.et-foto {
  background-color: #1B3327;
}
.et-foto img {
  opacity: 0;
  /* 0,35 s i stallet for 0,5 s: intoningen skjuter upp LCP med sin egen langd,
     och en halv sekund var for dyr for det den gav. */
  transition: opacity var(--dur-reveal) var(--ease-ut);
}
.et-foto img.ar-inne {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .et-foto img { transition: none; }
}