/* ===========================================
   senggack.xyz — Creamy Pastel Telegram Office
   =========================================== */

/* --- Custom Properties (Design Palette) --- */
:root {
    --desk-surface: #3B2A1A;
    --paper-surface: #F5EDE0;
    --telegram-strip: #FDF6E3;
    --wax-seal: #C2847A;
    --wax-seal-hover: #A86E65;
    --deco-ornament: #C4A265;
    --heading-ink: #5B4A3A;
    --body-ink: #4A3D30;
    --annotation-ink: #8B5E3C;
    --margin-note-ink: #7B6853;
    --envelope-interior: #B8C5A8;
    --perforation-dots: #DDD0BC;
    --shadow-depth: rgba(30, 18, 8, 0.25);
    --cream-warm: #F2E6D0;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--desk-surface);
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Libre Baskerville', Georgia, serif;
    color: var(--body-ink);
    line-height: 1.75;
    /* Wood grain texture via CSS gradient */
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(80, 55, 30, 0.12) 40px,
            rgba(80, 55, 30, 0.12) 41px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 97px,
            rgba(100, 70, 35, 0.08) 97px,
            rgba(100, 70, 35, 0.08) 99px
        ),
        repeating-linear-gradient(
            88deg,
            transparent,
            transparent 150px,
            rgba(60, 40, 20, 0.06) 150px,
            rgba(60, 40, 20, 0.06) 152px
        ),
        linear-gradient(180deg, #3B2A1A 0%, #2E2015 100%);
    background-attachment: fixed;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Poiret One', 'Didot', serif;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--heading-ink);
}

.card-heading {
    font-size: clamp(2rem, 5vw, 3.8rem);
    margin-bottom: 1.2rem;
    position: relative;
    display: inline-block;
    cursor: default;
    transition: text-shadow 300ms ease;
}

.card-heading:hover {
    text-shadow: 2px 1px 0 rgba(91, 74, 58, 0.2);
}

.card-body {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--body-ink);
    margin-bottom: 1rem;
}

.card-body:last-of-type {
    margin-bottom: 0;
}

/* --- Wax Seal Navigation --- */
#wax-seal-nav {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    opacity: 0;
    transition: opacity 600ms ease 1800ms;
}

body.loaded #wax-seal-nav {
    opacity: 1;
}

.wax-seal {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wax-seal);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream-warm);
    box-shadow: 0 2px 6px var(--shadow-depth), inset 0 1px 2px rgba(255,255,255,0.15);
    transition: transform 250ms ease-out, background-color 250ms ease-out, box-shadow 250ms ease-out;
    animation: seal-bob 4s ease-in-out infinite;
}

.wax-seal:nth-child(2) { animation-delay: -0.8s; }
.wax-seal:nth-child(3) { animation-delay: -1.6s; }
.wax-seal:nth-child(4) { animation-delay: -2.4s; }
.wax-seal:nth-child(5) { animation-delay: -3.2s; }

@keyframes seal-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.wax-seal:hover {
    transform: scale(0.92);
    background-color: var(--wax-seal-hover);
    box-shadow: 0 1px 4px var(--shadow-depth), inset 0 2px 4px rgba(0,0,0,0.15);
}

.wax-seal:active {
    transform: scale(0.85);
}

.seal-icon {
    width: 22px;
    height: 22px;
}

/* --- Hero Envelope --- */
#hero-envelope {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.envelope {
    width: 70vw;
    max-width: 700px;
    height: 50vh;
    max-height: 500px;
    position: relative;
    transform: translateY(100vh);
    opacity: 0;
    transition: none;
}

body.loaded .envelope {
    animation: envelope-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards 300ms;
}

@keyframes envelope-enter {
    from {
        transform: translateY(100vh);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.envelope-body {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--paper-surface);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--shadow-depth);
    overflow: visible;
}

/* Shophouse arch at top of envelope */
.envelope-arch {
    position: absolute;
    top: -40px;
    left: 10%;
    right: 10%;
    height: 80px;
    background: var(--paper-surface);
    border-radius: 50% 50% 0 0;
    box-shadow: 0 -4px 16px rgba(30, 18, 8, 0.1);
}

