/* Org IE — orgie.org. Fonts: the Windows XP stack (Tahoma / Trebuchet MS / Verdana), nothing downloaded. */
:root {
  --ie: #1ebbee;        /* IE blue (logo) */
  --ie-mid: #0a84d0;
  --ie-deep: #0b4f9c;
  --ie-navy: #0a246a;   /* XP Luna title bar */
  --ink: #111318;
  --ink-soft: #3b4150;
  --paper: #ffffff;
  --paper-alt: #eef5fb;
  --line: #d6dde7;
  --gold: #ffb627;
  --xp-face: #ece9d8;
  --xp-shadow: #aca899;
  --radius: 12px;
  --font: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --font-head: "Trebuchet MS", Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-mono: Consolas, "Lucida Console", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.55; font-size: 17px; }
img, svg { max-width: 100%; }
a { color: var(--ie-deep); }
code { font-family: var(--font-mono); font-size: .92em; background: #eef2f7; padding: .05em .35em; border-radius: 4px; }
pre { background: var(--ink); color: #c8f4ff; padding: 14px 16px; border-radius: 8px; overflow: auto; font-size: .85rem; line-height: 1.5; }
pre code { background: none; color: inherit; padding: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ie-deep); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Logo: "Org" + detached blue "IE" ---------- */
.logo, .logo-inline { display: inline-flex; align-items: baseline; gap: .32em; text-decoration: none; font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.logo { font-size: 1.9rem; }
.logo-org { color: var(--ink); }
.logo-ie { color: var(--ie); position: relative; padding-left: .18em; text-shadow: 0 1px 0 #0a6cc9; }
.logo-ie::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .06em; width: 3px; background: var(--ie); border-radius: 2px; opacity: .55; }
.logo-inline { font-size: 1.25rem; }
.logo-inline.big { font-size: 2rem; }
.memorial .logo-org, .foot .logo-org { color: #fff; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .95rem; }
.nav a { color: var(--ink-soft); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ie-deep); border-bottom-color: var(--ie); }
.nav-join { color: #fff !important; background: var(--ie-deep); padding: 6px 12px !important; border-radius: 999px; border-bottom: 0 !important; }
.nav-join:hover { background: var(--ie-mid); }

/* ---------- Hero with CSS Bliss ---------- */
.hero { position: relative; overflow: hidden; padding: 56px 16px 72px; min-height: min(70vh, 720px); display: grid; place-items: center; }
.bliss { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #1d5fd1 0%, #4a8de6 35%, #9fd0f7 62%, #cfe8fb 70%); }
.hill { position: absolute; left: -20%; right: -20%; bottom: -22%; height: 60%; background: radial-gradient(ellipse at 45% 40%, #8fd44a 0%, #5fb52f 45%, #3f8f22 100%); border-radius: 50% 50% 0 0 / 70% 70% 0 0; box-shadow: inset 0 40px 60px rgba(255,255,255,.18); }
.cloud { position: absolute; background: #fff; opacity: .9; border-radius: 999px; filter: blur(1px); animation: drift 60s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.c1 { width: 180px; height: 48px; top: 12%; left: 8%; }
.c1::before { width: 70px; height: 70px; left: 30px; top: -34px; } .c1::after { width: 50px; height: 50px; left: 90px; top: -22px; }
.c2 { width: 240px; height: 56px; top: 24%; left: 60%; animation-duration: 90s; }
.c2::before { width: 90px; height: 90px; left: 40px; top: -44px; } .c2::after { width: 60px; height: 60px; left: 130px; top: -28px; }
.c3 { width: 140px; height: 40px; top: 6%; left: 78%; animation-duration: 75s; opacity: .75; }
.c3::before { width: 56px; height: 56px; left: 24px; top: -26px; } .c3::after { width: 40px; height: 40px; left: 70px; top: -16px; }
@keyframes drift { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }

/* XP window chrome */
.xp-window { position: relative; z-index: 1; background: var(--xp-face); border-radius: 8px 8px 0 0; box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px #0831a0; width: 100%; font-size: 13px; }
.hero-window { max-width: 1080px; }
.xp-titlebar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; height: 30px; border-radius: 8px 8px 0 0; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; text-shadow: 1px 1px 0 #0a246a; background: linear-gradient(180deg, #0a5bdc 0%, #3a81e6 8%, #2c6fd9 40%, #1e56c4 90%, #1247a8 100%); }
.xp-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-title-icon { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8be3ff, #1ebbee 60%, #0a6cc9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); flex: none; }
.xp-buttons { display: flex; gap: 2px; }
.xp-buttons b { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 3px; background: linear-gradient(180deg,#4d8df0,#2a63d6); border: 1px solid #fff; font-size: 11px; font-weight: 700; }
.xp-buttons b.x { background: linear-gradient(180deg,#e8865c,#c8431b); }
.xp-menubar { display: flex; gap: 14px; padding: 3px 10px; background: var(--xp-face); border-bottom: 1px solid #fff; }
.xp-addressbar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--xp-face); border-top: 1px solid var(--xp-shadow); border-bottom: 1px solid var(--xp-shadow); }
.xp-addr-label { color: #444; }
.xp-addr { flex: 1; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #7f9db9; padding: 3px 6px; font-family: var(--font); white-space: nowrap; overflow: hidden; }
.xp-addr-ico { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8be3ff, #1ebbee 60%, #0a6cc9); flex: none; }
.xp-go { padding: 2px 10px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(180deg,#fff,#ece9d8); }
.xp-body { background: #fff; padding: clamp(24px, 4vw, 48px); }
.xp-statusbar { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-top: 1px solid var(--xp-shadow); font-size: 12px; color: #333; }
.xp-status-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-progress { width: 160px; height: 14px; border: 1px solid #7f9db9; background: #fff; padding: 1px; display: inline-block; }
.xp-progress-fill { display: block; height: 100%; width: 0%; background: repeating-linear-gradient(90deg, #2bd04b 0 8px, transparent 8px 10px); transition: width .4s; }
.xp-zone { display: inline-flex; align-items: center; gap: 5px; border-left: 1px solid var(--xp-shadow); padding-left: 8px; }
.xp-zone-ico { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #bff, #1ebbee, #0a6cc9); }

.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--ie-deep); font-weight: 700; margin: 0 0 10px; }
h1 { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.02em; color: var(--ink); }
.lede { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 22px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { font: inherit; font-weight: 700; font-size: 1rem; padding: 12px 20px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: var(--ie-deep); color: #fff; }
.btn-primary:hover { background: var(--ie-mid); }
.btn-secondary { background: #fff; color: var(--ie-deep); border-color: var(--ie-mid); }
.btn-secondary:hover { background: var(--paper-alt); }
.btn[disabled] { opacity: .6; cursor: wait; }
.hint { font-size: .85rem; color: #6b7280; margin: 10px 0 0; }

/* The big e */
.hero-logo { display: grid; place-items: center; }
.big-e { width: min(100%, 340px); overflow: visible; filter: drop-shadow(0 18px 30px rgba(10,76,156,.35)); }
.e-halo { fill: url(#eGrad); opacity: .14; }
.e-letter { font-family: var(--font-head); font-weight: 700; font-size: 168px; fill: url(#eGrad); stroke: #0a6cc9; stroke-width: 2; }
.e-ring { fill: none; stroke: url(#ringGrad); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 420 760; animation: orbit 3.2s ease-in-out infinite; }
@keyframes orbit { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -760; } }
@media (prefers-reduced-motion: reduce) { .e-ring, .cloud { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Ticker ---------- */
.ticker { background: var(--ie-navy); color: #ffe9a8; font-size: .95rem; padding: 8px 0; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.ticker marquee { display: block; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section.alt { background: var(--paper-alt); }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--ie-mid); font-weight: 700; margin: 0 0 8px; }
h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.12; margin: 0 0 16px; letter-spacing: -.02em; }
h3 { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 8px; }
.section-lede { color: var(--ink-soft); max-width: 60ch; margin: 0 0 28px; }
.cards { display: grid; gap: 20px; margin-top: 28px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 6px 20px rgba(11,79,156,.06); }
.card-ico { font-size: 2rem; margin-bottom: 10px; }
.card p { margin: 0; color: var(--ink-soft); }

/* ---------- Timeline ---------- */
.timeline { overflow-x: auto; padding: 8px 16px 28px; scroll-snap-type: x mandatory; }
.tl-track { list-style: none; margin: 0 auto; padding: 24px 0 0; display: flex; gap: 18px; position: relative; width: max-content; }
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; background: linear-gradient(90deg, #5fd8ff, var(--ie-deep)); border-radius: 2px; }
.tl-card { scroll-snap-align: start; flex: none; width: 260px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; position: relative; box-shadow: 0 6px 20px rgba(11,79,156,.06); border-top: 6px solid var(--c, var(--ie)); }
.tl-card::before { content: ""; position: absolute; top: -26px; left: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--ie)); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c, var(--ie)); }
.tl-year { display: block; font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft); }
.tl-ver { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--c, var(--ie-deep)); margin: 2px 0 8px; }
.tl-card p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.v1 { --c: #6b7280; } .v2 { --c: #4b5563; } .v3 { --c: #2563eb; } .v4 { --c: #1d4ed8; } .v5 { --c: #0ea5e9; } .v55 { --c: #0284c7; }
.v6 { --c: #1ebbee; } .v7 { --c: #0a84d0; } .v8 { --c: #0b4f9c; } .v9 { --c: #38bdf8; } .v10 { --c: #0ea5e9; } .v11 { --c: #1ebbee; } .vend { --c: #111318; }

/* ---------- Legacy ---------- */
.legacy-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.legacy-list li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.lg-tag { grid-row: 1 / span 2; align-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--ie-deep); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.legacy-list strong { font-family: var(--font-head); font-size: 1.05rem; }
.legacy-list span:last-child { color: var(--ink-soft); font-size: .95rem; }

/* ---------- Numbers ---------- */
.numbers { background: linear-gradient(135deg, var(--ie-navy), var(--ie-deep) 60%, var(--ie-mid)); color: #fff; padding: 48px 0; }
.num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.num-big { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
.num-label { display: block; margin-top: 8px; font-size: .9rem; opacity: .9; }

/* ---------- Quirks ---------- */
.quirks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quirk { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.quirk p { color: var(--ink-soft); margin: 0 0 10px; font-size: .95rem; }
.quirk p:last-child { margin-bottom: 0; }
.badge88 { display: inline-flex; align-items: center; gap: 6px; width: 176px; height: 62px; background: linear-gradient(180deg,#1b4fd8,#0a246a); color: #fff; border: 2px outset #9bbcf3; font-size: 11px; line-height: 1.15; padding: 0 8px; image-rendering: pixelated; margin-top: 6px; }
.badge-e { font-family: var(--font-head); font-weight: 700; font-size: 36px; color: #5fd8ff; text-shadow: 1px 1px 0 #000; }

/* ---------- Memorial ---------- */
.memorial { background: radial-gradient(ellipse at top, #16213e, #070c1a 70%); color: #e5e9f2; }
.memorial .kicker { color: #8be3ff; }
.memorial h2 { color: #fff; }
.memorial-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; margin-top: 24px; }
.memorial-text p { color: #c3cadb; }
.memorial-sign { font-family: var(--font-head); font-size: 1.2rem; color: #fff !important; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stone { background: linear-gradient(180deg, #9ea4ad, #5f6671); border-radius: 120px 120px 10px 10px; padding: 36px 26px 30px; text-align: center; box-shadow: inset 0 0 40px rgba(0,0,0,.35), 0 30px 50px rgba(0,0,0,.5); max-width: 340px; margin: 0 auto; border: 4px solid #3b414a; }
.stone-e { font-family: var(--font-head); font-weight: 700; font-size: 88px; line-height: 1; color: #1ebbee; text-shadow: 0 2px 0 #0a6cc9, 0 6px 14px rgba(0,0,0,.4); }
.stone-text span { display: block; }
.stone-name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: #1b1f27; margin-top: 8px; }
.stone-dates { color: #2a2f3a; letter-spacing: .08em; font-size: .95rem; margin: 2px 0 12px; }
.stone-epitaph { font-style: italic; color: #1b1f27; font-size: .95rem; }

/* ---------- Join ---------- */
.join-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; }
.join-form { display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.join-form label { font-weight: 700; font-size: .9rem; margin-top: 6px; }
.join-form input, .join-form select { font: inherit; padding: 10px 12px; border: 1px solid #9aa6b8; border-radius: 8px; background: #fff; }
.join-form .cta-row { margin-top: 14px; }
.cert { background: #fdfbf3; border: 1px solid #d9cfa5; border-radius: 6px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.cert-inner { border: 3px double #b89b4c; padding: 28px 24px 24px; text-align: center; position: relative; }
.cert-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cert-sub { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #6b5a1e; }
.cert-title { font-family: var(--font-head); font-size: 1.6rem; margin: 18px 0 6px; color: #3b2f0b; }
.cert-line { margin: 4px 0; color: #4a4a4a; font-size: .95rem; }
.cert-name { font-family: var(--font-head); font-size: 2rem; margin: 6px 0; color: var(--ie-deep); border-bottom: 1px solid #b89b4c; display: inline-block; padding: 0 20px 2px; min-width: 60%; }
.cert-foot { margin: 16px 0 0; font-size: .8rem; color: #6b5a1e; letter-spacing: .06em; }
.cert-seal { position: absolute; right: 18px; bottom: 14px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 34px; color: #fff; background: radial-gradient(circle at 35% 35%, #8be3ff, #1ebbee 55%, #0a6cc9); box-shadow: 0 0 0 3px #fdfbf3, 0 0 0 5px #b89b4c; transform: rotate(-12deg); }

/* ---------- Footer ---------- */
.foot { background: #0b0f1a; color: #c3cadb; padding: 40px 0 32px; font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; }
.foot a { color: #8be3ff; }
.foot-small p { margin: 0 0 10px; font-size: .82rem; color: #8f98ad; }

/* ---------- Crash dialog ---------- */
.overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.overlay[hidden] { display: none; }
.xp-dialog { max-width: 440px; border-radius: 8px 8px 0 0; }
.xp-dialog-body { display: flex; gap: 14px; padding: 16px 14px 8px; font-size: 12px; }
.xp-dialog-body p { margin: 0 0 8px; }
.xp-dialog-body .small { color: #333; }
.xp-dialog-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8b8b, #d62d20); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 22px; border: 1px solid #7a0000; }
.xp-dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 14px 14px; }
.xp-btn { font: inherit; font-size: 12px; padding: 4px 14px; min-width: 100px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(180deg,#fff,#ece9d8); cursor: pointer; }
.xp-btn:hover { box-shadow: inset 0 0 0 2px #ffc73c; }
.shake { animation: shake .5s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .memorial-grid, .join-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero-logo { order: -1; }
  .big-e { width: 200px; }
  .cards.three, .quirks { grid-template-columns: 1fr 1fr; }
  .num-grid { grid-template-columns: 1fr 1fr; }
  .xp-menubar { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero { padding: 24px 12px 40px; }
  .cards.three, .quirks, .legacy-list { grid-template-columns: 1fr; }
  .nav { font-size: .85rem; gap: 2px 10px; }
  .logo { font-size: 1.5rem; }
  .xp-addressbar .xp-addr-label, .xp-go, .xp-zone { display: none; }
  .xp-progress { width: 90px; }
  .tl-card { width: 230px; }
}
@media print {
  .top, .hero, .ticker, .section:not(#join), .numbers, .foot, .join-form, .overlay { display: none !important; }
  .section.alt { background: #fff; padding: 0; }
  .join-grid { display: block; }
  #join .kicker, #join h2, #join .section-lede { display: none; }
  .cert { box-shadow: none; }
}

/* ---------- IE mode: one click turns the whole page into Internet Explorer 6 on Windows XP, with a 1999 look ---------- */
.nav-ie { font: inherit; font-size: .9rem; font-weight: 700; color: var(--ie-deep); background: #fff; border: 2px solid var(--ie); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.nav-ie:hover { background: var(--paper-alt); }
.ie-only { display: none; }
.ie-chrome { font-family: var(--font); font-size: 12px; color: #000; background: var(--xp-face); }
.ie-chrome .xp-titlebar { border-radius: 0; }
.ie-close { position: relative; width: 21px; height: 21px; padding: 0; display: grid; place-items: center; border-radius: 3px; border: 1px solid #fff; background: linear-gradient(180deg,#e8865c,#c8431b); color: #fff; font: 700 11px var(--font); cursor: pointer; }
.ie-close:hover { background: linear-gradient(180deg,#f39b74,#d9542a); }
.ie-close::after { content: ""; position: absolute; inset: -6px; }
.ie-toolbar { display: flex; align-items: center; gap: 2px; padding: 2px 6px; border-bottom: 1px solid var(--xp-shadow); }
.ie-tb { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid transparent; border-radius: 3px; background: none; font: inherit; color: #000; }
button.ie-tb { cursor: pointer; }
button.ie-tb:hover { border-color: #c3bfae; background: linear-gradient(180deg,#fff,#e6e3d4); }
.ie-tb svg { width: 24px; height: 24px; flex: none; }
.ie-tb.is-off { color: #9d9d9d; }
.ie-tb.is-off svg { filter: grayscale(1); opacity: .45; }
.ie-drop { font-size: 9px; }
.ie-sep { align-self: stretch; width: 1px; margin: 2px 4px; background: var(--xp-shadow); box-shadow: 1px 0 0 #fff; }
.ie-chrome .xp-go { font: inherit; color: #000; cursor: pointer; }
.xp-taskbar { display: flex; align-items: center; height: 30px; color: #fff; background: linear-gradient(180deg,#3168d5 0%,#4993e6 8%,#2157d7 40%,#2663e0 88%,#1941a5 100%); }
.xp-start { align-self: stretch; display: inline-flex; align-items: center; padding: 0 20px 0 12px; border-radius: 0 12px 12px 0; font: italic 700 18px/1 "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 1px #1d4d1d; background: linear-gradient(180deg,#3c9a3c 0%,#5ec55e 12%,#389c38 50%,#2e862e 100%); }
.xp-task { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 260px; height: 24px; margin-left: 10px; padding: 0 10px; border: 1px solid #10307a; border-radius: 3px; background: #1e4fbf; box-shadow: inset 1px 1px 2px rgba(0,0,0,.35); }
.xp-task-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-tray { align-self: stretch; display: inline-flex; align-items: center; margin-left: auto; padding: 0 14px; border-left: 1px solid #0b3f8f; background: linear-gradient(180deg,#0c59b9,#139ee9 8%,#18b9ed 30%,#14a4e5 90%,#1290e0); }
@media screen {
  html.ie-mode, .ie-mode body { height: 100%; overflow: hidden; }
  .ie-mode body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--xp-face); }
  .ie-mode .ie-chrome { flex: none; }
  .ie-mode #ie-view { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; scroll-behavior: smooth; background: #fff; color: #000; border-top: 1px solid var(--xp-shadow); font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.35; scrollbar-color: #b9cdf5 #f3f2ec; }
  .ie-mode #ie-view * { font-family: "Times New Roman", Times, serif; letter-spacing: normal; border-radius: 0; box-shadow: none; text-shadow: none; filter: none; backdrop-filter: none; animation: none; transition: none; }
  .ie-mode #ie-view :is(code, pre, pre *) { font-family: "Courier New", Courier, monospace; }
  .ie-mode #ie-view :is(.e-letter, .stone-e, .badge-e, .cert-seal) { font-family: var(--font-head); }
  .ie-mode #ie-view :is(.btn, .btn:visited, .nav-ie, .ticker, .ticker *, .lg-tag, .join-form input, .join-form select, .ie-construction span) { font-family: Arial, Helvetica, sans-serif; }
  .ie-mode #ie-view a { color: #0000ee; text-decoration: underline; }
  .ie-mode #ie-view a:visited { color: #551a8b; }
  .ie-mode #ie-view .wrap { max-width: 800px; }
  /* header */
  .ie-mode #ie-view .top { position: static; flex-direction: column; gap: 6px; padding: 10px 12px; background: #fff; border-bottom: 3px groove #d4d0c8; }
  .ie-mode #ie-view .nav { justify-content: center; align-items: center; gap: 4px 12px; font-size: 16px; }
  .ie-mode #ie-view .nav a, .ie-mode #ie-view .nav-join { color: #0000ee !important; background: none; padding: 0 !important; border: 0; }
  .ie-mode #ie-view :is(.btn, .btn:visited, .nav-ie) { font-size: 14px; font-weight: 400; color: #000; background: #c0c0c0; border: 2px outset #e0e0e0; padding: 4px 14px; text-decoration: none; cursor: default; }
  .ie-mode #ie-view :is(.btn, .nav-ie):active { border-style: inset; }
  /* hero */
  .ie-mode #ie-view .hero { display: block; min-height: 0; padding: 14px 12px 22px; background: #fff; overflow: visible; }
  .ie-mode #ie-view :is(.bliss, .hero-window > .xp-titlebar, .hero-window > .xp-menubar, .hero-window > .xp-addressbar, .hero-window > .xp-statusbar) { display: none; }
  .ie-mode #ie-view .hero-window { max-width: 760px; margin: 0 auto; background: none; font-size: 16px; }
  .ie-mode #ie-view .xp-body { padding: 0; background: none; }
  .ie-mode #ie-view .hero-grid { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .ie-mode #ie-view .hero-logo { order: -1; }
  .ie-mode #ie-view .big-e { width: 140px; }
  .ie-mode #ie-view .cta-row { justify-content: center; }
  .ie-mode #ie-view .ie-only { display: block; }
  .ie-mode #ie-view .ie-construction { max-width: 420px; margin: 0 auto 12px; padding: 6px; background: repeating-linear-gradient(-45deg, #ffd200 0 12px, #000 12px 24px); }
  .ie-mode #ie-view .ie-construction span { display: block; padding: 5px 8px; border: 2px solid #000; background: #ffd200; color: #000; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-align: center; }
  /* text */
  .ie-mode #ie-view :is(h1, h2) { color: #000080; text-align: center; }
  .ie-mode #ie-view h1 { font-size: 34px; line-height: 1.15; }
  .ie-mode #ie-view h2 { font-size: 28px; line-height: 1.2; }
  .ie-mode #ie-view h3 { font-size: 19px; }
  .ie-mode #ie-view :is(.kicker, .eyebrow) { text-align: center; text-transform: none; font-size: 15px; font-style: italic; color: #cc0000; }
  .ie-mode #ie-view :is(.lede, .section-lede, .card p, .quirk p, .tl-card p, .tl-year, .legacy-list span:last-child, .hint, .cert-line) { color: #000; }
  .ie-mode #ie-view .section-lede { margin: 0 auto 16px; text-align: center; }
  .ie-mode #ie-view code { background: none; padding: 0; color: #000; }
  .ie-mode #ie-view pre { background: #fff; color: #000; border: 1px solid #000; }
  /* sections and boxes */
  .ie-mode #ie-view .ticker { background: #000080; color: #ffff00; font-weight: 700; border-color: #c0c0c0; }
  .ie-mode #ie-view .section { padding: 22px 0; background: #fff; border-top: 3px groove #d4d0c8; }
  .ie-mode #ie-view :is(.card, .quirk, .tl-card, .legacy-list li, .join-form) { padding: 12px; background: #fff; border: 2px outset #c0c0c0; }
  .ie-mode #ie-view :is(.cards, .quirks, .legacy-list) { gap: 10px; margin-top: 14px; }
  .ie-mode #ie-view .tl-track::before { background: #808080; }
  .ie-mode #ie-view .tl-card::before { background: #000080; border-color: #fff; }
  .ie-mode #ie-view .tl-ver { color: #000080; }
  .ie-mode #ie-view .lg-tag { background: #000080; }
  .ie-mode #ie-view .numbers { padding: 18px 0; background: #000080; color: #ffff00; border-top: 3px groove #d4d0c8; }
  .ie-mode #ie-view .num-big { display: inline-block; padding: 2px 10px; font-family: "Courier New", Courier, monospace; font-size: 34px; color: #00ff00; background: #000; border: 2px inset #c0c0c0; }
  .ie-mode #ie-view .memorial { background: #000; color: #c0c0c0; }
  .ie-mode #ie-view .memorial h2 { color: #fff; }
  .ie-mode #ie-view .memorial .kicker { color: #ffff00; }
  .ie-mode #ie-view .memorial-text p { color: #c0c0c0; }
  .ie-mode #ie-view .stone { border-radius: 120px 120px 10px 10px; }
  .ie-mode #ie-view .cert-seal { border-radius: 50%; }
  .ie-mode #ie-view :is(.join-form input, .join-form select) { padding: 3px 4px; font-size: 14px; background: #fff; border: 2px inset #c0c0c0; }
  .ie-mode #ie-view .cert { background: #fffff0; border: 2px outset #c0c0c0; }
  .ie-mode #ie-view .foot { padding: 18px 0; background: #c0c0c0; color: #000; border-top: 3px groove #d4d0c8; }
  .ie-mode #ie-view :is(.foot-small p, .foot .logo-org) { color: #000; }
}
@media screen and (max-width: 600px) {
  .ie-toolbar, .xp-taskbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ie-mode #ie-view { scroll-behavior: auto; } }
@media print { .ie-chrome { display: none !important; } }