/* Local overrides for joelsilverman.com offline mirror.
   Body: real Calluna Sans (Monotype-licensed webfont kit, loaded locally).
   Heading: Cormorant Garamond (Google Fonts).
   Adelle Sans (paid, unlicensed) falls through to the system stack. */

@font-face {
  font-family: "calluna-sans";
  src: url("fonts/CallunaSansRegular/font.woff2") format("woff2"),
       url("fonts/CallunaSansRegular/font.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Calluna (serif companion). NOTE: the licensed MyFonts kit only ships the
   Regular weight — there is no Calluna Bold woff in it. font-weight:700 below
   will synthesize a faux-bold until a real bold is licensed. */
@font-face {
  font-family: "calluna";
  src: url("fonts/CallunaRegular/font.woff2") format("woff2"),
       url("fonts/CallunaRegular/font.woff")  format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --body-font-font-family: "calluna-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --heading-font-font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
}

/* Remap the typekit-named families to the licensed fonts in case any rule
   bypasses the CSS variables. */
body, p, li, td, dd, dt, blockquote, button, input, select, textarea,
.sqs-html-content, .sqs-block-content,
[class*="paragraph"], [class*="body-font"] {
  font-family: var(--body-font-font-family) !important;
}

h1, h2, h3, h4, h5, h6,
.sqs-block-html h1, .sqs-block-html h2, .sqs-block-html h3,
[class*="heading"] {
  font-family: var(--heading-font-font-family) !important;
}

/* Hide the persistent cart icon (no e-commerce locally). */
.user-accounts-redesigned-buttons,
.cart-button,
.icon-cart,
a[href*="/cart"] {
  display: none !important;
}

/* Default body bg if a section's color theme fails to apply */
body { background: #ffffff; color: #111; }

/* === Site-wide media treatment === */

/* The "blur": four-edge feather mask. Two gradient mask layers (horizontal +
   vertical) composited with "intersect" — a pixel stays visible only where both
   gradients are opaque, so the frame dissolves into the section background.
   EVERY video gets a feather — see CLAUDE.md — but the SIZE differs:
   - internally-served <video> (class "sqs-native-video-local"): 25px feather.
   - embedded Vimeo <iframe>: smaller (10px) — the Vimeo player's controls
     (play / scrubber / volume) sit right at the edge, so a big feather crops
     into them. */
video.sqs-native-video-local {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 25px, #000 calc(100% - 25px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 25px, #000 calc(100% - 25px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 25px, #000 calc(100% - 25px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 25px, #000 calc(100% - 25px), transparent 100%);
  mask-composite: intersect;
}
iframe[src*="player.vimeo.com"] {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-composite: intersect;
}

/* Still photos (image blocks): drop-shadow style #1 — a layered "elevation
   stack" of three drop-shadows (contact / mid / ambient): sharp & dark close to
   the print, soft & faint far out, biased bottom-right. NOTE: this targets
   standalone image blocks, not gallery-grid thumbnails. */
.sqs-block.image-block {
  filter:
    drop-shadow(1px 2px 3px rgba(0,0,0,0.34))
    drop-shadow(6px 9px 12px rgba(0,0,0,0.24))
    drop-shadow(16px 24px 34px rgba(0,0,0,0.16));
}

/* Marquee / scrolling-text block: never pause or slow on hover. The block's
   data-paused-on-hover is set to "false" in the HTML; this is a CSS backstop in
   case the remote Squarespace marquee CSS has a :hover pause rule. */
[class*="Marquee"]:hover,
[class*="Marquee"]:hover * { animation-play-state: running !important; }

/* /silverman-cv.html: hovering an indented list item turns it one of the 8
   front-label colors; the colors cycle one-per-item, assigned to each item as a
   --cv-hc custom property by a small inline script on that page. The section
   headings ("Education", "Exhibitions…", "Employment", "Residencies…") have no
   margin-left, so the [style*="margin-left"] selector skips them. (On other
   pages --cv-hc is unset, so the :hover rule resolves to nothing — harmless.) */
.sqs-html-content p[style*="margin-left"] { transition: color 0.18s ease; }
.sqs-html-content p[style*="margin-left"]:hover,
.sqs-html-content p[style*="margin-left"]:hover * { color: var(--cv-hc) !important; }

/* /silverman-cv.html: hovering the "CV" page title blurs it 10px, scales it up,
   and drops it to 60% opacity over 0.3s — and reverts when the cursor leaves.
   (Using transform:scale for the "+10pt" boost since the base h3 size lives in
   Squarespace's remote CSS and can't be read; ~1.35× ≈ a ~10pt jump on it.) */
#block-62e85cb35d8d68e8eced7b0e h3 {
  transition: filter 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
}
#block-62e85cb35d8d68e8eced7b0e h3:hover {
  filter: blur(4px);
  transform: scale(1.25);
  opacity: 0.7;
}

/* --- Page-specific section tweaks --- */

/* Front page (home.html / index.html): feather the inset hero "box" of each
   project section (the .section-background that holds the looping video / poster
   image), 75px on all four edges — same look as the project-page videos.
   Scoped to the specific project sections Joel listed (lidargraphs, projections,
   time portals, drift the map, thirty-six views, flying camera/aerial,
   subterranea, sculpture). */
[data-section-id="68da02a2c1c36a063b6f489c"] .section-background, /* lidargraphs */
[data-section-id="675a3cd5885b8c568c185a60"] .section-background, /* projections */
[data-section-id="67587fe2c79dab0ed23a7129"] .section-background, /* time portals */
[data-section-id="69471c22503c7d613cb679d1"] .section-background, /* drift the map */
[data-section-id="675e80136ecf8361bf5ddbac"] .section-background, /* thirty-six views */
[data-section-id="67587fd1b2cd3d4b01b76a54"] .section-background, /* flying camera / aerial */
[data-section-id="67587fd1b2cd3d4b01b76a4e"] .section-background, /* subterranea */
[data-section-id="675a3d4ee9dbf53d13919a68"] .section-background  /* sculpture */ {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 75px, #000 calc(100% - 75px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 75px, #000 calc(100% - 75px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 75px, #000 calc(100% - 75px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 75px, #000 calc(100% - 75px), transparent 100%);
  mask-composite: intersect;
}

/* Static-image section backgrounds — Squarespace's BackgroundImageFXParallax
   controller relies on a webpack chunk that was never localized
   (background-image-fx-parallax.<hash>.js → 404 locally, 200/HTML on Pages with
   nosniff, so Chrome refuses to execute the fallback HTML as JS). Paint the
   same photograph as a plain CSS background-image on the section-background-
   content div so the section renders regardless of whether the JS controller
   ever instantiates. Object-position mirrors the inline style on each <img>. */
[data-section-id="675e80136ecf8361bf5ddbac"] .section-background-content {  /* thirty-six views */
  background-image: url("../Website%20Assets/content/v1/616d0b815843476e9f964c29/ea1f2c90-527a-47d7-b471-2fb75cebb074/Signature+Cover+Image+banner+21.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
[data-section-id="67587fd1b2cd3d4b01b76a4e"] .section-background-content {  /* subterranea */
  background-image: url("../Website%20Assets/content/v1/616d0b815843476e9f964c29/c0ccac97-02b2-4380-abc5-22fd05525b8e/delete+Elephants+Feet+parallax+web.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
[data-section-id="675a3d4ee9dbf53d13919a68"] .section-background-content {  /* sculptural */
  background-image: url("../Website%20Assets/content/v1/616d0b815843476e9f964c29/b326f7b5-0c9b-4096-a254-b13174f78fca/11.10.24+Glass+Mirror+Photo+v5.jpg");
  background-size: cover;
  background-position: 51.4% 68.8%;
  background-repeat: no-repeat;
}

/* Front page (home.html / index.html): remove the dark semi-transparent box
   ("shadow") behind each project name. Each name sits in a text block whose
   --tweak-text-block-background-color is hsla(black, 0.4) with a flat-left /
   rounded-right pill shape — Joel wants those gone. Override the variable (and
   background-color directly) to transparent on each name block. */
#block-54838281d62e8f8a8bb4, /* lidargraphs */
#block-16db383e93a6086f55bd, /* projections */
#block-96b22f93bb2b487e8677, /* time portals */
#block-ab4be81d60dbc645048a, /* drift the map */
#block-9be7df83f0adfb6eec4f, /* thirty-six views of stone mountain */
#block-b04e7c7deaeef02f6a11, /* flying camera */
#block-08272f082ebaa8aeef4e, /* subterranea/superterranea */
#block-8191aa001418c1bd9881, /* sculpture */
#block-40dc595455571d75a9be, /* nocturnes (hidden) */
#block-f6824d216c381a55b8c7  /* swamp (hidden) */ {
  --tweak-text-block-background-color: transparent !important;
  background: transparent !important;
}

/* Front page (home.html / index.html): a big colored "echo" behind each project
   name. The WHITE name text is the larger size; behind it sits a ::before
   duplicate of the name in the project's color, 15pt LARGER than the white,
   offset +10px/+10px, blurred 5px, z-index:-1 (behind the white, above the
   section background), at constant 100% opacity (no pulse). Text hard-coded per
   block. */
#block-54838281d62e8f8a8bb4 h3 a,
#block-16db383e93a6086f55bd h3 a,
#block-96b22f93bb2b487e8677 h3 a,
#block-ab4be81d60dbc645048a h3 a,
#block-9be7df83f0adfb6eec4f h3 a,
#block-b04e7c7deaeef02f6a11 h3 a,
#block-08272f082ebaa8aeef4e h3 a,
#block-8191aa001418c1bd9881 h3 a { position: relative !important; z-index: 1 !important; }
#block-54838281d62e8f8a8bb4 h3 a::before,
#block-16db383e93a6086f55bd h3 a::before,
#block-96b22f93bb2b487e8677 h3 a::before,
#block-ab4be81d60dbc645048a h3 a::before,
#block-9be7df83f0adfb6eec4f h3 a::before,
#block-b04e7c7deaeef02f6a11 h3 a::before,
#block-08272f082ebaa8aeef4e h3 a::before,
#block-8191aa001418c1bd9881 h3 a::before {
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  font-size: calc(1em + 3pt);   /* 3pt larger than the white name */
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transform: translate(10px, 12px);
  filter: blur(3px);
  opacity: 0.7;
  pointer-events: none;
}
/* All echoes currently black (#000) — was Olive #788c5d. */
#block-54838281d62e8f8a8bb4 h3 a::before { content: "lidargraphs"; color: #000000; }
#block-16db383e93a6086f55bd h3 a::before { content: "projections"; color: #ffffff; }                       /* white — dark hero asset */
#block-96b22f93bb2b487e8677 h3 a::before { content: "time portals"; color: #000000; }
#block-ab4be81d60dbc645048a h3 a::before { content: "drift the map"; color: #000000; }
#block-9be7df83f0adfb6eec4f h3 a::before { content: "thirty-six views of stone mountain"; color: #000000; }
#block-b04e7c7deaeef02f6a11 h3 a::before { content: "flying camera"; color: #000000; }
#block-08272f082ebaa8aeef4e h3 a::before { content: "subterranea/superterranea"; color: #ffffff; }         /* white — dark hero asset */
#block-8191aa001418c1bd9881 h3 a::before { content: "sculptural"; color: #000000; }
/* …and the white name labels back at the larger size (parent text size + 15pt).
   On the <h3> only — not its descendants — so the bump doesn't compound; the
   colored ::before is sized relative to this, so it stays ~15pt above the white. */
#block-54838281d62e8f8a8bb4 h3,
#block-16db383e93a6086f55bd h3,
#block-96b22f93bb2b487e8677 h3,
#block-ab4be81d60dbc645048a h3,
#block-9be7df83f0adfb6eec4f h3,
#block-b04e7c7deaeef02f6a11 h3,
#block-08272f082ebaa8aeef4e h3,
#block-8191aa001418c1bd9881 h3 { font-size: calc(1em + 15pt) !important; }
/* …and a black "ring" around the white name text for legibility — built from
   text-shadows (not text-stroke), so the white glyphs keep their exact size and
   the black sits entirely behind/around them. A solid 1px ring in 8 directions
   plus a soft 3px glow, at 70% black. Only on the white text, not the echo. */
#block-54838281d62e8f8a8bb4 h3 a strong,
#block-16db383e93a6086f55bd h3 a strong,
#block-96b22f93bb2b487e8677 h3 a strong,
#block-ab4be81d60dbc645048a h3 a strong,
#block-9be7df83f0adfb6eec4f h3 a strong,
#block-b04e7c7deaeef02f6a11 h3 a strong,
#block-08272f082ebaa8aeef4e h3 a strong,
#block-8191aa001418c1bd9881 h3 a strong {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.7),  1px -1px 0 rgba(0,0,0,0.7),
    -1px  1px 0 rgba(0,0,0,0.7),  1px  1px 0 rgba(0,0,0,0.7),
    -1px  0   0 rgba(0,0,0,0.7),  1px  0   0 rgba(0,0,0,0.7),
     0  -1px  0 rgba(0,0,0,0.7),  0   1px  0 rgba(0,0,0,0.7),
     0   0   3px rgba(0,0,0,0.6) !important;
}
/* …and on hover, each project name's WHITE text turns its design-system color
   (the colored echo behind it is untouched). !important to beat the <span>'s
   inline color:rgb(255,253,253). */
#block-54838281d62e8f8a8bb4 h3 a strong, #block-54838281d62e8f8a8bb4 h3 a span,
#block-16db383e93a6086f55bd h3 a strong, #block-16db383e93a6086f55bd h3 a span,
#block-96b22f93bb2b487e8677 h3 a strong, #block-96b22f93bb2b487e8677 h3 a span,
#block-ab4be81d60dbc645048a h3 a strong, #block-ab4be81d60dbc645048a h3 a span,
#block-9be7df83f0adfb6eec4f h3 a strong, #block-9be7df83f0adfb6eec4f h3 a span,
#block-b04e7c7deaeef02f6a11 h3 a strong, #block-b04e7c7deaeef02f6a11 h3 a span,
#block-08272f082ebaa8aeef4e h3 a strong, #block-08272f082ebaa8aeef4e h3 a span,
#block-8191aa001418c1bd9881 h3 a strong, #block-8191aa001418c1bd9881 h3 a span { transition: color 0.18s ease; }
#block-54838281d62e8f8a8bb4 h3 a:hover strong, #block-54838281d62e8f8a8bb4 h3 a:hover span { color: #74c4a4 !important; } /* lidargraphs — Cactus (saturation-boosted) */
#block-16db383e93a6086f55bd h3 a:hover strong, #block-16db383e93a6086f55bd h3 a:hover span { color: #788c5d !important; } /* projections — Olive */
#block-96b22f93bb2b487e8677 h3 a:hover strong, #block-96b22f93bb2b487e8677 h3 a:hover span { color: #6a9bcc !important; } /* time portals — Sky */
#block-ab4be81d60dbc645048a h3 a:hover strong, #block-ab4be81d60dbc645048a h3 a:hover span { color: #9685e0 !important; } /* drift the map — Heather (saturation-boosted) */
#block-9be7df83f0adfb6eec4f h3 a:hover strong, #block-9be7df83f0adfb6eec4f h3 a:hover span { color: #c46686 !important; } /* thirty-six views — Fig */
#block-b04e7c7deaeef02f6a11 h3 a:hover strong, #block-b04e7c7deaeef02f6a11 h3 a:hover span { color: #ebcece !important; } /* flying camera — Coral */
#block-08272f082ebaa8aeef4e h3 a:hover strong, #block-08272f082ebaa8aeef4e h3 a:hover span { color: #dbb028 !important; } /* subterranea — gold/mustard */
#block-8191aa001418c1bd9881 h3 a:hover strong, #block-8191aa001418c1bd9881 h3 a:hover span { color: #d97757 !important; } /* sculptural — Clay */
/* …and shift all the project-name labels 20px to the right. */
#block-54838281d62e8f8a8bb4 h3,
#block-16db383e93a6086f55bd h3,
#block-96b22f93bb2b487e8677 h3,
#block-ab4be81d60dbc645048a h3,
#block-9be7df83f0adfb6eec4f h3,
#block-b04e7c7deaeef02f6a11 h3,
#block-08272f082ebaa8aeef4e h3,
#block-8191aa001418c1bd9881 h3 { padding-left: 100px !important; }
@media (min-width: 768px) {
  /* …and widen the project-name cells so the labels don't wrap (the 100px left
     padding was eating into the narrow cells). All anchored at column 1, rows
     unchanged; col-end extended to 18. */
  .fe-block-54838281d62e8f8a8bb4 { grid-area: 3/1/5/18 !important; } /* lidargraphs */
  .fe-block-16db383e93a6086f55bd { grid-area: 4/1/6/18 !important; } /* projections */
  .fe-block-96b22f93bb2b487e8677 { grid-area: 3/1/5/18 !important; } /* time portals */
  .fe-block-ab4be81d60dbc645048a { grid-area: 3/1/5/18 !important; } /* drift the map */
  .fe-block-9be7df83f0adfb6eec4f { grid-area: 3/1/5/18 !important; } /* thirty-six views */
  .fe-block-b04e7c7deaeef02f6a11 { grid-area: 4/1/6/18 !important; } /* flying camera */
  .fe-block-08272f082ebaa8aeef4e { grid-area: 3/1/5/18 !important; } /* subterranea */
  .fe-block-8191aa001418c1bd9881 { grid-area: 3/1/5/18 !important; } /* sculpture */
}

/* Front page (home.html / index.html): the "Visual artist Joel Silverman…" crawl.
   Squarespace's marquee is a JS-driven component whose speed reacts to hover and
   page-scroll; it's been replaced in the HTML with a plain pure-CSS marquee
   (constant speed, immune to hover & scroll). Styling for that: */
#block-a14553874d67e12677b1,
#block-a14553874d67e12677b1 .sqs-block-content,
#block-a14553874d67e12677b1 .css-marquee {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* …and collapse the SECTION around the crawl: it's section-height--small (33vh
   min-height) with vertical-alignment--middle, so the crawl floated in the
   middle of a 33vh band. Drop the min-height, the content-wrapper padding, and
   collapse the 3-row fluid-engine grid to a single auto row. */
[data-section-id="68da0435b3a5cf6d0c448812"] { min-height: 0 !important; }
[data-section-id="68da0435b3a5cf6d0c448812"] > .content-wrapper { padding-top: calc(2vmax + 4.4rem) !important; padding-bottom: calc(2vmax + 2.2rem) !important; }
[data-section-id="68da0435b3a5cf6d0c448812"] .fluid-engine { grid-template-rows: minmax(0, auto) !important; }
.css-marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.css-marquee-track {
  display: flex;
  width: max-content;
  animation: css-marquee-scroll 60s linear infinite;   /* 60s per loop (one text-copy width); constant linear speed */
  animation-play-state: running !important;            /* Squarespace's scrolling.visitor.js controller has mouseenter/leave handlers driving a `hover.value` uniform; without this !important the CSS animation pauses when the mouse is off the block. Force always-running. */
}
.css-marquee:hover .css-marquee-track { animation-play-state: running !important; }  /* belt-and-suspenders: also keep running on hover */
.css-marquee-word { transition: color 0.15s ease; }
.css-marquee-word:hover { color: #d97757; }   /* Clay — only the word under the cursor turns Clay as it scrolls past */
.css-marquee-item {
  display: inline-block;
  flex: 0 0 auto;
  padding-right: 1em;                                   /* gap between repeats (matches the original 1em) */
  font-family: var(--heading-font-font-family);         /* Cormorant Garamond, like the original heading-1 */
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
}
@keyframes css-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }                /* track has 4 identical copies; -25% = exactly one copy */
}
@media (prefers-reduced-motion: reduce) {
  .css-marquee-track { animation: none; transform: translateX(0); }
}

