@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');
:root{--ink:#102a2c;--muted:#6d7d7c;--paper:#fbfaf6;--teal:#0b474b;--deep:#062f33;--gold:#d7a84b;--line:rgba(16,42,44,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.page-shell{min-height:100vh;overflow:hidden}
.site-header{height:88px;max-width:1440px;margin:auto;padding:0 5vw;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none}.brand>img{width:43px;height:48px;object-fit:contain;filter:brightness(0) saturate(100%) invert(21%) sepia(20%) saturate(1310%) hue-rotate(136deg) brightness(89%)}.brand-copy{display:grid;line-height:1}.brand-copy strong{font-size:1.06rem;letter-spacing:.17em}.brand-copy small{margin-top:6px;font-weight:600;font-size:.6rem;letter-spacing:.18em;color:var(--muted)}.header-meta{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:.8rem;font-weight:600}.header-meta time{padding-left:12px;border-left:1px solid var(--line)}.live-dot{width:8px;height:8px;border-radius:50%;background:#42ad7c;box-shadow:0 0 0 4px rgba(66,173,124,.13)}
.hero{position:relative;min-height:480px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.75fr);align-items:center;overflow:hidden;color:white;background:var(--deep)}.hero:before{content:"";position:absolute;inset:0;opacity:.23;background-image:radial-gradient(rgba(255,255,255,.18) .7px,transparent .7px);background-size:11px 11px;mask-image:linear-gradient(90deg,#000,transparent 70%)}.hero-content{position:relative;z-index:2;width:min(840px,100%);padding:75px 5vw 72px max(5vw,calc((100vw - 1440px)/2 + 5vw))}.eyebrow,.section-kicker{margin:0 0 16px;color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.hero h1{margin:0;max-width:760px;font-size:clamp(2.85rem,5.2vw,5.4rem);line-height:.99;letter-spacing:-.055em}.hero h1 em{color:#ead39d;font-family:"Playfair Display",Georgia,serif;font-weight:600}.hero-lead{max-width:625px;margin:25px 0 30px;color:rgba(255,255,255,.71);font-size:1rem;line-height:1.7}.search-wrap{position:relative;width:min(570px,100%);display:flex;align-items:center;color:rgba(255,255,255,.56)}.search-wrap>span{position:absolute;left:19px;font-size:1.5rem;z-index:1}.search-wrap input{width:100%;height:58px;padding:0 56px;border:1px solid rgba(255,255,255,.18);border-radius:8px;outline:none;color:white;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);transition:.2s}.search-wrap input::placeholder{color:rgba(255,255,255,.52)}.search-wrap input:focus{border-color:var(--gold);background:rgba(255,255,255,.14);box-shadow:0 0 0 4px rgba(215,168,75,.12)}.search-wrap kbd{position:absolute;right:17px;padding:3px 8px;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:rgba(255,255,255,.5);background:rgba(0,0,0,.12)}.hero-mark{position:relative;z-index:1;height:100%;display:grid;place-items:center}.hero-mark:before{content:"";position:absolute;width:380px;aspect-ratio:1;border:1px solid rgba(215,168,75,.15);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012)}.hero-mark img{position:relative;width:min(350px,70%);opacity:.23;filter:drop-shadow(0 20px 30px rgba(0,0,0,.2))}
.directory{max-width:1440px;margin:auto;padding:78px 5vw 90px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.section-kicker{margin-bottom:10px;color:#a17121}.section-heading h2{margin:0;font-size:clamp(2rem,3vw,3rem);letter-spacing:-.04em}.section-heading>p{margin:0 0 7px;color:var(--muted);font-size:.85rem}.section-heading>p strong{color:var(--ink)}.filters{display:flex;gap:8px;margin:30px 0 35px;overflow-x:auto;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filter{flex:0 0 auto;padding:10px 17px;border:1px solid var(--line);border-radius:100px;color:var(--muted);background:transparent;cursor:pointer;font-size:.78rem;font-weight:600;transition:.2s}.filter:hover{border-color:var(--teal);color:var(--teal)}.filter.active{color:white;border-color:var(--teal);background:var(--teal)}
.system-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.system-card{min-height:292px;padding:25px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;color:inherit;text-decoration:none;background:white;box-shadow:0 8px 35px rgba(16,42,44,.035);animation:card-in .5s both;animation-delay:var(--delay);transition:transform .25s,box-shadow .25s,border-color .25s}.system-card:hover,.system-card:focus-visible{transform:translateY(-5px);border-color:rgba(11,71,75,.3);box-shadow:0 18px 45px rgba(16,42,44,.09);outline:none}.card-top{display:flex;justify-content:space-between;align-items:start}.card-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:9px;color:var(--teal);background:#e8f0ed;font-size:1.25rem;font-weight:700}.card-arrow{color:#a5b0ad;font-size:1.2rem;transition:.2s}.system-card:hover .card-arrow{color:var(--gold);transform:translate(2px,-2px)}.card-category{margin-top:25px;color:#9b752e;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.system-card h3{margin:8px 0;font-size:1.13rem;letter-spacing:-.02em}.system-card p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.6}.card-cta{margin-top:auto;padding-top:20px;color:var(--teal);font-size:.77rem;font-weight:700}.system-card[hidden]{display:none}.empty-state{padding:70px 20px;text-align:center}.empty-state>span{font-size:3rem;color:#b5c0bd}.empty-state h3{margin:12px 0 5px}.empty-state p{margin:0 0 18px;color:var(--muted)}.empty-state button{padding:10px 17px;border:0;border-radius:6px;color:white;background:var(--teal);cursor:pointer}footer{max-width:1296px;margin:auto;padding:28px 5vw 40px;display:flex;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem}footer p{margin:0}@keyframes card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.system-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr 290px}}@media(max-width:760px){.site-header{height:75px}.header-meta span:not(.live-dot),.header-meta time{display:none}.hero{min-height:530px;grid-template-columns:1fr}.hero-content{padding:64px 6vw 150px}.hero-mark{position:absolute;right:-85px;bottom:-160px;width:350px;height:350px;opacity:.5}.system-grid{grid-template-columns:repeat(2,1fr)}.directory{padding:60px 5vw 70px}}@media(max-width:520px){.brand>img{width:37px;height:42px}.brand-copy strong{font-size:.9rem}.hero h1{font-size:2.75rem}.section-heading{align-items:start}.section-heading>p{display:none}.system-grid{grid-template-columns:1fr}.system-card{min-height:260px}footer{gap:10px;flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Compact hero and personal display controls */
.hero{min-height:315px;grid-template-columns:minmax(0,1.7fr) minmax(230px,.6fr)}
.hero-content{width:min(980px,100%);padding-top:36px;padding-bottom:38px}
.eyebrow{margin-bottom:9px}
.hero h1{max-width:940px;font-size:clamp(2.2rem,4vw,4rem);line-height:1.03}
.hero-lead{max-width:700px;margin:14px 0 18px;font-size:.9rem;line-height:1.5}
.search-wrap input{height:47px}
.hero-mark:before{width:225px;box-shadow:0 0 0 36px rgba(255,255,255,.018),0 0 0 72px rgba(255,255,255,.012)}
.hero-mark img{width:min(205px,68%)}
.directory{padding-top:46px}
.section-heading h2{font-size:clamp(1.8rem,2.5vw,2.65rem)}
.directory-actions{display:flex;align-items:center;gap:13px}
.directory-actions p{margin:0;color:var(--muted);font-size:.8rem}
.directory-actions p strong{color:var(--ink)}
.manage-button{padding:9px 13px;border:1px solid var(--line);border-radius:7px;color:var(--teal);background:#fff;cursor:pointer;font-size:.75rem;font-weight:700}
.manage-button:hover{border-color:var(--teal)}
.filters{margin-top:22px;margin-bottom:27px}
.system-card{min-height:270px}
.manage-dialog{width:min(610px,calc(100% - 30px));max-height:min(730px,calc(100vh - 30px));padding:0;border:0;border-radius:14px;color:var(--ink);background:var(--paper);box-shadow:0 28px 90px rgba(0,0,0,.28)}
.manage-dialog::backdrop{background:rgba(3,28,30,.68);backdrop-filter:blur(3px)}
.dialog-head{padding:24px 25px 12px;display:flex;align-items:start;justify-content:space-between;gap:20px}
.dialog-head h2{margin:0;font-size:1.55rem;letter-spacing:-.035em}
.dialog-head .section-kicker{margin-bottom:6px}
.dialog-close{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:white;cursor:pointer;font-size:1.4rem;line-height:1}
.dialog-help{margin:0;padding:0 25px 16px;color:var(--muted);font-size:.8rem;line-height:1.55}
.manage-list{padding:0 25px 20px;display:grid;grid-template-columns:1fr 1fr;gap:9px;overflow:auto}
.manage-item{min-height:48px;padding:10px 12px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:.8rem;font-weight:600}
.manage-item input{width:17px;height:17px;accent-color:var(--teal)}
.dialog-actions{position:sticky;bottom:0;padding:16px 25px;display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);background:var(--paper)}
.dialog-actions button{padding:10px 16px;border-radius:7px;cursor:pointer;font-size:.78rem;font-weight:700}
.show-all-button{border:1px solid var(--line);color:var(--teal);background:white}.done-button{border:1px solid var(--teal);color:white;background:var(--teal)}
@media(max-width:760px){.hero{min-height:390px}.hero-content{padding:42px 6vw 105px}.hero-mark{right:-90px;bottom:-190px}.directory{padding-top:40px}.section-heading{align-items:flex-start}.directory-actions{align-items:flex-end;flex-direction:column}.directory-actions p{display:none}}
@media(max-width:520px){.hero{min-height:410px}.hero h1{font-size:2.45rem}.manage-list{grid-template-columns:1fr}.directory-actions{position:absolute;right:5vw}.section-heading{position:relative;padding-right:125px}}

/* Opening brand animation */
body.is-loading{overflow:hidden}
.app-loader{position:fixed;z-index:9999;inset:0;display:grid;place-content:center;justify-items:center;overflow:hidden;color:#fff;background:#052f33;opacity:1;transition:opacity .7s ease,visibility .7s ease}
.app-loader.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.loader-glow{position:absolute;width:min(720px,92vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(215,168,75,.16),rgba(11,71,75,.08) 42%,transparent 70%);animation:loader-breathe 2.2s ease-in-out infinite}
.loader-rings{position:absolute;width:min(470px,80vw);aspect-ratio:1}
.loader-rings i{position:absolute;inset:0;border:1px solid rgba(215,168,75,.17);border-radius:50%;animation:ring-pulse 2.4s ease-out infinite}
.loader-rings i:nth-child(2){inset:14%;animation-delay:.55s}.loader-rings i:nth-child(3){inset:28%;animation-delay:1.1s}
.loader-stage{position:relative;width:150px;height:150px;display:grid;place-items:center}
.loader-logo{position:relative;z-index:3;width:118px;max-height:130px;object-fit:contain;filter:drop-shadow(0 12px 28px rgba(0,0,0,.25));animation:logo-reveal 2.6s cubic-bezier(.22,.8,.25,1) both}
.loader-symbols{position:absolute;z-index:4;inset:0;display:grid;place-items:center}
.loader-symbol{position:absolute;width:72px;height:72px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:22px;background:rgba(255,255,255,.09);box-shadow:0 16px 45px rgba(0,0,0,.2);backdrop-filter:blur(10px);font-size:2rem;opacity:0;transform:scale(.65) rotate(-10deg);animation:symbol-change 2.6s ease-in-out infinite}
.symbol-book{animation-delay:0s}.symbol-camera{animation-delay:.65s}.symbol-pen{animation-delay:1.3s}.symbol-car{animation-delay:1.95s}
.loader-copy{position:relative;z-index:5;margin-top:28px;display:grid;justify-items:center}
.loader-copy strong{font-size:1.22rem;letter-spacing:.27em;text-indent:.27em}.loader-copy>span{margin-top:7px;color:#dbc17f;font-size:.63rem;font-weight:700;letter-spacing:.28em;text-indent:.28em}
.loader-copy small{margin-top:11px;color:rgba(255,255,255,.55);font-size:.68rem;letter-spacing:.04em}
.loader-progress{width:190px;height:2px;margin-top:21px;overflow:hidden;background:rgba(255,255,255,.12)}
.loader-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,transparent,#e2bf69,#fff);transform-origin:left;animation:loader-progress 2.6s cubic-bezier(.2,.75,.25,1) both}
@keyframes symbol-change{0%,100%{opacity:0;transform:scale(.55) rotate(-12deg)}8%,18%{opacity:1;transform:scale(1) rotate(0)}24%{opacity:0;transform:scale(1.18) rotate(8deg)}}
@keyframes logo-reveal{0%{opacity:0;transform:scale(.82);filter:blur(8px)}18%,78%{opacity:.16;transform:scale(.92);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes ring-pulse{0%{opacity:0;transform:scale(.72)}38%{opacity:1}100%{opacity:0;transform:scale(1.18)}}
@keyframes loader-breathe{50%{transform:scale(1.08);opacity:.72}}
@keyframes loader-progress{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media(max-width:520px){.loader-stage{width:130px;height:130px}.loader-logo{width:100px}.loader-symbol{width:64px;height:64px;font-size:1.7rem}.loader-copy{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.loader-rings,.loader-symbols,.loader-glow{display:none}.loader-logo{animation:none}.loader-progress i{animation-duration:.8s}}

/* Slim homepage banner */
.hero{min-height:190px;display:block}
.hero-content{width:min(1440px,100%);min-height:190px;margin:auto;padding:25px 5vw;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);align-items:center;gap:clamp(35px,6vw,95px)}
.hero-copy{min-width:0}
.hero .eyebrow{margin:0 0 8px;font-size:.62rem}
.hero h1{max-width:none;font-size:clamp(1.8rem,2.65vw,2.75rem);line-height:.98;white-space:normal}
.hero h1 em{display:inline-block;margin-top:3px}
.hero-lead{margin:9px 0 0;font-size:.76rem}
.hero .search-wrap{width:100%;justify-self:end}
.hero .search-wrap input{height:46px}
@media(max-width:900px){.hero h1{font-size:clamp(1.7rem,3.7vw,2.25rem)}.hero-content{gap:30px;grid-template-columns:minmax(0,1fr) minmax(270px,340px)}}
@media(max-width:700px){.hero{min-height:245px}.hero-content{min-height:245px;padding:28px 6vw;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:20px}.hero h1{font-size:clamp(1.9rem,7vw,2.7rem);white-space:normal}.hero-lead{margin-top:10px}.hero .search-wrap{max-width:none}}

/* Admin access */
.header-admin-button{padding:7px 10px;border:1px solid var(--line);border-radius:6px;color:var(--teal);background:#fff;cursor:pointer;font-size:.68rem;font-weight:700;white-space:nowrap}
.admin-badge{padding:4px 8px;border-radius:100px;color:#fff;background:var(--teal);font-size:.64rem}
.logout-form{margin:0;display:inline-flex}
.login-dialog{width:min(440px,calc(100% - 30px))}
.login-fields{padding:2px 25px 24px;display:grid;gap:14px}
.login-fields label{display:grid;gap:7px;color:var(--ink);font-size:.75rem;font-weight:700}
.login-fields input{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:7px;outline:none;background:#fff}
.login-fields input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,71,75,.1)}
.login-error{margin:0 25px 15px;padding:10px 12px;border-radius:7px;color:#8a2828;background:#fbeaea;font-size:.75rem}
.login-actions{justify-content:flex-end}
@media(max-width:760px){.header-admin-button{padding:7px 8px}.admin-badge{display:none!important}}
