/* ==========================================================================
   Restaurang Moldau
   Design derived from the client's own printed anniversary book and rooms.
   Sections:
     1. Tokens
     2. Reset and base
     3. Typography
     4. Grounds (bands) and carved edges
     5. Gilt frame, tape, photo corners
     6. Header, flags, navigation
     7. Footer
     8. Buttons and links
     9. Utilities
   ========================================================================== */

/* 1. Tokens ============================================================== */

:root {
  /* Colour, sampled from the client's photographs and printed book.
     Contrast rule established by measurement:
       --guld is text-legible ONLY on --valnot (6.9:1).
       On --papper use --guld-mork (4.7:1). Never --guld on --papper (2.1:1). */
  --papper: #f5efe4;        /* book page cream */
  --papper-djup: #ebe3d3;   /* alternate page, card fill */
  --tidning: #ded4c0;       /* newsprint collage pages */
  --guld: #c9a227;          /* gold ochre, book headings and gilding */
  --guld-ljus: #e8c86a;     /* gilt highlight */
  --guld-mork: #75530a;     /* gold at text sizes: 6.1:1 on cream, 5.5:1 on the deeper cream */
  --rod: #c8102e;           /* Austrian flag, Stiegl signage, the awning */
  --rod-ljus: #ef4b60;      /* red at text sizes on --valnot, 4.65:1 */
  --rod-djup: #9b0c24;
  --valnot: #2b1a0e;        /* body text, dark grounds */
  --valnot-mjuk: #4d2208;   /* carved furniture shadow */
  --tra: #7a4a22;           /* pine */
  --gyllenbrun: #fda61a;    /* the breading itself, accents on dark only */

  /* Type */
  --f-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --f-bok: "EB Garamond", "Palatino", Georgia, serif;
  --f-hand: "Caveat", "Segoe Script", cursive;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;   /* EB Garamond runs small, so body sits at 17px */
  --t-md: 1.1875rem;
  --t-lg: 1.5rem;
  --t-xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --t-2xl: clamp(1.9rem, 1.15rem + 3.6vw, 3.5rem);
  --t-3xl: clamp(2.75rem, 1.2rem + 6.5vw, 5.5rem);

  /* The 44px tap-target floor the QA gate enforces. It appeared eleven times as
     a bare 2.75rem, which is eleven places for a new control to forget it. */
  --tapp: 2.75rem;

  /* SIDHEROERNAS TAK, Dennis 2026-08-18: "kan vi minska höjden på heron på
     följande sidor, meny, oktoberfest, större sällskap och kontakt". De fyra var
     fullskärm minus sidhuvudet, alltså 803 px på 1440x900; taket tar dem till 640.

     ETT TAK OCH INTE ETT NYTT GOLV. Regeln är min(fullskärm, taket): på en LÅG vy
     är fullskärmshöjden fortfarande det mindre talet och styr, så heron växer
     aldrig förbi rutan. Det taket ändrar är höga fönster -- på 820x1180 var de
     fyra heroerna 1104 px, alltså en vägg innan sidan börjar.

     TALET BOR HÄR för att det står i två regler (.hero-hel och .menytopp-band,
     som inte kan dela klass -- se notisen vid .hero-hel). Två kopior av ett tal
     driver isär; en token gör dem till samma tal, och tools/matt_heroer.mjs läser
     DEN här variabeln ur sidan i stället för att bära en egen kopia. */
  --sidhero-tak: 40rem;

  --spar-display: 0.1em;   /* wide tracking, after their printed menu */
  --spar-vid: 0.22em;

  /* Space, on a 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --matt: 74rem;           /* content measure */
  --matt-text: 38rem;      /* reading measure */

  /* The scalloped valance carved along the top of their walls, and the
     chisel-notch rule. One mask asset each, recoloured per band.

     The valance is the one carved into the beam over their own bar: a broad
     shallow swag with a slim pointed drip between each swag. Read off
     DELIEVERY/Bilder - Interiör/Moldau - Interiör-7.jpg, where the repeat is
     ~285 px, the swag hangs 0.19 of that and the drip 0.25, and the drip is
     only ~0.09 of the repeat wide. Hence the 74x20 tile: at height 20 that
     period is what puts the swag at the beam's own depth-to-width. The
     dining-room border (Interiör-12) is a different, finer carving -- do not
     mix them up.

     DRAWN UPSIDE DOWN ON PURPOSE. All four .skal are used with
     transform: scaleY(-1), so the solid strip sits at the BOTTOM of the tile
     and the shapes point up; the flip lands the strip on top and hangs the
     swag down, which is how the beam sits. The pre-2026-08 asset was two
     symmetric semicircles and read the same either way -- this one does not.
     Use .skal unflipped and you must mirror this asset with it. */
  /* Kappan, och den har INGA spetsar mellan bågarna. Den gamla masken hade en
     tunn tunga vid varje plattkant (L72 17.5 och L0 0.5) som gick från nästan
     toppen ned till nästan botten. En ensam platta ser hel ut; lagda kant i kant
     möts två tungor och blir ett streck som hänger ner mellan bågarna. Dennis
     pekade ut dem 2026-08-11.

     Nu: EXAKT SAMMA KURVA som förut, med samma kontrollpunkt och samma topp på
     y=4,5 -- bara tungorna borta. Kappan börjar och slutar på y=17,5 vid
     plattkanten i stället för att skjuta upp till 0,5, så två plattor möts i en
     mjuk skarv i stället för i två tungor.

     Första försöket bytte kurvan mot två tangerande halvcirklar. Det tog bort
     strecken och gjorde om formen på samma gång, från breda grunda kappor till
     djupa bågar. Dennis bad om det ena, inte det andra. */
  --mask-skal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='20' viewBox='0 0 74 20'%3E%3Cpath d='M0 20H74V17.5Q37 -8.5 0 17.5Z' fill='%23fff'/%3E%3C/svg%3E");
  --mask-hugg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 L6 1 L12 4 L18 1 L24 4 L24 5 L18 2 L12 5 L6 2 L0 5 Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* 2. Reset and base ===================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky stack on meny.html measures 182px, not 88px, so an anchored
     heading landed 30px behind the bars. Built from the heights the header
     script publishes; the fallbacks are the measured desktop values so a
     no-JS visitor still clears them. */
  scroll-padding-top: calc(var(--topp-h, 8rem) + var(--menynav-h, 3.5rem) + var(--s-4));
}

