:root{
    --void:#0D0F12;
    --panel:#16191E;
    --panel-2:#1B1F26;
    --ink:#EDEAE2;
    --ink-dim:#8B909A;
    --ember:#C9823D;
    --ember-dim:#7A5330;
    --signal:#3E8FA6;
    --signal-dim:#26505C;
    --line:#262A31;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
  }

  h1,h2,h3,.display{
    font-family:'Newsreader', serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }

  a{color:inherit; text-decoration:none;}

  img{max-width:100%; display:block;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  @media (max-width:640px){
    .wrap{padding:0 20px;}
  }

  /* ---------- Focus visibility ---------- */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--ember);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(13,15,18,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }

  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 32px;
    max-width:1180px;
    margin:0 auto;
    position:relative;
  }

  .brand{
    display:flex;
    flex-direction:column;
    line-height:1.1;
  }

  .brand-name{
    font-family:'Newsreader', serif;
    font-size:1.25rem;
    font-weight:600;
  }

  .brand-sub{
    font-size:0.68rem;
    color:var(--ink-dim);
    letter-spacing:0.02em;
  }

  .nav-links{
    display:flex;
    gap:28px;
    font-size:0.92rem;
  }

  .nav-links a{
    color:var(--ink-dim);
    transition:color 0.2s ease;
    padding:6px 0;
    border-bottom:1px solid transparent;
  }

  .nav-links a:hover{
    color:var(--ink);
    border-bottom-color:var(--ember-dim);
  }

  .nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    color:var(--ink);
    font-size:1rem;
    padding:8px 12px;
    cursor:pointer;
  }

  @media (max-width:800px){
    .nav-links{
      display:none;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      flex-direction:column;
      gap:0;
      background:var(--void);
      border-bottom:1px solid var(--line);
      padding:8px 32px 16px;
    }
    .nav-links.open{display:flex;}
    .nav-links a{padding:12px 0; border-bottom:1px solid var(--line);}
    .nav-toggle{display:block;}
    header{position:sticky;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    background:
      radial-gradient(ellipse 70% 55% at 22% 30%, rgba(201,130,61,0.14), transparent 60%),
      radial-gradient(ellipse 60% 60% at 85% 80%, rgba(62,143,166,0.10), transparent 65%),
      var(--void);
    overflow:hidden;
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 2px);
    pointer-events:none;
  }

  .hero-inner{
    position:relative;
    z-index:2;
    padding:120px 0 100px;
  }

  .hero-eyebrow{
    color:var(--ember);
    font-size:0.85rem;
    margin-bottom:22px;
    opacity:0;
  }

  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    max-width:14ch;
    line-height:1.05;
    opacity:0;
  }

  .hero h1 em{
    font-style:italic;
    color:var(--ember);
  }

  .hero-sub{
    margin-top:26px;
    max-width:48ch;
    font-size:1.15rem;
    color:var(--ink-dim);
    opacity:0;
  }

  .hero-paths{
    margin-top:44px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    opacity:0;
  }

  .path-chip{
    border:1px solid var(--line);
    padding:14px 22px;
    border-radius:2px;
    font-size:0.95rem;
    transition:border-color 0.25s ease, background 0.25s ease;
    background:rgba(255,255,255,0.02);
  }

  .path-chip:hover{
    border-color:var(--ember-dim);
    background:rgba(201,130,61,0.06);
  }

  .path-chip.cool:hover{
    border-color:var(--signal-dim);
    background:rgba(62,143,166,0.08);
  }

  /* the single orchestrated reveal: text "stepping into focus" */
  .ignite h1, .ignite .hero-eyebrow, .ignite .hero-sub{
    animation:step-into-focus 1.3s cubic-bezier(0.2,0.6,0.2,1) forwards;
  }
  .ignite .hero-eyebrow{animation-delay:0.05s;}
  .ignite h1{animation-delay:0.25s;}
  .ignite .hero-sub{animation-delay:0.6s;}

  @keyframes step-into-focus{
    from{opacity:0; transform:scale(0.94) translateY(10px); filter:blur(10px);}
    to{opacity:1; transform:scale(1) translateY(0); filter:blur(0);}
  }

  /* buttons fly in and settle, staggered, after the text focuses */
  .ignite .hero-paths .path-chip{
    opacity:0;
    animation:fly-settle 0.8s cubic-bezier(0.2,0.7,0.3,1) forwards;
  }
  .ignite .hero-paths .path-chip:nth-child(1){animation-delay:1.05s; --from-x:-40px; --from-y:0px;}
  .ignite .hero-paths .path-chip:nth-child(2){animation-delay:1.2s; --from-x:0px; --from-y:30px;}
  .ignite .hero-paths .path-chip:nth-child(3){animation-delay:1.35s; --from-x:40px; --from-y:0px;}

  @keyframes fly-settle{
    from{opacity:0; transform:translate(var(--from-x,0), var(--from-y,20px)) scale(0.9);}
    to{opacity:1; transform:translate(0,0) scale(1);}
  }

  /* ---------- CirclesLab strip ---------- */
  .lab-strip{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:22px 0;
    font-size:0.92rem;
    color:var(--ink-dim);
  }

  .lab-strip strong{color:var(--ink); font-weight:500;}

  /* ---------- Section shell ---------- */
  section{
    padding:96px 0;
  }

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    flex-wrap:wrap;
  }

  .section-head h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
  }

  .section-tag{
    font-size:0.85rem;
  }

  .see-all{
    font-size:0.92rem;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
    white-space:nowrap;
  }

  /* ---------- Games teaser (warm room) ---------- */
  .games-section{
    background:linear-gradient(180deg, var(--void) 0%, #14100D 50%, var(--void) 100%);
  }

  .games-section .section-tag{color:var(--ember);}
  .games-section .see-all:hover{border-color:var(--ember-dim); color:var(--ember);}

  .game-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }

  @media (max-width:820px){
    .game-grid{grid-template-columns:1fr;}
  }

  .game-card{
    background:var(--panel);
    padding:34px 28px;
    min-height:230px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    position:relative;
    transition:background 0.25s ease;
  }

  .game-card:hover{background:var(--panel-2);}

  .game-card .status{
    position:absolute;
    top:24px;
    left:28px;
    font-size:0.72rem;
    color:var(--ember);
    letter-spacing:0.02em;
  }

  .game-card h3{
    font-size:1.35rem;
    margin-bottom:8px;
  }

  .game-card p{
    font-size:0.9rem;
    color:var(--ink-dim);
  }

  /* ---------- Tools section (cool room) ---------- */
  .tools-section .section-tag{color:var(--signal);}
  .tools-section .see-all:hover{border-color:var(--signal-dim); color:var(--signal);}

  .tool-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }

  @media (max-width:900px){
    .tool-grid{grid-template-columns:1fr;}
  }

  .tool-card{
    border:1px solid var(--line);
    background:var(--panel);
  }

  .tool-card .thumb{
    aspect-ratio:16/10;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }

  .tool-card .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
  }

  .tool-card:hover .thumb img{
    transform:scale(1.04);
  }

  .tool-card .body{
    padding:24px 24px 26px;
  }

  .tool-card h3{
    font-size:1.15rem;
    margin-bottom:10px;
  }

  .tool-card p{
    font-size:0.9rem;
    color:var(--ink-dim);
    margin-bottom:16px;
  }

  .tool-link{
    font-size:0.86rem;
    color:var(--signal);
    border-bottom:1px solid var(--signal-dim);
    padding-bottom:1px;
  }

  /* ---------- Reviews callout ---------- */
  .reviews-callout{
    border:1px solid var(--ember-dim);
    background:rgba(201,130,61,0.05);
    padding:36px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    margin-top:56px;
  }

  .reviews-callout h3{
    font-size:1.25rem;
    margin-bottom:6px;
  }

  .reviews-callout p{
    color:var(--ink-dim);
    font-size:0.92rem;
    max-width:52ch;
  }

  .reviews-callout .path-chip{flex-shrink:0;}

  /* ---------- Community teaser ---------- */
  .community-section{
    border-top:1px solid var(--line);
  }

  .community-copy{
    max-width:60ch;
    color:var(--ink-dim);
  }

  .community-copy strong{color:var(--ink); font-weight:500;}

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:56px 0 40px;
  }

  .footer-grid{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:32px;
  }

  .footer-brand .brand-name{margin-bottom:6px;}

  .footer-links{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
  }

  .footer-col h4{
    font-size:0.78rem;
    color:var(--ink-dim);
    margin-bottom:12px;
    font-weight:500;
  }

  .footer-col a{
    display:block;
    font-size:0.92rem;
    margin-bottom:8px;
    color:var(--ink-dim);
  }

  .footer-col a:hover{color:var(--ink);}

  .footer-bottom{
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid var(--line);
    font-size:0.82rem;
    color:var(--ink-dim);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }

/* ===================== Shared subpage styles ===================== */

.page-hero{
  padding:70px 0 56px;
  border-bottom:1px solid var(--line);
}

.page-hero .kicker{
  font-size:0.85rem;
  color:var(--ember);
  margin-bottom:14px;
}

.page-hero.cool .kicker{color:var(--signal);}

.page-hero h1{
  font-size:clamp(2.1rem, 4.5vw, 3.2rem);
  max-width:20ch;
}

.page-hero p.lead{
  margin-top:18px;
  max-width:56ch;
  color:var(--ink-dim);
  font-size:1.08rem;
}

/* ---- image placeholder (used until real screenshots are confirmed) ---- */
.shot{
  aspect-ratio:16/9;
  border:1px dashed var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px),
    var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-dim);
  font-size:0.82rem;
  text-align:center;
  padding:16px;
}

.shot-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:28px 0;
}

@media (max-width:760px){
  .shot-row{grid-template-columns:1fr;}
}

/* ---- project entry (case study block) ---- */
.project{
  padding:64px 0;
  border-bottom:1px solid var(--line);
}

.project:last-child{border-bottom:none;}

.project-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.project-head h2{font-size:1.9rem;}

.project-meta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:0.82rem;
  color:var(--ink-dim);
  margin-top:8px;
}

