:root {
  --color-primary: #313668;
  --color-primary-dark: #1f2247;
  --color-secondary: #5a9185;
  --color-secondary-light: #e8f0ed;
  --color-bg: #faf9f6;
  --color-bg-alt: #f2f0ea;
  --color-ink: #22242b;
  --color-muted: #63676f;
  --color-border: #e1ddd3;
  --color-border-strong: #cfc9ba;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 4px;
  --measure: 720px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 17px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-main { flex: 1 0 auto; }

h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1 { font-weight: 700; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-secondary); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.subsection-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary-dark);
  margin-bottom: 1.2rem;
}

.measure { max-width: var(--measure); }

/* ---- Nav ---- */
.site-nav {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-nav .navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary-dark) !important;
}
.site-nav .nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-ink) !important;
  margin-left: 1.4rem;
  padding: 0 !important;
}
.site-nav .nav-link:hover { color: var(--color-secondary) !important; }
.site-nav .nav-link.btn-outline {
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  padding: 0.35rem 1.1rem !important;
  color: var(--color-primary) !important;
}
.site-nav .nav-link.btn-outline:hover {
  background: var(--color-primary);
  color: #fff !important;
}
.site-nav .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(49,54,104,0.1);
  padding: 0.4rem;
  margin-top: 0.6rem;
}
.site-nav .dropdown-item {
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  border-radius: 7px;
}
.site-nav .dropdown-item:hover {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}
.site-nav .dropdown-toggle::after { vertical-align: 0.15em; }

/* ---- Buttons ---- */
.btn-primary-custom {
  background: var(--color-primary);
  border: none;
  color: #fff;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
  transition: background 0.15s ease;
}
.btn-primary-custom:hover { background: var(--color-primary-dark); color: #fff; }

.btn-secondary-custom {
  background: transparent;
  border: 1.5px solid var(--color-secondary);
  color: var(--color-secondary);
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
  transition: all 0.15s ease;
}
.btn-secondary-custom:hover { background: var(--color-secondary); color: #fff; }

.text-link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary);
  border-bottom: 1px solid transparent;
}
.text-link:hover { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }

/* ---- Hero ---- */
.hero { padding: 3.6rem 0 2.6rem; scroll-margin-top: 90px; }
.hero h1 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.22;
  color: var(--color-primary-dark);
}
.hero .lede { max-width: var(--measure); font-size: 1.08rem; color: var(--color-muted); }

/* ---- Scope indicator ---- */
.scope-track {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.9rem 0 1.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.scope-track .scope-step {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-muted);
}
.scope-track .scope-step.active {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background: var(--color-secondary-light);
}
.scope-track .scope-arrow { color: var(--color-border-strong); }

