/* ==========================================================================
   TALMOEN HOLDING AS
   assets/css/main.css
   --------------------------------------------------------------------------
   01  Design tokens
   02  Reset and base
   03  Layout primitives
   04  Typography primitives
   05  Motion / reveal
   06  Header and navigation
   07  Mobile menu
   08  Hero
   09  Section shell
   10  Matrix grid
   11  Project entries
   12  External links
   13  Corporate record
   14  Holdings register
   15  Footer
   16  Error page
   17  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */

:root {
    /* Colour ------------------------------------------------------------ */
    --background-primary: #08090a;
    --background-secondary: #0f1113;
    --background-blur: rgba(8, 9, 10, 0.78);

    --surface-primary: #131518;
    --surface-secondary: #181b1f;

    --text-primary: #f4f4f5;
    /* Lifted from the specified #a1a1aa (7.78:1) to 11.5:1 against the
       background, so running body copy reads clearly while still sitting a
       visible step below --text-primary. */
    --text-secondary: #c4c4cd;
    /* The specified muted tone was #71717a, which measures 4.12:1 against the
       primary background and fails WCAG AA for the small monospace labels it
       is used on. Lifted to the nearest tone that clears 4.5:1 on both the
       background (4.96:1) and the surface (4.55:1). */
    --text-muted: #7e7e88;

    --border-primary: #25282d;
    --border-secondary: #1c1f23;

    --accent-primary: #ffffff;

    /* Typography -------------------------------------------------------- */
    --font-primary: "Inter", "Manrope", "Geist", "IBM Plex Sans",
        -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "IBM Plex Mono", "Geist Mono",
        ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
        "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

    /* Spacing scale — 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 --------- */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 6rem;
    --space-9: 8rem;

    /* Layout ------------------------------------------------------------ */
    --max-width: 1440px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --header-height: 4rem;
    --section-padding: clamp(6rem, 12vw, 12rem);

    /* Motion ------------------------------------------------------------ */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 250ms;
    --duration-base: 400ms;
    --duration-slow: 700ms;
}

@media (min-width: 960px) {
    :root {
        --header-height: 4.75rem;
    }
}


/* ==========================================================================
   02  RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1.5rem);
    scrollbar-color: var(--border-primary) var(--background-primary);
}

body {
    margin: 0;
    background-color: var(--background-primary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    font-feature-settings: "kern" 1, "liga" 1, "cv11" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, p, dl, dd, figure, blockquote {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

address {
    font-style: normal;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

::selection {
    background-color: var(--text-primary);
    color: var(--background-primary);
}

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
    border-radius: 1px;
}

.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    padding: 0.875rem 1.25rem;
    background-color: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateY(-120%);
    transition: transform var(--duration-fast) var(--ease);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: -2px;
}


/* ==========================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */

.container {
    width: min(100% - var(--gutter) * 2, var(--max-width));
    margin-inline: auto;
}


/* ==========================================================================
   04  TYPOGRAPHY PRIMITIVES
   ========================================================================== */

/* Small technical label — monospace, uppercase, letterspaced. */
.label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Reading sizes below carry roughly a 6 to 8 per cent increase over the
   original scale, paired with the higher --text-secondary contrast. */
.lead {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--text-secondary);
    max-width: 46ch;
    text-wrap: pretty;
}

.prose {
    max-width: 62ch;
}

.prose p {
    font-size: clamp(1.0625rem, 1.4vw, 1.21875rem);
    line-height: 1.75;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.prose p + p {
    margin-top: var(--space-4);
}

.prose__note {
    margin-top: var(--space-4);
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    color: var(--text-muted) !important;
    padding-left: var(--space-3);
    border-left: 1px solid var(--border-primary);
}


/* ==========================================================================
   05  MOTION / REVEAL
   ========================================================================== */

.js [data-animate] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--duration-slow) var(--ease),
        transform var(--duration-slow) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-animate].is-visible {
    opacity: 1;
    transform: none;
}

[data-delay="1"] { --reveal-delay:  70ms; }
[data-delay="2"] { --reveal-delay: 140ms; }
[data-delay="3"] { --reveal-delay: 210ms; }
[data-delay="4"] { --reveal-delay: 280ms; }
[data-delay="5"] { --reveal-delay: 360ms; }
[data-delay="6"] { --reveal-delay: 440ms; }


