:root { font-family: Arial, Helvetica, sans-serif; color: #171717; background: #fafaf8; font-synthesis: none; --paper:#fafaf8; --ease:cubic-bezier(.22,.68,0,1.01); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:2px solid #d7ff4f; outline-offset:-4px; }
button { min-height:44px; }
.skip-link { position:fixed; left:20px; top:-60px; z-index:100; padding:14px; background:var(--paper); }
.skip-link:focus { top:10px; }
.site-header { position:fixed; inset:0 0 auto; padding:12px 25px; display:flex; justify-content:space-between; align-items:center; z-index:5; color:white; mix-blend-mode:difference; pointer-events:none; }
.site-header>* { pointer-events:auto; }
.wordmark { font-size:16px; letter-spacing:-.025em; line-height:1.25; padding:12px 0; font-weight:600; max-width:calc(100% - 100px); }
.site-header button { font-size:19.5px; text-transform:uppercase; }
.site-header button span { margin-left:18px; }
.project { height:100svh; min-height:640px; display:grid; grid-template-columns:1fr 1fr; position:relative; }
.project-link { display:grid; grid-template-columns:1fr 1fr; grid-column:1/-1; min-height:0; }
.project-label { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 26px; background:var(--paper); overflow:hidden; }
.project.reversed .project-label { grid-column:2; grid-row:1; }
.project.reversed .project-visual { grid-column:1; grid-row:1; }
.project-meta { position:absolute; top:89px; left:26px; right:26px; display:flex; justify-content:space-between; gap:12px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#666; }
.miniature { width:clamp(160px,25vw,360px); aspect-ratio:1.294; object-fit:contain; transition:transform 800ms var(--ease); }
.project-link:hover .miniature { transform:scale(1.06); }
.project-bottom { position:absolute; bottom:25px; left:26px; right:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.project h2 { font-size:clamp(25px,3.1vw,58px); font-weight:500; text-transform:uppercase; letter-spacing:-.055em; line-height:.98; margin:0; max-width:85%; }
.project-number { font-size:clamp(26px,3vw,48px); line-height:1; letter-spacing:-.06em; }
.project-visual { position:relative; overflow:hidden; background:#18191b; }
.cover { width:100%; height:100%; display:block; object-fit:cover; object-position:var(--position); transform:scale(1); will-change:transform; }
.open-label { position:absolute; bottom:28px; left:26px; right:26px; color:white; display:flex; justify-content:space-between; font-size:12px; text-transform:uppercase; letter-spacing:.08em; mix-blend-mode:difference; }
.project-link:focus-visible .project-label { outline:3px solid #738a15; outline-offset:-4px; }
.site-footer { padding:32px 26px; display:flex; gap:20px; justify-content:space-between; font-size:13px; text-transform:uppercase; }
dialog { border:0; padding:0; color:inherit; background:var(--paper); }
dialog::backdrop { background:#16161688; }
#project-dialog { width:100%; height:100%; max-width:none; max-height:none; margin:0; overflow:hidden; }
.detail-toolbar { height:65px; position:absolute; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 24px; font-size:12px; text-transform:uppercase; z-index:4; background:var(--paper); border-bottom:1px solid #deded9; }
.detail-toolbar button { font-size:14px; padding:0; }
#detail-progress { min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
#detail-scroll { height:100%; overflow:auto; overscroll-behavior:contain; scroll-behavior:smooth; padding-top:65px; }
.detail-layout { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
.detail-layout.reverse .detail-gallery { grid-column:2; grid-row:1; }
.detail-layout.reverse .detail-description { grid-column:1; grid-row:1; }
.detail-gallery { padding:12px 12px 0; min-width:0; }
.detail-hero { height:calc(100svh - 89px); min-height:480px; overflow:hidden; background:#18191b; }
.detail-hero img { width:100%; height:100%; display:block; object-fit:cover; object-position:var(--position); animation:settle 850ms var(--ease) both; }
@keyframes settle { from { transform:scale(1.48); } to { transform:scale(1); } }
.detail-image { margin:70px 0; }
.detail-image img { display:block; width:100%; height:auto; }
.detail-image figcaption { margin-top:12px; color:#666; font-size:12px; display:flex; justify-content:space-between; text-transform:uppercase; }
.detail-description { height:calc(100svh - 65px); position:sticky; top:0; padding:32px 28px 26px; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { text-transform:uppercase; font-size:12px; letter-spacing:.08em; margin:0; }
.detail-description .description-body { max-width:450px; }
.detail-description .description-body p { font-size:18px; line-height:1.45; }
.detail-description .description-body span { font-size:13px; color:#71716c; }
.detail-title-row { display:flex; justify-content:space-between; align-items:end; gap:20px; }
#detail-title { font-size:clamp(35px,4.3vw,78px); font-weight:500; text-transform:uppercase; letter-spacing:-.065em; line-height:.97; margin:0; }
.detail-end { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-top:1px solid #ddd; }
.detail-end p { font-size:12px; text-transform:uppercase; color:#777; }
.detail-end button { padding:12px 24px; border:1px solid #aaa; border-radius:100px; font-size:14px; }
#info-dialog { width:min(1050px,calc(100% - 32px)); max-height:calc(100svh - 32px); padding:70px 40px 40px; }
.info-close { position:absolute; right:25px; top:15px; font-size:14px; }
.info-copy { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:25px; }
.info-copy .eyebrow { grid-column:1/-1; }
.info-copy h1 { font-size:clamp(50px,7vw,90px); font-weight:500; line-height:.95; letter-spacing:-.07em; margin:0; }
.info-copy>p:not(.eyebrow) { font-size:20px; line-height:1.4; margin:0; max-width:340px; }
#return-work { text-align:left; font-size:14px; margin:10px 0 30px; }
#info-dialog>img { display:block; width:100%; height:auto; }
.transition-image { position:fixed; z-index:3; overflow:hidden; pointer-events:none; }
@media (max-width:700px) {
  .site-header { padding:8px 18px; }
  .project { height:auto; min-height:0; display:flex; flex-direction:column; }
  .project-link { display:flex; flex-direction:column; }
  .project-label { height:31svh; min-height:210px; width:100%; padding:75px 20px 55px; }
  .project-meta { top:76px; left:20px; right:20px; font-size:11px; }
  .miniature { display:none; }
  .project-bottom { bottom:21px; left:20px; right:20px; }
  .project h2 { font-size:clamp(28px,8vw,43px); max-width:85%; }
  .project-number { font-size:30px; }
  .project-visual { height:69svh; min-height:360px; width:100%; }
  .open-label { left:20px; right:20px; bottom:22px; }
  .site-footer { flex-wrap:wrap; font-size:12px; padding:28px 20px; }
  .site-footer span:nth-child(2) { display:none; }
  .detail-toolbar { height:58px; padding:0 18px; }
  #detail-category { font-size:10px; max-width:45%; text-align:center; }
  #detail-scroll { padding-top:58px; }
  .detail-layout { display:flex; flex-direction:column; }
  .detail-description { position:relative; order:-1; height:auto; width:100%; padding:32px 20px 24px; gap:25px; }
  .detail-description>.eyebrow,.description-body { display:none; }
  #detail-title { font-size:36px; }
  .detail-gallery { width:100%; padding:0 10px; }
  .detail-hero { height:65svh; min-height:340px; }
  .detail-image { margin:34px 0; }
  .detail-image figcaption { font-size:11px; padding:0 3px; }
  .detail-end { min-height:180px; }
  #info-dialog { padding:65px 20px 20px; }
  .info-copy { display:block; }
  .info-copy h1 { margin:25px 0; }
  .info-copy>p:not(.eyebrow) { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) { html,#detail-scroll { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .cover { will-change:auto; } }

.title-word { display:inline-block; white-space:nowrap; }
.title-letter { display:inline-block; transform-origin:center; transition:transform 650ms var(--ease), filter 650ms var(--ease); }
.ribbon-enabled .site-footer { display:none; }
body:not(.ribbon-enabled) [data-repeat] { display:none; }
.ribbon-enabled { overflow-anchor:none; }
@media (prefers-reduced-motion:reduce) { .title-letter { transform:none!important; filter:none!important; } }

.info-links { grid-column:2; display:flex; gap:24px; flex-wrap:wrap; }
.info-links a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; text-decoration:underline; text-underline-offset:5px; }
#return-work { grid-column:1/-1; }
@media (max-width:700px) {
  .wordmark { font-size:14px; max-width:calc(100% - 85px); }
  .site-header { gap:15px; }
  .site-header button { flex-shrink:0; padding:0; }
  .site-header button span { margin-left:8px; }
  .info-links { margin-top:20px; }
}
/* Portfolio v2 */
.site-header .wordmark, .site-header #info-button {
  font-family:Arial, Helvetica, sans-serif; font-size:19.5px; font-weight:400;
  letter-spacing:0; line-height:1.3;
}
.site-header { gap:28px; }
.wordmark { max-width:calc(100% - 110px); }
.brand-separator { display:inline-block; margin:0 .65em; }
.project-visual, .detail-hero, .transition-image { background:#151515; }
.project-visual .cover, .transition-image .cover { object-fit:contain; padding:8% 3%; transform:scale(1); }
.detail-hero img { object-fit:contain; padding:4% 2%; animation:none; }
.project-meta { line-height:1.4; }
.project-meta span:last-child { flex-shrink:0; }
.project h2 { font-size:clamp(25px,2.9vw,54px); }
.detail-description { height:auto; max-height:calc(100svh - 65px); overflow-y:auto; gap:30px; justify-content:flex-start; }
#detail-title { font-size:clamp(30px,3.4vw,60px); overflow-wrap:anywhere; }
.description-body { max-width:580px!important; }
.detail-description .description-body p { font-size:16px; line-height:1.55; }
.detail-subtitle { margin-top:0; font-size:20px!important; }
.project-facts { margin:28px 0; }
.project-facts div { margin-top:16px; }
.project-facts dt { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#73736d; }
.project-facts dd { margin:5px 0 0; font-size:14px; line-height:1.5; }
.project-credits { border-top:1px solid #d5d5ce; padding-top:16px; }
.project-credits summary { cursor:pointer; font-size:14px; min-height:35px; }
.project-credits p { font-size:14px!important; }
.detail-image figcaption { gap:22px; line-height:1.55; text-transform:none; font-size:14px; }
.detail-image figcaption>span:last-child { flex-shrink:0; font-size:12px; }
.info-copy .info-email { grid-column:2; font-size:16px!important; margin:0; }
@media(max-width:700px) {
  .site-header { align-items:flex-start; gap:16px; }
  .site-header .wordmark, .site-header #info-button { font-size:14px; line-height:1.4; }
  .wordmark { max-width:calc(100% - 70px); }
  .brand-separator { margin:0 .25em; }
  .project-meta { top:105px; }
  .project-label { min-height:265px; }
  .project h2 { font-size:clamp(25px,7vw,38px); }
  .detail-description { max-height:none; overflow:visible; padding-top:28px; gap:20px; }
  .detail-description .description-body { display:block; }
  .detail-description>.eyebrow { display:none; }
  .detail-hero { height:48svh; min-height:260px; }
  .detail-image { margin:40px 0; }
  .info-copy .info-email { margin-top:18px; }
}

/* Full-bleed covers, with overscan reserved for parallax. */
.project-visual .cover, .transition-image .cover {
  object-fit:cover; padding:0; transform:scale(1);
}
.detail-hero img { object-fit:cover; padding:0; transform:scale(1.04); }
.site-header .wordmark { font-size:23.5px; }
@media(max-width:700px) {
  .site-header .wordmark { font-size:18px; }
  .site-header { gap:12px; }
  .project-meta { top:120px; }
  .project-label { min-height:285px; }
}

.project h2, #detail-title { font-family:'Space Grotesk', Arial, sans-serif; font-weight:400; }
.site-header .wordmark, #info-title { font-family:'Space Grotesk', Arial, sans-serif; font-weight:500; }

/* Outside-aligned titles, with numbers toward the center of the desktop spread. */
.project.reversed .project-bottom { flex-direction:row-reverse; }
.project.reversed h2 { text-align:right; }
.project-visual .cover, .transition-image .cover { transform:scale(1); }
.project-link { cursor:pointer; }
.cursor-open { position:fixed; top:0; left:0; z-index:20; pointer-events:none; opacity:0; color:white; mix-blend-mode:difference; font-size:12px; line-height:1; transition:transform 1s ease-out, opacity 160ms; will-change:transform; }
.cursor-open.visible { opacity:1; }
.info-location { display:block; margin-top:12px; }
@media (hover:none), (pointer:coarse) { .cursor-open { display:none; } }
@media (prefers-reduced-motion:reduce) { .cursor-open { transition:opacity 160ms; } }

.project-number { font-family:"Space Grotesk", Arial, sans-serif; font-weight:400; }

.project h2, .project .project-number { font-size:clamp(25px,2.9vw,54px); line-height:.98; }
.info-bio { grid-column:2; max-width:340px; font-size:20px; line-height:1.4; }
.info-bio p { margin:0 0 1em; }
.info-bio p:last-child { margin-bottom:0; }
@media(max-width:700px) {
  .project h2, .project .project-number { font-size:clamp(25px,7vw,38px); }
  .info-bio { font-size:17px; margin-top:25px; }
}