/* =====================================================================
   Sisters of St Joseph of Tarbes — Bangalore Province
   Front-end stylesheet
   ===================================================================== */

:root{
  --brand:        #1f4e8c;
  --brand-dark:   #163a69;
  --brand-light:  #2f6fc4;
  --brand-pale:   #eaf1fa;
  --accent:       #b8892b;
  --accent-pale:  #fbf5e8;

  --ink:          #16233a;
  --body:         #43516b;
  --muted:        #7a879e;
  --line:         #e2e7f0;
  --bg:           #ffffff;
  --bg-soft:      #f6f8fc;
  --bg-deep:      #0f2340;

  --radius:       14px;
  --radius-sm:    9px;
  --shadow-sm:    0 1px 2px rgba(16,35,64,.06), 0 2px 8px rgba(16,35,64,.05);
  --shadow:       0 4px 12px rgba(16,35,64,.08), 0 12px 32px rgba(16,35,64,.07);
  --shadow-lg:    0 8px 24px rgba(16,35,64,.10), 0 24px 60px rgba(16,35,64,.10);

  --serif:  "Lora", Georgia, "Times New Roman", serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Overridden by Settings → Appearance */
  --fs-base: 16.5px;
  --h1: clamp(1.9rem, 4vw, 2.75rem);
  --h2: clamp(1.5rem, 3vw, 2.05rem);
  --h3: clamp(1.2rem, 2.2vw, 1.45rem);
  --h4: 1.1rem;

  --wrap:   1200px;
  --header-h: 76px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 var(--fs-base)/1.75 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--brand-light)}
h1,h2,h3,h4,h5{margin:0 0 .6em; color:var(--ink); font-family:var(--serif); font-weight:600; line-height:1.25}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.3em}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--brand-light); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:860px}
.text-center{text-align:center}
.accent{color:var(--brand) !important; font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- topbar */
.topbar{
  background:var(--bg-deep); color:#c3d3ea; font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px}
.topbar a{color:#c3d3ea}
.topbar a:hover{color:#fff}
.topbar-contact{display:flex; gap:22px; flex-wrap:wrap; align-items:center}
.topbar-contact span{display:inline-flex; align-items:center; gap:7px}
.topbar-motto{font-family:var(--serif); font-style:italic; color:#8fb0d8}
.topbar .ico{width:14px;height:14px;opacity:.75;flex:none}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:200; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
.header-inner{display:flex; align-items:center; gap:24px; min-height:var(--header-h)}

.brand{display:flex; align-items:center; gap:13px; flex:none}
.brand img{width:50px; height:50px; object-fit:contain; border-radius:8px}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-family:var(--serif); font-weight:600; font-size:16.5px; color:var(--ink); letter-spacing:.1px}
.brand-sub{font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:500}

.nav{margin-left:auto}
.nav > ul{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav > ul > li{position:relative}
.nav > ul > li > a{
  display:block; padding:10px 13px; border-radius:8px; font-size:14.5px; font-weight:500;
  color:var(--ink); white-space:nowrap;
}
.nav > ul > li > a:hover,
.nav > ul > li:focus-within > a{background:var(--brand-pale); color:var(--brand)}
.nav > ul > li.is-current > a{color:var(--brand); font-weight:600}
.nav > ul > li.is-current > a::after{
  content:""; display:block; height:2px; background:var(--accent); border-radius:2px; margin-top:5px;
}
.nav .has-children > a::after{content:" ▾"; font-size:10px; opacity:.55}
.nav .submenu{
  position:absolute; top:100%; left:0; min-width:230px; padding:8px; margin:0; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:.18s ease;
}
.nav li:hover > .submenu, .nav li:focus-within > .submenu{opacity:1; visibility:visible; transform:none}
.nav .submenu a{display:block; padding:9px 12px; border-radius:6px; font-size:14px; color:var(--body)}
.nav .submenu a:hover{background:var(--brand-pale); color:var(--brand)}

.header-tools{display:flex; align-items:center; gap:8px; flex:none}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--line); background:#fff; border-radius:9px; color:var(--ink);
  cursor:pointer; transition:.18s ease;
}
.icon-btn:hover{background:var(--brand-pale); border-color:var(--brand-pale); color:var(--brand)}
.nav-toggle{display:none}

.search-drop{
  display:none; border-top:1px solid var(--line); background:var(--bg-soft); padding:16px 0;
}
.search-drop.is-open{display:block}
.search-drop form{display:flex; gap:10px; max-width:640px; margin:0 auto}
.search-drop input{
  flex:1; padding:12px 16px; border:1px solid var(--line); border-radius:9px;
  font:inherit; font-size:15px; background:#fff;
}

/* mobile nav panel */
@media (max-width:1040px){
  .nav-toggle{display:inline-flex}

  /* backdrop-filter (like transform and filter) turns .site-header into a
     containing block for position:fixed descendants. That traps the nav
     drawer inside the header's box, so it renders as a short panel and its
     overflow-y:auto hides every menu item after the first. The header is
     already 96% opaque, so dropping the blur on phones costs nothing. */
  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff}

  .nav{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(360px,86vw); background:#fff; z-index:300;
    height:100vh; height:100dvh; max-height:100vh; max-height:100dvh;
    transform:translateX(102%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow-lg); overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; padding:80px 20px 40px;
  }
  .nav.is-open{transform:none}
  .nav > ul{flex-direction:column; align-items:stretch; gap:2px}
  .nav > ul > li > a{padding:13px 14px; font-size:15.5px}
  .nav .submenu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--brand-pale); border-radius:0; margin:2px 0 6px 14px; padding:0 0 0 8px;
  }
  .nav-close{position:absolute; top:20px; right:20px}

  /* .site-header is sticky with z-index:200, so it forms its own stacking
     context and the drawer's z-index:300 only counts *inside* it. The
     backdrop is a sibling of the header at z-index:290, so 290 beat the
     header's 200 and the backdrop painted over the drawer - dimming it and
     swallowing every tap. Lifting the header above the backdrop takes the
     drawer with it. */
  .site-header{z-index:400}
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(15,35,64,.45); z-index:290; opacity:0;
    visibility:hidden; transition:.25s;
  }
  .nav-backdrop.is-open{opacity:1; visibility:visible}
}
@media (min-width:1041px){ .nav-close, .nav-backdrop{display:none} }

/* ---------------------------------------------------------------- hero */
.hero{position:relative; background:var(--bg-deep); overflow:hidden}
.hero-slides{position:relative; height:clamp(380px,58vh,620px)}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease}
.hero-slide.is-active{opacity:1; z-index:2}
.hero-slide img{width:100%; height:100%; object-fit:cover; display:block}
.hero-slide::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(11,26,48,.86) 0%, rgba(11,26,48,.62) 45%, rgba(11,26,48,.28) 100%);
}
.hero-content{
  position:absolute; inset:0; display:flex; align-items:center; z-index:3;
}
.hero-content .wrap{width:100%}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px; color:var(--accent);
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin-bottom:14px;
}
.hero-eyebrow::before{content:""; width:32px; height:1px; background:var(--accent)}
.hero h1{
  color:#fff; font-size:clamp(2rem,4.6vw,3.4rem); max-width:16ch; margin-bottom:.45em;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.hero p{color:#d6e2f2; font-size:clamp(1rem,1.5vw,1.15rem); max-width:52ch; margin-bottom:2rem}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-dots{
  position:absolute; bottom:26px; left:0; right:0; z-index:3;
  display:flex; gap:8px; justify-content:center;
}
.hero-dots button{
  width:30px; height:4px; border:0; border-radius:3px; background:rgba(255,255,255,.35);
  cursor:pointer; padding:0; transition:.25s;
}
.hero-dots button.is-active{background:var(--accent); width:44px}

