/* elisabethwadin.se
   Byggd på brand book v1.0. Ändra inga färger eller typsnitt utan att
   uppdatera brand booken först. */

:root{
  color-scheme: light;
  --blaeck:#1F1823; --plommon:#5B3363; --plommon-ljus:#8E5F93;
  --guld:#E0A33A; --guld-ljus:#EDB558; --papper:#F4F2EF; --sten:#655D6D; --vit:#FFFFFF;
  --linje:#DFD9E0; --linje-stark:#C3B9C6; --ram:#9B89A2;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --brod:'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 56px);
  --mjuk: cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--papper); color:var(--blaeck); font-family:var(--brod);
     font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit}
img{max-width:100%; display:block}
h1,h2,h3,.devis,.citat,.tal{font-family:var(--display); text-wrap:balance;}
:focus-visible{outline:2px solid var(--guld); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto;} }

.band{padding-inline:var(--gutter);}
.inner{max-width:1120px; margin:0 auto;}
.smal{max-width:760px;}

/* ---------- Hoppa till innehåll ---------- */
.hoppa{position:absolute; left:-9999px; background:var(--guld); color:var(--blaeck);
       padding:12px 18px; font-weight:600; z-index:10;}
.hoppa:focus{left:var(--gutter); top:10px;}

/* ---------- Toppnav ---------- */
.topp{background:var(--blaeck); color:var(--papper);}
.topp .inner{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-block:16px;}
.topp .logo{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto;}
.topp .logo svg{width:22px; color:var(--papper); flex:none;}
.topp .logo span{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;}
.topp nav{display:flex; gap:20px; flex-wrap:wrap;}
.topp nav a{font-size:14px; text-decoration:none; color:#C9C0CE; padding-block:3px;
            border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s;}
.topp nav a:hover,.topp nav a:focus-visible{color:var(--papper); border-bottom-color:var(--guld);}
.topp nav a[aria-current="page"]{color:var(--papper); border-bottom-color:var(--guld);}

/* ---------- Hero, startsidan ---------- */
/* Porträttet går ut till höger sidkant. Då slipper bilden tre av fyra hårda
   kanter och blir en yta i sidan i stället för en rektangel som svävar på den.
   Texten till vänster: Elisabeth tittar åt bildens vänsterkant, så blicken
   pekar in mot rubriken. Byt inte plats på dem. */
.hero{background:var(--blaeck); color:var(--papper); display:grid;}
.hero .text{padding:clamp(34px,7vw,58px) var(--gutter) clamp(40px,8vw,64px);}
.hero .etikett{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
               color:var(--guld); margin:0 0 20px;}
.devis{font-size:clamp(38px,7.4vw,70px); font-weight:600; line-height:1.02; letter-spacing:-.024em;
       margin:0 0 22px; font-variation-settings:'opsz' 144; max-width:13ch;}
.hero .under{font-size:clamp(17px,2.1vw,20px); color:#CFC6D3; line-height:1.48; margin:0 0 30px; max-width:40ch;}
.portratt{aspect-ratio:4/5; background:var(--plommon); overflow:hidden; margin:0;}
.portratt img{width:100%; height:100%; object-fit:cover; object-position:50% 22%;}
@media(min-width:860px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(330px,41%); align-items:stretch;}
  .hero .text{display:flex; flex-direction:column; justify-content:center;
    padding-left:max(var(--gutter), calc((100vw - 1160px) / 2));
    padding-right:clamp(36px,4.6vw,66px);
    padding-block:clamp(58px,7.5vw,104px);}
  .portratt{aspect-ratio:auto; min-height:600px;}
}

/* ---------- Hero, undersidor ---------- */
.sidhero{background:var(--blaeck); color:var(--papper); padding-block:clamp(44px,7vw,80px) clamp(40px,6.5vw,72px);}
.sidhero .etikett{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
                  color:var(--guld); margin:0 0 18px;}
.sidhero h1{font-size:clamp(32px,6.4vw,58px); font-weight:600; line-height:1.05; letter-spacing:-.022em;
            margin:0 0 20px; font-variation-settings:'opsz' 144; max-width:17ch;}
.sidhero p{font-size:clamp(17px,2.1vw,20px); color:#CFC6D3; line-height:1.5; margin:0; max-width:52ch;}

/* ---------- Knappar ---------- */
.knappar{display:flex; gap:12px; flex-wrap:wrap;}
.kn{display:inline-block; text-decoration:none; font-size:15px; font-weight:600; padding:13px 22px;
    transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--mjuk);}
