@charset "UTF-8";
/* ==========================================================================
   صفحة العنصر — one item, on its own page (plan-v2.md §19e)

   Loaded by every detail page: a news story, a priest, a monastery, an order,
   an institution, an activity, an event, a publication. One stylesheet for all
   of them, because one template renders all of them.

   The hero and breadcrumb blocks are the same ones page-news.css carries. Each
   page stylesheet in this project owns its copy rather than reaching into
   styles.css, and this file follows that rather than starting a second
   convention.
   ========================================================================== */

/* ==========================================================================
   breadcrumb + hero
   ========================================================================== */
.pg-hero {
  padding: 150px var(--s5) var(--s7);
  background: var(--hero-sky);
  border-bottom: 1px solid var(--line);
}

.crumb {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); margin-bottom: var(--s5);
  letter-spacing: normal;
}
.crumb a { color: var(--muted); transition: color .25s var(--ease); }
.crumb a:hover { color: var(--gold-ink); }
:root[data-theme="dark"] .crumb a:hover { color: var(--gold); }
.crumb-sep { opacity: .55; }
/* The item's own title closes the trail, and titles are long. Clipped to one
   line so a three-line breadcrumb never pushes the heading off a phone. */
.crumb [aria-current] {
  color: var(--ink-2);
  max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pg-hero h1 {
  font-size: clamp(27px, 4.4vw, 44px);
  line-height: 1.35;
  max-width: 26ch;
  margin-bottom: var(--s3);
}

/* The gold line under the title: date and city, patron and founding year,
   rank and parish. The same string the card carried, so arriving from the
   grid and arriving from a shared link agree. */
.it-meta {
  font-size: 14.5px; font-weight: 500; color: var(--gold-ink);
  letter-spacing: normal;
}
:root[data-theme="dark"] .it-meta { color: var(--gold); }

/* «من أرشيف الأخبار» — printed on the article itself, because a reader
   arriving from a link shared three years ago has no other way to know they
   are reading the record rather than the news (plan-v2.md §19o). A quiet line,
   not a warning: nothing is wrong with an archived article, and a coloured
   banner would suggest there was. */
.it-archived {
  display: inline-block;
  margin-top: var(--s2);
  font-size: 13px; color: var(--muted); letter-spacing: normal;
  border: 1px dashed var(--line-2); border-radius: 999px;
  padding: 3px 14px;
}

.pg-sec-top { padding-block-start: clamp(var(--s6), 6vw, var(--s7)); }

/* ==========================================================================
   body + facts
   ========================================================================== */
/* Prose first, facts beside it. The aside is secondary on every collection —
   nobody opens a priest's page for his ordination date — so it takes the
   narrow column and drops underneath rather than beside on a phone. */
.it-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 290px);
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: start;
}

.it-body { min-width: 0; }

/* The one place on the site that shows an uploaded picture whole. Cards crop
   to 16/10 so a grid lines up; here a portrait of a priest and a wide shot of
   a monastery are both simply themselves, and `max-height` keeps a tall scan
   from filling the screen before a word of the text appears. */
.it-fig {
  margin: 0 0 var(--s5);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--bg-2);
}
.it-fig img {
  display: block; width: 100%; height: auto;
  max-height: 560px; object-fit: cover;
}
.it-fig-sub { margin-block: var(--s5) 0; }

/* ==========================================================================
   the gallery — migration 009
   ==========================================================================
   Two across where there is room, one where there is not. `auto-fit` with a
   `minmax` floor rather than a fixed two-column grid, so a story with three
   photographs fills the last row instead of leaving a gap beside it, and a
   single photograph is simply full width — which is the common case and should
   not look like a broken two-column layout.

   NOT SQUARE THUMBNAILS. `.it-fig` above exists because this is the one place
   on the site that shows an uploaded picture whole; a gallery that cropped to
   a tile would undo that on the very page where the pictures are the point.
   `object-fit: contain` against a floor height keeps a portrait and a
   landscape shot in one row without cutting either, and `--bg-2` fills what is
   left rather than leaving a transparent notch.
   ========================================================================== */
.it-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s4);
  margin-block: var(--s5);
}

.it-shot {
  margin: 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--bg-2);
}
.it-shot img {
  display: block; width: 100%; height: auto;
  max-height: 420px; object-fit: contain;
}

