/* antibrand studio look, layered over antibrand.css: the same paper, type and
   periwinkle pigment as Color with Words, so the whole site reads as one place. */
:root {
  --color-bg: #f7f5f0;
  --color-bg-warm: #eeedf8;
  --color-bg-alt: #ecebe6;
  --color-text: #1b1a1f;
  --color-text-muted: #5c5a66;
  --color-text-light: #86848f;
  --color-border: rgba(27, 26, 31, 0.12);
  --color-border-dark: rgba(27, 26, 31, 0.25);
  --color-accent: #555ce0;
  --color-black: #1b1a1f;
  --color-white: #f7f5f0;
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
body { letter-spacing: 0; font-size: 1rem; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.01em; }
.site-header { background: rgba(247, 245, 240, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: transparent; }
.site-header__logo-text { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.site-header__nav a { font-size: 0.875rem; }
.mobile-nav { background: var(--color-bg); }
.site-footer__col-title, .text-upper { font-family: var(--font-mono); font-weight: 400; }
.page-content__title { font-size: clamp(2.5rem, 6vw, 3.5rem); }
.page-content__body h3 { font-size: 1.5rem; }
.page-404__title { font-size: clamp(3rem, 8vw, 5rem); }

.mono { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.btn { min-height: 52px; padding: 0 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 500; border: 1px solid transparent; }
.btn:hover { opacity: 1; }
.btn--dark { background: var(--color-text); color: var(--color-bg); }
.btn--dark:hover { background: #2e2c36; }
.btn--line { background: rgba(247, 245, 240, 0.7); border-color: var(--color-border-dark); }
.btn--line:hover { border-color: var(--color-text); }

/* hero with pigment behind it */
.studio-hero { position: relative; overflow: hidden; min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; }
.studio-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.studio-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 72px 24px 96px; }
.studio-hero h1 { font-size: clamp(4rem, 13vw, 11rem); line-height: 0.88; margin: 22px 0 32px; }
.studio-hero h1 i, .studio h2 i { font-style: italic; }
.studio-hero p { max-width: 30em; font-size: 1.1875rem; color: var(--color-text-muted); }
.studio-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.studio-hero .scroll { position: absolute; left: 24px; bottom: 28px; z-index: 1; }

/* project */
.project-x { padding: 120px 0; }
.project-x__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.reveal { position: relative; display: block; background: #fff; padding: 10px; border-radius: 4px; box-shadow: 0 1px 0 rgba(27, 26, 31, 0.06), 0 24px 48px -28px rgba(27, 26, 31, 0.4); }
.reveal__img { display: block; position: relative; aspect-ratio: 1200 / 806; overflow: hidden; }
.reveal__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal__img .full { clip-path: circle(0% at 60% 55%); transition: clip-path 1.6s cubic-bezier(.6, .05, .3, 1); }
.reveal:hover .full, .reveal.is-on .full { clip-path: circle(85% at 60% 55%); }
.reveal__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-light); }
.project-x h2 { font-size: clamp(3rem, 7vw, 5.25rem); line-height: 0.95; margin: 16px 0 20px; }
.project-x p { color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.7; }
.project-x .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--color-border); }
.facts div { padding: 14px 12px 0 0; }
.facts b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 1.75rem; line-height: 1; }
.facts span { font-size: 0.8125rem; color: var(--color-text-light); }

/* belief */
.belief { padding: 120px 0; background: var(--color-bg-warm); text-align: center; }
.belief p { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.08; max-width: 16em; margin: 0 auto; }
.belief p i { font-style: italic; color: var(--color-accent); }
.belief small { display: block; margin-top: 28px; }

/* write */
.write { padding: 120px 0 104px; text-align: center; }
.write h2 { font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; }
.write p { color: var(--color-text-muted); margin: 18px auto 28px; max-width: 28em; }
.write a.mail { font-family: var(--font-heading); font-size: clamp(1.75rem, 5vw, 3rem); border-bottom: 1px solid var(--color-accent); }
.write a.mail:hover { color: var(--color-accent); opacity: 1; }

@media (max-width: 860px) {
  .studio-hero { min-height: auto; }
  .studio-hero__inner { padding: 56px 20px 88px; }
  .project-x { padding: 72px 0; }
  .project-x__grid { grid-template-columns: 1fr; gap: 32px; }
  .belief, .write { padding: 80px 0; }
}