/* Underskin — Shared page hero (menu pages) */

.page-hero {
    background: var(--section-bg, var(--surface));
    padding-block: var(--space-xxl);
    text-align: center;
    border-bottom: 1px solid var(--accent);
}

.page-hero__title {
    font-size: var(--font-size-hero);
    margin: 0 0 var(--space-sm);
    color: var(--section-heading, inherit);
}

.page-hero__subtitle {
    font-size: var(--font-size-xl);
    color: var(--section-subtitle, var(--accent));
    /* p resta block/centered, nessuna banda gialla qui. La tape sta sullo
       span interno (page-hero__subtitle-mark). */
    line-height: 1.5;
    /* Stacco extra dal titolo — dà respiro visivo tra H1 grosso e tape. */
    margin-top: var(--space-md);
}

/* Washi tape utility — riusabile ovunque via classe u-tape.
   PNG fotorealistico (tape.png, 1536x1024) applicato via border-image
   9-slice: torn caps sinistra/destra preservati, middle horizontal stretch
   per adattarsi a testi di lunghezza variabile senza distorcere le pieghe.
   Colore testo definito dal contesto (color:). */
.u-tape {
    display: inline-block;
    color: var(--bg);
    padding: 0.9em 0.8em 0.8em;
    transform: rotate(-3deg);
    /* border-* trasparenti — border-image sostituisce il rendering.
       Border-width controlla dimensione corners rendered a schermo.
       Slice values (px in source PNG): top/right/bottom/left definiscono
       le regioni fisse; middle stretcha via border-image-repeat. */
    background: transparent;
    border-style: solid;
    border-color: transparent;
    /* em-based border → caps del tape scalano col font-size. Su testi grandi
       (hero) tape lungo, su piccoli (year timeline) caps stretti. */
    border-width: 0.6em 1.3em 0.6em 1.6em;
    border-image-source: url("../../img/tape.png?v=3");
    border-image-slice: 30 90 30 120 fill;
    border-image-repeat: stretch;
    border-image-width: 1;
    filter:
        drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.10))
        drop-shadow(3px 4px 6px rgba(0, 0, 0, 0.14));
}