/* ====================================================================
   THE FORGE — dark-luxe graphite + molten-steel glass bento
   Dominant trend: dark luxe (graphite #0B0D12, ONE molten accent).
   Accent trend: liquid-glass bento cards with refraction edges.
   Scope: body[data-layout="bento"]
   ==================================================================== */

body[data-layout="bento"]{
  /* — graphite ground, warm bone ink — */
  --bg:          #0B0D12;
  --bg-soft:     #10131A;
  --bg-elev:     rgba(22,26,35,.60);
  --bg-card:     #12151D;
  --bg-card-solid:#141822;
  --ink:         #F2F0EA;
  --ink-dim:     #C9C6BE;
  --ink-mute:    #9095A0;
  --line:        rgba(242,240,234,.08);
  --line-strong: rgba(242,240,234,.16);

  --radius-sm:   12px;
  --radius:      20px;
  --radius-lg:   28px;

  --font-sans:   'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:   'IBM Plex Mono','JetBrains Mono',ui-monospace,monospace;
  --maxw: 1280px;
  --pad:  clamp(16px, 3vw, 32px);

  background: var(--bg);
  font-family: var(--font-sans);
  letter-spacing: -.011em;
  overflow-x: clip;
}

/* Light toggle — attribute lives on <html>, not <body> */
html[data-theme="light"] body[data-layout="bento"]{
  --bg:    #F4F2ED;
  --bg-soft:#EBE8E1;
  --bg-elev:rgba(255,255,255,.66);
  --bg-card:#FFFFFF;
  --bg-card-solid:#FFFFFF;
  --ink:   #14161B;
  --ink-dim:#3C4048;
  --ink-mute:#6B7078;
  --line:  rgba(20,22,27,.09);
  --line-strong: rgba(20,22,27,.18);
}
html[data-theme="light"] body[data-layout="bento"] .grain-orb{ opacity: .35; }
html[data-theme="light"] body[data-layout="bento"] .orb-1{ background: radial-gradient(closest-side, rgba(242,84,10,.10), transparent 70%); }
html[data-theme="light"] body[data-layout="bento"] .orb-2{ background: radial-gradient(closest-side, rgba(126,146,178,.12), transparent 70%); }
html[data-theme="light"] body[data-layout="bento"] .cta .container > *{
  background:
    radial-gradient(600px 300px at 85% -20%, rgba(232,106,31,.20), transparent 60%),
    linear-gradient(150deg, #FFF3EA 0%, #FFFFFF 55%, #FBF7F2 100%) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, transparent) !important;
}
html[data-theme="light"] body[data-layout="bento"] .cta .btn-primary,
html[data-theme="light"] body[data-layout="bento"] section .btn-primary{
  color: #FFFFFF !important;
}
html[data-theme="light"] body[data-layout="bento"] .hero-card{ box-shadow: 0 40px 90px -38px rgba(20,22,27,.35) !important; }

/* Glass card treatment with refraction edge (Glassmorphism 2.0) */
body[data-layout="bento"] .stat,
body[data-layout="bento"] .pos-card,
body[data-layout="bento"] .project-card,
body[data-layout="bento"] .service-card,
body[data-layout="bento"] .fact-item{
  position: relative;
}
body[data-layout="bento"] .pos-card::before,
body[data-layout="bento"] .project-card::before,
body[data-layout="bento"] .service-card::before,
body[data-layout="bento"] .stat::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--ink) 22%, transparent),
    transparent 38%,
    transparent 72%,
    color-mix(in srgb, var(--accent) 26%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
}

/* Ambient atmosphere: dual ember + steel mesh glow, softened grain */
body[data-layout="bento"] .hero-bg,
body[data-layout="bento"] .hero-beam,
body[data-layout="bento"] .hero-grid{ display: none !important; }
body[data-layout="bento"] .grain-orb{ filter: blur(90px); opacity: .5; }
body[data-layout="bento"] .orb-1{ background: radial-gradient(closest-side, rgba(242,84,10,.16), transparent 70%); }
body[data-layout="bento"] .orb-2{ background: radial-gradient(closest-side, rgba(120,140,170,.10), transparent 70%); }
body[data-layout="bento"] .noise{ opacity: .02; }

