/* Shared typography and spacing. Keep artwork and mockup geometry untouched. */
:root {
  --text-body: 1rem;
  --text-small: .875rem;
  --text-label: .75rem;
}
.shell,.site-header { width:min(1440px,calc(100% - 96px)); }
.site-header { gap:24px; padding-block:20px; }
.site-nav a,.availability-pill { font-size:var(--text-small); }
.site-nav a,.header-cta { font-family:'Manrope','Instrument Sans',sans-serif; font-weight:600; }
.site-nav a,.wordmark,.availability-pill,.site-footer a {
  display:inline-flex; align-items:center; min-height:44px;
}
.editorial-hero-top { font-size:.875rem; font-weight:600; line-height:1.6; letter-spacing:.07em; }
:is(p,blockquote,li,figcaption) { text-wrap:pretty; }
:is(h1,h2,h3) { text-wrap:balance; }
.hero .editorial-name {
  align-items:center; font-size:clamp(80px,12.8vw,184px);
  padding:40px 0 48px; gap:clamp(14px,1.6vw,24px);
}
.hero .editorial-name__portrait {
  width:clamp(150px,1.65em,304px);
  height:clamp(76px,.9em,166px);
  border-radius:999px;
  transform:rotate(-3deg);
}
.hero .editorial-name__portrait img {
  object-position:50% 18%;
  transform:none;
}
.editorial-hero-bottom { grid-template-columns:minmax(0,.75fr) minmax(0,1.8fr); align-items:center; gap:64px; padding-block:72px; }
.editorial-index { align-self:start; font-size:var(--text-label); gap:40px; }
.editorial-index a { font-size:var(--text-small); min-height:44px; }
.editorial-intro h2 { font-size:clamp(26px,2.4vw,36px); line-height:1.35; letter-spacing:-.035em; max-width:30ch; text-wrap:balance; }
.editorial-intro p,.about-copy>p:not(.eyebrow),.contact-intro {
  font-size:var(--text-body); line-height:1.75; max-width:62ch;
}
.editorial-intro p { margin-top:24px; }
.hero { padding-bottom:0; }
.projects-section { padding-top:0; }
.section-heading { gap:40px; padding-top:32px; margin-bottom:32px; }
.section-heading h2,.about-copy h2,.contact h2 {
  font-family:var(--display); font-size:clamp(32px,3.4vw,48px);
  font-style:normal; font-weight:500; line-height:1.2; letter-spacing:-.04em; text-wrap:balance; overflow-wrap:break-word;
}
.section-intro { font-size:var(--text-body); line-height:1.7; max-width:38ch; }
.eyebrow,.section-heading .eyebrow,.about-meta .eyebrow {
  font-size:var(--text-label); line-height:1.5; letter-spacing:.1em; margin-bottom:16px;
}
.project-cards { gap:48px 24px; }
.work-tile__caption { gap:16px; padding-top:20px; }
.work-tile__caption>span:last-child { min-width:0; }
.work-tile__number { font-size:var(--text-label); flex-shrink:0; }
.work-tile__title { font-size:clamp(24px,2.2vw,32px); line-height:1.3; letter-spacing:-.035em; }
.work-tile__discipline { font-size:var(--text-small); line-height:1.6; margin-top:8px; }
.work-status { font-size:var(--text-label); line-height:1.5; }
.about { margin-top:80px; padding-block:56px 80px; gap:clamp(48px,7vw,104px); grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); align-items:start; }
.about-heading h2 { max-width:17ch; }
.about-content { min-width:0; }
.about-story { max-width:720px; }
.about-story p { font-size:var(--text-body); line-height:1.75; }
.about-story p+p { margin-top:22px; }
.about-profile { margin-top:40px; border-block:1px solid var(--line); }
.about-profile__row { display:grid; grid-template-columns:120px minmax(0,1fr); gap:24px; padding-block:20px; align-items:start; }
.about-profile__row+.about-profile__row { border-top:1px solid var(--line); }
.about-profile__row .eyebrow { margin:1px 0 0; }
.about-profile__row>div { display:flex; flex-wrap:wrap; gap:8px 12px; }
.about-profile__row span { display:inline-flex; align-items:center; min-height:34px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:var(--text-small); line-height:1.45; }
.references { padding-block:64px 88px; border-top:1px solid var(--line); }
.references-heading { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr); gap:48px; align-items:end; margin-bottom:36px; }
.references-heading h2 { max-width:18ch; font-family:var(--display); font-size:clamp(36px,4vw,58px); font-weight:500; line-height:1.18; letter-spacing:-.05em; color:var(--heading); }
.references-heading>p { max-width:36ch; color:var(--muted); font-size:var(--text-body); line-height:1.7; }
.references-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.reference-card { min-height:280px; padding:32px; border:1px solid var(--line); border-radius:6px; background:var(--panel); display:flex; flex-direction:column; }
.reference-card__mark { color:var(--accent); font-family:Georgia,serif; font-size:64px; line-height:.7; }
.reference-card blockquote { margin:28px 0 36px; color:var(--heading); font-family:var(--display); font-size:clamp(22px,2vw,30px); font-weight:500; line-height:1.4; letter-spacing:-.035em; }
.reference-card footer { margin-top:auto; display:flex; flex-direction:column; gap:4px; }
.reference-card footer strong { color:var(--ink); font-size:var(--text-small); font-weight:600; }
.reference-card footer span { color:var(--muted); font-size:var(--text-label); }
.reference-card.is-placeholder { border-style:dashed; background:transparent; opacity:.58; }
.contact { padding:40px; gap:48px; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.contact h2 { max-width:24ch; }
.contact-intro { margin-top:24px; }
.contact-links a { gap:8px 16px; padding-block:24px; }
.contact-links a>span { font-size:var(--text-small); }
.contact-links strong { font-size:clamp(20px,2vw,28px); line-height:1.4; }
.site-footer { gap:24px; align-items:center; font-size:var(--text-label); padding-block:24px; }
.project-modal { max-height:90dvh; overscroll-behavior:contain; }
.project-modal__header { gap:20px; padding:16px 32px; }
.project-modal__header>div { min-width:0; }
.project-modal__header span { display:block; font-size:var(--text-label); line-height:1.5; margin-bottom:4px; }
.project-modal__header strong { font-size:22px; line-height:1.3; }
.project-modal__header button { flex:0 0 44px; }
.project-modal__body { padding:32px; }
.project-modal__intro { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; margin-bottom:40px; }
.project-modal__lead { font-size:var(--text-body); line-height:1.75; max-width:65ch; }
.project-modal__intro ul { font-size:var(--text-small); line-height:1.7; }
.project-narrative { margin-bottom:48px; }
.project-narrative__item { min-width:0; }
.project-narrative__item>p { font-size:var(--text-label); line-height:1.5; letter-spacing:.08em; }
.project-narrative__item>span { font-size:var(--text-small); line-height:1.75; }
.work-gallery figcaption,.art-case-hero figcaption,.project-presentations figcaption,
.koja-business-cards-return figcaption { font-size:var(--text-small); line-height:1.6; margin-top:12px; }
.client-case__header { grid-template-columns:32px minmax(0,.8fr) minmax(0,1.2fr); gap:24px; margin-inline:0; }
.client-case__header>span,.client-case__header div>p { font-size:var(--text-label); line-height:1.6; }
.client-case__header h3,.client-case--meta .client-case__header h3 { font-size:clamp(30px,3.3vw,46px); line-height:1.15; letter-spacing:-.04em; overflow-wrap:break-word; }
.client-case__header>p,.koja-output-heading>p:last-child { font-size:var(--text-body); line-height:1.75; }
.client-template { overflow:visible; margin-bottom:40px; }
.client-template figcaption { top:100%; bottom:auto; left:0; right:0; margin-top:12px; }
.client-template figcaption,.meta-campaign figcaption {
  padding:0; border:0; border-radius:0; background:none; color:var(--muted);
  font-size:var(--text-small); font-weight:400; line-height:1.6; letter-spacing:0; backdrop-filter:none; max-width:none;
}
.meta-campaign figcaption { position:static; margin-top:24px; color:#554943; }
.meta-campaign { padding-bottom:32px; }
.meta-campaign__card small { font-size:var(--text-label); line-height:1.5; letter-spacing:0; text-transform:none; }
.koja-output-heading { grid-template-columns:minmax(0,.6fr) minmax(0,1fr) minmax(0,1fr); gap:24px; }
.koja-output-heading h3 { font-size:clamp(28px,3vw,40px); line-height:1.2; }
.koja-citylight-scene figcaption,.koja-social-scene figcaption { top:100%; bottom:auto; margin-top:12px; font-size:var(--text-small); line-height:1.6; }
.project-modal__footer-close { min-height:48px; font-size:var(--text-small); }
@media(max-width:1000px) {
  .shell,.site-header { width:calc(100% - 48px); }
  .header-actions:has(.availability-pill) { display:none; }
  .editorial-hero-bottom,.about,.contact { gap:32px; }
  .about { grid-template-columns:1fr; }
  .about-heading h2 { max-width:22ch; }
  .about-story { max-width:72ch; }
  .contact { padding:32px; }
}
@media(max-width:760px) {
  .shell,.site-header { width:calc(100% - 40px); }
  .site-header { flex-wrap:nowrap; gap:16px; padding-block:16px; }
  .site-nav { gap:20px; margin-left:auto; }
  .site-nav a { font-size:var(--text-small); }
  .hero { padding-top:24px; padding-bottom:0; }
  .editorial-hero-top { flex-wrap:wrap; gap:8px 20px; font-size:var(--text-label); }
  .editorial-hero-top span:last-child { max-width:none; text-align:left; }
  .hero .editorial-name { flex-wrap:wrap; justify-content:flex-start; font-size:22vw; white-space:normal; line-height:1.12; padding:32px 0; gap:12px 20px; }
  .hero .editorial-name__portrait { width:1.6em; height:.88em; }
  .hero .editorial-name em { flex-basis:100%; padding:0; text-align:right; }
  .editorial-hero-bottom { grid-template-columns:minmax(0,1fr); gap:24px; padding-block:48px; }
  .editorial-index { flex-direction:row; align-items:center; justify-content:space-between; gap:16px; }
  .editorial-intro h2 { font-size:26px; }
  .projects-section { padding-top:0; }
  .section-heading { display:block; padding-top:24px; margin-bottom:28px; }
  .section-intro { margin-top:20px; max-width:60ch; }
  .section-heading h2,.about-heading h2,.contact h2 { font-size:32px; }
  .project-cards { gap:36px; }
  .work-tile__title { font-size:26px; }
  .work-tile__open { width:44px; height:44px; }
  .about { margin-top:56px; padding-block:32px 56px; }
  .about-profile { margin-top:32px; }
  .about-profile__row { grid-template-columns:1fr; gap:12px; }
  .references { padding-block:48px 64px; }
  .references-heading,.references-grid { grid-template-columns:1fr; }
  .references-heading { gap:20px; margin-bottom:28px; }
  .reference-card { min-height:230px; padding:24px; }
  .contact { grid-template-columns:minmax(0,1fr); padding:28px 24px; gap:24px; }
  .contact-links strong { font-size:22px; }
  .site-footer { flex-wrap:wrap; gap:8px 20px; }
  .project-modal { width:calc(100% - 24px); max-height:94dvh; border-radius:8px; }
  .project-modal__header { padding:16px 20px; gap:12px; }
  .project-modal__header strong { font-size:20px; }
  .project-modal__body { padding:24px 20px; }
  .project-modal__intro { grid-template-columns:1fr; gap:24px; margin-bottom:32px; }
  .project-narrative { grid-template-columns:1fr; margin-bottom:32px; }
  .project-narrative__item { padding:20px 0; }
  .project-narrative__item+.project-narrative__item { border-left:0; border-top:1px solid var(--line); padding:20px 0; }
  .client-case__header { grid-template-columns:1fr; gap:12px; margin-bottom:24px; }
  .client-case__header>span { padding:0; }
  .client-template { width:100%; margin-left:0; margin-bottom:64px; }
  .client-template figcaption { left:0; right:0; bottom:auto; padding:0; max-width:none; font-size:var(--text-small); }
  .client-work-showcase { gap:48px; margin-top:40px; }
  .meta-campaign { padding:20px; }
  .meta-campaign__grid { grid-template-columns:1fr; gap:24px; }
  .meta-campaign__card--3 { grid-column:auto; width:100%; }
  .koja-output-heading { grid-template-columns:1fr; gap:16px; }
  .koja-citylight-scene,.koja-social-scene { margin-bottom:88px; }
}
@media(max-width:360px) {
  .site-nav { gap:12px; }
  .about-meta { grid-template-columns:1fr; }
  .contact { padding:24px 20px; }
  .contact-links strong { font-size:20px; }
  .section-heading h2,.about-copy h2,.contact h2 { font-size:28px; }
}

/* Primary contact action in the header. */
.header-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 18px; border:1px solid transparent; border-radius:999px; background:var(--accent); color:var(--bg); font-size:14px; font-weight:600; line-height:1.5; white-space:nowrap; }
.header-cta:hover { background:var(--ink); }
.header-cta:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.header-cta span { font-size:18px; line-height:1; }
/* Sticky header: the navigation moves from left to centre on scroll. */
.site-header { position:sticky; top:0; z-index:20; height:85px; display:flex; padding-block:20px; isolation:isolate; }
.site-header::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:-1; background:var(--bg); opacity:0; transition:opacity .3s ease; }
.site-header.is-scrolled::before { opacity:1; background:rgb(38 13 23 / 90%); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.site-header .site-nav { position:absolute; left:0; top:20px; margin:0; transform:translateX(0); transition:left .4s ease,transform .4s ease; }
.site-header.is-scrolled .site-nav { left:50%; transform:translateX(-50%); }
.site-header .header-actions { margin-left:auto; }
.header-menu-panel { display:contents; }
.mobile-menu-toggle { display:none; }
.header-portrait { display:block; width:44px; height:44px; flex-shrink:0; border-radius:50%; opacity:0; visibility:hidden; transform:translateY(8px) scale(.85); transition:opacity .3s ease,transform .3s ease,visibility .3s; }
.header-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 29%; border-radius:50%; }
.site-header.is-scrolled .header-portrait { opacity:1; visibility:visible; transform:translateY(0) scale(1); }

