/* =========================================================
   1pen — Global Glass System (Patterns)
   ========================================================= */

:root{
  --glass-bg: rgba(214,240,242,.09);
  --glass-border: rgba(255,255,255,.08);
  --glass-shadow: 0 0 45px rgba(0,0,0,.35);
  --glass-radius: 1.4rem;
  --glass-blur: blur(15px) saturate(160%);
  --stage-pad-top: clamp(2.5rem, 4vh, 4rem);
  --stage-pad-bot: clamp(3.5rem, 7vh, 6rem);
}

/* OUTER “page glass” */
.onepen-stage{
  width: min(1400px, 94%);
  margin: 0.5rem auto 4.5rem;
  padding: var(--stage-pad-top) clamp(1.2rem, 3vw, 2.2rem) var(--stage-pad-bot);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  position: relative;
}

/* INNER “content glass” */
.onepen-glass{
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1.1rem;
  background: rgba(20, 30, 40, .18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 0 25px rgba(0,0,0,.25);
  padding: clamp(1.2rem, 2.6vw, 2rem);
}

/* scroll-ready inner panel (for long text) */
.onepen-glass--scroll{
  max-height: 62vh;
  overflow: auto;
  padding-right: clamp(1.2rem, 2.6vw, 2rem);
}

/* make long pages feel intentional */
.onepen-stack{
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 2rem);
}

/* two-column split (About / Blog hero / product sections) */
.onepen-split{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.2rem, 2.6vw, 2rem);
  align-items: start;
}

@media (max-width: 960px){
  .onepen-split{ grid-template-columns: 1fr; }
}

/* Optional: polish for images inside glass */
.onepen-media{
  overflow: hidden;
}
.onepen-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: .9rem;
}