:root{
  --svh:1svh;
  --bg:#0c1817; --panel:#112221; --panel2:#192e2d;
  --fg:#f2eddf; --primary:#7fc3bc; --brand:#2c5e5b; --brand-hi:#376e6b;
  --accent:#c5d2bc; --mute:#a4b7b5; --rule:#2b4a48;
  --maxw:1240px;
  --pad:max(22px,calc((100vw - var(--maxw))/2 + 22px));
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Karla','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:17px;line-height:1.62;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;font-variation-settings:'SOFT' 40,'WONK' 1;line-height:1.06;margin:0;letter-spacing:-.015em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);color:var(--bg);padding:12px 18px;font-family:var(--mono);font-size:13px}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap.wide{max-width:1560px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;display:block}
.lead{color:var(--mute);font-size:clamp(17px,1.35vw,19px);max-width:62ch}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 26px;border-radius:999px;border:1px solid var(--brand);
  background:var(--brand);color:var(--fg);font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.btn:hover{background:var(--brand-hi);border-color:var(--brand-hi);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--rule)}
.btn.ghost:hover{background:rgba(127,195,188,.14);border-color:var(--primary);color:var(--fg)}

/* ---------- huset, och the arc it replaced ----------
   in#729: "dock gillar jag inte den halvcirkeln som dyker upp överallt. Den
   lixom hör inte hemma där." The arc sat in NINE slots (nav brand, hero
   eyebrow, five ticker separators, every divider, every notewire, the week
   pill, the manifesto watermark), so putting his drawing in all nine would
   have swapped the token and kept the pattern he objected to. It appears
   TWICE, both on the start page; every other slot lost its ornament instead
   of gaining a new one. The drawing is a 369x229 raster and turns to mud
   below ~56px, which is the second reason the small slots are empty rather
   than rebuilt. One file, tinted through a mask, so it takes any colour. */
.house{display:block;background-color:var(--primary);
  -webkit-mask:url(../assets/logo/lakehouse.png) center/contain no-repeat;
  mask:url(../assets/logo/lakehouse.png) center/contain no-repeat}
.divider{display:flex;align-items:center;gap:18px;padding:0 var(--pad);margin:0}
.divider .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule),transparent)}
.divider .pip{flex:none;width:5px;height:5px;border-radius:50%;background:var(--rule)}

/* ---------- progress + dots ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:0 50%;z-index:120}
.dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:11px;z-index:110}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--accent);background:transparent;cursor:pointer;opacity:.5;transition:background-color .3s ease,opacity .3s ease,transform .3s ease}
.dots button.active{background:var(--primary);border-color:var(--primary);opacity:1;transform:scale(1.35)}

/* ---------- intro curtain ---------- */
.intro{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;align-items:center;justify-content:center}
.intro-inner{text-align:center;padding:0 24px}
.intro-eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);opacity:0;margin-bottom:18px}
.intro-word{font-family:var(--disp);font-size:clamp(34px,7vw,86px);color:var(--fg);letter-spacing:-.02em}
.intro-bar{display:block;width:min(240px,60vw);height:2px;background:var(--rule);margin:26px auto 0}
.intro-bar-fill{display:block;height:100%;width:0;background:var(--primary)}
html:not(.js) .intro{display:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;transition:background-color .35s ease,border-color .35s ease,padding .35s ease;border-bottom:1px solid transparent}
.nav.solid{background:rgba(12,24,23,.94);border-bottom-color:var(--rule);backdrop-filter:blur(10px);padding-top:9px;padding-bottom:9px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg);min-height:44px}
.brand b{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:.01em}
.nav nav{display:flex;align-items:center;gap:6px}
.nav nav a{color:var(--fg);text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 13px;min-height:44px;display:inline-flex;align-items:center;transition:color .25s ease}
.nav nav a:hover{color:var(--primary)}
.nav .btn{margin-left:10px;min-height:44px;padding:10px 20px}
.navtoggle{display:none;background:transparent;border:1px solid var(--rule);border-radius:999px;color:var(--fg);width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center}
.navtoggle span{display:block;width:18px;height:1px;background:var(--fg);position:relative}
.navtoggle span::before,.navtoggle span::after{content:'';position:absolute;left:0;width:18px;height:1px;background:var(--fg)}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.mnav{position:fixed;inset:0;z-index:99;background:var(--bg);display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px}
body.menu-open .mnav{display:flex}
.mnav a{color:var(--fg);text-decoration:none;font-family:var(--disp);font-size:30px;padding:12px 20px;min-height:48px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(calc(88 * var(--svh)),880px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
/* 58% down, not the 46% the borrowed landscape hero used. The hero photo is
   HIS and it is PORTRAIT (in#684 IMG_3582, 1440x1920), so a wide viewport shows
   only a horizontal band of it: at 1440x792 the band is 41% of the frame and at
   2560px it is 26%. Measured at both — 46% cut the plate off the bottom edge on
   ultrawide, 58% holds the gloved hands AND the whole plate from 390px up.
   Horizontal stays 52%: it only bites on a phone, where the full height shows
   and the crop is sideways. */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:52% 58%}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(12,24,23,.62) 0%,rgba(12,24,23,.14) 24%,rgba(12,24,23,.56) 64%,rgba(12,24,23,.94) 100%),
  linear-gradient(100deg,rgba(12,24,23,.86) 0%,rgba(12,24,23,.60) 42%,rgba(12,24,23,0) 76%)}
/* padding-left aligns to the container, but max-width must ADD the padding back
   (border-box) or the text column collapses to nothing on a 2560px screen. */
.hero-inner{padding:calc(8 * var(--svh)) 22px 0 var(--pad);max-width:calc(var(--pad) + 900px)}
.hero-mark{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero-mark .house{width:74px;height:46px}
.hero-mark span{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.wordmark{font-family:var(--disp);font-weight:400;font-size:clamp(42px,7.4vw,104px);line-height:.98;letter-spacing:-.028em;margin:0 0 18px}
.wordmark i{font-style:normal;color:var(--primary)}
.hero-tagline{font-size:clamp(18px,1.7vw,23px);color:var(--fg);max-width:34ch;margin:0 0 10px;font-family:var(--disp);font-weight:300;line-height:1.32}
.hero-lede{color:var(--mute);max-width:52ch;margin:0 0 26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 calc(6 * var(--svh))}
/* the default hairline border disappears against a photo, so lift it on the hero */
.hero-cta .btn.ghost{border-color:rgba(242,237,223,.5);background:rgba(12,24,23,.34)}
.hero-cta .btn.ghost:hover{border-color:var(--primary);background:rgba(127,195,188,.2)}
.herobar{position:relative;z-index:1;border-top:1px solid var(--rule);background:rgba(12,24,23,.72);backdrop-filter:blur(6px);padding:14px var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.herobar b{color:var(--fg);font-weight:500}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--primary);color:var(--primary);border-radius:999px;padding:6px 14px}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--primary)}
.herobar a{color:var(--mute);text-decoration:none;transition:color .25s ease}
.herobar a:hover{color:var(--primary)}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--panel);padding:13px 0}
.ticker-inner{display:flex;width:max-content}
.mseg{display:flex;align-items:center;flex:none}
.mseg span{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);padding:0 26px;white-space:nowrap}
/* padding:0 is load-bearing: `.mseg span` above sets 26px of side padding,
   and a background paints the padding box, so without this the dot renders
   as a 56px bar. The 52px word gap already separates the items. */
.mseg .pip{flex:none;width:4px;height:4px;padding:0;border-radius:50%;background:var(--rule)}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(72px,9vw,132px) 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:44px}
.sec-head h2{font-size:clamp(30px,4.1vw,58px);max-width:16ch}
.num{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--primary)}

/* ---------- manifesto (pinned word-fill) ---------- */
.manifesto{position:relative;height:calc(240 * var(--svh));background:var(--bg)}
.manifesto-sticky{position:sticky;top:0;height:calc(100 * var(--svh));display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg)}
.manifesto .watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-48%);
  width:min(820px,88vw);aspect-ratio:369/229;opacity:.11;pointer-events:none;
  background-color:var(--primary)}
.manifesto .wrap{position:relative;text-align:center}
[data-manifesto]{font-family:var(--disp);font-weight:300;font-size:clamp(25px,3.5vw,50px);line-height:1.32;margin:0;max-width:20ch;margin-inline:auto;letter-spacing:-.015em}
[data-manifesto] .hl{color:var(--primary)}
html:not(.js) .manifesto{height:auto}
html:not(.js) .manifesto-sticky{position:static;height:auto;padding:calc(16 * var(--svh)) 0}

