/*
Theme Name: Al-Rashoodi
Theme URI: https://alrashoodi.sa/
Author: أسرة الرشودي
Description: قالب سريع بأسلوب تطبيق أحادي الصفحة (SPA) لموقع صندوق أسرة الرشودي — بدون Elementor أو أي إضافة مدفوعة في العرض، والنماذج داخل إطارات مدمجة.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: alrashoodi
*/

/* ── IBM Plex Sans Arabic (self-hosted) ─────────────────────────────────── */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
 src:url(assets/fonts/plex-arabic-400.woff2) format('woff2');
 unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
 src:url(assets/fonts/plex-arabic-600.woff2) format('woff2');
 unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;
 src:url(assets/fonts/plex-arabic-700.woff2) format('woff2');
 unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
 src:url(assets/fonts/plex-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
 src:url(assets/fonts/plex-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;
 src:url(assets/fonts/plex-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
 --bg:#eef1ec; --surface:#ffffff; --surface-2:#f4f6f2;
 --text:#17221b; --muted:#5b675e; --border:#dfe5dd;
 --brand:#2c743c; --brand-ink:#1e5c2f; --brand-soft:#e6f1e8; --brand-line:#bfd9c6;
 --gold:#d29c29; --gold-soft:#f8efdc;
 --band-a:#174d26; --band-b:#2c743c; --band-ink:#ffffff; --band-dim:rgba(255,255,255,.78);
 --r:18px; --pad:clamp(1rem,4vw,1.75rem); --maxw:1040px;
 --shadow:0 1px 2px rgba(18,38,24,.06),0 6px 20px rgba(18,38,24,.07);
 --shadow-lift:0 2px 4px rgba(18,38,24,.08),0 16px 36px rgba(18,38,24,.12);
 --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M14 14h56v56H14z'/%3E%3Cpath d='M42 4 80 42 42 80 4 42z'/%3E%3Ccircle cx='42' cy='42' r='8'/%3E%3C/g%3E%3C/svg%3E");
 color-scheme:light;
}
@media(prefers-color-scheme:dark){
 :root{
  --bg:#0d120f; --surface:#161d18; --surface-2:#1b231d;
  --text:#e8eee9; --muted:#9cab9f; --border:#28322b;
  --brand:#57ac6b; --brand-ink:#7cc78e; --brand-soft:#182a1d; --brand-line:#2e4936;
  --gold:#d9b845; --gold-soft:#26200f;
  --band-a:#0e2b16; --band-b:#1c4a29; --band-dim:rgba(255,255,255,.68);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 20px rgba(0,0,0,.35);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 16px 36px rgba(0,0,0,.45);
  color-scheme:dark;
 }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
 margin:0;background:var(--bg);color:var(--text);
 font-family:'IBM Plex Sans Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;
 font-size:1rem;line-height:1.9;-webkit-font-smoothing:antialiased;
 display:flex;flex-direction:column;min-height:100vh;overflow-x:clip;
}
img,svg,iframe,video{max-width:100%}
img,svg{display:block;height:auto}
a{color:var(--brand)}
a:hover{color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
#view:focus{outline:none}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip-link{position:fixed;top:-100px;inset-inline-start:1rem;z-index:99;background:var(--brand);color:#fff;
 padding:.7rem 1.1rem;border-radius:0 0 10px 10px;transition:top .2s}
.skip-link:focus{top:0;color:#fff}
main{flex:1;display:flex;flex-direction:column}

/* Logos: one request each, theme decides which shows */
.logo{display:inline-block;background:no-repeat center/contain;background-image:url(assets/logo.svg);
 aspect-ratio:2123/1920;width:30px}
@media(prefers-color-scheme:dark){.logo{background-image:url(assets/logo-dark.svg)}}
/* Icon-only mark for the top bar (the full lockup carries the name, which
   would duplicate the site title sitting right next to it). */
.logo-mark{display:inline-block;background:no-repeat center/contain;
 background-image:url(assets/logo-icon.svg);aspect-ratio:1603/1245;width:38px;flex-shrink:0}
@media(prefers-color-scheme:dark){.logo-mark{background-image:url(assets/logo-icon-dark.svg)}}
.logo-white{display:block;background:no-repeat center/contain;background-image:url(assets/logo-icon-white.svg);
 aspect-ratio:1603/1245;width:clamp(120px,24vw,168px);margin-inline:auto;
 filter:drop-shadow(0 10px 24px rgba(0,0,0,.25))}

/* ── Router progress bar ────────────────────────────────────────────────── */
.nav-bar{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;z-index:200;
 background:linear-gradient(90deg,var(--gold),var(--brand));border-radius:0 2px 2px 0;
 opacity:0;transition:width .25s ease,opacity .3s}
.nav-bar.on{opacity:1}

/* ── View transition ────────────────────────────────────────────────────── */
@keyframes view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view.in{animation:view-in .28s cubic-bezier(.2,.7,.3,1) both}

/* ── Top bar (persistent) ───────────────────────────────────────────────── */
body:has(#view .band--hero) .topbar,body:has(#view .m-hero) .topbar{display:none}
.topbar{position:sticky;top:0;z-index:100;
 background:color-mix(in srgb,var(--surface) 82%,transparent);
 backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
 border-block-end:1px solid var(--border)}
.topbar .wrap{display:flex;align-items:center;min-height:56px}
.topbar a{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none}
.topbar-name{font-weight:700;font-size:1rem;letter-spacing:-.01em}

body.admin-bar .topbar{top:32px}
@media(max-width:782px){body.admin-bar .topbar{top:46px}}

/* ── Green band ─────────────────────────────────────────────────────────── */
.band{position:relative;color:var(--band-ink);
 background:
  radial-gradient(90% 130% at 85% -20%,color-mix(in srgb,var(--gold) 26%,transparent),transparent 55%),
  linear-gradient(160deg,var(--band-b),var(--band-a));
 overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background-image:var(--pattern);background-size:84px 84px;
 -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25));
 mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25));pointer-events:none}
