/* ============================================================================
   HV Keramik · marketing.css — udtrykket på forside, Originaler, Om Heidi og
   "Vi åbner snart". (Session 7/9-2026)

   AFGRÆNSNING — LÆS DENNE FØRST:
   Alt herunder er scopet under `.hv-page`. Designmotorens sider (tegningskop,
   tekstkop, kurv, levering) sætter IKKE den klasse og er derfor urørte. Det er
   en bevidst beslutning (Jesper 7/9): det nye udtryk gælder marketing-siderne,
   motoren beholder sin egen typografi og palet. Headeren er undtagelsen — den
   er fælles for alle sider (step 2) og bor i site-header.js, ikke her.
   ⚠️ Tilføj ALDRIG en regel her uden `.hv-page` foran — så lækker den ind i
   motorens lærred, felter og mål.

   Kilde: Astras designpakke (`reference/styles.css` + `specifikation/DESIGN.md`).
   Astras fil havde grundregler efterfulgt af to override-blokke; her er de
   endelige værdier bagt ind ét sted, så der kun er ét tal at rette.

   Header og menu bor IKKE her — de bor i `motor/site-header.js` (stil:
   'marketing'), så alle sider deler én komponent. Det er forudsætningen for
   step 2.
   ========================================================================= */

/* --- Skrifter · lokalt indlæst, ingen tredjeparts-request ---------------- */
@font-face {
  font-family: 'DM';
  src: url('/assets/fonts/dm-sans.ttf') format('truetype');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'DM';
  src: url('/assets/fonts/dm-sans-semibold.ttf') format('truetype');
  font-style: normal; font-weight: 500 900; font-display: swap;
}
@font-face {
  font-family: 'HV Source Serif';
  src: url('/assets/fonts/source-serif.ttf') format('truetype');
  font-style: normal; font-weight: 400; font-display: swap;
}

/* --- Tokens · de eneste farver og mål der findes ------------------------- */
.hv-page {
  --paper: #F0EBE2;   /* sidebaggrund */
  --ink:   #342B24;   /* primær tekst */
  --accent:#9C432C;   /* varm accent — kun fremhævede ord og aktiv tilstand */
  --relief:#673625;   /* reliefsektionens flade */
  --lys:   #F6EEE3;   /* lys tekst på mørk flade */
  --bund:  #29261F;   /* sidefod */
  --line:  #342B2440; /* hårfin kant */

  --serif: 'HV Source Serif', Georgia, 'Times New Roman', serif;
  --sans:  'DM', Arial, Helvetica, sans-serif;
  --heading: var(--serif);
  --pad: 5vw;         /* sidemargen — 7vw ≥1600 px, 22 px ≤720 px. ⚠️ SPEJLES i site-header.js (--hvhm-pad) */

  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
}

.hv-page * { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.hv-page h1, .hv-page h2, .hv-page h3, .hv-page p { margin: 0; }
.hv-page figure { margin: 0; }
.hv-page a { color: inherit; text-decoration: none; }
.hv-page button { font: inherit; color: inherit; cursor: pointer; }
.hv-page button:disabled { cursor: default; }
.hv-page button, .hv-page a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline-offset: 5px; }
.hv-page button:focus-visible, .hv-page a:focus-visible { outline: 2px solid currentColor; }

/* Billeder og film fylder deres kasse. Undtagelserne (logo, sidefodens
   ordmærke) sætter selv width/height/object-fit. */
.hv-page img, .hv-page video {
  display: block; max-width: 100%; width: 100%; height: 100%; object-fit: cover;
}

/* --- Typografi ----------------------------------------------------------- */
.hv-page h1, .hv-page h2, .hv-page h3 {
  font-weight: 400; letter-spacing: -.035em; line-height: 1.08;
  font-family: var(--heading); text-wrap: balance;
}
.hv-page h1 em, .hv-page h2 em { font-style: normal; font-weight: inherit; }
.hv-page h2 { font-size: clamp(2.3rem, 4.1vw, 4.4rem); }
.hv-page h3 { font-size: 1.8rem; }
.hv-page p  { font-size: 1rem; }

