/* Reset and Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
  font-family: 'PxPlusVGA';
  src: url('/assets/fonts/WebPlus_IBM_VGA_8x16.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Satoshi */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Palette */
:root{
  --bg:#fff;
  --text:#c00000;        /* red text */
  --grid:#00ff7f;        /* green grid lines */
  --btn-red:#c00000;
  --btn-text:#fff;
  --pixel-mono: 'PxPlusVGA', 'VT323', monospace;  /* grid line thickness (single source of truth) */
  --font-jost: 'Jost', system-ui, -apple-system, sans-serif;
  --grid-line: 2px;

  --max-content: 1200px;
}

/* 1) Load a pixel monospace (VT323 as fallback), but prefer a true bitmap VGA if you can self-host */



/* 3) Apply everywhere + disable smoothing completely 
html, body, button, input, select, textarea,
h1,h2,h3,h4,h5,h6, p, a, small, strong, em,
nav, header, footer, main,
.sketchbook-name, .page-info, .back-to-top,
.nav-link, .about-btn, #lucky-btn
*/
html, body, button, input, select, textarea,
h1,h2,h3,h4,h5,h6, p, a, small, strong, em,
nav, header, footer, main,
.sketchbook-name, .page-info, .back-to-top,
.nav-link, .about-btn, #lucky-btn {
  font-family: var(--pixel-mono) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;          /* pixels align to grid */
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: grayscale !important; /* avoids subpixel AA on macOS */
  font-smooth: never !important;          /* non-standard but helps on some browsers */
  text-rendering: optimizeSpeed !important;
}

body, p, li, .gallery-header p, .sketchbook-header p 
{ font-family: var(--font-jost) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;    
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 4) Use integer pixel sizes only (fractional sizes will blur) */
html { font-size: 16px; }     /* base integer */
body { line-height: 16px; }   /* match to integer multiple to avoid half-pixels */

/* Headings and UI with integer sizes */
h1 { font-size: 20px; line-height: 20px; }
h2 { font-size: 18px; line-height: 18px; }
h3 { font-size: 16px; line-height: 16px; }
p, a, li, .sketchbook-name { font-size: 14px; line-height: 14px; }

:lang(uk) .page-content,
:lang(uk) .page-body,
:lang(uk) .page-body p,
:lang(uk) .page-body li {
  font-family: var(--font-jost) !important;
}
#lucky-btn, .about-btn, .page-info, .back-to-top, .nav-link {
  font-size: 14px; line-height: 14px;
}
/* Typography (early‑web vibe) 
body{
  font-family:"Times New Roman", Times, Georgia, "Courier New", serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  font-size:16px;
}
*/
/* HEADER
   You had two red lines: one on header and one on nav.
   Keep only header underline and remove the nav bottom border. */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--text);  /* single red line across full width */
  position:sticky; top:0; z-index:100;
}
.nav{                 /* remove duplicate red line here */
  max-width:var(--max-content);
  margin:0 auto;
  padding:1.25rem 1.25rem 1rem;
  display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:none;
}
.title a{
  color:var(--text); text-decoration:none; font-weight:700; font-size:1.35rem;
  letter-spacing:-0.01em;
  border-bottom:1px solid var(--text); padding-bottom:2px; /* handmade underline */
}
.subtitle{ margin-top:0.4rem; font-size:0.9rem; }

/* Buttons 
.nav-buttons{ display:flex; gap:.6rem; align-items:center; }
#lucky-btn{
  background:var(--btn-red); color:var(--btn-text);
  border:1px solid var(--btn-red); padding:.6rem .9rem;
  font:700 .85rem/1 "Courier New", Courier, monospace; text-transform:lowercase; cursor:pointer;
}
.about-btn{
  background:var(--bg); color:var(--btn-red);
  border:1px solid var(--btn-red); padding:.6rem .9rem;
  font:700 .85rem/1 "Courier New", Courier, monospace; text-transform:lowercase; text-decoration:none;
}
#lucky-btn:hover,#lucky-btn:active,.about-btn:hover,.about-btn:active{ background:inherit; color:inherit; }
/* Place in assets/css/main.css */

/* Container on the right */
.nav-actions{
  display:flex;
  align-items:center;
  gap: 1rem;
}

/* Keep the Feeling Lucky as the only red button */
#lucky-btn{
  background:#c00000; color:#fff; border:1px solid #c00000;
  padding:.5rem .9rem; font:700 14px/1 "Courier New", Courier, monospace;
  text-transform:lowercase; cursor:pointer;
}
#lucky-btn:hover,#lucky-btn:active{ background:inherit; color:inherit; }

/* Convert About, Guestbook, Webring to plain links (no button box) */
.nav-links{
  display:flex; align-items:center; gap: 1rem; list-style:none; margin:0; padding:0;
}
.nav-link{
  color:#c00000; text-decoration:none;
  font:700 14px/1 "Courier New", Courier, monospace; text-transform:lowercase;
  border-bottom:1px dotted #c00000; /* early-web vibe */
}
.nav-link:hover{ border-bottom-style:solid; }

