/* Fjordjazz — PLAKAT: cartel tipografico.

   Blanco, rejilla suiza de 12 columnas visible, titular condensado a sangre.
   El negro es el color del texto y de las reglas; el cian queda para acentos y
   enlaces. El programa no son tarjetas sino una tabla densa que se despliega
   fila a fila.

   Lo cargan tanto la portada (css/plakat.css) como las fichas de concierto
   (../../css/plakat.css). No referencia ninguna imagen: todo el color sale de
   las variables de :root. */

*, *::before, *::after { box-sizing: border-box; }
:root {
  --cyan: #009fe3; --bla: #017ac3; --dyp: #00567f;
  --svart: #0a0a0a; --tekst: #111; --dempet: #6a6a6a; --strek: #cfdce4;
  --flate: #f5fafd;
  --bredde: 1280px;
}
/* La cabecera pegajosa mide 66px. */
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
/* La del menu, en todo el sitio y en negrita. IBM Plex Mono ya vestia lo
   secundario —botones, filtros, fechas, pie, migas— y ahora viste tambien el
   texto corrido: fuera IBM Plex Sans, que ya no la usa nadie.

   Se declara una sola vez, aqui, y la hereda todo lo demas. Las veintiuna
   reglas que la repetian dejaron de hacerlo: si algun dia vuelve a haber dos
   tipografias, el sitio donde se decide cual lleva cada cosa es este. La
   excepcion es .filtre button, porque un <button> no hereda la tipografia del
   documento y hay que decirsela.

   Baja de 17 a 16px porque la mono avanza casi un 20% mas por caracter y a 17
   las lineas se pasaban de largo; el interlineado sube a 1.7 por lo mismo. Y
   el enfasis deja de poder ir en el peso —ya esta todo en negrita— asi que
   donde habia un <strong> ahora distingue el color. */
body {
  margin: 0; background: #fff; color: var(--tekst);
  font: 700 16px/1.7 "IBM Plex Mono", SFMono-Regular, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: Anton, Haettenschweiler, "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
/* height:auto es imprescindible: los atributos width/height del <img>
   entran como presentational hint y si no, ganan al aspect-ratio. */
img { max-width: 100%; height: auto; display: block; }
/* display:contents deja que el <img> siga siendo el hijo directo de la
   rejilla o del enlace, para que las reglas de abajo valgan igual. */
picture { display: contents; }
a { color: var(--bla); }
/* Negro y no cian: el cian sobre blanco da 2,97:1 y WCAG pide 3:1 al
   indicador de foco. En negro son 19,8:1 sobre el blanco de la pagina y
   6,66:1 sobre el cian de los botones. Dentro de la franja negra se
   invierte. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--svart); outline-offset: 3px; }
#billetter a:focus-visible, #billetter button:focus-visible { outline-color: var(--cyan); }
.innhold { width: min(100% - 40px, var(--bredde)); margin-inline: auto; }
.hopp { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--svart); color: #fff; padding: 12px 20px; }
.hopp:focus { left: 0; }

/* --- cabecera ------------------------------------------------------- */
.topp { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--svart); }
.topp .innhold { display: flex; align-items: center; gap: 20px; min-height: 66px; }
.merke { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 25px; color: var(--svart); text-decoration: none; }
.merke span { font-size: 11px; letter-spacing: .2em; color: var(--dempet); text-transform: uppercase; }
.meny-knapp { margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: var(--svart); cursor: pointer; }
/* El enlace a la otra lengua. Va fuera del <nav> para que en movil se vea sin
   abrir el menu: ahi queda entre la marca y la hamburguesa, y es el quien
   empuja a la derecha, asi que la hamburguesa deja de hacerlo. En escritorio
   pasa al final de la fila con order. El texto es el codigo —EN, NO—; el
   nombre entero lo lleva aria-label. */
