/* styles.css — adamafekenstam.se
   ─────────────────────────────────────────────────────────────
   Redigerande magasinlayout. Schibsted Grotesk 900 som display,
   Inter som brödtext, JetBrains Mono för etiketter, Caveat för
   den personliga anteckningen.

   Tokens, typografi och komponenter följer designsystemet i
   design/index.html. Gränssnittet är monokromt: färgen bär
   fotona, inte ytan.

   Innehåll
     01  Tokens
     02  Reset och bas
     03  Etiketter och typografi
     04  Topp
     05  Fullskärmsmeny
     06  Sektionsstruktur (corners, sechead, split)
     07  Kort, steg, flöde
     08  Bilder
     09  Portfölj
     10  Paket
     11  Kontakt och sidfot
     12  Knappar
     13  Reveal
     14  Responsivt
   ───────────────────────────────────────────────────────────── */

/* ─── 01  TOKENS ──────────────────────────────────────────────── */

:root {
  /* Varm-tintade neutrals. Aldrig #000. Aldrig #fff. */
  --ink:   #0d0c0a;
  --bg:    #f8f7f4;
  --soft:  #6b6964;
  --line:  #d4d2cd;
  --cream: #f0ebe2;

  /* Inverterat läge för mörka ytor. Fortfarande monokromt. */
  --ink-inv:  #f8f7f4;
  --bg-inv:   #0d0c0a;
  --soft-inv: #9a978f;
  --line-inv: #33312d;

  /* En accent. En enda. Används restriktivt. */
  --accent: #EACC59;

  /* Typografi */
  --font-display: 'Schibsted Grotesk', 'Archivo Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-hand:    'Caveat', cursive;

  /* Rytm */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap-md: 22px;
  --gap-lg: 40px;
  --gap-xl: clamp(56px, 9vw, 120px);

  /* Yttre marginal. Porträttet i hero blods ut i den högra kanten,
     så därför behövs värdet som en variabel. */
  --pad: clamp(16px, 4.5vw, 48px);

  /* Rörelse */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ankarlänkar ska inte landa under den sticky topbaren. */
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ruben sticky topbaren ska inte överlappas. */
  padding-bottom: 0;
}

img { display: block; max-width: 100%; height: auto; background: var(--cream); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--bg); }

/* Fokus är alltid synlig. Aldrig borttagen. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─── 02  RESET OCH BAS ───────────────────────────────────────── */

.pad { padding-inline: var(--pad); }

/* Etiketter: monospace, små, versaler, spärrad. */
.meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.meta.dim { color: var(--soft); }

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Personlig anmärkning. Max en per sektion. */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(19px, 3vw, 26px);
  line-height: 1.3;
  color: var(--soft);
  margin-top: clamp(16px, 3vw, 28px);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

/* ─── 03  ETIKETTER OCH TYPOGRAFI ─────────────────────────────── */

/* Regel 1: rubriken tar övre tredjedelen.
   Schibsted Grotesk 900 är en bred display: versaler mäter ~0.77em
   per tecken (uppmätt), mellanrum ~0.33em. Rubriken skalas därför
   efter sin längsta rad, så att den aldrig går utanför sin spalt.
   12.9em = "SOM BARA LÖSER DET" med marginal. */
h1.word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, calc((100vw - 100px) / 12.9), 132px);
  line-height: 1;
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin: clamp(10px, 3vw, 34px) 0 0;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Sektionsrubrik: ett tungt uttalande i versaler.
   13.2em = "PAKET OCH PRISER", den längsta sektionsrubriken. */
.sechead {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, calc((100vw - 100px) / 13.2), 120px);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  margin: clamp(12px, 3vw, 30px) 0 0;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* ─── 04  TOPP ────────────────────────────────────────────────── */

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Logotypen i topbaren. Den ersätter textordet, så den får vara
   större än en vanlig etikett. */
.top__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.top__logo img {
  height: clamp(40px, 11vw, 52px);
  width: auto;
  display: block;
  background: transparent;
}
.top__right { display: flex; align-items: center; gap: 16px; }
.top button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}
.top button:hover { opacity: .55; }