.band>.wrap{position:relative}

.band--hero{text-align:center;padding:clamp(2.8rem,8vw,4.6rem) 0 clamp(4.6rem,10vw,6rem)}
.hero h1{margin:1.15rem 0 0;font-size:clamp(1.8rem,5.6vw,2.6rem);font-weight:700;
 letter-spacing:-.02em;line-height:1.3;color:var(--band-ink)}
.hero p{margin:.45rem 0 0;color:var(--band-dim);font-size:clamp(.97rem,2.4vw,1.1rem)}

.band--page{padding:clamp(1.7rem,5vw,2.5rem) 0 clamp(3rem,7vw,3.8rem)}
.band--page h1{margin:.25rem 0 0;font-size:clamp(1.45rem,4.4vw,2rem);font-weight:700;
 letter-spacing:-.015em;line-height:1.4;color:var(--band-ink)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.84rem;color:var(--band-dim)}
.crumbs a{color:var(--band-dim);text-decoration:none;transition:color .15s}
.crumbs a:hover{color:var(--band-ink);text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{opacity:.5;font-size:.9em}
.crumbs .here{color:var(--band-ink);font-weight:600}
.band-meta{margin:.4rem 0 0;color:var(--band-dim);font-size:.85rem}

/* ── Home tiles (overlapping the band) ──────────────────────────────────── */
.tiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
 margin-block-start:calc(clamp(3.2rem,8vw,4.2rem) * -1);position:relative;z-index:2;
 padding-block-end:clamp(2.6rem,8vw,4.2rem)}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
 text-align:center;padding:1.7rem 1rem 1.5rem;background:var(--surface);
 border:1px solid var(--border);border-radius:var(--r);color:var(--text);text-decoration:none;
 box-shadow:var(--shadow);
 transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-4px);border-color:var(--brand-line);color:var(--text);box-shadow:var(--shadow-lift)}
.tile:active{transform:translateY(-1px)}
.tile-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;
 background:linear-gradient(150deg,var(--brand-soft),color-mix(in srgb,var(--brand-soft) 55%,var(--surface)));
 color:var(--brand);border:1px solid var(--brand-line);
 transition:background .2s,color .2s,border-color .2s,transform .2s}
