:root{
  --bg:#efebe3; --panel:#fff; --ink:#16140f; --muted:#6e685c;
  --line:#e3dccd; --soft:#f6f2ea;
  --accent:#b5654a; /* TODO: replace with Makan PMD brand color */
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#100f0d; --panel:#1a1917; --ink:#f3efe8; --muted:#9c968b; --line:#2b2926; --soft:#211f1d; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100svh;background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;padding:clamp(28px,8vw,56px) 20px}
.card{width:100%;max-width:430px;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mark{width:60px;height:60px;border-radius:15px;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;overflow:hidden;font-family:"Bricolage Grotesque",serif;
  font-weight:700;font-size:24px;letter-spacing:-.02em;box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.mark img{width:100%;height:100%;object-fit:contain} /* contain, never cover — see brief §7 */
.logo{display:block;max-height:64px;width:auto;object-fit:contain;margin-bottom:4px} /* used only for wordmark treatment */
@media (prefers-color-scheme:dark){.logo{filter:invert(1)}} /* monochrome black lockup -> white on dark bg */
.name{font-family:"Bricolage Grotesque",serif;font-weight:700;letter-spacing:-.025em;
  font-size:clamp(28px,8vw,34px);line-height:1.05;margin:20px 0 0}
.tag{color:var(--muted);font-size:14px;line-height:1.5;margin:9px 0 0}
.rule{height:1px;background:var(--line);margin:24px 0 4px;border:0}
.links{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lnk{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 16px;border:1px solid var(--line);
  border-radius:13px;background:var(--panel);color:inherit;text-decoration:none;
  transition:transform .14s ease,border-color .14s ease,background .14s ease}
.lnk:hover{border-color:var(--accent);background:var(--soft);transform:translateY(-1px)}
.lnk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lnk .ico{width:22px;height:22px;color:var(--accent);flex:none;display:flex}
.lnk .ico svg{width:100%;height:100%}
.lnk .txt{flex:1;font-weight:600;font-size:15px}
.lnk .arw{color:var(--muted);transition:transform .15s ease,color .15s ease}
.lnk:hover .arw{transform:translateX(4px);color:var(--accent)}
/* .save bg darkened ~10% off --accent so the #fff label clears WCAG AA (~5.1:1) while #b5654a is the placeholder.
   --accent token is unchanged (icons/borders/focus still use it). Re-check / drop the color-mix when the real brand hex is set. */
.save{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:18px;
  border:0;border-radius:13px;background:color-mix(in srgb,var(--accent),#000 10%);color:#fff;font:600 15px/1 "Archivo",sans-serif;
  text-decoration:none;cursor:pointer;transition:opacity .15s ease,transform .1s ease}
.save:hover{opacity:.92}.save:active{transform:translateY(1px)}
.save .ico{width:20px;height:20px;display:flex}.save .ico svg{width:100%;height:100%}
.hint{text-align:center;color:var(--muted);font-size:12px;margin-top:10px}
footer{margin-top:26px;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.03em}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}