/* ronbronson.design front page and inner pages: tile layout.
   Built on core.css blocks. Sits after core.css. Components here
   (tiles, covers, strip, icons) are candidates for the shared layer. */

/* No rules between blocks on these pages; colour and space do the separating. */
.site--tiles .block + .block::before { content: none; }
.site--tiles .wrap { max-width: 1280px; }
.site--tiles .wrap--blocks { padding-bottom: 0; }


.hx-sec { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.hx-h { margin: 0 0 24px; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3.6vw, 52px); line-height: .95; letter-spacing: -.055em; color: var(--ink); }

/* Hero */
.hx { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.hx__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hx__title { margin: 0; font-family: var(--display); font-weight: 900; line-height: .9; letter-spacing: -.065em; font-size: clamp(64px, 10.4vw, 150px); color: var(--ink); }
.hx__title span { display: block; color: var(--accent); }
.hx__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: var(--frame-heavy) solid var(--k-ink); box-shadow: 10px 10px 0 var(--k-ink); background: var(--k-bg-deeper); }

/* Strip: last played and the page links */
.hx-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 16px; padding-bottom: 16px; font-family: var(--deck); font-weight: 500; font-size: 17px; }
.hx-strip a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hx-strip nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 18px; }
.block--deep.hx-strip a:hover { background: var(--ink); color: var(--bg); }

/* Tiles */
.tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.site--blocks .block a.tile:not(.x):not(.y):not(.z), .tile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 132px; padding: 18px 20px 20px; border: var(--frame-heavy) solid var(--k-ink); background: var(--k-bg); color: var(--k-ink); text-decoration: none; transition: transform .12s ease; }
.tile .lab { min-height: 1.3em; font-family: var(--deck); font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--k-bg-deeper-ink, var(--ink-soft)); }
.block--deeper .tile .lab { color: var(--k-ink); }
.tile b { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.025em; }
.site--blocks .block a.tile:not(.x):not(.y):not(.z):hover, .site--blocks .block--bg a.tile:not(.x):not(.y):not(.z):hover, .site--blocks .block--deeper a.tile:not(.x):not(.y):not(.z):hover { transform: translateY(-3px); background: var(--k-lead); color: var(--k-on-lead); text-decoration: none; }
.site--blocks .block a.tile:not(.x):not(.y):not(.z):hover .lab { color: var(--k-on-lead); }
.site--blocks .block a.tile--lead:not(.x):not(.y):not(.z), .tile--lead { background: var(--k-lead); color: var(--k-on-lead); }
.site--blocks .block a.tile--lead:not(.x):not(.y):not(.z):hover { background: var(--k-ink); color: var(--k-bg); }
.site--blocks .block a.tile--lead:not(.x):not(.y):not(.z):hover .lab { color: var(--k-bg); }

/* Reading shelf */
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.site--blocks .block a.shelf__book:not(.x):not(.y):not(.z) { position: relative; display: block; aspect-ratio: 2 / 3; border: var(--frame-heavy) solid var(--k-ink); background: var(--k-bg); color: var(--k-ink); overflow: hidden; text-decoration: none; transition: transform .12s ease; }
.site--blocks .block a.shelf__book:not(.x):not(.y):not(.z):hover { transform: translateY(-3px); background: var(--k-bg); color: var(--k-ink); }
.shelf__book .shelf__fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 56px; letter-spacing: -.05em; }
.shelf__book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Footer block */
.hx-foot { padding-top: 48px; padding-bottom: 48px; margin-top: clamp(40px, 5vw, 72px); }
.hx-icons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 40px; }
.site--blocks .block a.hx-i:not(.x):not(.y):not(.z) { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: var(--frame-heavy) solid var(--ink); color: var(--ink); text-decoration: none; }
.site--blocks .block a.hx-i:not(.x):not(.y):not(.z):hover { background: var(--k-lead); color: var(--k-on-lead); border-color: var(--k-lead); }
.hx-i svg { width: 24px; height: 24px; display: block; }
.hx-foot .colophon { max-width: 78ch; font-family: var(--deck); font-size: 16px; line-height: 1.55; color: var(--ink); }
.scale--front.site--tiles .hx-foot .colophon h2 { margin: 0 0 16px; font-family: var(--display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 900; letter-spacing: -.05em; text-transform: none; color: var(--ink); }
.hx-foot .colophon p + p { margin-top: 8px; }
.hx-foot .colophon__digression { color: var(--ink); }
.hx-foot .colophon__digression a { color: var(--ink); }
.hx-foot good-internetting { display: block; margin-top: 24px; }

/* Inner pages */
.pg-hero { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.pg-hero h1 { margin: 0; font-family: var(--display); font-weight: 900; line-height: .9; letter-spacing: -.065em; font-size: clamp(72px, 12vw, 176px); color: var(--ink); }
.pg-body { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(64px, 8vw, 120px); }
.pg-split { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pg-stick { position: sticky; top: 96px; }
.pg-text p { margin: 0 0 24px; max-width: 34em; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.5; }
.pg-text a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.pg-contact { margin: 40px 0 0; font-family: var(--deck); font-size: 18px; }
.pg-contact a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }

@media (max-width: 860px) {
  .hx__grid, .pg-split { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { min-height: 0; }
  .pg-stick { position: static; }
}
@media (prefers-reduced-motion: reduce) { .tile, .shelf__book { transition: none; } }

/* Labels and navigation use the deck face on these pages, not the mono. */
.site--tiles .topbar nav, .site--tiles .topbar nav a, .site--tiles .hx-strip, .site--tiles .hx-strip * { font-family: var(--deck); }
.site--tiles .hx-strip .nowstrip__label { text-transform: none; letter-spacing: 0; font-size: inherit; }

.topbar .btn-icon { color: var(--k-ink); }

/* Ron's rulings, shared with masthead: nav items in the display face at the
   rail-heading size, underlined and nothing else; the strip in the display
   face; the colophon small and monospaced, as it has always been here. */
.site--tiles .topbar nav a:not(.btn-icon) { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.03em; text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 2px; }
.site--tiles .topbar nav a[aria-current="page"] { text-decoration-thickness: 4px; }
.site--tiles .hx-strip .np { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.site--tiles .hx-strip #np-track, .site--tiles .hx-strip #np-artist { font-family: var(--display); font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.site--tiles .hx-strip #np-track { font-weight: 800; }
.site--tiles .hx-strip #np-artist { font-weight: 500; }
.hx__lead { margin: 28px 0 0; max-width: 34em; font-family: var(--text); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--ink); }
.hx__lead a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.hx-foot .colophon, .hx-foot .colophon p { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.65; letter-spacing: .01em; }
.scale--front.site--tiles .hx-foot .colophon h2 { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1.65; letter-spacing: .14em; text-transform: uppercase; }
/* Front page hero: the lead alone, no name (the TopBar carries it) and no
   portrait. The name in the TopBar is the page's h1 there. */
.site--tiles .hx__grid:not(:has(.hx__photo)) { grid-template-columns: minmax(0, 1fr); }
.site--tiles .hx:not(:has(.hx__title)) .hx__lead { margin-top: 0; max-width: 40em; font-size: clamp(21px, 1.9vw, 27px); }
.site--tiles .topbar h1.name { margin: 0; }
.site--tiles .topbar h1.name a { color: inherit; text-decoration: none; }

/* A real photograph keeps its own ratio; the 4:5 crop is for portraits. */
.hx__photo--natural { aspect-ratio: auto; height: auto; object-fit: initial; }