.tile:hover .tile-ic{background:linear-gradient(150deg,var(--brand),var(--brand-ink));
 color:#fff;border-color:var(--brand-ink);transform:scale(1.06)}
.ext-badge{position:absolute;top:10px;inset-inline-end:10px;color:var(--muted);opacity:.7;
 transition:color .18s,opacity .18s}
.tile:hover .ext-badge,a.card:hover .ext-badge{color:var(--brand);opacity:1}
.tile b{font-weight:600;font-size:.98rem;line-height:1.5}

@keyframes tile-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tiles .tile{animation:tile-in .45s cubic-bezier(.2,.7,.3,1) backwards}
.tiles .tile:nth-child(1){animation-delay:.02s}.tiles .tile:nth-child(2){animation-delay:.06s}
.tiles .tile:nth-child(3){animation-delay:.10s}.tiles .tile:nth-child(4){animation-delay:.14s}
.tiles .tile:nth-child(5){animation-delay:.18s}.tiles .tile:nth-child(6){animation-delay:.22s}
.tiles .tile:nth-child(7){animation-delay:.26s}.tiles .tile:nth-child(8){animation-delay:.30s}
.tiles .tile:nth-child(n+9){animation-delay:.34s}

/* ── Content sheet (overlapping the page band) ──────────────────────────── */
.sheet{background:var(--surface);border:1px solid var(--border);border-radius:22px;
 box-shadow:var(--shadow);position:relative;z-index:2;
 margin-block-start:calc(clamp(1.9rem,5vw,2.5rem) * -1);
 margin-block-end:clamp(2.4rem,7vw,4rem);
 padding:clamp(1.4rem,4.5vw,2.5rem)}

/* ── Blocks ─────────────────────────────────────────────────────────────── */
.blk+.blk{margin-block-start:1.5rem}
.blk-h{max-width:70ch;margin-inline:auto;font-weight:700;line-height:1.5;letter-spacing:-.01em}
h2.blk-h{font-size:1.35rem;margin-block:1.4rem .1rem;padding-inline-start:.85rem;position:relative}
h2.blk-h::before{content:"";position:absolute;inset-inline-start:0;top:.32em;bottom:.32em;width:4px;
 border-radius:4px;background:linear-gradient(var(--brand),var(--gold))}
h3.blk-h{font-size:1.12rem;margin-block:1.2rem .1rem}
h4.blk-h,h5.blk-h,h6.blk-h{font-size:1rem;color:var(--muted);font-weight:600;margin-block:1rem 0}

.prose,.entry{max-width:70ch;margin-inline:auto;font-size:1.02rem;line-height:2}
.prose>*+*,.entry>*+*{margin-block-start:1em}
.prose h2,.entry h2{font-size:1.35rem;font-weight:700;margin-block-start:1.8em;line-height:1.5}
.prose h3,.entry h3{font-size:1.12rem;font-weight:600;margin-block-start:1.5em}
.prose ul,.prose ol,.entry ul,.entry ol{padding-inline-start:1.4em}
.prose li+li,.entry li+li{margin-block-start:.35em}
.prose img,.entry img{border-radius:14px;margin-inline:auto}
.prose a,.entry a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose table,.entry table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td,.entry th,.entry td{border:1px solid var(--border);padding:.55rem .75rem;text-align:start}
.prose th,.entry th{background:var(--surface-2);font-weight:600}
.prose blockquote,.entry blockquote{margin-inline:0;padding-inline-start:1rem;
 border-inline-start:3px solid var(--brand-line);color:var(--muted)}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Cards */
.cards{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
a.card{text-decoration:none}
.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.65rem;text-align:center;
 padding:1.5rem 1rem 1.35rem;background:var(--surface-2);border:1px solid var(--border);
 border-radius:var(--r);color:var(--text);
 transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s,background .2s}
a.card:hover{transform:translateY(-3px);border-color:var(--brand-line);background:var(--surface);
 color:var(--text);box-shadow:var(--shadow-lift)}
.card .tile-ic{width:48px;height:48px;border-radius:15px}
a.card:hover .tile-ic{background:linear-gradient(150deg,var(--brand),var(--brand-ink));color:#fff;border-color:var(--brand-ink)}
.card b{font-weight:600;font-size:.97rem;line-height:1.5}
.card p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.7}

/* Accordion */
.acc{max-width:70ch;margin-inline:auto;display:flex;flex-direction:column;gap:.65rem;counter-reset:faq}
.acc details{background:var(--surface-2);border:1px solid var(--border);border-radius:15px;overflow:hidden;
 transition:border-color .2s,box-shadow .2s,background .2s}
.acc details[open]{background:var(--surface);border-color:var(--brand-line);box-shadow:var(--shadow)}
.acc summary{display:flex;align-items:center;gap:.8rem;padding:.95rem 1.1rem;cursor:pointer;
 font-weight:600;font-size:.95rem;line-height:1.65;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{counter-increment:faq;content:counter(faq,arabic-indic);
 display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;border-radius:9px;
 background:var(--gold-soft);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);
 font-size:.8rem;font-weight:700}
.acc summary::after{content:"";flex-shrink:0;margin-inline-start:auto;width:9px;height:9px;
 border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);
 transform:rotate(45deg) translateY(-2px);transition:transform .22s}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc .acc-a{padding:.15rem 1.1rem 1.05rem;padding-inline-start:calc(1.1rem + 27px + .8rem);
 color:var(--muted);line-height:1.95}
.acc .acc-a>*:first-child{margin-block-start:0}
.acc .acc-a>*:last-child{margin-block-end:0}

/* Legacy imported HTML (keeps its own scoped styles) */
.legacy{max-width:74ch;margin-inline:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.legacy *{max-width:100%}

/* Trusted live embeds (family calendar, maps, videos) */
.embedframe{max-width:74ch;margin-inline:auto;background:var(--surface);border:1px solid var(--border);
 border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.embedframe iframe{display:block;width:100%;border:0;min-height:560px}

/* Gallery (greeting cards) */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
 max-width:74ch;margin-inline:auto}
.gallery img{width:100%;border-radius:15px;border:1px solid var(--border);box-shadow:var(--shadow);
 transition:transform .2s,box-shadow .2s}
.gallery a:hover img{transform:translateY(-3px);box-shadow:var(--shadow-lift)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
 padding:.72rem 1.6rem;border-radius:999px;font-weight:600;font-size:.97rem;text-decoration:none;
 background:linear-gradient(160deg,var(--brand),var(--brand-ink));color:#fff;border:0;cursor:pointer;
 box-shadow:0 4px 16px color-mix(in srgb,var(--brand) 32%,transparent);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);color:#fff;box-shadow:0 6px 22px color-mix(in srgb,var(--brand) 42%,transparent)}

/* ── Embedded form (iframe) ─────────────────────────────────────────────── */
.formbox{max-width:660px;margin-inline:auto}
.formbox-bar{display:flex;justify-content:flex-end;margin-block-end:.5rem}
.formbox-bar a{font-size:.82rem;color:var(--muted);text-decoration:none}
.formbox-bar a:hover{color:var(--brand)}
.formbox-shell{position:relative;background:var(--surface);border:1px solid var(--border);
 border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);min-height:420px}
.formbox-shell iframe{display:block;width:100%;border:0;min-height:420px}
.formbox-load{position:absolute;inset:0;display:grid;place-items:center;background:var(--surface);transition:opacity .3s}
.spin{width:26px;height:26px;border:2.5px solid var(--border);border-top-color:var(--brand);
 border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Landing page (proposal at /new-home/) ─────────────────────────────── */
/* Spare by intent: one column, type-led, hairline rhythm. */
.m-page{width:100%;max-width:660px;margin-inline:auto;padding:0 var(--pad) clamp(3rem,8vw,4.5rem);flex:1}

.m-hero{text-align:center;padding-block:clamp(3.4rem,10vw,6rem) clamp(2.6rem,7vw,3.6rem)}
.m-mark{width:clamp(72px,13vw,96px);margin-inline:auto}
.m-hero h1{margin:1.3rem 0 0;font-size:clamp(1.9rem,6vw,2.7rem);font-weight:700;
 letter-spacing:-.025em;line-height:1.3}
.m-hero p{margin:.5rem 0 0;color:var(--muted);font-size:clamp(.97rem,2.5vw,1.08rem)}
.m-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-block-start:2rem}
.btn-quiet{background:transparent;color:var(--brand);border:1.5px solid var(--brand-line);box-shadow:none}
.btn-quiet:hover{background:var(--brand-soft);color:var(--brand-ink);box-shadow:none}

