/* =====================================================================
   HOME — "the studio of Brandon Mysliwiec"
   Design origin: the bm emblem — a warm orange neon mark inside a
   rounded square. So: warm near-black, ember-orange glow, soft rounded
   "tiles", editorial serif display. Personal, premium, a calm gateway.
   Unique to this page only.
   ===================================================================== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/fraunces-500.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/fraunces-600.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400-italic.woff2') format('woff2');}

body[data-page="home"]{
  --bg:#100c09; --bg2:#17110c; --tile:#1d160f;
  --ink:#f6efe7; --muted:#b6a99b; --line:rgba(255,255,255,.09);
  --orange:#ee6c2b; --orange-2:#ffb066; --glow:rgba(238,108,43,.35);
  --serif:'Fraunces',Georgia,serif; --sans:'Archivo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); padding-top:var(--nav-h);
  line-height:1.6; overflow-x:hidden;
}
body[data-page="home"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70vw 60vh at 78% -8%, var(--glow), transparent 60%),
    radial-gradient(50vw 45vh at -5% 12%, rgba(255,160,90,.10), transparent 55%);
}
/* faint film grain for warmth */
body[data-page="home"]::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.h-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
body[data-page="home"] h1,body[data-page="home"] h2,body[data-page="home"] h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.015em}
body[data-page="home"] .kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;font-size:.74rem;font-weight:600;color:var(--orange)}

/* ---- HERO ---------------------------------------------------------- */
.home-hero{position:relative;padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px)}
.home-hero .h-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,64px);align-items:center}
.home-hero .lede{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:46ch;margin-top:1.3rem}
.home-hero h1{font-size:clamp(2.6rem,6.4vw,5rem);margin-top:1.1rem}
.home-hero h1 em{font-style:italic;color:var(--orange-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.btn-ember{display:inline-flex;align-items:center;gap:.5em;background:var(--orange);color:#160b04;font-weight:700;
  padding:.95em 1.6em;border-radius:16px;box-shadow:0 14px 40px -14px var(--glow);transition:transform .18s,box-shadow .18s}
.btn-ember:hover{transform:translateY(-3px);box-shadow:0 22px 50px -16px var(--glow)}
.btn-line{display:inline-flex;align-items:center;gap:.5em;padding:.95em 1.5em;border-radius:16px;border:1px solid var(--line);color:var(--ink);font-weight:600;transition:.18s}
.btn-line:hover{border-color:var(--orange);color:var(--orange-2)}

/* glowing emblem tile + portrait composition */
.hero-art{position:relative;display:grid;place-items:center;min-height:340px}
.emblem-tile{position:relative;width:min(76%,360px);aspect-ratio:1;border-radius:34px;
  background:linear-gradient(160deg,#241a12,#150f0a);border:1px solid rgba(238,108,43,.32);
  display:grid;place-items:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.8), inset 0 0 60px rgba(238,108,43,.10);
  animation:floaty 7s ease-in-out infinite}
.emblem-tile img{width:62%;filter:drop-shadow(0 0 26px rgba(238,108,43,.6))}
.hero-art .portrait{position:absolute;right:-2%;bottom:-6%;width:46%;border-radius:22px;border:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);transform:rotate(2deg)}
@keyframes floaty{50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.emblem-tile{animation:none}}

/* ---- INTRO / MEET ------------------------------------------------- */
.home-meet{padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--line)}
.home-meet .h-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,60px);align-items:center}
.home-meet figure{position:relative}
.home-meet figure img{width:100%;border-radius:24px;border:1px solid var(--line)}
.home-meet h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin:.6rem 0 1rem}
.home-meet p{color:var(--muted);margin-bottom:1rem;max-width:54ch}
.home-meet strong{color:var(--ink);font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.facts span{font-size:.82rem;color:var(--ink);background:var(--tile);border:1px solid var(--line);padding:.45em .9em;border-radius:999px}

/* ---- FIVE WORLDS (portals) ---------------------------------------- */
.home-worlds{padding:clamp(48px,7vw,104px) 0}
.worlds-head{max-width:640px;margin-bottom:clamp(28px,4vw,52px)}
.worlds-head h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:.6rem 0 .8rem}
.worlds-head p{color:var(--muted);font-size:1.08rem}
.portals{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
.portal{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,4vw,44px);
  padding:clamp(24px,3.4vw,40px);border-radius:24px;background:var(--tile);border:1px solid var(--line);
  transition:transform .3s ease,border-color .3s,box-shadow .3s;isolation:isolate}
.portal::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.0;transition:opacity .35s;
  background:radial-gradient(120% 140% at 0% 0%, var(--w,#ee6c2b), transparent 60%)}
.portal:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--w,#ee6c2b) 55%,transparent);
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--w) 70%,transparent)}
.portal:hover::before{opacity:.16}
.portal-logo{width:clamp(86px,12vw,140px);display:grid;place-items:center}
.portal-logo img{max-width:100%;max-height:96px;object-fit:contain;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.portal-body .pn{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:700;color:var(--w,#ee6c2b)}
.portal-body h3{font-size:clamp(1.4rem,2.6vw,2.1rem);margin:.25rem 0 .4rem;color:var(--ink)}
.portal-body p{color:var(--muted);max-width:52ch;font-size:.98rem}
.portal-go{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);
  color:var(--w,#ee6c2b);font-size:1.3rem;transition:.25s;flex-shrink:0}
.portal:hover .portal-go{background:var(--w,#ee6c2b);color:#0c0c0c;border-color:transparent;transform:rotate(-45deg)}
@media (max-width:760px){
  .portal{grid-template-columns:1fr;text-align:left;gap:1rem}
  .portal-logo{width:120px}
  .portal-go{display:none}
}

/* ---- MISSION ------------------------------------------------------- */
.home-mission{padding:clamp(56px,8vw,120px) 0;text-align:center;border-top:1px solid var(--line)}
.home-mission blockquote{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.25;max-width:22ch;margin:1rem auto 0}
.home-mission blockquote em{font-style:italic;color:var(--orange-2)}
.home-mission .btn-ember{margin-top:2.2rem}

@media (max-width:840px){
  .home-hero .h-wrap,.home-meet .h-wrap{grid-template-columns:1fr}
  .hero-art{order:-1;min-height:300px}
  .home-meet figure{max-width:420px}
}

/* gentle entrance for the hero only — content is visible by default */
@media (prefers-reduced-motion:no-preference){
  .home-hero .hero-copy>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
  .home-hero .hero-copy>*:nth-child(2){animation-delay:.08s}
  .home-hero .hero-copy>*:nth-child(3){animation-delay:.16s}
  .home-hero .hero-copy>*:nth-child(4){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(20px)}}
}