/* ===================================
   NAPKIN BLOG
   Handwriting on stacked napkins
   =================================== */

:root {
    --ink: #2a2a2a;
    --ink-faded: #6a6a6a;
    --pen-blue: #1a4f8b;
    --pen-red: #8b1a1a;
    --napkin-bg: #fefcf8;
    --surface: #ece6dd;
    --border-color: #555;
}

/* === BODY (the table/surface) === */
body {
    margin: 0;
    padding: 30px 16px;
    font-family: 'Caveat', cursive;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink);
    background: var(--surface);
    min-height: 100vh;
}

/* === NAPKIN STACK === */
.napkin-stack {
    max-width: 780px;
    margin: 0 auto;
}

/* === INDIVIDUAL NAPKIN === */
.napkin {
    background: var(--napkin-bg);
    padding: 40px 50px;
    position: relative;
    transform: rotate(var(--napkin-rotate, 0deg));
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06),
                0 4px 12px rgba(0,0,0,0.08),
                0 0 2px rgba(0,0,0,0.04);
    animation: napkin-settle 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes napkin-settle {
    0% {
        transform: rotate(var(--napkin-start-rotate, 4deg));
        opacity: 0.6;
    }
    100% {
        transform: rotate(var(--napkin-rotate, 0deg));
        opacity: 1;
    }
}

/* Stagger the animation for each napkin */
.napkin:nth-child(1) { animation-delay: 0.05s; }
.napkin:nth-child(2) { animation-delay: 0.12s; }
.napkin:nth-child(3) { animation-delay: 0.19s; }
.napkin:nth-child(4) { animation-delay: 0.26s; }
.napkin:nth-child(5) { animation-delay: 0.33s; }
.napkin:nth-child(6) { animation-delay: 0.40s; }
.napkin:nth-child(7) { animation-delay: 0.47s; }
.napkin:nth-child(8) { animation-delay: 0.54s; }
.napkin:nth-child(9) { animation-delay: 0.61s; }
.napkin:nth-child(10) { animation-delay: 0.68s; }

/* === TYPOGRAPHY === */
h1 {
    font-family: 'Permanent Marker', cursive;
    font-size: 2.4em;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin: 0 0 10px;
}

h1 a,
h1 a:visited,
h1 a:hover {
    color: inherit;
}

h2 {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.35em;
    line-height: 1.3;
    margin: 40px 0 15px 0;
    color: var(--ink);
}

h3 {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1.4;
    color: var(--ink);
    margin: 25px 0 10px;
}

p {
    margin: 0 0 16px;
}

strong {
    font-weight: 700;
    color: var(--pen-blue);
}

em {
    font-style: italic;
    color: var(--ink-faded);
}

/* === LINKS === */
a,
a:visited {
    color: var(--pen-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--pen-red);
}

a.textlink {
    box-shadow: 0 -4px rgba(26, 79, 139, 0.12) inset;
}

/* === NAVIGATION === */
nav {
    display: flex;
    justify-content: flex-start;
    gap: 0.8rem;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
}

nav wired-link {
    font-family: 'Caveat', cursive;
    font-size: 1.1em;
    font-weight: 600;
}

/* === POST LIST === */
.post-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 20px;
}

.post-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 4px 0;
}

.bullet {
    height: 20px;
    width: 20px;
    min-width: 20px;
    margin-right: 12px;
}

.post-date {
    margin-left: auto;
    font-size: 0.8em;
    color: var(--ink-faded);
    white-space: nowrap;
}

.post-item wired-link {
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: 1.05em;
}

@media (max-width: 800px) {
    .post-item {
        flex-wrap: wrap;
        background-image: none !important;
    }

    .post-date {
        margin-left: 32px;
        width: 100%;
        order: 3;
    }

    .bullet {
        order: 1;
    }

    wired-link {
        max-width: calc(100% - 40px);
        order: 2;
        overflow: hidden;
    }
}

/* === WIRED ELEMENTS === */
wired-divider {
    margin: 40px 0 20px 0;
}

