/* ==========================================================================
   4BIT DIGITAL STUDIO â€” pages.css
   Everything the original three-page site did not need: the About, Journal
   and 404 layouts, plus the components they introduced. The team directory,
   the member profile and the member card live in team.css, which only the
   pages that use them load.
   Loaded after sections.css.
   ========================================================================== */

/* ==========================================================================
   EFFECT TOGGLES
   Settings â†’ Appearance writes these classes onto <html>, so switching an
   effect off costs nothing at runtime.
   ========================================================================== */
.no-cursor .cursor { display: none !important; }
.no-aurora .bg-aurora { display: none; }
.no-grain .bg-noise { display: none; }
.no-ticker .ticker { display: none; }
.no-hero-canvas .hero__canvas { display: none; }
.no-reveal [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-reveal .word > span { transform: none !important; opacity: 1 !important; }

/* ==========================================================================
   ADMIN BAR â€” only ever rendered for a signed-in user
   ========================================================================== */
.adminbar {
  position: relative;
  z-index: 120;
  background: linear-gradient(90deg, rgba(var(--brand-rgb, 238 46 92), .16), rgba(0,0,0,.4));
  border-bottom: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.adminbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  max-width: var(--container);
  margin-inline: auto;
  padding: .45rem var(--pad-x);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--text-soft);
}
.adminbar__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #21D07A;
  flex: none;
}
.adminbar__who b { color: var(--text); font-weight: 600; }
.adminbar__links { margin-left: auto; display: flex; gap: .9rem; }
.adminbar__links a { color: var(--brand-2); transition: color var(--d-fast); }
.adminbar__links a:hover { color: var(--text); }

@media (max-width: 520px) {
  .adminbar__who { display: none; }
  .adminbar__links { margin-left: 0; }
}

/* ==========================================================================
   PAGE HERO â€” shared by About, Team, Journal, custom pages
   ========================================================================== */
.phero {
  position: relative;
  padding-block: clamp(6rem, 4rem + 10vw, 11rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  overflow: hidden;
}
.phero--tight { padding-block: clamp(5.5rem, 4rem + 8vw, 9rem) clamp(2rem, 1rem + 3vw, 3.5rem); }

.phero__glow {
  position: absolute;
  top: -30%; left: 50%;
  translate: -50% 0;
  width: min(1100px, 130vw);
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(var(--brand-rgb, 238 46 92), .2), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}

.phero__inner { position: relative; z-index: 2; display: grid; gap: 1.35rem; justify-items: start; }

.phero__title {
  font-size: var(--t-2xl);
  max-width: 20ch;
}

.phero__lede {
  color: var(--text-soft);
  font-size: var(--t-md);
  line-height: 1.65;
  max-width: 58ch;
}

.phero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 720px) { .phero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   ABOUT â€” story
   ========================================================================== */
.story {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

.story__media { position: relative; }

.story__img,
.story__art {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  object-fit: cover;
  border: 1px solid var(--glass-brd);
}
@media (max-width: 900px) { .story__img, .story__art { aspect-ratio: 16 / 10; } }

.story__art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(var(--brand-rgb, 238 46 92), .35), transparent 60%),
    linear-gradient(160deg, var(--ink-2), var(--ink-0));
}
.story__art-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
}
.story__art-mark {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(180px, 45%);
  aspect-ratio: 1;
}
.story__art-mark i {
  grid-column: calc(var(--bx) + 1);
  grid-row: calc(var(--by) + 1);
  border-radius: 10px;
  background: var(--brand-grad);
  box-shadow: 0 12px 40px -10px rgba(var(--brand-rgb, 238 46 92), .9);
}

.story__body { display: grid; gap: 1rem; justify-items: start; }
.story__text { color: var(--text-soft); font-size: var(--t-base); line-height: 1.75; display: grid; gap: 1rem; }
.story__text p { max-width: 62ch; }

/* ==========================================================================
   ABOUT â€” values
   ========================================================================== */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}
.card--value .card__body { gap: .75rem; }

/* ==========================================================================
   ABOUT â€” timeline
   ========================================================================== */
.timeline { display: grid; gap: var(--gap); counter-reset: tl; }

.tl {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1.1rem;
}
@media (max-width: 560px) { .tl { grid-template-columns: 1fr; } .tl__rail { display: none; } }

.tl__rail { position: relative; display: grid; justify-items: center; }
.tl__rail::before {
  content: "";
  position: absolute;
  top: 26px; bottom: -1.6rem;
  width: 1px;
  background: linear-gradient(rgba(255,255,255,.16), transparent);
}
.tl:last-child .tl__rail::before { display: none; }
.tl__rail span {
  width: 13px; height: 13px;
  margin-top: 20px;
  border-radius: 4px;
  background: var(--brand-grad);
  box-shadow: 0 0 0 5px rgba(var(--brand-rgb, 238 46 92), .12);
}

