:root{
  --bg:#f6f5f1;
  --text:#111;
  --muted:#666;
  --line:#ddd;
  --accent:#000;

  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

body.dark{
  --bg:#0f0f10;
  --text:#f2f2f2;
  --muted:#aaa;
  --line:#2a2a2a;
  --accent:#fff;

  --shadow: 0 14px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html,body{height:100%;}

body{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  transition: background .25s ease, color .25s ease;
}

/* subtle paper grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("https://www.transparenttextures.com/patterns/paper-fibers.png");
  opacity:.15;
  pointer-events:none;
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:10px;
}

/* nav */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  position:sticky;
  top:0;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  z-index:10;
}

.nav-logo{
  font-family:'Cormorant Garamond',serif;
  letter-spacing:2px;
  font-weight:700;
}

.nav a,
.nav button{
  margin-left:20px;
  background:none;
  border:none;
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  padding:6px 10px;
  border-radius:12px;
}

.nav a:hover,
.nav button:hover{
  background: color-mix(in srgb, var(--line) 35%, transparent);
  text-decoration:none;
}

/* layout */
.container{
  max-width:1000px;
  margin:auto;
  padding:60px 24px;
}

.fade-in{
  animation:fadeIn .8s forwards;
  opacity:0;
}

@keyframes fadeIn{
  to{opacity:1;}
}

/* typography */
.logo{
  font-family:'Cormorant Garamond',serif;
  font-size:72px;
  letter-spacing:24px;
  text-align:center;
  margin:0;
}

.tagline{
  text-align:center;
  text-transform:uppercase;
  font-size:25px;
  letter-spacing:4px;
  color:var(--muted);
  margin-top:10px;
}

.small-label{
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:12px;
}

.divider{
  height:1px;
  background:var(--line);
  margin:60px 0;
}

/* ABOUT SECTION */
.about-section{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.about-section p{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;
  line-height:1.7;
  margin:10px 0 14px;
}

.about-section .text-link{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid var(--line);
}

.about-section .text-link:hover{
  background: color-mix(in srgb, var(--line) 25%, transparent);
  text-decoration:none;
}

/* featured grid */
.grid-featured{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background: color-mix(in srgb, var(--bg) 92%, white);
  box-shadow:var(--shadow);
  transition: transform .2s ease;
}

body.dark .card{
  background: color-mix(in srgb, var(--bg) 92%, black);
}

.card:hover{
  transform:translateY(-2px);
}

.card h3{
  font-family:'Cormorant Garamond',serif;
  margin:14px 18px 0;
  font-size:26px;
}

.excerpt{
  margin:8px 18px 18px;
  color:var(--muted);
  font-size:14px;
}

.cover-img{
  width:60%;
  height:auto;
  display:block;
  margin:20px auto 10px;
  object-fit:contain;
  filter:grayscale(20%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* inputs */
input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:transparent;
  color:var(--text);
  font-size:14px;
}

/* search */
.search-results{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.search-hit{
  display:block;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background: color-mix(in srgb, var(--bg) 94%, white);
  transition: transform .15s ease;
}

body.dark .search-hit{
  background: color-mix(in srgb, var(--bg) 94%, black);
}

.search-hit:hover{
  transform:translateY(-1px);
}

.search-meta,
.search-excerpt,
.search-empty{
  color:var(--muted);
  font-size:13px;
}

/* archive */
.archive-year{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  margin-bottom:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font:inherit;
}

.archive-year:hover{
  background: color-mix(in srgb, var(--line) 25%, transparent);
}

.archive-issues{
  margin-left:20px;
  padding-left:10px;
  border-left:1px solid var(--line);
}

.archive-issues a{
  display:block;
  padding:8px 0;
}

/* article */
.article{
  max-width:760px;
  margin:0 auto;
}

.article-title{
  font-family:'Cormorant Garamond',serif;
  font-size:46px;
  margin:10px 0 8px;
}

.article-meta{
  color:var(--muted);
  font-size:13px;
  text-transform:uppercase;
}

.prose p{margin:0 0 16px;}

.prose h2{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;
  margin:34px 0 12px;
}

.prose blockquote{
  margin:24px 0;
  padding:12px 16px;
  border-left:3px solid var(--accent);
  background: color-mix(in srgb, var(--line) 20%, transparent);
  border-radius:12px;
}

/* buttons */
.button{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:transparent;
}

.button:hover{
  background: color-mix(in srgb, var(--line) 25%, transparent);
}

/* footer */
footer{
  margin-top:100px;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}

/* responsive */
@media(max-width:700px){
  .grid-featured{grid-template-columns:1fr;}
  .logo{font-size:48px;}
  .article-title{font-size:36px;}
}

/* === Typewritten (blue ink) magazine look === */
:root{
  --paper: #fbf7ef;
  --ink: #1f4fa3;           /* blue ink */
  --ink-soft: rgba(31,79,163,0.28);
  --paper-edge: rgba(0,0,0,0.10);
}

/* Page/paper */
.typewritten-page{
  background: rgba(0,0,0,0.03);
  padding: 3rem 1rem;
}

.typewritten{
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  padding: clamp(1.25rem, 3vw, 3rem);
  position: relative;
}

/* subtle paper texture */
.typewritten::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.035), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(0,0,0,0.03), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015), rgba(0,0,0,0.015) 1px, transparent 1px, transparent 6px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* Typewriter type */
.typewritten,
.typewritten *{
  font-family: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.02em;
}

/* Make ink feel imperfect */
.typewritten{
  text-shadow:
    0.35px 0 rgba(31,79,163,0.18),
    -0.25px 0 rgba(31,79,163,0.12);
}

.typewritten h1,
.typewritten h2,
.typewritten .kicker{
  color: var(--ink);
  text-shadow:
    0.5px 0 rgba(31,79,163,0.18),
    -0.35px 0 rgba(31,79,163,0.12);
}

.typewritten .kicker{
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

.typewritten .headline{
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0.6rem 0 1rem;
  text-transform: uppercase;
}

.typewritten .rule,
.typewritten .section-rule{
  border: 0;
  border-top: 1px solid rgba(31,79,163,0.35);
  margin: 1rem 0 1.5rem;
}

/* Body spacing like typed letter */
.typewritten p{
  margin: 0 0 1.15rem;
  line-height: 1.75;
}

/* Signature block */
.typewritten .signature-block{
  margin-top: 2.25rem;
  text-align: right;
}

.typewritten .role{
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.95rem;
  opacity: 0.95;
}

/* Optional: slightly faded margin notes/footnotes */
.typewritten .footnotes{
  color: rgba(31,79,163,0.9);
}

.typewritten .fn-marker{
  vertical-align: super;
  font-size: 0.8em;
}

/* Dark mode: keep paper light so it still feels like a scan on a dark desk */
body.dark .typewritten-page{
  background: #0b0b0c;
}
body.dark .typewritten{
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
}

.issue-nav{
  margin-top:60px;
}

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

.prev-link,
.next-link{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  transition:.2s ease;
}

.prev-link:hover,
.next-link:hover{
  background: color-mix(in srgb, var(--line) 25%, transparent);
}

.arrow{
  font-size:18px;
}
.guestbook-form {
  max-width: 600px;
}

.guestbook-form label {
  display: block;
  margin-bottom: 1.5rem;
}

.guestbook-form input,
.guestbook-form textarea {
  width: 100%;
  padding: 0.6rem;
  font-family: inherit;
  border: 1px solid var(--border-color);
  background: var(--background);
}

.guestbook-form button {
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}

/* Whitwar Gallery */

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.photo-gallery a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.photo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.photo-gallery a:hover img {
  transform: scale(1.05);
}

.page-image {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  display: block;
}

.home-quote {
  text-align: center;
  margin: 40px 0;
}

.home-quote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 700px;
  position: relative;
}

/* subtle decorative lines */
.home-quote blockquote::before,
.home-quote blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: var(--line);
  margin: 20px auto;
}

body {
  margin: 0;
}

.desktop {
  position: fixed;         
  top: 80px;
  left: 20px;
  display: flex;
  flex-direction: column;  
  gap: 20px;             
}

.desktop-icon {
  width: 80px;
  text-align: center;
  text-decoration: none;
  color: green;             
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  padding: 6px;
}

.desktop-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.desktop-icon:hover {
  background: rgba(255,255,255,0.15);
  outline: 1px dotted white;
}

.desktop-icon span {
  display: block;
  margin-top: 4px;
}

.image-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 2rem 0;
}

