/*
Playful, slightly whimsical portfolio layout using Chloe's charcoal, warm cream, white, muted blue, and light gray palette. Rounded corners, doodle-like shapes, soft patterns, and a few tilted details add personality while keeping the work easy to browse.
*/
:root {
  --page-background: #FBF5EA;
  --charcoal: #49382F;
  --cream: #F5EBDD;
  --white: #FFFFFF;
  --blue: #78AFC2;
  --gray: #E9E1D7;
  --muted: #79685C;
  --blue-light: #E3F0F2;
  --sunshine: #F5D36F;
  --lilac: #F4D7E2;
  --coral: #EBAFC2;
  --pink: #EBAFC2;
  --pink-light: #F8E6EC;
  --brown: #8A624A;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--page-background); color: var(--charcoal); font-family: "DM Sans", sans-serif; line-height: 1.65; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 18px 6vw; background: var(--cream); border-bottom: 1px solid #d8d0c5; }
.site-logo { font-family: "Playfair Display", serif; font-weight: 700; font-size: 2rem; letter-spacing: -.08em; text-decoration: none; }
.site-logo span { color: var(--blue); }
.navigation ul { display: flex; align-items: center; justify-content: center; gap: 27px; list-style: none; padding: 0; margin: 0; }
.navigation a { text-decoration: none; font-size: .9rem; font-weight: 600; padding: 7px 0; border-bottom: 2px solid transparent; }
.navigation a:hover, .navigation a:focus, .navigation a.current { color: var(--blue); border-bottom-color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Playfair Display", serif; line-height: 1.13; letter-spacing: -.035em; }
h1 { font-size: clamp(3rem, 6.5vw, 6.4rem); margin-bottom: 22px; }
h1 span, h2 span { color: var(--blue); }
h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); margin-bottom: 18px; }
h3 { line-height: 1.25; }
.eyebrow { color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .16em; margin-bottom: 16px; }
.home-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 5vw; align-items: center; padding: 7vw 6vw 6vw; }
.hero-copy { max-width: 700px; }
.welcome-wrap { max-width: 720px; }
.welcome-link { text-decoration: none; }
.hero-intro { max-width: 600px; color: #606663; font-size: 1.12rem; margin-bottom: 0; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 0; padding: 13px 20px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--blue); color: var(--white); }
.button-primary:hover, .button-primary:focus { background: var(--charcoal); }
.text-link { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.text-link:hover, .text-link:focus { color: var(--blue); }
.hero-footnote { border-top: 1px solid #d4cbbf; padding-top: 15px; margin-top: 40px; color: var(--muted); font-size: .8rem; }
.hero-visual { min-height: 480px; background: var(--blue); color: var(--white); position: relative; overflow: hidden; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.visual-top, .visual-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.visual-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); }
.circle-one { width: 360px; height: 360px; top: 60px; left: 18%; background: rgba(255,255,255,.08); }
.circle-two { width: 250px; height: 250px; top: 115px; left: 28%; background: rgba(247,232,213,.17); }
.visual-label { z-index: 1; align-self: center; font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(3.5rem, 7vw, 6.3rem); line-height: .92; letter-spacing: -.07em; transform: rotate(-7deg); }
.visual-label span { display: inline-block; color: var(--cream); font-family: "DM Sans", sans-serif; font-size: 2rem; margin-left: 10px; }
.content-width { width: min(1120px, 88%); margin-inline: auto; }
.quick-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding-top: 75px; padding-bottom: 75px; border-top: 1px solid #d8d0c5; }
.intro-copy { color: #5d625f; font-size: 1rem; }
.featured-section { background: var(--white); padding: 75px 0 60px; }
.section-title-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.section-title-row h2 { margin-bottom: 0; }
.section-title-row > a { margin-bottom: 8px; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.featured-card { min-height: 350px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; text-decoration: none; overflow: hidden; }
.featured-blue { background: var(--blue); color: var(--white); }
.featured-photo { position: relative; color: var(--white); }
.featured-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)); }
.featured-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-index, .feature-bottom { z-index: 1; position: relative; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.type-art { font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(3rem, 5vw, 4.8rem); line-height: .85; letter-spacing: -.07em; }
.type-art i { color: var(--cream); }
.social-art { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--blue); padding: 25px 18px; min-height: 175px; color: var(--blue); font-family: "Playfair Display", serif; font-size: 2rem; line-height: 1.05; }
.social-art b { font-family: "DM Sans", sans-serif; font-size: 2.4rem; }
.featured-cream { background: var(--cream); }
.sample-note { color: var(--muted); font-size: .78rem; margin-top: 20px; margin-bottom: 0; }
.skills-strip { padding-top: 60px; padding-bottom: 70px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-list span { border: 1px solid #cbd0ce; background: rgba(255,255,255,.55); padding: 9px 15px; font-size: .87rem; }
.site-footer { background: var(--charcoal); color: var(--white); padding: 30px 6vw 22px; text-align: center; font-size: .8rem; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; max-width: 1120px; margin: 0 auto 25px; text-align: left; }
.footer-top p { margin: 0; color: #e0e2e1; }
.footer-logo { color: var(--white); }
.footer-logo span { color: #8fc1ca; }
.site-footer > p { margin: 8px 0; color: #d1d5d3; }
.site-footer small { color: #e0e2e1; }
.page-main { padding-top: 70px; padding-bottom: 100px; }
.page-main > h1 { margin-bottom: 25px; }
.page-lede { max-width: 780px; color: #626865; font-size: 1.08rem; margin-bottom: 40px; }
.about-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: start; margin-top: 45px; }
.portrait-placeholder { min-height: 460px; background: var(--blue-light); color: var(--blue); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: "Playfair Display", serif; font-size: 2.5rem; line-height: 1.05; padding: 25px; }
.portrait-placeholder small { margin-top: 40px; font: 700 .65rem "DM Sans", sans-serif; letter-spacing: .12em; }
.about-copy p { color: #5f6562; }
.large-copy { font-family: "Playfair Display", serif; color: var(--charcoal) !important; font-size: 1.55rem; line-height: 1.35; }
.about-callout { border-left: 4px solid var(--blue); background: rgba(255,255,255,.65); padding: 20px 22px; margin: 28px 0; }
.about-callout span { color: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.about-callout p { margin: 8px 0 0; font-family: "Playfair Display", serif; color: var(--charcoal); font-size: 1.25rem; }
.experience-section { margin-top: 100px; padding-top: 45px; border-top: 1px solid #d8d0c5; }
.section-intro { color: var(--muted); max-width: 760px; }
.experience-list { margin-top: 30px; }
.experience-list article { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid #d8d0c5; }
.experience-num { color: var(--blue); font-weight: 700; }
.experience-list h3 { font-family: "Playfair Display", serif; font-size: 1.4rem; margin-bottom: 5px; }
.experience-list p { color: var(--muted); margin-bottom: 0; }
/* Built by Chloe: web development feature */
.web-development-section { margin-top: 70px; padding: 42px clamp(22px, 5vw, 58px); background: var(--blue-light); border-left: 5px solid var(--blue); }
.web-development-section h2 { max-width: 760px; }
.web-development-section p:not(.eyebrow) { max-width: 850px; color: #555c56; }
.web-development-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.web-development-tags span { padding: 7px 13px; border: 1px solid var(--blue); color: var(--charcoal); background: rgba(255,255,255,.65); font-size: .82rem; font-weight: 600; }
.skills-section { margin-top: 65px; }
.small-note { color: var(--muted); font-size: .82rem; }
.work-tabs { display: flex; flex-wrap: wrap; gap: 22px; padding: 17px 0; border-top: 1px solid #d8d0c5; border-bottom: 1px solid #d8d0c5; margin: 45px 0 75px; }
.work-tabs a { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.work-tabs a:hover, .work-tabs a:focus { color: var(--blue); }
.portfolio-section { margin-bottom: 95px; scroll-margin-top: 35px; }
.category-heading { display: flex; align-items: start; gap: 22px; margin-bottom: 28px; }
.category-heading > span { font-size: .9rem; color: var(--blue); font-weight: 700; border-top: 2px solid var(--blue); padding-top: 8px; min-width: 35px; }
.category-heading h2 { margin-bottom: 0; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.portfolio-card { background: var(--white); border: 1px solid var(--gray); }
.portfolio-image { width: 100%; height: 280px; object-fit: cover; }
.portfolio-copy { padding: 24px; }
.portfolio-copy h3, .wide-project h3, .video-card h3 { font-family: "Playfair Display", serif; font-size: 1.55rem; margin-bottom: 12px; }
.project-label { color: var(--blue); font-size: .68rem; letter-spacing: .12em; font-weight: 700; margin-bottom: 10px; }
.project-tools { color: #666d69; font-size: .82rem; border-top: 1px solid var(--gray); padding-top: 12px; }
.design-art { min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; }
.art-blue { background: var(--blue); color: var(--white); }
.art-white { background: var(--blue-light); color: var(--charcoal); }
.design-art > span { font-family: "Playfair Display", serif; font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; line-height: .88; letter-spacing: -.06em; }
.design-art i { color: var(--blue); }
.design-art b, .design-art small { font-size: .65rem; letter-spacing: .12em; }
.wide-project { display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; background: var(--white); border: 1px solid var(--gray); padding: 25px; }
.social-mock, .sports-mock { min-height: 280px; background: var(--blue-light); color: var(--charcoal); display: flex; flex-direction: column; justify-content: space-between; padding: 22px; }
.social-mock b, .sports-mock b { font-family: "Playfair Display", serif; font-size: clamp(2.7rem, 5vw, 4rem); line-height: .92; }
.social-mock span, .social-mock small, .sports-mock span, .sports-mock small { font-size: .65rem; letter-spacing: .12em; font-weight: 700; }
.sports-mock { background: var(--blue); color: var(--white); }
.video-card { display: grid; grid-template-columns: 100px 1fr; gap: 28px; align-items: center; background: var(--white); border: 1px solid var(--gray); padding: 30px; }
.video-icon { width: 82px; height: 82px; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); display: grid; place-items: center; padding-left: 4px; font-size: 1.6rem; }
.pitch-project { max-width: 850px; background: var(--blue-light); border-left: 5px solid var(--blue); padding: 28px; }
.pitch-project h3 { font-family: "Playfair Display", serif; font-size: 1.8rem; }
.blog-list { margin-top: 45px; }
.blog-card { display: grid; grid-template-columns: 55px 1fr 120px; gap: 25px; padding: 30px 0; border-top: 1px solid #d8d0c5; align-items: start; }
.blog-number { font-family: "Playfair Display", serif; color: var(--blue); font-size: 1.6rem; }
.blog-card h2 { font-size: 2rem; margin-bottom: 12px; }
.blog-card p:not(.project-label) { color: #626865; max-width: 700px; }
.blog-date { color: var(--blue); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-align: right; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; margin-top: 55px; }
.contact-details, .contact-form-section { border-top: 2px solid var(--blue); padding-top: 25px; }
.contact-details h2, .contact-form-section h2 { font-size: 2rem; }
.contact-details p { margin: 24px 0; }
.contact-details a { color: var(--blue); text-underline-offset: 4px; }
.contact-note { background: var(--blue-light); padding: 20px; margin-top: 30px; }
.contact-note span { color: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.contact-note p { margin: 8px 0 0; }
form { display: flex; flex-direction: column; }
label { font-size: .85rem; font-weight: 700; margin: 13px 0 6px; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid #cbd0ce; background: var(--white); color: var(--charcoal); font: inherit; border-radius: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
textarea { resize: vertical; }
form button { align-self: flex-start; margin-top: 18px; }
.map-section { margin-top: 90px; padding-top: 35px; border-top: 1px solid #d8d0c5; display: grid; grid-template-columns: .7fr 1.3fr; gap: 35px; align-items: center; }
.map-section h2 { font-size: 2.5rem; }
.map-section iframe { width: 100%; height: 330px; border: 0; }
@media (max-width: 800px) {
  .site-header { flex-direction: column; gap: 12px; }
  .navigation ul { flex-wrap: wrap; gap: 10px 18px; }
  .home-hero, .quick-intro, .about-layout, .contact-layout, .map-section, .wide-project { grid-template-columns: 1fr; }
  .home-hero { padding: 55px 6vw; }
  .hero-visual { min-height: 360px; }
  .quick-intro { gap: 20px; padding-top: 50px; padding-bottom: 50px; }
  .section-title-row { flex-direction: column; align-items: flex-start; }
  .featured-grid, .portfolio-grid { grid-template-columns: 1fr; }
  .featured-card { min-height: 300px; }
  .page-main { padding-top: 50px; }
  .portrait-placeholder { min-height: 330px; }
  .blog-card { grid-template-columns: 35px 1fr; gap: 15px; }
  .blog-date { grid-column: 2; text-align: left; }
  .video-card { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .map-section iframe { height: 290px; }
}


/* Whimsical update: soft curves, playful accents, and small hand-made details. */
body { background-image: radial-gradient(rgba(63,124,140,.10) 1px, transparent 1px); background-size: 19px 19px; }
.site-header { position: relative; z-index: 5; border-bottom: 0; background: rgba(247,232,213,.94); }
.site-logo { display: inline-grid; place-items: center; width: 57px; height: 57px; border-radius: 50% 50% 45% 55%; background: var(--sunshine); transform: rotate(-8deg); box-shadow: 4px 4px 0 var(--charcoal); }
.site-logo span { color: var(--blue); }
.navigation a { padding: 8px 13px; border: 0; border-radius: 24px; }
.navigation a:hover, .navigation a:focus, .navigation a.current { background: var(--white); border: 0; color: var(--charcoal); box-shadow: 0 3px 0 rgba(63,65,64,.14); }
h1 span, h2 span { display: inline-block; position: relative; color: var(--blue); }
.eyebrow { display: inline-block; background: var(--sunshine); color: var(--charcoal); border-radius: 4px 13px 4px 13px; padding: 5px 10px; letter-spacing: .12em; transform: rotate(-1deg); }
.home-hero { position: relative; overflow: hidden; padding-top: 6vw; }
.home-hero::before { content: "✳"; position: absolute; top: 28px; left: 46%; font-size: 3rem; color: var(--pink); transform: rotate(14deg); }
.hero-copy { position: relative; z-index: 1; }
.hero-intro { max-width: 550px; }
.button { border-radius: 999px; box-shadow: 4px 4px 0 var(--charcoal); transition: transform .18s ease, box-shadow .18s ease; }
.button:hover, .button:focus { transform: translate(2px,2px) rotate(-1deg); box-shadow: 2px 2px 0 var(--charcoal); }
.hero-visual { border-radius: 48% 48% 18px 18px; min-height: 470px; box-shadow: 9px 9px 0 var(--sunshine); transform: rotate(1.2deg); }
.circle-one { border-style: dashed; border-width: 2px; }
.circle-two { border-radius: 42% 58% 55% 45%; transform: rotate(24deg); }
.visual-label { transform: rotate(-8deg); text-shadow: 3px 3px 0 rgba(63,65,64,.2); }
.quick-intro { border-top: 2px dashed #c8bfb3; }
.featured-section { border-radius: 38px 38px 0 0; position: relative; }
.featured-card { border-radius: 22px 22px 22px 5px; box-shadow: 5px 6px 0 rgba(63,65,64,.12); transition: transform .2s ease; }
.featured-card:nth-child(1) { transform: rotate(-1deg); }
.featured-card:nth-child(2) { transform: rotate(1.1deg); }
.featured-card:nth-child(3) { transform: rotate(-.5deg); }
.featured-card:hover, .featured-card:focus { transform: translateY(-5px) rotate(0); }
.featured-blue { background: var(--blue); }
.featured-cream { background: var(--pink-light); }
.social-art { border-radius: 40% 12px 35% 12px; border: 2px dashed var(--blue); }
.skill-list span { border-radius: 999px 999px 999px 7px; border-color: #d2c7b8; }
.site-footer { border-radius: 34px 34px 0 0; }
.page-main > h1 { max-width: 1000px; }
.portrait-placeholder { border-radius: 46% 46% 20px 20px; border: 2px dashed var(--blue); background: var(--pink-light); transform: rotate(-1.5deg); box-shadow: 7px 7px 0 var(--sunshine); }
.about-callout { border-left: 0; border-radius: 8px 28px 8px 28px; background: var(--white); box-shadow: 5px 5px 0 var(--pink-light); }
.experience-section { border-top: 2px dashed #d8d0c5; }
.experience-list article { border-top: 1px dashed #d8d0c5; }
.work-tabs { border-top: 2px dashed #d8d0c5; border-bottom: 2px dashed #d8d0c5; gap: 12px 20px; }
.work-tabs a { background: var(--white); border-radius: 999px; padding: 7px 13px; text-decoration-thickness: 2px; }
.portfolio-card, .wide-project, .video-card { overflow: hidden; border: 0; border-radius: 20px 20px 20px 6px; box-shadow: 5px 5px 0 rgba(63,65,64,.12); }
.portfolio-card:nth-child(even) { transform: rotate(.5deg); }
.portfolio-card:nth-child(odd) { transform: rotate(-.4deg); }
.design-art, .social-mock, .sports-mock { border-radius: 14px; }
.art-blue { background: var(--blue); }
.art-white { background: var(--sunshine); }
.pitch-project { border-left: 0; border-radius: 10px 30px 10px 30px; background: var(--pink-light); box-shadow: 7px 7px 0 var(--blue-light); }
.contact-details, .contact-form-section { border-top: 3px dashed var(--blue); }
.contact-note { border-radius: 8px 24px 8px 24px; background: var(--sunshine); }
input, select, textarea { border-radius: 12px; border-color: #d4cbbf; }
.map-section { border-top: 2px dashed #d8d0c5; }
.map-section iframe { border-radius: 22px; box-shadow: 7px 7px 0 var(--pink-light); }
@media (max-width: 800px) {
  .site-logo { width: 50px; height: 50px; }
  .navigation ul { gap: 7px; }
  .navigation a { padding: 6px 10px; }
  .home-hero::before { left: auto; right: 7%; top: 12px; }
  .hero-visual { min-height: 340px; }
  .featured-card:nth-child(n) { transform: none; }
  .portfolio-card:nth-child(n) { transform: none; }
}


/* Real portfolio assets */
.hero-photo-visual { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px; background: var(--pink-light); }
.hero-portrait { width: min(76%, 330px); height: 330px; object-fit: cover; object-position: center 25%; border: 7px solid var(--white); border-radius: 48% 48% 18px 18px; box-shadow: 6px 6px 0 var(--sunshine); }
.hero-sticker { position: absolute; right: 3%; bottom: 19%; background: var(--sunshine); color: var(--charcoal); border: 2px solid var(--charcoal); border-radius: 50%; width: 118px; height: 118px; display: grid; place-content: center; text-align: center; font-weight: 800; line-height: 1.15; transform: rotate(10deg); box-shadow: 3px 3px 0 var(--charcoal); }
.image-feature-card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.image-feature-card img { width: 100%; height: 230px; object-fit: contain; background: var(--white); border-radius: 14px; padding: 8px; }
.featured-photo { overflow: hidden; }
.featured-photo img { width: 100%; height: 230px; object-fit: cover; border-radius: 14px; }
.portrait-photo { width: 100%; max-width: 410px; margin: 0; padding: 14px; background: var(--white); border-radius: 46% 46% 20px 20px; border: 2px dashed var(--blue); box-shadow: 7px 7px 0 var(--sunshine); transform: rotate(-1.5deg); }
.portrait-photo img { display: block; width: 100%; max-height: 520px; object-fit: cover; object-position: center 25%; border-radius: 42% 42% 12px 12px; }
.portrait-photo figcaption { text-align: center; font-size: .75rem; letter-spacing: .1em; font-weight: 700; padding: 12px 4px 2px; }
.portfolio-section { padding: 64px 0 42px; scroll-margin-top: 30px; border-top: 2px dashed #d8d0c5; }
.portfolio-section h2 { margin-top: 14px; margin-bottom: 12px; }
.section-intro { max-width: 760px; line-height: 1.75; margin-bottom: 28px; }
.real-work-grid, .photo-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.gallery-card { min-width: 0; margin: 0; padding: 10px; background: var(--white); border-radius: 18px 18px 18px 5px; box-shadow: 4px 5px 0 rgba(63,65,64,.12); }
.gallery-card:nth-child(3n + 1) { transform: rotate(-.6deg); }
.gallery-card:nth-child(3n + 2) { transform: rotate(.45deg); }
.gallery-card a { display: block; }
.gallery-card img { display: block; width: 100%; height: 250px; object-fit: contain; border-radius: 10px; background: #f7f5f0; }
.photo-gallery .gallery-card img { height: 290px; object-fit: contain; background: #2b2b2b; }
.gallery-card figcaption { font-size: .88rem; line-height: 1.35; padding: 11px 4px 5px; overflow-wrap: anywhere; }
.download-card { background: var(--pink-light); border-radius: 12px 28px 12px 28px; padding: 24px; box-shadow: 5px 5px 0 var(--blue-light); }
.media-grid, .pitch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.media-card, .pitch-project { background: var(--white); padding: 18px; border-radius: 20px 20px 20px 6px; box-shadow: 5px 5px 0 rgba(63,65,64,.12); min-width: 0; }
.media-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #202020; border-radius: 12px; }
.media-card h3, .pitch-project h3 { margin: 15px 0 8px; overflow-wrap: anywhere; }
.video-file-art { aspect-ratio: 16 / 9; border-radius: 12px; background: var(--blue); color: white; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.video-file-art span { font-size: .75rem; letter-spacing: .12em; }
.video-file-art strong { font-family: 'Playfair Display', serif; font-size: 1.5rem; overflow-wrap: anywhere; }
.video-file-art p { font-size: .9rem; }
.pitch-project { background: var(--pink-light); }
.portfolio-resources { margin: 50px 0 70px; padding: 30px; background: var(--sunshine); border-radius: 12px 34px 12px 34px; }
.portfolio-resources p { max-width: 700px; }
@media (max-width: 1000px) {
  .real-work-grid, .photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .media-grid, .pitch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .real-work-grid, .photo-gallery, .media-grid, .pitch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .gallery-card { padding: 7px; }
  .gallery-card img, .photo-gallery .gallery-card img { height: 190px; }
  .hero-portrait { height: 260px; }
  .hero-sticker { width: 90px; height: 90px; font-size: .82rem; }
  .portfolio-section { padding-top: 42px; }
}
@media (max-width: 420px) {
  .real-work-grid, .photo-gallery, .media-grid, .pitch-grid { grid-template-columns: 1fr; }
  .gallery-card img, .photo-gallery .gallery-card img { height: auto; max-height: 460px; }
}

/* 2026 refresh: warm editorial portfolio */
:root{--cream:#f5efdf;--white:#fffdf8;--charcoal:#292c2a;--blue:#315f62;--blue-light:#dce6df;--sunshine:#e8b85c;--lilac:#e9dfd0;--coral:#d88970;--gray:#e5dfd3;--muted:#666b65}
body{background-color:var(--cream);background-image:radial-gradient(rgba(49,95,98,.055) .8px,transparent .8px);background-size:22px 22px}
.site-header{background:rgba(245,239,223,.96);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid #ddd4c4;padding-top:14px;padding-bottom:14px}
.site-logo{background:var(--charcoal);color:var(--cream);box-shadow:3px 3px 0 var(--sunshine)}
.site-logo span{color:var(--sunshine)}
.navigation a.current,.navigation a:hover,.navigation a:focus{color:var(--blue);background:transparent;box-shadow:none;border-bottom:2px solid var(--blue)}
.eyebrow{background:transparent;color:var(--blue);padding:0;transform:none;border-radius:0;letter-spacing:.17em}
h1 span,h2 span{color:var(--blue)}
.home-hero{min-height:660px;padding-top:7vw;padding-bottom:7vw;gap:6vw}
.home-hero h1{font-size:clamp(3.6rem,7.2vw,7.2rem);line-height:.99;letter-spacing:-.055em}
.hero-intro{font-size:1.18rem;line-height:1.8;max-width:590px;color:#555c56}
.hero-photo-visual{min-height:520px;padding:0;background:#d9d0bd;border-radius:8px 8px 90px 8px;box-shadow:12px 12px 0 #e8b85c;transform:rotate(1deg);overflow:visible}
.hero-portrait{width:100%;height:100%;min-height:520px;position:absolute;inset:0;object-fit:cover;border:0;border-radius:8px 8px 90px 8px;box-shadow:none}
.hero-photo-visual:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(20,28,27,.52));border-radius:0 0 90px 8px;pointer-events:none}
.hero-sticker{z-index:2;right:-24px;bottom:24px;background:var(--cream);color:var(--charcoal);border:1px solid var(--charcoal);box-shadow:4px 4px 0 var(--charcoal);width:112px;height:112px;font-size:.83rem}
.hero-image-caption{position:absolute;z-index:2;left:24px;bottom:18px;color:#fffdf8;font-size:.78rem;max-width:70%;margin:0;font-weight:600}
.button{border-radius:3px;box-shadow:4px 4px 0 var(--sunshine)}
.button-primary{background:var(--blue)}
.featured-section{background:#eee6d7;padding:90px 0 85px}
.featured-card{min-height:410px;border-radius:5px;box-shadow:0 12px 28px rgba(38,42,38,.09)}
.featured-card:nth-child(n){transform:none}
.featured-card:hover{transform:translateY(-6px)}
.featured-card img{object-fit:cover}
.quick-intro{padding-top:95px;padding-bottom:95px}
.page-main{padding-top:85px}
.page-main>h1{font-size:clamp(3.5rem,6.6vw,6.5rem)}
.about-layout{grid-template-columns:.95fr 1.05fr;gap:6vw;align-items:start}
.portrait-photo{margin:0;position:sticky;top:110px}
.portrait-photo img{width:100%;max-height:620px;object-fit:cover;border-radius:5px 5px 90px 5px;box-shadow:10px 10px 0 var(--sunshine)}
.portrait-photo figcaption{font-size:.65rem;letter-spacing:.12em;font-weight:700;margin-top:18px;color:var(--blue)}
.athlete-note{margin:90px 0 0;padding:55px 6%;background:#e8e1d2;border-left:5px solid var(--blue);max-width:1000px}
.athlete-note h2{font-size:clamp(2.2rem,4vw,3.5rem)}
.athlete-note p:last-child{max-width:760px;color:#555c56;font-size:1.05rem}
.experience-section{margin-top:85px}
.portfolio-section{margin-bottom:125px}
.portfolio-section>h2{font-size:clamp(2.7rem,5vw,4.6rem)}
.section-intro{font-size:1.05rem;line-height:1.8;max-width:780px;color:#5d625d}
.photo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
.gallery-card{margin:0;background:var(--white);padding:10px 10px 14px;box-shadow:0 7px 22px rgba(40,43,40,.08);border-radius:4px;transition:transform .2s ease,box-shadow .2s ease}
.gallery-card:nth-child(5n+2){transform:translateY(14px)}
.gallery-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(40,43,40,.14)}
.gallery-card a{display:block;overflow:hidden;background:#e5dfd3;cursor:zoom-in}
.gallery-card img{width:100%;height:300px;object-fit:cover;transition:transform .35s ease}
.gallery-card a:hover img{transform:scale(1.035)}
.gallery-card figcaption{padding:12px 5px 0;font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--blue)}
.gallery-card figcaption span{font-weight:400;color:#85877f}
.download-card{padding:30px;background:#e8e1d2;border-radius:4px;display:flex;flex-direction:column;justify-content:center;min-height:250px}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.video-grid .video-card{display:block;background:var(--white);padding:18px}
.video-grid video{width:100%;max-height:390px;object-fit:contain;background:#1f2423}
.video-grid .video-card h3{margin-top:18px}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(20,24,23,.94);display:none;align-items:center;justify-content:center;padding:5vh 8vw;color:#fff}
.lightbox.is-open{display:flex}
.lightbox figure{margin:0;max-width:min(1100px,82vw);max-height:88vh;text-align:center}
.lightbox figure img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;margin:auto;box-shadow:0 15px 50px rgba(0,0,0,.35)}
.lightbox figcaption{margin-top:14px;color:#f5efdf;font-size:.85rem;letter-spacing:.05em}
.lightbox button{position:absolute;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:white;cursor:pointer;border-radius:50%;width:48px;height:48px;font-size:2rem;line-height:1}
.lightbox button:hover{background:rgba(255,255,255,.24)}
.lightbox-close{top:22px;right:25px}.lightbox-prev{left:25px}.lightbox-next{right:25px}
.site-footer{border-radius:0;background:var(--charcoal)}
.contact-details,.contact-form-section{border-color:var(--blue)}
input,select,textarea{background:var(--white);border-radius:3px}
@media(max-width:800px){.home-hero{min-height:auto}.hero-photo-visual{min-height:400px}.hero-portrait{min-height:400px}.photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.gallery-card img{height:230px}.video-grid{grid-template-columns:1fr}.portrait-photo{position:relative;top:auto}.hero-sticker{right:8px}.athlete-note{margin-top:60px;padding:35px 7%}}
@media(max-width:520px){.photo-gallery{grid-template-columns:1fr}.gallery-card img{height:280px}.lightbox{padding:7vh 5vw}.lightbox-prev{left:8px}.lightbox-next{right:8px}.lightbox button{width:40px;height:40px;font-size:1.6rem}.navigation ul{gap:5px 12px}}

/* 2026 refresh: warm editorial portfolio */
:root{--cream:#f5efdf;--white:#fffdf8;--charcoal:#292c2a;--blue:#315f62;--blue-light:#dce6df;--sunshine:#e8b85c;--lilac:#e9dfd0;--coral:#d88970;--gray:#e5dfd3;--muted:#666b65}
body{background-color:var(--cream);background-image:radial-gradient(rgba(49,95,98,.055) .8px,transparent .8px);background-size:22px 22px}
.site-header{background:rgba(245,239,223,.96);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid #ddd4c4;padding-top:14px;padding-bottom:14px}
.site-logo{background:var(--charcoal);color:var(--cream);box-shadow:3px 3px 0 var(--sunshine)}
.site-logo span{color:var(--sunshine)}
.navigation a.current,.navigation a:hover,.navigation a:focus{color:var(--blue);background:transparent;box-shadow:none;border-bottom:2px solid var(--blue)}
.eyebrow{background:transparent;color:var(--blue);padding:0;transform:none;border-radius:0;letter-spacing:.17em}
h1 span,h2 span{color:var(--blue)}
.home-hero{min-height:660px;padding-top:7vw;padding-bottom:7vw;gap:6vw}
.home-hero h1{font-size:clamp(3.6rem,7.2vw,7.2rem);line-height:.99;letter-spacing:-.055em}
.hero-intro{font-size:1.18rem;line-height:1.8;max-width:590px;color:#555c56}
.hero-photo-visual{min-height:520px;padding:0;background:#d9d0bd;border-radius:8px 8px 90px 8px;box-shadow:12px 12px 0 #e8b85c;transform:rotate(1deg);overflow:visible}
.hero-portrait{width:100%;height:100%;min-height:520px;position:absolute;inset:0;object-fit:cover;border:0;border-radius:8px 8px 90px 8px;box-shadow:none}
.hero-photo-visual:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(20,28,27,.52));border-radius:0 0 90px 8px;pointer-events:none}
.hero-sticker{z-index:2;right:-24px;bottom:24px;background:var(--cream);color:var(--charcoal);border:1px solid var(--charcoal);box-shadow:4px 4px 0 var(--charcoal);width:112px;height:112px;font-size:.83rem}
.hero-image-caption{position:absolute;z-index:2;left:24px;bottom:18px;color:#fffdf8;font-size:.78rem;max-width:70%;margin:0;font-weight:600}
.button{border-radius:3px;box-shadow:4px 4px 0 var(--sunshine)}
.button-primary{background:var(--blue)}
.featured-section{background:#eee6d7;padding:90px 0 85px}
.featured-card{min-height:410px;border-radius:5px;box-shadow:0 12px 28px rgba(38,42,38,.09)}
.featured-card:nth-child(n){transform:none}
.featured-card:hover{transform:translateY(-6px)}
.featured-card img{object-fit:cover}
.quick-intro{padding-top:95px;padding-bottom:95px}
.page-main{padding-top:85px}
.page-main>h1{font-size:clamp(3.5rem,6.6vw,6.5rem)}
.about-layout{grid-template-columns:.95fr 1.05fr;gap:6vw;align-items:start}
.portrait-photo{margin:0;position:sticky;top:110px}
.portrait-photo img{width:100%;max-height:620px;object-fit:cover;border-radius:5px 5px 90px 5px;box-shadow:10px 10px 0 var(--sunshine)}
.portrait-photo figcaption{font-size:.65rem;letter-spacing:.12em;font-weight:700;margin-top:18px;color:var(--blue)}
.athlete-note{margin:90px 0 0;padding:55px 6%;background:#e8e1d2;border-left:5px solid var(--blue);max-width:1000px}
.athlete-note h2{font-size:clamp(2.2rem,4vw,3.5rem)}
.athlete-note p:last-child{max-width:760px;color:#555c56;font-size:1.05rem}
.experience-section{margin-top:85px}
.portfolio-section{margin-bottom:125px}
.portfolio-section>h2{font-size:clamp(2.7rem,5vw,4.6rem)}
.section-intro{font-size:1.05rem;line-height:1.8;max-width:780px;color:#5d625d}
.photo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
.gallery-card{margin:0;background:var(--white);padding:10px 10px 14px;box-shadow:0 7px 22px rgba(40,43,40,.08);border-radius:4px;transition:transform .2s ease,box-shadow .2s ease}
.gallery-card:nth-child(5n+2){transform:translateY(14px)}
.gallery-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(40,43,40,.14)}
.gallery-card a{display:block;overflow:hidden;background:#e5dfd3;cursor:zoom-in}
.gallery-card img{width:100%;height:300px;object-fit:cover;transition:transform .35s ease}
.gallery-card a:hover img{transform:scale(1.035)}
.gallery-card figcaption{padding:12px 5px 0;font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--blue)}
.gallery-card figcaption span{font-weight:400;color:#85877f}
.download-card{padding:30px;background:#e8e1d2;border-radius:4px;display:flex;flex-direction:column;justify-content:center;min-height:250px}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.video-grid .video-card{display:block;background:var(--white);padding:18px}
.video-grid video{width:100%;max-height:390px;object-fit:contain;background:#1f2423}
.video-grid .video-card h3{margin-top:18px}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(20,24,23,.94);display:none;align-items:center;justify-content:center;padding:5vh 8vw;color:#fff}
.lightbox.is-open{display:flex}
.lightbox figure{margin:0;max-width:min(1100px,82vw);max-height:88vh;text-align:center}
.lightbox figure img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;margin:auto;box-shadow:0 15px 50px rgba(0,0,0,.35)}
.lightbox figcaption{margin-top:14px;color:#f5efdf;font-size:.85rem;letter-spacing:.05em}
.lightbox button{position:absolute;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:white;cursor:pointer;border-radius:50%;width:48px;height:48px;font-size:2rem;line-height:1}
.lightbox button:hover{background:rgba(255,255,255,.24)}
.lightbox-close{top:22px;right:25px}.lightbox-prev{left:25px}.lightbox-next{right:25px}
.site-footer{border-radius:0;background:var(--charcoal)}
.contact-details,.contact-form-section{border-color:var(--blue)}
input,select,textarea{background:var(--white);border-radius:3px}
@media(max-width:800px){.home-hero{min-height:auto}.hero-photo-visual{min-height:400px}.hero-portrait{min-height:400px}.photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.gallery-card img{height:230px}.video-grid{grid-template-columns:1fr}.portrait-photo{position:relative;top:auto}.hero-sticker{right:8px}.athlete-note{margin-top:60px;padding:35px 7%}}
@media(max-width:520px){.photo-gallery{grid-template-columns:1fr}.gallery-card img{height:280px}.lightbox{padding:7vh 5vw}.lightbox-prev{left:8px}.lightbox-next{right:8px}.lightbox button{width:40px;height:40px;font-size:1.6rem}.navigation ul{gap:5px 12px}}


/* Cream, pink, blue, yellow, brown & white palette */
body { background-color: var(--page-background); background-image: radial-gradient(rgba(138,98,74,.09) 1px, transparent 1px); }
.site-header { background: rgba(245,235,221,.96); }
.site-logo { color: var(--brown); }
.site-logo span, .navigation a:hover, .navigation a:focus, .navigation a.current { color: var(--brown); }
h1 span, h2 span { color: var(--brown); }
.eyebrow { background: var(--sunshine); color: var(--brown); }
.about-callout { box-shadow: 5px 5px 0 var(--pink-light); }
.portrait-photo { background: var(--white); border-color: var(--pink); }
.hero-visual { background: var(--pink-light); }
.hero-sticker { background: var(--sunshine); color: var(--brown); }
.featured-cream, .art-white { background: var(--pink-light); }
.pitch-project, .download-card { background: var(--pink-light); }
.contact-note { background: var(--sunshine); color: var(--brown); }
.web-development-section { background: var(--blue-light); border-left-color: var(--pink); }
.web-development-tags span { border-color: var(--pink); background: var(--white); }
.site-footer { background: var(--brown); }
.site-footer .footer-logo span { color: var(--sunshine); }
.gallery-card { border: 1px solid #eaded2; }
/* Custom CP Logo Colors */

.site-logo {
    color: #78AFC2 !important;
    text-decoration: none;
}

.site-logo .logo-c {
    color: #78AFC2 !important; /* Soft blue */
}

.site-logo .logo-p {
    color: #B89579 !important; /* Light brown */
}

.site-logo .logo-dot {
    color: #EBAFC2 !important; /* Soft pink */
}


/* ==================================
   RESUME PAGE
================================== */

.resume-page {
  padding-bottom: 80px;
}

.resume-hero {
  padding: 65px 0 75px;
  max-width: 850px;
}

.resume-hero h1,
.resume-section h2,
.resume-download h2 {
  font-family: 'Playfair Display', Georgia, serif;
}

.resume-hero h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.08;
  margin: 15px 0 25px;
}

.resume-hero h1 span,
.resume-section h2 span,
.resume-download h2 span {
  color: #78AFC2;
}

.resume-intro {
  max-width: 690px;
  font-size: 1.12rem;
  line-height: 1.85;
  color: #665548;
}

.resume-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}

.resume-section {
  padding: 55px 0;
  border-top: 1px solid rgba(138, 98, 74, 0.2);
}

.resume-section h2,
.resume-download h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 12px 0 35px;
}

.resume-entry {
  padding: 27px 30px;
  margin: 0 0 18px;
  background: #fff;
  border: 1px solid rgba(138, 98, 74, 0.13);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(75, 54, 39, 0.045);
}

.resume-entry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

.resume-entry h3,
.resume-skill-group h3 {
  margin: 0 0 5px;
  color: #604633;
  font-size: 1.2rem;
}

.resume-company {
  margin: 0 0 3px;
  font-weight: 700;
  color: #78AFC2;
}

.resume-location {
  margin: 0;
  color: #8A624A;
  font-size: 0.92rem;
}

.resume-date {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 30px;
  background: #FBF5EA;
  color: #8A624A;
  font-size: 0.82rem;
  font-weight: 700;
}

.resume-role {
  color: #8A624A;
  font-weight: 700;
}

.resume-entry > p:not(.resume-company):not(.resume-location) {
  line-height: 1.7;
}

.resume-entry ul {
  padding-left: 20px;
  margin: 15px 0 0;
}

.resume-entry li {
  padding-left: 5px;
  margin-bottom: 8px;
  line-height: 1.65;
  color: #665548;
}

.resume-skill-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.resume-skill-group {
  padding: 25px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(138, 98, 74, 0.13);
}

.resume-skill-group h3 {
  margin-bottom: 17px;
}

.resume-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.resume-tags span {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 30px;
  background: #FBF5EA;
  color: #76543F;
  font-size: 0.88rem;
  font-weight: 600;
}

.resume-skill-group:nth-child(2) .resume-tags span {
  background: #F9EAF0;
}

.resume-skill-group:nth-child(3) .resume-tags span {
  background: #EAF3F5;
}

.resume-download {
  padding: 50px;
  margin-top: 30px;
  border-radius: 24px;
  background: #F9EAF0;
  text-align: center;
}

.resume-download p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 auto 25px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .resume-hero {
    padding: 45px 0 55px;
  }

  .resume-entry {
    padding: 22px;
  }

  .resume-entry-top {
    flex-direction: column;
    gap: 10px;
  }

  .resume-skill-groups {
    grid-template-columns: 1fr;
  }

  .resume-download {
    padding: 35px 22px;
  }

  .resume-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ==================================
   JOURNAL / BLOG PAGE
================================== */

.journal-page {
  padding-bottom: 80px;
}

.journal-hero {
  position: relative;
  padding: 75px 0 85px;
  max-width: 850px;
}

.journal-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.05;
  margin: 15px 0 25px;
}

.journal-hero h1 span,
.journal-ending h2 span {
  color: #78AFC2;
}

.journal-hero > p:not(.eyebrow) {
  max-width: 670px;
  color: #665548;
  font-size: 1.1rem;
  line-height: 1.8;
}

.journal-decoration {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 17px;
  background: #F9EAF0;
  color: #8A624A;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  transform: rotate(-2deg);
}

.journal-post {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 45px;
  padding: 55px 0;
  border-top: 1px solid rgba(138, 98, 74, 0.2);
}

.journal-post-reverse {
  grid-template-columns: 1.1fr 0.9fr;
}

.journal-post-reverse .journal-post-image {
  order: 2;
}

.journal-post-reverse .journal-post-content {
  order: 1;
}

.journal-post-image {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #EAF3F5;
  aspect-ratio: 4 / 5;
}

.journal-post-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.journal-post-image:hover img {
  transform: scale(1.04);
}

.journal-image-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  padding: 9px 15px;
  background: #FBF5EA;
  color: #8A624A;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.journal-post-content {
  padding: 8px 0;
}

.journal-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  color: #78AFC2;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.journal-post-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #604633;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.15;
  margin: 22px 0;
}

.journal-lead {
  padding-left: 17px;
  border-left: 3px solid #EBAFC2;
  color: #8A624A;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.7;
  margin-bottom: 25px;
}

.journal-post-content p:not(.journal-lead) {
  color: #665548;
  font-size: 0.98rem;
  line-height: 1.85;
  margin-bottom: 18px;
}

.journal-post-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(138, 98, 74, 0.2);
  color: #8A624A;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.journal-ending {
  margin-top: 45px;
  padding: 65px 35px;
  background: #F9EAF0;
  border-radius: 24px;
  text-align: center;
}

.journal-ending h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.2;
  margin: 15px 0;
}

.journal-ending > p:not(.eyebrow) {
  max-width: 580px;
  margin: 0 auto 25px;
  line-height: 1.8;
  color: #665548;
}

@media (max-width: 800px) {
  .journal-post,
  .journal-post-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .journal-post-reverse .journal-post-image,
  .journal-post-reverse .journal-post-content {
    order: initial;
  }

  .journal-post-image {
    aspect-ratio: 4 / 3;
  }

  .journal-hero {
    padding: 50px 0 60px;
  }

  .journal-ending {
    padding: 45px 22px;
  }
}