* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg, #ece9e4); color: var(--text, #2b2926); font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif); }
.bn-page { --bn-card: #f7f5f1; --bn-ink: #2b2926; --bn-mute: #7b756c; --bn-acc: var(--accent, #e0623b); max-width: 1080px; margin: 0 auto; padding: 1.2rem 1.2rem 2rem; color: var(--bn-ink); background: #ece9e4; min-height: 100vh; }
.bn-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.4rem 1.2rem; }
.bn-logo { font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; font-weight: 700; color: inherit; text-decoration: none; }
.bn-nav { display: flex; gap: 1.4rem; }
.bn-nav a { color: var(--bn-mute); text-decoration: none; font-size: 0.92rem; }
.bn-nav a:hover { color: var(--bn-ink); }
.bn-pill, .bn-btn { display: inline-block; border: 0; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; background: var(--bn-ink); color: #f7f5f1; padding: 0.65rem 1.1rem; border-radius: 999px; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.bn-pill:hover, .bn-btn:hover { transform: translateY(-2px); background: var(--bn-acc); }
.bn-ghost { background: transparent; color: var(--bn-ink); box-shadow: inset 0 0 0 1.5px var(--bn-ink); }
.bn-ghost:hover { color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bn-acc); outline-offset: 3px; }

.bn-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.bn-card { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; background: var(--bn-card); border-radius: var(--radius, 22px); box-shadow: 0 1px 0 #fff inset, 0 8px 24px -14px rgb(60 50 40 / 0.35); overflow: hidden; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s; }
.bn-card:hover { box-shadow: 0 1px 0 #fff inset, 0 18px 34px -16px rgb(60 50 40 / 0.45); }
.bn-intro { grid-column: span 3; grid-row: span 2; justify-content: space-between; }
.bn-clock { grid-column: span 1; grid-row: span 2; }
.bn-work { grid-column: span 2; grid-row: span 2; justify-content: flex-end; transform-style: preserve-3d; }
.bn-stack { grid-column: span 2; }
.bn-quote { grid-column: span 2; background: var(--bn-acc); color: #fff; justify-content: space-between; }
.bn-count { grid-column: span 1; }
.bn-contact { grid-column: span 3; justify-content: space-between; }
.bn-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-mute); }
.bn-quote .bn-sub, .bn-quote .bn-label { color: rgb(255 255 255 / 0.8); }
.bn-title { font-family: var(--font-display, Georgia, serif); font-size: clamp(1.8rem, 4.4vw, 3.1rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; max-width: 18ch; }
.bn-h2 { font-family: var(--font-display, Georgia, serif); font-size: 1.4rem; line-height: 1.15; }
.bn-text { color: var(--bn-mute); line-height: 1.55; max-width: 36ch; font-size: 0.95rem; }
.bn-intro .bn-btn { align-self: flex-start; }
.bn-sub { font-size: 0.85rem; color: var(--bn-mute); }
.bn-time { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: auto; }
.bn-dot { position: absolute; top: 1.4rem; right: 1.4rem; width: 10px; height: 10px; border-radius: 50%; background: #3bb273; animation: bn-pulse 2s infinite; }
@keyframes bn-pulse { 0% { box-shadow: 0 0 0 0 rgb(59 178 115 / 0.5); } 100% { box-shadow: 0 0 0 12px rgb(59 178 115 / 0); } }
.bn-art { position: absolute; inset: 0 0 38% 0; background: radial-gradient(circle at 25% 30%, #f6b98a, transparent 45%), radial-gradient(circle at 75% 60%, #8fb7c9, transparent 50%), linear-gradient(135deg, #e9d5c3, #cfc3d6); transition: transform 0.5s; }
.bn-work:hover .bn-art { transform: scale(1.06); }
.bn-work > :not(.bn-art) { position: relative; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.bn-chip { font: inherit; font-size: 0.85rem; border: 1.5px solid #d8d3ca; background: transparent; border-radius: 999px; padding: 0.4rem 0.85rem; color: var(--bn-ink); cursor: pointer; transition: transform 0.25s cubic-bezier(.3,1.6,.5,1), background 0.2s; }
.bn-chip:hover { transform: translateY(-3px) rotate(-3deg); background: #fff; }
.bn-q { font-family: var(--font-display, Georgia, serif); font-size: 1.25rem; line-height: 1.3; }
.bn-num { font-size: 3rem; line-height: 1; margin-top: auto; font-variant-numeric: tabular-nums; }
.bn-mail { font-family: var(--font-display, Georgia, serif); font-size: clamp(1.2rem, 3vw, 1.9rem); color: inherit; text-decoration-color: var(--bn-acc); text-underline-offset: 6px; }
.bn-foot { text-align: center; padding-top: 1.6rem; font-size: 0.8rem; color: var(--bn-mute); }
@media (max-width: 820px) {
  .bn-clock { grid-row: auto; }
  .bn-grid { grid-template-columns: repeat(2, 1fr); }
  .bn-intro, .bn-work, .bn-stack, .bn-quote, .bn-contact { grid-column: span 2; }
  .bn-clock, .bn-count { grid-column: span 1; }
  .bn-work { min-height: 280px; }
}
@media (max-width: 520px) { .bn-nav { display: none; } .bn-clock, .bn-count { grid-column: span 2; } .bn-page { padding: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }