/*
Theme Name: Raymond Olsen Portfolio
Theme URI: https://www.raymondolsen.com/
Author: Olsen Technology
Description: Custom motion-design portfolio theme for Raymond Olsen.
Version: 1.9.0
Text Domain: raymond-olsen
*/

:root{--ink:#111;--paper:#f3f2ef;--muted:#858581;--accent:#e43b2d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.screen-reader-text{position:absolute;left:-9999px}.site-header{position:fixed;z-index:20;left:0;top:0;width:245px;height:100vh;background:#101010;color:#fff;padding:40px 30px;display:flex;flex-direction:column}.wordmark{font-size:27px;letter-spacing:.04em;line-height:.9;margin-bottom:62px}.wordmark strong,.wordmark span{display:block}.wordmark span{font-weight:300;color:#aaa}.menu-toggle{display:none}.primary-nav{display:flex;flex-direction:column;gap:19px;font-size:12px;text-transform:uppercase;letter-spacing:.18em}.primary-nav a,.projects-toggle{opacity:.72;transition:.2s}.primary-nav a:hover,.projects-toggle:hover{opacity:1;color:#f35a49}.projects-wrap{position:relative}.projects-toggle{cursor:pointer}.projects-menu{position:fixed;display:none;flex-direction:column;gap:11px;overflow:auto;left:245px;top:0;width:340px;height:100vh;padding:38px;background:#1c1c1c;color:#bbb;text-transform:none;letter-spacing:.02em;font-size:13px}.projects-wrap.open .projects-menu{display:flex}.projects-menu a:hover{color:#fff}.social{margin-top:auto;display:flex;gap:18px;color:#777;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.page-shell{margin-left:245px;min-height:100vh}.hero{min-height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px;background:#efeeeb}.hero:after{content:"";position:absolute;inset:24px;border:1px solid #d3d1cc;pointer-events:none}.hero-logo{width:auto;max-width:75%;height:auto;max-height:52vh;filter:grayscale(1);mix-blend-mode:multiply}.hero p{max-width:620px;margin:34px auto 0;text-align:center;font-size:14px;line-height:1.8;letter-spacing:.04em;color:#666}.scroll-cue{position:absolute;bottom:48px;font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:#888}.scroll-cue b{display:block;text-align:center;font-size:18px;margin-top:8px}.reel-grid{display:grid;grid-template-columns:1fr 1fr;background:#090909}.reel-card{position:relative;min-height:410px;overflow:hidden;color:#fff;background:#151515}.reel-card img{width:100%;height:100%;position:absolute;object-fit:cover;filter:grayscale(.25);opacity:.72;transition:.5s}.reel-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(0,0,0,.85))}.reel-card:hover img{transform:scale(1.035);opacity:.92}.reel-card h2{position:absolute;z-index:2;left:38px;bottom:50px;font-size:27px;font-weight:400}.reel-number{position:absolute;z-index:2;left:38px;top:30px;color:#ddd;font-size:11px;letter-spacing:.15em}.view{position:absolute;z-index:2;right:32px;bottom:26px;color:#aaa;font-size:10px;text-transform:uppercase;letter-spacing:.15em}.content-page{max-width:940px;margin:auto;padding:110px 70px}.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:10px;color:var(--accent)}.content-page h1{font-size:clamp(48px,7vw,92px);line-height:.95;letter-spacing:-.055em;margin:20px 0 34px}.lead,.entry-content{max-width:680px;font-size:18px;line-height:1.8;color:#666}.project-media{margin:70px 0 40px;aspect-ratio:16/9;background:linear-gradient(135deg,#0b0b0b,#353535);display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}.project-media img,.project-media iframe,.project-media video{width:100%;height:100%;object-fit:cover;border:0}.project-media.placeholder:before{content:"";width:180px;height:180px;border:1px solid #666;transform:rotate(45deg)}.project-media.placeholder span{position:absolute;font-size:12px;letter-spacing:.25em;text-transform:uppercase}.project-pager{display:flex;justify-content:space-between;margin-top:70px;padding-top:25px;border-top:1px solid #ccc;text-transform:uppercase;font-size:10px;letter-spacing:.2em}.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:60px}.archive-card{background:#111;color:#fff;min-height:210px;padding:28px;display:flex;align-items:flex-end;font-size:34px;transition:.2s}.archive-card:hover{background:var(--accent)}.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;margin-top:60px}.contact-details{font-size:16px;line-height:2}.contact-details a{border-bottom:1px solid}.contact-form{display:grid;gap:18px}.contact-form label{font-size:10px;text-transform:uppercase;letter-spacing:.18em}.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;padding:12px 0;font:inherit;outline:none}.contact-form textarea{min-height:120px}.contact-form button{justify-self:start;border:0;background:#111;color:#fff;padding:16px 28px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;cursor:pointer}.notice{padding:15px;border-left:3px solid #111;background:#fff}.site-footer{margin-left:245px;padding:35px 50px;background:#0d0d0d;color:#666;display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.15em}
@media(max-width:800px){.site-header{position:relative;width:100%;height:auto;padding:25px}.header-top{display:flex;justify-content:space-between;align-items:flex-start}.wordmark{margin:0;font-size:22px}.menu-toggle{display:block;border:0;background:none;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.15em;padding:7px}.primary-nav{display:none;flex-direction:row;flex-wrap:wrap;gap:15px;margin-top:25px}.site-header.nav-open .primary-nav{display:flex}.social{display:none}.projects-menu{left:0;top:130px;width:100%;height:calc(100vh - 130px);z-index:30}.page-shell,.site-footer{margin-left:0}.hero{min-height:78vh;padding:45px 28px}.hero:after{inset:12px}.hero-logo{max-width:72%;max-height:42vh}.reel-grid{grid-template-columns:1fr}.reel-card{min-height:310px}.content-page{padding:65px 25px}.content-page h1{font-size:48px}.contact-grid{grid-template-columns:1fr;gap:35px}.archive-grid{grid-template-columns:1fr}.site-footer{gap:15px;flex-wrap:wrap;padding:28px 25px}}