/* richmaloy.com — "Sunset" design. The page gets darker as you scroll, dusk to night. */

@font-face { font-family: "Steelfish"; src: url("../fonts/Steelfish-Rg.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Steelfish"; src: url("../fonts/Steelfish-Bd.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Urban Calligraphy"; src: url("../fonts/UrbanCalligraphy.ttf") format("truetype"); font-display: swap; }

:root {
  /* sky, in scroll order */
  --dusk-1: #948F8C; --dusk-2: #89909A; --dusk-3: #7A93AF; --dusk-4: #6E9BC9;
  --sky: #669ACC; --twilight: #3A5FA0; --evening: #22357F; --evening-2: #131B5C; --night: #080B33;
  /* sunstripe */
  --stripe-1: #FFD686; --stripe-2: #FEAE35; --stripe-3: #FECD71;
  /* ink */
  --navy: #000066; --body: #101030; --on-dark: #FFFFFF; --on-dark-2: #D8E0F2;
  /* accents */
  --marigold: #FFCC66; --sand: #F0CD89; --tag-1: #FFC21C; --tag-2: #FF8A00; --shadow: #3B3A5E; --hover-blue: #6699CC;
  --star: #FFF6DA;

  --pad: 64px;
  --col: 260px;
  --gap: 48px;
  --serif-display: "Steelfish", "Arial Narrow", sans-serif;
  --text: Verdana, Geneva, sans-serif;
  --tag: "Urban Calligraphy", cursive;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; font-family: var(--text); color: var(--body); background: var(--sky); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ---------- links ---------- */
a { color: var(--navy); text-decoration: underline; padding: 1px 3px; }
a:hover, a:focus-visible { color: var(--hover-blue); background: var(--marigold); text-decoration: none; }
.dark a { color: var(--on-dark); }
.dark a:hover, .dark a:focus-visible { color: var(--navy); background: var(--marigold); }
a.current { background: var(--marigold); color: var(--navy); text-decoration: none; }
a.row, a.row:hover { padding: 22px 0; text-decoration: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--marigold); }

/* ---------- shared pieces ---------- */
.strip { height: 144px; background: url("../img/somoney-strip-col.png") repeat-x; background-size: 2px 144px; overflow: hidden; }
.strip img { height: 144px; width: auto; max-width: none; display: block; }

.stripe { width: 110px; height: 12px; background: repeating-linear-gradient(180deg, var(--stripe-1) 0, var(--stripe-2) 4px, var(--stripe-3) 8px, var(--stripe-1) 12px); }

.dots { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

.tag-name {
  font-family: var(--tag); letter-spacing: 2pt; line-height: .9;
  background: linear-gradient(180deg, var(--tag-1) 30%, var(--tag-2) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* the graffiti glyphs reach outside their box; this keeps the gradient from clipping them */
  padding: .3em .15em .15em; margin: -.3em -.15em -.15em;
}

.split { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); gap: var(--gap); }
.head { display: flex; flex-direction: column; gap: 14px; }
.head h2, .head .h2 { margin: 0; font-family: var(--serif-display); font-weight: 700; font-size: 64px; line-height: .9; color: var(--navy); text-transform: lowercase; }
.dark .head h2, .dark .head .h2 { color: var(--on-dark); }
.head .sub { font-size: 14px; color: var(--on-dark-2); }
.head .side-links { display: flex; flex-direction: column; gap: 6px; font-size: 14px; margin-top: 6px; }
.head .side-links a { align-self: flex-start; }

.highlight { background: linear-gradient(transparent 70%, var(--marigold) 70%, var(--marigold) 92%, transparent 92%); }

/* rows: writing list, keep reading, book lists */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 28px; align-items: baseline; padding: 22px 0; border-top: 1px dotted var(--navy); text-decoration: none; color: var(--body); }
.row:last-child { border-bottom: 1px dotted var(--navy); }
.row:hover { background: rgba(255, 204, 102, .45); color: var(--body); }
.row .when { font-size: 13px; color: var(--navy); display: flex; flex-direction: column; gap: 4px; }
.row .what { display: flex; flex-direction: column; gap: 6px; }
.row .title { font-family: var(--serif-display); font-weight: 700; font-size: 44px; line-height: .95; color: var(--navy); text-transform: lowercase; }
.row .blurb { font-size: 15px; line-height: 1.6; }
.row .byline { font-size: 14px; color: var(--navy); }
.row .rating { color: var(--marigold); letter-spacing: 3px; font-size: 18px; text-shadow: 1px 2px 2px rgba(30, 30, 80, .5); }
.row .rating .off { color: rgba(0, 0, 102, .18); text-shadow: none; }
.row.book { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
.row.book .cover { width: 120px; height: 120px; display: block; box-shadow: 0 12px 20px -12px rgba(30, 30, 80, .55); }
.row.book .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row.book .cover.none { background: rgba(0, 0, 102, .12); }

.dark .row { border-color: rgba(255, 255, 255, .35); color: var(--on-dark-2); }
.dark .row:hover { background: rgba(255, 204, 102, .18); color: var(--on-dark-2); }
.dark .row .when { color: var(--on-dark-2); }
.dark .row .when .label, .dark .row .kicker { color: var(--sand); }
.dark .row .title { color: var(--on-dark); }
.row .kicker { font-size: 13px; color: var(--navy); }
.dark .row .byline { color: var(--on-dark-2); }

/* ---------- masthead (inner pages) ---------- */
.masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding: 18px var(--pad) 0; }
.masthead .logo { display: flex; align-items: flex-end; gap: 12px; text-decoration: none; padding: 0; }
.masthead .logo:hover { background: none; }
.masthead .logo .rich { font-family: var(--serif-display); font-size: 88px; line-height: .8; color: var(--shadow); text-shadow: 2px 4px 5px rgba(30, 30, 80, .45); }
.masthead .logo .tag-name { font-size: 88px; filter: drop-shadow(2px 4px 4px rgba(30, 30, 80, .35)); }
.masthead nav { font-size: 15px; color: var(--navy); padding-bottom: 8px; }

/* ---------- page sky bands ---------- */
.dusk { background: linear-gradient(180deg, var(--dusk-1) 144px, var(--dusk-2) 300px, var(--dusk-3) 560px, var(--dusk-4) 900px, var(--sky) 1300px, var(--sky) 100%); padding-bottom: 88px; }
.twilight { background: linear-gradient(180deg, var(--sky) 0px, var(--twilight) 200px, var(--evening) 100%); padding: 200px var(--pad) 96px; }

/* ---------- homepage ---------- */
.hero { background: linear-gradient(180deg, var(--dusk-1) 144px, var(--dusk-2) 300px, var(--dusk-3) 520px, var(--dusk-4) 100%); padding-bottom: 96px; }
.wordmark-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 18px var(--pad) 0; }
.wordmark { display: flex; align-items: flex-end; gap: 18px; }
.wordmark .rich { font-family: var(--serif-display); font-weight: 400; font-size: clamp(72px, 12vw, 150px); line-height: .8; color: var(--shadow); text-shadow: 3px 6px 6px rgba(30, 30, 80, .45); }
.wordmark .tag-name { font-size: clamp(72px, 12vw, 150px); filter: drop-shadow(3px 6px 5px rgba(30, 30, 80, .35)); }
.greeting { text-align: center; font-size: 16px; line-height: 1.5; padding-top: 36px; padding-right: 24px; color: var(--navy); }
.hero-copy { padding: 96px var(--pad) 0; }
.hero-copy h1 { margin: 0; font-family: var(--serif-display); font-weight: 700; font-size: clamp(56px, 9vw, 112px); line-height: .9; color: var(--navy); text-transform: lowercase; max-width: 1000px; text-wrap: balance; }
.hero-copy .intro { margin: 30px 0 0; font-size: 17px; line-height: 1.7; max-width: 700px; }
.hero-copy nav { margin-top: 30px; font-size: 16px; color: var(--navy); }

.band { padding: 40px var(--pad) 104px; }
.band.vision { background: linear-gradient(180deg, var(--dusk-4), var(--sky)); }
.band.writing { background: var(--sky); padding-bottom: 40px; padding-top: 0; }
.band.rules { background: linear-gradient(180deg, var(--sky) 0px, var(--twilight) 220px, var(--evening) 100%); padding-top: 240px; }
.band.career { background: linear-gradient(180deg, var(--evening), var(--evening-2)); }

.vision .copy { display: flex; flex-direction: column; gap: 20px; max-width: 780px; }
.vision .copy p { margin: 0; font-size: 16px; line-height: 1.75; }
.vision .copy .pull { text-wrap: balance; font-family: var(--serif-display); font-weight: 700; font-size: 60px; line-height: .95; text-transform: lowercase; color: var(--navy); }

.rules-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(7, auto); column-gap: 48px; margin: 0; padding: 0; list-style: none; }
.rules-grid li { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 14px 0; border-top: 1px dotted rgba(255, 255, 255, .35); align-items: baseline; }
.rules-grid li:nth-child(7), .rules-grid li:last-child { border-bottom: 1px dotted rgba(255, 255, 255, .35); }
.rules-grid .n { font-family: var(--tag); font-size: 34px; color: var(--marigold); letter-spacing: 2pt; line-height: 1; }
.rules-grid .r { font-size: 16px; line-height: 1.5; color: var(--on-dark); }

