/* Viska public site. The look is the 2026 site draft (viska-site, localhost:3100):
   light paper tones, bronze from the V wedge, orange for emphasis, one dark
   drawing sheet and one dark flowchart band. Fonts are self-hosted (the CSP
   allows nothing from other origins). */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/roboto-flex-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/roboto-flex-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* metric-matched Arial while the webfont loads, so text doesn't jump */
@font-face {
  font-family: "Roboto Flex Fallback";
  src: local(Arial);
  ascent-override: 93.28%;
  descent-override: 24.55%;
  line-gap-override: 0%;
  size-adjust: 99.45%;
}

:root {
  /* dark warm theme (user palette, 2026-11-04). Token names are kept from the
     light draft: "paper" is the page ground, "ink" the text, "night" the
     deepest ground (Viska macro band, footer). */
  --paper: #242220;        /* main background */
  --paper-2: #2c2a28;      /* panels, a step above the page */
  --line: #4a4642;         /* lines and dividers */
  --ink: #eee9e2;          /* primary text, logo */
  --body: #d7d1c9;         /* body text */
  --ink-2: #b8b0a6;        /* secondary body */
  --ink-3: #a89f95;        /* labels, header line, connecting lines */
  --shadow: 0 18px 44px -20px rgba(20, 19, 18, .55);
  --shadow-sm: 0 8px 22px -12px rgba(20, 19, 18, .55);
  --bronze: #917d61;
  --bronze-ink: #a89f95;
  --accent: #e58c43;
  --accent-ink: var(--bronze);
  --night: #2c2a28;        /* ground strips: Viska macro band, footer, draft bar */
  --night-2: #3a3633;      /* cards inside the band */
  --night-line: #4a4642;
  --ivory: #eee9e2;
  --ivory-2: #b8b0a6;
  --sand: #c8bfb5;
  --taupe: #8f877c;
  --flow: #a89f95;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --radius: 4px;
  --header: 92px;
  --font-sans: "Roboto Flex", "Roboto Flex Fallback";
  --font-display: var(--font-sans);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-sans), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display), system-ui, sans-serif; font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p, ul { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--ink-2); }
.stack { display: grid; gap: 18px; align-content: start; }

/* type scale */
.display { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: 1.02; letter-spacing: -0.035em; }
.h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; }
.h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.25; letter-spacing: -0.01em; }
.hl { font-style: normal; font-weight: 700; color: var(--bronze); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
h1.eyebrow { font-family: inherit; } /* the contact page's only heading is the small label */
.eyebrow { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze-ink); font-weight: 500; }

/* placeholder marker */
.fill { text-decoration: underline dashed var(--bronze); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.draft-bar { background: var(--night); color: var(--ivory-2); font-size: 12px; text-align: center; padding: 6px var(--gutter); letter-spacing: 0.02em; }
.draft-bar .fill { color: var(--ivory); }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: var(--header); }
.brand .logo { height: 34px; width: auto; display: block; color: var(--ink); }
.nav { display: flex; gap: 40px; font-size: 15px; }
.nav a { color: var(--ink-2); position: relative; padding-block: 6px; transition: color .15s; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bronze); }
/* drop-downs: hover or keyboard focus opens a small panel under the item */
.nav { align-items: center; }
.nav-group { position: relative; }
.nav-group > a { display: inline-flex; align-items: center; gap: 7px; }
.nav-group .caret { color: var(--ink-3); transition: transform .2s; }
.nav-sub {
  position: absolute; top: 100%; left: -18px; z-index: 30; min-width: 240px;
  display: grid; padding: 8px 0; margin-top: 10px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge over the gap */
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.nav-group:hover .caret, .nav-group:focus-within .caret { transform: rotate(180deg); }
.nav .nav-sub a { display: block; padding: 9px 18px; white-space: nowrap; color: var(--ink-2); }
.nav .nav-sub a:hover, .nav .nav-sub a:focus-visible { color: var(--ink); background: var(--night-2); outline: none; }
/* the sticky header doesn't cover a section reached from the menu */
section[id], .fund-detail[id] { scroll-margin-top: calc(var(--header) + 16px); }
.menu-btn { display: none; background: none; border: 0; width: 40px; height: 40px; padding: 10px 8px; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; }
.menu-btn span { display: block; height: 1.5px; background: var(--ink); transition: transform .2s; }
.site-header.open .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
.site-header.open .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 720px) {
  .menu-btn { display: flex; }
  .nav { display: none; position: absolute; top: var(--header); left: 0; right: 0; background: var(--paper); flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--line); }
  .site-header.open .nav { display: flex; }
  .nav a { font-size: 22px; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .nav a.active::after { display: none; }
  /* phones: the sub-items sit indented under their item, always open */
  .nav { align-items: stretch; }
  .nav-group .caret { display: none; }
  .nav-group > a { display: flex; }
  .nav-group { border-bottom: 1px solid var(--line); }
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; margin: 0; padding: 0 0 8px; min-width: 0; background: none; border: 0; box-shadow: none; transition: none; }
  .nav-sub::before { display: none; }
  .nav .nav-sub a { font-size: 17px; padding: 9px 0 9px 18px; border-bottom: 0; }
  .nav .nav-sub a:hover { background: none; }
}

