/* John Perkins Creative — shared client gallery and studio tokens.
 *
 * Two surfaces share these tokens: the light-first client gallery (quiet, the
 * photos do the work) and a dark-first owner console (a calm tool). Re-skin
 * everything by editing tokens here — no component reads a raw color. Both
 * surfaces override --brand at runtime from settings.accent.
 */

:root {
  /* Surface — light default (client gallery + landing) */
  --bg:          #f3f0e9;
  --bg-tint:     #e9e5db;
  --surface:     #faf8f2;
  --surface-2:   #eeeae1;
  --surface-3:   #e9e5db;
  --border:      rgba(20, 18, 14, 0.10);
  --border-soft: rgba(20, 18, 14, 0.06);
  --hairline:    rgba(20, 18, 14, 0.08);
  --scrim:       rgba(15, 15, 20, 0.45);

  --text:        #20231f;
  --text-dim:    #65675f;
  --text-faint:  #6e7066;

  /* Brand — overridden at runtime from settings.accent */
  --brand:       #c9ae7c;
  --brand-soft:  rgba(201, 174, 124, 0.18);
  --brand-ink:   #78613a;
  --brand-fg:    #20231f;

  --success:     #16a34a;
  --success-bg:  rgba(22, 163, 74, 0.10);
  --warning:     #b45309;
  --warning-bg:  rgba(180, 83, 9, 0.10);
  --danger:      #dc2626;
  --danger-bg:   rgba(220, 38, 38, 0.10);
  --danger-fg:   #ffffff;

  --sans:        Arial, Helvetica, sans-serif;
  --serif:       Georgia, 'Times New Roman', serif;
  --mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-sm:   3px;
  --radius:      4px;
  --radius-lg:   6px;
  --radius-xl:   8px;

  --shadow-card: 0 1px 2px rgba(20, 18, 14, 0.04);
  --shadow-soft: 0 4px 20px -8px rgba(20, 18, 14, 0.18);
  --shadow-pop:  0 24px 60px -24px rgba(20, 18, 14, 0.28), 0 0 0 1px var(--border);

  --focus-ring:  var(--brand-ink);

  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur:         140ms;
}

/* Dark — the owner console (data-theme="dark"). */
:root[data-theme="dark"] {
  --bg:          #20231f;
  --bg-tint:     #292d27;
  --surface:     #252923;
  --surface-2:   #2c3029;
  --surface-3:   #34392f;
  --border:      rgba(255, 255, 255, 0.09);
  --border-soft: rgba(255, 255, 255, 0.05);
  --hairline:    rgba(255, 255, 255, 0.07);
  --scrim:       rgba(0, 0, 0, 0.6);

  --text:        #f3f0e9;
  --text-dim:    #c0c1b7;
  --text-faint:  #a0a397;

  --brand-fg:    #20231f;
  --brand-ink:   #c9ae7c;
  --success:     #22c55e;
  --success-bg:  rgba(34, 197, 94, 0.12);
  --warning:     #eab308;
  --warning-bg:  rgba(234, 179, 8, 0.12);
  --danger:      #ef4444;
  --danger-bg:   rgba(239, 68, 68, 0.12);

  --shadow-card: none;
  --shadow-soft: 0 8px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-pop:  0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border);
}

/* ─── Globals ───────────────────────────────────────────────────────────── */

html, body { background: var(--bg); color: var(--text); }

/* Alpine: hide x-cloak elements until the component initializes (no flash of
 * the lightbox / PIN states on the gallery page). */
[x-cloak] { display: none !important; }

body {
  font-family: var(--sans);
  font-feature-settings: "cv11", "ss01";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; color: var(--text); }

.mono { font-family: var(--mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }

.label-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 600;
}

::selection { background: var(--brand-soft); color: var(--text); }

::-webkit-scrollbar              { width: 10px; height: 10px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover  { background: var(--text-faint); }

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 360ms var(--ease) both; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.7s linear infinite; }

/* Heart pop when a photo is picked. */
@keyframes heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.heart-pop { animation: heart-pop 260ms var(--ease); }

/* Match the portfolio's SVG arrows; fixed size avoids font-dependent glyphs. */
.ui-icon { display: inline-block; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.jpc-nav a, .jpc-footer a, .jpc-arrow-action { display: inline-flex; align-items: center; gap: .5rem; }
.jpc-arrow-action { justify-content: center; }
@media (max-width: 700px) {
 .jpc-header { gap: 1rem; }
 .jpc-nav { gap: .75rem; }
 .jpc-nav a { gap: .3rem; }
 .jpc-nav .ui-icon { width: 1rem; height: 1rem; }
}

/* The portfolio's identity, shared across every gallery state. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 400 !important; letter-spacing: -.045em !important; }
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem) !important; line-height: 1.06 !important; }
.label-eyebrow { color: var(--text-dim); letter-spacing: .17em; }
.jpc-wordmark { display: grid; gap: .12rem; width: fit-content; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: .98; letter-spacing: .135em; text-decoration: none; white-space: nowrap; }
.jpc-dot { color: #c9ae7c; }
.jpc-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--hairline); }
.jpc-nav { display: flex; align-items: center; gap: 2rem; }
.jpc-nav a { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.jpc-nav a:hover { color: var(--brand-ink); }
.jpc-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.6rem clamp(1.25rem, 5vw, 5rem); border-top: 1px solid var(--hairline); color: var(--text-dim); font-size: .7rem; letter-spacing: .05em; }
.jpc-footer a { text-decoration: none; }
.jpc-admin-wordmark { font-size: .8rem; }
.jpc-admin-header { height: 5.2rem; }
.jpc-gallery-heading { max-width: 1180px; margin: auto; text-align: left; padding: 4.5rem 1.5rem 2.5rem; }
.jpc-gallery-heading h1 { font-size: clamp(2.7rem, 5.2vw, 5rem) !important; max-width: 950px; }
.jpc-gallery-help { max-width: 36rem; margin-top: 1.3rem; color: var(--text-dim); font-size: .875rem; line-height: 1.7; }
.jpc-gallery-footer { padding-bottom: 7rem; }
.jpc-picks-bar { background: rgba(243, 240, 233, .97); backdrop-filter: blur(12px); }
.jpc-shell { min-height: 100svh; display: flex; flex-direction: column; }
.jpc-home { flex: 1; padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem); }
.jpc-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(3rem, 8vw, 8rem); max-width: 1440px; margin: auto; }
.jpc-eyebrow { display: flex; align-items: center; gap: .8rem; margin: 0 0 2rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.jpc-index { color: var(--brand-ink); }
.jpc-home h1 { margin: 0 0 2rem; font-size: clamp(3.7rem, 7vw, 7.8rem) !important; line-height: .99 !important; max-width: 800px; }
.jpc-home h1 em { font-weight: 400; }
.jpc-home-lead { max-width: 28rem; font-size: 1rem; line-height: 1.75; color: var(--text-dim); margin: 0; }
.jpc-guide { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.jpc-guide h2 { margin: 0 0 1.5rem; font-size: 2rem; }
.jpc-step { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); }
.jpc-step > span { color: var(--brand-ink); font-size: .7rem; padding-top: .3rem; letter-spacing: .1em; }
.jpc-step h3 { margin: 0 0 .6rem; font-size: .9rem; font-weight: 700; }
.jpc-step p { margin: 0; color: var(--text-dim); font-size: .875rem; line-height: 1.7; }
.jpc-help { margin-top: 2rem; color: var(--text-dim); font-size: .8rem; line-height: 1.8; }
.jpc-text-link { display: inline-flex; gap: 1rem; align-items: center; margin-top: 2rem; border-bottom: 1px solid currentColor; padding-bottom: .6rem; font-size: .7rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; text-decoration: none; }
@media (max-width: 700px) {
 .jpc-intro { grid-template-columns: 1fr; gap: 3.5rem; }
 .jpc-header { padding-block: 1.5rem; }
 .jpc-wordmark { font-size: .85rem; }
 .jpc-nav { gap: 1rem; }
 .jpc-nav a { font-size: .6rem; letter-spacing: .08em; }
 .jpc-footer { flex-direction: column; }
 .jpc-gallery-heading { padding: 3rem 1.25rem 2rem; }
 .jpc-admin-wordmark { font-size: .65rem; }
}
.jpc-nav a { white-space: nowrap; }
@media (max-width: 700px) {
 .jpc-header { gap: .75rem; }
 .jpc-wordmark { font-size: .8rem; }
 .jpc-nav { gap: .5rem; }
 .jpc-nav a { gap: .25rem; }
 .jpc-nav .ui-icon { width: .9rem; height: .9rem; }
}
@media (max-width: 360px) {
 .jpc-header { flex-wrap: wrap; }
 .jpc-nav { width: 100%; gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}