:root { --paper:#faf6ed; --ink:#202020; --muted:#6f6660; --accent:#e86b2f; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; min-height:100vh; background:var(--paper); color:var(--ink);font-family:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;}
body::before{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 18%,#fffdf8 0%,transparent 64%),linear-gradient(160deg,rgba(225,204,181,.08),transparent 42%,rgba(203,179,148,.09));}
.top-nav{display:flex;justify-content:center;align-items:center;gap:clamp(24px,4vw,62px);padding:35px 22px 22px; flex-wrap:wrap;}
.top-nav a, .top-nav span{color:var(--ink);text-decoration:none;text-transform:uppercase;font-size:clamp(14px,1.35vw,18px);font-weight:550;letter-spacing:.115em;line-height:1.2;white-space:nowrap;}
.top-nav .current{border-bottom:1px solid currentColor;padding-bottom:3px}
.top-nav .future{opacity:.72}
.top-nav a:hover{color:#d74b26}
.page-head{text-align:center;margin:0 auto; padding:clamp(78px,9vw,125px) 20px clamp(55px,7vw,90px)}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#9b8a79;margin:0 0 17px;}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(48px,7vw,91px);font-weight:400;line-height:1;letter-spacing:.04em;margin:0;}
.intro{font-family:Georgia,'Times New Roman',serif;font-size:clamp(15px,1.5vw,19px);font-style:italic;color:#766c63;margin:26px 0 0;}
.portal-grid{width:min(100% - 40px,1160px);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,320px));justify-content:center;gap:clamp(50px,7vw,102px) clamp(48px,7vw,104px);padding:12px 0 clamp(110px,10vw,160px);}
.portal-card{text-align:center;min-width:0;}
.portal-link{width:100%;display:block;position:relative;isolation:isolate;text-decoration:none;border-radius:50%;outline-offset:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.portal-disc{display:block;position:relative;width:100%;aspect-ratio:1;border-radius:50%;transform:translateZ(0);}
.portal-disc img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;transform-origin:center;backface-visibility:hidden;}
@keyframes portal-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.portal-link:hover .portal-disc img,.portal-link:focus-visible .portal-disc img{animation:portal-spin 1.05s cubic-bezier(.27,.8,.22,1) both;}
.portal-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffa339 0%,#ff6b00 54%,#eb4700 100%);transform:scale(0);opacity:0;pointer-events:none;z-index:2;}
@keyframes orange-enter{0%{transform:scale(0);opacity:1}100%{transform:scale(1.03);opacity:1}}
.portal-link.entering .portal-disc::after{animation:orange-enter .52s cubic-bezier(.2,.72,.22,1) forwards;}
.portal-link.entering .portal-disc img{animation:none;}
.portal-number{margin:27px 0 5px;font-weight:600;font-size:12px;letter-spacing:.26em;color:#a34a38;}
.portal-title{font-size:clamp(16px,1.65vw,21px);font-weight:500;letter-spacing:.16em;line-height:1.5;margin:0;}
.bottom-note{text-align:center;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:#a99b8c;padding:0 18px 32px;}
@media(max-width:720px){
 .top-nav{gap:14px 26px;padding-top:25px;}
 .top-nav a,.top-nav span{font-size:12px;}
 .page-head{padding-top:67px;padding-bottom:50px;}
 .portal-grid{grid-template-columns:minmax(0,300px);gap:67px;padding-bottom:95px;}
}
@media(prefers-reduced-motion:reduce){.portal-link:hover .portal-disc img,.portal-link:focus-visible .portal-disc img{animation:none;}.portal-link.entering .portal-disc::after{animation-duration:.01ms;}}