/* calls to action: small-caps text with a rule that runs out on hover */
.go-row { display: flex; flex-wrap: wrap; gap: 20px 48px; }
.go { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-block: 8px; }
/* no trailing rule after these links (removed at the user's request, 2026-11-13); hover lifts the colour */
.go { transition: color .15s; }
.go:hover { color: var(--accent-ink); }
.go.quiet { color: var(--ink-2); }
.go.quiet:hover { color: var(--ink); }

/* sections */
.section { padding-block: clamp(72px, 10vw, 140px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head > * { min-width: 0; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; align-items: start; } }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(64px, 11vw, 160px) clamp(64px, 9vw, 128px); }
/* front page: the statement alone, sized so the newest articles start within the first screen */
.hero-home { min-height: min(64svh, 680px); display: grid; align-items: center; padding-block: clamp(56px, 8vw, 112px); }
.hero-home .hero-inner { max-width: min(1000px, 72%); }
.hero-home .display { font-size: clamp(3rem, 7.6vw, 6.3rem); line-height: .98; }
/* desktop: the highlighted phrase ("breyttri heimsmynd") stays on one line, so the
   headline is two lines; 6.3rem keeps it clear of the V at every width */
@media (min-width: 861px) { .hero-home .hl { white-space: nowrap; } }
/* the front page lede, nearly the size of the fund statements on Sjóðir
   (user, 2026-11-13) */
.hero-home .lede { font-size: clamp(1.2rem, 1.65vw, 1.65rem); line-height: 1.4; font-weight: 340; max-width: 34em; }
.post-cards { row-gap: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) { .hero-home { min-height: 0; } .hero-home .hero-inner { max-width: none; } }
.hero-sm { padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px); }
.hero-inner { position: relative; z-index: 1; display: grid; gap: 28px; max-width: min(900px, 64%); }
.hero-sm .hero-inner { max-width: 920px; }
.hero .go-row { margin-top: 8px; }
.hero-mark { position: absolute; right: -7vw; top: 50%; transform: translateY(calc(-50% + var(--py, 0px))); width: min(40vw, 560px); pointer-events: none; will-change: transform; }
/* the V assembles on load: the bronze wedge drops in from the upper left, the
   long stroke rises from the lower right; site.js then drifts it on scroll */
.hero-mark path { transform-box: fill-box; }
.js .hero-mark .wedge { animation: mark-wedge 1.5s cubic-bezier(.2, .7, .2, 1) .15s both; }
.js .hero-mark .stroke { animation: mark-stroke 1.7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mark-wedge { from { opacity: 0; transform: translate(-18%, -16%); } }
@keyframes mark-stroke { from { opacity: 0; transform: translate(12%, 14%); } }
@media (max-width: 860px) {
  .hero-inner { max-width: none; }
  .hero-mark { opacity: .3; width: 90vw; right: -40vw; }
}

/* statement */
.statement { font-family: var(--font-display), sans-serif; font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 17em; text-wrap: balance; }
.statement strong { font-weight: 700; color: var(--accent-ink); }

/* dark band: Viska macro flowchart */
.band { background: var(--night); color: var(--ivory); }
.section.band + .section { border-top: 0; }
.band .lede { color: var(--ivory-2); }
.macro-head { margin-bottom: clamp(40px, 5vw, 64px); }
.macro-head .lede { max-width: 52em; }

/* flowchart */
.flow { position: relative; container-type: inline-size; margin-inline: auto; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-lines path { fill: none; stroke: var(--flow); stroke-width: 1.5; }
/* build-up once the chart scrolls into view: drivers (s1), then the lines into
   the hub and the hub (s2), then the lines out and the theme cards (s3);
   --d staggers items within a step */
.js .flow .fx { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .flow .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.6, 0, .3, 1); }
.js .flow .s1 { transition-delay: var(--d, 0ms); }
.js .flow .s2 { transition-delay: calc(450ms + var(--d, 0ms)); }
.js .flow .s3 { transition-delay: calc(800ms + var(--d, 0ms)); }
.js .reveal.in .flow .fx { opacity: 1; transform: none; }
.js .reveal.in .flow .ln { stroke-dashoffset: 0; }
.theme { transition: border-color .3s ease; }
.theme:hover { border-color: rgba(229, 140, 67, .8); }
.node { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.flow-row { display: contents; }
.flow-world { aspect-ratio: var(--ar); width: 100%; max-width: 1140px; }
.driver { display: grid; place-items: center; text-align: center; font-size: clamp(12px, 1.45cqw, 17px); font-weight: 500; color: #1e1d1b; padding-inline: 12px; }
.driver.sand { background: var(--sand); }
.driver.taupe { background: var(--taupe); }
.driver.orange { background: var(--accent); }
.hub { display: grid; justify-items: center; align-content: center; gap: 2px; }
.hub-logo { width: 72%; height: auto; color: var(--ivory); }
.hub span { font-size: clamp(12px, 1.5cqw, 18px); color: var(--ivory); letter-spacing: .02em; line-height: 1; }
.theme { border: 1px solid var(--line); background: var(--night-2); box-shadow: var(--shadow); padding: clamp(14px, 1.8cqw, 24px); display: flex; flex-direction: column; gap: clamp(8px, 1cqw, 12px); }
.theme-icon { width: clamp(20px, 2.2cqw, 28px); height: auto; flex-shrink: 0; color: var(--accent); }
.theme h3 { font-size: clamp(14px, 1.5cqw, 18px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.theme p { font-size: clamp(12px, 1.16cqw, 14.5px); line-height: 1.5; color: var(--ivory-2); }
@media (max-width: 860px) {
  .flow { aspect-ratio: auto !important; display: grid; gap: 12px; }
  .flow-lines { display: none; }
  .node { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .flow-row { display: grid; gap: 12px; }
  .driver { padding: 16px; font-size: 16px; }
  .hub { padding-block: 28px 20px; }
  .hub-logo { width: 150px; }
  .hub span { font-size: 16px; }
  .hub::before, .hub::after { content: ""; position: absolute; left: 50%; width: 1px; height: 18px; background: var(--flow); }
  .hub::before { top: 4px; }
  .hub::after { bottom: -10px; }
  .theme h3 { font-size: 18px; }
  .theme p { font-size: 15px; }
}


/* firm facts */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--ink-3); padding-top: 28px; }
.fact .v { font-family: var(--font-display), sans-serif; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.fact .k { color: var(--ink-2); font-size: 15px; margin-top: 12px; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

/* fund cards */
.funds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.funds > .reveal { display: grid; }
.fund { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 22px; background: var(--paper); transition: border-color .2s, transform .25s; }
.fund .go { align-self: flex-start; margin-top: auto; }
a.fund:hover { border-color: var(--ink-3); transform: translateY(-2px); }
a.fund:hover .go { color: var(--accent-ink); }
.fund .tag { font-size: 13px; color: var(--ink-2); letter-spacing: .02em; }
.fund .muted { font-size: 16px; }
.fund dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: 15px; border-top: 1px solid var(--line); padding-top: 20px; }
.fund dt { color: var(--ink-3); }
.fund dd { margin: 0; text-align: right; }
@media (max-width: 860px) { .funds { grid-template-columns: 1fr; } }

/* contact panel */
.cta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.cta-lines { display: grid; gap: 4px; font-size: clamp(1.2rem, 2vw, 1.6rem); font-family: var(--font-display), sans-serif; letter-spacing: -0.01em; }
.cta-lines .k { font-family: var(--font-sans), sans-serif; font-size: 13px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 18px; }
.cta-lines .k:first-child { margin-top: 0; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; align-items: start; } }

/* fund detail (sjóðir) */
.fund-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); scroll-margin-top: 96px; }
.fund-detail > * { min-width: 0; }
.fund-detail .side { display: grid; gap: 16px; align-content: start; position: sticky; top: 112px; align-self: start; }
.fund-detail .body { display: grid; gap: 48px; }
.fund-detail .body > div { display: grid; gap: 14px; }
.fund-detail .body p { color: var(--ink-2); }
.terms { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.terms th, .terms td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.terms th { font-weight: 400; color: var(--ink-3); width: 42%; padding-right: 16px; }
.bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--ink-2); }
.bullets li { padding-left: 22px; position: relative; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--bronze); }
@media (max-width: 860px) { .fund-detail { grid-template-columns: 1fr; } .fund-detail .side { position: static; } }

