/*
Theme Name: Reza Evol
Theme URI: https://rezaevol.com
Author: Reza Evol
Author URI: https://rezaevol.com
Description: Custom theme for rezaevol.com — a personal photography/video/journal site. Converted from a static HTML prototype. Photos are a custom post type ("Photo Project"); Journal uses native WordPress posts with the block editor so entries can be composed freely (paragraphs, images, and an optional "Big Statement" paragraph style).
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reza-evol
*/

/* ===================================================================
   SHARED / GLOBAL — loaded on every page. Page-specific CSS lives in
   assets/css/*.css and is enqueued conditionally in functions.php.
   =================================================================== */

/* ---- the six per-project/per-entry display fonts, same six used across
   Photos project titles and Journal entry titles. Each has a measured
   --scale multiplier (see reza_font_scale() in functions.php) so they all
   render at a consistent visual size despite very different glyph
   proportions — see the font-scale calibration notes in functions.php. */
@font-face{
  font-family:'Skaner Bold';
  src:url('assets/fonts/skaner-bold/SkanerBold.woff2') format('woff2'),
      url('assets/fonts/skaner-bold/SkanerBold.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mandhor';
  src:url('assets/fonts/mandhor/Mandhor.woff') format('woff'),
      url('assets/fonts/mandhor/Mandhor.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figuea Granatae';
  src:url('assets/fonts/figuea-granatae/FigueaGranatae.woff2') format('woff2'),
      url('assets/fonts/figuea-granatae/FigueaGranatae.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Reissfeder Optimal';
  src:url('assets/fonts/reissfeder-optimal/ReissfederOptimal-Regular.woff2') format('woff2'),
      url('assets/fonts/reissfeder-optimal/ReissfederOptimal-Regular.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Brighton Heritage';
  src:url('assets/fonts/brighton-heritage/BrightonHeritage-Regular.woff2') format('woff2'),
      url('assets/fonts/brighton-heritage/BrightonHeritage-Regular.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Blankenship';
  src:url('assets/fonts/blankenship/Blankenship.woff2') format('woff2'),
      url('assets/fonts/blankenship/Blankenship.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Morvila';
  src:url('assets/fonts/morvila/Morvila.woff2') format('woff2'),
      url('assets/fonts/morvila/Morvila.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ---- extended font library — Reza's full personal font stash, added on top of the original
   six so Photo Project / Journal title pickers have the whole set to choose from. Same
   calibration method (fontTools ink-bbox measurement, cross-checked with PIL) as the original
   six, scale values live in reza_font_options() in functions.php. ---- */
@font-face{
  font-family:'Abigaila Signature';
  src:url('assets/fonts/abigaila-signature/abigailasignature.woff2') format('woff2'),
      url('assets/fonts/abigaila-signature/abigailasignature.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Addinu Lana';
  src:url('assets/fonts/addinu-lana/addinulana.woff2') format('woff2'),
      url('assets/fonts/addinu-lana/addinulana.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'The Goblick';
  src:url('assets/fonts/the-goblick/thegoblick.woff2') format('woff2'),
      url('assets/fonts/the-goblick/thegoblick.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Alista Delita';
  src:url('assets/fonts/alista-delita/alistadelita.woff2') format('woff2'),
      url('assets/fonts/alista-delita/alistadelita.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Amirah Brillone';
  src:url('assets/fonts/amirah-brillone/amirahbrillone.woff2') format('woff2'),
      url('assets/fonts/amirah-brillone/amirahbrillone.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Avoiste Laverta';
  src:url('assets/fonts/avoiste-laverta/avoistelaverta.woff2') format('woff2'),
      url('assets/fonts/avoiste-laverta/avoistelaverta.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Awatte';
  src:url('assets/fonts/awatte/awatte.woff2') format('woff2'),
      url('assets/fonts/awatte/awatte.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Baby Sunday';
  src:url('assets/fonts/baby-sunday/babysunday.woff2') format('woff2'),
      url('assets/fonts/baby-sunday/babysunday.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Badaz Rough';
  src:url('assets/fonts/badaz-rough/badazrough.woff2') format('woff2'),
      url('assets/fonts/badaz-rough/badazrough.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bakora Handwriting';
  src:url('assets/fonts/bakora-handwriting/bakorahandwriting.woff2') format('woff2'),
      url('assets/fonts/bakora-handwriting/bakorahandwriting.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Beasty Strength';
  src:url('assets/fonts/beasty-strength/beastystrength.woff2') format('woff2'),
      url('assets/fonts/beasty-strength/beastystrength.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bird Ruth';
  src:url('assets/fonts/bird-ruth/birdruth.woff2') format('woff2'),
      url('assets/fonts/bird-ruth/birdruth.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'BlackStones';
  src:url('assets/fonts/black-stones/blackstones.woff2') format('woff2'),
      url('assets/fonts/black-stones/blackstones.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Boldatope';
  src:url('assets/fonts/boldatope/boldatope.woff2') format('woff2'),
      url('assets/fonts/boldatope/boldatope.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Curost';
  src:url('assets/fonts/curost/curost.woff2') format('woff2'),
      url('assets/fonts/curost/curost.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Distrex';
  src:url('assets/fonts/distrex/distrex.woff2') format('woff2'),
      url('assets/fonts/distrex/distrex.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Flossy';
  src:url('assets/fonts/flossy/flossy.woff2') format('woff2'),
      url('assets/fonts/flossy/flossy.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fontista';
  src:url('assets/fonts/fontista/fontista.woff2') format('woff2'),
      url('assets/fonts/fontista/fontista.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gecko Holmes';
  src:url('assets/fonts/gecko-holmes/geckoholmes.woff2') format('woff2'),
      url('assets/fonts/gecko-holmes/geckoholmes.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Harlem Brush';
  src:url('assets/fonts/harlem-brush/harlembrush.woff2') format('woff2'),
      url('assets/fonts/harlem-brush/harlembrush.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Horrraaa';
  src:url('assets/fonts/horrraaa/horrraaa.woff2') format('woff2'),
      url('assets/fonts/horrraaa/horrraaa.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Hunter Besphia';
  src:url('assets/fonts/hunter-besphia/hunterbesphia.woff2') format('woff2'),
      url('assets/fonts/hunter-besphia/hunterbesphia.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Magnum Ragnok';
  src:url('assets/fonts/magnum-ragnok/magnumragnok.woff2') format('woff2'),
      url('assets/fonts/magnum-ragnok/magnumragnok.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Martania';
  src:url('assets/fonts/martania/martania.woff2') format('woff2'),
      url('assets/fonts/martania/martania.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mifolks';
  src:url('assets/fonts/mifolks/mifolks.woff2') format('woff2'),
      url('assets/fonts/mifolks/mifolks.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Moscov';
  src:url('assets/fonts/moscov/moscov.woff2') format('woff2'),
      url('assets/fonts/moscov/moscov.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Party Fantasia';
  src:url('assets/fonts/party-fantasia/partyfantasia.woff2') format('woff2'),
      url('assets/fonts/party-fantasia/partyfantasia.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Phantomia';
  src:url('assets/fonts/phantomia/phantomia.woff2') format('woff2'),
      url('assets/fonts/phantomia/phantomia.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Pink Garden';
  src:url('assets/fonts/pink-garden/pinkgarden.woff2') format('woff2'),
      url('assets/fonts/pink-garden/pinkgarden.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Premiere California';
  src:url('assets/fonts/premiere-california/premierecalifornia.woff2') format('woff2'),
      url('assets/fonts/premiere-california/premierecalifornia.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Prime Script';
  src:url('assets/fonts/prime-script/primescript.woff2') format('woff2'),
      url('assets/fonts/prime-script/primescript.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mistigralley';
  src:url('assets/fonts/mistigralley/mistigralley.woff2') format('woff2'),
      url('assets/fonts/mistigralley/mistigralley.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Quillia';
  src:url('assets/fonts/quillia/quillia.woff2') format('woff2'),
      url('assets/fonts/quillia/quillia.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Reissfeder UHD';
  src:url('assets/fonts/reissfeder-uhd/reissfederuhd.woff2') format('woff2'),
      url('assets/fonts/reissfeder-uhd/reissfederuhd.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Simours';
  src:url('assets/fonts/simours/simours.woff2') format('woff2'),
      url('assets/fonts/simours/simours.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Streaklines';
  src:url('assets/fonts/streaklines/streaklines.woff2') format('woff2'),
      url('assets/fonts/streaklines/streaklines.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Strikes';
  src:url('assets/fonts/strikes/strikes.woff2') format('woff2'),
      url('assets/fonts/strikes/strikes.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'The Punk Notes';
  src:url('assets/fonts/the-punk-notes/thepunknotes.woff2') format('woff2'),
      url('assets/fonts/the-punk-notes/thepunknotes.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Tweet Lesson';
  src:url('assets/fonts/tweet-lesson/tweetlesson.woff2') format('woff2'),
      url('assets/fonts/tweet-lesson/tweetlesson.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Xantegrode Signature';
  src:url('assets/fonts/xantegrode-signature/xantegrodesignature.woff2') format('woff2'),
      url('assets/fonts/xantegrode-signature/xantegrodesignature.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}

:root{
  --paper:#f4f3ef;
  --paper-2:#eeece6;
  --ink:#2a2a26;
  --ink-red:#8c2f1f;
  --muted:#79776d;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Special Elite', 'Courier New', monospace;
  overflow-x:hidden;
  width:100%;
}
body{ position:relative; min-height:100vh; display:flex; flex-direction:column; }
/* WP's own admin bar switches from position:fixed to position:absolute at narrow widths (its
   own mobile behavior). An absolutely-positioned #wpadminbar (a direct child of body) then uses
   the nearest positioned ancestor as its containing block -- which is body itself, because of
   the position:relative above. Since body is pushed down by <html>'s admin-bar margin-top, the
   bar ends up rendered *below* that margin instead of flush at the true viewport top, showing as
   a blank gap above a bar that's sitting too low. Only affects logged-in viewing; body.admin-bar
   only exists when logged in, so this has zero effect on real visitors. */
body.admin-bar{ position:static; }
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url('assets/img/Reza-Evol-BG.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(20,20,18,0.07) 100%);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

/* ---- nav (shared header.php) ---- */
/* body (above) is a flex column at every breakpoint — nav/footer are fixed-size flex children
   (flex:0 0 auto) so only main ever grows/shrinks to fill the remaining space */
nav#siteNav{
  flex:0 0 auto;
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 40px; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; border-bottom:1px dashed rgba(43,36,28,0.3);
}
nav#siteNav .brand{ font-size:14px; }
nav#siteNav .links{ display:flex; gap:26px; }
nav#siteNav .links a:hover{ color:var(--ink-red); }
nav#siteNav .links a.active{ color:var(--ink-red); box-shadow:0 2px 0 var(--ink-red); }

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:26px; height:20px;
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; width:100%; height:2px; background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
nav.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

main{ position:relative; z-index:1; flex:1 0 auto; }

/* ---- footer (shared footer.php) ---- */
footer#siteFooter{
  flex:0 0 auto;
  position:relative; z-index:1; padding:36px 40px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--muted);
  border-top:1px dashed rgba(43,36,28,0.3);
  text-transform:uppercase; letter-spacing:0.05em;
}
footer#siteFooter .stamp{
  border:2px solid var(--ink-red); color:var(--ink-red);
  padding:6px 14px; transform:rotate(-4deg);
  font-family:'Special Elite', monospace; font-size:11px;
}
footer#siteFooter a:hover{ color:var(--ink); }

.back{
  display:block;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.back:hover{ color:var(--ink-red); }

/* ---- WordPress core block defaults, so ordinary post content (paragraphs, images) dropped
   into the Journal editor looks right without extra classes ---- */
/* plain paragraphs read as normal body copy at a comfortable line length — this is the
   "actual paragraph" option from the punchy-statement-vs-paragraph choice; it only becomes a
   big bold statement where the .is-style-big-statement style (below) is deliberately applied */
.entry-content p{ font-size:16px; line-height:1.8; color:var(--ink); margin:0 auto 1.4em; max-width:640px; text-align:left; }
.entry-content a{ color:var(--ink-red); text-decoration:underline; }
.entry-content a:hover{ color:var(--ink); }
.entry-content img{ display:block; width:100%; height:auto; max-width:1100px; box-shadow:0 26px 55px rgba(43,36,28,0.2); margin:2em auto; }
.entry-content figure{ margin:2em auto; max-width:1100px; }
.entry-content figcaption{ font-family:'Kalam',cursive; font-size:14px; color:var(--muted); text-align:center; margin-top:10px; }
/* Headings and blockquotes inside journal/page content had zero margin (the global reset zeroes
   everything and nothing added it back for these two block types), so a Heading block followed
   by a Quote block ran together with no breathing room, and the quote wasn't visually distinct
   from body text (same 16px, no italics). Also opened up the WP gallery block's default 8px
   image gap, which read as cramped next to the 32px rhythm of single images. */
.entry-content h2{ font-size:26px; font-weight:700; letter-spacing:0.02em; color:var(--ink); margin:1.6em auto 0.6em; max-width:640px; text-align:left; }
.entry-content h2:first-child{ margin-top:0; }
.entry-content blockquote{ font-family:'Kalam', cursive; font-style:italic; font-size:18px; color:var(--muted); border-left:3px solid var(--ink-red); padding-left:18px; margin:0.8em auto 1.6em; max-width:640px; text-align:left; }
.entry-content .wp-block-gallery{ gap:24px; }

/* "Big Statement" paragraph block style — registered in functions.php via register_block_style()
   so it shows up as a one-click style option in the editor's block sidebar for any paragraph.
   Reads --entry-font/--entry-scale, which single.php sets as inline custom properties on the
   <article> based on the post's chosen font (see the entry_font meta box). This is the whole
   answer to "I want to decide punchy statements vs. paragraphs per-post" — every paragraph is
   plain body text by default, and becomes a big bold statement only where this style is
   deliberately applied. */
.entry-content p.is-style-big-statement{
  font-family:var(--entry-font, 'Special Elite');
  font-size:calc(clamp(30px, 5.5vw, 64px) * var(--entry-scale, 1));
  line-height:1.2; letter-spacing:0.005em;
  color:var(--ink);
  text-align:center;
  max-width:900px; margin:0.6em auto;
}

@media (max-width:860px){
  nav#siteNav{ position:relative; justify-content:space-between; padding:14px 20px; }
  .nav-toggle{ display:flex; }
  nav#siteNav .links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper);
    border-bottom:1px dashed rgba(43,36,28,0.3);
    box-shadow:0 14px 26px rgba(43,36,28,0.14);
  }
  /* #siteNav (not just .nav-open) needed here so this beats the ID-specificity of
     "nav#siteNav .links{display:none}" above -- without the ID, that hide rule always won
     the cascade even after .nav-open was added, which was the mobile "menu does nothing" bug. */
  nav#siteNav.nav-open .links{ display:flex; }
  nav#siteNav .links a{ text-align:center; font-size:12px; padding:16px 20px; border-top:1px dashed rgba(43,36,28,0.15); }

  footer#siteFooter{
    display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:16px;
    padding:14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); font-size:9px;
  }
  footer#siteFooter span{ grid-column:1; font-size:11px; }
  footer#siteFooter .stamp{ grid-column:2; justify-self:end; align-self:center; padding:5px 10px; font-size:9px; }
}

@media (min-width:861px){
  nav#siteNav{ padding:16px 40px; }
  footer#siteFooter{ padding:16px 40px; }
}