/* =========================================================================
   NAEMO — findingnaemo.com
   Palette and type are lifted directly from the pitch deck:
   #E2DFD2 cream / #000000 ink / #303A31 pine, set in Roboto Mono + Inter.
   ========================================================================= */

:root{
  --cream:  #E2DFD2;   /* deck beige — the dominant surface */
  --ink:    #000000;
  --pine:   #303A31;   /* deck table green */
  --vermil: #8F3733;   /* packaging red */
  --indigo: #253179;   /* packaging blue */

  --cream-60: rgba(226,223,210,.60);
  --cream-45: rgba(226,223,210,.45);
  --cream-34: rgba(226,223,210,.34);
  --ink-12:   rgba(0,0,0,.12);
  --ink-60:   rgba(0,0,0,.60);

  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }
h1,h2,h3{ margin:0; font-weight:700 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit }

::selection{ background:var(--vermil); color:var(--cream) }

:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:3px;
}
.ticker__track:focus-visible,
.site-footer :focus-visible,
.insights :focus-visible,
.team :focus-visible{ outline-color:var(--cream) }

.wrap{
  width:100%;
  max-width:78rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:.5rem; top:-4rem; z-index:100;
  background:var(--ink); color:var(--cream);
  padding:.75rem 1rem; font-family:var(--mono); font-size:.8125rem;
  text-decoration:none; transition:top .15s;
}
.skip:focus{ top:.5rem }

/* ---------- shared type devices lifted from the deck ---------- */

.pill{
  display:inline-block;
  border:1px solid currentColor;
  border-radius:999px;
  padding:.5em 1.15em;
  font-family:var(--mono);
  font-weight:500;
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
}
.pill--light{ color:var(--cream) }

.section-title{
  font-family:var(--mono);
  font-size:clamp(1.375rem, 3.1vw, 2.375rem);
  line-height:1.25;
  letter-spacing:.01em;
  margin-top:1.75rem;
  max-width:24ch;
}
.section-title--light{ color:var(--cream) }

.btn{
  display:inline-block;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--mono);
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.15rem 2.25rem;
  border:1px solid var(--ink);
  cursor:pointer;
  transition:background .16s, color .16s;
}
.btn:hover{ background:var(--pine); border-color:var(--pine) }

/* ============================ HEADER ============================ */

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--ink-12);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:4rem;
}
.wordmark{
  font-family:var(--mono); font-weight:700;
  font-size:1.125rem; letter-spacing:.16em;
  text-decoration:none;
}
.site-nav{ display:flex; gap:clamp(1.25rem,3vw,2.5rem) }
.site-nav a{
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding-block:.35rem;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{ border-bottom-color:var(--ink) }
.site-header__cta{
  font-family:var(--mono); font-weight:700; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  background:var(--ink); color:var(--cream);
  padding:.6rem 1.15rem;
}
.site-header__cta:hover{ background:var(--pine) }

/* ============================ HERO ============================ */

.hero{ padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem) }
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero__media img{ width:100% }
.hero__copy{ max-width:34rem }

.hero__title{
  font-family:var(--mono);
  font-size:clamp(3.25rem, 11vw, 8rem);
  line-height:.95;
  letter-spacing:.02em;
}
.hero__kicker{
  font-family:var(--mono);
  font-size:clamp(.875rem,1.6vw,1.0625rem);
  letter-spacing:.1em;
  margin-top:1rem;
}
.hero__lede{
  font-size:clamp(1.0625rem,1.7vw,1.3125rem);
  line-height:1.5;
  margin-top:1.75rem;
  max-width:30ch;
}
.hero .btn{ margin-top:2.25rem }

/* ============================ TICKER ============================ */

