:root {
  --bg: #ffffff;
  --fg: #111111;
  --accent: #128e96;
  --muted: #128e96;
  --sub: rgba(0,0,0,0.55);
  --hairline: rgba(0,0,0,0.12);
  --pad-x: clamp(20px, 4vw, 56px);
  --max-w: 1200px;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Source Serif 4', serif;
  /* Per-font display tracking, computed at render time so heavy or condensed
     faces breathe instead of crushing. Mood nudges it via --tone-ls. */
  --display-ls: -0.025em;
  --tone-ls: 0em;
  /* Heading weights resolved per face to weights it really ships, so no
     heading is ever a synthetic bold. One display weight per screen plus the
     400 body: --display-weight by default, --display-weight-strong in the bold
     and electric moods. */
  --display-weight: 600;
  --display-weight-strong: 700;
  /* The same rule for slant. A face with no italic axis (Bebas Neue, Space
     Grotesk, Impact) gets sheared by the browser when asked to lean, so
     nothing names font-style directly: --display-italic is "italic" only on a
     face that really ships one. The Soft mood then leans; on a face that
     cannot, it softens with the lightest weight the face has and more air
     (--soft-weight, --soft-ls, both resolved in render.ts softToneByName). */
  --display-italic: italic;
  --soft-weight: 400;
  --soft-ls: 0.01em;
  /* Per face width factor for the Grid masthead (render.ts MASTHEAD_K). */
  --masthead-k: 1.17;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Last guard against a fake slant: if any rule ever asks a face with no
     italic to lean, it stays upright instead of being sheared. Synthetic bold
     is untouched, so emphasis in body copy still works. */
  font-synthesis-style: none;
  /* Full-bleed sections (.bleed) use 100vw, which can exceed the visible
     viewport by a few px; clip the overflow so phones never side-scroll.
     clip (not hidden) keeps position: sticky working. */
  overflow-x: clip;
}

/* ── Line breaking, in the built site ──
   A heading balances its lines and body text never ends on a lone word, on
   every page of every generated site, not only the few rules that carried it
   before (UX audit finding 10). The renderer also ties a short last pair of
   words together (no-orphan.ts), for browsers that have no text-wrap yet.
   A word breaks inside only when it is wider than its column on its own:
   then it wraps instead of running out of the column. */
h1, h2, h3, h4, blockquote, figcaption {
  text-wrap: balance;
  overflow-wrap: break-word;
}
p, li, dd, .deck, .description, .work-card-desc, .index-tag {
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
img { display: block; max-width: 100%; height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Long names + several links can exceed a 360px viewport: wrap instead of
     overflowing. gap only shows once a wrap actually happens. */
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 24px var(--pad-x);
  border-bottom: 1px solid var(--hairline);
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
}
/* A logo that is a picture (the source's own, in the original look). The name
   beside it stays out of sight while the picture is there. */
.nav-logo--image .nav-logo-name { display: none; }
.nav-logo--image:not(:has(img)) .nav-logo-name { display: inline; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.nav-links a {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--sub);
}
.nav-links a:hover { color: var(--fg); }

.hero {
  padding: clamp(80px, 14vw, 200px) var(--pad-x) clamp(60px, 8vw, 120px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 10vw, 148px);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  line-height: 0.96;
  color: var(--fg);
  text-wrap: balance;
  /* The clamp floor is 52px; a long single-word name could overflow a 360px
     screen, so allow a mid-word break as the last resort. */
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(21px, 2.6vw, 31px);
  /* Display-scale leading, not the 1.6 body default, so a multi-line tagline
     reads as one confident phrase instead of disconnected lines. */
  line-height: 1.24;
  margin-top: 28px;
  color: var(--fg);
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 30ch;
  text-wrap: balance;
}
.hero-byline {
  margin-top: 32px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--sub);
}

/* A section's name is a real heading in the display face, sentence case,
   sized between a card title and the hero tagline. */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  line-height: 1.1;
  color: var(--fg);
  text-wrap: balance;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.work {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) var(--pad-x);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 40px);
}
@media (max-width: 768px) {
  .work-grid { grid-template-columns: 1fr; gap: 40px; }
}

.work-card {
  display: block;
  position: relative;
}
.work-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--hairline);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
  /* Gentle zoom on the image within a fixed frame reads more refined than
     lifting the whole tile, and never reveals a gap under the card. */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover .work-card-thumb { transform: scale(1.025); }
.work-card-meta { margin-top: 16px; }
/* The year follows the title, quiet: never a label above it. */
.work-card-year {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--sub);
}
.work-card-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  color: var(--fg);
  transition: color 0.25s ease;
}
.work-card:hover .work-card-title { color: var(--accent); }
.work-card-desc {
  margin-top: 6px;
  color: var(--sub);
  font-size: 14px;
  line-height: 1.5;
}

.about {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) var(--pad-x);
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
}
.about-prose {
  max-width: 640px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--fg);
}
.about-prose p { margin-bottom: 22px; }

.signature {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  /* Leans only on a display face that ships an italic; upright otherwise,
     never a sheared fake. */
  font-style: var(--display-italic);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.what-i-do {
  align-self: start;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
}
.what-i-do-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sub);
  margin-bottom: 8px;
}
.what-i-do ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.what-i-do li {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg);
}
.what-i-do li:last-child { border-bottom: none; }

/* Social presence inside About: a row of real, named links that explains
   itself, so it carries no label. */
.about-elsewhere {
  align-self: start;
  padding: 24px 0 0;
  border-top: 1px solid var(--hairline);
}
.about-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.about-social a {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--fg);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.about-social a:hover { color: var(--accent); border-color: var(--accent); }

.contact {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(80px, 12vw, 160px);
  text-align: center;
}
.contact-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
/* The page's one resting accent: the rule under the ways to reach her. */
.contact-links a {
  color: var(--fg);
  font-size: 16px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.contact-links a:hover { color: var(--accent); }

/* Edit-only affordances: hidden by default (so published sites never show
   them), revealed only while the studio editor is armed (body.rc-edit-active,
   set by the inline-editor script, which never runs on a published site). */
.rc-edit-only { display: none; }
body.rc-edit-active .rc-edit-only { display: inline-flex; }
/* "Remove this section", on the sections we add under the work. Quiet, in
   the section's own type and colour, at the end of the section's first line
   (top right in English, top left in Hebrew). */
.rc-remove-section {
  float: inline-end;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.rc-remove-section:hover { border-color: var(--fg); }
/* The plus at the foot of the home page: add a section of ours under her
   own content. Edit mode only, quiet, in the page's own type and colour. */
.rc-add-section {
  justify-content: center;
  width: 100%;
  padding: 8px var(--pad-x) clamp(40px, 6vw, 72px);
  box-sizing: border-box;
}
.rc-add-section button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px dashed var(--sub);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.rc-add-section button:hover { border-style: solid; border-color: var(--fg); }
.contact--empty { display: none; }
body.rc-edit-active .contact--empty { display: block; }
/* An About with nothing in it: studio only, as a block (not the inline-flex
   of other edit-only affordances). */
body.rc-edit-active .about--empty { display: block; }

/* Strawman guess block: an unconfirmed first draft of a missing case-study
   element. Shown ONLY in the studio editor (rc-edit-only), clearly marked as
   not-yet-real so it can never be mistaken for confirmed content, and never
   reaches a published site. Clicking it opens in-place confirm/correct; once
   confirmed it re-renders as a normal section. The block override beats the
   generic .rc-edit-only inline-flex rule (higher specificity). */
body.rc-edit-active .case-section.case-section--guess { display: block; }
.case-section--guess {
  position: relative;
  margin-top: 28px;
  padding: 18px 20px 6px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.case-section--guess .guess-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.case-section--guess > h2,
.case-section--guess > p,
.case-section--guess > ul {
  opacity: 0.85;
}
.case-section--guess:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* "Add your email" affordance, shown only in the studio preview when the
   source exposed no email. It is itself the inline-edit target (data-rc-edit=
   "contactEmail"): a click opens the in-place editor seeded empty, so the
   designer types the address right here. A quiet dashed prompt that matches the
   inline-edit language; never shown on the published site.
   The words are in the text colour, so they read at the body contrast on every
   palette (the accent at 13px fell to 3.7:1, QA 24.9); the accent stays in the
   dashed ring and the underline. */
.contact-add {
  align-items: center;
  margin: 24px auto 0;
  padding: 8px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: text;
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-add:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.contact-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* The prompt, once clicked, becomes a plain paragraph to type into (the
   editor swaps it in): a block that wraps long text instead of a pill. */
.contact-add--editing {
  display: block;
  width: min(100%, 36rem);
  min-height: 2.6em;
  padding: 8px 14px;
  border-radius: 10px;
  text-align: start;
  text-decoration: none;
  letter-spacing: normal;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.about-prose .contact-add--editing { margin-inline: 0; }
/* The note for the owner when her old site's contact page gave nothing to
   bring over (expert report 14.10.2026, finding 9). Studio only, a block
   above the prompt, in the text colour at the body contrast. */
body.rc-edit-active .contact-note { display: block; }
.contact-note {
  max-width: 36rem;
  margin: 12px auto 0;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

/* The prompt on a project page that came over with few or no words (expert
   report of 14.10.2026, finding 2). Studio only, like the prompts above; the
   studio also shows it while editing is off. A quiet dashed card in the
   page's own type and colours, centred where her lines will stand. */
.rc-invite {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: min(100% - 2 * var(--pad-x, 20px), 36rem);
  margin: 28px auto;
  padding: 18px 20px 20px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 12px;
  color: var(--fg);
  text-align: center;
}
body.rc-edit-active .rc-invite { display: flex; }
.rc-invite-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sub);
  text-wrap: pretty;
}
.rc-invite .contact-add { display: inline-flex; margin-top: 10px; }
.rc-invite .contact-add--editing { display: block; margin: 10px auto 0; }

.site-footer {
  padding: 32px var(--pad-x);
  border-top: 1px solid var(--hairline);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--sub);
}

.project-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad-x);
}
.project-header { margin-bottom: 48px; }
.project-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 96px);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  line-height: 1.0;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--fg);
}

.hero-media {
  max-width: var(--max-w);
  margin: 32px auto 0;
  padding: 0 var(--pad-x);
}
.hero-media img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.tagline {
  font-family: var(--font-body);
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.26;
  letter-spacing: -0.015em;
  margin-top: 20px;
  max-width: 34ch;
  color: var(--fg);
  text-wrap: balance;
}
.description {
  margin-top: 20px;
  font-size: 17px;
  color: var(--sub);
  max-width: 60ch;
  line-height: 1.65;
}

/* One quiet line of facts under the tagline: words with space between them. */
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--sub);
}

