/* Version 2 only. The original stylesheet and every case study stay intact. */
/* Use the existing monochrome arrow glyphs instead of a phone's emoji font. */
@font-face{font-family:'V2 Text Arrows';src:url('assets/fonts/original-tools/fragment-mono-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:block;unicode-range:U+2196-2199}
.version-two :is(.hero-browse>span[aria-hidden=true],.contact-pill>span[aria-hidden=true],.panel-arrow,.panel-bottom>span:last-child,.hover-preview>span,.modal-foot a){font-family:'V2 Text Arrows',var(--font)}
.version-two .reel-window{overflow:visible;transform:none;padding:0}
.v2-curved{height:430px;position:relative;overflow:hidden;width:100%}
.v2-curved .relative{position:relative}
.v2-curved .absolute{position:absolute}
.v2-curved .inset-0{inset:0}
.v2-curved .overflow-hidden{overflow:hidden}
.v2-curved .pointer-events-none{pointer-events:none}
.v2-curved .top-0{top:0}
.v2-curved .max-w-none{max-width:none}
.v2-curved .object-cover{object-fit:cover}
.v2-curved .bg-muted{background:#171512}
.v2-curved .rounded-l-lg{border-radius:12px 0 0 12px}
.v2-curved .rounded-r-lg{border-radius:0 12px 12px 0}
.motion-paused .v2-curved [class*="tgh-t-"]{animation-play-state:paused!important}
.v2-static-reel{display:flex;gap:24px;overflow:hidden;padding:30px var(--gutter)}
.v2-static-reel img{width:38%;height:260px;flex-shrink:0;object-fit:cover;border-radius:8px}
.v2-reel-links{display:flex;gap:0;margin:0 var(--gutter);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v2-reel-links button{display:flex;align-items:center;gap:16px;flex:1;padding:20px 18px;min-height:64px;font-size:16px;text-align:left;transition:background .2s}
.v2-reel-links button+button{border-left:1px solid var(--line)}
.v2-reel-links button:hover{background:#ffffff0c}
.v2-reel-links button>span:last-child{margin-left:auto;color:#ff7b36;font-size:22px}
.v2-link-number{font-size:12px;color:#b7aaa0;font-variant-numeric:tabular-nums}
.v2-folders-ready .showcase{display:none}
.v2-folders-ready #compact-list{display:none}
.version-two .work-section{background:#fff;color:#252525;color-scheme:light;position:relative;border-top:1px solid #e5e7eb}
.version-two .work-section>.section-eyebrow{color:#b84612}
.version-two .work-section>.section-h{max-width:850px;margin:0 auto 64px;color:#252525}
.v2-featured-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:72px 48px;margin-bottom:72px}
.v2-project-card{grid-column:span 2;min-width:0;display:flex;flex-direction:column;position:relative;isolation:isolate;padding:0 12px;background:none;border:0;border-radius:0}
.v2-project-card:nth-child(-n+2){grid-column:span 3}
.v2-project-card:focus-within,.v2-project-card:hover{background:none}
.v2-project-card.folder-open{z-index:2}
.v2-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;position:relative;z-index:3;pointer-events:none}
.v2-card-top>span:first-child{font-size:24px;letter-spacing:-.06em;line-height:1;color:#b84612;font-variant-numeric:tabular-nums}
.v2-card-top>span:last-child{max-width:220px;text-align:right;font-size:12px;line-height:1.6;color:#555b62;text-wrap:balance}
.v2-folder-stage{display:flex;justify-content:center;align-items:center;min-width:0;padding:60px 0 4px;margin:0 -8px}
.v2-card-copy{margin:12px 0 24px}
.v2-card-copy h3{font-size:32px;letter-spacing:-.04em;line-height:1.1;margin-bottom:18px}
.v2-card-copy p{font-size:15px;line-height:1.65;color:#555b62}
.v2-card-copy p em{color:#252525}
.v2-case-link{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin-top:auto;padding:18px 0 0;border-top:1px solid #dce0e5;min-height:52px;font-size:14px;text-align:left}
.v2-case-link .v2-project-arrow{font-family:'V2 Text Arrows','V2 Original Manrope',var(--font);font-size:inherit;font-weight:600;color:inherit}
.v2-featured-grid .gf-root{font-family:var(--font)}
.v2-featured-grid .gf-root[data-tone=dark]{--gf-ink:#fff;--gf-muted:#c7c0ba}
.v2-featured-grid .gf-back{background:#522b17}
.v2-featured-grid .gf-meta{opacity:1;color:#37312d}
.v2-featured-grid .gf-sheet-meta{opacity:1}
:is(.v2-featured-grid,.v1-other-grid) .gf-sheet:focus-visible{outline:3px solid #b84612;outline-offset:5px}
.work-section .gf-front:has(.gf-hit:focus-visible) .gf-front-rim path{stroke:#b84612}
.work-section .v2-case-link:focus-visible{outline:3px solid #b84612;outline-offset:4px}
/* Version 2: nearly white glass with a faint cool tint and subtle edges. */
.work-section .gf-back{background:linear-gradient(160deg,#f6f7f8,#e0e4e8)}
.work-section .gf-tint{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(246,248,250,.68) 42%,rgba(235,239,243,.96))}
.work-section .gf-back-rim path{stroke:rgba(79,88,101,.24);stroke-width:1.5}
.work-section .gf-front-rim path{stroke:rgba(79,88,101,.28)}
.work-section .gf-shadow{background:rgba(41,49,60,.16);filter:blur(18px)}
/* Fit original screenshots below the folder tab, and fully inside each file. */
.v2-featured-grid img.gf-art{left:12px;top:44px;width:316px;height:216px;object-fit:contain;object-position:center top;transform:none}
.v2-featured-grid img.gf-sheet-art{object-fit:contain;object-position:center}
:is(.v2-featured-grid,.v1-other-grid) .gf-label{max-width:280px;right:28px}
:is(.v2-featured-grid,.v1-other-grid) .gf-title{white-space:normal;overflow:visible;text-overflow:clip}
:is(.v2-featured-grid,.v1-other-grid) .gf-sheet-head{align-items:flex-start;white-space:normal}
:is(.v2-featured-grid,.v1-other-grid) .gf-sheet-name{flex:1;min-width:0;overflow:visible;overflow-wrap:anywhere}
:is(.v2-featured-grid,.v1-other-grid) .gf-sheet-meta{max-width:48%;white-space:normal;overflow-wrap:anywhere;text-align:right}
.version-two .compact-row{border-color:#49382d;color:#f5f4f0}
.version-two .compact-row:hover,.version-two .compact-row:focus-visible{background:#ff7b3612}
.version-two .compact-row .num{color:#ff9152}
.version-two .compact-row .cat{color:#c5b9b0}
.version-two .compact-row .arr{color:#ff9152}
.version-two .compact .col-head{color:#c5b9b0;border-color:#49382d}
.version-two #tooltip{background:#f5f4f0;color:#17120f}
.v2-component-error{padding:24px var(--gutter);color:#f5f4f0}
.version-two .case-study{position:fixed;inset:0 0 0 auto;margin:0;width:min(900px,88vw);height:100svh;max-width:100vw;max-height:100svh;border:0;border-left:1px solid #ffffff20;border-radius:0;background:#121110;color:#f5f4f0;box-shadow:-30px 0 100px #0005;scrollbar-color:#746253 #121110;scroll-padding-block:90px 110px;overscroll-behavior:contain}
.version-two .case-study[open]{animation:v2-case-enter .45s cubic-bezier(.22,1,.36,1)}
.version-two .case-study::backdrop{background:#080604a6;backdrop-filter:blur(6px)}
.version-two .modal-head{padding:112px 7% 44px;background:radial-gradient(ellipse at 100% 0,#8b3b122b,transparent 70%);color:#f5f4f0;border-bottom:1px solid #ffffff20}
.version-two .modal-num{margin-bottom:32px;padding-right:0;color:#ff9152;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.version-two .modal-close{position:fixed;right:24px;top:24px;width:48px;height:48px;background:#24211f;color:#f5f4f0;border:1px solid #ffffff35;border-radius:50%;z-index:5}
.version-two .modal-close:hover{background:#423127}
.version-two .modal-close:focus-visible{outline:3px solid #ff9152;outline-offset:4px}
.version-two .modal-head h2{font-size:clamp(42px,4.7vw,76px);letter-spacing:-.055em;line-height:1.02;max-width:850px;margin-bottom:28px;padding-right:0;color:#f5f4f0;text-wrap:balance}
.version-two .modal-head p{max-width:65ch;font-size:20px;line-height:1.55;color:#bcb6b0}
.version-two .modal-tags{gap:8px;margin-top:28px}
.version-two .modal-tags span{border:0;border-radius:0;background:none;font-size:11px;color:#bcb6b0;padding:0 14px 0 0}
.version-two .modal-body{padding:18px 7% 48px;font-size:17px;line-height:1.8;color:#c9c2bc}
.version-two .modal-body h4{font-size:18px;font-weight:500;color:#ffa66e;margin:34px 0 16px;padding-top:26px;border-top:1px solid #5e4230;letter-spacing:-.015em}
.version-two .modal-body strong,.version-two .modal-body b{color:#fff7ef}
.version-two .modal-body li::marker{color:#ffa66e}
.version-two .modal-body .stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.version-two .modal-body .stat-grid>div{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:20px 0;border:0;border-top:1px solid #ffffff25;border-radius:0;background:none}
.version-two .modal-body .stat-grid .num{font-size:34px;color:#ffae76}
.version-two .modal-body video{border:1px solid #7a5237;border-radius:8px}
.version-two .modal-foot{position:sticky;bottom:0;padding:20px 7%;gap:12px;border-top:1px solid #ffffff25;background:#121110f5;backdrop-filter:blur(16px)}
.version-two .modal-foot a{background:#ffac76;color:#221307;border-radius:100px;padding:14px 22px;font-size:14px;font-weight:500;min-height:48px}
.version-two .modal-foot a.alt{background:transparent;color:#f5f4f0;border:1px solid #ffffff45}
.version-two .modal-foot a:hover{background:#fff5ea;color:#221307}
@keyframes v2-case-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:760px){
  .version-two .case-study{width:100vw;max-height:100svh;border-radius:0}
  .version-two .modal-head{padding:100px 24px 28px}
  .version-two .modal-num{font-size:10px;margin-bottom:24px;min-height:30px}
  .version-two .modal-close{right:14px;top:16px;width:44px;height:44px}
  .version-two .modal-head h2{font-size:36px;padding-right:0;margin-bottom:22px}
  .version-two .modal-head p{font-size:16px}
  .version-two .modal-tags{gap:6px;margin-top:22px}
  .version-two .modal-tags span{font-size:10px}
  .version-two .modal-body{padding:8px 24px 28px;font-size:15px;line-height:1.65}
  .version-two .modal-body h4{font-size:17px}
  .version-two .modal-body .stat-grid{grid-template-columns:1fr}
  .version-two .modal-foot{padding:16px 24px;gap:8px}
  .version-two .modal-foot a{font-size:12px;min-height:44px;padding:12px 16px}
}
.version-two .cinematic-hero{max-height:none;min-height:680px;height:100svh;background:#0b0a09;overflow:hidden}
.cinematic-intro{position:relative;width:100%;height:100%;isolation:isolate;perspective:1500px;background:radial-gradient(ellipse at 50% 100%,#69331b33,transparent 65%),#0b0a09}
.cinematic-grid{position:absolute;inset:0;background-size:80px 80px;background-image:linear-gradient(to right,#ffffff06 1px,transparent 1px),linear-gradient(to bottom,#ffffff06 1px,transparent 1px);mask-image:radial-gradient(ellipse at center,#000,transparent 70%);pointer-events:none}
.cinematic-hero .cinematic-name{max-width:650px;font-family:var(--font);letter-spacing:-.06em;line-height:.93;font-size:clamp(86px,9.4vw,150px);font-weight:400;text-align:left}
.cinematic-name>span{display:block;transform-origin:center}
.cinematic-first{color:#f5f4f0;text-shadow:0 12px 30px #ffffff0c}
.cinematic-last{padding-bottom:.08em;color:#f5f4f0}
.cinematic-photo-card{position:absolute;z-index:1;inset:0;overflow:hidden;background:linear-gradient(126deg,#c34a08 0%,#b52c00 48%,#c94104 100%)}
.cinematic-image-reveal{position:absolute;inset:0;--portrait-reveal:125%;mask-image:linear-gradient(to top left,#000 var(--portrait-reveal),transparent calc(var(--portrait-reveal) + 25%))}
.cinematic-intro:not(.cinematic-static) .cinematic-image-reveal{--portrait-reveal:-40%;opacity:0}
.cinematic-intro:not(.cinematic-static) .cinematic-card-copy>h1,.cinematic-intro:not(.cinematic-static) .cinematic-card-copy>p{visibility:hidden}
.cinematic-hero .cinematic-copy-char{color:inherit}
.cinematic-photo-card .hero-portrait{inset:0 0 0 30%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 30%);background:linear-gradient(150deg,#fa720c,#bf2100 75%);background-blend-mode:normal;filter:none;opacity:.96;will-change:auto;isolation:isolate}
.cinematic-photo-card .hero-portrait img{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:center 34%;mix-blend-mode:multiply;transform-origin:50% 25%}
/* Reuse the original pixels: blend natural color across the entire portrait over the warm edge layer.
   The soft mask follows the photo's square framing and scales with object-fit. */
.cinematic-photo-card .hero-portrait .portrait-natural{mix-blend-mode:normal;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1254' height='1254' viewBox='0 0 1254 1254'%3E%3Cdefs%3E%3ClinearGradient id='balance' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='white' stop-opacity='.60'/%3E%3Cstop offset='55%25' stop-color='white' stop-opacity='.94'/%3E%3Cstop offset='100%25' stop-color='white' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cfilter id='soft' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='url(%23balance)' filter='url(%23soft)' d='M627 130 C570 130 550 140 525 165 C465 190 430 235 412 275 C390 305 395 370 425 440 L438 480 L438 550 C460 600 485 650 495 700 L492 760 L480 785 L462 810 L450 840 C430 865 350 890 190 975 L60 1170 V1254 H1190 L1160 1110 L1050 985 C930 900 800 850 795 840 L787 810 L772 785 L760 760 L752 700 C775 650 800 600 812 550 L815 500 C835 455 860 400 865 335 C865 285 845 245 815 215 C780 175 710 130 627 130Z'/%3E%3C/svg%3E");mask-size:cover;mask-position:center 34%;mask-repeat:no-repeat}
.cinematic-photo-shade{position:absolute;inset:0;background:linear-gradient(90deg,#4b0d0059,transparent 70%),linear-gradient(0deg,#180300b3,transparent 35%);pointer-events:none}
.cinematic-card-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:130px var(--gutter) 110px;color:#fff;gap:30px}
.cinematic-card-copy>p{font-size:clamp(27px,2.8vw,46px);line-height:1.12;letter-spacing:-.035em;max-width:720px;text-wrap:balance}
.version-two .wordmark span{color:#f5f4f0}
.cinematic-intro>.hero-bottom{z-index:3}
.cinematic-hero .hero-browse{font-size:18px;gap:48px;padding:10px 0;min-height:44px}
.cinematic-hero .hero-browse .v2-rolling-label,.cinematic-hero .hero-browse .v2-rolling-label>span{font-size:inherit;line-height:1.3}
.cinematic-hero .hero-browse>span[aria-hidden=true]:not(.v2-rolling-label){font-size:22px}
@media(max-width:760px){
  .cinematic-hero .hero-browse{font-size:14px;gap:30px}
  .cinematic-hero .hero-browse>span[aria-hidden=true]:not(.v2-rolling-label){font-size:20px}
  .version-two .cinematic-hero{min-height:940px}
  .cinematic-hero .cinematic-name{font-size:68px;max-width:100%}
  .cinematic-photo-card .hero-portrait{inset:46% 0 0;mask-image:linear-gradient(0deg,#000 80%,transparent)}
  .cinematic-photo-card .hero-portrait img{object-position:center 33%}
  .cinematic-photo-card .hero-portrait .portrait-natural{mask-position:center 33%}
  .cinematic-card-copy{justify-content:flex-start;padding:140px var(--gutter) 0;gap:18px;pointer-events:none}
  .cinematic-card-copy>p{font-size:23px;line-height:1.15;max-width:330px}
  .cinematic-photo-shade{background:linear-gradient(0deg,#18030099,transparent 25%)}
}
@media(min-width:1800px){.v2-featured-grid{gap:80px 56px}.v2-card-copy p{font-size:17px}}
@media(max-width:1199px){.v2-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v2-project-card,.v2-project-card:nth-child(-n+2){grid-column:auto}.v2-project-card:last-child{grid-column:span 2;max-width:calc(50% - 12px)}.v2-reel-links button{gap:8px;padding:16px 12px}.v2-link-number{display:none}}
@media(max-width:700px){.v2-curved{height:280px}.v2-reel-links{overflow-x:auto}.v2-reel-links button{flex:0 0 auto;min-width:140px;font-size:15px}.v2-featured-grid{grid-template-columns:1fr;gap:64px;margin-bottom:48px}.v2-project-card,.v2-project-card:nth-child(-n+2),.v2-project-card:last-child{grid-column:auto;max-width:none;padding:0}.v2-folder-stage{padding-top:18px}.v2-card-copy h3{font-size:30px}.version-two .work-section>.section-h{margin-bottom:40px}.v2-static-reel img{width:76%;height:200px}.v2-card-top>span:last-child{max-width:180px}}
@media(prefers-reduced-motion:reduce){.v2-project-card,.v2-reel-links button,.v2-case-link>span:last-child{transition:none}.v2-featured-grid .gf-root *{animation:none!important;transition:none!important}}

/* Colour portrait brush. */
.portrait-halftone{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;opacity:0;pointer-events:none;mask-repeat:no-repeat;transition:opacity .35s ease}
.portrait-halftone[data-active=true]{opacity:1}
.portrait-touch-surface{display:none}
@media(any-pointer:coarse){.portrait-touch-surface{display:block;position:absolute;z-index:2;inset:0 0 0 30%;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}}
@media(any-pointer:coarse) and (max-width:760px){.portrait-touch-surface{inset:46% 0 0}}
@media(prefers-reduced-motion:reduce){.portrait-halftone{transition:none}}
/* V2 Education: keep the content and layout on a white background. */
#education{background:#fff;color:#252525;color-scheme:light;--line:#dce0e5;--muted:#59636f}
#education .edu-deg,#education .edu-pts{color:#555b62}
#education .section-eyebrow,#education .edu-pts li::marker,#education .honor-mark{color:#b84612}

@media(prefers-reduced-motion:reduce){.version-two .case-study[open]{animation:none}}

/* Compact shelf for the ten additional projects, four per desktop row. */
.v1-other-projects{border-top:1px solid #dce0e5;padding-top:36px}
.v1-other-heading{margin-bottom:12px}
.v1-other-heading h3{font-size:30px;font-weight:400;letter-spacing:-.04em}
#v1-other-title{scroll-margin-top:110px}
.v1-other-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0 8px 20px}
.v1-other-grid .v1-mini-project{grid-column:auto;width:100%;max-width:210px;justify-self:center;padding:0 8px}
.v1-mini-project .v2-folder-stage{padding:60px 0 0;margin:0}
.v1-mini-project .v2-card-copy{margin:10px 0 0;text-align:center}
.v1-mini-project .v2-card-copy h3{font-size:20px;margin-bottom:0;line-height:1.2}
.v1-mini-project .v2-card-copy p{display:none}
.v1-mini-project .v2-case-link{margin:4px auto 0;padding:0;min-height:44px;border:0;justify-content:center;gap:6px;font-size:12px}
@media(max-width:700px){.v2-featured-grid .v2-folder-stage{padding-top:60px}.v1-other-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.v1-other-grid .v1-mini-project{padding:0;max-width:190px}.v1-mini-project .v2-card-copy h3{font-size:17px}}

/* Version 1 comparison: an edge-to-edge reading view. */
.version-two .case-study{inset:0;width:100vw;border:0;box-shadow:none}
.version-two .case-study[open]{animation:v1-case-enter .3s ease-out}
.version-two .modal-head,.version-two .modal-body,.version-two .modal-foot{padding-left:max(6vw,calc((100vw - 1040px)/2));padding-right:max(6vw,calc((100vw - 1040px)/2))}
.version-two .modal-head{padding-top:140px;padding-bottom:56px}
.version-two .modal-head h2{font-size:clamp(44px,6.2vw,96px)}
.version-two .modal-close{left:6vw;right:auto;top:24px;width:auto;padding:0 20px;font-size:14px;border-radius:100px;gap:10px}
@keyframes v1-case-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.version-two .modal-head{padding-top:108px;padding-bottom:32px}.version-two .modal-body{padding-top:8px;padding-bottom:28px}.version-two .modal-foot{padding-top:16px;padding-bottom:16px}}
@media(prefers-reduced-motion:reduce){.version-two .case-study[open]{animation:none}}