.hv-page .overline {
  font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1.6;
}
.hv-page .small-label { font-size: .85rem; letter-spacing: .08em; }
.hv-page figcaption { font-size: .75rem; padding-top: 11px; line-height: 1.4; letter-spacing: .025em; }

/* --- Spring-til-indhold -------------------------------------------------- */
.hv-page .skip {
  position: fixed; top: -100px; left: 10px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 16px;
}
.hv-page .skip:focus { top: 10px; }

/* --- Knap (understreget linje, ikke en flade) ---------------------------- */
.hv-page .cta {
  display: inline-flex; gap: 35px; justify-content: space-between; align-items: center;
  min-height: 48px; padding: 10px 0; border-bottom: 1px solid currentColor;
  font-size: .875rem; max-width: 100%; line-height: 1.4;
}
.hv-page .cta span { font-size: 1.3rem; }
.hv-page .cta:hover span { transform: translate(2px, -2px); }

/* --- Sektionsrytme ------------------------------------------------------- */
.hv-page .section-pad { padding: 100px var(--pad); }
.hv-page .section-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 46px;
}
.hv-page .section-heading h2 { margin-top: 16px; }
.hv-page .section-heading > p { max-width: 30ch; font-size: .95rem; line-height: 1.7; }

/* ============================================================================
   FILM — afspilning, poster og pauseknap (fælles komponent)
   ⚠️ Denne blok skal stå FØR sektionerne herunder. `.motion` sætter
   `position: relative`, og marketing.js hænger klassen på hero-feltet. Står
   blokken efter `.hero-film`, vinder den på dokumentrækkefølge, hero-figuren
   bliver relativ i stedet for absolut, klapper sammen til nul højde — og
   forsidens film forsvinder uden en eneste fejlmeddelelse. Set og rettet 7/9.
   ========================================================================= */