/* The page closes on the next project and one link home. */
.case-close {
  max-width: 760px;
  margin: clamp(48px, 8vw, 96px) auto 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--hairline);
}
.case-next {
  font-size: 15px;
  color: var(--sub);
}
.case-next a {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  line-height: 1.1;
  color: var(--fg);
  transition: color 0.25s ease;
}
.case-next a:hover { color: var(--accent); }
.case-close-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 28px;
  font-size: 15px;
}
.case-close-links a {
  color: var(--fg);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.case-close-links a:hover { color: var(--accent); border-color: var(--accent); }

.case-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0;
}
.case-section h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  margin-bottom: 20px;
}
.case-section p, .case-section li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
  margin-bottom: 12px;
  max-width: 66ch;
}
.case-section ul { padding-inline-start: 20px; margin-bottom: 18px; }

.project-media {
  max-width: var(--max-w);
  margin: 48px auto;
  padding: 0 var(--pad-x);
  display: grid;
  gap: 24px;
}
.project-media img {
  width: 100%;
  border-radius: 6px;
}

/* A page of photographs (lib/generator/photo-rows.ts): rows of pictures at
   their own shape, across the page and in the source's order. Each picture
   grows in proportion to its shape, so a row's pictures share one height and
   fill the column; the last row keeps its height. A picture with no known
   shape takes a 4:3 place and stands at its own height. */
.project-photos {
  max-width: var(--max-w);
  margin: 48px auto;
  padding: 0 var(--pad-x);
}
.photo-rows { --row-h: 300px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.photo-rows::after { content: ""; flex: 100000000 1 0px; }
/* A picture grows at most to one and a half times the row's height: a
   portrait left alone on its row (the panorama after it did not fit) stays a
   picture among the others, in the middle of the column, not a wall. */
.photo-rows .photo { --ar: 1.3333; margin: 0; min-width: 0; flex: calc(var(--ar) * 1000) 1 calc(var(--ar) * var(--row-h)); max-width: calc(var(--ar) * var(--row-h) * 1.5); }
.photo-rows .photo img { display: block; width: 100%; height: auto; max-width: none; border-radius: 2px; }
.photo-rows .photo[style] img { aspect-ratio: var(--ar); object-fit: cover; }
@media (max-width: 600px) {
  .project-photos { margin: 32px auto; }
  .photo-rows { --row-h: 150px; gap: 6px; }
}
.project-split .project-photos { margin-inline: 0; padding: 0; max-width: none; }

/* Proof case study (case-study-playbook.md): the image sits under the claim
   it proves, and its caption says what it proves. Quiet, one size down. */
.project-proof .case-section { max-width: 720px; }
.case-figures { display: grid; gap: 20px; margin-top: 24px; }
.case-figure { margin: 0; }
.case-figure img { width: 100%; border-radius: 6px; display: block; }
.case-figure figcaption,
.case-hero-caption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sub);
  margin-top: 8px;
  max-width: 60ch;
  text-wrap: pretty;
}
.case-hero-caption { max-width: var(--max-w); margin: 10px auto 0; padding: 0 var(--pad-x); }
.case-section--claim h2 { text-wrap: balance; }
.project-media .case-figure img { border-radius: 6px; }

/* Missing proof, asked of the designer. Studio only (rc-edit-only), never on
   a published page or in an export. */
body.rc-edit-active .case-ask { display: block; }
.case-ask {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 16px 20px 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.case-ask .guess-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
}
.case-ask ul { padding-inline-start: 20px; margin: 0 0 8px; }
.case-ask li { font-size: 15px; line-height: 1.6; margin-bottom: 6px; }

/* Responsive video / embed (16:9) */
.embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-figma { aspect-ratio: 4 / 3; }
.embed-spotify,
.embed-soundcloud { aspect-ratio: auto; height: 152px; }
.embed-spotify iframe,
.embed-soundcloud iframe { position: static; height: 152px; }

.project-video {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.project-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* The source's own masthead clip behind the hero: silent, on a loop, full
   width of the screen, the type on top of a soft shade. With less motion asked
   for, the clip is hidden and its still (the wrapper's own background) stays;
   with no still, the layer steps aside and the type returns to its own colour. */
.hero--video { position: relative; isolation: isolate; }
body:has(.hero-video) { overflow-x: clip; }
.hero-video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #222;
  background-size: cover;
  background-position: center;
}
.hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.5));
}
body .hero.hero--video :is(.hero-title, .hero-tagline, .statement) { color: #fff; }
body .hero.hero--video .hero-byline { color: rgba(255, 255, 255, 0.82); }
.hero-band {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.hero-band .hero-video { left: 0; width: 100%; transform: none; }
.about-video { margin: 0 0 24px; }
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; }
  .hero--video:not(.hero--still) .hero-video { display: none; }
  .hero-band.hero--video:not(.hero--still) { display: none; }
  body .hero.hero--video:not(.hero--still) :is(.hero-title, .hero-tagline, .statement) { color: var(--fg); }
  body .hero.hero--video:not(.hero--still) .hero-byline { color: var(--sub); }
}

/* Freemium: locked work cards + paywall */
.work-card.is-locked .work-card-thumb { filter: grayscale(0.4) brightness(0.7); }
/* Owner only since decision 27. A plain word, no pill, no blur. */
.work-card-lock {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.paywall { text-align: center; }
.paywall-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 32px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.paywall-card h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 34px);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.paywall-card p {
  color: var(--sub);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 28px;
}
.paywall-cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.hero-media .embed-wrap,
.hero-media .project-video { margin-top: 0; }

/* ─── The six layouts (components/slot-data.ts) ──────────────────────────────
   Each is its own structure with one signature moment. The accent from the
   designer's palette appears at rest once (the rule under the contact links,
   or the Sidebar's project in view) and otherwise only under the pointer. */

/* Grid. Signature: the name as a masthead, the full width of the screen. */
.home-grid .hero--masthead {
  max-width: none;
  padding: clamp(40px, 6vw, 96px) var(--pad-x) clamp(36px, 4vw, 64px);
}
.home-grid .masthead {
  /* The single-line size: the free width over the name's width in em. Long
     names hit the floor and wrap. */
  font-size: clamp(40px, calc((100vw - 2 * var(--pad-x)) / (var(--name-units) * var(--masthead-k))), 26vw);
  line-height: 0.88;
}
.home-grid .hero-tagline { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.35; margin-top: 24px; max-width: 44ch; }
.home-grid .work { max-width: none; padding-top: clamp(8px, 1.5vw, 24px); }
.home-grid .work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 56px) clamp(16px, 1.6vw, 24px);
}
.home-grid .work-card-thumb { border-radius: 2px; }
.home-grid .work-card-desc { display: none; }
@media (max-width: 1000px) {
  .home-grid .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home-grid .work-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Editorial. Signature: an index of large titles; the row under the pointer
   takes the accent on its underline. No numbers: the order means nothing. */
.home-editorial .hero { padding-top: clamp(88px, 12vw, 184px); }
.home-editorial .hero-title { font-size: clamp(40px, 6vw, 88px); }
.home-editorial .work-index { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); }
.home-editorial .index-row {
  display: grid;
  grid-template-columns: clamp(96px, 11vw, 168px) minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 36px);
  align-items: center;
  padding: clamp(16px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--hairline);
}
.home-editorial .index-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--hairline) center / cover no-repeat;
  border-radius: 2px;
}
.home-editorial .index-row .t {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(26px, 3.6vw, 54px);
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  line-height: 1.02;
  color: var(--fg);
  text-wrap: balance;
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s ease;
}
.home-editorial .index-row:hover .t,
.home-editorial .index-row:focus-visible .t { text-decoration-color: var(--accent); }
.home-editorial .index-tag { color: var(--sub); font-size: 15px; line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.home-editorial .index-year { color: var(--sub); font-size: 14px; font-variant-numeric: tabular-nums; }
.home-editorial .index-lock {
  margin-inline-start: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--sub);
  vertical-align: middle;
}
@media (max-width: 700px) {
  .home-editorial .index-row { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .home-editorial .index-row .t { font-size: 24px; }
  .home-editorial .index-tag, .home-editorial .index-year { display: none; }
}

/* Sidebar. Signature: she stays in view; the sidebar lists the projects and
   marks the one on screen with the accent. */
.home-sidebar { display: grid; grid-template-columns: minmax(260px, 23vw) minmax(0, 1fr); }
.home-sidebar .sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
  padding: clamp(28px, 3vw, 48px);
  border-inline-end: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 22px;
  overflow-y: auto;
}
.home-sidebar .sidebar .nav-logo { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: calc(var(--display-ls) + var(--tone-ls)); }
.home-sidebar .sidebar-tagline { font-size: 17px; line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.home-sidebar .sidebar-index { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.35; }
.home-sidebar .sidebar-index a {
  color: var(--sub);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.home-sidebar .sidebar-index a:hover { color: var(--fg); }
.home-sidebar .sidebar-index a.is-active { color: var(--fg); border-bottom-color: var(--accent); }
.home-sidebar .sidebar-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.home-sidebar .sidebar-nav a { color: var(--sub); transition: color 0.2s ease; }
.home-sidebar .sidebar-nav a:hover { color: var(--fg); }
.home-sidebar .sidebar-foot { margin-top: auto; font-size: 13px; color: var(--sub); }
.home-sidebar .sidebar-main { padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 56px); min-width: 0; }
.home-sidebar .work { max-width: none; padding: 0; }
.home-sidebar .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(20px, 2vw, 32px); }
.home-sidebar .work-card-thumb { border-radius: 2px; }
.home-sidebar .about { max-width: none; padding: clamp(72px, 9vw, 136px) 0 clamp(40px, 5vw, 72px); }
@media (max-width: 860px) {
  .home-sidebar { grid-template-columns: 1fr; }
  .home-sidebar .sidebar { position: static; height: auto; border-inline-end: none; border-bottom: 1px solid var(--hairline); padding: 28px var(--pad-x); gap: 16px; }
  .home-sidebar .sidebar-index { display: none; }
  .home-sidebar .sidebar-main { padding: 32px var(--pad-x); }
  .home-sidebar .work-grid { grid-template-columns: 1fr; }
}

/* Full-bleed. Signature: every cover the full width of the screen, its title
   beneath. The cover keeps its own shape: a wide image fills the band edge to
   edge, and a poster or a game box is shown whole, centred, on the page's own
   paper, never cropped through its own title. */
