/* ---------- Typsnitt, lokalt hostade ----------
   Tidigare hamtades de fran fonts.googleapis.com, vilket skickade
   varje besokares IP-adress till Google innan sidan ens ritats upp.
   Nu ligger filerna pa egen server: ingen tredjepart, inga cookies,
   och tva DNS-uppslag och TLS-handskakningar mindre vid varje besok.
   Bada typsnitten har SIL Open Font License, som tillater detta. */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('typsnitt/cormorant-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('typsnitt/cormorant-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('typsnitt/cormorant-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('typsnitt/cormorant-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('typsnitt/cormorant-500-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('typsnitt/cormorant-500-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('typsnitt/cormorant-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('typsnitt/cormorant-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('typsnitt/karla-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('typsnitt/karla-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('typsnitt/karla-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('typsnitt/karla-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --plommon:#402331;
  --plommon-djup:#331B27;
  --larft:#FAF7F2;
  --black:#26191F;
  --ljung:#7D5F6B;  /* morkad for kontrast: 4,62:1 mot sand */
  --sand:#EFE7DA;
  --guld:#B98F3E;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --huvud:5.2rem;      /* sidhuvudets hojd, styr ankarhoppen */
  --rundning:6px;        /* bilder i rutnat */
  --rundning-ensam:14px; /* bilder som star for sig sjalva */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--larft);
  color:var(--black);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.hoppa{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--plommon);color:var(--larft);padding:.7rem 1.2rem;text-decoration:none;
}
.hoppa:focus{left:0}

/* ---------- Toppmeny ---------- */
.topp{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem 5vw;
  background:rgba(250,247,242,.9);
  background:color-mix(in srgb,var(--larft) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(64,35,49,.12);
}
.wordmark{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:2.4rem;line-height:1.1;display:block;
  text-decoration:none;color:var(--plommon);
}
.topp nav{display:flex;align-items:center;gap:1.8rem}

/* Sektionslänkar: vid hovring dras ett streck under ordet, ritat med samma
   ojämna hand som glasmålningen. Det växer fram från vänster i stället för
   att bara tändas, alltså samma gest som linjen i sidhuvudet. */
.topp nav a{
  position:relative;text-decoration:none;
  font-size:.94rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--black);
  padding:.5rem 0 .5rem;transition:color .25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4C15 3 29 6.6 43 4.5 57 2.6 71 6.4 85 4.2 90 3.4 95 4.4 98 5' fill='none' stroke='%23B98F3E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 7px;
  transition:background-size .35s cubic-bezier(.2,.7,.3,1),color .25s;
}
.topp nav a:hover,.topp nav a:focus-visible{color:var(--plommon);background-size:100% 7px}

/* Länken till den egna sidan bär en kvist i stället för en ram. Formen är
   samma familj som växtsymbolerna i Arbetssätt och som glasmålningens
   obrutna linje, alltså ingen mallmässig knappform. */
.topp nav a.sida{
  background-image:none;padding:.5rem .6rem;color:var(--plommon);
}
.topp nav a.sida .kvist{
  position:absolute;left:0;bottom:-.85rem;width:100%;height:1rem;
  overflow:visible;pointer-events:none;
}
.topp nav a.sida .stjalk{
  fill:none;stroke:var(--guld);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transition:stroke .25s;
}
.topp nav a.sida .blad{
  fill:var(--guld);stroke:var(--guld);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transition:fill .25s,stroke .25s;
}
.topp nav a.sida:hover .stjalk,.topp nav a.sida:focus-visible .stjalk,
.topp nav a.sida[aria-current="page"] .stjalk{stroke:var(--plommon)}
.topp nav a.sida:hover .blad,.topp nav a.sida:focus-visible .blad,
.topp nav a.sida[aria-current="page"] .blad{fill:var(--plommon);stroke:var(--plommon)}

@media(max-width:920px){
  .topp nav{gap:1.1rem}
  .topp nav a{font-size:.78rem;letter-spacing:.05em}
  .topp nav a.sida{padding:.5rem 1.1rem}
  .wordmark{font-size:1.9rem}
}
@media(max-width:700px){
  .topp{padding:.8rem 5vw}
  .topp nav{gap:.7rem}
  .topp nav a{font-size:.66rem;letter-spacing:.02em}
  .topp nav a.sida{padding:.45rem .9rem}
  .wordmark{font-size:1.5rem}
}
/* Pa telefon far loggan och menyn inte plats pa samma rad. Menyn tog da
   hela utrymmet fram till loggan, och de tva langsta posterna bröts i tva
   rader medan sidhuvudet vaxte pa hojden anda. Sidhuvudet staplas i
   stallet, sa menyn far hela bredden och ryms pa en rad.
   --huvud styr ankarhoppen och maste folja med nar huvudet blir hogre. */
@media(max-width:560px){
  :root{--huvud:6.6rem}
  .topp{
    flex-direction:column;align-items:flex-start;
    gap:.35rem;padding:.7rem 5vw .8rem;
  }
  .topp nav{width:100%;justify-content:space-between;gap:.4rem}
  .topp nav a{font-size:.63rem}
  .topp nav a.sida{padding:.4rem .7rem}
  .wordmark{font-size:1.65rem}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--plommon);color:var(--larft);
  padding:6rem 5vw 9rem;position:relative;overflow:hidden;
}
.hero-inre{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.overrad{
  white-space:nowrap;
  font-size:.8rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sand);margin-bottom:1.6rem;
}
.hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3rem,8vw,5.8rem);line-height:1.02;letter-spacing:-.014em;
}
.hero h1 em{font-style:italic;color:var(--sand)}
.hero p{
  margin-top:1.8rem;max-width:34ch;font-size:1.06rem;color:rgba(250,247,242,.85);
}
.hero-linje{width:min(320px,66vw);margin:0 auto}
.hero-linje .drag{stroke:var(--guld);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-linje .lappar{fill:#7E2F3F;stroke:none}
a.scrollvink{
  position:absolute;bottom:2.2rem;left:5vw;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(250,247,242,.6);text-decoration:none;transition:color .25s;
}
a.scrollvink:hover,a.scrollvink:focus-visible{color:var(--sand)}
@media(max-width:430px){
  .hero .overrad{font-size:.68rem;letter-spacing:.14em}
}
@media(max-width:860px){
  .hero{padding:4rem 5vw 8rem}
  .hero-inre{grid-template-columns:1fr;gap:2.5rem}
  .hero-linje{margin:0}
}
@media (prefers-reduced-motion:no-preference){
  .hero .overrad,.hero h1,.hero p,a.scrollvink{opacity:0;animation:intag .8s cubic-bezier(.2,.6,.2,1) forwards}
  .hero h1{animation-delay:.18s}
  .hero p{animation-delay:.38s}
  a.scrollvink{animation-delay:1.4s}
  .topp{opacity:0;animation:blott .6s ease .05s forwards}
  .hero-linje .drag{stroke-dasharray:1;stroke-dashoffset:1;animation:rita 1.9s ease-out forwards;animation-delay:calc(.35s + var(--i,0) * .07s)}
  .hero-linje .lappar{opacity:0;animation:blott .9s ease 3.5s forwards}
  @keyframes intag{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes blott{to{opacity:1}}
  @keyframes rita{to{stroke-dashoffset:0}}
}

/* Bryggbild som överlappar hero och första sektionen */
.brygga{max-width:1200px;margin:-7rem auto 0;padding:0 5vw;position:relative;z-index:2}

/* Mosaiken: ett urval verk som möter besökaren direkt.
   Mobil först – två spalter där varje ruta står för sig. */
.mosaik{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mosaik figure{margin:0;min-width:0;min-height:0}
.mosaik .ram{
  aspect-ratio:3/4;overflow:hidden;border-radius:var(--rundning);background:#fff;
  box-shadow:0 1px 2px rgba(38,25,31,.08),0 10px 30px rgba(38,25,31,.14);
}
.mosaik .verk img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:transform .6s ease}
/* De tre liggande verken tar hela bredden i mobil, annars skulle de
   beskäras till stående och tappa motivet. */
.mosaik .m1,.mosaik .m2,.mosaik .m7{grid-column:span 2}
.mosaik .m1 .ram,.mosaik .m2 .ram,.mosaik .m7 .ram{aspect-ratio:4/3}

/* Från surfplatta och uppåt: sex spalter, två rader, ett stort ankare
   till vänster. Höjden styrs av rutnätets egen proportion, så rutorna
   fyller sina celler i stället för att ha egna proportioner. */
@media(min-width:761px){
  .mosaik{
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:1fr 1fr;
    aspect-ratio:2/1;gap:.85rem;
  }
  .mosaik .m1 .ram,.mosaik .m2 .ram,.mosaik .m7 .ram,
  .mosaik figure .ram{aspect-ratio:auto;height:100%}
  .mosaik .m1{grid-column:1 / span 2;grid-row:1 / span 2}
  .mosaik .m2{grid-column:3 / span 2}
  .mosaik .m3{grid-column:5}
  .mosaik .m4{grid-column:6}
  .mosaik .m5{grid-column:3}
  .mosaik .m6{grid-column:4}
  .mosaik .m7{grid-column:5 / span 2}
}
@media(max-width:760px){.brygga{margin-top:-4rem}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .mosaik .verk:hover img{transform:scale(1.045)}
}

/* ---------- Sektioner ---------- */
.sektion{padding:5.5rem 5vw;scroll-margin-top:calc(var(--huvud) + 1.4rem)}
.sektion-inre{max-width:1200px;margin:0 auto}
.sektion-sand{background:var(--sand)}
.sektionshuvud{max-width:60ch;margin-bottom:3rem}
.sektionshuvud .overrad{color:var(--ljung)}
h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.1rem,4.5vw,3.2rem);line-height:1.08;color:var(--plommon);
}
h2 em{font-style:italic}
.sektionshuvud p{margin-top:1rem;color:#4E3A44;font-size:1.02rem}

/* Galleri */
.galleri{display:grid;gap:2.2rem 1.8rem;grid-template-columns:1fr}
@media(min-width:620px){.galleri{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.galleri{grid-template-columns:1fr 1fr 1fr}}
figure.verk{cursor:zoom-in}
.verk .ram{overflow:hidden;border-radius:var(--rundning);background:#fff;box-shadow:0 1px 2px rgba(38,25,31,.08),0 10px 30px rgba(38,25,31,.08)}
.verk img,.verk video{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .verk:hover img,.verk:hover video{transform:scale(1.025)}
}
figcaption{
  font-family:var(--serif);font-style:italic;font-size:1.02rem;
  color:var(--ljung);margin-top:.7rem;line-height:1.4;
}
.verk-stor .ram{border-radius:var(--rundning-ensam)}
.verk-stor{grid-column:1 / -1}
@media(min-width:960px){.verk-stor{grid-column:span 2}}

/* ---------- Arbetssätt ---------- */
.slinga{display:flex;justify-content:center;margin-bottom:2.2rem}
.slinga svg{width:130px}
.slinga path{stroke:var(--ljung);stroke-width:1.8;fill:none;stroke-linecap:round;opacity:.7}
.principer{display:grid;grid-template-columns:1fr;gap:2.6rem;max-width:1050px;margin:0 auto}
@media(min-width:760px){.principer{grid-template-columns:1fr 1fr 1fr;gap:3rem}}
.princip svg{width:46px;height:46px;margin-bottom:1rem}
.princip svg *{stroke:var(--plommon);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.princip h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--plommon);margin-bottom:.5rem}
.princip p{font-size:.98rem;color:#4E3A44}

/* ---------- Om ---------- */
.om{background:var(--plommon);color:var(--larft)}
.om-inre{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}
.om .overrad{color:var(--sand)}
.om h2{color:var(--larft)}
.om h2 em{color:var(--sand)}
.om p{margin-top:1.1rem;color:rgba(250,247,242,.88);max-width:52ch}
.om figure .ram{box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden;border-radius:var(--rundning-ensam)}
.om img{width:100%}
.knapp{
  display:inline-block;margin-top:2rem;
  background:var(--sand);color:var(--plommon);
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.95rem 1.7rem;text-decoration:none;border:1px solid var(--sand);
  transition:background .25s,color .25s;
}
.knapp:hover,.knapp:focus-visible{background:transparent;color:var(--sand)}
.om .mer{
  display:inline-block;margin-top:1.4rem;color:var(--sand);
  font-size:.95rem;text-decoration-color:var(--guld);text-underline-offset:5px;
}
.knapprad{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.knapprad .knapp{margin-top:0}
.knapp-tunn{background:transparent;color:var(--sand);border-color:var(--sand)}
.knapp-tunn:hover,.knapp-tunn:focus-visible{background:var(--sand);color:var(--plommon)}
.om .kontakt{margin-top:1.4rem;font-size:.95rem}
.om .kontakt a{color:var(--sand);text-decoration-color:var(--guld);text-underline-offset:4px}
@media(max-width:860px){.om-inre{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- Sidfot ---------- */
footer{
  background:var(--plommon-djup);color:rgba(250,247,242,.7);
  padding:2.5rem 5vw;text-align:center;font-size:.85rem;letter-spacing:.04em;
}
.fotlankar{margin-top:.7rem;font-size:.85rem}
.fotlankar a{color:var(--sand);text-decoration-color:var(--guld);text-underline-offset:4px}
footer .fm{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--larft);display:block;margin-bottom:.5rem}

/* ---------- Scrollavslöjande ---------- */
@media (prefers-reduced-motion:no-preference){
  .avsloja{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .avsloja.syns{opacity:1;transform:none}
  .galleri > .avsloja:nth-child(3n+2){transition-delay:.09s}
  .galleri > .avsloja:nth-child(3n){transition-delay:.18s}
}


/* ---------- Läsindikator ----------
   Förstasidan är drygt 30 skärmhöjder lång. Utan någon markör vet besökaren
   varken var hon är eller hur mycket som återstår. Överst löper därför en
   tunn stapel som visar hur långt man kommit, och på breda skärmar ligger en
   rad prickar längs högerkanten, en per sektion, där den man befinner sig i
   är ifylld. Prickarna är riktiga länkar, så de fungerar med tangentbord och
   uppläsare precis som menyn. */
.framsteg{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:transparent;pointer-events:none;
}
.framsteg i{
  display:block;height:100%;width:100%;
  background:var(--guld);transform:scaleX(0);transform-origin:0 50%;
}

.prickar{
  position:fixed;right:2rem;top:50%;transform:translateY(-50%);
  z-index:60;display:none;flex-direction:column;gap:1.5rem;
}
.prickar a{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--plommon);
  flex-direction:row-reverse;
}
.prickar .punkt{
  width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--ljung);background:transparent;
  transition:background .25s,border-color .25s,transform .25s;
}
.prickar .namn{
  font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;opacity:0;transform:translateX(8px);color:var(--plommon);
  transition:opacity .25s,transform .25s;
}
/* Från 1360 px finns det gott om marginal, då står namnen framme hela tiden. */
@media(min-width:1360px){
  .prickar .namn{opacity:.55;transform:none}
  .prickar a[aria-current="true"] .namn{opacity:1}
}
.prickar a:hover .namn,.prickar a:focus-visible .namn{opacity:1;transform:none}
.prickar a:hover .punkt{border-color:var(--plommon);transform:scale(1.25)}
.prickar a[aria-current="true"] .punkt{
  background:var(--plommon);border-color:var(--plommon);transform:scale(1.2);
}
/* Over de plommonfargade sektionerna forsvinner bade prickar och namn, eftersom
   de har samma ton som bakgrunden. Skriptet satter darfor .ljus nar mitten av
   fonstret befinner sig over en mork sektion. */
.prickar.ljus .punkt{border-color:rgba(239,231,218,.8)}
.prickar.ljus a:hover .punkt{border-color:var(--sand)}
.prickar.ljus a[aria-current="true"] .punkt{background:var(--sand);border-color:var(--sand)}
.prickar.ljus .namn{color:var(--sand)}
@media(min-width:1100px){.prickar{display:flex}}
@media (prefers-reduced-motion:reduce){
  .prickar .punkt,.prickar .namn,.framsteg i{transition:none}
}

/* ---------- Ljuslåda ---------- */
.ljuslada{
  position:fixed;inset:0;z-index:100;background:rgba(38,25,31,.94);
  display:none;align-items:center;justify-content:center;flex-direction:column;padding:4vh 4vw;
}
.ljuslada.oppen{display:flex}
.ljuslada img{max-width:min(92vw,900px);max-height:78vh;width:auto;object-fit:contain;border-radius:var(--rundning-ensam);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ljuslada .text{
  font-family:var(--serif);font-style:italic;color:var(--sand);
  margin-top:1rem;font-size:1.1rem;text-align:center;
}
.ljuslada button{
  position:absolute;background:none;border:none;color:var(--larft);
  font-size:2rem;cursor:pointer;padding:.6rem 1rem;line-height:1;
  opacity:.75;transition:opacity .2s;font-family:var(--sans);
}
.ljuslada button:hover,.ljuslada button:focus-visible{opacity:1}
.ljuslada .stang{top:1rem;right:1.2rem}
.ljuslada .fore{left:.4rem;top:50%;transform:translateY(-50%)}
.ljuslada .nasta{right:.4rem;top:50%;transform:translateY(-50%)}
:focus-visible{outline:2px solid var(--guld);outline-offset:3px}

/* ---------- Detaljer ----------
   Sådant som sällan märks men som avslöjar om någon brytt sig: markerad text
   i systemets blå, en grå rullist från operativsystemet och rubriker som
   lämnar ett ensamt ord på sista raden drar alla ned intrycket. */

::selection{background:var(--plommon);color:var(--larft)}

html{
  scrollbar-width:thin;
  scrollbar-color:var(--ljung) transparent;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--ljung);border-radius:999px;
  border:3px solid var(--larft);
}
::-webkit-scrollbar-thumb:hover{background:var(--plommon)}

/* Rubriker: Cormorant är en display-antikva och drar isär sig i stora grader,
   så spärrningen dras in när den sätts stort. Radbrytningen balanseras så att
   sista raden inte blir ett ensamt ord. */
h1,h2,.presentation h1{text-wrap:balance}
h2{letter-spacing:-.012em}
h3,.sektionshuvud p,.ingress{text-wrap:balance}
p{text-wrap:pretty}

/* Svenskan har långa sammansättningar som annars ger en trasig högerkant i
   smala spalter. Avstavning tillåts därför i löptext, men aldrig i rubriker. */
.sektionshuvud p,.omsida p,.om p,.hero p{hyphens:auto;-webkit-hyphens:auto}
h1,h2,h3,.overrad,.topp nav a{hyphens:none;-webkit-hyphens:none}

/* Sifferstil: årtalet i sidfoten ska ha versalsiffror i jämn bredd. */
footer{font-variant-numeric:lining-nums tabular-nums}

/* Fokusmarkeringen följer formen på det den ramar in. */
:focus-visible{outline:2px solid var(--guld);outline-offset:3px;border-radius:2px}
.verk:focus-visible,.mosaik .verk:focus-visible{border-radius:var(--rundning)}