/* Project detail pages share the site's header, footer and typography. */
.page-case { background:#fcf9f6; color:#252628; }
.page-case main .container { width:min(1280px,calc(100% - 88px)); margin-inline:auto; }
.page-case main h1,.page-case main h2,.page-case main h3 { letter-spacing:-.035em; }
.page-case main .eyebrow { font-size:12px; letter-spacing:.09em; color:#9a5632; font-weight:600; margin:0 0 17px; }
.case-hero { padding:24px 0 0; background:linear-gradient(125deg,#fcfaf7,#eee6dd); }
.case-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:#85817c; font-size:12px; }
.case-breadcrumb a { color:#595854; }
.case-breadcrumb a:hover { color:#a4572f; }
.case-breadcrumb [aria-current] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:65%; }
.case-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; padding:60px 0 64px; }
.case-hero-copy h1 { font-size:clamp(34px,3.6vw,52px); line-height:1.25; font-weight:600; margin:0 0 24px; overflow-wrap:anywhere; }
.case-intro { color:#6a6966; font-size:17px; line-height:1.9; max-width:510px; margin:0; }
.case-topic-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.case-topic-tags span { font-size:12px; color:#7b6f65; padding:5px 11px; border:1px solid #dcd0c5; border-radius:4px; }
.case-explore { display:inline-flex; align-items:center; gap:36px; font-size:14px; padding:12px 0; border-bottom:1px solid #a67e5e; margin-top:28px; color:#6e482e; }
.case-hero-visual { position:relative; aspect-ratio:8/6; overflow:hidden; border-radius:14px; background:radial-gradient(ellipse at 60% 25%,#ffffff88,transparent 75%),var(--cover-bg); box-shadow:0 15px 50px #452c1710; }
.case-hero-visual .case-composition--mobile { padding:10% 13% 0; gap:7%; }
.case-hero-visual .case-phone { border-width:6px; border-radius:20px; }
.case-hero-visual .case-browser { border-radius:10px; }
.case-hero-visual .case-browser-bar { height:26px; padding-left:12px; gap:5px; }
.case-hero-visual .case-browser-bar i { width:5px; height:5px; }
.case-visual-label { position:absolute; left:22px; bottom:18px; font-size:9px; font-weight:600; letter-spacing:.15em; color:#3b3b3780; background:#ffffffbf; padding:6px 8px; border-radius:3px; }
.case-section-nav { display:flex; gap:34px; border-top:1px solid #d9cfc5; padding:20px 0; font-size:13px; color:#776d63; }
.case-section-nav a:hover { color:#ad633a; }
.case-section { scroll-margin-top:90px; padding:88px 0; }
.case-story-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; }
.page-case main h2 { font-size:clamp(26px,2.6vw,36px); line-height:1.45; margin:0; font-weight:600; }
.case-story { color:#666762; font-size:17px; line-height:2; }
.case-story p { margin:0 0 20px; }
.case-story .case-context-label { font-size:12px; color:#a2653f; letter-spacing:.1em; margin:0 0 18px; }
.case-modules { background:#202325; color:#f7f1ea; }
.case-modules .eyebrow { color:#dfa27b !important; }
.case-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:42px; }
.case-section-heading > p { max-width:340px; font-size:14px; line-height:1.8; color:#7b7b76; margin:0 0 5px; }
.case-modules .case-section-heading > p { color:#a9a7a2; }
.case-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#ffffff1c; border:1px solid #ffffff1c; }
.case-module { padding:28px; min-width:0; background:#202325; }
.case-module > span { color:#a68a76; font-size:12px; letter-spacing:.04em; }
.case-module h3 { margin:18px 0 12px; font-size:19px; line-height:1.5; font-weight:500; }
.case-module p { margin:0; color:#acaeab; font-size:14px; line-height:1.9; }
.case-gallery { background:#f8f4ef; }
.case-gallery-grid { display:flex; flex-wrap:wrap; gap:36px; align-items:flex-start; justify-content:center; padding:34px; background:#eee8df; border:1px solid #e5ddd2; border-radius:12px; }
.case-shot { margin:0; width:min(100%,var(--shot-width)); min-width:0; }
.case-shot--wide { flex:1 1 100%; }
.case-shot > a { display:block; position:relative; border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 8px 22px #35302b13; }
.case-shot img { display:block; width:100%; height:auto; }
.case-shot figcaption { display:flex; gap:12px; padding-top:15px; font-size:12px; color:#76716a; line-height:1.7; }
.case-shot figcaption > span { color:#ab866c; font-variant-numeric:tabular-nums; }
.case-zoom { position:absolute; right:10px; bottom:10px; border-radius:999px; padding:7px 11px; background:#22282bea; color:#fff; font-size:11px; opacity:0; transition:opacity .2s; }
.case-shot a:hover .case-zoom,.case-shot a:focus-visible .case-zoom { opacity:1; }
.case-pagination { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:40px; padding:34px 0 54px; }
.case-pagination > a { display:flex; flex-direction:column; gap:10px; min-width:0; }
.case-pagination > a:last-child { text-align:right; align-items:flex-end; }
.case-pagination small { font-size:12px; color:#91745f; }
.case-pagination strong { font-size:15px; font-weight:500; color:#4a4b46; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.case-pagination .case-back-list { display:flex; flex-direction:row; align-items:center; gap:18px; border:1px solid #d8c7b8; padding:13px 20px; border-radius:999px; color:#8d5735; font-size:13px; }
.page-case main :is(a,button):focus-visible { outline:3px solid #b66736; outline-offset:5px; }
.case-image-dialog { width:min(1200px,calc(100% - 32px)); max-height:calc(100dvh - 32px); border:1px solid #4f514e; border-radius:12px; padding:0; background:#202325; color:#fff; box-shadow:0 24px 100px #0008; }
.case-image-dialog::backdrop { background:#070b10dc; backdrop-filter:blur(8px); }
.case-image-dialog-header { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:12px 18px; position:sticky; top:0; z-index:1; background:#202325; border-bottom:1px solid #ffffff1c; }
.case-image-dialog-header p { margin:0; font-size:14px; color:#eeece8; }
.case-image-dialog-close { display:grid; place-items:center; flex:0 0 40px; height:40px; border:1px solid #ffffff33; border-radius:50%; color:#fff; background:transparent; font-size:25px; cursor:pointer; }
.case-image-dialog-close:focus-visible { outline:3px solid #ffd1ae; outline-offset:3px; }
.case-image-dialog-body { padding:24px; display:flex; justify-content:center; }
.case-image-dialog img { display:block; width:auto; max-width:100%; height:auto; align-self:flex-start; }
@media (max-width:1100px) {
  .case-hero-grid { gap:36px; }
  .case-story-grid { gap:48px; }
  .case-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-gallery-grid { gap:26px; padding:26px; }
  .case-shot--portrait { width:min(calc(50% - 13px),var(--shot-width)); }
}
@media (max-width:767px) {
  .page-case main .container { width:calc(100% - 40px); }
  .case-hero { padding-top:20px; }
  .case-breadcrumb { gap:8px; font-size:11px; }
  .case-hero-grid { grid-template-columns:1fr; gap:30px; padding:38px 0 30px; }
  .case-hero-copy h1 { font-size:34px; margin-bottom:18px; }
  .case-intro { font-size:15px; line-height:1.9; }
  .case-hero-visual { aspect-ratio:8/5; }
  .case-hero-visual .case-phone { border-width:4px; border-radius:13px; }
  .case-hero-visual .case-composition--mobile { padding-top:10%; }
  .case-topic-tags { margin-top:20px; }
  .case-explore { margin-top:15px; }
  .case-section-nav { gap:0; justify-content:space-between; font-size:11px; padding:18px 0; }
  .case-section { padding:50px 0; scroll-margin-top:76px; }
  .case-story-grid { grid-template-columns:1fr; gap:25px; }
  .case-story { font-size:15px; }
  .case-section-heading { display:block; margin-bottom:28px; }
  .case-section-heading > p { margin:16px 0 0; }
  .case-module-grid { grid-template-columns:1fr; }
  .case-module { padding:24px; }
  .case-module h3 { font-size:18px; margin-top:12px; }
  .case-gallery-grid { padding:20px; gap:30px; }
  .case-shot--portrait { width:min(100%,var(--shot-width)); }
  .case-zoom { opacity:1; }
  .case-pagination { grid-template-columns:1fr 1fr; gap:26px; padding:30px 0 40px; }
  .case-pagination .case-back-list { grid-row:2; grid-column:1/-1; justify-self:center; }
  .case-pagination strong { max-width:100%; font-size:13px; }
  .case-pagination small { font-size:11px; }
  .case-image-dialog-body { padding:12px; }
}
@media (prefers-reduced-motion:reduce) { .case-zoom { transition:none; } }