/* ==========================================================================
   Father Nektarios Farah - shared stylesheet (Arabic RTL + English LTR)
   Visual world of the owner's business cards: aged parchment, oxblood
   burgundy, embossed gold, slate-green secondary text.
   Mobile-first. Logical properties only, so one file serves both directions.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Parchment */
  --parchment: #E9DBB5;        /* page background */
  --parchment-light: #F4EBD3;  /* light sections, header */
  --paper: #FAF4E4;            /* cards on parchment */
  --line: #C9B27C;             /* hairlines on parchment */
  --line-soft: rgba(122, 90, 24, .22);

  /* Burgundy / oxblood */
  --burgundy: #6A0A0A;         /* headings, buttons, links, bands (9.2:1 on parchment) */
  --burgundy-2: #7A0E12;       /* hover tint */
  --burgundy-deep: #4E0707;    /* footer, pressed */

  /* Gold: ornament, and text ONLY on burgundy (gold 6.7:1, gold-light 9.3:1 on burgundy) */
  --gold: #D9B96B;
  --gold-light: #F0DCA0;
  --gold-rule: #B08A3E;        /* ornament lines on parchment (not text) */
  --gold-ink: #5F4510;         /* gold-toned TEXT on parchment (6.5:1; >= 5.1:1 even over the background cross and grain) */

  /* Text */
  --ink: #2B1D14;              /* body text (11.8:1 on parchment) */
  --slate: #3F4D3D;            /* secondary text, card slate-green #4E5D4C darkened for AA over textures (6.5:1; >= 5.2:1 over the background cross) */
  --on-dark: #F4EBD3;          /* text on burgundy (10.6:1) */
  --on-dark-muted: #E6D6B0;    /* secondary text on burgundy (8.8:1) */

  --navy: #12213F;             /* minor accent: focus ring on parchment */
  /* Sampled from the owner's reference artwork: mosaic medallion (gold ground) and the round composite (navy ground) */
  --navy-deep: #14202F;        /* footer + caption plate ground (gold 8.7:1, on-dark 13.8:1, on-dark-muted 11.4:1) */
  --mosaic-gold: #B58A4C;      /* gold mosaic ochre; ornament only, never text */
  --focus: #12213F;

  /* Textures (inline SVG, no extra requests). Fine paper grain + large soft mottling. */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .27 0 0 0 0 .1 0 0 0 -.75 .42'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-stains:   /* each ellipse stays inside its 980x760 tile, so the tiling is seamless */
    radial-gradient(ellipse 230px 180px at 25% 30%, rgba(150, 110, 45, .085), transparent),
    radial-gradient(ellipse 260px 200px at 72% 68%, rgba(150, 110, 45, .07), transparent),
    radial-gradient(ellipse 160px 130px at 82% 20%, rgba(255, 250, 235, .35), transparent),
    radial-gradient(ellipse 200px 110px at 30% 84%, rgba(255, 250, 235, .3), transparent);
  /* Torn paper edge (480 x 26 tile, filled below the jagged line) */
  --torn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V13L3 5L7 19L15 9L23 14L27 17L30 11L37 14L40 9L46 11L51 16L57 13L62 21L66 22L72 17L79 14L87 5L94 18L99 21L103 9L108 6L114 17L119 12L127 10L132 13L135 12L144 15L151 9L159 16L162 19L166 19L170 22L174 11L178 16L184 20L192 23L195 21L204 15L208 16L213 10L221 16L225 7L230 11L235 17L241 10L245 14L251 5L259 16L263 16L272 12L279 10L288 16L297 15L301 8L307 17L315 10L319 14L323 17L329 17L335 6L339 8L345 15L351 14L358 10L364 14L369 14L377 13L385 15L390 14L394 6L397 15L401 15L409 18L415 13L419 12L423 5L429 8L435 9L443 5L448 9L456 11L462 19L468 9L476 4L480 13V26Z'/%3E%3C/svg%3E");

  --radius: 4px;
  --container: 72rem;
  --gutter: clamp(1.125rem, 4vw, 2rem);
  --space-section: clamp(3.5rem, 9vw, 6.5rem);

  /* Arabic defaults */
  --font-display: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --font-heading: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --font-body: "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --fs-body: 1.0625rem;
  --lh-body: 1.85;
  --lh-heading: 1.45;
  --h1-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.4rem);
  --h2-size: clamp(1.9rem, 1.45rem + 2vw, 2.7rem);
  --tracking-label: 0;
}

html:lang(en) {
  /* Closest Google Fonts to the owner's letterhead: name = Germania One, metropolis line = Uncial Antiqua */
  --font-display: "Germania One", "Almendra", Georgia, serif;
  --font-heading: "Almendra", Georgia, "Times New Roman", serif;
  --font-subtitle: "Uncial Antiqua", "Almendra", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --lh-body: 1.65;
  --lh-heading: 1.2;
  --h1-size: clamp(2.3rem, 1.4rem + 4.4vw, 4rem);
  --h2-size: clamp(2rem, 1.55rem + 2.2vw, 2.85rem);
  --tracking-label: .14em;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--parchment);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: 6rem; /* keeps anchored sections clear of the sticky header */
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--parchment);
  background-image: var(--tex-grain), var(--tex-stains);
  background-size: 220px 220px, 980px 760px, 980px 760px, 980px 760px, 980px 760px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0 0 .5em;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--burgundy);
}
h1 { font-family: var(--font-display); font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
html:lang(en) h1 { font-weight: 400; letter-spacing: .01em; }
html:lang(en) h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
h1, h2, h3, .hero-role { text-wrap: balance; }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--burgundy);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { color: var(--burgundy-2); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--burgundy);
  color: var(--on-dark);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 1rem; color: var(--on-dark); }

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-inline-size: 50rem; }
.nowrap { white-space: nowrap; }

