/* ==========================================================================
   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); }
/* Hover used to flood the button white; white text on white made it vanish.
   Now it dims a touch, the same language Get Tickets speaks. */
.satya-fe .btn-outline-light:hover{ background:rgba(255,255,255,.14); color:var(--purity); }

.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; }
.satya-fe .hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.07); animation:heroZoom 2.6s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes heroZoom{ to{ 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); }
/* The rise animation hides each word behind overflow:hidden; without extra
   room the descenders of j, g, y are cut ("jejak" lost its tail). Padding
   inside the clip box, cancelled by a negative margin, gives them air without
   moving the layout. */
.satya-fe .hero-title .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.22em; margin-bottom:-.22em;
}
.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; justify-content:space-between; gap:16px 24px;
  padding-top:30px; padding-bottom:30px; flex-wrap:wrap;
}
.satya-fe .cta-strip-text{ flex:1 1 320px; min-width:0; }
.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; }
/* margin-left:auto used to shove the button to the far right; the moment the
   row wrapped, the button landed alone on its own line with a strange void
   beside it. space-between on the wrap does the same job without the void. */
.satya-fe .cta-strip .btn{ flex:0 0 auto; white-space:nowrap; }
@media(max-width:860px){
  /* space-between on a half-empty row read as "stretched apart" on phones;
     below tablet width the strip simply stacks, text then button.
     The gap was still doing the stretching on its own: 30px of padding above
     and below plus a 12px gap left the button floating a long way under one
     line of text. Tightened, and the button goes full width here rather than
     waiting until 480px, so there is nothing beside it to be far from. */
  .satya-fe .cta-strip .wrap{
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:14px; padding-top:22px; padding-bottom:22px;
  }
  .satya-fe .cta-strip-text{ flex:0 0 auto; }
  .satya-fe .cta-strip-text p{ margin-top:0; }
  .satya-fe .cta-strip .btn{ width:100%; margin-left:0; }
}

/* ----------------------------------------------------------- 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;
}
/* The heading takes the room it needs and wraps inside its own column, so a
   long title never pushes the section link onto a line of its own. The link
   only drops below on a phone, where the row is genuinely too narrow. */
.satya-fe .section-head .h2{ margin:0; flex:1 1 auto; min-width:0; }
.satya-fe .section-head .text-link{ margin-left:auto; white-space:nowrap; }
@media(max-width:640px){
  .satya-fe .section-head{ flex-wrap:wrap; }
}
.satya-fe .sec-moss{
  background:var(--purity); color:var(--darkgrey);
  /* Section divider removed, same request. */
}
.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;
  /* Divider lines removed at the client's request; the entry motion already
     separates the rows, so spacing carries the rhythm alone. */
  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); padding-bottom:.08em; }
.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;
  /* Padding guard for the detail pages: a pasted URL or an unbroken string
     ("adawdajdh...") used to become one straight line ploughing off the
     screen. min-width:0 lets the flex/grid parent actually shrink it, and
     overflow-wrap breaks anything with no spaces to break at. */
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.satya-fe .prose *,
.satya-fe .satya-more{ overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.satya-fe .detail-hero .display,
.satya-fe .hero-tag{ overflow-wrap:anywhere; }
.satya-fe .prose p{ margin:0 0 1.1em; }
/* Body text keeps its own weight: a theme reset that flattens strong/b
   otherwise reads as "the bold button did nothing". */
.satya-fe .prose strong,
.satya-fe .prose b{ font-weight:700; }
.satya-fe .prose em,
.satya-fe .prose i{ font-style:italic; }
/* A paragraph the editor left empty (Enter pressed twice) becomes a blank-line
   marker in Satyanara_Components::prose(). The marker carries min-height
   inline and holds a non-breaking space, so this rule is only the fallback for
   an install whose stored content still holds the older class-only marker. */
.satya-fe .prose .satya-blank{ min-height:1.35em; margin:0; }

.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{ }
.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){
  /* The type pills used to be hidden here, which removed the only control
     that filters by programme type on a phone. They wrap instead. */
  .satya-fe .filters{ margin-bottom:16px; }
  .satya-fe .program-filter-options{ flex-direction:column; align-items:stretch; }
  .satya-fe .native-filter{
    display:block; width:100%; font:inherit; font-size:15px;
    padding:12px 16px; margin:6px 0 28px;
    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;
  /* Divider removed at the client's request: no lines on the archive pages. */
}
.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; }
  /* Padding and full width are already set at 860px; only the gutter changes
     this far down. */
  .satya-fe .cta-strip .wrap{ padding-top:20px; padding-bottom:20px; }
  .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; }
}

