:root { --resource-red:#a91f3a; --resource-deep:#571426; --resource-gold:#efba52; --resource-cream:#fffaf3; --resource-ink:#30141e; --resource-muted:#76636b; --resource-line:#e6d8d2; }
.resource-facets{display:flex;gap:.7rem;flex-wrap:wrap;grid-column:1/-1}
.resource-facets select{padding:.7rem 1rem;border:1px solid var(--resource-line);border-radius:12px;background:#fff;color:var(--resource-ink);font:600 .78rem var(--sans);min-width:150px;max-width:100%}
.resource-card.reveal{animation-delay:calc(min(var(--order),6) * 35ms)}
* { box-sizing:border-box; }
.resources-page { background:#f8f3ed; color:var(--resource-ink); }
.resources-topbar { border-bottom:1px solid #eaded8; background:rgba(255,250,244,.94); backdrop-filter:blur(14px); }
.resources-back { display:inline-flex; align-items:center; gap:.55rem; padding:.65rem .9rem; border:1px solid #d7c6c0; border-radius:11px; color:var(--resource-ink); font:750 .7rem var(--sans); text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.resources-back:hover { transform:translateX(-3px); border-color:#bb4357; background:#fff; }
.resources-main { width:min(100% - 3rem,1480px); margin:0 auto; padding:5rem 0 7rem; }
.resources-hero { min-height:620px; padding:clamp(2rem,5vw,5.4rem); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(370px,.85fr); align-items:center; gap:4rem; position:relative; overflow:hidden; border-radius:28px; background:radial-gradient(circle at 80% 20%,rgba(239,186,82,.19),transparent 25%),linear-gradient(135deg,#541324 0%,#871d35 58%,#ad2c46 100%); box-shadow:0 22px 65px rgba(70,20,35,.18); color:#fff; }
.resources-hero::before { content:""; width:500px; height:500px; position:absolute; right:-170px; bottom:-240px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02); }
.resources-hero__copy { position:relative; z-index:2; }
.resources-eyebrow { display:flex; align-items:center; gap:.7rem; margin:0 0 1.3rem; color:#ffd477; font:500 .65rem var(--mono); letter-spacing:.1em; }
.resources-eyebrow::before { content:""; width:34px; height:1px; background:currentColor; }
.resources-hero h1 { max-width:900px; margin:0; color:#fff; font:800 clamp(3.3rem,6.2vw,6.8rem)/.95 var(--sans); letter-spacing:-.07em; }
.resources-hero h1 em { color:#f5c665; font-style:normal; }
.resources-hero__copy>p:not(.resources-eyebrow) { max-width:700px; margin:2rem 0 0; color:#f4dfe3; font:500 clamp(.87rem,1.2vw,1.05rem)/1.7 var(--sans); }
.resources-hero__meta { margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.65rem; }
.resources-hero__meta>span { padding:.6rem .8rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(42,8,19,.2); color:#f9edf0; font:600 .58rem var(--mono); }
.resources-hero__meta b { color:#ffd477; }
.resources-hero__visual { min-height:430px; position:relative; perspective:1100px; }
.hero-book { width:230px; height:330px; padding:1.7rem; display:flex; flex-direction:column; position:absolute; border-radius:8px 18px 18px 8px; box-shadow:-8px 10px 0 rgba(41,7,17,.28),0 30px 60px rgba(32,6,14,.32); transform-style:preserve-3d; }
.hero-book::before { content:""; position:absolute; left:13px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.35); }
.hero-book span,.hero-book small { font:600 .6rem var(--mono); letter-spacing:.1em; }
.hero-book b { margin:auto 0; font:800 3.9rem/.9 var(--sans); letter-spacing:-.08em; }
.hero-book--front { right:16%; top:42px; z-index:2; background:#fffaf3; color:#75172d; transform:rotateY(-10deg) rotateZ(3deg); animation:book-float 5s ease-in-out infinite; }
.hero-book--front small { color:#ad7c24; }
.hero-book--back { right:45%; top:96px; background:#e7ad42; color:#531326; transform:rotateY(10deg) rotateZ(-7deg); animation:book-float-back 6s ease-in-out infinite; }
.hero-orbit { width:360px; height:360px; position:absolute; right:2%; top:30px; border:1px solid rgba(255,255,255,.2); border-radius:50%; animation:orbit 24s linear infinite; }
.hero-orbit i { width:38px; height:38px; display:grid; place-items:center; position:absolute; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:#6f172c; color:#ffd477; font:700 .62rem var(--mono); font-style:normal; }
.hero-orbit i:nth-child(1) { left:-19px; top:160px; }.hero-orbit i:nth-child(2) { right:-19px; top:160px; }.hero-orbit i:nth-child(3) { left:160px; top:-19px; }.hero-orbit i:nth-child(4) { left:160px; bottom:-19px; }
@keyframes book-float { 50% { transform:rotateY(-7deg) rotateZ(1deg) translateY(-13px); } }
@keyframes book-float-back { 50% { transform:rotateY(8deg) rotateZ(-5deg) translateY(11px); } }
@keyframes orbit { to { transform:rotate(360deg); } }
.resource-path { margin:1.4rem 0 5.5rem; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--resource-line); border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 12px 35px rgba(67,29,38,.05); }
.resource-path>button { min-height:142px; padding:1.35rem 3.4rem 1.35rem 1.5rem; display:grid; grid-template-columns:35px 1fr; align-content:center; gap:.35rem .8rem; position:relative; border:0; background:#fff; color:inherit; cursor:pointer; text-align:left; transition:background .2s ease,color .2s ease; }
.resource-path>button+button { border-left:1px solid var(--resource-line); }
.resource-path>button:hover { background:#fff6ef; }
.resource-path>button:focus-visible { z-index:2; outline:3px solid #bf324c; outline-offset:-4px; }
.resource-path>button i { width:30px; height:30px; display:grid; place-items:center; position:absolute; right:1rem; top:50%; border-radius:50%; background:#f6e4e7; color:var(--resource-red); font:800 .72rem var(--sans); font-style:normal; opacity:0; transform:translate(-8px,-50%); transition:opacity .2s ease,transform .2s ease,background .2s ease; }
.resource-path>button:hover i,.resource-path>button:focus-visible i { opacity:1; transform:translate(0,-50%); background:#edc7ce; }
.resource-path span { grid-row:1/3; color:var(--resource-red); font:500 .65rem var(--mono); }
.resource-path b { font:800 .8rem var(--sans); }
.resource-path small { color:var(--resource-muted); font:500 .68rem/1.55 var(--sans); }
.resources-library { scroll-margin-top:90px; }
.resources-heading { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.55fr); align-items:end; gap:2rem; margin-bottom:1.7rem; }
.resources-section-label { display:flex; gap:.7rem; margin:0 0 .7rem; color:#a67723; font:500 .62rem var(--mono); letter-spacing:.08em; }
.resources-heading h2 { margin:0; color:var(--resource-ink); font:800 clamp(2.2rem,4.5vw,4.8rem)/1 var(--sans); letter-spacing:-.06em; }
.resources-heading>p { margin:0 0 .35rem; color:var(--resource-muted); font:500 .78rem/1.65 var(--sans); }
.resource-toolbar { padding:1rem; display:grid; grid-template-columns:minmax(270px,1fr) auto; align-items:center; gap:1rem; position:sticky; top:82px; z-index:5; border:1px solid #dbcac3; border-radius:17px; background:rgba(255,250,244,.9); backdrop-filter:blur(16px); box-shadow:0 12px 30px rgba(58,27,34,.07); }
.resource-search { min-height:50px; display:flex; align-items:center; gap:.75rem; padding:0 .9rem; border:1px solid #d7c5c0; border-radius:12px; background:#fff; }
.resource-search span { color:var(--resource-red); font-size:1.35rem; }
.resource-search input { width:100%; border:0; outline:0; background:transparent; color:var(--resource-ink); font:650 .72rem var(--sans); }
.resource-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; }
.resource-filters button { min-height:38px; padding:.55rem .75rem; border:1px solid #dbcac3; border-radius:999px; background:#fff; color:#69525c; cursor:pointer; font:750 .6rem var(--sans); transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease; }
.resource-filters button:hover { transform:translateY(-2px); border-color:#ba4359; color:#8e1c33; }
.resource-filters button.is-active { border-color:var(--resource-red); background:var(--resource-red); color:#fff; }
.resource-results-line { min-height:48px; display:flex; align-items:center; justify-content:space-between; color:#856f78; font:500 .58rem var(--mono); }
.resource-results-line button { border:0; background:transparent; color:#9b2038; cursor:pointer; font:700 .59rem var(--mono); text-decoration:underline; text-underline-offset:4px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.resource-card { min-height:420px; position:relative; overflow:hidden; border:1px solid var(--resource-line); border-radius:20px; background:#fff; box-shadow:0 12px 34px rgba(65,28,38,.06); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease; }
.resource-card:hover { transform:translateY(-7px); border-color:#c76475; box-shadow:0 22px 46px rgba(83,29,45,.13); }
.resource-card[hidden] { display:none; }
.resource-card__button { width:100%; height:100%; padding:0; display:grid; grid-template-rows:245px 1fr; border:0; background:transparent; color:inherit; cursor:pointer; text-align:left; }
.resource-card__visual { display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(140deg,#f5e9df,#fffaf5); }
.resource-card__visual::after { content:""; width:210px; height:210px; position:absolute; right:-95px; bottom:-110px; border:1px solid rgba(130,35,56,.2); border-radius:50%; box-shadow:0 0 0 35px rgba(130,35,56,.035),0 0 0 70px rgba(130,35,56,.025); }
.resource-card__visual img { width:auto; max-width:72%; height:205px; position:relative; z-index:2; object-fit:contain; filter:drop-shadow(0 14px 12px rgba(54,22,30,.24)); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.resource-card:hover img { transform:translateY(-5px) rotate(-1deg) scale(1.035); }
.resource-card__visual--digital { background:linear-gradient(135deg,#6d172c,#ad2843); }
.resource-card__monogram { width:145px; height:170px; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; z-index:2; border:1px solid rgba(255,255,255,.35); border-radius:8px 17px 17px 8px; background:rgba(255,255,255,.1); box-shadow:-7px 8px 0 rgba(48,9,20,.28); color:#fff; }
.resource-card__monogram::before { content:""; position:absolute; left:10px; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.3); }
.resource-card__monogram b { padding-left:.45rem; font:800 2.2rem/.9 var(--sans); letter-spacing:-.07em; }
.resource-card__monogram small { padding-left:.45rem; color:#ffd477; font:600 .5rem/1.35 var(--mono); }
.resource-card__badges { display:flex; gap:.35rem; position:absolute; left:.8rem; top:.8rem; z-index:3; }
.resource-card__badges span { padding:.34rem .48rem; border-radius:999px; background:rgba(255,255,255,.9); color:#75172d; font:750 .48rem var(--mono); box-shadow:0 3px 10px rgba(56,20,30,.08); }
.resource-card__body { padding:1.15rem 1.2rem 1.25rem; display:flex; flex-direction:column; }
.resource-card__source { margin:0 0 .5rem; color:#a77721; font:500 .52rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.resource-card h3 { margin:0; color:var(--resource-ink); font:800 1.16rem/1.15 var(--sans); letter-spacing:-.035em; }
.resource-card__summary { margin:.65rem 0 1rem; color:var(--resource-muted); font:500 .68rem/1.52 var(--sans); }
.resource-card__open { margin-top:auto; display:flex; align-items:center; justify-content:space-between; color:var(--resource-red); font:800 .62rem var(--sans); }
.resource-card__open i { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#f7e5e8; font-style:normal; transition:transform .2s ease,background .2s ease; }
.resource-card:hover .resource-card__open i { transform:translateX(3px); background:#f0c8cf; }
.resource-empty { padding:3rem; border:1px dashed #d3bfc0; border-radius:18px; color:var(--resource-muted); text-align:center; }
.resource-note { margin-top:3rem; padding:1.25rem 1.4rem; display:flex; align-items:flex-start; gap:1rem; border:1px solid #e2c36e; border-radius:17px; background:#fff3cf; }
.resource-note>span { width:32px; height:32px; display:grid; place-items:center; flex:0 0 32px; border-radius:50%; background:#7c1b31; color:#fff; font-weight:800; }
.resource-note b { color:#6d172c; font:800 .72rem var(--sans); }.resource-note p { margin:.25rem 0 0; color:#765b32; font:500 .66rem/1.5 var(--sans); }
.resource-dialog { width:min(100% - 2rem,920px); max-height:calc(100dvh - 2rem); padding:0; overflow:auto; border:0; border-radius:23px; background:#fffaf4; box-shadow:0 35px 100px rgba(45,9,20,.35); color:var(--resource-ink); opacity:0; transform:translateY(18px) scale(.985); transition:opacity .22s ease,transform .22s ease,display .22s allow-discrete,overlay .22s allow-discrete; }
.resource-dialog[open] { opacity:1; transform:none; }
@starting-style { .resource-dialog[open] { opacity:0; transform:translateY(18px) scale(.985); } }
.resource-dialog::backdrop { background:rgba(40,11,20,.64); backdrop-filter:blur(7px); opacity:0; transition:opacity .22s ease,display .22s allow-discrete,overlay .22s allow-discrete; }.resource-dialog[open]::backdrop { opacity:1; }@starting-style { .resource-dialog[open]::backdrop { opacity:0; } }
.resource-dialog__close { width:38px; height:38px; position:sticky; float:right; right:1rem; top:1rem; z-index:4; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(70,14,30,.72); color:#fff; cursor:pointer; font-size:1.2rem; backdrop-filter:blur(8px); }
.resource-detail { display:grid; grid-template-columns:minmax(270px,.85fr) minmax(0,1.35fr); }
.resource-detail__visual { min-height:610px; padding:2rem; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(145deg,#6b172b,#a52742); }
.resource-detail__visual::after { content:"OFFICIAL"; position:absolute; left:-.2rem; bottom:-1.2rem; color:rgba(255,255,255,.07); font:900 6rem var(--sans); letter-spacing:-.08em; }
.resource-detail__visual img { max-width:78%; max-height:430px; position:relative; z-index:2; object-fit:contain; filter:drop-shadow(0 22px 17px rgba(35,4,13,.35)); }
.resource-detail__visual .resource-card__monogram { width:210px; height:280px; }
.resource-detail__visual .resource-card__monogram b { font-size:3rem; }
.resource-detail__content { padding:3.2rem 2.5rem 2.5rem; }
.resource-detail__kicker { color:#a87820; font:500 .58rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.resource-detail h2 { margin:.8rem 0 .9rem; color:var(--resource-ink); font:800 clamp(1.8rem,3vw,3rem)/1.02 var(--sans); letter-spacing:-.055em; }
.resource-detail__description { color:#6e5c64; font:500 .77rem/1.65 var(--sans); }
.resource-detail__facts { margin:1.25rem 0; display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
.resource-detail__facts span { padding:.65rem .7rem; border:1px solid #e7d9d4; border-radius:10px; background:#fff; color:#6c5961; font:600 .57rem/1.35 var(--mono); }
.resource-detail h3 { margin:1.4rem 0 .6rem; color:#7e1c32; font:800 .75rem var(--sans); }
.resource-detail ul { margin:0; padding:0; display:grid; gap:.5rem; list-style:none; }.resource-detail li { display:flex; gap:.55rem; color:#64525a; font:500 .68rem/1.5 var(--sans); }.resource-detail li::before { content:"✓"; color:#b27d1d; font-weight:800; }
.resource-detail__best { margin:1.3rem 0 0; padding:.85rem 1rem; border-radius:12px; background:#fff0c8; color:#6a4b19; font:600 .66rem/1.5 var(--sans); }
.resource-detail__outage { margin:1rem 0 0; padding:.75rem .85rem; border:1px solid #e4ca94; border-radius:10px; background:#fff8e8; color:#755920; font:600 .57rem/1.5 var(--sans); }
.resource-detail__actions { margin-top:1.4rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }.resource-detail__actions a { min-height:48px; padding:.75rem 1rem; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border-radius:11px; background:var(--resource-red); color:#fff; font:800 .68rem var(--sans); text-decoration:none; box-shadow:0 5px 0 #671329; transition:transform .15s ease,box-shadow .15s ease; }.resource-detail__actions a:hover { transform:translateY(-2px); box-shadow:0 7px 0 #671329; }.resource-detail__actions a.resource-detail__official { border:1px solid #d8b965; background:#fff8e8; color:#6a4b19; box-shadow:0 5px 0 #e3cca1; }.resource-detail__actions a.resource-detail__official:hover { box-shadow:0 7px 0 #e3cca1; }.resource-detail__actions small { color:#8b747d; font:500 .51rem/1.4 var(--mono); }
.resource-card.reveal { animation:resource-rise .45s both; animation-delay:calc(min(var(--order),6) * 35ms); }
@keyframes resource-rise { from { opacity:0; transform:translateY(18px); } }
@media (max-width:1100px) { .resources-hero { grid-template-columns:1fr; }.resources-hero__visual { display:none; }.resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.resource-toolbar { grid-template-columns:1fr; }.resource-filters { justify-content:flex-start; } }
@media (max-width:760px) { .resources-main { width:min(100% - 1rem,680px); padding:2.2rem 0 4rem; }.resources-hero { min-height:auto; padding:2.2rem 1.25rem; border-radius:20px; }.resources-hero h1 { font-size:clamp(2.8rem,14vw,4.2rem); }.resource-path { grid-template-columns:1fr; margin-bottom:4rem; }.resource-path>button+button { border-top:1px solid var(--resource-line); border-left:0; }.resource-path>button i { opacity:1; transform:translate(0,-50%); }.resources-heading { grid-template-columns:1fr; }.resource-toolbar { position:static; }.resource-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:none; }.resource-filters::-webkit-scrollbar { display:none; }.resource-filters button { flex:0 0 auto; }.resource-grid { grid-template-columns:1fr; }.resource-card { min-height:390px; }.resource-card__button { grid-template-rows:225px 1fr; }.resource-detail { grid-template-columns:1fr; }.resource-detail__visual { min-height:280px; }.resource-detail__visual img { max-height:230px; }.resource-detail__content { padding:1.5rem 1.2rem 1.4rem; }.resource-detail__facts { grid-template-columns:1fr; }.resource-detail__actions { align-items:stretch; flex-direction:column; }.resource-detail__actions a { width:100%; }.resource-dialog__close { position:fixed; right:calc(50% - min(50% - 1rem,450px) + .8rem); }.resources-topbar .resources-back { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }