@font-face{font-family:'Patelzick DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/company-logos/patelzick-dm-sans.woff2') format('woff2')}
@font-face{font-family:'Sync Editorial';font-style:normal;font-weight:400 900;font-display:swap;src:url('assets/company-logos/sync-editorial.ttf') format('truetype')}
@font-face{font-family:'Calendar Roboto';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url('assets/company-logos/calendarcleanse-roboto.woff2') format('woff2')}
:root{color-scheme:dark;--edge-rgb:16,38,49;--ink:#102631;--cream:#fff5e8;--coral:#f4a16f;--ease:cubic-bezier(.22,.7,.24,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--cream);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--coral);outline-offset:9px}
::selection{background:#ed916e;color:#12242d}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:16px;left:16px;z-index:30;padding:14px;background:var(--cream);color:var(--ink);transform:translateY(-200%)}.skip-link:focus{transform:none}
.scene{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.scene-art{position:absolute;z-index:0;inset:-12% 0;will-change:transform;pointer-events:none}
.scene-art img{display:block;width:100%;height:100%;object-fit:cover}
.hero{height:100svh;min-height:580px;background:#273c50;display:flex;align-items:center;justify-content:center}
/* Continuous color falloff replaces the old image's hard wave silhouette. */
.hero-art{--sun-x:72%;--sun-y:45%;background:linear-gradient(180deg,#21394f 0%,#536278 22%,#967b84 40%,#c78d83 52%,#e6a574 64%,#bb997e 73%,#607a85 84%,#193b4b 94%,#102a39 100%)}
.hero-flow{position:absolute;inset:0;transform-origin:var(--sun-x) var(--sun-y);opacity:.28;background:radial-gradient(ellipse at var(--sun-x) var(--sun-y),rgba(255,222,163,.13) 0%,rgba(246,182,137,.2) 26%,rgba(205,148,141,.1) 48%,rgba(106,129,153,.08) 72%,transparent 100%);pointer-events:none}
.hero-flow-two{background:radial-gradient(ellipse at var(--sun-x) var(--sun-y),rgba(255,213,151,.1) 0%,rgba(244,180,138,.18) 30%,rgba(180,143,151,.1) 54%,transparent 100%)}
.hero-sun{position:absolute;left:var(--sun-x);top:var(--sun-y);width:clamp(180px,19vw,310px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle closest-side,#ffe0a2 0%,#ffd591 58%,rgba(255,202,132,.94) 70%,rgba(255,193,122,.2) 82%,rgba(255,188,119,.04) 93%,transparent 100%);pointer-events:none}
/* Two offset layers drift only inward, fading at the reset to avoid a jump. */
@keyframes solar-inward{0%{transform:scale(1.065);opacity:0}25%{opacity:.42}75%{opacity:.42}100%{transform:scale(1);opacity:0}}
@keyframes solar-glow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.97}50%{transform:translate(-50%,-50%) scale(1.015);opacity:1}}
@media(prefers-reduced-motion:no-preference){.hero-flow{animation:solar-inward 28s linear infinite;will-change:transform,opacity}.hero-flow-two{animation-delay:-14s}.hero-sun{animation:solar-glow 28s ease-in-out infinite}}

.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,19,32,.28),rgba(14,24,34,.04) 45%,rgba(5,18,26,.34))}
.hero-top{position:absolute;top:max(30px,env(safe-area-inset-top));left:4.4vw;right:4.4vw;display:flex;justify-content:space-between;gap:20px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:600;line-height:1.5}
.hero-top,.hero-copy,.scroll-cue,.project-list,.about-content,footer{z-index:3}
.project-list,.about-content{position:relative}
/* Fixed section fades share one opaque edge color, even while art scrolls. */
.hero::after,.introduction::before,.introduction::after,.projects::before,.projects::after,.about::before{content:"";position:absolute;left:0;right:0;height:clamp(120px,18vh,240px);z-index:2;pointer-events:none}
.hero::after,.introduction::after,.projects::after{bottom:-1px;background:linear-gradient(180deg,rgba(var(--edge-rgb),0) 0%,rgba(var(--edge-rgb),.08) 20%,rgba(var(--edge-rgb),.35) 45%,rgba(var(--edge-rgb),.75) 70%,var(--ink) 96%)}
.introduction::before,.projects::before,.about::before{top:-1px;background:linear-gradient(0deg,rgba(var(--edge-rgb),0) 0%,rgba(var(--edge-rgb),.08) 20%,rgba(var(--edge-rgb),.35) 45%,rgba(var(--edge-rgb),.75) 70%,var(--ink) 96%)}
.introduction h2{position:relative;z-index:3}

.hero-copy{width:100%;padding:4vw;text-align:center;position:relative;animation:hero-arrive 1.8s var(--ease) .15s both}
h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(46px,7vw,120px);letter-spacing:-.055em;line-height:.99;margin:0;text-shadow:0 2px 25px rgba(14,31,44,.16)}h1 em{font-weight:400}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.scroll-line{height:38px;width:1px;background:rgba(255,245,232,.7)}
.introduction{position:relative;overflow:hidden;padding:clamp(100px,15vw,230px) max(7vw,24px);background:var(--ink);isolation:isolate}
.introduction h2{max-width:1070px;margin:0 auto;font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.22;letter-spacing:-.03em;font-size:clamp(28px,3.6vw,54px)}
.intro-orbit{position:absolute;width:65vw;height:65vw;border-radius:50%;background:radial-gradient(circle,rgba(75,103,118,.22),transparent 68%);left:45%;top:-30%;z-index:-1}
.projects{min-height:110svh;padding:clamp(70px,9vw,150px) max(6vw,24px);background:#172d38;display:grid;align-content:center}
.project-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,26,36,.55),rgba(6,23,32,.65))}
.project-list{list-style:none;padding:0;margin:0;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(42px,7vw,108px)}
.project-row{--project-order:0;--cascade-offset:0%;width:clamp(150px,24vw,340px);position:relative;container-type:inline-size;margin-left:var(--cascade-offset);max-width:calc((100% - var(--cascade-offset)) * .8);padding:0}
.project-row:nth-child(2){--project-order:1;--cascade-offset:17%}.project-row:nth-child(3){--project-order:2;--cascade-offset:34%}.project-row:nth-child(4){--project-order:3;--cascade-offset:51%}.project-row:nth-child(5){--project-order:4;--cascade-offset:70%}

