/* Base */
body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#eee;position:relative}
p{line-height:1.5;margin:0}h2,h3{margin:0}
.icon{width:1.5rem;height:1.5rem}
a{text-decoration:none;user-select:none}

/* THEME */
:root{
    --brand-red:#A92B2B;
    --brand-yellow:#FFCB65;
    --ink:#111111;
    --text:#F2F4F8;

    /* Two-tone dark (outer brighter, inner darker) */
    --page:#0E2A3A;   /* deep blue outer chrome */
    --paper:#0D0D0E;  /* near-black inner card */
    color-scheme:dark;
}

/* Local Noto Sans */
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-800italic.woff2') format('woff2');font-weight:800;font-style:italic;font-display:swap}
body,#body,.textColor,.sub,.bizaddr{color:var(--text)!important;font-family:'Noto Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'!important}

/* Full dark page + inner card */
html{background:var(--page)!important}
body{background:var(--paper)!important;min-height:100svh}
@media (min-width:520px){
    body{border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06)}
}

/* Modal */
#modal{display:flex;flex-direction:column;position:absolute;z-index:3;width:100%;bottom:0;transition:top .2s ease-out,opacity .1s ease-out;transform:translateZ(0)}
#close{align-self:end;padding:1rem;cursor:pointer;line-height:0}
#keyView,#copyView,#qrView{display:flex;flex-direction:column;align-items:center;margin:0 1rem;text-align:center}
#keyView p,#copyView p,#qrView p{margin:2rem}
#copyURL,#dlKey{display:flex;width:100%;align-items:center;justify-content:center;border-radius:.75rem;padding:1rem 1.25rem;border:none;outline:none;cursor:pointer;box-sizing:border-box}
#copyURL span,#dlKey span{margin-left:.5rem}
#qrView h3{margin:2rem 2rem 0}
#qrView p{margin:.5rem 2rem 0}
#qr{margin:2rem;padding:2rem;background:#fff;border-radius:.5rem}

/* Header */
header{display:flex;justify-content:flex-start;flex-direction:column;padding-top:.25rem}
.headerImgC{display:grid;grid-template-columns:auto;grid-template-rows:auto;overflow:hidden}
#cover{grid-column:1;grid-row:1;width:100%;height:20rem;object-position:top center;object-fit:cover}
#logo{max-height:6rem;grid-column:1;grid-row:1;align-self:center;justify-self:center;margin:.5rem 0 3.75rem}
#topActions{flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}
#topActions>div{display:flex}
#topActions a{padding:1rem;cursor:pointer;line-height:0}
#topActions .icon{color:rgba(255,255,255,.92)}
#topActions a:hover .icon{color:var(--brand-yellow)}

/* Layout */
main{padding:1rem;display:flex;flex-direction:column;align-items:flex-start;background:var(--paper)}
#profilePhoto{width:10rem;height:10rem;border-radius:.5rem;box-sizing:content-box;user-select:none;margin-top:-6rem}
#info{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-top:1rem;line-height:1.25;word-break:break-word;padding:.25rem 1rem;border-left:.25rem dashed var(--brand-red)}
.name{font-weight:800;font-size:1.8rem;margin:0}
.pronouns{display:block;font-size:.95rem;opacity:.85;margin:0 0 .5rem}
.bizname{font-size:1rem;margin:.5rem 0 0 0;opacity:.9}
.bizaddr{font-size:.9rem;opacity:.8}
.sub,.textC{font-size:1rem;white-space:pre-line;line-height:1.5}
.sub{font-size:.95rem;margin:.75rem 0 0;opacity:.9}
.textC{margin:1rem}

/* CTA */
#cta{display:flex;align-items:center;border-radius:.75rem;margin-top:2rem;padding:1rem 1.25rem;cursor:pointer;line-height:0;justify-content:center;box-sizing:border-box;background:var(--brand-yellow)!important;color:var(--ink)!important;border:none}
#cta .icon{margin-right:.6rem}
#cta p{margin:0;font-weight:800}

