/* ------------------------------------------------------------------
   Spiritual Socialist Party — the Party pages
   Read after style.css, by index.html, library.html, islam.html and
   7-rings.html — and by
   the primer, ila-allah-primer.html, whose lessons each end on a way
   like these.
   ------------------------------------------------------------------ */

/* The section named, one rule, then its ways, each in the large light
   hand of the poetry page's titles. A name that leads somewhere carries
   the gate's faint gold line and brightens it under the pointer; a name
   with nowhere to go yet carries none, as Party had none before it led
   here. Linking one is a matter of wrapping it in an <a>.              */

.entries{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(24px,4.6vh,42px);
}

.entries li{
  font-size:clamp(1.6rem,5.6vw,2.2rem);
  font-weight:300;
  line-height:1.1;
  color:var(--bone);
}

.entries a{
  display:inline-block;
  color:inherit;
  text-decoration:none;
  padding-bottom:9px;
  border-bottom:1px solid rgba(200,164,76,.26);
  transition:border-color 400ms ease;
}

.entries a:hover,
.entries a:focus-visible{border-bottom-color:var(--gold)}

/* A way with a line beneath its name — on islam.html, each reading's
   length. The gold line stays under the name alone, and the line below
   it is set in the small capitals of the poetry page's authors,
   brightening with the gold under the pointer.                         */

.subtitled a{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-bottom:0;
  border-bottom:0;
}

.entry-title{
  padding-bottom:9px;
  border-bottom:1px solid rgba(200,164,76,.26);
  transition:border-color 400ms ease;
}

.entry-sub{
  font-size:clamp(.64rem,1.2vw,.74rem);
  font-weight:400;
  letter-spacing:.34em;
  text-indent:.34em;          /* centred: the trailing letter-space balanced */
  text-transform:uppercase;
  color:var(--muted);
  transition:color 400ms ease;
}

.subtitled a:hover .entry-title,
.subtitled a:focus-visible .entry-title{border-bottom-color:var(--gold)}

.subtitled a:hover .entry-sub,
.subtitled a:focus-visible .entry-sub{color:var(--bone)}

/* A page whose contents are still to come says so, quietly. */

.pending{
  margin:0;
  font-size:clamp(.72rem,2vw,.86rem);
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:var(--muted);
}

/* "return" takes its look from style.css, where its placement is written
   for the gate's grid. Here it is centred under the list, standing a
   little apart so it never reads as the last entry — as on the poetry
   page. */

.section .return{
  grid-column:auto;
  grid-row:auto;
  align-self:center;
  justify-self:auto;
  margin:clamp(10px,3vh,26px) 0 0;
}


/* --- the menu pages, off-axis ------------------------------------- */
/* index.html, islam.html, library.html and 7-rings.html take the      */
/* gate's composition from                                               */
/* style.css — body.gate-page, main.gate, .block, .return — as           */
/* poetry.html does: the section's name, the rule and its ways answer    */
/* from the east margin, flush to it, and the ground to the west is      */
/* left open. The primer keeps the centred .section above, so all of     */
/* this is scoped to main.menu.                                          */

.menu h1{
  text-indent:0;
  margin-right:-.42em;        /* the trailing letter-space hangs off the margin */
}

.menu .entries{align-items:flex-end}
.menu .entries li{text-align:right}

.menu .subtitled a{align-items:flex-end}

.menu .entry-sub{
  text-indent:0;
  margin-right:-.34em;
}

.menu .pending{
  text-indent:0;
  margin-right:-.34em;
}

/* A way that holds the west, where the gate keeps its mark — on
   islam.html, Learn Islam. It sits level with the last way to the east
   and is set flush to the west margin.                                 */

.menu .west{
  grid-column:1;
  grid-row:2;
  align-self:end;
  justify-self:start;
  padding-bottom:4vh;
}

.menu .west.entries{align-items:flex-start}
.menu .west li{text-align:left}
.menu .west.subtitled a{align-items:flex-start}
.menu .west .entry-sub{margin-right:0}

@media (max-width:720px){
  .menu .west{padding-bottom:0}
}

/* A name with nowhere to go yet keeps the room a linked name takes —
   its line, 1.1em, and the 9px and 1px of the gold line beneath — so
   every way in a menu stands on the same step, and linking one never
   moves the names below it.                                            */

.menu .entries li{min-height:calc(1.1em + 10px)}

/* 7 Rings holds seven ways, more than any other menu, so its list
   closes up: the names keep their size and the ground between them
   narrows, so that all seven stand in one screen.                      */

.rings .entries{gap:clamp(12px,2.2vh,26px)}

/* A phone gives the block no foot of its own, so on a short screen the
   last ring would sit against return; here the list keeps a little.    */

@media (max-width:720px){
  .rings .block{padding-bottom:clamp(14px,3vh,28px)}
}

/* The front page, the Party menu, holds both its halves on one page:
   under the section's name and its rule, Dissemination and Reeducation each stand as a heading in the
   small capitals of the section's name, a size down, with their ways
   beneath. The two halves stand a little further apart than the ways
   within them, so each reads as one group. Each half has an address —
   /#dissemination, /#reeducation.                                      */

.party .group{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:clamp(16px,2.6vh,28px);
}

.party .group + .group{margin-top:clamp(10px,3vh,30px)}

.party h2{
  margin:0 -.34em 0 0;        /* the trailing letter-space hangs off the margin */
  font-weight:400;
  font-size:clamp(.66rem,1.3vw,.78rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Four ways where the other menus hold two, so the list closes up a
   little, as 7 Rings does, and both halves stand in one screen.        */

.party .entries{gap:clamp(16px,3vh,32px)}

@media (max-width:720px){
  .party .block{padding-bottom:clamp(14px,3vh,28px)}
}

/* The front page's mark: the shahada sigil holds the west, as the hand
   does on landing.html and the storm on poetry.html. The sigil is wide
   where those are tall, so it is sized by its width rather than its
   height, and set level with the middle of the menu.                   */

.party .mark{
  width:min(40vw,560px);
  height:auto;
  align-self:center;
}

/* On a phone the menu leads and the sigil stands beneath it at the foot
   of the page, smaller and centred, and the page is measured in svh — the screen as it is shown, toolbars and all — with
   vh kept first for browsers that predate it, so the whole menu stands
   in one screen on arrival. The front page has no return, so the foot
   of the page needs only a margin.                                     */

@media (max-width:720px){
  main.gate.party{
    grid-template-rows:.25fr auto 1fr auto;   /* a little less above the menu */
    padding-top:6vh;
    padding-bottom:10vh;                      /* a little more below the sigil */
    padding-top:6svh;
    padding-bottom:10svh;
  }
  .party .mark{
    grid-row:4;
    width:min(52vw,240px);
    justify-self:center;
    align-self:end;
    margin-top:clamp(20px,4vh,40px);
    margin-top:clamp(20px,4svh,40px);
  }
  .party .block{
    grid-row:2;
    gap:clamp(16px,2.8svh,30px);
    padding-bottom:0;
  }
  .party .group{gap:clamp(12px,2svh,22px)}
  .party .group + .group{margin-top:clamp(6px,1.6svh,18px)}
  .party .entries{
    gap:clamp(12px,2.2vh,26px);
    gap:clamp(12px,2.2svh,26px);
  }
}