) form of the card gets this — an article without a
url isn't clickable, so hinting otherwise would be misleading. */
a.news-card:hover {
transform: translateY(-2px);
border-width: 2px;
box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.15);
}
/* Right-facing arrow, vertically centered — only on the full News
list page (news.html), not the homepage preview cards. Reserves
the space at all times (rather than only on hover) so the arrow
fading in doesn't shift the card's text.
.news-page .news-card {
position: relative;
padding-right: 90px;
}
.news-page .news-card::after {
content: '\2192';
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
font-size: 60px;
color: #0F6E56;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.news-page .news-card:hover::after {
opacity: 1;
}
*/
.news-date {
margin: 0 0 6px 0;
font-weight: bold;
color: #555;
/* Guarantees a single line, regardless of how long the
formatted date turns out to be. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Fixed to exactly two lines (line-height x 2) regardless of the
actual title length, so every card's summary is the same height
and .news-source always sits in the same spot beneath it. */
.news-title {
margin: 0 0 6px 0;
font-size: 18px;
line-height: 24px;
height: 48px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Always the last line of the visible summary now (the description
moved below it, see .news-description), so no trailing margin —
the gap down to the card's bottom border is just the 16px padding,
matching the 16px gap at the top. */
.news-source {
margin: 0;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Reserves a full line even when an article has no source, so
every card is the same height whether or not this is blank —
an empty would otherwise collapse to 0. */
min-height: 24px;
}
/* Collapsed to zero height by default; expands into view on hover,
growing to fit however much description text there is (no fixed
or guessed height) rather than floating over the content below —
the grid-template-rows 0fr->1fr animates smoothly to "auto" size,
which plain height/max-height can't do. Because this is normal
in-flow content (not positioned), every card below this one gets
pushed down as it opens. The 10px gap above the description lives
here as padding-top (added only on hover, alongside the row
growing) rather than as the description's own margin — a margin
would still count toward the row's minimum size even while
collapsed, leaving a few px of unwanted height on every card. */
.news-description-wrap {
display: grid;
grid-template-rows: 0fr;
padding-top: 0;
transition: grid-template-rows 0.25s ease, padding-top 0.25s ease;
}
.news-card:hover .news-description-wrap {
grid-template-rows: 1fr;
padding-top: 10px;
}
.news-description {
margin: 0;
overflow: hidden;
min-height: 0;
}
.no-news-message {
color: #555;
font-style: italic;
}
/* --- Dropdown Overlay --- */
/* Dims the rest of the page while a header dropdown (Books, About) is
open, so attention stays on the menu. The .25s delay on transition
only applies going IN — it's what makes the overlay wait until the
dropdown has been open for a moment before appearing at all. Fading
out (mouse leaves before or after that) happens immediately, with
no delay, via the base rule below. */
.page-dim-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
/* Above ordinary page content, below the header (z-index: 1000)
and its dropdown so both stay fully visible and usable. */
z-index: 900;
transition: opacity 0.2s ease;
}
body:has(.dropdown:hover) .page-dim-overlay {
opacity: 1;
transition-delay: 0.05s;
}
/* --- Books Dropdown Menu --- */
/* Makes "Books" the anchor point for the absolutely-positioned dropdown */
.dropdown {
position: relative;
cursor: default;
}
/* The dropdown list itself no longer carries the "reveal" animation —
.header's own padding-bottom (above) grows to do that. This just
fades in quickly once the header has made room for it, anchored
directly below "Books" without affecting that li's own width. */
.dropdown-menu {
display: block;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
padding-left: 10px;
min-width: 160px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
/* Each link in the dropdown */
.dropdown-menu li {
padding: 0;
}
.dropdown-menu a {
display: block;
padding: 10px 14px;
color: #F7F3EC;
white-space: nowrap; /* Prevents the link text from wrapping to a second line */
}
.dropdown-menu a:hover {
text-decoration: underline;
color: white;
}
/* Show the dropdown when the user hovers over the "Books" item */
.dropdown:hover .dropdown-menu {
opacity: 1;
pointer-events: auto;
}
/* Single column at every screen size — intro text on top, form below
— rather than .bio_content_container's side-by-side row, so the
form (and its width:100% fields below) always gets the full
content width instead of sharing the row with the text block.
Same 171px top clearance for the fixed header and 60px padding on
the remaining sides as .bio_content_container. */
.contact_page {
display: flex;
flex-direction: column;
padding: 171px 60px 60px 60px;
}
.contact_page_text {
padding: 1% 4% 1% 0;
}
/* Zeroes the browser's default h1 top margin — same reasoning as
.bio_text_container h2 above. */
.contact_page_text .section_header {
margin-top: 0;
}
/* Shown in place of the form once it's submitted (see the inline
script in contact.html). Reuses the footer's .social_media icon
chips so the Instagram/LinkedIn links match the rest of the site
instead of introducing a new icon treatment. */
.contact_thank_you h2 {
margin-top: 0;
}
.contact_thank_you .social_media {
margin-top: 20px;
}
/* The hidden attribute's built-in [hidden] { display: none } is
lower-specificity than the class selector below and would
otherwise lose to it, leaving the form visible after submission. */
.contact_page_form form[hidden] {
display: none;
}
.contact_error {
color: #B3261E;
font-weight: bold;
}
.contact_page_form form {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Stretches every field to the form's own width — without this the
textarea's cols="100" attribute would render at its intrinsic
character width, which is wider than the available column on both
desktop and mobile and causes horizontal scroll. box-sizing keeps
the border inside that 100% instead of adding to it. */
.contact_page_form input[type="text"],
.contact_page_form input[type="email"],
.contact_page_form textarea,
.contact_page_form fieldset {
width: 100%;
box-sizing: border-box;
font-family: inherit;
}
/* Caps Name/Email at 500px on wide screens. width: 100% (above) still
applies underneath this, so on any screen narrower than 500px plus
.contact_page's own side padding, the field shrinks to fit its
container instead of overflowing it — no extra media query needed. */
.contact_page_form input[type="text"],
.contact_page_form input[type="email"] {
max-width: 500px;
}
/* Same treatment for the additional-details textarea, capped wider
(750px) since it's meant to hold more text than a name/email field. */
.contact_page_form textarea {
max-width: 750px;
}
/* Pulls each field 4px closer to its own label, bringing that gap
down from the form's 12px inter-field gap to 8px — matching the
legend-to-.contact_checkbox_option spacing. Scoped to just these
three fields (by id) so the 12px gap between separate label/input
sets — e.g. the Name input down to the Email label — is untouched. */
#name,
#email,
#additional_details {
margin-top: -4px;
}
/* Checkboxes keep their natural (small) width — the width: 100% rule
above is only for text-like fields. Each checkbox/label pair stays
inline (the default flow), one pair per line via the
tags
already in the markup — a flex container here would turn every
child, including each label, into its own stacked row. */
.contact_checkbox_option input[type="checkbox"] {
margin-right: 8px;
vertical-align: middle;
}
.contact_checkbox_option label {
display: inline-block;
margin-bottom: 8px;
}
/* Strips the browser default fieldset border/padding so the legend
lines up flush left with the Name/Email/Additional details labels
above and below it, instead of being inset inside a boxed border. */
.contact_page_form fieldset {
border: none;
margin: 0;
padding: 0;
}
.contact_page_form legend {
padding: 0;
margin-bottom: 8px;
}
/* Marks the Name/Email labels as required, plus the key at the top
of the form explaining what the asterisk means. No existing
site-standard "error/required" color, so this introduces a single
new accent (a conventional required-field red) rather than reusing
the brand plum, which is reserved for actions/links. */
.required_indicator {
color: #B3261E;
margin-left: 2px;
}
.form_required_note {
font-size: 13px;
color: #5A5A57;
margin: 0 0 4px 0;
}
/* Small circular "?" badge that reveals a custom tooltip on hover/
focus — a native title="" attribute can't be restyled with the
site's font/colors, so this is a lightweight custom component
built from the same brand palette as the rest of the form
(.buttons a's plum background, the site's "Basic" font). */
.field_tooltip_trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 6px;
border-radius: 50%;
background-color: #6B2D5C;
color: white;
cursor: help;
vertical-align: middle;
}
/* Isolated from the surrounding whitespace/nested tooltip markup so
it's the only thing the flexbox centering above has to center. Its
own nested flex centering (rather than relying on font line-height,
which sits the glyph off-center within its line box) is what
actually lines the "?" up in the middle of the circle. The
translate is a small manual correction on top of that: flexbox
only centers the font's line box, and the "Basic" font's "?"
glyph sits low and slightly right within its own line box (visible
ink doesn't fill it symmetrically), so a pure flex/box-based
centering still looks off — confirmed by comparing against the
rendered result, not just computed box metrics. */
.field_tooltip_icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: "Basic", sans-serif;
font-size: 11px;
line-height: 1;
transform: translate(-0.5px, -1.8px);
}
/* Anchors the tooltip to the whole label/legend (not just the small
trigger badge) so it can be centered over the text it belongs to,
rather than off to one side under the badge. */
.contact_page_form label,
.contact_page_form legend {
position: relative;
}
.field_tooltip {
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%) translateY(4px);
background-color: #2C2C2A;
color: #F5F1E8;
font-family: "Basic", sans-serif;
font-size: 13px;
font-weight: 400;
white-space: normal;
width: max-content;
max-width: 220px;
box-sizing: border-box;
padding: 6px 10px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
z-index: 10;
}
.field_tooltip_trigger:hover .field_tooltip,
.field_tooltip_trigger:focus .field_tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Re-adds the fieldset's old 12px left padding here instead, so the
checkboxes/labels stay exactly where they were — only the legend
moves flush left. */
.contact_page_form .contact_checkbox_option {
padding-left: 12px;
}
/* -------------------------------------------------------
Responsive layout — applies to screens 768px and under
(phones and portrait tablets).
How media queries work: the styles inside this block
override the rules above ONLY when the screen is narrow.
The desktop styles above remain unchanged.
------------------------------------------------------- */
@media (max-width: 768px) {
/* Back to a single column on mobile — the 2-per-row grid is
desktop-only. */
.events-page .events-container,
.news-page .news-container {
grid-template-columns: 1fr;
}
/* Keep the name on the left and the hamburger button on the right,
on a single row, instead of the desktop row-of-links layout */
.header {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-right: 20px;
box-sizing: border-box;
}
/* Remove the auto left margin that pushes the menu to the right on desktop */
ul {
margin-left: 0;
}
/* The three-bar icon that opens the full-screen menu. Positioned
and raised above the menu overlay so it stays visible (now as an
"X") and clickable to close the menu once it's open. */
.hamburger_menu_button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
flex-shrink: 0;
position: relative;
z-index: 1001;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.hamburger_bar {
display: block;
width: 26px;
height: 3px;
background-color: #F7F3EC;
transition: transform 0.2s, opacity 0.2s;
}
/* Turns the three bars into an "X" once the menu is open
(the "mobile-menu-open" class is added by script.js) */
.header.mobile-menu-open .hamburger_bar:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.header.mobile-menu-open .hamburger_bar:nth-child(2) {
opacity: 0;
}
.header.mobile-menu-open .hamburger_bar:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* The nav menu itself is hidden until the hamburger opens it, at
which point it expands to fill the whole screen */
.header_menu {
display: none;
position: fixed;
inset: 0;
/* inset: 0's bottom: 0 resolves against .header's own (short,
content-sized) box instead of the viewport — .header has
will-change: transform (for GPU-compositing during
rubber-band overscroll, see its own comment), which makes it
the containing block for fixed descendants, the same way an
actual transform would. vh/dvh units sidestep that entirely
since they're always relative to the true viewport,
regardless of containing block — explicit height here
overrides the broken bottom: 0-derived height. 100dvh (with
100vh fallback) matches the same mobile-toolbar-aware
pattern used on body. */
height: 100vh;
height: 100dvh;
/* Without this, the 110px/30px padding below adds on top of
the 100dvh height instead of being carved out of it,
overshooting the real viewport height by exactly that much. */
box-sizing: border-box;
margin: 0;
padding: 110px 30px 30px 30px;
background-color: #0F6E56;
flex-direction: column;
align-items: flex-start;
gap: 6px;
overflow-y: auto;
}
.header.mobile-menu-open .header_menu {
display: flex;
}
.header_menu li {
width: 100%;
padding: 10px 0;
}
.header_menu .standard_menu_item {
font-size: 1.5rem;
}
/* Puts "Books" and its caret button on the same row, at opposite ends */
.mobile_menu_item_row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
cursor: pointer;
}
/* The caret button that expands/collapses the Books submenu.
Hover doesn't work on touch devices, so mobile gets its own
tap target instead of relying on :hover like desktop does. */
.dropdown_toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.dropdown_caret {
display: block;
width: 10px;
height: 10px;
border-right: 2px solid #F7F3EC;
border-bottom: 2px solid #F7F3EC;
transform: rotate(45deg);
transition: transform 0.2s;
}
/* Points the caret up once its submenu is open
("mobile-dropdown-open" is added by script.js) */
.dropdown.mobile-dropdown-open .dropdown_caret {
transform: rotate(-135deg);
}
/* On mobile the submenu is toggled by tapping the caret, not by
hovering, so it needs to sit in normal document flow (not the
absolutely-positioned floating panel desktop uses) and default
to hidden until "mobile-dropdown-open" is added. */
.dropdown-menu {
display: none;
position: static;
background-color: transparent;
padding-left: 20px;
margin-top: 6px;
/* Undo the desktop fade animation — mobile still toggles with
plain display: none/block via the caret button. */
opacity: 1;
pointer-events: auto;
transition: none;
}
.dropdown.mobile-dropdown-open .dropdown-menu {
display: block;
}
.dropdown-menu a {
font-size: 1.2rem;
padding: 10px 0;
color: white;
}
/* Disables the desktop hover reveal so a tap-and-hold on a touch
screen can't pop the submenu open outside of the caret toggle */
.dropdown:hover .dropdown-menu {
display: none;
}
/* Some touch browsers keep :hover active after a tap, which would
otherwise grow the header on mobile too. Mobile only expands via
the "mobile-menu-open" class instead. */
.header:has(.dropdown:hover) {
padding-bottom: 0;
}
/* Same reasoning — don't let a lingering touch :hover state dim
the page on mobile, where the full-screen menu already covers it. */
body:has(.dropdown:hover) .page-dim-overlay {
opacity: 0;
}
.dropdown.mobile-dropdown-open:hover .dropdown-menu {
display: block;
}
/* Stack hero text and book cover vertically; let height grow with content */
.hero {
flex-direction: column;
height: auto;
padding: 100px 20px 40px 20px;
}
/* Remove the large left margin used to position the cover on desktop.
margin-top matches the gap .blurb-container already puts above
itself (20px), so the space above/below the blurb is even now
that the cover sits directly beneath it in the stacked layout. */
.hero_book_cover {
margin-left: 0;
margin-right: 0;
margin-top: 20px;
justify-content: center;
}
/* Remove extra left padding from hero text so it doesn't feel cramped.
Desktop's transform (shifts text right/down to visually balance
against the book cover sitting beside it) doesn't apply once the
two are stacked instead of side by side — left uncancelled, it
pushed the title/text/blurb past the right edge of the viewport
(causing horizontal scroll) and down far enough to overlap the
book cover below. padding-top is also cut, since most of the gap
above "Rough Cuts" comes from here, on top of .hero's own
padding-top above. */
.hero_text {
padding-left: 0;
padding-top: 20px;
transform: none;
}
/* Tighten side padding for the "Other Work" section */
.additional_work_container {
padding: 0 20px;
}
/* The empty ( ) heading above "Doorman Wanted" exists only to
reserve the same spacing "Other Work" used to take up (see the
comment in index.html) — worth keeping on desktop, but on mobile
that reserved gap just pushes "Doorman Wanted" down for no
reason, so the heading (and its padding-top/line-height) is
dropped entirely here instead of just zeroing the padding. Only
targets this specific empty spacer, not the real "Upcoming
Events"/"Latest News" headings or other pages' .section_header
titles, whose mobile spacing is unaffected. */
.additional_work_container > .section_header {
display: none;
}
/* Skyline background is desktop-only — hidden on mobile rather
than just repositioned, since the much taller stacked layout
here would tile it repeatedly behind the text. */
.additional_work::before {
display: none;
}
/* Stack the book description and cover vertically; let height grow
naturally. gap adds space between "Learn More" and the cover
below it, now that they're stacked instead of side by side. */
.additional_work {
flex-direction: column;
height: auto;
padding-left: 0;
margin-bottom: 40px;
gap: 40px;
}
/* Let the text take full width instead of the fixed 70% used on desktop */
.additional_work_text {
width: 100%;
}
/* Centers the "Learn More" button in the middle of the screen —
.buttons a is inline-block, so centering its text-align parent
is enough, without affecting the buttons on desktop or the
Events/News "See All..." buttons elsewhere on the page. */
.additional_work_text .buttons {
text-align: center;
}
/* Remove desktop margins and center the book cover */
.additional_work_book_cover {
margin-left: 0;
margin-right: 0;
height: auto;
justify-content: center;
}
/* Scale book cover images to a readable size on small screens */
.additional_work_book_cover img {
height: 22em;
width: auto;
}
/* Stack award boxes vertically instead of side by side, centered
as a column, with even space between the two. */
.awards_container {
flex-direction: column;
align-items: center;
gap: 20px;
}
/* Widen each award box so it's readable on a narrow screen */
.single_award_container {
width: 70%;
}
/* Stack the bio photo and text vertically. Top padding clears the
111px fixed header plus a 40px gap (matching the Events/News
mobile heading gap); bottom padding is that same 40px on its
own, so the whitespace above and below the content matches. */
.bio_content_container {
flex-direction: column;
padding: 151px 20px 40px 20px;
}
/* Already a single column at every width (see .contact_page above)
— only the top padding changes here, using the same 124px
formula as .events-page/.news-page (111px fixed header + 40px
gap - 27px already baked into .section_header's padding-top)
since the "Contact Glenn" heading uses .section_header too. */
.contact_page {
padding: 124px 20px 40px 20px;
}
/* Desktop sizes the photo by a fixed height (28em), which on a
narrow mobile viewport renders wider than .bio_content_container
and bleeds past its right padding — sizing by width instead
keeps it exactly as wide as the container, so the left/right
margins (both the container's 20px side padding) end up even. */
.bio_photo_container img {
width: 100%;
height: auto;
/* Without this, the 1px border is added on top of the 100%
width instead of inside it, making the image 2px wider than
its container and off-center by those 2px. */
box-sizing: border-box;
}
/* Tighten side padding for the Events page and homepage preview.
Top padding is raised to 200px (not 100px) because the fixed
header is much taller here than on desktop — the site name and
nav links stack into two rows instead of sitting side by side. */
/* 124px = 111px fixed header + 40px gap - 27px already baked into
.section_header's padding-top, so "Events" sits 40px below the
header. */
.events-page {
padding: 124px 20px 40px 20px;
}
/* Matches the page's narrower mobile side padding so the sticky
heading still bleeds edge-to-edge without shifting "Events". */
.events-header {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
/* Stack News above Events on mobile instead of side by side.
column-reverse flips the visual order to News-then-Events
while leaving the underlying markup (Events, then News) alone. */
.home-preview-container {
flex-direction: column-reverse;
gap: 40px;
padding: 0 20px 40px 20px;
}
/* Less top padding than the other mobile pages — the fixed
header here is a single ~111px row (no two-row wrap), so the
shared 200px value was leaving a large empty gap above the
cover image. */
.book-page {
padding: 130px 20px 40px 20px;
}
/* Stack the cover above the details instead of side by side —
the row layout doesn't fit a mobile-width viewport and was
forcing a horizontal scrollbar. */
.book-page-content {
flex-direction: column;
/* Overrides the desktop-only "align-items: flex-start" —
in a column layout that shrinks each child to its content's
natural width instead of the available 335px, which is what
was pushing the title/subtitle/paragraph text wide enough
to cause the horizontal scroll. */
align-items: stretch;
/* Halves the ~59px gap between the header and the cover image
(desktop's 40px margin-top was making it larger than needed
once .book-page's own top padding already clears the header). */
margin-top: 10px;
}
/* Scale the cover down and center it, matching the same
treatment used for book covers elsewhere on mobile. */
.book-page-content img {
height: 22em;
width: auto;
align-self: center;
}
/* Stack the buy buttons instead of a horizontal row — several
buttons side by side don't fit a mobile-width viewport. Used on
the book pages and the Buy page alike. Same 12px gap as the row
layout (flex gap works the same in either direction), so the
spacing is unchanged. */
.buy-buttons {
flex-direction: column;
align-items: stretch;
}
/* Less top padding than the shared 200px value — the fixed header
here is a single ~111px row (no two-row wrap), matching the
same fix already applied to the book pages. */
.buy-page {
padding: 130px 20px 40px 20px;
}
/* Cuts the gap above the first cover down to match the book
pages' mobile gap (130px header clearance above + 10px here =
the same total as .book-page-content's 10px margin-top). The
desktop margin-top/padding-top here add up to far more than
that once .buy-page's own top padding grew to clear the mobile
header. */
.buy-books-container {
margin-top: 0;
padding-top: 10px;
}
/* Stack each book's cover above its details instead of side by
side — the row layout doesn't fit a mobile-width viewport and
was forcing a horizontal scrollbar. */
.buy-book {
flex-direction: column;
/* Overrides the desktop-only "align-items: flex-start" — in a
column layout that shrinks each child to its content's
natural width instead of the full available width, which is
what was pushing the title/description/buttons wide enough
to cause the horizontal scroll. */
align-items: stretch;
}
/* Center the (already mobile-sized, 22em) cover above the text. */
.buy-book-cover-link {
align-self: center;
}
/* Matches the full-stretched width of the buy-buttons below it —
"Learn More" is a plain inline-block link, not a flex item, so
it doesn't stretch to fill .buy-book-details on its own. Left-
aligned with the same padding as .buy-button, rather than
centered, so the text lines up the same way in both. */
.buy-book-details .buttons a {
display: block;
box-sizing: border-box;
width: 100%;
text-align: left;
padding: 6px 14px;
}
/* 124px = 111px fixed header + 40px gap - 27px already baked into
.section_header's padding-top, so "News" sits 40px below the
header. */
.news-page {
padding: 124px 20px 40px 20px;
}
/* Matches the page's narrower mobile side padding so the sticky
heading still bleeds edge-to-edge without shifting "News". */
.news-header {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
/* No hover-in arrow on mobile — touch devices don't have a true
hover state to animate, so it's removed along with the extra
padding reserved for it, reverting to the base card padding.
.events-page .event-card,
.news-page .news-card {
padding-right: 20px;
}
.events-page .event-card::after,
.news-page .news-card::after {
content: none;
}
*/
/* The thicker border and drop shadow are desktop-only — also
covers :hover, in case a touch device lingers on :hover after
a tap instead of never triggering it at all. */
.event-card,
.news-card,
.event-card:hover,
.news-card:hover,
a.news-card:hover {
border-width: 1px;
box-shadow: none;
}
/* Without this, the nowrap text below gives .event-card/.news-card
an intrinsic min-width wider than .events-container/.news-container
(a flex column), pushing the card past the viewport edge and
causing horizontal scroll — min-width: 0 lets the card shrink
back down to the container's width. */
.event-card,
.news-card {
min-width: 0;
}
/* Wrap the date/location/source instead of truncating them to a
single ellipsized line — at mobile widths the desktop nowrap
treatment cuts off text that would otherwise fit on two lines. */
.event-date,
.event-location,
.news-date,
.news-source {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}