.home-fullbleed .hero--compact { padding: clamp(56px, 8vw, 120px) var(--pad-x) clamp(40px, 5vw, 80px); }
.home-fullbleed .hero-title { font-size: clamp(44px, 7vw, 112px); }
.home-fullbleed .work { max-width: none; padding: 0 0 clamp(64px, 8vw, 120px); }
.home-fullbleed .work-grid { grid-template-columns: 1fr; gap: clamp(64px, 8vw, 128px); }
.home-fullbleed .work-card-thumb {
  aspect-ratio: auto;
  max-height: 88vh;
  border-radius: 0;
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-fullbleed .work-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
}
.home-fullbleed .work-card-thumb--empty { aspect-ratio: 16 / 9; background-color: var(--hairline); }
.home-fullbleed .work-card:hover .work-card-thumb { transform: none; }
.home-fullbleed .work-card-meta {
  max-width: var(--max-w);
  margin: clamp(18px, 2vw, 28px) auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 8px clamp(20px, 3vw, 48px);
  align-items: baseline;
}
.home-fullbleed .work-card-title { font-size: clamp(26px, 3.4vw, 48px); line-height: 1.05; text-wrap: balance; }
.home-fullbleed .work-card-desc { margin: 0; font-size: 16px; text-wrap: pretty; }
.home-fullbleed .work-card-year { margin: 0; }
@media (max-width: 700px) {
  .home-fullbleed .work-card-meta { grid-template-columns: 1fr; }
}

/* Statement. Signature: her own line, as large as a poster, then the work in
   a slow zigzag with room around each piece. */
.home-statement .hero--statement { padding: clamp(72px, 11vw, 168px) var(--pad-x) clamp(56px, 7vw, 112px); }
.statement {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(38px, 6.4vw, 108px);
  line-height: 1.02;
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  color: var(--fg);
  max-width: 17ch;
  text-wrap: balance;
}
.home-statement .hero-byline { margin-top: 36px; }
.home-statement .work { padding-top: 0; }
.home-statement .work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(64px, 8vw, 128px) 0; }
.home-statement .work-card { grid-column: 1 / span 7; }
.home-statement .work-card:nth-child(even) { grid-column: 6 / span 7; }
.home-statement .work-card-thumb { aspect-ratio: 3 / 2; border-radius: 2px; }
.home-statement .work-card-title { font-size: clamp(22px, 2.4vw, 32px); }
@media (max-width: 768px) {
  .home-statement .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .home-statement .work-card,
  .home-statement .work-card:nth-child(even) { grid-column: auto; }
}

/* Masonry. Signature: the work at its own proportions, nothing cropped. */
.home-masonry .hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px clamp(32px, 5vw, 80px);
  align-items: end;
  padding: clamp(56px, 8vw, 120px) var(--pad-x) clamp(36px, 5vw, 64px);
}
.home-masonry .hero-title { font-size: clamp(40px, 5.6vw, 88px); }
.home-masonry .hero-tagline { margin-top: 0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; max-width: 36ch; }
.home-masonry .work { padding-top: 0; }
.home-masonry .work-grid { display: block; columns: 3 280px; column-gap: clamp(16px, 1.8vw, 28px); }
.home-masonry .work-card { break-inside: avoid; margin-bottom: clamp(28px, 3vw, 44px); }
.home-masonry .work-card-thumb { aspect-ratio: auto; background: none; border-radius: 2px; }
.home-masonry .work-card-thumb img { width: 100%; height: auto; }
.home-masonry .work-card-thumb--empty { aspect-ratio: 4 / 3; background: var(--hairline); }
.home-masonry .work-card-meta { margin-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.home-masonry .work-card-title { font-size: clamp(16px, 1.3vw, 19px); }
.home-masonry .work-card-desc { display: none; }
.home-masonry .work-card-year { margin: 0; flex-shrink: 0; }
@media (max-width: 700px) {
  .home-masonry .hero--split { grid-template-columns: 1fr; }
  .home-masonry .work-grid { columns: 2; column-gap: 14px; }
  .home-masonry .work-card { margin-bottom: 24px; }
  .home-masonry .work-card-meta { display: block; }
  .home-masonry .work-card-title { font-size: 15px; }
  .home-masonry .work-card-year { font-size: 13px; }
}

/* ─── The six templates (components/slot-data.ts, Merav 14.10.2026) ──────────
   Window, Masthead, Index, Poster, Wall, Margin. Each opens its own way; all
   six share the paper, her colours, her logo and menu, and the full width of
   the screen with the same side margin. One display weight and the body's
   400 on a screen, the accent only under the pointer and on the gallery in
   view. Nothing moves by itself. */
.tpl { --pad-x: clamp(16px, 4vw, 64px); }
.tpl .site-nav { border-bottom: 0; padding: 22px var(--pad-x); gap: 12px 24px; }
.tpl .nav-links { gap: 8px 26px; }
.tpl .nav-links a { font-size: 15px; letter-spacing: 0; color: var(--fg); transition: color 0.2s ease; }
.tpl .nav-links a:hover,
.tpl .nav-links a.is-active { color: var(--accent); }
.tpl .t-logo img { display: block; width: auto; height: 44px; max-width: min(220px, 50vw); object-fit: contain; }
.tpl .hero { max-width: none; margin: 0; padding: 0 var(--pad-x); }
.tpl .work,
.tpl .about,
.tpl .contact { max-width: none; }
.tpl .work { padding: 0 var(--pad-x) clamp(64px, 8vw, 120px); }
.tpl .work-card-desc,
.tpl .work-card-year { display: none; }
.tpl .work-card-title { font-weight: 400; }
/* Project pages sit on the same grid as the home page and the menu (Merav,
   17.10.2026: "why isn't the title on the same margin grid?"). The page
   spans the screen with the menu's side margin; the cover picture and the
   gallery fill that same width instead of adding a second margin of their
   own. Reading columns stay narrow and centred for the measure. */
.tpl .project-body { max-width: none; }
.tpl .project-body .hero-media,
.tpl .project-body .case-hero-caption,
.tpl .project-body .case-layout,
.tpl .project-body .gallery-grid,
.tpl .project-body .project-photos { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.tpl .t-name,
.tpl .t-big,
.tpl .t-lead { font-family: var(--font-display); letter-spacing: var(--display-ls); color: var(--fg); text-wrap: balance; overflow-wrap: break-word; }
.tpl .t-line { color: var(--sub); text-wrap: balance; }
/* An item a visitor reaches from her menu stops clear of the top edge. */
.tpl [id^="p-"] { scroll-margin-top: 24px; }
@media (max-width: 640px) {
  .tpl .site-nav { padding: 16px var(--pad-x); }
  .tpl .nav-links { gap: 6px 14px; }
  .tpl .nav-links a { font-size: 14px; }
  .tpl .t-logo img { height: 28px; }
}
/* Her menu, when it does not fit on one row at this width (her links to other
   sites and her other pages make it long): a list, one link a line, on a row
   of its own, never a second ragged row and never under her logo. The page's
   small script (render.ts, withMenuFit) measures the row and marks it; Margin
   sets its side menu this way at every width already. */
.tpl .t-nav .nav-links.nav-links--column { flex-direction: column; align-items: flex-start; flex-basis: 100%; gap: 8px; }

/* 1 Window: her picture framed beside her name, on the paper. Not fixed, not
   full width, no veil, no words over it. */
.tpl .t-window {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(12px, 3vw, 48px);
  padding-bottom: clamp(40px, 6vw, 96px);
}
.tpl .t-window--plain { grid-template-columns: minmax(0, 1fr); }
.t-window .t-name { font-weight: 400; font-size: clamp(44px, 6.4vw, 112px); line-height: 0.98; }
.t-window .t-line { margin-top: 20px; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.35; max-width: 22em; }
.t-frame { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--hairline); }
.t-frame img,
.t-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.t-frame--clip { background-size: cover; background-position: center; }
@media (prefers-reduced-motion: reduce) {
  .t-frame--clip video { display: none; }
}
.home-window .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3.2vw, 56px) clamp(16px, 2.4vw, 40px); }
.home-window .work-card-thumb { aspect-ratio: 1.28; border-radius: 14px; }
.home-window .work-card-meta { margin-top: 12px; }
.home-window .work-card-title { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; }
@media (max-width: 700px) {
  .tpl .t-window { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 36px; }
  .t-window .t-name { font-size: clamp(40px, 12vw, 56px); }
  .home-window .work-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* 2 Masthead: her name from edge to edge, a thin rule, her line and the menu
   on one row under it. */
.tpl .t-masthead { padding-top: clamp(16px, 3vw, 48px); padding-bottom: clamp(36px, 4vw, 64px); }
.t-masthead .t-name {
  font-weight: var(--display-weight);
  /* The single-line size: the free width over the name's width in em. Long
     names hit the floor and wrap. */
  font-size: clamp(40px, calc((100vw - 2 * var(--pad-x)) / (var(--name-units) * var(--masthead-k))), 26vw);
  line-height: 0.88;
}
.t-masthead .t-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(16px, 2.4vw, 36px);
  padding-top: 18px;
  border-top: 1px solid var(--fg);
}
.t-masthead .t-line { color: var(--fg); font-size: clamp(16px, 1.4vw, 22px); line-height: 1.4; max-width: 44ch; }
.t-masthead .t-nav { padding: 0; }
.home-masthead .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(14px, 1.6vw, 24px); }
.home-masthead .work-card-thumb { aspect-ratio: 1.28; border-radius: 6px; }
.home-masthead .work-card-meta { margin-top: 10px; }
.home-masthead .work-card-title { font-size: 15px; line-height: 1.35; }
@media (max-width: 1000px) {
  .home-masthead .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .t-masthead .t-row { flex-direction: column; align-items: flex-start; }
  .home-masthead .work-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* 3 Index: her line at reading size, then her projects as a list to read. */
.tpl .t-index { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); }
.t-index .t-lead { font-weight: 400; font-size: clamp(26px, 3vw, 46px); line-height: 1.16; max-width: 22em; }
.home-index .work-index { list-style: none; border-top: 1px solid var(--fg); }
.home-index .index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto clamp(84px, 9vw, 140px);
  gap: clamp(14px, 3vw, 48px);
  align-items: center;
  padding: clamp(12px, 1.4vw, 22px) 0;
  border-bottom: 1px solid var(--hairline);
}
.home-index .index-row .t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 54px);
  line-height: 1.05;
  letter-spacing: var(--display-ls);
  color: var(--fg);
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}
.home-index .index-row:hover .t,
.home-index .index-row:focus-visible .t { color: var(--accent); }
.home-index .index-tag { font-size: 14px; color: var(--sub); }
.home-index .index-thumb { display: block; aspect-ratio: 1.28; border-radius: 6px; background: var(--hairline) center / cover no-repeat; }
.home-index .index-lock { margin-inline-start: 12px; font-family: var(--font-body); font-size: 14px; color: var(--sub); vertical-align: middle; }
@media (max-width: 640px) {
  .home-index .index-row { grid-template-columns: minmax(0, 1fr) 84px; gap: 14px; padding: 14px 0; }
  .home-index .index-tag { display: none; }
  .home-index .index-row .t { font-size: 26px; }
}

/* 4 Poster: her own line as large as a poster, then the work in turns, a
   picture and its title. */
