/* ==========================================================================
   PROJECT PAGE (/after-hours/project/?p=…) — night theme, with each
   project's own colour (--bg) on the hero band.
   ========================================================================== */
.topbar .home .back { display: inline-block; width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.topbar .home:hover .back { transform: translateX(-4px); }

/* While a light hero band is behind the top bar, switch the bar to dark ink */
body.on-light .topbar { color: #16181B; }
body.on-light .topbar .btn.solid { background: #16181B; color: #F6F4EE; }

/* ---------- Hero band ---------- */
.p-hero { background: linear-gradient(180deg, var(--bg) 0, var(--bg) calc(100% - 22vw), var(--night-bg) calc(100% - 22vw)); padding-top: 132px; color: var(--night-ink); }
.p-hero.tone-light { color: #16181B; }
.p-head { padding-bottom: clamp(34px, 4vw, 56px); }
.p-eye { display: flex; align-items: center; gap: 14px; opacity: .8; }
.p-hero .tag { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.p-hero .tag.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3DCB86; box-shadow: 0 0 8px #3DCB86; }
.p-title { font-size: clamp(64px, 12vw, 200px); line-height: .88; letter-spacing: -.03em; margin: 22px 0 14px -.04em; }
.p-sub { font-size: clamp(18px, 1.6vw, 22px); opacity: .78; }
.p-cover { border-radius: 16px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); background: var(--night-raise); }
.p-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform-origin: 50% 50%; transform: scale(1.09); will-change: transform; }

/* ---------- Intro ---------- */
.p-intro { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: clamp(28px, 6vw, 96px); padding-block: clamp(60px, 8vw, 120px) clamp(30px, 4vw, 60px); }
.lead { font-size: clamp(21px, 2vw, 30px); line-height: 1.38; letter-spacing: -.012em; color: var(--night-ink); }
.p-facts { border-top: 1px solid var(--night-line); }
.p-facts div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--night-line); }
.p-facts dt { color: var(--night-ink-3); font-size: 10.5px; padding-top: 3px; }
.p-facts dd { margin: 0; font-size: 15px; color: var(--night-ink); }
.p-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- Blocks ---------- */
.b { margin-block: clamp(48px, 6vw, 96px); }
.b-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 5vw, 80px); }
.b-text h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; letter-spacing: -.015em; max-width: 14ch; }
.b-text p { font-size: 18px; line-height: 1.6; color: #CFCAD8; max-width: 60ch; }
.b-text p + p { margin-top: 14px; }
.b-list { margin-top: 18px; border-top: 1px solid var(--night-line); }
.b-list li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--night-line); font-size: 17px; color: var(--night-ink); transition: padding-left .5s var(--ease-out), color .3s; }
.b-list li .mono { color: var(--moon); padding-top: 4px; }
.b-list li:hover { padding-left: 8px; }

.shot { position: relative; border-radius: 12px; overflow: hidden; background: var(--night-raise); }
.shot img, .shot video { width: 100%; height: auto; }
@media (min-width: 700px) { .shot img[data-zoom] { cursor: zoom-in; } }
figcaption.mono { margin-top: 12px; color: var(--night-ink-3); text-transform: none; letter-spacing: 0; font-size: 12px; }
.fit-mid .wrap { max-width: 1080px; }
.fit-full { margin-block: 0; }
.fit-full .shot { border-radius: 0; }
.fit-full + .fit-full { margin-top: 0; }
.b-img.pad .shot { background: var(--pad-bg); padding: clamp(24px, 6vw, 90px); display: grid; place-items: center; }
.b-img.pad .shot img { max-width: 760px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.4)); }