/* ---------------------------------------------------------- announcements */
.ticker{
  background:var(--brand-pale); border-bottom:1px solid var(--line);
  border-top:1px solid var(--line); overflow:hidden;
}
.ticker-inner{display:flex; align-items:center; gap:16px; min-height:52px}
.ticker-label{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-dark);
}
.ticker-label svg{width:16px; height:16px; color:var(--accent)}
.ticker-viewport{flex:1; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker-track{display:flex; width:max-content; animation:ticker var(--ticker-duration,40s) linear infinite}
.ticker-run{display:flex; align-items:center}
.ticker-item{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:0 26px; font-size:15px; color:var(--ink); position:relative;
}
.ticker-item::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.6;
}
.ticker-item a{font-weight:600; color:var(--brand); text-decoration:underline;
  text-underline-offset:3px; white-space:nowrap}
.ticker-item a:hover{color:var(--brand-light)}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.is-paused .ticker-track{animation-play-state:paused}
.ticker-pause{
  flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--brand); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; transition:.18s;
}
.ticker-pause svg{width:13px; height:13px}
.ticker-pause:hover{border-color:var(--brand-light)}
.ticker.is-paused .ticker-pause{background:var(--brand); color:#fff; border-color:var(--brand)}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (max-width:640px){
  .ticker-label span, .ticker-label{font-size:0; gap:0}
  .ticker-label svg{width:18px; height:18px; font-size:initial}
  .ticker-inner{gap:10px; min-height:46px}
  .ticker-item{font-size:14px; padding:0 18px}
}
/* Never scroll text for people who have asked for less motion */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none; width:100%}
  .ticker-run:nth-child(2){display:none}
  .ticker-viewport{overflow-x:auto; -webkit-mask-image:none}
  .ticker-pause{display:none}
}

/* ---------------------------------------------------------------- page head */
.page-head{
  position:relative; background:var(--bg-deep); color:#fff; padding:56px 0 48px; overflow:hidden;
}
.page-head.has-image::before{
  content:""; position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:var(--head-img); opacity:.30;
}
.page-head::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,35,64,.72), rgba(15,35,64,.92));
}
.page-head .wrap{position:relative; z-index:2}
.page-head h1{color:#fff; margin-bottom:.25em}
.page-head p.lead{color:#b9cbe4; font-size:1.05rem; margin:0; max-width:62ch}
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; list-style:none; margin:0 0 14px;
  padding:0; font-size:13px; color:#8fa9c9;
}
.breadcrumb a{color:#b9cbe4}
.breadcrumb a:hover{color:#fff}
.breadcrumb li+li::before{content:"/"; margin-right:8px; opacity:.5}

/* ---------------------------------------------------------------- sections */
.section{padding:clamp(48px,7vw,84px) 0}
.section-soft{background:var(--bg-soft)}
.section-deep{background:var(--bg-deep); color:#c9d8ec}
.section-deep h2,.section-deep h3{color:#fff}

.section-head{max-width:720px; margin:0 0 40px}
.section-head.center{margin-inline:auto; text-align:center}
.eyebrow{
  display:inline-block; color:var(--accent); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; margin-bottom:10px;
}
.section-head p{color:var(--muted); font-size:1.03rem; margin:0}
.rule{width:56px; height:3px; background:var(--accent); border-radius:3px; margin:16px 0 0}
.section-head.center .rule{margin-inline:auto}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:9px;
  font:600 14.5px/1 var(--sans); border:1px solid transparent; cursor:pointer;
  transition:.2s ease; white-space:nowrap;
}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 2px 10px rgba(31,78,140,.28)}
.btn-primary:hover{background:var(--brand-light); color:#fff; transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(31,78,140,.32)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.14); color:#fff; border-color:#fff}
.btn-outline{background:#fff; color:var(--brand); border-color:var(--line)}
.btn-outline:hover{border-color:var(--brand); background:var(--brand-pale)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:#a2761f; color:#fff}
.btn-sm{padding:9px 16px; font-size:13.5px}
.btn-block{width:100%; justify-content:center}

.link-more{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px}
.link-more::after{content:"→"; transition:transform .2s}
.link-more:hover::after{transform:translateX(4px)}

/* ---------------------------------------------------------------- grid */
.grid{display:grid; gap:26px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} }

.layout{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:44px; align-items:start}

/* Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content's min-content width. The image slider is a flex row of
   N full-width figures, so its min-content width is N screens wide - without
   this the column is blown out and the whole page scrolls sideways on
   phones. The desktop track above already guards against it with minmax(0,..);
   the mobile override must do the same. */
.layout > *{min-width:0}
@media(max-width:980px){ .layout{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------------------- cards */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.card-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--brand-pale)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{padding:22px; flex:1; display:flex; flex-direction:column}
.card-body h3{font-size:1.14rem; margin-bottom:.5em; line-height:1.35}
.card-body h3 a{color:var(--ink)}
.card-body h3 a:hover{color:var(--brand)}
.card-body p{font-size:14.8px; color:var(--body); margin-bottom:1em}
.card-foot{margin-top:auto; padding-top:6px}
.card-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12.5px;
  color:var(--muted); margin-bottom:10px;
}
.chip{
  display:inline-block; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; background:var(--brand-pale); color:var(--brand);
}
.chip-accent{background:var(--accent-pale); color:#8c6516}
.card-media .chip{position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94); backdrop-filter:blur(4px)}

/* feature card (home) */
.feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:.25s ease;
}
.feature:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
.feature img{width:100%; aspect-ratio:16/10; object-fit:cover}
.feature-body{padding:24px}
.feature-body h3{font-size:1.22rem}
.feature-body p{font-size:14.8px}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12);
  border-radius:var(--radius); overflow:hidden}
.stat{background:var(--bg-deep); padding:28px 20px; text-align:center}
.stat b{display:block; font-family:var(--serif); font-size:2.1rem; color:#fff; line-height:1}
.stat span{display:block; margin-top:8px; font-size:12.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#8fb0d8}
@media(max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* community list */
.region-block + .region-block{margin-top:44px}
.region-title{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.region-title h2{margin:0; font-size:1.4rem}
.region-title span{flex:1; height:1px; background:var(--line)}
.region-title b{font-size:13px; color:var(--muted); font-weight:600}
.tile-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.tile{
  display:flex; align-items:center; gap:14px; padding:12px 14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-sm); transition:.2s ease;
}
.tile:hover{border-color:var(--brand-light); box-shadow:var(--shadow-sm); transform:translateX(3px)}
.tile img{width:52px; height:52px; border-radius:8px; object-fit:cover; flex:none; background:var(--brand-pale)}
.tile-text{min-width:0}
.tile-text b{display:block; font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.35}
.tile-text small{color:var(--muted); font-size:12.5px}

/* gallery grid */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.photo{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--brand-pale); cursor:zoom-in; border:0; padding:0;
}
.photo img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.photo:hover img{transform:scale(1.07)}
.photo::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,35,64,.5),transparent 55%);
  opacity:0; transition:.25s;
}
.photo:hover::after{opacity:1}
.photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px; color:#fff; font-size:13px;
  z-index:2; opacity:0; transform:translateY(6px); transition:.25s;
}
.photo:hover figcaption{opacity:1; transform:none}

