html { scroll-behavior: smooth; scroll-padding-top: 30px; }
.site-wrap { max-width: 1376px; padding: 0 64px; margin: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.site-header nav { display: flex; gap: 32px; align-items: center; font-size: .8rem; font-weight: 600; }
.site-header nav a:hover, .site-footer a:hover { color: var(--blue); }
.owner-link { color: var(--muted); }
.hero { padding: 88px 0 96px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(64px, 7.2vw, 104px); line-height: .99; letter-spacing: -.072em; font-weight: 650; margin: 26px 0; }
.hero h1 em { color: var(--blue); letter-spacing: -.075em; }
.tiny-cross { font-size: 20px; vertical-align: middle; margin-right: 7px; }
.hero-intro { max-width: 400px; color: var(--muted); font-size: 1rem; line-height: 1.8; margin: 28px 0; }
.hero .button { margin-top: 6px; font-size: .83rem; padding: 16px 21px; gap: 28px; }
.hero-art { color: var(--blue); padding-top: 15px; }
.art-caption, .art-footer { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .12em; font-weight: 600; padding: 12px 0; border-bottom: 1px solid #ccd2e1; }
.art-caption span:last-child { font-size: 18px; line-height: 1; }
.art-footer { border-top: 1px solid #ccd2e1; border-bottom: 0; }
.curiosity { display: block; width: 100%; height: auto; }
.experiments { padding-top: 32px; border-top: 1px solid var(--ink); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 36px; gap: 24px; }
.section-heading h2 { font-size: clamp(36px, 4vw, 55px); line-height: 1.05; font-weight: 600; letter-spacing: -.05em; margin: 14px 0 0; }
.section-heading h2 em { color: var(--blue); }
.section-heading > p { font-size: .87rem; color: var(--muted); margin: 0 0 4px; line-height: 1.8; }
.project-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.project { grid-column: span 2; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.project-wide { grid-column: span 3; }
.project:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: 0 12px 24px #171e2b08; }
.project-art { height: 212px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.art-index { position: absolute; bottom: 16px; left: 20px; color: #37405a; font-size: 8px; letter-spacing: .13em; font-weight: 650; }
.cipher-art { background: #e9edff; gap: 25px; }
.letter-tile { display: grid; place-items: center; width: 77px; height: 89px; font-size: 48px; color: var(--blue); background: var(--panel); border: 1px solid var(--blue); transform: rotate(-9deg); border-radius: 5px; }
.tile-blue { background: var(--blue); color: white; transform: rotate(9deg); }
.cipher-arrow { color: var(--blue); font-size: 30px; }
.probability-art { background: #edf0df; }
.probability-art svg { width: 78%; height: 90%; }
.vigenere-art { background: #f0e5dc; }
.letter-matrix { font: 23px/1.4 ui-monospace, monospace; letter-spacing: .38em; color: #987c6a; transform: rotate(-8deg); white-space: nowrap; }
.letter-matrix b { display: inline-block; color: #fff; background: var(--blue); outline: 6px solid var(--blue); }
.enigma-art { background: #e3eae7; gap: 10px; }
.rotor { border: 1px solid #7f988e; border-radius: 32px; background: #f9fbf6; height: 120px; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #315c49; font: 23px/1.3 ui-monospace, monospace; }
.rotor span { font-size: 16px; color: #7f988e; margin: 3px 0; }
.rotor:nth-child(2) { background: #315c49; color: white; transform: translateY(10px); }
.infinity-art { background: #ebe5f4; }
.infinity-symbol { font: 140px/.9 Georgia, serif; color: var(--blue); margin-top: -10px; }
.infinity-orbit { position: absolute; width: 182px; height: 70px; border: 1px solid #79679b; border-radius: 50%; transform: rotate(-42deg); }
.project-body { padding: 25px; }
.project-body .eyebrow { font-size: .61rem; letter-spacing: .1em; }
.project-body h3 { font-size: 1.27rem; font-weight: 650; letter-spacing: -.035em; margin: 10px 0; display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.project-body h3 span { color: var(--blue); }
.project-body > p:not(.eyebrow) { font-size: .85rem; color: var(--muted); line-height: 1.75; min-height: 66px; margin-bottom: 25px; }
.project-wide .project-body > p:not(.eyebrow) { min-height: 44px; max-width: 380px; }
.project-cta { color: var(--blue); font-size: .76rem; font-weight: 650; }
.project-cta span { margin-left: 10px; }
.collection-link { display: flex; align-items: center; justify-content: center; gap: 30px; border: 1px solid var(--line); padding: 18px; border-radius: 5px; margin-top: 24px; font-size: .85rem; font-weight: 600; }
.collection-link:hover { background: var(--blue-wash); color: var(--blue); border-color: var(--blue); }
.closing-note { padding: 85px 0; display: flex; align-items: center; justify-content: center; gap: 35px; }
.closing-note > span { font-size: 82px; color: var(--blue); line-height: 1; }
.closing-note p { font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -.035em; margin: 0; }
.closing-note em { color: var(--blue); }
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: .73rem; color: var(--muted); }
.footer-name { font-weight: 650; color: var(--ink); }
.footer-name span { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; margin-top: 3px; }
@media (min-width: 1500px) { .hero h1 { font-size: 110px; } }
@media (max-width: 1050px) { .site-wrap { padding: 0 36px; } .hero { padding: 65px 0 75px; gap: 12px; } .hero h1 { font-size: 76px; } .project-grid { gap: 16px; } .project-body { padding: 20px; } .project-body h3 { font-size: 1.12rem; } }
@media (max-width: 760px) { .site-wrap { padding: 0 24px; } .brand-sub { display: none; } .site-header nav { gap: 18px; font-size: .74rem; } .hero { grid-template-columns: 1fr; padding: 48px 0 48px; gap: 34px; } .hero h1 { font-size: clamp(60px, 12vw, 90px); } .hero-intro { max-width: 450px; } .hero-art { width: min(100%, 420px); margin: auto; } .section-heading { align-items: start; flex-direction: column; gap: 18px; } .project, .project-wide { grid-column: span 3; } .project:last-child { grid-column: span 6; } .project-art { height: 190px; } .project-body > p:not(.eyebrow) { min-height: 66px; } .closing-note { padding: 60px 0; gap: 20px; } .closing-note > span { font-size: 60px; } }
@media (max-width: 480px) { .site-wrap { padding: 0 20px; } .site-header { padding: 20px 0; gap: 10px; } .site-header .brand { gap: 9px; font-size: .9rem; } .brand-mark { width: 36px; height: 36px; font-size: 22px; } .site-header nav a:first-child { display: none; } .hero h1 { font-size: clamp(53px, 13vw, 66px); } .project, .project-wide { grid-column: span 6; } .project-art { height: 210px; } .project-body > p:not(.eyebrow), .project-wide .project-body > p:not(.eyebrow) { min-height: auto; } .project-body { padding: 23px; } .site-footer { flex-wrap: wrap; } .footer-name { flex-basis: 100%; } .closing-note p { font-size: 25px; } }