/* ============================================================
   Nicole Belton — site system (shared across all pages)
   Builds on ../styles.css tokens. Aesthetic: editorial, quiet,
   art-forward — Jessica Bellamy × Twentieth.
   ============================================================ */
:root {
  --nb-grey:   #868686;   /* brand grey — now the primary text color everywhere */
  --nb-ink:    #868686;   /* unified to grey per brand direction (was near-black) */
  --nb-deep:   #5f5f5f;   /* a hair darker grey, used sparingly for the rare panel */
  --nb-blue:   #328BDD;   /* PMS 279 accent — one at a time */
  --nb-paper:  #FFFFFF;
  --nb-ground: #F4F4F3;   /* whisper-grey alt ground */
  --nb-wall:   #ECECEB;   /* the in-situ gallery wall — light grey (Jessica) */
  --nb-line:   #E6E6E4;
  --nb-edge:   clamp(20px, 6vw, 96px);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-text);
  color: var(--nb-grey);
  background: var(--nb-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color: inherit; text-decoration:none; }

.label { font-family:var(--font-text); font-weight:600; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--nb-grey); }
.disp { font-family:var(--font-display); font-weight:100; color:var(--nb-ink); line-height:0.98; letter-spacing:-0.01em; }
.italic { font-style:italic; }

/* ---------- NAV ---------- */
nav.nb {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--nb-edge);
  background:rgba(255,255,255,0.84); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--nb-line);
}
nav.nb .brand { font-family:var(--font-display); font-weight:100; font-size:22px; letter-spacing:0.01em; color:var(--nb-grey); text-transform:none; }
nav.nb .navlinks { display:flex; gap:30px; align-items:center; }
nav.nb .navlinks a { font-family:var(--font-text); font-weight:500; font-size:15px; letter-spacing:0.04em; color:var(--nb-grey); transition:color var(--dur) var(--ease); position:relative; }
nav.nb .navlinks a:hover { color:var(--nb-ink); }
nav.nb .navlinks a.active { color:var(--nb-ink); }
nav.nb .navlinks a.active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--nb-blue); }
.foot-bfly { transform-origin:50% 50%; display:inline-block; }
.foot-bfly[src*="footer-bfly1"] { transform:rotate(38deg); }
@keyframes nb-flap-x { 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(0.5); } }
/* the resting footer butterfly flutters slowly on its own — one fold every 3s */
@keyframes nb-flap-slow { 0%,74%,100%{ transform:scaleX(1); } 87%{ transform:scaleX(0.5); } }
.foot-bfly[src*="footer-bfly2"] { animation:nb-flap-slow 3s ease-in-out infinite; }
@media (pointer:fine){
  html.nb-cur, html.nb-cur *{ cursor:none !important; }
  #nb-cursor{ position:fixed; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#F0D27A; pointer-events:none; z-index:99999; opacity:1; transition:background .2s var(--ease), opacity .2s var(--ease); }
  #nb-cursor.link{ background:#328BDD; }
  #nb-cursor.on-dark{ background:#F0D27A; }
  #nb-cursor.on-dark.link{ background:#328BDD; }
  html.bfly-flying #nb-cursor{ background:#F0D27A; }
  #nb-cursor.gone{ opacity:0; }
}
nav.nb .menu-btn { display:none; background:none; border:none; font-family:var(--font-text); font-weight:600; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--nb-ink); cursor:pointer; }
.mobile-menu { display:none; }

/* ---------- PAGE HEAD ---------- */
.page { padding:clamp(48px,7vw,104px) var(--nb-edge) clamp(40px,6vw,80px); }
.page-head { max-width:1500px; margin:0 auto clamp(40px,6vw,76px); }
.page-head .label { display:block; margin-bottom:20px; }
.page-head h1 { font-family:var(--font-display); font-weight:100; font-size:clamp(2.6rem,6vw,5rem); color:var(--nb-ink); line-height:1.0; letter-spacing:-0.015em; }
.page-head .sub { font-family:var(--font-text); font-weight:300; font-style:italic; font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.5; color:var(--nb-grey); max-width:46ch; margin-top:26px; }

/* ---------- WORK CARD + IN-SITU ---------- */
.wrap { max-width:1500px; margin:0 auto; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(22px,2.6vw,46px) clamp(22px,2.4vw,40px); }
.work { position:relative; }
.work .frame { position:relative; overflow:hidden; background:var(--nb-wall); }
.work .frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.work:hover .frame img { transform:scale(1.025); }
.work .meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:16px; padding-bottom:14px; border-bottom:1px solid var(--nb-line); }
.work .title { font-family:var(--font-display); font-weight:100; font-size:clamp(1.15rem,1.6vw,1.55rem); color:var(--nb-ink); line-height:1.1; }
.work .title em { font-style:italic; }
.work .cat { font-family:var(--font-text); font-weight:600; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--nb-grey); margin-bottom:5px; }
.work .yr { font-family:var(--font-text); font-size:13px; color:var(--nb-grey); white-space:nowrap; }

.c12{grid-column:span 12;} .c8{grid-column:span 8;} .c7{grid-column:span 7;}
.c6{grid-column:span 6;} .c5{grid-column:span 5;} .c4{grid-column:span 4;} .c3{grid-column:span 3;}
.ar-land .frame{aspect-ratio:3/2;} .ar-port .frame{aspect-ratio:4/5;} .ar-sq .frame{aspect-ratio:1/1;}
.ar-wide .frame{aspect-ratio:16/10;} .ar-tall .frame{aspect-ratio:13/16;}

/* ---------- FOOTER ---------- */
footer.nb { padding:clamp(64px,9vw,128px) var(--nb-edge) 40px; }
footer.nb .foot-cta { background:var(--nb-grey); color:#fff; font-family:var(--font-display); font-weight:100; line-height:1.1; letter-spacing:0; font-size:clamp(1.25rem,2.4vw,1.9rem); padding:clamp(24px,3.2vw,40px) clamp(26px,4vw,52px); border-radius:4px; margin-bottom:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
footer.nb .foot-cta br { display:none; }
footer.nb .foot-cta a { color:#fff; font-size:0.95em; }
footer.nb .foot-cta a:hover { opacity:0.7; }
footer.nb .foot-row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--nb-line); }
footer.nb .foot-links { display:flex; gap:28px; flex-wrap:wrap; }
footer.nb .foot-links a { font-family:var(--font-text); font-weight:500; font-size:13px; color:var(--nb-grey); transition:color var(--dur) var(--ease); }
footer.nb .foot-links a:hover { color:var(--nb-ink); }
footer.nb .foot-fine { font-family:var(--font-text); font-size:12px; color:var(--nb-grey); }
footer.nb .foot-fine .kings { color:var(--nb-blue); }

/* ---------- REVEAL ---------- */
/* Content is ALWAYS visible. (Earlier scroll-reveal used opacity transitions/
   animations, but the preview environment freezes them at the first frame and
   trapped content at opacity:0 — so no opacity animation is used.) */
.reveal { opacity:1 !important; transform:none !important; }