.tpl .t-poster { padding-top: clamp(24px, 4vw, 64px); padding-bottom: clamp(56px, 7vw, 112px); }
.t-poster .t-big { font-weight: 400; font-size: clamp(48px, 9.4vw, 176px); line-height: 1; max-width: 11em; }
.t-poster .t-line { margin-top: clamp(16px, 2.4vw, 36px); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; }
.home-poster .work-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 6vw, 96px); }
.home-poster .work-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.home-poster .work-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.home-poster .work-card:nth-child(even) .work-card-thumb { order: 2; }
.home-poster .work-card-thumb { aspect-ratio: 1.28; border-radius: 10px; }
.home-poster .work-card-meta { margin: 0; }
.home-poster .work-card-title { font-size: clamp(26px, 3.2vw, 50px); line-height: 1.08; }
.home-poster .work-card-year { display: block; margin-top: 12px; font-size: 15px; }
@media (max-width: 700px) {
  .home-poster .work-card,
  .home-poster .work-card:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-poster .work-card:nth-child(even) .work-card-thumb { order: 0; }
  .t-poster .t-big { font-size: clamp(44px, 15vw, 72px); }
}

/* 5 Wall: her line, then a wall of her covers and the pictures inside her
   projects, each at its own shape. */
.tpl .t-wall { padding-bottom: clamp(24px, 3vw, 44px); }
.t-wall .t-lead { font-weight: var(--display-weight); font-size: clamp(22px, 2.6vw, 40px); line-height: 1.15; max-width: 18em; padding-top: clamp(8px, 2vw, 28px); }
.home-wall .work-grid { display: block; columns: 4 220px; column-gap: clamp(10px, 1.4vw, 20px); }
.home-wall .work-card { display: block; break-inside: avoid; margin-bottom: clamp(10px, 1.4vw, 20px); }
.home-wall .work-card-thumb { aspect-ratio: auto; background: none; border-radius: 8px; }
.home-wall .work-card:hover .work-card-thumb { transform: none; }
.home-wall .work-card-thumb img,
.home-wall .work-piece img { display: block; width: 100%; height: auto; border-radius: 8px; }
.home-wall .work-card-thumb--empty { aspect-ratio: 4 / 3; background: var(--hairline); }
.home-wall .work-card-meta { margin-top: 8px; }
.home-wall .work-card-title { font-family: var(--font-body); font-size: 13px; line-height: 1.35; letter-spacing: 0; }
@media (max-width: 640px) {
  .home-wall .work-grid { columns: 2; column-gap: 10px; }
  .home-wall .work-card { margin-bottom: 10px; }
}

/* 6 Margin: her name, her line and the menu stay in view in a column of
   their own while the work scrolls beside them. */
.home-margin { display: grid; grid-template-columns: minmax(220px, 22vw) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); padding: 0 var(--pad-x); }
.home-margin .t-side { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: clamp(28px, 3vw, 44px) 0; }
.home-margin .t-side > .nav-logo:not(.t-logo) { display: none; }
.home-margin .t-logo img { width: 72px; height: auto; max-height: 72px; }
.home-margin .t-name { font-weight: var(--display-weight); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; }
.home-margin .t-logo + .t-name { margin-top: 28px; }
.home-margin .t-line { margin-top: 12px; font-size: 16px; line-height: 1.45; }
.home-margin .t-nav--side { padding: 0; margin-top: 32px; }
.home-margin .t-nav--side .nav-links { flex-direction: column; gap: 8px; }
.home-margin .t-main { min-width: 0; padding-top: clamp(28px, 3vw, 44px); }
.home-margin .work,
.home-margin .about,
.home-margin .contact,
.home-margin .site-footer { padding-inline: 0; }
.home-margin .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3vw, 48px) clamp(16px, 2vw, 28px); }
.home-margin .work-card-thumb { aspect-ratio: 1.28; border-radius: 4px; }
.home-margin .work-card-meta { margin-top: 10px; }
.home-margin .work-card-title { font-size: 16px; line-height: 1.35; }
@media (max-width: 860px) {
  .home-margin { display: block; }
  .home-margin .t-side { position: static; max-height: none; overflow: visible; padding: 16px 0 28px; }
  .home-margin .t-logo img { width: auto; height: 28px; }
  .home-margin .t-logo + .t-name { margin-top: 16px; }
  .home-margin .t-nav--side { margin-top: 18px; }
  .home-margin .t-nav--side .nav-links { flex-direction: row; gap: 6px 16px; }
  .home-margin .t-main { padding-top: 0; }
  .home-margin .work-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* A project page follows its template: the same bar, the corners of its
   covers, and Poster's voice for the project's own line. */
.layout-window .hero-media img,
.layout-window .project-media img,
.layout-window .inline-media img { border-radius: 14px; }
.layout-masthead .hero-media img,
.layout-masthead .project-media img,
.layout-masthead .inline-media img,
.layout-index .hero-media img,
.layout-index .inline-media img { border-radius: 6px; }
.layout-poster .hero-media img,
.layout-poster .inline-media img { border-radius: 10px; }
.layout-wall .gallery-tile img,
.layout-wall .hero-media img { border-radius: 8px; }
.layout-margin .hero-media img,
.layout-margin .project-media img { border-radius: 4px; }
/* The page itself carries the variant's class too: Margin's split is the
   article's grid, never the page's (the bar stays full width above it). */
.tpl.project-split { display: block; max-width: none; }
.layout-poster .project-header .tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: var(--display-ls);
  max-width: 24ch;
  margin-top: 28px;
}

/* ── Project pages ── */

/* Long form (Editorial, Statement): narrow measure, inline images. */
.project-longform .case-section { max-width: 680px; }
.project-longform .inline-media { max-width: 880px; margin: 40px auto; }
.project-longform .inline-media img, .project-longform .inline-media .embed-wrap, .project-longform .inline-media .project-video { border-radius: 8px; }

/* Statement: the project's own line takes the statement's voice. */
.layout-statement .project-header .tagline {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: calc(var(--display-ls) + var(--tone-ls));
  max-width: 24ch;
  margin-top: 28px;
}

/* Visual (Full-bleed). Signature: the title set to run the width, then the
   cover wall to wall. */
.project-visual .project-title { font-size: clamp(52px, 10.5vw, 196px); line-height: 0.9; }
.project-visual .hero-media {
  max-width: none;
  width: 100vw;
  margin: clamp(32px, 4vw, 64px) 0 0 calc(50% - 50vw);
  padding: 0;
}
.project-visual .hero-media img,
.project-visual .hero-media .embed-wrap,
.project-visual .hero-media .project-video { border-radius: 0; }
/* Same rule as the Full-bleed homepage: the cover is shown whole, on the
   page's own paper, instead of cropped to a 16/9 band. */
.project-visual .hero-media img {
  max-height: 92vh;
  aspect-ratio: auto;
  object-fit: contain;
  background-color: var(--bg);
}
.project-visual .bleed { width: 100vw; margin-inline-start: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; }
.project-visual .bleed .hero-media { width: 100%; margin: 0; }
.project-visual .bleed img, .project-visual .bleed .embed-wrap, .project-visual .bleed .project-video { border-radius: 0; width: 100%; }
.project-visual .interlude { max-width: 680px; margin: 0 auto; padding: clamp(56px, 8vw, 120px) 0; }
.project-visual .interlude .case-section { max-width: 100%; padding: 0; }
.project-visual .project-header--overlay { padding: clamp(24px, 4vw, 56px) 0 0; }

/* Case study (Grid): the header splits, title at the start and her line at
   the end (left and right in English, mirrored in Hebrew), over
   one reading column; the facts sit in the byline. */
.project-casestudy .project-header {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.project-casestudy .project-header > * { grid-column: 2; }
.project-casestudy .project-header > .project-title { grid-column: 1; grid-row: 1 / span 6; align-self: end; }
.project-casestudy .project-header .tagline:first-of-type { margin-top: 0; }
@media (max-width: 768px) {
  .project-casestudy .project-header { display: block; }
  .project-casestudy .project-header .tagline:first-of-type { margin-top: 20px; }
}
.project-casestudy .deck { font-family: var(--font-body); font-size: clamp(18px, 2.4vw, 26px); line-height: 1.4; color: var(--fg); margin-top: 18px; max-width: 720px; }
.project-casestudy .case-layout { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: 1fr; }
.project-casestudy .case-main .case-section { max-width: 760px; margin: 0 auto; padding: 28px 0; }

/* Split (Sidebar). Signature: the title column stays in view while the work
   scrolls beside it, the same gesture as the home page. */
.project-split {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr);
  column-gap: clamp(32px, 5vw, 88px);
  align-items: start;
  max-width: 1440px;
}
.project-split > * { grid-column: 2; min-width: 0; }
.project-split > .project-header {
  grid-column: 1;
  grid-row: 1 / span 60;
  position: sticky;
  top: clamp(24px, 3vw, 40px);
  margin-bottom: 0;
}
/* No automatic hyphenation here: it split words that fit the column on their
   own ("Bakery win-dow lettering"). The title wraps between words like every
   other project title, and only a word wider than the column breaks. */
.project-split .project-title { font-size: clamp(30px, 2.8vw, 44px); line-height: 1.06; }
.project-split .tagline { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; max-width: 30ch; }
.project-split .hero-media,
.project-split .case-hero-caption,
.project-split .project-media { margin-inline: 0; padding: 0; max-width: none; }
.project-split .hero-media { margin-top: 0; }
.project-split .case-section,
.project-split .case-ask,
.project-split .case-close { margin-inline: 0; max-width: 720px; }
.project-split .inline-media { margin: 32px 0; }
@media (max-width: 900px) {
  .project-split { display: block; }
  .project-split > .project-header { position: static; margin-bottom: 32px; }
}

/* Gallery (Masonry): the images at their own shape, in columns. */
.project-gallery .deck { color: var(--sub); font-size: 16px; margin-top: 14px; max-width: 640px; }
.project-gallery .hero-media img { aspect-ratio: auto; }
.project-gallery .gallery-grid { max-width: var(--max-w); margin: 40px auto; padding: 0 var(--pad-x); columns: 3 320px; column-gap: 18px; }
.project-gallery .gallery-tile { break-inside: avoid; margin: 0 0 18px; }
.project-gallery .gallery-tile img { width: 100%; border-radius: 2px; display: block; }
.project-gallery .gallery-tile--span { column-span: all; margin: 8px 0 26px; }
.project-gallery .gallery-tile figcaption { font-size: 14px; letter-spacing: 0.01em; color: var(--sub); margin-top: 6px; }
.project-gallery .project-media { display: block; columns: 2 320px; column-gap: 18px; }
.project-gallery .project-media > * { break-inside: avoid; margin-bottom: 18px; }
@media (max-width: 600px) { .project-gallery .gallery-grid { columns: 1; } }

/* Tone layers: Mood picks one, each a distinct visual treatment of the
   headings + accent so changing Mood is clearly felt across the site.
   Tracking is nudged through --tone-ls, layered on the per-font --display-ls,
   so Mood is felt without ever crushing a heavy or condensed face.
   bold | electric | sharp | soft | calm. Toning, never structure. */