/* team (félagið) */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.person { display: grid; gap: 14px; align-content: start; }
.portrait { aspect-ratio: 4 / 5; max-width: 100%; background: var(--paper-2); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink-3); font-family: var(--font-display), sans-serif; font-size: 2.4rem; letter-spacing: -0.02em; }
.person .role { color: var(--ink-2); font-size: 15px; }
.person .bio { color: var(--ink-2); font-size: 15.5px; }


/* footer */
.site-footer { background: var(--night); color: var(--ivory); padding-block: 72px 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--night-line); }
.footer-grid > div { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.footer-grid h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-2); font-weight: 500; margin-bottom: 6px; }
.footer-grid a { color: var(--ivory); opacity: .85; }
.footer-grid a:hover { opacity: 1; }
.footer-brand .logo { height: 30px; width: auto; color: var(--ivory); }
.footer-brand .muted { color: var(--ivory-2); margin-top: 14px; }
.legal { display: grid; gap: 12px; padding-top: 28px; font-size: 13px; color: var(--ivory-2); }
.legal p { max-width: 82ch; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* scroll reveal: a quiet fade-up as sections come into view */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero-mark path { animation: none; }
  .js .flow .fx, .js .flow .ln { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; }
}

/* ---------------------------------------------------------------- additions to the draft */

.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 14px; font-size: 14px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* language switch at the end of the nav */
.nav .lang { font-size: 12px; letter-spacing: .14em; font-weight: 600; color: var(--ink-3); padding-left: 24px; border-left: 1px solid var(--line); align-self: center; padding-block: 2px; }
.nav .lang:hover { color: var(--ink); }
@media (max-width: 720px) { .nav .lang { border-left: 0; padding-left: 0; font-size: 15px; padding-block: 12px; align-self: stretch; border-bottom: 0; } }
/* without the script the phone menu is simply an open list */
html:not(.js) .menu-btn { display: none; }
@media (max-width: 720px) {
  html:not(.js) .header-row { height: auto; flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 18px; }
  html:not(.js) .nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; padding: 0; border: 0; }
  html:not(.js) .nav a { font-size: 15px; padding-block: 4px; border: 0; }
}
a.inline, .prose a, .legal a, .muted a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: text-decoration-color .15s; }
a.inline:hover, .prose a:hover, .legal a:hover, .muted a:hover { text-decoration-color: currentColor; }

