/* ============================================================================
   NMF DESIGN TOKENS
   Semantic color variables used across components and page themes.
   ========================================================================== */
:root {
	--nmf-primary: #b71c1c;
	--nmf-primary-strong: #8a0f12;
	--nmf-on-primary: #ffffff;
	--nmf-secondary: #ffffff;
	--nmf-on-secondary: #b71c1c;
	--nmf-secondary-border: #dddddd;
	--nmf-focus-ring: rgba(183,28,28,0.18);
	--nmf-primary-rgb: 183,28,28;
}

body.brand-theme {
	--nmf-primary: #025A8A;
	--nmf-primary-strong: #4686AE;
	--nmf-on-primary: #ffffff;
	--nmf-secondary: #9AB6D2;
	--nmf-on-secondary: #025A8A;
	--nmf-secondary-border: #4686AE;
	--nmf-focus-ring: rgba(2,90,138,0.25);
	--nmf-primary-rgb: 2,90,138;
}

/* The Abel Symposium pages (/abelsymposium/) keep the old abelsymposium.no
   palette: orange on cream with slate links. Its orange #D17720 is too light
   for white text, so buttons and the nav bar use a deeper shade of it. */
body.abelsymposium-theme {
	--nmf-primary: #A85A12;
	--nmf-primary-strong: #8A4A0E;
	--nmf-secondary: #FDEBD5;
	--nmf-on-secondary: #9C5310;
	--nmf-secondary-border: #DFDAD3;
	--nmf-focus-ring: rgba(209,119,32,0.3);
	--nmf-primary-rgb: 168,90,18;
}

/* Applies the NMF palette to W3.CSS utility classes. */
body.brand-theme .nmf-primary { background-color: var(--nmf-primary) !important; color: var(--nmf-on-primary) !important; }
body.brand-theme .text-nmf-primary { color: var(--nmf-primary) !important; }
body.brand-theme .text-nmf-secondary { color: var(--nmf-secondary) !important; }

/* ============================================================================
   GLOBAL BASE & TYPOGRAPHY
   ========================================================================== */
html, body { height: 100%; }
body {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	margin: 0;
	display: flex;
	flex-direction: column;
}

a { color: var(--nmf-primary); }
h1, h2, h3, h4, h5 { font-family: 'Poppins', sans-serif; margin-bottom: 0; }
.lede { font-size: 1.1rem; line-height: 1.6rem; }

/* ============================================================================
   PAGE LAYOUT SHELL
   ========================================================================== */
