/**
 * Britehouse — article template (institutional observation system)
 * Editorial rhythm · framework blocks · non-marketing closure
 */

:root{
  --art-max:51.25rem; /* 820px */
  --art-prose:42rem;
}

body.article-page{
  background-color:var(--bh-bg);
}

.art-wrap{
  position:relative;
}

/* Structural overlay — restrained geometry */
.art-wrap::before{
  content:"";
  pointer-events:none;
  position:fixed;
  top:0;
  right:0;
  width:min(38vw,340px);
  height:min(52vh,480px);
  border-left:var(--bh-hairline) solid rgba(34,162,159,0.12);
  border-bottom:var(--bh-hairline) solid rgba(34,162,159,0.12);
  opacity:var(--bh-geo-strength-faint);
  z-index:0;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.art-hero{
  position:relative;
  z-index:1;
  padding:clamp(var(--bh-space-9),14vw,calc(var(--bh-unit)*44)) var(--space-section-x)
    clamp(var(--bh-space-8),11vw,var(--bh-space-10));
}

.art-hero__inner{
  max-width:var(--art-max);
  margin:0 auto;
}

.art-kicker{
  margin:0 0 var(--bh-space-5);
  font-size:var(--bh-type-schema);
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--bh-color-kicker);
}

.art-title{
  margin:0 0 var(--bh-space-6);
  font-size:var(--bh-type-hero-display);
  font-weight:600;
  line-height:var(--bh-leading-hero);
  letter-spacing:var(--bh-track-hero-display);
  color:var(--bh-text);
  max-width:18ch;
}

.art-subtitle{
  margin:0 0 var(--bh-space-7);
  font-size:var(--bh-type-prose-lede);
  line-height:var(--bh-leading-snug);
  letter-spacing:var(--bh-track-tight);
  font-weight:400;
  color:var(--bh-text-secondary);
  max-width:28ch;
}

.art-meta{
  margin:0;
  font-size:var(--bh-text-sm);
  letter-spacing:var(--bh-track-label);
  color:var(--bh-text-muted);
}

.art-meta__org{
  color:var(--bh-text-subtle);
}

/* -------------------------------------------------------------------------
   Body rhythm
   ------------------------------------------------------------------------- */
.art-body{
  position:relative;
  z-index:1;
  padding:0 var(--space-section-x) clamp(var(--bh-space-9),12vw,calc(var(--bh-unit)*40));
}

.art-measure{
  max-width:var(--art-max);
  margin:0 auto;
}

.art-prose{
  max-width:var(--art-prose);
}

.art-body p{
  margin:0 0 var(--bh-space-6);
  font-size:var(--bh-type-prose);
  line-height:var(--bh-leading-prose);
  color:var(--bh-text);
}

.art-body p:last-child{
  margin-bottom:0;
}

/* Isolated conceptual statement */
.art-statement{
  margin:clamp(var(--bh-space-7),9vw,var(--bh-space-9)) 0;
  padding-left:var(--bh-space-5);
  border-left:var(--bh-hairline) solid var(--bh-line-strong);
  font-size:var(--bh-type-statement);
  line-height:var(--bh-leading-statement);
  letter-spacing:var(--bh-track-statement);
  color:var(--bh-ink-2);
}

/* Interpretive pause */
.art-pause{
  margin:clamp(var(--bh-space-8),10vw,var(--bh-space-10)) 0;
  height:var(--bh-hairline);
  max-width:var(--art-prose);
  background:linear-gradient(90deg, var(--bh-line-strong), transparent 72%);
  opacity:0.9;
}

/* Structural transition line */
.art-transition{
  margin:clamp(var(--bh-space-8),9vw,var(--bh-space-9)) 0 var(--bh-space-5);
  font-size:var(--bh-text-xs);
  font-weight:600;
  letter-spacing:var(--bh-letter-kicker);
  text-transform:uppercase;
  color:var(--bh-color-kicker);
}

/* Pull quote */
.art-pullquote{
  margin:clamp(var(--bh-space-8),11vw,var(--bh-space-10)) 0;
  padding:var(--bh-space-6) 0 var(--bh-space-6) var(--bh-space-6);
  position:relative;
  max-width:var(--art-max);
}

.art-pullquote::before{
  content:"";
  position:absolute;
  left:0;
  top:var(--bh-space-5);
  bottom:var(--bh-space-5);
  width:2px;
  background:linear-gradient(
    180deg,
    rgba(34,162,159,0.55),
    rgba(34,162,159,0.12)
  );
}