/* captioned photo block inside a page (About us, etc.)
   Photos keep their own proportions. Each one is set in the CMS to fill its
   row on its own, or to share it with one or two others. */
.photo-figs{margin:2.4rem 0}
.photo-figs.is-top{margin-top:0; margin-bottom:2.6rem}
.photo-figs-head{font-size:20px; font-weight:600; color:var(--ink); margin:0 0 1rem}
/* six columns, so a photo can take the whole row (6), half of it (3)
   or a third (2) — chosen per photo in the admin */
.photo-figs-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:26px 22px; align-items:start}
.photo-fig{margin:0; min-width:0; grid-column:span 3}
.photo-fig.is-half{grid-column:span 3}
.photo-fig.is-third{grid-column:span 2}
.photo-fig.is-full,
.photo-fig.is-wide{grid-column:1 / -1}
/* on a narrow screen three to a row would be too small — fall back to two */
@media (max-width:860px){ .photo-fig.is-third{grid-column:span 3} }
.photo-fig img{
  display:block; width:100%; height:auto; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--brand-pale); cursor:zoom-in;
  transition:box-shadow .25s ease;
}
.photo-fig img:hover{box-shadow:var(--shadow-sm)}
.photo-fig figcaption{
  margin-top:11px; text-align:center; font-weight:600; font-size:15px;
  color:var(--ink); line-height:1.45;
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:900; background:rgba(8,18,34,.94);
  display:none; align-items:center; justify-content:center; padding:60px 20px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-btn{
  position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; width:46px; height:46px;
  border-radius:50%; font-size:22px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:.2s;
}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-close{top:20px; right:20px}
.lb-prev{left:20px; top:50%; transform:translateY(-50%)}
.lb-next{right:20px; top:50%; transform:translateY(-50%)}
.lb-caption{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#cfe0f5;
  font-size:14px; padding:0 60px}

/* slider (article / community image carousel) */
.slider{position:relative; border-radius:var(--radius); overflow:hidden; background:#0f2340}
.slider-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slider-track > figure{flex:0 0 100%; margin:0; position:relative}
.slider-track img{width:100%; aspect-ratio:16/9; object-fit:cover; cursor:zoom-in}
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.9); color:var(--ink); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); transition:.2s;
}
.slider-nav:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.slider-prev{left:14px} .slider-next{right:14px}
.slider-count{
  position:absolute; right:14px; bottom:14px; background:rgba(15,35,64,.75); color:#fff;
  font-size:12.5px; padding:5px 11px; border-radius:20px;
}
.slider-thumbs{display:flex; gap:8px; overflow-x:auto; padding:10px 2px 2px; scrollbar-width:thin}
.slider-thumbs button{
  flex:none; width:78px; height:56px; padding:0; border:2px solid transparent; border-radius:7px;
  overflow:hidden; cursor:pointer; background:none; opacity:.6; transition:.2s;
}
.slider-thumbs button.is-active{border-color:var(--brand); opacity:1}
.slider-thumbs img{width:100%; height:100%; object-fit:cover}

/* ---------------------------------------------------------------- prose */
.prose{font-size:16.8px; line-height:1.85; color:var(--body); max-width:76ch;
  overflow-wrap:break-word}
.prose.full{max-width:none}
.prose h2{margin-top:1.9em; font-size:1.55rem}
.prose h3{margin-top:1.7em; font-size:1.28rem; color:var(--brand-dark)}
.prose h4{margin-top:1.5em; color:var(--brand-dark)}
.prose > :first-child{margin-top:0}
.prose img{
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); margin:1.6em auto;
}
.prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:rgba(31,78,140,.35)}
.prose a:hover{text-decoration-color:var(--brand-light)}
.prose blockquote{
  margin:1.8em 0; padding:6px 0 6px 24px; border-left:3px solid var(--accent);
  font-family:var(--serif); font-style:italic; font-size:1.12em; color:var(--ink);
}
.prose .content-table{
  width:100%; max-width:100%; margin:1.8em 0; font-size:15.3px; border-collapse:collapse;
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
}
.prose .content-table td,.prose .content-table th{
  padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left;
  line-height:1.55;
}
.prose .content-table td + td,.prose .content-table th + th{border-left:1px solid var(--line)}
.prose .content-table tr:last-child td{border-bottom:0}
.prose .content-table th{
  background:var(--brand-pale); color:var(--brand-dark); font-weight:600;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.prose .content-table tbody tr:nth-child(even) td,
.prose .content-table tr:nth-child(even) td{background:var(--bg-soft)}
.prose .content-table a{text-decoration:none; font-weight:500}
.prose .content-table a:hover{text-decoration:underline}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:1.35em}
.prose li{margin-bottom:.45em}
.prose hr{margin:2em 0}
/* legacy decorative rules imported from the old site */
.prose img[src*="line2.png"], .prose img[src*="line3.png"], .prose img[src*="line.png"]{
  display:block; margin:1.4em auto; opacity:.55; max-width:220px; box-shadow:none;
}

/* ---------------------------------------------------------------- sidebar */
.side{display:flex; flex-direction:column; gap:22px; position:sticky; top:calc(var(--header-h) + 20px)}
@media(max-width:980px){ .side{position:static} }
.side-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.side-box.soft{background:var(--bg-soft)}
.side-box h3{font-size:1.05rem; margin-bottom:1em; padding-bottom:.7em; border-bottom:1px solid var(--line)}
.side-list{list-style:none; margin:0; padding:0}
.side-list li + li{border-top:1px solid var(--line)}
.side-list a{display:flex; justify-content:space-between; gap:12px; padding:10px 0;
  font-size:14.5px; color:var(--body)}
.side-list a:hover{color:var(--brand)}
.side-list small{color:var(--muted); font-size:12.5px; flex:none}
.side-news{list-style:none; margin:0; padding:0}
.side-news li{display:flex; gap:12px; padding:12px 0}
.side-news li + li{border-top:1px solid var(--line)}
.side-news img{width:66px; height:52px; object-fit:cover; border-radius:7px; flex:none}
.side-news b{display:block; font-size:13.8px; font-weight:600; line-height:1.4; color:var(--ink)}
.side-news a:hover b{color:var(--brand)}
.side-news small{color:var(--muted); font-size:12px}

.contact-lines{font-size:14.7px; line-height:1.75}
.contact-lines b{display:block; color:var(--brand); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; margin:14px 0 3px}
.contact-lines > :first-child{margin-top:0}