/* ==========================================================================
   06  HEADER AND NAVIGATION
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    height: var(--header-height);
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--duration-base) var(--ease),
        border-color var(--duration-base) var(--ease);
}

.header.is-scrolled {
    background-color: var(--background-blur);
    border-bottom-color: var(--border-secondary);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

/* While the mobile menu is open the header sits on the flat menu surface. */
.header.is-menu-open {
    background-color: var(--background-primary);
    border-bottom-color: var(--border-secondary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: 100%;
}

/* Brand --------------------------------------------------------------- */

.brand {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

.brand__mark {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
}

.brand__cursor {
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease);
}

.brand:hover .brand__cursor {
    color: var(--text-primary);
}

.brand__legal {
    display: none;
    padding-left: 0.75rem;
    border-left: 1px solid var(--border-primary);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

@media (min-width: 1120px) {
    .brand__legal { display: block; }
}

/* Primary navigation --------------------------------------------------- */

.nav {
    display: none;
}

@media (min-width: 960px) {
    .nav { display: block; }
}

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 2.6vw, 2.75rem);
}

.nav__link {
    position: relative;
    display: block;
    padding-block: 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease);
}

.nav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
    color: var(--text-primary);
}

.nav__link:hover::after,
.nav__link.is-active::after {
    transform: scaleX(1);
}

/* Menu toggle ---------------------------------------------------------- */

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease);
}

.menu-toggle:hover {
    color: var(--text-primary);
}

@media (min-width: 960px) {
    .menu-toggle { display: none; }
}

.menu-toggle__icon {
    position: relative;
    display: block;
    width: 20px;
    height: 10px;
}

.menu-toggle__icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: transform var(--duration-base) var(--ease);
}

.menu-toggle__icon span:first-child { top: 0; }
.menu-toggle__icon span:last-child  { bottom: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child {
    transform: translateY(4.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
}


/* ==========================================================================
   07  MOBILE MENU
   ========================================================================== */

.menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
    padding-bottom: var(--space-6);
    background-color: var(--background-primary);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition:
        opacity var(--duration-base) var(--ease),
        transform var(--duration-base) var(--ease),
        visibility 0s linear var(--duration-base);
}

.menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

@media (min-width: 960px) {
    .menu { display: none; }
}

.menu__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-7);
    padding-top: var(--space-6);
}

.menu__list {
    border-top: 1px solid var(--border-secondary);
}

.menu__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: clamp(1rem, 3.5vw, 1.375rem);
    border-bottom: 1px solid var(--border-secondary);
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease);
    opacity: 0;
    transform: translateY(10px);
}

.menu__link:hover,
.menu__link:focus-visible {
    color: var(--text-primary);
}

.menu__index {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.menu.is-open .menu__link {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--duration-base) var(--ease),
        transform var(--duration-base) var(--ease),
        color var(--duration-fast) var(--ease);
}

.menu.is-open .menu__list li:nth-child(1) .menu__link { transition-delay:  60ms; }
.menu.is-open .menu__list li:nth-child(2) .menu__link { transition-delay: 100ms; }
.menu.is-open .menu__list li:nth-child(3) .menu__link { transition-delay: 140ms; }
.menu.is-open .menu__list li:nth-child(4) .menu__link { transition-delay: 180ms; }
.menu.is-open .menu__list li:nth-child(5) .menu__link { transition-delay: 220ms; }
.menu.is-open .menu__list li:nth-child(6) .menu__link { transition-delay: 260ms; }

.menu__meta {
    display: flex;
    gap: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-secondary);
}

.menu__meta dt {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.menu__meta dd {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

/* Scroll lock applied to <body> while the menu is open. */
body.is-locked {
    overflow: hidden;
}


/* ==========================================================================
   08  HERO
   ========================================================================== */

.hero {
    position: relative;
}

.hero__inner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + clamp(2.5rem, 10vh, 6rem));
    padding-bottom: clamp(2rem, 5vh, 3.25rem);
}

/* Static structural grid — four hairlines aligned to the content column. */
.hero__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--border-secondary) 1px, transparent 1px);
    background-size: 25% 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 62%, transparent 100%);
    pointer-events: none;
}

@media (max-width: 899px) {
    .hero__inner::before { display: none; }
}

.hero__title {
    margin-top: clamp(1.5rem, 4vh, 3rem);
    font-weight: 400;
}

.hero__company {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 1.1vw, 0.8125rem);
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.hero__display {
    display: block;
    margin-top: clamp(1.25rem, 3vh, 2.25rem);
    /* Constrained by viewport height as well as width so the explore cue and
       the metadata row stay above the fold on short laptop screens. */
    font-size: clamp(2.75rem, min(8.6vw, 12.5vh), 7.5rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.98;
    color: var(--text-primary);
}

.hero__word {
    display: block;
}

.hero__word:nth-child(2) { color: var(--text-secondary); }
.hero__word:nth-child(3) { color: var(--text-muted); }

.hero__lead {
    margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

.hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-top: auto;
    padding-top: clamp(2rem, 5vh, 3.5rem);
}

/* Side by side the explore cue and the metadata crowd each other on a phone,
   so they stack rather than wrap. */
@media (max-width: 559px) {
    .hero__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }
}

.explore {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease);
}

.explore:hover {
    color: var(--text-primary);
}

.explore__arrow {
    transition: transform var(--duration-base) var(--ease);
}

.explore:hover .explore__arrow {
    transform: translateY(4px);
}

/* Metadata pair -------------------------------------------------------- */

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) clamp(2rem, 5vw, 4rem);
}

.meta__item dt {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.meta__item dd {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}


/* ==========================================================================
   09  SECTION SHELL
   ========================================================================== */

.section {
    border-top: 1px solid var(--border-secondary);
    padding-block: var(--section-padding);
}

.section__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
}

/* Grid items default to min-width:auto, which lets a long unbreakable label
   push the whole column past the container. */
.section__grid > * {
    min-width: 0;
}

@media (min-width: 900px) {
    .section__grid {
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    }
}

.section__aside {
    align-self: start;
}

@media (min-width: 900px) {
    .section__aside {
        position: sticky;
        top: calc(var(--header-height) + 3rem);
    }
}

.section__index {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-primary);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section__index span:first-child { color: var(--text-primary); }
.section__index span:last-child  { color: var(--text-secondary); }
.section__slash { color: var(--border-primary); }

.section__title {
    font-size: clamp(1.875rem, 4.2vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--text-primary);
    text-wrap: balance;
}

.section__title + .prose,
.section__title + .record {
    margin-top: clamp(2rem, 4vw, 3rem);
}


/* ==========================================================================
   10  MATRIX GRID
   ========================================================================== */

.matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border: 1px solid var(--border-secondary);
    background-color: var(--border-secondary);
}

@media (min-width: 760px) {
    .matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.matrix__cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: clamp(7rem, 11vw, 9.5rem);
    padding: clamp(1.125rem, 2.2vw, 1.625rem);
    background-color: var(--background-primary);
    transition: background-color var(--duration-fast) var(--ease);
}

.matrix__cell:hover {
    background-color: var(--surface-primary);
}

.matrix__index {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease);
}

.matrix__cell:hover .matrix__index {
    color: var(--text-secondary);
}

.matrix__label {
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    font-weight: 450;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--text-secondary);
    text-wrap: balance;
    transition: color var(--duration-fast) var(--ease);
}

.matrix__cell:hover .matrix__label {
    color: var(--text-primary);
}


/* ==========================================================================
   11  PROJECT ENTRIES
   --------------------------------------------------------------------------
   Deliberately lighter than the holdings register above: no figures, no
   status column, one line each. These are independent projects and should
   not read with the same weight as a corporate holding. The whole row is the
   link, so the target area stays generous on touch.
   ========================================================================== */

.entries {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--border-secondary);
}

.entry {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-4);
    row-gap: 0.375rem;
    padding-block: clamp(1.125rem, 2.4vw, 1.5rem);
    border-top: 1px solid var(--border-secondary);
}

.entry__name {
    grid-column: 1;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.entry__text {
    grid-column: 1;
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    line-height: 1.6;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.entry__arrow {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--text-muted);
    transition:
        transform var(--duration-base) var(--ease),
        color var(--duration-fast) var(--ease);
}

@media (min-width: 640px) {
    .entry {
        grid-template-columns: 11rem minmax(0, 1fr) auto;
        column-gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .entry__text { grid-column: 2; }
    .entry__arrow { grid-column: 3; }
}

.entry::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--text-muted);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease);
}

.entry:hover::before,
.entry:focus-visible::before {
    transform: scaleX(1);
}

.entry:hover .entry__text,
.entry:focus-visible .entry__text {
    color: var(--text-primary);
}

.entry:hover .entry__arrow,
.entry:focus-visible .entry__arrow {
    color: var(--text-primary);
    transform: translate(3px, -3px);
}


/* ==========================================================================
   12  EXTERNAL LINKS
   ========================================================================== */

.links {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ext {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease);
}

.ext:hover,
.ext:focus-visible {
    color: var(--text-primary);
}

.ext__rule {
    display: block;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width var(--duration-base) var(--ease);
}