wired-card {
    background: rgba(0, 0, 0, 0.02);
}

wired-image {
    max-width: 200px;
    float: right;
    margin: 0 0 20px 30px;
}

/* === FOOTER === */
.footer-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78em;
    color: var(--ink-faded);
}

.social-icons {
    display: flex;
    gap: 0.4rem;
}

.icon-link {
    text-decoration: none;
    color: inherit;
}

.github-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="%232a2a2a" d="M6.315 6.176c-.25-.638-.24-1.367-.129-2.034a6.77 6.77 0 0 1 2.12 1.07c.28.214.647.283.989.18A9.343 9.343 0 0 1 12 5c.961 0 1.874.14 2.703.391c.342.104.709.034.988-.18a6.77 6.77 0 0 1 2.119-1.07c.111.667.12 1.396-.128 2.033c-.15.384-.075.826.208 1.14C18.614 8.117 19 9.04 19 10c0 2.114-1.97 4.187-5.134 4.818c-.792.158-1.101 1.155-.495 1.726c.389.366.629.882.629 1.456v3a1 1 0 0 0 2 0v-3c0-.57-.12-1.112-.334-1.603C18.683 15.35 21 12.993 21 10c0-1.347-.484-2.585-1.287-3.622c.21-.82.191-1.646.111-2.28c-.071-.568-.17-1.312-.57-1.756c-.595-.659-1.58-.271-2.28-.032a9.081 9.081 0 0 0-2.125 1.045A11.432 11.432 0 0 0 12 3c-.994 0-1.953.125-2.851.356a9.08 9.08 0 0 0-2.125-1.045c-.7-.24-1.686-.628-2.281.031c-.408.452-.493 1.137-.566 1.719l-.005.038c-.08.635-.098 1.462.112 2.283C3.484 7.418 3 8.654 3 10c0 2.992 2.317 5.35 5.334 6.397A3.986 3.986 0 0 0 8 17.98l-.168.034c-.717.099-1.176.01-1.488-.122c-.76-.322-1.152-1.133-1.63-1.753c-.298-.385-.732-.866-1.398-1.088a1 1 0 0 0-.632 1.898c.558.186.944 1.142 1.298 1.566c.373.448.869.916 1.58 1.218c.682.29 1.483.393 2.438.276V21a1 1 0 0 0 2 0v-3c0-.574.24-1.09.629-1.456c.607-.572.297-1.568-.495-1.726C6.969 14.187 5 12.114 5 10c0-.958.385-1.881 1.108-2.684c.283-.314.357-.756.207-1.14Z"/></g></svg>');
    background-size: cover;
    display: block;
    width: 28px;
    height: 28px;
}

.linkedin-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="%232a2a2a" d="M18 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12Zm0 2H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1ZM8 10a1 1 0 0 1 .993.883L9 11v5a1 1 0 0 1-1.993.117L7 16v-5a1 1 0 0 1 1-1Zm3-1a1 1 0 0 1 .984.821a5.82 5.82 0 0 1 .623-.313c.667-.285 1.666-.442 2.568-.159c.473.15.948.43 1.3.907c.315.425.485.942.519 1.523L17 12v4a1 1 0 0 1-1.993.117L15 16v-4c0-.33-.08-.484-.132-.555a.548.548 0 0 0-.293-.188c-.348-.11-.849-.052-1.182.09c-.5.214-.958.55-1.27.861L12 12.34V16a1 1 0 0 1-1.993.117L10 16v-6a1 1 0 0 1 1-1ZM8 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2Z"/></g></svg>');
    background-size: cover;
    display: block;
    width: 28px;
    height: 28px;
}

.copyright {
    white-space: nowrap;
}

/* === POST META (read time + share) === */
.post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.75em;
    color: var(--ink-faded);
}

.post-meta-date {
    font-family: 'Caveat', cursive;
    font-weight: 500;
}

.read-time {
    font-family: 'Caveat', cursive;
    font-weight: 500;
}