/* ---------------------------------------------------------------- forms */
.form-row{margin-bottom:16px}
.form-row label{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px}
.form-row .req{color:#c0392b}
.input, .form-row input, .form-row textarea, .form-row select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:9px;
  font:inherit; font-size:15px; background:#fff; color:var(--ink); transition:.18s ease;
}
.form-row textarea{min-height:140px; resize:vertical}
.input:focus, .form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none; border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(47,111,196,.14);
}
.hp{position:absolute!important; left:-9999px!important}
.alert{padding:14px 18px; border-radius:9px; font-size:14.5px; margin-bottom:20px; border:1px solid}
.alert-success{background:#eefaf1; border-color:#bfe6cb; color:#1c6b38}
.alert-error{background:#fdeeee; border-color:#f3c6c6; color:#a02b2b}
.alert ul{margin:6px 0 0; padding-left:18px}

/* form block embedded at the foot of a page */
.form-block{
  margin-top:3rem; padding:30px 32px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--radius);
}
.form-block h3{margin-bottom:.3em}
.form-block-note{color:var(--muted); font-size:15px; margin-bottom:1.6em}
@media (max-width:640px){ .form-block{padding:22px 18px; margin-top:2.2rem} }

/* ---------------------------------------------------------------- pagination */
.pagination{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:44px}
.pagination .page{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 14px; border:1px solid var(--line); border-radius:9px; font-size:14.5px;
  font-weight:500; color:var(--body); background:#fff; transition:.18s;
}
.pagination .page:hover{border-color:var(--brand-light); color:var(--brand)}
.pagination .page.is-active{background:var(--brand); border-color:var(--brand); color:#fff}
.page-gap{display:inline-flex; align-items:center; padding:0 6px; color:var(--muted)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--bg-deep); color:#a9bfda; font-size:14.7px; margin-top:0}
.footer-main{padding:60px 0 44px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px}
@media(max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr} }
.site-footer h4{color:#fff; font-size:14px; letter-spacing:.13em; text-transform:uppercase;
  font-family:var(--sans); font-weight:600; margin-bottom:18px}
.site-footer a{color:#a9bfda}
.site-footer a:hover{color:#fff}
.footer-brand{display:flex; align-items:center; gap:13px; margin-bottom:18px}
.footer-brand img{width:52px; height:52px; object-fit:contain; border-radius:9px; background:#fff; padding:4px}
.footer-brand b{color:#fff; font-family:var(--serif); font-size:17px; display:block}
.footer-brand small{color:#7e97b8; font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.footer-links{list-style:none; margin:0; padding:0}
.footer-links li{margin-bottom:10px}
.footer-contact p{margin:0 0 12px; line-height:1.65}
.footer-contact b{display:block; color:#7e97b8; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:2px}
.social{display:flex; gap:10px; margin-top:18px}
.social a{
  width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.social a:hover{background:var(--brand-light); color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.09); padding:20px 0; font-size:13.5px; color:#7e97b8;
}
.footer-bottom .wrap{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center}

.to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--brand); color:#fff; border:0; cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:.25s; z-index:150;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--brand-light)}

/* ---------------------------------------------------------------- misc */
.empty{
  text-align:center; padding:60px 20px; color:var(--muted); background:var(--bg-soft);
  border-radius:var(--radius); border:1px dashed var(--line);
}
.quote-band{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand)); color:#fff; text-align:center;
  padding:clamp(48px,7vw,76px) 0;
}
.quote-band blockquote{
  margin:0 auto; max-width:820px; font-family:var(--serif); font-size:clamp(1.25rem,2.6vw,1.85rem);
  line-height:1.5; font-style:italic;
}
.quote-band cite{display:block; margin-top:18px; font-style:normal; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:#bcd3ee}

.pubs{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.pub{
  display:flex; gap:16px; padding:18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); transition:.2s;
}
.pub:hover{box-shadow:var(--shadow-sm); border-color:var(--brand-light)}
.pub-ico{
  width:48px; height:58px; flex:none; border-radius:6px; background:var(--accent-pale);
  color:#8c6516; display:flex; align-items:center; justify-content:center; font-size:11px;
  font-weight:700; letter-spacing:.05em;
}
.pub b{display:block; font-size:14.8px; color:var(--ink); line-height:1.4; margin-bottom:6px}

.search-result{padding:20px 0; border-bottom:1px solid var(--line); display:flex; gap:18px}
.search-result img{width:110px; height:78px; object-fit:cover; border-radius:8px; flex:none}
.search-result h3{font-size:1.1rem; margin-bottom:.35em}
.search-result p{font-size:14.5px; margin:0; color:var(--muted)}

.article-nav{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px}
@media(max-width:620px){ .article-nav{grid-template-columns:1fr} }
.article-nav a{
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:.2s;
}
.article-nav a:hover{border-color:var(--brand-light); box-shadow:var(--shadow-sm)}
.article-nav small{display:block; color:var(--muted); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:6px}
.article-nav b{color:var(--ink); font-size:14.8px; font-weight:600; line-height:1.45}
.article-nav .nx{text-align:right}

.share{display:flex; align-items:center; gap:10px; margin-top:34px; padding-top:24px;
  border-top:1px solid var(--line); font-size:14px; color:var(--muted)}
.share a{width:36px; height:36px; border-radius:8px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--body)}
.share a:hover{background:var(--brand-pale); border-color:var(--brand-pale); color:var(--brand)}

@media print{
  .topbar,.site-header,.site-footer,.to-top,.share,.article-nav,.side{display:none!important}
  body{font-size:12pt}
  .page-head{background:none; color:#000; padding:0 0 12pt}
  .page-head h1{color:#000}
  .page-head::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(18px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

/* =====================================================================
   Mobile / small screens
   ===================================================================== */

/* Nothing may push the page sideways */
html,body{max-width:100%}
img,video,iframe,table,pre{max-width:100%}
.prose,.card-body,.side-box,.tile-text,.search-result{overflow-wrap:break-word; word-break:break-word}
.prose a{overflow-wrap:anywhere}

.prose iframe{width:100%}

/* ---------------------------------------------------------------------
   Rich blocks inside imported page content
   --------------------------------------------------------------------- */

/* A run of photographs that belonged to one section of the page */
.prose .photo-row{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px; margin:1.9em 0;
}
.prose .photo-row img{
  width:100%; aspect-ratio:4/3; object-fit:cover; margin:0;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); cursor:zoom-in;
  transition:transform .3s ease, box-shadow .3s ease;
}
.prose .photo-row img:hover{transform:translateY(-3px); box-shadow:var(--shadow)}

/* In-page section navigation (the country list on SJT Worldwide) */
.prose ul#yatay-menu{
  list-style:none; display:flex; flex-wrap:wrap; gap:9px;
  padding:0; margin:2em 0 2.4em;
}
.prose ul#yatay-menu li{margin:0}
.prose ul#yatay-menu a{
  display:inline-block; padding:9px 18px; border-radius:999px;
  font-size:14.5px; font-weight:500; text-decoration:none;
  background:var(--brand-pale); color:var(--brand-dark);
  border:1px solid transparent; transition:.18s ease;
}
.prose ul#yatay-menu a:hover{
  background:var(--brand); color:#fff; transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(31,78,140,.25);
}

/* Anchored sections keep clear of the sticky header when jumped to */
.prose [id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.prose div[id^="sec"]{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 28px; margin:1.8em 0;
}
.prose div[id^="sec"] h3:first-of-type{
  margin-top:0; display:inline-block;
  padding-bottom:.35em; border-bottom:2px solid var(--accent);
}
/* the repeated "Gallery" headings read better as quiet labels */
.prose div[id^="sec"] h3:not(:first-of-type){
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  margin:2em 0 .2em;
}
.prose div[id^="sec"] > br:first-child{display:none}

@media (max-width:640px){
  .prose div[id^="sec"]{padding:18px 16px; border-radius:var(--radius-sm)}
  .prose .photo-row{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px}
  .prose ul#yatay-menu{gap:7px; margin:1.5em 0 1.8em}
  .prose ul#yatay-menu a{padding:8px 14px; font-size:13.5px}
}

/* Legacy content tables: full width on desktop, scrollable on small screens */
@media (max-width:860px){
  .prose .content-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .prose .content-table td,.prose .content-table th{min-width:130px}
}

/* The old site used tables for page layout as well as for data. A table with
   no <th> is a layout table - on the About page it puts a photograph beside a
   block of names. Scrolling those sideways on a phone is wrong; they should
   stack. Tables that do have <th> are genuine data and keep the scroll.
   Browsers without :has() simply keep the scrolling behaviour above. */
@media (max-width:640px){
  .prose .content-table:not(:has(th)){display:block; overflow-x:visible}
  .prose .content-table:not(:has(th)) tbody,
  .prose .content-table:not(:has(th)) tr,
  .prose .content-table:not(:has(th)) td{
    display:block; width:100%; min-width:0;
  }
  .prose .content-table:not(:has(th)) td,
  .prose .content-table:not(:has(th)) td + td{border-left:0}
  .prose .content-table:not(:has(th)) td:empty{display:none}
  .prose .content-table:not(:has(th)) img{width:100%; height:auto; margin:0 0 .6em}
}

@media (max-width:1040px){
  .layout{gap:32px}
}

/* ---------------------------------------------------------------------
   Hero on small screens
   A wide background photo cropped to a short banner loses most of a group
   photograph. Below 760px the picture is shown at its own proportions with
   the wording underneath it instead of on top of it.
   --------------------------------------------------------------------- */
@media (max-width:760px){
  .hero{display:flex; flex-direction:column; background:var(--bg-deep)}

  /* The picture sets its own height, so the whole photograph is shown with
     no cropping and no empty bands, whatever shape it happens to be.
     Only the visible slide takes part in the layout; the others sit on top
     of it, ready to fade in. */
  .hero-slides{position:relative; height:auto; width:100%}
  .hero-slide.is-active{position:relative; inset:auto; display:block}
  .hero-slide img{height:auto; object-fit:contain}
  .hero-slide::after{display:none}

  .hero-content{position:static; display:block; padding:24px 0 6px}
  .hero-eyebrow{margin-bottom:10px}
  .hero h1{
    max-width:none; text-shadow:none;
    font-size:clamp(1.65rem, 6.6vw, 2.3rem);
  }
  .hero p{max-width:none; margin-bottom:1.4rem}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 auto; justify-content:center; min-width:145px}

  .hero-dots{position:static; padding:4px 0 22px}
  .hero-dots button{width:22px}
  .hero-dots button.is-active{width:34px}
}

@media (max-width:520px){
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
}

/* ---------------------------------------------------------- tablet */
@media (max-width:860px){
  .topbar-motto{display:none}
  .topbar .wrap{justify-content:center}
  .topbar-contact{gap:16px; justify-content:center}

  .hero p{margin-bottom:1.4rem}

  .page-head{padding:40px 0 34px}
  .section{padding:44px 0}
  .section-head{margin-bottom:30px}

  .footer-main{padding:44px 0 32px}
}

/* ---------------------------------------------------------- phone */
@media (max-width:640px){
  :root{ --header-h:64px }

  .wrap{padding:0 18px}

  /* top contact bar */
  .topbar{font-size:12.5px}
  .topbar .wrap{padding:0 14px}
  .topbar-contact{gap:14px; row-gap:2px; padding:7px 0}
  .topbar .ico{width:13px; height:13px}

  /* header */
  .header-inner{gap:12px; min-height:var(--header-h)}
  .brand{gap:10px}
  .brand img{width:40px; height:40px}
  .brand-name{font-size:14px; line-height:1.2}
  .brand-sub{font-size:9.5px; letter-spacing:.09em}
  .icon-btn{width:38px; height:38px}
  .search-drop form{flex-direction:column}
  .search-drop .btn{width:100%; justify-content:center}

  .hero p{font-size:.98rem}

  /* sections */
  .section{padding:38px 0}
  .page-head{padding:32px 0 28px}
  .page-head p.lead{font-size:.97rem}
  .breadcrumb{font-size:12px}
  .quote-band{padding:44px 0}

  /* cards and grids */
  .grid{gap:18px}
  .card-body{padding:18px}
  .tile-list{grid-template-columns:1fr; gap:10px}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
  .photo-figs-grid{grid-template-columns:1fr; gap:20px}
  .photo-fig, .photo-fig.is-half, .photo-fig.is-third, .photo-fig.is-full{grid-column:1 / -1}
  .photo-fig figcaption{font-size:14px; margin-top:9px}
  .pubs{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:20px 12px}
  .stat b{font-size:1.6rem}
  .stat span{font-size:11px; letter-spacing:.09em}

  /* prose */
  .prose{font-size:16px; line-height:1.75}
  .prose blockquote{padding-left:16px}
  .prose img{margin:1.2em auto}

  /* sliders */
  .slider-nav{width:38px; height:38px; font-size:17px}
  .slider-prev{left:8px} .slider-next{right:8px}
  .slider-thumbs button{width:62px; height:46px}
  /* show the whole photograph rather than a crop of it */
  .slider-track img{aspect-ratio:4/3; object-fit:contain; background:var(--bg-deep)}

  /* sidebar boxes */
  .side{gap:16px}
  .side-box{padding:18px}

  /* search results stack */
  .search-result{flex-direction:column; gap:12px}
  .search-result img{width:100%; height:170px}

  /* forms */
  .form-row input,.form-row textarea,.form-row select,.input{font-size:16px} /* stops iOS zoom */
  .btn{padding:12px 20px}
  .btn-sm{padding:10px 16px}

  /* pagination — bigger touch targets */
  .pagination{gap:5px; margin-top:34px}
  .pagination .page{min-width:40px; height:40px; padding:0 11px; font-size:14px}
  .page-prev,.page-next{flex:1 1 100%; order:-1}
  .page-next{order:1}

  /* lightbox */
  .lightbox{padding:56px 10px}
  .lb-btn{width:40px; height:40px; font-size:19px}
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-caption{bottom:14px; padding:0 20px; font-size:13px}

  /* footer */
  .footer-main{padding:38px 0 28px}
  .footer-grid{gap:28px}
  .footer-bottom{padding:16px 0; font-size:12.5px}
  .footer-bottom .wrap{flex-direction:column; gap:6px; text-align:center}

  .to-top{right:14px; bottom:14px; width:42px; height:42px}
  .article-nav{margin-top:34px}
  .share{flex-wrap:wrap}
}

/* ---------------------------------------------------------- small phone */
@media (max-width:400px){
  .wrap{padding:0 14px}
  .brand-sub{display:none}
  .brand-name{font-size:13.5px}
  .topbar-contact{flex-direction:column; gap:3px}
  .hero-actions .btn{width:100%}
  .photo-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr}
}

/* Devices that cannot hover: reveal animations must not hide content */
@media (hover:none){
  .card:hover{transform:none}
  .photo figcaption{opacity:1; transform:none}
  .photo::after{opacity:1}
}

/* Respect the notch / safe areas on iPhone */
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right));
  }
  @media (min-width:641px){
    .wrap{padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right))}
  }
  .to-top{bottom:max(14px, env(safe-area-inset-bottom))}
}

