/* ------------------------------------------------------------------
   Spiritual Socialist Party
   ------------------------------------------------------------------ */

:root{
  --ground:#08090b;
  --bone:#e9e0cc;
  --muted:rgba(233,224,204,.50);
  --gold:rgba(200,164,76,.80);
}

*{box-sizing:border-box}

html{color-scheme:dark}
html,body{height:100%}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  padding:8vh 24px;
  display:grid;
  place-items:center;
  background:var(--ground);
  color:var(--bone);
  font-family:Inter,"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

main{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(26px,5vh,52px);
  text-align:center;
  animation:settle 1700ms cubic-bezier(.16,.68,.3,1) both;
}

.sigil{
  display:block;
  width:min(64vw,42vh,352px);
  width:min(64vw,42svh,352px);
  height:auto;
  opacity:.96;
  mix-blend-mode:lighten;
}

.rule{
  width:64px;
  height:1px;
  background:linear-gradient(90deg,rgba(200,164,76,0),var(--gold),rgba(200,164,76,0));
}

h1{
  margin:0;
  font-weight:400;
  font-size:clamp(.78rem,2.2vw,.95rem);
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--muted);
}

/* --- 404 ---------------------------------------------------------- */

.notfound .sigil{width:min(38vw,190px);opacity:.72}

.notfound p{
  margin:0;
  font-size:clamp(.78rem,2.2vw,.95rem);
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color:var(--muted);
}

.notfound a{
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid rgba(233,224,204,.22);
  padding-bottom:2px;
  transition:border-color 300ms ease;
}

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

/* --- motion / small screens --------------------------------------- */

@keyframes settle{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  main{animation:none}
}

@media (max-height:480px){
  body{padding:5vh 24px}
  .sigil{width:min(42vw,38vh,180px)}
}

/* ghost/: the ground goes to true black, the wolf's own background, so
   the image has no edge against the page */
body.ghost-page{background:#000}

/* --- the way in --------------------------------------------------- */

.enter{
  font-size:clamp(.72rem,2vw,.86rem);
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--bone);
  opacity:.80;
  padding-bottom:7px;
  border-bottom:1px solid rgba(200,164,76,.26);
  transition:opacity 400ms ease,border-color 400ms ease;
}

.enter:hover,
.enter:focus-visible{opacity:1;border-bottom-color:var(--gold)}

/* --- the gate ----------------------------------------------------- */
/* The hand holds the west of the page, the names answer from the east, */
/* and the ground between them is the composition.                      */

body.gate-page{padding:0;place-items:stretch}

main.gate{
  --west:10vw;                  /* the hand's margin */
  --east:7vw;                   /* the names' margin */
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:1fr auto 1fr auto;
  column-gap:clamp(40px,8vw,140px);
  row-gap:0;
  padding:9vh var(--east) 9vh var(--west);
  text-align:left;
}

.mark{
  grid-column:1;
  grid-row:2;
  display:block;
  height:min(56vh,468px);
  width:auto;
  opacity:.94;
}

/* The Hamza alone is held a little back, at 80%, so it sits behind the
   page rather than leading it — the hand is black, its white outline reads
   as #ccc, and the banner across it is dimmed to match. Scoped by filename because .mark is shared:
   poetry.html hangs its hurricane on the same class and must keep its own
   strength. */
.mark[src*="hizam-hamza"]{
  opacity:1;
  filter:brightness(.8);
}

/* landing.html: the hand, enlarged, holds most of the west. Its top and both
   thumbs stay in view; the fingers run off the foot of the page, which the
   gate clips. Sized by width so it never reaches the names in the east:
   100vh wide puts the thumbs about four-fifths of the way down the screen. */
main.gate.hamza{
  height:100vh;
  height:100svh;
  overflow:hidden;
}

.hamza .mark{
  grid-area:auto;               /* placed in a grid area, an absolute child
                                   would measure from that cell, not the page */
  position:absolute;
  top:6vh;
  left:clamp(12px,3vw,56px);
  width:min(100vh,60vw);
  width:min(100svh,60vw);
  height:auto;
}

.hamza .block,
.hamza .return{position:relative;z-index:1}

/* with the palm now filling the foot of the page's west and centre, the
   return steps east to stand under the names, clear of the hand */
.hamza .return{
  justify-self:end;
  margin-right:-.3em;           /* pull the trailing letter-space off the margin */
  text-indent:0;
}

.block{
  grid-column:2;
  grid-row:2;
  justify-self:end;
  align-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:clamp(24px,3.6vh,42px);
  padding-bottom:4vh;
}

/* the hairline points back west, toward the hand */
.gate .rule{
  width:88px;
  background:linear-gradient(90deg,rgba(200,164,76,0),var(--gold));
}

.ways{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:clamp(18px,2.8vh,32px);
}

.ways li{
  font-size:clamp(.84rem,1.5vw,1.02rem);
  letter-spacing:.34em;
  margin-right:-.34em;        /* pull the trailing letter-space off the margin */
  text-transform:uppercase;
  color:var(--bone);
  opacity:.9;
}

.return{
  grid-column:1 / -1;
  grid-row:4;
  align-self:end;
  justify-self:center;
  margin-right:calc(var(--west) - var(--east));   /* the gate's margins are
                                   uneven — nudge back onto the true centre */
  font-size:clamp(.68rem,1.9vw,.78rem);
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  padding-bottom:3px;
  border-bottom:1px solid rgba(233,224,204,.16);
  transition:color 300ms ease,border-color 300ms ease;
}

.return:hover,
.return:focus-visible{color:var(--bone);border-bottom-color:var(--gold)}

/* --- reachable by a screen reader, invisible on the page ---------- */

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  white-space:nowrap;
  clip-path:inset(50%);
}

/* The hand west, the names east — the tension held at every width. */

@media (max-width:720px){
  main.gate{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto auto 1fr auto;
    --west:7vw;                 /* even margins here, so no nudge is needed */
    padding:10vh var(--east) 10vh var(--west);
  }
  .mark{grid-row:2;justify-self:start;height:min(34vh,290px)}
  .block{
    grid-column:1;
    grid-row:3;
    align-self:auto;
    padding-bottom:0;
    margin-top:clamp(28px,5vh,48px);
  }
  .return{grid-row:5}

  /* on a phone the hand returns to the column, whole, above the names,
     and stands on the page's centre line */
  main.gate.hamza{height:auto;overflow:visible}
  .hamza .return{justify-self:center;margin-right:0;text-indent:.3em}
  .hamza .mark{
    grid-row:2;
    justify-self:center;
    position:static;
    width:auto;
    height:min(42vh,360px);
  }
}

@media (max-height:480px){
  .mark{height:min(42vh,186px)}
}

/* --- a name that leads somewhere ---------------------------------- */
/* The same quiet gold line as "Enter Ghost Dance", drawn under the      */
/* letters only: it stops short of the trailing letter-space, so its     */
/* east end meets the margin where the letters and the rule above end.  */
/* Positioned, not padded, so linking a name never moves the other one. */

.ways a{
  position:relative;
  color:inherit;
  text-decoration:none;
}

.ways a::after{
  content:"";
  position:absolute;
  left:0;
  right:.34em;
  bottom:-8px;
  height:1px;
  background:rgba(200,164,76,.26);
  transition:background-color 400ms ease;
}

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