/* Kilens Kök &… · hemsidan i stil A. Gemensam för startsidan och menysidan.
   Grönt för dagens lunch, rost för sidfoten och accenterna (Wille 15/10). */
:root{--kram:#F1E6D0;--papper:#FBF8F1;--kol:#1F1B18;--tegel:#B8412C;--morkgron:#2B4633;--ljusgron:#C3D59E;--gul:#F2C230;
--rubrik:'Gloock',Georgia,serif;--maskin:'Courier Prime','Courier New',monospace;--under:'Fraunces',Georgia,serif;--brod:'Newsreader',Georgia,serif;
--sida:min(1180px,100% - 40px)}
*{box-sizing:border-box}
html{background:var(--kram)}
body{margin:0;background:var(--kram);color:var(--kol);font:17px/1.45 var(--brod);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* Synlig för sökmotorer och skärmläsare, dold på skärmen. */
.dold{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
.w{width:var(--sida);margin:0 auto}
.et{display:block;font:700 13px/1.4 var(--maskin);letter-spacing:.16em;text-transform:uppercase}
.under{font:italic 440 clamp(18px,1.6vw,21px)/1.4 var(--under)}
.knapp{display:inline-block;font:700 14px var(--maskin);letter-spacing:.14em;text-transform:uppercase;padding:14px 20px;background:var(--kol);color:var(--kram);text-decoration:none;border:1.5px solid var(--kol);transition:background .15s,color .15s}
.knapp:hover,.knapp:focus-visible{background:var(--tegel);border-color:var(--tegel)}
.knapp.ljus{background:transparent;color:var(--kol)}
.knapp.ljus:hover,.knapp.ljus:focus-visible{background:var(--kol);color:var(--kram);border-color:var(--kol)}

/* Huvudet */
.nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0}
.nav img{height:34px;display:block}
.nav nav{display:flex;gap:22px;font:700 13px var(--maskin);letter-spacing:.14em;text-transform:uppercase}
.nav nav a{text-decoration:none}
.nav nav a:hover,.nav nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px}

/* Startsidans inledning */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(40px,5vw,64px);display:grid;grid-template-columns:1.25fr 1fr;gap:5vw;align-items:end}
.hero h1{font:400 clamp(96px,17vw,240px)/.78 var(--rubrik);letter-spacing:-.04em;margin:0}
.hero h1 span{display:block;margin-left:34%;color:var(--tegel)}
.hero p{margin:0 0 20px;max-width:30ch;font-size:clamp(19px,1.8vw,24px)}
.hero .knappar{display:flex;gap:8px;flex-wrap:wrap}

