:root {
    --c-void:            #0a0a0a;
    --c-bg:              #0c0c0c;
    --c-surface-0:       #0e0e0e;
    --c-surface-1:       #121212;
    --c-surface-2:       #141414;
    --c-surface-3:       #161616;
    --c-surface-4:       #1a1a1a;
    --c-surface-5:       #1c1c1c;

    --c-border:          #2a2a2a;
    --c-border-light:    #3a3a3a;

    --c-stone:           #4a4a4a;
    --c-stone-warm:      #5a5550;
    --c-ash:             #6a6a6a;
    --c-silver:          #8a8a8a;
    --c-silver-bright:   #a0a0a0;
    --c-smoke:           #2a2826;

    --c-gold-dim:        #5a5040;
    --c-gold:            #8a7a5a;
    --c-gold-glow:       #b0a080;
    --c-ember:           #6a5a4a;
    --c-ember-glow:      #8a7a60;

    --c-text:            #c0b8a8;
    --c-text-dim:        #8f877e;
    --c-text-faint:      #6e675f;
    --c-bone:            #d4cec4;

    --c-urgent:          #b5563f;
    --c-ok:              #5a8a5f;
    --c-warn:            #a89050;

    --rgb-black:         0, 0, 0;
    --rgb-texture:       20, 20, 20;
    --rgb-frame:         18, 18, 18;
    --rgb-frame-deep:    10, 10, 10;
    --rgb-stone-warm:    90, 85, 80;
    --rgb-stone-lit:     120, 115, 110;
    --rgb-ash:           106, 106, 106;
    --rgb-silver:        138, 138, 138;
    --rgb-silver-bright: 160, 160, 160;
    --rgb-sheen:         200, 200, 200;
    --rgb-gold:          138, 122, 90;
    --rgb-ember-glow:    138, 122, 96;
    --rgb-bone:          212, 206, 196;
    --rgb-urgent:        181, 86, 63;
    --rgb-ok:            90, 138, 95;

    --font-display: 'Cinzel', 'Times New Roman', Georgia, serif;
    --font-body:    'Crimson Text', Georgia, 'Times New Roman', serif;
    --font-ui:      'Barlow Condensed', 'Arial Narrow', Helvetica, sans-serif;

    --fs-100: 0.6875rem;
    --fs-200: 0.8125rem;
    --fs-300: 0.9375rem;
    --fs-400: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
    --fs-500: clamp(1.1875rem, 0.5vw + 1.05rem, 1.4375rem);
    --fs-600: clamp(1.375rem, 0.9vw + 1.15rem, 1.875rem);
    --fs-700: clamp(1.75rem, 1.8vw + 1.2rem, 2.625rem);
    --fs-800: clamp(2.25rem, 3.4vw + 1.2rem, 4rem);

    --ls-tight:  0.02em;
    --ls-normal: 0.08em;
    --ls-wide:   0.13em;
    --ls-title:  0.21em;
    --ls-mega:   0.26em;

    --lh-tight: 1.12;
    --lh-snug:  1.35;
    --lh-body:  1.72;

    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  2.5rem;
    --sp-8:  3rem;
    --sp-10: 4rem;
    --sp-12: 6rem;
    --sp-16: 8rem;

    --wrap:       78rem;
    --wrap-tight: 46rem;

    /* Larghezza della colonna di testo lungo: la usano sia l'introduzione
       in cima alla pagina sia il corpo della lore, cosi' restano allineate.
       'none' = tutta la larghezza del contenitore. Impostandola a 48rem la
       riga scende sotto gli 80 caratteri, che si legge meglio su paragrafi
       lunghi, ma le due colonne restano comunque identiche fra loro. */
    --lore-measure: none;
    --gutter:     clamp(1.25rem, 4vw, 3rem);
    --header-h:   4.75rem;

    --radius:      3px;
    --radius-lg:   5px;
    --hairline:    1px;

    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast:  140ms;
    --dur:       260ms;
    --dur-slow:  620ms;

    --z-torch:  1;
    --z-body:   2;
    --z-header: 60;
    --z-drawer: 70;

    --torch-x: 50%;
    --torch-y: 30%;
    --torch-size: 34rem;

    --pack-img-filter: grayscale(0.66) brightness(0.52) contrast(1.06);
    --pack-img-filter-hover: grayscale(0.36) brightness(0.66) contrast(1.06);
    --pack-img-veil-top: 0.5;
    --pack-img-veil-mid: 0.8;
    --pack-img-veil-bottom: 0.92;

    --brand-tint: grayscale(1) sepia(0.52) saturate(0.75) brightness(1.22) contrast(0.94);

    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@media (max-width: 48rem) {
    :root {
        --header-h: 4rem;
        --torch-size: 22rem;
    }
}