/* =========================================================================
   same place — stylesheet

   Dials worth knowing about:
     --ground / --ink / --dim / --rule   colours
     --rail-w                            width of the date rail
     --pad                               breathing room around everything
     --frame-h                           height of one photo frame (one screen)
     .frame img { max-height }            how large the photo sits in its frame
   ========================================================================= */

:root {
  --ground: #2a2c2a;
  --ink: #e9eae5;
  --dim: #8d9089;
  --rule: #454845;
  --hair: rgba(233, 234, 229, 0.13);
  --field: #33352f;

  /* A lighter grey instead, if the dark surround is too much:
       --ground: #d4d5d1;  --ink: #23241f;  --dim: #6d6f68;
       --rule: #b8bab3;    --hair: rgba(35, 36, 31, 0.18);
       --field: #cdcec9;                                            */

  --sans: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;

  --pad: 22px;
  --rail-w: 92px;
  --head-h: 46px;
  --bar-h: 34px;
}

@supports not (height: 100svh) {
  .frame { height: calc(100vh - var(--head-h) - var(--bar-h)); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dim); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.linkish {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.linkish:hover { color: var(--dim); }

/* ------------------------------------------------------------------ head */

.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--head-h);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad);
  background: var(--ground);
  border-bottom: 1px solid var(--hair);
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand:hover { color: inherit; }
.brand-name { font-size: 14px; letter-spacing: 0.01em; }
.brand-place { color: var(--dim); }

.nav { display: flex; gap: 16px; color: var(--dim); }
.nav a:hover, .nav .linkish:hover { color: var(--ink); }
#toggleRail[aria-expanded="true"] { color: var(--ink); }

/* ------------------------------------------------------------------ rail */

/* The rail slides out of the way. The stage widens to meet it, so a photo
   gets the whole window when the dates are hidden. */
.rail {
  transform: translateX(0);
  transition: transform 260ms ease;
  position: fixed;
  top: var(--head-h);
  bottom: var(--bar-h);
  left: 0;
  width: var(--rail-w);
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-right: 1px solid var(--hair);
  background: var(--ground);
}
.rail::-webkit-scrollbar { width: 0; }

body.rail-closed .rail { transform: translateX(-100%); }
body.rail-closed .stage { left: 0; }

.rail-list {
  list-style: none;
  margin: 0;
  padding: 14px 0 60vh;
}

.rail-list li { position: relative; padding: 0 var(--pad) 0 18px; }

/* A visit that came long after the previous one opens up a gap, so the
   rhythm of the project is legible at a glance. */
.rail-list li.gap-month { margin-top: 14px; }
.rail-list li.gap-season { margin-top: 34px; }

.rail-list li.year-start {
  margin-top: 26px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}

.rail-date {
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--dim);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
}
.rail-date:hover { color: var(--ink); }

.rail-list li.current .rail-date { color: var(--ink); }
.rail-list li.current .rail-date::before {
  content: "";
  position: absolute;
  left: 8px;
  width: 4px;
  height: 4px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ink);
}

/* ----------------------------------------------------------------- stage */

/* The stage is its own scroll container. That keeps the header, rail and bar
   perfectly still, makes snapping reliable, and lets the script correct the
   scroll position when older frames are loaded in above the current one. */
.stage {
  position: fixed;
  top: var(--head-h);
  bottom: var(--bar-h);
  left: var(--rail-w);
  right: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  transition: left 260ms ease;
  /* The script corrects the scroll position itself when older frames load in
     above. Browser scroll anchoring would correct it a second time. */
  overflow-anchor: none;
}

/* A definite height, so the photo's max-height has something to resolve
   against and the caption always keeps its place below. */
.frame {
  height: calc(100svh - var(--head-h) - var(--bar-h));
  margin: 0;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  scroll-snap-align: center;
  scroll-margin-top: 0;
}

.frame img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease;
}
.frame img.ready { opacity: 1; }

.frame figcaption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex: none;
  color: var(--dim);
}

.stamp {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.note { max-width: 46ch; }

.sentinel { height: 1px; }

.empty {
  padding: 30vh var(--pad) 0;
  text-align: center;
  color: var(--dim);
}
.empty a { border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------------- bar */

.bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--bar-h);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--pad);
  background: var(--ground);
  border-top: 1px solid var(--hair);
  color: var(--dim);
}

.bar-date {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink);
  min-width: 8ch;
}
.bar-count { font-variant-numeric: tabular-nums; color: var(--ink); }
.bar-hint { margin-left: auto; }
.bar-admin { margin-left: 14px; }

/* ----------------------------------------------------------- inner pages */

.page {
  max-width: 62ch;
  margin: 0 auto;
  padding: calc(var(--head-h) + 60px) var(--pad) 80px;
  font-size: 14px;
  line-height: 1.65;
}
.page h1 { font-size: 15px; font-weight: 400; margin: 0 0 24px; }
.page p { margin: 0 0 18px; white-space: pre-wrap; }
.page img { max-width: 100%; display: block; margin: 24px 0; }

/* ----------------------------------------------------------------- admin */

.admin { max-width: 760px; margin: 0 auto; padding: calc(var(--head-h) + 44px) var(--pad) 90px; }

.admin section {
  border-top: 1px solid var(--rule);
  padding: 26px 0;
}
.admin section:first-of-type { border-top: 0; padding-top: 0; }
.admin h2 { font-size: 13px; font-weight: 400; margin: 0 0 16px; color: var(--dim); }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; margin-bottom: 5px; color: var(--dim); }

input[type="text"],
input[type="date"],
input[type="password"],
input[type="file"],
textarea {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 0;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

button.action {
  font: inherit;
  padding: 8px 16px;
  color: var(--ground);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
}
button.action:hover { background: var(--dim); border-color: var(--dim); }
button.action[disabled] { opacity: 0.45; cursor: default; }

button.quiet {
  font: inherit;
  padding: 6px 12px;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
}
button.quiet:hover { border-color: var(--ink); }

.rows { display: flex; flex-direction: column; gap: 10px; }

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.row img { width: 74px; height: 56px; object-fit: cover; flex: none; background: var(--field); }
.row .row-date { font-variant-numeric: tabular-nums; min-width: 9ch; }
.row .row-note { color: var(--dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.message { margin: 12px 0 0; color: var(--dim); min-height: 1.5em; }
.message.bad { color: #e08a76; }

.signin { max-width: 320px; margin: 22vh auto 0; }
.signin h1 { font-size: 14px; font-weight: 400; margin: 0 0 18px; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  :root { --rail-w: 0px; --pad: 14px; }
  /* Too narrow to give the rail its own column, so it slides in over the
     photo instead and closes once a date is picked. */
  .rail { width: 128px; border-right: 1px solid var(--rule); }
  .stage { left: 0; }
  /* Not enough width for the place line once the dates control is there.
     It still reads on the about page. */
  .brand-place { display: none; }
  .head { white-space: nowrap; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; }
  .bar-hint { display: none; }
  .bar-count { margin-left: auto; }
  .nav { gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame img, .rail, .stage { transition: none; }
  * { scroll-behavior: auto !important; }
}