/* ============================================================ johnokorn.com — shared design system Editorial / "brand book" aesthetic: black canvas, matcha accent, Playfair display serif, monospace labels, custom cursor. Fonts are loaded via tags in each page's (not @import). ============================================================ */ :root{ --ink:#fff; --paper:#000; --rule:rgba(255,255,255,.14); --dim:rgba(255,255,255,.55); /* muted labels — 6.3:1 on black (was .46 / 4.6:1) */ --pulse:#FFCB05; /* Michigan Maize accent — the rare moment */ --max:1480px; --pad-x: clamp(24px, 5vw, 96px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{background:var(--paper);color:var(--ink);overflow-x:hidden} body{font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:.005em} @media (hover:hover){body{cursor:none}} ::selection{background:var(--pulse);color:#000} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} .h{font-family:"Playfair Display",Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:.95} .m{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} /* ---------- custom dot cursor ---------- */ .cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s} .cursor.hot{width:42px;height:42px;background:var(--pulse);mix-blend-mode:normal} @media (hover:none){.cursor{display:none}} /* ---------- progress line ---------- */ .prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--pulse);z-index:60} /* ---------- fixed chrome / nav ---------- */ .chrome{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:24px;mix-blend-mode:difference;color:#fff;pointer-events:none} .chrome a, .chrome span, .chrome button{pointer-events:auto} .chrome .brand{font-family:"Playfair Display",serif;font-weight:600;font-size:19px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:6px} .chrome .brand .dot{color:var(--pulse)} .chrome .toc{display:flex;gap:20px} .chrome .toc a{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;transition:opacity .2s;position:relative;padding-bottom:2px} .chrome .toc a:hover{opacity:1} .chrome .toc .sig-link{display:inline-flex;align-items:center;align-self:center} .chrome .toc .sig{height:26px;width:auto;display:block;opacity:.9;transition:opacity .2s} .chrome .toc .sig-link:hover .sig{opacity:1} .chrome .toc a.active{opacity:1} .chrome .toc a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--pulse)} .menu-btn{display:none;background:none;border:0;color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase} .nav-right{display:none;align-items:center;gap:16px} /* mobile-only group: [MENU] [signature] */ .chrome .sig-mobile{display:inline-flex;align-items:center} .chrome .sig-mobile .sig{height:26px;width:auto;display:block;opacity:.9} /* mobile menu */ .mobile-nav{position:fixed;inset:0;background:var(--paper);z-index:55;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--pad-x);transform:translateY(-100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none} .mobile-nav.open{transform:none;pointer-events:auto} .mobile-nav a{font-family:"Playfair Display",serif;font-size:clamp(34px,9vw,56px);line-height:1.05} .mobile-nav a .num{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;color:var(--dim);margin-right:14px;vertical-align:middle} .mobile-nav .close{position:absolute;top:12px;right:var(--pad-x);font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#000;background:#fff;border:0;border-radius:999px;padding:0 18px;line-height:1} @media (max-width:900px){.chrome{padding-top:8px;padding-bottom:8px}.chrome .toc{display:none}.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}.nav-right{display:flex}} /* ---------- folio + side label ---------- */ .folio{position:fixed;left:var(--pad-x);bottom:22px;z-index:40;mix-blend-mode:difference;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.55} .side{position:fixed;right:16px;top:50%;transform:rotate(90deg) translate(50%,0);transform-origin:right top;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);z-index:40;mix-blend-mode:difference;pointer-events:none} @media (max-width:900px){.side,.folio{display:none}} /* ---------- reveal motion ---------- */ .r{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)} .r.on{opacity:1;transform:none} .r.d1{transition-delay:.08s}.r.d2{transition-delay:.16s}.r.d3{transition-delay:.24s} .r.d4{transition-delay:.32s}.r.d5{transition-delay:.4s}.r.d6{transition-delay:.48s} @media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}} /* ============================================================ PAGE HEADER (interior pages) ============================================================ */ .page-head{padding:24vh var(--pad-x) 10vh;max-width:var(--max);margin:0 auto} .page-head .crumb{display:flex;gap:14px;align-items:center;margin-bottom:32px} .page-head .crumb .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} .page-head .crumb .bar{flex:1;height:1px;background:var(--rule)} .page-head h1{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(56px,11vw,170px);line-height:.9;letter-spacing:-.02em} .page-head .sub{font-size:clamp(18px,2vw,24px);font-weight:300;color:rgba(255,255,255,.8);max-width:40ch;margin-top:36px;line-height:1.4} /* ============================================================ GENERIC SECTION ============================================================ */ section{position:relative;padding:9vh var(--pad-x);max-width:var(--max);margin:0 auto} section.tight{padding-top:0} .chapter{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid var(--rule);padding-top:22px;margin-bottom:6vh} .chapter .ch{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .chapter .ti{font-family:"Playfair Display",serif;font-size:clamp(30px,4vw,60px);line-height:.95;margin:0;font-weight:500} .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .lede{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(30px,4.4vw,68px);line-height:1.0;max-width:18ch;letter-spacing:-.01em} .prose{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:5vh} .prose .body{grid-column:5 / span 7} .prose .body p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;font-weight:300;max-width:60ch;margin-bottom:1.4em;color:rgba(255,255,255,.86)} .prose .body p em{font-style:italic;color:#fff} .prose .hint{grid-column:1 / span 3;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.8} @media (max-width:900px){.prose .body,.prose .hint{grid-column:1 / -1}.prose .hint{margin-bottom:18px}} .pull{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(28px,4vw,52px);line-height:1.1;max-width:20ch;margin:8vh auto;text-align:center;color:#fff} .pull .by{display:block;font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:28px} /* ---------- image figure ---------- */ .figure{position:relative;width:100%;overflow:hidden;background:#0a0a0a;border:1px solid var(--rule)} .figure img{width:100%;height:100%;object-fit:cover;display:block} .figure .cap{position:absolute;left:18px;bottom:14px;right:18px;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)} /* image placeholder slot */ .slot{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(45deg,#0c0c0c,#0c0c0c 12px,#0f0f0f 12px,#0f0f0f 24px);border:1px dashed var(--rule);color:var(--dim);text-align:center;padding:24px} .slot .ico{font-family:"Playfair Display",serif;font-size:34px;color:rgba(255,255,255,.25)} .slot .lbl{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase} /* ---------- full-bleed spread ---------- */ .spread{position:relative;width:100%;overflow:hidden;background:var(--paper);margin:6vh 0} .spread .frame{position:relative;width:100%;height:min(86vh,920px);overflow:hidden} .spread .frame img{width:100%;height:118%;object-fit:cover;position:absolute;top:-9%;left:0;will-change:transform;transition:transform .1s linear} .spread .cap{position:absolute;left:var(--pad-x);bottom:var(--pad-x);right:var(--pad-x);display:flex;justify-content:space-between;align-items:end;gap:24px;color:#fff;pointer-events:none;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase} .spread .cap .quote{font-family:"Playfair Display",serif;font-size:clamp(26px,3vw,46px);line-height:1.02;letter-spacing:-.01em;text-transform:none;max-width:18ch} /* ============================================================ STAT BILLBOARDS ============================================================ */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:5vh} .stat{background:var(--paper);padding:5vh 28px;display:flex;flex-direction:column;gap:14px;min-height:30vh;justify-content:space-between} .stat .n{font-family:"Playfair Display",serif;font-size:clamp(48px,5.5vw,84px);line-height:.85} .stat .l{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.6} .stat.accent .n{color:var(--pulse)} /* ============================================================ TIMELINE ============================================================ */ .timeline{border-top:1px solid var(--rule);margin-top:5vh} .tl-item{display:grid;grid-template-columns:160px 1fr;gap:32px;padding:5vh 0;border-bottom:1px solid var(--rule);align-items:start} .tl-item .yr{font-family:"Playfair Display",serif;font-size:clamp(28px,3vw,44px);line-height:1;color:var(--pulse)} .tl-item .c .t{font-family:"Playfair Display",serif;font-size:clamp(22px,2.2vw,32px);line-height:1.05;margin-bottom:12px} .tl-item .c p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.7);max-width:60ch;font-weight:300} @media (max-width:760px){.tl-item{grid-template-columns:1fr;gap:10px}} /* ============================================================ CARD GRID (work / press / shop) ============================================================ */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:5vh} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:5vh} @media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}} .card{background:var(--paper);padding:6vh 4vw;min-height:46vh;display:flex;flex-direction:column;justify-content:space-between;gap:32px;transition:background .4s} .card:hover{background:#0b0b0b} .card .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px} .card .tag{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .card .yr{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.18em;color:var(--dim)} .card h3{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(30px,3.2vw,52px);line-height:.98} .card p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.72);max-width:46ch;font-weight:300} .card .go{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pulse);display:inline-flex;gap:10px;align-items:center} .card .go .arrow{transition:transform .3s} .card:hover .go .arrow{transform:translateX(6px)} /* press list */ .press-list{border-top:1px solid var(--rule);margin-top:5vh} .press-row{display:grid;grid-template-columns:200px 1fr 120px;gap:28px;padding:4vh 0;border-bottom:1px solid var(--rule);align-items:baseline;transition:padding-left .3s} .press-row:hover{padding-left:14px} .press-row .outlet{font-family:"Playfair Display",serif;font-size:clamp(20px,2vw,30px);line-height:1} .press-row .head{font-size:17px;line-height:1.45;color:rgba(255,255,255,.8);font-weight:300} .press-row .meta{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:right} .press-row .head .go{color:var(--pulse)} @media (max-width:760px){.press-row{grid-template-columns:1fr;gap:8px}.press-row .meta{text-align:left}} /* ============================================================ VIDEO EMBED ============================================================ */ .video{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--paper);overflow:hidden} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-cap{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:14px} .video-wrap{margin-top:5vh} /* ============================================================ PILLARS (Builder of People/Programs/Platforms/Places) ============================================================ */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:5vh} .pillar{background:var(--paper);padding:6vh 26px;min-height:42vh;display:flex;flex-direction:column;justify-content:space-between;gap:28px;transition:background .4s} .pillar:hover{background:#0b0b0b} .pillar .n{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.2em;color:var(--dim)} .pillar h3{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(26px,2.4vw,38px);line-height:.95} .pillar h3 .of{display:block;font-size:13px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:10px} .pillar p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.66);font-weight:300} @media (max-width:900px){.pillars{grid-template-columns:1fr 1fr}} @media (max-width:560px){.pillars{grid-template-columns:1fr}} /* ============================================================ CONTACT FORM ============================================================ */ .form{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:5vh} .form .field{grid-column:1 / span 6;display:flex;flex-direction:column;gap:10px} .form .field.full{grid-column:1 / -1} .form label{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .form input,.form textarea,.form select{background:#0a0a0a;border:1px solid var(--rule);color:#fff;font-family:inherit;font-size:16px;padding:16px 18px;border-radius:0;transition:border-color .3s} .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--pulse)} .form textarea{min-height:160px;resize:vertical} .form .submit{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px} .btn{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;background:var(--pulse);color:#000;border:0;padding:18px 38px;cursor:pointer;transition:transform .25s, background .25s} @media (hover:hover){.btn{cursor:none}} .btn:hover{transform:translateY(-2px)} .btn.ghost{background:transparent;color:#fff;border:1px solid var(--rule)} .form-note{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);max-width:42ch;line-height:1.7} .form-status{grid-column:1 / -1;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pulse);min-height:1em} @media (max-width:760px){.form .field{grid-column:1 / -1}} .contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;margin-top:6vh;align-items:start} .contact-grid .left{grid-column:1 / span 7} .contact-grid .right{grid-column:9 / span 4;display:flex;flex-direction:column;gap:28px} .contact-grid .right .blk .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px} .contact-grid .right .blk .v{font-size:17px;line-height:1.5} .contact-grid .right .blk a:hover{color:var(--pulse)} @media (max-width:900px){.contact-grid .left,.contact-grid .right{grid-column:1 / -1}} /* ============================================================ FOOTER ============================================================ */ footer{padding:14vh var(--pad-x) 80px;border-top:1px solid var(--rule);max-width:var(--max);margin:0 auto} footer .big{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(60px,13vw,200px);line-height:.85;letter-spacing:-.02em;margin-bottom:6vh} footer .big .dot{color:var(--pulse)} footer .row{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:32px} footer .links{display:flex;gap:24px;flex-wrap:wrap} footer .links a{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .25s} footer .links a:hover{color:#fff} /* ---------- mobile optimization ---------- */ body.nav-open{overflow:hidden} /* lock scroll behind open menu */ .mobile-nav .close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} @media (hover:none){ /* bigger tap targets on touch devices */ footer .links a{display:inline-block;padding:14px 0} .card .go{padding:8px 0} .contact-grid .right .blk .v a{display:inline-block;padding:5px 0} } footer .meta{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.9;text-align:right} @media (max-width:760px){footer .meta{text-align:left}} /* ---------- social links ---------- */ .social{display:flex;gap:16px;align-items:center} .soc{color:var(--dim);display:inline-flex;align-items:center;transition:color .25s} .soc:hover{color:var(--pulse)} .soc svg{width:20px;height:20px;display:block;fill:currentColor} footer .foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px} @media (max-width:760px){footer .foot-right{align-items:flex-start}} @media (hover:none){.soc{padding:12px 0}.social{gap:22px}} /* 44px touch targets */ /* utility */ .accent{color:var(--pulse)} .center{text-align:center} .mt-lg{margin-top:8vh} /* ---------- press logo ticker ---------- */ .ticker{position:relative;overflow:hidden;margin-top:10vh;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .ticker-track{display:flex;align-items:center;width:max-content;animation:tickerscroll 38s linear infinite} .ticker img{height:30px;width:auto;display:block;flex:0 0 auto;opacity:.82;margin-right:clamp(40px,6vw,72px)} @keyframes tickerscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .ticker{-webkit-mask-image:none;mask-image:none} .ticker-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center} .ticker img{margin:0 22px 18px} }