/* TOM / Personal Portfolio V4 — Digital, Photography, Graphic Design, Motion */
:root{--cream:#e8e4e0;--stone:#d7d1ca;--ivory:#f4f0ea;--ink:#111111;--blood:#e34c44}
html{scroll-padding-top:24px}
.site-header{gap:clamp(12px,2vw,35px)}
.desktop-nav{gap:clamp(12px,1.6vw,25px)}
.desktop-nav a{font-size:9px;letter-spacing:.1em}
.nav-subtitle{font-size:7.5px}
.nav-contact{font-size:9px}
.hero h1{font-weight:700}
.period{color:var(--accent)}
.mini-red-rule{display:inline-block;vertical-align:middle;width:24px;height:2px;background:var(--accent);margin-right:14px}
.section-identifier{display:flex;justify-content:space-between;gap:18px;align-items:center;border-bottom:1px solid rgba(0,0,0,.21);padding:26px 0 20px;font-size:9px;letter-spacing:.17em;font-weight:700;color:#6d655f}
.section-identifier span:first-child{color:#222}
.section-identifier.dark-identifier{border-color:rgba(255,255,255,.2);color:#a4a3a2}
.section-identifier.dark-identifier span:first-child{color:#e7e7e7}
.portfolio-head{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(200px,.6fr);align-items:end;gap:45px;padding:clamp(60px,7vw,110px) 0 clamp(40px,5vw,75px)}
.portfolio-head .eyebrow{font-size:9px;font-weight:700;letter-spacing:.22em}
.portfolio-head h2{font-size:clamp(56px,6.6vw,114px);letter-spacing:-.073em;line-height:.97;margin:24px 0 0;font-weight:700}
.portfolio-head h2 em{font-family:var(--serif);font-weight:400;font-size:1.08em;letter-spacing:-.064em}
.portfolio-head>p{font-size:clamp(13px,1.07vw,16px);line-height:1.8;max-width:380px;margin:0 0 5px}
.light-head{color:#191816}.light-head>p,.light-head .eyebrow{color:#69645e}
.dark-head{color:#efefef}.dark-head>p,.dark-head .eyebrow{color:#a8a8a8}
/* DIGITAL EXPERIENCES: three actual viewport-based scroll-only prototypes */
.websites{position:relative;overflow:hidden;background:linear-gradient(140deg,#f0ede9,#dbd5cf 68%,#e8e4df);color:#171615;padding-bottom:clamp(65px,8vw,130px)}
.websites:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 42% 42% at 50% 58%,rgba(255,255,255,.75),transparent 80%);opacity:.8}
.websites>.section-identifier,.websites>.portfolio-head,.websites>.mac-stage,.websites>.website-foot{position:relative;z-index:1}
.mac-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.17fr) minmax(0,1fr);align-items:end;gap:clamp(5px,1.3vw,24px);margin-top:15px}
.mac-card{min-width:0;position:relative;display:flex;flex-direction:column;justify-content:end;padding:12px 0 0;transition:transform .4s ease;isolation:isolate}
.mac-card:hover{z-index:5;transform:translateY(-7px)}
.mac-card-lead{z-index:3;transform:translateY(-26px)}
.mac-card-lead:hover{transform:translateY(-35px)}
.mac-card-left{transform:perspective(1000px) rotateY(5deg)}
.mac-card-right{transform:perspective(1000px) rotateY(-5deg)}
.mac-card-left:hover,.mac-card-right:hover{transform:translateY(-8px)}
.mac-topline{font-size:8px;font-weight:700;letter-spacing:.2em;color:#67625c;text-align:center;padding-bottom:16px}
.mac-device{width:100%;margin:0 auto;filter:drop-shadow(0 26px 18px rgba(38,32,27,.19))}
.mac-lid{position:relative;padding:10px 10px 9px;background:linear-gradient(145deg,#3b3d3f,#08090b 20%,#121315 82%,#56565b);border:2px solid #3f4345;border-radius:13px 13px 4px 4px;box-shadow:inset 0 0 0 2px #050506}
.mac-screen{position:relative;aspect-ratio:1.52;overflow:hidden;background:#0f0e11;isolation:isolate;border-radius:2px}
.mac-screen iframe{display:block;border:0;width:1280px;height:840px;max-width:none;transform:scale(var(--mac-scale,.26));transform-origin:0 0;background:#161419;pointer-events:auto}
.mac-camera{position:absolute;z-index:3;top:4px;left:50%;transform:translateX(-50%);height:3px;width:3px;border-radius:50%;background:#61728b}
.mac-base{height:clamp(8px,1.2vw,16px);width:108%;margin-left:-4%;border-radius:2px 2px 48% 48%;background:linear-gradient(180deg,#a3a6a9 0%,#eaedef 29%,#c3c4c5 56%,#8b8c90 90%,#515358);position:relative;box-shadow:0 8px 13px rgba(0,0,0,.12)}
.mac-base:before{content:"";position:absolute;top:0;left:39%;right:39%;height:37%;border-radius:0 0 10px 10px;background:#8b8e91}
.mac-meta{display:flex;align-items:end;justify-content:space-between;gap:10px;min-height:85px;margin-top:26px;border-top:1px solid rgba(19,19,19,.28);padding:17px 0 3px}
.mac-meta small{font-size:8px;letter-spacing:.15em;font-weight:700;color:#77716a}
.mac-meta h3{font-size:clamp(15px,1.65vw,24px);letter-spacing:-.045em;line-height:1.15;margin:11px 0 0}
.mac-expand{border:1px solid #222;background:transparent;color:#161514;font-size:8px;letter-spacing:.12em;font-weight:700;padding:12px 13px;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}
.mac-expand:hover{background:#151515;color:#fff}
.website-foot,.film-foot,.gallery-footnote{display:flex;justify-content:space-between;gap:16px;font-size:9px;font-weight:700;letter-spacing:.16em}
.website-foot{border-top:1px solid rgba(0,0,0,.18);margin-top:55px;padding-top:24px;color:#655e57}
/* Moving filmstrip galleries. Separate category rows, fourth row for graphic design. */
.photo-section,.graphic-section{position:relative;background:#0d0d0e;color:#efefef;overflow:hidden}
.photo-section{padding-bottom:70px}
.graphic-section{background:#111112;padding-bottom:clamp(75px,8vw,120px)}
.photo-section:before,.graphic-section:before{content:"";position:absolute;pointer-events:none;inset:0;background:radial-gradient(ellipse 80% 32% at 55% 9%,rgba(126,122,115,.08),transparent 80%)}
.motion-row{position:relative;display:grid;grid-template-columns:clamp(175px,18vw,295px) minmax(0,1fr);align-items:stretch;min-height:350px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.055)}
.motion-row-label{display:flex;flex-direction:column;justify-content:center;gap:24px;align-items:start;padding:26px 14px 26px var(--gutter);background:linear-gradient(90deg,#0d0d0e 79%,rgba(13,13,14,.08));z-index:4}
.motion-row-label small{font-size:9px;color:#777;letter-spacing:.2em;font-weight:700}
.motion-row-label strong{font-size:clamp(18px,2vw,31px);font-weight:600;letter-spacing:-.045em;line-height:1.1;max-width:210px}
.motion-row-label span{font-size:9px;letter-spacing:.16em;font-weight:700;color:#c94f46}
.motion-marquee{overflow:hidden;position:relative;display:flex;align-items:center;min-width:0;min-height:342px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee-rtl var(--duration,65s) linear infinite}
.motion-marquee[data-direction="ltr"] .marquee-track{animation-name:marquee-ltr}
.marquee-group{display:flex;gap:13px;flex:none;padding-right:13px;align-items:center}
@keyframes marquee-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.motion-marquee:is(:hover,:focus-within) .marquee-track{animation-play-state:paused}
.gallery-tile{position:relative;flex:none;display:block;width:clamp(200px,19vw,285px);height:clamp(255px,25vw,346px);padding:0;border:0;outline-offset:2px;overflow:hidden;background:#292929;color:white;cursor:zoom-in}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.15,.65,.35,1),filter .35s ease;filter:saturate(.75) contrast(1.03)}
.gallery-tile:hover img,.gallery-tile:focus-visible img{transform:scale(1.06);filter:saturate(1)}
.gallery-tile[data-category="graphic"]{width:clamp(210px,19vw,295px);height:clamp(210px,19vw,295px)}
.gallery-tile[data-category="graphic"] img{object-fit:cover}
.viewfinder{position:absolute;inset:13px;opacity:0;transition:opacity .25s ease;pointer-events:none;background:linear-gradient(#fff,#fff) top left / 22px 1px no-repeat,linear-gradient(#fff,#fff) top left / 1px 22px no-repeat,linear-gradient(#fff,#fff) top right / 22px 1px no-repeat,linear-gradient(#fff,#fff) top right / 1px 22px no-repeat,linear-gradient(#fff,#fff) bottom left / 22px 1px no-repeat,linear-gradient(#fff,#fff) bottom left / 1px 22px no-repeat,linear-gradient(#fff,#fff) bottom right / 22px 1px no-repeat,linear-gradient(#fff,#fff) bottom right / 1px 22px no-repeat}
.viewfinder:after{content:'+';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:19px;font-weight:300;text-shadow:0 0 10px #000}
.gallery-tile:is(:hover,:focus-visible) .viewfinder{opacity:1}
.gallery-tile .image-index{position:absolute;bottom:12px;left:16px;font-size:9px;letter-spacing:.15em;font-weight:700;color:white;text-shadow:0 0 9px black;opacity:0;transition:opacity .25s ease}
.gallery-tile:is(:hover,:focus-visible) .image-index{opacity:1}
.graphic-section .motion-row{border-top-color:#444}
.gallery-footnote{border-top:1px solid rgba(255,255,255,.14);margin-top:25px;padding-top:24px;color:#999}
/* Ambient cinematic video for Motion section. */
.film-section{position:relative;isolation:isolate;color:#eee;background:#111;overflow:hidden}
.film-background{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#151515}
.film-background video{position:absolute;inset:-11%;width:122%;height:122%;object-fit:cover;filter:grayscale(1) blur(72px) brightness(.6) contrast(1.15);opacity:.5;transform:scale(1.02)}
.film-background:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,13,.84),rgba(12,12,13,.6) 42%,rgba(12,12,13,.9))}
.film-inner{padding-bottom:clamp(110px,12vw,180px)}
.film-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px 16px;margin-top:12px}
.film-card{border:0;padding:0;background:none;color:inherit;cursor:pointer;text-align:left;min-width:0}
.film-poster{display:block;aspect-ratio:1.65;position:relative;border:1px solid rgba(255,255,255,.13);overflow:hidden;border-radius:6px;background:#252525}
.film-poster img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25);transition:filter .3s,transform .5s}
.film-card:hover img,.film-card:focus-visible img{filter:none;transform:scale(1.05)}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:49px;height:49px;border:1px solid rgba(255,255,255,.8);border-radius:50%;color:#fff;font-size:17px;background:rgba(0,0,0,.25);backdrop-filter:blur(5px)}
.film-card:hover .film-play{background:#e34c44;border-color:#e34c44}
.film-caption{display:flex;gap:11px;align-items:start;margin:16px 0 0;min-height:50px}
.film-caption .film-red-line{width:18px;height:2px;background:var(--accent);flex:none;margin-top:7px}
.film-caption strong{font-size:13px;line-height:1.4;font-weight:500}
.film-foot{border-top:1px solid rgba(255,255,255,.22);padding-top:23px;margin-top:72px;color:#aaa}
/* Accessible interactive gallery, video and laptop detail viewers */
.media-dialog,.film-dialog,.mac-dialog{border:1px solid rgba(255,255,255,.18);padding:0;color:#f5f5f5;background:#111;margin:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 34px)}
.media-dialog::backdrop,.film-dialog::backdrop,.mac-dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(10px)}
.media-dialog{width:min(1080px,95vw);overflow:hidden;position:relative}
.viewer-close{position:absolute;right:14px;top:12px;z-index:5;background:#0d0d0d;border:1px solid #777;color:#fff;font-size:10px;font-weight:700;letter-spacing:.2em;cursor:pointer;padding:13px 17px}
.viewer-close span{font-size:18px;margin-left:16px}
.viewer-body{padding:42px 56px 25px;display:flex;flex-direction:column;align-items:center}
.viewer-body>img{display:block;max-width:100%;width:auto;max-height:calc(100dvh - 185px);object-fit:contain}
.viewer-caption{display:flex;justify-content:space-between;gap:25px;width:100%;margin-top:15px;color:#aaa;font-size:10px;letter-spacing:.1em}
.viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.5);color:#fff;background:rgba(0,0,0,.55);width:36px;height:58px;cursor:pointer}
.viewer-prev{left:4px}.viewer-next{right:4px}
.film-dialog{width:min(1140px,96vw);padding:60px 24px 22px}
.film-dialog video{display:block;width:100%;max-height:75vh;background:#000}
.film-dialog h3{margin:15px 0 0;font-size:16px;font-weight:500}
.mac-dialog{width:min(1200px,96vw);height:min(91dvh,910px);display:none;flex-direction:column;padding:17px;overflow:hidden;background:#1a1a1a}
.mac-dialog[open]{display:flex}
.mac-dialog-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;font-size:10px;font-weight:700;letter-spacing:.16em}
.mac-dialog-top button{background:transparent;border:1px solid #eee;color:#eee;padding:10px 15px;cursor:pointer;font-weight:700}
.mac-dialog-screen{flex:1;min-height:0;background:#111;overflow:hidden}
.mac-dialog-screen iframe{width:100%;height:100%;border:0;background:#fff}
.mac-dialog>p{font-size:9px;letter-spacing:.13em;color:#aaa;text-align:center;margin:13px 0 0}
/* Responsive layout keeps all four artwork disciplines clearly separated */
@media(max-width:1180px){.nav-subtitle{display:none}.desktop-nav{gap:14px}.portfolio-head h2{font-size:clamp(55px,7vw,91px)}.mac-stage{gap:8px}.mac-meta{align-items:start;flex-direction:column;gap:12px}.mac-card-lead{transform:translateY(-18px)}.mac-card-lead:hover{transform:translateY(-25px)}.mac-expand{padding:10px}}
@media(max-width:900px){.desktop-nav a{font-size:8px}.site-header{gap:12px}.mac-stage{grid-template-columns:repeat(3,minmax(0,1fr))}.mac-lid{padding:7px 7px 6px}.mac-meta h3{font-size:16px}.mac-topline{font-size:7px}.motion-row{grid-template-columns:170px minmax(0,1fr)}.film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-head{grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr);gap:24px}}
@media(max-width:720px){.site-header .desktop-nav,.site-header .nav-contact{display:none}.site-header .menu-toggle{display:flex;margin-left:auto}.portfolio-head{grid-template-columns:1fr;gap:20px;padding:65px 0 45px}.portfolio-head h2{font-size:clamp(54px,11vw,82px)}.portfolio-head>p{max-width:480px}.section-identifier{font-size:8px}.section-identifier span:last-child{max-width:45%;text-align:right}.websites{padding-bottom:75px}.mac-stage{display:flex;overflow-x:auto;overflow-y:hidden;align-items:end;gap:18px;padding:25px 10px 20px 2px;scroll-snap-type:x mandatory;scrollbar-color:#9e9690 transparent;scrollbar-width:thin}.mac-card,.mac-card-lead,.mac-card-left,.mac-card-right{flex:0 0 min(84vw,420px);transform:none!important;scroll-snap-align:center}.mac-card:hover{transform:translateY(-5px)!important}.mac-topline{font-size:8px}.mac-meta{flex-direction:row;align-items:center}.website-foot{margin-top:30px;font-size:8px}.website-foot span:last-child{display:none}.motion-row{display:block;padding-top:0;min-height:0}.motion-row-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:18px var(--gutter);background:#121212}.motion-row-label strong{font-size:17px}.motion-row-label small{font-size:8px}.motion-row-label>span{display:none}.motion-marquee{min-height:254px;padding:7px 0;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.gallery-tile{width:190px;height:245px}.gallery-tile[data-category="graphic"]{width:222px;height:222px}.graphic-section,.photo-section{padding-bottom:85px}.gallery-footnote span{display:none}.film-grid{gap:26px 13px}.film-caption strong{font-size:12px}.film-foot span{display:none}.viewer-body{padding:56px 30px 16px}.film-dialog{padding:60px 12px 14px}}
@media(max-width:420px){.portfolio-head h2{font-size:52px}.mac-card,.mac-card-lead,.mac-card-left,.mac-card-right{flex-basis:85vw}.motion-row-label{flex-wrap:wrap}.motion-row-label small{display:none}.film-grid{grid-template-columns:1fr 1fr}.film-caption strong{font-size:11px}.film-play{height:42px;width:42px}.viewer-body>img{max-height:calc(100dvh - 155px)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important}.motion-marquee{overflow-x:auto;mask-image:none}.film-background video{display:none}.mac-card,.film-poster img,.gallery-tile img{transition:none}}

/* Local screenshot as immediate visual; scrollable iframe takes over only when loaded. */
.mac-screen-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.mac-screen iframe{position:relative;z-index:2;opacity:0}
.mac-screen iframe.is-frame-ready{opacity:1}
.mac-dialog-screen{position:relative}
.mac-dialog-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:1}
.mac-dialog-screen iframe{position:relative;z-index:2;opacity:0}
.mac-dialog-screen iframe.is-frame-ready{opacity:1}

@media(max-width:720px){.mac-card-lead{order:-1}}

/* V5 / Unified Photography + Graphic Artwork; original marquee directions retained */
.photo-section{padding-bottom:clamp(80px,8vw,130px)}
.photo-section .motion-row-graphic{border-top:1px solid rgba(255,255,255,.17)}
.photo-section .gallery-footnote{padding-bottom:8px}
.motion-row-label>span{display:none!important}
.mac-screen iframe{overscroll-behavior:contain}
.mac-screen{cursor:ns-resize}
.mac-screen iframe,.mac-dialog-screen iframe{touch-action:auto}
/* An inviting scroll cue; keep interaction on native iframe */
@media (max-width:720px){.photo-section{padding-bottom:75px}}