/* --------------------------------------------------------- home: our history
   The opening paragraph is always on show; the rest opens in place when the
   visitor presses the button. Without JavaScript the whole history is shown. */
.history{
  max-width:920px; margin:0 auto; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:clamp(24px,4vw,46px);
}
.history .prose{max-width:none}
.history-intro{font-size:1.06rem; color:var(--ink)}
.history-intro p:last-child{margin-bottom:0}

.history-more{display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s ease}
.history-more-inner{overflow:hidden; min-height:0}
.history.is-collapsed .history-more{grid-template-rows:0fr}
.history.is-collapsed .history-more-inner{visibility:hidden; transition:visibility 0s linear .5s}

.history-body{padding-top:1.5em; margin-top:1.5em; border-top:1px solid var(--line)}
.history-body h3{
  margin-top:1.8em; font-size:1.3rem; color:var(--brand-dark);
  padding-left:14px; border-left:3px solid var(--accent);
}
.history-body h4{margin-top:1.6em; font-size:1.08rem; color:var(--brand-dark)}
.history-body > :first-child{margin-top:0}

.history-body ul.milestones{
  list-style:none; padding:0; margin:1.6em 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;
}
.history-body .milestones li{
  display:flex; align-items:baseline; gap:12px; padding:13px 17px;
  background:var(--brand-pale); border-radius:var(--radius-sm); line-height:1.45;
}
.history-body .milestones b{
  font-family:var(--serif); font-size:1.15rem; color:var(--brand-dark); flex:none;
}
.history-body .milestones span{font-size:.95rem; color:var(--body)}

