/* ===== Design tokens =====
   See BRAND.md for the reasoning behind these. Surfaces and accents keep the
   names they already had; the text, type and spacing layers are new. */
:root {
  /* Surfaces */
  --black: #0d0d0d;
  --black-soft: #161616;
  --black-card: #1c1c1c;

  /* Accent */
  --gold: #c9a24b;
  --gold-light: #e3c879;
  --gold-deep: #a8842f;

  --white: #ffffff;
  --cream: #f7f4ee;
  --grey: #9a9a9a;

  /* Text roles. These replace the #ddd / #ccc / #cfcfcf greys that were
     previously written straight into rules. --text-primary is a warm
     off-white rather than pure white: #fff on near-black haloes slightly,
     and 17.7:1 is already far past what the standard asks for. */
  --text-primary:   #f5f4f1;   /* 17.67:1 on --black */
  --text-secondary: #c4c2bd;   /* 10.92:1 - body copy, lists */
  --text-muted:     #9a9a9a;   /*  6.91:1 - captions, labels */
  --text-subtle:    #8f8d88;   /*  5.86:1 - placeholders, copyright */
  --text-accent:    #e3c879;   /* 11.85:1 - emphasis on dark */

  --line: rgba(201, 162, 75, .25);
  --border-subtle: rgba(255, 255, 255, .07);
  --surface-gold-wash: rgba(201, 162, 75, .12);

  /* Type roles (BRAND.md section 4). Each role is a size and a line height,
     and every line height is a multiple of 8, so any block of text ends on
     the 8px grid. The values here are for phones; the larger steps for
     tablets (768px+) and computers (1024px+) are set near the end of this
     file. The sizes step rather than slide with the window width, because a
     sliding size lands between grid lines. */
  --fs-display: 32px;  --lh-display: 40px;   /* hero title - 40/48 from 360px, see "Phones" below */
  --fs-h1: 32px;       --lh-h1: 40px;        /* section and page titles */
  --fs-h2: 24px;       --lh-h2: 32px;        /* card, step and form titles */
  --fs-lead: 18px;     --lh-lead: 32px;      /* the line under a hero or page title */
  --fs-body: 18px;     --lh-body: 32px;      /* paragraphs */
  --fs-small: 16px;    --lh-small: 24px;     /* card text, lists, form fields */
  --fs-caption: 14px;  --lh-caption: 24px;   /* labels, captions, footer */
  --fs-eyebrow: 12px;  --lh-eyebrow: 16px;   /* the small gold label above a title */
  --fs-ui: 16px;       --lh-ui: 24px;        /* buttons, menu, filters, fields - one line in a 48px control */

  --tracking-display: -0.01em;   /* Latin only - large serif titles */
  --tracking-eyebrow: 0.2em;     /* Latin only - the capitals of the eyebrow */

  /* Spacing: an 8px grid. The number in each name is how many 8px steps it
     is, so --space-3 is 3 x 8 = 24px. The 4px half step is only for the
     insides of small parts, such as the gap between an icon and its label.
     1px borders and outlines are drawn inside the grid and don't count. */
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* Layout spacing that grows with the screen (steps at the end of the file). */
  --section-py: var(--space-8);   /* top and bottom of a section: 64 / 80 / 96 */
  --gutter: var(--space-2);       /* page side margin: 16 / 32 / 48 */
  --block-gap: var(--space-6);    /* title block to the content below it: 48 / 64 */
  --card-pad: var(--space-3);     /* inside a card: 24 / 32 */
  --grid-gap: var(--space-3);     /* between cards: 24 / 32 */
  --container-max: 1280px;        /* the widest the content ever gets */

  /* Photos: one shape for every photo in the page - the gallery tiles and the
     About photo alike, whatever the shape of the file. A portrait photo is
     cropped to fit (see `focus` in script.js to choose which part stays in
     view); opening a gallery photo still shows the whole picture. The hero
     photo is a backdrop that fills the screen, so it is the one exception. */
  --photo-ratio: 4 / 3;

  /* Shape */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .25);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, .3);
  --shadow: 0 20px 50px rgba(0, 0, 0, .35);
  --shadow-gold: 0 12px 30px rgba(201, 162, 75, .3);

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Fonts and weights, Arabic values. --font-ui is for buttons and the
     eyebrow label; in Arabic those stay in El Messiri as before. */
  --font-head: 'El Messiri', serif;
  --font-body: 'Tajawal', sans-serif;
  --font-ui: 'El Messiri', serif;
  --fw-display: 700;   /* hero, section and page titles */
  --fw-heading: 700;   /* card, step and form titles */
  --fw-ui: 600;        /* buttons */
}

/* The fonts follow the language. Only the active language's fonts are
   downloaded (see the loader in each page's <head>), so these must always
   name fonts that are actually loaded - a font that isn't falls back to the
   browser's default serif. Swedish and English: Bodoni Moda for titles and
   numerals, Jost for everything else, including buttons and the eyebrow. */
[dir="ltr"] {
  /* El Messiri only draws Arabic letters inside a Latin title - the word
     "العربية" in the trust strip - so it matches the Arabic pages instead of
     falling back to whatever Arabic font the device has. Only its Arabic file
     is fetched, and only on a page that has such a word. */
  --font-head: 'Bodoni Moda', 'El Messiri', serif;
  --font-body: 'Jost', sans-serif;
  --font-ui: 'Jost', sans-serif;
  --fw-display: 500;
  --fw-heading: 600;
  --fw-ui: 500;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--black);
  color: var(--text-primary);
  overflow-x: hidden;
  width: 100%;
}
/* No single word left alone on the last line of a paragraph. */
p { text-wrap: pretty; }
img, video, iframe, svg { max-width: 100%; display: block; }
/* Images carry width/height attributes so the browser can reserve their space
   before they arrive. Without height:auto the height attribute wins while
   max-width shrinks the width, and the photo is squashed out of shape. */
img { height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Content never runs wider than --container-max, and never closer to the
   screen edge than --gutter. */
.container {
  width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter));
  padding-inline: var(--gutter); margin-inline: auto;
}
.section { padding: var(--section-py) 0; }

/* ===== Icons =====
   Drawn rather than typed. Emoji are rendered by the operating system, so the
   same character was a different picture on Windows, macOS, Android and iOS -
   and none of them could be made to match the brand's gold. These inherit
   colour from their container and size from its font-size. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;      /* keeps 1.5px strokes from clipping at the edge */
}

/* ===== Accessibility utilities ===== */

/* Visible only to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link: off-screen until focused, then drops into view. */
.skip-link {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 300;
  transform: translateY(-120%);
  background: var(--gold); color: var(--black);
  padding: var(--space-2) var(--space-3); border-end-end-radius: var(--radius);
  font-weight: 600; transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* A single visible focus indicator for the whole site. :focus-visible means
   keyboard users get the ring and mouse users don't. Gold on the dark
   background measures 11.85:1 - far above the 3:1 the standard asks for. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Honour the system "reduce motion" setting. The hero's infinite zoom and
   the scroll reveals were previously exempt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Revealed content must still end up visible, never stuck at opacity 0. */
  .reveal { opacity: 1 !important; transform: none !important; }
}

h1, h2, h3 {
  font-family: var(--font-head); font-weight: var(--fw-display);
  text-wrap: balance;          /* two-line titles split evenly */
  overflow-wrap: break-word;   /* a long word never runs off the screen */
}
h3 { font-weight: var(--fw-heading); }
[dir="ltr"] h1, [dir="ltr"] h2 { letter-spacing: var(--tracking-display); }

/* ===== Type roles =====
   Every piece of text on the site uses one of these roles. To change how a
   role looks, change its tokens at the top of the file - not these rules.
   Paragraphs need nothing: they take the body role from <body>. */