/* === POST LABELS === */
.post-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.post-label {
    font-family: 'Caveat', cursive;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--pen-blue);
    padding: 2px 10px;
    border: 1.5px dashed var(--pen-blue);
    border-radius: 2px;
    transform: rotate(-0.5deg);
    display: inline-block;
}

.post-label:nth-child(even) {
    transform: rotate(0.4deg);
}

.post-label:nth-child(3n) {
    transform: rotate(-0.8deg);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    font-family: 'Caveat', cursive;
    font-size: 1em;
    color: var(--ink-faded);
    cursor: pointer;
    padding: 2px 0;
    transition: color 0.15s;
}

.share-btn:hover {
    color: var(--pen-blue);
}

.share-btn svg {
    width: 14px;
    height: 14px;
}

/* === TOC SIDEBAR === */
.toc-sidebar {
    display: none;
    position: fixed;
    top: 120px;
    width: 200px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    font-family: 'Caveat', cursive;
    font-size: 0.8em;
    color: var(--ink-faded);
    z-index: 10;
}

.toc-sidebar.visible {
    display: block;
}

.toc-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-sidebar li {
    margin-bottom: 4px;
}

.toc-sidebar a {
    display: block;
    padding: 3px 0 3px 12px;
    color: var(--ink-faded);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    line-height: 1.3;
}

.toc-sidebar a:hover {
    color: var(--ink);
    border-left-color: #ccc;
}

.toc-sidebar a.active {
    color: var(--ink);
    border-left-color: var(--pen-blue);
    font-weight: 600;
}

.toc-sidebar .toc-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-sidebar .toc-sub-item a {
    padding-left: 24px;
    font-size: 0.8em;
}

/* Position TOC in the left margin */
@media (min-width: 1200px) {
    .toc-sidebar.visible {
        left: calc((100vw - 780px) / 2 - 230px);
    }
}

/* Hide TOC on smaller screens */
@media (max-width: 1199px) {
    .toc-sidebar {
        display: none !important;
    }
}

/* === CHUNKED NAPKINS (content overflow) === */
.napkin-chunk {
    margin-bottom: -8px;
    z-index: auto;
}

.napkin-chunk .napkin-content {
    position: relative;
    z-index: 2;
}

/* === HERO IMAGE === */
.hero-image {
    margin: 10px auto 30px;
    position: relative;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    background: #fff;
    padding: 8px 8px 28px;
    border-radius: 2px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 12px 28px rgba(0, 0, 0, 0.1);
    transform: rotate(-1.5deg);
    overflow: hidden;
}

.hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0.08) 100%
    );
    pointer-events: none;
    border-radius: 2px;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1px;
}

/* === CODE BLOCKS === */
.code-card {
    background: rgba(0, 0, 0, 0.03);
    width: 100%;
    margin: 12px 0;
}

.code-card pre {
    background: none;
    border: none;
    font-family: 'Fira Code', monospace;
    font-size: 0.65em;
    line-height: 1.4;
    margin: 0;
    padding: 20px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink);
}

code {
    font-family: 'Fira Code', monospace;
    font-size: 0.7em;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 5px;
    border-radius: 2px;
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.hljs {
    background: transparent !important;
}

/* === LISTS === */
ul, ol {
    padding-left: 25px;
}

li {
    margin-bottom: 8px;
}

li::marker {
    color: var(--pen-blue);
}

/* === ABOUT PAGE === */
.selfie {
    max-width: 180px;
    float: right;
    margin: 0 0 20px 25px;
}

/* === NAPKIN BORDER SVG === */
.napkin-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
    body {
        padding: 15px 8px;
    }

    .napkin {
        padding: 25px 20px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.15em;
    }

    wired-image,
    .selfie {
        float: none;
        display: block;
        margin: 15px auto;
    }

    nav {
        gap: 0.5rem;
    }
}

/* === LAYOUT UTILS === */
.shadowdom {
    width: 100%;
}

.example {
    display: flex;
    justify-content: space-between;
    align-items: center;
}