body {
  margin: 0;
  background: var(--papper);
  color: var(--valnot);
  font-family: var(--f-bok);
  font-size: var(--t-base);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

figure, blockquote { margin: 0; }

/* Headings never leave their last word alone on a line: three of them did, on
   index, meny and historien. balance evens the line lengths, which is the right
   choice for short display headings; pretty is for running copy. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* display:block above would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }

/* Reduced motion is honoured everywhere, including the smooth scroll above. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

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

.pa-mork :focus-visible,
.band--valnot :focus-visible { outline-color: var(--guld); }

/* Skip link */
.hoppa {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--valnot);
  color: var(--papper);
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: var(--spar-display);
}
.hoppa:focus { left: var(--s-3); top: var(--s-3); }

/* 3. Typography ========================================================= */

/* Display voice: geometric caps, wide tracking. Taken from their own printed
   menu, which is set centred in letterspaced geometric capitals. */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--spar-display);
  line-height: 1.02;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.display--jatte { font-size: var(--t-3xl); font-weight: 300; }
.display--stor  { font-size: var(--t-2xl); }
.display--mid   { font-size: var(--t-xl); }
.display--liten {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--spar-vid);
}

/* Book voice: the gold serif headings from the anniversary book. On cream the
   colour steps down to --guld-mork so it stays legible. */
.bok-rubrik {
  font-family: var(--f-bok);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.15;
  color: var(--guld-mork);
  margin: 0 0 var(--s-4);
}

.band--valnot .bok-rubrik,
.band--rod .bok-rubrik { color: var(--guld); }

.band--rod .bok-rubrik { color: var(--papper); }

/* Lead paragraph, italic, exactly as the book sets its intros. */
/* A display heading has line-height 1.02 and no margin, and .lead has none on
   top, so the two boxes touched: measured 0px between "HUR HUNGRIG ÄR DU?" and
   the paragraph under it, while the 12px eyebrow above got more air than the
   19px paragraph below. The rhythm was inverted. */
.display--stor + .lead,
.display--stor + .brod,
.display--jatte + .lead,
.bok-rubrik + .lead { margin-top: var(--s-4); }

.lead {
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: var(--matt-text);
  margin: 0 0 var(--s-5);
}

/* Samma skäl som .brod:last-child nedan: en sista .lead i en grid-cell (t.ex.
   .storre-hero__ord) kan inte lämna av sin bottenmarginal till en granne --
   grid-celler kollapsar inte marginaler -- så den blir instängd luft i botten
   av cellen i stället för mellanrum mot nästa element. Dennis 2026-08-20:
   "onödigt mycket spacing ... dra ner på det". */
.lead:last-child { margin-bottom: 0; }

.brod {
  max-width: var(--matt-text);
  margin: 0 0 var(--s-4);
}

.brod:last-child { margin-bottom: 0; }

/* Marginalia, in the hand that captions the photographs in their book. */
.hand {
  font-family: var(--f-hand);
  font-size: var(--t-lg);
  line-height: 1.25;
  color: var(--valnot-mjuk);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.band--valnot .hand { color: var(--guld-ljus); }

/* Eyebrow, used to name what a section is rather than to decorate it. */
.ogonbryn {
  font-family: var(--f-display);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--spar-vid);
  color: var(--tra);
  margin: 0 0 var(--s-3);
  display: block;
}

.band--valnot .ogonbryn { color: var(--guld); }
.band--rod .ogonbryn { color: var(--papper); }

