:root {
  --coral: #ff6249;
  --salmon: #ff8073;
  --charcoal: #1c1b1b;
  --dark: #333030;
  --white: #ffffff;
  --radius: 16px;
}

/* Base */
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background: var(--charcoal); color: var(--white); }
body { font-family: 'Galano Grotesque','Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height:1.6; }
a { color: var(--salmon); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.skip { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus { left:20px; top:20px; width:auto; height:auto; padding:8px 12px; background: var(--white); color: var(--charcoal); border-radius: 6px; z-index:999; }

/* Header */
.site-header { position:sticky; top:0; background: rgba(28,27,27,.9); backdrop-filter: blur(6px); border-bottom:1px solid #2a2828; z-index:10; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px; }
.logo { width:40px; height:40px; object-fit:contain; }
.name { font-weight:800; }
.nav a { margin-left:18px; color: var(--white); opacity:.9; }
.nav a:hover { opacity:1; }

/* Sections & headings */
section { padding: 48px 0; }
h1 { font-size: clamp(28px, 4vw, 46px); margin:0 0 10px; }
h2 { font-size: clamp(22px, 3vw, 32px); margin:0 0 18px; }
h3 { margin: 0 0 6px; font-size: 20px; }

/* Hero */
.hero-pro { padding: 72px 0 40px; background: radial-gradient(1200px 500px at 50% -60%, rgba(255,98,73,.25), transparent); }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items:center; }
.tagline { opacity:.95; max-width: 740px; }

.hero-art { position: relative; display:flex; align-items:flex-end; justify-content:center; }
.hero-art::before {
  /* soft “backplate” behind cut-out to blend into the page */
  content:"";
  position:absolute;
  right:0; top:6%;
  width: clamp(220px, 42vw, 560px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(55% 55% at 50% 50%, rgba(255,98,73,.28), rgba(255,98,73,0) 70%);
  filter: blur(1px);
  pointer-events:none;
}
.portrait-cutout {
  /* hard size cap so it never overwhelms */
  height: clamp(240px, 36vh, 520px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 35px rgba(0,0,0,.45));
  /* feather the edges very subtly (safe fallback when unsupported) */
  -webkit-mask-image: radial-gradient(120% 120% at 60% 35%, #000 68%, transparent 96%);
          mask-image: radial-gradient(120% 120% at 60% 35%, #000 68%, transparent 96%);
}

/* Profile columns */
.about .cols-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.about .bullets { margin:.2rem 0 0 1rem; padding:0; }
.about .bullets li { margin:.2rem 0; }
@media (max-width: 900px) { .about .cols-3 { grid-template-columns: 1fr; } .hero-grid { grid-template-columns: 1fr; } }

/* Highlights */
.work .grid { list-style:none; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
.work .grid li { background:#222; border:1px solid #2a2828; padding:16px; border-radius:var(--radius); }

/* Videos */
.videos .rail { display:flex; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; padding-bottom:16px; scroll-behavior:smooth; }
.videos .rail::-webkit-scrollbar { height:10px; }
.videos .rail::-webkit-scrollbar-thumb { background:#2a2828; border-radius:999px; }
.card { position:relative; flex: 0 0 86%; max-width: 86%; scroll-snap-align:center; background:#111; border:1px solid #2a2828; border-radius:var(--radius); overflow:hidden; }
@media (min-width:700px) { .card { flex-basis: 520px; max-width:520px; } }
.thumb { display:block; width:100%; aspect-ratio:16/9; background:#000; }
.card .meta { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; }
.card .title { font-weight:700; }
.card .open { background: var(--coral); color: var(--charcoal); padding:8px 12px; border-radius:10px; border:0; font-weight:800; }

/* Rail controls */
.rail-helpers { display:flex; justify-content:flex-end; gap:8px; }
.chev { background:#222; border:1px solid #2a2828; color:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; }

/* Contact */
.contact .socials { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.contact .discord { opacity:.9; }

/* Footer */
.site-footer { border-top:1px solid #2a2828; padding:24px 0; opacity:.95; }
.site-footer .wrap { display:flex; align-items:center; justify-content:space-between; }
.chibi { height:72px; width:auto; }

/* Modal */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.6); padding:20px; }
.modal.open { display:flex; }
.modal .modal-body { width:min(1200px, 92vw); }
.modal iframe { width:100%; aspect-ratio:16/9; border:0; }
.modal .close { position:absolute; top:10px; right:14px; font-size:28px; background:transparent; border:0; color:#fff; cursor:pointer; }