/* ───────────────────────────────────────────────────────────────────────────
   style.css: how the site looks.

   Everything here is ordinary CSS. If you change something in this file you
   only need to reload the page in your browser; you do not need to restart
   the site.

   The design is deliberately quiet: one column, plenty of space between the
   lines, and a reading width that is comfortable rather than wide.
   ─────────────────────────────────────────────────────────────────────────── */


/* ── The colours and the two typefaces, all named in one place ───────────── */

:root {
  --paper:     #fbf9f6;   /* the background            */
  --ink:       #26231f;   /* ordinary text             */
  --ink-quiet: #6d665d;   /* dates, names, small print */
  --line:      #e4dfd7;   /* the thin dividing lines   */
  --field:     #ffffff;   /* inside the form boxes     */
  --accent:    #4d6b5e;   /* a muted green             */

  /* English is set in whatever clean sans-serif the reader's device provides. */
  --font-latin: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Persian is set in Vazirmatn, loaded from Google Fonts. Naming the Latin
     fonts after it means that if Vazirmatn ever fails to load, the text still
     appears in something sensible rather than in nothing at all. */
  --font-persian: "Vazirmatn", var(--font-latin);

  /* English remembrance text (his name, the bio, the memories) is set in a
     serif, which reads like an inscription rather than an app. Labels and
     buttons stay in the plain sans-serif. */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* The same page at night, so it is not blinding in a dark room. The reader's
   own device decides; there is no switch to press. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #171614;
    --ink:       #e8e4dd;
    --ink-quiet: #a09a91;
    --line:      #33302b;
    --field:     #201e1b;
    --accent:    #8fb3a3;
  }
}


/* ── The page itself. These are the mobile sizes; a phone is the starting
      point, and the wider screens are handled further down. ──────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 1.0625rem;   /* a touch larger than the browser default */
  line-height: 1.85;      /* generous space between the lines        */
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 34rem;       /* a comfortable reading width */
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Anything written in Persian is set in Vazirmatn. */
[lang="fa"] {
  font-family: var(--font-persian);
  line-height: 2;         /* Persian sits more easily with a little extra room */
}

/* The words of remembrance themselves, when they are in English: the serif. */
.name-en,
.story p:lang(en),
.entry-text:lang(en),
.entry-translation p:lang(en) {
  font-family: var(--font-serif);
}


/* ── Bilingual labels: the English line, then the Persian line beneath it ── */

.en, .fa { display: block; }

.fa {
  font-family: var(--font-persian);

  /* The two languages are equals on this page: the Persian half of every pair
     is the same colour and weight as its English half, never a dimmed echo of
     it. Marked right-to-left, each line settles against the right edge the way
     Persian is meant to, while English sits on the left. */
  text-align: right;
}

/* ...except where the whole block is centred anyway. */
.masthead .fa {
  text-align: center;
}



/* ── The strip of photographs at the very top ─────────────────────────────────
   A carousel built entirely out of CSS. The photos sit in a row that scrolls
   sideways; scroll-snap makes it settle neatly on one photo rather than
   stopping halfway between two. Swiping works on a phone without any help. */

.banner {
  margin-bottom: 2.5rem;
}

.banner-strip {
  display: flex;
  gap: 0.5rem;                     /* a hairline between photos shown together */
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* come to rest on a photo edge, not between */
  border-radius: 6px;

  /* Deliberately no "scroll-behavior: smooth" here. Asking for a gliding
     animation at the same time as mandatory snapping makes the browser change
     its mind halfway and slide back to the first photo, which leaves the dots
     underneath doing nothing at all. Jumping straight to the chosen photo is
     less pretty and always works. Swiping is untouched by this and still feels
     exactly as smooth as it does in any other app. */

  /* Hide the sideways scrollbar. The dots underneath do that job more quietly. */
  scrollbar-width: none;
}

.banner-strip::-webkit-scrollbar { display: none; }

