/*
Theme Name: New Jersey Creative
Theme URI: https://newjerseycreative.com
Author: Alexander Rowe
Author URI: https://alexrowe.co
Description: A minimal, art-directed portfolio theme. The front page is a single scroll-driven animation of an everything bagel being assembled; the Blank Canvas template gives you the same header and footer around an empty content area.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newjerseycreative
Tags: portfolio, one-page, custom-colors, translation-ready
*/

/* ============================================================
   NEW JERSEY CREATIVE
   Scroll-driven bagel assembly
   ------------------------------------------------------------
   1. Tokens
   2. Page shell + scroll track
   3. Fixed UI chrome
   4. SVG type styles
   5. Reduced motion
   ============================================================ */

/* --- 1. Tokens ------------------------------------------- */
:root{
  --paper:        #E7E8E5;
  --paper-edge:   #D3D5D0;
  --ink:          #17191C;
  --ink-soft:     #797E80;
  --scallion:     #5F8C3F;
  --red:          #C0261F;

  --display: Baskerville, "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", "Times New Roman", serif;
  --utility: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* --- 2. Page shell + scroll track ------------------------ */
*{ box-sizing:border-box; }

html{ background:var(--paper); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:var(--utility);
}

/* Soft cool vignette so the stage centre stays the brightest point. */
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%, rgba(120,126,124,.18) 100%);
}

/* Static film grain. Rendered once, never animated — costs nothing per frame. */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

#track{ position:relative; height:900vh; }

.stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  z-index:0;
}

#scene{ width:100%; height:100%; display:block; }

/* --- 3. Fixed UI chrome ---------------------------------- */
.chrome{
  position:fixed; z-index:3; pointer-events:none;
  font-family:var(--utility);
  font-size:10px; line-height:1.4;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.chrome b{ font-weight:400; color:var(--ink); }

.c-mark{ top:26px; left:28px; }
.c-caption{ bottom:26px; left:28px; transition:opacity .28s ease; }
.c-hint{ bottom:26px; right:28px; transition:opacity .5s ease; }

/* Contact. The only clickable element in the chrome, so it opts back
   into pointer events that the rest of the overlay opts out of. */
.c-contact{
  top:24px; right:28px;
  pointer-events:auto;
  color:var(--ink-soft);
  text-decoration:none;
  padding-bottom:5px;
  border-bottom:1px solid rgba(23,25,28,.20);
  transition:color .25s ease, border-color .25s ease;
}
.c-contact:hover,
.c-contact:focus-visible{ color:var(--ink); border-bottom-color:var(--scallion); }
.c-contact:focus-visible{ outline:2px solid var(--scallion); outline-offset:5px; }

/* Hairline scroll progress on the right edge. */
.c-rail{
  top:50%; right:22px; transform:translateY(-50%);
  width:1px; height:132px;
  background:rgba(23,25,28,.16);
}
.c-rail i{
  position:absolute; top:0; left:0; width:1px; height:0;
  background:var(--scallion);
  transform-origin:top;
}

@media (max-width:640px){
  .c-mark{ top:18px; left:18px; }
  .c-caption{ bottom:18px; left:18px; }
  .c-hint{ bottom:18px; right:18px; }
  .c-rail{ display:none; }
  .chrome{ font-size:9px; letter-spacing:.18em; }
}

/* --- 4. SVG type styles ---------------------------------- */
.wordmark{
  font-family:var(--display);
  font-size:46px;
  letter-spacing:.045em;
  fill:var(--ink);
}
.tagline{
  font-family:var(--utility);
  font-size:11.5px;
  letter-spacing:.44em;
  fill:var(--ink-soft);
}

/* Opening title card. Three lines, one size, tight leading — the ragged
   centre edge is the point, so nothing here is optically justified. */
.hero-line{
  font-family:var(--display);
  font-size:132px;
  letter-spacing:.03em;
  fill:var(--ink);
}
/* SCHMEAR starts the same ink as the lines above it and bleeds to red on
   scroll — the fill is driven from JS, so no colour is declared here. */
.hero-line.accent{ }

#igLink{ cursor:pointer; }
#igLink .ig{ transition:stroke .25s ease; }
#igLink .igdot{ transition:fill .25s ease; }
#igLink:hover .ig,
#igLink:focus-visible .ig{ stroke:var(--ink); }
#igLink:hover .igdot,
#igLink:focus-visible .igdot{ fill:var(--ink); }

/* --- 5. Reduced motion ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  #track{ height:100vh; height:100svh; }
  .c-hint{ display:none; }
}

/* ============================================================
   NEW JERSEY CREATIVE
   Scroll-driven bagel assembly
   ------------------------------------------------------------
   1. Tokens
   2. Page shell + scroll track
   3. Fixed UI chrome
   4. SVG type styles
   5. Reduced motion
   ============================================================ */

/* --- 1. Tokens ------------------------------------------- */
:root{
  --paper:        #E7E8E5;
  --paper-edge:   #D3D5D0;
  --ink:          #17191C;
  --ink-soft:     #797E80;
  --scallion:     #5F8C3F;
  --red:          #C0261F;

  --display: Baskerville, "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", "Times New Roman", serif;
  --utility: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* --- 2. Page shell + scroll track ------------------------ */
*{ box-sizing:border-box; }

html{ background:var(--paper); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:var(--utility);
}

/* Soft cool vignette so the stage centre stays the brightest point. */
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%, rgba(120,126,124,.18) 100%);
}

/* Static film grain. Rendered once, never animated — costs nothing per frame. */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

#track{ position:relative; height:900vh; }

.stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  z-index:0;
}

#scene{ width:100%; height:100%; display:block; }

/* --- 3. Fixed UI chrome ---------------------------------- */
.chrome{
  position:fixed; z-index:3; pointer-events:none;
  font-family:var(--utility);
  font-size:10px; line-height:1.4;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.chrome b{ font-weight:400; color:var(--ink); }

.c-mark{ top:26px; left:28px; }
.c-caption{ bottom:26px; left:28px; transition:opacity .28s ease; }
.c-hint{ bottom:26px; right:28px; transition:opacity .5s ease; }

/* Contact. The only clickable element in the chrome, so it opts back
   into pointer events that the rest of the overlay opts out of. */
.c-contact{
  top:24px; right:28px;
  pointer-events:auto;
  color:var(--ink-soft);
  text-decoration:none;
  padding-bottom:5px;
  border-bottom:1px solid rgba(23,25,28,.20);
  transition:color .25s ease, border-color .25s ease;
}
.c-contact:hover,
.c-contact:focus-visible{ color:var(--ink); border-bottom-color:var(--scallion); }
.c-contact:focus-visible{ outline:2px solid var(--scallion); outline-offset:5px; }

/* Hairline scroll progress on the right edge. */
.c-rail{
  top:50%; right:22px; transform:translateY(-50%);
  width:1px; height:132px;
  background:rgba(23,25,28,.16);
}
.c-rail i{
  position:absolute; top:0; left:0; width:1px; height:0;
  background:var(--scallion);
  transform-origin:top;
}

@media (max-width:640px){
  .c-mark{ top:18px; left:18px; }
  .c-caption{ bottom:18px; left:18px; }
  .c-hint{ bottom:18px; right:18px; }
  .c-rail{ display:none; }
  .chrome{ font-size:9px; letter-spacing:.18em; }
}

/* --- 4. SVG type styles ---------------------------------- */
.wordmark{
  font-family:var(--display);
  font-size:46px;
  letter-spacing:.045em;
  fill:var(--ink);
}
.tagline{
  font-family:var(--utility);
  font-size:11.5px;
  letter-spacing:.44em;
  fill:var(--ink-soft);
}

/* Opening title card. Three lines, one size, tight leading — the ragged
   centre edge is the point, so nothing here is optically justified. */
.hero-line{
  font-family:var(--display);
  font-size:132px;
  letter-spacing:.03em;
  fill:var(--ink);
}
/* SCHMEAR starts the same ink as the lines above it and bleeds to red on
   scroll — the fill is driven from JS, so no colour is declared here. */
.hero-line.accent{ }

#igLink{ cursor:pointer; }
#igLink .ig{ transition:stroke .25s ease; }
#igLink .igdot{ transition:fill .25s ease; }
#igLink:hover .ig,
#igLink:focus-visible .ig{ stroke:var(--ink); }
#igLink:hover .igdot,
#igLink:focus-visible .igdot{ fill:var(--ink); }

/* --- 5. Reduced motion ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  #track{ height:100vh; height:100svh; }
  .c-hint{ display:none; }
}

/* ============================================================
   6. WordPress chrome
   Everything below is theme-only; the sections above are shared
   with the standalone prototype.
   ============================================================ */

/* The scroll track only exists on the animated front page. */
#track{ height:auto; }
.njc-front #track{ height:900vh; }

/* Sit the sticky stage below the admin bar when it is present. */
.admin-bar .stage{ top:32px; height:calc(100vh - 32px); height:calc(100svh - 32px); }
@media screen and (max-width:782px){
  .admin-bar .stage{ top:46px; height:calc(100vh - 46px); height:calc(100svh - 46px); }
}

.c-mark a{ color:inherit; text-decoration:none; }
.c-mark a:focus-visible{ outline:2px solid var(--scallion); outline-offset:5px; }

/* --- Page content (Blank Canvas + fallback) --------------- */
.njc-page{
  position:relative; z-index:0;
  max-width:720px;
  margin:0 auto;
  padding:150px 28px 20px;
  font-family:var(--display);
  font-size:18px;
  line-height:1.65;
}
.njc-page > *:first-child{ margin-top:0; }
.njc-page h1,.njc-page h2,.njc-page h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.12;
  margin:1.8em 0 .5em;
}
.njc-page h1{ font-size:46px; }
.njc-page h2{ font-size:32px; }
.njc-page h3{ font-size:24px; }
.njc-page a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--scallion); }
.njc-page a:hover{ text-decoration-color:var(--ink); }
.njc-page img{ max-width:100%; height:auto; }
.njc-page .njc-meta{
  font-family:var(--utility); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft);
}

