/* ══════════════════════════════════════════════════════════
   VYNA — vyna.es
   Tokens taken from assets/vyna-tokens.css and inlined so the
   page renders standalone. Edit both if you change the brand.
   ══════════════════════════════════════════════════════════ */
:root{
  --vyna-kol:#22221F; --vyna-sand:#F1EFE8; --vyna-kalk:#FAF8F4;
  --vyna-sten:#5F5E5A; --vyna-dis:#B4B2A9;
  --vyna-ek:#7A5A2E;  --vyna-ek-ljus:#C99B5E;

  --bg:var(--vyna-kalk); --bg-alt:var(--vyna-sand); --bg-invers:var(--vyna-kol);
  --text:var(--vyna-kol); --text-sekundar:var(--vyna-sten); --text-invers:var(--vyna-sand);
  --linje:var(--vyna-dis); --accent:var(--vyna-ek); --accent-invers:var(--vyna-ek-ljus);

  --font-rubrik:"Cormorant Garamond","Cambria",Georgia,serif;
  --font-text:"Jost","Century Gothic","Helvetica Neue",Arial,sans-serif;

  --sparr-rubrik:.06em; --sparr-etikett:.24em;
  --steg-xs:.75rem; --steg-s:.875rem; --steg-m:1rem;
  --steg-l:1.375rem; --steg-xl:2.25rem; --steg-2xl:3.5rem;

  --rum-1:.5rem; --rum-2:1rem; --rum-3:1.5rem;
  --rum-4:2.5rem; --rum-5:4rem; --rum-6:6rem;
  --radie:2px; --harlinje:1px solid var(--linje); --maxbredd:1180px;

  --gut:clamp(1.25rem,5vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:720px){
  :root{ --steg-2xl:2.25rem; --steg-xl:1.625rem; --rum-6:3.5rem; --rum-4:1.5rem; }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-text);
  font-size:var(--steg-m);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-rubrik);font-weight:300;letter-spacing:var(--sparr-rubrik);
  line-height:1.15;margin:0 0 var(--rum-3)}
h1{font-size:var(--steg-2xl)} h2{font-size:var(--steg-xl)} h3{font-size:var(--steg-l)}
p{margin:0 0 var(--rum-3);max-width:68ch} p:last-child{margin-bottom:0}
a{color:var(--accent);text-underline-offset:.25em}

.etikett{font-family:var(--font-text);font-weight:400;font-size:var(--steg-xs);
  letter-spacing:var(--sparr-etikett);text-transform:uppercase;color:var(--text-sekundar);margin:0 0 var(--rum-2)}
.ingress{font-size:var(--steg-l);color:var(--text-sekundar);line-height:1.55}
.stor{font-size:var(--steg-l);line-height:1.5}

.invers{background:var(--bg-invers);color:var(--text-invers)}
.invers h1,.invers h2,.invers h3{color:var(--text-invers)}
.invers .etikett,.invers .ingress,.invers figcaption{color:var(--vyna-dis)}
.invers a{color:var(--accent-invers)}
.invers .avdelare{border-color:rgba(180,178,169,.34)}