.jobs { display: flex; flex-direction: column; }
.job { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 18px 0; border-top: 1px dotted rgba(255, 255, 255, .35); align-items: baseline; }
.job:last-child { border-bottom: 1px dotted rgba(255, 255, 255, .35); }
.job .years { font-family: var(--serif-display); font-size: 30px; color: var(--sand); line-height: 1; }
.job .role { font-weight: 700; color: var(--on-dark); font-size: 15px; }
.job .desc { font-size: 15px; line-height: 1.6; color: var(--on-dark-2); }
.job .desc a { margin-left: -3px; }

/* ---------- night footer ---------- */
.night { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--evening-2), var(--night)); padding: 300px var(--pad) 56px; }
.night.from-evening { background: linear-gradient(180deg, var(--evening) 0%, var(--evening-2) 45%, var(--night) 100%); }
.night .star { position: absolute; border-radius: 50%; background: var(--star); }
.night .pisces { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFF9E8; box-shadow: 0 0 6px 1px rgba(255, 236, 190, .55); }
.night .bottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.night .sign { display: flex; flex-direction: column; gap: 18px; }
.night .sign .tag-name { font-size: 120px; align-self: flex-start; }
.night .someday { font-size: 15px; color: var(--sand); }
.night .links { font-size: 14px; color: var(--on-dark); align-items: center; }
.night .bee { display: inline-flex; padding: 3px; border-radius: 50%; line-height: 0; }
.night .bee img { width: 30px; height: 30px; display: block; filter: invert(1); opacity: .9; }
.night .bee:hover { background: var(--marigold); }
.night .bee:hover img { filter: none; opacity: 1; }

