/* ==========================================================================
   Fat Pigeon Games
   One stylesheet, no build step. Vanilla CSS — what's here is what ships.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  --bg:         #0b0d11;
  --fg:         #f0eee9;
  --muted:      #a2a8b4;
  --accent:     #e0603f;
  --rule:       rgba(240, 238, 233, .13);
  --surface:    rgba(255, 255, 255, .04);
  --paper:      #f4f0e8;      /* the seal is navy ink on paper; this backs it */

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

  --measure:    62ch;
  --pad:        clamp(1.25rem, 5vw, 5rem);
  --gap:        clamp(3rem, 9vw, 7.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ==========================================================================
   The plate
   The photograph, graded cold, fixed behind everything. It covers the RIGHT
   of the screen and feathers out before it reaches the copy — the bird's face
   sits 39% across a portrait photo, so a full-bleed `cover` on a landscape
   viewport scales by width, leaves no horizontal slack to shift, and buries
   the face under the scrim. Zooming past cover would swing it right, but the
   source is only 768px wide and that meant a ~4x upscale. Framing into a
   narrower box lands the face right-of-centre at ~1.7x instead.
   ========================================================================== */
.backdrop {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}

.backdrop::before {
  content: "";
  position: absolute; inset: -4% -4% -4% 30%;
  background: url("/assets/pigeon-plate.jpg") 19% 0% / 125% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.04);
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
  animation: fade-in 1.4s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Legibility scrim: dark from the left for the copy, plus a heavy cap at the
   top so the nav clears the blown-out background of the original photo. */
.backdrop::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,13,17,.94) 0%, rgba(11,13,17,.78) 34%, rgba(11,13,17,.18) 68%, rgba(11,13,17,.42) 100%),
    linear-gradient(to bottom, rgba(11,13,17,.92) 0%, rgba(11,13,17,.6) 9%, transparent 24%, rgba(11,13,17,.9));
}

/* --- header ------------------------------------------------------------- */
.site-head {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.75rem) var(--pad);
}

.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  font-size: .8rem;
}
.brand-seal {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper);
  padding: 1px;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.brand:hover .brand-seal { transform: rotate(-8deg) scale(1.06); }

.site-nav { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.site-nav a {
  text-decoration: none;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* --- hero --------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(92dvh, 900px);
  padding: clamp(2rem, 6vw, 5rem) var(--pad) clamp(3rem, 8vw, 6rem);
}

.hero-copy { position: relative; z-index: 2; max-width: 34ch; }

.eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 2.2rem; height: 1px; margin-right: .8rem; vertical-align: middle;
  background: currentColor; opacity: .55;
}

.wordmark {
  margin: 0;
  font-size: clamp(3.1rem, 12.5vw, 8.5rem);
  line-height: .85;
  letter-spacing: -.035em;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
}

.lede {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  max-width: 30ch;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  color: var(--muted);
  text-wrap: balance;
}

.hero-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2.25rem 0 0; }

.btn {
  display: inline-block;
  padding: .7rem 1.15rem;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; font-weight: 600;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s;
}
.btn:hover { transform: translateY(-2px); opacity: .92; }
.btn-quiet {
  background: transparent; color: var(--fg);
  border-color: var(--rule);
}
.btn-quiet:hover { border-color: var(--fg); }

/* --- sections ----------------------------------------------------------- */
/* Opaque and above the plate, so they wipe over it as the page scrolls. */
.band {
  position: relative; z-index: 2;
  padding: var(--gap) var(--pad);
  border-top: 1px solid var(--rule);
  background: var(--bg);
}

.section-title {
  margin: 0 0 2.5rem;
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  display: flex; align-items: center; gap: 1.25rem;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.project {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  max-width: var(--measure);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s;
}
.project:hover { transform: translateY(-3px); border-color: var(--accent); }

.project-name {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: -.02em; line-height: 1.1;
}
.project-status {
  margin: .6rem 0 0;
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 96, 63, .55); }
  70%  { box-shadow: 0 0 0 .55rem rgba(224, 96, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 96, 63, 0); }
}
.project-note { margin: .9rem 0 0; color: var(--muted); font-size: .95rem; }

.contact-line { margin: 0; }
.mail {
  font-size: clamp(1.3rem, 1rem + 2.2vw, 2.6rem);
  letter-spacing: -.02em;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.2, .8, .2, 1);
  word-break: break-word;
}
.mail:hover { background-size: 100% 2px; }

.site-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .75rem;
  padding: 2rem var(--pad) 3rem;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  color: var(--muted);
  font-size: .8rem;
}
.site-foot p { margin: 0; }
.foot-seal { width: 24px; height: 24px; border-radius: 50%; background: var(--paper); opacity: .8; }

/* --- responsive --------------------------------------------------------- */
/* Portrait viewports match the photo's own aspect, so the right-side framing
   isn't needed — full-bleed cover with the face up top and the copy below it.
   The desktop scrim rakes in from the left for a side-by-side layout and would
   bury the face here, so it becomes a purely vertical one. */
@media (max-width: 760px) {
  .backdrop::before {
    inset: -4%;
    background-position: 46% 4%;   /* keeps the beak inside the frame */
    background-size: cover;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .backdrop::after {
    background: linear-gradient(to bottom,
      rgba(11, 13, 17, .86) 0%,
      rgba(11, 13, 17, .34) 9%,
      rgba(11, 13, 17, .08) 28%,
      rgba(11, 13, 17, .70) 50%,
      rgba(11, 13, 17, .95) 70%);
  }

  .hero {
    align-items: end;
    min-height: 88dvh;
    padding-top: 36vh;
    padding-bottom: 4rem;
  }
  .hero-copy { max-width: none; }

  /* The header runs out of room around 390px — trim it rather than clip it. */
  .site-head { padding-inline: 1.1rem; }
  .brand { gap: .5rem; font-size: .72rem; letter-spacing: .04em; }
  .brand-seal { width: 28px; height: 28px; }
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: .72rem; letter-spacing: .08em; }
  .hero-links .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 360px) {
  .brand-name { display: none; }   /* the mark carries the header alone */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}