/*
  Datalogik – site styles. Design direction C, "Teknisk tegning": a faint drawing grid, white sheets with thin
  black rules, data sheets, line drawings and a footer laid out as a drawing's title block.

  Colour rule: red and blue are for graphics only (lines, rings, markers, button faces), never for text.
  All text is grey. Links are recognised by their underline, not by colour.
  In dark mode the graphic colours switch to lighter tints so they keep at least 3:1 against the background;
  button faces keep the brand red, since white text on it has 7.4:1.
*/

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --brand-red: #A71930;       /* Pantone 187 – logo, button faces */
    --red: #A71930;             /* lines, rings, markers */
    --blue: #3019A7;
    --fg: #1A1A1B;
    --muted: #56565A;
    --bg: #F2F2F1;
    --paper: #FFFFFF;
    --rule: #CACAC7;
    --grid: rgba(26, 26, 27, 0.055);
    --hatch: rgba(26, 26, 27, 0.45);

    --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", Consolas, monospace;
    --page: 80rem;
    --gutter: clamp(1rem, 4vw, 5rem);
    --gap: 1.25rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --red: #C15E6E;
        --blue: #8375CA;
        --fg: #E8E8E6;
        --muted: #A9A9A6;
        --bg: #121314;
        --paper: #1B1C1E;
        --rule: #393B3E;
        --grid: rgba(232, 232, 230, 0.05);
        --hatch: rgba(232, 232, 230, 0.5);
    }
}

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

html { color-scheme: light dark; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--fg);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
}

main { flex: 1; }

.container { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

h1, h2, h3 { line-height: 1.02; font-weight: 800; font-stretch: 72%; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.9rem, 1.6rem + 5vw, 6.5rem); line-height: 0.95; }
h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
h3 { font-size: 1.75rem; font-stretch: 80%; }

.mono, .eyebrow, .label { font-family: var(--mono); }
.eyebrow { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.eyebrow::before { content: "+ "; }
.label { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--muted); max-width: 40rem; margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--paper); padding: 0.5rem 1rem; z-index: 10; }

/* ---------- Buttons ---------- */

.buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.button {
    display: inline-flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0.8rem 1.5rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--fg);
    background: var(--paper);
    color: var(--fg);
}
.button:hover { text-decoration: underline; }
.button-primary { background: var(--brand-red); border-color: var(--brand-red); color: #FFFFFF; }

/* ---------- Header ---------- */

.site-header { position: relative; background: var(--paper); border-bottom: 1px solid var(--fg); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: 1rem; }
.logo { display: block; line-height: 0; }
.logo img { height: 42px; width: auto; }

.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; font-weight: 600; display: inline-block; padding-block: 0.4rem; }
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a[aria-current="page"] {
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-decoration-thickness: 3px;
}

.menu-wide { display: none; }
.menu-narrow summary { cursor: pointer; list-style: none; padding: 0.6rem 1rem; border: 1px solid var(--fg); font-weight: 700; }
.menu-narrow summary::-webkit-details-marker { display: none; }
.menu-narrow[open] nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--fg);
    padding: 0.5rem var(--gutter) 1rem;
    z-index: 5;
}
.menu-narrow[open] li { border-bottom: 1px solid var(--rule); }
.menu-narrow[open] a { padding-block: 0.8rem; }

@media (min-width: 62rem) {
    .menu-wide { display: flex; align-items: center; gap: 2rem; }
    .menu-wide ul { display: flex; gap: 2rem; }
    .menu-narrow { display: none; }
}

/* ---------- Sections ---------- */

.section { padding-block: 0 clamp(4rem, 8vw, 7rem); display: flex; flex-direction: column; gap: 1.75rem; }
.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 2rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--fg);
}

.sheet-paper { background: var(--paper); border: 1px solid var(--fg); }

/* ---------- Hero (front page and pages with a figure) ---------- */

.hero {
    display: grid;
    gap: 3rem;
    padding-block: clamp(3rem, 7vw, 6.5rem);
    align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
@media (min-width: 62rem) {
    .hero.has-figure { grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); }
}

/* ---------- Figures: line drawings ---------- */

.figure { margin: 0; display: flex; flex-direction: column; }
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.95rem;
    line-height: 1.5;
}
.figure figcaption .label { flex-shrink: 0; }

.fig-line { fill: none; stroke: var(--fg); stroke-width: 1.3; }
.fig-thin { fill: none; stroke: var(--muted); stroke-width: 1; }
.fig-thin-box { stroke: var(--muted); stroke-width: 1; }  /* keeps its fill="url(#hatch)" attribute */
.fig-red { fill: none; stroke: var(--red); stroke-width: 2.2; }
.fig-blue { fill: none; stroke: var(--blue); stroke-width: 2; }
.fig-dash { stroke-dasharray: 8 6; }
.fig-fill-red { fill: var(--red); stroke: none; }
.fig-hatch-line { stroke: var(--hatch); stroke-width: 1.5; }
.fig-text { fill: var(--fg); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.fig-small { fill: var(--muted); font-family: var(--mono); font-size: 11px; }

/* Lines draw themselves: every drawn element has pathLength="1". Without JS, or with reduced motion, they are simply there. */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
    .js .figure .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
    .js .figure .draw.fig-dash { stroke-dasharray: 1 1; }
    .js .figure .appear { opacity: 0; }
    .js .figure.is-drawn .draw { animation: draw 1.1s ease-out forwards; }
    .js .figure.is-drawn .appear { animation: appear 0.5s ease-out forwards; }
    .js .figure.is-drawn .t1 { animation-delay: 0.25s; }
    .js .figure.is-drawn .t2 { animation-delay: 0.6s; }
    .js .figure.is-drawn .t3 { animation-delay: 0.95s; }
    .js .figure.is-drawn .t4 { animation-delay: 1.3s; }
    .js .figure.is-drawn .t5 { animation-delay: 1.7s; }
    .js .figure.is-drawn .t6 { animation-delay: 2.1s; }
}

