:root {
  color-scheme: light;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #121316;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --gutter: clamp(24px, 3.65vw, 64px);
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; font: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
p, h1, h2 { margin: 0; }
button, a { outline-offset: 6px; }
:focus-visible { outline: 2px solid #2c5b9b; border-radius: 2px; }
button[aria-disabled="true"] { cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 24px; z-index: 20; padding: 12px 18px; background: #fff; }
.skip-link:focus { top: 12px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: .76em; height: .76em; flex: none; vertical-align: -.03em; overflow: visible; }
.hero { min-height: 100svh; padding: 32px var(--gutter) 44px; display: flex; flex-direction: column; max-width: 2200px; margin: 0 auto; overflow-x: clip; }
.masthead { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; position: relative; z-index: 3; font-size: 14px; line-height: 1.4; }
.identity { font-size: 18px; letter-spacing: -.025em; justify-self: start; display: flex; align-items: center; min-height: 44px; }
.primary-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 3vw, 48px); }
.primary-nav a, .primary-nav button, .header-contact { display: flex; align-items: center; min-height: 44px; min-width: 44px; }
.header-contact { justify-self: end; gap: .4em; }
.primary-nav a:hover, .primary-nav button:hover, .header-contact:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-main { margin-top: auto; padding-top: clamp(40px, 10svh, 120px); }
.art-composition { position: relative; }
.prelude { position: absolute; left: 30%; top: -2%; z-index: 1; font-size: 14px; line-height: 1.25; }
.wordmark-stage { position: relative; margin-inline: calc(var(--gutter) * -.36); aspect-ratio: 3.2; isolation: isolate; }
.chrome-art { position: absolute; inset: 0; }
.wordmark-image, .chrome-canvas { display: block; width: 100%; height: 100%; }
.wordmark-image { object-fit: fill; }
.chrome-canvas { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.chrome-art.is-live .chrome-canvas { opacity: 1; }
.chrome-art.is-live .wordmark-image { opacity: 0; }
.keychain-anchor { position: absolute; left: 95.7%; top: 74.8%; width: clamp(14px, 1.65vw, 27px); height: 24px; transform: translate(-50%, -50%); z-index: 2; --charm-size: clamp(70px, 8vw, 144px); --chain-length: clamp(26px, 3vw, 48px); }
.attachment-ring { display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; }
.pendulum { position: absolute; left: 50%; top: 76%; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.chain { position: absolute; top: -2px; left: -5px; width: 10px; height: var(--chain-length); pointer-events: none; }
.computer-charm { width: var(--charm-size); height: var(--charm-size); position: absolute; top: calc(var(--chain-length) - var(--charm-size) * .145); left: calc(var(--charm-size) * -.55); transform-origin: 55% 15%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.computer-charm img { width: 100%; height: 100%; pointer-events: none; display: block; }
.computer-charm:active { cursor: grabbing; }
.computer-charm:focus-visible { outline-offset: 0; border-radius: 16px; }
.charm-hint { position: absolute; right: 20px; top: calc(var(--chain-length) + var(--charm-size) * .8); font-size: 13px; white-space: nowrap; opacity: 0; transition: opacity 180ms; pointer-events: none; }
.keychain-anchor:focus-within .charm-hint, .keychain-anchor:hover .charm-hint { opacity: 1; }
.hero-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(58px, 8svh, 100px); font-size: 15px; line-height: 1.4; }
/* Chrome-star bullets; the founder row points at mary's site. */
.roles { list-style: none; margin: 0; padding: 0; scroll-margin-top: 40px; }
.roles:focus-visible { outline: 2px solid #2c5b9b; outline-offset: 8px; }
.roles li, .work-roles li { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .45em; }
.roles li + li, .work-roles li + li { margin-top: .3em; }
.star { width: 1.18em; height: auto; flex: none; margin-left: -.12em; position: relative; top: -.03em; }
.founder-arrow { width: 1.6em; height: .62em; flex: none; margin-left: .05em; overflow: visible; }
.founder-arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.company-link { margin-left: .05em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: #12131659; transition: text-decoration-color 180ms; }
.company-link:hover, .company-link:focus-visible { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .founder-arrow path { animation: draw-arrow 900ms cubic-bezier(.65,0,.35,1) 700ms both; }
  .company-link { animation: link-in 600ms cubic-bezier(.2,.7,.2,1) 1300ms both; }
}
@keyframes draw-arrow { from { stroke-dashoffset: 1; } }
@keyframes link-in { from { opacity: 0; } }
/* Icon centres line up with the Founder row beside them. */
.socials { display: flex; gap: 11px; margin-bottom: calc(.7em - 22px); }
.social-link { width: 44px; height: 44px; display: grid; place-items: center; transition: transform 180ms; }
.social-icon { width: 39px; height: 39px; display: block; background: url('/assets/socials.webp') no-repeat; background-size: 500% auto; }
.social-link:hover, .social-link:focus-visible { transform: translateY(-3px); }
.notice { border: 0; background: #fff; padding: 40px; max-width: min(440px, calc(100% - 40px)); color: #121316; box-shadow: 0 20px 100px #0002; overscroll-behavior: contain; }
.notice::backdrop { background: #0003; }
.notice h2 { font-size: 24px; font-weight: 400; margin-bottom: 18px; padding-right: 20px; letter-spacing: -.025em; }
.notice-copy { font-size: 16px; line-height: 1.6; }
.notice-close { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; font-size: 28px; }
.notice-done { display: block; margin-top: 22px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
/* Selected work. Same quiet system as the hero: white ground, near-black
   Helvetica, small grey labels, clay-star bullets. */
.work { max-width: 2200px; margin: 0 auto; padding: clamp(96px, 11vw, 176px) var(--gutter) clamp(88px, 9vw, 150px); }
.work + .work { padding-top: clamp(24px, 3vw, 40px); }
.work-head { display: grid; grid-template-columns: 1fr minmax(320px, 34em); grid-template-areas: "title body"; column-gap: 6%; align-items: end; padding-top: clamp(48px, 6.5vw, 100px); border-top: 1px solid #e3e4e6; }
/* Helvetica Neue Light: lighter and more refined at display size, not Thin. */
.work-title { grid-area: title; font-size: clamp(64px, 11vw, 176px); font-weight: 300; line-height: .82; letter-spacing: -.045em; margin-left: -.04em; }
.work-title.is-long { font-size: clamp(56px, 8.6vw, 140px); }
.work-body { grid-area: body; font-size: 17px; line-height: 1.5; }
.work-lede + .work-lede { margin-top: .8em; color: #55585d; }
.work-roles { list-style: none; margin: 1.6em 0 0; padding: 0; font-size: 15px; line-height: 1.4; }
.work-link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin-top: .9em; margin-left: 0; font-size: 15px; }
.carousel { margin-top: clamp(48px, 7vw, 104px); }
.carousel-track { display: flex; gap: clamp(12px, 1.4vw, 24px); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); list-style: none; scrollbar-width: none; position: relative; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline-offset: 4px; }
.slide { flex: 0 0 auto; width: clamp(300px, 44vw, 860px); scroll-snap-align: start; }
.slide figure { margin: 0; }
.slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 14px; background: #f1f1f3; box-shadow: 0 0 0 1px #0000000d; user-select: none; -webkit-user-drag: none; }
.slide figcaption { margin-top: 14px; font-size: 14px; line-height: 1.4; color: #6b6e73; }
.slide figcaption span { color: #121316; }
.carousel-controls { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(24px, 3vw, 40px); }
.carousel-count { font-size: 14px; color: #6b6e73; font-variant-numeric: tabular-nums; }
.carousel-count span { color: #121316; }
.carousel-buttons { display: flex; gap: 10px; }
.carousel-buttons button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #d9dadd; border-radius: 50%; transition: background-color 180ms, opacity 180ms; }
.carousel-buttons button:hover:not(:disabled) { background: #f3f3f5; }
.carousel-buttons button:disabled { opacity: .3; cursor: default; }
.carousel-buttons svg { width: 16px; height: 12px; }
@media (pointer: coarse) {
  .charm-hint { display: none; }
}
@media (min-width: 1800px) { .hero { padding-top: 44px; padding-bottom: 50px; } .hero-info { font-size: 17px; } }
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .hero { padding: max(34px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); min-height: 100svh; }
  .masthead { grid-template-columns: 1fr auto; font-size: 16px; }
  .identity { font-size: 17px; }
  .header-contact { display: none; }
  .primary-nav { grid-column: 1 / -1; justify-content: flex-start; gap: 36px; margin-top: 26px; }
  .hero-main { margin-top: 0; padding-top: calc(clamp(30px, 5.2svh, 60px) + 16px); }
  .prelude { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.35; }
  /* 2.65 matches the letter proportions of the approved mobile comp (the
     artwork alone is 3.16:1). Nearly edge to edge, with a little room on the
     right for the charm to swing. */
  .wordmark-stage { aspect-ratio: 2.65; margin-inline: -18px -2px; margin-top: clamp(32px, 5svh, 46px); }
  .keychain-anchor { width: 15px; height: 18px; --charm-size: clamp(48px, 14vw, 76px); --chain-length: 27px; }
  .chain { width: 7px; left: -3.5px; }
  /* Fill a tall phone: spare height is shared above and below the roles, so
     nothing pools at the bottom; on short phones everything simply stacks. */
  .hero-main { flex: 1; display: flex; flex-direction: column; }
  .hero-info { flex: 1; flex-direction: column; align-items: stretch; gap: 0; margin-top: clamp(56px, 8.5svh, 84px); font-size: clamp(17px, 4.6vw, 20px); letter-spacing: -.012em; }
  .roles { margin-block: auto; }
  .roles li + li { margin-top: .38em; }
  .socials { justify-content: space-between; gap: 12px; padding-top: clamp(40px, 6svh, 64px); margin-bottom: 0; }
  .social-link { width: 44px; height: 44px; }
  .social-icon { width: 44px; height: 44px; }
}
@media (max-width: 900px) {
  .work-head { grid-template-columns: 1fr; grid-template-areas: "title" "body"; }
  .work-title { font-size: clamp(64px, 19vw, 120px); margin-bottom: 28px; }
  .work-title.is-long { font-size: clamp(44px, 12.5vw, 84px); }
  .work-body { font-size: 17px; }
  .work-roles { font-size: 17px; letter-spacing: -.012em; }
  .work-roles li + li { margin-top: .38em; }
  .slide { width: calc(100vw - var(--gutter) * 2 - 26px); }
  .slide img { border-radius: 12px; }
}
@media (max-width: 360px) {
  :root { --gutter: 20px; }
  .primary-nav { gap: 30px; }
  .hero-info { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .pendulum { will-change: auto; }
}