/* ============================================================
T.B.G — THE FIRE SERIES
Shared stylesheet for every page. Aesthetic pulled from the
covers: near-black grounds, ember sparks, molten gold script,
chiaroscuro warmth. Vanilla + GSAP + Lenis, degrades gracefully.
1. Design tokens & reset 6. Books / covers
2. Atmosphere & cursor 7. Interior page shell
3. Nav 8. Forms & contact
4. Shared helpers 9. Press kit
5. Home sections 10. Responsive
============================================================ */
/* ---------- Design Tokens ---------- */
:root {
--bg: #0a0705;
--bg-2: #100a06;
--bg-3: #17100a;
--panel: #140d08;
--ink: #080503;
--ember: #ff6a1a;
--ember-hot: #ff9d4d;
--ember-glow: #ff8a3d;
--gold: #d6a743;
--gold-bright: #ecca7d;
--gold-deep: #b0812f;
--copper: #a5682f;
--cream: #f1e6cd;
--parchment: #cdb994;
--muted: #9c8869;
--muted-2: #7c6a4e;
--maroon: #3a1409;
--line: rgba(214,167,67,.16);
--line-soft: rgba(214,167,67,.09);
--font-script: 'Pinyon Script', cursive;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-caps: 'Cinzel', 'Times New Roman', serif;
--font-body: 'EB Garamond', Georgia, serif;
--shadow-warm: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 60px -20px rgba(255,106,26,.18);
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--maxw: 1360px;
}
/* ---------- Reset ---------- */
*,*::before,*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
scroll-behavior: auto;
}
body {
background: var(--bg);
color: var(--parchment);
font-family: var(--font-body);
font-size: clamp(1.02rem,.5vw + 1rem,1.32rem);
line-height: 1.75;
overflow-x: hidden;
position: relative;
-webkit-tap-highlight-color: transparent;
/* long titles, emails and URLs must never push the layout sideways */
overflow-wrap: break-word;
}
/* NOTE: overflow-x lives on only. Putting it on as well would
make the document the scroll container and silently break every
`position: sticky` on the site (book art, about portrait). */
/* The native cursor is only hidden once JS has actually drawn the custom one.
If JS fails, is blocked, or the visitor prefers reduced motion, the real
cursor stays — never leave a page with no pointer at all. */
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor [data-cursor] {
cursor: none;
}
/* ---------- Focus visibility (keyboard users) ---------- */
:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 3px;
border-radius: 2px;
}
html.has-custom-cursor :focus-visible {
/* keyboard focus always wins over the decorative cursor */
cursor: auto;
}
.skip-link {
position: absolute;
left: 1rem;
top: -100px;
z-index: 2000;
background: var(--gold-bright);
color: var(--ink);
font-family: var(--font-caps);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
padding: .8rem 1.4rem;
border-radius: 2px;
transition: top .3s var(--ease);
}
.skip-link:focus {
top: 1rem;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
::selection {
background: rgba(255,106,26,.32);
color: #fff;
}
/* Fixed background wash + grain so the whole page glows warm */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(1200px 700px at 78% -8%, rgba(255,106,26,.14), transparent 60%), radial-gradient(1000px 900px at 8% 108%, rgba(176,129,47,.10), transparent 62%), radial-gradient(900px 600px at 50% 45%, rgba(58,20,9,.35), transparent 70%), linear-gradient(180deg,#0a0705,#0d0906 40%,#080503);
}
body::after {
/* film grain */
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
/* ---------- Canvas + overlays (fixed, behind content) ---------- */
#ember-canvas {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
}
.vignette {
position: fixed;
inset: 0;
z-index: 3;
pointer-events: none;
box-shadow: inset 0 0 240px 60px rgba(0,0,0,.85), inset 0 0 60px 10px rgba(0,0,0,.6);
background: radial-gradient(120% 120% at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* everything sits above the atmosphere */
.page {
position: relative;
z-index: 4;
}
/* ============================================================
PRELOADER
============================================================ */
#preloader {
position: fixed;
inset: 0;
z-index: 9999;
background: #070403;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.4rem;
}
#preloader .pl-spark {
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle,#fff,var(--ember-hot) 40%,var(--ember) 70%,transparent 72%);
box-shadow: 0 0 30px 8px rgba(255,106,26,.9), 0 0 80px 24px rgba(255,106,26,.4);
}
#preloader .pl-name {
font-family: var(--font-caps);
letter-spacing: .5em;
text-indent: .5em;
font-size: .82rem;
color: var(--gold-bright);
opacity: 0;
text-transform: uppercase;
font-weight: 600;
}
#preloader .pl-bar {
width: 0;
height: 1px;
background: linear-gradient(90deg,transparent,var(--gold),transparent);
}
#preloader.is-done {
opacity: 0;
visibility: hidden;
transition: opacity .8s var(--ease), visibility .8s;
}
/* ============================================================
NAV
============================================================ */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
z-index: 1000;
background: linear-gradient(90deg,var(--gold-deep),var(--ember),var(--gold-bright));
box-shadow: 0 0 12px rgba(255,106,26,.7);
}
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 900;
padding: 1.5rem 0;
transition: padding .5s var(--ease);
}
/* ---------- The frosted scrolled-bar lives on a pseudo-element ----------
It must NOT go on .nav itself. Any `backdrop-filter` other than `none`
makes an element the containing block for its fixed-position descendants,
and .nav__links (the off-canvas drawer) and .nav__scrim are both children
of .nav. So the moment the page passed 40px and JS added `.scrolled`, the
drawer's `inset: 0 0 0 auto` started resolving against the ~60px nav bar
instead of the viewport — the menu opened as a stub in the top corner and
the scrim only covered the header. At the very top there was no `.scrolled`
class, which is why it worked there and nowhere else.
A pseudo-element has no element descendants, so it can carry the blur
safely. */
.nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
background: rgba(10,7,5,.72);
border-bottom: 1px solid var(--line-soft);
transition: opacity .5s var(--ease);
}
.nav.scrolled::before {
opacity: 1;
/* only paint the (expensive) blur once the bar is actually visible */
backdrop-filter: blur(14px) saturate(1.2);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav.scrolled {
padding: .8rem 0;
}
.nav__brand {
font-family: var(--font-caps);
font-weight: 700;
letter-spacing: .34em;
text-indent: .34em;
font-size: .92rem;
color: var(--cream);
position: relative;
white-space: nowrap;
}
.nav__brand small {
display: block;
font-family: var(--font-body);
letter-spacing: .28em;
text-indent: .28em;
font-size: .52rem;
color: var(--gold);
margin-top: .25rem;
font-weight: 500;
}
.nav__links {
display: flex;
align-items: center;
gap: 2.1rem;
}
.nav__links a {
font-family: var(--font-caps);
font-size: .82rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--parchment);
position: relative;
padding: .3rem 0;
transition: color .35s;
}
.nav__links a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 1px;
width: 0;
background: linear-gradient(90deg,var(--ember),var(--gold-bright));
transition: width .4s var(--ease);
}
.nav__links a:hover,.nav__links a.active {
color: var(--gold-bright);
}
.nav__links a:hover::after,.nav__links a.active::after {
width: 100%;
}
.nav__cta {
font-family: var(--font-caps);
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
padding: .78rem 1.6rem;
color: var(--ink);
font-weight: 700;
background: linear-gradient(120deg,var(--gold-bright),var(--gold) 55%,var(--copper));
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(236,202,125,.4), 0 12px 30px -12px rgba(255,106,26,.6);
position: relative;
overflow: hidden;
}
/* 44x44 hit area (the bars themselves stay 34x22 and centred inside it) —
anything smaller is below the minimum comfortable touch target. */
.nav__burger {
display: none;
width: 44px;
height: 44px;
position: relative;
flex: 0 0 auto;
}
.nav__burger span {
position: absolute;
left: 5px;
height: 2px;
width: 34px;
background: var(--gold-bright);
transition: transform .4s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1) {
top: 11px;
}
.nav__burger span:nth-child(2) {
top: 21px;
}
.nav__burger span:nth-child(3) {
top: 31px;
}
body.menu-open .nav__burger span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
body.menu-open .nav__burger span:nth-child(2) {
opacity: 0;
}
body.menu-open .nav__burger span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
/* Dim + catch taps behind the open drawer. Hidden and inert until the
drawer exists (i.e. only below the nav breakpoint). */
.nav__scrim {
display: none;
position: fixed;
inset: 0;
z-index: 840;
background: rgba(4,2,1,.62);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity .45s var(--ease), visibility .45s;
}
body.menu-open .nav__scrim {
opacity: 1;
visibility: visible;
}
/* Duplicate of the header CTA that only ever appears inside the drawer, so the
primary action survives on phones instead of being display:none'd away. */
.nav__cta--drawer {
display: none;
}
/* ============================================================
Shared / helpers
============================================================ */
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
/* env() keeps the copy clear of notches / rounded corners in landscape */
padding-left: max(clamp(1.1rem,4vw,2.4rem), env(safe-area-inset-left));
padding-right: max(clamp(1.1rem,4vw,2.4rem), env(safe-area-inset-right));
}
section {
position: relative;
padding: clamp(5rem,11vh,9rem) 0;
}
.eyebrow {
font-family: var(--font-caps);
text-transform: uppercase;
letter-spacing: .4em;
text-indent: .4em;
font-size: .8rem;
color: var(--gold);
font-weight: 600;
margin-bottom: 1.1rem;
display: inline-flex;
align-items: center;
gap: .9rem;
}
.eyebrow::before,.eyebrow.center::after {
content: "";
width: 34px;
height: 1px;
background: linear-gradient(90deg,transparent,var(--gold));
display: inline-block;
}
.eyebrow.center {
justify-content: center;
}
.eyebrow.center::after {
background: linear-gradient(90deg,var(--gold),transparent);
}
h1,h2,h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.04;
color: var(--cream);
}
/* Floors are deliberately low: the vw term still drives every size from ~480px
up, so desktop is untouched — the floor only stops headings overflowing
360–430px phones. Same trick on every display size below. */
.h-section {
font-size: clamp(2.05rem,6vw,5.2rem);
letter-spacing: .5px;
}
.script {
font-family: var(--font-script);
color: var(--gold-bright);
font-weight: 400;
text-shadow: 0 2px 30px rgba(255,138,61,.35);
line-height: .9;
}
.lead {
font-size: clamp(1.1rem,1.5vw,1.52rem);
color: var(--parchment);
}
.text-center {
text-align: center;
}
.muted {
color: var(--muted);
}
/* ornamental divider */
.ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--gold);
margin: 1.4rem 0;
}
.ornament span {
height: 1px;
width: min(120px,22vw);
background: linear-gradient(90deg,transparent,var(--gold-deep));
}
.ornament span:last-child {
background: linear-gradient(90deg,var(--gold-deep),transparent);
}
.ornament svg {
width: 30px;
height: 14px;
opacity: .9;
}
/* buttons */
.btn {
display: inline-flex;
align-items: center;
gap: .6rem;
position: relative;
overflow: hidden;
font-family: var(--font-caps);
text-transform: uppercase;
letter-spacing: .16em;
font-size: .86rem;
font-weight: 600;
padding: 1.05rem 2.1rem;
border-radius: 2px;
transition: transform .4s var(--ease), box-shadow .4s, color .4s;
will-change: transform;
}
.btn--gold {
color: var(--ink);
font-weight: 700;
background: linear-gradient(120deg,var(--gold-bright),var(--gold) 52%,var(--copper));
box-shadow: 0 14px 34px -14px rgba(255,106,26,.7), inset 0 0 0 1px rgba(255,225,170,.35);
}
.btn--gold::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-120%);
background: linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transition: transform .7s var(--ease);
}
.btn--gold:hover::after {
transform: translateX(120%);
}
.btn--ghost {
color: var(--gold-bright);
border: 1px solid var(--line);
background: rgba(255,106,26,.02);
}
.btn--ghost:hover {
border-color: var(--gold);
background: rgba(255,106,26,.08);
color: var(--cream);
}
.btn:hover {
box-shadow: 0 22px 44px -16px rgba(255,106,26,.75);
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 6rem;
}
.hero__glow {
position: absolute;
z-index: -1;
}
.hero__glow--1 {
width: 60vw;
height: 60vw;
right: -14vw;
top: -12vw;
background: radial-gradient(circle,rgba(255,106,26,.22),transparent 62%);
filter: blur(30px);
}
.hero__glow--2 {
width: 44vw;
height: 44vw;
left: -10vw;
bottom: -14vw;
background: radial-gradient(circle,rgba(176,129,47,.16),transparent 64%);
filter: blur(30px);
}
.hero__inner {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 3rem;
align-items: center;
width: 100%;
}
.hero__eyebrow {
margin-bottom: 1.5rem;
}
.hero__title {
font-family: var(--font-display);
font-weight: 600;
color: var(--cream);
font-size: clamp(2.6rem,8.4vw,7.4rem);
line-height: .92;
letter-spacing: 1px;
}
.hero__title .script {
display: block;
font-size: clamp(3rem,11vw,9.4rem);
margin: -.1em 0 -.12em -.04em;
text-transform: capitalize !important;
padding-top: 10px;
}
.hero__sub {
margin: 1.8rem 0 2.4rem;
max-width: 36ch;
font-size: clamp(1.08rem,1.6vw,1.55rem);
color: var(--parchment);
font-style: italic;
}
.hero__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero__scroll {
position: absolute;
bottom: 2.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
color: var(--muted);
font-family: var(--font-caps);
font-size: .6rem;
letter-spacing: .35em;
text-transform: uppercase;
}
.hero__scroll .line {
width: 1px;
height: 46px;
background: linear-gradient(var(--gold),transparent);
position: relative;
overflow: hidden;
}
.hero__scroll .line::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40%;
background: var(--ember-hot);
animation: scrolldot 2.2s var(--ease) infinite;
}
@keyframes scrolldot {
0% {
transform: translateY(-100%);
}
60%,100% {
transform: translateY(260%);
}
}
/* Hero art: stacked "book" card that floats/parallax */
.hero__art {
position: relative;
display: flex;
justify-content: center;
}
.hero__book {
width: min(340px,74%);
aspect-ratio: 2/3;
border-radius: 6px;
position: relative;
transform: rotateY(-16deg) rotateX(4deg);
transform-style: preserve-3d;
box-shadow: -30px 40px 90px -30px rgba(0,0,0,.9), 0 0 70px -18px rgba(255,106,26,.35);
}
.hero__book .cover {
position: absolute;
inset: 0;
border-radius: 6px;
}
/* floating spark badges around hero art */
.spark-badge {
position: absolute;
font-family: var(--font-caps);
font-size: .58rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold-bright);
background: rgba(12,8,5,.72);
border: 1px solid var(--line);
padding: .5rem .8rem;
border-radius: 40px;
backdrop-filter: blur(6px);
box-shadow: 0 10px 30px -12px #000;
white-space: nowrap;
}
/* ============================================================
MARQUEE strip
============================================================ */
.marquee {
border-block:1px solid var(--line-soft); padding: 1.1rem 0;
overflow: hidden;
background: linear-gradient(180deg,rgba(255,106,26,.03),transparent);
}
.marquee__track {
display: flex;
gap: 3.4rem;
width: max-content;
animation: marq 30s linear infinite;
}
.marquee__track span {
font-family: var(--font-script);
font-size: 1.9rem;
color: var(--gold);
opacity: .75;
display: inline-flex;
align-items: center;
gap: 3.4rem;
}
.marquee__track span::after {
content: "✦";
font-family: serif;
font-size: .7rem;
color: var(--ember);
}
@keyframes marq {
to {
transform: translateX(-50%);
}
}
/* ============================================================
ABOUT
============================================================ */
.about__grid {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: clamp(2rem,5vw,4.5rem);
align-items: center;
}
.about__portrait {
position: relative;
}
.portrait-frame {
position: relative;
/*aspect-ratio: 4/5;*/
border-radius: 4px;
overflow: hidden;
background: radial-gradient(120% 90% at 30% 10%, rgba(255,106,26,.18), transparent 55%), radial-gradient(120% 120% at 70% 100%, rgba(58,20,9,.6), transparent 60%), linear-gradient(160deg,#1a120b,#0c0805);
border: 1px solid var(--line);
box-shadow: var(--shadow-warm);
}
.portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portrait-frame .ph {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4rem;
text-align: center;
padding: 2rem;
}
.portrait-frame .ph .mono {
font-family: var(--font-script);
font-size: 3.2rem;
color: var(--gold-bright);
line-height: .8;
}
.portrait-frame .ph small {
font-family: var(--font-caps);
letter-spacing: .3em;
font-size: .56rem;
text-transform: uppercase;
color: var(--muted);
}
.portrait-frame::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid var(--line-soft);
border-radius: 2px;
pointer-events: none;
}
.about__portrait .tag {
position: absolute;
bottom: -1.3rem;
right: -1rem;
background: var(--panel);
border: 1px solid var(--line);
padding: 1rem 1.3rem;
border-radius: 3px;
box-shadow: 0 20px 50px -20px #000;
}
.about__portrait .tag b {
display: block;
font-family: var(--font-display);
font-size: 1.7rem;
color: var(--gold-bright);
line-height: 1;
}
.about__portrait .tag small {
font-family: var(--font-caps);
font-size: .55rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--muted);
}
.about__body h2 {
margin-bottom: 1.4rem;
}
.about__body p {
margin-bottom: 1.15rem;
color: var(--parchment);
}
.about__body p.drop::first-letter {
font-family: var(--font-script);
font-size: 3.6rem;
line-height: .7;
float: left;
margin: .28rem .6rem 0 0;
color: var(--gold-bright);
}
.about__sign {
font-family: var(--font-script);
font-size: 2.8rem;
color: var(--gold-bright);
margin-top: .6rem;
}
.about__stats {
display: flex;
gap: 2.4rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.about__stats .stat b {
font-family: var(--font-display);
font-size: 2.6rem;
color: var(--cream);
display: block;
line-height: 1;
}
.slab .about__stats .stat b {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--cream);
display: block;
line-height: 1;
margin-bottom: 30px ;
}
.about__stats .stat span {
font-family: var(--font-caps);
font-size: .58rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
}
/* ============================================================
BOOKS
============================================================ */
.books__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
margin-bottom: clamp(2.4rem,5vw,4rem);
flex-wrap: wrap;
}
.books__head .h-section {
max-width: 16ch;
}
.books__grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: clamp(1.4rem,3vw,2.6rem);
}
.book-card {
position: relative;
padding: 1.4rem;
border-radius: 6px;
background: linear-gradient(180deg,rgba(23,16,10,.7),rgba(10,7,5,.5));
border: 1px solid var(--line-soft);
transition: border-color .5s, transform .5s var(--ease), box-shadow .5s;
display: flex;
flex-direction: column;
}
.book-card:hover {
border-color: var(--line);
box-shadow: 0 46px 100px -40px #000, 0 0 60px -30px rgba(255,106,26,.35);
transform: translateY(-6px);
}
.book-card__stage {
perspective: 1100px;
margin-bottom: 1.4rem;
}
.book-card__cover {
transform-style: preserve-3d;
transition: transform .3s var(--ease);
will-change: transform;
}
/* the cover artwork slot (image or styled placeholder) */
.cover {
/* may be a or an
depending on whether the cover links somewhere */
display: block;
position: relative;
aspect-ratio: 1024/1536;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 30px 60px -26px #000, 0 0 0 1px rgba(0,0,0,.6);
background: radial-gradient(90% 60% at 50% 118%, rgba(255,106,26,.5), transparent 55%), radial-gradient(120% 90% at 50% 0%, rgba(140,80,40,.28), transparent 55%), linear-gradient(180deg,#171009,#0b0705 70%,#060403);
}
.cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .6s var(--ease);
}
.cover.has-image img {
opacity: 1;
}
.cover.has-image .cover__ph {
opacity: 0;
/* keep the fallback title out of the accessibility tree once art loads,
otherwise screen readers announce every cover twice */
visibility: hidden;
}
.cover__ph {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
padding: 1.4rem 1rem 1.7rem;
transition: opacity .5s;
}
.cover__ph .figs {
position: absolute;
inset: 0;
background: radial-gradient(38% 30% at 40% 30%, rgba(60,40,26,.9), transparent 60%), radial-gradient(34% 28% at 62% 28%, rgba(80,54,34,.8), transparent 60%);
filter: blur(2px);
opacity: .7;
}
.cover__ph .spark {
position: absolute;
left: 50%;
top: 64%;
width: 12px;
height: 12px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,#fff,var(--ember-hot) 45%,transparent 72%);
box-shadow: 0 0 22px 8px rgba(255,106,26,.7);
}
.cover__ph .series {
position: relative;
font-family: var(--font-caps);
font-size: .52rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .4rem;
}
.cover__ph .title {
position: relative;
font-family: var(--font-script);
font-size: 2.05rem;
color: var(--gold-bright);
line-height: .86;
text-shadow: 0 2px 20px rgba(255,138,61,.4);
}
.cover__ph .auth {
position: relative;
font-family: var(--font-caps);
font-size: .52rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--parchment);
margin-top: .7rem;
}
.cover__gloss {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 45%,transparent 60%);
transform: translateX(-30%);
opacity: 0;
transition: opacity .5s;
}
.book-card:hover .cover__gloss {
opacity: 1;
}
.book-card__badge {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
font-family: var(--font-caps);
font-size: .9rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
font-weight: 700;
padding: .4rem .7rem;
border-radius: 40px;
background: linear-gradient(120deg,var(--gold-bright),var(--copper));
box-shadow: 0 8px 20px -8px #000;
}
.book-card__series {
font-family: var(--font-caps);
font-size: .88rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .5rem;
}
.book-card__title {
font-family: var(--font-display);
font-size: clamp(1.5rem,2.4vw,1.95rem);
color: var(--cream);
line-height: 1.05;
}
.book-card__tag {
font-style: italic;
color: var(--muted);
margin: .5rem 0 .9rem;
font-size: 1.14rem;
}
.book-card__blurb {
font-size: 1.08rem;
color: var(--parchment);
margin-bottom: 1.2rem;
flex: 1;
}
.retailers {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: auto;
}
.retailers a {
font-family: var(--font-caps);
font-size: .88rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: .62rem .9rem;
border: 1px solid var(--line-soft);
border-radius: 3px;
color: var(--parchment);
transition: all .35s;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.retailers a:hover {
border-color: var(--gold);
color: var(--gold-bright);
background: rgba(255,106,26,.06);
transform: translateY(-2px);
}
.retailers a.primary {
color: var(--ink);
font-weight: 700;
border-color: transparent;
background: linear-gradient(120deg,var(--gold-bright),var(--gold));
}
.books__more {
margin-top: clamp(2.4rem,5vw,3.4rem);
text-align: center;
}
.books__more .soon {
display: inline-flex;
align-items: center;
gap: 1rem;
font-family: var(--font-caps);
font-size: .66rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted);
padding: 1rem 1.6rem;
border: 1px dashed var(--line);
border-radius: 4px;
}
.books__more .soon b {
color: var(--gold-bright);
}
/* ============================================================
COMING SOON — titles that are announced but not out yet
Book Two and Book Three: the art is blurred, a gold seal sits
on top, and nothing links through to a detail page.
To release a title, delete its `cover--soon` class, the
`.cover__soon` span, and swap the `is-soon` buttons back to
real links.
============================================================ */
/* Blur the children, never .cover itself — the seal has to stay sharp.
The slight scale-up hides the soft edges the blur leaves at the border. */
.cover--soon > img,
.cover--soon > .cover__ph {
filter: blur(10px) saturate(.7) brightness(.6);
transform: scale(1.08);
}
/* the gloss sweep has its own transform and only shows on live cards */
.cover--soon > .cover__gloss {
opacity: 0;
}
.cover--soon::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg,rgba(10,7,5,.3),rgba(10,7,5,.68));
}
.cover__soon {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: max-content;
max-width: 86%;
text-align: center;
font-family: var(--font-caps);
font-size: clamp(.62rem,.9vw,.76rem);
font-weight: 700;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--ink);
padding: .6rem 1.05rem;
border-radius: 40px;
background: linear-gradient(120deg,var(--gold-bright),var(--copper));
box-shadow: 0 10px 26px -8px #000, 0 0 44px -10px rgba(255,106,26,.55);
}
/* Dead buttons: visible, readable, but not clickable or tabbable.
These are elements with no href, so there is nothing to navigate to. */
.is-soon {
opacity: .55;
cursor: default;
pointer-events: none;
box-shadow: none;
}
/* Unreleased cards shouldn't lift or glow on hover — there is nothing to click. */
.book-card--soon:hover {
transform: none;
box-shadow: none;
border-color: var(--line-soft);
}
.book-card--soon:hover .cover__gloss {
opacity: 0;
}
/* The 62px series-strip thumbnails are far too small for the pill —
they get a lighter blur and say "Coming Soon" in the caption instead. */
.snav .cover--soon > img,
.snav .cover--soon > .cover__ph {
filter: blur(4px) saturate(.7) brightness(.6);
}
.snav .cover__soon {
display: none;
}
.snav--soon {
opacity: .72;
}
.snav--soon small {
color: var(--gold-deep);
}
/* ============================================================
SPOTLIGHT (latest release)
============================================================ */
.spotlight {
overflow: hidden;
}
.spotlight__inner {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: clamp(2rem,6vw,5rem);
align-items: center;
}
.spotlight__art {
position: relative;
}
.spotlight__art .cover {
max-width: 360px;
margin-inline:auto; box-shadow: -20px 40px 100px -30px #000,0 0 90px -20px rgba(255,106,26,.4);
}
.spotlight__art .halo {
position: absolute;
inset: -12% -6%;
z-index: -1;
background: radial-gradient(circle,rgba(255,106,26,.24),transparent 60%);
filter: blur(30px);
}
.spotlight__body .h-section {
margin: .4rem 0 1rem;
}
.spotlight__quote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.3rem,2vw,1.7rem);
color: var(--cream);
border-left: 2px solid var(--gold-deep);
padding-left: 1.3rem;
margin: 1.4rem 0 1.6rem;
}
.spotlight__meta {
display: flex;
gap: 1.6rem;
flex-wrap: wrap;
margin: 1.4rem 0 1.8rem;
}
.spotlight__meta div {
font-family: var(--font-caps);
font-size: .85rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted);
}
.spotlight__meta b {
display: block;
font-family: var(--font-body);
font-size: 1rem;
color: var(--gold-bright);
letter-spacing: .06em;
text-transform: none;
margin-top: .2rem;
}
/* ============================================================
EXCERPT / immersive quote
============================================================ */
.excerpt {
text-align: center;
overflow: hidden;
}
.excerpt__bg {
position: absolute;
inset: 0;
z-index: -1;
opacity: .5;
background: radial-gradient(60% 60% at 50% 40%, rgba(255,106,26,.16), transparent 70%);
}
.excerpt blockquote {
max-width: 24ch;
margin: 0 auto;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.7rem,4.6vw,3.6rem);
line-height: 1.25;
color: var(--cream);
}
.excerpt blockquote .fire {
color: var(--gold-bright);
font-style: italic;
}
.excerpt .lines {
max-width: 40ch;
margin: 1.8rem auto 0;
color: var(--parchment);
font-style: italic;
}
.excerpt cite {
display: block;
margin-top: 1.6rem;
font-family: var(--font-caps);
font-size: .62rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
font-style: normal;
}
/* ============================================================
REVIEWS
============================================================ */
.reviews__grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1.6rem;
margin-top: 3rem;
}
.review {
padding: 2rem 1.7rem;
border-radius: 6px;
position: relative;
background: linear-gradient(180deg,rgba(23,16,10,.7),rgba(10,7,5,.4));
border: 1px solid var(--line-soft);
}
.review .quotemark {
font-family: var(--font-display);
font-size: 4rem;
line-height: .4;
color: var(--gold-deep);
opacity: .5;
display: block;
height: 1.4rem;
}
.review .stars {
color: var(--ember-hot);
letter-spacing: .2em;
font-size: .9rem;
margin-bottom: .8rem;
}
.review p {
font-family: var(--font-display);
font-style: italic;
font-size: 1.3rem;
color: var(--cream);
margin-bottom: 1rem;
}
.review cite {
font-family: var(--font-caps);
font-size: .58rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
font-style: normal;
}
/* ============================================================
NEWSLETTER
============================================================ */
.newsletter {
}
.newsletter__card {
position: relative;
overflow: hidden;
border-radius: 10px;
padding: clamp(2.4rem,5vw,4rem);
text-align: center;
border: 1px solid var(--line);
background: radial-gradient(90% 120% at 50% -20%, rgba(255,106,26,.2), transparent 60%), linear-gradient(180deg,rgba(26,18,11,.9),rgba(9,6,4,.9));
box-shadow: var(--shadow-warm);
}
.newsletter__card .h-section {
margin: .6rem 0 .8rem;
}
.newsletter__card p {
max-width: 46ch;
margin: 0 auto 2rem;
color: var(--parchment);
}
.newsletter__form {
display: flex;
gap: .6rem;
max-width: 480px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
.newsletter__form input {
flex: 1;
min-width: 220px;
padding: 1rem 1.2rem;
border-radius: 3px;
background: rgba(0,0,0,.35);
border: 1px solid var(--line);
color: var(--cream);
font-family: var(--font-body);
font-size: 1rem;
transition: border-color .3s, box-shadow .3s;
}
.newsletter__form input::placeholder {
color: var(--muted-2);
}
.newsletter__form input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(255,106,26,.12);
}
.newsletter__note {
margin-top: 1rem;
font-size: .82rem;
color: var(--muted);
}
.newsletter__success {
color: var(--gold-bright);
font-family: var(--font-display);
font-style: italic;
font-size: 1.3rem;
margin-top: 1rem;
min-height: 1.6rem;
}
/* ============================================================
CONTACT / FOOTER
============================================================ */
.footer {
border-top: 1px solid var(--line-soft);
padding-top: clamp(3.4rem,7vw,5rem);
background: linear-gradient(180deg,transparent,rgba(255,106,26,.03));
}
.footer__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 2.4rem;
padding-bottom: 3rem;
}
.footer__brand .logo {
font-family: var(--font-caps);
font-weight: 700;
letter-spacing: .3em;
font-size: 1.1rem;
color: var(--cream);
}
.footer__brand p {
margin-top: 1rem;
max-width: 34ch;
color: var(--muted);
font-size: .98rem;
}
.footer__col h4 {
font-family: var(--font-caps);
font-size: .66rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.1rem;
font-weight: 600;
}
.footer__col a {
display: block;
color: var(--parchment);
padding: .35rem 0;
font-size: 1.06rem;
transition: color .3s, padding-left .3s;
}
.footer__col a:hover {
color: var(--gold-bright);
padding-left: .4rem;
}
.socials {
display: flex;
gap: .7rem;
margin-top: 1.4rem;
}
.socials a {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--parchment);
transition: all .4s var(--ease);
}
.socials a:hover {
color: var(--ink);
background: linear-gradient(120deg,var(--gold-bright),var(--copper));
border-color: transparent;
transform: translateY(-3px);
}
.socials svg {
width: 17px;
height: 17px;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.8rem 0;
border-top: 1px solid var(--line-soft);
flex-wrap: wrap;
}
.footer__bottom small {
color: var(--muted);
font-size: .8rem;
letter-spacing: .04em;
}
.footer * {
position: relative;
z-index: 99999999;
}
.d-flex{
display: grid;
grid-template-columns: 1fr 1fr ;
gap: 30px;
}
.to-top {
font-family: var(--font-caps);
font-size: .6rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: .5rem;
}
/* ============================================================
Custom cursor
============================================================ */
.cursor-dot,.cursor-ring {
position: fixed;
top: 0;
left: 0;
z-index: 9998;
pointer-events: none;
border-radius: 50%;
transform: translate(-50%,-50%);
mix-blend-mode: screen;
}
.cursor-dot {
width: 7px;
height: 7px;
background: radial-gradient(circle,#fff,var(--ember-hot) 55%,var(--ember));
box-shadow: 0 0 12px 3px rgba(255,106,26,.8);
}
.cursor-ring {
width: 38px;
height: 38px;
border: 1px solid rgba(236,202,125,.6);
transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s;
}
.cursor-ring.hover {
width: 64px;
height: 64px;
border-color: rgba(255,157,77,.9);
background: rgba(255,106,26,.06);
}
.spark-trail {
position: fixed;
z-index: 9997;
width: 5px;
height: 5px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle,#fff,var(--ember) 60%,transparent);
mix-blend-mode: screen;
}
/* ============================================================
Reveal states (only applied when JS is ready → no-JS safe)
============================================================ */
.js-ready [data-reveal] {
opacity: 0;
transform: translateY(34px);
}
.js-ready [data-reveal="fade"] {
transform: none;
}
.js-ready .word {
display: inline-block;
opacity: 0;
transform: translateY(90%) rotate(4deg);
}
.word-wrap {
display: inline-block;
overflow: hidden;
padding: 0 .02em;
vertical-align: top;
}
/* ============================================================
Responsive
============================================================ */
@media(max-width: 960px) {
.hero__inner {
grid-template-columns:1fr;
gap: 2.4rem;
}
.hero__art {
order: -1;
}
.hero__book {
width: min(240px,60%);
transform: none;
}
.about__grid {
grid-template-columns: 1fr;
}
.about__portrait {
max-width: 360px;
}
.spotlight__inner {
grid-template-columns: 1fr;
}
.books__grid,.reviews__grid {
grid-template-columns: 1fr 1fr;
}
.footer__top {
grid-template-columns: 1fr 1fr;
}
}
/* ---------- Off-canvas nav ----------
The drawer takes over at 1024px, not 680px. Six letter-spaced caps links
plus the brand and the CTA stop fitting a single bar well before a phone —
at 700–900px the old layout collided. */
@media(max-width: 1024px) {
.nav__links {
position: fixed;
/* top/right/height instead of `inset: 0 0 0 auto`. `bottom: 0` is the
one offset that resolves against an ancestor's padding box if .nav
ever becomes a containing block again (transform / filter /
backdrop-filter / will-change), which is what collapsed this drawer
to the height of the nav bar. top/right are unaffected because .nav
already sits at top:0 and spans the full width, so an explicit
viewport height makes the drawer immune. */
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: min(86vw,330px);
flex-direction: column;
align-items: stretch;
/* Top-aligned, NOT centred. Centring floated the list to the middle of
a tall phone and, once the drawer had to scroll on a landscape
phone, pushed the first link up under the burger. */
justify-content: flex-start;
/* rows carry their own padding, so no flex gap */
gap: 0;
background: rgba(9,6,4,.97);
backdrop-filter: blur(16px);
transform: translateX(100%);
transition: transform .45s var(--ease), visibility .45s;
/* reserves the header strip so nothing sits under the fixed burger */
padding: 4.9rem 0 2rem;
z-index: 850;
border-left: 1px solid var(--line);
/* off-canvas links must not be tabbable or readable while closed */
visibility: hidden;
/* landscape phones: six links + CTA are taller than the viewport */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
body.menu-open .nav__links {
transform: translateX(0);
visibility: visible;
}
/* the page behind a full-height drawer must not scroll with it */
body.menu-open {
overflow: hidden;
}
/* Full-width rows with hairline separators: a 53px target each, and the
list reads as a list instead of six floating words. */
.nav__links a {
font-size: .82rem;
letter-spacing: .16em;
padding: .95rem clamp(1.35rem,5vw,1.8rem);
padding-right: max(clamp(1.35rem,5vw,1.8rem), env(safe-area-inset-right));
border-bottom: 1px solid var(--line-soft);
}
/* the sliding underline is a desktop affordance; rows have separators */
.nav__links a::after {
display: none;
}
.nav__links a.active {
color: var(--gold-bright);
background: rgba(255,106,26,.06);
box-shadow: inset 2px 0 0 var(--ember);
}
/* The drawer autofocuses its first link for keyboard users. Pull the ring
inside the row so it reads as a highlighted row rather than a stray box
bleeding over the drawer edge. */
.nav__links a:focus-visible {
outline-offset: -4px;
border-radius: 0;
}
.nav__scrim {
display: block;
}
.nav__burger {
display: block;
z-index: 860;
}
/* Once .nav__links goes `position: fixed` it leaves the flex flow, so the
bar is left with brand / CTA / burger and `space-between` parked the CTA
in the dead centre of the header. Pin it to the burger on the right. */
.nav__inner {
gap: 1rem;
}
.nav__cta:not(.nav__cta--drawer) {
margin-left: auto;
}
}
/* Below 560px the bar has no room for the CTA, so it hands it to the drawer.
Above 560 the bar keeps it and the drawer copy stays hidden — otherwise an
open drawer on a tablet shows "Read Now" twice. */
@media(max-width: 560px) {
.nav__cta:not(.nav__cta--drawer) {
display: none;
}
/* Scoped through .nav__links so it outranks `.nav__links a`, which would
otherwise repaint the gold button in parchment link colour. */
.nav__links .nav__cta--drawer {
display: block;
margin: 1.3rem clamp(1.35rem,5vw,1.8rem) 0;
padding: 1rem 1.4rem;
text-align: center;
color: var(--ink);
font-size: .78rem;
border-bottom: 0;
box-shadow: 0 0 0 1px rgba(236,202,125,.4), 0 12px 30px -12px rgba(255,106,26,.6);
}
.nav__links .nav__cta--drawer::after {
display: none;
}
.nav__links .nav__cta--drawer:hover {
color: var(--ink);
}
}
@media(max-width: 680px) {
.books__grid,.reviews__grid,.footer__top {
grid-template-columns: 1fr;
}
.cursor-dot,.cursor-ring,.spark-trail {
display: none;
}
.hero__scroll {
display: none;
}
.spark-badge {
display: none;
}
.hero {
padding-top: 5rem;
}
.hero__book {
width: min(220px,58%);
}
}
@media(hover: none) {
.cursor-dot,.cursor-ring,.spark-trail {
display:none!important;
}
}
/* Reduced motion */
@media(prefers-reduced-motion:reduce) {
* {
animation-duration: .001ms!important;
animation-iteration-count: 1!important;
transition-duration: .001ms!important;
}
.marquee__track {
animation: none;
}
}
/* ============================================================
7. INTERIOR PAGE SHELL
Everything below is used by the inner pages (about, books,
book-1/2/3, excerpt, contact, press). The home page ignores it.
============================================================ */
/* ---------- Page hero: shorter, heavier, ornamented ---------- */
.page-hero {
position: relative;
padding: clamp(9rem,16vh,12rem) 0 clamp(3.5rem,7vh,5.5rem);
overflow: hidden;
isolation: isolate;
}
.page-hero::before {
content: "";
position: absolute;
inset: -30% -10% auto;
height: 120%;
z-index: -1;
background: radial-gradient(60% 60% at 50% 0%, rgba(255,106,26,.20), transparent 68%), radial-gradient(40% 50% at 82% 20%, rgba(214,167,67,.12), transparent 70%);
pointer-events: none;
}
.page-hero::after {
/* hairline that anchors the hero to the page */
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: min(var(--maxw),92vw);
height: 1px;
background: linear-gradient(90deg,transparent,var(--line),transparent);
}
.page-hero__inner {
position: relative;
text-align: center;
max-width: 62ch;
margin-inline: auto;
}
.page-hero--left .page-hero__inner {
text-align: left;
margin-inline: 0;
}
.page-hero__title {
font-family: var(--font-display);
font-weight: 300;
line-height: .98;
letter-spacing: -.015em;
font-size: clamp(2.2rem,8vw,6.4rem);
color: var(--cream);
margin: .5rem 0 0;
}
.page-hero__title .script {
display: block;
font-family: var(--font-script);
font-weight: 400;
font-size: 1.16em;
line-height: 1.06;
letter-spacing: 0;
background: linear-gradient(96deg,var(--gold-deep),var(--gold-bright) 38%,var(--ember-hot) 64%,var(--gold) 92%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-bottom: .12em;
}
.page-hero__sub {
font-family: var(--font-display);
font-size: clamp(1.16rem,1.6vw,1.42rem);
font-style: italic;
color: var(--muted);
margin-top: 1.5rem;
line-height: 1.6;
}
/* ---------- Breadcrumbs ---------- */
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .55rem;
font-family: var(--font-caps);
font-size: .62rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: 1.6rem;
}
.page-hero--left .crumbs {
justify-content: flex-start;
}
.crumbs a {
color: var(--muted);
transition: color .3s;
}
.crumbs a:hover {
color: var(--gold-bright);
}
.crumbs span[aria-current] {
color: var(--gold);
}
.crumbs .sep {
color: var(--line);
font-size: .7rem;
}
/* ---------- Long-form reading column ---------- */
.prose {
max-width: 68ch;
margin-inline: auto;
font-size: 1.06em;
}
.prose > p + p {
margin-top: 1.35rem;
}
.prose h3 {
font-family: var(--font-caps);
font-size: clamp(1.05rem,1.5vw,1.3rem);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-bright);
margin: 3.2rem 0 1.1rem;
}
.prose h3::before {
content: "✦";
color: var(--ember);
font-size: .7em;
margin-right: .7em;
vertical-align: .12em;
}
.prose blockquote {
margin: 2.6rem 0;
padding: 0 0 0 1.6rem;
border-left: 2px solid transparent;
border-image: linear-gradient(180deg,var(--ember),var(--gold),transparent) 1;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.3rem,2.4vw,1.75rem);
line-height: 1.45;
color: var(--cream);
}
.prose em {
color: var(--parchment);
}
.prose strong {
color: var(--gold-bright);
font-weight: 600;
}
/* ---------- Section rhythm for inner pages ---------- */
.slab {
position: relative;
padding: clamp(4.5rem,9vh,7rem) 0;
}
.slab--tight {
padding: clamp(3rem,6vh,4.5rem) 0;
}
.slab--panel {
background: linear-gradient(180deg,transparent,rgba(23,16,10,.55) 12%,rgba(23,16,10,.55) 88%,transparent);
}
.slab__head {
max-width: 60ch;
margin: 0 auto clamp(2.4rem,5vh,3.4rem);
text-align: center;
}
.slab__head p {
color: var(--muted);
margin-top: 1rem;
}
/* ---------- Feature cards (values, topics, facts) ---------- */
.cardgrid {
display: grid;
gap: clamp(1rem,2.2vw,1.6rem);
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.fcard {
position: relative;
padding: 2rem 1.7rem;
border: 1px solid var(--line-soft);
border-radius: 4px;
background: linear-gradient(180deg,rgba(23,16,10,.72),rgba(10,7,5,.5));
overflow: hidden;
transition: border-color .5s, transform .5s var(--ease), box-shadow .5s;
}
.fcard::before {
content: "";
position: absolute;
inset: auto -40% -70% -40%;
height: 130%;
background: radial-gradient(50% 50% at 50% 100%, rgba(255,106,26,.22), transparent 70%);
opacity: 0;
transition: opacity .6s var(--ease);
pointer-events: none;
}
.fcard:hover {
border-color: var(--line);
transform: translateY(-5px);
box-shadow: 0 40px 90px -50px #000;
}
.fcard:hover::before {
opacity: 1;
}
.fcard__num {
display: block;
font-family: var(--font-caps);
font-size: .64rem;
letter-spacing: .3em;
color: var(--ember);
margin-bottom: 1rem;
}
.fcard h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.28rem,2vw,1.6rem);
color: var(--cream);
line-height: 1.2;
margin-bottom: .7rem;
}
.fcard p {
font-size: .96em;
color: var(--muted);
}
/* ---------- Vertical timeline (about page) ---------- */
.timeline {
position: relative;
max-width: 780px;
margin-inline: auto;
padding-left: 2.4rem;
}
.timeline::before {
content: "";
position: absolute;
left: 6px;
top: .6rem;
bottom: .6rem;
width: 1px;
background: linear-gradient(180deg,transparent,var(--gold-deep) 12%,var(--ember) 50%,var(--gold-deep) 88%,transparent);
opacity: .55;
}
.tl-item {
position: relative;
padding-bottom: 2.8rem;
}
.tl-item:last-child {
padding-bottom: 0;
}
.tl-item::before {
content: "";
position: absolute;
left: -2.4rem;
top: .55rem;
width: 13px;
height: 13px;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, var(--ember-hot), var(--ember) 45%, var(--maroon));
box-shadow: 0 0 0 4px rgba(10,7,5,1), 0 0 22px 2px rgba(255,106,26,.55);
}
.tl-item time {
display: block;
font-family: var(--font-caps);
font-size: .64rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .5rem;
}
.tl-item h4 {
font-family: var(--font-display);
font-size: clamp(1.3rem,2.2vw,1.7rem);
font-weight: 500;
color: var(--cream);
margin-bottom: .5rem;
}
.tl-item p {
color: var(--muted);
font-size: .98em;
}
/* ============================================================
BOOK DETAIL PAGE
============================================================ */
.bookpage {
padding: clamp(8.5rem,15vh,11rem) 0 clamp(4rem,8vh,6rem);
}
.bookpage__grid {
display: grid;
grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
gap: clamp(2.5rem,6vw,5.5rem);
align-items: start;
}
.bookpage__art {
position: sticky;
top: 6.5rem;
}
.bookpage__art .cover {
max-width: 400px;
margin-inline: auto;
}
.bookpage__art .halo {
position: absolute;
/* -14% of the art column outgrew the container gutter above 1024px and the
glow ran off the left edge of the viewport. Cap the bleed at 2rem, which
is always narrower than the gutter. */
inset: -18% max(-2rem,-14%);
z-index: -1;
background: radial-gradient(50% 50% at 50% 50%, rgba(255,106,26,.28), transparent 68%);
filter: blur(18px);
pointer-events: none;
}
.bookpage__badge {
display: inline-flex;
align-items: center;
gap: .6rem;
font-family: var(--font-caps);
font-size: .62rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--ink);
background: linear-gradient(120deg,var(--gold-bright),var(--gold) 60%,var(--copper));
padding: .5rem 1.1rem;
border-radius: 2px;
margin-bottom: 1.3rem;
}
.bookpage__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem,6vw,4.6rem);
line-height: 1;
letter-spacing: -.015em;
color: var(--cream);
}
.bookpage__title .script {
font-family: var(--font-script);
font-size: 1.1em;
background: linear-gradient(96deg,var(--gold-deep),var(--gold-bright) 40%,var(--ember-hot) 70%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bookpage__tag {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.15rem,2vw,1.45rem);
color: var(--gold);
margin: 1.1rem 0 1.8rem;
line-height: 1.45;
}
.bookpage__blurb p + p {
margin-top: 1.2rem;
}
.bookpage__rating {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: 1.4rem;
font-size: .8rem;
color: var(--muted);
}
.bookpage__rating .stars {
color: var(--gold-bright);
letter-spacing: .18em;
font-size: .95rem;
}
/* meta specs table
Auto-fit rather than a fixed 3-up: the lists are 6 items on the book pages
but 8 on the press page, and a hard 3-up left dangling empty tracks there.
The hairlines are painted per cell (box-shadow) instead of as grid-gap
background, because a gap-coloured container shows its own colour through
the empty tracks of a ragged last row. */
.specs {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr));
gap: 1px;
margin: 2.4rem 0;
}
.specs div {
background: rgba(10,7,5,.85);
padding: 1.1rem 1.2rem;
/* 1px ring + 1px gap: neighbours' rings meet and read as one hairline */
box-shadow: 0 0 0 1px var(--line-soft);
}
.specs dt {
font-family: var(--font-caps);
/* was .58rem/--muted-2: ~9px of tracked-out caps in the darkest muted
tone sat at ~2.7:1 on the panel and was effectively unreadable */
font-size: .64rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .45rem;
}
.specs dd {
font-family: var(--font-display);
font-size: 1.02rem;
color: var(--cream);
}
/* retailer buttons, upgraded from the home page pills */
.buybox {
border: 1px solid var(--line);
border-radius: 5px;
padding: 1.6rem;
background: linear-gradient(180deg,rgba(26,17,11,.85),rgba(10,7,5,.6));
box-shadow: var(--shadow-warm);
}
.buybox__label {
font-family: var(--font-caps);
font-size: .6rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.1rem;
}
.buybox__grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
gap: .7rem;
}
.buylink {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .95rem 1rem;
border: 1px solid var(--line);
border-radius: 3px;
font-family: var(--font-caps);
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--parchment);
background: rgba(255,255,255,.02);
transition: color .35s, border-color .35s, background .35s, transform .35s var(--ease);
}
.buylink:hover {
color: var(--gold-bright);
border-color: var(--gold-deep);
background: rgba(255,106,26,.08);
transform: translateY(-2px);
}
.buylink--primary {
color: var(--ink);
font-weight: 700;
border-color: transparent;
background: linear-gradient(120deg,var(--gold-bright),var(--gold) 58%,var(--copper));
grid-column: 1/-1;
}
.buylink--primary:hover {
color: var(--ink);
background: linear-gradient(120deg,#f6dda2,var(--gold-bright) 58%,var(--gold));
}
/* "unset" links keep the same look but tell the visitor they're not live yet */
.buylink[href="#"],
.retailers a[href="#"] {
opacity: .55;
}
/* series strip at the bottom of a book page */
.seriesnav {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
gap: clamp(1rem,2.4vw,1.8rem);
}
.snav {
display: flex;
gap: 1.1rem;
align-items: center;
padding: 1.1rem;
border: 1px solid var(--line-soft);
border-radius: 4px;
background: rgba(23,16,10,.5);
transition: border-color .4s, transform .4s var(--ease), background .4s;
}
.snav:hover {
border-color: var(--line);
background: rgba(23,16,10,.9);
transform: translateY(-4px);
}
.snav.is-current {
border-color: var(--gold-deep);
background: rgba(255,106,26,.07);
}
.snav .cover {
width: 62px;
flex: 0 0 62px;
box-shadow: 0 14px 30px -14px #000;
}
.snav b {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.06rem;
color: var(--cream);
line-height: 1.2;
}
.snav small {
font-family: var(--font-caps);
font-size: .56rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--muted-2);
}
/* ============================================================
BOOKS INDEX — alternating full-width rows
============================================================ */
.brow {
display: grid;
grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
gap: clamp(2rem,5vw,4.5rem);
align-items: center;
padding: clamp(3rem,6vh,4.5rem) 0;
position: relative;
}
.brow + .brow {
border-top: 1px solid var(--line-soft);
}
/* Mirrored rows need the wide column to follow the copy, not just reorder
the children — otherwise the text lands in the narrow track. */
.brow:nth-child(even) {
grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
}
.brow:nth-child(even) .brow__art {
order: 2;
}
.brow__art {
position: relative;
}
.brow__art .cover {
position: relative;
z-index: 1;
max-width: 320px;
margin-inline: auto;
}
.brow__num {
position: absolute;
top: -2.2rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-size: clamp(6rem,14vw,11rem);
line-height: 1;
font-weight: 300;
color: rgba(214,167,67,.09);
pointer-events: none;
user-select: none;
z-index: 0;
}
.brow__body h3 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.55rem,4vw,3.1rem);
line-height: 1.05;
color: var(--cream);
margin: .5rem 0 .8rem;
}
.brow__body .tag {
font-family: var(--font-display);
font-style: italic;
color: var(--gold);
font-size: 1.1rem;
margin-bottom: 1rem;
display: block;
background: none;
border: 0;
padding: 0;
position: static;
}
.brow__body p {
color: var(--muted);
}
.brow__actions {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-top: 1.8rem;
}
/* ============================================================
EXCERPT / READING PAGE
============================================================ */
.reader {
max-width: 66ch;
margin-inline: auto;
font-family: var(--font-display);
font-size: clamp(1.2rem,1.1vw + 1rem,1.44rem);
line-height: 1.85;
color: var(--parchment);
}
.reader p + p {
margin-top: 1.5rem;
text-indent: 1.6em;
}
.reader p.nodent {
text-indent: 0;
}
.reader .dropcap::first-letter {
float: left;
font-family: var(--font-script);
font-size: 4.6em;
line-height: .74;
padding: .12em .12em 0 0;
background: linear-gradient(150deg,var(--gold-bright),var(--ember));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.reader .dialogue {
color: var(--cream);
}
.chapter-mark {
text-align: center;
margin: 0 0 3rem;
}
.chapter-mark .n {
font-family: var(--font-caps);
font-size: .68rem;
letter-spacing: .42em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: .8rem;
}
.chapter-mark .t {
font-family: var(--font-script);
font-size: clamp(2.1rem,6vw,4.2rem);
line-height: 1.1;
background: linear-gradient(96deg,var(--gold-deep),var(--gold-bright) 42%,var(--ember-hot));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.scene-break {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 2.8rem 0;
color: var(--gold-deep);
}
.scene-break span {
width: 46px;
height: 1px;
background: linear-gradient(90deg,transparent,var(--gold-deep));
}
.scene-break span:last-child {
background: linear-gradient(90deg,var(--gold-deep),transparent);
}
/* reading progress ring, fixed bottom-right */
.readring {
position: fixed;
right: 1.6rem;
bottom: 1.6rem;
width: 54px;
height: 54px;
z-index: 700;
display: grid;
place-items: center;
opacity: 0;
transform: translateY(12px);
transition: opacity .4s, transform .4s var(--ease);
pointer-events: none;
}
.readring.is-on {
opacity: 1;
transform: none;
}
.readring svg {
position: absolute;
inset: 0;
transform: rotate(-90deg);
}
.readring circle {
fill: none;
stroke-width: 2;
}
.readring .trk {
stroke: rgba(214,167,67,.16);
}
.readring .bar {
stroke: var(--gold-bright);
stroke-linecap: round;
transition: stroke-dashoffset .15s linear;
}
.readring b {
font-family: var(--font-caps);
font-size: .6rem;
letter-spacing: .06em;
color: var(--gold-bright);
}
.excerpt-cta {
max-width: 66ch;
margin: clamp(3.5rem,7vh,5rem) auto 0;
text-align: center;
border-top: 1px solid var(--line-soft);
padding-top: clamp(2.5rem,5vh,3.5rem);
}
/* ============================================================
8. FORMS & CONTACT
============================================================ */
.contact__grid {
display: grid;
grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
gap: clamp(2.4rem,5vw,4.5rem);
align-items: start;
}
.field {
margin-bottom: 1.3rem;
}
.field label {
display: block;
font-family: var(--font-caps);
font-size: .6rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .6rem;
}
.field .req {
color: var(--ember);
}
.field input,
.field select,
.field textarea {
width: 100%;
font-family: var(--font-body);
font-size: 1rem;
color: var(--cream);
background: rgba(255,255,255,.03);
border: 1px solid var(--line-soft);
border-radius: 3px;
padding: .95rem 1.1rem;
transition: border-color .35s, background .35s, box-shadow .35s;
}
.field textarea {
min-height: 170px;
resize: vertical;
line-height: 1.65;
}
.field select {
appearance: none;
background-image: linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
background-position: calc(100% - 20px) center,calc(100% - 14px) center;
background-size: 6px 6px,6px 6px;
background-repeat: no-repeat;
}
.field select option {
background: #140d08;
color: var(--cream);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--gold-deep);
background: rgba(255,106,26,.05);
box-shadow: 0 0 0 3px rgba(214,167,67,.12);
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--muted-2);
}
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea {
border-color: #b4472a;
}
.field .err {
display: none;
font-size: .8rem;
color: #e0805e;
margin-top: .45rem;
font-family: var(--font-body);
letter-spacing: 0;
text-transform: none;
}
.field[data-invalid] .err {
display: block;
}
.form-note {
font-size: .82rem;
color: var(--muted-2);
margin-top: 1rem;
}
.form-status {
margin-top: 1.2rem;
font-family: var(--font-caps);
font-size: .72rem;
letter-spacing: .14em;
color: var(--gold-bright);
min-height: 1.4em;
}
.info-card {
border: 1px solid var(--line-soft);
border-radius: 4px;
padding: 1.6rem;
background: rgba(23,16,10,.55);
}
.info-card + .info-card {
margin-top: 1.1rem;
}
.info-card h4 {
font-family: var(--font-caps);
font-size: .66rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .8rem;
}
.info-card p,
.info-card a {
font-size: .96rem;
color: var(--muted);
}
.info-card a {
color: var(--gold-bright);
border-bottom: 1px solid var(--line);
transition: border-color .3s;
}
.info-card a:hover {
border-color: var(--gold-bright);
}
/* ---------- FAQ / accordion ---------- */
.faq {
max-width: 780px;
margin-inline: auto;
}
.faq details {
border-bottom: 1px solid var(--line-soft);
}
.faq summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.4rem;
padding: 1.35rem 0;
font-family: var(--font-display);
font-size: clamp(1.1rem,1.8vw,1.32rem);
color: var(--cream);
transition: color .3s;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary:hover {
color: var(--gold-bright);
}
.faq summary::after {
content: "+";
font-family: var(--font-caps);
font-size: 1.3rem;
color: var(--gold);
flex: 0 0 auto;
transition: transform .35s var(--ease);
}
.faq details[open] summary::after {
transform: rotate(45deg);
}
.faq details > div {
padding: 0 0 1.5rem;
color: var(--muted);
font-size: .98em;
max-width: 64ch;
}
/* ============================================================
9. PRESS KIT
============================================================ */
.bio-block {
border: 1px solid var(--line-soft);
border-radius: 4px;
background: rgba(20,13,8,.6);
padding: 1.6rem;
}
.bio-block + .bio-block {
margin-top: 1.2rem;
}
.bio-block__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.bio-block h4 {
font-family: var(--font-caps);
font-size: .64rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gold);
}
.copybtn {
font-family: var(--font-caps);
font-size: .56rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--parchment);
border: 1px solid var(--line);
border-radius: 2px;
padding: .45rem .85rem;
transition: color .3s, border-color .3s, background .3s;
flex: 0 0 auto;
}
.copybtn:hover {
color: var(--gold-bright);
border-color: var(--gold-deep);
background: rgba(255,106,26,.08);
}
.copybtn.is-done {
color: var(--ink);
background: var(--gold-bright);
border-color: var(--gold-bright);
}
.bio-block p {
font-size: .98em;
color: var(--muted);
}
.presskit {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
gap: 1rem;
}
.dl {
display: block;
padding: 1.5rem 1.3rem;
border: 1px dashed var(--line);
border-radius: 4px;
background: rgba(23,16,10,.4);
transition: border-color .4s, background .4s, transform .4s var(--ease);
}
.dl:hover {
border-color: var(--gold-deep);
border-style: solid;
background: rgba(255,106,26,.06);
transform: translateY(-4px);
}
.dl b {
display: block;
font-family: var(--font-display);
font-size: 1.14rem;
color: var(--cream);
margin-bottom: .3rem;
}
.dl small {
font-family: var(--font-caps);
font-size: .56rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--muted-2);
}
.shots {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
gap: 1rem;
}
.shot {
position: relative;
border: 1px solid var(--line-soft);
border-radius: 4px;
overflow: hidden;
/* matches the cover and portrait art so nothing gets cropped */
aspect-ratio: 1024/1536;
background: linear-gradient(180deg,#171009,#0b0705);
}
.shot img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease);
}
.shot:hover img {
transform: scale(1.05);
}
.shot figcaption {
position: absolute;
inset: auto 0 0;
padding: 1.5rem .9rem .8rem;
background: linear-gradient(180deg,transparent,rgba(6,4,3,.92));
font-family: var(--font-caps);
font-size: .56rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--parchment);
}
.factlist {
max-width: 780px;
margin-inline: auto;
border-top: 1px solid var(--line-soft);
}
.factlist div {
display: grid;
grid-template-columns: minmax(120px,190px) 1fr;
gap: 1.4rem;
padding: 1.05rem 0;
border-bottom: 1px solid var(--line-soft);
}
.factlist dt {
font-family: var(--font-caps);
font-size: .64rem;
letter-spacing: .22em;
text-transform: uppercase;
/* --muted-2 at this size failed contrast the same way .specs dt did */
color: var(--muted);
padding-top: .35rem;
}
.factlist dd {
color: var(--cream);
font-family: var(--font-display);
font-size: 1.06rem;
}
/* ---------- Long-bio variant of the about grid ----------
The home page centres the portrait against a short bio. On the about page
the copy is three times longer, so centring drops the portrait halfway down
the page — pin it to the top instead and let it ride along. */
.about__grid--tall {
align-items: start;
}
.about__grid--tall .about__portrait {
position: sticky;
top: 6.5rem;
}
/* ---------- Trope / theme chips ---------- */
.chips {
display: flex;
flex-wrap: wrap;
gap: .6rem;
}
.chip {
font-family: var(--font-caps);
font-size: .6rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--parchment);
border: 1px solid var(--line);
border-radius: 100px;
padding: .5rem 1rem;
background: rgba(255,255,255,.02);
transition: color .35s, border-color .35s, background .35s;
}
.chip:hover {
color: var(--gold-bright);
border-color: var(--gold-deep);
background: rgba(255,106,26,.07);
}
/* ---------- Quick contact bar (press page) ---------- */
.quickbar {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
border-radius: 4px;
overflow: hidden;
}
.quickbar > * {
background: rgba(14,9,6,.9);
padding: 1.4rem 1.3rem;
display: block;
transition: background .4s;
}
.quickbar a:hover {
background: rgba(255,106,26,.07);
}
.quickbar small {
display: block;
font-family: var(--font-caps);
font-size: .56rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: .5rem;
}
.quickbar b {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.02rem;
color: var(--gold-bright);
}
/* ---------- Editorial note: flags placeholder copy for the client ---------- */
.editor-note {
max-width: 70ch;
margin: 2.4rem auto 0;
text-align: center;
font-size: .8rem;
letter-spacing: .04em;
color: var(--muted-2);
border-top: 1px dashed var(--line-soft);
padding-top: 1.1rem;
}
/* ---------- Big closing CTA band ---------- */
.cta-band {
position: relative;
text-align: center;
padding: clamp(4rem,8vh,6.5rem) 0;
overflow: hidden;
}
.cta-band::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(60% 100% at 50% 100%, rgba(255,106,26,.18), transparent 70%);
pointer-events: none;
}
.cta-band__inner {
position: relative;
max-width: 58ch;
margin-inline: auto;
}
.cta-band h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.85rem,5vw,3.6rem);
line-height: 1.05;
color: var(--cream);
}
.cta-band h2 .script {
font-family: var(--font-script);
font-size: 1.18em;
background: linear-gradient(96deg,var(--gold-deep),var(--gold-bright) 42%,var(--ember-hot));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cta-band p {
color: var(--muted);
margin: 1.2rem 0 2rem;
}
/* ============================================================
10. RESPONSIVE — interior pages
============================================================ */
@media(max-width: 960px) {
.bookpage__grid,
.contact__grid {
grid-template-columns: 1fr;
}
/* relative, not static — .bookpage__art .halo is absolutely positioned
against this, and static would anchor its -18%/-14% inset to */
.bookpage__art {
position: relative;
top: auto;
}
.bookpage__art .cover {
max-width: 300px;
}
/* Once the grid is 1-col the art column spans the container, so the halo's
-14% inset reached ~70px past the viewport on each side. body's
overflow-x hid it, but the document still reported a wider scrollWidth
and iOS Safari can still pan to it. Keep the glow inside the column. */
.bookpage__art .halo {
inset: -10% 0;
}
/* `.brow:nth-child(even)` (0,2,0) outranks a bare `.brow` (0,1,0), so
resetting only `.brow` here left every mirrored row — Book Two — on the
desktop 1.3fr/.7fr grid all the way down to 320px. Its whole body column
collapsed to ~88px and the copy ran two words per line for hundreds of
pixels. Both selectors have to be reset together. */
.brow,
.brow:nth-child(even) {
grid-template-columns: 1fr;
gap: 2rem;
}
.brow:nth-child(even) .brow__art {
order: 0;
}
.brow__art .cover {
max-width: 240px;
}
}
@media(max-width: 680px) {
/* .specs is auto-fit now — it steps 3→2→1 on its own, so no hard tracks */
.factlist div {
grid-template-columns: 1fr;
gap: .3rem;
}
.timeline {
padding-left: 1.9rem;
}
.tl-item::before {
left: -1.9rem;
}
.readring {
right: 1rem;
bottom: 1rem;
}
}
/* ============================================================
11. RESPONSIVE — full ladder
Ordered widest → narrowest so later blocks win. Everything above
this point is the desktop design; nothing here changes it.
============================================================ */
/* ---------- Auto-fit grids: never let a min track exceed the viewport ----------
`minmax(260px,1fr)` blows past a 320px phone once container padding is
subtracted. `min(260px,100%)` collapses the track instead of overflowing. */
.cardgrid {
grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.buybox__grid {
grid-template-columns: repeat(auto-fit,minmax(min(140px,100%),1fr));
}
.seriesnav {
grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr));
}
.presskit {
grid-template-columns: repeat(auto-fit,minmax(min(210px,100%),1fr));
}
.shots {
grid-template-columns: repeat(auto-fit,minmax(min(190px,100%),1fr));
}
/* auto-fit leaves the 4th tile alone in a 3-up row, and the two empty tracks
read as blank cells because the grid gaps are painted. 2x2 instead. */
.quickbar {
grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr));
}
@media(max-width: 900px) {
.quickbar {
grid-template-columns: 1fr 1fr;
}
}
@media(max-width: 560px) {
.quickbar {
grid-template-columns: 1fr;
}
}
/* Same problem, fixed width: the field is wider than a 320px card interior. */
.newsletter__form input {
min-width: min(220px,100%);
}
/* svh is right on modern mobile; vh is the fallback for anything older. */
.hero {
min-height: 100vh;
min-height: 100svh;
}
/* ---------- Ultrawide: stop the design stranding itself mid-screen ---------- */
@media(min-width: 1800px) {
:root {
--maxw: 1560px;
}
.hero__book {
width: min(400px,74%);
}
.spotlight__art .cover {
max-width: 420px;
}
}
/* ---------- Small laptops / large tablets ---------- */
@media(max-width: 1200px) {
.hero__inner {
gap: 2.2rem;
}
.hero__book {
width: min(300px,78%);
}
.about__stats {
gap: 1.8rem;
}
}
/* ---------- Tablet portrait ---------- */
@media(max-width: 900px) {
/* The badges hang outside the art on purpose; below this width they hang
outside the viewport instead and get clipped mid-word. */
.spark-badge {
display: none;
}
/* A sticky column has nothing to slide against once the grid is 1-col —
it just floats out of place. `relative`, NOT `static`: the "Est. 2024"
tag is absolutely positioned against this element, and static would hand
it to — where `right:-1rem` lands it past the viewport edge. */
.about__grid--tall .about__portrait {
position: relative;
/* `top` is inherited from the sticky rule and would offset a relative
box 104px downward, dropping the portrait onto the copy below it */
top: auto;
}
.about__portrait {
margin-inline: auto;
}
.books__head {
align-items: flex-start;
}
.books__head .lead {
max-width: none !important;
}
}
/* ---------- Press page: the only hard-coded 2-up on the site ---------- */
@media(max-width: 780px) {
.d-flex {
grid-template-columns: 1fr;
gap: 1.6rem;
}
}
/* ---------- Vertical rhythm ----------
Every section pays its padding twice at a seam (previous bottom + next top).
The desktop value is ~144px doubled, which is right on a wide canvas and a
dead void on a 390px phone. Scale the unit down so a seam stays roughly
proportional to the column width instead of the viewport height. */
@media(max-width: 900px) {
section,
.cta-band {
padding: clamp(2.8rem,6vh,4rem) 0;
}
.slab {
padding: clamp(2.6rem,5.5vh,3.6rem) 0;
}
.slab--tight {
padding: clamp(1.8rem,4vh,2.4rem) 0;
}
}
/* ---------- Phones ---------- */
@media(max-width: 680px) {
section,
.cta-band {
padding: 2.7rem 0;
}
.slab {
padding: 2.5rem 0;
}
.slab--tight {
padding: 1.7rem 0;
}
/* 1.04 is a display line-height; at 33px on a phone the two lines of
"Kept Us Up / Till 3 a.m." collide with the script descenders. */
.h-section,
.page-hero__title,
.cta-band h2 {
line-height: 1.12;
}
.marquee__track {
gap: 2.2rem;
}
.marquee__track span {
font-size: 1.5rem;
gap: 2.2rem;
}
/* -1rem/-1.3rem offsets push this past the container edge on a phone */
.about__portrait .tag {
right: .6rem;
bottom: -1rem;
padding: .8rem 1rem;
}
.about__stats {
gap: 1.4rem 2rem;
}
.book-card {
padding: 1.1rem;
}
.book-card__badge {
font-size: .72rem;
top: .8rem;
right: .8rem;
}
.spotlight__art .cover {
max-width: 260px;
}
.spotlight__quote {
padding-left: 1rem;
margin: 1.1rem 0 1.3rem;
}
.review {
padding: 1.6rem 1.3rem;
}
.newsletter__form {
flex-direction: column;
align-items: stretch;
}
.newsletter__form .btn {
justify-content: center;
}
.footer__bottom {
justify-content: center;
text-align: center;
}
.socials {
flex-wrap: wrap;
}
.bookpage {
padding-top: 7rem;
}
.brow__num {
top: -1.2rem;
}
.reader p + p {
text-indent: 1.1em;
}
.buybox {
padding: 1.2rem;
}
.bio-block,
.info-card {
padding: 1.2rem;
}
}
/* ---------- Small phones (iPhone SE / 360px Android) ---------- */
@media(max-width: 560px) {
/* Two 2.1rem-padded buttons never fit side by side here — full width reads
as intentional, a 3-word wrap does not. */
.hero__actions,
.brow__actions {
flex-direction: column;
align-items: stretch;
}
.hero__actions .btn,
.brow__actions .btn {
justify-content: center;
width: 100%;
padding-inline: 1.2rem;
}
.specs div {
padding: .9rem 1rem;
}
/* two pills of different intrinsic widths looked ragged; let them share
the row evenly instead */
.retailers a {
flex: 1 1 auto;
justify-content: center;
text-align: center;
}
.spotlight__meta {
gap: 1rem 1.4rem;
}
.books__more .soon {
padding: .9rem 1.1rem;
font-size: .6rem;
letter-spacing: .18em;
text-align: center;
}
.snav {
padding: .9rem;
gap: .9rem;
}
.snav .cover {
width: 54px;
flex-basis: 54px;
}
.page-hero {
padding-top: clamp(7rem,14vh,9rem);
}
.newsletter__card {
padding: 1.8rem 1.2rem;
}
.faq summary {
gap: .9rem;
padding: 1.1rem 0;
}
.excerpt-cta,
.editor-note {
text-align: left;
}
}
/* ---------- The narrowest devices still in the wild (320px) ---------- */
@media(max-width: 400px) {
/* Cinzel at .4em tracking is what actually overflows down here, not the
point size — tighten the tracking rather than shrinking the type. */
.eyebrow {
letter-spacing: .26em;
text-indent: .26em;
font-size: .68rem;
gap: .6rem;
}
.eyebrow::before,
.eyebrow.center::after {
width: 20px;
}
.nav__brand {
letter-spacing: .22em;
text-indent: .22em;
font-size: .82rem;
}
.btn {
letter-spacing: .1em;
font-size: .78rem;
padding: .95rem 1.2rem;
}
.book-card__blurb,
.book-card__tag {
font-size: 1rem;
}
.brow__num {
font-size: 5rem;
}
.cover__ph .title {
font-size: 1.5rem;
}
.crumbs {
letter-spacing: .18em;
font-size: .58rem;
}
.footer__brand p,
.footer__col a {
font-size: .95rem;
}
}
/* ---------- Landscape phones: 100svh of hero leaves no room to read ---------- */
@media(max-height: 560px) and (orientation: landscape) {
.hero {
min-height: auto;
padding-top: 6.5rem;
padding-bottom: 3rem;
}
.hero__scroll {
display: none;
}
.nav__links {
padding-top: 4.2rem;
}
.nav__links a {
padding-block: .72rem;
}
.page-hero {
padding-top: 7rem;
}
}
/* ---------- Touch devices: minimum comfortable hit targets ---------- */
@media(pointer: coarse) {
.retailers a,
.buylink,
.chip,
.copybtn {
min-height: 44px;
padding-block: .7rem;
}
.socials a {
width: 44px;
height: 44px;
}
.footer__col a {
min-height: 44px;
display: flex;
align-items: center;
}
.crumbs a,
.crumbs span {
display: inline-block;
padding-block: .35rem;
}
/* The contact page presents these as its primary addresses, one per card,
but they were bare inline links ~21px tall. */
.info-card a {
display: inline-block;
min-height: 44px;
padding-block: .6rem;
}
.to-top {
min-height: 44px;
}
.faq summary {
min-height: 48px;
}
/* hover-only affordances that stick "on" after a tap */
.footer__col a:hover {
padding-left: 0;
}
}