/* evanjmontgomery.com · Evan J. Montgomery's personal brand (brand/evan-montgomery-personal-brand-book-2026-09-29.webp)
   forest, moss, olive, antique gold, beige stone, parchment, charcoal · Cinzel caps, Cormorant Garamond · the thin gold triangle */
:root{
  --forest:#0B2E1F;--moss:#1E3A27;--olive:#4A5F3A;--gold:#C9A96B;--stone:#D9C9B0;--parch:#EFE7D6;--char:#3A3A37;--deep:#05160F;
  --paper:#F6F0E3;--ink:#1F2B24;--soft:#5A6257;--line:rgba(201,169,107,.38);
  --au:linear-gradient(180deg,#F3E3B4 0%,#D6BA7E 36%,#C9A968 58%,#8F6F38 100%);
  --cz:'Cinzel','Trajan Pro',serif;--cg:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--cg);font-weight:500;font-size:clamp(19px,1.25vw + 14px,22px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.1em}
h1,h2,h3{margin:0;font-family:var(--cz);font-weight:500;line-height:1.14;letter-spacing:.04em;text-wrap:balance}
.cz{font-family:var(--cz);text-transform:uppercase;letter-spacing:.22em;font-weight:500}
.au{background:var(--au);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:780px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--deep);padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* top bar */
.top{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--pad)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--parch);font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:14px;white-space:nowrap}
.brand .bm{width:34px;height:34px;flex:none}
.top nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.top nav a{font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;text-decoration:none;color:var(--stone);padding:8px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.top nav a:hover,.top nav a[aria-current]{color:#F3E3B4;border-color:var(--gold)}
.top nav a.cta{border:1px solid var(--line);padding:9px 18px;border-radius:2px}
.top nav a.cta:hover,.top nav a.cta[aria-current]{background:rgba(201,169,107,.14);border-color:var(--gold)}
.menu{display:none;background:none;border:1px solid var(--line);color:var(--stone);font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:12px;padding:9px 14px;border-radius:2px;cursor:pointer}

/* dark grounds */
.night{position:relative;color:var(--parch);background:radial-gradient(70% 80% at 30% 38%,#1E4A37 0%,#123628 32%,#0B2E1F 58%,#05160F 100%);overflow:hidden;isolation:isolate}
.night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1px 1px at 12% 18%,rgba(243,227,180,.7),transparent 60%),radial-gradient(1px 1px at 78% 12%,rgba(243,227,180,.55),transparent 60%),radial-gradient(1.5px 1.5px at 64% 30%,rgba(243,227,180,.5),transparent 60%),radial-gradient(1px 1px at 90% 44%,rgba(243,227,180,.45),transparent 60%),radial-gradient(1px 1px at 44% 9%,rgba(243,227,180,.5),transparent 60%),radial-gradient(1px 1px at 6% 52%,rgba(243,227,180,.4),transparent 60%)}
.ridges{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;z-index:-1;pointer-events:none}

/* home hero */
.hero{min-height:min(100svh,940px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:center;gap:clamp(12px,3vw,56px);padding:120px var(--pad) 150px}
.hero .sigil{overflow:visible;justify-self:center;width:min(100%,470px);filter:drop-shadow(0 0 34px rgba(243,227,180,.16))}
.hero .words{max-width:640px}
.eyebrow{font-family:var(--cz);text-transform:uppercase;letter-spacing:.34em;font-size:12.5px;color:var(--gold);margin:0 0 22px}
.hero h1{font-size:clamp(36px,5.1vw,84px);letter-spacing:.06em;text-transform:uppercase;line-height:1.02}
.hero h1 span{display:block}
.rule{width:64px;height:1px;background:var(--gold);margin:30px 0 26px;border:0}
.tag{font-family:var(--cz);text-transform:uppercase;letter-spacing:.34em;font-size:clamp(13px,1.3vw,17px);color:var(--parch);margin:0 0 14px}
.lead{font-style:italic;font-size:clamp(21px,1.9vw,27px);color:var(--stone);margin:0 0 36px}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:13px;text-decoration:none;padding:15px 24px;border:1px solid var(--gold);border-radius:2px;color:#F3E3B4;background:transparent;cursor:pointer;transition:background .3s,color .3s,transform .3s}
.btn svg{width:18px;height:18px;transition:transform .3s}
.btn:hover{background:rgba(201,169,107,.16)}
.btn:hover svg{transform:translateX(4px)}
.btn.solid{background:var(--au);color:var(--deep);border-color:transparent;font-weight:600}
.btn.solid:hover{filter:brightness(1.06)}
.btn.dark{color:var(--forest);border-color:var(--forest)}
.btn.dark:hover{background:var(--forest);color:var(--parch)}
.pillrow{position:absolute;left:0;right:0;bottom:34px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 30px;padding:0 var(--pad);font-family:var(--cz);text-transform:uppercase;letter-spacing:.34em;font-size:11.5px;color:rgba(239,231,214,.74);list-style:none;margin:0}

/* the sigil: slow, like water */
.sigil .orb{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out infinite}
.sigil .orb:nth-of-type(2){animation-delay:-1s}.sigil .orb:nth-of-type(3){animation-delay:-2s}.sigil .orb:nth-of-type(4){animation-delay:-3s}
.sigil .orb:nth-of-type(5){animation-delay:-4s}.sigil .orb:nth-of-type(6){animation-delay:-5s}.sigil .orb:nth-of-type(7){animation-delay:-6s}
.sigil .helix{stroke-dasharray:3 9;animation:flow 26s linear infinite}
.sigil .halo{animation:breathe 9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes breathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes flow{to{stroke-dashoffset:-240}}

/* page hero (inner pages) */
.phero{padding:150px var(--pad) 110px;text-align:center}
.phero h1{font-size:clamp(34px,4.8vw,64px);text-transform:uppercase;letter-spacing:.08em}
.phero .lead{margin:22px auto 0;max-width:720px}
.phero .rule{margin:26px auto 0}

/* sections */
.band{padding:clamp(64px,9vw,128px) 0}
.band.parch{background:var(--parch)}
.band.paper{background:var(--paper)}
.band.forest{background:var(--forest);color:var(--parch)}
.band.forest .eyebrow,.band.deep .eyebrow{color:var(--gold)}
.band.deep{background:var(--deep);color:var(--parch)}
.band .eyebrow{color:#8B6F3A}
h2{font-size:clamp(28px,3.3vw,46px);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.6em}
h3{font-size:clamp(17px,1.5vw,20px);text-transform:uppercase;letter-spacing:.2em;margin-bottom:.7em}
.prose a,.fine a,.tlink{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1px}
.prose a:hover,.fine a:hover,.tlink:hover{color:#8B6F3A}
.forest .prose a:hover,.deep .prose a:hover,.foot .fine a:hover{color:#F3E3B4}
.more{display:inline-flex;align-items:center;gap:10px;font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:13px;text-decoration:none;color:#7A5F2E;border-bottom:1px solid var(--gold);padding-bottom:5px;margin-top:8px}
.more svg{width:16px;height:16px;transition:transform .3s}
.more:hover svg{transform:translateX(4px)}
.small{font-size:.82em;color:var(--soft)}
.forest .small,.deep .small,.night .small{color:rgba(239,231,214,.74)}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.split.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.frame{position:relative;margin:0}
.frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);z-index:0}
.frame img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.frame figcaption{position:relative;z-index:1;margin-top:30px;font-family:var(--cz);text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--soft)}

.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillars li{list-style:none;padding:38px 20px 34px;text-align:center;border-left:1px solid rgba(201,169,107,.2)}
.pillars li:first-child{border-left:0}
.pillars{padding:0}
.pillars h3{color:#F3E3B4;margin-bottom:16px;font-size:clamp(13px,1.2vw,17px);letter-spacing:.14em}
.pillars p{margin:0;font-family:var(--cz);text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;line-height:2.1;color:rgba(239,231,214,.74)}
.motto{text-align:center;margin:44px 0 0;font-family:var(--cz);text-transform:uppercase;letter-spacing:.4em;font-size:13px;color:var(--gold)}

.quote{margin:0 auto 56px;max-width:900px;text-align:center;font-style:italic;font-size:clamp(28px,3.8vw,52px);line-height:1.22;color:#F3E3B4}
.quote cite{display:block;margin-top:22px;font-style:normal;font-family:var(--cz);text-transform:uppercase;letter-spacing:.3em;font-size:12px;color:var(--gold)}
blockquote.said{margin:0;padding:6px 0 6px 28px;border-left:1px solid var(--gold);font-style:italic;font-size:1.12em;line-height:1.5}
blockquote.said cite{display:block;margin-top:14px;font-style:normal;font-family:var(--cz);text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;color:#8B6F3A}

.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.door{display:flex;flex-direction:column;gap:10px;padding:34px 30px 30px;background:var(--paper);border:1px solid rgba(139,111,58,.34);text-decoration:none;color:var(--ink);transition:transform .35s,border-color .35s,box-shadow .35s}
.parch .door{background:#F8F3E8}
.door:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 18px 40px -24px rgba(11,46,31,.5)}
.door h3{margin:0;color:var(--forest)}
.door p{margin:0;flex:1}
.door .more{align-self:flex-start;border:0;padding:0}

.close{text-align:center;padding:clamp(80px,11vw,150px) var(--pad)}
.close h2{font-size:clamp(26px,3.6vw,50px);letter-spacing:.24em;line-height:1.5;margin-bottom:38px}
.close .btns{justify-content:center}

/* facts, bios, portraits */
.facts{width:100%;border-collapse:collapse;margin:8px 0 0}
.facts th,.facts td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid rgba(139,111,58,.28)}
.facts th{width:34%;font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:500;color:#7A5F2E;padding-right:18px;padding-top:19px}
.bio{position:relative;background:#F8F3E8;border:1px solid rgba(139,111,58,.34);padding:30px 30px 24px;margin:0 0 26px}
.bio h3{color:var(--forest)}
.bio p{margin:0 0 16px}
.copy{font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;background:none;border:1px solid rgba(139,111,58,.6);color:#7A5F2E;padding:9px 14px;border-radius:2px;cursor:pointer}
.copy:hover{background:var(--forest);color:var(--parch);border-color:var(--forest)}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:36px}
.shots figure{margin:0}
.shots img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.shots figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:12px;font-size:.84em;color:var(--soft)}
.shots a{font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:#7A5F2E;text-decoration:none;border-bottom:1px solid var(--gold);white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:44px 0 0;padding:0;border-top:1px solid var(--line)}
.steps li{list-style:none;padding:32px 28px 8px 0}
.steps li+li{padding-left:28px;border-left:1px solid rgba(201,169,107,.2)}
.steps h3{color:#F3E3B4}
.steps p{margin:0;color:rgba(239,231,214,.84)}

/* form */
form.note{display:grid;gap:20px}
.note label{display:grid;gap:8px;font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#7A5F2E}
.note input,.note select,.note textarea{font:inherit;font-family:var(--cg);font-size:20px;letter-spacing:0;text-transform:none;color:var(--ink);background:#FBF8F0;border:1px solid rgba(139,111,58,.5);border-radius:2px;padding:13px 14px;width:100%}
.note textarea{min-height:170px;resize:vertical}
.note input:focus,.note select:focus,.note textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.note .r2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.note .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.note .status{min-height:1.4em;margin:0;color:#8A3B22}
.note .btn{justify-self:start}
.done{display:none;text-align:center;padding:48px 24px;border:1px solid var(--gold);background:#F8F3E8}
.sent form.note{display:none}.sent .done{display:block}

/* footer */
.foot{background:var(--deep);color:var(--stone);text-align:center;padding:76px 0 56px;border-top:1px solid rgba(201,169,107,.24)}
.fmark svg{width:54px;height:54px}
.fname{margin:16px 0 6px;font-size:17px;letter-spacing:.3em;color:var(--parch)}
.ftag{margin:0 0 30px;font-size:11.5px;letter-spacing:.38em;color:var(--gold)}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-bottom:34px}
.flinks a{font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:12px;text-decoration:none;color:var(--stone)}
.flinks a:hover{color:#F3E3B4}
.fsoc{margin:0 0 30px}.fsoc a{font-family:var(--cz);text-transform:uppercase;letter-spacing:.2em;font-size:12px;text-decoration:none;color:var(--gold);border-bottom:1px solid rgba(201,169,107,.4);padding-bottom:4px}.fsoc a:hover{color:#F3E3B4}
.fine{font-size:16px;line-height:1.55;color:rgba(217,201,176,.72);max-width:680px;margin:0 auto 10px}

/* reveal: content is visible without script; script only adds the motion */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .menu{display:block}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:rgba(5,22,15,.97);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px var(--pad) 18px}
  .top.open nav{display:flex}
  .top nav a,.top nav a.cta{width:100%;text-align:center;padding:16px 0;border:0;border-bottom:1px solid rgba(201,169,107,.16);font-size:13.5px}
  .hero{grid-template-columns:1fr;text-align:center;padding:104px var(--pad) 150px;gap:6px}
  .hero .sigil{width:min(64vw,300px)}
  .hero .words{margin:0 auto}
  .hero .rule{margin-left:auto;margin-right:auto}
  .hero .btns{justify-content:center}
  .split,.split.flip{grid-template-columns:1fr}
  .split .frame{max-width:460px;margin:0 auto 18px;width:calc(100% - 18px)}
  .pillars{grid-template-columns:1fr 1fr}
  .pillars li{border-left:0;border-top:1px solid rgba(201,169,107,.2);padding:28px 12px 24px}
  .pillars li:nth-child(-n+2){border-top:0}
  .pillars li:last-child{grid-column:1/-1}
  .doors,.shots,.steps{grid-template-columns:1fr}
  .steps li,.steps li+li{padding:28px 0 6px;border-left:0}
  .steps li+li{border-top:1px solid rgba(201,169,107,.2)}
  .shots{max-width:460px;margin-left:auto;margin-right:auto}
  .note .r2{grid-template-columns:1fr}
  .facts th{width:40%}
  .phero{padding:128px var(--pad) 84px}
}
@media (max-width:420px){.brand span{font-size:12px;letter-spacing:.16em}.pillrow{gap:6px 18px;font-size:10.5px;bottom:26px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .rv{opacity:1;transform:none}}