/* ==========================================================================
   SEHAM LATINO — Interaction layer

   Three things that behave rather than just sit there: the buttons, the
   social row, and the Academy figures. Loaded after wp-theme.css so these
   rules win, and written against the theme's own tokens so the wine and the
   gold stay the wine and the gold.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   Every button fills and grows a soft ring on hover. The ring is the button's
   own colour at low alpha, set per variant through --btn-ring, so a gold
   button glows gold and a wine button glows wine.
   -------------------------------------------------------------------------- */
.btn{--btn-ring:rgba(92,18,37,.34)}
.btn:hover,.btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 0 0 5px var(--btn-ring),0 6px 18px rgba(20,4,9,.16);
}
.btn:active{transform:translateY(0) scale(.985);box-shadow:0 0 0 3px var(--btn-ring)}
.btn:focus-visible{outline:2px solid var(--gold-400);outline-offset:4px}

.btn-gold{--btn-ring:rgba(201,171,114,.42)}
.btn-gold:hover{--btn-bg:var(--gold-300);--btn-fg:var(--wine-900)}
.btn-dark{--btn-ring:rgba(22,16,17,.28)}
.btn-dark:hover{--btn-bg:var(--wine-600)}
.btn-cream{--btn-ring:rgba(255,255,255,.34)}
.btn-cream:hover{--btn-bg:var(--gold-300);--btn-fg:var(--wine-900)}

/* The ghost button is an outline until you touch it, then it becomes solid —
   the same move as the reference, tinted wine instead of blue. */
.btn-ghost{--btn-ring:rgba(92,18,37,.28)}
.btn-ghost:hover{--btn-bg:var(--wine-600);--btn-fg:#fff;--btn-bd:var(--wine-600)}
.btn-quiet{--btn-ring:rgba(92,18,37,.22)}
.btn-quiet:hover{--btn-bg:var(--wine-600);--btn-fg:#fff}

/* On dark ground the ring has to be light to be visible at all. */
.sect-dark .btn-ghost,.on-dark .btn-ghost,.hero .btn-ghost,.pagehead .btn-ghost,
.sect-wine .btn-ghost,.nav .btn-ghost,.drawer .btn-ghost,.foot .btn-ghost,
.tier-featured .btn-ghost,.summary .btn-ghost,.side .btn-ghost,
.auth-aside .btn-ghost,.cart-panel .btn-ghost,.video-wall .btn-ghost{--btn-ring:rgba(201,171,114,.34)}
.sect-dark .btn-ghost:hover,.on-dark .btn-ghost:hover,.hero .btn-ghost:hover,
.pagehead .btn-ghost:hover,.sect-wine .btn-ghost:hover,.nav .btn-ghost:hover,
.drawer .btn-ghost:hover,.foot .btn-ghost:hover,.tier-featured .btn-ghost:hover,
.summary .btn-ghost:hover,.side .btn-ghost:hover,.auth-aside .btn-ghost:hover,
.cart-panel .btn-ghost:hover,.video-wall .btn-ghost:hover{--btn-bg:var(--gold-400);--btn-fg:var(--wine-900);--btn-bd:var(--gold-400)}

/* WooCommerce renders its own buttons; give them the same manners. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce .single_add_to_cart_button,.woocommerce #respond input#submit,
.wc-block-components-button,.purchase-card .single_add_to_cart_button{
  border-radius:var(--r-pill);
  transition:transform var(--t-mid) var(--ease-micro),background-color var(--t-mid) var(--ease-out),
             color var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,.purchase-card .single_add_to_cart_button:hover{
  transform:translateY(-1px);
  background-color:var(--wine-500);color:#fff;
  box-shadow:0 0 0 5px rgba(92,18,37,.32),0 6px 18px rgba(20,4,9,.16);
}

.icon-btn{transition:transform var(--t-mid) var(--ease-micro),color var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out),background-color var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(201,171,114,.26)}

@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn:active,.icon-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{transform:none}
}


/* --------------------------------------------------------------------------
   2. SOCIAL ICONS
   Frosted panes with the platform's colour in the rim. On hover a gradient
   rises from the bottom to fill the tile and a highlight sweeps across the
   glass. --social-rgb and --social-grad are set per tile from PHP.
   -------------------------------------------------------------------------- */
.social-glass{display:flex;align-items:center;gap:12px;list-style:none;margin:0;padding:0}
.social-glass .icon-content{position:relative;list-style:none}

.social-glass .tooltip{
  position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;
  transform:translateX(-50%) translateY(6px);
  padding:5px 11px;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  color:#fff;background:var(--social-grad,var(--wine-600));background-size:300% 300%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 6px 18px rgba(0,0,0,.34);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility .3s;
}
html[dir="rtl"] .social-glass .tooltip{transform:translateX(50%) translateY(6px)}
.social-glass .icon-content:hover .tooltip,
.social-glass .icon-content:focus-within .tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
html[dir="rtl"] .social-glass .icon-content:hover .tooltip,
html[dir="rtl"] .social-glass .icon-content:focus-within .tooltip{transform:translateX(50%) translateY(0)}

.social-glass a{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  inline-size:48px;block-size:48px;border-radius:30%;
  color:#fff;text-decoration:none;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(var(--social-rgb),.55);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.38),
    inset 0 0 8px rgba(var(--social-rgb),.28),
    0 0 12px rgba(var(--social-rgb),.28),
    0 6px 16px rgba(0,0,0,.24);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);
}
.social-glass a svg{position:relative;z-index:2;inline-size:22px;block-size:22px}

/* The rising fill. */
.social-glass .filled{
  position:absolute;z-index:1;inset-block-end:0;inset-inline:0;
  block-size:0;border-radius:inherit;
  background:var(--social-grad,var(--wine-600));background-size:400% 400%;
  animation:sehamSocialGradient 6s ease infinite;
  transition:block-size .35s var(--ease-out);
}
.social-glass a:hover .filled,.social-glass a:focus-visible .filled{block-size:100%}

/* The highlight sweep. */
.social-glass a::before{
  content:"";position:absolute;z-index:2;inset-block-start:-50%;inset-inline-start:-50%;
  inline-size:200%;block-size:200%;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 70%);
  transform:rotate(25deg) translateX(-100%);
  transition:transform .8s var(--ease-out);
}
.social-glass a:hover::before,.social-glass a:focus-visible::before{transform:rotate(25deg) translateX(100%)}

.social-glass a:hover,.social-glass a:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(var(--social-rgb),.9);
  box-shadow:
    inset 0 0 14px rgba(var(--social-rgb),.5),
    0 0 26px rgba(var(--social-rgb),.55),
    0 12px 28px rgba(0,0,0,.42);
}
.social-glass a:focus-visible{outline:2px solid var(--gold-400);outline-offset:4px}

@keyframes sehamSocialGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* The footer bar is tight, so its row runs a size down. */
.social-glass-sm a{inline-size:40px;block-size:40px}
.social-glass-sm a svg{inline-size:19px;block-size:19px}
.social-glass-sm{gap:9px}

/* On the light contact page the glass needs something to be glass against. */
.contact-social a{
  background:linear-gradient(135deg,rgba(22,16,17,.055),rgba(22,16,17,.015));
  color:var(--ink);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    inset 0 0 8px rgba(var(--social-rgb),.16),
    0 0 10px rgba(var(--social-rgb),.2),
    0 6px 16px rgba(22,16,17,.1);
}
.contact-social a:hover,.contact-social a:focus-visible{color:#fff}
.contact-social a::before{background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%)}

@media(prefers-reduced-motion:reduce){
  .social-glass a:hover,.social-glass a:focus-visible{transform:none}
  .social-glass a::before{display:none}
  .social-glass .filled{animation:none}
}
@media(max-width:520px){
  .social-glass{gap:8px}
  .social-glass a{inline-size:42px;block-size:42px}
}


/* --------------------------------------------------------------------------
   3. ACADEMY FIGURES
   Each number sits on its own pane. Pointing at one lifts it, warms the rule
   underneath, and runs the number up again from zero.
   -------------------------------------------------------------------------- */
.academy-figures .figures{gap:clamp(.8rem,2vw,1.4rem)}
.figure{
  position:relative;isolation:isolate;
  padding:clamp(1rem,2.4vw,1.7rem) clamp(.85rem,2vw,1.35rem);
  border:1px solid rgba(248,245,241,.1);border-radius:var(--r-lg,18px);
  background:linear-gradient(160deg,rgba(248,245,241,.06),rgba(248,245,241,.015));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out),background-color .4s var(--ease-out);
}
.figure::after{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,0%),rgba(201,171,114,.3),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.figure .n{
  display:inline-flex;align-items:baseline;
  transition:color .4s var(--ease-out),transform .4s var(--ease-out);
  font-variant-numeric:lining-nums tabular-nums;
}
.figure .l{transition:color .4s var(--ease-out)}
.figure .rule{
  display:block;block-size:2px;inline-size:0;margin-block-start:.7rem;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-400),rgba(201,171,114,0));
  transition:inline-size .5s var(--ease-out);
}
html[dir="rtl"] .figure .rule{background:linear-gradient(270deg,var(--gold-400),rgba(201,171,114,0))}

.figure:hover,.figure.is-lit{
  transform:translateY(-6px);
  border-color:rgba(201,171,114,.45);
  box-shadow:0 18px 40px rgba(10,2,5,.45);
}
.figure:hover::after,.figure.is-lit::after{opacity:1}
.figure:hover .n,.figure.is-lit .n{color:var(--gold-300)}
.figure:hover .l,.figure.is-lit .l{color:var(--on-dark-2)}
.figure:hover .rule,.figure.is-lit .rule{inline-size:38px}

@media(prefers-reduced-motion:reduce){
  .figure,.figure:hover,.figure.is-lit{transform:none;transition:none}
}
@media(max-width:680px){
  .academy-figures .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* --------------------------------------------------------------------------
   4. FOOTER — collapsible columns on a phone
   Three open link lists stacked on a narrow screen make the footer taller
   than the screen itself. Each heading is a real button; above the breakpoint
   the lists are always open and the button reads as a plain heading.
   -------------------------------------------------------------------------- */
.foot-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  inline-size:100%;padding:0;
  font-family:var(--ui);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-400);text-align:start;
  background:none;border:0;cursor:default;
}
.foot-toggle svg{display:none;flex:none;inline-size:14px;block-size:14px;transition:transform .3s var(--ease-out)}
.foot-toggle:focus-visible{outline:2px solid var(--gold-400);outline-offset:4px;border-radius:6px}

