/* ============================================================
   ADEPT — LOGO text variants
   The header logo is a text element styled via body[data-logo="…"].
   Default (no body attr) = A · lime-text.
   ============================================================ */

.logo-text {
  font: 700 40px/1 "Unbounded", "Onest", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lime);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity .2s ease;
}
.logo-text:hover { opacity: 0.78; }
.logo-text .l-ad,
.logo-text .l-ept { display: inline; }
@media (max-width: 720px) {
  .logo-text { font-size: 28px; }
}

/* B · ink-bold — Unbounded 800 in ink */
body[data-logo="ink-bold"] .logo-text {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* C · ink-text — Unbounded 500 in ink (lighter) */
body[data-logo="ink-text"] .logo-text {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* D · stamp-lime — lime block, ink letters */
body[data-logo="stamp-lime"] .logo-text {
  background: var(--lime);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
}
/* E · stamp-ink — ink block, white letters */
body[data-logo="stamp-ink"] .logo-text {
  background: var(--ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
}
/* F · mono — JetBrains Mono caps */
body[data-logo="mono"] .logo-text {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: 0.1em;
}
@media (max-width: 720px) {
  body[data-logo="mono"] .logo-text { font-size: 22px; }
}
/* G · wide — very wide tracking */
body[data-logo="wide"] .logo-text {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.32em;
  font-size: 32px;
}
@media (max-width: 720px) {
  body[data-logo="wide"] .logo-text { font-size: 22px; }
}
/* H · dot — bullet-prefixed */
body[data-logo="dot"] .logo-text { color: var(--ink); gap: 12px; }
body[data-logo="dot"] .logo-text::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--lime);
  border-radius: 50%;
  vertical-align: middle;
}
/* I · brackets — [ ADEPT ] */
body[data-logo="brackets"] .logo-text {
  color: var(--ink);
  font-weight: 500;
}
body[data-logo="brackets"] .logo-text::before { content: "[\00a0"; color: var(--lime); margin-right: 4px; }
body[data-logo="brackets"] .logo-text::after  { content: "\00a0]"; color: var(--lime); margin-left: 4px; }
/* J · split — AD lime, EPT ink */
body[data-logo="split"] .logo-text .l-ad  { color: var(--lime); }
body[data-logo="split"] .logo-text .l-ept { color: var(--ink); }


/* ============================================================
   ADEPT — mobile burger menu
   Hidden on desktop, takes over on ≤720px viewports.
   ============================================================ */
.header-burger {
  /* full reset — iOS Safari aggressively styles native <button> */
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: none;
  box-sizing: border-box;
  width: 36px; height: 32px;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 4px 0;
  margin: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;
  color: inherit;
  font: inherit;
}
.header-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #0b0b08;
  background-color: var(--ink);
  border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease, width .25s ease;
  transform-origin: center;
}
.header-burger span:nth-child(2) { width: 72%; align-self: flex-end; }

body.menu-open .header-burger span:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
}
body.menu-open .header-burger span:nth-child(2) {
  opacity: 0;
  width: 0;
}
body.menu-open .header-burger span:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
}

@media (max-width: 900px) {
  .header-burger {
    display: inline-flex;
    position: relative;
    z-index: 200; /* above the open menu overlay */
  }
  /* Hide the inline nav on mobile/tablet — burger toggles it */
  .header-nav {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px !important;
    z-index: 150;
    /* slide-in from the top, hidden by default */
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }
  body.menu-open .header-nav {
    transform: none;
    pointer-events: auto;
  }
  .header-nav a {
    font-size: 28px !important;
    letter-spacing: 0.02em;
  }
  body.menu-open { overflow: hidden; } /* lock background scroll */
}


/* ============================================================
   ADEPT — case card (.case) shared styles
   Used by /, /portfolio and the "next cases" block on /case.
   ============================================================ */

.case {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1a14;
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
  isolation: isolate;
  transition: transform .35s ease, box-shadow .25s ease;
  /* 1px black outline that hugs the rounded corners */
  box-shadow: 0 0 0 1px var(--ink, #0b0b08);
}
.case:hover { transform: translateY(-3px); }

.case .pic {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform .8s ease;
}
.case:hover .pic { transform: scale(1.04); }

.case .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0, var(--scrim-cases, 0.78)) 100%);
}

/* ===== drag-to-reorder (edit mode) ===== */
body.edit-mode .case[data-id] {
  cursor: move;
  /* the base .case has -webkit-user-drag: none for link-drag safety —
     override here so HTML5 drag-and-drop actually fires */
  -webkit-user-drag: element;
  user-select: none;
  -webkit-user-select: none;
}
body.edit-mode .case[data-id] * {
  /* inner elements (.pic, .scrim, .label, …) inherit the drag rule
     so dragging from the image area also initiates a drag */
  -webkit-user-drag: inherit;
}
body.edit-mode .case[data-id]:active {
  cursor: grabbing;
}
.case.dragging {
  opacity: 0.4;
  transform: scale(0.96) !important;
}
.case.drag-over {
  outline: 3px dashed var(--lime, #cfe430);
  outline-offset: -8px;
}
.case.drag-over::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(207, 228, 48, 0.12);
  z-index: 5;
  pointer-events: none;
}

/* Vimeo hover-preview (eagerly mounted by edit-mode.js on page load,
   paused via the SDK until hover) — sits inside .pic */
.case .pic .hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}
/* On hover (.is-playing toggled by JS) the iframe fades in, the
   poster image + scrim + label fade out — only the case-cta and
   any brand stamp stay visible over the video. */