.w3-main {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 24px;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

#main { flex: 1; }
[id] { scroll-margin-top: 24px; }

/* Cards and post articles clip their own corners over a white page. */
.w3-card-4, .post-article { overflow: hidden; background-color: #fff; }

.portrait-img { width: 100%; max-width: 220px; height: 220px; object-fit: cover; border-radius: 4px; }

/* Post meta: date left, author right. */
.post-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-size: 1.2rem; }
.post-meta .date, .post-meta .author { color: inherit; font-size: 1.2rem; font-weight: 700; }
.post-meta .author { text-align: right; }

.back-button { display: inline-flex; align-items: center; gap: 8px; }
.back-button .fa-reply, .back-button .label { line-height: 1; }
.back-button .fa-reply { font-size: 1rem; }

/* Section headings, via _includes/section_heading.html. */
.section-top-25 { margin-top: 25px; }
.section-rule {
	width: 100px;
	border-style: solid;
	border-color: var(--nmf-primary);
	margin: 0;
}
.section-rule-h1 { border-width: 10px 0 0 0; }
.section-rule-h2 { border-width: 8px 0 0 0; }
.section-rule-h3 { border-width: 6px 0 0 0; }
.section-rule-h4 { border-width: 4px 0 0 0; }
.section-rule-h5 { border-width: 2px 0 0 0; }
.section-heading-h1 { font-size: clamp(2.25rem, 5vw, 3rem); }
.section-heading-h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.section-heading-h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.section-heading-h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
.section-heading-h5 { font-size: clamp(1rem, 2.2vw, 1.2rem); }

.w3-button:focus { outline: none; box-shadow: 0 0 0 6px var(--nmf-focus-ring); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	margin-top: 60px;
	background-color: #1a1a1a;
	color: #e0e0e0;
	font-size: 0.9rem;
}
.site-footer a { color: #e0e0e0; text-decoration: none; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
.site-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 40px 32px;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
}
.site-footer-logo { height: 48px; width: auto; filter: brightness(0) invert(1); margin-bottom: 12px; }
.site-footer-name { font-weight: 700; font-size: 1rem; color: #fff; margin: 0 0 4px; }
.site-footer-sub { color: #aaa; margin: 0 0 6px; font-size: 0.85rem; line-height: 1.4; }
.site-footer-heading {
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}
.site-footer-links { list-style: none; margin: 0; padding: 0; }
.site-footer-links li { margin-bottom: 8px; }
.site-footer-bottom {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 40px;
	border-top: 1px solid #333;
	color: #777;
	font-size: 0.8rem;
}

/* ============================================================================
   HEADER & NAVIGATION
   Top branding bar, desktop navbar and mobile nav.
   ========================================================================== */
.site-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 88px;
	padding: 14px 24px !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--nmf-on-primary);
}

.site-logo { height: 50px; vertical-align: middle; margin-right: 12px; }
.site-brand { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.site-brand span { margin-left: 6px; font-weight: 700; font-size: 2rem; line-height: 1.05; }

.header-meta { font-size: 1rem; text-align: right; line-height: 1.15; }

.site-mobile-toggle {
	color: var(--nmf-on-primary) !important;
	font-size: 1.8rem;
	line-height: 1;
	padding: 8px 12px !important;
	border-radius: 6px;
	background: rgba(255,255,255,0.12);
}
.site-mobile-toggle:hover,
.site-mobile-toggle:focus { background: rgba(255,255,255,0.22) !important; }

.site-navbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 16px;
	min-height: 52px;
	overflow: visible;
	white-space: nowrap;
	position: relative;
	z-index: 1000;
	background: var(--nmf-primary-strong);
	border-bottom: 2px solid rgba(0,0,0,0.08);
}

.site-navbar-link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	text-decoration: none;
	color: var(--nmf-on-primary);
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
}

/* Same highlight for a hovered link, a hovered dropdown title and an open one. */
.site-navbar-link:hover,
.site-navbar-link:focus,
.site-navbar .nav-dropdown > summary:hover,
.site-navbar .nav-dropdown > summary:focus-visible,
.site-navbar .nav-dropdown[open] > summary { background: rgba(255,255,255,0.2); }

.site-navbar .nav-dropdown { position: relative; display: inline-block; }
.site-navbar .nav-dropdown > summary { cursor: pointer; list-style: none; gap: 8px; }
.site-navbar .nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-navbar .nav-dropdown > summary::after {
	content: "▾";
	font-size: 0.9em;
	line-height: 1;
	transform-origin: center;
	transition: transform 0.15s ease;
}
.site-navbar .nav-dropdown[open] > summary::after { transform: rotate(180deg); }

.site-navbar .nav-dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 260px;
	background: var(--nmf-secondary);
	border: 1px solid var(--nmf-secondary-border);
	border-radius: 6px;
	padding: 6px;
	z-index: 20;
	box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.site-navbar .nav-dropdown-menu a {
	display: block;
	min-height: auto;
	padding: 10px;
	border-radius: 4px;
	text-decoration: none;
	color: var(--nmf-on-secondary);
}
.site-navbar .nav-dropdown-menu a:hover,
.site-navbar .nav-dropdown-menu a:focus { background: rgba(var(--nmf-primary-rgb), 0.1); }