@media(max-width:760px){
  .foot-grid{gap:0}
  .foot-grid>div:not(:first-child){border-block-start:1px solid var(--line-dark)}
  .foot-toggle{
    padding-block:1rem;cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:color .25s var(--ease-out);
  }
  .foot-toggle svg{display:block;color:var(--gold-400)}
  .foot-toggle:hover{color:var(--gold-300)}
  html[lang="ar"] .foot-toggle{letter-spacing:.02em;text-transform:none;font-size:.86rem}
  .foot-toggle.is-open svg{transform:rotate(180deg)}
  /* max-height rather than the 0fr grid trick: these lists have several
     children, and grid-template-rows:0fr only collapses the first row — the
     rest stay auto-sized, which is why the lists never actually closed. */
  .foot-grid>div>ul{
    max-block-size:0;overflow:hidden;opacity:0;row-gap:0;
    padding-block-end:0;
    transition:max-block-size .34s var(--ease-out),opacity .24s var(--ease-out),
               row-gap .34s var(--ease-out),padding-block-end .34s var(--ease-out);
  }
  .foot-toggle.is-open + ul{max-block-size:26rem;opacity:1;row-gap:.5rem;padding-block-end:1.1rem}
  /* Room at the bottom so the floating accessibility button never sits on
     top of the last row of links. */
  .foot{padding-block-end:5.5rem}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media(prefers-reduced-motion:reduce){
  .foot-grid>div>ul,.foot-toggle svg{transition:none}
}


/* --------------------------------------------------------------------------
   5. CART AND CHECKOUT ON A PHONE
   -------------------------------------------------------------------------- */

/* The "View cart" confirmation used to appear at the very top of the content,
   underneath the fixed header, where it could not be tapped. It now rides
   below the header and above it in the stack. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  position:relative;z-index:940;
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  scroll-margin-block-start:calc(var(--nav-h) + var(--ticker-h) + 1rem);
}
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button{
  margin-inline-start:auto;float:none !important;
  min-block-size:44px;display:inline-flex;align-items:center;
}

/* Without JavaScript the notice stays in the flow, so wherever a template
   prints it, it still has to clear the fixed header on its own. */
/* It sits directly under the fixed header on pages whose header is drawn in
   pale text over a dark hero, so it carries that darkness itself. A pale strip
   there makes the menu disappear. */
.seham-notices{padding-block-start:calc(var(--nav-h) + var(--ticker-h) + 1.25rem);background:var(--wine-900,#160409)}
.seham-notices:empty{display:none}
.seham-notices:has(.wrap:empty){display:none}
/* The strip is dark so the menu above it stays readable — which means the
   notice itself has to bring its own light card, or it would be dark on dark. */
.seham-notices .woocommerce-message,
.seham-notices .woocommerce-info,
.seham-notices .woocommerce-error{
  background:#fff;color:var(--ink);border-radius:var(--r-md,14px);
  padding:.9rem 1.2rem;box-shadow:0 14px 34px -26px rgba(0,0,0,.7);
}
.seham-notices .woocommerce-message a,
.seham-notices .woocommerce-info a,
.seham-notices .woocommerce-error a{color:var(--wine-600)}

/* --------------------------------------------------------------------------
   The add-to-cart confirmation
   Templates print notices in different places — on the course page, at the top
   of <main>, underneath the fixed header, where "View cart" could not be
   clicked at any screen size. The confirmation is lifted into this panel,
   pinned below the header, at every width.
   -------------------------------------------------------------------------- */
.seham-toast-tray{
  position:fixed;z-index:1300;
  inset-block-start:calc(var(--nav-h) + var(--ticker-h) + .75rem);
  inset-inline:0;
  display:grid;justify-items:center;gap:.6rem;
  padding-inline:1rem;
  pointer-events:none;
}
body.admin-bar .seham-toast-tray{inset-block-start:calc(var(--nav-h) + 70px + .75rem)}
body:not(.has-top-ticker) .seham-toast-tray{inset-block-start:calc(var(--nav-h) + .75rem)}

.woocommerce .seham-toast,.seham-toast{
  pointer-events:auto;
  position:relative;
  inline-size:min(560px,100%);
  margin:0 !important;
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;
  padding:1rem 3rem 1rem 1.15rem !important;
  border:1px solid var(--line) !important;
  border-block-start:3px solid var(--wine-600) !important;
  border-radius:var(--r-md,14px) !important;
  background:#fff !important;color:var(--ink) !important;
  box-shadow:0 18px 44px rgba(22,16,17,.22);
  font-size:.88rem;line-height:1.5;
  opacity:0;transform:translateY(-12px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}
html[dir="rtl"] .seham-toast{padding:1rem 1.15rem 1rem 3rem !important}
.seham-toast.is-in{opacity:1;transform:translateY(0)}
.seham-toast.is-leaving{opacity:0;transform:translateY(-10px)}
.seham-toast::before{content:none !important}
.seham-toast .button{
  margin-inline-start:auto !important;float:none !important;
  min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;
}
.seham-toast-close{
  position:absolute;inset-block-start:.45rem;inset-inline-end:.45rem;
  inline-size:32px;block-size:32px;border-radius:50%;
  color:var(--ink-3);font-size:1.35rem;line-height:1;
  transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
.seham-toast-close:hover{background:var(--surface-2);color:var(--ink)}
.seham-toast-close:focus-visible{outline:2px solid var(--gold-400);outline-offset:2px}

@media(max-width:600px){
  .seham-toast{padding-block:.9rem !important}
  .seham-toast .button{inline-size:100%;margin-inline-start:0 !important}
}
@media(prefers-reduced-motion:reduce){
  .seham-toast{transition:none;opacity:1;transform:none}
}

/* A cart icon you can actually hit with a thumb. */
@media(max-width:760px){
  .nav-actions .icon-btn{min-inline-size:42px;min-block-size:42px}
  .nav-actions .icon-btn .cart-count{font-variant-numeric:tabular-nums}
}

/* While a quantity change is being saved, say so rather than looking frozen. */
.woocommerce-cart-form.has-live-totals [name="update_cart"]{display:none}
.woocommerce-cart-form.is-updating{opacity:.55;pointer-events:none;transition:opacity .2s}
.woocommerce-cart-form .qty{min-block-size:44px;text-align:center}

/* --------------------------------------------------------------------------
   6. THE RECEIPT
   WooCommerce sets the phone and email lines in its own icon font. The theme
   overrides the font stack site-wide, so those glyphs landed on top of the
   text as stray marks. Drop them and space the lines properly instead.
   -------------------------------------------------------------------------- */
.woocommerce-customer-details address{
  display:grid;gap:.35rem;
  padding:clamp(1rem,3vw,1.5rem);
  border:1px solid var(--line);border-radius:var(--r-md,14px);
  font-style:normal;line-height:1.6;
}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email{
  margin:0;padding-inline-start:0 !important;
}
.woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-customer-details .woocommerce-customer-details--email::before,
.woocommerce-customer-details address::before{
  content:none !important;display:none !important;
}
.woocommerce-order-details table.shop_table,
.woocommerce-order-overview{overflow-x:auto}
.woocommerce-order-overview{display:grid;gap:.6rem;padding:0;margin-block-end:1.5rem}
.woocommerce-order-overview li{list-style:none;border:0 !important;padding:0 !important;float:none !important;inline-size:auto !important}

/* The "Owned courses" tile is a link now, so it should behave like one. */
a.studio-stat-link{text-decoration:none;color:inherit;transition:transform .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
a.studio-stat-link:hover{transform:translateY(-3px);border-color:rgba(92,18,37,.4);box-shadow:0 12px 26px rgba(22,16,17,.12)}
a.studio-stat-link small{color:var(--wine-600);font-weight:700}
a.studio-stat-link:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}

/* The full course shelf reuses the dashboard's card, three across. */
.studio-library .studio-topline{align-items:flex-start;margin-block-end:1.75rem}
.studio-library .studio-topline .t-muted{margin-block-start:.35rem;font-size:.8rem;color:var(--ink-3)}
.studio-library .studio-course-card{grid-template-columns:1fr}
.studio-library .studio-course-image{aspect-ratio:16/9;min-block-size:0}
.studio-library .studio-course-body{padding:1rem}
@media(max-width:900px){.studio-library .studio-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.studio-library .studio-course-grid{grid-template-columns:1fr}.studio-library .studio-topline{flex-direction:column;gap:1rem}}

/* Weekday initials stay Latin even inside the Arabic layout. */
.studio-calendar-grid b{direction:ltr;font-variant-numeric:normal;letter-spacing:.02em}

/* --------------------------------------------------------------------------
   7. WOOCOMMERCE NOTICE ICONS
   WooCommerce marks its notices with a glyph from its own icon font. The theme
   sets a font stack site-wide, so that glyph falls back to whatever the system
   has and renders as an empty box sitting on top of the text. Drop the glyph
   and keep the coloured left rule, which carries the same meaning.
   -------------------------------------------------------------------------- */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-error li::before,
.woocommerce-message::after,
.woocommerce-info::after{
  content:none !important;display:none !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  padding-inline-start:1.15rem !important;
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  line-height:1.55;
}
.woocommerce-error{border-block-start-color:var(--danger) !important}
.woocommerce-message .button,
.woocommerce-info .button{order:2;margin-inline-start:auto;float:none !important}
.woocommerce-error{list-style:none;margin-inline-start:0 !important}
.woocommerce-error li{list-style:none;inline-size:100%}

/* --------------------------------------------------------------------------
   8. COURSE CARDS ON A TOUCH SCREEN
   The "View course" chip fades in on hover, which never happens on a phone —
   so the artwork looked pressable and did nothing but start a muted preview.
   Without hover the chip is simply always there, and the artwork opens the
   course. Both are given real 44px targets.
   -------------------------------------------------------------------------- */
@media(hover:none){
  .course-card-open{
    opacity:1 !important;translate:0 0 !important;
    display:inline-flex;align-items:center;gap:.3rem;
    min-block-size:34px;padding-inline:.8rem;
    box-shadow:0 4px 14px rgba(20,4,9,.28);
  }
  .course-video-media.is-tap-to-open{cursor:pointer;-webkit-tap-highlight-color:rgba(92,18,37,.12)}
  .course-video-toggle{inline-size:52px;block-size:52px}
  /* The tilt and the spotlight are hover effects; on a phone they only ever
     fire mid-scroll, so switch them off. */
  .course-video-card{transform:none !important}
  .course-video-card::before{display:none}
  /* Card actions need a thumb-sized target. */
  .card-foot .btn,.card-foot .button{min-block-size:44px}
  .studio-course-card a,.video-wall-card{-webkit-tap-highlight-color:rgba(92,18,37,.12)}
}

/* Keep the floating accessibility button clear of anything in a card's
   bottom corner on a small screen. */
@media(max-width:560px){
  .card-foot{gap:.6rem;flex-wrap:wrap}
  .card-foot .btn{flex:1 1 auto;justify-content:center}
}

/* --------------------------------------------------------------------------
   9. COURSE CARD HEIGHT
   The card body was sized `calc(100% - var(--media-height))`, but nothing ever
   set --media-height, so the fallback made the body as tall as the entire card
   — on top of the artwork above it. The card then overflowed its own box and
   its footer landed over the next card's artwork, whose shade swallowed the
   tap. That is why "Add to cart" did nothing on a phone, where the single
   column puts one card directly beneath another.

   Flex does what the calc was reaching for: the media takes its own height,
   the body takes the rest, and margin-block-start:auto still pins the footer
   to the bottom.
   -------------------------------------------------------------------------- */
.course-video-card{display:flex;flex-direction:column}
.course-video-card>.card-media{flex:0 0 auto}
.course-video-card .card-body{block-size:auto !important;flex:1 1 auto;min-block-size:0}

/* --------------------------------------------------------------------------
   10. THE ACCOUNT ICON ON A PHONE
   Below the nav breakpoint the "Log in" button is hidden and the profile chip
   is too wide to sit beside the cart, which left no way into My Studio without
   opening the menu. A single round icon takes its place: the person outline
   when signed out, the customer's initial when signed in.
   -------------------------------------------------------------------------- */
.nav-account-icon{display:none}
.nav-account-initial{
  display:grid;place-items:center;
  inline-size:100%;block-size:100%;border-radius:50%;
  font-size:.8rem;font-weight:700;line-height:1;
}
@media(max-width:1080px){
  .nav-account-icon{display:grid;place-items:center;min-inline-size:42px;min-block-size:42px}
  .nav-account-icon svg{inline-size:17px;block-size:17px}
  /* The wide profile chip and the Log in button both give way to it. */
  .profile-btn.nav-account{display:none}
  .nav-actions{gap:.4rem}
}
@media(max-width:380px){
  .nav-actions{gap:.3rem}
  .icon-btn.is-wide span{display:none}
}



/* --------------------------------------------------------------------------
   11. THE CONTACT AND NEWSLETTER FORMS
   -------------------------------------------------------------------------- */
/* The bot trap. Hidden from people and from assistive technology, but a real
   field a script will happily fill in. Not display:none — some bots skip that. */
.seham-hp{position:absolute !important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:-1px;padding:0;border:0}

form.is-sending{opacity:.7;pointer-events:none;transition:opacity .2s}
form.is-sending button[type="submit"]{cursor:progress}

.toast.is-success{border-inline-start:4px solid var(--ok,#2F7D5B)}
.toast.is-error{border-inline-start:4px solid var(--danger,#B03449)}

/* The RTL toast rule outranked the "is-on" rule, so on the Arabic site the
   toast slid up and then stayed 140% below the fold — it never appeared. */
html[dir="rtl"] .toast.is-on{transform:translateX(50%) translateY(0)}

/* ==========================================================================
   11. THE TILT — 3D cards that respond to the pointer
   The course cards already carried a tilt, and it never once appeared: the
   transform lived on `.course-video-card` (0,1,0) while `.card:hover` (0,2,0)
   set `translateY(-3px)`, so the moment a cursor arrived the more specific
   rule won and flattened the card. The tilt only ever applied when nobody was
   looking at it. Hence the class below, which is deliberately more specific
   than `.card:hover`, and a rotation people can actually see.
   ========================================================================== */
.tilt{
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  --tilt-scale:1;--tilt-lift:0px;--tilt-rise:0px;--sx:0;--sy:0;
  position:relative;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--tilt-scale)) translateY(calc(var(--tilt-lift) + var(--tilt-rise)));
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-out),box-shadow .45s var(--ease-out),border-color .35s var(--ease-out);
}
/* Beat `.card:hover`, and beat it in both resting and hovered states so the
   card never jumps between two different transforms. */
.tilt.card,.tilt.card:hover,.tilt.card:focus-within{
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--tilt-scale)) translateY(calc(var(--tilt-lift) + var(--tilt-rise)));
}
/* A tilted card is still something that rises into view. Its own transform
   would otherwise overwrite the reveal, so the reveal becomes one more term
   inside it rather than a competing rule. */
.tilt[data-rise]{--tilt-rise:16px;opacity:0}
.tilt[data-rise].is-in{--tilt-rise:0px;opacity:1}
/* While the pointer is on the card the rotation is driven frame by frame, so
   the transform transition is dropped — otherwise every frame would be chasing
   the last one and the card would lag behind the cursor. It comes back the
   instant the pointer leaves, which is what eases the card level again. */
.tilt.is-tilting{
  transition:box-shadow .45s var(--ease-out),border-color .35s var(--ease-out);
  --tilt-scale:1.028;--tilt-lift:-6px;
  will-change:transform;
  z-index:2;
}
.tilt.is-tilting.card{
  box-shadow:calc(var(--sx) * -14px) calc(var(--sy) * -10px + 26px) 52px rgba(40,18,23,.22);
}

/* The light. A soft pool that follows the cursor across the surface, plus a
   thin diagonal streak that reads as the edge of a reflection. */
.tilt-glare{
  position:absolute;inset:0;z-index:6;
  border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease-out);
  background:
    radial-gradient(28% 28% at var(--mx) var(--my),rgba(255,255,255,.26),rgba(255,255,255,.07) 48%,transparent 74%),
    linear-gradient(105deg,transparent 43%,rgba(255,255,255,.06) 50%,transparent 57%);
  mix-blend-mode:soft-light;
}
.tilt.is-tilting .tilt-glare{opacity:1}
/* A course card is mostly a pale surface, and soft-light barely marks white.
   The pool is brighter there so the reflection still reads. */
.course-video-card .tilt-glare{
  background:
    radial-gradient(30% 30% at var(--mx) var(--my),rgba(255,255,255,.62),rgba(255,255,255,.18) 46%,transparent 74%),
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.1) 50%,transparent 58%);
}

/* The old, invisible glow. Replaced by .tilt-glare above. */
.course-video-card::before{display:none}
.course-video-card{transform-style:preserve-3d}

/* A tilt is a cursor effect. A finger has no hover, so on a touch screen it
   would only ever fire mid-scroll — and someone who asked for less motion
   should not be handed a card that moves at all. */
@media(hover:none),(prefers-reduced-motion:reduce){
  .tilt,.tilt.card,.tilt.card:hover{transform:none !important}
  .tilt-glare{display:none}
}

/* ==========================================================================
   12. THE OWNER CARD
   Seham's introduction was a photo beside three lines of text — accurate and
   completely still. She is the academy, so it is a card now: a portrait held
   inside a slowly turning gold rim, her name and words beside it, the social
   icons underneath, and the whole thing leaning towards the cursor.
   ========================================================================== */
.owner-card{
  position:relative;
  max-inline-size:1040px;margin-inline:auto;
  padding:1px;                       /* the rim is this padding, lit from behind */
  border-radius:calc(var(--r-xl) + 6px);
  box-shadow:0 30px 74px rgba(10,2,6,.4);
  background:
    linear-gradient(140deg,rgba(201,171,114,.55),rgba(201,171,114,.06) 38%,rgba(201,171,114,.05) 62%,rgba(201,171,114,.45));
  isolation:isolate;
}
/* Where @property is supported the rim turns, slowly, like light moving over
   a gilded edge. Where it is not, the static gradient above is the whole
   effect and nothing looks broken. */
@property --owner-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@supports (background:conic-gradient(from var(--owner-spin),red,blue)){
  .owner-card{
    --owner-spin:0deg;
    background:conic-gradient(from var(--owner-spin),
      rgba(201,171,114,.06) 0deg,
      rgba(230,211,166,.75) 60deg,
      rgba(201,171,114,.06) 150deg,
      rgba(201,171,114,.06) 210deg,
      rgba(230,211,166,.6) 300deg,
      rgba(201,171,114,.06) 360deg);
    animation:owner-rim 16s linear infinite;
  }
}
@keyframes owner-rim{to{--owner-spin:360deg}}
@media(prefers-reduced-motion:reduce){.owner-card{animation:none}}

.owner-card-inner{
  position:relative;z-index:1;
  border-radius:var(--r-xl);
  padding:clamp(1.4rem,3.4vw,2.9rem);
  /* Opaque on purpose. The rim above is a conic gradient filling the whole
     card box; only an opaque inner surface turns it into a 1px lit edge
     rather than a gold wash across everything behind the text. */
  background:
    radial-gradient(120% 130% at 86% -10%,rgba(201,171,114,.15),rgba(201,171,114,0) 52%),
    linear-gradient(155deg,#2A0E19,#170510 62%);
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.5vw,3rem);
  align-items:center;
  color:var(--on-dark);
}
.sect-wine .owner-card-inner{
  background:
    radial-gradient(120% 130% at 86% -10%,rgba(230,211,166,.17),rgba(230,211,166,0) 52%),
    linear-gradient(155deg,#3A1020,#1E0710 64%);
}

.owner-card-portrait{
  position:relative;margin:0;
  border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 26px 60px rgba(10,2,6,.45);
  transform:translateZ(28px);
}
.owner-card-portrait img{
  inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform 1s var(--ease-out),filter .6s var(--ease-out);
}
.owner-card.is-tilting .owner-card-portrait img{transform:scale(1.075);filter:saturate(1.06)}
/* A band of light that crosses the portrait once the card wakes up. */
.owner-card-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.26) 50%,transparent 58%);
  translate:-120% 0;
}
.owner-card.is-tilting .owner-card-sheen{animation:owner-sheen 1.1s var(--ease-out) forwards}
@keyframes owner-sheen{from{translate:-120% 0}to{translate:120% 0}}

.owner-card-text{transform:translateZ(16px)}
.owner-card-role{margin:0}
.owner-card-name{
  position:relative;display:inline-block;
  margin-block:.5rem .9rem;
  padding-block-end:.35rem;
}
.owner-card-name::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  block-size:2px;inline-size:100%;
  background:linear-gradient(90deg,var(--gold-400),rgba(201,171,114,0));
  transform-origin:left center;transform:scaleX(.24);
  transition:transform .7s var(--ease-out);
}
.owner-card.is-tilting .owner-card-name::after{transform:scaleX(1)}
html[dir="rtl"] .owner-card-name::after{
  transform-origin:right center;
  background:linear-gradient(270deg,var(--gold-400),rgba(201,171,114,0));
}
.owner-card-bio p{color:var(--on-dark-70,rgba(248,245,241,.78))}
.owner-card-bio p + p{margin-block-start:.9rem}
.owner-card-actions{margin-block-start:1.6rem;display:flex;gap:.6rem;flex-wrap:wrap}
.owner-card-social{margin-block-start:1.5rem}

