/* ============================================================
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), background .5s var(--ease), backdrop-filter .5s;
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav.scrolled {
padding: .8rem 0;
background: rgba(10,7,5,.72);
backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid var(--line-soft);
}
.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;
inset: 0 0 0 auto;
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;
}
}
/* 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;
inset: -18% -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 */
.specs {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
border-radius: 4px;
overflow: hidden;
margin: 2.4rem 0;
}
.specs div {
background: rgba(10,7,5,.85);
padding: 1.1rem 1.2rem;
}
.specs dt {
font-family: var(--font-caps);
font-size: .58rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted-2);
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: .6rem;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--muted-2);
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 {
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 {
grid-template-columns: 1fr 1fr;
}
.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 {
grid-template-columns: 1fr;
}
/* 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;
}
.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;
}
}