.sprak { margin-left: auto; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--svart); text-decoration: none; padding: 12px 10px; box-shadow: inset 0 0 0 1px var(--svart); }
.sprak:hover { background: var(--svart); color: #fff; }
.sprak + .meny-knapp { margin-left: 4px; }
#hovedmeny { display: flex; flex-direction: column; gap: 2px; }
#hovedmeny a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--svart); text-decoration: none; padding: 12px 2px; border-bottom: 2px solid transparent; }
#hovedmeny a:hover { border-bottom-color: var(--cyan); }
#hovedmeny .topp-cta { background: var(--cyan); color: var(--svart); padding: 12px 22px; border-bottom: 0; text-align: center; }
#hovedmeny .topp-cta:hover { background: var(--svart); color: #fff; }
/* --- el corte del menu: 1140px ---------------------------------------
   Los seis enlaces mas el boton de billetes miden ~790px en IBM Plex Mono
   a 12px con .16em; con el «Fjordjazz Sandefjord» de la izquierda y el boton
   de idioma (EN/NO) a la derecha no caben en una fila hasta ~1100px de
   contenedor. Por debajo, hamburguesa. Manda el noruego: en ingles los
   enlaces son mas cortos.
   El mismo numero esta en js/plakat.js, en el cierre del menu al pulsar un
   enlace: si se toca uno hay que tocar el otro. */
@media (max-width: 1139px) {
  #hovedmeny { display: none; }
  #hovedmeny.apen { display: flex; }
  .topp .innhold { flex-wrap: wrap; }
  #hovedmeny { flex-basis: 100%; padding-bottom: 14px; }
  #hovedmeny .topp-cta { margin-top: 8px; }
}
@media (min-width: 1140px) {
  .meny-knapp { display: none; }
  /* El hueco se estrecha en las ventanas justas y flex-wrap es la red: si la
     medida se queda corta —otro enlace, otra tipografia— el menu parte en
     dos lineas en vez de desbordar la cabecera. */
  #hovedmeny { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.6vw, 26px); margin-left: auto; }
  .sprak { order: 1; margin-left: 0; }
}

/* --- hero con la rejilla a la vista --------------------------------- */
.hero { position: relative; padding: 54px 0 0; }
.rutenett {
  position: absolute; inset: 0; pointer-events: none;
  width: min(100% - 40px, var(--bredde)); margin-inline: auto; left: 0; right: 0;
  background-image: repeating-linear-gradient(to right, rgba(0,159,227,.22) 0 1px, transparent 1px calc(100% / 12));
  border-right: 1px solid rgba(0,159,227,.22);
}
.hero .innhold { position: relative; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
/* Dos titulares distintos con la misma caja. En la portada el h1 es el
   logotipo entero (img/logo-fjordjazz.png, 4469x1410) y manda la regla de la
   imagen: los 1040px son los que medía la palabra compuesta en Anton a 232px,
   el tope del clamp que había antes aquí, así que el hero conserva su anchura
   y por debajo de ~1080px de ventana el logo baja con el contenedor. Va
   centrado, que la marca no está pensada para ir alineada a la izquierda como
   iba el titular tipográfico.
   En la página de pases el h1 es texto y se queda con el clamp. */
.hero h1 { font-size: clamp(52px, 11vw, 150px); line-height: .85; margin: 22px 0 0; color: var(--svart); }
.hero h1 img { width: min(100%, 1040px); margin-inline: auto; }
.hero-under { display: flex; flex-wrap: wrap; gap: 26px 48px; align-items: flex-end; justify-content: space-between; margin-top: 32px; padding-bottom: 40px; }
.hero-under p { max-width: 540px; font-size: 17px; }
/* margin-left:auto y no solo el space-between del padre: en cuanto la fecha
   y la entradilla no caben en la misma linea, .hero-under parte y la fecha
   se queda sola en la suya, donde space-between la dejaria a la izquierda.
   El margen la empuja a la derecha en los dos casos. */
.datoer { margin-left: auto; margin-right: 24px; text-align: right; }
/* La caja mide lo que el renglon de la fecha, que va en nowrap, asi que el
   text-align:left de la etiqueta la deja justo encima del 29 mientras el
   bloque entero sigue alineado a la derecha. */
.datoer .neste { display: block; text-align: left; margin-bottom: 8px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
/* La fecha va en una sola linea, asi que el cuerpo lo manda el ancho y no la
   altura: los 8.7em son lo que mide "29.APRIL - 5.MAI 2027" en Anton, y el
   8.2vw deja ese renglon dentro de .innhold —min(100% - 40px, 1280px)— desde
   los 320px de ventana hasta el tope de 62px, donde todavia cabe al lado de
   la entradilla. El selector lleva .hero-under delante para ganarle a la
   regla de .hero-under p, que si no le impone los 17px y los 540px. */
.hero-under .datoer p { max-width: none; font-family: Anton, sans-serif; font-size: clamp(18px, 8.2vw, 62px); line-height: .9; text-transform: uppercase; white-space: nowrap; }
.datoer .aar { color: var(--cyan); }
.knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.knapp { display: inline-block; background: var(--svart); color: #fff; text-decoration: none; padding: 15px 30px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.knapp:hover { background: var(--cyan); color: var(--svart); }
.knapp.hul { background: none; color: var(--svart); box-shadow: inset 0 0 0 1px var(--svart); }
.knapp.hul:hover { background: var(--svart); color: #fff; }

/* --- banda de retratos ---------------------------------------------- */
.mosaikk { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 3px solid var(--svart); }
@media (min-width: 760px) { .mosaikk { grid-template-columns: repeat(6, 1fr); } }
/* grayscale primero y luego un sepia girado al cian: el duoton es apenas
   perceptible como color, pero quita el gris muerto de la banda. */
.mosaikk .flis { position: relative; display: block; overflow: hidden; color: inherit; text-decoration: none; }
.mosaikk img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.06) sepia(.3) hue-rotate(165deg) saturate(1.35); transition: filter .3s ease; }
.mosaikk .flis:hover img, .mosaikk .flis:focus-visible img { filter: none; }
.flis-tekst {
  position: absolute; inset: auto 0 0 0; padding: 11px 12px 12px;
  background: rgba(10,10,10,.88); color: #fff;
  font-size: 11px; line-height: 1.4;
  letter-spacing: .07em; text-transform: uppercase;
  opacity: 0; transform: translateY(100%); transition: opacity .25s ease, transform .25s ease;
}
.flis-tekst .nar { display: block; color: var(--cyan); margin-top: 3px; letter-spacing: .14em; }
.mosaikk .flis:hover .flis-tekst, .mosaikk .flis:focus-visible .flis-tekst { opacity: 1; transform: none; }
/* Sobre una foto no se puede predecir el fondo: el aro cian se apoya en un
   halo negro para que se vea igual en un retrato claro que en uno oscuro. */
.mosaikk .flis:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; box-shadow: inset 0 0 0 6px rgba(10,10,10,.85); }
/* Sin raton no hay hover que valga: el nombre se queda puesto. */
@media (hover: none) { .flis-tekst { opacity: 1; transform: none; } }

/* --- programa: tabla densa ------------------------------------------ */
.bolk { padding: 68px 0; }
.bolk h2 { font-size: clamp(40px, 7vw, 88px); line-height: .9; }
.bolk-topp { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: flex-end; justify-content: space-between; }
.notis { color: var(--dempet); max-width: 400px; font-size: 12.5px; line-height: 1.7; text-transform: uppercase; letter-spacing: .05em; text-align: right; }
.filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
/* Los controles de formulario no heredan ni la familia ni el peso: hay que
   decirselos, o el filtro sale en la fuente del sistema y sin negrita. */
.filtre button { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 11px 18px; border: 1px solid var(--svart); background: #fff; color: var(--svart); }
.filtre button[aria-pressed="true"] { background: var(--svart); color: #fff; }

.tabellhode { display: none; }
@media (min-width: 860px) {
  .tabellhode { display: grid; grid-template-columns: 92px 1fr 240px 210px 32px; gap: 22px; padding: 9px 16px; margin-inline: -16px; margin-top: 30px; border-top: 3px solid var(--svart); border-bottom: 1px solid var(--svart); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dempet); }
}
.dag-tittel { font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(20px, 3vw, 28px); padding: 26px 0 8px; color: var(--dyp); }
/* La fila se ensancha hacia fuera y recupera el hueco con padding: el texto
   sigue alineado con los titulares, pero la hora deja de tocar el borde del
   fondo y del filete cian de la fila abierta. */
.rad { border-top: 1px solid var(--strek); margin-inline: -12px; padding-inline: 12px; }
.rad:last-child { border-bottom: 3px solid var(--svart); }
.rad > summary { display: grid; grid-template-columns: 1fr 32px; gap: 6px 22px; align-items: baseline; padding: 15px 0; cursor: pointer; list-style: none; }
.rad > summary::-webkit-details-marker { display: none; }
.rad:hover { background: #f3fafe; }
.rad[open] { background: #f3fafe; box-shadow: inset 3px 0 0 var(--cyan); }
.rad .kl { font-size: 15px; color: var(--dyp); }
.rad .artist { font-size: 18px; line-height: 1.35; }
.rad .sted, .rad .prisfelt { font-size: 14px; color: var(--dempet); }
.rad .prisfelt { }
/* Sobre el fondo teñido de la fila abierta --bla da 4,36:1 y no llega a
   AA; --dyp da 7,55:1. */
.rad .gratis { color: var(--dyp); }
.rad .pil { grid-row: 1 / span 4; grid-column: 2; align-self: center; justify-self: end; color: var(--cyan); }
.rad[open] .pil { transform: rotate(90deg); }
.merkelapp { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dyp); }
@media (min-width: 860px) {
  .rad > summary { grid-template-columns: 92px 1fr 240px 210px 32px; }
  .rad .pil { grid-row: 1; grid-column: 5; }
  .rad { margin-inline: -16px; padding-inline: 16px; }
}
.utfoldet { display: grid; gap: 26px; padding: 8px 0 30px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .utfoldet { grid-template-columns: 240px 1fr 240px; gap: 32px; } }
/* El cuadrado lo manda el contenedor, no el <img>: asi la foto no puede
   pasarse por ningun lado. Y min-width:0 porque un elemento de rejilla no
   encoge por debajo de su contenido, y una imagen de 500 px dentro de una
   columna de 240 se sale. */
.utfoldet > div { min-width: 0; }
.utfoldet .foto { aspect-ratio: 1 / 1; overflow: hidden; }
.utfoldet .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.utfoldet .under { font-style: italic; color: var(--dyp); margin-bottom: 10px; }
.utfoldet p + p { margin-top: 12px; }
.utfoldet .bes { font-size: 12.5px; line-height: 1.9; color: var(--dempet); }
/* Con el cuerpo entero en negrita, un <strong> no puede distinguirse por el
   peso: lo hace por el color, que es lo que ya llevaba de apoyo. */
.utfoldet .bes strong { color: var(--tekst); }
.utfoldet .knapp { margin-top: 16px; }

/* --- billetter ------------------------------------------------------ */
/* La foto va en un ::before y no en el fondo de la seccion porque hay que
   filtrarla y porque encima tiene que ir un velo que la oscurezca. Van
   probadas tres, y cambiar de una a otra es cambiar los cuatro nombres de
   fichero de aqui abajo:
     kveldsband-lysslynger  la puesta, el local de noche con las guirnaldas
     trommer-rodt-lys       la bateria bajo la luz roja, casi negra
     silhuett-scene         la silueta del cantante, en blanco y negro
   El velo es plano y no un degradado lateral: la foto tiene que leerse entera
   de lado a lado, y un degradado que arranque opaco por la izquierda se come
   justo el lado donde estan el piano y el contrabajo. Al ser plano, el mismo
   .72 que deja pasar el color es el que sostiene el texto —blanco, #d8d8d8 y
   #b9b9b9— en cualquier punto del ancho.
   El filtro no lleva el duoton de la banda de retratos: un grayscale dejaria
   la foto en el gris muerto del que la salva el color. Solo un punto de
   contraste y de saturacion, que el velo apaga las dos cosas.
   El velo va en la misma capa, delante de la imagen: el negro no lo tocan ni
   el contraste ni la saturacion, asi que el filtro le da igual. El fondo
   negro de la seccion sigue puesto y es lo que se ve si la imagen no carga.
   La foto es apaisada (1600x1067) y con cover se ve entera de ancho —el
   recorte de cover es el alto—, pero la banda es mucho mas baja que la foto,
   asi que la seccion sube de los 68px de .bolk a 112px para que entre mas
   alto de escena: guirnaldas arriba, musicos en el centro. */
#billetter { position: relative; padding: 112px 0; background: var(--svart); color: #fff; }
#billetter::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(10,10,10,.72), rgba(10,10,10,.72)),
    url("../img/foto/kveldsband-lysslynger.jpg") 50% 42% / cover no-repeat;
  background-image:
    linear-gradient(rgba(10,10,10,.72), rgba(10,10,10,.72)),
    image-set(url("../img/foto/kveldsband-lysslynger.webp") type("image/webp"), url("../img/foto/kveldsband-lysslynger.jpg") type("image/jpeg"));
  filter: contrast(1.08) saturate(1.15);
}
/* El contenido por encima del ::before, que si no queda debajo de la foto. */
#billetter .innhold { position: relative; }
/* En vertical el texto ocupa todo el ancho y la seccion se hace alta, asi que
   cabe mas foto; el velo sube un punto porque el texto pasa por encima de la
   parte iluminada. */
@media (max-width: 700px) {
  #billetter { padding: 84px 0; }
  #billetter::before {
    background-image:
      linear-gradient(rgba(10,10,10,.8), rgba(10,10,10,.8)),
      image-set(url("../img/foto/kveldsband-lysslynger@800.webp") type("image/webp"), url("../img/foto/kveldsband-lysslynger@800.jpg") type("image/jpeg"));
  }
}
#billetter h2 { color: var(--cyan); }
#billetter .notis { color: #b9b9b9; text-align: left; max-width: 560px; }
#billetter h2 + .notis { margin-top: 18px; }
#billetter p { color: #d8d8d8; max-width: 660px; }
#billetter .knapp { background: var(--cyan); color: var(--svart); margin-top: 26px; }
#billetter .knapp:hover { background: #fff; }

/* --- om ------------------------------------------------------------- */
#om { background: var(--flate); border-top: 1px solid rgba(0,159,227,.45); }
/* Sobre la franja, --bla se queda en 4,36:1 y no pasa AA: aqui va --dyp. */
#om .signatur { color: var(--dyp); }
/* align-self: con la foto de equipo la columna del texto crece, y la tarjeta,
   estirada a su altura, se quedaba en un recuadro blanco vacio. */
#om .kontaktkort { background: #fff; border-color: var(--cyan); align-self: start; }
.to-kolonner { display: grid; gap: 44px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 900px) { .to-kolonner { grid-template-columns: 1.5fr 1fr; gap: 64px; } }
.om-tekst p + p { margin-top: 15px; }
.om-foto { max-width: 480px; margin-top: 28px; }
.om-tekst .om-foto + .signatur { margin-top: 12px; }
.signatur { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bla); }
.kontaktkort { border: 1px solid var(--svart); padding: 28px; }
.kontaktkort h3 { font-size: 24px; margin-bottom: 14px; }
.kontaktkort p + p { margin-top: 12px; }
.kontaktkort .liten { color: var(--dempet); font-size: 14px; }

/* --- partnere, los principales en texto ------------------------------
   Solo el primer nivel de Sponsor.pages, al tamaño mas grande de las
   tres propuestas: en un cartel la jerarquia es el cuerpo y poco mas. */
#partnere { border-top: 1px solid var(--strek); padding-bottom: 34px; }
.partnernavn { margin-top: 28px; text-align: center; text-wrap: balance; }
.partnernavn p { margin: 0 auto; max-width: 800px; }
.niva-1 { font-size: clamp(22px, 3.1vw, 30px); line-height: 1.25; letter-spacing: -.01em; }
.karusell { display: flex; overflow: hidden; margin-top: 34px; border-block: 1px solid var(--strek); }
.spor { display: flex; flex: 0 0 auto; align-items: center; gap: 64px; padding: 26px 32px 26px 0; margin: 0; animation: rulle 52s linear infinite; }
.spor li { flex: 0 0 auto; display: grid; place-items: center; }
.spor img { max-height: 54px; width: auto; object-fit: contain; }
.spor .navn { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); white-space: nowrap; }
.karusell:hover .spor, .karusell:focus-within .spor { animation-play-state: paused; }
@keyframes rulle { to { transform: translateX(-100%); } }