@media(max-width:860px){
  .owner-card-inner{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .owner-card-portrait{aspect-ratio:1/1;max-inline-size:320px;margin-inline:auto;transform:none}
  .owner-card-text{text-align:center;transform:none}
  .owner-card-actions,.owner-card-social{justify-content:center;display:flex}
  .owner-card-name::after{inset-inline:0}
}

/* ==========================================================================
   13. THE COURSE CARD AS A WINDOW
   The tilt alone rotates a flat picture. What makes a card read as a window
   with something behind it is that the layers inside travel different
   distances: the artwork slides against the cursor, as a view through a frame
   does, while the chips and the play button drift with it, as things resting
   on the glass do. Nothing here is a new element — the pieces that were
   already in the card are simply put on different planes.

   The card's own `overflow:hidden` flattens any 3D inside it, so depth is
   done with plain 2D offsets driven by --cx / --cy (where the cursor is,
   -1 to +1) rather than translateZ. It also survives filtering, pagination
   and RTL, which a real 3D scene inside a filtered grid would not.
   ========================================================================== */

/* The view through the frame. Zoomed a little past the edges so the slide
   never exposes a gap, and moving against the pointer. */
.course-video-card .course-video-media video{
  --media-zoom:1.08;
  transform:scale(var(--media-zoom)) translate(calc(var(--cx,0) * -9px),calc(var(--cy,0) * -9px));
  transition:filter .4s var(--ease-out),transform .8s var(--ease-out);
}
.course-video-card:hover .course-video-media video,
.course-video-card.is-playing .course-video-media video{--media-zoom:1.14}
/* While the pointer is on the card the artwork has to keep up with it; .8s of
   easing would leave the picture trailing a third of a second behind the frame
   it is supposed to be seen through. Short enough to track, long enough to
   smooth the step in zoom as the preview starts. */
.course-video-card.is-tilting .course-video-media video{
  transition:filter .4s var(--ease-out),transform .25s var(--ease-out);
}

/* Resting on the glass: with the pointer, and not very far. */
.course-video-card .card-media-tags{transform:translate(calc(var(--cx,0) * 5px),calc(var(--cy,0) * 5px))}
.course-video-card .card-media-foot{transform:translate(calc(var(--cx,0) * 4px),calc(var(--cy,0) * 4px))}
.course-video-card .course-card-open{transform:translate(calc(var(--cx,0) * 6px),calc(var(--cy,0) * 6px))}
/* Nearest the viewer, so it travels furthest. `translate:-50% -50%` does the
   centring, which leaves `transform` free for the parallax — and the pressed
   state has to carry the offset too or the button would jump on tap. */
.course-video-card .course-video-toggle{transform:translate(calc(var(--cx,0) * 9px),calc(var(--cy,0) * 9px))}
.course-video-card .course-video-toggle:active{transform:translate(calc(var(--cx,0) * 9px),calc(var(--cy,0) * 9px)) scale(.92)}
/* The words move least. Text that swims is text nobody reads. */
.course-video-card .card-body{transform:translate(calc(var(--cx,0) * 2.5px),calc(var(--cy,0) * 2.5px))}

.course-video-card .card-media-tags,
.course-video-card .card-media-foot,
.course-video-card .course-card-open,
.course-video-card .course-video-toggle,
.course-video-card .card-body{
  transition:transform .45s var(--ease-out),opacity .3s var(--ease-out),translate .3s var(--ease-out),background .25s var(--ease-out);
}
.course-video-card.is-tilting .card-media-tags,
.course-video-card.is-tilting .card-media-foot,
.course-video-card.is-tilting .course-card-open,
.course-video-card.is-tilting .course-video-toggle,
.course-video-card.is-tilting .card-body{
  transition:transform .18s var(--ease-out),opacity .3s var(--ease-out),translate .3s var(--ease-out),background .25s var(--ease-out);
}

/* No cursor, no parallax — and no motion at all for anyone who asked for less. */
@media(hover:none),(prefers-reduced-motion:reduce){
  .course-video-card .course-video-media video{--media-zoom:1.01;transform:scale(var(--media-zoom))}
  .course-video-card:hover .course-video-media video,
  .course-video-card.is-playing .course-video-media video{--media-zoom:1.045}
  .course-video-card .card-media-tags,
  .course-video-card .card-media-foot,
  .course-video-card .course-card-open,
  .course-video-card .card-body{transform:none}
  .course-video-card .course-video-toggle{transform:none}
  .course-video-card .course-video-toggle:active{transform:scale(.92)}
}

/* ==========================================================================
   14. ورشات وأمسيات — the events as printed posters
   A workshop is a night out, not a product line, so its card is a poster now:
   the photograph is a print sitting inside a white mount, the paper carries the
   soft creases of something that has been folded into six and pinned up, and
   the colour is knocked back the way an old print's is — until you reach for
   it, when the ink comes back.

   Everything on top of the paper is still ordinary HTML: the chips, the date,
   the price and the booking button are untouched and fully pressable. The
   creases are a single pointer-events:none layer and never intercept a thing.
   ========================================================================== */
.event-poster{
  /* 3:4, not the 2:3 of a cinema poster. The photographs behind these are
     landscape, and a taller frame crops the dancers in half. A portrait image
     (1000 x 1333 or taller) in the event's Image URL fills it properly. */
  aspect-ratio:3/4;
  padding:clamp(.7rem,3.6%,1.15rem);       /* the white mount */
  background:#FBF8F4;
  overflow:hidden;position:relative;
  perspective:1000px;
}
/* .card-media lays a dark gradient over everything by default; on a white
   mount that just reads as dirt. */
.event-poster::after{display:none}

.event-poster-frame{
  position:relative;display:block;
  inline-size:100%;block-size:100%;
  overflow:hidden;background:var(--wine-800);
}
/* A scrim under the date and the venue, so they stay legible whatever the
   photograph is doing behind them. */
.event-poster-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,4,9,.7),rgba(20,4,9,.04) 46%,transparent);
}
.event-poster-img{
  inline-size:100%;block-size:100%;object-fit:cover;display:block;
  /* An aged print: the colour knocked back, with a little brightness and
     contrast put back so a dark photograph does not turn to mud. */
  filter:sepia(30%) saturate(50%) brightness(1.06) contrast(1.04);
  transition:filter .7s var(--ease-out),transform 1s var(--ease-out);
}
/* Reach for the poster and the ink comes back. */
.event-card:hover .event-poster-img,
.event-card:focus-within .event-poster-img{filter:sepia(0%) saturate(1) brightness(1) contrast(1);transform:scale(1.05)}

/* The folds. Seven overlapping gradients laid out as two columns by three
   rows: the shading gathers along the seams where the paper was creased. */
.event-poster-creases{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  mix-blend-mode:multiply;opacity:.9;
  transition:opacity .5s var(--ease-out);
  background-image:
    linear-gradient(265deg,rgba(0,0,0,.2),transparent 15%),
    linear-gradient(5deg,rgba(0,0,0,.2),transparent 15%),
    linear-gradient(-5deg,rgba(0,0,0,.1),transparent 15%),
    linear-gradient(5deg,rgba(0,0,0,.1),transparent 15%),
    linear-gradient(-265deg,rgba(0,0,0,.2),transparent 15%),
    linear-gradient(-5deg,rgba(0,0,0,.2),transparent 15%),
    linear-gradient(266deg,rgba(0,0,0,.2),transparent 15%);
  background-repeat:no-repeat;
  background-size:50% 33.3333%;
  background-position:left top,left top,right top,left center,right center,right center,left bottom;
}
/* Lifted off the wall, a poster flattens out a little. */
.event-card:hover .event-poster-creases{opacity:.6}

/* The chips and the date sit on top of the paper, above the creases. */
.event-poster .card-media-tags{z-index:4;inset-block-start:1.25rem;inset-inline-start:1.25rem}
.event-poster .card-media-foot{z-index:4;inset-block-end:1.25rem;inset-inline:1.4rem}

/* Pinned to the wall: a deeper, warmer shadow than a flat card carries. */
.event-card{box-shadow:0 .3rem 1.1rem rgba(20,4,9,.16)}
.event-card:hover{box-shadow:0 1.1rem 2.4rem rgba(20,4,9,.22)}

@media(max-width:560px){
  .event-poster{aspect-ratio:4/5}
  .event-poster .card-media-tags{inset-block-start:1rem;inset-inline-start:1rem}
  .event-poster .card-media-foot{inset-block-end:1rem;inset-inline:1.15rem}
}

/* --------------------------------------------------------------------------
   14b. The folds have to cross the photograph too
   The panel shading is multiplied, which is right for the white mount and
   invisible on a dark photograph — so the creases stopped at the edge of the
   print and the picture underneath looked like a picture, not like paper.

   A real fold is not a shadow. It is a shadow on one side of the seam and a
   highlight on the other, because the paper catches the light where it bends.
   Drawn that way, with both, one layer reads on white paper and on a dark
   photograph alike, and — because it sits above both — the seams run
   continuously across the mount and the print, exactly as a poster folded into
   six does.
   -------------------------------------------------------------------------- */
.event-poster-fold{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  opacity:.78;
  transition:opacity .5s var(--ease-out);
  background-image:
    /* the vertical fold, down the middle */
    linear-gradient(90deg,
      transparent calc(50% - 42px),
      rgba(0,0,0,.1) calc(50% - 12px),
      rgba(0,0,0,.17) calc(50% - 2px),
      rgba(255,255,255,.2) calc(50% - 1px),
      rgba(255,255,255,.22) calc(50% + 1px),
      rgba(0,0,0,.1) calc(50% + 3px),
      rgba(0,0,0,.055) calc(50% + 13px),
      transparent calc(50% + 42px)),
    /* and the two horizontal ones, at a third and two thirds */
    linear-gradient(180deg,
      transparent calc(33.333% - 36px),
      rgba(0,0,0,.085) calc(33.333% - 11px),
      rgba(0,0,0,.15) calc(33.333% - 2px),
      rgba(255,255,255,.17) calc(33.333% - 1px),
      rgba(255,255,255,.19) calc(33.333% + 1px),
      rgba(0,0,0,.085) calc(33.333% + 3px),
      rgba(0,0,0,.05) calc(33.333% + 12px),
      transparent calc(33.333% + 36px)),
    linear-gradient(180deg,
      transparent calc(66.667% - 36px),
      rgba(0,0,0,.05) calc(66.667% - 12px),
      rgba(0,0,0,.09) calc(66.667% - 2px),
      rgba(255,255,255,.16) calc(66.667% - 1px),
      rgba(255,255,255,.18) calc(66.667% + 1px),
      rgba(0,0,0,.15) calc(66.667% + 3px),
      rgba(0,0,0,.09) calc(66.667% + 11px),
      transparent calc(66.667% + 36px));
}
.event-card:hover .event-poster-fold{opacity:.5}

/* The tooth of the paper. Barely there, and the reason a photograph on a
   screen starts to look like a photograph that was printed. */
.event-poster-grain{
  position:absolute;inset:0;z-index:4;
  pointer-events:none;
  opacity:.22;mix-blend-mode:overlay;
  transition:opacity .5s var(--ease-out);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.event-card:hover .event-poster-grain{opacity:.16}

/* The chips and the date belong to the website, not to the paper, so they stay
   above every one of these layers. */
.event-poster .card-media-tags,.event-poster .card-media-foot{z-index:6}

@media(prefers-reduced-motion:reduce){
  .event-poster-fold,.event-poster-grain,.event-poster-creases{transition:none}
}

/* ==========================================================================
   15. SILK BEHIND THE PAGE HEADERS
   The interior headers — ورشات وأمسيات, the course library, membership,
   contact — were a flat panel of wine. They are the first thing on the page
   and they said nothing. Now there is satin behind them, moving the way heavy
   fabric moves: slowly enough that you notice it only if you stay.

   Two layers do it. The cloth itself drifts and breathes on ::before; the
   scrim, the gold bloom and a travelling sheen sit on ::after, above it, so
   the light crosses the fabric rather than the fabric carrying the light with
   it. The scrim is what keeps every word on top of it readable — that is not
   negotiable, and it is why the fabric never rises above about half strength.
   ========================================================================== */
.pagehead,.owner-section,.course-hero,.creed-section,.events-online-band{
  /* One set of dials, two places that use them. The page headers want the
     cloth held well back behind a headline; the section around Seham's card
     wants it forward and lit, because there it is the room she is standing in
     rather than a backdrop for type. */
  --silk-img:var(--seham-silk, url("../img/silk.jpg"));
  --silk-opacity:.62;
  --silk-bright:.72;
  --silk-sat:.82;
  --silk-scrim-1:rgba(20,4,9,.46);
  --silk-scrim-2:rgba(20,4,9,.58);
  --silk-scrim-3:rgba(20,4,9,.82);
  --silk-bloom:rgba(201,171,114,.16);
}
.owner-section{
  position:relative;isolation:isolate;overflow:hidden;
  --silk-opacity:.86;
  --silk-bright:1.04;
  --silk-sat:1;
  --silk-scrim-1:rgba(46,12,24,.3);
  --silk-scrim-2:rgba(38,10,20,.36);
  --silk-scrim-3:rgba(24,5,12,.56);
  --silk-bloom:rgba(230,211,166,.2);
}
/* Brighter even before the photograph arrives, so nothing flashes near-black
   on a slow connection. */
.owner-section,.sect-dark.owner-section,.sect-wine.owner-section{background:var(--wine-700)}

.pagehead::before,.owner-section::before,.home-testimonial::before,.course-hero::before,.creed-section::before,.events-online-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--silk-img);
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  opacity:var(--silk-opacity);
  /* Nudged towards the brand rather than the photograph's own red. */
  filter:saturate(var(--silk-sat)) brightness(var(--silk-bright)) hue-rotate(-6deg);
  transform-origin:58% 45%;
  animation:silk-drift 38s var(--ease-io,ease-in-out) infinite;
  will-change:transform;
}
.owner-section::before{animation-duration:46s;background-position:center 55%}
@keyframes silk-drift{
  0%   {transform:scale(1.16) translate3d(-1.4%,-1%,0)}
  50%  {transform:scale(1.26) translate3d(1.6%,1.2%,0)}
  100% {transform:scale(1.16) translate3d(-1.4%,-1%,0)}
}

/* The scrim, the gold bloom that was already here, and the sheen. */
.pagehead::after,.owner-section::after,.home-testimonial::after,.course-hero::after,.creed-section::after,.events-online-band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    /* A long ramp on both sides: a short one leaves a visible vertical edge
       travelling across the header, which reads as a seam, not as light. */
    linear-gradient(102deg,transparent 14%,rgba(255,222,180,.035) 30%,rgba(255,222,180,.1) 45%,rgba(255,255,255,.055) 50%,rgba(255,222,180,.08) 55%,rgba(255,222,180,.03) 70%,transparent 86%),
    radial-gradient(75% 110% at 82% 0%,var(--silk-bloom),transparent 60%),
    linear-gradient(to bottom,var(--silk-scrim-1),var(--silk-scrim-2) 55%,var(--silk-scrim-3));
  background-size:230% 100%,cover,cover;
  background-position:200% 0,center,center;
  background-repeat:no-repeat;
  animation:silk-sheen 26s linear infinite;
}
@keyframes silk-sheen{
  from{background-position:210% 0,center,center}
  to  {background-position:-130% 0,center,center}
}

/* A phone has less screen for the fabric to read across and a battery to
   think about, so the cloth holds still and only the sheen travels. */
@media(max-width:760px){
  .pagehead::before,.owner-section::before,.home-testimonial::before,.course-hero::before,.creed-section::before,.events-online-band::before{animation:none;transform:scale(1.12)}
  .pagehead::after,.owner-section::after,.home-testimonial::after,.course-hero::after,.creed-section::after,.events-online-band::after{animation-duration:34s}
}
@media(prefers-reduced-motion:reduce){
  .pagehead::before,.owner-section::before,.home-testimonial::before,.course-hero::before,.creed-section::before,.events-online-band::before{animation:none;transform:scale(1.14)}
  .pagehead::after,.owner-section::after,.home-testimonial::after,.course-hero::after,.creed-section::after,.events-online-band::after{animation:none;background-position:60% 0,center,center}
}

/* Against a lit room the card has to hold its own edge, so it darkens a shade
   and its shadow deepens — the contrast is what keeps her portrait the
   brightest thing in the section. */
