@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');
:root{--bg:#F5F2EC;--ink:#191918;--muted:#75716c;--rule:#d6d0c7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,a{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #2839c9;outline-offset:5px}.shell{max-width:1550px;min-height:100dvh;margin:auto;padding:33px clamp(23px,5.2vw,92px) 22px;display:flex;flex-direction:column}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}.wordmark{padding:0;text-align:left;font:600 clamp(23px,2.65vw,39px)/1.15 'Fraunces',Georgia,serif;letter-spacing:-.055em}.wordmark span{display:block;font:400 11px/1.8 'DM Sans',sans-serif;letter-spacing:0;margin-top:5px;color:var(--muted)}nav{display:flex;gap:clamp(12px,2.7vw,42px);align-items:center;padding-top:8px;flex-wrap:wrap}nav button,nav a{padding:0;font-size:12px;white-space:nowrap}nav button:hover,nav a:hover{text-decoration:underline;text-underline-offset:4px}#langToggle{margin-left:12px;font-weight:700}#langToggle span{opacity:.35}.view{display:none}.view.active{display:block}.work-area{display:grid;grid-template-columns:43% 57%;align-items:center;gap:12px;min-height:min(710px,calc(100dvh - 190px));padding-top:52px;padding-bottom:45px}.left{align-self:center;padding-right:7%;}.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#888078;margin:0 0 17px}.left h1{font:600 clamp(40px,5vw,76px)/1.06 'Fraunces',Georgia,serif;letter-spacing:-.055em;margin:0 0 45px}.about-layout h1{font:600 clamp(40px,5vw,76px)/1.06 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;margin:0 0 45px}.work-list{display:flex;flex-direction:column;gap:0;max-width:410px}.category{display:flex;gap:16px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--rule);padding:13px 0;text-align:left;width:100%;transition:padding .2s}.category:hover,.category.selected{padding-left:9px}.category .num{font-size:10px;color:#8b857f}.category .name{flex:1;font:600 clamp(10px,1vw,13px)/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.055em;text-transform:uppercase}.category .plus{font-size:15px}.smallnote{margin-top:40px;font-size:11px;color:var(--muted)}.right{min-width:0}.hero{width:100%;height:auto;aspect-ratio:1.62/1;object-fit:cover;display:block;filter:contrast(1.03)}.image-caption{font-size:10px;color:#6e6964;display:flex;justify-content:space-between;margin-top:12px;gap:18px}.project-preview{border-top:1px solid var(--rule);padding-top:12px}.project-preview h2{font:500 24px 'DM Sans',Arial,sans-serif;margin:0 0 8px}.project-preview p{font-size:12px;line-height:1.7;max-width:470px}.preview-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:20px}.preview-gallery button{padding:0;overflow:hidden;aspect-ratio:.74}.preview-gallery img{height:100%;width:100%;object-fit:cover;transition:transform .35s}.preview-gallery button:hover img{transform:scale(1.055)}.case-buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.case-buttons button{border:1px solid var(--rule);padding:10px 12px;text-align:left;font-size:11px}.case-buttons button:hover{background:#eae5dc}footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;color:#78736d;font-size:10px}.about-layout{min-height:calc(100dvh - 205px);display:grid;grid-template-columns:1fr 1fr;gap:14%;align-items:center}.about-layout h1{font-size:clamp(35px,4.5vw,67px)}.about-copy p{font-size:15px;line-height:1.9;max-width:420px}.email-link{display:inline-block;margin:30px 0 5px;border-bottom:1px solid}.fine{color:var(--muted);font-size:11px!important}.hidden{display:none!important}.overlay{position:fixed;inset:0;background:rgba(19,18,18,.88);z-index:10;padding:clamp(10px,3vw,30px);display:flex;align-items:center;justify-content:center}.gallery-frame{background:var(--bg);width:min(1040px,100%);height:min(900px,95dvh);display:flex;flex-direction:column;padding:clamp(15px,2.5vw,35px)}.gallery-top{display:flex;justify-content:space-between;align-items:flex-start}.gallery-top h2{font:500 24px 'DM Sans',Arial,sans-serif;margin:0 0 12px}.gallery-top .eyebrow{margin:0 0 3px}.close{font-size:35px;line-height:1}.gallery-imagewrap{display:flex;flex:1;min-height:0;align-items:center;justify-content:space-between;gap:10px}.gallery-imagewrap img{height:100%;max-height:100%;min-width:0;width:auto;max-width:calc(100% - 90px);object-fit:contain}.arrow{font-size:35px;padding:5px 9px}.gallery-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:14px;font-size:11px;color:#666}@media(max-width:780px){.shell{padding:22px 22px 18px}.topbar{flex-wrap:wrap}.wordmark{font-size:26px}nav{width:100%;gap:22px;justify-content:space-between}.work-area{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding-top:65px;padding-bottom:40px;min-height:unset}.left{padding-right:0;width:100%}.left h1{margin-bottom:27px}.work-list{max-width:none}.hero{aspect-ratio:1.55/1}.smallnote{margin-top:22px}.about-layout{display:block;min-height:unset;padding:75px 0 80px}.about-layout h1{margin-bottom:30px}.preview-gallery{gap:6px}.gallery-frame{height:95dvh}.gallery-top h2{font-size:18px}.gallery-bottom{flex-wrap:wrap}.gallery-imagewrap img{max-width:calc(100% - 68px)}footer{font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.social-grid{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--rule)}.social-client{display:flex;justify-content:space-between;width:100%;border-bottom:1px solid var(--rule);text-align:left;padding:15px 4px;font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase}.social-client:hover{padding-left:10px;background:#eae5dc}.client-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);margin-top:24px;padding-top:15px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;font-weight:600}.client-heading button{font-size:24px}.muted-placeholder{color:var(--muted)}

/* Fonts controlled by Pages CMS (Site Settings). */
:root { --font-heading: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', Arial, sans-serif; }
body, button, a { font-family: var(--font-body); }
.wordmark, .left h1 { font-family: var(--font-heading); }
.wordmark span, .about-layout h1, .category .name, .project-preview h2, .gallery-top h2 { font-family: var(--font-body); }

.social-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12px}.social-links a{text-decoration:underline;text-underline-offset:3px}


/* Full-screen New York background on the landing view only. Existing photo, no duplicate upload. */
body.home-photo {
  background: linear-gradient(rgba(245,242,236,.72),rgba(245,242,236,.72)),
              url("assets/new-york-2023.webp") center center / cover fixed no-repeat;
}
body.home-photo #previewBlock .hero { display: none; }
body.home-photo #previewBlock .image-caption { justify-content: flex-end; margin-top: 12px; }
body.home-photo .eyebrow, body.home-photo .smallnote,
body.home-photo .image-caption, body.home-photo footer { color: #41413e; }
@media (max-width: 780px) {
  body.home-photo { background-attachment: scroll; background-position: 59% center; }
}

/* Editable profile contacts are shown before the biography. */
[hidden]{display:none!important}
.about-copy{display:flex;flex-direction:column;gap:clamp(26px,4vw,65px)}
.about-contacts{border-bottom:1px solid var(--rule);padding-bottom:clamp(18px,3vw,36px)}
.contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:11px;font-size:13px;line-height:1.65}
.contact-list a{border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.contact-list a:hover{border-color:var(--ink)}
.contact-list span{color:var(--muted)}
.about-bio p:first-child{margin-top:0}
@media(max-width:780px){.about-copy{gap:32px}.about-contacts{padding-bottom:24px}}
/* Hide arrows and separators in Selected Work */
.category .arrow,
.category .arr,
.category .icon,
.category svg {
  display: none !important;
}

.category {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.category::before,
.category::after {
  display: none !important;
}

/* Minimal interface: no decorative arrows or dividing rules. */
.work-list .category, .social-grid, .social-client, .client-heading,
.project-preview, .case-buttons button, footer, .about-contacts {
  border: 0 !important;
  box-shadow: none !important;
}
.work-list .category .plus, .social-client > span:last-child:not(:first-child) {
  display: none !important;
}
/* No ornamental gallery arrows; click the image, swipe, or use keyboard keys. */
.gallery-imagewrap { justify-content: center; }
.gallery-imagewrap img { max-width: 100%; cursor: pointer; }
.work-area .left { align-self: center; }

/* About: preserve line breaks and paragraphs entered into Pages CMS. */
.about-bio [data-i18n="aboutIntro"],
.about-bio [data-i18n="aboutMore"] { white-space: pre-line; overflow-wrap: anywhere; }
.about-bio p { line-height: 1.75; margin: 0 0 1.5em; }
.about-bio p:last-child { margin-bottom: 0; }
/* Editable image on the left side of About. */
.about-left { min-width: 0; }
.about-portrait { display: block; width: min(100%, 420px); max-height: min(68dvh, 640px); object-fit: cover; object-position: center; margin: 0 0 24px; }
.about-portrait[hidden] { display: none !important; }
/* Keep the About content anchored at the top when the biography grows. */
.about-layout { align-items: start; padding-top: clamp(45px, 7vh, 96px); padding-bottom: 65px; }
@media (max-width: 780px) {
  .about-layout { padding-top: 44px; }
  .about-portrait { max-height: 65dvh; width: min(100%, 340px); }
}

/* Desktop: anchor the left project navigation to the viewport center.
   The right column retains its place in the grid even though the menu is fixed. */
@media (min-width: 781px) {
  .work-area {
    display: grid !important;
    grid-template-columns: 40% minmax(0, 1fr) !important;
    align-items: start !important;
  }
  .work-area .left {
    position: fixed !important;
    top: 50dvh !important;
    left: calc((100vw - min(100vw, 1550px))/2 + clamp(23px, 5.2vw, 92px)) !important;
    transform: translateY(-50%) !important;
    width: calc((min(100vw, 1550px) - 2 * clamp(23px, 5.2vw, 92px)) * .4 - 12px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12% 0 0 !important;
    align-self: auto !important;
    z-index: 2;
  }
  .work-area .right {
    grid-column: 2 !important;
    min-width: 0;
    width: 100%;
  }
}
/* Mobile: keep the menu in normal flow, above the project content. */
@media (max-width: 780px) {
  .work-area .left {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    padding-right: 0 !important;
  }
  .work-area .right { width: 100%; }
}

/* FINAL: anchored desktop navigation, independent of long project galleries */
@media (min-width:781px) {
  .work-area { display:grid !important; grid-template-columns:40% minmax(0,1fr) !important; align-items:start !important; }
  .work-area .left {
    position:fixed !important; top:50dvh !important;
    left:calc((100vw - min(100vw,1550px))/2 + clamp(23px,5.2vw,92px)) !important; transform:translateY(-50%) !important;
    width:calc((min(100vw,1550px) - 2 * clamp(23px,5.2vw,92px)) * .4 - 12px) !important; height:240px !important; min-height:240px !important;
    display:flex !important; flex-direction:column !important; justify-content:center !important;
    grid-column:1 !important; grid-row:1 !important;
    align-self:start !important; z-index:3; padding-right:12% !important;
  }
  .work-area .right { grid-column:2 !important; grid-row:1 !important; min-width:0; }
}
@media (max-width:780px) { .work-area .left { position:static !important; height:auto !important; min-height:0 !important; transform:none !important; width:100% !important; } }
/* Allow blank lines and paragraphs written in Pages CMS. */
.project-preview > p:not(.eyebrow), #clientContent p {white-space:pre-line;overflow-wrap:anywhere}
/* Balanced About layout, portrait to the left; text and contacts to the right. */
@media(min-width:781px){
 .about-layout {grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(45px,7vw,120px); align-items:center !important; padding-top:clamp(30px,5vh,65px); padding-bottom:60px; min-height:calc(100dvh - 180px)}
 .about-left {display:flex;flex-direction:column;align-items:center;justify-content:center}
 .about-portrait {width:min(100%,390px);height:auto;max-height:60dvh;object-fit:cover;margin:0 auto 20px}
 .about-copy {justify-content:center}
}
/* True 3-point footer; the city is exactly screen-centered. */
footer {display:grid !important;grid-template-columns:1fr 1fr 1fr;align-items:end;border:0 !important}
#footerLocation {grid-column:2;text-align:center;justify-self:center;white-space:nowrap}
#counter {display:none !important}
@media(max-width:780px){footer{grid-template-columns:1fr auto;gap:8px}#footerLocation{grid-column:2}}
/* Approved liquid NYC canvas (original Soft Waves preview, wave strength zero). */
body.home-photo { background:var(--bg) !important; }
#nyReveal { position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .28s ease; }
#nyReveal canvas { width:100%;height:100%;display:block; }
body.home-photo #nyReveal.is-visible { opacity:1; }
.shell { position:relative;z-index:1; }
.cursor-blob { display:none !important; }
#nyRevealControl {
  position:fixed;
  right:clamp(18px,3.5vw,52px);
  bottom:26px;
  z-index:9;
  background:rgba(245,242,236,.90);
  border:1px solid rgba(25,25,24,.13);
  border-radius:5px;
  padding:11px 14px 12px;
  width:188px;
  color:var(--ink);
  backdrop-filter:blur(12px);
}
#nyRevealControl[hidden] { display:none !important; }
#nyRevealControl label {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.10em;
  margin-bottom:9px;
}
#nyRevealControl label span { letter-spacing:0; opacity:.65; }
#nyRevealSize {
  display:block;
  width:100%;
  margin:0;
  accent-color:var(--ink);
  cursor:pointer;
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) {
  #nyReveal, #nyRevealControl { display:none !important; }
}


/* Burgundy home, with cream text outside the NYC reveal. */
body.home-photo {background:#B30000 !important;}
body.home-photo .shell,
body.home-photo .shell .wordmark span,
body.home-photo .shell .eyebrow,
body.home-photo .shell .category .num,
body.home-photo .shell .smallnote,
body.home-photo .shell footer,
body.home-photo .shell footer * {color:#F5F2EC !important;}
/* Hover is always burgundy for the entire hovered label, not only its letters in the photo. */
@media (hover:hover) and (pointer:fine) {
 body.home-photo .shell .wordmark:hover,
 body.home-photo .shell .wordmark:hover *,
 body.home-photo .shell nav button:hover,
 body.home-photo .shell nav a:hover,
 body.home-photo .shell .category:hover,
 body.home-photo .shell .category:hover *,
 body.home-photo .shell .left > h1:hover,
 body.home-photo .shell .left > .eyebrow:hover,
 body.home-photo .shell .left > .smallnote:hover,
 body.home-photo .shell footer > span:hover,
 body.home-photo .shell footer > span:hover * {color:#B30000 !important;}
}
/* Matching duplicate black text is revealed only where NYC covers the letters. */
#nyTextInk {position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  clip-path:url(#nycTextClip);-webkit-clip-path:url(#nycTextClip);color:#191918;}
#nyTextInk[hidden] {display:none !important;}
#nyTextInk .ny-ink-copy,#nyTextInk .ny-ink-copy * {color:#191918 !important;}
#nyTextInk .ny-ink-copy.ny-ink-hover,#nyTextInk .ny-ink-copy.ny-ink-hover * {color:#B30000 !important;}
#nyTextInk .ny-ink-copy {pointer-events:none !important;transition:none !important;transform:none !important;}
#nyTextInk .ny-ink-copy.category:hover,#nyTextInk .ny-ink-copy.category.selected {padding-left:13px;}
/* The size control is small, fully transparent and not affected by the text mask. */
#nyRevealControl {width:115px !important;padding:4px 0 !important;background:transparent !important;
 border:0 !important;border-radius:0 !important;box-shadow:none !important;
 backdrop-filter:none !important;right:28px !important;bottom:25px !important;color:#F5F2EC !important;}
#nyRevealControl label {font-size:9px !important;margin-bottom:5px !important;}
#nyRevealControl label span {font-size:9px !important;opacity:.65;}
#nyRevealSize {height:3px !important;accent-color:#F5F2EC !important;}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) {#nyTextInk{display:none !important;}}

/* Prevent duplicate mask text from appearing in projects, About or galleries. */
body:not(.home-photo) #nyTextInk,
body:has(#galleryOverlay:not(.hidden)) #nyTextInk {display:none !important;}

/* 2026 editorial typography: body copy uses Newsreader, headings retain Special Elite.
   Top navigation and the role beneath the logo are intentionally untouched. */
#projectPreview p:not(.eyebrow),
#projectPreview .case-buttons button,
#projectPreview .social-client,
#projectPreview #clientContent,
#aboutView .about-copy,
#aboutView .about-copy p,
#aboutView .about-contacts,
#aboutView .contact-list,
.gallery-bottom,
#galleryDesc {font-family:var(--font-editorial, 'Special Elite', monospace) !important;}
#projectPreview h2, #galleryTitle,
#aboutView h1 {font-family:'Special Elite',monospace !important;}

/* Theme switch replaces the footer city only on the landing page. */
#homeThemeControl {display:none;grid-column:2;justify-self:center;align-items:center;gap:7px;
 font-size:9px;letter-spacing:.06em;white-space:nowrap;line-height:1;}
body.home-photo #footerLocation {display:none !important;}
body.home-photo #homeThemeControl {display:flex;}
#homeThemeControl button {font:inherit;letter-spacing:inherit;padding:6px 2px;opacity:.55;cursor:pointer;}
#homeThemeControl button[aria-pressed="true"] {opacity:1;}
#homeThemeControl .theme-track {width:32px;height:2px;background:currentColor;position:relative;opacity:.8;}
#homeThemeControl .theme-dot {width:7px;height:7px;border-radius:50%;position:absolute;top:50%;left:calc(100% - 4px);
 transform:translateY(-50%);background:currentColor;transition:left .25s;}
body.home-light #homeThemeControl .theme-dot {left:-3px;}
/* LIGHT changes only the landing page. Project/category screens retain existing styling. */
body.home-photo.home-light {background:#F5F2EC !important;}
body.home-photo.home-light .shell,
body.home-photo.home-light .shell .wordmark span,
body.home-photo.home-light .shell .eyebrow,
body.home-photo.home-light .shell .category .num,
body.home-photo.home-light .shell .smallnote,
body.home-photo.home-light .shell footer,
body.home-photo.home-light .shell footer * {color:#191918 !important;}
body.home-photo.home-light .shell nav button:hover,
body.home-photo.home-light .shell nav a:hover,
body.home-photo.home-light .shell .category:hover,
body.home-photo.home-light .shell .category:hover *,
body.home-photo.home-light .shell .wordmark:hover,
body.home-photo.home-light .shell .wordmark:hover * {color:#191918 !important;}
body.home-photo.home-light #nyTextInk {display:none !important;}
body.home-photo.home-light #nyRevealControl {color:#191918 !important;}
body.home-photo.home-light #nyRevealSize {accent-color:#191918 !important;}
@media (max-width:780px){
 footer{grid-template-columns:1fr auto 1fr !important;}
 body.home-photo #homeThemeControl {grid-column:2;}
}


/* CMS font alternatives — Special Elite / Titillium Web Black for headings;
   Special Elite / Titillium Web SemiBold and others for reading text. */
.wordmark, .category .name, #projectPreview h2, #galleryTitle, #aboutView h1 {
  font-family:var(--font-heading, 'Special Elite', monospace) !important;
  font-weight:var(--font-heading-weight, 600) !important;
}
#projectPreview p:not(.eyebrow),
#projectPreview .case-buttons button,
#projectPreview .social-client,
#projectPreview #clientContent,
#aboutView .about-copy,
#aboutView .about-copy p,
#aboutView .about-contacts,
#aboutView .contact-list,
.gallery-bottom, #galleryDesc {
  font-weight:var(--font-editorial-weight, 400) !important;
}
/* Role beneath logo and top navigation intentionally retain existing font. */

/* Pages CMS Color Settings: applies to the landing page without touching the light theme. */
:root {
 --cms-home-bg:#470000;
 --cms-home-text:#F5F2EC;
 --cms-nyc-text:#191918;
 --cms-home-hover:#470000;
 --cms-inner-bg:#F5F2EC;
 --cms-inner-text:#191918;
}
body.home-photo:not(.home-light) {background:var(--cms-home-bg) !important;}
body.home-photo:not(.home-light) .shell,
body.home-photo:not(.home-light) .shell .wordmark span,
body.home-photo:not(.home-light) .shell .eyebrow,
body.home-photo:not(.home-light) .shell .category .num,
body.home-photo:not(.home-light) .shell .smallnote,
body.home-photo:not(.home-light) .shell footer,
body.home-photo:not(.home-light) .shell footer * {color:var(--cms-home-text) !important;}
body.home-photo:not(.home-light) #nyRevealControl {color:var(--cms-home-text) !important;}
body.home-photo:not(.home-light) #nyRevealSize {accent-color:var(--cms-home-text) !important;}
@media (hover:hover) and (pointer:fine) {
 body.home-photo:not(.home-light) .shell .wordmark:hover,
 body.home-photo:not(.home-light) .shell .wordmark:hover *,
 body.home-photo:not(.home-light) .shell nav button:hover,
 body.home-photo:not(.home-light) .shell nav a:hover,
 body.home-photo:not(.home-light) .shell .category:hover,
 body.home-photo:not(.home-light) .shell .category:hover *,
 body.home-photo:not(.home-light) .shell .left > h1:hover,
 body.home-photo:not(.home-light) .shell .left > .eyebrow:hover,
 body.home-photo:not(.home-light) .shell .left > .smallnote:hover,
 body.home-photo:not(.home-light) .shell footer > span:hover,
 body.home-photo:not(.home-light) .shell footer > span:hover * {color:var(--cms-home-bg) !important;}
}
#nyTextInk .ny-ink-copy,#nyTextInk .ny-ink-copy * {color:var(--cms-nyc-text) !important;}
#nyTextInk .ny-ink-copy.ny-ink-hover,#nyTextInk .ny-ink-copy.ny-ink-hover * {color:var(--cms-home-bg) !important;}
/* Inner pages stay cream by default and can also be customized in Pages CMS. */
body:not(.home-photo) {background:var(--cms-inner-bg) !important;color:var(--cms-inner-text);}

/* OFF / ON control: exactly the same compact width and transparent treatment as SIZE.
   The current LIGHT / colored states and their saved preferences are unchanged. */
#homeThemeControl {
  box-sizing:border-box !important;
  width:115px !important;
  display:none;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:5px !important;
  padding:4px 0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  font-size:9px !important;
  line-height:1 !important;
}
body.home-photo #homeThemeControl {display:flex !important;}
#homeThemeControl .theme-labels {
  display:flex;justify-content:space-between;align-items:center;width:100%;
}
#homeThemeControl button {
  appearance:none;border:0;background:transparent;color:inherit !important;
  margin:0;padding:3px 0;min-width:25px;
  font-size:9px !important;line-height:1;cursor:pointer;
}
#homeThemeControl button[aria-pressed="true"] {opacity:1 !important;}
#homeThemeControl button[aria-pressed="false"] {opacity:.55 !important;}
#homeThemeControl button:focus-visible {outline:1px solid currentColor;outline-offset:3px;}
#homeThemeControl .theme-track {
  display:block;width:100% !important;height:3px !important;
  position:relative;flex:none;background:currentColor;opacity:.8;
}
#homeThemeControl .theme-dot {
  width:8px;height:8px;top:50%;left:calc(100% - 4px);
  background:currentColor;border-radius:50%;position:absolute;
  transform:translateY(-50%);transition:left .25s ease;
}
body.home-light #homeThemeControl .theme-dot {left:0;}

