/* benkampha.us: author site. Michroma for the name and titles (matching the
   book covers' wide geometric type), EB Garamond to read, IBM Plex Mono for
   small labels. Dark, space-art led; each book carries its cover's accent. */
:root {
  --bg: #07080a; --bg2: #0f1114; --panel: rgba(18,20,24,.78); --line: rgba(220,215,230,.12);
  --ink: #f3efe8; --muted: #b3aeb8; --dim: #77727f;
  --lilac: #c9bfe0; --teal: #47b39a;
  --title: "Michroma", "Eurostile", "Microgramma", sans-serif;
  --serif: "EB Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --accent: var(--lilac);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: 19px/1.6 var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
main { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.kA { margin-left: -.03em; margin-right: -.07em; }

/* composer-site notice bar */
.notice { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; text-align: center;
          padding: 9px 16px; background: #121015; border-bottom: 1px solid var(--line);
          font: italic 16px/1.3 var(--serif); color: var(--muted); }
.notice-cta { font: 500 11px var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
              color: var(--ink); padding: 6px 12px; border: 1px solid rgba(243,239,232,.35); transition: all .2s; white-space: nowrap; }
.notice-cta:hover { border-color: var(--lilac); color: var(--lilac); }

/* hero */
/* hero: name, subtitle and nav centred on the sun, the horizon just below */
.hero { position: relative; display: flex; justify-content: center; align-items: stretch; text-align: center;
        height: min(80vh, 780px); min-height: 520px; padding: 20px 20px 9vh;
        background: /* soft dimming over the star, behind the name */
                    radial-gradient(ellipse 240px 190px at 50% 45%, rgba(7,8,10,.42) 0%, rgba(7,8,10,.22) 45%, transparent 100%),
                    linear-gradient(180deg, rgba(7,8,10,.1) 0%, rgba(7,8,10,.25) 60%, rgba(7,8,10,.55) 85%, var(--bg) 100%),
                    url("masthead.jpg") center 42% / cover no-repeat; }
@media (max-width: 700px) {
  /* phones: let the content set the height */
  .hero { height: auto; min-height: 520px; padding-bottom: 60px; }
}
.hero-inner { max-width: 1000px; display: flex; flex-direction: column; justify-content: center; }
.hero-band { padding-top: 18px; }
.role { margin: 0 0 22px; font: 500 12px var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--lilac); text-shadow: 0 0 12px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.9); }
.hero h1 { font: 400 clamp(28px, 5.6vw, 72px)/1.05 var(--title); letter-spacing: .08em; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.series { margin: 0; text-shadow: 0 1px 14px rgba(0,0,0,.8); font: italic 400 clamp(19px, 2vw, 24px) var(--serif); color: var(--muted); }
.series em { color: var(--ink); }
.hero-nav { margin-top: 22px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hero-nav a { font: 500 11px var(--mono); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--ink);
              padding: 10px 16px; border: 1px solid rgba(243,239,232,.35); background: rgba(7,8,10,.35); transition: all .2s; }
.hero-nav a:hover { border-color: var(--ink); background: rgba(243,239,232,.08); }

/* sections */
.block { padding: 72px 0 0; }
.hero + main > .block:first-child { padding-top: 28px; }
h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font: 500 12px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h2.plain::after { display: none; }

/* books */
.books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.books.short { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.books + h2 { margin-top: 64px; }
@media (max-width: 900px) { .books { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
.book { display: flex; flex-direction: column; }
.book-art { position: relative; aspect-ratio: 5 / 8;  /* Kindle cover proportions */ overflow: hidden; background: var(--bg2); border: 1px solid var(--line);
            box-shadow: 0 24px 50px rgba(0,0,0,.55); }
.book-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.book:hover .book-art img { transform: scale(1.03); }
.art-title { position: absolute; inset: auto 0 0 0; padding: 60px 18px 22px; text-align: center;
             background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.art-title span, .book-type span { font: 400 clamp(15px, 1.6vw, 20px)/1.25 var(--title); letter-spacing: .1em; }
.book-type { height: 100%; display: grid; place-items: center; padding: 20px; text-align: center;
             background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%), var(--bg2); }
.book-type span { font-size: clamp(30px, 3.4vw, 44px); color: var(--ink); letter-spacing: .12em; }
.books.short .book { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
@media (max-width: 640px) { .books.short .book { grid-template-columns: 1fr; } }
.book-body { padding-top: 20px; }
.kicker { margin: 0; font: 500 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.book h3 { margin-top: 8px; font: 400 clamp(20px, 2vw, 25px)/1.25 var(--title); letter-spacing: .04em; }
.blurb { margin: 14px 0 0; color: var(--muted); font-size: 18px; }
.blurb.tagline { font-style: italic; }
.blurb + .blurb { margin-top: 10px; }
.subtitle { margin: 4px 0 0; font: italic 18px var(--serif); color: var(--muted); }
.excerpt { margin: 18px 0 0; padding: 14px 18px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.025);
           font: italic 19px/1.55 var(--serif); color: var(--ink); }
.excerpt p { margin: 0; }
.excerpt p::before { content: "“"; } .excerpt p::after { content: "”"; }
.review { margin: 14px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink); font-size: 17px; }
.stars { font-style: normal; color: var(--accent); letter-spacing: .1em; font-size: 13px; }
.formats { margin: 16px 0 0; display: flex; gap: 6px; }
.formats span { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 3px 8px; }
.links { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.links a, .btn { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 10px 16px;
                 border: 1px solid var(--line); color: var(--ink); transition: all .2s; display: inline-block; }
.links a:hover, .btn:hover { border-color: var(--accent, var(--ink)); color: var(--accent, var(--ink)); }
.btn.primary { background: var(--ink); color: #111; border-color: var(--ink); }
.btn.primary:hover { background: #fff; color: #111; }

/* free book */
.free-inner { border: 1px solid var(--line); padding: clamp(28px, 5vw, 48px); background:
  linear-gradient(90deg, var(--bg) 30%, rgba(7,8,10,.4)), url("rites-art.jpg") right 30% / 55% auto no-repeat, var(--bg2); }
.free-inner h2 { font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--title); letter-spacing: .05em; text-transform: none; color: var(--ink); margin-bottom: 12px; }
.free-inner p { margin: 0 0 22px; color: var(--muted); max-width: 520px; }

/* world */
.world { margin-top: 90px; padding: 110px 20px; text-align: center;
         background: linear-gradient(180deg, var(--bg) 0%, rgba(7,8,10,.55) 30%, rgba(7,8,10,.55) 70%, var(--bg) 100%), url("horizon-flipped.jpg") center / cover no-repeat;  /* upside down: the underside of the planet */ }
.world-inner { max-width: 760px; margin: 0 auto; }
.world h2 { justify-content: center; } .world h2::after { display: none; }
.world p { margin: 0 0 28px; font-size: 21px; line-height: 1.65; text-shadow: 0 1px 12px rgba(0,0,0,.7); }

/* about */
.about { max-width: 720px; font-size: 20px; }
.about p { margin: 0 0 1em; }
.about a { text-decoration-color: var(--lilac); text-underline-offset: 3px; }

footer { max-width: 1180px; margin: 80px auto 0; padding: 26px 20px 44px; border-top: 1px solid var(--line);
         display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.also { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; }
.also-label { font: 500 11px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.also a { display: inline-flex; gap: 8px; align-items: baseline; text-decoration: none; }
.also b { font: 400 14px var(--title); letter-spacing: .06em; }
.also small { font: italic 15px var(--serif); color: var(--dim); }
.also a:hover b { color: var(--lilac); }
.copy { margin: 0; font: 12px var(--mono); color: var(--dim); }