/* ------------------------------------------------------------------
   Spiritual Socialist Party — The Sublation of Capital
   Read after style.css and party.css, by sublation-of-capital.html
   alone: the diagram and its three sections, in the site's palette.
   ------------------------------------------------------------------ */

/* Like the primer, a long column: it lets go of the centring every
   short page uses and runs down from the top.                        */

body.sublation{
  height:auto;
  display:block;
  place-items:normal;
  padding:clamp(44px,9vh,96px) max(22px,env(safe-area-inset-right))
          clamp(56px,11vh,112px) max(22px,env(safe-area-inset-left));

  --soft:rgba(233,224,204,.74);       /* bone held back: the reading text */
  --line:rgba(233,224,204,.10);       /* hairlines                        */
  --gold-faint:rgba(200,164,76,.26);  /* the site's resting link line     */

  /* The three sections, each in a hue that sits with bone and gold:
     § I the site's own gold, § II a grey sage, § III a worn rust.
     The --sN-rgb triplets feed the washes and lines below.           */
  --s1:#c8a44c; --s1t:#dcc58c; --s1-rgb:200,164,76;
  --s2:#6fa79d; --s2t:#a3c9c1; --s2-rgb:111,167,157;
  --s3:#bf6a5a; --s3t:#dc9b8c; --s3-rgb:191,106,90;
}

.sublation main{gap:clamp(28px,4.6vh,46px)}

.sublation p{margin:0}

/* --- the opening -------------------------------------------------- */

.standfirst{
  max-width:34rem;
  font-size:1rem;
  font-weight:300;
  line-height:1.7;
  color:var(--soft);
  text-wrap:pretty;
}

/* --- the four parts, named ---------------------------------------- */
/* As the primer names its lessons: small capitals, the gold line under
   the part being read, the faint line under the pointer.              */

.parts ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px clamp(22px,3.4vw,38px);
}

.parts a{
  position:relative;
  display:inline-block;
  padding:10px 0 12px;
  margin-right:-.3em;
  font-size:clamp(.72rem,2vw,.84rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  transition:color 300ms ease;
}

.parts a::after{
  content:"";
  position:absolute;
  left:0;
  right:.3em;
  bottom:4px;
  height:1px;
  background:transparent;
  transition:background-color 400ms ease;
}

.parts a:hover,
.parts a:focus-visible,
.parts a[aria-current]{color:var(--bone)}

.parts a:hover::after,
.parts a:focus-visible::after{background:var(--gold-faint)}

.parts a[aria-current]::after{background:var(--gold)}

@media (max-width:560px){
  .parts ul{
    display:grid;
    grid-template-columns:repeat(2,auto);
    justify-content:center;
    justify-items:center;
    column-gap:clamp(26px,9vw,44px);
  }
}

/* --- a part ------------------------------------------------------- */

.part{
  width:100%;
  max-width:44rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,5vh,50px);
  margin-top:clamp(28px,6vh,64px);
  scroll-margin-top:clamp(24px,5vh,48px);
}

.part-diagram{max-width:1000px}

/* Its name in the large light hand of the Party pages' ways, with its
   numeral beneath in the small capitals of their lines.               */

.part-head{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-weight:300;
}

.part-name{
  font-size:clamp(1.6rem,5.6vw,2.2rem);
  line-height:1.15;
  color:var(--bone);
  text-wrap:balance;
}

.part-no{
  font-size:clamp(.62rem,1.2vw,.72rem);
  font-weight:400;
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ==================================================================
   The diagram
   ================================================================== */

.diagram{
  width:100%;
  padding:clamp(20px,3vh,32px) 0 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-bottom:clamp(22px,3.4vh,34px);
}

.diag-svg-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.diag-svg{display:block;width:100%;max-width:960px;margin:0 auto}

/* on a phone the tree takes the whole width of the screen */
@media (max-width:560px){
  .diag-svg-wrap{
    width:calc(100% + 36px);
    margin:0 -18px;
  }
}

.diag-node{transition:opacity .2s}
.diag-node.clickable{cursor:pointer}
.diag-edge{transition:opacity .2s}

/* everything recedes while a section or a node is chosen */
.diag-svg.has-sel .diag-node{opacity:.09}
.diag-svg.has-sel .diag-edge{opacity:.04}
.diag-svg.has-sel .diag-node.lit{opacity:1}
.diag-svg.has-sel .diag-edge.lit{opacity:.95;stroke-width:2.5px}

/* a chosen node's two parents carry a dashed ring */
.diag-node .pring{opacity:0;transition:opacity .2s}
.diag-node.parent .pring{opacity:.65}

/* --- the three sections, as switches ------------------------------ */
/* Small capitals in each section's hue, each with the gate's line drawn
   under the letters: faint at rest, full while that section is lit.   */

.diag-btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px clamp(22px,3.4vw,40px);
  margin-top:clamp(14px,2.4vh,22px);
}

