/* ==========================================================================
   about.css — About page redesign (Ameba). Loaded ONLY on about.html, AFTER
   main-v3.css; every rule scoped under body.about-v2 so no other page moves.
   ========================================================================== */

/* --- #1 Menu: black, coral hover, active "About" coral -------------------- */
body.about-v2 header nav a { color:#1A1A1A; font-size:16px; font-weight:700; border-left-color:#1A1A1A; }
body.about-v2 header nav a:first-child { border-left:none; }
body.about-v2 header nav a:hover, body.about-v2 header nav a:focus { color:#FC5D59; }
body.about-v2 header nav a[href="/about.html"] { color:#FC5D59; }

/* --- General: body paragraphs 16px, H3 24px (design system) --------------- */
body.about-v2 #about-content p { font-size:16px; letter-spacing:0.5px; }
body.about-v2 #about-content h3 { font-size:24px; font-weight:600; line-height:1.3; text-transform:none; }

/* --- #5 Header: full-width teal-gray band around ABOUT US + cards ---------- */
body.about-v2 #about-content .about-header {
	position:relative; padding:42px 0 46px; margin-bottom:40px; height:393px; box-sizing:border-box;
}
body.about-v2 #about-content .about-header::before {
	content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
	width:100vw; background:#E8EFEE; z-index:-1;
}

/* --- #4 H1 "ABOUT US": centered, uppercase, 30/700, black divider --------- */
body.about-v2 #about-content h1 {
	color:#1A1A1A; font-size:30px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
	text-align:center; border-bottom:1px solid #1A1A1A; padding-bottom:14px; margin:0 auto 26px;
}

/* --- #6 Category cards: 4 square cards in a row, full image + coral button - */
body.about-v2 #about-content .category-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; justify-content:center; }
body.about-v2 #about-content .cat-card {
	position:relative; display:flex; align-items:flex-end; justify-content:center;
	width:100%; max-width:228px; aspect-ratio:228/224; padding:0 0 22% 0; box-sizing:border-box;
	background-size:cover; background-position:center;
	text-decoration:none; overflow:hidden;
}
body.about-v2 #about-content .cat-card.nonfiction-feature { background-image:url(../img/nonfiction@2x.jpg); }
body.about-v2 #about-content .cat-card.sci-fi { background-image:url(../img/sci-fi@2x.jpg); }
body.about-v2 #about-content .cat-card.travel { background-image:url(../img/travel@2x.jpg); }
body.about-v2 #about-content .cat-card.children { background-image:url(../img/children@2x.jpg); }
body.about-v2 #about-content .cat-card span {
	background:#FC5D59; color:#fff; font-size:14px; font-weight:700; letter-spacing:0.5px;
	text-transform:uppercase; white-space:nowrap; height:40px; padding:0 22px; box-sizing:border-box;
	display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
@media (max-width:659px) { body.about-v2 #about-content .category-cards { grid-template-columns:repeat(2,1fr); } }

/* --- #11 Our Inspiration: white bg (drop bg image + teal overlay) ---------- */
body.about-v2 #about-content #inspiration { background:#fff none; text-align:center; padding:10px 0 20px; }
body.about-v2 #about-content .inspiration-content { background:transparent; padding:0; }
/* #8 heading → H2 style (dark teal, centered, divider) */
body.about-v2 #about-content .inspiration-heading {
	background:none; border:none; border-bottom:1px solid #076E5A; color:#076E5A;
	font-size:26px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-align:center;
	display:block; max-width:640px; margin:0 auto 6px; padding:0 0 12px;
}
/* #9 subheading → H3 style (centered) */
body.about-v2 #about-content .inspiration-sub {
	color:#1A1A1A; font-size:24px; font-weight:600; text-align:center; text-transform:none;
	border:none; background:none; display:block; height:76px; margin:16px auto 22px; padding:0;
}
/* #8/#9 mobile type sizes */
@media (max-width:659px) {
	body.about-v2 #about-content .inspiration-heading { font-size:22px; }
	body.about-v2 #about-content .inspiration-sub { font-size:20px; }
}
/* #10 lines → bullet list with coral check-circle icons */
body.about-v2 #about-content .inspiration-list { list-style:none; max-width:540px; margin:0 auto; padding:0; text-align:left; }
body.about-v2 #about-content .inspiration-list li {
	position:relative; padding:9px 0 9px 42px; font-size:16px; color:#1A1A1A; line-height:1.4; letter-spacing:0.5px;
}
body.about-v2 #about-content .inspiration-list li::before {
	content:"\2713"; position:absolute; left:0; top:7px; width:22px; height:22px;
	border:2px solid #FC5D59; border-radius:50%; color:#FC5D59; font-size:12px; font-weight:700;
	text-align:center; line-height:20px;
}
body.about-v2 #about-content .welcome-aboard { max-width:540px; margin:0 auto; padding:9px 0 9px 42px; text-align:left; color:#1A1A1A; font-size:16px; letter-spacing:0.5px; }