/* ---------- article pages (posts, reviews, pages) ---------- */
.title-row { padding: 120px var(--pad) 0; align-items: end; }
.meta-col { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.meta-col .meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--navy); }
.page-title { margin: 0; font-family: var(--serif-display); font-weight: 700; color: var(--navy); text-transform: lowercase; text-wrap: balance; line-height: .85; }
.page-title.t-xl { font-size: clamp(72px, 12.5vw, 160px); line-height: .8; }
.page-title.t-lg { font-size: clamp(60px, 8.75vw, 112px); }
.page-title.t-md { font-size: clamp(48px, 6.5vw, 84px); }

.feature { padding: 56px var(--pad) 0; }
.feature .frame { height: 394px; box-shadow: 0 24px 40px -20px rgba(30, 30, 80, .5); }
.feature img { width: 100%; height: 100%; object-fit: cover; display: block; }

.body-row { padding: 72px var(--pad) 0; }

.prose { display: flex; flex-direction: column; gap: 24px; max-width: 680px; font-size: 17px; line-height: 1.8; }
.prose > * { margin: 0; }
.prose p { text-wrap: pretty; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose .beat {
  font-family: var(--serif-display); font-weight: 700; color: var(--navy); line-height: 1; margin: 8px 0 -4px;
}
.prose h1, .prose h2 { font-size: 52px; }
.prose h3, .prose .beat { font-size: 44px; }
.prose h4 { font-size: 32px; }
.prose .beat { margin: 0; font-size: 48px; }
.prose .pull { margin: 12px 0; font-family: var(--serif-display); font-weight: 700; font-size: 60px; line-height: .95; color: var(--navy); text-transform: lowercase; text-wrap: balance; }
.prose .pull.finale { font-size: 72px; margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.prose blockquote { border-left: 12px solid transparent; border-image: repeating-linear-gradient(180deg, var(--stripe-1) 0, var(--stripe-2) 4px, var(--stripe-3) 8px, var(--stripe-1) 12px) 12; padding: 4px 0 4px 22px; font-size: 16px; }
.prose blockquote p { margin: 0 0 12px; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose figure { display: flex; flex-direction: column; gap: 8px; }
.prose figure img, .prose > p > img, .prose > p > a > img { box-shadow: 0 16px 28px -16px rgba(30, 30, 80, .55); display: block; }
.prose figcaption { font-size: 13px; color: var(--navy); }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.prose hr { border: 0; border-top: 1px dotted var(--navy); width: 100%; }
.prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.prose .gallery a { padding: 0; }
.prose .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.filed { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--navy); align-items: baseline; border-top: 1px dotted var(--navy); padding-top: 18px; margin-top: 8px; line-height: 1.5; }

/* ---------- book review ---------- */
.review-top { padding: 120px var(--pad) 0; }
.review-main { display: flex; flex-direction: column; gap: 56px; }
.book-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 44px; align-items: end; }
.book-hero .cover { width: 280px; height: 280px; box-shadow: 0 24px 40px -18px rgba(30, 30, 80, .55); }
.book-hero .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-hero .cover.none { background: rgba(0, 0, 102, .12); }
.book-hero .info { display: flex; flex-direction: column; gap: 18px; }
.badge { align-self: flex-start; font-size: 13px; color: var(--navy); background: var(--marigold); padding: 3px 8px; }
.book-hero .by { font-size: 17px; color: var(--navy); }
.rating-big { display: flex; align-items: center; gap: 14px; }
.rating-big .s { font-size: 30px; letter-spacing: 4px; color: var(--marigold); text-shadow: 1px 2px 2px rgba(30, 30, 80, .5); }
.rating-big .off { color: rgba(0, 0, 102, .18); text-shadow: none; }
.rating-big .w { font-size: 13px; color: var(--navy); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; font-size: 14px; }
.facts > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px dotted var(--navy); border-bottom: 1px dotted var(--navy); }
.facts .k { font-size: 12px; color: var(--navy); }
.facts a { align-self: flex-start; padding: 0; }
.summary { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.summary .h { font-family: var(--serif-display); font-weight: 700; font-size: 44px; line-height: .9; color: var(--navy); }
.summary .text { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.7; padding: 22px 0; border-top: 1px dotted var(--navy); border-bottom: 1px dotted var(--navy); text-wrap: pretty; }
.summary .text > * { margin: 0; }
.summary .text blockquote { margin: 0; }
.summary .text blockquote > p { margin: 0 0 14px; }
.summary .text blockquote > p:last-child { margin-bottom: 0; }
.summary .text h3, .summary .text h4 { font-size: 15px; }

/* ---------- book reviews landing + lists ---------- */
.list-top { padding: 120px var(--pad) 0; }
.note { margin-top: 18px; display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--navy); flex-wrap: wrap; }
.note .badge { font-size: 15px; padding: 4px 6px; }
.lede { max-width: 700px; font-size: 17px; line-height: 1.7; margin: 24px 0 0; }
.landing-intro { padding: 88px var(--pad) 0; }
.landing-intro .prose { max-width: 700px; }