.ext:hover .ext__rule,
.ext:focus-visible .ext__rule {
    width: clamp(1.5rem, 4vw, 3rem);
}

.ext__arrow {
    display: block;
    transition: transform var(--duration-base) var(--ease);
}

.ext:hover .ext__arrow,
.ext:focus-visible .ext__arrow {
    transform: translate(3px, -3px);
}

.ext:hover .ext__arrow--up,
.ext:focus-visible .ext__arrow--up {
    transform: translate(0, -3px);
}

/* "Brønnøysundregistrene" is 21 monospace characters and cannot break, so the
   floor and the gap are tuned to keep it inside a 320px viewport. */
.ext--lg {
    gap: 0.625rem;
    font-size: clamp(0.8125rem, 3.4vw, 1.375rem);
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.ext--sm {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    color: var(--text-muted);
}


/* ==========================================================================
   13  CORPORATE RECORD
   ========================================================================== */

.record {
    display: grid;
    gap: 1px;
    border: 1px solid var(--border-secondary);
    background-color: var(--border-secondary);
}

@media (min-width: 620px) {
    .record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.record__row {
    padding: clamp(1.375rem, 3vw, 2rem);
    background-color: var(--background-primary);
}

.record__row dt {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.record__row dd {
    margin-top: 0.75rem;
    font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
    font-weight: 450;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.verify {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 4vw, 2.75rem);
    border: 1px solid var(--border-primary);
    background-color: var(--surface-primary);
}

.verify__caption {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.verify .ext {
    margin-top: var(--space-3);
}

.verify__note {
    margin-top: var(--space-4);
    max-width: 48ch;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--text-secondary);
    text-wrap: pretty;
}


/* ==========================================================================
   14  HOLDINGS REGISTER
   --------------------------------------------------------------------------
   Shares the row rhythm of the projects list: a label rail, the entry itself,
   and a right aligned figure. The "held by" line carries the ownership chain
   in words, so no connector graphics are needed and the reading order stays
   correct for assistive technology.
   ========================================================================== */

.holdings {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--border-secondary);
}

.holding {
    position: relative;
    display: grid;
    gap: var(--space-3);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--border-secondary);
}

@media (min-width: 760px) {
    .holding {
        grid-template-columns: 7.5rem minmax(0, 1fr) 11rem;
        gap: clamp(1.5rem, 3vw, 3rem);
        align-items: start;
    }
}

.holding::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--text-muted);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease);
}

.holding:hover::before {
    transform: scaleX(1);
}

.holding__rank {
    padding-top: 0.35em;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.holding__name {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
}

.holding__text {
    margin-top: var(--space-2);
    max-width: 52ch;
    font-size: clamp(1rem, 1.25vw, 1.0625rem);
    line-height: 1.65;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.holding__meta {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--text-muted);
}

.holding__body .ext {
    margin-top: var(--space-4);
}

.holding__stake {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.2em;
}

@media (min-width: 760px) {
    .holding__stake {
        align-items: flex-end;
        text-align: right;
    }
}

.holding__stake-value {
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
}

.holding__stake-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ==========================================================================
   15  FOOTER
   ========================================================================== */

.footer {
    border-top: 1px solid var(--border-secondary);
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.footer__inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 820px) {
    .footer__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
}

.footer__mark {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-primary);
}

.footer__legal {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (min-width: 820px) {
    .footer__nav ul { align-items: flex-end; }
}

.footer__copy {
    grid-column: 1 / -1;
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--border-secondary);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ==========================================================================
   16  ERROR PAGE
   ========================================================================== */

.error {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + clamp(3rem, 10vh, 6rem));
    padding-bottom: clamp(3rem, 10vh, 6rem);
}

.error__code {
    font-size: clamp(4.5rem, 16vw, 12rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: var(--text-primary);
}

.error__title {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid var(--border-secondary);
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.6vw, 0.9375rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.error__text {
    margin-top: var(--space-4);
    max-width: 44ch;
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.7;
    color: var(--text-muted);
}

.error__action {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.error__action .ext__rule {
    width: 1.5rem;
}

.error__action:hover .ext__rule {
    width: 3rem;
}

.error__action .ext__arrow {
    transition: transform var(--duration-base) var(--ease);
}

.error__action:hover .ext__arrow {
    transform: translateX(4px);
}


/* ==========================================================================
   17  REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    html { scroll-behavior: auto !important; }

    .js [data-animate] {
        opacity: 1;
        transform: none;
    }

    .menu__link {
        opacity: 1;
        transform: none;
    }
}