.history-actions{margin-top:26px; text-align:center}
.history-toggle{background:#fff}
.history-chev{transition:transform .3s ease; flex:none}
.history-toggle .history-toggle-label.is-open{display:none}
.history:not(.is-collapsed) .history-toggle .history-toggle-label{display:none}
.history:not(.is-collapsed) .history-toggle .history-toggle-label.is-open{display:inline}
.history:not(.is-collapsed) .history-chev{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .history-more{transition:none}
  .history-chev{transition:none}
}

/* =====================================================================
   Laptop and desktop  (1041px and up)

   Ten top-level menu items plus the full house name need about 1366px of
   header, but the centred container is 1200px wide. Nothing handled the
   difference, so the bar simply ran off the right-hand edge at every
   desktop size: on a 1280x720 laptop "Contact" vanished, "Publications"
   was cut in half, the search button was pushed off the screen and the
   whole page scrolled sideways.

   Two things fix it together:
     1. the rules below tighten the header so the items fit, and
     2. main.js measures the bar and folds anything that still will not
        fit into a "More" menu - so it can never overflow again, however
        many items are added under Menu in the admin.
   ===================================================================== */

/* The bar itself is set a little closer at every desktop size. Keeping one
   set of measurements across the whole range matters: when the spacing
   changed at a breakpoint, a 1440px screen ended up showing FEWER menu
   items than a 1366px one, because the roomier type ate the space the
   extra pixels had just bought. */
@media (min-width:1041px){
  /* The brand may give up space; it must never force the bar wider than
     the container. Flex items refuse to shrink below their own content
     unless min-width is cleared. */
  .brand{flex:0 1 auto; min-width:0}
  .brand-text{min-width:0}
  .nav{min-width:0}

  .header-inner{gap:18px}
  .header-tools{gap:6px}
  .nav > ul{gap:0; flex-wrap:nowrap}
  /* the type stays at a readable 14px; the saving comes out of the
     padding, which is only whitespace */
  .nav > ul > li > a{padding:9px 7px; font-size:14px}
}

/* Below 1500px the container is still 1200px, so the brand gives up the
   difference: a smaller mark, and the house name over two short lines
   rather than one long one. That alone returns about 90px to the menu. */
@media (min-width:1041px) and (max-width:1499px){
  .header-inner{gap:14px}
  .brand{gap:11px}
  .brand img{width:44px; height:44px}
  .brand-text{max-width:194px}
  .brand-name{font-size:14.5px; line-height:1.2}
  .brand-sub{font-size:10.5px; letter-spacing:.08em}
}

/* On a large monitor the 1200px column left very wide empty margins.
   Whatever width is chosen under Settings -> Appearance, give it a little
   more room here rather than overriding the choice outright. The wider
   container is also what lets the full-size brand back in above. */
@media (min-width:1500px){
  .wrap:not(.wrap-narrow){max-width:calc(var(--wrap) + 120px)}
}

/* ---------------------------------------------------------------- "More" menu
   Built by main.js only when the bar cannot hold every item. Items moved
   into it keep their own sub-menus, shown as an indented list rather than
   as a second floating panel. */
.nav-more{display:none}
.nav-more.is-shown{display:block}
.nav-more > a{cursor:default}
.nav-more > a::after{content:" \25BE"; font-size:10px; opacity:.55}
.nav-more.is-current > a{color:var(--brand); font-weight:600}
.nav-more > .submenu{left:auto; right:0; max-height:min(72vh, 620px); overflow-y:auto}
/* a nested sub-menu becomes an indented block inside the panel */
.nav-more .submenu .submenu{
  position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
  border:0; border-left:2px solid var(--brand-pale); border-radius:0;
  min-width:0; margin:2px 0 6px 12px; padding:0 0 0 8px;
}
.nav-more .submenu .submenu a{font-size:13.5px; color:var(--muted)}
.nav-more .submenu .has-children > a::after{content:none}
.nav-more .submenu .has-children > a{font-weight:600; color:var(--ink)}
/* the drawer shows every item, so the More grouping is dismantled there */
@media (max-width:1040px){ .nav-more{display:none !important} }

/* ------------------------------------------------------- mid-range grids
   Between the two-column breakpoint and a full-width desktop these were
   still splitting into columns too narrow to read. */

/* four feature cards across a 1024px screen left each one about 220px wide */
@media (min-width:981px) and (max-width:1140px){
  .grid.g-4{grid-template-columns:repeat(3,1fr)}
}

/* three captioned photographs in the article column shrank to about 185px */
@media (min-width:861px) and (max-width:1100px){
  .photo-fig.is-third{grid-column:span 3}
}

/* --------------------------------------------------------- very narrow phones
   At 320-340px (an iPhone SE and the smaller Androids) the brand could not
   shrink - .brand is flex:none - so the logo and house name together pushed
   the menu button past the right-hand edge and the page scrolled sideways.
   Letting the brand give ground puts the name on two short lines instead. */
@media (max-width:360px){
  .brand{flex:0 1 auto; min-width:0}
  .brand-text{min-width:0}
  .brand-name{font-size:13px; line-height:1.2}
}

/* =====================================================================
   Bangalore Province — page banner and framed photographs

   These two blocks carry most of the page's character, so they are where
   the Province's own look is set rather than the one shared with the
   other provinces' sites. The motif is a pair of corner brackets: deep
   blue at the top left, gold at the bottom right. It is drawn in CSS, so
   it is exact on every photograph, sharp on a retina screen, and nobody
   has to rebuild it by hand in Photoshop for each new portrait.
   ===================================================================== */

/* ---------------------------------------------------------- page banner */
.page-head{padding:64px 0 58px}
/* the photograph was buried under an almost opaque wash - it now reads as
   a picture while the wording stays comfortably legible over it */
.page-head.has-image::before{opacity:.45}
.page-head::after{
  background:
    linear-gradient(103deg, rgba(15,35,64,.95) 0%, rgba(15,35,64,.86) 38%,
                            rgba(15,35,64,.62) 72%, rgba(15,35,64,.48) 100%);
}
.page-head h1{margin-bottom:0}
.page-head h1::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px;
  background:var(--accent); margin-top:20px;
}
.page-head p.lead{margin-top:18px}
.breadcrumb{margin-bottom:18px; font-size:13.5px}

/* ------------------------------------------------- framed photographs */
.photo-figs-grid{align-items:stretch}

.photo-fig{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.photo-fig:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d3dcea}

/* The corner brackets. Kept to the two opposite corners so the frame is
   suggested rather than drawn - a full border would fight the card edge. */