/* ---------- week board ---------- */
.board-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);border:1px solid var(--rule);border-radius:999px;padding:7px 15px;display:inline-flex;align-items:center;gap:9px}
.boardrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(250px,74vw),1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 20px;scrollbar-width:thin}
.day{scroll-snap-align:start;background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:24px 22px 26px;display:flex;flex-direction:column;min-height:340px}
.day.today{border-color:var(--primary);background:var(--panel2)}
.day-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.day h3{font-size:26px}
.day-date{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent)}
.day .marker{width:34px;height:17px;margin:10px 0 18px;opacity:0}
.day.today .marker{opacity:1}
.dish{border-top:1px solid var(--rule);padding:13px 0 0;margin:0 0 13px}
.dish:last-child{margin-bottom:0}
.dish .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);margin-bottom:5px}
.dish .v{font-size:15.5px;line-height:1.5;color:var(--fg);margin:0}
.dish .v.empty{color:var(--mute);font-style:italic}


/* ---------- feature (brunch) ---------- */
.feature{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.fmedia{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.fmedia img{width:100%;height:112%;object-fit:cover}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 28px}
.fact{border-top:1px solid var(--rule);padding-top:13px}
.fact b{display:block;font-family:var(--disp);font-size:clamp(24px,2.6vw,34px);color:var(--primary);line-height:1.1}
.fact span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- photo band ---------- */
.gmarquee{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.gmarquee::-webkit-scrollbar{display:none}
.gtrack{display:flex;width:max-content}
.gseg{display:flex;flex:none}
.gcard{flex:none;width:clamp(300px,25vw,520px);max-width:82vw;margin-right:14px;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--panel)}
.gcard img{width:100%;height:100%;object-fit:cover}
.gcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;background:linear-gradient(180deg,transparent,rgba(12,24,23,.9));font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}

/* ---------- booking + event ---------- */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,56px);align-items:start}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:clamp(24px,2.6vw,36px)}
.card h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:8px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* FORM CONTROLS. ⚠️ THEY HAD NO STYLING AT ALL until 2026-09-01: `.field`
   carried a min-height and nothing else, so every input, select and textarea on
   all four §1 forms rendered as a raw browser default — a white box with black
   monospace text and a 2px #767676 border — sitting on his dark green panel.
   Confirmed on the LIVE preview, not only in a local build, and it was two days
   from being the §4.2 färdigmeddelande.
   Nothing here is a new colour: every value is a token already in :root, and
   the idiom is `.chips button` twelve lines below, which was styled correctly
   all along. site_audit could not see this — black on white passes contrast and
   the 44px min-height passes tap targets, so every check said yes.
   `color-scheme:dark` is load-bearing: without it Chrome paints the date
   picker's icon and the select arrow in dark ink on a dark field. */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.fieldrow>.field{margin-bottom:0}
.field input,
.field select,
.field textarea{
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--rule);
  background:var(--panel2);color:var(--fg);font-family:var(--body);
  /* 16px, never smaller: iOS zooms the whole page in on a focused control below it. */
  font-size:16px;line-height:1.5;color-scheme:dark;
  transition:border-color .2s ease,background-color .2s ease;
}
.field textarea{resize:vertical}
.field input::placeholder,
.field textarea::placeholder{color:var(--mute);opacity:1}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--primary);background:var(--panel)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chips button{min-height:44px;padding:10px 17px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--mute);font-family:var(--mono);font-size:12px;letter-spacing:.13em;cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.chips button[aria-pressed="true"]{border-color:var(--primary);color:var(--primary);background:rgba(127,195,188,.1)}
.notewire{margin-top:18px;border-top:1px solid var(--rule);padding-top:16px;font-size:14px;color:var(--mute)}

/* ---------- kommande event ---------- */
.evgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,26px);margin-bottom:clamp(28px,3.4vw,52px)}
.evcard{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column}
.evcard .evwhen{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
.evcard h3{font-size:clamp(23px,2.2vw,30px);margin-bottom:10px}
.evcard p{color:var(--mute);font-size:15.5px;margin-bottom:20px}
.evcard .evfoot{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;border-top:1px solid var(--rule);padding-top:17px}
.evcard .evprice{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--primary)}
.evbook{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,3vw,52px);align-items:start}
.evbook .notewire{margin-top:22px}