.hv-page .motion { position: relative; overflow: hidden; isolation: isolate; }
.hv-page .motion video { position: absolute; inset: 0; }
.hv-page .media-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-page .media-poster[hidden] { display: none; }
.hv-page .motion video[hidden], .hv-page .play-control[hidden] { display: none; }
.hv-page .play-control {
  position: absolute; right: 24px; bottom: 24px; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  background: #201A15B8; color: #fff; border: 1px solid #FFFFFF80;
  backdrop-filter: blur(5px); border-radius: 99px; padding: 11px 16px;
  min-height: 44px; font-size: .875rem; font-variant-numeric: tabular-nums;
}
.hv-page .play-control:hover { background: #201A15; }
.hv-page .motion figcaption { position: absolute; bottom: 28px; left: 25px; color: #fff; font-size: .75rem; z-index: 5; }

/* ============================================================================
   1 · FORSIDENS ÅBNING — film med mørk gradient og tekst ovenpå
   ========================================================================= */
.hv-page .a-film-hero {
  position: relative; height: calc(100svh - 4px); min-height: 720px;
  background: #472419; color: #fff;
}
.hv-page .a-film-hero .hero-film { position: absolute; inset: 0; }  /* se advarslen ved FILM-blokken */
.hv-page .hero-film video { object-position: center; }
/* Posteren beskæres anderledes end filmen. 72 % lægger koppen og relieffet i
   den frie zone til højre for overskriften; ved 50 % sad de for højt og for
   småt. Gælder kun desktop: på smal skærm er rammen højere end billedets
   sideforhold, så beskæringen sker i BREDDEN og den lodrette værdi er uden
   virkning. Efterprøvet ved 393/1440/2000 px den 12/9. Se MEDIEPLADSER.md §2.2. */
.hv-page .hero-film .media-poster { object-position: 50% 72%; }
.hv-page .film-shade {
  position: absolute; inset: 0; pointer-events: none;
  /* [14/9, Jesper: "en lille smule lysere"] mørkningen skruet ~15 % ned: C7→A8, 35→2B, C4→A6, 5C→4A (alfa) */
  /* [14/9, Jesper: lysere "på den del som ikke er bag teksten"] Tekstzonen (venstre/bund) beholder sin mørkning;
     højre side og toppen slippes fri: 2B→00 fra 65 %, toppen 5C→22; venstre (C7) og bund (C4) som oprindeligt. */
  background:
    linear-gradient(90deg, #21170EC7 0%, #21170E00 65%),
    linear-gradient(0deg, #100E0AC4, transparent 50%, #18151022);
}
.hv-page .film-heading {
  position: absolute; left: var(--pad); right: var(--pad); top: 30%; z-index: 3;
  pointer-events: none;
}
.hv-page .film-heading a { pointer-events: auto; }
.hv-page .film-heading .overline { margin-bottom: 25px; }
.hv-page .hero-title {
  font-family: var(--heading); font-size: clamp(3rem, 6.3vw, 6.9rem);
  letter-spacing: -.035em; line-height: 1.04;
}
.hv-page .hero-title em { color: var(--accent); }
.hv-page .film-heading .hero-title em { color: #F3E8D5; }
.hv-page .hero-description { line-height: 1.6; font-size: 1rem; max-width: 40ch; }
.hv-page .film-heading .hero-description { margin-top: 28px; }
.hv-page .film-heading .cta { margin-top: 22px; }
/* Bundlinjen er en gennemsigtig stribe i fuld bredde. Uden pointer-events:none
   lægger den sig hen over pauseknappen (som ligger i lærredets egen
   stacking-kontekst pga. `isolation` på .motion) og opsluger klikket — knappen
   ser rigtig ud, men kan ikke trykkes. Fundet ved klik-test 7/9. Samme greb
   som .film-heading bruger. */
.hv-page .film-foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 30px; z-index: 4;
  display: flex; gap: 35px; align-items: center; font-size: .75rem;
  pointer-events: none;
}
.hv-page .film-foot a { margin-left: auto; margin-right: 125px; pointer-events: auto; }
.hv-page .hero-film .play-control { bottom: 22px; right: var(--pad); }

/* ============================================================================
   2 · DE TO PERSONLIGE PRODUKTER
   ========================================================================= */
.hv-page .collection { border-top: 1px solid var(--line); }
.hv-page .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; }
.hv-page .product-image {
  display: block; position: relative; height: 530px; overflow: hidden;
}
.hv-page .product-image img { transition: transform .7s; }
.hv-page .product-image:hover img { transform: scale(1.035); }
/* [15/9] Film i et produktkort (data-medie på .product-image, jf. medier.js `tekstkop`): videoen dækker kortet som
   billedet, pilen ligger øverst, og pauseknappen flyttes til venstre hjørne, så den ikke kolliderer med pilen. */
.hv-page .product-image video { transition: transform .7s; }
.hv-page .product-image:hover video { transform: scale(1.035); }
.hv-page .product-image .image-link { z-index: 7; }
.hv-page .product-image .play-control { right: auto; left: 18px; bottom: 18px; min-height: 36px; padding: 8px 12px; font-size: .8rem; }
.hv-page .image-link {
  position: absolute; right: 18px; bottom: 18px; width: 42px; height: 42px;
  border: 1px solid #FFFFFF99; border-radius: 50%; background: #fff; color: #211B17;
  display: grid; place-items: center; font-size: 1.2rem;
}
.hv-page .product-info {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 23px;
}
.hv-page .product-info h3 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); }
.hv-page .product-info > span { font-size: .875rem; white-space: nowrap; }
.hv-page .product-grid article > p { font-size: .875rem; margin-top: 9px; opacity: .8; }

/* ============================================================================
   3 · RELIEF — brun flade + stort nærbillede
   ========================================================================= */
.hv-page .detail-story {
  display: grid; grid-template-columns: .85fr 1.15fr; min-height: 660px;
  background: var(--relief); color: var(--lys);
}
.hv-page .detail-copy {
  padding: 86px var(--pad); display: flex; flex-direction: column;
  justify-content: center; align-items: start;
}
.hv-page .detail-copy h2 { margin: 28px 0; font-size: clamp(3.5rem, 7vw, 6.8rem); }
.hv-page .detail-copy p { max-width: 30ch; line-height: 1.75; }
.hv-page .detail-copy .cta { margin-top: 32px; }
.hv-page .detail-media { position: relative; min-height: 660px; overflow: hidden; }
/* Bemærk: billedet forstørres 23 % og trækkes nedad. Nye fotos skal derfor
   skydes med luft — se optagelisten, plade D. */
.hv-page .detail-media img.macro { object-fit: cover; transform: scale(1.23); object-position: 50% 55%; }
.hv-page .detail-media figcaption {
  position: absolute; bottom: 24px; left: 28px; color: #fff;
  background: #231B17AD; padding: 8px 12px; font-size: .75rem;
}

/* ============================================================================
   4 · ORIGINALER — stribe på forsiden
   ========================================================================= */
.hv-page .original-tease { padding-top: 120px; padding-bottom: 120px; }
.hv-page .original-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hv-page .original-strip img { height: 360px; }
.hv-page .original-strip figcaption { display: flex; justify-content: space-between; }

/* ============================================================================
   5 · OM HEIDI — stribe på forsiden
   ========================================================================= */
.hv-page .maker-tease {
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 8vw; align-items: center;
}
.hv-page .maker-visual { position: relative; height: 560px; }
.hv-page .maker-visual img { object-position: 50% 40%; }
.hv-page .image-meta {
  position: absolute; bottom: 20px; left: 20px; color: #fff;
  background: #25221EC9; padding: 7px 10px; font-size: .75rem;
}
.hv-page .maker-copy h2 { margin: 26px 0 32px; }
.hv-page .maker-copy p { max-width: 30ch; line-height: 1.75; }
.hv-page .maker-copy .cta { margin-top: 30px; }

/* ============================================================================
   6 · SIDEFOD
   ========================================================================= */
.hv-page .site-footer { padding: 65px var(--pad) 25px; background: var(--bund); color: #EEE8DD; }
.hv-page .footer-top { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.hv-page .footer-top p { font-size: 1.2rem; line-height: 1.45; }
.hv-page .footer-top nav { display: flex; gap: 30px; font-size: .875rem; }
.hv-page .footer-top nav a:hover,
.hv-page .top-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.hv-page .top-link { font-size: .875rem; }
.hv-page .footer-wordmark { margin-top: 55px; }
.hv-page .footer-wordmark img { width: 100%; height: auto; object-fit: contain; }
.hv-page .footer-bottom {
  border-top: 1px solid #FFFFFF40; padding-top: 22px; margin-top: 8px;
  display: flex; justify-content: space-between; gap: 25px; font-size: .75rem;
}
/* [14/9 · O9] juridiske links i sidefoden (handelsbetingelser · privatliv · cookie-indstillinger) */
.hv-page .footer-jura a { color: inherit; text-decoration: none; }
.hv-page .footer-jura a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ============================================================================
   7 · OM HEIDI-SIDEN
   ========================================================================= */
.hv-page .about-intro {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 7vw;
  padding-top: 70px; padding-bottom: 70px;
}
.hv-page .page-title {
  font-family: var(--heading); font-size: clamp(3.4rem, 7.2vw, 8.8rem);   /* [14/9] 4rem/8.2vw → 3.4rem/7.2vw: "HV Keramik." på én linje fra 393 px og op */
  letter-spacing: -.035em; line-height: .9; margin-top: 22px;
}
.hv-page .about-intro-text { max-width: 43ch; padding-bottom: 5px; }
.hv-page .about-intro-text p { font-size: 1.2rem; line-height: 1.65; margin-bottom: 24px; }
/* [14/9, Jesper] Fotoene på Om-siden vises HELE — før beskar faste højder + object-fit:cover dem i top/bund
   (portræt 83 %, kop-mod-tegning 82 %, drejeskiven 90 % — koppen i hænderne var skåret af, relieffet 77 %).
   Nu følger højden billedets eget format (aspect-ratio på selve <img>), og figurens højde inkl. billedtekst er automatisk. */
.hv-page .about-visual {
  position: relative; margin: 0 var(--pad); height: auto;
  display: grid; grid-template-columns: 1fr .6fr; gap: 28px; align-items: start;
}
.hv-page .about-main { height: auto; aspect-ratio: 1530 / 1370; }
.hv-page .about-inset { height: auto; margin-top: 190px; }
.hv-page .about-inset img { height: auto; aspect-ratio: 1 / 1; }
.hv-page .about-story {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 6vw;
  padding-top: 95px; padding-bottom: 70px;
}
.hv-page .about-story h2 { margin-bottom: 25px; }
.hv-page .about-story p { max-width: 48ch; font-size: 1.15rem; line-height: 1.75; margin-bottom: 20px; }
.hv-page .about-diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; padding-top: 0; }
.hv-page .about-diptych figure { height: auto; }
.hv-page .about-diptych figure img { height: auto; aspect-ratio: 1 / 1; }
.hv-page .about-diptych figure:nth-child(2) { margin-top: 90px; height: auto; }
.hv-page .about-end { padding-top: 40px; padding-bottom: 100px; }
.hv-page .about-end > div { display: flex; gap: 60px; margin-top: 28px; }

/* ============================================================================
   8 · ORIGINALER-SIDEN (katalog)
   ========================================================================= */
.hv-page .shop-intro { padding-top: 70px; padding-bottom: 65px; }
.hv-page .shop-intro p { margin-top: 30px; font-size: 1.05rem; max-width: 52ch; }
.hv-page .catalog { padding-top: 0; }
.hv-page .catalog-top {
  border-top: 1px solid var(--line); padding: 20px 0 26px;
  display: flex; justify-content: space-between; gap: 20px; font-size: .75rem;
}
.hv-page .catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px 24px; }
.hv-page .catalog-image {
  display: block; position: relative; width: 100%; height: 420px;
  padding: 0; border: 0; background: #DED8CC; overflow: hidden;
}
.hv-page .catalog-image img { transition: transform .6s; }
.hv-page .catalog-image:hover img { transform: scale(1.04); }
.hv-page .zoom-symbol {
  position: absolute; right: 15px; bottom: 15px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: #F8F5EB; color: #2B271F;
}
.hv-page .catalog-info {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 20px;
}
.hv-page .catalog-info h2 { font-size: 1.7rem; letter-spacing: -.025em; }
.hv-page .catalog-info .kort-pris { font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hv-page .catalog article > p { font-size: .85rem; margin-top: 9px; opacity: .75; }

/* Købsrækken — genbruger Astras rytme, men bærer den rigtige Shopify-handling */
.hv-page .catalog-buy { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.hv-page .kort-knap {
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  padding: 11px 18px; font-size: .8rem; letter-spacing: .04em; min-height: 44px;
  transition: background .12s, color .12s;
}
.hv-page .kort-knap:hover { background: var(--ink); color: var(--paper); }
.hv-page .kort-knap:disabled { border-color: var(--line); color: #8A7F73; background: transparent; }
.hv-page .udsolgt {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.hv-page .katalog-besked { padding: 70px 0 40px; font-size: 1.05rem; max-width: 46ch; line-height: 1.7; }
.hv-page .katalog-besked .overline { display: block; margin-bottom: 12px; color: var(--accent); }

.hv-page .toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 13px 22px;
  font-size: .875rem; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60;
}
.hv-page .toast.vis { opacity: 1; pointer-events: auto; }
.hv-page .toast a { color: #E8CDBA; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   9 · "VI ÅBNER SNART"
   ========================================================================= */
.hv-page .teaser {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px var(--pad) 120px; background: #211913; color: #F4EDDF;
}
.hv-page .teaser-media { position: absolute; inset: 0; }
.hv-page .teaser-media img, .hv-page .teaser-media video { object-position: 50% 45%; }
.hv-page .teaser-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #22140FBC, transparent), linear-gradient(0deg, #150D09BC, transparent 80%);
}
.hv-page .teaser-logo { position: absolute; top: 32px; left: var(--pad); z-index: 3; }
.hv-page .teaser-logo img { width: 164px; height: auto; object-fit: contain; }
.hv-page .teaser-place { position: absolute; top: 47px; right: var(--pad); font-size: .75rem; z-index: 3; }
.hv-page .teaser-copy { position: relative; z-index: 3; pointer-events: none; }
.hv-page .teaser-copy h1 {
  font-family: var(--heading); font-size: clamp(4rem, 9.2vw, 9rem);
  line-height: .87; letter-spacing: -.035em; margin: 28px 0 35px;
}
.hv-page .teaser-copy > p:last-child { line-height: 1.75; }
.hv-page .teaser-footer {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; z-index: 3;
  display: flex; justify-content: space-between; gap: 20px; font-size: .75rem;
}

/* ============================================================================
   10 · BILLEDFORSTØRRELSE
   ========================================================================= */
.hv-page dialog {
  border: 0; padding: 0; max-width: min(760px, calc(100vw - 36px)); max-height: 92svh;
  background: #F1EBE1; color: #2A241B; overflow: auto;
}
.hv-page dialog::backdrop { background: #191510D9; backdrop-filter: blur(8px); }
.hv-page dialog img { height: auto; max-height: 77svh; object-fit: contain; }
.hv-page dialog p { padding: 14px 20px; }
.hv-page .close-dialog {
  position: sticky; top: 0; display: block; margin-left: auto;
  padding: 13px 20px; border: 0; background: #F1EBE1; z-index: 4;
}

/* ============================================================================
   11 · SKÆRMSTØRRELSER
   ========================================================================= */
@media (min-width: 1600px) {
  .hv-page { --pad: 7vw; }
  .hv-page .product-image { height: 650px; }
  .hv-page .original-strip img { height: 440px; }
}

@media (max-width: 1050px) {
  .hv-page .product-image { height: 430px; }
  .hv-page .original-strip img { height: 290px; }
  .hv-page .product-info { flex-wrap: wrap; gap: 10px; }
  .hv-page .catalog-image { height: 320px; }
  .hv-page .footer-top nav { flex-direction: column; gap: 12px; }
  .hv-page .detail-copy { padding: 70px var(--pad); }
}

@media (max-width: 720px) {
  .hv-page { --pad: 22px; }
  .hv-page .section-pad { padding: 65px var(--pad); }
  .hv-page h2 { font-size: clamp(2rem, 9.5vw, 3.1rem); }

  .hv-page .section-heading { flex-direction: column; align-items: start; gap: 20px; margin-bottom: 30px; }
  .hv-page .section-heading h2 { margin-top: 14px; }
  .hv-page .section-heading > p { font-size: .95rem; }

  /* Hero */
  .hv-page .a-film-hero { height: calc(100svh - 1px); min-height: 700px; }
  .hv-page .hero-film video { object-position: 52% 50%; }
  /* [14/9, Jespers telefontest] På smal skærm vises posteren i fuld højde, så koppen og relieffet landede midt på skærmen —
     bag overskriften. Billedet forstørres 28 % og forankres i bunden (hænderne beholdes, toppen af papiret ofres), så
     relieffet står i den frie zone OVER "Personlig keramik.". .motion har overflow:hidden, så intet stikker ud.
     Valgt af Jesper blandt fire varianter (Claude outputs/telefon_2026-09-14/docs). Kun posteren — filmen er urørt. */
  .hv-page .hero-film .media-poster { object-position: 50% 100%; transform: scale(1.28); transform-origin: 50% 88%; }
  .hv-page .film-shade {
    /* [14/9] Tekstzonen (nederste 45 %) er som oprindeligt (E6 → 7E = samme lineære forløb); derover slipper mørkningen ved 62 % i stedet for at række hele vejen op, og toppen er nær fri (77 → 33) */
    background: linear-gradient(0deg, #1E110EE6 0%, #1E110E7E 45%, transparent 62%), linear-gradient(180deg, #20181333, transparent 18%);
  }
  .hv-page .film-heading { top: auto; bottom: 115px; }
  .hv-page .film-heading .hero-title { font-size: clamp(2.65rem, 12.7vw, 4.5rem); }
  .hv-page .film-heading .hero-description { font-size: .95rem; max-width: 29ch; margin-top: 22px; }
  .hv-page .film-heading .overline { font-size: .7rem; margin-bottom: 20px; }
  .hv-page .film-heading .cta { margin-top: 15px; }
  .hv-page .film-foot { bottom: 26px; right: 140px; gap: 20px; font-size: .7rem; flex-wrap: wrap; }
  .hv-page .film-foot a { margin: 0; }
  .hv-page .hero-film .play-control { right: var(--pad); bottom: 24px; padding: 9px 12px; font-size: .8rem; }

  /* Produkter — Tegningskoppen først, derefter Tekstkoppen */
  .hv-page .product-grid { grid-template-columns: 1fr; gap: 40px; }
  .hv-page .product-image { height: 430px; }
  .hv-page .product-info { margin-top: 18px; flex-wrap: nowrap; }
  .hv-page .product-info h3 { font-size: clamp(1.3rem, 5.5vw, 1.75rem); }
  .hv-page .product-info > span { font-size: .8rem; }

  /* Relief */
  .hv-page .detail-story { grid-template-columns: 1fr; min-height: 0; }
  .hv-page .detail-copy { padding: 65px var(--pad); }
  .hv-page .detail-copy h2 { font-size: 4.3rem; margin: 20px 0; }
  .hv-page .detail-copy p { max-width: 34ch; }
  .hv-page .detail-media { height: 470px; min-height: 0; }

  /* Originaler-stribe — tredje kop skjules, to står pænere */
  .hv-page .original-strip { grid-template-columns: 1fr 1fr; gap: 18px; }
  .hv-page .original-strip a:last-child { display: none; }
  .hv-page .original-strip img { height: 255px; }
  .hv-page .original-strip figcaption { font-size: .75rem; }

  /* Om Heidi-stribe */
  .hv-page .maker-tease { grid-template-columns: 1fr; gap: 40px; }
  .hv-page .maker-visual { height: 430px; }
  .hv-page .maker-copy h2 { font-size: clamp(2rem, 9.5vw, 3.1rem); margin: 18px 0 25px; }

  /* Sidefod */
  .hv-page .site-footer { padding: 45px var(--pad) 24px; }
  .hv-page .footer-top { flex-wrap: wrap; gap: 30px; }
  .hv-page .footer-top p { font-size: 1rem; }
  .hv-page .footer-top nav { font-size: .8rem; }
  .hv-page .top-link { font-size: .8rem; }
  .hv-page .footer-wordmark { margin-top: 45px; }
  .hv-page .footer-bottom { font-size: .7rem; flex-wrap: wrap; gap: 12px; }
  /* 12/9: reglen skjulte "Fri levering fra 850 kr." (2. span) på mobil.
     Spannet er fjernet, og uden denne rettelse ville nth-child(2) nu ramme
     mailadressen. Sættes fragtløftet tilbage, skal reglen med. */
  .hv-page .footer-bottom span:last-child { margin-left: auto; }

  /* Om-siden */
  .hv-page .about-intro { grid-template-columns: 1fr; gap: 30px; padding-top: 38px; }
  .hv-page .page-title { font-size: clamp(3rem, 13.5vw, 5.5rem); margin-top: 22px; }   /* [14/9] 16vw → 13.5vw: "HV Keramik." på én linje på 393 px */
  .hv-page .about-intro-text p { font-size: 1.05rem; }
  /* [14/9, Jespers telefontest] Faste højder beskar fotoene på smal skærm (portrættet 66 % synligt, procesfotoene
     61–72 % — koppen på drejeskiven var væk). Nu vises hvert foto HELT: én kolonne, højden følger billedets format. */
  .hv-page .about-visual { height: auto; grid-template-columns: 1fr; gap: 20px; }
  .hv-page .about-main { grid-column: 1; }
  .hv-page .about-inset { grid-column: 1; margin: 0; }
  .hv-page .about-story { grid-template-columns: 1fr; gap: 25px; }
  .hv-page .about-story h2 { font-size: clamp(2rem, 9.5vw, 3rem); }
  .hv-page .about-story p { font-size: 1rem; }
  .hv-page .about-diptych { grid-template-columns: 1fr; gap: 24px; padding-top: 0; }
  .hv-page .about-diptych figure:nth-child(2) { margin-top: 0; }
  .hv-page .about-end > div { flex-direction: column; align-items: start; gap: 20px; }
  .hv-page .about-end h2 { font-size: clamp(2rem, 9.5vw, 3.1rem); }

  /* Originaler-siden */
  .hv-page .shop-intro { padding-top: 42px; padding-bottom: 45px; }
  .hv-page .shop-intro .page-title { font-size: clamp(2.6rem, 12.5vw, 4.6rem); }
  .hv-page .shop-intro p { font-size: .95rem; margin-top: 22px; }
  .hv-page .catalog-top { font-size: .7rem; }
  .hv-page .catalog-grid { grid-template-columns: 1fr 1fr; gap: 30px 14px; }
  .hv-page .catalog-image { height: 230px; }
  .hv-page .catalog-info { margin-top: 13px; }
  .hv-page .catalog-info h2 { font-size: 1.25rem; letter-spacing: -.025em; }
  .hv-page .catalog-info .kort-pris { font-size: .8rem; }
  .hv-page .catalog article > p { font-size: .75rem; margin-top: 7px; }
  .hv-page .catalog-buy { margin-top: 12px; }
  .hv-page .kort-knap { padding: 10px 14px; font-size: .75rem; }
  .hv-page .zoom-symbol { width: 30px; height: 30px; right: 9px; bottom: 9px; }

  /* Teaser */
  .hv-page .teaser { padding: 150px var(--pad) 130px; }
  .hv-page .teaser-copy h1 { font-size: clamp(3.5rem, 15vw, 5.5rem); }
  .hv-page .teaser-copy .overline { font-size: .7rem; }
  .hv-page .teaser-copy > p:last-child { font-size: .95rem; }
  .hv-page .teaser-place { display: none; }
  .hv-page .teaser-logo img { width: 150px; }
  .hv-page .teaser-footer { flex-direction: column; gap: 10px; font-size: .7rem; }
}

@media (max-width: 370px) {
  .hv-page .hero-title, .hv-page .film-heading .hero-title { font-size: 4rem; }
  .hv-page .product-info { flex-wrap: wrap; }
  .hv-page .catalog-image { height: 195px; }
  .hv-page .original-strip img { height: 210px; }
  .hv-page .teaser-copy h1 { font-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hv-page *, .hv-page *::before, .hv-page *::after {
    animation: none !important; transition: none !important;
  }
}