/*
 * Created by Abalfazl Eskandari
 * https://aeskandari.ir
 */
/* ========== Color tokens ========== */
:root{
  --bg:#f1f7f4; --bg-2:#e2f0eb; --surface:#ffffff; --surface-2:#e9f4f0;
  --ink:#0e2b24; --muted:#44635a;
  --brand:#2a9a86; --brand-deep:#1b6f60; --on-brand:#ffffff;
  --gold:#9c7626; --line:rgba(14,43,36,.14);
  --skyline:#2a9a86; --sky-top:#d9eee7; --sky-bot:#f1f7f4;
  --pat:rgba(27,111,96,.13);
  --shadow:0 24px 50px -26px rgba(14,70,56,.4);
  --band:#0f3a2e; --band-ink:#eaf5ef;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#081b13; --bg-2:#0b241a; --surface:#0f3024; --surface-2:#123a2c;
  --ink:#e9f4ee; --muted:#9dbcae;
  --brand:#3cc4a9; --brand-deep:#3cc4a9; --on-brand:#04201a;
  --gold:#d6b46c; --line:rgba(233,244,238,.15);
  --skyline:#2f9f89; --sky-top:#03100a; --sky-bot:#081b13;
  --pat:rgba(214,180,108,.17);
  --shadow:0 24px 50px -26px rgba(0,0,0,.8);
  --band:#06140e; --band-ink:#eaf5ef;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  font-family:"Vazirmatn","Vazir",Tahoma,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:1.0625rem;line-height:2;
  transition:background .5s ease,color .5s ease;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.naskh{font-family:"Noto Naskh Arabic","Amiri",serif}
h1,h2,h3{line-height:1.5;font-weight:800;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.lead{color:var(--muted);max-width:60ch}
.pat{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.35rem;border-radius:999px;
  font:inherit;font-weight:700;font-size:1rem;line-height:1.4;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--brand-deep);color:var(--brand-deep);background:transparent;
  transition:background .25s,color .25s,transform .25s}
[data-theme="dark"] .btn{border-color:var(--brand);color:var(--brand)}
.btn:hover{background:var(--brand-deep);color:var(--on-brand)}
[data-theme="dark"] .btn:hover{background:var(--brand);color:var(--on-brand)}
.btn.solid{background:var(--brand-deep);color:var(--on-brand)}
[data-theme="dark"] .btn.solid{background:var(--brand);color:var(--on-brand)}
.btn.solid:hover{transform:translateY(-2px)}
.btn svg{width:1.25rem;height:1.25rem;flex:none}
.ico{fill:currentColor}
.ico-s{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ========== Header ========== */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0);
  transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.top.solid{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;height:68px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:800}
.brand .mark{width:38px;height:38px;border-radius:11px;background:var(--brand-deep);color:var(--on-brand);display:grid;place-items:center}
[data-theme="dark"] .brand .mark{background:var(--brand)}
.brand .mark svg{width:24px;height:24px}
.brand small{display:block;font-weight:400;font-size:.78rem;color:var(--muted);line-height:1.2}
.brand span{line-height:1.3}
.nav{margin-inline-start:auto;display:flex;gap:1.6rem}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem;color:var(--ink);opacity:.85;position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s}
.nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}
.tt{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;display:grid;place-items:center;transition:transform .4s,border-color .3s}
.tt:hover{border-color:var(--gold)}
.tt svg{width:22px;height:22px;grid-area:1/1;transition:transform .5s,opacity .3s}
.tt .i-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
[data-theme="dark"] .tt .i-sun{opacity:1;transform:none}
[data-theme="dark"] .tt .i-moon{opacity:0;transform:rotate(90deg) scale(.5)}