/* ---------- 3D model ---------- */

.model canvas { display: block; width: 100%; aspect-ratio: 4 / 3; cursor: grab; touch-action: none; }
.model canvas:active { cursor: grabbing; }
.model canvas:focus-visible { outline-offset: -3px; }

/* ---------- Data sheets ---------- */

.sheet-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.sheet-card { display: flex; flex-direction: column; }
.sheet-card h3 { padding: 1.3rem 1.3rem 1.1rem; border-bottom: 1px solid var(--rule); }
.sheet-card h3 a { text-decoration: none; }
.sheet-card h3 a:hover { text-decoration: underline; }
.sheet-card > p { margin: 0; padding: 1.1rem 1.3rem 0; color: var(--muted); }
.sheet-card .more { margin-top: auto; padding: 1rem 1.3rem; border-top: 1px solid var(--rule); font-weight: 700; }

.facts { margin: 0; padding: 1.1rem 1.3rem 1.3rem; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.6rem 0.75rem; font-size: 0.95rem; line-height: 1.5; }
.facts dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.facts dd { margin: 0; }

/* ---------- Specification table ---------- */

.spec-scroll { overflow-x: auto; }
.spec { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 46rem; }
.spec th { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--fg); }
.spec td { padding: 1.2rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec tr:last-child td { border-bottom: 0; }
.spec td:first-child a { font-weight: 800; font-size: 1.25rem; font-stretch: 80%; }
.spec .muted { color: var(--muted); }
.spec .num { font-family: var(--mono); white-space: nowrap; }

/* ---------- Formula ---------- */

.formula { padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.75rem); display: flex; flex-direction: column; gap: 2.2rem; }
.formula-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; margin: 0; font-size: clamp(2rem, 1rem + 3.5vw, 3.5rem); font-weight: 800; font-stretch: 72%; line-height: 1.1; }
.formula-line .op { font-weight: 400; color: var(--muted); }
.formula-line .result { border-bottom: 6px solid var(--red); }
.formula-notes { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); color: var(--muted); }
.formula-notes p { margin: 0; }

/* ---------- Partners ---------- */

.partner { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.partner .name { font-size: 1.9rem; font-weight: 800; font-stretch: 80%; line-height: 1.1; }
.partner .role { color: var(--muted); }
.partner .contact { font-family: var(--mono); font-size: 0.875rem; margin-top: 0.6rem; }

/* ---------- Call to action ---------- */

.call { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 0 3rem; }
.call h2 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); }

/* ---------- Content pages ---------- */

.page-body { display: grid; gap: 2.5rem; padding-bottom: clamp(4rem, 8vw, 7rem); align-items: start; }
@media (min-width: 62rem) {
    .page-body.has-sheet { grid-template-columns: minmax(0, 1fr) 22rem; }
}
.page-aside { position: sticky; top: 1.5rem; }
.page-aside .label { display: block; padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--fg); }

.prose { max-width: 42rem; min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-block: 0 1em; }
.prose h2 { margin-block: 1.6em 0.5em; font-size: 2rem; }
.prose h3 { margin-block: 1.4em 0.4em; font-size: 1.4rem; }
.prose table { border-collapse: collapse; margin-block: 1em 1.5em; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 0.4em 0.8em 0.4em 0; text-align: left; }
.prose code { font-family: var(--mono); font-size: 0.9em; background: var(--paper); border: 1px solid var(--rule); padding: 0.1em 0.35em; }

.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.card { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.card h2 { font-size: 1.5rem; font-stretch: 80%; }
.card p { margin: 0; color: var(--muted); }

.draft-note {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    border: 2px dashed var(--muted);
    background: var(--paper);
    padding: 0.6rem 1rem;
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
}
.draft-note code { font-family: var(--mono); }

/* ---------- Footer: the drawing's title block ---------- */

.site-footer { padding-block: 0 2.5rem; }
.titleblock {
    background: var(--paper);
    border: 2px solid var(--fg);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 0.95rem;
    line-height: 1.45;
}
.titleblock > * { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--fg); min-width: 0; }
.titleblock > :nth-child(odd of .cell) { border-right: 1px solid var(--fg); }
.titleblock > :nth-last-child(-n + 2) { border-bottom: 0; }
.titleblock .label { display: block; font-size: 0.68rem; }
.titleblock .brand { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.titleblock .brand img { height: 36px; width: auto; }
.titleblock .brand .label { display: inline; }

@media (min-width: 62rem) {
    .titleblock { grid-template-columns: 1.3fr 1fr 1.3fr 1.3fr 1fr; }
    .titleblock .brand { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: space-between; border-right: 1px solid var(--fg); border-bottom: 0; }
    .titleblock > .cell { border-right: 1px solid var(--fg); }
    .titleblock > .cell.end { border-right: 0; }
    .titleblock > .cell.last-row { border-bottom: 0; }
}

/* ---------- Price list ---------- */

.price-table { min-width: 0; }
.price-table th.num, .price-table td.num { text-align: right; width: 12rem; }
.price-table td:first-child { font-weight: 400; font-size: 1.0625rem; }