/* torn.css — the torn-paper layer for adamstephenson.art (Adam, 2026-10-28).
   Loaded after each page's own <style>, so it overrides with !important where needed.
   Textures: photographed torn paper, processed by labs/assets/torn/*.py (labs/ is gitignored;
   the scripts are kept there). Images live in /images/torn/.
   Sections, in order: site-wide seams, Commission (paper-sheet pricing), About (torn print). */

/* ════════ Site-wide: torn paper seams (option A "Torn sheet") ════════ */
/* Torn option A: "Torn sheet", site-wide.
   Every seam on the site becomes real torn paper (photographed, cream fibre lip):
   - heading bands (home, murals, commission) are lifted dark sheets laid over their
     neighbours, so no straight image edge is left
   - closing call-to-action strips are the same sheet, torn top and bottom
   - inner-page headers keep their darker colour and end in a torn edge
   - case studies: the story tears up over the hero photo; prev/next is a sheet over the grid
   Edge images already contain their sheet colour, so each sheet is one element: no seams.
   Replaces the white rule + diamonds and the 1px seam borders. Hairlines *inside* sections
   (between case rows, About dividers) are untouched. */

/* ── shared ─────────────────────────────────────────────────────────── */
.ornament { display: none !important; }
.case-studies, .works-strip, .cta, .cta-strip, .page-header,
.process, .pricing, .case-story, .case-images, .case-nav, footer { border-top: 0 !important; border-bottom: 0 !important; }