.case.is-playing .pic .hover-video { opacity: 1; }
.case.is-playing .pic { background-image: none !important; }
.case.is-playing .scrim,
.case.is-playing .label {
  opacity: 0;
  transition: opacity .2s ease;
}
.case.is-playing::after { opacity: 0 !important; }

/* default label block: lime eyebrow above white Unbounded title */
.case .label {
  position: absolute; z-index: 3;
  left: 22px; right: 22px; bottom: 20px;
  color: #fff;
}
.case .label .eyebrow {
  color: var(--lime, #cfe430);
  display: block;
  margin-bottom: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.case .label .title {
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
@media (max-width: 720px) {
  .case .label .title { font-size: 18px; }
  .case .label { left: 16px; right: 16px; bottom: 14px; }
}

/* ============ BRAND TAG VARIANTS ============
   .case-brand is rendered on every card but hidden by default.
   body[data-brand-style="..."] picks which variant shows. */
.case-brand { display: none; }

/* B · pill — white pill, top-right */
body[data-brand-style="pill"] .case .label .eyebrow { display: none; }
body[data-brand-style="pill"] .case-brand {
  display: inline-block;
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink, #0b0b08);
  border-radius: 999px;
  font: 600 11px/1 "Onest", sans-serif;
  letter-spacing: 0.02em;
  max-width: 60%;
}

/* C · stamp-dark — black squared stamp, top-left, JetBrains Mono caps */
body[data-brand-style="stamp-dark"] .case .label .eyebrow { display: none; }
body[data-brand-style="stamp-dark"] .case-brand {
  display: inline-block;
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  padding: 7px 12px;
  background: var(--ink, #0b0b08);
  color: #fff;
  border-radius: 4px;
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* D · outline — bordered transparent tag, bottom-right */
body[data-brand-style="outline"] .case .label .eyebrow { display: none; }
body[data-brand-style="outline"] .case-brand {
  display: inline-block;
  position: absolute;
  bottom: 22px; right: 22px;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
  border-radius: 4px;
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
}

/* E · stamp-lime — lime filled stamp, top-left, Unbounded caps */
body[data-brand-style="stamp-lime"] .case .label .eyebrow { display: none; }
body[data-brand-style="stamp-lime"] .case-brand {
  display: inline-block;
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  padding: 8px 14px;
  background: var(--lime, #cfe430);
  color: var(--ink, #0b0b08);
  border-radius: 4px;
  font: 600 10px/1 "Unbounded", "Onest", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .case-brand {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}

/* ============ HOVER CTA VARIANTS ============
   Default (no body attr) = A: center-dark dark pill */
.case-cta {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity .22s ease, transform .22s ease, background .22s ease, color .22s ease;
  /* A · center-dark (default) */
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 6px));
  padding: 13px 22px;
  background: rgba(11, 11, 8, 0.85);
  color: #fff;
  border-radius: 999px;
  font: 600 12px/1 "Onest", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.case:hover .case-cta {
  opacity: 1;
  transform: translate(-50%, -50%);
  background: var(--lime, #cfe430);
  color: var(--ink, #0b0b08);
}

/* B · cover — full-card dim + centered Unbounded caps */
body[data-cta-style="cover"] .case::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(11,11,8,0.55);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
body[data-cta-style="cover"] .case:hover::after { opacity: 1; }
body[data-cta-style="cover"] .case-cta {
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, calc(-50% + 6px));
  padding: 0;
  background: transparent;
  color: #fff;
  font: 600 16px/1 "Unbounded", "Onest", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-cta-style="cover"] .case:hover .case-cta {
  transform: translate(-50%, -50%);
  background: transparent;
  color: var(--lime, #cfe430);
}

/* C · top-right — white pill in the top-right corner */
body[data-cta-style="top-right"] .case-cta {
  top: 14px; left: auto; right: 14px; bottom: auto;
  transform: translateY(-4px);
  padding: 7px 12px;
  background: rgba(255,255,255,0.95);
  color: var(--ink, #0b0b08);
  border-radius: 999px;
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
}
body[data-cta-style="top-right"] .case:hover .case-cta {
  transform: translateY(0);
  background: var(--lime, #cfe430);
  color: var(--ink, #0b0b08);
}

/* D · bottom-right — mono lime tag at bottom-right */
body[data-cta-style="bottom-right"] .case-cta {
  top: auto; left: auto;
  bottom: 22px; right: 22px;
  transform: translateY(4px);
  padding: 7px 12px;
  background: rgba(11,11,8,0.78);
  color: var(--lime, #cfe430);
  border-radius: 4px;
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
}
body[data-cta-style="bottom-right"] .case:hover .case-cta {
  transform: translateY(0);
  background: var(--lime, #cfe430);
  color: var(--ink, #0b0b08);
}

/* E · arrow — arrow-icon circle, top-right */
body[data-cta-style="arrow"] .case-cta {
  top: 14px; left: auto; right: 14px; bottom: auto;
  transform: translateY(-4px) scale(0.85);
  width: 42px; height: 42px;
  padding: 0;
  justify-content: center;
  background: rgba(11,11,8,0.85);
  color: #fff;
  border-radius: 50%;
  gap: 0;
}
body[data-cta-style="arrow"] .case-cta span { display: none; }
body[data-cta-style="arrow"] .case-cta svg { width: 18px; height: 18px; }
body[data-cta-style="arrow"] .case:hover .case-cta {
  transform: translateY(0) scale(1);
  background: var(--lime, #cfe430);
  color: var(--ink, #0b0b08);
}