/* werxtatt.de: business card, legal pages, moodboard */

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Lexend";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2");
}

:root {
    --color-signal: #E8501A;
    --color-graphite: #1A1A1A;
    --color-slate: #4A4A4D;
    --color-chalk: #ECEBE7;
    --color-paper: #F6F5F2;

    --color-background: var(--color-chalk);
    --color-text: var(--color-graphite);
    --color-text-muted: var(--color-slate);
    --color-grid-line: rgb(26 26 26 / 0.05);
    --color-rule: rgb(26 26 26 / 0.14);

    --font-family-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;
    --font-family-base: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --space-page: clamp(1rem, 4vw, 3rem);
    --grid-size: 24px;
    /* Unbounded: cap height per em, and baseline distance from the top of a line box at line-height 1 */
    --font-cap-ratio-unbounded: 0.75;
    --font-baseline-ratio-unbounded: 0.875;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: var(--color-graphite);
        --color-text: var(--color-chalk);
        --color-text-muted: #A9A7A1;
        --color-grid-line: rgb(236 235 231 / 0.04);
        --color-rule: rgb(236 235 231 / 0.16);
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body { margin: 0; }

h1, h2, h3 { font-family: var(--font-family-display); }

strong { font-weight: 600; }

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--color-background);
    background-image:
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration-color: var(--color-signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

a:hover { color: var(--color-signal); }

a:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 3px;
}

/* Logo, inlined so dark mode can recolour the wordmark */

.logo {
    display: block;
    width: 100%;
    height: auto;
}

.logo__wordmark { fill: var(--color-text); }
.logo__mark { fill: var(--color-signal); }
.logo__tagline { fill: var(--color-text-muted); }

/* Business card on the home page */

.business-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-page);
    overflow: clip;
    text-align: center;
}

/* The wordmark SVG is 460 units wide, its baseline sits at 70.49 of 100. The tagline copies the subline
   of the old combined logo in units of that width: cap height 10.5, baseline 34.69 below the wordmark's,
   which is 5.18 below the bottom of the SVG. Colour slate. */
.business-card__brand {
    width: min(36rem, 100%);
    container-type: inline-size;
}

.business-card__title { margin: 0; }

.business-card__tagline {
    --tagline-cap-height: calc(10.5cqi * 100 / 460);
    --tagline-baseline-gap: calc(5.18cqi * 100 / 460);
    --tagline-font-size: calc(var(--tagline-cap-height) / var(--font-cap-ratio-unbounded));

    margin: calc(var(--tagline-baseline-gap) - var(--tagline-font-size) * var(--font-baseline-ratio-unbounded)) 0 0;
    color: var(--color-text-muted);
    font-family: var(--font-family-display);
    font-size: var(--tagline-font-size);
    font-weight: 400;
    line-height: 1;
}

.business-card__tagline-ending { display: inline-block; }

/* The drawing holds the wordmark, the construction drawing behind it and the ratchet button over the x */
.business-card__drawing { position: relative; }

.business-card__title {
    position: relative;
    z-index: 1;
}

/* Hit area over the x (195.84 to 250.84 of 460 wide, 30.49 to 70.49 of 100 high), a little larger than the x */
.business-card__ratchet {
    position: absolute;
    z-index: 2;
    top: 22%;
    left: 40.5%;
    width: 16%;
    height: 56%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.business-card__ratchet:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 2px;
}

.business-card .logo__ratchet {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: rotate 0.25s ease-out;
}

.business-card .logo__ratchet--turned { transform: rotate(180deg); }

.business-card__drawing:has(.business-card__ratchet:hover) .logo__ratchet { rotate: 14deg; }