.diag-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 0 12px;
  border:0;
  background:none;
  font:inherit;
  cursor:pointer;
  opacity:.62;
  transition:opacity 300ms ease;
}

.diag-btn::after{
  content:"";
  position:absolute;
  left:30px;
  right:.28em;
  bottom:4px;
  height:1px;
  background:rgba(var(--rgb),.22);
  transition:background-color 400ms ease;
}

.diag-btn[data-sec="1"]{--rgb:var(--s1-rgb);color:var(--s1t)}
.diag-btn[data-sec="2"]{--rgb:var(--s2-rgb);color:var(--s2t)}
.diag-btn[data-sec="3"]{--rgb:var(--s3-rgb);color:var(--s3t)}

.diag-btn:hover,
.diag-btn:focus-visible{opacity:.9}

.diag-btn.active{opacity:1}
.diag-btn.active::after{background:rgba(var(--rgb),.9)}

.diag-btn:focus-visible{outline:1px solid var(--gold-faint);outline-offset:4px}

.diag-btn-lbl{
  font-size:clamp(.62rem,1.2vw,.7rem);
  font-weight:400;
  letter-spacing:.28em;
  margin-right:-.28em;
  text-transform:uppercase;
}

/* --- what the chosen section or node says ------------------------- */

.diag-blurb{
  max-width:38rem;
  min-height:84px;
  margin:clamp(10px,2vh,18px) auto 0;
  padding:18px 0 4px;
  text-align:left;
  border-top:1px solid var(--line);
  transition:border-color .3s ease;
}

.diag-blurb.b1{border-top-color:rgba(var(--s1-rgb),.34)}
.diag-blurb.b2{border-top-color:rgba(var(--s2-rgb),.34)}
.diag-blurb.b3{border-top-color:rgba(var(--s3-rgb),.34)}

.diag-blurb-ttl{
  margin-bottom:10px;
  font-size:clamp(.62rem,1.2vw,.7rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  white-space:pre-wrap;
}

.b1 .diag-blurb-ttl{color:var(--s1t)}
.b2 .diag-blurb-ttl{color:var(--s2t)}
.b3 .diag-blurb-ttl{color:var(--s3t)}

.diag-blurb-body{
  font-size:.95rem;
  font-weight:300;
  line-height:1.72;
  color:var(--soft);
  text-wrap:pretty;
}

.diag-blurb-empty{
  padding-top:14px;
  font-size:clamp(.6rem,1.1vw,.68rem);
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(233,224,204,.28);
}

/* ==================================================================
   The trace — each sublation in turn
   ================================================================== */

.trace{
  width:100%;
  max-width:38rem;
  display:flex;
  flex-direction:column;
  gap:clamp(34px,5.6vh,52px);
  text-align:left;
}

.trace-entry{
  padding-left:clamp(18px,3vw,26px);
  border-left:1px solid rgba(var(--rgb),.30);
}

.c1{--rgb:var(--s1-rgb);--hue:var(--s1);--hue-t:var(--s1t)}
.c2{--rgb:var(--s2-rgb);--hue:var(--s2);--hue-t:var(--s2t)}
.c3{--rgb:var(--s3-rgb);--hue:var(--s3);--hue-t:var(--s3t)}

.trace-formula{
  font-size:clamp(1.2rem,3.6vw,1.45rem);
  font-weight:300;
  line-height:1.3;
  color:var(--bone);
}

.trace-op{
  margin:0 .45em;
  color:var(--hue);
  opacity:.8;
}

.trace-dims{
  margin:10px 0 18px;
  line-height:1.9;
  font-size:clamp(.6rem,1.1vw,.68rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--hue);
  opacity:.72;
}

.trace-sep{margin:0 .9em;opacity:.45}

.trace-body{
  font-size:1rem;
  font-weight:300;
  line-height:1.72;
  color:var(--soft);
  text-wrap:pretty;
}

/* the section's conclusion, between two hairlines of its hue */
.trace-conclusion{
  padding:22px 0;
  font-size:1.02rem;
  font-weight:300;
  font-style:italic;
  line-height:1.72;
  color:var(--bone);
  opacity:.86;
  border-top:1px solid rgba(var(--rgb),.30);
  border-bottom:1px solid rgba(var(--rgb),.30);
  text-wrap:pretty;
}

/* --- the way back ------------------------------------------------- */

.sublation .return{margin-top:clamp(30px,7vh,72px)}

/* --- quiet motion, and paper -------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .parts a,.parts a::after,.diag-btn,.diag-btn::after,
  .diag-node,.diag-edge{transition:none}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

@media print{
  body.sublation{
    --bone:#000;
    --muted:#555;
    --soft:#222;
    --line:#ccc;
    background:#fff;
    padding:0;
  }
  .sublation main{animation:none}
  .parts,.diag-btns,.diag-blurb,.return{display:none}
  .diagram{border:0}
}