.banner-photo-link {
  flex: 0 0 100%;      /* one photograph fills the width; the rest wait offstage */
  display: block;
  scroll-snap-align: start;
  min-width: 0;
}

.banner-photo {
  width: 100%;
  height: 100%;
  display: block;

  /* Photographs come in all shapes. Giving every one the same proportions and
     letting it fill that space keeps the top of the page steady instead of
     jumping about as you move from a tall photo to a wide one. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--field);
}

/* The little dots underneath. Each one is an ordinary link to its photograph,
   which is why this needs no JavaScript. */
.banner-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
}

.banner-dots a {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--line);
}

.banner-dots a:hover,
.banner-dots a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
}

/* Text that only a screen reader announces. It gives each dot something to say
   out loud, without putting a number on the page. */
.for-screen-readers {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ── His name and dates at the top ───────────────────────────────────────── */

.masthead {
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

/* The Persian name owns the masthead: larger, in Vazirmatn's true bold. The
   English beneath is its companion: smaller, lighter, still full ink. */
.masthead h1 {
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.name-fa {
  font-size: 1.9rem;
  font-weight: 700;
}

.name-en {
  font-size: 1.2rem;
  font-weight: 400;
}

.name-fa { font-family: var(--font-persian); }

/* The English name sits under the Persian one, a touch apart. */
.name-en { margin-top: 0.3rem !important; }

.dates {
  margin: 1rem 0 0;
  color: var(--ink-quiet);
  font-size: 0.95rem;
  line-height: 1.9;
}


/* ── His story ───────────────────────────────────────────────────────────── */

.story p {
  margin: 0 0 1.4rem;
  white-space: pre-line;   /* keeps the line breaks you typed into the bio */

  /* Centred, like the name and dates above it, so the top of the page reads as
     one piece. If the bio ever grows into long paragraphs, centred text will
     get tiring to read; change this line to "left" then. */
  text-align: center;

  /* When a sentence wraps, make its lines come out nearly the same length,
     instead of a long line with a word or two left over under it. Browsers
     that don't know this rule simply ignore it. */
  text-wrap: balance;
}

.story p:last-child { margin-bottom: 0; }


/* ── Finding the form, sorting, and turning pages ────────────────────────────
   Small furniture that keeps the writing box reachable however many memories
   come: a jump link under the bio, the newest/oldest choice, and the way
   between pages. */

/* The quiet way to the form: a centred link under the bio, Persian line over
   English, in the accent colour. */
.share-jump {
  text-align: center;
  margin: 0 0 0.5rem;
}

.share-jump a {
  display: inline-block;
  color: var(--accent);
  font-size: 0.95rem;
}

.share-jump .fa,
.share-jump .en {
  display: block;
  text-align: center;
  color: inherit;
}

.memory-controls {
  display: flex;
  gap: 1.5rem;
  margin: 0 0 1.4rem;
  font-size: 0.88rem;
}

.memory-controls a { color: var(--accent); }
.memory-controls a .en, .memory-controls a .fa,
.memory-controls .sort-on .en, .memory-controls .sort-on .fa {
  display: inline;
}
.memory-controls a .fa, .memory-controls .sort-on .fa { margin-inline-start: 0.45rem; }
.memory-controls .sort-on { color: var(--ink-quiet); }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
}

.pager a { color: var(--accent); }
.pager a .en, .pager a .fa { display: inline; }
.pager a .fa { margin-inline-start: 0.45rem; }
.pager-where { color: var(--ink-quiet); font-size: 0.85rem; }


/* ── Headings for the two lower sections ─────────────────────────────────── */

h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

h2 .fa { font-size: 1.25rem; }

.quiet {
  color: var(--ink-quiet);
  font-size: 0.92rem;
  margin: 0 0 1.5rem;
  line-height: 1.7;
}

.quiet a { color: var(--accent); }


/* ── The form ────────────────────────────────────────────────────────────── */

/* ── The cypress between sections ────────────────────────────────────────────
   A small سرو, the Persian cypress, stands where a bare dividing line used to
   be. It is drawn right here in the stylesheet, so there is no image file. */

.share,
.memories {
  margin-top: 2.5rem;
  padding-top: 0;
  border-top: none;
}

.share::before,
.memories::before {
  content: "";
  display: block;
  width: 16px;
  height: 22px;
  margin: 0 auto 2.5rem;
  background-color: var(--accent);
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9 22c-1.2-1.5-2.2-3.8-2.7-6.5-.7-4 0-7.9 2-11 .3-.5.4-1 .2-1.9 1 .5 1.6 1.3 1.9 2.2 1.8 3.1 2.3 6.8 1.6 10.7-.5 2.7-1.5 5-2.7 6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9 22c-1.2-1.5-2.2-3.8-2.7-6.5-.7-4 0-7.9 2-11 .3-.5.4-1 .2-1.9 1 .5 1.6 1.3 1.9 2.2 1.8 3.1 2.3 6.8 1.6 10.7-.5 2.7-1.5 5-2.7 6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

label {
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-quiet);
}

label .fa { font-size: 0.9rem; }

input[type="text"],
textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.8;

  /* Vazirmatn is named first here because we cannot know in advance which
     language a visitor will write in. It carries a clean Latin alphabet too,
     so English typed into these boxes still looks right. */
  font-family: var(--font-persian);
}

textarea { resize: vertical; }

/* The photo box. Browsers each draw this control their own way and will not be
   talked out of it, so the aim here is just to give it room and keep it from
   spilling out of the page on a narrow phone. */
input[type="file"] {
  display: block;
  width: 100%;
  margin-bottom: 1.6rem;
  font-family: var(--font-latin);
  font-size: 0.92rem;
  color: var(--ink-quiet);
}

/* The "Choose File" chip the browser draws, dressed to match the page instead
   of glowing white in the dark. */
input[type="file"]::file-selector-button {
  font-family: var(--font-latin);
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  margin-right: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
}

/* The small grey line under the photo box. */
.field-hint {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
}

.field-hint .fa { font-size: 0.85rem; }

/* ── One form, two doors ────────────────────────────────────────────────────
   The share form wears one of two faces: writing a memory (photos welcome
   alongside), or sending only photographs with a caption. Two small pills
   switch between them; shrink.js reveals the switch and flips the form's
   data-kind, and these rules do the dressing. Without JavaScript the switch
   stays hidden and the form is simply the combined one. */

.kind-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

/* These little labels opt out of the page-wide "spread the two languages to
   either end" rule: a pill hugs its words. */
.kind-choice {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.kind-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kind-choice .pill {
  display: inline-flex;
  align-items: baseline;
  column-gap: 0.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--ink-quiet);
}

.kind-choice input:checked + .pill {
  border-color: var(--accent);
  color: var(--accent);
}

.kind-choice input:focus-visible + .pill {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Each label above a changing field carries both wordings; the form's
   data-kind decides which one is on view. display: contents lets the visible
   pair keep sitting at the two ends of the label's line. */
.when-words, .when-photos { display: contents; }
form[data-kind="words"] .when-photos { display: none; }
form[data-kind="photos"] .when-words { display: none; }

/* The photographs-only face: the photo box steps up above the words, the big
   writing box becomes a short caption line, and the button keeps its size. */
form[data-kind="photos"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
form[data-kind="photos"] label[for="memory"],
form[data-kind="photos"] #memory { order: 1; }
form[data-kind="photos"] .honeypot,
form[data-kind="photos"] button[type="submit"] { order: 2; }
form[data-kind="photos"] button[type="submit"] { align-self: flex-start; }
form[data-kind="photos"] #memory { height: 4.6em; min-height: 3em; }

input[type="text"]:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

button {
  font-family: var(--font-latin);
  font-size: 0.95rem;
  padding: 0.7rem 1.9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  text-align: center;
}

button .fa { color: inherit; }

button:hover { opacity: 0.9; }


/* ── THE ROBOT TRAP ──────────────────────────────────────────────────────────
   This pushes the decoy box far off the left-hand side of the screen. Nobody
   ever sees it, so nobody ever fills it in, except automatic junk senders,
   which fill in every box they find. That is exactly how they give themselves
   away. Do not delete these lines, or the decoy would appear on the page. */

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ── The message after the form is sent ──────────────────────────────────── */

.notice {
  margin: 0 0 1.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--field);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* ── The memories ────────────────────────────────────────────────────────── */

.memories h2 { margin-bottom: 1.5rem; }

/* Each memory sits in its own quiet container, so the eye can take them one
   at a time while scrolling. */
.entry {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 0 1.1rem;
  margin-bottom: 1rem;
  overflow: hidden;   /* keeps the header band inside the rounded corners */
}

/* Everything below the header keeps the card's side margins. */
.entry > :not(.entry-head) {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

/* A long memory folded to its first six lines. The script adds and removes
   this; without the script every memory simply shows in full. */
.entry-text.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

/* The small "Read more" under a folded memory. It is a button, but dressed as
   a quiet line of text like the Translation line above it. */
.read-more {
  background: none;
  border: none;
  padding: 0;
  margin: 0.1rem 0 0.8rem;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
}

.read-more .en, .read-more .fa { display: inline; color: inherit; }

.entry:last-child { margin-bottom: 0; }

.entry-text {
  margin: 0 0 0.7rem;
  white-space: pre-wrap;   /* keeps the paragraphs the writer typed */
}

/* A photo attached to a memory. It is never allowed to be wider than the
   column, and it keeps its own proportions however tall or wide it happens to
   be, so a portrait photo and a landscape one both sit comfortably. */
/* The photograph inside a card: a fixed-height window, cropped to its middle,
   so a tall photo cannot stretch the card across two screens. The whole
   picture is one tap away through the link around it. */
.entry-photo-link {
  display: block;
  margin: 0 1.25rem 0.9rem;
}

.entry-photo {
  display: block;
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
  border-radius: 6px;
  background: var(--field);
}

/* The folded-away translation under a memory. Closed, it is one quiet line
   reading "Translation ترجمه" with the browser's own little arrow beside it;
   opened, the memory appears again in the other language, in the quiet colour
   so the original stays the main voice. */
.entry-translation {
  margin: -0.2rem 0 0.9rem;
}

.entry-translation summary {
  display: inline-flex;
  align-items: baseline;
  column-gap: 0.5rem;
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
}

.entry-translation summary .en,
.entry-translation summary .fa {
  display: inline;
  color: inherit;
}

.entry-translation p {
  margin: 0.5rem 0 0;
  color: var(--ink-quiet);
  white-space: pre-wrap;
}

/* Who wrote it stands at the head of the card, on its own band: a shade of
   the page's own background, parted from the memory by a hairline. The name
   carries the weight; the title beneath stays quiet. */
.entry-head {
  margin: 0 0 0.9rem;
  padding: 0.65rem 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* The photograph opened over the page: dimmed surroundings, the whole picture
   fitted to the screen, and a tap anywhere puts it away. */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 10, 9, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  cursor: zoom-out;
}

.photo-viewer figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.photo-viewer img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}

.photo-viewer figcaption {
  color: #e8e4dd;
  font-size: 0.95rem;
  text-align: center;
  font-family: var(--font-persian);
  line-height: 1.8;
  padding: 0 1rem;
}

/* Several photographs in one card: a small grid of windows. */
.entry-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 1.25rem 0.9rem;
}

.entry-photo-grid .entry-photo-link { margin: 0; }

.entry-photo-small {
  display: block;
  width: 100%;
  height: 7.5rem;
  object-fit: cover;
  border-radius: 6px;
  background: var(--field);
}

/* A memory's photographs on the admin page, each with its own Remove. */
.admin-photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.admin-photo-cell { margin: 0; width: 9rem; }
.admin-photo-cell .admin-photo { max-height: 7rem; width: 100%; object-fit: cover; margin: 0 0 0.4rem; }
.admin-photo-cell .danger { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

.entry-name {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}


/* Who they are to him: a title, a relation. Smaller and quieter than the name,
   directly beneath it. */
.entry-role {
  margin: 0.1rem 0 0;
  color: var(--ink-quiet);
  font-size: 0.82rem;
}

/* With the name at the top, whatever comes last in the card needs no margin
   below it. */
.entry > :last-child { margin-bottom: 0; }

.empty {
  color: var(--ink-quiet);
  font-size: 0.95rem;
}


/* ── The private admin page ──────────────────────────────────────────────── */

/* The admin heading is plain English and sits on the left. */
.admin-masthead {
  text-align: left;
  padding-bottom: 1.2rem;
  margin-bottom: 1.5rem;
}

/* ── The four tabs ────────────────────────────────────────────────────────────
   The tabs are ordinary links to #pending, #published, #bio and #banner, and
   the switching below is done entirely by the stylesheet: the section named in
   the address is shown, the rest are hidden. No JavaScript. */

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.admin-tabs a {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-quiet);
  text-decoration: none;
  font-size: 0.95rem;
}

.admin-tabs a:hover { color: var(--ink); }

/* Every section starts hidden... */
.admin-section { display: none; }

/* ...the one named in the address is shown... */
.admin-section:target { display: block; }

/* ...and when the address names none of them, the Waiting tab is the one you
   see, since that is what this page is for. */
.page:not(:has(.admin-section:target)) #pending { display: block; }

/* The tab whose section is showing is painted in. */
.page:has(#pending:target)   .admin-tabs a[href="#pending"],
.page:has(#published:target) .admin-tabs a[href="#published"],
.page:has(#bio:target)       .admin-tabs a[href="#bio"],
.page:has(#banner:target)    .admin-tabs a[href="#banner"],
.page:not(:has(.admin-section:target)) .admin-tabs a[href="#pending"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.admin-tabs a .count { color: inherit; opacity: 0.8; }

/* A browser too old to understand :has() simply shows all four sections in a
   row, one after another, which is exactly how the page worked before tabs. */
@supports not (selector(:has(*))) {
  .admin-section { display: block; }
}

.admin-section { margin-bottom: 3rem; }

.admin-section h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}

/* The small number of memories beside an admin heading. */
.count {
  display: inline;
  color: var(--ink-quiet);
  font-size: 0.85rem;
  font-weight: 400;
}

.admin-entry {
  padding: 1.2rem 0 0.4rem;
  border-bottom: 1px solid var(--line);
}

.admin-meta {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
}

.admin-meta strong { font-weight: 500; }

.when {
  color: var(--ink-quiet);
  font-size: 0.85rem;
  margin-inline-start: 0.6rem;
}

/* ── The grid of photographs on the admin Photos tab ─────────────────────────
   Small square pictures in their current order, left to right. The number
   under each one is its place in the strip. */

.banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.banner-cell { margin: 0; cursor: grab; }

/* The photograph while it is being dragged. */
.banner-cell.dragging { opacity: 0.4; }

/* The little "Order saved." word beside the Save order button. */
.drag-note {
  margin-inline-start: 0.8rem;
  font-size: 0.9rem;
  color: var(--ink-quiet);
}

.banner-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;      /* every picture the same square, however it was shot */
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.banner-cell-controls {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.45rem;
}

.banner-cell-controls select {
  font-family: var(--font-latin);
  font-size: 0.95rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
}

/* The gallery of memory photographs below the strip manager. */
.gallery-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 2.2rem 0 0.3rem;
}

.gallery-controls {
  justify-content: space-between;
}

.gallery-from {
  font-size: 0.8rem;
  color: var(--ink-quiet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.in-strip {
  font-size: 0.8rem;
  color: var(--ink-quiet);
  white-space: nowrap;
}

.banner-cell-controls .danger {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

/* The photographs page's own furniture. */
.gallery-back { text-align: center; margin-top: 0.8rem; }
.gallery-back a { color: var(--accent); }

.gallery-grid { margin-top: 1.5rem; }

.gallery-cell-link { display: block; }

.gallery-caption {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-quiet);
  font-family: var(--font-persian);
}

/* The little caption box under each strip photo on the admin page. */
.banner-caption {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-persian);
}

/* On the admin page the photo is deliberately kept small. You are checking
   what it is, not admiring it, and a screenful of full-size photos would make
   a long list of memories tiring to work through. */
.admin-photo {
  display: block;
  max-width: 100%;
  max-height: 14rem;
  width: auto;
  height: auto;
  margin: 0 0 0.9rem;
  border-radius: 6px;
}

.admin-entry textarea { margin-bottom: 0.9rem; }

/* The small line above the translation box on the admin page. */
.admin-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-quiet);
}

.admin-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.admin-buttons button { padding: 0.5rem 1.1rem; font-size: 0.9rem; }

/* The delete button is deliberately plain, so it is never the one you press
   by accident. */
.danger {
  background: transparent;
  color: var(--ink-quiet);
  border-color: var(--line);
}

.danger:hover { color: #b4453a; border-color: #b4453a; opacity: 1; }


/* ── Wide screens: the page opens up ─────────────────────────────────────────
   On a monitor the reading text keeps its comfortable narrow measure, but the
   photographs take a wider stage and the memories flow into three columns
   side by side, so the width is spent where it helps. */

@media (min-width: 64rem) {
  .page { max-width: 66rem; }

  /* Words stay at a width the eye can follow. */
  .masthead, .story, .share {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* The photographs of him get the widest stage. */
  .banner {
    max-width: 54rem;
    margin-left: auto;
    margin-right: auto;
  }

  .name-fa { font-size: 2.6rem; }
  .name-en { font-size: 1.45rem; }

  /* Three photos side by side: each slot is nearly portrait-shaped, which is
     what most photographs of a person are. (Named twice to outrank the
     two-per-view rule further down the file.) */
  .banner .banner-photo-link { flex-basis: calc(33.334% - 0.34rem); }

  /* The memories, three columns side by side. Each card stays whole; long
     ones are already folded by their Read more. */
  .entries {
    columns: 3;
    column-gap: 1.25rem;
  }

  .entry {
    break-inside: avoid;
    margin-bottom: 1.25rem;
  }

  /* The admin page keeps a single working column at a sensible width. */
  .admin-masthead, .admin-tabs, .admin-section {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
  }
  .admin-tabs { display: flex; }
}


/* ── How the two languages sit together ──────────────────────────────────────
   Short pieces of interface (headings, the labels above the boxes) put both
   languages on ONE line: English starting from the left end, Persian starting
   from the right end, the way formal bilingual documents set them. If the two
   ever run out of room, the pair quietly falls back to two lines, still
   anchored to their own ends. Longer sentences (the messages, the small print)
   stay as two stacked lines, which the rules above already handle. */

h2,
label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1.5rem;
}

/* A button holds its pair side by side on one line, English then Persian. */
button {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.7rem;
}

button .en, button .fa { line-height: 1.5; }


/* ── Wider screens: a little more air, nothing else changes ──────────────── */

@media (min-width: 40rem) {
  .page { padding: 4rem 2rem 6rem; }

  /* Past phone size the strip stops growing taller with the screen: it holds
     at a band of about 320px (less on a short window), and shows TWO photos
     side by side. Narrower slots crop portrait photographs far less. When
     there are fewer photos than the view holds, they widen to fill it. */
  .banner-photo-link {
    flex: 1 0 calc(50% - 0.25rem);
    height: min(20rem, 42vh);
  }
  .banner-photo { aspect-ratio: auto; }
  .masthead h1 { font-size: 2rem; }
  body { font-size: 1.09375rem; }
}