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

.gm-wrap{max-width:1480px;margin:0;padding:1.8rem 2.5rem 3rem;display:grid;
  grid-template-columns:minmax(0,1fr) 300px;gap:2.6rem;align-items:start}
.gm-wrap main{min-width:0}
.gm-wrap main section{margin:0 0 3rem;scroll-margin-top:calc(var(--hc-nav-h,150px) + 1rem)}
.gm-wrap main h2{font-family:var(--ff-display);font-weight:500;font-size:1.7rem;letter-spacing:.015em;margin:0 0 .45em}
.gm-wrap main p{max-width:72ch;font-size:1.05rem;line-height:1.6}
.gm-k{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* buttons */
.gm-btn{font-family:var(--ff-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:transparent;
  color:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);padding:.55rem .9rem;cursor:pointer;min-height:40px}
.gm-btn:hover{border-color:var(--gold);color:var(--ink)}
.gm-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gm-cast{font-size:12.5px;padding:.85rem 1.8rem;border-color:var(--gold);color:var(--gold-ink);background:var(--card);
  box-shadow:inset 0 1px 0 var(--edge-hi)}
.gm-cast:hover{background:var(--paper2)}
.gm-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 1.2rem}

/* own marks */
details.gm-own{margin:0 0 1.4rem;max-width:760px}
details.gm-own>summary{cursor:pointer;list-style:none;font-family:var(--ff-ui);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);display:inline-flex;align-items:center;gap:8px;padding:.3rem 0}
details.gm-own>summary::-webkit-details-marker{display:none}
details.gm-own>summary::before{content:"+";width:16px;height:16px;border:1px solid var(--line2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--mute);font-size:12px}
details.gm-own[open]>summary::before{content:"\2212"}
.gm-marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:.8rem 0 .8rem}
.gm-marks fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .7rem .7rem;margin:0}
.gm-marks legend{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:0 .3rem}
.gm-marks label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.9rem;color:var(--ink2);margin:.25rem 0}
.gm-marks input{width:4.2rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;
  font-family:var(--ff-body);font-size:1rem;padding:.3rem .45rem;min-height:34px}
.gm-marks input:focus{outline:none;border-color:var(--gold)}
.gm-note{font-size:.92rem;color:var(--mute);margin:.2rem 0 0}

/* the lines as marked */
.gm-lines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem 1rem;margin:0 0 1.2rem;max-width:880px}
.gm-lines .grp{display:grid;gap:3px}
.gm-lines .ln{display:flex;align-items:center;gap:6px;min-height:14px}
.gm-lines .dots{flex:1;height:6px;background-image:radial-gradient(circle,var(--ink2) 1.4px,transparent 1.8px);
  background-size:7px 6px;background-repeat:repeat-x;opacity:.75}
.gm-lines .n{font-family:var(--ff-ui);font-size:10px;color:var(--mute);width:1.6em;text-align:right}
.gm-lines .grp>.gm-k{margin:0 0 2px}

/* the shield */
.gm-shield{max-width:880px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--card);
  box-shadow:inset 0 1px 0 var(--edge-hi);padding:.4rem .6rem}
.gm-shield svg{display:block;width:100%;height:auto}
.gm-shield .br{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.7}
.gm-shield .num{font-family:var(--ff-display);font-size:15px;fill:var(--mute);text-anchor:middle}
.gm-shield .nm{font-family:var(--ff-body);font-size:13px;fill:var(--ink2);text-anchor:middle}
.gm-shield .role{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--gold-ink);text-anchor:middle}
.gm-shield .fig{cursor:pointer}
.gm-shield .fig .hit{fill:transparent}
.gm-shield .fig .pt{fill:var(--ink)}
.gm-shield .fig:hover .pt,.gm-shield .fig:focus-visible .pt{fill:var(--gold)}
.gm-shield .fig:focus{outline:none}
.gm-shield .fig:focus-visible .hit{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:3 3}
.gm-shield .fig.sel .hit{fill:rgba(196,162,101,.12);stroke:var(--gold);stroke-width:1.2}
.gm-empty{max-width:880px;border:1px dashed var(--line2);border-radius:var(--radius-panel);padding:2.6rem 1.4rem;
  text-align:center;color:var(--mute);font-size:1rem}

