/* ===========================================================================
   ALIM.my · Founders. Page-scoped layer on top of alim.css.
   shadcn Dialog semantics (native <dialog>), React Bits BlurText / Tilted +
   Spotlight cards, re-implemented in vanilla CSS/JS for the static build.
   =========================================================================== */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- header ---------- */
.fm-crumb{ display:flex; gap:10px; align-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:22px; }
.fm-crumb a{ text-decoration:none; color:var(--ink-3); }
.fm-crumb a:hover{ color:var(--pillar); }
.fm-head-grid{ display:grid; gap:44px; align-items:end; }
@media(min-width:1024px){ .fm-head-grid{ grid-template-columns:1.25fr .75fr; gap:64px; } }
.fm-h1{ font-family:'Literata',Georgia,serif; font-variation-settings:"opsz" 72,"wght" 640; font-size:clamp(44px,7.4vw,104px); line-height:.92; letter-spacing:-.03em; margin:0; }
.fm-h1 em{ font-style:italic; font-variation-settings:"opsz" 72,"wght" 420; color:var(--pillar); }
.fm-h1 .w{ display:inline-block; opacity:0; filter:blur(12px); transform:translateY(.28em); animation:fmWord 1.1s var(--ease-print) forwards; animation-delay:calc(var(--i)*85ms + 120ms); }
@keyframes fmWord{ to{ opacity:1; filter:blur(0); transform:none; } }
.fm-lede{ font-family:'Literata',serif; font-variation-settings:"opsz" 24,"wght" 400; font-size:clamp(18px,2.1vw,22px); line-height:1.55; color:var(--ink-2); max-width:54ch; margin:26px 0 0; }

