/* Shared styles for Responsible Design Works case-study pages.
   Layout adapted from the approved portfolio preview into the site's
   DM Serif Display / Inter typography and monochrome palette. */

*, *::before, *::after { box-sizing: border-box; }
:root {
  --white:#ffffff; --ink:#111111; --mid:#3a3a3a; --faint:#636363;
  --rule:#e0e0e0; --surface:#f6f7f7;
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'Inter', system-ui, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin:0; background:var(--white); color:var(--mid); font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; }

/* NAV (matches site) */
nav { position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid var(--rule); padding:0 48px; height:60px; display:flex; justify-content:space-between; align-items:center; }
.nav-logo { font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0.06em; text-decoration:none; color:var(--ink); }
nav ul { list-style:none; display:flex; gap:40px; margin:0; padding:0; }
nav ul a { font-size:12px; font-weight:400; letter-spacing:0.05em; color:var(--mid); text-decoration:none; transition:color .15s; }
nav ul a:hover { color:var(--ink); }

/* CASE CONTAINER */
.case-container { max-width:1080px; margin:0 auto; padding:64px 48px 0; }
.back { display:inline-block; font-size:14px; color:var(--mid); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px; margin-bottom:28px; }
.back:hover { color:var(--ink); border-color:var(--ink); }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:0.14em; font-weight:500; color:var(--faint); }

/* INTRO */
.case-intro { display:grid; grid-template-columns:1.8fr 1fr; gap:56px; align-items:start; }
.case-intro h1 { font-family:var(--serif); font-size:clamp(34px,4.4vw,50px); line-height:1.12; font-weight:normal; letter-spacing:-.5px; color:var(--ink); margin:12px 0 22px; }
.intro { font-size:18px; line-height:1.7; color:var(--mid); max-width:640px; margin:0; }
aside { border-left:2px solid var(--ink); padding:4px 0 4px 24px; }
aside span { display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--faint); margin-bottom:12px; }
aside strong { font-family:var(--serif); font-size:24px; line-height:1.35; font-weight:normal; color:var(--ink); display:block; }

/* FACTS */
.facts { display:flex; gap:48px; margin:26px 0 44px; padding-bottom:24px; border-bottom:1px solid var(--rule); font-size:14px; }
.facts p { margin:0; flex:1; color:var(--mid); }
.facts b { display:block; margin-bottom:4px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); font-weight:500; }

/* DECISIONS */
.split { display:grid; grid-template-columns:1fr 1.15fr; gap:50px; align-items:start; margin:40px 0; }
.decision { display:flex; gap:16px; margin:0 0 30px; }
.decision > span { font-size:13px; color:var(--ink); border-top:2px solid var(--ink); padding-top:6px; min-width:26px; font-weight:500; }
.decision h2, .decision h3 { font-size:19px; line-height:1.3; margin:2px 0 10px; color:var(--ink); font-weight:600; }
.decision p { font-size:16px; color:var(--mid); margin:0; }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:44px 0 20px; }