.envelope-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem;
}

.envelope-title {
    font-family: 'Poiret One', serif;
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--heading-ink);
    opacity: 0.7;
    text-align: center;
}

/* Wax seal on hero envelope */
.wax-seal-hero {
    margin-top: 2rem;
}

.seal-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--wax-seal);
    box-shadow: 0 2px 8px var(--shadow-depth), inset 0 2px 4px rgba(255,255,255,0.15);
    position: relative;
}

.seal-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid var(--cream-warm);
    opacity: 0.6;
}

.seal-circle.large {
    width: 80px;
    height: 80px;
}

.seal-circle.large::after {
    width: 28px;
    height: 28px;
}

/* Envelope flap */
.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, var(--cream-warm) 0%, var(--paper-surface) 100%);
    clip-path: polygon(0 0, 50% 60%, 100% 0);
    transform-origin: top center;
    transform: rotateX(0deg);
    transition: none;
    z-index: 10;
    backface-visibility: hidden;
}

body.flap-open .envelope-flap {
    animation: flap-open 600ms ease-in-out forwards;
}

@keyframes flap-open {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(180deg); }
}

body.envelope-faded .envelope {
    opacity: 0.3;
    transform: translateY(20vh);
    transition: opacity 600ms ease, transform 600ms ease;
}

/* --- Paper Texture System (applied to all cards) --- */
.document-card {
    position: relative;
    background: var(--paper-surface);
    padding: 2.5rem 3rem;
    margin: 1.5rem auto;
    max-width: 720px;
    width: 85%;
    box-shadow: 0 4px 16px var(--shadow-depth);
    transition: transform 250ms ease-out, box-shadow 250ms ease-out;
    opacity: 0;
    transform: translateY(60px);
}

/* Paper grain noise */
.document-card::before {
    content: '';
    position: absolute;
    inset: 0;
    filter: url(#noise);
    opacity: 0.035;
    pointer-events: none;
    z-index: 1;
}

/* Foxing vignette */
.document-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(139, 119, 91, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Card rotations */
.card-1 { transform: rotate(-1.5deg) translateY(60px); }
.card-2 { transform: rotate(2.2deg) translateY(60px); }
.card-3 { transform: rotate(-0.8deg) translateY(60px); }
.card-4 { transform: rotate(1.8deg) translateY(60px); }
.card-5 { transform: rotate(-2.1deg) translateY(60px); }
.card-6 { transform: rotate(0.9deg) translateY(60px); }
.card-7 { transform: rotate(-1.7deg) translateY(60px); }
.card-8 { transform: rotate(2.5deg) translateY(60px); }
.card-9 { transform: rotate(-1.2deg) translateY(60px); }
.card-10 { transform: rotate(0.5deg) translateY(60px); }

/* Visible (scroll-triggered) state */
.document-card.visible {
    opacity: 1;
}

.card-1.visible { transform: rotate(-1.5deg) translateY(0); }
.card-2.visible { transform: rotate(2.2deg) translateY(0); }
.card-3.visible { transform: rotate(-0.8deg) translateY(0); }
.card-4.visible { transform: rotate(1.8deg) translateY(0); }
.card-5.visible { transform: rotate(-2.1deg) translateY(0); }
.card-6.visible { transform: rotate(0.9deg) translateY(0); }
.card-7.visible { transform: rotate(-1.7deg) translateY(0); }
.card-8.visible { transform: rotate(2.5deg) translateY(0); }
.card-9.visible { transform: rotate(-1.2deg) translateY(0); }
.card-10.visible { transform: rotate(0.5deg) translateY(0); }

/* Receded state for distant cards */
.document-card.receded {
    opacity: 0.7;
}

/* Card hover lift */
.document-card:hover {
    box-shadow: 0 8px 28px var(--shadow-depth);
}

.card-1:hover { transform: rotate(-1deg) translateY(-4px); }
.card-2:hover { transform: rotate(1.7deg) translateY(-4px); }
.card-3:hover { transform: rotate(-0.3deg) translateY(-4px); }
.card-4:hover { transform: rotate(1.3deg) translateY(-4px); }
.card-5:hover { transform: rotate(-1.6deg) translateY(-4px); }
.card-6:hover { transform: rotate(0.4deg) translateY(-4px); }
.card-7:hover { transform: rotate(-1.2deg) translateY(-4px); }
.card-8:hover { transform: rotate(2deg) translateY(-4px); }
.card-9:hover { transform: rotate(-0.7deg) translateY(-4px); }
.card-10:hover { transform: rotate(0deg) translateY(-4px); }

/* Overlap effect between adjacent cards */
.card-2 { margin-top: -25px; z-index: 2; }
.card-3 { margin-top: -15px; z-index: 3; }
.card-4 { margin-top: -30px; z-index: 4; }
.card-5 { margin-top: -20px; z-index: 5; }
.card-6 { margin-top: -10px; z-index: 6; }
.card-7 { margin-top: -25px; z-index: 7; }
.card-8 { margin-top: -20px; z-index: 8; }
.card-9 { margin-top: -30px; z-index: 9; }
.card-10 { margin-top: -15px; z-index: 10; }

/* Card highlight pulse (when navigated via seal) */
@keyframes card-pulse {
    0% { box-shadow: 0 4px 16px var(--shadow-depth); }
    50% { box-shadow: 0 4px 32px rgba(196, 162, 101, 0.4); }
    100% { box-shadow: 0 4px 16px var(--shadow-depth); }
}

.document-card.pulse {
    animation: card-pulse 400ms ease;
}

/* --- Telegram Strip --- */
.telegram-strip {
    width: 90%;
    max-width: 800px;
    margin: 2rem auto 1rem;
    position: relative;
    background: var(--telegram-strip);
    padding: 0.6rem 0;
    overflow: hidden;
}

.telegram-perforation {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-radial-gradient(
        circle at 6px center,
        var(--perforation-dots) 0,
        var(--perforation-dots) 2px,
        transparent 2px,
        transparent 12px
    );
    /* Fallback: use repeating-linear-gradient for perforation effect */
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 4px,
        var(--perforation-dots) 4px,
        var(--perforation-dots) 8px,
        transparent 8px,
        transparent 12px
    );
}

.telegram-perforation.top {
    top: 0;
}

.telegram-perforation.bottom {
    bottom: 0;
}

.telegram-text {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--margin-note-ink);
    white-space: nowrap;
    overflow: hidden;
    padding: 0.3rem 0;
}