/* Menu voice: their printed menu, centred geometric capitals. */
.menyrad {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 4. Grounds and carved edges =========================================== */

.band {
  padding-block: var(--s-8);
  position: relative;
}

.band--papper     { background: var(--papper); }
.band--papperdjup { background: var(--papper-djup); }
.band--tidning    { background: var(--tidning); }
.band--valnot     { background: var(--valnot); color: var(--papper); }
.band--rod        { background: var(--rod); color: var(--papper); }

.band--valnot .brod,
.band--rod .brod { color: inherit; }

.inre {
  width: min(100% - 2 * var(--s-5), var(--matt));
  margin-inline: auto;
}

.inre--smal { width: min(100% - 2 * var(--s-5), 52rem); margin-inline: auto; }

/* The scalloped valance. Filled with the colour of the band it hangs from,
   so it reads as that band's own carved edge.

   It hangs ONTO the next band instead of sitting in a lane of its own. Without
   the negative margin the strip is 20px of page ground, so between the swags
   you see cream -- which on index.html put a pale line between the Kenar band
   and the newsprint reviews and read as a gap rather than a separation. The
   overlap lets the following band's own ground show through the cuts. Safe at
   20px: the shallowest band under a valance has 64px of top padding. */
.skal {
  height: 20px;
  margin-bottom: -20px;
  position: relative;
  z-index: 1;
  background: currentColor;
  -webkit-mask: var(--mask-skal) repeat-x center / 74px 20px;
  mask: var(--mask-skal) repeat-x center / 74px 20px;
}

/* One per band background, because the valance belongs to the band above it and
   is painted in that band's colour. papperdjup and tidning arrived 2026-08-12,
   when the start page got a valance at every seam and not only at the walnut
   one. */
.skal--papper     { color: var(--papper); }
.skal--papperdjup { color: var(--papper-djup); }
.skal--tidning    { color: var(--tidning); }
.skal--valnot     { color: var(--valnot); }

/* Chisel-notch rule, after the carved furniture. */
.hugg {
  height: 8px;
  background: currentColor;
  color: var(--tra);
  -webkit-mask: var(--mask-hugg) repeat-x center / 24px 8px;
  mask: var(--mask-hugg) repeat-x center / 24px 8px;
  margin-block: var(--s-6);
  border: 0;
}

.band--valnot .hugg { color: var(--guld); }

/* The Austrian flag, as the torn red-white-red paper band in their book. */
.flaggband {
  background: linear-gradient(
    to bottom,
    var(--rod) 0 33.333%,
    var(--papper) 33.333% 66.666%,
    var(--rod) 66.666% 100%
  );
  padding-block: var(--s-7);
  position: relative;
}

.flaggband__text {
  background: var(--papper);
  color: var(--valnot);
  max-width: min(100% - 2 * var(--s-5), 46rem);
  margin-inline: auto;
  padding: var(--s-5) var(--s-6);
  text-align: center;
}

/* 5. Gilt frame, tape, photo corners ==================================== */

/* The gilt frame from their menu cover. Built from layered gold so it reads
   as gilding without pretending to be carved acanthus. Used sparingly:
   the portion portrait and the one-star hall, nowhere else. */
.ram {
  position: relative;
  display: grid;          /* so the inner panel fills a stretched grid row */
  padding: 14px;
  background:
    linear-gradient(135deg, var(--guld-ljus), var(--guld) 35%, #7d6412 55%, var(--guld) 78%, var(--guld-ljus));
  box-shadow:
    0 0 0 1px #6b5410,
    inset 0 0 0 1px var(--guld-ljus),
    0 10px 30px rgb(43 26 14 / 0.35);
}

.ram::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid #6b5410;
  pointer-events: none;
}

.ram__inre {
  position: relative;
  background: var(--valnot);
  overflow: hidden;
}

/* The frame's inside is walnut, so anything textual placed in it needs the
   reversed ink explicitly. Without this a caption inherits the light band's
   walnut and renders walnut on walnut at 1:1, which is exactly what happened. */
.ram__inre { color: var(--papper); }
.ram__inre figcaption,
.ram__inre .bildtext { color: var(--papper); }

/* The inner fillet is drawn by .ram::before, which inherits no radius of its
   own: without these it stamps a hard-edged rectangle across the gilt oval with
   its corners loose in the walnut. It reads as a rendering fault, on the one
   frame that is meant to be the block's jewel. */
.ram--oval,
.ram--oval .ram__inre,
.ram--oval::before { border-radius: 50% / 42%; }

.ram--rund,
.ram--rund .ram__inre,
.ram--rund::before { border-radius: 50%; }

/* Adhesive tape, as on the "Kära gäst" page. */
.tejp { position: relative; }

.tejp::before,
.tejp::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 26px;
  background: rgb(214 196 160 / 0.72);
  box-shadow: 0 1px 2px rgb(43 26 14 / 0.18);
}

.tejp::before { top: -13px; left: -18px; transform: rotate(-24deg); }
.tejp::after { bottom: -13px; right: -18px; transform: rotate(-24deg); }

/* A taped note, the format they actually use for guest notices. */
.lapp {
  background: var(--papper-djup);
  padding: var(--s-6);
  transform: rotate(-0.6deg);
  box-shadow: 0 6px 18px rgb(43 26 14 / 0.14);
}

/* White photo corners, from the family album spreads. */
.fotohorn { position: relative; display: block; }

.fotohorn::before,
.fotohorn::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background: var(--papper);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  z-index: 1;
}

.fotohorn::before { left: 0; bottom: 0; }
.fotohorn::after { right: 0; top: 0; transform: rotate(180deg); }

/* 6. Header, flags, navigation ========================================== */

.topp {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papper);
  border-bottom: 1px solid rgb(122 74 34 / 0.28);
}

.topp__rad {
  width: min(100% - 2 * var(--s-4), var(--matt));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 4.25rem;
}

.ordmark {
  display: block;
  /* Without this the reset's max-width:100% beats the clamp() floor when the
     flex row gets tight: measured 123px against a 136px floor at 981px. */
  flex: none;
  text-decoration: none;
  padding-block: var(--s-2);
}

/* The delivered wordmark is 400 x 250 px, so 200 px is the ceiling its resolution
   allows -- above that it goes soft. See open question 7, a vector file from
   Press Art.

   THE SIZE IS PER PLACE, NOT SHARED. Both the header link and the footer use
   ordmarke(), so a width on this class alone changes two logos at once. Dennis
   asked for the top left one to come down on 2026-08-10; the footer's is the same
   file at the size it already was, and shrinking it too would have been a change
   nobody asked for, in a place he was not looking. */
.ordmark__bild { height: auto; }

