/* ============================================================
   xentra.ro — direction C · Placa · layout B, Rail
   A single committed visual world: the reversed field the identity
   authorises. No theme switching — every colour is painted explicitly
   so the page holds on any host ground.

   Measured contrast, all against the ink-green field #123A34:
     page  #F1F2EF   11.12:1
     quiet #AEBBB7    6.30:1
   ============================================================ */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/archivo-400.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/archivo-600.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/source-serif-4-600.woff2") format("woff2");
}

:root{
  --field:#123A34;
  --page:#F1F2EF;
  --quiet:#AEBBB7;
  --rule:#2E5148;
  --rule-soft:#22463D;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--field);
  color:var(--page);
  font:400 clamp(1rem,.97rem + .18vw,1.08rem)/1.65 "Source Serif 4","Source Serif Pro",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:clamp(2.2rem,6vw,5rem) clamp(1.25rem,6vw,5.5rem) clamp(1.6rem,3vw,2.75rem);
  gap:clamp(2.75rem,7vw,5rem);
}

/* ---------- masthead ---------- */
.masthead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem 2rem;
  flex-wrap:wrap;
}
.lockup{display:flex;align-items:center;gap:clamp(.7rem,1.8vw,1.05rem)}
.mark{
  width:clamp(2.4rem,6vw,3.5rem);
  height:clamp(2.4rem,6vw,3.5rem);
  display:block;flex:none;fill:var(--page);
}
.wordmark{
  margin:0;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:600;
  font-size:clamp(1.3rem,4.6vw,2rem);
  line-height:1;
  letter-spacing:.035em;
  color:var(--page);
  white-space:nowrap;
}

.lang{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:.8rem;letter-spacing:.045em;color:var(--quiet);
  padding-top:.35rem;white-space:nowrap;
}
.lang [aria-current]{color:var(--page);font-weight:600}
.lang a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px;
}
.lang a:hover{color:var(--page)}

/* @layout:begin -- layout B, "Rail": from 900px a two-column grid. Section
   labels sit in a narrow left rail in the Archivo caps treatment, content on
   the right, the headline spans both. One column below 900px. */
main{
  flex:1;
  width:100%;
  display:flex;
  flex-direction:column;
}
main p{margin:0}
section{
  display:flex;flex-direction:column;gap:.85rem;
  padding:1.6rem 0 1.9rem;
  border-top:1px solid var(--rule);
}
.intro{border-top:0;padding-top:0;row-gap:1.3rem;padding-bottom:clamp(2rem,4.5vw,3rem)}
h1{
  margin:0;
  font-weight:400;
  font-size:clamp(1.8rem,1.25rem + 2.4vw,2.9rem);
  line-height:1.14;
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.1rem,1rem + .5vw,1.28rem);
  line-height:1.55;
  text-wrap:pretty;
}
h2{
  margin:0 0 .15rem;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:600;font-size:.71rem;line-height:1;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--quiet);
}
.uses ul{list-style:none;margin:0;padding:0}
.uses li{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.05rem 0 1.15rem;
  border-top:1px solid var(--rule);
}
.uses li:first-child{border-top:0;padding-top:0}
h3{margin:0;font-weight:600;font-size:1.06rem;line-height:1.35}
@media (min-width:900px){
  section{
    display:grid;
    grid-template-columns:11rem minmax(0,38rem);
    column-gap:3rem;
    row-gap:.85rem;
    align-content:start;
  }
  section > h2{grid-column:1;grid-row:1;margin:0;padding-top:.5rem}
  section > :not(h2){grid-column:2}
  .intro h1{grid-column:1 / -1;max-width:21em}
  .intro .lede{grid-column:2}
  h1{font-size:clamp(2.4rem,1.6rem + 1.5vw,3.1rem)}
}
a{color:var(--page);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--quiet)}
a:focus-visible,.lang a:focus-visible{outline:2px solid var(--page);outline-offset:3px}
/* @layout:end */

/* ---------- footer: where the registry belongs ---------- */
footer{
  border-top:1px solid var(--rule);
  padding-top:clamp(1.4rem,3vw,2rem);
  display:flex;
  flex-direction:column;
  gap:clamp(1.3rem,2.6vw,1.8rem);
}
/* Explicit tracks, not auto-fit: auto-fit was collapsing an unused
   track to 0px and leaving a phantom gap. Six particulars: one column,
   then two across, then three across in two even rows. */
.registry{
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem 2.25rem;
  font-variant-numeric:tabular-nums;
}
@media (min-width:34rem){ .registry{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:56rem){ .registry{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.5fr)} }
.registry > div{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.registry dt{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  /* 600, not the 500 the design proposal asked Google Fonts for: the brand
     asset pack ships Archivo at 400 and 600 only, so a 500 request silently
     rendered these labels at 400 -- lighter than designed, at 10.5px, in the
     quiet tone. 600 matches h2, which is the same treatment in the same role. */
  font-weight:600;color:var(--quiet);
}
.registry dd{margin:0;font-size:.93rem;line-height:1.45;color:var(--page);text-wrap:balance}

.colophon{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  padding-top:clamp(.9rem,2vw,1.2rem);
  border-top:1px solid var(--rule-soft);
  font-size:.82rem;color:var(--quiet);
}
.colophon p{margin:0}

/* ---------- the one moment of motion ----------
   The two squares close the last of the distance into contact, once.
   The travel is deliberately short: a crawler or screenshot service that
   captures mid-flight must still see the mark, not two loose squares. */
@keyframes close-1{from{transform:translate(-1.5px,-1.5px)}to{transform:translate(0,0)}}
@keyframes close-2{from{transform:translate(1.5px,1.5px)}to{transform:translate(0,0)}}
.sq-a{animation:close-1 620ms cubic-bezier(.16,.84,.28,1) both}
.sq-b{animation:close-2 620ms cubic-bezier(.16,.84,.28,1) both}
@media (prefers-reduced-motion:reduce){
  .sq-a,.sq-b{animation:none}
}