/* Egenhostade typsnitt.
   Alla tre har SIL Open Font License, som uttryckligen tillåter egen server.
   Bara latin-delmängden ingår, den täcker svenska åäö och é i Chloélla.
   Inter är variabelt och täcker vikt 400 till 600 i en enda fil. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('typsnitt/inter-var.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:600;
  font-display:swap;
  src:url('typsnitt/cormorant-600.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:600;
  font-display:swap;
  src:url('typsnitt/cormorant-600-italic.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:'Great Vibes';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('typsnitt/great-vibes.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;
}

/* ==========================================================================
   Chloélla Sweets
   Palett och typografi ligger samlat i :root , ändra där, inte längre ner.
   ========================================================================== */

:root{
  /* Färger, hämtade direkt ur Chloéllas logga */
  --ink:        #37202A;   /* mörkt plommon, all brödtext */
  --ink-soft:   #6E5259;   /* dämpad text */
  --cream:      #FDF0EA;   /* sidans bakgrund, samma som loggans */
  --cream-2:    #FBE4E1;   /* avvikande sektioner */
  --wine:       #96233D;   /* loggans "CHLOÉLLA" */
  --wine-dark:  #6E1B30;
  --gold:       #BD894B;   /* loggans "Sweets" , dekor */
  --gold-ink:   #7E5620;   /* mörkare guld, för text. Klarar AA mot både ljus och tonad botten */
  --gold-soft:  #D3AB7F;
  --rose:       #D08793;   /* loggans blad */
  --blush:      #FACCCF;
  --line:       #F0D6D1;
  --white:      #FFFFFF;

  /* Typografi */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script:  "Great Vibes", "Snell Roundhand", cursive;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mått */
  --wrap: 1140px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --radius: 14px;
  --radius-lg: 24px;

  /* Textskala. Håll dig till de här fyra stegen så håller sidan ihop. */
  --text-lead:  1.12rem;   /* ingresser */
  --text-sm:    .97rem;    /* kort, steg, notiser, formulärfält */
  --text-xs:    .85rem;    /* finstilt, hjälptexter */
  --text-label: .78rem;    /* versaletiketter */

  --shadow-sm: 0 2px 10px rgba(43,27,21,.06);
  --shadow:    0 14px 40px rgba(43,27,21,.10);
  --shadow-lg: 0 30px 70px rgba(43,27,21,.16);
}

/* ---------- Grund ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
/* picture ska inte skapa en egen box, då hamnar img direkt i layouten */
picture{ display:contents; }

a{ color:var(--wine-dark); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--rose); }

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:0;
  margin:0 0 .5em;
  text-wrap:balance;   /* jämnar ut raderna om en rubrik ändå måste brytas */
}
h1{ font-size:clamp(2.7rem, 5.6vw, 4.3rem); }
h2{ font-size:clamp(2.1rem, 3.9vw, 2.95rem); }
h3{ font-size:1.5rem; font-weight:600; }
h1 em{ font-style:italic; color:var(--wine); }


p{ margin:0 0 1.1em; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:.75rem 1.25rem;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:3px solid var(--wine); outline-offset:3px; border-radius:4px; }

/* Platshållare för fakta som ska fyllas i */
.fill{
  background:rgba(189,137,75,.18);
  border-bottom:1px dashed var(--gold-ink);
  padding:0 .25em;
  border-radius:3px;
}

/* ---------- Knappar ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--body); font-weight:600; font-size:var(--text-sm);
  padding:.85rem 1.6rem;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink); color:var(--cream);
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover{ background:var(--wine); border-color:var(--wine); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-sm); }

.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.btn-small{ padding:.55rem 1.2rem; font-size:.9rem; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background:#F9D9D6;   /* egen ton, skiljer sig från både ljus och tonad sektion */
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, background .25s ease, transform .3s ease;
  will-change:transform;
}
/* Doljs pa vag nedat, kommer tillbaka sa fort man drar uppat. Sticky, inte
   fixed, sa den tar plats i flodet aven nar den ar uppskjuten. Darfor
   hoppar ingenting till nar den forsvinner. */
