/* ============================================================
   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: 16px; bottom: 12px; color: var(--accent-soft); opacity: .8; transition: opacity .6s; pointer-events: none; }
.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; } }