/* WEPRO premium transition page — black & white editorial. No external assets. */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --line:rgba(10,10,10,.14);
  --muted:rgba(10,10,10,.55);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --edge:clamp(22px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.stage{
  min-height:100dvh;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:clamp(28px,5vh,56px);
  padding:var(--edge);
  max-width:940px;
  margin:0 auto;
  width:100%;
  text-align:center;
  justify-items:center;
}

/* ---- top mark ---- */
.mark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
}
.mark__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ink);
  display:inline-block;
}

/* ---- core ---- */
.core{
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:100%;
}
.core__domain{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.55rem,4vw,2.4rem);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 clamp(20px,4vh,34px);
  overflow-wrap:anywhere;
  hyphens:none;
  max-width:100%;
}
.core__headline{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.5rem);
  line-height:1.28;
  letter-spacing:.005em;
  color:var(--ink);
  margin:0 0 clamp(14px,2.4vh,20px);
  max-width:26ch;
}
.core__body{
  font-family:var(--sans);
  font-size:clamp(.92rem,1.7vw,1.02rem);
  line-height:1.7;
  color:var(--muted);
  margin:0;
  max-width:46ch;
}

/* ---- chips ---- */
.chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 12px;
  padding:0;
  margin:clamp(28px,5vh,44px) 0 0;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
.chip__i{
  width:5px;height:5px;border-radius:50%;
  background:var(--ink);
  flex:0 0 auto;
}

/* ---- language switch ---- */
.lang{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-family:var(--sans);
}
.lang__btn{
  appearance:none;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  letter-spacing:.18em;
  min-width:44px;
  min-height:44px;
  padding:0 6px;
  border-radius:6px;
  transition:color .18s ease;
}
.lang__btn:hover,
.lang__btn:focus-visible{color:var(--ink)}
.lang__btn[aria-current="true"]{
  color:var(--ink);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}
.lang__sep{color:var(--line);user-select:none}

/* ---- footer ---- */
.foot{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:clamp(16px,3vh,22px);
  width:100%;
  max-width:38ch;
}

/* ---- focus visibility ---- */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* wider viewports: give the composition breathing room */
@media (min-width:768px){
  .stage{gap:clamp(36px,6vh,64px)}
  .core{max-width:42ch}
}