/* Dark theme tokens */
:root{
  --bg:#000; --fg:#0f0; --fg-dim:#7f7; --rule:1px solid var(--fg);
  --wrap:clamp(320px,92vw,940px); --gap:16px; --gap-lg:20px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:monospace;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased
}
a{color:var(--fg);text-decoration:none}              /* default: no underline */
.small a, a[href^="mailto:"], #home-bluesky a{color:#0c0}
.small a:hover, a[href^="mailto:"]:hover, #home-bluesky a:hover{font-style:italic;color:var(--fg)}
a[href^="mailto:"]{text-decoration:underline}        /* email links always underlined */
img{max-width:100%;height:auto;display:block;border:1px solid var(--fg)}
code,.addr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;overflow-wrap:anywhere}
pre{white-space:pre-wrap;word-wrap:break-word}

/* wrapper + safe-area for iOS */
.wrap{
  width:100%;max-width:var(--wrap);margin:0 auto;padding:16px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  padding-top:max(16px,env(safe-area-inset-top));
  padding-bottom:max(16px,env(safe-area-inset-bottom));
}

/* grid */
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:880px){.grid{grid-template-columns:1fr 1fr;gap:var(--gap-lg)}}

/* blocks */
h3{font-size:1.05em}
header.site{grid-column:1/-1;text-align:center;margin:12px 0}   /* slightly tighter base */
footer{grid-column:1/-1;border-top:1px solid #0c0;margin-top:16px;padding-top:12px;text-align:center;color:var(--fg-dim)}
nav{grid-column:1/-1;display:flex;gap:12px;align-items:flex-end;border-bottom:1px solid #0c0;padding:8px 0 4px}
nav img{width:24px;height:24px;border:1px solid var(--fg);padding:2px;background:#000;image-rendering:pixelated;margin-bottom:4px}
nav a{color:var(--fg)}                              /* plain by default */
nav a.current, nav a[aria-current="page"]{
  font-style:italic;
  text-decoration:underline;                        /* underline only when active */
}

/* Navigation styling with active/inactive state */
nav a {
  color: var(--fg);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

nav a[aria-current="page"] {
  opacity: 1;
  font-style: italic;
  text-decoration: underline;
}

/* Desktop hover effect */
@media (hover:hover) and (pointer:fine) {
  nav a:hover {
    opacity: 1;
    text-decoration: underline;
  }
  nav a:focus-visible {
    opacity: 1;
    text-decoration: underline;
    outline: none;
  }
}

/* Icon styling: faded green by default, grey on Home page */
nav img {
  width: 24px;
  height: 24px;
  border: 1px solid var(--fg);
  padding: 2px;
  background: #000;
  image-rendering: pixelated;
  opacity: 0.6;
  filter: saturate(60%);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Icon grey ON Home page */
body:has(a[aria-current="page"][href="index.html"]) nav img {
  opacity: 0.6;
  filter: saturate(0%);
}

/* Gallery figures: dimmed/transparent */
figure {
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
  background: #010;
  border: 1px solid var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

figure svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(0.6);
}

figure figcaption {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 10px;
  color: var(--fg-dim);
  pointer-events: none;
}

/* Desktop hover on gallery figures */
@media (hover:hover) and (pointer:fine) {
  figure:hover {
    opacity: 1;
  }
  figure:hover svg {
    filter: saturate(1);
  }
}

/* dashed info blocks */
.notice,.news{
  grid-column:1/-1;
  border:1px dashed var(--fg);
  padding:8px 8px 7px 8px;
  background:#010;
  font-weight:bold;
  font-style:italic;
  max-width:48ch; /* match design-wrap constraint */
}
nav + .notice, nav + .design-wrap{margin-top:-6px}
/* Remove extra top margin on content immediately following a notice */
.notice + section > :first-child,
.notice + .gallery {
  margin-top:0;
}
/* tighter rhythm when any section precedes the header */
.grid:has(> section ~ header.site) > header.site { margin-top: calc(-1 * var(--gap) + 4px); }
@media (min-width:880px){
  .grid:has(> section ~ header.site) > header.site { margin-top: calc(-1 * var(--gap-lg) + 6px); }
}

/* gallery (Design) */
figure{margin:0}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:880px){.gallery{grid-template-columns:1fr 1fr 1fr}}

/* Design page gallery container */
.design-wrap{max-width:48ch;display:flex;flex-direction:column;gap:var(--gap)}

/* util */
.small{font-size:12px;color:var(--fg-dim)}
.center{text-align:center}
.fullrow{grid-column:1/-1}

/* tight paragraph rhythm — reduce gaps between sibling p/span inside a block */
.tight p,.tight .small{margin-top:2px;margin-bottom:2px}
.tight h3{margin-bottom:4px}
#home-news h3{margin-bottom:-5px !important;padding-bottom:0}
.gap-before{margin-top:16px !important}

/* Optical alignment: indent fullrow text to match .notice padding+border (9px) on non-gallery pages */
body:not(:has(a[aria-current="page"][href="design.html"])) section.fullrow {
  padding-left: 9px;
}

/* placeholder look */
.placeholder{color:var(--fg-dim);font-style:italic}

/* ASCII art spacer zones — hidden depth below/above fold */
.ascii-spacer {
  grid-column: 1/-1;
  overflow: hidden;
  color: var(--fg-dim);
  opacity: 0.15;
  font-size: 9px;
  line-height: 1.1;
  white-space: pre;
  font-family: monospace;
  pointer-events: none;
  user-select: none;
}
.ascii-spacer-1x { height: 812px; }   /* iPhone 11 Pro viewport height */
.ascii-spacer-3x { height: 2436px; }

/* Peek character at the fold boundary */
.peek-wrap {
  grid-column: 1/-1;
  position: relative;
  height: 12px;
  overflow: hidden;
}
.peek-wrap span {
  position: absolute;
  right: 12px;
  font-size: 48px;
  line-height: 1;
  color: var(--fg);
  opacity: 0.7;
}
/* Bottom peek: top sliver of char visible, rest clipped */
.peek-bottom span { top: 0; }
/* Top peek: bottom sliver visible (dot of !) — ascender clipped above */
.peek-top span { bottom: 0; }

html{overflow-y:scroll;scrollbar-gutter:stable;}

/* Name dropdown (contact page) */
.name-dropdown {
  position: relative;
  display: inline-block;
}

.name-trigger {
  cursor: pointer;
  border-bottom: 1px dashed var(--fg);
  transition: opacity 0.2s ease;
}

.name-card {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 8px 12px;
  background: #010;
  border: 1px dashed var(--fg);
  text-align: center;
  white-space: nowrap;
  width: max-content;
  z-index: 10;
}

.name-card p {
  margin: 4px 0;
}

.name-card a {
  color: var(--fg);
}

/* Show on hover (desktop) */
@media (hover:hover) and (pointer:fine) {
  .name-dropdown:hover .name-card {
    display: block;
  }
  .name-dropdown:hover .name-trigger {
    opacity: 0.7;
  }
}

/* Show on focus for accessibility + touch */
.name-dropdown:focus-within .name-card {
  display: block;
}

.name-trigger:focus {
  outline: 1px dashed var(--fg);
  outline-offset: 2px;
}

/* Eth address popup */
.eth-dropdown{position:relative;display:inline-block;opacity:0.35;transition:opacity 0.2s ease}
.eth-trigger{cursor:pointer;font-style:italic;color:var(--fg-dim)}
.eth-trigger:focus{outline:1px dashed var(--fg);outline-offset:2px}
.eth-card{display:none;position:absolute;bottom:100%;left:0;margin-bottom:8px;padding:8px 12px;background:#010;border:1px dashed var(--fg);text-align:center;white-space:nowrap;z-index:10;font-style:italic;color:var(--fg)}
.eth-card p{margin:0}
.eth-dropdown:hover{opacity:0.7}
.eth-dropdown:hover .eth-card{display:block}
.eth-dropdown:focus-within .eth-card{display:block}

/* web3 inline hint popup */
.web3-hint{position:relative;display:inline}
.web3-trigger{color:var(--fg);text-decoration:none;border-bottom:1px dashed var(--fg-dim);cursor:pointer;transition:opacity 0.2s ease}
.web3-trigger:hover{opacity:0.8;text-decoration:underline}
.web3-trigger:focus{outline:1px dashed var(--fg);outline-offset:2px}
.web3-popup{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;padding:6px 10px;background:#010;border:1px dashed var(--fg);white-space:nowrap;z-index:10;font-size:0.75em;line-height:1.4}
.web3-popup-link{color:var(--fg);text-decoration:none;font-style:italic}
.web3-popup-link:hover{text-decoration:underline}
.web3-hint:hover .web3-popup{display:block}
.web3-hint:focus-within .web3-popup{display:block}

/* Gallery thumbnails: monochrome green */
.gallery-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  filter: grayscale(1) brightness(0.45) sepia(1) hue-rotate(75deg) saturate(3);
  transition: filter 0.2s ease;
}

/* Gallery popup — floating detail card */
.gallery-popup {
  display: none;
  position: absolute;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  background: #010;
  border: 1px dashed var(--fg);
  padding: 10px;
  max-width: 320px;
  width: max-content;
  pointer-events: auto;
}

.gallery-popup-img {
  display: block;
  max-width: 280px;
  max-height: 280px;
  width: auto;
  height: auto;
  border: 1px solid var(--fg);
  image-rendering: auto;
}

.gallery-popup-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-dim);
  text-align: center;
  white-space: normal;
}

.gallery-popup-details strong {
  color: var(--fg);
  font-size: 12px;
}

.gallery-popup-desc {
  font-style: italic;
}

.gallery-popup-note {
  color: var(--fg);
  font-size: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--fg-dim);
  padding-top: 4px;
}

/* Desktop: show popup on figure hover */
@media (hover:hover) and (pointer:fine) {
  figure:hover .gallery-thumb {
    filter: grayscale(1) brightness(0.55) sepia(1) hue-rotate(75deg) saturate(3);
  }
}

/* Touch: hide popup entirely (click still opens image) */
@media (hover:none) {
  .gallery-popup { display: none !important; }
}