/* ------------------------------------------------------------------ site-fixes.css — hand-maintained overrides layered on top of the generated bundle (_next/static/css/index.*.css). Loaded last in , so plain (non-!important) rules here win over equal-specificity rules in the bundle. Keep everything in this file so a future rebuild of the bundle does not clobber it. ------------------------------------------------------------------ */ /* ================================================================== 0. HERO — widescreen The generated bundle gives .hero BOTH `max-width: 1380px` and `padding: 75px max(34px, 50vw - 620px) 80px`. That padding formula is written for a full-bleed section; combined with max-width it double-counts, so once the viewport passes ~1310px the padding starts eating the content from the inside. Measured on the built page, the framed hero image shrank to 331px at 1680, 239px at 1920 and 20px at 2560 — the layout collapsed rather than just looking narrow. Fix: give the hero a plain fixed gutter and a max-width that lands on a ~1240px content column (in line with the other sections), then let the artwork grow into the space it now has. ================================================================== */ @media (min-width: 1200px) { .hero { max-width: 1308px; padding-left: 34px; padding-right: 34px; } /* Height from content + padding, so the rings always have room. */ .hero-art { height: auto; padding: 40px 0; } .arch { width: min(425px, 82%); height: 572px; } .hero-art:before { width: min(469px, 90%); height: 594px; } .hero-art:after { width: min(486px, 96%); height: 611px; } } @media (min-width: 1500px) { .hero-art { padding: 46px 0; } .arch { width: min(455px, 82%); height: 615px; } .hero-art:before { width: min(502px, 90%); height: 638px; } .hero-art:after { width: min(520px, 96%); height: 656px; } } /* ================================================================== 1. HERO — mobile / tablet Problem: the decorative arch rings (.hero-art:before / :after) are sized for the desktop layout (545px / 560px tall) but the stacked layout gives .hero-art a fixed 430–500px box. The rings overflowed upward and crossed the pull-quote (.hero-note), and the framed image (.arch, 525px) overflowed its 500px container at tablet size. Fix: below 900px let .hero-art size itself to its content with real vertical padding, and scale the rings to sit inside that padding. ================================================================== */ @media (max-width: 900px) { /* Give the quote room to breathe before the art block starts. */ .hero { gap: 56px; } .hero-note { margin-top: 46px; } /* Height driven by the artwork + padding instead of a magic number, so the rings always have somewhere to go. */ .hero-art { height: auto; padding: 40px 0 46px; } .arch { width: min(330px, 70%); height: 440px; } .hero-art:before { width: min(372px, 80%); height: 492px; transform: translate(-12px, -10px); } .hero-art:after { width: min(392px, 86%); height: 510px; transform: translate(10px, 10px); } /* Keep the faith / hope tags tucked against the arch rather than drifting out toward the viewport edges. */ .hero-art .orbit-one { top: 26%; left: 4%; } .hero-art .orbit-two { bottom: 22%; right: 2%; } } @media (max-width: 640px) { .hero { gap: 44px; } .hero-note { margin-top: 38px; } .hero-art { padding: 34px 0 40px; } .arch { width: min(280px, 74%); height: 386px; } .hero-art:before { width: min(318px, 84%); height: 432px; transform: translate(-10px, -8px); } .hero-art:after { width: min(336px, 90%); height: 450px; transform: translate(9px, 9px); } .hero-art .orbit { padding: 6px 12px 5px; font-size: 8.5px; } .hero-art .orbit-one { top: 24%; left: 2%; } .hero-art .orbit-two { bottom: 20%; right: 0; } } /* Very narrow phones (iPhone SE and friends). */ @media (max-width: 380px) { .hero h1 { font-size: 48px; } .arch { width: min(248px, 76%); height: 342px; } .hero-art:before { width: 284px; height: 386px; } .hero-art:after { width: 300px; height: 402px; } } /* ================================================================== 2. BRAND SHOWCASE — the "J.E. Laine / Joyce Long" banner Sits flush: no gap above or below the image inside its section. ================================================================== */ .brand-showcase { padding-top: 0; padding-bottom: 0; line-height: 0; /* kills the inline-descender gap under the image */ } .brand-showcase img { display: block; } /* ================================================================== 3. BOOK CARDS — secondary edition link A quieter sibling to the bordered "View on Amazon" call to action, for books that also exist in another format. ================================================================== */ .book-copy a.book-alt { border-top: 0; margin-top: 11px; padding-top: 0; font-size: 9px; opacity: 0.72; } .book-copy a.book-alt:hover { opacity: 1; gap: 11px; } /* ================================================================== 3b. BOOKSHELF — expandable book details Panels are native
, so they work with site-enhance.js missing. That script adds cover-click, the held-open cover tilt, and the "Show all details" control. ================================================================== */ .books-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: -34px 0 32px; } .books-hint { margin: 0; font-family: var(--font-serif), serif; font-style: italic; font-size: 16px; color: #6d665f; } /* Created by site-enhance.js, so it exists only when the script ran. */ .books-showall { display: inline-flex; align-items: center; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; font-weight: 700; color: var(--plum); background: none; border: 1px solid #25211d33; border-radius: 2px; padding: 9px 15px; cursor: pointer; } .books-showall:hover { border-color: var(--plum); background: #66415310; } /* --- the panel inside each card --- */ .book-details { margin-top: 20px; } .book-details summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px; font-weight: 700; opacity: 0.85; } .book-details summary::-webkit-details-marker { display: none; } .book-details summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; } .book-details[open] summary::after { transform: translateY(1px) rotate(-135deg); } .book-details summary:hover { opacity: 1; } .bd-body { margin-top: 15px; padding: 16px 17px; background: #ffffff14; border: 1px solid #ffffff2b; } .bd-body > p { margin: 0 0 11px; font-family: var(--font-serif), serif; font-size: 15px; line-height: 1.5; opacity: 0.92; } /* The award is the strongest credential on the page, so it gets its own block — but set in the serif, not three lines of shouting caps. */ .bd-award { font-family: var(--font-serif), serif; font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; color: #f8ead2; border-top: 1px solid #ffffff2b; padding-top: 13px; } .bd-body > p.bd-award { opacity: 1; } .bd-award::before { content: "Award"; display: block; font-family: var(--font-sans), sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px; font-weight: 700; opacity: 0.66; margin-bottom: 6px; } .bd-facts { margin: 0; display: grid; gap: 9px; } .bd-facts > div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: baseline; } .bd-facts dt { text-transform: uppercase; letter-spacing: 0.1em; font-size: 9px; font-weight: 700; opacity: 0.6; } .bd-facts dd { margin: 0; font-family: var(--font-serif), serif; font-size: 14px; line-height: 1.4; } /* Covers become a mouse affordance; stays the a11y control. */ .cover-wrap.cover-clickable { cursor: pointer; } /* Hold the existing hover tilt open while the panel is open. */ .book-card.book-open .cover-wrap img { transform: rotateY(-9deg) translate(-2px); box-shadow: 11px 16px 30px #1e161257; } @media (max-width: 640px) { .books-bar { margin: -20px 0 26px; } .bd-facts > div { grid-template-columns: 78px 1fr; gap: 10px; } } @media (prefers-reduced-motion: reduce) { .book-details summary::after { transition: none; } .book-card.book-open .cover-wrap img { transform: none; } } /* ================================================================== 4. CONTACT FORM — newsletter opt-in ================================================================== */ .contact-form .form-check { text-transform: none; letter-spacing: 0; font-family: var(--font-serif), serif; font-size: 15px; font-weight: 400; color: #5f5851; flex-direction: row; align-items: flex-start; gap: 11px; margin: 4px 0 22px; line-height: 1.45; cursor: pointer; } .contact-form .form-check input[type="checkbox"] { accent-color: var(--plum); flex: none; width: 17px; height: 17px; margin: 2px 0 0; padding: 0; border: 0; cursor: pointer; } .contact-form .form-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; } /* ================================================================== 5. ACCESSIBILITY — visible keyboard focus The bundle sets outline:none on form controls and never restores a focus ring for links or buttons. ================================================================== */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 2px; } .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; } /* ================================================================== 6. BOOK CARDS — award badge and reader quote Both sit inside .book-copy on a coloured card, so they are built from white-alpha rather than fixed colours and work on all three card treatments (plum, sage, gold). Note the child selectors in the bundle: `.book-copy>p` is the uppercase subtitle rule and `.book-copy>span` is the description. The badge is therefore a
and the quote a
— a

here would inherit 9px uppercase type and a trailing rule. ================================================================== */ .book-copy .book-award { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; margin: 0 0 16px; padding: 6px 15px 6px 6px; border: 1px solid #ffffff3d; border-radius: 3px; background: #ffffff17; } .book-copy .book-award .ba-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: #fffdf8; color: #4a3320; text-transform: uppercase; letter-spacing: 0.14em; font-size: 8px; font-weight: 700; line-height: 1.6; } .book-copy .book-award .ba-text { font-size: 11px; line-height: 1.35; letter-spacing: 0.01em; opacity: 0.95; } /* Anonymous by nature, so the citation says exactly what it is. */ .book-copy .book-quote { margin: 20px 0 0; padding: 2px 0 2px 15px; border-left: 2px solid #ffffff5c; } .book-copy .book-quote p { margin: 0; font-family: var(--font-serif), serif; font-size: 15px; line-height: 1.5; opacity: 0.93; } .book-copy .book-quote cite { display: block; margin-top: 9px; font-style: normal; text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px; font-weight: 700; opacity: 0.62; } /* The longer excerpt, inside the details panel. */ .bd-quote { margin: 0 0 11px; padding: 0 0 0 14px; border-left: 2px solid #ffffff45; } .bd-quote p { margin: 0; font-family: var(--font-serif), serif; font-size: 14.5px; line-height: 1.5; opacity: 0.9; } .bd-quote cite { display: block; margin-top: 8px; font-style: normal; text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px; font-weight: 700; opacity: 0.6; } /* ================================================================== 7. ABOUT — teaching history and freelance credits The bundle zeroes paragraph margins and never restores a gap between the two bio paragraphs; with the first one now four lines longer they read as one block, so put the break back. A definition list rather than prose: five roles read as a scannable record, and the dates are the part a reader actually looks for. ================================================================== */ .about-copy > p:not(.eyebrow) + p:not(.eyebrow) { margin-top: 18px; } .about-copy .about-more { margin: 30px 0 0; } .cv-list { margin: 0; display: grid; gap: 11px; } .cv-list > div { display: grid; grid-template-columns: 122px 1fr; gap: 16px; align-items: baseline; padding-bottom: 11px; border-bottom: 1px solid var(--line); } .cv-list > div:last-child { padding-bottom: 0; border-bottom: 0; } .cv-list dt { margin: 0; text-transform: uppercase; letter-spacing: 0.15em; font-size: 10px; font-weight: 700; color: var(--plum); } .cv-list dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: #4f4842; } .about-freelance { margin: 24px 0 0; font-family: var(--font-serif), serif; font-size: 17px; line-height: 1.6; color: #4f4842; } .about-freelance em { font-style: italic; } @media (max-width: 560px) { .cv-list > div { grid-template-columns: 1fr; gap: 4px; } } /* ================================================================== 8. WHAT'S NEXT — the ink band between the bookshelf and About Deliberately the darkest panel on the page. The book is a preview, not an announcement, so the section is written to withhold and the styling follows: one large serif title, a lot of unused space, and a date set as a footnote rather than a call to action. ================================================================== */ .next-up { position: relative; overflow: hidden; padding: 100px max(34px, 50vw - 600px) 104px; background-color: #211d1a; background-image: radial-gradient(circle at 12% 18%, #c9914518 0 36%, #0000 64%), radial-gradient(circle at 88% 82%, #66415329 0 38%, #0000 68%); color: #f2e9dd; } .next-up::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0000 0 64%, #00000038); } .nu-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; } .next-up .eyebrow { color: var(--gold); } .nu-grid { display: grid; grid-template-columns: 1.4fr 0.95fr; gap: 64px; align-items: start; } .nu-main p.nu-kicker, .nu-aside p.nu-kicker { margin: 0 0 12px; font-family: var(--font-sans), sans-serif; text-transform: uppercase; letter-spacing: 0.17em; font-size: 10px; font-weight: 700; color: #bda88f; } .nu-main h2 { margin: 0 0 20px; font-family: var(--font-serif), serif; font-weight: 500; font-size: clamp(46px, 5vw, 76px); line-height: 0.95; letter-spacing: -0.03em; color: #fffdf8; } .nu-main > p { max-width: 46ch; margin: 0; font-family: var(--font-serif), serif; font-size: 19px; line-height: 1.62; color: #e3d8ca; } .nu-main p.nu-when { display: inline-block; margin: 28px 0 0; padding-top: 15px; border-top: 1px solid #ffffff26; font-family: var(--font-sans), sans-serif; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; font-weight: 700; color: var(--gold); } .nu-aside { padding-left: 40px; border-left: 1px solid #ffffff1f; } .nu-aside h3 { margin: 0 0 9px; font-family: var(--font-serif), serif; font-weight: 500; font-size: 27px; line-height: 1.15; color: #fffdf8; } .nu-aside p { margin: 0; font-size: 15px; line-height: 1.6; color: #c6bbad; } @media (max-width: 900px) { .nu-grid { grid-template-columns: 1fr; gap: 40px; } .nu-aside { padding: 28px 0 0; border-left: 0; border-top: 1px solid #ffffff1f; } } @media (max-width: 640px) { .next-up { padding: 72px 22px 76px; } } /* ================================================================== 9. EVENTS & APPEARANCES Sits between the dark video band and the contact form, on paper, so the page does not run two coloured panels together. ================================================================== */ .events-section { background: var(--paper); padding: 100px max(34px, 50vw - 600px) 110px; } .events-section .section-heading { margin-bottom: 50px; } .event-list { list-style: none; margin: 0 0 58px; padding: 0; display: grid; gap: 18px; } .event-card { display: grid; grid-template-columns: 92px 1fr; gap: 30px; align-items: center; padding: 26px 32px; background: var(--cream); border: 1px solid var(--line); border-radius: 3px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .event-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px #402e2418; } .event-date { display: grid; justify-items: center; gap: 3px; margin: 0; padding-right: 28px; border-right: 1px solid var(--line); } .ed-month { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; color: var(--plum); } .ed-day { font-family: var(--font-serif), serif; font-size: 44px; line-height: 1; color: var(--ink); } .ed-year { letter-spacing: 0.16em; font-size: 10px; color: #8b8279; } .event-body h3 { margin: 0 0 8px; font-family: var(--font-serif), serif; font-weight: 500; font-size: 25px; line-height: 1.2; color: var(--ink); } .event-body p { margin: 0; font-size: 15px; line-height: 1.6; color: #5b544d; } .event-body em { font-style: italic; } .event-body p.event-when { margin-top: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; font-weight: 700; color: #8b8279; } .event-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .event-gallery figure { margin: 0; overflow: hidden; border-radius: 3px; background: var(--cream); } .event-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.5s ease; } .event-gallery figure:hover img { transform: scale(1.04); } .eg-caption { margin: 15px 0 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; color: #8b8279; } @media (max-width: 900px) { .event-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .events-section { padding: 72px 22px 80px; } .event-card { grid-template-columns: 1fr; gap: 16px; padding: 24px; } .event-date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 9px; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); } .ed-day { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { .event-card, .event-gallery img { transition: none; } .event-card:hover { transform: none; } .event-gallery figure:hover img { transform: none; } } /* ================================================================== HERO — matching call-to-action buttons (Sep 2026) "Explore the books" is a .button.primary; "Meet Joyce" is a .text-link (underlined text). Both are restyled here as the same button so they share size, type, colour and arrow. Done in CSS only: the markup and RSC payload are untouched, so hydration is unaffected. The "↘" glyph in "Meet Joyce" is hidden — iOS/Android can swap it for a colour emoji — and replaced with the same arrow icon the first button uses, drawn as a CSS mask. ================================================================== */ .hero-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* equal-width buttons */ justify-content: start; align-items: stretch; gap: 14px; width: fit-content; max-width: 100%; } .hero-actions .button, .hero-actions .text-link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; margin: 0; padding: 14px 26px; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.13em; text-transform: uppercase; text-align: center; white-space: nowrap; text-decoration: none; color: #fff; background: var(--plum); border: 1px solid var(--plum); border-radius: 2px; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .hero-actions .button:hover, .hero-actions .text-link:hover { color: #fff; background: var(--plum-dark); border-color: var(--plum-dark); } .hero-actions .button:active, .hero-actions .text-link:active { transform: translateY(1px); } .hero-actions .button svg { flex: none; width: 17px; height: 17px; } .hero-actions .text-link span { display: none; } .hero-actions .text-link::after { content: ""; flex: none; width: 17px; height: 17px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } /* Phones: stack the two buttons full width. */ @media (max-width: 640px) { .hero-actions { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; width: 100%; gap: 12px; } .hero-actions .button, .hero-actions .text-link { width: 100%; min-height: 52px; } } @media (forced-colors: active) { .hero-actions .text-link::after { background-color: LinkText; } } @media (prefers-reduced-motion: reduce) { .hero-actions .button, .hero-actions .text-link { transition: none; } } /* ================================================================== BOOKSHELF — pen names Replaces the old full-width "Author identities" image banner that sat between the hero and the bookshelf. The two names now open the bookshelf, where they explain the covers below. The bar is a quiet ruled band so the names, the hint and "Show all details" read as one tidy row instead of floating under the heading. ================================================================== */ .books-bar { gap: 16px 28px; margin: -22px 0 42px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pen-names { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; } .pen-names li { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 2px 26px; } .pen-names li:first-child { padding-left: 0; } .pen-names li + li { border-left: 1px solid #c9914580; } .pen-names strong { font-family: var(--font-serif), serif; font-size: 26px; font-weight: 600; line-height: 1; color: var(--plum); } .pen-names span { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; font-weight: 700; color: #8b8279; } .books-bar .books-hint { margin-left: auto; } /* Tablets: the two-column heading was squeezed at this width, so stack it, and give the names a row of their own above the hint + button. */ @media (max-width: 900px) { .books-section .section-heading { display: block; margin-bottom: 40px; } .books-section .section-heading > p { max-width: 560px; margin: 22px 0 0; } .books-bar { margin: 0 0 36px; padding: 22px 0 20px; row-gap: 18px; } .pen-names { flex-basis: 100%; } .books-bar .books-hint { margin-left: 0; } } /* Phones: name above genre, hint and button share the second row. */ @media (max-width: 640px) { .books-section .section-heading { margin-bottom: 34px; } .books-bar { margin: 0 0 30px; padding: 20px 0 18px; gap: 14px 16px; } .pen-names li { flex-direction: column; gap: 7px; padding: 0 22px; } .pen-names strong { font-size: 25px; } .books-bar .books-hint { font-size: 15px; } }