.photo-fig::before,
.photo-fig::after{content:""; position:absolute; width:42px; height:42px; pointer-events:none}
.photo-fig::before{
  top:-1px; left:-1px; border-top:2px solid var(--brand); border-left:2px solid var(--brand);
  border-top-left-radius:var(--radius);
}
.photo-fig::after{
  bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent);
  border-bottom-right-radius:var(--radius);
}

/* A mat of white around the picture, as a framed print has. The photograph
   is contained rather than cropped, so a cut-out portrait and a wide group
   photograph can sit side by side without either being cut about - and
   because the figures stretch to a common height, the row stays level
   whatever shape the photographs happen to be. */
.photo-fig img{
  flex:1 1 auto; min-height:0; width:100%; margin:0; padding:18px 18px 0;
  object-fit:contain; object-position:center;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  cursor:zoom-in;
}
.photo-fig img:hover{box-shadow:none}

.photo-fig figcaption{
  flex:none; margin:16px 18px 0; padding:13px 2px 17px;
  border-top:1px solid var(--line);
  text-align:center; line-height:1.45; color:var(--ink);
  /* every caption speaks in the same voice, whether it is a name or a
     description - they used to be whatever each Photoshop file happened
     to contain */
  font-family:var(--serif); font-size:1.02rem; font-weight:600;
}
/* a caption written as "Name | Role" is set as two lines */
.photo-fig .fig-name{
  display:block; font-family:var(--serif); font-size:1.07rem; font-weight:600; color:var(--ink);
}
.photo-fig .fig-role{
  display:block; margin-top:5px; font-family:var(--sans); font-weight:600;
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}

@media (max-width:640px){
  .photo-fig img{padding:14px 14px 0}
  .photo-fig figcaption{margin:12px 14px 0; padding:11px 2px 14px; font-size:14.5px}
  .photo-fig::before,.photo-fig::after{width:18px; height:18px}
  .page-head h1::after{margin-top:16px; width:48px}
}

/* =====================================================================
   A photograph with its title beside it

   Chosen per photograph in the admin as "title beside the photo". Each one
   takes half the row, and consecutive ones swap sides, so a run of them
   reads left, right, left down the page. A photograph given no title and
   no subtitle takes the whole row instead of leaving half of it empty.
   ===================================================================== */

.photo-features{
  display:flex; flex-direction:column;
  gap:clamp(30px,4.5vw,58px);
  margin:2.4rem 0;
}
.photo-figs.is-top > .photo-features:first-of-type{margin-top:0}
.photo-features:last-child{margin-bottom:0}

.photo-feature{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.6vw,46px); align-items:center; margin:0;
}
.photo-feature.is-plain{grid-template-columns:minmax(0,1fr)}
/* every second photograph changes sides */
.photo-feature.is-flipped .photo-feature-media{order:2}
.photo-feature.is-flipped .photo-feature-text{order:1}

/* the picture keeps the same frame as every other photograph on the site */
.photo-feature-media{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.photo-feature-media:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d3dcea}
.photo-feature-media::before,
.photo-feature-media::after{content:""; position:absolute; width:42px; height:42px; pointer-events:none}
.photo-feature-media::before{
  top:-1px; left:-1px; border-top:2px solid var(--brand); border-left:2px solid var(--brand);
  border-top-left-radius:var(--radius);
}
.photo-feature-media::after{
  bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent);
  border-bottom-right-radius:var(--radius);
}
.photo-feature-media img{
  display:block; width:100%; height:auto; margin:0; border:0; border-radius:0;
  background:transparent; box-shadow:none; cursor:zoom-in;
}

/* the nameplate: name, a short gold rule, then the role in small capitals */
.photo-feature-text{
  display:block; margin:0; padding:6px 2px; text-align:left;
  border:0;                       /* not the hairline the grid captions use */
}
.photo-feature-text .fig-name{
  display:block; font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:clamp(1.3rem,2.3vw,1.7rem); line-height:1.28;
}
.photo-feature-text .fig-name::after{
  content:""; display:block; width:54px; height:3px; border-radius:3px;
  background:var(--accent); margin-top:18px;
}
.photo-feature-text .fig-role{
  display:block; margin-top:16px; font-family:var(--sans); font-weight:600;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); line-height:1.6;
}

/* Stacked on a phone: the photograph first whichever side it takes on a
   wide screen, and the wording centred under it like every other caption. */
@media (max-width:760px){
  .photo-feature,
  .photo-feature.is-plain{grid-template-columns:minmax(0,1fr); gap:16px}
  .photo-feature.is-flipped .photo-feature-media,
  .photo-feature.is-flipped .photo-feature-text{order:0}
  .photo-feature-media{padding:14px}
  .photo-feature-media::before,
  .photo-feature-media::after{width:24px; height:24px}
  .photo-feature-text{text-align:center; padding:2px}
  .photo-feature-text .fig-name{font-size:1.24rem}
  .photo-feature-text .fig-name::after{margin-left:auto; margin-right:auto; margin-top:14px}
  .photo-feature-text .fig-role{margin-top:12px; font-size:11.5px}
}

/* ---------------------------------------------------------- a list of names
   Who is in a group photograph, read alongside it. Written in the admin one
   to a line as "Sr Catherine Charles - Provincial"; the page sets the names
   and the roles, so nobody has to build a table by hand in the page text. */
.fig-people{list-style:none; margin:20px 0 0; padding:0; text-align:left}
.fig-people li{padding:9px 0; border-top:1px solid var(--line)}
.fig-people li:first-child{border-top:0; padding-top:0}
.fig-people b{
  display:block; font-family:var(--sans); font-weight:600; font-size:15px;
  color:var(--ink); line-height:1.35;
}
.fig-people span{display:block; margin-top:1px; font-size:13.5px; color:var(--muted); line-height:1.45}

/* under a grid caption the list is centred with the caption above it */
.photo-fig figcaption .fig-people{margin-top:14px; text-align:center}
.photo-fig figcaption .fig-people li{padding:7px 0}
.photo-fig figcaption .fig-people b{font-size:14.2px}
.photo-fig figcaption .fig-people span{font-size:13px}

/* beside a photograph it reads as a roster, left aligned under the title */
.photo-feature-text .fig-people{margin-top:22px}
/* a name list carries the row on its own, so the title's gold rule is
   enough separation and the subtitle does not need one of its own */
.photo-feature-text .fig-role + .fig-people{margin-top:18px}

@media (max-width:760px){
  .photo-feature-text .fig-people{text-align:left; margin-top:16px}
  .fig-people b{font-size:14.5px}
}

/* =====================================================================
   Videos
   =====================================================================
   One frame and one set of controls for both kinds of video — a file
   uploaded through the admin, and one held on YouTube. YouTube's own
   player is loaded with all of its furniture switched off and a
   transparent shield laid over it, so its logo, title bar, share buttons
   and end screen never appear and a click never leaves the page.
   ===================================================================== */

.video-figs{margin:2.6rem 0}
.video-figs.is-top{margin-top:0; margin-bottom:2.6rem}
.video-figs-head{margin:0 0 1.4rem}
.video-figs-head h2{margin:0; font-size:var(--h3); color:var(--ink)}
.video-figs-head p{margin:.4rem 0 0; color:var(--muted); font-size:15px}

/* six columns, so a video can take the whole row (6), half of it (3) or
   a third (2) — the same rhythm the photographs use */