/* Front page (home.html / index.html): remove the "View Series" buttons from the
   project sections entirely (text + colored button). The project name itself is
   still a link to the project page, so navigation isn't lost. */
body#collection-67587fd1b2cd3d4b01b76a2f .sqs-block.sqs-block-button { display: none !important; }

/* Front page (home.html / index.html): hide the "nocturnes" and "swamp" project
   sections entirely — Joel doesn't want them shown or linked from the front page.
   (The project pages themselves at /projects/nocturnes.html and /projects/swamp.html
   are untouched, just no longer surfaced here.) */
[data-section-id="67587fd1b2cd3d4b01b76a51"], /* nocturnes */
[data-section-id="67587fd1b2cd3d4b01b76a57"] /* swamp */ { display: none !important; }

/* /projects/lidargraphs.html — halve the vertical gap between the intro-text
   section and the first looping-video section. Squarespace gives both of these
   section-height--small + vertical-alignment--middle sections 3.3vmax top &
   bottom padding on .content-wrapper; we cut the two facing edges to 1.65vmax. */
[data-section-id="69093b3d4b623a45541db523"] > .content-wrapper { padding-bottom: 1.65vmax !important; }
[data-section-id="69fad4c6bb6e2240314e44fc"] > .content-wrapper { padding-top: 0 !important; padding-bottom: 1.65vmax !important; }

