/* ── INDEX PAGE LAYOUT ── */
main {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: start;
  max-width: 100%;
}

/* ── LEFT COLUMN ── */
.main-col {
  border-right: 2px solid var(--blue);
  min-width: 0; /* prevents grid blowout */
}

/* ── INTRO ── */
#intro {
  border-bottom: 2px solid var(--blue);
  padding: 12px 16px;
}

#intro p {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--text-base);
  line-height: 1.7;
  color: #cccccc;
  max-width: 640px;
}

#intro img {
  border-radius: 50%;
  justify-content: right;
  align-items: right;
}

#intro p span { color: var(--cyan); }

/* ── PHOTOGRAPHS ── */
#photographs-section {
  padding: 12px 16px;
}

#photographs-section .section-header { background: var(--green); }

.photographs-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.photographs-meta span { color: var(--cyan); }

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

/* ── RIGHT COLUMN (aside) ── */
aside {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 12px 10px;
  font-size: 17px;
  /* subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
}

aside::-webkit-scrollbar       { width: 4px; }
aside::-webkit-scrollbar-track { background: transparent; }
aside::-webkit-scrollbar-thumb { background: var(--blue); }

/* ── SIDEBAR BLOCKS ── */
.sidebar-block { margin-bottom: 14px; }
.sidebar-block--right { text-align: right; }

.sidebar-label {
  color: var(--yellow);
  letter-spacing: 1px;
  font-size: var(--text-lg);
  border-bottom: 1px solid var(--blue);
  margin-bottom: 4px;
}

.sidebar-block p,
.sidebar-block li {
  color: #aaaaaa;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  list-style: none;
}

.sidebar-block li::before { content: "> "; color: var(--green); }

.sidebar-block--links ul {
  columns: 3;
  column-gap: 0;
  column-fill: auto;
  height: calc(5 * 1.6em);
}
@media (max-width: 900px) {
  .sidebar-block--links ul { columns: 2; height: calc(5 * 1.6em); }
}
@media (max-width: 480px) {
  .sidebar-block--links ul { columns: 1; height: auto; }
}

.sidebar-block a {
  color: var(--link-color);
  text-decoration: underline;
  font-size: var(--text-base);
}
.sidebar-block a:hover { color: var(--yellow); }

.dialup-bar {
  background: var(--bg);
  border: 1px solid var(--blue);
  padding: 2px;
  margin-top: 6px;
}

.dialup-fill {
  height: 10px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--green) 0,
    var(--green) 5px,
    transparent 5px,
    transparent 7px
  );
  width: 0%;
  animation: load 15s ease-in forwards;
}

.dialup-drain {
  height: 10px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--red) 0,
    var(--red) 5px,
    transparent 5px,
    transparent 7px
  );
  width: 100%;
  animation: unload 12s ease-out forwards;
}

@keyframes load { to { width: 75%; } }

@keyframes unload {
  from { width: 100%; }
  to   { width: 12%; }
}

.dialup-text {
  font-size: 13px;
  color: var(--green);
  font-family: 'Share Tech Mono', monospace;
  margin-top: 2px;
  animation: blink-load 2s steps(1) 2s infinite;
}

@keyframes blink-load {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── SITE LOG WIDGET ── */
.log-entry {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border-bottom: 1px dashed #1a1a44;
}

.log-entry:last-child { border-bottom: none; }

.log-entry-date {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #444;
  letter-spacing: 1px;
}

.log-entry-type {
  font-size: 13px;
  letter-spacing: 1px;
}

.log-type-music  { color: var(--cyan);    }
.log-type-book   { color: var(--yellow);  }
.log-type-photo  { color: var(--green);   }
.log-type-camera { color: var(--magenta); }
.log-type-site   { color: #777;           }

.log-entry-desc {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
}

.log-empty {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #333;
}

/* ── GUESTBOOK (inside aside) — travel-log terminal palette ── */
#guestbook-section {
  margin-top: 8px;
  background: #1f0d10;
  border: 3px solid #5c1e28;
  border-radius: 4px;
  overflow: hidden;
}

/* Chrome bar replaces the default .section-header tag */
#guestbook-section .section-header-row {
  background: #2b1018;
  border-bottom: 1px solid #3d1620;
  padding: 6px 14px;
  margin-bottom: 0;
}

#guestbook-section .section-header {
  background: transparent;
  color: #FFD150;
  font-size: var(--text-lg);
  letter-spacing: 2px;
  margin-bottom: 0;
  padding: 0;
}

.gb-layout {
  display: grid;
  grid-template-columns: 1fr;
  border: none;
}

.gb-form-col {
  border-bottom: 1px solid #3d1620;
  padding: 14px;
  background: #160a0d;
}

.gb-col-label {
  font-size: 14px;
  color: #F26076;
  letter-spacing: 3px;
  border-bottom: 1px solid #3d1620;
  margin-bottom: 10px;
  padding-bottom: 4px;
}

.gb-field { margin-bottom: 10px; }

.gb-field label {
  display: block;
  font-size: 13px;
  color: #8a2e3e;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.gb-field input,
.gb-field select,
.gb-field textarea {
  width: 100%;
  background: #1f0d10;
  border: 1px solid #5c1e28;
  color: #e8c0c5;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  padding: 5px 7px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.gb-field input:focus,
.gb-field select:focus,
.gb-field textarea:focus {
  border-color: #F26076;
  box-shadow: 0 0 4px rgba(242, 96, 118, 0.4);
}

.gb-field textarea { resize: vertical; min-height: 80px; }

/* Honeypot — invisible to humans, traps bots that auto-fill forms */
.gb-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.gb-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23F26076'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.gb-field select option { background: #1f0d10; }

.gb-flag-preview {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #8a2e3e;
}

.gb-flag-preview canvas { image-rendering: pixelated; border: 1px solid #3d1620; }

.gb-submit {
  font-family: 'VT323', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  background: #2b1018;
  border: 1px solid #F26076;
  color: #F26076;
  padding: 6px 16px;
  cursor: pointer;
  width: 100%;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.gb-submit:hover { background: #F26076; color: #1f0d10; border-color: #F26076; }

.gb-success {
  display: none;
  margin-top: 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #FFD150;
  border: 1px solid #FFD150;
  padding: 5px 8px;
  animation: blink 0.7s step-end 4;
}

.gb-entries-col {
  padding: 12px;
  overflow-y: auto;
  max-height: 360px;
  background: #160a0d;
  /* subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #5c1e28 transparent;
}

.gb-entries-col::-webkit-scrollbar       { width: 4px; }
.gb-entries-col::-webkit-scrollbar-track { background: transparent; }
.gb-entries-col::-webkit-scrollbar-thumb { background: #5c1e28; }

.gb-entry {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  border-bottom: 1px dashed #3d1620;
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative;
}

.gb-entry:last-child { border-bottom: none; margin-bottom: 0; }

.gb-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.gb-avatar-col canvas { image-rendering: pixelated; }
.gb-avatar-col .gb-avatar { border: 1px solid #3d1620; }
.gb-avatar-col .gb-flag  { border: 1px solid #3d1620; }

.gb-entry-name {
  font-size: 18px;
  color: #FFD150;
  letter-spacing: 1px;
}

.gb-entry-country {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #8a2e3e;
  margin-bottom: 3px;
}

.gb-entry-comment {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: #e8c0c5;
  line-height: 1.5;
  word-break: break-word;
}

.gb-entry-date {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #5c1e28;
  position: absolute;
  top: 0;
  right: 0;
}

.gb-empty {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: #5c1e28;
  text-align: center;
  padding: 30px 0;
}

.gb-entry-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #8a2e3e;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.gb-entry-count span { color: #FFD150; }

/* ── PHOTO THUMBNAILS ── */
.thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: #111;
  border: 1px solid #333;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.05s;
}

.thumb:hover { border-color: var(--cyan); z-index: 10; }

.thumb-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.85);
  color: var(--white);
  font-size: 13px;
  font-family: 'Share Tech Mono', monospace;
  padding: 3px 5px;
  opacity: 0;
  transition: opacity 0.05s;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.thumb:hover .thumb-overlay { opacity: 1; }
.thumb-overlay .cat   { color: var(--cyan);   font-size: 11px; }
.thumb-overlay .title { color: var(--yellow); }

.thumb.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* ── LARGE SCREENS ── */
@media (min-width: 1400px) {
  main { grid-template-columns: 1fr min(42%, 680px); }
}

/* ── MOBILE ── */
@media (max-width: 700px) {
  main  { grid-template-columns: 1fr; }
  .main-col { border-right: none; }

  aside {
    position: static;
    height: auto;
    overflow-y: visible;
    border-top: 2px solid var(--blue);
  }

  .grid { grid-template-columns: repeat(3, 1fr); }
  .site-title { font-size: 36px; }
}