.art-pullquote p{
  margin:0;
  font-size:var(--bh-type-statement);
  line-height:var(--bh-leading-statement);
  letter-spacing:var(--bh-track-statement);
  font-weight:500;
  color:var(--bh-ink-2);
}

/* Framework block */
.art-framework{
  margin:clamp(var(--bh-space-8),10vw,var(--bh-space-10)) 0;
  padding:var(--bh-space-7) var(--bh-space-7) var(--bh-space-6);
  background-color:var(--bh-bg-soft);
  border-left:3px solid rgba(34,162,159,0.45);
  max-width:var(--art-max);
}

.art-framework__label{
  margin:0 0 var(--bh-space-5);
  font-size:var(--bh-text-xs);
  font-weight:600;
  letter-spacing:var(--bh-letter-kicker);
  text-transform:uppercase;
  color:var(--bh-color-kicker);
}

.art-framework__body p{
  margin:0 0 var(--bh-space-4);
  font-size:var(--bh-type-prose);
  line-height:var(--bh-leading-prose);
  color:var(--bh-text-secondary);
}

.art-framework__body p:last-child{
  margin-bottom:0;
}

/* -------------------------------------------------------------------------
   Article end system
   ------------------------------------------------------------------------- */
.art-end{
  position:relative;
  z-index:1;
  padding:clamp(var(--bh-space-9),12vw,calc(var(--bh-unit)*42)) var(--space-section-x)
    clamp(var(--bh-space-8),10vw,var(--bh-space-10));
  border-top:var(--bh-hairline) solid var(--bh-line);
  background:linear-gradient(180deg, var(--bh-bg) 0%, var(--bh-bg-soft) 100%);
}

.art-end__inner{
  max-width:var(--art-max);
  margin:0 auto;
}

.art-implication{
  margin-bottom:clamp(var(--bh-space-8),10vw,var(--bh-space-9));
}

.art-implication__label{
  margin:0 0 var(--bh-space-4);
  font-size:var(--bh-text-xs);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bh-text-muted);
}

.art-implication p{
  margin:0;
  font-size:var(--bh-type-prose);
  line-height:var(--bh-leading-prose);
  letter-spacing:-0.01em;
  color:var(--bh-text);
  max-width:var(--art-prose);
}

.art-related{
  margin-bottom:clamp(var(--bh-space-7),8vw,var(--bh-space-9));
}

.art-related__label{
  margin:0 0 var(--bh-space-5);
  font-size:var(--bh-text-xs);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bh-text-muted);
}

.art-related ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--bh-space-4);
}

.art-related a{
  font-size:var(--bh-text-md);
  color:var(--bh-text-secondary);
  text-decoration:none;
  padding-bottom:0.12em;
  box-shadow:inset 0 -1px 0 0 var(--bh-line-accent);
  background-image:linear-gradient(90deg,var(--bh-accent),var(--bh-accent));
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 1px;
  transition:var(--bh-link-transition);
}

.art-related a:hover{
  color:var(--bh-text);
  background-size:100% 1px;
  box-shadow:inset 0 -1px 0 0 transparent;
}

.art-related a:focus-visible{
  color:var(--bh-text);
  background-size:100% 1px;
  box-shadow:inset 0 -1px 0 0 transparent;
  outline:var(--bh-focus-ring);
  outline-offset:var(--bh-focus-ring-offset);
}

.art-continuity{
  margin:0;
  padding-top:var(--bh-space-6);
  border-top:var(--bh-hairline) solid var(--bh-line);
  font-size:var(--bh-text-sm);
  line-height:var(--bh-leading-body);
  color:var(--bh-text-muted);
  max-width:var(--art-prose);
}

@media (max-width:640px){
  .art-title{
    max-width:none;
  }

  .art-pullquote{
    padding-left:var(--bh-space-5);
  }
}

@keyframes artReveal{
  from{
    opacity:0;
    transform:translateY(var(--bh-reveal-distance));
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:no-preference){
  .art-hero__inner{
    opacity:0;
    transform:translateY(var(--bh-reveal-distance));
    animation:artReveal var(--bh-duration-slow) var(--bh-ease-structural) forwards both;
    animation-delay:50ms;
  }
}

@media (prefers-reduced-motion:reduce){
  .art-hero__inner{
    opacity:1;
    transform:none;
    animation:none;
  }
}