/* Shared visual language for case studies and project stories.
   Collections is the reference: open page layout, editorial type, neutral rules,
   blue reserved for emphasis rather than enclosing every section. */
:root {
  --case-line: #e2e7ef;
  --case-muted: #52617a;
  --case-heading: #0b1026;
  --color-border: var(--case-line);
  --rule: var(--case-line);
  --blueLine: var(--case-line);
  --space-section: clamp(80px, 10vw, 128px);
}

/* Collections is the base direction: white canvas, quiet neutral rules and
   editorial hierarchy. Individual studies can still introduce patterns that
   suit their evidence and media. */
.portfolio-case {
  --color-border: var(--case-line);
  --brand-line: var(--case-line);
  --line: var(--case-line);
  background: #f6f5f1;
}

header.site-header,
.site-header {
  border-bottom: 0;
  background: rgba(246, 245, 241, .92);
}

@media (max-width: 880px) {
  .portfolio-case .nav-links { background: #f6f5f1 !important; }
}

.container { max-width: 1200px; padding-left: 40px; padding-right: 40px; }
.shell { width: min(calc(100% - 80px), 1120px); }

/* Remove the old blue perimeter and use the full content width. */
.case,
.case-card { border: 0 !important; border-radius: 0; overflow: visible; background: transparent; box-shadow: none !important; }
.portfolio-case .reveal { opacity: 1 !important; transform: none !important; }
.case-inner { padding: 0; }
.case-intro { padding: 0; }
.case-narrative { padding: 0; }

.case-context-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  color: #1855ef;
  font-family: var(--font-mono, var(--mono));
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
}
.case-context-line::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: 0 0 auto;
  background: #1855ef;
}

.section-head { max-width: 900px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h1,
.section-head h2 {
  max-width: 21ch;
  font-family: var(--font-display, var(--display));
  font-size: clamp(46px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -.018em;
  font-weight: 400;
  color: var(--case-heading);
}
.section-head .sub { max-width: 66ch; font-size: 19px; line-height: 1.5; color: var(--case-muted); }

.case-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #1855ef;
}
.case-kicker::before { content: ""; width: 28px; height: 1px; flex: 0 0 auto; background: #1855ef; }
.case h3.case-title,
.case-title {
  max-width: 24ch;
  font-family: var(--font-display, var(--display));
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--case-heading);
}
.case .case-sub,
.case-sub,
.case-sub-lead,
.case-intro-copy { color: var(--case-muted); }

.case-facts { border-color: var(--case-line); }
.case-facts .fact { border-color: var(--case-line); }

/* The old card template repeated the page introduction. These openings now
   move directly from one hero into context, facts and the primary artefact. */
.case-hpe-page .case-inner > .case-facts { margin-top: 0; }
.case-hpe-page .mvp-carousel { margin-top: 46px; }
.case-scheduling-page .case-client-context { max-width: 66ch; }
.case-scheduling-page .case-intro-copy { max-width: 66ch; }
.case-turn-page .case-intro .case-sub { max-width: 66ch; }

/* Narrative sections now have the same measured rhythm as Collections. */
.case-section { margin-top: 0; margin-bottom: 0; padding: clamp(70px, 8vw, 100px) 0; border-top: 1px solid var(--case-line); }
.case-section h4 {
  font-family: var(--font-display, var(--display));
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.014em;
  color: var(--case-heading);
}
.case-section h4 .index { color: #1855ef; font-size: 12px; }
.case-section .prose { max-width: 66ch; color: var(--case-muted); font-size: 17px; line-height: 1.6; }
.case-section .prose strong { color: var(--case-heading); }
.case-inner > .prose { color: var(--case-muted); font-size: 17px; line-height: 1.6; }

/* Content-specific patterns stay, but their decorative outlines recede. */
.reframe .cell.deep { border-color: var(--case-line); }
.case-hero-visual,
.artifact { max-width: 100%; }
.frame,
.mvpc-window,
.mvpc-stage,
.suiyu-header-visual img { border-color: var(--case-line); }
.case-hero-visual,
.intro-visual,
.artifact,
.suiyu-header-visual { border-color: var(--case-line); }

/* Turn research uses a long-form evidence format rather than the shorter case format. */
.case-overview { padding: clamp(80px, 10vw, 128px) 0 96px; border: 0; }
.case-intro .meta { margin-top: 36px; }
.case-narrative .section { padding: clamp(70px, 8vw, 100px) 0 0; }
.case-narrative .section + .section { margin-top: clamp(70px, 8vw, 100px); border-top-color: var(--case-line); }
.case-narrative .section h2 {
  max-width: 22ch;
  font-family: var(--font-display, var(--display));
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.014em;
}
.case-narrative .copy { width: min(100%, 740px); margin-left: 0; }
.case-narrative .copy p { color: var(--case-muted); font-size: 17px; line-height: 1.6; }
.case-narrative .num { color: #1855ef; }
.outcome { border-color: var(--case-line); }

/* Jess is not wrapped in the old case card, so align its opening directly. */
.case-page > h1.case-title { max-width: 17ch; font-size: clamp(48px, 5.4vw, 68px); line-height: 1; }
.case-page > .case-sub-lead { max-width: 66ch; font-size: 19px; line-height: 1.5; }

/* Keep the media-specific strengths of the personal projects inside the same
   system: Jess uses a wide screen sequence; SuiYu uses cinematic world art. */
.project-jess-page .case-hero-visual.full,
.project-suiyu-page .suiyu-header-visual { margin-inline: 0; }
.project-jess-page .case-section,
.project-suiyu-page .case-section { border-top-color: var(--case-line); }

/* Consistent handoff between studies. */
.next-case {
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--case-line);
}
.next-case a {
  display: grid;
  gap: 8px;
  padding: clamp(24px, 4vw, 40px);
  border: 0;
  border-radius: 18px;
  background: #f8faff;
  color: #111827;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.next-case a:hover { border-color: transparent; background: #f1f5ff; transform: translateY(-2px); }
.next-case .label { color: #758094; font-family: var(--font-mono, var(--mono)); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.next-case .title { color: var(--case-heading); font-family: var(--font-display, var(--display)); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; }
.next-case .desc { max-width: 58ch; color: var(--case-muted); font-size: 15.5px; line-height: 1.55; }
.next-case .cta { margin-top: 10px; color: #1855ef; font-size: 14.5px; font-weight: 600; }
.next-case .arrow { display: inline-block; transition: transform .2s ease; }
.next-case a:hover .arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .shell { width: min(calc(100% - 48px), 1120px); }
  .case-section { padding: 64px 0; }
  .case-narrative .section { padding-top: 64px; }
  .nav-menu-toggle,
  .menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--case-line);
    border-radius: 50%;
    background: #fff;
  }
}
@media (max-width: 560px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .shell { width: min(calc(100% - 32px), 1120px); }
  .section-head h1,
  .section-head h2 { font-size: 42px; }
  .section-head .sub,
  .case-page > .case-sub-lead { font-size: 17px; }
  .case h3.case-title,
  .case-title { font-size: 36px; }
  .case-section h4 { font-size: 30px; }
  .case-section .prose,
  .case-inner > .prose { font-size: 16px; }
}