@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap');

    :root {
      --page-width: 640px;
      --page-padding: 24px;
      --background: #ffffff; #efffff #feffff #ffefff #fffeff #ffffef #fffffe #2cf070;
      --text-color: rgb(36, 41, 46);
      --muted-color: #777777;
      --link-color: #777777;
      --link-hover-color: #000000;

      --polaroid-width: 340px;
      --polaroid-bg: #fdfdfb;
      --polaroid-border: rgba(0, 0, 0, 0.06);
      --polaroid-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      --polaroid-radius: 4px;
      --polaroid-gap: 1.5rem;
      --polaroid-caption-color: #555;
      --polaroid-font: "JetBrains Mono", Courier, monospace, -apple-system, BlinkMacSystemFont,
                       "Segoe UI", sans-serif;
      --page-bg: #f5f5f3;
      --page-text: #222;
    }

    * {
      box-sizing: border-box;
    }

    html {
      font-size: 16px;  /* perfect medium-small blog aesthetic */
    }

    body {
      margin: 0;
      padding: 0;
      font-family: "Inclusive Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      line-height: 26px;
      font-weight: 400;
      color: var(--text-color);
      background: var(--background);
    }

    .page {
      max-width: var(--page-width);
      margin-left: 10vw;
      margin-right: auto;
      padding: var(--page-padding);
    }

    header {
      margin-bottom: 32px;
    }

    header h1 {
      font-size: 1.75rem;
      margin: 0 0 4px;
    }

    h3 {
      font-size: 16px;
    }

    header p {
      margin: 0;
      color: var(--muted-color);
      font-size: 0.95rem;
    }

    a {
      color: var(--link-color);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
      color: var(--link-hover-color);
    }

    .post-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .post-list li {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      padding: 4px 0;
      border-bottom: 0.5px solid var(--muted-color);
      white-space: nowrap;
    }

    .post-list .post-date {
      display: inline-block;
      width: 80px;   /* adjust until perfect */
      color: var(--muted-color);
    }


    .post-list a.post-title-link {
      font-size: 1.05rem;
      font-weight: 500;
    }

    .post-date {
      font-size: 0.9rem;
      color: var(--muted-color);
      margin-right: 30px;
      font-family: var(--polaroid-font);
    }

    .back-link {
      display: inline-block;
      margin-bottom: 16px;
      font-size: 0.95rem;
    }

    .post-title {
      margin: 0 0 4px;
      font-size: 1.6rem;
    }

    .post-title-link {
      text-decoration: bold; 
      color: var(--text-color);    /* keep it simple */
    }

    .post-title-link:hover {
      text-decoration: underline;  /* no fancy hover effect */
    }

    .post-meta {
      margin-bottom: 24px;
      font-size: 0.9rem;
      color: var(--muted-color);
      font-family: var(--polaroid-font);
    }

    .post-content p {
      margin: 0 0 1em;
    }

    .post-content h2,
    .post-content h3,
    .post-content h4 {
      margin-top: 1.5em;
      margin-bottom: 0.6em;
      font-weight: 600;
    }

    .post-content ul,
    .post-content ol {
      padding-left: 1.3em;
      margin: 0 0 1em 1em;
    }

    .post-content li {
      margin-bottom: 0.25em;
      margin-left: 0.5em;
    }

    /* Polaroids */

    /* Photostream layout */

        .photostream {
          position: relative;
          padding-top: 30px;
        }

        .frame {
          position: relative;
          margin-top: -40px; /* overlap */
          padding-top: 40px; /* preserve click area / spacing */
        }

        .frame:first-child {
          margin-top: 0;
          padding-top: 0;
        }

        .polaroid {
          position: relative;
          background: #ffffff;
          border-radius: 4px;
          padding: 14px 14px 8px;
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          max-width: var(--polaroid-width);
          margin-left: 12px;
          margin-right: auto;
          cursor: zoom-in;
          transition: all 0.1s ease-out;
        }


        .frame:nth-child(odd) .polaroid {
          transform: rotate(-1.5deg);
          text-align: center;
        }
        .frame:nth-child(odd) .polaroid:hover {
          transform: translateY(0px) scale(1.005) rotate(-1.4deg);
          text-align: center;
        }


        .frame:nth-child(even) .polaroid {
          transform: rotate(2.5deg);
          text-align: center;
        }


        .frame:nth-child(even) .polaroid:hover {
          transform: translateY(0px) scale(1.005) rotate(2.4deg);
          text-align: center;
        }


        .polaroid img {
          display: block;
          width: 100%;
          height: auto;
          border-radius: 3px;
          object-fit: cover;
        }

        .polaroid:hover {
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
        }

        .polaroid-meta {
          margin-top: 6px;
          font-size: 0.75rem;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          font-family: var(--polaroid-font);
        }

        .polaroid-title {
          color: #000000;
          text-align: center;
        }

        .polaroid-date {
          margin-top: 0px;
          color: #b0b0b0;
          text-align: center;
        }





        /* Lightbox / full-size view */

        .lightbox {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.9);
          display: none;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          cursor: zoom-out;
        }

        .lightbox.is-open {
          display: flex;
        }

        .lightbox-inner {
          height: 100vh;
          max-width: min(96vw, 1080px);
          display: flex;
          flex-direction: column;
          justify-content: center;   /* center the polaroid vertically */
          align-items: center;
        }


        .lightbox-image {
          max-width: 100%;
          max-height: calc(92vh - 70px);
          border-radius: 0px;
          object-fit: contain;
          background: #111;
        }

        /* Further modifications to Polaroid when shown inside the lightbox */

        .lightbox .polaroid-lightbox {
          max-width: min(94vw, 720px);
          width: 100%;
          margin: 0 auto;
          cursor: zoom-out;
          transform: none;
        }

        .lightbox .polaroid-title, .lightbox .polaroid-date {
          font-size: 1.5em;
        }

        /* make the image scale nicely to viewport height */
        .lightbox .polaroid-lightbox .lightbox-image {
          display: block;
          width: 100%;
          background: none; /* this key line removes the gloss effect in lightbox mode */
          max-height: calc(100vh - 200px); /* leave room for white border + meta + hint */
          object-fit: contain;
        }

        .lightbox-close-hint {
          margin-top: 20px;
          font-size: 0.85rem;
          opacity: 0.75;
          text-align: center;
          color: var(--background);
        }

    /* END OF POLAROID GRID */ 



    /* ============================= */
    /* PHOTOSTREAM — TWO COLUMN MODE */
    /* ============================= */

    .photostream--two-col {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 12px;
      row-gap: 4px; /* vertical breathing room */
      padding-top: 40px;
    }

    /* kill vertical overlap in grid mode */
    .photostream--two-col .frame {
      margin-top: 0;
      padding-top: 0;
    }

    /* centre polaroids inside each column */
    .photostream--two-col .polaroid {
      margin-left: auto;
      margin-right: auto;
      --tx: 0px;
      --rot: 0deg;
      transform: translateX(var(--tx)) rotate(var(--rot));
      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    }


    /* -------------------------------- */
    /* ORGANIC DRIFT + ROTATION (12-step) */
    /* -------------------------------- */

    .photostream--two-col .frame:nth-child(12n + 1)  .polaroid { --tx: -6px; --rot: -1.7deg; }
    .photostream--two-col .frame:nth-child(12n + 2)  .polaroid { --tx:  4px; --rot:  2.3deg; }
    .photostream--two-col .frame:nth-child(12n + 3)  .polaroid { --tx: -2px; --rot: -0.9deg; }
    .photostream--two-col .frame:nth-child(12n + 4)  .polaroid { --tx:  6px; --rot:  1.4deg; }

    .photostream--two-col .frame:nth-child(12n + 5)  .polaroid { --tx: -4px; --rot: -2.2deg; }
    .photostream--two-col .frame:nth-child(12n + 6)  .polaroid { --tx:  1px; --rot:  0.6deg; }
    .photostream--two-col .frame:nth-child(12n + 7)  .polaroid { --tx:  5px; --rot:  2.0deg; }
    .photostream--two-col .frame:nth-child(12n + 8)  .polaroid { --tx: -1px; --rot: -1.1deg; }

    .photostream--two-col .frame:nth-child(12n + 9)  .polaroid { --tx: -5px; --rot: -1.4deg; }
    .photostream--two-col .frame:nth-child(12n + 10) .polaroid { --tx:  3px; --rot:  1.8deg; }
    .photostream--two-col .frame:nth-child(12n + 11) .polaroid { --tx: -3px; --rot: -0.7deg; }
    .photostream--two-col .frame:nth-child(12n + 12) .polaroid { --tx:  2px; --rot:  1.1deg; }

    .photostream--two-col .polaroid:hover {
      transform:
        translateX(var(--tx))
        translateY(-2px)
        scale(1.005)
        rotate(calc(var(--rot) * 0.92));
    }

    /* END OF TWO-COLUMN POLAROID GRID */ 





    @media (max-width: 700px) {
      .page {
        margin-left: auto;
        margin-right: auto;
      }

      .polaroid {
        margin-left: 0;
        margin-right: auto;
      }

        .frame .polaroid {
          transform: none !important;
        }
      }

    @media (max-width: 600px) {

      header h1 {
        font-size: 1.4rem;
      }
    }