.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: currentColor; }

/* ---------- Shared bits ---------- */
.eyebrow {
  margin: 0 0 .4rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold-ink);
}
html:lang(en) .eyebrow {
  font-size: .78rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.divider {
  inline-size: min(15rem, 72%);
  margin: 0 auto 1rem;
}

.tag-placeholder {
  display: inline-block;
  padding: .05rem .6rem;
  border: 1px dashed var(--gold-ink);
  border-radius: 999px;
  color: var(--gold-ink);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: middle;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  text-decoration: none;
  border-block-end: 1px solid var(--gold-rule);
  padding-block-end: .1rem;
}
.text-link::after { content: "\2192"; content: "\2192" / ""; }
[dir="rtl"] .text-link::after { content: "\2190"; content: "\2190" / ""; }
.text-link:hover { border-block-end-color: var(--burgundy); }

/* Embossed gold lettering for dark (burgundy) backgrounds. Large text only. */
.gold-title {
  color: var(--gold-light);
  text-shadow: 0 1px 0 rgba(40, 4, 4, .9), 0 2px 6px rgba(20, 2, 2, .45), 0 -1px 0 rgba(255, 244, 210, .18);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-title {
    background: linear-gradient(180deg, #FBF0C8 0%, var(--gold-light) 38%, var(--gold) 72%, #C9A253 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 0 rgba(40, 4, 4, .95)) drop-shadow(0 2px 4px rgba(20, 2, 2, .4));
  }
}
@media (forced-colors: active) {
  .gold-title { background: none; color: CanvasText; filter: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-block-size: 2.9rem;
  padding: .65rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html:lang(en) .btn { font-weight: 600; letter-spacing: .02em; }

.btn-primary {
  background: var(--burgundy);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(217, 185, 107, .45), 0 6px 14px -10px rgba(60, 6, 6, .9);
}
.btn-primary:hover { background: var(--burgundy-deep); color: var(--gold-light); }

.btn-outline { background: rgba(250, 244, 228, .55); border-color: var(--burgundy); color: var(--burgundy); }
.btn-outline:hover { background: var(--burgundy); color: var(--on-dark); }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-color: #C9A253;
  color: var(--burgundy-deep);
}
.btn-gold:hover { background: var(--gold-light); color: var(--burgundy-deep); }

.btn-ghost-light { background: transparent; border-color: rgba(217, 185, 107, .75); color: var(--on-dark); }
.btn-ghost-light:hover { background: rgba(217, 185, 107, .14); border-color: var(--gold-light); color: var(--gold-light); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: var(--parchment-light);
  background-image: var(--tex-grain);
  box-shadow: 0 1px 0 var(--line), 0 3px 0 var(--parchment-light), 0 4px 0 var(--gold-rule), 0 10px 18px -14px rgba(60, 30, 10, .55);
}

/* Mobile: [emblem | brand | lang | menu], nav panel below.
   Desktop: [emblem | brand | nav | lang]. The emblem sits in the start corner (right in AR, left in EN). */
.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "emblem brand lang toggle" "nav nav nav nav";
  align-items: center;
  column-gap: .6rem;
  min-block-size: 4rem;
  padding-block: .3rem;
}

.emblem { grid-area: emblem; display: block; }
.emblem img { inline-size: 2.75rem; block-size: auto; }

.brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  justify-self: start;
  color: var(--burgundy);
  text-decoration: none;
}
.brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, .95rem + 1.3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
}
html:lang(en) .brand-name { font-weight: 400; font-size: clamp(1.05rem, .85rem + 1.2vw, 1.45rem); }
.brand-sub {
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--slate);
}
html:lang(ar) .brand-sub { font-family: var(--font-heading); font-size: .84rem; line-height: 1.5; }
@media (min-width: 56em) { html:lang(ar) .brand-sub { font-size: .95rem; } }
html:lang(en) .brand-sub { font-family: var(--font-subtitle); font-size: .78rem; letter-spacing: .01em; }
.brand:hover .brand-name { color: var(--burgundy-2); }

.lang-switch {
  grid-area: lang;
  display: flex;
  align-items: center;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-rule);
}
.lang-switch a,
.lang-switch .lang-current {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2rem;
  min-block-size: 2.25rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.lang-switch .lang-current { color: var(--burgundy); text-decoration: underline; text-decoration-color: var(--gold-rule); text-underline-offset: .3em; }
.lang-switch a:hover { background: var(--parchment); color: var(--burgundy); }

.nav-toggle {
  grid-area: toggle;
  display: inline-grid;
  place-content: center;
  gap: 5px;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  inline-size: 20px;
  block-size: 2px;
  background: var(--burgundy);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html:not(.js) .nav-toggle { display: none; }

.site-nav { grid-area: nav; padding-block-start: .5rem; }
.js .site-nav { display: none; }
.js.nav-open .site-nav { display: block; }

.site-nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 .75rem;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: .75rem .25rem;
  border-block-start: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.0625rem;
  text-decoration: none;
}
.site-nav a:hover { color: var(--burgundy); }
.site-nav a[aria-current="page"] { color: var(--burgundy); font-weight: 700; }

/* Very narrow phones: keep the sticky header compact. The metropolis line is repeated in the hero subtitle. */
@media (max-width: 24.99em) {
  .brand-sub { display: none; }
  html:lang(en) .brand-name { font-size: 1.05rem; }
}
@media (min-width: 30em) {
  .emblem img { inline-size: 3.1rem; }
  .brand-sub { font-size: .8rem; }
}

@media (min-width: 56em) {
  .header-inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "emblem brand nav lang";
    column-gap: 1rem;
    min-block-size: 5.25rem;
  }
  .emblem img { inline-size: 4.25rem; }  /* 68px wide: native file is 233px, so always >= 2x sharp */
  .nav-toggle, html:not(.js) .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; justify-self: end; padding-block-start: 0; padding-inline-start: 1rem; }
  .brand-name, .brand-sub { white-space: nowrap; }
  .site-nav ul { flex-direction: row; gap: 1.4rem; padding: 0; }
  .site-nav a {
    padding: .5rem 0;
    border: 0;
    font-size: 1rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: .45em;
    transition: text-decoration-color .2s ease;
  }
  .site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration-color: var(--gold-rule); }
}

