/* ============================================================
   Case pages — no field, same system
   ============================================================ */
.case-page { background: var(--bg); }
.bar--case { grid-template-columns: 56px 1fr 56px; width: min(420px, calc(100vw - 2 * var(--frame))); }
.case { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: calc(var(--frame) + 12vh) var(--frame) 12vh; display: grid; gap: clamp(40px, 6vh, 80px); }
.case__crumb { color: var(--ink-dim); } .case__crumb a { color: var(--accent-soft); text-decoration: none; }
.case__title { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 10vw, 160px); line-height: .92; letter-spacing: -.03em; margin: 12px 0 18px; }
.case__lead { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 38px); color: var(--ink); opacity: .9; margin: 0 0 28px; max-width: 26ch; }
.case__facts { display: grid; grid-template-columns: repeat(4, auto); gap: 32px; justify-content: start; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.case__facts li { display: grid; gap: 6px; } .case__facts .mono-tag { color: var(--ink-dim); }
.case__fig { margin: 0; } .case__fig .box__media { aspect-ratio: 16 / 9; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.22,1,.36,1); border: 1px solid var(--ink-faint); background: #000; position: relative; overflow: hidden; }
.case__fig.js-box.is-in .box__media { clip-path: inset(0); }
.case__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case__body { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); }
.case__col h2 { color: var(--accent-soft); margin-bottom: 18px; }
.case__para { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 27px); line-height: 1.4; margin: 0; }
.case__made { display: grid; gap: 14px; font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; }
.case__made li { padding-left: 22px; position: relative; } .case__made li::before { content: "->"; position: absolute; left: 0; top: 0; font-family: var(--mono); color: var(--accent-soft); font-size: 12px; line-height: 1.8; }
.case__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.case__honest { border-top: 1px solid var(--ink-faint); padding-top: 28px; display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); }
.case__honest h2 { color: var(--ink-dim); } .case__honest p { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 24px); line-height: 1.4; margin: 0; grid-column: 1; }
.case__next { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 24px; border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); padding: 34px 0; text-decoration: none; color: var(--ink); transition: color .3s; }
.case__next:hover { color: var(--accent-soft); }
.case__next-title { font-family: var(--serif); font-size: clamp(36px, 5vw, 80px); letter-spacing: -.02em; line-height: 1; }
.case__next-arrow { font-family: var(--mono); font-size: 24px; color: var(--accent-soft); transition: transform .5s cubic-bezier(.22,1,.36,1); } .case__next:hover .case__next-arrow { transform: translateX(10px); }
.case__foot { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0 var(--frame) calc(var(--frame) + 20px); }
.case__foot a { color: var(--accent-soft); text-decoration: none; }
@media (max-width: 900px) { .case__body, .case__grid, .case__honest { grid-template-columns: 1fr; } .case__facts { grid-template-columns: 1fr 1fr; } .case { padding-top: calc(var(--frame) + 6vh); } .bar--case { display: none; } }

/* ---- the case field: the capture as calligraphy, the ink as a window ---- */
.case-page { animation: case-in .7s ease both; }
@keyframes case-in { from { opacity: 0; } to { opacity: 1; } }
.case__fig--hero .box__media { aspect-ratio: 16 / 9; }
.case__field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.box__media.has-field img { visibility: hidden; }        /* the field draws it; the img stays for readers, search and no-JS */
.case__hint { position: absolute; right: 12px; bottom: 12px; color: var(--ink); opacity: .9; transition: opacity .6s; pointer-events: none; background: rgba(5,6,10,.78); padding: 6px 9px 5px; border-radius: 3px; z-index: 3; }   /* on its own ink chip: the captures carry their own words at that corner */
.case__hint.is-gone { opacity: 0; }
.case__beat { display: inline-block; margin-right: 10px; color: var(--ink-dim); }
.case__para--small { font-size: clamp(16px, 1.2vw, 20px); opacity: .85; margin-bottom: 22px; }
.case__visit { grid-column: 2; align-self: start; justify-self: start; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink-faint); border-radius: 999px; padding: 12px 18px; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.case__visit:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.case__meta { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); border-top: 1px solid var(--ink-faint); padding-top: 28px; }
.case__meta h2 { color: var(--ink-dim); margin-bottom: 14px; }
.case__tags { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.case__tags li { border: 1px solid var(--ink-faint); border-radius: 999px; padding: 7px 12px; }
.bar--case { grid-template-columns: 1fr; width: min(380px, calc(100vw - 2 * var(--frame))); }
@media (max-width: 900px) { .case__meta { grid-template-columns: 1fr; } .case__visit { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .case-page { animation: none; } }

@media (hover: none) { .case__hint { display: none; } }   /* on touch the screen paints itself in with the scroll; nothing to 'move' */

@media (max-width: 900px) { .case__head { padding-top: 92px; } }   /* the brand and the call sit fixed at the top on phones; the title starts under them */

.bar--case::before { display: none; }   /* the orbit ring read as a stray arc on the case pages */

/* Design plan, batch 2: no hairline under the case pill; blue only on actions */
.bar--case::after { display: none; }
.case__col h2, .case__made li::before, .case__hint { color: var(--ink-dim); }
/* type roles (batch 2): Ibarra for the title and the next-link only; Archivo for the lead, the paragraphs and the honest note */
.case-page .case__lead { font-family: var(--sans); font-weight: 300; font-style: normal; font-size: clamp(18px, 1.8vw, 28px); line-height: 1.35; opacity: 1; }
.case-page .case__para, .case-page .case__honest p { font-family: var(--sans); font-weight: 300; }
.case-page .case__para { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; }
.case-page .case__honest p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }
.case-page .case__crumb a { color: var(--ink); }

/* Design plan, batch 3: the case shares its card's cel; every figure is 16:10, cropped from the top, with one caption style; the long column gets the width */
.case-page .case__fig .box__media, .case-page .case__fig--hero .box__media { aspect-ratio: 16 / 10; border: 1px solid var(--ink-faint); }
.case-page[data-cel="site"] .case__fig:not(.case__fig--hero) .box__media { background: var(--ink-faint); }
.case-page[data-cel="site"] .case__fig:not(.case__fig--hero) .box__media::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 2; background: var(--ink-faint);
  background-image: radial-gradient(circle 3px at 12px 11px, var(--ink-dim) 98%, transparent), radial-gradient(circle 3px at 24px 11px, var(--ink-dim) 98%, transparent), radial-gradient(circle 3px at 36px 11px, var(--ink-dim) 98%, transparent);
}
.case-page[data-cel="site"] .case__fig:not(.case__fig--hero) img { top: 22px; height: calc(100% - 22px); }
.case-page[data-cel="app"] .case__fig .box__media { background: #05060a; }
.case__figcap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--ink-faint); padding-top: 10px; margin-top: 12px; }
.case__figname { font-family: var(--sans); font-size: 13px; color: var(--ink); }
.case__figcap .mono-tag { color: var(--ink-dim); }
.case-page .case__body { grid-template-columns: 5fr 7fr; }
.case-page .case__col:last-child { max-width: 62ch; }
.case-page .case__col--text .case__para { font-size: clamp(18px, 1.5vw, 23px); }
@media (max-width: 900px) { .case-page .case__body { grid-template-columns: 1fr; } .case-page .case__col:last-child { max-width: none; } }   /* one column on a phone — the 5/7 split above must not outrank the phone rule */