:root{
  --bg:#0a0d12; --ink:#f2f3f5; --mute:#7d8594; --line:rgba(255,255,255,.12);
  --accent:#c8a46a; --x:70vw; --y:30vh;
  --font:Inter,"SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}

.glow{position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(600px circle at var(--x) var(--y),rgba(200,164,106,.13),transparent 60%),
    radial-gradient(900px circle at 10% 110%,rgba(70,100,160,.16),transparent 60%)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.page{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(24px,4vw,56px)}
header,footer{display:flex;justify-content:space-between;align-items:center}
.meta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.mark{width:22px;height:22px;border:1px solid var(--accent);position:relative}
.mark::after{content:"";position:absolute;left:5px;top:4px;width:6px;height:12px;border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);width:9px}

main{align-self:center}
h1{font-weight:200;font-size:clamp(64px,19vw,240px);line-height:.95;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff 30%,#8b93a3);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-left:-.04em}
.sub{margin-top:clamp(16px,2vw,28px);padding-top:clamp(16px,2vw,28px);border-top:1px solid var(--line);
  max-width:min(100%,460px);color:var(--mute);font-size:15px;letter-spacing:.04em}

.mail{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:clamp(16px,2vw,20px);
  padding-bottom:6px;border-bottom:1px solid var(--line);transition:border-color .25s,color .25s}
.mail svg{transition:transform .25s}
.mail:hover,.mail:focus-visible{color:var(--accent);border-color:var(--accent)}
.mail:hover svg{transform:translate(2px,-2px)}
.mail:focus-visible{outline:none}

@media (prefers-reduced-motion:no-preference){
  main,header,footer{animation:in 1s cubic-bezier(.2,.7,.2,1) both}
  header{animation-delay:.1s} footer{animation-delay:.5s}
  .sub{animation:in 1s .3s cubic-bezier(.2,.7,.2,1) both}
  @keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* Header actions + menu */
.actions{display:flex;align-items:center;gap:18px;position:relative;z-index:30}
.pill{color:#0a0d12;background:var(--ink);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.01em;padding:10px 22px;border-radius:999px;
  transition:background .25s,transform .25s}
.pill:hover,.pill:focus-visible{background:var(--accent);outline:none;transform:translateY(-1px)}
.menu-btn{width:40px;height:40px;background:none;border:0;cursor:pointer;display:grid;place-content:center;gap:7px;color:var(--ink)}
.menu-btn span{display:block;width:24px;height:1px;background:currentColor;transition:transform .3s,width .3s}
.menu-btn span:last-child{width:16px;margin-left:auto}
.menu-btn:hover span:last-child{width:24px}
.menu-btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.menu-btn[aria-expanded="true"] span{width:24px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:20;background:rgba(5,7,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;justify-content:flex-end}
.menu[hidden]{display:none}
.drawer{width:min(100%,400px);height:100%;background:#10141b;border-left:1px solid var(--line);
  padding:calc(clamp(24px,4vw,56px) + 72px) 32px 32px;display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.links{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.links a{display:flex;align-items:center;justify-content:space-between;padding:22px 2px;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:26px;font-weight:300;letter-spacing:-.01em;transition:color .25s,padding .25s}
.links a svg{color:var(--mute);transition:color .25s,transform .25s}
.links a:hover,.links a:focus-visible{color:var(--accent);padding-left:8px;outline:none}
.links a:hover svg,.links a:focus-visible svg{color:var(--accent);transform:translateX(4px)}
.drawer__foot{margin-top:auto;display:grid;gap:16px}
.drawer__foot p{text-align:center;font-size:13px;color:var(--mute)}
body.menu-open{overflow:hidden}
body.menu-open .pill{opacity:0;pointer-events:none}
.pill{transition:opacity .2s,background .25s,transform .25s}
@media (prefers-reduced-motion:no-preference){
  .menu:not([hidden]){animation:fade .3s ease both}
  .menu:not([hidden]) .drawer{animation:slide .4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
}
@media (max-width:480px){.drawer{border-left:0}}
header{position:relative;z-index:30}

/* Modal */
dialog{margin:auto;padding:0;width:min(92vw,440px);border:1px solid var(--line);border-radius:20px;background:#10141b;color:var(--ink);
  overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.02) inset}
dialog::backdrop{background:rgba(5,7,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bar{height:3px;background:var(--line)}
.bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.2,1)}
dialog[data-state="denied"] .bar span{background:#e5736b}
.card{padding:32px 28px 24px}
.head{text-align:center;display:grid;justify-items:center;gap:6px}
.ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;color:var(--accent);
  background:rgba(200,164,106,.1);box-shadow:0 0 0 1px rgba(200,164,106,.25) inset;transition:color .3s,background .3s,box-shadow .3s}
.ico svg{width:32px;height:32px}
.i-no{display:none}
dialog[data-state="denied"] .ico{color:#e5736b;background:rgba(229,115,107,.1);box-shadow:0 0 0 1px rgba(229,115,107,.3) inset}
dialog[data-state="denied"] .i-run{display:none}
dialog[data-state="denied"] .i-no{display:block}
dialog[data-state="run"] .ico{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 1px rgba(200,164,106,.25) inset,0 0 24px rgba(200,164,106,.25)}}
dialog h2{font-size:22px;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-transform:none}
.head p{color:var(--mute);font-size:15px;max-width:30ch}

.log{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:2px;min-height:152px;align-content:start;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.log li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.03)}
.log li+li{margin-top:4px}
.lbl{color:var(--ink)}
.ms{color:var(--mute);font-size:12px}
.st{text-align:center;font-size:14px}
.st.ok{color:var(--accent)}
.st.fail{color:#e5736b}
.spin{width:13px;height:13px;margin:0 auto;border:1.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.note{margin-top:16px;padding:14px 16px;border-radius:12px;border:1px dashed var(--line);display:grid;gap:8px}
.note[hidden]{display:none}
.note p{color:var(--mute);font-size:14px}
.note span{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.08em;color:#5d6575}

.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.actions [hidden]{display:none}
.btn{font:inherit;font-size:14px;font-weight:500;padding:11px 22px;border-radius:999px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.btn--solid{background:var(--ink);color:#0a0d12;border:1px solid var(--ink)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--accent);border-color:var(--accent);outline:none}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
@media (prefers-reduced-motion:no-preference){dialog[open]{animation:in .35s cubic-bezier(.2,.7,.2,1) both}}
@media (prefers-reduced-motion:reduce){.spin,dialog[data-state="run"] .ico{animation:none}.bar span{transition:none}}