.sections-band { background: linear-gradient(180deg, var(--sky) 0px, var(--twilight) 240px, var(--evening) 100%); padding: 240px var(--pad) 104px; }
.reco-feature { border-top: 1px dotted rgba(255, 255, 255, .35); border-bottom: 1px dotted rgba(255, 255, 255, .35); padding: 28px 0 32px; display: flex; flex-direction: column; gap: 10px; }
.reco-feature .big { font-family: var(--serif-display); font-weight: 700; font-size: 80px; line-height: .9; color: var(--marigold); text-transform: lowercase; text-decoration: none; padding: 0; align-self: flex-start; }
.reco-feature .big:hover { background: none; color: var(--on-dark); }
.reco-feature p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--on-dark); max-width: 620px; }
.covers { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.covers a { padding: 0; display: block; width: 150px; height: 150px; box-shadow: 0 20px 30px -16px rgba(0, 0, 30, .7); }
.covers img { width: 100%; height: 100%; object-fit: cover; display: block; }
.covers a:hover { outline: 3px solid var(--marigold); }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 56px; }
.section-grid > div { padding: 22px 0 28px; border-top: 1px dotted rgba(255, 255, 255, .35); border-bottom: 1px dotted rgba(255, 255, 255, .35); display: flex; flex-direction: column; gap: 8px; }
.section-grid a.name { font-family: var(--serif-display); font-weight: 700; font-size: 52px; line-height: .95; color: var(--on-dark); text-transform: lowercase; text-decoration: none; padding: 0; align-self: flex-start; }
.section-grid a.name:hover { color: var(--navy); background: var(--marigold); }
.section-grid .name.plain { font-family: var(--serif-display); font-weight: 700; font-size: 52px; line-height: .95; color: var(--on-dark); }
.section-grid .soon { font-family: var(--text); font-weight: 400; font-size: 13px; color: var(--sand); margin-left: 12px; }
.section-grid p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--on-dark-2); }