.kn-guld{background:var(--guld); color:var(--blaeck);}
.kn-guld:hover,.kn-guld:focus-visible{background:var(--guld-ljus); transform:translateY(-2px);}
.kn-linje{border:1.5px solid #5A4B62; color:var(--papper);}
.kn-linje:hover,.kn-linje:focus-visible{border-color:var(--guld); color:var(--guld); transform:translateY(-2px);}
.kn-plommon{border:1.5px solid var(--ram); color:var(--plommon);}
.kn-plommon:hover,.kn-plommon:focus-visible{background:var(--plommon); border-color:var(--plommon);
                                            color:var(--vit); transform:translateY(-2px);}

/* ---------- Sektioner ---------- */
section{padding-block:clamp(54px,8vw,92px);}
.ogonbryn{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
          color:var(--plommon); margin:0 0 12px;}
h2{font-size:clamp(27px,4.6vw,40px); font-weight:600; letter-spacing:-.018em; line-height:1.12;
   margin:0 0 16px; font-variation-settings:'opsz' 96;}
h3{font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0 0 8px; font-variation-settings:'opsz' 36;}
p{margin:0 0 17px; max-width:64ch;}
p:last-child{margin-bottom:0}
.lang{font-size:18px;}
.vit-botten{background:var(--vit);}

/* ---------- Tre vägar ---------- */
.vagar{display:grid; gap:2px; background:var(--linje-stark); margin-top:38px;}
@media(min-width:760px){ .vagar{grid-template-columns:repeat(3,1fr);} }
.vag{background:var(--papper); padding:30px 26px 32px; text-decoration:none; display:flex;
     flex-direction:column; transition:background .15s;}
.vag:hover,.vag:focus-visible{background:var(--vit);}
.vag .nr{font-size:11.5px; font-weight:600; letter-spacing:.2em; color:var(--guld); margin-bottom:18px;}
.vag p{font-size:15.5px; color:var(--sten); margin:0 0 20px; flex:1;}
.vag .pil{font-size:14px; font-weight:600; color:var(--plommon); display:inline-block;
          transition:transform .22s var(--mjuk), color .15s;}
.vag:hover .pil,.vag:focus-visible .pil{color:var(--blaeck); transform:translateX(4px);}

/* ---------- Citat ---------- */
.citatband{background:var(--plommon); color:var(--vit);}
.citat{font-size:clamp(21px,3.3vw,31px); font-weight:500; line-height:1.34; letter-spacing:-.012em;
       margin:0 0 22px; max-width:26ch; font-variation-settings:'opsz' 72;}
.citat em{font-style:italic;}
.citatband .vem{font-family:var(--brod); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
                color:rgba(255,255,255,.72); margin:0;}

/* ---------- Böcker ---------- */
.bocker{display:grid; gap:34px; margin-top:38px;}
@media(min-width:800px){ .bocker{grid-template-columns:repeat(2,1fr); gap:44px;} }
.bok{display:grid; grid-template-columns:104px 1fr; gap:22px; align-items:start;}
.bok .omslag{aspect-ratio:2/3; background:var(--blaeck); overflow:hidden; display:block;
             transition:transform .22s var(--mjuk), box-shadow .22s ease;}
.bok .omslag img{width:100%; height:100%; object-fit:cover;}
/* Boken lyfts från bordet när musen är över kortet. Hela artikeln är träffytan,
   men bara omslaget rör sig, så texten står still och är läsbar. */
.bok:hover .omslag,.bok:focus-within .omslag{transform:translateY(-6px);
  box-shadow:0 16px 30px -12px rgba(31,24,35,.42);}
.bok .arta{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
           color:var(--guld); margin:0 0 7px;}
.bok p{font-size:15.5px; color:var(--sten); margin:0 0 14px;}

/* Bokblock, boksidan */
.bokblock{display:grid; gap:clamp(26px,4vw,48px); align-items:start;}
@media(min-width:780px){ .bokblock{grid-template-columns:270px 1fr;} }
.bokblock + .bokblock{margin-top:clamp(52px,7vw,84px); padding-top:clamp(52px,7vw,84px);
                      border-top:1px solid var(--linje-stark);}
.bokblock .omslag{background:var(--blaeck); overflow:hidden; display:block; aspect-ratio:2/3;
                  transition:transform .22s var(--mjuk), box-shadow .22s ease;}
.bokblock .omslag img{width:100%; height:100%; object-fit:cover;}
.bokblock:hover .omslag{transform:translateY(-6px); box-shadow:0 18px 34px -14px rgba(31,24,35,.4);}
.bokblock .fakta{font-size:14.5px; color:var(--sten); margin-top:22px; padding-top:18px;
                 border-top:1px solid var(--linje);}
.bokblock .fakta div{display:flex; gap:14px; padding-block:4px;}
.bokblock .fakta dt{font-weight:600; min-width:96px; flex:none;}
.bokblock .fakta dd{margin:0;}

/* Köpknappar */
/* Ramen #9B89A2 är den ljusaste plommontonen som ger 3,23:1 mot vitt och därmed
   läses som en knappkant. Guld används inte här: sex guldknappar skulle dränka
   signalfärgen. */
.kop-etikett{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
             color:var(--sten); margin:0 0 10px;}
.kop{display:flex; gap:9px; flex-wrap:wrap;}
.kop a{font-size:13.5px; font-weight:600; color:var(--plommon); text-decoration:none;
       border:1.5px solid var(--ram); padding:8px 15px; background:transparent;
       transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--mjuk);}