/* ---------- Faint Byzantine IC XC NI KA cross (decorative layer) ----------
   One colour via CSS mask, so the tint comes from background-color. Masks need http(s):
   opened from file:// the layer is simply not painted. */
.bg-cross {
  position: absolute;
  z-index: -1;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: min(34rem, 112vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  background-color: var(--burgundy);
  opacity: .06;
  -webkit-mask: url("../img/cross-bg.svg") center / contain no-repeat;
  mask: url("../img/cross-bg.svg") center / contain no-repeat;
  pointer-events: none;
}
[dir="rtl"] .bg-cross { translate: 50% -50%; }
.bg-cross-gold { background-color: var(--gold); opacity: .07; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(3rem, 7vw, 5.5rem);
  background-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 250, 232, .55), transparent 70%);
}
/* The cross sits behind the hero text block (centred on it), never under the opaque portrait; the hero clips it. */
.hero-text { position: relative; }
@media (min-width: 56em) {
  .hero .bg-cross { inline-size: min(37rem, 50vw); }
}

.hero-inner { display: grid; gap: 2.5rem; align-items: center; }
.hero-text { text-align: center; }
.hero-text h1 { margin-block-end: .2em; text-shadow: 0 1px 0 rgba(255, 248, 228, .8); }
.hero-role {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, .98rem + .8vw, 1.45rem);
  line-height: 1.6;
  color: var(--slate);
}
html:lang(en) .hero-role { font-family: var(--font-subtitle); font-size: clamp(1.1rem, .95rem + .8vw, 1.4rem); line-height: 1.4; }
.hero-divider { inline-size: min(13rem, 66%); margin: 1.25rem auto; }
.hero-lead { max-inline-size: 34em; margin-inline: auto; font-size: 1.075rem; }
.hero-creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
  font-weight: 500;
  color: var(--gold-ink);
}
.hero-creds { flex-direction: column; align-items: center; }
@media (min-width: 30em) {
  .hero-creds { flex-direction: row; }
  .hero-creds li + li::before { content: "\2022"; content: "\2022" / ""; margin-inline: .6rem; color: var(--gold-rule); }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-block-start: 1.75rem;
}

/* Arched church-window portrait */
.portrait { margin: 0 auto; inline-size: min(100%, 17rem); }
.portrait-cross { inline-size: 3.25rem; margin: 0 auto .5rem; }
.portrait-frame {
  position: relative;
  padding: .55rem;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: linear-gradient(180deg, #84161A, var(--burgundy) 55%, var(--burgundy-deep));
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 1px rgba(176, 138, 62, .6), 0 0 0 5px var(--parchment-light), 0 0 0 6px var(--gold-rule), 0 22px 36px -24px rgba(60, 10, 6, .8);
}
.portrait-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 999px 999px 2px 2px;
  box-shadow: 0 0 0 1px var(--gold);
}
.portrait-photo img { inline-size: 100%; background: #6d6a63; }
/* Tone the busy studio backdrop into the frame: soft burgundy vignette and a dark foot. */
.portrait-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 62% at 50% 38%, transparent 58%, rgba(74, 7, 7, .42) 100%),
    linear-gradient(to top, rgba(40, 4, 4, .45), transparent 22%);
  pointer-events: none;
}

@media (min-width: 56em) {
  .hero-inner { grid-template-columns: 1.25fr .75fr; gap: 4rem; }
  .hero-text { text-align: start; }
  .hero-divider { margin-inline: 0; }
  .hero-lead { margin-inline: 0; }
  .hero-creds, .hero-actions { justify-content: start; }
  .portrait { inline-size: min(100%, 22rem); }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--space-section); }
.section-light {
  background-color: var(--parchment-light);
  background-image: var(--tex-grain), linear-gradient(180deg, rgba(201, 178, 124, .18), transparent 3rem, transparent calc(100% - 3rem), rgba(201, 178, 124, .18));
}
.section-head { margin-block-end: 2.5rem; text-align: center; }
.section-head h2 { margin-block-end: .25em; }
.section-intro { max-inline-size: 38em; margin: 0 auto; color: var(--slate); }
.section-cta { margin-block-start: 2.5rem; text-align: center; }