.site-header.dold{ transform:translateY(-100%); }

@media (prefers-reduced-motion: reduce){
  .site-header{ transition:box-shadow .25s ease, background .25s ease; }
}
/* Tunn guldlinje längst ner, samma guld som i loggan */
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  opacity:.55;
}
.site-header.stuck{
  background:#F8D4D1;
  box-shadow:0 6px 24px rgba(110,27,48,.08);
}

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:94px; }

.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand-mark{ width:30px; height:30px; color:var(--wine); flex:none; }
.brand-mark svg{ width:100%; height:100%; }
/* Ordmärket är låst som i loggan: versalerna överst, skrivstilen under och
   något indragen, med en aning överlapp. */
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-namn{
  font-family:var(--display); font-size:1.46rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
}
.brand-sweets{
  font-family:var(--script); font-size:2.05rem; color:var(--wine);
  margin-top:-.32em; margin-left:.85em; line-height:1;
}

.nav{ display:flex; align-items:center; gap:1.9rem; }
.nav a{
  color:var(--ink); text-decoration:none; font-size:var(--text-sm); font-weight:500;
  position:relative;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1.5px;
  background:var(--wine); transition:right .25s ease;
}
.nav a:not(.btn):hover::after{ right:0; }
.nav a.btn{ color:var(--cream); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:44px; height:44px; padding:0 10px;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Bildplatshållare ----------
   Visas bara när bildfilen saknas (JS sätter .missing). */

[data-photo]{ position:relative; margin:0; overflow:hidden; background:var(--cream-2); }
[data-photo] img{ width:100%; height:100%; object-fit:cover; }
.photo-fallback{ display:none; }

[data-photo].missing img{ display:none; }
[data-photo].missing{
  background:
    repeating-linear-gradient(135deg, rgba(189,137,75,.08) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--cream-2), #F3CFCB);
  border:1.5px dashed var(--gold);
}
[data-photo].missing .photo-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  position:absolute; inset:0; text-align:center; padding:1rem;
  color:var(--ink-soft); font-size:var(--text-xs); line-height:1.4;
}
[data-photo].missing .photo-fallback strong{
  font-family:var(--body); font-size:var(--text-xs); color:var(--ink);
  background:var(--white); padding:.3rem .7rem; border-radius:999px; box-shadow:var(--shadow-sm);
}

/* ---------- Hero ---------- */

.hero{ position:relative; }

/* Helbild med en djup vinröd toning från vänster. Texten ligger i toningens
   mörka del, bilden andas ut åt höger. */
.hero-scen{
  position:relative;
  display:flex; align-items:center;
  min-height:min(760px, calc(100svh - 94px));
  overflow:hidden;
  isolation:isolate;
}
.hero-bild{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:58% center;
}
.hero-sloja{
  position:absolute; inset:0;
  /* Multiplikation i stället för en täckande platta. Fotot mörknar
     proportionellt, så bordet och fatet syns kvar som fond bakom rubriken,
     medan ljusheten ändå sjunker så pass att texten går att läsa.
     Stopparna är valda genom att mäta kontrasten mot den faktiska bilden
     för flera varianter och ta den som klarade kravet med marginal. */
  mix-blend-mode:multiply;
  background:linear-gradient(100deg,
    rgba(48,10,22,1) 0%,
    rgba(58,12,26,1) 38%,
    rgba(92,21,40,.92) 58%,
    rgba(150,35,61,.55) 70%,
    rgba(196,80,126,.22) 84%,
    rgba(250,204,207,.05) 94%,
    rgba(253,240,234,0) 100%);
}

.hero-inne{
  position:relative; z-index:1;
  color:var(--cream);
  padding-block:clamp(3rem, 7vw, 5rem);
  max-width:min(100% - 2.5rem, var(--wrap));
}
/* Allt innehåll hålls inom toningens mörka fält */
.hero-inne > *{ max-width:min(100%, 640px); }
.hero-inne h1{ color:var(--cream); }
.hero-inne h1 em{ color:var(--blush); }
.hero-inne .lead{ color:var(--cream); max-width:44ch; }

