/* ==========================================================================
   Marian Kalavsky archive — stylesheet

   Design intent: match the portfolio at mariankalavsky.com —
   white page, grey text that turns black on hover, the Receipt
   pixel font, centered image stacks, no ornament.
   ========================================================================== */

/* The same font the portfolio uses. */
@font-face {
  font-family: 'Receipt';
  src: url('fonts/Receipt.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ---- Palette (mirrors the portfolio) ------------------------------------ */

:root {
  --ink: #666;        /* body text — portfolio grey            */
  --ink-strong: #000; /* hover / emphasis                      */
  --ink-faint: #aaa;  /* dates, placeholders, quiet controls   */
  --paper: #fff;      /* white page                            */
  --rule: #e5e5e5;    /* hairlines between entries             */
}

/* ---- Reset (minimal) ----------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  font-family: 'Receipt', serif;
  color: var(--ink);
  line-height: 1.6;
  font-size: 1rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* ---- Masthead ------------------------------------------------------------ */

.masthead {
  text-align: center;
  margin-bottom: 3.5rem;
}

.masthead__title {
  font-weight: normal;
  font-size: 2rem;
  color: var(--ink);
}

.masthead__subtitle {
  margin-top: 1.25rem;
  color: var(--ink-faint);
  font-size: 1rem;
}

/* ---- Filter pills ---------------------------------------------------------
   Styled like the portfolio's sidebar categories: plain grey words,
   black when active or hovered. */

.filters {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.pill {
  font-family: 'Receipt', serif;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.3s;
}

.pill:hover {
  color: var(--ink-strong);
}

.pill.is-active {
  color: var(--ink-strong);
}

/* ---- Composer (posting interface) -----------------------------------------
   Hidden on mobile — see the media query at the bottom.
   Hiding it is a layout choice, NOT a security measure:
   the backend rejects every request without the correct password. */

.composer {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 3.5rem;
}

.composer__text {
  width: 100%;
  background: none;
  border: none;
  resize: vertical;
  font-family: 'Receipt', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
}

.composer__text::placeholder {
  color: var(--ink-faint);
}

.composer__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* The native file input is visually replaced by its label text. */
.composer__file input[type="file"] {
  display: none;
}

.composer__file span {
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.3s;
}

.composer__file span:hover {
  color: var(--ink-strong);
}

.composer__password {
  margin-left: auto;
  width: 9rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-family: 'Receipt', serif;
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
}

.composer__password:focus {
  border-color: var(--ink);
}

.btn {
  font-family: 'Receipt', serif;
  font-size: 0.9rem;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 0.3rem 1rem;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.btn:hover {
  color: var(--ink-strong);
  border-color: var(--ink-strong);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn--ghost {
  border-color: var(--rule);
}

.composer__preview {
  margin-top: 1rem;
  max-height: 12rem;
  border-radius: 4px;
}

.composer__status {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
  min-height: 1.2em;
}

.composer__status.is-error {
  color: #b04f4f;
}

/* ---- Archive entries ------------------------------------------------------
   Entries read like the portfolio's image stacks: centered column,
   images capped at 500px with soft corners. */

.archive {
  display: flex;
  flex-direction: column;
}

.entry {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.entry:first-child {
  padding-top: 0;
}

/* Date, small and quiet. */
.entry__date {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.entry__text {
  white-space: pre-wrap;   /* preserve the author's line breaks */
  overflow-wrap: break-word;
  max-width: 600px;
}

.entry__image {
  margin-top: 1.25rem;
  max-width: 500px;
  width: auto;
  height: auto;
  border-radius: 4px;
  cursor: zoom-in;
}

/* Delete is present but nearly invisible — it only works
   with the password, verified by the backend. */
.entry__delete {
  display: block;
  margin-top: 1.25rem;
  font-family: 'Receipt', serif;
  font-size: 0.75rem;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s;
}

.entry__delete:hover {
  color: #b04f4f;
}

.archive__empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 3rem 0;
}

/* ---- Gallery mode (Images filter) ------------------------------------------
   When the "Images" pill is active, script.js adds .archive--gallery
   and renders only entries that carry an image. */

.archive--gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.archive--gallery .entry {
  padding: 0;
  border: none;
}

.archive--gallery .entry__date,
.archive--gallery .entry__text,
.archive--gallery .entry__delete {
  display: none;
}

.archive--gallery .entry__image {
  margin: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---- Lightbox --------------------------------------------------------------
   White, like holding a print up on the gallery wall. */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  cursor: zoom-out;
  z-index: 10;
}

/* The hidden attribute must beat the display:flex above. */
.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
}

/* ---- Colophon --------------------------------------------------------------- */

.colophon {
  margin-top: 5rem;
  text-align: center;
  font-size: 0.8rem;
}

/* Back to the portfolio — quiet grey, black on hover, like its nav. */
.colophon a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s;
}

.colophon a:hover {
  color: var(--ink-strong);
}

/* ---- Mobile ------------------------------------------------------------------
   Visitors on phones simply browse. The composer disappears.
   (The backend still guards publishing — this is purely layout.) */

@media (max-width: 640px) {
  body {
    padding: 2.5rem 1.25rem 4rem;
  }

  .composer {
    display: none;
  }

  .entry__delete {
    display: none;
  }

  .entry__image {
    max-width: 90%;
  }
}