/* ==========================================================================
   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;
  /* A true top bar (the client's call): fixed above the page, page and
     pinned menus pushed down by its measured height, so it can never sit on
     a hero photo or under a menu again. 9999, not higher, on purpose: state
     loaders and loading overlays are appended later in the DOM and have to
     be able to cover the page — the bar included — while they run. */
  position:fixed;
  top:0; left:0; right:0;
  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; }

/* ==========================================================================
   Theme hover guard.
   Themes set their own link colour, often red, and it bleeds through on
   touch devices because :hover sticks after a tap. Pin our colours and stop
   the sticky hover on anything that is not a real pointer.
   ========================================================================== */

.satya-fe a,
.satya-fe a:link,
.satya-fe a:visited,
.satya-fe a:hover,
.satya-fe a:focus,
.satya-fe a:active{
  color:inherit;
  text-decoration:none;
}
.satya-fe .text-link,
.satya-fe .text-link:link,
.satya-fe .text-link:visited{ color:var(--clay); }
.satya-fe .text-link:hover,
.satya-fe .text-link:focus{ color:var(--clay); }

.satya-fe .btn,
.satya-fe .btn:link,
.satya-fe .btn:visited{ text-decoration:none; }
.satya-fe .btn-primary,
.satya-fe .btn-primary:link,
.satya-fe .btn-primary:visited,
.satya-fe .btn-primary:hover,
.satya-fe .btn-primary:focus,
.satya-fe .btn-primary:active{ background:var(--terrain); color:var(--purity); }
.satya-fe .btn-outline-light,
.satya-fe .btn-outline-light:link,
.satya-fe .btn-outline-light:visited,
.satya-fe .btn-outline-light:hover,
.satya-fe .btn-outline-light:focus,
.satya-fe .btn-outline-light:active{ color:var(--purity); }
.satya-fe .btn-outline-light:hover{ background:rgba(255,255,255,.14); }

.satya-fe .card,
.satya-fe .card:hover,
.satya-fe .card:focus,
.satya-fe .card:active{ color:inherit; }
.satya-fe .card-title,
.satya-fe .card:hover .card-title{ color:var(--terrain); }
.satya-fe .row-item,
.satya-fe .row-item:hover,
.satya-fe .row-item:active{ color:inherit; }

/* Tap highlight is where most of the red actually comes from. */
.satya-fe a,
.satya-fe button,
.satya-fe .card,
.satya-fe .row-item{
  -webkit-tap-highlight-color:transparent;
}

/* On touch screens a hover state lingers after the finger lifts, which is
   why a card can stay tinted. Only apply hover where a mouse exists. */
@media (hover:none){
  .satya-fe .card:hover .card-img img{ transform:none; }
  .satya-fe .row-item:hover{ background:transparent; padding-left:4px; }
  .satya-fe .btn-outline:hover{ background:transparent; color:var(--terrain); }
  .satya-fe .text-link:hover{ border-color:var(--mankind); }
  .satya-fe .card:hover .go{ opacity:0; }
}

/* ==========================================================================
   Card grids stay grids on a phone.
   A swipe carousel hid how much there was, so a long list looked short.
   ========================================================================== */

@media(max-width:860px){
  .satya-fe .card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    overflow:visible;
    scroll-snap-type:none;
    padding:0;
    margin:0;
  }
  .satya-fe .card-grid > *{ flex:none; scroll-snap-align:none; }
}
@media(max-width:560px){
  .satya-fe .card-grid{ grid-template-columns:1fr; gap:26px; }
}

/* ==========================================================================
   Soft edges.
   One radius scale, applied to anything that holds an image or sits as a
   panel. Nothing gets a radius just for decoration: sharp corners stay on
   dividers and text, so the rounding reads as intentional rather than a
   blanket effect. Radii shrink on small screens, where a large curve eats
   into an already narrow image.
   ========================================================================== */

.satya-fe{
  --r-sm:10px;   /* tags, small controls */
  --r-md:18px;   /* cards, panels */
  --r-lg:28px;   /* feature blocks, detail hero */
}

/* The hero and the strips below it stay edge to edge with square corners.
   They read as bands across the page, and rounding them made the top of the
   site look like a stack of floating cards. Rounding is for the content
   blocks further down, not for these. */
.satya-fe .hero{ border-radius:0; }

/* Detail hero is a panel rather than a banner, so it rounds on all corners
   and sits inset from the edge. */
.satya-fe .detail-hero{
  border-radius:var(--r-lg);
  overflow:hidden;
  margin:0 var(--gutter);
  width:auto;
}

