/* MAY THE LORD STUDIO — link in bio
   Dark, minimal, cinematic. White on near-black; no gold, no colour in the
   header. Platform brand colours appear only in the link sheet, where they
   help people find their service. */

/* Playfair Display, subset to Latin — the label's display face.
   Roman only: there is no true italic in the subset, so never set
   font-style:italic on it. Faux-slanting a Didone looks wrong. */
@font-face{
  font-family:'MTL Display';
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/playfair-display-latin.woff2) format('woff2');
}

:root{
  --bg:#08080a; --bg2:#0e0e11; --line:#1e1e22;
  --fg:#f4f1ea; --muted:#8a8a90; --accent:#f4efe4;
  --display:'MTL Display',Georgia,'Times New Roman',serif;
  --r:14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
}
/* cinematic backdrop: one soft key light + fine grain, both GPU-cheap */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(125% 72% at 50% -12%, rgba(255,252,244,.085), transparent 62%),
    radial-gradient(90% 60% at 50% 105%, rgba(255,255,255,.035), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:-50%; z-index:0; pointer-events:none;
  opacity:.032;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:1060px; margin:0 auto; padding:0 16px calc(48px + var(--safe-b))}

/* ───────────────────────── header ───────────────────────── */
header{padding:clamp(26px,7vw,62px) 0 clamp(16px,4vw,28px); text-align:center}
/* the mark carries the name, so the <h1> is for screen readers only */
.logo{width:clamp(112px,29vw,140px);margin:0 auto}
.logo img{width:100%;height:auto;display:block;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.handle{margin:20px 0 0;color:var(--muted);font-size:13px;letter-spacing:.09em}
.tagline{margin:10px auto 0;max-width:30ch;color:#a8a49c;
         font-family:var(--display);font-size:16.5px;line-height:1.4}
.rule{height:1px;margin:22px auto 0;max-width:180px;
      background:linear-gradient(90deg,transparent,var(--line) 25%,var(--line) 75%,transparent)}

/* socials — icon only: keeps the header monochrome and fits five platforms on
   one line. Brand colours still appear in the link sheet, where they do work. */
.socials{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:20px}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.028);
  color:#d8d5ce;text-decoration:none;
  transition:border-color .2s, background .2s, color .2s, transform .12s;
}
.social svg{width:17px;height:17px;flex:none}
.social:active{transform:scale(.94)}

/* ───────────────────────── grid ───────────────────────── */
.sec{display:flex;align-items:center;gap:14px;margin:26px 0 13px}
.sec h2{margin:0;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sec i{flex:1;height:1px;background:var(--line)}

.grid{display:grid;gap:9px;grid-template-columns:repeat(2,1fr)}
@media(min-width:520px){.grid{grid-template-columns:repeat(3,1fr);gap:11px}}
@media(min-width:860px){.grid{grid-template-columns:repeat(4,1fr);gap:13px}}

/* Square, to match the release artwork. Covers are stored 720×720. */
.tile{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:var(--bg2); cursor:pointer;
  border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, border-color .2s ease;
  content-visibility:auto; contain-intrinsic-size:auto 190px;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0; transition:opacity .45s ease;
}
.tile img.on{opacity:1}
.tile .scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.30) 34%,rgba(0,0,0,0) 62%);
}
.tile .cap{
  position:absolute;left:10px;right:10px;bottom:9px;text-align:left;
  font-family:var(--display);font-size:13.5px;line-height:1.25;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.tile .dot{
  position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(244,239,228,.14);
}
.tile:active{transform:scale(.975)}
@media(hover:hover){
  .tile:hover{transform:translateY(-3px);border-color:#33323a}
  .tile:hover img{opacity:.86}
  .social:hover{border-color:#3a3941;background:rgba(255,255,255,.06);color:#fff}
}
.tile:focus-visible,.social:focus-visible,.pbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.sk{background:linear-gradient(100deg,#101014 30%,#191920 50%,#101014 70%);
    background-size:220% 100%;animation:sh 1.25s linear infinite}
@keyframes sh{to{background-position:-220% 0}}

/* ───────────────────────── sheet ───────────────────────── */
.scrimbg{
  position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.scrimbg.on{opacity:1;pointer-events:auto}

/* A closed sheet must be inert, not merely invisible. On desktop it is centred
   and faded to opacity:0 — without this it still sits over the middle of the
   grid, showing its link targets in the status bar on hover and swallowing
   clicks meant for the tiles underneath. */
.sheet{
  position:fixed;z-index:41;left:0;right:0;bottom:0;
  background:#111115;border-top:1px solid #232329;
  border-radius:22px 22px 0 0;
  padding:10px 18px calc(22px + var(--safe-b));
  max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(101%);
  visibility:hidden;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s;
  box-shadow:0 -24px 60px rgba(0,0,0,.7);
}
.sheet.on{
  transform:translateY(0);
  visibility:visible;pointer-events:auto;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
@media(min-width:720px){
  .sheet{
    left:50%;bottom:auto;top:50%;right:auto;width:min(460px,92vw);
    border-radius:20px;border:1px solid #232329;
    transform:translate(-50%,-46%) scale(.97);opacity:0;
    /* the visibility delay must outlast the fade, or the sheet vanishes
       instantly instead of easing out */
    transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .26s;
    max-height:86svh;padding-bottom:22px;
  }
  .sheet.on{
    transform:translate(-50%,-50%) scale(1);opacity:1;
    transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease;
  }
  .grab{display:none}
}
.grab{width:38px;height:4px;border-radius:9px;background:#33333c;margin:2px auto 14px}

.shead{display:flex;gap:13px;align-items:center;margin-bottom:6px}
.shead .cv{width:74px;height:74px;border-radius:9px;object-fit:cover;flex:none;background:#0b0b0d;border:1px solid var(--line)}
.shead .tt{min-width:0}
.shead .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.shead h3{margin:0;font-family:var(--display);font-size:21px;font-weight:500;line-height:1.24;
          display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.plist{display:flex;flex-direction:column;gap:8px;margin-top:17px}
.pbtn{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid #232329;color:var(--fg);
  font-size:14.5px;font-weight:500;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s,border-color .18s,transform .12s;
}
.pbtn:active{transform:scale(.985)}
@media(hover:hover){.pbtn:hover{background:rgba(255,255,255,.085);border-color:#35343d}}
.pbtn .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.pbtn .ic svg{width:17px;height:17px}
.pbtn .go{margin-left:auto;color:#5f5f68;font-size:17px;line-height:1}

.ghost{background:transparent;border-color:#26262d;color:var(--muted);justify-content:center;font-size:13.5px;cursor:pointer;font-family:inherit}
.empty{margin:18px 0 4px;padding:16px;border:1px dashed #2a2a31;border-radius:12px;
       color:var(--muted);font-size:13.5px;text-align:center}

.foot{margin-top:44px;text-align:center;color:#55555d;font-size:11.5px;letter-spacing:.05em}
.foot a{color:#6d6d76}
.msg{text-align:center;color:var(--muted);padding:48px 12px;font-size:14px}
.msg button{margin-top:14px;background:transparent;border:1px solid var(--line);color:var(--fg);
            padding:9px 18px;border-radius:999px;font-size:13px;cursor:pointer}

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