/* the lifted sheet: band colour #2A2420, torn top 177px, torn bottom 161px */
.section-heading, .case-studies-header, .works-strip-header, .section-band,
.cta, .cta-strip, .commission-cta, .case-nav {
  background-image: url(../images/torn/real-a-top.webp), url(../images/torn/real-a-bottom.webp), linear-gradient(#2A2420, #2A2420) !important;
  background-repeat: repeat-x, repeat-x, no-repeat !important;
  background-position: left top, left bottom, 0 175px !important;
  background-size: 3200px 177px, 3200px 161px, 100% calc(100% - 334px) !important;
}

/* ── heading bands: reach 100px over the art above and below ────────── */
.section-heading, .case-studies-header, .works-strip-header {
  margin-top: -100px !important;
  margin-bottom: -100px !important;
  padding-top: 164px !important;
  padding-bottom: 164px !important;
}
/* the works header keeps its side bleed; its old 48px gap is absorbed into the overlap */
.works-strip-header { margin-bottom: -52px !important; }   /* 48px gap - 100px overlap */
@media (max-width: 900px) { .works-strip-header { margin-bottom: -68px !important; } }
@media (max-width: 540px) { .works-strip-header { margin-bottom: -76px !important; } }

/* commission: "The Process" band reaches up over the header photo; "Pricing" sits on plain page */
.section-band { padding-top: 164px !important; padding-bottom: 164px !important; }
.process > .section-band { margin-top: -180px !important; }  /* was -80px: +100px over the header */

/* home: keep the hero name and tile captions clear of the overlapping sheet */
.hero-name { bottom: 150px !important; }
.hero::after { height: 55% !important; }
.preview-item .label { padding-bottom: 136px !important; }

/* ── closing call-to-action strips: the same sheet, on plain page, no overlap ── */
.cta, .commission-cta { padding-top: 200px !important; padding-bottom: 190px !important; position: relative; z-index: 2; }
.cta-strip { padding-top: 190px !important; padding-bottom: 180px !important; }
/* the mockingbird drawing melts out before the tears, so it never shows a straight cut-off */
.cta::before, .cta-strip::before, .commission-cta::before {
  -webkit-mask: url(../images/Song-of-the-Mockingbird-Flight.webp) center / cover no-repeat,
                linear-gradient(to bottom, transparent 0, transparent 150px, #000 230px, #000 calc(100% - 210px), transparent calc(100% - 140px)) !important;
  -webkit-mask-composite: source-in !important;
  mask: url(../images/Song-of-the-Mockingbird-Flight.webp) center / cover no-repeat,
        linear-gradient(to bottom, transparent 0, transparent 150px, #000 230px, #000 calc(100% - 210px), transparent calc(100% - 140px)) !important;
  mask-composite: intersect !important;
}

/* ── inner-page headers: darker sheet (#12100E) with a torn bottom edge ── */
/* only where no band follows (digital, figurative, 404); murals and commission are covered by their band */
.page-header:has(+ .gallery-section), .page-header:has(+ .cta-strip) {
  background: url(../images/torn/real-a-hdr-bottom.webp) left bottom / 3200px 161px repeat-x,
              linear-gradient(#12100E, #12100E) 0 0 / 100% calc(100% - 159px) no-repeat !important;
  padding-bottom: 170px !important;
  margin-bottom: -60px !important;
}

/* ── case studies ─────────────────────────────────────────────────── */
/* the story's page-coloured paper tears up over the hero photo */
.case-story {
  margin-top: -100px !important;
  padding-top: 180px !important;
  z-index: 3 !important;
  background: url(../images/torn/real-b-top.webp) left top / 3200px 177px repeat-x,
              linear-gradient(#1A1714, #1A1714) 0 175px / 100% calc(100% - 175px) no-repeat !important;
}
/* prev/next becomes a sheet laid over the bottom of the image grid */
/* (it's a <nav>, so it inherits the top bar's 80% black: a live-site bug, cleared here) */
.case-nav { background-color: transparent !important; }
.case-nav { margin-top: -100px !important; padding-top: 200px !important; padding-bottom: 180px !important; z-index: 3 !important; }

/* ── keep text clear of the sheets that now overlap from below ──────────
   each value = the page's own bottom padding + the overlap */
.case-hero-overlay { padding-bottom: 140px !important; }                 /* case-study title */
.page-header:has(+ .case-studies) { padding-bottom: 180px !important; }  /* murals subtitle */
.page-header:has(.page-header-image) .page-header-text { padding-bottom: 180px !important; }  /* commission intro only */
@media (max-width: 900px) {
  .case-hero-overlay { padding-bottom: 132px !important; }
  .page-header:has(+ .case-studies) { padding-bottom: 156px !important; }
  .page-header:has(.page-header-image) .page-header-text { padding-bottom: 156px !important; }
  .process > .section-band { margin-top: -164px !important; }           /* -64px + 100px over the header */
}

/* ── phones: the same tears at half scale, half the overlap ───────────── */
@media (max-width: 540px) {
  .section-heading, .case-studies-header, .works-strip-header, .section-band,
  .cta, .cta-strip, .commission-cta, .case-nav {
    background-size: 1600px 89px, 1600px 81px, 100% calc(100% - 168px) !important;
    background-position: left top, left bottom, 0 87px !important;
  }
  .section-heading, .case-studies-header, .works-strip-header {
    margin-top: -50px !important;
    margin-bottom: -50px !important;
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .works-strip-header { margin-bottom: -26px !important; }
  .section-band { padding-top: 96px !important; padding-bottom: 96px !important; }
  .process > .section-band { margin-top: -98px !important; }             /* -48px + 50px */
  .case-hero-overlay { padding-bottom: 82px !important; }
  .page-header:has(+ .case-studies) { padding-bottom: 98px !important; }
  .page-header:has(.page-header-image) .page-header-text { padding-bottom: 98px !important; }
  .hero-name { bottom: 90px !important; }
  .preview-item .label { padding-bottom: 86px !important; }
  .cta, .commission-cta, .cta-strip { padding-top: 110px !important; padding-bottom: 104px !important; }
  .page-header:has(+ .gallery-section), .page-header:has(+ .cta-strip) {
    background-size: 1600px 81px, 100% calc(100% - 79px) !important;
    padding-bottom: 96px !important;
    margin-bottom: -30px !important;
  }
  .case-story {
    margin-top: -50px !important;
    padding-top: 100px !important;
    background-size: 1600px 89px, 100% calc(100% - 87px) !important;
    background-position: left top, 0 87px !important;
  }
  .case-nav { margin-top: -50px !important; padding-top: 110px !important; padding-bottom: 100px !important; }
}

/* ── balanced inner-page headers (Murals, Digital & Design, Figurative, 404) ──
   the space between the nav and the title equals the space between the subtitle and
   the tear's fibre lip. Values measured per breakpoint (labs/assets/torn/balance-headers.py). */
.page-header:has(+ .gallery-section), .page-header:has(+ .cta-strip) { padding-bottom: var(--hdr-pb-own) !important; }
.page-header:has(+ .case-studies) { padding-bottom: var(--hdr-pb-band) !important; }
:root { --hdr-pb-own: 138px; --hdr-pb-band: 131px; }
@media (max-width: 900px) { :root { --hdr-pb-own: 104px; --hdr-pb-band: 96px; } }
@media (max-width: 540px) { :root { --hdr-pb-own: 62px; --hdr-pb-band: 60px; } }

/* ── closing CTA strips (Murals, Digital, Figurative, 404): the top tear rides high on the
   left, right above the text, so the strip needs less padding on top than below ── */
.cta-strip { padding-top: 110px !important; }
@media (max-width: 900px) { .cta-strip { padding-top: 120px !important; } }
@media (max-width: 540px) { .cta-strip { padding-top: 78px !important; } }

/* ════════ Commission page: shared ════════ */
/* Commission page, shared by all three versions (loaded after option-a.css).
   - the outlined tags under each process step are gone
   - the boxed, bordered price callout loses its box
   - "What goes into the price" reads as one sentence instead of a bullet row */

.step .step-tag { display: none !important; }

.price-callout {
  border: 0 !important; background: none !important; margin: 0 !important;
}
.price-callout-text { border: 0 !important; }

/* the factors as a sentence: "What goes into the price: scale and square footage, ...,
   and travel and lodging." */
.price-callout-factors { display: block !important; }
.factors-label {
  display: inline;
  font-family: 'Lemon Milk', 'Josefin Sans', sans-serif;
  font-size: 13px !important; letter-spacing: 0.06em !important;
}
.factors-label::after { content: ':\00a0\00a0'; }
.factors-list { display: inline !important; padding: 0 !important; }
.factors-list li {
  display: inline !important; padding: 0 !important;
  font-size: 17px !important; line-height: 1.7 !important;
  text-transform: lowercase;
}
.factors-list li::before { content: none !important; }
.factors-list li:not(:last-child)::after { content: ', '; }
.factors-list li:last-child::before { content: 'and ' !important; position: static !important; color: inherit !important; }
.factors-list li:last-child::after { content: '.'; }

/* ════════ Commission page: version 1 "Paper sheet" ════════ */
/* Commission, version 1: "Paper sheet"
   The whole Pricing section is one torn cream sheet: the "Pricing" heading, the text and the
   price all sit on it. One tear on each side: the sheet's own torn top, and at the bottom the
   call-to-action sheet tears over it (no back-to-back double tears). */

/* the section itself is the sheet; flat cream below the torn top, CTA covers the bottom */
.pricing {
  position: relative; z-index: 1;
  margin-top: 24px;
  padding: 196px max(48px, calc(50vw - 622px)) 220px !important;
  color: #1A1714;
  background:
    url(../images/torn/real-cream-top.webp) left top / 3200px 177px repeat-x,
    linear-gradient(#EFE7D8, #EFE7D8) 0 175px / 100% calc(100% - 175px) no-repeat !important;
}
/* the "Pricing" heading sits on the paper instead of on its own dark band */
.pricing > .section-band {
  background: none !important;
  margin: 0 0 44px !important;
  padding: 0 !important;
}
.pricing > .section-band::after { display: none !important; }
.pricing > .section-band h2 { color: #1A1714 !important; }

.price-callout { padding: 0 !important; gap: 64px; align-items: center !important; }
.price-callout-text { padding: 0 !important; }
.price-callout-text h3 { color: #1A1714 !important; font-size: clamp(1.5rem, 2.4vw, 2.2rem) !important; }
.vinyl-label { display: none !important; }
.price-callout-note, .factors-list li { color: #3E3832 !important; }
.factors-label { color: #1A1714 !important; }

/* "Starting at" larger, centred over the price */
.price-callout-price {
  padding: 0 !important;
  align-items: center !important; text-align: center;
  gap: 10px !important;
}
.price-from {
  color: #5A534B !important;
  font-family: 'Lemon Milk', 'Josefin Sans', sans-serif;
  font-size: 18px !important; letter-spacing: 0.08em !important;
}
.price-num { color: #1A1714 !important; font-size: clamp(3rem, 6vw, 5.5rem) !important; }

/* the closing call to action tears over the bottom of the sheet */
.commission-cta { margin-top: -100px !important; }

@media (max-width: 900px) {
  .price-callout { gap: 32px; }
  .price-callout-price { align-items: flex-start !important; text-align: left; }
}
@media (max-width: 540px) {
  .pricing {
    padding: 104px 20px 110px !important;
    background-size: 1600px 89px, 100% calc(100% - 87px) !important;
    background-position: left top, 0 87px !important;
  }
  .pricing > .section-band { margin-bottom: 28px !important; }
  .commission-cta { margin-top: -50px !important; }
}

/* ════════ About page: shared ════════ */
/* About page, shared by all three versions (loaded after option-a.css).
   - photo floats left, the bio wraps around it (no sticky split screen)
   - hairline dividers between sections are gone
   - the CV clears the photo and runs full width below
   Markup is untouched: .about-text becomes display: contents so its children flow
   directly around the floated photo. */

.about-wrap {
  display: block !important;
  max-width: 1216px;
  margin: 0 auto;
  min-height: 0 !important;
  padding: 136px 48px 0 !important;
}
.about-wrap::after { content: ''; display: block; clear: both; }

.about-photo {
  float: left;
  position: relative !important;
  top: auto !important;
  width: min(42%, 540px);
  height: auto !important;
  margin: 8px 64px 32px 0;
  overflow: visible !important;
}
.about-photo img { height: auto !important; aspect-ratio: 1535 / 1920; }

.about-text { display: contents !important; }
.about-text h1 { margin-bottom: 36px !important; }
.about-section, .about-clients { border-top: 0 !important; padding: 0 0 8px !important; }
.about-section + .about-section, .about-pullquote + .about-section { padding-top: 24px !important; }
.about-section h2 { margin-bottom: 14px !important; }

/* the CV clears the photo and runs edge to edge */
.about-cv {
  clear: both;
  border-top: 0 !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}
.about-cv > * { max-width: 1244px; margin-left: auto !important; margin-right: auto !important; }
.cv-list li { border-bottom: 0 !important; }

/* CV download: a torn paper tag instead of an outlined button */
.cv-download {
  position: relative; isolation: isolate;
  display: table !important;
  border: 0 !important; background: none !important;
  padding: 14px 34px 15px 28px !important;
  transform: rotate(-1deg);
}
.cv-download::before {
  content: ''; position: absolute; inset: -2px -6px; z-index: -1;
  -webkit-mask: url(../images/torn/v2-plate-torn-b.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../images/torn/v2-plate-torn-b.webp) 0 0 / 100% 100% no-repeat;
}

/* closing links: plain underlined links instead of a filled and an outlined button */
.about-cta {
  clear: both;
  border-top: 0 !important;
  padding: 48px 0 112px !important;
  gap: 40px !important;
  align-items: baseline;
}
.about-cta .cta-btn {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--text) !important;
  font-family: 'Lemon Milk', 'Josefin Sans', sans-serif !important;
  font-size: 18px !important; letter-spacing: 0.04em !important;
  text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px;
}
.about-cta .cta-btn:first-child { color: var(--accent) !important; }

@media (max-width: 900px) {
  .about-wrap { padding: 112px 24px 0 !important; }
  .about-photo { width: 46%; margin-right: 32px; }
  .about-cv > * { max-width: none; }
}
/* phones: a floated photo leaves a sliver of text; stack instead */
@media (max-width: 540px) {
  .about-wrap { padding: 96px 20px 0 !important; }
  .about-photo { float: none; width: 100%; margin: 0 0 28px; }
  .about-cta { flex-direction: row !important; flex-wrap: wrap; padding-bottom: 80px !important; }
}

/* ════════ About page: CV on cream paper ════════ */
/* CV on cream paper, the same design as the torn-paper CV PDF:
   a full-width sheet torn top and bottom, dark torn labels for the section heads. */
.about-cv {
  margin-top: 64px;
  padding: 210px 48px 200px !important;
  color: #1A1714;
  background:
    url(../images/torn/real-cream-top.webp) left top / 3200px 177px repeat-x,
    url(../images/torn/real-cream-bottom.webp) left bottom / 3200px 161px repeat-x,
    linear-gradient(#EFE7D8, #EFE7D8) 0 175px / 100% calc(100% - 334px) no-repeat !important;
}
.about-cv h2 {
  font-family: 'Lemon Milk', 'Josefin Sans', sans-serif !important;
  font-size: clamp(28px, 3vw, 40px) !important; font-weight: 400 !important;
  letter-spacing: 0.04em !important; color: #1A1714 !important;
  margin-bottom: 44px !important;
}
.cv-group h3 {
  position: relative; isolation: isolate;
  display: table;
  padding: 7px 30px 8px 18px;
  font-family: 'Lemon Milk', 'Josefin Sans', sans-serif !important;
  font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.06em !important;
  color: #F2EADB !important;
  margin-bottom: 14px !important;
  transform: rotate(-0.6deg);
}
.cv-group:nth-child(odd) h3 { transform: rotate(0.5deg); }
.cv-group h3::before {
  content: ''; position: absolute; inset: -2px -6px; z-index: -1; background: #1E1A17;
  -webkit-mask: url(../images/torn/v2-plate-torn-a.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../images/torn/v2-plate-torn-a.webp) 0 0 / 100% 100% no-repeat;
}
.cv-group:nth-child(odd) h3::before { -webkit-mask-image: url(../images/torn/v2-plate-torn-c.webp); mask-image: url(../images/torn/v2-plate-torn-c.webp); }
.cv-list li { padding: 7px 0 !important; }
.cv-year { color: #6B6157 !important; }
.cv-body { color: #3E3832 !important; }
.cv-body strong { color: #1A1714 !important; font-weight: 600 !important; }
.cv-download { color: #F2EADB !important; margin-top: 40px !important; }
.cv-download::before { background: #1E1A17; }

@media (max-width: 540px) {
  .about-cv {
    padding: 110px 20px 104px !important;
    background-size: 1600px 89px, 1600px 81px, 100% calc(100% - 168px) !important;
    background-position: left top, left bottom, 0 87px !important;
  }
}

/* ════════ About page: version 3 "Torn print" ════════ */
/* About, version 3: "Torn print"
   the photo itself has torn paper edges, like a print torn out of a sheet; the pull quote sits
   between two real tear lines with no box; CV on cream paper, one wide column like the PDF
   (title left, year right). */

.about-photo img {
  -webkit-mask: url(../images/torn/torn-photo-mask.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../images/torn/torn-photo-mask.webp) 0 0 / 100% 100% no-repeat;
}

.about-pullquote {
  display: flow-root;
  margin: 24px 0 36px !important;
  padding: 46px 0 48px !important;
  border: 0 !important;
  font-style: normal !important; font-weight: 300 !important;
  font-size: clamp(1.4rem, 2.2vw, 2rem) !important; line-height: 1.3 !important;
  color: var(--text) !important;
  background:
    url(../images/torn/real-c-fiber.webp) left top / 3200px 50px repeat-x,
    url(../images/torn/real-c-fiber.webp) 37% bottom / 3200px 50px repeat-x !important;
}

/* PDF-style rows: title and detail on the left, year flush right */
.about-cv > * { max-width: 980px; }
.cv-group { margin-bottom: 36px !important; }
.cv-list li { grid-template-columns: 1fr auto !important; gap: 24px !important; }
.cv-year { order: 2; text-align: right; }
.cv-body { order: 1; }

/* Adam 2026-10-28: the story continues after the pull quote (no "Background" label),
   and the bio is set larger */
.about-section h2 { display: none !important; }
.about-pullquote + .about-section { padding-top: 0 !important; }
.about-section p {
  font-size: clamp(19px, 1.5vw, 22px) !important;
  line-height: 1.7 !important;
}
.about-section p + p { margin-top: 20px !important; }
@media (max-width: 540px) {
  .about-section p { font-size: 18px !important; }
}

/* ════════ Fixes after launch review (Adam, 2026-10-28) ════════ */
/* Drawings inside a torn sheet are masked by the tear itself, so they run right up to the
   torn edge and never show through its gaps. Mask layers, top to bottom: Adam's tuned fades and
   the linework (intersected), then the sheet's own shape = top tear + bottom tear + fill (added),
   placed exactly like the sheet's background layers. */
.section-heading::after, .case-studies-header::after, .works-strip-header::after, .section-band::after {
  -webkit-mask-image:
    linear-gradient(to bottom, rgb(0 0 0 / var(--tex-edge)) 0%, calc(var(--tex-fade-t) * var(--tex-curve)), #000 var(--tex-fade-t), #000 calc(100% - var(--tex-fade-b)), calc(100% - var(--tex-fade-b) * var(--tex-curve)), rgb(0 0 0 / var(--tex-edge)) 100%),
    linear-gradient(to right, rgb(0 0 0 / var(--tex-edge)) 0%, calc(var(--tex-fade-l) * var(--tex-curve)), #000 var(--tex-fade-l), #000 calc(100% - var(--tex-fade-r)), calc(100% - var(--tex-fade-r) * var(--tex-curve)), rgb(0 0 0 / var(--tex-edge)) 100%),
    url(../images/HOTM-Linework-Texture.webp),
    url(../images/torn/real-a-top.webp),
    url(../images/torn/real-a-bottom.webp),
    linear-gradient(#000, #000) !important;
  mask-image:
    linear-gradient(to bottom, rgb(0 0 0 / var(--tex-edge)) 0%, calc(var(--tex-fade-t) * var(--tex-curve)), #000 var(--tex-fade-t), #000 calc(100% - var(--tex-fade-b)), calc(100% - var(--tex-fade-b) * var(--tex-curve)), rgb(0 0 0 / var(--tex-edge)) 100%),
    linear-gradient(to right, rgb(0 0 0 / var(--tex-edge)) 0%, calc(var(--tex-fade-l) * var(--tex-curve)), #000 var(--tex-fade-l), #000 calc(100% - var(--tex-fade-r)), calc(100% - var(--tex-fade-r) * var(--tex-curve)), rgb(0 0 0 / var(--tex-edge)) 100%),
    url(../images/HOTM-Linework-Texture.webp),
    url(../images/torn/real-a-top.webp),
    url(../images/torn/real-a-bottom.webp),
    linear-gradient(#000, #000) !important;
  -webkit-mask-size: 100% 100%, 100% 100%, cover, 3200px 177px, 3200px 161px, 100% calc(100% - 334px) !important;
  mask-size: 100% 100%, 100% 100%, cover, 3200px 177px, 3200px 161px, 100% calc(100% - 334px) !important;
  -webkit-mask-position: 0 0, 0 0, calc(50% + var(--tex-x)) var(--tex-y), left top, left bottom, 0 175px !important;
  mask-position: 0 0, 0 0, calc(50% + var(--tex-x)) var(--tex-y), left top, left bottom, 0 175px !important;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, no-repeat !important;
  mask-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, no-repeat !important;
  -webkit-mask-composite: source-in, source-in, source-in, source-over, source-over, source-over !important;
  mask-composite: intersect, intersect, intersect, add, add, add !important;
}
/* inner-page headers (Digital, Figurative, 404): the mockingbird is masked by the header's tear */
.page-header:has(+ .gallery-section)::before, .page-header:has(+ .cta-strip)::before {
  -webkit-mask: linear-gradient(to bottom, #000 35%, transparent 100%) 0 0 / 100% 100% no-repeat,
                url(../images/Song-of-the-Mockingbird-Flight.webp) center / auto 100% no-repeat,
                url(../images/torn/real-a-hdr-bottom.webp) left bottom / 3200px 161px repeat-x,
                linear-gradient(#000, #000) 0 0 / 100% calc(100% - 159px) no-repeat !important;
  -webkit-mask-composite: source-in, source-in, source-over, source-over !important;
  mask: linear-gradient(to bottom, #000 35%, transparent 100%) 0 0 / 100% 100% no-repeat,
        url(../images/Song-of-the-Mockingbird-Flight.webp) center / auto 100% no-repeat,
        url(../images/torn/real-a-hdr-bottom.webp) left bottom / 3200px 161px repeat-x,
        linear-gradient(#000, #000) 0 0 / 100% calc(100% - 159px) no-repeat !important;
  mask-composite: intersect, intersect, add, add !important;
}
@media (max-width: 540px) {
  .section-heading::after, .case-studies-header::after, .works-strip-header::after, .section-band::after {
    -webkit-mask-size: 100% 100%, 100% 100%, cover, 1600px 89px, 1600px 81px, 100% calc(100% - 168px) !important;
    mask-size: 100% 100%, 100% 100%, cover, 1600px 89px, 1600px 81px, 100% calc(100% - 168px) !important;
    -webkit-mask-position: 0 0, 0 0, calc(50% + var(--tex-x)) var(--tex-y), left top, left bottom, 0 87px !important;
    mask-position: 0 0, 0 0, calc(50% + var(--tex-x)) var(--tex-y), left top, left bottom, 0 87px !important;
  }
  .page-header:has(+ .gallery-section)::before, .page-header:has(+ .cta-strip)::before {
    -webkit-mask-size: 100% 100%, auto 100%, 1600px 81px, 100% calc(100% - 79px) !important;
    mask-size: 100% 100%, auto 100%, 1600px 81px, 100% calc(100% - 79px) !important;
  }
  /* the call-to-action drawing's fade, at the half-scale tear */
  .cta::before, .cta-strip::before, .commission-cta::before {
    -webkit-mask: url(../images/Song-of-the-Mockingbird-Flight.webp) center / cover no-repeat,
                  linear-gradient(to bottom, transparent 0, transparent 75px, #000 115px, #000 calc(100% - 105px), transparent calc(100% - 70px)) !important;
    -webkit-mask-composite: source-in !important;
    mask: url(../images/Song-of-the-Mockingbird-Flight.webp) center / cover no-repeat,
          linear-gradient(to bottom, transparent 0, transparent 75px, #000 115px, #000 calc(100% - 105px), transparent calc(100% - 70px)) !important;
    mask-composite: intersect !important;
  }
}

/* Torn sheets never fade in: paper that appears out of nowhere breaks the illusion.
   Home adds .reveal to these on load; they stay put and scroll like the rest of the page. */
.section-heading.reveal, .works-strip-header.reveal, .case-studies-header.reveal, .cta.reveal {
  opacity: 1 !important; transform: none !important; transition: none !important;
}