/* kierawestphal.com — theme
   The background color is set in content/site.md (background: #F2F5F7)
   and copied into --bg below when the site is built. */

/* ---------- Fira Sans (sans-serif text) ----------
   Self-hosted from theme/fonts/ (no Google servers). Free under the SIL Open Font License
   (theme/fonts/FiraSans-OFL.txt). Weights: 400, 500, 600 and 400 italic; Latin and
   Latin Extended subsets, so German characters are covered. */
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-ext-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-ext-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-latin-ext-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Concorde web fonts (headings) ----------
   Concorde is a licensed typeface. To turn it on:
   1. Put your licensed .woff2 files in theme/fonts/ with these names.
   2. Delete the two comment lines marked START and END below, then push.
START
@font-face { font-family: "Concorde"; src: url("/fonts/concorde-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Concorde"; src: url("/fonts/concorde-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Concorde"; src: url("/fonts/concorde-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
END */

:root {
  --bg: #F2F5F7;
  --ink: #1C2B36;   /* headings and the name (Concorde) */
  --text: #1C2B36;  /* all sans-serif text */
  --muted: #1C2B36; /* secondary sans-serif text (dates, labels, nav) */
  --rule: #d4dce2;
  --card: #ffffff;
  --accent: #961574;
  --h1: #1C2B36; /* color of H1 headings */
  --h1-size: 42px; /* H1 size on desktop; smaller screens below */
  --subhead: #961574; /* color of the line under the headline */
  --greeting: #961574; /* color of the greeting shown when hovering the portrait */
  /* Sans-serif text uses Case; Fira Sans shows until licensed Case web fonts are added. The --serif name is kept so the layout code stays the same. */
  --serif: "Case", "ABC Case", "Case Text", "Fira Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: "Case", "ABC Case", "Case Text", "Fira Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* H1–H4 headings use Concorde (sizes unchanged). Georgia/serif show until licensed Concorde files are added. */
  --display: "Concorde", "Concorde Nova", "Concorde BE", "Concorde Std", Georgia, "Times New Roman", serif;
  --max: 1120px;
  --gutter: 16px; /* padding around text on every side, at every screen size */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding: var(--gutter); /* 16px frame around every side of the page */
}
img { max-width: 100%; height: auto; display: block; }
video, object { max-width: 100%; }
iframe.embed-responsive { display: block; width: 100%; max-width: 100%; height: auto; border: 0; border-radius: 6px; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }

/* ---------- header & footer ---------- */
.site-header, .site-footer, main {
  max-width: var(--max);
  margin: 0 auto;
}
/* every block of text sits 16px inside the frame, lined up with the text in cards and rows */
.site-header, .site-footer, .intro, .page-head, .section-head, .prose, .pager, .big-mail {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.site-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-top: 28px; padding-bottom: 28px;
}
.wordmark { color: var(--ink); font: 500 26px/1.08 var(--display); text-decoration: none; letter-spacing: 0.01em; }
.site-header nav { display: flex; gap: 22px; font-size: 16px; }
.site-header nav a { text-decoration: none; color: var(--muted); }
.site-header nav a[aria-current] { color: var(--ink); }
.site-header nav a:hover { color: var(--accent); }  /* same hover as the name */
.site-header nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }

.site-footer {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 96px; padding-top: 28px; padding-bottom: 32px;
  border-top: 1px solid var(--ink); font-size: 14px; color: var(--muted);
}
.site-footer div { display: flex; flex-direction: column; gap: 2px; }
/* footer tagline links to the homepage; no underline, turns the accent color on hover (like the name did) */
.footer-tagline, .footer-email { color: var(--muted); text-decoration: none; }
.footer-tagline:hover, .footer-email:hover { color: var(--accent); }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-left: auto; }
/* Footer on one line: tagline and email on the left, Imprint on the right; 16px between items */
@media (min-width: 641px) {
  .site-footer { align-items: baseline; }
  .site-footer > div { flex-direction: row; gap: 16px; }
}


/* ---------- home intro ---------- */
.intro { padding: 56px var(--gutter) 72px; }
.intro h1, .intro .subhead { max-width: 980px; }
.portrait-wrap { position: relative; display: inline-block; margin-bottom: 20px; }
.portrait { display: block; width: 320px; max-width: 100%; height: auto;
  mix-blend-mode: multiply; /* the illustration's white paper blends into the page color */ }

/* portrait with photo reveal (theme/halftone-reveal.js): 20% bigger than before (384px instead of 320px) */
.portrait.halftone-reveal { position: relative; width: min(384px, calc(100vw - 64px)); max-width: none; aspect-ratio: 1024 / 762; height: auto; overflow: hidden; mix-blend-mode: normal; }
.halftone-reveal-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; }
.halftone-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.halftone-reveal.ht-on .halftone-reveal-canvas { opacity: 1; }
.halftone-reveal.ht-on .halftone-fallback { visibility: hidden; }
@media (min-width: 521px) and (hover: hover) { .has-photo .bubble { left: 343px; top: 91px; } }

/* ---------- greeting on portrait hover ----------
   Text beside the illustration, level with the face. It fades and scales in on hover. */
.bubble {
  position: absolute; left: 286px; top: 76px; transform-origin: left center;
  width: max-content; max-width: 6.2em;
  font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--greeting); text-wrap: balance;
  opacity: 0; transform: scale(.85);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.bubble-text { display: block; }
@media (hover: hover) {
  .portrait-wrap:hover .bubble { opacity: 1; transform: scale(1); }
}
/* Not enough room beside the illustration (narrower than 520px), and touch screens:
   the greeting sits centered above the head. Size and line breaks match the side greeting. */
@media (max-width: 520px), (hover: none) {
  .portrait-wrap { margin-top: 72px; -webkit-tap-highlight-color: transparent; }
  .bubble {
    left: 52%; top: auto; bottom: calc(100% + 6px);
    text-align: center; /* same two-line shape and size as the side greeting */
    transform-origin: center bottom; transform: translateX(-50%) scale(.85);
  }
  .portrait-wrap:hover .bubble,
  .portrait-wrap.show-greeting .bubble { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* touch screens have no hover, so only a tap shows it there */
@media (hover: none) {
  .portrait-wrap:hover .bubble { opacity: 0; transform: translateX(-50%) scale(.85); }
  .portrait-wrap.show-greeting .bubble { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* shake: swings up to 20 degrees each way while the pointer is over the photo, stops when it leaves */
.greeting { margin: 0 0 12px; font-size: 18px; color: var(--muted); }
.greeting strong { color: var(--ink); }
/* The name in the header uses the H2 style (Concorde, 26px like the section headings) */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; }
h1 { color: var(--h1); }
/* serif (Concorde) text stays dark; zero-specificity so link hover colors still apply */
:where(h2, h3, h4, .wordmark, .row-title, .next-title, .pager a, .case-body > blockquote, .prose blockquote) { color: var(--ink); }
.intro h1 { font-size: var(--h1-size); margin: 0 0 28px; }
.subhead { margin: -12px 0 28px; font-size: clamp(18px, 2vw, 22px); color: var(--subhead); }
h1 em { font-style: italic; color: var(--accent); }
.lede { font-size: 19px; max-width: 640px; }
.lede p { margin: 0 0 14px; }

/* ---------- section heads ---------- */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 24px;
}
.section-head h2 { font-size: 26px; margin: 0; }
.section-head a, .section-head .span { font-size: 14px; color: var(--muted); text-decoration: none; }
.section-head a:hover { color: var(--accent); }

/* ---------- recent work cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; overflow: visible; transition: transform .2s, box-shadow .2s; }
.card:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(15, 24, 26, .35); }
.card-media { aspect-ratio: 16 / 10; position: relative; z-index: 1; }
.card-media img, .card-media > svg { width: 100%; height: 100%; object-fit: cover; border-radius: 6px 6px 0 0; background: var(--rule); }
.card-text { padding: var(--gutter); display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 22px; margin: 0 0 6px; }
.card p { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.card-text > :last-child { margin-bottom: 0; }
.card .meta { margin: auto 0 0; display: flex; justify-content: flex-end; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- project list ---------- */
.archive { margin-top: 80px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--rule); }
.row summary {
  display: grid; grid-template-columns: 130px 80px 1fr auto 28px; gap: 16px; align-items: center;
  padding: var(--gutter); cursor: pointer; list-style: none;
}
.row summary::-webkit-details-marker { display: none; }
.row summary:hover, .row[open] summary { background: var(--card); }
.row-years { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px; }
.row-title { font: 500 var(--row-title-size, 18px)/1.25 var(--display); }
/* small cover image between the years and the title (16:10, same shape as the cards) */
.row-thumb { width: 80px; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: var(--rule); }
.row-thumb img, .row-thumb > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-tags { justify-self: end; }

/* category tags */
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li {
  font-size: 13px; line-height: 1; letter-spacing: .01em; color: var(--muted);
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 11px;
}
.row-tags .tags { justify-content: flex-end; }
.card .tags { margin: 0 0 16px; }
.card .tags li { background: var(--bg); }

/* plus / minus icon */
.row-toggle { position: relative; width: 16px; height: 16px; justify-self: end; align-self: center; }
.row-toggle::before, .row-toggle::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px;
  background: var(--muted); border-radius: 1px; transition: transform .25s ease, background .2s;
}
.row-toggle::after { transform: rotate(90deg); }
.row summary:hover .row-toggle::before, .row summary:hover .row-toggle::after { background: var(--accent); }
.row[open] .row-toggle::after { transform: rotate(0deg); }
.row[open] .row-toggle::before, .row[open] .row-toggle::after { background: var(--ink); }

/* drawer */
.drawer {
  display: grid; grid-template-columns: 280px 1fr; gap: 28px;
  padding: var(--gutter) var(--gutter) var(--gutter) calc(130px + 80px + 32px + var(--gutter)); background: var(--card);
}
.row[open] .drawer { animation: drawer-in .25s ease; }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.drawer-media { display: block; aspect-ratio: 16 / 10; position: relative; z-index: 1; }
.drawer-media img, .drawer-media > svg { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); }
/* "Show the whole drop-down image" (Pages CMS): the image fills the full width, pinned to the top; the box takes the image's own shape, so nothing is cut off; on hover it lifts like the other preview images */
.drawer-media.whole { aspect-ratio: auto; }
.drawer-media.whole > img { position: static; display: block; height: auto; }

