/*
Theme Name: Jeff Falls
Theme URI: https://jefffalls.com
Author: Jeff Falls
Description: Custom theme for jefffalls.com. Constructivist editorial homepage plus writing section. Release 2026.1.
Version: 2026.1
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: jeff-falls
*/

:root{
  --cream:#efe7d8;
  --red:#FF0000;
  --black:#0d0d0d;
  --on-dark:#f3eddf;
  --maxw:1080px;
  --f-display:"Anton", Impact, sans-serif;
  --f-cond:"Oswald", "Arial Narrow", sans-serif;
  --f-slab:"Roboto Slab", Georgia, serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--cream);color:var(--black);font-family:var(--f-cond);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.site{max-width:var(--maxw);margin:0 auto;background:var(--cream);}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:640px;overflow:hidden;}
.hero__corner{position:absolute;top:0;left:0;width:104px;height:300px;background:var(--black);
  clip-path:polygon(0 0,100% 0,100% 56%,0 100%);z-index:1;}
.hero__name{position:absolute;top:14px;left:140px;z-index:5;margin:0;
  font-family:var(--f-display);font-weight:400;font-size:108px;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--black);display:flex;flex-direction:column;}
.hero__name span{display:block;line-height:1.04;}
.hero__nav{position:absolute;top:360px;left:26px;z-index:4;display:flex;flex-direction:column;gap:3px;}
.hero__nav a{font-family:var(--f-cond);font-weight:700;font-size:27px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--black);line-height:1.2;transition:color .15s;}
.hero__nav a:hover{color:var(--red);}
.hero__thesis{position:absolute;top:22px;right:22px;width:344px;height:344px;z-index:2;
  display:flex;align-items:center;justify-content:center;}