/* team portraits: the photos are square, the frame is 4:5 */
img.portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); background: var(--paper-2); filter: grayscale(.15); }
.person { scroll-margin-top: 112px; }
.person .bio { display: grid; gap: 12px; }
.person .go { margin-top: 4px; justify-self: start; }

/* home: the team as a row under the firm facts */

/* home: three latest articles */
.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.post-cards a { display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--ink-3); padding-top: 22px; height: 100%; }
.post-cards time { font-size: 13px; letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.post-cards h3 { transition: color .15s; }
.post-cards p { color: var(--ink-2); font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-cards a:hover h3 { color: var(--accent-ink); }
.section-foot { margin-top: clamp(36px, 5vw, 56px); }
@media (max-width: 860px) { .post-cards { grid-template-columns: 1fr; } }

/* articles index: one block per year */
.years { display: grid; gap: clamp(48px, 6vw, 80px); }
.year { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); gap: clamp(20px, 4vw, 64px); }
.year > * { min-width: 0; }
.year h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--bronze-ink); font-variant-numeric: tabular-nums; position: sticky; top: 112px; align-self: start; }
.year h2.label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; font-weight: 500; }
.posts { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.posts a { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 8px 28px; padding-block: 20px; border-top: 1px solid var(--line); align-items: baseline; }
.posts time { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.posts h3 { font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; transition: color .15s; }
.posts p { color: var(--ink-2); font-size: 15px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.posts .src { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.posts a:hover h3 { color: var(--accent-ink); }
@media (max-width: 860px) {
  .year { grid-template-columns: 1fr; gap: 12px; }
  .year h2 { position: static; }
  .posts a { grid-template-columns: minmax(0, 1fr) auto; }
  .posts a > div { grid-column: 1 / -1; grid-row: 2; }
}

/* article page */
.article-head .hero-inner { max-width: 940px; }
.article-head .display { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -0.03em; }
.article-cover { margin: 0 auto; max-width: 1100px; padding-inline: var(--gutter); }
.article-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--paper-2); }
.article-body { padding-block: clamp(48px, 7vw, 96px) clamp(72px, 10vw, 140px); }
.article-body .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(24px, 6vw, 96px); }
.article-body .wrap > * { min-width: 0; }
.article-side { display: grid; gap: 22px; align-content: start; position: sticky; top: 112px; align-self: start; font-size: 14.5px; color: var(--ink-2); }
.article-side dl { margin: 0; display: grid; gap: 14px; }
.article-side dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.article-side dd { margin: 2px 0 0; color: var(--ink); }
@media (max-width: 960px) { .article-body .wrap { grid-template-columns: 1fr; } .article-side { position: static; order: 2; border-top: 1px solid var(--line); padding-top: 24px; } }

.prose { max-width: 40em; font-size: 18px; line-height: 1.7; display: grid; gap: 1.1em; }
.prose > * { min-width: 0; }
.prose h2 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.2; margin-top: .9em; }
.prose h3 { font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.25; margin-top: .7em; }
.prose h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-top: .5em; }
.prose strong { font-weight: 650; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: .45em; }
.prose li::marker { color: var(--bronze); }
.prose pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: .92em; background: var(--paper-2); padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; }
.prose figure { margin: .6em 0; display: grid; gap: 10px; }
.prose figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); background: var(--paper-2); }
.prose figcaption { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.prose a.embed { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-decoration: none; transition: border-color .2s; }
.prose a.embed:hover { border-color: var(--ink-3); }
.embed img { width: 160px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.embed span { display: grid; gap: 4px; font-size: 15px; line-height: 1.4; }
.embed small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 520px) { .prose a.embed { grid-template-columns: 1fr; } .embed img { width: 100%; } }
.article-foot { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }

.footer-grid address { font-style: normal; color: var(--ivory-2); line-height: 1.6; font-size: 15px; }

/* ---------------------------------------------------------------- dark theme details */
h1, h2, h3, h4, .fact .v, .cta-lines, .prose strong, .brand .logo { color: var(--ink); }
/* the V: bronze wedge on a light long stroke, as in the wordmark */
.hero-mark .stroke { fill: var(--body); }
.site-header.scrolled { box-shadow: var(--shadow-sm); }
a.fund:hover, .prose a.embed:hover { box-shadow: var(--shadow); }
.prose figure img, .article-cover img, img.portrait { box-shadow: var(--shadow); }
.prose pre { background: var(--paper-2); color: var(--body); }
.skip { background: var(--ink); color: var(--night); }
::selection { background: rgba(145, 125, 97, .45); color: var(--ink); }

@media (max-width: 720px) { :root { --header: 72px; } .brand .logo { height: 26px; } }

/* Félagið: the team in one row — portrait, name, role, story */
.section[id] { scroll-margin-top: var(--header); }
.team-head { margin-bottom: clamp(40px, 6vw, 72px); }
.team { align-items: start; }
/* each card links to the person's page */
.team .person a { display: grid; gap: 10px; }
.team .portrait-frame { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.team img.portrait { box-shadow: none; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.team .person a:hover img.portrait { transform: scale(1.03); }
.team .person .h3 { margin-top: 12px; transition: color .15s; }
.team .person .role { color: var(--ink-3); font-size: 14px; letter-spacing: .04em; }
.team .person a:hover .h3 { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .team img.portrait { transition: none; } }

/* a person's own page: large portrait left, the story right */
.person-page { padding-top: clamp(40px, 5vw, 72px); }
.back { display: inline-block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: clamp(32px, 4vw, 56px); transition: color .15s; }
.back:hover { color: var(--ink); }
.person-detail { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.person-detail > * { min-width: 0; }
.portrait-big { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.portrait-big img.portrait { box-shadow: none; }
.person-copy { display: grid; gap: 18px; max-width: 38em; }
.person-copy .display { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; }
.person-copy .role { color: var(--ink-3); font-size: 15px; letter-spacing: .04em; }
.person-copy .bio { display: grid; gap: 14px; color: var(--body); font-size: 17px; line-height: 1.7; margin-top: 8px; }
.person-copy .go { justify-self: start; margin-top: 8px; }
@media (max-width: 860px) { .person-detail { grid-template-columns: 1fr; } .portrait-big { max-width: 480px; } }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; gap: 56px; } .team img.portrait { max-width: 360px; } }

/* "Um okkur": the name left, the text and the two funds right */
/* "Um Visku": one centred column — the heading centred, then the text, the two funds and registration left-aligned within it */
.about-grid { display: grid; justify-items: center; gap: clamp(28px, 3.5vw, 48px); text-align: center; }
.about-grid > * { min-width: 0; }
.about-body { display: grid; gap: 22px; width: 100%; max-width: 40em; text-align: left; } /* the column is centred, its text reads left-aligned */
.about-body .lede { margin-inline: auto; }
.about-body .lede { color: var(--body); }
.registration { font-size: 14px; color: var(--ink-3); }

/* front page: the hero stays pinned under the header while the drawing sheet
   scrolls up over it (user, 2026-11-11, after the Stoðir front page): one
   screen, the statement left and vertically centred, the drawing large on the
   right and running off the right edge. The sheet has the page ground, so it
   covers the hero; the lifted edge + hairline show it as a sheet on top. */
.home-stage { position: relative; }
/* the hero fills the first screen on its own; the sheet starts below the fold */
.home-stage .hero-home { position: sticky; top: calc(var(--header) + env(safe-area-inset-top, 0px)); z-index: 0; min-height: calc(100svh - var(--header) - env(safe-area-inset-top, 0px)); }
.blueprint {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -28px 56px -24px rgba(20, 19, 18, .7);
}
.blueprint .wrap {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: clamp(32px, 5vw, 80px);
  min-height: calc(100svh - var(--header));
  padding-block: clamp(48px, 6vw, 96px);
}
.blueprint-text {
  margin: 0; max-width: 21em; color: var(--ink); text-wrap: balance;
  font-size: clamp(1.5rem, 2.3vw, 2.3rem); line-height: 1.3; font-weight: 340; letter-spacing: -0.01em;
}
.blueprint-copy { display: grid; gap: clamp(24px, 2.6vw, 36px); justify-items: start; }
/* the two funds under the statement: plain underlined links */
.fund-links { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 36px; font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.fund-links a {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em;
  text-decoration-color: var(--ink-3);
  transition: text-decoration-color .2s, color .2s;
}
.fund-links a:hover { text-decoration-color: var(--bronze); }
/* the figure reaches past the column to the window edge and a little beyond */
.blueprint-fig {
  margin: 0;
  margin-right: calc(-1 * (max(0px, (100vw - var(--max)) / 2) + var(--gutter) + 4vw));
}
.blueprint-fig { position: relative; }
.blueprint-fig img { position: relative; display: block; width: 100%; height: auto; }
/* the animated drawing: a loop that plays while on screen; the still (a frame
   of the loop) is the fallback. "lighten" drops the video's dark ground into
   the page. */
/* the figure's box is the drawing (1056×728 of the video). The video is the
   full frame height (its own grid lines run top to bottom) and reaches 437px
   further left for the satellite's orbit, which runs all the way down behind
   the text column; a mask (img/bp-mask.svg) softens the top and bottom edges.
   The text sits above it and the video takes no clicks. */
.bp-video { aspect-ratio: 1056 / 728; }
.blueprint-copy { position: relative; z-index: 1; }
.bp-video video, .bp-video .bp-still {
  pointer-events: none;
  position: absolute; left: -41.383%; top: -35.989%; width: 141.477%; height: 148.352%; display: block;
  -webkit-mask: url("img/bp-mask.svg") 0 0 / 100% 100% no-repeat;
  mask: url("img/bp-mask.svg") 0 0 / 100% 100% no-repeat;
}
.bp-video img, .bp-video video { mix-blend-mode: lighten; }
.js .bp-video:not(.still) .bp-still { visibility: hidden; }
.bp-video.still video { display: none; }
/* as the sheet covers it, the hero shrinks back and dims — the slide behind */
/* the newest articles along the bottom of the first screen, as a slider:
   a hairline, the label with "all articles" and two arrow buttons, then a
   row of four whole articles (date, title, subtitle); the arrows page
   through the rest, four at a time. It reaches just short of the V. */
.home-stage .hero-home { grid-template-rows: 1fr auto; padding-bottom: clamp(28px, 4vw, 56px); }
/* room between the (larger) lede and the slider even on short laptop screens:
   a minimum row gap, and less top padding when the window is short */
.home-stage .hero-home { row-gap: clamp(32px, 4.5vh, 56px); padding-top: clamp(32px, min(8vw, 9vh), 112px); }
.hero-posts { position: relative; z-index: 1; }
/* (2026-11-13 redesign, user: "doesn't look good") plain index of the newest
   articles: the label row, then each article as date + title under its own
   short rule; no summaries. The rule turns bronze on hover. */
.hp-inner { max-width: 88%; display: grid; gap: 20px; }
.hp-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.hp-label { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.hp-ctrl { display: flex; align-items: center; gap: 8px; }
.hp-ctrl a { margin-right: 14px; font-size: 15px; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: var(--ink-3); }
.hp-ctrl a:hover { color: var(--ink); text-decoration-color: var(--bronze); }
.hp-btn {
  width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.hp-btn:hover:not(:disabled) { border-color: var(--bronze); color: var(--ink); }
.hp-btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.hp-btn:disabled { opacity: .35; cursor: default; }
.hp-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 32px) / 4); gap: 32px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.hp-track::-webkit-scrollbar { display: none; }
.hp-track:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.hp-track li { scroll-snap-align: start; min-width: 0; border-top: 1px solid var(--line); transition: border-color .2s; }
.hp-track li:hover { border-top-color: var(--bronze); }
.hp-track a { display: grid; gap: 8px; align-content: start; padding-top: 16px; color: var(--ink); }
.hp-track time { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hp-track .t { font-size: 17px; line-height: 1.4; font-weight: 400; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1400px) { .hp-inner { max-width: 81%; } }  /* the V comes further in on narrower screens */
@media (max-width: 1180px) { .hp-track { grid-auto-columns: calc((100% - 2 * 32px) / 3); } }
@media (max-width: 860px) {
  .hp-inner { max-width: none; }
  .hp-track { grid-auto-columns: 100%; gap: 24px; }
  .hp-ctrl a { margin-right: 6px; }
}
.home-stage .hero-home { transform: scale(calc(1 - .07 * var(--p, 0))); transform-origin: 50% 40%; }
.home-stage .hero-home > .wrap { opacity: calc(1 - .8 * var(--p, 0)); }
.home-stage .hero-mark { opacity: calc(var(--mark-o, 1) * (1 - .8 * var(--p, 0))); }
@media (max-width: 860px) { .home-stage .hero-mark { --mark-o: .3; } } /* the V stays faint behind the text on phones */
.home-stage + .section { border-top: 1px solid var(--line); position: relative; z-index: 1; background: var(--paper); }
@media (max-width: 860px) {
  /* phones: no pinning (a pinned hero eats the screen); text above, drawing below */
  .home-stage .hero-home { position: relative; top: auto; min-height: calc(100svh - var(--header)); }
  .blueprint { box-shadow: none; }
  .blueprint .wrap { grid-template-columns: 1fr; min-height: 0; }
  .blueprint-fig { margin-right: calc(-1 * var(--gutter)); }
  /* phones: the whole video, satellite included (the drawing sits below the
     text, so there is room) */
  .bp-video { aspect-ratio: 1494 / 1080; }
  .bp-video video, .bp-video .bp-still { left: 0; top: 0; width: 100%; height: 100%; -webkit-mask: none; mask: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-stage .hero-home { position: relative; top: auto; transform: none; }
  .home-stage .hero-home > .wrap { opacity: 1; }
  .home-stage .hero-mark { opacity: var(--mark-o, 1); }
}

/* a heading for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* funds page: each fund's name, legal name and statement, one under the
   other, no rule between them. The statement is set like the front page
   statement, a step smaller, with a plain ragged right edge. */
.fund-copy { display: grid; gap: 14px; justify-items: start; }
/* the Greinar page intro, set like the fund statements (user, 2026-11-13) */
.lede.page-statement { color: var(--ink); font-size: clamp(1.25rem, 1.8vw, 1.8rem); line-height: 1.35; font-weight: 340; letter-spacing: -0.01em; }
.fund-copy .statement { margin: 18px 0 0; max-width: 20em; color: var(--ink); text-wrap: wrap; font-size: clamp(1.25rem, 1.8vw, 1.8rem); line-height: 1.35; font-weight: 340; letter-spacing: -0.01em; }
.fund-sec + .fund-sec { border-top: 0; padding-top: 0; }
/* the line under the funds: one plain link to the contact page */
.fund-more { margin: 0; font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
.fund-more a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: var(--ink-3); transition: text-decoration-color .2s; }
.fund-more a:hover { text-decoration-color: var(--bronze); }
}

/* each person's email under the role (team cards and person pages) */
.person-email { justify-self: start; font-size: 15px; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--ink-3); transition: color .15s, text-decoration-color .15s; }
.person-email:hover { color: var(--ink); text-decoration-color: var(--bronze); }

/* contact and articles pages: the body follows the short intro without a
   second full gap (their big headings were removed) */
.section.contact-body { padding-top: 0; }


/* Greinar page: sign up to the Substack mailing list without leaving the
   site (a plain form posting to Substack's no-JS endpoint, which opens its
   confirmation in a new tab; CSP form-action allows greinar.viskasjodir.is) */
.signup { display: grid; gap: 12px; max-width: 460px; margin-top: 8px; }
.signup label { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.signup-row { display: flex; }
.signup input[type="email"] {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
}
.signup input[type="email"]::placeholder { color: var(--ink-3); }
.signup input[type="email"]:focus { outline: none; border-color: var(--bronze); }
.signup button {
  width: 54px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--ink); background: var(--line); border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0;
  transition: background .15s, border-color .15s;
}
.signup button:hover, .signup button:focus-visible { background: var(--bronze); border-color: var(--bronze); outline: none; }