/* FIGURES */
figure { margin:0; background:var(--surface); padding:16px; border-radius:3px; }
figure img { width:100%; height:auto; display:block; background:#fff; }
figcaption { font-size:14px; color:var(--faint); line-height:1.55; margin-top:14px; }
figcaption b { display:block; color:var(--ink); font-size:16px; margin-bottom:5px; font-weight:600; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:36px 0; }
.pair.tall figure img { max-height:780px; object-fit:contain; object-position:top; }

/* BEFORE / AFTER FLOW (light, not a dark panel) */
.flow { display:flex; align-items:center; justify-content:center; gap:56px; background:var(--surface); color:var(--ink); padding:28px; text-align:center; border-radius:3px; margin:32px 0; }
.flow strong { display:block; font-family:var(--serif); font-size:42px; font-weight:normal; line-height:1; margin:6px 0; }
.flow small { font-size:11px; letter-spacing:0.16em; color:var(--faint); }
.flow p { margin:0; font-size:14px; color:var(--mid); }
.flow > span { font-size:30px; color:var(--faint); }

/* DETAILS / EXPANDABLE */
details { border-top:1px solid var(--rule); padding:18px 0; margin-top:30px; }
summary { cursor:pointer; font-size:15px; color:var(--ink); }
summary:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
details p { color:var(--mid); max-width:820px; font-size:15px; margin:12px 0 0; }

/* QUOTES */
blockquote { font-family:var(--serif); font-size:27px; line-height:1.4; border-left:2px solid var(--ink); margin:16px 0; padding:6px 0 6px 24px; max-width:760px; color:var(--ink); font-weight:normal; }
cite { display:block; font-family:var(--sans); font-style:normal; font-size:13px; margin-top:14px; color:var(--faint); }

/* FOOTER (matches site) */
footer { max-width:1080px; margin:64px auto 0; padding:28px 48px 44px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer span, footer a { font-size:12px; color:var(--faint); text-decoration:none; transition:color .15s; }
footer a:hover { color:var(--ink); }
.footer-links { display:flex; gap:28px; }

/* ===== CHURCHSPACE ===== */
.cs-research { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:52px 0; border-bottom:1px solid var(--rule); }
.cs-research > div > p:last-child { font-size:16px; color:var(--mid); }
.cs-heading { margin:44px 0 24px; }
.cs-heading h2, .cs-heading h3 { font-family:var(--serif); font-weight:normal; font-size:30px; line-height:1.2; margin:0 0 6px; color:var(--ink); }
.cs-heading p { margin:0; font-size:15px; color:var(--faint); }
.cs-sequence { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }

/* enlarge buttons */
.cs-image { display:block; position:relative; width:100%; padding:0; border:0; background:#fff; cursor:zoom-in; text-align:left; color:var(--ink); }
.cs-image svg { display:block; width:100%; height:auto; }
.cs-image > span { display:block; text-align:right; padding:8px 2px; font-size:12px; color:var(--faint); background:#fff; }
.cs-image:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }

/* labels for the later redesign */
.revision { margin:36px 0 52px; }
.revision-label { display:flex; justify-content:space-between; gap:16px; margin-bottom:16px; font-size:14px; }
.revision-label b, .revision-label h2 { color:var(--ink); font-weight:600; font-size:14px; margin:0; }
.revision-label span { color:var(--faint); }
.revision-note { font-size:14px; color:var(--faint); margin:16px 0 0; }

/* kitchen booking demo (monochrome) */
.kitchen-app { border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:#fff; color:var(--ink); box-shadow:0 16px 40px rgb(20 20 20 / .05); }
.kitchen-nav { padding:20px 30px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; }
.kitchen-nav b { font-size:22px; letter-spacing:-.5px; color:var(--ink); }
.kitchen-nav span { font-size:14px; color:var(--faint); }
.kitchen-heading { padding:26px 30px 18px; }
.kitchen-heading h3 { font-family:var(--serif); font-size:30px; line-height:1.2; margin:6px 0; font-weight:normal; }
.kitchen-heading p { font-size:14px; color:var(--faint); margin:4px 0; }
.kitchen-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr); gap:30px; padding:0 30px 32px; align-items:start; }
.kitchen-photo { width:100%; display:block; border-radius:8px; background:#f4f4f4; }
.kitchen-features { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 24px; }
.kitchen-features span { font-size:12px; padding:4px 9px; background:var(--surface); border-radius:4px; color:var(--mid); }
.kitchen-info h4 { font-size:19px; margin:10px 0; color:var(--ink); }
.kitchen-info > p { font-size:15px; color:var(--mid); }
.kitchen-info details { margin:0; padding:14px 0; }
.kitchen-info summary { font-size:15px; font-weight:600; }
.kitchen-info details p { font-size:14px; }
.booking-card { border:1px solid var(--rule); border-radius:10px; padding:24px; background:#fff; }
.booking-price strong { font-size:28px; color:var(--ink); }
.booking-price span { font-size:14px; color:var(--faint); }
.booking-hint { font-size:12px !important; color:var(--faint); margin:8px 0 16px; line-height:1.5; }
.date-label { display:block; font-weight:600; font-size:14px; margin:22px 0 6px; color:var(--ink); }
.booking-card input[type=date] { width:100%; min-width:0; padding:12px; border:1px solid #a8afb3; border-radius:6px; font:inherit; font-size:16px; color:var(--ink); background:#fff; }
.session-time { font-size:13px; color:var(--faint); margin:7px 0 24px; }
.booking-card fieldset { border:0; margin:0 0 22px; padding:0; }
.booking-card legend { font-size:15px; font-weight:600; margin-bottom:12px; color:var(--ink); }
.extra { display:flex; align-items:start; gap:10px; padding:12px 0; cursor:pointer; }
.extra input { width:18px; height:18px; accent-color:var(--ink); margin:2px 0; }
.extra > span { flex:1; }
.extra b { display:block; font-size:14px; font-weight:500; color:var(--ink); }
.extra small { display:block; font-size:12px; color:var(--faint); margin-top:3px; }
.extra > strong { font-size:14px; color:var(--ink); }
.cost-line { display:flex; justify-content:space-between; font-size:14px; margin:10px 0; color:var(--mid); }
.cost-line.total { border-top:1px solid var(--rule); padding-top:16px; margin-top:16px; font-size:17px; color:var(--ink); }
.review-booking { width:100%; border:0; border-radius:6px; background:var(--ink); color:#fff; font:inherit; font-size:16px; font-weight:600; padding:14px; cursor:pointer; }
.review-booking:hover { background:#000; }
.centered { text-align:center; margin-bottom:0; }
.booking-review { margin:0 30px 30px; padding:26px; background:var(--surface); border-radius:8px; }
.booking-review h3 { font-family:var(--serif); font-size:24px; margin:10px 0; font-weight:normal; color:var(--ink); }
.booking-review dl { margin:0; }
.booking-review dl > div { display:flex; justify-content:space-between; gap:30px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:15px; }
.booking-review dt { color:var(--faint); }
.booking-review dd { margin:0; text-align:right; color:var(--ink); }
.booking-review button { font:inherit; background:#fff; border:1px solid #7c8589; padding:10px 16px; border-radius:5px; cursor:pointer; margin-top:16px; color:var(--ink); }
.booking-review > p:last-child { font-size:13px; color:var(--faint); }
.kitchen-app button:focus-visible, .kitchen-app input:focus-visible, .kitchen-app summary:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }

/* enlarge modal */
.cs-modal { border:0; border-radius:8px; padding:18px; max-width:96vw; width:1300px; max-height:92vh; background:#fff; color:var(--ink); }
.cs-modal::backdrop { background:rgb(17 17 17 / .8); }
.cs-modal-top { display:flex; justify-content:space-between; align-items:center; position:sticky; top:-18px; background:#fff; padding:12px 0; gap:20px; }
.cs-modal-top button { background:var(--ink); color:#fff; border:0; border-radius:4px; padding:10px 18px; font:inherit; font-size:16px; cursor:pointer; }
.cs-modal-top button:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.cs-modal svg { display:block; width:100%; height:auto; }
.cs-modal h2 { font-size:18px; margin:0; font-family:var(--sans); font-weight:600; }
.cs-modal-content { overflow:auto; }

/* RESPONSIVE */
@media (max-width:860px) {
  .case-intro, .split, .pair, .three, .cs-research, .cs-sequence { grid-template-columns:1fr; }
  .case-intro { gap:22px; }
  .split { gap:28px; }
  .three { gap:0; }
  .facts { gap:24px; flex-wrap:wrap; }
  .kitchen-layout { grid-template-columns:1fr; padding:0 20px 24px; gap:24px; }
  .kitchen-nav, .kitchen-heading { padding-left:20px; padding-right:20px; }
  .booking-review { margin:0 20px 24px; padding:20px; }
  .booking-review dl > div { flex-direction:column; gap:3px; }
  .booking-review dd { text-align:left; }
  .cs-research { gap:24px; padding:34px 0; }
  .flow { gap:26px; padding:24px 12px; }
}
@media (max-width:720px) {
  nav, .case-container, footer { padding-left:22px; padding-right:22px; }
  .case-container { padding-top:44px; }
  footer { flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px) {
  nav ul { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }