:root{
    --ink:#1c2b3a;
    --paper:#f1ead9;
    --paper-dark:#e6dcc4;
    --stamp:#a33324;
    --stamp-dark:#7f2519;
    --line:rgba(28,43,58,0.18);
  }

  *{
    box-sizing:border-box;
  }

  html{
    scroll-behavior:smooth;
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Fraunces', Georgia, serif;
    line-height:1.65;
    overflow-x:hidden;
  }

  a{
    color:inherit;
  }

  .mono{
    font-family:'Courier Prime', 'Courier New', monospace;
  }

  /* ===== Header ===== */

  header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 6vw;
    border-bottom:1px solid var(--line);
  }

  .brand{
    font-size:1.15rem;
    letter-spacing:0.02em;
    text-decoration:none;
    font-weight:600;
    color:var(--ink);
  }

  .brand .est{
    font-family:'Courier Prime', monospace;
    font-size:0.68rem;
    display:block;
    color:var(--stamp-dark);
    margin-top:2px;
    letter-spacing:0.08em;
  }

  nav a{
    font-family:'Courier Prime', monospace;
    font-size:0.78rem;
    text-decoration:none;
    margin-left:28px;
    border-bottom:1px solid transparent;
    padding-bottom:2px;
  }

  nav a:hover,
  nav a.active{
    border-bottom-color:var(--ink);
  }

  /* ===== Article ===== */

  article{
    max-width:980px;
    margin:0 auto;
    padding:60px 6vw 80px;
  }

  .article-header{
    max-width:760px;
    margin:0 auto 42px;
  }

  .article-date{
    font-family:'Courier Prime', monospace;
    font-size:0.72rem;
    letter-spacing:0.07em;
    color:var(--stamp-dark);
    margin-bottom:14px;
  }

  h1{
    font-size:clamp(2rem, 5vw, 3.5rem);
    line-height:1.12;
    margin:0 0 20px;
    font-weight:600;
  }

  .location{
    font-family:'Courier Prime', monospace;
    font-size:0.75rem;
    letter-spacing:0.05em;
    color:var(--stamp-dark);
  }

  /* ===== Main image ===== */

  .hero-image{
    width:100%;
    margin:0 auto 48px;
  }

  .hero-image img{
    display:block;
    width:100%;
    height:auto;
  }

  .image-caption{
    font-family:'Courier Prime', monospace;
    font-size:0.68rem;
    line-height:1.5;
    color:rgba(28,43,58,0.6);
    margin-top:10px;
  }

  /* ===== Article text ===== */

  .article-body{
    max-width:700px;
    margin:0 auto;
  }

  .article-body p{
    font-size:1.03rem;
    margin:0 0 1.5em;
  }

  .article-body .opening{
    font-size:1.35rem;
    line-height:1.45;
  }

  .article-body .location-line{
    font-family:'Courier Prime', monospace;
    font-size:0.78rem;
    letter-spacing:0.04em;
  }

  /* ===== Tags ===== */

  .tags{
    max-width:700px;
    margin:48px auto 0;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .tag{
    font-family:'Courier Prime', monospace;
    font-size:0.68rem;
    letter-spacing:0.04em;
    padding:7px 10px;
    border:1px solid var(--line);
  }

  /* ===== Instagram ===== */

  .instagram-section{
    max-width:700px;
    margin:50px auto 0;
    padding-top:30px;
    border-top:1px solid var(--line);
  }

  .instagram-section h2{
    font-size:1.3rem;
    margin:0 0 22px;
    font-weight:600;
  }

  .instagram-embed{
    text-align:center;
  }

  .instagram-embed blockquote{
    margin:0 auto !important;
  }

  /* ===== Share ===== */

  .share{
    max-width:700px;
    margin:50px auto 0;
    padding-top:30px;
    border-top:1px solid var(--line);
  }

  .share h2{
    font-size:1.3rem;
    margin:0 0 18px;
    font-weight:600;
  }

  .share-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .share-links a{
    display:inline-block;
    padding:10px 14px;
    border:1px solid var(--ink);
    text-decoration:none;
    font-family:'Courier Prime', monospace;
    font-size:0.7rem;
    transition:background 0.15s ease, color 0.15s ease;
  }

  .share-links a:hover,
  .share-links a:focus{
    background:var(--ink);
    color:var(--paper);
  }

  /* ===== Socials ===== */

  .socials-section{
    max-width:700px;
    margin:50px auto 0;
    padding-top:30px;
    border-top:1px solid var(--line);
  }

  .socials{
    display:flex;
    flex-wrap:wrap;
    gap:14px 20px;
    font-family:'Courier Prime', monospace;
    font-size:0.85rem;
  }

  .socials a{
    text-decoration:none;
    border-bottom:1px solid transparent;
  }

  .socials a:hover{
    border-bottom-color:var(--ink);
  }

  /* ===== Footer ===== */

  footer{
    padding:26px 6vw 40px;
    font-family:'Courier Prime', monospace;
    font-size:0.7rem;
    color:rgba(28,43,58,0.55);
    max-width:980px;
    margin:0 auto;
    border-top:1px solid var(--line);
  }

  /* ===== Random blog cards ===== */

  #random-posts{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.5rem;
    margin-top:2rem;
  }

  #random-posts .blog-card{
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    border:1px solid #ded8cc;
    background:#f8f5ee;
    color:#202b3c;
    text-decoration:none;
    min-height:200px;
  }

  #random-posts .blog-card h3{
    color:#202b3c;
    text-decoration:none;
    margin:1rem 0;
  }

  #random-posts .blog-card p{
    color:#4c4c4c;
    text-decoration:none;
  }

  #random-posts .blog-card .date,
  #random-posts .blog-card .read-more{
    text-decoration:none;
  }

  #random-posts .blog-card:hover{
    border-color:#a44f32;
  }

  @media (max-width:700px){
    #random-posts{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width:480px){
    #random-posts{
      grid-template-columns:1fr;
    }
  }

  /* ===== Responsive ===== */

  @media (max-width:760px){
    nav{
      display:none;
    }

    h1{
      font-size:2.2rem;
    }
  }

  @media (max-width:600px){
    article{
      padding-top:45px;
    }
  }