.hero-title { font-size: var(--fs-display); line-height: var(--lh-display); }
.section-head h2, .about-text h2, .contact-info h2, .webdesign-text h2, .page-title {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
}
.service-card h3, .step h3, .booking-form h3, .legal h2, .g-title, .lb-caption, .stat strong {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
}
.hero-sub, .page-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }
.service-card p, .step p, .webdesign-features li, .footer-links a, .stat > span,
.contact-list a, .contact-list .ci-value {
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.g-cat, .field label, .contact-list div span, .form-privacy, .form-fallback,
.copyright, .pp-updated, .about-badge span {
  font-size: var(--fs-caption); line-height: var(--lh-caption);
}
/* Long Swedish compounds ("Förlovningsfotografering") may break with a
   hyphen on phones rather than overflow; on wider screens they fit whole. */
@media (max-width: 767px) {
  h1, h2, h3 { hyphens: auto; }
}

/* ===== Buttons ===== */
/* 48px tall (40px for .btn-sm), whatever the label. min-height includes the
   1px border, so the grid holds for outlined buttons too. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 48px;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-ui);
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s;
}
.btn-sm { min-height: 40px; padding: var(--space-half) var(--space-3); font-size: var(--fs-caption); }
.btn-block { width: 100%; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: var(--black);
  box-shadow: 0 12px 30px rgba(201, 162, 75, .3);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(201, 162, 75, .45); }
.btn-outline { border-color: var(--white); color: var(--white); background: transparent; }
.btn-outline:hover { background: var(--white); color: var(--black); transform: translateY(-3px); }
.btn-dark { background: var(--black); color: var(--gold-light); border-color: var(--gold); }
.btn-dark:hover { background: var(--gold); color: var(--black); transform: translateY(-3px); }

/* ===== Navbar ===== */
/* 96px tall at the top of the page, 64px once scrolled: 48px controls plus
   24px or 8px above and below. */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: var(--space-3) 0;
  transition: padding .4s var(--ease), background .4s, box-shadow .4s;
}
.navbar.scrolled {
  padding: var(--space-1) 0;
  background: rgba(13, 13, 13, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
/* The wordmark keeps its own fluid size - the logo is not part of the type
   scale and stays exactly as it was. */
.logo { display: flex; align-items: center; gap: var(--space-1); font-size: clamp(.85rem, 4.5vw, 1.5rem); flex-shrink: 0; min-width: 0; }
.logo-text {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; letter-spacing: 4px;
  background: linear-gradient(135deg, var(--white) 0%, var(--gold-light) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.logo-suffix { display: block; font-size: .4em; letter-spacing: 3px; margin-top: 2px; }
.nav-links {
  position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 320px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3); background: rgba(15,15,15,.98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateX(100%); box-shadow: -10px 0 40px rgba(0,0,0,.5);
  z-index: 101; padding: 0 var(--space-3);
  /* Sliding the panel off-screen hid it visually but left its links in the
     keyboard tab order, so Tab sent focus to invisible links beyond the edge
     of the screen. visibility:hidden takes them out of the tab order; the
     delay lets the slide-out animation finish before it applies. */
  visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.nav-links.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .4s var(--ease), visibility 0s;
}
.nav-links a { font-weight: 500; font-size: var(--fs-ui); line-height: var(--lh-ui); position: relative; transition: color .3s; }
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; bottom: calc(-1 * var(--space-1)); inset-inline-start: 0;
  width: 0; height: 2px; background: var(--gold); transition: width .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover { color: var(--gold-light); }
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: var(--black); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-weight: 600;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201, 162, 75, .4); }
.nav-actions { display: flex; align-items: center; gap: var(--space-half); }

/* The buttons fill the pill, so the switch is 48px tall like every other
   control in the header. */
.lang-switch {
  display: flex; background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--line);   /* an outline that adds no height */
  border-radius: var(--radius-pill); flex-shrink: 0;
}
.lang-btn {
  background: none; border: 0; cursor: pointer; color: var(--grey); font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .5px; padding: 0 var(--space-1); border-radius: var(--radius-pill);
  transition: all .3s var(--ease);
  /* Was 27x29px - the smallest control on the site, and one of the most
     useful. 48px is a comfortable touch target on every phone. */
  min-width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* The narrowest phones can't fit three 48px buttons beside the logo, so
   they narrow to 40px - still well above the 24px minimum - and stay 48px tall. */
@media (max-width: 359px) {
  .lang-btn { min-width: 40px; }
}
.lang-btn:hover { color: var(--gold-light); }
.lang-btn.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: var(--black);
}

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer;
  padding: 0; z-index: 102; position: relative; flex-shrink: 0;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;   /* touch target */
}
.nav-toggle span { width: 26px; height: 2px; background: var(--white); transition: .3s; }

/* ===== Hero ===== */
.hero {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: 100vh;
  /* svh = the viewport height *with* the mobile browser's toolbars showing.
     Plain 100vh is taller than the visible area on iOS Safari and Android
     Chrome, which pushed the booking buttons below the fold on first paint. */
  min-height: 100svh;
  /* Keeps the text clear of the fixed navbar (96px) above and the scroll
     arrow below. The two are equal, so on most screens the text stays
     centred exactly as before; on short ones (a 320px phone, a phone held
     sideways) the hero grows instead of sliding the title under the logo. */
  padding-block: var(--space-12);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
/* Darkest behind the headline, lightest over the couple. The first colour sits
   where the gradient starts: 255deg runs from the right edge (Arabic, text on
   the right); [dir="ltr"] below uses 105deg, from the left. Until October 2026
   the two were swapped - the stock photo was dark on the left anyway, so it
   only showed once the real photo went in. */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(255deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.6) 45%, rgba(13,13,13,.25) 100%);
}
/* 720px of text; the container's side padding is added on top. */
.hero-content { position: relative; z-index: 2; max-width: calc(720px + 2 * var(--gutter)); }
.hero-title { margin-bottom: var(--space-3); }
.hero-title .grad {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Swedish and English mark the highlighted words with the title font's
   italic, in gold. Arabic has no italic, so it keeps the gold gradient. */
[dir="ltr"] .hero-title .grad {
  font-style: italic; color: var(--gold-light);
  background: none; -webkit-text-fill-color: currentColor;
}
.hero-sub { color: var(--text-secondary); max-width: 560px; margin-bottom: var(--space-4); }
.hero-actions, .webdesign-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hero-actions .btn, .webdesign-actions .btn { flex: 1 1 auto; text-align: center; }
.scroll-down {
  position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); z-index: 2;
  width: 24px; height: 40px; border: 2px solid rgba(255,255,255,.5); border-radius: 12px;
  display: flex; justify-content: center; padding-top: var(--space-1);
}
.scroll-down span { width: 4px; height: 8px; background: var(--gold-light); border-radius: 4px; animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(-6px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ===== Stats ===== */
.stats { background: var(--black-soft); padding: var(--block-gap) 0; border-block: 1px solid var(--line); }
/* Three facts, each exactly two lines: a gold title over a grey caption.
   All three titles - "12+" included - share one size (the card-title role)
   and one colour, and each fits on one line. They stand side by side only
   from 1024px, where a column is wide enough for the longest title
   ("Svenska · English · العربية", 266px); below that they stack. */
.stats-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); text-align: center; }
.stat strong {
  display: block; font-family: var(--font-head); font-weight: var(--fw-display);
  color: var(--gold-light);
}
/* The caption only. As ".stat span" this also caught the language names
   inside the languages title (they are spans, for their lang attribute), and
   pushed "العربية" onto a line of its own in small grey type. */