.sektion{padding:var(--rum-6) var(--gut)}
.sektion--tat{padding-block:var(--rum-5)}
.omslag{max-width:var(--maxbredd);margin-inline:auto}
.avdelare{border:0;border-top:var(--harlinje);margin:var(--rum-5) 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.invers :focus-visible{outline-color:var(--accent-invers)}

/* buttons */
.knapp{display:inline-block;font-family:var(--font-text);font-weight:400;font-size:var(--steg-xs);
  letter-spacing:var(--sparr-etikett);text-transform:uppercase;padding:.9rem 2rem;
  border:1px solid var(--text);border-radius:var(--radie);background:var(--text);color:var(--vyna-kalk);
  text-decoration:none;transition:background .2s ease,color .2s ease;cursor:pointer}
.knapp:hover{background:transparent;color:var(--text)}
.knapp--linje{background:transparent;color:var(--text)}
.knapp--linje:hover{background:var(--text);color:var(--vyna-kalk)}
.invers .knapp{background:var(--vyna-sand);color:var(--vyna-kol);border-color:var(--vyna-sand)}
.invers .knapp:hover{background:transparent;color:var(--vyna-sand)}
.invers .knapp--linje{background:transparent;color:var(--vyna-sand)}
.invers .knapp--linje:hover{background:var(--vyna-sand);color:var(--vyna-kol)}
.knappar{display:flex;flex-wrap:wrap;gap:var(--rum-2);margin-top:var(--rum-4)}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:var(--rum-3);padding:1rem var(--gut);color:var(--vyna-sand);border-bottom:1px solid transparent;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease)}
.hdr.solid{background:var(--vyna-kalk);color:var(--vyna-kol);border-bottom-color:var(--linje);padding-block:.7rem}
.hdr:not(.solid) .logo svg{filter:drop-shadow(0 1px 5px rgba(20,20,18,.55))}
.hdr:not(.solid) .ikon,.hdr:not(.solid) .sprak{filter:drop-shadow(0 1px 3px rgba(20,20,18,.55))}
.hdr .logo{display:block;color:inherit}
.hdr .logo .lockup svg{width:190px;height:auto;fill:currentColor}
.hdr .logo .marke{display:none;width:48px;fill:currentColor}
@media (max-width:760px){ .hdr .logo .lockup{display:none} .hdr .logo .marke{display:block} }

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a{color:inherit;text-decoration:none;font-size:var(--steg-xs);letter-spacing:var(--sparr-etikett);
  text-transform:uppercase;padding:.4rem 0;position:relative;opacity:.82;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.hdr-sida{display:flex;align-items:center;gap:var(--rum-1)}
.ikon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3}
.ikonlank{display:inline-flex;padding:.4rem;color:inherit}
.ikonlank:hover{opacity:.7}
.sprak{color:inherit;text-decoration:none;font-size:var(--steg-xs);letter-spacing:var(--sparr-etikett);
  padding:.4rem .5rem;opacity:.82;border:1px solid currentColor;border-radius:var(--radie);line-height:1}
.sprak:hover{opacity:1}
.burger{display:none;background:none;border:0;padding:.5rem;color:inherit;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:currentColor;margin:6px 0;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1080px){
  .burger{display:block}
  .nav{position:fixed;inset:0;z-index:-1;background:var(--vyna-kol);color:var(--vyna-sand);
    flex-direction:column;justify-content:center;gap:.25rem;transform:translateY(-100%);
    transition:transform .45s var(--ease);overflow-y:auto;padding:5rem var(--gut)}
  .menu-open .nav{transform:translateY(0)}
  .nav a{font-family:var(--font-rubrik);font-size:1.75rem;text-transform:none;
    letter-spacing:var(--sparr-rubrik);opacity:1;padding:.35rem 0}
  .nav a[aria-current="page"]{color:var(--accent-invers)}
  .nav a[aria-current="page"]::after{display:none}
}

/* routing */
.sida{display:none} .sida.aktiv{display:block}
.sidhuvud{padding-top:calc(var(--rum-6) + 3.5rem);padding-bottom:var(--rum-4)}
.sidhuvud h1{max-width:18ch}

/* hero */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--vyna-kol)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .skugga{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,34,31,.72) 0%,rgba(34,34,31,.34) 16%,rgba(34,34,31,.14) 36%,rgba(34,34,31,.62) 76%,rgba(34,34,31,.86) 100%)}
.hero .inre{position:relative;z-index:2;max-width:var(--maxbredd);margin-inline:auto;width:100%;
  padding:0 var(--gut) clamp(3rem,7vw,5.5rem)}
.hero h1{color:var(--vyna-sand);max-width:17ch}
.hero p{color:var(--vyna-sand);font-size:var(--steg-l);line-height:1.5;max-width:46ch}
.hero .knappar .knapp{background:var(--vyna-sand);color:var(--vyna-kol);border-color:var(--vyna-sand)}
.hero .knappar .knapp:hover{background:transparent;color:var(--vyna-sand)}
.hero .knappar .knapp--linje{background:transparent;color:var(--vyna-sand);border-color:rgba(241,239,232,.55)}
.hero .knappar .knapp--linje:hover{background:var(--vyna-sand);color:var(--vyna-kol);border-color:var(--vyna-sand)}
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero p,.hero .knappar{opacity:0;transform:translateY(14px);animation:stig .9s var(--ease) forwards}
  .hero p{animation-delay:.12s} .hero .knappar{animation-delay:.24s}
  @keyframes stig{to{opacity:1;transform:none}}
}

/* images */
.bild{position:relative;margin:0;overflow:hidden;background:var(--vyna-sand);border-radius:var(--radie)}
.bild img{width:100%;height:100%;object-fit:cover}
.r-43{aspect-ratio:4/3} .r-32{aspect-ratio:3/2} .r-45{aspect-ratio:4/5}
.r-11{aspect-ratio:1/1} .r-169{aspect-ratio:16/9} .r-23{aspect-ratio:2/3}
figcaption{margin-top:var(--rum-2);font-size:var(--steg-s);color:var(--text-sekundar);line-height:1.55;max-width:52ch}

/* layout */
.delad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,var(--rum-6));align-items:center}
.delad--topp{align-items:start}
@media (max-width:860px){.delad{grid-template-columns:1fr}}

.kort-rad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.6vw,var(--rum-4));margin-top:var(--rum-5)}
.kort-rad--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.kort-rad,.kort-rad--2{grid-template-columns:1fr}}
.kort{text-decoration:none;color:inherit;display:block}
.kort h3{margin:var(--rum-3) 0 var(--rum-1)}
.kort p{font-size:var(--steg-s);color:var(--text-sekundar);max-width:36ch;margin:0}
.kort .bild img{transition:transform .7s var(--ease)}
.kort:hover .bild img{transform:scale(1.04)}
.kort .mer{display:inline-block;margin-top:var(--rum-2);font-size:var(--steg-xs);
  letter-spacing:var(--sparr-etikett);text-transform:uppercase;color:var(--accent)}

/* numbered sequence */
.steg-lista{margin-top:var(--rum-5);border-top:var(--harlinje);counter-reset:steg}
.steg{counter-increment:steg;display:grid;grid-template-columns:3.5rem 1fr 1.15fr;
  gap:clamp(1rem,3vw,var(--rum-4));padding:var(--rum-3) 0;border-bottom:var(--harlinje);align-items:start}
.steg::before{content:counter(steg,decimal-leading-zero);font-family:var(--font-rubrik);
  font-size:var(--steg-l);letter-spacing:.02em;color:var(--accent)}
.invers .steg-lista,.invers .steg{border-color:rgba(180,178,169,.34)}
.invers .steg::before{color:var(--accent-invers)}
.steg h3{margin:0} .steg p{margin:0;font-size:var(--steg-s);color:var(--text-sekundar)}
.invers .steg p{color:var(--vyna-dis)}
@media (max-width:760px){.steg{grid-template-columns:2.5rem 1fr}.steg p{grid-column:2}}

/* choices list */
.val{margin-top:var(--rum-4);border-top:var(--harlinje)}
.val div{display:grid;grid-template-columns:11rem 1fr;gap:var(--rum-3);
  padding:.9rem 0;border-bottom:var(--harlinje)}
.val dt{font-size:var(--steg-xs);letter-spacing:var(--sparr-etikett);text-transform:uppercase;
  color:var(--text-sekundar);margin:0}
.val dd{margin:0;font-size:var(--steg-s)}
@media (max-width:600px){.val div{grid-template-columns:1fr;gap:.2rem}}

/* gallery */
.galleri{columns:3;column-gap:clamp(.75rem,1.6vw,1.25rem);margin-top:var(--rum-4)}
.galleri .bild{break-inside:avoid;margin-bottom:clamp(.75rem,1.6vw,1.25rem)}
@media (max-width:900px){.galleri{columns:2}}
@media (max-width:560px){.galleri{columns:1}}

/* quote */
.citat{font-family:var(--font-rubrik);font-weight:300;font-size:var(--steg-xl);line-height:1.25;
  letter-spacing:var(--sparr-rubrik);max-width:24ch;margin:0}

/* contact */
.uppgift{padding:var(--rum-3) 0;border-top:var(--harlinje)}
.uppgift dt{font-size:var(--steg-xs);letter-spacing:var(--sparr-etikett);text-transform:uppercase;
  color:var(--text-sekundar);margin-bottom:.4rem}
.uppgift dd{margin:0;font-size:var(--steg-m);line-height:1.6}
.uppgift dd a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--linje)}
.uppgift dd a:hover{border-color:var(--accent);color:var(--accent)}
.formular{display:grid;gap:var(--rum-3);max-width:34rem}
.falt{display:grid;gap:.4rem}
.falt label{font-size:var(--steg-xs);letter-spacing:var(--sparr-etikett);text-transform:uppercase;color:var(--text-sekundar)}
.falt input,.falt select,.falt textarea{font-family:var(--font-text);font-weight:300;font-size:var(--steg-m);
  color:var(--text);background:var(--vyna-kalk);border:var(--harlinje);border-radius:var(--radie);
  padding:.75rem .85rem;width:100%;transition:border-color .2s ease}
.falt textarea{min-height:8rem;resize:vertical}
.falt input:focus,.falt select:focus,.falt textarea:focus{border-color:var(--text);outline:none}
.notis{font-size:var(--steg-s);color:var(--text-sekundar);max-width:46ch}
.finstilt{font-size:var(--steg-s);color:var(--text-sekundar);max-width:62ch;margin-top:var(--rum-4)}
.invers .finstilt{color:var(--vyna-dis)}

/* floating whatsapp */
.wa{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:70;
  display:inline-flex;align-items:center;gap:.6rem;background:var(--vyna-kol);color:var(--vyna-sand);
  text-decoration:none;padding:.8rem 1.35rem .8rem 1.05rem;border-radius:var(--radie);border:1px solid var(--vyna-kol);
  font-size:var(--steg-xs);letter-spacing:var(--sparr-etikett);text-transform:uppercase;
  box-shadow:0 6px 22px rgba(34,34,31,.22);transition:background .2s ease,color .2s ease}
.wa:hover{background:var(--vyna-sand);color:var(--vyna-kol)}
.wa svg{width:18px;height:18px;fill:currentColor}
@media (max-width:520px){.wa span{display:none}.wa{padding:.85rem}}

/* footer */
.fot{background:var(--bg-invers);color:var(--text-invers);padding:var(--rum-6) var(--gut) var(--rum-4)}
.fot .logo svg{width:190px;height:auto;fill:currentColor}
.fot-rader{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.5rem,4vw,var(--rum-5));margin-top:var(--rum-4)}
@media (max-width:900px){.fot-rader{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fot-rader{grid-template-columns:1fr}}
.fot h4{font-family:var(--font-text);font-weight:400;font-size:var(--steg-xs);letter-spacing:var(--sparr-etikett);
  text-transform:uppercase;color:var(--vyna-dis);margin:0 0 var(--rum-2)}
.fot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:var(--steg-s)}
.fot a{color:var(--vyna-sand);text-decoration:none}
.fot a:hover{color:var(--accent-invers)}
.fot address{font-style:normal;font-size:var(--steg-s);line-height:1.75}
.fot p{color:var(--vyna-dis);font-size:var(--steg-s)}
.fot-slut{margin-top:var(--rum-5);padding-top:var(--rum-3);border-top:1px solid rgba(180,178,169,.34);
  display:flex;flex-wrap:wrap;gap:.75rem var(--rum-4);justify-content:space-between;
  font-size:var(--steg-xs);color:var(--vyna-dis)}

.hdr .logo{display:block;color:inherit}
.hdr .logo img{display:block}
.hdr .logo .lockup{width:190px;height:auto}
.hdr .logo .marke{width:48px;height:auto;display:none}
.hdr .logo .lockup-dark,.hdr .logo .marke-dark{display:none}
.hdr.solid .logo .lockup-light{display:none}
.hdr.solid .logo .lockup-dark{display:block}
@media (max-width:760px){
  .hdr .logo .lockup-light,.hdr .logo .lockup-dark{display:none !important}
  .hdr .logo .marke-light{display:block}
  .hdr .logo .marke-dark{display:none}
  .hdr.solid .logo .marke-light{display:none}
  .hdr.solid .logo .marke-dark{display:block}
}
.fot .logo img{width:190px;height:auto}