/* Middagsbladet — poster-style cookbook. Brand: deep green + tomato orange on cream.
   Colours are lifted from the logo (#074c36 / #e5532f). Light and dark. */

/* ---------------------------------------------------------------- fonts */
/* Self-hosted so the site keeps its zero-third-party, zero-dependency habit. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fraunces.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fraunces-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/nunito.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/nunito-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */

:root {
  --green: #074c36;
  --green-deep: #053527;
  --green-soft: #e2ede6;
  --orange: #e5532f;
  --orange-deep: #c33f1e;
  --orange-soft: #fce8de;

  --paper: #fbf6ec;
  --surface: #fffdf8;
  --ink: #241d17;
  --muted: #766a5c;
  --line: #e7dcc9;
  --head: var(--green);
  --on-dark: #fdf6ea;

  --shadow: 0 1px 2px rgb(36 29 23 / .06), 0 12px 28px -18px rgb(36 29 23 / .35);
  --shadow-lift: 0 2px 6px rgb(36 29 23 / .08), 0 26px 50px -24px rgb(36 29 23 / .45);

  --radius: 18px;
  --display: 'Fraunces', ui-serif, "Iowan Old Style", Georgia, serif;
  --sans: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1240px;
  --gap: 3px; /* the whole point of the tile wall: almost no gutter */
}

@media (prefers-color-scheme: dark) {
  :root {
    --green: #2f8b66;
    --green-deep: #0b1f18;
    --green-soft: #12291f;
    --orange: #ff7a50;
    --orange-deep: #ff9573;
    --orange-soft: #2c1810;

    --paper: #10130f;
    --surface: #191d18;
    --ink: #f2e9db;
    --muted: #a99c8b;
    --line: #2b3129;
    --head: #f6ecdd;

    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 28px -18px rgb(0 0 0 / .8);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / .55), 0 26px 50px -24px rgb(0 0 0 / .9);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 100;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--head);
  text-wrap: balance;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: #fff; padding: .75rem 1rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

/* A candy stripe across the very top — sets the tone before anything loads. */
.ribbon {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #074c36 0 26px, #e5532f 26px 52px, #f2a33c 52px 78px
  );
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1.5px solid var(--line);
}

.bar {
  max-width: var(--wrap); margin: 0 auto;
  padding: .55rem clamp(.85rem, 3vw, 2rem);
  display: flex; align-items: center; gap: clamp(.6rem, 2.5vw, 1.75rem);
}

/* Header runs the lockup horizontally — spoon beside wordmark — so the
   wordmark stays big without making the sticky bar tall. */
.brand {
  display: flex; align-items: center; gap: .55rem;
  flex: 0 0 auto; line-height: 0; text-decoration: none;
}
.brand-mark {
  height: clamp(26px, 3.4vw, 34px); width: auto;
  transform-origin: 70% 60%;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.brand-word { height: clamp(21px, 2.7vw, 27px); width: auto; }
.brand:hover .brand-mark { transform: rotate(-14deg) scale(1.06); }

@media (max-width: 400px) { .brand-mark { display: none; } }

/* Vinjetten: kategorins namn intill loggan, skilt från den med ett orange
   streck — tidningens sektionsnamn i huvudet i stället för ett rubrikblock som
   trycker ner ettan. Sätt i samma serif som rubrikerna, för den ÄR sidans
   rubrik; att den står i huvudet gör den inte till en meny. */
.brand-section {
  display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, .8rem);
  flex: 0 1 auto; min-width: 0;
  font-family: var(--display); font-weight: 800;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 72;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1; letter-spacing: -.01em;
  color: var(--head); white-space: nowrap;
}
.brand-section::before {
  content: ""; flex: 0 0 auto; width: 2px; height: 1.35em;
  border-radius: 2px; background: var(--orange);
}
/* Nere vid telefonbredd får menyn gå före: hellre ett huvud på två rader än ett
   som spänner isär sig. Vinjetten står kvar — det är den som säger var man är. */