.stat > span { color: var(--text-muted); margin-top: var(--space-1); display: block; }
/* Bodoni's plus sign is drawn in hairlines, so beside the heavy strokes of
   "12" it read as grey. The text font's plus has even, solid strokes. */
.stat-plus { font-family: var(--font-body); font-weight: 500; line-height: 1; }
/* line-height: 1 keeps the second font from stretching the line: in Arabic
   it made the "12+" title 42px tall instead of 40 - off the grid, and 2px
   out of line with the titles beside it. */

/* ===== How it works ===== */
.steps-section { background: var(--black-soft); }
/* <ol> for the semantics - these are four steps in order - but the visible
   numbers are the gold discs below, so the native markers are hidden. */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); list-style: none; }
.step {
  position: relative;
  background: var(--black-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: var(--space-4) var(--space-3);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.step:hover { border-color: var(--gold); transform: translateY(-4px); }
.step-num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  margin-bottom: var(--space-2);
  font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-lead); line-height: var(--lh-ui);
  color: var(--gold-light);
  background: var(--surface-gold-wash); border: 1px solid var(--line);
}
.step h3 { margin-bottom: var(--space-1); color: var(--text-primary); }
.step p { color: var(--text-muted); }

/* ===== Section heads ===== */
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--block-gap); }
/* The eyebrow: the small gold label above a section title. */
.section-tag {
  display: inline-block; color: var(--gold); font-weight: 600;
  font-family: var(--font-ui); margin-bottom: var(--space-2);
  font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  /* No letter-spacing or uppercase here: this is the default that Arabic
     gets. Arabic is cursive - its letters join - so spacing them apart
     breaks the letterforms, and it has no upper case to transform. Both are
     applied under [dir="ltr"] below instead. */
}
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p { color: var(--grey); }

/* ===== Gallery ===== */
.gallery-section { background: var(--black); }
.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.filter {
  display: inline-flex; align-items: center; min-height: 40px;
  background: transparent; color: var(--grey); border: 1px solid var(--line);
  padding: 0 var(--space-3); border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-body);
  font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; transition: all .3s var(--ease);
}
.filter[hidden] { display: none; }   /* a category with no photos yet - see script.js */
.filter:hover { color: var(--gold-light); border-color: var(--gold); }
.filter.active { background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: var(--black); border-color: transparent; }
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
/* Every tile the same shape - no tall ones between wide ones. */
.g-item {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: var(--photo-ratio); background: var(--black-card);
}

/* The whole tile is a button so it can be reached and opened by keyboard. */
.g-btn {
  display: block; position: relative; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  font: inherit; text-align: inherit;
}
/* The card clips its contents, so the focus ring is drawn inside the edge
   rather than outside it, where it would be invisible. */
.g-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: -5px; border-radius: var(--radius); }