.fm-index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.fm-index li{ border-bottom:1px solid var(--rule); }
.fm-index button{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; grid-template-columns:34px 1fr auto; align-items:baseline; gap:10px; padding:13px 2px; }
.fm-index .n{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--pillar); }
.fm-index .nm{ font-family:'Literata',serif; font-variation-settings:"opsz" 30,"wght" 460; font-size:19px; color:var(--ink); transition:font-variation-settings .45s var(--ease-print), transform .45s var(--ease-print); }
.fm-index .rl{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); text-align:right; }
.fm-index button:hover .nm, .fm-index button:focus-visible .nm{ font-variation-settings:"opsz" 30,"wght" 700; transform:translateX(6px); }
.fm-index button:focus-visible{ outline:2px solid var(--vermillion); outline-offset:2px; }
@media(max-width:520px){ .fm-index .rl{ display:none; } }
#fm-float{ position:fixed; left:0; top:0; z-index:40; width:190px; aspect-ratio:4/5; pointer-events:none; overflow:hidden; opacity:0; transform:translate3d(-50%,-50%,0) scale(.86) rotate(-3deg); transition:opacity .3s ease, transform .5s var(--ease-print); box-shadow:0 30px 60px -20px rgba(26,22,18,.45); }
#fm-float.on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1) rotate(-2deg); }
#fm-float img{ width:100%; height:100%; object-fit:cover; }
@media(hover:none){ #fm-float{ display:none; } }

/* ---------- plate (group photograph) ---------- */
.fm-plate-sec{ padding-block:clamp(36px,5vw,64px) 0; }
.fm-plate{ max-width:1360px; margin:0 auto; padding-inline:clamp(12px,2.4vw,28px); }
.fm-frame{ position:relative; overflow:hidden; background:var(--paper-3); clip-path:inset(var(--ci,5%)); will-change:clip-path; }
.fm-pinbox{ position:relative; aspect-ratio:5561/3616; }
.fm-pinbox>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(var(--s,1.1)); transform-origin:50% 40%; will-change:transform; }
.fm-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 70%,rgba(26,22,18,.28)); }
.fm-pin{ position:absolute; z-index:2; left:var(--x); top:var(--y); transform:translate(-50%,-50%); width:30px; height:30px; padding:0; border:none; background:none; cursor:pointer; opacity:0; transition:opacity .6s ease calc(var(--k)*90ms + 300ms); }
.fm-frame.in .fm-pin{ opacity:1; }
.fm-pin::before{ content:""; position:absolute; inset:9px; border-radius:50%; background:#F2EBDD; box-shadow:0 0 0 1px rgba(26,22,18,.25), 0 2px 8px rgba(0,0,0,.35); transition:transform .3s var(--ease-print), background .3s; }
.fm-pin::after{ content:""; position:absolute; inset:3px; border-radius:50%; border:1.5px solid rgba(242,235,221,.85); animation:fmPulse 2.6s ease-out infinite; animation-delay:calc(var(--k)*.4s); }
@keyframes fmPulse{ 0%{ transform:scale(.55); opacity:1;} 80%,100%{ transform:scale(1.5); opacity:0; } }
.fm-pin .tip{ position:absolute; left:50%; top:calc(100% + 6px); transform:translate(-50%,-6px); white-space:nowrap; pointer-events:none; background:var(--ink); color:#F2EBDD; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:6px 9px; opacity:0; transition:opacity .25s, transform .35s var(--ease-print); text-align:left; }
html.charter .fm-pin .tip{ background:#000; }
.fm-pin .tip b{ display:block; font-family:'Literata',serif; font-weight:normal; font-variation-settings:"opsz" 24,"wght" 560; font-size:15px; letter-spacing:0; text-transform:none; margin-bottom:2px; }
.fm-pin:hover .tip,.fm-pin:focus-visible .tip{ opacity:1; transform:translate(-50%,0); }
.fm-pin:hover::before,.fm-pin:focus-visible::before{ transform:scale(1.35); background:var(--vermillion); }
.fm-pin:focus-visible{ outline:none; }
@media(max-width:640px){ .fm-pin{ width:26px; height:26px; } .fm-pin .tip{ display:none; } }
.fm-caption{ display:grid; gap:10px 40px; padding:18px 2px; border-bottom:1px solid var(--rule); }
@media(min-width:820px){ .fm-caption{ grid-template-columns:auto 1fr; } }
.fm-caption .plate-no{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.fm-caption .plate-no i{ font-style:normal; color:var(--pillar); }
.fm-caption p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-3); max-width:80ch; }
.fm-caption p b{ font-weight:500; color:var(--ink-2); }

/* ---------- portrait grid ---------- */
.fm-grid{ display:grid; gap:34px 18px; grid-template-columns:repeat(2,1fr); }
@media(min-width:900px){ .fm-grid{ grid-template-columns:repeat(3,1fr); gap:56px 28px; } }
.fm-card{ perspective:1000px; }
.fm-hit{ all:unset; box-sizing:border-box; display:block; width:100%; cursor:pointer; }
.fm-photo{ position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--paper-3); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .6s var(--ease-print), box-shadow .6s var(--ease-print); }
.fm-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .8s var(--ease-print), transform 1.2s var(--ease-print), filter .8s; }
.fm-photo .b{ opacity:0; }
.fm-photo .a{ filter:saturate(.92); }
.fm-spot{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s; mix-blend-mode:soft-light; background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%), rgba(255,236,205,.55), transparent 55%); }
.fm-no{ position:absolute; left:12px; top:12px; z-index:2; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; color:#F2EBDD; background:rgba(26,22,18,.42); backdrop-filter:blur(6px); padding:4px 7px 3px; }
.fm-view{ position:absolute; right:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#1A1612; background:#F2EBDD; padding:7px 10px 6px; transform:translateY(8px); opacity:0; transition:opacity .35s, transform .45s var(--ease-print); }
.fm-hit:hover .fm-photo, .fm-hit:focus-visible .fm-photo{ box-shadow:0 34px 60px -28px rgba(26,22,18,.55); }
.fm-hit:hover .fm-photo .b, .fm-hit:focus-visible .fm-photo .b{ opacity:1; }
.fm-hit:hover .fm-photo img, .fm-hit:focus-visible .fm-photo img{ transform:scale(1.04); filter:none; }
.fm-hit:hover .fm-spot{ opacity:1; }
.fm-hit:hover .fm-view, .fm-hit:focus-visible .fm-view{ opacity:1; transform:none; }
.fm-hit:focus-visible{ outline:2px solid var(--vermillion); outline-offset:6px; }
.fm-cap{ padding-top:16px; display:grid; gap:6px; }
.fm-name{ display:block; font-family:'Literata',serif; font-variation-settings:"opsz" 36,"wght" 500; font-size:clamp(19px,2.2vw,27px); line-height:1.08; letter-spacing:-.012em; margin:0; color:var(--ink); transition:font-variation-settings .5s var(--ease-print), color .3s; }
.fm-hit:hover .fm-name{ font-variation-settings:"opsz" 36,"wght" 680; color:var(--pillar); }
.fm-role{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0; line-height:1.55; }
.fm-role b{ font-weight:500; color:var(--pillar); }
.fm-line{ display:block; height:1px; background:var(--rule); position:relative; margin-top:10px; overflow:hidden; }
.fm-line::after{ content:""; position:absolute; inset:0; background:var(--pillar); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-print); }
.fm-hit:hover .fm-line::after{ transform:scaleX(1); }
@media(max-width:600px){ .fm-view{ display:none; } .fm-role{ font-size:9.5px; letter-spacing:.1em; } }

/* ---------- record ---------- */
.fm-record{ border-top:1.5px solid var(--ink); }
.fm-rec{ display:grid; gap:6px 28px; padding:22px 2px; border-bottom:1px solid var(--rule); align-items:baseline; }
@media(min-width:860px){ .fm-rec{ grid-template-columns:140px 110px 1fr 300px; } }
.fm-rec .d{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink); }
.fm-rec .t{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--pillar); }
.fm-rec h3{ font-family:'Literata',serif; font-variation-settings:"opsz" 28,"wght" 520; font-size:20px; line-height:1.3; margin:0; }
.fm-rec h3 a{ text-decoration:none; }
.fm-rec h3 a:hover{ color:var(--pillar); }
.fm-rec h3 small{ display:block; margin-top:4px; font-family:'Archivo',sans-serif; font-size:13.5px; color:var(--ink-3); font-variation-settings:normal; }
.fm-who{ display:flex; flex-wrap:wrap; gap:6px; }
.fm-chip{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--rule); padding:4px 10px 4px 4px; font-size:12.5px; color:var(--ink-2); transition:border-color .2s, background .2s; }
.fm-chip img{ width:22px; height:22px; object-fit:cover; object-position:50% 25%; }
.fm-chip:hover,.fm-chip:focus-visible{ border-color:var(--ink); background:var(--paper); }
.fm-chip:focus-visible{ outline:2px solid var(--vermillion); outline-offset:2px; }
.fm-chip.org{ padding-left:10px; cursor:default; }