/* Cards and their images. */
.satya-fe .card .card-img{
  border-radius:var(--r-md);
  overflow:hidden;
}
.satya-fe .card-img-placeholder{ border-radius:var(--r-md); }

/* Feature block: the image and the body form one rounded slab. */
.satya-fe .feature-card{
  border-radius:var(--r-lg);
  overflow:hidden;
}
.satya-fe .feature-card .fc-img,
.satya-fe .fc-img-placeholder{ border-radius:0; }

/* Panels. */
.satya-fe .info-box{ border-radius:var(--r-md); }
/* Full bleed, square, same reasoning as the hero. */
.satya-fe .cta-strip{ border-radius:0; margin-left:0; margin-right:0; width:100%; }
.satya-fe .satya-empty-note{ border-radius:var(--r-md); }

/* Small controls. */
.satya-fe .tag{ border-radius:var(--r-sm); }
.satya-fe .native-filter{ border-radius:999px; }

/* Hero and strip sit flush against each other. */
.satya-fe .hero + .cta-strip{ margin-top:0; }

@media(max-width:860px){
  .satya-fe{ --r-lg:22px; }
  .satya-fe .detail-hero{ margin-left:14px; margin-right:14px; }
  .satya-fe .cta-strip{ margin-left:0; margin-right:0; }
}
@media(max-width:560px){
  .satya-fe{ --r-sm:8px; --r-md:14px; --r-lg:18px; }
}

/* Safari repaints a rounded overflow container badly during a transform,
   which showed as a flicker on card hover. This pins the layer. */
.satya-fe .card .card-img,
.satya-fe .feature-card,
.satya-fe .detail-hero{
  transform:translateZ(0);
}

/* ==========================================================================
   Carousel.
   Used where more than one thing is running at the same time: two exhibitions
   open at once on the homepage hero, or in Currently on. With a single item
   nothing here applies, so the ordinary layout is untouched.
   ========================================================================== */

.satya-fe .satya-carousel{ position:relative; }

.satya-fe .satya-carousel__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:0;
  /* The scrollbar is noise here; the arrows and the counter carry the meaning. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.satya-fe .satya-carousel__track::-webkit-scrollbar{ display:none; }

.satya-fe .satya-carousel__track > *{
  flex:0 0 100%;
  scroll-snap-align:start;
  min-width:0;
}

.satya-fe .satya-carousel__nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:18px;
}

/* Over the hero the controls sit on the image, so they need their own contrast. */
.satya-fe .satya-carousel__nav--hero{
  position:absolute;
  right:var(--gutter);
  bottom:26px;
  z-index:4;
  margin:0;
}

.satya-fe .satya-carousel__btn{
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid var(--mankind);
  background:var(--purity);
  color:var(--terrain);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.satya-fe .satya-carousel__btn:hover{ background:var(--terrain); color:var(--purity); }
.satya-fe .satya-carousel__btn[disabled]{ opacity:.35; cursor:default; }
.satya-fe .satya-carousel__nav--hero .satya-carousel__btn{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.5);
  color:var(--purity);
  backdrop-filter:blur(6px);
}
.satya-fe .satya-carousel__nav--hero .satya-carousel__btn:hover{
  background:var(--purity); color:var(--terrain);
}

.satya-fe .satya-carousel__count{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--midgrey);
  min-width:44px;
  text-align:center;
}
.satya-fe .satya-carousel__nav--hero .satya-carousel__count{ color:var(--purity); }

@media(max-width:640px){
  .satya-fe .satya-carousel__nav--hero{ right:14px; bottom:16px; }
  .satya-fe .satya-carousel__btn{ width:36px; height:36px; }
}

/* A carousel is a horizontal scroller first; the arrows are an enhancement. */
@media (prefers-reduced-motion:reduce){
  .satya-fe .satya-carousel__track{ scroll-behavior:auto; }
}


/* ==========================================================================
   Item 19, one hover for every button.
   Three generations of rules gave each button its own idea of a hover: some
   lifted, some faded, some recoloured. This block, last in the file, settles
   it: every button lifts 2px and deepens slightly, whatever its colour.
   ========================================================================== */
.satya-fe .btn,
.satya-fe .satya-more-btn{
  transition:transform .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
}
.satya-fe .btn:hover,
.satya-fe .btn:focus-visible,
.satya-fe .satya-more-btn:hover{
  transform:translateY(-2px);
  opacity:.88;
}
.satya-fe .btn:active,
.satya-fe .satya-more-btn:active{
  transform:translateY(0);
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .satya-fe .btn:hover, .satya-fe .satya-more-btn:hover{ transform:none; }
}