/* ---- Case study cards (Home) ---- */
.case-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.9rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.case-card:hover {
  box-shadow: 0 8px 24px rgba(49, 54, 104, 0.08);
  transform: translateY(-2px);
}
.case-card .card-image-placeholder { height: 160px; border-radius: var(--radius); margin-bottom: 1.6rem; }
.case-card img, .case-card .img-placeholder { height: 190px; object-fit: contain; object-position: top; background: #fff; margin-bottom: 1.3rem; }
.case-card h3 { font-size: 1.1rem; margin: 0.3rem 0 0.5rem; color: var(--color-primary-dark); }
.case-card p { color: var(--color-muted); font-size: 0.86rem; line-height: 1.5; margin-bottom: 0.7rem; }
.case-card .featured-work {
  font-size: 0.8rem;
  color: var(--color-ink);
  border-top: 1px solid var(--color-border);
  padding-top: 0.65rem;
  margin-top: 0.65rem;
  line-height: 1.45;
}
.case-card .featured-work .label { color: var(--color-secondary); font-weight: 600; }
.case-card .view-link {
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-block;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* ---- Image placeholder ---- */
.img-placeholder {
  background: repeating-linear-gradient(135deg, var(--color-bg-alt), var(--color-bg-alt) 10px, #eae6dc 10px, #eae6dc 20px);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-family: var(--font-body);
  padding: 1rem;
  min-height: 180px;
}
.img-placeholder .fname {
  display: block;
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--color-primary);
  margin-top: 0.4rem;
}

/* ---- Sections ---- */
.section { padding: 2.2rem 0; scroll-margin-top: 90px; }
.section-alt { background: var(--color-bg-alt); }
.section-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.section-lede { max-width: var(--measure); color: var(--color-muted); font-size: 1.05rem; }

/* ---- Design principles list ---- */
.principles-list { list-style: none; padding: 0; margin: 0; }
.principles-list li { padding: 0.45rem 0; display: flex; gap: 0.55rem; align-items: baseline; }
.principles-list li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 0.4rem;
}
.principles-list li > div { font-size: 0.92rem; line-height: 1.5; }
.principles-list strong { color: var(--color-primary-dark); font-weight: 700; }

/* ---- Evidence cards ---- */
.evidence-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.evidence-card:hover { box-shadow: 0 8px 24px rgba(49, 54, 104, 0.08); transform: translateY(-2px); }
.evidence-card img { width: 100%; height: 150px; object-fit: contain; object-position: top; background: #fff; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid var(--color-border); }
.evidence-card h4 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.evidence-card p { font-size: 0.93rem; color: var(--color-muted); flex-grow: 1; }
.evidence-card a { font-size: 0.85rem; font-weight: 600; margin-top: auto; padding-top: 0.5rem; }
.evidence-card.card-link-wrap { padding: 0; overflow: hidden; }
.evidence-card.card-link-wrap a.card-link { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; color: inherit; }
/* DOM order is: h4, p, img, span — header, subheader, landscape image, button */
.evidence-card.card-link-wrap h4 {
  margin: 0 0 0.5rem; min-height: 2.5rem;
}
.evidence-card.card-link-wrap p {
  margin: 0 0 1rem; flex-grow: 0; min-height: 3.9rem;
}
.evidence-card.card-link-wrap img {
  margin: 0 -1.6rem 1rem; width: calc(100% + 3.2rem); height: 140px;
  border-radius: 0; border: none; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.evidence-card.card-link-wrap .card-cta { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); margin-top: auto; padding-top: 0; }
.evidence-card.card-link-wrap:hover .card-cta { color: var(--color-secondary); }

/* ---- Story body ---- */
.story-body p { font-size: 0.97rem; line-height: 1.6; margin-bottom: 0.85rem; color: var(--color-ink); }
.story-workflow {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-muted);
  border-left: 3px solid var(--color-secondary);
  padding-left: 1rem;
  margin: 1.3rem 0;
}

/* ---- Reflection placeholder — quiet, not alert-like ---- */
.reflection-pending {
  border: 1px dashed var(--color-border-strong);
  background: transparent;
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-primary-dark);
  color: #c7cbe0;
  padding: 1.6rem 0;
  font-size: 0.88rem;
  border-top: 3px solid var(--color-secondary);
  flex-shrink: 0;
}
.site-footer .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--color-secondary); }
.site-footer .footer-name { font-family: var(--font-display); color: #fff; font-size: 1rem; font-weight: 700; }
.site-footer a.footer-name:hover { color: var(--color-secondary); }
.site-footer .footer-dot { color: #6d72a0; }
.site-footer .footer-links { display: flex; align-items: center; gap: 0.9rem; }
.site-footer .footer-links a { font-weight: 500; font-size: 0.85rem; }

/* ---- About My Work (home) — proportionate to other sections ---- */
.about-teaser-title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 1rem; }
.about-teaser-text { font-size: 1.05rem !important; }


/* ---- Design process indicator ---- */
.scope-track.design-track {
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}
.scope-track.design-track .scope-step {
  white-space: nowrap;
}

/* ---- Scope track, footer variant (shown at bottom of case study pages) ---- */
.scope-track.scope-track-footer { justify-content: center; margin: 0 0 0.5rem; }

.nowrap { white-space: nowrap; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Utility ---- */
.text-muted-custom { color: var(--color-muted); }

/* ---- In-site document viewer (page-turn) ---- */
.flipbook { max-width: 900px; margin: 0 auto; }
.fb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 8.5;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(49,54,104,0.09);
  overflow: hidden;
  cursor: pointer;
  perspective: 1800px;
}
.fb-page { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.26s ease; }
.fb-page.is-active { opacity: 1; visibility: visible; z-index: 2; }
.fb-page img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
@keyframes fbFlipFwd  { 0%{transform:rotateY(0)} 45%{transform:rotateY(-6deg)} 100%{transform:rotateY(0)} }
@keyframes fbFlipBack { 0%{transform:rotateY(0)} 45%{transform:rotateY(6deg)}  100%{transform:rotateY(0)} }
.fb-stage.flip-fwd  { animation: fbFlipFwd 0.4s ease; }
.fb-stage.flip-back { animation: fbFlipBack 0.4s ease; }
.fb-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.fb-btn {
  border: 1.5px solid var(--color-primary); background: transparent; color: var(--color-primary);
  border-radius: 999px; width: 38px; height: 38px; font-size: 1rem; line-height: 1;
  cursor: pointer; transition: all 0.15s ease;
}
.fb-btn:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.fb-btn:disabled { opacity: 0.3; cursor: default; }
.fb-counter { font-size: 0.85rem; font-weight: 600; color: var(--color-muted); min-width: 58px; text-align: center; }
.fb-dots { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 0.6rem; }
.fb-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 1px solid var(--color-border); background: transparent; cursor: pointer; transition: all 0.15s ease; }
.fb-dot.is-active { background: var(--color-secondary); border-color: var(--color-secondary); transform: scale(1.3); }
.fb-hint { text-align: center; font-size: 0.8rem; color: var(--color-muted); margin-top: 0.7rem; }