/* CLEAN FULLSCREEN GALLERY: translucent backdrop, no glass/refraction/zoom. */
#galleryOverlay.overlay {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,13,13,.88) !important;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  padding:clamp(12px,2.4vw,32px);
}
#galleryOverlay .gallery-frame {
  width:100%; max-width:none; height:100%; max-height:none;
  padding:0; background:transparent !important; color:#F5F2EC;
  display:flex; flex-direction:column; min-height:0;
}
#galleryOverlay .gallery-top {align-items:center; flex:none; gap:14px;}
#galleryOverlay .gallery-top .eyebrow {color:rgba(245,242,236,.66);}
#galleryOverlay .gallery-top h2 {color:#F5F2EC; margin:0; font-size:clamp(14px,1.6vw,24px);}
#galleryOverlay .close {color:#F5F2EC; font-size:34px; width:44px; height:44px;}
#galleryOverlay .gallery-imagewrap { flex:1; min-height:0; width:100%; position:relative;
  display:flex; align-items:center; justify-content:center; gap:0; }
#galleryOverlay #galleryImage { width:auto; height:auto; max-width:calc(100% - 100px);
  max-height:100%; object-fit:contain; cursor:default; filter:none !important;
  transform:none !important; box-shadow:none !important; }
#galleryOverlay .arrow {position:absolute; top:50%; transform:translateY(-50%);
  display:flex !important; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0; font-size:40px; line-height:1;
  color:#fff; background:rgba(0,0,0,.45); border:0; border-radius:50%; opacity:1; z-index:2;
  touch-action:manipulation; }