.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.g-btn:hover img, .g-btn:focus-visible img { transform: scale(1.1); }
.g-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-3); background: linear-gradient(to top, rgba(13,13,13,.85), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.g-btn:hover .g-overlay, .g-btn:focus-visible .g-overlay { opacity: 1; }
.g-title { display: block; font-family: var(--font-head); font-weight: var(--fw-heading); color: var(--white); transform: translateY(12px); transition: transform .4s var(--ease); }
.g-cat { display: block; color: var(--gold-light); transform: translateY(12px); transition: transform .4s var(--ease) .05s; }
.g-btn:hover .g-title, .g-btn:hover .g-cat,
.g-btn:focus-visible .g-title, .g-btn:focus-visible .g-cat { transform: translateY(0); }
.g-zoom {
  position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(201,162,75,.9); color: var(--black); display: grid; place-items: center;
  font-size: 18px; opacity: 0; transform: scale(.6); transition: all .4s var(--ease);
}
.g-btn:hover .g-zoom, .g-btn:focus-visible .g-zoom { opacity: 1; transform: scale(1); }

/* ===== Services ===== */
.services-section { background: var(--black-soft); }
/* Every grid column is minmax(0, 1fr) rather than plain 1fr: a plain 1fr
   column refuses to get narrower than its longest word, and at 320px
   "Förlovningsfotografering" pushed these cards off the edge of the screen.
   Now the word wraps inside its card instead. */
.services-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
.service-card {
  background: var(--black-card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius);
  padding: calc(var(--card-pad) + var(--space-1)) var(--card-pad);   /* 32/24, then 40/32 */
  text-align: center; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.service-card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: var(--shadow); }
.service-icon {
  width: 80px; height: 80px; margin: 0 auto var(--space-3); border-radius: 50%;
  font-size: 32px; color: var(--gold-light);
  display: grid; place-items: center; background: var(--surface-gold-wash); border: 1px solid var(--line);
}
.service-card h3 { margin-bottom: var(--space-1); color: var(--gold-light); }
.service-card p { color: var(--grey); }
.service-card--cta {
  background: linear-gradient(145deg, rgba(201,162,75,.16), rgba(201,162,75,.04));
  border-color: var(--gold); display: flex; flex-direction: column; justify-content: center;
}
/* Title to text as in every card (8px), then a clear step down to the button. */
.service-card--cta .btn { margin-top: var(--space-3); }
.service-card--cta h3 { color: var(--white); }

/* ===== Standalone page head (webbdesign.html) ===== */
/* No full-height hero here, so this clears the fixed navbar and gives the
   page a title block of its own. */
.page-head {
  padding-top: var(--space-16);    /* 96px navbar + 32px; 160px from 1024px */
  padding-bottom: var(--space-2);
  text-align: center;
}
.page-title { max-width: 24ch; margin-inline: auto; }
.page-lead {
  color: var(--grey);
  max-width: 62ch; margin: var(--space-3) auto 0;
}
/* Current page in the nav, for people who navigate by keyboard or reading
   order rather than by looking at the highlight. */
.nav-links a[aria-current="page"] { color: var(--gold-light); }
.nav-links a[aria-current="page"]:not(.nav-cta)::after { width: 100%; }

/* ===== Privacy policy page (integritet.html) ===== */
.pp-updated { margin-top: var(--space-2); color: var(--text-subtle); }
.legal-section { padding-top: var(--space-4); }
/* A readable measure for long-form text: about 65 characters a line. */
.legal { max-width: calc(65ch + 2 * var(--gutter)); margin-inline: auto; }
/* A heading sits closer to the text it introduces than to the text above it. */
.legal h2 {
  color: var(--gold-light);
  margin: var(--space-6) 0 var(--space-2);
}
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--text-secondary); }
/* A phone number split across two lines is easy to misdial. */
.legal a[href^="tel:"] { white-space: nowrap; }

/* Back link at the foot of a standalone page - shared by webbdesign.html
   and integritet.html. */
.wd-back-wrap { padding-bottom: var(--section-py); text-align: center; }
.wd-back {
  display: inline-block; color: var(--gold-light); font-weight: 500;
  padding: var(--space-1) var(--space-half); transition: color .3s;   /* 8 + 32px line + 8 = 48px tall */
}
/* "Back" points left in Swedish and English and right in Arabic, so the arrow
   lives in CSS rather than in the translated string. */
.wd-back::before { content: '\2190'; margin-inline-end: var(--space-1); }
[dir="rtl"] .wd-back::before { content: '\2192'; }
.wd-back:hover { color: var(--white); }

/* ===== Web Design ===== */
.webdesign-section { background: var(--black); }
.webdesign-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.webdesign-text h2 { margin-bottom: var(--space-3); }
.webdesign-text > p { color: var(--grey); max-width: 560px; }

.webdesign-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin: var(--space-4) 0; }
.webdesign-features li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-weight: 500; }
.webdesign-features li:nth-child(1) { transition-delay: .04s; }
.webdesign-features li:nth-child(2) { transition-delay: .09s; }
.webdesign-features li:nth-child(3) { transition-delay: .14s; }
.webdesign-features li:nth-child(4) { transition-delay: .19s; }
.webdesign-features li:nth-child(5) { transition-delay: .24s; }
.webdesign-features li:nth-child(6) { transition-delay: .29s; }
.wf-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; color: var(--gold-light);
  background: var(--surface-gold-wash); border: 1px solid var(--line);
}

