.page-hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(var(--sp-8), 8vw, var(--sp-12)));
    padding-bottom: clamp(var(--sp-7), 6vw, var(--sp-10));
    border-bottom: var(--hairline) solid rgba(var(--rgb-gold), 0.16);
    background:
        radial-gradient(70% 100% at 50% 0%, rgba(var(--rgb-stone-warm), 0.14), transparent 70%),
        linear-gradient(180deg, rgba(var(--rgb-frame-deep), 0.9), transparent);
}

.page-hero .eyebrow {
    display: block;
    margin-bottom: var(--sp-4);
}

.page-title {
    max-width: 34rem;
    text-wrap: balance;
    font-family: var(--font-display);
    font-size: clamp(2rem, 2.4vw + 1.3rem, 3.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--ls-tight);
    color: var(--c-bone);
}

.page-hero .lead {
    max-width: var(--lore-measure);
    margin-top: var(--sp-5);
    color: var(--c-text-dim);
}

/* Per i titoli che devono stare su una riga sola: il limite di 34rem li
   mandava a capo. Su schermi stretti vanno a capo comunque, perche' li
   vincola il contenitore. */
.page-title.is-single {
    max-width: none;
}

/* Su lore.html l'introduzione occupa tutta la larghezza perche' anche il
   corpo della lore lo fa. Dove invece sotto c'e' una colonna stretta
   (i punti numerati, larghi 48rem) l'introduzione va portata alla stessa
   misura, altrimenti sembra un blocco staccato dal resto della pagina. */
.page-hero.hero-narrow .lead {
    max-width: 48rem;
}

.prose {
    max-width: 40rem;
}

.prose > * + * {
    margin-top: var(--sp-4);
}

.prose h3 {
    margin-top: var(--sp-8);
    font-size: var(--fs-500);
}

.prose h3:first-child {
    margin-top: 0;
}

.prose ul {
    margin: 0;
    padding-left: var(--sp-5);
    color: var(--c-text-dim);
}

.prose li + li {
    margin-top: var(--sp-2);
}

.prose strong {
    color: var(--c-bone);
    font-weight: 600;
}

.callout {
    padding: var(--sp-5);
    border: var(--hairline) solid rgba(var(--rgb-gold), 0.28);
    border-left-width: 2px;
    border-radius: var(--radius);
    background: rgba(var(--rgb-texture), 0.55);
    font-size: var(--fs-300);
    color: var(--c-text-dim);
}

.callout strong {
    color: var(--c-gold-glow);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 44rem;
}

.timeline li {
    position: relative;
    padding-left: var(--sp-7);
    padding-bottom: var(--sp-7);
}

.timeline li::before {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 0.55rem;
    bottom: 0;
    width: var(--hairline);
    background: var(--c-border-light);
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline li:last-child::before {
    display: none;
}

.timeline li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42rem;
    width: 0.7rem;
    height: 0.7rem;
    border: var(--hairline) solid var(--c-gold);
    border-radius: 50%;
    background: var(--c-bg);
}

.timeline .when {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-200);
    text-transform: uppercase;
    letter-spacing: var(--ls-title);
    color: var(--c-gold);
}

.timeline h3 {
    margin-top: var(--sp-2);
    font-size: var(--fs-500);
}

.timeline p {
    margin-top: var(--sp-2);
    font-size: var(--fs-300);
    color: var(--c-text-dim);
}

.timeline li.is-next::after {
    background: var(--c-gold-dim);
}

.steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    max-width: 48rem;
}

.steps > li {
    position: relative;
    counter-increment: step;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--sp-5);
    padding-bottom: var(--sp-8);
}

.steps > li::before {
    content: counter(step, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    font-family: var(--font-display);
    font-size: var(--fs-400);
    font-weight: 600;
    color: var(--c-gold);
    border: var(--hairline) solid rgba(var(--rgb-gold), 0.32);
    border-radius: 50%;
    background: rgba(var(--rgb-texture), 0.7);
}

.steps > li::after {
    content: '';
    position: absolute;
    left: 1.62rem;
    top: 3.9rem;
    bottom: var(--sp-3);
    width: var(--hairline);
    background: var(--c-border);
}

.steps > li:last-child {
    padding-bottom: 0;
}

.steps > li:last-child::after {
    display: none;
}

.steps h3 {
    font-size: var(--fs-500);
}

.steps p {
    margin-top: var(--sp-2);
    color: var(--c-text-dim);
    font-size: var(--fs-300);
}

.steps .btn,
.steps .copyfield {
    margin-top: var(--sp-4);
}

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.checklist li {
    position: relative;
    padding-left: var(--sp-5);
    font-size: var(--fs-300);
    color: var(--c-text);
}

.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52rem;
    width: 0.55rem;
    height: 0.55rem;
    transform: rotate(45deg);
    border: var(--hairline) solid var(--c-gold);
}

