:root, [data-theme="d-maroon"] { --M:#4A0A12; --MB:#9A0F22; --G:#D4A017; --GL:#F0C040; --W:#fff; --OFF:#F7F3EF; --DK:#140608; --GR:#A09090; --BD:rgba(107,15,26,.15); --CARD:#fff; --SECT-ALT:#F7F3EF; --TEXT:#2a1a1a; --SUBTEXT:#5a4a4a; --is-dark:1; } [data-theme="d-navy"] { --M:#0B1A3B; --MB:#1A3A7A; --G:#E8A020; --GL:#F5C842; --W:#fff; --OFF:#F0F4FA; --DK:#040D1E; --GR:#8090A8; --BD:rgba(11,26,59,.15); --CARD:#fff; --SECT-ALT:#F0F4FA; --TEXT:#0d1e36; --SUBTEXT:#3a5070; --is-dark:1; } [data-theme="d-forest"] { --M:#0D2B1A; --MB:#1A5C32; --G:#C07830; --GL:#E09A48; --W:#fff; --OFF:#F0F5F0; --DK:#050F07; --GR:#809080; --BD:rgba(13,43,26,.15); --CARD:#fff; --SECT-ALT:#F0F5F0; --TEXT:#0d2b1a; --SUBTEXT:#3a6040; --is-dark:1; } [data-theme="d-charcoal"] { --M:#1A1F26; --MB:#2D3748; --G:#2CB5A8; --GL:#4DD9CC; --W:#fff; --OFF:#F4F6F8; --DK:#0A0D10; --GR:#8090A0; --BD:rgba(26,31,38,.15); --CARD:#fff; --SECT-ALT:#F4F6F8; --TEXT:#1a1f26; --SUBTEXT:#445060; --is-dark:1; } [data-theme="d-plum"] { --M:#2D0A3A; --MB:#5C1A7A; --G:#C07890; --GL:#E0A0B8; --W:#fff; --OFF:#FAF0F5; --DK:#130418; --GR:#A088A0; --BD:rgba(45,10,58,.15); --CARD:#fff; --SECT-ALT:#FAF0F5; --TEXT:#2d0a3a; --SUBTEXT:#6a4070; --is-dark:1; } [data-theme="d-slate"] { --M:#1C2B3A; --MB:#2E4A64; --G:#E07820; --GL:#F5A040; --W:#fff; --OFF:#F2F5F8; --DK:#080E14; --GR:#8898A8; --BD:rgba(28,43,58,.15); --CARD:#fff; --SECT-ALT:#F2F5F8; --TEXT:#1c2b3a; --SUBTEXT:#3a5268; --is-dark:1; } [data-theme="d-obsidian"] { --M:#0A1A0E; --MB:#1A3820; --G:#28C868; --GL:#50E890; --W:#fff; --OFF:#F0F6F2; --DK:#030806; --GR:#70A080; --BD:rgba(10,26,14,.15); --CARD:#fff; --SECT-ALT:#F0F6F2; --TEXT:#0a1a0e; --SUBTEXT:#2a5030; --is-dark:1; } [data-theme="l-cream"] { --M:#FDFAF5; --MB:#F5EDE0; --G:#B8300A; --GL:#D04010; --W:#2a1505; --OFF:#FFF8F0; --DK:#FFF8F0; --GR:#8a7060; --BD:rgba(180,80,20,.18); --CARD:#FFF8F0; --SECT-ALT:#FDFAF5; --TEXT:#2a1505; --SUBTEXT:#6a4530; --is-dark:0; } [data-theme="l-pearl"] { --M:#F0F4FF; --MB:#E0E8FF; --G:#0B2A7A; --GL:#1040B0; --W:#050e2a; --OFF:#F8FAFF; --DK:#F8FAFF; --GR:#607090; --BD:rgba(11,42,122,.15); --CARD:#F8FAFF; --SECT-ALT:#F0F4FF; --TEXT:#050e2a; --SUBTEXT:#2a3a6a; --is-dark:0; } [data-theme="l-ivory"] { --M:#F5FAF5; --MB:#E8F4E8; --G:#0D4A20; --GL:#1A6B30; --W:#051405; --OFF:#FAFFF8; --DK:#FAFFF8; --GR:#508060; --BD:rgba(13,74,32,.15); --CARD:#FAFFF8; --SECT-ALT:#F5FAF5; --TEXT:#051405; --SUBTEXT:#2a5030; --is-dark:0; } [data-theme="l-white-teal"] { --M:#F2FAFA; --MB:#E0F4F2; --G:#0A6860; --GL:#0E8A80; --W:#041414; --OFF:#FAFEFE; --DK:#FAFEFE; --GR:#407878; --BD:rgba(10,104,96,.15); --CARD:#FAFEFE; --SECT-ALT:#F2FAFA; --TEXT:#041414; --SUBTEXT:#1a5050; --is-dark:0; } [data-theme="l-blush"] { --M:#FDF5FA; --MB:#F5E0F0; --G:#5A0A7A; --GL:#7A1A9A; --W:#1a0428; --OFF:#FFF8FC; --DK:#FFF8FC; --GR:#906080; --BD:rgba(90,10,122,.15); --CARD:#FFF8FC; --SECT-ALT:#FDF5FA; --TEXT:#1a0428; --SUBTEXT:#5a2068; --is-dark:0; } [data-theme="l-sky"] { --M:#F0F6FF; --MB:#E0EEFF; --G:#C05010; --GL:#E06818; --W:#0a1428; --OFF:#F8FBFF; --DK:#F8FBFF; --GR:#607890; --BD:rgba(12,40,80,.15); --CARD:#F8FBFF; --SECT-ALT:#F0F6FF; --TEXT:#0a1428; --SUBTEXT:#2a4068; --is-dark:0; } [data-theme="l-mint"] { --M:#F2FAF5; --MB:#E0F5E8; --G:#3A1A08; --GL:#5A2A10; --W:#1a0808; --OFF:#FAFFF8; --DK:#FAFFF8; --GR:#607050; --BD:rgba(58,26,8,.15); --CARD:#FAFFF8; --SECT-ALT:#F2FAF5; --TEXT:#1a0808; --SUBTEXT:#4a3020; --is-dark:0; } :root { --font-body:'Literata', serif; --font-display:'Literata', sans-serif; --font-mono:'Share Tech Mono', monospace; } /* ═══════════════ TYPE SCALE ═══════════════ One ladder, twelve fixed steps plus four fluid ones, replacing the 51 ad-hoc values this file used to carry. Sizes are the px targets divided by a 16px root, so at the type chip's default of 100% each token renders at the px value named beside it. Floor is 12px. Nothing that is prose, a label or a control goes below it. Ornament — bullet glyphs, emoji icons, watermark numerals, monograms — is sized to its box by eye and deliberately sits outside this ladder, as does the fixed px chrome (#tzchip, #chapter, #iv), which must not scale with the page it controls. */ :root{ --fs-micro : .75rem; /* 12px — eyebrows, tracked mono labels, tags */ --fs-xs : .8125rem; /* 13px — captions, meta, badge text */ --fs-sm : .875rem; /* 14px — dense list copy, secondary text */ --fs-base : .9375rem; /* 15px — default UI text, nav, buttons */ --fs-md : 1rem; /* 16px — body default */ --fs-lg : 1.0625rem; /* 17px — reading prose */ --fs-xl : 1.125rem; /* 18px — card headings */ --fs-2xl : 1.25rem; /* 20px — sub-headings */ --fs-3xl : 1.375rem; /* 22px — panel headings */ --fs-4xl : 1.625rem; /* 26px — feature headings */ --fs-5xl : 1.875rem; /* 30px — stat figures */ --fs-6xl : 2.125rem; /* 34px — large stat figures */ /* Fluid steps. Only where the size genuinely needs to travel: a hero at a fixed size either shouts on a phone or whispers on a desktop. */ --fs-slide : clamp(1.125rem, 2vw, 1.375rem); /* 18 → 22px */ --fs-lede : clamp(1.0625rem, 1.6vw, 1.3125rem); /* 17 → 21px */ --fs-h2 : clamp(1.875rem, 5vw, 3.625rem); /* 30 → 58px */ --fs-display:clamp(2.125rem, 5vw, 4rem); /* 34 → 64px */ --fs-hero : clamp(2.625rem, 8.2vw, 6rem); /* 42 → 96px */ /* Leading, set once here rather than re-invented per rule. */ --lh-body : 1.65; --lh-heading : 1.1; } [data-theme^="l-"] #tb { background: var(--G); border-bottom-color: rgba(0,0,0,.12); } [data-theme^="l-"] .tbl a { color: var(--M) !important; } [data-theme^="l-"] .tbr { color: var(--M) !important; } [data-theme^="l-"] nav { background: color-mix(in srgb, var(--G) 95%, transparent) !important; border-bottom-color: var(--GL); } [data-theme^="l-"] .ntext { color: var(--M); } [data-theme^="l-"] .ntext span { color: rgba(255,255,255,.85); } [data-theme^="l-"] .nlinks>a, [data-theme^="l-"] .ndrop>a { color: rgba(255,255,255,.85); } [data-theme^="l-"] .nlinks.open>a, [data-theme^="l-"] .nlinks.open .ndrop>a { color: rgba(0,0,0,.75); } [data-theme^="l-"] .nlinks>a:hover, [data-theme^="l-"] .ndrop>a:hover { color: var(--M); } [data-theme^="l-"] .ddm { background: var(--OFF); border-color: rgba(0,0,0,.12); } [data-theme^="l-"] .ddm a { color: rgba(0,0,0,.65); border-bottom-color: rgba(0,0,0,.06); } [data-theme^="l-"] .ddm a:hover { color: var(--G); background: rgba(0,0,0,.04); } [data-theme^="l-"] .ncta { background: var(--M) !important; color: var(--G) !important; } [data-theme^="l-"] .ncta:hover { background: var(--GL) !important; color: var(--M) !important; } [data-theme^="l-"] .ntog { color: var(--M); } [data-theme^="l-"] .nlinks.open { background: var(--OFF); } [data-theme^="l-"] #ticker { background: var(--G); } [data-theme^="l-"] .ti { color: rgba(255,255,255,.82); } [data-theme^="l-"] .ti b { color: #ffffff; } [data-theme^="l-"] #hero { background: linear-gradient(140deg, var(--G) 0%, var(--GL) 100%); } [data-theme^="l-"] .hgrid { background-image: linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px); } [data-theme^="l-"] .hglow { background: radial-gradient(circle, rgba(0,0,0,.1) 0%, transparent 68%); } [data-theme^="l-"] .hbadge { color: var(--M); border-color: rgba(0,0,0,.25); } [data-theme^="l-"] .htit { color: var(--M); text-shadow: none; } [data-theme^="l-"] .htit .hi { color: var(--M); opacity:.7; } [data-theme^="l-"] .hsub { color: rgba(255,255,255,.65); } [data-theme^="l-"] .hst .n { color: var(--M); } [data-theme^="l-"] .hst .l { color: rgba(255,255,255,.55); } [data-theme^="l-"] .hdiv { background: rgba(255,255,255,.25); } [data-theme^="l-"] .bghost:hover { color: var(--M); border-color: rgba(255,255,255,.5); } [data-theme^="l-"] .hero-logo { border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.05); box-shadow: 0 0 0 6px rgba(0,0,0,.07), 0 8px 40px rgba(0,0,0,.15); } [data-theme^="l-"] .apanel { background: var(--G); border: 1px solid rgba(0,0,0,.1); } [data-theme^="l-"] .apy { color: rgba(0,0,0,.1); } [data-theme^="l-"] .apt { color: var(--M); } [data-theme^="l-"] .apb { color: rgba(255,255,255,.7); } [data-theme^="l-"] .apf { color: var(--M); border-top-color: rgba(255,255,255,.2); } [data-theme^="l-"] .atrust { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.2); } [data-theme^="l-"] #about .stit { color: var(--TEXT); } [data-theme^="l-"] #about .stit .hi { color: var(--G); } [data-theme^="l-"] #about .stag { color: var(--G); } [data-theme^="l-"] #chairman { background: linear-gradient(140deg, var(--OFF) 0%, var(--SECT-ALT) 100%); } [data-theme^="l-"] .chcard { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); } [data-theme^="l-"] .chn { color: var(--G); } [data-theme^="l-"] .chr { color: rgba(0,0,0,.45); } [data-theme^="l-"] .chv { color: rgba(0,0,0,.6); } [data-theme^="l-"] .chv::before { color: var(--G); } [data-theme^="l-"] .chct .stag { color: var(--G); } [data-theme^="l-"] .chct .stit { color: var(--TEXT); } [data-theme^="l-"] .chct .stit .hi { color: var(--G); } [data-theme^="l-"] .chq { background: rgba(0,0,0,.04); border-left-color: var(--G); } [data-theme^="l-"] .chq p { color: rgba(0,0,0,.68); font-style: italic; } [data-theme^="l-"] .chb p { color: rgba(0,0,0,.58); } [data-theme^="l-"] .chb p strong { color: var(--TEXT); } [data-theme^="l-"] .mil { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); } [data-theme^="l-"] .mil .n { color: var(--G); } [data-theme^="l-"] .mil .l { color: rgba(0,0,0,.4); } [data-theme^="l-"] .achp { background: var(--G); border: 1px solid rgba(0,0,0,.08); } [data-theme^="l-"] .achp h3 { color: var(--M); } [data-theme^="l-"] .al { background: rgba(0,0,0,.06); border-left-color: var(--M); } [data-theme^="l-"] .alb { color: var(--M); } [data-theme^="l-"] .ald { color: rgba(255,255,255,.7); } [data-theme^="l-"] .ann { background: linear-gradient(135deg, var(--G), var(--GL)); border: 1px solid rgba(0,0,0,.08); } [data-theme^="l-"] .anns .n { color: var(--M); } [data-theme^="l-"] .anns .l { color: rgba(255,255,255,.6); } [data-theme^="l-"] .annt h3 { color: var(--M); } [data-theme^="l-"] .annt p { color: rgba(255,255,255,.65); } [data-theme^="l-"] .hop { background: var(--G); border: 1px solid rgba(0,0,0,.08); } [data-theme^="l-"] .hop h3 { color: var(--M); } [data-theme^="l-"] .hop p { color: rgba(255,255,255,.7); } [data-theme^="l-"] .hop::after { opacity: .05; } [data-theme^="l-"] #rankers { background: linear-gradient(140deg, var(--OFF), var(--SECT-ALT)); } [data-theme^="l-"] .rkh .stag { color: var(--G); justify-content: center; } [data-theme^="l-"] .rkh .stit { color: var(--TEXT); } [data-theme^="l-"] .rkh .stit .hi { color: var(--G); } [data-theme^="l-"] .rkh p { color: rgba(0,0,0,.5); } [data-theme^="l-"] .rkc { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); } [data-theme^="l-"] .rkc:hover { background: rgba(0,0,0,.07); border-color: var(--G); } [data-theme^="l-"] .rkc h4 { color: var(--G); } [data-theme^="l-"] .rkc p { color: rgba(0,0,0,.52); } [data-theme^="l-"] .trst { background: var(--G); border: 1px solid rgba(0,0,0,.08); } [data-theme^="l-"] .trst .big { color: var(--M); } [data-theme^="l-"] .trst .bigl { color: rgba(255,255,255,.6); } [data-theme^="l-"] .trst p { color: rgba(255,255,255,.65); } [data-theme^="l-"] #gallery { background: var(--G); } [data-theme^="l-"] .galh .stag { color: var(--M); justify-content: center; } [data-theme^="l-"] .galh .stit { color: var(--M); } [data-theme^="l-"] .galh .stit .hi { color: var(--M); opacity: .7; } [data-theme^="l-"] .galh p { color: rgba(255,255,255,.75); } [data-theme^="l-"] .gtab { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); } [data-theme^="l-"] .gtab:hover, [data-theme^="l-"] .gtab.active { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; } [data-theme^="l-"] .gimg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); } [data-theme^="l-"] .gimglbl { background: rgba(0,0,0,.45); } [data-theme^="l-"] .gimglbl span { color: rgba(255,255,255,.75); } [data-theme^="l-"] .bghost { color: var(--M); border-color: rgba(255,255,255,.3); } [data-theme^="l-"] #policies { background: linear-gradient(140deg, var(--OFF), var(--SECT-ALT)); } [data-theme^="l-"] #policies .stag { color: var(--G); } [data-theme^="l-"] #policies .stit { color: var(--TEXT) !important; } [data-theme^="l-"] #policies .stit span { color: var(--G) !important; } [data-theme^="l-"] #policies > .con > p { color: rgba(0,0,0,.5) !important; } [data-theme^="l-"] .polc { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); } [data-theme^="l-"] .polc:hover { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.2); } [data-theme^="l-"] .polc h3 { color: var(--G); } [data-theme^="l-"] .polc p { color: rgba(0,0,0,.6); } [data-theme^="l-"] .polc p b { color: var(--G); } [data-theme^="l-"] .polc ul li { color: rgba(0,0,0,.5); } [data-theme^="l-"] .polc ul li::before { color: var(--G); } [data-theme^="l-"] .timing-card { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); } [data-theme^="l-"] .timing-row.active { background: rgba(0,0,0,.05); border-left-color: var(--G); } [data-theme^="l-"] .timing-row.closed { background: rgba(0,0,0,.02); border-left-color: rgba(0,0,0,.1); } [data-theme^="l-"] .timing-day { color: rgba(0,0,0,.75); } [data-theme^="l-"] .timing-day.dim { color: rgba(0,0,0,.3); } [data-theme^="l-"] .timing-time { color: var(--G); } [data-theme^="l-"] .timing-time.dim { color: rgba(0,0,0,.28); } [data-theme^="l-"] .polc [style*="rgba(255,255,255,.04)"] { background: rgba(0,0,0,.04) !important; border-left-color: var(--G) !important; } [data-theme^="l-"] .polc [style*="color:var(--GL)"] { color: var(--G) !important; } [data-theme^="l-"] .polc [style*="rgba(255,255,255,.4)"] { color: rgba(0,0,0,.55) !important; } [data-theme^="l-"] [style*="rgba(255,255,255,.04)"] { background: rgba(0,0,0,.04) !important; } [data-theme^="l-"] #contact { background: var(--SECT-ALT); } [data-theme^="l-"] .ci .stag { color: var(--G); } [data-theme^="l-"] .ci .stit { color: var(--TEXT); } [data-theme^="l-"] .ci .stit .hi { color: var(--G); } [data-theme^="l-"] .cisub { color: rgba(0,0,0,.55); } [data-theme^="l-"] .cdet { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.03); } [data-theme^="l-"] .cdet:hover { border-color: var(--G); background: rgba(0,0,0,.06); } [data-theme^="l-"] .cdet h4 { color: var(--G); } [data-theme^="l-"] .cdet p, [data-theme^="l-"] .cdet a { color: rgba(0,0,0,.6); } [data-theme^="l-"] .cdet a:hover { color: var(--G); } [data-theme^="l-"] .mapb { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); } [data-theme^="l-"] .mapb p { color: rgba(0,0,0,.45); } [data-theme^="l-"] .mapb a { color: var(--G); border-bottom-color: var(--G); } [data-theme^="l-"] .cf { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); } [data-theme^="l-"] .cf h3 { color: var(--G); } [data-theme^="l-"] .fg label { color: rgba(0,0,0,.5); } [data-theme^="l-"] .fg input, [data-theme^="l-"] .fg textarea, [data-theme^="l-"] .fg select { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.15); color: var(--TEXT); } [data-theme^="l-"] .fg input:focus, [data-theme^="l-"] .fg textarea:focus, [data-theme^="l-"] .fg select:focus { border-color: var(--G); } [data-theme^="l-"] .fg select option { background: var(--OFF); color: var(--TEXT); } [data-theme^="l-"] .sbtn { background: var(--G); color: var(--M); } [data-theme^="l-"] .sbtn:hover { background: var(--GL); } [data-theme^="l-"] .fbar { border-top-color: rgba(0,0,0,.1); } [data-theme^="l-"] .fbrand { color: var(--G); } [data-theme^="l-"] .fbar p { color: rgba(0,0,0,.45) !important; } [data-theme^="l-"] .flinks a { color: rgba(0,0,0,.4); } [data-theme^="l-"] .flinks a:hover { color: var(--G); } [data-theme^="l-"] .bgold { background: var(--G) !important; color: var(--M) !important; } [data-theme^="l-"] .bgold:hover { background: var(--GL) !important; color: var(--M) !important; } [data-theme^="l-"] .stit { color: var(--TEXT); } [data-theme^="l-"] .stit .hi { color: var(--G); } [data-theme^="l-"] .spg { background: rgba(0,0,0,.04); border-left-color: var(--G); } [data-theme^="l-"] .spg h4 { color: var(--G); } [data-theme^="l-"] .sp { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: var(--TEXT); } [data-theme^="l-"] .vmc h3 { color: var(--G); } [data-theme^="l-"] .cic h4 { color: var(--G); } [data-theme^="l-"] .facc h3 { color: var(--G); } [data-theme^="l-"] .cuc h3 { color: var(--G); } [data-theme^="l-"] .extc h4 { color: var(--G); } [data-theme^="l-"] .hof h4 { color: var(--G); } [data-theme^="l-"] .trf h4 { color: var(--G); } [data-theme^="l-"] .evlbl h4 { color: var(--TEXT); } [data-theme^="l-"] .evlbl span { color: var(--G); } [data-theme^="l-"] .evc { background: var(--CARD); border-color: var(--BD); } [data-theme^="l-"] .ftag { background: rgba(0,0,0,.07); color: var(--G); border: none; } [data-theme^="l-"] .timing-day { color: var(--TEXT) !important; } [data-theme^="l-"] .timing-day.dim { color: rgba(0,0,0,.35) !important; } [data-theme^="l-"] .timing-time { color: var(--G) !important; } [data-theme^="l-"] .timing-time.dim { color: rgba(0,0,0,.3) !important; } [data-theme^="l-"] .polc [style*="rgba(255,255,255,.8)"] { color: var(--TEXT) !important; } [data-theme^="l-"] .polc [style*="rgba(255,255,255,.55)"] { color: var(--SUBTEXT) !important; } [data-theme^="l-"] .polc [style*="rgba(255,255,255,.62)"] { color: var(--SUBTEXT) !important; } [data-theme^="l-"] .timing-card [style*="rgba(255,255,255,.4)"] { color: rgba(0,0,0,.45) !important; } [data-theme^="l-"] .timing-card [style*="rgba(255,255,255,.55)"] { color: var(--SUBTEXT) !important; } [data-theme^="l-"] .timing-card [style*="rgba(255,255,255,.8)"] { color: var(--TEXT) !important; } [data-theme^="l-"] .ahl span { color: var(--SUBTEXT); } [data-theme^="l-"] .ab p { color: var(--SUBTEXT); } [data-theme^="l-"] .evtab { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.55); } [data-theme^="l-"] .evtab:hover, [data-theme^="l-"] .evtab.active { background: rgba(0,0,0,.08); border-color: var(--MB); color: var(--TEXT); } [data-theme^="l-"] .evyt-badge { background: rgba(220,0,0,.85); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:var(--font-body); font-size:var(--fs-md);line-height:var(--lh-body); background:var(--OFF);color:var(--TEXT);overflow-x:hidden;overflow-wrap:break-word; transition:background .4s ease,color .4s ease; } .stag { color: #2D0A3A !important; } .tbl a, .tb-link { font-family:var(--font-mono);font-size:var(--fs-micro);color:rgba(255,255,255,.65);text-decoration:none;letter-spacing:1px;transition:color .22s cubic-bezier(0.22,1,0.36,1) } .tbl a:hover, .tb-link:hover { color:var(--GL) } .tbr, .tb-right { font-family:var(--font-mono);font-size:var(--fs-micro);color:rgba(255,255,255,.84);letter-spacing:2px } .fbar-copy { color:rgba(255,255,255,.4);font-size:var(--fs-micro); } [data-theme^="l-"] .tb-link { color: var(--M) !important; } [data-theme^="l-"] .tb-link:hover { color: rgba(0,0,0,.55) !important; } [data-theme^="l-"] .tb-right { color: rgba(255,255,255,.6) !important; } [data-theme^="l-"] .fbar-copy { color: rgba(0,0,0,.5) !important; } #tb{position:fixed;top:0;left:0;right:0;z-index:1100;background:var(--M);border-bottom:1px solid rgba(212,160,23,.2);padding:.3rem var(--gut);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.3rem;height:32px;transition:background .4s ease;} .tbl{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;min-width:0} .tbl a{font-family:var(--font-mono);font-size:var(--fs-micro);color:rgba(255,255,255,.65);text-decoration:none;letter-spacing:1px;transition:color .22s cubic-bezier(0.22,1,0.36,1)} .tbl a:hover{color:var(--GL)} .tbr{font-family:var(--font-mono);font-size:var(--fs-micro);color:rgba(255,255,255,.4);letter-spacing:2px} nav{position:fixed;top:32px;left:0;right:0;z-index:1000;background:color-mix(in srgb,var(--M) 97%,transparent);backdrop-filter:blur(14px);border-bottom:2px solid var(--G);padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;height:60px;transition:background .4s ease,border-color .4s ease;} .nbrand{display:flex;align-items:center;gap:.75rem;text-decoration:none;min-width:0} #tb,nav{max-width:100vw} .ntext{min-width:0} .nemblem{width:36px;height:36px;background:linear-gradient(135deg,var(--G),var(--GL));clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-micro);color:var(--M);flex-shrink:0} .ntext{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--GL);letter-spacing:1px;line-height:1.45} .ntext span, .ntext-sub{display:block;font-size:var(--fs-micro);color:rgba(255,255,255,.84);letter-spacing:1.5px;font-family:var(--font-mono);font-weight:400} [data-theme^="l-"] .ntext-sub { color: rgba(255,255,255,.85); } .nlinks{display:flex;align-items:center;gap:0} .nlinks>a,.ndrop>a{color:rgba(255,255,255,.75);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:var(--fs-micro);letter-spacing:.5px;padding:.5rem .6rem;transition:color .22s cubic-bezier(0.22,1,0.36,1);text-transform:uppercase;white-space:nowrap} .nlinks>a:hover,.ndrop>a:hover{color:var(--GL)} .ndrop{position:relative} .ndrop:hover .ddm{display:block} .ddm{display:none;position:absolute;top:100%;left:0;background:var(--M);border:1px solid rgba(212,160,23,.25);min-width:190px;z-index:300} .ddm a{display:block;padding:.5rem 1rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-micro);color:rgba(255,255,255,.68);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:color .22s cubic-bezier(0.22,1,0.36,1),padding-left .22s cubic-bezier(0.22,1,0.36,1),background .22s ease} .ddm a:hover{color:var(--GL);background:rgba(212,160,23,.07);padding-left:1.3rem} .ncta{background:var(--G)!important;color:var(--M)!important;padding:.38rem .9rem!important;font-weight:700!important;margin-left:.4rem} .ncta:hover{background:var(--GL)!important} .ntog{display:none;margin-left:auto;flex-shrink:0;background:none;border:none;color:var(--G);font-size:var(--fs-3xl);cursor:pointer;padding:.25rem} #ticker{background:var(--MB);padding:.45rem 0;overflow:hidden;white-space:nowrap; position:fixed;top:92px;left:0;right:0;z-index:999; transition:background .4s ease;} .ttrack{display:inline-flex;gap:3.5rem;animation:tkanim 32s linear infinite} .ti{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:1.5px;color:rgba(255,255,255,.82);text-transform:uppercase} .ti b{color:var(--GL)} @keyframes tkanim{from{transform:translateX(0)}to{transform:translateX(-50%)}} #hero{min-height:calc(100vh - 128px);margin-top:36px;background:var(--M);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4rem var(--gut) 3rem;transition:background .4s ease;} .hgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(212,160,23,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.05) 1px,transparent 1px);background-size:55px 55px} .hglow{position:absolute;width:900px;height:900px;background:radial-gradient(circle,rgba(155,15,34,.45) 0%,transparent 68%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none} .hcon{position:relative;z-index:2;text-align:center;max-width:960px;width:100%} .hbadge{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:var(--fs-micro);line-height:2.2;letter-spacing:1.5px;color:var(--G);border:1px solid rgba(212,160,23,.35);padding:.38rem 1.1rem;margin-bottom:1.6rem;text-transform:uppercase;animation:fu .7s cubic-bezier(0.34,1.56,0.64,1) both} .hbadge::before,.hbadge::after{content:'◆';font-size:.58rem} .hero-logo-wrap{margin-bottom:1.8rem;animation:fu .7s cubic-bezier(0.34,1.56,0.64,1) both} .hero-logo{width:200px;height:200px;border-radius:50%;border:1px solid rgba(212,160,23,.6);object-fit:contain;background:rgba(255,255,255,0.07);padding:8px;box-shadow:0 0 0 6px rgba(212,160,23,.12),0 8px 40px rgba(0,0,0,.4)} .hero-logo1-wrap{margin-bottom:1.8rem;animation:fu .7s cubic-bezier(0.34,1.56,0.64,1) both} .hero-logo1{width:120px;height:120px;border-radius:50%;border:1px solid rgba(212,160,23,.6);object-fit:contain;background:rgba(255,255,255,0.07);padding:8px;box-shadow:0 0 0 6px rgba(212,160,23,.12),0 8px 40px rgba(0,0,0,.4)} .logo-shine-wrap{ position:relative; display:inline-block; border-radius:50%; overflow:hidden; box-shadow:0 0 0 6px rgba(212,160,23,.18), 0 0 0 11px rgba(212,160,23,.09), 0 8px 40px rgba(0,0,0,.45); } .logo-shine-wrap::after{ content:''; position:absolute; top:0;left:-110%; width:60%;height:100%; background:linear-gradient( 105deg, transparent 25%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 65%, transparent 75% ); transform:skewX(-18deg); animation:logoShine 3.2s cubic-bezier(0.4,0,0.6,1) infinite; pointer-events:none; border-radius:50%; } @keyframes logoShine{ 0% { left:-110%; opacity:0 } 8% { opacity:1 } 45% { left:160%; opacity:1 } 55% { left:160%; opacity:0 } 100% { left:160%; opacity:0 } } .htit{font-family:var(--font-display);font-weight:700;font-size:var(--fs-hero);color:var(--W);line-height:1;text-shadow:0 4px 40px rgba(0,0,0,.5);animation:fu .8s cubic-bezier(0.68,-0.55,0.265,1.55) .15s both} .htit .hi{color:var(--GL);display:block} .hsub{font-family:var(--font-mono);font-size:var(--fs-xs);color:rgba(255,255,255,.45);letter-spacing:2px;text-transform:uppercase;margin:1.1rem 0 2.8rem;animation:fu .8s cubic-bezier(0.68,-0.55,0.265,1.55) .3s both} .hstats{display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.8rem;animation:fu .8s cubic-bezier(0.68,-0.55,0.265,1.55) .45s both} .hst .n{font-family:var(--font-display);font-weight:700;font-size:var(--fs-6xl);color:var(--GL);line-height:1} .hst .l{font-size:var(--fs-micro);color:rgba(255,255,255,.38);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-mono);margin-top:.2rem} .hdiv{width:1px;height:48px;background:rgba(212,160,23,.2);align-self:center} .hbtns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;animation:fu .8s cubic-bezier(0.68,-0.55,0.265,1.55) .6s both} .bgold{background:var(--G);color:var(--M);padding:.85rem 2.2rem;font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;text-decoration:none;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);display:inline-block;transition:background .22s cubic-bezier(0.22,1,0.36,1),color .22s ease,transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .35s cubic-bezier(0.34,1.56,0.64,1);} .bgold:hover{background:var(--GL);transform:translateY(-4px) scale(1.02);box-shadow:0 10px 25px rgba(0,0,0,0.2);} .bgold:active{transform:translateY(0) scale(0.98)} .bghost{background:transparent;color:var(--W);padding:.85rem 2.2rem;font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);letter-spacing:2px;text-transform:uppercase;border:1px solid rgba(255,255,255,.25);cursor:pointer;text-decoration:none;display:inline-block;transition:border-color .22s cubic-bezier(0.22,1,0.36,1),color .22s ease,transform .35s cubic-bezier(0.34,1.56,0.64,1),background .22s ease;} .bghost:hover{border-color:var(--G);color:var(--G);transform:translateY(-4px);background:rgba(255,255,255,0.05);} .bghost:active{transform:translateY(0) scale(0.98)} @keyframes fu{from{opacity:0;transform:translateY(40px) scale(0.9)}to{opacity:1;transform:none}} /* ── Gutters. px on purpose: a side gutter is layout, not type, so it must not inflate with the type chip. 16 / 28 / 44 as the viewport widens. ── */ :root{ --gut:16px; } @media(min-width:700px){ :root{ --gut:28px; } } @media(min-width:1400px){ :root{ --gut:44px; } } section{padding:5rem var(--gut);transition:background .4s ease;} @media(max-width:700px){ section{padding:3.25rem var(--gut);} } .con{max-width:1180px;margin:0 auto} .stag{font-family:var(--font-mono);font-size:var(--fs-2xl);letter-spacing:2px;color:var(--MB);text-transform:uppercase;display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem} .stag::before{content:'';display:inline-block;width:26px;height:2px;background:var(--G)} .stit{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);color:var(--M);line-height:1.1} .stit .hi{color:var(--MB)} .rev{ opacity:0; transform:translateY(60px) scale(0.92) rotateX(8deg); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); will-change:transform,opacity; transform-origin: center bottom; } .rev.vis{ opacity:1; transform:translateY(0) scale(1) rotateX(0); } .rev.from-left { transform:translateX(-70px) scale(0.93) rotateY(6deg); } .rev.from-right { transform:translateX(70px) scale(0.93) rotateY(-6deg); } .rev.from-bottom{ transform:translateY(70px) scale(0.92) rotateX(8deg); } .rev.from-scale { transform:scale(0.7) rotate(-3deg); opacity:0; } .rev.from-left.vis, .rev.from-right.vis, .rev.from-bottom.vis, .rev.from-scale.vis { transform:none; opacity:1; } #about{background:var(--CARD);} .ag{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center} .ab p{color:var(--SUBTEXT);line-height:1.9;margin-bottom:1rem;font-size:var(--fs-lg)} .ahls{display:flex;flex-direction:column;gap:.65rem;margin-top:1.4rem} .ahl{display:flex;align-items:center;gap:.8rem;padding:.65rem 1rem;background:rgba(107,15,26,.04);border-left:3px solid var(--G);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.3s ease;} .ahl:hover{transform:translateX(8px);background:rgba(107,15,26,.08);} .ahl .d{width:6px;height:6px;background:var(--MB);border-radius:50%;flex-shrink:0} .ahl span{font-size:var(--fs-sm);color:var(--SUBTEXT)} .apanel{background:var(--M);padding:2.5rem;position:relative;overflow:hidden;transition:background .4s ease,transform 0.4s cubic-bezier(0.34,1.56,0.64,1);} .apanel:hover{transform:scale(1.02);} .apanel::before{content:'';position:absolute;top:0;right:0;width:130px;height:130px;background:rgba(212,160,23,.12);clip-path:polygon(100% 0,0 0,100% 100%)} .apy{font-family:var(--font-display);font-size:5rem;font-weight:700;color:rgba(212,160,23,.14);line-height:1} .apt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);color:var(--GL);margin-bottom:.75rem} .apb{color:rgba(255,255,255,.62);font-size:var(--fs-sm);line-height:1.75} .apf{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(212,160,23,.25);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:1.5px;color:var(--G)} #chairman{background:linear-gradient(140deg,var(--M) 0%,#1a0306 100%);transition:background .4s ease;} .chg{display:grid;grid-template-columns:260px 1fr;gap:3.5rem;align-items:start} .chcard{background:rgba(212,160,23,.06);border:1px solid rgba(212,160,23,.22);padding:1.8rem;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s ease;} .chcard:hover{transform:translateY(-8px);box-shadow:0 20px 30px rgba(0,0,0,0.3);} .chav{width:100px;height:100px;background:linear-gradient(135deg,var(--MB),var(--M));border:3px solid var(--G);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--GL);margin-bottom:1.1rem} .chn{font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);color:var(--GL)} .chr{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px;color:var(--GR);text-transform:uppercase;margin-bottom:1.3rem} .chv{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-xs);color:rgba(255,255,255,.52);transition:color 0.2s ease,transform 0.2s ease;} .chv:hover{color:var(--GL);transform:translateX(4px);} .chv::before{content:'▸';color:var(--G);font-size:.62rem} .chct .stag{color:var(--G)} .chct .stit{color:var(--W)} .chct .stit .hi{color:var(--GL)} .chq{border-left:3px solid var(--G);padding:1.4rem 1.8rem;background:rgba(255,255,255,.03);margin:1.4rem 0} .chq p{color:rgba(255,255,255,.7);line-height:1.85;font-style:italic;font-size:var(--fs-base)} .chb p{color:rgba(255,255,255,.52);line-height:1.8;margin-bottom:.85rem;font-size:var(--fs-sm)} .mils{display:flex;gap:1.5rem;flex-wrap:wrap} .mil{text-align:center;padding:.85rem 1.2rem;border:1px solid rgba(212,160,23,.2);background:rgba(212,160,23,.04);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.3s ease;} .mil:hover{transform:scale(1.1);background:rgba(212,160,23,.1);} .mil .n{font-family:var(--font-display);font-weight:700;font-size:var(--fs-5xl);color:var(--GL);line-height:1} .mil .l{font-size:var(--fs-micro);color:rgba(255,255,255,.33);font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase} #vision{background:var(--SECT-ALT);} .vmg{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;margin-top:2.2rem} .vmc{background:var(--CARD);padding:2.2rem;border-top:4px solid var(--MB);box-shadow:0 4px 20px rgba(0,0,0,.05);position:relative;overflow:hidden;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s ease;} .vmc:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,0.1);} .vmc::after{content:attr(data-bg);position:absolute;bottom:-16px;right:-6px;font-family:var(--font-display);font-size:5rem;font-weight:700;color:rgba(147,112,219,0.15);line-height:1;pointer-events:none} .vmc h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-3xl);color:var(--M);margin-bottom:1rem} .vmc p{color:var(--SUBTEXT);line-height:1.85;font-size:var(--fs-lg);margin-bottom:.75rem} .vmc p em{font-style:normal;color:var(--MB);font-weight:600} .ml{list-style:none} .ml li{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem 0;border-bottom:1px solid rgba(107,15,26,.06);color:var(--SUBTEXT);font-size:var(--fs-sm);line-height:1.55} .ml li::before{content:'◆';color:var(--G);font-size:.42rem;margin-top:.42rem;flex-shrink:0} #campus{background:var(--CARD);} .cig{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem} .cic{padding:1.4rem;background:var(--SECT-ALT);border:1px solid var(--BD);transition:border-color .28s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .35s cubic-bezier(0.22,1,0.36,1),background .28s ease} .cic:hover{border-color:var(--MB);background:var(--CARD);transform:translateY(-8px) scale(1.02);box-shadow:0 15px 30px rgba(107,15,26,.15)} .cic .ico{font-size:1.9rem;margin-bottom:.75rem;display:block} .cic h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--M);margin-bottom:.35rem} .cic p{font-size:var(--fs-xs);color:var(--SUBTEXT);line-height:1.6} #facilities{background:var(--SECT-ALT);} .facg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:1.3rem;margin-top:2.2rem} .facc{background:var(--CARD);border:1px solid var(--BD);padding:1.8rem;position:relative;overflow:hidden;transition:border-color .28s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .35s cubic-bezier(0.22,1,0.36,1)} .facc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--MB),var(--G));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(0.22,1,0.36,1)} .facc:hover{border-color:var(--MB);transform:translateY(-8px);box-shadow:0 20px 40px rgba(107,15,26,.15)} .facc:hover::before{transform:scaleX(1)} .fico{font-size:2.2rem;margin-bottom:.9rem;display:block} .facc h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);color:var(--M);margin-bottom:.65rem} .facc p{color:var(--SUBTEXT);line-height:1.7;font-size:var(--fs-lg)} .ftags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem} .ftag{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:1px;padding:.18rem .5rem;background:rgba(107,15,26,.07);color:var(--MB);text-transform:uppercase} #gallery{background:var(--M);transition:background .4s ease;} .galh{text-align:center;margin-bottom:2.2rem} .galh .stag{color:var(--G);justify-content:center} .galh .stit{color:var(--W)} .galh .stit .hi{color:var(--GL)} .galh p{color:rgba(255,255,255,.45);max-width:560px;margin:.6rem auto 0;line-height:1.7;font-size:var(--fs-sm)} .galtabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.8rem} .gtab{background:rgba(255,255,255,.06);border:1px solid rgba(212,160,23,.18);padding:.4rem 1rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);color:rgba(255,255,255,.55);letter-spacing:1px;cursor:pointer;text-transform:uppercase; transition:background 0.35s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease; } .gtab:hover{transform:translateY(-4px) scale(1.07);box-shadow:0 8px 20px rgba(0,0,0,.25);} .gtab:hover,.gtab.active{background:rgba(212,160,23,.18);border-color:var(--G);color:var(--GL)} .gtab.active{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(212,160,23,.2);} .galcat{ display:none; opacity:0; transform:translateY(28px) scale(0.97); transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); } .galcat.show{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:1rem; } .galcat.visible{opacity:1;transform:translateY(0) scale(1)} .gimg{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(212,160,23,.12);cursor:pointer; transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease; } .gimg::after{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(212,160,23,.18) 0%,transparent 60%); opacity:0;transition:opacity 0.4s ease;pointer-events:none; } .gimg:hover{transform:scale(1.05) translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 0 2px rgba(212,160,23,.5);border-color:var(--G);z-index:2;} .gimg:hover::after{opacity:1;} .gimg img{width:100%;height:170px;object-fit:cover;display:block; transition:transform 0.7s cubic-bezier(0.34,1.56,0.64,1),filter 0.5s ease; filter:saturate(.7) brightness(.95)} .gimg:hover img{transform:scale(1.18);filter:saturate(1.3) brightness(1.05)} .gimglbl{padding:.7rem .9rem;background:rgba(0,0,0,.5); transition:background 0.3s ease; } .gimg:hover .gimglbl{background:rgba(0,0,0,.7);} .gimglbl span{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:1.5px;color:rgba(255,255,255,.45);text-transform:uppercase} .highlight-text{color:#000000;font-weight:600;} /* ── YouTube Lightbox ─────────────────────────────────────────────────── */ #ytlb{ display:flex;position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:2100; align-items:center;justify-content:center;padding:1rem; opacity:0;pointer-events:none; transition:opacity .4s cubic-bezier(0.22,1,0.36,1); } #ytlb.open{opacity:1;pointer-events:all} .ytlb-wrap{ position:relative;width:min(860px,95vw); transform:scale(0.82) translateY(40px); transition:transform .5s cubic-bezier(0.34,1.56,0.64,1); } #ytlb.open .ytlb-wrap{transform:scale(1) translateY(0)} .ytlb-ratio{position:relative;padding-bottom:56.25%;height:0;overflow:hidden; border:2px solid rgba(212,160,23,.35); box-shadow:0 0 0 8px rgba(212,160,23,.07), 0 40px 80px rgba(0,0,0,.7);} .ytlb-ratio iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none} #ytlbclose{ position:absolute;top:-2.6rem;right:0; background:none;border:none;color:var(--GL); font-size:2rem;cursor:pointer;line-height:1; transition:transform .3s cubic-bezier(0.34,1.56,0.64,1),color .2s ease; } #ytlbclose:hover{transform:scale(1.3) rotate(90deg);color:#fff} #ytlbcap{ margin-top:.85rem; font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px; color:rgba(255,255,255,.5);text-transform:uppercase;text-align:center; } #events{background:var(--SECT-ALT);} .evh{text-align:left;margin-bottom:1.5rem} .evtabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem} .evtab{ background:rgba(107,15,26,.06);border:1px solid rgba(107,15,26,.18); padding:.4rem 1rem;font-family:var(--font-display);font-weight:600; font-size:var(--fs-xs);color:rgba(0,0,0,.45);letter-spacing:1px; cursor:pointer;text-transform:uppercase; transition:background 0.35s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease; } .evtab:hover{transform:translateY(-4px) scale(1.07);box-shadow:0 8px 20px rgba(0,0,0,.12);} .evtab:hover,.evtab.active{background:rgba(107,15,26,.14);border-color:var(--MB);color:var(--TEXT)} .evtab.active{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(107,15,26,.15);} /* Event category panels — mirrors .galcat exactly */ .evcat{ display:none; opacity:0; transform:translateY(28px) scale(0.97); transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); } .evcat.show{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr)); gap:1.1rem; } .evcat.visible{opacity:1;transform:translateY(0) scale(1)} .evc{position:relative;overflow:hidden;background:var(--CARD);border:1px solid var(--BD); transition:border-color .28s cubic-bezier(0.22,1,0.36,1), box-shadow .28s cubic-bezier(0.22,1,0.36,1), transform .35s cubic-bezier(0.34,1.56,0.64,1)} .evc:hover{border-color:var(--MB);box-shadow:0 15px 30px rgba(107,15,26,.18);transform:translateY(-8px)} .evc img{width:100%;height:175px;object-fit:cover;display:block; transition:transform .5s cubic-bezier(0.34,1.56,0.64,1),filter .5s ease;filter:saturate(.8)} .evc:hover img{transform:scale(1.1);filter:saturate(1.2)} .evc-ytplay{ position:absolute;top:0;left:0;right:0;height:175px; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,0); transition:background .3s ease; pointer-events:none; } .evc:hover .evc-ytplay{background:rgba(0,0,0,.28)} .evc-ytplay .ytplay-icon{ width:54px;height:54px;border-radius:50%; background:rgba(220,0,0,.9); display:flex;align-items:center;justify-content:center; font-size:1.5rem;color:#fff; transform:scale(0.7);opacity:0; transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), opacity .3s ease; } .evc:hover .ytplay-icon{transform:scale(1);opacity:1} /* YouTube badge on card label */ .evyt-badge{ display:inline-flex;align-items:center;gap:.3rem; font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:1px; background:rgba(220,0,0,.9);color:#fff;padding:.15rem .48rem; text-transform:uppercase;margin-left:.45rem;vertical-align:middle; border-radius:2px; } .evlbl{padding:.85rem 1rem;background:var(--CARD)} .evlbl h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--M);margin-bottom:.12rem} .evlbl span{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:1.5px;color:var(--GR);text-transform:uppercase} #sports{background:var(--CARD);} .spla{display:grid;grid-template-columns:1fr 1.35fr;gap:3.5rem;align-items:start} .spc{display:flex;flex-direction:column;gap:.9rem} .spg{background:var(--SECT-ALT);padding:1.3rem;border-left:3px solid var(--MB);transition:transform 0.3s ease,background 0.3s ease;} .spg:hover{transform:translateX(6px);background:var(--CARD);} .spg h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--M);margin-bottom:.65rem;text-transform:uppercase;letter-spacing:1px} .spp{display:flex;flex-wrap:wrap;gap:.3rem} .sp{font-size:var(--fs-micro);padding:.25rem .7rem;background:rgba(107,15,26,.05);border:1px solid rgba(107,15,26,.12);color:var(--MB);font-family:var(--font-display);font-weight:600;transition:all 0.2s ease;} .sp:hover{background:var(--MB);color:#fff;transform:scale(1.05);} .achp{background:var(--M);padding:2.2rem;position:relative;overflow:hidden;transition:background .4s ease,transform 0.3s ease;} .achp:hover{transform:scale(1.02);} .achp::before{content:'🏆';position:absolute;right:1.3rem;top:.9rem;font-size:4rem;opacity:.07} .achp h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-3xl);color:var(--GL);margin-bottom:1.2rem} .achl{display:flex;flex-direction:column;gap:.75rem} .al{display:flex;align-items:center;gap:.9rem;padding:.85rem;background:rgba(255,255,255,.04);border-left:3px solid var(--G);transition:background 0.2s ease,transform 0.2s ease;} .al:hover{background:rgba(255,255,255,.1);transform:translateX(4px);} .alb{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px;color:var(--G);text-transform:uppercase;width:70px;flex-shrink:0} .ald{color:rgba(255,255,255,.52);font-size:var(--fs-xs);line-height:1.5} #culturals{background:var(--SECT-ALT);} .ann{background:linear-gradient(135deg,var(--M),var(--MB));padding:2.2rem;display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;margin-bottom:1.8rem;transition:transform 0.3s ease;} .ann:hover{transform:scale(1.01);} .anns .n{font-family:var(--font-display);font-weight:700;font-size:var(--fs-6xl);color:var(--GL);line-height:1} .anns .l{font-size:var(--fs-micro);color:rgba(255,255,255,.42);letter-spacing:2px;font-family:var(--font-mono);text-transform:uppercase} .annt h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-4xl);color:var(--W)} .annt p{color:rgba(255,255,255,.52);font-size:var(--fs-sm);margin-top:.25rem} .cug{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr));gap:1.1rem} .cuc{background:var(--CARD);padding:1.6rem;text-align:center;border-bottom:3px solid transparent;transition:border-bottom-color .28s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .35s cubic-bezier(0.22,1,0.36,1)} .cuc:hover{border-bottom-color:var(--G);transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,.12)} .cuc .em{font-size:2.6rem;margin-bottom:.8rem;display:block} .cuc h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--M);margin-bottom:.45rem} .cuc p{font-size:var(--fs-xs);color:var(--SUBTEXT);line-height:1.6} #extras{background:var(--CARD);} .extg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(175px,100%),1fr));gap:.9rem;margin-top:1.8rem} .extc{background:var(--SECT-ALT);padding:1.3rem;text-align:center;border:1px solid var(--BD);transition:border-color .28s cubic-bezier(0.22,1,0.36,1),box-shadow .28s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.34,1.56,0.64,1),background .28s ease} .extc:hover{border-color:var(--MB);box-shadow:0 10px 25px rgba(107,15,26,.15);transform:scale(1.08) translateY(-4px);background:var(--CARD)} .extc .ic{font-size:2rem;margin-bottom:.65rem;display:block} .extc h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--M);margin-bottom:.28rem} .extc p{font-size:var(--fs-micro);color:var(--SUBTEXT)} #hostel{background:var(--SECT-ALT);} .hola{display:grid;grid-template-columns:1.15fr 1fr;gap:3.5rem;align-items:start} .hof{display:flex;gap:1rem;align-items:flex-start;padding:1rem;border:1px solid var(--BD);transition:border-color .28s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .28s cubic-bezier(0.22,1,0.36,1);background:var(--CARD)} .hof:hover{border-color:var(--MB);transform:translateX(10px);box-shadow:0 8px 20px rgba(107,15,26,.1)} .hof .ic{font-size:1.6rem;flex-shrink:0} .hof h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--M);margin-bottom:.22rem} .hof p{font-size:var(--fs-xs);color:var(--SUBTEXT);line-height:1.6} .hop{background:var(--M);padding:2.2rem;position:relative;overflow:hidden;transition:background .4s ease,transform 0.3s ease;} .hop:hover{transform:scale(1.02);} .hop::after{content:'🏠';position:absolute;bottom:-8px;right:.9rem;font-size:4.5rem;opacity:.07} .hop h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-3xl);color:var(--GL);margin-bottom:.9rem} .hop p{color:rgba(255,255,255,.58);line-height:1.8;font-size:var(--fs-sm);margin-bottom:.85rem} #rankers{background:linear-gradient(140deg,var(--M),#1a0306);transition:background .4s ease;} .rkh{text-align:center;margin-bottom:2.5rem} .rkh .stag{color:var(--G);justify-content:center} .rkh .stit{color:var(--W)} .rkh .stit .hi{color:var(--GL)} .rkh p{color:rgba(255,255,255,.45);max-width:560px;margin:.7rem auto 0;line-height:1.75;font-size:var(--fs-sm)} .rkc{background:rgba(255,255,255,.04);border:1px solid rgba(212,160,23,.18);padding:1.8rem;text-align:center;transition:border-color .28s cubic-bezier(0.22,1,0.36,1),background .28s ease,transform .35s cubic-bezier(0.34,1.56,0.64,1)} .rkc:hover{border-color:var(--G);background:rgba(212,160,23,.1);transform:translateY(-8px)} .rkc .tro{font-size:var(--fs-6xl);margin-bottom:.8rem} .rkc h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--GL);margin-bottom:.4rem} .rkc p{font-size:var(--fs-xs);color:rgba(255,255,255,.42);line-height:1.6} #transport{background:var(--CARD);} .trla{display:grid;grid-template-columns:1fr 1.5fr;gap:3.5rem;align-items:center} .trst{background:var(--M);padding:2.2rem;text-align:center;transition:background .4s ease,transform 0.3s ease;} .trst:hover{transform:scale(1.03);} .trst .big{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;color:var(--GL);line-height:1;display:block} .trst .bigl{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:1.5px;color:rgba(255,255,255,.42);text-transform:uppercase;display:block;margin-top:.45rem} .trst p{color:rgba(255,255,255,.52);font-size:var(--fs-xs);margin-top:.9rem;line-height:1.7} .trf{display:flex;gap:.9rem;align-items:center;padding:.9rem 1.1rem;background:var(--SECT-ALT);border-left:3px solid var(--MB);transition:border-left-color .25s ease,transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .25s ease} .trf:hover{border-left-color:var(--G);transform:translateX(8px);box-shadow:0 5px 15px rgba(107,15,26,.1)} .trf .ic{font-size:var(--fs-3xl)} .trf h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--M)} .trf p{font-size:var(--fs-micro);color:var(--SUBTEXT)} #policies{background:linear-gradient(140deg,var(--M),#1a0306);padding:5rem 2rem;transition:background .4s ease;} .polgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.2rem;margin-top:2rem} .polc{background:rgba(255,255,255,.04);border:1px solid rgba(212,160,23,.17);padding:1.8rem;transition:border-color .28s cubic-bezier(0.22,1,0.36,1),background .28s ease,transform .35s cubic-bezier(0.34,1.56,0.64,1)} .polc:hover{border-color:rgba(212,160,23,.5);background:rgba(212,160,23,.08);transform:translateY(-6px)} .polc .ic{font-size:var(--fs-5xl);margin-bottom:.85rem;display:block} .polc h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--GL);margin-bottom:.65rem} .polc p{color:rgba(255,255,255,.5);font-size:var(--fs-xs);line-height:1.75} .polc p b{color:var(--G)} .polc ul{margin-top:.7rem;display:flex;flex-direction:column;gap:.35rem;list-style:none} .polc ul li{font-size:var(--fs-micro);color:rgba(255,255,255,.38);display:flex;gap:.5rem;align-items:flex-start} .polc ul li::before{content:'◆';color:var(--G);font-size:.4rem;margin-top:.32rem;flex-shrink:0} .timing-card{background:rgba(212,160,23,.07);border:1px solid rgba(212,160,23,.28);padding:2rem;transition:transform 0.3s ease;} .timing-card:hover{transform:scale(1.02);} .timing-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;margin-bottom:.5rem;transition:background 0.2s ease;} .timing-row.active{background:rgba(255,255,255,.06);border-left:3px solid var(--G)} .timing-row.closed{background:rgba(255,255,255,.02);border-left:3px solid rgba(255,255,255,.1)} .timing-day{font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);color:rgba(255,255,255,.78)} .timing-day.dim{color:rgba(255,255,255,.32)} .timing-time{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--GL);letter-spacing:1px} .timing-time.dim{color:rgba(255,255,255,.22)} #contact{background:var(--DK);padding:5rem 2rem 2.5rem;transition:background .4s ease;} .ctw{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-bottom:3.5rem} .ci .stag{color:var(--G)} .ci .stit{color:var(--W)} .ci .stit .hi{color:var(--GL)} .cisub{color:rgba(255,255,255,.4);margin:.75rem 0 0;line-height:1.7;font-size:var(--fs-sm)} .cdet{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);transition:border-color .25s cubic-bezier(0.22,1,0.36,1),background .25s ease,transform .35s cubic-bezier(0.34,1.56,0.64,1)} .cdet:hover{border-color:rgba(212,160,23,.4);background:rgba(212,160,23,.06);transform:translateX(8px)} .cdet .ic{font-size:var(--fs-2xl);flex-shrink:0} .cdet h4{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px;color:var(--G);margin-bottom:.22rem;text-transform:uppercase} .cdet p,.cdet a{color:rgba(255,255,255,.52);font-size:var(--fs-sm);line-height:1.5;text-decoration:none} .cdet a{transition:color .22s cubic-bezier(0.22,1,0.36,1)} .cdet a:hover{color:var(--G)} .mapb{background:rgba(212,160,23,.04);border:1px solid rgba(212,160,23,.14);padding:1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:1.2rem;transition:transform 0.3s ease;} .mapb:hover{transform:scale(1.03);} .mapb .ic{font-size:var(--fs-6xl);margin-bottom:.55rem} .mapb p{color:rgba(255,255,255,.38);font-size:var(--fs-xs);font-family:var(--font-mono);letter-spacing:1px} .mapb a{color:var(--G);font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);text-decoration:none;margin-top:.65rem;display:inline-block;border-bottom:1px solid rgba(212,160,23,.35);padding-bottom:2px;transition:color .22s ease,border-bottom-color .22s ease} .mapb a:hover{color:var(--GL);border-bottom-color:var(--GL)} .cf{background:rgba(255,255,255,.04);padding:2.2rem;border:1px solid rgba(255,255,255,.07);transition:transform 0.3s ease;} .cf:hover{transform:scale(1.01);} .cf h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-3xl);color:var(--GL);margin-bottom:1.3rem} .fg{margin-bottom:1rem} .fg label{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px;color:var(--GR);text-transform:uppercase;margin-bottom:.42rem} .fg input,.fg textarea,.fg select{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--W);padding:.72rem .88rem;font-family:var(--font-body);font-size:var(--fs-sm);outline:none;transition:border-color .22s cubic-bezier(0.22,1,0.36,1),background .22s ease} .fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--G);background:rgba(255,255,255,.07)} .fg textarea{resize:vertical;min-height:90px} .fg select option{background:var(--DK)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .sbtn{background:var(--G);color:var(--M);padding:.82rem 2rem;font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;width:100%;transition:background .22s cubic-bezier(0.22,1,0.36,1),transform .25s cubic-bezier(0.34,1.56,0.64,1)} .sbtn:hover{background:var(--GL);transform:translateY(-3px) scale(1.02)} .sbtn:active{transform:translateY(0) scale(0.98)} .fbar{border-top:1px solid rgba(255,255,255,.07);padding-top:1.8rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.9rem} .fbrand{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--GL)} .fbar p{color:rgba(255,255,255,.22);font-size:var(--fs-micro)} .flinks{display:flex;gap:1.3rem;flex-wrap:wrap} .flinks a{color:rgba(255,255,255,.22);font-size:var(--fs-micro);text-decoration:none;transition:color .22s cubic-bezier(0.22,1,0.36,1)} .flinks a:hover{color:var(--G)} #heroSlider{ position:relative;width:100%;overflow:hidden; background:var(--M); } .hslide{ display:none;position:relative;width:100%; animation:slideFadeIn .9s cubic-bezier(0.16,1,0.3,1) both; } .hslide.active{display:block} @keyframes slideFadeIn{ from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)} } .hslide img{ width:100%;height:520px;object-fit:contain;display:block; filter:brightness(.72) saturate(1.1); } @media(max-width:768px){.hslide img{height:260px}} .hslide-overlay{ position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 55%,transparent 100%); pointer-events:none; } .hslide-caption{ position:absolute;bottom:0;left:0;right:0; padding:1.6rem 2rem 1.4rem; display:flex;align-items:flex-end;justify-content:space-between; flex-wrap:wrap;gap:.5rem; } .hslide-label{ font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:1.5px; color:var(--G);text-transform:uppercase;display:block;margin-bottom:.28rem; } .hslide-title{ font-family:var(--font-display);font-weight:700; font-size:var(--fs-slide);color:#fff;line-height:1.25; } .hslide-cat{ font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px; color:rgba(255,255,255,.5);text-transform:uppercase;white-space:nowrap; } .hslide-prev,.hslide-next{ position:absolute;top:50%;transform:translateY(-50%); background:rgba(0,0,0,.38);border:1px solid rgba(212,160,23,.3); color:var(--G);width:42px;height:42px;cursor:pointer; display:flex;align-items:center;justify-content:center; font-size:var(--fs-xl);z-index:10;border-radius:2px; transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(0.34,1.56,0.64,1); backdrop-filter:blur(6px); } .hslide-prev{left:.9rem} .hslide-next{right:.9rem} .hslide-prev:hover{background:var(--G);color:var(--M);transform:translateY(-50%) scale(1.12)} .hslide-next:hover{background:var(--G);color:var(--M);transform:translateY(-50%) scale(1.12)} .hslide-dots{ position:absolute;bottom:.85rem;left:50%;transform:translateX(-50%); display:flex;gap:.45rem;z-index:10; } .hslide-dot{ width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.4); cursor:pointer;transition:background .3s ease,transform .35s cubic-bezier(0.34,1.56,0.64,1),width .3s ease; } .hslide-dot.active{ background:var(--G);border-color:var(--G); width:22px;border-radius:4px;transform:scale(1.1); } .hslide-progress{ position:absolute;top:0;left:0;height:3px; background:var(--G);z-index:11; width:0%;transition:width linear; } .hslide-counter{ position:absolute;top:.75rem;right:.85rem;z-index:10; font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px; color:rgba(255,255,255,.6);background:rgba(0,0,0,.4); padding:.25rem .65rem;border-radius:20px;backdrop-filter:blur(6px); } .hslide-cta{ position:absolute;top:.75rem;left:.85rem;z-index:10; } .hslide-cta a{ font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:2px; color:var(--G);background:rgba(0,0,0,.4);text-decoration:none; padding:.25rem .7rem;border-radius:20px;backdrop-filter:blur(6px); border:1px solid rgba(212,160,23,.3); transition:background .25s ease,color .25s ease; text-transform:uppercase; } .hslide-cta a:hover{background:var(--G);color:var(--M)} #heroSlider:hover .hslide-progress{opacity:.5} #sliderCustomBtn{ position:absolute;bottom:.75rem;right:.85rem;z-index:20; background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.45);width:26px;height:26px; border-radius:50%;cursor:pointer;font-size:var(--fs-xs); display:flex;align-items:center;justify-content:center; transition:background .2s,color .2s,transform .25s; backdrop-filter:blur(6px); } #sliderCustomBtn:hover{ background:rgba(255,255,255,.18);color:#fff; transform:scale(1.15); } .hslide img, .gimg img{cursor:zoom-in;} #btt{ position:fixed;bottom:1.5rem;right:1.5rem;width:46px;height:46px; background:var(--G);color:var(--M);border:none;cursor:pointer; font-size:var(--fs-2xl);font-weight:700;z-index:500; clip-path:polygon(50% 0%,100% 40%,80% 40%,80% 100%,20% 100%,20% 40%,0% 40%); opacity:0;transform:translateY(20px) scale(0.8);pointer-events:none; transition:opacity .3s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.34,1.56,0.64,1),background .2s ease; } #btt.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all} #btt:hover{background:var(--GL);transform:scale(1.15);} @media(max-width:960px){ .nlinks{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--M);padding:.9rem var(--gut);gap:0;border-bottom:2px solid var(--G);max-height:80vh;overflow-y:auto} .nlinks.open{display:flex} .nlinks>a,.ndrop>a{padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.06);display:block} .ddm{position:static;border:none;background:rgba(0,0,0,.18);display:block} .ddm a{padding-left:1.4rem} .ntog{display:block} .tbr{display:none} } @media(max-width:768px){ .ag,.chg,.hola,.trla,.ctw,.spla{grid-template-columns:1fr;gap:2.2rem} .cig{grid-template-columns:repeat(2,1fr)} .vmg{grid-template-columns:1fr} .frow{grid-template-columns:1fr} .mils{gap:1rem} } @media(max-width:600px){ /* let the two numbers stack as full rows instead of fighting for one */ #tb{justify-content:center} .tbl{gap:.5rem 1.1rem;width:100%;justify-content:center;text-align:center} .tbl a{letter-spacing:.5px} } @media(max-width:520px){ .cig{grid-template-columns:1fr} .hstats{gap:1.5rem} .hdiv{display:none} } /* ═══════════════ TYPOGRAPHY CHIP — dynamic type scale ═══════════════ */ :root{ --tz:1; --tz-navtop:32px; --tz-tktop:92px; --tz-navh:60px; } /* the single lever: every font-size on this page is rem-based */ html{ font-size:calc(100% * var(--tz)); } /* DYNAMIC — root size interpolates with the viewport, no breakpoints */ html[data-tzmode="fluid"]{ font-size:calc(clamp(14px, 12.4px + .42vw, 19px) * var(--tz)); } /* keep the fixed chrome stacked correctly at any type scale */ #tb{ height:auto; min-height:32px; } nav{ height:auto; min-height:60px; top:var(--tz-navtop); } #ticker{ top:var(--tz-tktop); } /* top:100% already tracks the nav's real height; the measured value is kept only as a hook for anything that needs the number in px. */ /* CONTEXTUAL — the section you are reading holds full size, the rest recede */ html[data-tzfocus="1"] section[id]{ transition:opacity .55s ease; } html[data-tzfocus="1"] section[id]:not(.tz-focus){ opacity:.48; } html[data-tzfocus="1"] .stit{ transition:transform .5s cubic-bezier(.22,1,.36,1); transform-origin:left center; } html[data-tzfocus="1"] section[id].tz-focus .stit{ transform:scale(1.06); } /* ── the chip itself: px only, so it never scales with the page ── */ #tzchip{ position:fixed; left:18px; bottom:18px; z-index:1200; display:flex; align-items:center; gap:2px; padding:5px 6px; border-radius:999px; background:color-mix(in srgb, var(--CARD) 90%, transparent); border:1px solid var(--G); box-shadow:0 10px 34px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-family:var(--font-mono); color:var(--TEXT); touch-action:none; user-select:none; -webkit-user-select:none; transition:box-shadow .25s ease, opacity .25s ease; } #tzchip.tz-drag{ box-shadow:0 18px 46px rgba(0,0,0,.4); cursor:grabbing; } #tzchip.tz-idle{ opacity:.55; } #tzchip:hover, #tzchip:focus-within, #tzchip.tz-open{ opacity:1; } .tz-grip{ width:20px; height:30px; border:none; background:none; cursor:grab; color:var(--G); font-size:13px; line-height:1; letter-spacing:-1px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:999px; opacity:.75; } .tz-grip:hover{ opacity:1; background:color-mix(in srgb, var(--G) 14%, transparent); } #tzchip.tz-drag .tz-grip{ cursor:grabbing; } .tz-btn{ width:30px; height:30px; border:none; border-radius:50%; background:color-mix(in srgb, var(--G) 12%, transparent); color:var(--G); font-size:17px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .18s ease, transform .18s ease, color .18s ease; } .tz-btn:hover{ background:var(--G); color:var(--M); transform:scale(1.12); } .tz-btn:disabled{ opacity:.3; cursor:not-allowed; transform:none; } .tz-read{ display:flex; align-items:baseline; gap:6px; height:30px; padding:0 10px; border:none; background:none; cursor:pointer; color:var(--TEXT); border-radius:999px; font-family:var(--font-mono); transition:background .18s ease; } .tz-read:hover, #tzchip.tz-open .tz-read{ background:color-mix(in srgb, var(--G) 14%, transparent); } .tz-aa{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--G); line-height:1; } .tz-pct{ font-size:11px; letter-spacing:1px; min-width:38px; text-align:left; opacity:.8; } .tz-dot{ width:6px; height:6px; border-radius:50%; background:var(--G); margin-right:4px; opacity:0; transition:opacity .2s ease; } #tzchip[data-live="1"] .tz-dot{ opacity:1; animation:tzpulse 2.2s ease-in-out infinite; } @keyframes tzpulse{ 0%,100%{opacity:1} 50%{opacity:.25} } /* ── expanded panel ── */ .tz-panel{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translate(calc(-50% + var(--tz-px,0px)), 6px); width:266px; padding:14px; border-radius:14px; background:color-mix(in srgb, var(--CARD) 96%, transparent); border:1px solid var(--G); box-shadow:0 18px 50px rgba(0,0,0,.34); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .22s; } #tzchip.tz-below .tz-panel{ bottom:auto; top:calc(100% + 10px); transform:translate(calc(-50% + var(--tz-px,0px)), -6px); } #tzchip.tz-open .tz-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(calc(-50% + var(--tz-px,0px)), 0); } .tz-head{ display:flex; align-items:center; justify-content:space-between; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--G); margin-bottom:12px; } .tz-reset{ border:none; background:none; cursor:pointer; padding:2px 6px; font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; color:var(--SUBTEXT); border-radius:4px; text-transform:uppercase; transition:color .18s ease, background .18s ease; } .tz-reset:hover{ color:var(--G); background:color-mix(in srgb, var(--G) 12%, transparent); } .tz-row{ margin-bottom:13px; } .tz-row:last-child{ margin-bottom:0; } .tz-lab{ display:flex; align-items:center; justify-content:space-between; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--SUBTEXT); margin-bottom:7px; } .tz-lab b{ color:var(--G); font-weight:400; } #tzRange{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px; background:color-mix(in srgb, var(--G) 26%, transparent); outline:none; cursor:pointer; } #tzRange::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--G); border:2px solid var(--CARD); box-shadow:0 1px 5px rgba(0,0,0,.3); cursor:grab; } #tzRange::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:var(--G); border:2px solid var(--CARD); cursor:grab; } #tzRange:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--G) 30%, transparent); } .tz-seg{ display:flex; gap:3px; padding:3px; border-radius:9px; background:color-mix(in srgb, var(--G) 10%, transparent); } .tz-seg button{ flex:1; border:none; background:none; cursor:pointer; padding:6px 2px; border-radius:7px; color:var(--SUBTEXT); font-family:var(--font-mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; transition:background .2s ease, color .2s ease; } #tzFaces button{ font-size:14px; letter-spacing:0; text-transform:none; padding:4px 2px; } .tz-seg button:hover{ color:var(--G); } .tz-seg button[aria-pressed="true"]{ background:var(--G); color:var(--M); } .tz-switch{ display:flex; align-items:center; justify-content:space-between; width:100%; border:none; background:none; cursor:pointer; padding:0; text-align:left; } .tz-switch .tz-sw{ width:34px; height:18px; border-radius:999px; flex-shrink:0; background:color-mix(in srgb, var(--G) 22%, transparent); position:relative; transition:background .22s ease; } .tz-switch .tz-sw::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--CARD); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .26s cubic-bezier(.34,1.56,.64,1); } .tz-switch[aria-pressed="true"] .tz-sw{ background:var(--G); } .tz-switch[aria-pressed="true"] .tz-sw::after{ transform:translateX(16px); } .tz-hint{ font-size:9px; letter-spacing:.5px; color:var(--SUBTEXT); opacity:.75; margin-top:6px; line-height:1.5; text-transform:none; } #tzchip button:focus-visible, #tzchip [tabindex]:focus-visible{ outline:2px solid var(--G); outline-offset:2px; } @media(max-width:520px){ #tzchip{ left:12px; bottom:12px; padding:4px 5px; } .tz-btn{ width:27px; height:27px; font-size:15px; } .tz-read{ height:27px; padding:0 7px; } .tz-panel{ width:min(266px, calc(100vw - 28px)); } } @media(prefers-reduced-motion:reduce){ #tzchip, #tzchip *, html[data-tzfocus="1"] section[id], html[data-tzfocus="1"] .stit{ transition:none !important; animation:none !important; } } @media print{ #tzchip{ display:none !important; } } /* ═══════════════ SCROLL: progress, wipe reveals, hero exit ═══════════════ */ /* ── FIX 1: the reveal system had no reduced-motion guard at all ── */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .rev, .rev.from-left, .rev.from-right, .rev.from-bottom, .rev.from-scale, .rev.from-wipe, .rev.from-wipe img{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; } .hbadge, .hero-logo-wrap, .hero-logo1-wrap, .htit, .hsub, .logo-shine-wrap::after{ animation:none !important; } /* an endless marquee is moving content that cannot be paused — hand it back to the reader as something they can scroll themselves */ .ttrack{ animation:none !important; } #ticker{ overflow-x:auto; } #sprog{ transition:none !important; } } /* ── FIX 2: will-change was held for the life of the page on every .rev ── */ .rev.vis{ will-change:auto; } /* ── reading progress: a gold hairline under the ticker ── */ #sprog{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg, var(--G), var(--GL)); transform:scaleX(0); transform-origin:left center; pointer-events:none; z-index:5; } @supports (animation-timeline: scroll()){ #sprog{ animation:sprog linear both; animation-timeline:scroll(root block); } } @keyframes sprog{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } } /* ── chevron wipe reveal — echoes the clip-path motif already used by the hexagon emblem and the back-to-top chevron ── */ /* The clip goes on the inner image, never on the observed .rev box: IntersectionObserver reports ratio 0 for an element clipped away by its own clip-path, so clipping the container would deadlock — never observed, so never revealed, so never unclipped. */ .rev.from-wipe{ transform:none; } .rev.from-wipe.vis{ transform:none; opacity:1; } .rev.from-wipe img{ clip-path:polygon(-20% 100%, 50% 112%, 120% 100%, 120% 120%, 50% 120%, -20% 120%); transition:clip-path 1.05s cubic-bezier(0.16,1,0.3,1); } .rev.from-wipe.vis img{ /* ends well outside the border box so shadows are never clipped */ clip-path:polygon(-20% -20%, 50% -8%, 120% -20%, 120% 120%, 50% 120%, -20% 120%); } /* ── hero exit choreography — three layers leaving at three rates ── */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ /* #hero sets overflow:hidden, so it is its own scrollport — a bare view() on the children would measure against a box that never scrolls and sit at 0 forever. Name the timeline on #hero, which is measured against the page, and let the children share it. */ #hero{ view-timeline:--heroExit block; } .hcon{ animation:heroCon linear both; animation-timeline:--heroExit; animation-range:exit; } .hgrid{ animation:heroGrid linear both; animation-timeline:--heroExit; animation-range:exit; } .hglow{ animation:heroGlow linear both; animation-timeline:--heroExit; animation-range:exit; } } } /* hold near full strength while the hero still owns the screen, then let go — a linear fade reads as a rendering fault rather than a deliberate exit */ @keyframes heroCon{ 0% { opacity:1; transform:translateY(0) scale(1); } 45% { opacity:.94; transform:translateY(-10px) scale(.978); } 100%{ opacity:.12; transform:translateY(-40px) scale(.88); } } @keyframes heroGrid{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(70px); opacity:.25; } } @keyframes heroGlow{ /* keep the centring translate — .hglow is positioned by transform */ from{ transform:translate(-50%,-50%) scale(1); opacity:1; } to{ transform:translate(-50%,-50%) scale(1.4); opacity:.3; } } /* ═══════════════ TIER 2: quote reveal + chapter marker ═══════════════ */ /* registered so it can be animated; the initial 1 means every browser that cannot drive it still renders the quote fully lit */ @property --qp{ syntax:''; inherits:true; initial-value:1; } @keyframes qreveal{ from{ --qp:0 } to{ --qp:1 } } @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ /* cover, not entry: an entry range for a short block finishes while the quote is still hugging the bottom edge, so the sweep is over before it is readable. cover 20%→52% lands it as the quote reaches mid-screen. */ .chq{ animation:qreveal linear both; animation-timeline:view(); animation-range:cover 20% cover 52%; } /* each word lights when the wave (--qp scaled across the word count) passes its index; /5 spreads the edge over five words so it reads as a sweep rather than a row of switches */ .chq .wq{ opacity:clamp(.25, calc((var(--qp) * (var(--n) + 5) - var(--i)) / 5), 1); } } } /* ── chapter marker: which of the sixteen sections you are in ── */ #chapter{ position:fixed; top:calc(var(--tz-chrome, 126px) + 12px); left:18px; z-index:480; display:flex; align-items:baseline; gap:8px; padding:6px 12px; border-radius:999px; background:color-mix(in srgb, var(--CARD) 82%, transparent); border:1px solid color-mix(in srgb, var(--G) 45%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-family:var(--font-mono); pointer-events:none; opacity:0; transform:translateY(-8px); transition:opacity .35s ease, transform .35s cubic-bezier(0.22,1,0.36,1); } #chapter.show{ opacity:1; transform:translateY(0); } #chapter .cnum{ font-size:9px; letter-spacing:1.5px; color:var(--G); } #chapter .cname{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--TEXT); max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media(max-width:520px){ #chapter{ left:12px; padding:5px 10px; } #chapter .cname{ font-size:9px; max-width:52vw; } } @media(prefers-reduced-motion: reduce){ #chapter{ transition:none; transform:none; } #chapter.show{ transform:none; } } @media print{ #chapter{ display:none !important; } } /* ═══════════════ IMAGE VIEWER — zoom + pan, one for slider and gallery ═══════════════ */ /* px throughout: the viewer is chrome, so the type-scale chip must not resize it */ #iv{ position:fixed; left:0; top:0; width:100%; height:100vh; height:100dvh; /* dvh keeps controls on-screen when mobile browser chrome shows */ z-index:3000; display:none; background:rgba(0,0,0,.95); opacity:0; transition:opacity .25s ease; touch-action:none; overscroll-behavior:contain; -webkit-user-select:none; user-select:none; } #iv.open{ display:block; } #iv.shown{ opacity:1; } #ivstage{ position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:calc(var(--ivtop, 58px) + 8px) 14px calc(var(--ivbot, 92px) + 8px); cursor:grab; } #iv.zoomed #ivstage{ cursor:grab; } #iv.panning #ivstage{ cursor:grabbing; } #ivimg{ max-width:100%; max-height:100%; object-fit:contain; display:block; transform-origin:center center; -webkit-user-drag:none; pointer-events:none; transition:transform .26s cubic-bezier(0.22,1,0.36,1); box-shadow:0 24px 70px rgba(0,0,0,.6); } #iv.dragging #ivimg{ transition:none; } #ivimg.loading{ opacity:.25; } /* ── top bar ── */ #ivtop{ position:absolute; top:0; left:0; right:0; height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 12px 0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(rgba(0,0,0,.6), transparent); pointer-events:none; } #ivcount{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:rgba(255,255,255,.75); pointer-events:auto; } #ivclose{ width:44px; height:44px; flex-shrink:0; border:none; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:auto; transition:background .2s, transform .2s; } #ivclose:hover{ background:var(--G); color:var(--M); transform:rotate(90deg); } /* ── bottom bar: caption + zoom controls ── */ #ivbot{ position:absolute; left:0; right:0; bottom:0; padding:0 12px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:8px; background:linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events:none; } #ivcap{ max-width:min(92vw, 720px); text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; color:rgba(255,255,255,.8); line-height:1.5; padding:6px 14px; border-radius:20px; background:rgba(0,0,0,.45); pointer-events:auto; } #ivcap:empty{ display:none; } #ivzoom{ display:flex; align-items:center; gap:4px; padding:5px 6px; border-radius:999px; background:rgba(255,255,255,.11); backdrop-filter:blur(10px); pointer-events:auto; } .ivzb{ width:38px; height:38px; border:none; border-radius:50%; background:transparent; color:#fff; font-size:19px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s; } .ivzb:hover{ background:var(--G); color:var(--M); } .ivzb:disabled{ opacity:.32; cursor:not-allowed; background:transparent; color:#fff; } #ivpct{ min-width:52px; height:38px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:rgba(255,255,255,.85); cursor:pointer; background:none; border:none; padding:0 2px; } /* ── prev / next ── */ .ivnav{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border:none; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, opacity .2s, transform .2s; } .ivnav:hover{ background:var(--G); color:var(--M); } #ivprev{ left:14px; } #ivnext{ right:14px; } /* while zoomed the drag gesture belongs to panning, so hide the arrows */ #iv.zoomed .ivnav{ opacity:0; pointer-events:none; } #iv.single .ivnav, #iv.single #ivcount{ display:none; } @media(max-width:600px){ #ivstage{ padding:calc(var(--ivtop, 52px) + 6px) 6px calc(var(--ivbot, 86px) + 6px); } #ivtop{ height:calc(52px + env(safe-area-inset-top)); padding-left:12px; } .ivnav{ width:40px; height:40px; font-size:18px; } #ivprev{ left:6px; } #ivnext{ right:6px; } #ivcap{ font-size:10px; letter-spacing:1px; padding:5px 11px; } .ivzb{ width:36px; height:36px; } } /* landscape phones are short — give the picture the height back */ @media(max-height:460px){ #ivstage{ padding:calc(var(--ivtop, 46px) + 4px) 6px calc(var(--ivbot, 58px) + 4px); } #ivcap{ display:none; } #ivtop{ height:calc(46px + env(safe-area-inset-top)); } } @media(prefers-reduced-motion: reduce){ #iv, #ivimg, .ivnav, #ivclose, .ivzb{ transition:none !important; } } @media print{ #iv{ display:none !important; } } /* ═══════════════ STANDALONE DOCUMENT PAGES (privacy, terms, 404) ═══════════════ */ .pghero{ background:linear-gradient(140deg, var(--M) 0%, var(--MB) 100%); padding:calc(var(--tz-chrome, 126px) + 3.2rem) var(--gut) 3.2rem; position:relative; overflow:hidden; transition:background .4s ease; } [data-theme^="l-"] .pghero{ background:linear-gradient(140deg, var(--G) 0%, var(--GL) 100%); } .pghero .con{ position:relative; z-index:2 } .pghero .stit{ color:var(--W) } [data-theme^="l-"] .pghero .stit{ color:var(--M) } .pghero .stag{ color:var(--G) !important } [data-theme^="l-"] .pghero .stag{ color:var(--M) !important } /* the light-theme banner is painted in var(--G), and .stit .hi resolves to var(--G) too — the accent word would vanish into its own background. Same treatment the homepage hero uses: tint the title colour instead. */ .pghero .stit .hi{ color:var(--GL) } [data-theme^="l-"] .pghero .stit .hi{ color:var(--M); opacity:.82 } .pgsub{ color:rgba(255,255,255,.62); max-width:660px; margin-top:.9rem; line-height:1.85; font-size:var(--fs-base) } .crumb{ margin-top:1.5rem; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.45) } .crumb a{ color:var(--GL); text-decoration:none } [data-theme^="l-"] .crumb a{ color:var(--M) } .crumb a:hover{ text-decoration:underline } .crumb span{ margin:0 .5rem; opacity:.5 } /* the long-form text itself */ .doc{ max-width:880px } .doc .updated{ display:inline-block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:2px; text-transform:uppercase; color:var(--G); border:1px solid var(--BD); padding:.35rem .9rem; border-radius:20px; margin-bottom:2.2rem; } .doc h2{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-3xl); color:var(--M); margin:2.4rem 0 .7rem; line-height:1.3 } .doc h2:first-of-type{ margin-top:0 } .doc h3{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg); color:var(--MB); margin:1.7rem 0 .5rem } .doc p{ color:var(--SUBTEXT); line-height:1.95; margin-bottom:1.05rem; font-size:var(--fs-base) } .doc ul{ margin:0 0 1.3rem 1.15rem } .doc li{ color:var(--SUBTEXT); line-height:1.9; margin-bottom:.5rem; font-size:var(--fs-base) } .doc li::marker{ color:var(--G) } .doc a{ color:var(--G); text-decoration:underline; text-underline-offset:3px } .doc a:hover{ color:var(--MB) } .doc strong{ color:var(--TEXT) } .doc .note{ border-left:3px solid var(--G); background:rgba(212,160,23,.07); padding:1.1rem 1.4rem; margin:1.6rem 0; border-radius:0 6px 6px 0; } .doc .note p{ margin:0 } /* ── 404 ── */ .e404{ text-align:center; padding:4.5rem 2rem 5rem } .e404 .num{ font-family:var(--font-display); font-weight:700; line-height:.9; font-size:clamp(5.5rem, 20vw, 12rem); color:var(--G); letter-spacing:-4px; text-shadow:0 8px 40px rgba(0,0,0,.25); } .e404 h1{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2); color:var(--M); margin:.6rem 0 .9rem } .e404 p{ color:var(--SUBTEXT); max-width:520px; margin:0 auto; line-height:1.9; font-size:var(--fs-base) } .acts{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem } .acts a{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs); letter-spacing:1px; text-transform:uppercase; text-decoration:none; padding:.7rem 1.4rem; border:1px solid var(--G); color:var(--G); transition:background .22s, color .22s, transform .22s; } .acts a:hover{ background:var(--G); color:var(--M); transform:translateY(-2px) } .acts a.primary{ background:var(--G); color:var(--M) } .acts a.primary:hover{ background:var(--GL) } .e404 .hint{ margin-top:2.6rem; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:1.5px; color:var(--SUBTEXT); text-transform:uppercase } @media(max-width:768px){ .pghero{ padding:calc(var(--tz-chrome, 126px) + 2.2rem) var(--gut) 2.2rem } .doc h2{ font-size:var(--fs-2xl) } }