/* ulvar.no – utkast A «Scene». Mobil først, datamaskin frå 900 px. */

@font-face { font-family: "Cormorant Garamond"; src: url("fontar/cormorant-garamond.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontar/inter.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --bakgrunn: #0e0d0c;
  --kort: #1a1816;
  --tekst: #f1e9dc;        /* 16,1:1 mot bakgrunn */
  --tekst-mjuk: #e3d8c7;
  --svak: #b3a796;         /*  8,2:1 mot bakgrunn, 7,5:1 mot kort */
  --kopar: #c98a5e;        /*  6,7:1 mot bakgrunn, 6,1:1 mot kort */
  --linje: rgba(241, 233, 220, 0.16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breidd: 1152px;
  --kant: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bakgrunn); color: var(--tekst); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body.meny-open { overflow: hidden; }
img { display: block; max-width: 100%; }
picture { display: contents; }
picture source { display: none; }
a { color: var(--tekst); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--kopar); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--kopar); outline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp { position: absolute; left: var(--kant); top: -60px; z-index: 50; background: var(--tekst); color: var(--bakgrunn); padding: 10px 14px; }
.hopp:focus { top: 10px; }
.innhald { width: 100%; max-width: var(--breidd); margin: 0 auto; padding: 0 var(--kant); }
.overskrift { font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1; }
.etikett { font-size: 11px; letter-spacing: .16em; font-weight: 600; color: var(--kopar); text-transform: uppercase; }
.ikon { width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Toppen */
.topp { position: absolute; inset: 0 0 auto 0; z-index: 10; display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "sprak . sosial knapp" "nav nav nav nav"; align-items: center; padding: 8px 6px 0 var(--kant); }
.sprak { grid-area: sprak; font-size: 12px; letter-spacing: .12em; font-weight: 500; padding: 14px 0; }
.sprak span { color: var(--svak); }
.sosial { grid-area: sosial; display: flex; }
.meny-knapp { grid-area: knapp; width: 48px; height: 44px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; }
.hovudmeny { grid-area: nav; display: flex; gap: 22px; font-size: 11px; letter-spacing: .16em; font-weight: 500; text-transform: uppercase; }
.hovudmeny a { padding: 8px 0; }
.hovudmeny a[aria-current] { border-bottom: 1px solid var(--kopar); }

/* Hovudbilete */
.hero { position: relative; height: 560px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus-mobil); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,12,.72) 0%, rgba(14,13,12,.15) 26%, rgba(14,13,12,.2) 55%, rgba(14,13,12,.92) 100%); }
.hero-tekst { position: absolute; z-index: 1; left: var(--kant); right: var(--kant); bottom: 26px; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: 92px; line-height: .85; letter-spacing: .03em; }
.hero p { margin-top: 12px; font-size: 12px; letter-spacing: .18em; color: var(--tekst-mjuk); text-transform: uppercase; }

/* Utgjeving */
.utgjeving { background: var(--kort); border-bottom: 1px solid rgba(241,233,220,.12); }
.utgjeving .innhald { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tekst knapp" "spelar spelar" "lenkjer lenkjer"; column-gap: 14px; align-items: center; padding-top: 18px; padding-bottom: 20px; }
.omslag { grid-area: omslag; width: 72px; height: 72px; object-fit: cover; border: 1px solid rgba(241,233,220,.18); }
.utgjeving-tekst { grid-area: tekst; min-width: 0; }
.utgjeving h2 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.05; margin-top: 2px; }
.utgjeving-type { font-size: 13px; color: var(--svak); margin-top: 2px; }
.spel { grid-area: knapp; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--kopar); display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.spel-sirkel { display: inline-flex; }
.spel-tekst { display: none; }
.spelar { grid-area: spelar; margin-top: 14px; }
.spelar iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
.lenkjer { grid-area: lenkjer; display: flex; gap: 20px; margin-top: 14px; font-size: 14px; font-weight: 500; }
.lenkjer a { padding: 10px 0; border-bottom: 1px solid rgba(241,233,220,.25); }

/* Konsertar */
.konsertar { padding: 64px 0 56px; }
.konsertar .overskrift { margin-bottom: 24px; }
.konsertliste { width: 100%; border-collapse: collapse; font-size: 15px; }
.konsertliste thead { display: none; }
.konsertliste tr { border-top: 1px solid var(--linje); }
.konsertliste tbody tr:last-child { border-bottom: 1px solid var(--linje); }
.konsertliste td { padding: 18px 8px 18px 0; vertical-align: top; }
.konsertliste td:last-child { padding-right: 0; text-align: right; }
.dato-lang { display: none; }
.dato-kort b { display: block; font-weight: 600; }
.dato-kort small, .stad { font-size: 12px; color: var(--svak); }
.stad-celle { display: none; }
.stad-mobil { display: block; font-size: 13px; color: var(--svak); }
.billett { color: var(--kopar); font-weight: 500; display: inline-block; padding: 2px 0; }
.tom { padding: 22px 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); font-size: 16px; color: var(--svak); }

/* Om */
.om .innhald { padding: 0; }
.om-bilete { width: 100%; height: 420px; object-fit: cover; object-position: var(--fokus-mobil); }
.om-tekst { padding: 48px var(--kant) 64px; }
.om-tekst .overskrift { margin-bottom: 20px; }
.om-tekst p { font-size: 17px; line-height: 1.7; color: var(--tekst-mjuk); max-width: 32em; }
.stripe { width: 100%; height: 240px; object-fit: cover; object-position: var(--fokus-mobil); }

/* Kontakt */
.kontakt { padding: 64px 0 56px; }
.kontakt .innhald { display: grid; gap: 28px; }
.kontakt-boks { border-top: 1px solid var(--linje); padding-top: 18px; }
.kontakt-boks p { margin: 8px 0 4px; font-size: 19px; }
.kontakt-boks a { font-size: 15px; color: var(--tekst-mjuk); border-bottom: 1px solid rgba(241,233,220,.3); display: inline-block; padding: 6px 0; }

.botn { border-top: 1px solid rgba(241,233,220,.12); }
.botn .innhald { display: flex; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; font-size: 13px; color: var(--svak); }
.botn .laga-av { justify-content: center; padding-top: 0; }
.laga-av a { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px; color: var(--svak); font-size: 12px; letter-spacing: .08em; }
.laga-av a:hover { color: var(--kopar); }

/* Menypanelet */
.meny-panel { position: fixed; inset: 0; z-index: 40; background: var(--bakgrunn); display: flex; flex-direction: column; padding: 0 var(--kant) 32px; overflow-y: auto; }
.meny-panel[hidden] { display: none; }
.meny-topp { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.meny-topp span { font-family: var(--serif); font-size: 24px; letter-spacing: .06em; }
.meny-lukk { width: 48px; height: 44px; margin-right: -10px; display: inline-flex; align-items: center; justify-content: center; }
.meny-lenkjer { display: flex; flex-direction: column; margin-top: 32px; font-family: var(--serif); font-size: 44px; line-height: 1.25; }
.meny-sosial { margin-top: 40px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.meny-sosial a { padding: 8px 0; }
.meny-botn { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linje); font-size: 14px; color: var(--svak); line-height: 1.7; }
.meny-botn a { color: var(--tekst); }

/* Fade-in ved scrolling. Berre når skriptet køyrer og brukaren ikkje har valt redusert rørsle. */
.js-fram .fram { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.js-fram .fram.synleg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-fram .fram { opacity: 1; transform: none; transition: none; }
}

/* Datamaskin */
@media (min-width: 900px) {
  :root { --kant: 64px; }
  .innhald { padding: 0; width: calc(100% - 2 * var(--kant)); }
  .overskrift { font-size: 64px; }
  .ikon { width: 44px; }

  .topp { grid-template-columns: 1fr auto auto auto; grid-template-areas: "nav sosial sprak knapp"; height: 84px; padding: 0 52px 0 var(--kant); }
  .hovudmeny { gap: 40px; font-size: 12px; letter-spacing: .18em; }
  .hovudmeny a { padding: 10px 0; }
  .sprak { margin-left: 16px; }
  .meny-knapp { margin-left: 16px; }

  .hero { height: min(780px, 100vh); min-height: 600px; }
  .hero img { object-position: var(--fokus-desktop); }
  .hero-tekst { left: var(--kant); bottom: 56px; }
  .hero h1 { font-size: clamp(120px, 15vw, 200px); line-height: .82; }
  .hero p { margin: 18px 0 0 6px; font-size: 13px; letter-spacing: .22em; }

  .utgjeving .innhald { grid-template-columns: 220px 1fr auto; grid-template-areas: "tekst knapp lenkjer" "tekst spelar lenkjer"; column-gap: 24px; padding-top: 22px; padding-bottom: 22px; }
  .omslag { width: 84px; height: 84px; }
  .utgjeving h2 { font-size: 34px; }
  .spel { justify-self: start; width: auto; height: 52px; padding: 0 26px 0 7px; border-radius: 26px; font-size: 14px; font-weight: 500; }
  .spel-sirkel { width: 38px; height: 38px; border-radius: 50%; background: var(--kopar); color: var(--bakgrunn); align-items: center; justify-content: center; }
  .spel-tekst { display: inline; }
  .spelar { margin-top: 0; }
  .lenkjer { margin-top: 0; gap: 28px; }

  .konsertar { padding: 120px 0 112px; }
  .konsertar .overskrift { margin-bottom: 40px; }
  .konsertliste { font-size: 17px; }
  .konsertliste thead { display: table-header-group; }
  .konsertliste thead tr { border-top: 0; }
  .konsertliste th { font-size: 11px; letter-spacing: .18em; color: var(--svak); font-weight: 500; text-align: left; padding: 0 0 14px; text-transform: uppercase; }
  .konsertliste td { padding: 26px 0; vertical-align: middle; }
  .dato-lang { display: inline; font-weight: 600; }
  .dato-kort, .stad-mobil { display: none; }
  .stad-celle { display: table-cell; color: var(--svak); }
  .billett { padding: 8px 0; }
  .tom { padding: 30px 0; font-size: 19px; }

  .om { padding-bottom: 128px; }
  .om .innhald { display: block; }
  .om-bilete { height: 680px; object-position: var(--fokus-desktop); }
  .om-tekst { padding: 0; }
  .om-tekst .overskrift { margin-bottom: 32px; }
  .om-tekst p { font-size: 18px; line-height: 1.75; }
  .stripe { height: 440px; object-position: var(--fokus-desktop); }

  .kontakt { padding: 120px 0 112px; }
  .kontakt .innhald { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
  .kontakt-boks { padding-top: 22px; }
  .kontakt-boks p { margin: 10px 0 6px; font-size: 21px; }
  .kontakt-boks a { font-size: 16px; }
  .botn .innhald { padding-top: 32px; padding-bottom: 32px; }
  .botn .laga-av { padding-top: 0; }

  .meny-panel { inset: 0 0 0 auto; width: 460px; border-left: 1px solid rgba(241,233,220,.12); padding: 0 56px 48px; }
  .meny-topp { height: 84px; }
  .meny-lenkjer { margin-top: 24px; font-size: 52px; line-height: 1.2; }
  .meny-sosial { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
}