@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --ink: #111111;
  --paper: #ffffff;
  --surface-muted: #f1f1f1;
  --hero-bg: #e8e8e8;
  --section-bg: #ffffff;
  --accent: #ff5a00;
  --grey: #e5e5e5;
  --white: #ffffff;
  --iris: #111111;
  --line: rgba(0,0,0,.26);
  --mx: 50vw;
  --my: 50vh;
  --progress: 0%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--ink); }

.progress { position: fixed; z-index: 80; left: 0; top: 0; height: 5px; width: var(--progress); background: var(--ink); }
.cursor-orbit {
  position: fixed; left: var(--mx); top: var(--my); z-index: 70; width: 46px; height: 46px; margin: -23px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 17px; pointer-events: none; mix-blend-mode: difference; color: white; animation: spin 5s linear infinite; transition: width .2s, height .2s, margin .2s;
}

.topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.brand { font-family: "Instrument Serif", Georgia, serif; font-size: 27px; line-height: 1; text-decoration: none; letter-spacing: -.05em; }
.header-name { justify-self: center; font-size: 10px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.chaos-button { justify-self: end; border: 0; background: var(--ink); color: var(--paper); border-radius: 100px; padding: 9px 14px; cursor: pointer; transition: .2s; }
.chaos-button:hover { transform: rotate(-3deg) scale(1.05); background: var(--surface-muted); color: var(--ink); }

.hero { position: relative; min-height: 82svh; padding: 92px 20px 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--hero-bg); color: var(--ink); }
.eyebrow { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .15em; }
.hero-eye { --iris-x: 0px; --iris-y: 0px; --pupil-x: 0px; --pupil-y: 0px; position: absolute; z-index: 2; left: 50%; top: calc(50% + 30px); width: min(72vw, 1010px); height: clamp(190px, 26.5vw, 368px); margin: 0; transform: translate(-50%, -50%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.hero-sclera { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-sclera path { fill: var(--white); transition: fill .25s; }
.hero-iris { position: absolute; z-index: 1; left: 50%; top: 50%; height: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--iris); transform: translate(calc(-50% + var(--iris-x)), calc(-50% + var(--iris-y))); transition: transform 55ms linear; will-change: transform; }
.hero-pupil { position: absolute; left: 50%; top: 50%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); transform: translate(calc(-50% + var(--pupil-x)), calc(-50% + var(--pupil-y))); transition: transform 35ms linear; will-change: transform; }
.hero-meta { display: grid; grid-template-columns: 1fr 1fr; align-items: end; position: relative; z-index: 2; }
.hero-meta p { margin: 0; max-width: 440px; font-size: clamp(18px, 2vw, 32px); line-height: 1; letter-spacing: -.045em; }
.hero-meta .coordinates { grid-column: 2; justify-self: end; text-align: right; font-size: 10px; line-height: 1.35; letter-spacing: .08em; }

.section-kicker { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 14px 20px; border-bottom: 1px solid var(--ink); font-size: 10px; letter-spacing: .1em; font-weight: 600; }
.section-kicker span:nth-child(2) { text-align: center; }
.section-kicker span:last-child { text-align: right; }
.work { background: var(--surface-muted); border-bottom: 1px solid var(--ink); }
.work-layout { display: grid; grid-template-columns: minmax(300px, 42%) 1fr; align-items: start; }
.preview-stage { position: sticky; top: 73px; height: calc(100svh - 73px); min-height: 560px; overflow: hidden; border-right: 1px solid var(--ink); background: var(--grey); }
.project-art { position: absolute; inset: 16px; overflow: hidden; opacity: 0; transform: translateY(12%) scale(.96); transition: opacity .3s, transform .65s cubic-bezier(.16,1,.3,1); }
.project-art.is-active { opacity: 1; transform: translateY(0) scale(1); }
.project-art img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; transform: translateZ(0); backface-visibility: hidden; }
.project-index { padding: 35px 20px 80px; }
.project-row { width: 100%; border: 0; border-top: 1px solid var(--ink); background: transparent; color: inherit; text-decoration: none; display: grid; grid-template-columns: 58px minmax(170px, 1.3fr) 1fr 50px; gap: 12px; align-items: center; padding: 19px 0; text-align: left; cursor: crosshair; transition: padding .25s, background .25s, transform .25s; }
.project-row:last-child { border-bottom: 1px solid var(--ink); }
.project-row:hover, .project-row:focus-visible { padding-left: 14px; padding-right: 14px; background: var(--grey); outline: none; }
.project-no, .project-type, .project-year { font-size: 9px; letter-spacing: .08em; }
.project-title { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(25px, 2.65vw, 47px); letter-spacing: -.04em; line-height: .92; }
.project-year { text-align: right; }

.about { background: var(--section-bg); color: var(--ink); min-height: 96svh; padding: 24px 20px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.about-lead { display: grid; grid-template-columns: 1fr 3fr; gap: 20px; }
.mini-label { font-size: 10px; letter-spacing: .13em; }
.about-lead p { margin: 0; max-width: 1150px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(48px, 8.5vw, 135px); line-height: .9; letter-spacing: -.055em; }
.contact-block { margin: 12vh 0 8vh auto; width: 49%; }
.contact-block p { font-size: 11px; letter-spacing: .05em; }
.contact-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.contact-block a { display: block; width: max-content; max-width: 100%; color: var(--accent); font-size: clamp(24px, 2vw, 31px); text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }
footer { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid rgba(0,0,0,.45); padding-top: 14px; font-size: 9px; letter-spacing: .09em; }
footer span:nth-child(2) { text-align: center; }
footer a { text-align: right; }

.chaos .hero-eye { transform: translate(-50%, -50%) rotate(-4deg) scale(.94); }
.chaos .hero-sclera path { fill: var(--ink); }
.chaos .work { background: var(--ink); color: var(--surface-muted); }
.chaos .preview-stage { background: var(--paper); }
.chaos .project-row:nth-child(odd) { transform: translateX(2vw) rotate(-1deg); }
.chaos .project-row:nth-child(even) { transform: translateX(-1vw) rotate(.7deg); }
.chaos .about { background: var(--ink); color: var(--surface-muted); }
.chaos .contact-block a { color: var(--accent); }

/* Internal case studies */
.detail-page { background: var(--ink); }
.case-site { background: var(--paper); min-height: 100vh; }
.case-topbar { grid-template-columns: 1fr auto 1fr; }
.case-nav-label { font-size: 10px; letter-spacing: .12em; }
.case-close { justify-self: end; text-decoration: none; border: 1px solid var(--ink); border-radius: 99px; padding: 8px 13px; transition: .2s; }
.case-close:hover { background: var(--ink); color: var(--paper); transform: rotate(2deg); }
.case-study { padding-top: 58px; }
.case-hero { min-height: 82svh; padding: 28px 20px 34px; background: var(--hero-bg); color: var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.case-eyebrow, .case-intro { display: grid; grid-template-columns: 1fr 1fr; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.case-eyebrow span:last-child, .case-intro span:last-child { text-align: right; }
.case-hero h1 { margin: auto 0; max-width: 1400px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(78px, 13vw, 205px); font-weight: 400; line-height: .86; letter-spacing: -.065em; text-wrap: balance; }
.case-hero h1::first-letter { font-style: italic; }
.case-flow { background: var(--paper); }
.case-module { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 20px; border-bottom: 1px solid var(--ink); }
.phase-label { font-size: 9px; font-weight: 600; letter-spacing: .12em; padding-top: 7px; }
.case-copy { padding-top: 6vw; padding-bottom: 7vw; background: var(--surface-muted); }
.case-copy p { margin: 0; max-width: 1220px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(38px, 6vw, 96px); line-height: .92; letter-spacing: -.045em; }
.case-media { padding-top: 34px; padding-bottom: 44px; background: var(--grey); }
.case-media:nth-child(4n) { background: var(--white); }
.detail-page[data-project="campagna-global-garofalo"] .case-hero { background: var(--surface-muted); }
.detail-page[data-project="campagna-global-garofalo"] .case-copy { background: var(--surface-muted); }
.detail-page[data-project="campagna-global-garofalo"] .case-media { background: var(--grey); }
.detail-page[data-project="campagna-global-garofalo"] .case-editorial { background: var(--paper); }
.case-editorial { display: block; padding: 10px; }
.case-editorial > .phase-label { display: block; padding: 3px 0 10px; }
.editorial-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: start; }
.editorial-card { width: 100%; max-width: var(--media-max, 100%); margin: 0; justify-self: center; overflow: hidden; background: var(--ink); }
.editorial-card img { width: 100%; height: auto; display: block; transition: transform .65s cubic-bezier(.16,1,.3,1); }
.editorial-card:hover img { transform: scale(1.012); }
.case-editorial--opening .editorial-card:first-child { grid-column: 1 / -1; }
.case-editorial--opening .editorial-card:nth-child(2) { grid-column: 2 / 12; margin-top: clamp(34px, 6vw, 100px); margin-bottom: clamp(28px, 5vw, 84px); }
.case-editorial--campaign .editorial-card:first-child { grid-column: 1 / -1; }
.case-editorial--campaign .editorial-card:nth-child(2) { grid-column: 1 / 7; margin-top: clamp(18px, 3vw, 52px); }
.case-editorial--campaign .editorial-card:nth-child(3) { grid-column: 7 / -1; margin-top: clamp(18px, 3vw, 52px); }
.case-editorial--campaign .editorial-card:nth-child(4) { grid-column: 2 / 12; margin-top: clamp(38px, 7vw, 118px); margin-bottom: clamp(28px, 5vw, 84px); }
.case-social { padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(48px, 8vw, 120px); background: var(--surface-muted); color: var(--ink); }
.social-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); gap: clamp(36px, 7vw, 120px); align-items: center; min-height: 86svh; }
.social-intro { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.social-intro > span, .social-intro p { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .13em; }
.social-intro h2 { margin: auto 0; max-width: 820px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(82px, 13vw, 210px); font-weight: 400; line-height: .84; letter-spacing: -.07em; }
.iphone { position: relative; justify-self: center; width: min(390px, 74vw); aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 58px; background: #050505; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 34px 70px rgba(0,0,0,.32); transform: rotate(2deg); }
.iphone::after { content: ""; position: absolute; inset: 6px; pointer-events: none; border: 1px solid rgba(255,255,255,.14); border-radius: 51px; }
.iphone-island { position: absolute; z-index: 5; top: 17px; left: 50%; width: 31%; height: 24px; border-radius: 30px; background: #050505; transform: translateX(-50%); }
.iphone-screen { height: 100%; overflow: hidden; border-radius: 48px; background: #fff; color: #090909; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; }
.ig-status, .ig-brandbar, .ig-account, .ig-actions, .ig-tabs { display: flex; align-items: center; justify-content: space-between; }
.ig-status { padding: 14px 19px 6px; font-size: 9px; }
.ig-brandbar { padding: 7px 16px 9px; border-bottom: 1px solid #e8e8e8; }
.ig-brandbar strong { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; font-weight: 400; letter-spacing: -.04em; }
.ig-brandbar span { font-size: 17px; letter-spacing: .12em; }
.ig-account { padding: 8px 12px; font-size: 10px; }
.ig-account strong { padding-left: 8px; }
.ig-account .ig-verified { width: 14px; height: 14px; margin-right: auto; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 8px; font-weight: 700; }
.ig-avatar, .ig-mini-avatar { flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #050505; }
.ig-avatar { width: 28px; height: 28px; border: 1px solid #050505; }
.ig-avatar img, .ig-mini-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ig-feed { position: relative; min-height: 0; overflow: hidden; background: var(--grey); }
.ig-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--white); opacity: 0; transform: translateY(12%) scale(.985); animation: igPostCycle 18s linear infinite both; animation-delay: calc(var(--slide-index) * 3s); }
.ig-actions { padding: 9px 13px 4px; font-size: 19px; }
.ig-caption { margin: 0; padding: 1px 13px 8px; font-size: 9px; }
.ig-caption strong { margin-right: 4px; }
.ig-tabs { padding: 7px 20px 12px; border-top: 1px solid #ececec; font-size: 18px; }
.ig-mini-avatar { width: 21px; height: 21px; font-size: 12px; }
.case-reel { padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(48px, 8vw, 120px); background: var(--paper); color: var(--ink); }
.reel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); gap: clamp(36px, 7vw, 120px); align-items: center; min-height: 86svh; }
.reel-intro { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.reel-intro > span, .reel-intro p { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .13em; }
.reel-intro a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.reel-intro h2 { margin: auto 0; max-width: 820px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(72px, 11vw, 176px); font-weight: 400; line-height: .86; letter-spacing: -.065em; }
.iphone-reel { transform: rotate(-2deg); }
.reel-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 48px; background: #000; }
.reel-screen video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background: #000; }
.case-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 20px 14px; min-width: 0; }
.case-grid figure { --media-max: 1800px; grid-column: 1 / -1; width: 100%; max-width: var(--media-max); margin: 0; min-width: 0; justify-self: center; display: grid; place-items: center; overflow: hidden; }
.case-grid.count-2 figure { grid-column: span 6; }
.case-grid.count-3 figure:first-child { grid-column: 1 / span 8; grid-row: span 2; }
.case-grid.count-3 figure:nth-child(2), .case-grid.count-3 figure:nth-child(3) { grid-column: 9 / span 4; }
.case-grid.count-4 figure { grid-column: span 6; }
.case-grid.is-gallery { grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr)); gap: 14px; }
.case-grid.is-gallery figure { grid-column: auto; width: 100%; max-width: var(--media-max); align-self: start; }
.case-grid.is-gallery img { width: auto; max-width: 100%; }
.case-grid.is-gif-gallery { counter-reset: gif-card; grid-template-columns: repeat(6, minmax(0, 170px)); justify-content: center; gap: 8px; }
.case-grid.is-gif-gallery figure { position: relative; counter-increment: gif-card; width: 100%; max-width: 170px; padding: 4px; background: var(--paper); border: 1px solid var(--ink); }
.case-grid.is-gif-gallery figure::after { content: counter(gif-card, decimal-leading-zero); position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-muted); border: 1px solid var(--ink); font-size: 8px; font-weight: 600; letter-spacing: .04em; }
.case-grid.is-gif-gallery img { width: 100%; }
.case-grid.count-1 figure.is-portrait { grid-column: 4 / span 6; max-width: min(var(--media-max), 760px); }
.case-grid figure.is-portrait { max-width: min(var(--media-max), 760px); }
.case-grid figure.is-square { max-width: min(var(--media-max), 1000px); }
.case-grid figure.is-panorama { max-width: min(var(--media-max), 1600px); }
.case-grid figure.is-low-res, .case-grid figure.is-gif { max-width: var(--media-max); }
.case-grid img { width: auto; max-width: 100%; height: auto; display: block; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.case-grid figure:hover img { transform: scale(1.018); }
.case-embeds { display: grid; gap: 12px; }
.case-embeds:has(.video-frame + .video-frame) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-video { padding-top: 34px; padding-bottom: 44px; background: var(--ink); color: var(--paper); }
.video-frame { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video-frame video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: var(--ink); }
.case-next { min-height: 70svh; padding: 22px 20px 28px; background: var(--section-bg); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.case-next > span { font-size: 10px; letter-spacing: .13em; }
.case-next a { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; color: var(--ink); text-decoration: none; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(68px, 11vw, 180px); line-height: .86; letter-spacing: -.06em; }
.case-next a > span { min-width: 0; overflow-wrap: anywhere; }
.case-next i { flex-shrink: 0; color: var(--accent); font-style: normal; transition: transform .25s; }
.case-next a:hover i { transform: translate(10px, -10px) rotate(8deg); }
.case-footer { background: var(--ink); color: var(--surface-muted); padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 9px; letter-spacing: .1em; }
.case-footer a { color: inherit; text-align: center; }
.case-footer a:last-child { text-align: right; }

@media (max-width: 1100px) and (min-width: 801px) {
  .case-grid.is-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-grid.is-gif-gallery { grid-template-columns: repeat(5, minmax(0, 140px)); }
  .case-grid.is-gif-gallery figure { max-width: 140px; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(12deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes igPostCycle {
  0% { opacity: 0; transform: translateY(12%) scale(.985); }
  1.5%, 14.5% { opacity: 1; transform: translateY(0) scale(1); }
  16.66%, 100% { opacity: 0; transform: translateY(-10%) scale(1); }
}

@media (max-width: 800px) {
  .cursor-orbit { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .header-name { font-size: 8px; letter-spacing: .1em; }
  .hero { padding-top: 80px; min-height: 74svh; }
  .hero-eye { width: 84vw; height: 34.5vw; min-height: 128px; }
  .hero-meta { grid-template-columns: 1fr; gap: 24px; }
  .hero-meta .coordinates { grid-column: 1; justify-self: start; text-align: left; }
  .section-kicker span:nth-child(2) { display: none; }
  .section-kicker { grid-template-columns: 1fr 1fr; }
  .work-layout { grid-template-columns: 1fr; }
  .preview-stage { position: relative; top: auto; height: 62vh; min-height: 420px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .project-index { padding: 24px 14px; }
  .project-row { grid-template-columns: 38px 1fr 42px; }
  .project-type { display: none; }
  .about-lead { grid-template-columns: 1fr; }
  .about-lead p { font-size: 15vw; }
  .contact-block { width: 100%; margin-top: 16vh; }
  footer { grid-template-columns: 1fr auto; gap: 12px; }
  footer span:nth-child(2) { display: none; }
  .case-topbar { grid-template-columns: auto 1fr auto; }
  .case-nav-label { text-align: center; font-size: 8px; }
  .case-study { padding-top: 57px; }
  .case-hero { min-height: 74svh; padding: 22px 14px; }
  .case-hero h1 { font-size: clamp(64px, 23vw, 122px); }
  .case-module { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .phase-label { padding: 0 0 2px; }
  .case-copy { padding-top: 13vw; padding-bottom: 14vw; }
  .case-copy p { font-size: 12vw; }
  .case-media, .case-video { padding-top: 18px; padding-bottom: 22px; }
  .case-editorial { padding: 8px; }
  .case-editorial > .phase-label { padding: 2px 0 8px; }
  .editorial-grid { gap: 8px; }
  .case-editorial--opening .editorial-card:nth-child(2), .case-editorial--campaign .editorial-card:nth-child(4) { grid-column: 1 / -1; margin-top: 28px; margin-bottom: 22px; }
  .case-editorial--campaign .editorial-card:nth-child(2) { grid-column: 1 / 7; margin-top: 8px; }
  .case-editorial--campaign .editorial-card:nth-child(3) { grid-column: 7 / -1; margin-top: 8px; }
  .case-social { padding-top: 28px; padding-bottom: 42px; }
  .social-layout, .reel-layout { grid-template-columns: 1fr; min-height: auto; gap: 38px; }
  .social-intro { min-height: 44svh; }
  .social-intro h2 { font-size: 24vw; }
  .case-reel { padding-top: 28px; padding-bottom: 42px; }
  .reel-intro { min-height: 38svh; }
  .reel-intro h2 { font-size: 21vw; }
  .iphone { width: min(350px, 86vw); }
  .case-grid, .case-grid.count-2, .case-grid.count-3, .case-grid.count-4, .case-embeds:has(.video-frame + .video-frame) { grid-template-columns: 1fr; }
  .case-grid.is-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .case-grid.is-gif-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .case-grid figure, .case-grid.count-1 figure.is-portrait, .case-grid.count-2 figure, .case-grid.count-3 figure, .case-grid.count-3 figure:first-child, .case-grid.count-3 figure:nth-child(2), .case-grid.count-3 figure:nth-child(3), .case-grid.count-4 figure { grid-column: 1; grid-row: auto; max-width: min(100%, var(--media-max)); }
  .case-grid.is-gallery figure { grid-column: auto; }
  .case-next { min-height: 55svh; padding: 18px 14px; }
  .case-next a { font-size: 18vw; }
  .case-footer { grid-template-columns: 1fr auto; gap: 12px; padding: 16px 14px; }
  .case-footer a { display: none; }
  .case-footer a:last-child { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}