* { box-sizing: border-box; } html { scroll-behavior: smooth; } :root { --black: #080808; --black-soft: #0d0d0d; --cream: #f1ede6; --gray: #9d9993; --gray-dark: #6e6b67; --gold: #a78547; --gold-bright: #c2a060; --gold-line: rgba(167, 133, 71, 0.34); --soft-line: rgba(241, 237, 230, 0.11); --page: 1580px; } body { margin: 0; min-width: 320px; background: var(--black); color: var(--cream); font-family: "Inter", Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } .site-header { border-bottom: 1px solid var(--gold-line); } .header-inner { max-width: var(--page); min-height: 108px; margin: 0 auto; padding: 0 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 42px; } .masthead { display: flex; align-items: baseline; gap: 9px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.55rem; font-weight: 500; letter-spacing: 0.08em; } .masthead-the, .masthead-of { color: var(--cream); } .masthead-art { color: var(--gold-bright); font-style: italic; letter-spacing: 0.12em; } .main-nav { display: flex; gap: 50px; } .main-nav a { color: #8f8b86; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase; transition: color 180ms ease; } .main-nav a:hover { color: var(--cream); } .issue-mark { justify-self: end; color: var(--gold); font-family: "Inter", sans-serif; font-size: 0.78rem; letter-spacing: 0.22em; white-space: nowrap; } .hero { border-bottom: 1px solid rgba(167, 133, 71, 0.16); } .hero-inner { max-width: var(--page); min-height: 720px; margin: 0 auto; padding: 160px 160px 100px; } .hero h1 { max-width: 1220px; margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(5.4rem, 8.6vw, 9.4rem); font-weight: 400; line-height: 0.88; letter-spacing: -0.045em; } .hero h1 em { display: block; margin-top: 10px; font-weight: 400; } .hero-deck { max-width: 1020px; margin-top: 50px; padding-left: 28px; border-left: 1px solid var(--gold-bright); } .hero-deck p { margin: 0; color: var(--gray); font-size: clamp(1rem, 1.45vw, 1.2rem); line-height: 1.95; } .issue-intro { max-width: var(--page); margin: 0 auto; padding: 70px 56px; display: grid; grid-template-columns: 210px minmax(0, 880px); gap: 56px; border-bottom: 1px solid rgba(167, 133, 71, 0.16); } .issue-intro-label, .section-rail { color: var(--gold); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.2em; } .issue-intro-copy p { margin: 0; color: var(--gray); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.35; } .editorial-section { max-width: var(--page); margin: 0 auto; padding: 105px 56px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 60px; border-bottom: 1px solid rgba(167, 133, 71, 0.16); } .section-rail { display: flex; flex-direction: column; justify-content: space-between; } .rail-number { margin-top: 240px; color: #4d4638; font-family: "Cormorant Garamond", Georgia, serif; font-size: 4rem; letter-spacing: 0; } .feature-layout { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 28px; } .lead-feature, .small-feature { border: 1px solid var(--gold-line); background: rgba(255, 255, 255, 0.012); } .secondary-features { display: grid; gap: 28px; } .feature-art { position: relative; min-height: 310px; overflow: hidden; border-bottom: 1px solid var(--gold-line); background: #0c0c0c; } .lead-feature .feature-art { min-height: 485px; } .story-copy { padding: 35px; } .story-kicker, .project-tag { margin: 0 0 15px; color: var(--gold); font-size: 0.69rem; font-weight: 400; letter-spacing: 0.18em; } .story-copy h2, .challenge-copy h2, .submit-copy h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(3rem, 5vw, 5.4rem); font-weight: 400; line-height: 0.96; letter-spacing: -0.035em; } .story-copy h3 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2rem, 3.5vw, 3.45rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; } .story-summary { max-width: 720px; margin: 23px 0 0; color: var(--gray); font-size: 0.95rem; line-height: 1.8; } .story-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--cream); font-size: 0.73rem; letter-spacing: 0.15em; } .story-link span { color: var(--gold-bright); } .timeline-art { background: linear-gradient(rgba(167, 133, 71, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 133, 71, 0.025) 1px, transparent 1px), #0a0a0a; background-size: 58px 58px; } .timeline-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: var(--gold-bright); } .timeline-dot { position: absolute; top: calc(50% - 7px); width: 15px; height: 15px; border: 2px solid #0a0a0a; border-radius: 50%; background: var(--gold-bright); outline: 1px solid var(--gold-bright); } .d1 { left: 16%; } .d2 { left: 33%; } .d3 { left: 50%; } .d4 { left: 68%; } .d5 { left: 84%; } .art-caption { position: absolute; left: 24px; bottom: 20px; color: var(--gray-dark); font-size: 0.63rem; letter-spacing: 0.18em; } .globe-art { display: flex; align-items: center; justify-content: center; } .globe { position: relative; width: 165px; height: 165px; border: 1px solid var(--gold-bright); border-radius: 50%; } .longitude, .latitude { position: absolute; border: 1px solid var(--gold-bright); border-radius: 50%; } .longitude.one { inset: 0 52px; } .longitude.two { inset: 0 28px; } .latitude.one { inset: 48px 0; } .latitude.two { inset: 68px 0; } .pacman-art { background: repeating-linear-gradient(0deg, transparent 0, transparent 41px, rgba(167, 133, 71, 0.05) 42px), #0a0a0a; } .maze-line { position: absolute; border: 1px solid var(--gold-soft); } .maze-a { left: 10%; right: 18%; top: 28%; height: 54%; } .maze-b { left: 25%; top: 12%; width: 46%; height: 52%; } .maze-c { right: 10%; top: 18%; width: 20%; height: 60%; } .pacman { position: absolute; left: 18%; top: 46%; width: 48px; height: 48px; border-radius: 50%; background: var(--gold-bright); clip-path: polygon(0 0, 100% 0, 100% 35%, 55% 50%, 100% 65%, 100% 100%, 0 100%); } .ghost { position: absolute; width: 34px; height: 40px; border: 1px solid var(--cream); border-radius: 18px 18px 4px 4px; } .g1 { right: 27%; top: 32%; } .g2 { right: 18%; bottom: 24%; } .dark-panel { background: #090909; } .project-list { border-top: 1px solid var(--gold-line); } .project-row { min-height: 150px; padding: 24px 0; display: grid; grid-template-columns: 90px 1fr 45px; gap: 25px; align-items: center; border-bottom: 1px solid var(--gold-line); transition: padding 180ms ease, background 180ms ease; } .project-row:hover { padding-left: 15px; background: rgba(255,255,255,0.012); } .project-index { color: var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; } .project-main h3 { margin: 6px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 400; line-height: 1; } .project-arrow { color: var(--gold-bright); font-size: 1.3rem; } .challenge-block { min-height: 480px; padding: 55px; display: grid; grid-template-columns: 120px minmax(0, 900px); gap: 45px; align-items: start; border: 1px solid var(--gold-line); } .challenge-number { color: #3f382c; font-family: "Cormorant Garamond", Georgia, serif; font-size: 6.5rem; line-height: 0.8; } .challenge-copy p:not(.story-kicker) { max-width: 760px; margin: 28px 0 0; color: var(--gray); line-height: 1.9; } .submit-copy { max-width: 930px; } .submit-copy > p:not(.story-kicker) { max-width: 720px; margin: 28px 0 0; color: var(--gray); line-height: 1.9; } .submit-button { display: inline-block; margin-top: 36px; padding: 14px 19px; border: 1px solid var(--gold-bright); color: var(--cream); font-size: 0.72rem; letter-spacing: 0.15em; } .site-footer { border-top: 1px solid var(--gold-line); } .footer-inner { max-width: var(--page); margin: 0 auto; padding: 38px 56px 50px; display: flex; justify-content: space-between; gap: 30px; color: var(--gray-dark); font-size: 0.67rem; letter-spacing: 0.13em; } .footer-left, .footer-right { display: flex; gap: 22px; flex-wrap: wrap; } .footer-title { color: var(--gold); } @media (max-width: 1100px) { .header-inner { padding: 26px 28px; grid-template-columns: 1fr; gap: 20px; } .main-nav { justify-self: start; } .issue-mark { justify-self: start; } .hero-inner { min-height: auto; padding: 120px 42px 90px; } .issue-intro, .editorial-section { padding-left: 28px; padding-right: 28px; } .feature-layout { grid-template-columns: 1fr; } } @media (max-width: 760px) { .main-nav { gap: 18px; flex-wrap: wrap; } .main-nav a { font-size: 0.72rem; } .hero-inner { padding: 95px 24px 75px; } .hero h1 { font-size: clamp(4rem, 18vw, 6.7rem); } .hero-deck { padding-left: 18px; } .issue-intro, .editorial-section { grid-template-columns: 1fr; gap: 35px; padding: 70px 22px; } .section-rail { flex-direction: row; } .rail-number { margin: 0; font-size: 2rem; } .lead-feature .feature-art { min-height: 330px; } .story-copy { padding: 26px; } .project-row { grid-template-columns: 55px 1fr 28px; } .challenge-block { padding: 30px; grid-template-columns: 1fr; } .challenge-number { font-size: 4rem; } .footer-inner { padding: 32px 22px; flex-direction: column; } }
/* Restored homepage updates */ .placeholder-art { position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(167,133,71,.08), transparent 42%), #0a0a0a; } .placeholder-art::before { content: ""; display: block; width: 152px; height: 152px; flex: 0 0 152px; border: 1px solid var(--gold-bright); border-radius: 50%; box-shadow: 0 0 0 18px rgba(167,133,71,.05), 0 0 0 36px rgba(167,133,71,.025); } .placeholder-art::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1px solid var(--gold-bright); border-radius: 50%; background: var(--gold-bright); box-shadow: -48px -30px 0 -2px #0a0a0a, -48px -30px 0 -1px var(--gold-bright), 50px 24px 0 -2px #0a0a0a, 50px 24px 0 -1px var(--gold-bright); } .placeholder-art .art-caption { left: 24px; bottom: 20px; color: var(--gray-dark); }
.editors-note { max-width: 800px; width: calc(100% - 2rem); margin: 0 auto 3rem; padding: 2.5rem; display: block; background: #141414; border-left: 4px solid #c8a96e; color: rgba(245,240,232,.7); font-family: "DM Sans", Arial, sans-serif; font-size: .9rem; line-height: 1.9; text-align: left; }
.editors-note__label { display: block; margin: 0 0 1.5rem; color: #c8a96e; font-family: "DM Mono", monospace; font-size: .8rem; font-weight: 400; letter-spacing: .2em; line-height: 1.3; text-align: left; text-transform: none; }
.editors-note-body { display: block; width: 100%; text-align: left; }
.editors-note-body p { margin: 0; }
.editors-note-body p:first-child { text-indent: 2em; }
.editors-note-body p + p { margin-top: 1.5rem; }
.editors-note-body strong { font-weight: 700; color: #f5f0e8; }
#features.editorial-section { display: block; padding: 78px 36px 105px; }
.features-title, .submit-overview h2 { color: var(--gold); font-family: "DM Mono", monospace; font-size: .78rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; }
.features-title { width: min(100%,1320px); margin: 0 auto 32px; display: flex; align-items: center; gap: 18px; }
.features-title::after, .submit-overview-line { content: ""; flex: 1; height: 1px; background: var(--gold-line); }
#features .feature-layout { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: start; width: min(100%,1320px); margin: 0 auto; }
#features .lead-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--gold-bright); }
#features .lead-feature .feature-art { min-height: 340px; }
#features .lead-feature .story-copy { display: flex; flex-direction: column; justify-content: center; }
#features .secondary-features { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; width: 100%; }
#features .secondary-features .small-feature { display: flex; flex-direction: column; min-height: 560px; height: auto; border: 2px solid rgba(194,160,96,.72); }
#features .secondary-features .feature-art { display: flex; height: 300px; min-height: 300px; position: relative; border-bottom: 1px solid var(--gold-line); }
#features .secondary-features .story-copy { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
#features .secondary-features .placeholder-art::before { top: 16%; }
#features .secondary-features .placeholder-art::after { top: 44%; }
.submit-overview { max-width: var(--page); margin: 0 auto; padding: 72px 56px 28px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid rgba(167,133,71,.16); }
.submit-overview h2 { margin: 0; white-space: nowrap; }
.contact-sections { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.contact-sections .editorial-section, .contact-sections .questions-comments { max-width: none; height: 100%; margin: 0; padding: 78px 40px; display: flex; flex-direction: column; }
.contact-sections .section-rail { height: 1.3em; margin: 0 0 42px; display: flex; align-items: flex-start; }
.questions-comments { max-width: none; padding: 78px 40px; display: flex; flex-direction: column; border-bottom: 1px solid rgba(167,133,71,.16); }
.questions-comments-copy h2 { margin: 0; color: var(--cream); font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(2.8rem,5vw,5rem); font-weight: 400; line-height: .96; }
@media (max-width: 900px) { #features .feature-layout, #features .secondary-features { grid-template-columns: 1fr; } #features .lead-feature { grid-column: auto; grid-template-columns: 1fr; } .contact-sections { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .editors-note { padding: 2rem; } #features.editorial-section { padding: 70px 22px; } #features .secondary-features .small-feature { min-height: 0; } #features .secondary-features .feature-art { height: 260px; min-height: 260px; } }