/* the houses */
.gm-houses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;max-width:880px}
.gm-house{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;align-items:center;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .8rem;color:var(--ink);
  font:inherit;box-shadow:inset 0 1px 0 var(--edge-hi)}
.gm-house:hover,.gm-house[aria-pressed="true"]{border-color:var(--gold)}
.gm-house:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gm-house .h{grid-column:1/-1;font-family:var(--ff-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.gm-house .fg{width:30px;height:39px;color:var(--ink)}
.gm-house .nm{font-size:1rem;line-height:1.2}
.gm-house .tp{grid-column:1/-1;font-size:.82rem;color:var(--mute);line-height:1.35}

/* the sixteen */
.gm-figs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.6rem;max-width:880px}
.gm-card{display:grid;justify-items:center;gap:.35rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem .3rem .6rem;cursor:pointer;color:var(--ink);font:inherit;box-shadow:inset 0 1px 0 var(--edge-hi)}
.gm-card:hover,.gm-card[aria-pressed="true"]{border-color:var(--gold)}
.gm-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gm-card svg{width:30px;height:39px;color:var(--ink)}
.gm-card span{font-size:.85rem;line-height:1.15;text-align:center}

/* the rail and the reading */
.gm-side{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;display:grid;gap:1.2rem}
.gm-side nav{display:grid}
.gm-side nav a{font-family:var(--ff-ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  text-decoration:none;padding:.42rem 0;border-bottom:1px solid var(--line)}
.gm-side nav a:hover{color:var(--gold)}
.gm-panel{border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--card);padding:1rem 1.1rem 1.1rem;
  border-radius:0 var(--radius) var(--radius) 0}
.gm-panel .top{display:flex;gap:.9rem;align-items:center;margin:0 0 .6rem}
.gm-panel .top svg{width:40px;height:52px;color:var(--ink);flex:0 0 auto}
.gm-panel h3{font-family:var(--ff-display);font-weight:500;font-size:1.25rem;margin:0;letter-spacing:.015em}
.gm-panel .en{color:var(--ink2);font-size:.95rem}
.gm-panel .rl{font-family:var(--ff-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .15rem}
.gm-panel dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;margin:.4rem 0 0;font-size:.92rem}
.gm-panel dt{font-family:var(--ff-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:.2rem}
.gm-panel dd{margin:0;color:var(--ink2)}
.gm-panel .who{color:var(--mute)}
.gm-panel .hm{margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);font-size:.95rem;line-height:1.5;color:var(--ink2)}
.gm-panel .jd{margin:.6rem 0 0;font-size:.98rem;line-height:1.55;color:var(--ink)}
.gm-panel .jd.silent{color:var(--mute);font-style:italic}
.gm-panel .hint{color:var(--mute);font-size:.92rem;margin:0}

/* folds */
details.gm-fold{margin:1.2rem 0 0;border-top:1px solid var(--line);max-width:82ch}
details.gm-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.gm-fold>summary::-webkit-details-marker{display:none}
details.gm-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.gm-fold[open]>summary::before{content:"\2212"}
details.gm-fold>div{padding:0 0 10px}

@media (max-width:1100px){.gm-figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gm-panel .x{display:none}
@media (max-width:1000px){
  .gm-wrap{grid-template-columns:minmax(0,1fr);padding:1.2rem 1rem 2rem}
  .gm-side{position:static;max-height:none;overflow:visible}
  .gm-side nav{display:none}
  .gm-panel{position:fixed;left:8px;right:8px;bottom:8px;z-index:40;max-height:58vh;overflow-y:auto;border-radius:var(--radius-panel);
    border-left:1px solid var(--gold);box-shadow:0 -6px 24px rgba(0,0,0,.35);transform:translateY(120%);transition:transform .2s ease}
  .gm-panel.open{transform:none}
  .gm-panel .x{display:block;position:sticky;top:0;margin:-.4rem -.5rem .2rem auto;background:var(--card);border:1px solid var(--line);
    border-radius:50%;width:34px;height:34px;color:var(--ink2);font-size:18px;line-height:1;cursor:pointer}
}
@media (max-width:1000px) and (prefers-reduced-motion:reduce){.gm-panel{transition:none}}
@media (max-width:700px){
  .gm-houses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm-marks,.gm-lines{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{.hc-navwrap,.gm-side nav,.gm-actions,details.gm-own,.hc-footer{display:none!important}}