/* photo hover: the photo lifts straight up, both corners evenly, with a soft shadow.
   The hover area stays put while the photo moves, so it doesn't flicker. */
.card-media img, .card-media > svg, .drawer-media img, .drawer-media > svg {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.card-media:hover img, .card-media:hover > svg, .drawer-media:hover img, .drawer-media:hover > svg {
  transform: translateY(-10px);
  box-shadow: 0 18px 30px -18px rgba(15, 24, 26, .45);
}
.drawer-tagline { margin: 0 0 16px; font-size: 17px; }
.drawer-tagline:has(+ .drawer-summary) { margin-bottom: 8px; font-weight: 500; color: var(--ink); }
.drawer-summary { margin: 0 0 16px; max-width: 62ch; }
.drawer .facts { margin: 0 0 16px; padding-top: 0; border-top: 0; }
.drawer-link { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--accent); }
.drawer-link:hover { text-decoration: underline; }

/* ---------- inner pages ---------- */
.page-head { padding: 48px var(--gutter) 40px; max-width: 820px; }
.page-head:has(.work-filter) { max-width: none; }
.page-head:has(.work-filter) .lede { max-width: 640px; }
.page-head h1 { font-size: var(--h1-size); margin: 0 0 18px; }
.eyebrow { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.eyebrow a { text-decoration: none; }
.facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { margin: 2px 0 0; }
.hero { margin: 0 0 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); }
.hero img, .hero > svg { width: 100%; }