.owner-section .owner-card{box-shadow:0 34px 90px rgba(8,1,5,.5)}
.owner-section .owner-card-inner{
  background:
    radial-gradient(120% 130% at 86% -10%,rgba(230,211,166,.16),rgba(230,211,166,0) 52%),
    linear-gradient(155deg,rgba(34,12,22,.93),rgba(17,4,11,.95) 64%);
}

/* ==========================================================================
   16. THE TESTIMONIAL AS A MESSAGE
   It was a paragraph in italics on a wine field — the shape every website uses
   for a quote, and the shape nobody reads. What a student actually wrote you
   arrives as a message, so it is presented as one: two bubbles, a time, a pair
   of ticks that go gold when they are read, and the small pause between them
   where you can see her typing.

   It is deliberately not a copy of WhatsApp. No logo, no green, no fake app
   chrome — a screenshot of a real app is a forgery, and this is a testimonial.
   It borrows the grammar of a chat and nothing else, in the academy's own
   colours.
   ========================================================================== */
.home-testimonial .quote{display:none}
/* The flat wine field this sat on belonged to an earlier version of the site.
   Everything around it is cloth now, so this is too — but held further back
   than anywhere else, because the messages are the subject and the room they
   are read in must not compete with them. */
.home-testimonial{
  position:relative;isolation:isolate;overflow:hidden;
  --silk-img:var(--seham-silk, url("../img/silk.jpg"));
  --silk-opacity:.46;
  --silk-bright:.66;
  --silk-sat:.78;
  --silk-scrim-1:rgba(30,7,16,.5);
  --silk-scrim-2:rgba(24,5,13,.6);
  --silk-scrim-3:rgba(20,4,9,.76);
  --silk-bloom:rgba(201,171,114,.13);
}
.home-testimonial::before{
  background-position:center 34%;animation-duration:56s;
  /* This section follows Seham's, and one piece of silk butting against
     another at a different scrim draws a hard line across the page. Fading the
     cloth in at the top edge lets the two dissolve into each other instead. */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 13%);
  mask-image:linear-gradient(to bottom,transparent,#000 13%);
}
.chat-eyebrow{text-align:center;margin-block-end:1.4rem}

.chat{
  max-inline-size:36rem;margin-inline:auto;
  display:flex;flex-direction:column;gap:.5rem;
}
.chat-day{
  align-self:center;margin-block-end:.7rem;
  padding:.3rem .8rem;border-radius:999px;
  background:rgba(20,4,9,.34);
  border:1px solid rgba(248,245,241,.1);
  color:var(--on-dark-3);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}

.chat-line{display:flex;align-items:flex-end;gap:.6rem}
.chat-avatar{
  flex:0 0 auto;
  inline-size:34px;block-size:34px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-400),var(--wine-500));
  color:var(--wine-900);font-weight:700;font-size:.85rem;
  box-shadow:0 4px 14px rgba(10,2,6,.4);
}
/* Two messages from the same person do not both need her face. The space is
   kept so the bubbles stay in one column. */
.chat-line.is-same-sender .chat-avatar{background:none;box-shadow:none}

.chat-bubble{
  position:relative;
  max-inline-size:min(100%,28rem);
  padding:.8rem 1rem .55rem;
  border-radius:1.15rem;
  border-start-start-radius:.3rem;      /* the corner the tail comes from */
  background:linear-gradient(155deg,rgba(255,255,255,.115),rgba(255,255,255,.055));
  border:1px solid rgba(248,245,241,.13);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 26px rgba(10,2,6,.28);
  color:var(--on-dark);
}
.chat-line.is-same-sender .chat-bubble{border-start-start-radius:1.15rem}
/* No drawn tail. `background:inherit` on a pseudo-element restarts the
   gradient in its own box, so the nub never matched the bubble behind it and
   read as a stray highlight. The squared corner alone says "bubble" — which is
   how most messaging apps draw the second message in a run anyway. */
.chat-text{margin:0;text-align:start;line-height:1.65;font-size:clamp(1rem,1.6vw,1.12rem)}
.chat-meta{
  display:flex;align-items:center;justify-content:flex-end;gap:.35rem;
  margin-block-start:.3rem;
  color:var(--on-dark-3);font-size:.66rem;
}
.chat-ticks svg{inline-size:17px;block-size:12px;display:block;color:var(--on-dark-3);transition:color .5s var(--ease-out)}
.chat-line.is-read .chat-ticks svg{color:var(--gold-300)}

.chat-who{
  align-self:center;margin-block-start:1.1rem;
  color:var(--on-dark-3);font-size:.75rem;letter-spacing:.04em;
}
.chat-who::before{content:"— ";opacity:.7}

/* ---- the three dots, while she is typing ---- */
.chat-typing{display:none;gap:.28rem;padding-block:.34rem .2rem}
.chat-typing i{
  inline-size:7px;block-size:7px;border-radius:50%;
  background:var(--on-dark-3);
  animation:chat-dot 1.25s ease-in-out infinite;
}
.chat-typing i:nth-child(2){animation-delay:.16s}
.chat-typing i:nth-child(3){animation-delay:.32s}
@keyframes chat-dot{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}
}

/* ---- the sequence ----
   Nothing here applies until the script says it will run it, so with no
   JavaScript at all the whole message is simply there, read and legible. */
.chat.is-live .chat-line{opacity:0;transform:translateY(10px) scale(.97);transform-origin:bottom left}
.chat.is-live .chat-line.is-typing,
.chat.is-live .chat-line.is-said{
  opacity:1;transform:none;
  transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);
}
.chat.is-live .chat-line.is-typing .chat-text,
.chat.is-live .chat-line.is-typing .chat-meta{display:none}
.chat.is-live .chat-line.is-typing .chat-typing{display:flex}
.chat.is-live .chat-line.is-typing .chat-bubble{max-inline-size:5rem}

html[dir="rtl"] .chat.is-live .chat-line{transform-origin:bottom right}