.tl__body { padding: clamp(1.3rem, 3vw, 1.9rem); border-radius: var(--r-md); }
.tl__year {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--brand-2);
}
.tl__title { font-size: var(--t-lg); margin: .4rem 0 .55rem; }
.tl__text { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.7; max-width: 66ch; }

/* ==========================================================================
   ABOUT â€” capabilities
   ========================================================================== */
.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}
.caps__group { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); }
.caps__title {
  font-size: var(--t-md);
  padding-bottom: .9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.caps__list { display: grid; gap: .6rem; }
.caps__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.caps__list svg {
  width: 15px; height: 15px;
  flex: none;
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.blog-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filters--links { margin-bottom: 0; }
.filters--links .filter { text-decoration: none; }

.blog-search { position: relative; flex: 0 1 260px; min-width: 200px; }
.blog-search__icon {
  position: absolute;
  left: .85rem; top: 50%;
  translate: 0 -50%;
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--text-mute);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.blog-search input {
  width: 100%;
  padding: .7rem .9rem .7rem 2.4rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  font-size: var(--t-sm);
  transition: box-shadow var(--d-fast), background-color var(--d-fast);
}
.blog-search input:focus {
  outline: none;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb, 238 46 92), .5) inset;
}
.blog-search input::-webkit-search-cancel-button { filter: invert(.6); }

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.posts--teaser { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.post { position: relative; }
.post__link { display: grid; gap: 1rem; align-content: start; }

.post__art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  background: linear-gradient(155deg, var(--a1, rgba(245,69,58,.45)), var(--a2, rgba(20,24,40,.96)));
  transition: transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out), border-color var(--d-mid);
}
.post__art[data-art="1"] { --a1: rgba(245,69,58,.55);  --a2: rgba(28,16,30,.96); }
.post__art[data-art="2"] { --a1: rgba(40,90,200,.5);   --a2: rgba(14,18,36,.96); }
.post__art[data-art="3"] { --a1: rgba(255,120,40,.5);  --a2: rgba(32,18,20,.96); }
.post__art[data-art="4"] { --a1: rgba(40,190,160,.45); --a2: rgba(12,26,32,.96); }
.post__art[data-art="5"] { --a1: rgba(150,60,220,.5);  --a2: rgba(20,14,36,.96); }
.post__art[data-art="6"] { --a1: rgba(234,42,128,.55); --a2: rgba(26,14,28,.96); }

.post__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.post__link:hover .post__art {
  transform: translateY(-5px);
  border-color: var(--glass-brd-hi);
  box-shadow: 0 26px 60px -26px rgba(var(--brand-rgb, 238 46 92), .75);
}
.post__link:hover .post__art img { transform: scale(1.06); }

.post__art-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 75%);
}

.post__cat {
  position: absolute;
  left: .8rem; top: .8rem;
  padding: .32em .8em;
  border-radius: var(--r-pill);
  background: rgba(5,7,12,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
  font-family: var(--f-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}

.post__body { display: grid; gap: .55rem; }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--text-mute);
}
.post__title { font-size: var(--t-md); line-height: 1.25; transition: color var(--d-fast); }
.post__link:hover .post__title { color: var(--brand-2); }
.post__excerpt { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.65; }
.post__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .2rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.post__more svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--d-fast) var(--e-out);
}
.post__link:hover .post__more svg { transform: translate(3px, -3px); }

/* ---- Pager -------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pager__btn {
  padding: .7rem 1.4rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset;
  font-size: var(--t-sm);
  transition: all var(--d-fast) var(--e-out);
}
.pager__btn:hover { color: #fff; background: var(--brand-grad); box-shadow: 0 10px 26px -12px rgba(var(--brand-rgb, 238 46 92), .9); }
.pager__count { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-mute); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article__head {
  position: relative;
  padding-block: clamp(6rem, 4rem + 9vw, 10rem) clamp(1.5rem, 1rem + 3vw, 3rem);
  overflow: hidden;
}
.article__head-inner { position: relative; z-index: 2; display: grid; gap: 1rem; justify-items: start; max-width: 46rem; }

.article__draft {
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255,183,77,.14);
  box-shadow: 0 0 0 1px rgba(255,183,77,.35) inset;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: #FFB74D;
}

.article__crumbs {
  display: flex;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.article__crumbs a { transition: color var(--d-fast); }
.article__crumbs a:hover { color: var(--brand-2); }

.article__title { font-size: var(--t-xl); max-width: 22ch; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--text-mute);
}

.article__cover {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.article__body {
  max-width: 46rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--text-soft);
  font-size: var(--t-md);
  line-height: 1.85;
}
.article__body p + p { margin-top: 1.35em; }
.article__body strong { color: var(--text); font-weight: 600; }
.article__body a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 3px; }
.article__body code {
  padding: .12em .45em;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  font-family: var(--f-mono);
  font-size: .88em;
  color: var(--text);
}

.article__lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -.015em;
  padding-bottom: .6em;
}

.article__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  max-width: 46rem;
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(255,255,255,.08);
}

.doc__updated {
  max-width: 46rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
}

/* ==========================================================================
   CTA PANEL
   ========================================================================== */
.section--cta { padding-bottom: clamp(4rem, 8vw, 8rem); }

.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.8rem, 4vw, 3.4rem);
}
.cta-panel__body { display: grid; gap: .7rem; justify-items: start; max-width: 46ch; }
.cta-panel__title { font-family: var(--f-display); font-size: var(--t-xl); letter-spacing: -.035em; line-height: 1.08; }
.cta-panel__text { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.7; }

@media (max-width: 640px) {
  .cta-panel { flex-direction: column; align-items: stretch; }
  .cta-panel .btn { justify-content: center; }
}

/* ==========================================================================
   SHARED SMALL BITS
   ========================================================================== */
.section__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}

.empty-note {
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-lg);
  border: 1px dashed rgba(255,255,255,.12);
  text-align: center;
  color: var(--text-mute);
  font-size: var(--t-sm);
}

/* Work cards that use a real screenshot rather than generated art */
.work__art--img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.work__art--img::before { display: none; }
.work:hover .work__art--img img { transform: scale(1.06); }

/* Testimonial avatars */
.quote figcaption { flex-direction: row; align-items: center; gap: .75rem; }
.quote__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--glass-brd); }
.quote__who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
/* grid-template-columns is explicit (not the auto default) so the column
   can shrink to the footer's narrow "Get in touch" width instead of
   sizing to the row's max-content and bleeding past its edge. */
.subscribe { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: .3rem; }
.subscribe__row {
  display: flex;
  gap: .4rem;
  padding: .3rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: box-shadow var(--d-fast);
}
.subscribe__row:focus-within { box-shadow: 0 0 0 1px rgba(var(--brand-rgb, 238 46 92), .55) inset; }
.subscribe__row input {
  flex: 1;
  min-width: 0;
  padding: .5rem .9rem;
  font-size: var(--t-sm);
  color: var(--text);
}
.subscribe__row input:focus { outline: none; }
.subscribe__row input::placeholder { color: var(--text-dim); }
.subscribe__row button {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-grad);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast);
}
.subscribe__row button:hover { transform: scale(1.06); box-shadow: 0 8px 22px -8px rgba(var(--brand-rgb, 238 46 92), .9); }
.subscribe__row button svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.subscribe__note { font-size: var(--t-xs); color: var(--text-dim); }
.subscribe__status { font-family: var(--f-mono); font-size: var(--t-xs); min-height: 1.2em; }
.subscribe__status.is-ok { color: #34D399; }
.subscribe__status.is-err { color: #FF6B7E; }

/* ==========================================================================
   404
   ========================================================================== */
.section--notfound { padding-block: clamp(7rem, 5rem + 10vw, 12rem); }

.notfound {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  text-align: center;
}
.notfound__mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 76px;
  aspect-ratio: 1;
  margin-bottom: .6rem;
}
.notfound__mark i {
  grid-column: calc(var(--bx) + 1);
  grid-row: calc(var(--by) + 1);
  border-radius: 7px;
  background: var(--brand-grad);
  animation: bitBlink 2.6s var(--e-out) infinite;
}
.notfound__mark i:nth-child(2) { animation-delay: .16s; }
.notfound__mark i:nth-child(3) { animation-delay: .32s; }
.notfound__mark i:nth-child(4) { animation-delay: .48s; }
@keyframes bitBlink { 0%, 100% { opacity: .25; transform: scale(.85); } 45% { opacity: 1; transform: none; } }

.notfound__title { font-size: var(--t-xl); max-width: 18ch; }
.notfound__text { color: var(--text-soft); max-width: 48ch; }
.notfound__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .notfound__mark i { animation: none; opacity: 1; transform: none; }
  .member-modal__panel, .member-modal__backdrop { animation: none; }
}

/* ==========================================================================
   TOUCH TARGETS
   Text links in the footer and mobile menu sit at their line height, which is
   fine for a mouse and too small for a thumb. Give them real vertical room on
   coarse pointers only, so the desktop rhythm is untouched.
   ========================================================================== */
@media (pointer: coarse), (max-width: 700px) {
  .footer__col ul li a,
  .footer__legal a,
  .mobile-menu__foot > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The list already has row gaps; collapse them so the taller rows do not
     stretch the footer out. */
  .footer__col ul { gap: 0; }

  .socials a { width: 44px; height: 44px; }
  .socials--sm a { width: 40px; height: 40px; }

  .subscribe__row button { width: 44px; height: 44px; }

  /* Filter pills and the journal pager are tapped a lot on phones. */
  .filter { min-height: 40px; }
  .pager__btn { min-height: 44px; display: inline-flex; align-items: center; }
}