.video-figs-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:26px 22px; align-items:start}
.video-fig{margin:0; min-width:0; grid-column:1 / -1}
.video-fig.is-full{grid-column:1 / -1}
.video-fig.is-half{grid-column:span 3}
.video-fig.is-third{grid-column:span 2}
@media (max-width:860px){ .video-fig.is-third{grid-column:span 3} }
@media (max-width:700px){
  .video-figs-grid{grid-template-columns:1fr; gap:22px}
  .video-fig, .video-fig.is-half, .video-fig.is-third{grid-column:1 / -1}
}

.video-fig figcaption{
  margin-top:11px; text-align:center; font-weight:600; font-size:15px;
  color:var(--ink); line-height:1.45;
}
.video-fig figcaption .fig-name{display:block}
.video-fig figcaption .fig-role{
  display:block; margin-top:2px; font-weight:400; font-size:13.5px; color:var(--muted);
}

/* ------------------------------------------------------------ the frame */
.video-player{position:relative}
.video-frame{
  position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden;
  background:#0b1526; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); isolation:isolate;
}
/* older browsers with no aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
  .video-frame{height:0; padding-bottom:56.25%}
}
.video-frame > .video-el,
.video-frame > .video-host,
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.video-frame > .video-el{object-fit:cover; background:#0b1526}

/* the still shown before it is played */
.video-poster{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-color:#0b1526; transition:opacity .35s ease; z-index:2;
}
.video-poster.is-plain{
  background-image:linear-gradient(140deg,var(--brand-dark),var(--bg-deep));
}
/* an uploaded film with no still of its own: the frame the browser has
   already drawn is left to show through, with only the wash over it */
.video-poster.is-frame{background-color:transparent}
.video-poster::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(9,18,34,.10) 0%,rgba(9,18,34,.30) 55%,rgba(9,18,34,.55) 100%);
}
.video-player.is-started .video-poster{opacity:0; pointer-events:none}

/* the transparent sheet over YouTube's player: it takes every click, so
   nothing of YouTube's own can ever be reached or shown */
.video-shield{position:absolute; inset:0; z-index:3; cursor:pointer; background:transparent}

/* the big play button */
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; width:74px; height:74px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--brand-dark);
  box-shadow:0 8px 30px rgba(6,14,28,.38);
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:transform .22s ease, background .22s ease, opacity .25s ease;
}
.video-play svg{width:34px; height:34px; fill:currentColor; margin-left:3px}
.video-play:hover{transform:translate(-50%,-50%) scale(1.07); background:#fff}
.video-play:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.video-player.is-started .video-play{opacity:0; pointer-events:none}
@media (max-width:700px){
  .video-play{width:60px; height:60px}
  .video-play svg{width:28px; height:28px}
}

/* the loading ring */
.video-spinner{
  position:absolute; left:50%; top:50%; margin:-19px 0 0 -19px; width:38px; height:38px;
  border-radius:50%; border:3px solid rgba(255,255,255,.28); border-top-color:#fff;
  z-index:6; opacity:0; pointer-events:none; animation:vspin .9s linear infinite;
}
.video-player.is-busy .video-spinner{opacity:1}
.video-player.is-busy.is-started .video-play{opacity:0}
@keyframes vspin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------- the controls */
.video-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:7;
  display:flex; align-items:center; gap:11px; padding:26px 14px 11px;
  background:linear-gradient(180deg,rgba(8,16,30,0) 0%,rgba(8,16,30,.55) 38%,rgba(8,16,30,.88) 78%,rgba(8,16,30,.96) 100%);
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.video-player.is-started .video-controls,
.video-player.is-started:hover .video-controls,
.video-player.is-started:focus-within .video-controls{opacity:1; transform:none; pointer-events:auto}
.video-player.is-playing:not(:hover):not(:focus-within) .video-controls{opacity:0; transform:translateY(6px)}
/* a touch screen has no hover, so leave them up once it is playing */
@media (hover:none){
  .video-player.is-started .video-controls{opacity:1; transform:none; pointer-events:auto}
}

.vc-btn{
  flex:none; width:34px; height:34px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); padding:0; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.vc-btn:hover{background:rgba(255,255,255,.16)}
.vc-btn:focus-visible{outline:2px solid #fff; outline-offset:1px}
.vc-btn svg{width:20px; height:20px; fill:currentColor}
.vc-btn .ic-pause, .vc-btn .ic-muted, .vc-btn .ic-shrink{display:none}
.video-player.is-playing .vc-toggle .ic-play{display:none}
.video-player.is-playing .vc-toggle .ic-pause{display:block}
.video-player.is-muted  .vc-mute .ic-vol{display:none}
.video-player.is-muted  .vc-mute .ic-muted{display:block}
.video-player.is-full   .vc-full .ic-expand{display:none}
.video-player.is-full   .vc-full .ic-shrink{display:block}

.vc-time{
  flex:none; color:#fff; font-size:12.5px; font-variant-numeric:tabular-nums;
  letter-spacing:.01em; opacity:.95; min-width:38px; text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.vc-bar{
  position:relative; flex:1; height:16px; cursor:pointer; min-width:60px;
  display:flex; align-items:center;
}
.vc-bar::before{
  content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:3px; background:rgba(255,255,255,.28);
}
.vc-buffered, .vc-played{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:3px; width:0;
}
.vc-buffered{background:rgba(255,255,255,.42)}
.vc-played{background:var(--accent)}
.vc-knob{
  position:absolute; top:50%; left:0; width:12px; height:12px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .18s ease;
  pointer-events:none;
}
.vc-bar:hover .vc-knob, .vc-bar:focus-visible .vc-knob{opacity:1}
.vc-bar:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:4px}

@media (max-width:520px){
  .video-controls{gap:7px; padding:22px 9px 9px}
  .vc-time{min-width:34px; font-size:11.5px}
  .vc-btn{width:30px; height:30px}
  .vc-btn svg{width:18px; height:18px}
}

/* full screen: the frame becomes the screen */
.video-frame:fullscreen{border-radius:0; border:0; aspect-ratio:auto; width:100vw; height:100vh}
.video-frame:-webkit-full-screen{border-radius:0; border:0; width:100vw; height:100vh}
.video-frame:fullscreen > .video-el{object-fit:contain}

/* a video that will not load says so rather than sitting black */
.video-player.is-error .video-poster::before{
  content:"This video could not be played."; position:absolute; inset:auto 0 18px;
  text-align:center; color:#fff; font-size:14px; z-index:4;
}

/* ---------------------------------- a video among the photographs on a page
   A film placed in a page's photo block is set in the same framed card as
   the photographs beside it, with the same white mat, so a row reads as
   one thing whether it holds pictures or films. */
.photo-fig.is-video{overflow:hidden}
.photo-fig.is-video .video-player{flex:1 1 auto; min-height:0; padding:18px 18px 0}
.photo-fig.is-video .video-frame{border-radius:var(--radius-sm); box-shadow:none}
.photo-fig.is-video figcaption{border-top:1px solid var(--line)}
.photo-fig.is-video:hover{transform:none}
@media (max-width:640px){
  .photo-fig.is-video .video-player{padding:14px 14px 0}
}

/* ------------------------------------------------- the home page section */
.home-videos{padding:clamp(48px,6vw,78px) 0}
.home-videos .video-figs{margin:0}

/* ------------------------------------------------ the gallery video card */
.card-media .chip.chip-video{background:var(--accent); color:#fff}
.card-media .play-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--brand-dark); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(6,14,28,.34); pointer-events:none;
}
.card-media .play-badge svg{width:24px; height:24px; fill:currentColor; margin-left:2px}