/* Remove previous .about-btn styles if present */
.about-btn{ all: unset; }
.about-btn{ color:#c00000; cursor:pointer; font:inherit; }
/* Layout */
main{ max-width:var(--max-content); margin:0 auto; padding:2rem 1.25rem; }

/* TRUE GRID-PAPER IMPLEMENTATION
   Use CSS Grid with consistent gaps so both horizontal and vertical lines are the SAME thickness.
   The trick: the grid container background is green (lines)
   and each cell gets white background + an inner red border.
   No extra margins or borders anywhere that would change thickness. */
.main-page .sketchbook-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--grid-line);         /* THIS defines both horizontal and vertical line thickness */
  background:var(--grid);       /* visible as the lines between white cells */
  width:100vw;
  margin-left:calc(-50vw + 50%); /* stretch full width */
  padding:var(--grid-line);       /* outer frame, same thickness as lines */
}

/* Ensure each item completely covers its grid area so only the gap shows green */
.main-page .sketchbook-item{
  background:var(--bg);
  /* Important: no margins; otherwise gap visually changes thickness */
  margin:0;
  /* Inner cell red outline to match your request */
  border:1px solid var(--text);
  /* Keep square cells; padding inside for cover and label */
  aspect-ratio:1/1;
  position:relative;
  padding:1rem;
}

/* Inner contents */
.main-page .sketchbook-item a{
  color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%;
}
.main-page .cover-container{
  flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;
  margin-bottom:1.8rem; background:var(--bg); border:none;
}
.main-page .cover-container img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Label */
.main-page .sketchbook-item .sketchbook-name,
.main-page .sketchbook-item h3{
  position:absolute; left:1rem; right:1rem; bottom:.9rem;
  text-align:left; font:400 .95rem/1.2 "Times New Roman", Times, Georgia, serif; color:var(--text);
}

/* Responsive columns */
@media (max-width:1200px){ .main-page .sketchbook-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){  .main-page .sketchbook-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:700px){  .main-page .sketchbook-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:500px){  .main-page .sketchbook-grid{ grid-template-columns:repeat(2,1fr); } }

/* INDIVIDUAL SKETCHBOOK PAGES (no red outlines on images) */
.sketchbook-page header.site-header{ display:none; } /* keep viewer clean */
.sketchbook-page .sketchbook-page{ margin-bottom:3rem; text-align:center; }
.sketchbook-page img{
  max-width:100%; height:auto; margin:0 auto; max-height:85vh; object-fit:contain; border:none;
}
@media (orientation:portrait){ .sketchbook-page img{ max-height:80vh; } }
@media (orientation:landscape){ .sketchbook-page img{ max-height:90vh; } }
@media (max-width:768px){ .sketchbook-page img{ max-height:70vh; } }

/* Page counter and back-to-top */
.page-info{
  position:fixed; top:1rem; right:1rem; z-index:50;
  background:var(--bg); color:var(--text); border:1px solid var(--text);
  padding:.4rem .8rem; font:700 .75rem/1 "Courier New", Courier, monospace; text-transform:uppercase; letter-spacing:.02em;
}
.back-to-top{
  position:fixed; right:1rem; bottom:1rem; z-index:1000;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--text); border:1px solid var(--text); text-decoration:none; font-size:1.2rem;
}
.last-upd{ font-size:12px; margin-top:.25rem; font-family: var(--pixel-mono, monospace); color: var(--red); }
/* Smooth scroll */
html{ scroll-behavior:smooth; }
/* Webring list styles */
.links-list{ list-style:none; padding:0; }
.links-list li{ margin:.4rem 0; font-size:14px; font-family: var(--font-jost, sans-serif); }
.links-list a{ color:var(--red); text-decoration:none; border-bottom:1px dotted var(--red); }
.links-list a:hover{ border-bottom-style:solid; }

/* Guestbook styles */
.guestbook-form{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.guestbook-form input, .guestbook-form textarea{
  border:1px solid var(--red); padding:.4rem .5rem; background:#fff; color:var(--red);
  font-family: var(--pixel-mono, monospace);
}
.gb-entry{ border:1px solid var(--red); padding:.6rem; margin:.6rem 0; background:#fff; }
.gb-head{ display:flex; justify-content:space-between; font-size:12px; font-family: var(--pixel-mono, monospace); }
.gb-msg{ margin-top:.35rem; white-space:pre-wrap; }
.gb-note{ display:block; opacity:.8; font-size:12px; }

/* Visit counter style */
.visit-counter{
  position:fixed; left:1rem; bottom:1rem; z-index:50;
  border:1px solid var(--red); background:#fff; color:var(--red);
  padding:.3rem .6rem; font-size:12px; font-family: var(--pixel-mono, monospace);
}