/* About teaser */
.medallion { display: block; inline-size: 11rem; margin: 0 auto 1.1rem; }
.medallion img { inline-size: 100%; border-radius: 50%; box-shadow: 0 0 0 1px var(--gold-rule), 0 16px 28px -18px rgba(60, 30, 10, .8); }
.about-text { text-align: center; font-size: 1.075rem; }
.milestones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem .75rem;
  margin: 2.25rem auto;
  padding: 0;
  list-style: none;
}
.milestone {
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--gold-rule);
  text-align: center;
}
.milestone-key {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--burgundy);
}
.milestone-label { display: block; color: var(--slate); font-size: .92rem; line-height: 1.5; }
@media (min-width: 44em) { .milestones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

/* Article cards */
.sample-note { margin: -1.25rem auto 2rem; text-align: center; font-size: .92rem; color: var(--slate); }
.card-grid {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  block-size: 100%;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--burgundy);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover, .card:focus-within {
  border-color: var(--gold-rule);
  border-block-start-color: var(--burgundy);
  box-shadow: 0 14px 28px -22px rgba(74, 7, 7, .7);
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .75rem;
  font-size: .875rem;
  color: var(--slate);
}
.card-cat { color: var(--gold-ink); font-weight: 700; }
html:lang(en) .card-cat { font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card-title { margin: 0; font-size: 1.45rem; color: var(--burgundy); }
html:lang(en) .card-title { font-size: 1.5rem; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.card-title a:hover { color: var(--burgundy-2); text-decoration: underline; text-decoration-color: var(--gold-rule); }
.card-excerpt { margin: 0; color: var(--ink); }
.card .tag-placeholder { align-self: flex-start; margin-block-start: auto; }

/* ---------- Torn parchment edges (decorative strips above/below burgundy areas) ---------- */
.torn {
  --torn-color: var(--burgundy);
  position: relative;
  z-index: 2;
  block-size: 26px;
  margin-block: -26px 0;
  /* the parchment's pale fibrous rim along the tear */
  filter: drop-shadow(0 -2px 0 rgba(251, 245, 228, .85));
  pointer-events: none;
}
.torn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--torn-color);
  -webkit-mask: var(--torn-mask) 0 0 / 480px 26px repeat-x;
  mask: var(--torn-mask) 0 0 / 480px 26px repeat-x;
}
.torn-out { margin-block: 0 -26px; transform: scaleY(-1); }
.torn-out::before { -webkit-mask-position: 173px 0; mask-position: 173px 0; }
.torn-footer { --torn-color: var(--navy-deep); }

/* Burgundy band (school) */
.band {
  position: relative;
  padding-block: clamp(3rem, 8vw, 5rem);
  background-color: var(--burgundy);
  background-image: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(140, 24, 24, .55), transparent 75%), var(--tex-grain);
  box-shadow: inset 0 14px 16px -14px rgba(20, 2, 2, .8), inset 0 -14px 16px -14px rgba(20, 2, 2, .8);
  color: var(--on-dark);
}
.band h2 { margin-block-end: .35em; }
.band p { color: var(--on-dark-muted); }
.band .eyebrow { color: var(--gold); }
.band :focus-visible { outline-color: var(--gold-light); }
.band-inner { display: grid; gap: 2rem; align-items: center; text-align: center; }
/* Round school photo with a thin gold ring */
.band-photo { display: block; inline-size: min(100%, 15rem); margin-inline: auto; }
.band-photo img {
  inline-size: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(217, 185, 107, .18), 0 14px 26px -12px rgba(20, 2, 2, .75);
}
/* School logo: burgundy wordmark on a parchment plate so it stays readable on the burgundy band */
.school-logo {
  display: block;
  inline-size: min(100%, 19rem);
  margin: 0 auto 1rem;
  padding: .6rem .9rem;
  border-radius: var(--radius);
  background: var(--parchment-light) var(--tex-grain);
  box-shadow: inset 0 0 0 1px var(--gold-rule), 0 0 0 1px var(--gold), 0 10px 20px -12px rgba(20, 2, 2, .8);
}
.school-logo img { inline-size: 100%; }
/* English page: the Arabic wordmark is replaced by its round phi badge next to the eyebrow */
.school-mark { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-block-end: .75rem; }
.school-mark .eyebrow { margin: 0; }
.school-badge { display: block; flex: none; inline-size: 3.5rem; }
.school-badge img { inline-size: 100%; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 6px 12px -6px rgba(20, 2, 2, .8); }
.band-actions { display: flex; flex-direction: column; gap: .75rem; margin-block-start: 1.5rem; }
.band-actions .btn { inline-size: 100%; }
.handle { font-family: "Source Serif 4", Georgia, serif; font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 48em) {
  .band-inner { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 3.5rem; text-align: start; }
  .band-photo { inline-size: 100%; }
  .school-logo { margin-inline: 0; }
  .school-mark { justify-content: start; }
  .band-actions { flex-direction: row; flex-wrap: wrap; }
  .band-actions .btn { inline-size: auto; }
}

/* With St Nektarios: faint gold-mosaic ground; the composite card links to the owner's other site */
.section-mosaic {
  background-color: var(--parchment);
  background-image: url("../img/mosaic.svg"), radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 248, 228, .5), transparent 75%);
  background-size: 96px 96px, auto;
}
.saint-grid { display: grid; justify-items: center; }
.saint-link {
  display: block;
  inline-size: min(100%, 24rem);
  border-radius: 999px 999px 10px 10px;
  color: inherit;
  text-decoration: none;
}
.saint-link:focus-visible { outline-offset: 6px; border-radius: 999px 999px 10px 10px; }
.saint-link:hover { color: inherit; }
/* Round-top card: the owner's composite with the greeting replaced by live text on a navy plate */
.saint-card {
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 10px 10px;
  background: var(--navy-deep);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px var(--parchment-light), 0 0 0 6px var(--gold-rule), 0 24px 38px -24px rgba(20, 20, 40, .9);
}
.saint-card img { inline-size: 100%; }
.saint-caption {
  display: grid;
  justify-items: center;
  gap: .15rem;
  margin: -.25rem .75rem .75rem;
  padding: .4rem 1rem 1rem;
  border: 1px solid rgba(217, 185, 107, .7);
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px var(--navy-deep), inset 0 0 0 4px rgba(217, 185, 107, .35);
  text-align: center;
}
.saint-caption .fleuron { inline-size: 7.5rem; margin-block-end: .2rem; }
.saint-caption-main {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.8rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gold-light);
}
html:lang(en) .saint-caption-main { font-weight: 400; }
.saint-caption-sub { font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.5; color: var(--on-dark-muted); }
html:lang(en) .saint-caption-sub { font-style: italic; }
.saint-caption-cue {
  margin-block-start: .35rem;
  padding-block-start: .35rem;
  border-block-start: 1px solid rgba(217, 185, 107, .35);
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold-light);
}
.saint-caption-cue .arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .saint-card { transition: transform .3s ease, box-shadow .3s ease; }
  .saint-caption-cue .arrow { transition: translate .3s ease; }
  .saint-link:hover .saint-card, .saint-link:focus-visible .saint-card { transform: translateY(-4px); }
  .saint-link:hover .saint-caption-cue .arrow { translate: .25rem 0; }
  html[dir="rtl"] .saint-link:hover .saint-caption-cue .arrow { translate: -.25rem 0; }
}
.saint-link:hover .saint-card, .saint-link:focus-visible .saint-card {
  box-shadow: 0 0 0 2px var(--gold-light), 0 0 0 5px var(--parchment-light), 0 0 0 6px var(--gold), 0 28px 42px -24px rgba(20, 20, 40, .95);
}
.saint-link:hover .saint-caption-cue { text-decoration: underline; text-underline-offset: .25em; }

/* Church block: arched card like a church window */
.church-card {
  position: relative;
  max-inline-size: 44rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--gold-rule);
  border-radius: 50% 50% var(--radius) var(--radius) / 5.5rem 5.5rem var(--radius) var(--radius);
  background: var(--paper);
  text-align: center;
  box-shadow: 0 18px 34px -28px rgba(74, 7, 7, .7);
}
.church-card::before {
  content: "";
  position: absolute;
  inset: .45rem;
  border: 1px solid var(--line);
  border-radius: 50% 50% 3px 3px / 5.1rem 5.1rem 3px 3px;
  pointer-events: none;
}
.church-card > * { position: relative; }
.church-cross { inline-size: 3.5rem; margin: 0 auto .9rem; }
.church-card h2 { margin-block-end: .2em; }
.church-place { margin-block-end: 1.25rem; color: var(--slate); }
.church-text { max-inline-size: 32em; margin-inline: auto; }

/* Link cards (links row + contact) */
.link-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) {
  .link-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .link-list > li { grid-column: span 2; }
  .link-list > li:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}

.link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  block-size: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.link-card:hover {
  border-color: var(--gold-rule);
  box-shadow: 0 12px 24px -20px rgba(74, 7, 7, .7);
  color: var(--ink);
}
.link-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border-radius: 50%;
  background: var(--burgundy);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 2px var(--paper), 0 0 0 3px var(--line);
  color: var(--gold-light);
}
.link-icon .icon { inline-size: 1.35rem; block-size: 1.35rem; }
.link-body { min-inline-size: 0; }
.link-title { display: block; font-weight: 700; line-height: 1.4; color: var(--burgundy); }
.link-desc { display: block; font-size: .92rem; color: var(--slate); overflow-wrap: anywhere; }
.link-card:hover .link-title { text-decoration: underline; text-decoration-color: var(--gold-rule); text-underline-offset: .25em; }

.postal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .6rem;
  max-inline-size: 36rem;
  margin: 2rem auto 0;
  font-style: normal;
  color: var(--slate);
  text-align: center;
}
.postal .icon { margin-block-start: .3em; color: var(--burgundy); }
.postal-line { display: block; }
.postal-line:first-child { color: var(--ink); font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 3.5rem 2rem;
  background-color: var(--navy-deep);
  background-image: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(40, 58, 88, .55), transparent 75%), var(--tex-grain);
  box-shadow: inset 0 14px 16px -14px rgba(2, 4, 10, .85);
  color: var(--on-dark-muted);
  font-size: .95rem;
}
.site-footer .bg-cross { inline-size: min(30rem, 96vw); }
/* Gold vine-and-grape corners (from the owner's round composite), mirrored for the end corner */
.vine {
  position: absolute;
  z-index: -1;
  inset-block-start: .75rem;
  inline-size: clamp(6.5rem, 18vw, 11rem);
  aspect-ratio: 1;
  background: url("../img/vine-corner.svg") center / contain no-repeat;
  opacity: .4;
  pointer-events: none;
}
.vine-start { inset-inline-start: .5rem; }
.vine-end { inset-inline-end: .5rem; transform: scaleX(-1); }
[dir="rtl"] .vine-start { transform: scaleX(-1); }
[dir="rtl"] .vine-end { transform: none; }
.footer-seal { display: block; inline-size: 5.5rem; margin: 0 auto 1rem; }
.footer-seal img { inline-size: 100%; border-radius: 50%; background: var(--parchment-light); box-shadow: 0 0 0 2px var(--gold), 0 8px 18px -8px rgba(0, 0, 0, .8); }
.site-footer :focus-visible { outline-color: var(--gold-light); }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--gold-light); }
.footer-inner { display: grid; gap: 1.5rem; text-align: center; }
.footer-name {
  margin: 0 0 .25rem;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.4;
}
html:lang(en) .footer-name { font-weight: 400; font-size: 1.75rem; }
.footer-role { margin: 0; }
.footer-address { margin: 0 0 .35rem; line-height: 1.7; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .6rem; margin: 0; }
.footer-links a { display: inline-block; padding-block: .3rem; }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  display: inline-block;
  padding-block: .35rem;
  text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }
.footer-copy {
  margin: 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(217, 185, 107, .3);
  font-size: .875rem;
}

/* ==========================================================================
   Inner pages: about, articles (+ article template), gallery, links,
   contact, school, 404. Same tokens and components as the homepage.
   ========================================================================== */
.section-tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.site-nav a[aria-current="true"] { color: var(--burgundy); font-weight: 700; }
@media (min-width: 56em) { .site-nav a[aria-current="true"] { text-decoration-color: var(--gold-rule); } }
.footer-nav a[aria-current="page"] { color: var(--gold-light); text-decoration: underline; text-decoration-color: var(--gold); }
.church-card .hero-actions { justify-content: center; }