.ticker{
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  padding-block:1.05rem;
}
.ticker__track{
  display:flex; width:max-content;
  animation:ticker 42s linear infinite;
}
.ticker__group{ display:flex; align-items:center }
.ticker__group > span{ display:inline-flex; align-items:center; white-space:nowrap }
.ticker__group > span::after{
  content:"\00B7";
  margin-inline:1.6rem;
  color:var(--vermil);
  font-size:1.4em;
  line-height:0;
}
.ticker__group span{
  font-family:var(--mono); font-weight:500;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
@keyframes ticker{ to{ transform:translateX(-50%) } }

/* ============================ INSIGHT ============================ */

.insight{ padding-block:var(--section-y) }
.insight__inner{ display:flex; flex-direction:column; align-items:center; text-align:center }
.insight__quote{ margin:2.25rem 0 0 }
.insight__quote p{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(1.75rem, 5.2vw, 3.5rem);
  line-height:1.14;
  letter-spacing:.005em;
}
.insight__body{
  margin-top:2rem;
  max-width:56ch;
  font-size:clamp(1rem,1.4vw,1.1875rem);
}

/* ============================ KEY INSIGHTS ============================ */

.insights{
  background:var(--ink);
  color:var(--cream);
  padding-block:var(--section-y);
}
.insights__list{ margin-top:2.75rem; display:grid; gap:clamp(.75rem,1.6vw,1.25rem) }
.insights__item{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:baseline;
  gap:clamp(.75rem,2vw,1.5rem);
  color:var(--cream-45);
  transition:color .35s ease;
}
.insights__item.is-active{ color:var(--cream) }
.insights__num{ font-family:var(--mono); font-weight:500; font-size:clamp(1rem,2.4vw,1.75rem) }
.insights__arrow{
  font-family:var(--mono);
  font-size:clamp(1rem,2.4vw,1.75rem);
  transition:color .35s ease;
}
.insights__item.is-active .insights__arrow{ color:var(--vermil) }
.insights__text{
  font-weight:500;
  font-size:clamp(1.125rem,3.2vw,2.125rem);
  line-height:1.25;
}

/* ============================ THE GAMES ============================ */

.games{ padding-block:var(--section-y) }
.game-grid{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
}
.game{
  display:flex; flex-direction:column;
  border:1px solid var(--ink);
  background:var(--cream);
}
.game__img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.game__label{ background:var(--ink); padding:.85rem 1.1rem }
.game__label h3{
  font-family:var(--mono); font-size:.875rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream);
}
.game__body{ padding:1.25rem 1.1rem 1.4rem; display:flex; flex-direction:column; flex:1; gap:1.25rem }
.game__summary{ font-size:.9375rem; line-height:1.55 }
.game__meta{ margin:0; margin-top:auto; display:grid; gap:.45rem }
.game__meta > div{ display:flex; gap:.6rem; align-items:baseline }
.game__meta dt{
  font-family:var(--mono); font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60); flex:none;
}
.game__meta dd{ margin:0; font-size:.875rem; font-weight:500 }

/* ============================ IN THE BOX ============================ */
/* Leader-line captions, echoing deck slides 13–14. */

/* cream follows cream here, so tighten the seam with the games section */
.box{ padding-block:clamp(2rem,4vw,3.5rem) var(--section-y) }
.leader{
  --lead:clamp(2rem,4vw,3.5rem);          /* gap AND connector length — they must match */
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(13rem,20rem) minmax(0,1fr);
  gap:var(--lead);
  align-items:center;
}
.leader__col{ display:flex; flex-direction:column }
.leader__col--left{ align-items:flex-end; text-align:right; gap:clamp(3rem,7vw,6rem) }
.leader__col--right{ align-items:flex-start; gap:var(--lead) }
.leader__col--right .note{ max-width:15rem }   /* match the photo stack above it */
.leader__main img{ width:100% }
.leader__stack{ display:grid; gap:1rem; width:min(15rem,100%) }
.leader__stack img{ width:100%; aspect-ratio:4/3; object-fit:cover }

.note{
  position:relative;
  border:1px solid var(--ink);
  background:var(--cream);
  padding:.7rem .9rem;
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.5;
  max-width:14rem;
}
.note--left::after,
.note--right::after{ content:""; position:absolute }

.note--left::after{                       /* horizontal, dot lands on the box */
  left:100%; top:50%; transform:translateY(-50%);
  width:var(--lead); height:8px;
  background:
    linear-gradient(var(--ink),var(--ink)) left center/100% 1px no-repeat,
    radial-gradient(circle at right center, var(--vermil) 3.5px, transparent 4px);
}
.note--right::after{                      /* vertical, dot lands on the photos above */
  left:2.5rem; bottom:100%;
  width:8px; height:var(--lead);
  background:
    linear-gradient(var(--ink),var(--ink)) center top/1px 100% no-repeat,
    radial-gradient(circle at center top, var(--vermil) 3.5px, transparent 4px);
}

/* ============================ SPLIT PANEL ============================ */