.frame-browser { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px -30px rgba(0,0,0,.65); }
.frame-browser .bar { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #ECEAE6; border-bottom: 1px solid rgba(0,0,0,.08); }
.frame-browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #CFCBC3; }
.vid .vbtn { position: absolute; right: 14px; bottom: 14px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(13,12,17,.6); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10.5px; opacity: 0; transition: opacity .3s; }
.vid .vbtn { visibility: hidden; }
.vid.ready .vbtn { visibility: visible; }
.vid:hover .vbtn, .vid .vbtn:focus-visible { opacity: 1; }
@media (hover: none) { .vid .vbtn { opacity: 1; min-height: 44px; } }

.b-grid { display: grid; gap: clamp(14px, 2vw, 28px); }
.b-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-grid figure { min-width: 0; }

/* Phones rail */
.ph-h { display: flex; justify-content: space-between; align-items: baseline; color: var(--night-ink); margin-bottom: 22px; font-size: 12px; }
.ph-h span { color: var(--night-ink-3); }
.rail { --rp: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); scroll-padding-inline: var(--rp); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; padding-bottom: 8px; scroll-snap-type: x proximity; }
.rail::-webkit-scrollbar { display: none; }
.rail.drag { cursor: grabbing; scroll-snap-type: none; }
.rail.drag img { pointer-events: none; }
.rail-in { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: var(--rp); width: max-content; }
.phone-f { width: clamp(220px, 21vw, 300px); flex: none; scroll-snap-align: start; }
.phone { border-radius: 44px; padding: 9px; background: #050507; border: 1px solid #2E2A38; box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); transition: transform .6s var(--ease-out); }
.phone img { border-radius: 36px; width: 100%; user-select: none; -webkit-user-drag: none; }
.phone-f:hover .phone { transform: translateY(-8px); }

.p-note { color: var(--night-ink-3); text-transform: none; letter-spacing: 0; font-size: 12px; padding-block: 10px 0; max-width: 80ch; }

/* ---------- Next project ---------- */
.p-next { position: relative; display: block; margin-top: clamp(80px, 10vw, 150px); overflow: hidden; background: var(--bg); color: #fff; isolation: isolate; }
.p-next::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,9,14,.86), rgba(10,9,14,.35) 70%); }
.p-next-img { position: absolute; inset: 0; }
.p-next-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
.p-next:hover .p-next-img img { transform: scale(1); }
.p-next-in { position: relative; z-index: 2; display: grid; gap: 10px; padding-block: clamp(70px, 10vw, 150px); }
.p-next-in .mono { opacity: .7; }
.p-next-t { display: inline-flex; align-items: center; gap: .3em; font-size: clamp(48px, 7vw, 110px); line-height: .95; letter-spacing: -.02em; }
.p-next-t i { display: inline-block; width: .5em; height: .5em; transition: transform .6s var(--ease-out); }
.p-next:hover .p-next-t i { transform: translateX(.18em); }
.p-next-s { font-size: 17px; opacity: .8; }

.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 26px 34px; color: var(--night-ink-3); }
.back-day { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--night-ink-2); }
.back-day i { display: inline-block; width: 16px; height: 16px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 4vmin; background: rgba(8,7,11,.94); opacity: 0; transition: opacity .35s; cursor: zoom-out; }
.lightbox.on { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox .close { position: absolute; top: 18px; right: 18px; color: #fff; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .p-intro, .b-text { grid-template-columns: 1fr; }
  .b-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-hero { background: linear-gradient(180deg, var(--bg) 0, var(--bg) calc(100% - 28vw), var(--night-bg) calc(100% - 28vw)); padding-top: 108px; }
}
@media (max-width: 560px) {
  .b-grid.cols-2, .b-grid.cols-3 { grid-template-columns: 1fr; }
  .phone-f { width: 64vw; }
  .phone { border-radius: 34px; padding: 7px; }
  .phone img { border-radius: 28px; }
  .frame-browser .bar { height: 20px; padding: 0 9px; gap: 5px; }
  .frame-browser .bar i { width: 7px; height: 7px; }
  .p-cover { border-radius: 10px; }
}

/* The lightbox must be fully gone when closed (CSS display would otherwise override [hidden]) */
.lightbox[hidden] { display: none !important; }

/* ---------- Compare block: today's apps vs this design ---------- */
.b-compare { display: grid; gap: clamp(22px, 3vw, 40px); }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 5vw, 80px); align-items: end; }
.cmp-head h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; letter-spacing: -.015em; max-width: 16ch; }
.cmp-head p { font-size: 18px; line-height: 1.6; color: #CFCAD8; max-width: 60ch; }
.cmp { border-top: 1px solid var(--night-line); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--night-line); }
.cmp-row > * { padding: 18px clamp(14px, 2vw, 28px) 20px 0; }
.cmp-row > :last-child { padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--night-line); background: color-mix(in srgb, var(--accent, var(--moon)) 9%, transparent); }
.cmp-labels > * { padding-block: 12px; color: var(--night-ink-3); }
.cmp-labels > :last-child { color: color-mix(in srgb, var(--accent, var(--moon)) 45%, #fff); }
.cmp-l { display: grid; grid-template-columns: 34px 1fr; gap: 6px; color: var(--night-ink-2); font-size: 16px; line-height: 1.55; }
.cmp-l .n { color: var(--night-ink-3); padding-top: 4px; }
.cmp-r p { color: var(--night-ink); font-size: 16px; line-height: 1.55; }
@media (max-width: 860px) {
  .cmp-head { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1fr; }
  .cmp-labels { display: none; }
  .cmp-row > * { padding-right: 0; }
  .cmp-row > :first-child { padding-bottom: 8px; }
  .cmp-row > :last-child { border-left: 0; padding: 12px 14px 16px; margin: 0 0 16px; border-radius: 10px; }
  .cmp-l p::before { content: "Today: "; color: var(--night-ink-3); }
  .cmp-r p::before { content: "Here: "; color: color-mix(in srgb, var(--accent, var(--moon)) 45%, #fff); font-weight: 600; }
}