/* Flödesrummet med Olivia
   Byggd mobile first: grunden gäller små skärmar,
   media queries lägger på det som behövs på större. */

:root{
  --paper:#ffffff;
  --paper-alt:#faf8f6;
  --ink:#3a322d;
  --ink-soft:#5d5550;
  --line:#e9e4df;
  --accent:#5b4a7d;
  --accent-deep:#463a63;
  --accent-soft:#e2dbee;
  --radius:16px;
  --gap:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Jost",system-ui,sans-serif;font-weight:400;color:var(--ink);background:var(--paper);line-height:1.72;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.2}
h1{font-size:2.1rem}
h2{font-size:1.85rem;margin-bottom:.3em}
h3{font-size:1.25rem;font-weight:500}
p{overflow-wrap:break-word}
section{padding:38px 0 46px}
section.tight{padding:30px 0}

.muted{color:var(--ink-soft)}
.alt{background:var(--paper-alt)}

/* Knappar */
.btn{display:inline-block;text-decoration:none;padding:13px 28px;border-radius:999px;font-weight:400;letter-spacing:.06em;font-size:.93rem;transition:.25s;border:1px solid var(--ink);text-align:center}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-alt)}

/* Meny */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:62px;height:auto}
.brand span{display:none;font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-weight:600;line-height:1}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-boka{padding:9px 20px;font-size:.85rem}
.burger{background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:1px;margin:5px 0;transition:.2s}
.burger span+span{margin-top:6px}
body.menu-open{overflow:hidden}
.menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:60;flex-direction:column;background:var(--paper);padding:0 20px;gap:0;list-style:none;border-top:1px solid var(--line)}
.menu.open{display:flex}
.menu li{border-bottom:1px solid var(--line)}
.menu a{display:block;padding:18px 4px;text-decoration:none;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;color:var(--ink)}
.menu a.active{color:var(--accent)}
.menu-close{margin-top:auto;border-bottom:0;margin-left:-20px;margin-right:-20px}
.close-btn{width:100%;border:0;background:var(--accent);color:#fff;font-family:inherit;font-size:1rem;letter-spacing:.1em;padding:20px;cursor:pointer}

/* Start */
.hero{text-align:center;padding:38px 0 42px;border-bottom:1px solid var(--line)}
.hero .logo{width:min(360px,92%);height:auto;margin:0 auto 24px}
.hero p.lead{max-width:560px;margin:0 auto 28px;font-size:1.02rem;color:var(--ink-soft)}
.hero .cta{display:flex;flex-direction:column;gap:10px;align-items:center}
.hero .cta .btn{min-width:210px}

/* Sidhuvud på undersidor */
.pagehead{text-align:center;padding:34px 0 0}
.pagehead p{max-width:600px;margin:14px auto 0;color:var(--ink-soft)}
.pagehead+section{padding-top:26px}

.intro{text-align:center;max-width:620px;margin:0 auto 24px}

/* Kort och paneler */
.grid,.split{display:grid;grid-template-columns:1fr;gap:14px}
.card,.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
.alt .card,.alt .panel{border-color:transparent;box-shadow:0 10px 30px -22px rgba(74,58,45,.55)}
.card{display:flex;flex-direction:column}
.card svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.card p{margin:8px 0 20px;font-size:.95rem;color:var(--ink-soft)}
.card .more{margin-top:auto;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--accent-soft);align-self:flex-start;padding-bottom:3px}
.card .more:hover{border-color:var(--ink)}
.prices{list-style:none;margin-top:auto;font-size:.9rem}
.prices li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.prices li:first-child{border-top:0;padding-top:0;margin-top:4px}
.prices li span{flex:1;min-width:0}
.prices b{font-weight:400;white-space:nowrap}
.panel h3{margin-bottom:10px}
.panel p,.panel li{color:var(--ink-soft);font-size:.95rem}
.panel ul{margin:12px 0 0 1.1em}
.pill{display:inline-block;background:var(--paper-alt);border:1px solid var(--line);border-radius:999px;padding:6px 16px;margin:14px 6px 0 0;font-size:.84rem;letter-spacing:.04em;color:var(--ink);text-decoration:none;transition:.2s}
a.pill:hover{border-color:var(--accent);color:var(--accent)}
.note{text-align:center;margin-top:24px;font-size:.92rem}
.note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.note a:hover{border-color:var(--ink)}