.prose { max-width: 680px; }
.prose h2 { font-size: 30px; margin: 48px 0 12px; }
.prose h3 { font-size: 22px; margin: 32px 0 8px; }
.prose p, .prose li { font-size: 18px; }
.prose figure { margin: 36px 0; }
.prose figure img { border-radius: 4px; border: 1px solid var(--rule); }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.prose blockquote { margin: 40px 0; padding-left: 20px; border-left: 3px solid var(--accent); font: italic 500 24px/1.4 var(--display); color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.prose code { font-size: .9em; background: var(--card); padding: 1px 5px; border-radius: 3px; }

.big-mail { font: 500 18px/1.4 var(--serif); margin-top: 32px; word-break: break-word; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 80px; padding-top: 20px; border-top: 1px solid var(--ink); }
.pager a { text-decoration: none; font: 500 20px/1.3 var(--display); }
.pager a span { display: block; font: 13px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.pager .next { text-align: right; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  /* tablets: tags drop under the title so the title keeps its width */
  .row summary { grid-template-columns: 110px 80px 1fr 28px; row-gap: 6px; }
  .row-years { grid-column: 1; grid-row: 1 / span 2; }
  .row-thumb { grid-column: 2; grid-row: 1 / span 2; }
  .row-title { grid-column: 3; grid-row: 1; align-self: end; }
  .row-tags { grid-column: 3; grid-row: 2; justify-self: start; align-self: start; }
  .row-tags .tags { justify-content: flex-start; }
  .row-toggle { grid-column: 4; grid-row: 1 / span 2; }
  .drawer { grid-template-columns: 220px 1fr; padding-left: var(--gutter); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .intro { padding: 24px var(--gutter) 48px; }
  .cards { grid-template-columns: 1fr; }
  .row summary { grid-template-columns: 72px 1fr 20px; gap: 2px 12px; }
  .row-thumb { grid-column: 1; grid-row: 1 / span 3; width: 72px; align-self: start; margin-top: 2px; }
  .row-years { grid-column: 2; grid-row: 1; font-size: 13px; }
  .row-title { grid-column: 2; grid-row: 2; align-self: start; }
  .row-tags { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 6px; }
  .row-tags .tags { justify-content: flex-start; }
  .row-toggle { grid-column: 3; grid-row: 1 / span 3; }
  .drawer { grid-template-columns: 1fr; gap: 16px; padding: var(--gutter); }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- passion projects ---------- */
.passion { margin-top: 80px; }

/* ---------- arrow icon ---------- */
.icon-arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; transition: transform .2s ease; }
.icon-arrow.flip { transform: scaleX(-1); }
a:hover .icon-arrow { transform: translateX(3px); }
a:hover .icon-arrow.flip { transform: scaleX(-1) translateX(3px); }

/* ---------- case-study pages ---------- */
.case { padding-top: 24px; }
.back { display: inline-flex; gap: 6px; align-items: center; margin: 0 var(--gutter); font-size: 15px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--accent); }
/* Previous / Next under "Work" at the top of project pages: Previous on the left, Next on the right */
.top-pager { display: flex; justify-content: space-between; margin: 0 var(--gutter); padding-bottom: 14px; border-bottom: 1px solid var(--ink); } /* the rule above the project title */
.top-pager .back { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; } /* same style as the PREVIOUS / NEXT labels at the bottom */
.case-head { max-width: 820px; padding: 32px var(--gutter) 40px; }
.case-head h1 { font-size: var(--h1-size); margin: 0 0 20px; }
.case-logo { max-height: 40px; width: auto; margin: 0 0 20px; }
.case-meta { margin: 0 0 16px; font-size: 15px; color: var(--muted); letter-spacing: .01em; }
.case-lede { margin: 0 0 20px; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; }

/* text stays at a comfortable reading width; images run wider */
.case-body > * { max-width: 680px; margin-left: var(--gutter); margin-right: var(--gutter); }
.case-body > h2 { font-size: 30px; margin-top: 56px; margin-bottom: 12px; }
.case-body > h3 { font-size: 22px; margin-top: 32px; margin-bottom: 8px; }
.case-body > p, .case-body > ul, .case-body > ol { font-size: 18px; }
/* the intro text under At a glance: same size as the subheading under the title, in a lighter weight */
.case-body > .case-intro { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; font-weight: 300; max-width: none; } /* full page width, like At a glance */
.case-body > blockquote { margin-top: 40px; margin-bottom: 40px; padding-left: 20px; border-left: 3px solid var(--accent); font: italic 500 24px/1.4 var(--display); }
.case-body > blockquote p { margin: 0; }
.case-body > blockquote { max-width: none; } /* quotes run the full page width */
/* Every quote looks like the Goldman Sachs one: whatever is pasted inside (a heading, bold, a second italic) takes the quote's own type */
.case-body blockquote, .split-text blockquote { margin-top: 40px; margin-bottom: 40px; padding-left: 20px; border-left: 3px solid var(--accent); font: italic 500 24px/1.4 var(--display); color: var(--ink); }
:is(.case-body, .split-text, .prose) blockquote :is(p, h1, h2, h3, h4, h5, h6) { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0; }
:is(.case-body, .split-text, .prose) blockquote :is(p, h1, h2, h3, h4, h5, h6) + :is(p, h1, h2, h3, h4, h5, h6) { margin-top: .6em; }
:is(.case-body, .split-text, .prose) blockquote :is(em, i, strong, b) { font: inherit; }
.case-body > .media, .case-hero { max-width: none; margin: 40px 0; }

/* image blocks: one image full width, or two/three side by side */
.media { display: grid; gap: 16px; }
.media-2 { grid-template-columns: 1fr 1fr; }
.media-3 { grid-template-columns: repeat(3, 1fr); }
.media figure { margin: 0; }
.media img, .media figure > svg, .media video { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); cursor: zoom-in; }
.media figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; padding: 0 var(--gutter); }
.case-hero { margin-top: 0; }