/* Dagens lunch: det gröna bandet, direkt under inledningen. Rubriken ska synas först. */
.idag{background:var(--morkgron);color:var(--kram)}
.idag .w{display:grid;grid-template-columns:1fr auto;column-gap:4vw;align-items:start;padding:clamp(32px,4.5vw,64px) 0}
.idag .et{color:var(--ljusgron)}
.idag h2{font:400 clamp(60px,9vw,128px)/.86 var(--rubrik);letter-spacing:-.035em;color:var(--gul);margin:10px 0 0}
.idag .ratter{grid-column:1/-1;display:grid;gap:20px;margin-top:clamp(28px,3.4vw,44px);max-width:960px}
.idag .ratt b{display:block;font:400 clamp(32px,3.8vw,52px)/1.02 var(--rubrik);letter-spacing:-.02em;text-wrap:balance}
.idag .ratt i{display:block;font:italic 440 clamp(18px,1.7vw,21px) var(--under);margin-top:6px;color:var(--ljusgron)}
.idag .veg{padding-top:18px;border-top:1px solid rgba(241,230,208,.3)}
.idag .veg .et{margin-bottom:8px}
.idag .veg b{font-size:clamp(26px,2.8vw,38px)}
.idag .tom b{font:400 clamp(32px,4vw,52px)/1.02 var(--rubrik);letter-spacing:-.02em}
.idag .info{grid-column:1/-1;margin:26px 0 0;font:15px/1.7 var(--maskin);letter-spacing:.02em;color:var(--ljusgron);max-width:60ch}
.idag .knapp{grid-column:1/-1;justify-self:start;margin-top:26px}
.bricka{width:124px;height:124px;border-radius:50%;background:var(--gul);color:var(--kol);display:grid;place-items:center;align-content:center;text-align:center;transform:rotate(-8deg)}
.bricka b{font:400 36px/1 var(--rubrik);letter-spacing:-.02em}
.bricka small{font:700 10px/1.3 var(--maskin);letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.knapp.gul{background:var(--gul);border-color:var(--gul);color:var(--kol)}
.knapp.gul:hover,.knapp.gul:focus-visible{background:var(--kram);border-color:var(--kram)}

/* Kvällen */
h2{font:400 clamp(48px,5.4vw,76px)/.9 var(--rubrik);letter-spacing:-.03em;margin:10px 0 0}
.kvall{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:end;padding:clamp(48px,6vw,88px) 0}
.kvall .et{color:var(--tegel)}
.kvall b{display:block;font:400 clamp(40px,4.6vw,64px)/1.02 var(--rubrik);letter-spacing:-.02em}
.kvall .under{margin:20px 0 0}

/* Sidfoten i rost */
.band{background:var(--tegel);color:var(--kram)}
.band .w{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;padding:clamp(48px,6vw,64px) 0}
.band .et{color:var(--gul)}
.band h3{font:400 clamp(30px,2.7vw,36px)/1 var(--rubrik);letter-spacing:-.01em;margin:8px 0 16px;white-space:nowrap}
.band p,.band li{font:16px/1.75 var(--maskin);letter-spacing:.03em;margin:0;list-style:none;padding:0;text-transform:uppercase}
.band ul{padding:0;margin:0}
/* Dag och tid i två spalter, så att tiderna står rakt under varandra. */
.tider{display:grid;grid-template-columns:max-content max-content;column-gap:28px;margin:0;font:16px/1.75 var(--maskin);letter-spacing:.03em;text-transform:uppercase}
.tider dt,.tider dd{margin:0}
.band .under{text-transform:none;font:italic 440 19px/1.4 var(--under);letter-spacing:0;margin-top:12px}
.band a{text-decoration-thickness:1px}
footer .w{display:flex;justify-content:space-between;gap:12px;padding:26px 0;font:700 12px var(--maskin);letter-spacing:.16em;text-transform:uppercase}

/* Kvällens affischer som inlägg: bilden och en kort text. */
.inlagg{border-top:1.5px solid var(--kol)}
.inlagg .w{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);padding:clamp(48px,6vw,88px) 0}
.inlagg figure{margin:0}
.inlagg img{width:100%;height:auto;display:block;box-shadow:0 16px 30px -18px rgba(0,0,0,.55)}
.inlagg figcaption{margin-top:22px}
.inlagg .et{color:var(--tegel)}
.inlagg h3{font:400 clamp(36px,4vw,56px)/1 var(--rubrik);letter-spacing:-.02em;margin:8px 0 10px}
.inlagg p{font:italic 440 clamp(17px,1.5vw,19px)/1.45 var(--under);margin:0;max-width:44ch}
/* Om oss: samma form som Kvällen, med en linje ovanför. */
.om{border-top:1.5px solid var(--kol)}
@media (max-width:760px){
 .inlagg .w{grid-template-columns:1fr;gap:48px;padding:44px 0}
 .nav{padding:14px 0}
 /* Alla länkar syns på mobil, under loggan; de bryts på två rader om de inte ryms. */
 .nav{flex-wrap:wrap;row-gap:12px}
 .nav nav{width:100%;flex-wrap:wrap;gap:8px 18px;font-size:12px}
 .hero{grid-template-columns:1fr;gap:18px;padding:28px 0 32px}
 .hero h1{font-size:clamp(76px,24vw,120px)}
 .hero .knappar{display:none}
 .hero p{margin:0}
 .idag .w{padding:28px 0 36px;column-gap:12px}
 .idag .et{font-size:11px;letter-spacing:.1em}
 .idag h2{font-size:clamp(52px,15vw,72px)}
 .idag .ratter{margin-top:24px}
 .bricka{width:92px;height:92px}
 .bricka b{font-size:27px}
 .bricka small{font-size:8px}
 .kvall{grid-template-columns:1fr;gap:18px;padding:44px 0}
 .band .w{grid-template-columns:1fr;gap:40px}
 footer .w{flex-direction:column}
}