/* =========
   Base
   ========= */

:root{
  --bg: #fbfaf7;
  --paper: #ffffff;
  --text: #1a1a1a;
  --muted: #5b5b5b;
  --hairline: rgba(0,0,0,.10);
  --shadow: 0 12px 40px rgba(0,0,0,.06);
  --ui: Verdana, Geneva, Tahoma, sans-serif;
  --measure: 72ch;        /* ширина строки */
  --pad: clamp(18px, 2.8vw, 36px);
  --radius: 14px;
}

*{ box-sizing: border-box; }

html{
  color-scheme: light;
  text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    ui-serif, Georgia, "Times New Roman", Times, serif;
  line-height: 1.75;
  letter-spacing: .01em;
}

/* Link styling */
a{
  color: red;
  text-decoration-color: rgba(0,0,0,.35);
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}
a:hover{
  text-decoration-color: rgba(0,0,0,.65);
}

/* Skip link */
.skip{
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.skip:focus{
  left: 12px;
  top: 12px;
  z-index: 10;
}

/* =========
   Layout
   ========= */

.page{
  max-width: calc(var(--measure) + (var(--pad) * 2));
  margin: 0 auto;
  padding: calc(var(--pad) * 1.6) var(--pad);
}

.mast{
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--pad) * 1.05);
  margin-bottom: calc(var(--pad) * 1.2);
}

.eyebrow{
  margin: 0 0 .6rem 0;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

h1{
  margin: 0 0 .8rem 0;
  font-size: clamp(2rem, 4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.dek{
  margin: 0;
  font-size: 1.15rem;
  color: var(--muted);
  max-width: var(--measure);
}

.meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem 1rem;
  margin: 1.2rem 0 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.meta dt{
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.meta dd{
  margin: .2rem 0 0 0;
  font-size: 1rem;
}

/* =========
   Prose
   ========= */

.prose{
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--pad) * 1.05);
}

.prose > section{
  max-width: var(--measure);
}

h2{
  margin: 1.6rem 0 .65rem 0;
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
h3{
  margin: 1.2rem 0 .5rem 0;
  font-size: 1.2rem;
  line-height: 1.35;
}

p{
  margin: .85rem 0;
}

ul{
  margin: .75rem 0 1rem 1.1rem;
  padding: 0;
}
li{
  margin: .35rem 0;
}

hr{
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 1.6rem 0;
}

blockquote{
  margin: 1.2rem 0;
  padding: .8rem 1rem;
  border-left: 3px solid rgba(0,0,0,.22);
  background: rgba(0,0,0,.02);
  border-radius: 10px;
}
blockquote p{
  margin: 0;
  font-style: italic;
}
blockquote footer{
  margin-top: .6rem;
  font-size: .95rem;
  color: var(--muted);
}

.callout{
  padding: .85rem 1rem;
  background: rgba(0,0,0,.03);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

pre{
  margin: 1rem 0;
  padding: .9rem 1rem;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: rgba(0,0,0,.03);
}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
}

.footnote{
  color: var(--muted);
  font-size: .98rem;
  margin-top: 1.1rem;
}

.contact{
  margin: 1rem 0 0 0;
  padding: .9rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}
.contact p{ margin: .35rem 0; }
address{ font-style: normal; }

.colophon{
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: .95rem;
}

/* =========
   Responsive
   ========= */

@media (max-width: 640px){
  .meta{
    grid-template-columns: 1fr;
  }
  blockquote{
    padding: .75rem .9rem;
  }
}
/* =========================================================
   Gallery (links grid) — current version
   ========================================================= */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.g-link{
  position:relative;
  display:block;
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background: var(--panel);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.g-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

.g-link img{
  width:100%;
  height:auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display:block;
}
/* ===== Documents (portrait) ===== */
.g-link.is-doc img{
  max-width: 50%;
  margin: 0 auto;
  opacity: .95;
  aspect-ratio: 3 / 4;     /* портрет */
  object-fit: contain;     /* НЕ резать */
  background: transparent;
  padding: 8px;            /* воздух вокруг документа */
}

.g-cap{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;

  padding:0;
  background: none;
  border: none;

  font-family: var(--ui);
  font-size: 14px;
  color: #fff;
  line-height: 1.3;

  /* читаемость без плашки */
  text-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 0 1px rgba(0,0,0,.8);

  pointer-events: none;
}


.g-link.is-video::after{
  content:"▶";
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--ui);
  font-size: 14px;
}
/* =========================================================
   Lightbox (.lb) — transparent container + soft shading + caption overlay
   (FIXED: buttons clickable again)
   ========================================================= */
.lb[hidden]{ display:none !important; }

.lb{
  position:fixed;
  inset:0;

  background:
    radial-gradient(1200px 800px at 50% 45%, rgba(0,0,0,.48), rgba(0,0,0,.72)),
    rgba(0,0,0,.35);

  z-index: 3000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
}

.lb-inner{
  position:relative;
  width: min(1900px, 99vw);
  z-index: 1;
}

.lb-media{
  width:100%;
  max-height: 92vh;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  border-radius: 18px;
  overflow:hidden;

  background: transparent;
  border: none;

  box-shadow: 0 24px 70px rgba(0,0,0,.45);

  /* важное: медиа ниже кнопок */
  z-index: 1;
}

/* Hide by default, JS toggles display */
#lb-img, #lb-video, #lb-yt{
  display:none;
}

/* IMAGE */
#lb-img{
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}

/* VIDEO */
#lb-video{
  width: 100%;
  max-height: 92vh;
  background:#000;
}

/* YOUTUBE */
#lb-yt{
  width: 100%;
  height: min(92vh, 72vw);
  border: 0;
  background:#000;
}

/* Caption overlay: поверх медиа снизу (но НЕ ловит клики) */
.lb-caption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;

  padding: 10px 12px;
  border-radius: 0;              /* больше никакой «плашки» */

  color: #fff;
  font-family: var(--ui);
  font-size: 24px;
  line-height: 1.35;
  text-align: center;

  /* мягкая тень для читаемости, без рамки и фона */
  background: none;
  border: none;
  backdrop-filter: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);

  pointer-events: none;
  z-index: 5;
}


/* Buttons (always on top + clickable) */
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);

  background: rgba(0,0,0,.35);
  color: #fff;

  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 26px;
  line-height:1;

  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);

  /* FIX: always above media */
  z-index: 20;
  pointer-events: auto;
}

.lb-close{
  top: 10px;
  right: 10px;
}
.lb-prev{
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.lb-next{
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background: rgba(0,0,0,.50);
}

.lb-close:focus, .lb-prev:focus, .lb-next:focus{
  outline: 3px solid rgba(47,111,109,.40);
  outline-offset: 2px;
}