/* next project and previous link */
.next-project { margin: 80px 0 0; border-top: 1px solid var(--ink); }
.next-project:not(.project-pager) > a:first-child {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 24px; align-items: end;
  padding: 20px var(--gutter) 24px; text-decoration: none;
}
.next-label { grid-column: 1; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.next-title { grid-column: 1; font: 500 clamp(28px, 4vw, 44px)/1.1 var(--display); letter-spacing: -0.02em; margin-top: 6px; }
.next-thumb { grid-column: 2; grid-row: 1 / span 2; width: 160px; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); }
.next-thumb img, .next-thumb > svg { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.next-project:not(.project-pager) > a:first-child:hover .next-title { color: var(--accent); }
.next-project:not(.project-pager) > a:first-child:hover .next-thumb img, .next-project:not(.project-pager) > a:first-child:hover .next-thumb > svg { transform: scale(1.04); }
/* project pages: under the rule, "Previous project" and its title stacked on the left; "Next project" and its title stacked on the right */
.project-pager { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px var(--gutter) 24px; }
.project-pager > a { text-decoration: none; }
.project-pager .pager-next, .project-pager .pager-prev { display: flex; flex-direction: column; gap: 12px; max-width: 48%; }
.project-pager .pager-next { align-items: flex-end; text-align: right; margin-left: auto; }
.project-pager .pager-prev { align-items: flex-start; text-align: left; }
.project-pager .pager-prev .next-thumb { justify-content: flex-start; }
@media (max-width: 640px) { .project-pager { flex-direction: column; gap: 32px; } .project-pager .pager-next, .project-pager .pager-prev { max-width: 100%; } }
.project-pager .next-label { display: inline-flex; gap: 6px; align-items: center; position: relative; }
/* the arrows hang outside, so the words "Previous project" / "Next project" line up exactly with the project title beneath */
.project-pager .next-label .icon-arrow { position: absolute; top: 50%; margin-top: -.5em; }
.project-pager .pager-prev .next-label .icon-arrow { right: calc(100% + 6px); }
.project-pager .pager-next .next-label .icon-arrow { left: calc(100% + 6px); }
.project-pager .next-title { margin-top: 0; font-size: 30px; letter-spacing: normal; line-height: 1.08; } /* same size as the section headings */
.project-pager .next-thumb { width: auto; height: 56px; aspect-ratio: auto; border: 0; border-radius: 0; overflow: visible; display: flex; justify-content: flex-end; }
.project-pager .next-thumb img, .project-pager .next-thumb > svg { width: auto; height: 100%; max-width: 220px; object-fit: contain; }
.project-pager .pager-next:hover .next-title, .project-pager .pager-prev:hover .next-title, .project-pager .pager-prev:hover .next-label, .project-pager .pager-next:hover .next-label { color: var(--accent); }
.project-pager .pager-next:hover .next-thumb img, .project-pager .pager-next:hover .next-thumb > svg { transform: none; }
.prev-link { display: inline-flex; gap: 6px; align-items: center; margin: 0 var(--gutter); font-size: 15px; color: var(--muted); text-decoration: none; }
.prev-link:hover { color: var(--accent); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; padding: 24px 8px; background: rgba(15, 24, 26, .92); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; text-align: center; }
.lb-stage { display: flex; justify-content: center; }
.lightbox img, .lb-stage > svg, .lb-stage > video { max-width: 100%; max-height: 82vh; width: auto; height: auto; margin: 0 auto; border-radius: 4px; }
.lb-stage > video { display: block; background: #fff; }
.lb-stage > svg { width: min(100%, 1200px); height: auto; }
.lb-stage > object.svg-live { display: block; height: auto; max-width: 100%; margin: 0 auto; border: 0; background: none; }
/* clickable prototypes: an "Open larger" button in the top-right corner (clicks on the prototype itself stay with the prototype) */
figure.has-proto { position: relative; }
.proto-enlarge { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--card); color: var(--ink); cursor: zoom-in; box-shadow: 0 1px 4px rgba(28, 43, 54, .15); transition: transform .15s, color .15s, border-color .15s; }
.proto-enlarge:hover, .proto-enlarge:focus-visible { color: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.lightbox figcaption { color: #F2F5F7; font-size: 14px; margin-top: 10px; }
.lightbox button { background: none; border: 0; color: #F2F5F7; font-size: 28px; cursor: pointer; padding: 12px; border-radius: 6px; }
.lightbox button:hover { background: rgba(255, 255, 255, .1); }
.lb-close { position: absolute; top: 12px; right: 12px; font-size: 36px !important; line-height: 1; }

@media (max-width: 640px) {
  .media-2, .media-3 { grid-template-columns: 1fr; }
  .next-thumb { width: 96px; }
  .lightbox { grid-template-columns: 40px 1fr 40px; }
}

/* inline SVG placeholders fill their box the way a cropped image would */
.card-media > svg, .row-thumb > svg, .drawer-media > svg, .next-thumb > svg, .media figure > svg, .hero > svg { display: block; }
.media figure > svg { aspect-ratio: auto; }

/* ---------- H1 size by screen width ---------- */
@media (max-width: 900px) { :root { --h1-size: 38px; } }  /* tablets */
@media (max-width: 640px) { :root { --h1-size: 34px; } }  /* large phones */
@media (max-width: 400px) { :root { --h1-size: 30px; } }  /* small phones */
/* More projects row titles: 18px on desktop, scaling down with the headline */
@media (max-width: 900px) { :root { --row-title-size: 17px; } }
@media (max-width: 640px) { :root { --row-title-size: 16px; } }
@media (max-width: 400px) { :root { --row-title-size: 15px; } }

/* line break in the homepage headline that only applies on desktop (wider than 900px) */
.desktop-break { display: none; }
@media (min-width: 901px) { .desktop-break { display: inline; } }

/* ---------- introduction in three columns, lined up with the Recent work cards ----------
   Each paragraph is one column. Same column widths and 24px gaps as the card grid; text sits
   16px inside each column, like the text inside the cards. 2 columns on tablets, 1 on phones. */
.intro .lede {
  max-width: none;
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px;
}
.intro .lede p { padding: 0 var(--gutter); margin: 0 0 14px; }
@media (max-width: 900px) { .intro .lede { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .intro .lede { grid-template-columns: 1fr; } }

/* ---------- About and Contact: three columns lined up with the homepage grid ---------- */
.cols3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; align-items: start;
}
.cols3 .col { padding: 0 var(--gutter); min-width: 0; }
.cols3 .col > :first-child { margin-top: 0; }
.cols3 h2 { font-size: 26px; margin: 0 0 12px; }
.cols3 p, .cols3 li { font-size: 18px; }
.cols3 ul { padding-left: 1.1em; margin: 0 0 14px; }
.cols3 .big-mail { margin-top: 0; padding: 0; }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cols3 { grid-template-columns: 1fr; } .cols3 .col + .col { margin-top: 24px; } }

/* About and Contact: same space between the H1 and the first text as the homepage
   headline and "Working from Berlin, Germany." (16px) */
.about .page-head, .contact .page-head { padding-bottom: 0; }
.about .page-head h1, .contact .page-head h1 { margin-bottom: 16px; }

/* ---------- cubes: a grid of cubes behind the content of every page turns toward the pointer (theme/cubes.js) ---------- */
.cubes-container { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cubes-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

/* ---------- logo covers (an SVG marked data-fit="contain"): just the logo, no image box ---------- */
svg[data-fit="contain"] { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.row-thumb:has(> svg[data-fit="contain"]),
.next-thumb:has(> svg[data-fit="contain"]),
.card-media:has(> svg[data-fit="contain"]) { background: none; border: 0; border-radius: 0; }
.media figure > svg[data-fit="contain"] { cursor: default; }
/* on the project page the logo sits at a modest size, lined up with the text */
/* logo covers on a project page: up to 360px wide or 180px tall, whichever comes first */
.case-hero:has(svg[data-fit="contain"]) figure > svg { width: min(360px, 70%, calc(180px * var(--ar, 2))); height: auto; aspect-ratio: var(--ar, 2); margin-left: var(--gutter); }

/* ---------- journal (list laid out like a news index: filter, grid of image · date · title, load more) ---------- */
.journal .page-head { padding-bottom: 0; }
.journal .page-head h1 { font-size: var(--h1-size); margin: 0 0 16px; }
.journal-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px var(--gutter) 40px; padding-top: 14px; border-top: 1px solid var(--ink); }
.filter-label { font-size: 14px; color: var(--muted); margin-right: 6px; }
.chip {
  font: inherit; font-size: 13px; letter-spacing: .01em; line-height: 1; color: var(--text);
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 12px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
/* ---------- work page filter chips: one horizontal row under the title (scrolls sideways on small screens) ---------- */
.work-filter { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.work-filter::-webkit-scrollbar { display: none; }
.work-filter .chip, .work-filter .filter-label { flex: none; white-space: nowrap; }
[data-cats][hidden], section[hidden] { display: none !important; }
.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; }
.entry[hidden] { display: none; }
.entry a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.entry-media { display: block; aspect-ratio: 4 / 3; position: relative; z-index: 1; }
.entry-media img, .entry-media > svg {
  width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); background: var(--rule);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.entry a:hover .entry-media img, .entry a:hover .entry-media > svg { transform: translateY(-10px); box-shadow: 0 18px 30px -18px rgba(15, 24, 26, .45); }
.entry-meta { display: flex; gap: 12px; align-items: baseline; margin: 16px var(--gutter) 6px; font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.entry-cat { text-transform: uppercase; }
.entry-title { margin: 0 var(--gutter); font: 500 22px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); transition: color .2s; }
.entry a:hover .entry-title { color: var(--accent); }
.entries-empty { margin: 0 var(--gutter); color: var(--muted); }
.load-more-wrap { display: flex; justify-content: center; margin-top: 56px; }
.load-more-wrap[hidden] { display: none; }
.load-more {
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 999px; padding: 12px 28px; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.load-more:hover { color: var(--card); background: var(--accent); border-color: var(--accent); }
.journal-entry .case-head .case-meta { margin-bottom: 14px; }
@media (max-width: 900px) { .entries { grid-template-columns: 1fr 1fr; } .entry-title { font-size: 20px; } }
@media (max-width: 640px) { .entries { grid-template-columns: 1fr; gap: 40px; } .journal-filter { margin-top: 24px; margin-bottom: 28px; } }

/* image frames keep their shape whatever the photo's proportions: the photo fills the frame and is cropped */
.card-media > img, .card-media > svg, .drawer-media > img, .drawer-media > svg, .entry-media > img, .entry-media > svg { position: absolute; inset: 0; }

/* project page header, like smeidu.com/clara: bold subtitle, then role (years) · client, then a link to the live product */
.case-head .case-lede { font-weight: 400; color: var(--text); margin: 0 0 12px; }
.case-head .case-meta { margin: 0 0 8px; }
.case-link { margin: 0 0 20px; font-size: 15px; }
.case-link a { color: var(--accent); text-decoration: none; font-weight: 500; }
.case-link a:hover { text-decoration: underline; }
.case-body > .credits { padding-left: 1.2em; }
.case-body > .credits li { margin: 4px 0; }

/* Contact: Download CV link under the email */
.cv-link { margin: 14px 0 0; font-size: 16px; }
/* Download CV looks and behaves like the "Email me" link above it: same text colour, same hover, arrow pointing right */
.cv-link a { font-weight: 500; }

/* More projects: floating preview of a row's drop-down image while hovering (desktop only) */
.row-preview {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: 320px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden;
  background: var(--card); border: 1px solid var(--rule); box-shadow: 0 18px 40px -18px rgba(15, 24, 26, .45);
  opacity: 0; scale: .96; transition: opacity .2s ease, scale .25s cubic-bezier(.22, 1, .36, 1);
}
.row-preview.on { opacity: 1; scale: 1; }
.row-preview.still { transition: opacity .15s linear; scale: 1; }
.row-preview > img, .row-preview > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.row-preview.is-logo { padding: 28px; }
@media (hover: none), (pointer: coarse) { .row-preview { display: none; } }

/* Prototype embed on project pages: half the page width on desktop, full width on tablets and phones */
.case-body > .embed { max-width: none; margin: 40px var(--gutter); }
.embed-half { width: calc(50% - var(--gutter)); }
.embed-frame { aspect-ratio: 16 / 9; border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; overflow: hidden; background: var(--card); }
.embed-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.embed figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
/* a self-contained .html prototype placed in a section like an image */
.html-proto { position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
.html-proto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .embed-half { width: auto; } }

/* At a glance: the project's high-level overview, right under the hero */
.glance { margin: 8px var(--gutter) 48px; padding: 24px 0 23px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } /* text sits the same distance from both rules */
.glance-title { font-size: 30px; margin: 0 0 16px; } /* same size as the section headings (Context, Goal…) */
/* 8-column grid, 16px gutters: Company (year beneath), Role, Team, then Responsibilities, Goal and Outcome in three equal widths across the last five.
   Each item sits in its own column (--col). Smaller screens: 4 columns, then 2, then 1. */
/* 24 tracks with 16px gaps = an 8-column grid (3 tracks per column) that can also split columns 4–8 into three equal parts */
.glance dl { margin: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 24px 16px; }
.glance-item { grid-column: var(--col, auto); grid-row: 1; }
@media (max-width: 1100px) { .glance dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } .glance-item { grid-column: auto; grid-row: auto; } }
.glance dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.glance dd { margin: 0; font-size: 16px; line-height: 1.5; max-width: 760px; }
.glance dd p { margin: 0 0 6px; }
.glance-company dd p { margin: 0; } /* year sits directly under the company name */
.glance dd > :last-child { margin-bottom: 0; }
.glance dd ul { margin: 0; padding-left: 1.2em; }
@media (max-width: 900px) { .glance dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .glance dl { grid-template-columns: 1fr; } }

/* Section images: half the width with a description beside it */
.case-body > .media-split { max-width: none; margin: 40px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.media-split figure { margin: 0; }
.media-split img, .media-split figure > svg, .media-split video { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); cursor: zoom-in; display: block; }
.media-split figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.media-split.reverse figure { order: 2; }
.split-text { font-size: 18px; }
.split-text > :first-child { margin-top: 0; }
/* Section that opens with an image on the left: heading + text at the top right, the image description level with the image's bottom */
/* an image with only a description beside it: the description sits level with the image's bottom, like the sections */
.case-body > .media-split:not(.section-split) { align-items: end; }
.media-split:not(.section-split) .split-text > :last-child { margin-bottom: 0; }
.case-body > .section-split { margin-top: 56px; align-items: stretch; }
.section-split .split-text { display: flex; flex-direction: column; }
.section-split .split-main > h2 { font-size: 30px; margin: 0 0 12px; }
.section-split .split-main > :last-child, .section-split .split-desc > :last-child { margin-bottom: 0; }
.section-split .split-desc { margin-top: auto; padding-top: 16px; }
/* two images and the section text, in three equal columns ("third-text" layout) */
.case-body > .section-split.pair-text { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
.pair-text figure { align-self: end; }
@media (max-width: 900px) { .case-body > .media-split { grid-template-columns: 1fr; gap: 16px; } .media-split.reverse figure { order: 0; } }
@media (min-width: 601px) and (max-width: 900px) { .case-body > .section-split.pair-text { grid-template-columns: 1fr 1fr; } .pair-text .split-text { grid-column: 1 / -1; order: -1; } }
/* phones: the "third-text" text and its two images stack in one column, text first like on tablets */
@media (max-width: 600px) { .case-body > .section-split.pair-text { grid-template-columns: 1fr; } .pair-text .split-text { order: -1; } }

/* Interactive SVG graphics run in place (replay buttons, hovers, animations) */
object.svg-live { display: block; width: 100%; height: auto; border: 0; background: var(--card); border-radius: 6px; }
.media figure > object.svg-live, .media-split figure > object.svg-live { border: 1px solid var(--rule); }
.media figure > object.svg-bare, .media-split figure > object.svg-bare, object.svg-bare { border: 0; background: transparent; border-radius: 0; }
.row-thumb > object.svg-live, .drawer-media > object.svg-live, .card-media > object.svg-live { position: absolute; inset: 0; height: 100%; pointer-events: none; }

/* Small headings (####, #####, ######) pasted into case-study text read as normal body text, so every page looks the same */
.case-body > h4, .case-body > h5, .case-body > h6,
.split-text h4, .split-text h5, .split-text h6 {
  font: inherit; font-family: var(--sans); font-size: 18px; font-weight: 400; line-height: 1.6;
  letter-spacing: normal; color: var(--text); margin-top: 0; margin-bottom: 1em;
}

/* Video with sound: plays muted on a loop; the Sound button (bottom right) turns the sound on and off */
.video-wrap { position: relative; }
.video-wrap video { display: block; }
.sound-toggle {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(28, 43, 54, .82); border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer;
}
.sound-toggle:hover, .sound-toggle:focus-visible { background: var(--accent); }
.sound-toggle .waves { display: none; }
.sound-toggle[aria-pressed="true"] .waves { display: inline; }
.sound-toggle[aria-pressed="true"] .mute { display: none; }

/* An image given a smaller width in Pages CMS sits centred in its column at that width (e.g. a phone prototype at the same scale as the phones in other screenshots) */
figure.fig-scaled > img, figure.fig-scaled > video, figure.fig-scaled > .video-wrap, figure.fig-scaled > object { width: var(--w) !important; margin-left: auto; margin-right: auto; display: block; }
figure.fig-scaled > figcaption { text-align: center; }