/* ══════════════════════════════════════════════════════════════
   Petrol Gauntlet — editorial / gallery theme
   Warm ivory · deep petrol teal · brass · soft paper textures
   NO glassmorphism · hairline rules · generous air
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --pg-ivory:        #faf7f0;
  --pg-paper:        #f4ede0;
  --pg-cream:        #f8f3e9;
  --pg-linen:        #ece3cf;
  --pg-ink:          #1a1512;
  --pg-ink-soft:     #3d352e;
  --pg-ink-mute:     #7a6f63;
  --pg-petrol:       #0f3d3e;
  --pg-petrol-deep:  #0a2a2b;
  --pg-petrol-soft:  #1f5a5b;
  --pg-brass:        #c28b3f;
  --pg-brass-light:  #dcb079;
  --pg-brass-pale:   #efe1c5;
  --pg-copper:       #a85a35;
  --pg-sage:         #6d8a63;
  --pg-rust:         #9b3d2f;
  --pg-amber:        #c89040;
  --pg-shadow:       26 21 18;   /* rgb of ink, for alpha shadows */

  /* Semantics */
  --pg-bg:          var(--pg-ivory);
  --pg-surface:     var(--pg-cream);
  --pg-surface-2:   #fbf6eb;
  --pg-border:      rgb(26 21 18 / .10);
  --pg-border-strong: rgb(26 21 18 / .22);
  --pg-text:        var(--pg-ink);
  --pg-text-mute:   var(--pg-ink-mute);
  --pg-accent:      var(--pg-petrol);
  --pg-accent-2:    var(--pg-brass);

  /* Shapes */
  --pg-radius-sm: 6px;
  --pg-radius:    10px;
  --pg-radius-lg: 16px;
  --pg-radius-xl: 22px;

  /* Shadows — warm ivory-toned, not blue */
  --pg-shadow-sm:  0 1px 0 rgb(26 21 18 / .04), 0 2px 6px rgb(26 21 18 / .04);
  --pg-shadow-md:  0 1px 0 rgb(26 21 18 / .04), 0 8px 24px rgb(26 21 18 / .08);
  --pg-shadow-lg:  0 2px 0 rgb(26 21 18 / .04), 0 30px 60px -20px rgb(26 21 18 / .18);

  /* Type */
  --pg-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pg-font-serif: 'Fraunces', ui-serif, Georgia, serif;
  --pg-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pg-bg);
  color: var(--pg-text);
  font-family: var(--pg-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

body.pg-body {
  min-height: 100vh;
  /* subtle vertical warmth gradient */
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(194,139,63,0.09), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(15,61,62,0.05), transparent 55%),
    var(--pg-bg);
}

a { color: var(--pg-petrol); text-decoration: none; }
a:hover { color: var(--pg-copper); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

code, pre, .pg-mono {
  font-family: var(--pg-font-mono);
  font-size: 0.85em;
}

h1, h2, h3, h4 {
  font-family: var(--pg-font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--pg-petrol-deep);
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
h2 { font-size: 1.75rem; line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.25; }

em { font-style: italic; color: var(--pg-brass); font-family: var(--pg-font-serif); }

/* Paper grain overlay — extremely subtle */
.pg-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─── Nav ─── */
.pg-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(1rem, 4vw, 3rem);
  background: linear-gradient(to bottom, var(--pg-ivory) 70%, rgba(250,247,240,0.4));
  border-bottom: 1px solid var(--pg-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pg-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--pg-petrol-deep);
  min-width: 0;
}
.pg-brand:hover { text-decoration: none; }
.pg-brand-mark {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgb(26 21 18 / .05));
  transition: transform 200ms ease;
}
.pg-brand:hover .pg-brand-mark { transform: rotate(-6deg) scale(1.04); }
.pg-brand-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.pg-brand-parent {
  font-family: var(--pg-font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-ink-mute);
  padding: 3px 9px;
  border: 1px solid var(--pg-border-strong);
  border-radius: 4px;
  background: var(--pg-surface-2);
}
.pg-brand-divider {
  color: var(--pg-brass);
  font-family: var(--pg-font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.85;
}
.pg-brand-product {
  font-family: var(--pg-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--pg-petrol-deep);
}
.pg-brand-product em { color: var(--pg-brass); }

@media (max-width: 640px) {
  .pg-brand-parent { display: none; }
  .pg-brand-divider { display: none; }
  .pg-brand-product { font-size: 1.1rem; }
}

.pg-nav-links { display: flex; align-items: center; gap: 8px; }
.pg-nav-link {
  color: var(--pg-ink-soft);
  font-size: .9rem; font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}
.pg-nav-link:hover { background: var(--pg-paper); color: var(--pg-petrol); text-decoration: none; }
.pg-nav-link--admin { color: var(--pg-copper); }
.pg-nav-link--admin:hover { background: var(--pg-brass-pale); color: var(--pg-copper); }

.pg-inline-form { display: inline; }

/* ─── Main & layout ─── */
.pg-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 6rem;
}

.pg-hero {
  text-align: left;
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--pg-border);
  margin-bottom: 3rem;
}
.pg-hero h1 em { display: inline-block; transform: translateY(-2px); }
.pg-eyebrow {
  font-family: var(--pg-font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pg-brass);
  margin-bottom: 1rem;
}
.pg-lede {
  font-family: var(--pg-font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  color: var(--pg-ink-soft);
  max-width: 60ch;
  line-height: 1.55;
}

/* GT freshness banner */
.pg-gt-banner {
  background: linear-gradient(90deg, rgba(109,138,99,0.10) 0%, rgba(194,139,63,0.07) 100%);
  border-bottom: 1px solid var(--pg-border);
  padding: 7px clamp(1rem, 4vw, 3rem);
  font-family: var(--pg-font-mono);
  font-size: .72rem;
  letter-spacing: 0.05em;
  color: var(--pg-ink-soft);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.pg-gt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pg-sage);
  box-shadow: 0 0 0 3px rgba(109,138,99,0.18);
  animation: pg-gt-pulse 2.4s ease-in-out infinite;
}
@keyframes pg-gt-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(109,138,99,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(109,138,99,0.0); }
}

/* ─── Footer ─── */
.pg-footer {
  border-top: 1px solid var(--pg-border);
  padding: 2rem clamp(1rem, 4vw, 3rem);
  margin-top: 4rem;
  background: var(--pg-surface);
}
.pg-footer-inner {
  max-width: 1240px; margin: 0 auto;
  color: var(--pg-ink-mute);
  font-size: .875rem;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.pg-footer-dot { opacity: 0.4; }