/* ---- Type: engineered grotesque, sentence case, tight ---- */
body[data-layout="bento"] .display,
body[data-layout="bento"] .display-2,
body[data-layout="bento"] h1,
body[data-layout="bento"] h2,
body[data-layout="bento"] h3{
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
}
body[data-layout="bento"] .display{
  font-size: clamp(46px, 7vw, 100px);
  font-weight: 600;
  line-height: .98;
}
/* The accent line burns: molten gradient text */
body[data-layout="bento"] .display em{
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 600;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body[data-layout="bento"] .display-2{
  font-size: clamp(30px, 4.2vw, 56px);
}
body[data-layout="bento"] .eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 100px;
  padding: 7px 14px;
  display: inline-block;
}

/* ---- Nav: slim edge-to-edge command bar (NOT a floating pill) ---- */
body[data-layout="bento"] .nav{
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--line) !important;
  transition: background .3s;
}
body[data-layout="bento"] .nav.is-scrolled{
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent) !important;
  box-shadow: 0 12px 40px -20px rgba(0,0,0,.6);
}
body[data-layout="bento"] .brand-mark{
  border-radius: 10px !important;
  background: var(--gold-grad) !important;
  color: #14100B !important;
  font-weight: 700;
}
body[data-layout="bento"] .nav-links a{
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-dim);
  border-radius: 8px;
  transition: color .2s, background .2s;
}
body[data-layout="bento"] .nav-links a:hover{ color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
body[data-layout="bento"] .nav-links a[aria-current="page"]{ color: var(--ink); }

/* ---- Hero: open composition, massive type, glass portrait card ---- */
body[data-layout="bento"] .hero{
  padding: clamp(96px, 11vw, 150px) 0 clamp(56px, 6vw, 90px);
  min-height: auto;
  position: relative;
}
body[data-layout="bento"] .hero::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 420px at 82% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(600px 380px at 6% 18%, rgba(126,146,178,.07), transparent 60%);
  pointer-events: none;
}
body[data-layout="bento"] .hero-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  min-height: auto;
  position: relative;
}
body[data-layout="bento"] .hero-copy{ max-width: 680px; }
body[data-layout="bento"] .kicker{
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent);
  border-radius: 100px;
  padding: 8px 15px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body[data-layout="bento"] .kicker-dot{
  background: var(--accent) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
body[data-layout="bento"] .hero .lead{
  font-family: 'Inter', var(--font-sans);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--ink-dim);
  margin-top: 26px;
  max-width: 56ch;
}
body[data-layout="bento"] .hero-ctas{ gap: 12px; margin-top: 34px; flex-wrap: wrap; }
body[data-layout="bento"] .hero-ctas .btn-primary{
  border-radius: 14px !important;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 14px 24px !important;
  background: var(--gold-grad) !important;
  color: #17110A !important;
  border: none !important;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
body[data-layout="bento"] .hero-ctas .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--accent) 65%, transparent) !important;
}
body[data-layout="bento"] .hero-ctas .btn-outline{
  border-radius: 14px !important;
  border: 1px solid var(--line-strong) !important;
  padding: 14px 24px !important;
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans);
  font-weight: 500;
  backdrop-filter: blur(8px);
}
body[data-layout="bento"] .hero-ctas .btn-outline:hover{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)) !important;
  transform: translateY(-2px);
}

body[data-layout="bento"] .hero-meta{
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  gap: 36px;
  flex-wrap: wrap;
}
body[data-layout="bento"] .hero-meta-divider{ display: none; }
body[data-layout="bento"] .meta-value{
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -.025em;
  background: linear-gradient(135deg, var(--ink) 30%, color-mix(in srgb, var(--accent) 82%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-layout="bento"] .meta-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- Hero card: floating glass portrait with molten ring ---- */
body[data-layout="bento"] .hero-card{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.65) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: relative;
}
body[data-layout="bento"] .hero-card::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ink) 30%, transparent),
    transparent 40%,
    transparent 70%,
    color-mix(in srgb, var(--accent) 40%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
body[data-layout="bento"] .hero-portrait{
  border-radius: var(--radius) !important;
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
}
body[data-layout="bento"] .hero-portrait::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent),
              inset 0 -60px 80px -40px rgba(11,13,18,.55);
  pointer-events: none;
}
body[data-layout="bento"] .portrait-frame,
body[data-layout="bento"] .portrait-img{ border-radius: var(--radius) !important; }
body[data-layout="bento"] .portrait-badge{
  border-radius: 100px !important;
  background: var(--gold-grad) !important;
  color: #17110A !important;
  border: none !important;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
body[data-layout="bento"] .hero-card-name{
  font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-family: var(--font-sans);
}
body[data-layout="bento"] .hero-card-name-sub{ color: var(--accent); font-weight: 500; font-size: 13px; }
body[data-layout="bento"] .hero-card-role{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.7;
}
body[data-layout="bento"] .hero-card-quote{
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
  color: var(--ink-dim);
}
body[data-layout="bento"] .hero-card-foot a{
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--ink);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
body[data-layout="bento"] .hero-card-foot a:hover{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-1px);
}
body[data-layout="bento"] .badge{
  border-radius: 100px !important;
  padding: 6px 12px !important;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
}
body[data-layout="bento"] .pulse{
  background: var(--accent) !important;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent) !important;
}
body[data-layout="bento"] .scroll-hint{ display: none; }

/* ---- Marquee: project-record strip (pure CSS, reduced-motion pauses) ---- */
body[data-layout="bento"] .forge-marquee{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
body[data-layout="bento"] .forge-marquee-track{
  display: flex;
  gap: 56px;
  width: max-content;
  animation: forge-scroll 36s linear infinite;
}
body[data-layout="bento"] .forge-marquee span{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 56px;
}
body[data-layout="bento"] .forge-marquee span::after{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .7;
}
@keyframes forge-scroll{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  body[data-layout="bento"] .forge-marquee-track{ animation: none; }
}

/* ---- Sections ---- */
body[data-layout="bento"] section{ padding: clamp(40px, 5vw, 72px) 0; }
body[data-layout="bento"] .section-head{ max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 48px); }
body[data-layout="bento"] .section-head h2,
body[data-layout="bento"] .section-head .display-2{ font-size: clamp(30px, 4.2vw, 56px); }
body[data-layout="bento"] .section-head .display-2 em{
  font-style: normal;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body[data-layout="bento"] .section-sub{
  font-family: 'Inter', var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  max-width: 58ch;
  margin-top: 16px;
  color: var(--ink-dim);
}

/* ---- Stats: glass bento row, gradient numerals ---- */
body[data-layout="bento"] .stats{
  background: transparent;
  border: none;
  padding: clamp(16px, 2vw, 28px) 0;
}
body[data-layout="bento"] .stats-grid{
  gap: 16px !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
body[data-layout="bento"] .stats-grid > *{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 30px 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
body[data-layout="bento"] .stats-grid > *:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
  box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.5));
}
body[data-layout="bento"] .stat-value{
  font-family: var(--font-sans);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body[data-layout="bento"] .stat-label{
  font-family: var(--font-mono);
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-top: 10px;
}

/* ---- About: editorial glass split ---- */
body[data-layout="bento"] .about-grid{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 16px;
  align-items: stretch;
}
body[data-layout="bento"] .about-grid > *{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 3.5vw, 46px);
}
body[data-layout="bento"] .about-main p,
body[data-layout="bento"] .about-text p{
  font-family: 'Inter', var(--font-sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin-bottom: 1.1em;
}
body[data-layout="bento"] .about-main strong,
body[data-layout="bento"] .about-text strong{ color: var(--ink); font-weight: 600; }
body[data-layout="bento"] .about-quote{
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--bg-card)), var(--bg-card) 55%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius);
  padding: 30px;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.35;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}