.webdesign-media svg { width: 100%; height: auto; filter: drop-shadow(0 20px 45px rgba(0,0,0,.45)); }
.wd-phone { animation: wdFloat 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes wdFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .wd-phone { animation: none; } }

/* ===== About ===== */
.about-section { background: var(--black); }
.about-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.about-media { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
.about-media img {
  width: 100%; aspect-ratio: var(--photo-ratio); object-fit: cover;   /* the same shape as the gallery */
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.about-badge {
  position: absolute; bottom: calc(-1 * var(--space-3)); left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: var(--black); padding: var(--space-2) var(--space-3); border-radius: var(--radius); text-align: center; box-shadow: var(--shadow);
  white-space: nowrap;
}
.about-badge strong { display: block; font-family: var(--font-head); font-weight: var(--fw-display); font-size: 32px; line-height: 32px; }
.about-badge span { font-weight: 600; }
.about-text h2 { margin-bottom: var(--space-3); }
.about-text p { color: var(--text-secondary); margin-bottom: var(--space-3); }
.about-text strong { color: var(--gold-light); }
.about-list { margin: var(--space-3) 0 var(--space-4); display: grid; gap: var(--space-1); }
.about-list li { position: relative; padding-inline-start: var(--space-4); color: var(--text-secondary); }
/* Drawn as a rotated square rather than the ✦ character, which falls back to
   a missing-glyph box in fonts that don't carry it. */
.about-list li::before {
  content: ''; position: absolute; inset-inline-start: 1px; top: .72em;
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
}

/* ===== Testimonials =====
   The section markup was removed in Batch 4a - its three quotes, names and
   faces were all invented. These styles are kept deliberately so the
   section can be rebuilt as soon as there are genuine reviews to show. */
.testimonials-section { background: var(--black-soft); }
.testimonials-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
.testimonial {
  background: var(--black-card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius);
  padding: calc(var(--card-pad) + var(--space-1)) var(--card-pad); transition: transform .4s var(--ease), border-color .4s;
}
.testimonial:hover { transform: translateY(-6px); border-color: var(--gold); }
.stars { color: var(--gold); letter-spacing: 3px; margin-bottom: var(--space-2); }
.testimonial blockquote { color: var(--text-secondary); margin-bottom: var(--space-3); }
.testimonial figcaption { display: flex; align-items: center; gap: var(--space-2); }
.testimonial figcaption img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); }
.testimonial figcaption span {
  display: flex; flex-direction: column; color: var(--grey);
  font-size: var(--fs-caption); line-height: var(--lh-caption);
}
.testimonial figcaption strong { color: var(--white); font-family: var(--font-head); font-size: var(--fs-small); }
.testimonial figcaption em { font-style: normal; }

/* ===== Contact ===== */
.contact-section { background: var(--black); }
.contact-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.contact-info h2 { margin-bottom: var(--space-3); }
.contact-info > p { color: var(--grey); margin-bottom: var(--space-4); }
.contact-list { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.contact-list li { display: flex; align-items: center; gap: var(--space-2); }
/* 48px circle beside a 24px label over a 24px value - the pair is exactly
   as tall as the icon. */
.ci-icon {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; color: var(--gold-light);
  background: var(--surface-gold-wash); border: 1px solid var(--line);
}
/* Scoped to the label span inside the text column. As `.contact-list span`
   this also matched .ci-icon - a plain <span> - and shrank the icon circles'
   font-size to 14px, which had been quietly undersizing them all along. */
.contact-list div span { color: var(--text-muted); display: block; }
/* A contact line that isn't a link (the service area) - reads like the links. */
.contact-list .ci-value { color: var(--text-primary); font-weight: 500; }
/* inline-block with a 24px line: the link is a full 24px tap target */
.contact-list a { color: var(--white); font-weight: 500; transition: color .3s; display: inline-block; }
.contact-list a:hover { color: var(--gold-light); }
.socials { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--grey); transition: all .3s var(--ease);
}
.social-icon svg { width: 20px; height: 20px; }
.social-icon:hover { background: var(--gold); color: var(--black); border-color: var(--gold); transform: translateY(-2px); }

.booking-form {
  background: var(--black-card); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius);
  padding: var(--card-pad); box-shadow: var(--shadow); max-width: 100%;
}
.booking-form h3 { margin-bottom: var(--space-3); color: var(--gold-light); }
.field { margin-bottom: var(--space-3); }
/* Side by side from 768px. Stacked, the fields' own margins space them, so
   the row adds no gap of its own on top. */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-3); }
.field label { display: block; margin-bottom: var(--space-1); color: var(--text-secondary); }
/* 48px tall, like the buttons. 16px text also stops iPhones zooming in. */
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; min-height: 48px; padding: var(--space-1) var(--space-2);
  background: var(--black-soft); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); color: var(--white); font-family: var(--font-body);
  font-size: var(--fs-small); line-height: var(--lh-ui); transition: border-color .3s;
}
/* Border change alone is too subtle to serve as a focus indicator, so the
   site-wide focus ring above is left in place rather than cancelled. */
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-subtle); opacity: 1; }
.field textarea { resize: vertical; }
/* Two ways to send, one of them the main one: the gold email button, then
   "or send via WhatsApp" as a line of text under it. */
.form-actions { display: grid; gap: var(--space-1); }

/* .btn already lays the icon out beside the label, 8px apart. */
.form-submit .icon { font-size: 20px; }
.form-submit:disabled { opacity: .55; cursor: progress; transform: none; }

/* The WhatsApp alternative. The link is a real submit button styled as a
   link; the line is 48px tall so it is still an easy tap. In Arabic the
   words simply flow the other way. */
.form-alt {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-1); min-height: 48px;
  color: var(--text-muted); font-size: var(--fs-ui); line-height: var(--lh-ui);
}
.form-alt-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 48px; padding: 0 var(--space-half);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--gold-light);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .3s;
}
.form-alt-link:hover { color: var(--text-primary); }
.form-alt-link .icon { font-size: 20px; }
.form-alt-link:disabled { opacity: .55; cursor: progress; }

/* The spam trap: out of the layout and invisible. It is already hidden from
   screen readers and skipped by Tab in the markup. */
.hp-field {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none;
}

/* What happens to the visitor's details - required when a form collects
   personal data, and short enough that people actually read it. */
.form-privacy {
  margin-top: var(--space-2);
  color: var(--text-subtle);
  text-align: center;
}

/* Links inside running text: the privacy note and the privacy page. */
.form-privacy a, .legal a {
  color: var(--gold-light);
  text-decoration: underline; text-underline-offset: 3px;
  padding-block: var(--space-half);   /* lifts the tap area to 24px+ without moving the text */
}
.form-privacy a:hover, .legal a:hover { color: var(--text-primary); }

/* The live region is always in the page (so screen readers announce every
   change) but only draws its box while a message is showing. */
.form-status { margin-top: var(--space-2); }
.form-status[data-state] {
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-gold-wash);
}
.form-note { color: var(--gold-light); text-align: center; font-weight: 600; }
.form-fail-wa { margin-top: var(--space-2); }
.form-fallback {
  display: block; margin-top: var(--space-1); text-align: center;
  color: var(--text-secondary); text-decoration: underline;
}
.form-fallback:hover { color: var(--gold-light); }

/* ===== Footer ===== */
.footer { background: var(--black-soft); padding: var(--space-8) 0 var(--space-4); border-top: 1px solid var(--line); }
.footer-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.footer-logo { font-size: clamp(1.2rem, 4vw, 1.7rem); }
.footer-links { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--text-secondary); transition: color .3s; }
.footer-links a:hover { color: var(--gold-light); }
.copyright { color: var(--text-subtle); margin-top: var(--space-1); }
/* "© 2026 ELEGANTMEDIA." and "All rights reserved." each stay whole: the line
   is one line wherever it fits, and on a narrow phone it can only break
   between the two, never inside either. */
.copyright > span { white-space: nowrap; }

/* ===== Lightbox ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(8,8,8,.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: 88vw; max-height: 82vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-close, .lb-nav {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: var(--white); cursor: pointer; transition: all .3s var(--ease); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lb-close { top: var(--space-3); inset-inline-end: var(--space-3); width: 48px; height: 48px; border-radius: 50%; font-size: 24px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; font-size: 32px; line-height: 1; }
.lb-prev { inset-inline-start: var(--space-3); }
.lb-next { inset-inline-end: var(--space-3); }
.lb-close:hover, .lb-nav:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.lb-caption { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); color: var(--gold-light); font-family: var(--font-head); font-weight: var(--fw-heading); }

/* ===== LTR (English / Swedish) typography & direction =====
   Fonts, weights and line heights come from the tokens at the top; what is
   left here is what only Latin script gets. */
/* Latin-only typographic treatments. Arabic never receives letter-spacing:
   previously .section-tag gave it 3px - MORE than the 2px Latin got - which
   pulled joined letterforms apart on every section heading on the site. */
[dir="ltr"] .section-tag { letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
/* .logo-text / .logo-suffix keep their spacing in every language - the
   wordmark reads "ELEGANTMEDIA" in Latin characters throughout, so the rule
   above about Arabic does not apply to it. */
[dir="ltr"] .hero-overlay {
  background: linear-gradient(105deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.6) 45%, rgba(13,13,13,.25) 100%);
}
/* A phone held upright shows only a narrow vertical slice of the wide hero
   photo. These keep the slice on the couple's faces - on the right of the
   left-to-right crop, on the left of the Arabic one (tools/photos.py). On a
   wide screen nothing is cut at the sides, so they change nothing there.
   Revisit both if the hero photo changes. */