/* ========== Hero ========== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 78%);transition:background .6s}
.hero .pat{opacity:.9;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);mask-image:linear-gradient(180deg,#000 0%,transparent 72%);z-index:-2}
.sky,.orb{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* .orb holds the sun and moon. On desktop it is the sky corner; on mobile (see the media query below) it sits in the page flow, above the Bismillah */
.sun{position:absolute;inset-inline-start:11%;top:21%;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,#fff9e0 0 28%,rgba(255,226,140,.55) 29% 46%,rgba(255,226,140,0) 70%);
  transition:opacity .8s,transform 1s}
.moon{position:absolute;inset-inline-start:11%;top:20%;width:120px;height:120px;opacity:0;transform:translateY(24px);transition:opacity .8s,transform 1s}
.moon::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(214,180,108,.2),transparent 62%)}
.stars{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f4e4b8}
[data-theme="dark"] .sun{opacity:0;transform:translateY(-30px)}
[data-theme="dark"] .moon{opacity:1;transform:none}
[data-theme="dark"] .stars{opacity:1}
@media (prefers-reduced-motion:no-preference){
  [data-theme="dark"] .stars i{animation:tw 4.5s ease-in-out infinite}
  .stars i:nth-child(3n){animation-delay:-1.4s!important}.stars i:nth-child(3n+1){animation-delay:-3s!important}
  @keyframes tw{50%{opacity:.25}}
}
.hero-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(68px + 3vh) 1.25rem 1.5rem;gap:.9rem}
.bism{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--gold);line-height:1.8}
.hero h1{font-size:clamp(2.6rem,8vw,5.6rem);line-height:1.2;letter-spacing:-.01em}
.hero .uni{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:500;color:var(--brand-deep)}
[data-theme="dark"] .hero .uni{color:var(--brand)}
.hero .lead{margin-inline:auto;font-size:1.05rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:.6rem}
.skyline{position:relative;width:100%;height:clamp(140px,min(24vw,34vh),320px);flex:none}
.skyline::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--skyline);opacity:.55}
.skyline svg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:max(100%,980px);height:100%}
.sk-fill{fill:var(--skyline);stroke:none;fill-rule:evenodd}
.sk-line{fill:none;stroke:var(--skyline);stroke-width:1.5;fill-rule:evenodd;vector-effect:non-scaling-stroke}
.sk-far{fill:var(--skyline);opacity:.16;fill-rule:evenodd}
@media (prefers-reduced-motion:no-preference){
  .hero-in>*:not(.orb){animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-in>*:nth-child(3){animation-delay:.1s}.hero-in>*:nth-child(4){animation-delay:.2s}
  .hero-in>*:nth-child(5){animation-delay:.3s}.hero-in>*:nth-child(6){animation-delay:.4s}
  .skyline svg{animation:grow 1.4s .25s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}}
  @keyframes grow{from{opacity:0;transform:translateX(-50%) translateY(50px)}}
}

/* Phones, small tablets and landscape phones:
   the sun/moon is part of the layout instead of a fixed percentage of the hero height,
   so it always stays above the Bismillah and never slides under the text (e.g. iPhone 16 / Safari). */
@media (max-width:900px),(max-height:560px){
  .hero-in{padding-top:calc(68px + .25rem);gap:.6rem}
  /* The halo around the sun/moon has empty space; negative margins reclaim it so the hero does not grow taller (the halo stays behind the text) */
  .orb{--orb:80px;position:relative;inset:auto;z-index:-1;flex:none;width:var(--orb);height:var(--orb);margin-block:-10px -12px}
  .sun,.moon{top:0;inset-inline-start:0;width:100%;height:100%}
  .moon{transform:translate(14%,24px)}              /* The crescent leans left; shift it so it looks centered */
  [data-theme="dark"] .moon{transform:translateX(14%)}
}
@media (max-height:560px){.orb{--orb:56px;margin-block:-6px -8px}}