/* /projects/projections.html — tighten the "shall be like a tree…" section:
   half top padding (sits closer under the "projections" page title) AND half
   bottom padding (gap to the "ponce de leon time machine" section below).
   Default for this section-height--small + vertical-alignment--middle section
   is 3.3vmax top/bottom. */
[data-section-id="675d5dc84529d55100239e3a"] > .content-wrapper { padding-top: 1.65vmax !important; padding-bottom: 1.65vmax !important; }
/* …and half the top padding of the next section ("ponce de leon time machine")
   so the gap between the two sections is halved overall (3.3+3.3 -> 1.65+1.65). */
[data-section-id="68da10a9e1c31e387e3a6763"] > .content-wrapper { padding-top: 1.65vmax !important; }
/* The added "zero mile post" section sits between the "projections" title and
   "shall be like a tree…": halve its bottom padding so the gap down to
   "shall be like a tree…" isn't doubled-up. */
[data-section-id="zmpsec675d5dc84529d551"] > .content-wrapper { padding-bottom: 1.65vmax !important; }

/* home.html / index.html — "Off the Wall banner" hero video:
   fade the section-background (the video layer + its 0.15 image tint) from
   opacity 1 at the top of the page to opacity 0 over the first 80vh of scroll,
   so as you scroll past the opening hero it dissolves to the section's grey
   ("dark" theme) background. Scroll-driven; Chrome 115+ — wrapped in @supports
   so browsers without scroll-timelines just keep the hero fully opaque.
   The "Off the Wall banner" video lives in section 68da061a52d2cc483c40721b
   (UUID 3937994c-d360-452c-bd17-ab84f8a7d6e7). If the fade should finish
   sooner/later, change the 80vh in animation-range. */
@supports (animation-timeline: scroll()) {
  @keyframes off-the-wall-scroll-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  [data-section-id="68da061a52d2cc483c40721b"] .section-background {
    animation: off-the-wall-scroll-fade linear forwards;
    animation-timeline: scroll(root block);
    animation-range: 0 80vh;
  }
}

/* ---- Sticky header (site-wide) ----
   Pin the top row (wordmark "joel silverman" + Artist Statement / CV / Writing /
   Contact) so it persists as you scroll. position: sticky keeps it in normal
   flow, so there's no layout jump. Also trim the header's vertical padding so
   the pinned bar stays slim rather than thick & chunky — adjust the 0.5rem
   values to taste. The pinned bar's background is an explicit GRAY (not the
   theme's near-black, not white) — tweak #71726d to whatever gray you want. */
#header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 1000;
  background-color: #71726d !important;
  --solidHeaderBackgroundColor: #71726d !important;
  --gradientHeaderBackgroundColor: #71726d !important;
}
/* subtle 5px feather hanging just below the gray bar so it dissolves into the
   content below instead of ending on a hard line. (Done as an additive gray
   gradient layered over the content — NOT a mask on the header itself, which
   would have made the header's bottom 5px translucent and let the white page
   background peek through above the first section.) */
#header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
  background: linear-gradient(to bottom, #71726d, rgba(113,114,109,0));
  pointer-events: none;
}
#header .header-background,
#header .header-blur-background {
  background-color: #71726d !important;
  background-image: none !important;
}
#header .header-announcement-bar-wrapper {
  /* env(safe-area-inset-top) keeps the wordmark clear of the iPhone status
     bar / notch now that the pages carry viewport-fit=cover. Resolves to 0px
     on desktop and non-notched devices, so this is a no-op there. */
  padding-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 2rem !important;
}

/* home.html / index.html — kill the empty leading section (an empty Fluid-Engine
   "dark" full-bleed band, section 67587fd1b2cd3d4b01b76a48) that sits between the
   header and the "Off the Wall banner" hero video. It has no blocks and no
   background media, so it just reads as weird dead space above the video.
   Removing it lets the hero start right under the (now sticky) header. */
[data-section-id="67587fd1b2cd3d4b01b76a48"] { display: none !important; }

/* home.html / index.html — "subterranea" slide: extra parallax.
   Squarespace's built-in BackgroundImageFXParallax has no intensity knob, so we
   add our own scroll-driven translateY on the slide's background image. CSS
   animations outrank JS-set inline transforms, so this drives (or, if SQSP sets
   the transform on a different element, composes with) the existing parallax.
   The small scale() gives the image extra height (slack) so the added travel
   doesn't reveal an edge. Section 67587fd1b2cd3d4b01b76a4e = subterranea
   (Elephants Feet image). Tune the 2% / scale values by eye.
   If the pan direction looks backwards, swap the two translateY signs. */
@supports (animation-timeline: view()) {
  @keyframes subterranea-extra-parallax {
    from { transform: translateY(8%)  scale(1.20); }
    to   { transform: translateY(-8%) scale(1.20); }
  }
  [data-section-id="67587fd1b2cd3d4b01b76a4e"] .background-image-fx {
    animation: subterranea-extra-parallax linear both;
    animation-timeline: view(block);
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-section-id="67587fd1b2cd3d4b01b76a4e"] .background-image-fx { animation: none !important; }
}

/* =================================================================
   ============ MOBILE LAYOUT (<= 767px) — iPhone-first ============
   =================================================================
   Strategy: keep the desktop site intact above 768px; below that,
   collapse every Fluid-Engine grid to a single column, hide the desktop
   nav, and surface a hamburger + slide-out drawer for the four "protected
   zone" pages (Artist Statement / CV / Writing / Contact).

   The mobile-nav HTML markup is injected at the start of <body> by
   postprocess.py. The hamburger + scroll-direction reveal are wired by
   _local/mobile-nav.js. Visibility of those elements is controlled here.
*/

/* ---- The mobile-nav elements are hidden by default (desktop) ---- */
#mobile-nav-root,
#mobile-nav-toggle,
#mobile-mini-header,
#mobile-nav-drawer,
#mobile-nav-scrim { display: none; }

@media (max-width: 767px) {
  /* Body background — desktop falls through to Squarespace's per-section
     themes, but on mobile the unscoped white `body { background: #ffffff }`
     above leaks through above the header (iOS Safari URL-bar area) and as a
     band between header & first section. Paint it the same gray as the
     header so the page reads continuous. */
  html, body { background: #71726d !important; }

  /* ---- 1. The big top wordmark: KEEP IT PERSISTENT (sticky) on mobile.
     The desktop #header rule above already sets position:sticky + gray bg —
     we just inherit that on mobile too. (Earlier this section un-stuck the
     header so the wordmark would scroll away; Joel reversed that decision —
     wordmark now persists at top.) Slim the padding so the persistent bar
     isn't chunky, hide Squarespace's desktop nav, and size the wordmark
     larger than the section labels so it reads as the page-level title. ---- */
  #header .header-announcement-bar-wrapper {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }
  /* Hide the nav items + burger Squarespace ships inside BOTH the desktop
     and mobile header wrappers (we use our own hamburger). CRITICAL: do NOT
     hide `.header-display-mobile` itself — that wrapper contains the mobile
     instance of the wordmark. Hiding it removed the wordmark entirely. */
  #header .header-nav,
  #header .header-burger,
  #header .header-actions,
  #header .header-mobile-nav-toggle,
  #header .burger-box { display: none !important; }
  /* Center the wordmark on its own. */
  #header .header-title {
    width: 100% !important;
    text-align: center !important;
    flex: 1 1 100% !important;
  }
  #header .header-title-text a,
  #header #site-title {
    /* Larger than mobile section labels so the wordmark reads as page title. */
    font-size: clamp(2.2rem, 10vw, 2.8rem) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.05 !important;
  }
  /* Mini-header (the slim scroll-up reveal) is now redundant — the main
     wordmark persists. Hide it. (The JS class toggle still runs but styles
     nothing.) */
  #mobile-mini-header { display: none !important; }

  /* ---- 2. Mobile-nav UI ---- */
  /* The floating hamburger is always present on mobile. */
  #mobile-nav-root { display: block; }
  #mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    background: rgba(113, 114, 109, 0.85);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2002;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  #mobile-nav-toggle .mobile-nav-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* Slim sticky mini-header (small wordmark) — appears on scroll-up only. */
  #mobile-mini-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 16px;
    background: #71726d;
    z-index: 2001;
    transform: translateY(-110%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  }
  #mobile-mini-header::after {
    /* same 10px feather as desktop header */
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 10px;
    background: linear-gradient(to bottom, #71726d, rgba(113,114,109,0));
    pointer-events: none;
  }
  body.mobile-mini-header-shown #mobile-mini-header { transform: translateY(0); }
  #mobile-mini-header .mobile-mini-wordmark {
    color: #fff;
    text-decoration: none;
    font-family: var(--heading-font-font-family);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
  }
  /* Slide-out drawer (closed state). */
  #mobile-nav-drawer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 1.4rem;
    position: fixed;
    top: 0; right: 0;
    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;
    padding: 0 28px;
    background: #71726d;
    z-index: 2003;
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.25);
  }
  #mobile-nav-drawer a {
    color: #fff !important;
    text-decoration: none;
    font-family: var(--heading-font-font-family);
    font-size: 1.65rem;
    letter-spacing: 0.01em;
    line-height: 1.1;
    padding: 0.25rem 0;
    transition: color 0.18s ease;
  }
  #mobile-nav-drawer a.mobile-nav-home {
    font-size: 1.1rem;
    opacity: 0.7;
    margin-bottom: 0.4rem;
  }
  #mobile-nav-drawer a:active { color: #d97757 !important; } /* Clay tap state */
  #mobile-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  body.mobile-nav-open #mobile-nav-drawer { transform: translateX(0); }
  body.mobile-nav-open #mobile-nav-scrim   { opacity: 1; pointer-events: auto; }
  body.mobile-nav-open #mobile-nav-toggle .mobile-nav-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mobile-nav-open #mobile-nav-toggle .mobile-nav-bar:nth-child(2) { opacity: 0; }
  body.mobile-nav-open #mobile-nav-toggle .mobile-nav-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.mobile-nav-open { overflow: hidden; }

  /* ---- 3. Collapse every Fluid-Engine grid to a single column ----
     The inline <style> blocks in each page assign each .fe-block a specific
     grid-area. Overriding the entire block class with !important is wider
     than the page-scoped inline selectors so it wins. Rows go to auto. */
  .fluid-engine { grid-template-rows: auto !important; }
  .fluid-engine .fe-block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  /* The full-bleed background-cover blocks keep their 1/1/-1/-1 because the
     base rule already targets them. Restore: */
  .fluid-engine [style*="grid-area: 1/1/-1/-1"],
  .fluid-engine [style*="grid-area:1/1/-1/-1"] {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
  }

  /* ---- 4. Section padding / heights — give sections breathing room
     but stop the tall hero/section heights from leaving empty white bands. */
  .page-section .content-wrapper {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .section-height--small,
  .section-height--medium { min-height: auto !important; }
  /* Sections that need a tall mobile min-height so their background video /
     image can read. Carefully SCOPED so the slim marquee section
     (68da0435b3a5cf6d0c448812) stays short. Hero gets a touch more (65vh) so
     it feels like a hero; project sections at 60vh. */
  [data-section-id="68da061a52d2cc483c40721b"] /* Off the Wall — hero */ {
    min-height: 65vh !important;
  }
  [data-section-id="68da02a2c1c36a063b6f489c"], /* lidargraphs */
  [data-section-id="675a3cd5885b8c568c185a60"], /* projections */
  [data-section-id="67587fe2c79dab0ed23a7129"], /* time portals */
  [data-section-id="69471c22503c7d613cb679d1"], /* drift the map */
  [data-section-id="675e80136ecf8361bf5ddbac"], /* thirty-six views */
  [data-section-id="67587fd1b2cd3d4b01b76a54"], /* flying camera */
  [data-section-id="67587fd1b2cd3d4b01b76a4e"], /* subterranea */
  [data-section-id="675a3d4ee9dbf53d13919a68"]  /* sculpture */ {
    min-height: 60vh !important;
  }

  /* ---- 5. Front-page project labels — drop the 100px desktop padding,
     shrink the +15pt boost, and switch the hover-only project colors to a
     permanent assignment (touch devices don't fire :hover). The colored
     "echo" behind each label stays, slightly tightened. */
  #block-54838281d62e8f8a8bb4 h3,
  #block-16db383e93a6086f55bd h3,
  #block-96b22f93bb2b487e8677 h3,
  #block-ab4be81d60dbc645048a h3,
  #block-9be7df83f0adfb6eec4f h3,
  #block-b04e7c7deaeef02f6a11 h3,
  #block-08272f082ebaa8aeef4e h3,
  #block-8191aa001418c1bd9881 h3 {
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: calc(1em + 6pt) !important;
    line-height: 1.05 !important;
  }
  /* tighten the colored echo so it doesn't blur into the next line */
  #block-54838281d62e8f8a8bb4 h3 a::before,
  #block-16db383e93a6086f55bd h3 a::before,
  #block-96b22f93bb2b487e8677 h3 a::before,
  #block-ab4be81d60dbc645048a h3 a::before,
  #block-9be7df83f0adfb6eec4f h3 a::before,
  #block-b04e7c7deaeef02f6a11 h3 a::before,
  #block-08272f082ebaa8aeef4e h3 a::before,
  #block-8191aa001418c1bd9881 h3 a::before {
    transform: translate(5px, 6px);
    filter: blur(2px);
    font-size: calc(1em + 1pt);
    opacity: 0.85;
  }
  /* Project labels stay WHITE on mobile (matching desktop). Permanent-color
     rule was removed — it was hard to read against the section backgrounds.
     The colored echo behind each label is what provides the color accent. */

  /* ---- 6. Videos: shrink the 25px feather to 10px on mobile (25px is ~6%
     of a 390px viewport — too aggressive); Vimeo 10px stays. ---- */
  video.sqs-native-video-local {
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    mask-image:
      linear-gradient(to right,  transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  }
  /* Project-section background videos: shrink 75px feather to 18px on mobile. */
  [data-section-id="68da02a2c1c36a063b6f489c"] .section-background,
  [data-section-id="675a3cd5885b8c568c185a60"] .section-background,
  [data-section-id="67587fe2c79dab0ed23a7129"] .section-background,
  [data-section-id="69471c22503c7d613cb679d1"] .section-background,
  [data-section-id="675e80136ecf8361bf5ddbac"] .section-background,
  [data-section-id="67587fd1b2cd3d4b01b76a54"] .section-background,
  [data-section-id="67587fd1b2cd3d4b01b76a4e"] .section-background,
  [data-section-id="675a3d4ee9dbf53d13919a68"] .section-background {
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image:
      linear-gradient(to right,  transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  /* ---- 7. Image-block drop-shadow stack — tone down on small viewports
     so the offsets don't read as "smudge" at 1× pixel density. ---- */
  .sqs-block.image-block {
    filter:
      drop-shadow(1px 1px 2px rgba(0,0,0,0.34))
      drop-shadow(3px 4px 6px rgba(0,0,0,0.22))
      drop-shadow(7px 10px 14px rgba(0,0,0,0.14));
  }

  /* ---- 8. Marquee — shrink the giant heading so it fits a narrow viewport. */
  .css-marquee-item { font-size: 1.4rem !important; }

  /* ---- 9. Hero "Off the Wall" — make sure the 80vh fade still finishes on
     a short mobile viewport (the user is scrolling fast). 50vh feels right. */
  @supports (animation-timeline: scroll()) {
    [data-section-id="68da061a52d2cc483c40721b"] .section-background {
      animation-range: 0 50vh !important;
    }
  }

  /* ---- 10. Body text — bumped +2pt on mobile for readability. ---- */
  .sqs-html-content { font-size: 1.19rem; line-height: 1.5; }
  .sqs-html-content p, .sqs-html-content li { font-size: 1.19rem; line-height: 1.5; }
  .sqs-html-content h1 { font-size: clamp(1.85rem, 8vw, 2.7rem); line-height: 1.1; }
  .sqs-html-content h2 { font-size: clamp(1.5rem, 6.5vw, 2.15rem); line-height: 1.15; }
  .sqs-html-content h3 { font-size: clamp(1.3rem, 5.8vw, 1.8rem); line-height: 1.2; }

  /* ---- 11. Per-page tuning ----
     a. /silverman-cv.html (collection-616d0f7ef50fef5de03fa353) — replace the
        hover-only rainbow color with a permanent per-item color, by reading
        the --cv-hc CSS variable that the inline script on the page sets on
        each list item. SCOPED to CV page only — applying this rule globally
        was clobbering Squarespace's per-element colors on other pages.
        Also kill the title's blur/scale on hover (no hover on touch). */
  body#collection-616d0f7ef50fef5de03fa353 .sqs-html-content p[style*="margin-left"] {
    color: var(--cv-hc, inherit) !important;
  }
  #block-62e85cb35d8d68e8eced7b0e h3:hover { filter: none; transform: none; opacity: 1; }

  /* b. /contact.html (collection-61a0aea271260f45d46e336a) — word cycler
        autoplays in its own JS. Give the cycler a sensible mobile font-size. */
  #block-yui_3_17_2_1_1733256011389_30193 h1,
  .word-cycler { font-size: clamp(2rem, 9vw, 3.4rem) !important; line-height: 1.05 !important; }

  /* c. /statement.html (collection-616d0fc27b5e9a46a9a93c60) — comfortable
        measure for body paragraphs. */
  body#collection-616d0fc27b5e9a46a9a93c60 .sqs-html-content p {
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* d. /blog.html (collection-664b8cd80b28b86cc763e62a) — stack blog summary
        cards cleanly. */
  body#collection-664b8cd80b28b86cc763e62a .blog-item-wrapper,
  body#collection-664b8cd80b28b86cc763e62a .summary-item {
    display: block !important;
    margin-bottom: 2rem;
  }

  /* ---- 11.4. Footer contact line (homepage + others if present) — the
     "joel@joelsilverman.com   instagram @joelsilverman" pair has inline
     text-align: right which on a narrow mobile viewport pushes the wrapped
     second link off the right edge. Center on mobile and let it wrap. */
  #block-yui_3_17_2_1_1637998308470_13183 .sqs-html-content,
  #block-yui_3_17_2_1_1637998308470_13183 .sqs-html-content p {
    text-align: center !important;
  }
  #block-yui_3_17_2_1_1637998308470_13183 .sqs-html-content a {
    display: inline-block;
    margin: 0.15em 0.4em;
  }

  /* ---- 11.5. Sculptural section — desktop background-position is 51.4% 68.8%.
     On mobile (tall viewport, cover crop is narrow), shift the focal point
     right so the carved glass figures sit in the visible window. Y unchanged. */
  [data-section-id="675a3d4ee9dbf53d13919a68"] .section-background-content {
    background-position: 70% 68.8% !important;
  }

  /* ---- 12. Belt-and-suspenders: kill horizontal scroll. The Fluid-Engine
     grids occasionally compute >100vw widths from absolute-positioned blocks
     before the collapse rule applies. Clip the viewport instead of letting
     a sliver of side-scroll bleed in. ---- */
  html, body { overflow-x: hidden !important; }
  body { max-width: 100vw; }
}