/* ------------------------------------------------------------------
   Spiritual Socialist Party — the poetry page
   Read after style.css, by poetry.html only.
   ------------------------------------------------------------------ */

/* The page takes the gate's composition from style.css — body.gate-page,
   main.gate, .mark, .block, .return — so the storm holds the west of the
   page and the poems answer from the east margin, the ground between
   them doing the work, as the hand and the names do on landing.html.
   Only what differs from the gate is written here.                     */

/* The section's name, quiet, above the rule. Set flush to the east
   margin: its trailing letter-space hangs off the edge instead of the
   centring indent every centred page uses.                             */

.poetry h1{
  text-indent:0;
  margin-right:-.42em;
}

/* Each work: title over author, both against the margin. */

.works{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:clamp(22px,4vh,40px);
}

.works a{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  color:var(--bone);
  text-decoration:none;
  text-align:right;
}

.work-title{
  font-size:clamp(1.6rem,3.4vw,2.2rem);
  font-weight:300;
  line-height:1.1;
  padding-bottom:9px;
  border-bottom:1px solid rgba(200,164,76,0);
  transition:border-color 400ms ease;
}

.work-author{
  font-size:clamp(.64rem,1.2vw,.74rem);
  letter-spacing:.34em;
  margin-right:-.34em;        /* the trailing letter-space hangs off the margin */
  text-transform:uppercase;
  color:var(--muted);
  transition:color 400ms ease;
}

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

.works a:hover .work-author,
.works a:focus-visible .work-author{color:var(--bone)}

/* On a phone the storm, the list and return stack in one column. Phone
   browsers measure vh against the screen with their toolbars hidden, so
   a page laid out in vh runs taller than what is shown on arrival and
   return lands against the toolbar at the foot. Here the page is
   measured in svh — the screen as it is shown, toolbars and all — with
   vh kept first for browsers that predate it. The top margin, the storm
   and the gaps are a little tighter than the gate's, the ground above
   the storm takes half the share of the ground below the list, and the
   room given up goes below: the list keeps a foot of its own, clearly more
   than the space between two works, and return stands well clear of
   the bottom of the screen.                                            */

@media (max-width:720px){
  main.gate.poetry{
    grid-template-rows:.5fr auto auto 1fr auto;   /* less ground above the storm */
    padding-top:6vh;
    padding-bottom:13vh;
    padding-top:6svh;
    padding-bottom:13svh;
  }
  .poetry .mark{
    height:min(29vh,250px);
    height:min(29svh,250px);
  }
  .poetry .block{
    margin-top:clamp(18px,3vh,32px);
    margin-top:clamp(18px,3svh,32px);
    gap:clamp(18px,3svh,34px);
    padding-bottom:clamp(34px,6vh,56px);
    padding-bottom:clamp(34px,6svh,56px);
  }
  .poetry .works{
    gap:clamp(16px,2.8vh,30px);
    gap:clamp(16px,2.8svh,30px);
  }
}