.project-meta span strong{color:var(--ink); font-weight:500;}

.status-pill{
  border:1px solid var(--ember-dim);
  color:var(--ember);
  font-size:0.78rem;
  padding:5px 12px;
  white-space:nowrap;
  height:fit-content;
}

.status-pill.cool{border-color:var(--signal-dim); color:var(--signal);}
.status-pill.paused{border-color:var(--line); color:var(--ink-dim);}

.project-body{
  max-width:72ch;
  color:var(--ink-dim);
}

.project-body p{margin-bottom:16px;}
.project-body strong{color:var(--ink); font-weight:500;}

.project-body h4{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  color:var(--ink);
  margin:26px 0 10px;
}

.project-body ul{padding-left:20px; margin-bottom:16px;}
.project-body li{margin-bottom:6px;}

.project-links{
  margin-top:22px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.project-links a{
  font-size:0.9rem;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}

.project-links a:hover{border-color:var(--ember-dim); color:var(--ember);}

/* ---- timeline (for World 001's arc) ---- */
.timeline{
  margin:28px 0;
  border-left:1px solid var(--line);
  padding-left:24px;
}

.timeline-step{
  position:relative;
  padding-bottom:26px;
}

.timeline-step::before{
  content:"";
  position:absolute;
  left:-29px;
  top:4px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ember);
}

.timeline-step h4{margin:0 0 6px !important;}

/* ---- tool detail row (Tools page) ---- */
.tool-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:56px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}

.tool-detail:last-child{border-bottom:none;}

.tool-detail:nth-child(even) .tool-detail-media{order:2;}

@media (max-width:800px){
  .tool-detail{grid-template-columns:1fr;}
  .tool-detail:nth-child(even) .tool-detail-media{order:0;}
}

.tool-detail-media img, .tool-detail-media .shot{
  width:100%;
  border:1px solid var(--line);
}

.tool-detail-copy h3{font-size:1.5rem; margin-bottom:12px;}
.tool-detail-copy p{color:var(--ink-dim); margin-bottom:18px;}

/* ---- community photo grid ---- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:36px 0;
}

@media (max-width:760px){
  .photo-grid{grid-template-columns:repeat(2, 1fr);}
}

.photo-grid .shot{aspect-ratio:1/1;}

/* ---- reviews program tiers ---- */
.tier-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin:40px 0;
}

@media (max-width:800px){
  .tier-grid{grid-template-columns:1fr;}
}

.tier-card{
  border:1px solid var(--line);
  background:var(--panel);
  padding:32px;
}

.tier-card h3{font-size:1.3rem; margin-bottom:12px;}
.tier-card p{color:var(--ink-dim); margin-bottom:18px;}

.tier-card .fields{
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:16px;
}

.tier-card .fields h5{
  font-family:'Work Sans', sans-serif;
  font-size:0.78rem;
  color:var(--ink-dim);
  font-weight:500;
  margin-bottom:10px;
}

.tier-card .fields ul{list-style:none; font-size:0.88rem; color:var(--ink-dim);}
.tier-card .fields li{padding:4px 0; border-bottom:1px dotted var(--line);}
.tier-card .fields li:last-child{border-bottom:none;}

.notice{
  border-left:2px solid var(--ember);
  padding:14px 18px;
  background:rgba(201,130,61,0.05);
  font-size:0.9rem;
  color:var(--ink-dim);
  margin-top:20px;
}