/* El cierre de la pagina: la misma franja palida que "Om Fjordjazz" y el
   filete de 3 px, que conserva el peso del cartel pero en cian. Sobre la
   franja, --bla se queda en 4,36:1 y no pasa AA, asi que los enlaces y el
   logotipo van en --dyp (7,6:1). */
.bunn { border-top: 3px solid var(--cyan); background: var(--flate); padding: 34px 0 46px; font-size: 12.5px; line-height: 1.9; }
.bunn .innhold { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.bunnmerke { display: block; width: 300px; max-width: 100%; height: auto; margin-bottom: 12px; }
.bunn a { color: var(--dyp); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sin animacion la segunda copia sobra, y la cinta se recorre a mano. */
  .spor { animation: none; }
  .spor[aria-hidden="true"] { display: none; }
  .karusell { overflow-x: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- ficha de concierto ---------------------------------------------
   Aqui la ficha se permite el ancho del cartel: titular a sangre y los
   datos duros en mono, como el resto de lo secundario en PLAKAT. */
.konsertside { padding: 36px 0 80px; }
.konsertside .innhold { max-width: 1100px; }
.smuler { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.smuler a { text-decoration: none; color: var(--svart); border-bottom: 2px solid var(--cyan); }
.smuler.tilbake { margin-top: 60px; padding-top: 26px; border-top: 3px solid var(--svart); }
.konsertside h1 { font-size: clamp(38px, 8vw, 76px); line-height: .92; margin-top: 14px; }
.konsertside .kicker { margin-top: 24px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dempet); }
.konsertside .undertittel { font-size: 18px; margin-top: 14px; color: var(--dempet); }
/* Foto a la izquierda y toda la informacion a la derecha, mientras quepan.
   No hay corte de pantalla: con flex-wrap, la informacion baja debajo de la
   foto solo cuando no le quedan 320px al lado. Una foto vertical es mas
   estrecha y aguanta lado a lado en pantallas mas pequeñas que una apaisada.

   La foto va a su ancho natural, como mucho 540px (lo que ya pedia el sizes
   del <img>, FICHA_SIZES en tools/felles.py), y con tope de alto sin
   recortar: desde el panel llegan fotos verticales del movil, y a todo el
   ancho una 2:3 media 1.230px, mas de una pantalla. width:auto le gana al
   atributo width del <img>; con los dos maximos, el navegador reduce
   conservando la proporcion. */
.konsertkropp { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 44px; margin-top: 32px; }
.konsertfoto { margin: 0; flex: 0 1 auto; max-width: min(100%, 540px); }
.konsertfoto:empty { display: none; }
.konsertfoto img { width: auto; max-width: 100%; max-height: min(75vh, 620px); }
/* max-width: debajo de la foto ocupa toda la fila, y en mono a 1100px las
   lineas de la descripcion pasarian de cien caracteres. */
.konsertinfo { flex: 1 1 320px; min-width: min(100%, 320px); max-width: 760px; }
.fakta { display: flex; flex-wrap: wrap; gap: 12px 48px; margin: 0; padding: 18px 0; border-top: 3px solid var(--svart); border-bottom: 1px solid var(--strek); }
.fakta dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dempet); }
.fakta dd { margin: 5px 0 0; }
.konsertside .knapp { margin-top: 26px; }
.brodtekst { margin-top: 40px; }
.brodtekst p + p { margin-top: 16px; }
.brodtekst h2 { font-size: 30px; margin-top: 38px; }
.brodtekst .besetning { margin-top: 14px; font-size: 13.5px; }
.brodtekst .besetning li { padding: 7px 0; border-bottom: 1px solid var(--strek); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.brodtekst .besetning span { color: var(--dempet); }

/* --- pagina de los pases ---------------------------------------------
   Tres carteles que entrega el festival ya compuestos, con el nombre y el
   precio dibujados dentro. El cartel manda y la ficha de texto va debajo en
   el mismo orden en que se lee el cartel —nombre, precio, alcance—, para que
   se acompanen en vez de competir.

   El corte a tres columnas es a 900px y no a 760 como el mosaico: es el mismo
   numero que lleva felles.PASS_SIZES en el sizes del srcset, y si los dos no
   dicen lo mismo el navegador pide la variante equivocada. */
/* La miga va pegada al borde de arriba del hero y la linea de sedes justo
   debajo; sin este aire las dos se leen como una sola. */
.passside .hero .smuler { margin-bottom: 24px; }
.passrad { display: grid; grid-template-columns: 1fr; gap: 46px 30px; margin-top: 38px; }
.passkort { display: flex; flex-direction: column; border-top: 3px solid var(--svart); padding-top: 18px; }
.passplakat { margin: 0 0 20px; border: 1px solid var(--strek); }
.passkort h3 { font-size: 34px; line-height: .95; }
.passpris { font-family: Anton, sans-serif; font-size: clamp(44px, 6vw, 62px); line-height: .9; margin-top: 6px; color: var(--bla); }
.passomfang { margin-top: 10px; margin-bottom: 24px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
/* margin-top:auto alinea los tres botones abajo aunque las fichas midan
   distinto; los 24px de arriba son el minimo cuando no sobra sitio. */
.passkort .knapp { margin-top: auto; align-self: flex-start; }
.passnotis { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--strek); max-width: 620px; color: var(--dempet); }
@media (min-width: 900px) { .passrad { grid-template-columns: repeat(3, 1fr); } }

/* --- noticias (maqueta) ----------------------------------------------
   El rotulo de contenido de ejemplo no es decoracion: los textos los ha
   escrito 4d3 para enseñar el modulo y sin el aviso un pantallazo pasaria
   por una nota de prensa del festival. Se va solo cuando el json deje de
   traer "eksempel". */
.eksempelmerke { margin-top: 18px; border-top: 3px solid var(--svart); border-bottom: 1px solid var(--strek); padding: 12px 0; font-size: 12.5px; line-height: 1.7; color: var(--dempet); max-width: 780px; }
.eksempelmerke strong { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--svart); }
.nyhetsrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin-top: 30px; }
.nyhet { border-top: 1px solid var(--strek); padding-top: 14px; }
.nyhet picture img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.nyhetsdato { margin-top: 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dempet); }
.nyhet h3 { font-size: 24px; line-height: .98; margin-top: 8px; }
.nyhet p { margin-top: 10px; color: var(--dempet); font-size: 14px; }
