.clicks-main {
  padding:40px 0 28px}
.clicks-main h1 {
  margin:0 0 30px}
.photo-timeline {
  position:relative}
.photo-timeline:before {
  content:"";
  position:absolute;
  left:116px;
  top:10px;
  bottom:0;
  width:1px;
  background:var(--line)}
.occasion {
  position:relative;
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:46px;
  padding-bottom:34px}
.occasion:last-child {
  padding-bottom:0}
.occasion:before {
  content:"";
  position:absolute;
  left:111px;
  top:7px;
  width:11px;
  height:11px;
  border:2px solid var(--accent);
  background:var(--bg);
  border-radius:50%}
.occasion-date {
  display:block;
  font-size:14px;
  line-height:1.6;
  color:var(--accent);
  margin:1px 0 0}
.occasion-content {
  min-width:0}
.occasion h2 {
  font:400 26px/1.25 var(--serif);
  letter-spacing:-.3px;
  margin:0 0 16px}
.occasion-photos {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:14px}
.occasion-photos figure {
  margin:0;
  min-width:0}
.photo-link {
  display:block;
  border-radius:8px;
  overflow:hidden;
  background:var(--soft);
  cursor:zoom-in}
.photo-link:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px}
.occasion-photos img {
  width:100%;
  height:auto;
  display:block}
.photo-viewer-open {
  overflow:hidden}
.photo-viewer {
  width:fit-content;
  max-width:min(1100px,calc(100vw - 40px));
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--ink)}
.photo-viewer::backdrop {
  background:rgba(12,14,28,.82)}
.photo-viewer figure {
  margin:0}
.photo-viewer img {
  display:block;
  max-width:100%;
  width:auto;
  max-height:calc(100vh - 132px);
  max-height:calc(100dvh - 132px);
  height:auto;
  border-radius:6px}
.photo-viewer figcaption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px 2px 0;
  font-size:15px}
.photo-viewer-close {
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--soft);
  color:var(--accent);
  font:inherit;
  cursor:pointer}
.photo-viewer-close:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px}
.clicks-page footer {
  padding-top:0;
  padding-bottom:26px}
@media(max-width:700px) {
  .clicks-main {
    padding:28px 0 22px  }
  .clicks-main h1 {
    font-size:40px;
    margin-bottom:27px  }
  .photo-timeline:before {
    left:6px  }
  .occasion {
    display:block;
    padding-left:30px;
    padding-bottom:29px  }
  .occasion:before {
    left:1px;
    top:7px  }
  .occasion-date {
    margin:0 0 7px  }
  .occasion h2 {
    font-size:25px;
    margin-bottom:15px  }
  .occasion-photos {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px  }
}
@media(max-width:460px) {
  .occasion-photos {
    grid-template-columns:1fr}
  .photo-viewer {
    max-width:calc(100vw - 20px);
    padding:8px}
}