/* Editorial galleries: original research images composited onto warm paper. */
:root { --sans: "DM Sans", Arial, sans-serif; }
.brand-seal { font-family: var(--serif); font-size: 20px; letter-spacing: -1.5px; }
.paper-seal { font-family: var(--serif); font-size: 18px; }
.paper-bottom > span:first-child { font-family: var(--serif); font-size: 15px; letter-spacing: 0; }
.art-vertical { font-family: var(--mono); font-size: 10px; letter-spacing: 4px; }
.benchmark-label { font-size: 18px; line-height: 1.3; }
.gallery-heading { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; margin-bottom: 54px; }
.gallery-heading .eyebrow { color: var(--red); margin-bottom: 26px; }
.gallery-heading h2 { font-size: clamp(60px, 6.5vw, 94px); line-height: .98; letter-spacing: -2px; }
.gallery-heading > p { max-width: 360px; justify-self: end; font-size: 17px; line-height: 1.8; color: var(--muted); padding-bottom: 5px; }
.contact-study { background: #252722; color: var(--paper); position: relative; overflow: hidden; }
.contact-study::before { content: ""; width: 720px; height: 720px; position: absolute; border: 1px solid #f4f2ec0b; border-radius: 50%; top: -380px; right: -160px; pointer-events: none; }
.contact-study .section-shell { position: relative; }
.contact-study .gallery-heading .eyebrow { color: #d99885; }
.contact-study h2 em { color: #a8aa9b; }
.contact-study .gallery-heading > p { color: #bbbdaf; }
.study-topline { border-top: 1px solid #55574c; padding: 22px 0; display: flex; justify-content: space-between; gap: 15px; font: 12px var(--mono); letter-spacing: 1px; color: #c1c3b6; }
.study-topline > span:first-child { display: flex; align-items: center; gap: 10px; }
.study-topline .red-dot { background: #da8a71; }
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gallery-card { min-width: 0; margin: 0; border: 1px solid var(--line); }
.gallery-card figcaption { display: flex; flex-direction: column; gap: 2px; padding: 19px 22px 18px; background: transparent; border: 0; color: var(--ink); align-items: start; }
.gallery-card figcaption > span { font: 500 18px / 1.35 var(--sans); letter-spacing: -.3px; padding: 0; color: inherit; white-space: normal; }
.gallery-card figcaption > small { font: 13px / 1.5 var(--sans); color: var(--muted); }
.gallery-image { width: 100%; display: grid; place-items: center; position: relative; padding: 26px; background: var(--figure-paper); isolation: isolate; overflow: hidden; cursor: zoom-in; }
.gallery-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery-expand { width: 30px; height: 30px; position: absolute; bottom: 12px; right: 12px; display: grid; place-items: center; color: var(--muted); background: #f4f2ece6; border: 1px solid #2526201c; transition: color .2s, border-color .2s; }
.gallery-expand .icon { width: 14px; height: 14px; }
.gallery-image:hover .gallery-expand { color: var(--red); border-color: var(--red); }
.contact-grid .gallery-card { border-color: #55574c; background: #2d3029; }
.contact-grid .gallery-card figcaption { min-height: 91px; padding: 17px 16px; color: var(--paper); }
.contact-grid .gallery-card figcaption > span { font-size: 16px; }
.contact-grid .gallery-card figcaption > small { color: #b9bcac; font-size: 12px; }
.contact-grid .gallery-image { height: clamp(220px, 23vw, 325px); padding: 22px; }
.contact-grid .gallery-card-featured { border-color: #ce846b; }
.contact-grid .gallery-card-featured figcaption > span { color: #efb19a; }
.contact-key { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; font-size: 12px; color: #b9bcac; padding: 22px 0 28px; }
.contact-key > span { display: flex; align-items: center; gap: 8px; }
.contact-key > span:last-child { margin-left: auto; color: #a9ad9c; }
.key-trajectory { width: 22px; height: 2px; background: #e4775e; }
.key-missed { width: 10px; height: 10px; background: #a6a6a6; }
.study-samples { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; padding-top: 24px; border-top: 1px solid #55574c; }
.study-sample { min-width: 0; padding: 7px; background: transparent; color: #b9bcac; border: 1px solid transparent; transition: border-color .2s, color .2s, background .2s; }
.sample-ink { background: var(--figure-paper); display: grid; place-items: center; padding: 14px; aspect-ratio: 1.15; isolation: isolate; }
.sample-ink img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; opacity: .7; }
.study-sample > span:last-child { font: 10px var(--mono); display: flex; align-items: baseline; justify-content: space-between; padding: 12px 1px 4px; gap: 6px; }
.study-sample small { font: 13px var(--sans); white-space: nowrap; }
.study-sample:hover, .study-sample.active { border-color: #ce846b; color: #efb19a; background: #36352c; }
.study-sample.active img, .study-sample:hover img { opacity: 1; }
.figure-tools { display: flex; gap: 20px; align-items: center; }
#figure-size { min-height: 44px; padding: 8px 12px; font-size: 13px; background: transparent; border: 1px solid var(--line); }
.figure-dialog { width: 1440px; }
.figure-dialog-image { max-height: 72vh; overflow: auto; background: var(--figure-paper); isolation: isolate; }
.figure-dialog-image img { width: 100%; min-width: 0; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.figure-dialog-image img:not([style*="width:"]) { max-height: 69vh; }
@media (max-width: 1100px) {
  .gallery-heading { gap: 35px; grid-template-columns: 1.35fr 1fr; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .contact-grid .gallery-image { height: 320px; padding: 28px; }
  .contact-grid .gallery-card figcaption { min-height: auto; }
  .study-samples { display: flex; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #858776 #30332c; }
  .study-sample { flex: 0 0 108px; }
}
@media (max-width: 700px) {
  .gallery-heading { display: block; margin-bottom: 32px; }
  .gallery-heading h2 { font-size: clamp(58px, 11vw, 77px); letter-spacing: -1.5px; }
  .gallery-heading .eyebrow { margin-bottom: 22px; font-size: 11px; }
  .gallery-heading > p { margin-top: 24px; max-width: 420px; font-size: 16px; }
  .study-topline { font-size: 10px; padding: 18px 0; letter-spacing: .3px; }
  .study-topline > span:first-child { gap: 7px; }
  .contact-grid { gap: 12px; }
  .contact-grid .gallery-card figcaption { padding: 13px 10px; min-height: 86px; }
  .contact-grid .gallery-card figcaption > span { font-size: 14px; }
  .contact-grid .gallery-card figcaption > small { font-size: 11px; line-height: 1.4; }
  .contact-grid .gallery-image { height: clamp(175px, 44vw, 270px); padding: 15px; }
  .gallery-expand { right: 6px; bottom: 6px; width: 26px; height: 26px; }
  .gallery-expand .icon { width: 12px; height: 12px; }
  .contact-key { font-size: 11px; gap: 10px; padding: 20px 0; }
  .contact-key > span:last-child { margin-left: 0; }
  .study-samples { padding-top: 16px; }
  .study-sample { flex-basis: 100px; }
  .benchmark-label { font-size: 16px; }
  .figure-tools { gap: 9px; }
  #figure-size { font-size: 11px; padding-inline: 8px; }
}
.gallery-image { display: block; } .gallery-image img { min-height: 0; min-width: 0; } .sample-ink { display: block; }

/* One continuous comparison plate, with direct access to every example. */
.study-samples { overflow-y: hidden; }
.script-gallery { padding-top: 96px; }
.script-gallery .gallery-heading { margin-bottom: 38px; }
.script-gallery .gallery-heading h2 { font-size: clamp(60px, 6vw, 86px); }
.script-samples { display: flex; gap: 10px; padding: 5px 2px 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #b6b3a4 transparent; scroll-padding-inline: 2px; }
.script-sample { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: transparent; border: 1px solid var(--line); color: var(--muted); text-align: left; min-height: 72px; transition: border-color .2s, background .2s, color .2s; }
.script-sample img { width: 36px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.script-sample > span { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; font-size: 14px; }
.script-sample small { font: 12px var(--mono); color: #8d8b7e; }
.script-sample:hover { border-color: #ad402e80; color: var(--red); }
.script-sample.active { border-color: var(--red); background: #eee7db; color: var(--red); }
.script-sample.active small { color: var(--red); }
.script-sample:focus-visible { outline-offset: -3px; }
.script-comparison-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0 18px; font: 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.script-comparison-topline > div { display: flex; align-items: center; gap: 10px; }
#script-counter { color: var(--muted); letter-spacing: 1px; }
.script-comparison-scroll { border: 1px solid var(--line); border-top: 0; background: var(--figure-paper); overflow: auto; scrollbar-width: thin; scrollbar-color: #aaa797 #e7e4da; }
.script-comparison-scroll:focus-visible { outline-offset: 4px; }
.script-comparison-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.script-comparison-grid .gallery-card { border: 0; border-top: 2px solid #aaa99a; background: var(--figure-paper); }
.script-comparison-grid .gallery-card + .gallery-card { border-left: 1px solid var(--line); }
.script-comparison-grid .gallery-card figcaption { padding: 24px 18px 19px; min-height: 96px; }
.script-comparison-grid .gallery-card figcaption > span { font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; letter-spacing: -.35px; }
.script-comparison-grid .gallery-card figcaption > small { font-size: 12px; }
.script-comparison-grid .gallery-image { height: clamp(265px, 26vw, 375px); padding: 26px 21px 38px; }
.script-comparison-grid .gallery-card-featured { border-top-color: var(--red); }
.script-comparison-grid .gallery-card-featured figcaption { background: linear-gradient(#ad402e0a, transparent); }
.script-comparison-grid .gallery-card-featured figcaption > span { color: var(--red); }
.script-comparison-grid .gallery-expand { bottom: 14px; right: 14px; }
.script-comparison-note { display: flex; justify-content: space-between; gap: 16px 30px; padding-top: 20px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.script-comparison-note > p:last-child { text-align: right; }
.comparison-mobile-hint { display: none; }
@media (min-width: 1600px) {
  .script-samples { gap: 12px; }
  .script-sample { padding-inline: 15px 18px; }
}
@media (max-width: 1000px) {
  .script-comparison-grid { min-width: 830px; }
  .script-comparison-grid .gallery-card:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 5px 0 12px #2526200b; }
  .script-comparison-grid .gallery-card figcaption { padding-inline: 15px; }
  .script-comparison-grid .gallery-card figcaption > span { font-size: 16px; }
  .script-comparison-grid .gallery-image { height: 280px; padding-inline: 18px; }
  .comparison-desktop-hint { display: none; }
  .comparison-mobile-hint { display: inline; }
}
@media (max-width: 700px) {
  .script-gallery { padding-top: 65px; }
  .script-gallery .gallery-heading { margin-bottom: 28px; }
  .script-gallery .gallery-heading h2 { font-size: clamp(58px, 11vw, 77px); }
  .script-samples { gap: 9px; padding-bottom: 12px; }
  .script-sample { gap: 10px; padding: 10px 12px 10px 10px; min-height: 64px; }
  .script-sample img { width: 30px; height: 40px; }
  .script-sample > span { font-size: 13px; gap: 7px; }
  .script-sample small { font-size: 11px; }
  .script-comparison-topline { padding-block: 20px 16px; font-size: 11px; letter-spacing: .7px; }
  .script-comparison-grid .gallery-card figcaption { min-height: 83px; padding-block: 19px 14px; }
  .script-comparison-grid .gallery-image { height: 245px; padding: 20px 17px 37px; }
  .script-comparison-note { display: block; font-size: 12px; padding-top: 16px; }
  .script-comparison-note > p:last-child { margin-top: 5px; text-align: left; }
}