/* ---------- Tokens ----------
     Ghostlight's real mark is a fog-grey pine forest at dusk. That's a
     single committed world (a misty, fading-light scene), so this page
     stays dark-only by design and paints every color explicitly rather
     than deferring to the host theme. */
  :root{
    --ridge-near: #1e2529;
    --dusk: #171c1f;
    --panel: #20272b;
    --panel-raised: #262e33;
    --ink: #eef1f0;
    --ink-dim: #aab4b6;
    --muted: #6d787b;
    --accent: #c9a26a;
    --accent-dim: #8d7451;
    --rule: rgba(238,241,240,0.12);
    --rule-strong: rgba(238,241,240,0.22);
    --focus: #d8b984;

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Jost', 'Century Gothic', 'Futura', sans-serif;

    --fs-h1: clamp(1.9rem, 2.4vw + 1.1rem, 3.1rem);
    --fs-h2: clamp(1.7rem, 1.8vw + 1rem, 2.5rem);
    --measure: 60ch;
  }

  *{box-sizing:border-box;}
  html{font-size:16px; color-scheme: dark; scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--dusk);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:300;
    font-size:1.05rem;
    line-height:1.7;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.15;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  a{color:inherit;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}

  .wrap{max-width:1160px; margin:0 auto; padding-inline:clamp(1.25rem,4vw,3rem);}

  .eyebrow{
    font-family:var(--font-body);
    font-weight:500;
    font-size:0.78rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex; align-items:center; gap:0.75em;
  }
  .eyebrow::before{content:""; width:1.6em; height:1px; background:var(--accent-dim);}

  /* ---------- Fixed header: hidden until the hero is scrolled past,
     then the logo "snaps" into place. ---------- */
  .site-header{
    position:fixed; inset:0 0 auto 0; z-index:60;
    display:flex; align-items:center; justify-content:space-between;
    padding:0.85rem clamp(1.25rem,4vw,3rem);
    background:rgba(23,28,31,0.86);
    backdrop-filter:blur(6px);
    border-bottom:1px solid transparent;
    opacity:0;
    transform:translateY(-100%);
    transition:opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    pointer-events:none;
  }
  .site-header.is-visible{
    opacity:1; transform:translateY(0);
    border-bottom-color:var(--rule);
    pointer-events:auto;
  }
  .site-header .logo-mark{height:22px; width:auto; filter:invert(1) brightness(1.35);}
  .site-header nav{display:flex; gap:clamp(1.2rem,2.5vw,2rem);}
  .site-header nav a{
    font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
    text-decoration:none; color:var(--ink-dim); font-weight:500;
    border-bottom:1px solid transparent; padding-bottom:2px;
  }
  .site-header nav a:hover{color:var(--accent); border-color:var(--accent-dim);}
  @media (max-width:600px){ .site-header nav{display:none;} }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:min(96vh, 900px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    overflow:hidden;
    background:var(--ridge-near);
  }
  .hero__scene{position:absolute; inset:0; pointer-events:none;}
  .parallax-layer{position:absolute; inset:0; will-change:transform;}

  /* The real photo from the studio's site: oversized and shifted upward
     on scroll (slower than the page) for true parallax, with enough
     bottom overrun that the shift never exposes an edge. */
  .photo-layer{inset:-4% -4% -260px -4%;}
  .hero-photo{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 38%;
  }
  .hero__scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(15,19,21,0.35) 0%, rgba(15,19,21,0) 30%, rgba(15,19,21,0.2) 55%, var(--dusk) 96%);
  }

  /* one soft drifting fog band, layered over the photo for gentle motion */
  .fog{
    position:absolute; left:-10%; width:120%; height:34%;
    background:linear-gradient(90deg, transparent, rgba(220,226,228,0.22), transparent);
    filter:blur(18px);
    opacity:0.5;
  }
  .fog--1{top:14%; animation:driftRight 50s linear infinite;}
  @keyframes driftRight{ 0%{transform:translateX(-6%);} 50%{transform:translateX(6%);} 100%{transform:translateX(-6%);} }

  .hero__content{
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:1.3rem;
    padding:0 clamp(1.25rem,4vw,3rem) clamp(4.5rem,9vw,6.5rem);
  }
  .hero-logo{width:min(78vw, 460px); height:auto; filter:invert(1) brightness(1.3) drop-shadow(0 6px 24px rgba(0,0,0,0.35));}
  .tagline{
    max-width:38ch;
    color:var(--ink-dim);
    font-size:1.15rem;
    font-weight:300;
    letter-spacing:0.01em;
  }

  .scroll-cue{
    position:absolute; z-index:2; left:50%; bottom:1.75rem; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:0.5rem;
    font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(238,241,240,0.55);
  }
  .scroll-cue::after{content:""; width:1px; height:30px; background:linear-gradient(to bottom, rgba(238,241,240,0.55), transparent);}

  /* ---------- Projects ---------- */
  .projects{background:var(--dusk); padding:clamp(5rem,9vw,7.5rem) 0;}
  .projects__head{max-width:44ch; margin-bottom:clamp(3rem,6vw,4.5rem);}
  .projects__head h2{margin-top:0.6rem;}
  .projects__head p{color:var(--ink-dim); margin-top:1rem; max-width:var(--measure);}

  .project-list{display:flex; flex-direction:column; gap:clamp(3.5rem,7vw,5.5rem);}
  .project{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap:clamp(2rem,4vw,3.5rem);
    align-items:center;
  }
  .project--right{grid-template-columns: 0.9fr 1.1fr;}
  .project--right .project__media{order:2;}
  .project--right .project__body{order:1;}
  @media (max-width:820px){
    .project, .project--right{grid-template-columns:1fr;}
    .project--right .project__media, .project--right .project__body{order:initial;}
  }

  .project__media{
    aspect-ratio:16/11;
    position:relative;
    overflow:hidden;
    background:var(--art);
    border:1px solid var(--rule);
  }
  .project__media::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(155deg, rgba(23,28,31,0) 40%, rgba(23,28,31,0.5));
  }
  .project__media .motif{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    opacity:0.9;
  }
  .project__media .motif svg{width:34%; height:34%;}

  .project__tag{
    font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--accent); font-weight:500;
  }
  .project__body h3{font-size:1.7rem; margin-top:0.6rem;}
  .project__body p{color:var(--ink-dim); margin-top:0.9rem; max-width:42ch;}
  .project__link{
    display:inline-flex; align-items:center; gap:0.5em;
    margin-top:1.3rem;
    font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
    text-decoration:none; color:var(--ink);
    border-bottom:1px solid var(--rule-strong);
    padding-bottom:3px;
  }
  .project__link:hover{color:var(--accent); border-color:var(--accent-dim);}
  .project__link svg{width:0.9em; height:0.9em; transition:transform 0.15s ease;}
  .project__link:hover svg{transform:translate(2px,-2px);}

  /* ---------- Contact ---------- */
  .contact{
    background:linear-gradient(180deg, var(--dusk), var(--panel));
    padding:clamp(5rem,9vw,7.5rem) 0;
    border-top:1px solid var(--rule);
  }
  .contact__inner{max-width:52ch;}
  .contact h2{margin-top:0.6rem;}
  .contact p.lede{color:var(--ink-dim); margin-top:1.1rem; max-width:var(--measure);}
  .contact__links{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin-top:2.2rem;}
  .contact__links a{
    text-decoration:none; color:var(--ink);
    font-size:1rem;
    border-bottom:1px solid var(--rule-strong);
    padding-bottom:3px;
  }
  .contact__links a:hover{color:var(--accent); border-color:var(--accent-dim);}
  .contact__links span{
    display:block; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--muted); margin-bottom:0.4rem;
  }

  /* ---------- Footer ---------- */
  .site-footer{background:var(--panel); padding:2.4rem 0; border-top:1px solid var(--rule);}
  .site-footer__row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;}
  .site-footer .logo-mark{height:18px; width:auto; opacity:0.75; filter:invert(1) brightness(1.2);}
  .site-footer small{font-size:0.75rem; color:var(--muted); letter-spacing:0.02em;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .fog{animation:none !important;}
    .site-header{transition:none;}
  }