/* Construction drawing: guides in signal orange, dimensions in slate; both settle faint behind the wordmark */
.blueprint {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.blueprint__drawing {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.blueprint__guide,
.blueprint__dimension {
    fill: none;
    /* In drawing units (about 1 px at full size). No non-scaling-stroke: it measures dashes on screen while
       pathLength measures the path in drawing units, so a drawn line stopped short of its end on large screens. */
    stroke-width: 0.8;
}

.blueprint__guide {
    stroke: var(--color-signal);
    opacity: 0.22;
}

.blueprint__dimension {
    stroke: var(--color-text-muted);
    opacity: 0.5;
}

.blueprint__label {
    position: absolute;
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
    font-size: 0.6875rem;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.75;
}

/* The measurements come from data-label, so they stay out of the page text that search engines read */
.blueprint__label::before { content: attr(data-label); }

/* Label positions in percent of the 460 × 100 drawing */
.blueprint__label--overall-width {
    top: -5.5%;
    left: 49.73%;
    transform: translate(-50%, -100%);
}

.blueprint__label--mark-size {
    top: 10.5%;
    left: 48.55%;
    transform: translate(-50%, -100%);
}

.blueprint__label--ascender,
.blueprint__label--x-height,
.blueprint__label--tagline-gap {
    left: 98.6%;
    transform: translate(0.4rem, -50%);
}

.blueprint__label--ascender { top: 25%; }
.blueprint__label--x-height { top: 50.49%; }
.blueprint__label--tagline-gap { top: 87.84%; }

.blueprint__label--baseline {
    top: 70.49%;
    left: 3%;
    transform: translate(-100%, -120%);
}

@media (max-width: 40rem) {
    .blueprint__label--ascender,
    .blueprint__label--x-height,
    .blueprint__label--tagline-gap,
    .blueprint__label--baseline,
    .blueprint__label--mark-size { display: none; }
}

/* Cursor position in wordmark units, shown only with a mouse */
.plotter-readout {
    position: fixed;
    top: 1rem;
    right: var(--space-page);
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Load sequence: guides draw, dimensions follow, the wordmark is traced and filled, the tagline is printed,
   then guides and dimensions fade back. The resting state above is the end state, so without motion nothing changes. */
@media (prefers-reduced-motion: no-preference) {
    .blueprint__guide,
    .blueprint__dimension,
    .business-card .logo__wordmark path,
    .business-card .logo__ratchet polygon { stroke-dasharray: 1 1.1; }

    .blueprint__guide { animation: blueprint-draw 1.3s cubic-bezier(0.6, 0, 0.2, 1) both, blueprint-settle 1.2s ease-in-out 3.8s both; }
    .blueprint__guide--vertical { animation-delay: 0.2s, 3.8s; }
    .blueprint__guide--circle { animation-delay: 0.7s, 3.8s; }

    .blueprint__dimension { animation: blueprint-draw 0.85s ease-out 1.1s both, blueprint-settle 1.2s ease-in-out 3.8s both; }

    .blueprint__label { animation: blueprint-label 5s ease-in-out both; }

    .business-card .logo__wordmark path,
    .business-card .logo__ratchet polygon {
        stroke: currentColor;
        stroke-opacity: 0;
        stroke-width: 0.8;
        animation: wordmark-trace 1.25s ease-in-out 1.4s both, wordmark-fill 0.7s ease-out 2.45s both;
    }

    .business-card .logo__wordmark { color: var(--color-text); }
    .business-card .logo__mark { color: var(--color-signal); }

    .business-card__tagline { animation: tagline-print 0.75s steps(24) 3s both; }
}

/* Dash 1, gap 1.1 and a start offset of 1.05 keep the hidden state free of rounding slivers */
@keyframes blueprint-draw {
    from { stroke-dashoffset: 1.05; }
    to { stroke-dashoffset: 0; }
}

@keyframes blueprint-settle {
    from { opacity: 1; }
}

/* Labels appear after the dimension lines (1.7 s to 2 s) and settle with the guides (3.8 s to 5 s) */
@keyframes blueprint-label {
    0%, 34% { opacity: 0; }
    40%, 76% { opacity: 1; }
}

@keyframes wordmark-trace {
    from {
        fill-opacity: 0;
        stroke-dashoffset: 1.05;
    }
    to {
        fill-opacity: 0;
        stroke-dashoffset: 0;
    }
}

@keyframes wordmark-fill {
    from {
        fill-opacity: 0;
        stroke-opacity: 1;
    }
    to {
        fill-opacity: 1;
        stroke-opacity: 0;
    }
}

@keyframes tagline-print {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
}

/* Header with the small logo on every page but the home page */

.site-header { padding: var(--space-page) var(--space-page) 0; }

.site-header__home {
    display: inline-block;
    width: min(11rem, 50vw);
}

.site-header__home:hover .logo__wordmark { fill: var(--color-signal); }

/* Footer */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem var(--space-page);
    border-top: 1px solid var(--color-rule);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.site-footer__copyright { margin: 0; }

.site-footer__navigation {
    display: flex;
    gap: 1.25rem;
}

.site-footer__link { text-decoration: none; }

.site-footer__link:hover,
.site-footer__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--color-signal);
    text-decoration-thickness: 2px;
}

/* Legal pages */

.legal-text {
    flex: 1;
    width: 100%;
    max-width: 44rem;
    padding: clamp(2rem, 6vw, 4rem) var(--space-page) 4rem;
}

.legal-text__title {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.legal-text__title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 6px;
    margin-top: 1rem;
    background: var(--color-signal);
}

.legal-text__heading {
    margin: 2.25rem 0 0.5rem;
    font-size: 1.125rem;
    line-height: 1.3;
}

.legal-text__paragraph {
    margin: 0 0 1rem;
    overflow-wrap: break-word;
}