/* The header, twice down on 2026-08-10, and the second time the FLOOR was the
   problem rather than the cap. Measured at the first size: 168 px at 1440 is 12 %
   of the screen, while 128 px at 375 is 34 % of it -- so the phone was carrying a
   mark nearly three times as large in the only terms that matter, and lowering the
   cap again would not have touched it. The floor is what a phone gets.

   Now 96 px at 375, which is 26 %, and 144 px at 1440. The vw term comes down with
   both so the shrink holds through the middle widths instead of only at the ends.
   Swept 360 to 1920 after: no horizontal overflow anywhere, including 981 to 1040,
   the window where this row is documented to stop fitting its own content. */
.ordmark .ordmark__bild { width: clamp(6rem, 13vw, 9rem); }

/* The footer, unchanged on purpose. */
.fot__marke .ordmark__bild { width: clamp(8.5rem, 18vw, 12.5rem); }

.fot__marke {
  display: block;
  width: fit-content;
  margin-bottom: var(--s-6);
}

/* The row is capped at --matt like every other band, so a wider screen buys it
   nothing: measured 1184px of usable width at 1240 and at 1920 alike, and the
   English header wanted 1199. The gaps came down from --s-5 to --s-4 here and in
   .nav rather than letting the row spill past its own measure. */
.topp__meny {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* Nothing in the header row shrinks. Flex items shrink before they overflow,
   and a button that shrinks does not report a problem -- it just wraps: "BOKA
   BORD" stood as two lines at every width from 1169 to 1920 once the navigation
   gained a sixth item, and three lines in English at 1169, while the row itself
   measured no overflow at all and looked fine to a check that only counted
   overflow. Held at their natural width they overflow honestly instead, and the
   hamburger breakpoint is what answers for it. */
.topp__panel > * { flex-shrink: 0; }
/* Bokningen flyttade UT ur panelen 2026-08-17 -- se shell.py -- så regeln som höll
   den från att radbryta måste följa med ut. Utan den stod "BOKA BORD" i två rader
   igen i det fönster raden är som trängst, och det är samma fel som en gång redan
   kostade ett svep: en knapp som radbryter rapporterar inget överflöd. */
.topp__meny > .knapp { flex-shrink: 0; white-space: nowrap; }

/* BOKNINGENS STORLEK ÄR FLYTANDE, och det är raden som kräver det. När knappen låg
   i panelen kostade den ingenting i radbredd på telefon; ute i raden ska den samsas
   med ordmärket och hamburgaren, och de två är golv som inte får röras -- märket
   står på 6rem, ett tal Dennis satte, och hamburgaren på 44 px, som är tryckytan.

   RÄKNAT: raden är min(100% - 2rem, --matt). Vid 320 px ger det 288, och märket 96
   + gap 16 + knapp + gap 12 + hamburgare 44 lämnar 120 px åt knappen. Full storlek
   är 161 på svenska och 181 på engelska, alltså 41 respektive 61 px för mycket.

   ENGELSKAN ÄR DEN SOM BINDER, och den mäts sällan: "Book a table" är 20 px bredare
   än "Boka bord", så en rad som håller på svenska kan spilla på engelska utan att
   någon ser det. Sveptes båda språken över tolv bredder från 320 till 1199.

   OCH ÖVERFLÖDET SYNS INTE I DOKUMENTET. Raden är smalare än fönstret, så innehåll
   kan spilla ut i sidmarginalen medan document.scrollWidth står stilla -- exakt det
   som lät "BOKA BORD" stå i två rader i månader här. Mätt på RADENS scrollWidth.

   Klampen tar ut sig själv på skrivbordet: vid 1024 och uppåt står knappen på 161
   respektive 181 px, alltså precis som före ändringen. Höjden stannar över 44 px
   hela vägen ned till 320 (mätt 47). */
/* `.topp .topp__boka` OCH INTE BARA KLASSEN, och det är inte en tillfällighet:
   `.knapp` sätter padding som EN kortform 350 rader längre ned i den här filen, och
   vid samma specificitet vinner den som står sist. Första versionen skrev knappen
   till 108 px i mätningen och 161 i webbläsaren -- alltså såg filen rätt ut och
   sidan gjorde något annat. Andra gången samma fälla under samma dag; se notisen i
   matkarusell.css. Två klasser räcker och är oberoende av var regeln hamnar. */
.topp .topp__boka {
  padding-inline: clamp(var(--s-3), 3.2vw, var(--s-6));
  font-size: clamp(var(--t-xs), 0.6rem + 0.8vw, var(--t-sm));
}

.nav {
  display: flex;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--spar-display);
  color: var(--valnot);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  /* "Större sällskap" is the only two-word item, and left to wrap it sat as two
     stacked lines among five single ones, which reads as a fault rather than as
     a longer name. The row has the width for it since the hamburger breakpoint
     moved to 73rem. */
  white-space: nowrap;
}

.nav a:hover,
.nav a:focus-visible { border-bottom-color: var(--rod); }
.nav a[aria-current="page"] { border-bottom-color: var(--guld-mork); }

/* Flags, top right, per the owners' note. Swedish and English are live;
   Russian and Cantonese are present but disabled until translations exist
   and someone in the chain can proofread them. */