/* Aktuell sektion i topbaren. Döljs på mobil där platsen är knapp. */
.top__now {
  color: var(--ink);
  opacity: .65;
  transition: opacity .25s ease;
}

/* ─── 05  FULLSKÄRMSNENY ──────────────────────────────────────── */

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 12px clamp(16px, 4.5vw, 48px) clamp(20px, 4vw, 40px);
  transform: translateY(-100%);
  visibility: hidden;
  overflow-y: auto;
  transition: transform .45s var(--ease), visibility .45s;
}
.menu.open { transform: translateY(0); visibility: visible; }
.menu__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.menu__close {
  min-height: 44px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.menu__nav { margin-top: 8px; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(8px, 1.5vw, 14px) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 7.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}
.menu__nav a:hover { opacity: .5; }
.menu__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--soft);
  flex: 0 0 auto;
}
.menu__spacer { flex: 1; min-height: 20px; }

/* Kontaktuppgifterna i menyn: tydliga, klickbara och större än
   etiketterna i topbaren. */
.menu__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 16px;
}
.menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  transition: opacity .2s ease;
}
.menu__link:hover { opacity: .55; }

/* Logotypen i menyn: centrerad och lite mindre än förut. */
.menu__wordmark {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.menu__wordmark img {
  width: clamp(180px, 54vw, 360px);
  height: auto;
  display: block;
  background: transparent;
}

/* ─── 06  SEKTIONSSTRUKTUR ────────────────────────────────────── */

.screen {
  padding-block: clamp(30px, 7vw, 92px);
  border-bottom: 1px solid var(--line);
}
.screen:last-of-type { border-bottom: 0; }

/* Hörnmeta, används i varje sektion. */
.corners {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.corners > :last-child { text-align: right; }

/* Tvåkolumnsgrid: liten etikett + stycke. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 28px;
  margin-top: clamp(22px, 5vw, 48px);
}
.split .label { color: var(--soft); padding-top: 3px; }
.split .copy {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.55;
  font-weight: 300;
  max-width: 46ch;
  text-wrap: pretty;
}
.split .copy strong { font-weight: 500; }
/* Inline-länk i brödtext: tydlig, men inte en knapp. */
.copy a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.copy a:hover { text-decoration-thickness: 2px; }

/* Notis: det som alltid ingår. */
.note {
  margin-top: clamp(28px, 5vw, 52px);
  padding: 22px 24px;
  background: var(--cream);
  border-left: 3px solid var(--ink);
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  line-height: 1.65;
  max-width: 68ch;
}
.note .label {
  display: block;
  color: var(--soft);
  margin-bottom: 8px;
}

/* ─── 07  KORT, STEG, FLÖDE ────────────────────────────────────── */

/* ─── 08  BILDER ───────────────────────────────────────────────── */

/* Hero: ett redigerande uppslag.
   Porträttet är klippt ur sin bakgrund och lägger sig direkt på
   papperet — ingen ram, ingen ruta. På stor skärm överlappar det
   typens spalt: texten löper in i bildens tomma vänsterparti i
   stället för att stå bredvid ett block. */
.hero__wrap {
  container-type: inline-size;
  margin-top: clamp(4px, 1vw, 16px);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  /* Raderna ska inte sträckas ut över porträttets höjd. */
  align-content: start;
}
.hero__type { grid-row: 1; grid-column: 1; position: relative; z-index: 2; }
/* Handnoten är en egen cell. På stor skärm ligger den under
   rubriken, på mobil i marginalen bredvid porträttet. */
.hero__note { grid-row: 2; grid-column: 1; position: relative; z-index: 2; }
.hero__intro { grid-row: 3; grid-column: 1; position: relative; z-index: 2; margin-top: clamp(20px, 3.5vw, 42px); }

/* I hero står etiketten ovanför stycket. Då får brödtexten hela
   vänsterspalten och undviker porträttets utsträckta ben. */
.hero__intro .split { grid-template-columns: minmax(0, 1fr); gap: 10px; }

.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%;
  height: auto;
  background: transparent;
  transition: filter .45s ease;
}

/* Hero-media: porträttet lägger sig direkt på papperet — ingen ram,
   ingen ruta. Bilden har vit bakgrund, så den tonas ned mot papperet
   med darken (mörkare vinner): vitt blir då exakt --bg, medan
   porträttet ligger kvar orört — hår, skuggor och tänder odelade.
   isolation: isolate håller blandningen inom figuren, så typen
   bredvid aldrig påverkas. */
.hero__media {
  background: var(--bg);
  isolation: isolate;
}
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: darken;
  -webkit-mix-blend-mode: darken;
}

