:root {
      --bg:#ffffff;
      --text:#1a1a1a;
      --muted:#555;
      --accent:#b71c1c; /* deep red */
      --bqaccent:#C41E3A;
      --line:#e5e5e5;
      --max:820px;
    }
    *{box-sizing:border-box}
    body {
      margin:0;
      font-family:Lora,system-ui,sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.7;
    }
    header {
      border-bottom:3px solid var(--accent);
      padding:24px 20px;
      text-align:center;
    }
    .brand {
      font-family:"Literata",serif;
      font-size:32px;
      font-weight:700;
      color:var(--accent);
      text-decoration:none;
      letter-spacing:0.5px;
    }
    nav {
      margin-top:12px;
    }
    nav a {
      margin:0 10px;
      color:var(--muted);
      font-weight:600;
      text-decoration:none;
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:0.05em;
    }
    nav a:hover { color:var(--accent); }
    main {
      max-width:var(--max);
      margin:50px auto;
      padding:0 20px;
    }
    article {
      position: relative; /* allow pseudo-element positioning */
      z-index: 1;
    }
    article::before {
      content:"";
      position:absolute;
      inset:0;
      /* background:url('TWEcalligram.png') center/60% no-repeat; */
      opacity:0.05; /* faint watermark */
      z-index:-1;
      pointer-events:none;
    }
    article h1 {
      font-family:"Literata",serif;
      font-size:40px;
      line-height:1.2;
      margin-bottom:10px;
    }
    .standfirst {
      font-style:italic;
      font-size:20px;
      color:var(--muted);
      margin-bottom:24px;
    }
    .meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:var(--muted);
      font-size:14px;
      margin-bottom:40px;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding-bottom:12px;
      padding-top:12px;
    }

.meta .author {
  color: var(--accent);
  cursor: pointer;
  margin-left: 4px;
  margin-right: 4px;
}

.meta .author:hover {
  text-decoration: underline;
}

.meta .reading-time {
  color: var(--muted);
  margin-left: auto;
}

    article p {
      margin:1.2em 0;
      font-size:18px;
    }
    article blockquote {
      border-left:4px solid var(--bqaccent);
      padding-left:18px;
      margin:1.8em 0;
      font-style:italic;
      color:var(--muted);
      font-size:20px;
    }
    .author-box {
      border-top:1px solid var(--line);
      margin-top:50px;
      padding-top:20px;
      display:flex;
      align-items:center;
      gap:15px;
      font-family:inter,system-ui,sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.7;
    }
    .author-avatar {
      width:50px;
      height:50px;
      border-radius:50%;
      background:var(--accent);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:18px;
      flex-shrink:0;
    }
    .author-info {
      font-size:14px;
      color:var(--muted);
    }
    .author-info strong {
      display:block;
      color:var(--text);
      font-size:15px;
      margin-bottom:4px;
    }
    footer {
      /* border-top:1px solid var(--line); */
      margin-top:70px;
      padding:30px 0px;
      font-size:14px;
      color:var(--muted);
      font-family:inter,system-ui,sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.7;
    }
    .footer-logo {
      max-width:1080px;
      margin:0 auto 20px auto;
      display:block;
      opacity:0.9;
    }
    .newsletter {
      margin-top:20px;
      padding:24px;
      border:1px solid var(--line);
      background:#fafafa;
      border-radius:6px;
      text-align:center;

      font-family:Inter,system-ui,sans-serif;
      line-height:1.7;
    }
    .newsletter h3 {
      margin:0 0 10px 0;
      font-family:"Literata",serif;
      font-size:20px;
    }
    .newsletter input {
      padding:10px;
      width:60%;
      max-width:300px;
      border:1px solid var(--line);
      border-radius:4px;
      margin-right:8px;
    }
    .newsletter button {
      padding:10px 16px;
      border:none;
      background:var(--accent);
      color:#fff;
      font-weight:600;
      border-radius:4px;
      cursor:pointer;
    }
    .newsletter button:hover { opacity:0.9; }

#sticky-nav {
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  background:#fff;
  border-bottom:2px solid var(--accent);
  padding:5px 20px;
  align-items:center;
  justify-content:space-between;
  z-index:1000;
}

.sticky-logo {
  height:56px;
}

#burger {
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
}

#burger-menu {
  display:none;
  position:absolute;
  top:100%;
  right:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

#burger-menu a {
  display:block;
  padding:10px 20px;
  color:var(--text);
  text-decoration:none;
}
#burger-menu a:hover { background:#f5f5f5; }

        /* Define the bold red accent color */
        .text-accent-red { color: #C41E3A; }
        .border-accent-red { border-color: #C41E3A; }
        .bg-accent-red { background-color: #C41E3A; }

.previous-essays {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.previous-essays h2 {
  font-family: "Literata", serif;
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 12px 0;
  letter-spacing: 0.02em;
}

.previous-essays ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.previous-essays li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.previous-essays a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.previous-essays a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.previous-essays .date {
  color: var(--muted);
  font-size: 14px;
}

@media (min-width: 768px) {
  .previous-essays ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cookie-banner {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); /* dim backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.cookie-banner .image-box {
  position: relative;
  display: inline-block;
}

.cookie-banner img {
  aspect-ratio: 2 / 3;
  max-width: 90vw; 
  max-height: 90vh;
  height: auto;
  width: auto;
  display: block;
}

.cookie-banner button,
.cookie-banner a {
  position: absolute;
  opacity: 0;   /* invisible but clickable */
  cursor: pointer;
}

/* Adjust these % values to match your artwork */
.accept-btn {
  bottom: 11%; left: 33%;
  width: 5%; height: 8%;
}

.manage-btn {
  bottom: 11%; left: 52%;
  width: 5%; height: 8%;
}

.privacy-btn {
  bottom: 50%; left: 50%;
  width: 30%; height: 8%;
}

    .statement {
      border-bottom:3px solid var(--accent);
      padding:24px 20px;
      text-align:center;
    }

    .adjective {
      display: inline-block;
      color: black;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .adjective.hidden {
      opacity: 0;
      transform: translateY(-20px);
    }

#cookie-settings {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fff;
  border: 2px solid #ccc;
  padding: 20px;
  width: 300px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 10000;
  border-radius: 8px;
  font-family: sans-serif;
}

#cookie-settings label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

#cookie-settings button {
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #0078d4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.dimmed {
  filter: brightness(50%);
}

.feature-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
}
.feature-cta:hover { opacity: 0.95; }