/* Bilder */
.gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:min(56vw,260px) min(42vw,200px);gap:10px}
.ph{border-radius:var(--radius);background-color:#f1eeea;background-size:cover;background-position:center}
.ph.a{grid-column:span 2;background-image:url("bilder/bild1.jpg")}
.ph.b{background-image:url("bilder/bild2.jpg")}
.ph.c{background-image:url("bilder/bild3.jpg")}
.ph.d{background-image:url("bilder/bild4.jpg")}

/* Om mig */
.about-top{display:grid;grid-template-columns:1fr;gap:24px}

.portrait{aspect-ratio:4/5;border-radius:var(--radius);background:#f1eeea url("bilder/olivia.jpg") center 22%/cover}

.lead-in{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;line-height:1.45;color:var(--ink);margin-bottom:16px}
.about-text p+p{margin-top:14px}
.about-foot{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:22px}
.about-foot h3{font-size:1.05rem;margin-bottom:14px}

.creds{list-style:none;display:grid;gap:9px;font-size:.93rem;color:var(--ink-soft)}

.creds li{padding-left:20px;position:relative}
.creds li::before{content:"";position:absolute;left:0;top:.78em;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* Instagram */
.insta-row{text-align:center;margin-top:30px;padding-top:0}
.insta-text{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.4rem;line-height:1.4;color:var(--ink);max-width:460px;margin:0 auto 18px}
.insta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:12px 26px;text-decoration:none;color:#fff;font-size:.98rem;letter-spacing:.03em;transition:.25s}
.insta-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.insta-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.info{display:grid;gap:20px;margin:0 0 28px;font-size:.95rem}
.info div{display:flex;gap:13px;align-items:flex-start}
.info svg{width:19px;height:19px;flex:none;margin-top:6px;stroke:var(--accent);fill:none;stroke-width:1.3}
.info a{text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.info a:hover{border-color:var(--ink)}
.map{border:1px solid var(--line);border-radius:var(--radius);width:100%;min-height:280px;filter:grayscale(.2)}
.find{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.find-img{aspect-ratio:4/3;border-radius:var(--radius);background:#f1eeea url("bilder/bild2.jpg") center/cover}

/* Avslutande uppmaning */
.band{background:var(--paper-alt)}
.cta-band{text-align:center}
.cta-band h2{margin-bottom:.2em}
.cta-band p{color:var(--ink-soft);margin-bottom:18px}

footer{border-top:1px solid var(--line);background:var(--paper);text-align:center;padding:26px 20px;font-size:.84rem;color:var(--ink-soft);line-height:2}
footer a{text-decoration:none;border-bottom:1px solid var(--accent-soft)}
footer a:hover{color:var(--ink);border-color:var(--ink)}
footer .sep{color:var(--line);margin:0 9px;font-size:.8em;vertical-align:.08em}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---- Surfplatta och uppåt ---- */
@media (min-width:700px){
  body{font-size:17px}
  .wrap{padding:0 28px}
  .brand img{width:40px}
  .brand span{display:inline}
  h1{font-size:2.6rem}
  h2{font-size:2.15rem}
  section{padding:46px 0 56px}
  section.tight{padding:34px 0}
  .pagehead{padding:46px 0 0}
  .pagehead+section{padding-top:34px}
  .intro{margin-bottom:32px}
  .hero{padding:52px 0 56px}
  .hero .logo{width:min(420px,80%)}
  .hero .cta{flex-direction:row;justify-content:center}
  .grid,.split{grid-template-columns:1fr 1fr;gap:16px}
  .card,.panel{padding:34px 32px}
  .gallery{grid-template-columns:1.4fr 1fr;grid-template-rows:repeat(2,clamp(150px,16vw,195px));gap:12px}
  .ph.a{grid-row:span 2;grid-column:auto}
  .ph.d{grid-column:auto}
  .creds{grid-template-columns:1fr 1fr;gap:10px 26px}
  .find{grid-template-columns:1fr 1fr;gap:38px}
  .map{min-height:330px}
}

/* ---- Dator ---- */
@media (min-width:980px){
  h1{font-size:3rem}
  h2{font-size:2.4rem}
  section{padding:54px 0 66px}
  section.tight{padding:40px 0}
  .pagehead{padding:56px 0 0}
  .pagehead+section{padding-top:40px}
  .intro{margin-bottom:38px}
  .hero{padding:64px 0 70px}
  .hero .logo{width:min(480px,70%)}
  .hero p.lead{font-size:1.06rem;margin-bottom:28px}
  nav{height:72px}
  .brand{font-size:1.4rem}
  .burger,.menu-close{display:none}
  .menu{order:2;margin-left:auto}
  .nav-right{order:3;margin-left:26px}
  .menu{display:flex;position:static;flex-direction:row;background:none;border:0;padding:0;gap:30px;align-items:center}
  .menu li{border:0}
  .menu a{font-family:"Jost",system-ui,sans-serif;font-size:.93rem;padding:0;color:var(--ink-soft)}
  .menu a:hover{color:var(--ink)}
  .menu a.active{color:var(--ink)}
  .menu .btn{padding:9px 22px;font-size:.85rem}
  .split.three{grid-template-columns:repeat(3,1fr)}
  .about-top{grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
  .about-foot{grid-template-columns:1fr auto;align-items:center;gap:40px;margin-top:44px;padding-top:32px}
  .portrait{aspect-ratio:3/4}
  .contact-grid{grid-template-columns:1fr 1fr;gap:52px}
  .map{min-height:380px}
}