@media (max-width:640px){
  .njc-page{ padding:120px 20px 10px; font-size:17px; }
  .njc-page h1{ font-size:34px; }
  .njc-page h2{ font-size:26px; }
}

/* --- Site footer ------------------------------------------ */
.njc-footer{
  position:relative; z-index:0;
  text-align:center;
  padding:80px 24px 78px;
}
.njc-rule{ width:132px; height:1px; background:var(--scallion); margin:0 auto 44px; }

.njc-bagel-mark{ display:block; width:168px; height:auto; margin:0 auto 26px; }

.njc-footer-name{
  font-family:var(--display);
  font-size:34px; font-weight:400; letter-spacing:.045em;
  color:var(--ink);
  margin:0 0 16px;
}
.njc-footer-tag{
  font-family:var(--utility);
  font-size:10px; letter-spacing:.44em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.njc-footer-tag .dot{ color:var(--scallion); }

.njc-social{ margin:28px 0 0; line-height:0; }
.njc-social a{
  display:inline-block; color:var(--ink-soft);
  transition:color .25s ease;
}
.njc-social a:hover,
.njc-social a:focus-visible{ color:var(--ink); }
.njc-social a:focus-visible{ outline:2px solid var(--scallion); outline-offset:6px; }
.njc-social svg{ width:22px; height:22px; display:block; }

@media (max-width:640px){
  .njc-footer{ padding:56px 20px 60px; }
  .njc-bagel-mark{ width:130px; }
  .njc-footer-name{ font-size:27px; }
  .njc-rule{ margin-bottom:32px; }
}