.kop a:hover,.kop a:focus-visible{background:var(--plommon); border-color:var(--plommon);
                                  color:var(--vit); transform:translateY(-2px);}

/* ---------- De sex principerna ---------- */
.principer{margin-top:40px; counter-reset:pr; display:grid; gap:2px; background:var(--linje-stark);}
@media(min-width:700px){ .principer{grid-template-columns:repeat(2,1fr);} }
.princip{background:var(--papper); padding:28px 26px 30px; counter-increment:pr;}
.princip .tal{display:block; font-size:34px; font-weight:600; line-height:1; color:var(--guld);
              margin-bottom:14px; font-variation-settings:'opsz' 72;}
.princip .tal::before{content:counter(pr,decimal-leading-zero);}
.princip p{font-size:15.5px; color:var(--sten); margin:0;}

/* ---------- Föreläsningar ---------- */
.forelasningar{display:grid; gap:2px; background:var(--linje-stark); margin-top:38px;}
@media(min-width:760px){ .forelasningar{grid-template-columns:repeat(2,1fr);} }
/* Flex-kolumn med .beskrivning som växer, så att "Passar för" och
   bokningsknappen linjerar i båda korten även när texterna är olika långa. */
.forelasning{background:var(--papper); padding:30px 26px 32px; display:flex; flex-direction:column;}
.forelasning .beskrivning{flex:1;}
.forelasning .boka{margin:18px 0 0;}
.forelasning .langd{display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.14em;
                    text-transform:uppercase; color:var(--guld); margin-bottom:14px;}
.forelasning p{font-size:15.5px; color:var(--sten); margin:0 0 16px;}
.forelasning .passar{font-size:13.5px; color:var(--sten); border-top:1px solid var(--linje);
                     padding-top:13px; margin:0;}
.forelasning .passar b{color:var(--blaeck); font-weight:600;}