/* The caption sits inside the frame, under its own hairline — the same
   relationship the meta line has to the heading above. Text, not a label: she
   writes sentences here, and this is also what a screen reader announces as
   the alt text (panel/js/collections.js, GALLERY_FIELDS). */
.it-shot figcaption {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  font-size: .88rem; line-height: 1.7; color: var(--ink-2);
}

/* ==========================================================================
   what the editor can actually write
   ==========================================================================
   styles.css dresses `.prose p` and nothing else, because until this page
   existed rich text only ever reached a card excerpt. The panel's toolbar
   emits headings, lists, quotes, bold, italic and links — the ALLOWED_TAGS set
   in panel/js/ui.js — and every one of them lands here. Unstyled, a subheading
   she writes is a line of ordinary text and a quotation is indistinguishable
   from the paragraph above it.
   ========================================================================== */
.it-body .prose > :first-child { margin-block-start: 0; }

.it-body .prose h2,
.it-body .prose h3,
.it-body .prose h4 {
  font-family: var(--ar-display); font-weight: var(--ar-display-w);
  line-height: 1.45; letter-spacing: normal;
  margin-block: var(--s5) var(--s3);
  max-width: 46ch;
}
.it-body .prose h2 { font-size: clamp(20px, 2.3vw, 24px); }
.it-body .prose h3 { font-size: clamp(18px, 2vw, 21px); }
.it-body .prose h4 { font-size: 17px; }

.it-body .prose ul,
.it-body .prose ol {
  margin-block: 0 var(--s4);
  padding-inline-start: var(--s4);
  max-width: 54ch;
  color: var(--ink-2);
}
.it-body .prose li { margin-bottom: var(--s2); line-height: 1.85; }
.it-body .prose ul { list-style: disc; }
.it-body .prose ol { list-style: decimal; }

/* A gold rule on the leading edge rather than a grey block: the same device
   the arms motto uses elsewhere on the site, so a quotation reads as a
   quotation in RTL without depending on punctuation. */
.it-body .prose blockquote {
  margin: var(--s5) 0;
  padding-inline-start: var(--s4);
  color: var(--ink);
  font-size: 17px; line-height: 1.85;
  max-width: 50ch;
}
.it-body .prose blockquote p { color: inherit; }