/* ===== Twentieth-style global frame: left menu · secondary top-right · name bottom-left ===== */
.frame { display:grid; grid-template-columns: clamp(250px,27vw,400px) 1fr; align-items:start; position:relative; }
.frame.tight { grid-template-columns: clamp(190px,20vw,255px) 1fr; --sidebar-col: clamp(190px,20vw,255px); --bleed: calc(-1 * (clamp(190px,20vw,255px) + 40px)); }
.sidebar { position:sticky; top:0; height:100vh; padding:40px; display:flex; flex-direction:column; justify-content:space-between; }
.nav-main { display:flex; flex-direction:column; gap:1px; }
.nav-main a { font-family:var(--font-text); font-weight:400; font-size:17px; line-height:1.4; color:var(--nb-grey); transition:color var(--dur) var(--ease); width:max-content; }
.nav-main a:hover, .nav-main a.active { color:#3a3a3a; }
.nav-main .group2 { margin-top:8px; }
.wordmark-bl { font-family:var(--font-display); font-weight:100; font-size:clamp(3.15rem,5.1vw,5.25rem); color:var(--nb-grey); letter-spacing:0.01em; line-height:1; white-space:nowrap; }
.nav-second { position:absolute; top:40px; right:40px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.nav-second a { font-family:var(--font-text); font-weight:400; font-size:13px; color:var(--nb-grey); transition:color var(--dur) var(--ease); }
.nav-second a:hover { color:#3a3a3a; }
.content { min-width:0; padding:40px 40px 0; }
.content footer.nb { padding-left:0; padding-right:0; }

/* ---- Unified chrome (matches the home page on every page): 40px frame,
   raised 1.5x wordmark that pins to the viewport bottom then freezes above the
   closing band, and a full-bleed, borderless footer with no CTA. ---- */
:root { --sidebar-col:clamp(250px,27vw,400px); --bleed:calc(-1 * (var(--sidebar-col) + 40px)); }
.content { position:relative; z-index:1; }
.sidebar { z-index:50; pointer-events:none; }
.sidebar > * { pointer-events:auto; }
@media (min-width:821px){
  .wordmark-bl { position:fixed; left:40px; bottom:40px; z-index:300; margin:0; }
  .wordmark-bl.parked { position:absolute; top:0; bottom:auto; }
}
.frame .content footer.nb { width:100vw; margin-left:var(--bleed); padding:clamp(28px,3vw,40px) 40px; }
.frame .content footer.nb .foot-cta { display:none; }
.frame .content footer.nb .foot-row { border-top:none; padding-top:0; }

/* ---- About-style head (menu + centered name): used on About, Design, Fine Art ---- */
.ap { padding:40px 40px 0; }
.ap .wrap, .ap .fa-note { max-width:none; margin-left:0; margin-right:0; }
.ap-head { display:grid; grid-template-columns:clamp(170px,19vw,250px) 1fr; gap:24px 40px; align-items:end; margin-bottom:clamp(56px,7vw,96px); }
.ap-nav { display:flex; flex-direction:column; gap:1px; }
.ap-nav a { font-family:var(--font-text); font-weight:400; font-size:17px; line-height:1.4; color:var(--nb-grey); width:max-content; transition:color var(--dur) var(--ease); }
.ap-nav a:hover, .ap-nav a.active { color:#3a3a3a; }
.ap-nav .grp2 { margin-top:8px; }
.ap-nav .grp { margin-top:14px; }
.ap-name { font-family:var(--font-display); font-weight:100; font-size:clamp(2.4rem,6.4vw,5.6rem); color:var(--nb-grey); letter-spacing:0.01em; text-align:center; line-height:1; white-space:nowrap; }
.ap-lead { font-family:var(--font-display); font-weight:100; font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.32; letter-spacing:-0.01em; color:var(--nb-grey); text-align:center; max-width:40ch; margin:0 auto clamp(40px,6vw,72px); text-wrap:balance; }

/* ---- newsletter band (shared with the home page) ---- */
.nl-band { background:var(--nb-grey); color:#fff; border-radius:0; padding:clamp(40px,5vw,72px) 40px; display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; }
.nl-title { font-family:var(--font-display); font-weight:100; font-size:clamp(1.25rem,2.4vw,1.9rem); color:#fff; }
.nl-form { display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,0.55); min-width:min(340px,100%); }
.nl-form input { flex:1; background:transparent; border:none; color:#fff; font-family:var(--font-text); font-size:15px; padding:10px 2px; }
.nl-form input::placeholder { color:rgba(255,255,255,0.72); }
.nl-form input:focus { outline:none; }
.nl-form button { background:none; border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; padding:4px 6px; transition:transform var(--dur) var(--ease); }
.nl-form button:hover { transform:translateX(3px); }
.nl-ok { display:none; font-family:var(--font-text); font-size:13px; color:#fff; }
.nl-ok.show { display:inline; }

/* ---- body-level footer (about-style pages) — matches the home footer ---- */
body > footer.nb { width:100%; padding:clamp(28px,3vw,40px) 40px; }
body > footer.nb .foot-cta { display:none; }
body > footer.nb .foot-row { border-top:none; padding-top:0; }

@media (min-width:821px){
  .nav-second { position:absolute; top:40px; right:40px; }
}
@media (max-width:820px){
  .frame { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 24px; padding:22px var(--nb-edge); border-bottom:1px solid var(--nb-line); }
  .nav-main { flex-direction:row; flex-wrap:wrap; gap:4px 18px; }
  .nav-main .group2 { margin-top:0; }
  .wordmark-bl { order:-1; }
  .nav-second { position:absolute; top:18px; right:var(--nb-edge); flex-direction:row; gap:16px; width:auto; justify-content:flex-end; z-index:60; }
  .content { padding:28px var(--nb-edge) 0; }
  .frame .content footer.nb { width:auto; margin-left:0; padding-left:0; padding-right:0; }
  .ap-head { grid-template-columns:1fr; gap:16px; }
  .ap-name { text-align:left; white-space:normal; }
  .ap-lead { text-align:left; margin-left:0; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  nav.nb .navlinks { display:none; }
  nav.nb .menu-btn { display:block; }
  .mobile-menu.open { display:flex; flex-direction:column; gap:4px; padding:8px var(--nb-edge) 24px; border-bottom:1px solid var(--nb-line); background:#fff; position:sticky; top:65px; z-index:49; }
  .mobile-menu.open a { font-family:var(--font-text); font-weight:500; font-size:15px; color:var(--nb-ink); padding:10px 0; border-bottom:1px solid var(--nb-line); }
  .c8,.c7,.c6,.c5,.c4,.c3 { grid-column:span 12; }
  .c6.keep,.c4.keep { grid-column:span 6; }
}

footer.nb .foot-links .foot-appt { font-family:var(--font-text); font-weight:500; font-size:13px; color:var(--nb-grey); display:inline-flex; gap:5px; align-items:center; }
footer.nb .foot-links .foot-bfly { height:0.92em; width:auto; display:inline-block; }
footer.nb .foot-links .foot-appt .foot-dot { color:var(--nb-grey); }
footer.nb .foot-links .foot-appt .foot-hint { font-style:italic; color:var(--nb-grey); opacity:0.7; }
footer.nb .foot-links .foot-appt .foot-hint.is-back { color:#328bdd; opacity:1; }

/* ---- footer butterfly: hover the footer and it takes flight, following the
   cursor; hover its home spot to land it (desktop only — hidden on mobile) ---- */
.fly-bfly { position:fixed; left:0; top:0; width:64px; height:auto; pointer-events:none; z-index:100000; opacity:0; will-change:transform,opacity; transform-origin:center center; transition:opacity .7s var(--ease); }
.fly-bfly.live { opacity:1; }
@media (max-width:820px){ .fly-bfly { display:none; } }