.ticker-content {
    display: inline-block;
    animation: ticker-scroll 40s linear infinite;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.telegram-strip.paused .ticker-content {
    animation-play-state: paused;
}

/* --- Margin Annotations --- */
.margin-annotation {
    position: absolute;
    width: 200px;
    transform: rotate(var(--ann-rotate, -5deg));
    top: var(--ann-top, 30%);
    opacity: 0;
    transition: opacity 400ms ease 400ms, transform 400ms ease 400ms;
    z-index: 20;
}

.margin-annotation[data-annotation="right"] {
    right: -100px;
    transform: rotate(var(--ann-rotate, -5deg)) translateX(20px);
}

.margin-annotation[data-annotation="left"] {
    left: -100px;
    transform: rotate(var(--ann-rotate, 5deg)) translateX(-20px);
}

.margin-annotation.visible {
    opacity: 1;
}

.margin-annotation.visible[data-annotation="right"] {
    transform: rotate(var(--ann-rotate, -5deg)) translateX(0);
}

.margin-annotation.visible[data-annotation="left"] {
    transform: rotate(var(--ann-rotate, 5deg)) translateX(0);
}

.annotation-text {
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
    color: var(--annotation-ink);
    line-height: 1.4;
    display: block;
    padding-bottom: 4px;
    /* Batik wave underline */
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0px,
        var(--annotation-ink) 3px,
        transparent 6px,
        transparent 8px,
        var(--annotation-ink) 11px,
        transparent 14px
    );
    background-size: 14px 2px;
    background-position: bottom left;
    background-repeat: repeat-x;
}

/* --- Deco Ornaments --- */