/* Compact page header: burgundy band, breadcrumb, gold title; a torn-paper strip follows it */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.4rem, 4vw, 2.25rem) clamp(2.4rem, 6vw, 3.4rem);
  background-color: var(--burgundy);
  background-image: radial-gradient(ellipse 60% 80% at 50% 40%, rgba(140, 24, 24, .55), transparent 75%), var(--tex-grain);
  box-shadow: inset 0 14px 16px -14px rgba(20, 2, 2, .8);
  color: var(--on-dark);
  text-align: center;
}
.page-hero .bg-cross { inline-size: min(22rem, 86vw); opacity: .09; }
.page-hero h1 { margin-block: .05em .15em; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); }
html:lang(en) .page-hero h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.2rem); }
.page-hero .eyebrow { margin: 0; color: var(--gold); }
.page-hero .eyebrow a { color: var(--gold-light); }
.page-hero :focus-visible { outline-color: var(--gold-light); }
.page-lead { max-inline-size: 36em; margin: 0 auto; color: var(--on-dark-muted); font-size: 1.05rem; }
.page-hero .school-logo, .page-hero .school-mark { margin: .25rem auto .9rem; justify-content: center; }
.page-hero .school-logo { inline-size: min(100%, 16rem); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem .5rem;
  margin: 0 0 .7rem;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: var(--on-dark-muted);
}
.breadcrumb li + li::before { content: "/"; content: "/" / ""; margin-inline-end: .5rem; color: var(--gold); }
.breadcrumb a { color: var(--gold-light); text-decoration-color: rgba(217, 185, 107, .55); }
.breadcrumb a:hover { color: var(--on-dark); }
.byline { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .6rem; margin: .4rem 0 0; color: var(--on-dark-muted); font-size: .95rem; }
.byline a { color: var(--gold-light); }
@media (max-width: 29.99em) { .byline { gap: .1rem 1rem; } .byline > [aria-hidden="true"] { display: none; } }

/* Long-form text */
.prose { max-inline-size: 44rem; }
.prose > :first-child { margin-block-start: 0; }
.prose h2 { margin-block: 1.6em .4em; font-size: clamp(1.55rem, 1.3rem + 1vw, 1.95rem); }
html:lang(en) .prose h2 { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0; }
.prose ul { margin: 0 0 1em; padding-inline-start: 1.4rem; }
.prose li { margin-block-end: .35em; }
.prose li::marker { color: var(--gold-rule); }
.placeholder-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem;
  border: 1px dashed var(--gold-ink);
  border-radius: var(--radius);
  background: rgba(250, 244, 228, .6);
  color: var(--slate);
  text-align: center;
}
.placeholder-box p { margin: 0; }
.placeholder-box .icon { color: var(--gold-ink); }