/* Etikett med streck före, som i skissen */
.eyebrow-linje{
  display:flex; align-items:center; gap:.9rem;
  color:var(--cream);
}
.eyebrow-linje::before{
  content:""; flex:none;
  width:46px; height:1px; background:#F0C3D2;
}

/* Knappar för mörk botten */
.btn-ljus{ background:var(--blush); border-color:var(--blush); color:var(--wine-dark); }
.btn-ljus:hover{ background:var(--cream); border-color:var(--cream); color:var(--wine-dark); }
.btn-kontur{ background:transparent; border-color:rgba(253,240,234,.65); color:var(--cream); }
.btn-kontur:hover{ background:var(--cream); border-color:var(--cream); color:var(--wine-dark); }

/* Raden längst ner i heron */
.hero-marker{
  list-style:none; margin:clamp(2.2rem, 5vw, 3.2rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.4rem;
  font-size:var(--text-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream);
}
.hero-marker li{ display:flex; align-items:center; gap:1.4rem; }
.hero-marker li:not(:first-child)::before{
  content:""; flex:none;
  width:5px; height:5px; border-radius:50%; background:var(--blush);
}
.hero-marker a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(250,204,207,.5); }
.hero-marker a:hover{ color:var(--cream); border-bottom-color:var(--cream); }

.section{ padding-block:clamp(4rem, 9vw, 7.5rem); }
.section-tint{ background:var(--cream-2); }

.section-head{ max-width:56ch; margin-bottom:clamp(2.5rem, 5vw, 4rem); }
/* För rubriker som är längre än de andra. 56ch skulle bryta dem på två rader,
   och rubrikerna ska hållas på en rad så länge bredden räcker. */
.section-head-bred{ max-width:none; }
.section-intro{ color:var(--ink-soft); font-size:var(--text-lead); margin-bottom:0; }

/* Kursiv underrubrik direkt under en sektionsrubrik. Sätts i rubriktypsnittet
   så att den läses ihop med rubriken i stället för som ett eget stycke,
   och dras upp något eftersom rubriken redan har luft under sig. */
.section-intro.underrubrik{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.2rem, 2.1vw, 1.55rem);
  line-height:1.3;
  margin-top:-.25em;
}

.note{
  margin-top:2.5rem; text-align:center; color:var(--ink-soft); font-size:var(--text-sm);
}

/* ---------- Kort ---------- */

.cards{ display:grid; gap:1.4rem; grid-template-columns:repeat(3, 1fr); }
@media (max-width:860px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }

.card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.2rem 1.6rem 1.6rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--gold); }
.card h3{ padding-right:2.6rem; }   /* lämnar plats åt siffran uppe till höger */
.card p{ color:var(--ink-soft); font-size:var(--text-sm); }
.card p:last-child{ margin-bottom:0; }

.card-num{
  position:absolute; top:1.1rem; right:1.3rem;
  font-family:var(--display); font-size:1.9rem; font-style:italic; font-weight:600;
  color:var(--line);
}

/* ---------- Galleri ---------- */

.gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:190px;
  grid-auto-flow:dense;   /* fyller igen luckor som spannen annars lämnar */
  gap:1rem;
}
.shot{ border-radius:var(--radius); cursor:zoom-in; }
.shot img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.shot:hover img{ transform:scale(1.05); }
.shot.tall{ grid-row:span 2; }
.shot.wide{ grid-column:span 2; }
.shot.missing{ cursor:default; }

/* ---------- Steg ---------- */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  counter-reset:steg;
}
.step{ padding-top:1.3rem; border-top:2px solid var(--line); }
.step h3{ margin-top:.8rem; }
.step p{ color:var(--ink-soft); font-size:var(--text-sm); margin-bottom:0; }
.step-num{
  font-family:var(--display); font-style:italic; font-weight:600; font-size:2.4rem;
  color:var(--wine); line-height:1;
}

/* ---------- Om ---------- */

