/* Cory Wright visual portfolio frontend. Changes here are isolated to the public homepage. */
:root{--accent:#f5af9b;--accent-text:#20191a}
html,body{overscroll-behavior:none}
body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#f6f5f4}
.hidden,[hidden]{display:none!important}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:300;background:white;color:#111;padding:12px}
.topbar{height:81px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;column-gap:14px;padding:15px clamp(20px,3vw,50px) 0;background:linear-gradient(to bottom,rgba(8,9,12,.96),rgba(8,9,12,.20) 86%,transparent)}
.brand{justify-self:start;display:flex;align-items:flex-start;min-width:0;text-align:left;background:none;border:0;color:#f5f2ed;padding:1px 0}
.brand-type{display:flex;flex-direction:column;gap:7px;min-width:0;align-items:flex-start}
.brand-word{font-size:clamp(24px,2.65vw,32px);line-height:.93;letter-spacing:-1.7px;font-weight:840;white-space:nowrap}
.brand-period{color:var(--accent)}
.brand-tagline{font-size:10px;color:#aaa8b1;letter-spacing:0;font-weight:530;white-space:nowrap}
.nav-tabs{display:flex;justify-self:center;align-items:center;gap:3px;margin:1px 0 0;padding:4px;border:1px solid rgba(255,255,255,.16);background:#202126d9;border-radius:100px;backdrop-filter:blur(17px)}
.nav-tab{width:42px;height:39px;display:grid;place-items:center;padding:0;border-radius:50%;color:#bbb9c1}
.nav-tab svg{width:19px;height:19px;stroke-width:1.9}
.nav-tab.active{color:#25212a;background:#f5f2ec}
.nav-tab:hover:not(.active){background:#ffffff20;color:#fff}
.header-actions{justify-self:end;display:flex;align-items:center;gap:12px;margin-top:3px}
.contact-header{color:#fff;text-decoration:none;border:1px solid #ffffff37;border-radius:99px;padding:10px 16px;background:#ffffff10;font-size:11px;font-weight:700}
.contact-header:hover{background:#ffffff2d}
.icon-btn.search-trigger{width:38px;height:38px}
.context-bar{top:91px;justify-content:flex-end;left:clamp(14px,3vw,45px);right:clamp(14px,3vw,45px)}
.category-strip{display:flex;justify-content:flex-end;max-width:min(950px,100%);overflow:auto;scrollbar-width:none;gap:7px;pointer-events:auto}
.category-strip::-webkit-scrollbar{display:none}
.category{white-space:nowrap}
.viewport{touch-action:none;cursor:grab}
.viewport:active{cursor:grabbing}
.world{transform-origin:0 0;will-change:transform}
.post-tile{overflow:hidden;cursor:pointer;touch-action:none;outline:1px solid rgba(255,255,255,.12);box-shadow:0 12px 36px #0007;transition:filter .22s,box-shadow .22s,outline-color .22s;contain:layout paint style}
.post-tile:hover,.post-tile:focus-visible{outline:2px solid rgba(255,255,255,.78);box-shadow:0 16px 52px #0009;filter:brightness(1.06)}
.post-tile:focus-visible{outline-offset:4px}
.tile-media{width:100%;height:100%;object-fit:cover}
.tile-footer{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;min-height:105px;padding:25px 15px 16px;background:linear-gradient(0deg,rgba(8,8,12,.87),transparent);color:white}
.tile-text{min-width:0}.tile-title{font-size:clamp(12px,1.5vw,21px);font-weight:800;line-height:1.08;letter-spacing:-.45px;text-shadow:0 1px 7px #0008}
.tile-creator{margin-top:7px;color:#eee;font-weight:600;font-size:11px;letter-spacing:.1px}
.tile-featured{display:inline-block;margin-left:9px;border-radius:99px;background:#ffffff2a;backdrop-filter:blur(8px);padding:6px 8px;color:#fff;font-size:8px;font-weight:800;letter-spacing:.7px}
.canvas-credit{bottom:max(29px,env(safe-area-inset-bottom));left:clamp(20px,3vw,50px);right:auto;pointer-events:none;color:#ffffff7c;font-size:9px;letter-spacing:1.3px}
.canvas-tools{z-index:12}
.empty-state{background:#1c1d22d9;border:1px solid #ffffff1f;backdrop-filter:blur(20px);border-radius:18px;padding:35px;text-align:center;color:white}
.empty-state h2{margin:0 0 10px}.empty-state p{color:#bdbbc4}.secondary-action{background:#eee;color:#222;border:0;border-radius:99px;padding:11px 17px}
.overlay:has(.post-modal){padding:0;background:#080809;backdrop-filter:none}
.post-modal{position:relative;display:block;grid-template-columns:none;grid-template-rows:none;width:100vw;height:100dvh;max-height:none;border:0;border-radius:0;overflow:hidden;background:#090a0c;touch-action:pan-x pan-y}
.post-media-area{position:absolute;inset:0;height:100%;width:100%;display:block;overflow:hidden;background:#090a0c;touch-action:pan-x pan-y}
.post-media{width:100%;height:100%;min-height:0;position:relative;overflow:hidden}
.post-media>.media-stage{position:absolute;inset:0;display:grid;place-items:center;background:#141318;overflow:hidden}
.media-backdrop{position:absolute;inset:-10%;background-repeat:no-repeat;background-position:center;background-size:cover;filter:blur(45px) brightness(.30);opacity:.80;transform:scale(1.06)}
.media-stage-inner{position:relative;overflow:visible;isolation:isolate;flex:none;touch-action:pan-x pan-y;box-shadow:0 2px 40px #0008;--split:50%}
.stage-image,.compare-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-select:none}
.stage-image{z-index:1}
.compare-before{position:absolute;inset:0;z-index:2;clip-path:inset(0 calc(100% - var(--split)) 0 0);pointer-events:none}
.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);transform:translateX(-50%);border:0;background:transparent;color:white;z-index:6;width:40px;display:grid;place-items:center;touch-action:none;cursor:ew-resize;padding:0}
.compare-divider:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 8px #0006}
.compare-handle{position:relative;display:grid;place-items:center;border-radius:50%;background:#f5f2f0;color:#28232d;width:42px;height:42px;box-shadow:0 4px 19px #0008;font-weight:800;font-size:16px;white-space:pre}
.compare-label{position:absolute;top:18px;z-index:4;background:#15121cbd;color:#fff;padding:7px 11px;border-radius:100px;font-size:9px;letter-spacing:1px;pointer-events:none}
.before-label{left:16px}.after-label{right:16px}
.hotspot-point{position:absolute;z-index:8;transform:translate(-50%,-50%);width:29px;height:29px;padding:0;border:2.5px solid #fff;outline:3px solid #9876df;border-radius:50%;background:#6d4bb761;box-shadow:0 0 0 6px #9a79f943,0 2px 14px #000d;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;transition:opacity .13s,transform .13s}
.hotspot-point>span{display:block;width:7px;height:7px;border-radius:50%;background:white}
.hotspot-point:hover,.hotspot-point:focus-visible{transform:translate(-50%,-50%) scale(1.15);background:#9b74e7a9}
.hotspot-point.hotspot-occluded{opacity:0;pointer-events:none}
.post-media .main-video,.post-media .main-frame{position:relative;width:min(100vw,calc(100dvh * 1.77778));height:min(100dvh,calc(100vw / 1.77778));max-width:100%;max-height:100%;object-fit:contain;background:#000;border:0;justify-self:center;align-self:center;box-shadow:0 8px 45px #000b}
.post-modal .modal-close{position:absolute;top:max(18px,env(safe-area-inset-top));left:clamp(16px,3vw,40px);z-index:20;width:46px;height:46px;border-radius:50%;background:#0b0c12a3;border:1px solid #ffffff30;backdrop-filter:blur(15px)}
.media-caption{position:absolute;top:max(30px,env(safe-area-inset-top));left:50%;right:auto;bottom:auto;clip:auto;overflow:visible;white-space:nowrap;transform:translateX(-50%);width:auto;height:auto;z-index:10;background:#16171cbc;border:1px solid #ffffff28;backdrop-filter:blur(11px);padding:9px 13px;border-radius:25px;font-size:10px;font-weight:700;letter-spacing:.2px;color:#fff;text-shadow:none;max-width:50vw;text-overflow:ellipsis;overflow:hidden;pointer-events:none}
.media-next{position:absolute;top:50%;right:clamp(12px,2vw,32px);z-index:11;transform:translateY(-50%);display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:#10101591;border:1px solid #ffffff41;color:#fff;backdrop-filter:blur(10px)}
.media-previous{right:auto;left:clamp(12px,2vw,32px)}
.media-next:hover{background:#ffffff2c}.media-next svg{width:21px;height:21px}
.post-sidebar{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;overflow:visible;isolation:isolate;background:transparent;pointer-events:none;touch-action:none}
.post-sidebar:before{content:"";position:absolute;left:0;right:0;bottom:0;height:min(62%,550px);pointer-events:none;background:linear-gradient(0deg,#000e,#000b 32%,#0003 75%,transparent)}
.post-copy{position:relative;z-index:2;max-width:900px;width:100%;margin:0 auto;padding:0 27px 13px;pointer-events:none;text-shadow:0 2px 17px #000b}
.post-copy h2{font-size:clamp(25px,3.6vw,42px);font-weight:850;letter-spacing:-1px;margin:0 0 9px;line-height:1.08;color:#fff}
.post-copy p{font-size:clamp(13px,1.3vw,15px);line-height:1.5;max-width:750px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0;color:#f2f0f0}
.post-tags{display:none}
.post-actions{position:relative;z-index:3;display:flex;width:min(900px,100%);align-items:center;justify-content:space-between;gap:18px;margin:0 auto;padding:0 27px max(28px,env(safe-area-inset-bottom));pointer-events:none}
.post-author{min-width:0;display:flex;align-items:center;flex:1;pointer-events:none}
.creator-entry{display:flex;gap:11px;min-width:0;align-items:center;color:white;text-align:left;pointer-events:none}
.creator-avatar{flex:none;width:46px;height:46px;display:grid;place-items:center;color:white;font-weight:800;border-radius:50%;border:2px solid #fffd;background:linear-gradient(135deg,#a27ed2,#775a99);box-shadow:0 3px 15px #0008}
.creator-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.creator-info strong{color:#fff;font-size:14px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creator-info span{font-size:11px;color:#ddd;max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.engagement-bar{flex:none;display:flex;gap:17px;align-items:center;pointer-events:none}
.engagement{min-width:44px;min-height:47px;color:white;display:grid;place-items:center;pointer-events:auto;padding:0;transition:color .15s,transform .15s;text-shadow:0 3px 10px #0007}
.engagement:hover{transform:translateY(-2px);color:#ffbcae}
.engagement>span[data-icon]{display:grid;place-items:center}
.engagement span[data-icon] svg{width:33px;height:33px;filter:drop-shadow(0 2px 6px #000a)}
.engagement.liked,.engagement.saved{color:#ffb6a1}
.conversation-panel{position:absolute;top:auto;bottom:0;left:0;right:0;z-index:15;height:min(66dvh,690px);display:flex;flex-direction:column;pointer-events:auto;background:#1b1c24ce;border-top:1px solid #ffffff4a;border-radius:23px 23px 0 0;box-shadow:0 -16px 75px #000a;backdrop-filter:blur(29px) saturate(130%);-webkit-backdrop-filter:blur(29px) saturate(130%)}
.conversation-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex:none;padding:22px max(25px,calc((100% - 830px)/2)) 17px;border-bottom:1px solid #ffffff20}
.conversation-panel-heading h3{font-size:20px;font-weight:800;margin:0 0 7px}
.conversation-panel-heading p{font-size:12px;color:#bbb;margin:0}
.conversation-close{display:grid;place-items:center;flex:none;border:1px solid #ffffff4a;border-radius:50%;width:36px;height:36px;background:#ffffff23;color:white}
.conversation-close svg{width:19px;height:19px}
.conversation-comments{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px max(25px,calc((100% - 830px)/2)) 22px}
.story-intro{font-size:12px;color:#dbd8de;padding-bottom:15px;border-bottom:1px solid #ffffff24}
.story-section{margin:18px 0 24px}.story-section h4{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:#ffbda8;margin:0 0 10px}.story-section p{font-size:14px;line-height:1.8;margin:0;color:#f0eef3;white-space:pre-line;overflow-wrap:anywhere}
.story-footer{flex:none;border-top:1px solid #ffffff24;padding:14px max(25px,calc((100% - 830px)/2)) max(18px,env(safe-area-inset-bottom))}
.story-footer a{display:inline-flex;align-items:center;gap:10px;color:white;font-size:13px;font-weight:750;text-decoration:none}
.story-footer a:hover{text-decoration:underline}.story-footer svg{width:18px;height:18px}
.conversation-open .post-copy,.conversation-open .post-actions{visibility:hidden}
.hotspot-detail{position:absolute;top:max(78px,env(safe-area-inset-top) + 70px);right:clamp(18px,4vw,50px);z-index:21;width:min(365px,calc(100vw - 36px));max-height:min(60dvh,570px);overflow:auto;padding:19px;border:1px solid #ffffff61;border-radius:18px;background:#1a1c26dd;box-shadow:0 15px 50px #000c;backdrop-filter:blur(25px) saturate(135%);-webkit-backdrop-filter:blur(25px) saturate(135%);touch-action:pan-y;color:white}
.hotspot-detail h3{margin:4px 38px 8px 0;font-size:20px;line-height:1.2;letter-spacing:-.5px}
.hotspot-detail p{font-size:13px;line-height:1.6;white-space:pre-wrap;color:#e8e6ea;margin:0 0 5px;overflow-wrap:anywhere}
.hotspot-close{position:absolute;top:12px;right:12px;border:1px solid #ffffff40;border-radius:100%;width:32px;height:32px;display:grid;place-items:center;color:white;background:#ffffff23}
.hotspot-close svg{width:17px;height:17px}
#hotspotIllustration img{display:block;width:100%;max-height:190px;object-fit:contain;margin:0 0 15px;background:#15141a;border-radius:7px}
.hotspot-gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.hotspot-gallery-controls button{border:1px solid #ffffff4b;background:#ffffff20;color:white;border-radius:50%;width:34px;height:34px;font-size:22px}
.hotspot-gallery-controls span{font-size:12px;color:#ccc}
.about-panel{position:relative;width:min(620px,calc(100vw - 34px));max-height:calc(100dvh - 36px);overflow:auto;padding:clamp(26px,5vw,50px);background:#1b1c22e7;border:1px solid #ffffff32;border-radius:22px;box-shadow:0 26px 80px #000b;backdrop-filter:blur(25px)}
.about-close{position:absolute;right:18px;top:18px;background:#ffffff23;border:1px solid #ffffff20;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;color:white}
.about-close svg{width:20px;height:20px}
.about-panel .eyebrow{color:#ffb7a4;font-size:10px;font-weight:750;letter-spacing:1.3px}
.about-panel h2{font-size:clamp(42px,7vw,68px);letter-spacing:-3px;line-height:1.1;margin:20px 0}.about-panel h2 span{color:#ffa992}
.about-panel p{font-size:15px;line-height:1.7;color:#d1ced7;margin:0 0 18px}
.about-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.about-links a{border:1px solid #ffffff44;border-radius:100px;padding:12px 16px;color:white;text-decoration:none;font-size:12px;font-weight:740;display:inline-flex;align-items:center;gap:9px}
.about-links svg{width:16px;height:16px}
.about-links a:hover{background:#ffffff22}
.search-overlay{z-index:101}
.nojs{position:fixed;inset:0;z-index:200;padding:20px;overflow:auto;background:#151517;color:white}
.nojs a{color:#ffb6a1}
@media(max-width:940px){
 .topbar{padding-left:17px;padding-right:17px;column-gap:9px}
 .nav-tab{width:38px;height:37px}.context-bar{top:88px}
 .category-strip{max-width:100%}
}
@media(max-width:680px){
 .topbar{height:74px;grid-template-columns:minmax(0,1fr) auto auto;padding:15px 12px 0;column-gap:7px}
 .brand-word{font-size:24px;letter-spacing:-1.2px}
 .brand-tagline{font-size:8px;letter-spacing:-.1px}
 .brand-type{gap:6px}
 .nav-tabs{gap:0;padding:3px;margin-top:0}
 .nav-tab{width:33px;height:33px}.nav-tab svg{width:18px;height:18px}
 .header-actions{margin-top:1px;gap:3px}
 .header-actions .search-trigger{width:34px;height:34px}
 .contact-header{display:none}
 .context-bar{top:78px;left:12px;right:12px}
 .category-strip{justify-content:flex-start;width:100%}
 .category{padding:7px 11px;font-size:10px}
 .canvas-credit{font-size:8px;max-width:55%;line-height:1.5;letter-spacing:.6px;bottom:24px;left:16px}
 .canvas-tools{right:12px;bottom:max(14px,env(safe-area-inset-bottom))}
 .post-modal{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0}
 .modal-close{left:14px!important;top:max(13px,env(safe-area-inset-top))!important;width:40px!important;height:40px!important}
 .media-caption{top:max(24px,env(safe-area-inset-top));max-width:55vw;font-size:9px;padding:8px 10px}
 .media-next{width:38px;height:38px;right:8px}.media-previous{left:8px}.media-next svg{width:17px;height:17px}
 .post-sidebar:before{height:59%}
 .post-copy{padding:0 19px 12px}.post-copy h2{font-size:clamp(23px,6vw,30px);margin:0 0 6px}.post-copy p{font-size:12px;line-height:1.45;-webkit-line-clamp:2}
 .post-actions{padding:0 18px max(24px,env(safe-area-inset-bottom));gap:8px}
 .creator-avatar{width:38px;height:38px;font-size:13px}
 .creator-entry{gap:8px}.creator-info strong{font-size:12px;max-width:29vw}.creator-info span{font-size:10px;max-width:29vw}
 .engagement-bar{gap:7px}.engagement{min-width:33px;min-height:41px}
 .engagement span[data-icon] svg{width:28px;height:28px}
 .conversation-panel{height:68dvh;border-radius:19px 19px 0 0}
 .conversation-panel-header{padding:20px 19px 14px}
 .conversation-comments{padding:18px 20px 10px}
 .story-footer{padding:13px 20px max(18px,env(safe-area-inset-bottom))}
 .hotspot-detail{top:max(70px,env(safe-area-inset-top) + 53px);right:12px;max-height:54dvh;padding:15px;width:min(330px,calc(100vw - 24px))}
 .hotspot-point{width:23px;height:23px;outline-width:2px;border-width:2px;box-shadow:0 0 0 4px #9a79f943,0 2px 13px #0009}
 .compare-handle{width:37px;height:37px}
}
@media(max-width:380px){.brand-word{font-size:21px}.brand-tagline{font-size:7px}.nav-tab{width:30px;height:31px}.engagement{min-width:30px}.engagement-bar{gap:4px}.post-actions{padding-left:13px;padding-right:13px}.media-caption{max-width:52vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Restore the original zoom-dependent tile labels: quiet grid below 90%. */
.world .post-tile .tile-footer {
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  left:0;
  right:0;
  bottom:0;
  min-height:105px;
  /* No dark gradient: custom portfolio thumbnails show their true colors. */
  background:none;
}
.world.detailed .post-tile .tile-footer {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .22s ease,transform .22s ease,visibility 0s;
}
/* The legacy tile-wide pseudo-overlay darkened both the top and bottom. */
.world .post-tile::after { content:none; display:none; }
/* Don't vignette the edges of custom thumbnails in the full canvas. */
.viewport .canvas-vignette { box-shadow:none; }
/* Prevent the hover-only label reveal at low zoom inherited from v2.91. */
.world:not(.detailed) .post-tile:hover .tile-footer { opacity:0; visibility:hidden; transform:translateY(5px); }
.post-modal,.post-media-area,.media-stage-inner{touch-action:none}

/* LiteCMS v2.92: Zoomable infinite project canvas */
.world{overflow:visible;contain:layout style}
#detailsButton svg{stroke-width:2.15}

/* v2.95: Keep LiteCMS original 1:1 thumbnails, no gutters or rounded corners. */
.world .post-tile {
 border:0;
 border-radius:0;
 outline:0;
 box-shadow:none;
 margin:0;
 padding:0;
 background:#1b1c20;
 transition:filter .22s;
}
.world .post-tile:hover {
 border:0;
 outline:0;
 box-shadow:none;
}
.world .post-tile:focus-visible {
 outline:2px solid #fff;
 outline-offset:-2px;
 border-radius:0;
 box-shadow:none;
}
.world .post-tile .tile-media {border-radius:0;}

/* v2.96 desktop canvas performance: keep the artwork static on hover.
   No filter/scale/composite churn while the user drags over thumbnails. */
.world .post-tile{contain:layout paint style;isolation:auto;transition:none;filter:none!important}
.world .post-tile:hover{filter:none!important;box-shadow:none!important}
.world .post-tile .tile-media,.world .post-tile:hover .tile-media{transform:none!important;transition:none!important;filter:none!important}
.world .post-tile:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* LiteCMS v2.97: header testimonial trigger matches the visual portfolio. */
.header-actions .popout-trigger{width:38px;height:38px;display:grid;place-items:center;color:#f7f3f5;background:#ffffff0c;border:1px solid #ffffff29;border-radius:50%;padding:7px;cursor:pointer}
.header-actions .popout-trigger:hover,.header-actions .popout-trigger:focus-visible{background:#ffffff26;color:white}
.header-actions .popout-trigger svg{width:20px;height:20px;stroke-width:1.9}
@media(max-width:680px){.header-actions .popout-trigger{width:32px;height:34px;padding:6px}.header-actions .popout-trigger svg{width:18px;height:18px}}