/* ---- form ---- */
.form-wrap{
  max-width:640px;
  margin-top:36px;
}

.form-row{margin-bottom:20px;}

.form-row label{
  display:block;
  font-size:0.85rem;
  color:var(--ink-dim);
  margin-bottom:8px;
}

.form-row input, .form-row textarea, .form-row select{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  padding:12px 14px;
  font-family:'Work Sans', sans-serif;
  font-size:0.95rem;
}

.form-row textarea{resize:vertical; min-height:120px;}

.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none;
  border-color:var(--ember-dim);
}

.submit-btn{
  background:var(--ember);
  color:var(--void);
  border:none;
  padding:14px 30px;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition:background 0.2s ease;
}

.submit-btn:hover{background:#DA9550;}

.checkbox-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:0.88rem;
  color:var(--ink-dim);
}

.checkbox-row input{width:auto; margin-top:3px;}

/* ---- lightbox ---- */
.lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(13,15,18,0.93);
  display:flex; align-items:center; justify-content:center;
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity 0.2s ease;
  padding:48px;
}
.lightbox-overlay.active{opacity:1; pointer-events:auto;}
.lightbox-overlay img{max-width:100%; max-height:100%; border:1px solid var(--line); cursor:zoom-out;}
.lightbox-close{
  position:absolute; top:24px; right:32px;
  color:var(--ink-dim); font-size:0.9rem; cursor:pointer;
}

/* ---- video thumbnail / inline embed ---- */
.video-shot{
  position:relative;
  cursor:pointer;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.video-shot .play-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,15,18,0.35);
  transition:background 0.2s ease;
}

.video-shot:hover .play-badge{background:rgba(13,15,18,0.5);}

.video-shot .play-badge span{
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(13,15,18,0.75);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  font-size:1.1rem;
}

.video-shot .video-caption{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:8px 10px;
  font-size:0.78rem;
  color:var(--ink);
  background:linear-gradient(to top, rgba(13,15,18,0.85), transparent);
}

.video-shot iframe{width:100%; height:100%; border:none;}

/* ---- about page headshot layout, responsive ---- */
.about-hero-grid{
  grid-template-columns:220px 1fr;
}
@media (max-width:600px){
  .about-hero-grid{
    grid-template-columns:1fr;
  }
  .about-hero-grid .shot{
    aspect-ratio:16/10;
    max-width:220px;
  }
}

/* ---- scroll-triggered reveals ---- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal-in{opacity:1; transform:translateY(0);}
@media (max-width:600px){
  .reveal{transform:translateY(8px); transition:opacity 0.4s ease, transform 0.4s ease;}
}

/* ---- dripping horror title ---- */
.drip-title-wrap{position:relative; display:inline-block;}
.drip{
  position:absolute;
  bottom:-6px;
  width:4px;
  height:24px;
  background:var(--ember);
  cursor:grab;
  transform-origin:top center;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  opacity:0.9;
  touch-action:none;
}
.drip::after{
  content:"";
  position:absolute;
  bottom:-7px;
  left:50%;
  transform:translateX(-50%);
  width:13px;
  height:13px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:var(--ember);
}
.drip.idle{animation:drip-idle 3.6s ease-in-out infinite;}
.drip:active{cursor:grabbing;}
@keyframes drip-idle{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}

/* ---- community video tiles ---- */
.photo-grid video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--panel);
}

/* ---- per-section typography ---- */
body.section-games{
  font-family:'Public Sans', sans-serif;
}
body.section-games h1,
body.section-games h2,
body.section-games h3,
body.section-games .display{
  font-family:'Fraunces', serif;
}

body.section-tools{
  font-family:'IBM Plex Sans', sans-serif;
}
body.section-tools h1,
body.section-tools h2,
body.section-tools h3,
body.section-tools .display{
  font-family:'Space Grotesk', sans-serif;
}

/* nav and footer always stay in the general hub fonts, regardless of section */
body.section-games header, body.section-games header *,
body.section-games footer, body.section-games footer *,
body.section-tools header, body.section-tools header *,
body.section-tools footer, body.section-tools footer *{
  font-family:'Work Sans', sans-serif;
}
body.section-games header .brand-name, body.section-games header .brand-name *,
body.section-games footer .brand-name, body.section-games footer .brand-name *,
body.section-tools header .brand-name, body.section-tools header .brand-name *,
body.section-tools footer .brand-name, body.section-tools footer .brand-name *{
  font-family:'Newsreader', serif;
}