/* ════════════════════════════════════════════════ Adarsh Baburaj, portfolio Ink on paper. Two inks, neither of them glows. ════════════════════════════════════════════════ */ :root{ /* paper */ --paper: #F4F1EA; /* cotton stock */ --paper-2: #EDE9E0; /* second surface, a shade deeper */ --paper-3: #E4DFD4; /* pressed edge */ /* ink one, structure and text */ --ink: #1B242B; --ink-2: #56616A; --ink-3: #8D959B; --rule: rgba(27,36,43,.16); --rule-2: rgba(27,36,43,.30); /* ink two, state and emphasis. iron oxide, matte, never lit */ --oxide: #9E4B33; --oxide-2: rgba(158,75,51,.13); --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; --pad: clamp(20px, 5vw, 88px); --max: 1380px; --ease: cubic-bezier(.16,1,.3,1); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--paper) } html.lock{ overflow:hidden } body{ background:transparent; /* paper lives on so the ink can sit at z-index -1 */ color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ display:block; max-width:100%; height:auto } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } ::selection{ background:var(--oxide); color:var(--paper) } ::-webkit-scrollbar{ width:10px; height:10px } ::-webkit-scrollbar-track{ background:var(--paper-2) } ::-webkit-scrollbar-thumb{ background:#C9C2B4; border-radius:10px } ::-webkit-scrollbar-thumb:hover{ background:#B3AA99 } .tag{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--oxide); margin-bottom:22px; } /* ══ INK FIELD ══════════════════════════════════ */ /* sits behind the document, fades back when the hero leaves the screen */ .ink{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:1; transition:opacity 1.1s var(--ease); } .ink.rest{ opacity:.32 } /* paper grain, over everything, ties ink and content to one surface */ .grain{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); } /* ══ PRELOADER ══════════════════════════════════ */ .loader{ position:fixed; inset:0; z-index:2000; background:var(--paper); display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s; } .loader.done{ opacity:0; visibility:hidden } .loader__inner{ width:min(340px,74vw); text-align:center } .loader__name{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--ink-3); margin-bottom:18px; } .loader__bar{ height:1px; background:var(--rule); overflow:hidden } .loader__bar span{ display:block; height:100%; width:0%; background:var(--oxide); transition:width .25s linear } .loader__pct{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:14px; letter-spacing:.08em } /* ══ CURSOR ═════════════════════════════════════ */ .cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:1500; pointer-events:none; border-radius:50% } .cursor{ width:30px; height:30px; border:1px solid var(--rule-2); margin:-15px 0 0 -15px; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, opacity .3s, border-color .3s; } .cursor-dot{ width:5px; height:5px; background:var(--oxide); margin:-2.5px 0 0 -2.5px; transition:opacity .3s } .cursor.is-hover{ width:74px; height:74px; margin:-37px 0 0 -37px; background:var(--oxide); border-color:var(--oxide); } .cursor.is-hover ~ .cursor-dot, .cursor.is-hide, .cursor.is-hide ~ .cursor-dot{ opacity:0 } .cursor__label{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); opacity:0; transition:opacity .25s; white-space:nowrap; } .cursor.is-hover .cursor__label{ opacity:1 } @media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none } } /* ══ NAV ════════════════════════════════════════ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:900; transition:background .4s, backdrop-filter .4s, border-color .4s; border-bottom:1px solid transparent; } .nav.stuck{ background:rgba(244,241,234,.86); backdrop-filter:blur(12px) saturate(1.1); border-bottom-color:var(--rule); } .nav__bar{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); height:70px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav__logo{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; white-space:nowrap } .nav__logo-short{ display:none } .nav__links{ display:flex; gap:32px } .nav__links a{ position:relative; font-size:13.5px; color:var(--ink-2); display:flex; align-items:baseline; gap:7px; transition:color .3s; padding:6px 0; } .nav__links a i{ font-family:var(--mono); font-size:9.5px; font-style:normal; color:var(--ink-3); transition:color .3s } .nav__links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--oxide); transition:width .4s var(--ease); } .nav__links a:hover,.nav__links a.on{ color:var(--ink) } .nav__links a:hover i,.nav__links a.on i{ color:var(--oxide) } .nav__links a.on::after,.nav__links a:hover::after{ width:100% } .nav__progress{ height:1px; background:var(--rule) } .nav__progress span{ display:block; height:100%; width:0; background:var(--oxide) } .nav__toggle{ display:none; width:30px; height:30px; position:relative } .nav__toggle span{ position:absolute; left:4px; width:22px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease); } .nav__toggle span:first-child{ top:12px } .nav__toggle span:last-child{ top:18px } .nav__toggle.open span:first-child{ transform:translateY(3px) rotate(45deg) } .nav__toggle.open span:last-child{ transform:translateY(-3px) rotate(-45deg) } .menu{ position:fixed; inset:0; z-index:880; background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); } .menu.open{ clip-path:inset(0 0 0 0) } .menu__links{ display:flex; flex-direction:column; gap:4px } .menu__links a{ font-family:var(--serif); font-weight:500; font-size:clamp(36px,11vw,58px); line-height:1.1; display:flex; align-items:baseline; gap:14px; opacity:0; transform:translateY(24px); transition:opacity .5s, transform .5s var(--ease); } .menu.open .menu__links a{ opacity:1; transform:none } .menu.open .menu__links a:nth-child(1){ transition-delay:.12s } .menu.open .menu__links a:nth-child(2){ transition-delay:.18s } .menu.open .menu__links a:nth-child(3){ transition-delay:.24s } .menu.open .menu__links a:nth-child(4){ transition-delay:.30s } .menu.open .menu__links a:nth-child(5){ transition-delay:.36s } .menu__links a i{ font-family:var(--mono); font-size:12px; font-style:normal; color:var(--oxide) } .menu__foot{ position:absolute; left:var(--pad); right:var(--pad); bottom:38px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; } /* ══ HERO ═══════════════════════════════════════ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:120px var(--pad) clamp(40px,7vh,72px); } .hero__inner{ position:relative; width:100%; max-width:var(--max); margin:0 auto } .hero__title{ font-family:var(--serif); font-weight:500; font-size:clamp(62px,14vw,208px); line-height:.84; letter-spacing:-.028em; margin-bottom:clamp(26px,4vh,44px); } /* overflow:hidden is only needed while the letters slide in. It clips on every side, which cuts the dot off the italic j and shaves the ascenders, so it is released the moment the reveal finishes. */ .hero__title .line{ display:block; overflow:hidden; padding:0 .10em .16em; margin:0 -.10em -.13em; } .hero__title.revealed .line{ overflow:visible } .hero__title .char{ display:inline-block; transform:translateY(102%); transition:transform .95s var(--ease) } .hero__title .char.in{ transform:none } .hero__title .line:last-child{ font-style:italic } .hero__meta{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end; border-top:1px solid var(--rule); padding-top:clamp(20px,3vh,30px); } .hero__lede p{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.6vw,34px); line-height:1.22; letter-spacing:-.01em; } /* all three lines carry the same weight, no fade down the stack */ .hero__facts{ display:flex; gap:clamp(18px,2.6vw,38px); align-items:stretch } .hero__facts div{ display:flex; gap:12px; align-items:baseline; border-top:1px solid var(--rule-2); padding-top:14px; } .hero__facts b{ font-family:var(--serif); font-size:clamp(34px,3.6vw,50px); line-height:.82; color:var(--oxide); font-weight:600; } .hero__facts span{ font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--ink-2); letter-spacing:.01em; text-transform:uppercase; } /* centred, because the right edge is where the statistics live */ .hero__scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(40px,7vh,72px); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); } .hero__scroll svg{ width:11px; height:38px; animation:bob 2.2s var(--ease) infinite } @keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.35 } 50%{ transform:translateY(7px); opacity:1 } } /* ══ MARQUEE ════════════════════════════════════ */ .marquee{ border-block:1px solid var(--rule); background:var(--paper-2); overflow:hidden; padding:15px 0 } .marquee__track{ display:flex; gap:26px; width:max-content; animation:slide 58s linear infinite; font-family:var(--mono); font-size:11px; letter-spacing:.07em; color:var(--ink-2); text-transform:uppercase; white-space:nowrap; } .marquee:hover .marquee__track{ animation-play-state:paused } .marquee__track .sep{ color:var(--oxide) } @keyframes slide{ to{ transform:translateX(-50%) } } /* ══ SECTIONS ═══════════════════════════════════ */ .section{ padding:clamp(78px,11vw,164px) var(--pad); max-width:var(--max); margin:0 auto } .section--alt{ background:var(--paper-2); max-width:none; border-block:1px solid var(--rule); padding-inline:max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); } .section__head{ max-width:760px; margin-bottom:clamp(46px,7vw,80px) } .section__head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,5vw,68px); line-height:1.02; letter-spacing:-.025em; margin-bottom:18px; } .section__head p{ color:var(--ink-2); font-size:clamp(14.5px,1.3vw,17px); max-width:56ch } /* ══ WORK LIST ══════════════════════════════════ */ .worklist{ border-top:1px solid var(--rule) } .work{ position:relative; width:100%; text-align:left; display:grid; grid-template-columns:56px minmax(0,1fr) auto 86px; gap:clamp(14px,2.6vw,40px); align-items:center; padding:clamp(22px,2.6vw,32px) 0; border-bottom:1px solid var(--rule); transition:padding-left .55s var(--ease), border-color .4s; } .work::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--oxide-2),transparent 60%); opacity:0; transition:opacity .5s; pointer-events:none; } .work:hover{ padding-left:clamp(12px,2vw,26px); border-bottom-color:var(--rule-2) } .work:hover::before{ opacity:1 } .work__idx{ font-family:var(--mono); font-size:11px; color:var(--ink-3); transition:color .4s } .work:hover .work__idx{ color:var(--oxide) } .work__body{ min-width:0 } .work__title{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.9vw,40px); line-height:1.08; letter-spacing:-.018em; transition:color .4s; } .work:hover .work__title{ color:var(--oxide) } .work__sub{ display:block; color:var(--ink-2); font-size:13.5px; margin-top:6px; line-height:1.45 } .work__tags{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end } .work__tags i{ font-family:var(--mono); font-style:normal; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--rule); border-radius:99px; padding:4px 10px; white-space:nowrap; } .work__year{ font-family:var(--mono); font-size:11px; color:var(--ink-3); text-align:right } .work__mob{ display:none } .work-preview{ position:fixed; top:0; left:0; z-index:600; pointer-events:none; width:clamp(240px,22vw,320px); aspect-ratio:4/3; margin:-50% 0 0 -50%; overflow:hidden; opacity:0; transform:scale(.94); transition:opacity .4s, transform .55s var(--ease); box-shadow:0 18px 44px rgba(27,36,43,.18); border:1px solid var(--rule); } .work-preview.on{ opacity:1; transform:scale(1) } .work-preview img{ width:100%; height:100%; object-fit:cover } @media (hover:none),(pointer:coarse){ .work-preview{ display:none } } /* ══ TEACHING RAIL ══════════════════════════════ */ .teach{ position:relative } .teach__rail{ display:flex; gap:clamp(14px,2vw,26px); overflow-x:auto; padding-bottom:22px; scroll-snap-type:x mandatory; cursor:grab; } .teach__rail.dragging{ cursor:grabbing; scroll-snap-type:none } .teach__rail.dragging *{ pointer-events:none } .teach__item{ flex:0 0 clamp(268px,34vw,460px); scroll-snap-align:start } .teach__item img{ width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--paper-3); border:1px solid var(--rule); filter:saturate(.55) contrast(1.02); transition:filter .7s var(--ease); } .teach__item:hover img{ filter:none } .teach__item figcaption{ padding-top:13px; display:flex; flex-direction:column; gap:3px } .teach__item figcaption b{ font-family:var(--serif); font-size:17px; font-weight:500 } .teach__item figcaption span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.03em } .teach__hint{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; } .teach__hint span{ color:var(--oxide) } /* ══ GALLERY ════════════════════════════════════ */ .gallery{ columns:3; column-gap:clamp(12px,1.6vw,22px) } .ph{ break-inside:avoid; margin-bottom:clamp(12px,1.6vw,22px); position:relative; overflow:hidden; background:var(--paper-3); border:1px solid var(--rule); cursor:pointer; } .ph img{ width:100%; aspect-ratio:var(--r,1); object-fit:cover; transition:transform 1s var(--ease) } .ph:hover img{ transform:scale(1.035) } .ph figcaption{ position:absolute; inset:auto 0 0 0; padding:22px 16px 14px; background:linear-gradient(transparent,rgba(27,36,43,.78)); display:flex; justify-content:space-between; align-items:baseline; gap:12px; opacity:0; transform:translateY(10px); transition:opacity .45s, transform .55s var(--ease); color:var(--paper); } .ph:hover figcaption{ opacity:1; transform:none } .ph figcaption b{ font-family:var(--serif); font-size:16px; font-weight:500 } .ph figcaption span{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; opacity:.8 } /* ══ OUTSIDE ════════════════════════════════════ */ .beyond{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px) } .beyond__card{ cursor:pointer } .beyond__card img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--paper-3); border:1px solid var(--rule); filter:saturate(.6); transition:filter .7s var(--ease); } .beyond__card:hover img{ filter:none } .beyond__card figcaption{ padding-top:14px } .beyond__card figcaption b{ display:block; font-family:var(--serif); font-size:19px; font-weight:500; margin-bottom:4px } .beyond__card figcaption span{ color:var(--ink-2); font-size:13px; line-height:1.5 } /* ══ ABOUT ══════════════════════════════════════ */ .about{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); gap:clamp(36px,6vw,90px); align-items:start; padding-bottom:clamp(56px,8vw,104px); } .about h2{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.8vw,62px); line-height:1.03; letter-spacing:-.025em; margin-bottom:24px; } .about__text p{ color:var(--ink-2); font-size:clamp(15px,1.3vw,17.5px); margin-bottom:16px; line-height:1.68 } .about__text b{ color:var(--ink); font-weight:600 } .skills{ border-top:1px solid var(--rule); padding-top:22px; margin-bottom:36px } .skills:last-child{ margin-bottom:0 } .skills h3{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:400; margin-bottom:20px; } .skills__group{ display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; padding:15px 0; border-bottom:1px solid var(--rule); } .skills__group span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--oxide); padding-top:3px } .skills__group p{ color:var(--ink-2); font-size:13.5px; line-height:1.65 } .skills__group a{ color:var(--oxide); border-bottom:1px solid rgba(158,75,51,.4) } .skills__group a:hover{ border-bottom-color:var(--oxide) } .awards{ list-style:none } .awards li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--rule); color:var(--ink-2); font-size:13.5px; line-height:1.5; } .awards li span{ font-family:var(--mono); font-size:10.5px; color:var(--oxide); letter-spacing:.05em } .contact{ border-top:1px solid var(--rule); padding-top:clamp(36px,5vw,56px) } .contact h3{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.8vw,52px); letter-spacing:-.022em; margin-bottom:clamp(26px,4vw,42px); line-height:1.06; } .contact__links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--rule); } .cbtn{ position:relative; background:var(--paper); padding:24px 20px; display:flex; flex-direction:column; gap:6px; overflow:hidden; transition:background .4s; } .cbtn::after{ content:'↗'; position:absolute; top:20px; right:18px; font-size:14px; color:var(--ink-3); transition:transform .45s var(--ease), color .4s; } .cbtn:hover{ background:var(--paper-2) } .cbtn:hover::after{ transform:translate(3px,-3px); color:var(--oxide) } .cbtn span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) } .cbtn i{ font-style:normal; font-size:14.5px; word-break:break-all; transition:color .4s } .cbtn:hover i{ color:var(--oxide) } /* ══ FOOTER ═════════════════════════════════════ */ .foot{ border-top:1px solid var(--rule); padding:26px var(--pad); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); max-width:var(--max); margin:0 auto; } .foot a:hover{ color:var(--oxide) } /* ══ CASE STUDY ═════════════════════════════════ */ .case{ position:fixed; inset:0; z-index:1100; background:var(--paper); clip-path:inset(0 0 100% 0); transition:clip-path .75s var(--ease); visibility:hidden; } .case.open{ clip-path:inset(0 0 0 0); visibility:visible } .case__scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain } .case__body{ max-width:1000px; margin:0 auto; padding:clamp(76px,11vh,124px) var(--pad) 96px } .case__close{ position:fixed; top:20px; right:var(--pad); z-index:2; width:46px; height:46px; border:1px solid var(--rule-2); border-radius:50%; display:grid; place-items:center; font-size:15px; background:rgba(244,241,234,.8); backdrop-filter:blur(8px); transition:background .35s, transform .45s var(--ease), border-color .35s, color .35s; } .case__close:hover{ background:var(--oxide); border-color:var(--oxide); color:var(--paper); transform:rotate(90deg) } .case__idx{ font-family:var(--mono); font-size:11px; color:var(--oxide); letter-spacing:.14em; margin-bottom:14px; display:block } .case__title{ font-family:var(--serif); font-weight:500; font-size:clamp(36px,6.4vw,84px); line-height:.98; letter-spacing:-.03em; margin-bottom:12px; } .case__sub{ font-family:var(--serif); font-style:italic; color:var(--ink-2); font-size:clamp(16px,1.8vw,23px); margin-bottom:32px } .case__facts{ display:flex; gap:clamp(20px,4vw,60px); flex-wrap:wrap; border-block:1px solid var(--rule); padding:18px 0; margin-bottom:38px; } .case__facts div{ display:flex; flex-direction:column; gap:5px } .case__facts b{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400 } .case__facts span{ font-size:14.5px } .case__blurb{ font-size:clamp(16px,1.7vw,20px); line-height:1.66; color:var(--ink-2); max-width:64ch; margin-bottom:44px } .case__blurb em{ color:var(--ink); font-style:italic } .case__points{ margin-bottom:48px } .case__point{ padding:22px 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:170px minmax(0,1fr); gap:clamp(16px,3vw,40px); } .case__point b{ font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--oxide); font-weight:400; padding-top:3px } .case__point p{ color:var(--ink-2); font-size:14.5px; line-height:1.68 } .case__stack{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px } .case__stack i{ font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.05em; color:var(--ink-2); border:1px solid var(--rule); border-radius:99px; padding:6px 13px; } .case__link{ display:inline-flex; align-items:center; gap:14px; margin-bottom:52px; border:1px solid var(--rule-2); border-radius:99px; padding:12px 22px; font-family:var(--mono); font-size:12px; letter-spacing:.03em; transition:background .35s, border-color .35s, color .35s; } .case__link i{ font-style:normal; transition:transform .4s var(--ease) } .case__link:hover{ background:var(--oxide); border-color:var(--oxide); color:var(--paper) } .case__link:hover i{ transform:translate(3px,-3px) } .case__media{ display:grid; gap:clamp(14px,2vw,26px) } .case__media figure{ cursor:pointer; overflow:hidden; background:var(--paper-3); border:1px solid var(--rule) } .case__media img{ width:100%; transition:transform .9s var(--ease) } .case__media figure:hover img{ transform:scale(1.02) } .case__media figcaption{ padding:11px 12px 13px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.03em } /* ══ LIGHTBOX ═══════════════════════════════════ */ /* deliberately inverted: ink ground so the photographs read properly */ .lb{ position:fixed; inset:0; z-index:1300; background:rgba(23,31,37,.97); display:grid; place-items:center; padding:clamp(48px,7vh,80px) clamp(48px,8vw,110px); opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s; } .lb.open{ opacity:1; visibility:visible } .lb__stage{ max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px } .lb__stage img{ max-width:100%; max-height:calc(100svh - 190px); width:auto; object-fit:contain; opacity:0; transform:scale(.97); transition:opacity .45s, transform .6s var(--ease); } .lb.open .lb__stage img{ opacity:1; transform:none } .lb__stage figcaption{ font-family:var(--mono); font-size:11px; color:rgba(244,241,234,.72); letter-spacing:.04em; text-align:center; max-width:60ch; } .lb__close,.lb__nav{ position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(244,241,234,.28); color:var(--paper); display:grid; place-items:center; transition:background .35s, border-color .35s, color .35s, transform .35s; } .lb__close{ top:22px; right:22px; font-size:15px } .lb__close:hover{ background:var(--oxide); border-color:var(--oxide); transform:rotate(90deg) } .lb__nav{ top:50%; margin-top:-24px; font-size:28px; line-height:0; padding-bottom:4px } .lb__nav--prev{ left:clamp(10px,2.4vw,30px) } .lb__nav--next{ right:clamp(10px,2.4vw,30px) } .lb__nav:hover{ background:var(--oxide); border-color:var(--oxide) } .lb__count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; color:rgba(244,241,234,.5); letter-spacing:.1em; } .lb__count span:first-child{ color:var(--oxide) } /* ══ REVEALS ════════════════════════════════════ */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease) } .reveal.in{ opacity:1; transform:none } .reveal[data-delay="1"]{ transition-delay:.1s } .reveal[data-delay="2"]{ transition-delay:.2s } .work,.ph,.beyond__card,.teach__item{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease), padding-left .55s var(--ease), border-color .4s; } .work.in,.ph.in,.beyond__card.in,.teach__item.in{ opacity:1; transform:none } /* ══ RESPONSIVE ═════════════════════════════════ */ @media (max-width:1080px){ .gallery{ columns:2 } .beyond{ grid-template-columns:repeat(2,1fr) } .hero__meta{ grid-template-columns:1fr; gap:26px; align-items:start } .hero__scroll{ display:none } /* stats span the full width once stacked */ .about{ grid-template-columns:1fr } } @media (max-width:820px){ .nav__links{ display:none } .nav__toggle{ display:block } .nav__logo-full{ display:none } .nav__logo-short{ display:inline; font-size:13px; letter-spacing:.18em } .hero{ align-items:center; padding-top:104px } .hero__facts{ flex-direction:column; gap:14px } .work{ grid-template-columns:34px minmax(0,1fr) 74px; grid-template-areas:'idx body img' 'tag tag tag'; gap:14px } .work__idx{ grid-area:idx } .work__body{ grid-area:body } .work__tags{ grid-area:tag; justify-content:flex-start; margin-top:12px } .work__year{ display:none } .work__mob{ grid-area:img; display:block; overflow:hidden; border:1px solid var(--rule) } .work__mob img{ width:74px; height:74px; object-fit:cover } .work:hover{ padding-left:0 } .case__point{ grid-template-columns:1fr; gap:8px } .case__facts{ gap:22px } .skills__group{ grid-template-columns:1fr; gap:6px } .lb{ padding:70px 12px 60px } .lb__nav{ width:42px; height:42px } } @media (max-width:560px){ .gallery{ columns:1 } .beyond{ grid-template-columns:1fr } .hero__title{ font-size:clamp(48px,16vw,84px) } .foot{ flex-direction:column; gap:8px } } /* ══ MOTION PREFERENCE ══════════════════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important } .reveal,.work,.ph,.beyond__card,.teach__item{ opacity:1 !important; transform:none !important } .hero__title .char{ transform:none !important } .hero__title .line{ overflow:visible !important } .cursor,.cursor-dot{ display:none } } :focus-visible{ outline:2px solid var(--oxide); outline-offset:3px }