body[data-layout="bento"] .about-quote::before{
  content: "";
  position: absolute; right: -50px; bottom: -50px;
  width: 190px; height: 190px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}
body[data-layout="bento"] .quote-mark{ color: var(--accent); }
body[data-layout="bento"] .about-facts{
  background: transparent !important;
  border: none;
  padding: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
body[data-layout="bento"] .about-facts > div{
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
}
body[data-layout="bento"] .about-facts strong{ color: var(--accent); }

/* ---- Bento cards: roles, projects, services ---- */
body[data-layout="bento"] .positions-grid,
body[data-layout="bento"] .projects-grid,
body[data-layout="bento"] .services-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
body[data-layout="bento"] .pos-card,
body[data-layout="bento"] .project-card,
body[data-layout="bento"] .service-card{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 30px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
body[data-layout="bento"] .pos-card:hover,
body[data-layout="bento"] .project-card:hover,
body[data-layout="bento"] .service-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line)) !important;
  box-shadow: 0 32px 64px -28px color-mix(in srgb, var(--accent) 24%, rgba(0,0,0,.55));
}
body[data-layout="bento"] .pos-num{
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 100px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
}
body[data-layout="bento"] .pos-tag{
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 100px !important;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
body[data-layout="bento"] .pos-title{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.02em;
  margin-top: 18px;
}
body[data-layout="bento"] .pos-line{ background: var(--gold-grad); height: 2px; border-radius: 2px; }

body[data-layout="bento"] .service-card{
  background: linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--bg-soft) 72%, var(--bg-card))) !important;
}
body[data-layout="bento"] .service-card svg,
body[data-layout="bento"] .service-card .icon{
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 14px;
  padding: 11px;
  width: 22px; height: 22px;
  box-sizing: content-box;
}
body[data-layout="bento"] .service-card h3{
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-top: 20px;
}

/* ---- Awards / honour (hidden for this profile, kept themed) ---- */
body[data-layout="bento"] .award-item,
body[data-layout="bento"] .gov-card{
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 22px 26px !important;
}

/* ---- Facts / FAQ: glass rows with ember accents ---- */
body[data-layout="bento"] .facts-list > *,
body[data-layout="bento"] .fact-item,
body[data-layout="bento"] details{
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  padding: 4px 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .25s;
}
body[data-layout="bento"] .facts-list > *:hover,
body[data-layout="bento"] details:hover{
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
body[data-layout="bento"] .fact-q,
body[data-layout="bento"] details summary{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -.01em;
}

/* ---- Explore directory cards ---- */
body[data-layout="bento"] .explore-grid a,
body[data-layout="bento"] .explore-card{
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
body[data-layout="bento"] .explore-grid a:hover,
body[data-layout="bento"] .explore-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.5));
}

/* ---- CTA: molten gradient plate ---- */
body[data-layout="bento"] .cta-plate,
body[data-layout="bento"] .cta-card,
body[data-layout="bento"] .cta .container > *{
  border-radius: var(--radius-lg) !important;
}
body[data-layout="bento"] .cta .container > *{
  background:
    radial-gradient(600px 300px at 85% -20%, rgba(255,160,77,.28), transparent 60%),
    linear-gradient(150deg, #1A1410 0%, #12151D 55%, #10131A 100%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  position: relative;
  overflow: hidden;
}
body[data-layout="bento"] .cta .container > *::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-1) 55%, transparent), transparent 40%, color-mix(in srgb, var(--gold-2) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
body[data-layout="bento"] .cta .eyebrow{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
body[data-layout="bento"] .btn{
  border-radius: 14px !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
}
body[data-layout="bento"] .cta .btn-primary,
body[data-layout="bento"] section .btn-primary{
  background: var(--gold-grad) !important;
  color: #17110A !important;
  border: none !important;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
body[data-layout="bento"] .cta .btn-primary:hover,
body[data-layout="bento"] section .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--accent) 68%, transparent) !important;
}
body[data-layout="bento"] .btn-outline{
  border: 1px solid var(--line-strong) !important;
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
  color: var(--ink) !important;
}
body[data-layout="bento"] .btn-outline:hover{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)) !important;
}