/* Sunburst */
.deco-sunburst {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(196, 162, 101, 0.12) 2deg,
        transparent 4deg,
        transparent 10deg,
        rgba(196, 162, 101, 0.12) 12deg,
        transparent 14deg,
        transparent 20deg,
        rgba(196, 162, 101, 0.12) 22deg,
        transparent 24deg,
        transparent 30deg,
        rgba(196, 162, 101, 0.12) 32deg,
        transparent 34deg,
        transparent 40deg,
        rgba(196, 162, 101, 0.12) 42deg,
        transparent 44deg,
        transparent 50deg,
        rgba(196, 162, 101, 0.12) 52deg,
        transparent 54deg,
        transparent 60deg,
        rgba(196, 162, 101, 0.12) 62deg,
        transparent 64deg,
        transparent 70deg,
        rgba(196, 162, 101, 0.12) 72deg,
        transparent 74deg,
        transparent 80deg,
        rgba(196, 162, 101, 0.12) 82deg,
        transparent 84deg,
        transparent 90deg,
        rgba(196, 162, 101, 0.12) 92deg,
        transparent 94deg,
        transparent 100deg,
        rgba(196, 162, 101, 0.12) 102deg,
        transparent 104deg,
        transparent 110deg,
        rgba(196, 162, 101, 0.12) 112deg,
        transparent 114deg,
        transparent 120deg,
        rgba(196, 162, 101, 0.12) 122deg,
        transparent 124deg,
        transparent 130deg,
        rgba(196, 162, 101, 0.12) 132deg,
        transparent 134deg,
        transparent 140deg,
        rgba(196, 162, 101, 0.12) 142deg,
        transparent 144deg,
        transparent 150deg,
        rgba(196, 162, 101, 0.12) 152deg,
        transparent 154deg,
        transparent 160deg,
        rgba(196, 162, 101, 0.12) 162deg,
        transparent 164deg,
        transparent 170deg,
        rgba(196, 162, 101, 0.12) 172deg,
        transparent 174deg,
        transparent 180deg,
        rgba(196, 162, 101, 0.12) 182deg,
        transparent 184deg,
        transparent 190deg,
        rgba(196, 162, 101, 0.12) 192deg,
        transparent 194deg,
        transparent 200deg,
        rgba(196, 162, 101, 0.12) 202deg,
        transparent 204deg,
        transparent 210deg,
        rgba(196, 162, 101, 0.12) 212deg,
        transparent 214deg,
        transparent 220deg,
        rgba(196, 162, 101, 0.12) 222deg,
        transparent 224deg,
        transparent 230deg,
        rgba(196, 162, 101, 0.12) 232deg,
        transparent 234deg,
        transparent 240deg,
        rgba(196, 162, 101, 0.12) 242deg,
        transparent 244deg,
        transparent 250deg,
        rgba(196, 162, 101, 0.12) 252deg,
        transparent 254deg,
        transparent 260deg,
        rgba(196, 162, 101, 0.12) 262deg,
        transparent 264deg,
        transparent 270deg,
        rgba(196, 162, 101, 0.12) 272deg,
        transparent 274deg,
        transparent 280deg,
        rgba(196, 162, 101, 0.12) 282deg,
        transparent 284deg,
        transparent 290deg,
        rgba(196, 162, 101, 0.12) 292deg,
        transparent 294deg,
        transparent 300deg,
        rgba(196, 162, 101, 0.12) 302deg,
        transparent 304deg,
        transparent 310deg,
        rgba(196, 162, 101, 0.12) 312deg,
        transparent 314deg,
        transparent 320deg,
        rgba(196, 162, 101, 0.12) 322deg,
        transparent 324deg,
        transparent 330deg,
        rgba(196, 162, 101, 0.12) 332deg,
        transparent 334deg,
        transparent 340deg,
        rgba(196, 162, 101, 0.12) 342deg,
        transparent 344deg,
        transparent 350deg,
        rgba(196, 162, 101, 0.12) 352deg,
        transparent 354deg,
        transparent 360deg
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Chevron Borders */
.chevron-border {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        transparent 0px,
        transparent 6px,
        rgba(196, 162, 101, 0.3) 6px,
        rgba(196, 162, 101, 0.3) 7px,
        transparent 7px,
        transparent 13px,
        rgba(196, 162, 101, 0.3) 13px,
        rgba(196, 162, 101, 0.3) 14px
    );
    pointer-events: none;
    z-index: 2;
}