.it-body .prose a {
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.it-body .prose a:hover { color: var(--gold-ink); text-decoration-color: currentColor; }
:root[data-theme="dark"] .it-body .prose a { color: var(--gold); }

.it-body .prose figure,
.it-body .prose .rt-fig {
  margin: var(--s5) 0;
  max-width: 54ch;
}
.it-body .prose figure img,
.it-body .prose .rt-fig img {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.it-body .prose figcaption {
  margin-top: var(--s2); font-size: 13px; color: var(--muted); line-height: 1.6;
}

.it-pdf {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.it-pdf-lbl {
  font-size: 13px; font-weight: 600; color: var(--gold-ink);
  margin-bottom: var(--s3); letter-spacing: normal;
}
.it-pdf-frame {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface); min-height: 420px;
}
.it-pdf-frame iframe { width: 100%; height: 520px; border: 0; }
.it-pdf-act {
  display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4);
}

.it-body .prose strong, .it-body .prose b { font-weight: 600; color: var(--ink); }

.it-section { margin-top: var(--s6); }
.it-section h2 {
  font-family: var(--ar-display); font-weight: var(--ar-display-w);
  font-size: clamp(20px, 2.4vw, 25px);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

/* An item with a title and nothing else — a legitimate saved state, said
   plainly rather than left as an empty column. */
.it-none {
  color: var(--muted); font-size: 15px;
  padding: var(--s5); border: 1px dashed var(--line); border-radius: 14px;
}

/* ==========================================================================
   تفاصيل — the sticky note
   ==========================================================================
   Asked for 2026-08-18: this box was a rounded card with a gold rule along its
   top edge, which is the same shape every other panel on the site wears and the
   same shape every template on the internet wears. It is now a note stuck to
   the page beside the article — which is what it always was, editorially: the
   two or three facts that did not fit in the prose, jotted down and left where
   the reader can see them.

   NO BORDER ON ANY SIDE. Paper does not have a border; it has an edge, and the
   edge here is the shadow underneath it. Everything that would have been a
   border — the rule under the heading, the lines between the facts — is drawn
   as a background gradient instead, so nothing on this box is a box.

   Its own ink, not the theme's. A note is paper: dark ink on yellow in both
   themes. Reusing --ink would print cream-on-yellow the moment the site went
   dark, so the note carries a small palette of its own and only dims it.
   ========================================================================== */
.it-facts {
  --note: #F8E699;
  --note-ink: #2A2206;
  --note-ink-2: #6B5C21;
  --note-rule: rgba(42, 34, 6, .22);
  --note-tape: rgba(206, 198, 168, .62);

  position: sticky; inset-block-start: var(--s5);
  padding: var(--s5) var(--s4);
  color: var(--note-ink);
  /* A CRUMPLED SHEET (asked for 2026-08-18, against a photograph). Two
     earlier attempts were wrong in the same way: fine noise multiplied over
     the colour is film grain, and soft clouds are only pulp density. What
     reads as paper in the photograph is RELIEF — folds with a lit face and a
     shaded one.

     Both layers are the same construction. feTurbulence with type='turbulence'
     rather than 'fractalNoise': turbulence takes the absolute value of the
     noise, so it creases sharply where the noise crosses zero instead of
     rolling smoothly through it. Those creases are the folds. feDiffuseLighting
     then lights that field from one distant source, which gives every fold a
     bright side and a dark one — the whole effect, and the reason a flat fill
     could never fake it.

     The lit result comes out near white, so a linear transfer drops it by .42
     to sit around mid grey. That is what lets it blend OVERLAY: at mid grey
     overlay is a no-op, so the paper keeps its exact colour and only the folds
     lighten and darken it. Blended multiply the sheet turns olive; soft-light
     washes it out. Both were tried in the browser.

     THE FOLDS: baseFrequency .009 over a 700px tile — larger than the note, so
     no fold pattern repeats inside one sheet.
     THE WRINKLES: baseFrequency .05 on a 300px tile at half strength, the
     small creases that live between the big folds.
     THE SHEEN along the glued edge is weaker again (.20): the folds now carry
     the light, and two light sources on one sheet read as neither. */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27c%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27turbulence%27%20baseFrequency%3D%270.05%27%20numOctaves%3D%272%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%3CfeDiffuseLighting%20in%3D%27t%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%271.5%27%20diffuseConstant%3D%271%27%20result%3D%27l%27%3E%3CfeDistantLight%20azimuth%3D%27135%27%20elevation%3D%2758%27%2F%3E%3C%2FfeDiffuseLighting%3E%3CfeComponentTransfer%20in%3D%27l%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271%27%20intercept%3D%27-0.42%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271%27%20intercept%3D%27-0.42%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271%27%20intercept%3D%27-0.42%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23c%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27700%27%20height%3D%27700%27%3E%3Cfilter%20id%3D%27c%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27turbulence%27%20baseFrequency%3D%270.009%27%20numOctaves%3D%273%27%20seed%3D%275%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%3CfeDiffuseLighting%20in%3D%27t%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%274%27%20diffuseConstant%3D%271%27%20result%3D%27l%27%3E%3CfeDistantLight%20azimuth%3D%27135%27%20elevation%3D%2758%27%2F%3E%3C%2FfeDiffuseLighting%3E%3CfeComponentTransfer%20in%3D%27l%27%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271%27%20intercept%3D%27-0.42%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271%27%20intercept%3D%27-0.42%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271%27%20intercept%3D%27-0.42%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27700%27%20height%3D%27700%27%20filter%3D%27url%28%23c%29%27%20opacity%3D%271%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 54px),
    var(--note);
  background-size: 300px 300px, 700px 700px, auto, auto;
  background-blend-mode: overlay, overlay, normal, normal;
  border: 0;
  /* Softer than the cut of a sheet, still short of a card radius (asked for
     2026-08-18): 8px rounds the corners the way a note that has been handled
     goes soft at its edges, without turning the paper back into a tile. */
  border-radius: 8px;
  /* Contact shadow at the top where it is stuck, and the long cast of a sheet
     whose bottom edge is lifting away from the page. */
  box-shadow:
    0 1px 1px rgba(20, 16, 4, .18),
    0 16px 26px -16px rgba(20, 16, 4, .55);
}

/* The tape. Torn ends rather than a clean rectangle — a strip cut by hand is
   never square, and the skew is what stops this reading as a grey chip. */
.it-facts::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 96px; height: 26px;
  transform: translateX(-50%) rotate(-1.6deg);
  /* Greyed, not white. On the site's cream background a white strip vanishes;
     matte tape is slightly darker than the paper it lies on, with one highlight
     along the middle where it catches the light. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .3)),
    var(--note-tape);
  clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%);
  box-shadow: 0 1px 2px rgba(20, 16, 4, .12);
  pointer-events: none;
}

/* THE TILT LIVES ON `.rv.in`, not on the element.
   styles.css reveals this aside by animating `transform: translateY(22px)` to
   `transform: none`, and `none` would flatten any tilt declared on the base
   rule the instant the note came into view. Declared on the revealed state
   instead, the note slides up and settles crooked, which is the whole point of
   a note: nobody sticks one on straight. */
.it-facts.rv.in {
  transform: rotate(-1.4deg);
  /* The reveal's own .85s is right for a paragraph fading up and wrong for a
     hand on a note: the tilt settles faster than the ink appears, and hover
     answers immediately rather than a beat later. */
  transition: transform .45s var(--ease-o), opacity .85s var(--ease-o);
}
/* Straightened, and lifted a hair, as if a thumb pressed it flat to read it. */
.it-facts.rv.in:hover { transform: rotate(-.35deg) translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .it-facts.rv.in,
  .it-facts.rv.in:hover { transform: rotate(-1.4deg); }
}

.it-facts h2 {
  font-family: var(--ar-display); font-weight: var(--ar-display-w);
  font-size: 18px; color: var(--note-ink);
  margin-bottom: var(--s3); padding-bottom: 7px;
  /* A stroke, not a border: it fades out and stops short of the far edge, the
     way a line drawn under a word does. */
  background: linear-gradient(to left, var(--note-rule), rgba(42, 34, 6, 0)) no-repeat;
  background-size: 62% 1.5px; background-position: bottom right;
}

.it-facts dl { display: grid; gap: var(--s3); margin: 0; }
/* Between two facts, the same drawn line — never on the first, so the note
   opens with the fact rather than with a rule. */
.it-facts dl > div + div {
  padding-top: var(--s3);
  background: linear-gradient(to left, rgba(42, 34, 6, .16), rgba(42, 34, 6, 0)) no-repeat;
  background-size: 100% 1px; background-position: top right;
}
.it-facts dt {
  font-size: 12.5px; color: var(--note-ink-2); letter-spacing: normal;
  margin-bottom: 3px;
}
.it-facts dd { margin: 0; font-size: 15px; color: var(--note-ink); line-height: 1.6; }

/* A lit note on a dark desk, not a lamp. The paper loses its glare and the ink
   deepens; the tape has nothing white behind it, so it dims too. */
:root[data-theme="dark"] .it-facts {
  --note: #E0C97F;
  --note-ink: #241C05;
  --note-ink-2: #5E4F1B;
  --note-rule: rgba(36, 28, 5, .3);
  --note-tape: rgba(232, 226, 205, .3);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .5),
    0 18px 30px -16px rgba(0, 0, 0, .75);
}

/* ==========================================================================
   the credit — who wrote it
   ==========================================================================
   Requested 2026-08-16. Sits at the end of the article, under a rule, in the
   place a byline block belongs: after the piece, not competing with the
   headline. It appears only when the item names an author. The dates that once
   sat here moved to the panel: they are editorial bookkeeping, not something a
   reader came for.
   ========================================================================== */
.it-credit {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.it-by { font-size: 15.5px; color: var(--ink-2); }
.it-by b { font-weight: 600; color: var(--ink); }

.it-back { margin-top: var(--s6); }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 900px) {
  .it-wrap { grid-template-columns: 1fr; }
  /* Sticky in a single column would pin the note over the prose as the reader
     scrolls past it. Still positioned, though — the tape is absolute against
     this box, and `static` would send it to hang off the section instead. */
  .it-facts { position: relative; inset-block-start: auto; margin-top: var(--s6); }
}

@media (max-width: 760px) {
  .pg-hero { padding-top: 130px; }
  .crumb [aria-current] { max-width: 22ch; }
}

@media (max-width: 620px) {
  .pg-hero { padding-top: 118px; }
  .it-fig img { max-height: 420px; }
}