/* =====================================================================
   Berolink — Chapter 4 · The Company
   Reuses warm tokens + the .ap-* kit (home → nav → approach → company).
   Register: a charter, not a brochure. One paper (gardenia) throughout;
   weight comes from ruled articles, the group exhibit, the framed Ethics
   article, and the binding seal line — not from background colour.
   Signature: the Ethics & Welfare article, framed and sealed, as the
   gravitational centre — "our license to operate".
   ===================================================================== */

.cm-wrap{ background:var(--cream-hi); }

/* ---- ruled article: a hairline opens each substantive provision ---- */
.cm-art > .ap-inner{ border-top:1px solid var(--line); padding-top:clamp(2.6rem,5vh,4.2rem); }

/* shared BERO & CO. wordmark treatment (CDO-03): Baumans, uppercase, ink */
.cm-wordmark{ font-family:"Baumans",var(--title); font-weight:400; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--umber); }
.cm-wordmark .amp{ margin:0 0.1em; }

/* ============================ PREAMBLE (intro · gardenia) ============== */
.cm-intro{ background:var(--gardenia); padding-top:clamp(3rem,6vh,5rem); }
.cm-intro .ap-h{ font-size:clamp(2rem,4.4vw,3.05rem); line-height:1.07; max-width:17ch;
  margin-top:clamp(14px,2.2vh,20px); }
.cm-intro .ap-lead{ max-width:54ch; }
/* the group name set in its display face wherever it appears in body prose */
.cm-wrap .ap-lead .wm{ font-family:"Baumans",var(--body); text-transform:uppercase;
  letter-spacing:0.02em; color:var(--umber); font-weight:400; }

/* ============================ THE HOUSE (group exhibit) ================ */
.cm-house .ap-h{ max-width:24ch; }
.cm-house .ap-lead{ max-width:52ch; }

.cm-exhibit{ margin:clamp(34px,5.5vh,56px) auto 0; max-width:600px;
  display:flex; flex-direction:column; align-items:center; }

.cm-node{ border:1px solid var(--line); border-radius:5px;
  padding:clamp(15px,2.4vh,20px) clamp(18px,3vw,26px); width:100%; }
.cm-node .role{ font-family:var(--mono); font-weight:500; font-size:0.6rem; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--ink-faint); }
.cm-node .nm{ font-family:var(--title); font-weight:500; font-size:clamp(1.05rem,1.7vw,1.28rem);
  letter-spacing:-0.01em; line-height:1.15; color:var(--umber); margin:0.34em 0 0; }
.cm-node .ds{ font-family:var(--body); font-size:clamp(0.9rem,1.3vw,1rem); line-height:1.55;
  color:var(--taupe); margin:0.4em 0 0; }

/* parent */
.cm-node.cm-parent{ max-width:300px; text-align:center; }
.cm-node.cm-parent .nm{ font-size:clamp(1.15rem,1.9vw,1.4rem); }

/* stem from parent to the branch bar */
.cm-stem{ width:1px; height:clamp(22px,3vh,32px); background:var(--line); flex:none; }

/* the two lines */
.cm-kids{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,3vw,26px);
  width:100%; position:relative; padding-top:clamp(22px,3vh,30px); }
.cm-kids::before{ content:""; position:absolute; top:0; left:25%; right:25%; height:1px;
  background:var(--line); }
.cm-kids .cm-node{ position:relative; }
.cm-kids .cm-node::before{ content:""; position:absolute; top:calc(-1 * clamp(22px,3vh,30px));
  left:50%; width:1px; height:clamp(22px,3vh,30px); background:var(--line); transform:translateX(-50%); }

/* this house — the only emphasis tone in the exhibit */
.cm-node.is-this{ border-top:2px solid var(--peri-deep); }
.cm-node.is-this .nm{ color:var(--peri-deep); }
.cm-node .here{ font-family:var(--mono); font-size:0.58rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--peri-deep); margin-left:0.6em; vertical-align:0.12em; }

/* ============================ A RUNNING START (holdings) =============== */
.cm-hold .ap-h{ max-width:26ch; }
.cm-hold .ap-h .em{ color:var(--peri-deep); font-style:normal; }
.cm-clauses{ margin:clamp(26px,4.2vh,42px) 0 0; }
.cm-clause{ display:grid; grid-template-columns:minmax(0,0.74fr) minmax(0,1.7fr);
  gap:clamp(0.8rem,3vw,2.6rem); padding:clamp(18px,2.8vh,26px) 0;
  border-top:1px solid var(--line); align-items:baseline; }