/* ========== Sections ========== */
section{position:relative}
.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.sec-h{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.alt{background:var(--bg-2)}
.defer{content-visibility:auto;contain-intrinsic-size:auto 800px}

/* Contact */
.chan{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.ch{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;grid-column:span 2;
  transition:transform .3s,border-color .3s,box-shadow .3s;overflow:hidden}
.ch:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.ch .ci{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand-deep)}
[data-theme="dark"] .ch .ci{color:var(--brand)}
.ch .ci svg{width:28px;height:28px}
.ch h3{font-size:1.2rem}
.ch p{color:var(--muted);font-size:.95rem;line-height:1.9}
.ch .go{margin-top:auto;display:inline-flex;gap:.4rem;align-items:center;font-weight:700;color:var(--brand-deep);font-size:.95rem}
[data-theme="dark"] .ch .go{color:var(--brand)}
.ch .go svg{width:18px;height:18px;transition:transform .3s}
.ch:hover .go svg{transform:translateX(-5px)}
.ch.main{grid-column:span 3;background:var(--brand-deep);border-color:transparent;color:var(--on-brand);padding:2rem;min-height:290px}
[data-theme="dark"] .ch.main{background:linear-gradient(160deg,#124a39,#0e3a2d);color:var(--ink);border-color:var(--line)}
.ch.main .ci{background:rgba(255,255,255,.16);color:inherit;width:64px;height:64px;border-radius:20px}
[data-theme="dark"] .ch.main .ci{color:var(--brand)}
.ch.main .ci svg{width:34px;height:34px}
.ch.main h3{font-size:1.7rem}
.ch.main p,.ch.main .go{color:inherit;opacity:.92}
.ch.main .pat{opacity:.55;--pat:rgba(255,255,255,.14);z-index:0}
.ch.main>*:not(.pat){position:relative;z-index:1}
.ch.sm{grid-column:span 1}
.chan .ch:nth-child(2){grid-column:span 3}
@media(max-width:900px){.chan{grid-template-columns:1fr 1fr}.ch,.ch.main,.chan .ch:nth-child(2),.ch.sm{grid-column:span 1}.ch.main{grid-column:1/-1;min-height:0}}
@media(max-width:560px){.chan{grid-template-columns:1fr}.ch,.ch.main,.chan .ch:nth-child(2),.ch.sm{grid-column:1}}

/* Scroll-linked visual story */
.story{padding-block:clamp(4rem,9vw,7rem) 2rem}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.stage-wrap{position:sticky;top:calc(68px + 4vh);height:min(78vh,720px)}
.stage{position:relative;height:100%;max-width:470px;margin-inline:auto;border-radius:999px 999px 28px 28px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 22%,var(--surface)),var(--surface-2));
  border:1px solid var(--gold);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.stage::after{content:"";position:absolute;inset:10px;border-radius:990px 990px 20px 20px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);pointer-events:none;z-index:5}
.stage .pat{z-index:0;opacity:.6}
.fig{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 1.3s cubic-bezier(.2,.7,.2,1);z-index:1}
.fig.on{opacity:1;transform:none}
.fig img.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(calc((var(--p,.5) - .5) * -36px)) scale(1.1)}
.fig.art{display:grid;place-items:end center;padding:0 7% 74px}
.fig.art svg{width:100%;height:auto;transform:translateY(calc((var(--p,.5) - .5) * -18px))}
.a-sun{fill:var(--gold);opacity:.9}
.a-gold{fill:var(--gold);stroke:none}
.a-line .a-gold-fill{fill:var(--gold)}
.a-line .f{fill:var(--surface-2)}
.a-line{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.a-line>*{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .fig.on .a-line>*{animation:draw 1.8s .15s cubic-bezier(.5,0,.2,1) both}
  @keyframes draw{from{stroke-dashoffset:1}}
}
.fig .glow{position:absolute;inset:auto 0 0 0;height:55%;background:radial-gradient(60% 70% at 50% 100%,color-mix(in srgb,var(--gold) 38%,transparent),transparent 70%)}
.cap{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);white-space:nowrap;font-size:.85rem;color:var(--ink);z-index:6;font-weight:500;padding:.15rem 1rem;border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line)}
.ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;color:var(--muted);font-size:.9rem}
.ph svg.pat{opacity:1}
.ph .ph-art{position:absolute;inset:auto 0 0 0;margin:auto;width:70%;height:70%;fill:none;stroke:var(--brand);stroke-width:1.2;opacity:.35;vector-effect:non-scaling-stroke;fill-rule:evenodd;top:0}
.ph span{position:relative;background:var(--surface);padding:.35rem .9rem;border-radius:999px;border:1px dashed var(--line)}
.dots{position:absolute;inset-inline-end:-26px;top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:6}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .4s,transform .4s}
.dots i.on{background:var(--gold);transform:scale(1.5)}
.steps{padding-block:6vh}
.step{min-height:82vh;display:flex;flex-direction:column;justify-content:center;gap:1rem;opacity:.35;transition:opacity .6s}
.step.on{opacity:1}
.step h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.step p{color:var(--muted);max-width:46ch;font-size:1.08rem}
.step .rule{width:56px;height:3px;background:var(--gold);border-radius:3px}
@media(max-width:900px){
  .story-grid{grid-template-columns:1fr;gap:0}
  .stage-wrap{top:68px;height:calc(31svh + 3.2rem);z-index:2;padding:.5rem 0 3.2rem;
    background:linear-gradient(var(--bg-2) 0,var(--bg-2) calc(100% - 3rem),color-mix(in srgb,var(--bg-2) 70%,transparent) calc(100% - 1.6rem),transparent 100%)}
  .stage{max-width:210px;margin-inline:auto}
  .fig.art{padding:0 6% 36px}
  .cap{font-size:.74rem;bottom:14px;padding:.05rem .7rem}
  .dots{display:none}
  .stage::after{inset:7px}
  .steps{padding-top:2vh}
  .step{min-height:60vh;opacity:.5}
  .step p,.sec-h .lead{max-width:none}
  .wrap{width:min(1180px,100% - 2rem)}
}