.image-row img {
  max-width: 48%;
  height: auto;
  border-radius: 12px;
}

.neocities-link {
  text-align: center;
  margin: 2rem 0;
}

.neo-zone {
  margin-top: 2.5rem;
  padding: 1.25rem;
  border: 1px dashed rgba(0,0,0,0.35);
  border-radius: 14px;
  
  background-color: #f4f1e8;
}

body.dark .neo-zone {
  border-color: rgba(255,255,255,0.35);
}

.neo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.neo-card {
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 14px;
  
  background-color: #94d4e8;
}

body.dark .neo-card {
  border-color: rgba(255,255,255,0.18);
}

.neo-small {
  font-size: 0.95rem;
  opacity: 0.85;
}

.neo-log {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.neo-button {
  display: inline-block;
  margin: 0.5rem 0 0.75rem;
  image-rendering: pixelated;
}

.neo-code {
  padding: 0.75rem;
  border-radius: 12px;
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  background-color: #f3efe6;
}

body.dark .neo-code {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #aaaaaa;
}

.neo-neighbours {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

body.dark .neo-zone {
  border-color: rgba(255,255,255,0.35);
  background-color: #1f1f1f; /* darker tone */
  color: #505050;
}

.learn-more-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.side-gif {
  height: 32px;      /* adjust size here */
  width: auto;
  image-rendering: pixelated; /* nice for retro gifs */
}

/* Airport / departures-board notice banner */
.departures-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 7px 0 13px;           /* reduced ~30% */
  padding: 6px 8px;             /* reduced ~30% */
  border: 2px solid #111;
  background: #0b0b0b;
  box-shadow: 0 1px 0 #fff inset;
}

.departures-label{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: 0.6rem;            /* reduced from 0.85rem */
  letter-spacing: 0.12em;
  padding: 4px 7px;             /* reduced ~30% */
  border: 1px solid #333;
  background: #141414;
  color: #e6e6e6;
  text-transform: uppercase;
}

.departures-viewport{
  position: relative;
  overflow: hidden;
  flex: 1;
  border: 1px solid #2a2a2a;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 1px,
      transparent 1px,
      transparent 22px
    );
}