.site-navbar .external-indicator {
	font-size: 0.72em;
	margin-left: 4px;
	opacity: 0.95;
	vertical-align: text-top;
}

.site-mobile-nav {
	background: var(--nmf-primary-strong);
	color: var(--nmf-on-primary);
	border-bottom: 2px solid rgba(0,0,0,0.08);
	box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.site-mobile-nav .w3-bar-item,
.site-mobile-nav .w3-button,
.site-mobile-nav details.mobile-nav-dropdown > summary {
	color: var(--nmf-on-primary) !important;
	font-weight: 600;
	text-align: left;
	white-space: normal;
}
.site-mobile-nav .w3-button:hover,
.site-mobile-nav .w3-button:focus { background: rgba(255,255,255,0.14) !important; }

.site-mobile-nav details.mobile-nav-dropdown > summary { list-style: none; cursor: pointer; }
.site-mobile-nav details.mobile-nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-mobile-nav details.mobile-nav-dropdown > summary::after { content: " ▾"; font-size: 0.85em; opacity: 0.7; }
.site-mobile-nav details.mobile-nav-dropdown[open] > summary::after { content: " ▴"; }
.site-mobile-nav .mobile-nav-dropdown-menu {
	border-top: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.08);
}
.site-mobile-nav .mobile-nav-dropdown-menu .w3-button { font-weight: 400; }

@media (max-width: 700px) {
	.site-topbar { min-height: 72px; padding: 10px 16px !important; }
	.site-logo { height: 40px; }
	.site-brand span { font-size: 1.45rem; }
	.header-meta { display: none; }
}

/* ============================================================================
   TABLES
   One look for hand-written .site-table tables and for Markdown tables inside
   .post-content: brand header row, hairline rows, brand-tinted stripes.
   ========================================================================== */
.site-table,
.post-content table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	max-width: 100%;
	margin: 16px auto;
	box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.site-table th, .site-table td,
.post-content th, .post-content td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.06); }
.site-table thead th,
.post-content thead th { background: var(--nmf-primary); color: var(--nmf-on-primary); font-weight: 700; }
.site-table tbody tr:nth-child(odd) td,
.post-content tbody tr:nth-child(odd) td  { background: rgba(var(--nmf-primary-rgb),0.03); }
.site-table tbody tr:nth-child(even) td,
.post-content tbody tr:nth-child(even) td { background: rgba(var(--nmf-primary-rgb),0.01); }
.site-table tbody tr:hover td,
.post-content tbody tr:hover td { background: rgba(var(--nmf-primary-rgb),0.06); }
.site-table tbody tr:last-child td,
.post-content tbody tr:last-child td { border-bottom: none; }

/* .site-table is the narrow, centred variant with centred cells. */
.site-table { width: 100%; max-width: 480px; border: 1px solid rgba(0,0,0,0.12); }
.site-table th, .site-table td { text-align: center; }
.site-table caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	color: var(--nmf-primary-strong);
	padding-bottom: 6px;
}

@media (max-width: 640px) {
	.site-table { max-width: 100%; }
	.site-table th, .site-table td,
	.post-content th, .post-content td { padding: 8px 10px; }
}

/* ============================================================================
   POST HERO
   Cover-image hero header for news and arrangementer post pages.
   ========================================================================== */
.post-hero {
	position: relative;
	min-height: 340px;
	overflow: hidden;
	/* image-background from the post, for transparent images or a zoom below 1
	   that leaves the header's edges uncovered; brand color otherwise. */
	background-color: var(--hero-background, var(--nmf-primary));
}
/* By default the image covers the header exactly, centred. The shift moves the
   image *within* that frame via object-position, so panning reveals more of the
   image's other edge instead of sliding a frame-sized block off and exposing the
   background. Zoom then scales the whole thing, with the header clipping it.
   Below zoom 1 the image is switched to contain by _includes/hero_image.html,
   so shrinking a logo shows all of it rather than a cover crop of it. The image
   sits under .post-hero-overlay, so the transform never drags the heading. */
