@font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('home-fonts/patrick-hand-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Permanent Marker';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('home-fonts/permanent-marker-latin.woff2') format('woff2');
}
:root {
    color-scheme: light;
    --ink: #29254f;
    --paper: #fffef8;
    --cover-blue: #153f60;
    --yellow: #f9eb6c;
    --tab-blue: #b7d8f0;
    --mint: #91e4ce;
    --line: 32px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    min-width: 280px;
    min-height: 100vh;
    overflow-x: clip;
    padding: 76px 32px 46px;
    color: var(--ink);
    font-family: 'Patrick Hand', 'Segoe Print', cursive;
    background-color: #eaf2fb;
    background-image: radial-gradient(#bccfe5 .9px, transparent .9px);
    background-size: 18px 18px;
}
.notebook-container {
    width: min(100%, 760px);
    margin: 0 0 0 clamp(0px, calc(100% - 760px), 50%);
    position: relative;
    isolation: isolate;
    border-radius: 0 18px 18px 0;
    background: var(--cover-blue);
    box-shadow: 0 2px 0 #e1dccf, 0 3px 0 #aaa99d, 0 5px 0 #f4f0e5, 0 6px 0 #bbb8ac, 0 8px 0 #153f60, 6px 14px 20px #17354b20;
    perspective: 2400px;
    perspective-origin: 0 45%;
}
.cover-left {
    min-width: 0;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100%;
    border: 2px solid #0c293f;
    border-radius: 18px 0 0 18px;
    transform-origin: right center;
    box-shadow: inset 2px 2px 3px #ffffff16, inset -8px 0 16px #00000030, 0 7px 0 #1a354d, 0 9px 0 #0c293f;
    overflow: hidden;
    background-color: var(--cover-blue);
    /* Grana similpelle disegnata in CSS: nessuna immagine da scaricare. */
    background-image:
        radial-gradient(ellipse at 25% 30%, #ffffff0c 0 .6px, transparent 1px),
        radial-gradient(ellipse at 70% 65%, #00000024 0 .7px, transparent 1.2px),
        repeating-linear-gradient(115deg, #ffffff03 0 1px, transparent 1px 4px),
        linear-gradient(125deg, #ffffff08, transparent 40%, #00000020);
    background-size: 3px 5px, 5px 3px, 7px 7px, 100% 100%;
}
.cover-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 60px 36px;
}
.cover-engraving {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    opacity: .8;
    pointer-events: none;
}
.cover-left::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 1px dashed #91a2b654;
    border-radius: 9px;
    outline: 1px solid #071b2c3d;
    outline-offset: 5px;
    pointer-events: none;
}
.cover-left::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 26px;
    background: linear-gradient(90deg, #00000008, #00000040);
    border-left: 1px solid #ffffff0d;
    pointer-events: none;
}
.sticker-label {
    position: relative;
    z-index: 1;
    width: min(100%, 390px);
    padding: 38px 12px;
    color: #d4c9ae;
    background: transparent;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.4rem, 2.15vw, 2rem);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1px 1px #000000b3;
}
.sticker-label::before, .sticker-label::after {
    content: '';
    position: absolute;
    left: 24%;
    width: 52%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #b4a686a6 20% 80%, transparent);
    box-shadow: 0 1px 0 #00000040;
}
.sticker-label::before { top: 0; }
.sticker-label::after { bottom: 0; }
.spiral-spine {
    position: absolute;
    z-index: 4;
    top: 18px;
    bottom: 18px;
    left: -24px;
    width: 48px;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 18px, #29254f 18px 21px, #d7d6e8 21px 24px, #fff 24px 26px, #29254f 26px 29px, transparent 29px 44px);
    filter: drop-shadow(0 2px 1px #29254f30);
}
.spiral-spine::before, .spiral-spine::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: 12px;
    background: radial-gradient(circle, #29254f 0 5px, transparent 5.5px) 0 1px / 12px 44px;
}
.spiral-spine::before { left: 0; }
.spiral-spine::after { right: 0; }
.page-right {
    --paper-margin: 21px;
    min-width: 0;
    position: relative;
    padding: 30px 34px 24px 38px;
    border: 2px solid #81909a;
    border-radius: 0 18px 18px 0;
    background-color: var(--paper);
    background-image:
        url('paper-grain.svg'),
        linear-gradient(90deg, #6b62472b, #8b81600b 14px, transparent 46px, transparent calc(100% - 18px), #94846814),
        radial-gradient(ellipse at 65% 16%, #ffffff90, transparent 65%),
        linear-gradient(90deg, transparent var(--paper-margin), #d987925c var(--paper-margin) calc(var(--paper-margin) + 2px), transparent calc(var(--paper-margin) + 2px)),
        repeating-linear-gradient(0deg, transparent 0 calc(var(--line) - 1px), #9ab6cc4d calc(var(--line) - 1px) var(--line));
    background-size: 256px 256px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    box-shadow: inset 0 1px 0 #ffffffcc, inset -1px 0 2px #afa08240, inset 0 -2px 2px #adab9030;
}
.page-right::before {
    content: '';
    position: absolute;
    right: -12px;
    top: 76px;
    width: 11px;
    height: 62px;
    border: 2px solid var(--ink);
    border-left: 0;
    border-radius: 0 5px 5px 0;
    background: var(--tab-blue);
    box-shadow: 0 78px 0 -2px var(--mint), 0 78px 0 0 var(--ink), 0 156px 0 -2px var(--yellow), 0 156px 0 0 var(--ink);
}
header { position: relative; margin: 0 0 24px; padding: 0 0 8px; text-align: center; }
h1 {
    color: var(--cover-blue);
    position: relative;
    display: table;
    margin: 0 auto 13px;
    font-family: 'Permanent Marker', 'Segoe Print', cursive;
    font-size: clamp(2.9rem, 4.8vw, 4.25rem);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -.04em;
    transform: rotate(-3deg);
    isolation: isolate;
}
h1::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -7px;
    right: -10px;
    bottom: 3px;
    height: 26%;
    background: var(--yellow);
    transform: rotate(1deg) skewX(-12deg);
}
.subtitle { display: block; max-width: 490px; margin: auto; font-size: 1.125rem; line-height: 1.3; color: #615577; }
.doodle-bulb {
    position: absolute;
    z-index: 1;
    top: 24px;
    right: 26px;
    font-size: 2.2rem;
    transform: rotate(15deg);
}
.section-title {
    display: table;
    position: relative;
    margin: 0 0 17px;
    padding: 3px 11px 5px;
    border: 1.5px solid var(--ink);
    border-radius: 3px;
    background: var(--yellow);
    box-shadow: inset 0 1px 0 #ffffff80, 0 1px 0 #bab8a1, 1px 3px 5px #153f6026;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.2;
    transform: rotate(-1deg);
}
ul { list-style: none; margin: 0; padding: 0; }
.material-list, .archive-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; }
li { --accent: #dcd2ff; --wash: #f4efff; position: relative; min-width: 0; }
li:nth-child(4n + 2) { --accent: #a9e9d6; --wash: #edfaf4; }
li:nth-child(4n + 3) { --accent: #ffbfad; --wash: #fff1e9; }
li:nth-child(4n + 4) { --accent: #b6dcfc; --wash: #edf6ff; }
.material-list li:nth-child(5) { grid-column: 1 / -1; --accent: #f1dd79; --wash: #fffbe5; }
li a {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 64px;
    height: 100%;
    padding: 10px 13px 10px 39px;
    border: 1.5px solid #6e6284;
    border-radius: 5px 9px 6px 8px;
    box-shadow: inset 0 1px 0 #ffffffa0, 0 1px 0 #c5c7c6, 1px 3px 5px #153f6020;
    background: var(--wash);
    color: var(--ink);
    text-decoration: none;
    font-size: 1.35rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    -webkit-tap-highlight-color: #dcd2ff80;
}
li a::before {
    content: '';
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 6px;
    width: 23px;
    border-radius: 4px;
    background: var(--accent);
    transform: rotate(-3deg);
}
.marker { position: absolute; z-index: 1; top: 50%; left: 11px; transform: translateY(-50%); color: var(--ink); font-size: 1.1rem; pointer-events: none; }
.small-note { font-size: .84em; color: #625570; }
.material-list li:nth-child(5) a { display: block; align-content: center; }
.archive-title { margin-top: 30px; background: var(--tab-blue); color: var(--cover-blue); border-color: #6d8ba4; padding-right: 32px; }
.archive-note { font-size: .8em; font-weight: 400; }
.doodle-web { position: absolute; right: -17px; top: -16px; font-size: 2rem; transform: rotate(12deg); }
.archive-list { gap: 10px 12px; }
.archive-list li { --accent: #bfd9ee; --wash: #edf5fb; }
.archive-list li:nth-child(2n) { --accent: #abcce4; --wash: #e3edf7; }
.archive-list a { min-height: 52px; font-size: 1.2rem; color: var(--cover-blue); border-color: #7c97ac; }
.archive-list .marker { color: var(--cover-blue); }
.archive-list a:focus-visible { outline-color: var(--cover-blue); }
.archive-list li:nth-child(2) a { padding-right: 42px; }
.doodle-ghost { position: absolute; z-index: 1; top: 50%; right: 10px; margin-top: -14px; font-size: 1.45rem; transform: rotate(10deg); pointer-events: none; transition: transform .2s ease; }
footer { margin-top: 25px; text-align: right; color: #5d536f; font-size: 1rem; }
footer p { display: inline-block; margin: 0; padding: 3px 9px; background: #eee8f8; transform: rotate(-2deg); }
a:focus-visible { outline: 3px solid #5845c8; outline-offset: 4px; background: var(--accent); }
li a:active { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
    li a:hover { transform: translate(-1px, -3px); box-shadow: inset 0 1px 0 #ffffff80, 1px 5px 8px #153f6026; background: var(--accent); }
    .archive-list li:hover .doodle-ghost { transform: translateY(-4px) rotate(-12deg); }
}
/* Stessa fibra del foglio anche su etichette e cartoncini, in tutti gli stati. */
.section-title, li a, li a:is(:hover, :focus-visible, :active), li a::before {
    background-image: url('paper-grain.svg'), linear-gradient(155deg, #ffffff30, transparent 60%, #50472e09);
    background-size: 256px 256px, 100% 100%;
    background-repeat: repeat, no-repeat;
}
@keyframes unfold-cover {
    0%, 12% { transform: rotateY(180deg); }
    56% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}
/* Un'unica etichetta, leggibile su entrambe le facce durante la rotazione. */
@keyframes turn-cover-face {
    0%, 55.99% { transform: rotateY(180deg); }
    56%, 100% { transform: rotateY(0deg); }
}
@keyframes mobile-page-in {
    0% { opacity: .5; transform: translateY(18px) rotate(-1.2deg) scale(.98); }
    65% { opacity: 1; transform: translateY(-3px) rotate(.3deg) scale(1); }
    100% { opacity: 1; transform: none; }
}
@keyframes draw-highlight {
    from { transform: rotate(1deg) skewX(-12deg) scaleX(0); }
    to { transform: rotate(1deg) skewX(-12deg) scaleX(1); }
}
@keyframes bulb-in { 0% { transform: rotate(-15deg) scale(.7); } 60% { transform: rotate(22deg) scale(1.1); } 100% { transform: rotate(15deg) scale(1); } }
@media (min-width: 821px) {
    .intro-desktop .cover-left { animation: unfold-cover 1.4s cubic-bezier(.4, 0, .2, 1) both; }
    .intro-desktop .cover-face { animation: turn-cover-face 1.4s linear both; }
}
@media (max-width: 1060px) and (min-width: 821px) {
    body { padding-inline: 23px; }
    .page-right { padding-inline: 29px 23px; }
    .doodle-bulb { right: 12px; top: 18px; font-size: 1.8rem; }
}
@media (max-width: 820px) {
    body { padding: 68px 22px 28px; }
    .notebook-container { width: 100%; max-width: 690px; margin: 0 auto; border-radius: 18px; perspective: none; background: var(--paper); }
    .cover-left, .spiral-spine { display: none; }
    .page-right { border-radius: 18px; padding-top: 31px; transform-origin: 50% 15%; }
    .intro-mobile .page-right { animation: mobile-page-in .68s cubic-bezier(.2, .7, .2, 1) both; }
    .intro-mobile h1::before { transform-origin: left center; animation: draw-highlight .5s .12s ease-out both; }
    .intro-mobile .doodle-bulb { animation: bulb-in .6s .06s both; }
    h1 { font-size: 3.5rem; }
    .doodle-bulb { top: 24px; right: 25px; }
}
@media (max-width: 560px) {
    body { padding: 65px 14px 24px 10px; }
    .notebook-container { border-radius: 13px; box-shadow: 0 2px 0 #e1dccf, 0 3px 0 #aaa99d, 0 5px 0 #f4f0e5, 0 6px 0 #153f60, 3px 9px 12px #17354b18; }
    .page-right { --paper-margin: 13px; padding: 30px 16px 25px 25px; border-radius: 13px; }
    .page-right::before { width: 8px; right: -9px; height: 47px; }
    header { margin-bottom: 25px; }
    h1 { font-size: clamp(2.2rem, 10.5vw, 3.4rem); }
    .subtitle { max-width: 305px; font-size: 1rem; line-height: 1.25; }
    .doodle-bulb { right: 10px; top: 19px; font-size: 1.5rem; }
    .section-title { max-width: 100%; font-size: 1.25rem; padding-inline: 8px; }
    .material-list, .archive-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    li a { min-height: 56px; font-size: 1.35rem; padding-block: 11px; }
    .material-list li:nth-child(5) a { min-height: 68px; }
    .small-note { display: block; margin-top: 3px; font-size: .8em; }
    .archive-title { padding-right: 20px; margin-top: 29px; }
    .archive-note { font-size: .78em; }
    .archive-list a { font-size: 1.25rem; min-height: 52px; }
    .doodle-web { font-size: 1.65rem; right: -9px; }
    footer { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
    body { padding: 0; background: white; }
    .notebook-container { display: block; width: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; perspective: none; }
    .cover-left, .spiral-spine, .page-right::before, .doodle-bulb { display: none; }
    .page-right { padding: 0; background: white; }
    li { break-inside: avoid; }
    li a { box-shadow: none; }
}