@media(max-width:560px){
  .chat-bubble{padding:.7rem .85rem .5rem}
  .chat-avatar{inline-size:30px;block-size:30px;font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  .chat.is-live .chat-line{opacity:1;transform:none}
  .chat-typing i{animation:none}
}

/* ==========================================================================
   17. THE ACADEMY BAND — champagne silk, and no cards
   Two changes, both asked for and both improvements.

   The band was a dark photograph under a near-opaque wine wash. It is the same
   satin as everywhere else now, but re-dyed: the burgundy stripped out to pure
   luminance and the cloth put back through a champagne ramp — warm shadow,
   sand, near-white highlight. A light section between two dark ones is what
   gives the page somewhere to breathe.

   And the numbers have lost their panes. Four bordered, blurred, lifting cards
   were four pieces of furniture standing between the reader and four figures.
   A hairline between each is enough to separate them; everything else the
   cards were doing, the numbers can do themselves.
   ========================================================================== */
/* The band has no background of its own any more, and that is the whole point.
   Two pieces of silk meeting edge to edge — different scrim, different filter —
   drew a hard horizontal line across the page right underneath Seham. The
   numbers now sit inside her section, on the cloth that is already there, so
   there is nothing to seam against: one surface, her card, and the academy's
   four figures underneath it.

   The champagne weave still ships as assets/img/silk-beige.jpg if a light band
   is ever wanted somewhere. */
.academy-figures{
  /* wp-theme.css still paints this wine-900 and clips it; both have to go or
     the block keeps its own opaque panel and the seam simply moves. */
  position:static;background:none;overflow:visible;isolation:auto;
  margin-block-start:clamp(2.6rem,6vw,4.4rem);
  padding-block-start:clamp(1.8rem,4vw,2.8rem);
  border-block-start:1px solid rgba(201,171,114,.16);
  color:var(--on-dark);
}
.academy-figures .t-eyebrow{color:var(--gold-400)}

/* ---- the numbers, unhoused ---- */
.academy-figures .figures{gap:0}
.academy-figures .figure{
  padding:clamp(.3rem,1vw,.6rem) clamp(.9rem,2.6vw,2rem);
  border:0;border-radius:0;
  background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
}
.academy-figures .figure::after{display:none}
/* One hairline between each, which is all the separation four numbers need. */
.academy-figures .figure + .figure{border-inline-start:1px solid rgba(201,171,114,.2)}
.academy-figures .figure .n{color:var(--gold-400)}
.academy-figures .figure .l{color:var(--on-dark-3)}
.academy-figures .figure .rule{background:linear-gradient(90deg,var(--gold-300),rgba(230,211,166,0))}
html[dir="rtl"] .academy-figures .figure .rule{background:linear-gradient(270deg,var(--gold-300),rgba(230,211,166,0))}

/* Hover still answers, it just no longer has a box to lift. */
/* ---- light travelling along the row ----
   The satin behind these already has a sheen crossing it. This is the same
   idea carried through to the type: a highlight passes along the four figures
   in turn, half a second apart, lighting each one and drawing its rule out
   under it. It is what makes a row of numbers feel like it is sitting on
   fabric rather than printed over a picture of some. */
@keyframes fig-lit{
  0%,72%,100%{color:var(--gold-400);text-shadow:none}
  9%,17%     {color:var(--gold-300);text-shadow:0 0 28px rgba(230,211,166,.5)}
}
@keyframes fig-rule{
  0%,72%,100%{inline-size:0}
  9%,17%     {inline-size:38px}
}
.academy-figures .figure .n{animation:fig-lit 9s ease-in-out infinite}
.academy-figures .figure .rule{animation:fig-rule 9s ease-in-out infinite}
.academy-figures .figure:nth-child(2) .n,.academy-figures .figure:nth-child(2) .rule{animation-delay:.55s}
.academy-figures .figure:nth-child(3) .n,.academy-figures .figure:nth-child(3) .rule{animation-delay:1.1s}
.academy-figures .figure:nth-child(4) .n,.academy-figures .figure:nth-child(4) .rule{animation-delay:1.65s}

/* A pointer outranks the passing light: `animation:none` hands the number back
   to the cascade, because an animation otherwise wins over a plain hover rule
   no matter how specific that rule is. */
.academy-figures .figure:hover,.academy-figures .figure.is-lit{
  transform:translateY(-4px);
  border-color:rgba(201,171,114,.2);
  box-shadow:none;
}
.academy-figures .figure:hover .n,.academy-figures .figure.is-lit .n{
  animation:none;color:var(--gold-300);text-shadow:0 0 30px rgba(230,211,166,.55);
}
.academy-figures .figure:hover .rule,.academy-figures .figure.is-lit .rule{animation:none;inline-size:38px}
.academy-figures .figure:hover .l,.academy-figures .figure.is-lit .l{color:var(--on-dark)}

@media(prefers-reduced-motion:reduce){
  .academy-figures .figure .n,.academy-figures .figure .rule{animation:none}
  .academy-figures .figure .rule{inline-size:24px}
}

@media(max-width:680px){
  /* Two columns: the vertical hairlines would cut the wrong way, so the split
     is drawn where it actually falls. */
  .academy-figures .figure + .figure{border-inline-start:0}
  .academy-figures .figure{padding-block:clamp(.7rem,3vw,1.1rem)}
  .academy-figures .figure:nth-child(2n){border-inline-start:1px solid rgba(201,171,114,.2)}
  .academy-figures .figure:nth-child(n+3){border-block-start:1px solid rgba(201,171,114,.16)}
}

/* ==========================================================================
   16b. FOUR PEOPLE, FOUR PLACES
   One person's monologue split into bubbles was never quite the truth. Praise
   arrives from different people, on whatever they happen to have open — so each
   message now carries a name, an accent taken from the app it came from, and
   the read receipt that app actually uses. They alternate sides, which is what
   says "these are four people" before a single word is read.

   Every one of these is a hint and not a reproduction: the site's own type,
   the site's own glass, one accent hue and a tick or a word. No app chrome, no
   logos, nothing that could be mistaken for a screenshot of a real inbox —
   which would be a forgery rather than a testimonial.
   ========================================================================== */
.chat-line{--chat-accent:var(--gold-400);--chat-accent-2:var(--wine-500)}
.chat-line[data-app="whatsapp"] {--chat-accent:#5BD07E;--chat-accent-2:#128C7E}
.chat-line[data-app="instagram"]{--chat-accent:#F2789D;--chat-accent-2:#8A44C8}
.chat-line[data-app="messenger"]{--chat-accent:#5BA9FF;--chat-accent-2:#9B4DFF}
.chat-line[data-app="sms"]      {--chat-accent:#6FB4FF;--chat-accent-2:#1F6FD0}
.chat-line[data-app="telegram"] {--chat-accent:#57BEEE;--chat-accent-2:#1E7FB5}

.chat-stack{display:flex;flex-direction:column;gap:.3rem;min-inline-size:0}
.chat-from{
  padding-inline-start:.15rem;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--chat-accent);
}
.chat-avatar{
  background:linear-gradient(150deg,var(--chat-accent),var(--chat-accent-2));
  color:rgba(255,255,255,.94);
}
/* Every message is now its own message, so every one keeps its own tail corner
   and its own face. */
.chat-line.is-same-sender .chat-avatar{background:linear-gradient(150deg,var(--chat-accent),var(--chat-accent-2))}
.chat-bubble{border-color:color-mix(in srgb,var(--chat-accent) 26%,rgba(248,245,241,.13))}
/* A thin bar of the accent down the tail side: enough to place the message,
   far too little to be mistaken for the app itself. */
.chat-bubble::after{
  content:"";position:absolute;
  inset-block:.75rem;inset-inline-start:0;
  inline-size:2px;border-radius:2px;
  background:linear-gradient(var(--chat-accent),var(--chat-accent-2));
  opacity:.75;
}

/* ---- the other side ---- */
.chat-line.is-flipped{flex-direction:row-reverse}
/* The stack fills the rest of the row, so a bubble narrower than the row was
   left hanging at the far side with the avatar stranded ninety pixels away.
   Pushing the column's contents to the end puts the bubble back against its
   own avatar, which is the whole point of the other side. */
.chat-line .chat-stack{align-items:flex-start}
.chat-line.is-flipped .chat-stack{align-items:flex-end}
.chat-line.is-flipped .chat-from{text-align:end;padding-inline:0 .15rem}
.chat-line.is-flipped .chat-bubble{
  border-start-start-radius:1.15rem;border-start-end-radius:.3rem;
}
/* The time and the receipt stay in the bottom corner nearest the reader's eye
   on both sides — every app does this, and swapping it made the wall feel
   inconsistent rather than mirrored. */
.chat-line.is-flipped .chat-bubble::after{inset-inline:auto 0}

/* ---- receipts ---- */
.chat-receipt{display:inline-flex;align-items:center;color:var(--on-dark-3);transition:color .5s var(--ease-out)}
.chat-receipt.is-ticks svg{inline-size:17px;block-size:12px;display:block}
.chat-receipt.is-ticks.is-single svg{inline-size:12px;block-size:12px}
.chat-receipt.is-word{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.chat-receipt.is-dot{
  inline-size:11px;block-size:11px;border-radius:50%;
  border:1.5px solid currentColor;
  background:radial-gradient(circle at 50% 50%,currentColor 0 42%,transparent 43%);
}
.chat-line.is-read .chat-receipt{color:var(--chat-accent)}
/* The old single-colour ticks are folded into the receipt above. */
.chat-ticks{display:none}

/* Names are short and the bubbles are wide; without this the wall drifts into
   one column again on a narrow screen. */
@media(max-width:560px){
  .chat-line,.chat-line.is-flipped{gap:.45rem}
  .chat-bubble{max-inline-size:100%}
  .chat-from{font-size:.64rem}
}

/* --------------------------------------------------------------------------
   18. ONE COURSE
   Seham sells a single course. In a three-column grid one card sits in a third
   of the page looking like the first of a set that never arrives, so a lone
   course is centred and given the width of two.
   -------------------------------------------------------------------------- */
.course-grid-single{grid-template-columns:minmax(0,1fr) !important;max-inline-size:520px;margin-inline:auto}
@media(min-width:860px){
  .course-grid-single{max-inline-size:640px}
  .course-grid-single .course-video-card{--tilt-max:6}
}

/* ==========================================================================
   19. HER STORY
   Long-form writing, which the site had nowhere to put — and then put in the
   same 16px it uses for a card caption. This is the one page on the site that
   is read rather than scanned, so it gets its own scale: a wider type size, a
   measure short enough to find the next line without hunting for it, and
   leading that lets Arabic breathe (its ascenders and descenders need more
   room than Latin, hence the separate line-height throughout).
   ========================================================================== */
.story-head{padding-block-end:clamp(2.2rem,5vw,3.4rem)}
.story-head .t-display{margin-block-start:.35rem}
.story-standfirst{
  margin-block-start:1.1rem;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;
  letter-spacing:-.015em;color:var(--on-dark-2);
  max-inline-size:46ch;
}
html[lang="ar"] .story-standfirst{line-height:1.85;letter-spacing:0;font-weight:400;max-inline-size:40ch}

/* ---- the reading column ---- */
/* The column keeps whatever measure its wrapper gives it (wrap-narrow), and
   each paragraph keeps a shorter one inside that. */
.prose-column>*+*{margin-block-start:1.5em}
.prose-column p{
  font-size:clamp(1.06rem,1.35vw,1.19rem);
  line-height:1.85;
  color:var(--ink-2);
  max-inline-size:62ch;
  text-wrap:pretty;
}
html[lang="ar"] .prose-column p{
  font-size:clamp(1.08rem,1.45vw,1.24rem);
  line-height:2.05;letter-spacing:0;max-inline-size:54ch;
}
/* The first paragraph carries the reader in, so it is set a step up and kept
   short — a standfirst inside the prose rather than another equal block. */
.prose-column p.story-open{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.22rem,2.1vw,1.55rem);line-height:1.6;
  letter-spacing:-.02em;color:var(--ink-1);max-inline-size:48ch;
}
html[lang="ar"] .prose-column p.story-open{
  font-weight:400;line-height:1.9;letter-spacing:0;max-inline-size:42ch;
}
/* Her own questions, which she is quoting rather than asserting. Set in from
   the column with a hairline, never in italics in Arabic — a slanted Arabic
   face is a distortion of the letterforms, not an emphasis. */
.prose-column p.is-quiet{
  padding-inline-start:1.4rem;
  border-inline-start:2px solid rgba(201,171,114,.5);
  font-style:italic;color:var(--ink-3);
  font-size:clamp(1rem,1.25vw,1.1rem);
}
html[lang="ar"] .prose-column p.is-quiet{font-style:normal;font-size:clamp(1.02rem,1.3vw,1.14rem)}
.sect-wine .prose-column p,.sect-dark .prose-column p{color:var(--on-dark-2)}
.sect-wine .prose-column p.is-quiet,.sect-dark .prose-column p.is-quiet{color:var(--on-dark-3)}

/* ---- the one line she pulls out of the story ---- */
.about-pull{
  margin-block:clamp(2.4rem,5vw,3.6rem);
  padding-block:clamp(1.4rem,3vw,2rem);
  border-block:1px solid rgba(201,171,114,.42);
  text-align:center;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.38;
  letter-spacing:-.025em;color:var(--wine-600);
  max-inline-size:24ch;margin-inline:auto;
}
html[lang="ar"] .about-pull{line-height:1.75;letter-spacing:0;font-weight:400;max-inline-size:22ch;font-size:clamp(1.4rem,2.9vw,1.95rem)}
.sect-wine .about-pull,.sect-dark .about-pull{color:var(--gold-300)}

/* ---- about me, beside the portrait ---- */
/* Her portrait is not an illustration beside the story — on a wide screen it is
   the wall the story is written on. It runs the full height of the section and
   off the edge of the screen, with no frame and no corners, and the words sit
   on the silk beside it behind a gradient deep enough to keep every line
   readable. Below the breakpoint it goes back to being a picture above the
   text, because a full-bleed portrait on a phone leaves nowhere to read. */
.about-split{gap:clamp(2rem,5vw,4.5rem);align-items:start;grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
.about-portrait{max-inline-size:min(100%,540px)}

@media (min-width:861px){
  .about-section{position:relative;overflow:hidden}
  .about-section .about-split{grid-template-columns:minmax(0,1fr);min-block-size:min(92vh,900px)}
  /* The column runs the whole height of the section and off the edge of the
     screen. The photograph inside it is a screen tall and follows the scroll,
     so her whole figure stays in frame however long the story runs — stretching
     one picture over seventeen hundred pixels would have cropped it to a chin. */
  .about-section .about-portrait{
    position:absolute;inset-block:0;inset-inline-start:0;z-index:0;
    inline-size:min(58%,920px);max-inline-size:none;
    border-radius:0;box-shadow:none;
  }
  .about-section .about-portrait img{
    position:sticky;inset-block-start:0;
    inline-size:100%;block-size:100vh;max-block-size:none;
    object-fit:cover;object-position:50% 18%;aspect-ratio:auto;
    /* It dissolves into the silk rather than ending on a line, which is what
       makes it read as the background of the page and not a picture on it.
       Two masks, multiplied together: one fades it out towards the words, the
       other softens the top and the bottom. Without the second one the photo
       ends on a hard horizontal edge as it scrolls — a seam straight across
       the silk. */
    -webkit-mask-image:
      linear-gradient(to right,#000 30%,rgba(0,0,0,.35) 76%,transparent 97%),
      linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%);
    mask-image:
      linear-gradient(to right,#000 30%,rgba(0,0,0,.35) 76%,transparent 97%),
      linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  html[dir="rtl"] .about-section .about-portrait img{
    -webkit-mask-image:
      linear-gradient(to left,#000 30%,rgba(0,0,0,.35) 76%,transparent 97%),
      linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%);
    mask-image:
      linear-gradient(to left,#000 30%,rgba(0,0,0,.35) 76%,transparent 97%),
      linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%);
  }
  .about-section .about-copy{
    position:relative;z-index:1;
    max-inline-size:min(100%,52ch);margin-inline-start:auto;
    padding-block:clamp(1rem,4vw,3rem);
  }
}

@media (min-width:861px){
  /* The text runs long; the portrait rides along with it rather than leaving a
     column of empty silk behind. */
  .about-portrait{position:sticky;inset-block-start:calc(var(--nav-h) + 2rem)}
}
.about-copy>*+*{margin-block-start:1.35em}
.about-split .t-lead{
  font-size:clamp(1.02rem,1.2vw,1.1rem);line-height:1.9;
  color:rgba(248,245,241,.84);max-inline-size:54ch;text-wrap:pretty;
}
html[lang="ar"] .about-split .t-lead{font-size:clamp(1.04rem,1.25vw,1.14rem);line-height:2.1;max-inline-size:46ch}
.about-lines{
  margin-block:clamp(1.6rem,3vw,2.2rem) !important;padding:0;list-style:none;
  display:grid;gap:.85rem;
}
.about-lines li{
  padding-inline-start:2.1rem;position:relative;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.08rem,1.6vw,1.26rem);line-height:1.45;
  letter-spacing:-.018em;color:var(--gold-300);max-inline-size:44ch;
}
html[lang="ar"] .about-lines li{font-weight:400;letter-spacing:0;line-height:1.8}
.about-lines li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;
  inline-size:1.3rem;block-size:1px;background:var(--gold-400);opacity:.8;
}
.about-close{
  font-family:var(--display) !important;font-weight:300 !important;
  font-size:clamp(1.15rem,1.9vw,1.4rem) !important;line-height:1.55 !important;
  color:var(--on-dark) !important;
}
html[lang="ar"] .about-close{font-weight:400 !important;line-height:1.95 !important}

/* ---- the vision ---- */
.vision-column{text-align:center}
/* Centre the block, not the sentences — centred long-form Arabic is a wall
   with no left edge to return to. The eyebrow stays centred, hence :not(). */
.vision-column p:not(.t-eyebrow){margin-inline:auto;text-align:start}
.vision-head{margin-block-end:clamp(1.8rem,4vw,2.6rem)}
.vision-pairs{
  margin-block:clamp(2rem,4vw,2.8rem) !important;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
}
.vision-pairs li{
  padding:.62rem 1.3rem;border-radius:999px;
  border:1px solid rgba(92,18,37,.2);
  background:rgba(255,255,255,.62);
  color:var(--wine-600);font-size:1rem;font-weight:500;
}

/* ---- her English creed ---- */
.creed-section{padding-block:clamp(4.5rem,10vw,8rem)}
.creed-set{
  display:flex;flex-direction:column;gap:.4rem;
  color:var(--gold-300);
  font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.creed-line{
  margin-block-start:2.4rem;
  font-family:var(--display);font-weight:200;
  font-size:clamp(1.6rem,4.2vw,2.8rem);line-height:1.32;
  letter-spacing:-.03em;color:var(--on-dark);
  max-inline-size:20ch;margin-inline:auto;
  /* Her English, set in her own voice — left as Latin even in the Arabic
     version, because these four lines are the ones she wrote in English. */
  direction:ltr;
}
.creed-line em{font-style:normal;color:var(--gold-300)}

@media(max-width:860px){
  .about-split{grid-template-columns:1fr}
  .about-portrait{max-inline-size:min(100%,440px);margin-inline:auto}
  .about-pull{max-inline-size:none}
  .prose-column p,.about-split .t-lead{max-inline-size:none}
}

/* ==========================================================================
   20. NOT OPEN YET
   Membership and Coaching are both real and neither is for sale. A page that
   says "coming soon" and then shows three price tiers is worse than no page at
   all, so there is nothing to choose here — one card that explains what is
   coming and why it is not here yet, and a single line to leave an email on.
   ========================================================================== */
.soon-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .95rem;border-radius:999px;
  border:1px solid rgba(201,171,114,.4);
  background:rgba(201,171,114,.1);
  color:var(--gold-300);
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.soon-dot{
  inline-size:6px;block-size:6px;border-radius:50%;background:var(--gold-300);
  animation:soon-pulse 2.4s ease-in-out infinite;
}
@keyframes soon-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.soon-dot{animation:none;opacity:.9}}

.soon-card{
  padding:clamp(1.5rem,4vw,2.8rem);
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:var(--e-3);
}
.soon-card>*+*{margin-block-start:1.1rem}
.soon-card .t-lead{line-height:1.8}
.soon-points{
  margin-block:1.4rem;padding:0;list-style:none;
  display:grid;gap:.6rem;
}
.soon-points li{
  position:relative;padding-inline-start:1.6rem;
  color:var(--ink-2);
}
.soon-points li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;
  inline-size:8px;block-size:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--gold-400),var(--wine-500));
}
/* A point that carries its own small picture uses it as the bullet, so the
   theme's gold marker steps aside rather than doubling up beside it. */
.soon-points.has-icons li{padding-inline-start:2.1rem}
.soon-points.has-icons li::before{display:none}
.soon-point-icon{
  position:absolute;inset-inline-start:0;inset-block-start:0;
  inline-size:1.5rem;text-align:center;font-size:1.05em;line-height:1.5;
}
.soon-form{
  margin-block-start:1.8rem;padding-block-start:1.5rem;
  border-block-start:1px solid var(--line);
}
.soon-form form{margin-block-start:.9rem;gap:.5rem;flex-wrap:wrap}
.soon-form .input{flex:1 1 15rem;min-inline-size:0}
.soon-note{margin-block-start:1.4rem}
.soon-elsewhere{margin-block-start:clamp(1.8rem,4vw,2.6rem);flex-wrap:wrap;gap:.6rem}
@media(max-width:560px){
  .soon-elsewhere .btn{flex:1 1 100%;justify-content:center}
  .soon-form .btn{flex:1 1 100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   21. THREE WAYS IN
   The homepage used to show three membership tiers at ₪89, ₪149 and ₪249 for a
   membership that does not exist. These are the three real ways to learn with
   her, and the one that is not open says so instead of showing a price.
   -------------------------------------------------------------------------- */
.ways-grid{align-items:stretch}
.way-card{
  display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.2rem,2.6vw,1.8rem);
}
.way-card .btn,.way-card .row{margin-block-start:auto}
.way-flag{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.28rem .7rem;border-radius:999px;
  background:rgba(92,18,37,.09);color:var(--wine-600);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.way-flag.is-soon{background:rgba(201,171,114,.16);color:var(--gold-500)}
.way-card.is-soon{border-style:dashed}
.way-card.is-soon .t-h3{color:var(--ink-2)}

/* --------------------------------------------------------------------------
   22 · HERO HEADLINE — a sentence, not a slab
   Her line is a promise and then what the promise is for. Set at one size it
   ran to four identical lines and read as an enlarged paragraph; broken at her
   own ellipsis it reads as one thought in three lines. The step down is small
   (.62) — enough to rank the two halves, not enough to look like a subtitle.
   -------------------------------------------------------------------------- */
.hero-title{text-wrap:balance}
.hero-title .hero-title-lead,
.hero-title .hero-title-rest{display:block}
.hero-title .hero-title-rest{
  font-size:.6em;
  line-height:1.24;
  letter-spacing:-.02em;
  margin-block-start:.34em;
  max-inline-size:24ch;
  color:var(--on-dark-2,rgba(248,245,241,.86));
}
html[lang="ar"] .hero-title .hero-title-rest{
  font-size:.62em;line-height:1.5;letter-spacing:0;max-inline-size:26ch;
}
/* The promise carries the weight; a long one still may not run away with the
   whole hero, so it keeps a measure of its own. */
.hero-title .hero-title-lead{max-inline-size:18ch}
html[lang="ar"] .hero-title .hero-title-lead{max-inline-size:16ch}

@media (max-width:760px){
  /* The phone rules cap the whole headline at 12–13ch, which is right for a
     short slab and wrong for a split one — each half carries its own measure
     below, so the cap on the h1 has to be lifted at equal specificity. */
  .hero-cinema .t-hero.hero-title,
  html[lang="ar"] .hero-cinema .t-hero.hero-title{max-inline-size:none}
  /* The promise must survive on one line here — "أعلّمك الرقص…" split over two
     was the worst of both: a big headline that still reads as a fragment. */
  .hero-cinema .hero-title .hero-title-lead{max-inline-size:13ch;margin-inline:auto}
  html[lang="ar"] .hero-cinema .hero-title .hero-title-lead{max-inline-size:15ch}
  .hero-cinema .hero-title .hero-title-rest{
    font-size:.52em;max-inline-size:20ch;margin-inline:auto;margin-block-start:.5em;
  }
  html[lang="ar"] .hero-cinema .hero-title .hero-title-rest{font-size:.56em;max-inline-size:22ch}
}

/* ==========================================================================
   23 · EVENTS — two kinds, and one page each
   A studio term and a beach workshop were sharing a single grid. They are two
   sections now, and each listing has a page of its own where the facts are set
   as facts: a rail of label/value pairs, her own words underneath, and the
   price and the booking sitting still in a column beside them.
   ========================================================================== */
.events-jump{margin-block-start:1.6rem;gap:.5rem}
.chip-link{text-decoration:none;transition:border-color .3s var(--ease-out),color .3s var(--ease-out)}
.chip-link:hover{border-color:var(--gold-400);color:var(--gold-300)}
.events-head{align-items:end;gap:1.5rem}
.events-count{color:var(--ink-3);white-space:nowrap}
.sect-dark .events-count{color:var(--on-dark-3)}
.event-card-media-link{display:block;text-decoration:none}
.event-card-title{color:inherit;text-decoration:none}
.event-card-title:hover{color:var(--wine-600)}

/* ---- the head of one event ---- */
.event-head-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.event-head-copy .t-display{margin-block:.5rem .9rem}
.event-back{color:inherit;text-decoration:none;border-block-end:1px solid rgba(201,171,114,.5);padding-block-end:2px}
.event-chips{gap:.45rem;flex-wrap:wrap}
.event-lead{
  margin-block-start:1.3rem;max-inline-size:52ch;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.55;
  letter-spacing:-.02em;color:var(--on-dark-2);
}
html[lang="ar"] .event-lead{font-weight:400;letter-spacing:0;line-height:1.9;max-inline-size:44ch}
/* ---- a heading band that is a film ----
   The band at the top of a page was a flat dark rectangle. It can borrow the
   homepage's film instead, and a workshop can put its own there. Shared, because
   two copies of this drift: one gets a fix and the other keeps the bug.

   The scrim here is vertical — darkest at the floor, clearing towards the top —
   because this class is used on bands whose text sits in the middle as readily
   as to one side, and a side-biased gradient under centred text darkens the
   wrong half. A band that knows where its words are overrides it below. */
/* Modest by default. The complaint that started this was an empty band, not a
   short one — making every heading band a full-height hero would push the thing
   somebody came for below the fold to fix a blank rectangle. */
.pagehead-cinema{
  min-block-size:min(460px,56svh);
  padding-block:calc(var(--nav-h) + clamp(2rem,4.5vw,3.4rem)) clamp(2.5rem,5vw,4rem);
  display:grid;place-items:stretch;align-content:center;
}
.pagehead-cinema::before{
  z-index:-1;
  background:
    linear-gradient(to top,rgba(20,4,9,.93) 4%,rgba(20,4,9,.66) 48%,rgba(20,4,9,.34) 100%),
    radial-gradient(120% 90% at 50% 0%,transparent 30%,rgba(20,4,9,.5) 100%);
}
.pagehead-film{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--wine-900)}
.pagehead-film video{
  inline-size:100%;block-size:100%;object-fit:cover;object-position:center;
  transform:scale(1.025);animation:hero-cinema-loop 12s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .pagehead-film video{animation:none;transform:none}
}

/* ---- a workshop whose hero IS the film ----
   Here the words are on one side, so the scrim follows them: darkest where they
   sit, clearing across the frame. Mirrored for Arabic, which sits on the other
   side of this page — copying the homepage's rule straight across darkened the
   wrong edge and left a white headline over a bright sky. */
.event-head-cinema{min-block-size:min(680px,78svh)}
.event-head-cinema::before{
  background:
    linear-gradient(90deg,rgba(20,4,9,.94) 0%,rgba(20,4,9,.74) 38%,rgba(20,4,9,.26) 70%,rgba(20,4,9,.4) 100%),
    linear-gradient(to top,rgba(20,4,9,.7),transparent 46%);
}
/* 270deg runs right-to-left, so 0% is the right edge — which is where the
   Arabic copy sits on this page. */
html[dir="rtl"] .event-head-cinema::before{
  background:
    linear-gradient(270deg,rgba(20,4,9,.94) 0%,rgba(20,4,9,.74) 38%,rgba(20,4,9,.26) 70%,rgba(20,4,9,.4) 100%),
    linear-gradient(to top,rgba(20,4,9,.7),transparent 46%);
}
/* One column: there is no card beside the words any more, the film is behind
   them. Without this the copy keeps half the width and sits in a hole. */
.event-head-cinema .event-head-grid{grid-template-columns:1fr;align-items:center}
.event-head-cinema .event-head-copy{inline-size:min(650px,62%)}
.event-head-cinema .event-lead{max-inline-size:46ch}
@media (max-width:860px){
  .pagehead-cinema{min-block-size:min(420px,60svh)}
  .event-head-cinema{min-block-size:min(600px,86svh)}
  .event-head-cinema .event-head-copy{inline-size:100%}
  .event-head-cinema::before,
  html[dir="rtl"] .event-head-cinema::before{
    background:linear-gradient(to top,rgba(20,4,9,.97) 8%,rgba(20,4,9,.8) 58%,rgba(20,4,9,.3) 100%);
  }
}

/* The frame and its enlarge button are one column of the hero grid, not two
   children of it — a third grid item would start a row of its own under the
   copy, which is where the button went the first time. */
.event-head-film{max-inline-size:420px;margin-inline:auto;inline-size:100%}
.event-head-media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;inline-size:100%;
  box-shadow:0 30px 70px rgba(10,2,6,.45);
}
.event-head-media .event-poster-img{inline-size:100%;block-size:100%;object-fit:cover}

/* ---- a workshop with a clip instead of a photograph ----
   The aged-print treatment belongs to a photograph. A film of her teaching
   should look like what it is, so the sepia, the creases and the scrim over the
   bottom all come off — the scrim in particular sat exactly where a player puts
   its controls. */
.event-head-media.has-film .event-poster-frame::after{display:none}
.event-poster-video,.event-poster-embed{
  inline-size:100%;block-size:100%;display:block;border:0;
  object-fit:cover;background:#000;
}
/* The enlarge button sits under the frame, as it does on a course page. */
.event-expand{margin-block-start:.6rem;margin-inline:auto;display:flex}
@media (max-width:860px){
  .event-expand{margin-block-start:.5rem}
}

/* ---- the facts rail ---- */
.event-facts-band{
  background:var(--paper);border-block-end:1px solid var(--line);
  padding-block:clamp(1.4rem,3vw,2rem);
}
.event-facts{
  margin:0;display:grid;gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.event-fact dt{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-600,var(--gold-500));margin-block-end:.35rem;
}
html[lang="ar"] .event-fact dt{letter-spacing:.02em;text-transform:none;font-size:.8rem}
.event-fact dd{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.45;color:var(--ink-1);
}
html[lang="ar"] .event-fact dd{line-height:1.8}
.event-fact.is-price dd .price{font-size:1.35rem}

/* ---- body + booking column ---- */
.event-body-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.event-prose>*+*{margin-block-start:1.5em}
.event-list-block{margin-block-start:clamp(2rem,4vw,2.8rem)}
.event-list-block .t-h2{margin-block-end:1rem}
.event-list{margin:0;padding:0;list-style:none;display:grid;gap:.85rem}
.event-list li{
  position:relative;padding-inline-start:1.7rem;
  font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.75;color:var(--ink-2);
  max-inline-size:58ch;
}
html[lang="ar"] .event-list li{line-height:2;max-inline-size:52ch}
.event-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;
  inline-size:.7rem;block-size:1px;background:var(--gold-400);
}
.event-list.is-tight{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem 1.4rem}
.event-list.is-tight li{max-inline-size:none}
.event-bring{
  margin-block-start:2rem;padding:1rem 1.2rem;border-radius:var(--r-md);
  background:rgba(201,171,114,.1);border:1px solid rgba(201,171,114,.3);
  font-size:1rem;line-height:1.7;color:var(--ink-2);
}
.event-book{padding:clamp(1.4rem,2.6vw,1.9rem);position:sticky;inset-block-start:calc(var(--nav-h) + 1.5rem)}
.event-book-price{margin-block:.3rem .6rem}
.event-book-price .price{font-size:2rem}
.event-book-note{
  margin-block-end:1.2rem;font-size:.92rem;line-height:1.6;color:var(--wine-600);
}
.event-book-small{margin-block-start:.9rem;line-height:1.6}
.event-others{margin-block-start:1.6rem;padding-inline-start:.2rem}
.event-others ul{margin:.7rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem}
.event-others li{display:grid;gap:.15rem}
.event-others a{color:var(--ink-1);text-decoration:none;font-weight:500;line-height:1.4}
.event-others a:hover{color:var(--wine-600)}

@media (max-width:900px){
  .event-head-grid{grid-template-columns:1fr}
  .event-head-film{order:-1;max-inline-size:320px}
  .event-head-media{aspect-ratio:3/4}
  .event-body-grid{grid-template-columns:1fr}
  .event-book{position:static}
  .event-list li{max-inline-size:none}
}
/* Equal cards in a row: the poster sets the top, the foot sits on the floor. */
.event-card{display:flex;flex-direction:column}
.event-card .card-body{display:flex;flex-direction:column;flex:1 1 auto}
.event-card .card-foot{margin-block-start:auto}
.event-card .event-meta-row{margin-block-start:.7rem}
/* A whole sentence in capitals is a sentence nobody reads. */
.event-book-small{text-transform:none;letter-spacing:.01em;font-size:.79rem}

/* Her own markers, kept as the icons of the labels they marked. */
.event-fact-icon{margin-inline-end:.35rem;font-size:.85em;filter:saturate(.9)}
.event-bring-icon{margin-inline-end:.4rem}
/* The workshop's "and afterwards" list is five perks, not six techniques: one
   per line, the emoji doing the marking, so no drawn bullet. */
.event-list.is-perks{gap:.6rem}
.event-list.is-perks li{padding-inline-start:0;font-size:clamp(1.02rem,1.3vw,1.14rem)}
.event-list.is-perks li::before{content:none}
.event-close{
  margin-block-start:1.6rem;
  font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.8;color:var(--ink-2);max-inline-size:58ch;
}
html[lang="ar"] .event-close{line-height:2;max-inline-size:52ch}

/* ==========================================================================
   24 · BOOKING — a place in a studio, bought like anything else
   ========================================================================== */
.seham-book-form{margin:0}
.event-book-each{display:block;font-size:.78rem;font-weight:500;color:var(--ink-3);letter-spacing:.02em}
.event-book-choose{
  margin-block:1.2rem .7rem;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500);
}
html[lang="ar"] .event-book-choose{letter-spacing:.02em;text-transform:none;font-size:.85rem}
.event-book-day + .event-book-day{margin-block-start:1rem;padding-block-start:1rem;border-block-start:1px solid var(--line)}
.event-book-day-head{margin-block-end:.5rem;display:grid;gap:.1rem;line-height:1.4}
.event-book-day-head strong{font-size:1.02rem;color:var(--ink-1)}
.event-book-day-head span{font-size:.82rem;color:var(--ink-3)}
.event-book-ask{
  display:block;margin-block-start:.9rem;text-align:center;
  font-size:.85rem;color:var(--ink-3);text-decoration:none;
  border-block-end:1px solid transparent;
}
.event-book-ask:hover{color:var(--wine-600)}

/* the two evenings, side by side in the body */
.event-sessions{margin-block-start:clamp(2rem,4vw,2.8rem)}
.event-sessions .t-h2{margin-block-end:.5rem}
.event-session-grid{
  margin-block-start:1.4rem;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.event-session{
  padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);display:flex;flex-direction:column;gap:.8rem;
}
.event-session-day{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.3rem);letter-spacing:-.02em;color:var(--ink-1);
}
html[lang="ar"] .event-session-day{letter-spacing:0}
.event-session dl{margin:0;display:grid;gap:.45rem}
.event-session dl div{display:flex;gap:.5rem;align-items:baseline}
.event-session dt{margin:0;flex:0 0 auto;font-size:.9em;opacity:.9}
.event-session dd{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.event-session .btn{margin-block-start:auto;align-self:start}

/* the cart, updating itself */
.cart-live-status{
  display:inline-block;font-size:.82rem;color:var(--ink-3);
  padding-inline:.2rem;min-block-size:1em;
}
.cart-pair-note{
  display:block;margin-block-start:.3rem;
  font-size:.8rem;line-height:1.5;color:var(--ink-3);
}
.cart-pair-note.is-on{color:var(--ok);font-weight:600}
.event-book-auto{display:block;margin-block-start:.35rem;font-size:.82rem;line-height:1.55;color:var(--ink-3)}

/* ==========================================================================
   25 · A YEAR OF ACCESS — said plainly wherever it matters
   ========================================================================== */
.course-access-line{
  margin-block:.5rem .8rem;font-size:.92rem;line-height:1.6;
  color:var(--ok);font-weight:500;
}
.course-access-line.is-over{color:var(--warn)}
.sect-dark .course-access-line,.sect-wine .course-access-line{color:var(--gold-300)}
.access-note{
  display:flex;gap:.6rem;align-items:flex-start;
  margin-block-start:1rem;padding:.85rem 1rem;border-radius:var(--r-md);
  background:rgba(201,171,114,.1);border:1px solid rgba(201,171,114,.28);
  font-size:.92rem;line-height:1.6;color:var(--ink-2);
}
.sect-dark .access-note,.sect-wine .access-note{background:rgba(248,245,241,.06);border-color:rgba(201,171,114,.3);color:var(--on-dark-2)}
.access-note .icon{flex:0 0 auto}
.access-over{
  margin-block:1.5rem;padding:clamp(1.4rem,3vw,2rem);
  border:1px solid rgba(169,105,31,.35);border-radius:var(--r-lg);
  background:rgba(169,105,31,.07);
}
.access-over h2{margin-block-end:.5rem}
.access-over p{margin-block-end:1.1rem;color:var(--ink-2);line-height:1.7;max-inline-size:52ch}
.lesson-access-line{
  margin-block-start:1.2rem;padding-block-start:1rem;border-block-start:1px solid var(--line);
  color:var(--ink-3);display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;
}
.studio-course-access{
  margin-block:.5rem .2rem;font-size:.82rem;line-height:1.5;color:var(--ok);font-weight:500;
}
.studio-course-access.is-over{color:var(--warn)}
.course-archive-access{
  margin-block-start:.9rem;color:var(--on-dark-2);
  display:inline-block;padding:.4rem .8rem;border-radius:999px;
  background:rgba(248,245,241,.08);border:1px solid rgba(201,171,114,.3);
}
.course-card-access{margin-block-start:.6rem;color:var(--ink-3)}
.sect-dark .course-card-access,.sect-wine .course-card-access{color:var(--on-dark-3)}
.cart-course-note{display:block;margin-block-start:.3rem;font-size:.8rem;line-height:1.5;color:var(--ink-3)}

/* ==========================================================================
   26 · COMING SOON — a course that exists but is not recorded yet
   Shown, not hidden: the card is the same card with nothing to buy, dimmed
   just enough that the eye goes to the one that is open.
   ========================================================================== */
.chip-soon{background:rgba(20,4,9,.55);color:var(--gold-300);border-color:rgba(201,171,114,.45)}
.course-video-card.is-soon .card-media{filter:saturate(.72)}
.course-video-card.is-soon::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to bottom,transparent 55%,rgba(22,16,17,.05));
}
.course-video-card.is-soon .price-soon,
.price-soon{
  font-family:var(--ui);font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-500);
}
html[lang="ar"] .price-soon{letter-spacing:.02em;text-transform:none;font-size:.92rem}
.soon-panel{
  padding:clamp(1.4rem,3vw,2rem);border-radius:var(--r-lg);
  border:1px dashed rgba(201,171,114,.5);background:rgba(201,171,114,.07);
}
.soon-panel .t-eyebrow{color:var(--gold-500)}
.soon-panel h2{margin-block:.3rem .7rem}
.soon-panel p{color:var(--ink-2);line-height:1.7;margin-block-end:1.2rem}
.shop-group-head{margin-block:clamp(2.4rem,5vw,3.4rem) 1.4rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.shop-group-head h2{margin:0}
.shop-group-head .t-small{color:var(--ink-3)}

/* ==========================================================================
   27 · COACHING — a path with a form in front of it

   The page has to do two things at once: explain something quiet and personal,
   and take a real application with eleven fields in it. So the reading column
   stays narrow and calm, and the form sits inside it as one card with its own
   surface — not a separate page, not a wall of inputs down the side.
   ========================================================================== */

.coach-lead{margin-block-start:1rem;max-inline-size:56ch}
.coach-chips{margin-block-start:1.4rem;flex-wrap:wrap;gap:.5rem}
.coach-facts-band .event-fact.is-price dd{font-size:clamp(1.15rem,2.2vw,1.45rem)}

.coach-grid{display:grid;gap:clamp(2rem,4vw,3.6rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.coach-grid{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}

.coach-prose{max-inline-size:64ch}
.coach-intro{font-size:clamp(1.06rem,1.6vw,1.2rem);line-height:1.85;color:var(--ink-2);padding-inline-start:1.1rem;border-inline-start:2px solid var(--gold-400);margin-block-end:clamp(2rem,4vw,2.8rem)}
.coach-block{margin-block-end:clamp(2.2rem,4.5vw,3.2rem)}
.coach-block > h2{margin-block-end:1.1rem}
.coach-block p{color:var(--ink-2);line-height:1.85;margin-block-end:1.1rem}

.coach-list{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.coach-list li{position:relative;padding-inline-start:1.7rem;color:var(--ink-2);line-height:1.75}
.coach-list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--gold-400)}

/* The themes read as one row you push along, not a stacked wall of tags. It
   scrolls rather than wraps, so the list stays one line at any width and the
   half-visible pill at the end says there is more. */
.coach-topics{list-style:none;padding:0 0 .7rem;margin:0 0 1rem;display:flex;flex-wrap:nowrap;gap:.45rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.coach-topics::-webkit-scrollbar{block-size:5px}
.coach-topics::-webkit-scrollbar-track{background:transparent}
.coach-topics::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.coach-topics:focus-visible{outline:2px solid var(--gold-400);outline-offset:4px;border-radius:8px}
.coach-topics li{flex:none;scroll-snap-align:start;padding:.38rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--surface-2,#fff);font-size:.82rem;line-height:1.5;white-space:nowrap;color:var(--ink-2)}

.coach-steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;counter-reset:coach}
.coach-steps li{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-2,#fff);color:var(--ink-2);line-height:1.7}
.coach-step-mark{flex:none;font-size:1.05rem;line-height:1.7}

/* The form card ------------------------------------------------------------ */
.coach-form-card{margin-block-start:clamp(2.4rem,5vw,3.4rem);padding:clamp(1.5rem,3.4vw,2.4rem);border:1px solid var(--line);border-radius:20px;background:var(--surface-2,#fff);box-shadow:0 22px 50px -38px rgba(22,16,17,.4)}
.coach-form-lead{margin-block:.6rem 1.6rem}
/* Fields start at the top of their row rather than stretching, so a hint under
   one input never drags its neighbour's input out of line. */
.coach-fields{display:grid;gap:1.1rem;align-items:start}
.coach-field{display:flex;flex-direction:column}
@media (min-width:640px){.coach-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.coach-field-wide,.coach-field:has(textarea){grid-column:1/-1}}
.coach-page .coach-field > label,.coach-page .coach-legend{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-block-end:.4rem}
.coach-page .coach-legend{margin-block-end:.15rem}
.coach-req{color:var(--gold-400);margin-inline-start:.2rem}
.coach-page .coach-form .coach-field p.coach-hint,.coach-page .coach-hint{font-size:.74rem;line-height:1.45;color:var(--ink-3);margin-block:.35rem 0;font-weight:400;text-transform:none;letter-spacing:0}
.coach-page .coach-legend + .coach-hint{margin-block:.15rem .2rem}
.coach-field.has-error .input,.coach-field.has-error .textarea{border-color:#B3261E}
.coach-field .err.is-on{display:block;margin-block-start:.35rem;font-size:.8rem;color:#B3261E}

.coach-checks{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.5rem}
.coach-check{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.92rem;font-weight:400;color:var(--ink-2);transition:border-color .2s,background .2s;margin:0}
.coach-check:hover{border-color:var(--gold-400)}
.coach-check input{accent-color:var(--gold-400);inline-size:1rem;block-size:1rem;margin:0}
.coach-check:has(input:checked){border-color:var(--gold-400);background:color-mix(in srgb,var(--gold-400) 12%,transparent)}

.coach-alert{margin-block-end:1.4rem;padding:.95rem 1.15rem;border-inline-start:3px solid #B3261E;border-radius:10px;background:color-mix(in srgb,#B3261E 7%,transparent)}
.coach-alert p{margin:0;font-size:.94rem;color:var(--ink-2)}
.coach-alert p + p{margin-block-start:.9rem}

.coach-submit{margin-block-start:1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block-start:1.4rem;border-block-start:1px solid var(--line)}
.coach-total{margin:0;display:grid;gap:.15rem}
.coach-total-price{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:600;color:var(--ink)}
.coach-page .coach-submit-note,.coach-page .coach-buy-small{font-size:.82rem;line-height:1.65;text-transform:none;letter-spacing:0;color:var(--ink-3)}
.coach-page .coach-submit-note{margin-block-start:1rem}

/* The rail ----------------------------------------------------------------- */
.coach-aside{position:sticky;inset-block-start:calc(var(--header-h,72px) + 1.2rem)}
@media (max-width:999px){.coach-aside{position:static}}
.coach-buy{padding:clamp(1.3rem,2.6vw,1.8rem)}
.coach-buy-price{margin-block:.5rem 1.1rem;font-size:clamp(1.5rem,3vw,2rem);font-weight:600;color:var(--ink);display:grid;gap:.1rem}
.coach-buy-each{font-size:.82rem;font-weight:400;color:var(--ink-3);letter-spacing:.04em}
.coach-buy-list{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.5rem}
.coach-buy-list li{position:relative;padding-inline-start:1.2rem;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.coach-buy-list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.6em;inline-size:.35rem;block-size:.35rem;border-radius:50%;background:var(--gold-400)}
.coach-page .coach-buy-small{margin-block-start:.9rem}
.coach-buy-ask{display:inline-block;margin-block-start:.8rem;font-size:.86rem;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.coach-buy-ask:hover{color:var(--ink)}
.coach-alert.is-good{border-inline-start-color:#2F7D5B;background:color-mix(in srgb,#2F7D5B 8%,transparent)}
#coaching-faq,#coaching-form{scroll-margin-block-start:calc(var(--nav-h) + 1.5rem)}

/* ==========================================================================
   28 · A COURSE THAT IS NOT OPEN YET IS NOT A DOOR

   The coming-soon cards used to behave like every other card — they tilted,
   they played a preview, the title was a link and there was a button inviting
   you in. All of it led to a page with nothing on it. So the whole card is now
   dimmed and inert: no pointer, no hover, no lift, nothing to press. It is a
   notice that this course is being recorded, and it reads as one.
   ========================================================================== */

.course-video-card.is-soon{position:relative;pointer-events:none;box-shadow:none}
.course-video-card.is-soon,
.course-video-card.is-soon:hover,
.course-video-card.is-soon:focus-within{transform:none!important}
.course-video-card.is-soon::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;
  background:color-mix(in srgb,var(--surface-2,#F6F3EE) 52%,transparent);
}
.course-video-card.is-soon .course-video-media video{filter:grayscale(.55) brightness(.78);--media-zoom:1}
.course-video-card.is-soon .card-media-tags,
.course-video-card.is-soon .card-media-foot,
.course-video-card.is-soon .card-body{transform:none!important}
.course-video-card.is-soon .card-media-tags{z-index:5}
.course-video-card.is-soon .chip-soon{box-shadow:0 2px 14px rgba(22,16,17,.35)}
.course-video-card.is-soon .tilt-glare{display:none}
.course-video-card.is-soon .card-foot{justify-content:space-between;align-items:center}
.course-soon-note{color:var(--ink-3);letter-spacing:.06em;text-transform:none}

/* ==========================================================================
   29 · A BACKDROP THAT CAN MOVE

   The section around Seham's card can take a film instead of the silk. It sits
   behind everything at the same strength the fabric had, under the same scrim,
   so the card and every word on it keep exactly the contrast they were designed
   with — a backdrop is allowed to move, it is not allowed to shout.
   ========================================================================== */
.section-film{
  position:absolute;inset:0;z-index:-1;
  inline-size:100%;block-size:100%;object-fit:cover;
  opacity:var(--silk-opacity);
  filter:saturate(var(--silk-sat)) brightness(var(--silk-bright)) hue-rotate(-6deg);
  pointer-events:none;
}
/* With a film playing, the fabric underneath it would only muddy it. */
.owner-section.has-film::before{display:none}
@media (prefers-reduced-motion:reduce){
  /* Its own poster frame, held still. */
  .section-film{animation:none}
}
.legal-page .legal-updated{margin-block-start:.8rem}
.legal-page .legal-note{
  margin-block-end:2rem;padding:.9rem 1.15rem;
  border-inline-start:2px solid var(--gold-400);border-radius:10px;
  background:var(--surface-2,#F6F3EE);color:var(--ink-3);font-size:.88rem;line-height:1.65;
}
.legal-body{max-inline-size:72ch}
.legal-body h2{margin-block:clamp(2.2rem,4vw,3rem) .9rem}
.legal-body h3{margin-block:1.8rem .7rem;font-size:clamp(1rem,1.5vw,1.12rem)}
.legal-body p{color:var(--ink-2);line-height:1.9;margin-block-end:1.1rem}
.legal-body .legal-list{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.85rem}
.legal-body .legal-list li{position:relative;padding-inline-start:1.5rem;color:var(--ink-2);line-height:1.85}
.legal-body .legal-list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;inline-size:.4rem;block-size:.4rem;border-radius:50%;background:var(--gold-400)}

/* ==========================================================================
   30 · GLASS OVER A MOVING BACKDROP

   With a film behind her, an opaque card hides the very thing it is standing
   on. So when the section is playing one, the card becomes glass: the film
   carries on behind the words, blurred just enough that every line stays
   readable, and the gold rim still reads as a lit edge rather than a wash.
   ========================================================================== */
.owner-section.has-film .owner-card{
  box-shadow:0 30px 74px rgba(10,2,6,.34);
}
.owner-section.has-film .owner-card-inner,
.owner-section.has-film.sect-wine .owner-card-inner{
  background:
    radial-gradient(120% 130% at 86% -10%,rgba(230,211,166,.16),rgba(230,211,166,0) 52%),
    linear-gradient(155deg,rgba(42,14,25,.46),rgba(23,5,16,.6) 62%);
  /* Clear enough to watch the film through, blurred just enough that a bright
     frame passing behind a line of text never takes the line with it. */
  -webkit-backdrop-filter:blur(13px) saturate(128%);
  backdrop-filter:blur(13px) saturate(128%);
  border:1px solid rgba(230,211,166,.16);
}
/* Without backdrop-filter the glass would be a flat wash over the film and the
   words would sit on whatever happened to be behind them, so those browsers
   keep a surface solid enough to read. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .owner-section.has-film .owner-card-inner,
  .owner-section.has-film.sect-wine .owner-card-inner{
    background:linear-gradient(155deg,rgba(42,14,25,.88),rgba(23,5,16,.92) 62%);
  }
}
/* Whatever is filmed could be bright, so the words on the glass are given the
   full strength they would have on an opaque card. */
.owner-section.has-film .owner-card-inner .t-lead,
.owner-section.has-film .owner-card-inner p{color:rgba(250,247,243,.92)}
.owner-section.has-film .owner-card-inner .t-eyebrow{color:var(--gold-300)}

/* The film is the point, so it is held a little clearer here than the fabric. */
.owner-section.has-film{--silk-opacity:1;--silk-bright:1}
.owner-section.has-film::after{opacity:.55}

/* ==========================================================================
   31. TWO RAILS — the five reasons, and the messages
   Both were tall columns of short things. A column of short things is the one
   shape a page cannot afford: it costs a full screen to say very little, and
   the reader scrolls past the whole of it to reach what they came for. Laid
   along a rail they keep every word, cost one card of height, and the half-cut
   card at the edge is the only invitation needed to keep going.
   ========================================================================== */
.hscroll{
  display:flex;flex-wrap:nowrap;align-items:stretch;
  /* As a flex item this would size to its content and push the page sideways
     instead of scrolling inside itself. `min-inline-size:0` is what makes an
     overflow scroller work anywhere, not only in a block parent. */
  min-inline-size:0;justify-self:stretch;
  gap:clamp(.7rem,1.6vw,1.1rem);
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* Room for the lift on hover and for the scrollbar, so neither is clipped. */
  padding-block:.4rem .9rem;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.hscroll::-webkit-scrollbar{block-size:6px}
.hscroll::-webkit-scrollbar-track{background:transparent}
.hscroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
/* On the wine band the pale-ink thumb disappears into the cloth. */
.sect-wine .hscroll,.sect-dark .hscroll{scrollbar-color:rgba(248,245,241,.26) transparent}
.sect-wine .hscroll::-webkit-scrollbar-thumb,
.sect-dark .hscroll::-webkit-scrollbar-thumb{background:rgba(248,245,241,.26)}
.hscroll:focus-visible{outline:2px solid var(--gold-400);outline-offset:6px;border-radius:12px}
.hscroll > *{flex:none;scroll-snap-align:start}

/* ---- the five reasons ---- */
.intro-lede{max-inline-size:62ch}
.intro-lede .t-display{margin-block:.7rem 1.1rem}
.intro-rail{margin-block-start:clamp(1.8rem,4vw,2.6rem)}
.intro-rail .interactive-benefit{
  /* Most of these are a single line. A fixed width would hand each of them a
     half-empty card, so they take the width of what is in them and stop there;
     the ones she writes a second line for grow to the cap and wrap. */
  inline-size:auto;min-inline-size:12rem;max-inline-size:21rem;
  /* All five end level whatever the length of the line inside them. */
  align-self:stretch;
}
/* The lift on hover is a transform, and a transform inside a scroller can drag
   the scroll position with it. Kept, but without the horizontal component. */
@media (hover:none){
  .intro-rail .interactive-benefit:hover{transform:none;box-shadow:none}
}

/* ---- the messages ---- */
/* The thread was centred in a narrow column; a rail wants the whole width. The
   band lays its children out on a grid, and a grid item is allowed to grow past
   its track unless it is told it may shrink — without this the rail would be as
   wide as all eight messages laid end to end. */
.chat-rail{
  max-inline-size:none;min-inline-size:0;justify-self:stretch;
  /* The centred thread had automatic side margins. On a grid an automatic
     margin cancels the stretch — and so does the centring the band asks for —
     so without both of these the rail would size itself to all eight messages
     laid end to end instead of to the column it sits in. */
  margin-inline:0;
}
.chat-track{padding-block:.4rem 1rem;align-items:stretch;inline-size:100%}
/* Every card the same height, whatever the length of the message in it. */
.chat-rail .chat-line{inline-size:min(84vw,23rem);align-items:stretch}
/* Alternating sides is what makes a thread read as a conversation. Along a rail
   it only makes every second card sit the wrong way round, so the cards face
   one way and the app's own colour carries the difference instead. */
.chat-rail .chat-line.is-flipped{flex-direction:row}
.chat-rail .chat-line.is-flipped .chat-stack{align-items:flex-start}
.chat-rail .chat-line.is-flipped .chat-from{text-align:start;padding-inline:.15rem 0}
.chat-rail .chat-line.is-flipped .chat-bubble{
  border-start-start-radius:.3rem;border-start-end-radius:1.15rem;
}
.chat-rail .chat-stack{flex:1 1 auto}
.chat-rail .chat-bubble{
  max-inline-size:none;block-size:100%;
  display:flex;flex-direction:column;
}
.chat-rail .chat-text{flex:1 1 auto}
.chat-rail .chat-avatar{align-self:flex-start;margin-block-start:1.35rem}
.chat-rail .chat-line:not(:has(.chat-from)) .chat-avatar{margin-block-start:.35rem}
/* A shorter message should not be stretched into a tall block of empty glass. */
.chat-rail .chat-text{font-size:clamp(.95rem,1.4vw,1.04rem)}
.chat-rail .chat-day{margin-block-end:1rem}
.chat-rail .chat-who{margin-block-start:.5rem}
/* While a bubble is being typed it shrinks to the width of the three dots. In a
   column that was fine; in a rail every card would jump, so the card keeps its
   width and only the glass inside it narrows. */
.chat-rail.is-live .chat-line.is-typing .chat-bubble{max-inline-size:5rem;block-size:auto}

@media (max-width:560px){
  .chat-rail .chat-line{inline-size:min(88vw,20rem)}
  .intro-rail .interactive-benefit{inline-size:min(80vw,17rem)}
}

/* ==========================================================================
   32. THE COURSE CARD IN THE "NOT IN HAIFA?" BAND
   The card is built for a pale grid. Dropped onto the dark band it needs no
   redesign, only the box it sits in to stop behaving like a picture frame.
   ========================================================================== */
.split-course{
  border-radius:0;overflow:visible;box-shadow:none;
  max-inline-size:26rem;margin-inline:auto;inline-size:100%;
}
.split-course .course-video-card{margin:0}
/* On the dark band the card's own pale surface is the contrast, so the drop
   shadow that reads on cream would only muddy its edge. */
.sect-dark .split-course .course-video-card{box-shadow:0 26px 60px rgba(8,2,6,.42)}
/* A reason with no second line should not reserve room for one. */
.interactive-benefit small:empty{margin-block-start:0}

/* ==========================================================================
   33. THE ARROWS BESIDE A ROW THAT SCROLLS
   A row that scrolls and does not say so is a row most people see one screen
   of. The half-cut card at the edge helps; a control you can actually press
   helps more, and on a trackpad-less desktop it is the only way across.
   ========================================================================== */
/* The row inside must be free to be narrower than the cards it holds, or it
   stops scrolling and pushes the whole section sideways instead. */
.hscroll-wrap{position:relative;min-inline-size:0;inline-size:100%;justify-self:stretch}
.hscroll-arrow{
  position:absolute;inset-block-start:50%;translate:0 -50%;z-index:3;
  inline-size:42px;block-size:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:var(--surface,#fff);
  color:var(--ink-2);cursor:pointer;
  box-shadow:0 8px 22px rgba(24,10,6,.14);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),opacity .3s var(--ease-out);
}
.hscroll-arrow[hidden]{display:none}
.hscroll-arrow.is-prev{inset-inline-start:-6px}
.hscroll-arrow.is-next{inset-inline-end:-6px}
/* The chevron is two borders on a square, turned. Deliberately physical: a
   logical border would flip with the language while the rotation did not, and
   the arrow would end up pointing at the ceiling on the Arabic site. */
.hscroll-arrow span{
  inline-size:9px;block-size:9px;
  border-top:2px solid currentColor;border-left:2px solid currentColor;
}
.hscroll-arrow.is-prev span{transform:rotate(-45deg);margin-left:3px}
.hscroll-arrow.is-next span{transform:rotate(135deg);margin-right:3px}
html[dir="rtl"] .hscroll-arrow.is-prev span{transform:rotate(135deg);margin-left:0;margin-right:3px}
html[dir="rtl"] .hscroll-arrow.is-next span{transform:rotate(-45deg);margin-right:0;margin-left:3px}
.hscroll-arrow:hover{transform:scale(1.07);box-shadow:0 12px 28px rgba(24,10,6,.2)}
.hscroll-arrow:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}
/* On the wine and the dark bands a cream button would be the loudest thing in
   the section, so there it is glass with a pale edge instead. */
.sect-wine .hscroll-arrow,.sect-dark .hscroll-arrow{
  background:rgba(20,4,9,.5);border-color:rgba(248,245,241,.2);color:var(--on-dark);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* A finger can swipe. The arrows are for the machines that cannot. */
@media (hover:none){
  .hscroll-arrow{display:none!important}
}


/* ==========================================================================
   34. THE COURSE PAGE HEADER IS A ROOM TOO
   It was the one dark band on the site that was only dark: a flat near-black
   field behind her film and her title, while every other dark band here is
   cloth with light crossing it. Nothing about a course page asks for a
   different language, so it is given the same one — held back behind the
   headline the way the page headers are, and a shade further back again,
   because the film beside it is the brightest thing on the band and has to
   stay that way.
   ========================================================================== */
.course-hero,.creed-section,.events-online-band{
  position:relative;isolation:isolate;overflow:hidden;
}
/* A touch further back than a page header on the course page, because a lit
   video is playing on that band and the cloth must not compete with it. */
.course-hero{--silk-opacity:.5;--silk-bright:.66}

/* ==========================================================================
   35. THE GIFT, AND THE VOUCHER
   The page that sells one borrows the coaching page's shape, because it is the
   same shape of argument: prose on one side, a card that does the asking on the
   other. The voucher is its own thing — it has to hold up printed on a home
   printer and handed over in an envelope, so it is built like a certificate
   rather than like a web page.
   ========================================================================== */
.gift-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,6vw,4.5rem);align-items:start}
@media (max-width:999px){.gift-grid{grid-template-columns:1fr}}
.gift-lead{max-inline-size:56ch;margin-block-start:1rem}
.gift-chips{margin-block-start:1.6rem;gap:.5rem;flex-wrap:wrap}
.gift-intro{font-size:clamp(1.1rem,1.8vw,1.28rem);line-height:1.85;color:var(--ink-2)}
.gift-block{margin-block-start:clamp(2.2rem,4.5vw,3.2rem)}
.gift-block .t-h2{margin-block-end:1rem}
.gift-what{font-weight:600;color:var(--ink);margin-block-end:.7rem}
.gift-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.gift-list li{position:relative;padding-inline-start:1.5rem;color:var(--ink-2);line-height:1.8}
.gift-list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;inline-size:.4rem;block-size:.4rem;border-radius:50%;background:var(--gold-400)}
.gift-steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;counter-reset:gift}
.gift-steps li{display:flex;gap:.8rem;align-items:flex-start;color:var(--ink-2);line-height:1.8}
.gift-step-mark{flex:none;font-size:1rem;line-height:1.8}
/* The two dates are the thing people miss, so they are given a box of their
   own rather than a paragraph somebody's eye can slide past. */
.gift-clocks{padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--r-lg);background:var(--surface-2,#F6F3EE);border:1px solid var(--line)}
.gift-clocks .t-h3{margin-block-end:.7rem}
.gift-clocks p{color:var(--ink-2);line-height:1.8;margin-block-end:.5rem}
.gift-clocks p:last-child{margin-block-end:0}
.gift-form-card{margin-block-start:clamp(2.4rem,5vw,3.4rem);padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.gift-form-lead{margin-block:.4rem 1.4rem}
.gift-form-title{margin-block-start:0}
.gift-choose + .gift-form-title{margin-block-start:clamp(1.4rem,3vw,2rem)}
.gift-form .coach-field.is-wide{grid-column:1/-1}

/* ---- which course ----
   Only drawn when more than one course is open, so it is never a list of one.
   Each row is the whole label: tapping anywhere on it picks the course, which
   matters far more on a phone than the radio dot itself. The dot stays visible
   because a row that only changes colour leaves people unsure whether the tap
   registered. Borders rather than fills, so the form underneath keeps being
   the thing the eye lands on. */
.gift-choose{margin:0 0 1.6rem;padding:0;border:0;display:grid;gap:.6rem}
.gift-choose legend{
  padding:0;font-size:.88rem;font-weight:600;color:var(--ink);
}
.gift-choose-lead{margin-block:.35rem .5rem}
.gift-choice{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.5rem .8rem;padding:.85rem 1rem;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.gift-choice:hover{border-color:var(--gold-300,#C9AB72)}
.gift-choice.is-picked{
  border-color:var(--wine-600);background:var(--surface-2,#F6F3EE);
  box-shadow:inset 0 0 0 1px var(--wine-600);
}
.gift-choice input[type="radio"]{inline-size:1.05rem;block-size:1.05rem;accent-color:var(--wine-600);margin:0}
.gift-choice:focus-within{outline:2px solid var(--gold-300,#C9AB72);outline-offset:2px}
.gift-choice-body{display:grid;gap:.15rem;min-inline-size:0}
.gift-choice-name{font-weight:600;color:var(--ink);line-height:1.35}
.gift-choice-meta{font-size:.78rem;color:var(--ink-3)}
.gift-choice-price{font-weight:700;color:var(--wine-600);white-space:nowrap}
.gift-choice-price del{opacity:.55;font-weight:400;margin-inline-end:.3rem}
@media (max-width:420px){
  .gift-choice{grid-template-columns:auto 1fr;row-gap:.35rem}
  .gift-choice-price{grid-column:2;justify-self:start}
}

/* ---- the voucher ---- */
.redeem-sect{padding-block:calc(var(--nav-h) + var(--ticker-h) + clamp(2.5rem,6vw,4.5rem)) clamp(4rem,8vw,6rem)}
.redeem-card{
  padding:clamp(1.6rem,4vw,3rem);
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--line);
  text-align:center;
}
.redeem-card .t-lead{margin-block:1rem 1.6rem;color:var(--ink-2)}
.redeem-action{margin-block-start:1.8rem;text-align:center}
.redeem-why{margin-block-start:1rem;max-inline-size:42ch;margin-inline:auto}
.redeem-form{display:grid;gap:1rem;justify-items:center;margin-block-start:1.4rem}
.redeem-form .coach-field{inline-size:min(100%,22rem)}
.redeem-input{text-align:center;font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase}
.redeem-card.is-done .redeem-seal{
  display:grid;place-items:center;inline-size:64px;block-size:64px;margin-inline:auto;
  border-radius:50%;background:var(--gold-400);color:var(--wine-900);font-size:1.6rem;
}
.redeem-card.is-done .t-h1{margin-block-start:1.2rem}

/* The gift itself. Deep wine, a gold rule, and her name the largest thing on
   it — a certificate, not a receipt. */
.voucher{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#3B0F1E,#22060F 68%);
  border:1px solid rgba(230,211,166,.28);
  color:var(--on-dark);
  padding:clamp(2rem,5vw,3.4rem) clamp(1.4rem,4vw,3rem);
  box-shadow:0 30px 70px rgba(20,4,10,.28);
}
.voucher::before{
  content:"";position:absolute;inset:.6rem;border:1px solid rgba(230,211,166,.2);
  border-radius:calc(var(--r-xl) - .5rem);pointer-events:none;
}
/* The logo SVG is absolutely positioned by design — it fills a box that has
   been given a size, the way the header and the footer give it one. Without a
   sized box of its own it anchors to the card and climbs out of the corner. */
.voucher-brand{
  position:relative;inline-size:150px;block-size:86px;
  margin:0 auto 1.4rem;
}
.voucher-brand img{inline-size:100%;block-size:100%;object-fit:contain}
.voucher-eyebrow{
  margin:0;color:var(--gold-300);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
}
.voucher-name{margin-block:.6rem .2rem;font-size:clamp(2rem,5.5vw,3.1rem);color:#fff}
.voucher-from{margin:0;color:var(--on-dark-2);font-size:.95rem}
.voucher-note{
  margin:1.6rem auto 0;max-inline-size:44ch;padding:1rem 1.2rem;
  border-inline-start:2px solid var(--gold-400);border-radius:10px;
  background:rgba(255,255,255,.06);
  color:rgba(250,247,243,.92);font-size:1.02rem;line-height:1.8;text-align:start;
}
.voucher-what{margin-block:1.8rem .2rem;color:rgba(250,247,243,.92);font-size:1.05rem}
.voucher-code{
  margin-block:1.1rem .6rem;font-size:clamp(1.4rem,3.6vw,1.9rem);font-weight:700;
  letter-spacing:.16em;color:var(--gold-300);
}
.voucher-until{color:var(--on-dark-3)}

/* Printed, the page around the voucher is noise — and a wine field is a lot of
   somebody's ink. The gift keeps its shape and loses its background. */
@media print{
  .nav,.top-ticker,.drawer,.foot,.redeem-action,.seham-toast-tray,.a11y-fab{display:none!important}
  .redeem-sect{padding:0!important}
  .voucher{
    background:#fff!important;color:#2A0C16!important;
    border:2px solid #C9AB72!important;box-shadow:none!important;
  }
  .voucher-name{color:#2A0C16!important}
  .voucher-from,.voucher-what,.voucher-note{color:#4A3830!important}
  .voucher-note{background:#F7F3EC!important}
  .voucher-code{color:#7A1230!important}
  .voucher-until{color:#6B564A!important}
}

/* The coaching page names no price any more: what the path costs is settled
   between Seham and the person after the free first meeting. Two things had
   been built around a figure and now have none — the row above the Send button,
   which was price-then-button and is now just the button, and the card beside
   the form, which led with the amount and now leads with what the path is. */
.coach-submit.is-bare{justify-content:flex-end}
.coach-buy-what{
  margin-block:.5rem 1.1rem;font-size:clamp(1.15rem,2.2vw,1.45rem);
  font-weight:600;color:var(--ink);line-height:1.3;
}


/* ---------------------------------------------------------------------------
   36. OPENING A COURSE FROM ITS CARD

   The way in used to be a chip the size of a postage stamp in the top corner
   of the artwork, revealed only on hover. People missed it — and a click
   anywhere else on a desktop paused a muted preview instead of doing the one
   thing somebody clicking a course card wants.

   Three changes, and they work as one:

   1. The whole card is the link (see theme.js), so there is no small target
      left to miss.
   2. The way in moves to the middle of the artwork, where the play button used
      to be, and gets the size of a real button. It is visible at rest, not only
      on hover, because a control you have to discover by accident is the thing
      being fixed here.
   3. The play button takes the corner the chip left, at the size of a
      secondary control — because that is what it now is.
   ------------------------------------------------------------------------- */

.course-video-card.is-openable{cursor:pointer}

/* The way in: centre of the artwork, always there, and it grows under the
   pointer so the card still answers to hover. */
.course-video-card .course-card-open{
  inset:50% auto auto 50%;
  translate:-50% -50%;
  opacity:1;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.72rem 1.15rem;
  font-size:.86rem;letter-spacing:.01em;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px rgba(20,4,9,.28);
  transition:opacity .3s,background .25s,box-shadow .25s,scale .25s var(--ease-out);
}
.course-video-card:hover .course-card-open,
.course-video-card:focus-within .course-card-open{
  translate:-50% -50%;          /* the base rule's hover nudge would fight this */
  opacity:1;
  background:#fff;
  scale:1.06;
  box-shadow:0 16px 40px rgba(20,4,9,.34);
}
.course-video-card .course-card-open span{font-size:.9em}

/* The play button, now second in line: the corner the chip vacated, smaller,
   and quiet until it is wanted. */
.course-video-card .course-video-toggle{
  inset:.8rem .8rem auto auto;
  translate:0 0;
  inline-size:40px;block-size:40px;
  font-size:.8rem;
  opacity:.72;
}
html[dir="rtl"] .course-video-card .course-video-toggle{inset:.8rem auto auto .8rem}
.course-video-card:hover .course-video-toggle,
.course-video-card .course-video-toggle:focus-visible,
.course-video-card.is-playing .course-video-toggle{opacity:1}

/* The tilt moved these two around by their old positions. Both are anchored
   differently now, so the parallax rides on top of the new anchor instead of
   replacing it. */
.course-video-card .course-card-open{
  transform:translate(calc(var(--cx,0) * 5px),calc(var(--cy,0) * 5px));
}
.course-video-card .course-video-toggle{
  transform:translate(calc(var(--cx,0) * 7px),calc(var(--cy,0) * 7px));
}
.course-video-card .course-video-toggle:active{
  transform:translate(calc(var(--cx,0) * 7px),calc(var(--cy,0) * 7px)) scale(.92);
}

/* On a phone there is no hover to reveal anything, and no tilt to ride on. */
@media (max-width:760px){
  .course-video-card .course-card-open{
    transform:none;padding:.66rem 1rem;font-size:.82rem;
  }
  .course-video-card .course-video-toggle{
    transform:none;inline-size:38px;block-size:38px;opacity:1;
  }
  .course-video-card .course-video-toggle:active{transform:scale(.92)}
}

@media (prefers-reduced-motion:reduce){
  .course-video-card .course-card-open{transition:none;scale:1}
  .course-video-card:hover .course-card-open{scale:1}
}


/* ---------------------------------------------------------------------------
   37. "ALL", AT THE HEAD OF THE STYLE FILTER

   The filter had no way back. Six chips, one of them pressed, and the only
   route to seeing everything again was the Reset button at the other end of
   the toolbar — which also wipes the search box and the level, so somebody who
   only wanted to widen the dance style lost the rest of what they had typed.

   "All" is the state the page opens in, so it is pressed at rest and needs to
   look like a resting state rather than a choice: an outline, not the solid
   ink of a picked style. Pressed, it is the same solid chip as any other,
   because the page is genuinely filtered to all of them.
   ------------------------------------------------------------------------- */

.pills .pill.is-all{font-weight:600}
.pills .pill.is-all[aria-pressed="true"]{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
html[dir="rtl"] .pills .pill.is-all{margin-inline-end:0}

/* A hairline after it, so it reads as "everything, or one of these" rather
   than as the first dance in the list. */
.pills .pill.is-all{position:relative;margin-inline-end:.75rem}
.pills .pill.is-all::after{
  content:"";position:absolute;inset-block:15%;inset-inline-end:-.42rem;
  inline-size:1px;background:var(--line);
}
@media (max-width:760px){
  .pills .pill.is-all{margin-inline-end:.55rem}
  .pills .pill.is-all::after{inset-inline-end:-.3rem}
}