@font-face{font-family:"Fell";src:url("../fonts/im-fell-english-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fell";src:url("../fonts/im-fell-english-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya";src:url("../fonts/alegreya-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:dark;--bone:#eae3d4;--muted:#b9b5c4;--amber:#e4bc80}
*{box-sizing:border-box}
html{background:#080b18}
body{margin:0;min-width:280px;min-height:100svh;display:flex;flex-direction:column;color:var(--bone);font-family:"Fell",Georgia,serif;-webkit-font-smoothing:antialiased;isolation:isolate}
::selection{background:#c2a170;color:#11101b}
.landscape{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#141a35;pointer-events:none}
.landscape-art{width:100%;height:100%;object-fit:cover;object-position:57% center;filter:saturate(.84) brightness(.8);transform:scale(1.025)}
.night-grade{position:absolute;inset:0;background:linear-gradient(155deg,rgba(24,39,112,.58),rgba(49,31,85,.21) 45%,rgba(7,10,26,.4));mix-blend-mode:color}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 8%,rgba(6,8,19,.32) 62%,rgba(4,6,14,.84) 100%),linear-gradient(180deg,rgba(6,8,20,.64),rgba(8,10,24,.12) 22%,rgba(7,9,22,.62) 55%,rgba(7,8,17,.86))}
.mist{position:absolute;inset:0 -10%;background:radial-gradient(ellipse at 25% 42%,rgba(120,139,214,.13),transparent 48%),radial-gradient(ellipse at 70% 28%,rgba(176,150,212,.12),transparent 45%);animation:mist-drift 25s ease-in-out infinite alternate}
.grain{position:absolute;inset:0;background:url("grain.svg") repeat;mix-blend-mode:soft-light;opacity:.2}
.frame{position:fixed;inset:16px;z-index:-1;pointer-events:none;border:1px solid rgba(197,183,159,.16)}
.frame:before,.frame:after{content:"+";position:absolute;color:#b6a58c;font:14px "Plex",monospace;line-height:1;background:#0e101e}
.frame:before{left:-5px;top:-7px}.frame:after{right:-5px;bottom:-7px}
.folio{display:flex;justify-content:space-between;gap:12px;padding:34px 36px 0;font:9px/1.5 "Plex",monospace;letter-spacing:1.5px;color:#b9b5c6}
.folio span:nth-child(2){letter-spacing:2.4px}
.portal{width:min(480px,calc(100% - 64px));margin:auto;position:relative;padding:60px 0 38px;text-align:center}
.identity{position:relative}
.identity:before{content:"";position:absolute;inset:-40px -15px -10px;background:radial-gradient(ellipse,rgba(7,9,23,.45),transparent 70%);z-index:-1;pointer-events:none}
.eyebrow{font:9px/1.6 "Plex",monospace;letter-spacing:2.2px;color:#c3c2cf;margin:0 0 21px}
h1{margin:0;line-height:0}
.logo-lockup{display:block;position:relative;width:calc(72% + 16px);margin-inline:auto;isolation:isolate}
.logo{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 16px #02030a)}
/* The original logo's alpha is the mask: no light can fill its transparent rectangle. */
.logo-lockup:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 42%,rgba(205,221,236,.12) 47%,rgba(255,252,239,.9) 50%,rgba(213,225,238,.18) 53%,transparent 58%);
  background-size:300% 100%;background-position:160% 0;
  -webkit-mask:url("../img/logo-1440.webp") center/100% 100% no-repeat;
  mask:url("../img/logo-1440.webp") center/100% 100% no-repeat;
  mask-mode:alpha;mix-blend-mode:screen;opacity:0;
  animation:logo-specular 9s linear infinite;
}
@keyframes logo-specular{
  0%,10%{background-position:160% 0;opacity:0}
  12%{opacity:.48}
  28%{background-position:-60% 0;opacity:.48}
  30%,100%{background-position:-60% 0;opacity:0}
}
.invitation{font-size:clamp(23px,2.7vw,29px);line-height:1.28;margin:25px -12px 0;text-shadow:0 2px 15px #020308}
.invitation em{color:#c4b6a0;font-weight:400}
.path-heading{display:flex;justify-content:center;align-items:center;gap:14px;margin:40px 0 18px;font:9px/1.5 "Plex",monospace;letter-spacing:1.6px;color:#c0b5a3}
.path-heading p{margin:0}.path-heading>span{color:#82766c;letter-spacing:1px}
.paths{display:grid;gap:13px;text-align:left}
.path{position:relative;display:flex;align-items:center;gap:19px;min-height:87px;padding:18px 23px;color:var(--bone);text-decoration:none;border:1px solid #8e7455;background:linear-gradient(105deg,rgba(49,37,29,.92),rgba(22,21,30,.92));box-shadow:0 8px 25px rgba(0,0,0,.13),inset 0 0 22px rgba(139,98,43,.05);transition:background .2s,border-color .2s,transform .2s;touch-action:manipulation}
.path:before,.path:after{position:absolute;font:11px "Plex",monospace;color:#c4a26e;line-height:1;pointer-events:none}
.path:before{content:"+";left:-4px;top:-6px}.path:after{content:"+";right:-4px;bottom:-6px}
.path-index{font:10px "Plex",monospace;color:#ba9f7b;align-self:center}
.path-copy{display:flex;flex-direction:column;gap:5px;flex:1}
.path-title{font-size:26px;line-height:1.1;color:#efdfc5}
.path-description{font:15px/1.25 "Alegreya",sans-serif;color:#c7c1b8}
.path-arrow{font-family:Georgia,serif;font-size:24px;color:#cab28f}
.path-discord{border-color:#575771;background:linear-gradient(105deg,rgba(24,28,50,.95),rgba(15,18,34,.95))}
.path-discord .path-title{color:#e2dfef}.path-discord .path-index,.path-discord .path-arrow,.path-discord:before,.path-discord:after{color:#b4b0d4}.path-discord .path-description{color:#c1bfd0}
.path:focus-visible{outline:2px solid #ffdda3;outline-offset:6px}
.closing{display:flex;align-items:center;justify-content:center;gap:13px;margin:30px -12px 0;font:8px/1.6 "Plex",monospace;letter-spacing:1.3px;color:#b2aebd}
.closing span{color:#a89b83;white-space:nowrap}
.credits{display:flex;justify-content:space-between;gap:12px;padding:0 36px 32px;color:#a3a0ae;font:8px/1.5 "Plex",monospace;letter-spacing:.7px}
@keyframes mist-drift{from{transform:translateX(-2%);opacity:.65}to{transform:translateX(2%);opacity:1}}
@media(hover:hover){.path:hover{border-color:#e4bd81;background:linear-gradient(105deg,rgba(70,50,33,.97),rgba(28,25,34,.97));transform:translateY(-2px)}.path-discord:hover{border-color:#bab4de;background:linear-gradient(105deg,rgba(39,43,70,.97),rgba(23,25,45,.97))}}
@media(min-width:900px){.frame{inset:24px}.folio{padding:46px 52px 0}.portal{padding:56px 0 48px}.credits{padding:0 52px 44px}.landscape-art{object-position:center 43%}.vignette{background:radial-gradient(ellipse at 50% 48%,rgba(7,9,24,.68),rgba(8,10,25,.43) 31%,rgba(7,8,20,.16) 58%,rgba(4,6,16,.7)),linear-gradient(180deg,rgba(6,8,20,.35),transparent 30%,rgba(5,7,17,.66))}.eyebrow{letter-spacing:3px}}
@media(max-width:599px){.portal{padding-top:52px}.folio{padding:31px 30px 0;font-size:8px}.folio span:nth-child(2){letter-spacing:1.5px}.path{gap:14px;padding:17px 18px;min-height:84px}.path-title{font-size:25px}.path-description{font-size:14px}.path-heading{margin-top:34px}.closing{font-size:7px;letter-spacing:1px;gap:10px}.credits{padding:0 30px 30px;flex-direction:column;align-items:center;gap:6px;font-size:7px}.landscape-art{object-position:57% center}.invitation{font-size:24px}}
@media(max-width:359px){.portal{width:calc(100% - 50px)}.eyebrow{font-size:8px;letter-spacing:1.2px}.path-description{font-size:13px}.path{gap:11px;padding:16px 14px}.invitation{font-size:22px}.folio span:nth-child(2){font-size:7px}.path-heading{gap:9px;font-size:8px}.closing{font-size:6px}}
@media(max-height:730px){.portal{padding-top:36px;padding-bottom:28px}.eyebrow{margin-bottom:15px}.invitation{margin-top:17px}.path-heading{margin-top:24px}.closing{margin-top:23px}}
/* New artwork opts out of recoloring. Its own cobalt, violet and amber stay intact. */
.landscape-original .landscape-art{filter:none;transform:none;object-position:center 42%}@media(max-width:599px){.landscape-original .landscape-art{object-position:center 38%}}@media(min-width:900px){.landscape-original .landscape-art{object-position:center 46%}}
.landscape-original .night-grade,.landscape-original .mist{display:none}
.landscape-original .vignette{background:linear-gradient(180deg,rgba(3,5,16,.12),transparent 25%,rgba(3,5,16,.16))}
.landscape-original .grain{opacity:.06}
.has-original-scene .identity:before{background:radial-gradient(ellipse,rgba(7,9,23,.16),transparent 70%)}
@media(prefers-reduced-motion:reduce){.mist,.logo-lockup:after{animation:none}.logo-lockup:after{display:none}.path{transition:none}}
@media(forced-colors:active){.path{border:1px solid LinkText}.path:focus-visible{outline:2px solid Highlight}.landscape,.frame{display:none}.path-title,.path-description,.path-index,.path-arrow{color:LinkText}}

.path-instagram{border-color:#7a5a6a;background:linear-gradient(105deg,rgba(42,28,40,.95),rgba(18,16,28,.95))}.path-instagram .path-title{color:#f0d8e0}.path-instagram .path-index,.path-instagram .path-arrow,.path-instagram:before,.path-instagram:after{color:#d4a8b8}.path-instagram .path-description{color:#cbb8c0}.path-twitter{border-color:#5a6678;background:linear-gradient(105deg,rgba(28,34,48,.95),rgba(14,16,26,.95))}.path-twitter .path-title{color:#dde6f2}.path-twitter .path-index,.path-twitter .path-arrow,.path-twitter:before,.path-twitter:after{color:#a8b8d0}.path-twitter .path-description{color:#b8c0ce}@media(hover:hover){.path-instagram:hover{border-color:#e0a8bc;background:linear-gradient(105deg,rgba(58,36,50,.97),rgba(26,20,34,.97))}.path-twitter:hover{border-color:#b0c0d8;background:linear-gradient(105deg,rgba(40,48,68,.97),rgba(20,24,38,.97))}}