.flaggor {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.flagga {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgb(122 74 34 / 0.3);
  padding: 0;
  cursor: pointer;
  border-radius: 0;
}

.flagga svg { width: 1.75rem; height: 1.25rem; display: block; }

.flagga[aria-pressed="true"] {
  border-color: var(--valnot);
  box-shadow: inset 0 0 0 2px var(--papper), inset 0 0 0 3px var(--valnot);
}

.flagga[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Hamburger. The panel must fit the viewport without scrolling. */
.luckan {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid rgb(122 74 34 / 0.3);
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.luckan span,
.luckan span::before,
.luckan span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--valnot);
  content: "";
  position: relative;
}

.luckan span::before { top: -6px; position: absolute; }
.luckan span::after { top: 6px; position: absolute; }

/* 75rem, and the number has moved three times now: 61.25 -> 65 -> 73 -> 75. The
   hamburger stays until the row actually fits, and every time the row gains
   something this has to be re-measured rather than reasoned about.

   The sixth navigation item, "Större sällskap", cost 1041-1199px. Two things
   were wrong at once and only the first was visible to a check that counted
   document overflow: the row is capped at --matt (1184px of usable width at any
   screen size), and its flex children were shrinking to fit inside that cap
   instead of overflowing -- so the booking button silently wrapped to two lines
   at every width up to 1920, and to three in English. Nothing shrinks now, the
   gaps came down from --s-5 to --s-4, and the row needs 1200px. */
@media (max-width: 75rem) {
  .luckan { display: grid; }
  .topp__meny { margin-left: auto; gap: var(--s-3); }

  /* BOKNINGEN BREDVID HAMBURGAREN, Dennis 2026-08-17. Den ligger efter panelen i
     källan för skrivbordets skull, så här flyttas den med `order` -- vilket är rätt
     ställe för avvikelsen: den syns i CSS där den gäller i stället för att vara
     inbakad i markupen där den inte gör det.

     VÄNSTER OM HAMBURGAREN. Menyknappen är den yttersta kontrollen i raden på varje
     sajt en gäst har använt, och att flytta den inåt för en CTA byter plats på två
     saker en tumme redan vet var de sitter. */
  .topp__boka { order: -1; }



  /* Positioned against the header's real height, not a constant. .topp is
     sticky, so it is this panel's containing block and 100% is whatever the
     wordmark's clamp() resolved to. The +1px clears .topp's own border-bottom,
     which top: 100% excludes because it resolves against the padding box.

     Measured before: at a hard 4.25rem the panel sat up to 46px behind a
     content-driven header, and at 979px the first menu link was painted across
     the bottom of the wordmark.

     overflow-y, not hidden: the breakpoint is 980px, so a 1440x900 laptop at
     200% zoom is still this layout. hidden turned 30px of overflow into lost
     content at 200%, 255px at 400%, and 105px on any phone in landscape, with
     no scrollbar, no wheel and no touch pan to recover it. */
  .topp__panel {
    position: absolute;
    inset: calc(100% + 1px) 0 auto;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--papper);
    border-bottom: 1px solid rgb(122 74 34 / 0.28);
    display: none;
    padding: var(--s-4) var(--s-5) var(--s-5);
  }

  .topp__panel[data-oppen="true"] { display: block; }

  .nav {
    flex-direction: column;
    gap: 0;
  }

  .nav a {
    display: block;
    padding: var(--s-3) 0;
    font-size: var(--t-md);
    border-bottom: 1px solid rgb(122 74 34 / 0.16);
  }

  .nav a[aria-current="page"] { color: var(--guld-mork); }

  /* The panel is display:block here, so its last row needs air under the flags.
     Regeln för panelens egen CTA är BORTA sedan bokningen flyttade ut ur panelen
     2026-08-17: det finns ingen `.knapp` kvar där inne, och en regel utan element är
     en fälla nästa gång någon letar efter var knappen stylas. Notisen om att den
     kollapsade till sin egen textbredd i en display:block-panel gäller ingenting
     längre -- knappen står i en flexrad igen. */
  .topp__panel .flaggor { margin-top: var(--s-4); }

  /* The panel is an overlay, so the page keeps showing below its bottom edge.
     With the phone at the top of the document that edge landed 11 px into the
     hero's own red Boka bord, and those 11 px read as a stray red band right
     under the menu's own button. Measured across six scroll positions: 11 px at
     0, nothing from 30 px down, so it was only ever the first screen -- but the
     first screen is the one a guest opens the menu on.

     It hangs off .luckan rather than off the panel for one reason: a click on a
     pseudo-element reports its OWNER as the event target, and the document
     handler in meny-luckan.js already treats a click on the hamburger as a
     toggle. So the scrim closes the menu for free, with no coordinate
     arithmetic and no second handler that could disagree with the first.
     pointer-events must stay at their default for that to hold -- `none` would
     pass the click through to whatever sits underneath, and what sits directly
     underneath is a tel: link.

     z-index: -1 is safe here, unlike over a photo, because .topp is sticky with
     z-index 40 and therefore its own stacking context: a negative layer inside
     it still paints above the page while staying below the header's own cream
     and below the panel. The panel's background is opaque, so nothing in the
     menu is dimmed -- only the page behind it.

     It starts BELOW the header, not at the top of the viewport. A negative layer
     paints after its stacking context's own background but before that context's
     content, so a full-viewport scrim left .topp's cream showing through at 55 %
     while dimming the wordmark and the hamburger drawn on top of it -- a muddy
     grey band under a clear logo. Only the frame showed it; every geometry check
     and the pixel count under the panel edge were both green. --topp-h is
     already published by meny-luckan.js with a ResizeObserver, so the scrim
     tracks a header whose height moves with the wordmark's clamp and with a
     language switch. The fallback matches .topp__rad's min-height.

     No transition. The panel appears via display, which cannot be animated, and
     a scrim that fades in behind a panel that snaps reads as lag rather than as
     a flourish. */
  .luckan[aria-expanded="true"]::before {
    content: "";
    position: fixed;
    inset: var(--topp-h, 4.25rem) 0 0;
    z-index: -1;
    /* The alpha is measured, not chosen. A scrim dims the red band rather than
       removing it -- the band is still painted, just darker -- so the number
       that matters is how far it stands out from the dimmed page beside it.
       Sampled at the panel edge: 0.55 leaves it at 1.50:1, 0.70 at 1.27:1,
       0.78 at 1.18:1, 0.86 at 1.10:1. Below about 1.2:1 it stops reading as an
       edge; past that the page behind goes to near-black and the scrim starts
       announcing itself instead of the menu. 0.78 is the first value on the
       quiet side of that line. */
    background: rgb(43 26 14 / 0.78);
  }
}

/* The menu must fit the screen without scrolling. Measured open in landscape it
   needed 411px against 283px available: the five nav links alone are 277px in one
   column. This is a height problem, not a width one, so the query is on height.

   Two columns of links at 47px, plus tighter panel padding, brings 411 down to
   263 and it fits. 47px still clears the 44px tap-target floor.

   overflow-y: auto stays on the base rule as a last resort. At 400% zoom the
   viewport is 225px tall and nothing would fit; a scrollbar nobody reaches for is
   better than content that cannot be reached at all. In every real case above
   that, the panel does not scroll.  */
@media (max-width: 75rem) and (max-height: 32rem) {
  .topp__panel { padding: var(--s-2) var(--s-5); }

  .topp__panel .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-5);
  }

  .topp__panel .nav a { padding-block: 0.65rem; }

  /* The nav's last border and the CTA's height are the remaining slack. Every
     pixel here is one the panel does not have to scroll for. */
  .topp__panel .nav a:last-child,
  .topp__panel .nav a:nth-last-child(2) { border-bottom: 0; }

  /* Half the gap the portrait panel gets. The two rows still need separating
     from the links, but landscape had 69px of slack against a 320px viewport
     and 2 x 16px would have eaten most of it. */
  .topp__panel .flaggor { margin-top: var(--s-2); }

  /* Regeln för panelens CTA är borta 2026-08-17: bokningen ligger i raden bredvid
     hamburgaren nu, inte i panelen. Slacken den friade -- knappens höjd -- finns
     inte längre att fria här, och panelen är i gengäld en rad kortare. */

}

/* THIS NUMBER IS THE OTHER HALF OF THE HAMBURGER BREAKPOINT and has to move with
   it: 75rem above, 75.0625rem here, so the two queries meet and never overlap.
   They did overlap between 2026-08-12's two breakpoint moves, when max-width went
   65rem -> 73rem -> 75rem and this one stayed: both queries then applied from
   1041 to 1200px, this one is later in the file, and the panel stood permanently
   unfolded under the header with the hamburger shut -- 373px of menu pushing the
   hero down, at every width in that band. Found by place 4, reproduced here.
   The gate now measures it; see the "panel folded" check in qa.mjs.

   No !important here. It used to carry one, to guarantee the desktop panel was
   visible whatever data-oppen had been left at by a resize — but the rules that
   hide the panel live inside the max-width query, which now genuinely stops where
   this one starts, and meny-luckan.js only ever touches the attribute and never
   an inline style. Nothing to defeat. It was doing one real thing though:
   blocking any later attempt to restyle the header, which is how a header
   proposal that only needed `display: contents` came to fail silently. */
/* De sista 8 pixlarna, och bara där de behövs. Vid 320 px räcker inte den
   flytande knappen ensam: raden behöver 291 px och har 288. Gapen är det
   billigaste stället att ta dem -- de syns inte mellan en knapp och en
   hamburgare som redan står tätt, medan märket och tryckytan är golv. */
@media (max-width: 23.5rem) {
  .topp__rad { gap: var(--s-3); }
  .topp__meny { gap: var(--s-2); }
}

@media (min-width: 75.0625rem) {
  .topp__panel {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }
}

/* 7. Footer ============================================================= */

.fot { background: var(--valnot); color: var(--papper); padding-block: var(--s-8) var(--s-6); }

.fot a { color: var(--guld-ljus); }

.fot .ogonbryn,
.fot .fakta dt { color: var(--guld); }

.fot__rutnat {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* Below the rule: our credit, the legal controls and the company details, in
   that order and all centred. It used to be one space-between row with the
   copyright at one end and the credit at the other; the credit now stands alone
   on the first line, which is the rule the other sites follow. Centred and paid
   for in width rather than height -- the wrap is wide and this small print needs
   little of it, so each row wraps rather than stacking. */
.fot__botten {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgb(245 239 228 / 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  font-size: var(--t-sm);
}

/* SPACE SEPARATES THE ITEMS, NOT A DRAWN MARK. The first pass put a dot between
   them, and a separator that belongs to a NEIGHBOUR cannot survive a wrap: as
   ::before it led the second line at 375 px, and moving it to ::after only
   turned it into a dot hanging off the end of a centred line. B.A.R.'s footer
   answers this with 2.2rem of gap and nothing else, which is right -- a wrap
   then costs nothing, because there is no mark that has to land somewhere. */
.fot__rad {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--s-2) var(--s-6);
}

.fot__rad--fin { opacity: 0.72; font-size: var(--t-xs); }

/* The label is a heading for the line under it, so when the line wraps it takes
   a row of its own rather than sitting beside one of the values it labels. */
@media (max-width: 40rem) {
  .fot__rad--fin > *:first-child { flex: 0 0 100%; }
}

/* THE HOUSE CREDIT. Two things about it are standards rather than choices, so
   that it is the same on every site we build -- see the same block in
   ~/restaurang-bar/assets/style.css, which says copy it and do not eyeball it:

     * an 18px tall lockup beside the label, 0.6rem apart;
     * always alone on its own centred line -- our signature under someone
       else's website, never one item in a row of small print.

   The lockup was set by WIDTH here, 7.5rem, which rendered it 20px tall: the
   file is 480x81, so a width is a height wearing a disguise. Set the height and
   let the width follow, and it is the same mark as on the other sites.

   The type is Moldau's own display token rather than B.A.R.'s Archivo Narrow.
   The size of the mark is the standard; the voice it stands in is the site's. */
.driven-av {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;                         /* 44px, the tap target */
  gap: 0.6rem;
  font-family: var(--f-display);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--spar-display);
  text-decoration: none;
}

