/* ==========================================================
   Home page, new design (tiles). Loaded after css/styles.css.
   The old css/home.css is still used by about.html and the
   project pages, so it is left untouched.
   ========================================================== */

:root {
  --ink: #26262b;
  --mute: #6b6b73;
  --soft: #8b8b96;
  --accent: #c9545c;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* labels use DM Sans too: the site uses two fonts only */
  --pad: clamp(20px, 5vw, 64px);
  --gutter: clamp(12px, 3.1vw, 40px);
  --radius: 28px;
}

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

html { scroll-behavior: smooth; }

body.home {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: #fff;
  padding: 8px 14px;
  border-radius: 8px;
}
.skip:focus { left: 12px; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Hero (gradient fades into white) ---------- */
.hero {
  position: relative;
  padding: 18px var(--pad) clamp(72px, 10vw, 130px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, #fff 100%),
    radial-gradient(ellipse at 10% 15%, #f9e1d5 0%, transparent 55%),
    radial-gradient(ellipse at 45% 5%, #f5d6d8 0%, transparent 50%),
    radial-gradient(ellipse at 88% 25%, #f4d9dc 0%, transparent 55%),
    radial-gradient(ellipse at 65% 80%, #eeddea 0%, transparent 55%),
    #fff;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: block;
  width: 56px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 16px;
}

.nav-links > a:not(.connect-btn) {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-links > a:not(.connect-btn):hover { color: var(--accent); }
.nav-links > a { position: relative; }
.nav-links > a.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Connect button: same liquid-glass style and interactions as the
   "Learn More" button on the original site. */
.connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 12px 24px;
  border: 1px solid rgba(155, 176, 206, 0.3);
  border-radius: 30px;
  cursor: pointer;
  font-family: var(--font-body, var(--sans));
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.025em;
  color: var(--ink, #26262b);
  text-decoration: none;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(155, 176, 206, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(155, 176, 206, 0.1);

  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  width: fit-content;
}

.connect-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.connect-btn:hover::before { left: 100%; }

.connect-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
  border-color: var(--brand-blue, #9bb0ce);
  color: var(--brand-blue, #9bb0ce);
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(155, 176, 206, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(155, 176, 206, 0.2);
}

.connect-btn svg { transition: transform 0.3s ease; }
.connect-btn:hover svg { transform: translate(2px, -2px); }

.connect-btn:active {
  transform: translateY(0);
  box-shadow:
    0 6px 20px rgba(155, 176, 206, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(155, 176, 206, 0.1);
}

.hero-copy { padding-top: clamp(96px, 17vw, 230px); }

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.hero-statement {
  max-width: 940px;
  margin: 28px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.25;
}

.hero-now {
  margin: 24px 0 0;
  font-size: 17px;
  color: var(--mute);
}

/* ---------- Work grid ---------- */
.work {
  margin-top: -24px;
  padding: 0 var(--gutter);
}

.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 24px;
  max-width: 1520px;
  margin: 0 auto;
}

.work-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.tile--row { grid-column: 1 / -1; }
.tile--row .tile-media { flex: none; min-height: 0; aspect-ratio: 21 / 8; background: #fff; }
.tile--portkey.tile--row .tile-media { background: #78826a; }
.tile--portkey.tile--row .tile-media > img { object-fit: contain; }
.tile--row:hover .tile-media > img { transform: none; }

.work-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.tile--wide { flex: 1 1 0; }

.tile-media {
  position: relative;
  flex: 1 1 0;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: #f0f0f3;
}

.tile-media::after {            /* hairline edge so white artwork still reads as a tile */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(38, 38, 43, 0.06);
  pointer-events: none;
}

.tile-media > img,
.tile-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tile:hover .tile-media > img { transform: scale(1.03); }

/* Pearl: tall tile on the left, phone video */
.tile--tall .tile-media {
  flex: 1 0 auto;
  min-height: 0;
  aspect-ratio: 11 / 17;
  background: #fff;
}
.tile--tall .tile-media > video {
  object-fit: contain;        /* video keeps its own colours, no tint from the tile */
}

/* Portkey art has rounded corners baked in, hide them with its own colour */
.tile--portkey .tile-media { background: #78826a; }
.tile--speak .tile-media { background: #fff; }
.tile--speak .tile-media > img { object-fit: contain; padding: 8%; box-sizing: border-box; }
.tile--seals .tile-media { background: #e9eff1; }
.tile--portkey.tile--small .tile-media > img { object-fit: contain; }
.tile--nasa .tile-media { position: relative; background: radial-gradient(ellipse at 50% 40%, #16295a 0%, #0b1736 75%); }
.tile--nasa .tile-media::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 11% 14%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 22% 78%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 86% 10%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 91% 72%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 16% 46%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 78% 44%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 53% 8%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 58% 90%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 34% 12%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 70% 86%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 7% 88%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px),radial-gradient(circle at 93% 46%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1.6px); opacity: .8; }
.tile--nasa .tile-media > img { object-fit: contain; padding: 9%; box-sizing: border-box; opacity: 0; position: relative; }
.tile--nasa .nasa-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tile--nasa .nasa-orbit ellipse { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: 280px 170px; transform: rotate(-18deg); }
.tile--nasa.is-in .nasa-orbit ellipse { animation: nasa-draw 6s cubic-bezier(.65,0,.35,1) .3s infinite both; }
.tile--nasa.is-in .tile-media > img { animation: nasa-fade 6s ease .3s infinite both; }
@keyframes nasa-draw { 0%, 4% { stroke-dashoffset: 1; opacity: 1; } 45%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes nasa-fade { 0%, 28% { opacity: 0; } 50%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tile--nasa .nasa-orbit ellipse { stroke-dashoffset: 0; animation: none !important; } .tile--nasa .tile-media > img { opacity: 1; animation: none !important; } }
.tile--nasa:hover .tile-media > img { transform: none; }
.tile--nasa { cursor: default; }

.tile--small .tile-media {
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.tile-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 22px;
}

.tile-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.75vw, 48px);
  line-height: 1.05;
}
.tile--small .tile-title { font-size: clamp(28px, 2.8vw, 36px); }

.tile-date {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--accent);
  white-space: nowrap;
}

.tile-award {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.8;
}

.tile-desc {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--mute);
}


/* arrow badge that appears on hover */
.tile-go {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(38, 38, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tile:hover .tile-go,
.tile:focus-visible .tile-go { opacity: 1; transform: none; }
@media (hover: none) { .tile-go { opacity: 1; transform: none; } }

/* scroll reveal (only when JS is running) */
.js .tile > * { opacity: 0; }
.js .tile > :nth-child(2) { --i: 1; }
.js .tile > :nth-child(3) { --i: 2; }
.js .tile > :nth-child(4) { --i: 3; }
/* a keyframe (not a transition) so it never fights the hover lift on the media */
.js .tile.is-in > * {
  opacity: 1;
  animation: tile-up .9s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + var(--i, 0) * .09s) backwards;
}
@keyframes tile-up { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: none; } }
/* the words under each tile rise in after the image: title row, then award line, then description */
.js .tile .tile-head, .js .tile .tile-award, .js .tile .tile-desc {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .tile .tile-head  { transition-delay: calc(var(--d, 0s) + 0.22s); }
.js .tile .tile-award { transition-delay: calc(var(--d, 0s) + 0.32s); }
.js .tile .tile-desc  { transition-delay: calc(var(--d, 0s) + 0.42s); }
.js .tile.is-in .tile-head, .js .tile.is-in .tile-award, .js .tile.is-in .tile-desc { opacity: 1; transform: none; }

/* ---------- Footer (gradient mirrors the hero) ---------- */
.site-footer {
  margin-top: clamp(56px, 8vw, 96px);
  padding: 40px 0 56px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 62%),
    radial-gradient(ellipse at 88% 105%, #f9e1d5 0%, transparent 55%),
    radial-gradient(ellipse at 52% 112%, #f5d6d8 0%, transparent 50%),
    radial-gradient(ellipse at 10% 100%, #f4d9dc 0%, transparent 55%),
    #fff;
}

.footer-inner {
  max-width: 1520px;
  margin: 0 auto;
  margin-inline: var(--gutter);
  padding: 40px var(--pad) 28px;
  border-top: 1px solid #eee9e9;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  padding-bottom: 72px;
}
.footer-contact { width: 340px; flex: none; }
.footer-sig { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; }
.sig { position: relative; display: inline-block; font-size: 14px; color: #9ca3af; cursor: pointer; transition: color .3s ease, transform .3s ease; }
.sig:hover, .sig:focus-visible { color: var(--accent); transform: translateY(-2px); outline: none; }
.sig-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all .3s ease; margin-bottom: 0; }
.sig:hover .sig-tip, .sig:focus-visible .sig-tip { opacity: 1; visibility: visible; margin-bottom: 8px; }
@media (min-width: 1600px) {
  .footer-inner { margin-inline: auto; }
}

.footer-brand { display: flex; align-items: center; gap: 20px; }
.footer-brand img { display: block; width: 60px; height: auto; }
.footer-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1;
}

.footer-local {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 17px;
  color: var(--soft);
}
.footer-local svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.footer-note { margin: 0; font-size: 19px; line-height: 1.4; color: var(--soft); }
.footer-email {
  display: inline-block;
  margin-top: 6px;
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-email:hover { color: var(--accent); }

.footer-links { display: flex; gap: 18px; margin-top: 18px; }
.footer-links a { color: #c3c6d4; transition: color 0.25s ease, transform 0.25s ease; }
.footer-links a:hover { color: var(--accent); transform: translateY(-2px); }
.footer-links svg { display: block; width: 32px; height: 32px; fill: currentColor; }
.footer-links svg.stroke { fill: none; stroke: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .work-grid { grid-template-columns: 1fr; gap: 24px; }
  .work-col { display: contents; }
  /* one column: arycs, nasa, pearl, sensemaking, speakeasy, portkey */
  .tile--arycs { order: 1; }
  .tile--nasa { order: 2; }
  .tile--pearl { order: 3; }
  .tile--seals { order: 4; }
  .tile--speak { order: 5; }
  .tile--portkey { order: 6; }
  .tile--tall .tile-media { aspect-ratio: 4 / 5; }
  .footer-inner { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .nav-links { gap: 16px; font-size: 15px; }
  .connect-btn { padding: 10px 20px; font-size: 0.875rem; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-contact { width: auto; }
}

@media (max-width: 480px) {
  .connect-btn { padding: 8px 16px; font-size: 0.8125rem; gap: 0.375rem; }
  .connect-btn svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .tile > * { opacity: 1; transform: none; transition: none; animation: none !important; }
  .js .tile .tile-head, .js .tile .tile-award, .js .tile .tile-desc { opacity: 1; transform: none; transition: none; }
  .tile-media > img, .tile-media > video { transition: none; }
  .tile:hover .tile-media > img { transform: none; }
  .connect-btn, .connect-btn::before, .connect-btn svg { transition: none; }
}

[hidden] { display: none !important; }
.footer-inner { padding-left: 0; padding-right: 0; }

html { scroll-behavior: smooth; }
#work { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Arycs tile: navy background, swoosh draws, A slides left, word follows (plays once when scrolled to, replays on re-entry) */
.tile--arycs .tile-media { background: #1b2340; }
.arycs-logo { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1400 / 598; transform: translate(-50%, -50%); }
.arycs-logo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; padding: 0; }
.arycs-logo .al, .arycs-logo .at { filter: brightness(0) invert(1); }
.arycs-logo .a-big { clip-path: inset(0 67.8% 0 0); }
.arycs-logo .a-coral { clip-path: inset(0 67.8% 0 0); }
.arycs-logo .at { }
@keyframes ar-a { 0%{opacity:0;transform:translateX(33.9%)} 6%,34%{opacity:1;transform:translateX(33.9%)} 52%,84%{opacity:1;transform:none} }
@keyframes ar-coral { 0%,8%{opacity:1;clip-path:inset(0 100% 0 0);transform:translateX(33.9%)} 30%{opacity:1;clip-path:inset(0 67.8% 0 0);transform:translateX(33.9%)} 34%{clip-path:inset(0 67.8% 0 0);transform:translateX(33.9%)} 52%,84%{opacity:1;clip-path:inset(0 67.8% 0 0);transform:none} }
@keyframes ar-t { 0%,62%{opacity:0} 72%,84%{opacity:1} }
.arycs-logo .ar { clip-path: inset(0 54.93% 0 32.21%); }
@keyframes ar-r { 0%,40%{opacity:0;transform:translateX(-4%)} 49%,84%{opacity:1;transform:none} }
.arycs-logo .ay { clip-path: inset(0 35.14% 0 45.07%); }
@keyframes ar-y { 0%,45%{opacity:0;transform:translateX(-4%)} 54%,84%{opacity:1;transform:none} }
.arycs-logo .ac { clip-path: inset(0 16.14% 0 64.86%); }
@keyframes ar-c { 0%,50%{opacity:0;transform:translateX(-4%)} 59%,84%{opacity:1;transform:none} }
.arycs-logo .as { clip-path: inset(0 0% 0 83.86%); }
@keyframes ar-s { 0%,55%{opacity:0;transform:translateX(-4%)} 64%,84%{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce) {
  .arycs-logo img { animation: none !important; opacity: 1 !important; transform: none !important; }
  .arycs-logo .a-coral { clip-path: inset(0 67.8% 0 0) !important; }
}

.tile--arycs .arycs-logo .a-big { animation: ar-a 6s cubic-bezier(.65,0,.35,1) both infinite; }
.tile--arycs .arycs-logo .a-coral { animation: ar-coral 6s cubic-bezier(.65,0,.35,1) both infinite; }
.tile--arycs .arycs-logo .at { animation: ar-t 6s ease both infinite; }
.tile--arycs .arycs-logo .ar { animation: ar-r 6s ease-out both infinite; }
.tile--arycs .arycs-logo .ay { animation: ar-y 6s ease-out both infinite; }
.tile--arycs .arycs-logo .ac { animation: ar-c 6s ease-out both infinite; }
.tile--arycs .arycs-logo .as { animation: ar-s 6s ease-out both infinite; }

/* Pearl + SpeakEasy media sit a little smaller inside their tiles */
.tile--tall .tile-media > video { padding: 7%; box-sizing: border-box; }
.tile--speak .tile-media > video { object-fit: contain; }

/* less empty space under the signature line */
.site-footer { padding-bottom: 14px; }

/* home: the nav stays pinned while scrolling; clear over the gradient at the top, frosted white once scrolled (same as the other pages) */
.hero { padding-top: calc(18px + 56px); }
body.home .hero > .nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px var(--pad);
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease;
}
/* over the header: a soft blush glass that blends into the gradient */
body.home .hero > .nav.is-scrolled {
  background: rgba(249, 228, 226, .55);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
body.home .hero > .nav.is-stuck {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: #f0ecec;
}