/* =========================
   Khosh in Japan — styles.css
   (clean rebuild)
   ========================= */

/* — Design tokens — */
:root{
  --bg:#ffffff;
  --ink:#0b0b0b;
  --accent:#e11d48;              /* rose / Japan red */
  --muted:#6b7280;
  --wrap:1180px;
  --border:3px solid var(--ink);
  --shadow:8px 8px 0 rgba(0,0,0,.08);
}

/* — Base — */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:10px }

/* — Wrapper — */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px }

/* =========================
   HERO (SVG banner + title)
   ========================= */
.hero{ position:relative }

/* The SVG container — if this is missing, banner will look “gone” */
.hero-art{
  position:relative;              /* enables z-index */
  z-index:0;
  width:100%;
  height:44vh;
  min-height:320px;
  max-height:520px;
  overflow:hidden;
  border-bottom:var(--border);
}
.hero-art svg{
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;            /* don’t block scrolling/clicks */
}

/* Centered title card above the art */
.hero-text{
  position:absolute;
  z-index:2;                      /* sits above the SVG */
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.92);
  border:var(--border);
  border-radius:18px;
  padding:16px 22px;
  text-align:center;
  box-shadow:var(--shadow);
  max-width:min(86%, 960px);
}
.hero-text h1{ margin:0; font:800 28px/1.2 Rubik, Inter, sans-serif }
.hero-text p{ margin:6px 0 0; color:#374151 }

@media (max-width:720px){
  .hero-text{ padding:12px 16px }
  .hero-text h1{ font-size:20px }
}

/* =========================
   RIGHT YEAR MENU
   ========================= */
.year-menu{
  position:fixed;
  right:18px; top:120px;
  z-index:30;
  background:#fff;
  border:var(--border);
  border-radius:16px;
  overflow:hidden;                /* prevents active bg bleed */
  box-shadow:var(--shadow);
}
.year-menu nav{ display:flex; flex-direction:column }
.year-menu a{
  display:block;                  /* fill the frame; no bleed */
  padding:12px 18px;
  font:800 15px/1.1 Inter, system-ui, sans-serif;
  border-bottom:1px solid #eee;
  transition:background .15s ease, color .15s ease;
}
.year-menu a:last-child{ border-bottom:0 }
.year-menu a:hover{ background:#f7f7f7 }
.year-menu a.active{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}

/* Mobile: make it a top bar */
@media (max-width:920px){
  .year-menu{
    position:sticky; top:0; right:auto; margin:8px;
    border-radius:14px;
  }
  .year-menu nav{ flex-direction:row }
  .year-menu a{
    border-bottom:0;
    border-right:1px solid #eee;
    padding:10px 14px;
  }
  .year-menu a:last-child{ border-right:0 }
}

/* =========================
   SECTIONS / YEARS
   ========================= */
main{ margin:24px auto }
.year-section{ margin:56px 0 68px }
.year-section h2{
  display:inline-block;
  margin:0 0 6px;
  padding:6px 12px;
  background:#fff;
  border:var(--border);
  border-radius:12px;
  box-shadow:6px 6px 0 rgba(0,0,0,.06);
}
.year-section .intro{ color:var(--muted); margin:6px 0 18px }

/* =========================
   MASONRY GALLERY
   ========================= */
.masonry{ column-count:3; column-gap:14px }
@media (max-width:980px){ .masonry{ column-count:2 } }
@media (max-width:640px){ .masonry{ column-count:1 } }

.panel{
  width:100%;
  margin:0 0 14px;
  border:var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:6px 6px 0 rgba(0,0,0,.06);
  break-inside:avoid;
  object-fit:cover;
  height:260px;

  /* subtle checker if an image is missing */
  background-image:
    linear-gradient(45deg,#f8f8f8 25%,transparent 25%),
    linear-gradient(-45deg,#f8f8f8 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f8f8f8 75%),
    linear-gradient(-45deg,transparent 75%,#f8f8f8 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
}
.panel.tall{ height:360px }
.panel.wide{ height:300px }

/* =========================
   LIGHTBOX
   ========================= */
#lightbox{ border:0; padding:0; background:transparent }
#lightbox::backdrop{ background:rgba(0,0,0,.85) }
#lightbox img{
  max-width:90vw; max-height:80vh;
  display:block;
  border-radius:16px;
  border:3px solid #fff;
}
#lightbox .close{
  margin:10px auto;
  display:block;
  padding:8px 12px;
  border-radius:10px;
  border:2px solid #fff;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{ margin:60px 0 24px; color:#6b7280 }

/* =========================
   REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-text{ transform:none; left:50%; top:50% }
}