.list-band { padding: 72px var(--pad) 0; }
.count { font-size: 14px; color: var(--navy); margin: 0 0 12px; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  :root { --pad: 24px; --gap: 28px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .strip { height: 96px; background-size: 2px 96px; }
  /* keep the sun in view: its centre sits ~62% across the strip image */
  .strip img { height: 96px; margin-left: min(0px, calc(50vw - 400px)); }
  .wordmark-row { flex-direction: column; }
  .greeting { text-align: left; padding: 0; }
  .hero-copy { padding-top: 56px; }
  .band { padding-bottom: 72px; }
  .band.rules { padding-top: 160px; }
  .rules-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .rules-grid li:nth-child(7) { border-bottom: 0; }
  .vision .copy .pull { font-size: 44px; }
  .job { grid-template-columns: 1fr; gap: 6px; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .row.book { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; }
  .row.book .cover { width: 88px; height: 88px; }
  .row .title { font-size: 36px; }
  .masthead .logo .rich, .masthead .logo .tag-name { font-size: 64px; }
  .title-row, .review-top, .list-top { padding-top: 56px; }
  .meta-col { padding-bottom: 0; }
  .feature { padding-top: 32px; }
  .feature .frame { height: 220px; }
  .body-row { padding-top: 40px; }
  .prose { font-size: 16px; }
  .prose .pull { font-size: 44px; }
  .prose .pull.finale { font-size: 52px; }
  .book-hero { grid-template-columns: 1fr; gap: 24px; }
  .book-hero .cover { width: 200px; height: 200px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { border-top: 0; }
  .sections-band, .twilight { padding-top: 140px; }
  .section-grid { grid-template-columns: 1fr; }
  .section-grid > div + div { border-top: 0; }
  .reco-feature .big { font-size: 60px; }
  .covers a { width: calc(50% - 10px); height: auto; aspect-ratio: 1; }
  .night { padding-top: 260px; }
  .night .sign .tag-name { font-size: 88px; }
  .night .pisces { transform: translateX(-40%); }
}
@media (max-width: 520px) {
  .night .pisces { display: none; }
  .head h2, .head .h2 { font-size: 52px; }
}
.summary .text blockquote > b + p, .summary .text blockquote > i + p, .summary .text blockquote > strong + p { margin-top: 14px; }