/* About */
.about-intro { display: grid; gap: 2rem; align-items: center; }
.about-portrait .portrait { inline-size: min(100%, 14rem); }
.about-lead-text { margin-inline: auto; text-align: center; }
.about-lead-text h2 { margin-block: 0 .4em; }
@media (min-width: 56em) {
  .about-intro { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 4rem; }
  .about-portrait .portrait { inline-size: 100%; }
  .about-lead-text { margin-inline: 0; text-align: start; }
}
.timeline { position: relative; max-inline-size: 44rem; margin: 0 auto; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 1rem;
  inset-inline-start: calc(1.125rem - 1px);
  inline-size: 2px;
  background: linear-gradient(180deg, var(--gold-rule), var(--line));
}
.timeline-item {
  position: relative;
  margin-block: 0 1.25rem;
  margin-inline: 3rem 0;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.timeline-item::before {
  content: "";
  position: absolute;
  inset-block-start: 1.3rem;
  inset-inline-start: -2.5rem;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background: var(--burgundy);
  box-shadow: 0 0 0 3px var(--parchment-light), 0 0 0 4px var(--gold-rule);
}
.timeline-key { display: block; font-family: var(--font-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.3; color: var(--burgundy); }
html:lang(en) .timeline-key { font-family: var(--font-display); font-weight: 400; }
.timeline-title { margin: .1rem 0 .3rem; font-family: var(--font-body); font-size: 1.12rem; color: var(--ink); }
.timeline-text { margin: 0; }

.feature-grid { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.feature { padding: 1.5rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.feature .link-icon { margin: 0 auto .9rem; }
.feature h3 { margin-block-end: .3em; font-size: 1.3rem; }
.feature p { margin: 0; }
@media (min-width: 40em) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 62em) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid > li:last-child:nth-child(odd) { grid-column: auto; }
  .feature-grid-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feature-grid-5 > li { grid-column: span 2; }
  .feature-grid-5 > li:nth-child(4) { grid-column: 2 / span 2; }
  .feature-grid-5 > li:last-child:nth-child(odd) { grid-column: span 2; }
}

/* Cards: extra meta, project cards, external-link marker */
.card-read { display: inline-flex; align-items: center; gap: .3rem; }
.card-read .icon { inline-size: 1em; block-size: 1em; }
.card-url { margin-block-start: auto; font-size: .9rem; color: var(--slate); }
.project-card .link-icon { margin-block-end: .25rem; }
.ext { display: inline-block; inline-size: .8em; block-size: .8em; margin-inline-start: .35rem; vertical-align: -.02em; opacity: .8; }
[dir="rtl"] .ext { transform: scaleX(-1); }
.link-url { display: block; color: var(--slate); font-family: "Source Serif 4", Georgia, serif; font-size: .85rem; overflow-wrap: anywhere; }
[dir="rtl"] .link-url { text-align: end; }
.link-card > .ext { flex: none; inline-size: 1rem; block-size: 1rem; margin-inline-start: auto; color: var(--gold-ink); opacity: 1; }
.link-arrow { flex: none; margin-inline-start: auto; color: var(--gold-ink); font-weight: 700; }
.link-arrow::after { content: "\2192"; content: "\2192" / ""; }
[dir="rtl"] .link-arrow::after { content: "\2190"; content: "\2190" / ""; }
@media (min-width: 62em) { .card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 52rem; margin-inline: auto; } }

/* Filter chips (articles, school files). The bar is hidden without JS. */
.sample-note-top { margin: 0 auto 1.5rem; }
.filter-bar { margin: 0 0 1.75rem; text-align: center; }
.filter-label { margin: 0 0 .5rem; color: var(--slate); font-size: .95rem; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  min-block-size: 2.6rem;
  padding: .35rem 1.05rem;
  border: 1px solid var(--burgundy);
  border-radius: 999px;
  background: rgba(250, 244, 228, .75);
  color: var(--burgundy);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.chip:hover { background: var(--paper); }
.chip[aria-pressed="true"] { background: var(--burgundy); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(217, 185, 107, .55); }
.filter-status { min-block-size: 1.5em; margin: .6rem 0 0; color: var(--slate); font-size: .9rem; }
.filter-empty { margin: 1rem auto 0; max-inline-size: 36rem; padding: 1.25rem; border: 1px dashed var(--gold-ink); border-radius: var(--radius); color: var(--slate); text-align: center; }
[hidden] { display: none !important; }

/* Article template */
.post-container { max-inline-size: 48rem; }
.sample-banner {
  margin: 2.25rem 0 1.75rem;
  padding: .7rem 1rem;
  border: 1px dashed var(--gold-ink);
  border-radius: var(--radius);
  background: rgba(250, 244, 228, .7);
  color: var(--gold-ink);
  font-size: .95rem;
  font-weight: 500;
  text-align: center;
}
.post-body { margin-inline: auto; }
.post-lead { font-size: 1.2rem; line-height: 1.8; }
html:lang(en) .post-lead { line-height: 1.6; }
.post-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-block-start: 2.25rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--line);
}
.post-tags-label { margin: 0; color: var(--slate); font-weight: 700; }
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tag { display: inline-block; padding: .1rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .88rem; }
.post-nav { display: grid; gap: 1rem; margin-block: 2.5rem 3.5rem; }
@media (min-width: 40em) { .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-nav-item, .post-nav-link {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.post-nav-next { text-align: end; }
.post-nav-label { color: var(--gold-ink); font-size: .85rem; font-weight: 700; }
.post-nav-empty { color: var(--slate); }
.post-nav-title { color: var(--burgundy); font-weight: 700; }
.post-nav-link:hover { border-color: var(--gold-rule); color: var(--ink); }

/* Gallery (CSS columns masonry) + lightbox */
.gallery { margin: 0; padding: 0; list-style: none; columns: 1; column-gap: 1.25rem; }
@media (min-width: 40em) { .gallery { columns: 2; } }
@media (min-width: 62em) { .gallery { columns: 3; } }
.gallery-item { break-inside: avoid; margin-block-end: 1.25rem; }
.gallery-figure {
  margin: 0;
  padding: .6rem .6rem .75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 26px -22px rgba(74, 7, 7, .7);
}
.gallery-link { position: relative; display: block; overflow: hidden; border-radius: 2px; background: var(--parchment); }
.gallery-link img { inline-size: 100%; }
.gallery-zoom {
  position: absolute;
  inset-block-end: .6rem;
  inset-inline-end: .6rem;
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  background: rgba(20, 32, 47, .8);
  box-shadow: 0 0 0 1px rgba(217, 185, 107, .75);
  color: var(--gold-light);
}
.gallery-zoom .icon { inline-size: 1.2rem; block-size: 1.2rem; }
.gallery-link:hover .gallery-zoom { background: var(--burgundy); }
@media (prefers-reduced-motion: no-preference) {
  .gallery-link img { transition: transform .4s ease; }
  .gallery-link:hover img { transform: scale(1.03); }
}
.gallery-figure figcaption { padding: .6rem .25rem 0; color: var(--slate); font-size: .95rem; line-height: 1.5; text-align: center; }
.gallery-more { margin-block-start: 1.5rem; text-align: center; }
.gallery-more .fleuron { inline-size: 7rem; margin: 0 auto .5rem; }
.gallery-more p { max-inline-size: 34em; margin-inline: auto; color: var(--slate); }

html.lightbox-open { overflow: hidden; }
.lightbox {
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 22, 33, .97);
  color: var(--on-dark);
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgba(10, 14, 22, .75); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem clamp(.75rem, 3vw, 1.5rem); }
.lightbox-count { margin: 0; color: var(--on-dark-muted); font-size: .95rem; }
.lightbox-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: .75rem;
  min-block-size: 0;
  margin: 0;
  padding-inline: clamp(.75rem, 3vw, 1.5rem);
}
.lightbox-img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: min(100%, calc(100dvh - 10rem));
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(217, 185, 107, .5), 0 20px 40px -20px #000;
}
.lightbox-caption { max-inline-size: 40rem; color: var(--on-dark); font-size: 1rem; line-height: 1.5; text-align: center; }
.lightbox-nav { display: flex; justify-content: center; gap: 1rem; padding: .75rem 1rem 1.1rem; }
.lightbox-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 1px solid rgba(217, 185, 107, .8);
  border-radius: 50%;
  background: rgba(20, 32, 47, .9);
  color: var(--gold-light);
  cursor: pointer;
}
.lightbox-btn:hover { background: var(--burgundy); border-color: var(--gold-light); }
.lightbox-btn .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.lightbox :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
/* the chevron symbol points to the inline start in LTR */
.lightbox-next .icon, [dir="rtl"] .lightbox-prev .icon { transform: scaleX(-1); }
[dir="rtl"] .lightbox-next .icon { transform: none; }