.project-row a{display:block;width:max-content;max-width:100%;overflow-wrap:break-word;font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,4.4vw,76px);line-height:1.12;letter-spacing:-.045em}
.project-row a{transition:color .25s ease}.project-row a:hover{color:#ffc193}
/* Live navbar lockups, verified 2026-11-10. Scale inside each unchanged cascade slot.
   MDN and Sync's monochrome lettering is lightened for this dark background. */
.project-row .project-logo-link{position:relative;z-index:1;width:100%;max-width:100%;transform-origin:var(--logo-origin,0% 50%)}
.project-row .project-logo-echo{position:absolute;inset:0 auto auto 0;z-index:0;opacity:0;pointer-events:none;user-select:none}
.project-logo{display:block;width:100%;height:auto;object-fit:contain;object-position:left center}
.project-logo--monochrome{filter:invert(1)}
.project-row .project-logo-link--patelzick{font-family:'Patelzick DM Sans',Arial,sans-serif;font-size:13.1cqw;font-weight:800;letter-spacing:-.041667em;line-height:1.12;color:#f4f2ed;white-space:nowrap}
.project-logo-link--patelzick span{font-weight:400;color:#f476cc}
.project-row .project-logo-link--mdn{display:flex;align-items:center;gap:1.031%;color:#fff}
.project-logo-link--mdn .project-logo{width:96.22%;min-width:0}
.project-logo-caret{display:block;flex:none;width:2.749%;height:auto;aspect-ratio:8/35}
.project-row .project-logo-link--sync{font-family:Arial,Helvetica,sans-serif;font-size:18cqw;font-weight:700;letter-spacing:-.06em;line-height:1.1;white-space:nowrap;color:#f4f2ed}
.project-logo-link--sync span{font-family:'Sync Editorial',Georgia,serif;font-style:italic;font-weight:400;margin:0 .1em}
.project-row .project-logo-link--calendar{display:flex;align-items:center;gap:.5em;font-family:'Calendar Roboto',sans-serif;font-size:8.8cqw;font-weight:770;font-optical-sizing:auto;font-variation-settings:"wdth" 100;letter-spacing:normal;line-height:1;white-space:nowrap}
.project-logo--icon{width:2em;height:2em;flex-shrink:0;border-radius:.6em}
.project-logo-link--calendar span{min-width:0;background:linear-gradient(90deg,#0a60ab,#2f9bb7,#7ed957);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.about{min-height:120svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(100px,15vw,240px) max(7vw,24px) 100px;background:#1b303b}
.about .scene-art img{object-position:50% 55%}
.about-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,20,29,.56),rgba(6,20,29,.77))}
.about-content{width:min(100%,1240px);margin-inline:auto}
.about-layout{display:grid;grid-template-columns:clamp(120px,12.5vw,150px) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,80px)}
.about-portrait{margin:0;min-width:0;width:100%;max-width:150px}
.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%}
.about-text{min-width:0}
.section-label{font-family:Arial,sans-serif;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;margin:0 0 46px}
.about-copy{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,2.25vw,32px);line-height:1.4;letter-spacing:-.028em;margin:0}
.about-interests{margin-top:1.15em}.about-copy a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}.about-copy a:hover{color:#ffc193}
footer{position:absolute;bottom:25px;left:7vw;right:7vw;display:flex;justify-content:space-between;gap:20px;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#e0d4ca}
/* Text is always visible. Observers may add motion, never unlock content. */
.reveal{opacity:1;transform:none}
.reveal.is-revealing{animation:reveal-arrive .85s var(--ease) var(--reveal-delay,0ms) both}
.project-row.is-revealing{animation:none}
.project-row.is-revealing>.project-logo-link:not(.project-logo-echo){animation:logo-settle 1.1s var(--ease) calc(var(--project-order)*70ms) both}
.project-row.is-revealing>.project-logo-echo{animation:logo-echo 1.1s var(--ease) calc(var(--project-order)*70ms) both}
.project-row:focus-within,.project-row:focus-within>*{animation:none;opacity:1;transform:none}
.project-row:focus-within>.project-logo-link:not(.project-logo-echo){animation:none;opacity:1;transform:none}
.project-row:focus-within>.project-logo-echo{animation:none;opacity:0;transform:none}
@keyframes logo-settle{0%{opacity:.85;transform:scale(var(--logo-entry-scale,1.25))}72%{opacity:1;transform:scale(.985)}100%{opacity:1;transform:none}}
@keyframes logo-echo{0%{opacity:var(--echo-opacity);transform:translateY(var(--echo-offset)) scale(var(--logo-entry-scale,1.25))}65%{opacity:calc(var(--echo-opacity)*.35)}100%{opacity:0;transform:none}}

@keyframes reveal-arrive{from{opacity:.7;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-arrive{from{opacity:.7;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.about-layout{grid-template-columns:minmax(0,1fr);gap:32px}.about-portrait{max-width:120px}}
@media(max-width:600px){.hero{min-height:520px}.hero-top{left:24px;right:24px;font-size:8px;letter-spacing:.12em}.hero-top span:last-child{max-width:110px;text-align:right}.hero-copy{padding:24px}h1{font-size:clamp(38px,9.8vw,60px);line-height:1.06;letter-spacing:-.05em}.hero-art{--sun-x:73%;--sun-y:43%}.scroll-cue{bottom:24px}.introduction{padding-top:105px;padding-bottom:115px}.projects{min-height:100svh;padding-top:70px;padding-bottom:90px}.project-list{gap:clamp(34px,9vw,54px)}.project-row:nth-child(2){--cascade-offset:10%}.project-row:nth-child(3){--cascade-offset:20%}.project-row:nth-child(4){--cascade-offset:30%}.project-row:nth-child(5){--cascade-offset:50%}.project-row a{font-size:clamp(24px,6.2vw,34px)}.about{min-height:110svh;padding:100px 25px 110px}.section-label{margin-bottom:30px}.about-copy{font-size:clamp(22px,5.8vw,26px)}.about .scene-art img{object-position:38% 50%}}
@media(prefers-reduced-motion:reduce){.hero-flow{animation:none;transform:none;opacity:.28;will-change:auto}.hero-sun{animation:none}html{scroll-behavior:auto}.hero-copy{animation:none}.scene-art{transform:none!important;will-change:auto}.reveal,.reveal.is-revealing{opacity:1;transform:none;animation:none}.project-row a{transition:none}.project-row.is-revealing>*{animation:none;opacity:1;transform:none}.project-row.is-revealing>.project-logo-link:not(.project-logo-echo){animation:none;opacity:1;transform:none}.project-row.is-revealing>.project-logo-echo,.project-row .project-logo-echo{animation:none;opacity:0;transform:none}}

/* Reference-style social pill and moon/sun control. */
.site-controls{position:fixed;z-index:20;top:max(22px,env(safe-area-inset-top));right:max(24px,4.4vw,env(safe-area-inset-right));display:flex;align-items:center;gap:6px}
.site-control{box-sizing:border-box;position:relative;display:grid;place-items:center;height:44px;min-width:44px;padding:0;border:0;border-radius:999px;color:#f4f2ed;background:transparent;cursor:pointer;text-decoration:none}
.site-control::before{content:"";position:absolute;inset:6px 0;border:1px solid rgba(232,238,231,.32);border-radius:999px;background:rgba(7,15,18,.78);box-shadow:inset 0 0 0 1px rgba(238,243,235,.08),0 2px 7px rgba(0,0,0,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-control>svg{z-index:1}
.x-link>svg{position:relative}
.site-control:hover::before{border-color:currentColor}
.site-control:focus-visible{outline:2px solid var(--coral);outline-offset:5px}
.site-control:disabled{cursor:default;opacity:.55}
.x-link{width:60px}
.theme-toggle{position:relative;width:44px}
.theme-toggle::before{inset:6px}
.theme-icon{position:absolute;inset:0;margin:auto;width:22px;height:22px;pointer-events:none}
.theme-icon--moon{opacity:0}
.theme-icon--sun{opacity:1}
.hero-top{right:auto;max-width:calc(100% - 210px);flex-direction:column;align-items:flex-start;gap:5px}
html[data-theme="light"]{color-scheme:light;--ink:#f4f1e7;--cream:#20251e;--coral:#9b461e;--edge-rgb:244,241,231}
html[data-theme="light"] .site-control{color:#20251e}
html[data-theme="light"] .site-control::before{background:rgba(244,241,231,.84);border-color:rgba(75,83,75,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 2px 7px rgba(40,45,35,.12)}
html[data-theme="light"] .theme-icon--sun{opacity:0}
html[data-theme="light"] .theme-icon--moon{opacity:1}
html[data-theme="light"] .hero{background:#e8dcca}
html[data-theme="light"] .hero-art{background:linear-gradient(180deg,#c4d3dd 0%,#d5d8dc 22%,#e3d1cf 40%,#efd0bd 52%,#f7ddae 64%,#e9dcc8 73%,#d9dfd8 84%,#eeebdf 94%,#f4f1e7 100%)}
html[data-theme="light"] .hero-shade{background:linear-gradient(180deg,rgba(244,241,231,.15),rgba(244,241,231,0) 45%,rgba(244,241,231,.28))}
html[data-theme="light"] h1{text-shadow:none}
html[data-theme="light"] .scroll-line{background:rgba(32,37,30,.65)}
html[data-theme="light"] .projects,html[data-theme="light"] .about{background:#eeeadd}
html[data-theme="light"] .project-shade{background:linear-gradient(180deg,rgba(244,241,231,.91),rgba(244,241,231,.86))}
html[data-theme="light"] .about-shade{background:linear-gradient(90deg,rgba(244,241,231,.86),rgba(244,241,231,.95))}
html[data-theme="light"] .project-logo--monochrome{filter:none}
html[data-theme="light"] .project-row .project-logo-link--patelzick,html[data-theme="light"] .project-row .project-logo-link--sync,html[data-theme="light"] .project-row .project-logo-link--mdn{color:#20251e}
html[data-theme="light"] .project-logo-link--patelzick span{color:#a52475}
html[data-theme="light"] .about-copy a:hover{color:#9b461e}
html[data-theme="light"] footer{color:#4f5b50}
@media(max-width:600px){.site-controls{top:max(16px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));gap:6px}.site-control{height:44px;min-width:44px}.x-link{width:56px}.theme-toggle{width:44px}.hero-top{max-width:calc(100% - 172px)}.hero-top span:last-child{max-width:none;text-align:left}}

/* The official embed controls fields, consent, validation and its own height. */
.newsletter{margin-top:clamp(32px,4vw,56px);margin-left:calc(clamp(120px,12.5vw,150px) + clamp(32px,5vw,80px));max-width:680px;min-width:0;scroll-margin-top:100px}
.newsletter .section-label{margin:0 0 10px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.02em;text-transform:none;overflow-wrap:break-word}
.newsletter-caption{margin:0 0 16px;max-width:62ch;font-size:clamp(14px,1.2vw,16px);line-height:1.6;letter-spacing:normal;overflow-wrap:break-word}
.newsletter .section-label a:hover{text-decoration:underline;text-underline-offset:.25em}
.newsletter-embed{width:100%;min-width:0}
.newsletter-embed iframe{display:block;max-width:100%;border:0;color-scheme:light}
@media(max-width:900px){.newsletter{margin-left:0;max-width:100%}}

/* Quiet text links retain the footer's typography and a full touch target. */
footer{align-items:center}
.footer-socials{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px clamp(12px,2vw,28px);list-style:none;margin:0;padding:0}
.footer-socials a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}
.footer-socials a:hover{text-decoration:underline;text-underline-offset:.3em;color:var(--coral)}
.footer-socials a:focus-visible{outline-offset:3px}
@media(max-width:600px){footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}.footer-name{grid-column:1;grid-row:1}.footer-copyright{grid-column:2;grid-row:1}.footer-socials{grid-column:1/-1;grid-row:2;justify-content:flex-start}.about{padding-bottom:160px}}