/* Case-study layout: editorial, not template. Margin notes, ruled rows, no card boxes. */
:root { --rule: var(--line); }

/* one continuous page: sections divided by hairlines instead of alternating tinted bands */
.band, .band.alt { background: transparent; border-top: 1px solid var(--rule); }
.hero + .band { border-top: 1px solid var(--rule); }
.results { border-top: 0; }

/* margin-note layout: the small label sits in a left column, content to the right */
@media (min-width: 960px) {
  .band > .wrap:not(.split) { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 56px; }
  .band > .wrap:not(.split) > * { grid-column: 2; }
  .band > .wrap:not(.split) > .eyebrow { grid-column: 1; grid-row: 1 / span 14; align-self: start; position: sticky; top: 28px; padding-top: 0.9rem; line-height: 1.4; }
  .band > .wrap:not(.split) > h2 { margin-top: 0; }
  .band > .wrap:not(.split) > h2.claim { max-width: 26ch; }
}
.eyebrow { letter-spacing: 0.1em; font-size: 0.74rem; }

/* softer corners only where they help: images and placeholders sharpen up */
.slot, .media, .fig img.ph, .fig.vid video, .logo-chip, .linkcard, .note { border-radius: 3px; }
.slot { border-style: solid; border-width: 1px; border-color: var(--rule); background: repeating-linear-gradient(135deg, rgba(var(--ink), 0.045) 0 1px, transparent 1px 12px), var(--card); color: var(--muted); font-weight: 500; }
.slot small { color: var(--muted); opacity: .8; }

/* hero meta: plain text line */
.meta { gap: 0; margin-top: 22px; }
.meta li { border: 0; border-radius: 0; padding: 0; color: var(--muted); font-size: 0.95rem; }
.meta li + li::before { content: "/"; margin: 0 0.7em; color: var(--glow); }
.hero .role { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--glow); }

/* stats: a ruled spec list, not three boxes */
.stats { display: block; margin-top: 40px; max-width: 760px; border-top: 2px solid var(--paper); }
.stat { display: grid; grid-template-columns: minmax(120px, 0.55fr) 1fr; gap: 6px 28px; align-items: baseline; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 16px 0; }
.stat strong { font-size: clamp(2rem, 4.4vw, 3rem); }
.stat span { margin-top: 0; font-size: 1rem; }
@media (max-width: 560px) { .stat { grid-template-columns: 1fr; } }
.results { text-align: left; }
.results .wrap { text-align: left; }
.results h2 { margin-inline: 0; max-width: 22ch; }
.results .stats { border-top-color: var(--paper); max-width: 820px; }
.results .stat { background: none; }
.results .note { margin-left: 0; }

/* the old "cards": numbered, ruled rows with the heading beside the copy */
.cards { display: block; margin-top: 34px; border-top: 1px solid var(--rule); }
.card { display: grid; grid-template-columns: 52px minmax(160px, 0.8fr) 1.3fr; gap: 6px 24px; align-items: baseline; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 20px 0; }
.card .n { width: auto; height: auto; background: none; border-radius: 0; display: block; place-items: unset; color: var(--glow); font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; }
.card .n::before { content: "0"; }
.card h3 { margin-top: 0; font-size: 1.2rem; }
.card p { margin-top: 0; }
@media (max-width: 760px) { .card { grid-template-columns: 40px 1fr; } .card p { grid-column: 2; } }

/* steps: same ruled rows */
.steps { gap: 0; margin-top: 30px; border-top: 1px solid var(--rule); }
.step { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 16px 0; }

/* "starting point": struck-through words set as a line of type, not boxes */
.start { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 26px; }
.start div { border: 0; border-radius: 0; padding: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.7rem); }

/* brand/language tags as plain type */
.langs { gap: 0; }
.langs span, .langs span:nth-child(2), .langs span:nth-child(3) { background: none; color: var(--paper); padding: 0; border-radius: 0; font-size: 1.05rem; }
.langs span + span::before { content: "/"; margin: 0 .7em; color: var(--glow); font-weight: 400; }
.sw { border-radius: 3px; }

/* link card: a plain ruled link */
.linkcard { background: none; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; }
.linkcard:hover { transform: none; border-color: var(--glow); }

/* image grids: offset the middle image so rows don't read as identical tiles */
@media (min-width: 760px) {
  .shots:not(.two):not(.four) > :nth-child(2):not(:only-child) { margin-top: 44px; }
}
.list li::before { border-radius: 0; width: 10px; height: 2px; top: 0.85em; }
.week { border-left-width: 2px; }
.note { border-style: solid; border-width: 1px; border-color: var(--rule); }

/* chunky buttons become underlined links in the footer row except the primary one */
footer a.btn { border-radius: 3px; }
.case-link { border-radius: 3px; }

/* the closing results band stays a dark indigo block */
.band.results, .band.alt.results { background: var(--ground); border-top: 1px solid var(--rule); }
.results .stat strong { color: var(--paper); }

/* Floating way back to the street */
.back-fab { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; gap: 8px; background: var(--glow); color: var(--on-glow); font-weight: 800; font-size: .95rem; text-decoration: none; border-radius: 999px; padding: 11px 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.back-fab:hover { filter: brightness(1.08); }
.back-fab:focus-visible { outline: 2px dashed var(--paper); outline-offset: 3px; }
@media (max-width: 480px) { .back-fab { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 10px 15px; font-size: .9rem; } }
@media print { .back-fab { display: none; } }