@media (max-width: 560px) {
  .brand-section { font-size: 1rem; gap: .45rem; }
  .brand-section::before { height: 1.2em; }
}

.foot-logo { display: block; line-height: 0; }
.foot-logo img { height: clamp(70px, 11vw, 96px); width: auto; }

.nav { display: flex; gap: clamp(.5rem, 2vw, 1.1rem); margin-left: auto; }
.nav a {
  text-decoration: none; font-size: .95rem; font-weight: 800; color: var(--ink);
  padding: .35rem .6rem; border-radius: 999px;
  transition: color .15s, background .15s;
}
.nav a:hover { color: #fff; background: var(--orange); }
@media (prefers-color-scheme: dark) { .nav a:hover { color: #1a0d07; } }

.search { display: flex; align-items: center; position: relative; }
.search input {
  font: inherit; font-size: .95rem; font-weight: 600;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: .48rem 2.4rem .48rem 1rem; width: clamp(7.5rem, 17vw, 14rem);
  transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--muted); font-weight: 600; }
.search input:focus {
  border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); outline: none;
}
.search button {
  position: absolute; right: .28rem; background: none; border: 0; cursor: pointer;
  padding: .35rem; color: var(--muted); display: grid; place-items: center;
}
.search button svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round;
}
.search button:hover { color: var(--orange); }

@media (max-width: 760px) {
  .bar { flex-wrap: wrap; row-gap: .5rem; }
  .nav { margin-left: auto; order: 2; }
  .search { order: 3; flex: 1 1 100%; }
  .search input { width: 100%; }
}

/* ------------------------------------------------------------- kickers */

.kicker {
  margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; gap: .55rem;
}
.kicker::after {
  content: ""; flex: 0 0 2.2rem; height: 3px; border-radius: 3px;
  background: currentColor; opacity: .55;
}
.kicker.center { justify-content: center; }
.kicker.center::before {
  content: ""; flex: 0 0 2.2rem; height: 3px; border-radius: 3px;
  background: currentColor; opacity: .55;
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--orange); color: #fff;
  padding: .8rem 1.6rem; border-radius: 999px;
  font-weight: 800; font-size: 1rem; text-decoration: none;
  box-shadow: 0 6px 0 -1px var(--orange-deep);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 -1px var(--orange-deep); }
.btn:active { transform: translateY(2px); box-shadow: 0 3px 0 -1px var(--orange-deep); }

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

.hero {
  display: grid;
  border-bottom: 1.5px solid var(--line);
  background: var(--surface);
}

.hero-media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--green-soft);
}
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-media:hover .hero-img { transform: scale(1.03); }
.hero-img { transition: transform .6s ease; }

/* Rotated sticker over the photo — the “fun” cue that a blog card never has. */
.sticker {
  position: absolute; top: clamp(.75rem, 2.5vw, 1.6rem); left: clamp(.75rem, 2.5vw, 1.6rem);
  background: var(--orange); color: #fff;
  font-weight: 800; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px; transform: rotate(-4deg);
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / .5);
}

.hero-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: clamp(1.75rem, 5vw, 4rem) clamp(1.15rem, 5vw, 4rem);
  /* faint dot texture, so the panel does not read as an empty content box */
  background-image: radial-gradient(var(--line) .9px, transparent 1px);
  background-size: 18px 18px;
}
.hero-title {
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144;
  margin: 0;
}
.hero-title a { text-decoration: none; }
.hero-title a:hover { color: var(--orange); }
.hero-intro {
  margin: 0; max-width: 40ch; color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem); text-wrap: pretty;
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
  .hero-media { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: 32rem; }
  .hero-text { grid-column: 1; grid-row: 1; justify-content: center; }
}

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

.section {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}
.section.narrow { max-width: 46rem; }
.section.bleed { max-width: none; padding-left: 0; padding-right: 0; }

.section-head {
  display: flex; flex-direction: column; gap: .55rem; align-items: center;
  text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.section-head h1, .section-head h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144;
}
.section-sub { margin: 0; color: var(--muted); font-size: 1rem; max-width: 48ch; }

/* ----------------------------------------------------------- tile wall */