/* Contact */
.contact-split { display: grid; gap: 1.5rem; margin-block-start: 2rem; }
#write .contact-split { margin-block-start: 0; }
@media (min-width: 48em) { .contact-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-panel { padding: 1.5rem clamp(1.1rem, 3vw, 1.75rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-title { margin-block-end: .4em; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.85rem); }
.divider-start { inline-size: 9rem; margin: 0 0 .75rem; }
.link-list.link-list-stack { grid-template-columns: minmax(0, 1fr); }
.link-list.link-list-stack > li:nth-child(n) { grid-column: auto; }
.postal.postal-start { justify-content: flex-start; margin: 0; text-align: start; }
.mail-address { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.compose { display: grid; gap: 1rem; margin-block-start: 1rem; }
.field label { display: block; margin-block-end: .3rem; color: var(--ink); font-weight: 700; }
.field-opt { color: var(--slate); font-size: .9em; font-weight: 400; }
.field input, .field textarea {
  display: block;
  inline-size: 100%;
  padding: .65rem .8rem;
  border: 1px solid #7D6A44;   /* 5:1 against the field background */
  border-radius: var(--radius);
  background: #FFFDF6;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.field textarea { min-block-size: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.compose .btn { inline-size: 100%; }
@media (min-width: 30em) { .compose .btn { inline-size: auto; justify-self: start; } }
.form-note { margin: 0; color: var(--slate); font-size: .88rem; }

/* School: intro, videos (click-to-load), files */
.school-intro { display: grid; gap: 2rem; align-items: center; }
.school-photo { inline-size: min(100%, 14rem); }
.school-intro .prose { margin-inline: auto; text-align: center; }
.hero-actions.hero-actions-start { justify-content: center; }
@media (min-width: 48em) {
  .school-intro { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 3rem; }
  .school-intro .prose { margin-inline: 0; text-align: start; }
  .hero-actions.hero-actions-start { justify-content: start; }
}
.brief-note { color: var(--slate); font-style: italic; }
.audience { display: grid; gap: .75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; text-align: start; }
.audience li { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.audience .icon { margin-block-start: .3em; color: var(--burgundy); }

.video-grid { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.video-card { display: flex; flex-direction: column; block-size: 100%; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.video-card.is-sample { border-style: dashed; border-color: var(--gold-ink); }
.video-facade, .video-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--burgundy-deep);
  background-image: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(140, 24, 24, .75), transparent 75%), var(--tex-grain);
  color: var(--gold-light);
}
.video-poster { position: absolute; inset: 0; }
.video-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.video-poster::before {
  content: "";
  position: absolute;
  inset: 12% 0;
  background-color: var(--gold);
  opacity: .12;
  -webkit-mask: url("../img/cross-bg.svg") center / contain no-repeat;
  mask: url("../img/cross-bg.svg") center / contain no-repeat;
}
.video-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background: rgba(20, 32, 47, .88);
  box-shadow: 0 0 0 2px var(--gold), 0 10px 20px -8px rgba(0, 0, 0, .8);
  color: var(--gold-light);
}
[dir="rtl"] .video-play { translate: 50% -50%; }
.video-play .icon { inline-size: 1.8rem; block-size: 1.8rem; transform: translateX(.1rem); }
.video-facade:hover .video-play { background: var(--burgundy); }
.video-facade:focus-visible { outline-offset: -4px; outline-color: var(--gold-light); }
.video-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.video-body { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem 1.25rem 1.2rem; }
.video-title { margin: 0; font-size: 1.25rem; }
.video-meta { margin: 0; color: var(--slate); font-size: .9rem; }
.video-desc { margin: 0; color: var(--slate); font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.video-poster picture { display: block; inline-size: 100%; block-size: 100%; }
.video-title { overflow-wrap: anywhere; line-height: 1.45; }
.video-item { min-inline-size: 0; }
.video-actions { justify-content: center; margin-block: 0 2rem; }
.btn-lg { min-block-size: 3.25rem; padding: .8rem 1.6rem; font-size: 1.05rem; }

.file-list { display: grid; gap: 1rem; max-inline-size: 48rem; margin: 0 auto; padding: 0; list-style: none; }
.file-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.file-card.is-sample { border-style: dashed; border-color: var(--gold-ink); }
a.file-card:hover { border-color: var(--gold-rule); box-shadow: 0 12px 24px -20px rgba(74, 7, 7, .7); color: var(--ink); }
a.file-card:hover .file-title { text-decoration: underline; text-decoration-color: var(--gold-rule); }
.file-icon { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 3.2rem; border-radius: 3px; background: var(--burgundy); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-light); }
.file-body { display: flex; flex-direction: column; gap: .3rem; min-inline-size: 0; }
.file-title { color: var(--burgundy); font-weight: 700; line-height: 1.4; }
.file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; color: var(--slate); font-size: .88rem; }
.level-tag { padding: .05rem .6rem; border-radius: 999px; background: rgba(106, 10, 10, .08); color: var(--burgundy); font-weight: 700; }
.file-dl { flex: none; margin-inline-start: auto; color: var(--gold-ink); }

/* 404 */
.nf-en { max-inline-size: 30rem; margin: 1.5rem auto 0; color: var(--slate); font-family: "Source Serif 4", Georgia, serif; font-size: .95rem; line-height: 1.6; }

@media print {
  .page-hero { background: #fff; color: #000; box-shadow: none; }
  .filter-bar, .lightbox { display: none; }
}

/* ---------- Scroll reveal (enabled by JS only when motion is allowed) ---------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header { position: static; box-shadow: none; }
  .bg-cross, .vine, .torn, .nav-toggle { display: none; }
  body, .section-light, .band, .site-footer { background: #fff; color: #000; box-shadow: none; }
  .gold-title { background: none; color: #000; filter: none; }
}