/* ==========================================================================
   Satyanara front-end components.
   Ported from the approved prototype so the live site matches what the
   client signed off. Everything is scoped under .satya-fe to avoid fighting
   whatever the theme sets.
   ========================================================================== */

.satya-fe{
  --terrain:#655837;
  --mankind:#cdc1a2;
  --purity:#ffffff;
  --moss:#1e2d24;
  --olive:#5d6d4f;
  --clay:#976c39;
  --golden-sand:#d6af56;
  --terra-cotta:#88411e;
  --darkgrey:#3D3530;
  --midgrey:#8C8070;
  --offwhite:#F7F5F1;

  --font-display:'Calder','Articulat CF',serif;
  --font-body:'Articulat CF','Helvetica Neue',Arial,sans-serif;

  --max-w:1240px;
  --gutter:24px;

  font-family:var(--font-body);
  font-weight:400;
  color:var(--darkgrey);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.satya-fe *{ box-sizing:border-box; }
.satya-fe img{ max-width:100%; display:block; }
.satya-fe a{ color:inherit; }

.satya-fe .wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); }

/* ---------------------------------------------------------- typography */

.satya-fe .display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:lowercase;
  line-height:1.05;
  letter-spacing:-.01em;
}
.satya-fe .h2{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(28px,3vw,36px);
  color:var(--terrain);
  line-height:1.25;
}
.satya-fe .caption{ font-size:13px; color:var(--midgrey); letter-spacing:.02em; }

.satya-fe .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  transition:opacity .18s ease,background .18s ease,color .18s ease,transform .25s cubic-bezier(.22,.61,.36,1);
}
.satya-fe .btn:hover{ transform:translateY(-2px); }
.satya-fe .btn:active{ transform:translateY(0); }
.satya-fe .btn-primary{ background:var(--terrain); color:var(--purity); }
.satya-fe .btn-primary:hover{ opacity:.85; color:var(--purity); }
.satya-fe .btn-outline{ background:transparent; color:var(--terrain); border-color:var(--terrain); }
.satya-fe .btn-outline:hover{ background:var(--terrain); color:var(--purity); }
.satya-fe .btn-outline-light{ background:transparent; color:var(--purity); border-color:var(--purity); }
.satya-fe .btn-outline-light:hover{ background:var(--purity); color:var(--terrain); }

.satya-fe .text-link{
  font-weight:500;
  color:var(--clay);
  text-decoration:none;
  border-bottom:1px solid var(--mankind);
  padding-bottom:1px;
}
.satya-fe .text-link:hover{ border-color:var(--clay); }

/* --------------------------------------------------------------- hero */

.satya-fe .hero{
  position:relative;
  min-height:min(92vh,760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--darkgrey);
}
.satya-fe .hero-media{ position:absolute; inset:0; }
/* Scale-out starts when the photograph itself is ready. Tied to document
   parse it finished before a slow hero image had even arrived. */
.satya-fe .hero-media img{ width:100%; height:100%; object-fit:cover; opacity:0; }
.satya-fe .hero-media img.is-loaded{ animation:heroZoom 2.2s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroZoom{ from{ opacity:0; transform:scale(1.12); } to{ opacity:1; transform:scale(1); } }
.satya-fe .hero-grad{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(38,32,28,.86) 0%,rgba(38,32,28,.4) 42%,rgba(38,32,28,.06) 68%,transparent 80%);
}
.satya-fe .hero-content{ position:relative; width:100%; padding:0 0 56px; }
.satya-fe .hero-eyebrow{
  color:var(--mankind); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; margin-bottom:14px;
}
.satya-fe .hero-title{ color:var(--purity); max-width:13ch; font-size:clamp(46px,9vw,104px); }
.satya-fe .hero-title .w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.satya-fe .hero-title .w i{
  display:inline-block; font-style:normal;
  animation:satyaRise .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes satyaRise{ from{ transform:translateY(105%); opacity:0; } to{ transform:none; opacity:1; } }
.satya-fe .hero-tag{ color:var(--mankind); font-size:clamp(17px,1.8vw,21px); max-width:48ch; margin-top:16px; }
.satya-fe .hero-meta{ color:rgba(255,255,255,.85); font-size:14px; margin-top:10px; }
.satya-fe .hero-ctas{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* ------------------------------------------------------------ marquee */

@keyframes satyaMarquee{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------- cta strip */

.satya-fe .cta-strip{ background:var(--terrain); color:var(--purity); }
.satya-fe .cta-strip .wrap{
  display:flex; align-items:center; gap:24px;
  padding-top:30px; padding-bottom:30px; flex-wrap:wrap;
}
.satya-fe .cta-strip-text h2{ font-weight:700; font-size:clamp(18px,2vw,22px); }
.satya-fe .cta-strip-text p{ font-size:16px; color:var(--mankind); margin-top:2px; }
.satya-fe .cta-strip .btn{ margin-left:auto; }

/* ----------------------------------------------------------- sections */

.satya-fe .section{ padding:72px 0; }
.satya-fe .section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; margin-bottom:40px; flex-wrap:wrap;
}
.satya-fe .section-head .h2{ margin:0; }
.satya-fe .section-head .text-link{ margin-left:auto; white-space:nowrap; }
.satya-fe .sec-moss{
  background:var(--purity); color:var(--darkgrey);
  border-top:1px solid rgba(205,193,162,.4);
}
.satya-fe .sec-off{ background:var(--offwhite); }

/* ------------------------------------------------------- feature card */

.satya-fe .feature-card{
  display:grid; grid-template-columns:1.15fr 1fr;
  background:var(--offwhite); overflow:hidden;
}
.satya-fe .feature-card .fc-img{ position:relative; min-height:380px; background:var(--mankind); }
.satya-fe .feature-card .fc-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.satya-fe .feature-card .fc-body{ padding:48px; display:flex; flex-direction:column; justify-content:center; }
.satya-fe .fc-dates{ margin:6px 0 18px; }
.satya-fe .fc-text{ max-width:52ch; }
.satya-fe .fc-actions{ display:flex; gap:18px; align-items:center; margin-top:28px; flex-wrap:wrap; }
@media(max-width:860px){
  .satya-fe .feature-card{ grid-template-columns:1fr; }
  .satya-fe .feature-card .fc-img{ min-height:260px; }
  .satya-fe .feature-card .fc-body{ padding:30px 24px; }
}

/* -------------------------------------------------------------- cards */

.satya-fe .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media(max-width:860px){
  .satya-fe .card-grid{
    display:flex; overflow-x:auto; gap:16px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 var(--gutter) 12px;
    margin:0 calc(-1 * var(--gutter));
    scroll-padding-left:var(--gutter);
  }
  .satya-fe .card-grid::-webkit-scrollbar{ height:0; }
  .satya-fe .card-grid > *{ flex:0 0 78%; scroll-snap-align:start; }
}
@media(max-width:480px){ .satya-fe .card-grid > *{ flex:0 0 82%; } }

.satya-fe .card{ text-decoration:none; color:inherit; display:block; }
.satya-fe .card .card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--mankind); }
.satya-fe .card .card-img > img{ position:absolute; inset:0; }
.satya-fe .card .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.satya-fe .card:hover .card-img img{ transform:scale(1.035); }
.satya-fe .card .go{
  position:absolute; right:12px; top:12px;
  width:36px; height:36px; border-radius:50%;
  background:var(--purity); color:var(--terrain);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s ease, transform .3s ease;
}
.satya-fe .card:hover .go{ opacity:1; transform:translateX(0); }
.satya-fe .card-title{
  font-family:var(--font-display); text-transform:lowercase;
  font-size:26px; color:#655837; font-weight:bold;
  margin:16px 0 0; line-height:1.15; transition:transform .2s;
}
.satya-fe .card-meta{ margin:8px 0 0; line-height:1.6; }
.satya-fe .card-grid{ row-gap:48px; }
/* The tag sits between the image and the title, so it needs air on both
   sides. Without the top margin it collides with the image, and without the
   bottom margin the title, date and price read as one run-on line. */
.satya-fe .tag{
  display:inline-block;
  font-size:12px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--olive); color:var(--purity);
  padding:4px 10px; border-radius:3px;
  margin:14px 0 0;
}
.satya-fe .card .tag + .card-title{ margin-top:10px; }
.satya-fe .tag.gold{ background:var(--golden-sand); color:var(--darkgrey); }
.satya-fe .price{ font-weight:500; color:var(--clay); }