[dir="ltr"] .hero-bg { object-position: 70% center; }
[dir="rtl"] .hero-bg { object-position: 30% center; }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== Responsive (Mobile First) ===== */
/* Base styles above are written for small phones (~320px) and up.
   Each breakpoint below progressively enhances the layout for larger viewports. */

/* Phones — 360px+ */
@media (min-width: 360px) {
  /* The hero title's full phone size. Below 360px (the smallest phones) it
     keeps the page-title size, 32px, so the headline still fits on two
     lines instead of three or four. */
  :root { --fs-display: 40px; --lh-display: 48px; }
}

/* Large phones — 480px+ */
@media (min-width: 480px) {
  .hero-actions .btn, .webdesign-actions .btn { flex: 0 1 auto; text-align: center; }
  .nav-inner { gap: var(--space-2); }
  .nav-actions { gap: var(--space-1); }
}

/* Tablets — 768px+ */
@media (min-width: 768px) {
  /* Type and spacing, step two. */
  :root {
    --fs-display: 56px; --lh-display: 64px;
    --fs-h1: 40px;      --lh-h1: 48px;
    --fs-lead: 20px;
    --section-py: var(--space-10);
    --gutter: var(--space-4);
  }
  .gallery-grid, .services-grid, .testimonials-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webdesign-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Laptops — 1024px+ */
@media (min-width: 1024px) {
  /* Type and spacing, step three. */
  :root {
    --fs-display: 72px; --lh-display: 80px;
    --fs-h1: 48px;      --lh-h1: 56px;
    --section-py: var(--space-12);
    --gutter: var(--space-6);
    --block-gap: var(--space-8);
    --card-pad: var(--space-4);
    --grid-gap: var(--space-4);
  }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
  .nav-toggle { display: none; }
  .nav-links {
    position: static; width: auto; max-width: none; flex-direction: row; padding: 0; flex: 1 1 auto;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transform: none; transition: none;
    justify-content: flex-end;
    visibility: visible;   /* desktop nav is always on screen */
  }
  .gallery-grid { gap: var(--space-3); }
  .gallery-grid, .services-grid, .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Six services fill two clean rows of three; the enquiry card then
     spans the full width rather than sitting alone in a third row. */
  .service-card--cta { grid-column: 1 / -1; }
  .webdesign-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); }
  .about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); }
  .about-media { max-width: none; margin-inline: 0; }
  .about-badge { left: calc(-1 * var(--space-3)); transform: none; bottom: calc(-1 * var(--space-3)); }
  .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); }
  .page-head { padding-top: calc(var(--space-16) + var(--space-4)); }   /* 160px */
}

/* Arabic line heights. Arabic needs taller lines than Latin - diacritics sit
   above the letters and descenders reach further below - so these replace
   the Latin values, still on the 8px grid. They come after the steps above
   so that they win at every screen size. */
[dir="rtl"] {
  --lh-display: 48px; --lh-h1: 48px; --lh-h2: 40px; --lh-small: 32px;
  --fs-eyebrow: 14px; --lh-eyebrow: 24px;   /* 12px is too small for Arabic */
}
@media (min-width: 360px) {
  [dir="rtl"] { --lh-display: 56px; }
}
@media (min-width: 768px) {
  [dir="rtl"] { --lh-display: 80px; --lh-h1: 56px; --lh-lead: 40px; }
}
@media (min-width: 1024px) {
  [dir="rtl"] { --lh-display: 104px; --lh-h1: 72px; }
}

/* ===== Fonts =====
   Hosted with the site, in fonts/ - fonts/README.md says where each file came
   from and holds the licences (SIL Open Font License, which allows this).
   A browser downloads only the files a page actually uses: a font that no
   visible text asks for is never fetched, and each file covers one set of
   characters (unicode-range), so a Swedish page never loads the Arabic
   letters or the extra accented letters (latin-ext) unless it contains them.
   The first few a visitor sees are also preloaded from each page's <head>. */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/bodoni-moda-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/bodoni-moda-italic-latin.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: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/bodoni-moda-latin.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: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/jost-latin.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: 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-logo.woff2') format('woff2');
  unicode-range: U+0020, U+0041, U+0044, U+0045, U+0047, U+0049, U+004C, U+004D, U+004E, U+0054;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/el-messiri-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/el-messiri-latin.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: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/tajawal-300-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/tajawal-300-latin.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: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/tajawal-400-latin.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: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/tajawal-500-latin.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: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/tajawal-700-latin.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;
}