.grid-classes {
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.class-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.class-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: var(--hairline) solid var(--c-border);
}

.class-head h3 {
    margin-bottom: 0;
    font-size: var(--fs-500);
}

.class-role {
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-title);
    color: var(--c-gold);
    white-space: nowrap;
}

.class-passive {
    font-size: var(--fs-200);
    font-style: italic;
    color: var(--c-text-faint);
}

.kit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.kit li {
    position: relative;
    padding-left: var(--sp-4);
    font-size: var(--fs-200);
    color: var(--c-text-dim);
    line-height: var(--lh-snug);
}

.kit li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--c-gold-dim);
}

.kit b {
    color: var(--c-text);
    font-weight: 600;
}

.class-foot {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: var(--hairline) solid var(--c-border);
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--c-text-faint);
}

.rulebook {
    max-width: 46rem;
    counter-reset: rule;
}

.rulebook section + section {
    margin-top: var(--sp-8);
}

.rulebook h3 {
    padding-bottom: var(--sp-3);
    border-bottom: var(--hairline) solid var(--c-border);
    font-size: var(--fs-500);
}

.rulebook ol {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
}

.rulebook ol li {
    counter-increment: rule;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: var(--sp-3);
    font-size: var(--fs-300);
    color: var(--c-text-dim);
    line-height: var(--lh-snug);
}

.rulebook ol li::before {
    content: counter(rule);
    font-family: var(--font-ui);
    font-size: var(--fs-200);
    letter-spacing: var(--ls-normal);
    color: var(--c-gold-dim);
    padding-top: 0.15rem;
}

/* Variante per un regolamento che porta gia' la propria numerazione
   (1.1, 26.3, ...): il contatore automatico affiancherebbe un secondo
   numero diverso dal primo. Qui il numero arriva dal markup. */
.rulebook.is-numbered ol li::before {
    content: none;
}

.rulebook.is-numbered ol li {
    grid-template-columns: 3.4rem minmax(0, 1fr);
}

.rule-num {
    font-family: var(--font-ui);
    font-size: var(--fs-200);
    letter-spacing: var(--ls-normal);
    color: var(--c-gold-dim);
    padding-top: 0.15rem;
    white-space: nowrap;
}

.rulebook h3 .rule-chapter {
    color: var(--c-gold-dim);
    margin-right: 0.5em;
    font-size: 0.85em;
}

.rulebook ol p {
    margin-top: var(--sp-3);
}

.rulebook ol ul {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.rulebook ol ul li {
    display: block;
    position: relative;
    padding-left: var(--sp-4);
    font-size: var(--fs-200);
}

.rulebook ol ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--c-gold-dim);
}

.rulebook.is-numbered ol ul li {
    grid-template-columns: none;
}

.rule-manifesto {
    max-width: 46rem;
    margin-top: var(--sp-10);
    padding: var(--sp-6);
    border: var(--hairline) solid rgba(var(--rgb-gold), 0.28);
    border-left-width: 2px;
    border-radius: var(--radius);
    background: rgba(var(--rgb-texture), 0.55);
}

.rule-manifesto h3 {
    font-family: var(--font-display);
    font-size: var(--fs-500);
    color: var(--c-bone);
    margin-bottom: var(--sp-4);
}

.rule-manifesto p + p {
    margin-top: var(--sp-3);
}

.rule-manifesto p {
    font-size: var(--fs-300);
    color: var(--c-text-dim);
    line-height: var(--lh-snug);
}

.rulebook ol b {
    display: block;
    color: var(--c-bone);
    font-family: var(--font-display);
    font-size: var(--fs-400);
    font-weight: 600;
    margin-bottom: var(--sp-1);
}

.ladder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    border: var(--hairline) solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    counter-reset: rung;
}

.ladder div {
    counter-increment: rung;
    padding: var(--sp-5);
    border-right: var(--hairline) solid var(--c-border);
    background: rgba(var(--rgb-texture), 0.5);
}

.ladder div:last-child {
    border-right: 0;
}

.ladder div::before {
    content: 'Livello ' counter(rung);
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-title);
    color: var(--c-text-faint);
}

.ladder b {
    display: block;
    margin-top: var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-400);
    color: var(--c-bone);
}

.ladder span {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-200);
    color: var(--c-text-dim);
}

.team-group + .team-group {
    margin-top: var(--sp-10);
}

.team-group h2 {
    font-size: var(--fs-600);
}

.team-group > p {
    margin-top: var(--sp-3);
    max-width: 38rem;
    color: var(--c-text-dim);
    font-size: var(--fs-300);
}

.team-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
    margin-top: var(--sp-6);
}

.member {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-5) var(--sp-4);
    border: var(--hairline) solid var(--c-border);
    border-radius: var(--radius-lg);
    background: rgba(var(--rgb-texture), 0.55);
    transition: border-color var(--dur) var(--ease);
}

.member:hover {
    border-color: rgba(var(--rgb-gold), 0.3);
}

.member-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: var(--hairline) solid rgba(var(--rgb-gold), 0.35);
    background: linear-gradient(160deg, var(--c-surface-4), var(--c-surface-1));
    object-fit: cover;
}

.member-name {
    font-family: var(--font-display);
    font-size: var(--fs-400);
    font-weight: 600;
    color: var(--c-bone);
    line-height: 1.2;
    /* break-word spezzava i nick a meta' parola ("Pikudecant / u"). Con
       overflow-wrap la rottura avviene solo se la parola non ci sta
       comunque, e in quel caso il nome rimpicciolisce invece di spezzarsi. */
    overflow-wrap: break-word;
    hyphens: none;
}

.member-role {
    margin-top: var(--sp-1);
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--c-gold);
}

.member-bio {
    margin-top: var(--sp-3);
    font-size: var(--fs-200);
    color: var(--c-text-dim);
    line-height: var(--lh-snug);
}

.team-state {
    padding: var(--sp-6);
    border: var(--hairline) dashed var(--c-border-light);
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: var(--fs-300);
    color: var(--c-text-faint);
}

@media (max-width: 62rem) {
    .ladder div {
        border-right: 0;
        border-bottom: var(--hairline) solid var(--c-border);
    }

    .ladder div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 34rem) {
    .class-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-1);
    }

    .member {
        grid-template-columns: 1fr;
    }
}

.pack-group + .pack-group {
    margin-top: var(--sp-10);
}

.pack-group > h3 {
    font-size: var(--fs-600);
}

.pack-group-intro {
    margin-top: var(--sp-3);
    max-width: 40rem;
    font-size: var(--fs-300);
    color: var(--c-text-dim);
}

.grid-packs {
    grid-template-columns: repeat(auto-fill, minmax(min(16.5rem, 100%), 1fr));
    margin-top: var(--sp-6);
}

.pack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
}

.pack-has-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.pack-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--c-surface-1);
    background-size: cover;
    background-position: center;
    filter: var(--pack-img-filter);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease), filter var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}

.pack-bg.is-loaded {
    opacity: 1;
}

.pack-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(var(--rgb-frame-deep), var(--pack-img-veil-top)) 0%,
            rgba(var(--rgb-frame-deep), var(--pack-img-veil-mid)) 58%,
            rgba(var(--rgb-frame-deep), var(--pack-img-veil-bottom)) 100%);
}

.pack-has-image:hover .pack-bg {
    filter: var(--pack-img-filter-hover);
    transform: scale(1.05);
}

.pack-has-image .pack-head {
    border-bottom-color: rgba(var(--rgb-gold), 0.28);
}

.pack-has-image .kit li {
    color: var(--c-text);
}

.pack-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: var(--hairline) solid var(--c-border);
}

.pack-head h3 {
    margin-bottom: 0;
    font-size: var(--fs-400);
}

.pack-price {
    flex: none;
    padding: 0.15rem 0.5rem;
    font-family: var(--font-ui);
    font-size: var(--fs-200);
    letter-spacing: var(--ls-normal);
    white-space: nowrap;
    color: var(--c-gold-glow);
    border: var(--hairline) solid rgba(var(--rgb-gold), 0.38);
    border-radius: var(--radius);
    background: rgba(var(--rgb-stone-warm), 0.14);
}

.pack-note {
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: var(--hairline) solid var(--c-border);
    font-family: var(--font-ui);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--c-gold);
}

