/* ============================================================
   NEW BRAND — Instagram Studio
   Theme: "prints dumped on the floor". A scattered collage of the
   Grind & Hustle board sits behind everything, dimmed and blurred
   just enough that the UI stays readable on top of it.

   Loads AFTER thewatercheck.css and re-tints it, so this hub keeps
   inheriting any layout fix the Water Check hub gets.
   ============================================================ */
:root {
  --twc-navy:  #0b0b0d;   /* concrete floor            */
  --twc-blue:  #d8412f;   /* grind red                 */
  --twc-cyan:  #ff6a45;   /* hot accent                */
  --twc-ice:   #d8d4cd;   /* body copy                 */
  --twc-white: #fbf9f6;   /* headings                  */
  --twc-line:  rgba(240, 230, 220, 0.16);
  --twc-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

/* ---------- the floor ---------- */
body { background: #0b0b0d; }

.nb-floor {
  position: fixed;
  inset: -6% -4%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* concrete underneath the prints */
  background:
    radial-gradient(circle at 50% 18%, #22201e 0%, #0b0b0d 68%),
    #0b0b0d;
}
.nb-floor i {
  position: absolute;
  display: block;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 18px 34px rgba(0,0,0,.62),
    0 3px 8px rgba(0,0,0,.5);
  filter: saturate(.72) contrast(1.04) brightness(.72);
}
/* haze so the UI always wins */
.nb-floor::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(11,11,13,.34) 0%, rgba(11,11,13,.86) 58%, rgba(11,11,13,.97) 100%);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
/* everything the hub renders sits above the floor */
.twc-app, .twc-auth-check { position: relative; z-index: 1; }

/* ---------- grind typography ---------- */
.twc-hero h1 { letter-spacing: -.02em; }
.twc-hero h1 em { color: var(--twc-cyan); font-style: normal; }
.twc-eyebrow { letter-spacing: .16em; }

/* panels read as paper laid on the concrete */
.twc-radar-column, .twc-calendar-panel, .twc-drop {
  background: rgba(20, 19, 18, .82);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-color: var(--twc-line);
}

/* the placeholder logo is a square stand-in — calm it down */
.twc-hero-logo img { border-radius: 10px; opacity: .9; filter: grayscale(.25); }
.twc-brand-mark img { border-radius: 6px; }

/* SCAFFOLD banner — delete this block once the IG account is connected */
.twc-hero-copy::before {
  content: "SCAFFOLD — no Instagram account connected yet";
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  border: 1px dashed var(--twc-cyan);
  border-radius: 999px;
  font: 600 11px/1.2 "DM Sans", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--twc-cyan);
  background: rgba(255, 106, 69, .1);
}

@media (prefers-reduced-motion: no-preference) {
  .nb-floor i { transition: transform .5s ease; }
}
@media (max-width: 700px) {
  .nb-floor i { width: 118px !important; }
}

/* ---------- scatter (generated, fixed seed) ---------- */
.nb-floor i:nth-child(1){left:24.7%;top:18.7%;width:220px;transform:rotate(-5.5deg);z-index:19;opacity:0.89;background-image:url("assets/brands/newbrand/collage/g01.jpg")}
.nb-floor i:nth-child(2){left:36.2%;top:9.9%;width:240px;transform:rotate(-1.0deg);z-index:29;opacity:0.89;background-image:url("assets/brands/newbrand/collage/g02.jpg")}
.nb-floor i:nth-child(3){left:-8.0%;top:77.0%;width:260px;transform:rotate(1.3deg);z-index:13;opacity:0.87;background-image:url("assets/brands/newbrand/collage/g03.jpg")}
.nb-floor i:nth-child(4){left:5.5%;top:33.3%;width:260px;transform:rotate(2.7deg);z-index:18;opacity:0.92;background-image:url("assets/brands/newbrand/collage/g04.jpg")}
.nb-floor i:nth-child(5){left:64.9%;top:52.7%;width:220px;transform:rotate(-8.5deg);z-index:30;opacity:0.86;background-image:url("assets/brands/newbrand/collage/g05.jpg")}
.nb-floor i:nth-child(6){left:21.4%;top:70.1%;width:240px;transform:rotate(11.4deg);z-index:16;opacity:0.81;background-image:url("assets/brands/newbrand/collage/g06.jpg")}
.nb-floor i:nth-child(7){left:48.9%;top:76.5%;width:240px;transform:rotate(-16.0deg);z-index:11;opacity:0.84;background-image:url("assets/brands/newbrand/collage/g07.jpg")}
.nb-floor i:nth-child(8){left:76.5%;top:75.3%;width:200px;transform:rotate(-4.3deg);z-index:15;opacity:0.89;background-image:url("assets/brands/newbrand/collage/g08.jpg")}
.nb-floor i:nth-child(9){left:70.7%;top:77.0%;width:260px;transform:rotate(18.0deg);z-index:29;opacity:0.9;background-image:url("assets/brands/newbrand/collage/g09.jpg")}
.nb-floor i:nth-child(10){left:7.9%;top:78.7%;width:200px;transform:rotate(-4.9deg);z-index:3;opacity:0.76;background-image:url("assets/brands/newbrand/collage/g10.jpg")}
.nb-floor i:nth-child(11){left:51.8%;top:51.0%;width:220px;transform:rotate(17.3deg);z-index:14;opacity:0.76;background-image:url("assets/brands/newbrand/collage/g11.jpg")}
.nb-floor i:nth-child(12){left:38.4%;top:35.5%;width:260px;transform:rotate(7.6deg);z-index:16;opacity:0.8;background-image:url("assets/brands/newbrand/collage/g12.jpg")}
.nb-floor i:nth-child(13){left:37.2%;top:58.0%;width:220px;transform:rotate(-2.2deg);z-index:27;opacity:0.92;background-image:url("assets/brands/newbrand/collage/g13.jpg")}
.nb-floor i:nth-child(14){left:84.3%;top:35.9%;width:200px;transform:rotate(-3.5deg);z-index:35;opacity:0.8;background-image:url("assets/brands/newbrand/collage/g14.jpg")}
.nb-floor i:nth-child(15){left:79.9%;top:56.7%;width:260px;transform:rotate(2.3deg);z-index:4;opacity:0.92;background-image:url("assets/brands/newbrand/collage/g15.jpg")}
.nb-floor i:nth-child(16){left:20.0%;top:-4.7%;width:260px;transform:rotate(-6.7deg);z-index:28;opacity:0.79;background-image:url("assets/brands/newbrand/collage/g16.jpg")}
.nb-floor i:nth-child(17){left:41.9%;top:-10.2%;width:260px;transform:rotate(2.5deg);z-index:8;opacity:0.79;background-image:url("assets/brands/newbrand/collage/g17.jpg")}
.nb-floor i:nth-child(18){left:-4.5%;top:53.7%;width:220px;transform:rotate(-2.0deg);z-index:1;opacity:0.81;background-image:url("assets/brands/newbrand/collage/g18.jpg")}
.nb-floor i:nth-child(19){left:5.0%;top:58.6%;width:240px;transform:rotate(10.0deg);z-index:14;opacity:0.91;background-image:url("assets/brands/newbrand/collage/g19.jpg")}
.nb-floor i:nth-child(20){left:33.6%;top:75.5%;width:180px;transform:rotate(9.8deg);z-index:27;opacity:0.89;background-image:url("assets/brands/newbrand/collage/g20.jpg")}
.nb-floor i:nth-child(21){left:-5.2%;top:15.9%;width:260px;transform:rotate(1.6deg);z-index:12;opacity:0.86;background-image:url("assets/brands/newbrand/collage/g21.jpg")}
.nb-floor i:nth-child(22){left:-6.8%;top:-2.0%;width:180px;transform:rotate(-16.5deg);z-index:32;opacity:0.82;background-image:url("assets/brands/newbrand/collage/g22.jpg")}
.nb-floor i:nth-child(23){left:-9.3%;top:33.6%;width:220px;transform:rotate(-3.5deg);z-index:27;opacity:0.82;background-image:url("assets/brands/newbrand/collage/g23.jpg")}
.nb-floor i:nth-child(24){left:7.5%;top:18.6%;width:240px;transform:rotate(-6.3deg);z-index:3;opacity:0.83;background-image:url("assets/brands/newbrand/collage/g24.jpg")}
.nb-floor i:nth-child(25){left:83.6%;top:-6.2%;width:220px;transform:rotate(2.2deg);z-index:35;opacity:0.8;background-image:url("assets/brands/newbrand/collage/g01.jpg")}
.nb-floor i:nth-child(26){left:19.9%;top:51.2%;width:200px;transform:rotate(-9.4deg);z-index:33;opacity:0.82;background-image:url("assets/brands/newbrand/collage/g02.jpg")}
.nb-floor i:nth-child(27){left:53.2%;top:-1.1%;width:240px;transform:rotate(-8.9deg);z-index:1;opacity:0.93;background-image:url("assets/brands/newbrand/collage/g03.jpg")}
.nb-floor i:nth-child(28){left:50.0%;top:17.5%;width:260px;transform:rotate(-10.1deg);z-index:31;opacity:0.75;background-image:url("assets/brands/newbrand/collage/g04.jpg")}
.nb-floor i:nth-child(29){left:26.3%;top:31.8%;width:200px;transform:rotate(-5.5deg);z-index:6;opacity:0.78;background-image:url("assets/brands/newbrand/collage/g05.jpg")}
.nb-floor i:nth-child(30){left:66.5%;top:15.1%;width:180px;transform:rotate(-5.6deg);z-index:11;opacity:0.75;background-image:url("assets/brands/newbrand/collage/g06.jpg")}
.nb-floor i:nth-child(31){left:77.3%;top:16.5%;width:200px;transform:rotate(19.4deg);z-index:9;opacity:0.95;background-image:url("assets/brands/newbrand/collage/g07.jpg")}
.nb-floor i:nth-child(32){left:64.6%;top:38.0%;width:180px;transform:rotate(-8.2deg);z-index:3;opacity:0.87;background-image:url("assets/brands/newbrand/collage/g08.jpg")}
.nb-floor i:nth-child(33){left:10.1%;top:-7.7%;width:180px;transform:rotate(-14.6deg);z-index:11;opacity:0.93;background-image:url("assets/brands/newbrand/collage/g09.jpg")}
.nb-floor i:nth-child(34){left:63.8%;top:-6.7%;width:260px;transform:rotate(-7.3deg);z-index:15;opacity:0.86;background-image:url("assets/brands/newbrand/collage/g10.jpg")}
.nb-floor i:nth-child(35){left:55.4%;top:33.4%;width:200px;transform:rotate(-5.5deg);z-index:36;opacity:0.94;background-image:url("assets/brands/newbrand/collage/g11.jpg")}
.nb-floor i:nth-child(36){left:21.9%;top:17.9%;width:200px;transform:rotate(19.3deg);z-index:23;opacity:0.82;background-image:url("assets/brands/newbrand/collage/g12.jpg")}

/* ============================================================
   BLACKOUT + CHANGA ONE
   thewatercheck.css hardcodes a lot of cyan/navy that the CSS
   variables don't reach, so these override the actual components.
   ============================================================ */
@font-face {
  font-family: "Changa One";
  src: url("assets/fonts/ChangaOne-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Changa One";
  src: url("assets/fonts/ChangaOne-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Display face on headings and controls; body copy stays DM Sans so
   long paragraphs remain readable — Changa One is a poster face. */
.twc-app h1, .twc-app h2, .twc-app h3, .twc-app h4,
.twc-brand-copy strong,
.twc-eyebrow, .twc-calendar-kicker,
.twc-tool-button, .twc-verse-button, .twc-queue-submit,
.twc-studio-connect, .twc-reset-button, .twc-drop-repo,
.twc-column-icon, .twc-calendar-empty h3 {
  font-family: "Changa One", Impact, system-ui, sans-serif !important;
  font-weight: 400 !important;
}
.twc-app h1 { letter-spacing: .005em; line-height: 1.02; }
.twc-eyebrow, .twc-calendar-kicker { letter-spacing: .14em; }

/* ---------- top bar ---------- */
.twc-topbar {
  background: rgba(9, 9, 11, .9);
  border-bottom: 1px solid rgba(240, 230, 220, .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.twc-brand-copy small { color: #8f8a83; }
.twc-brand-copy strong { color: var(--twc-white); }
.twc-back-button, .twc-tool-button {
  border-color: rgba(240, 230, 220, .2) !important;
  background: rgba(24, 22, 21, .8) !important;
  color: #ded8d0 !important;
}
.twc-back-button:hover, .twc-tool-button:hover {
  border-color: var(--twc-cyan) !important;
  background: rgba(216, 65, 47, .18) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- hero ---------- */
.twc-hero { background: transparent; border-color: rgba(240,230,220,.12); }
.twc-hero h1 { color: var(--twc-white); }
.twc-hero h1 em { color: var(--twc-cyan); font-style: normal; }
.twc-intro, .twc-calendar-intro, .twc-drop-copy { color: #b8b2aa; }
.twc-eyebrow { color: var(--twc-cyan); }
.twc-verse-button {
  border: 1px solid rgba(216, 65, 47, .6) !important;
  background: rgba(216, 65, 47, .14) !important;
  color: #ffb9a5 !important;
}
.twc-verse-button:hover { background: rgba(216,65,47,.28) !important; color:#fff !important; }

/* ---------- radar + panels ---------- */
.twc-radar-column, .twc-calendar-panel, .twc-drop, .twc-queue, .twc-notice {
  background: rgba(17, 16, 15, .86) !important;
  border-color: rgba(240, 230, 220, .14) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.twc-column-icon { color: var(--twc-cyan) !important; background: rgba(216,65,47,.14) !important; }
.twc-column-heading p { color: #8f8a83; }
.twc-column-heading h3, .twc-section-heading h2 { color: var(--twc-white); }

.twc-radar-tile {
  background: rgba(28, 26, 25, .88) !important;
  border-color: rgba(240, 230, 220, .13) !important;
  color: #ded8d0 !important;
}
.twc-radar-tile:hover {
  border-color: var(--twc-cyan) !important;
  background: rgba(216, 65, 47, .14) !important;
  transform: translateY(-2px);
}
.twc-tile-icon { color: var(--twc-cyan) !important; }
.twc-tile-copy strong { color: var(--twc-white) !important; }
.twc-tile-copy small, .twc-tile-status span { color: #8f8a83 !important; }
.twc-tile-status b { color: #ffb9a5 !important; }

/* ---------- publisher status + calendar ---------- */
.twc-studio-status {
  background: rgba(28, 26, 25, .88) !important;
  border-color: rgba(240, 230, 220, .14) !important;
}
.twc-studio-copy strong { color: var(--twc-white); }
.twc-studio-copy p { color: #8f8a83; }
.twc-studio-dot { background: var(--twc-cyan) !important; box-shadow: 0 0 12px rgba(255,106,69,.7) !important; }
.twc-studio-connect, .twc-queue-submit, .twc-drop-link {
  border: 1px solid var(--twc-cyan) !important;
  background: linear-gradient(135deg, #e2523a, #b8311f) !important;
  color: #fff !important;
}
.twc-studio-connect:hover, .twc-queue-submit:hover, .twc-drop-link:hover {
  background: linear-gradient(135deg, #ff6a45, #d8412f) !important;
  box-shadow: 0 0 20px rgba(255,106,69,.4) !important;
}
.twc-drop-repo { color: #ffb9a5 !important; }
.twc-queue-hint, .twc-calendar-loading { color: #8f8a83 !important; }
.twc-queue-field span, .twc-queue-details summary { color: #b8b2aa !important; }
.twc-queue-field input, .twc-queue-field textarea, .twc-queue-file {
  background: #131211 !important;
  border-color: rgba(240,230,220,.18) !important;
  color: #ede8e2 !important;
}
.twc-queue-field input:focus, .twc-queue-field textarea:focus {
  border-color: var(--twc-cyan) !important;
  box-shadow: 0 0 0 3px rgba(255,106,69,.18) !important;
}
.twc-calendar, .twc-calendar-empty {
  background: transparent !important;
  color: #b8b2aa !important;
}
.twc-calendar-empty h3 { color: var(--twc-white) !important; }
.twc-calendar-empty-icon { color: var(--twc-cyan) !important; }
.twc-calendar-retry, .twc-reset-button {
  border: 1px solid rgba(240,230,220,.24) !important;
  background: rgba(28,26,25,.9) !important;
  color: #ded8d0 !important;
}
.twc-calendar-retry:hover, .twc-reset-button:hover {
  border-color: var(--twc-cyan) !important;
  background: rgba(216,65,47,.18) !important;
  color: #fff !important;
}
code { background: rgba(255,106,69,.14) !important; color: #ffb9a5 !important; }