.driven-av img { height: 18px; width: auto; display: block; }

/* 8. Buttons and links ================================================== */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-6);
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--spar-display);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--rod);
  color: #fff;
}

/* FÄRGEN MÅSTE DEKLARERAS HÄR, hittat 2026-08-17. Regeln satte bara bakgrunden, och
   `a:hover { color: var(--rod) }` längre ned har specificitet (0,1,1) medan
   `.knapp { color: #fff }` har (0,1,0) -- alltså vann a:hover och varje FYLLD knapp
   på sajten blev --rod på --rod-djup vid hover. Uppmätt rgb(200,16,46) på
   rgb(155,12,36), omkring 1,5:1: etiketten försvinner medan man pekar på den.

   Varför just den fyllda: alla andra varianter deklarerar sin hover-färg redan
   (.knapp--linje:hover, .band--valnot .knapp--linje:hover, .band--rod ...), och
   `.knapp--linje:hover` är (0,2,0) och slår a:hover. Den fyllda hade samma
   specificitet men ingen färg att slå med.

   qa.mjs mäter kontrast i VILOLÄGE och såg det aldrig -- en hovrad knapp finns inte
   i en skärmbild. Felet syntes för att en mätning råkade göras med pekaren kvar över
   knappen efter ett klick. */
.knapp:hover { background: var(--rod-djup); color: #fff; }

.knapp--linje {
  background: none;
  color: var(--valnot);
  border-color: var(--valnot);
}

.knapp--linje:hover { background: var(--valnot); color: var(--papper); }

.band--valnot .knapp--linje,
.band--rod .knapp--linje { color: var(--papper); border-color: var(--papper); }

.band--valnot .knapp--linje:hover { background: var(--papper); color: var(--valnot); }
.band--rod .knapp--linje:hover { background: var(--papper); color: var(--rod); }

.knapp-rad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

a { color: var(--guld-mork); }
a:hover { color: var(--rod); }

/* 9. Utilities ========================================================== */

.center { text-align: center; }
.center .lead, .center .brod { margin-inline: auto; }

.visuellt-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.staplad > * + * { margin-top: var(--s-4); }
.staplad--luft > * + * { margin-top: var(--s-6); }


/* Footer hours ============================================================ */
/* Opening hours and exceptional hours both belong here on every site: the footer
   is where a guest settles "where is it" and "is it open". */

/* No bottom margin since 2026-08-13: it was the air down to the exceptional
   hours heading, and that heading is a column of its own now. */
.fot__tider {
  margin: 0;
  font-size: var(--t-sm);
}

/* EN GRID PER RAD, INTE EN FÖR HELA LISTAN. Dennis 2026-08-19: "onsdag - fredag
   och lördag, dagarna och tiden har ett jätte stort mellanrum, det är onödigt".

   Ett enda rutnät över hela dl:n (1fr auto) gav dag-kolumnen ALL luft som blev
   över efter tid-kolumnen -- rätt på en bred skrivbordskolumn, ett gapande hål
   på en smal mobilkolumn där dagnamnet bara behöver en bråkdel av bredden.
   max-content på den kolumnen löste inte det ensamt: "Söndag, måndag och
   tisdag är det stängt." spänner båda kolumnerna (grid-column: 1/-1) och
   tvingade då UPP samma max-content-kolumn till sin egen bredd, så gapet kom
   tillbaka i en ny skepnad.

   De två raderna med dag+tid får därför sitt EGNA rutnät var, i .fot__tider-rad
   nedan, och stängt-raden ligger utanför alla rutnät i vanligt blockflöde --
   dess bredd kan då aldrig påverka någon annan rads kolumner. */
.fot__tider dt { margin: 0; }
.fot__tider dd { margin: 0; text-align: right; white-space: nowrap; }

.fot__tider-rad {
  display: grid;
  /* max-content på BÅDA, inte auto på den andra. En omärkt spec-detalj: en
     ren "auto"-kolumn (till skillnad från max-content) räknas med när rutnätet
     delar ut kvarvarande utrymme i en behållare som är bredare än kolumnerna
     -- och en <div> är block och fyller sin förälder, så det fanns alltid
     kvarvarande utrymme att dela ut. Tiden hamnade då ändå ute vid högerkanten,
     samma fel i en ny skepnad. max-content deltar inte i den utdelningen. */
  grid-template-columns: max-content max-content;
  gap: 0 var(--s-4);
}
.fot__tider-rad + .fot__tider-rad { margin-top: var(--s-1); }

.fot__tider-stangt {
  display: block;
  opacity: 0.72;
  margin-top: var(--s-1);
}


/* Cookie consent ========================================================== */
/* A paper card on the walnut, bottom-left so it never covers the booking CTA in
   the hero. Accept and decline are the same size and neither is pre-selected;
   "Inställningar" is quieter because it is a detour, not a third choice. */

/* HUSMÖNSTRET FÖR KAKBANNERN, mätt på staging.restaurang-kvarnen.pages.dev 2026-08-04 på
   Dennis ord "kolla hur vi gjort cookie bannern på denna sajt, det är så vi ska använda den".
   Kvarnens siffror: en fixerad overlay över hela viewporten, och remsan i den 1320px bred
   (satsbredden) och 97px hög, texten på EN rad (570x45) och de tre knapparna på EN rad
   (628x47), mörk botten med en varm hårlinje.
   Moldau låg som en 480x299-ruta nere till höger med knapparna staplade -- samma innehåll,
   tre gånger höjden och en helt annan tyngd på sidan. Det är layouten som byts här, inte ett
   ord av texten och inte ett av valen: "Acceptera alla" och "Endast nödvändiga" behåller lika
   vikt, vilket är ett samtyckeskrav och inte en smaksak. */
.kakor {
  position: fixed;
  z-index: 70;
  /* The visible box is the site's own measure and floats above the bottom edge, as Kvarnen's
     does -- a band welded to the screen edge reads as browser chrome rather than as part of
     the page. inset gives it the full width; max-width and the auto margins give it back. */
  inset: auto var(--s-4) var(--s-4) var(--s-4);
  max-width: 82.5rem;
  margin-inline: auto;
  background: var(--papper);
  color: var(--valnot);
  padding: var(--s-4) var(--gut, var(--s-5));
  border-top: 3px solid var(--guld);
  box-shadow: 0 -18px 44px -18px rgb(43 26 14 / 0.5);
  translate: 0 0.6rem;
  opacity: 0;
  transition: translate 300ms ease, opacity 300ms ease;
}

/* The strip is only the start view. The settings view has a row per category and has to be
   allowed its own height, so the one-line layout is scoped to [data-kv="start"] rather than
   to .kakor -- otherwise choosing Inställningar would squeeze five toggles onto one line. */
@media (min-width: 48rem) {
  /* wrap, and a real floor under the text. The buttons' row is 581px and it does not shrink,
     so with nowrap the paragraph was squeezed to a sliver at 768px and stood 544px tall -- the
     notice took 64% of that screen. Letting the row wrap and giving the text a 26rem basis
     means the buttons drop to their own line exactly when they no longer fit beside it, which
     is a threshold the layout finds by itself rather than a breakpoint I would have to guess. */
  .kakor__vy[data-kv="start"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4) var(--s-5);
  }
  /* The heading carries the same words as the aria-label and the paragraph repeats them, so
     on the strip it is the one element that can go without losing anything. Hidden from the
     eye, kept for a screen reader -- .vh is the site's own utility. */
  .kakor__vy[data-kv="start"] > h2 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; margin: 0;
  }
  .kakor__vy[data-kv="start"] > .brod { margin: 0; flex: 1 1 26rem; min-width: 0; }
  .kakor__vy[data-kv="start"] > .kakor__val { flex: 0 0 auto; flex-wrap: nowrap; margin: 0; }
  .kakor__vy[data-kv="start"] > .kakor__val .knapp { flex: 0 0 auto; }
}