.tone-bold { --tone-ls: -0.006em; }
.tone-bold .nav-logo,
.tone-bold .hero-title,
.tone-bold .work-card-title,
.tone-bold .project-title,
.tone-bold .case-section h2,
.tone-bold .section-title,
.tone-bold .statement,
.tone-bold .index-row .t,
.tone-bold .case-next a { font-weight: var(--display-weight-strong); }

.tone-electric { --tone-ls: 0.006em; }
.tone-electric .nav-logo,
.tone-electric .hero-title,
.tone-electric .work-card-title,
.tone-electric .project-title,
.tone-electric .case-section h2,
.tone-electric .section-title,
.tone-electric .statement,
.tone-electric .index-row .t,
.tone-electric .case-next a { font-weight: var(--display-weight-strong); }

.tone-sharp { --tone-ls: 0.004em; }
.tone-sharp .nav-logo,
.tone-sharp .hero-title,
.tone-sharp .work-card-title,
.tone-sharp .project-title,
.tone-sharp .case-section h2,
.tone-sharp .section-title,
.tone-sharp .statement,
.tone-sharp .index-row .t,
.tone-sharp .case-next a { font-weight: var(--display-weight); }
/* Uppercase only on the large project title, never on small text. */
.tone-sharp .project-title { text-transform: uppercase; }

/* Soft is the one tone that leans. On a face with no italic that is not
   available, so --soft-weight and --soft-ls carry it instead: the lightest
   real weight, opened up. Both are resolved per face at render time. */
.tone-soft { --tone-ls: var(--soft-ls); }
.tone-soft .nav-logo,
.tone-soft .hero-title,
.tone-soft .work-card-title,
.tone-soft .project-title,
.tone-soft .case-section h2,
.tone-soft .section-title,
.tone-soft .statement,
.tone-soft .index-row .t,
.tone-soft .case-next a { font-weight: var(--soft-weight); font-style: var(--display-italic); }

.tone-calm { --tone-ls: 0.002em; }
.tone-calm .nav-logo,
.tone-calm .hero-title,
.tone-calm .work-card-title,
.tone-calm .project-title,
.tone-calm .case-section h2,
.tone-calm .section-title,
.tone-calm .statement,
.tone-calm .index-row .t,
.tone-calm .case-next a { font-weight: 400; }

.type-serif .hero-title { line-height: 0.92; }
.type-chaos .hero-title { text-transform: none; }

/* ─── Upgrade modal (locked projects) ──────────────────────────────────────── */
.promtfolio-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.promtfolio-modal[hidden] { display: none; }
.promtfolio-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.promtfolio-modal-card {
  position: relative; z-index: 1; max-width: 460px; width: 100%;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--hairline); border-radius: 18px;
  padding: 40px 36px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.promtfolio-modal-x { position: absolute; top: 14px; inset-inline-end: 16px; background: none; border: none; color: var(--sub); font-size: 22px; cursor: pointer; line-height: 1; }
.promtfolio-modal-card h2 { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.02em; margin-bottom: 14px; }
.promtfolio-modal-card p { color: var(--sub); font-size: 15px; line-height: 1.6; margin-bottom: 26px; }
.promtfolio-modal-cta { display: inline-block; padding: 14px 30px; border-radius: 12px; background: var(--accent); color: var(--bg); font-size: 14px; font-weight: 400; }
.work-card.is-locked { cursor: pointer; }