/* Bildtext: en magasincaption, fäst i bilden. */
.hero__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 16px;
  padding-top: 10px;
  /* Bilden blods ut i höger kant, men texten ska ligga innanför
     sidans marginal. */
  padding-right: var(--pad);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.hero__cap .dim { color: var(--soft); }

/* ─── 09  PORTFÖLJ ────────────────────────────────────────────── */

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: clamp(22px, 5vw, 44px);
}
/* Två i rad på mobil: där är antalet porträtt alltid jämnt, så varje
   rad fylls utan hjälp. */
.shot--duo { grid-column: span 1; }
/* Varje porträtt är en egen ruta med fast bildförhållande, så gittret
   aldrig hoppar när bilderna laddar. content-visibility gör att
   webbläsaren hoppar över bilder som inte syns — det är det som gör
   att flera hundra porträtt inte gör sidan tung att rulla. */
.shot {
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 300px 450px;
  scroll-margin-top: 96px;
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .45s ease;
}

/* Nya porträtt tonar in när de läggs till. */
@keyframes shotIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.shot--new { animation: shotIn .5s var(--ease) both; }

/* Visa fler. Knappen visas bara när JavaScript kan ladda mer. */
.more {
  margin-top: clamp(24px, 4vw, 40px);
  padding-top: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.more__head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, calc((100vw - 100px) / 17), 52px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.more__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(12px, 1.8vw, 20px);
}
.more .btn { display: none; }
.js .more .btn { display: inline-flex; }
.more .btn[hidden] { display: none; }

/* ─── 09b  BOKNING ─────────────────────────────────────────────── */

/* Fyra saker som löser sig. Ett rutnät av fyra kort: tal, rubrik,
   förklaring. Hårlinjer emellan, som resten av sidan. */
.points {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(22px, 5vw, 44px);
  border-top: 1px solid var(--line);
}
.point {
  padding-block: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
}
.point__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--soft);
  margin: 0 0 12px;
}
.point__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
}
.point__body {
  margin: 12px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
}
.point__body a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.point__body a:hover { text-decoration-thickness: 2px; }

/* ─── 10  PAKET ───────────────────────────────────────────────── */

.packages {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(22px, 5vw, 44px);
  border-top: 1px solid var(--line);
}
.package {
  padding-block: clamp(20px, 3.5vw, 30px);
  border-bottom: 1px solid var(--line);
}
.package__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 5.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-top: 10px;
  hyphens: manual;
}
/* Var fotograferingen sker. En liten rad under namnet, så att det
   går att jämföra paketen på en rad: studio, hos er, hos er. */