.kakor.visas { translate: 0 0; opacity: 1; }

.kakor h2 { margin: 0 0 var(--s-3); }

.kakor .brod { margin: 0 0 var(--s-4); }

.kakor__lank {
  color: var(--guld-mork);
  text-underline-offset: 0.2em;
}

.kakor__val {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  /* stretch, not center: "Endast nödvändiga" wraps to two lines and measured 68px
     against the 48px of "Acceptera alla". Equal weight for the two choices is a
     consent requirement, not a preference. */
  align-items: stretch;
}

/* Equal weight for the two real choices, per the consent rules. */
.kakor__val .knapp { flex: 1 1 12rem; }

.kakor__text {
  background: none;
  border: 0;
  padding: var(--s-2) var(--s-1);
  min-height: var(--tapp);
  font-family: var(--f-display);
  font-size: var(--t-xs);
  letter-spacing: var(--spar-display);
  text-transform: uppercase;
  color: var(--tra);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.kakor__text:hover { color: var(--valnot); }

.kakor__rad {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--s-3);
  border-top: 1px solid rgb(122 74 34 / 0.18);
}

.kakor__rad .brod { margin: var(--s-1) 0 0; font-size: var(--t-sm); }

.kakor__rad + .kakor__val { margin-top: var(--s-4); }

/* The switch is a real checkbox: it stays operable and announced, and the track
   is drawn from it rather than replacing it. */
.kakor__vippa {
  position: relative;
  flex: none;
  width: 3.25rem;
  height: var(--tapp);
  display: grid;
  place-items: center;
}

.kakor__vippa input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.kakor__spar {
  width: 3rem;
  height: 1.6rem;
  border-radius: 1rem;
  background: rgb(122 74 34 / 0.26);
  transition: background 180ms ease;
  position: relative;
}

.kakor__spar::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--papper);
  transition: translate 180ms ease;
}

.kakor__vippa input:checked + .kakor__spar { background: var(--rod); }
.kakor__vippa input:checked + .kakor__spar::after { translate: 1.4rem 0; }
.kakor__vippa input:focus-visible + .kakor__spar {
  outline: 3px solid var(--guld-mork);
  outline-offset: 3px;
}

.kakor__vippa--last input { cursor: not-allowed; }
.kakor__vippa--last .kakor__spar { background: rgb(122 74 34 / 0.45); }

/* The footer control that reopens it, styled as the footer links beside it. */
.fot__lank {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  min-height: var(--tapp);
}