@media(max-width:760px) {
  html { scroll-padding-top:92px; }
  .site-header { height:76px; padding-block:16px; align-items:flex-start; }
  .site-header .header-portrait { display:none; }
  .mobile-menu-toggle {
    position:absolute; top:16px; left:0; z-index:3;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:40px; height:44px; padding:0;
    border:0; border-radius:0;
    background:transparent; color:var(--heading);
  }
  .mobile-menu-toggle span { display:block; width:22px; height:2.5px; border-radius:999px; background:currentColor; transition:transform .25s ease,opacity .2s ease; }
  .site-header.is-menu-open .mobile-menu-toggle span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
  .site-header.is-menu-open .mobile-menu-toggle span:nth-child(2) { opacity:0; }
  .site-header.is-menu-open .mobile-menu-toggle span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
  .header-menu-panel {
    position:absolute; top:70px; left:0; right:0; z-index:2;
    display:flex; flex-direction:column;
    padding:24px;
    border:1px solid var(--line); border-radius:28px;
    background:rgb(48 19 31 / 97%);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 22px 50px #10060c66;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .site-header.is-menu-open .header-menu-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .site-header .site-nav,
  .site-header.is-scrolled .site-nav {
    position:static; display:flex; flex-direction:column; align-items:stretch; gap:0;
    width:100%; transform:none;
  }
  .site-header .site-nav a {
    width:100%; min-height:52px; justify-content:space-between;
    border-bottom:1px solid var(--line); font-size:16px;
  }
  .site-header .header-actions { position:absolute; top:16px; left:52px; z-index:3; width:auto; margin:0; }
  .site-header .header-cta { width:auto; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header .site-nav,.header-portrait,.site-header::before,.mobile-menu-toggle span,.header-menu-panel { transition:none; }
}

/* Consistent labels for the four main sections. */
.about-copy .eyebrow::before,.contact .eyebrow::before { content:none; }
.editorial-index>span,.section-heading .eyebrow,.about-copy>.eyebrow,.contact>div>.eyebrow {
  font-size:var(--text-label); font-weight:600; line-height:1.5; letter-spacing:.1em; color:var(--muted); text-transform:uppercase;
}
.editorial-index>span { white-space:nowrap; }

/* Project captions: name, discipline and known creation year. */
.work-tile__caption { display:block; }
.work-tile__discipline { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.work-tile__year { white-space:nowrap; font-variant-numeric:tabular-nums; }
.work-tile__year::before { content:"·"; margin-right:12px; }