.chevron-border.top {
    top: 0;
}

.chevron-border.bottom {
    bottom: 0;
}

/* Diamond Bullets */
.deco-list {
    list-style: none;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.deco-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    color: var(--body-ink);
}

.diamond-bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: var(--wax-seal);
    transform: rotate(45deg);
    margin-top: 0.6em;
    animation: diamond-pulse 3s ease-in-out infinite;
}

.deco-list li:nth-child(2) .diamond-bullet { animation-delay: 0.5s; }
.deco-list li:nth-child(3) .diamond-bullet { animation-delay: 1s; }
.deco-list li:nth-child(4) .diamond-bullet { animation-delay: 1.5s; }

@keyframes diamond-pulse {
    0%, 100% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(45deg) scale(1.15); }
}

/* Fan Arcs */
.fan-arc {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(196, 162, 101, 0.25);
    pointer-events: none;
    z-index: 0;
}

.fan-arc.top-right {
    top: 12px;
    right: 12px;
    border-radius: 0 60px 0 0;
    border-left: none;
    border-bottom: none;
}

.fan-arc.top-left {
    top: 12px;
    left: 12px;
    border-radius: 60px 0 0 0;
    border-right: none;
    border-bottom: none;
}

.fan-arc.bottom-right {
    bottom: 12px;
    right: 12px;
    border-radius: 0 0 60px 0;
    border-left: none;
    border-top: none;
}

/* Peranakan tile background pattern (very subtle) */
.peranakan-tile-bg {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            var(--deco-ornament) 0deg 90deg,
            transparent 90deg 180deg
        ) 0 0 / 30px 30px,
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 14px,
            rgba(196, 162, 101, 0.3) 14px,
            rgba(196, 162, 101, 0.3) 15px
        );
    pointer-events: none;
    z-index: 0;
}

/* --- Deco Dividers --- */
.deco-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 600px;
    margin: 3rem auto;
    gap: 1rem;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: rgba(196, 162, 101, 0.4);
}

.divider-pyramid {
    width: 40px;
    height: 20px;
    clip-path: polygon(0% 100%, 20% 40%, 35% 70%, 50% 0%, 65% 70%, 80% 40%, 100% 100%);
    background: linear-gradient(180deg, rgba(196, 162, 101, 0.6) 0%, rgba(196, 162, 101, 0.1) 100%);
}

/* --- Document Sections --- */
.document-section {
    padding: 2rem 1rem;
    position: relative;
}

/* --- Farewell Card --- */
.farewell-card {
    text-align: center;
}

.farewell-sign {
    margin-top: 2rem;
    font-style: italic;
}

.signature {
    font-family: 'Caveat', cursive;
    font-size: 1.8rem;
    color: var(--heading-ink);
    display: inline-block;
    margin-top: 0.5rem;
}

.farewell-seal {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .document-card {
        width: 92%;
        padding: 2rem 1.5rem;
    }

    .margin-annotation {
        position: relative;
        left: auto;
        right: auto;
        width: 100%;
        margin-top: 1.5rem;
        transform: rotate(var(--ann-rotate, -3deg));
    }

    .margin-annotation[data-annotation="right"],
    .margin-annotation[data-annotation="left"] {
        right: auto;
        left: auto;
        transform: rotate(var(--ann-rotate, -3deg)) translateX(0);
    }

    .margin-annotation.visible[data-annotation="right"],
    .margin-annotation.visible[data-annotation="left"] {
        transform: rotate(var(--ann-rotate, -3deg)) translateX(0);
    }

    .envelope {
        width: 90vw;
        height: 40vh;
    }

    #wax-seal-nav {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        flex-direction: row;
        gap: 0.4rem;
    }

    .wax-seal {
        width: 36px;
        height: 36px;
    }

    .seal-icon {
        width: 18px;
        height: 18px;
    }

    .telegram-strip {
        width: 96%;
    }
}

@media (max-width: 480px) {
    .document-card {
        width: 96%;
        padding: 1.5rem 1.2rem;
    }

    .deco-sunburst {
        width: 120px;
        height: 120px;
    }
}