/* ==========================================================================
   Manage booking, [satyanara_manage_booking]

   The guest arrives here from a link in their email, usually on a phone, to
   answer one of two questions: what did I book, and can I still move it. The
   layout borrows .facts, .info-box and .detail-grid rather than inventing a
   second vocabulary for the same shapes.
   ========================================================================== */

.satya-fe .satya-manage__head{
  padding-bottom:28px;
  border-bottom:1px solid rgba(205,193,162,.55);
  margin-bottom:40px;
}
.satya-fe .satya-manage__ref{
  /* The reference is read aloud and typed in, so it keeps its case and its
     characters stay distinguishable. .display lowercases by default. */
  font-size:clamp(30px,5vw,52px);
  text-transform:none;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  margin:6px 0 0;
}

.satya-fe .satya-manage__pill{
  display:inline-block;
  margin-top:14px;
  padding:5px 13px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.satya-fe .satya-manage__pill--ok{ color:var(--olive); }
.satya-fe .satya-manage__pill--wait{ color:var(--clay); }
.satya-fe .satya-manage__pill--bad{ color:var(--terra-cotta); }
.satya-fe .satya-manage__pill--done{ color:var(--midgrey); }

.satya-fe .satya-manage .facts li{ justify-content:space-between; }
.satya-fe .satya-manage .facts span{ text-align:right; }

.satya-fe .satya-manage__panel{
  margin-top:40px;
  padding:30px;
  background:var(--offwhite);
  border-left:3px solid var(--terrain);
}
.satya-fe .satya-manage__panel--quiet{
  border-left-color:var(--mankind);
  color:var(--midgrey);
}
.satya-fe .satya-manage__panel .h3{ margin:0 0 10px; }
.satya-fe .satya-manage__note{ font-size:14px; margin:0 0 4px; }

/* Losing a programme place is not reversible, so this reads as a caution
   rather than as more small print. */
.satya-fe .satya-manage__warn{
  margin:16px 0 0;
  padding:14px 16px;
  background:#fdf8ee;
  border:1px solid #f0e0c4;
  color:#7a5a1e;
  font-size:14px;
  line-height:1.6;
}

.satya-fe .satya-manage__label{
  display:block;
  margin:22px 0 8px;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clay);
  font-weight:500;
}
.satya-fe .satya-manage__row{ display:flex; gap:12px; flex-wrap:wrap; }
.satya-fe .satya-manage__row input[type="date"]{
  flex:1 1 200px;
  min-width:0;
  /* 16px: anything smaller makes iOS Safari zoom the page on focus. */
  font:inherit;
  font-size:16px;
  padding:13px 15px;
  border:1px solid var(--mankind);
  background:var(--purity);
  color:inherit;
  border-radius:0;
}
.satya-fe .satya-manage__row input[type="date"]:focus-visible{
  outline:2px solid var(--terrain);
  outline-offset:2px;
}
.satya-fe .satya-manage__row .btn{ flex:0 0 auto; }
@media(max-width:480px){
  .satya-fe .satya-manage__row .btn{ flex:1 1 100%; }
}

.satya-fe .satya-manage__msg{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.6;
  min-height:1.6em;   /* holds its space, so the panel does not jump */
}
.satya-fe .satya-manage__msg.is-busy{ color:var(--midgrey); }
.satya-fe .satya-manage__msg.is-ok{ color:var(--olive); font-weight:500; }
.satya-fe .satya-manage__msg.is-bad{ color:var(--terra-cotta); }

.satya-fe .satya-manage__mono{
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.satya-fe .satya-manage__fineprint{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(205,193,162,.55);
}

.satya-fe .satya-manage__notice{
  max-width:48ch;
  padding:34px;
  background:var(--offwhite);
  border-left:3px solid var(--terra-cotta);
}
.satya-fe .satya-manage__notice .h2{ margin:0 0 10px; }

/* The sidebar is reference material. On a phone it belongs after the thing it
   refers to, not above it. */
@media(max-width:860px){
  .satya-fe .satya-manage .info-box{ position:static; }
}

/* ==========================================================================
   Empty blocks leave no trace.

   A shortcode with nothing to show returns an empty string, but the wrapper
   the page builder printed around it stays, keeping its own padding and its
   own background. With "Currently on" hidden, that leftover wrapper is the
   small white band under Plan your visit: a section with no content in it.

   Hiding it is done in two ways because neither alone is enough. The rules
   below catch the wrappers we can name, and the script in class-components
   catches the rest by measuring what is actually inside.
   ========================================================================== */

.satya-fe:empty{ display:none !important; }
.satya-fe > .section:empty,
.satya-fe > .cta-strip:empty{ display:none !important; }
.satya-empty-block{ display:none !important; }