.cm-clause .nm{ font-family:var(--title); font-weight:500; font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.2; letter-spacing:-0.01em; color:var(--umber); margin:0; }
.cm-clause .bd{ font-family:var(--body); font-size:clamp(0.95rem,1.35vw,1.05rem);
  line-height:1.62; color:var(--taupe); margin:0; }
.cm-clause .bd .src{ font-family:var(--mono); font-size:0.78em; letter-spacing:0.02em; color:var(--umber); font-weight:500; }

/* ============================ ETHICS & WELFARE (framed article) ======== */
.cm-ethics{ padding-top:clamp(3.4rem,6vh,5rem); }
.cm-frame{ max-width:var(--maxw); margin:0 auto; position:relative;
  border:1px solid var(--line); border-top:2px solid var(--peri-deep); border-radius:6px;
  padding:clamp(30px,5.5vh,64px) clamp(24px,4.5vw,58px); }
.cm-frame .eyebrow{ color:var(--peri-deep); }
.cm-ethics-h{ font-family:var(--title); font-weight:400; letter-spacing:-0.014em;
  font-size:clamp(1.65rem,3.2vw,2.4rem); line-height:1.16; color:var(--umber);
  max-width:22ch; margin:clamp(16px,2.6vh,24px) 0 0; }
.cm-frame .ap-lead{ max-width:60ch; }
.cm-frame .ap-lead .em{ color:var(--umber); font-weight:600; font-style:normal; }
.cm-note{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.05em; line-height:1.6;
  color:var(--ink-faint); margin:clamp(15px,2.4vh,22px) 0 0; max-width:62ch; }

/* sub-part divider inside the article: the principles open with their own kicker */
.cm-prin-head{ margin:clamp(34px,5.5vh,54px) 0 0; padding-top:clamp(24px,3.4vh,32px);
  border-top:1px solid var(--line); }

/* the enumerated clauses — numbering is content-true here (citable articles) */
.cm-principles{ margin:clamp(20px,3vh,28px) 0 0; }
.cm-pr{ display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(0.9rem,2.6vw,1.9rem); padding:clamp(15px,2.5vh,21px) 0;
  border-top:1px solid var(--line); align-items:baseline; }
.cm-pr:first-child{ border-top:0; padding-top:0; }
.cm-pr .ix{ font-family:var(--mono); font-weight:500; font-size:0.74rem; letter-spacing:0.06em;
  color:var(--ink-faint); padding-top:0.2em; }
.cm-pr .txt{ font-family:var(--body); font-size:clamp(0.96rem,1.4vw,1.08rem); line-height:1.6;
  color:var(--taupe); margin:0; }
.cm-pr .txt .nm{ font-family:var(--title); font-weight:600; font-size:1.04em; letter-spacing:-0.008em;
  color:var(--umber); }
.cm-pr .txt .em{ color:var(--peri-deep); font-weight:600; font-style:normal; }

/* the binding seal line — the gravitational endpoint */
.cm-bind{ display:flex; gap:0.95em; align-items:flex-start;
  margin:clamp(28px,4.6vh,46px) 0 0; padding-top:clamp(22px,3.2vh,30px);
  border-top:1px solid var(--line); }
.cm-bind .keyline{ flex:none; margin-top:0.72em; }
.cm-bind p{ font-family:var(--title); font-weight:460; font-size:clamp(1.18rem,2.1vw,1.6rem);
  line-height:1.28; letter-spacing:-0.012em; color:var(--umber); margin:0; max-width:30ch; }
.cm-bind p .em{ color:var(--peri-deep); font-style:normal; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .cm-frame{ padding:clamp(24px,4.5vh,40px) clamp(20px,5vw,30px); }
}
@media (max-width:640px){
  /* exhibit collapses to a vertical schedule on a left rail */
  .cm-exhibit{ align-items:stretch; }
  .cm-stem{ display:none; }
  .cm-node.cm-parent{ max-width:none; text-align:left; }
  .cm-kids{ grid-template-columns:1fr; gap:0; padding-top:0; margin-top:clamp(14px,2.4vh,18px); }
  .cm-kids::before{ display:none; }
  .cm-kids .cm-node{ border:0; border-top:1px solid var(--line); border-radius:0;
    border-left:2px solid var(--line); padding-left:clamp(14px,4vw,20px); }
  .cm-kids .cm-node::before{ display:none; }
  .cm-node.is-this{ border-left-color:var(--peri-deep); border-top-color:var(--line); }
  .cm-clause{ grid-template-columns:1fr; gap:0.5rem; padding:clamp(16px,2.6vh,22px) 0; }
  .cm-clause .nm{ font-size:1.06rem; }
  .cm-pr{ grid-template-columns:auto minmax(0,1fr); gap:0.9rem; }
}