/* the index: the site as a quiet table of contents */
.m-index{display:flex;flex-direction:column;border-block-start:1px solid var(--border)}
.m-index a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
 padding:1.02rem .2rem;border-block-end:1px solid var(--border);
 color:var(--text);text-decoration:none;font-weight:600;
 font-size:clamp(1.05rem,2.8vw,1.2rem);letter-spacing:-.01em;
 transition:color .16s,padding-inline-start .2s cubic-bezier(.2,.7,.3,1)}
.m-index a span{color:var(--muted);opacity:.55;display:grid;place-items:center;flex-shrink:0;
 transition:transform .2s,color .16s,opacity .16s}
.m-index a:hover{color:var(--brand-ink);padding-inline-start:.55rem}
.m-index a:hover span{color:var(--brand);opacity:1;transform:translateX(-4px)}

.m-sec{padding-block-start:clamp(2.4rem,7vw,3.4rem)}
.m-label{margin:0 0 .8rem;font-size:.82rem;font-weight:700;color:var(--brand);letter-spacing:.04em}
.m-text{margin:0;color:var(--muted);font-size:1.04rem;line-height:2.1}
.m-more{display:inline-flex;align-items:center;gap:.35rem;margin-block-start:1rem;
 color:var(--brand);font-weight:600;font-size:.92rem;text-decoration:none}
.m-more svg{transition:transform .18s}
.m-more:hover{color:var(--brand-ink)}
.m-more:hover svg{transform:translateX(-4px)}

.m-app{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
 border-block-start:1px solid var(--border);margin-block-start:clamp(2.4rem,7vw,3.4rem)}
.m-app .m-label{margin:0;font-size:1rem;color:var(--text)}
.m-stores{display:flex;gap:.55rem;flex-wrap:wrap}
.m-store{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1rem;border-radius:13px;
 background:var(--text);color:var(--bg);text-decoration:none;transition:transform .15s,opacity .18s}
.m-store:hover{transform:translateY(-2px);opacity:.88;color:var(--bg)}
.m-store small{display:block;font-size:.62rem;opacity:.7;line-height:1.3}
.m-store b{display:block;font-size:.88rem;font-weight:600;line-height:1.3}

/* staggered, gentle */
@keyframes m-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m-hero{animation:m-in .5s cubic-bezier(.2,.7,.3,1) backwards}
.m-index{animation:m-in .5s .1s cubic-bezier(.2,.7,.3,1) backwards}
.m-sec{animation:m-in .5s .18s cubic-bezier(.2,.7,.3,1) backwards}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-block-start:1px solid var(--border);background:var(--surface);padding:1.3rem 0 1.15rem}
.site-foot .wrap{display:flex;flex-direction:column;align-items:center;gap:.8rem;
 font-size:.84rem;color:var(--muted);text-align:center}
.socials{display:flex;gap:.6rem}
.socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
 background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
 transition:background .18s,color .18s,border-color .18s,transform .15s}
.socials a:hover{background:linear-gradient(150deg,var(--brand),var(--brand-ink));
 color:#fff;border-color:var(--brand-ink);transform:translateY(-2px)}

/* Archive list */
.postlist{max-width:70ch;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem}
.postlist a{display:block;padding:1rem 1.2rem;background:var(--surface-2);border:1px solid var(--border);
 border-radius:15px;color:var(--text);text-decoration:none;font-weight:600;transition:border-color .2s,background .2s}
.postlist a:hover{border-color:var(--brand-line);background:var(--surface)}
.postlist time{display:block;font-weight:400;font-size:.82rem;color:var(--muted)}
.nav-links{display:flex;gap:.6rem;justify-content:center;margin-block-start:1.5rem}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}