.package__where {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 10px;
}
.package__for {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--soft);
  margin-top: 10px;
  max-width: 34ch;
}
.package__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 4.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.package__from {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
  margin-right: 6px;
  vertical-align: middle;
}
.package__list {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.package__list li {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 300;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}
.package__list li::before {
  content: '—';
  color: var(--soft);
  margin-right: 8px;
}

/* Priskalkylen: en egen sida med detaljerad prisbild. Länken ska
   dra ögat, så den får ett eget band i samma storleksordning som
   "DET FINNS MER!" i portföljen. */
.calc {
  display: block;
  margin-top: clamp(26px, 5vw, 46px);
  padding-block: clamp(20px, 3.4vw, 34px);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.calc__head {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, calc((100vw - 100px) / 17), 52px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.calc__arrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1;
  transition: transform .35s var(--ease);
}
.calc:hover .calc__arrow,
.calc:focus-visible .calc__arrow { transform: translateX(8px); }
.calc__sub {
  display: block;
  margin-top: 12px;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.5;
  font-weight: 300;
  color: var(--soft);
  max-width: 52ch;
}

/* På mobil staplas paketen under varandra. Då lägger vi namnet och
   priset på samma rad, så att varje paket går att ta in på en blick,
   och tar bort linjerna mellan punkterna. Annars blir det en vägg av
   text utan tydliga avbrott. */
@media (max-width: 599px) {
  .package {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: baseline;
  }
  .package .num { grid-column: 1 / -1; }
  .package__name {
    grid-column: 1;
    grid-row: 2;
    margin-top: 8px;
  }
  .package__price {
    grid-column: 2;
    grid-row: 2;
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
    font-size: 21px;
  }
  .package__where { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .package__for { grid-column: 1 / -1; grid-row: 4; }
  .package__list { grid-column: 1 / -1; grid-row: 5; }
  .package__list li {
    border-bottom: 0;
    padding-block: 5px;
  }
}

/* ─── 11  KONTAKT OCH SIDFOT ───────────────────────────────────── */


/* Löftet under knapparna. */
.cta-note {
  margin-top: clamp(12px, 1.8vw, 18px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Kontakt: en ren kontaktdel. Mejlen och numret stora, så det går att
   se direkt vilka sätt man kan ta kontakt med mig. */
.contact {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  margin-top: clamp(26px, 5vw, 48px);
}
.contact__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 10px;
}
.contact__big {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.contact__big:hover { text-decoration: underline; text-underline-offset: 6px; }
.contact__where {
  font-size: 15px;
  font-weight: 300;
  color: var(--soft);
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
  margin-top: clamp(40px, 8vw, 90px);
}

/* ─── 12  KNAPPAR ─────────────────────────────────────────────── */

.btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: clamp(22px, 4vw, 34px);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--ghost {
  border-color: transparent;
  padding-inline: 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.btn--ghost:hover { background: transparent; color: var(--soft); }
/* Större knapp för kalltrop. */
.btn--bold {
  min-height: 56px;
  padding-inline: 38px;
  font-size: 17px;
}

/* ─── 13  REVEAL ──────────────────────────────────────────────── */

/* Rörelse förtydligar. Elementet lyfter sig till sitt läge.
   Döljs bara om JavaScript finns — annars ska innehållet vara synligt. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ─── 14  RESPONSIVT ──────────────────────────────────────────── */

/* Hero på mobil: rubriken får en egen rad i full bredd, porträttet
   står bredvid den i högerled och handnoten ligger i vänstermarginalen,
   i botten av porträttets höjd.
   På mobil kan rubriken inte överlappa porträttet: axeln begränsar
   radbredden till 0,52 av bildens bredd, vilket ger en rubrik på
   18–27 px. Med rubriken i en egen rad blir den 26–40 px i stället
   och sidan får samma hierarki som på stor skärm. */
@media (max-width: 599px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 60cqw;
    grid-template-rows: auto auto auto;
    row-gap: clamp(4px, 1.4vw, 12px);
  }
  .hero__type {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .hero__note {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
    font-size: clamp(14px, 4vw, 20px);
  }
  .hero__figure {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    width: 60cqw;
    margin: 0 calc(-1 * var(--pad)) 0 0;
    z-index: 1;
  }
  /* Rubriken fyller spaltens hela bredd. 10.75em = den längsta raden,
     "PORTRÄTTFOTOGRAF". */
  .hero__type h1.word {
    font-size: clamp(23px, 8.2vw, 44px);
  }
  /* Bildtexten ligger under porträttet. Namnet står redan i topbaren. */
  .hero__cap {
    margin-top: 12px;
    padding-top: 8px;
    font-size: 9px;
    letter-spacing: .1em;
  }
  .hero__cap > span:first-child { display: none; }
  /* Ortnamnet står redan i metaraden överst. Här räcker platsen
     bara för årtalet. */
  .hero__cap .cap-where { display: none; }
  .hero__cap .dim { margin-left: auto; }
  .hero__intro {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: clamp(10px, 2.6vw, 22px);
  }
}

/* Surfplatta: samma uppslag som på mobil, men brödtexten får en egen
   spalt bredvid porträttet. Då fyller typen hela sidan och det blir
   inget tomrum under rubriken. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 50cqw;
    grid-template-rows: auto auto auto;
    row-gap: clamp(12px, 2.4vw, 22px);
  }
  .hero__type {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .hero__note {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    font-size: clamp(16px, 2.6vw, 22px);
  }
  .hero__intro {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
  }
  .hero__figure {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    justify-self: end;
    width: 50cqw;
    margin: 0 calc(-1 * var(--pad)) 0 0;
    z-index: 1;
  }
  .hero__type h1.word {
    font-size: clamp(30px, 8.2vw, 58px);
  }
  .hero__cap {
    margin-top: 12px;
    padding-top: 8px;
    font-size: 9px;
    letter-spacing: .1em;
  }
  .hero__cap > span:first-child { display: none; }
  .hero__cap .cap-where { display: none; }
  .hero__cap .dim { margin-left: auto; }
}

@media (min-width: 760px) {
  .split { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
  .contact { grid-template-columns: auto auto; column-gap: clamp(28px, 4vw, 56px); }
  .contact__where { grid-column: 1 / -1; }
  /* Stripet har sex spår i botten så att tre porträtt fyller en rad
     (två spår var). Det gör det också möjligt att ge de två sista
     porträtten ett halvt spann var, så att även sista raden blir
     full i stället för att lämna en tom plats. */
  .strip { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .shot { grid-column: span 2; }
  .shot--duo { grid-column: span 3; }
  /* En typografisk ruta bredvid ett sista porträtt. */
  .shot--fill {
    grid-column: span 3;
    aspect-ratio: auto;
    align-self: stretch;
    background: var(--cream);
    display: flex;
    align-items: center;
    padding: clamp(18px, 2.4vw, 30px);
  }
  .shot--fill .shot__fill {
    display: grid;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(17px, 1.8vw, 24px);
    line-height: 1.2;
    letter-spacing: -.01em;
  }
  .shot--fill .shot__fill a {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

@media (min-width: 900px) {
  /* HERO: uppslag på stor skärm.
     Porträttet blods ut i höger kant och ligger bakom typen. Eftersom
     bilden är klippt ur sin bakgrund kan texten gå in i den tomma
     vänsterdelen utan att krocka med ansiktet.
     Rubriken skalas efter spaltens bredd: 10.75em = den längsta raden,
     "PORTRÄTTFOTOGRAF". */
  .hero__grid {
    /* Uppslagets höjd sätts av porträttet. */
    min-height: calc(94.7cqw + 76px);
  }
  .hero__figure {
    position: absolute;
    top: 11cqw;
    right: calc(-1 * var(--pad));
    width: 78cqw;
    z-index: 1;
  }
  .hero__type h1.word {
    font-size: clamp(30px, calc(6.3cqw + 1px), 118px);
  }
  .packages { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 3.4vw, 48px); }
  .points { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 3.4vw, 48px); }
}

/* Mellan 900 och 1100 är porträttet för stort för att brödtexten ska
   få gå in i bildens tomrum: där når skon in under texten. Därför blir
   porträttet mindre och brödtexten får en egen smal spalt — magasins
   spalt bredvid fotografiet. (Vid 1100 px och uppåt finns luft igen.) */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero__grid {
    min-height: calc(79.7cqw + 76px);
  }
  .hero__figure {
    width: 64cqw;
  }
  .hero__intro {
    max-width: 34ch;
  }
}

@media (min-width: 1100px) {
  /* Uppslaget får mer luft mellan rubrik och porträtt. */
  .hero__intro { max-width: 62ch; }
}

/* På mobil går topbarens sektionsindikator inte in. Den ligger i menyn. */
@media (max-width: 759px) {
  .top__now { display: none; }
}

/* Rörelse förtydligar. Aldrig information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}