/* Requires css/tokens.css loaded first for colours, fonts, and .btn */

.method-section{
  border-bottom:1px solid var(--rule);
}

.method-section__inner,
.boxes-block,
.method-principles,
.method-cta{
  max-width:1180px;
  margin:0 auto;
  padding-left:40px;
  padding-right:40px;
}

/* ---------- Intro ---------- */
.method-section__inner{
  padding-top:64px;
  padding-bottom:8px;
  max-width:760px;
}

.method-eyebrow{
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--verdigris);
  margin:0 0 14px;
}

.method-title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.15;
  margin:0 0 22px;
  color:var(--ink);
}

.method-lede{
  font-size:1.08rem;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- Five-box diagram ---------- */
.boxes-block{
  padding-top:52px;
  padding-bottom:12px;
}

.boxes-diagram{
  display:flex;
  align-items:stretch;
  gap:0;
  border:1px dashed var(--rule);
  background:var(--paper-panel);
  padding:28px 20px;
  overflow-x:auto;
}

.box-unit{
  display:flex;
  align-items:center;
  gap:0;
  flex:1 1 0;
  min-width:96px;
}

.box-unit__cell{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--paper);
  border:1px solid var(--ink);
  padding:18px 8px;
  text-align:center;
}

.box-unit:first-child .box-unit__cell{
  border-color:var(--oxide);
  background:var(--paper);
}

.box-unit__cell .num{
  font-family:'Fraunces', Georgia, serif;
  font-weight:700;
  font-size:1.6rem;
  color:var(--ink);
}

.box-unit:first-child .box-unit__cell .num{
  color:var(--oxide);
}

.box-unit__cell .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.box-arrow{
  flex:0 0 auto;
  width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  color:var(--ink-soft);
  font-size:0.9rem;
}

.boxes-legend{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--ink-soft);
}

.boxes-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.boxes-legend .swatch{
  width:10px;
  height:10px;
  display:inline-block;
  border:1px solid var(--ink);
}

.boxes-legend .swatch.correct{
  border-color:var(--verdigris);
  background:var(--verdigris);
}

.boxes-legend .swatch.incorrect{
  border-color:var(--oxide);
  background:var(--oxide);
}

.boxes-caption{
  margin-top:18px;
  font-size:0.95rem;
  color:var(--ink-soft);
  max-width:640px;
}

/* ---------- Principles grid ---------- */
.method-principles{
  padding-top:56px;
  padding-bottom:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--rule);
}

.principle{
  padding:32px 28px 32px 0;
  border-bottom:1px dashed var(--rule);
}

.principle:nth-child(odd){
  border-right:1px dashed var(--rule);
  padding-right:32px;
}

.principle:nth-child(even){
  padding-left:32px;
}

.principle h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1.2rem;
  margin:0 0 10px;
  color:var(--ink);
}

.principle p{
  margin:0;
  font-size:0.98rem;
  line-height:1.6;
  color:var(--ink-soft);
}

.principle p + p{
  margin-top:12px;
}

/* ---------- Closing CTA ---------- */
.method-cta{
  padding-top:44px;
  padding-bottom:64px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  border-top:1px solid var(--rule);
}

.method-cta__label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 8px 0 0;
}

/* ---------- Mobile ---------- */
@media (max-width:880px){
  .method-section__inner,
  .boxes-block,
  .method-principles,
  .method-cta{
    padding-left:22px;
    padding-right:22px;
  }

  .method-section__inner{ padding-top:44px; }

  .boxes-diagram{
    padding:20px 14px;
  }

  .box-unit__cell{
    padding:14px 4px;
  }

  .box-arrow{
    width:20px;
    font-size:0.75rem;
  }

  .method-principles{
    grid-template-columns:1fr;
    padding-top:40px;
  }

  .principle,
  .principle:nth-child(odd),
  .principle:nth-child(even){
    padding:26px 0;
    border-right:none;
  }
}

@media (max-width:560px){
  .box-unit__cell .num{ font-size:1.25rem; }
  .box-unit__cell .label{ font-size:0.56rem; }
}