/* ---------- about + contact ---------- */
.aboutgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.aboutmedia{border-radius:16px;overflow:hidden;aspect-ratio:3/2}
.aboutmedia img{width:100%;height:100%;object-fit:cover}
.infolist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.infolist li{display:flex;flex-wrap:wrap;gap:8px 18px;border-top:1px solid var(--rule);padding:14px 0}
.infolist b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);min-width:186px;font-weight:500}
.infolist span{color:var(--fg)}
.infolist a{color:var(--fg);text-decoration:none;transition:color .25s ease}
.infolist a:hover{color:var(--primary)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:56px 0 40px;background:var(--panel)}
.fgrid2{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 14px}
footer p,footer li{color:var(--mute);font-size:15px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--primary)}
.colophon{margin-top:40px;border-top:1px solid var(--rule);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#7d918e}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .fgrid,.twocol,.aboutgrid{grid-template-columns:1fr}
  .evgrid,.evbook{grid-template-columns:1fr}
  .fgrid2{grid-template-columns:1fr 1fr}
}
/* The burger takes over at 1140, not 860, and that number is MEASURED, not
   chosen. 2026-09-01: the desktop row already wrapped to THREE lines inside
   the fixed header from 1000px down - before the Julbord item existed - and
   site_audit's overflow check is blind to it, because flex shrinks the links
   instead of scrolling the document. Adding the Julbord item moved the first
   wrap to 1091 and the breakpoint to 1100.
   2026-09-03: the Företagsevent item (in#729) moved the first wrap to 1101,
   which left the old 1100 breakpoint with ONE pixel of headroom - measured by
   counting the rows of `.nav nav a` from 1200px down in 2px steps, not by an
   audit. Dropping the arc off the brand gave back 45px, which is the only
   reason a 13-character item fit at all. 1140 restores real headroom.
   ⚠️ ADDING OR RENAMING A NAV ITEM MOVES THIS NUMBER. Re-measure the row's
   first wrap width before shipping one. */
@media (max-width:1140px){
  .nav nav,.nav .btn{display:none}
  .navtoggle{display:inline-flex}
}
@media (max-width:860px){
  body{font-size:16.5px}
  .dots{display:none}
  .manifesto{height:auto}
  .manifesto-sticky{position:static;height:auto;padding:calc(16 * var(--svh)) 0}
  .hero{min-height:min(calc(92 * var(--svh)),820px)}
  /* on a phone the text spans the full width, so the scrim has to work vertically */
  .hero-scrim{background:linear-gradient(180deg,rgba(12,24,23,.58) 0%,rgba(12,24,23,.26) 18%,rgba(12,24,23,.74) 56%,rgba(12,24,23,.96) 100%)}
  .hero-inner{padding-top:calc(18 * var(--svh))}
  .facts{grid-template-columns:1fr;gap:0}
  .fact{padding:13px 0}
  .fieldrow{grid-template-columns:1fr}
  .fgrid2{grid-template-columns:1fr}
  .infolist b{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .intro{display:none}
}
html.reduce [data-anim]{opacity:1 !important;transform:none !important}

/* ---------- veckotavlan (server-rendered, swapped live by the editor) ----------
   ⚠️ THE MARKUP IS A CONTRACT, NOT A STYLE CHOICE. What build.py emits here must
   stay byte-identical to renderTokens() in the menu editor's lib.js, because the
   Pages middleware substitutes one for the other on the way to the visitor.
   hagawebb-menu-editor/test/render.test.mjs is what proves it; change one side
   and that test fails, which is the point. */
.board{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:clamp(22px,3vw,34px)}
.boardhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.boardhead .bw{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.dishlist{list-style:none;margin:0;padding:0}
.dishlist>li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--rule)}
.dishlist>li:last-child{border-bottom:0}
.dishlist .m{min-width:0}
.dishlist h3{font-size:21px;margin:0 0 4px}
.dishlist .d{font-size:15px;color:var(--mute);margin:0;max-width:56ch}
.dishlist .price{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--primary);white-space:nowrap;flex:none}
.dishlist .tom{font-size:15px;color:var(--mute)}
/* a group (Veckans / a weekday / Alltid hos oss) is itself a list item, so the
   whole board is one list and a screen reader reads it as one thing */
.dishlist>li.grp{display:block;padding:20px 0}

.dishlist>li.grp .dishlist>li{padding:10px 0}
.boardfoot{margin-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ---------- form status ---------- */
.formstatus{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--accent);margin:14px 0 0;min-height:1.2em;white-space:pre-line}
.formstatus.ok{color:var(--primary)}
.formstatus.err{color:#f0a9a0}

/* ---------- click-to-load map ---------- */
.mapbox{border:1px solid var(--rule);border-radius:16px;background:var(--panel);overflow:hidden;min-height:280px;display:flex;align-items:center;justify-content:center}
.mapask{text-align:center;padding:clamp(28px,4vw,52px);max-width:52ch}
.mapask p{color:var(--mute);font-size:15px}
.mapask a{display:inline-block;padding:4px 0;min-height:24px}
.mapbox iframe{display:block;width:100%;height:420px;border:0}
/* the honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- page hero (sub-pages) + prose ---------- */
.pagehero{padding:calc(var(--svh) * 18 + 40px) 0 clamp(40px,5vw,72px)}
.pagehero h1{font-size:clamp(38px,6vw,78px);margin:10px 0 20px}
.prose{padding-top:0}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin:clamp(34px,4vw,54px) 0 12px}
.prose h3{font-size:19px;margin:26px 0 8px;color:var(--accent)}
.prose p{max-width:72ch;color:var(--mute)}
.prose strong{color:var(--fg);font-weight:500}

/* ---------- the client's own logo ----------
   Sized by WIDTH with the intrinsic ratio doing the rest, so the box is
   reserved before the SVG lands and nothing reflows. */
.logomark{margin:0 0 22px}
.logomark img{width:min(560px,84vw);height:auto}
.brand.flogo{display:block;margin-bottom:16px}
.brand.flogo img{width:min(320px,72vw);height:auto}

/* ==========================================================================
   Pre-ship audit fixes, 2026-08-21. Each one is a MEASURED finding from
   scripts/site_audit.mjs, not a preference. Do not revert one without
   re-running the audit.
   ========================================================================== */

/* Tap targets. The audit measured 22 under 24px: form controls sat at 21px and
   the herobar links at 15px. 44px is the floor a thumb actually hits. */
.field input,
.field select,
.field textarea{min-height:44px}
.field textarea{min-height:110px}
.herobar a{display:inline-block;padding:6px 0;min-height:24px}
.infolist a{display:inline-block;padding:3px 0}

/* 200% zoom clipped .fmedia (291px of content in a 260px box). The feature
   photo is decorative framing, so it may shrink; the copy beside it may not. */
.fmedia{max-width:100%;overflow:hidden}
.fmedia img{width:100%;height:auto}

/* A PORTRAIT feature photo in that same 4/3 box. The `height:auto` rule above
   is what stops a LANDSCAPE photo clipping at 200% zoom, and it is the exact
   reason a portrait one overflows: at width:100% a 1000x1250 image is 1.25x as
   tall as the box it sits in, so `overflow:hidden` eats the bottom of it at
   every zoom level, not only at 200%. /seniorlunch/ uses g-utsikt, the only
   interior-with-the-lake photo we have and the truest one for that page's copy,
   and it is portrait. So the BOX changes shape and the photo stays.
   Measured 2026-08-23: audit went from "200% zoom clips DIV.fmedia (432 in
   260)" to clean, with / and /brunch/ unchanged. */
.fmedia.tall{aspect-ratio:4/5}
.fmedia.tall img{height:100%;object-fit:cover}

/* Hero ghost button read 1.86:1 — the cream label sat over whatever the photo
   happened to be behind it. This is OUR component, not one of Mazen's colours,
   so it is fixed rather than recorded: a darker plate plus a text-shadow, which
   is free legibility and changes no colour he chose. */
.hero-cta .btn.ghost{background:rgba(12,24,23,.66);border-color:rgba(242,237,223,.62);text-shadow:0 1px 2px rgba(12,24,23,.9)}
.hero-cta .btn.ghost:hover{background:rgba(12,24,23,.82);border-color:var(--primary)}
.herobar{text-shadow:0 1px 2px rgba(12,24,23,.7)}
.dishlist>li.grp>.grplabel{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}

/* Second audit pass, 2026-08-21.

   The honeypot input measured 185x21 and was counted as an undersized tap
   target on every page. It is off-screen and no thumb will ever find it, but a
   real finding buried under four fake ones is a finding nobody reads. */
.hp input{height:1px;min-height:0;padding:0;border:0}

/* Footer, contact and inline links were 18px tall. 24px is the floor. */
footer ul a,
.notewire a,
.prose a{display:inline-block;padding:4px 0;min-height:24px}
footer ul li{margin-bottom:2px}

/* Mobile hero, found on a SCREENSHOT and not by the auditor — it measures
   whether a thing is legible, never whether it looks composed.
   Under ~520px the eyebrow wrapped to two lines beside a fixed 74px mark,
   which pushed the text into the mark, and the two CTAs sat on one line with
   the second running to the edge. */
@media (max-width:560px){
  .hero-mark{align-items:flex-start;gap:10px}
  .hero-mark .house{width:52px;height:32px;margin-top:2px}
  .hero-mark span{letter-spacing:.2em;line-height:1.5}
  /* the eyebrow sits over open sky here, which is the brightest part of the
     photo; a shadow is free legibility and changes none of his colours */
  .hero-mark span,.hero-mark .house{filter:drop-shadow(0 1px 3px rgba(12,24,23,.85))}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%;padding-left:18px;padding-right:18px}
}