/* ---------- governance ---------- */
.fm-gov{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media(min-width:820px){ .fm-gov{ grid-template-columns:repeat(3,1fr); } }
.fm-gov>div{ background:var(--paper-2); padding:28px 26px 30px; }
.fm-gov b{ display:block; font-family:'Literata',serif; font-weight:normal; font-variation-settings:"opsz" 60,"wght" 600; font-size:44px; line-height:1; color:var(--pillar); margin:14px 0 12px; }
.fm-gov h3{ font-size:20px; margin:0 0 8px; }
.fm-gov p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); }

/* ---------- closing band ---------- */
.fm-close{ background:#1A1612; color:#F2EBDD; }
html.charter .fm-close{ background:#000; }
.fm-close-grid{ display:grid; }
@media(min-width:1280px){ .fm-close-grid{ grid-template-columns:1.6fr 1fr; min-height:580px; } }
.fm-close-img{ position:relative; overflow:hidden; min-height:340px; }
.fm-close-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; transform:translateY(var(--py,0)) scale(1.03); }
.fm-close-txt{ padding:clamp(44px,6vw,84px) clamp(24px,5vw,72px); display:flex; flex-direction:column; justify-content:center; }
.fm-close-txt .bar{ mix-blend-mode:normal; align-self:flex-start; }
.fm-close-txt blockquote{ margin:26px 0 0; font-family:'Literata',serif; font-style:italic; font-variation-settings:"opsz" 60,"wght" 400; font-size:clamp(26px,2.8vw,40px); line-height:1.12; letter-spacing:-.015em; }
.fm-close-txt blockquote::before{ content:"\201C"; display:block; font-size:1.8em; line-height:.6; color:#FF6C4A; font-style:normal; margin-bottom:6px; }
.fm-close-txt .att{ margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,235,221,.6); }
.fm-close-txt .ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }
.fm-close .btn{ background:#F2EBDD; color:#1A1612; border-color:#F2EBDD; box-shadow:5px 5px 0 var(--vermillion); }
.fm-close .btn-primary{ background:var(--vermillion); border-color:var(--vermillion); color:#F2EBDD; box-shadow:5px 5px 0 #F2EBDD; }
.fm-close .btn:hover{ box-shadow:1px 1px 0 var(--vermillion); }
.fm-close .btn-primary:hover{ box-shadow:1px 1px 0 #F2EBDD; }

/* ---------- profile dialog ---------- */
body.fm-lock{ overflow:hidden; }
#fm-dialog{ padding:0; border:none; background:var(--paper); color:var(--ink); max-width:min(1120px,calc(100vw - 32px)); width:100%; max-height:calc(100dvh - 32px); overflow:hidden; box-shadow:0 50px 120px -30px rgba(0,0,0,.6); }
#fm-dialog::backdrop{ background:rgba(21,18,13,.62); backdrop-filter:blur(8px); }
#fm-dialog[open]{ animation:fmIn .55s var(--ease-print); }
#fm-dialog.closing{ animation:fmOut .22s ease-in forwards; }
@keyframes fmIn{ from{ opacity:0; transform:translateY(18px) scale(.975); } to{ opacity:1; transform:none; } }
@keyframes fmOut{ to{ opacity:0; transform:translateY(10px) scale(.985); } }
.fm-d-grid{ display:grid; max-height:calc(100dvh - 32px); }
@media(min-width:860px){ .fm-d-grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); height:min(780px,calc(100dvh - 32px)); } }
.fm-d-photo{ position:relative; margin:0; overflow:hidden; background:var(--paper-3); height:100%; }
.fm-d-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.fm-d-photo img.swap{ animation:fmPhoto .9s var(--ease-print); }
@keyframes fmPhoto{ from{ clip-path:inset(0 0 100% 0); transform:scale(1.08); } to{ clip-path:inset(0); transform:none; } }
.fm-d-photo .fm-no{ left:16px; top:16px; }
.fm-d-body{ display:flex; flex-direction:column; min-height:0; }
.fm-d-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px 18px 30px; border-bottom:1px solid var(--rule); flex:none; }
.fm-x{ width:40px; height:40px; display:grid; place-items:center; background:none; border:1px solid var(--rule); color:var(--ink); cursor:pointer; flex:none; }
.fm-x:hover{ border-color:var(--ink); }
.fm-d-scroll{ overflow-y:auto; padding:30px 30px 34px; flex:1; min-height:0; overscroll-behavior:contain; }
.fm-d-scroll.swap>*{ animation:fmUp .7s var(--ease-print) both; }
.fm-d-scroll.swap>*:nth-child(2){ animation-delay:.05s } .fm-d-scroll.swap>*:nth-child(3){ animation-delay:.1s } .fm-d-scroll.swap>*:nth-child(n+4){ animation-delay:.15s }
@keyframes fmUp{ from{ opacity:0; transform:translateY(12px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
.fm-d-scroll h2{ font-family:'Literata',serif; font-variation-settings:"opsz" 72,"wght" 640; font-size:clamp(32px,4vw,50px); line-height:.98; letter-spacing:-.025em; margin:0; }
.fm-d-scroll .fm-role{ margin-top:12px; }
.fm-d-scroll .prose{ margin-top:24px; font-size:16px; }
.fm-d-scroll .prose p:first-child::first-letter{ font-family:'Literata',serif; font-variation-settings:"opsz" 72,"wght" 700; float:left; font-size:58px; line-height:.82; padding:5px 9px 0 0; color:var(--pillar); }
.fm-d-sub{ margin-top:30px; }
.fm-d-sub h4{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; }
.fm-tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.fm-tags li{ border:1px solid var(--rule); padding:6px 11px; font-size:13px; color:var(--ink-2); background:var(--paper-2); }
.fm-recs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.fm-recs li{ display:grid; grid-template-columns:96px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule); font-size:14px; line-height:1.5; color:var(--ink-2); }
.fm-recs li span{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--pillar); padding-top:2px; }
.fm-d-nav{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); flex:none; }
.fm-d-nav button{ all:unset; box-sizing:border-box; cursor:pointer; padding:16px 22px 16px 30px; display:grid; gap:3px; transition:background .2s; }
.fm-d-nav button+button{ border-left:1px solid var(--rule); text-align:right; padding:16px 30px 16px 22px; }
.fm-d-nav button:hover,.fm-d-nav button:focus-visible{ background:var(--paper-2); }
.fm-d-nav button:focus-visible{ outline:2px solid var(--vermillion); outline-offset:-2px; }
.fm-d-nav small{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.fm-d-nav b{ font-family:'Literata',serif; font-weight:normal; font-variation-settings:"opsz" 24,"wght" 540; font-size:16px; }
.fm-d-mphoto{ display:none; }
@media(max-width:859px){
  #fm-dialog{ max-width:100vw; max-height:100dvh; width:100vw; height:100dvh; margin:0; }
  .fm-d-grid{ max-height:100dvh; height:100dvh; }
  .fm-d-photo{ display:none; }
  .fm-d-mphoto{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; margin:0 0 24px; }
  .fm-d-scroll{ padding:22px 20px 28px; }
  .fm-d-top{ padding:14px 16px 14px 20px; }
  .fm-d-nav button{ padding:14px 16px 14px 20px; } .fm-d-nav button+button{ padding:14px 20px 14px 16px; }
}

/* ---------- about-page strip + homepage teaser ---------- */
.fm-strip{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
@media(min-width:900px){ .fm-strip{ grid-template-columns:repeat(6,1fr); } }
.fm-strip a{ text-decoration:none; display:block; }
.fm-strip figure{ margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--paper-3); }
.fm-strip img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-print), filter .6s; filter:saturate(.9); }
.fm-strip a:hover img{ transform:scale(1.05); filter:none; }
.fm-strip h3{ font-family:'Literata',serif; font-variation-settings:"opsz" 24,"wght" 520; font-size:16px; line-height:1.2; margin:12px 0 4px; }
.fm-strip p{ margin:0; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.fm-teaser{ display:grid; gap:34px; align-items:center; }
@media(min-width:980px){ .fm-teaser{ grid-template-columns:1.25fr .75fr; gap:56px; } }
.fm-teaser figure{ margin:0; overflow:hidden; aspect-ratio:3/2; }
.fm-teaser figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:transform 1.4s var(--ease-print); }
.fm-teaser a:hover figure img{ transform:scale(1.035); }
.fm-teaser h2{ font-size:clamp(30px,4.2vw,52px); letter-spacing:-.02em; line-height:1; margin:14px 0 0; }
.fm-teaser p{ font-size:16px; line-height:1.65; color:var(--ink-2); margin:18px 0 26px; max-width:46ch; }

@media (prefers-reduced-motion: reduce){
  .fm-h1 .w{ opacity:1 !important; filter:none !important; transform:none !important; animation:none !important; }
  .fm-frame{ clip-path:none !important; } .fm-pinbox>img{ transform:none !important; }
  .fm-pin{ opacity:1; } .fm-pin::after{ animation:none; }
  .fm-photo{ transform:none !important; }
  #fm-float{ display:none; }
}

/* bio paragraph rhythm (alim.css .prose p{margin:0} outranks >*+*) */
.fm-d-scroll .prose p+p{ margin-top:1em; }

/* closing band: show the full wide group frame on narrow screens */
@media(max-width:1279px){ .fm-close-img{ min-height:0; aspect-ratio:5663/3718; } }

/* desktop closing band: photo box keeps the photo ratio so nobody is cropped at any width */
@media(min-width:1280px){ .fm-close-grid{ min-height:0; } .fm-close-img{ min-height:0; aspect-ratio:5663/3718; align-self:center; } }