/* Actions (tiles) */
.actions{width:100%;margin-top:2rem;display:grid;grid-column-gap:1rem;grid-row-gap:1rem;grid-template-columns:1fr 1fr}
.actionBtn{display:flex;flex-direction:row;align-items:center}
.actionBtn a{display:flex;align-items:center;justify-content:center;border-radius:.75rem;width:3.75rem;height:3.75rem;line-height:0}
.actionBtn p{margin:0 0 0 .9rem;font-size:1rem;white-space:nowrap}
.secondary{grid-template-columns:repeat(auto-fill,minmax(3.5rem,1fr))}

/* Media/featured */
.featured{display:flex;flex-direction:column;justify-content:center;margin:3rem 0 0;width:100%}
.section{font-weight:bold;font-size:1.3rem;padding:.5rem 1rem;margin-bottom:1rem;border-left:.25rem solid var(--brand-red)}
.media{overflow:hidden;border-radius:.5rem;margin-top:1rem}
.media img{display:block;user-select:none;width:100%}
.embedded{position:relative;padding-top:100%}
.embedded iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.music,.video{width:100%}
.mediaC{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
video{width:100%}

/* Controls */
.controls{padding:1rem;font-size:.9rem;width:100%;box-sizing:border-box}
.pCtrl,.docDl{display:none;align-items:center;justify-content:flex-start;width:100%;margin:1rem 0 0}
.docDl{display:flex}
.fileSize{margin:0 0 0 1rem}
.currentTime{margin:0 .5rem 0 1rem}
.seekBar{width:100%;height:.5rem;border-radius:.5rem;appearance:none;cursor:pointer}
.playPause,.dlBtn{padding:1rem;border-radius:.5rem;line-height:0;cursor:pointer;order:-1}
.pause{display:none}
.title{font-size:1rem;font-weight:700;margin:0}
.prodInfo .sub{margin:-1rem 0 0}
.price{margin:1rem 0 0;font-size:1rem;font-weight:700}
.label{display:inline-block;font-size:1rem;margin:1rem 0 0;border-radius:.5rem;letter-spacing:1px;padding:1rem 1.5rem}
.label p{margin:0}
footer{padding:4rem 1rem 2rem;font-size:.9rem;text-align:center}
footer a{text-decoration:underline;color:inherit}

/* Brand application & icon fixes */
.actions .actionBtn>a,#copyURL,#dlKey{background:var(--brand-yellow)!important;color:var(--ink)!important;border:none!important;box-shadow:none!important;transition:background-color .15s,color .15s}
.iconColor{color:currentColor!important;filter:none!important}
.iconTile svg{display:block}
.iconTile svg [stroke]{stroke:currentColor}
.iconTile svg [fill="#fff"]{fill:currentColor}
.iconTile svg [fill="white"]{fill:currentColor}

/* Secondary (LinkedIn/Twitter/GitHub) — match primary style */
.secBtn a{background:var(--brand-yellow)!important;color:var(--ink)!important;border:none!important}
.secBtn .icon svg [fill]{fill:currentColor}
.secBtn .icon svg [stroke]{stroke:currentColor}

/* Hover/focus (all tiles + CTA + modal buttons) */
.actions .actionBtn>a:hover,.actions .actionBtn>a:focus,
#cta:hover,#cta:focus,#copyURL:hover,#copyURL:focus,#dlKey:hover,#dlKey:focus,
.secBtn a:hover,.secBtn a:focus{background:var(--brand-red)!important;color:#fff!important}

/* Keyboard focus ring */
a:focus-visible,button:focus-visible{outline:2px solid var(--brand-red);outline-offset:2px;border-radius:8px}

/* Mobile tuning */
@media (max-width:380px){
    .actions{grid-template-columns:1fr}
    #profilePhoto{width:9rem;height:9rem;margin-top:-5rem}
    #info .name{font-size:1.6rem}
    #logo{margin:.5rem 0 2.75rem}
}

/* PayPal tile: classic blue with white mark */
.secBtn.paypal a{
    background:#003087 !important; /* PayPal blue */
    color:#fff !important;
}
.secBtn.paypal .icon svg [fill]{
    fill:#fff !important; /* keep the logo white */
}