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

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

.ic-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}
.ic-btn:hover{border-color:var(--gold);color:var(--ink)}
.ic-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ic-cast{font-size:12px;padding:.85rem 1.5rem;border-color:var(--gold);color:var(--gold-ink);background:var(--card);
  box-shadow:inset 0 1px 0 var(--edge-hi)}
.ic-cast:hover{background:var(--paper2)}
.ic-q{display:grid;gap:.35rem;max-width:720px;margin:0 0 1.1rem}
.ic-q input{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--ff-body);font-size:1.12rem;padding:.6rem .8rem;min-height:44px;width:100%;box-sizing:border-box}
.ic-q input:focus{outline:none;border-color:var(--gold)}
.ic-qshow{margin:0 0 1.2rem;padding:0 0 1rem;border-bottom:1px solid var(--line)}
.ic-qshow .ic-k{display:block;margin:0 0 .3rem}
.ic-qshow p{margin:0;font-size:1.15rem;font-style:italic;color:var(--ink);max-width:72ch}
.ic-tools{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:.4rem}
.ic-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 1rem}
.ic-note{font-size:.92rem;color:var(--mute);margin:0}

/* set the lines yourself */
details.ic-own{margin:0 0 1.6rem;max-width:760px}
details.ic-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.ic-own>summary::-webkit-details-marker{display:none}
details.ic-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.ic-own[open]>summary::before{content:"\2212"}
.ic-set{display:grid;gap:.35rem;margin:.8rem 0 .4rem}
.ic-set .row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ic-set .row>span{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);width:4.2rem}
.ic-set button{font-family:var(--ff-body);font-size:.92rem;background:transparent;color:var(--ink2);border:1px solid var(--line);
  border-radius:999px;padding:.28rem .7rem;cursor:pointer;min-height:32px}
.ic-set button:hover{border-color:var(--gold);color:var(--ink)}
.ic-set button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-ink);background:var(--card)}
.ic-set button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the result */
.ic-result{border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--card);box-shadow:inset 0 1px 0 var(--edge-hi);
  padding:1.6rem 1.8rem 1.4rem;max-width:920px}
.ic-result[hidden]{display:none}
.ic-figs{display:flex;align-items:flex-start;gap:1.6rem 2.4rem;flex-wrap:wrap;margin:0 0 1.4rem}
.ic-arrow{align-self:center;margin-top:-3rem}
.ic-fig{display:grid;grid-template-columns:1fr;gap:.7rem;justify-items:start;align-content:start;max-width:300px}
.ic-fig svg{width:96px;height:96px;color:var(--ink)}
.ic-fig .num{font-family:var(--ff-display);font-size:1rem;color:var(--mute);letter-spacing:.04em}
.ic-fig .nm{font-family:var(--ff-display);font-size:1.45rem;letter-spacing:.04em;color:var(--ink);line-height:1.15}
.ic-fig .tri{font-size:.88rem;color:var(--ink2);line-height:1.45;margin-top:.25rem}
.ic-fig .tri i{font-style:italic}
.ic-arrow{font-family:var(--ff-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.ic-figure .bar{fill:currentColor}
.ic-figure .mk{fill:none;stroke:var(--gold);stroke-width:2.2}
.ic-figure .new{opacity:0}
.ic-figure .new.in{opacity:1;transition:opacity .25s ease}
.ic-read{display:grid;gap:1.1rem}
.ic-part{margin:0}
.ic-part>.ic-k{display:block;margin:0 0 .3rem;color:var(--gold-ink)}
.ic-part p{margin:0;font-size:1.08rem;line-height:1.62;max-width:72ch}
.ic-part .sym{margin:.45rem 0 0;font-size:.97rem;color:var(--ink2)}
.ic-sep{border:0;border-top:1px solid var(--line);margin:.4rem 0}
.ic-more{font-family:var(--ff-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ic-fig .tri .lg{color:var(--mute);font-size:.82rem}
.ic-h{font-family:var(--ff-display);font-weight:500;font-size:1.3rem;letter-spacing:.02em;margin:.5rem 0 0;color:var(--ink)}
.ic-qs ul{margin:0;padding:0 0 0 1.1rem;display:grid;gap:.2rem}
.ic-qs li{font-size:1.08rem;line-height:1.5;font-style:italic;color:var(--ink)}
.ic-part p.ic-oracle{font-family:var(--ff-body);font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--ink);margin:0 0 .6rem;
  padding-left:.9rem;border-left:2px solid var(--gold)}
.ic-small p{font-size:.98rem;color:var(--ink2)}
details.ic-old{border:1px solid var(--line);border-radius:var(--radius);padding:0 1rem;margin-top:.6rem}
details.ic-old>summary{cursor:pointer;list-style:none;font-family:var(--ff-ui);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);padding:.8rem 0;display:flex;align-items:center;gap:10px}
details.ic-old>summary::-webkit-details-marker{display:none}
details.ic-old>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.ic-old[open]>summary::before{content:"\2212"}
details.ic-old>div{display:grid;gap:1rem;padding:.2rem 0 1rem}
details.ic-old .ic-part p{font-size:1rem;color:var(--ink2)}
details.ic-app{border-top:1px solid var(--line);padding-top:.2rem}
details.ic-app>summary{cursor:pointer;list-style:none;font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);padding:.5rem 0}
details.ic-app>summary::-webkit-details-marker{display:none}
details.ic-app>summary::after{content:" +";color:var(--gold-ink)}
details.ic-app[open]>summary::after{content:" \2212"}
details.ic-app p{font-size:.98rem;color:var(--ink2);margin:0 0 .6rem}

/* the sixty-four, folded */
.ic-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.5rem;max-width:920px}
.ic-cell{display:grid;justify-items:center;gap:.3rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:.55rem .2rem .45rem;cursor:pointer;color:var(--ink);font:inherit;box-shadow:inset 0 1px 0 var(--edge-hi)}
.ic-cell:hover,.ic-cell[aria-pressed="true"]{border-color:var(--gold)}
.ic-cell:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ic-cell svg{width:34px;height:34px;color:var(--ink)}
.ic-cell .n{font-family:var(--ff-ui);font-size:10px;letter-spacing:.08em;color:var(--mute)}
.ic-cell .t{font-size:.78rem;line-height:1.15;text-align:center;color:var(--ink2);min-height:2.3em;padding:0 .15rem}

/* rail */
.ic-side{position:sticky;top:calc(var(--hc-nav-h,150px) + 1rem)}
.ic-side nav{display:grid}
.ic-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)}
.ic-side nav a:hover{color:var(--gold)}

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

@media (max-width:1000px){
  .ic-wrap{grid-template-columns:minmax(0,1fr);padding:1.2rem 1rem 2rem}
  .ic-side{display:none}
  .ic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ic-result{padding:1.1rem 1rem}
}
@media (max-width:520px){.ic-fig svg{width:72px;height:72px}.ic-figs{gap:1rem}.ic-arrow{margin-top:0}}
@media (prefers-reduced-motion:reduce){.ic-figure .new{opacity:1}.ic-figure .new.in{transition:none}}
@media print{.hc-navwrap,.ic-side,.ic-actions,details.ic-own,.hc-footer,#hexagrams{display:none!important}}