.split{ display:grid; grid-template-columns:1fr 1fr }
.split__half{
  padding:clamp(3.5rem,8vw,7rem) clamp(1.5rem,4vw,3rem);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.split__half--cream{ background:var(--cream); color:var(--ink) }
.split__half--ink{ background:var(--ink); color:var(--cream) }
.split__title{
  font-family:var(--mono);
  font-size:clamp(1.125rem,2.5vw,1.75rem);
  letter-spacing:.12em; text-transform:uppercase;
}
.split__body{
  margin-top:1.75rem;
  max-width:30ch;
  font-size:clamp(1rem,1.5vw,1.1875rem);
  line-height:1.55;
}
.split__tag{
  margin-top:clamp(2rem,4vw,3.5rem);
  font-family:var(--mono); font-weight:700;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.72;
}

/* ============================ TEAM ============================ */

.team{ background:var(--ink); color:var(--cream); padding-block:var(--section-y) }
.team-grid{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem);
}
.member img{ width:100%; aspect-ratio:4/5; object-fit:cover }
.member__name{
  margin-top:1rem;
  font-family:var(--mono); font-weight:500;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.member__bio{ margin-top:.5rem; font-size:.8125rem; color:var(--cream-60); line-height:1.5 }

/* ============================ BUY ============================ */

.buy{ padding-block:var(--section-y) }
.buy__inner{ display:flex; flex-direction:column; align-items:center; text-align:center }
.buy__title{
  margin-top:2rem;
  font-family:var(--mono);
  font-size:clamp(1.75rem,5vw,3.25rem);
  letter-spacing:.08em; text-transform:uppercase;
  line-height:1.15;
}
.buy__price{ color:var(--vermil) }
.buy__lede{ margin-top:1.25rem; font-size:clamp(1rem,1.5vw,1.1875rem); max-width:34ch }

.notify{
  margin-top:2.5rem;
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
  width:min(34rem,100%);
}
.notify__input{
  flex:1 1 14rem;
  min-width:0;
  font-family:var(--sans); font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  padding:1.05rem 1rem;
}
.notify__input::placeholder{ color:var(--ink-60) }
.notify__btn{ flex:0 0 auto }
.notify[hidden]{ display:none }   /* .notify's display:flex would otherwise beat [hidden] */
.notify__status{
  margin-top:1rem; min-height:1.5rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
}
.notify__status[data-state="error"]{ color:var(--vermil) }

/* ============================ FOOTER ============================ */

.site-footer{ background:var(--ink); color:var(--cream); padding-block:clamp(3rem,6vw,4.5rem) }
.site-footer__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.wordmark--footer{ font-family:var(--mono); font-weight:700; font-size:1.375rem; letter-spacing:.16em }
.site-footer__tag{ margin-top:.75rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; color:var(--cream-60) }
.site-footer__nav{ display:flex; gap:clamp(2rem,5vw,4rem) }
.site-footer__nav div{ display:flex; flex-direction:column; gap:.6rem }
.site-footer__nav h2{
  font-family:var(--mono); font-weight:500;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-60); margin-bottom:.25rem;
}
.site-footer__nav a{ font-size:.9375rem; text-decoration:none }
.site-footer__nav a:hover{ text-decoration:underline }
.site-footer__legal{
  grid-column:1/-1;
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.5rem;
  border-top:1px solid var(--cream-34);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
  color:var(--cream-60);
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 60rem){
  .game-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .team-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .site-nav{ display:none }

  /* leader lines collapse into a plain stacked list */
  .leader{ grid-template-columns:1fr; gap:clamp(2rem,5vw,3rem); justify-items:center }
  .leader__col{ gap:1rem; width:min(28rem,100%) }
  .leader__col--left{ align-items:stretch; text-align:left; order:2 }
  .leader__col--right{ align-items:stretch; order:3 }
  .leader__main{ order:1; width:min(20rem,100%) }
  .leader__stack{ width:100%; grid-template-columns:1fr 1fr }
  .note{ max-width:none }
  .note--left::after,.note--right::after{ display:none }
}

@media (max-width: 46rem){
  .hero__inner{ grid-template-columns:1fr; gap:2rem }
  .hero__media img{ max-height:46vh; object-fit:cover; object-position:center 55% }
  .hero__copy{ max-width:none }
  .split{ grid-template-columns:1fr }
  .game-grid{ grid-template-columns:1fr }
  .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .site-footer__inner{ grid-template-columns:1fr }
  .notify{ flex-direction:column }
  .notify__btn{ width:100% }
}

@media (max-width: 26rem){
  .leader__stack{ grid-template-columns:1fr }
}

@media (max-width: 20rem){
  .team-grid{ grid-template-columns:1fr }
}

/* ============================ MOTION ============================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .ticker__track{ animation:none }
  .insights__item{ color:var(--cream); transition:none }
  .insights__item .insights__arrow{ color:var(--vermil) }
  *,*::before,*::after{ transition-duration:.01ms !important }
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{ animation-play-state:paused }