.ichingo-guides-page { --ig-ink:#142821; --ig-green:#285d4b; --ig-green-2:#3f7863; --ig-mint:#eaf2ee; --ig-paper:#f7f5ef; --ig-gold:#d6aa4d; --ig-line:#dbe5df; width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:30px 0 80px; color:var(--ig-ink); font-family:inherit; }
.ichingo-guides-page *, .ichingo-guides-page *::before, .ichingo-guides-page *::after { box-sizing:border-box; }
.ichingo-guides-page button, .ichingo-guides-page input { font:inherit; }
.ichingo-guides-page button { cursor:pointer; }
.ichingo-guides-page [hidden] { display:none !important; }
.ichingo-guides-page .screen-reader-text { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.ichingo-guides-page .ig-icon { width:20px; height:20px; flex:0 0 20px; }
.ichingo-guides-hero { position:relative; min-height:500px; overflow:hidden; display:grid; align-content:end; border-radius:26px; background:#10241e; box-shadow:0 20px 60px rgba(21,48,38,.14); isolation:isolate; }
.ichingo-guides-hero__media, .ichingo-guides-hero__media img, .ichingo-guides-hero__veil { position:absolute; inset:0; width:100%; height:100%; }
.ichingo-guides-hero__media img { object-fit:cover; object-position:center; }
.ichingo-guides-hero__veil { z-index:1; background:linear-gradient(90deg,rgba(7,22,18,.96) 0%,rgba(8,27,21,.82) 37%,rgba(10,29,23,.25) 72%,rgba(10,29,23,.1) 100%),linear-gradient(0deg,rgba(8,22,18,.7),transparent 42%); }
.ichingo-guides-hero__content { position:relative; z-index:2; width:min(610px,64%); padding:clamp(38px,5vw,72px) clamp(28px,5vw,70px) 126px; color:white; }
.ichingo-guides-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#efd17f; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ichingo-guides-eyebrow .ig-icon { width:16px; height:16px; }
.ichingo-guides-hero h1 { margin:18px 0 16px; max-width:12ch; color:#fff; font-size:clamp(40px,5vw,68px); line-height:1.01; letter-spacing:-.055em; font-weight:760; text-wrap:balance; }
.ichingo-guides-hero__content > p { max-width:58ch; margin:0; color:rgba(255,255,255,.78); font-size:16px; line-height:1.75; }
.ichingo-guides-hero__facts { display:flex; flex-wrap:wrap; gap:25px; margin-top:30px; }
.ichingo-guides-hero__facts span { display:grid; gap:2px; color:rgba(255,255,255,.62); font-size:11px; letter-spacing:.04em; }
.ichingo-guides-hero__facts strong { color:white; font-size:21px; letter-spacing:-.02em; }
.ichingo-guides-tabs { position:absolute; z-index:3; inset-inline:28px; bottom:24px; display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(760px,calc(100% - 56px)); padding:7px; border:1px solid rgba(255,255,255,.16); border-radius:17px; background:rgba(9,29,23,.72); box-shadow:0 10px 34px rgba(0,0,0,.16); backdrop-filter:blur(18px); }
.ichingo-guides-tab { display:flex; align-items:center; gap:12px; min-height:65px; padding:10px 14px; border:0; border-radius:12px; background:transparent; color:rgba(255,255,255,.68); text-align:start; transition:background .2s,color .2s,transform .2s; }
.ichingo-guides-tab:hover { color:white; background:rgba(255,255,255,.08); }
.ichingo-guides-tab.is-active { color:var(--ig-ink); background:#fffdf6; box-shadow:0 8px 22px rgba(0,0,0,.15); }
.ichingo-guides-tab span { display:grid; gap:2px; font-weight:720; line-height:1.25; }
.ichingo-guides-tab small { font-size:9px; opacity:.62; letter-spacing:.13em; text-transform:uppercase; }
.ichingo-guides-tab b { margin-inline-start:auto; display:grid; place-items:center; min-width:28px; height:28px; border-radius:9px; background:var(--ig-mint); color:var(--ig-green); font-size:11px; }
.ichingo-guides-tabpanel { margin-top:26px; }
.ichingo-guides-toolbar { display:flex; align-items:end; justify-content:space-between; gap:28px; padding:28px 30px 22px; border:1px solid var(--ig-line); border-bottom:0; border-radius:20px 20px 0 0; background:#fff; }
.ichingo-guides-toolbar__intro > span { color:var(--ig-green-2); font-size:10px; font-weight:850; letter-spacing:.14em; }
.ichingo-guides-toolbar h2 { margin:7px 0 4px; color:var(--ig-ink); font-size:clamp(22px,2.5vw,32px); line-height:1.15; letter-spacing:-.035em; }
.ichingo-guides-toolbar p { margin:0; color:#687d74; font-size:13px; }
.ichingo-guides-search { position:relative; flex:0 1 390px; display:flex; align-items:center; }
.ichingo-guides-search > .ig-icon { position:absolute; inset-inline-start:16px; width:18px; color:#6b8178; pointer-events:none; }
.ichingo-guides-search input { width:100%; min-height:50px; padding:10px 46px; border:1px solid #d6e1dc; border-radius:14px; outline:0; background:#f6f8f6; color:var(--ig-ink); font-size:14px; transition:border-color .2s,box-shadow .2s,background .2s; }
.ichingo-guides-search input:focus { border-color:#6e9c88; background:white; box-shadow:0 0 0 4px rgba(66,119,96,.1); }
.ichingo-guides-search__clear { position:absolute; inset-inline-end:8px; width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:#5f766c; font-size:22px; }
.ichingo-guides-categories { display:grid; grid-template-columns:repeat(9,minmax(100px,1fr)); gap:7px; padding:14px 18px 18px; border-inline:1px solid var(--ig-line); background:#fff; }
.ichingo-guides-pill { min-width:0; display:grid; justify-items:center; align-content:center; gap:8px; min-height:80px; padding:9px 7px; border:1px solid transparent; border-radius:12px; background:#f4f7f5; color:#536b61; font-size:11px; font-weight:720; line-height:1.2; text-align:center; transition:transform .18s,background .18s,border-color .18s,color .18s; }
.ichingo-guides-pill:hover { transform:translateY(-2px); border-color:#cbdcd4; background:#fff; color:var(--ig-green); }
.ichingo-guides-pill.is-active { border-color:#487a65; background:var(--ig-green); color:white; box-shadow:0 7px 18px rgba(40,93,75,.16); }
.ichingo-guides-pill .ig-icon { width:21px; height:21px; }
.ichingo-guides-subpills { padding:0 18px 18px; border-inline:1px solid var(--ig-line); background:#fff; }
.ichingo-guides-subpills__group:not([hidden]) { display:flex; flex-wrap:wrap; gap:7px; padding:13px; border-radius:12px; background:#f5f7f4; }
.ichingo-guides-subpill { padding:8px 12px; border:1px solid #d7e1dc; border-radius:999px; background:white; color:#5c7168; font-size:11px; font-weight:680; }
.ichingo-guides-subpill:hover, .ichingo-guides-subpill.is-active { border-color:#cca347; background:#f8edcc; color:#4f3b10; }
.ichingo-guides-results-bar { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:0 22px; border:1px solid var(--ig-line); border-radius:0 0 20px 20px; background:#fafbf9; }
.ichingo-guides-results-bar p { margin:0; color:#718078; font-size:11px; font-weight:650; }
.ichingo-guides-results-bar button { border:0; background:transparent; color:var(--ig-green); font-size:11px; font-weight:750; }
.ichingo-guides-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:25px; }
.ichingo-guide-card { min-width:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--ig-line); border-radius:18px; background:#fff; color:inherit; text-decoration:none; box-shadow:0 5px 18px rgba(16,49,38,.045); transition:transform .24s ease,box-shadow .24s ease,border-color .24s; }
.ichingo-guide-card:hover { transform:translateY(-5px); border-color:#bfd2ca; box-shadow:0 18px 42px rgba(16,49,38,.11); text-decoration:none; }
.ichingo-guide-card:focus-visible { outline:3px solid rgba(50,112,87,.32); outline-offset:3px; }
.ichingo-guide-card__thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#eaf1ed; }
.ichingo-guide-card__thumb::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(8,22,18,.25)); pointer-events:none; }
.ichingo-guide-card__thumb > img { width:100%; height:100%; display:block; object-fit:cover; margin:0; transition:transform .6s ease; }
.ichingo-guide-card:hover .ichingo-guide-card__thumb > img { transform:scale(1.035); }
.ichingo-guide-card__thumb-fallback { position:relative; width:100%; height:100%; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 78% 25%,rgba(214,170,77,.33),transparent 28%),linear-gradient(145deg,#244f40,#0e2821); color:#f1d48b; }
.ichingo-guide-card__thumb-fallback::before { content:""; position:absolute; width:150px; height:150px; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.035),0 0 0 62px rgba(255,255,255,.025); }
.ichingo-guide-card__thumb-fallback::after { content:""; position:absolute; inset:auto -10% -35% 38%; height:85%; border-radius:50% 50% 0 0; background:rgba(214,170,77,.1); transform:rotate(-12deg); }
.ichingo-guide-card__thumb-fallback .ig-icon { position:relative; z-index:1; width:52px; height:52px; opacity:.9; }
.ichingo-guide-card__cat { position:absolute; z-index:2; top:13px; inset-inline-start:13px; display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 70px); padding:7px 10px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(10,31,24,.78); color:white; font-size:10px; font-weight:720; backdrop-filter:blur(10px); }
.ichingo-guide-card__cat .ig-icon { width:14px; height:14px; }
.ichingo-guide-card__media { position:absolute; z-index:2; top:13px; inset-inline-end:13px; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#f3d680; color:#2e2a1a; box-shadow:0 5px 16px rgba(0,0,0,.16); }
.ichingo-guide-card__media .ig-icon { width:16px; height:16px; }
.ichingo-guide-card__body { flex:1; display:flex; flex-direction:column; padding:20px 20px 17px; }
.ichingo-guide-card h3 { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:0 0 7px; color:var(--ig-ink); font-size:18px; line-height:1.36; letter-spacing:-.022em; }
.ichingo-guide-card__subtitle { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:35px; margin:0 0 9px; color:var(--ig-green-2); font-size:11px; font-weight:690; line-height:1.55; }
.ichingo-guide-card__summary { display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical; min-height:58px; margin:0 0 17px; color:#667970; font-size:12px; line-height:1.65; }
.ichingo-guide-card__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.ichingo-guide-card__chips > span { display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border-radius:8px; background:#f2f6f3; color:#61756c; font-size:9px; font-weight:700; }
.ichingo-guide-card__chips .ig-icon { width:13px; height:13px; }
.ichingo-guide-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid #e6ece8; color:var(--ig-green); font-size:11px; font-weight:800; }
.ichingo-guide-card__footer .ig-icon { width:16px; height:16px; transition:transform .2s; }
.ichingo-guide-card:hover .ichingo-guide-card__footer .ig-icon { transform:translateX(4px); }
[dir=rtl] .ichingo-guide-card:hover .ichingo-guide-card__footer .ig-icon { transform:translateX(-4px) rotate(180deg); }
[dir=rtl] .ichingo-guide-card__footer .ig-icon { transform:rotate(180deg); }
.ichingo-guides-state { margin-top:25px; padding:35px; border:1px dashed #cad9d2; border-radius:18px; background:#fafbf9; color:#60736a; text-align:center; font-size:13px; }
.ichingo-guides-state button { display:block; margin:14px auto 0; padding:9px 16px; border:0; border-radius:10px; background:var(--ig-green); color:#fff; font-size:12px; font-weight:750; }
.ichingo-guides-load-more-wrap { display:flex; justify-content:center; padding:30px 0 0; }
.ichingo-guides-load-more-wrap button { display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 19px; border:1px solid #bdd0c7; border-radius:12px; background:white; color:var(--ig-green); font-size:12px; font-weight:780; box-shadow:0 6px 18px rgba(24,68,51,.06); }
.ichingo-guides-load-more-wrap button:disabled { opacity:.55; cursor:wait; }
.ichingo-guides-readiness { display:grid; gap:22px; }
.ichingo-guides-skeleton { min-height:370px; border-radius:18px; background:linear-gradient(100deg,#edf2ef 20%,#f9faf8 40%,#edf2ef 60%); background-size:200% 100%; animation:ig-shimmer 1.3s linear infinite; }
@keyframes ig-shimmer { to { background-position:-200% 0; } }
@media (min-width:1450px) { .ichingo-guides-page { width:min(1380px,calc(100% - 64px)); } .ichingo-guides-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:980px) { .ichingo-guides-page { width:min(100% - 28px,900px); padding-top:20px; } .ichingo-guides-hero { min-height:520px; } .ichingo-guides-hero__content { width:72%; } .ichingo-guides-categories { grid-template-columns:repeat(5,1fr); } .ichingo-guides-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .ichingo-guides-page { width:calc(100% - 24px); padding:14px 0 55px; } .ichingo-guides-hero { min-height:650px; border-radius:20px; align-content:start; } .ichingo-guides-hero__media img { object-position:66% center; } .ichingo-guides-hero__veil { background:linear-gradient(180deg,rgba(7,24,19,.62),rgba(7,24,19,.88) 55%,#071b16 86%); } .ichingo-guides-hero__content { width:100%; padding:38px 25px 165px; } .ichingo-guides-hero h1 { max-width:13ch; font-size:42px; } .ichingo-guides-hero__content > p { font-size:14px; } .ichingo-guides-hero__facts { gap:18px; } .ichingo-guides-tabs { inset-inline:15px; bottom:15px; width:calc(100% - 30px); grid-template-columns:1fr; } .ichingo-guides-tab { min-height:58px; } .ichingo-guides-toolbar { align-items:stretch; flex-direction:column; padding:23px 20px 18px; } .ichingo-guides-search { flex-basis:auto; width:100%; } .ichingo-guides-categories { display:flex; overflow-x:auto; padding:12px 12px 15px; scroll-snap-type:x proximity; scrollbar-width:thin; } .ichingo-guides-pill { flex:0 0 105px; min-height:75px; scroll-snap-align:start; } .ichingo-guides-subpills { padding-inline:12px; overflow:hidden; } .ichingo-guides-subpills__group:not([hidden]) { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; } .ichingo-guides-grid { grid-template-columns:1fr; gap:17px; } .ichingo-guide-card__body { padding:18px; } }
@media (max-width:380px) { .ichingo-guides-page { width:calc(100% - 18px); } .ichingo-guides-hero h1 { font-size:36px; } .ichingo-guides-hero__facts span:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) { .ichingo-guides-page *, .ichingo-guides-page *::before, .ichingo-guides-page *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }