/* ═══════════════════════════════════════════════════════════════════ GUILDS — Great Unruly Imprints, Litmags, and Dreamers of Speculation A coalition of indie speculative magazines and writers. Aesthetic: brutalist terminal chrome (mono) wrapped around literary warmth (serif display + parchment ground). Single pop = nebula violet. Borrows the design language of humdrum-industries + foofaraw.press. ═══════════════════════════════════════════════════════════════════ */ /* ──── @font-face — Awke (display) + Untitled Sans (body) ──── */ @font-face { font-family: "Awke"; src: url("/fonts/Awke-Thin.woff2") format("woff2"); font-weight: 100 300; font-style: normal; font-display: swap; } @font-face { font-family: "Awke"; src: url("/fonts/Awke-Regular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Awke"; src: url("/fonts/Awke-Bold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --mono: "Berkeley Mono","JetBrains Mono","IBM Plex Mono","SF Mono", ui-monospace,Menlo,Consolas,monospace; --sans: "Untitled Sans", -apple-system, BlinkMacSystemFont, "Segoe UI","Helvetica Neue",Arial,sans-serif; --display: "Awke","Iowan Old Style","Charter",Georgia,serif; --serif: "Iowan Old Style","Charter",Georgia,serif; } /* ── Themes — toggled via [data-theme] on . Default = light ── */ :root, :root[data-theme="light"] { --bg: #f6f3ec; --bg-soft: #efe9dc; --bg-card: #fffdf8; --bg-stripe: #efece2; --border: #1a1714; --text: #15130f; --text-mute: #57514a; --text-faint: #998f82; --accent: #7c3aed; --accent-2: #b4531f; --good: #3f8f5e; } :root[data-theme="dark"] { --bg: #14120f; --bg-soft: #1b1813; --bg-card: #1f1b16; --bg-stripe: #221e18; --border: #34302a; --text: #ece5d8; --text-mute: #a89f90; --text-faint: #6d655a; --accent: #a884ff; --accent-2: #e0813f; --good: #5fb487; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; margin: 0; } ::selection { background: var(--accent); color: #fff; } a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { background: var(--accent); color: #fff; text-decoration: none; } /* subtle scanlines */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(120,90,160,0.018) 0 1px, transparent 1px 3px); z-index: 1000; mix-blend-mode: multiply; } :root[data-theme="dark"] body::before { mix-blend-mode: overlay; } /* ── Topbar ── */ .topbar { border-bottom: 1px solid var(--border); background: var(--bg-soft); padding: 7px 16px; display: flex; gap: 16px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--text-mute); position: sticky; top: 0; z-index: 10; } .topbar .brand { color: var(--text); font-weight: 600; letter-spacing: 0.06em; } .topbar .brand .blink { color: var(--accent); } .topbar .dim { color: var(--text-faint); } .topbar .meta { margin-left: auto; display: flex; gap: 14px; align-items: center; } .topbar .meta span.tag::before { content: "["; color: var(--text-faint); } .topbar .meta span.tag::after { content: "]"; color: var(--text-faint); } .theme-btn { font-family: var(--mono); font-size: 12px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 2px 8px; line-height: 1.4; } .theme-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Layout ── */ .main { max-width: 880px; margin: 0 auto; padding: 40px 28px 100px; } /* ── Hero ── */ .hero { padding: 12px 0 8px; } .kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; margin-bottom: 22px; } .title { font-family: var(--display); font-size: clamp(58px, 13vw, 132px); font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; margin: 0 0 8px; } .title .dot { color: var(--accent); } .expand { font-family: var(--mono); font-size: clamp(13px, 2.4vw, 16px); color: var(--text-mute); letter-spacing: 0.02em; margin: 0 0 26px; } .expand b { color: var(--text); font-weight: 600; } .sub { font-family: var(--serif); font-size: clamp(19px, 2.6vw, 23px); line-height: 1.5; max-width: 42ch; margin: 0 0 22px; } .sub em { font-style: italic; color: var(--accent-2); } .hero-prompt { font-family: var(--mono); font-size: 14px; color: var(--text-mute); } .hero-prompt .ps1 { color: var(--accent); } .cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom; background: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── Section labels ── */ .sec-label { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin: 64px 0 20px; } .sec-label .num { color: var(--accent); } .sec-label .rule { flex: 1; color: var(--text-faint); overflow: hidden; white-space: nowrap; } .sec-label .txt { color: var(--text); font-weight: 600; } /* ── Info box ── */ .info-box { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); background: var(--bg-card); padding: 16px 18px; margin: 0 0 8px; } .info-box .mark { font-family: var(--mono); color: var(--accent); font-size: 15px; } .info-box p { margin: 0 0 6px; } .info-box p:last-child { margin: 0; } .info-box .dim { color: var(--text-mute); } /* ── Pillar grid ── */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0 0; } .card { border: 1px solid var(--border); background: var(--bg-card); padding: 18px 18px 20px; position: relative; } .card .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint); display: block; margin-bottom: 8px; } .card h3 { font-size: 24px; margin: 0 0 8px; } .card p { margin: 0; color: var(--text-mute); font-size: 14.5px; } .card::after { content: ""; position: absolute; left: -1px; top: -1px; width: 22px; height: 4px; background: var(--accent); } /* ── Members ── */ .members { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; } .members a { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; text-decoration: none; border: 1px solid var(--border); padding: 7px 12px; color: var(--text); background: var(--bg-card); display: inline-flex; align-items: center; gap: 8px; } .members a::before { content: "▓▒░"; color: var(--accent); font-size: 11px; letter-spacing: -1px; } .members a:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .members a:hover::before { color: #fff; } .members .open { border-style: dashed; color: var(--text-mute); background: transparent; } .members .open::before { content: "+ "; } /* ── Marquee ── */ .marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft); padding: 9px 0; margin: 28px 0; font-family: var(--mono); font-size: 13px; } .marquee span { display: inline-block; padding-left: 100%; animation: scroll 26s linear infinite; } .marquee b { color: var(--accent); } @keyframes scroll { to { transform: translateX(-100%); } } /* ── CTA ── */ .cta { border: 1px solid var(--border); background: var(--bg-card); padding: 24px; margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .cta .lead { font-family: var(--serif); font-size: 19px; flex: 1 1 240px; } .cta .or { color: var(--text-faint); font-family: var(--mono); font-size: 12px; } .btn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; text-decoration: none; padding: 9px 16px; border: 1px solid var(--accent); background: var(--accent); color: #fff; } .btn:hover { background: transparent; color: var(--accent); } .btn.ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn.ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Definition ── */ .def { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 0; } .def p { margin: 0 0 8px; } .def .dt { font-family: var(--mono); font-weight: 600; color: var(--text); } .def .ipa { font-family: var(--mono); color: var(--text-faint); font-size: 13px; } .def .gloss { color: var(--text-mute); } /* ── Footer ── */ .foot { margin-top: 72px; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 12px; color: var(--text-mute); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .foot .hot { color: var(--accent); } .foot .sig { margin-left: auto; color: var(--text-faint); } /* ── Responsive ── */ @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .topbar .dim { display: none; } .main { padding: 28px 18px 80px; } .foot .sig { margin-left: 0; } }