.wall {
  display: grid;
  gap: var(--gap);
  grid-auto-flow: dense;
  grid-template-columns: repeat(2, 1fr); /* phones always get a two-up mosaic */
  /* Shows through the 3px gutters, and fills the empty cells of a short last
     row — so it has to be the page colour, not a darker rule colour. */
  background: var(--paper);
  border-block: 1.5px solid var(--line);
}
@media (min-width: 560px) {
  .wall { grid-template-columns: repeat(auto-fill, minmax(min(33.333%, 260px), 1fr)); }
}

.tile {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--green-deep);
  isolation: isolate;
}
/* Every eighth tile goes wide, so the wall reads as a mosaic and not a table. */
@media (min-width: 760px) {
  .tile:nth-child(8n + 3) { grid-column: span 2; aspect-ratio: 2 / 1; }
}

.tile-link {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; text-decoration: none; color: var(--on-dark);
  padding: clamp(.8rem, 1.8vw, 1.35rem);
}
.tile-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; transition: transform .55s cubic-bezier(.2, .7, .3, 1), filter .35s;
}
.tile-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgb(5 20 14 / .92) 0%, rgb(5 20 14 / .62) 34%, rgb(5 20 14 / .12) 66%, rgb(5 20 14 / 0) 100%);
  transition: opacity .3s;
}
.tile:hover .tile-img { transform: scale(1.07); }
.tile:hover .tile-link::before { opacity: .88; }

.tile-title {
  color: var(--on-dark);
  font-size: clamp(1.02rem, 1.55vw, 1.35rem);
  font-variation-settings: 'SOFT' 90, 'WONK' 1, 'opsz' 60;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgb(0 0 0 / .45);
}
.tile:nth-child(8n + 3) .tile-title { font-size: clamp(1.1rem, 2.1vw, 1.8rem); }

.tile-note {
  margin: .35rem 0 0; font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgb(253 246 234 / .74);
  display: flex; align-items: center; gap: .4rem;
}
.tile-note::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--orange);
}
/* Orange bar wipes in along the bottom edge on hover. */
.tile-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.tile:hover .tile-link::after { transform: scaleX(1); }

.img-fallback {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 55%, var(--orange-deep) 100%);
}

.empty { color: var(--muted); text-align: center; padding: 2rem 1rem; }
.empty a:not(.btn) { color: var(--orange); font-weight: 800; }

/* --------------------------------------------------------------- pager */

.pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap; margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.page-link {
  text-decoration: none; font-weight: 800; color: var(--green);
  padding: .6rem 1.25rem; border: 2px solid var(--green); border-radius: 999px;
  background: transparent; transition: background .15s, color .15s, transform .15s;
}
.page-link:hover { background: var(--green); color: var(--on-dark); transform: translateY(-2px); }

/* -------------------------------------------------------------- recipe */

.recipe-hero { position: relative; background: var(--green-deep); }
.recipe-hero-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; max-height: 76vh; }
.recipe-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgb(5 20 14 / .93) 0%, rgb(5 20 14 / .55) 38%, rgb(5 20 14 / .08) 72%);
}
.recipe-hero-text {
  position: absolute; inset-inline: 0; bottom: 0; color: var(--on-dark);
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3.25rem) clamp(1rem, 4vw, 2rem);
  display: flex; flex-direction: column; gap: .7rem; align-items: flex-start;
}
.recipe-hero-text h1 {
  font-size: clamp(2rem, 5.6vw, 4rem); color: var(--on-dark);
  font-variation-settings: 'SOFT' 90, 'WONK' 1, 'opsz' 144;
  text-shadow: 0 2px 26px rgb(0 0 0 / .5);
}
.recipe-hero-text .kicker { color: #ffc9ab; }

@media (min-width: 820px) {
  .recipe-hero-img { aspect-ratio: 16 / 9; }
}

.lede {
  max-width: 44rem; margin: clamp(1.6rem, 4vw, 2.6rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2rem);
  font-family: var(--display);
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 40;
  font-size: clamp(1.12rem, 2.2vw, 1.38rem); line-height: 1.55;
  color: var(--ink); text-wrap: pretty;
}

.recipe-cols {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 4rem);
  display: grid; gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

@media (min-width: 940px) {
  .recipe-cols { grid-template-columns: minmax(18rem, 22rem) 1fr; }
  .ingredients { position: sticky; top: 6rem; }
}

.recipe-cols h2 {
  font-size: 1.6rem; margin-bottom: 1rem;
  font-variation-settings: 'SOFT' 90, 'WONK' 1, 'opsz' 72;
}

/* ---- ingredients */

.ingredients {
  background: var(--surface); border: 2px solid var(--green);
  border-radius: var(--radius); padding: clamp(1.15rem, 3vw, 1.7rem);
  box-shadow: 6px 6px 0 -1px var(--green-soft);
}
.ing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ing { border-bottom: 1px dashed var(--line); }
.ing:last-child { border-bottom: 0; }
.ing label {
  display: flex; align-items: flex-start; gap: .8rem; cursor: pointer;
  padding: .65rem .15rem; /* generous tap target for cooking with messy hands */
  font-weight: 600; transition: color .15s;
}
.ing-check { position: absolute; opacity: 0; width: 0; height: 0; }
.ing label::before {
  content: ""; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: .18rem;
  border: 2px solid var(--line); border-radius: 7px; background: var(--paper);
  transition: background .15s, border-color .15s;
}
.ing-check:checked + label {
  color: var(--muted); text-decoration: line-through; text-decoration-color: var(--orange);
}
.ing-check:checked + label::before {
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
  border-color: var(--orange);
}
.ing-check:focus-visible + label::before { outline: 3px solid var(--orange); outline-offset: 2px; }

.reset-ings {
  margin-top: 1rem; font: inherit; font-size: .85rem; font-weight: 800;
  background: none; border: 2px solid var(--line); border-radius: 999px;
  padding: .45rem 1.1rem; color: var(--muted); cursor: pointer;
}
.reset-ings:hover { border-color: var(--orange); color: var(--orange); }

/* ---- steps */

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: flex; gap: clamp(.9rem, 2vw, 1.4rem);
  padding: 1.05rem 0; border-bottom: 1px dashed var(--line);
}
.step:last-child { border-bottom: 0; }
.step p { margin: 0; font-size: 1.075rem; line-height: 1.7; text-wrap: pretty; }
.step-n {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-family: var(--display); font-size: 1.2rem; font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 40;
  display: grid; place-items: center;
}
/* Texten och stegets bilder ligger i samma spalt, till höger om siffran.
   min-width: 0 så en bred bild inte spränger flexraden. */
.step-body { flex: 1 1 auto; min-width: 0; }

/* ---- processbilder */

.step-figure { margin: 1rem 0 .35rem; }
.step-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--green-soft); /* syns medan bilden laddar */
}
.step-figure figcaption {
  margin-top: .55rem; font-size: .92rem; line-height: 1.5;
  color: var(--muted); text-wrap: pretty;
}

/* Bilderna sist på sidan: en spalt, samma läsmått som prosan. */
.recipe-gallery {
  max-width: 44rem; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(2.5rem, 6vw, 4rem);
  display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2.2rem);
}
.recipe-gallery .step-figure { margin: 0; }
/* Prosainlägg har redan en botteninsats i .prose — dubbla den inte. */
.prose + .recipe-gallery { padding-top: 0; }

.related { border-top: 0; }

/* --------------------------------------------------------------- prose */

.prose, .page {
  max-width: 44rem; margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2rem) clamp(2.5rem, 6vw, 4rem);
}
/* A page already provides the column, so its prose must not inset again. */
.page .prose { max-width: none; padding: 0; }
.page h1 {
  font-size: clamp(2rem, 5vw, 3rem); margin: .5rem 0 1.25rem;
  font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 144;
}

/* ---- fristående sida i två spalter (se simplePage() i app/render.js)

   Vänsterspalten behåller prosans läsmått — 44rem är valt för att raderna ska
   gå att läsa, och en bredare sida får inte göra dem längre. Sidan blir alltså
   bredare genom att marginalspalten LÄGGS TILL, inte genom att texten sträcks.
   Under 900px faller allt tillbaka i en spalt och marginalen hamnar sist. */
.page-split { max-width: 72rem; }
.page-cols { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
/* Marginalspalten har ett TAK i rem och inte bara en andel: bilden är en
   inskannad förstasida på 274 pixlar, och en spalt som växer med fönstret hade
   skalat upp den tills pappret blev grötigt. */
@media (min-width: 900px) {
  .page-cols { grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 20rem); }
}
.page-cols .prose { max-width: 44rem; }

.page-aside-inner {
  display: flex; flex-direction: column; gap: clamp(1.2rem, 3vw, 1.8rem);
}
.page-aside figure { margin: 0; }
/* `width: auto` och inte `100%`: i en spalt ligger bilden i sitt eget mått. En
   inskannad förstasida på 274 pixlar utsträckt över en hel telefonskärm är
   gröt, och att spara plats genom att sudda ut bilden är ingen besparing. */
.page-aside img {
  width: auto; max-width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--green-soft);
}

/**
 * Bilden slutar där texten slutar.
 *
 * Marginalspalten lyfts ur flödet — `position: absolute` inuti en `relative`
 * spalt — så att RADENS höjd bestäms av textspalten ensam. Utan det blir raden
 * så hög som bilden själv vill vara, och den kan aldrig krympa till textens
 * höjd: bilden skulle definiera det mått den sedan skulle rätta sig efter.
 *
 * Bilden får `height: 100%` och `width: auto` — alltså INTE `object-fit`. Med
 * object-fit hade elementets ruta fortsatt vara full spaltbredd och bilden
 * legat inklämd i den med en tom remsa bredvid, och remsan hade burit
 * bakgrunden, hörnradien och skuggan som hör till pappret. Nu följer bredden av
 * höjden genom bildens egna proportioner, så rutan är bilden. Beskuren blir den
 * aldrig: en förstasida från 1892 får inte klippas för layoutens skull.
 *
 * Blir texten längre än bilden kan fylla stannar bilden vid sin naturliga
 * bredd i stället för att skalas upp till gröt, och slutar då före texten. Det
 * är den ärliga gränsen: ett original på 274 pixlar kan inte bli större.
 *
 * `min-height` är golvet för en riktigt kort sida, så bilden inte pressas till
 * en strimma.
 */
@media (min-width: 900px) {
  .page-aside { position: relative; align-self: stretch; min-height: 18rem; }
  .page-aside-inner { position: absolute; inset: 0; }
  .page-aside figure {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .page-aside img { flex: 1 1 auto; min-height: 0; height: 100%; width: auto; max-width: 100%; }
}
.page-aside figcaption {
  margin-top: .6rem; font-size: .88rem; line-height: 1.5;
  color: var(--muted); text-wrap: pretty;
}

/* Utgivarrutan: tidningens redaktionsruta. Den ska gå att hitta med fingret på
   en gång — det är den ansvarige utgivaren en läsare letar efter — men den är
   inte sidans huvudtext, så den är satt mindre och i sajtens sans. */
.colophon {
  margin-top: clamp(.4rem, 2vw, 1rem);
  max-width: 44rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: calc(var(--radius) - 6px);
  padding: clamp(.9rem, 2.5vw, 1.2rem) clamp(1rem, 2.5vw, 1.3rem);
}
.colophon p { margin: 0; font-size: .95rem; line-height: 1.6; text-wrap: pretty; }
.colophon strong { font-weight: 700; }
.colophon a { color: var(--orange); font-weight: 700; text-underline-offset: 3px; }
.prose p { margin: 0 0 1.15rem; text-wrap: pretty; }
.prose h2, .prose h3 { margin: 2.2rem 0 .8rem; font-size: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.15rem; }
.prose li { margin-bottom: .45rem; }
.prose img { border-radius: var(--radius); margin: 1.6rem 0; box-shadow: var(--shadow); }
.prose a { color: var(--orange); font-weight: 700; text-underline-offset: 3px; }
.prose blockquote {
  margin: 1.6rem 0; padding: .35rem 0 .35rem 1.2rem;
  border-left: 4px solid var(--orange); color: var(--muted);
  font-family: var(--display); font-size: 1.2rem;
}

/* --------------------------------------------------------- search page */

.search.big { max-width: 36rem; margin: 0 auto 2.5rem; gap: .6rem; }
.search.big input {
  width: 100%; padding: .95rem 1.3rem; border-radius: 999px; font-size: 1.05rem;
  border-width: 2px;
}
.search.big button {
  position: static; background: var(--orange); color: #fff; border-radius: 999px;
  padding: .95rem 1.7rem; font: inherit; font-weight: 800; font-size: 1rem;
  box-shadow: 0 5px 0 -1px var(--orange-deep);
}
.search.big button:hover { background: var(--orange-deep); color: #fff; }

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

.site-footer { background: var(--green-deep); color: var(--on-dark); margin-top: auto; }
.foot-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  display: grid; gap: 1.4rem; justify-items: center; text-align: center;
}
.foot-tag {
  margin: 0; font-family: var(--display); font-size: 1.15rem;
  font-variation-settings: 'SOFT' 80, 'WONK' 1, 'opsz' 40;
  color: rgb(253 246 234 / .85);
}
.foot-inner nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; }
.foot-inner nav a {
  color: rgb(253 246 234 / .8); text-decoration: none; font-weight: 700; font-size: .95rem;
}
.foot-inner nav a:hover { color: var(--orange); }
.foot-note { margin: 0; color: rgb(253 246 234 / .5); font-size: .82rem; }

/* ------------------------------------------------------------ niceties */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile:hover .tile-img, .brand:hover img, .hero-media:hover .hero-img { transform: none; }
}

/* --------------------------------------------------------------- källor */

/**
 * Källistan under en nyhetsartikel.
 *
 * Samma läsmått som prosan, tydligt avskild men underordnad: den ska gå att
 * kontrollera, inte konkurrera med texten. Bara källor märkta 'outlet' hamnar
 * här — se sourceList() i app/render.js.
 */
