/* ============================================================================
   PATRICK J. CUNNINGHAM — brand tokens
   The single source of truth. Every surface (site, deck, thumbnail, banner)
   pulls from here. Contrast ratios in the comments are measured, not guessed.
   ============================================================================ */

@import url('fonts/inter-local.css');

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/anton-400.woff2') format('woff2');
}

:root {
  /* ---- core three ------------------------------------------------------ */
  --pjc-ink:   #0A0B0D;   /* the void. every ground starts here          */
  --pjc-clay:  #D97C4E;   /* the one light. 6.51:1 on ink — AA           */
  --pjc-bone:  #F7F3ED;   /* every word. 17.81:1 on ink — AA             */

  /* ---- clay ramp ------------------------------------------------------- */
  --clay-0:    #F5EEE7;
  --clay-100:  #F3E5DD;
  --clay-200:  #EDD4C9;
  --clay-300:  #E8C0B1;   /* 11.82:1 on ink — quiet accent text          */
  --clay-400:  #E1A58E;   /*  9.35:1 on ink — hover / rim light          */
  --clay-500:  #D97C4E;   /*  6.51:1 on ink — PRIMARY                    */
  --clay-600:  #CB7449;
  --clay-700:  #B86942;
  --clay-800:  #9C5837;   /*  4.92:1 on bone — the accent on light       */
  --clay-900:  #7B452B;
  --clay-1000: #56301F;

  /* ---- warm neutrals (biased 10% toward clay, never a dead grey) ------- */
  --shade-0:    #F6F0E9;
  --shade-100:  #F0E9E3;
  --shade-200:  #E7E0DA;
  --shade-300:  #D8CEC7;
  --shade-400:  #C7BCB6;
  --shade-500:  #B4A8A2;
  --shade-600:  #9F928C;   /* 6.53:1 on ink — smallest safe body grey     */
  --shade-700:  #8A7C75;
  --shade-800:  #6B625E;
  --shade-900:  #524743;
  --shade-1000: #311B14;

  /* ---- semantic: dark surfaces (the default world) --------------------- */
  --ground:      var(--pjc-ink);
  --surface:     #131417;
  --raised:      #1B1D21;
  --hairline:    #2A2C31;
  --heading:     var(--pjc-bone);
  --body:        rgba(247, 243, 237, .62);
  --body-quiet:  rgba(247, 243, 237, .42);
  --accent:      var(--clay-500);
  --accent-hover:var(--clay-400);
  --accent-quiet:var(--clay-300);

  /* ---- semantic: light surfaces (print, docs, the rare pale page) ------ */
  --ground-light:   var(--pjc-bone);
  --heading-light:  var(--pjc-ink);
  --body-light:     rgba(10, 11, 13, .66);
  --accent-light:   var(--clay-800);   /* NOT clay-500 — it fails on bone  */
  --hairline-light: rgba(10, 11, 13, .14);

  /* ---- state ----------------------------------------------------------- */
  /* Clay sits at ~20° hue, so red states crowd it. Never signal state with
     colour alone — always pair with a word or an icon.                     */
  --positive:       #6E9B78;  /* 6.21:1 on ink  */
  --caution:        #E0B341;  /* 10.03:1 on ink */
  --critical:       #DD5252;  /* 5.07:1 on ink  */
  --positive-light: #3A5F44;  /* 6.55:1 on bone */
  --caution-light:  #6E5210;  /* 6.60:1 on bone */
  --critical-light: #932626;  /* 7.46:1 on bone */

  /* ---- type ------------------------------------------------------------ */
  --face-display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --face-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-display-xl: 118px;  /* banner hero, 3 lines max                      */
  --t-display-l:   76px;
  --t-display-m:   48px;
  --t-display-s:   32px;  /* the floor for Anton — never smaller           */
  --t-lead:        29px;
  --t-body-l:      20px;
  --t-body:        17px;
  --t-small:       15px;
  --t-micro:       14px;
  --t-nano:        11px;

  --lh-display: .89;
  --lh-lead:   1.22;
  --lh-body:   1.60;
  --tr-display: -.005em;
  --tr-micro:    .24em;
  --tr-nano:     .16em;

  /* ---- space, shape, motion -------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --radius: 0;              /* corners are square                          */
  --radius-pill: 999px;     /* the only curve in the system                */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:      240ms;        /* state change                                */
  --dur-slow: 480ms;        /* reveal                                      */
}

/* ============================================================================
   TYPE PRIMITIVES
   ============================================================================ */

.pjc-display {
  font-family: var(--face-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--heading);
}
/* the terminal period always carries the accent */
.pjc-display i { font-style: normal; color: var(--accent); }

.pjc-lead {
  font-family: var(--face-text);
  font-weight: 300;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--body);
}

.pjc-body {
  font-family: var(--face-text);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--body);
}

.pjc-micro {
  font-family: var(--face-text);
  font-weight: 500;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
  color: var(--accent);
}
.pjc-micro b { font-weight: 500; color: var(--body-quiet); }
.pjc-micro .sep { opacity: .34; margin: 0 14px; }

/* ============================================================================
   SIGNATURE ELEMENTS — the four things that make it his
   ============================================================================ */

/* 1. THE SPINE — a lit edge holding a stack of type upright */
.pjc-spine {
  width: 3px;
  background: linear-gradient(to bottom,
    transparent, var(--accent) 18%, var(--accent) 82%, transparent);
}

/* 2. THE POOL — one warm light in the dark, always behind the subject */
.pjc-pool {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(300px 340px at var(--pool-x, 50%) var(--pool-y, 46%), rgba(255, 206, 166, .34), transparent 72%),
    radial-gradient(560px 600px at var(--pool-x, 50%) var(--pool-y, 54%), rgba(232, 142,  96, .24), transparent 74%),
    radial-gradient(1080px 980px at var(--pool-x, 50%) var(--pool-y, 58%), rgba(190,  96,  58, .15), transparent 72%);
  filter: blur(18px);
}

/* 3. THE VOID — the vignette that keeps the pool the brightest thing */
.pjc-void {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(140% 120% at var(--pool-x, 50%) var(--pool-y, 50%),
    transparent 42%, rgba(10, 11, 13, .78) 100%);
}

/* 4. THE GRAIN — 30% overlay, never more; it is texture, not an effect */
.pjc-grain {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='260' height='260' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}

/* ============================================================================
   IDENTITY
   ============================================================================ */

/* the monogram — Anton, always with the clay period */
.pjc-mark {
  font-family: var(--face-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .8;
  color: var(--heading);
}
.pjc-mark i { font-style: normal; color: var(--accent); }

/* the wordmark — Inter, deliberately quieter than any headline near it */
.pjc-wordmark {
  font-family: var(--face-text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--heading);
}

/* full lockup: mark · hairline · wordmark */
.pjc-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
}
.pjc-lockup .bar {
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}