/* Reset and base: wiping browser defaults */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: system-ui, sans-serif; /* if not supported, fall back to sans-serif */
        line-height: 1.6;   /* unitless meaning 1.6 times the font size */
        color: #1a1a1a;
        background: #ffffff;
        font-size: 1.0625rem;   /* 17px */
    }

    /* The Container: */
    .site-header,
    main,
    .site-footer {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 32px;
        padding-right: 32px;
    }

    /* Narrow: for reading */
    .prose {
        max-width: 120ch;
    }


    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .wordmark{
        text-decoration: none;
        font-weight: 600;
    }

    main {
        padding-top: 24px;
        padding-bottom: 64px;
    }

    .site-footer {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .link-list {
        list-style: none;
    }

    .link-list li {
        margin-bottom: 4px;
    }

    /* Typography: */
    h1 {
        font-size: 2.5rem;  /* rem = relative to the root font size (16px by default) */
        line-height: 1.2;
        margin-bottom: 16px;
    }

    h2 {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }

    p {
        margin-bottom: 16px;
        /* Latex-like wrap: */
        /* text-align: justify;
        hyphens: auto;
        */
    }


    /* Links and nav: */
    a {
        color: #1a1a1a;
    }

    .site-nav a {
        text-decoration: none;
        margin-left: 24px;
    }

    .site-nav a:hover {
        text-decoration: underline;
    }


    /* Spacing between Sections: */
    main section {
        margin-bottom: 48px;
    }


/*  Responsive: phones & small screens
    Rules in here only apply when the viewport is <700px */
@media (max-width: 700px) {
    /*
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    */

    .site-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .site-nav a {
        margin-left: 0;
    }

    .site-header,
    main,
    .site-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    h1 {
        font-size: 2rem;
    }

    main section {
        margin-bottom: 36px;
    }

    p {
        text-align: justify;
        hyphens: auto;
    }
}

/*  Projects  */
    .project-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 24px;
    }

    .project-card {
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        padding: 24px;
    }

    .project-card h2 {
        margin-bottom: 4px;
    }

    .project-stack {
        font-size: 0.875rem;
        color: #666;
        margin-bottom: 16px;
    }

    .project-links {
        margin-bottom: 0;
    }

    .project-links a {
        margin-right: 16px;
    }


/*  Blog index  */
    .post-item {
        padding-bottom: 32px;
        margin-bottom: 32px;
        border-bottom: 1px solid #e5e5e5;
    }

    .post-item:last-child {
        border-bottom: none;
    }

    .post-date {
        font-size: 0.875rem;
        color: #666;
        margin-bottom: 4px;
    }

    .post-item h2 {
        font-size: 1.375rem;
        margin-bottom: 8px;
    }

    .post-item h2 a {
        text-decoration: none;
    }

    .post-item h2 a:hover {
        text-decoration: underline;
    }



/*  Post pages  */
    /* ~70 characters per line is the comfortable reading width */
    .post,
    .post-back,
    .comments {
        max-width: 70ch;
    }

    .post p,
    .post li {
        text-align: left;   /* override the mobile justify: no uneven gaps in articles */
        hyphens: manual;
    }

    .post li {
        margin-bottom: 10px;
    }

    .post-header {
        margin-bottom: 32px;
    }

    .post h2 {
        font-size: 1.375rem;
        margin-top: 40px;
        margin-bottom: 12px;
    }

    .post pre {
        background: #f6f6f6;
        border-radius: 6px;
        padding: 16px;
        overflow-x: auto;   /* long code lines get a horizontal scrollbar */
        margin-bottom: 20px;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .post code {
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
    }

    .post :not(pre) > code {
        background: #f0f0f0;
        padding: 2px 5px;
        border-radius: 4px;
        font-size: 0.9em;
    }

    .post-back {
        margin-top: 56px;
        padding-top: 24px;
        border-top: 1px solid #e5e5e5;
        font-size: 0.9375rem;
    }

    .post-back a {
        text-decoration: none;
        color: #666;
    }

    .post-back a:hover {
        color: #1a1a1a;
    }

    .post blockquote {
        border-left: 3px solid #1a1a1a;
        padding-left: 20px;
        margin: 24px 0;
        font-style: italic;
    }

    .post ul {
        margin-bottom: 20px;
        padding-left: 24px;
    }

    .comments {
        margin-top: 56px;
        padding-top: 32px;
        border-top: 1px solid #e5e5e5;
    }

    .comments h2 {
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    #cusdis_thread iframe {
        width: 100% !important;
        min-height: 520px !important;
        border: none;
    }



/*  Contact Form  */
    .contact-form label {
        display: block;
        margin-bottom: 4px;
        font-size: 0.9375rem;
    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        display: block;
        width: 100%;
        max-width: 480px;
        padding: 10px 12px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-family: inherit; /* without inherit, */
        font-size: 1rem;
    }

    .contact-form textarea{
        resize: vertical;
    }

    .contact-form button {
        padding: 10px 24px;
        border: none;
        border-radius: 6px;
        background: #1a1a1a;
        color: #fff;
        font-family: inherit;
        font-size: 1rem;
        cursor: pointer;
    }

    .contact-form button:hover {
        background: #444;
    }