.hero__circle{position:absolute;inset:0;border-radius:50%;background:var(--red);z-index:-1;}
.hero__thesis-text{text-align:center;padding:0 34px;color:var(--on-dark);}
.hero__thesis-text .lead{margin:0;font-family:var(--f-slab);font-weight:700;font-size:40px;line-height:1.06;}
.hero__thesis-text .sub{margin:18px 0 0;font-family:var(--f-cond);font-weight:600;font-size:17px;font-style:italic;}
.hero__portrait{position:absolute;bottom:0;left:51%;transform:translateX(-50%);width:448px;z-index:3;}
.hero__roles{position:absolute;left:51%;transform:translateX(-50%);bottom:128px;z-index:4;margin:0;padding:0;
  list-style:none;color:#fff;text-align:center;font-family:var(--f-cond);font-weight:600;font-size:19px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.55;text-shadow:0 1px 4px rgba(0,0,0,.75);}

/* ========================= PHILOSOPHY ========================= */
.philosophy{position:relative;background:var(--cream);border-top:2px solid var(--black);}
.philosophy__img{width:100%;height:330px;object-fit:cover;object-position:left 12%;}
.philosophy__quote{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18px 26px;
  background:var(--red);color:#fff;font-family:var(--f-slab);font-weight:700;font-size:23px;line-height:1.2;}

/* ========================= EXPERIENCE ========================= */
.experience{border-top:2px solid var(--black);}
.xp-row{display:grid;grid-template-columns:repeat(5,1fr);}
.xp{display:flex;}
.xp__card{position:relative;flex:1;min-height:240px;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 16px 28px;}
.xp__logo{max-height:140px;max-width:100%;width:auto;}
.xp__logo--pn{max-height:120px;}
.xp__logo--dragon{max-height:102px;}            /* smaller dragon */
.xp__name-top{font-family:var(--f-cond);font-weight:700;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-dark);text-align:center;}
.xp__card--rdi{justify-content:flex-start;gap:14px;padding-top:22px;}
.xp__card--rdi .xp__logo--dragon{margin-top:6px;}
.xp__loc{margin-top:6px;color:var(--red);
  font-family:var(--f-cond);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;}
.xp__card--usc{padding:24px 14px 40px;}
.xp__usc{font-family:var(--f-display);font-size:82px;line-height:.82;color:var(--red);}
.xp__usc-sub{font-family:var(--f-slab);font-weight:400;font-size:21px;line-height:1.1;
  color:var(--on-dark);text-align:center;}

/* ========================== SERVICES ========================== */
.services{border-top:7px solid var(--red);}
.services__content{display:flex;background:var(--black);min-height:230px;}
.svc-praxis{flex:0 0 27%;background:var(--red);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px 40px 14px 18px;clip-path:polygon(0 0,100% 0,82% 100%,0 100%);}
.svc-praxis p{margin:0;font-family:var(--f-cond);font-weight:700;font-size:58px;line-height:.92;color:var(--on-dark);}
.svc-field{flex:1;display:flex;align-items:center;gap:24px;padding:0 24px 0 42px;}
.svc-divider{align-self:stretch;flex:0 0 8px;background:var(--red);transform:skewX(-11deg);margin:0 14px;}
.svc-ai{font-family:var(--f-display);font-size:150px;line-height:.74;color:var(--red);}
.svc-stack{font-family:var(--f-cond);font-weight:700;font-size:44px;line-height:.98;color:var(--on-dark);text-transform:uppercase;}
.svc-identity{flex:1;align-self:center;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 18px;}
.svc-identity .id{font-family:var(--f-display);font-size:72px;line-height:.82;color:#fff;text-transform:uppercase;}
.svc-identity .id-sub{font-family:var(--f-cond);font-weight:600;font-size:23px;line-height:1.1;color:#fff;margin-top:8px;}
.svc-identity .id-red{color:var(--red);}

/* ========================== CONTACT =========================== */
.contact{display:grid;grid-template-columns:330px 1fr 0.58fr;align-items:center;
  border-top:2px solid var(--black);min-height:340px;padding:20px 30px;}
.contact__art{display:flex;align-items:center;justify-content:center;padding-left:10px;}
.contact__art img{max-height:360px;width:auto;transform:rotate(-7deg);transform-origin:center;}
.contact__quote{text-align:center;padding:0 16px;}
.contact__quote p{margin:0;font-family:var(--f-slab);font-weight:700;font-size:36px;line-height:1.14;}
.contact__quote cite{display:block;font-style:normal;font-weight:400;font-size:24px;margin-top:14px;}
.contact__cta{display:flex;align-items:center;justify-content:center;}
.contact__bullseye{width:230px;height:230px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--f-cond);font-weight:700;font-size:26px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 0 0 10px var(--red),inset 0 0 0 13px var(--on-dark),
    inset 0 0 0 40px var(--red),inset 0 0 0 43px var(--on-dark);}

/* ========================== RESPONSIVE ========================= */
@media (max-width:820px){
  .hero{min-height:0;display:flex;flex-direction:column;overflow:visible;padding-bottom:12px;}
  .hero__corner{display:none;}
  .hero__nav{position:static;flex-direction:row;flex-wrap:wrap;gap:16px;justify-content:center;padding:18px 14px 4px;order:1;}
  .hero__nav a{font-size:21px;}
  .hero__name{position:static;align-items:center;font-size:90px;margin:6px 0;order:2;}
  .hero__name span{line-height:1.02;}
  .hero__thesis{position:relative;width:300px;height:300px;margin:8px auto;order:3;}
  .hero__thesis-text .lead{font-size:34px;}
  .hero__portrait{position:static;transform:none;margin:0 auto;width:340px;order:4;}
  .hero__roles{position:static;left:auto;transform:none;bottom:auto;order:5;color:var(--black);text-shadow:none;margin:14px auto 0;}
  .philosophy__img{height:250px;}
  .philosophy__quote{font-size:17px;}
  .xp-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .xp{scroll-snap-align:start;}
  .xp__card{min-height:250px;}
  .services__content{flex-direction:column;}
  .svc-praxis{flex:none;clip-path:none;padding:26px;}
  .svc-praxis p{font-size:54px;}
  .svc-field{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px;}
  .svc-divider{transform:none;flex-basis:3px;width:120px;margin:4px auto;}
  .svc-ai{font-size:130px;}
  .svc-identity{padding:18px 24px;}
  .contact{grid-template-columns:none;justify-items:center;gap:18px;padding:28px 14px;}
  .contact__art{padding:0;}
  .contact__art img{max-height:240px;}
  .contact__quote p{font-size:30px;}
}