/* Shared shell for the "under construction" prototypes: logo, footer, contact panel. */
@font-face { font-family: "Gemunu"; src: url("font/GemunuLibre-VF.ttf") format("truetype"); font-weight: 200 800; }
:root {
  --black: #0A0A0B; --ink: #F4F1EA; --muted: #A39E92;
  --amber: #E08A00; --gold: #FFC61A; --lemon: #FFE34D; --cream: #FFF5C8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--black); color: var(--ink); font-family: "Gemunu", system-ui, sans-serif; font-size: 20px; line-height: 1.45; overflow: hidden; }
canvas#hive { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* logo top-left, contact top-right */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 26px 4vw; }
.top img { height: 64px; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,.7)); }
.btn { display: inline-block; border: 0; cursor: pointer; padding: 14px 30px; font: 600 19px "Gemunu", sans-serif; letter-spacing: .06em;
       color: var(--black); background: var(--gold); text-decoration: none;
       clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); transition: background .2s; }
.btn:hover { background: var(--lemon); }

/* centre message (pages may override placement) */
.msg { position: fixed; z-index: 2; pointer-events: none; }
.msg * { pointer-events: auto; }
.msg .kicker { font-size: 16px; letter-spacing: .35em; color: var(--gold); text-transform: uppercase; }
.msg h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 700; line-height: .95; margin: 14px 0 18px; text-shadow: 0 4px 30px rgba(0,0,0,.8); }
.msg h1 em { font-style: normal; color: var(--gold); }
.msg p { font-size: 24px; font-weight: 300; color: #E3DED2; max-width: 560px; text-shadow: 0 2px 14px #000; }
.msg .pl { font-size: 17px; color: var(--muted); margin-top: 6px; }
.msg .actions { margin-top: 30px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

/* footer: copyright + email with copy */
.foot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: 10px; padding: 18px 4vw; font-size: 16px; color: var(--muted);
        background: linear-gradient(0deg, rgba(10,10,11,.92), rgba(10,10,11,0)); }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--gold); }
.copy { background: none; border: 1px solid #3A3833; color: var(--muted); font: 500 14px "Gemunu", sans-serif; letter-spacing: .08em;
        padding: 3px 10px; margin-left: 10px; cursor: pointer; }
.copy:hover { border-color: var(--gold); color: var(--gold); }

/* contact panel */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 5; background: rgba(14,14,16,.97);
         border-left: 3px solid var(--gold); padding: 90px 36px 36px; transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
         overflow-y: auto; }
.panel.open { transform: none; }
.panel h2 { font-size: 40px; font-weight: 700; line-height: 1; }
.panel h2 em { font-style: normal; color: var(--gold); }
.panel .sub { color: var(--muted); margin: 10px 0 28px; font-size: 18px; }
.panel label { display: block; font-size: 14px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; margin: 18px 0 6px; }
.panel input, .panel textarea { width: 100%; background: #1B1B1E; border: 1px solid #2E2D2A; color: var(--ink); font: 400 19px "Gemunu", sans-serif;
                                padding: 12px 14px; outline: none; }
.panel input:focus, .panel textarea:focus { border-color: var(--gold); }
.panel textarea { min-height: 130px; resize: vertical; }
.panel .btn { margin-top: 26px; width: 100%; }
.panel .note { font-size: 14px; color: #6E6A62; margin-top: 12px; }
.panel .close { position: absolute; top: 26px; right: 30px; background: none; border: 0; color: var(--muted); font-size: 34px; cursor: pointer; line-height: 1; }
.panel .close:hover { color: var(--gold); }
.toast { position: fixed; left: 50%; bottom: 70px; transform: translate(-50%, 20px); opacity: 0; z-index: 6; background: var(--gold); color: var(--black);
         padding: 10px 22px; font-weight: 600; transition: all .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) { .top img { height: 48px; } .msg p { font-size: 20px; } }