/* =====================================================================
   Alfred landing — »Kaj je Alfred« manifesto (navy) · part 2/6 port
   Values extracted 1:1 from Alfred.dc.html lines 161–191.
   Note: this H2 uses clamp(30px,4.4vw,50px) + line-height 1.05 —
   slightly different from the other sections' H2 (4.6vw / 1.06).
   That difference exists in the prototype; keep it.
   ===================================================================== */

.al-kaj{background:#0B1929;color:#F4EDE0;}
#kaj-je-alfred{scroll-margin-top:62px;} /* prototype global: [id]{scroll-margin-top:62px} */

.al-kaj-inner{
  max-width:1140px;
  margin:0 auto;
  padding:clamp(64px,9vw,120px) clamp(20px,5vw,56px);
}

/* eyebrow — duplicate of hero.css .al-eyebrow so the snippet stands alone;
   identical rule, dedupe at assembly */
.al-eyebrow{margin:0;font:600 12px 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#B8935A;}

/* --- manifesto grid: 1fr / 1.15fr --- */
.al-manifesto{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(28px,5vw,64px);
  align-items:start;
  margin-top:18px;
}
.al-kaj-title{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
.al-kaj-lead p{
  margin:0;
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.65;
  color:rgba(244,237,224,.85);
  text-wrap:pretty;
}
.al-kaj-lead p + p{margin-top:18px;}

/* --- 4 pillars in a 1px-brass-fuga grid (gap:1px over brass background) --- */
.al-kaj-pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;
  background:rgba(184,147,90,.3);
  border:1px solid rgba(184,147,90,.3);
  border-radius:2px;
  margin-top:clamp(40px,5vw,60px);
  overflow:hidden;
}
.al-kaj-pillar{background:#0B1929;padding:clamp(22px,2.6vw,30px);}
.al-kaj-pillar-title{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:22px;
  color:#B8935A;
  margin:0; /* prototype uses a <div>; h3 needs the margin reset */
  text-wrap:balance;
}
.al-kaj-pillar-title--sage{color:#7A8B5C;} /* Diskreten — sage by design */
.al-kaj-pillar p{
  margin:12px 0 0;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(244,237,224,.78);
  text-wrap:pretty;
}

/* --- responsive (prototype: 820 px → single column) --- */
@media (max-width:820px){
  .al-manifesto{grid-template-columns:1fr;}
}

/* --- scroll-reveal (shared candidate — global [data-reveal] mechanism from
   the prototype head; progressive enhancement, no JS; dedupe at assembly) --- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  [data-reveal]{
    animation:fadeUp .55s ease both;
    animation-timeline:view();
    animation-range:entry 0% entry 30%;
  }
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{animation:none!important;}
}