@charset "UTF-8";

:root { color-scheme: light; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; background: #f4f1ea; color: #252b30; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #345cff; outline-offset: 6px; }
[hidden] { display: none !important; }
.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; }
.scene { --gutter: clamp(24px, 5.2vw, 88px); --ink: #252b30; --subtle: #6b706e; --line: #d4d5ce; --ease: cubic-bezier(.22,1,.36,1); position: relative; isolation: isolate; min-height: 700px; height: 100svh; overflow: clip; background: #f4f1ea; }
.scene::after { content: ""; position: absolute; z-index: 9; pointer-events: none; inset: 0; opacity: .033; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.header { height: 90px; position: relative; z-index: 10; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; transition: color .55s; }
.signature { font-size: 34px; font-weight: 500; letter-spacing: -.11em; line-height: 1; padding: 8px 5px 12px 0; }
.signature span { color: #6f8190; }
.view-switch { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; font-size: 13px; }
.view-switch > span { opacity: .24; font-size: 17px; font-weight: 300; }
.view-switch button { border: 0; background: none; padding: 12px 0; position: relative; color: var(--subtle); transition: color .4s; }
.view-switch button[aria-pressed="true"] { color: var(--ink); }
.view-switch button::after { content: ""; height: 1px; background: currentColor; position: absolute; bottom: 5px; left: 0; right: 0; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.view-switch button[aria-pressed="true"]::after { transform: scaleX(1); }
.switch-star { display: inline-block; margin-left: 3px; transition: rotate .8s var(--ease); }
.view-switch button:hover .switch-star { rotate: 90deg; }
.hello-link { font-size: 12px; padding: 12px 0; }
.hello-link span, .footer a span { display: inline-block; margin-left: 8px; transition: translate .25s; }
.hello-link:hover span, .footer a:hover span { translate: 2px -2px; }
.work-view { position: relative; z-index: 2; padding: 6px var(--gutter) 20px; height: calc(100% - 149px); max-width: 1800px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px,5svh,58px); transition: opacity .45s, filter .65s; }
h1 { font-size: clamp(88px, 14.4vw, 235px); font-weight: 400; letter-spacing: -.087em; line-height: .89; white-space: nowrap; margin: 0 0 0 -.07em; animation: arrive 1s var(--ease) both; }
h1 > span { color: #7a8e9c; }
.work-body { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; animation: arrive 1s .12s var(--ease) both; }
.work-copy { max-width: 540px; }
.work-copy h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px,3.1vw,47px); font-weight: 400; font-style: italic; letter-spacing: -.055em; line-height: 1.2; margin: 0 0 11px; }
.intro { margin: 0; color: var(--subtle); font-size: 13px; line-height: 1.6; }
.company-group { margin-top: 31px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; max-width: 453px; }
.role-label { margin: 12px 0 0; font-size: 10px; color: var(--subtle); }
.companies { list-style: none; margin: 0; padding: 0; }
.companies li { border-bottom: 1px solid var(--line); }
.companies a { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 9px 0 11px; font-size: clamp(18px,1.8vw,26px); line-height: 1.25; letter-spacing: -.035em; transition: color .25s, padding .35s var(--ease); }
.company-arrow { font-size: 17px; font-weight: 400; color: #7b888e; transition: translate .35s var(--ease), color .25s; }
.companies a:is(:hover,:focus-visible) { color: #345c92; padding-left: 5px; }
.companies a:is(:hover,:focus-visible) .company-arrow { translate: 2px -2px; color: #345c92; }
.experience { margin: 22px 0 0 76px; color: var(--subtle); font-size: 10px; line-height: 1.7; }
.experience p { margin: 0; }
.experience p + p { margin-top: 3px; }
.experience-name { color: #343d43; }
.lens-composition { justify-self: center; align-self: center; text-align: center; position: relative; padding: 0 22px 35px; }
.lens { --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px; --memory-position: 50% 57%; display: block; position: relative; width: clamp(210px,24vw,350px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; perspective: 900px; }
.lens__halo { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(ellipse, #91bed826, #a1bfdc10 38%, transparent 68%); filter: blur(10px); }
.lens__glass { display: block; position: absolute; inset: 4%; overflow: hidden; border-radius: 50%; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ease), scale .7s var(--ease); background: #739dba; box-shadow: 0 30px 40px -35px #294c7599, 0 4px 8px #50637920, 0 0 0 1px #c6d1d699; }
.lens__memory { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--memory-position); transform: scale(1.1) translate(var(--px),var(--py)); transition: transform .75s var(--ease); }
.lens__preview { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .4s, visibility .4s, transform .75s var(--ease); pointer-events: none; }
.lens__preview.is-visible { opacity: 1; visibility: visible; transform: scale(1); }
.lens__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lens__preview[data-preview="resylr"] { background: #dae5f4; }
.lens__preview[data-preview="resylr"] img { object-fit: contain; transform: scale(1.18) translateY(5%); }
.lens__preview[data-preview="resell"] img { object-position: 73% 45%; }
.lens__preview[data-preview="evans"] { background: #1c2d20; }
.lens__preview[data-preview="evans"] img { object-fit: contain; object-position: center; padding: 10%; }
.lens__glaze { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 28% 9%, #fff9 0%, #fff1 22%, transparent 38%), radial-gradient(ellipse at 73% 78%, transparent 39%, #7a93a422 63%, #13293473 90%, #fff 99%); box-shadow: inset 3px 4px 6px #ffffffe0, inset -4px -3px 12px #fff5, inset 0 0 24px #173c6c70; }
.lens__glint { position: absolute; left: 13%; top: 9%; width: 42%; height: 16%; border-radius: 100%; background: linear-gradient(165deg,#fff8,transparent 78%); rotate: -34deg; filter: blur(2px); }
.lens:hover .lens__glass, .lens:focus-visible .lens__glass { scale: 1.035; }
.lens-caption { font-size: 11px; margin-top: 15px; background: none; border: 0; padding: 12px; }
.lens-caption:hover { color: #345c92; }
.lens-handwriting { display: block; color: #8c918c; font-family: Georgia,serif; font-style: italic; font-size: 13px; letter-spacing: -.035em; }
.footer { position: relative; z-index: 10; height: 59px; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--gutter); color: var(--subtle); font-size: 10px; transition: color .55s; }
.footer a { padding: 12px 0; }
.gallery { position: absolute; z-index: 1; inset: 0; overflow: clip; background: #1a252a; clip-path: circle(0px at var(--portal-x,75%) var(--portal-y,50%)); transition: clip-path 1.05s var(--ease); visibility: hidden; }
.moments, .moment { position: absolute; inset: 0; margin: 0; }
.moments { touch-action: pan-y; }
.moment { opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s; }
.moment.is-current { opacity: 1; visibility: visible; }
.moment__ambience { width: 100%; height: 100%; object-fit: cover; filter: blur(32px) brightness(.47) saturate(.75); transform: scale(1.13); }
.moment__image { display: block; position: absolute; top: 0; right: 7%; height: 100%; width: 49%; object-fit: contain; transform: scale(1.025); transition: transform 1.4s var(--ease); }
.moment.is-current .moment__image { transform: scale(1); }
.moment--wide .moment__image { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.moment[data-moment="coaching"] .moment__image { right: 11%; }
.gallery__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,#12212c4d,transparent 24%,transparent 52%,#0c1825a6 100%), linear-gradient(90deg,#10202b2e,transparent 70%); }
.wonder-copy { position: absolute; left: var(--gutter); bottom: 160px; color: #fffdfa; transform: translateY(20px); opacity: 0; transition: opacity .35s, transform .8s var(--ease); text-shadow: 0 2px 28px #10233744; }
.wonder-copy h2 { font-size: clamp(36px,4.6vw,72px); font-weight: 400; line-height: 1.06; letter-spacing: -.065em; margin: 0; }
.wonder-copy em { font-family: Georgia,"Times New Roman",serif; font-weight: 400; letter-spacing: -.05em; }
.wonder-copy p { color: #e8e9e5; margin: 17px 0 0 2px; font-size: 12px; }
.gallery-controls { position: absolute; bottom: 69px; left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; color: white; opacity: 0; translate: 0 16px; transition: opacity .35s, translate .65s var(--ease); }
.moment-caption { display: flex; gap: 15px; align-items: center; white-space: nowrap; font-size: 11px; }
#photo-number { font-size: 10px; color: #e0e5e8; font-variant-numeric: tabular-nums; }
.caption-line { width: 25px; height: 1px; background: #ffffff5c; }
.filmstrip { display: flex; gap: 9px; padding: 5px; border-radius: 6px; }
.filmstrip button { width: 41px; height: 52px; border: 0; padding: 0; border-radius: 2px; background: #273748; position: relative; opacity: .56; transition: opacity .4s, transform .5s var(--ease), box-shadow .4s; }
.filmstrip img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.filmstrip button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; transform: translateY(-5px); }
.filmstrip button:hover { opacity: 1; transform: translateY(-5px); }
.photo-arrows { display: flex; gap: 8px; justify-self: end; }
.photo-arrows button { width: 42px; height: 42px; display: grid; place-items: center; background: #ffffff0a; border: 1px solid #ffffff6e; border-radius: 50%; color: white; font-size: 18px; transition: background .3s; backdrop-filter: blur(15px); }
.photo-arrows button:hover { background: #ffffff29; }
.scene[data-view="wonder"] { --ink: #fffdfa; --subtle: #e4e9e9; min-height: 540px; }
[data-view="wonder"] .gallery { visibility: visible; clip-path: circle(var(--portal-radius,160vmax) at var(--portal-x,75%) var(--portal-y,50%)); }
[data-view="wonder"] .work-view { opacity: 0; filter: blur(6px); pointer-events: none; }
[data-view="wonder"] .header, [data-view="wonder"] .footer { color: #fffdfa; }
[data-view="wonder"] .signature span { color: #dce6eb; }
[data-view="wonder"] .wonder-copy { transform: translateY(0); opacity: 1; }
[data-view="wonder"] .gallery:not([data-current="beach"]) .wonder-copy { opacity: 0; transform: translateY(12px); pointer-events: none; transition-delay: 0s; }
.gallery:not([data-current="beach"]) .moment:not(.moment--wide) .moment__image { right: 0; width: 100%; }
[data-view="wonder"] .gallery-controls { opacity: 1; translate: 0 0; }
[data-view="wonder"] :is(button,a):focus-visible { outline-color: #fff; }
.scene.is-returning .gallery { visibility: visible; }
.portal-flight { position: absolute; z-index: 8; margin: 0; overflow: hidden; pointer-events: none; contain: layout paint; background: #739dba; }
.portal-flight__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.portal-flight .lens__glaze { opacity: 0; }
.scene.is-traveling .lens__glass, .scene.is-traveling .moment__image { visibility: hidden; }
.scene.is-traveling .wonder-copy, .scene.is-traveling .gallery-controls { opacity: 0; transition-delay: 0s; }
@keyframes arrive { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (min-width: 1500px) { .work-view { max-height: 1040px; padding-top: 3vh; } .work-copy { max-width: 600px; } .company-group { max-width: 520px; margin-top: 43px; } .experience { margin-top: 26px; font-size: 11px; } .companies a { padding: 13px 0; } .intro { font-size: 15px; } }
@media (max-width: 950px) { .work-view { gap: 48px; } h1 { font-size: 14.6vw; } .work-body { gap: 24px; grid-template-columns: 1.2fr 1fr; } .company-group { grid-template-columns: 45px 1fr; gap: 8px; margin-top: 26px; } .role-label { font-size: 9px; } .experience { margin-left: 53px; } .intro { max-width: 310px; font-size: 12px; } .lens-composition { padding: 0 0 25px; } .lens { width: clamp(185px,27vw,255px); } .moment-caption { gap: 10px; } .caption-line { width: 14px; } .gallery-controls { gap: 12px; } .filmstrip { gap: 7px; } .filmstrip button { width: 34px; height: 46px; } }
@media (max-aspect-ratio: 1/1) {
  .moment--wide .moment__image { top: 10%; height: 72%; }
  .moment__image { width: 100%; right: 0; object-fit: cover; }
  .moment[data-moment="coaching"] .moment__image { right: 0; object-position: 50% 40%; }
  .moment[data-moment="castaway-cay"] .moment__image { object-position: 52% 53%; }
  .moment[data-moment="beach"] .moment__image { object-position: 50% 45%; }
  .wonder-copy { bottom: 178px; }
  .gallery__shade { background: linear-gradient(180deg,#07172880,transparent 22%,transparent 51%,#071625dc 100%); }
}
@media (max-width: 600px) {
  .scene { min-height: 720px; }
  .header { height: 78px; }
  .signature { font-size: 31px; }
  .hello-link { font-size: 10px; }
  .hello-link span { margin-left: 4px; }
  .view-switch { gap: 11px; font-size: 11px; }
  .view-switch > span { font-size: 14px; }
  .switch-star { margin-left: 0; }
  .work-view { height: calc(100% - 132px); gap: 34px; padding-top: 15px; padding-bottom: 24px; }
  h1 { font-size: 17.9vw; line-height: 1; letter-spacing: -.083em; }
  .work-body { position: relative; display: block; }
  .work-copy h2 { font-size: 28px; }
  .intro { max-width: 260px; font-size: 11px; }
  .company-group { margin-top: 34px; display: block; max-width: 210px; }
  .role-label { margin: 0 0 8px; font-size: 10px; }
  .companies a { font-size: 18px; padding: 10px 0 12px; gap: 12px; }
  .company-arrow { font-size: 15px; }
  .experience { margin: 21px 0 0; font-size: 10px; }
  .lens-composition { position: absolute; right: -12px; top: 134px; width: 121px; padding: 0; }
  .lens { width: 121px; }
  .lens-caption { font-size: 9px; padding: 10px 0; margin-top: 9px; white-space: nowrap; }
  .lens-handwriting { display: none; }
  .footer { height: 54px; font-size: 9px; }
  .footer a span { margin-left: 4px; }
  .wonder-copy { bottom: 195px; }
  .wonder-copy h2 { font-size: 37px; }
  .wonder-copy p { margin-top: 10px; font-size: 11px; }
  .gallery-controls { bottom: 67px; grid-template-columns: 1fr auto; row-gap: 17px; }
  .moment-caption { grid-column: 1; grid-row: 1; font-size: 10px; }
  .filmstrip { grid-column: 1; grid-row: 2; justify-self: start; gap: 8px; padding: 3px; }
  .filmstrip button { width: 33px; height: 42px; }
  .photo-arrows { grid-column: 2; grid-row: 2; gap: 7px; }
  .photo-arrows button { width: 36px; height: 36px; font-size: 16px; }
  .moment--wide .moment__image { top: 10%; height: 72%; }
}
@media (max-width: 370px) {
  .scene { --gutter: 21px; min-height: 710px; }
  .view-switch { gap: 8px; }
  .work-copy h2 { font-size: 26px; }
  .company-group { max-width: 178px; }
  .companies a { font-size: 16px; }
  .lens-composition { width: 98px; right: -10px; top: 154px; }
  .lens { width: 98px; }
  .lens-caption { font-size: 8px; }
  .experience { font-size: 9px; }
  .filmstrip { gap: 7px; }
  .filmstrip button { width: 29px; height: 39px; }
  .photo-arrows { gap: 5px; }
  .photo-arrows button { width: 31px; height: 34px; }
  .wonder-copy h2 { font-size: 33px; }
}
@media (min-width: 601px) and (max-height: 740px) {
  .scene { min-height: 680px; }
  .header { height: 78px; }
  .work-view { height: calc(100% - 133px); gap: 26px; }
  h1 { font-size: min(14.4vw,170px); }
  .work-copy h2 { font-size: 34px; }
  .company-group { margin-top: 23px; }
  .companies a { font-size: 22px; padding: 8px 0 10px; }
  .experience { margin-top: 19px; }
  .lens { width: min(25vw,275px); }
  .lens-composition { padding-bottom: 10px; }
  .footer { height: 55px; }
  .wonder-copy { bottom: 155px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lens__glass, .lens__memory, .lens__preview, .moment__image { transform: none !important; }
}