/* ------------------------------------------------------- list of rows */

.satya-fe .row-item{
  display:grid; grid-template-columns:150px 1fr auto; gap:22px;
  align-items:baseline; padding:24px 4px;
  border-bottom:1px solid rgba(205,193,162,.55);
  text-decoration:none; color:inherit;
  transition:background .3s, padding-left .3s;
}
.satya-fe .row-item:hover{ background:var(--offwhite); padding-left:14px; }
.satya-fe .row-item .rt{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); font-weight:500; }
.satya-fe .row-item .rl{
  font-family:var(--font-display); text-transform:lowercase;
  font-size:clamp(20px,2.4vw,28px); color:var(--terrain); line-height:1.2;
}
.satya-fe .row-item .rd{ font-size:13px; color:var(--midgrey); white-space:nowrap; }
@media(max-width:720px){
  .satya-fe .row-item{ grid-template-columns:1fr; gap:6px; }
  .satya-fe .row-item .rd{ white-space:normal; }
}

/* ------------------------------------------------------------- detail */

.satya-fe .detail-hero{
  position:relative; min-height:min(70vh,620px);
  display:flex; align-items:flex-end;
  background:var(--darkgrey); overflow:hidden;
}
.satya-fe .detail-hero .hero-media{ position:absolute; inset:0; }
.satya-fe .detail-hero .hero-media img{ width:100%; height:100%; object-fit:cover; }
.satya-fe .detail-hero .hero-grad{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(38,32,28,.88) 0%,rgba(38,32,28,.38) 45%,transparent 75%);
}
.satya-fe .detail-hero .hero-content{ position:relative; z-index:2; width:100%; padding-bottom:48px; }
.satya-fe .detail-title{ font-size:clamp(38px,7vw,84px); color:var(--purity); }
.satya-fe .detail-meta{
  display:flex; gap:26px; flex-wrap:wrap;
  color:var(--mankind); font-size:14px; margin-top:14px;
}
.satya-fe .back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--mankind);
  text-decoration:none; margin-bottom:18px;
}
.satya-fe .back-link:hover{ color:var(--purity); }

.satya-fe .h3{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(20px,2.2vw,24px); color:var(--terrain); line-height:1.3;
}
.satya-fe .detail-grid{ display:grid; grid-template-columns:1.4fr .8fr; gap:64px; align-items:start; }
@media(max-width:860px){ .satya-fe .detail-grid{ grid-template-columns:1fr; gap:36px; } }

.satya-fe .info-box{ background:var(--offwhite); padding:30px; position:sticky; top:20px; }
.satya-fe .info-box dl{ margin:0; }
.satya-fe .info-box dt{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--clay); font-weight:500; margin-top:18px;
}
.satya-fe .info-box dt:first-child{ margin-top:0; }
.satya-fe .info-box dd{ margin:4px 0 0; font-size:15px; }
.satya-fe .prose{ font-size:17px; line-height:1.8; max-width:62ch; }
.satya-fe .prose p{ margin:0 0 1.1em; }

.satya-fe .facts{ list-style:none; padding:0; margin:32px 0 0; border-top:1px solid rgba(205,193,162,.55); }
.satya-fe .facts li{ padding:13px 0; border-bottom:1px solid rgba(205,193,162,.55); font-size:15px; display:flex; gap:20px; }
.satya-fe .facts strong{ flex:0 0 150px; color:var(--terrain); font-weight:500; }
@media(max-width:560px){
  .satya-fe .facts li{ flex-direction:column; gap:2px; }
  .satya-fe .facts strong{ flex:none; }
}

/* -------------------------------------------------------- empty state */

.satya-fe .satya-empty-note{
  border:1px dashed var(--mankind);
  background:var(--offwhite);
  padding:26px;
  font-size:14px;
  color:var(--midgrey);
  border-radius:6px;
}
.satya-fe .satya-empty-note strong{ color:var(--terrain); display:block; margin-bottom:6px; }

@media(max-width:640px){
  .satya-fe .section{ padding:56px 0; }
  .satya-fe .hero-content{ padding-bottom:40px; }
  .satya-fe .hero-ctas .btn{ flex:1; }
}

/* ----------------------------------------- archive pages: filters, rows */

.satya-fe .body-lg{ font-size:clamp(17px,1.6vw,21px); line-height:1.7; }
.satya-fe .count{
  font-family:var(--font-body); font-weight:400; font-size:15px;
  color:var(--clay); vertical-align:super; margin-left:8px;
}

.satya-fe .rows{ border-top:1px solid rgba(205,193,162,.55); }
.satya-fe .row-item .arrow{ opacity:0; transform:translateX(-8px); transition:.3s; color:var(--clay); }
.satya-fe .row-item:hover .arrow{ opacity:1; transform:none; }
.satya-fe .row-item.past .rl{ color:var(--midgrey); }

.satya-fe .filters{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 36px; }
.satya-fe .filter-pill{
  font-family:var(--font-body); font-weight:500; font-size:14px;
  padding:9px 20px; border-radius:999px;
  border:1.5px solid var(--mankind); background:transparent;
  color:var(--terrain); cursor:pointer; transition:.25s;
}
.satya-fe .filter-pill:hover{ border-color:var(--terrain); }
.satya-fe .filter-pill.is-active{ background:var(--terrain); border-color:var(--terrain); color:var(--purity); }
.satya-fe .program-filtering{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:30px; }
.satya-fe .program-filtering .filters{ margin:0; }
.satya-fe .program-filter-options{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:nowrap; }
.satya-fe .program-filter-options .native-filter{ display:flex; font:inherit; padding:9px 12px; border:1px solid var(--mankind); border-radius:999px; background:white; color:var(--terrain); }
@media(max-width:820px){
  .satya-fe .program-filtering{ flex-direction:column; }
  .satya-fe .program-filter-options{ justify-content:flex-start; width:100%; }
}
@media(max-width:640px){
  .satya-fe .program-filter-options{ flex-wrap:wrap; }
  .satya-fe .native-filter{
    display:block; width:100%; font:inherit; font-size:15px;
    padding:12px 16px;
    border:1.5px solid var(--mankind); border-radius:999px;
    background:var(--purity); color:var(--terrain);
  }
}

.satya-fe .prog-card.is-filtered{ display:none; }
.satya-fe .program-calendar{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:18px 22px; background:var(--offwhite); margin-bottom:30px; color:var(--terrain); }
.satya-fe .program-calendar span{ color:var(--midgrey); }
.satya-fe .program-content{ margin-top:8px; }

/* Placeholders keep the layout steady before an image is uploaded. */
.satya-fe .card-img-placeholder,
.satya-fe .fc-img-placeholder{
  background:
    linear-gradient(135deg, rgba(205,193,162,.55) 0%, rgba(205,193,162,.25) 100%);
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.satya-fe .card-img-placeholder{ position:absolute; inset:0; }
.satya-fe .fc-img-placeholder{ position:absolute; inset:0; }
.satya-fe .card-img-placeholder::after,
.satya-fe .fc-img-placeholder::after{
  content:"satyanara";
  font-family:var(--font-display);
  text-transform:lowercase;
  font-size:22px;
  color:rgba(101,88,55,.35);
}

/* ==========================================================================
   Full width.
   Themes wrap page content in a narrow container, which crops the hero and
   boxes in every section. Breaking out of the container keeps the layout the
   way it was designed while leaving the theme itself alone.
   ========================================================================== */

.satya-fe{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* The inner .wrap still holds the readable measure. */
.satya-fe .wrap{ width:100%; }

/* Some themes add padding to the entry content; neutralise it for our blocks. */
.satya-fe > .hero,
.satya-fe > .cta-strip,
.satya-fe > .section,
.satya-fe > .detail-hero{ width:100%; }

/* Guard against a horizontal scrollbar on themes that already set overflow. */
html:has(.satya-fe){ overflow-x:hidden; }

/* ------------------------------------------------- archive page header */

.satya-fe .page-hero{
  background:var(--purity);
  color:var(--darkgrey);
  padding:96px 0 56px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(205,193,162,.4);
}
.satya-fe .page-hero .display{
  color:var(--terrain);
  font-size:clamp(54px,9vw,120px);
  line-height:.98;
  letter-spacing:-.01em;
}
.satya-fe .page-hero p{
  color:var(--midgrey);
  max-width:54ch;
  margin-top:22px;
  font-size:18px;
}
@media(max-width:640px){
  .satya-fe .page-hero{ padding:56px 0 36px; }
  .satya-fe .page-hero p{ font-size:16px; margin-top:16px; }
}

/* Section rhythm on archive pages, matching the prototype. */
.satya-fe .section + .section{ padding-top:0; }
.satya-fe .section#currently-on{ padding-top:72px; }
.satya-fe .section-head .h2 .count{ vertical-align:super; }

/* ==========================================================================
   Mobile parity with the approved prototype.
   ========================================================================== */

/* A scrim at the very top keeps a transparent site header legible over
   bright imagery. Taken from the prototype. */
.satya-fe .hero::before,
.satya-fe .detail-hero::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:180px; z-index:1;
  background:linear-gradient(to bottom,rgba(38,32,28,.6),transparent);
  pointer-events:none;
}
/* The gradient must stay absolutely positioned or it collapses to nothing
   and the headline loses its backing. Only the content is relative. */
.satya-fe .hero .hero-grad,
.satya-fe .detail-hero .hero-grad{ z-index:2; }
.satya-fe .hero .hero-content,
.satya-fe .detail-hero .hero-content{ z-index:3; position:relative; }
.satya-fe .hero .hero-media,
.satya-fe .detail-hero .hero-media{ z-index:0; }

@media(max-width:700px){
  /* Hero fills the screen, minus room for the theme header. */
  .satya-fe .hero{ min-height:calc(100svh - 72px); }
  .satya-fe .detail-hero{ min-height:70svh; }

  /* Stronger gradient so the title holds against a busy photograph.
     A phone shows the picture at its brightest exactly where the headline
     sits, so the mid stop has to be far heavier than on desktop. */
  .satya-fe .hero-grad{
    background:linear-gradient(to top,
      rgba(30,25,20,.95) 0%,
      rgba(30,25,20,.86) 34%,
      rgba(30,25,20,.62) 56%,
      rgba(30,25,20,.22) 78%,
      transparent 92%);
  }
  .satya-fe .hero-title,
  .satya-fe .detail-title{ text-shadow:0 1px 24px rgba(20,16,12,.45); }
  .satya-fe .hero-tag{ color:rgba(255,255,255,.92); }
  .satya-fe .hero-title{ max-width:none; }
  .satya-fe .hero-tag{ font-size:16px; }
  .satya-fe .hero-ctas .btn{ flex:1 1 100%; }
}

@media(max-width:480px){
  .satya-fe{ --gutter:18px; }
  .satya-fe .hero-content{ padding-bottom:34px; }
  .satya-fe .hero-eyebrow{ font-size:11.5px; letter-spacing:.14em; }
      .satya-fe .cta-strip .wrap{ padding-top:24px; padding-bottom:24px; }
  .satya-fe .cta-strip .btn{ margin-left:0; width:100%; }
  .satya-fe .card-title{ font-size:23px; }
  .satya-fe .detail-title{ font-size:clamp(32px,10vw,44px); }
  .satya-fe .info-box{ padding:22px 18px; position:static; }
  .satya-fe .section{ padding:48px 0; }
}

/* The sticky info box only helps when there is room beside it. */
@media(max-width:860px){
  .satya-fe .info-box{ position:static; }
}

/* Respect a reduced-motion preference, as the prototype does. */
@media(prefers-reduced-motion:reduce){
    .satya-fe .card .card-img img{ transition:none; }
  .satya-fe .hero-title .w i{ animation:none; opacity:1; transform:none; }
  .satya-fe .hero-media img,
  .satya-fe .hero-media img.is-loaded{ animation:none; opacity:1; transform:none; }
}

/* ==========================================================================
   Announcement bar. Printed at the very top of the page, above the theme
   header, so it is styled on its own rather than inside .satya-fe.
   ========================================================================== */

.satya-announce{
  background:#655837;
  color:#ffffff;
  font-family:"Articulat CF","Segoe UI",system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
  position:relative;
  z-index:9999;
}
.satya-announce__inner{
  max-width:1240px;
  margin:0 auto;
  padding:9px 24px;
  display:flex;
  align-items:center;
  gap:16px;
}
.satya-announce p{ margin:0; }
.satya-announce em{ font-style:italic; }
.satya-announce a{
  color:#ffffff;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  margin-left:10px;
  white-space:nowrap;
}
.satya-announce a:hover{ opacity:.82; color:#ffffff; }
.satya-announce__close{
  margin-left:auto;
  background:none;
  border:0;
  color:#ffffff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  padding:4px 6px;
  opacity:.8;
}
.satya-announce__close:hover{ opacity:1; }

@media(max-width:640px){
  .satya-announce{ font-size:13px; }
  .satya-announce__inner{ padding:9px 18px; gap:10px; }
  .satya-announce a{ display:inline-block; margin-left:8px; }
}

/* ── Reveal: fade-in-up on scroll ── */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
}
[data-reveal].is-in{
  opacity:1;
  transform:translateY(0);
}

/* Same guard for the public exhibition and programme pages. */
.satya-fe a:hover,
.satya-fe a:focus{ color:var(--clay); text-decoration:none; }
.satya-fe .card:hover .card-title{ color:#655837; transform:translateX(6px); }
.satya-fe .btn-primary:hover,
.satya-fe .btn-primary:focus{ background:var(--terrain); color:var(--purity); opacity:.85; }

/* ==========================================================================
   Review pass, 27 August
   ========================================================================== */

/* #6  Information architecture asks for text on the left and the image on
   the right for the featured exhibition on desktop. The card was the other
   way round. */
@media(min-width:861px){
  .satya-fe .feature-card{ grid-template-columns:1fr 1.15fr; }
  .satya-fe .feature-card .fc-body{ order:1; }
  .satya-fe .feature-card .fc-img{ order:2; }
}

/* #7  The secondary button was as heavy as the primary one. */
.satya-fe .fc-actions .btn,
.satya-fe .section .btn-outline{
  font-size:14px;
  padding:11px 20px;
}
.satya-fe .fc-actions .text-link{ font-size:14px; }

/* #15 On a phone the page header and the first section ran together with no
   breathing room, so the two blocks read as one. */
@media(max-width:700px){
  .satya-fe .page-hero{ padding:44px 0 30px; }
  .satya-fe .page-hero .display{ font-size:clamp(40px,13vw,64px); }
  .satya-fe .page-hero p{ font-size:15px; margin-top:14px; }
  .satya-fe .section#currently-on,
  .satya-fe .page-hero + .section{ padding-top:36px; }
  .satya-fe .section-head{ margin-bottom:24px; }
}

/* #16 Date and venue were forced onto one line and wrapped awkwardly. They
   are separate facts, so they get separate lines on small screens. */
.satya-fe .fc-dates{ line-height:1.6; }
@media(max-width:700px){
  .satya-fe .fc-dates .sep{ display:none; }
  .satya-fe .fc-dates .fc-venue{ display:block; margin-top:2px; }
  .satya-fe .card-meta{ line-height:1.65; }
  .satya-fe .feature-card .fc-body{ padding:24px 20px 28px; }
  .satya-fe .feature-card .fc-actions{ gap:12px; }
  .satya-fe .feature-card .fc-actions .btn{ width:100%; text-align:center; }
}

/* Keep the hero readable when the theme header overlays it. */
@media(max-width:700px){
  .satya-fe .page-hero + .section .section-head .h2{ font-size:clamp(24px,6vw,30px); }
}

/* The section heading and its count were breaking onto two lines because the
   count is a separate inline element. Keep them together. */
.satya-fe .section-head .h2{
  display:flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
}
.satya-fe .section-head .h2 > span:first-child{ white-space:normal; }
.satya-fe .section-head .count{
  margin-left:0;
  vertical-align:baseline;
  font-size:14px;
  line-height:1;
}
@media(max-width:700px){
  .satya-fe .section-head{ align-items:center; }
  .satya-fe .section-head .h2{ flex-wrap:nowrap; }
}

/* Read more, used where a long body follows a short intro. */
.satya-fe .satya-more-btn{
  background:none;
  border:0;
  border-bottom:1px solid var(--mankind);
  color:var(--clay);
  cursor:pointer;
  font:inherit;
  font-size:15px;
  font-weight:500;
  padding:0 0 1px;
  margin-top:6px;
}
.satya-fe .satya-more-btn:hover{ border-color:var(--clay); }
.satya-fe .satya-more[hidden]{ display:none; }