/* --- #12 Our Story: full-width teal-gray band, dark text ------------------- */
body.about-v2 #about-content #welcome {
	background:#E8EFEE; color:#1A1A1A; text-align:left; padding:42px 40px; margin:0 0 10px;
}
body.about-v2 #about-content #welcome h2 {
	background:none; border:none; border-bottom:1px solid #076E5A; color:#076E5A;
	font-size:26px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-align:center;
	padding:0 0 12px; margin:0 0 22px;
}
body.about-v2 #about-content #welcome p { color:#1A1A1A; font-size:16px; letter-spacing:0.5px; text-align:left; font-weight:400; }
body.about-v2 #about-content #welcome a { color:#FC5D59; }

/* --- #7 removed coral intro section, #13 removed bookcase (done in HTML) --- */

/* --- #14 "INSIDE MINTED PROSE" gallery: 3-column card grid + Load More ----- */
body.about-v2 #about-content #inside-minted-prose { padding-bottom:48px; }
body.about-v2 #about-content #inside-minted-prose > h2 {
	background:none; border:none; border-bottom:1px solid #076E5A; color:#076E5A;
	font-size:26px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-align:center;
	padding:0 0 12px; margin:40px 0 26px;
}
body.about-v2 #about-content .aboutDiscover { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:0; justify-content:center; }
/* flatten the nested thumb_rows so every port_thumb becomes a grid cell */
body.about-v2 #about-content .aboutDiscover .thumb_row { display:contents; }
/* card */
body.about-v2 #about-content .aboutDiscover .port_thumb {
	opacity:1 !important; display:flex; flex-direction:column; background:#E8EFEE;
	margin:0; width:310px; height:325px; padding-bottom:15px; box-sizing:border-box;
	aspect-ratio:auto; overflow:visible; position:static;
}
body.about-v2 #about-content .aboutDiscover .port_thumb a { display:flex; flex-direction:column; height:100%; text-decoration:none; }
body.about-v2 #about-content .aboutDiscover .port_thumb img { width:100%; height:205px; object-fit:cover; display:block; }
/* title now static, below the image */
body.about-v2 #about-content .aboutDiscover .port_thumb .title {
	position:static; opacity:1 !important; background:transparent; color:#1A1A1A; width:auto;
	padding:16px 16px 18px; text-align:center;
}
body.about-v2 #about-content .aboutDiscover .port_thumb .title h3 {
	color:#1A1A1A; font-size:18px; font-weight:600; line-height:1.3; letter-spacing:0.5px; text-align:center; margin:0;
}
body.about-v2 #about-content .aboutDiscover .port_thumb .title::after {
	content:"READ MORE"; display:block; margin-top:10px; color:#FC5D59; font-size:14px; font-weight:700;
	letter-spacing:0.5px; text-transform:uppercase; text-decoration:underline;
}
body.about-v2 #about-content .aboutDiscover .port_thumb .title p.copyright { color:#4A4A4A; font-size:11px; margin-top:6px; }
/* cards beyond the first 9 are hidden until "Load More" */
body.about-v2 #about-content .aboutDiscover .port_thumb.hidden-card { display:none; }
/* Load More button */
body.about-v2 #about-content .load-more-wrap { text-align:center; margin:34px 0 10px; }
body.about-v2 #about-content .load-more-btn {
	background:#fff; border:2px solid #FC5D59; color:#FC5D59; font-size:14px; font-weight:700;
	letter-spacing:1px; text-transform:uppercase; width:170px; height:40px; padding:12px 42px; box-sizing:border-box; cursor:pointer; font-family:inherit;
}
body.about-v2 #about-content .load-more-btn:hover, body.about-v2 #about-content .load-more-btn:focus { background:#FC5D59; color:#fff; }
@media (max-width:659px) { body.about-v2 #about-content .aboutDiscover { grid-template-columns:repeat(2,1fr); } }

/* --- Footer email form (same as other pages) — added in HTML next --------- */
body.about-v2 { overflow-x:hidden; }
body.about-v2 #wrapper { padding-bottom:0; }
body.about-v2 .social {
	background:#E8EFEE; width:100vw; position:relative; left:50%; transform:translateX(-50%);
	box-sizing:border-box; min-height:292px; padding:40px 20px; margin:0; border-top:none;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; overflow:hidden;
}
body.about-v2 .social h3 { font-size:24px; font-weight:600; color:#1A1A1A; margin:0; }
body.about-v2 .mailing-list-form { display:flex; width:100%; max-width:520px; }
body.about-v2 .mailing-list-form input[type="email"] {
	flex:1 1 auto; min-width:0; box-sizing:border-box; height:48px; background:#fff; border:1px solid #cfd6d5;
	border-right:none; padding:0 14px; font-size:16px; color:#1A1A1A; font-family:inherit;
}
body.about-v2 .mailing-list-form input[type="email"]::placeholder { color:#939393; }
body.about-v2 .mailing-list-form button {
	flex:0 0 auto; box-sizing:border-box; height:48px; display:inline-flex; align-items:center; justify-content:center;
	background:#FC5D59; color:#fff; border:none; padding:0 22px; font-size:14px; font-weight:700; line-height:1;
	text-transform:uppercase; letter-spacing:1px; cursor:pointer; font-family:inherit;
}
body.about-v2 .mailing-list-form button:hover, body.about-v2 .mailing-list-form button:focus { background:#EB534F; }
body.about-v2 .social-icons { display:flex; justify-content:center; gap:16px; }
body.about-v2 .social-icons a img { width:26px; height:26px; display:block; }
body.about-v2 .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }