/* Hermetic Cloud · Godforms. Page styles only; the palette, type and components come from styles.css. */

.gf-wrap{max-width:1480px;margin:0;padding:1.6rem 2.5rem 3rem}
.gf-stage{display:grid;grid-template-columns:minmax(260px,540px) minmax(0,1fr) 230px;gap:2.4rem;align-items:start}

/* the figure */
.gf-fig{margin:0;position:sticky;top:calc(var(--hc-nav-h,150px) + 1rem);display:grid;gap:.8rem;justify-items:center}
.gf-frame{position:relative;width:min(100%,calc((100vh - var(--hc-nav-h,150px) - 6.2rem) * .7468));min-width:260px;aspect-ratio:1000/1339;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#262422;box-shadow:inset 0 1px 0 var(--edge-hi)}
.gf-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.gf-frame img.fade{opacity:0}
.gf-forms{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.gf-forms[hidden]{display:none}
.gf-btn{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--ink2);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;cursor:pointer;min-height:34px}
.gf-btn:hover{border-color:var(--gold);color:var(--ink)}
.gf-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-ink);background:var(--card)}
.gf-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the reading */
.gf-read{max-width:64ch;padding-top:.2rem}
.gf-read .rl{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .4rem}
.gf-read h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(2rem,3.2vw,2.8rem);letter-spacing:.02em;margin:0 0 .2rem;line-height:1.1}
.gf-read .pn{color:var(--mute);font-size:.95rem;margin:0 0 1.2rem}
.gf-desc{font-size:1.08rem;line-height:1.65;margin:0 0 1.1rem}
.gf-note{font-size:1rem;line-height:1.55;color:var(--ink2);margin:0 0 1.2rem;padding-left:.9rem;border-left:2px solid var(--gold)}
.gf-note b{font-family:var(--ff-ui);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);display:block;margin-bottom:.2rem}
.gf-verse{margin:0 0 1.3rem;font-size:1.02rem;line-height:1.6;font-style:italic;color:var(--ink)}
.gf-verse cite{display:block;margin-top:.35rem;font-style:normal;font-family:var(--ff-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.gf-verse cite a{color:var(--mute)}
.gf-verse cite a:hover{color:var(--gold-ink)}
.gf-links{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 1rem}
.gf-links .cap-h{flex:0 0 100%;font-family:var(--ff-ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.gf-links a{border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;color:var(--ink);text-decoration:none;font-size:.95rem}
.gf-links a small{font-family:var(--ff-ui);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-left:.3rem}
.gf-links a:hover{border-color:var(--gold);color:var(--gold-ink)}
.gf-links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gf-attrs{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:0 0 1.1rem;font-size:.95rem}
.gf-attrs dt{font-family:var(--ff-ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:.25rem}
.gf-attrs dd{margin:0;color:var(--ink2)}
details.gf-myth{margin:0 0 1.2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.gf-myth>summary{cursor:pointer;list-style:none;padding:.6rem 0;font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink)}
details.gf-myth>summary::-webkit-details-marker{display:none}
details.gf-myth>summary::before{content:"+ ";color:var(--mute)}
details.gf-myth[open]>summary::before{content:"\2212 "}
details.gf-myth p{margin:0 0 .9rem;font-size:1.02rem;line-height:1.62}
[lang="grc"]{font-style:normal;letter-spacing:.02em}

/* the views across the pantheons */
.gf-stage[hidden],.gf-view[hidden]{display:none}
.gf-view h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:.02em;margin:0 0 1rem}
.gf-view h3{font-family:var(--ff-ui);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:2rem 0 .8rem}
.gf-lede{max-width:70ch;font-size:1.02rem;line-height:1.6;color:var(--ink2);margin:0 0 1.2rem}
.gf-doms{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .6rem}
.gf-doms a{border:1px solid var(--line);border-radius:999px;padding:.32rem .85rem;color:var(--ink2);text-decoration:none;
  font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.gf-doms a:hover{border-color:var(--gold);color:var(--ink)}
.gf-doms a[aria-current]{border-color:var(--gold);color:var(--gold-ink);background:var(--card)}
.gf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.gf-card{display:grid;gap:.4rem;text-decoration:none;color:var(--ink)}
.gf-card img{display:block;width:100%;height:auto;aspect-ratio:330/442;object-fit:cover;border:1px solid var(--line);border-radius:10px;
  background:#262422;transition:border-color .2s}
.gf-card span{font-size:1rem;text-align:center}
.gf-card:hover img,.gf-card:focus-visible img{border-color:var(--gold)}
.gf-card:hover span{color:var(--gold-ink)}
.gf-card:focus-visible{outline:none}
.gf-tree{max-width:900px}
.gf-tree ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.gf-tree li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;padding:.55rem 0 .55rem 1.1rem;position:relative;font-size:1.05rem}
.gf-tree li::before{content:"";position:absolute;left:-4px;top:1.05rem;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.gf-tree i{font-style:normal;color:var(--mute);font-size:.9rem}
.gf-tree .gf-arrow{color:var(--gold)}
.gf-tree small{flex:0 0 100%;color:var(--mute);font-size:.85rem}
.gf-tree a,.gf-table a{color:var(--gold-ink);text-decoration:none;border-bottom:1px solid transparent}
.gf-tree a:hover,.gf-table a:hover{border-bottom-color:var(--gold)}
.gf-tree span span,.gf-table span{color:var(--ink2)}
.gf-table{overflow-x:auto;max-width:980px}
.gf-table table{border-collapse:collapse;width:100%;font-size:1rem}
.gf-table th,.gf-table td{text-align:left;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
.gf-table thead th{font-family:var(--ff-ui);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.gf-table tbody th{font-family:var(--ff-display);font-weight:500;color:var(--gold-ink)}
.gf-plate{margin:1.4rem 0 0;display:grid;gap:.4rem;justify-items:start}
.gf-plate .cap-h{font-family:var(--ff-ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.gf-plate img{display:block;max-width:100%;max-height:300px;width:auto;height:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper2)}
.gf-plate figcaption{font-size:.8rem;color:var(--mute);line-height:1.35}

/* the list */
.gf-list{position:sticky;top:calc(var(--hc-nav-h,150px) + 1rem);max-height:calc(100vh - var(--hc-nav-h,150px) - 2rem);overflow-y:auto;
  scrollbar-width:thin;border-left:1px solid var(--line);padding-left:1rem}
.gf-list h3{font-family:var(--ff-ui);font-weight:400;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:1.1rem 0 .35rem}
.gf-list h3:first-child{margin-top:0}
.gf-list a{display:block;padding:.34rem .6rem;border-radius:7px;color:var(--ink);text-decoration:none;font-size:1.02rem;border:1px solid transparent}
.gf-list a:hover{color:var(--gold-ink)}
.gf-list a[aria-current="true"]{border-color:var(--gold);background:var(--card);color:var(--gold-ink)}
.gf-list a:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.gf-pans{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
.gf-pan{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--ink2);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;cursor:pointer;min-height:32px}
.gf-pan:hover{border-color:var(--gold);color:var(--ink)}
.gf-pan[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-ink);background:var(--card)}
.gf-pan:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

details.gf-fold{margin:2rem 0 0;border-top:1px solid var(--line);max-width:82ch}
details.gf-fold>summary{cursor:pointer;padding:11px 0;font-family:var(--ff-ui);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);list-style:none;display:flex;align-items:center;gap:10px}
details.gf-fold>summary::-webkit-details-marker{display:none}
details.gf-fold>summary::before{content:"+";font-size:13px;line-height:1;width:18px;height:18px;border:1px solid var(--line2);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--mute);flex:0 0 auto}
details.gf-fold[open]>summary::before{content:"\2212"}
details.gf-fold>div{padding:0 0 10px}
details.gf-fold p{font-size:1rem;line-height:1.6;max-width:72ch}

@media (max-width:1180px){
  .gf-stage{grid-template-columns:minmax(240px,440px) minmax(0,1fr)}
  .gf-list{grid-column:1 / -1;grid-row:1;position:static;max-height:none;border-left:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
  .gf-list h3{display:none}
  .gf-list a{font-size:.95rem;border-color:var(--line);border-radius:999px;padding:.3rem .8rem}
  .gf-pans{flex:0 0 100%;margin:0 0 .3rem}
  .gf-gods{display:flex;flex-wrap:wrap;gap:.3rem;flex:0 0 100%}
}
@media (max-width:820px){
  .gf-gods{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
  .gf-gods a{flex:0 0 auto}
  .gf-doms{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
  .gf-doms a{flex:0 0 auto}
  .gf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .gf-wrap{padding:1rem 1rem 2rem}
  .gf-stage{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .gf-fig{position:static}
  .gf-frame{width:min(100%,460px);min-width:0}
}
@media print{.hc-navwrap,.gf-list,.gf-forms,.hc-footer{display:none!important}.gf-fig{position:static}}
/* the pantheons in the gallery: a large title between two gold rules, the count beneath */
.gf-view h3.gf-pan{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1.1rem;margin:3.4rem 0 1.4rem;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-transform:none;letter-spacing:.02em;color:var(--ink)}
.gf-view h3.gf-pan:first-of-type{margin-top:2rem}
.gf-view h3.gf-pan::before,.gf-view h3.gf-pan::after{content:"";height:1px;grid-row:1;grid-column:1;background:linear-gradient(90deg,transparent,var(--gold))}
.gf-view h3.gf-pan::after{grid-column:3;background:linear-gradient(90deg,var(--gold),transparent)}
.gf-pan span{grid-row:1;grid-column:2;font-family:var(--ff-display);font-weight:500;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.1;text-align:center}
.gf-pan small{grid-row:2;grid-column:1/-1;justify-self:center;margin-top:.35rem;font-family:var(--ff-ui);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
/* the Godforms shelf holds many pantheons: on wide screens it wraps onto centred rows instead of scrolling */
@media (min-width:761px){nav.hc-shelf{flex-wrap:wrap;justify-content:center;row-gap:6px;white-space:normal;overflow-x:visible}}
/* the gallery's order toggle */
.gf-order{display:inline-flex;margin:.4rem 0 0;border:1px solid var(--line);border-radius:999px;padding:3px}
.gf-order button{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;border-radius:999px;color:var(--ink2);padding:.35rem .9rem;cursor:pointer}
.gf-order button[aria-pressed="true"]{background:var(--card);color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold)}
.gf-order button:hover{color:var(--ink)}
.gf-order button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gf-pan-note{text-align:center;max-width:62ch;margin:-.6rem auto 1.4rem;font-size:1rem;line-height:1.55;color:var(--ink2);font-style:italic}
/* 26 September 2026: on phones the shelf wraps onto short rows, every pantheon in view at once, instead of a strip
   that scrolls out of sight; the pills are tighter so the fifteen take four rows at 390px and three on wider phones.
   The gallery's "what they rule" chips (Sun, Moon and the rest) are not shown on phones: the pantheons are what
   people look for there. */
@media (max-width:760px){
  nav.hc-shelf{flex-wrap:wrap;justify-content:center;row-gap:4px;column-gap:4px;white-space:normal;overflow-x:visible;padding:14px 8px 8px}
  nav.hc-shelf::before,nav.hc-shelf::after{display:none}
  nav.hc-shelf a{padding:.28rem .5rem;font-size:9.5px;letter-spacing:.09em}
}
@media (max-width:820px){.gf-doms{display:none}}

.gf-views{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.gf-views a{display:inline-block;font-family:var(--ff-ui);font-size:10.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.gf-views a:hover,.gf-views a[aria-current]{color:var(--gold-ink);border-color:var(--gold)}
.gf-views a[aria-current]{background-color:rgba(196,162,101,.09)}
nav.hc-shelf[aria-label="Pantheons"] a{padding-left:11px;padding-right:11px;letter-spacing:.1em}