/* Recetario de patrones de cuentas (motor hamattor-recetario). Móvil primero.
   Regla del dueño: nunca bordes de un solo lado (izquierda/arriba) como adorno: solo fondo, sombra, borde completo o imagen.
   Cada sitio puede redefinir colores y fuentes en :root desde sites/<host>.toml ([palett] y [stil]). */
:root{
  --linne:#f2ece0;--kort:#fffdf7;--tall:#1f3a33;--tall2:#2c4f45;--lingon:#b3243b;--lingon-d:#8c1a2d;
  --saffran:#e6a92f;--saffran-l:#f6dc97;--blabar:#2d4884;--linje:#d4def1;--marg:#eaa7b0;--grafit:#3b3a35;
  --mjuk:#6c665a;--kant:#d8ccb6;--mint:#cfe3d4;--ros:#f2cdd2;--himmel:#d3ddf2;
  --rubrik:"Young Serif",Georgia,"Times New Roman",serif;
  --text:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--grafit);font:400 1.0625rem/1.62 var(--text);background-color:var(--linne);
  background-image:repeating-linear-gradient(0deg,rgba(31,58,51,.035) 0 1px,transparent 1px 4px),
                   repeating-linear-gradient(90deg,rgba(31,58,51,.03) 0 1px,transparent 1px 5px);
  overflow-x:clip;padding-bottom:68px}
img{max-width:100%;height:auto;display:block}
a{color:var(--lingon-d);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--tall)}
:focus-visible{outline:3px solid var(--blabar);outline-offset:3px}
h1,h2,h3{font-family:var(--rubrik);font-weight:400;color:var(--tall);margin:0;line-height:1.15;letter-spacing:-.005em}
h1 em,h2 em{font-style:normal;color:var(--lingon)}
p{margin:0 0 1em}
.hoppa{position:absolute;left:-999px;top:8px;z-index:50;background:var(--tall);color:#fff;padding:10px 14px}
.hoppa:focus{left:8px}

/* topp */
.topp{background:var(--kort);border-bottom:1px solid var(--kant)}
.topp-band{margin:0;background:var(--tall);color:var(--saffran-l);font:600 .78rem/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px 16px}
.topp-rad{max-width:1180px;margin:0 auto;padding:14px 16px 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 28px}
.logga{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-decoration:none;color:var(--tall);padding-bottom:10px}
.logga-parla{grid-row:span 2;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,var(--kort) 0 26%,var(--lingon) 27% 100%);box-shadow:inset -3px -4px 0 rgba(0,0,0,.14)}
.logga-namn{font:400 1.7rem/1 var(--rubrik)}
.logga-under{font:600 .74rem/1.2 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--mjuk)}
.flikar{width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
.flikar::-webkit-scrollbar{display:none}
.flikar ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;min-width:max-content}
.flikar a{display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 14px 6px 7px;font:700 .9rem/1 var(--text);color:var(--tall);text-decoration:none;border:1px solid var(--kant);border-bottom:0;border-radius:12px 12px 0 0;background:var(--saffran-l)}
.flik-bild{flex:none;width:32px;height:32px;object-fit:contain;border-radius:50%;background:var(--kort);padding:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.flikar li:nth-child(2) a{background:var(--ros)}.flikar li:nth-child(3) a{background:var(--himmel)}
.flikar li:nth-child(4) a{background:var(--mint)}.flikar li:nth-child(5) a{background:#f4d6bf}.flikar li:nth-child(6) a{background:#e4dcf0}
.flikar a[aria-current]{background:var(--kort);border-color:var(--tall);color:var(--lingon-d)}
.flikar a[aria-current="page"]{background:var(--tall);color:#fff;border-color:var(--tall)}
.flikar a:hover{filter:brightness(.97)}
@media(min-width:900px){.flikar{width:auto}}
.stig{max-width:1180px;margin:0 auto;padding:12px 16px 0;font-size:.86rem;color:var(--mjuk)}
.stig ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.stig li+li::before{content:"/";margin:0 6px;color:var(--kant)}

main{max-width:1180px;margin:0 auto;padding:0 16px}
main>section{margin-top:44px}
@media(min-width:760px){main{padding:0 28px}.topp-rad,.stig{padding-left:28px;padding-right:28px}main>section{margin-top:64px}}

/* uppslag (öppning av kapitlet) */
.uppslag{display:grid;gap:26px;margin-top:22px!important}
.kapitel{display:inline-block;margin:0 0 14px;font:700 .8rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--lingon);border-bottom:2px solid var(--saffran);padding-bottom:6px}
.uppslag h1{font-size:clamp(2rem,7.4vw,3.35rem);margin-bottom:18px}
.ingress{font-size:1.18rem;line-height:1.55;color:var(--tall)}
.lopande p{max-width:62ch}
.signatur{display:flex;align-items:center;gap:14px;font-size:.92rem;color:var(--mjuk);margin-top:6px}
.stampel{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px solid var(--lingon);color:var(--lingon);
  font:400 1.25rem/1 var(--rubrik);transform:rotate(-9deg);box-shadow:0 0 0 4px var(--kort),0 0 0 5px rgba(179,36,59,.45);background:var(--kort);margin:6px}
.omslag{margin:0;position:relative;background:var(--kort);padding:10px 10px 0;box-shadow:0 1px 0 var(--kant),0 14px 30px -18px rgba(31,58,51,.55);transform:rotate(.6deg)}
.omslag::before,.omslag::after{content:"";position:absolute;top:-12px;width:96px;height:26px;background:rgba(230,169,47,.55);transform:rotate(-6deg)}
.omslag::before{left:18px}.omslag::after{right:18px;transform:rotate(5deg);background:rgba(179,36,59,.32)}
.omslag img{width:100%}
.omslag figcaption{font:400 .95rem/1.4 var(--rubrik);color:var(--tall);padding:10px 4px 12px;text-align:center}
@media(min-width:960px){.uppslag{grid-template-columns:1fr 1.05fr;align-items:center;gap:48px}}

/* register */
.register{background:var(--kort);border:1px solid var(--kant);padding:22px 18px 16px;border-radius:4px}
.register h2,.anvisning h2{font-size:1.45rem;margin-bottom:12px}
.register ol{list-style:none;margin:0;padding:0;columns:1;column-gap:44px}
@media(min-width:820px){.register ol{columns:2}}
.register li{break-inside:avoid}
.register a{display:flex;align-items:baseline;gap:10px;padding:7px 0;color:var(--grafit);text-decoration:none;border-bottom:1px dotted var(--kant)}
.register a:hover .reg-namn{color:var(--lingon)}
.reg-nr{font:400 .95rem/1 var(--rubrik);color:var(--lingon);min-width:1.6em}
.reg-namn{flex:1;font-weight:600}
.reg-tid{font-size:.82rem;color:var(--mjuk);white-space:nowrap}
.reg-sid{font-size:.82rem;color:var(--mjuk);white-space:nowrap;min-width:4.2em;text-align:right}
@media(max-width:420px){.reg-sid{display:none}}

/* läsanvisning */
.anvisning dl{display:grid;gap:12px;margin:0}
@media(min-width:760px){.anvisning dl{grid-template-columns:repeat(4,1fr)}}
.anvisning div{background:var(--saffran-l);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px 14px 10px}
.anvisning div:nth-child(2){background:var(--ros)}.anvisning div:nth-child(3){background:var(--himmel)}.anvisning div:nth-child(4){background:var(--mint)}
.anvisning dt{font:400 1.1rem/1.2 var(--rubrik);color:var(--tall);margin-bottom:6px}
.anvisning dd{margin:0;font-size:.95rem}

/* avdelning + receptkort */
.avd-huvud{max-width:760px;margin-bottom:22px}
.avd-flik{display:inline-block;margin:0 0 10px;background:var(--tall);color:var(--saffran-l);font:700 .74rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:0 8px 8px 0}
.avd-flik:empty{display:none}
.avdelning h2,.skafferi h2,.lapp h2,.fragor h2,.bladdra h2,.kapitelregister h2{font-size:clamp(1.55rem,4.6vw,2.2rem);margin-bottom:10px}
.avd-text{color:var(--grafit);max-width:66ch}
.kortlada{display:grid;gap:22px}
@media(min-width:760px){.kortlada{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1140px){.kortlada{grid-template-columns:repeat(3,1fr)}}
.kort{position:relative;display:flex;flex-direction:column;background-color:var(--kort);border:1px solid var(--kant);border-radius:3px;
  box-shadow:0 10px 22px -18px rgba(31,58,51,.6);padding:0 16px 16px 46px;line-height:28px;
  background-image:linear-gradient(90deg,transparent 30px,var(--marg) 30px 31px,transparent 31px),
                   repeating-linear-gradient(180deg,transparent 0 27px,var(--linje) 27px 28px);
  background-position:0 0,0 6px}
.kort-huvud{margin:0 -16px 12px -46px;padding:14px 16px 10px 46px;background:var(--kort);border-bottom:3px double var(--lingon)}
.kort-nr{margin:0;font:700 .72rem/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--lingon)}
.kort h3{font-size:1.38rem;line-height:1.2;margin:4px 0 2px}
.kort-paket{margin:0;font-size:.8rem;line-height:1.3;color:var(--mjuk)}
.kort-paket::before,.fakta dt::before,.kort-under::before{content:attr(data-t)}
.kort-paket::before{margin-right:.3em}
.kort-bild{display:grid;place-items:center;min-height:200px;margin:4px 0 12px -30px;padding:14px;border-radius:2px;text-decoration:none}
.kort-bild img{max-height:300px;width:auto;object-fit:contain}
.bg-fri{background:radial-gradient(circle at 50% 45%,#fff 0,#f7f1e4 70%)}
.bg-platta{background:#f4efe6}
.bg-papper{background:#efe3c8;box-shadow:inset 0 0 0 6px #f6ecd6}
.kort-bild:hover img{transform:scale(1.02);transition:transform .2s}
.fakta{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin:0 0 6px}
.fakta div{min-width:0}
.fakta dt{font:700 .7rem/28px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--blabar);height:28px}
.fakta dd{margin:0;font-weight:600;color:var(--tall);font-size:.95rem}
.niva{display:inline-flex;gap:3px;margin-right:6px;vertical-align:-1px}
.niva i{width:11px;height:11px;border-radius:50%;background:var(--lingon);box-shadow:inset 0 0 0 3px var(--lingon),inset 0 0 0 5.5px #fff}
.niva i.av{background:transparent;box-shadow:inset 0 0 0 1.5px var(--kant)}
.kort-under{margin:6px 0 0;font:400 1.05rem/28px var(--rubrik);color:var(--lingon-d)}
.ingredienser{list-style:none;margin:0;padding:0;font-size:.95rem}
.ingredienser b{color:var(--tall)}
.avslojad{display:flex;align-items:center;gap:8px}
.prick{flex:none;width:16px;height:16px;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 4.5px var(--f),inset 0 0 0 7px rgba(255,255,255,.9),0 0 0 1px rgba(0,0,0,.18)}
.dolda{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--mjuk)}
.burkrad{display:inline-flex;flex-wrap:wrap;gap:3px}
.burkrad i{width:13px;height:16px;border-radius:3px 3px 4px 4px;border:1.5px solid var(--mjuk);
  background:linear-gradient(var(--mjuk) 0 3px,transparent 3px),repeating-linear-gradient(135deg,#efe7d6 0 3px,#fff 3px 6px)}
.steg{margin:0;padding:0 0 0 1.3em;font-size:.95rem}
.steg li::marker{font-family:var(--rubrik);color:var(--lingon)}
.anteckning{margin:8px 0 0;font-style:italic;font-size:.95rem;color:var(--grafit)}
.anteckning::before{content:"";display:inline-block;width:22px;height:2px;background:var(--saffran);vertical-align:middle;margin-right:8px}
.kort-knapp{align-self:flex-start;display:inline-block;background:var(--lingon);color:#fff;font:700 .95rem/1.2 var(--text);padding:12px 16px;border-radius:999px;text-decoration:none;box-shadow:0 3px 0 var(--lingon-d)}
.kort-knapp:hover{background:var(--lingon-d);color:#fff}
.kort>.kort-knapp{margin-top:auto}
.kort>.anteckning,.kort>.steg{margin-bottom:16px}

/* skafferiet */
.skafferi{background:var(--tall);color:#e8efe9;border-radius:6px;padding:26px 18px;display:grid;gap:24px;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 34px)}
.skafferi h2{color:#fff}
.skafferi .avd-flik{background:var(--saffran);color:var(--tall)}
.inkop{margin:0 0 20px;padding:0;list-style:none}
.inkop li{padding:7px 0 7px 30px;border-bottom:1px dashed rgba(255,255,255,.22);position:relative}
.inkop li::before{content:"";position:absolute;left:2px;top:12px;width:15px;height:15px;border:2px solid var(--saffran);border-radius:3px}
.hyllan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hyllan li{background:#efe3c8;border-radius:4px;padding:8px 8px 6px;color:var(--tall);font:600 .85rem/1.3 var(--text);text-align:center;box-shadow:0 6px 0 -2px rgba(0,0,0,.2)}
.hyllan img{margin:0 auto 6px;max-height:130px;width:auto}
@media(min-width:900px){.skafferi{grid-template-columns:1fr 1.1fr;padding:36px;align-items:center}.hyllan{grid-template-columns:repeat(3,1fr)}}
.stor-knapp{display:inline-block;background:var(--saffran);color:var(--tall);font:800 1rem/1.25 var(--text);padding:14px 20px;border-radius:999px;text-decoration:none;box-shadow:0 3px 0 #b07f17}
.stor-knapp:hover{background:#f0bb4a;color:var(--tall)}

/* lapp (kökstips) */
.lapp{background:#fff8dc;border:1px solid #ecd9a2;padding:24px 18px 10px;max-width:860px;position:relative;box-shadow:0 12px 24px -20px rgba(0,0,0,.5)}
.lapp::before{content:"";position:absolute;top:-10px;left:50%;width:110px;height:22px;margin-left:-55px;background:rgba(179,36,59,.25);transform:rotate(-2deg)}
.lapp p{max-width:68ch}
.tips-lista{margin:0 0 16px;padding-left:1.2em}
.tips-lista li{margin-bottom:6px}
@media(min-width:760px){.lapp{padding:30px 34px 14px}}

/* kapitelregister (start) */
.kapitelregister ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(min-width:760px){.kapitelregister ul{grid-template-columns:repeat(4,1fr)}}
.kapitelregister a{display:flex;flex-direction:column;height:100%;background:var(--kort);border:1px solid var(--kant);text-decoration:none;color:var(--grafit);border-radius:3px;overflow:hidden}
.kapitelregister img{width:100%;aspect-ratio:12/7;object-fit:cover}
.kr-kap{padding:10px 12px 0;font:700 .7rem/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--lingon)}
.kr-namn{padding:2px 12px;font:400 1.15rem/1.25 var(--rubrik);color:var(--tall)}
.kr-antal{padding:0 12px 12px;font-size:.85rem;color:var(--mjuk)}
.kapitelregister a:hover .kr-namn{color:var(--lingon)}

/* frågor */
.fragor{max-width:860px}
.fragor details{background:var(--kort);border:1px solid var(--kant);border-radius:3px;margin-bottom:10px}
.fragor summary{cursor:pointer;padding:14px 16px;font-weight:700;color:var(--tall);list-style:none;position:relative;padding-right:44px}
.fragor summary::-webkit-details-marker{display:none}
.fragor summary::after{content:"+";position:absolute;right:16px;top:9px;font:400 1.5rem/1 var(--rubrik);color:var(--lingon)}
.fragor details[open] summary::after{content:"\2212"}
.fragor details p{padding:0 16px 6px;margin-bottom:10px}

/* bläddra */
/* tarjetas de capítulo: carrusel en móvil, rejilla en escritorio */
.kapkort-lista{list-style:none;margin:0 -16px;padding:4px 16px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,320px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:thin}
.kapkort-lista>li{scroll-snap-align:start;display:flex}
@media(min-width:760px){.kapkort-lista{margin:0;padding:4px 0 0;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));overflow:visible}}
.kapkort{flex:1;display:flex;flex-direction:column;background:var(--kort);border:1px solid var(--kant);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--grafit);
  box-shadow:0 14px 26px -20px rgba(31,58,51,.75);transition:transform .15s,box-shadow .15s}
.kapkort:hover,.kapkort:focus-visible{transform:translateY(-3px);box-shadow:0 20px 30px -18px rgba(31,58,51,.8);color:var(--grafit)}
.kapkort-bild{display:block;background:var(--saffran-l)}
.kapkort-bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.kapkort-text{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.kapkort-kap{font:700 .72rem/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--lingon)}
.kapkort b{font:400 1.35rem/1.2 var(--rubrik);color:var(--tall)}
.kapkort-fras{font-size:.95rem;line-height:1.45}
.kapkort-mer{margin-top:auto;padding-top:8px;align-self:flex-start;font:700 .9rem/1.2 var(--text);color:#fff;background:var(--lingon);border-radius:999px;padding:9px 14px}
.kapkort:hover .kapkort-mer{background:var(--lingon-d)}

/* slut */
.slut{text-align:center;background:var(--kort);border:1px solid var(--kant);padding:30px 18px;border-radius:4px;max-width:860px;margin-left:auto;margin-right:auto}
.slut p{max-width:58ch;margin-left:auto;margin-right:auto}
.stampel.stor{width:76px;height:76px;font-size:1.6rem;margin:0 auto 14px}
.slut .stor-knapp{background:var(--lingon);color:#fff;box-shadow:0 3px 0 var(--lingon-d)}
.slut .stor-knapp:hover{background:var(--lingon-d);color:#fff}

/* fot */
.fot{margin-top:70px;background:var(--tall);color:#dce6df;padding:34px 16px 28px;font-size:.92rem}
.fot>*{max-width:1180px;margin-left:auto;margin-right:auto}
.fot-persona{font:400 1.05rem/1.5 var(--rubrik);color:#fff;max-width:760px}
.fot-lankar{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px;margin-bottom:22px}
@media(min-width:760px){.fot-lankar{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.fot-lankar a{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px 8px 8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;
  color:#fff;font-weight:700;text-decoration:none}
.fot-lankar a:hover{background:rgba(255,255,255,.16);color:#fff}
.fot-lankar img{flex:none;width:40px;height:40px;object-fit:contain;border-radius:50%;background:var(--kort);padding:3px}
.fot a{color:var(--saffran-l)}
.fot-liten{font-size:.8rem;color:#a9bab0}

/* bokmärke (mobil) */
.bokmarke{position:fixed;left:12px;right:12px;bottom:10px;z-index:20;display:block;text-align:center;background:var(--lingon);color:#fff;font:700 .95rem/1.2 var(--text);
  padding:13px 16px;border-radius:999px;text-decoration:none;box-shadow:0 8px 20px -6px rgba(0,0,0,.45)}
.bokmarke:hover{color:#fff;background:var(--lingon-d)}
@media(min-width:900px){
  body{padding-bottom:0}
  .bokmarke{left:auto;right:0;bottom:auto;top:38%;width:46px;padding:16px 0 26px;border-radius:6px 0 0 6px;writing-mode:vertical-rl;font-size:.86rem;letter-spacing:.04em;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(100% - 0px));box-shadow:-4px 6px 16px -8px rgba(0,0,0,.5)}
}
.borta{min-height:40vh}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* perle.hamattor.com */
:root{--linne:#efece5;--kort:#fffdf8;--tall:#173a5e;--tall2:#24507c;--lingon:#b5302a;--lingon-d:#8b211c;--saffran:#d7962a;--saffran-l:#f2d9a4;--marg:#e6a49c;--mint:#d3e4dc;--rubrik:"Fraunces",Georgia,"Times New Roman",serif;--text:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}