*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#11100e;color:#eee9df;font-family:"DM Sans",sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}.topline{height:32px;padding:0 6.2%;display:flex;align-items:center;justify-content:space-between;background:#a92825;color:#fff;font-size:9px;letter-spacing:.16em;text-transform:uppercase}.site-header{height:86px;padding:0 6.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff17;background:#11100e;position:sticky;top:0;z-index:10}.wordmark{display:flex;align-items:center;gap:12px;font-family:"Playfair Display",serif;font-size:15px;font-weight:700;letter-spacing:.1em}.wordmark small{display:block;font:8px "DM Sans",sans-serif;letter-spacing:.19em;color:#a9a092;margin-top:3px}.mark{width:39px;height:39px;border:1px solid #bd9b55;color:#d4b46d;display:grid;place-items:center;font:600 15px "Playfair Display",serif}.nav{display:flex;align-items:center;gap:34px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#d4cec3}.nav a{transition:color .2s}.nav a:hover,.text-link:hover{color:#d7ad5e}.nav-cta{border:1px solid #8e2925;padding:11px 15px}.nav-cta span{color:#d7ad5e;margin-left:9px}.menu-toggle{display:none;background:none;border:0;color:#eee;font-size:25px}.hero{min-height:680px;padding:75px 8% 60px;display:grid;grid-template-columns:1.08fr .92fr;position:relative;overflow:hidden;background:radial-gradient(ellipse at 74% 45%,#33251d 0%,#191613 39%,#11100e 75%)}.hero-text{align-self:center;max-width:590px;z-index:1;padding-bottom:35px}.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#c9a35b;font-weight:700}.eyebrow i{display:inline-block;width:24px;height:1px;background:#b52d2b;vertical-align:middle;margin-right:10px}.hero h1,.book-copy h2,.story-copy h2,.philosophy-inner h2,.journal-heading h2,.reviews-inner h2,.contact-grid h2{font:600 clamp(42px,5.4vw,75px)/1.08 "Playfair Display",serif;letter-spacing:-.04em;margin:22px 0}.hero h1 em,.book-copy h2 em,.story-copy h2 em,.philosophy-inner h2 em,.journal-heading h2 em,.reviews-inner h2 em{font-weight:500;color:#c7a05c}.hero-copy{max-width:465px;color:#bdb6aa;font-size:16px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:34px}.button{display:inline-flex;align-items:center;gap:25px;padding:15px 20px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .25s,background .25s}.button:hover{transform:translateY(-3px)}.button-red{background:#a92725;color:#fff}.button-red:hover{background:#c13a35}.button span{font-size:16px;color:#e2bd72}.text-link{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.text-link span{margin-left:10px;color:#c8a35d}.hero-note{display:flex;align-items:center;gap:14px;margin-top:58px;color:#968c7e;font-size:9px;letter-spacing:.2em}.rule{height:1px;width:35px;background:#67513a}.hero-art{position:relative;display:grid;place-items:center;min-height:520px}.hero-glow{position:absolute;width:440px;height:440px;border-radius:50%;background:#a06d36;filter:blur(110px);opacity:.16}.cover-frame{width:min(320px,72%);position:relative;z-index:1;transform:rotate(2deg);box-shadow:24px 25px 50px #000b;transition:transform .5s}.cover-frame:hover{transform:rotate(0) translateY(-8px)}.cover-frame img{display:block;width:100%;height:auto}.cover-caption{position:absolute;bottom:-34px;left:0;color:#9b8e7b;font-size:8px;letter-spacing:.2em}.round-stamp{position:absolute;z-index:2;right:3%;top:12%;width:105px;height:105px;border:1px solid #b58d4d;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#d8bb7b;font-size:9px;line-height:1.35;letter-spacing:.12em;transform:rotate(12deg)}.round-stamp b{font-size:18px;line-height:1.2}.round-stamp small{font-size:7px}.hero-index{position:absolute;bottom:24px;right:3%;font-size:10px;letter-spacing:.2em;color:#b8aa97}.hero-index span{color:#a32b27}.hero-bottom{position:absolute;bottom:0;left:0;width:100%;padding:14px 6.2%;border-top:1px solid #ffffff18;display:flex;justify-content:space-between;color:#8f8679;font-size:8px;letter-spacing:.17em}.intro-strip{background:#b12b27;min-height:105px;display:flex;align-items:center;justify-content:center;gap:25px;padding:20px;text-align:center}.intro-strip p{font:italic 24px "Playfair Display",serif;margin:0;color:#fff}.intro-strip span{font-size:9px;letter-spacing:.15em;color:#f1d6ca}.section{padding:105px 9%}.section-kicker{display:flex;align-items:center;gap:16px;color:#c5a05e;font-size:9px;letter-spacing:.18em}.kicker-line{height:1px;background:#5b4b37;flex:1;max-width:120px}.section-kicker span:last-child{color:#8e8579}.book-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:12%;align-items:center;padding-top:70px}.book-visual{position:relative;display:flex;justify-content:center;padding:15px 0 25px}.book-visual img{width:min(330px,78%);position:relative;z-index:1;box-shadow:20px 25px 45px #0009;transform:rotate(-2deg)}.book-shadow{position:absolute;width:70%;height:65%;bottom:8%;background:#9c622d;filter:blur(70px);opacity:.18}.image-note{position:absolute;bottom:0;font-size:8px;letter-spacing:.2em;color:#918779}.book-copy h2,.story-copy h2,.journal-heading h2{font-size:clamp(40px,4.6vw,62px)}.book-copy .lead,.story-copy .lead,.contact-grid .lead{font:19px/1.6 "Playfair Display",serif;color:#e1d7c8}.book-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow){color:#a9a194;max-width:580px}.book-facts{display:flex;gap:45px;border-top:1px solid #4b4033;border-bottom:1px solid #4b4033;padding:20px 0;margin:30px 0}.book-facts div{display:flex;flex-direction:column}.book-facts strong{font:24px "Playfair Display",serif;color:#d0ac68}.book-facts span{font-size:8px;letter-spacing:.15em;color:#958b7d}.coming-soon{display:flex;gap:12px;align-items:flex-start;margin:25px 0}.status-dot{width:7px;height:7px;background:#c5a05e;border-radius:50%;margin-top:7px;box-shadow:0 0 0 5px #c5a05e1c}.coming-soon b,.coming-soon small{display:block}.coming-soon b{font-size:12px}.coming-soon small{font-size:11px;color:#938a7e;margin-top:3px}.button-outline{border-color:#756044;color:#e4d8c5}.button-outline:hover{background:#292117}.quote-band{padding:90px 18%;text-align:center;background:#201b16;border-top:1px solid #6e5133;border-bottom:1px solid #6e5133}.quote-mark{font:90px/.7 "Playfair Display",serif;color:#a92c27}.quote-band blockquote{font:clamp(23px,3vw,37px)/1.45 "Playfair Display",serif;margin:25px auto;color:#eee2d0}.quote-band>span{font-size:9px;letter-spacing:.18em;color:#b99960}.story-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:13%;align-items:center;padding-top:65px}.portrait-wrap{position:relative;max-width:340px;margin:auto}.portrait-border{padding:12px;border:1px solid #8b6a3c;background:#211c16}.portrait-border img{width:100%;display:block;filter:sepia(.12)}.portrait-caption{display:flex;flex-direction:column;margin-top:15px}.portrait-caption b{font:18px "Playfair Display",serif;letter-spacing:.08em}.portrait-caption span{font-size:8px;letter-spacing:.13em;color:#a99b86}.portrait-number{position:absolute;right:-35px;bottom:48px;writing-mode:vertical-rl;color:#c2a05f;font:italic 16px "Playfair Display",serif}.story-copy>p{max-width:600px}.story-copy .text-link{display:inline-block;margin-top:20px}.philosophy-section{position:relative;padding:100px 9%;background:#292119;overflow:hidden}.philosophy-bg{position:absolute;inset:0;background:linear-gradient(90deg,#1c1813 0%,#211a14ed 55%,#211a14a8),url('assets/book-cover.jpg') right 35%/auto 140% no-repeat;opacity:.5}.philosophy-inner{position:relative;max-width:1100px;margin:auto}.light .kicker-line{background:#776047}.light span:last-child{color:#a99b87}.philosophy-inner h2{font-size:clamp(43px,5vw,68px);margin:25px 0 45px}.philosophy-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12%;max-width:900px}.philosophy-bottom>p{color:#c1b6a6;max-width:410px}.diamond-explainer{display:flex;gap:18px;align-items:flex-start;border-left:1px solid #9b7849;padding-left:25px}.diamond{color:#d0aa64;font-size:25px}.diamond-explainer b{font:20px "Playfair Display",serif}.diamond-explainer p{color:#b3a797;font-size:13px}.journal-heading{display:flex;justify-content:space-between;align-items:end;padding:55px 0 35px}.journal-heading h2{margin-bottom:0}.journal-soon{font-size:9px;letter-spacing:.17em;color:#c4a15f;border:1px solid #6c5637;padding:12px 16px;line-height:1.6}.journal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.journal-card{min-height:290px;padding:25px;border:1px solid #514333;background:linear-gradient(145deg,#211c16,#171512);transition:transform .25s,border-color .25s}.journal-card:hover{transform:translateY(-5px);border-color:#a98751}.card-no,.card-status{font-size:8px;letter-spacing:.16em;color:#c3a05e}.card-icon{font-size:28px;color:#b72f2b;margin:25px 0 12px}.journal-card h3{font:22px/1.25 "Playfair Display",serif;margin:0 0 12px}.journal-card p{font-size:12px;color:#a89f92}.card-status{display:block;margin-top:25px;color:#82786b}.reviews-section{padding:95px 9%;text-align:center;background:#e9e0d1;color:#1b1915}.reviews-inner{max-width:750px;margin:auto}.reviews-inner .eyebrow{color:#9d3028}.reviews-inner h2{font-size:clamp(38px,4.5vw,58px)}.reviews-inner h2 em{color:#9f3028}.reviews-inner>p:not(.eyebrow){color:#686052;max-width:570px;margin:0 auto 28px}.reviews-inner .button{margin:5px auto}.reviews-foot{display:block;font-size:8px;letter-spacing:.15em;color:#8b8172;margin-top:25px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding-top:60px}.contact-grid h2{font-size:clamp(42px,4.7vw,62px)}.contact-aside{display:flex;align-items:center;gap:14px;margin-top:45px;color:#a99e8e;font-size:9px;letter-spacing:.14em;line-height:1.8}.contact-aside b{color:#e4d9c7;font-size:11px;letter-spacing:0}.small-diamond{color:#c4a05e}.contact-form{display:flex;flex-direction:column;gap:9px}.contact-form label{font-size:8px;letter-spacing:.17em;color:#c4a05e;margin-top:8px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:13px 0;background:transparent;border:0;border-bottom:1px solid #594b3a;color:#eee9df;font:13px "DM Sans",sans-serif;outline:none;border-radius:0}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#c3a05e}.contact-form select option{background:#171512}.contact-form textarea{resize:vertical}.contact-form .button{align-self:flex-start;margin-top:15px}.form-note{font-size:10px;color:#8e8578}.footer{padding:40px 6.2% 20px;background:#0b0b0a;border-top:1px solid #4e3e2d}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:35px}.footer-top>p{font:italic 17px/1.5 "Playfair Display",serif;color:#b8aa96}.back-top{font-size:9px;letter-spacing:.15em;color:#c8a35f}.footer-bottom{border-top:1px solid #ffffff1a;padding-top:17px;display:flex;justify-content:space-between;color:#756d62;font-size:8px;letter-spacing:.14em}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:850px){.nav{gap:16px}.nav a{font-size:9px}.hero{padding-left:6%;padding-right:6%}.section{padding:80px 7%}.book-grid,.story-grid{gap:7%}.round-stamp{right:-2%}}
@media(max-width:650px){.topline{font-size:7px;padding:0 4%;}.topline span:first-child{display:none}.topline span:last-child{margin:auto}.site-header{height:72px;padding:0 5%}.menu-toggle{display:block}.nav{display:none;position:absolute;top:72px;left:0;right:0;padding:20px 6%;background:#15130f;border-bottom:1px solid #5b4932;flex-direction:column;align-items:stretch;gap:18px}.nav.open{display:flex}.nav a{font-size:11px}.nav-cta{text-align:center}.hero{display:flex;flex-direction:column;padding:65px 7% 70px;min-height:auto}.hero-text{padding:0}.hero h1{font-size:54px}.hero-copy{font-size:14px}.hero-art{min-height:430px;margin-top:15px}.cover-frame{width:220px}.round-stamp{right:5%;top:8%;width:85px;height:85px}.hero-bottom{font-size:7px}.hero-bottom span:first-child{max-width:65%}.intro-strip{flex-direction:column;gap:5px}.intro-strip p{font-size:21px}.section{padding:70px 7%}.section-kicker{font-size:7px;gap:9px}.book-grid,.story-grid,.contact-grid{grid-template-columns:1fr;gap:45px;padding-top:45px}.book-visual img{width:235px}.book-copy h2,.story-copy h2,.journal-heading h2{font-size:43px}.quote-band{padding:70px 8%}.quote-band blockquote{font-size:25px}.story-grid{gap:50px}.portrait-wrap{max-width:270px}.philosophy-section{padding:75px 7%}.philosophy-bottom{grid-template-columns:1fr;gap:25px}.philosophy-inner h2{font-size:46px}.journal-heading{align-items:start;gap:15px;flex-direction:column}.journal-cards{grid-template-columns:1fr}.journal-card{min-height:230px}.reviews-section{padding:75px 7%}.reviews-inner h2{font-size:43px}.contact-grid{gap:35px}.footer-top{align-items:flex-start;gap:20px;flex-wrap:wrap}.footer-top>p{order:3;width:100%}.footer-bottom{gap:12px;flex-direction:column}.hero-note{margin-top:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.reveal{opacity:1;transform:none}}
/* Multi-page additions */
.page-hero{min-height:390px;padding:95px 9% 80px;background:radial-gradient(ellipse at 76% 45%,#34251b 0%,#1a1612 45%,#11100e 78%);border-bottom:1px solid #4d3d2b;position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;right:7%;bottom:-100px;width:260px;height:260px;border:1px solid #8b6c3f33;border-radius:50%;box-shadow:0 0 0 24px #8b6c3f0b,0 0 0 48px #8b6c3f08}
.page-hero h1{font:600 clamp(48px,6vw,78px)/1.05 "Playfair Display",serif;letter-spacing:-.04em;margin:20px 0;max-width:850px}
.page-hero h1 em{color:#c7a05c;font-weight:500}
.page-lead{font:19px/1.7 "Playfair Display",serif;color:#c5b9a7;max-width:650px}
.page-hero-note{display:inline-block;margin-top:22px;color:#c5a05e;font-size:9px;letter-spacing:.2em;border-top:1px solid #725a3a;padding-top:12px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}
.feature-card{padding:28px;border:1px solid #4e4031;background:linear-gradient(145deg,#211c16,#171512);min-height:205px}
.feature-card>span{color:#c5a05e;font-size:10px;letter-spacing:.15em}
.feature-card h3{font:23px/1.25 "Playfair Display",serif;margin:25px 0 10px}
.feature-card p,.prose-narrow p{color:#aaa092}
.prose-narrow{max-width:760px;margin:0 auto}
.prose-narrow h2{font:42px "Playfair Display",serif;margin:15px 0}
.prose-narrow .lead{font:20px/1.7 "Playfair Display",serif;color:#e0d5c5}
.prose-narrow .button{margin-top:20px}
.timeline{max-width:850px;margin:45px auto 0;border-left:1px solid #8b6c3f;padding-left:30px}
.timeline div{position:relative;padding:0 0 35px 10px;display:grid;grid-template-columns:150px 1fr;gap:20px}
.timeline div:before{content:"";position:absolute;left:-36px;top:8px;width:10px;height:10px;border-radius:50%;background:#c5a05e;box-shadow:0 0 0 5px #c5a05e1a}
.timeline b{font:22px "Playfair Display",serif;color:#d0aa64}
.timeline span{color:#b0a596}
.philosophy-page{padding-top:90px;padding-bottom:90px}
.review-empty{max-width:700px;margin:auto;text-align:center;padding:35px 0}
.review-empty h2{font:40px "Playfair Display",serif}
.review-empty p{color:#aaa092}
.review-empty .lead{font:21px/1.6 "Playfair Display",serif;color:#e2d7c8}
.review-empty .button{margin-top:20px}
.editor-note{border-left:2px solid #a72d29;padding:14px 18px;margin:30px 0;background:#211b15;color:#b5a995;font-size:11px;letter-spacing:.03em}
.article-hero{min-height:360px}
.article-hero h1{max-width:900px}
.form-feedback{color:#d5b16d!important}
@media(max-width:850px){.page-hero{padding:80px 7%}.feature-grid{gap:12px}.feature-card{padding:20px}}
@media(max-width:650px){.page-hero{min-height:320px;padding:65px 7%}.page-hero h1{font-size:49px}.page-lead{font-size:17px}.feature-grid{grid-template-columns:1fr}.timeline div{grid-template-columns:1fr;gap:5px}.prose-narrow h2{font-size:34px}}
/* ===== Refined motion system ===== */
:root {
--motion-fast: 180ms;
--motion-medium: 320ms;
--motion-slow: 720ms;
--motion-ease: cubic-bezier(.22,.68,0,1);
}
/* Gentle page entrance */
body {
animation: pageEnter 650ms var(--motion-ease) both;
}
@keyframes pageEnter {
from { opacity: 0; }
to { opacity: 1; }
}
/* Navigation underline and active feedback */
.nav a:not(.nav-cta) {
position: relative;
transition: color var(--motion-medium) ease;
}
.nav a:not(.nav-cta)::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -7px;
height: 1px;
background: #c7a05c;
transition: right var(--motion-medium) var(--motion-ease);
}
.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta):focus-visible::after {
right: 0;
}
.nav-cta {
transition: background var(--motion-medium) ease,
border-color var(--motion-medium) ease,
color var(--motion-medium) ease;
}
.nav-cta:hover {
background: #a92725;
border-color: #a92725;
color: #fff;
}
/* Buttons and text links */
.button {
position: relative;
overflow: hidden;
transition: transform var(--motion-medium) var(--motion-ease),
box-shadow var(--motion-medium) ease,
background var(--motion-medium) ease,
border-color var(--motion-medium) ease;
}
.button:hover {
transform: translateY(-3px);
box-shadow: 0 9px 24px #0004;
}
.button:active { transform: translateY(-1px) scale(.99); }
.text-link {
transition: color var(--motion-medium) ease;
}
.text-link span {
display: inline-block;
transition: transform var(--motion-medium) var(--motion-ease);
}
.text-link:hover span { transform: translateX(5px); }
/* Book and portrait image treatments */
.cover-frame, .book-visual img, .portrait-border img {
transition: transform 650ms var(--motion-ease),
filter 650ms ease,
box-shadow 650ms ease;
}
.cover-frame:hover {
transform: perspective(900px) rotateY(-3deg) rotateX(1deg) translateY(-7px);
box-shadow: 28px 34px 58px #000b;
}
.book-visual img:hover {
transform: translateY(-6px) rotate(0deg) scale(1.015);
}
.portrait-border { overflow: hidden; }
.portrait-border img:hover {
transform: scale(1.035);
filter: sepia(.05);
}
/* Card and panel interactions */
.journal-card, .feature-card {
transition: transform 380ms var(--motion-ease),
border-color 380ms ease,
background 380ms ease,
box-shadow 380ms ease;
}
.journal-card:hover, .feature-card:hover {
transform: translateY(-6px);
border-color: #a98751;
box-shadow: 0 16px 32px #0003;
}
.card-icon {
transition: transform 380ms var(--motion-ease), color 380ms ease;
}
.journal-card:hover .card-icon {
transform: translateY(-3px) rotate(-5deg);
color: #d1aa65;
}
/* Reveal elements as they enter the viewport */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 760ms var(--motion-ease),
transform 760ms var(--motion-ease);
will-change: opacity, transform;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Form focus states */
.contact-form input,
.contact-form textarea,
.contact-form select {
transition: border-color var(--motion-medium) ease,
background var(--motion-medium) ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
background: #ffffff06;
}
/* Keyboard accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
outline: 2px solid #d2ad69;
outline-offset: 4px;
}
/* Keep motion restrained and accessible */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body { animation: none; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* =========================================================
PREMIUM MOTION LAYER — subtle, editorial, and accessible
========================================================= */
:root {
--motion-fast: 180ms;
--motion-medium: 320ms;
--motion-slow: 760ms;
--ease-editorial: cubic-bezier(.22,.75,.25,1);
}
/* Page entrance */
body {
animation: page-enter 650ms var(--ease-editorial) both;
}
@keyframes page-enter {
from { opacity: 0; }
to { opacity: 1; }
}
/* Refined navigation underline and current-page indicator */
.nav a:not(.nav-cta) {
position: relative;
padding: 8px 0;
}
.nav a:not(.nav-cta)::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 1px;
height: 1px;
background: #c5a05e;
transition: right var(--motion-medium) var(--ease-editorial);
}
.nav a:not(.nav-cta):hover::after,
.nav a[aria-current="page"]::after {
right: 0;
}
.nav a[aria-current="page"] {
color: #d6b574;
}
.nav-cta {
transition: background var(--motion-medium) ease,
border-color var(--motion-medium) ease,
transform var(--motion-medium) var(--ease-editorial);
}
.nav-cta:hover {
background: #a9272520;
border-color: #c5a05e;
transform: translateY(-2px);
}
/* Hero text entrance */
.hero-text > * {
animation: hero-rise 780ms var(--ease-editorial) both;
}
.hero-text > *:nth-child(1) { animation-delay: 80ms; }
.hero-text > *:nth-child(2) { animation-delay: 170ms; }
.hero-text > *:nth-child(3) { animation-delay: 270ms; }
.hero-text > *:nth-child(4) { animation-delay: 360ms; }
.hero-text > *:nth-child(5) { animation-delay: 440ms; }
@keyframes hero-rise {
from { opacity: 0; transform: translateY(17px); }
to { opacity: 1; transform: translateY(0); }
}
.page-hero > * {
animation: hero-rise 760ms var(--ease-editorial) both;
}
.page-hero > *:nth-child(1) { animation-delay: 70ms; }
.page-hero > *:nth-child(2) { animation-delay: 160ms; }
.page-hero > *:nth-child(3) { animation-delay: 260ms; }
.page-hero > *:nth-child(4) { animation-delay: 340ms; }
/* Slow, restrained book-cover float */
.cover-frame {
animation: cover-arrive 900ms var(--ease-editorial) both,
cover-drift 7s ease-in-out 1s infinite;
transform-origin: 50% 55%;
}
@keyframes cover-arrive {
from { opacity: 0; transform: translateY(20px) rotate(4deg); }
to { opacity: 1; transform: translateY(0) rotate(2deg); }
}
@keyframes cover-drift {
0%, 100% { translate: 0 0; }
50% { translate: 0 -7px; }
}
.cover-frame img,
.book-visual img,
.portrait-border img {
transition: transform 650ms var(--ease-editorial), filter 650ms ease;
}
.book-visual img:hover {
transform: rotate(0deg) scale(1.025);
}
.portrait-border {
overflow: hidden;
}
.portrait-border img:hover {
transform: scale(1.035);
}
/* Buttons: slight lift and arrow glide */
.button {
position: relative;
overflow: hidden;
transition: transform var(--motion-medium) var(--ease-editorial),
box-shadow var(--motion-medium) ease,
background var(--motion-medium) ease,
border-color var(--motion-medium) ease;
}
.button span {
display: inline-block;
transition: transform var(--motion-medium) var(--ease-editorial);
}
.button:hover {
transform: translateY(-3px);
box-shadow: 0 9px 22px #0003;
}
.button:hover span {
transform: translate(3px, -1px);
}
.button:active {
transform: translateY(-1px);
}
/* Card and panel hover polish */
.journal-card,
.feature-card {
transition: transform 420ms var(--ease-editorial),
border-color 320ms ease,
box-shadow 420ms ease,
background 420ms ease;
}
.journal-card:hover,
.feature-card:hover {
transform: translateY(-6px);
border-color: #a98751;
box-shadow: 0 18px 36px #0003;
}
.journal-card .card-icon {
transition: transform 420ms var(--ease-editorial), color 320ms ease;
}
.journal-card:hover .card-icon {
transform: translateY(-4px) rotate(-5deg);
color: #d2aa65;
}
/* Image and decorative details */
.round-stamp {
animation: stamp-in 900ms var(--ease-editorial) 450ms both;
}
@keyframes stamp-in {
from { opacity: 0; transform: rotate(0deg) scale(.88); }
to { opacity: 1; transform: rotate(12deg) scale(1); }
}
.hero-glow {
animation: glow-breathe 9s ease-in-out infinite alternate;
}
@keyframes glow-breathe {
from { opacity: .11; transform: scale(.94); }
to { opacity: .2; transform: scale(1.06); }
}
.status-dot {
animation: status-pulse 2.8s ease-in-out infinite;
}
@keyframes status-pulse {
0%, 100% { box-shadow: 0 0 0 4px #c5a05e16; }
50% { box-shadow: 0 0 0 8px #c5a05e08; }
}
/* Reveal sections with a softer, longer editorial easing */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 850ms var(--ease-editorial),
transform 850ms var(--ease-editorial);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Keyboard focus remains visible and intentional */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #d0aa64;
outline-offset: 4px;
}
/* Avoid hover-only movement on touch devices */
@media (hover: none) {
.journal-card:hover,
.feature-card:hover,
.button:hover,
.nav-cta:hover {
transform: none;
box-shadow: none;
}
}
/* Respect operating-system reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body, .hero-text > *, .page-hero > *, .cover-frame,
.round-stamp, .hero-glow, .status-dot {
animation: none !important;
}
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* Page-specific cinematic background photography */
body[class^="page-"] {
background-color: #11100e;
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100% auto;
background-attachment: fixed;
}
.page-home { background-image: linear-gradient(180deg, rgba(17,16,14,.25), #11100e 82%), url("assets/bg-home.jpg"); }
.page-book { background-image: linear-gradient(180deg, rgba(17,16,14,.32), #11100e 84%), url("assets/bg-book.jpg"); }
.page-about { background-image: linear-gradient(180deg, rgba(17,16,14,.36), #11100e 84%), url("assets/bg-about.jpg"); }
.page-philosophy { background-image: linear-gradient(180deg, rgba(17,16,14,.28), #11100e 86%), url("assets/bg-philosophy.jpg"); }
.page-journal { background-image: linear-gradient(180deg, rgba(17,16,14,.30), #11100e 86%), url("assets/bg-journal.jpg"); }
.page-reviews { background-image: linear-gradient(180deg, rgba(17,16,14,.30), #11100e 86%), url("assets/bg-reviews.jpg"); }
.page-contact { background-image: linear-gradient(180deg, rgba(17,16,14,.30), #11100e 86%), url("assets/bg-contact.jpg"); }
.page-article { background-image: linear-gradient(180deg, rgba(17,16,14,.30), #11100e 86%), url("assets/bg-article.jpg"); }
.page-hero { background-color: rgba(17,16,14,.58); background-blend-mode: multiply; }
.section { position: relative; }
@media (max-width: 700px) {
body[class^="page-"] { background-size: auto 760px; background-position: center 70px; background-attachment: scroll; }
}
/* Art-directed page imagery: individual crops, shared editorial system */
body[class^="page-"] {
background-color: #100e0c;
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
background-attachment: fixed;
}
.page-home { background-image: linear-gradient(180deg,rgba(12,10,8,.22),#100e0c 78%),url("assets/bg-home.jpg"); }
.page-book { background-image: linear-gradient(180deg,rgba(12,10,8,.28),#100e0c 82%),url("assets/bg-book.jpg"); }
.page-about { background-image: linear-gradient(180deg,rgba(12,10,8,.28),#100e0c 82%),url("assets/bg-about.jpg"); }
.page-philosophy { background-image: linear-gradient(180deg,rgba(12,10,8,.22),#100e0c 84%),url("assets/bg-philosophy.jpg"); }
.page-journal { background-image: linear-gradient(180deg,rgba(12,10,8,.25),#100e0c 84%),url("assets/bg-journal.jpg"); }
.page-reviews { background-image: linear-gradient(180deg,rgba(12,10,8,.24),#100e0c 84%),url("assets/bg-reviews.jpg"); }
.page-contact { background-image: linear-gradient(180deg,rgba(12,10,8,.25),#100e0c 84%),url("assets/bg-contact.jpg"); }
.page-article { background-image: linear-gradient(180deg,rgba(12,10,8,.24),#100e0c 84%),url("assets/bg-article.jpg"); }
.page-hero { background-color: rgba(12,10,8,.46); background-blend-mode: multiply; }
@media (max-width: 720px) {
body[class^="page-"] { background-size: auto 780px; background-attachment: scroll; }
}
/* STEP 1 — cinematic homepage hero with Ernie's real portrait cutout */
.hero-cinematic {
min-height: 690px;
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 35px clamp(22px, 5.5vw, 90px) 0;
background:
linear-gradient(90deg, rgba(8,10,13,.12), rgba(8,10,13,.56) 36%, rgba(8,10,13,.12)),
linear-gradient(180deg, rgba(9,10,12,.08), rgba(12,10,8,.24) 66%, rgba(10,8,6,.84)),
url("assets/bg-home.jpg") center 40% / cover no-repeat,
#17110d;
}
.stadium-atmosphere {
position:absolute; inset:0; z-index:-1;
background:
radial-gradient(ellipse at 51% 43%, rgba(224,137,58,.22), transparent 35%),
linear-gradient(180deg, rgba(9,11,15,.18), rgba(12,9,7,.3));
}
.hero-stage {
width:100%; max-width:1450px; margin:0 auto;
min-height:550px;
display:grid; grid-template-columns:minmax(220px,.9fr) minmax(330px,1.15fr) minmax(210px,.8fr);
align-items:end; gap:clamp(12px,2.5vw,42px);
position:relative;
}
.hero-person { position:relative; height:100%; min-height:510px; display:flex; align-items:flex-end; justify-content:center; }
.hero-portrait {
position:relative; z-index:2; display:block;
width:min(100%,390px); max-height:545px; object-fit:contain; object-position:bottom center;
filter:drop-shadow(0 18px 25px rgba(0,0,0,.48));
transform-origin:bottom center;
animation: portrait-rise 900ms cubic-bezier(.2,.7,.2,1) both;
}
.portrait-halo { position:absolute; width:90%; height:70%; bottom:7%; border-radius:50%; background:radial-gradient(ellipse,rgba(213,148,76,.26),transparent 68%); filter:blur(20px); }
.portrait-tag { position:absolute; z-index:3; bottom:22px; left:50%; transform:translateX(-50%); white-space:nowrap; color:#e6c88f; font-size:9px; letter-spacing:.2em; border-top:1px solid #c29a59; padding-top:9px; }
.hero-message { position:relative; z-index:4; align-self:center; text-align:center; padding:25px 0 45px; }
.hero-message .eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; color:#e4c58d; font-size:10px; letter-spacing:.22em; white-space:nowrap; }
.hero-message .eyebrow i { display:block; width:32px; height:1px; background:#c39a58; }
.hero-message h1 { margin:20px 0 10px; font:800 clamp(64px,7.5vw,112px)/.82 "Playfair Display",serif; letter-spacing:-.055em; color:#f1e6d2; text-shadow:0 5px 22px #0008; }
.hero-message h1 em { color:#d4a35d; font-style:italic; }
.hero-role { display:inline-block; margin:12px 0 18px; padding:8px 18px; background:linear-gradient(90deg,#741915,#b91f1b,#741915); color:#fff0d8; font:600 12px "DM Sans",sans-serif; letter-spacing:.12em; }
.hero-role span { color:#f0c77f; padding:0 5px; }
.hero-message .hero-copy { max-width:520px; margin:0 auto; color:#f0e5d5; font:italic 19px/1.55 "Playfair Display",serif; text-shadow:0 2px 12px #000; }
.hero-message .hero-actions { justify-content:center; margin-top:28px; flex-wrap:wrap; }
.hero-message .button { min-width:170px; justify-content:center; }
.hero-micro { margin-top:24px; color:#d0b17a; font-size:8px; letter-spacing:.19em; }
.hero-book { position:relative; z-index:3; align-self:center; justify-self:center; width:min(100%,310px); padding:20px 0 45px; }
.hero-book img { position:relative; z-index:2; width:100%; display:block; border:1px solid #a9824c; box-shadow:18px 22px 35px #0009, -4px 0 0 #4d3420; transform:perspective(900px) rotateY(-5deg); transition:transform .65s cubic-bezier(.2,.7,.2,1), box-shadow .65s ease; }
.hero-book:hover img { transform:perspective(900px) rotateY(0) translateY(-6px); box-shadow:22px 30px 42px #000b; }
.book-light { position:absolute; inset:10% -18%; background:radial-gradient(ellipse,rgba(218,155,83,.25),transparent 65%); filter:blur(24px); }
.book-coming { position:absolute; z-index:4; top:34px; right:-15px; padding:9px 13px; background:#9f1717; color:#fff0dc; font:700 9px "DM Sans",sans-serif; letter-spacing:.16em; transform:rotate(5deg); box-shadow:0 5px 14px #0007; }
.hero-baseball { display:none; }
.hero-featurebar { max-width:1450px; width:100%; margin:0 auto; position:relative; z-index:5; min-height:88px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; border-top:1px solid #b88b4e; border-bottom:1px solid #b88b4e; background:linear-gradient(90deg,rgba(15,12,10,.94),rgba(26,18,12,.92)); box-shadow:0 -8px 25px #0005; }
.hero-featurebar>div { min-height:56px; display:flex; justify-content:center; align-items:center; gap:14px; padding:8px 12px; border-right:1px solid #9b7544; }
.hero-featurebar>div:last-child { border-right:0; }
.hero-featurebar b { color:#eee1cd; font:600 10px/1.5 "DM Sans",sans-serif; letter-spacing:.08em; }
.feature-symbol { color:#d7ad6a; font-size:27px; }
@keyframes portrait-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1500px) { .hero-cinematic { min-height:760px; } .hero-stage { min-height:620px; } .hero-portrait { max-height:615px; } .hero-book { width:340px; } }
@media (max-width:1050px) {
.hero-cinematic { padding-left:25px; padding-right:25px; }
.hero-stage { grid-template-columns:minmax(170px,.75fr) minmax(290px,1.2fr) minmax(170px,.7fr); gap:12px; }
.hero-message h1 { font-size:clamp(54px,7vw,78px); }
.hero-message .hero-copy { font-size:16px; }
.hero-book { width:min(100%,240px); }
}
@media (max-width:720px) {
.hero-cinematic { min-height:unset; padding:30px 18px 0; background-position:center; }
.hero-stage { min-height:unset; grid-template-columns:1fr 1fr; gap:8px; align-items:end; }
.hero-person { grid-column:1; grid-row:2; min-height:280px; }
.hero-portrait { max-height:330px; width:100%; }
.portrait-tag { bottom:8px; font-size:7px; }
.hero-message { grid-column:1 / -1; grid-row:1; padding:25px 0 10px; }
.hero-message .eyebrow { font-size:8px; letter-spacing:.15em; }
.hero-message .eyebrow i { width:18px; }
.hero-message h1 { font-size:clamp(56px,13vw,82px); }
.hero-role { font-size:9px; padding:7px 10px; }
.hero-message .hero-copy { max-width:450px; font-size:16px; }
.hero-message .hero-actions { margin-top:18px; }
.hero-message .button { min-width:145px; font-size:10px; padding:13px 14px; }
.hero-micro { display:none; }
.hero-book { grid-column:2; grid-row:2; width:min(100%,210px); padding:8px 0 22px; }
.book-coming { top:18px; right:-5px; font-size:7px; }
.hero-featurebar { grid-template-columns:repeat(2,1fr); margin-top:8px; }
.hero-featurebar>div { min-height:58px; justify-content:flex-start; border-bottom:1px solid #765b39; }
.hero-featurebar>div:nth-child(2) { border-right:0; }
.hero-featurebar>div:nth-child(3), .hero-featurebar>div:nth-child(4) { border-bottom:0; }
.hero-featurebar b { font-size:8px; }
.feature-symbol { font-size:21px; }
}
@media (max-width:420px) {
.hero-person { min-height:230px; }
.hero-portrait { max-height:265px; }
.hero-book { width:160px; }
.hero-message .hero-actions { gap:8px; }
.hero-message .button { min-width:130px; }
}
@media (prefers-reduced-motion:reduce) { .hero-portrait { animation:none; } }
/* Homepage: approved clean sunset ballpark background, with a dark readability overlay. */
.page-home { background-image: none !important; }
.hero-cinematic {
background:
linear-gradient(90deg, rgba(8,9,11,.60) 0%, rgba(8,9,11,.43) 43%, rgba(8,9,11,.26) 72%, rgba(8,9,11,.46) 100%),
linear-gradient(180deg, rgba(8,9,11,.28) 0%, rgba(8,9,11,.08) 42%, rgba(8,9,11,.72) 100%),
url("assets/bg-home-hero.png") center 54% / cover no-repeat !important;
padding-top: 26px;
}
.stadium-atmosphere {
background:
radial-gradient(ellipse at 50% 40%, rgba(195,119,63,.19), transparent 42%),
linear-gradient(180deg, rgba(7,9,12,.08), rgba(7,8,9,.45));
}
.hero-stage {
min-height: 485px;
grid-template-columns: minmax(155px,.72fr) minmax(350px,1.25fr) minmax(205px,.82fr);
gap: clamp(14px,2vw,32px);
align-items: center;
}
.hero-person {
min-height: 400px;
align-items: end;
}
.hero-portrait {
width: min(100%, 205px);
max-height: 365px;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 15px 22px rgba(0,0,0,.62));
}
.portrait-halo { width: 100%; height: 52%; bottom: 8%; }
.portrait-tag { bottom: 4px; font-size: 8px; }
.hero-message { padding: 25px 0 35px; }
.hero-message h1 { font-size: clamp(58px,6.4vw,94px); }
.hero-book { width: min(100%, 265px); }
.hero-cinematic::before,
.hero-cinematic::after { content: none !important; display:none !important; }
@media (max-width:1050px) {
.hero-stage { grid-template-columns:minmax(135px,.62fr) minmax(280px,1.25fr) minmax(170px,.78fr); }
.hero-portrait { width:min(100%,175px); max-height:315px; }
.hero-book { width:min(100%,220px); }
}
@media (max-width:720px) {
.hero-cinematic { padding-top:20px; }
.hero-stage { grid-template-columns: minmax(110px,.8fr) minmax(140px,1fr); }
.hero-person { min-height:245px; }
.hero-portrait { width:min(100%,155px); max-height:245px; }
.hero-book { width:min(100%,165px); }
}
/* FINAL HOMEPAGE HERO — match the client's approved reference composition */
.hero-cinematic {
min-height: min(860px, calc(100vh - 80px));
height: min(860px, calc(100vh - 80px));
padding: 0 clamp(18px, 3.8vw, 64px);
display:flex;
flex-direction:column;
justify-content:stretch;
overflow:hidden;
isolation:isolate;
background-image:
linear-gradient(180deg, rgba(5,8,12,.10) 0%, rgba(5,8,12,.04) 54%, rgba(12,7,4,.25) 100%),
url("assets/bg-home-hero.png") !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
}
.hero-cinematic .stadium-atmosphere {
position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg,rgba(5,8,12,.08),rgba(5,8,12,.12) 40%,rgba(5,8,12,.02));
}
.hero-cinematic .hero-stage {
position:relative;
width:100%; max-width:1580px; margin:0 auto;
flex:1; min-height:0; height:auto;
display:block;
}
.hero-cinematic .hero-person {
position:absolute; left:-2.5%; bottom:0;
width:37%; height:100%; min-height:0;
display:flex; align-items:flex-end; justify-content:flex-start;
pointer-events:none;
}
.hero-cinematic .hero-person .portrait-halo { display:none; }
.hero-cinematic .hero-portrait {
display:block; width:100%; height:100%; max-height:none;
object-fit:contain; object-position:left bottom;
filter:drop-shadow(0 10px 20px rgba(0,0,0,.36));
animation:portrait-rise 850ms cubic-bezier(.2,.7,.2,1) both;
}
.hero-cinematic .portrait-tag {
left:34%; bottom:26px; transform:none;
font-size:9px; letter-spacing:.17em;
border-top:1px solid #d4a75f; padding-top:9px;
}
.hero-cinematic .hero-message {
position:absolute; left:29.5%; top:50%; transform:translateY(-49%);
width:39%; padding:0 8px 15px; margin:0;
text-align:center; align-self:auto;
}
.hero-cinematic .hero-message .eyebrow {
display:flex; justify-content:center; align-items:center; gap:17px;
color:#f3e9d9; font-size:clamp(10px,.95vw,15px);
letter-spacing:.20em; white-space:nowrap; margin-bottom:20px;
}
.hero-cinematic .hero-message .eyebrow i { width:clamp(34px,5vw,85px); background:#e2b45e; height:2px; }
.hero-cinematic .hero-message h1 {
margin:0 0 14px; color:#f7efe2;
font:800 clamp(76px,8.1vw,138px)/.83 "Playfair Display",Georgia,serif;
letter-spacing:-.055em; text-shadow:0 4px 16px rgba(0,0,0,.24);
}
.hero-cinematic .hero-message h1 em { color:#f1b84f; font-style:italic; }
.hero-cinematic .hero-role {
display:block; width:max-content; max-width:100%;
margin:12px auto 17px; padding:9px 25px;
background:#b30e0b; color:#fff7e9;
font:700 clamp(10px,.98vw,15px) "DM Sans",sans-serif;
letter-spacing:.12em; box-shadow:0 5px 16px #0003;
}
.hero-cinematic .hero-role span { color:#ffd37e; padding:0 5px; }
.hero-cinematic .hero-message .hero-copy {
max-width:560px; margin:0 auto;
color:#fff4e5; font:italic clamp(17px,1.7vw,27px)/1.34 "Playfair Display",Georgia,serif;
text-shadow:0 2px 9px #0009;
}
.hero-cinematic .hero-message .hero-actions {
display:flex; justify-content:center; align-items:center;
gap:clamp(14px,2vw,32px); margin-top:34px; flex-wrap:nowrap;
}
.hero-cinematic .hero-message .button {
min-width:0; min-height:62px; padding:0 clamp(22px,2.2vw,38px);
display:inline-flex; align-items:center; justify-content:center; gap:13px;
border-radius:9px; font-size:clamp(11px,.95vw,15px);
font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
.hero-cinematic .hero-message .button-red {
background:#c20d0b; border:2px solid #d9a64c; color:#fff;
box-shadow:0 7px 18px #0005;
}
.hero-cinematic .hero-message .button-outline {
border:2px solid #d8ad63; background:rgba(10,8,6,.42); color:#fff7e8;
}
.hero-cinematic .hero-micro { display:none; }
.hero-cinematic .hero-book {
position:absolute; right:3.5%; top:50%; transform:translateY(-50%);
width:23%; max-width:365px; padding:0; align-self:auto; justify-self:auto;
}
.hero-cinematic .hero-book img {
width:100%; display:block; border:2px solid rgba(220,180,119,.82);
box-shadow:14px 20px 34px rgba(0,0,0,.62),-5px 0 0 rgba(54,34,21,.8);
transform:perspective(1000px) rotateY(-3deg);
}
.hero-cinematic .hero-book:hover img { transform:perspective(1000px) rotateY(0) translateY(-4px); }
.hero-cinematic .book-coming {
top:7%; right:-12%; padding:12px 24px;
font-size:clamp(10px,.95vw,15px); letter-spacing:.09em;
transform:rotate(7deg); box-shadow:0 5px 15px #0008;
}
.hero-cinematic .hero-featurebar {
width:calc(100% + clamp(36px,7.6vw,128px));
max-width:none; margin:0 calc(-1 * clamp(18px,3.8vw,64px));
min-height:92px; flex:0 0 92px;
padding:0 clamp(20px,7vw,115px);
display:grid; grid-template-columns:repeat(4,1fr);
border-top:2px solid rgba(213,169,93,.9);
border-bottom:2px solid rgba(213,169,93,.9);
background:rgba(9,9,9,.91);
box-shadow:0 -7px 24px rgba(0,0,0,.32);
}
.hero-cinematic .hero-featurebar>div {
min-height:60px; display:flex; justify-content:center; align-items:center;
gap:clamp(10px,1.5vw,24px); padding:8px 12px;
border-right:1px solid #c49a55;
}
.hero-cinematic .hero-featurebar>div:last-child { border-right:0; }
.hero-cinematic .hero-featurebar b {
color:#f4ead9; font:500 clamp(10px,.98vw,16px)/1.45 "DM Sans",sans-serif;
letter-spacing:.025em;
}
.hero-cinematic .feature-symbol { color:#efc273; font-size:clamp(24px,2.8vw,43px); }
@media(max-width:1000px) {
.hero-cinematic { height:720px; min-height:720px; padding:0 20px; }
.hero-cinematic .hero-person { width:34%; left:-2%; }
.hero-cinematic .hero-message { left:27%; width:43%; }
.hero-cinematic .hero-message h1 { font-size:clamp(65px,9vw,95px); }
.hero-cinematic .hero-book { right:1%; width:23%; }
.hero-cinematic .hero-featurebar { padding:0 20px; }
}
@media(max-width:700px) {
.hero-cinematic { height:auto; min-height:0; padding:0 16px; background-position:center center !important; }
.hero-cinematic .hero-stage { min-height:690px; display:grid; grid-template-columns:1fr 1fr; align-items:end; }
.hero-cinematic .hero-message { position:relative; inset:auto; transform:none; grid-column:1/-1; grid-row:1; width:100%; padding:45px 0 10px; }
.hero-cinematic .hero-message .eyebrow { font-size:9px; gap:8px; white-space:normal; }
.hero-cinematic .hero-message .eyebrow i { width:24px; }
.hero-cinematic .hero-message h1 { font-size:clamp(62px,15vw,90px); }
.hero-cinematic .hero-message .hero-copy { font-size:17px; max-width:430px; }
.hero-cinematic .hero-message .hero-actions { margin-top:20px; gap:10px; flex-wrap:wrap; }
.hero-cinematic .hero-message .button { min-height:48px; padding:0 15px; font-size:10px; }
.hero-cinematic .hero-person { position:relative; inset:auto; grid-column:1; grid-row:2; width:100%; height:300px; }
.hero-cinematic .hero-portrait { width:100%; height:100%; object-position:bottom center; }
.hero-cinematic .portrait-tag { display:none; }
.hero-cinematic .hero-book { position:relative; inset:auto; transform:none; grid-column:2; grid-row:2; width:min(78%,220px); justify-self:center; align-self:center; padding:12px 0 25px; }
.hero-cinematic .book-coming { font-size:8px; padding:8px 11px; right:-8%; }
.hero-cinematic .hero-featurebar { width:calc(100% + 32px); margin:0 -16px; min-height:0; flex:0 0 auto; padding:8px 12px; grid-template-columns:repeat(2,1fr); }
.hero-cinematic .hero-featurebar>div { justify-content:flex-start; min-height:58px; border-bottom:1px solid #8e6c3d; }
.hero-cinematic .hero-featurebar>div:nth-child(2) { border-right:0; }
.hero-cinematic .hero-featurebar>div:nth-child(3), .hero-cinematic .hero-featurebar>div:nth-child(4) { border-bottom:0; }
}
/* FINAL HOMEPAGE POLISH — clean hierarchy, spacing and alignment */
.topline {
height:25px;
padding:0 clamp(20px,6.2vw,90px);
display:flex; align-items:center; justify-content:space-between;
background:#171411;
border-bottom:1px solid rgba(201,157,83,.58);
color:#d8bd8b;
font:600 9px/1 "DM Sans",sans-serif;
letter-spacing:.16em;
text-transform:uppercase;
}
.site-header {
min-height:76px;
padding:0 clamp(20px,6.2vw,90px);
background:rgba(10,10,9,.98);
border-bottom:1px solid rgba(196,154,85,.35);
position:relative;
z-index:20;
}
.hero-cinematic {
height:650px;
min-height:650px;
padding:0 clamp(18px,3.8vw,64px);
background-position:center center !important;
background-size:cover !important;
}
.hero-cinematic .hero-stage {
height:558px;
min-height:558px;
flex:0 0 558px;
}
.hero-cinematic .hero-person {
left:-1.5%;
width:34%;
height:100%;
overflow:hidden;
}
.hero-cinematic .hero-portrait {
width:100%;
height:100%;
object-fit:contain;
object-position:left bottom;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.48));
}
.hero-cinematic .portrait-tag {
left:33%;
bottom:18px;
font-size:8px;
color:#f0d5a4;
}
.hero-cinematic .hero-message {
left:29%;
top:49%;
width:41%;
padding:18px 8px 20px;
}
.hero-cinematic .hero-message .eyebrow {
margin-bottom:18px;
}
.hero-cinematic .hero-message h1 {
font-size:clamp(76px,7.5vw,116px);
line-height:.86;
margin-bottom:13px;
}
.hero-cinematic .hero-role {
margin:12px auto 17px;
padding:9px 18px;
letter-spacing:.1em;
}
.hero-cinematic .hero-message .hero-copy {
max-width:530px;
font-size:clamp(17px,1.55vw,24px);
line-height:1.35;
}
.hero-cinematic .hero-message .hero-actions {
margin-top:27px;
gap:20px;
}
.hero-cinematic .hero-message .button {
min-height:54px;
padding:0 26px;
border-radius:5px;
}
.hero-cinematic .hero-book {
right:3%;
top:49%;
width:22%;
max-width:330px;
}
.hero-cinematic .hero-book img {
max-height:470px;
object-fit:contain;
}
.hero-cinematic .book-coming {
top:7%;
right:-9%;
padding:10px 20px;
}
.hero-cinematic .hero-featurebar {
height:92px;
min-height:92px;
flex:0 0 92px;
margin-left:calc(-1 * clamp(18px,3.8vw,64px));
margin-right:calc(-1 * clamp(18px,3.8vw,64px));
width:calc(100% + 2 * clamp(18px,3.8vw,64px));
padding:0 clamp(24px,7vw,110px);
}
@media(max-width:1100px) and (min-width:701px) {
.hero-cinematic { height:610px; min-height:610px; }
.hero-cinematic .hero-stage { height:518px; min-height:518px; flex-basis:518px; }
.hero-cinematic .hero-person { width:33%; }
.hero-cinematic .hero-message { left:27%; width:44%; }
.hero-cinematic .hero-message h1 { font-size:clamp(62px,8vw,88px); }
.hero-cinematic .hero-book { width:22%; right:1.5%; }
.hero-cinematic .hero-message .hero-actions { gap:10px; }
.hero-cinematic .hero-message .button { padding:0 16px; }
}
@media(max-width:700px) {
.topline { height:22px; font-size:7px; letter-spacing:.1em; }
.site-header { min-height:68px; }
.hero-cinematic { height:auto; min-height:0; padding:0 14px; }
.hero-cinematic .hero-stage { height:auto; min-height:0; flex:0 0 auto; }
.hero-cinematic .hero-message { top:auto; left:auto; width:100%; }
.hero-cinematic .hero-message h1 { font-size:clamp(62px,15vw,90px); }
.hero-cinematic .hero-person { width:100%; height:300px; overflow:hidden; }
.hero-cinematic .hero-book { width:min(78%,220px); right:auto; top:auto; }
.hero-cinematic .hero-featurebar { height:auto; min-height:0; flex-basis:auto; }
}
/* =========================================================
ERNIE FISHER — WARM BROWN & IVORY EDITORIAL THEME
Brown banners/navigation + light content sections
========================================================= */
:root {
--ef-espresso: #3a2115;
--ef-deep-brown: #28170f;
--ef-leather: #68432a;
--ef-caramel: #a87945;
--ef-antique-gold: #c6a36a;
--ef-ivory: #f7f3eb;
--ef-paper: #fffdf8;
--ef-ink: #302219;
--ef-muted: #77695c;
--ef-rule: #dfd2bf;
}
/* Overall canvas and shared header */
html { background: var(--ef-ivory); }
body {
background: var(--ef-ivory);
color: var(--ef-ink);
}
.topline {
background: var(--ef-deep-brown);
color: #ead9bd;
border-bottom: 1px solid #8a6037;
}
.site-header {
background: linear-gradient(180deg, #4a2b19, #321d12);
color: #fff9ef;
border-bottom: 1px solid #a47a48;
box-shadow: 0 5px 18px rgba(39, 23, 13, .18);
}
.wordmark { color: #fff8ec; }
.wordmark small { color: #d7c1a0; }
.mark {
border-color: var(--ef-antique-gold);
color: #e4c58f;
background: rgba(255,255,255,.035);
}
.nav { color: #f1e6d6; }
.nav a:hover, .text-link:hover { color: #e4c58f; }
.nav a:not(.nav-cta)::after { background: var(--ef-antique-gold); }
.nav-cta {
border-color: var(--ef-antique-gold);
color: #fff7eb;
}
.nav-cta span { color: #e3c18a; }
.nav-cta:hover {
background: #8b291c;
border-color: #d7b77d;
}
.menu-toggle { color: #fff8ed; }
/* Inner-page banners: deep brown top banner with warm photographic detail */
.page-hero {
min-height: 360px;
padding: 86px 9% 76px;
color: #fff8ed;
background-color: var(--ef-espresso);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-bottom: 5px solid #c6a36a;
position: relative;
isolation: isolate;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(43,25,15,.96) 0%, rgba(55,32,19,.88) 47%, rgba(50,29,17,.34) 100%),
linear-gradient(0deg, rgba(34,20,12,.45), rgba(34,20,12,.1));
}
.page-hero::after {
content: "";
position: absolute;
z-index: -1;
right: 7%;
bottom: -95px;
width: 245px;
height: 245px;
border: 1px solid rgba(220,184,126,.3);
border-radius: 50%;
box-shadow: 0 0 0 22px rgba(220,184,126,.06), 0 0 0 45px rgba(220,184,126,.04);
}
.page-book .page-hero { background-image: url("assets/bg-book.jpg"); }
.page-about .page-hero { background-image: url("assets/bg-about.jpg"); }
.page-philosophy .page-hero { background-image: url("assets/bg-philosophy.jpg"); }
.page-journal .page-hero { background-image: url("assets/bg-journal.jpg"); }
.page-reviews .page-hero { background-image: url("assets/bg-reviews.jpg"); }
.page-contact .page-hero { background-image: url("assets/bg-contact.jpg"); }
.page-article .page-hero { background-image: url("assets/bg-article.jpg"); }
.page-hero .eyebrow {
color: #e6c58f;
letter-spacing: .2em;
}
.page-hero h1 {
color: #fff8ec;
text-shadow: 0 3px 18px rgba(0,0,0,.25);
}
.page-hero h1 em { color: #dfbd83; }
.page-lead { color: #f0e4d2; }
.page-hero-note {
color: #efd3a3;
border-color: #c19a62;
}
/* All main content becomes airy ivory/white editorial space */
main { background: var(--ef-ivory); }
.section {
background: var(--ef-paper);
color: var(--ef-ink);
border-bottom: 1px solid var(--ef-rule);
}
.section:nth-of-type(even) { background: #f3ede3; }
.section-kicker { color: #795332; }
.section-kicker .kicker-line { background: #c7a16a; }
.eyebrow { color: #94663d; }
h2, h3 { color: var(--ef-ink); }
.lead, .book-copy .lead, .story-copy .lead { color: #5e4938; }
.book-copy p, .story-copy p, .prose-narrow p { color: #6d5c4d; }
.book-copy h2, .story-copy h2, .prose-narrow h2 { color: #352319; }
.book-copy h2 em, .story-copy h2 em { color: #98613a; }
/* Book and author image frames */
.book-visual img {
border: 1px solid #c9b28e;
box-shadow: 18px 22px 42px rgba(54,34,20,.22);
}
.image-note { color: #86603c; }
.portrait-border {
border: 8px solid #fffdf8;
box-shadow: 0 14px 38px rgba(57,36,22,.18);
}
.portrait-caption { color: #49301e; }
.portrait-caption span { color: #8b6b4b; }
.portrait-number { color: #b08a57; }
/* Quote bands and editorial separators */
.quote-band {
background: linear-gradient(120deg, #3b2417, #5a3923 55%, #3a2115);
color: #fff7eb;
border-top: 1px solid #a77b48;
border-bottom: 1px solid #a77b48;
}
.quote-band blockquote { color: #fff4e4; }
.quote-band span { color: #dfbd83; }
.quote-mark { color: #d1aa70; }
/* Feature cards and journal cards on pale paper */
.feature-card, .journal-card {
background: #fffdf8;
border: 1px solid #e3d5c1;
color: var(--ef-ink);
box-shadow: 0 8px 24px rgba(62,40,23,.055);
}
.feature-card>span, .journal-card .card-icon { color: #a47743; }
.feature-card h3, .journal-card h3 { color: #3a2619; }
.feature-card p, .journal-card p { color: #766656; }
.feature-card:hover, .journal-card:hover {
border-color: #bd9865;
box-shadow: 0 16px 32px rgba(62,40,23,.12);
}
/* Philosophy, reviews, and timeline panels */
.philosophy-section, .reviews-section {
background: #f4eee4;
color: var(--ef-ink);
}
.philosophy-inner h2, .reviews-inner h2 { color: #3a2619; }
.philosophy-inner p, .reviews-inner p { color: #756454; }
.philosophy-bottom > div { border-color: #ddcdb8; }
.timeline { border-color: #bd9865; }
.timeline div:before { background: #a87945; box-shadow: 0 0 0 5px #a879451a; }
.timeline b { color: #8d6038; }
.timeline span { color: #716050; }
.review-empty h2 { color: #3b271a; }
.review-empty p { color: #766657; }
.review-empty .lead { color: #594533; }
/* Contact form and editorial controls */
.contact-form, .contact-form input, .contact-form textarea, .contact-form select {
color: #3b291d;
}
.contact-form input, .contact-form textarea, .contact-form select {
background: #fffdf8;
border: 1px solid #d8c7b0;
}
.contact-form input:focus, .contact-form textarea:focus,
.contact-form select:focus {
border-color: #a87945;
background: #fff;
}
.editor-note {
background: #f1e8db;
border-color: #a87945;
color: #72583f;
}
.form-feedback { color: #72502d !important; }
/* Buttons retain the book's red as a restrained accent */
.button-red, .button.button-red {
background: #9f241b;
border-color: #9f241b;
color: #fffaf2;
}
.button-red:hover, .button.button-red:hover {
background: #7e1d17;
border-color: #7e1d17;
}
.button-outline {
border-color: #8d6945;
color: #513720;
}
.button-outline:hover {
background: #4a2b19;
color: #fff7eb;
}
/* Footer and homepage feature/tab strip remain brown */
.footer {
background: linear-gradient(180deg, #3c2417, #28170f);
color: #f4e8d7;
border-top: 4px solid #b38a55;
}
.footer-top>p { color: #d7c3a8; }
.footer-bottom { border-color: rgba(230,205,168,.22); color: #b49b7d; }
.back-top { color: #e0bd83; }
/* Home hero: preserve the approved stadium banner, keep feature strip brown */
.hero-cinematic, .hero {
color: #fff8ed;
}
.hero-featurebar {
background: linear-gradient(90deg, #2c190f, #51311d 50%, #2c190f);
border-top-color: #c7a16a;
border-bottom-color: #c7a16a;
}
.hero-featurebar>div { border-color: rgba(211,176,126,.45); }
.hero-featurebar b { color: #fff3df; }
.feature-symbol { color: #dfbd83; }
/* Mobile menu uses the same brown navigation treatment */
@media (max-width:650px) {
.nav {
background: #392316;
border-bottom: 1px solid #a77b48;
}
.nav a { color: #fff4e5; }
.page-hero { padding: 68px 7% 62px; }
}
/* Accessibility and focus */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
outline-color: #a87945;
}
/* ============================================================
MASTER REDESIGN — ERNIE FISHER
Approved homepage hero + cohesive editorial inner pages
============================================================ */
:root {
--ef-brown-950:#24140c;
--ef-brown-900:#321c10;
--ef-brown-800:#4a2b19;
--ef-brown-700:#68452d;
--ef-brown-500:#956b43;
--ef-gold:#c7a16a;
--ef-gold-light:#e2c794;
--ef-cream:#f8f3e9;
--ef-paper:#fffdf8;
--ef-paper-deep:#efe5d6;
--ef-ink:#332218;
--ef-muted:#766454;
--ef-red:#a91f19;
--ef-line:#dfd1bd;
}
body { background:var(--ef-cream); color:var(--ef-ink); }
::selection { background:#d9bf96; color:#2d1a0e; }
a { text-underline-offset:4px; }
.topline {
height:30px; background:var(--ef-brown-950); color:#e8d6b9;
border-bottom:1px solid rgba(199,161,106,.5);
font-size:8px; letter-spacing:.19em;
}
.site-header {
height:82px; background:linear-gradient(180deg,#4a2a18,#301b10);
border-bottom:1px solid #b18a59; box-shadow:0 7px 24px rgba(32,18,9,.2);
padding-inline:clamp(20px,6.2vw,100px);
}
.wordmark { color:#fff8ed; font-size:16px; letter-spacing:.08em; }
.wordmark small { color:#d9c4a4; font-size:8px; }
.mark {
width:43px;height:43px;border:1px solid var(--ef-gold);
color:#e7c98e;background:rgba(255,255,255,.025);
}
.nav { gap:clamp(13px,2.25vw,34px); color:#f7eddf; }
.nav a { position:relative; padding:9px 0; transition:color .25s ease; }
.nav a:not(.nav-cta)::after {
content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
background:var(--ef-gold);transition:right .25s ease;
}
.nav a:hover:not(.nav-cta)::after,
.nav a[aria-current="page"]::after { right:0; }
.nav a:hover { color:var(--ef-gold-light); }
.nav-cta {
border:1px solid var(--ef-gold);border-radius:2px;padding:11px 17px!important;
color:#fff7e9;transition:background .25s ease,border-color .25s ease;
}
.nav-cta:hover { background:#8f241b;border-color:#e0c18b; }
.menu-toggle { color:#fff6e8; }
/* Homepage keeps the approved stadium banner and left/centre/right composition. */
.hero-cinematic {
min-height:650px;padding:26px clamp(18px,4.5vw,72px) 0;
background:
linear-gradient(90deg,rgba(15,10,7,.16),rgba(18,11,7,.18) 45%,rgba(17,10,7,.08)),
linear-gradient(180deg,rgba(20,12,8,.03),rgba(22,13,8,.28)),
url("assets/bg-home-hero.png") center 48%/cover no-repeat;
}
.hero-cinematic .hero-stage {
max-width:1500px;min-height:535px;
grid-template-columns:minmax(230px,.92fr) minmax(360px,1.15fr) minmax(220px,.82fr);
gap:clamp(12px,2vw,32px);
}
.hero-person { min-height:515px; }
.hero-portrait {
max-height:535px;width:min(100%,390px);object-fit:contain;object-position:bottom center;
filter:drop-shadow(0 15px 23px rgba(24,12,5,.45));
}
.hero-message { padding:20px 0 36px; }
.hero-message .eyebrow { color:#f4e3c7;text-shadow:0 2px 7px #24150c; }
.hero-message h1 {
color:#fff6e8;font-size:clamp(66px,7.5vw,108px);
line-height:.83;text-shadow:0 5px 22px rgba(0,0,0,.32);
}
.hero-message h1 em { color:#dcb36f; }
.hero-role {
background:linear-gradient(90deg,#8e1a15,#b7221b,#8e1a15);
color:#fff8ed;box-shadow:0 4px 14px #24100955;
}
.hero-message .hero-copy { color:#fff4e5;text-shadow:0 2px 10px #24150c;font-size:18px; }
.hero-message .button-red { background:#b51e19;border-color:#e1b76e; }
.hero-message .button-outline { border-color:#e3c18a;color:#fff5e5;background:rgba(28,16,9,.25); }
.hero-message .button-outline:hover { background:#4b2b19; }
.hero-book { width:min(100%,305px); }
.hero-book img {
border:1px solid #c8a06a;box-shadow:18px 24px 42px rgba(18,9,4,.48);
}
.hero-featurebar {
min-height:86px;background:linear-gradient(90deg,#2b180e,#55351f 50%,#2b180e);
border-top:1px solid #d1ab70;border-bottom:1px solid #d1ab70;
}
.hero-featurebar>div { border-color:rgba(218,185,137,.42); }
.hero-featurebar b { color:#fff2dd; }
.feature-symbol { color:#e3bf7d; }
.portrait-tag { color:#f0d6a9;border-color:#caa46c; }
/* A refined recurring page-banner system: each page gets its own photo. */
.page-hero {
min-height:390px;position:relative;isolation:isolate;overflow:hidden;
display:flex;flex-direction:column;justify-content:center;
padding:78px clamp(26px,9vw,145px) 82px;
color:#fff8ed;background-color:var(--ef-brown-900);
background-position:center 48%;background-size:cover;background-repeat:no-repeat;
border-bottom:5px solid var(--ef-gold);
}
.page-hero::before {
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(90deg,rgba(39,22,13,.94) 0%,rgba(45,26,15,.84) 43%,rgba(40,23,13,.26) 100%),
linear-gradient(0deg,rgba(25,14,8,.42),rgba(25,14,8,.04));
}
.page-hero::after {
content:"";position:absolute;z-index:-1;right:8%;bottom:-115px;
width:300px;height:300px;border:1px solid rgba(230,196,139,.36);
border-radius:50%;box-shadow:0 0 0 22px rgba(230,196,139,.06),0 0 0 46px rgba(230,196,139,.035);
}
.page-book .page-hero { background-image:url("assets/bg-book.jpg"); }
.page-about .page-hero { background-image:url("assets/bg-about.jpg"); }
.page-philosophy .page-hero { background-image:url("assets/bg-philosophy.jpg"); }
.page-journal .page-hero { background-image:url("assets/bg-journal.jpg"); }
.page-reviews .page-hero { background-image:url("assets/bg-reviews.jpg"); }
.page-contact .page-hero { background-image:url("assets/bg-contact.jpg"); }
.page-article .page-hero { background-image:url("assets/bg-article.jpg"); }
.page-hero .eyebrow {
position:relative;color:#e4c18a;letter-spacing:.22em;font-size:10px;
margin:0 0 16px;text-shadow:0 2px 9px #170c07;
}
.page-hero h1 {
max-width:760px;margin:0 0 18px;color:#fff7e9;
font:700 clamp(46px,6vw,78px)/1.02 "Playfair Display",serif;
letter-spacing:-.045em;text-shadow:0 4px 22px rgba(0,0,0,.28);
}
.page-hero h1 em { color:#e0bb7e;font-weight:500; }
.page-lead {
max-width:590px;margin:0;color:#f1e5d3;
font:italic clamp(17px,1.7vw,21px)/1.55 "Playfair Display",serif;
text-shadow:0 2px 10px #1b0f08;
}
.page-hero-note {
align-self:flex-start;margin-top:24px;padding:9px 14px;
border:1px solid rgba(225,190,132,.75);background:rgba(35,20,12,.42);
color:#f1d6a5;font-size:9px;letter-spacing:.17em;
}
/* Editorial content: alternate pure white and parchment panels. */
main { background:var(--ef-cream); }
.section {
padding:clamp(64px,7.5vw,108px) clamp(22px,9vw,145px);
background:var(--ef-paper);color:var(--ef-ink);
}
.section:nth-of-type(even) { background:#f2eadf; }
.section-kicker { color:#92683e;letter-spacing:.18em; }
.section-kicker span:last-child { color:#8d7b68; }
.kicker-line { background:#c6a16a; }
.eyebrow { color:#956b3f; }
h2,h3 { color:var(--ef-ink); }
.book-copy h2,.story-copy h2,.journal-heading h2,.contact-grid h2,
.prose-narrow h2 {
color:#352116;
font:700 clamp(36px,4.2vw,58px)/1.08 "Playfair Display",serif;
letter-spacing:-.035em;
}
.book-copy h2 em,.story-copy h2 em,.journal-heading h2 em,
.prose-narrow h2 em { color:#98613b; }
.book-copy .lead,.story-copy .lead,.contact-grid .lead {
color:#5e4938;font:italic 19px/1.65 "Playfair Display",serif;
}
.book-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),
.prose-narrow p { color:#6d5d4e; }
.book-visual img {
border:1px solid #cdb58e;
box-shadow:18px 22px 42px rgba(52,32,17,.2);
}
.book-shadow { background:#a87a45;opacity:.14; }
.image-note { color:#86603e; }
.portrait-wrap { max-width:360px; }
.portrait-border {
border:1px solid #c9ab7b;background:#fffdf8;padding:9px;
box-shadow:0 16px 35px rgba(49,30,16,.15);
}
.portrait-border img { filter:none; }
.portrait-caption b { color:#3b281b; }
.portrait-caption span { color:#86684a; }
.portrait-number { color:#a77a47; }
/* Home intro and section transitions */
.intro-strip {
background:#f3eadb;color:#4a2b19;border-top:1px solid #d7c4a6;
border-bottom:1px solid #d7c4a6;min-height:92px;
}
.intro-strip p { color:#4a2b19; }
.intro-strip span { color:#8d6742; }
.quote-band {
background:linear-gradient(120deg,#2d190f,#50311d 52%,#2b180e);
border-block:1px solid #b18a58;
}
.quote-band blockquote { color:#fff4e5; }
.quote-band .quote-mark { color:#d5ad70; }
.quote-band>span { color:#e0c18c; }
.story-section { background:#f4ede3; }
.philosophy-section {
background:#352116;color:#fff6e9;
}
.philosophy-bg {
background:
linear-gradient(90deg,rgba(37,21,12,.95),rgba(47,28,16,.83) 56%,rgba(47,28,16,.38)),
url("assets/bg-philosophy.jpg") center/cover no-repeat;
opacity:1;
}
.philosophy-inner h2 { color:#fff4e3; }
.philosophy-inner h2 em { color:#e0bb7e; }
.philosophy-bottom>p,.diamond-explainer p { color:#e2d3bf; }
.diamond-explainer { border-color:#c6a16a; }
.diamond-explainer b { color:#f7e8d0; }
.light .section-kicker,.light .section-kicker span:last-child { color:#e5c58f; }
.light .kicker-line { background:#c6a16a; }
/* Feature cards, journal cards, and content modules */
.feature-grid,.journal-cards { gap:20px; }
.feature-card,.journal-card {
background:#fffdf8;color:#3a281c;border:1px solid #e1d2bd;
box-shadow:0 8px 24px rgba(52,33,18,.055);
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.feature-card:hover,.journal-card:hover {
transform:translateY(-6px);border-color:#bd9865;
box-shadow:0 18px 35px rgba(52,33,18,.13);
}
.feature-card h3,.journal-card h3 { color:#3a2619; }
.feature-card p,.journal-card p { color:#756454; }
.card-no,.card-status { color:#987044; }
.card-icon { color:#a87945; }
.text-link { color:#704827; }
.text-link span { color:#a87945; }
.coming-soon {
background:#f2e9dc;border:1px solid #dfcdb3;padding:15px 17px;
max-width:520px;
}
.coming-soon b { color:#4b321f; }
.coming-soon small { color:#77634e; }
.status-dot { background:#a77b48;box-shadow:0 0 0 5px rgba(167,123,72,.13); }
.book-facts { border-color:#d8c7ae; }
.book-facts strong { color:#8f6035; }
.book-facts span { color:#82705d; }
/* Reviews and philosophy content modules */
.reviews-section {
background:linear-gradient(135deg,#f5eee3,#fffdf8);
color:#332218;border-block:1px solid #dfd1bd;
}
.reviews-inner h2 { color:#3a2619; }
.reviews-inner h2 em { color:#95603a; }
.reviews-inner>p:not(.eyebrow) { color:#756454; }
.review-empty { color:#3a281c; }
.review-empty h2 { color:#3b271a; }
.review-empty p { color:#766657; }
.review-empty .lead { color:#594533; }
.philosophy-section.philosophy-page { background:#382318; }
.prose-narrow {
max-width:820px;margin:0 auto;
background:#fffdf8;border:1px solid #e4d6c2;
padding:clamp(28px,5vw,58px);
box-shadow:0 12px 30px rgba(57,36,19,.06);
}
.prose-narrow h2 { margin-top:0; }
.diamond-explainer {
background:rgba(255,255,255,.045);padding:20px;
}
/* Contact form and article content */
.contact-grid { color:#382719; }
.contact-grid h2 { color:#352116; }
.contact-aside { color:#866b50; }
.contact-aside b { color:#4d3522; }
.contact-form {
padding:clamp(24px,3vw,38px);background:#fffdf8;
border:1px solid #e1d2bd;box-shadow:0 12px 30px rgba(52,33,18,.07);
}
.contact-form label { color:#8c6037; }
.contact-form input,.contact-form textarea,.contact-form select {
color:#382719;background:#fbf8f1;border:1px solid #dfd0ba;
border-radius:2px;padding:13px 14px;
}
.contact-form input:focus,.contact-form textarea:focus,
.contact-form select:focus { border-color:#a87945;background:#fff; }
.contact-form select option { background:#fffdf8;color:#382719; }
.form-note,.form-feedback { color:#806b55; }
.editor-note {
background:#f2e9dc;border-left:3px solid #a87945;
color:#70563d;padding:16px 18px;
}
/* CTA buttons use the book's red as a small, intentional accent. */
.button-red,.button.button-red {
background:linear-gradient(180deg,#b52921,#941b16);
color:#fff9ef;border:1px solid #d4a36b;
box-shadow:0 5px 13px rgba(111,30,20,.17);
}
.button-red:hover,.button.button-red:hover {
background:#7f1b15;transform:translateY(-3px);
}
.button-outline {
border:1px solid #99764d;color:#53371f;background:rgba(255,255,255,.5);
}
.button-outline:hover { background:#4a2b19;color:#fff7eb; }
/* Footer and responsive nav complete the shared brand system. */
.footer {
background:linear-gradient(180deg,#452918,#24140c);
color:#f5e8d5;border-top:4px solid #bd955e;
}
.footer-top>p { color:#d7c4a9; }
.footer-bottom { border-color:rgba(230,205,168,.22);color:#b69c7c; }
.back-top { color:#e0bd83; }
@media(max-width:850px) {
.site-header { padding-inline:22px; }
.nav { gap:13px; }
.hero-cinematic .hero-stage {
grid-template-columns:minmax(175px,.8fr) minmax(260px,1.15fr) minmax(165px,.75fr);
gap:8px;
}
.hero-message h1 { font-size:clamp(56px,7vw,78px); }
.hero-book { width:min(100%,230px); }
.page-hero { min-height:350px; }
}
@media(max-width:650px) {
.topline { height:26px; }
.site-header { height:70px;background:#3c2315; }
.nav {
top:70px;background:#382115;border-bottom:1px solid #a78050;
box-shadow:0 12px 22px rgba(32,18,9,.2);
}
.nav a { color:#fff5e7; }
.hero-cinematic { min-height:unset;padding:22px 16px 0; }
.hero-cinematic .hero-stage {
min-height:unset;grid-template-columns:1fr 1fr;gap:6px;
}
.hero-message { grid-column:1/-1;grid-row:1;padding:26px 0 12px; }
.hero-message h1 { font-size:clamp(56px,13vw,80px); }
.hero-message .hero-copy { font-size:15px; }
.hero-person { grid-column:1;grid-row:2;min-height:245px; }
.hero-portrait { max-height:280px; }
.hero-book { grid-column:2;grid-row:2;width:min(100%,175px);padding:8px 0 20px; }
.hero-featurebar { grid-template-columns:repeat(2,1fr);margin-top:8px; }
.hero-featurebar>div { min-height:58px;justify-content:flex-start;border-bottom:1px solid rgba(218,185,137,.35); }
.hero-featurebar>div:nth-child(2) { border-right:0; }
.hero-featurebar>div:nth-child(3),.hero-featurebar>div:nth-child(4) { border-bottom:0; }
.page-hero { min-height:320px;padding:64px 24px 66px;background-position:center; }
.page-hero h1 { font-size:clamp(42px,11vw,62px); }
.page-lead { font-size:17px; }
.section { padding:64px 22px; }
.book-grid,.story-grid,.contact-grid { grid-template-columns:1fr;gap:38px; }
.journal-cards,.feature-grid { grid-template-columns:1fr; }
.prose-narrow { padding:26px 21px; }
.footer-top { flex-wrap:wrap;gap:20px; }
.footer-top>p { width:100%;order:3; }
.footer-bottom { flex-direction:column;gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
*,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important; }
}
.hero-cinematic { background-image: linear-gradient(90deg,rgba(15,10,7,.16),rgba(18,11,7,.18) 45%,rgba(17,10,7,.08)),linear-gradient(180deg,rgba(20,12,8,.03),rgba(22,13,8,.28)),url("assets/bg-home-hero.png"); }
/* Dedicated page-title artwork banners — generated for each inner page.
The artwork includes its own page title, so the duplicate HTML title is hidden. */
.page-hero {
min-height: clamp(245px, 27vw, 390px);
padding: 0;
background-size: cover;
background-position: center;
border-bottom: 5px solid var(--ef-gold);
}
.page-hero::before { background: linear-gradient(90deg,rgba(35,19,11,.08),rgba(35,19,11,.02)); }
.page-hero::after { display:none; }
.page-hero > .eyebrow,
.page-hero > h1,
.page-hero > .page-lead,
.page-hero > .page-hero-note { display:none; }
.page-book .page-hero { background-image:url("assets/banner-book.png"); }
.page-about .page-hero { background-image:url("assets/banner-about.png"); }
.page-philosophy .page-hero { background-image:url("assets/banner-philosophy.png"); }
.page-journal .page-hero { background-image:url("assets/banner-journal.png"); }
.page-reviews .page-hero { background-image:url("assets/banner-reviews.png"); }
.page-contact .page-hero { background-image:url("assets/banner-contact.png"); }
.page-article .page-hero { background-image:url("assets/banner-journal.png"); }
@media(max-width:650px) {
.page-hero { min-height:210px; background-position:center; }
}
/* FINAL INNER-PAGE BANNER IMPLEMENTATION
The approved homepage is intentionally left unchanged. */
.page-hero {
min-height: clamp(290px, 31vw, 430px) !important;
padding: clamp(58px, 7vw, 100px) clamp(24px, 9vw, 145px) !important;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #392316;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center 52% !important;
border-bottom: 5px solid #c6a36a;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
display: block !important;
background:
linear-gradient(90deg, rgba(35,20,12,.92) 0%, rgba(43,25,15,.78) 43%, rgba(43,25,15,.20) 100%),
linear-gradient(0deg, rgba(26,15,9,.38), rgba(26,15,9,.04));
}
.page-hero::after { display:none !important; }
.page-hero > .eyebrow,
.page-hero > h1,
.page-hero > .page-lead,
.page-hero > .page-hero-note {
display: block !important;
position: relative;
z-index: 1;
}
.page-hero > .eyebrow {
margin: 0 0 15px;
color: #e8c990;
font: 700 10px/1.4 "DM Sans", sans-serif;
letter-spacing: .22em;
text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.page-hero > h1 {
max-width: 760px;
margin: 0 0 16px;
color: #fff8ed;
font: 700 clamp(42px, 5.8vw, 76px)/1.02 "Playfair Display", Georgia, serif;
letter-spacing: -.045em;
text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.page-hero > h1 em {
color: #e1bd80;
font-weight: 500;
}
.page-hero > .page-lead {
max-width: 590px;
margin: 0;
color: #f2e6d5;
font: italic clamp(16px, 1.55vw, 20px)/1.55 "Playfair Display", Georgia, serif;
text-shadow: 0 2px 9px rgba(0,0,0,.55);
}
.page-hero > .page-hero-note {
align-self: flex-start;
margin-top: 22px;
padding: 9px 14px;
border: 1px solid rgba(225,190,132,.8);
background: rgba(35,20,12,.55);
color: #f0d5a4;
font: 700 9px/1.4 "DM Sans", sans-serif;
letter-spacing: .16em;
}
.page-book .page-hero { background-image:url("assets/banner-book.jpg") !important; }
.page-about .page-hero { background-image:url("assets/banner-about.jpg") !important; }
.page-philosophy .page-hero { background-image:url("assets/banner-philosophy.jpg") !important; }
.page-journal .page-hero { background-image:url("assets/banner-journal.jpg") !important; }
.page-reviews .page-hero { background-image:url("assets/banner-reviews.jpg") !important; }
.page-contact .page-hero { background-image:url("assets/banner-contact.jpg") !important; }
.page-article .page-hero { background-image:url("assets/banner-journal.jpg") !important; }
@media (max-width:650px) {
.page-hero {
min-height: 280px !important;
padding: 52px 23px !important;
background-position: center !important;
}
.page-hero > h1 { font-size: clamp(39px, 10vw, 54px); }
.page-hero > .page-lead { font-size: 16px; max-width: 95%; }
}
/* ============================================================
FINAL BRAND CONSISTENCY PASS
One warm photographic grade across the homepage and all
inner-page banners; clean ivory editorial content system.
============================================================ */
:root {
--brand-espresso: #321d12;
--brand-brown: #4b2e1d;
--brand-leather: #725036;
--brand-gold: #c6a16a;
--brand-ivory: #f8f4ec;
--brand-white: #fffdf9;
--brand-ink: #34251b;
--brand-muted: #77695b;
--brand-line: #e4d8c7;
--brand-red: #a9221a;
}
/* Shared warm color grade: keep the photography visible, avoid muddy overlays. */
.hero-cinematic {
background-image:
linear-gradient(90deg, rgba(42,25,15,.22) 0%, rgba(42,25,15,.12) 48%, rgba(42,25,15,.10) 100%),
linear-gradient(180deg, rgba(28,17,11,.05) 0%, rgba(28,17,11,.16) 100%),
url("assets/bg-home-hero.png") !important;
background-position: center 48% !important;
background-size: cover !important;
}
.page-hero {
background-color: #392619 !important;
border-bottom: 4px solid var(--brand-gold) !important;
}
.page-hero::before {
background:
linear-gradient(90deg,
rgba(42,25,15,.55) 0%,
rgba(42,25,15,.38) 42%,
rgba(42,25,15,.12) 100%),
linear-gradient(180deg,
rgba(42,25,15,.06) 0%,
rgba(42,25,15,.18) 100%) !important;
}
.page-book .page-hero { background-image:url("assets/banner-book.jpg") !important; }
.page-about .page-hero { background-image:url("assets/banner-about.jpg") !important; }
.page-philosophy .page-hero { background-image:url("assets/banner-philosophy.jpg") !important; }
.page-journal .page-hero { background-image:url("assets/banner-journal.jpg") !important; }
.page-reviews .page-hero { background-image:url("assets/banner-reviews.jpg") !important; }
.page-contact .page-hero { background-image:url("assets/banner-contact.jpg") !important; }
.page-article .page-hero { background-image:url("assets/banner-journal.jpg") !important; }
/* Consistent global frame, header, navigation and footer. */
html { background:var(--brand-ivory); scroll-behavior:smooth; }
body {
background:var(--brand-ivory);
color:var(--brand-ink);
font-family:"DM Sans",Arial,sans-serif;
}
.topline {
background:#28170f !important;
color:#e9d7bc !important;
border-bottom:1px solid rgba(198,161,106,.48) !important;
}
.site-header {
background:linear-gradient(180deg,#4a2c1b 0%,#321d12 100%) !important;
color:#fff8ed !important;
border-bottom:1px solid #b38a55 !important;
box-shadow:0 5px 20px rgba(37,22,13,.15) !important;
}
.wordmark,.nav,.nav a { color:#fff7eb; }
.wordmark small { color:#dbc6a7; }
.mark { border-color:var(--brand-gold);color:#e7c88e; }
.nav a[aria-current="page"] { color:#edcf98; }
.nav a:not(.nav-cta)::after { background:var(--brand-gold); }
.nav-cta { border-color:var(--brand-gold);color:#fff7eb; }
.nav-cta:hover { background:#8f241b;color:#fff; }
.menu-toggle { color:#fff6e8; }
/* Unified editorial canvas and predictable section rhythm. */
main { background:var(--brand-ivory); }
.section {
background:var(--brand-white);
color:var(--brand-ink);
border-bottom:1px solid var(--brand-line);
}
.section:nth-of-type(even) { background:#f3ede3; }
.section-kicker,.eyebrow { color:#8a603b; }
.section-kicker .kicker-line,.kicker-line { background:var(--brand-gold); }
h1,h2,h3,h4 { color:var(--brand-ink); }
p { text-wrap:pretty; }
.book-copy h2,.story-copy h2,.journal-heading h2,
.contact-grid h2,.prose-narrow h2 {
color:#342116;
font-family:"Playfair Display",Georgia,serif;
}
.book-copy h2 em,.story-copy h2 em,.prose-narrow h2 em { color:#94623b; }
.book-copy .lead,.story-copy .lead,.contact-grid .lead {
color:#604b39;
}
.book-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),
.prose-narrow p,.contact-grid p { color:#6e5d4d; }
/* Reusable cards, quotes, timelines and forms all share the same finish. */
.feature-card,.journal-card,.contact-form,.prose-narrow {
background:var(--brand-white);
border:1px solid var(--brand-line);
box-shadow:0 8px 26px rgba(57,37,21,.055);
}
.feature-card h3,.journal-card h3 { color:#3c281a; }
.feature-card p,.journal-card p { color:var(--brand-muted); }
.feature-card:hover,.journal-card:hover {
border-color:#c7a16b;
box-shadow:0 16px 34px rgba(57,37,21,.11);
}
.text-link { color:#765033; }
.text-link:hover { color:#a9221a; }
.quote-band {
background:linear-gradient(110deg,#2d1a10,#50321f 52%,#2d1a10);
border-block:1px solid #b38a55;
color:#fff6e8;
}
.quote-band blockquote { color:#fff6e8; }
.quote-band .quote-mark,.quote-band span { color:#e0bd83; }
.contact-form label { color:#795332; }
.contact-form input,.contact-form textarea,.contact-form select {
color:#39281c;background:#fbf8f2;border:1px solid #dfd1bd;
}
.contact-form input:focus,.contact-form textarea:focus,
.contact-form select:focus {
outline:none;border-color:#a77a48;box-shadow:0 0 0 3px rgba(167,122,72,.12);
background:#fff;
}
.button-red,.button.button-red {
background:linear-gradient(180deg,#b62a20,#941d17);
border:1px solid #c99e66;color:#fffaf2;
}
.button-outline {
border:1px solid #9d7a50;color:#503720;background:rgba(255,255,255,.42);
}
.button-outline:hover { background:#452919;color:#fff8ed; }
.footer {
background:linear-gradient(180deg,#462a19,#28170f);
border-top:4px solid #bd955e;color:#f5e8d5;
}
.footer-top>p { color:#d7c4a9; }
.footer-bottom { border-color:rgba(230,205,168,.22);color:#b69c7c; }
/* Inner-page banners: common geometry, consistent contrast and readable type. */
.page-hero {
min-height:clamp(300px,31vw,420px) !important;
padding:clamp(58px,7vw,96px) clamp(24px,9vw,140px) !important;
background-position:center 50% !important;
}
.page-hero > .eyebrow {
color:#efd09a !important;
letter-spacing:.2em !important;
}
.page-hero > h1 {
color:#fff8ed !important;
text-shadow:0 3px 18px rgba(0,0,0,.38) !important;
}
.page-hero > h1 em { color:#e3bd7f !important; }
.page-hero > .page-lead {
color:#fff3e3 !important;
text-shadow:0 2px 9px rgba(0,0,0,.45) !important;
}
.page-hero > .page-hero-note {
background:rgba(39,23,14,.42) !important;
border-color:rgba(226,192,137,.78) !important;
color:#f2d7a6 !important;
}
/* The homepage feature strip is the brown bridge into the ivory content. */
.hero-featurebar {
background:linear-gradient(90deg,#2b190f,#4b2e1b 50%,#2b190f) !important;
border-top:1px solid #c6a16a !important;
border-bottom:1px solid #c6a16a !important;
}
.hero-featurebar b { color:#fff3df !important; }
.hero-featurebar .feature-symbol { color:#e0bd83 !important; }
@media(max-width:650px) {
.site-header { background:#3c2417 !important; }
.nav { background:#382115 !important; }
.page-hero {
min-height:270px !important;
padding:48px 22px !important;
background-position:center !important;
}
.page-hero > h1 { font-size:clamp(39px,10vw,54px) !important; }
}
@media(prefers-reduced-motion:reduce) {
html { scroll-behavior:auto; }
}
/* FINAL BROWN SHADE MATCH — apply one consistent leather palette to all banners */
.hero-cinematic {
background-image:
linear-gradient(90deg, rgba(48,29,17,.17) 0%, rgba(48,29,17,.13) 48%, rgba(48,29,17,.15) 100%),
linear-gradient(180deg, rgba(48,29,17,.05) 0%, rgba(48,29,17,.20) 100%),
url("assets/bg-home-hero-brown.png") !important;
background-size: cover !important;
background-position: center 48% !important;
}
.page-hero {
background-color: #4a2d1c !important;
border-bottom: 4px solid #c6a16a !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center 50% !important;
}
.page-hero::before {
background:
linear-gradient(90deg,
rgba(42,25,15,.58) 0%,
rgba(42,25,15,.42) 48%,
rgba(42,25,15,.30) 100%),
linear-gradient(180deg, rgba(42,25,15,.10), rgba(42,25,15,.18)) !important;
}
.page-book .page-hero { background-image:url("assets/banner-book.jpg") !important; }
.page-about .page-hero { background-image:url("assets/banner-about.jpg") !important; }
.page-philosophy .page-hero { background-image:url("assets/banner-philosophy.jpg") !important; }
.page-journal .page-hero { background-image:url("assets/banner-journal.jpg") !important; }
.page-reviews .page-hero { background-image:url("assets/banner-reviews.jpg") !important; }
.page-contact .page-hero { background-image:url("assets/banner-contact.jpg") !important; }
.page-article .page-hero { background-image:url("assets/banner-journal.jpg") !important; }
/* MASTER SHADE CORRECTION — homepage + all six inner banners */
.hero-cinematic {
background-image:
linear-gradient(90deg, rgba(57,35,21,.18), rgba(57,35,21,.18)),
url("assets/bg-home-hero-unified.jpg") !important;
background-size: cover !important;
background-position: center 48% !important;
}
.page-hero {
background-color: #4a2d1c !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center 50% !important;
border-bottom: 4px solid #c6a16a !important;
}
.page-hero::before {
background: linear-gradient(
90deg,
rgba(57,35,21,.34) 0%,
rgba(57,35,21,.27) 50%,
rgba(57,35,21,.22) 100%
) !important;
}
.page-book .page-hero { background-image:url("assets/banner-book-unified.jpg") !important; }
.page-about .page-hero { background-image:url("assets/banner-about-unified.jpg") !important; }
.page-philosophy .page-hero { background-image:url("assets/banner-philosophy-unified.jpg") !important; }
.page-journal .page-hero { background-image:url("assets/banner-journal-unified.jpg") !important; }
.page-reviews .page-hero { background-image:url("assets/banner-reviews-unified.jpg") !important; }
.page-contact .page-hero { background-image:url("assets/banner-contact-unified.jpg") !important; }
.page-article .page-hero { background-image:url("assets/banner-journal-unified.jpg") !important; }
/* IDENTICAL BROWN VEIL ON THE HOMEPAGE HERO AND EVERY INNER-PAGE BANNER */
.hero-cinematic {
background-image:
linear-gradient(rgba(57,35,21,.28), rgba(57,35,21,.28)),
url("assets/bg-home-hero-unified.jpg") !important;
}
.page-hero::before {
background: linear-gradient(rgba(57,35,21,.28), rgba(57,35,21,.28)) !important;
}
/* ===========================================================
UNIFIED BANNER SYSTEM — ALL PAGES
Same image grade, brown overlay, height, typography,
left alignment, spacing and gold divider.
=========================================================== */
:root {
--ef-unified-brown: #3b2417;
--ef-unified-brown-2: #513521;
--ef-unified-gold: #c8a36b;
--ef-unified-cream: #f8f4ec;
--ef-unified-ink: #38271b;
}
/* Keep the approved home composition, now using the shared grade. */
.hero-cinematic {
background-image:
linear-gradient(rgba(59,36,23,.28), rgba(59,36,23,.28)),
url("assets/bg-home-hero-consistent.jpg") !important;
background-size: cover !important;
background-position: center 48% !important;
}
/* One exact geometry and treatment for every inner-page banner. */
.page-hero {
height: 410px !important;
min-height: 410px !important;
box-sizing: border-box !important;
padding: 52px clamp(24px, 9vw, 140px) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 0 !important;
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
background-color: var(--ef-unified-brown) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center !important;
background-blend-mode: normal !important;
border: 0 !important;
border-bottom: 4px solid var(--ef-unified-gold) !important;
}
/* Shared shade on each separate photograph. */
.page-hero::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
background: linear-gradient(
90deg,
rgba(59,36,23,.28) 0%,
rgba(59,36,23,.28) 52%,
rgba(59,36,23,.28) 100%
) !important;
}
.page-hero::after { display: none !important; }
/* All inner page title blocks share exact placement and type scale. */
.page-hero > .eyebrow {
display: block !important;
position: relative !important;
z-index: 1 !important;
margin: 0 0 15px !important;
color: #e7c891 !important;
font: 700 10px/1.45 "DM Sans", Arial, sans-serif !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
text-shadow: 0 2px 9px rgba(20,11,6,.5) !important;
}
.page-hero > h1 {
display: block !important;
position: relative !important;
z-index: 1 !important;
max-width: 760px !important;
margin: 0 0 17px !important;
color: #fff8ed !important;
font: 700 clamp(44px,5.2vw,70px)/1.04 "Playfair Display", Georgia, serif !important;
letter-spacing: -.04em !important;
text-align: left !important;
text-shadow: 0 4px 20px rgba(20,11,6,.45) !important;
}
.page-hero > h1 em {
color: #e0bd82 !important;
font-weight: 500 !important;
}
.page-hero > .page-lead {
display: block !important;
position: relative !important;
z-index: 1 !important;
max-width: 610px !important;
margin: 0 !important;
color: #f5ead9 !important;
font: italic clamp(17px,1.55vw,20px)/1.58 "Playfair Display", Georgia, serif !important;
text-align: left !important;
text-shadow: 0 2px 10px rgba(20,11,6,.55) !important;
}
.page-hero > .page-hero-note {
display: inline-block !important;
position: relative !important;
z-index: 1 !important;
align-self: flex-start !important;
margin-top: 20px !important;
padding: 8px 13px !important;
background: rgba(42,25,15,.42) !important;
border: 1px solid rgba(225,192,139,.78) !important;
color: #f2d7a8 !important;
font: 700 9px/1.4 "DM Sans", Arial, sans-serif !important;
letter-spacing: .16em !important;
}
/* Each banner has unique imagery, but uses identical layout and treatment. */
.page-book .page-hero { background-image:url("assets/banner-book.jpg") !important; }
.page-about .page-hero { background-image:url("assets/banner-about.jpg") !important; }
.page-philosophy .page-hero { background-image:url("assets/banner-philosophy.jpg") !important; }
.page-journal .page-hero { background-image:url("assets/banner-journal.jpg") !important; }
.page-reviews .page-hero { background-image:url("assets/banner-reviews.jpg") !important; }
.page-contact .page-hero { background-image:url("assets/banner-contact.jpg") !important; }
.page-article .page-hero { background-image:url("assets/banner-article.jpg") !important; }
/* Keep the content system consistent under every banner. */
main { background: var(--ef-unified-cream) !important; }
.section {
background: #fffdf9 !important;
color: var(--ef-unified-ink) !important;
}
.section:nth-of-type(even) { background: #f3ede3 !important; }
.section-kicker { color: #8a603b !important; }
.section-kicker .kicker-line { background: var(--ef-unified-gold) !important; }
.book-copy h2,.story-copy h2,.journal-heading h2,.contact-grid h2,
.prose-narrow h2 { color: var(--ef-unified-ink) !important; }
.book-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),
.prose-narrow p { color: #6e5d4d !important; }
.feature-card,.journal-card,.contact-form,.prose-narrow {
background: #fffdf9 !important;
border-color: #e1d4c2 !important;
}
.quote-band {
background: linear-gradient(110deg,#2d1b11,#503420 52%,#2d1b11) !important;
}
.footer {
background: linear-gradient(180deg,#452a19,#29180f) !important;
border-top: 4px solid var(--ef-unified-gold) !important;
}
.button-red,.button.button-red { background:#a92119 !important; }
.button-outline { border-color:#9d7b52 !important; color:#513a27 !important; }
@media (max-width: 700px) {
.page-hero {
height: 320px !important;
min-height: 320px !important;
padding: 40px 24px !important;
background-position: center center !important;
}
.page-hero > h1 { font-size: clamp(38px,9vw,54px) !important; }
.page-hero > .page-lead { font-size: 16px !important; max-width: 95% !important; }
}
@media (max-width: 420px) {
.page-hero { height: 290px !important; min-height: 290px !important; }
.page-hero > .eyebrow { font-size: 8px !important; }
.page-hero > h1 { font-size: 38px !important; }
.page-hero > .page-lead { font-size: 15px !important; }
}
/* ==========================================================
SINGLE BROWN BANNER SYSTEM
Every image has the same pre-applied espresso grade:
38% overlay of #392317. CSS adds no image tint.
========================================================== */
.hero-cinematic {
background-image: url("assets/banner-home-same-brown.jpg") !important;
background-size: cover !important;
background-position: center 48% !important;
background-color: #392317 !important;
}
.hero-cinematic .stadium-atmosphere,
.hero-cinematic::before {
display: none !important;
content: none !important;
}
.hero-cinematic .hero-stage,
.hero-cinematic .hero-featurebar {
position: relative;
z-index: 1;
}
.page-hero {
height: 410px !important;
min-height: 410px !important;
box-sizing: border-box !important;
padding: 52px clamp(24px, 9vw, 140px) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
background-color: #392317 !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center !important;
background-blend-mode: normal !important;
border: 0 !important;
border-bottom: 4px solid #c6a16a !important;
}
.page-hero::before,
.page-hero::after {
content: none !important;
display: none !important;
}
.page-hero > .eyebrow {
display: block !important;
position: relative !important;
z-index: 1 !important;
margin: 0 0 15px !important;
color: #e7c891 !important;
font: 700 10px/1.45 "DM Sans", Arial, sans-serif !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
text-shadow: 0 2px 9px rgba(20,11,6,.55) !important;
}
.page-hero > h1 {
display: block !important;
position: relative !important;
z-index: 1 !important;
max-width: 760px !important;
margin: 0 0 17px !important;
color: #fff8ed !important;
font: 700 clamp(44px,5.2vw,70px)/1.04 "Playfair Display", Georgia, serif !important;
letter-spacing: -.04em !important;
text-align: left !important;
text-shadow: 0 4px 20px rgba(20,11,6,.45) !important;
}
.page-hero > h1 em { color: #e0bd82 !important; font-weight: 500 !important; }
.page-hero > .page-lead {
display: block !important;
position: relative !important;
z-index: 1 !important;
max-width: 610px !important;
margin: 0 !important;
color: #f5ead9 !important;
font: italic clamp(17px,1.55vw,20px)/1.58 "Playfair Display", Georgia, serif !important;
text-align: left !important;
text-shadow: 0 2px 10px rgba(20,11,6,.55) !important;
}
.page-hero > .page-hero-note {
display: inline-block !important;
position: relative !important;
z-index: 1 !important;
align-self: flex-start !important;
margin-top: 20px !important;
padding: 8px 13px !important;
background: rgba(42,25,15,.42) !important;
border: 1px solid rgba(225,192,139,.78) !important;
color: #f2d7a8 !important;
font: 700 9px/1.4 "DM Sans", Arial, sans-serif !important;
letter-spacing: .16em !important;
}
.page-book .page-hero { background-image:url("assets/banner-book-same-brown.jpg") !important; }
.page-about .page-hero { background-image:url("assets/banner-about-same-brown.jpg") !important; }
.page-philosophy .page-hero { background-image:url("assets/banner-philosophy-same-brown.jpg") !important; }
.page-journal .page-hero { background-image:url("assets/banner-journal-same-brown.jpg") !important; }
.page-reviews .page-hero { background-image:url("assets/banner-reviews-same-brown.jpg") !important; }
.page-contact .page-hero { background-image:url("assets/banner-contact-same-brown.jpg") !important; }
.page-article .page-hero { background-image:url("assets/banner-journal-same-brown.jpg") !important; }
@media (max-width:700px) {
.page-hero { height:320px !important; min-height:320px !important; padding:40px 24px !important; }
.page-hero > h1 { font-size:clamp(38px,9vw,54px) !important; }
.page-hero > .page-lead { font-size:16px !important; max-width:95% !important; }
}
@media (max-width:420px) {
.page-hero { height:290px !important; min-height:290px !important; }
.page-hero > .eyebrow { font-size:8px !important; }
.page-hero > h1 { font-size:38px !important; }
.page-hero > .page-lead { font-size:15px !important; }
}
/* ============================================================
FINAL PROFESSIONAL POLISH — ERNIE FISHER
Consistent brown / cream system; clean hero controls; no
overflow, accidental outlines or mixed emoji icon styles.
============================================================ */
:root {
--ef-espresso: #2d190f;
--ef-brown: #432817;
--ef-brown-mid: #5b3a23;
--ef-gold: #d0ab70;
--ef-gold-light: #e7ca96;
--ef-ivory: #f7f2e9;
--ef-paper: #fffdf8;
--ef-ink: #39281d;
--ef-muted: #756554;
--ef-red: #a9221a;
}
html { background: var(--ef-ivory); }
body {
margin: 0;
color: var(--ef-ink);
background: var(--ef-ivory);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
/* Shared masthead */
.topline {
height: 30px !important;
padding-inline: clamp(18px, 6.2vw, 96px) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: #28170f !important;
color: #ead8bc !important;
border-bottom: 1px solid rgba(208,171,112,.55) !important;
font-size: 8px !important;
line-height: 1 !important;
letter-spacing: .18em !important;
}
.site-header {
min-height: 80px !important;
height: 80px !important;
padding-inline: clamp(18px, 6.2vw, 96px) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: linear-gradient(180deg, #4a2d1c 0%, #321d12 100%) !important;
border-bottom: 1px solid #b38a55 !important;
box-shadow: 0 5px 18px rgba(30,17,9,.18) !important;
}
.wordmark { color: #fff7eb !important; }
.wordmark small { color: #d9c3a2 !important; }
.mark {
border-color: var(--ef-gold) !important;
color: var(--ef-gold-light) !important;
}
.nav {
align-items: center !important;
gap: clamp(12px, 2.05vw, 31px) !important;
color: #fff6e8 !important;
}
.nav a {
color: #fff6e8 !important;
font-size: 10px !important;
letter-spacing: .07em !important;
transition: color .22s ease, background .22s ease, border-color .22s ease !important;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--ef-gold-light) !important; }
.nav a:not(.nav-cta)::after {
height: 2px !important;
background: var(--ef-gold) !important;
}
.nav-cta {
padding: 11px 16px !important;
border: 1px solid var(--ef-gold) !important;
color: #fff7e9 !important;
background: rgba(255,255,255,.025) !important;
}
.nav-cta:hover {
background: #8d241b !important;
border-color: var(--ef-gold-light) !important;
}
.menu-toggle { color: #fff7e9 !important; }
/* Homepage hero: stable three-column alignment and contained elements. */
.hero-cinematic {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 0 clamp(18px, 4vw, 62px) 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
position: relative !important;
isolation: isolate !important;
background-image: url("assets/banner-home-same-brown.jpg") !important;
background-position: center 48% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-color: #392317 !important;
border: 0 !important;
}
.hero-cinematic .stadium-atmosphere,
.hero-cinematic::before { display: none !important; content: none !important; }
.hero-stage {
width: 100% !important;
max-width: 1500px !important;
height: 535px !important;
min-height: 535px !important;
flex: 0 0 535px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: minmax(235px,.92fr) minmax(360px,1.2fr) minmax(225px,.86fr) !important;
align-items: end !important;
justify-items: stretch !important;
gap: clamp(12px, 2vw, 30px) !important;
position: relative !important;
z-index: 1 !important;
overflow: visible !important;
}
.hero-person {
position: relative !important;
inset: auto !important;
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
overflow: hidden !important;
pointer-events: none !important;
}
.hero-person .portrait-halo { display: none !important; }
.hero-portrait {
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: 525px !important;
object-fit: contain !important;
object-position: center bottom !important;
filter: drop-shadow(0 13px 22px rgba(14,8,4,.38)) !important;
transform: none !important;
}
.portrait-tag {
position: absolute !important;
left: 50% !important;
bottom: 17px !important;
transform: translateX(-50%) !important;
white-space: nowrap !important;
padding-top: 7px !important;
border-top: 1px solid rgba(221,184,126,.72) !important;
color: #f0d6a9 !important;
font-size: 8px !important;
letter-spacing: .16em !important;
text-shadow: 0 2px 7px rgba(0,0,0,.55) !important;
}
.hero-message {
position: relative !important;
inset: auto !important;
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: stretch !important;
width: 100% !important;
margin: 0 !important;
padding: 24px 0 28px !important;
transform: none !important;
text-align: center !important;
z-index: 4 !important;
}
.hero-message .eyebrow {
margin: 0 0 17px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
color: #f5e7d2 !important;
font-size: 10px !important;
letter-spacing: .18em !important;
}
.hero-message .eyebrow i {
width: clamp(20px, 3.5vw, 54px) !important;
height: 1px !important;
margin: 0 !important;
background: var(--ef-gold) !important;
}
.hero-message h1 {
margin: 0 0 17px !important;
color: #fff7e9 !important;
font: 800 clamp(62px, 7vw, 102px)/.84 "Playfair Display", Georgia, serif !important;
letter-spacing: -.055em !important;
text-shadow: 0 5px 19px rgba(0,0,0,.3) !important;
}
.hero-message h1 em {
color: #e0b66f !important;
font-weight: 600 !important;
}
.hero-role {
display: inline-block !important;
margin: 0 0 19px !important;
padding: 9px 19px !important;
background: linear-gradient(90deg, #941b16, #b92720, #941b16) !important;
color: #fff8ed !important;
font-size: 11px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
box-shadow: 0 4px 12px rgba(20,8,4,.22) !important;
}
.hero-role span { color: #e6c58f !important; }
.hero-message .hero-copy {
max-width: 540px !important;
margin: 0 auto !important;
color: #fff5e7 !important;
font: italic clamp(17px,1.55vw,21px)/1.48 "Playfair Display", Georgia, serif !important;
text-shadow: 0 2px 10px rgba(16,8,4,.68) !important;
}
.hero-message .hero-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 15px !important;
margin: 25px 0 0 !important;
}
.hero-message .button {
min-width: 190px !important;
min-height: 56px !important;
height: 56px !important;
padding: 0 23px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
border-radius: 5px !important;
box-sizing: border-box !important;
font-size: 10px !important;
line-height: 1 !important;
letter-spacing: .09em !important;
white-space: nowrap !important;
text-decoration: none !important;
outline: none !important;
box-shadow: 0 5px 16px rgba(0,0,0,.22) !important;
}
.hero-message .button-red {
background: linear-gradient(180deg, #bd2a21, #941d17) !important;
border: 1px solid #d8ad70 !important;
color: #fffaf2 !important;
}
.hero-message .button-outline {
background: rgba(51,31,19,.88) !important;
border: 1px solid #e0bd82 !important;
color: #fff7e9 !important;
text-shadow: none !important;
}
.hero-message .button-outline:hover {
background: #e0bd82 !important;
color: #392317 !important;
border-color: #f0d6a9 !important;
}
.hero-message .button span {
margin: 0 !important;
color: #f2d29b !important;
font-size: 15px !important;
}
.hero-message .button-outline:hover span { color: #392317 !important; }
.hero-micro {
margin: 17px 0 0 !important;
color: #e4c18b !important;
font-size: 8px !important;
letter-spacing: .16em !important;
}
/* Book cover stays aligned within its own column. */
.hero-book {
position: relative !important;
inset: auto !important;
grid-column: 3 !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: center !important;
width: min(100%, 310px) !important;
max-width: 310px !important;
margin: 0 !important;
padding: 16px 0 28px !important;
transform: none !important;
}
.hero-book img {
display: block !important;
width: 100% !important;
height: auto !important;
border: 1px solid #c9a16c !important;
box-shadow: 16px 23px 38px rgba(0,0,0,.46) !important;
transform: perspective(1000px) rotateY(-3deg) !important;
transition: transform .45s ease, box-shadow .45s ease !important;
}
.hero-book:hover img {
transform: perspective(1000px) rotateY(0) translateY(-4px) !important;
box-shadow: 20px 28px 42px rgba(0,0,0,.5) !important;
}
.book-coming {
top: 30px !important;
right: -10px !important;
padding: 9px 13px !important;
background: #a91f19 !important;
color: #fff7e9 !important;
border: 1px solid rgba(233,196,134,.55) !important;
font-size: 9px !important;
letter-spacing: .12em !important;
transform: rotate(5deg) !important;
box-shadow: 0 5px 13px rgba(0,0,0,.34) !important;
}
.hero-baseball { display:none !important; }
/* Feature strip: true full-bleed, even columns, restrained gold line icons. */
.hero-featurebar {
width: calc(100% + 2 * clamp(18px,4vw,62px)) !important;
max-width: none !important;
height: 88px !important;
min-height: 88px !important;
flex: 0 0 88px !important;
margin: 0 calc(-1 * clamp(18px,4vw,62px)) !important;
padding: 0 clamp(18px,7vw,110px) !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0,1fr)) !important;
align-items: center !important;
gap: 0 !important;
position: relative !important;
z-index: 5 !important;
overflow: hidden !important;
background: linear-gradient(90deg,#2b190f,#4a2e1c 50%,#2b190f) !important;
border-top: 1px solid #d0ab70 !important;
border-bottom: 1px solid #d0ab70 !important;
box-shadow: 0 -7px 22px rgba(0,0,0,.2) !important;
}
.hero-featurebar > div {
min-width: 0 !important;
min-height: 58px !important;
height: 58px !important;
padding: 0 clamp(8px,1.2vw,18px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(9px,1.25vw,18px) !important;
border: 0 !important;
border-right: 1px solid rgba(211,176,126,.48) !important;
background: transparent !important;
}
.hero-featurebar > div:last-child { border-right: 0 !important; }
.hero-featurebar b {
display: block !important;
color: #fff2df !important;
font: 600 clamp(9px,.9vw,12px)/1.45 "DM Sans",Arial,sans-serif !important;
letter-spacing: .04em !important;
}
.hero-featurebar .feature-icon {
display: block !important;
width: 34px !important;
height: 34px !important;
flex: 0 0 34px !important;
fill: none !important;
stroke: #e0bd83 !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* Inner page banners share the same dimensions, alignment and brown/cream treatment. */
.page-hero {
height: 410px !important;
min-height: 410px !important;
padding: 52px clamp(24px,9vw,140px) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 0 !important;
box-sizing: border-box !important;
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center !important;
background-color: #392317 !important;
border: 0 !important;
border-bottom: 4px solid #c6a16a !important;
}
.page-hero::before,.page-hero::after {
display: none !important;
content: none !important;
}
.page-hero > .eyebrow {
display: block !important;
margin: 0 0 15px !important;
color: #e7c891 !important;
font: 700 10px/1.45 "DM Sans",Arial,sans-serif !important;
letter-spacing: .22em !important;
text-shadow: 0 2px 8px rgba(20,11,6,.5) !important;
}
.page-hero > h1 {
display: block !important;
max-width: 760px !important;
margin: 0 0 17px !important;
color: #fff8ed !important;
font: 700 clamp(44px,5.2vw,70px)/1.04 "Playfair Display",Georgia,serif !important;
letter-spacing: -.04em !important;
text-shadow: 0 4px 20px rgba(20,11,6,.45) !important;
}
.page-hero > h1 em { color: #e0bd82 !important; font-weight: 500 !important; }
.page-hero > .page-lead {
display: block !important;
max-width: 610px !important;
margin: 0 !important;
color: #f5ead9 !important;
font: italic clamp(17px,1.55vw,20px)/1.58 "Playfair Display",Georgia,serif !important;
text-shadow: 0 2px 10px rgba(20,11,6,.5) !important;
}
.page-hero > .page-hero-note {
display: inline-block !important;
align-self: flex-start !important;
margin-top: 20px !important;
padding: 8px 13px !important;
background: rgba(42,25,15,.42) !important;
border: 1px solid rgba(225,192,139,.78) !important;
color: #f2d7a8 !important;
font: 700 9px/1.4 "DM Sans",Arial,sans-serif !important;
letter-spacing: .16em !important;
}
/* Inner content, controls and cards use one refined ivory editorial system. */
main { background: #f7f2e9 !important; }
.section {
background: #fffdf8 !important;
color: #39281d !important;
}
.section:nth-of-type(even) { background: #f3ede3 !important; }
.section-kicker,.eyebrow { color: #8a603b !important; }
.section-kicker .kicker-line { background: #c6a16a !important; }
.book-copy h2,.story-copy h2,.journal-heading h2,.contact-grid h2,
.prose-narrow h2 { color: #39271b !important; }
.book-copy h2 em,.story-copy h2 em,.journal-heading h2 em,
.prose-narrow h2 em { color: #95623b !important; }
.book-copy .lead,.story-copy .lead,.contact-grid .lead { color:#604b39 !important; }
.book-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),
.prose-narrow p,.contact-grid p { color:#6e5d4d !important; }
.feature-card,.journal-card,.contact-form,.prose-narrow {
background: #fffdf8 !important;
color: #39281d !important;
border: 1px solid #e1d4c2 !important;
box-shadow: 0 8px 26px rgba(57,37,21,.06) !important;
}
.feature-card h3,.journal-card h3 { color:#3c281b !important; }
.feature-card p,.journal-card p { color:#756554 !important; }
.feature-card:hover,.journal-card:hover {
transform: translateY(-4px);
border-color: #c7a16b !important;
box-shadow: 0 15px 30px rgba(57,37,21,.11) !important;
}
.coming-soon {
background:#f2e9dc !important;
border:1px solid #dfcdb3 !important;
padding:15px 17px !important;
border-radius:3px !important;
}
.coming-soon b { color:#4b321f !important; }
.coming-soon small { color:#77634e !important; }
.book-visual img {
border:1px solid #cdb58e !important;
box-shadow:18px 22px 42px rgba(52,32,17,.2) !important;
}
.portrait-border {
border:1px solid #c9ab7b !important;
background:#fffdf8 !important;
padding:9px !important;
box-shadow:0 16px 35px rgba(49,30,16,.15) !important;
}
.quote-band {
background:linear-gradient(110deg,#2d1b11,#503420 52%,#2d1b11) !important;
border-block:1px solid #b38a55 !important;
}
.quote-band blockquote { color:#fff6e8 !important; }
.quote-band .quote-mark,.quote-band>span { color:#e0bd83 !important; }
.philosophy-section { background:#382318 !important; }
.philosophy-bg {
background:linear-gradient(90deg,rgba(37,21,12,.93),rgba(47,28,16,.80) 56%,rgba(47,28,16,.32)),
url("assets/banner-philosophy-same-brown.jpg") center/cover no-repeat !important;
opacity:1 !important;
}
.philosophy-inner h2 { color:#fff4e3 !important; }
.philosophy-inner h2 em { color:#e0bb7e !important; }
.philosophy-bottom>p,.diamond-explainer p { color:#e2d3bf !important; }
.diamond-explainer { border-color:#c6a16a !important; }
.diamond-explainer b { color:#f7e8d0 !important; }
.contact-form {
padding:clamp(22px,3vw,38px) !important;
}
.contact-form label { color:#795332 !important; }
.contact-form input,.contact-form textarea,.contact-form select {
color:#39281d !important;
background:#fbf8f2 !important;
border:1px solid #dfd1bd !important;
border-radius:3px !important;
padding:13px 14px !important;
}
.contact-form input:focus,.contact-form textarea:focus,
.contact-form select:focus {
border-color:#a77a48 !important;
box-shadow:0 0 0 3px rgba(167,122,72,.12) !important;
outline:none !important;
}
.editor-note {
background:#f2e9dc !important;
border-left:3px solid #a87945 !important;
color:#70563d !important;
}
.button-red,.button.button-red {
background:linear-gradient(180deg,#b62a20,#941d17) !important;
border:1px solid #c99e66 !important;
color:#fffaf2 !important;
box-shadow:0 5px 13px rgba(111,30,20,.17) !important;
}
.button-outline {
background:rgba(255,255,255,.45) !important;
border:1px solid #9d7b52 !important;
color:#513a27 !important;
}
.button-outline:hover {
background:#452919 !important;
color:#fff8ed !important;
}
.footer {
background:linear-gradient(180deg,#452a19,#28170f) !important;
border-top:4px solid #bd955e !important;
color:#f5e8d5 !important;
}
.footer-top>p { color:#d7c4a9 !important; }
.footer-bottom { border-color:rgba(230,205,168,.22) !important; color:#b69c7c !important; }
.back-top { color:#e0bd83 !important; }
/* Focus rings only appear on keyboard navigation, never as stray dark outlines. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none !important; box-shadow: none; }
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible {
outline:2px solid #e0bd82 !important;
outline-offset:3px !important;
}
/* Tablet and mobile adaptations. */
@media (max-width: 1100px) and (min-width: 701px) {
.hero-stage {
height: 500px !important;
min-height: 500px !important;
flex-basis: 500px !important;
grid-template-columns: minmax(190px,.78fr) minmax(300px,1.2fr) minmax(180px,.78fr) !important;
gap: 10px !important;
}
.hero-message h1 { font-size: clamp(56px,6.3vw,76px) !important; }
.hero-message .hero-copy { font-size:17px !important; }
.hero-book { max-width:245px !important; }
.hero-person .hero-portrait { max-height:490px !important; }
.hero-featurebar { padding-inline:24px !important; }
.hero-featurebar > div { gap:8px !important; padding-inline:8px !important; }
.hero-featurebar .feature-icon { width:28px !important; height:28px !important; flex-basis:28px !important; }
.hero-featurebar b { font-size:9px !important; }
}
@media (max-width: 850px) {
.site-header { padding-inline:22px !important; }
.nav { gap:12px !important; }
.nav a { font-size:9px !important; }
}
@media (max-width: 700px) {
.topline { height:26px !important; padding-inline:12px !important; }
.topline span:first-child { display:none !important; }
.topline span:last-child { margin:0 auto !important; font-size:7px !important; }
.site-header { height:70px !important; min-height:70px !important; padding-inline:18px !important; }
.menu-toggle { display:block !important; }
.nav {
display:none !important;
position:absolute !important;
top:70px !important;
left:0 !important;
right:0 !important;
padding:20px 6% !important;
background:#382115 !important;
border-bottom:1px solid #a78050 !important;
flex-direction:column !important;
align-items:stretch !important;
gap:14px !important;
z-index:30 !important;
}
.nav.open { display:flex !important; }
.nav a { font-size:11px !important; }
.nav-cta { text-align:center !important; }
.hero-cinematic { padding:0 14px !important; }
.hero-stage {
height:auto !important;
min-height:0 !important;
flex:0 0 auto !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
grid-template-rows:auto auto !important;
align-items:end !important;
gap:5px !important;
}
.hero-message {
grid-column:1 / -1 !important;
grid-row:1 !important;
width:100% !important;
padding:28px 3px 15px !important;
}
.hero-message h1 { font-size:clamp(55px,12vw,78px) !important; }
.hero-message .eyebrow { font-size:8px !important; gap:8px !important; }
.hero-message .hero-copy { font-size:15px !important; max-width:440px !important; }
.hero-role { font-size:9px !important; margin-bottom:13px !important; }
.hero-message .hero-actions { gap:9px !important; margin-top:18px !important; }
.hero-message .button {
min-width:0 !important;
min-height:48px !important;
height:48px !important;
padding-inline:13px !important;
font-size:9px !important;
gap:7px !important;
}
.hero-person {
grid-column:1 !important;
grid-row:2 !important;
height:260px !important;
min-height:260px !important;
}
.hero-portrait { max-height:260px !important; }
.portrait-tag { bottom:8px !important; font-size:7px !important; }
.hero-book {
grid-column:2 !important;
grid-row:2 !important;
width:min(100%,170px) !important;
max-width:170px !important;
padding:8px 0 18px !important;
}
.book-coming { top:15px !important; right:-5px !important; font-size:7px !important; }
.hero-featurebar {
width:calc(100% + 28px) !important;
margin:0 -14px !important;
height:auto !important;
min-height:0 !important;
flex:0 0 auto !important;
padding:8px 12px !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.hero-featurebar > div {
min-height:56px !important;
height:56px !important;
justify-content:flex-start !important;
border-right:1px solid rgba(211,176,126,.42) !important;
border-bottom:1px solid rgba(211,176,126,.28) !important;
}
.hero-featurebar > div:nth-child(2n) { border-right:0 !important; }
.hero-featurebar > div:nth-last-child(-n+2) { border-bottom:0 !important; }
.hero-featurebar b { font-size:8px !important; }
.hero-featurebar .feature-icon { width:24px !important; height:24px !important; flex-basis:24px !important; }
.page-hero {
height:320px !important;
min-height:320px !important;
padding:40px 24px !important;
background-position:center !important;
}
.page-hero > h1 { font-size:clamp(38px,9vw,54px) !important; }
.page-hero > .page-lead { font-size:16px !important; max-width:95% !important; }
.section { padding:64px 22px !important; }
.book-grid,.story-grid,.contact-grid { grid-template-columns:1fr !important; gap:38px !important; }
.journal-cards,.feature-grid { grid-template-columns:1fr !important; }
.footer-top { flex-wrap:wrap !important; gap:20px !important; }
.footer-top>p { width:100% !important; order:3 !important; }
.footer-bottom { flex-direction:column !important; gap:8px !important; }
}
@media (max-width: 420px) {
.hero-message h1 { font-size:54px !important; }
.hero-message .button { padding-inline:10px !important; font-size:8px !important; }
.hero-person { height:225px !important; min-height:225px !important; }
.hero-portrait { max-height:225px !important; }
.hero-book { max-width:145px !important; }
.page-hero { height:290px !important; min-height:290px !important; }
.page-hero > .eyebrow { font-size:8px !important; }
.page-hero > h1 { font-size:38px !important; }
.page-hero > .page-lead { font-size:15px !important; }
}
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {
scroll-behavior:auto !important;
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
}
/* FINAL MICRO-REFINEMENT: one-line utility bar + philosophy page rhythm */
.topline {
height: 27px !important;
min-height: 27px !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #28170f !important;
color: #ead8bc !important;
border-bottom: 1px solid rgba(208,171,112,.48) !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.topline-copy {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
max-width: 100% !important;
font: 700 7.5px/1 "DM Sans", Arial, sans-serif !important;
letter-spacing: .17em !important;
text-align: center !important;
white-space: nowrap !important;
}
.topline-copy i {
color: #d0ab70 !important;
font-style: normal !important;
font-size: 10px !important;
}
@media(max-width:700px) {
.topline { height: 25px !important; min-height:25px !important; padding:0 8px !important; }
.topline-copy { gap:6px !important; font-size:6px !important; letter-spacing:.095em !important; }
}
@media(max-width:360px) {
.topline-copy { font-size:5.4px !important; letter-spacing:.06em !important; }
}
/* The Philosophy page follows the same light -> dark-brown -> light rhythm
as the other interior pages, while keeping its distinctive feature panel. */
.philosophy-intro {
background: #fffdf8 !important;
padding: clamp(62px,7vw,96px) clamp(24px,9vw,140px) !important;
}
.philosophy-intro-grid {
display: grid;
grid-template-columns: minmax(0,1.45fr) minmax(240px,.75fr);
align-items: center;
gap: clamp(28px,5vw,76px);
max-width: 1180px;
margin: 38px auto 0;
}
.philosophy-intro-copy h2 {
max-width: 760px;
margin: 10px 0 18px;
color: #39271b !important;
font: 700 clamp(36px,4.2vw,56px)/1.08 "Playfair Display",Georgia,serif;
letter-spacing: -.035em;
}
.philosophy-intro-copy h2 em { color:#95623b; }
.philosophy-intro-copy .lead {
max-width: 690px;
color: #65513e !important;
font: italic 19px/1.65 "Playfair Display",Georgia,serif;
}
.philosophy-intro-note {
min-height: 205px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: center;
background: #f3ece1;
border: 1px solid #e0d0b9;
border-top: 3px solid #c6a16a;
box-shadow: 0 10px 25px rgba(55,35,20,.06);
}
.philosophy-note-diamond {
color: #a57945;
font-size: 28px;
margin-bottom: 12px;
}
.philosophy-intro-note .eyebrow {
color: #8a603b;
font-size: 9px;
letter-spacing: .16em;
}
.philosophy-intro-note p:last-child {
margin: 8px 0 0;
color: #4f3a29;
font: italic 19px/1.5 "Playfair Display",Georgia,serif;
}
.philosophy-page {
min-height: 360px;
padding: clamp(68px,7vw,96px) clamp(24px,9vw,140px) !important;
background: #382318 !important;
}
.philosophy-page .philosophy-inner {
max-width: 1180px;
margin: 0 auto;
}
.philosophy-page .philosophy-inner h2 {
margin: 12px 0 22px;
font-size: clamp(38px,4.5vw,60px);
line-height: 1.04;
}
.philosophy-page .philosophy-bottom {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(280px,.9fr);
align-items: center;
gap: 35px;
margin-top: 25px;
}
.philosophy-page .philosophy-bottom > p {
color: #eee0cc !important;
font: 18px/1.7 "Playfair Display",Georgia,serif;
}
.philosophy-page .diamond-explainer {
border: 1px solid rgba(198,161,106,.58);
background: rgba(255,255,255,.045);
padding: 20px 23px;
}
@media(max-width:760px) {
.philosophy-intro-grid,
.philosophy-page .philosophy-bottom {
grid-template-columns: 1fr;
}
.philosophy-intro-note { min-height: 0; }
}
/* FINAL PORTRAIT CAPTION — clean, legible leather-and-gold plaque */
.hero-person .portrait-tag {
position: absolute !important;
z-index: 5 !important;
left: 50% !important;
bottom: 18px !important;
transform: translateX(-50%) !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
width: max-content !important;
min-width: 190px !important;
max-width: calc(100% - 24px) !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 10px 13px 9px !important;
white-space: nowrap !important;
background: linear-gradient(180deg, rgba(77,48,29,.97), rgba(42,25,15,.98)) !important;
border: 1px solid #cba46a !important;
border-radius: 3px !important;
color: #f5dfb8 !important;
font: 700 9px/1.2 "DM Sans", Arial, sans-serif !important;
letter-spacing: .16em !important;
text-align: center !important;
text-shadow: none !important;
box-shadow: 0 4px 13px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.portrait-tag .portrait-tag-text {
display: inline-block !important;
color: #f5dfb8 !important;
}
.portrait-tag .portrait-tag-rule {
display: block !important;
width: 17px !important;
height: 1px !important;
flex: 0 0 17px !important;
background: #d8b477 !important;
opacity: .95 !important;
}
@media (max-width: 700px) {
.hero-person .portrait-tag {
bottom: 9px !important;
min-width: 162px !important;
padding: 8px 9px 7px !important;
gap: 7px !important;
font-size: 7px !important;
letter-spacing: .13em !important;
}
.portrait-tag .portrait-tag-rule {
width: 12px !important;
flex-basis: 12px !important;
}
}
/* ============================================================
VISUAL CONTRAST FIX — PHILOSOPHY / JOURNAL / REVIEWS / HOME CTA
Removes washed-out grey surfaces and makes controls readable.
============================================================ */
/* Homepage secondary CTA: clear, solid espresso button with a gold edge. */
.hero-cinematic .hero-message .button-outline,
.hero-message .button-outline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 190px !important;
min-height: 56px !important;
padding: 0 23px !important;
box-sizing: border-box !important;
background: #382216 !important;
border: 2px solid #d2ad72 !important;
border-radius: 4px !important;
color: #fff8ed !important;
font-weight: 700 !important;
letter-spacing: .09em !important;
text-shadow: none !important;
box-shadow: 0 5px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.hero-cinematic .hero-message .button-outline span,
.hero-message .button-outline span {
color: #e8c78f !important;
}
.hero-cinematic .hero-message .button-outline:hover,
.hero-message .button-outline:hover {
background: #d1aa6d !important;
border-color: #f0d7aa !important;
color: #2d1b11 !important;
box-shadow: 0 8px 20px rgba(0,0,0,.32) !important;
}
.hero-cinematic .hero-message .button-outline:hover span,
.hero-message .button-outline:hover span {
color: #2d1b11 !important;
}
/* The Philosophy feature banner: never use a pale/grey translucent CTA. */
.philosophy-section .button-outline,
.philosophy-page .button-outline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 52px !important;
padding: 0 23px !important;
background: #382216 !important;
border: 1.5px solid #d2ad72 !important;
border-radius: 4px !important;
color: #fff6e8 !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-shadow: none !important;
box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
}
.philosophy-section .button-outline span,
.philosophy-page .button-outline span { color: #e8c78f !important; }
.philosophy-section .button-outline:hover,
.philosophy-page .button-outline:hover {
background: #d1aa6d !important;
border-color: #f0d7aa !important;
color: #2d1b11 !important;
}
.philosophy-section .button-outline:hover span,
.philosophy-page .button-outline:hover span { color: #2d1b11 !important; }
/* The Philosophy callout: warm paper, not cool grey. */
.philosophy-intro-note {
background: #f4ead9 !important;
border: 1px solid #ddc5a2 !important;
border-top: 3px solid #b78c53 !important;
color: #3b281b !important;
box-shadow: 0 10px 24px rgba(58,36,20,.07) !important;
}
.philosophy-intro-note .eyebrow { color: #79512f !important; }
.philosophy-intro-note p:last-child {
color: #422d1d !important;
}
.philosophy-page .diamond-explainer {
background: rgba(28,16,9,.52) !important;
border: 1px solid rgba(211,174,112,.74) !important;
border-radius: 3px !important;
}
.philosophy-page .diamond-explainer b { color: #fff1dc !important; }
.philosophy-page .diamond-explainer p { color: #ead9c2 !important; }
/* Journal page: make its status label a deliberate brown-and-gold badge. */
.journal-soon {
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-width: 160px !important;
padding: 12px 16px !important;
background: #432a19 !important;
border: 1px solid #b98c52 !important;
border-radius: 3px !important;
color: #f2d8a8 !important;
font: 700 9px/1.65 "DM Sans", Arial, sans-serif !important;
letter-spacing: .15em !important;
text-align: center !important;
box-shadow: 0 4px 12px rgba(45,27,14,.10) !important;
}
.journal-cards { gap: 20px !important; }
.journal-card {
background: #fffaf1 !important;
border: 1px solid #e1d0b8 !important;
border-top: 3px solid #b58b56 !important;
border-radius: 3px !important;
color: #39271a !important;
box-shadow: 0 8px 22px rgba(55,35,19,.065) !important;
}
.journal-card .card-no { color: #825a34 !important; }
.journal-card .card-icon { color: #9a6c3f !important; }
.journal-card h3 { color: #352318 !important; }
.journal-card p { color: #665443 !important; }
.journal-card .text-link { color: #734927 !important; }
.journal-card .text-link span { color: #a77b45 !important; }
.journal-card:hover {
background: #fffdf8 !important;
border-color: #c6a16a !important;
}
/* The journal editor note is intentionally parchment, not a grey warning slab. */
.journal-page .editor-note,
.editor-note {
background: #f3eadb !important;
border: 1px solid #e0c9a6 !important;
border-left: 3px solid #a87945 !important;
border-radius: 2px !important;
color: #59422d !important;
line-height: 1.65 !important;
}
/* Reviews blank state: use a clean ivory panel with readable dark copy. */
.reviews-section {
background: #f5eee3 !important;
color: #3a281b !important;
border-top: 1px solid #e2d2bb !important;
border-bottom: 1px solid #e2d2bb !important;
}
.review-empty {
max-width: 780px !important;
margin: 0 auto !important;
padding: 38px clamp(22px,4vw,48px) !important;
background: #fffaf1 !important;
border: 1px solid #e1d0b8 !important;
border-top: 3px solid #b58b56 !important;
border-radius: 3px !important;
box-shadow: 0 10px 26px rgba(55,35,19,.055) !important;
color: #39271b !important;
}
.review-empty .quote-mark { color: #a77b45 !important; }
.review-empty h2 {
color: #352318 !important;
font: 700 clamp(30px,3.5vw,42px)/1.15 "Playfair Display",Georgia,serif !important;
}
.review-empty p {
color: #665443 !important;
font: 15px/1.7 "DM Sans",Arial,sans-serif !important;
}
.review-empty .lead {
color: #493421 !important;
font: italic 19px/1.55 "Playfair Display",Georgia,serif !important;
}
.review-empty .button-red {
background: #a9221a !important;
border: 1px solid #c49a62 !important;
color: #fff8ec !important;
}
/* General contrast floor for small supporting text and links on ivory sections. */
.section .eyebrow,
.section-kicker,
.card-no,
.card-status { color: #76502f !important; }
.section p:not(.eyebrow):not(.lead),
.prose-narrow p:not(.lead) { color: #5d4b3b; }
.section .text-link,
.section a.text-link { color: #6d4526 !important; }
.section .text-link:hover,
.section a.text-link:hover { color: #a9221a !important; }
.section .text-link span { color: #9a6c3f !important; }
@media (max-width: 700px) {
.hero-cinematic .hero-message .button-outline,
.hero-message .button-outline {
min-width: 0 !important;
min-height: 48px !important;
padding: 0 13px !important;
}
.journal-heading { align-items: flex-start !important; }
.journal-soon { align-self: flex-start !important; }
.review-empty { padding: 28px 20px !important; }
}
/* Prevent grid stretching from turning the Philosophy link into a large slab. */
.philosophy-bottom > .button,
.philosophy-bottom > a.button,
.philosophy-section .philosophy-bottom .button {
justify-self: start !important;
align-self: center !important;
width: auto !important;
min-width: 190px !important;
max-width: max-content !important;
height: auto !important;
min-height: 52px !important;
flex: 0 0 auto !important;
padding: 0 22px !important;
display: inline-flex !important;
box-sizing: border-box !important;
}
@media (max-width: 760px) {
.philosophy-bottom > .button,
.philosophy-bottom > a.button,
.philosophy-section .philosophy-bottom .button {
justify-self: start !important;
min-width: 178px !important;
}
}
/* On ivory book / copy panels use a warm, clearly outlined secondary action. */
.book-copy .button-outline,
.prose-narrow .button-outline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-height: 48px !important;
padding: 0 20px !important;
background: #49301e !important;
border: 1px solid #b48a54 !important;
border-radius: 3px !important;
color: #fff7e9 !important;
box-shadow: 0 4px 12px rgba(55,35,20,.12) !important;
}
.book-copy .button-outline span,
.prose-narrow .button-outline span { color: #e5c28b !important; }
.book-copy .button-outline:hover,
.prose-narrow .button-outline:hover {
background: #a9221a !important;
border-color: #c99d65 !important;
color: #fff8ed !important;
}