.page-404 {
    padding-top: calc(var(--header-h) + var(--sp-12));
}

.lore-read {
    padding-top: clamp(var(--sp-7), 6vw, var(--sp-10));
}

.lore-body {
    max-width: var(--lore-measure);
}

.lore-body h3 {
    margin-top: var(--sp-10);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: var(--hairline) solid rgba(var(--rgb-gold), 0.22);
    font-size: var(--fs-600);
    font-weight: 600;
    letter-spacing: var(--ls-normal);
    text-transform: uppercase;
}

.lore-body h3:first-child {
    margin-top: 0;
}

.lore-body p {
    font-size: var(--fs-400);
    line-height: 1.8;
    color: var(--c-text);
}

.lore-body p + p {
    margin-top: var(--sp-4);
}

/* Il float deve stare appena SOTTO l'altezza di due righe (2 x 1.8em):
   se combacia al pixel il browser spinge accanto al capolettera anche la
   terza riga, che si ritrova affiancata al vuoto. */
.lore-body h3 + p::first-letter {
    float: left;
    margin-right: 0.07em;
    font-family: var(--font-display);
    font-size: 3.2em;
    line-height: 1.04;
    font-weight: 600;
    color: var(--c-gold-glow);
}

.lore-figure {
    max-width: var(--lore-measure);
    margin: clamp(var(--sp-8), 6vw, var(--sp-10)) 0 0;
    position: relative;
    aspect-ratio: 21 / 9;
    border: var(--hairline) solid var(--c-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lore-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) brightness(0.7);
}

.lore-figure figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--sp-5);
    background: linear-gradient(180deg, transparent, rgba(var(--rgb-frame-deep), 0.92));
    font-family: var(--font-ui);
    font-size: var(--fs-200);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--c-text-dim);
}

@media (max-width: 48rem) {
    .lore-body h3 {
        font-size: var(--fs-500);
        margin-top: var(--sp-8);
    }

    .lore-body h3 + p::first-letter {
        font-size: 2.9em;
    }

    .lore-figure {
        aspect-ratio: 16 / 10;
    }
}

.checklist-no li::before {
    transform: none;
    border: 0;
    width: 0.62rem;
    height: 0.62rem;
    margin-top: 0.5rem;
    background:
        linear-gradient(45deg, transparent 44%, var(--c-urgent) 44%, var(--c-urgent) 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, var(--c-urgent) 44%, var(--c-urgent) 56%, transparent 56%);
}

.checklist-no li {
    color: var(--c-text-dim);
}

/* Le due liste stanno in colonne affiancate: senza questo su schermi larghi
   la seconda parte piu' in basso della prima quando i titoli hanno altezze
   diverse. */
.compare-lists {
    align-items: start;
}

.compare-lists h3 {
    font-size: var(--fs-500);
    padding-bottom: var(--sp-3);
    border-bottom: var(--hairline) solid var(--c-border);
}

.term-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
}

.term-list li {
    position: relative;
    padding-left: var(--sp-5);
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--c-text-dim);
}

.term-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.55rem;
    height: 0.55rem;
    transform: rotate(45deg);
    border: var(--hairline) solid var(--c-gold);
}

.term-list b {
    color: var(--c-bone);
    font-weight: 600;
}

.rule-index {
    max-width: 46rem;
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-8);
    border-bottom: var(--hairline) solid var(--c-border);
}

.rule-index ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: var(--sp-1) var(--sp-5);
}

.rule-index a {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: var(--sp-2);
    padding-block: 0.3rem;
    font-size: var(--fs-200);
    line-height: var(--lh-snug);
    color: var(--c-text-dim);
}

.rule-index a:hover {
    color: var(--c-bone);
}

.rule-index a span {
    font-family: var(--font-ui);
    letter-spacing: var(--ls-normal);
    color: var(--c-gold-dim);
}

.rule-index a:hover span {
    color: var(--c-gold-glow);
}

/* Un capitolo o una regola raggiunti da un link diretto restano evidenziati
   qualche istante, altrimenti in una pagina cosi' lunga non si capisce dove
   si e' finiti. */
.rulebook section:target h3,
.rulebook ol > li:target b {
    color: var(--c-gold-glow);
}

.rulebook ol > li:target {
    animation: rule-hit 2.4s var(--ease) 1;
}

@keyframes rule-hit {
    0%, 55% { background: rgba(var(--rgb-gold), 0.09); }
    100%    { background: transparent; }
}