/* Brand frames and interaction feedback. All decoration is pointer-transparent. */
:root {
  --ease-out: cubic-bezier(.2,.75,.25,1);
  --frame-gradient: linear-gradient(135deg,#2b5c63 0%,#94a69c 42%,#f4ebdd 72%,#2b5c63 100%);
  --frame-shadow: 0 18px 36px #002b321c;
}
html[data-theme=dark] {--frame-shadow:0 22px 42px #00151955}

/* One entrance system, so route and scroll animations never stack. */
.enter, .enter .page-top>*, .hero-copy>*, .hero-identity,
.meeting-strip>div, .lesson-tile {animation:none}
.section figure:hover, .series-feature:hover {transform:none;box-shadow:none}
.study-gallery:hover img, .lesson-tile:hover img, .gallery figure:hover img,
.series-feature:hover>img {transform:none}

.hero-visual {position:relative;min-width:0;width:100%;isolation:isolate;border-radius:110px 110px 16px 16px}
.hero-visual::before, .hero-visual::after {
  content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:-1;
  transition:transform .7s var(--ease-out),opacity .7s ease;
}
.hero-visual::before {inset:7px -7px -8px 6px;background:var(--frame-gradient);opacity:.45;transform:rotate(1.4deg)}
.hero-visual::after {inset:-7px 7px 6px -7px;border:1px solid var(--sage);opacity:.65;transform:rotate(-1deg)}
.hero-identity {
  position:relative;border:3px solid transparent;border-radius:inherit;
  background:linear-gradient(var(--identity),var(--identity)) padding-box,var(--frame-gradient) border-box;
  box-shadow:var(--frame-shadow);
  transition:box-shadow .6s var(--ease-out),transform .6s var(--ease-out);
}
.identity-panel {position:relative;background:radial-gradient(ellipse at 90% 0%,#94a69c25,transparent 65%)}
.hero-community {overflow:hidden}
.hero-community>img {transition:transform .8s var(--ease-out)}
.hero-community figcaption {position:relative;z-index:1;background:#2b5c63}

.gallery {gap:26px}
.gallery figure {min-width:0;box-shadow:none}
.photo-frame {
  --photo-radius:64px 18px 18px 18px;
  position:relative;isolation:isolate;padding:6px;border-radius:var(--photo-radius);
  background:var(--frame-gradient);box-shadow:var(--frame-shadow);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.photo-frame::before {
  content:"";position:absolute;z-index:-1;inset:6px -6px -6px 5px;border-radius:inherit;
  background:var(--frame-gradient);opacity:.33;pointer-events:none;transform:rotate(1.7deg);
  transition:transform .65s var(--ease-out),opacity .65s ease;
}
.photo-window {overflow:hidden;border-radius:calc(64px - 6px) 13px 13px 13px;background:var(--soft)}
.gallery figure:nth-child(2) .photo-frame {--photo-radius:18px 64px 18px 18px}
.gallery figure:nth-child(2) .photo-window {border-radius:13px 58px 13px 13px}
.gallery figure:nth-child(3) .photo-frame {--photo-radius:48px 48px 18px 18px}
.gallery figure:nth-child(3) .photo-window {border-radius:42px 42px 13px 13px}
.gallery .photo-window img {border-radius:0;transition:transform .85s var(--ease-out)}
.gallery figcaption {padding:19px 4px 0;transition:color .3s ease}
.hero-identity::after, .photo-frame::after {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(280px circle at var(--pointer-x,50%) var(--pointer-y,40%),#f4ebdd35,transparent 72%);
  transition:opacity .45s ease;
}
.pointer-active::after {opacity:1}

.series-feature, .study-gallery {
  border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--frame-gradient) border-box;
}
.series-feature {transition:box-shadow .45s ease,transform .45s var(--ease-out)}
.current-study {
  background:radial-gradient(ellipse at 0% 0%,#94a69c24,transparent 65%),var(--soft);
  border:1px solid var(--line);overflow:hidden;
  transition:box-shadow .45s ease,border-color .35s ease;
}
.current-study::after {content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--frame-gradient);pointer-events:none}
.current-study-heading {border-left:0;padding-left:0}
.join {transition:border-color .35s ease,box-shadow .45s ease}

/* Focus gets the same colour feedback as a mouse, without making text move. */
.header nav a {position:relative;text-decoration:none}
.header nav a::after {
  content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--sage));transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.header nav a[aria-current]::after,.header nav a:focus-visible::after {transform:scaleX(1)}
.button {position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .3s ease,background-color .3s ease,color .3s ease}
.button::after {
  content:"";position:absolute;inset:-60% -20%;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,transparent 35%,#f4ebdd2b 48%,transparent 62%);
  transform:translateX(-100%);transition:transform .6s var(--ease-out);
}
.button:focus-visible,.navigation-app:focus-visible,.origin-card:focus-visible,.lesson-tile:focus-visible {border-color:var(--teal);box-shadow:0 0 0 4px #94a69c40}
.button>span {transition:transform .3s var(--ease-out)}
.icon-button {transition:transform .4s var(--ease-out),background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.text-link,.back,.footer-links a {transition:color .25s ease,text-decoration-color .25s ease;text-decoration-color:var(--sage);text-decoration-thickness:1px}
.text-link:focus-visible,.footer-links a:focus-visible {color:var(--teal);text-decoration-thickness:2px}
.navigation-app,.origin-card,.lesson-tile {transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .3s ease,background-color .3s ease}
.app-monogram,.app-arrow {transition:transform .35s var(--ease-out),background-color .3s ease}
select {transition:border-color .3s ease,box-shadow .3s ease}
select:focus-visible {border-color:var(--teal);box-shadow:0 0 0 4px #94a69c30}
details[open] {border-color:var(--sage)}

@media(hover:hover) and (pointer:fine) {
  .header nav a:hover::after {transform:scaleX(1)}
  .header nav a:hover,.text-link:hover,.back:hover,.footer-links a:hover {color:var(--teal)}
  .text-link:hover,.back:hover,.footer-links a:hover {text-decoration-thickness:2px}
  .button:not(:disabled):hover {box-shadow:0 9px 22px #002b322b;border-color:var(--teal)}
  .button.secondary:not(:disabled):hover {background:var(--soft)}
  .icon-button:hover {background:var(--soft);border-color:var(--sage);box-shadow:0 0 0 5px #94a69c1f}
  .navigation-app:hover,.origin-card:hover,.lesson-tile:hover {border-color:var(--sage);box-shadow:var(--frame-shadow)}
  .gallery figure:hover figcaption {color:var(--ink)}
  .series-feature:hover {box-shadow:var(--frame-shadow)}
  .current-study:hover,.join:hover {border-color:var(--sage);box-shadow:var(--frame-shadow)}
}
@media(hover:hover) and (pointer:fine) {
  .hero-visual:hover::before {transform:rotate(2.1deg) translate(2px,2px);opacity:.65}
  .hero-visual:hover::after {transform:rotate(-1.6deg)}
  .hero-visual:hover .hero-identity {transform:translateY(-3px);box-shadow:0 24px 45px #002b3229}
  .hero-visual:hover .hero-community>img {transform:scale(1.035)}
  .gallery figure:hover .photo-frame {transform:translateY(-5px);box-shadow:0 24px 40px #002b322b}
  .gallery figure:hover .photo-frame::before {transform:rotate(2.8deg) translate(1px,1px);opacity:.6}
  .gallery figure:hover .photo-window img {transform:scale(1.045)}
  .button:not(:disabled):hover {transform:translateY(-3px)}
  .button:not(:disabled):hover::after {transform:translateX(100%)}
  .button:not(:disabled):hover>span {transform:translate(2px,-1px)}
  .button:not(:disabled):active {transform:translateY(0) scale(.985);box-shadow:none}
  .icon-button:hover {transform:rotate(16deg)}
  .icon-button:active {transform:rotate(16deg) scale(.94)}
  .navigation-app:hover,.lesson-tile:hover {transform:translateY(-4px)}
  .origin-card:hover {transform:translateX(3px)}
  .navigation-app:hover .app-monogram {transform:rotate(-6deg)}
  .navigation-app:hover .app-arrow {transform:translate(2px,-2px)}
  .series-feature:hover {transform:translateY(-3px)}
}
@media screen {
  body {transition:background-color .3s ease,color .3s ease}
  .brand-logo img {animation:logo-appear .28s ease-out}
  details[open]>*:not(summary) {animation:detail-appear .25s ease-out}
  @keyframes logo-appear {from{opacity:.4}to{opacity:1}}
  @keyframes detail-appear {from{opacity:.4;translate:0 5px}to{opacity:1;translate:0 0}}
}
@media(max-width:640px) {
  .hero-visual {border-radius:90px 90px 14px 14px}
  .hero-visual::before {inset:5px -4px -6px 4px;transform:rotate(.8deg)}
  .hero-visual::after {inset:-5px 4px 5px -4px;transform:rotate(-.6deg)}
  .gallery {gap:24px 18px}
  .photo-frame {padding:4px}
  .gallery figcaption {padding-top:16px}
}
@media(hover:none),(pointer:coarse) {
  .button:hover,.dots button:hover,.lesson-tile:hover,.navigation-app:hover,.origin-card:hover,
  .section figure:hover,.series-feature:hover,.study-gallery:hover img {transform:none}
  .pointer-active::after {opacity:0}
}
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion=full]) {scroll-behavior:auto}
  html:not([data-motion=full]) *,html:not([data-motion=full]) *::before,html:not([data-motion=full]) *::after {animation:none!important;transition:none!important}
  html:not([data-motion=full]) :is(.button:hover,.icon-button:hover,.dots button:hover,.lesson-tile:hover,.navigation-app:hover,.origin-card:hover,.series-feature:hover,.hero-visual:hover .hero-identity,.hero-visual:hover .hero-community>img,.gallery figure:hover .photo-frame,.gallery figure:hover .photo-window img,.button:hover>span,.app-monogram,.app-arrow) {transform:none}
  html:not([data-motion=full]) .pointer-active::after {opacity:0}
}
@media print {
  .hero-visual::before,.hero-visual::after,.photo-frame::before,.photo-frame::after,.hero-identity::after {display:none}
  .hero-identity,.photo-frame,.series-feature,.study-gallery {box-shadow:none;border:1px solid var(--line)}
}

/* Visitors may reduce motion even if their system preference allows it. */
html[data-motion=reduced] {scroll-behavior:auto}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after {animation:none!important;transition:none!important}
html[data-motion=reduced] :is(.button:hover,.icon-button:hover,.dots button:hover,.lesson-tile:hover,.navigation-app:hover,.origin-card:hover,.series-feature:hover,.hero-visual:hover .hero-identity,.hero-visual:hover .hero-community>img,.gallery figure:hover .photo-frame,.gallery figure:hover .photo-window img,.button:hover>span,.app-monogram,.app-arrow) {transform:none}
html[data-motion=reduced] .pointer-active::after {opacity:0}
html[data-motion=reduced] .hero-visual::before,html[data-motion=reduced] .hero-visual::after,html[data-motion=reduced] .photo-frame::before {transform:none!important}
@media(prefers-reduced-motion:reduce){html:not([data-motion=full]) .hero-visual::before,html:not([data-motion=full]) .hero-visual::after,html:not([data-motion=full]) .photo-frame::before{transform:none!important}}
.footer-bottom{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-bottom .copyright{width:auto}
.motion-toggle{flex-shrink:0;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.75rem;padding:10px 14px;min-height:44px;border-radius:24px;transition:background-color .25s ease,border-color .25s ease}
.motion-toggle:hover,.motion-toggle:focus-visible{background:var(--soft);border-color:var(--sage)}
@media(max-width:640px){.footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}}