/* the scrolling content */
.departures-track{
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
  align-items: center;
  animation: departures-scroll 22s linear infinite;
}

.departures-item{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: 0.7rem;            /* reduced from 0.95rem */
  letter-spacing: 0.08em;
  padding: 6px 10px;            /* reduced ~30% */
  color: #ffd34d; /* amber */
  text-shadow: 0 0 10px rgba(255, 211, 77, 0.25);
}

/* Pause on hover (nice for readability) */
.departures-wrap:hover .departures-track{
  animation-play-state: paused;
}

@keyframes departures-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Optional: make it a bit tighter on small screens */
@media (max-width: 600px){
  .departures-label{ display:none; }
  .departures-item{ font-size: 0.65rem; letter-spacing: 0.06em; }
}

.departures-viewport::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background: rgba(0,0,0,0.55);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset;
  pointer-events:none;
}

/* ===============================
   HERO MARGIN RAILS
================================= */

.home-archive-rail{
  position:relative;
}

.archive-full{
  position:relative;
}

.archive-centre{
  display:flex;
  flex-direction:column;
  gap:30px;
  margin: 0 auto;
  max-width:760px;

}

/* SIDE MARGINS */
.archive-margin{
  position:absolute;
  top:-250px; /* aligns with hero text block */
  width:220px;
  display:flex;
  flex-direction:column;
  gap:30px;
}

.archive-margin.left{
  left:calc(50% - 500px - 240px);
}

.archive-margin.right{
  right:calc(50% - 500px - 240px);
}

/* Editorial / magazine card style */
.archive-box {
  background: #fdfaf6;
  border: 1px solid #ccc7bc;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
  font-family: Georgia, "Times New Roman", serif;
  color: #3b3a36;

  background-image: url("https://www.transparenttextures.com/patterns/paper-1.png");
  background-blend-mode: multiply;
  background-size: auto 200%;
}

/* Dark version */
body.dark .archive-box {
  background: #1e1c19;
  border: 1px solid #3a342c;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  color: #d8d2c8;

  background-image: url("https://www.transparenttextures.com/patterns/dark-matter.png");
  background-blend-mode: overlay;
  background-size: auto 200%;
}

/* Header styling */
.archive-box h3 {
  margin: -18px -18px 10px -18px;
  padding: 6px 10px;
  background: #e4d8c8;
  border-bottom: 2px solid #ccc;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  color: #2f2d28;
}

body.dark .archive-box h3 {
  background: #2a2622;
  border-bottom: 2px solid #3a342c;
  color: #e6dfd5;
}

/* Classic list style */
.archive-box ul {
  list-style: disc inside;
  padding: 0;
  margin: 0;
}

.archive-box li {
  margin-bottom: 6px;
}

/* Hide on smaller screens */
@media(max-width:1400px){
  .archive-margin{
    display:none;
  }
}