/* --- Text-rendered document pages (in-site, not linked to Google Docs) --- */
.doc-paper {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2.4rem 2.6rem;
  box-shadow: 0 6px 22px rgba(49,54,104,0.06);
}
.doc-paper h2 { font-size: 1.2rem; color: var(--color-primary-dark); margin: 1.6rem 0 0.7rem; }
.doc-paper h2:first-child { margin-top: 0; }
.doc-paper p { font-size: 0.96rem; line-height: 1.65; color: var(--color-ink); margin-bottom: 0.85rem; }
.doc-paper .q-item { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--color-border); }
.doc-paper .q-item:last-child { border-bottom: none; }
.doc-paper .q-num { font-weight: 700; color: var(--color-primary-dark); }
.doc-paper .q-choices { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; color: var(--color-muted); }
.doc-paper .q-choices li { margin-bottom: 0.15rem; }
.doc-paper .q-quote { font-style: italic; color: var(--color-ink); border-left: 3px solid var(--color-border-strong); padding-left: 0.9rem; margin: 0.5rem 0; font-size: 0.92rem; }
.doc-unit-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-secondary); font-weight: 700; margin: 1.8rem 0 0.8rem; }
.doc-tabs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.6rem; flex-wrap: wrap; }
.doc-tab-btn {
  border: 1.5px solid var(--color-border-strong); background: transparent; color: var(--color-ink);
  border-radius: 999px; padding: 0.42rem 1.1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease;
}
.doc-tab-btn.is-active, .doc-tab-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.doc-tab-panel { display: none; }
.doc-tab-panel.is-active { display: block; }
.doc-lang-block { margin-bottom: 1.3rem; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--color-border); }
.doc-lang-block:last-child { border-bottom: none; }
.doc-lang-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--color-secondary); margin-bottom: 0.3rem; }
.doc-lang-block[dir="rtl"] p { direction: rtl; text-align: right; }
.doc-prompt-box {
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; font-size: 0.88rem; font-style: italic; color: var(--color-ink); margin: 1.2rem 0;
}
.doc-table-wrap { overflow-x: auto; margin: 1rem 0 1.6rem; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.doc-table th, .doc-table td { border: 1px solid var(--color-border); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
.doc-table th { background: var(--color-bg-alt); font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; }
.data-table-wrap { overflow-x: auto; margin: 1rem 0; }
.data-table { border-collapse: collapse; font-size: 0.78rem; margin: 0 auto; }
.data-table th, .data-table td { border: 1px solid var(--color-border); padding: 0.3rem 0.45rem; text-align: center; min-width: 28px; }
.data-table th { background: var(--color-bg-alt); font-weight: 700; }
.data-table td.correct { background: #e6f4ea; color: #1e6b3a; }
.data-table td.incorrect { background: #fbe9e9; color: #a33131; }
.data-table td.unclear { background: #fff6d6; color: #8a6d00; }
.data-legend { display: flex; gap: 1.4rem; justify-content: center; margin: 1rem 0 1.6rem; font-size: 0.85rem; flex-wrap: wrap; }
.data-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.data-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--color-border); }
.doc-video-wrap { max-width: 760px; margin: 0 auto 1.6rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: #000; }
.doc-video-wrap iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }
.orig-source-note { max-width: 760px; margin: 0 auto 1.6rem; font-size: 0.86rem; color: var(--color-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1.1rem; }
.orig-source-note a { font-weight: 600; }


/* =========================================================
   Visual revision pass — August 2026
   Original artifacts first; tighter spacing; responsive document orientation
   ========================================================= */

/* Tighter vertical rhythm */
.hero { padding: 3rem 0 2.1rem; }
.section { padding: 1.75rem 0; }
.document-page .hero { padding-bottom: 1rem; }
.document-page .section { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.document-page .section.pt-0 { padding-top: 0 !important; }

/* Make original artifact imagery feel intentional, not thumbnail-like */
.case-card { padding: 1.45rem; }
.case-card img,
.case-card .img-placeholder {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center top;
  background: #fff;
  margin-bottom: 1.15rem;
  border: 1px solid var(--color-border);
}
.case-card img.original-preview {
  height: 285px;
}
.case-card h3 { margin-top: 0.15rem; }

/* Evidence cards: enlarge source material and stop forcing every preview into a short landscape strip */
.evidence-card.card-link-wrap {
  height: auto;
}
.evidence-card.card-link-wrap a.card-link {
  height: auto;
  padding: 1.35rem;
}
.evidence-card.card-link-wrap h4 {
  min-height: 0;
  margin-bottom: 0.45rem;
}
.evidence-card.card-link-wrap p {
  min-height: 0;
  margin-bottom: 0.9rem;
}
.evidence-card.card-link-wrap img {
  display: block;
  width: calc(100% + 2.7rem);
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center top;
  margin: 0 -1.35rem 0.95rem;
  background: #fff;
  border: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.evidence-card.card-link-wrap .card-cta {
  margin-top: 0.25rem;
}

/* Hero artifacts: show the actual source at a readable scale */
.artifact-hero {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  object-position: center top;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Flipbooks now inherit each source page's real aspect ratio from flipbook.js */
.flipbook {
  max-width: 1040px;
  margin: 0 auto;
}
.flipbook.is-portrait { max-width: 720px; }
.flipbook.is-landscape { max-width: 1040px; }
.flipbook.is-squareish { max-width: 860px; }

.fb-stage {
  aspect-ratio: 4 / 3; /* safe fallback; JS replaces this with the active source ratio */
  background: #fff;
}
.fb-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.fb-controls { margin-top: 0.7rem; }
.fb-dots { margin-top: 0.45rem; }
.fb-hint { margin-top: 0.45rem; margin-bottom: 0; }

/* Original-first presentation */
.original-artifact-label {
  max-width: 1040px;
  margin: 0 auto 0.65rem;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.artifact-context {
  max-width: 900px;
  margin: 1rem auto 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--color-secondary);
  background: var(--color-secondary-light);
  color: var(--color-ink);
}
.artifact-context p:last-child { margin-bottom: 0; }

.supporting-transcription {
  max-width: 900px;
  margin: 0.8rem auto 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.55);
}
.supporting-transcription > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1.05rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--color-primary-dark);
}
.supporting-transcription > summary::-webkit-details-marker { display: none; }
.supporting-transcription > summary::after {
  content: " +";
  color: var(--color-secondary);
  font-weight: 700;
}
.supporting-transcription[open] > summary::after { content: " −"; }
.supporting-transcription[open] > summary {
  border-bottom: 1px solid var(--color-border);
}
.supporting-transcription .doc-paper {
  max-width: none;
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 1.25rem 1.35rem;
}
.supporting-section {
  padding-top: 0.3rem !important;
  padding-bottom: 0.5rem !important;
}

/* Keep document pages visually compact after controls */
.doc-unit-label {
  margin-top: 0.7rem;
  margin-bottom: 0.65rem;
}
.orig-source-note {
  margin-bottom: 0.9rem;
}

/* Mobile */
@media (max-width: 767.98px) {
  .hero { padding: 2.2rem 0 1.6rem; }
  .section { padding: 1.35rem 0; }
  .case-card img,
  .case-card .img-placeholder,
  .case-card img.original-preview { height: 230px; }
  .evidence-card.card-link-wrap img { max-height: 360px; }
  .flipbook.is-portrait,
  .flipbook.is-landscape,
  .flipbook.is-squareish { max-width: 100%; }
}


.flipbook.is-single-page .fb-controls,
.flipbook.is-single-page .fb-dots,
.flipbook.is-single-page .fb-hint { display: none; }


/* =========================================================
   Responsive system reset — August 2026
   Stable geometry across viewport sizes; original artifacts first
   ========================================================= */

:root {
  --site-max: 1180px;
  --content-max: 820px;
  --section-gap: clamp(1.5rem, 2.2vw, 2.2rem);
}

/* Bootstrap's container jumps at several breakpoints. Use one stable cap instead. */
.container {
  width: min(calc(100% - 2.5rem), var(--site-max)) !important;
  max-width: var(--site-max) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 575.98px) {
  .container { width: min(calc(100% - 1.5rem), var(--site-max)) !important; }
}

/* Prevent type and imagery from visually ballooning on very wide screens. */
body { font-size: 17px; }
.hero { padding: clamp(2.1rem, 4vw, 3.2rem) 0 clamp(1.6rem, 3vw, 2.3rem); }
.hero h1 {
  font-size: clamp(2rem, 2.55vw, 2.75rem);
  line-height: 1.16;
  max-width: 850px;
}
.hero .lede { max-width: 780px; }
.section { padding: var(--section-gap) 0; }
.subsection-title { line-height: 1.18; }

/* Home hero: capped portrait image + stable two-column relationship. */
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.72fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.home-hero-copy { min-width: 0; }
.home-hero-photo {
  width: min(100%, 410px);
  justify-self: end;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.home-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
@media (max-width: 920px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .home-hero-photo {
    width: min(100%, 360px);
    justify-self: start;
  }
}

/* Home work: always 2-up on desktop, 1-up on narrow screens.
   Avoids the unstable four-across layout and gives originals room to read. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1060px;
}
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
}
.case-card {
  padding: 1.35rem;
  height: auto;
  min-height: 100%;
}
.case-card img,
.case-card .img-placeholder,
.case-card img.original-preview {
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* A controlled visual frame. Images preserve their own proportions;
   the wrapper, not the image, provides consistent card geometry. */
.artifact-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f5f3ed;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(0.45rem, 1vw, 0.7rem);
  margin: 0 0 1rem;
  display: grid;
  place-items: center;
}
.artifact-preview.single img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.artifact-preview.spread {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.35rem, 0.8vw, 0.65rem);
  aspect-ratio: 1.58 / 1;
}
.artifact-preview.spread img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center top;
  display: block;
  background: #fff;
  box-shadow: 0 1px 5px rgba(31,34,71,0.10);
}
.artifact-preview.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stack the main case-study narrative and original artifact.
   This removes the "short image next to long text" dead-space trap. */
.case-feature-stack {
  max-width: 1000px;
}
.case-feature-copy {
  max-width: var(--content-max);
  margin-bottom: 1.35rem;
}
.case-feature-copy .story-body { max-width: var(--content-max); }
.case-feature-artifact {
  width: 100%;
  max-width: 1000px;
}
.case-feature-artifact .artifact-preview {
  margin-bottom: 0;
  aspect-ratio: auto;
  min-height: 0;
}
.case-feature-artifact .artifact-preview.single {
  aspect-ratio: 1.6 / 1;
}
.case-feature-artifact .artifact-preview.spread {
  aspect-ratio: 1.58 / 1;
}
.case-feature-artifact .artifact-preview img { max-height: 620px; }
.case-feature-caption {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* Evidence cards: no image-height stretching, no full-bleed arithmetic.
   Every preview uses the same wrapper system. */
.evidence-card.card-link-wrap {
  height: 100%;
  overflow: hidden;
}
.evidence-card.card-link-wrap a.card-link {
  height: 100%;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.evidence-card.card-link-wrap h4 {
  min-height: 0;
  margin: 0 0 0.45rem;
}
.evidence-card.card-link-wrap p {
  min-height: 0;
  margin: 0 0 0.9rem;
}
.evidence-card.card-link-wrap .artifact-preview {
  width: 100%;
  margin: 0 0 0.9rem;
  flex: 0 0 auto;
}
.evidence-card.card-link-wrap .artifact-preview img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  margin: 0;
  border: 0;
  background: transparent;
}
.evidence-card.card-link-wrap .artifact-preview.video img { object-fit: cover; }
.evidence-card.card-link-wrap .card-cta {
  margin-top: auto;
  padding-top: 0.15rem;
}

/* Keep evidence grids readable. Three cards can be 3-up; four-card sets stay 2-up. */
.evidence-grid-2,
.evidence-grid-3 {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.evidence-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evidence-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .evidence-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .evidence-grid-2,
  .evidence-grid-3 { grid-template-columns: 1fr; }
}

/* Original document readers: responsive, but never billboard-sized. */
.flipbook {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.flipbook.is-portrait { max-width: 620px; }
.flipbook.is-landscape { max-width: 900px; }
.flipbook.is-squareish { max-width: 760px; }
.fb-stage {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  .flipbook.is-portrait,
  .flipbook.is-landscape,
  .flipbook.is-squareish { max-width: 100%; }
}

/* Tighten sections that used to expose large blank slabs. */
.document-page .hero { padding-bottom: 0.85rem; }
.document-page .section { padding-top: 1rem; padding-bottom: 1rem; }
.principles-list { max-width: 860px; }
.story-body { max-width: 820px; }
.story-workflow { max-width: 820px; }

/* Guardrails for anything that accidentally overflows at intermediate widths. */
img, video, iframe, svg { max-width: 100%; }
html, body { overflow-x: clip; }


/* =========================================================
   Artifact-first intro refinement — August 2026
   Restores immediate visual interest without reintroducing dead space.
   ========================================================= */

/* Homepage: 4 case-study categories across on full desktop, with deliberate fallbacks. */
.work-grid {
  max-width: var(--site-max);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.work-grid .case-card {
  min-width: 0;
  height: 100%;
  padding: 1.05rem;
}
.work-grid .case-card .artifact-preview {
  margin-bottom: 0.9rem;
}
.work-grid .case-card h3 {
  font-size: 1.02rem;
  line-height: 1.18;
}
.work-grid .case-card p {
  font-size: 0.82rem;
  line-height: 1.48;
}
.work-grid .case-card .featured-work {
  font-size: 0.77rem;
}
.work-grid .case-card .view-link {
  font-size: 0.82rem;
}

/* Keep the four portfolio categories horizontal at normal desktop zoom.
   Only collapse once the actual CSS viewport is tablet-sized. */
@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* Every case-study landing page puts a real artifact in the first viewport.
   The visual is paired only with the concise intro, while the longer narrative
   flows underneath at full width, so there is no empty side column. */
.case-study-hero {
  padding-bottom: clamp(1.5rem, 2.4vw, 2.1rem) !important;
}
.case-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: clamp(1.5rem, 3.5vw, 3.2rem);
  align-items: center;
}
.case-intro-copy {
  min-width: 0;
}
.case-intro-copy .lede {
  max-width: 700px;
}
.case-intro-artifact {
  width: 100%;
  max-width: 500px;
  justify-self: end;
  min-width: 0;
}
.case-intro-artifact .artifact-preview {
  margin: 0;
  width: 100%;
  background: #f5f3ed;
}
.case-intro-artifact .artifact-preview.single {
  aspect-ratio: 16 / 10;
}
.case-intro-artifact .artifact-preview.spread {
  aspect-ratio: 1.58 / 1;
}
.case-intro-artifact .artifact-preview img {
  max-height: 330px;
}
.case-intro-artifact .case-feature-caption {
  margin-top: 0.45rem;
}
.case-narrative {
  max-width: 900px;
}
.case-feature-copy-full {
  max-width: 900px;
  margin-bottom: 0;
}
.case-feature-copy-full .story-body {
  max-width: 900px;
}

@media (max-width: 900px) {
  .case-intro-grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    align-items: start;
  }
  .case-intro-artifact {
    max-width: 680px;
    justify-self: start;
  }
}
@media (max-width: 575.98px) {
  .case-intro-artifact .artifact-preview.spread {
    gap: 0.3rem;
    padding: 0.35rem;
  }
}

/* Make the Constitution item visually read as a video, not as a document page. */
.video-thumbnail {
  position: relative;
  padding: 0;
  background: #000;
}
.video-thumbnail img {
  object-fit: cover !important;
}
.video-play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(42px, 5vw, 58px);
  height: clamp(42px, 5vw, 58px);
  border-radius: 50%;
  background: rgba(255,255,255,0.93);
  color: var(--color-primary-dark);
  display: grid;
  place-items: center;
  padding-left: 3px;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1;
  box-shadow: 0 3px 12px rgba(0,0,0,0.22);
  pointer-events: none;
}

/* Selected-page note used on curated original-document excerpts. */
.artifact-selection-note {
  margin: -0.2rem 0 0.9rem;
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}