/* About portrait (pulled from the source About page) */
.about-side { display: flex; flex-direction: column; gap: 28px; }
.about-portrait { margin: 0; }
.about-portrait img {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Promtfolio backlink in footer */
.built-with { color: var(--sub); transition: color 0.15s; }
.built-with:hover { color: var(--accent); }

/* ─── Image lightbox (click any work image to view it full screen) ─────────── */
/* Content images invite a click; the viewer itself stays palette-independent so
   light and dark sites both get a calm, near-black viewing surface. */
.rcx-zoomable { cursor: zoom-in; }
.rcx-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(8, 6, 12, 0.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rcx-lightbox[aria-hidden="false"] { display: flex; }
.rcx-lb-figure { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; }
.rcx-lightbox-img {
  max-width: 92vw; max-height: 88vh; width: auto; height: auto;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  -webkit-user-select: none; user-select: none;
  transition: opacity 0.16s ease;
}
.rcx-lightbox.is-switching .rcx-lightbox-img { opacity: 0; }
.rcx-lb-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s;
}
.rcx-lb-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.45); }
.rcx-lb-btn svg { width: 22px; height: 22px; }
.rcx-lb-prev { inset-inline-start: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.rcx-lb-next { inset-inline-end: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.rcx-lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.rcx-lb-next:hover { transform: translateY(-50%) translateX(2px); }
.rcx-lb-close { top: clamp(10px, 2.5vw, 26px); inset-inline-end: clamp(10px, 2.5vw, 26px); width: 44px; height: 44px; }
.rcx-lb-count {
  position: absolute; bottom: clamp(14px, 3vw, 28px); left: 50%; transform: translateX(-50%);
  font-size: 13px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
.rcx-lb-caption {
  position: absolute; bottom: clamp(40px, 6vw, 60px); left: 50%; transform: translateX(-50%);
  max-width: 80vw; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.62);
}
.rcx-lb-single .rcx-lb-prev,
.rcx-lb-single .rcx-lb-next,
.rcx-lb-single .rcx-lb-count { display: none; }
@media (max-width: 600px) {
  .rcx-lb-btn { width: 44px; height: 44px; }
  .rcx-lb-prev { inset-inline-start: 8px; }
  .rcx-lb-next { inset-inline-end: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rcx-lightbox-img, .rcx-lb-btn { transition: none; }
}

/* Pictures on their way in (lib/generator/image-load.ts). The script marks a
   picture that has not loaded when the page is read (rc-wait), and lets it
   rest once it has (rc-in). The placeholder is the box the picture already
   has, in the paper tone of the page, so nothing moves when it lands. A
   picture already there is never marked, and without the script nothing
   waits. */
:root { --rc-ph: color-mix(in srgb, var(--fg) 6%, var(--bg)); --rc-ph-glow: color-mix(in srgb, var(--bg) 85%, transparent); }
img.rc-wait,
img.rc-miss { background-color: var(--rc-ph); }
img.rc-in { animation: rc-in 300ms ease-out both; }
.rc-bg-pos { position: relative; }
.rc-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--rc-ph);
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.rc-bg.rc-in::after { opacity: 0; }
/* While it is on its way: a slow, quiet light across the placeholder. */
img.rc-wait,
.rc-bg.rc-wait::after {
  background-image: linear-gradient(100deg, transparent 35%, var(--rc-ph-glow) 50%, transparent 65%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: rc-shimmer 1.8s ease-in-out infinite;
}
@keyframes rc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) {
  img.rc-wait,
  .rc-bg.rc-wait::after,
  img.rc-in { animation: none; }
  img.rc-wait,
  .rc-bg.rc-wait::after { background-image: none; }
  .rc-bg::after { transition: none; }
}

/* Original look: measured from the source site (lib/site-look.ts). */
:root { --max-w: 1024px; }
.home-grid .work { max-width: var(--max-w); }
.hero-title, .home-grid .masthead { font-size: clamp(36px, 5.56vw, 80px); }
.work-card.is-locked .work-card-thumb { filter: none; }
.home-grid .work { padding-inline: 0; padding-top: 0; }
@media (min-width: 1001px) { .home-grid .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-card-thumb { aspect-ratio: 1.278 / 1; border-radius: 0; }
.work-card-meta { position: absolute; inset: 0; margin: 0; padding: 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: color-mix(in srgb, var(--bg) 66%, transparent); opacity: 0; transition: opacity 0.2s ease; }
.work-card:hover .work-card-meta, .work-card:focus-visible .work-card-meta { opacity: 1; }
@media (hover: none) { .work-card-meta { position: static; inset: auto; margin-top: 16px; padding: 0 16px; display: block; text-align: start; background: none; opacity: 1; } }
.home-grid .nav-logo { flex: 0 0 100%; max-width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: flex-start; text-align: start; padding-inline-end: 0.000%; color: rgb(17, 17, 17); text-shadow: none; font-size: 22px; letter-spacing: 0; line-height: 22px; font-weight: 300; font-style: normal; text-transform: uppercase; justify-content: flex-start; text-align: start; font-family: 'Afacad', sans-serif; }
.home-grid .nav-logo-words { font-size: min(22px, calc(100.000vw / var(--logo-units, 0.0001))); }
.home-grid .nav-links { gap: 0; flex-wrap: wrap; min-width: 0; }
.home-grid .nav-links a { flex: none; white-space: nowrap; }
.home-grid .nav-links a:not(:last-child) { margin-inline-end: 14.45px; }
.home-grid .nav-links a[href="#work"]:not(:last-child), .home-grid .nav-links a[href^="#g"]:not(:last-child) { margin-inline-end: 14.45px; }
.home-grid .nav-links a { font-size: 14px; letter-spacing: 0; line-height: 28px; font-weight: 400; color: rgb(81, 81, 81); text-shadow: none; transition: color 0.2s ease; font-family: 'Afacad', sans-serif; text-transform: uppercase; }
.home-grid .nav-links a:hover { color: rgb(17, 17, 17); }
.home-grid .nav-links a[aria-current="page"] { color: rgb(21, 161, 171); }
.home-grid .nav-links a[href="#work"], .home-grid .nav-links a[href^="#g"] { letter-spacing: -0.0073em; font-weight: 400; font-family: 'Afacad', sans-serif; }
.home-grid .hero--masthead .hero-title { font-weight: 400; font-family: 'Afacad', sans-serif; }
:where(.home-grid .site-nav) { position: relative; }
.home-grid .nav-social { position: absolute; inset-inline-end: 0%; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; z-index: 1; }
.home-grid .nav-social li { display: block; }
.home-grid .nav-social li:first-child { padding-inline-start: 0; }
.home-grid .nav-social a, .home-grid .nav-social svg { display: block; }
.home-grid .nav-social svg { transition: fill 0.2s ease; }
.home-grid .nav-social { display: none; }
.home-grid .nav-social li { padding-inline-start: 9px; }
.home-grid .nav-social svg { width: 23px; height: 23px; fill: rgb(29, 112, 118); }
.home-grid .nav-social a:hover svg { fill: rgb(102, 102, 102); }
.home-grid .work { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); max-width: none; padding-inline: 0; padding-top: 5px; padding-bottom: 0px; }
.home-grid .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0px; }
.home-grid .work-card-thumb { aspect-ratio: 1.27848 / 1; border-radius: 0; }
.home-grid .work-card-thumb--cover { background-size: calc(100% + 2px) calc(100% + 2px); background-position: center; }
.home-grid .work-card-thumb::after { content: ""; position: absolute; inset: 0; background: rgb(0, 0, 0); opacity: 0; transition: opacity 0.2s ease; }
.home-grid .work-card:hover .work-card-thumb::after, .home-grid .work-card:focus-visible .work-card-thumb::after { opacity: 0.5; }
.home-grid .work-card-meta { padding: 0 8%; background: none; transition: opacity 0.15s ease; }
.home-grid .work-card-title { width: 100%; margin-inline: auto; font-size: 25px; letter-spacing: -0.0073em; font-family: 'Afacad', sans-serif; text-wrap: wrap; line-height: 34px; font-weight: 400; color: rgb(255, 255, 255); font-family: 'Afacad', sans-serif; text-transform: none; padding-bottom: 8px; }
.home-grid .to-top { display: block; }
.home-grid .site-footer { padding-top: 60px; padding-bottom: 60px; border-top: 0; width: calc(min(100%, var(--max-w, 100%)) * 1.0000); margin-inline: auto; padding-inline: 0; }
.home-grid .footer-row { font-size: 13px; letter-spacing: 0em; line-height: 19px; color: rgb(221, 221, 221); }
.home-grid .work-card-thumb { position: relative; transition: none; }
.home-grid .work-card-lock { z-index: 1; }
.home-grid .work-card:hover .work-card-thumb { transform: none; }
.home-grid .work-card:hover .work-card-title { color: rgb(255, 255, 255); }
.home-grid .work-card-year, .home-grid .work-card-desc { display: none; }
@media (hover: none) { .home-grid .work-card-meta { position: absolute; inset: auto; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; } }
.home-grid .nav-fold, .home-grid .nav-fold-close { display: none; }
.home-grid .about, .home-grid .contact, .home-grid .rc-block .rc-block-inner { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); max-width: none; margin-inline: auto; box-sizing: border-box; padding-inline-start: max(0px, calc(var(--rc-edge-s, var(--pad-x)) - (100% - min(100%, var(--max-w, 100%)) * 1.0000) / 2)); padding-inline-end: max(0px, calc(var(--rc-edge-e, var(--pad-x)) - (100% - min(100%, var(--max-w, 100%)) * 1.0000) / 2)); }
.home-grid .about .section-title, .home-grid .contact .section-title, .home-grid .rc-block .section-title { font-family: var(--font-body); font-size: 25px; line-height: 34px; font-weight: 400; letter-spacing: 0; color: rgb(81, 81, 81); }
.home-grid .about-prose, .home-grid .about-prose p, .home-grid .contact-links, .home-grid .what-i-do li, .home-grid .rc-block .rc-quote-text, .home-grid .rc-block .rc-service-text { font-family: var(--font-body); font-size: 14px; line-height: 21px; letter-spacing: 0; color: rgb(81, 81, 81); }
.home-grid .rc-block .rc-service-title { font-size: 14px; line-height: 21px; }
@media (max-width: 900px) { .home-grid .about, .home-grid .contact, .home-grid .rc-block .rc-block-inner { width: 100%; box-sizing: border-box; padding-inline: 20px; } }
.home-grid .footer-row { justify-content: center; text-align: center; }
.home-grid .footer-row > span { display: none; }
.home-grid .footer-row .built-with { color: inherit; font: inherit; letter-spacing: 0; text-decoration: none; }
@media (max-width: 768px) {
  .home-grid .site-nav { padding-top: 40px; padding-bottom: 40px; }
  .home-grid .nav-logo { padding-inline-end: 39px; box-sizing: border-box; }
  .home-grid .nav-links { display: none; }
  .home-grid .site-nav { position: relative; }
  .home-grid .nav-fold { display: block; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); padding: 30px 5%; }
  .home-grid .nav-fold i { display: block; width: 24px; height: 2px; margin-bottom: 4px; background: rgb(0, 0, 0); }
  .home-grid .nav-fold i:last-child { margin-bottom: 0; }
  .home-grid .nav-links:target, .rc-menu .home-grid .nav-links { display: flex; flex-direction: column; justify-content: center; position: fixed; inset: 0; z-index: 10; gap: 0; padding: 50px 5% 80px; text-align: center; background: rgb(255, 255, 255); }
  .home-grid .nav-links:target a[href], .rc-menu .home-grid .nav-links a[href] { display: block; margin-inline-end: 0; white-space: normal; font-size: 22px; line-height: 32px; padding: 0 0 30px; }
  .home-grid .nav-links:target .nav-fold-close, .rc-menu .home-grid .nav-links .nav-fold-close { display: block; position: fixed; top: 40px; inset-inline-end: 5%; width: 20px; height: 20px; padding: 0; }
  .home-grid .nav-fold-close::before, .home-grid .nav-fold-close::after { content: ""; position: absolute; left: 50%; width: 2px; height: 20px; background: rgb(0, 0, 0); }
  .home-grid .nav-fold-close::before { transform: rotate(45deg); }
  .home-grid .nav-fold-close::after { transform: rotate(-45deg); }
  .home-grid .nav-links:target::after, .rc-menu .home-grid .nav-links::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box; height: 80px; background: rgb(255, 255, 255); border-top: 1px solid rgba(0, 0, 0, 0.08); }
  .home-grid .nav-links:target .nav-fold-close, .rc-menu .home-grid .nav-links .nav-fold-close { top: 40px; }
  .home-grid .nav-social li { padding-inline-start: 7px; }
  .home-grid .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid .work-card-title { font-size: 18px; letter-spacing: -0.0073em; font-family: 'Afacad', sans-serif; text-wrap: wrap; line-height: 24px; }
  .home-grid .site-footer { padding-top: 28px; padding-bottom: 28px; border-top: 0; }
}
@media (max-width: 540px) {
  .home-grid .site-nav { padding-top: 30px; padding-bottom: 30px; }
  .home-grid .nav-logo { font-size: 21px; letter-spacing: 0; line-height: 21px; }
  .home-grid .nav-logo-words { font-size: min(21px, calc(100.000vw / var(--logo-units, 0.0001))); }
  .home-grid .nav-links:target .nav-fold-close, .rc-menu .home-grid .nav-links .nav-fold-close { top: 30px; }
  .home-grid .nav-social li { padding-inline-start: 6px; }
  .home-grid .work-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); column-gap: 0px; }
  .home-grid .work-card-title { font-size: 16px; letter-spacing: -0.0073em; font-family: 'Afacad', sans-serif; text-wrap: wrap; line-height: 22px; padding-bottom: 7px; }
  .home-grid .site-footer { padding-top: 25px; padding-bottom: 25px; border-top: 0; }
}
.page-source .nav-logo { flex: 0 0 100%; max-width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: flex-start; text-align: start; padding-inline-end: 0.000%; color: rgb(17, 17, 17); text-shadow: none; font-size: 22px; letter-spacing: 0; line-height: 22px; font-weight: 300; font-style: normal; text-transform: uppercase; justify-content: flex-start; text-align: start; font-family: 'Afacad', sans-serif; }
.page-source .nav-logo-words { font-size: min(22px, calc(100.000vw / var(--logo-units, 0.0001))); }
.page-source .nav-links { gap: 0; flex-wrap: wrap; min-width: 0; }
.page-source .nav-links a { flex: none; white-space: nowrap; }
.page-source .nav-links a:not(:last-child) { margin-inline-end: 14.45px; }
.page-source .nav-links a[href$="#work"]:not(:last-child), .page-source .nav-links a[href*="#g"]:not(:last-child) { margin-inline-end: 14.45px; }
.page-source .nav-links a { font-size: 14px; letter-spacing: 0; line-height: 28px; font-weight: 400; color: rgb(81, 81, 81); text-shadow: none; transition: color 0.2s ease; font-family: 'Afacad', sans-serif; text-transform: uppercase; }
.page-source .nav-links a:hover { color: rgb(17, 17, 17); }
.page-source .nav-links a[aria-current="page"] { color: rgb(21, 161, 171); }
.page-source .nav-links a[href$="#work"], .page-source .nav-links a[href*="#g"] { letter-spacing: -0.0073em; font-weight: 400; font-family: 'Afacad', sans-serif; }
:where(.page-source .site-nav) { position: relative; }
.page-source .nav-social { position: absolute; inset-inline-end: 0%; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; z-index: 1; }
.page-source .nav-social li { display: block; }
.page-source .nav-social li:first-child { padding-inline-start: 0; }
.page-source .nav-social a, .page-source .nav-social svg { display: block; }
.page-source .nav-social svg { transition: fill 0.2s ease; }
.page-source .nav-social { display: none; }
.page-source .nav-social li { padding-inline-start: 9px; }
.page-source .nav-social svg { width: 23px; height: 23px; fill: rgb(29, 112, 118); }
.page-source .nav-social a:hover svg { fill: rgb(102, 102, 102); }
.page-source .to-top { display: block; }
.page-source .site-footer { padding-top: 60px; padding-bottom: 60px; border-top: 0; width: calc(min(100%, var(--max-w, 100%)) * 1.0000); margin-inline: auto; padding-inline: 0; }
.page-source .footer-row { font-size: 13px; letter-spacing: 0em; line-height: 19px; color: rgb(221, 221, 221); }
.page-source .nav-fold, .page-source .nav-fold-close { display: none; }
.page-source .footer-row { justify-content: center; text-align: center; }
.page-source .footer-row > span { display: none; }
.page-source .footer-row .built-with { color: inherit; font: inherit; letter-spacing: 0; text-decoration: none; }
@media (max-width: 768px) {
  .page-source .site-nav { padding-top: 40px; padding-bottom: 40px; }
  .page-source .nav-logo { padding-inline-end: 39px; box-sizing: border-box; }
  .page-source .nav-links { display: none; }
  .page-source .site-nav { position: relative; }
  .page-source .nav-fold { display: block; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); padding: 30px 5%; }
  .page-source .nav-fold i { display: block; width: 24px; height: 2px; margin-bottom: 4px; background: rgb(0, 0, 0); }
  .page-source .nav-fold i:last-child { margin-bottom: 0; }
  .page-source .nav-links:target, .rc-menu .page-source .nav-links { display: flex; flex-direction: column; justify-content: center; position: fixed; inset: 0; z-index: 10; gap: 0; padding: 50px 5% 80px; text-align: center; background: rgb(255, 255, 255); }
  .page-source .nav-links:target a[href], .rc-menu .page-source .nav-links a[href] { display: block; margin-inline-end: 0; white-space: normal; font-size: 22px; line-height: 32px; padding: 0 0 30px; }
  .page-source .nav-links:target .nav-fold-close, .rc-menu .page-source .nav-links .nav-fold-close { display: block; position: fixed; top: 40px; inset-inline-end: 5%; width: 20px; height: 20px; padding: 0; }
  .page-source .nav-fold-close::before, .page-source .nav-fold-close::after { content: ""; position: absolute; left: 50%; width: 2px; height: 20px; background: rgb(0, 0, 0); }
  .page-source .nav-fold-close::before { transform: rotate(45deg); }
  .page-source .nav-fold-close::after { transform: rotate(-45deg); }
  .page-source .nav-links:target::after, .rc-menu .page-source .nav-links::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box; height: 80px; background: rgb(255, 255, 255); border-top: 1px solid rgba(0, 0, 0, 0.08); }
  .page-source .nav-links:target .nav-fold-close, .rc-menu .page-source .nav-links .nav-fold-close { top: 40px; }
  .page-source .nav-social li { padding-inline-start: 7px; }
  .page-source .site-footer { padding-top: 28px; padding-bottom: 28px; border-top: 0; }
}
@media (max-width: 540px) {
  .page-source .site-nav { padding-top: 30px; padding-bottom: 30px; }
  .page-source .nav-logo { font-size: 21px; letter-spacing: 0; line-height: 21px; }
  .page-source .nav-logo-words { font-size: min(21px, calc(100.000vw / var(--logo-units, 0.0001))); }
  .page-source .nav-links:target .nav-fold-close, .rc-menu .page-source .nav-links .nav-fold-close { top: 30px; }
  .page-source .nav-social li { padding-inline-start: 6px; }
  .page-source .site-footer { padding-top: 25px; padding-bottom: 25px; border-top: 0; }
}