/* Schedule */
.today{display:inline-block;margin-top:.3rem;font-size:.95rem;color:var(--brand-deep);font-weight:700}
[data-theme="dark"] .today{color:var(--brand)}
.evs{list-style:none;padding:0;border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:150px 1fr auto;gap:1.5rem;align-items:center;padding:1.6rem .5rem;border-bottom:1px solid var(--line);position:relative;transition:background .3s}
.ev:hover{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.ev-day{font-size:1.7rem;font-weight:800;color:var(--brand-deep)}
[data-theme="dark"] .ev-day{color:var(--brand)}
.ev-day small{display:block;font-size:.95rem;font-weight:500;color:var(--muted);line-height:1.5}
.ev h3{font-size:1.25rem}
.ev p{color:var(--muted);font-size:.95rem;line-height:1.8}
.when{font-size:.9rem;font-weight:700;padding:.3rem .9rem;border-radius:999px;background:var(--surface-2);color:var(--ink);white-space:nowrap}
.ev.next .when{background:var(--brand-deep);color:var(--on-brand)}
[data-theme="dark"] .ev.next .when{background:var(--brand)}
.ev.next::before{content:"";position:absolute;inset-inline-start:-1px;top:14%;bottom:14%;width:4px;border-radius:4px;background:var(--gold)}
@media(max-width:680px){.ev{grid-template-columns:1fr;gap:.4rem}.ev-day{font-size:1.4rem}.when{justify-self:start}}

/* Verse band */
.band{position:relative;background:var(--band);color:var(--band-ink);text-align:center;padding-block:clamp(4rem,8vw,6.5rem);overflow:hidden;isolation:isolate}
.band .pat{--pat:rgba(214,180,108,.16);z-index:-1}
.band q{display:block;quotes:none;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:2;color:#e6c985}
.band p{margin-top:.6rem;opacity:.85}
.band small{display:block;margin-top:.3rem;opacity:.6;font-size:.85rem}

/* Gallery */
/* Photos are landscape with their own frame/logo baked in, so all tiles share one 4:3 size to avoid cropping */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);padding:0;cursor:zoom-in;font:inherit;color:inherit}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile.empty{cursor:default}
@media(max-width:700px){.gal{grid-template-columns:1fr 1fr;gap:10px}.tile{border-radius:14px}}
@media(max-width:340px){.gal{grid-template-columns:1fr}}
dialog{border:0;background:transparent;max-width:min(94vw,1100px);max-height:92vh;max-height:92dvh;padding:0;margin:auto;overflow:visible}
dialog::backdrop{background:rgba(2,12,8,.86);backdrop-filter:blur(6px)}
dialog img{max-height:86vh;max-height:86dvh;width:auto;max-width:100%;border-radius:14px;margin-inline:auto}
dialog button{position:absolute;top:-46px;inset-inline-end:0;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}

/* Get involved */
.join{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;padding:clamp(1.8rem,4vw,3rem);border-radius:28px;
  background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.join .pat{z-index:-1;opacity:.6;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000);mask-image:linear-gradient(90deg,transparent 40%,#000)}
.join .cta{justify-content:flex-start;margin:0}
@media(max-width:760px){.join{grid-template-columns:1fr}}

/* Footer */
footer{background:var(--band);color:var(--band-ink);padding-block:4rem 2rem;position:relative;overflow:hidden;isolation:isolate}
footer .pat{--pat:rgba(214,180,108,.12);z-index:-1;-webkit-mask-image:linear-gradient(0deg,transparent,#000 70%);mask-image:linear-gradient(0deg,transparent,#000 70%)}
.f-grid{display:grid;grid-template-columns:1.1fr 1.4fr;gap:3rem;align-items:start}
.f-grid p{opacity:.78;max-width:42ch;margin-top:.8rem}
.f-grid h4{font-size:1rem;font-weight:700;color:#e6c985;margin-bottom:1rem}
.f-links{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fl{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem 1.3rem;border-radius:18px;border:1px solid rgba(233,244,238,.2);text-decoration:none;
  background:rgba(255,255,255,.04);transition:background .3s,border-color .3s,transform .3s}
.fl:hover{background:rgba(255,255,255,.1);border-color:#e6c985;transform:translateY(-3px)}
.fl b{font-size:1.05rem;line-height:1.7}
.fl span{font-size:.85rem;opacity:.7;direction:ltr;text-align:right;display:inline-flex;gap:.4rem;align-items:center;justify-content:flex-end}
.fl span svg{width:14px;height:14px}
.call{display:inline-flex;align-items:center;gap:.9rem;margin-top:1.4rem;padding:.7rem 1.4rem .7rem 1.1rem;border-radius:999px;border:1px solid #e6c985;text-decoration:none;color:inherit;background:rgba(255,255,255,.05);transition:background .3s,transform .3s}
.call:hover{background:rgba(230,201,133,.16);transform:translateY(-2px)}
.call .ci{width:42px;height:42px;border-radius:50%;background:#e6c985;color:#06140e;display:grid;place-items:center}
.call .ci svg{width:21px;height:21px}
.call .ct{display:grid;line-height:1.5;text-align:start}
.call small{font-size:.8rem;opacity:.75}
.call b{font-size:1.2rem;letter-spacing:.04em;font-weight:700}
.copy{margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(233,244,238,.15);font-size:.85rem;opacity:.65;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}
@media(max-width:820px){.f-grid{grid-template-columns:1fr}.f-links{grid-template-columns:1fr}}

@media(max-width:760px){.nav{display:none}.top .wrap{gap:1rem}.tt{margin-inline-start:auto}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;scroll-behavior:auto!important}.fig img.ph-img{transform:none!important}}