/* ============================================================
   DevCo · Components — reusable building blocks
   Eyebrow · Mono label · Outline button · Plate · Reveal states
   ============================================================ */

/* — Mono label — technical metadata text — */
.dc-mono{
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:400;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
}
.dc-mono--sm{font-size:var(--fs-mono-sm);}

/* — Eyebrow — numbered section label: [index] —— [label] — */
.dc-eyebrow{display:flex;align-items:center;gap:14px;color:currentColor;}
.dc-eyebrow__idx{font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;opacity:.55;}
.dc-eyebrow__rule{width:26px;height:var(--hair);background:currentColor;opacity:.4;flex:none;}
.dc-eyebrow__label{font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;}

/* — Outline button — fills on hover, arrow nudges — */
.dc-btn{
  position:relative;display:inline-flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:.13em;text-transform:uppercase;
  padding:18px 24px;border:var(--hair) solid currentColor;border-radius:0;
  background:transparent;color:currentColor;cursor:pointer;
  transition:background .42s var(--ease),color .42s var(--ease);
}
.dc-btn--lg{padding:21px 30px;}
.dc-btn__arrow{position:relative;display:inline-block;width:20px;height:var(--hair);
  background:currentColor;transition:transform .42s var(--ease);}
.dc-btn__arrow::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;
  border-right:var(--hair) solid currentColor;border-top:var(--hair) solid currentColor;
  transform:rotate(45deg);}
.sec--dark .dc-btn:hover{background:var(--bone);color:var(--ink);}
.sec--light .dc-btn:hover,.sec--paper .dc-btn:hover{background:var(--ink);color:var(--bone);}
.dc-btn:hover .dc-btn__arrow{transform:translateX(5px);}

/* text link with drawn underline */
.dc-link{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  border-bottom:var(--hair) solid currentColor;padding-bottom:4px;
  transition:gap .3s var(--ease);}
.dc-link:hover{gap:18px;}

/* — Plate — framed image / SVG art slot with survey-document corner ticks — */
.dc-plate{position:relative;margin:0;overflow:hidden;
  border:var(--hair) solid var(--bone-hair);background:#221d18;}
.sec--light .dc-plate,.sec--paper .dc-plate{border-color:var(--ink-hair);}
.dc-plate__img{width:100%;height:100%;object-fit:cover;display:block;}
.dc-plate__fill{position:absolute;inset:0;
  background:linear-gradient(135deg,#2A2520 0%,#3A2E22 100%);}
.dc-plate__fill::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 2px,transparent 2px 6px);
  mix-blend-mode:overlay;}
.dc-plate__fill::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 50%,transparent 38%,rgba(0,0,0,.5) 100%);}
.dc-plate__tick{position:absolute;width:14px;height:14px;border:0 solid var(--bone-faint);}
.dc-plate__tick--tl{top:9px;left:9px;border-top-width:var(--hair);border-left-width:var(--hair);}
.dc-plate__tick--tr{top:9px;right:9px;border-top-width:var(--hair);border-right-width:var(--hair);}
.dc-plate__tick--bl{bottom:9px;left:9px;border-bottom-width:var(--hair);border-left-width:var(--hair);}
.dc-plate__tick--br{bottom:9px;right:9px;border-bottom-width:var(--hair);border-right-width:var(--hair);}
.dc-plate__code{position:absolute;top:14px;left:18px;color:var(--bone-faint);
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);letter-spacing:.12em;text-transform:uppercase;}
.dc-plate__caption{position:absolute;bottom:14px;left:18px;right:18px;color:var(--bone-faint);
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);letter-spacing:.12em;text-transform:uppercase;}

/* — Contour backdrop — topographic line art layer — */
.dc-contour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.dc-contour path{fill:none;stroke:currentColor;stroke-width:.5;}

/* ============================================================
   Glass — Apple-OS frosted surface (round 3)
   ------------------------------------------------------------
   A reusable translucent surface. Applied selectively to key
   surfaces (cards, the guide panel, floating metadata). Hard
   edges, hairline border, a 1px catch-light along the top edge,
   and a backdrop blur. `.dc-glass` resolves to the correct
   tint by section ground via .sec--dark / .sec--light.
   ------------------------------------------------------------ */
.dc-glass{
  position:relative;
  background:var(--glass-dark);
  border:var(--hair) solid var(--glass-dark-edge);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);
  backdrop-filter:blur(var(--glass-blur)) saturate(125%);
}
.sec--light .dc-glass,
.sec--paper .dc-glass{
  background:var(--glass-light);
  border-color:var(--glass-light-edge);
}
/* hairline catch-light along the top edge — the OS "lift" */
.dc-glass::before{
  content:"";position:absolute;top:0;left:0;right:0;height:var(--hair);
  background:var(--glass-dark-light);pointer-events:none;z-index:1;
}
.sec--light .dc-glass::before,
.sec--paper .dc-glass::before{background:var(--glass-light-light);}

/* a stronger blur for primary surfaces (the guide panel) */
.dc-glass--strong{
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(130%);
  backdrop-filter:blur(var(--glass-blur-strong)) saturate(130%);
}

/* graceful fallback where backdrop-filter is unsupported —
   fall back to a more opaque ground so text stays legible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dc-glass{background:var(--glass-dark-hi);}
  .sec--light .dc-glass,
  .sec--paper .dc-glass{background:var(--glass-light-hi);}
}

/* ============================================================
   Reveal states — declarative motion via data- attributes.
   Hidden only when JS is active; motion.js animates them in.
   Reduced-motion + no-JS users see everything immediately.
   ------------------------------------------------------------
   FAIL-SAFE (round 3): a reveal element must NEVER stay
   permanently invisible. If motion.js does not mark it `.is-in`
   within a few seconds (slow init, a JS error, a scroll-trigger
   miss), a pure-CSS animation fades it in anyway — content is
   always visible, never a void.
   ============================================================ */
html.js [data-reveal]{opacity:0;will-change:opacity,transform;
  animation:dcRvFailsafe .5s linear 2.4s forwards;}
html.js [data-reveal] .dc-line{display:block;}
html.js [data-reveal="lines"]{opacity:1;animation:none;}
html.js [data-reveal="lines"] .dc-line-mask{overflow:hidden;display:block;}
html.js [data-reveal="lines"] .dc-line{opacity:1;}
/* once JS owns the element, it controls opacity — drop the fallback */
html.js [data-reveal].is-in{opacity:1;animation:none;}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1 !important;transform:none !important;
    animation:none !important;}
}
[data-reveal].is-in{opacity:1;}
@keyframes dcRvFailsafe{from{opacity:0;}to{opacity:1;}}