/* Brandon Na Homepage: homepage template. Loaded after base.css. */

/* Hero. Text renders immediately (no fade-in) so it can paint as the LCP. */
.bn-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;touch-action:pan-y;cursor:crosshair}
.bn-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bn-hero-inner{position:relative;z-index:1;padding:8rem 0 3.5rem;pointer-events:none}
.bn-hero-inner a,.bn-hero-inner button{pointer-events:auto}
.bn-view .bn-kicker{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,3.4vw,2.6rem);line-height:1.15;color:var(--muted);letter-spacing:-.02em;margin:0}
.bn-view .bn-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(3rem,11vw,10rem);line-height:.92;letter-spacing:-.045em;margin:.1em 0 .35em;max-width:11ch;color:var(--ink)}
.bn-view .bn-lede{max-width:34rem;font-size:clamp(1.1rem,1.6vw,1.3rem);margin:0 0 2rem -.5rem;
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-radius:10px;padding:.25rem .5rem}
.bn-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.bn-view .bn-actions .bn-btn-ghost{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.bn-meter{position:absolute;right:max(1.25rem,calc((100% - 1180px)/2));bottom:3.5rem;z-index:1;text-align:right;font-family:var(--display);pointer-events:none}
.bn-meter strong{display:block;font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1;color:var(--joy);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.bn-meter span{font-size:.95rem;color:var(--muted)}
.bn-view .bn-hint{font-family:var(--display);font-size:.95rem;color:var(--muted);margin:1.4rem 0 0}
@media (max-width:820px){
  .bn-meter{position:relative;right:auto;bottom:auto;text-align:left;margin-top:1.5rem}
  .bn-hero-inner{padding-bottom:2.5rem}
}
@media (max-width:420px){
  .bn-actions .bn-btn{flex:1 1 100%}
}

/* Sections */
.bn-block{padding:clamp(4.5rem,10vw,8rem) 0;border-top:1px solid var(--line)}
.bn-view .bn-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 1.5rem;max-width:18ch;overflow-wrap:break-word}
.bn-prose{max-width:36rem}
.bn-view .bn-prose p{margin:0 0 1.1em}

/* Story */
.bn-story{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.bn-facts{list-style:none;margin:0;padding:0}
.bn-facts li{display:grid;grid-template-columns:9.5rem 1fr;gap:1.25rem;padding:1.35rem 0;margin:0;border-top:1px solid var(--line);align-items:baseline}
.bn-facts li:last-child{border-bottom:1px solid var(--line)}
.bn-facts b{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:-.03em;color:var(--joy);white-space:nowrap}
.bn-facts span{font-size:1.05rem;color:var(--muted)}
.bn-view .bn-facts span a,.bn-view .bn-lede a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bn-view .bn-facts span a:hover,.bn-view .bn-lede a:hover{color:var(--joy)}
@media (max-width:900px){.bn-story{grid-template-columns:1fr}.bn-facts li{grid-template-columns:7.5rem 1fr}.bn-facts b{font-size:2rem}}
@media (max-width:480px){.bn-facts li{grid-template-columns:1fr;gap:.35rem}}

/* Ventures */
.bn-ventures{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;margin-top:2.5rem}
.bn-venture{grid-column:span 2;padding:1.75rem;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);display:flex;flex-direction:column;gap:.6rem;min-width:0}
.bn-venture.is-soon{grid-column:span 6;flex-direction:row;align-items:center;gap:1.5rem;border:2px dashed var(--joy);background:transparent;padding:1.4rem 1.75rem}
.bn-venture.is-soon p{color:var(--muted)}
.bn-badge{flex:none;font-family:var(--display);font-weight:600;font-size:.95rem;background:var(--joy-fill);color:var(--on-joy);padding:.4rem .9rem;border-radius:999px}
.bn-venture.is-group{grid-column:span 3}
.bn-sub{list-style:none;margin:.5rem 0 0;padding:0}
.bn-sub li{padding:.9rem 0;margin:0;border-top:1px solid var(--line)}
.bn-sub b{font-family:var(--display);font-weight:600;font-size:1.1rem}
.bn-view .bn-sub b a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.bn-view .bn-sub b a:hover{color:var(--joy)}
.bn-sub span{display:block;font-size:1rem;color:var(--muted)}
.bn-tag{font-style:normal;font-family:var(--display);font-size:.8rem;color:var(--joy);border:1px solid currentColor;border-radius:999px;padding:.1rem .55rem;margin-left:.35rem;vertical-align:2px;white-space:nowrap}
.bn-view .bn-listen{font-family:var(--display);font-weight:600;font-size:1rem;margin-top:auto;text-decoration:underline;text-underline-offset:4px}
.bn-view .bn-listen:hover{color:var(--joy)}
.bn-view .bn-venture h3{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.025em;line-height:1.05;margin:0}
.bn-view .bn-venture h3 a{color:inherit;text-decoration:none}
.bn-view .bn-venture h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.bn-view .bn-venture p{margin:0;font-size:1.05rem}
.bn-role{font-family:var(--display);font-size:.95rem;color:var(--muted)}
/* Lead card: always a dark panel, in both colour modes. */
.bn-venture.is-lead{grid-column:span 4;background:var(--panel);color:var(--on-panel);border-color:transparent;border-radius:28px;padding:clamp(1.75rem,4vw,3rem);justify-content:space-between}
.bn-venture.is-lead .bn-role{color:var(--on-panel-muted)}
.bn-view .bn-venture.is-lead h3{font-size:clamp(2.1rem,4.6vw,3.6rem);color:var(--on-panel)}
.bn-view .bn-venture.is-lead p{font-size:1.2rem;max-width:30rem}
.bn-view .bn-venture.is-lead .bn-listen{color:var(--joy-fill)}
.bn-view .bn-motto{font-family:var(--body);font-style:italic;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;color:var(--joy-fill)}
@media (max-width:900px){.bn-ventures{grid-template-columns:1fr}.bn-venture,.bn-venture.is-lead,.bn-venture.is-soon,.bn-venture.is-group{grid-column:auto}.bn-venture.is-soon{flex-direction:column;align-items:flex-start}}
@media (max-width:420px){.bn-venture{padding:1.35rem}.bn-venture.is-soon{padding:1.2rem 1.35rem}}

/* Testimonials */
.bn-quotes{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.bn-pickers{display:flex;flex-direction:column;gap:.75rem}
body.bn-view .bn-pickers .bn-pick{width:4rem;height:4rem;padding:0;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--muted);font-family:var(--display);font-weight:800;font-size:1.05rem;cursor:pointer}
body.bn-view .bn-pickers .bn-pick[aria-pressed="true"]{background:var(--joy-fill);border-color:var(--joy-fill);color:var(--on-joy)}
.bn-quote{margin:0;padding:0;border:0;position:relative}
.bn-quote::before,.bn-quote::after{content:none!important;display:none!important}
.bn-view .bn-quote p{font-family:var(--body);font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.25;margin:0 0 1.5rem;max-width:28ch;color:var(--ink)}
.bn-quote footer{font-family:var(--display);color:var(--muted);font-size:1rem}
.bn-quote footer b{color:var(--ink)}
@media (max-width:700px){.bn-quotes{grid-template-columns:1fr}.bn-pickers{flex-direction:row}}

/* Latest writing */
.bn-view .bn-postrow{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;padding:2rem 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.bn-postrow:last-of-type{border-bottom:1px solid var(--line)}
.bn-view .bn-postrow h3{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2.3rem);letter-spacing:-.025em;line-height:1.12;margin:.3rem 0 0;overflow-wrap:break-word}
.bn-view .bn-postrow:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.bn-postrow time{font-family:var(--display);color:var(--muted);font-size:.95rem}
.bn-view .bn-see-all{margin-top:1.5rem;font-family:var(--display)}
.bn-view .bn-see-all a{text-decoration:underline;text-underline-offset:4px}
@media (max-width:700px){.bn-view .bn-postrow{grid-template-columns:1fr;gap:1rem}.bn-postrow .bn-btn{justify-self:start}}

/* Contact: always a dark panel. */
.bn-block.is-contact{border-top:0}
.bn-contact{background:var(--panel);color:var(--on-panel);border-radius:32px;padding:clamp(1.5rem,6vw,5rem);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.bn-view .bn-contact .bn-h2{color:var(--on-panel)}
.bn-view .bn-contact p{max-width:30rem}
.bn-contact dl{margin:2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;font-family:var(--display);font-size:1rem}
.bn-contact dt{color:var(--on-panel-muted)}
.bn-contact dd{margin:0}
.bn-wp-form form{display:flex;flex-direction:column;gap:1rem}
@media (max-width:900px){.bn-contact{grid-template-columns:1fr;border-radius:24px}}

/* Contact Form 7 inside the panel */
.bn-wp-form .wpcf7 p{margin:0 0 1rem}
.bn-wp-form .wpcf7 label{color:var(--on-panel);font-family:var(--display);font-weight:600;font-size:.95rem;display:block}
.bn-wp-form .wpcf7 label br{display:none}
.bn-wp-form .wpcf7-form-control-wrap{display:block;margin-top:.35rem}
.bn-wp-form .wpcf7 input[type=text],.bn-wp-form .wpcf7 input[type=email],.bn-wp-form .wpcf7 input[type=tel],.bn-wp-form .wpcf7 input[type=url],.bn-wp-form .wpcf7 textarea{
  width:100%;max-width:100%;font-family:var(--body);font-size:1.05rem;color:var(--on-panel);
  background:color-mix(in srgb,var(--on-panel) 8%,transparent);border:1px solid var(--panel-line);border-radius:12px;padding:.8rem 1rem;margin:0}
.bn-wp-form .wpcf7 textarea{min-height:8rem;height:10rem;resize:vertical}
body.bn-view .bn-wp-form .wpcf7 input[type=submit]{font-family:var(--display);font-weight:600;font-size:1rem;background:var(--joy-fill);color:var(--on-joy);
  border:0;border-radius:999px;padding:.8rem 1.6rem;cursor:pointer;transition:transform .15s ease}
body.bn-view .bn-wp-form .wpcf7 input[type=submit]:hover{transform:translateY(-2px)}
body.bn-view .bn-wp-form .wpcf7 input[type=submit]:disabled{opacity:.6;cursor:default;transform:none}
.bn-wp-form .wpcf7-spinner{background-color:var(--joy-fill)}
.bn-wp-form .wpcf7-not-valid-tip{color:var(--joy-fill);font-family:var(--display);font-size:.9rem;margin-top:.35rem}
.bn-wp-form .wpcf7 form .wpcf7-response-output{margin:1rem 0 0;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--joy-fill);color:var(--on-panel);font-family:var(--display);font-size:.95rem}
.bn-wp-form .wpcf7 form.sent .wpcf7-response-output{border-color:var(--panel-line);background:color-mix(in srgb,var(--on-panel) 10%,transparent)}

@media (prefers-reduced-motion:reduce){
  body.bn-view .bn-wp-form .wpcf7 input[type=submit]{transition:none}
}