.about-grid{
  display:grid; gap:var(--gap);
  /* Smalare bildkolumn an tidigare. Nar bilden slutade strackas till
     textens hojd blev den 192 px hogre an texten, vilket sag ojamnt ut.
     Uppmatt: vid .62fr ar skillnaden 85 px, alltsa drygt 40 px luft over
     och under, och da laser det som avsiktligt. */
  grid-template-columns:.62fr 1.38fr; align-items:stretch;
}
/* Bilden har fotots egna proportioner i stallet for att strackas till
   textens hojd. Strackte den sig beskars den bade av snittet och av
   behallaren, och da foll bade fatets fot och en del av henne bort. */
.about-photo{
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  aspect-ratio:1000 / 1503;
  align-self:center;
  /* Bredden maste vara uttalad. Bilden ligger absolut positionerad och
     bildtexten ar dold, sa figuren har inget innehall som ger den en
     egen bredd. Utan detta kollapsar den till noll sa fort nagot
     hindrar grid fran att stracka ut den. */
  width:100%;
}
.about-photo img{ position:absolute; inset:0; }
.about-copy{ align-self:center; }
.about-copy p{ color:var(--ink-soft); }

blockquote{
  margin:2rem 0 0; padding-left:1.4rem;
  border-left:3px solid var(--wine);
  font-family:var(--display); font-style:italic; font-weight:600; font-size:1.5rem;
  line-height:1.4; color:var(--ink);
}

/* ---------- Kontakt ---------- */

.contact-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr 1fr; align-items:start; }

.contact-list{ list-style:none; margin:2.2rem 0 0; padding:0; display:grid; gap:1rem; }
.contact-list li{ display:grid; grid-template-columns:110px 1fr; align-items:baseline; gap:.5rem; }
.contact-list li > .fill{ justify-self:start; }
.contact-list .k{
  font-size:var(--text-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-ink);
}

.contact-form{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.5rem, 3vw, 2.4rem);
  box-shadow:var(--shadow-sm);
}
.field{ margin-bottom:1.1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ display:block; font-size:var(--text-xs); font-weight:600; margin-bottom:.4rem; }

.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:var(--text-sm); color:var(--ink);
  padding:.75rem .9rem;
  background:var(--cream);
  border:1px solid var(--line); border-radius:10px;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  background:var(--white); border-color:var(--wine); outline:none;
  box-shadow:0 0 0 3px rgba(150,35,61,.14);
}
.field input:user-invalid, .field textarea:user-invalid{ border-color:var(--wine); }

.form-help{ margin:.9rem 0 0; font-size:var(--text-xs); color:var(--ink-soft); text-align:center; }
.form-help.error{ color:var(--wine-dark); font-weight:500; }
.form-help a{ color:var(--wine-dark); font-weight:500; white-space:nowrap; }
.form-help.klart{ color:var(--wine-dark); font-weight:500; }

/* Skräppostfällan ska vara borta för människor men läsbar för robotar,
   därför flyttas den ur bild i stället för att döljas med display:none. */