.sources {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(2.5rem, 6vw, 4rem);
}
.sources h2 {
  font-family: var(--sans);
  font-size: .82rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li {
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: var(--muted);
  text-wrap: pretty;
}
.sources a { color: var(--orange); font-weight: 700; text-underline-offset: 3px; }

/* Prosan och galleriet bär redan sin understa luft; annars blir den dubbel. */
.prose + .sources,
.recipe-gallery + .sources { padding-top: 0; }

@media print {
  .ribbon, .site-header, .site-footer, .related, .pager, .reset-ings, .sticker { display: none; }
  /* Källorna följer med i utskriften — de hör till artikeln. */
  .sources a { color: #000; }
  .recipe-hero { max-height: 8cm; overflow: hidden; }
  .recipe-cols { display: block; }
  .ingredients { box-shadow: none; }
  /* Stegbilderna får plats, men små: receptet ska rymmas på ett papper. */
  .step-figure img { max-height: 6cm; width: auto; box-shadow: none; }
  .recipe-gallery { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------ tidningssida */

/**
 * Kategorisidan för det som är text — nyheter, humor — byggd som en tidnings
 * förstasida: en etta överst och därunder ett rutnät av olika stora artiklar.
 *
 * Bildväggen är byggd för recept: kvadrater, foto över hela ytan, titeln
 * ovanpå. Man väljer med ögonen och behöver inget mer. En artikel väljer man
 * med rubriken och ingressen, och en tidning visar dessutom med FORMATET vad
 * som är viktigast. Storlekarna här är därför en trappa och inte ett upprepat
 * mönster: se magazine() i app/render.js.
 *
 * Typografin är tidningens: rubriker i Fraunces tätt satta, datumet i
 * versalgemener ovanför, hårfina linjer i stället för kort med skuggor.
 */

/* Vinjetten står i huvudet (.brand-section), inte här: sidan börjar direkt med
   ettan. Luften ovanför den kommer från .section — mindre än den var, med flit. */
.section.paper { max-width: 74rem; padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ------- gemensamt för etta och kort */

.mag-lead a, .mag-title a { color: var(--head); text-decoration: none; }
.mag-lead a:hover, .mag-title a:hover { color: var(--orange); }
/* Hela ytan blir klickbar härifrån, så bilden slipper vara en andra länk till
   samma artikel — en skärmläsare hade annars läst upp den två gånger. */
.mag-lead-title a::after, .mag-title a::after { content: ""; position: absolute; inset: 0; }

.mag-img, .mag-lead-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.mag-lead:hover .mag-lead-img, .mag-card:hover .mag-img { transform: scale(1.04); }

/* ------- ettan */

.mag-lead {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.4rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.4rem);
  border-bottom: 2px solid var(--ink);
}
@media (min-width: 820px) {
  .mag-lead { grid-template-columns: 1.5fr 1fr; align-items: center; }
}

.mag-lead-media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--green-deep);
  border-radius: var(--radius);
}

.mag-flag {
  display: inline-block; margin: 0 0 .5rem;
  padding: .2rem .6rem;
  background: var(--orange); color: #fff;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px;
}
.mag-lead-title {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
  font-size: clamp(1.75rem, 4.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .6rem;
  text-wrap: balance;
}
.mag-lead-intro {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--muted);
  text-wrap: pretty;
}
.mag-more {
  display: inline-block; margin-top: .85rem;
  font-size: .92rem; font-weight: 800; color: var(--orange);
}
.mag-more span { display: inline-block; transition: transform .2s; }
.mag-lead:hover .mag-more span { transform: translateX(4px); }

/* ------- rutnätet */

.mag-grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: 1fr;
}
/* Sex spalter är tidningens rutnät: det delar sig jämnt i två, tre och sex,
   så halvor och tredjedelar kan stå i samma rad utan att något skevar. */
@media (min-width: 620px) {
  .mag-grid { grid-template-columns: repeat(6, 1fr); }
  .mag-mid { grid-column: span 3; }
  .mag-small { grid-column: span 2; }
  .mag-wide { grid-column: span 6; }
}
@media (min-width: 620px) and (max-width: 900px) {
  /* För trångt för tre i bredd — tvåa och tvåa. */
  .mag-small { grid-column: span 3; }
}

.mag-card {
  position: relative;
  display: flex; flex-direction: column;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.mag-media {
  position: relative; overflow: hidden;
  margin-bottom: .7rem;
  background: var(--green-deep);
  border-radius: calc(var(--radius) - 6px);
}
.mag-mid .mag-media { aspect-ratio: 3 / 2; }
.mag-small .mag-media { aspect-ratio: 4 / 3; }
.mag-wide .mag-media { aspect-ratio: 21 / 9; }

.mag-title {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 70, 'WONK' 1, 'opsz' 40;
  line-height: 1.15;
  margin: 0 0 .4rem;
  text-wrap: balance;
}
.mag-mid .mag-title { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.mag-small .mag-title { font-size: clamp(1.02rem, 1.7vw, 1.18rem); }
.mag-wide .mag-title { font-size: clamp(1.4rem, 3vw, 2rem); }

.mag-intro {
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
  text-wrap: pretty;
  /* Två rader oavsett hur lång ingressen är: rutnätet ska ha en jämn kant, och
     en avhuggen mening är ärligare än ett kort som växer förbi sina grannar. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.mag-wide .mag-intro, .mag-mid .mag-intro { -webkit-line-clamp: 3; line-clamp: 3; }

@media (prefers-reduced-motion: reduce) {
  .mag-lead:hover .mag-lead-img,
  .mag-card:hover .mag-img,
  .mag-lead:hover .mag-more span { transform: none; }
}

@media print {
  .mag-lead, .mag-card { break-inside: avoid; }
  .mag-lead-media, .mag-media, .mag-more { display: none; }
  .mag-grid { display: block; }
}