/* Project pages in the source's own layout (lib/source-page.ts). */
.page-source .project-source { box-sizing: border-box; margin: 0px auto 0; padding: 0; }
.page-source .src-head { box-sizing: border-box; width: 100%; margin: 0 auto; }
.page-source .src-title { margin: 0 auto; width: 100%; max-width: none; font-family: var(--font-display); font-style: normal; text-transform: none; text-wrap: wrap; overflow-wrap: break-word; }
.page-source .src-title.visually-hidden { width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; }
.page-source .src-desc { margin: 0 auto; width: 100%; max-width: none; font-family: var(--font-body); white-space: pre-line; overflow-wrap: break-word; }
.page-source .src-block { box-sizing: border-box; clear: both; width: var(--w, 100%); margin: 0 auto; }
.page-source .src-image img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0; }
.page-source .src-video .embed-wrap { aspect-ratio: auto; height: 0; padding-bottom: var(--r, 56.25%); border-radius: 0; background: none; }
.page-source .src-frame { margin: 0 auto; }
.page-source .src-video .project-video video { display: block; width: 100%; border-radius: 0; }
.page-source .src-text p { margin: 0; max-width: none; font-family: var(--font-body); letter-spacing: 0; overflow-wrap: break-word; }
.page-source .src-text a { color: inherit; text-decoration: underline; }
.page-source .src-cap { box-sizing: border-box; display: block; width: 100%; margin: 0 auto; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; }
.page-source .src-cap p { margin: 0; max-width: none; font-family: var(--font-body); letter-spacing: 0; overflow-wrap: break-word; }
.page-source .src-cap a { color: inherit; text-decoration: underline; }
.page-source .photo-rows { --row-h: 300px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.page-source .photo-rows::after { content: ""; flex: 100000000 1 0px; }
.page-source .photo-rows .photo { --ar: 1.3333; margin: 0; min-width: 0; flex: calc(var(--ar) * 1000) 1 calc(var(--ar) * var(--row-h)); max-width: calc(var(--ar) * var(--row-h) * 1.5); }
.page-source .photo-rows .photo img { display: block; width: 100%; height: auto; max-width: none; border-radius: 0; }
.page-source .photo-rows .photo[style] img { aspect-ratio: var(--ar); object-fit: cover; }
@media (max-width: 600px) {
  .page-source .photo-rows { --row-h: 150px; gap: 6px; }
}
.page-source .src-grid .photo-rows, .page-source .src-grid.photo-rows { --row-h: var(--grid-h, 300px); }
@media (max-width: 600px) {
  .page-source .src-grid.photo-rows { --row-h: 150px; }
}
.page-source .src-grid-rows { display: flex; flex-direction: column; gap: var(--gap, 8px); }
.page-source .src-grid-row { display: flex; gap: var(--gap, 8px); }
.page-source .src-grid-row .photo { margin: 0; min-width: 0; }
.page-source .src-grid-row .photo img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: var(--ar); object-fit: cover; border-radius: 0; }
.page-source .src-row { display: flex; align-items: flex-start; }
.page-source .src-row--mid { align-items: center; }
.page-source .src-row--end { align-items: flex-end; }
.page-source .src-col { flex: var(--f, 1) 1 0%; min-width: 1px; border-inline: 4px solid transparent; }
.page-source .src-col:first-child { border-inline-start: 0; }
.page-source .src-col:last-child { border-inline-end: 0; }
@media (max-width: 540px) {
  .page-source .src-row { display: block; }
  .page-source .src-col { border-inline: 0; }
  .page-source .src-text { width: 100%; }
}
.page-source .src-band { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin: 0; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.page-source .src-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.page-source .src-band::after { content: ""; position: absolute; box-sizing: border-box; bottom: 5px; pointer-events: none; }
.page-source .src-band-words { position: relative; z-index: 1; width: 100%; }
.page-source .src-band-title { margin: 0; max-width: none; font-family: var(--font-display); font-style: normal; text-transform: none; text-wrap: balance; overflow-wrap: break-word; }
.page-source .src-band-line { margin: 0; max-width: none; font-family: var(--font-body); text-wrap: pretty; overflow-wrap: break-word; }
.page-source.src-banded .project-source { margin-top: 0; }
.page-source .src-case { box-sizing: border-box; max-width: 800px; margin: 0 auto; padding: 64px 5% 24px; }
.page-source .rcx-lightbox { background: none; isolation: isolate; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-source .rcx-lightbox::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.94); }
.page-source .rcx-lightbox .rcx-lb-figure, .page-source .rcx-lightbox .rcx-lightbox-img { max-width: 100vw; max-height: 100vh; }
.page-source .rcx-lightbox .rcx-lightbox-img { border-radius: 0; box-shadow: none; transition: opacity 0.4s ease; }
.page-source .rcx-lightbox .rcx-lb-btn { border: 0; border-radius: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
.page-source .rcx-lightbox .rcx-lb-btn svg { display: block; }
.page-source .rcx-lightbox .rcx-lb-prev, .page-source .rcx-lightbox .rcx-lb-next { top: 0; width: 30%; height: 100%; transform: none; opacity: 0; }
.page-source .rcx-lightbox .rcx-lb-prev { inset-inline-start: 0; }
.page-source .rcx-lightbox .rcx-lb-next { inset-inline-end: 0; }
.page-source .rcx-lightbox .rcx-lb-prev:hover, .page-source .rcx-lightbox .rcx-lb-next:hover { background: none; transform: none; }
.page-source .rcx-lightbox .rcx-lb-prev:focus-visible, .page-source .rcx-lightbox .rcx-lb-next:focus-visible { opacity: 1; }
.page-source .rcx-lightbox .rcx-lb-prev svg, .page-source .rcx-lightbox .rcx-lb-next svg { position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -30px; }
.page-source .rcx-lightbox .rcx-lb-prev svg { inset-inline-start: 20px; }
.page-source .rcx-lightbox .rcx-lb-next svg { inset-inline-end: 20px; }
.page-source .rcx-lightbox .rcx-lb-disc { fill: rgb(105, 105, 105); opacity: 0.2; }
.page-source .rcx-lightbox .rcx-lb-mark { fill: rgb(255, 255, 255); }
.page-source .rcx-lightbox .rcx-lb-close { top: 20px; inset-inline-end: 20px; width: 40px; height: 40px; }
.page-source .rcx-lightbox .rcx-lb-close svg { width: 100%; height: 100%; }
.page-source .rcx-lightbox .rcx-lb-close .rcx-lb-disc { fill: rgb(255, 255, 255); }
.page-source .rcx-lightbox .rcx-lb-close .rcx-lb-mark { fill: rgb(0, 0, 0); }
.page-source .rcx-lightbox .rcx-lb-count, .page-source .rcx-lightbox .rcx-lb-caption { display: none; }
@media (hover: hover) {
  .page-source .rcx-lightbox .rcx-lb-prev:hover, .page-source .rcx-lightbox .rcx-lb-next:hover { opacity: 1; }
  .page-source .rcx-lightbox .rcx-lb-btn svg:hover .rcx-lb-disc { opacity: 0.4; }
}
@media (max-width: 1024px) {
  .page-source .rcx-lightbox .rcx-lb-close { top: 0; inset-inline-end: 0; }
}
.page-source.pg-animation-projects .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-animation-projects .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-animation-projects .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-animation-projects .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-animation-projects .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-animation-projects .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-animation-projects .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-animation-projects .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-animation-projects .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-animation-projects .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-animation-projects .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-animation-projects .src-case { max-width: 800px; }
.page-source.pg-animation-projects .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-animation-projects .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-animation-projects .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-animation-projects .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-animation-projects .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-animation-projects .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-animation-projects .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-animation-projects .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-animation-projects .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-animation-projects .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-animation-projects .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-animation-projects .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-animation-projects .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-animation-projects .src-text p, .page-source.pg-animation-projects .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
@media (max-width: 540px) {
  .page-source.pg-animation-projects .src-row > .src-col > .src-image:not([style*="--w"]), .page-source.pg-animation-projects .src-row > .src-col > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
}
.page-source.pg-social-media-visual-strategy .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-social-media-visual-strategy .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-social-media-visual-strategy .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-social-media-visual-strategy .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-social-media-visual-strategy .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-social-media-visual-strategy .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-social-media-visual-strategy .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-social-media-visual-strategy .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-social-media-visual-strategy .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-social-media-visual-strategy .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-social-media-visual-strategy .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-social-media-visual-strategy .src-case { max-width: 800px; }
.page-source.pg-social-media-visual-strategy .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-social-media-visual-strategy .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-social-media-visual-strategy .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-social-media-visual-strategy .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-social-media-visual-strategy .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-social-media-visual-strategy .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-social-media-visual-strategy .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-social-media-visual-strategy .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-social-media-visual-strategy .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-social-media-visual-strategy .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-social-media-visual-strategy .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-social-media-visual-strategy .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-social-media-visual-strategy .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-social-media-visual-strategy .src-text p, .page-source.pg-social-media-visual-strategy .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-the-greatest-magazine .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-the-greatest-magazine .src-desc { font-family: 'Afacad', sans-serif; }
.page-source.pg-the-greatest-magazine .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-the-greatest-magazine .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-the-greatest-magazine .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-the-greatest-magazine .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-the-greatest-magazine .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-the-greatest-magazine .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-the-greatest-magazine .src-desc { font-size: 16px; letter-spacing: -0.0073em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-the-greatest-magazine .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-the-greatest-magazine .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-the-greatest-magazine .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-the-greatest-magazine .src-case { max-width: 800px; }
.page-source.pg-the-greatest-magazine .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-the-greatest-magazine .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-the-greatest-magazine .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-the-greatest-magazine .src-desc { font-size: 14px; letter-spacing: -0.0073em; line-height: 20px; }
  .page-source.pg-the-greatest-magazine .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-the-greatest-magazine .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-the-greatest-magazine .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-the-greatest-magazine .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-the-greatest-magazine .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-the-greatest-magazine .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-the-greatest-magazine .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-the-greatest-magazine .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-the-greatest-magazine .src-text p, .page-source.pg-the-greatest-magazine .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-book-frida-kahlo .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-book-frida-kahlo .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-book-frida-kahlo .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-book-frida-kahlo .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-book-frida-kahlo .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-book-frida-kahlo .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-book-frida-kahlo .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-book-frida-kahlo .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-book-frida-kahlo .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-book-frida-kahlo .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-book-frida-kahlo .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-book-frida-kahlo .src-case { max-width: 800px; }
.page-source.pg-book-frida-kahlo .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-book-frida-kahlo .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-book-frida-kahlo .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-book-frida-kahlo .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-book-frida-kahlo .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-book-frida-kahlo .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-book-frida-kahlo .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-book-frida-kahlo .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-book-frida-kahlo .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-book-frida-kahlo .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-book-frida-kahlo .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-book-frida-kahlo .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-book-frida-kahlo .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-book-frida-kahlo .src-text p, .page-source.pg-book-frida-kahlo .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-set-design .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-set-design .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-set-design .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-set-design .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-set-design .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-set-design .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-set-design .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-set-design .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-set-design .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-set-design .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-set-design .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-set-design .src-case { max-width: 800px; }
.page-source.pg-set-design .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-set-design .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-set-design .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-set-design .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-set-design .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-set-design .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-set-design .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-set-design .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-set-design .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-set-design .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-set-design .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-set-design .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-set-design .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-set-design .src-text p, .page-source.pg-set-design .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-art-direction-instyle .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-art-direction-instyle .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-art-direction-instyle .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-art-direction-instyle .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-art-direction-instyle .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-art-direction-instyle .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-art-direction-instyle .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-art-direction-instyle .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-art-direction-instyle .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-art-direction-instyle .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-art-direction-instyle .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-art-direction-instyle .src-case { max-width: 800px; }
.page-source.pg-art-direction-instyle .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-art-direction-instyle .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-art-direction-instyle .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-art-direction-instyle .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-art-direction-instyle .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-art-direction-instyle .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-art-direction-instyle .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-art-direction-instyle .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-art-direction-instyle .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-art-direction-instyle .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-art-direction-instyle .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-art-direction-instyle .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-art-direction-instyle .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-art-direction-instyle .src-text p, .page-source.pg-art-direction-instyle .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-la-cucina-italiana .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-la-cucina-italiana .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-la-cucina-italiana .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-la-cucina-italiana .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-la-cucina-italiana .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-la-cucina-italiana .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-la-cucina-italiana .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-la-cucina-italiana .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-la-cucina-italiana .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-la-cucina-italiana .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-la-cucina-italiana .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-la-cucina-italiana .src-case { max-width: 800px; }
.page-source.pg-la-cucina-italiana .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-la-cucina-italiana .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-la-cucina-italiana .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-la-cucina-italiana .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-la-cucina-italiana .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-la-cucina-italiana .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-la-cucina-italiana .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-la-cucina-italiana .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-la-cucina-italiana .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-la-cucina-italiana .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-la-cucina-italiana .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-la-cucina-italiana .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-la-cucina-italiana .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-la-cucina-italiana .src-text p, .page-source.pg-la-cucina-italiana .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-book-day-of-the-dead .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-book-day-of-the-dead .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-book-day-of-the-dead .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-book-day-of-the-dead .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-book-day-of-the-dead .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-book-day-of-the-dead .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-book-day-of-the-dead .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-book-day-of-the-dead .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-book-day-of-the-dead .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-book-day-of-the-dead .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-book-day-of-the-dead .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-book-day-of-the-dead .src-case { max-width: 800px; }
.page-source.pg-book-day-of-the-dead .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-book-day-of-the-dead .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-book-day-of-the-dead .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-book-day-of-the-dead .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-book-day-of-the-dead .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-book-day-of-the-dead .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-book-day-of-the-dead .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-book-day-of-the-dead .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-book-day-of-the-dead .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-book-day-of-the-dead .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-book-day-of-the-dead .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-book-day-of-the-dead .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-book-day-of-the-dead .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-book-day-of-the-dead .src-text p, .page-source.pg-book-day-of-the-dead .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-eyes-animation .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-eyes-animation .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-eyes-animation .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-eyes-animation .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-eyes-animation .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-eyes-animation .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-eyes-animation .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-eyes-animation .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-eyes-animation .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-eyes-animation .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-eyes-animation .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-eyes-animation .src-case { max-width: 800px; }
.page-source.pg-eyes-animation .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-eyes-animation .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-eyes-animation .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-eyes-animation .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-eyes-animation .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-eyes-animation .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-eyes-animation .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-eyes-animation .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-eyes-animation .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-eyes-animation .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-eyes-animation .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-eyes-animation .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-eyes-animation .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-eyes-animation .src-text p, .page-source.pg-eyes-animation .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-pureeros-illustrations .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-pureeros-illustrations .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-pureeros-illustrations .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-pureeros-illustrations .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-pureeros-illustrations .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-pureeros-illustrations .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-pureeros-illustrations .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-pureeros-illustrations .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-pureeros-illustrations .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-pureeros-illustrations .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-pureeros-illustrations .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-pureeros-illustrations .src-case { max-width: 800px; }
.page-source.pg-pureeros-illustrations .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-pureeros-illustrations .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-pureeros-illustrations .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-pureeros-illustrations .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-pureeros-illustrations .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-pureeros-illustrations .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-pureeros-illustrations .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-pureeros-illustrations .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-pureeros-illustrations .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-pureeros-illustrations .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-pureeros-illustrations .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-pureeros-illustrations .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-pureeros-illustrations .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-pureeros-illustrations .src-text p, .page-source.pg-pureeros-illustrations .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-hoopa .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-hoopa .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-hoopa .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-hoopa .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-hoopa .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-hoopa .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-hoopa .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-hoopa .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-hoopa .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-hoopa .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-hoopa .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-hoopa .src-case { max-width: 800px; }
.page-source.pg-hoopa .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-hoopa .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-hoopa .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-hoopa .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-hoopa .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-hoopa .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-hoopa .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-hoopa .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-hoopa .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-hoopa .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-hoopa .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-hoopa .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-hoopa .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-hoopa .src-text p, .page-source.pg-hoopa .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-logos .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-logos .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-logos .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-logos .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-logos .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-logos .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-logos .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-logos .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-logos .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-logos .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-logos .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-logos .src-case { max-width: 800px; }
.page-source.pg-logos .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-logos .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-logos .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-logos .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-logos .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-logos .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-logos .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-logos .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-logos .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-logos .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-logos .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-logos .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-logos .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-logos .src-text p, .page-source.pg-logos .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}
.page-source.pg-shopmessage .src-title { font-family: 'Afacad', sans-serif; }
.page-source.pg-shopmessage .project-source { width: calc(min(100%, var(--max-w, 100%)) * 1.0000); padding-inline: max(0px, calc(16px - (100% - (min(100%, var(--max-w, 100%)) * 1.0000)) / 2)); }
.page-source.pg-shopmessage .src-grid-rows { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-shopmessage .project-source > .src-image:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-shopmessage .project-source > .src-video:not([style*="--w"]) { margin-inline: calc(-1 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); width: calc(100% + 2 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2))); max-width: none; }
.page-source.pg-shopmessage .src-head { max-width: 800px; padding-top: 30px; padding-bottom: 30px; padding-inline: 0%; }
.page-source.pg-shopmessage .src-title { font-size: 30px; letter-spacing: -0.0073em; line-height: 70px; font-weight: 400; color: rgb(17, 17, 17); padding-top: 0px; padding-bottom: 20px; text-align: center; text-transform: none; }
.page-source.pg-shopmessage .src-desc { font-size: 20px; letter-spacing: 0em; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); padding-top: 0px; padding-bottom: 0px; text-align: start; }
.page-source.pg-shopmessage .src-image { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 30px); }
.page-source.pg-shopmessage .src-video { padding-top: var(--pt, 0px); padding-bottom: var(--pb, 0px); }
.page-source.pg-shopmessage .src-text { max-width: 800px; padding-top: var(--pt, 20px); padding-bottom: var(--pb, 40px); padding-inline: max(0px, calc(0% - 1.0000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
.page-source.pg-shopmessage .src-case { max-width: 800px; }
.page-source.pg-shopmessage .src-text p { font-size: 20px; line-height: 28px; font-weight: 400; color: rgb(153, 153, 153); text-align: start; padding-bottom: 20px; }
@media (max-width: 768px) {
  .page-source.pg-shopmessage .src-head { padding-top: 18px; padding-bottom: 18px; padding-inline: 5%; }
  .page-source.pg-shopmessage .src-title { font-size: 22px; letter-spacing: -0.0073em; line-height: 51px; padding-bottom: 14px; }
  .page-source.pg-shopmessage .src-desc { font-size: 17px; letter-spacing: 0em; line-height: 24px; }
  .page-source.pg-shopmessage .src-image { padding-bottom: var(--pb, 18px); }
  .page-source.pg-shopmessage .src-text { padding-top: var(--pt, 14px); padding-bottom: var(--pb, 20px); padding-inline: max(0px, calc(5% - 0.9000 * max(0px, calc(16px - (100vw - (min(100vw, var(--max-w, 100vw)) * 1.0000)) / 2)))); }
  .page-source.pg-shopmessage .src-text p { font-size: 17px; line-height: 24px; padding-bottom: 14px; }
}
@media (max-width: 540px) {
  .page-source.pg-shopmessage .src-head { padding-top: 16px; padding-bottom: 16px; }
  .page-source.pg-shopmessage .src-title { font-size: 19px; letter-spacing: -0.0073em; line-height: 44px; padding-bottom: 13px; }
  .page-source.pg-shopmessage .src-desc { font-size: 14px; letter-spacing: 0em; line-height: 20px; }
  .page-source.pg-shopmessage .src-image { padding-bottom: var(--pb, 16px); }
  .page-source.pg-shopmessage .src-text { padding-top: var(--pt, 13px); padding-bottom: var(--pb, 18px); }
  .page-source.pg-shopmessage .src-text p { font-size: 14px; line-height: 20px; padding-bottom: 13px; }
  .page-source.pg-shopmessage .src-text p, .page-source.pg-shopmessage .src-text p span { font-size: 14px !important; line-height: 20px !important; }
}