.post-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center calc(50% + var(--hero-shift, 0px));
	transform: scale(var(--hero-zoom, 1));
}
.post-hero-img.is-contained { object-fit: contain; }
.post-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.10) 100%);
	display: flex;
	align-items: flex-end;
	padding: 2rem 2.5rem;
}
.post-hero-text { max-width: 760px; color: #fff; }
.post-hero-eyebrow {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.85;
	margin: 0 0 0.4rem;
}
.post-hero-text h1 {
	color: #fff;
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.25;
	margin: 0 0 0.7rem;
}
.post-hero-text .post-meta { display: flex; gap: 1.5rem; font-size: 0.9rem; opacity: 0.88; }

/* ============================================================================
   POST CONTENT
   Typography for every post body: news, arrangementer, INFOMAT and the
   generic pages built from Markdown.
   ========================================================================== */
.post-content {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.75;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.post-content blockquote {
	border-left: 4px solid var(--nmf-primary);
	background: rgba(var(--nmf-primary-rgb), 0.05);
	margin: 1.75rem 0;
	padding: 1rem 1.25rem;
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: #444;
}
.post-content blockquote p { margin: 0 0 0.5rem; }
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content img {
	display: block;
	max-width: 100%;
	max-height: 480px;
	height: auto;
	margin: 1.75rem auto;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.post-content a {
	color: var(--nmf-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.post-content a:hover { opacity: 0.75; }

.post-content h2 {
	font-size: 1.3rem;
	color: var(--nmf-primary);
	margin-top: 2rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid rgba(var(--nmf-primary-rgb), 0.15);
}
.post-content h3 { font-size: 1.1rem; color: #333; margin-top: 1.5rem; }

.post-content ol,
.post-content ul { padding-left: 1.5rem; line-height: 1.85; }
.post-content li { margin-bottom: 0.35rem; }

/* ============================================================================
   CARD GRID
   Shared by news_card.html, event_card.html and infomat_card.html, and so by
   the homepage, Nyheter, Arrangementer and INFOMAT.
   ========================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
	padding: 1.5rem 0;
}

.card-grid-item {
	display: block;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	height: 300px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transition: box-shadow 0.2s ease;
	background-color: var(--nmf-primary);
}
.card-grid-item:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.2); }
/* --card-zoom and --card-shift come from _includes/card_image.html. The hover
   lift multiplies the zoom rather than replacing it, so a zoomed card still
   grows by the same 4% on hover. */
.card-grid-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center calc(50% + var(--card-shift, 0px));
	transform: scale(var(--card-zoom, 1));
	transition: transform 0.35s ease;
}
.card-grid-item img.is-contained { object-fit: contain; }
.card-grid-item:hover img { transform: scale(calc(var(--card-zoom, 1) * 1.04)); }

/* Bottom-anchored so the scrim grows with the text it holds: a title that wraps
   to three lines gets three lines' worth of dark background. The gradient stays
   flat at 0.85 across the text itself and only fades out in the top padding, so
   the text stays legible no matter how bright the image behind it is. */
.card-overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	background: linear-gradient(to top,
		rgba(0,0,0,0.85) 0%,
		rgba(0,0,0,0.85) 60%,
		rgba(0,0,0,0) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 3rem 1.25rem 1.25rem;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.card-date { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.92); margin-bottom: 0.3rem; }
.card-grid-item h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; color: #fff; }

/* Slimmer cards, used on the homepage — size="short" on any card include. */
.card-grid-item--short { height: 210px; }

/* ----------------------------------------------------------------------------
   PAGINATION — the "forrige / 1 2 3 / neste" bar under a paginated card grid.
   Markup in _includes/pagination.html, behaviour in assets/main.js.

   Nearly all of it is W3.CSS: w3-center lays the buttons out, w3-button plus
   w3-border and w3-round shape them, w3-button:hover greys them, w3-button
   :disabled greys out forrige/neste at the ends, and off-page cards are hidden
   with w3-hide. Only the current page's fill is left to define, since the brand
   colour is not one of the w3-* colours. The !important is not optional here:
   .w3-button:hover sets its own grey with !important, and would otherwise wipe
   the fill off the current page as soon as the pointer crossed it.
   -------------------------------------------------------------------------- */
.pagination .w3-button { margin: 2px; }

.pagination .is-current {
	background-color: var(--nmf-primary) !important;
	color: var(--nmf-on-primary) !important;
	font-weight: 600;
}

/* Hidden event cards (revealed by JS based on user datetime). */
.event-card--hidden { display: none !important; }

/* White pills over an event card image: the date top left (two boxes when the
   event spans a range) and the year top right. */
.card-badge,
.card-badge-box {
	background: #fff;
	border-radius: 6px;
	padding: 6px 10px;
	text-align: center;
	line-height: 1.1;
	min-width: 50px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.card-badge { position: absolute; top: 12px; z-index: 5; }
.card-badge--date { left: 12px; }
.card-badge--year {
	right: 12px;
	min-width: auto;
	color: #555;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
}
/* The range wrapper only positions its two boxes, so it carries no pill of its own. */
.card-badge--range {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	min-width: auto;
	background: transparent;
	box-shadow: none;
}
.card-badge-day { display: block; font-size: 1.35rem; font-weight: 800; color: var(--nmf-primary); }
.card-badge-month { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #555; }
.card-badge-arrow { font-size: 1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); flex-shrink: 0; }

/* ============================================================================
   VIGGO BRUN-PRISEN DIPLOMA
   Used by _layouts/viggo_brun_template.html to reproduce the printed diploma on
   page 2 of assets/ViggoBrun_2.pdf. Sizes are em off the one clamped font-size
   on .vb-diploma, so the certificate scales as a unit and keeps the PDF's
   proportions. W3.CSS carries the rest from the markup: w3-center to centre,
   w3-image for the image defaults, w3-hide-small to drop the braces on phones.
   ========================================================================== */
.vb-article { --blue: #2c3792; --ink: #231f20; }

.vb-diploma {
	position: relative;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(0.72rem, 2.6vw, 1.15rem);
	padding: 3em 2em 2.5em;
}
.vb-diploma-inner { max-width: 36em; margin: 0 auto; }
.vb-emblem { position: absolute; top: 1.6em; right: 1.6em; width: 6.3em; }
.vb-mark { display: block; width: 6.4em; margin: 0 auto 1em; }

/* Wordmark, year and laureate, framed by the braces. One SVG serves both: the
   right-hand brace on the diploma is a mirror of the left. */
.vb-award { position: relative; }
.vb-award-inner { padding: 0 11%; }        /* the braces' own inset on the page */
.vb-brace { position: absolute; top: 0; height: 100%; }
.vb-brace--left { left: 0; }
.vb-brace--right { right: 0; transform: scaleX(-1); }

/* font: inherit resets both the global h1 font-family and its default 2em,
   which would otherwise double every em inside the heading. */
.vb-title { margin: 0; color: var(--blue); font: inherit; }
.vb-wordmark, .vb-year { display: block; line-height: 1.1; }
.vb-wordmark { font-size: 2em; font-weight: 600; font-variant-caps: small-caps; letter-spacing: 0.07em; }
/* Twice the wordmark's cap height, in lining figures — Cormorant defaults to old-style. */
.vb-year { font-size: 3.8em; font-weight: 300; font-variant-numeric: lining-nums; color: #51ade5; }
.vb-laureate { margin: 0.15em 0 0; font-size: 2.7em; font-style: italic; font-weight: 300; color: var(--blue); }
.vb-citation { margin: 0.6em auto 0; max-width: 27em; font-size: clamp(1.05rem, 1.25em, 1.4rem); font-style: italic; font-weight: 500; line-height: 1.5; color: var(--blue); text-wrap: balance; }

/* "Tildeles" and "For". text-indent puts back the trailing letter-space, so the
   word stays optically centred. */
.vb-label { margin: 0; font: 600 clamp(0.7rem, 0.78em, 0.88rem) "Poppins", sans-serif; text-transform: uppercase; letter-spacing: 0.3em; text-indent: 0.3em; color: var(--ink); }
.vb-label--for { margin-top: 2.5em; }

/* Both rules are drawn rather than shipped as images, at the PDF's own
   measurements: slashes leaning 21° at a 4.4px pitch, 2.2pt dots at 4pt. The
   hatch is an SVG tile rather than a repeating-linear-gradient because a
   gradient's hard colour stops get no antialiasing, which turned the slashes
   into visible staircases. A data URI cannot read var(--blue), so the blue is
   repeated literally here. */
.vb-rule--hatch {
	width: min(320px, 62%); height: 10px; margin: 1.6em auto 1.9em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10'%3E%3Cpath d='M0.6 10.5 4.5 -0.5M5 10.5 8.9 -0.5M9.4 10.5 13.3 -0.5M13.8 10.5 17.7 -0.5M18.2 10.5 22.1 -0.5' stroke='%232c3792' stroke-width='1.1'/%3E%3C/svg%3E") repeat-x left center;
}
.vb-rule--dots {
	width: min(700px, 82%); height: 4px; margin: 0 auto;
	background: radial-gradient(circle, var(--ink) 1.35px, transparent 1.55px) center/5px 4px repeat-x;
}

/* Language switch for bilingual citations, mirroring the emblem in the top-left
   corner. It stays hidden until main.js wires it up; without JavaScript both
   languages show, the translation set off below a rule. */
.vb-lang-switch { position: absolute; top: 1.6em; left: 1.6em; display: flex; border: 1px solid var(--blue); border-radius: 999px; overflow: hidden; font: 600 0.75rem "Poppins", sans-serif; }
.vb-lang-switch[hidden] { display: none; }
@media (max-width: 600px) { .vb-lang-switch { position: static; width: max-content; margin: -1em auto 1.5em; } }
.vb-lang-switch button { padding: 0.3rem 0.8rem; border: 0; background: transparent; color: var(--blue); font: inherit; cursor: pointer; }
.vb-lang-switch button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.vb-lang-switch button:focus-visible { outline: 2px solid #51ade5; outline-offset: -2px; }
.vb-label span + span::before { content: " / "; }   /* both labels, without JavaScript */
.vb-article.vb-switchable .vb-label span + span::before { content: none; }
.vb-translation { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px dotted var(--ink); }
.vb-article.vb-switchable .vb-translation { margin-top: 0; padding-top: 0; border-top: 0; }
.vb-article.vb-switchable [data-vb-lang][hidden] { display: none; }

.vb-signature { padding: 1.5rem 1rem 1.75rem; }
.vb-signature img { display: block; width: 30px; margin: 0 auto 0.6rem; }
.vb-signature-name { margin: 0; font: 700 0.8rem "Poppins", sans-serif; text-transform: uppercase; letter-spacing: 0.17em; text-indent: 0.17em; color: var(--ink); }

/* ============================================================================
   ABEL SYMPOSIUM
   _layouts/abelsymposium_template.html and _pages/abelsymposium.html. Colours
   from the old abelsymposium.no: orange #D17720, cream #FDEBD5 / #FFF6ED,
   the beige frame #DFDAD3 and slate links #5C6F7B. The archived pages keep
   their original classes (program, participants, abstract, infobox …), which
   are restyled here rather than rewritten.
   ========================================================================== */
.abelsymposium-theme {
	--abs-orange: #D17720;
	--abs-orange-text: #9C5310;
	--abs-cream: #FDEBD5;
	--abs-cream-faded: #FFF6ED;
	--abs-frame: #DFDAD3;
	--abs-slate: #5C6F7B;
}
body.abelsymposium-theme .text-nmf-secondary { color: var(--abs-slate) !important; }
.abelsymposium-theme #main a:not(.w3-button) { color: var(--abs-slate); }
.abelsymposium-theme #main a:not(.w3-button):hover { color: var(--abs-orange-text); }

.abs-article { max-width: 1040px; margin-left: auto; margin-right: auto; border: 1px solid var(--abs-frame); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(60,35,10,0.08); }

.abs-header { background: var(--abs-cream) url("/assets/abelsymposium/images/face-orange.webp") no-repeat right -30px bottom -60px / 230px; padding: 2rem 1.75rem 1.75rem; border-bottom: 3px solid var(--abs-orange); }
.abs-header-inner { position: relative; }
.abs-header-inner { display: flex; align-items: center; gap: 1.5rem; max-width: min(980px, calc(100% - 150px)); }
.abs-logo img { display: block; width: 110px; height: auto; }
.abs-header-copy { min-width: 0; }
.abs-kicker { margin: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; }
.abs-kicker a { color: var(--abs-orange-text) !important; text-decoration: none; }
.abs-kicker a:hover { text-decoration: underline; }
.abs-parent { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--abs-orange-text); font-style: italic; }
.abs-title { margin: 0.3rem 0 0; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.2; color: #3a2a1a; }
.abs-when { margin: 0.5rem 0 0; color: #4d4d4d; }
.abs-cancelled { display: inline-block; margin: 0.6rem 0 0; padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--abs-orange-text); color: #fff; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }

.abs-content { line-height: 1.7; }
.abs-content h2, .abs-content h3 { color: var(--abs-orange-text); }
.abs-content h4, .abs-content h5 { color: #3a2a1a; margin-top: 1.2rem; }
.abs-content img { max-width: 100%; height: auto; }
.abs-footer { background: var(--abs-cream-faded); border-top: 1px solid var(--abs-frame); }

/* Archived markup from the old site. */
.abs-content .infobox, .abs-content .infoboxfaded { padding: 0.75rem 1.25rem; margin: 0 0 1rem; border-left: 4px solid var(--abs-orange); border-radius: 4px; }
.abs-content .infobox { background: var(--abs-cream); }
.abs-content .infoboxfaded { background: var(--abs-cream-faded); }
.abs-content table.program, .abs-content table.lysegraa, .abs-content table.participants, .abs-content table.topalign { width: auto; max-width: 100%; }
.abs-content table.program th.date, .abs-content tr.lysegraaoransjelinje td { background: var(--abs-cream) !important; color: var(--abs-orange-text); text-align: left; }
.abs-content table.program th.time { color: var(--abs-orange-text); background: none; font-weight: 600; white-space: nowrap; }
.abs-content table.program td.item { font-style: italic; }
.abs-content table.program td.item.speaker { font-style: normal; }
.abs-content ul.participants { column-count: 2; column-gap: 2rem; }
.abs-content p.title { color: var(--abs-orange-text); font-weight: 700; margin: 1rem 0 0.2rem; }
.abs-content p.author { font-style: italic; margin: 0.8rem 0 0; }
.abs-content p.address, .abs-content p.abstract, .abs-content p.slideslink { margin: 0 0 0.5rem 1.5rem; }
.abs-content div.innrykk { margin: 1rem 0 0 1.5rem; }

/* Overview page: an orange hero with the white face cropped off its right
   edge, the newest symposium as a card, then a timeline of every year. */
.abs-overview { max-width: 1040px; margin: 1.5rem auto 2.5rem; padding: 0 16px; }
.abs-hero { position: relative; overflow: hidden; border-radius: 14px; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem); background: linear-gradient(115deg, #8A4A0E 0%, #A85A12 60%); color: #fff; }
.abs-hero-face { position: absolute; right: -2.5rem; bottom: -3rem; width: min(360px, 55%); opacity: 0.22; pointer-events: none; }
.abs-hero-copy { position: relative; max-width: 40rem; }
.abs-hero-kicker { margin: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; opacity: 0.85; }
.abs-hero h1 { margin: 0.4rem 0 1rem; font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.abs-hero p { line-height: 1.7; }
.abelsymposium-theme #main .abs-hero a { color: #fff; text-decoration-color: rgba(255,255,255,0.6); }

.abs-feature { display: flex; align-items: center; gap: 1.25rem; margin: -1.75rem 1.5rem 3rem; position: relative; padding: 1.1rem 1.5rem; background: #fff; border: 1px solid var(--abs-frame); border-radius: 12px; box-shadow: 0 10px 30px rgba(60,35,10,0.12); text-decoration: none; color: inherit; }
.abs-feature:hover { border-color: var(--abs-orange); }
.abs-feature img { width: 64px; height: auto; flex: none; }
.abs-feature-year { font-size: 2.6rem; font-weight: 300; color: var(--abs-orange); line-height: 1; flex: none; }
.abs-feature-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.abs-feature-copy .abs-kicker { color: var(--abs-orange-text); font-size: 0.7rem; }
.abs-feature-copy strong { font-size: 1.15rem; color: #3a2a1a; }
.abs-feature-copy span:last-child { color: #555; font-size: 0.95rem; }
.abs-feature .fa-arrow-right { color: var(--abs-orange); font-size: 1.2rem; }

.abs-section-title { font-size: 1.6rem; color: #3a2a1a; margin: 0 0 1rem; }
.abs-timeline { list-style: none; margin: 0 0 3rem; padding: 0; }
.abs-timeline li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; padding: 0.9rem 0; border-bottom: 1px solid #eee5da; }
.abs-timeline-year { font-size: 1.6rem; font-weight: 300; color: var(--abs-orange); font-variant-numeric: tabular-nums; line-height: 1.2; }
.abs-timeline-body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; }
.abelsymposium-theme #main .abs-timeline-body a { color: #3a2a1a; font-weight: 600; text-decoration: none; }
.abelsymposium-theme #main .abs-timeline-body a:hover { color: var(--abs-orange-text); text-decoration: underline; }
.abs-timeline-when { flex-basis: 100%; color: #666; font-size: 0.92rem; }
.abs-timeline .is-cancelled .abs-timeline-year, .abs-timeline .is-cancelled a { opacity: 0.6; }
.abs-timeline .abs-cancelled { margin: 0; font-size: 0.65rem; padding: 0.05rem 0.55rem; }

.abs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.abs-card { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.25rem; background: var(--abs-cream-faded) url("/assets/abelsymposium/images/face-cream.webp") no-repeat right -40px bottom -50px / 170px; border-top: 4px solid var(--abs-orange); border-radius: 10px; line-height: 1.65; }
.abs-card h2 { margin: 0 0 0.5rem; font-size: 1.2rem; color: #3a2a1a; }
.abs-card > * { position: relative; }

@media (max-width: 600px) {
	.abs-header { padding: 1.5rem 1rem 1.25rem; background-size: 140px; background-position: right -40px top -20px; }
	.abs-header-inner { max-width: none; }
	.abs-header-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
	.abs-logo img { width: 72px; }
	.abs-content ul.participants { column-count: 1; }
	.abs-feature { margin: -1.25rem 0.5rem 2.5rem; flex-wrap: wrap; }
	.abs-feature .fa-arrow-right { display: none; }
	.abs-feature-copy { flex-basis: 100%; }
	.abs-feature img { width: 48px; }
	.abs-feature-year { font-size: 2.1rem; }
	.abs-timeline li { grid-template-columns: 3.8rem 1fr; gap: 0.75rem; }
	.abs-timeline-year { font-size: 1.25rem; }
}