.honungsfalla{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

/* ---------- Footer ---------- */

.site-footer{ background:var(--wine-dark); color:var(--cream-2); padding-block:3.5rem; }
.footer-inner{ text-align:center; }
.footer-meta{ font-size:var(--text-sm); margin:0 0 1.4rem; }
.site-footer a{ color:var(--cream); }
.site-footer a:hover{ color:var(--gold); }
.site-footer .fill{ background:rgba(211,171,127,.28); border-bottom-color:var(--gold-soft); }
.footer-fine{ font-size:var(--text-xs); color:#C79FA9; margin:0; }

/* ---------- Lightbox ---------- */

.lightbox{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  background:rgba(55,32,42,.94);
  padding:clamp(1rem, 4vw, 3rem);
  animation:fade .2s ease;
}
.lightbox[hidden]{ display:none; }
.lb-img{ max-width:100%; max-height:88vh; border-radius:8px; box-shadow:var(--shadow-lg); }
.lightbox button{
  position:absolute; background:none; border:0; color:var(--cream);
  font-size:2.6rem; line-height:1; cursor:pointer; padding:.5rem 1rem;
  opacity:.75; transition:opacity .2s ease;
}
.lightbox button:hover{ opacity:1; }
.lb-close{ top:.5rem; right:1rem; font-size:3rem; }
.lb-prev{ left:.5rem; }
.lb-next{ right:.5rem; }

@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- Scroll-animation ---------- */

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Felsidan (404) ---------- */

/* Sektionen ska fylla skärmen även om innehållet är kort, annars hänger
   sidfoten mitt på sidan på en stor skärm. */
.felsida{
  display:flex; align-items:center;
  min-height:calc(100svh - 94px - 340px);
}
.felsida .section-head{ margin-bottom:clamp(1.5rem, 3vw, 2.2rem); }
.felsida-text{
  color:var(--ink-soft); font-size:var(--text-lead);
  max-width:52ch; margin:0 0 clamp(1.8rem, 3.5vw, 2.5rem);
}
.felsida-knappar{ display:flex; flex-wrap:wrap; gap:.9rem; }
.felsida .note{ margin-top:clamp(2.2rem, 4vw, 3rem); text-align:left; }

@media (max-width:620px){
  .felsida{ min-height:0; }
  .felsida-knappar .btn{ flex:1 1 100%; text-align:center; }
}

/* ---------- Responsivt ---------- */

@media (max-width: 900px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .hero-bild{ object-position:center; }
  /* Lodrät toning på smal skärm, också den multiplicerad. Uppmätt till
     5,0 som lägsta kontrast, vilket räcker och låter bilden synas igenom. */
  .hero-sloja{
    background:linear-gradient(180deg,
      rgba(120,30,54,.86) 0%, rgba(134,36,64,.80) 50%, rgba(160,40,70,.74) 100%);
  }
  /* justify-self i stallet for auto-marginaler. Auto-marginaler pa ett
     grid-objekt slar ut utstrackningen och tog bort bilden helt. */
  .about-photo{ max-width:420px; justify-self:center; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .shot.wide{ grid-column:span 2; }
}

@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.25rem;
    box-shadow:var(--shadow);
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.9rem 0; border-bottom:1px solid var(--line); }
  .nav a:not(.btn)::after{ display:none; }
  .nav a.btn{ margin-top:1rem; border-bottom:0; justify-content:center; }

  .field-row{ grid-template-columns:1fr; }
  .contact-list li{ grid-template-columns:1fr; gap:.1rem; }
  .lb-prev, .lb-next{ font-size:2rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header, .nav-toggle, .lightbox, .hero-actions, .contact-form{ display:none; }
  body{ background:#fff; }
}


/* ---------- Loggan ---------- */

.brand-logo{
  width:62px; height:62px; flex:none;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 2px 8px rgba(110,27,48,.18);
}

.footer-logo{
  width:150px; height:150px;
  border-radius:50%;
  margin:0 auto 1.4rem;
  box-shadow:0 10px 34px rgba(0,0,0,.25);
}

/* ---------- Cateringbandet ---------- */

.catering{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(135deg, var(--wine-dark), var(--wine));
  color:var(--cream);
  padding-block:clamp(3rem, 6vw, 4.5rem);
}

/* Bakgrundsbilden är nerdämpad i filen, och slöjan ovanpå ligger på 72 till
   82 procent. Det är den täthet som krävs för att all text ska klara WCAG AA
   mot bildens ljusaste parti. Ändra inte det ena utan att mäta om det andra. */
.catering-bild{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  pointer-events:none;
}
.catering-sloja{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, rgba(110,27,48,.88), rgba(150,35,61,.78));
}


.catering-inner{ display:grid; gap:2rem; grid-template-columns:1.3fr .7fr; align-items:center; }
.catering h2{ color:var(--cream); margin-bottom:.4rem; }
.catering .eyebrow{ color:#EFD9BE; }   /* ljusare guld, klarar kontrastkravet mot vinrött */
.catering p{ color:#F3DDDF; margin-bottom:0; max-width:52ch; }
.catering .btn{
  background:var(--cream); color:var(--wine-dark); border-color:var(--cream);
  justify-self:end;
}
.catering .btn:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--wine-dark); }

@media (max-width:820px){
  .catering-inner{ grid-template-columns:1fr; }
  .catering .btn{ justify-self:start; }
}

/* ---------- Mottot ur loggan ---------- */

.motto{
  font-family:var(--script); font-style:normal;
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  line-height:1.3;
  color:var(--wine); text-align:center;
  letter-spacing:.01em; margin:0;
  /* Utan detta hamnar sista ordet ensamt på rad två på mobil */
  text-wrap:balance;
}

.footer-credit{ font-size:var(--text-xs); color:#C79FA9; margin:.5rem 0 0; }
.footer-credit a{ color:var(--gold-soft); text-decoration-thickness:1px; }
.footer-credit a:hover{ color:var(--cream); }



/* ---------- Historien ---------- */

/* Hela Historien är centrerad, så sektionen hänger ihop kring en axel
   i stället för att hoppa mellan vänster och mitten. */
#historien .section-head,
#historien .section-intro{
  margin-inline:auto;
  text-align:center;
}
#historien .section-head{ max-width:64ch; }

.utdrag{
  margin:clamp(2.5rem, 5vw, 3.8rem) auto;
  max-width:42ch;
  text-align:center;
}
.utdrag::before{
  content:""; display:block;
  width:64px; height:1px;
  background:var(--gold); opacity:.65;
  margin:0 auto clamp(1.3rem, 2.6vw, 1.9rem);
}
.utdrag blockquote{
  margin:0; padding:0; border:0;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  line-height:1.26;
  color:var(--wine);
  text-wrap:balance;
}

.historia-text{
  /* En spalt, inte två. Bruten text i två kolumner tvingar ögat att
     hoppa tillbaka och gav sektionen ett avhugget intryck. */
  max-width:64ch;
  /* Sist i sektionen nu, så sektionens egen luft räcker */
  margin:0 auto;
  text-align:center;
}
.historia-text p{ color:var(--ink-soft); }
.historia-text p:last-child{ margin-bottom:0; }

/* Egen sektion: rubriken står centrerad över värdena, utan etikett
   eftersom sektionen redan är avgränsad av tonplattan. */
.varden-rubrik{
  text-align:center;
  margin:0 0 clamp(2.2rem, 4vw, 3.2rem);
}

.varden{
  display:grid; gap:1.8rem 1.6rem;
  grid-template-columns:repeat(4, 1fr);
}
.varde{ padding-top:1.1rem; border-top:2px solid var(--line); text-align:center; }
.varde-ikon{
  display:block; width:30px; height:30px;
  color:var(--gold);
  margin:0 auto .7rem;
}
.varde-ikon svg{ width:100%; height:100%; display:block; }
.varde h4{
  font-family:var(--display); font-size:1.18rem; font-weight:600;
  color:var(--wine); margin:0 0 .5rem; letter-spacing:0;
}
.varde p{ color:var(--ink-soft); font-size:var(--text-sm); margin-bottom:0; }

.modet{
  margin-top:clamp(3.2rem, 6vw, 4.8rem);
  /* Ljus platta mot den tonade sektionen, tvärtom mot tidigare */
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(2rem, 4vw, 3.4rem);
  text-align:center;
}
.modet h3{ margin-bottom:1rem; }
.modet p{
  color:var(--ink-soft);
  max-width:62ch; margin-inline:auto;
}
.modet .motto{ margin-top:1.8rem; margin-bottom:0; }

@media (max-width:900px){
  .varden{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:620px){
  .varden{ grid-template-columns:1fr; }
  /* Centrerad brödtext blir tung att läsa på smal skärm */
  .modet p:not(.motto){ text-align:left; }

  /* Punkten mellan märkena är en avdelare för en rad. När raderna staplas
     på smal skärm ser den ut som en lös punktlista, så den tas bort. */
  .hero-marker{ flex-direction:column; align-items:flex-start; gap:.55rem 0; }
  .hero-marker li{ gap:0; }
  .hero-marker li:not(:first-child)::before{ display:none; }

  /* Tryckytor. Länkarna i kontaktlistan var 27 px höga, vilket är för
     litet för en tumme. Med luften blir de dryga 44 px. */
  .contact-list{ gap:.5rem; }
  .contact-list a{ padding-block:.55rem; }
}