#galleryOverlay .arrow:hover {background:rgba(0,0,0,.65);}
#galleryOverlay .arrow:focus-visible {outline:2px solid #fff; outline-offset:2px;}
#galleryOverlay #prevSlide {left:0;}
#galleryOverlay #nextSlide {right:0;}
#galleryOverlay .gallery-bottom { flex:none; color:rgba(245,242,236,.72);
  padding:10px 0 0; margin-top:0; font-size:11px; }
#galleryOverlay #galleryDesc { color:inherit !important; }
@media(max-width:780px){
  #galleryOverlay #galleryImage {max-width:calc(100% - 54px);max-height:100%;}
  #galleryOverlay .arrow {width:44px;height:44px;font-size:34px;}
  #galleryOverlay .gallery-top h2 {font-size:16px;}
}

/* Graphic Design: open each client gallery directly under its own title. */
#projectPreview .social-grid {display:flex;flex-direction:column;}
#projectPreview .social-grid .client-panel[hidden] {display:none !important;}
#projectPreview .social-grid .client-panel {padding:2px 0 22px;min-width:0;}
#projectPreview .social-grid .client-panel .preview-gallery {margin-top:10px;}
#projectPreview .social-grid .client-panel .case-buttons {margin-top:13px;}
#projectPreview .social-grid .social-client[aria-expanded="true"] {background:transparent;}

/* 2026-10-19 — CMS typography: one typeface for brand + UI, another for copy.
   Keep font sizes and existing color interactions as they are. */
.topbar .wordmark,
.topbar nav button,
.topbar nav a,
#langToggle,
.shell > footer > span,
#footerLocation,
#projectPreview h2,
#aboutView h1,
.category .name {
  font-family:var(--font-heading, 'Special Elite', monospace) !important;
  font-weight:var(--font-heading-weight, 600) !important;
}
/* Role below the name is reading text, not a heading. */
.topbar .wordmark span,
#projectPreview > p:not(.eyebrow),
#projectPreview #clientContent p,
#aboutView .about-copy,
#aboutView .about-copy p,
#aboutView .contact-list,
#galleryDesc {
  font-family:var(--font-editorial, 'Special Elite', monospace) !important;
  font-weight:var(--font-editorial-weight, 400) !important;
}
/* The NYC effect is never shown on About when EN / DE is toggled. */
body:not(.home-photo) #nyReveal,
body:not(.home-photo) #nyRevealControl,
body:not(.home-photo) #nyTextInk {display:none !important;}

/* 2026-10-19: project descriptions align with full image gallery width.
   Keep typeface and font size editable in Pages CMS. */
#projectPreview > p:not(.eyebrow) {
  max-width:none !important;
  width:100% !important;
  box-sizing:border-box;
}
/* The NYC overlay must not clone the nested wordmark/tagline,
   so there is no doubled text on the home screen. */
body.home-photo .topbar .wordmark { isolation:isolate; }

/* About: photo starts level with GET IN TOUCH; right column remains unchanged.
   Scope to desktop About only; do not use transforms or fixed offsets. */
@media (min-width: 781px) {
  #aboutView .about-layout {
    align-items: start !important;
  }
  #aboutView .about-left {
    align-self: start !important;
    justify-content: flex-start !important;
  }
  #aboutView .about-portrait {
    transform: none !important;
  }
}

/* About editorial grid: all right-column content shares one left edge.
   Reduce the excessive contact-to-bio gap without shifting the portrait. */
@media (min-width:781px) {
  #aboutView .about-layout { align-items:start !important; }
  #aboutView .about-left { align-self:start !important; }
  #aboutView .about-copy {
    align-self:start !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:22px !important;
  }
  #aboutView .about-contacts { padding-bottom:0 !important; margin-bottom:0 !important; }
  #aboutView .about-bio { margin:0 !important; padding:0 !important; }
  #aboutView .about-bio p:first-child { margin-top:0 !important; }
  #aboutView .about-contacts,
  #aboutView .about-bio { width:100%; text-align:left; }
}

/* ABOUT: precise contact-to-biography spacing (desktop only).
   A block flow avoids flex distribution adding unexpected blank space. */
@media (min-width: 781px) {
  #aboutView .about-layout { align-items: start !important; }
  #aboutView .about-copy {
    display: block !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #aboutView .about-contacts {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #aboutView .about-bio {
    display: block !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #aboutView .about-bio p:first-child { margin-top: 0 !important; }
  #aboutView .about-left { align-self: start !important; justify-content: flex-start !important; }
}

/* 2026-10-25: Merge mobile NYC interaction into the main responsive site.
   Preserve desktop About alignment and the separate DISPLAY popover.
   The original WebGL shader and touch handlers are already shared in app.js. */
@media (hover:none), (pointer:coarse) {
  body.home-photo #nyReveal {display:block !important;}
  body.home-photo #nyTextInk {display:none !important;}
}
@media (max-width:780px) and (pointer:coarse) {
  html:has(body.home-photo), body.home-photo {overscroll-behavior-y:none;}
  /* Dragging on the landing area manipulates the NYC mask, not the page.
     Buttons, links and the DISPLAY popover retain their own touch behavior. */
  body.home-photo #workView .work-area {touch-action:pan-x;}
  body.home-photo .shell {padding-bottom:77px !important;}
}