/* ---- Contact ---- */
body[data-layout="bento"] .contact-info,
body[data-layout="bento"] .contact-form,
body[data-layout="bento"] form{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 46px);
}
body[data-layout="bento"] input,
body[data-layout="bento"] textarea,
body[data-layout="bento"] select{
  border-radius: 12px !important;
  border: 1px solid var(--line-strong) !important;
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
  color: var(--ink) !important;
  padding: 14px 16px !important;
  font-family: 'Inter', var(--font-sans);
}
body[data-layout="bento"] input::placeholder,
body[data-layout="bento"] textarea::placeholder{ color: var(--ink-mute); }
body[data-layout="bento"] input:focus,
body[data-layout="bento"] textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) !important;
  outline: none;
}

/* ---- Wiki page ---- */
body[data-layout="bento"] .wiki-search input,
body[data-layout="bento"] .wiki-search{
  border-radius: 100px;
}
body[data-layout="bento"] .wiki-row,
body[data-layout="bento"] .wiki-table table,
body[data-layout="bento"] .wiki-table tr{
  border-color: var(--line);
}
body[data-layout="bento"] .chip{
  border-radius: 100px !important;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
body[data-layout="bento"] .chip.is-active,
body[data-layout="bento"] .chip:hover{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---- Footer: deep graphite, hairline top, subtle giant ---- */
body[data-layout="bento"] .footer{
  border-top: 1px solid var(--line);
  background:
    radial-gradient(700px 300px at 50% 120%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%),
    var(--bg-soft);
}
body[data-layout="bento"] .footer .foot-name{ font-family: var(--font-sans); font-weight: 600; }
body[data-layout="bento"] .footer .foot-nav a{ color: var(--ink-dim); }
body[data-layout="bento"] .footer .foot-nav a:hover{ color: var(--accent); }
body[data-layout="bento"] .foot-giant{
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.05em;
  opacity: .5;
}
body[data-layout="bento"] .footer .eprofile-link{ color: var(--accent); }
body[data-layout="bento"] .footer .webnet-mark{ color: var(--accent); }

/* ---- Responsive ---- */
/* Tablet 720-900: hero stays two-up (copy + compact portrait card) */
@media (min-width: 720px) and (max-width: 900px){
  body[data-layout="bento"] .hero-inner{
    grid-template-columns: minmax(0, 1.45fr) minmax(264px, .85fr);
    gap: 20px;
  }
  body[data-layout="bento"] .hero-copy .display{ font-size: clamp(40px, 6.2vw, 64px); }
  body[data-layout="bento"] .hero-meta{ gap: 22px; }
}
/* Stacked hero (≤719): cap the portrait card so the photo never dwarfs the fold */
@media (max-width: 719px){
  body[data-layout="bento"] .hero-card{
    max-width: 440px;
    width: 100%;
    margin-inline: auto;
  }
  body[data-layout="bento"] .hero .display{ font-size: clamp(40px, 11.5vw, 56px); }
}
@media (max-width: 900px){
  body[data-layout="bento"] .hero-inner{ gap: 22px; }
  body[data-layout="bento"] .about-grid{ grid-template-columns: 1fr; }
  body[data-layout="bento"] .contact-grid{ grid-template-columns: 1fr; }
  body[data-layout="bento"] .forge-marquee-track{ gap: 36px; }
  body[data-layout="bento"] .forge-marquee span{ gap: 36px; font-size: 10.5px; }
}
/* Small phones */
@media (max-width: 380px){
  body[data-layout="bento"] .hero-ctas .btn-primary,
  body[data-layout="bento"] .hero-ctas .btn-outline{ padding: 12px 18px !important; }
  body[data-layout="bento"] .stats-grid{ grid-template-columns: 1fr; }
}