/* =========================================================
   Wait! What? — site styles
   One stylesheet drives every page. Edit tokens here once
   and the whole site follows.
   ========================================================= */

/* ---- Font -------------------------------------------------
   Loaded from Google Fonts via the <link> in each HTML head.
   To self-host later: download the variable WOFF2 into /fonts,
   uncomment the @font-face below, and remove the <link> tags.

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
------------------------------------------------------------ */

/* ---- Design tokens --------------------------------------- */
:root {
  --ink:    #000000;
  --paper:  #ffffff;
  --orange: #ff6600;   /* nav accent + nav links */
  --green:  #20fc03;   /* rotating badge */
  --muted:  #8a8a8a;

  --glass-bg:     rgba(255, 255, 255, 0.6);   /* nudge this alpha to taste */
  --glass-border: rgba(0, 0, 0, 0.08);

  --margin: clamp(16px, 4vw, 40px);
  --gap:    14px;
  --radius: 20px;

  /* ---- Nav sizing -----------------------------------------
     Change ONE value — --logo-height — and the whole nav
     resizes: the bar grows to fit, the logo scales, and the
     page top-spacing + badge position follow automatically.
     So when your final logo needs more room, edit --logo-height
     and nothing else. --nav-pad-y is the breathing room above
     and below the logo inside the bar. */
  --logo-height: 34px;                                             /* visual height of the logo/wordmark */
  --nav-pad-y:   22px;                                             /* space above + below the logo */
  --nav-top:     14px;                                             /* gap from the top of the screen */
  --nav-height:  calc(var(--logo-height) + (2 * var(--nav-pad-y))); /* auto: 34 + 44 = 78 */
  --nav-clear:   calc(var(--nav-top) + var(--nav-height) + 12px);   /* where page content / badge begin */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, Arial, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a   { color: inherit; }
img { display: block; max-width: 100%; }

/* ---- Nav: floating frosted glass ------------------------- */
.nav {
  position: fixed;
  top: var(--nav-top); left: var(--margin); right: var(--margin);
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-height); padding: 0 28px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}
.nav .home { font-size: 17px; font-weight: 660; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.nav .home img { height: var(--logo-height); width: auto; }   /* logo scales with the token */
.nav .links { display: flex; gap: 26px; font-size: 18px; font-weight: 500; }
.nav .links a { text-decoration: none; white-space: nowrap; color: var(--ink); }  /* black nav links */
.nav .arw { color: var(--orange); }   /* small orange accent on the arrows */

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---- Rotating badge: fixed, green, over the top-right tiles */
.badge {
  position: fixed;
  top: var(--nav-clear); right: var(--margin);
  width: 96px; height: 96px;
  z-index: 90;              /* above tiles, below nav */
  pointer-events: none;     /* never blocks hovering/clicking a tile beneath */
}
.badge .ring { transform-box: fill-box; transform-origin: center; }
.badge circle, .badge text { fill: var(--green); }
.badge circle { fill: none; stroke: var(--green); }
@media (prefers-reduced-motion: no-preference) {
  .badge .ring { animation: spin 16s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Page shell ------------------------------------------ */
.wrap { padding: 0 var(--margin); }
.site-main { padding-top: var(--nav-clear); }   /* clears the fixed nav — follows --logo-height automatically */

/* ---- Work grid ------------------------------------------- */
.grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--gap); padding-bottom: 56px;
}
.card {
  position: relative; display: block;
  aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  text-decoration: none;
}
.card .hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .placeholder { position: absolute; inset: 0; }
.pl-1 { background: linear-gradient(135deg, #3a2f2a, #8a5a3c); }
.pl-2 { background: var(--orange); }
.pl-3 { background: #000; }

/* the hover reveal: white ground, centred large title + short description */
.card .flip {
  position: absolute; inset: 0; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 10px;
  opacity: 0; transition: opacity 0.4s ease;
}
.card .flip .flip-title {
  font-size: clamp(22px, 3.4vw, 38px); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.01em; color: var(--orange);
}
.card .flip .flip-desc {
  font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 34ch;
}

/* Only true hover devices get the reveal; touch screens keep the image, tap opens it */
@media (hover: hover) {
  .card:hover .flip { opacity: 1; }
}

/* ---- Project page ---------------------------------------- */
.project-head {
  display: flex; gap: 32px; flex-wrap: wrap;
  padding: 8px 0 26px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 26px;
}
.project-desc { flex: 2; min-width: 260px; }
.project-desc p { margin: 0; font-size: 16px; max-width: 52ch; }
.project-info { flex: 1; min-width: 160px; font-size: 13px; color: var(--muted); }
.project-info h1 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
.project-info .disc { margin: 0 0 10px; font-style: italic; }
.project-info .credits { margin: 0; }

.project-images { display: flex; flex-direction: column; gap: 12px; padding-bottom: 56px; }
.project-images .shot { width: 100%; border-radius: 8px; }
.project-images .placeholder { aspect-ratio: 21 / 9; border-radius: 8px; }

/* ---- About page ------------------------------------------ */
.about { max-width: 60ch; padding: 8px 0 56px; }
.about .lead { font-size: 16px; }

/* ---- Footer: minimal sign-off (generous side spacing) ---- */
.site-footer {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding: 22px clamp(20px, 4vw, 48px);
  border-top: 1px solid rgba(0,0,0,0.1);
  font-size: 12px; color: var(--muted);
}
.site-footer .foot-links { display: flex; gap: 16px; }
.site-footer .foot-links a { text-decoration: none; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 640px) {
  :root { --logo-height: 26px; --nav-pad-y: 16px; }   /* smaller bar on phones */
  .grid { grid-template-columns: 1fr; }
  .nav { padding: 0 18px; }
  .nav .links { gap: 16px; font-size: 15px; }
  .badge { width: 64px; height: 64px; }   /* top still follows --nav-clear */
}