/* ---------- Kanaler ---------- */
.folj{background:var(--blaeck); color:var(--papper);}
.folj .ogonbryn{color:var(--guld);}
.folj p{color:#CFC6D3;}
.kanaler{display:grid; gap:2px; background:#372C3E; margin-top:34px;}
@media(min-width:680px){ .kanaler{grid-template-columns:repeat(3,1fr);} }
.kanal{background:var(--blaeck); padding:24px 22px 26px; text-decoration:none; transition:background .15s;}
.kanal:hover,.kanal:focus-visible{background:#281F2E;}
.kanal b{display:block; font-family:var(--display); font-variation-settings:'opsz' 36;
         font-size:19px; font-weight:600; margin-bottom:6px;}
.kanal span{font-size:14.5px; color:#A99BB0;}

/* ---------- Bild bredvid text ----------
   Fotografierna är stående. De beskärs aldrig till liggande band, eftersom
   ett band skär bort antingen ansiktet eller det hon håller i.
   Bilden går ut till sidkanten, precis som hero. En bild med marginal på
   alla fyra sidor svävar och ser platt ut; en som når kanten blir en yta
   i sidan. Sektionen runt ska därför inte ha .band eller .inner. */
.sektion-bild{padding-block:0;}
.textbild{display:grid; gap:0;}
.textbild .bild{margin:0; background:var(--plommon); overflow:hidden;}
.textbild .bild img{width:100%; height:100%; object-fit:cover; display:block;}
.textbild .ord{padding:clamp(36px,7vw,60px) var(--gutter);}
.textbild .ord p:last-child{margin-bottom:0;}

@media(min-width:820px){
  /* Bilden till vänster, ut till vänsterkanten */
  .textbild{grid-template-columns:minmax(300px,43%) minmax(0,1fr); align-items:stretch;}
  .textbild .bild{min-height:520px;}
  .textbild .ord{
    display:flex; flex-direction:column; justify-content:center;
    padding-left:clamp(36px,4.6vw,66px);
    padding-right:max(var(--gutter), calc((100vw - 1160px) / 2));
    padding-block:clamp(52px,7vw,92px);
  }
  /* Bilden till höger, ut till högerkanten */
  .textbild.hoger{grid-template-columns:minmax(0,1fr) minmax(300px,43%);}
  .textbild.hoger .bild{order:2;}
  .textbild.hoger .ord{
    order:1;
    padding-left:max(var(--gutter), calc((100vw - 1160px) / 2));
    padding-right:clamp(36px,4.6vw,66px);
  }
}

/* ---------- Stort bildblock ---------- */
.storbild{background:var(--plommon); color:var(--vit); display:grid; gap:0;}
.storbild img{width:100%; height:100%; object-fit:cover; display:block;}
.storbild .ord{padding:clamp(34px,6vw,64px) var(--gutter);
               display:flex; flex-direction:column; justify-content:center;}
.storbild .citat{margin:0 0 18px;}
.storbild .vem{font-family:var(--brod); font-size:13px; letter-spacing:.14em;
               text-transform:uppercase; color:rgba(255,255,255,.72); margin:0;}
@media(min-width:820px){
  .storbild{grid-template-columns:minmax(300px,42%) minmax(0,1fr); align-items:stretch;}
  .storbild .ord{padding-right:max(var(--gutter), calc((100vw - 1160px) / 2));
                 padding-left:clamp(36px,4.6vw,66px);}
}

/* ---------- Kontaktruta ---------- */
.kontakt{background:var(--plommon); color:var(--vit); padding:clamp(30px,5vw,48px);
         margin-top:44px; max-width:760px;}
.kontakt h3{font-size:clamp(21px,3vw,27px); margin:0 0 12px; font-variation-settings:'opsz' 72;}
.kontakt p{color:rgba(255,255,255,.86); margin:0 0 20px;}
.kontakt a.adress{font-family:var(--display); font-variation-settings:'opsz' 72;
                  font-size:clamp(19px,2.6vw,25px); font-weight:600; color:var(--guld);
                  text-decoration:none; border-bottom:2px solid transparent; transition:border-color .15s;}
.kontakt a.adress:hover,.kontakt a.adress:focus-visible{border-bottom-color:var(--guld);}

/* ---------- Sidfot ---------- */
footer{background:var(--blaeck); color:#8D8195; border-top:1px solid #372C3E; padding-block:32px 40px;}
footer .inner{display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
footer a{color:#B5A9BB;}
footer .liten{font-size:13.5px; margin:0;}

/* ---------- Märkesruta ----------
   Inbäddad tvåspalt inuti en vanlig sektion, inte ett kantblock. */
.markesruta{display:grid; gap:clamp(26px,4vw,48px); align-items:center; margin-top:34px;}
@media(min-width:760px){ .markesruta{grid-template-columns:1fr 1fr;} }
.markesruta .prov{display:flex; align-items:center; justify-content:center;
                  background:var(--plommon); aspect-ratio:4/3;}
.markesruta .prov svg{width:36%; color:var(--vit);}

/* ---------- Avslutande band ----------
   Varje sida slutar med ett helbrett, mättat band. Färgen styrs av vad
   sidan vill att läsaren gör:
     plommon  hör av dig      Jämställd litteratur, Böcker, Föreläsningar, Om Elisabeth
     bläck    följ eller lyssna   Startsidan, Podd (klassen .folj)
   Full bredd, inte en indragen ruta: en ruta direkt efter ett kantblock
   ställer två olika kantlinjer mot varandra och läser som ett misstag. */
.kontaktband{background:var(--plommon); color:var(--vit);}
.kontaktband .ogonbryn{color:var(--guld);}
.kontaktband h2{margin:0 0 14px;}
.kontaktband p{color:rgba(255,255,255,.86); margin:0 0 26px;}
.kontaktband .adress{
  font-family:var(--display); font-variation-settings:'opsz' 96;
  font-size:clamp(21px,3.4vw,32px); font-weight:600; color:var(--guld);
  text-decoration:none; border-bottom:2px solid transparent;
  transition:border-color .15s; display:inline-block;
}
.kontaktband .adress:hover,.kontaktband .adress:focus-visible{border-bottom-color:var(--guld);}